SlideShare a Scribd company logo
1 of 71
Download to read offline
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/
HTML5
is terse
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">
Simplified JavaScript embedding

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


XHTML 1.0 Transitional
<script type="text/javascript">
 /* <![CDATA[ */
 // Code here.
 /* ]]> */
</script>
Simplified embedded styles


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


XHTML 1.0 Transitional
<style type="text/css">
 // Code here.
</style>
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" />
New tags
in HTML5
<header>


<nav>


<aside>        <div class=”content”>


<figure>       <article>


 <img />
                <section>


<figcaption>     <hgroup>


<details>        <p>
                 etc...
 <summary>

                <section>
 <p>
 etc...
                 <dialog>




<footer>
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 benefit, we’d recommend continuing
to use <div> with “HTML5” class names...
<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”>
... 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.
<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.
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 files can live without JS.




            http://www.flickr.com/photos/124330160/2127121118/
Canvas is like a whiteboard drawing. No layers.
Note: Canvas only works in the browser via JS.




             http://www.flickr.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
HTML5
“Apps”
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 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
– Live notifications        – 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-flash/
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
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 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/
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 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.
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, 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.
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
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
Echo HTML5
jQuery Desktop
HTML5 + CSS3 + JavaScript


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


host.sonspring.com/slablet
Echo HTML5
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

More Related Content

What's hot

Opening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the IslandsOpening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the IslandsBastian Hofmann
 
Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Aaron Gustafson
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Zi Bin Cheah
 
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)Clément Wehrung
 
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]Aaron Gustafson
 
How to make Ajax work for you
How to make Ajax work for youHow to make Ajax work for you
How to make Ajax work for youSimon Willison
 
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]Aaron Gustafson
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshellLennart Schoors
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Terry Ryan
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1James Pearce
 
HTML5: The Next Internet Goldrush
HTML5: The Next Internet GoldrushHTML5: The Next Internet Goldrush
HTML5: The Next Internet GoldrushPeter Lubbers
 
Building mobile applications with DrupalGap
Building mobile applications with DrupalGapBuilding mobile applications with DrupalGap
Building mobile applications with DrupalGapAlex S
 
HTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input ValidationHTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input ValidationTodd Anglin
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Gil Fink
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)François Massart
 
Killing the Angle Bracket
Killing the Angle BracketKilling the Angle Bracket
Killing the Angle Bracketjnewmanux
 
Html5 Brown Bag
Html5 Brown BagHtml5 Brown Bag
Html5 Brown Bagstuplum
 

What's hot (20)

Opening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the IslandsOpening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the Islands
 
Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011
 
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
 
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
 
How to make Ajax work for you
How to make Ajax work for youHow to make Ajax work for you
How to make Ajax work for you
 
HTML 5 & CSS 3
HTML 5 & CSS 3HTML 5 & CSS 3
HTML 5 & CSS 3
 
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
 
HTML5: The Next Internet Goldrush
HTML5: The Next Internet GoldrushHTML5: The Next Internet Goldrush
HTML5: The Next Internet Goldrush
 
Building mobile applications with DrupalGap
Building mobile applications with DrupalGapBuilding mobile applications with DrupalGap
Building mobile applications with DrupalGap
 
HTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input ValidationHTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input Validation
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)
 
Killing the Angle Bracket
Killing the Angle BracketKilling the Angle Bracket
Killing the Angle Bracket
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
 
HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
 
Html5 Brown Bag
Html5 Brown BagHtml5 Brown Bag
Html5 Brown Bag
 

Viewers also liked

HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)Peter Lubbers
 
HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIsRemy Sharp
 
HTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPCHTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPCMayflower GmbH
 
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebHTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebRobin Hawkes
 
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScriptBuilding Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScriptSencha
 
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New WorldJavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New WorldRobert Nyman
 
課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)
課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)
課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)Jollen Chen
 
Evaluating Websites
Evaluating WebsitesEvaluating Websites
Evaluating WebsitesLisa Barnett
 
