SlideShare uma empresa Scribd logo
1 de 20
Baixar para ler offline
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/rcla
rk/">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
● 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

Mais conteúdo relacionado

Semelhante a HTML5 e Css3 - 2 | WebMaster & WebDesigner

Bootstrap 3.0 - Introduzione
Bootstrap 3.0 - IntroduzioneBootstrap 3.0 - Introduzione
Bootstrap 3.0 - IntroduzioneMatteo Madeddu
 
Spring, IBatis e Transazioni Aop Nel Jug Avis Web
Spring, IBatis e Transazioni Aop Nel Jug Avis WebSpring, IBatis e Transazioni Aop Nel Jug Avis Web
Spring, IBatis e Transazioni Aop Nel Jug Avis WebMassimiliano Dessì
 
Sviluppo web con Ruby on Rails
Sviluppo web con Ruby on RailsSviluppo web con Ruby on Rails
Sviluppo web con Ruby on Railsjekil
 
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
Corso WebApp iOS - Lezione 06:   Web Development for iOS DevicesCorso WebApp iOS - Lezione 06:   Web Development for iOS Devices
Corso WebApp iOS - Lezione 06: Web Development for iOS DevicesAndrea Picchi
 
Web Performance Optimization
Web Performance OptimizationWeb Performance Optimization
Web Performance OptimizationAlessandro Martin
 
Training Signal Webtrends
Training Signal WebtrendsTraining Signal Webtrends
Training Signal WebtrendsStefano Iaboni
 
jQuery - 5 | WebMaster & WebDesigner
jQuery - 5 | WebMaster & WebDesignerjQuery - 5 | WebMaster & WebDesigner
jQuery - 5 | WebMaster & WebDesignerMatteo Magni
 
jQuery - 5 | WebMaster & WebDesigner
jQuery - 5 | WebMaster & WebDesignerjQuery - 5 | WebMaster & WebDesigner
jQuery - 5 | WebMaster & WebDesignerMatteo Magni
 
Luca Masini: Introduzione a GWT 2.0
Luca Masini: Introduzione a GWT 2.0Luca Masini: Introduzione a GWT 2.0
Luca Masini: Introduzione a GWT 2.0firenze-gtug
 
Dominare il codice legacy
Dominare il codice legacyDominare il codice legacy
Dominare il codice legacyTommaso Torti
 
HTML non per web designer
HTML non per web designerHTML non per web designer
HTML non per web designerAndrea Rigon
 
DDAY2014 - Performance in Drupal 8
DDAY2014 - Performance in Drupal 8DDAY2014 - Performance in Drupal 8
DDAY2014 - Performance in Drupal 8DrupalDay
 
Nicola Della Marina: Magento Frontend next level
Nicola Della Marina: Magento Frontend next levelNicola Della Marina: Magento Frontend next level
Nicola Della Marina: Magento Frontend next levelMeet Magento Italy
 
Stanco delle solite Web App? Passa al Prgressive
Stanco delle solite Web App? Passa al PrgressiveStanco delle solite Web App? Passa al Prgressive
Stanco delle solite Web App? Passa al PrgressiveCommit University
 
L'Arte del Templating: Typoscript, Fluid e Grid Elements
L'Arte del Templating: Typoscript, Fluid e Grid ElementsL'Arte del Templating: Typoscript, Fluid e Grid Elements
L'Arte del Templating: Typoscript, Fluid e Grid ElementsElena Bartolotti
 
Primo approccio al design adattivo
Primo approccio al design adattivoPrimo approccio al design adattivo
Primo approccio al design adattivoSalvatore Paone
 

Semelhante a HTML5 e Css3 - 2 | WebMaster & WebDesigner (20)

Bootstrap 3.0 - Introduzione
Bootstrap 3.0 - IntroduzioneBootstrap 3.0 - Introduzione
Bootstrap 3.0 - Introduzione
 
Spring, IBatis e Transazioni Aop Nel Jug Avis Web
Spring, IBatis e Transazioni Aop Nel Jug Avis WebSpring, IBatis e Transazioni Aop Nel Jug Avis Web
Spring, IBatis e Transazioni Aop Nel Jug Avis Web
 
Perl Template Toolkit
Perl Template ToolkitPerl Template Toolkit
Perl Template Toolkit
 
Sviluppo web con Ruby on Rails
Sviluppo web con Ruby on RailsSviluppo web con Ruby on Rails
Sviluppo web con Ruby on Rails
 
Domino e HTML5, #dd13
Domino e HTML5, #dd13Domino e HTML5, #dd13
Domino e HTML5, #dd13
 
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
Corso WebApp iOS - Lezione 06:   Web Development for iOS DevicesCorso WebApp iOS - Lezione 06:   Web Development for iOS Devices
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
 
Web Performance Optimization
Web Performance OptimizationWeb Performance Optimization
Web Performance Optimization
 
