1 / 20

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

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:

siusan
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

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

More Related