TALLER #CW17 #HTML5SEO

HTML 5 para SEO

"I've seen the FUTURE. It's in my BROWSER"

by jjpeleato.com | #CW17 #HTML5SEO

¡Hola y bienvenid@s!

Mi nombre es José J. Peleato Pradel.

by jjpeleato.com | #CW17 #HTML5SEO

¿Qué es HTML?

by jjpeleato.com | #CW17 #HTML5SEO

Lenguaje de marcas

Un lenguaje de marcado o lenguaje de marcas es un método de codificar un documento, que junto al texto, incorpora etiquetas o marcas que contienen información adicional acerca de la estructura del texto o su presentación.

by jjpeleato.com | #CW17 #HTML5SEO

Los lenguajes de marcas NO son lenguajes de programación.

No tienen funciones aritméticas o variables, como si poseen los lenguajes de programación.

by jjpeleato.com | #CW17 #HTML5SEO

Los lenguajes de marcas se llaman así por la práctica tradicional de marcar los manuscritos con instrucciones de impresión en los márgenes.

En la época de la imprenta, esta tarea ha correspondido a los marcadores, que indicaban el tipo de letra, el estilo y el tamaño, así como la corrección de errores, para que otras personas compusieran la tipografía.

by jjpeleato.com | #CW17 #HTML5SEO

Existen tres tipos de marcado:

Marcado de presentación: Aquel que indica el formato del texto. Útil para maquetar la presentación de un documento para solo lectura. En desuso.
Marcado de procedimientos: Aquel que está enfocado hacia la re/presentación del texto. El programa que representa el 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 como deben ser representados, o en qué orden. Ejemplo: XML, etc.

by jjpeleato.com | #CW17 #HTML5SEO

World Wide Web (WWW)

World Wide Web (WWW) o red informática mundial es un sistema de distribución de documentos de hipertexto o hipermedios interconectados vía internet.

by jjpeleato.com | #CW17 #HTML5SEO

La WWW se desarrolló en Ginebra en las instalaciones del CERN (Organización Europea para la Investigación Nuclear) entre marzo de 1989 y diciembre de 1990 por el inglés Tim Berners-Lee y el belga Robert Cailliau.

by jjpeleato.com | #CW17 #HTML5SEO

Es importante saber que web o www no son sinónimo de Internet, la web es un subconjunto de Internet que consiste en páginas a las que se puede acceder usando un navegador.

Internet es la red de redes donde reside toda la información. Tanto el correo electrónico, como FTPs, juegos, etc. son parte de Internet, pero no de la Web.

by jjpeleato.com | #CW17 #HTML5SEO

Tim Berners-Lee

Conocido como el padre de la Web es un científico de la computación que estableció la primera comunicación entre un cliente y un servidor usando el protocolo HTTP en noviembre de 1989.

by jjpeleato.com | #CW17 #HTML5SEO

Él y su grupo crearon lo que por sus siglas en inglés se denomina Lenguaje HTML (HyperText Markup Language), el protocolo HTTP (HyperText Transfer Protocol) y el sistema de localización de objetos en la web URL (Uniform Resource Locator).

by jjpeleato.com | #CW17 #HTML5SEO

En 1989, el CERN era el nodo de Internet más grande de Europa y Berners-Lee vio la oportunidad de unir Internet e hipertexto (HTTP y HTML), de lo que surgiría la World Wide Web.

by jjpeleato.com | #CW17 #HTML5SEO

La primera página web de Internet fue creada por Tim Berners-Lee en 1991 alojada en el primer servidor web del 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 el consorcio World Wide Web (W3C). Actualmente sigue siendo el presidente y director.

by jjpeleato.com | #CW17 #HTML5SEO

World Wide Web Consortium (W3C)

World Wide Web Consortium (W3C), es un consorcio internacional que generan y definen recomendaciones y estándares que aseguran el crecimiento de la World Wide Web.

https://www.w3.org/

http://www.w3c.es/

by jjpeleato.com | #CW17 #HTML5SEO

Estándares publicados por el W3C

CSS	DOM	HTML	XHTML
XML	SOAP	SVG	...

by jjpeleato.com | #CW17 #HTML5SEO

HTML

HTML, es un estándar que significa Lenguaje de Marcado para Hipertextos (HyperText Markup Language) es el elemento de construcción más básico de 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 jjpeleato.com | #CW17 #HTML5SEO

HTML determina el contenido de la página web, pero no su funcionalidad.

