HTML5 Canvas CSS3 Audio Video

Authority
Svg/Canvas , Audio , Video
Adoption: Whole Industry is embracing HTML5
Apps:  showing HTML5 promise
Apps/Libraries in Details


major buzz words of HTML5:  Canvas, CSS3 , Audio , Video

1/ Authority

These are people in HTML5 area , considered Authority (experts) in their fields due to their 'broad understanding' of the subject and ' future visibility '

a/ Damon Oehlman :  Amazon EC2 Vs. RackSpace , expert in JS done lots of JS 

• Coded a HTML5 Mapping Library and some useful Javascript Touch Event Helpers.
• Written a book on developing mobile web apps for Android.
• Java vs. Python  App Engine
• Depression 

b/ 8Bit Rocket:  Author of 'HTML5 Canvas' book , developed lots of Games
I have always tried to  figure out new trends early, and most of the time we are Too Early (i.e we made crappy videos 15 years before youtube.com, we created Flash games 7 years before it became a viable indie game option, etc.)  
- However, we were hoping to hit the HTML5 Canvas nail on the head and I think, this time, our timing was just about right.  Our HTML5 Canvas book has already sold so many copies, that we have been asked to write another one.

1.2 / SVG  vs. Canvas

• SVG is a document format for scalable vector graphics.
• Canvas is a javascript API for drawing vector graphics to a bitmap of a specific size.

To elaborate a bit, on format versus API:SVG vs. Canvas by Opera .. see the 'circle ' code for both http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/#html5-canvas
http://stackoverflow.com/questions/4996374/what-is-the-difference-between-svg-and-html5-canvas

- SVG is a markup language for vector graphics and has DOM. This makes it very easy to alter the content after its creation.

- Canvas is a painting surface just like MS Paint without an undo button. You cannot alter the content. You only can overpaint it. It isvery performant because the browser does not need to handle a complete DOM for the imagehttp://caniuse.com/#cats=SVG - SVG support matrixhttp://www.20thingsilearned.com/en-US/what-is-the-internet/1

2/ Adoption: Whole Industry is embracing HTML5

Browser support for HTML5

a/ Chrome and Safari are ahead with HTML5 , Firefox caught up now.

b/ IE9 beta in  3/2010 , production in 3/2011 ,  IE9 works only on Vista and WIN7  NOT on XP

Internet Explorer 9 RC released: Everything you need to know - 2/2011 

a/ HTML5: A Look Behind the Technology Changing the Web - WSJ
   - Pandora released HTM5 website   - Some 34% of the 100 most popular websites used HTML5 in the quarter ended in September, according to binvisions.com

  - Cadir Lee, Zynga's chief technology officer, predicts companies will keep tailoring apps for hit devices like Apple's for some time. Yet he thinks HTML5 could eventually evolve to be an even broader technology movement, 

b/  IE9 is in prod. since 3/2011 ,  MSDN released Jquery plug-ins making Jquery standard.

c/ Adobe Drops Mobile Browser Flash Support 

I have always tried to  figure out new trends early, and most of the time we are Too Early (i.e we made crappy videos 15 years before youtube.com, we created Flash games 7 years before it became a viable indie game option, etc.)  

- However, we were hoping to hit the HTML5 Canvas nail on the head and I think, this time, our timing was just about right.  Our HTML5 Canvas book has already sold so many copies, that we have been asked to write another one.

3/ Apps :  showing HTML5 promise

JSFiddle good layout   (best one )
Top 100 Canvas Demos

html5 chess   : Used an existing JavaScript chess engine (GarboChess – created by Gary Linscott).  asr: This is using good Garbo engine but not good UI , below one has Good UI , so use that good UI with Garbo engine.

Chess:  - All logic in .js file  , Here is details

Priate Canvas Game: 

Canvas  table to chart : good one uses JQuery

Editors/IDE:  ( These show power of HTML5 )
ACE: Ace is a standalone code editor written in JavaScript. Our goal is to create a web based code editor that matches and extends the features, usability and performance of existing native editors such as TextMate, Vim or Eclipse.
 -  It can be easily embedded in any web page and JavaScript application. 
 - check this ACE is used embedded in many other applications 
(asr: we can use 'SAVE' etc. funcationality of this ACE in  'mindmapps' etc. kind of Apps. 

PythonAnywhere: You can use PythonAnywhere to write Python without installing anything locally.

  - Show off your web applications from our servers  - Collaborate and work together

  IDE LIVE -  Create web apps in JavaScript right from your browser

By releasingChemDoodle Web Components open-source, yet continuing to financially support the library, iChemLabs ensures that the next generation of scientific applications is easily achievable by academia, government and industry, and helps to make sure that the cost of education decreases while using the web to further spread science.

4/ Apps/Libraries in details

HTML 5 Canvas: Creating Gaudy Text Animations…Just Like Flash! (sort of)

There are more things that you can do with text, but most of them are manipulations of the global context. I’ll report back when I have mastered that aspect of the canvas to make something worth showing. 
- However, the point of this tutorial is to show that while some of the FX you can create with the HTML 5 Canvas are similar to those in Flash, creating them takes a lot more low level code than seems reasonable for a Flash designer. Obviously, tools will be created to build some of these things automatically (you can bet Adobe is on it right now), but those tools will still end-up writing out code much like this…all of it clearly visible in the HTML page.

- 1) Adobe Edge

http://www.pcworld.com/article/237043/adobe_edge_what_you_need_to_know.html

For the average user, the release of Adobe Edge is mostly valuable for what it says about the future of Web surfing. For years now, Firefox, Chrome, and Safari have battled over who has the most HTML5-compliant browser--but these distinctions don't really matter until there's a stream of HTML5 content on the web. A user-friendly tool for creating HTML5 (such as Edge) may be just what the standard needs to really take off.

http://www.webmonkey.com/2011/08/review-adobes-edge-offers-web-animation-sans-flash/

Unfortunately, HTML, CSS and JavaScript don’t offer any easy way to create animations. Developers comfortable writing raw code in text editors have, thus far, been the driving force behind web standards-based animation. Designers and animators accustomed to development tools like Flash, which offers visual layouts and drag-and-drop animation, have been left out of the web standards animation trend.

In its current form Edge will export your animations using div tags, some CSS animations, a fair bit of JSON and a combination of jQuery and some custom JavaScript to hold everything together.

Why go with div and CSS-based animations when there’s Canvas and SVG? Well, for one thing, this is a very early preview and Adobe claims that eventually Edge will support canvas and SVG (in fact Edge already has some support for importing SVG file).

politics here: asr: this Adobe guy says IOS 4 canvas problems are one reason why Adobe EDGE is NOT with Canvas/SVG as of now . It seems Apple playing not to have a superfast Canvas/SVG on Safari Browser to protect 'Native Apps' business. , same is the case with microsoft ( not to lose desktop ) , so that is why delay with IE9 .

-2) Sancha UI tool ( this is similar to Adobe Edge ) , finally Adobe may win as it has Ton of Flash developers with skill transform to Edge .

------

The future is bright

With Mozilla and Google so deeply invested in the next iteration of the Web, it's really no surprise that Internet Explorer 9 is so excellent. Microsoft knows that the Open Web platform could usurp desktop and native mobile apps

http://downloadsquad.switched.com/2011/02/10/internet-explorer-9-rc-released-everything-you-need-to-know

3) FireFox 4 , SVG , MathML support

http://hacks.mozilla.org/2010/05/firefox-4-the-html5-parser-inline-svg-speed-and-more/

----