Descubriendo HTML5

Video tutorial de HTML5

2012-05-06T10:42:00.001-03:00

Descubre HTML5 en videos
No te pierdas esta colección de videos que te ayudará a ampliar tus conocimientos para desarrollar sitios web.
Ver videos aquí...

HTML5 y Chrome

2012-04-13T12:45:00.002-03:00

Interesante vídeo de una de las presentaciones llevadas a cabo durante el último Google I/O.

12/04/2012 - Como parte de uno de los eventos anuales que más interés despiertan entre desarrolladores interesados en conocer la última hora sobre las tecnologías de Google, Eric Bidelman, Arne Roomann-Kurrik llevarón a cabo durante el último Google I/O, la presentación HTML5 Showcase for Web Developers: The Wow and the How.

Esta conferencia de una hora de duración y dirigida a compartir las fortalezas de HTML5, muestra interesantes demostraciones de algunas de sus características de última generación con las que apuntar las posibilidades para los desarrolladores web de esta tecnología en Google Chrome.

El vídeo de la presentación de una hora de duración, integramente en inglés y con una clara orientación práctica está disponible para todos los intersados al final de este post. Además también es posible acceder a las diapositivas que acompañaron la charla desde www.htmlfivewow.com.

Si quieres conocer las posibilidades que HTML5 ofrece a un navegador como Chrome no dejes de dar un vistazo a HTML5 Showcase for Web Developers: The Wow and the How.

HTML5 Showcase for Web Developers: The Wow and the How

Música con HTML5

2012-01-04T11:18:00.001-03:00

Spotify desea conquistar la musica online con HTML5

Spotify el servicio de musica que solo era un reproductor y que ahora se ha integrado conFacebook para hacer su musica algo mas social, tiene nuevos planes para conquistar la musica en otro nivel. Ahora que HTML5 es mirado por todos, Spotify no es la excepción, la noticia es que desean conquistar la musica online y HTML5 sera una de las herramientas para hacerlo.

La idea, es que los desarrolladores externos puedan crear aplicaciones que se integren con su reproductor, para empezar tenemos a Rolling Stone, Pitchfork, Last.fm, The Guardian, Fuse, TuneWiki que desean integrar aplicaciones en esta plataforma de musica online, si ellos han puesto la mirada en Spotify, es de esperar que mas desarrolladores lo hagan tambien.

“Tiene todo el sentido del mundo, es la solución definitiva y estamos encantados de formar parte de ella”

Imaginen que la musica de Spotify se comparta como playlist en Last.fm y que puedas acceder a ella sin tener que salir de la plataforma, que Rolling Stone detecte tus gustos y sepa que noticias te interesan leer, es una buena jugada para Spotify y como lo dicen, es algo muy obvio para un siguiente paso.

Puedes tener esta nueva version beta entrando a www.spotify.com/es/download/previews

Via Genbeta

Presentaciones con HTML5

2012-01-04T11:12:00.001-03:00

Crea presentaciones colaborativas y rápidas con Reel en HTML5

HTML5 sigue dando mas posibilidades en la web y ahora le toca a las presentaciones, pero ahora puedes crearlas online tambien junto con tus compañeros de manera colaborativa con la posibilidad de votar por la mejor y la cual se publicara.

Reel es un servicio de presentaciones online en HTML5, en este puedes subir tus archivos, ya sean , imagenes, PPT o PDFs convirtiendo el archivo en presentación online que se puede publicar en redes sociales o embeberlos. Otra destacada capacidad es la de crear la presentación de manera colaborativa ya que cualquiera puede subir su imagen para que esta sea votada por los demás y se pueda elegir para implementarla, si ya no se desea realizar una modificación, esta se puede finalizar.

Se tiene la posibilidad de subir imagenes en formato *.jpg, *.png, *.gif, *.pdf, *.ppt o *.doc y al terminar genera su URL y código HTML para incrustarlo en cualquier sitio web.

Si quieres utilizar el servicio puedes entrar a www.reelapp.com
Enviado por:

Nombre: Eudys cruz (eumos)

2011-12-15T12:28:00.004-03:00

2011-12-14T11:32:00.003-03:00

Top 6 Tendencias en HTML5 en 2011

HTML5 está cambiando fundamentalmente la forma, los desarrolladores acercarse a la Web. Si es para navegadores de escritorio o móviles, el lenguaje y las normas del futuro no son un punto distante en el horizonte. Es en este momento.

En el ámbito móvil, el debate continúa: Web o nativo? La diferencia entre los dos comienza a desdibujarse como las normas de HTML5 evolucionar. Analizamos lo que sucedió en HTML5 en este año en nuestra tercera entrega de 2011 de las tendencias principales. Consulte el resto de la serie, comenzando con Juan Pablo Titlow de las tendencias de la música y Alicia Eler de las tendencias de comercio móvil.

2011-12-01T16:32:00.001-03:00

Novedades en los formularios

HTML5 nos trae varias novedades para nuestros formularios que podemos implementar actualmente, porque a pesar de que HTML5 no estará completamente listo hasta el 2012, muchos navegadores empiezan a implementar algunas de sus características.

