Desarrollo de aplicaciones con HTML5


Published on

1 Comment
  • hola chalalo estoy haciendo el curso de HTML5 y ay tengo mi pagina echa pero en cshtml con sintaxis Razor y quiero agregarle un blog , pero quiero hacerlo manual no con los integrados que trae el webmatrix ya que se hace un poco complicado modificar uno de esos no se le puede agregarle un cshtml porque no corre el bolg si agosto y no se que hacer en este caso
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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.
  • 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.
  • 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.
  • 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. – Layout & Modernizer
  • 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.com
  • One of the most anticipated HTML5 features is the <video> 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 <img> 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.com
  • Like the HTML5 <video> element, the <audio> element allows designers and developers to embed sounds on their sites without having to rely on Flash or Silverlight. The <audio> tag supports industry standard codecs like MP3 and AAC. In the same way the <video> element is scriptable, so is the <audio> tag, allowing you to script the object.Demo From IETestDrive.com
  • 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.
  • 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.
  • 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.com
  • The <canvas> element is a part of the HTML5 Standards specification and allows for dynamic scriptable rendering of 2D graphics. The <canvas> 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.com
  • 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.com
  • Desarrollo de aplicaciones con HTML5

    1. 1. Desarrollo de aplicacionescon
    2. 2.
    3. 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. 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. 5. Nuevas etiquetas semánticas para enriquecer laexperiencia.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
    6. 6. Mapa de “HTML5”
    7. 7. Geolocation ECMAHTML CSS Web Apps SVG
    8. 8. HTML5 en IE9 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
    9. 9. Microsoft &
    10. 10. Microsoft Confidential 11
    11. 11. Tag Semánticos
    12. 12. HTML Tags<div id=”header”><div id=”nav”><div <div id=”article”>id=”sidebar”><div id=”footer”>
    13. 13. Elementos SemánticosProveer de significado a la estructura, semánticos son fuentes y el centrode 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.
    14. 14. HTML Tags Semánticos<header><nav> <section> <aside> <article><footer>
    15. 15. 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
    16. 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
    17. 17. Microsoft Confidential 18
    18. 18. HTML5 <audio> 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
    19. 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
    20. 20. CSS3 Fondos & Bordes  Esquinas redondeadas con la propiedad border-radius  Mutiples imágenes de fondo por elemento  Propiedad box-shadow en bloque de elementosdiv { border-radius: 152px 304px 228px 152px; border-style: double; border-width: 42px; padding: 12px;}21
    21. 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
    22. 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
    23. 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=""> <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /></svg>24
    24. 24. No se detecta HTML5.Se detectan cualidades de HTML5. Microsoft Confidential 25
    25. 25. Polyfills & Shims
    26. 26. Microsoft Confidential 29
    27. 27. − WebMatrix Microsoft Confidential 30
    28. 28. AdoptarExperimentar Microsoft Confidential 31
    29. 29. 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 conIndexedDB y caché de aplicaciones HTML5, Web Sockets,así como pestañas en modo InPrivate Microsoft Confidential 32
    30. 30. Limitaciones en HTTP HTTP es un protocolo request-replyLas aplicaciones hoy usan workarounds para permitir push
    31. 31. Modelos ActualesPolling Periódico El navegador usa XmlHttpRequest para consultar periódicamente al servidor
    32. 32. Modelos ActualesLong 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
    33. 33. WebSockets− Tecnología interoperable nueva, bajo estandarización− Socket bidireccional Full Duplex− API Javascript W3C− Secure (SSL)− Alta performance− Conexiones cross dominio
    34. 34. Soporte JavaScriptfunction 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 =; alert("Mensaje Recibido..."); }; ws.onclose = function() { alert(“La Conexión está cerrada..."); }; } else { alert("WebSocket no esta soportado por tu browser!"); }}
    35. 35. 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
    36. 36.
    37. 37. Microsoft Confidential 40