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 l'immagine

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>

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

Più immaginihttp://html5doctor.com/the-figure-figcaption-elements/

hgroup

● L'elemento 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 l'h2 con gli altri h2 del documento che potrebbero servire per definire uno schema logico.

● Nel nostro caso l'h2 è più che altro un sottotitolo.

time

● L'elemento fornisce una versione della data leggibile per l'uomo ed una leggibile per le “macchine”

<time datetime="2007­08­29T13:58Z">

August 29th, 2007 at 13:58

</time>

//l'attributo datetime è opzionale, nel caso si userà la stringa data

Le macchine ci controlleranno?

Progress

● L'elemeno 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 Rank

Your 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 l'elemento article o l'elemento antenato più vicino.

● Se questo è l'elemento body, allora le informazioni di contatto si applicano al documento nel suo complesso.

Novità nei vecchi elementi

<a>

The media attribute describes for which media the target document was designed. It is purely advisory. The value must be a valid media query. The default, if the media attribute is omitted, 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 didn't make me feel...</i>

Sinceramente sono non mi è chiarissimo perché vadano mantenuti.

Small

● Diventa il tag per le note legali, i diritti d'autore, 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