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


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

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


Universit degli studi di pavia facolt di economia giurisprudenza ingegneria

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


Universit degli studi di pavia facolt di economia giurisprudenza ingegneria

HTML 5: new structural and semantic elements

New tags:

  • Header

  • Footer

  • Nav

  • Aside

  • Section

  • Article


Universit degli studi di pavia facolt di economia giurisprudenza ingegneria

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


Universit degli studi di pavia facolt di economia giurisprudenza ingegneria

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


Universit degli studi di pavia facolt di economia giurisprudenza ingegneria

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


Universit degli studi di pavia facolt di economia giurisprudenza ingegneria

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


Universit degli studi di pavia facolt di economia giurisprudenza ingegneria

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,


Universit degli studi di pavia facolt di economia giurisprudenza ingegneria

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


Universit degli studi di pavia facolt di economia giurisprudenza ingegneria

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


Universit degli studi di pavia facolt di economia giurisprudenza ingegneria

Examples of comparisons between HTML 5 and Flash


Universit degli studi di pavia facolt di economia giurisprudenza ingegneria

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


Universit degli studi di pavia facolt di economia giurisprudenza ingegneria

Canvas

More complex examples:

arc

arc + linearGradient

arc + radialGradient

strokeText

Animation with canvas

fillText


Universit degli studi di pavia facolt di economia giurisprudenza ingegneria

Complex examples with Canvases


Universit degli studi di pavia facolt di economia giurisprudenza ingegneria

From HTML 4 to HTML 5

divid="header"

divid="menu"

divid="bloccodx"

divid="linkcentrale"

divclass="spaziosotto"id="article_narticle

divid="footer"


Universit degli studi di pavia facolt di economia giurisprudenza ingegneria

From HTML 4 to HTML 5

Header

Nav

Section + Canvas

Aside

Section

+

Article

+

Header

Footer


Universit degli studi di pavia facolt di economia giurisprudenza ingegneria

From HTML 4 to HTML 5

divid="topheader"

divid="navigation"

divid="news_block"

divid="newsletter"

divid="eventi"

divclass="footerWrap"

divclass="footerSocial"


Universit degli studi di pavia facolt di economia giurisprudenza ingegneria

From HTML 4 to HTML 5

Header

Nav

Section

Section

+

Header

Aside

+

Header

Footer

Section

+

Header

Section

+

Header

Section

+

Header


Universit degli studi di pavia facolt di economia giurisprudenza ingegneria

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>


Universit degli studi di pavia facolt di economia giurisprudenza ingegneria

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