Html structure
Html structureHtml structure
Html structureakkias
 
The Worst Website Ever - Case Study Lings Cars
The Worst Website Ever - Case Study Lings CarsThe Worst Website Ever - Case Study Lings Cars
The Worst Website Ever - Case Study Lings CarsMarcin Kosedowski
 
Websites: The Good, the Bad and the Ugly
Websites: The Good, the Bad and the UglyWebsites: The Good, the Bad and the Ugly
Websites: The Good, the Bad and the UglyBlackbaud
 
CBSE Grade12, Computer Science, Sample Question Paper
CBSE Grade12, Computer Science, Sample Question PaperCBSE Grade12, Computer Science, Sample Question Paper
CBSE Grade12, Computer Science, Sample Question PaperMalathi Senthil
 
What is hot on the web right now - A W3C perspective
What is hot on the web right now - A W3C perspectiveWhat is hot on the web right now - A W3C perspective
What is hot on the web right now - A W3C perspectiveArmin Haller
 
Magento 2 - An Intro to a Modern PHP-Based System - ZendCon 2015
Magento 2 - An Intro to a Modern PHP-Based System - ZendCon 2015Magento 2 - An Intro to a Modern PHP-Based System - ZendCon 2015
Magento 2 - An Intro to a Modern PHP-Based System - ZendCon 2015Joshua Warren
 
Html5 structure & semantic
Html5 structure & semanticHtml5 structure & semantic
Html5 structure & semanticMuktadiur Rahman
 

Viewers also liked (20)

HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)
 
HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIs
 
HTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPCHTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPC
 
HTML5 on mobile
HTML5 on mobileHTML5 on mobile
HTML5 on mobile
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
 
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebHTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
 
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScriptBuilding Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
 
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New WorldJavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
 
課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)
課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)
課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)
 
Evaluating Websites
Evaluating WebsitesEvaluating Websites
Evaluating Websites
 
Web comparison
Web comparisonWeb comparison
Web comparison
 
Html structure
Html structureHtml structure
Html structure
 
The Worst Website Ever - Case Study Lings Cars
The Worst Website Ever - Case Study Lings CarsThe Worst Website Ever - Case Study Lings Cars
The Worst Website Ever - Case Study Lings Cars
 
Websites: The Good, the Bad and the Ugly
Websites: The Good, the Bad and the UglyWebsites: The Good, the Bad and the Ugly
Websites: The Good, the Bad and the Ugly
 
CBSE Grade12, Computer Science, Sample Question Paper
CBSE Grade12, Computer Science, Sample Question PaperCBSE Grade12, Computer Science, Sample Question Paper
CBSE Grade12, Computer Science, Sample Question Paper
 
What is hot on the web right now - A W3C perspective
What is hot on the web right now - A W3C perspectiveWhat is hot on the web right now - A W3C perspective
What is hot on the web right now - A W3C perspective
 
Magento 2 - An Intro to a Modern PHP-Based System - ZendCon 2015
Magento 2 - An Intro to a Modern PHP-Based System - ZendCon 2015Magento 2 - An Intro to a Modern PHP-Based System - ZendCon 2015
Magento 2 - An Intro to a Modern PHP-Based System - ZendCon 2015
 
Html5 structure & semantic
Html5 structure & semanticHtml5 structure & semantic
Html5 structure & semantic
 
HTML - Structure
HTML - StructureHTML - Structure
HTML - Structure
 

Similar to Echo HTML5

HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentTilak Joshi
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5Todd Anglin
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebGeorge Kanellopoulos
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Webmasuland
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersSascha Corti
 
Angels versus demons: balancing shiny and inclusive
Angels versus demons: balancing shiny and inclusiveAngels versus demons: balancing shiny and inclusive
Angels versus demons: balancing shiny and inclusiveChris Mills
 
Enjoying the full stack - Frontend 2010
Enjoying the full stack - Frontend 2010Enjoying the full stack - Frontend 2010
Enjoying the full stack - Frontend 2010Christian Heilmann
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるSadaaki HIRAI
 
JavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and LibrariesJavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and LibrariesOleksii Prohonnyi
 
soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5soft-shake.ch
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)Shumpei Shiraishi
 
Change by HTML5
Change by HTML5Change by HTML5
Change by HTML5dynamis
 
HTML5 Presentation
HTML5 PresentationHTML5 Presentation
HTML5 Presentationvs4vijay
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application developmentzonathen
 

Similar to Echo HTML5 (20)

HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Web
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web Developers
 
HTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 TemplateHTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 Template
 
Angels versus demons: balancing shiny and inclusive
Angels versus demons: balancing shiny and inclusiveAngels versus demons: balancing shiny and inclusive
Angels versus demons: balancing shiny and inclusive
 
Enjoying the full stack - Frontend 2010
Enjoying the full stack - Frontend 2010Enjoying the full stack - Frontend 2010
Enjoying the full stack - Frontend 2010
 
Real solutions, no tricks
Real solutions, no tricksReal solutions, no tricks
Real solutions, no tricks
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
 
JavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and LibrariesJavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and Libraries
 
soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
 
Change by HTML5
Change by HTML5Change by HTML5
Change by HTML5
 
HTML5 Presentation
HTML5 PresentationHTML5 Presentation
HTML5 Presentation
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
 
WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
 

More from Nathan Smith

Getting Started with React
Getting Started with ReactGetting Started with React
Getting Started with ReactNathan Smith
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do ThatNathan Smith
 
Rapid Templating with Serve
Rapid Templating with ServeRapid Templating with Serve
Rapid Templating with ServeNathan Smith
 
Proactive Responsive Design
Proactive Responsive DesignProactive Responsive Design
Proactive Responsive DesignNathan Smith
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsNathan Smith
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksNathan Smith
 
Accelerated Grid Theming
Accelerated Grid ThemingAccelerated Grid Theming
Accelerated Grid ThemingNathan Smith
 
Urban Leadership Slides
Urban Leadership SlidesUrban Leadership Slides
Urban Leadership SlidesNathan Smith
 
Themes from Ascent of a Leader
Themes from Ascent of a LeaderThemes from Ascent of a Leader
Themes from Ascent of a LeaderNathan Smith
 
Marketing 450 Guest Lecture
Marketing 450 Guest LectureMarketing 450 Guest Lecture
Marketing 450 Guest LectureNathan Smith
 
Fundamental Design Principles
Fundamental Design PrinciplesFundamental Design Principles
Fundamental Design PrinciplesNathan Smith
 
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End DevelopmentStriking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End DevelopmentNathan Smith
 
Echo Conference 2008
Echo Conference 2008Echo Conference 2008
Echo Conference 2008Nathan Smith
 

More from Nathan Smith (20)

Getting Started with React
Getting Started with ReactGetting Started with React
Getting Started with React
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do That
 
Rapid Templating with Serve
Rapid Templating with ServeRapid Templating with Serve
Rapid Templating with Serve
 
Proactive Responsive Design
Proactive Responsive DesignProactive Responsive Design
Proactive Responsive Design
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile Apps
 
Red Dirt JS
Red Dirt JSRed Dirt JS
Red Dirt JS
 
Refresh OKC
Refresh OKCRefresh OKC
Refresh OKC
 
DrupalCon jQuery
DrupalCon jQueryDrupalCon jQuery
DrupalCon jQuery
 
DSVC Design Talk
DSVC Design TalkDSVC Design Talk
DSVC Design Talk
 
Think Vitamin CSS
Think Vitamin CSSThink Vitamin CSS
Think Vitamin CSS
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
 
Meet Clumsy
Meet ClumsyMeet Clumsy
Meet Clumsy
 
Accelerated Grid Theming
Accelerated Grid ThemingAccelerated Grid Theming
Accelerated Grid Theming
 
Urban Leadership Slides
Urban Leadership SlidesUrban Leadership Slides
Urban Leadership Slides
 
