Developer
TECH REFRESH
15 Junho 2015
#pttechrefresh
Now I see you, Now I understand you
New Web Semantics
Now I see you
Now I understand you
New Web Semantics
Ricardo Castelhano (@riccastelhano)
Fullstack Dev / Technical Manager...
Agenda
• Headings Vs Sections
• MicroData Vs RDFa Lite
• Vocabularies / Taxonomies
Headings vs Sections
source: SmashingMagazine
source: SmashingMagazine
Does it mean my content just follows the Normal Document Flow?
Slide Note:
Using only headings is harder to give
proper se...
source: SmashingMagazine
source: SmashingMagazine
Slide Note:
To whom div#footer belongs?
HTML5 New Structure Elements
• In 2005, Google analyzed 1 million pages...
• In 2008, Opera analyzed over 4 million pages....
HTML5 New Structure Elements
• Article
“The article element represents a complete, or self-contained,
composition in a doc...
HTML5 New Structure Elements
• Section
“The section element represents a generic section of a document or
application. A s...
HTML5 New Structure Elements
• Nav
“The nav element represents a section of a page that links to
other pages or to parts w...
HTML5 New Structure Elements
• Aside
“The aside element represents a section of a page that consists of
content that is ta...
HTML5 New Structure Elements
• Header
“The header element represents introductory content for its
nearest ancestor section...
HTML5 New Structure Elements
• Footer
“The footer element represents a footer for its nearest ancestor
sectioning content(...
Slide Note:
The difference between HTML5 Outline and Heading Outline,
Visible with “HeadingMaps”, a Google Chrome extensio...
Meanwhile, back in 1991...
“(...) I would in fact prefer, instead of <H1>, <H2>
etc for headings [those come from the AAP ...
“There are currently no known implementations of the outline algorithm in graphical browsers or
assistive technology user ...
MicroData Vs RDFa Lite
MicroData
• Easy-to-write
• Machine-readable data
• In 2011, Google, Bing, Yahoo! and Yandex choosed MicroData
• But soon ...
MicroData
• Last update – 29 October 2013
• Published as a Note (failed publication as a W3C recommendation)
RDFa Lite
• Machine-readable data
• Minimal subset of RDFa
• Resource Description Framework in attributes
• Almost isomorp...
Vocabularies / Taxonomies
Vocabularies / Taxonomies
• Improve relevance of search in a vertical domain
• Crucial components for:
• information retri...
Schema.org
• Supported by Google, Bing, Yahoo! and Yandex
• W3C Schema.org Community Group was created in April 2015
• htt...
Build Great Apps with HTML5
MCSD Jump Start Training
http://www.microsoftvirtualacademy.com/colleges/mcsd-htmL5
• Developi...
Try Azure
for Free
Download
Visual Studio 2015 RC
http://aka.ms/downloadvisualstudio2015
http://aka.ms/tryazure
Download
V...
Developer
TECH REFRESH
Thank you
Ricardo Castelhano (@riccastelhano)
Fullstack Dev / Technical Manager / Scrum Master
Now I See You, Now I Understand You - New Web Semantics
Próximos SlideShares
Carregando em…5
×

Now I See You, Now I Understand You - New Web Semantics

434 visualizações

Publicada em

My talk about Web Semantics, the new HTML5 structure tags, the usage of microdata and rdfa lite, choosing vocabularies/taxonomies and the schema.org project.

Publicada em: Internet
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Now I See You, Now I Understand You - New Web Semantics

  1. 1. Developer TECH REFRESH 15 Junho 2015 #pttechrefresh Now I see you, Now I understand you New Web Semantics
  2. 2. Now I see you Now I understand you New Web Semantics Ricardo Castelhano (@riccastelhano) Fullstack Dev / Technical Manager / Scrum Master
  3. 3. Agenda • Headings Vs Sections • MicroData Vs RDFa Lite • Vocabularies / Taxonomies
  4. 4. Headings vs Sections
  5. 5. source: SmashingMagazine
  6. 6. source: SmashingMagazine
  7. 7. Does it mean my content just follows the Normal Document Flow? Slide Note: Using only headings is harder to give proper section to content
  8. 8. source: SmashingMagazine source: SmashingMagazine Slide Note: To whom div#footer belongs?
  9. 9. HTML5 New Structure Elements • In 2005, Google analyzed 1 million pages... • In 2008, Opera analyzed over 4 million pages... They were looking for DIVs: • Class names • ID names
  10. 10. HTML5 New Structure Elements • Article “The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. Syndication (...)” Source: HTML5 W3C Recommendation 28 October 2014
  11. 11. HTML5 New Structure Elements • Section “The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content (...)” Source: HTML5 W3C Recommendation 28 October 2014
  12. 12. HTML5 New Structure Elements • Nav “The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links(...)” Source: HTML5 W3C Recommendation 28 October 2014
  13. 13. HTML5 New Structure Elements • Aside “The aside element represents a section of a page that consists of content that is tangentially related to the content around(...), and which could be considered separate from that content(...)” Source: HTML5 W3C Recommendation 28 October 2014 Slide Note: Such sections are often represented as sidebars in printed publications, But it doesn’t have to be that way!
  14. 14. HTML5 New Structure Elements • Header “The header element represents introductory content for its nearest ancestor sectioning content(...); it doesn’t introduce a new section(...)” Source: HTML5 W3C Recommendation 28 October 2014
  15. 15. HTML5 New Structure Elements • Footer “The footer element represents a footer for its nearest ancestor sectioning content(...); it doesn’t introduce a new section(...)” Source: HTML5 W3C Recommendation 28 October 2014
  16. 16. Slide Note: The difference between HTML5 Outline and Heading Outline, Visible with “HeadingMaps”, a Google Chrome extension.
  17. 17. Meanwhile, back in 1991... “(...) I would in fact prefer, instead of <H1>, <H2> etc for headings [those come from the AAP DTD] to have a nestable <SECTION>..</SECTION> element, and a generic <H>..</H> which at any level within the sections would produce the required level of heading (…)” Sir Tim Berners-Lee http://1997.webhistory.org/www.lists/www-talk.1991/0003.html Slide Note: AAP DTD - Association of American Publishers Document Type Definition
  18. 18. “There are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure.” Source: HTML5.1 W3C Editor’s Draft 23 March 2015 Warning !!
  19. 19. MicroData Vs RDFa Lite
  20. 20. MicroData • Easy-to-write • Machine-readable data • In 2011, Google, Bing, Yahoo! and Yandex choosed MicroData • But soon started to support multiple syntaxes “(…)There are certain things that are much harder in Microdata, like mixing vocabularies, or inverting the direction of a property relationship(…) Source: Schema.org
  21. 21. MicroData • Last update – 29 October 2013 • Published as a Note (failed publication as a W3C recommendation)
  22. 22. RDFa Lite • Machine-readable data • Minimal subset of RDFa • Resource Description Framework in attributes • Almost isomorphic to MicroData • W3C Recommendation 17 March 2015 • With support of Google, Bing, Yandex, Yahoo!
  23. 23. Vocabularies / Taxonomies
  24. 24. Vocabularies / Taxonomies • Improve relevance of search in a vertical domain • Crucial components for: • information retrieval • natural language processing • knowledge management • ... • Build, tune and manage taxonomies • Time consuming • Expensive • Shared vocabularies • Saves time consumption • Make webmaster and developers life easier
  25. 25. Schema.org • Supported by Google, Bing, Yahoo! and Yandex • W3C Schema.org Community Group was created in April 2015 • https://www.w3.org/community/schemaorg/ • GoodRelations was 99% integrated to Schema.org • Dublin Core integration is underway Over 10 million sites using schema.org
  26. 26. Build Great Apps with HTML5 MCSD Jump Start Training http://www.microsoftvirtualacademy.com/colleges/mcsd-htmL5 • Developing in HTML5 with JavaScript and CSS3 Jump Start • Developing Windows Store Apps with HTML5 Jump Start • Advanced Windows Store App Development with HTML5 Jump Start • Windows Store Apps with HTML5 Refresh Jump Start Microsoft Virtual Academy www.microsoftvirtualacademy.com
  27. 27. Try Azure for Free Download Visual Studio 2015 RC http://aka.ms/downloadvisualstudio2015 http://aka.ms/tryazure Download Visual Studio Code Preview http://aka.ms/downloadvscode
  28. 28. Developer TECH REFRESH Thank you Ricardo Castelhano (@riccastelhano) Fullstack Dev / Technical Manager / Scrum Master

×