SlideShare ist ein Scribd-Unternehmen logo
1 von 32
Downloaden Sie, um offline zu lesen
Tecniche di animazione
digitale 1
Tecniche di animazione
digitale 1

Michele Bertoli
Founder / Lead Software Engineer at Igloo
igloolab.com
michele.bertoli@accademiasantagiulia.it
Basic 3
Agenda
New elements in HTML5       5


                            14
Sectioning content
                            22
Outline view
                            27

Markup and CSS validation
New elements in HTML5
Introduction
How were the element names decided upon?
  https://developers.google.com/webmasters/state-of-the-web/2005/classes




                             6   Basic / New elements in HTML5
<details> <summary>
The details element represents a disclosure widget from which
the user can obtain additional information or controls.


The summary element represents a summary, caption, or
legend for the rest of the contents of the summary element's
parent details element, if any.


                             7    Basic / New elements in HTML5
<details> <summary>
 http://jsfiddle.net/MicheleBertoli/5QRUz




                         8   Basic / New elements in HTML5
<details> <summary>




               9   Basic / New elements in HTML5
<figure> <figcaption>
The figure element represents a unit of content, optionally with a
caption, that is self-contained, that is typically referenced as a
single unit from the main flow of the document, and that can be
moved away from the main flow of the document without affecting
the document’s meaning.


The figcaption element represents a caption or legend for a figure.

                              10   Basic / New elements in HTML5
<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>




                            11   Basic / New elements in HTML5
<time>
The time element represents its contents, along with a
machine-readable form of those contents in the datetime
attribute.
The kind of content is limited to various kinds of dates, times,
time-zone offsets, and durations.

    <time>2011-11-12</time>




                              12   Basic / New elements in HTML5
Coffee Break
Sectioning content
Sectioning models
● Text-level semantics — what were previously inline tags
● Grouping content — block level elements like paragraphs,
  lists, and divs
● Forms — everything inside form tags
● Embedded content — images, video, audio, and canvas
● Sectioning content — the new structural tags




                         15   Basic / Sectioning content
Introduction
Sectioning content is used to divide an HTML document into
sections. Each section of the document would generally have
it's own header, and possibly footer, as well as content.




                            16   Basic / Sectioning content
Sectioning elements
●   article
●   aside
●   nav
●   section




                17   Basic / Sectioning content
Implicit sectioning
Because the HTML5 Sectioning Elements aren't mandatory to
define an outline, to keep compatibility with the existing web
dominated by HTML4, there is a way to define sections without
them. This is called implicit sectioning.




                             18   Basic / Sectioning content
Sample
  <section>
   <h1>Forest elephants</h1>
     <p>In    this   section,   we   discuss         the          lesser   known   forest
  elephants.
     ...this section continues...
   <h3 class="implicit subsection">Habitat</h3>
   <p>Forest elephants do not live in trees but among them.
     ...this subsection continues...
  </section>




                                19   Basic / Sectioning content
Untitled documents
If no heading is at the root level of the document (i.e. not
inside sectioning content), then the document itself will be
untitled.




                          20   Basic / Sectioning content
Sample
  <body>
      <article>
          <h1>Title</h1>
          <p>Content</p>
      </article>
  </body>




                           21   Basic / Sectioning content
Outline view
Introduction
The document outline is the structure of a document, generated by
the document’s headings, form titles, table titles, and any other
appropriate landmarks to map out the document.


The document outlining algorithm is a mechanism for producing
outline summaries of Web pages based on how they are marked
up.

                            23   Basic / Outline view
Tools
 https://addons.opera.com/en/extensions/details/html5-outliner/?display=en
 http://gsnedders.html5.org/outliner
 http://code.google.com/p/h5o




                             24   Basic / Outline view
Twentyten




            25   Basic / Outline view
Twentyeleven




               26   Basic / Outline view
Markup and CSS
  validation
Introduction
The Markup Validation Service is a validator by the World Wide Web
Consortium (W3C) that allows Internet users to check HTML and
XHTML documents for well-formed markup.




                             28   Basic / Markup and CSS validation
Why validate?
●   Validation as a debugging tool
●   Validation as a future-proof quality check
●   Validation eases maintenance
●   Validation helps teach good practices
●   Validation is a sign of professionalism




                             29   Basic / Markup and CSS validation
Markup Validation Service
 http://validator.w3.org




                           30   Basic / Outline view
CSS Validation Service
  http://jigsaw.w3.org/css-validator




                               31   Basic / Outline view
Thank you

Weitere ähnliche Inhalte

Ähnlich wie #3 - Sectioning content and outline view

Html 5, a gentle introduction
Html 5, a gentle introductionHtml 5, a gentle introduction
Html 5, a gentle introductionDiego Scataglini
 
