Quality Development with HTML5
- 2. SHAY HOWE
www.shayhowe.com – @letscounthedays
Quality Development with HTML5 & CSS3 @letscounthedays
- 3. HTML5 CSS3
Markup language to give Presentation language to
content structure and give content style and
meaning. appearance.
Quality Development with HTML5 & CSS3 @letscounthedays
- 7. DOCTYPE
HTML
<!DOCTYPE
html
PUBLIC
"-‐//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/
html4/loose.dtd">
HTML5
<!DOCTYPE
html>
Quality Development with HTML5 & CSS3 @letscounthedays
- 13. GETTING STARTED
HTML5 Shiv
<!-‐-‐[if
IE]>
<script
src="http://html5shiv.googlecode.com/
svn/trunk/html5.js"></script>
<![endif]-‐-‐>
CSS
article,
aside,
footer,
header,
hgroup,
nav,
section
{
display:
block;
}
Quality Development with HTML5 & CSS3 @letscounthedays
- 15. NEW ELEMENTS
• article • footer • rt
• aside • header • ruby
• audio • hgroup • section
• canvas • keygen • source
• command • mark • summary
• datalist • meter • time
• details • nav • video
• embed • output • wbr
• figcaption • progress
• figure • rp
Quality Development with HTML5 & CSS3 @letscounthedays
- 17. STRUCTURAL ELEMENTS
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>...</section>
</article>
<aside...</aside>
<footer>...</footer>
</body>
Quality Development with HTML5 & CSS3 @letscounthedays
- 19. HGROUP
<header>
<hgroup>
<h1>Shay
Howe</h1>
<h2>Man,
Myth
or
Legend</h2>
</hgroup>
</header>
Quality Development with HTML5 & CSS3 @letscounthedays
- 23. FIGURE & FIGCAPTION
<figure>
<img
src="shay.jpg"
alt="Shay
Howe">
<figcaption>Shay
Howe
the
Man</figcaption>
</figure>
<figure>
<img
src="june.jpg"
alt="June">
<img
src="july.jpg"
alt="July">
<img
src="august.jpg"
alt="August">
<figcaption>Summer
Months</figcaption>
</figure>
Quality Development with HTML5 & CSS3 @letscounthedays
- 25. MARK
<h1>Search
results
for
'chicago'</h1>
<ol>
<li><a
href="http://www.shayhowe.com/">
Shay
is
from
<mark>Chicago</mark>.
</a></li>
</ol>
Quality Development with HTML5 & CSS3 @letscounthedays
- 26. METER
<meter>7
out
of
10
stars</meter>
<meter
max="10">7
stars</meter>
<meter
min="0"
max="105"
low="5"
high="65"
optimum="45"
value="47">The
car
is
moving
at
a
decent
average
mile
per
hour.</meter>
Quality Development with HTML5 & CSS3 @letscounthedays
- 30. AUDIO CONTROLS
<audio
id="player"
src="song.mp3"></audio>
<div>
<button
onclick="document.getElementById('player').play()">
Play
</button>
<button
onclick="document.getElementById('player').pause()">
Pause
</button>
<button
onclick="document.getElementById('player').volume
+=
0.1">
Volume
Up
</button>
<button
onclick="document.getElementById('player').volume
-‐=
0.1">
Volume
Down
</button>
</div>
Quality Development with HTML5 & CSS3 @letscounthedays
- 31. AUDIO FALLBACKS
<audio
controls>
<source
src="song.ogg"
type="audio/ogg">
<source
src="song.mp3"
type="audio/mpeg">
<object
type="application/x-‐shockwave-‐flash"
data="player.swf?soundFile=song.mp3">
<param
name="movie"
value="player.swf?soundFile=wild-‐
thing.mp3">
<a
href="song.mp3">Download
song</a>
</object>
</audio>
Quality Development with HTML5 & CSS3 @letscounthedays
- 33. VIDEO
<video
src="movie.mp4"
controls
height="390"
width="640"></video>
<video
src="movie.mp4"
controls
height="390"
width="640"
poster="image.jpg"></video>
Quality Development with HTML5 & CSS3 @letscounthedays
- 35. NEW INPUTS
• color • range
• date • search
• datetime • tel
• datetime-‐local • time
• email • url
• month • week
• number
Quality Development with HTML5 & CSS3 @letscounthedays
- 37. DATE & TIME
• date:
2011-‐08-‐24
• datetime:
2011-‐08-‐24T12:00:00+01
• datetime-‐local:
2011-‐08-‐24T12:00:00
• month:
2011-‐08
• time:
12:00:00
• week:
2011-‐W34
<input
id="birthday"
name="birthday"
type="datetime-‐local">
Quality Development with HTML5 & CSS3 @letscounthedays
- 48. NEW ATTRIBUTES
• autocomplete • min
• autofocus • multiple
• formaction • novalidate
• formenctype • pattern
• formmethod • placeholder
• formnovalidate • readonly
• formtarget • required
• list • spellcheck
• max • step
Quality Development with HTML5 & CSS3 @letscounthedays
- 51. DATALIST
<input
id="city"
name="city"
type="city"
list="cities">
<datalist
id="cities">
<option
value="Chicago">
<option
value="Los
Angeles">
<option
value="New
York">
</datalist>
Quality Development with HTML5 & CSS3 @letscounthedays
- 52. MIN, MAX & STEP
<input
id="score"
name="score"
type="number"
min="0"
max="10"
step="2">
Quality Development with HTML5 & CSS3 @letscounthedays
- 60. A
OLD
<p><a
href="http://www.shayhowe.com/">Shay
Howe</a>
is
a
front-‐end
web
designer
and
developer.</p>
NEW
<a
href="http://www.shayhowe.com/">
<h1>Shay
Howe</h1>
<p>Front-‐end
web
designer
and
developer.</p>
</a>
Quality Development with HTML5 & CSS3 @letscounthedays
- 61. B
OLD
Text rendered as bold.
NEW
Text stylistically offset without importance.
Quality Development with HTML5 & CSS3 @letscounthedays
- 62. CITE
OLD
Reference to another source.
NEW
Specifically a reference to a title of work.
Quality Development with HTML5 & CSS3 @letscounthedays
- 64. I
OLD
Text rendered as italic.
NEW
Text in an alternative voice or tone.
Quality Development with HTML5 & CSS3 @letscounthedays
- 65. MENU
OLD
A single column menu list.
NEW
A group of controls, most commonly used within web
applications.
Quality Development with HTML5 & CSS3 @letscounthedays
- 66. S
OLD
Text rendered with a line through it.
NEW
Text struck from the content that is no longer accurate or
relevant.
Quality Development with HTML5 & CSS3 @letscounthedays
- 67. SMALL
OLD
Text rendered as small.
NEW
Text within side comments or small print.
Quality Development with HTML5 & CSS3 @letscounthedays
- 68. OBSOLETE ELEMENTS
& ATTRIBUTES
Quality Development with HTML5 & CSS3 @letscounthedays
- 69. OBSOLETE ELEMENTS
• acronym • frame
• applet • frameset
• basefont • isindex
• big • noframes
• center • strike
• dir • tt
• font •u
Deprecated from HTML 4.0
Quality Development with HTML5 & CSS3 @letscounthedays
- 70. OBSOLETE ATTRIBUTES
• align • frame • profile
• alink • frameborder • scrolling
• background • hspace • shape
• bgcolor • link • size
• border • name • target
• cellpadding • nohref • text
• cellspacing • noshade • type
• coords • nowrap • valign
Quality Development with HTML5 & CSS3 @letscounthedays
- 72. QUESTIONS?
Thank you!
Quality Development with HTML5 & CSS3 @letscounthedays