SlideShare una empresa de Scribd logo
1 de 41
Descargar para leer sin conexión
Desarrollo de aplicaciones
con HTML5

www.chalalo.cl
www.chalalo.cl

chalalo@hotmail.com
• Qué es HTML5
• Algunas nuevas características que podemos ocupar
  hoy
• Tags Semánticos en reemplazo de elementos
  genéricos
• Desarrolla para HTML5, manteniendo la
  compatibilidad con Browser Antiguos
• Nuevos aspectos de CSS3 con IE10
• Las herramientas que ayudan en el aprovechamiento
  de características de HTML5
• Que debemos conocer primero?
¿Qué es “HTML5”?
  HTML5 es el futuro de la Web


  HTML5 no es (únicamente) un mensaje de Mercadotecnia


  HTML5 no está completo, todavía.


  HTML5 es muy grande: probarlo no es sencillo


  HTML5 necesita hacerse de la manera correcta
Nuevas etiquetas semánticas para enriquecer la
experiencia.


Agrega soporte a más medios y gráficos ricos.


CSS3 permite una gran gama de efectos y estilos.


Rendimiento mejorado por aceleración por hardware
Mapa de “HTML5”
Desarrollo de aplicaciones con HTML5
Geolocation
                                ECMA
HTML   CSS   Web Apps   SVG
HTML5 en IE9
                                                     http://bit.ly/IE9Guide
     HTML5                 CSS3                SVG                Others
• New Markup       •   2D Transforms     • Shapes           • ECMA Script 5 (all
  Elements                                                    but Strict Mode)
                   •   Border Radius     • Clipping,
                                                            • Native JSON
• Canvas           •   Box-Shadow          Masking, and
                                                              support (IE8)
• Audio            •   Fonts (WOFF)        Compositing
                                                            • Performance API
• Video            •   Media Queries     • Transforms       • Geo-Location
• Local Storage    •   Multiple          • Extensibility    • Data-uri (IE8)
• Cross-Window         Backgrounds       • Gradients        • DOM L2, L3
  Messaging        •   Namespaces        • Interactivity    • Selectors API L2
• Text Selection                         • Linking and      • AJAX Navigation
                   •   Opacity
                                                              (IE8)
  APIs             •   rgba(), hsl(),      Views
                                                            • DOMParser and
• Parsing SVG in       hsla()            • Painting and       XMLSerializer
  HTML             •   Selectors (IE8)     Colors           • ICC v2 and Color
                                         • Paths              Profile
                                         • Text             • ARIA

                            Hardware Acceleration
Microsoft & HTML5




beautyoftheweb.com ietestdrive.com   html5labs.com
http://www.cuttherope.ie/   Microsoft Confidential 11
Tag Semánticos
HTML Tags
<div id=”header”>

<div id=”nav”>




<div
                    <div id=”article”>
id=”sidebar”>




<div id=”footer”>
Elementos Semánticos
Proveer de significado a la estructura, semánticos son fuentes y el centro
de HTML5

 <section>
    Similar al tradicional div pero especificando contenido relacionado
     Contenedor de Navegación
 <article>
     Contenido que está completo dentro de sí mismo, con un encabezado,
      contenido, etc.
 <aside>
     Para material tengible o parte de un artículo
 <header> and <footer>
     Puede ser usado como un elemento de la página, una sección, artículo etc.
 <hgroup>
     Contiene una colleción de uno o más elementos tipo <h1>, <h2>, etc.
HTML Tags Semánticos
<header>

<nav>




           <section>
 <aside>
              <article>




<footer>
CSS3 Media Queries
  Estilo de páginas selectivas basadas en las propiedades del medio
   de entrega




<link href=“mobile.css" rel="stylesheet"
  media="screen and (max-width:480px)" type=“text/css" />

<link href=“netbook.css" rel="stylesheet"
  media="screen and (min-width:481px) and (max-width:1024px)"
  type="text/css" />

<link href=“laptop.css" rel="stylesheet"
  media="screen and (min-width:1025px)" type="text/css" />

 16
HTML5 <video>
  Soporte para el elemento <video> en HTML5

        Formato Estándar de la Industria MPEG-4/H.264 video
        El Video puede ser compuesto con cualquier otro elemento de la página
        Contenidos HTML, imágenes, gráficos SVG
        Aceleración por Hardware, decodificación basada en GPU



<video src="video.mp4" id="videoTag">
  <source src="video.webm" />
  <span>Sad Panda!<br />
  ¡Tu navegador no soporta video HTML!…</span>
  <!– Puedes pegar Flash or Video Silverlight Aquí -->
</video>


17
Microsoft Confidential 18
HTML5 <audio>                                                 http://html5beats.com
 Soporte para el elemento HTML5 <audio>
        Estándar de la Industria es MP3 y AAC audio
        Completamente programable via el DOM

 Atributos
          src – especifica la ubicación del archivo fuente
          autoplay – se ejecuta tan pronto termine la carga
          controls – si es necesario utilizar controles de video
          preload – si se necesita ir cargandolo mientras se despliega la carga de página


 <audio src="audio.mp3" id="audioTag" autoplay controls>
   <!-- ¡Tu navegador no soporta audio! -->
   <!–- Puedes pegar audio de Flash o Silverlight aquí -->
 </audio>



  19