En el caso de que utilicemos estas características y el navegador no sea compatible con las misma, simplemente las ignorará sin causarnos mayores problemas. Incluso podremos condicionar nuestros scripts para que funcionen solo en navegadores sin soporte para las nuevas características de manejo de formularios, por ej si tenemos un script de selección de fechas podremos hacer que funcione solo en Internet Explorer pero que en Opera sea el mismo navegador el que se encargué de mostrarnos su selector de fechas.

Lee más...

HTML5 Móvil

2011-11-26T10:42:00.001-03:00

Configura tu iPhone con un Aplicación en HTML5

Aveces resulta muy agobiante tener que pasar de pantalla a pantalla para llegar al menú de configuración de un iPhone, casi son como 4 pasos para llegar y pensamos en alguna posibilidad de tener casi todo a la mano.

Demostración de HTML5

2011-11-25T08:26:00.001-03:00

EJEMPLO Con HTML5 Que no deja de impresionar

Encontramos un ejemplo de algo estupendamente genial desarrollado en HTML5, Javascript y CSS3, se trata de una hoja adesiva o material elastico muy pegajoso que se adhiere a los marcos del navegador o simplemente rebota hasta quedarse pegado.

Hay muchos ejemplos parecidos a este pero es genial encontrarse con más, este entró para la colección y demuestra que HTML5 no puede aburrir a nadie, siempre hay personas que se imaginan y desarrollan las cosas.

Visita el ejemplo en www.spielzeugz.de/html5/sticky-thing

10 Razones

2011-11-24T11:00:00.001-03:00

Top 10 razones para usar HTML5 Ahora

Así que todavía no estás usando HMTL5 ¿eh? Supongo que es probable que tenga sus razones, no es adoptado plenamente, sin embargo, no funciona en IE, que no te gustan los usuarios, que está fuera de contacto o si son sólo pasión enamorado de la escritura de código XHTML estricto. HTML5 es la revolución que la web es necesario y es el hecho, es el futuro, le guste o no - suck it up and deal. HTML5 no es difícil de usar o entender y aunque no está completamente aprobado, sin embargo, todavía hay un montón de razones para empezar a usarlo ahora mismo - como justo después de que hayáis terminado de leer este artículo .

You Tube con HTML5

2011-11-22T19:28:00.001-03:00

YouTube le da mas poder a su reproductor en HTML5

Google sigue probando mas experimentos que nunca con HTML5 y ahora después de un buen tiempo con la posibilidad de ver los videos en un reproductor totalmente hecho en HTML5, decide que es tiempo de actualizarlo con mas opciones.

Las capacidades que HTML5 esta tomando ahora ha dado la posibilidad a YouTube de dotar de mejores opciones en su reproductor que esta en fase BETA, las mejoras que tiene ahora son:

Copiar URL del Video
Copiar URL del Video a la hora actual
Copiar HTML de insertado
Y claro el Full Screen

Como se ha mencionado, esta aun en fase beta, pero las mejoras han sido muchas y probablemente en el 2012 veamos muchas mas mejoras e incluso HTML5 sea la tecnologia por defecto del reproductor, algo que ha muchos nos gustaría. Por el momento Flash sigue siendo lider en este aspecto pero con la noticia de Adobe por abandonar Flash en Móviles y TV, muchos se han puesto a trabajar en HTML5 como alternativa.

Resumen de la conferencia

2011-11-22T01:16:00.001-03:00

episodio de archivo06/11/2011

mejorando.la/conferencia 19de noviembre

El sábado pasado se llevó a cabo la tan esperada conferencia de mejorando.la.
Entre los temas más destacados que desarrollaron los expositores fue la evolución de las tecnologías a partir del cambio que tuvo HTMLy CSS3...
Leer aquí...

Prueba vídeos en html5

2011-11-19T09:24:00.001-03:00

HTML5 vídeo Wiki

¿Qué es el vídeo HTML5?

HTML5 es un conjunto de estándares de la web está siendo desarrollado por el "Grupo de Tecnología Web de hipertexto Aplicación de Trabajo"

El estándar HTML5 incluye muchas características nuevas para más aplicaciones web dinámicas e interfaces. Uno de estos componentes se especifica e implementa es el elemento <video>.

Usando HTML5 y la etiqueta de <video> en concierto con una biblioteca de Javascript HTML5, los vídeos se pueden reproducir en los últimos dispositivos móviles a una velocidad html5 nativo, e incluso en los navegadores antiguos que requieren Flash.

Ver video aquí...

¿Qué es el vídeo HTML5?

HTML5 es un conjunto de estándares de la web está siendo desarrollado por el "Grupo de Tecnología Web de hipertexto Aplicación de Trabajo"

El estándar HTML5 incluye muchas características nuevas para más aplicaciones web dinámicas e interfaces. Uno de estos componentes se especifica e implementa es el elemento <video>.

¿Cómo puedo empezar a usar video de HTML5?

Visita la comparación de jugador para comparar las características de muchas bibliotecas de diferentes HTML5 video que te ayudará a hacer su vídeo incorpora el trabajo a través de una amplia gama de dispositivos (leer nuestro resumen sobre la elección de un jugador ).

Último momento!!!

2011-11-18T16:20:00.001-03:00

Mejorando la web cambio a mlw.io