Html5, a gentle introduction
Html5, a gentle introduction Html5, a gentle introduction
Html5, a gentle introduction Diego Scataglini
 
Additional HTML
Additional HTML Additional HTML
Additional HTML Doeun KOCH
 
Getting started with html5
Getting started with html5Getting started with html5
Getting started with html5Suresh Kumar
 
02 From HTML tags to XHTML
02 From HTML tags to XHTML02 From HTML tags to XHTML
02 From HTML tags to XHTMLRich Dron
 
HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.Beqa Chacha
 
Html5 Introduction
Html5 IntroductionHtml5 Introduction
Html5 IntroductionManoj Kumar
 
Html css java script basics All about you need
Html css java script basics All about you needHtml css java script basics All about you need
Html css java script basics All about you needDipen Parmar
 
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]Aaron Gustafson
 
Web Development Course - HTML5 & CSS3 by RSOLUTIONS
Web Development Course - HTML5 & CSS3 by RSOLUTIONSWeb Development Course - HTML5 & CSS3 by RSOLUTIONS
Web Development Course - HTML5 & CSS3 by RSOLUTIONSRSolutions
 

Ähnlich wie #3 - Sectioning content and outline view (20)

Intro to html 5
Intro to html 5Intro to html 5
Intro to html 5
 
Html5
Html5Html5
Html5
 
HTML 5
HTML 5HTML 5
HTML 5
 
Html 5
Html 5Html 5
Html 5
 
Html 5, a gentle introduction
Html 5, a gentle introductionHtml 5, a gentle introduction
Html 5, a gentle introduction
 
Html5, a gentle introduction
Html5, a gentle introduction Html5, a gentle introduction
Html5, a gentle introduction
 
Additional HTML
Additional HTML Additional HTML
Additional HTML
 
Html 5 - What's new?
Html 5 - What's new?Html 5 - What's new?
Html 5 - What's new?
 
Getting started with html5
Getting started with html5Getting started with html5
Getting started with html5
 
02 From HTML tags to XHTML
02 From HTML tags to XHTML02 From HTML tags to XHTML
02 From HTML tags to XHTML
 
Lab#2 overview of html
Lab#2 overview of htmlLab#2 overview of html
Lab#2 overview of html
 
Html5 tutorial
Html5 tutorialHtml5 tutorial
Html5 tutorial
 
Html5 - Tutorial
Html5 - TutorialHtml5 - Tutorial
Html5 - Tutorial
 
HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.
 
Html5 semantics
Html5 semanticsHtml5 semantics
Html5 semantics
 
Html5 Introduction
Html5 IntroductionHtml5 Introduction
Html5 Introduction
 
HTML5 Semantics
HTML5 SemanticsHTML5 Semantics
HTML5 Semantics
 
Html css java script basics All about you need
Html css java script basics All about you needHtml css java script basics All about you need
Html css java script basics All about you need
 
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
 
Web Development Course - HTML5 & CSS3 by RSOLUTIONS
Web Development Course - HTML5 & CSS3 by RSOLUTIONSWeb Development Course - HTML5 & CSS3 by RSOLUTIONS
Web Development Course - HTML5 & CSS3 by RSOLUTIONS
 

Mehr von iloveigloo

#7 - Client-side web apps, MVC and jQuery
#7 - Client-side web apps, MVC and jQuery#7 - Client-side web apps, MVC and jQuery
#7 - Client-side web apps, MVC and jQueryiloveigloo
 
#6 - Template Engine: Mustache.js
#6 - Template Engine: Mustache.js#6 - Template Engine: Mustache.js
#6 - Template Engine: Mustache.jsiloveigloo
 
#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgroundsiloveigloo
 
#2 - CSS Layouts Overview
#2 - CSS Layouts Overview#2 - CSS Layouts Overview
#2 - CSS Layouts Overviewiloveigloo
 
#1 - HTML5 Overview
#1 - HTML5 Overview#1 - HTML5 Overview
#1 - HTML5 Overviewiloveigloo
 
Client-side MVC with Backbone.js (reloaded)
Client-side MVC with Backbone.js (reloaded)Client-side MVC with Backbone.js (reloaded)
Client-side MVC with Backbone.js (reloaded)iloveigloo
 
Client-side MVC with Backbone.js
Client-side MVC with Backbone.js Client-side MVC with Backbone.js
Client-side MVC with Backbone.js iloveigloo
 
Shoppingsquare
ShoppingsquareShoppingsquare
Shoppingsquareiloveigloo
 

Mehr von iloveigloo (9)

#7 - Client-side web apps, MVC and jQuery
#7 - Client-side web apps, MVC and jQuery#7 - Client-side web apps, MVC and jQuery
#7 - Client-side web apps, MVC and jQuery
 
