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

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. Continúa leyendo Por dónde empezar con SVG III

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. Continúa leyendo Por dónde empezar con SVG II

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. Continúa leyendo Extensión de Visual Studio: Web Essentials de Mads Kristensen

ImageResizer una pequeña joya

El número de paquetes disponibles en el sitio NuGet se está empezando a llenar. Os recomiendo que le echéis un vistazo de vez en cuando para ver qué cosas nuevas van apareciendo, seguro que encontráis algo que os pueda ser útil.

Hoy vamos a ver un pequeño pero útil paquete del que Bertrand Le Roy se ha hecho eco hace poco para poder reescalar imágenes de forma sencilla en ASP.NET. El paquete es ImageResizer. Continúa leyendo ImageResizer una pequeña joya

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.

Un juego Silverlight 5 con XNA.

¿Podría ser el primer juego 3D en Silverlight?

Aquí tenéis un shooter que creó para la AppWeek 2010 usando las nuevas características 3D de Silvlerlight 5. Tendréis que instalar el plugin de Silverlight 5 RC (si no lo tenéis aún). Y jugar al juego aquí.

Una vez que termine la animación inicial, podréis empezar a disparar a los enemigos:

Juego Silverlight 5 con XNA
Juego Silverlight 5 con XNA

 

Espero que os guste.

Juan María Laó Ramos.

Silverlight 5 nos trae XNA 3D a la web.

Vamos a ver un poquito de historia sobre esto:

  • En el MIX 11 en Abril se anunció que Silverlight 5 iba a incluir una nueva API 3D. Está basado en XNA, por lo que incluye tipos familiares como GraphicsDevice, VertexBuffer y Texture2D, pero no era un port completo de XNA. No incluía muchas funcionalidades como BasicEffect, SpriteBatch, Content Pipeline.
  • En Septiembre, la release candidate Silverligth 5 RC añadío nuevas características incluyendo los cinco efectos integrados en XNA 4.0, además de una librería de matemáticas compatible con XNA. David Catahe cuenta estos cambios.
  • Ahora, el Silverlight toolkit ofrece una compatibilidad increible con XNA, incluyendo ContentManager, Model, SpriteBath, Ratón, Teclado, y nuevas plantillas de Visual Studio para empezar con Silverlight 3D. Y cómo no, David ha hecho una gran introducción.

Si, de acuerdo, sigue sin ser un port completo de XNA, pero con esta nueva toolkit, se han portado las suficientes partes como para portar fácilmente juegos de Xbox y Windows Phone a la web. Como muestra uno de tantos ejemplos que se han portado muy rápidamente y que están incluidas en el toolkit (Toolkit/Sep11/Source/Sample source code.zip):

Ejemplo de Silverlight 5
Ejemplo de Silverlight 5

Para usar el Content Pipeline en una aplicación Silverlight 5, tendréis que instalar XNA Game Studio 4.0 en vuestra máquina de desarrollo. Pero tranquilos, esto no significa que tengáis que distribuir XNA en vuestros clientes web, recordad el diagrama sobre el Content Pipeline:

Diagrama del Content Pipeline
Diagrama del Content Pipeline

En Silverlight 5 esto funciona de la siguiente forma, la parte azúl se ejecuta en tiempo de compilación en el PC de desarrollo, usando los assemblies de XNA Game Studio 4.0. Sólo las cajas rojas se ejecutarán en la máquina del cliente. Es exáctamente igual cuando creamos juegos XNA para Xbox o Windows Phone, pero el dispositivo remoto ahora es un navegador web.

Espero que os sirva.

Juan María Laó Ramos.