La presentación trata sobre los mitos de la semántica web. Explica que la semántica se refiere al significado de los elementos en el lenguaje, y que en la web semántica implica el uso de etiquetas que comunican claramente el propósito y jerarquía del contenido. Refuta varios mitos como que la semántica es solo HTML5, que cualquier contenedor puede ser una sección, y que el div ya no existe. Concluye que la semántica mejora el SEO, accesibilidad y comprensión del contenido.

1. Los Mitos de la Semántica Web
WordCamp Buenos Aires 2015
@evaferreira92

2. ¡Hola!
Soy Evangelina…
Y estoy para quejarme.

3. Mitos de la Semántica Web
1. Qué es la Semántica
2. Por qué es importante
3. Mitos y Verdades

4. ¿Semántica?
Volviendo al secundario...

5. Semántica
● Análisis Sintáctico
● Análisis Morfológico
● Análisis Semántico

6. Análisis Sintáctico

8. Análisis Morfológico

10. Semántico
Semántico, ca:
(Del gr. σημαντικός, significativo).
1. adj. Perteneciente o relativo a la significación de las
palabras.
2. f. Estudio del significado de los signos lingüísticos y de
sus combinaciones, desde un punto de vista sincrónico
o diacrónico.

11. Semántica en la
Web
Interpretando nuestro sitio

12. Semántica en la Web
• Etiquetas de HTML5
article
section
header
footer
aside
nav
figure
figcaption

13. Análisis
http://www.dw.de/activistas-cruzan-
frontera-entre-las-coreas-por-la-paz/a-
18473129

14. Explicale a Google
● ¿Cómo se recorre el sitio?
● ¿Cuál es el contenido principal?
o “Por esto no te preocupes, es zarasa”

15. Explicale a Google
Sin etiquetas semánticas de HTML5…
Google ve divs con contenido.

16. ¿Cómo explicamos
nuestro sitio?

17. Pasar de esto...

18. A esto

19. Resaltar el contenido importante

20. Resaltar el contenido importante

21. <article>
<aside>

22. Y la barra de navegación interna del sitio

23. <nav>

24. Semántica en 2010
Article
Section
Aside
Nav
Header
Footer
Figure
Figcaption

25. Beneficios
Por qué invertir tu tiempo

26. Beneficios
● Mejor Comunicación

27. Beneficios
● Mejor Comunicación
● SEO

28. Beneficios
● Mejor Comunicación
● SEO
● Accesibilidad

29. Beneficios
● Mejor Comunicación
● SEO
● Accesibilidad
● Layout más claro

31. Layout

32. Mitos

33. “Semántica
es HTML5”

34. “Semántica
es HTML5”
Falso.

35. “Semántica es HTML5”
Semántica es HTML.

36. Decisiones semánticas
h1- 6
strong
hr
p
span
CSS
--------------------------------------
--------------------------------------
--------------------------------------

37. Semántica en 2010
Article
Section
Aside
Nav
Header
Footer
Figure
Figcaption

38. Pero antes…

39. Semántica en… 1992
http://info.cern.ch/hypertext/WWW/TheProject.html

40. Semántica en… 1992
http://info.cern.ch/hypertext/WWW/TheProject.html
<h1> </h1>

41. Jerarquizar
contenidos.

42. Semántica en… 1999

43. Semántica en… 1999

44. Organizar y jerarquizar la información
http://www.w3.org/2003/12/semantic-extractor.html

45. Análisis de WordCamp Bs. As.

46. Análisis de WordCamp Bs. As.

47. Análisis de WordCamp Bs. As.

48. Análisis de WordCamp Bs. As.

49. Análisis del Onepage Website X

50. Análisis del Sitio X
<h1>Landing Pages</h1>
<h1>LANDING PAGES</h1>
<h1>Templates</h1>
<h1>Grow your business</h1>
<h2>FULLY CUSTOMIZABLE TEMPLATES</h2>

51. Update del Sitio X
<h1>Landing Pages</h1>
<h1>Templates</h1>
<h2>Fully Customizable Templates</h2>
<h1>Grow your business</h1>
<h2>A/B Testing</h2>

52. “Se puede usar más
de 1 h1 en la página”
Verdadero

53. … Con cuidado

54. Debe variar
en todas las páginas

55. “El contenedor
es un <section>”

56. “El contenedor
es un <section>”
Falso

57. Muere un gatito.

58. Si el contenedor es un <section> muere un gatito
http://hellogig
gles.com/just
-bunch-cats-
bowls/

59. Si el contenedor es un <section> muere un gatito

60. Si el contenedor es un <section> muere un gatito

61. Si el contenedor es un <section> muere un gatito

62. El contenedor no es un section.

63. Funciones del contenedor

64. Funciones del contenedor

65. Funciones del contenedor
Centrar la página en el medio de la pantalla.

66. Funciones del contenedor
Diseño, no semántica.

67. “El <div>
ya no existe”

68. “El <div>
ya no existe”
Falso

69. Etiqueta div = span
● Uso NO semántico
o Diseño
● Cuando no estoy seguro
“Ante la duda, use divs!”

70. “La semántica
no es objetiva”

71. “La semántica
no es objetiva”
Verdadero

72. La Semántica no es objetiva
Lo dice el mismo estándar de la W3C.
“It depends on author's intent.”

73. Las nuevas etiquetas
semánticas...

74. “No funcionan
en IE8”
Verdadero

75. No Funcionan en IE8

76. No Funcionan en IE8
HTML5Shiv / Modernizr

77. Hay más usuarios con
problemas de visión,
que usuarios de IE8.

78. Otros elementos
Semánticos

79. Data-Attributes
● Atributos para CSS/JavaScript
● No es realmente semántico
<p data-firstname=”Juan” data-lastname=”Perez”>Juan Perez</p>

80. Inputs
● tel
● email
● number
● url
● date

81. Resumen

82. Resumen
● Semántica es HTML

83. Resumen
● Semántica es HTML
● No es objetiva

84. Resumen
● Semántica es HTML
● No es objetiva
● Mejor SEO y Accesibilidad

85. Resumen
● Semántica es HTML
● No es objetiva
● Mejor SEO y Accesibilidad
● Y...

87. ¡Gracias!
@evaferreira92

88. • Diseño y Maquetación para Wordpress
Maximiliano Stahl
• Desarrollando un Producto de Comunicación
Mailén Knoblovits
• Cómo Encontrar el Diseño Perfecto para tu Sitio Wordpress
Lance Willett
• Del Dicho al Hecho: analizando proyectos
Ricardo Aiello
Charlas de WordCamp relacionadas

89. ¡Se Aceptan Preguntas!
¡Gracias!