#6 - Template Engine: Mustache.js
#6 - Template Engine: Mustache.js#6 - Template Engine: Mustache.js
#6 - Template Engine: Mustache.js
 
#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds
 
$$$ SOLDI $$$
$$$ SOLDI $$$$$$ SOLDI $$$
$$$ SOLDI $$$
 
#2 - CSS Layouts Overview
#2 - CSS Layouts Overview#2 - CSS Layouts Overview
#2 - CSS Layouts Overview
 
#1 - HTML5 Overview
#1 - HTML5 Overview#1 - HTML5 Overview
#1 - HTML5 Overview
 
Client-side MVC with Backbone.js (reloaded)
Client-side MVC with Backbone.js (reloaded)Client-side MVC with Backbone.js (reloaded)
Client-side MVC with Backbone.js (reloaded)
 
Client-side MVC with Backbone.js
Client-side MVC with Backbone.js Client-side MVC with Backbone.js
Client-side MVC with Backbone.js
 
Shoppingsquare
ShoppingsquareShoppingsquare
Shoppingsquare
 

#3 - Sectioning content and outline view

  • 2. Tecniche di animazione digitale 1 Michele Bertoli Founder / Lead Software Engineer at Igloo igloolab.com michele.bertoli@accademiasantagiulia.it
  • 4. Agenda New elements in HTML5 5 14 Sectioning content 22 Outline view 27 Markup and CSS validation
  • 6. Introduction How were the element names decided upon? https://developers.google.com/webmasters/state-of-the-web/2005/classes 6 Basic / New elements in HTML5
  • 7. <details> <summary> The details element represents a disclosure widget from which the user can obtain additional information or controls. The summary element represents a summary, caption, or legend for the rest of the contents of the summary element's parent details element, if any. 7 Basic / New elements in HTML5
  • 9. <details> <summary> 9 Basic / New elements in HTML5
  • 10. <figure> <figcaption> The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning. The figcaption element represents a caption or legend for a figure. 10 Basic / New elements in HTML5
  • 11. <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> 11 Basic / New elements in HTML5
  • 12. <time> The time element represents its contents, along with a machine-readable form of those contents in the datetime attribute. The kind of content is limited to various kinds of dates, times, time-zone offsets, and durations. <time>2011-11-12</time> 12 Basic / New elements in HTML5
  • 15. Sectioning models ● Text-level semantics — what were previously inline tags ● Grouping content — block level elements like paragraphs, lists, and divs ● Forms — everything inside form tags ● Embedded content — images, video, audio, and canvas ● Sectioning content — the new structural tags 15 Basic / Sectioning content
  • 16. Introduction Sectioning content is used to divide an HTML document into sections. Each section of the document would generally have it's own header, and possibly footer, as well as content. 16 Basic / Sectioning content
  • 17. Sectioning elements ● article ● aside ● nav ● section 17 Basic / Sectioning content
  • 18. Implicit sectioning Because the HTML5 Sectioning Elements aren't mandatory to define an outline, to keep compatibility with the existing web dominated by HTML4, there is a way to define sections without them. This is called implicit sectioning. 18 Basic / Sectioning content
  • 19. Sample <section> <h1>Forest elephants</h1> <p>In this section, we discuss the lesser known forest elephants. ...this section continues... <h3 class="implicit subsection">Habitat</h3> <p>Forest elephants do not live in trees but among them. ...this subsection continues... </section> 19 Basic / Sectioning content
  • 20. Untitled documents If no heading is at the root level of the document (i.e. not inside sectioning content), then the document itself will be untitled. 20 Basic / Sectioning content
  • 21. Sample <body> <article> <h1>Title</h1> <p>Content</p> </article> </body> 21 Basic / Sectioning content
  • 23. Introduction The document outline is the structure of a document, generated by the document’s headings, form titles, table titles, and any other appropriate landmarks to map out the document. The document outlining algorithm is a mechanism for producing outline summaries of Web pages based on how they are marked up. 23 Basic / Outline view
  • 25. Twentyten 25 Basic / Outline view
  • 26. Twentyeleven 26 Basic / Outline view
  • 27. Markup and CSS validation
  • 28. Introduction The Markup Validation Service is a validator by the World Wide Web Consortium (W3C) that allows Internet users to check HTML and XHTML documents for well-formed markup. 28 Basic / Markup and CSS validation
  • 29. Why validate? ● Validation as a debugging tool ● Validation as a future-proof quality check ● Validation eases maintenance ● Validation helps teach good practices ● Validation is a sign of professionalism 29 Basic / Markup and CSS validation
  • 30. Markup Validation Service http://validator.w3.org 30 Basic / Outline view
  • 31. CSS Validation Service http://jigsaw.w3.org/css-validator 31 Basic / Outline view