Presentation is loading. Please wait.

Presentation is loading. Please wait.

Università degli Studi di Pavia Facoltà di Economia, Giurisprudenza, Ingegneria, Lettere e filosofia, Scienze Politiche Corso di Laurea Magistrale Interfacoltà

Similar presentations


Presentation on theme: "Università degli Studi di Pavia Facoltà di Economia, Giurisprudenza, Ingegneria, Lettere e filosofia, Scienze Politiche Corso di Laurea Magistrale Interfacoltà"— Presentation transcript:

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

5 HTML 5: Audio and Video Popcorn.js is a JavaScript library that allows to add subtititles to videos and improve accessibilty and are the new HTML 5 tags for the inclusion of audio and video Introduce improvements and increase usability Replacement for and The formats supported by are: MP4, WebM e Ogg The formats supported by are : MP3, Wav e Ogg

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

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 lineToquadraticCurveTobezierCurveTo Elements combination for complex pictures

13 Canvas More complex examples: arcarc + linearGradientarc + radialGradient strokeText fillText Animation with canvas

14 Complex examples with Canvases

15 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

16 Header Nav Section + CanvasAside Section + Article + Header Footer

17 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

18 Header Nav Section + Header Aside + Header Footer Section + Header Section + Header Section + Header

19 From HTML 4 to HTML 5 HTML 4 Code - D English | Motore di Ricerca del sito Cerca HTML 5 Code English | Motore di Ricerca del sito Cerca

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


Download ppt "Università degli Studi di Pavia Facoltà di Economia, Giurisprudenza, Ingegneria, Lettere e filosofia, Scienze Politiche Corso di Laurea Magistrale Interfacoltà"

Similar presentations


Ads by Google