Tema 4 - Manual de HTML5 Asignatura:IAT-700 Nivel: 7mo Semestre

Transcripción

1 INTRODUCCIÓN Qué es html 5? Simplemente Como su nombre indica, HTML 5 es el sucesor de HTML4. Este trabajo o proyecto de HTML5 se inició a finales de 2003 con un grupo de trabajo que se propuso a hacer un lenguaje que llegara con un conjunto de tecnologías que permiten construir la nueva Web. No fue sino hasta 2007 que el HTML5 del W3C acepta la visión mediante la incorporación en ella del grupo de trabajo. Los principios de diseño son claras: para simplificar el uso de HTML, la formalización de las prácticas actuales, y garantizar la máxima compatibilidad con versiones anteriores. El HTML5 (HyperText Markup Language, versión 5) es la quinta revisión del lenguaje de programación básico de la World Wide Web, el HTML. Esta nueva versión pretende remplazar al actual (X)HTML, corrigiendo problemas con los que los desarrolladores web se encuentran, así como rediseñar el código actualizándolo a nuevas necesidades que demanda la web de hoy en día. Actualmente algunas empresas están desarrollando sus sitios webs en esta versión del lenguaje. A diferencia de otras versiones de HTML, los cambios en HTML5 comienzan añadiendo semántica y accesibilidad implícitas, especificando cada detalle y borrando cualquier ambigüedad. Se tiene en cuenta el dinamismo de muchos sitios webs (facebook, twenti, etc), donde su aspecto y funcionalidad son más semejantes a aplicaciones webs que a documentos. Ahora podemos crear aplicaciones web de una manera menos complicada ya que esta tecnología mejora e incorpora muchos conceptos de programación web, como decir un todo en uno. Por qué es mejor HTML5? Simplemente porque es una tecnología que supera a la actual HTML, porque es lo nuevo que estandariza la W3C, porque es nueva tecnología y como toda nueva tecnología siempre viene con cosas que nos van a impresionar, porque llega de la mano de CSS3, una evolución notable de las hojas de estilo que conocíamos y porque revaloriza el papel de JavaScript en la Web, como el lenguaje que sabe hablar con las nuevas APIs que llegan con HTML5. A continuación alguna de las reglas establecidas para HTML5: Las nuevas características deben basarse en HTML, CSS, DOM y JavaScript. Reducir la necesidad de plugins externos (como Flash). Mejor manejo de errores. Más marcado para reemplazar secuencias de comandos. HTML5 debe ser independiente del dispositivo. El proceso de desarrollo debe ser visible para el público. 1

2 Mejor estructura El nuevo <! DOCTYPE>.- Esto es lo primero que encontramos en un documento web. El <! DOCTYPE> para la versión HTML 4.01: 1 <!DOCTYPE HTML PUBLIC» 2 "-//W3C//DTD HTML 4.01//ES"» 3 " Aquí el <! DOCTYPE> para la versión HTML 1.0: 1 <!DOCTYPE html PUBLIC» 2 "-//W3C//DTD XHTML 1.0 Strict //ES"» 3 " Ahora en HTML5 el encabezado o la primera línea se ha simplificado considerablemente. Ahora podemos mantener este Doctype en la memoria, sin tener que copiar y pegar. Es solo esto: 1 <!DOCTYPE html> Es tan corto que todo el mundo lo puede memorizar. El <! DOCTYPE> debe ser lo primero que debe ir en un documento HTML 5, antes de la etiqueta <html>. Ojo!! <DOCTYPE!>, no es una etiqueta, esto es una instrucción para el navegador que declara la versión de html que se está usando. Bueno, vamos a definir una estructura más completa de un documento web utilizando las nuevas etiquetas estructurales. <header>, <hgroup>, <footer>, <nav>, <aside>, <section> y <article>. Vamos a definir el documento y luego vamos a examinar las etiquetas más a fondo y conocer como las podemos utilizar en nuestros propios proyectos. 2

3 Hemos utilizado estos elementos <header>, <hgroup>, <footer>, <nav>, <aside>, <section> y <article>. Para marcar y así formar la estructura casi que completa de nuestra página, ahora es evidente notar los nuevos nombres, es el momento para estudiar en detalle un poco más de esas nuevas etiquetas que llamamos estructurales. 1º <header>: Esta etiqueta hace el mismo trabajo que esta <div id= header >, esta etiqueta <header> la utilizamos para contener información adicional como logos y ayudas a la navegación, iconos de redes sociales etc. Esta etiqueta tiene su cierre de esta manera </header>. 2º <hgroup>: Muchos headers de las páginas web podrán contener múltiples títulos representados con la etiqueta h1, y de pronto un subtítulo formando con la etiqueta h2. Bueno 3

