Università degli Studi di Pavia
Facoltà di Economia, Giurisprudenza, Ingegneria,
Lettere e filosofia, Scienze Politiche
Corso di Laurea Magistrale Interfacoltà in
Comunicazione Professionale e Multimedialità
HTML 5: UN LINK TRA PASSATO E FUTURO
Relatore:
Ing. Marco Porta
Correlatore:
Ing. Massimo Cellario
Anno Accademico 2010/2011
Tesi di Laurea di:
Stefano Scotti
HTML 5
It is the fifth version of the HTML language and is still in a
development stage
Main purposes of W3C and WHATWG (Web Hypertext Application
Technology Working Group):
• Comprehensibility
• Compatibility
• Universality
HTML 5: new structural and semantic elements
New tags:
• Header
• Footer
• Nav
• Aside
• Section
• Article
HTML 5: new structural and semantic elements
Elements which provide a more precise content description in HTML 5
documents:
• Hgroup
Heading
Title 1
Title 2
• Mark
The creation of the World Wide Web
is attributed to Tim Berners-Lee
• Time
This afternoon I will arrive there at
15:00
• Progress
HTML 5: Audio and Video
<audio> and <video> are the new HTML 5 tags for the inclusion of
audio and video
The formats supported by <video> are: MP4, WebM e Ogg
The formats supported by <audio> are : MP3, Wav e Ogg
Introduce improvements and increase usability
Replacement for <embed> and <object>
Popcorn.js is a JavaScript library that allows to add subtititles to
videos and improve accessibilty
JavaScript API: Web Storage
Makes it possible to store data on final users’ computers, without
using cookies
Allows to save up to 5 Mb of data for each website or web document
JavaScript API: Drag and Drop
Thanks to HTML 5, Drag and Drop is much better than previous
implementations
Three main components of Drag and Drop:
• The object dropped
• The structure that contains data
• The object that accepts the drop
HTML 5 and CSS 3
/* 3D shadows (green) */
/* “Ordinary” shadows */
text-shadow
text-shadow
0 1px 0 #78AF00,
0 2px 0 #8ABF17,
0 3px 0 #9ECF33,
0 4px 0 #B3DF53,
0 5px 0 #C9EF77,
0 6px 0 #D7EFA4,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
Comparison between HTML 5 and Flash
Flash pros:
• Most browsers have a Flash plugin installed by default
• Supports both simple and complex animations
• Easier to learn than HTML 5, CSS and Javascript;
• High compatibility among browsers
Comparison between HTML 5 and Flash
HTML 5 pros:
• Made up of open standards only
• Can be used with most of recent browsers
• Allows webmasters to use a “cleaner” Web code
• More and more considered to make phone apps faster and
universally accessible
Examples of comparisons between HTML 5 and Flash
Canvas
Virtual canvas where we can draw (our pencil is JavaScript)
The picture is made by drawing and combining segments and curves,
moving through x and y coordinates to create simple or complex
shapes
lineTo
quadraticCurveTo
Elements
combination for
complex pictures
bezierCurveTo
Canvas
More complex examples:
arc
arc + linearGradient
arc + radialGradient
strokeText
fillText
Animation with
canvas
Complex examples with Canvases
From HTML 4 to HTML 5
div id="header"
div id="menu"
div id="linkcentrale"
div class="spaziosotto"
id="article_narticle
div id="footer"
div id="bloccodx"
From HTML 4 to HTML 5
Header
Nav
Section + Canvas
Section
+
Article
+
Header
Footer
Aside
From HTML 4 to HTML 5
div id="topheader"
div
id="navigation"
div id="news_block"
div
id="newsletter"
div id="eventi"
div class="footerWrap"
div class="footerSocial"
From HTML 4 to HTML 5
Header
Nav
Section
Section
+
Header
Aside
+
Header
Footer
Section
+
Header
Section
+
Header
Section
+
Header
From HTML 4 to HTML 5
HTML 4 Code
<div id="header">
<div id="headersx">
<a href="/site/home.html">
<img longdesc="/site/home.html" title="Università di Pavia"
alt="Università di Pavia"
src="/contents/instance1/images/header.png" /></a>
<span class="hide"> - </span>
<a class="hide" href="/site/home.html">D</a>
</div>
<div id="headerdx">
<div class="cercasx">
<a href="/site/en/home.html" title="Accedi al sito in
Inglese">English</a> | </div>
<form method="get" title="Motore di ricerca del sito"
class="cercadx" action="/site/search.jsp">
<fieldset>
<legend class="hide">Motore di Ricerca del sito</legend>
<div class="labelcerca">
<label for="query">Cerca</label>
</div>
<input value="10" name="hitsPerPage" type="hidden" />
<input value="1" name="instance" type="hidden" />
<input value="1873" name="node" type="hidden" />
<input value="" name="type" type="hidden" />
<input value="6" name="channel" type="hidden" />
<input class="submitcerca" value="Cerca" name="cerca"
type="submit" />
<input class="query" value="cerca nel sito" id="query"
name="query" type="text" />
</fieldset>
</form>
<div class="clear"> </div>
</div>
<div class="clear"> </div>
</div>
HTML 5 Code
<header>
<a id="logo" href="/site/home.html">
<img longdesc="/site/home.html" title="Università
di Pavia" alt="Università di Pavia"
src="/contents/instance1/images/header.png" />
</a>
<p><a href="/site/en/home.html" title="Accedi al
sito in Inglese">English</a> | </p>
<form method="get" title="Motore di ricerca del sito"
class="cercadx" action="/site/search.jsp">
<fieldset>
<legend class="hide">Motore di Ricerca del
sito</legend>
<label for="query">Cerca</label>
<input value="10" name="hitsPerPage"
type="hidden" />
<input value="1" name="instance"
type="hidden" />
<input value="1873" name="node"
type="hidden" />
<input value="" name="type" type="hidden" />
<input value="6" name="channel"
type="hidden" />
<input class="submitcerca" value="Cerca"
name="cerca" type="submit" />
<input class="query" value="cerca nel sito"
id="query" name="query" type="text" />
</fieldset>
</form>
</header>
Conclusions
Big development and flexibility potentials for HTML 5: it enables the
creation of more usable and accessible websites
Easy combination with other languages like CSS 3 and JavaScript
Not yet a W3C recommendation
Not yet supported by all web browsers