Archivo de 2011

Responsive Design

21 de noviembre de 2011 // Publicado en CSS, CSS3, HTML, Móviles
En los últimos meses/años estamos viviendo un momento en que la compatibilidad entre diferentes plataformas no sólo depende de un proveedor, si no que el mercado se está distribuyendo y descentralizando además de aumentar exponencialmente en navegación desde terminales móviles. En respuesta, han surgido diferentes tecnologías o maneras de entender las anteriores que nos permiten adaptar los contenidos a todos los usuarios, sin morir en el intento claro. Una de ellas es lo conocido como “Responsive Design“, y se puede ver claramente como funciona en los sites de la entrada relacionada con esto, simplemente, redimensionar el navegador y mirar como mola. Responsive Design es la utilización de tecnología CSS3 con tal de remaquetar el site de una manera ágil y dinámica, con todo lo positivo que ello supone aunque por otro lado no es oro todo lo que reluce. En este pequeño artículo voy a intentar desgranar un poco que es, donde nos puede ayudar, que limitaciones tiene y si vale la pena o no. Comentado anteriormente, utiliza tecnología CSS3 como base, de manera que no es necesario tocar nada de programación para poder crear las diferentes versiones del site. Para ello, lo que este concepto nos puede ayudar es en cargar y aplicar diferentes hojas de estilo según la resolución de la pantalla en la que estemos visualizando el site, ojo porque es independiente del SO y de la versión del navegador, tiene en cuenta varias opciones, las que más nos van a servir son las siguientes: •    Alto y ancho de la pantalla del navegador •    Alto y ancho de la pantalla del aparato •    Orientación, por si está vertical o horizontal Las diferentes opciones de la etiqueta “media” para este propósito son: •    Width/Height: es el ancho/alto de la pantalla de la aplicación sobre la que se visualiza el site. •    Device-width/Device-height: es el ancho/alto del dispositivo de la aplicación sobre la que se visualiza el site. •    Orientation: se puede pasar “portrait” o “landscape” y nos permite controlar la visualización en ambos modos. Un ejemplo de ello podría ser el siguiente: <link rel=”stylesheet” type=”text/css” media=”only screen and (max-width: 480px)” href=”small-device.css” /> <link rel=”stylesheet” type=”text/css” media=”screen” href=”general.css” /> Lo que estamos haciendo es asignar un fichero CSS llamado “small-devices.css” que se activará en el momento que nuestra pantalla tenga una resolución de 480px o inferior, en caso que tuviese 481px cargaría el fichero CSS genérico. Permitiendo marginar hasta límites tan altos como queramos entre diferentes tipos de tamaño y modos, de una manera realmente fácil y cómoda. Hasta aquí todo han sido cosas positivas y que nos ayudan de una manera sobresaliente, no obstante, también existen diferentes problemas que nos complican el resultado final. En primer lugar, tenemos que pensar, que a los usuarios de escritorio no le gusta esperar para ver una página, como por ejemplo la home del site, y más o menos, entienden, que quizá deberán esperar algo más si quieren ver una imagen con gran resolución si la han solicitado. No obstante, y aquí vienen los problemas, por norma general los usuarios quieren extrapolar la velocidad de su navegador de escritorio a su navegador móvil, siendo este último más pobre en opciones y, el dispositivo, sin contar con conexión WiFi, considerablemente más lenta. Ahora voy a pasar a considerar una serie de cuestiones que ponen en entredicho si realmente a nosotros nos va a beneficiar o no hacer una “portabilidad” utilizando esta tecnología o no: Imágenes En primer lugar, las imágenes que podemos tener en un dispositivo móvil son considerablemente más pequeñas, incluso en su tamaño máximo, con tal de evitar scrollers horizontales de modo que tenemos que encontrar un sistema práctico de poder redimensionar en peso estas. Por medio de PHP se puede hacer fácilmente no obstante tenemos que integrarlo con el dispositivo que lo está viendo en cada momento, no obstante hay que tener en cuenta el coste que conlleva a nivel de CPU en el servidor. Contenidos no visibles La función que hacen los media-querys y los CSS es mostar/esconder y/o modificar los estilos de manera que las diferentes cajas de maquetación se adapten, bien, esto implica que si un contenido no se puede mostrar no lo eliminamos de la carga en ningún momento, simplemente no se muestra, lo que no hace que la carga sea menor, lo que conlleva una optimización peor. Compatibilidades con CSS3 No todos los navegadores móviles son compatibles y no nos van a permitir hacer lo que queremos, el gran Quirksmode nos ilustra en el tema. Existen alternativas para obtener el mismo resultado, por ejemplo con JS se podía detectar el tamaño de la pantalla y cargar un fichero u otro, o incluso hay una librería llamada “CSS3 Mediaqueries JS” que nos ayuda con este asunto, pero estamos en la misma situación de la carga de ficheros innecesarios en ciertos momentos. Creado vs Portados Por norma general todas las cosas que están creadas para una función específica responden mejor que las que tienen varias funcionalidades aprovechando ciertas tecnologías disponibles, por ejemplo, no es lo mismo visitar Google+, Facebook o Twitter mediante una navegador móvil que mediante las aplicaciones creadas para ello. Por lo que, tendremos que pensar bien en que medida nos va a funcionar mejor que opción, y para ilustrar el concepto que mejor que una imagen gracias a la ayuda de YSlow. Comparamos en la izquierda el :

