Estándar HTML5
jasminOrtegaTrabajo9 de Noviembre de 2014
4.018 Palabras (17 Páginas)224 Visitas
I. INTRODUCCION
El aumento de la necesidad de desarrollo de aplicaciones web ha dado lugar a la aparición del estándar HTML5 que incluye funcionalidades que remplazan a librerías y software.
Tecnologías como Flash en especial ha sido usado en reemplazo de HTML para desarrollar web apps que superan las habilidades de un navegador: Audio, video, webcams, micrófonos, datos binarios. Ahora HTML5 es capaz de cumplir con lo que hacen estas tecnologías sin necesidad de plugins y con una gran compatibilidad entre navegadores.
Actualmente el estándar HTML5 es utilizado por los navegadores en sus últimas versiones, pero la tecnología no se usa del todo en el desarrollo de páginas web.
II. CONCEPTOS
2.1. Conceptos previos
• HTML [10], HyperText Markup Language (lenguaje de marcado de hipertexto), hace referencia al lenguaje de marcado predominante para la elaboración de páginas web que se utiliza para describir y traducir la estructura y la información en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML, consta de varios componentes vitales, entre ellos los elementos y sus atributos, tipos de data y la declaración de tipo de documento.
• XHTML [11], eXtensible HyperText Markup Language, básicamente es HTML expresado como XML. Es más estricto a nivel técnico, pero esto permite que posteriormente sea más fácil al hacer cambios o buscar errores entre otros. XHTML es solamente la versión XML de HTML, por lo que tiene, básicamente, las mismas funcionalidades, pero cumple las especificaciones, más estrictas, de XML. Su objetivo es avanzar en el proyecto del World Wide Web Consortium de lograr una web semántica, donde la información, y la forma de presentarla estén claramente separadas. HTTP (HyperText Transfer Protocol): Protocolo de transferencia de hipertexto utilizado para el envío de páginas Web.
• AJAX [12] (Asynchronous JavaScript And XML): Unión de JavaScript y XML que recupera información Web de forma asíncrona. Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones. Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se solicitan al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página.
2.2. Estándar HTML 5
Según [4] html5 expande la definición de lo que una pagina web puede hacer. Esta de Actualmente. HTML5 que es un estándar y termino de marketing para agrupar las nuevas tecnologías de desarrollo de aplicaciones web: HTML5, CSS3 y nuevas capacidades de Javascript. La versión más usada de HTML, HTML4 carece de características necesarias para la creación de aplicaciones modernas y esto llevo al uso de tecnologías de frameworks basados en Javascript como jQuery, jQuery UI, Sproutcore entre otros.
2.3. Etiquetas HTML5
Todo el código que se tiene en HTML normal seguirá funcionando sin problemas en HTML5. Para empezar a usar HTML5 lo único que se tiene que hacer es colocar la etiqueta:
<!DOCTYPE html>
Es un DOCTYPE mucho más simplificado que XHTML5 (cuyas reglas siguen siendo usadas) y permite usar todas las habilidades de HTML5 sin que nada de lo que ya tienes programado deje de funcionar.
2.4. Compatibilidad en distintos Navegadores
Un problema que se presenta en el uso de html5 es si podemos usarlo en el navegador que queremos, un sitio que puede responder esto es CanIUSe.com. Donde encontrarás una lista de todas las capacidades de HTML5, CSS3 y el nuevo Javascript, junto a una tabla de compatibilidad. Sin embargo, no te asustes demasiado si ves muchos cuadros rojos. Recuerda los scripts que mencioné arriba como IE-CSS3 o HTML5 Enabling Script.
Existen varias herramientas que permiten hacer compatible html5 con otros navegadores que no lo permiten. Una herramienta puede ser Modernizr .
2.5. Preprocesadores de lenguaje CSS3
Los preprocesadores de lenguaje CSS añaden la posibilidad de crear funciones, variables, hacer operaciones, y escribir menos código, LESS es un preprocesador que permite agregar estas características a las funcionalidades que provee CSS3.
Se puede utilizar la librería o una herramienta que transforme código less en código CSS como SimpLESS.
El siguiente es un ejemplo que muestra el potencial de less.
// LESS
@color: #4D926A;
#header {
color: @color;
}
h2 {
color: @color;
}
2.6. HTML5 Web Storage
Según [5] HTML5 pone a disposición de los desarrolladores una API que permite almacenar una cantidad de información mucho mayor en los navegadores de los usuarios. Esta API define un interfaz Storage y proporciona una implementación concreta de dicho interfaz a través de dos objetos diferentes: local Storage y sesión Storage. Cada objeto Storage proporciona acceso a una lista de pares clave,valor que serán los que contendrán la información que hemos almacenado. Estos elementos de la lista se conocen como items. Las claves de los items son String incluyendo la cadena vacía que también es una clave válida.
La diferencia fundamental entre el objeto local Storage y sesión Storage es el tiempo que la información permanece disponible [4]. De este modo, en el objeto local Storage, los datos almacenados están disponibles para el navegador en todo momento aunque cerremos todas las ventanas, lo que significa que si queremos eliminar esta información debemos hacerlo explícitamente; por otro lado, en el objeto sesión Storage es donde la información permanece disponible para el navegador hasta que cerremos la ventana, después se elimina.
Según [6] el Web storage no solo es parte de html5 sino que esta siendo normalizado por el W3C (Consocrio World Wide Web), donde indica que web storage esta en una especificacio separada y se apoya en Internet Explorer8 y navegadores como Google Ghrome, Mozilla y Opera. Este tipo de almacenamiento de información en el navegador proporciono algunas ventajas que se considero por [4] que hace una comparación con algunas características de los cookies pero con una capacidad mucho mayor y no hay información almacenada en el encabezado de la solicitud HTTP , esta ventajas compara la persistencia cookies y cookies de sesión con local storage y sesión storage.
1. Las diferentes ventanas abiertas del mismo site comparten estos objetos, lo que nos permite sincronizar información entre diferentes ventanas del navegador en tiempo real, sin necesidad de recargar.
2. Los datos almacenados no viajan en las peticiones del cliente, lo cual permite almacenar mayor cantidad de información
3. Podemos almacenar todo tipo de información, no sólo información textual: Podemos almacenar Strings, Numbers, Arrays (Aunque posteriormente debemos convertirla al objeto en sí, ya que realmente se almacena como String)
4. La información está disponible incluso si el usuario no tiene conexión en ese momento, lo que nos permite implementar aplicaciones web que trabajen offline. Característica muy útil para aplicaciones móviles.
5. Cada site que visitemos tiene sus propios objetos Storage, la información sólo se comparte entre ventanas bajo el mismo dominio.
Existe una diferencia notable con los cookies con lo que Web storage [5]:
• Las cookies HTTP sufren de almacenamiento de datos limitado (por ejemplo, 4KB), mientras que la capacidad de almacenamiento de datos de la API WebStorage para la mayoría de los navegadores es de 5 MB como por especificación W3C con una excepción a IE8 (o superior) que soporta hasta 10 MB.
• Cookies limitan la accesibilidad de datos para un cierto nombre de dominio o una dirección URL donde el WebStorage puede limitar el acceso a un determinado nombre de dominio, o al dominio TLD (como. Org) o para la sesión de usuario dado.
• Los datos almacenados en las cookies se transmiten por cada solicitud al servidor, por lo que es muy lento e ineficaz. Sin embargo, los datos API WebStorage no se transmite por cada petición del servidor y utilizan solo cuando se le pregunta.
• Web Storage es más público que las cookies. Esta es la razón por la que tenemos que tomar precauciones especiales para garantizar la seguridad, existen algunas ventajas que ponen en manos de los desarrolladores algunos aspectos como estos.
2.7. WebWorkers
Según [7] los Web Workers permiten ejecutar scripts en paralelo (background). Para su uso se instancia un worker que estará en un fichero javascript y se indica qué debe hacer cuando se reciba un mensaje. Estas operaciones pueden ser cálculos matemáticos complejos, solicitudes a la red, o acceso al almacenamiento local; resulta de gran utilidad en aplicaciones web que dependen de scripts pesados para ejecutar alguna funcionalidad.
Existen varios obstáculos que evitan que las aplicaciones interesantes se extrapolen (es decir, de implementaciones principalmente de servidor) a JavaScript del cliente. Algunas de estas aplicaciones incluyen compatibilidad de navegadores, escritura estática, accesibilidad y rendimiento. Afortunadamente, el rendimiento
...