Transcript HTML5 Essentials – July2015

Introduction to HTML5

Dive into HTML5 - Mark Pilgrim
(http://diveintohtml5.info/) or
(http://fortuito.us/diveintohtml5/) or
(http://mislav.uniqpath.com/diveintohtml5/)

Also available for PDF download
(www.jesusda.com/docs/.../ebook_manual_en_dive
-into-html5.pdf) or
(http://s3.amazonaws.com/mislav/Dive+into+HTML
5.pdf)

Learn HTML5: 10 Must Read Lessons
(http://www.webhostingsecretrevealed.com/f
eatured-articles/learn-html5-10-must-readlessons/)

HTML 5 Demos and Examples
(http://html5demos.com/)

WDL - 10 HTML5 Demos to Make You Forget About
Flash (http://webdesignledger.com/inspiration/10html5-demos-to-make-you-forget-about-flash)
The term “HTML5” covers a family of
web technologies currently being
specified by the W3C and being used in
various stages by browser vendors.
What is commonly referred to as
“HTML5” is often a combination of
HTML5 markup/features,CSS3 style and
JavaScript interactivity/ animation.
HTML5 “Core” : New structural and semantic
markup
CSS3 : Support for animation and much
more)
Geolocation
Canvas
Web Storage (Offline Support)
Web Sockets
Drag and Drop
HTML5 addresses current limitations such as
multimedia (without browser plugins – for
example, Flash, Java, Silverlight), data
storage, lack of a native graphical format.
These are qualities well suited for web
applications.
New Structural and Semantic markup is
designed to reduce reliance on <div> tags and
introduce logical, consistent and readable
page elements.
Examples of new tags:
Structural elements
<header>
<footer>
<nav>
<section>
<article>
<aside>
<div id="header" > This is my header </div>
#header {
width:960px;
height:100px;
background-color:gray;
}
<header> This is my header </header>
header {
width:960px;
height:100px;
background-color:gray;
}
Many more new semantic tags:
<hgroup>
Acts a wrapper for one or more related heading elements. It can only
contain a group of <h1>-<h6> elements(s)
<figure>
<figurecaption>
The <figure> element is intended to be used with the <figurecaption>
element to mark up diagrams, illustrations, photos and more
New input types
<input type = “email”>
<input type = “search”>
<input type = “url”>
<input type = “rel”>
Many more: datepickers, auto-complete, datalists…
<audio> and <video>
Enabling native audio and video playback within the
browser, no browser plugins needed.
<canvas>
Resolution-dependent bitmap canvas, which can be
used for rendering visual images (charts, game
graphics) on the fly in the browser. Provides native
drawing and animation format.
<audio> and <video>
<video src="catz.mp4" width="400"
height="300"></video>
<audio src="high_seas_rip.mp3" controls
preload="auto" autobuffer></audio>
http://camendesign.com/code/video_for_everybody/test.html
<canvas>
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById
("myCanvas"),
context = canvas.getContext("2d");
// x = 10, y = 20, width = 200, height = 100
context.fillRect(10, 20, 200, 100);
</script>
The canvas element works as a drawing
surface on your page.
 You can create shapes with colour, gradient, and
pattern fills.
 You can interactively manipulate pixels onscreen,
render text, and export these contents to a static
image file - such as a .png.
 You can also add JavaScript or the new CSS3
animation features to make the objects you
create move, fade, scale - and so on.
http://w ww.lucidchart.com
Web applications such as the one at LucidChart.com can use the
canvas element to interactively draw charts and diagrams.
CSS3 : Support for animation and much more)
Web Storage (Offline Support) http://dev.w3.org/html5/webstorage/#introduction
Geolocation - http://dev.w3.org/geo/api/specsource.html#introduction
Drag and Drop http://developers.whatwg.org/dnd.html#dnd
Web Workers and Sockets
Microdata http://developers.whatwg.org/links.html#microdata
HTML5 and CSS3 work hand in hand. Many “HTML5
experiences” include CSS3 features.






CSS3 animations and transitions
2D and 3D transformations
backgrounds, borders, RGBa colors, gradients, box and
text shadows
multi-column layouts
media queries
web fonts
CSS3 animations




Technologies such as Flash have traditionally been used to
animate objects in the browser.
You can now create some of the same functionality using
CSS rules and properties.
In the future, the HTML5 Canvas element and CSS3
transitions can help designers create interactive and
animated elements on the page.
Visit http://animatable.com/demos/madmanimation/ in a
Webkit browser - such as Chrome or Safari - to see CSS
animation in action.
http://animatable.com/demos/madmanimation/
CSS3 transitions




CSS transitions are closely related to animation, but
fundamentally different.
A transition allows property changes in CSS values to
occur smoothly over a specified duration.
You can currently perform this type of animation with
JavaScript and Flash, but transitions give designers a
tool to use without becoming a scripting expert.
Visit http://daftpunk.themaninblue.com/ to see an example
of CSS transitions in action.
http://daftpunk.themaninblue.com/
CSS 2D- and 3D-transformations
The CSS transform property allows you to rotate,
scale or skew an element on your page.
 You can also animate transforms.
 You can also add the perspective property to the
transformation effect to simulate an object
positioned or animated in 3D space.


Visit http://www.webkit.org/blog-files/3dtransforms/morphing-cubes.html/ to see an example of
a 3D-CSS transformation that is also animated.
http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html
What is an API?



APIs (Application Programming Interfaces) are a way to
create applications using pre-built components and are
not unique to web development - or even to scripting
languages.
One of the main goals of an API is to standardize how
certain mechanics work and to simplify otherwise
complicated programming tasks.
APIs are very significant in the world of HTML5
Takes the concept of browser “cookies” to higher levels.
HTML5 provides two ways to store data:
localStorage and sessionStorage.


Data saved as localStorage is available at any point –
even after browser closes or system is restarted.
Data saved as sessionStorage is lost as soon as that
window is closed.
http://developers.whatwg.org/
Web pages request user permission
to use offline storage.
The Geolocation API Specification allows the web browser’s
geographic location to be pinpointed.
This information is then used to send you relevant data based on
your whereabouts.
Version 3.5 of Firefox was one of the first browser to make use of
geolocation.
Example of Geolocation:
http://www.flickr.com/map/


This page displays a map of photographs around the world
that users have uploaded with metadata that tags their
images with the geographical coordinates of the location.
The term for images with this metadata is geotagged.
Click ‘Find My Location’
Click ‘Share Location’
If there are geotagged
images in your
immediate area, you
will see pink circles
representing images on
a local map.




Web Workers is a framework that addresses browser
performance.
When you access advanced web applications, such as
mapping or applications that instantly generate charts and
graphs, there are several processor-intensive computations
that can slow down the performance of your application.
Web Workers are scripts that run in a separate thread.
This separation means that processes, such as obtaining
data from a database, occur independently from user
behaviour - which creates a more seamless environment for
the user



Mobile devices and smartphones are
active platforms for HTML5 documents
and web applications today.
Browsers such as Apple Safari for iOS
have supported features associated
with HTML5 - for example, offline
storage and CSS3 animations - for a
few years.
This is because iOS mobile devices,
such as the iPhone and the iPad, have a
distinctive hardware profile including
screen size and memory capabilities as
well as a consistent software profile.
The mobile Safari browser
on Apple’s iPhone
has been using HTML5
features such as
offline storage since 2009,
and has internal
preferences to set the
storage size.
Within the landscape of desktop computing, there are far
too many variables to support easily, including multiple
browsers, old browsers, different monitor resolutions and
more.
 Users are also demanding content that is optimized for
mobile devices, which HTML5 and its supporting
technologies can deliver.
 For this reason, HTML5 support is a high priority for the
manufacturers of these devices.

Visit the URL for your primary browser, and then
explore the HTML5 features:
 Google Chrome (www.chromeexperiments.com)
 Apple Safari (www.apple.com/html5)
 Mozilla Firefox
(https://developer.mozilla.org/en/HTML/HTML5)
 Microsoft Internet Explorer
(www.nevermindthebullets.com)
Google Chrome
06_index.html
Safari
06_index.html
<div id="wrap">
<div id="masthead">
<h1>The web's #1 resource for smoothie
recipes</h1>
<img src="images/smoothieworld_logo.jpg"
width="200" height="150"
alt="smoothieworld_logo" />
</div>
#masthead
{
background-color: #FFF;
}
#masthead h1
{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 2em;
color:#a50476;
font-weight: normal;
float:right;
margin:1.5em 4em 0 0;
}
<div id="wrap">
<header id="masthead">
<h1>The web's #1 resource for smoothie
recipes</h1>
<img src="images/smoothieworld_logo.jpg"
width="200" height="150"
alt="smoothieworld_logo" />
</header>
Google Chrome
06_index.html
Firefox 3.6
06_index.html
When Firefox 3.6 encounters a tag it does not
recognise it treats it as an inline element.
Add the following code to reset.css:
header, section, aside, nav, footer, figure,
figcaption{
display:block;
}
Firefox 3.6
06_index.html
Internet Explorer 8
06_index.html
When Internet Explorer 8 or earlier encounters a
tag it does not recognise it completely ignores
them.
Add link to JavaScript library called Modernizr –
forces IE to recognise HTML5 tags:
<link rel="stylesheet" media="screen"
href="base.css" type="text/css" />
06_index.html
<script src="modernizr-1.7.js"
type="text/javascript"></script>
Internet Explorer 8
06_index.html
Google Chrome
07_contactform.html
Edit:
07_contactform.html
<label for = "email">Email: <input id = "email“ type =
“email” name = “customeremail"></label>
<label for = "website">Website: <input id = "website"
type = “url” name ="customerwebsite"></label>
Only effects mobile browsers.
In future. will be used to process form data more
efficiently.
Edit:
07_contactform.html
<label for ="firstname">First name:<input
id="firstname" type="text" name="firstname"
placeholder = "Enter your first name"></label>
Google Chrome
07_contactform.html
Edit:
07_contactform.html
<label for ="firstname">First name:<input
id="firstname" type="text" name="firstname"
placeholder = "Enter your first name“
required></label>
Google Chrome
07_contactform.html
Internet Explorer 8
07_contactform.html
Providing fallback for browsers that don’t support
HTML5 features
Edit:
<script src="modernizr.custom.03287.js"></script>
<script>
yepnope({
test: Modernizr.input.placeholder,
nope: 'h5f.js',
callback: function(url, result, key) {
H5F.setup(document.getElementById("contactform"));
}
});
</script>
07_contactform.html
Internet Explorer 8
07_contactform.html
Google Chrome
jquerytoggle.html
Edit:
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
jquerytoggle.html
Edit:
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function() {
$('#CalorieBox').hide();
});
</script>
jquerytoggle.html
Google Chrome
jquerytoggle.html
Edit:
<h4>Calories per serving</h4>
to
<h4><a id="triggerCalorieBox" href="#"> Calories per
serving</a> </h4>
jquerytoggle.html
Edit:
<script>
$(document).ready(function() {
$('#CalorieBox').hide();
$(‘a#triggerCalorieBox’).click(function() {
$(‘#CalorieBox’).show();
e.preventDefault()
});
jquerytoggle.html
});
</script>
Google Chrome
jquerytoggle.html
Google Chrome
jquerytoggle.html
Edit:
<script>
$(document).ready(function() {
$('#CalorieBox').hide();
$(‘a#triggerCalorieBox’).click(function() {
$(‘#CalorieBox’).toggle();
e.preventDefault()
});
jquerytoggle.html
});
</script>
Edit:
<body>
<video src='videos/BigBuck.ogg' controls
poster='poster320.jpg' width='320'
height='180'></video>
index.html
Firefox 3.6
index.html
Not all browsers support
the same video formats .ogg supported by
Firefox, Google Cfrome
Safari 4.0
index.html
Not all browsers support
the same video formats .ogg supported by
Firefox, Google Cfrome
Edit:
<video controls poster='poster320.jpg' width='320'
height='180'>
<source src='videos/BigBuck.ogg' type='video/ogg;
codecs="theora, vorbis"'>
<source src='videos/BigBuck.mp4' type='video/mp4;
codecs="avc1.42E01E, mp4a.40.2"'>
<h1><a href="videos/BigBuck.mp4">Download the
video</a></h1>
</video>
index.html
Edit:
<h1><a href="videos/BigBuck.mp4">Download the
video</a></h1>
<object width="320" height="180" type="application/xshockwave-flash" data="player/flowplayer-3.2.5.swf">
<param name="movie" value="player/flowplayer3.2.5.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url":
"videos/BigBuck.mp4", "autoPlay":false, "autoBuffering":true}}'
/>
<h1><a href="videos/BigBuck.mp4">Download the
video</a></h1>
</object>
</video>
index.html
<canvas id="lessonCanvas" width="300"
height="300"style="margin:100px;">
</canvas>
cnavastemplate.html
<script type="text/javascript">
function setup() {
var canvas =
document.getElementById('lessonCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
<!--drawing instructions here -->
}
}
canvastemplate.html
<script type="text/javascript">
function setup() {
var canvas =
document.getElementById('lessonCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.strokeRect(0, 0, 300, 300);
}
}
canvastemplate.html
Google Chrome
canvastemplate.html
<script type="text/javascript">
function setup() {
var canvas =
document.getElementById('lessonCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.strokeRect(0, 0, 300, 300);
ctx.strokeStyle = ‘rgb(255, 0, 0)’;
ctx.strokeRect(0.5, 0.5, 100, 100);
}
}
canvastemplate.html
Google Chrome
canvastemplate.html
function setup() {
var canvas =
document.getElementById('lessonCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.strokeRect(0, 0, 300, 300);
ctx.strokeStyle = ‘rgb(255, 0, 0)’;
ctx.strokeRect(0.5, 0.5, 100, 100);
ctx.fillRect(20, 20, 100, 100);
ctx.fillStyle = ‘rgb(0, 255, 0)’;
ctx.fillRect(50, 50, 100, 100);
}
}
canvastemplate.html
Google Chrome
canvastemplate.html
function setup() {
var canvas =
document.getElementById('lessonCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.strokeRect(0, 0, 300, 300);
ctx.strokeStyle = ‘rgb(255, 0, 0)’;
ctx.strokeRect(0.5, 0.5, 100, 100);
ctx.fillRect(20, 20, 100, 100);
ctx.fillStyle = ‘rgb(0, 255, 0)’;
ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(80, 80, 30, 30);
}
canvastemplate.html
}
Google Chrome
canvastemplate.html
Google Chrome
colorsstylesand gradients_completed.html
Firefox 3.6
colorsstylesand gradients_completed.html
Google Chrome
usingtransforms_completed.html
Google Chrome
drawingloop_completed.html
notepad_example.html
Google Chrome
notepad_example.html
Google Chrome
notepad_example.html
Google Chrome
notepad_example.html
Internet Explorer 8
notepad_example.html
Firefox 3.6
notepad_example.html
Firefox 3.6
notepad_example.html
Firefox 3.6
Firefox 3.6 only use
offline storage when on
the Web.
notepad_example.html
Edit (line 30):
mystorage = window.localStorage ||
(window.globalStorage ?
globalStorage[location.hostname] : null);
to
mystorage = window.sessionStorage ||
(window.globalStorage ?
globalStorage[location.hostname] : null);
notepad_example.html
Google Chrome
Google Chrome
notepad_example.html
Google Chrome
notepad_example.html
Google Chrome
notepad_example.html
Mozilla Firefox
shopping_completed.html
Mozilla Firefox
checkers_completed.html