nuevo!!! en html 5
TRANSCRIPT
HTML ha estado en constante evolución desde que se
introdujo a la Internet a principios de 1990. Algunas
características fueron introducidas en las especificaciones,
mientras que otros se introdujeron en versiones de
software. En algunos aspectos, las implementaciones y
prácticas autor han convergido entre sí y con las
especificaciones y normas, pero en otros aspectos, siguen
divergiendo.
INTRODUCCION A HTML
1990
HTML 4 se convirtió en una Recomendación del W3C en 1997. A pesar de que continúa sirviendo como una guía aproximada de muchas de las características básicas de HTML, que no proporciona suficiente información para construir implementaciones que interactúan entre sí y, lo más importante, con una masa crítica de contenido desplegado. Lo mismo ocurre con XHTML1, que define una serialización XML para HTML 4 y DOM Level 2 HTML, que define las API de JavaScript para HTML y XHTML. [ HTML4 ] [ XHTML1 ] [ DOM2HTML ]
HTML 4 A HTML 5
Que es HTML 5 ?
HTML 5, un lenguaje que ha ido evolucionando
desde 2008 como sucesor de Flash. A finales de
2011, Adobe anunció que no habría más versiones
de Flash para móviles, lo que animaba aun mas a
las grandes empresas a impulsar HTML5 como
estándar en la web.
Porque HTML5 esta sustituyendo a Flash
Normalmente, HTML y Flash suelen compararse como dos lenguajes de programación distintos, cuando en realidad no es así. A diferencia de HTML, Flash no es un lenguaje libre, sino un entorno de desarrollo multimedia, siendo muy agradable para los programadores. Así, puede reproducir vídeo en un determinado formato en cualquier navegador que le de soporte de manera rápida y sencilla.
Sin embargo, a medida que aumentan los usuarios de dispositivos móviles, las posibilidades de Flash se ven cada vez más reducidas. De hecho, lo que resulta extraño es que a pesar de los millones de usuarios de móviles que ya hay, no haya ya una solución a esta dichosa incompatibilidad. ¿No estáis cansados de entrar en una página con el móvil o la tablet y no poder visualizar algún vídeo o aplicación interna?
Porque HTML5 esta sustituyendo a
Flash
Hay que resaltar que Flash no está muerto aún, sino que más bien ha visto redefinido su concepto. Ahora, se enfoca más a los juegos y algunas aplicaciones específicas, por lo que deja de tener el peso de antes en la web. Por tanto se hace oportuno, de una vez por todas, el cambio a otro sistema que mayor compatibilidad y versatilidad.
HTML5 proporciona todas las utilidades necesarias para el desarrollo de la nueva Web, ofreciendo soporte a cualquier tipo de dispositivo móvil o desktop.
PORQUE CAMBIAR FLASH POR HTML 5
Las reglas básicas que se plantearon a la hora de actualizar a HTML 5 fueron:
Basarse en HTML, CSS, DOM y Javascript.
Reducir la necesidad del uso de plugins, como por ejemplo flash.
Mejorar el tratamiento de errores.
Crear etiquetas que reemplacen el uso de scripts.
Lenguaje que pueda utilizarse en cualquier tipo de dispositivo, como móviles, PDA's, etc.
Eliminación de etiquetas y atributos obsoletos o no deseables
NOVEDADES DE HTML 5
Los atributos de formato de muchas etiquetas han sido eliminados. Deben definirse en los estilos CSS. Así, se pretende separar el formato del contenido definitivamente. Prácticas que hasta ahora eran desaconsejadas, como el atributo background de <body> o los atributos align y border, pasan a estar prohibidas. Algunos ejemplos más son los atributos cellpadding, cellspacing de las tablas, o las etiquetas <u>, <font>, <center> o <strike>.
Se han eliminado etiquetas problemáticas como <frame>. Para mostrar una página dentro de otra se deberá utilizar <iframe>.
También se eliminan otras etiquetas que habían caido en el desuso porque son perfectamente reemplazables, como <dir> (que no es más que un <ul>) o <applet> (se utiliza <embed>).
Eliminación de etiquetas
Lo primero que esta en toda pagina web, el doctype, es hora ya de cambiar ese antiguo, largo e inmemorizable doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
10 NOVEDADES DE HTML 5 1 - Nuevo Doctype
En HTML5 ya no es necesario usar el atributo type cuando llamamos archivos .css o .js:
<link rel="stylesheet" href="estilos.css" type="text/css" /> <script type="text/javascript" src=
"funciones.js"></script>
Sin embargo aun es necesario declarar un rel en el caso de los estilos:
<link rel="stylesheet" href="estilos.css" /> <script src="funciones.js"></script>
2 - Elementos <script> y <link> mas simples
En HTML5 ya no es necesario que los atributos de los elementos estén envueltos entre comillas, ahora podemos declararlos así:
<p class=parrafo id=contenido>Lorem ipsum dolor sit amet</p>
3- Las comillas en HTML5
<div class="header"> </div> <div class="nav"> </div> <div class="content"> </div> <div class="sidebar"> </div> <div class="footer"> </div>
4- Elementos mas semánticos
<header> </header> <nav> </nav> <section> </section> <aside> </aside> <footer> </footer>
Hay que notar que una pagina web puede tener multiples de estos elementos, por ejemplo puede haber un header para la pagina entera y un header para cada articulo en el caso de un blog y lo mismo con el footer. Nota: estos elementos no son soportados nativamente en navegadores antiguos como IE 6, 7 y 8, para hacer que sean compatibles puedes usar HTML5 Shiv, un minúsculo archivo JS que se encarga de ‘crear’ estos elementos que no existen en navegadores antiguos:
Ahora con HTML5 podemos hacer que cualquier elemento que contenga textos(párrafos, listas, títulos, etc) sea editable en el mismo navegador, por ejemplo un párrafo:
<p contenteditable="true"> La definición de literatura o texto literario surge de la combinación de estas dos palabras: arte y palabra escrita. Desde tiempos remotos, la humanidad ha buscado diversas formas de expresar sus ideas y sentimientos. La palabra escrita sin duda fue un pilar de esa manifestación. </p>
5- Contenido editable
Placeholders se les conoce al texto que se esta en los campos de textos cuando estos no están activos, antes de HTML5 habia que usar algo de Javascript para lograr este efecto, pero ahora ya casi todos los navegadores soportan esta nueva facultad:
<input name="username" type="text" placeholder="Ingrese su username" />
6- Placeholders en campos de textos
En HTML5 podemos declarar el atributo required en los campos de un formulario que queremos que sean obligatorios de rellenar:
<form method="post" action=""> <input type="text" required> <button>Enviar</button> </form> Este atributo es soportado solo por las ultimas versiones de navegadores.
7- Validación nativa en HTML5
HTML5 introduce tambien el atributo autofocus para campos de formulario, esta facultad hace que al cargar la pagina el foco del usuario se concentre en el campo de texto deseado, ideal para el campo de búsqueda de una pagina web:
<input type="text" autofocus> <button>Buscar</button>
8- Autofocus
Si declaramos type=”number” a un campo de texto, este solo permitira que se ingresen numeros: <form> <input type="number" /> <button type="submit">Enviar</button> </form>
Lo mismo para fechas:
<form> <input type="date" /> <button type="submit">Enviar</button> </form>
Y para URLs y emails:
<form> <input type="url" /> <input type="email" /> <button type="submit">Enviar</button> </form>
9- Tipos específicos de campos de formulario
Canvas, es sin duda alguna uno de los elementos mas interesantes que introduce HTML5, el canvas es un plano vacío en el cual podemos dibujar graficos con la ayuda de Javascript:
10- Canvas
<!DOCTYPE html> <html> <body> <canvas id="micanvas">Tu navegador no soporta canvas</canvas> <script type="text/javascript"> var canvas=document.getElementById('micanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#b8dc69'; ctx.fillRect(0,0,200,200); </script> </body> </html>
Arrastrar y soltar
Arrastrar y soltar es una característica muy común. Es cuando se "agarra" un objeto y arrastrarlo a una ubicación diferente.
En HTML5, arrastrar y soltar es parte de la norma, y cualquier elemento puede ser arrastrable.
HTML5: Arrastrar y soltar