Cambiamos de nombre, ahora somos mlw.io (si, más cortito, para no robarte
tantos caracteres en tu tweet). ¿Te gusta nuestro nuevo dominio corto? Esta
semana, el jueves a las 7pm estabamos arrancando otro día más de clases en
Ciudad de México para el curso de Html5.

Ver video...

Ver para entender

2011-11-18T00:48:00.001-03:00

¿Por qué es importante HTML5?

Quiero hablarles de HTML5. La magia de esta unión de tecnologías agrupada en un solo término no es inventar nada nuevo, sino unir esfuerzos que por primera vez tienen a toda la industria empujando hacia una dirección y que identifican un cambio que ya sucedió en como debemos hacer la web

hoy mismo.

“HTML5 es el presente de la web y si no estás asimilando lo que está pasando ya eres parte de la vieja generación de desarrolladores. Eso tendría que tenerte preocupado.”

Podemos hablar de todas las empresas gigantes de la web, podemos enumerar a Microsoft, Google,

Apple, Adobe, Facebook, Yahoo, Mozilla y miles de proyectos tecnológicos que independientemente de

sus objetivos hoy respiran HTML5, lo apoyan y tienen propuestas que los hacen competir en código en

el navegador más cercano a tu pantalla. Es una de sus más importantes estrategias de posicionamiento

y es una de sus más fuertes apuestas de reclutamiento.

Mira el video que explica esto y mucho más aquí

Información actual

2011-11-17T16:10:00.001-03:00

MediaElement.js una herramienta para multimedia de HTML5, Audio y Video

Google experimenta con WebGL creando Bookcase

Ver noticias..

Crea botones geniales y fácilmente con CSS3 Button Maker

Ya que los botones de ahora hacen uso de gradientes, sombras y esquinas redondeadas que contribuyen en gran medida. En los antiguos navegadores que no soporten estas propiedades, la reserva es de color sólido de fondo, sin sombras y esquinas cuadradas.
Leer más...

Biblioteca hecha con html5 en 3D!

2011-11-17T10:46:00.001-03:00

Google experimenta con WebGL creando Bookcase

Google uno de los principales impulsores de HTML5 esta constantemente creando experimentos que reten la imaginación de los desarrolladores y además probar que el poder de HTML5 no acaba en simples aplicaciones, además Google Chrome siempre tiene nuevas capacidades sorprendentes para experimentos en cada actualización.

Esta vez le toca a WebGL ser anfitrión de un nuevo experimento de Google el cual planea llevar una biblioteca a la tercera dimensión llamada Bookcase, esta biblioteca guarda libros en estantes infinitos en los cuales puedes navegar buscando libros y tener una vista previa de ellos al elegirlos, además también te lleva a la tienda para adquirirlo.

Esta novedad fue presentada en el blog oficial de Google y es algo sorprendente, pero que mejor para entender esto que con un video.

Y claro, puedes visitar la aplicación tu mismo.

http://workshop.chromeexperiments.com/bookcase/

LA PRUEBA DE HTML5

2011-11-17T02:45:00.001-03:00

¿Qué navegadores son compatibles con HTML5?

Los diseñadores web y los equipos técnicos de todas partes tienen sentimientos muy fuertes acerca de HTML5 y ya sea el amor o el odio que dependiendo de con quién se hable.

Se han probado algunos de los navegadores más populares para ver cuán preparados están para HTML5 y esto es lo que encontramos. Para esta prueba usamos http://www.html5test.com que ofrece una página de pruebas de HTML5 y un sistema de calificación que sube a 400 puntos dependiendo del número de características de HTML5 ya se están ejecutando en el navegador.

Cromo 10,0 fue el gran ganador llegando a 301 puntos sobre 400 posibles. Que ya han aplicado la mayoría de la funcionalidad de un navegador compatible con HTML5. Además, muchas de las características que no se agregan son en parte añadido. Así que Google Chrome es, sin duda muy por delante en la carrera de navegadores compatibles con HTML.

Firefox 4.0 es el siguiente en la línea y anotó bastante decentemente obtener 249 de los 400 puntos posibles.Que aún faltan un montón de elementos clave, pero tiene puntos de bonificación para la ejecución de audio y vídeo, así como sus reglas de análisis.

Internet Explorer 8 es bastante lejos de la curva. IE anotó un total de 32 puntos sobre 400. Bastante deprimente muestra de lo que solía ser el navegador de Internet más importantes del mundo. Internet Explorer ha estado jugando a ponerse al día con el diseño de la prestación ya la aplicación de la CSS y sus pobres resultados aquí nos dice que no parece que cambie mucho en el futuro.

Descubriendo HTML5: ¿Flash o HTML5?

2011-11-16T16:52:00.000-03:00

Descubriendo HTML5: ¿Flash o HTML5?

Interesante!!

2011-11-14T17:32:00.001-03:00

mejorando.la/conferencia 19

de noviembre

Llega una segunda edición de mejorando.la/conferencia.

Esta vez, transmitimos desde Santiago de Chile vía Online 5 excelentes charlas con invitados de Argentina, Colombia, Chile, España y Guatemala.

Registrate y reserva las fechas. El último evento del año uniendo las comunidades de Maestros del Web, Cristalab y de invitados a Desarrollo Web. Somos los que enseñamos a hacer web en español.

