Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
HTML5 & Semantic Web

Prepared by Jeremiah L. Brusola
Web




Web










Socialize
Videos
News



Gaming

Sharing

Communication

  

Web







Entertainment

Services



Shopping
Music






   



Web  


  


  








Web pages are to
be read by people


Web pages are to
be read by people



What about computers?
Web pages are to
be read by people



What about computers?




Web pages are to
be read by people

What about computers?















Web Browsers
- retrieves data from the web
- presents data to users.
- renders HTML based from it's tags.
Information is shared through HTML
Information is shared through HTML
<p>This cat is funny.</p>
<img src=”cat.gif” alt=”funny cat”/>
Information is shared through HTML
<p>This cat is funny.</p>
<img src=”cat.gif” alt=”funny cat”/>

Browsers can render the...
This cat is funny.
Semantic Web
Semantic Web
- a movement to promote conversion of
unstructured documents to a web of data.
Semantic Web
- a movement to promote conversion of
unstructured documents to a web of data.

Semantic = Meaning
Semantic Web
- a movement to promote conversion of
unstructured documents to a web of data.

Semantic = Meaning
- coined b...
Why Semantic?
Why Semantic?
- Searchability
Why Semantic?
- Searchability
- Accessibility
Why Semantic?
- Searchability
- Accessibility
- Consistency
Why Semantic?
- Searchability
- Accessibility
- Consistency




Why Semantic?
- Searchability
- Accessibility
- Consistency
For computers




Why Semantic?
- Searchability
- Accessibility
- Consistency





For computers
computers can easily understand the
mean...
Why Semantic?
- Searchability
- Accessibility
- Consistency





For computers
computers can easily understand the
mean...
HTML5
- the successor to HTML 4.01
and XHTML 1.1
HTML5
- the successor to HTML 4.01
and XHTML 1.1
- semantic markups
HTML5
- the successor to HTML 4.01
and XHTML 1.1
- semantic markups
- consistently understood by
computers and devices
HTML5
- the successor to HTML 4.01
and XHTML 1.1
- semantic markups
- consistently understood by
computers and devices


Pave the Cowpaths Principle
Pave the Cowpaths Principle
Don't reinvent the wheel
Pave the Cowpaths Principle
Don't reinvent the wheel
Semantic HTML 4?
Pave the Cowpaths Principle
Don't reinvent the wheel
Semantic HTML 4?
<b> → <strong>
<i> → <em>
Pave the Cowpaths Principle
Don't reinvent the wheel
Semantic HTML 4?
<b> → <strong>
<i> → <em>
<meta name=”keywords” cont...
Markup Comparison
HTML 4
<div
class=”header”> ...
<div class='nav'>
<ul>
<li> ...

</>
Markup Comparison

</>

HTML 4

HTML 5

<div class=”header”> ...

<header> ...

<div class='nav'>

<nav>

<ul>

<ul>
<li> ...
More HTML5 Markups
<article>
<header>...</header>
<section>...</section>
<footer>...</footer>
</article>

</>
More HTML5 Markups
<article>
<header>...</header>
<section>...</section>
<footer>...</footer>
</article>

</>
More HTML5 Markups
<article>
<header>...</header>
<section>...</section>
<footer>...</footer>
</article>

</>
More HTML5 Markups
<article>
<header>...</header>
<section>...</section>
<footer>...</footer>
</article>

</>
More HTML5 Markups

</>

<label for=”fullname”>Name</label>
<input type=”text” id=”fullname” />
More HTML5 Markups

</>

<label for=”fullname”>Name</label>
<input type=”text” id=”fullname” />
<label for=”email”>Name</l...
...And way even more!

</>

article

footer

nav

aside

header

section

figcaption

hgroup

time

figure

mark
Down the road
- Data can be shared easily.


Down the road
- Data can be shared easily.
- Data can easily be accessible.


Down the road
- Data can be shared easily.
- Data can easily be accessible.



- Web pages can communicate with other
web...
Down the road
- Data can be shared easily.
- Data can easily be accessible.



- Web pages can communicate with other
web...
Thank you.


References and Attributions
●

http://en.wikipedia.org/wiki/Semantic_Web

●

http://en.wikipedia.org/wiki/Semantics

●
...
Prochain SlideShare
Chargement dans…5
×

HTML5 and Semantic Web

400 vues

Publié le

Publié dans : Technologie, Design
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

