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