Post on 12-Jan-2015
description
HTML5
DevFest 2013
Caesar Mukama
Work as Front End Designer
for MyZiki Ltd.
Contact me at mcaesar88@gmail.com
On the menu
● Why HTML5 is important.● Structure● Form Input Types and Tags● 3 New Tags● Features● Error Handling● Summary
What is HTML5?
HTML5 = XHTML + NEW MARKUP + JS APIS
Why is HTML5 important?
New Industry StandardStarting 2014
Reduced DevelopmentTime
Preloaded with someCSS3 Bling
Lots of newFeatures
Mobile Friendly
HTML5 XHTML
HTML5 Structure
XHTML<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Page Title</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8"/></head>
<body> ...</body>
</html>
… minus XML declaration<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Page Title</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8"/></head>
<body> ...</body>
</html>
... minus DOCTYPE attributes<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Page Title</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8"/></head>
<body> ...</body>
</html>
… plus short meta content<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"/> <title>Page Title</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8"/></head>
<body> ...</body>
</html>
… minus useless definitions<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"/> <title>Page Title</title> <link rel="stylesheet" href="style.css"/></head>
<body> ...</body>
</html>
= HTML5<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"/> <title>Page Title</title> <link rel="stylesheet" href="style.css"/></head>
<body> ...</body>
</html>
That’s why we need HTML5.
28 Tags, 13 Form Input Types
New Tags
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr
New Input Types
color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week
Where did they come from?
Source: https://developers.google.com/webmasters/state-of-the-web/2005/classes
Top 20 Class Names
<div class=”header”>
<div class=”header”>
<div class=”section”>
<div class=”article”>
<div class=”footer”>
<div class=”footer”>
<div class=”nav”><div
class=”aside”>
<header>
<header>
<section>
<article>
<footer>
<footer>
<nav><aside>
28 Tags, 13 Form Input Types
New Tags
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr
New Input Types
color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week
28 Tags, 13 Form Input Types
New Tags
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr
New Input Types
color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week
<input id="event” placeholder="DevFest Makerere"><input id=”firstName” required><input id=”lastName” autofocus pattern=[a-zA-Z]>
<input id="event” placeholder="DevFest Makerere"><input id=”firstName” required><input id=”lastName” autofocus pattern=[a-zA-Z]>
<input type="color" name="favcolor"><input type="date" name="birthday"><input type="datetime" name="bdaytime"><input type="number" name="quantity" min="1" max="5"><input type="range" name="points" min="1" max="10">
<input id="event” placeholder="DevFest Makerere"><input id=”firstName” required><input id=”lastName” autofocus pattern=[a-zA-Z]>
<input type="color" name="favcolor"><input type="date" name="birthday"><input type="datetime" name="bdaytime"><input type="number" name="quantity" min="1" max="5"><input type="range" name="points" min="1" max="10">
… much more.
28 Tags, 13 Form Input Types
New Tags
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr
New Input Types
color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week
28 Tags, 13 Form Input Types
New Tags
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr
New Input Types
color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week
Why do we need a video and an audio element?
Thousands of audio and video services
was meant for foreign objects
<object> … </object>
was meant for foreign objects
<object> … </object>
but video and audio are NOT foreign
plugins are foreign objects
<video width="320" height="240" controls src="movie.mp4" type="video/mp4" />
Syntax ?
<video width="320" height="240" controls src="movie.mp4" type="video/mp4" />
Syntax ?
<video width="320" height="240" controls src="movie.mp4" type="video/mp4" />
Syntax ?
Correct Syntax
<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg"><source src="movie.webm" type="video/webm"><object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240"></object>
</video>
Confused?
Confused?
All browser should have at least 2 new Codes by default:
HTML5 Specifications said...
All browser should have at least 2 new Codes by default:
● Ogg Vorbis for audio● Ogg Theora for video
HTML5 Specifications said...
Google was onboard,Everyone followed
Google was onboard,Everyone followed
BUTApple and Nokia Said No.
MPEG LA
.mp3, .mp4, .m4a, .mpg ...
MPEG LA
● MPEG better quality● Already most widely used● Xiph.com’s BDS license not open source.
Their Suggested alternative● H.264/MPEG most relevant video encoding● MP3, AAC best audio compression and
quality.
Their argument
Audio & video specification is incomplete
What to do ...for now?
● Convert videos to multiple formats● Use multiple sources● Then control with js
FOR NOW!
<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg"><source src="movie.webm" type="video/webm"><object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240"></object>
</video>
Canvas
Just like MS Paint...
… in your browser.
Paint with javascript instead of a brush
Paint with javascript instead of a brush<!DOCTYPE html>
<html>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
ctx.fill();
</script>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>
Paint with javascript instead of a brush<!DOCTYPE html>
<html>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
ctx.fill();
</script>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>
What can I do with Canvas?
Besides .
Other 2D Drawings
Rende 3D (via Web GL)
Error Handling( in brief )
“Tag Soup”
● 90% of pages on the web are malformed.● In XHTML, such pages break
“Tag Soup”
● 90% of pages on the web are malformed.● In XHTML, such pages break
● Tag Soup means HTML5 runs malformed pages on purpose then corrects them.
“Tag Soup”
Modernizr.js
Modernizr.js
● a JavaScript library● detects HTML5 and CSS3 features ● in the user’s browser.
Modernizr.js
Plain Javascript
function getSupportedTransform() { var prefixes = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '); for(var i = 0; i < prefixes.length; i++) { if(document.createElement('div').style[prefixes[i]] !== undefined) { return prefixes[i]; } } return false;}
if ( getSupportedTransform() ) {
// Browser supports CSS3 Transforms
}
Modernizr.js
Plain Javascript
function getSupportedTransform() { var prefixes = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '); for(var i = 0; i < prefixes.length; i++) { if(document.createElement('div').style[prefixes[i]] !== undefined) { return prefixes[i]; } } return false;}
if ( getSupportedTransform() ) {
// Browser supports CSS3 Transforms
}
With Modernizer
if ( Modernizer. csstransforms ) {
// Browser supports CSS3 Transforms
}
HTML5 is w i d e r
Play Time
Demoslides.html5rocks.com
slides.html5rocks.comdiveintohtml5.com
html5boilerplate.comw3.org
Bookmarks
Caesar Mukama
Contact me at mcaesar88@gmail.com
Questions?