Microsoft presenta TypeScript: una evolución del lenguaje JavaScript

TypeScript es un lenguaje para el desarrollo de aplicaciones escalables basado en JavaScript.

Realmente TypeScript es un superconjunto de funcionalidades escrito para JavaScript que compila código a JavaScript plano. Aplicando parte de la misma sintaxis y semántica que los desarrolladores web ya conocen de JavaScript, con TypeScript tendrán acceso a nuevos componentes como clases, tipos y módulos de los que el lenguaje original carece y que nos facilitarán el desarrollo de aplicaciones de gran escala.

TypeScript puede utilizarse con código JavaScript ya existente, incorporar las bibliotecas más populares de JavaScript (como jQuery, Prototype…) y ser llamado desde otro código JavaScript, ya que al compilar genera simple código JavaScript que se ejecuta en cualquier navegador, en un servidor Node.js o en cualquier entorno ES3 compatible.

Microsoft publicará próximamente un plugin de TypeScript para utilizar en Visual Studio 2012.

Enlace: TypeScript

Infografía: La evolución de la web [Google I/O]

Durante la segunda jornada del Google I/O, en la presentación realizada por Brain Rakowski, se mostró una infografía interactiva sobre la evolución de las diferentes tecnologías web y los principales navegadores.

La infografía desarrollada por el equipo de Google Chome se puede visitar, está disponible completamente en castellano y permite interactuar con ella para obtener información sobre como a lo largo del tiempo, las tecnologías web han evolucionado hasta permitir que los desarrolladores puedan crear nuevas e increíbles experiencias web en la actualidad.

Las líneas de color de esta visualización representan la interacción entre los navegadores y las tecnologías web, y cubren desde el inicio del protocolo HTTP hasta los últimos progresos como animaciones de CSS3, Web Workers o eventos táctiles.

Enlace: La evolución de la web

Google Chrome permite cambiar el User Agent a partir de la versión 17

Zemanta Related Posts Thumbnail

En el pasado Google DevFest de Barcelona le pregunté a Sam Dutton tras su charla sobre las Chrome Dev Tools si el navegador incorporaría alguna vez la posibilidad de cambiar el User Agent. Sam me contestó que era algo que estaba solicitando mucha gente y, desde la versión 17 del navegador, ya está incorporado.

Desde el panel de herramientas de desarrollo, hacemos click en el icono de configuración de la esquina inferior derecha y activamos la opción “Override User Agent” seleccionando en la lista inferior la opción que queramos.

De este modo podemos comprobar el funcionamiento de nuestra web cuando accedemos identificados como Internet Explorer, un iPad o el Android Nexus S entre otros…

El W3C presenta el logo oficial de HTML5 y los iconos de sus tecnologías

La World Wide Web Consortium (W3C) ha presentado el logotipo oficial para HTML 5, que se utilizará en aquellas páginas web que deseen informar a los visitantes de las tecnologías implementadas en su web.

El logo, diseñado por la empresa Ocupop, pretende simbolizar con su forma trapezoidal cómo HTML5 se sitúa en el centro del movimiento de la tecnología actual e intenta estandarizar visualmente las diferentes tecnologías que se manejan habitualmente al tratar con HTML5.

Continuar leyendo

Aprende con Google a programar en HTML5

Las buenas relaciones de Google con Adobe, promoviendo Flash en sus teléfonos Android, no tienen por qué ser un motivo de despreciar HTML5 y apoyar a los desarrolladores web a utilizar más esta tecnología.

A través de la web http://www.html5rocks.com/ Google ofrece presentaciones, tutoriales y ejemplos para dar a conocer entre los programadores las ventajas y capacidades de la unión de HTML + CSS + JS. Tutoriales por ejemplo para aprender como habilitar tu aplicación web para que funcione en modo offline, acceso a la geolocalización o leer archivos locales mediante JavaScript. Continuar leyendo

Tutorial: Intro de LOST usando CSS3

He creado un pequeño ejemplo para mostraros tres de las nuevas propiedades que encontraremos disponibles en CSS3: las transformaciones, las transiciones y las sombras. El ejemplo friki reproduce la animación del título en la introducción de la serie Lost (como tributo a su finalización).

Aviso: Este ejemplo solo funcionará en aquellos navegadores que ya tengan implementadas estas nuevas propiedades de CSS3, como por ejemplo Firefox 3.7, Safari 4, Chrome 5 y Opera 10.

El ejemplo muestra el texto LOST inicialmente con una opacidad, tamaño de fuente y rotación. Cuando se posiciona el cursor sobre el texto gracias a la propiedad transition aplicaremos una animación que cambiará estos tres valores iniciales y le añadirá una sombra al texto.

El código CSS necesario sería:

div{
-webkit-transform: rotate(-15deg) scale(1) skew(0deg);
-webkit-transition: all 3s ease-in;
}
div:hover{
text-shadow: 3px 3px 5px #CCC;
-webkit-transform: rotate(20deg) scale(1) skew(-30deg);
}

De este modo estaríamos indicando que el texto inicial tiene una rotación de -15 grados, sin plegamiento y sin escalado. La transformación que se va a aplicar afectará a todas las propiedades (all), durará 3 segundos y como se comportará durante el tiempo de animación (en este caso ease-in).

El punto final de la animación lo asignamos en el div:hover. Aquí indicamos una sombra para el texto (posición izq/der, posición arriba/abajo, tamaño y color) y la transformación final del texto.

Demostración | LOST Intro en CSS3 (994)