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.

1. Developer
TECH REFRESH
15 Junho 2015
#pttechrefresh
Now I see you, Now I understand you
New Web Semantics

2. Now I see you
Now I understand you
New Web Semantics
Ricardo Castelhano (@riccastelhano)
Fullstack Dev / Technical Manager / Scrum Master

3. Agenda
• Headings Vs Sections
• MicroData Vs RDFa Lite
• Vocabularies / Taxonomies

4. Headings vs Sections

5. source: SmashingMagazine

6. source: SmashingMagazine

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. source: SmashingMagazine
source: SmashingMagazine
Slide Note:
To whom div#footer belongs?

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

17. Slide Note:
The difference between HTML5 Outline and Heading Outline,
Visible with “HeadingMaps”, a Google Chrome extension.

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

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

20. MicroData Vs RDFa Lite

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

22. MicroData
• Last update – 29 October 2013
• Published as a Note (failed publication as a W3C recommendation)

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

24. Vocabularies / Taxonomies

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

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

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

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

29. Developer
TECH REFRESH
Thank you
Ricardo Castelhano (@riccastelhano)
Fullstack Dev / Technical Manager / Scrum Master