HTML5

Trabajo Práctico

de

Seminario V

Tema: HTML5

Integrantes:

 Amalia Morel

 Deisy Samudio

 Viviana Acosta

Carrera: Ingeniería de Sistemas

Semestre: 8vo

Profesor: José Eduardo Rojas Coppari

Año: 2013

Introducción

Entender HTML5 es entender que hoy nos conectamos desde teléfonos móviles, tabletas, eBooks, netbooks, computadores y otra gama de dispositivos. Es entender que se acabaron los webmasters y hoy hablamos de equipos multidisciplinarios de empresas de tecnología que cuentan con frontends, backends, sysadmins, mobile devs, comunity managers y arquitectos de información en los proyectos que están reinventando mercados y generando tráfico e ingresos.

Podemos hablar de todas las empresas gigantes de la web, podemos enumerar a Microsoft, Google, Apple, Adobe, Facebook, Yahoo, Mozilla y miles de proyectos tecnológicos que independientemente de sus objetivos hoy respiran HTML5, lo apoyan y tienen propuestas que los hacen competir en código en el navegador más cercano a tu pantalla. Es una de sus más importantes estrategias de posicionamiento y es una de sus más fuertes apuestas de reclutamiento. A continuación el contenido de este trabajo va enriquecer nuestros conocimientos acerca de HTML5 y vamos a percibir como afecta en nuestra vida actual.

¿Qué es HTML5?

HTML5 es una combinación de nuevas etiquetas de markup (lenguaje) HTML, propiedades CSS3, JavaScript y algunas tecnologías complementarias de apoyo, pero que técnicamente son independientes de la propia especificación HTML5. Por ello vamos a distinguir entre la especificación HTML5 en sí y la familia HTML5. Podemos definir la especificación HTML5 como nuevos elementos de markup o sintaxis, utilizados por los diseñadores para crear páginas web junto con las etiquetas utilizadas los día de hoy. Muchos de estos nuevos elementos ya son conocidos para los diseñadores que trabajan con las etiquetas HTML tradicionales, como <p>, <ul> o <div>. Estas nuevas etiquetas suponen para desarrolladores y diseñadores, unas herramientas más avanzadas y se traducen en mejores experiencias para el usuario final.

La familia HTML5 incluye las nuevas etiquetas y tecnologías como CSS3, Geo localización, Almacenamiento Web (Web Storage), Web Workers y Web Sockets entre otras. Todas ellas suponen una actualización de gran potencia al conjunto de herramientas ya existente, y con ellas se pueden crear páginas web más sofisticadas y útiles. Los nuevos navegadores incorporan funcionalidades para responder a las expectativas de los consumidores y también como fruto de la evolución natural de la propia tecnología. A medida que las aplicaciones web van ganando en capacidad de respuesta y velocidad y son capaces de resolver tareas complejas como la edición de imágenes, representación de mapas, hojas de cálculo o vídeos, los usuarios ya exigen este mismo nivel de rendimiento en todas las aplicaciones de la web. Existen limitaciones con las capacidades de los lenguajes de programación actuales y no todas las funcionalidades se pueden implementar e incorporar de manera sencilla. HTML5 aporta nuevas funcionalidades y herramientas con el fin de conseguir que los sitios web sean más interesantes, atractivos y útiles.

¿Para qué se utiliza HTML5?

HTML5 es una colección de estándares para el diseño y desarrollo de páginas web. Esta colección representa la manera en que se presenta la información en el explorador de internet y la manera de interactuar con ella. HTML5 está siendo desarrollado por Ian Hickson de Google Inc. y David Hyatt de Apple Inc. junto con todas las personas que participan en Web Hypertext Application Technology Working Group.

• Describir estructura y contenido.

• Complementar el texto con Objetos.

• Se escribe en forma de "etiquetas".

• Rodeada por corchetes angulares < >.

HTML5 nos permite una mayor interacción entre nuestras páginas web y contenido media (video, audio, entre otros) así como una mayor facilidad a la hora de codificar nuestro diseño básico. Esta nueva versión se basó en el diseño más común de las páginas web alrededor del mundo para llegar a un estándar de etiquetas que realicen las mismas tareas de manera más rápida y eficiente, he aquí algunos ejemplos:

•Un nuevo diseño para páginas web, reflejado en las etiquetas<header>, <footer>, <nav>, <section>,<article> las cuales están destinadas a remplazar la necesidad de tener una <div> para cada parte de la página, y en cambio, tener etiquetas específicas para ello.

•La nueva etiqueta <video> para insertar un reproductor de video, mejorando el reproductor antiguo utilizado por la etiqueta <embed> y evitándonos la pena de insertar el código de <object>, así como eliminar la necesidad del Flash Player para reproducir videos (lo que nos lleva a un ahorro en la cantidad de memoria utilizada).

• Una nueva tag <audio> para insertar audio en nuestro sitio web, remplazando la vieja etiqueta <embed> con las mismas cualidades de la etiqueta anterior.

•Una etiqueta <canvas> para manejo de gráficos en internet, sea para dibujar vectores o hacer animaciones.

Características

A continuación os dejo los que me parecieron más interesantes:

1.Nuevo DOCTYPE

Hasta ahora en el inicio de la página se venía poniendo el doctype un lioso trozo de código que aunque no eran más que dos líneas eran imposible de aprender

2.No más TYPE para scripts y links

Parece que también desaparecen los Type en los scripts y en los links

3.No más comillas ni cerrar elementos

A partir de ahora ya no es necesario poner las comillas en los atributos, y aunque sea una buena práctica hacerlo, ni siquiera será necesario cerrar los elementos

4.<figure>, nuevo elemento de Html5

Con <figure> podemos ordenar semánticamente mejor una imagen a un pie de imagen uniendo ambos elementos dentro de uno mismo <figure>

5.Text Inputs para email

De esta forma contaremos con un nuevo tipo de campo de texto que solo admirirá direcciones de correo válidas:

6.Los nuevos atributos "required" y "autofocus"

Muy útil para que algunos campos de un formulario sean obligatorios de ser rellenados antes de enviar el formulario

Por otro lado el atributo

...