Otras tecnologías distintas de HTML son usadas generalmente para describir la apariencia/presentación de una página web (CSS) o su funcionalidad (JavaScript).

by jjpeleato.com | #CW17 #HTML5SEO

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 jjpeleato.com | #CW17 #HTML5SEO

HiperText se refiere a enlaces que conectan una pá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 la Web. Al subir contenido a Internet y vincularlo a páginas de otras personas, te haces participante activo de esta red mundial.

by jjpeleato.com | #CW17 #HTML5SEO

<!DOCTYPE html>
<html lang="es-ES">
    <head>
        <meta charset="utf-8">
        <title>HTML< /title>
    </head>
    <body>
        
    </body>
</html>

by jjpeleato.com | #CW17 #HTML5SEO

XHTML

XHTML (eXtensible HyperText Markup Language) es a XML como HTML es a SGML. Es decir, XHTML es un lenguaje de marcado que es similar al HTML, pero con una sintaxis más estricta y expresada como XML.

http://librosweb.es/libro/xhtml/

by jjpeleato.com | #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>
        
    </body>
</html>

by jjpeleato.com | #CW17 #HTML5SEO

HTML 5

HTML5 es la última versión de HTML. Quinta revisión del lenguaje básico de WWW donde establece una serie de elementos y atributos que reflejan el uso típico de los sitios web modernos.

by jjpeleato.com | #CW17 #HTML5SEO

Diseñado para ser utilizable por todos los desarrolladores de Open Web, los recursos sobre las tecnologías se clasifican en varios grupos según su función:

by jjpeleato.com | #CW17 #HTML5SEO

Semántica: Permite describir con mayor precisión cuál es su contenido.
Conectividad: Permite comunicarse con el servidor de formas nuevas e innovadoras.

by jjpeleato.com | #CW17 #HTML5SEO

Sin conexión y almacenamiento: Permite a las páginas web almacenar datos localmente en el lado del cliente y operar sin conexión de manera más eficiente.
Multimedia: Nos otorga un excelente soporte para utilizar contenido multimedia como lo son audio y video nativamente.

by jjpeleato.com | #CW17 #HTML5SEO

Gráficos y efectos 2D/3D: Proporciona una amplia gama de nuevas características que se ocupan de los gráficos en la web como lo son canvas 2D, WebGL, SVG, etc.
Rendimiento e Integración: Proporciona una mayor optimización de la velocidad y un mejor uso del hardware.

by jjpeleato.com | #CW17 #HTML5SEO

Acceso al dispositivo: Proporciona APIs para el uso de varios componentes internos de entrada y salida de nuestro dispositivo.
CSS3: Nos ofrece una nueva gran variedad de opciones para hacer diseños más sofisticados.

by jjpeleato.com | #CW17 #HTML5SEO

RECURSOS

https://www.w3.org/html/

https://www.w3.org/TR/html5/

https://www.w3.org/html/logo/

by jjpeleato.com | #CW17 #HTML5SEO

APRENDER

https://www.w3schools.com/html/

https://developer.mozilla.org/es

by jjpeleato.com | #CW17 #HTML5SEO

Elementos
HTML5

by jjpeleato.com | #CW17 #HTML5SEO

Elemento raíz

Elemento	Descripción
<!doctype html>	Define que el documento está bajo el estándar de HTML 5.
<html>	Representa la raíz de un documento HTML o XHTML. Todos los demás elementos deben ser descendientes de este elemento.

by jjpeleato.com | #CW17 #HTML5SEO

Metadatos del documento

Elemento	Descripción
<head>	Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo.
<title>	Define el título del documento, el cual se muestra en la barra de título del navegador o en las pestañas de página. Solamente puede contener texto y cualquier otra etiqueta contenida no será interpretada.

by jjpeleato.com | #CW17 #HTML5SEO

Elemento	Descripción
<base>	Define la URL base para las URLs relativas en la página. <base href="http://www.example.com/">
<link>	Usada para enlazar JavaScript y CSS externos con el documento HTML actual.

by jjpeleato.com | #CW17 #HTML5SEO

Elemento	Descripción
<meta>	Define los metadatos que no pueden ser definidos usando otro elemento HTML.
<style>	Etiqueta de estilo usada para escribir CSS en línea.

by jjpeleato.com | #CW17 #HTML5SEO

Scripting

Elemento	Descripción
<script>	Define ya sea un script interno o un enlace hacia un script externo. El lenguaje de programación es JavaScript
<noscript>	Define un contenido alternativo a mostrar cuando el navegador no soporta scripting.

