1. HTML 5: UN LINK TRA PASSATO E FUTURO
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
Tesi di Laurea di:
Stefano Scotti
Anno Accademico 2010/2011

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

3. HTML 5: new structural and semantic elements
New tags:
Header
Footer
Nav
Aside
Section
Article

4. HTML 5: new structural and semantic elements
Elements which provide a more precise content description in HTML 5 documents:
Heading
Title 1
Title 2
Hgroup
The creation of the World Wide Web is attributed to Tim Berners-Lee
Mark
This afternoon I will arrive there at 15:00
Time
Progress

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

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

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

8. HTML 5 and CSS 3 /* 3D shadows (green) */ 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,
/* “Ordinary” shadows */
text-shadow
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);

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

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

11. Examples of comparisons between HTML 5 and Flash

12. Elements combination for complex pictures
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
bezierCurveTo
Elements combination for complex pictures

13. Canvas More complex examples: arc arc + linearGradient
arc + radialGradient
strokeText
Animation with canvas
fillText

14. Complex examples with Canvases

15. From HTML 4 to HTML 5 div class="spaziosotto" id="article_narticle
div id="header"
div id="menu"
div id="bloccodx"
div id="linkcentrale"
div class="spaziosotto" id="article_narticle
div id="footer"

16. From HTML 4 to HTML 5 Section Header Nav Section + Canvas Aside Footer
Article
Header
Footer

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

18. From HTML 4 to HTML 5 Header Nav Section Section Aside + + Header
Footer
Section +
Header
Section +
Header
Section +
Header

19. From HTML 4 to HTML 5 HTML 4 Code HTML 5 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>
<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 class="clear"> </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>

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