desarrollo web

Microsoft presenta TypeScript: una evolución del lenguaje JavaScript

2 octubre 2012

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

Suscríbete:

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

2 julio 2012

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

12 diciembre 2011

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

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

18 enero 2011

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.

Facebook cambia su estrategia de integración y apuesta por los iframes en lugar del FBML

20 agosto 2010

A la hora de integrar los servicios sociales de Facebook en una página web los desarrolladores disponían de dos métodos, o bien usando los archiconocidos iframes o usar el FBML, un lenguaje de etiquetas propio de Facebook que se reemplazaban en el código mediante la carga de un javascript.

Tras desarrollar este lenguaje de etiquetas y fomentar su uso entre los desarrolladores ahora Facebook cambia su estrategia y anuncia que “a partir de final de año no se podrán crean nuevas aplicaciones usando FBML, así que toda integración con las aplicaciones y páginas se realizarán mediante iframes y el JavaScript SDK“.

Botones oficiales de Twitter para compartir enlaces

12 agosto 2010

La red de microblogging Twitter estrena hoy un servicio que ya estaba disponible pero no de forma nativa: botones oficiales para compartir enlaces a través del timeline.

La opción de incluir botones para enviar a Twitter en las entradas de blogs y demás páginas web ya estaban disponibles con servicios como Topsy o Tweetmeme, los cuales además de incluir el botón gestionaban la cuenta de las veces que un enlace había sido compartido en la red social.

Aprende con Google a programar en HTML5

23 junio 2010

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.

Tutorial: Intro de LOST usando CSS3

28 mayo 2010

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

Usar las fuentes de Google Font API en nuestras páginas web

20 mayo 2010

Google Font API es una de las nuevas herramientas anunciadas ayer en el evento I/O 2010. Esta herramienta nos permite incluir tipografías open source en nuestros desarrollos web de una forma sencilla simplemente añadiendo una línea de código.

Google se encargará de almacenar estas tipografías en un directorio de fuentes que podremos utilizar con tres sencillos pasos:

1.-Acceder al directorio de fuentes de Font API y seleccionar la fuente que deseamos utilizar haciendo clic sobre ella. En este ejemplo vamos a seleccionar la fuente Yanone Kaffeesatz:

2.- En la ficha de la fuente seleccionada tenemos una previsualización de la misma en diferentes tamaños de letra, así como la posibilidad de revisar todos los caracteres incluídos (por ejemplo, por si queremos ver si soporta tildes). Si nos movemos a la pestaña de Get Code tendremos el código necesario que tenemos que incluir en nuestra página para usar la tipografía:

Además tenemos marcado el nombre que tendremos que utilizar en la propiedad font-family de la hoja de estilos para vincular la tipografía a un elemento determinado.

3.- Finalmente añadimos esta línea dentro de la etiqueta head de nuestro código y antes de su utilización en el css. Un ejemplo sencillo sería:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Google Font API</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
<style>body{ font-family: 'Yanone Kaffeesatz', arial, serif; font-size:75px; text-shadow:4px 4px 4px #aaa; }</style>
</head>
<body>
Google Font API : )
</body>
</html>

Y su resultado nos daría:

Y cabe destacar que Google Font API ofrece compatibilidad total con navegadores obsoletos. Por ejemplo, si entramos en la ficha de la fuente Yanone Kaffeesatz con el navegador Internet Explorer 6:

Más información: http://code.google.com/apis/webfonts/

Lo que nos ha dejado el primer día del Google I/O

2 junio 2010

En el Moscone Center de San Francisco ha comenzado el I/O 2010, el evento de Google más importante enfocado principalmente a los desarrolladores. Durante la conferencia del primer día Google ha anunciado muchas novedades que vamos a enumerar a continuación, la mayoría de ellas enfocadas al futuro de la web y la utilización de HTML5.

Campaña de Microsoft en contra de Internet Explorer 6

17 mayo 2010

