Embed Size (px)
Citation preview
Introduction to HTML5Terry Ryan | Worldwide Developer EvangelistTwitter: @tpryan
Who Are You?
What is “HTML5”?
“HTML5” is an marketing term that companies
use to mean “cool shit that
works on an iPad”
• HTML5• CSS 3• JavaScript• CSS 2• JavaScript Frameworks• Canvas (Actually part of HTML5)• Video tag (Actually part of HTML5)• Anything the speaker wants it to
mean
“HTML5”
What is HTML5?
We’ll come back to that in
a second.
Review
What is HTML?
HTML is a language that
provides structure to
content
Start with ContentwhichElement?Trying to answer that age old question:Should that be a div, a span, or something else?
HomeContributeAbout
One of the main challenges we see in building semantic content is picking what tag to use when.
Add Structure<h1>whichElement?</h1><h2>Trying to answer that age old question:</h2><h2>Should that be a div, a span, or something else?</h2>
<ul><li>Home</li><li>Contribute</li><li>About</li></ul>
<p>One of the main challenges we see in building semantic content is picking what tag to use when. This site seeks to help with that. Now, before we get all judgy and preachy let me get a few tenants out there:</p>
What is CSS?
CSS is a language that
provides style to content
<h1>whichElement?</h1><h2>Trying to answer that age old question:</h2><h2>Should that be a div, a span, or something else?</h2>
<ul><li>Home</li><li>Contribute</li><li>About</li></ul>
<p>One of the main challenges we see in building semantic content is picking what tag to use when. This site seeks to help with that. Now, before we get all judgy and preachy let me get a few tenants out there:</p>
<style type="text/css">h1{
color: red;}h2{
color: blue;font-style: italic;
}
p{color: white;background-color:
black;}
</style>
Add Style
HTML/CSS results in
separation of content from
display
Why?
• Helps SEO• Makes work more portable or
changeable• Allows for multiple ways of display
Why separate content and display?
<style type="text/css">h1{
color: red;}h2{
color: blue;font-style: italic;
}
p{color: white;background-color:
black;}
</style>
Change Style<style type="text/css">
h1{color: red;font-size: 16px;
}h2{
color: blue;font-size: 26px;
}
ul{list-style: none;clear: both;display: block;width: 100%;height: 30px;padding: 0;
}li{
float: left;padding-right: 20px;
}
</style>
What is JavaScript?
JavaScript is a language that
provides behavior to
content
Behavior<html><head>
<script type="text/javascript">function createAlertMessage(){alert("Stop what you're doing!");}
</script>
</head><body><button onclick="createAlertMessage()">Alert!</button>
</body></html>
ContentStructure
StyleBehavior
Content - Database
Structure - HTML Style - CSSBehavior - JavaScript
Content - HTML Structure - HTML
Style - CSSBehavior - JavaScript
What is HTML5?
The 5th and most recent public
specification for HTML from the public groups
that….
The 5th and most recent public
specification for HTML from the public groups
that….
The most recent
specification for HTML
The most recent*
specification** for HTML*** * It’s not technically the most recent ** It’s actually a standard*** While we’re at it, there is no HTML5 only HTMLThis is why pragmatic people hate standards bodies sometimes
• New semantic elements– article, section, aside, header, footer,
etc
• New multimedia elements– audio, video, canvas
• New API’s for manipulation in JavaScript– Offline data, drag and drop, web storage
New in HTML5
What is CSS3?
A series of recommendations modules
to the standards
committees…
Can’t we just say “The
latest official version of
CSS?”
It’s not official.
It’s not the latest.
It’s not a version.
Let’s just say “HMTL5” for everything?
Ok?
What can you do with
“HTML5”?
SEMANTICS
Semantic HTML means your
markup describes it’s
content without presenting it
What do we mean by Semantic HTML• HTML where proper elements are used
– <p> denotes paragraph– <ul> denotes an list of items, where the order is not
important – <address> contains address information– <div> and <span> are used to describe information
• HTML where extraneous elements are not misused– No <p> for line breaking– No <blockquote> for indentation– No <h1> for big text
• HTML without presentation information– No <font>, <b>, <i> tags– No inline styles
Semantic HTML is a moving target
• Not Boolean• Not always objective• A continuum
Semantic HTML
<body background="css/bg.png">
<font face="Calibri”><center>
<table width="800" bgcolor="#FFFFFF" border="10" bordercolor="#FFFFFF">
<tr><td>
<table width="100%" bgcolor="#f0f0f0" border="0“>
<tr>
<td><h1>
<font face="Palatino Linotype">The Awesome Blog of Awesome</font>
</h1>
</td>
</tr>
<tr>
<td align="right"><p><i>Awesome is a State of Mind</i></p></td>
</tr>
</table>
<body>
<div id="header">
<h1>The Awesome Blog of Awesome</h1>
<p class="tagline">
Awesome is a State of Mind
</p>
</div>
RELATIVELY UNSEMANTIC RELATIVELY SEMANTIC
HTML5?
What does this have to do with HTML5?
HTML5 adds more semantics
<body> <header> <h1>The Awesome Blog of Awesome</h1> <p>Awesome is a State of Mind</p> </header> <nav> <ul> <li><a href="">Home</a></li> <li><a href="">Blog</a></li> <li><a href="">About</a></li> <li><a href="">Contact</a></li> </ul> </nav>
Outlines• Outlines seem really important to the
people who push semantic HTML 5• Are they really important?– Today: No– Tomorrow: Who knows?
• But this is a semantically correct way of reducing classes and extraneous divs
Header
Header
<div id="header">
<h1>The Awesome Blog of Awesome</h1>
<p class="tagline">Awesome is a State of Mind</p>
</div>
<header>
<h1>The Awesome Blog of Awesome</h1>
<h2>Awesome is a State of Mind</h2>
</header>
HTML 5
PREVIOUSLY
Footer
Footer
<div id="footer”>
<p>Copyright 2011 - Terry Ryan</p>
</div>
<footer>
<p>Copyright 2011 - Terry Ryan</p>
</footer>
HTML 5
PREVIOUSLY
Navigation
Navigation
<div id="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Blog</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Blog</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
PREVIOUSLY HTML 5
Articles
Articles
<div class="post”>
<div class="postheader">
<h3><a href="">I Scream My Thoughts</a></h3>
<p class="date">August 10, 2011</p>
</div>
<p>You probably haven't heard of them duis</p>
</div>
<article>
<header>
<h1><a href="">I Scream My Thoughts</a></h1>
<time>August 10, 2011</time>
</header>
<p>You probably haven't heard of them duis </p>
</article>
PREVIOUSLY HTML5
An article is a piece of
content that can
stand on it’s own
Content
57
Content
<div class=”content”>
<div class="post”>
...
</div>
<div class="post”>
...
</div>
<div class="post”>
...
</div>
</div>
<div class=”content”>
<article>
...
</article>
<article>
...
</article>
<article>
...
<article>
</div>
PREVIOUSLY HTML5
Also can be correct
<div class=”content”>
<div class="post”>
...
</div>
<div class="post”>
...
</div>
<div class="post”>
...
</div>
</div>
<section class=”content”>
<article>
...
</article>
<article>
...
</article>
<article>
...
<article>
</section>
PREVIOUSLY HTML5
Umm
That’s great, but frankly not that much of a different, how is that better?
Benefit 1
</div>
</div>
</div>
<div id=“footer”>
</div>
</body>
</div>
</article>
</div>
<footer>
</footer>
</body>
BEFORE THESE ELEMENTS AFTER
Benefit 2• Less monkeying with content
hierarchies
Main Page Archive Page Post Page
Article ArticleArticle
<article> <header> <h1><a href="">I Made a Post Thingie</a></h1> <time datetime="2011-09-02">September 2, 2011</time> </header> <img src="img/captain-awesome.jpg" width="300" height="200" alt="Image of Captain Awesome" /> <p>DIY ea nulla photo booth tempor occaecat, velit nihil mixtape scenester. Irony laboris echo park, wolf officia vice cupidatat labore butcher freegan farm-to-table nisi velit aliqua gluten-free. Aliquip nesciunt assumenda, wayfarers seitan wolf reprehenderit nulla twee sartorial dolore food truck voluptate ex vinyl. Aliquip ex enim, irony terry richardson trust fund consectetur fap pariatur dolor. Lo-fi nulla whatever mlkshk, banksy american apparel carles adipisicing incididunt wolf photo booth hipster. Wayfarers four loko ex cosby sweater, adipisicing sartorial non cardigan craft beer cillum reprehenderit terry richardson 3 wolf moon mollit. Ethical ut labore beard, 3 wolf moon duis readymade assumenda hipster tofu mcsweeney's master cleanse.</p></article>
article header h1
Benefit 3• No longer bound to one header or
one nav can have multiple.
New elements work across
modern browsers without fail
What’s you’re
definition of
Modern?
Use the HTML 5 Shiv
http://code.google.com/p/html5shiv/
FORMInput
HTML5 includes lots of
new <input> types
69
They aren’t supported on every browser
70
All browsers default to showing unknown input types as text
71
• Support is spotty• Browser vendors tend
to round, add magnifying glass, etc.
<input type=“search” name=“search” />
Search
• Provides validation• Provides email keyboard on iOS
devices.
<input type=“email” name=“email” />
Provides validationProvides url keyboard on iOS devices.
<input type=“url” name=“url” />
Url
Provides keypad on iOS and Android devices.Provides a stepper on desktopsTakes attributes:
– Min/Max– Step
<input type=“number” name=“cost” />
Number
• Provides keypad on iOS and Android devices.
<input type=“tel” name=“cell” />
Tel
Not well supported,
but have potential
• Provides a set of values• The slider allows you to pick one• Not terribly precise• Takes attributes:
• Min/Max• Step
<input type=“range” name=“volume” />
Range
• Provides validation• On Opera
• Displays a data picker
• On Safari/Chrome• Displays ticker
• IE• Dashes your hopes and dreams the way only IE can
<input type=“date” name=“dob” />
Date
FORMElements
Output
Semantically correct placeholder for calculated values.Can also be used a label for input type=“slider”
<output />
Output in Action<form class="order"> <label for="quantity">Quantity:</label> <input id="quantity" name="quantity" type="number" value="1" onChange="calc()" /> <br /> <label for="price">Price: </label> <input id="price" name="price" type="number" value="19.99" disabled /> <br /> <label for="total">Total: </label>
<output id="total" name="total" /> <br /></form>
<script type="application/javascript">function calc(){
var quantity = document.getElementById("quantity").value;var price = document.getElementById("price").value;var total = document.getElementById("total");total.value = Math.round(quantity * price * 100)/100;
}</script>
meter
Basically a Bar Chart of results<meter min=“0” max=“20” value=“12”>12cm</meter>
progress
Could be used to indicate progress through a multistep formCould be programmatically changed to indicate progress of program
<progress min=“100” value=“20”>20%</progress>
For Future Reference• HTML 5 General – http://diveintohtml5.org– http://html5doctor.com
• HTML5 Semantics– http://diveintohtml5.org/semantics.html
• HTML 5 Forms– http://wufoo.com/html5– http://diveintohtml5.org/forms.html
MULTIMEDIA
Canvas
• A drawing surface for–Manipulating images– Drawing– Saving Content
Canvas
Demo
• http://www.html5rocks.com/en/tutorials/canvas/integrating/ • http://dev.opera.com/articles/view/html-5-canvas-the-basics
/ • http://www.slideshare.net/bebraw/intro-to-html5-canvas-
8312015
More resources for Canvas
Video
<Image> for movies
Audio
<image> for sounds
Web Audio API
<canvas> for sounds
OTHERS
• Offline Storage• Drag and Drop
Others
CSS3
Remember CSS3 is a series of
modules…
• Transforms– Origins
• Shadows• Gradients• Transitions• Animations
CSS Modules
Demo
Various CSS Coolness
Why CSS3?
• Hardware Accelerated• Philosophically a display issue• Hardware Accelerated
Reasons
CONCLUSIONS
“HTML5” vs HTML5
Follow up?
• Preso will be up at – http://slideshare.net/tpryan
• Feel free to contact me– [email protected]– http://terrenceryan.com– Twitter: @tpryan