Microsoft ofrece un diplomado en HTML5 para aprender los fundamentos

Microsoft esta ofreciendo un diplomado en HTML5 aprendiendo sus fundamentos totalmente online, este no tiene ningún costo si concluyes el diplomado al 100%, de lo contrario pagarias45 dólares. El objetivo es que aprendas los fundamentos de HTML5 desde los elementos mas importantes hasta el manejo de CSS3.

La duración sera de 3 semanas estudiando de 30 a 60 minutos, en cualquier momento los alumnos estarán respaldados por un profesor certificado por Microsoft como Microsoft Valuable Professional (MVP), al finalizar haran entrega de un Diploma con total valor curricular.

La fecha de inicio sera el jueves 28 de noviembre del 2011 pero si aun tienes alguna duda puedes esperar el 17 de noviembre ya que Microsoft dará una sesión informativa.

Puedes leer la pagina oficial para obtener información mas detallada aqui.

Ya se esta planeando la versión HTML11

Todo mundo habla de las bondades de HTML5, desde las increíbles capacidades hasta lo que sea podido desarrollar con esta nueva tecnologia, pero es evidente que todo esto no puede solo terminar en HTML5, necesitamos cada dia mejores capacidades para crear mejores cosas.

HTML11 es obviamente la version 11 de HTML y viene con cosas que solo podíamos imaginar en un futuro muy lejano, tiene capacidades que solamente podrías pensar como una locura pero que hoy en dia existen borradores y experimentos. HTML11 lleva el software a un nivel mucho mas cercano a nosotros, aplicaciones de SmarthPhones que puedes resolver problemas cotidianos y hacerlos mas inteligentes.

Conoce lo que puede hacer HTML5

2011-11-14T11:37:00.000-03:00

Sin duda uno de los temas del año está siendo HTML5, el sucesor de la actual versión de HTML y que muchos también creemos reemplazará a Flash en la web, si no de forma total sí bastante significativa, lo que por supuesto no solamente digo yo.Varias grandes tecnológicas también han manifestado ya su apoyo a HTML5, como Google, Microsoft o Apple, estos últimos de los que más y muestra de ello es que han decidido darle ahora otro nuevo empujón de la mejor manera posible: mostrándolo en acción.

Concretamente siete ejemplos que demuestran la potencia de HTML5 y CSS3 han lanzado en un nuevo apartado de la web oficial de la empresa entre los que encontramos de todo (hace falta Safari para poder verlos/interactuar): un visor de vídeos que nos permite “jugar” con él, un editor de fuentes, una galería de imágenes y ejemplos de las posibilidades respecto a transiciones de imágenes, vistas de 360 grados y audio. Por supuesto todo esto sin necesidad alguna de instalar complementos adicionales y con unos consumos más que aceptables.

¿Que quieres más ejemplos por que aún no ves claro dónde está la gracia de HTML5 o simplemente pasas de Safari? Pues no hay problema, ahí va otra ración:

Ejemplos de CraftyMind. En uno de ellos podemos hacer saltar por los aires un vídeo según se reproduce y en el otro se reproduce un vídeo dentro de un efecto 3D
HTML5 también puede perfectamente darle batalla a Flash en otro de los campos que domina, los juegos, y este vídeo lo deja claro
Ahí va Sketchpad, completo programa para dibujar -dependen con qué lo comparemos por supuesto- realizado enteramente en HTML5
Ninguna duda cabe hoy en día de lo importante que son actualmente los reproductores de vídeo online. SublimeVideo es uno de esos, ligero, bonito, que no necesita plugins y claro, realizado en HTML5.
En el blog de desarrollo del navegador de Opera también podemos encontrar ejemplos del potencial de HTML5 y CSS3 aunque explicado más a nivel técnico

Para terminar me gustaría que todo el mundo se olvidara de la polémica entre Adobe y Apple y tras pensar fríamente, después de haber visto/cacharreado con todos estos ejemplos, diera su opinión sobre HTML5. La mía está clara: es un lenguaje tremendamente potente que la web necesitaba desde hacía bastante tiempo y deseo con todas las ganas que se extienda como la pólvora (independientemente de lo que le pase a Flash, diga Adobe o piense Steve Jobs).

HTML5: qué cambios trae la nueva versión del lenguaje estándar de la web

Hay un revuelo bastante grande en estos días con respecto a la implementación del codec h.264 en la nueva versión del lenguaje básico de internet, debido a que se trata de un códec propietario y el uso de su licencia tiene un coste, cuando la W3C siempre se ha sabido elegir estándares abiertos y gratuitos, para mantener la igualidad y neutralidad en la red.

Y si bien se habla constantemente del flamanteHTML5, poco o nada se dice de los cambios que conlleva, sin contar el hecho ya archiconocido por todos de que, justamente, permitirá la reproducción nativa de video. Acá van entonces algunos de los cambios más importantes.

Audio y Video

La reproducción de video -y audio, no hay que olvidar, se lleva a cabo mediante etiquetas como en los siguientes ejemplos:

<video id="video" width="640" height="480" volume=".7" controls autoplay>
  <source src="video.ogg" type="video/ogg"> </source>
</video>

y, en el caso del audio:

