HTML5 e Css3 - 2 | WebMaster & WebDesigner
Upcoming SlideShare
Loading in...5
×
 

HTML5 e Css3 - 2 | WebMaster & WebDesigner

on

  • 382 views

Seconda lezione del modulo HTML5 e Css3 del corso per WebMaster & WebDesigner

Seconda lezione del modulo HTML5 e Css3 del corso per WebMaster & WebDesigner

Statistics

Views

Total Views
382
Views on SlideShare
380
Embed Views
2

Actions

Likes
0
Downloads
11
Comments
0

1 Embed 2

http://magni.me 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 e Css3 - 2 | WebMaster & WebDesigner HTML5 e Css3 - 2 | WebMaster & WebDesigner Presentation Transcript

  • HTML5 e Css3 [2]Matteo Magni
  • Figure figcaption● Figure viene impiegato per contrassegnare illustrazioni, diagrammi, foto, listati di codice che vengono citati nel testo principale ma senza alterarne il senso. Possono quindi essere tolti e messi in altre sezioni del sito.● Figcaption serve da didascalia per limmagine
  • figure figcaption<figure>  <img src="/macaque.jpg" alt="Macaque in the trees">  <figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption></figure>
  • Più immagini http://html5doctor.com/the-figure-figcaption-elements/<figure>  <img src="/kookaburra.jpg" alt="Kooaburra">  <img src="/pelican.jpg" alt="Pelican stood on the beach">  <img src="/lorikeet.jpg" alt="Cheeky looking Rainbow Lorikeet">  <figcaption>Australian Birds. From left to right, Kookburra, Pelican and Rainbow Lorikeet. Originals by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption></figure>
  • hgroup● Lelemento che raggruppa due o più intestazioni successive<hgroup>        <h1>Pippo.com</h1>        <h2>Pippo il bracco più famoso del mondo </h2></hgroup>
  • hgroup● Lo scopo nel caso di prima sarebbe non far interferire lh2 con gli altri h2 del documento che potrebbero servire per definire uno schema logico.● Nel nostro caso lh2 è più che altro un sottotitolo.
  • time● Lelemento fornisce una versione della data leggibile per luomo ed una leggibile per le “macchine”<time datetime="2007­08­29T13:58Z">August 29th, 2007 at 13:58</time>//lattributo datetime è opzionale, nel caso si userà la stringa data
  • Le macchine ci controlleranno?
  • Progress● Lelemeno progress rappresenta il grado di avanzamento di una operazione<section> <p>Progress: <progress> <span id="p">0</span>% </progress> </p> <script>  var progressBar = document.getElementById(p);  function updateProgress(newValue) {        progressBar.textContent = newValue;  }</script></section>
  • meter● Rappresenta una grandezza scalare, esempio il Page RankYour PageRank is: <meter> 2 out of 10 </meter>
  • Address<address> <a href="../People/Raggett/">Dave Raggett</a>, <a href="../People/Arnaud/">Arnaud Le Hors</a>, contact persons for the <a href="Activity">W3C HTML Activity</a></address>
  • Address● Gli elementi address rappresentano le informazioni di contatto per lelemento article o lelemento antenato più vicino.● Se questo è lelemento body, allora le informazioni di contatto si applicano al documento nel suo complesso.
  • Novità nei vecchi elementi<a>The media attribute describes for which mediathe target document was designed. It is purelyadvisory. The value must be a valid mediaquery. The default, if the media attribute isomitted, is "all".
  • <b> e </i>
  • Davvero?<b> ed </i> fanno ancora parte delle specifiche<b class="character">Deckard</b>: <i class="voiceover">The report would be routine retirement of a replicant which didnt make me feel...</i>Sinceramente sono non mi è chiarissimo perché vadano mantenuti.
  • Small● Diventa il tag per le note legali, i diritti dautore, le piccole note a margine.<footer><address>For more details, contact<a href="mailto:matteo@magni.me">matteo</a></address><small> © copyright ilBonzo. </small></footer>
  • menu<menu type="toolbar">        <command type="command" disabled label="Save" icon="icons/save.png" onclick="save()">        <command type="command" disabled label="Publish" icon="icons/pub.png" onclick="publish()"></menu>
  • Menu - type● Context: menu di tipo contestuale (tipo quello che si apre col tasto destro su win)● Toolbar: menu tipo barra degli strumenti● List: definisce una lista di comandi
  • command<menu type="toolbar"> <command type="radio" radiogroup="alignment" checked="checked"          label="Left" icon="icons/alL.png" onclick="setAlign(left)"> <command type="radio" radiogroup="alignment"          label="Center" icon="icons/alC.png" onclick="setAlign(center)"> <command type="radio" radiogroup="alignment"          label="Right" icon="icons/alR.png" onclick="setAlign(right)"> <hr> <command type="command" disabled          label="Publish" icon="icons/pub.png" onclick="publish()"></menu>
  • Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me