by jjpeleato.com | #CW17 #HTML5SEO

Secciones

Elemento	Descripción
<body>	Representa el contenido principal de un documento HTML. Solo hay un elemento <body> en un documento.
<div>	Representa un contenedor genérico sin ningún significado especial.
<header>	Define la cabecera de una página o sección. Usualmente contiene un logotipo, el título del sitio Web y una tabla de navegación de contenidos.

by jjpeleato.com | #CW17 #HTML5SEO

Elemento	Descripción
<footer>	Define el pie de una página o sección. Usualmente contiene un mensaje de derechos de autoría, algunos enlaces a información legal o direcciones para dar información de retroalimentación.
<nav>	Define una sección que solamente contiene enlaces de navegación

by jjpeleato.com | #CW17 #HTML5SEO

Elemento	Descripción
<section>	Define una sección en un documento.
<article>	Define contenido autónomo que podría existir independientemente del resto del contenido.

by jjpeleato.com | #CW17 #HTML5SEO

Elemento	Descripción
<aside>	Define algunos contenidos vagamente relacionados con el resto del contenido de la página. Si es removido, el contenido restante seguirá teniendo sentido
<h1> - <h6>	Los elemento de cabecera implementan seis niveles de cabeceras de documentos; <h1> es la de mayor y <h6> es la de menor importancia. Un elemento de cabecera describe brevemente el tema de la sección que introduce.

by jjpeleato.com | #CW17 #HTML5SEO

Elemento	Descripción
<address>	Define una sección que contiene información de contacto.
<main>	Define el contenido principal o importante en el documento. Solamente existe un elemento <main> en el documento.

by jjpeleato.com | #CW17 #HTML5SEO

Semántica a nivel de Texto

Elemento	Descripción
<time>	Representa un valor de fecha y hora; el equivalente legible por máquina puede ser representado en el atributo datetime.

by jjpeleato.com | #CW17 #HTML5SEO

Contenido incrustado

Elemento	Descripción
<video>	Representa un video y sus archivos de audio con la interfaz necesaria para reproducirlos.
<audio>	Representa un sonido o stream de audio.

by jjpeleato.com | #CW17 #HTML5SEO

Elemento	Descripción
<source>	Permite a autores especificar recursos multimedia alternativos para los elementos multimedia como <video> o <audio>.
<embed>	Representa un punto de integración para una aplicación o contenido interactivo externo que por lo general no es HTML.

by jjpeleato.com | #CW17 #HTML5SEO

Elemento	Descripción
<canvas>	Representa un área de mapa de bits en el que se pueden utilizar scripts para renderizar gráficos como gráficas, gráficas de juegos o cualquier imagen visual al vuelo.
<svg>	Define una imagen vectorial embebida.
<math>	Define una fórmula matemática.

by jjpeleato.com | #CW17 #HTML5SEO

Formularios

Elemento	Descripción
<datalist>	Representa un conjunto de opciones predefinidas para otros controles.
<keygen>	Genera claves asimétricas utilizando varios algoritmos. Dos de los algoritmos predeterminados son: RSA y DSA

by jjpeleato.com | #CW17 #HTML5SEO

Elemento	Descripción
<output>	Representa el resultado de un cálculo.
<progress>	Representa el progreso de finalización de una tarea.

by jjpeleato.com | #CW17 #HTML5SEO

CASO PRÁCTICO

Ejemplos

by jjpeleato.com | #CW17 #HTML5SEO

VALIDADORES

by jjpeleato.com | #CW17 #HTML5SEO

Estándar HTML 5:
http://validator.w3.org/
SEO on Page:
https://metricspot.com/
https://www.wpdoctor.es/ (WordPress)
WPO:
Pagespeed Insights
Pingdom Tools
GTmetrix

by jjpeleato.com | #CW17 #HTML5SEO

¡FIN!

Simplemente, GRACIAS

by jjpeleato.com | #CW17 #HTML5SEO

TALLER #CW17 #HTML5SEO

HTML 5 para SEO

¡Hola y bienvenid@s!

¿Qué es HTML?

Lenguaje de marcas

World Wide Web (WWW)

Tim Berners-Lee

World Wide Web Consortium (W3C)

Estándares publicados por el W3C

HTML

XHTML

HTML 5

RECURSOS

APRENDER

ElementosHTML5

Elemento raíz

Metadatos del documento

Scripting

Secciones

Semántica a nivel de Texto

Contenido incrustado

Formularios

CASO PRÁCTICO

VALIDADORES

¡FIN!

Elementos
HTML5