HTML5 and Semantic Web

  1. 1. HTML5 & Semantic Web Prepared by Jeremiah L. Brusola
  2. 2. Web
  3. 3.   Web      
  4. 4. Socialize Videos News  Gaming Sharing Communication    Web    Entertainment Services  Shopping Music
  5. 5.            Web                  
  6. 6. Web pages are to be read by people 
  7. 7. Web pages are to be read by people  What about computers?
  8. 8. Web pages are to be read by people  What about computers? 
  9. 9.  Web pages are to be read by people What about computers?        
  10. 10. Web Browsers - retrieves data from the web - presents data to users. - renders HTML based from it's tags.
  11. 11. Information is shared through HTML
  12. 12. Information is shared through HTML <p>This cat is funny.</p> <img src=”cat.gif” alt=”funny cat”/>
  13. 13. Information is shared through HTML <p>This cat is funny.</p> <img src=”cat.gif” alt=”funny cat”/> Browsers can render the information but won't understand it's meaning and relation. ...
  14. 14. This cat is funny.
  15. 15. Semantic Web
  16. 16. Semantic Web - a movement to promote conversion of unstructured documents to a web of data.
  17. 17. Semantic Web - a movement to promote conversion of unstructured documents to a web of data. Semantic = Meaning
  18. 18. Semantic Web - a movement to promote conversion of unstructured documents to a web of data. Semantic = Meaning - coined by Tim Berners-Lee
  19. 19. Why Semantic?
  20. 20. Why Semantic? - Searchability
  21. 21. Why Semantic? - Searchability - Accessibility
  22. 22. Why Semantic? - Searchability - Accessibility - Consistency
  23. 23. Why Semantic? - Searchability - Accessibility - Consistency   
  24. 24. Why Semantic? - Searchability - Accessibility - Consistency For computers   
  25. 25. Why Semantic? - Searchability - Accessibility - Consistency    For computers computers can easily understand the meaning of the data
  26. 26. Why Semantic? - Searchability - Accessibility - Consistency    For computers computers can easily understand the meaning of the data
  27. 27. HTML5 - the successor to HTML 4.01 and XHTML 1.1
  28. 28. HTML5 - the successor to HTML 4.01 and XHTML 1.1 - semantic markups
  29. 29. HTML5 - the successor to HTML 4.01 and XHTML 1.1 - semantic markups - consistently understood by computers and devices
  30. 30. HTML5 - the successor to HTML 4.01 and XHTML 1.1 - semantic markups - consistently understood by computers and devices 
  31. 31. Pave the Cowpaths Principle
  32. 32. Pave the Cowpaths Principle Don't reinvent the wheel
  33. 33. Pave the Cowpaths Principle Don't reinvent the wheel Semantic HTML 4?
  34. 34. Pave the Cowpaths Principle Don't reinvent the wheel Semantic HTML 4? <b> → <strong> <i> → <em>
  35. 35. Pave the Cowpaths Principle Don't reinvent the wheel Semantic HTML 4? <b> → <strong> <i> → <em> <meta name=”keywords” content=”...”> <meta name=”author” content=”...”> ...
  36. 36. Markup Comparison HTML 4 <div class=”header”> ... <div class='nav'> <ul> <li> ... </>
  37. 37. Markup Comparison </> HTML 4 HTML 5 <div class=”header”> ... <header> ... <div class='nav'> <nav> <ul> <ul> <li> ... <li> ...
  38. 38. More HTML5 Markups <article> <header>...</header> <section>...</section> <footer>...</footer> </article> </>
  39. 39. More HTML5 Markups <article> <header>...</header> <section>...</section> <footer>...</footer> </article> </>
  40. 40. More HTML5 Markups <article> <header>...</header> <section>...</section> <footer>...</footer> </article> </>
  41. 41. More HTML5 Markups <article> <header>...</header> <section>...</section> <footer>...</footer> </article> </>
  42. 42. More HTML5 Markups </> <label for=”fullname”>Name</label> <input type=”text” id=”fullname” />
  43. 43. More HTML5 Markups </> <label for=”fullname”>Name</label> <input type=”text” id=”fullname” /> <label for=”email”>Name</label> <input type=”email” id=”email” />
  44. 44. ...And way even more! </> article footer nav aside header section figcaption hgroup time figure mark
  45. 45. Down the road - Data can be shared easily. 
  46. 46. Down the road - Data can be shared easily. - Data can easily be accessible. 
  47. 47. Down the road - Data can be shared easily. - Data can easily be accessible.  - Web pages can communicate with other web pages.
  48. 48. Down the road - Data can be shared easily. - Data can easily be accessible.  - Web pages can communicate with other web pages. - There will be a better web!
  49. 49. Thank you.
  50. 50.  References and Attributions ● http://en.wikipedia.org/wiki/Semantic_Web ● http://en.wikipedia.org/wiki/Semantics ● ● ● ● ● http://www.webdesignerdepo t.com/2012/12/ why-html5-is-more-semantic/ http://www.webresourcesdepo t.com/officialhtml5-logo-is-out-get-your-badge/ http://www.html5rocks.com/en/fea tures/se mantics http://www.w3.org/html/wg/wiki/ProposedDe signPrinciples http://html5doctor.com/lets-talk-aboutsemantics/

×