<audio>
  <source src="music.oga" type="audio/ogg">
</audio>

Nueva estructura

Tomando en cuenta la utilización que damos a algunos elementos div con identificadores muy comunes, los desarrolladores crearon una nueva estructura de elementos que cambiarán la manera de elaborar el contenido (sobre todo de blogs) y la manera en que los buscadores lo analizan.

Se trata de las etiquetas :

article : Una entrada independiente en un blog, sitio o revista.

footer : El final de la página, donde se incluyen los modos de contacto, etc.

header : No el elemento head, sino la cabecera de una determinada página.

nav : Una colección de vínculos a otros sitios o páginas.

section : Una sección determinada que incluye su propio encabezamiento.

Mark, Aside y Time

Mark se utilizará para indicar importancia a un determinado texto.

<p>La <mark>etiqueta mark</mark> es utilizada para llamar la atención.</p>

Quizás no hayan reinventado la rueda con esta etiqueta, pero con <aside> podremos definir un bloque semántico que representa una nota o explicación, relacionado con alguna otra parte del contenido.

Por otro lado, han creado una etiqueta que mejora el manejo de fechas y horas (esto se hacía en HTML4 mediante la etiqueta abbr):

<time datetime="2010-03-29">Marzo</time>.
<time>09:00</time>

Mejoras en <input type…>

Se han añadido varios nuevos tipos de ingreso de texto, pudiendo especificar si se trata de una url o un email, un entero, una fecha, etc. Algunos ejemplos:

<input type="email">
<input type="url">
<input list="title-list">
<datalist id="title-list">
  <option value="...">
</datalist>

Además, la validación de los datos ingresados también será más sencilla gracias a otras nuevas etiquetas (no comentadas en este artículo).

Cuadro de diálogo

Con la etiqueta <dialog> podemos incluir, valga la redundancia, cualquier tipo de diálogo.

<dialog>
 <dt> Usuario 1:
 <dd> Hola!
 <dt> Usuario 2:
 <dd> Hola! :)
</dialog>

Barra de progreso, canvas y puntuación

Gracias a la etiqueta <progress> podremos incluir el progreso de una tarea cualquiera que se esté ejecutando, mas trabajando en conjunto con JavaScript podremos incluir también una barra de progreso visual.

<progress>
  <span id="objprogress">76</span>%
</progress>

y con <meter> insertamos un valor fraccional de una medida escalar, que seguramente usaremos junto a JavaScript para incluir de manera muy simple el típico gráico de una a cinco estrellas.

Con <canvas>, implementado por primera vez por Apple para suswidgets, podremos dibujar gráficos dinámicos e interactivos.

Finalmente, la etiqueta <device> permitirá al cliente acceder a varios dispositivos, como puede ser una webcam, en tanto con <embed> podemos determinar contenido embebido, como por ejemplo un plug-in. Estos no son sólo más que algunos de los cambios más importantes que trae la quinta versión del lenguaje de marcado HTML, los que quieran continuar profundizando pueden visitar el sitio oficial del W3C.

¿Qué cambió en HTML5?

2011-11-13T01:17:00.001-03:00

Nuevos elementos en HTML5

El Internet ha cambiado mucho desde HTML 4.01 se convirtió en un estándar en 1999.

Hoy en día, algunos elementos de HTML 4.01 se han quedado obsoletas, nunca utilizados, o no se usa la forma en que se pretende. Estos elementos se eliminan o se re-escrito en HTML5.

Para manejar mejor el uso actual de Internet, HTML5 incluye también nuevos elementos para una mejor estructura, el dibujo, el contenido de los medios de comunicación, y un mejor manejo de formularios.

Nuevo marcado de los elementos

Nuevos elementos para mejorar la estructura:

Etiqueta

Descripción

<article>

Especifica independiente, autónomo contenido, podría ser una noticia, artículo, blog, foro, u otros artículos que pueden ser distribuidos de forma independiente del resto del sitio.

<aside>

Para el contenido, aparte de los contenidos que se coloca pulg El contenido de un lado deben estar relacionados con el contenido circundante

<bdi>

Para el texto que no debería estar obligado a la dirección de texto de los elementos de su padre

<comando>

Un botón o botón de radio, o una casilla de verificación

<details>

Para describir los detalles de un documento, o partes de un documento

<summary>

Un título o resumen, en el interior del elemento de detalles

<figure>

Para la agrupación de una sección de contenido independiente, podría ser un vídeo

<figcaption>

El título de la sección de la figura

<footer>

Por un pie de página de un documento o sección, puede incluir el nombre del autor, la fecha del documento, información de contacto, o la información de copyright

<header>

Para ver una introducción de un documento o sección, puede incluir la navegación

<hgroup>

Para una sección de las partidas, utilizando <h1> a <h6>, donde el más grande es el principal título de la sección, y los otros son sub-títulos

<mark>

Para el texto que hay que destacar

<meter>

Para una medida, sólo si los valores máximo y mínimo se conocen

<nav>

Para una sección de navegación

<progress>

El estado de un trabajo en progreso

<ruby>

Para la anotación de ruby (notas chinos o caracteres)

<rt>

Para la explicación de la anotación ruby

<rp>

Lo que muestran los navegadores que no soportan el elemento de rubí

<section>

