Untitled

1. De donde viene HTML

1.1 Historia

En 1989 tim Berners-lee creo un

sistema que permitirá conectar documentos electrónicos, utilizando un lenguaje

que enlaza un documento con otro dándole algunas características de formato. a

estos textos.

HTML5 o una versión

anterior:

Aunque similares, cada versión de

HTML utiliza etiquetas diferentes, y ya que en sí mismo el HTML5 tiene objetos

más ambiciosos de los que pretendían cubrir versiones anteriores.

Comprendiendo las

etiquetas tags:

El código HTML consiste de un

archivo de texto delimitado por etiquetas o “tags” dentro de estas etiquetas se

coloca diversa información como, por ejemplo, que texto se deriva visualizar

entre otras muchas cosas.

JavaScript:

JavaScript es otro lenguaje de

programación que tiene una estrecha relación con HTML, y es demasiado extenso

como para dedicarle un libro completo.

Comprendiendo las hojas de estilo en cascada (css)

Es un lenguaje que no es propiamente parte de HTML en ninguna versión .

2. Preparándonos para HTML5

Eligiendo un navegador

El navegador siempre inserta un espacio

vertical después de cada párrafo de manera que si por ejemplo se colocan

párrafos consecutivos como a continuación habrá un espacio entre ambos.

Tipo de documento

La programación en general y por

ende HTML, no es la acepción en necesidad de orden. Usted puede lograr ser

enormemente creativo cuando ase contenido web.

Estructura básica de un documento HTML

Una vez que se escriba el código ay que guardar el documento con las extensiones .htm o .html.

Párrafos y saltos de

línea:

Titulo y Metadatos

<meta> Esta etiqueta tiene varios propósitos, puede colocar problemas claves que tengan relación con información que presentas sus documentos

Todos los elementos que efectivamente

se visualizara en el navegador estarán dentro del ámbito de </body>.

Cuando se emplea en párrafos en HTML ocupe la etiqueta con cierre <p> en

la que el texto del párrafo se encontrara eliminado por las dos partes de

etiqueta.

Detención de las

características de HTML5:

Todas las técnicas para detectar

la vialidad de HTML5 se basan en intentar un elemento y ver si efectivamente

sigue ahí.

HTML o XHTML

XHTML es solamente la versión XML de HTML, por lo que tiene, básicamente, las mismas funcionalidades.

Imagenes

Formatos de texto con Etiquetas

Listas

Tablas

La etiqueta sin cierre que permite insertar una imagen.

.src

.alt

.border

.height

.width

Cuando se escribe algo en un procesador de texto, en el cliente de correo, en el mensajero instantáneo o incluso en un papel

Esto es un punto se exploran las posibilidades de HTML con respecto al uso de listas, como son: Listas numeradas, conocidas también como listas ordenadas, Listas no numeradas llamadas también listas no ordenadas y las Listas de definición.

Las tablas en HTML son a las que más se recurren para organizar el contenido de una pagina en su totalidad o simplemente para organizar un contenido parcial.

4. Los nuevos elementos HTML5

Elementos semánticos el línea

Elementos estructurales

Nueva semántica

Elementos estructurales complementarios

Media

Esta categoría no existe de manera oficial en la especificación de HTML5

Se utilizan las etiquetas <div> <class>.

Lectores de pantalla

para débiles visuales utilizan las cabeceras (Headers).

Da sentido o

significado a algo en HTNL.

Etiquetas:

.address

.hgroup

.menu

Es la característica mas esperada de HTML5 y la mas divertida des del punto de vista de desarrollo y aun mas para el usuario

5. Controles nuevos en formularios HTML5

Elementos tipo input

Elementos independientes

Un vistaso a los controles nuevos

Nuevos atributos

Los nuevos elementos se clasifican básicamente en aquellos que pertenecen a la etiqueta <input>.

Aquellos que no dependen de esta para ser utilizado a estos últimos son a los que se pueden llamar independientes o referirlos solamente por su nombre individual.

Los formularios HTML utiliza constantemente al versátil elemento <input>.

No todos los navegadores soportan todos los tipos nuevos de controles para formulario con excepción de opera 11

La especificación HTML5 no solo llego con nuevos controles de formulario

