SLIDES: slideshare.net/nathansmith/echo-html5
Two opposing platforms: Mac vs. Windows, iPhone vs. Android
Purpose: Big-C church better utilize the new technologies
What’s hot – HTML5 + CSS3 + JavaScript
HTML5 is terse, shorter and simpler
Examples: <DOCTYPE> <script> <style><stylesheet>
New Tags:
- <header>
- <nav>
- <aside>
- <article>
- <section>
- <figure>
- <figure>
Recommend: continue to use <div> and use “class” with the future HTML tags: <div class=”content”>
<canvas> + <svg> IE9 supports svg now – Raphael SVG library
Canvas works on phones, mouse intrativity with SVG – ChromeExperiments.com
In SVG and Canvas, you can do everything that Flash does. If you are starting from scratch, you would need to do it in SVG/Canvas and not Flash
New <form> elements: <input type=”date” /> “datetime” “email” “tel”
You also get adaptive keyboards on mobile devices
HTML5 “Apps” -
- ScrumCards.net CACHE MANIFEST index.html
- Sencha Touch HTML5 Mobile App Framework
- PhoneGap – start in HTML5 & JavaScript then they will make it work as a native app in iPhone
HTML5 JavaScript API’s (Desktop Features, Browser Database, Geolocation, localStorage) cool, but not ready yet
<video>
- Flash was the most reliable way to play video on the web, 99% of desktops, doesn’t work in iPhone
- H.264 = Money, browser makers pay $5M per year, works in IE, Chrome, Safari, but not Firefox & Opera
- Ogg = Ugh
- WebM/VP8 – looks good, not out there yet
- Recommendation: use H.264 via HTML5, with a fallback to Flash playing the same file if the browser can’t play H.264 natively via <video>
- <video source=”mymp4file.mp4″> – MediaElementJS.com CSS styled video controls to control the user interface
CSS3 – not HTML5 but still awesome
- .gradient { background: #eee url (gradient.png) repeat-x; background: -webkit-gradient; background: -moz-linear-gradient} look at: westciv.com/tools/gradients
- .drop_shadow { box-shadow: rgba (0, 0, 0, 0.5) 0 2px 5px; again adjust at westciv.com/tools
- .rounded_corners {border-radius: 5px look at gist.github.com
- .text_shadow {text-shadow: rgba(0,0,0,0.5) 0 1 px 1px;
@font-face
- lots of common fonts
- if you have a font you love for headings, you can load a font from the server
- flat images
- sIFR: flash, not working on iPhone
- Cufon: JavaScript + <canvas>
- @fone-face: pure css, tricky to implement
- fontsquirrel.com/fontface/generator
- code.google.com/webfonts
- must use fonts that are licensed to do this
Social “Graph” – who owns your data?
- standards and protocols aren’t really being used
- Facebook “Like”
- OpenLike – open protocol to allow sharing the things people like in a simple standard method between web applications
John Dyer – twitter.com/johndyer
Nathan Smith – twitter.com/nathansmith
Recent Comments