Para una sección de un documento. Tales como capítulos, encabezados, pies de página, o cualquier otra sección del documento

<hora>

Para la definición de un tiempo o una fecha, o ambos

<wbr>

Separación de palabras. Para la definición de una oportunidad de salto de línea.

Nuevos Medios Elementos

HTML5 ofrece un nuevo estándar para el contenido de los medios de comunicación:

Etiqueta

Descripción

<audio>

Para los contenidos multimedia, sonidos, música u otros flujos de audio

<video>

De contenido de vídeo, como un clip de película u otras corrientes de vídeo

<source>

De los recursos multimedia para los elementos de los medios de comunicación, que se define dentro de los elementos de audio o vídeo

<embed>

De contenido integrado, como un plug-in

<track>

Para las pistas de texto utilizados en MediaPlayers

El elemento Canvas

El elemento canvas utiliza JavaScript para realizar dibujos en una página web.

Etiqueta

Descripción

<canvas>

Para hacer gráficos con un guión

Nuevos elementos de formulario

HTML5 ofrece más elementos de formulario, con más funcionalidades:

Etiqueta

Descripción

<datalist>

Una lista de opciones de valores de entrada

<keygen>

Generar claves para autenticar a los usuarios

<output>

Para los diferentes tipos de producción, tales como la producción escrita por un guión

Nueva entrada de valores de tipo de atributo

Además, atribuyen el elemento de entrada de tipo tiene muchos nuevos valores, para el control de entrada mejor antes de enviarlo al servidor:

Tipo

Descripción

tel

El valor de entrada es de tipo de número telefónico

búsqueda

El campo de entrada es un campo de búsqueda

url

El valor de entrada es una URL

e-mail

El valor de entrada es una o más direcciones de correo electrónico

fecha y hora

El valor de entrada es una fecha y / o tiempo

fecha

El valor de entrada es una fecha

mes

El valor de entrada es de un mes

semana

El valor de entrada es a la semana

tiempo

El valor de entrada es de tipo en tiempo de

fecha y hora local

El valor de entrada es una fecha / hora local

número

El valor de entrada es un número

alcance

El valor de entrada es un número en un rango determinado

color

El valor de entrada es de un color hexadecimal, como # FF8800

marcador de posición

Especifica una pista corta que describe el valor esperado de un campo de entrada

Noticias de HTML5

2011-11-11T16:08:00.001-03:00

Mitos y realidades del HTML5

Muchas son las expectativas respecto a las aportaciones del estándar HTML5 a las experiencias interactivas online para el usuario. Pero, a la vez, existe cierta inquietud respecto a su situación actual: qué navegadores requerirán qué codecs o cómo se podrán probar las inversiones en sus medios online en el futuro. ¿Eliminará el HTML5 el Flash o los plug-ins? ¿Estará preparado para soportar picos de máxima audiencia?La proliferación y acceso en Internet a contenidos ricos e interactivos nos ha llevado a un punto de transición similar al de los estándares W3C, respecto al lenguaje de expresión básico de contenido en la web.

Según los datos del Cisco Visual Network Index, el tráfico global de vídeo por Internet superará al tráfico global P2P en 2014. De hecho, ya supone un 51% del total del tráfico online de Estados Unidos. Además, la adopción de la navegación a través de dispositivos móviles se encuentra en pleno auge y el vídeo supone una gran parte de esa actividad.

Según ComScore, más del 35% de los usuarios móviles en Estados Unidos han usado su navegador móvil y Bytemobile apunta que, actualmente, uno de cada diez usuarios móviles visualiza vídeo a través de sus dispositivos. De hecho, los contenidos de vídeo crecerán un 60% del total de volumen de la red de datos.

Por otro lado, los smartphones han ganado relevancia, pero el mercado se encuentra fragmentado, con sistemas operativos como iOS y Android casi a la par, con un 25% y un 26% de cuota respectivamente (conScore Nov. 2010). Ambos soportan entornos de reproducción distintos: mientras que Android soporta Flash, el iPhone y el iPad sólo soportan codecs H.264 con ampliación a HTML5.

Estos hechos muestran cómo ha cambiado y madurado el contenido en la web desde el HTML estático de la segunda mitad de la década los 90 a las nuevas herramientas y plug-ins actuales. Ahora, la ubicuidad y la navegación móvil son el motor principal para la evolución de los estándares en todo lo relativo a soportar experiencias multimedia satisfactorias.

Si has leído hasta aquí, ya tienes noción de cuáles son las limitaciones actuales y potenciales del estándar HTML5. Sin embargo, también existen una serie de mitos surgidos alrededor del mismo que me gustaría poder analizar.

ADIÓS AL FLASH

El HTM5 va a acabar con el Flash y los plug-ins. Esto es pura ficción. La realidad es que los estándares del HTML5 se han diseñado para integrar los diferentes tipos de medios que ha soportado Flash en la última década. La fragmentación alrededor de los códecs y los contenedores estándar para vídeo de los navegadores contribuirán a que muchos sean los que sigan utilizando experiencias Flash “que funcionan en casi todas partes”.

El vídeo HTML5 está preparado para prime time. Bueno, esto es cierto para las reproducciones básicas. Sin embargo para las experiencias de vídeo más sofisticadas y avanzadas, todavía queda camino por delante para poder equiparar HTML5 con Flash.

