HTML5HTML5 (HyperText Markup Language, versin 5) es la quinta
revisin importante del lenguaje bsico de la World Wide Web, HTML.
HTML5 especifica dos variantes de sintaxis para HTML: un clsico
HTML (text/html), la variante conocida como HTML5 y una variante
XHTML conocida como sintaxis XHTML5 que deber ser servida como
XML). Esta es la primera vez que HTML y XHTML se han desarrollado
en paralelo.Todava se encuentra en modo experimental, lo cual
indica la misma W3C; aunque ya es usado por mltiples
desarrolladores web por sus avances, mejoras y ventajas.Al no ser
reconocido en viejas versiones de navegadores por sus nuevas
etiquetas, se le recomienda al usuario comn actualizar a la versin
ms nueva, para poder disfrutar de todo el potencial que provee
HTML5.El desarrollo de este lenguaje de marcado es regulado por el
Consorcio W3C.NUEVAS ETIQUEAS DE HTML5El lenguaje HTML funciona a
travs de marcas de sentido llamadas etiquetas. Las etiquetas son la
herramienta fundamental para que los navegadores puedan interpretar
el cdigo y permitirnos ver imgenes, texto, prrafo, y estructuras.
Los navegadores vendran a ser como traductores de las etiquetas, y
con HTML5, se agregan nuevas etiquetas para utilizar que nos
ahorran el uso de otros productos que se usaban para complementar y
hacer cosas que con el simple HTML no se podan hacer. HTML5 fue
creado para hacer que el proceso de escribir el cdigo sea ms simple
y ms lgico, por decirlo de una forma. La sintaxis de HTML5 se
destaca, como dijimos, en el mbito multimedia, pero son bastantes
las etiquetas introducidas para generar una mejora.La idea detrs de
HTML5 es que podamos visualizar el contenido multimedia variado que
podemos encontrar en internet an cuando nos encontramos en
dispositivos de gama baja que no podran soportarlo cuando tienen
que instalar infinidad de plug-ins. No solamente contamos con
etiquetas especiales como audio, video y canvas, sino tambin
integracin con contenidos de grficos en vectores (que anteriormente
se conoca como la etiqueta object. Con estas etiquetas, los
usuarios pueden consumir videos y canciones, por ejemplo, sin
necesidad de instalar nada de forma adicional.Las ms importantes de
las nuevas etiquetas creadas son: article: esta etiqueta sirve para
definir un artculo, un comentario de usuario o una publicacin
independiente dentro del sitio. header, footer: estas etiquetas
individuales ahorran tener que insertar IDs para cada uno, como se
sola hacer anteriormente. Adems, se pueden insertar headers y
footers para cada seccin, en lugar de tener que hacerlo nicamente
en general. nav: la negacin puede ser insertada directamente en el
markup, entre estas etiquetas, que nos permitirn hacer que nuestras
listas oficien de navegacin. section: con esta etiqueta, una de las
ms importantes de las novedades, se puede definir todo tipo de
secciones dentro de un documento. Por ponerlo de forma sencilla,
funciona de una forma similar a la etiqueta div que nos separa
tambin diferentes secciones. audio y video: estas son las dos ms
importantes etiquetas de HTML5, dado que nos permiten acceder de
forma ms simple a contenido multimedia que puede ser reproducido
por casi todo tipo de dispositivos; marcan el tipo de contenido que
estar en su interior. embed: con esta etiqueta se puede marcar la
presencia de un contenido interactivo o aplicacin externa. canvas:
finalmente, esta etiqueta nos permite introducir un lienzo dentro
de un documento, para poder dibujar grficos por vectores; ser
necesario el uso de JavaScript.El funcionamiento del DOCTYPE tambin
se renueva, siendo mucho ms simple de usar y menos engorroso. No
vamos a explayarnos demasiado en este sentido, dado que, como
dijimos, nos estamos orientando a principiantes y curioso, pero con
HTML5 vamos a poder escribir mucho menos.NUEVAS CARACTERSTICAS DE
HTML5 Incorpora etiquetas (canvas 2D y 3D, audio, video) con codecs
para mostrar los contenidos multimedia. Actualmente hay una lucha
entre imponer codecs libres (WebM + VP8) o privados (H.264/MPEG-4
AVC). Etiquetas para manejar grandes conjuntos de datos: Datagrid,
Details, Menu y Command. Permiten generar tablas dinmicas que
pueden filtrar, ordenar y ocultar contenido en cliente. Mejoras en
los formularios. Nuevos tipos de datos (eMail, number, url,
datetime ) y facilidades para validar el contenido sin Javascript.
Visores: MathML (frmulas matemticas) y SVG (grficos vectoriales).
En general se deja abierto a poder interpretar otros lenguajes XML.
Drag & Drop. Nueva funcionalidad para arrastrar objetos como
imgenes Aade etiquetas para manejar la Web Semntica (Web 3.0):
header, footer, article, nav, time (fecha del contenido), link rel=
(tipo de contenido que se enlaza). Estas etiquetas permiten
describir cual es el significado del contenido. Por ejemplo su
importancia, su finalidad y las relaciones que existen. No tienen
especial impacto en la visualizacin, se orientan a buscadores. Los
buscadores podrn indexar e interpretar esta meta informacin para no
buscar simplemente apariciones de palabras en el texto de la pgina.
Permite incorporar a las pginas ficheros RDF / OWL (con meta
informacin) para describir relaciones entre los trminos utilizados.
adems de ofrecer versatilidad en el manejo y animacin de objetos
simples, imgenes etc
DIFERENCIAS ENTRE HTML 4 Y HTML 5
RESULTADOS E INTEGRACIN WEB WORKERSPermite delegar la evaluacin
JavaScript para subprocesos en segundo plano, lo que evita que
estas actividades ralenticen eventos interactivos. XMLHttpRequest
Nivel 2Permite buscar de forma asncrona algunas partes de la pgina,
mostrando contenido dinmico, que vara segn el tiempo y las acciones
del usuario. Esta es la tecnologa detrs de Ajax. Motores JIT
compilacin tarde JavaScriptLa nueva generacin de motores de
JavaScript son mucho ms poderosos, lo que lleva a un mayor
rendimiento. Historia APIPermite la manipulacin del historial del
navegador. Esto es especialmente til para la carga interactivamente
nueva informacion en las pginas. El atributo contentEditable:
transformar su sitio web en una wikiHTML5 ha estandarizado el
atributo contentEditable Arrartrar y soltarLa API de arrastrar y
soltar (drag and drop) permite soporte para arrastrar y soltar
elementos dentro y entre sitios web. Esto tambin proporciona una
API simple para el uso de extensiones y aplicaciones basadas en
Mozilla. Gestin del foco en HTMLLos nuevos atributos HTML5
activeElement y hasFocus son soportados. Manejadores de protocolo
basados en webAhora puede registrar las aplicaciones web como
controladores de protocolo utilizando el metodo
navigator.registerProtocolHandler(). requestAnimationFramePermite
controlar la renderizacion de animaciones para obtener un ptimo
rendimiento. Fullscreen APIControla el uso de la pantalla completa
de una pgina Web o aplicacin, sin la interfaz de usuario del
explorador mostrada. API Pointer LockPermite bloquear el puntero al
contenido, por lo que los juegos y aplicaciones similares no
pierden el foco cuando el puntero alcanza el lmite de la ventana.
Eventos en lnea y fuera de lneaPara construir una buena aplicacin
web offline-funcional, lo que necesita saber cuando su aplicacin es
realmente fuera de lnea. Dicho sea de paso, tambin es necesario
saber cuando su solicitud sea devuelta a un estado de conexin de
nuevo.
DESCONECTADO Y ALMACENAMIENTO Recursos sin conexin: el cach de
la aplicacinFirefox es totalmente compatible con la especificacin
de recursos fuera de lnea de HTML5. La mayora de los otros recursos
fuera de linea tienen soporte en un cierto nivel. Eventos en lnea y
fuera de lneaFirefox 3 soporta WHATWG eventos en lnea y fuera de
lnea, que permiten a las aplicaciones y extensiones detectar si hay
o no una conexin a Internet, as como tambien, detectar cuando hay
conexin o no. WHATWG sesin del lado cliente y el almacenamiento
continuo (Almacenamiento DOM)Sesin del lado del cliente y el
almacenamiento continuo permite a las aplicaciones web almacenar
datos estructurados en el lado del cliente. IndexedDBEs un estndar
de Internet para el almacenamiento de grandes cantidades de datos
estructurados en el navegador y para las bsquedas de alto
rendimiento de estos datos mediante ndices. Uso de archivos desde
aplicaciones webSoporte para la nueva API de archivos de HTML5 ha
sido aadido a Gecko, por lo que es posible que las aplicaciones de
Internet accedan a los archivos locales seleccionados por el
usuario. Esto incluye el apoyo para la seleccin de varios archivos
utilizando el de tipo file del elemento HTML mltiples atributos.
Tambin esta FileReader.ACCESO AL DISPOSITIVO Usando la API de la
cmaraPermite utilizar, manipular y almacenar una imagen de la cmara
del ordenador.Eventos tctilesManipuladores para reaccionar a los
eventos creados por un usuario cuando pulsa pantallas tctiles. El
uso de geolocalizacinPermite a los navegadores localizar la posicin
del usuario mediante geolocalizacin. Deteccin de la orientacin del
dispositivoObtiene la informacin cuando el dispositivo, en el que
se ejecuta el navegador, cambia de orientacin. Esto puede ser
utilizado como un dispositivo de entrada (por ejemplo, para hacer
que los juegos que reaccionan a la posicin del dispositivo) o
adaptar el diseo de una pgina a la orientacin de la pantalla
(vertical u horizontal). API Pointer LockPermite bloquear el
puntero al contenido, por lo que los juegos y aplicaciones
similares no pierden el foco cuando el puntero alcanza el lmite de
la ventana.CSS3 STYLINGCSS se ha ampliado para ser capaz de
elementos de estilo de una manera mucho ms compleja. Esto se
refiere a menudo como CSS3, aunque CSS no es una especificacin
monoltica ms y los diferentes mdulos no estn todos en el nivel 3:
algunos estn en el nivel 1 y un poco en el nivel 4, con todos los
niveles intermedios cubiertos. Nuevas caractersticas de diseo de
fondoAhora es posible poner una sombra a un cuadro, con box-shadow
y varios fondos se pueden ajustar. Bordes mas "lujosos"Ahora no slo
es posible utilizar las imagenes con los estilos de bordes,
utilizando border-image y asociando sus propiedades asociadas a
longhand, aunque los bordes redondeados son apoyados a travs de
propiedades border-radius . Animacin de su estiloUtilizando
Transiciones CSS para animar entre los diferentes estados o
utilizando animaciones CSS para animar partes de la pgina, sin que
evento trigerring, ahora puede controlar los elementos mviles en su
pgina. Tipografa mejoradaLos autores tienen un mejor control para
llegar mejor a la tipografa. Se puede controlar el texto de
desbordamiento y guiones , pero tambin puede una sombra de ella o
controlar con mayor precisin sus decoraciones . Tipos de letra
personalizados se pueden descargar y aplicar gracias a la nueva
regla @font-face . Nuevos diseos de presentacinCon el fin de
mejorar la flexibilidad de los diseos, se han aadido dos nuevos
diseos: el CSS diseo de varias columnas , y el cuadro de
distribucin flexible de CSS
JQUERY.jQuery es una biblioteca de JavaScript, creada
inicialmente por John Resig, que permite simplificar la manera de
interactuar con los documentos HTML, manipular el rbol DOM, manejar
eventos, desarrollar animaciones y agregar interaccin con la tcnica
AJAX a pginas web. Fue presentada el 14 de enero de 2006 en el
BarCamp NYC. jQuery es la biblioteca de JavaScript ms
utilizada.jQuery es software libre y de cdigo abierto, posee un
doble licenciamiento bajo la Licencia MIT y la Licencia Pblica
General de GNU v2, permitiendo su uso en proyectos libres y
privativos. jQuery, al igual que otras bibliotecas, ofrece una
serie de funcionalidades basadas en JavaScript que de otra manera
requeriran de mucho ms cdigo, es decir, con las funciones propias
de esta biblioteca se logran grandes resultados en menos tiempo y
espacio.jQuery consiste en un nico fichero JavaScript que contiene
las funcionalidades comunes de DOM, eventos, efectos y AJAX.La
caracterstica principal de la biblioteca es que permite cambiar el
contenido de una pgina web sin necesidad de recargarla, mediante la
manipulacin del rbol DOM y peticiones AJAX. Para ello utiliza las
funciones $() o jQuery().jQuery es lo que se conoce como una
librera JavaScript, pero no es del tipo de libreras que est llena
con filas y filas de libros. Es un archivo relativamente pequeo
(84kb sin comprimir) que contiene docenas de funciones (mtodos) de
JavaScript diseadas para simplificar el trabajo con JavaScript.
Simplemente ligas tu pgina web al archivo y usas los mtodos de
jQuery para agregar interactividad a tu sitio web.JavaScript es un
lenguaje muy potente, pero hay dos obstculos importantes para su
uso:1. JavaScript fe desarrollado originalmente por Netscape, el
archirrival de Internet Explorer durante la guerra de los
navegadores en los 90s. Aunque Internet Explorer adopto rpidamente
el lenguaje (su versin oficial se llama JScript), hay diferencias
fundamentales en ciertas reas, como el manejo de eventos. Hacer
scripts que funcionen en todos los navegadores generalmente implica
rescribir mucho cdigo.
2. La interactividad consiste en agregar y quitar elementos de
una pgina o afectar los estilos que tengan. Los mtodos oficiales
para hacer esto, usando el Documento de Modelo de Objetos del
consorcio World Wide Web (W3C DOM), son bastante engorrosos.
FUNCIONALIDADLa forma de interactuar con la pgina es mediante la
funcin $(), un alias de jQuery(), que recibe como parmetro una
expresin CSS o el nombre de una etiqueta HTML y devuelve todos los
nodos (elementos) que concuerden con la expresin. Esta expresin es
denominada selector en la terminologa de jQueryCARACTERSTICAS
Seleccin de elementos DOM. Interactividad y modificaciones del rbol
DOM, incluyendo soporte para CSS 1-3 y un plugin bsico de XPath.
Eventos. Manipulacin de la hoja de estilos CSS. Efectos y
animaciones. Animaciones personalizada . AJAX. Soporta extensiones.
Utilidades varias como obtener informacin del navegador, operar con
objetos y vectores, funciones para rutinas comunes, etc. Compatible
con los navegadores Mozilla Firefox 2.0+, Internet Explorer 6+,
Safari 3+, Opera 10.6+ y Google Chrome 8+.
