Archivo de la etiqueta: HTML 5

HTML Tour

Se nota que estamos volviendo de las vacaciones y hay que ponerse las pilas.

Si ya nos las recargamos algunos en el pasado Megathon de Windows 8, ahora llega el momento de la web con el :

Plain Concepts

HTML Tour

HTML Tour Plain Concepts

que Plain Concepts va a realizar a lo largo y ancho del territorio nacional con las siguientes fechas:

En este evento veremos el porqué de HTML5, lo que significa, lo que trae y todo lo que podemos hacer con el. La agenda consta de siete sesiones en las que veremos:

Introducción a los nuevos estándares web:

En los últimos años el trabajo de desarrollador y diseñador web se ha ido complicando cada vez más. Nuevos navegadores, nuevos dispositivos y miles de librerías y herramientas han llegado a las vidas de todos los profesionales del desarrollo web. Veremos los diferentes perfiles de equipo que han aparecido y nuevos modelos de negocio web. Actualmente los profesionales del web ya no sólo crean páginas web, también aplicaciones móviles y tablets y hasta SmartTVs. Un mundo de JavaScript que todavía no conoce límites.

Buenas prácticas en el desarrollo web:

El objetivo de esta sesión es mejorarle la vida al desarrollador. Mediante herramientas y buenas prácticas veremos cómo cometer menos errores y como testear javascript, como ser mucho más productivos con nuestras css’s y evitar el caos mediante OOCSS y less. Para finalizar veremos el proceso de subida a producción de nuestra aplicación.

Construyendo tu ecosistema de desarrollo Web

En esta sesión daremos un repaso a los distintos tipos de aplicaciones web que podemos desarrollar, decidiremos cual es más adecuado para cada situación y veremos de qué frameworks y herramientas disponemos para desarrollarlos. Utilizaremos Asp.net MVC4 para crear desde webs más “sencillas” hasta single page applications. Intentaremos perderle el miedo a javascript y veremos algunos frameworks como knockout, crearemos Apis Rest con Web Api, y veremos cómo consumir datos en tiempo real con signalR.

Aplicaciones móviles multiplataforma

En esta sesión conoceremos la plataforma de desarrollo Phonegap, cuando nos puede interesar utilizarla y cuando no, veremos cómo podemos aprovechar nuestros conocimientos de HTML5, CSS y javascript para crear aplicaciones nativas en múltiples plataformas móviles y cómo tenemos acceso a interacción con el dispositivo (camera, geolocation, contacts, …). Para todo esto nos apoyaremos en el framework web, optimizado para gestos, jquerymobile. Write less, do more.

Responsive Web Design

En esta charla veremos cómo conseguir que nuestra página web se vea correctamente tanto en nuestros móviles, como en nuestra pantalla de pc, sin tener que crear una versión diferente para cada uno de los dispositivos. Veremos además, las diferentes técnicas que podemos aplicar para conseguir el resultado deseado, centrándonos sobre todo en Progressive Enhacement.

Programación de Videojuegos HTML5

En la charla veremos características comunes de los juegos y su aplicación práctica en canvas HTML5. Analizaremos varios tipos de juegos, tanto 2D como 3D y estudiaremos las diferentes maneras implementarlos mientras comentamos las partes clave de su estructura. Para finalizar echaremos un vistazo al framework desarrollado por PlainConcepts para la creación de diferentes tipos de juegos 2D y 3D en HTML5.

De la web a Windows 8. 5 + 3 = 8

Los desarrolladores web tenemos con Windows 8 la oportunidad de crear aplicaciones nativas HTML5+CSS3+JS. En esta charla aprenderemos a seguir los patrones de “Windows 8 Style”, utilizar controles que nos proporciona WinJS, Live Tiles e integrar nuestra aplicación con Windows gracias a los contratos de búsqueda, compartir y configuración.

Esperamos veros allí 🙂

Juan María Laó Ramos

Mejoras del editor de CSS en Visual Studio

Este es el séptimo de una serie de post sobre ASP.NET 4.5

Las próximas releases de .NET y Visual Studio incluyen un montón de nuevas características. Con ASP.NET 4.5 veremos mejoras realmente increíbles tanto en Web Forms como en MVC, así como en el núcleo de ASP.NET en el que se sustentan ambas tecnologías.

En el post de hoy veremos algunas de las mejoras que traerá Visual Studio que hacen del trabajo con CSS y CSS3 se más sencillo en proyectos ASP.NET Sigue leyendo

Por dónde empezar con SVG III

Continuamos la serie sobre cómo trabajar con SVG. Si aún no lo habéis hecho aquí podéis leer la primera parte y aquí la segunda.

En el post de hoy veremos cómo hacer que las imágenes no se deformen, cómo trabajar con el DOM de la página y veremos algunas herramientas que nos pueden resultar útiles a la hora de trabajar con gráficos SVG. Sigue leyendo

Por dónde empezar con SVG II

Continuamos la serie sobre cómo trabajar con SVG. Si aún no lo habéis hecho aquí podéis leer la primera parte.

En el post de hoy veremos algunos errores que suelen ocurrir debido a las similitudes entre SVG y HTML, de manera que no perdamos mucho tiempo intentando averiguar qué es lo que está pasando. Sigue leyendo

