DevFest Makerere html5 presentation by caesar mukama

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

HTML5 = XHTML + NEW MARKUP + JS APIS

New Industry Standard
Starting 2014

Preloaded with some
CSS3 Bling

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">
<head>
utf-8"/>
</head>
<body>
...
</body>
</html>

... minus DOCTYPE attributes
<!DOCTYPE html>
<head>
utf-8"/>
</head>
<body>
...
</body>
</html>

… plus short meta content
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
utf-8"/>
</head>
<body>
...
</body>
</html>

… minus useless definitions
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
...
</body>
</html>

= HTML5
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
...
</body>
</html>

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

Source: https://developers.google.com/webmasters/state-of-the-web/2005/classes
Top 20 Class Names

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

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

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

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
BUT
Apple and Nokia Said No.

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

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>

What can I do with Canvas?
Besides .

● 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
● 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() ) {
}
With Modernizer
if ( Modernizer. csstransforms ) {
}

slides.html5rocks.com
diveintohtml5.com
html5boilerplate.com
w3.org
Bookmarks

Caesar Mukama
Contact me at
mcaesar88@gmail.com
Questions?

DevFest Makerere html5 presentation by caesar mukama

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to DevFest Makerere html5 presentation by caesar mukama

Similar to DevFest Makerere html5 presentation by caesar mukama (20)

Recently uploaded

Recently uploaded (20)

DevFest Makerere html5 presentation by caesar mukama