• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html5 tecweb
 

Html5 tecweb

on

  • 502 views

Descripción de lo que es HTML 5, algunas de sus desventajas, ventajas y diferencias entre su versión anterior de que HTML4.

Descripción de lo que es HTML 5, algunas de sus desventajas, ventajas y diferencias entre su versión anterior de que HTML4.

Statistics

Views

Total Views
502
Views on SlideShare
502
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Html5 tecweb Html5 tecweb Presentation Transcript

  • HTML 5“Diferencias, compatibilidad con navegadores y dispositivos móviles”
  • ¿QUÉ ES HTML 5?
  • Quinta revisión de la del lenguaje básico de World Wide Web HTML Experimental Alto Potencial Navegadores Actualizados Experimental
  • NOVEDADES
  • 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 entre1.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>
  • Autofocus Tipos especificos de campos Validación Nativa de FormularioEn HTML5 podemos declarar un atributo required Esta facultad hace que al cargar la página, Si decalramos type= “number” a un campoen los campos el foco del usuario se concentre en el de texto este solo permitira el ingreso dedel 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>
  • CanvasSin duda alguna uno de los elementos mas interesantes de HTML5, CANVASes 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>
  • DIFERENCIAS
  • 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 magnificaNuevos 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>.
  • Nuevos elementos de Un nuevo nivel de Formas <audio> y <video> <form> y  <forminput> vivieron una granSon 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 losutilizan para insertar archivos de audio y vídeo. modificados, también). Si estás usando con  frecuencia las formas tomate un tiempoTambién hay algunos nuevos elementos para revisar las novedades con más detalle.multimedia y atributos, tales como <track>, queofrece 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.
  • ETIQUETAS ELIMINADAS
  • COMPATIBILIDAD
  • Ningún navegador es 100% compatibleaún, por lo cual se realizó una prueba en lapágina: http://www.html5test.com evaluando400 puntos de compatibilidad, estos son losresultados:Chrome14.0: 340Safari 6.0: 376Mozilla Firefox 7.0: 313Internet Explorer: 32
  • En la página alfamedia web, especializada en Desarrollo y consultaríapara Web, realizaron también otras pruebas.1. Google Chrome   328 pts.2. Firefox  286 pts3. Opera   278 pts4. Safari   253 pts5. Internet Explorer   141 pts
  • PREFERENCIAS
  • Esta gráfica muestra la preferencia de navegadores desde Mayo 2011hasta Abril 2012, siendo Internet Explorer el número uno hasta la fecha.
  • DIEGO LIRA MIRYAM BARAJAS ANAHÍ RAMÍREZ CARLOS MORALESJUAN JOSÉ SÁNCHEZESTEFANÍA FONSECA