Geo-Localización
 Permite que los sitios Web usen la ubicación para mejorar los servicios

       Requiere el consentimiento del usuario
       Navigator.geolocation.getCurrentPosition();



 function getLocation() {
   if (navigator.getlocation != undefined) {
     navigator.getlocation.getCurrentPosition(callBack);
   }
 }

 function callBack(position) {
   var accuracy = position.coords[accuracy];
   var latitude = position.coords[latitude];
   var longitude = position.coords[longitude];
 }
 20
CSS3 Fondos & Bordes
  Esquinas redondeadas con la propiedad border-radius
  Mutiples imágenes de fondo por elemento
  Propiedad box-shadow en bloque de elementos


div {
 border-radius: 152px 304px 228px 152px;
 border-style: double;
 border-width: 42px;
 padding: 12px;
}




21
WOFF Fonts & @font-face
 No más limitantes a utilizar una lista de fuentes “seguras”!
 Web Open Font Format permite empaquetar y entregar las fuentes
  necesitadas por sitio

    Diseñado para el uso Web a través de la declaración @font-face
    Un simple re-empaquetamiento de datos de fuentes OpenType o TrueType
    Recomendación del grupo de trabajo W3C Fonts


<style type="text/css">
   @font-face {
    font-family:MyFontName;
    src: url('FontFile.woff');
 }
</style>

<div style="font: 24pt MyFontName, sans-serif;">
    Esto desplegará usando MyFontName de FontFile.woff
</div>
 22
Canvas
  Un boque de elementos que permiten a los desarrolladores dibujar
   gráficos 2D utilizando JavaScript.

     Algunos métodos para dibujar son: paths, boxes, circles, text and
      rasterized images



<canvas id="myCanvas" width="200" height="200">
  ¡Tu navegador no soporta Canvas!
</canvas>

<script type="text/javascript">
    var example = document.getElementById("myCanvas");
    var context = example.getContext("2d");
    context.fillStyle = "rgb(255,0,0)";
    context.fillRect(30, 30, 50, 50);
</script>
 23
Scalable Vector Graphics (SVG)
  Crear y dibujar gráficas vectoriales en 2D usando XML

      Las imágenes vectoriales compuestas por formas en vez de pixeles.
      Basado en SVG 1.1 2a edición – especificación completa

  Soporte para:

      DOM tenga acceso completo a los elementos SVG
      Document structure, scripting, styling, paths, shapes, colors, transforms,
       gradients, patterns, masking, clipping, markers, linking and views

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect fill="red" x="20" y="20" width="100" height="75" />
    <rect fill="blue" x="50" y="50" width="100" height="75" />
</svg>



24
http://www.modernizr.com/
      No se detecta HTML5.
Se detectan cualidades de HTML5.

                           Microsoft Confidential 25
Desarrollo de aplicaciones con HTML5
Polyfills & Shims
Desarrollo de aplicaciones con HTML5
http://www.caniuse.com

www.html5readiness.com

 www.mobilehtml5.org


                     Microsoft Confidential 29
− WebMatrix




              Microsoft Confidential 30
Adoptar




Experimentar

               Microsoft Confidential 31
Soporte para varias propiedades CSS3
(multicolumna, cuadrícula, caja flexible, degradados),
 además del modo estricto ECMAScript5.
Mejoras en el soporte de HTML5.

Soporte para positioned floats, arrastrar y soltar,
API de archivos de HTML5,
caja de arena (sandbox) HTML5, HTML5 Web Workers.
Transformaciones CSS en 3D, sombra de texto en CSS,
efectos de filtro SVG, comprobación de ortografía,
autocorrección, almacenamiento local de datos con
IndexedDB y caché de aplicaciones HTML5, Web Sockets,
así como pestañas en modo InPrivate

                                                   Microsoft Confidential 32
Limitaciones en HTTP
 HTTP es un protocolo request-reply




Las aplicaciones hoy usan workarounds para permitir push
Modelos Actuales
Polling Periódico




  El navegador usa XmlHttpRequest para
  consultar periódicamente al servidor
Modelos Actuales
Long Polling




  − El Servidor mantiene la solicitud HTTP hasta que
    hay información para devolver
  − El Client envía una nueva solicitud al terminar la
    anterior
WebSockets
− Tecnología interoperable nueva, bajo
  estandarización