4 esta nueva etiqueta <hgroup> permite colocar un h1, h2 y h3 dentro del header, permitiendo usar otro h1 en el sitio. Esta etiqueta tiene su cierre de la siguiente forma, </hgroup>. 3º <nav>: La etiqueta <nav> está diseñada para colocar la botonera o navegación principal los normales (Home, quienes somos, portafolio, contáctenos, blog). Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul> con sus respectivos <li>, su cierre es </nav>. 4º <aside>: Esta etiqueta es creada para contener información no relevante para el sitio web como da a sospechar su nombre que se traduciría algo así como a un lado. En un blog, obviamente el <aside> es la barra lateral de información donde se muestra las categorías, blogroll etc. Esta etiqueta puede contener cualquier cosa desde un reproductor multimedia hasta una galería de imágenes, el cierre de esta etiqueta es </aside>. 5º <section>: Esta etiqueta Define un área de contenido única dentro del sitio. Esta es una de las etiquetas más genéricas de los elementos estructurales ya que podemos agrupar contenidos relacionados por el tema. Ejemplo: En un blog, esta etiqueta sería la zona donde están todos los posts, el cierre de esta etiqueta es </section>. 6º <article>: Esta etiqueta especifica un contenido independiente y autónomo. Define zonas únicas de contenido independiente. Ejemplo: En el home de un blog, cada post sería un <article> y el post y cada uno de sus comentarios serían varios <article>, el cierre respectivo de esta etiqueta es </article>. 7º <footer>: Esta etiqueta lo que define es un pie de página con la información del copyright, autor un menú o lo queramos colocar en el pie de la web, el cierre de esta etiqueta es </footer>. NOTA: Algo muy importante: el caso de ver nuevas etiquetas estructurales no significa que desaparecieron los divs, los podemos seguir utilizando en cuestiones de contenido interno, porque para el tema de la estructura y semántica las nuevas etiquetas nos pueden venir muy bien, y es bueno que comencemos a basarnos en ellas. 4

5 Bueno en conclusión, utilizando estas nuevas etiquetas podemos estructurar una web basada en HTML5, se vería la estructura algo así como lo vamos a ver en el siguiente cuadro, y claro para una mejor apariencia que más que css3. Actualmente es abusivo el uso de elementos DIV para estructurar una web en bloques. El HTML5 nos brinda varios elementos que perfeccionan esta estructuración estableciendo qué es cada sección, eliminando así DIV innecesarios. Este cambio en la semántica hace que la estructura de la web sea más coherente y fácil de entender por otras personas y los navegadores podrán darle más importancia a según qué secciones de la web facilitándole además la tarea a los buscadores, así como cualquier otra aplicación que interprete sitios web. Las webs se dividirán en los siguientes elementos: <section></section> - Se utiliza para representar 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 creando jerarquías del contenido, algo muy favorable para el buen posicionamiento web. <article></article> - El elemento de artículo representa un componente de una página que consiste en una composición autónoma en un documento, página, aplicación, o sitio web con la intención de que pueda ser reutilizado y repetido. Podría utilizarse en los artículos de los foros, una revista o el artículo de periódico, una entrada de un blog, un comentario 5

6 escrito por un usuario, un widget interactivo o gadget, o cualquier otro artículo independiente de contenido. Cuando los elementos de <article> son anidados, los elementos de <article> interiores representan los artículos que en principio son relacionados con el contenido del artículo externo. Por ejemplo, un artículo de un blog que permite comentarios de usuario, dichos comentarios se podrían representar con <article>. <aside></aside> - Representa una sección de la página que abarca un contenido tangencialmente relacionado con el contenido que lo rodea, por lo que se le puede considerar un contenido independiente. Este elemento puede utilizarse para efectos tipográficos, barras laterales, elementos publicitarios, para grupos de elementos de la navegación, u otro contenido que se considere separado del contenido principal de la página. <header></header> - Elemento <header> representa un grupo de artículos introductorios o de navegación. <nav></nav> - El elemento <nav> representa una sección de una página que es un link a otras páginas o a partes dentro de la página: una sección con links de navegación. No todos los grupos de enlaces en una página tienen que estar en un elemento <nav>, sólo las secciones que consisten en bloques principales de la navegación son apropiadas para ser utilizadas con el elemento <nav>. Puede utilizarse particularmente en el pie de página para tener un menú con un listado de enlaces a varias páginas de un sitio, como el Copyright; home page, política de uso y privacidad. No obstante, el elemento <footer> es plenamente suficiente sin necesidad de tener un elemento <nav>. <footer></footer> - El elemento <footer> representa el pie 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. Diferencias entre HTML y HTML5 6

