Archivo de la etiqueta: Desarrollo Web

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. 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

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. 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.

Juego Silverlight 5 con XNA

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.

Ejemplo de Silverlight 5

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.

 

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.

 

 

Un componente interesante para ASP.NET MVC: WebGrid

Hace poco que se publicó ASP.NET MVC 3 y junto a ella se publicó también una versión de Web Matrix. Esta release incluía un montón de ejemplos que, lejos de ser simples ejemplos, muestran un montón de características para mostrar datos de muy diversas maneras.

Un ejemplo bastante interesante es WebGrid que nos muestra una forma muy simple de mostrar datos de manera personalizable, con paginación , ordenación y actualizaciones con AJAX.

Aquí tenéis un enlace que cuenta paso por paso cómo podemos usarlo, modificarlo e incorporarlo en nuestras aplicaciones.

Espero que os guste.

Juan María Laó Ramos

 

Serie sobre ASP.NET vNext

En los próximos meses trabajaré en una serie sobre las nuevas características que vendrán en las próximas versiones de ASP.NET y Visual Studio. Contienen un montón de nuevas funcionalidades y mejoras - tanto para Web Forms como para MVC - que pienso que os gustarán, y que hacen la creación de aplicaciónes más fácil, rápido y mejor.

Actualizaré esta página con enlaces a los posts individuales de la serie.

 - Smart Task y generacion de manejadores de eventos en el editor HTML (Serie ASP.NET vNext)

- Controles de datos fuertemente tipados

- Model Binding Parte 1: Seleccionando datos

Model Binding Parte 2: Filtrando datos

- Model Binding Parte 3: Actualización y validaciones.

- Nuevo soporte de Empaquetado y Minificación.

- Mejoras del editor de CSS en Visual Studio

Espero que sirva,

Scott.

Traducido por: Juan María Laó Ramos.

Sácale más provecho a tus desarrollos con WP7

Microsoft está empezando a desarrollar su plataforma de anuncios y está dando pasos uno detrás de otro.

Desde la nueva iniciativa en Microsoft Advertising pubCenter ya es posible darnos de alta y empezar a incluir anuncios en nuestras aplicaciones para WP7 para sacar más rendimiento de nuestros desarrollos sin coste para el usuario final siguiendo la línea de otros Markets como el de Apple o Android.

Cómo es la vida, el copiado se ha convertido en copiador, 😉

Y dentro de poco estará disponible una versión para poder hacerlo en nuestras webs.

Espero que os guste.