Università degli Studi di PaviaFacoltà di Economia, Giurisprudenza, Ingegneria,

Lettere e filosofia, Scienze Politiche

Corso di Laurea Magistrale Interfacoltà inComunicazione Professionale e Multimedialità

HTML 5: UN LINK TRA PASSATO E FUTURO

Relatore:Ing. Marco PortaCorrelatore:Ing. Massimo Cellario

Tesi di Laurea di:Stefano Scotti

Anno Accademico 2010/2011

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

Elements which provide a more precise content description in HTML 5 documents:

HTML 5: new structural and semantic elements

• Hgroup

• Mark

• Time

• Progress

HeadingTitle 1Title 2

The creation of the World Wide Web is attributed to Tim Berners-Lee

This afternoon I will arrive there at 15:00

HTML 5: Audio and Video

Popcorn.js is a JavaScript library that allows to add subtititles to videos and improve accessibilty

<audio> and <video> are the new HTML 5 tags for the inclusion of audio and video

Introduce improvements and increase usability

Replacement for <embed> and <object>

The formats supported by <video> are: MP4, WebM e OggThe formats supported by <audio> are : MP3, Wav e Ogg

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) */

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

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

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

Comparison between HTML 5 and Flash

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 bezierCurveTo

Elements combination for

complex pictures

Canvas

More complex examples:

arc arc + linearGradient arc + radialGradient

strokeText

fillTextAnimation with

canvas

Complex examples with Canvases

div id="header"

div id="menu"

div id="linkcentrale" div id="bloccodx"

div class="spaziosotto" id="article_narticle

div id="footer"

From HTML 4 to HTML 5

From HTML 4 to HTML 5

Header

Nav

Section + Canvas Aside

Section+

Article+

Header

Footer

div id="topheader"

div id="navigation"

div id="news_block"

div id="eventi"

div id="newsletter"

div class="footerWrap"div class="footerSocial"

From HTML 4 to HTML 5

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