Can I use it?www.caniuse.comSafari » inspect elementsin Safari, go to "Developer" menu, then choose "Show Web Inspector"... or simply right click on the element, then choose "Inspect Element."
Canvas, SVG, FlashSVG: 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-appleSVGit can have animation
it is better supported than canvas, especially with Raphael, a JavaScript Library
raphaeljs.comexamples:
secure.americanselect.org/my-colors (uses the Raphael)
developer.mozilla.org/en-US/demos/detail/the-planetariumHTML5 Boilerplatehtml5boilerplate.comfirst lesson:
www.youtube.com/watch?v=NMEB78VX2P0&noredirect=1
CSS • web fontsto 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 cornersgenerator:
border-radius.com (use the arrow keys to change values) (vender prefix)
example:
www.lmclassiccars.comCSS • Gradientsgenerator:
www.colorzilla.com/gradient-editor (love it!)
example:
www.kaleidoscopeapp.comCSS • Fireworks generates CSS3 code1) download extension and install it:
Adobe Fireworks CSS3 Mobile Pack2) 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_css3mobileCSS • Animation, Transition, Transformcustom easing animation tool:
matthewlein.com/ceaserexamples:
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.comjQuery & CSSCSS transition is lighter and easier to code, but not widely supported currently. So use jQuery for anything that CSS cannot do.
Modernizr www.modernizr.comit 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.comAdobe EdgeIt 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/2012Flash 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.