− Socket bidireccional Full Duplex
− API Javascript W3C
− Secure (SSL)
− Alta performance
− Conexiones cross dominio
Soporte JavaScript
function WebSocketTest()
{
    if ("WebSocket" in window)
    {   alert("WebSocket esta soportado! Wooooo!!!!");
        var ws = new WebSocket("ws://localhost:9998/echo");
        ws.onopen = function()
        {
             ws.send(“Mensaje a enviar");
             alert(“Mensaje fue enviado...");
        };
        ws.onmessage = function (evt)
        {
             var received_msg = evt.data;
             alert("Mensaje Recibido...");
        };
        ws.onclose = function()
        {
            alert(“La Conexión está cerrada...");
        };
    }
    else
    {         alert("WebSocket no esta soportado por tu browser!");
    }
}
var file = document.getElementById('file').files[0];
document.getElementById('name').textContent = file.fileName;
document.getElementById('size').textContent = file.fileSize;

var reader = new FileReaderDraft();
reader.readAsText(file);




                                                   Microsoft Confidential 38
blogs.msdn.com/IE
                www.beautyoftheweb.com
                  www.ietestdrive.com
            www.html5labs.com




@freddier
www.chalalo.cl


                 Microsoft Confidential 40
Desarrollo de aplicaciones con HTML5

Más contenido relacionado

La actualidad más candente (20)

Curso html5-v1
Curso html5-v1Curso html5-v1
Curso html5-v1
 
Todo sobre HTML5
Todo sobre HTML5Todo sobre HTML5
Todo sobre HTML5
 
Introduccion html5
Introduccion html5Introduccion html5
Introduccion html5
 
HTML5 y CSS3: como sacarles partido hoy
HTML5 y CSS3: como sacarles partido hoyHTML5 y CSS3: como sacarles partido hoy
HTML5 y CSS3: como sacarles partido hoy
 
Introducción a Etiquetas HTML 5
Introducción a Etiquetas HTML 5Introducción a Etiquetas HTML 5
Introducción a Etiquetas HTML 5
 
Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011
 
Introducción HTML5 y CSS3
Introducción HTML5 y CSS3Introducción HTML5 y CSS3
Introducción HTML5 y CSS3
 
Elementos de html5 y css3
Elementos de html5 y css3Elementos de html5 y css3
Elementos de html5 y css3
 
Curso HTML 5 - Módulo 1
Curso HTML 5 - Módulo 1Curso HTML 5 - Módulo 1
Curso HTML 5 - Módulo 1
 
Ria 03-html5-css3
Ria 03-html5-css3Ria 03-html5-css3
Ria 03-html5-css3
 
Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3
 
Html5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoyHtml5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoy
 
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
 
HTML5 y CSS3
HTML5 y CSS3HTML5 y CSS3
HTML5 y CSS3
 
Nuevas etiquetas en HTML 5
Nuevas etiquetas en HTML 5Nuevas etiquetas en HTML 5
Nuevas etiquetas en HTML 5
 
Html+css 2013
Html+css 2013Html+css 2013
Html+css 2013
 
HTML5 y CSS3 ¿Imprescindibles?
HTML5 y CSS3 ¿Imprescindibles?HTML5 y CSS3 ¿Imprescindibles?
HTML5 y CSS3 ¿Imprescindibles?
 
Html 5 presente y futuro de la web
Html 5 presente y futuro de la webHtml 5 presente y futuro de la web
Html 5 presente y futuro de la web
 
HTML5
HTML5HTML5
HTML5
 
Maquetado con HTML y CSS
Maquetado con HTML y CSSMaquetado con HTML y CSS
Maquetado con HTML y CSS
 

Destacado

Html5 para móviles, las reglas no escritas
Html5 para móviles, las reglas no escritasHtml5 para móviles, las reglas no escritas
Html5 para móviles, las reglas no escritasCarlos Toxtli
 
HTML5: empieza hoy
HTML5: empieza hoyHTML5: empieza hoy
HTML5: empieza hoyMarta Armada
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbasAvanet
 
Taller IoT en la Actualidad
Taller IoT en la ActualidadTaller IoT en la Actualidad
Taller IoT en la ActualidadLaurence HR
 
05introduccionhtml 100901142734-phpapp02
05introduccionhtml 100901142734-phpapp0205introduccionhtml 100901142734-phpapp02
05introduccionhtml 100901142734-phpapp02SoftArt2014
 
Html 5 Guia Didactica
Html 5 Guia DidacticaHtml 5 Guia Didactica
Html 5 Guia DidacticaSoftArt2014
 
Logos, banners y fondos para sitios web
Logos, banners y fondos para sitios webLogos, banners y fondos para sitios web
Logos, banners y fondos para sitios webmireyacabreram
 
SEM - Search Engine Marketing / Mercadeo en búscadores
SEM - Search Engine Marketing / Mercadeo en búscadoresSEM - Search Engine Marketing / Mercadeo en búscadores
SEM - Search Engine Marketing / Mercadeo en búscadoresFrancisco Berrizbeitia
 
Crear banners en linea
Crear banners en lineaCrear banners en linea
Crear banners en lineainsutecvirtual
 
Tips Desarrollar y Gestionar Banners HTML5
Tips Desarrollar y Gestionar Banners HTML5Tips Desarrollar y Gestionar Banners HTML5
Tips Desarrollar y Gestionar Banners HTML5Diego Moya
 
Ines Angela Villa Diaz
Ines Angela Villa Diaz	Ines Angela Villa Diaz
Ines Angela Villa Diaz astrydquintero
 
Community Manager - Fundamentos
Community Manager - FundamentosCommunity Manager - Fundamentos
Community Manager - FundamentosUDECI
 

Destacado (16)

Html5 para móviles, las reglas no escritas
Html5 para móviles, las reglas no escritasHtml5 para móviles, las reglas no escritas
Html5 para móviles, las reglas no escritas
 
HTML5: empieza hoy
HTML5: empieza hoyHTML5: empieza hoy
HTML5: empieza hoy
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbas
 
Taller IoT en la Actualidad
Taller IoT en la ActualidadTaller IoT en la Actualidad
Taller IoT en la Actualidad
 
05introduccionhtml 100901142734-phpapp02
05introduccionhtml 100901142734-phpapp0205introduccionhtml 100901142734-phpapp02
05introduccionhtml 100901142734-phpapp02
 
Html 5 Guia Didactica
Html 5 Guia DidacticaHtml 5 Guia Didactica
Html 5 Guia Didactica
 
Logos, banners y fondos para sitios web
Logos, banners y fondos para sitios webLogos, banners y fondos para sitios web
Logos, banners y fondos para sitios web
 
Bocetos web
Bocetos webBocetos web
Bocetos web
 
SEM - Search Engine Marketing / Mercadeo en búscadores
SEM - Search Engine Marketing / Mercadeo en búscadoresSEM - Search Engine Marketing / Mercadeo en búscadores
SEM - Search Engine Marketing / Mercadeo en búscadores
 
Flash ejercicio
Flash ejercicioFlash ejercicio
Flash ejercicio
 
Crear banners en linea
Crear banners en lineaCrear banners en linea
Crear banners en linea
 
Webmaster
WebmasterWebmaster
Webmaster
 
Tips Desarrollar y Gestionar Banners HTML5
Tips Desarrollar y Gestionar Banners HTML5Tips Desarrollar y Gestionar Banners HTML5
Tips Desarrollar y Gestionar Banners HTML5
 
Problemas de mep
Problemas de mepProblemas de mep
Problemas de mep
 
Ines Angela Villa Diaz
Ines Angela Villa Diaz	Ines Angela Villa Diaz
Ines Angela Villa Diaz
 
Community Manager - Fundamentos
Community Manager - FundamentosCommunity Manager - Fundamentos
Community Manager - Fundamentos
 

Similar a Desarrollo de aplicaciones con HTML5

Aplicaciones en HTML 5: Los pilares de una Nueva Web
Aplicaciones en HTML 5: Los pilares de una Nueva WebAplicaciones en HTML 5: Los pilares de una Nueva Web
Aplicaciones en HTML 5: Los pilares de una Nueva WebGonzalo C.
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbasPeter Concha
 
Html5 - El futuro de la web
Html5 - El futuro de la webHtml5 - El futuro de la web
Html5 - El futuro de la webJoan Fernández
 
HTML5 en Acción
HTML5 en AcciónHTML5 en Acción
HTML5 en Accióndrarock
 
02. Interactuando con controles de UI
02. Interactuando con controles de UI02. Interactuando con controles de UI
02. Interactuando con controles de UIDanae Aguilar Guzmán
 
Web matrix. armando nuestros sitios dinámicamente con html5, php y mysql
Web matrix.  armando nuestros sitios dinámicamente con html5, php y mysqlWeb matrix.  armando nuestros sitios dinámicamente con html5, php y mysql
Web matrix. armando nuestros sitios dinámicamente con html5, php y mysqlPeter Concha
 
INTRODUCCION AL LA PROGRAMACION WEB.ppt
INTRODUCCION AL LA PROGRAMACION WEB.pptINTRODUCCION AL LA PROGRAMACION WEB.ppt
INTRODUCCION AL LA PROGRAMACION WEB.pptTIRZOANTONIOMEDINACA
 

Similar a Desarrollo de aplicaciones con HTML5 (20)

Aplicaciones en HTML 5: Los pilares de una Nueva Web
Aplicaciones en HTML 5: Los pilares de una Nueva WebAplicaciones en HTML 5: Los pilares de una Nueva Web
Aplicaciones en HTML 5: Los pilares de una Nueva Web
 
HTML5 + Asp.NET
HTML5 + Asp.NETHTML5 + Asp.NET
HTML5 + Asp.NET
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbas
 
Html5 - El futuro de la web
Html5 - El futuro de la webHtml5 - El futuro de la web
Html5 - El futuro de la web
 
HTML5 en Acción
HTML5 en AcciónHTML5 en Acción
HTML5 en Acción
 
Tecnologíahtml5
Tecnologíahtml5Tecnologíahtml5
Tecnologíahtml5
 
02. Interactuando con controles de UI
02. Interactuando con controles de UI02. Interactuando con controles de UI
02. Interactuando con controles de UI
 
Web matrix. armando nuestros sitios dinámicamente con html5, php y mysql
Web matrix.  armando nuestros sitios dinámicamente con html5, php y mysqlWeb matrix.  armando nuestros sitios dinámicamente con html5, php y mysql
Web matrix. armando nuestros sitios dinámicamente con html5, php y mysql
 
Introducción a HTML5
Introducción a HTML5Introducción a HTML5
Introducción a HTML5
 
Full-stack JavaScript: Desarrollo integral de aplicaciones Web con JavaScript
Full-stack JavaScript: Desarrollo integral de aplicaciones Web con JavaScriptFull-stack JavaScript: Desarrollo integral de aplicaciones Web con JavaScript
Full-stack JavaScript: Desarrollo integral de aplicaciones Web con JavaScript
 
Web2 Quiensomos
Web2 QuiensomosWeb2 Quiensomos
Web2 Quiensomos
 
ASP.NET MVC
ASP.NET MVCASP.NET MVC
ASP.NET MVC
 
INTRODUCCION AL LA PROGRAMACION WEB.ppt
INTRODUCCION AL LA PROGRAMACION WEB.pptINTRODUCCION AL LA PROGRAMACION WEB.ppt
INTRODUCCION AL LA PROGRAMACION WEB.ppt
 
Las Ventajas de usar HTML5 Y CSS3
Las Ventajas de usar HTML5 Y CSS3Las Ventajas de usar HTML5 Y CSS3
Las Ventajas de usar HTML5 Y CSS3
 
HTML5
HTML5HTML5
HTML5
 
Arquitectura
Arquitectura Arquitectura
Arquitectura
 
Aplicaciones móviles - HTML5
Aplicaciones móviles - HTML5Aplicaciones móviles - HTML5
Aplicaciones móviles - HTML5
 
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
 
Ejemplos de WCAG 2.0
Ejemplos de WCAG 2.0Ejemplos de WCAG 2.0
Ejemplos de WCAG 2.0
 
HTML5+CSS3 01
HTML5+CSS3 01HTML5+CSS3 01
HTML5+CSS3 01
 

Más de Gonzalo C.

Aspnetwebapi mongo
Aspnetwebapi mongoAspnetwebapi mongo
Aspnetwebapi mongoGonzalo C.
 
Web matrix 2_desarrollo_web_gratis_simple_abierto_todo_en_uno
Web matrix 2_desarrollo_web_gratis_simple_abierto_todo_en_unoWeb matrix 2_desarrollo_web_gratis_simple_abierto_todo_en_uno
Web matrix 2_desarrollo_web_gratis_simple_abierto_todo_en_unoGonzalo C.
 
Web matrix y j querymobile
Web matrix y j querymobileWeb matrix y j querymobile
Web matrix y j querymobileGonzalo C.
 
Web matrix session5
Web matrix session5Web matrix session5
Web matrix session5Gonzalo C.
 
Web matrix session4
Web matrix session4Web matrix session4
Web matrix session4Gonzalo C.
 
Web matrix session 3
Web matrix session 3Web matrix session 3
Web matrix session 3Gonzalo C.
 
Web matrix session2
Web matrix session2Web matrix session2
Web matrix session2Gonzalo C.
 
Web matrix session1
Web matrix session1Web matrix session1
Web matrix session1Gonzalo C.
 
Ppt workshop ie9
Ppt workshop ie9Ppt workshop ie9
Ppt workshop ie9Gonzalo C.
 
Web matrix razor_aspnetmvc_finalv2_techdays2010
Web matrix razor_aspnetmvc_finalv2_techdays2010Web matrix razor_aspnetmvc_finalv2_techdays2010
Web matrix razor_aspnetmvc_finalv2_techdays2010Gonzalo C.
 
Máxima potencia en el desarrollo de sitios web
Máxima potencia en el desarrollo de sitios webMáxima potencia en el desarrollo de sitios web
Máxima potencia en el desarrollo de sitios webGonzalo C.
 
C:\fakepath\optimizacion
C:\fakepath\optimizacionC:\fakepath\optimizacion
C:\fakepath\optimizacionGonzalo C.
 
Asp.Net 4.0 Roadmap
Asp.Net 4.0 RoadmapAsp.Net 4.0 Roadmap
Asp.Net 4.0 RoadmapGonzalo C.
 
Aspnet Futures Msdn
Aspnet Futures MsdnAspnet Futures Msdn
Aspnet Futures MsdnGonzalo C.
 

Más de Gonzalo C. (18)

Charla ie
Charla ieCharla ie
Charla ie
 
Tips aspnet
Tips aspnetTips aspnet
Tips aspnet
 
Aspnetwebapi mongo
Aspnetwebapi mongoAspnetwebapi mongo
Aspnetwebapi mongo
 
1032513010
10325130101032513010
1032513010
 
Web matrix 2_desarrollo_web_gratis_simple_abierto_todo_en_uno
Web matrix 2_desarrollo_web_gratis_simple_abierto_todo_en_unoWeb matrix 2_desarrollo_web_gratis_simple_abierto_todo_en_uno
Web matrix 2_desarrollo_web_gratis_simple_abierto_todo_en_uno
 
Asp.net html5
Asp.net html5Asp.net html5
Asp.net html5
 
Web matrix y j querymobile
Web matrix y j querymobileWeb matrix y j querymobile
Web matrix y j querymobile
 
Web matrix session5
Web matrix session5Web matrix session5
Web matrix session5
 
Web matrix session4
Web matrix session4Web matrix session4
Web matrix session4
 
Web matrix session 3
Web matrix session 3Web matrix session 3
Web matrix session 3
 
Web matrix session2
Web matrix session2Web matrix session2
Web matrix session2
 
Web matrix session1
Web matrix session1Web matrix session1
Web matrix session1
 
Ppt workshop ie9
Ppt workshop ie9Ppt workshop ie9
Ppt workshop ie9
 
Web matrix razor_aspnetmvc_finalv2_techdays2010
Web matrix razor_aspnetmvc_finalv2_techdays2010Web matrix razor_aspnetmvc_finalv2_techdays2010
Web matrix razor_aspnetmvc_finalv2_techdays2010
 
Máxima potencia en el desarrollo de sitios web
Máxima potencia en el desarrollo de sitios webMáxima potencia en el desarrollo de sitios web
Máxima potencia en el desarrollo de sitios web
 
C:\fakepath\optimizacion
C:\fakepath\optimizacionC:\fakepath\optimizacion
C:\fakepath\optimizacion
 
Asp.Net 4.0 Roadmap
Asp.Net 4.0 RoadmapAsp.Net 4.0 Roadmap
Asp.Net 4.0 Roadmap
 
Aspnet Futures Msdn
Aspnet Futures MsdnAspnet Futures Msdn
Aspnet Futures Msdn
 

Desarrollo de aplicaciones con HTML5

  • 1. Desarrollo de aplicaciones con HTML5 www.chalalo.cl
  • 3. • Qué es HTML5 • Algunas nuevas características que podemos ocupar hoy • Tags Semánticos en reemplazo de elementos genéricos • Desarrolla para HTML5, manteniendo la compatibilidad con Browser Antiguos • Nuevos aspectos de CSS3 con IE10 • Las herramientas que ayudan en el aprovechamiento de características de HTML5 • Que debemos conocer primero?
  • 4. ¿Qué es “HTML5”? HTML5 es el futuro de la Web HTML5 no es (únicamente) un mensaje de Mercadotecnia HTML5 no está completo, todavía. HTML5 es muy grande: probarlo no es sencillo HTML5 necesita hacerse de la manera correcta
  • 5. Nuevas etiquetas semánticas para enriquecer la experiencia. Agrega soporte a más medios y gráficos ricos. CSS3 permite una gran gama de efectos y estilos. Rendimiento mejorado por aceleración por hardware
  • 8. Geolocation ECMA HTML CSS Web Apps SVG
  • 9. HTML5 en IE9 http://bit.ly/IE9Guide HTML5 CSS3 SVG Others • New Markup • 2D Transforms • Shapes • ECMA Script 5 (all Elements but Strict Mode) • Border Radius • Clipping, • Native JSON • Canvas • Box-Shadow Masking, and support (IE8) • Audio • Fonts (WOFF) Compositing • Performance API • Video • Media Queries • Transforms • Geo-Location • Local Storage • Multiple • Extensibility • Data-uri (IE8) • Cross-Window Backgrounds • Gradients • DOM L2, L3 Messaging • Namespaces • Interactivity • Selectors API L2 • Text Selection • Linking and • AJAX Navigation • Opacity (IE8) APIs • rgba(), hsl(), Views • DOMParser and • Parsing SVG in hsla() • Painting and XMLSerializer HTML • Selectors (IE8) Colors • ICC v2 and Color • Paths Profile • Text • ARIA Hardware Acceleration
  • 10. Microsoft & HTML5 beautyoftheweb.com ietestdrive.com html5labs.com
  • 11. http://www.cuttherope.ie/ Microsoft Confidential 11
  • 13. HTML Tags <div id=”header”> <div id=”nav”> <div <div id=”article”> id=”sidebar”> <div id=”footer”>
  • 14. Elementos Semánticos Proveer de significado a la estructura, semánticos son fuentes y el centro de HTML5  <section>  Similar al tradicional div pero especificando contenido relacionado  Contenedor de Navegación  <article>  Contenido que está completo dentro de sí mismo, con un encabezado, contenido, etc.  <aside>  Para material tengible o parte de un artículo  <header> and <footer>  Puede ser usado como un elemento de la página, una sección, artículo etc.  <hgroup>  Contiene una colleción de uno o más elementos tipo <h1>, <h2>, etc.
  • 15. HTML Tags Semánticos <header> <nav> <section> <aside> <article> <footer>
  • 16. CSS3 Media Queries  Estilo de páginas selectivas basadas en las propiedades del medio de entrega <link href=“mobile.css" rel="stylesheet" media="screen and (max-width:480px)" type=“text/css" /> <link href=“netbook.css" rel="stylesheet" media="screen and (min-width:481px) and (max-width:1024px)" type="text/css" /> <link href=“laptop.css" rel="stylesheet" media="screen and (min-width:1025px)" type="text/css" /> 16
  • 17. HTML5 <video>  Soporte para el elemento <video> en HTML5  Formato Estándar de la Industria MPEG-4/H.264 video  El Video puede ser compuesto con cualquier otro elemento de la página  Contenidos HTML, imágenes, gráficos SVG  Aceleración por Hardware, decodificación basada en GPU <video src="video.mp4" id="videoTag"> <source src="video.webm" /> <span>Sad Panda!<br /> ¡Tu navegador no soporta video HTML!…</span> <!– Puedes pegar Flash or Video Silverlight Aquí --> </video> 17
  • 19. HTML5 <audio> http://html5beats.com  Soporte para el elemento HTML5 <audio>  Estándar de la Industria es MP3 y AAC audio  Completamente programable via el DOM  Atributos  src – especifica la ubicación del archivo fuente  autoplay – se ejecuta tan pronto termine la carga  controls – si es necesario utilizar controles de video  preload – si se necesita ir cargandolo mientras se despliega la carga de página <audio src="audio.mp3" id="audioTag" autoplay controls> <!-- ¡Tu navegador no soporta audio! --> <!–- Puedes pegar audio de Flash o Silverlight aquí --> </audio> 19
  • 20. Geo-Localización  Permite que los sitios Web usen la ubicación para mejorar los servicios  Requiere el consentimiento del usuario  Navigator.geolocation.getCurrentPosition(); function getLocation() { if (navigator.getlocation != undefined) { navigator.getlocation.getCurrentPosition(callBack); } } function callBack(position) { var accuracy = position.coords[accuracy]; var latitude = position.coords[latitude]; var longitude = position.coords[longitude]; } 20
  • 21. CSS3 Fondos & Bordes  Esquinas redondeadas con la propiedad border-radius  Mutiples imágenes de fondo por elemento  Propiedad box-shadow en bloque de elementos div { border-radius: 152px 304px 228px 152px; border-style: double; border-width: 42px; padding: 12px; } 21
  • 22. WOFF Fonts & @font-face  No más limitantes a utilizar una lista de fuentes “seguras”!  Web Open Font Format permite empaquetar y entregar las fuentes necesitadas por sitio  Diseñado para el uso Web a través de la declaración @font-face  Un simple re-empaquetamiento de datos de fuentes OpenType o TrueType  Recomendación del grupo de trabajo W3C Fonts <style type="text/css"> @font-face { font-family:MyFontName; src: url('FontFile.woff'); } </style> <div style="font: 24pt MyFontName, sans-serif;"> Esto desplegará usando MyFontName de FontFile.woff </div> 22
  • 23. Canvas  Un boque de elementos que permiten a los desarrolladores dibujar gráficos 2D utilizando JavaScript.  Algunos métodos para dibujar son: paths, boxes, circles, text and rasterized images <canvas id="myCanvas" width="200" height="200"> ¡Tu navegador no soporta Canvas! </canvas> <script type="text/javascript"> var example = document.getElementById("myCanvas"); var context = example.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); </script> 23
  • 24. Scalable Vector Graphics (SVG)  Crear y dibujar gráficas vectoriales en 2D usando XML  Las imágenes vectoriales compuestas por formas en vez de pixeles.  Basado en SVG 1.1 2a edición – especificación completa  Soporte para:  DOM tenga acceso completo a los elementos SVG  Document structure, scripting, styling, paths, shapes, colors, transforms, gradients, patterns, masking, clipping, markers, linking and views <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"> <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /> </svg> 24
  • 25. http://www.modernizr.com/ No se detecta HTML5. Se detectan cualidades de HTML5. Microsoft Confidential 25
  • 30. − WebMatrix Microsoft Confidential 30
  • 31. Adoptar Experimentar Microsoft Confidential 31
  • 32. Soporte para varias propiedades CSS3 (multicolumna, cuadrícula, caja flexible, degradados), además del modo estricto ECMAScript5. Mejoras en el soporte de HTML5. Soporte para positioned floats, arrastrar y soltar, API de archivos de HTML5, caja de arena (sandbox) HTML5, HTML5 Web Workers. Transformaciones CSS en 3D, sombra de texto en CSS, efectos de filtro SVG, comprobación de ortografía, autocorrección, almacenamiento local de datos con IndexedDB y caché de aplicaciones HTML5, Web Sockets, así como pestañas en modo InPrivate Microsoft Confidential 32
  • 33. Limitaciones en HTTP HTTP es un protocolo request-reply Las aplicaciones hoy usan workarounds para permitir push
  • 34. Modelos Actuales Polling Periódico El navegador usa XmlHttpRequest para consultar periódicamente al servidor
  • 35. Modelos Actuales Long Polling − El Servidor mantiene la solicitud HTTP hasta que hay información para devolver − El Client envía una nueva solicitud al terminar la anterior
  • 36. WebSockets − Tecnología interoperable nueva, bajo estandarización − Socket bidireccional Full Duplex − API Javascript W3C − Secure (SSL) − Alta performance − Conexiones cross dominio
  • 37. Soporte JavaScript function WebSocketTest() { if ("WebSocket" in window) { alert("WebSocket esta soportado! Wooooo!!!!"); var ws = new WebSocket("ws://localhost:9998/echo"); ws.onopen = function() { ws.send(“Mensaje a enviar"); alert(“Mensaje fue enviado..."); }; ws.onmessage = function (evt) { var received_msg = evt.data; alert("Mensaje Recibido..."); }; ws.onclose = function() { alert(“La Conexión está cerrada..."); }; } else { alert("WebSocket no esta soportado por tu browser!"); } }
  • 38. var file = document.getElementById('file').files[0]; document.getElementById('name').textContent = file.fileName; document.getElementById('size').textContent = file.fileSize; var reader = new FileReaderDraft(); reader.readAsText(file); Microsoft Confidential 38
  • 39. blogs.msdn.com/IE www.beautyoftheweb.com www.ietestdrive.com www.html5labs.com @freddier
  • 40. www.chalalo.cl Microsoft Confidential 40

Notas del editor

  1. When looked at together, they provide us as developers with new support for rich graphics and media, new JavaScript and DOM functionality to provide advanced programmability and standardize behavior within the browsers.So what’s in HTML5?Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, enabling a more useful, data driven web for both programs and your usersAudio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites, without the need for plug-ins.CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before.Make your web app, and the web, faster with a variety of techniques and technologies, including hardware accelerated HTML5.HTML5 gives us the tools that we need to take our web applications to the next level.
  2. Building a standard is like planning a building. You go through different steps and it’s important to plan all levels carefully – or you risk to hit issues along the road.
  3. If we look at the broad spectrum, today there are more than 100 specifications that fall under the “HTML5” umbrella. As you can see, all of them follow a different status.Some of them are mature (Recommendation), some are still work in progress (Working Draft) and some just submitted (First Published WD)As we will see later, with Internet Explorer we wanted to provide an interoperable implementation of these standards – with clear expectations and deliverables for the developer community.
  4. A “semantic” element in this context is defined as one whose tag name describes its content, but which does not have any special behaviors. Semantic tags can be especially helpful for accessibility. By default, the elements are now styled as specified in the HTML5 specification.http://ie.microsoft.com/testdrive/HTML5/Forms/Default.htmlMVC4 – Layout &amp; Modernizer
  5. The CSS3 Media Queries Module specifies methods to enable web developers to scope a style sheet to a set of precise device capabilities. For instance, you might want to design pages differently for users browsing on a mobile device (that has a tiny screen, limited color palette, low resolution, and so on) versus a netbook (that has a small screen, full color palette, high resolution, and so on) versus a standard computer (with a large screen, full color palette, high resolution, and so on). The full list of media properties supported by CSS3 media queries includes width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, and resolution.Demos From IETestDrive.comhttp://ie.microsoft.com/testdrive/HTML5/85CSS3_MediaQueries/Default.htmlhttp://www.designmadeingermany.de/magazin/5/
  6. One of the most anticipated HTML5 features is the &lt;video&gt; tag. Now with Internet Explorer 9, developers can now include video on their page without having to resort to Flash or Silverlight. Just like you’d include an &lt;img&gt; tag on your page, you can include video in the same manner. Internet Explorer 9 supports videos encoded with the industry standard H.264 video codec. It’s the same video codec used by YouTube and many other sites as the primary video format. Most devices that record video, like point and shoot cameras encode with the H.264 codec, making it super easy for folks to put video on the web. Because Internet Explorer 9 uses the GPU to decode the video instead of the CPU, the performance is fantastic. Demo From IETestDrive.comhttp://ie.microsoft.com/testdrive/Graphics/VideoPanorama/Default.html
  7. Like the HTML5 &lt;video&gt; element, the &lt;audio&gt; element allows designers and developers to embed sounds on their sites without having to rely on Flash or Silverlight. The &lt;audio&gt; tag supports industry standard codecs like MP3 and AAC. In the same way the &lt;video&gt; element is scriptable, so is the &lt;audio&gt; tag, allowing you to script the object.Demo From IETestDrive.comhttp://html5beats.com/
  8. With support for geolocation, Internet Explorer 9 RC enables a web application to access the current geographical location of the PC running Internet Explorer, as specified in the Geolocation API specification. The webpage can then tailor the user experience according to location.http://www.foursquareplayground.com/
  9. Internet Explorer 9 adds support for several features of the CSS3 Backgrounds and Borders Module. The most notable new feature, the border-radius properties, is also the most requested CSS border feature.The border-radius properties enable you to curve border corners by essentially “replacing” the hard corners with a quarter-ellipse and specifying the radii of each ellipse. http://ie.microsoft.com/testdrive/HTML5/BorderRadius/Default.html
  10. Better typographic control has been a consistent feature of each new iteration of CSS. At the same time, the lack of an interoperable Web font format can be frustrating. Internet Explorer 9 enhances existing support for CSS fonts to provide compliance with the CSS3 Fonts Module. It also adds support for the Web Open Font Format (WOFF) and raw fonts. WOFF is backed by all of the major browser vendors and font foundries is a repackaging of the OpenType font format – for which there are many tools available to developers for packaging fonts today.No longer are designers and developers limited to the small list of web safe fonts. By using the @font-face, and specifying a source URL for the WOFF font file, the browser downloads the necessary font and uses it as the page designer specifies. Demo From IETestDrive.comhttp://ie.microsoft.com/testdrive/Graphics/WebFonts/http://ie.microsoft.com/testdrive/Graphics/MoreWebFonts/
  11. The &lt;canvas&gt; element is a part of the HTML5 Standards specification and allows for dynamic scriptable rendering of 2D graphics. The &lt;canvas&gt; element in your HTML defines the drawing area, then through JavaScript, you can get the 2d context and begin dynamically drawing within that region.Much like SVG, you can draw on the page using basic shapes, but you can also easily include rasterized images, videos and other objects. One question that sometimes comes up is the difference between canvas and SVG. The biggest and most important is that with SVG, the drawings are objects within the DOM, where as with canvas, the browser doesn’t remember what’s been drawn and therefore to update the graphic JavaScript needs to redraw the full canvas, instead of just updating the existing object.Demo From IETestDrive.comhttp://ie.microsoft.com/testdrive/Graphics/CanvasPad/Default.html http://disneydigitalbooks.go.com/tron/http://iepm/testdrive/Graphics/CanvasPad/http://iepm/testdrive/Performance/FishIE%20tank/http://iepm/testdrive/Performance/MrPotatoGun/http://iepm/testdrive/Performance/AsteroidBelt/http://iepm/testdrive/Graphics/DeepZoom/
  12. Scalable Vector Graphics (SVG) are a graphics format that describe vector graphics with an XML-based file format. Unlike rasterized images, instead of drawing individual pixels on a page, vector graphics render based on the shapes defined in the XML file. Because they’re based on shapes instead of pixels, there’s no limit to how they can be zoomed in, there isn’t a loss because of a lack of pixel depth. And since they’re just XML files, they can be included right in your HTML, like you would any other HTML element, and are treated by the browser just like any other HTML element – they’re fully accessible via the DOM and can be scripted and modified as you want.SVG drawings work really well for organizational charts, simple images and line drawings. For example, a flow chart, or business organizational chart. The code on this page shows a very simple example, in our HTML I’ve placed an SVG element, 400 pixels wide by 200 pixels high. Within that SVG element, we’ve drawn two shapes, both rectangles. Almost all browsers today support the basic shapes like rectangles, circles, polygons; as well as paths, colors, gradients, patterns and more.Demos From IETestDrive.comhttp://ie.microsoft.com/testdrive/Graphics/TagCloud/Default.xhtmlhttp://ie.microsoft.com/testdrive/Graphics/47Atlas_zurEuropawahl/http://ie.microsoft.com/testdrive/Graphics/50RealWorldData_andDiagrams/http://ie.microsoft.com/testdrive/Graphics/35SVG--oids/
  13. http://kexparchive.org/http://joydefinesthefuture.com/