Università degli Studi di Pavia
This presentation is the property of its rightful owner.
Sponsored Links
1 / 20

Università degli Studi di Pavia Facoltà di Economia, Giurisprudenza, Ingegneria, PowerPoint PPT Presentation


  • 74 Views
  • Uploaded on
  • Presentation posted in: General

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:

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


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

/* “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,


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


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

divid="header"

divid="menu"

divid="bloccodx"

divid="linkcentrale"

divclass="spaziosotto"id="article_narticle

divid="footer"


From HTML 4 to HTML 5

Header

Nav

Section + Canvas

Aside

Section

+

Article

+

Header

Footer


From HTML 4 to HTML 5

divid="topheader"

divid="navigation"

divid="news_block"

divid="newsletter"

divid="eventi"

divclass="footerWrap"

divclass="footerSocial"


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

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


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


  • Login