Università degli Studi di Pavia Facoltà di Economia, Giurisprudenza, Ingegneria,

1. 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.jsis 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 /* “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); /* 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,

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. 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 divid="header" divid="menu" divid="bloccodx" divid="linkcentrale" divclass="spaziosotto"id="article_narticle divid="footer"

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

17. From HTML 4 to HTML 5 divid="topheader" divid="navigation" divid="news_block" divid="newsletter" divid="eventi" divclass="footerWrap" divclass="footerSocial"

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

19. From HTML 4 to HTML 5 HTML 4 Code <divid="header"> <divid="headersx"> <ahref="/site/home.html"> <imglongdesc="/site/home.html"title="Università di Pavia"alt="Università di Pavia"src="/contents/instance1/images/header.png"/></a> <spanclass="hide"> - </span> <aclass="hide"href="/site/home.html">D</a> </div> <divid="headerdx"> <divclass="cercasx"> <ahref="/site/en/home.html"title="Accedi al sito in Inglese">English</a> | </div>   <formmethod="get"title="Motore di ricerca del sito"class="cercadx"action="/site/search.jsp"> <fieldset> <legendclass="hide">Motore di Ricerca del sito</legend> <divclass="labelcerca"> <labelfor="query">Cerca</label> </div> <inputvalue="10"name="hitsPerPage"type="hidden"/> <inputvalue="1"name="instance"type="hidden"/> <inputvalue="1873"name="node"type="hidden"/> <inputvalue=""name="type"type="hidden"/> <inputvalue="6"name="channel"type="hidden"/> <inputclass="submitcerca"value="Cerca"name="cerca"type="submit"/> <inputclass="query"value="cerca nel sito"id="query"name="query"type="text"/> </fieldset> </form>  <divclass="clear"></div> </div> <divclass="clear"></div> </div> HTML 5 Code <header> <aid="logo"href="/site/home.html"> <imglongdesc="/site/home.html"title="Università di Pavia"alt="Università di Pavia"src="/contents/instance1/images/header.png"/> </a> <p><ahref="/site/en/home.html"title="Accedi al sito in Inglese">English</a> | </p> <formmethod="get"title="Motore di ricerca del sito"class="cercadx"action="/site/search.jsp"> <fieldset> <legendclass="hide">Motore di Ricerca del sito</legend> <labelfor="query">Cerca</label> <inputvalue="10"name="hitsPerPage"type="hidden"/> <inputvalue="1"name="instance"type="hidden"/> <inputvalue="1873"name="node"type="hidden"/> <inputvalue=""name="type"type="hidden"/> <inputvalue="6"name="channel"type="hidden"/> <inputclass="submitcerca"value="Cerca"name="cerca"type="submit"/> <inputclass="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