7 Mejoras en los formularios El elemento input adquiere gran relevancia al ampliarse los elementos que se permitirán en el type. <input type="search"> para cajas de búsqueda. <input type="number"> para adicionar o restar números mediante botones. <input type="range"> para seleccionar un valor entre dos valores predeterminados. <input type="color"> seleccionar un color. <input type="tel"> números telefónicos. <input type="url"> direcciones web. <input type=" "> direcciones de . <input type="date"> para seleccionar un día en un calendario. <input type="month"> para meses. <input type="week"> para semanas. <input type="time"> para fechas. <input type="datetime"> para una fecha exacta, absoluta y tiempo. <input type="datetime-local"> para fechas locales y frecuencia. Otros elementos muy interesantes <audio> y <video> - Nuevos elementos que permitirán incrustar un contenido multimedia de sonido o de vídeo, respectivamente. Es una de las novedades más importantes e interesantes en este HTML5, ya que permite reproducir y controlas vídeos y audio sin necesidad de plugins como el de Flash. El comportamiento de estos elementos multimedia será como el de cualquier elemento nativo, y permitirá insertar en un video, enlaces o imágenes, por ejemplo, Youtube ya ha anunciado que deja el Flash y comienza a proyectar con HTML5. <embed> - Se emplea para contenido incrustado que necesita plugins como el Flash. Es un elemento que ya reconocen los navegadores, pero ahora al formar parte de un estándar, no habrá conflicto con <object>. <canvas> - Este es un elemento complejo que permite que se generen gráficos al hacer dibujos en su interior. Es utilizado en Google Maps y en un futuro permitirá a los desarrolladores crear aplicaciones muy interesantes. Segunda Parte Una pregunta muy común en estos tiempos es: Cómo puedo empezar a utilizar HTML5 si existen navegadores antiguos que no lo soportan? Pero la pregunta en sí se ha formulado de forma errónea. El HTML5 no es una cosa grande como un todo, sino una colección de elementos individuales, por consiguiente lo que sí se podrá será detectar si los navegadores soportan cada elemento por separado. 7

8 Cuando los navegadores realizan un render de una página, construyen un Modelo de Objeto de Documento (Document Object Model - DOM), una colección de objetos que representan los elementos del HTML en la página. Cada elemento - <p>, <div>, <span> - es representado en el DOM por un objeto diferente. Todos los objetos DOM comparten unas características comunes, aunque algunos tienen más que otros. En los navegadores que soportan rasgos del HTML5, algunos objetos tienen una única propiedad y con una simple ojeada al DOM podremos saber las características que soporta el navegador. Existen cuatro técnicas básicas para saber cuándo un navegador soporta una de estas particulares características, desde las más sencillas a las más complejas. 1. Comprueba si determinadas propiedades existen en objetos genéricos o globales (como window o navigator). Ejemplo: comprobar soporte para la Geolocalización. 2. Crear un elemento, luego comprobar si determinadas propiedades existen en ese elemento. Ejemplo: comprobar soporte para canvas. 3. Crear un elemento, comprobar si determinados métodos existen en ese elemento, llamar el método y comprobar los valores que devuelve. Ejemplo: comprobar qué formatos de video soporta. 4. Crear un elemento, asignar una propiedad a determinado valor, entonces comprobar si la propiedad mantiene su valor. Ejemplo: comprobar que tipo de <input> soporta. MODERNIZR, una biblioteca para detectar HTML5. Modernizr es una librería de JavaScript con licencia MIT de código abierto que detecta si son compatibles muchos elementos para HTML5 y CSS3. Dicha librería se irá actualizando y para utilizarla solo hay que incluir en <head><script> de tu página. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>dive Into HTML5</title> <script src="modernizr.min.js"></script> </head> <body>... </body> </html> Modernizr se ejecuta automáticamente, no es necesario llamar a ninguna función tipo: modernizr_init(). Cuando se ejecuta, se crea una objeto global llamado Modernizr, que contiene un set de propiedades booleanas para cada elemento que detecta. Por ejemplo si su navegador soporta elementos canvas, la propiedad de la librería Modernizr.canvas será 8

