Descargar para leer sin conexión
Html5 tecweb
- 1. HTML 5 “Diferencias, compatibilidadcon navegadores y dispositivos móviles”
- 2.
- 3. Quinta revisión dela del lenguaje básico de World Wide Web HTML Experimental Alto Potencial Navegadores Actualizados Experimental
- 4.
- 5. Elementos Nuevo Doctype <Script>,<Ink> más simples Las Comillas en HTML5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Ya no es necesario usar el atributo Type Ya no es necesario declarar atributos entre 1.0 Transitional//EN" cuando llamas archivos .CSS ó .JS comillas "http://www.w3.org/TR/xhtml1/DTD/xhtml1- <link rel="stylesheet" href="estilos.css" transitional.dtd"> type="text/css" /> <p class=parrafo id=contenido>Lorem <!DOCTYPE <script type="text/javascript" ipsum dolor sit amet</p> html> src="funciones.js"></script> Aún es necesario declarar rel en caso de los estilos <link rel="stylesheet" href="estilos.css" /> <script src="funciones.js"></script> Placeholders en campos Elementos mas semánticos Contenido Editabe <header> Un place holder de Texto ya existe en es el texto que Se puede lograr el cambio que cualquier un campo de texto cuando no estan <div class="header"> elemento que contenga textos sea editable activos, antes era necesario usar Javascript </div> < / desde el navegador para lograr esto, ahora casi todos los header> <p contenteditable="true"> <div class="nav"> <nav> navegodores soportan esto nativamente </div> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud con HTML5. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure </nav> dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <input name="username" type="text" <div class="content"> <section> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. placeholder="Ingrese su username" /> </div> < / </p.> <div class="sidebar"> section> </div> <aside> </aside>
- 6. Autofocus Tipos especificos de campos Validación Nativa de Formulario En HTML5 podemos declarar un atributo required Esta facultad hace que al cargar la página, Si decalramos type= “number” a un campo en los campos el foco del usuario se concentre en el de texto este solo permitira el ingreso de del formulario que sean obligatorios de rellenar. campo deseado. numeros < f o r m method="post" <input type="text" autofocus> <form> action=""> <button>Buscar</button> <input type="number" /> <input <button type="text" type="submit">Enviar</ required> button> <button>Envi </form> ar</button> </form> Lo mismo para fechas <form> <input type="date" /> <button type="submit">Enviar</ button> </form>
- 7. Canvas Sin duda algunauno de los elementos mas interesantes de HTML5, CANVAS es un plano vacio donde podemos dibujar graficos con la ayuda de JavaScript <!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>
- 8.
- 9. Elementos <canvas> poniendo Continuo Progreso Síntaxis Simplificada en su lugar a flash Si bien esta claro el hecho de tener una web La declaración de tipo de documento de maquetada en HTML4 nos permite contar con un forma más sencilla es sólo una de las HTML5 trata a Flash; pero es cierto que estándar de soluciones ya que HTML4 tiene a muchas novedades de HTML5. Ahora solo para todos los demás usuarios que diferencia de HTML5 que esta aún en proceso tienes que escribir solamente: <DOCTYPE estamos cansados de los vídeos en flash experimental y de desarrollo, es muy probable HTML!>. La sintaxis de HTML5 es que tardan años en cargarse y funcionar, el que muchas cosas sigan cambiando con el compatible conHTML4 y XHTML1, pero no nuevo elemento <canvas> y su utilidad tiempo, y generando algunas dificultades, con SGML. para la representación de gráficos es un situación a la que ya no esta sujeto ningún sueño hecho realidad. producto web hecho en HTML4 Aunque es cierto que hasta hoy el elemento <canvas> no ofrece todas las ventajas de Flash hay mucho que hace suponer que se acerca el día en que esta herramienta quede obsoleta ante el potencial de HTML5 y su magnifica Nuevos elementos <header> Nuevos elementos <section> integración. <footer> <article> Nuevos elementos <menu> HTML5 esta desarrollado con la intención de reflejar mejor la nueva anatomía de los sitios web. Al igual que los elementos <header> y <footer>, el <section> y <article> en <figure> HTML5 permitirá a los desarrolladores El elemento nuevo <menu> puede ser Es por eso que hay algunos elementos nuevos, marcar estas áreas de la página como tal. utilizado no solo para los menús como <header> y <footer>, que están diseñados convencionales, sino también para las barras específicamente para marcar estas partes de la Además de hacer el código más estructurado, de herramientas y menús contextuales. web. este también tendrá un efecto positivo en tus Del mismo modo, el elemento <figure> es esfuerzos de SEO ya que para los motores de una forma adicional útil para organizar el Con este desarrollo en el lenguaje ya no es búsqueda será más fácil el ranking de tu texto y las imágenes en tu página. necesario identificar a estos dos elementos con la página. etiqueta <div>.
- 10. Nuevos elementos de Un nuevo nivel de Formas <audio> y <video> <form> y <forminput> vivieron una gran Son probablemente dos de las novedades más cantidad de revisiones y ahora tienen útiles para HTML5. Como su nombre indica, se muchos atributos nuevos (y los utilizan para insertar archivos de audio y vídeo. modificados, también). Si estás usando con frecuencia las formas tomate un tiempo También hay algunos nuevos elementos para revisar las novedades con más detalle. multimedia y atributos, tales como <track>, que ofrece pistas de texto para el elemento de vídeo. Eliminación <b> y <font> Eliminación <frame> <center> y <big> Etiquetas poco utilizadas, que benefician al Las directrices oficiales indican que estos tener menos nomenclatura inútil. elementos se manejan mejor en CSS.
- 11.
- 17.
- 18. Ningún navegador es100% compatible aún, por lo cual se realizó una prueba en la página: http://www.html5test.com evaluando 400 puntos de compatibilidad, estos son los resultados: Chrome14.0: 340 Safari 6.0: 376 Mozilla Firefox 7.0: 313 Internet Explorer: 32
- 19. En la páginaalfamedia web, especializada en Desarrollo y consultaría para Web, realizaron también otras pruebas. 1. Google Chrome 328 pts. 2. Firefox 286 pts 3. Opera 278 pts 4. Safari 253 pts 5. Internet Explorer 141 pts
- 20.
- 21. Esta gráfica muestrala preferencia de navegadores desde Mayo 2011 hasta Abril 2012, siendo Internet Explorer el número uno hasta la fecha.
- 22. DIEGO LIRA MIRYAM BARAJAS ANAHÍ RAMÍREZ CARLOS MORALES JUAN JOSÉ SÁNCHEZ ESTEFANÍA FONSECA