HTML5 & the
future today
of the web
Hello. We are John
and Nathan. Here is
a bit of background
about each of us...
John Dyer



                              =                          +
 Master of Theology
Dallas Theological Seminary   ...
What we have in common: We
are both web developers who
want to see the “Big-C” church
better utilize web technologies.

We...
So, what is HTML5? It is the
newest version of HTML. But
also a phrase for everything
cool + new on the web. Not
all that’...
New Hotness!
HTML5 + CSS3 + JavaScript
Apple likes HTML5




   http://www.apple.com/html5/
Google likes HTML5




    http://www.html5rocks.com/
Mozilla (Firefox) likes HTML5




     https://developer.mozilla.org/en/HTML/HTML5
Opera likes HTML5




http://www.opera.com/docs/specs/presto25/html5/
Last (but not least) – Microsoft likes HTML5




               http://ie.microsoft.com/testdrive/
HTML5
is terse
Simplified doctype declaration



HTML5
<!DOCTYPE html>


XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1...
Simplified JavaScript embedding

HTML5
<script>
 // Code here.
</script>


XHTML 1.0 Transitional
<script type="text/javasc...
Simplified embedded styles


HTML5
<style>
 // Code here.
</style>


XHTML 1.0 Transitional
<style type="text/css">
 // Cod...
Simplified stylesheet linking



HTML5
<link rel="stylesheet" href="file.css" />


XHTML 1.0 Transitional
<link rel="styles...
New tags
in HTML5
<header>


<nav>


<aside>        <div class=”content”>


<figure>       <article>


 <img />
                <section>


...
But the aforementioned tags
don’t work well in Internet
Explorer (IE8 and older).

To make IE behave, you
can use an “HTML...
... but this requires extra code and adds a bit
of fragility to your site (IE breaks w/ JS off).

The up-side is improved ...
<div class=”header”>


<div class=”nav”>


<div class=”aside”>        <div class=”content”>


<div class=”figure”>       <...
... that way, you are writing code with the
“semantics” of the new HTML5 tags, without
the headaches of worrying about leg...
<canvas>
     + <svg>
Though SVG (Scalable Vector Graphics)
pre-dates HTML5, it is finally viable now
that IE9 supports it....
We won’t cover <svg> or <canvas> in
        detail during this talk, but two helpful
        JavaScript libraries are wort...
SVG is like construction paper. Layers retain
distinct shapes. SVG files can live without JS.




            http://www.fli...
Canvas is like a whiteboard drawing. No layers.
Note: Canvas only works in the browser via JS.




             http://www...
Canvas demos – ChromeExperiments.com
New <form> elements
<select><option>...
<textarea></textarea>
<input type="checkbox" />           HTML4,
<input type="file...
All form elements – in Opera
Adaptive HTML5 keyboards on mobile devices




              http://www.diveintohtml5.org/forms.html
HTML5
“Apps”
Example – ScrumCards.net

 iOS – Home screen app icon.      iOS – No browser chrome.       Android – Browser chrome
<link ...
Making an HTML5 “app” is pretty easy
*.manifest lets you store files offline
http://www.sencha.com/products/touch/
PhoneGap helps HTML5 power “native” apps




               http://www.phonegap.com/
HTML5’s (experimental) JavaScript APIs

Desktop Features           Browser Database
– Drag and drop            – Web SQL
–...
<video>
How do we make
it work reliably?
Flash was the most
reliable way to play
video on the web.

Roughly 99% of
all desktops have
Flash player.

iPhone/iPad don...
H.264 = Money
Figuratively + Literally... It’s the
most widely supported format.
But licensing costs browser
makers $5 mil...
H.264 support in the “Big-5”
YES



      Internet Explorer 9             Google Chrome           Safari




NO



       ...
Ogg = “Ugh!”
Nobody wants to re-encode
countless hours of video so
Firefox & Opera can play it.
– And have it look sub-par...
WebM/VP8
From: Google, Mozilla, Adobe.
Looks great. Is open source.
IE9 is on the fence. It doesn’t
(yet) work on mobile d...
1 file to rule them all...
H.264 via HTML5 with a fallback
to Flash or Silverlight (playing the
same file) if the browser ca...
Native <video> UI controls



                                                                             OPERA

        ...
CSS styled video controls – MediaElementJS.com
JavaScript <video> libraries