La compatibilidad del iPad es la misma que la del HTML5. En realidad, para que el iPad sea compatible con el vídeo en web (aplicaciones no nativas), necesita el códec H.264 expresado en HTML5. Si tienes este códec, puedes reproducir contenidos de vídeo en cualquier dispositivo iOS. Aún así, el códec H.264 no se reproducirá por sí solo en Firefox o Chrome.

Por esta razón, la reproducción en iPad no equivale necesariamente a una completa compatibilidad con el vídeo en HTML5, te encuentras sólo a medio camino si no has soportado WebM/Ogg para otras experiencias de reproducción de código abierto en el navegador.

HTML5 tiene que ver, fundamentalmente, con vídeo. Aunque esté particularmente ligado a la reproducción de vídeo, en realidad la actualización del estándar tiene más que ver con poder englobar cualquier tipo de experiencia multimedia sin la necesidad de plug-ins.

Esta es la razón por la cual HTML5 incluye además de la etiqueta de 'video tabindex="0"', también las de 'audio' y 'canvas', y soporta comportamientos interactivos como arrastrar y soltar.Por todo el ello, el HTML5 supone un gran avance en la historia del contenido multimedia en la web y ha venido para quedarse, aunque todavía quede camino por delante.

Del mismo modo, la plataforma Flash soporta actualmente interacciones e integraciones más avanzadas y maduras. Por eso consideramos importante para los propietarios de sitios web el poder desarrollar una estrategia que haga posible el uso de ambos enfoques.

Microsoft podría estar listo para eliminar Silverlight

Después de enterarnos que Adobe está abandonando el uso de Flash para los navegadores móviles (una gran victoria para Apple, que apostó fuerte en HTML5), ahora Microsoft también se sube a esa misma movida al hacer algunos cambios en sus planes de Silverlight, el gran competidor de Flash de la compañía de Redmond. Después del lanzamiento de Silverlight 5, a fines de este mes, Microsoft estaría retrasando (y quizás suspendiendo totalmente) el desarrollo de nuevas versiones.

Este alejamiento de Silverlight no es ninguna sorpresa: desde mediados de septiembre sabemos que Microsoft también se unió a la guerra contra Flash, y Windows 8 estará libre del producto de Adobe para unirse a la moda del HTML5. Si para Microsoft el “futuro” de la web reside en este protocolo, entonces no debería ser alarmante que abandone un producto como Silverlight.

Sin embargo, hay que aclarar que esto no significa que Silverlight desaparezca. Simplemente, quiere decir que Microsoft dejará de hacer inversiones de tiempo y recursos en temas relacionados a Flash. Silverlight todavía tendrá incidencia en el desarrollo de las aplicaciones móviles para Windows Phone, pero en el futuro (quizás cercano) esto puede cambiar drásticamente, reduciendo el rol de Silverlight a algo totalmente marginal.

También vale la pena hacer una pequeña aclaración: no se trata de la muerte de Silverlight porque Microsoft está obligado por contrato a mantener un soporte por un año para los usuarios de su producto. Por eso, por ejemplo, el soporte de Silverlight 3 recién terminó a comienzos de este año, por lo que el de Silverlight 5, que debería llegarnos muy pronto, garantiza la continuidad de la plataforma hasta bien entrado el 2012.

Por el momento, no ha existido una declaración oficial por parte de Microsoft, pero su silencio absoluto con respecto a este producto parece confirmar que no veremos nada nuevo de Silverlight. Recordemos que hoy mismo Adobe anunció que se ha perdido la batalla contra el HTML5, retirando su producto Flash del mercado de los móviles. Microsoft no se quedó atrás; ahora resta esperar una confirmación por parte de sus directivos para que los desarrolladores puedan continuar tranquilos con sus proyectos (en HTML5, por supuesto).

Adobe confirma el abandono de Flash para navegadores móviles, se centrará en HTML5

Tal como os habíamos estado contando hace unas horas, todo parecía indicar que Adobe abriría una nueva etapa en su existencia con la retirada de su mayor producto Flash Player del campo de los teléfonos móviles. La noticia sin confirmar la habría iniciado ZDnet a través de la información recibida por un desarrollador. Finalmente el dato se ha corroborado desde el mismo blog de la empresa, en un artículo escrito por su vicepresidente y director general Danny Winokur.

Tras un párrafo final donde el ejecutivo se congratula de los éxitos alcanzados gracias a su desarrollo, mediante el cual la web y su contenido enriquecido ha evolucionado a pasos de gigante, le sigue un párrafo que puede ser entendido como la causa real de esta decisión tan trascendental:

HTML5 está ahora soportado universalmente en la mayoría de dispositivos móviles, en algunos casos exclusivamente. Esto hace de HTML5 la mejor solución para crear y desarrollar contenido en el navegador en las plataformas móviles. Estamos entusiasmados por ello y continuaremos nuestro trabajo con los jugadores clave en la comunidad HTML, incluyendo a Google, Apple, Microsoft y RIM, para llevar a HTLM5 innovaciones que puedan usar para impulsar sus navegadores móviles.