Como se puede ver, claramente la versión móvil explícitamente creada tiene un peso y menor y el número de peticiones es menor por lo que está mucho más optimizada en rapidez al usuario móvil con tal de la que la experiencia escritorio y móvil sean iguales. Necesidades Y no por estar el último punto es el menos importante. Es importante entender que necesidades tienen los usuarios cuando visitan el site, ya que no es lo mismo que un usuario necesite consultar los datos de contacto a que tenga que buscar o leer contenidos durante un tiempo. Testing Y es que parece una chorrada pero si queremos asegurarnos de que nuestros usuarios van a tener una experiencia buena, tenemos que hacer un testing intensivo. Existen diferentes maneras de hacerlo, unas más caras que otras e incluso gratuitas pero siendo de pago no, el tiempo que debemos dedicar a este punto es importante y asegurarnos, de la manera que podamos, de que los emuladores realmente emulan como debería ser. En conclusión, nada es la panacea, y siempre va a depender de a quien y como queramos llegar y si nuestros usuarios van a aumento de cara móvil o son más de escritorio, de manera que en unos casos sí será interesante hacer una versión móvil y en otros con las soluciones como el Responsive Design tendremos una alternativa fácil y rápida.

Webby Talks en Pulpolab

7 de noviembre de 2011 // Publicado en Web
Webby Awards es una empresa de Nueva York que da premios a las mejores webs desde 1996. Este año junto a VitaminT han creado Webby Talks, unas charlas que organizan en las mejores agencias interactivas de las principales ciudades del mundo. Para nosotros ha sido todo un honor que se fijaran en nuestro trabajo y que formemos parte de un grupo selecto de agencias como: - Fantasy Interactive - Herraiz Soto - Ogilvy - Wieden And Kenedy - Y otras muchas más que podéis ver en el calendario de Webby Talks. Gracias a Claire Graves por venir a visitarnos y a: - David Okuniev de Fat Man Collective - Maria Ripoll, fundadora de Escritura Profesional - y a Juan Carlos Pell, especialista SEO freelance por enriquecer la charla de Webby Talks Si queréis más información visitar: http://tumblr.webbyawards.com/about http://www.webbyawards.com/

Buenos ejemplos de Responsive design

7 de octubre de 2011 // Publicado en Sin categoría
Yoke thisisyoke.com Ribot http://ribot.co.uk/ Food Sense http://foodsense.is Y aquí un artículo sobre Responsive Design

Links variados de HTML, CSS

21 de julio de 2011 // Publicado en CSS, CSS3, HTML, HTML5, Web
CSS Media queries – muy interesante para crear una web que se adapte a diferentes pantallas (ordenador, móvil, tablet, …) Responsive web design http://lessframework.com/ http://lesscss.org/ WEB HTML/JS/DOM/CSS hacks – hacks no tan populares pero útiles Trucos para el web debugging

Tags: , ,

Links frescos de HTML5

21 de julio de 2011 // Publicado en HTML5
HTML5 demos y tutoriales HTML5 rocks. Tutoriales y ejemplos HTML5 demos HTML5 performance – artículo que muestra la optimización del HMTL5 Pop Corn js - HTML5 video framework SWF TO HTML5 – herramienta para convertir flashes a swf. CANVAS HTML5 http://calebevans.me/projects/jcanvas/ Frameworks para crear aplicaciones móviles con HTML5 Appcelerator Ios Boot Camp

Links de Javascript

21 de julio de 2011 // Publicado en JavaScript
Aquí vienen unos links de javascript fresquitos para el verano! ;)   Web sockets Socket.io - Librería de sockets para javascript APE project - Otra librería de sockets para javascript Tutorial para usar sockets en javascript   Servidor js Node js - Librería para crear un servidor con javascript Tutorial de nodejs – Siedrix.com Tutorial de nodejs - Maestros del Web Express - Otra librería para crear un servidor   Componentes Visual Search – Componente que te permite hacer la funcionalidad Autocompletar Wormhole Micro js – Buscador de javascripts   Optimización Gestión de memoria javascript   Frameworks javascript Con la idea de adelantar el futuro del ECMAScript, y aunque no todo el mundo está de acuerdo, han surgido diversos frameworks: Traceur compiler Coffee Script. Tipo MCV –> Angular JS

JS Next

Backbone

    Fuentes: http://futureofwebapps.com/london-2011/schedule/ http://www.etnassoft.com/2011/05/09/el-futuro-de-javascript-tras-la-jsconf-2011/ http://www.readwriteweb.com/hack/2011/01/interview-coffeescript-jeremy-ashkenas.php  

HTML5 Reset WordPress Theme

21 de julio de 2011 // Publicado en HTML5
HTML5 Reset WordPress Theme (te crea un tema sin estilos, en blanco, con el doctype y reseteo CSS optimizado para HTML5) http://html5reset.org/  

Sprite Cow para sprites HTML

21 de julio de 2011 // Publicado en HTML
A través del twitter de Smashing Magazine he encontrado esta utilidad, Sprite Cow. Subiendo un sprite de imagenes de ayuda a coger el background-position, width y height de cada imagen. Echadle un vistazo, lo he probado y funciona muy bien! Sprite Cow

Un poco de Coda: Snippets

21 de julio de 2011 // Publicado en HTML
Aquí va un enlace interesante para instalarse los Snippets para Coda, qué gran programa!! http://css-tricks.com/snippets/  

Gestor de cargas para javascript

21 de julio de 2011 // Publicado en JavaScript
Para gestionar el orden y prioridad de las cargas de los elementos de una página web nos podemos ayudar de estas librerías: http://blog.unijimpe.net/lazy-load-retrasar-carga-de-imagenes/ http://www.appelsiini.net/projects/lazyload