– videojs.com
– projekktor.com
– jwplayer.com
– jilion.com/sublime/video
– mediaelementjs....
CSS3
not HTML5
but is still
awesome
CSS3 gradients
.gradient {
  background: #eee url(gradient.png) repeat-x;

    background: -webkit-gradient(linear, left t...
westciv.com/tools/gradients
CSS3 box-shadow
.drop_shadow {
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 2px 5px;


    -moz-box-shadow: rgba(0, 0, 0, ...
CSS3 border-radius
.rounded_corners {
    -webkit-border-radius: 5px;


    -moz-border-radius: 5px;


    border-radius: ...
CSS3 text-shadow
.text_shadow {
  text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
}

Thankfully, all browsers that support text...
@font-face
 Times + Helvetica
   have a posse
Common fonts on Windows + Mac


Times                               Palatino
Georgia                             Comic San...
How can we use non-common fonts?

Flat images: It works. But hard to maintain.

sIFR: Pretty. Uses Flash. Fails on iPhone/...
Paul Irish’s “Bulletproof @font-face syntax”




        http://paulirish.com/2009/bulletproof-font-face-implementation-sy...
@font-face
@font-face {
  font-family: 'GentiumRegular';
  src: url('genr102_0-webfont.eot');
  src: local('☺'), url('genr...
Bible Web App
HTML5 + CSS3 + @font-face


  biblewebapp.com
jQuery Desktop
HTML5 + CSS3 + JavaScript


desktop.sonspring.com
“Slablet”
  HTML5 + CSS3 + JavaScript


host.sonspring.com/slablet
Social “Graph”
Cool! But who owns your data?
Lots of standards and
protocols that aren't really
being used right now.
Facebook “Like”: not open,
social, or graphic. Bu...
Helpful tool for adding “Like” buttons




              http://www.openlike.org/
Open social data – A cautionary tale...




             http://www.youropenbook.org/
HTML5 Resources
– alistapart.com/articles/get-ready-for-html-5
– dev.w3.org/html5/spec/Overview.html
– diveintohtml5.org
–...
CSS3 Resources
– border-radius.com
– code.google.com/webfonts
– css3.info
– css3generator.com
– css3please.com
– fontsquir...
slideshare.net/nathansmith/echo-html5



     Questions?
     John Dyer
     – twitter.com/johndyer
     – johndyer.name
 ...
Echo HTML5
Echo HTML5
Echo HTML5
Upcoming SlideShare
Loading in...5
×

Echo HTML5

77,577

Published on

Slides I co-presented with John Dyer at the 2010 Echo Conference in Dallas, TX.

http://johndyer.name/
http://echoconference.com/

0 Comments
120 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
77,577
On Slideshare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
Downloads
1,804
Comments
0
Likes
120
Embeds 0
No embeds

No notes for slide










































































  • Echo HTML5

    1. 1. HTML5 & the future today of the web
    2. 2. Hello. We are John and Nathan. Here is a bit of background about each of us...
    3. 3. John Dyer = + Master of Theology Dallas Theological Seminary Desktop OS = Windows Mobile = iOS Nathan Smith =+ Master of Divinity Asbury Theological Seminary Desktop OS = Mac Mobile = Android
    4. 4. What we have in common: We are both web developers who want to see the “Big-C” church better utilize web technologies. We also both JavaScript :)
    5. 5. So, what is HTML5? It is the newest version of HTML. But also a phrase for everything cool + new on the web. Not all that’s labeled HTML5 *is* HTML5. But that’s okay...
    6. 6. New Hotness! HTML5 + CSS3 + JavaScript
    7. 7. Apple likes HTML5 http://www.apple.com/html5/
    8. 8. Google likes HTML5 http://www.html5rocks.com/
    9. 9. Mozilla (Firefox) likes HTML5 https://developer.mozilla.org/en/HTML/HTML5
    10. 10. Opera likes HTML5 http://www.opera.com/docs/specs/presto25/html5/
    11. 11. Last (but not least) – Microsoft likes HTML5 http://ie.microsoft.com/testdrive/
    12. 12. HTML5 is terse
    13. 13. Simplified doctype declaration HTML5 <!DOCTYPE html> XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
    14. 14. Simplified JavaScript embedding HTML5 <script> // Code here. </script> XHTML 1.0 Transitional <script type="text/javascript"> /* <![CDATA[ */ // Code here. /* ]]> */ </script>
    15. 15. Simplified embedded styles HTML5 <style> // Code here. </style> XHTML 1.0 Transitional <style type="text/css"> // Code here. </style>
    16. 16. Simplified stylesheet linking HTML5 <link rel="stylesheet" href="file.css" /> XHTML 1.0 Transitional <link rel="stylesheet" href="file.css" type="text/css" media="all" />
    17. 17. New tags in HTML5
    18. 18. <header> <nav> <aside> <div class=”content”> <figure> <article> <img /> <section> <figcaption> <hgroup> <details> <p> etc... <summary> <section> <p> etc... <dialog> <footer>
    19. 19. But the aforementioned tags don’t work well in Internet Explorer (IE8 and older). To make IE behave, you can use an “HTML5 shim” JavaScript library... code.google.com/p/html5shim
    20. 20. ... but this requires extra code and adds a bit of fragility to your site (IE breaks w/ JS off). The up-side is improved semantic richness. In practicality though, there are not (yet) any tangible SEO or accessibility gains to be had. Given the trade-offs involved, and lack of tangible benefit, we’d recommend continuing to use <div> with “HTML5” class names...
    21. 21. <div class=”header”> <div class=”nav”> <div class=”aside”> <div class=”content”> <div class=”figure”> <div class=”article”> <img /> <div class=”section”> <div class=”figcaption”> <div class=”hgroup”> <div class=”details”> <p> etc... <div class=”summary”> <div class=”section”> <p> etc... <div class=”dialog”> <div class=”footer”>
    22. 22. ... that way, you are writing code with the “semantics” of the new HTML5 tags, without the headaches of worrying about legacy browser support. Then, one great day when IE8 no longer has significant market-share, you can “flip the switch” so to speak. Now that we’ve got those tags out of the way, let’s talk about the fun parts of HTML5.
    23. 23. <canvas> + <svg> Though SVG (Scalable Vector Graphics) pre-dates HTML5, it is finally viable now that IE9 supports it. This means all major browsers will support SVG and canvas.
    24. 24. We won’t cover <svg> or <canvas> in detail during this talk, but two helpful JavaScript libraries are worth noting... Raphaël (SVG) – Dmitry Baranovskiy Processing JS (Canvas) – John Resig http://www.raphaeljs.com/ http://www.processingjs.org/
    25. 25. SVG is like construction paper. Layers retain distinct shapes. SVG files can live without JS. http://www.flickr.com/photos/124330160/2127121118/
    26. 26. Canvas is like a whiteboard drawing. No layers. Note: Canvas only works in the browser via JS. http://www.flickr.com/photos/azuriblue/3350954960/
    27. 27. Canvas demos – ChromeExperiments.com
    28. 28. New <form> elements <select><option>... <textarea></textarea> <input type="checkbox" /> HTML4, <input type="file" /> XHTML <input type="radio" /> (and HTML5) <input type="text" /> ... etc. <input type="date" /> <input type="datetime" /> <input type="email" /> <input type="month" /> New in <input type="number" /> HTML5 <input type="range" /> <input type="tel" /> <input type="time" /> <input type="url" />
    29. 29. All form elements – in Opera
    30. 30. Adaptive HTML5 keyboards on mobile devices http://www.diveintohtml5.org/forms.html
    31. 31. HTML5 “Apps”
    32. 32. Example – ScrumCards.net iOS – Home screen app icon. iOS – No browser chrome. Android – Browser chrome <link rel=”apple-touch-icon” /> Status bar color can be set. always present. Caching only.
    33. 33. Making an HTML5 “app” is pretty easy
    34. 34. *.manifest lets you store files offline
    35. 35. http://www.sencha.com/products/touch/
    36. 36. PhoneGap helps HTML5 power “native” apps http://www.phonegap.com/
    37. 37. HTML5’s (experimental) JavaScript APIs Desktop Features Browser Database – Drag and drop – Web SQL – Live notifications – IndexedDB Much Much More! Cool! But not – document.querySelector (yet) ready for – Geolocation – localStorage prime-time. – Web workers
    38. 38. <video> How do we make it work reliably?
    39. 39. Flash was the most reliable way to play video on the web. Roughly 99% of all desktops have Flash player. iPhone/iPad don’t. They do support HTML5 <video> http://www.apple.com/hotnews/thoughts-on-flash/
    40. 40. H.264 = Money Figuratively + Literally... It’s the most widely supported format. But licensing costs browser makers $5 million a year. http://www.readwriteweb.com/archives/will_idealism_be_firefoxs_downfall.php
    41. 41. H.264 support in the “Big-5” YES Internet Explorer 9 Google Chrome Safari NO Firefox Opera
    42. 42. Ogg = “Ugh!” Nobody wants to re-encode countless hours of video so Firefox & Opera can play it. – And have it look sub-par. http://www.xiph.org/ogg/
    43. 43. WebM/VP8 From: Google, Mozilla, Adobe. Looks great. Is open source. IE9 is on the fence. It doesn’t (yet) work on mobile devices. http://www.webmproject.org/
    44. 44. 1 file to rule them all... H.264 via HTML5 with a fallback to Flash or Silverlight (playing the same file) if the browser cannot play H.264 natively via <video>. http://www.mediaelementjs.com/
    45. 45. Native <video> UI controls OPERA SAFARI FIREFOX CHROME IE9 http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/
    46. 46. CSS styled video controls – MediaElementJS.com
    47. 47. JavaScript <video> libraries – videojs.com – projekktor.com – jwplayer.com – jilion.com/sublime/video – mediaelementjs.com
    48. 48. CSS3 not HTML5 but is still awesome
    49. 49. CSS3 gradients .gradient { background: #eee url(gradient.png) repeat-x; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #eee)); background: -moz-linear-gradient(top center, #fff 0%, #eee 100%); } The first declaration works in all browsers. The second is for Safari and Google Chrome, which both use the WebKit rendering engine. The last is for Firefox (Mozilla prefix). Tip: Crop gradient images from a screenshot of a CSS3 page render. Ensures visual consistency and saves work.
    50. 50. westciv.com/tools/gradients
    51. 51. CSS3 box-shadow .drop_shadow { -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 2px 5px; -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 2px 5px; box-shadow: rgba(0, 0, 0, 0.5) 0 2px 5px; } The first declaration is for Safari and Chrome. The second is for Firefox. The third is for all browsers, which will eventually support box-shadow without a prefix. Currently: Opera and IE9 support it.
    52. 52. CSS3 border-radius .rounded_corners { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } The first line is for Safari and Chrome. Second is for Firefox. The third is for all browsers, which will eventually support border-radius without a prefix. Currently: Opera and IE9. More border-radius code here: gist.github.com/262663
    53. 53. CSS3 text-shadow .text_shadow { text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px; } Thankfully, all browsers that support text-shadow do so with the exact same syntax: Chrome, Safari, Firefox, Opera. – No word from IE9 yet.
    54. 54. @font-face Times + Helvetica have a posse
    55. 55. Common fonts on Windows + Mac Times Palatino Georgia Comic Sans Arial -or- Trebuchet Helvetica Verdana Courier ... etc. http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
    56. 56. How can we use non-common fonts? Flat images: It works. But hard to maintain. sIFR: Pretty. Uses Flash. Fails on iPhone/iPad. Can be affected by ad-blocking extensions. Cufón: Better. Uses JavaScript + <canvas>. But can be intensive. Best used on headlines. @font-face: No scripting. Pure CSS. Can be used for any text. Yet tricky to implement.
    57. 57. Paul Irish’s “Bulletproof @font-face syntax” http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
    58. 58. @font-face @font-face { font-family: 'GentiumRegular'; src: url('genr102_0-webfont.eot'); src: local('☺'), url('genr102_0-webfont.woff') format ('woff'), url('genr102_0-webfont.ttf') format('truetype'), url('genr102_0-webfont.svg#webfontX7s0ZYjS') format('svg'); } p { font-family: 'GentiumRegular'; } File generator fontsquirrel.com/fontface/generator Google fonts API (super easy) code.google.com/webfonts
    59. 59. Bible Web App HTML5 + CSS3 + @font-face biblewebapp.com
    60. 60. jQuery Desktop HTML5 + CSS3 + JavaScript desktop.sonspring.com
    61. 61. “Slablet” HTML5 + CSS3 + JavaScript host.sonspring.com/slablet
    62. 62. Social “Graph” Cool! But who owns your data?
    63. 63. Lots of standards and protocols that aren't really being used right now. Facebook “Like”: not open, social, or graphic. But fun and gives advertisers data.
    64. 64. Helpful tool for adding “Like” buttons http://www.openlike.org/
    65. 65. Open social data – A cautionary tale... http://www.youropenbook.org/
    66. 66. HTML5 Resources – alistapart.com/articles/get-ready-for-html-5 – dev.w3.org/html5/spec/Overview.html – diveintohtml5.org – html5.org – html5demos.com – html5doctor.com – sencha.com/products/touch – w3schools.com/html5
    67. 67. CSS3 Resources – border-radius.com – code.google.com/webfonts – css3.info – css3generator.com – css3please.com – fontsquirrel.com – modernizr.com – w3.org/Style/CSS/current-work – westciv.com/tools
    68. 68. slideshare.net/nathansmith/echo-html5 Questions? John Dyer – twitter.com/johndyer – johndyer.name Nathan Smith – twitter.com/nathansmith – sonspring.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×