HTML5
Upcoming SlideShare
Loading in...5
×
 

HTML5

on

  • 4,577 views

Introducción a HTML

Introducción a HTML

Statistics

Views

Total Views
4,577
Views on SlideShare
850
Embed Views
3,727

Actions

Likes
0
Downloads
39
Comments
0

1 Embed 3,727

http://shockbyte.net 3727

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

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

HTML5 HTML5 Presentation Transcript

  • HTML 5Rodolfo FinochiettiMVP ASP.NET/IISLagash Systems
  • ¿Cuales son los desafios del desarrollo de aplicaciones hoy?
  • Estandares• El desarrollo y la evolución de la computación se baso en la adopción de estándares – De Hardware • Ejemplos: Arquitectura IBM-PC IA16, IA32 – De Software • Ejemplos: C++, La Web
  • ¿Por que los estándares son importantes en el desarrollo de software? Compatibilidad Extensibilidad Predictibilidad Interoperabilidad
  • La Web• Accedida por millones• En todos los lenguajes• Vital para el intercambio de información, el entretenimientos, la educación, y el comercio
  • Aprovechar lascapacidades de dispositivo
  • HTML5• Es una plataforma que provee interoperabilidad cross-browser y cross-plataform –Video –Todos los dispositivos –Privacidad, Identidad, Seguridad
  • Que es HTML 5• HTML 5 es una nueva versión de diversas especificaciones, entre las que se encuentran: – HTML 4 – XHTML 1 – DOM Nivel 2 (DOM = Document Object Model)
  • Características de HTML 5• Estructura: La mayoría de las webs tienen un formato común, formado por elementos como cabecera, pie, navegadores, etc. HTML 5 permite agrupar todas estas partes de una web en nuevas etiquetas que representarán cada uno de las partes típicas de una página.• Etiquetas para contenido específico: Hasta ahora se utilizaba una única etiqueta para incorporar diversos tipos de contenido enriquecido, como animaciones Flash o vídeo. Ahora se utilizarán etiquetas específicas para cada tipo de contenido en particular, como audio, vídeo, etc.
  • Características de HTML 5• Canvas: es un nuevo componente que permitirá dibujar, por medio de las funciones de un API, en la página todo tipo de formas, que podrán estar animadas y responder a interacción del usuario. Es algo así como las posibilidades que nos ofrece Flash, pero dentro de la especificación del HTML y sin la necesidad de tener instalado ningún plugin.• Bases de datos locales: el navegador permitirá el uso de una base de datos local, con la que se podrá trabajar en una página web por medio del cliente y a través de un API. Es algo así como las Cookies, pero pensadas para almacenar grandes cantidades de información, lo que permitirá la creación de aplicaciones web que funcionen sin necesidad de estar conectados a Internet.
  • Características de HTML 5• Web Workers: son procesos que requieren tiempo de procesamiento por parte del navegador, se podrán realizar en un segundo plano, para que el usuario no tenga que esperar que se terminen para empezar a usar la página.• Aplicaciones Web Offline: Existirá otro API para el trabajo con aplicaciones web, que se podrán desarrollar de modo que funcionen sin estar conectados a Internet.
  • Características de HTML 5• Geolocalización: Las páginas web se podrán localizar geográficamente por medio de un API que permita la Geolocalización.• Nuevas APIs para interfaz de usuario: temas tan utilizados como el "drag & drop" (arrastrar y soltar) en las interfaces de usuario de los programas convencionales, serán incorporadas al HTML 5 por medio de un API.• Fin de las etiquetas de presentación: La responsabilidad de definir el aspecto de una web correrá a cargo únicamente de CSS.
  • DEMO
  • Nuevos Elementos Estructurales• section: Puede ser un capítulo, una sección de un capítulo o básicamente cualquier cosa que incluya su propio encabezamiento.• header: La cabecera de una página. No confundir con el elemento «head».• footer: El final de la página.• nav: Una colección de links a otras páginas• article: Una entrada independiente en un blog, revista, etc.
  • Nuevos Tags• aside: Es un bloque semántico que representa una nota, un consejo una explicación….• figure: Se utilizará para representar una imagen• dialog: Se utilizará para representar una conversación entre varias personas• time: Se utilizará para marcar un momento temporal en una historia• meter: Se utilizará para indicar ciertas medidas dependiendo de los atributos• progress: Representará el estado de cierto proceso• video: Un video• audio: Un archivo de audio• details: Más detalles sobre alguna cosa• datagrid: Una tabla, una recopilación de datos formateados• menu: Un listado, un menú.
  • Nuevos Tags (VIDEO)El elemento "Video". Sin lugar a dudas, la mejora másimportante que incorpora HTML 5, y la que más revuelo estáprovocando entre los medios. El hecho de querer ver un vídeoy no poder hacerlo debido a que el plugin correspondiente noestá instalado en el ordenador es una de las situaciones másfrustrantes a las que se debe enfrentar un usuario en Internet.Incluso YouTube, ante la falta de Adobe Flash arroja un errorsimilar. Vídeos de páginas enteras dejan de funcionar si Flashno está instalado, no se pueden ver trailerssin QuickTime, ycada vídeo que ha colocado Microsoft en línea demanda lapresencia de Silverlight. El elemento de vídeo incorporado enHTML 5 es la forma definitiva de rebelión, ya que se puedenreproducir vídeos en Internet y embeberlos en páginas sin lanecesidad de un plugin.
  • Canvas• http://htmlfive.appspot.com/• http://www.muywindows.com/2010/04/08/m icrosoft-se-emociona-con-la-aceleracion- html5-de-ie9• http://html5demos.com/
  • Nuevos Tags <article> <aside> <audio> <canvas> <command> <datalist> <details> <embed> <figcaption> <figure><footer> <header> <hgroup> <keygen> <mark> <meter> <nav> <output><progress> <rp> <rt> <ruby> <section> <summary> <time> <video>
  • Un blog antes de HTML5
  • Un blog con nuevos tags en HTML 5
  • Tags no soportados<acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <s> <strike> <u> <xmp>
  • Como reemplazar los tags no soportados <p><big><center><u><s> Lagash! </s></u></center></big></p><p style="font-size:medium;text-align:center;text- decoration:underline line-through;"> Lagash!</p>
  • Como reemplazar los tags no soportados<basefont color="red" size="10pt"><style>body{ font-size:10pt; color:red;}</style>
  • Dividir responsabilidades
  • <audio><audio autoplay controls loop preload="auto"><source src="song.ogg" type="audio/ogg" /><source src="song.mp3" type="audio/mpeg" /><object type="application/x-shockwave-flash"data="player.swf?file=song.mp3"><a href="song.mp3">Descargar Canción</a></audio>
  • <audio><audio id="player" src=“sound.mp3"></audio><div><button onclick="document.getElementById(player).play()"> »Play</button><button onclick="document.getElementById(player).pause()">» Pause</button><button onclick="document.getElementById(player).volume»+= 0.1">Volume Up</button><button onclick="document.getElementById(player).volume»-= 0.1">Volume Down</button></div>
  • <video><video controls width="360" height="240"poster="poster.jpg"> <source src="video.mp4" type="video/mp4"> <source src="video.ogv" type="video/ogg"> <object type="application/x-shockwave-flash"width="360" height="240"data="player.swf?file=video.mp4"> <param name="movie"value="player.swf?file=video.mp4"> <a href="video.mp4">Descargar Video!</a> </object></video>
  • Demos• http://html5demos.com/
  • Otros Recursos• http://visualstudiogallery.msdn.microsoft.com/es -ar/d771cbc8-d60a-40b0-a1d8-f19fc393127d (Intellisense VS 08/10)• http://blogs.msdn.com/b/webdevtools/archive/2 009/11/18/html-5-intellisense-and-validation- schema-for-visual-studio-2008-and-visual-web- developer.aspx (Como Instalar Intellisense)• http://validator.w3.org/ (Validacion con doctype HTML5)
  • rodolfof@lagash.comhttp://twitter.com/rodolfof http://shockbyte.net ¡GRACIAS!