Echo HTML5

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 Desktop OS = Windows Mobile = iOS

Nathan Smith

=+
Master of Divinity
Asbury Theological Seminary Desktop OS = Mac Mobile = Android

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 :)

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...

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/

Simpliﬁed 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">

Simpliﬁed JavaScript embedding

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

<script type="text/javascript">
/* <![CDATA[ */
// Code here.
/* ]]> */
</script>

Simpliﬁed embedded styles

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

<style type="text/css">
// Code here.
</style>

Simpliﬁed stylesheet linking

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

<link rel="stylesheet" href="file.css"
type="text/css" media="all" />

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

... 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 beneﬁt, we’d recommend continuing
to use <div> with “HTML5” class names...

... 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 signiﬁcant market-share,
you can “ﬂip 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.

<canvas>
+ <svg>
Though SVG (Scalable Vector Graphics)
pre-dates HTML5, it is ﬁnally viable now
that IE9 supports it. This means all major
browsers will support SVG and canvas.

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/

SVG is like construction paper. Layers retain
distinct shapes. SVG ﬁles can live without JS.

http://www.ﬂickr.com/photos/124330160/2127121118/

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

http://www.ﬂickr.com/photos/azuriblue/3350954960/

Canvas demos – ChromeExperiments.com

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" />

All form elements – in Opera

Adaptive HTML5 keyboards on mobile devices

http://www.diveintohtml5.org/forms.html

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.

Making an HTML5 “app” is pretty easy

*.manifest lets you store ﬁles ofﬂine

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
– Live notiﬁcations – IndexedDB

Much Much More! Cool! But not
– document.querySelector (yet) ready for
– Geolocation
– localStorage prime-time.
– Web workers

<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’t.
They do support
HTML5 <video>

http://www.apple.com/hotnews/thoughts-on-ﬂash/

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_ﬁrefoxs_downfall.php

H.264 support in the “Big-5”
YES

Internet Explorer 9 Google Chrome Safari

NO

Firefox Opera

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/

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/

1 ﬁle to rule them all...
H.264 via HTML5 with a fallback
to Flash or Silverlight (playing the
same ﬁle) if the browser cannot
play H.264 natively via <video>.

http://www.mediaelementjs.com/

Native <video> UI controls

OPERA

SAFARI

FIREFOX

CHROME

IE9

http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/

CSS styled video controls – MediaElementJS.com

JavaScript <video> libraries

– videojs.com
– projekktor.com
– jwplayer.com
– jilion.com/sublime/video
– mediaelementjs.com

CSS3
not HTML5
but is still
awesome

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 ﬁrst 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 preﬁx).

Tip: Crop gradient images from a screenshot of a CSS3
page render. Ensures visual consistency and saves work.

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 ﬁrst 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 preﬁx.

Currently: Opera and IE9 support it.

CSS3 border-radius
.rounded_corners {
-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;
}

The ﬁrst line is for Safari and Chrome. Second is for Firefox.
The third is for all browsers, which will eventually support
border-radius without a preﬁx. Currently: Opera and IE9.

More border-radius code here:
gist.github.com/262663

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.

@font-face
Times + Helvetica
have a posse

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

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.

Paul Irish’s “Bulletproof @font-face syntax”

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

@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

Bible Web App
HTML5 + CSS3 + @font-face

biblewebapp.com

jQuery Desktop

desktop.sonspring.com

“Slablet”

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. But fun
and gives advertisers data.

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
– html5.org
– html5demos.com
– html5doctor.com
– sencha.com/products/touch
– w3schools.com/html5

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

slideshare.net/nathansmith/echo-html5

Questions?
John Dyer
– twitter.com/johndyer
– johndyer.name
Nathan Smith
– twitter.com/nathansmith
– sonspring.com

Echo HTML5

More Related Content

What's hot (19)

Viewers also liked (20)

Similar to Echo HTML5 (20)

More from Nathan Smith (20)

Echo HTML5