9 true. Si tu navegador no soporta los elementos canvas, la propiedad Modernizr.canvas será false. if (Modernizr.canvas) { // a crear formas!! } else { // no hay soporte para canvas, los siento Canvas HTML 5 define el elemento <canvas> como un rectángulo en la página donde se puede utilizar Java Script para dibujar cualquier cosa. También determina un grupo de funciones (canvas API) para dibujar formas, crear gradientes y aplicar transformaciones. Texto Canvas Si tu navegador soporta las API de canvas no quiere decir que pueda soportar las API para texto-canva. Las API de canva se han ido generando con el tiempo y las funciones de texto se han añadido posteriormente, por lo que algunos navegadores puede que no tengan integrado las API para texto. Video El HTML5 ha definido un nuevo elemento llamado <video> para incrustar video en las páginas de la web. Actualmente insertar un video en la web era imposible sin determinados plugins como el QuickTime o el Flash. El elemento <video> ha sido diseñado para utilizarlo sin la necesidad de que tenga que detectar ningún script. Se pueden especificar múltiples ficheros de video y los navegadores que soporten el video en HTML5 escogerán uno basado en el formato que soporte. Formatos de video Los formatos de video son como los lenguajes escritos. Un periódico en inglés contiene la misma información que un periódico en español, aunque solo uno le será útil. Con los navegadores pasa lo mismo, necesitan saber en qué idioma está escrito el video. Los lenguajes de los videos se llaman codecs un algoritmo utilizado para compactar un video. Existen docenas de codecs en uso en todo el mundo, aunque dos son los más relevantes. Uno de estos codecs cuesta dinero por la licencia de la patente, y funciona en safari y los iphones. El otro codec es gratis y de código abierto y funciona en navegadores como Chrome y Firefox. Aplicaciones OFFline Leer página webs offline es relativamente sencillo. Te conectas a Internet, cargas una web, te desconectas y puedes sentarte tranquilamente a leer. 9

10 Pero qué sucede cuando son aplicaciones como Gmail o Google Docs? Gracias al HTML5 cualquiera puede crear una aplicación web que funcione offline. Las aplicaciones web offline se ejecutan como una aplicación online. La primera vez que se visita una web offline que esté disponible, el servidor web le dirá a al navegador los ficheros que necesita para poder trabajar desconectado. Estos ficheros pueden ser, HTML, JavaScript, imágenes y hasta videos. Una vez que el navegador ha descargado los ficheros necesarios podrás volver a visitar la web aunque no estés conectado a Internet. El navegador reconocerá que estás desconectado de Internet y utilizará los ficheros que había descargado con anterioridad. La próxima vez que te conectes, si has realizado cambios en la web offline, estos se subirán al servidor actualizándolo. Geolocalización La geolocalización es la forma de suponer donde te encuentras en el mundo y si quieres, compartir información con gente de confianza. Existen muchas maneras de descubrir donde te encuentras, por tu dirección IP, la conexión de red inalámbrica, la torre de telefonía móvil por la que habla tu teléfono móvil (celular), o GPS específicos que reciben las coordenadas de longitud y la latitud de satélites que están en el cielo. Tercera Parte En el primer capítulo de esta charla sobre HTML5, mencionamos por arriba sobre los cambios en los formularios que incluye el HTML5. Como norma para todos, un formulario es una etiqueta <form> y en su interior algunos elementos <input type="text"> o <input type="password"> finalizado con un botón <input type="submit"> y ya está. A continuación explicaremos algunas de estas novedades. Texto como PLACEHOLDER Placeholder es un nuevo atributo que se utiliza dentro de los campos input. Sirve para mostrar un texto dentro del input siempre y cuando el campo esté vacío o no esté señalado. En cuanto se haga clic dentro del campo (o se llegue por el TAB), el texto desaparecerá. Seguramente ha visto la propiedad Placeholder antes. Por ejemplo, Mozilla Firefox 3.5 incluye textos placeholder en la barra de localización. Cuando se hace clic sobre la barra de búsqueda o se llega por un tab, el texto preestablecido desaparece. 10

11 Irónicamente Firefox no da soporte a esta propiedad, al igual que IE y Opera, solo es compatible (a día de hoy) con Safari y Chrome. Aquellos navegadores que no soporten placeholder simplemente lo ignorarán y no mostrarán nada. Aquí hay un ejemplo de cómo se puede incluir placeholder en un formulario: Código: <form> <input placeholder="buscar en la base de datos"> <input value="buscar"> </form> Campos con autofocus El atributo de autofoco permite al usuario decidir y controlar qué campo de texto debe ser enfocado (señalado, activado) en cuanto la página es cargada o se esté cargando, permitiendo al usuario comenzar a escribir sin tener él que especificar cuál es su campo de texto principal en su página. El atributo de autofoco es un atributo booleano (respuesta true - false) y no deberá haber más de un elemento en la página. Muchos sitios utilizan JavaScript para focalizar y dirigir el cursor automáticamente al campo de texto. Por ejemplo Google cuando comienza a cargar su página dirigirá el cursos a su input de búsqueda automáticamente para que puedas empezar a escribir tus palabras de búsqueda en su navegador. Esto puede ser conveniente para algunos y para otros que pueden tener una necesidad específica no tanto. Si aprietas la barra de espacio esperando que la página baje haciendo un scroll, esto no sucederá porque está enfocado el input del formulario. HTML5 introduce un atributo de control de autofoco en los formularios. El atributo autofoco hace exactamente lo que suena, en cuanto la web se comienza a cargar, mueve el cursor y así la atención del usuario a un campo <input> particular. A día de hoy, Autofocus solo lo soportan Safari, Chrome y Opera. Firefox e IE, lo ignorarán. Código: <form> <input name="b" autofocus> <input type="submit" value="search"> </form> 11