desarrollo 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…

Suscríbete:

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 [338]

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/

Anywhere, la nueva herramienta para webs de Twitter

16 marzo 2010

El presidente de Twitter, Evan Williams, ha realizado la presentación oficial de Anywhere, una nueva plataforma desarrollada por el servicio de microblogging para integrarse en todas las webs.

Desde hace tiempo ya hay plugins y extensiones para los diferentes CMS utilizados en la web para integrar el sistema con Twitter, pero @anywhere será la implementación oficial y podrá utilizarse en cualquier página de una forma más sencilla implementando solamente unas líneas de código en JavaScript como requisito.

Básicamente con @anywhere se podrá obtener gran parte de la información vital de una persona, grupo o web que tenga un usuario de Twitter. Información como el último mensaje publicado, seguidores, acciones como seguir o dejar de hacerlo dentro del mismo sitio, sin tener que ir la página web del usuario en Twitter para realizarlas. Algo similar a lo que ya está integrado de cierta forma dentro de la misma web oficial de Twitter cuando se sitúa el cursor encima de la foto de perfil de un usuario que sigues.

En el artículo del blog oficial de Twitter comentan:

Imagina poder seguir a un periodista del New York Times directamente desde su página de autor, tweetear acerca de de un vídeo sin salir de YouTube, y descubrir nuevas cuentas de Twitter visitar la página inicial de Yahoo!. Y ese es solo el principio. Twitter ha probado que es atractivo en muchas formas. Con @anywhere, los dueños de los sitios web y sus operadores podrán ofrecerle a sus visitantes más valor sin menos trabajo pesado.

A continuación una demostración en vivo de Evan Williams en la pasada SXSWi 2010 usando esta plataforma:

Facebook estrena un nuevo rediseño

5 febrero 2010

Con motivo del aniversario de la red social más grande del mundo actualmente, Facebook nos sorprende con un nuevo rediseño de su página incial. Tras varios intentos anteriores de ofrecer un diseño que facilitara la navegación han tenido en cuenta las sugerencias de los usuarios y ahora parece que han logrado ofrecer una nueva interfaz mucho más potente.

Volvemos a tener las tres zonas completamente diferenciadas:

La parte izquierda con los accesos a nuestras secciones, juegos, aplicaciones y como novedad un listado de nuestros amigos que estén conectados en ese momento para chatear con ellos.

En la zona central tenemos la sección de contenido: las fotografías se visualizan a un tamaño más grande y toda la navegación que realicemos por el sitio se actualizará automáticamente en esta sección sin necesidad de recargar la página. Además ya está disponible la búsqueda en tiempo real.

El la barra de la derecha nos encontramos con lo que ya teníamos hasta ahora: las notificaciones de peticiones de amistad y sugerencias de grupos y páginas, los anuncios publicitarios, los recordatorios de eventos y cumpleaños y en la parte inferior el acceso al chat.

La mensajería y las notificaciones se han movido a la zona superior (junto con el buscador) y se navega por ellas a través de un panel emergente sin necesidad de salir del tablero inicial.

Ahora solo queda esperar a que los usuarios lo utilicen y valoren su funcionalidad. ¿Será el diseño definitivo de la red social?