Seconda lezione Modulo HTML5 e Css3 per il corso di WebMaster & WebDesigner

1. HTML5 e Css3 [2]
Matteo Magni

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

3. 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/rc
lark/">Richard Clark</a></figcaption>
</figure>

4. <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/">Rich
ard Clark</a></figcaption>
</figure>
Più immagini
http://html5doctor.com/the-figure-figcaption-elements/

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

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

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

8. Le macchine ci controlleranno?

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

10. meter
● Rappresenta una grandezza scalare, esempio il
Page Rank
Your PageRank is: <meter> 2 out of 10
</meter>

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

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

13. 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".

14. <b> e </i>

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

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

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

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

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

20. Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail:
matteo@magni.me