Conscientes del daño que ha provocado y continúa haciendo la versión 6 de su navegador Internet Explorer (versión que venía por defecto en Windows XP) la propia Microsoft ha comenzado una agresiva campaña en contra de su producto y en apoyo de todos aquellos desarrolladores web que llevan años intentando convencer a sus clientes que hay que cerrarle las puertas de una vez por todas a este navegador.

No beberías leche de hace 9 años.

Con esta escueta frase Microsoft pone de manifiesto la necesidad de actualizar la versión del navegador Internet Explorer en todos los equipos que continúen trabajando con Internet Explorer 6. La utilización de una versión de navegador con 10 años de antigüedad, no solo es un grave problema de seguridad sino que además no estaba preparada para la evolución del contenido web en estos años.

Adaptar un desarrollo web a una versión tan obsoleta conlleva un gran esfuerzo por parte de los desarrolladores, incumplimiento de los estándares web (ya que IE6 no los soportaba completamente) y en ocasiones la no posibilidad de implementar nuevas funcionalidades en el sitio web.

Es por ello que muchas de  las empresas con más nombre en internet, como Google, Yahoo o Facebook, hayan dejado ya de dar soporte a Internet Explorer 6. Si sus nuevas funcionalidades funcionan en esta versión genial, pero si no no se dedican a corregirlas, el usuario tendrá que actualizar su navegador.

Si quieres disfrutar de la mejor navegación web, accediendo a todas las funcionalidades y disfrutando de una mejor calidad visual, y quieres tener la máxima seguridad y protección a la hora de navegar, actualiza tu Internet Explorer, o prueba:

Vía: macoteca

Adobe CS5 exportará animaciones a HTML5: ¿el final de Flash?

12 abril 2010

El uso de Flash en la web viene siendo una importante discusión en el entorno del desarrollo web. Actualmente hemos convivido con Flash y nos hemos acostumbrado a ver su uso en banners publicitarios, reproductores de video, sonido y juegos.

Pero existe una fuerte tendencia en favor de reemplazar el contenido desarrollado en Flash a la utilización de estándares web gracias a las funcionalidades que nos ofrece el futuro HTML5. La presión de la comunidad en abandonar este formato privado vienen apoyadas por ejemplo por Apple y su negativa a permitir la ejecucón de Flash en los iPhone e iPad.

Adobe se ha dado cuenta de este movimiento y, en lo que para mi es el comienzo de una rendición, van a integrar un modo de exportación de animaciones Flash a HTML5 en su próxima Creative Suite. A través de una opción en la aplicación de Flash se podrá generar un archivo XML con toda la información de la animación. Este archivo será procesado a través de JavaScript en la página web y mediante el uso de canvas reproducirá la animación exactamente igual.

En el siguiente video se puede ver en funcionamiento esta nueva característica:

Con este método para exportar animaciones y la posibilidad de reproducir multimedia con HTML5 ¿será este el comienzo del fin de Flash en la web?

Vía: The Inquirer

Elastic: editar fácilmente los temas de WordPress

8 abril 2010

Todos aquellos usuarios de WordPress como plataforma de blogs sabrán que uno de los temas que requieren de la mano de un desarrollador o por lo menos un usuario con experiencia es la parte de adaptación del aspecto visual del blog.

Actualmente o bien utilizamos alguno de los temas gratuitos disponibles o tenemos que tocar el código de los archivos *.css para adaptar la apariencia a nuestras necesidades.

Elastic es un nuevo enfoque en la implementación de temas para WordPress que permite que un usuario con nivel básico pueda editar su propio tema desde un entorno amigable y cómodo.

De momento existe tenemos poca información sobre el proyecto,  se encuentra en sus primeras etapas de desarrollo en la versión 0.0.3, pero estará disponible gratuitamente y bajo licencia GPL. Os dejamos con un video para que veáis el potencial de la herramienta:

Más información: http://elastictheme.org/