università degli studi di pavia facoltà di economia, giurisprudenza, ingegneria, lettere e...
TRANSCRIPT
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