Extensión de Visual Studio: Web Essentials de Mads Kristensen

Visual Studio 2010 es muy extensible y ha permitido a mucha gente del equipo a que prueben nuevas caracteríticas para del desarrollo web sin tener que recompilar Visual Studio. Una de esas extensiones es "Web Essentials" que ha hecho Mads Kristensen. Mads es el que se encarga de las herramientas de HTML5 y CSS3 en nuestro equipo. Sigue leyendo

Por dónde empezar con SVG

Este es el primer post de una serie sobre el formato SVG. En este post veremos cuales son las bondades de este formato. En próximos post veremos cómo usarlo en nuestras aplicaciones.

El formato SVG (Scalable Vector Graphics) para gráficos web ofrece la mejor calidad en un gran abanico de dispositivos, más aún que gráficos basados en bitmaps. Además, SVG ya soporta temas de accesibilidad lo que le convierte en la mejor opción para gráficos interactivos.

El uso de SVG continúa creciendo en la web. En la SVG Open 2011 se vieron muchos desarollos que estaban usando SVG en una gran variedad de aplicaciones reales. Estas aplicaciones iban desde gráficas con datos, dibujos técnicos, juegos, visualización de datos geográficos y un largo etcétera.

Aunque la especificación de SVG tiene ya casi una decada, no era posible usarlo directamente como un elemento en HTML hasta que ha aparecido HTML 5. Ha medida que los navegadores dan soporte a SVG como parte de HTML 5, la próxima generación de aplicacioens web podrán usarlo sin necesidad de ningún timpo de plugin. De hecho, la facilidad de integración de SVG  con HTML, CSS, el DOM y JavaScript lo convierte en la elección natural para crear experiencias interactivas adaptables. SVG ES la tecnología de gráficos vectoriales elegida para crear aplicaciones de estilo Metro para Windows 8 usando HTML.

A lo largo de una serie de post veremos algunas buenas prácticas a la hora de usar SVG en nuestros sitios con HTML 5 para asegurarnos del buen uso de esta tecnología. Sigue leyendo

HTML5 y subtítulos en vídeos

La promesa de HTML 5 es una Web que funcione para todos. La accesibilidad multimedia por medio de subtítulos es una parte muy importante de esa promesa y es un area que se tiene muy en cuenta en los estándars. Usando el elemento trac de HTML5, podemos añadir subtítulos a videos HTML5 a través de un archivo que contiene la información necesaria en formato de texto. Una vez que el estándar de subtítulos se estableza no será necesario instalar addins para publicar un video accesible:

Imagen de un video con subtítulos

Imagen de un video con subtítulos

El siguiente trozo HTML muestra cómo funciona el elemento track:

<video>

<sourcetype="video/mp4"src="video_file"></source>

<tracksrc="captions_file"label="English captions"kind="captions"srclang="en-us"default></track>

<tracksrc="descriptions_file"label="English description"kind="descriptions"srclang="en-us"></track>

</video>

La especificación de la W3C para HTML5 permite muchos formatos de subtítulos. La Beta de Internet Explorer 10 de la Windows Developer Preview soporta este elemento, pero aún no muestra los subtítulos. Y es que aún no hay nada decidido, sigue en estudio y hay un grupo para tratar el tema de los subtítulos

El equipo de Internet Explorer ha querido testear este escenario en el que se pueden usar varios formatos para obtener un mayor feedback, as'i que han creado un sitio en el que se puede usar el formato TTML-1.0 y el WebVTT. WebVTT surgió el año pasado y TTML es un estándar ya establecido para subtítulos soportado en Adobe Flash y Silverlight. Es usado en Netflix, Hulu y otros servidores para mostrar contenido en broadcast.

 Pantallazo del entorno de test para mostrar subtítulos

Podéis interactuar con el prototipo en el sitio de laboratorio de HTML 5. Mirad con vuestras herramientas el javascript qu ehace todo esto posible.

Juan María Laó Ramos.

Artículo original.

Sombras CSS3 en IE 10

IE 10 soportará por aceleración hardware las sombras de CSS3, algo muy pedido por los desarrolladores web.

Ya podemos usarlo con la Windows Developer Preview. En el post de hoy vamos a verlo un poco por encima.

Fijáos en la diferencia que puede haber entre aplicar sombras y no aplicarlas:

Este sería un texto sin tener sombra:

Texto sin sombra

Texto sin sombra

Si ahora escribimos su CSS de la siguiente forma:

.shadow1 { color: black; text-shadow: 2px 2px; }

Aparecerá algo parecido a esto:

Texto con sombra CSS3

Texto con sombra CSS3

 

En el blog de Internet Explorer nos cuentan de forma sencilla cómo podemos usarlo con muchos más ejemplos:

http://blogs.msdn.com/b/ie/archive/2011/09/29/css3-text-shadow-in-ie10.aspx

Espero que os guste.

Juan María Laó Ramos.

 

 

Habilitar HTML5 en nuestras herramientas

¿Aún no has hecho nada con HTML 5? ¿Y a qué estas esperando? Desde el SP1 de Visual Studio y de Expression Web 4 podemos hacerlo. En el post de hoy veremos cómo podemos configurar nuestras herramientas para empezar a usar HTML 5 como target de nuestros desarrollos web.

Sigue leyendo