Training Signal Webtrends
Training Signal WebtrendsTraining Signal Webtrends
Training Signal Webtrends
 
jQuery - 5 | WebMaster & WebDesigner
jQuery - 5 | WebMaster & WebDesignerjQuery - 5 | WebMaster & WebDesigner
jQuery - 5 | WebMaster & WebDesigner
 
Zurb workshop
Zurb workshop Zurb workshop
Zurb workshop
 
jQuery - 5 | WebMaster & WebDesigner
jQuery - 5 | WebMaster & WebDesignerjQuery - 5 | WebMaster & WebDesigner
jQuery - 5 | WebMaster & WebDesigner
 
Luca Masini: Introduzione a GWT 2.0
Luca Masini: Introduzione a GWT 2.0Luca Masini: Introduzione a GWT 2.0
Luca Masini: Introduzione a GWT 2.0
 
Dominare il codice legacy
Dominare il codice legacyDominare il codice legacy
Dominare il codice legacy
 
HTML non per web designer
HTML non per web designerHTML non per web designer
HTML non per web designer
 
Wcmil2018
Wcmil2018Wcmil2018
Wcmil2018
 
DDAY2014 - Performance in Drupal 8
DDAY2014 - Performance in Drupal 8DDAY2014 - Performance in Drupal 8
DDAY2014 - Performance in Drupal 8
 
Nicola Della Marina: Magento Frontend next level
Nicola Della Marina: Magento Frontend next levelNicola Della Marina: Magento Frontend next level
Nicola Della Marina: Magento Frontend next level
 
Stanco delle solite Web App? Passa al Prgressive
Stanco delle solite Web App? Passa al PrgressiveStanco delle solite Web App? Passa al Prgressive
Stanco delle solite Web App? Passa al Prgressive
 
L'Arte del Templating: Typoscript, Fluid e Grid Elements
L'Arte del Templating: Typoscript, Fluid e Grid ElementsL'Arte del Templating: Typoscript, Fluid e Grid Elements
L'Arte del Templating: Typoscript, Fluid e Grid Elements
 
Primo approccio al design adattivo
Primo approccio al design adattivoPrimo approccio al design adattivo
Primo approccio al design adattivo
 

Mais de Matteo Magni

Introduzione DevOps con Ansible
Introduzione DevOps con AnsibleIntroduzione DevOps con Ansible
Introduzione DevOps con AnsibleMatteo Magni
 
HTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesignerHTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 6 | WebMaster & WebDesigner
HTML5 e Css3 - 6 | WebMaster & WebDesignerHTML5 e Css3 - 6 | WebMaster & WebDesigner
HTML5 e Css3 - 6 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 4 | WebMaster & WebDesigner
HTML5 e Css3 - 4 | WebMaster & WebDesignerHTML5 e Css3 - 4 | WebMaster & WebDesigner
HTML5 e Css3 - 4 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 3 | WebMaster & WebDesigner
HTML5 e Css3 - 3 | WebMaster & WebDesignerHTML5 e Css3 - 3 | WebMaster & WebDesigner
HTML5 e Css3 - 3 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner Matteo Magni
 
jQuery - 4 | WebMaster & WebDesigner
jQuery - 4 | WebMaster & WebDesignerjQuery - 4 | WebMaster & WebDesigner
jQuery - 4 | WebMaster & WebDesignerMatteo Magni
 
jQuery - 3 | WebMaster & WebDesigner
jQuery - 3 | WebMaster & WebDesignerjQuery - 3 | WebMaster & WebDesigner
jQuery - 3 | WebMaster & WebDesignerMatteo Magni
 
jQuery - 2 | WebMaster & WebDesigner
jQuery - 2 | WebMaster & WebDesignerjQuery - 2 | WebMaster & WebDesigner
jQuery - 2 | WebMaster & WebDesignerMatteo Magni
 
jQuery - 1 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesignerjQuery - 1 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesignerMatteo Magni
 
Javascript - 7 | WebMaster & WebDesigner
Javascript - 7 | WebMaster & WebDesignerJavascript - 7 | WebMaster & WebDesigner
Javascript - 7 | WebMaster & WebDesignerMatteo Magni
 
Javascript - 6 | WebMaster & WebDesigner
Javascript - 6 | WebMaster & WebDesignerJavascript - 6 | WebMaster & WebDesigner
Javascript - 6 | WebMaster & WebDesignerMatteo Magni
 
Javascript - 5 | WebMaster & WebDesigner
Javascript - 5 | WebMaster & WebDesignerJavascript - 5 | WebMaster & WebDesigner
Javascript - 5 | WebMaster & WebDesignerMatteo Magni
 
Javascript - 4 | WebMaster & WebDesigner
Javascript - 4 | WebMaster & WebDesignerJavascript - 4 | WebMaster & WebDesigner
Javascript - 4 | WebMaster & WebDesignerMatteo Magni
 
