Test de compatibilidad con HTML5 comparando un Nexus 4 con Android 4.3 (izquierda) vs un Nexus 5 con Android 4.4 (derecha).
Continuar leyendo
desarrollo web
Hay 42 posts etiquetados con desarrollo web.
BarcelonaJS: evento para la comunidad JavaScript en Barcelona
El BarcelonaJS es un evento enfocado para desarrolladores relacionados con el mundo de JavaScript que se celebra en Barcelona todos los segundos martes de mes. Desde septiembre los eventos se organizarán en el edificio del Mobile World Centre.
Mi charla sobre Libra Movilidad en el primer Betabeers Pontevedra
Ayer se celebró el primer Betabeers Pontevedra, organizado gracias a @joseate y @reiaguilera, y tuve la suerte de poder participar dando mi primera charla en un evento de estas características. Continuar leyendo
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
Messi, plugin jQuery para mostrar alertas, preguntas, mensajes e imágenes
En el proyecto que estoy realizando para el trabajo necesitaba un plugin sencillo que me permitiese lanzar alertas y mensajes con la posibilidad de obtener la respuesta del usuario para realizar una acción en particular. Continuar leyendo
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
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.
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.