Me parece unas palabras destacables, especialmente cuando al comienzo del párrafo hace mención a las plataformas que usan HTML5 en exclusiva, en una clara alusión a los dispositivos móviles de la manzana. Reconocen por tanto que HTML5 ha ganado esta batalla en parte auspiciado por los chicos de Cupertino. Me parece curioso que en ningún momento hablen de las ventajas de este software frente a Flash aunque hablen de ayudar a desarrollarlo todavía más, pero es evidente que así está siendo, es decir, este paquete es mucho más eficaz en entornos móviles.

Se acaba así una eterna demanda de algunos usuarios, que no deseaban comprar productos de la manzana por no soportar Flash y se iban a artículos semejantes en la competencia. La decisión de Adobe afectará a todos los dispositivos, pero no quiere decir que vayamos a dejar de ver contenido Flash en aquellos que ya lo soportaran, como nuestro compañero Miguel Jorge dijo antes, Adobe dejará de desarrollar en este sentido, lo menciona el tercer párrafo del comunicado oficial. Se van a centrar en el uso de Flash para la creación de aplicaciones móviles en las plataformas más importantes mediante Adobe Air y el software existente va a seguir recibiendo soporte en la forma de corrección de errores. Por supuesto, Flasj Player para los equipos de escritorio sigue su curso como hasta ahora, con la versión 12 ya a la vista en el horizonte cercano.

Es interesante que de una u otra forma un personaje que ya no está con nosotros, Steve Jobs, vio con anticipación esta circunstancia, supo comprender que Flash no era lo más indicado para enriquecer la experiencia del usuario de móviles, y se decidió a apostar por HTML5 como alternativa. Ahora la pregunta es (y me encantaría conocer vuestras respuestas) ¿qué fue antes, el huevo o la gallina, es decir, mató Apple a Flash para móviles o simplemente en Apple se adelantaron a su tiempo comprendiendo algo que en Adobe han tardado 4 años en reconocer?

Etiqueta	Descripción
<article>	Especifica independiente, autónomo contenido, podría ser una noticia, artículo, blog, foro, u otros artículos que pueden ser distribuidos de forma independiente del resto del sitio.
<aside>	Para el contenido, aparte de los contenidos que se coloca pulg El contenido de un lado deben estar relacionados con el contenido circundante
<bdi>	Para el texto que no debería estar obligado a la dirección de texto de los elementos de su padre
<comando>	Un botón o botón de radio, o una casilla de verificación
<details>	Para describir los detalles de un documento, o partes de un documento
<summary>	Un título o resumen, en el interior del elemento de detalles
<figure>	Para la agrupación de una sección de contenido independiente, podría ser un vídeo
<figcaption>	El título de la sección de la figura
<footer>	Por un pie de página de un documento o sección, puede incluir el nombre del autor, la fecha del documento, información de contacto, o la información de copyright
<header>	Para ver una introducción de un documento o sección, puede incluir la navegación
<hgroup>	Para una sección de las partidas, utilizando <h1> a <h6>, donde el más grande es el principal título de la sección, y los otros son sub-títulos
<mark>	Para el texto que hay que destacar
<meter>	Para una medida, sólo si los valores máximo y mínimo se conocen
<nav>	Para una sección de navegación
<progress>	El estado de un trabajo en progreso
<ruby>	Para la anotación de ruby (notas chinos o caracteres)
<rt>	Para la explicación de la anotación ruby
<rp>	Lo que muestran los navegadores que no soportan el elemento de rubí
<section>	Para una sección de un documento. Tales como capítulos, encabezados, pies de página, o cualquier otra sección del documento
<hora>	Para la definición de un tiempo o una fecha, o ambos
<wbr>	Separación de palabras. Para la definición de una oportunidad de salto de línea.

Etiqueta	Descripción
<audio>	Para los contenidos multimedia, sonidos, música u otros flujos de audio
<video>	De contenido de vídeo, como un clip de película u otras corrientes de vídeo
<source>	De los recursos multimedia para los elementos de los medios de comunicación, que se define dentro de los elementos de audio o vídeo
<embed>	De contenido integrado, como un plug-in
<track>	Para las pistas de texto utilizados en MediaPlayers

Etiqueta	Descripción
<canvas>	Para hacer gráficos con un guión

Etiqueta	Descripción
<datalist>	Una lista de opciones de valores de entrada
<keygen>	Generar claves para autenticar a los usuarios
<output>	Para los diferentes tipos de producción, tales como la producción escrita por un guión

Tipo	Descripción
tel	El valor de entrada es de tipo de número telefónico
búsqueda	El campo de entrada es un campo de búsqueda
url	El valor de entrada es una URL
e-mail	El valor de entrada es una o más direcciones de correo electrónico
fecha y hora	El valor de entrada es una fecha y / o tiempo
fecha	El valor de entrada es una fecha
mes	El valor de entrada es de un mes
semana	El valor de entrada es a la semana
tiempo	El valor de entrada es de tipo en tiempo de
fecha y hora local	El valor de entrada es una fecha / hora local
número	El valor de entrada es un número
alcance	El valor de entrada es un número en un rango determinado
color	El valor de entrada es de un color hexadecimal, como # FF8800
marcador de posición	Especifica una pista corta que describe el valor esperado de un campo de entrada