Javascript - 3 | WebMaster & WebDesigner
Javascript - 3 | WebMaster & WebDesignerJavascript - 3 | WebMaster & WebDesigner
Javascript - 3 | WebMaster & WebDesignerMatteo Magni
 
Javascript - 2 | WebMaster & WebDesigner
Javascript - 2 | WebMaster & WebDesignerJavascript - 2 | WebMaster & WebDesigner
Javascript - 2 | WebMaster & WebDesignerMatteo Magni
 
Javascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesignerJavascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesignerMatteo Magni
 
Web Usability - 3 | WebMaster & WebDesigner
 Web Usability - 3 | WebMaster & WebDesigner Web Usability - 3 | WebMaster & WebDesigner
Web Usability - 3 | WebMaster & WebDesignerMatteo Magni
 
Web Usability - 2 | WebMaster & WebDesigner
Web Usability - 2 | WebMaster & WebDesignerWeb Usability - 2 | WebMaster & WebDesigner
Web Usability - 2 | WebMaster & WebDesignerMatteo Magni
 

Mais de Matteo Magni (20)

Introduzione DevOps con Ansible
Introduzione DevOps con AnsibleIntroduzione DevOps con Ansible
Introduzione DevOps con Ansible
 
HTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesignerHTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesigner
 
HTML5 e Css3 - 6 | WebMaster & WebDesigner
HTML5 e Css3 - 6 | WebMaster & WebDesignerHTML5 e Css3 - 6 | WebMaster & WebDesigner
HTML5 e Css3 - 6 | WebMaster & WebDesigner
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesigner
 
HTML5 e Css3 - 4 | WebMaster & WebDesigner
HTML5 e Css3 - 4 | WebMaster & WebDesignerHTML5 e Css3 - 4 | WebMaster & WebDesigner
HTML5 e Css3 - 4 | WebMaster & WebDesigner
 
HTML5 e Css3 - 3 | WebMaster & WebDesigner
HTML5 e Css3 - 3 | WebMaster & WebDesignerHTML5 e Css3 - 3 | WebMaster & WebDesigner
HTML5 e Css3 - 3 | WebMaster & WebDesigner
 
HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner
 
jQuery - 4 | WebMaster & WebDesigner
jQuery - 4 | WebMaster & WebDesignerjQuery - 4 | WebMaster & WebDesigner
jQuery - 4 | WebMaster & WebDesigner
 
jQuery - 3 | WebMaster & WebDesigner
jQuery - 3 | WebMaster & WebDesignerjQuery - 3 | WebMaster & WebDesigner
jQuery - 3 | WebMaster & WebDesigner
 
jQuery - 2 | WebMaster & WebDesigner
jQuery - 2 | WebMaster & WebDesignerjQuery - 2 | WebMaster & WebDesigner
jQuery - 2 | WebMaster & WebDesigner
 
jQuery - 1 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesignerjQuery - 1 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesigner
 
Javascript - 7 | WebMaster & WebDesigner
Javascript - 7 | WebMaster & WebDesignerJavascript - 7 | WebMaster & WebDesigner
Javascript - 7 | WebMaster & WebDesigner
 
Javascript - 6 | WebMaster & WebDesigner
Javascript - 6 | WebMaster & WebDesignerJavascript - 6 | WebMaster & WebDesigner
Javascript - 6 | WebMaster & WebDesigner
 
Javascript - 5 | WebMaster & WebDesigner
Javascript - 5 | WebMaster & WebDesignerJavascript - 5 | WebMaster & WebDesigner
Javascript - 5 | WebMaster & WebDesigner
 
Javascript - 4 | WebMaster & WebDesigner
Javascript - 4 | WebMaster & WebDesignerJavascript - 4 | WebMaster & WebDesigner
Javascript - 4 | WebMaster & WebDesigner
 
Javascript - 3 | WebMaster & WebDesigner
Javascript - 3 | WebMaster & WebDesignerJavascript - 3 | WebMaster & WebDesigner
Javascript - 3 | WebMaster & WebDesigner
 
Javascript - 2 | WebMaster & WebDesigner
Javascript - 2 | WebMaster & WebDesignerJavascript - 2 | WebMaster & WebDesigner
Javascript - 2 | WebMaster & WebDesigner
 
Javascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesignerJavascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesigner
 
Web Usability - 3 | WebMaster & WebDesigner
 Web Usability - 3 | WebMaster & WebDesigner Web Usability - 3 | WebMaster & WebDesigner
Web Usability - 3 | WebMaster & WebDesigner
 
Web Usability - 2 | WebMaster & WebDesigner
Web Usability - 2 | WebMaster & WebDesignerWeb Usability - 2 | WebMaster & WebDesigner
Web Usability - 2 | WebMaster & WebDesigner
 

HTML5 e Css3 - 2 | WebMaster & WebDesigner