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

430 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
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
430
No SlideShare
0
A partir de incorporações
0
Número de incorporações
11
Ações
Compartilhamentos
0
Downloads
4
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Utilizando somente um ranking com os headings (h1 – h6), dificilmente conseguiremos ter divisoes do conteudo
  • Such sections are often represented as sidebars in printed typography.
  • AAP DTD – Association of American Publishers Document Type Definition
  • Your web pages have an underlying meaning that people understand when they read the web pages. But search engines have a limited understanding of what is being discussed on those pages. By adding additional tags to the HTML of your web pages—tags that say, "Hey search engine, this information describes this specific movie, or place, or person, or video"—you can help search engines and other applications better understand your content and display it in a useful, relevant way. Microdata is a set of tags, introduced with HTML5, that allows you to do this.

  • A shared vocabulary makes it easier for webmasters and developers to decide on a schema and get the maximum benefit for their efforts. It is in this spirit that the sponsors, together with the larger community have come together, to provide a shared collection of schemas.

    Taxonomy for search engines as a tool to improve relevance of search in a vertical domain

    Taxonomies, thesauri and concept hierarchies are crucial components for many applications of information retrieval, natural language processing and knowledge management. Building, tuning and managing taxonomies and ontologies is rather costly since a lot of manual operations are required. A number of studies proposed the automated building of taxonomies based on linguistic resources and/or statistical machine learning
  • 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

    ×