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

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

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

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

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

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

Complex examples with Canvases

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"

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

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 Aside + + Header Footer Section + Header Section + Header Section + Header

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>

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