Slide 1
Slide 1 text
HTML5 & the
future today
of the web
Slide 2
Slide 2 text
Hello. We are John
and Nathan. Here is
a bit of background
about each of us...
Slide 3
Slide 3 text
Master of Divinity
Asbury Theological Seminary
John Dyer
Nathan Smith
Master of Theology
Dallas Theological Seminary
+
=
= +
Desktop OS = Windows
Desktop OS = Mac
Mobile = iOS
Mobile = Android
Slide 4
Slide 4 text
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 :)
Slide 5
Slide 5 text
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...
Slide 6
Slide 6 text
New Hotness!
HTML5 + CSS3 + JavaScript
Slide 7
Slide 7 text
http://www.apple.com/html5/
Apple likes HTML5
Slide 8
Slide 8 text
http://www.html5rocks.com/
Google likes HTML5
Slide 9
Slide 9 text
Mozilla (Firefox) likes HTML5
https://developer.mozilla.org/en/HTML/HTML5
Slide 10
Slide 10 text
Opera likes HTML5
http://www.opera.com/docs/specs/presto25/html5/
Slide 11
Slide 11 text
http://ie.microsoft.com/testdrive/
Last (but not least) – Microsoft likes HTML5
Slide 12
Slide 12 text
HTML5
is terse
Slide 13
Slide 13 text
HTML5
XHTML 1.0 Transitional
Simplified doctype declaration
Slide 14
Slide 14 text
HTML5
// Code here.
XHTML 1.0 Transitional
/* <![CDATA[ */
// Code here.
/* ]]> */
Simplified JavaScript embedding
Slide 15
Slide 15 text
HTML5
// Code here.
XHTML 1.0 Transitional
// Code here.
Simplified embedded styles
Slide 16
Slide 16 text
HTML5
XHTML 1.0 Transitional
Simplified stylesheet linking
Slide 17
Slide 17 text
New tags
in HTML5
Slide 18
Slide 18 text
etc...
etc...
Slide 19
Slide 19 text
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
Slide 20
Slide 20 text
... 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
with “HTML5” class names...
Slide 21
Slide 21 text
etc...
etc...
Slide 22
Slide 22 text
... 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.
Slide 23
Slide 23 text
+
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.
Slide 24
Slide 24 text
We won’t cover or 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/
Slide 25
Slide 25 text
SVG is like construction paper. Layers retain
distinct shapes. SVG files can live without JS.
http://www.flickr.com/photos/124330160/2127121118/
Slide 26
Slide 26 text
Canvas is like a whiteboard drawing. No layers.
Note: Canvas only works in the browser via JS.
http://www.flickr.com/photos/azuriblue/3350954960/
Slide 27
Slide 27 text
Canvas demos – ChromeExperiments.com
Slide 28
Slide 28 text
New elements
...
... etc.
HTML4,
XHTML
(and HTML5)
New in
HTML5
Slide 29
Slide 29 text
All form elements – in Opera
Slide 30
Slide 30 text
http://www.diveintohtml5.org/forms.html
Adaptive HTML5 keyboards on mobile devices
Slide 31
Slide 31 text
HTML5
“Apps”
Slide 32
Slide 32 text
Example – ScrumCards.net
iOS – Home screen app icon.
iOS – No browser chrome.
Status bar color can be set.
Android – Browser chrome
always present. Caching only.
Slide 33
Slide 33 text
Making an HTML5 “app” is pretty easy
Slide 34
Slide 34 text
*.manifest lets you store files offline
Slide 35
Slide 35 text
http://www.sencha.com/products/touch/
Slide 36
Slide 36 text
http://www.phonegap.com/
PhoneGap helps HTML5 power “native” apps
Slide 37
Slide 37 text
HTML5’s (experimental) JavaScript APIs
Desktop Features
– Drag and drop
– Live notifications
Browser Database
– Web SQL
– IndexedDB
Much Much More!
– document.querySelector
– Geolocation
– localStorage
– Web workers
Cool! But not
(yet) ready for
prime-time.
Slide 38
Slide 38 text
How do we make
it work reliably?
Slide 39
Slide 39 text
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
http://www.apple.com/hotnews/thoughts-on-flash/
Slide 40
Slide 40 text
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
Slide 41
Slide 41 text
Internet Explorer 9 Google Chrome Safari
Firefox Opera
H.264 support in the “Big-5”
YES
NO
Slide 42
Slide 42 text
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/
Slide 43
Slide 43 text
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/
Slide 44
Slide 44 text
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 .
http://www.mediaelementjs.com/
Slide 45
Slide 45 text
Native UI controls
OPERA
SAFARI
FIREFOX
CHROME
IE9
http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/
Slide 46
Slide 46 text
CSS styled video controls – MediaElementJS.com
Slide 47
Slide 47 text
JavaScript libraries
– videojs.com
– projekktor.com
– jwplayer.com
– jilion.com/sublime/video
– mediaelementjs.com
Slide 48
Slide 48 text
CSS3
not HTML5
but is still
awesome
Slide 49
Slide 49 text
.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%);
}
CSS3 gradients
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.
Slide 50
Slide 50 text
westciv.com/tools/gradients
Slide 51
Slide 51 text
.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;
}
CSS3 box-shadow
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.
Slide 52
Slide 52 text
.rounded_corners {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
CSS3 border-radius
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
Slide 53
Slide 53 text
.text_shadow {
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
}
CSS3 text-shadow
Thankfully, all browsers that support text-shadow do so with
the exact same syntax: Chrome, Safari, Firefox, Opera.
– No word from IE9 yet.
Slide 54
Slide 54 text
@font-face
Times + Helvetica
have a posse
Slide 55
Slide 55 text
Common fonts on Windows + Mac
Times
Georgia
Arial -or-
Helvetica
Courier
Palatino
Comic Sans
Trebuchet
Verdana
... etc.
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
Slide 56
Slide 56 text
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 + .
But can be intensive. Best used on headlines.
@font-face: No scripting. Pure CSS. Can be
used for any text. Yet tricky to implement.
Slide 57
Slide 57 text
Paul Irish’s “Bulletproof @font-face syntax”
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
Slide 58
Slide 58 text
@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
Slide 59
Slide 59 text
Bible Web App
HTML5 + CSS3 + @font-face
biblewebapp.com
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
jQuery Desktop
HTML5 + CSS3 + JavaScript
desktop.sonspring.com
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
“Slablet”
HTML5 + CSS3 + JavaScript
host.sonspring.com/slablet
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
Social “Graph”
Cool! But who owns your data?
Slide 66
Slide 66 text
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.
Slide 67
Slide 67 text
http://www.openlike.org/
Helpful tool for adding “Like” buttons
Slide 68
Slide 68 text
Open social data – A cautionary tale...
http://www.youropenbook.org/
Slide 69
Slide 69 text
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
Slide 70
Slide 70 text
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
Slide 71
Slide 71 text
Questions?
John Dyer
– twitter.com/johndyer
– johndyer.name
Nathan Smith
– twitter.com/nathansmith
– sonspring.com
slideshare.net/nathansmith/echo-html5