.autofocus

.pattern

.placeholder

6. Primeros pasos con css

Posicionamiento

Manipular la apariencia de una pagina

Utilizar estilos a nivel de sitio (link)

Utilizar estilos a nivel local

Un vistazo a hojas de estilo o css (Cascading Style Sheets)

Utilizar estilos a nivel documento

Utilizar clases y el identificador (class e id)

Agrupación de elementos (span y div)

utilizan diversos trucos para lograr posicionar los elementos en el lugar correcto

Con las hojas de estilo se puede modificar color, modificar el formato de un texto .

Se colocan creando un archivo donde únicamente se coloquen las declaraciones de estilo de las paginas.

Podemos definir estilos en la sección de la etiqueta <head> de un documento dichos estilos se pueden aplicar a todas las paginas

Consiste en definir mediante cierta sintaxis

.Nivel local

.Nivel de pagina usando la cabecera

.Nivel de archivos externos

Podemos definir estilos en la sección de la etiqueta <head> de un documento.

Se han visto ejemplos donde se añade un estilo a algunas etiquetas en particular o el fueron asignados estilos a la etiqueta <p>

Las etiquetas <span> y <div> se usan para agrupar otros elementos y así ayudar a estructurar un documento

7. Nuevo y mejorado css3

Texto y fuentes descargables

Gradientes

Nuevos notaciones para color

Motores de renderizado y css3

Bordes

Transformaciones

Herramientas de selección

css3 en su nueva especificación trae ayuda a las situaciones donde se requiere algún efecto sobre texto e incluso cuando es necesario de las fuentes web seguras.

Consiste en una secuencia de al menos dos colore como por ejemplo

imagina una ivajen que va de un azul muy claro a un azul oscuro.

Ahora css3 ofrece nuevas notaciones que no solo permiten hacer lo mismo que ya hacían las anteriores.

Los fabricantes de navegadores no suelen construir estos completamente desde cero hoy en día un que algunos lo hacen en el pasado por lo que se auxilian de motores de renderizado.

css3 mojora esta posibilidad y ahora permite brindar características como lo que son los bordes.

La transformación es una herramienta fuerte e interesante para el desarrollador la posibilidad de animar los mismos efectos.

En css3 es evidente que uno de los aspectos más poderosos y utilizado es la capacidad de selección de grupos de elementos usando el nombre de una clase el tipo de etiqueta o individualmente con un identificador.

Transparencia

Es algo que se puede controlar en css3 con el uso de la propiedad opacity.

8. Novedades en JavaSript

Web workers

Geolocalización

Almacenamiento de sesión y local

Nuevas herramientas de selección

Web offline

WebSocket

Proceso asignado ala CPU tiene que esperar su turno para hacer todo lo que tiene que ver con el.

Es importante tener en mente esta ultima situación. por que mientras que algunos dispositivos móviles cuentan con GPS que permiten una localización por un triangulo de atención.

HTML5 proporciona algo nuevo para cubrir estos problemas.

Cuando se programa en JavaScript en documento HTML constantemente se utilizan los métodos getElemetById() Y getElementByTagName.

Estas son las causas que hacen que una pagina web pueda mantener el funcionamiento offline algo atractivo deseable.

El uso de socket de manera nativa es una caracteristica que sin dudad implica uno de los avances técnicos mas dramáticos en lo que se refiere al desarrollo web por parte de HTML5.

3. Mas bases HTML

HTML5

9. Utilizar Canvas

Utilizar imágenes

Dibujando caminos (paths)

Dibujando textos

Primeros pasos con Canvas

Animaciones

Con la etiqueta Canvas las imágenes adquieren un nuevo dinamismo integrándose a las capacidades de dibujo.

Cuando trabajamos con canvas existen diversas funciones que pueden servir para dibujar siluetas como a usted convenga, estas se utilizan para realizar figuras mas complejas.

La etiqueta <canvas> y el API que las soporta tiene métodos y propiedades para despegar texto en cualquier punto del lienzo.

Con la etiqueta <canvas> podemos elaborar gráficos y comportamientos mucho mas interesantes y divertidos.

A diferencia de HTML5 Flash fue concebido desde el principio como una herramienta para crear animaciones.