html 5 para seo
TRANSCRIPT
TALLER #CW17 #HTML5SEO
HTML 5 PARA SEO
by | #CW17 #HTML5SEO
"I've seen the FUTURE. It's in myBROWSER"
jjpeleato.com
1 . 1
¡GRACIAS Y BIENVENID@S!
Mi nombre es José Javier Peleato Pradel
Actualmente trabajo como desarrollador FullStackWordPress y colaboro en la organización de la
comunidad WordPress Zaragoza
by | #CW17 #HTML5SEO
"Si buscas resultados distintos, nohagas siempre lo mismo", Albert
Einsteinjjpeleato.com
1 . 2
LENGUAJE DE MARCASUn lenguaje de marcado o lenguaje de marcas es un
método de codificar un documento, que junto altexto, incorpora etiquetas o marcas que contienen
información adicional acerca de la estructura del textoo su presentación.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 2
Los lenguajes de marcas NO son lenguajes deprogramación.
No tienen funciones aritméticas o variables, como siposeen los lenguajes de programación.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 3
Los lenguajes de marcas se llaman así por la prácticatradicional de marcar los manuscritos con
instrucciones de impresión en los márgenes.
En la época de la imprenta, esta tarea hacorrespondido a los marcadores, que indicaban el tipo
de letra, el estilo y el tamaño, así como la correcciónde errores, para que otras personas compusieran la
tipografía.by | #CW17 #HTML5SEOjjpeleato.com
2 . 4
Existen tres tipos de marcado:
Marcado de presentación: Aquel que indica el formato del texto. Útil para maquetar la presentación de undocumento para solo lectura. En desuso.
Marcado de procedimientos: Aquel que está enfocado hacia la re/presentación del texto. El programa que representael documento debe interpretar el código en el mismo orden en el que aparece.Ejemplos: TeX, HTML, etc.
Marcado descriptivo: Utiliza etiquetas para describir los fragmentos de texto, pero sin especificar comodeben ser representados, o en qué orden. Ejemplo: XML, etc.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 5
WORLD WIDE WEB (WWW)World Wide Web (WWW) o red informática mundial es
un sistema de distribución de documentos dehipertexto o hipermedios interconectados vía
internet.by | #CW17 #HTML5SEOjjpeleato.com
2 . 6
La WWW se desarrolló en Ginebra en las instalacionesdel CERN (Organización Europea para la Investigación
Nuclear) entre marzo de 1989 y diciembre de 1990 porel inglés Tim Berners-Lee y el belga Robert Cailliau.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 7
Es importante saber que web o www no son sinónimode Internet, la web es un subconjunto de Internet que
consiste en páginas a las que se puede acceder usandoun navegador.
Internet es la red de redes donde reside toda lainformación. Tanto el correo electrónico, como FTPs,juegos, etc. son parte de Internet, pero no de la Web.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 8
TIM BERNERS-LEEConocido como el padre de la Web es un científico de
la computación que estableció la primeracomunicación entre un cliente y un servidor usando
el protocolo HTTP en noviembre de 1989.by | #CW17 #HTML5SEOjjpeleato.com
2 . 9
Él y su grupo crearon lo que por sus siglas en inglés sedenomina Lenguaje HTML (HyperText Markup
Language), el protocolo HTTP (HyperText TransferProtocol) y el sistema de localización de objetos en la
web URL (Uniform Resource Locator).by | #CW17 #HTML5SEOjjpeleato.com
2 . 10
En 1989, el CERN era el nodo de Internet más grandede Europa y Berners-Lee vio la oportunidad de unir
Internet e hipertexto (HTTP y HTML), de lo que surgiríala World Wide Web.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 11
La primera página web de Internet fue creada por TimBerners-Lee en 1991 alojada en el primer servidor webdel mundo: NeXT Computer que se encontraba en el
CERN y fue puesto en línea el 6 de agosto de 1991.
En octubre de 1994 Tim Berners-Lee fundo elconsorcio World Wide Web (W3C). Actualmente sigue
siendo el presidente y director.by | #CW17 #HTML5SEOjjpeleato.com
2 . 12
WORLD WIDE WEB CONSORTIUM (W3C)World Wide Web Consortium (W3C), es un consorcio
internacional que generan y definenrecomendaciones y estándares que aseguran el
crecimiento de la World Wide Web.
by | #CW17 #HTML5SEO
https://www.w3.org/
http://www.w3c.es/jjpeleato.com
2 . 13
ESTÁNDARES PUBLICADOS POR EL W3CCSS DOM HTML XHTML
XML SOAP SVG ...by | #CW17 #HTML5SEOjjpeleato.com
2 . 14
HTMLHTML, es un estándar que significa Lenguaje deMarcado para Hipertextos (HyperText Markup
Language) es el elemento de construcción más básicode una página web y se usa para crear y representar
visualmente una sitio web.
HTML es una ampliación/extensión de SGML(Standard Generalized Markup Language), un
estándar para la definición de lenguajes de marcas.by | #CW17 #HTML5SEOjjpeleato.com
2 . 15
HTML determina el contenido de la página web, perono su funcionalidad.
Otras tecnologías distintas de HTML son usadasgeneralmente para describir la
apariencia/presentación de una página web (CSS) o sufuncionalidad (JavaScript).
by | #CW17 #HTML5SEOjjpeleato.com
2 . 16
HTML usa "markup" o marcado para anotar textos,imágenes, y otros contenidos que se muestran en el
navegador Web.
El lenguaje de marcas HTML incluye"elementos/etiquetas" especiales tales como head,
title, body, header, article, section, p, div, span, img,y muchos más.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 17
HiperText se refiere a enlaces que conectan unapágina Web con otra, ya sea dentro de una página
web o entre diferentes sitios web.
Los hipervínculos son un aspecto fundamental de laWeb. Al subir contenido a Internet y vincularlo a páginasde otras personas, te haces participante activo de esta
red mundial.by | #CW17 #HTML5SEOjjpeleato.com
2 . 18
by | #CW17 #HTML5SEO
<!DOCTYPE html> <html lang="es-ES"> <head> <meta charset="utf-8"> <title>HTML< /title> </head> <body> <!-- Content --> </body> </html>
jjpeleato.com
2 . 19
XHTMLXHTML (eXtensible HyperText Markup Language) es a
XML como HTML es a SGML. Es decir, XHTML es unlenguaje de marcado que es similar al HTML, pero con
una sintaxis más estricta y expresada como XML.
by | #CW17 #HTML5SEO
http://librosweb.es/libro/xhtml/jjpeleato.com
2 . 20
by | #CW17 #HTML5SEO
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XHTML< /title> </head> <body> <!-- Content --> </body> </html>
jjpeleato.com
2 . 21
HTML 5HTML5 es la última versión de HTML. Quinta revisión
del lenguaje básico de WWW donde establece unaserie de elementos y atributos que reflejan el uso
típico de los sitios web modernos.by | #CW17 #HTML5SEOjjpeleato.com
3 . 2
Diseñado para ser utilizable por todos losdesarrolladores de Open Web, los recursos sobre lastecnologías se clasifican en varios grupos según su
función:by | #CW17 #HTML5SEOjjpeleato.com
3 . 3
Semántica: Permite describir con mayor precisióncuál es su contenido.Conectividad: Permite comunicarse con el servidorde formas nuevas e innovadoras.
by | #CW17 #HTML5SEOjjpeleato.com
3 . 4
Sin conexión y almacenamiento: Permite a laspáginas web almacenar datos localmente en el ladodel cliente y operar sin conexión de manera máseficiente.Multimedia: Nos otorga un excelente soporte parautilizar contenido multimedia como lo son audio yvideo nativamente.
by | #CW17 #HTML5SEOjjpeleato.com
3 . 5
Gráficos y efectos 2D/3D: Proporciona una ampliagama de nuevas características que se ocupan delos gráficos en la web como lo son canvas 2D,WebGL, SVG, etc.Rendimiento e Integración: Proporciona una mayoroptimización de la velocidad y un mejor uso delhardware.
by | #CW17 #HTML5SEOjjpeleato.com
3 . 6
Acceso al dispositivo: Proporciona APIs para el usode varios componentes internos de entrada y salidade nuestro dispositivo.CSS3: Nos ofrece una nueva gran variedad deopciones para hacer diseños más sofisticados.
by | #CW17 #HTML5SEOjjpeleato.com
3 . 7
RECURSOS
by | #CW17 #HTML5SEO
https://www.w3.org/html/
https://www.w3.org/TR/html5/
https://www.w3.org/html/logo/jjpeleato.com
3 . 8
APRENDER
by | #CW17 #HTML5SEO
https://www.w3schools.com/html/
https://developer.mozilla.org/esjjpeleato.com
3 . 9
ELEMENTO RAÍZElemento Descripción
Define que el documento está bajo el estándar de HTML 5.
Representa la raíz de un documento HTML o XHTML. Todos losdemás elementos deben ser descendientes de este elemento.
by | #CW17 #HTML5SEO
<!doctypehtml>
<html>
jjpeleato.com
4 . 2
METADATOS DEL DOCUMENTOElemento Descripción
Representa una colección de metadatos acerca del documento,incluyendo enlaces a, o definiciones de, scripts y hojas de estilo.
Define el título del documento, el cual se muestra en la barra detítulo del navegador o en las pestañas de página. Solamentepuede contener texto y cualquier otra etiqueta contenida no seráinterpretada.
by | #CW17 #HTML5SEO
<head>
<title>
jjpeleato.com
4 . 3
Elemento DescripciónDefine la URL base para las URLs relativas en la página. <base href="http://www.example.com/">
Usada para enlazar JavaScript y CSS externos con el documentoHTML actual.
by | #CW17 #HTML5SEO
<base>
<link>
jjpeleato.com
4 . 4
Elemento DescripciónDefine los metadatos que no pueden ser definidos usando otroelemento HTML.
Etiqueta de estilo usada para escribir CSS en línea.
by | #CW17 #HTML5SEO
<meta>
<style>jjpeleato.com
4 . 5
SCRIPTINGElemento Descripción
Define ya sea un script interno o un enlace hacia un scriptexterno. El lenguaje de programación es JavaScript
Define un contenido alternativo a mostrar cuando el navegadorno soporta scripting.
by | #CW17 #HTML5SEO
<script>
<noscript>
jjpeleato.com
4 . 6
SECCIONESElemento Descripción
Representa el contenido principal de un documento HTML. Solohay un elemento <body> en un documento.
Representa un contenedor genérico sin ningún significadoespecial.
Define la cabecera de una página o sección. Usualmente contieneun logotipo, el título del sitio Web y una tabla de navegación decontenidos.
by | #CW17 #HTML5SEO
<body>
<div>
<header>
jjpeleato.com
4 . 7
Elemento DescripciónDefine el pie de una página o sección. Usualmente contiene unmensaje de derechos de autoría, algunos enlaces a informaciónlegal o direcciones para dar información de retroalimentación.
Define una sección que solamente contiene enlaces de navegación
by | #CW17 #HTML5SEO
<footer>
<nav>jjpeleato.com
4 . 8
Elemento DescripciónDefine una sección en un documento.
Define contenido autónomo que podría existirindependientemente del resto del contenido.
by | #CW17 #HTML5SEO
<section>
<article>
jjpeleato.com
4 . 9
Elemento DescripciónDefine algunos contenidos vagamente relacionados con el restodel contenido de la página. Si es removido, el contenido restanteseguirá teniendo sentido
Los elemento de cabecera implementan seis niveles de cabecerasde documentos; <h1> es la de mayor y <h6> es la de menorimportancia. Un elemento de cabecera describe brevemente eltema de la sección que introduce.
by | #CW17 #HTML5SEO
<aside>
<h1> -<h6>
jjpeleato.com
4 . 10
Elemento DescripciónDefine una sección que contiene información de contacto.
Define el contenido principal o importante en el documento.Solamente existe un elemento <main> en el documento.
by | #CW17 #HTML5SEO
<address>
<main>
jjpeleato.com
4 . 11
SEMÁNTICA A NIVEL DE TEXTOElemento Descripción
Representa un valor de fecha y hora; el equivalente legible pormáquina puede ser representado en el atributo datetime.
by | #CW17 #HTML5SEO
<time>
jjpeleato.com
4 . 12
CONTENIDO INCRUSTADOElemento Descripción
Representa un video y sus archivos de audio con la interfaznecesaria para reproducirlos.
Representa un sonido o stream de audio.
by | #CW17 #HTML5SEO
<video>
<audio>jjpeleato.com
4 . 13
Elemento DescripciónPermite a autores especificar recursos multimedia alternativospara los elementos multimedia como <video> o <audio>.
Representa un punto de integración para una aplicación ocontenido interactivo externo que por lo general no es HTML.
by | #CW17 #HTML5SEO
<source>
<embed>
jjpeleato.com
4 . 14
Elemento DescripciónRepresenta un área de mapa de bits en el que se pueden utilizarscripts para renderizar gráficos como gráficas, gráficas de juegos ocualquier imagen visual al vuelo.
Define una imagen vectorial embebida.
Define una fórmula matemática.
by | #CW17 #HTML5SEO
<canvas>
<svg>
<math>jjpeleato.com
4 . 15
FORMULARIOSElemento Descripción
Representa un conjunto de opciones predefinidas para otroscontroles.
Genera claves asimétricas utilizando varios algoritmos. Dos de losalgoritmos predeterminados son: RSA y DSA
by | #CW17 #HTML5SEO
<datalist>
<keygen>
jjpeleato.com
4 . 16
Elemento DescripciónRepresenta el resultado de un cálculo.
Representa el progreso de finalización de una tarea.
by | #CW17 #HTML5SEO
<output>
<progress>jjpeleato.com
4 . 17
CASO PRÁCTICOby | #CW17 #HTML5SEO
Ejemplosjjpeleato.com
5 . 1
Estándar HTML 5:
SEO on Page:
(WordPress)
WPO:
by | #CW17 #HTML5SEO
http://validator.w3.org/
https://metricspot.com/
https://www.wpdoctor.es/
Pagespeed Insights
Pingdom Tools
GTmetrix
jjpeleato.com
6 . 2
¡FELIZ CONGRESO!
by | #CW17 #HTML5SEO
Simplemente, GRACIAS A TOD@S
jjpeleato.com
7