Download HTML 5 - SlideBoom

Maristela Pérez Correa
Elida Rosa Silva Ortega
Especialización en Ingeniería de
Software
HTML 5 no es simplemente una nueva versión del
lenguaje de marcación HTML, sino una agrupación
de diversas especificaciones concernientes a el
desarrollo web. Es decir, HTML 5 no se limita sólo a
crear nuevas etiquetas, atributos y eliminar
aquellas marcas que están en desuso o se utilizan
inadecuadamente, sino que va mucho más allá.
Así pues, HTML 5 es una nueva versión de diversas
especificaciones, entre las que se encuentran:
HTML 4
XHTML 1
HTML5 es la nueva versión del lenguaje HTML ,en los últimos
meses se ha hablado mucho de ella , se dicen que este
lenguaje cambiará la manera en la que se concibe el Internet
y el diseño de páginas Web , porque facilitara las cosas para
el diseño de páginas Web, programadores y demás gente
involucrada con el desarrollo de Internet así como a los
usuarios que no tienen que ver con este mundo
HTML 5 está formado por muchos módulos distintos, cuyo
grado de especificación está en niveles dispares. Por tanto,
muchas de las características de HTML 5 están ya listas para
ser implementadas, en un punto de desarrollo que se
encuentra cercano al que finalmente será presentado. Otras
muchas características están todavía simplemente en el
tintero, a modo de ideas o borradores iníciales.
De hecho, las versiones más nuevas de casi todos los navegadores,
incluido el polémico Internet Explorer 8, implementan algunas de las
características de HTML 5. Claro que, para que una web se vea bien
en todos los sistemas, hay que utilizar sólo aquellas partes que
funcionan en todos los navegadores, por lo que a día de hoy, pocas
son las utilidades realmente disponibles del lenguaje, si queremos
hacer un sitio web compatible. No obstante, en el peor de los casos,
podemos empezar a usar a nivel experimental estas características,
aunque sólo sea para frotarnos las manos en espera de incorporarlas
realmente en nuestras prácticas de desarrollo habituales.
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.
Versiones de HTML5 (HTML 5 y XHTML 5)
XHTML 5 es la socialización XML del HTML 5
En las versiones anteriores a esta nueva versión sólo se podía
insertar una imagen en el código, pero no se podía interactuar con
ella o modificarla directamente. HTML5 permite que los
diseñadores de páginas web "rendericen" las imágenes, con lo cual
se pueden crear imágenes dinámicas (con las que el usuario puede
interactuar) sin editarlas anteriormente a la introducción de estas
en la página.
Por ejemplo, antes de HTML5 para hacer el diseño de una página
web en HTML e incluir una presentación de diapositivas donde el
usuario pudiera ir, regresar y hacer click en enlaces para dirigirse
a otra página web, se tenía que usar una aplicación externa como
Adobe Flash. Ahora se puede hacer directamente en el código.
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.
Entre los
encuentra
(versiones
(versiones
navegadores de los que obtener información se
Internet Explorer (versiones 6, 7, 8, 9), Firefox
2, 3, 3.5, 3.6, 4), Safari (versiones 3.1, 3.1, 4) Chrome
1, 2, 3, 4) y Opera (versiones 9.0, 9.6, 10)
En el lado de Flash
Flash tiene dos graves problemas: uno técnico y otro de imagen.
Como se muestra en el estudio comparativo de Streaming Learning
Center, realizado a raíz de las recientes declaraciones de Steve
Jobs en las que acusaba al producto de Adobe de arrasar el
rendimiento de los procesadores, no siempre HTML 5 gana a Flash a
la hora de emitir vídeo en stream por internet.
Según el autor del estudio, Jan Ozer, "no es cierto concluir que
Flash es ineficiente por si mismo", añadiendo que "Flash es
eficiente en las plataformas en las que se le permite acceder a
aceleración por hardware y menos eficiente donde no puede
acceder a esa aceleración. Con Flash Player 10.1, Adobe tiene la
oportunidad de realizar un salto cualitativo importante en
reproducción de vídeo en las plataformas en las que se le permita
realizar aceleración por hardware".
En los contenidos interactivos, en este momento, Flash no tiene
"quien le tosa". Es una plataforma ampliamente distribuida y con
una poderosa base de desarrolladores. Pero a la hora de distribuir
vídeo, la nueva corona en la que todos (Microsoft con SIlverlight,
Adobe con Flash y HTML 5) intentan posar en su cabeza, la cosa
cambia.
En el lado de HTML 5
Mucho se esta hablando también de como esta ultima versión de
HTML hará desaparecer Flash y otras tecnologías similares. De
nuevo, hay que poner las cosas en contexto.
Adobe, como Google, como Apple, como muchas otras empresas son
miembros del grupo de trabajo que define lo que será HTML 5.
"Será", porque a día de hoy hay muy poco definitivo y mucho en el
aire. Las previsiones mas optimistas hablan de unos 6-8 años hasta
que este completamente definido y ratificado.
Actualmente no hay un claro ganador en eficiencia a la hora de distribuir
vídeo entre HTML5 y Flash y todo depende de cómo estén
implementados ambos en los diferentes navegadores y plataformas de
software..
En la reproducción de vídeo, el nuevo reproductor de Adobe mejora su
rendimiento, pero a pesar de ello, sigue estando por detrás de HTML 5
aunque solo en Safari y para Mac, ya que Apple no ha incluido soporte
HTML 5 en la versión para Windows de su navegador
HTML 5 incluye novedades significativas en diversos ámbitos. Como
decíamos, no sólo se trata de incorporar nuevas etiquetas o
eliminar otras, sino que supone mejoras en áreas que hasta ahora
quedaban fuera del lenguaje y para las que se necesitaba utilizar
otras tecnologías.
Estructura del cuerpo: La mayoría de las webs tienen un formato
común, formado por elementos como cabecera, pie, navegadores,
etc.
HTML 5 permite agrupar todas estas partes de una web en
nuevas etiquetas que representarán cada uno de las partes
típicas de una página.
Etiquetas para contenido específico: Hasta ahora se utilizaba una
única etiqueta para incorporar diversos tipos de contenido
enriquecido, como animaciones Flash o vídeo. Ahora se utilizarán
etiquetas específicas para cada tipo de contenido en particular,
como audio, vídeo, etc.
Canvas: es un nuevo componente que permitirá dibujar, por medio
de las funciones de un API, en la página todo tipo de formas, que
podrán estar animadas y responder a interacción del usuario. Es
algo así como las posibilidades que nos ofrece Flash, pero dentro
de la especificación del HTML y sin la necesidad de tener instalado
ningún plugin. Puedes conocer más sobre este nuevo elemento en
el manual de canvas que estamos creando en DesarrolloWeb.com
Bases de datos locales: el navegador permitirá el uso de una base
de datos local, con la que se podrá trabajar en una página web por
medio del cliente y a través de un API. Es algo así como las Cookies,
pero pensadas para almacenar grandes cantidades de información,
lo que permitirá la creación de aplicaciones web que funcionen sin
necesidad de estar conectados a Internet.
Web Workers: son procesos que requieren bastante tiempo de
procesamiento por parte del navegador, pero que se podrán realizar
en un segundo plano, para que el usuario no tenga que esperar que
se terminen para empezar a usar la página. Para ello se dispondrá
también de un API para el trabajo con los Web Workers.
Aplicaciones web Offline: Existirá otro API para el trabajo con
aplicaciones web, que se podrán desarrollar de modo que
funcionen también en local y sin estar conectados a Internet.
Geolocalización: Las páginas web
geográficamente por medio de un
Geolocalización.
se
API
podrán localizar
que permita la
Nuevas APIs para interfaz de usuario: temas tan utilizados como
el "drag & drop" (arrastrar y soltar) en las interfaces de usuario de
los programas convencionales, serán incorporadas al HTML 5 por
medio de un API.
Fin de las etiquetas de presentación: todas las etiquetas que
tienen que ver con la presentación del documento, es decir, que
modifican estilos de la página, serán eliminadas. La
responsabilidad de definir el aspecto de una web correrá a cargo
únicamente de CSS.
section representa una sección “general” dentro de un documento o
aplicación, como un capítulo de un libro. Puede contener subsecciones y
si lo acompañamos de h1-h6 podemos estructurar mejor toda la página.
article representa un contenido independiente en un documento, el caso
más claro son las entradas de un blog o las noticias de un periódico
online. Así, dentro de la portada podremos tener varios artículos
demarcados semánticamente, por lo que una herramienta puede
extraerlos fácilmente.
aside representa un contenido que está muy poco relacionado con el
resto de la página, como una barra lateral. Esencial para delimitar el
contenido “importante” del contenido “de apoyo”, haciendo más caso al
primero que al segundo.
header representa la cabecera de una sección, y es de suponer que se le
dé más importancia que al resto, sobre todo si la sección es un artículo.
footer representa el pié de una sección, con información acerca de la
página/sección que poco tiene que ver con el contenido de la página,
como el autor, el copyright o el año.
nav representa una sección dedicada a la navegación entre el
sitio, como la típica barra superior de los periódicos.
Otros elementos importantes
audio y video sirven para incrustar un contenido multimedia de
sonido o de vídeo, respectivamente. Sin duda uno de los añadidos
más interesantes, ya que permite reproducir/controlar vídeos y
audios sin necesidad de plugins como el de Flash. Se tratan de
manera totalmente nativa como cualquier otro elemento, por
ejemplo se pueden incluir enlaces o imágenes dentro de un vídeo.
Aunque las implementaciones actuales son un tanto ineficientes,
se espera que en un futuro próximo se optimicen.
embed sirve para contenido incrustado pero no nativo, sino
ejecutado por plugins como el de Flash. Aunque embed está
soportado por casi todos los navegadores desde hace tiempo, es
ahora cuando entra parte del estándar y evita el infierno/pelea
entre object y embed.
canvas es un elemento complejo que permite generar gráficos,
dibujando elementos dentro de él. Aunque nunca hayas oído hablar
de él, seguro que lo has usado alguna vez, por ejemplo de Google
Maps. Es un elemento muy potente que dará bastante que hablar
en el futuro, y que será el culpable de aplicaciones web
espectaculares.
Más elementos
dialog se plantea para escribir conversaciones, por ejemplo para
transcripciones de chat.
figure se plantea para asociar un contenido multimedia (una foto,
un vídeo, etc.) a un título o leyenda.
mark representa un texto resaltado, por ejemplo para resaltar una
búsqueda.
meter representa una medida, como el número de KB. Tiene más
sentido si lo unimos con…
progress representa el estado de una tarea, y se puede usar por
ejemplo al subir un documento o al realizar varias tareas pesadas.
Esto permitirá barras de tareas personalizadas y potentes.
time representa una fecha o una hora.
command representa un comando que el usuario puede ejecutar en
su navegador.
output representa una salida de un programa, probablemente
ejecutado directamente en el navegador, como una calculadora.
datagrid representa datos de manera interactiva y permite trabajar
dinámicamente con información y cambiar la página respecto a esa
información. Será útil sobre todo si se quiere trabajar con
aplicaciones que necesiten de bastantes datos a la vez en el lado del
cliente.
Para que una página web pudiera mostrar al usuario un video,
este tenía que instalar un programa en su computadora, es
decir, para ver un video se tenía que tener un programa como
Adobe Flash Player o Microsoft Silverlight. HTML5 pretende que
esto quede en el pasado y que para ver video solo se necesite
tener un navegador que soporte HTML 5, sin instalar ninguna
otra cosa
La computación en nube nos permite usar programas que no tienen
que estar instalados en la computadora para utilizarlos. Hay
aplicaciones que funcionan desde Internet para editar textos como
se podría hacer con Word, para editar imágenes como en
Photoshop y otras posibilidades. El problema de esto es que si no se
dispone de una conexión a Internet entonces no se puede trabajar;
con HTML5 se podrá guardar la aplicación para trabajar off-line
Muchos sitios web, por la información que manejan, pueden
tardar mucho tiempo en cargarse. HTML5 permite la aparición
de elementos en segundo plano, es decir, los elementos más
importantes o los que menos tardan en cargarse se pueden
presentar al usuario con sus características completas en primer
plano, mientras los otros se dejan en segundo término para irse
cargando mientras el usuario ya puede leer o interactuar con los
más importantes.
Los motores de búsqueda en Internet pretenden darle al usuario los
resultados más relevantes para cada búsqueda específica, una de
las maneras que han estado implementando para lograrlo son las
búsquedas que toman en cuenta el contexto o búsquedas
semánticas, en donde el buscador le da relevancia a la información
personal del usuario como el país donde se encuentra, idioma,
páginas que visita regularmente, gustos e intereses, etc.
De esta manera puede elegir las páginas que más se adecuen a un
usuario en específico en los resultados de búsqueda, HTML5 incluye
elementos que permiten dar información de la página web a los
buscadores para que estos la comparen con la de los usuarios y así
se puedan obtener resultados más relevantes.
http://www.youtube.com/watch?v=ZnHC7yF5XXw&feature=related
http://www.youtube.com/watch?v=K_RBY23OxBM&feature=related
http://www.youtube.com/watch?v=W4FbF8GKChk&feature=playe
r_embedded
http://geeksroom.com/2010/06/16/2-demostraciones-mas-dehtml5/
http://geeksroom.com/2010/05/02/66-aplicaciones-y-juegos-enhtml5/
http://htmlfive.appspot.com/