Themes from Ascent of a Leader
Themes from Ascent of a LeaderThemes from Ascent of a Leader
Themes from Ascent of a Leader
 
7 Storey Mountain
7 Storey Mountain7 Storey Mountain
7 Storey Mountain
 
Marketing 450 Guest Lecture
Marketing 450 Guest LectureMarketing 450 Guest Lecture
Marketing 450 Guest Lecture
 
Fundamental Design Principles
Fundamental Design PrinciplesFundamental Design Principles
Fundamental Design Principles
 
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End DevelopmentStriking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End Development
 
Echo Conference 2008
Echo Conference 2008Echo Conference 2008
Echo Conference 2008
 

Echo HTML5

  • 1. HTML5 & the future today of the web
  • 2. Hello. We are John and Nathan. Here is a bit of background about each of us...
  • 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. 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. 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. New Hotness! HTML5 + CSS3 + JavaScript
  • 7. Apple likes HTML5 http://www.apple.com/html5/
  • 8. Google likes HTML5 http://www.html5rocks.com/
  • 9. Mozilla (Firefox) likes HTML5 https://developer.mozilla.org/en/HTML/HTML5
  • 11. Last (but not least) – Microsoft likes HTML5 http://ie.microsoft.com/testdrive/
  • 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. Simplified JavaScript embedding HTML5 <script> // Code here. </script> XHTML 1.0 Transitional <script type="text/javascript"> /* <![CDATA[ */ // Code here. /* ]]> */ </script>
  • 15. Simplified embedded styles HTML5 <style> // Code here. </style> XHTML 1.0 Transitional <style type="text/css"> // Code here. </style>
  • 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" />
  • 18. <header> <nav> <aside> <div class=”content”> <figure> <article> <img /> <section> <figcaption> <hgroup> <details> <p> etc... <summary> <section> <p> etc... <dialog> <footer>
  • 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. ... 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. <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. ... 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. <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. 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. SVG is like construction paper. Layers retain distinct shapes. SVG files can live without JS. http://www.flickr.com/photos/124330160/2127121118/
  • 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. Canvas demos – ChromeExperiments.com
  • 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. All form elements – in Opera
  • 30. Adaptive HTML5 keyboards on mobile devices http://www.diveintohtml5.org/forms.html
  • 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. Making an HTML5 “app” is pretty easy
  • 34. *.manifest lets you store files offline
  • 36. PhoneGap helps HTML5 power “native” apps http://www.phonegap.com/
  • 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. <video> How do we make it work reliably?
  • 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. 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. H.264 support in the “Big-5” YES Internet Explorer 9 Google Chrome Safari NO Firefox Opera
  • 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. 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. 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. Native <video> UI controls OPERA SAFARI FIREFOX CHROME IE9 http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/
  • 46. CSS styled video controls – MediaElementJS.com
  • 47. JavaScript <video> libraries – videojs.com – projekktor.com – jwplayer.com – jilion.com/sublime/video – mediaelementjs.com
  • 48. CSS3 not HTML5 but is still awesome
  • 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.
  • 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. 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. 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. @font-face Times + Helvetica have a posse
  • 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. 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. Paul Irish’s “Bulletproof @font-face syntax” http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
  • 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. Bible Web App HTML5 + CSS3 + @font-face biblewebapp.com
  • 61. jQuery Desktop HTML5 + CSS3 + JavaScript desktop.sonspring.com
  • 63. “Slablet” HTML5 + CSS3 + JavaScript host.sonspring.com/slablet
  • 65. Social “Graph” Cool! But who owns your data?
  • 66. 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.
  • 67. Helpful tool for adding “Like” buttons http://www.openlike.org/
  • 68. Open social data – A cautionary tale... http://www.youropenbook.org/
  • 69. 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
  • 70. 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
  • 71. slideshare.net/nathansmith/echo-html5 Questions? John Dyer – twitter.com/johndyer – johndyer.name Nathan Smith – twitter.com/nathansmith – sonspring.com

Editor's Notes