Università degli Studi di Pavia
Download
1 / 20

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


  • 111 Views
  • Uploaded on

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:

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Università degli Studi di Pavia Facoltà di Economia, Giurisprudenza, Ingegneria,' - siusan


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



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



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


ad