Scribd Logo
Upload

Welcome to Scribd!

  • El HTML5

    Uploaded by

    Ivan Estrada Morales
    93 views23 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    93 views23 pages

    El HTML5

    Uploaded by

    Ivan Estrada Morales

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 23

    TEMA: 3

    Introduccin y las nuevas etiquetas de HTML5


    HTML5 es la actualizacin de HTML, el lenguaje en el que es creada la web. HTML5 tambin es un termino de markeIng para agrupar las nuevas tecnologas de desarrollo de aplicaciones web: HTML5,CSS3 y nuevas capacidades de Javascript. La versin anterior y ms usada de HTML, HTML4, carece de caracteristicas necesarias para la creacin de aplicaciones modernas basadas en un navegador. El uso fuerte de Javascript ha ayudado a mejorar esto, gracias a frameworks como jQuery, jQuery UI, Sproutcore entre otros. Flash en especial ha sido usado en reemplazo de HTML para desarrollar web apps que superaran las habilidades de un navegador: Audio, video, web cams, micrfonos, datos binarios, animaciones vecto-riales, componentes de interfaz complejos, entre muchas otras cosas. Ahora HTML5 es capaz de hacer esto sin necesidad de plugins y con una gran compartibilidad entre navegadores.

    <!DOCTYPE html>
    Es un DOCTYPE mucho ms simplifiicado que XHTML 5 (cuyas reglas siguen siendo usadas) y te permite usar todas las habilidades de HTML5 sin que nada de lo que ya tienes programado deje de funcionar. Las principales etiquetas HTML5 nuevas no tienen una representacin especial en pantalla. Todas se comportan como un <div> o un <span> Pero cada una tiene un significado semntico superior a un simple div o span.

    Las webs se dividirn en los siguientes elementos:


    <section></section> - Se utiliza para representar una seccin general dentro de un documento o aplicacin, como un captulo de un libro. Puede contener subsecciones y si lo acompaamos de h1-h6 podemos estructurar mejor toda la pgina creando jerarquas del contenido, algo muy favorable para el buen posicionamiento web. <article></article> - El elemento de artculo representa un componente de una pgina que consiste en una composicin autnoma en un documento, pgina, aplicacin, o sitio web con la intencin de que pueda ser reutilizado y repetido. Podra utilizarse en los artculos de los foros, una revista o el artculo de peridico, una entrada de un blog, un comentario escrito por un usuario, un widget interactivo o gadget, o cualquier otro artculo independiente de contenido

    Cuando los elementos de <article> son anidados, los elementos de <article> interiores representan los artculos que en principio son relacionados con el contenido del artculo externo. Por ejemplo, un artculo de un blog que permite comentarios de usuario, dichos comentarios se podran representar con <article>. <aside></aside> - Representa una seccin de la pgina 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 tipogrficos, barras laterales, elementos publicitarios, para grupos de elementos de la navegacin, u otro contenido que se considere separado del contenido principal de la pgina.

    <header></header> - Elemento <header> representa un grupo de artculos introductorios o de navegacin.

    <nav></nav> - El elemento <nav> representa una seccin de una pgina que es un link a otras pginas o a partes dentro de la pgina: una seccin con links de navegacin. No todos los grupos de enlaces en una pgina tienen que estar en un elemento <nav>, slo las secciones que consisten en bloques principales de la navegacin son apropiadas para ser utilizadas con el elemento <nav>. Puede utilizarse particularmente en el pie de pgina para tener un men con un listado de enlaces a varias pginas de un sitio, como el Copyright; home page, poltica 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 pi de una seccin, con informacin acerca de la pgina/seccin que poco tiene que ver con el contenido de la pgina, como el autor, el copyright o el ao.

    Mejoras en los formularios


    El elemento input adquiere gran relevancia al ampliarse los elementos que se permitiran en el type. <input type="search"> para cajas de bsqueda. <input type="number"> para adicionar o restar nmeros mediante botones. <input type="range"> para seleccionar un valor entre dos valores predeterminados. <input type="color"> seleccionar un color. <input type="tel"> nmeros telefnicos. <input type="url"> direcciones web.

    Mejoras en los formularios


    <input type="email"> direcciones de email. <input type="date"> para seleccionar un da 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 permitirn incrustar un contenido multimedia de sonido o de vdeo, respectivamente.

    Es una de las novedades ms importantes e interesantes en este HTML5, ya que permite reproducir y controlar vdeos 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 imgenes, 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, peroahora al formar parte de un estndar, no habr conflicto con <object>.
    <canvas> - Este es un elemento complejo que permite que se generen grficos al hacer dibujos en su interior. Es utilizado en Google Maps y en un futuro permitir a los desarrolladores crear aplicaciones muy interesantes.

    Cmo puedo empezar a utilizar HTML5 si existen navegadores antiguos que no lo soportan?
    Cuando los navegadores realizan un render de una pgina, onstruyen un Modelo de Objeto de Documento (Document Object Model DOM), una coleccin de objetos que representan los elementos del HTML en la pgina. Cada elemento - <p>, <div>, <span> - es representado en el DOM por un objeto diferente. Todos los objetos DOM comparten unas caractersticas comunes, aunque algunos tienen ms 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 caractersticas que soporta el navegador.

    Existen cuatro tcnicas bsicas para saber cuando un navegador soporta una de estas particulares caractersticas, desde las ms sencillas a las ms complejas.

    1. Comprueba si determinadas propiedades existen en objetos genricos o globales (como window o navigator). Ejemplo: comprobar soporte para la Geolocalizacin. 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 mtodos existen en ese elemento, llamar el mtodo 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 librera de JavaScript con licencia MIT de cdigo abierto que detecta si son compatibles muchos elementos para HTML5 y CSS3. Dicha librera se ir actualizando y para utilizarla solo hay que incluir en <head><script> de tu pgina. <!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 automticamente, no es necesario llamar a ninguna funcin tipo: modernizr_init(). Cuando se ejecuta, se crea un objeto global llamado Modernizr, que contiene un set de propiedades Boleanas para cada elemento que detecta. Por ejemplo si su navegador soporta elementos canvas, la propiedad de la librera Modernizr.canvas ser 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 rectngulo en la pgina donde se puede utilizar Java Script para dibujar cualquier cosa. Tambin 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 aadido 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 pginas de la web. Actualmente insertar un video en la web era imposible sin determinados plugins como el QuickTime o el Flash

    Formatos de video: l os formatos de video son como los lenguajes escritos. Un peridico en ingls contiene la misma informacin que un peridico en espaol, 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 ms 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 cdigo abierto y funciona en navegadores como Chromium y Firefox.

    Aplicaciones OFFline
    Leer pgina webs offline es relativamente sencillo. Te conectas a Internet, cargas una web, te desconectas y puedes sentarte tranquilamente a leer. Pero qu sucede cuando son aplicaciones como Gmail o Google Docs? Gracias al HTML5 cualquiera puede crear una aplicacin web que funcione offline. Las aplicaciones web offline se ejecutan como una aplicacin 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, imgenes y hasta videos. Una vez que el navegador ha descargado los ficheros necesarios podrs volver a visitar la web aunque no ests conectado a Internet.

    El navegador reconocer que ests desconectado de Internet y utilizar los ficheros que haba descargado con anterioridad. La prxima vez que te conectes, si has realizado cambios en la web offline, estos se subirn al servidor actualizndolo. Geolocalizacin La geolocalizacin es la forma de suponer donde te encuentras en el mundo y si quieres, compartir informacin con gente de confianza. Existen muchas maneras de descubrir donde te encuentras, por tu direccin IP, la conexin de red inalmbrica, la torre de telefona mvil por la que habla tu telfono mvil (celular), o GPS especficos que reciben las coordenadas de longitud y la latitud de satlites que estn ene el cielo.

    Como norma para todos los cambios en HTML5, un formulario es una etiqueta <form> y en su interior algunos elementos <input type="text"> o <input type="password"> finalizado con un botn <input type="submit"> y ya est.
    A continuacin explicaremos algunas de estas novedades. 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 vaco o no est sealado. En cuanto se haga clic dentro del campo (o se llegue por el TAB), el texto desaparecer.

    Por ejemplo, Mozilla Firefox 3.5 incluye textos placeholder en la barra de localizacin. Cuando se hace clic sobre la barra de bsqueda o se llega por un tab, el texto preestablecido desaparece. Irnicamente Firefox no da soporte a esta propiedad, al igual que IE y Opera, solo es compatible (a da de hoy) con Safari y Chrome. Aquellos navegadores que no soporten placeholder simplemente lo ignorarn y no mostrarn nada. Aqu hay un ejemplo de cmo se puede incluir placeholder en un formulario: Cdigo: <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 (sealado, activado) en cuanto la pgina es cargada o se est cargando, permitiendo al usuario comenzar a escribir sin tener l que especificar cual es su campo de texto principal en su pgina.

    El atributo de autofoco es un atributo boleano (respuesta true - false) y no deber haber ms de un elemento en la pgina.

    Muchos sitios utilizan JavaScript para automticamente al campo de texto.

    focalizar

    dirigir

    el

    cursor

    Por ejemplo Google cuando comienza a cargar su pgina dirigir el cursos a su input de bsqueda automticamente para que puedas empezar a escribir tus palabras de bsqueda en su navegador. Esto puede ser conveniente para algunos y para otros que pueden tener una necesidad especfica no tanto. Si aprietas la barra de espacio esperando que la pgina 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 atencin del usuario a un campo <input> particular. A da de hoy, Autofocus solo lo soportan Safari, Chrome y Opera. Firefox e IE, lo ignorarn. Cdigo:<form> <input name="b" autofocus> <input type="submit" value="Search"> </form>

    ALGUNAS VENTAJAS

    No se necesitaran tarjetas graficas mas potentes o procesadores mas potentes ya que html5 es un HTML optimizado para la web de estos tiempos
    Aunque algunas etiquetas han sido eliminas, han sido implementadas otras que facilitan el uso de los servicios de la web y disminuyen el cdigo de la programacin Hace creer al usuario que esta trabajando en un equipo local aunque la pagina se encuentre alojada en un servidor remoto.

    You might also like