Can I use it?
www.caniuse.com
Safari » inspect elements
in Safari, go to "Developer" menu, then choose "Show Web Inspector"... or simply right click on the element, then choose "Inspect Element."
Canvas, SVG, Flash
SVG: better for fewer elements and easier JavaScript event handlers
Canvas: better for lots of elements, heavy interaction, and games
Flash: good for everything if you don't care about iPhone
Canvas:
fallbacks: flashcanvas.net
examples: www.ownacolour.com (use Flash Canvas as a fallback for older IE)
developer.mozilla.org/en-US/demos/detail/bouncy-and-the-apple
SVG
it can have animation
it is better supported than canvas, especially with Raphael, a JavaScript Library raphaeljs.com
examples: secure.americanselect.org/my-colors (uses the Raphael)
developer.mozilla.org/en-US/demos/detail/the-planetarium
HTML5 Boilerplate
html5boilerplate.com
first lesson: www.youtube.com/watch?v=NMEB78VX2P0&noredirect=1
CSS • web fonts
to implement fonts: CSS @font-face
font delivery service: Google Webfonts or Typekit
examples: beercamp.com/2010 michelvrana.com/recent www.getfinch.com
www.fontsquirrel.com
CSS • rounded corners
generator: border-radius.com (use the arrow keys to change values) (vender prefix)
example: www.lmclassiccars.com
CSS • Gradients
generator: www.colorzilla.com/gradient-editor (love it!)
example: www.kaleidoscopeapp.com
CSS • Fireworks generates CSS3 code
1) download extension and install it: Adobe Fireworks CSS3 Mobile Pack
2) create a rounded corner button with a gradient and a drop shadow
3) in the CSS Properties panel (installed by this extension), copy all the CSS3 code!
download: labs.adobe.com/technologies/fireworks_css3mobile
CSS • Animation, Transition, Transform
custom easing animation tool: matthewlein.com/ceaser
examples: www.zurb.com/playground/css3-polaroids
stuffandnonsense.co.uk/content/demo/cannybill/21-10-2009/pricing.html
acko.net (crazy 3D transforms that only work in webkit)
CSS • Media Queries - targeting mobile devices
examples: spigotdesign.com
css-tricks.com
www.authenticjobs.com
jQuery & CSS
CSS transition is lighter and easier to code, but not widely supported currently. So use jQuery for anything that CSS cannot do.
Modernizr www.modernizr.com
it helps deal with browsers, that don't support certain features, and easily defines fall-backs for them.
for instance: .boxshadow vs .no-boxshadow
Mobile browsers are based on webkit.
CSS definitely works with HTML Strict; I believe that it also works with XHTML Transitional.
JW player for HTML5 Video at www.longtailvideo.com
Adobe Edge
It is not supported by IE 7 & 8. (Jan 2012)
Try: place the animation created in Edge into eMagazines/Tablet Publications using Adobe's Digital Publishing Suite (DPS) for an easy enhancement. Here are my notes.
1) use "Overlay..." Panel in InDesign(?) or Edge(?)
2) then go to "web content", then choose the HTML (also check Auto Play)
-----------------------------------------------
Adobe Webinar 03/08/2012
Flash is currently focus on App and Gaming.
It can create content for iOS and Android.
It also can export content (he showed animatin) to HTML5 using "Toolkit for Create JS."
Periodic Table of the Elements - to see how much HTML5 a website has used
http://joshduck.com/periodic-table.html
.
