Docente Danier Fresley Vanegas Becerra HTML5 Docente Danier Fresley Vanegas Becerra
HTML5
SEMÁNTICA Ofreciendo significado a la estructura, la semántica es la parte central y frontal del HTML5 “Los motores de búsqueda, las herramientas de accesibilidad y otras partes pueden mostrar, proporcionar y combinar nuestro contenido”
CSS3 CSS3 ofrece un amplio rango de estilos y efectos, mejorando las aplicaciones web sin sacrificar el rendimiento o la estructura semántica. Objetivo separar la estructura de un documento de su presentación.
MULTIMEDIA Audio y vídeo son los elementos más destacados en la web del HTML5.
GRÁFICOS Web: Canvas 2D, WebGL, SVG, las transformaciones 3D de CSS.
ACCESO DE DISPOSITIVOS La geolocalización (GPS). El API de orientación (acelerómetro). WebGL (GPU) API de audio web (hardware de audio) son ejemplos perfectos. Estas funciones son terriblemente potentes, dejando al descubierto las API JavaScript de alto nivel que hay encima de las funciones de hardware subyacentes del sistema.
RENDIMIENTO E INTEGRACIÓN Haz que tu aplicación y la web sean más veloces con un conjunto de técnicas y tecnologías como Web Workers y XMLHttpRequest Web Workers Permite delegar la evaluación JavaScript para subprocesos en segundo plano, lo que evita que estas actividades relenticen eventos interactivos. XMLHttpRequest Nivel 2 Permite buscar de forma asíncrona algunas partes de la página, mostrando contenido dinámico, que varía según el tiempo y las acciones del usuario. Esta es la tecnología detrás de Ajax.
DESCONECTADO Y ALMACENAMIENTO Las aplicaciones de HTML5 se iniciarán más rápido y funcionarán incluso si no se dispone de conexión a internet, gracias a la Caché de Aplicaciones, Almacenamiento Local, DB Indexadas y las APIs de ficheros. Recursos sin conexión: el caché de la aplicación. Eventos en línea y fuera de línea. Sesión del lado cliente y el almacenamiento continuo (Almacenamiento DOM). permite a las aplicaciones web almacenar datos estructurados en el lado del cliente. IndexedDB.
CONECTIVIDAD Chats en tiempo real Juegos más rápidos y una mejor comunicación. Web Sockets Permite crear una conexión permanente entre la página y el servidor e intercambiar datos no HTML a través de ese medio. Eventos de servidor enviados Permite a un servidor "colocar" eventos en un cliente, en lugar del clásico paradigma donde el servidor podría enviar datos sólo en respuesta a la petición de un cliente. WebRTC Esta tecnología, donde RTC es sinónimo de comunicación en tiempo real.
La declaración del tipo de documento (DTD Document Type Declaration), Se ubica en la primera línea del archivo HTML, es decir antes de la marca html. HTML 4.01 HTML 5 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML>
Elementos Las paginas web están escritas con un conjunto de elementos en un orden concreto; estos se pueden anidar.
Etiquetas principales <html> </html> Es la etiqueta principal, solo puede existir un en todo el documento, todas las demás etiquetas se escriben dentro de ella. <head></head> Define la primera parte de una página, normalmente la cabecera, en la cual se definen los metadatos: información de la página o información de como procesarla. <title></title> Etiqueta obligatoria definida dentro de <head>, solo puede haber una, empleada para definir el título de la página. <body></body> Define la segunda parte de la página web, el cuerpo. Lo que se escribe en el cuerpo aparece representado en la página web cuando se visualiza en el navegador web.
<h1>,<h2>…<h6>: Encabezados o títulos, siendo <h1> el más importante y <h6> el menos importante. <p>: Se emplea para definir un párrafo de texto. <strong>: se utiliza para destacar un fragmento de texto importante. <me>: se emplea para un texto enfatizado.
CANVAS CANVAS es una nueva marca del HTML 5, permite dibujar en dicha área mediante JavaScript. El objetivo de este elemento es hacer gráficos en el cliente (navegador), juegos etc. Para hacer un uso efectivo de este nuevo elemento de HTML tenemos que manejar el JavaScript.
AUDIO [ I ] Otro elemento que se agrega al HTML5 es el AUDIO. El objetivo de esta etiqueta es permitir la carga y ejecución de archivos de audio sin requerir un plug-in de Flash, Silverlignt o Java. <audio src="sonido.ogg" autoplay controls loop></audio>
AUDIO [ II ] src: La URL donde se almacena el archivo de audio. Si no definimos la URL la busca en el mismo directorio donde se almacena la página. autoplay: En caso de estar presente el archivo se ejecuta automáticamente luego de cargarse la página sin requerir la intervención del visitante. loop: El archivo de audio se ejecuta una y otra vez. controls: Indica que se deben mostrar la interface visual del control en la página (este control permite al visitante arrancar el audio, detenerlo, desplazarse etc.) autobuffer: En caso de estar presente indica que primero debe descargarse el archivo en el cliente antes de comenzar a ejecutarse.
AUDIO [ III ] Distintas fuentes:
VIDEO El elemento VIDEO permite mostrar un video sin la necesidad de plugin (Flash). En este momento los navegadores permiten mostrar una cantidad limitada de formatos de video. Las propiedades más importantes de la marca video son: src: Dirección donde se almacena el video. controls: Se visualiza el panel de control del video: botón de inicio, barra de avance del video etc. autoplay: El video se inicia inmediatamente luego que la página se carga en el navegador. width: Ancho en píxeles del video. height: Alto en píxeles del video.
Elementos HTML semánticos. El HTML 5 introduce una serie de elementos estructurales que facilitarán tanto el desarrollo de las páginas como también el análisis de las mismas por buscadores. header nav section footer aside article
FORM (autofocus) En HTML5 disponemos una propiedad en los controles de los formularios que nos permiten indicar cual control tendrá foco (es decir que aparecerá el cursor en su interior) Anteriormente esta actividad se la realizaba mediante Javascript, pero como vemos varios tipos de problemas ahora se los puede resolver directamente con HTML.
Ejemplo FORM (autofocus)
FORM (placeholder) Mediante la propiedad placeholder podemos disponer más información directamente dentro del control generalmente con un ejemplo de dato a ingresar
FORM (required) Mediante la propiedad required obligamos e informamos al operador que el control se debe cargar obligatoriamente
FORM (pattern) [I] Una expresión regular es una técnica que nos permite identificar si un string coincide con un patrón determinado. Un ejemplo clásico es determinar si un email está correctamente estructurado (sabemos que comienza con uno o más caracteres alfanuméricos, luego el carácter @ seguido de uno o más caracteres alfanuméricos, luego el carácter "." y finalmente otros caracteres alfabéticos)
FORM (pattern) [II]
FORM (pattern) [III]
FORM (pattern) [IV]
FORM (input type="email")
FORM (input type="range") En lugar de utilizar un control input de tipo text para cargar un número podemos seleccionar el valor con el mouse o con el dedo según el dispositivo que estamos utilizando.
Ejemplo FORM (input type="range")
FORM (input - datalist) Con html5 podemos mostrarle una lista de sugerencias (no obligatorias como un select) para que el operador pueda seleccionarla sin tener que tipear todos los caracteres.
Ejemplo FORM (input - datalist)
FORM (novalidate)
Bibliografía Recuperado el 2 de Septiembre de 2014 de http://www.html5rocks.com