O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

465 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

×