Qué es responsive web design. Lo básico.

01/02/2013 por lostium en Lost & Found

Lostiums,

Como parece que os enrolláis con esto del consultorio os quería preguntar: Eso del “responsive design”, ¿eso qué es lo que es?. Porque no paro de oir hablar de ello, pero no lo tengo nada claro.

Leo, Madrid.

Leer respuesta

Estimado Leo (mal comienzo, suena a “Querido Capricornio…”):

Hoy sabrás por fin qué es responsive web design, o como dice la R.A.E. «diseño web adaptable» recomienda Fundeu «diseño web adaptativo»:

(@RAEinforma había propuesto anteriormente «adaptable», pero no era muy acertado. Ahora la duda que nos queda es: ¿Cómo se va a acabar traduciendo “adaptive web design?”)

×Lo de @Fundeu en Twitter mola mucho: puedes lanzarles consultas a través de Twitter sobre el uso del idioma español (o castellano, es lo mismo) a cualquier hora del día, cualquier día de la semana. Un gran ejemplo de servicio que sabe aprovechar Twitter como un canal rápido y eficaz para comunicarse con sus usuarios. Nos gusta.

Volviendo al responsive design, y hablando de aplicaciones web, se trata de un planteamiento de diseño que permite crear apps que se “adaptan” al navegador en el que se ejecutan, mostrando una versión optimizada, ya se trate de un ordenador de sobremesa, una tableta, un móvil o cualquier otro dispositivo con pantalla. Conviene aquí no confundir el término “fluido” con “adaptatativo”. Adaptatativo quiere decir que no sólo el texto e imágenes crecen y decrecen en función del tamaño de la pantalla (fluídos), si no que el contenido se reagrupa y la disposición de elementos en la app cambia para mostrar de forma óptima su interfaz y contenidos, todo ello en función del tamaño y disposición de la pantalla del dispositivo del usuario. Esto se consigue gracias al uso de media queries, pero hablaremos de ello en otro artículo algo más técnico.

Pero como lo mejor es demostrar las cosas en la práctica, pon el cursor del ratón en la esquina inferior derecha de tu navegador, y arrastra haciendo la ventana más pequeña. Más pequeña… ¿Qué es lo que pasa? Que la web se reconfigura en función del dispositivo para optimizar su lectura y visualización.
Como intuimos que estás usando un móvil o tableta, será más difícil demostrártelo, pero si giras tu dispositivo, es más que probable que observes que algunas cosas cambian de sitio para facilitar su lectura.

Ejemplo de web responsive

×Si has conseguido retornar a la lectura después de la demo, entonces ya debes hacerte a la idea de en qué consiste el responsive design. Comentar también que existen servicios web donde puedes ver de un simple vistazo cómo se vería tu web responsive en distintos dispositivos móviles. Nuestras preferidas son Am I Responsive? y Responsinator.

¿Y esto es importante? Te preguntarás en tu fuero interno. Nosotros creemos que mucho: A la hora de abordar cómo mostrar tus productos o servicios en internet, ya sea a través de una web presencial o de aplicaciones complejas que ofrecen servicios diversos, el rango de potenciales dispositivos con los que los usuarios pueden ahora acceder va de smartphones con pantallas de 2 pulgadas a SmartTVs de 50″. En un mundo perfecto, si el cacharro tiene internet, tu servicio debería ser accesible y usable. Y gracias a técnicas como estas, puedes estar ofreciendo una experiencia óptima con acceso a las funcionalidades de tu app a todo ese rango de potenciales usuarios, y manteniendo un único acceso web. Si a esto le sumamos un área de administración con un WordPress personalizado como gestor de los contenidos, tenemos la herramienta perfecta para crear una aplicación multidispositivo y con una sóla entrada de datos.

Y todo lo anterior sin mencionar aún que el acceso vía móvil se ha generalizado tanto en los últimos años, que es de locos no prestarle atención: en el caso de Tuitrafico, ha pasado de un 14% de accesos móviles en 2011 a un 30% este último año y un 35% en el último mes (seguro que algo tiene que ver la compra compulsiva de tabletas durante las pasadas navidades). Si se mantiene ese ritmo de crecimiento, ¿qué hacemos todos que no estamos ya optimizando y construyendo plataformas que funcionen en móviles y tabletas?

Opciones existen, pero parecen mucho menos apetecibles: una versión optimizada para ordenadores de sobremesa, y las correspondientes versiones de apps para móvil y/o tableta, bien en HTML5 como hizo The Guardian a finales del año pasado, o nativas (una para cada sistema operativo móvil: iOS, Android, Windows8…). Sólo de pensarlo, me entran escalofríos… Menuda sangría.

El coste de desarrollar esta última opción es probablemente el doble o incluso el triple frente al coste de implementar diseño adaptatativo en una nueva web app. No sabemos si, como se ha publicado recientemente, será la tecnología del 2013 pero, en nuestro caso, tenemos la sensación de que se quedará un buen rato con nosotros.

×Nuestros últimos proyectos para clientes, Club de escritura Fuentetaja y Nik Mashup, también usan diseño responsive por si quieres “cacharrear” un rato con ellos.

Etiquetas:

Tecnologías que utilizamos: WordPress

24/01/2013 por lostium en Herramientas

Esta es la primera entrada de una serie donde os queremos contar las herramientas que utilizamos habitualmente en nuestro trabajo. Intentaremos no abusar de palabros y tecnicismos (aunque a veces nos pondremos gafotas y nos bajaremos al barro).

Comenzamos con WordPress, una de las herramientas favoritas para nuestro trabajo. Es complicado no conocerlo ya que es uno de los CMS o gestores de contenidos más populares del mercado.

WordPress, nuestro gestor de contenidos favorito

WordPress, nuestro gestor de contenidos favorito

Aunque todo el mundo lo conoce, no son tantos los que realmente saben de su potencial. Nos hemos encontrado clientes y amigos que cuando se lo recomiendas, lo primero que te dicen es: ‘yo no quiero tener un blog’. Hay una tendencia generalizada a asociar que WordPress es igual a tener un blog y nada más lejos de la realidad.

En sus comienzos nació para dar soporte a una extensa comunidad de bloggers, pero con el tiempo se ha convertido en un robusto CMS capaz de mantener cualquier tipo de aplicación web. Actualmente hay 60 millones de sitios corriendo con tecnología WordPress en Internet.

En nuestro caso lo utilizamos como un framework de desarrollo ya que nos facilita tareas básicas: operaciones CRUD, gestión de usuarios, recursos multimedia, comentarios y como es natural, gestionar los contenidos. Todo ello sin tener que tirar una sola línea de código, cosa que se agradece bastante.

Por otro lado, cuenta con una comunidad de desarrolladores que implementan cada día un buen número de plugins que pueden hacerte la vida mas sencilla. Si necesitas por ejemplo generar un sitemap o cachear tu sitio para minimizar el gasto de recursos, seguro que encuentras a alguien que ha implementado una solución, ahorrándote reinventar la rueda.

Todo hay que decir que también tiene sus sombras: si estas acostumbrado a lenguajes como JAVA o C++, seguramente mirarás con desprecio a lenguajes interpretados como PHP (nosotros lo hacíamos ;), no está del todo bien estructurado y la orientación a objetos se la pusieron con un calzador.

Pero si vas un poco más allá, te darás cuenta de que es un sistema flexible en el que realmente depende de ti, como programador, ser organizado y aplicar los patrones de diseño que necesites.

Volviendo a WordPress y simplificando a tope su arquitectura, se puede dividir en tres partes:

Wordpress - Arquitectura simplona

Norma básica: el núcleo no se toca. Si lo haces, bye bye a la posiblidad de actualizar la versión, con el consiguiente problema de seguridad y de pérdida de nuevas funcionalidades.

Las otras dos patas, plugins y themes realmente son las que nos permiten desarrollar aplicaciones a la medida.

Por regla general, creamos un plugin orientado a objetos con todas las funcionalidades que necesitamos, operaciones con el modelo de datos, obtención de información, interacción con otras APIs, etc.

A continuación creamos un theme desde cero, partiendo de la maquetación que hemos hecho en HTML5. Recortamos cada sección para completar sus correspondientes plantillas: portada, archivos, páginas, cabecera, pie, sidebar, comentarios… y además añadimos el código necesario para mostrar de manera dinámica el contenido gestionado por el CMS.

WordPress mantiene una extensa jerarquía de elementos que permiten conformar la presentación de la aplicación. Si te vas a dedicar a la creación de themes es imprescindible conocerla al dedillo.

Jerarquía de ficheros

Pincha solo si eres un valiente desarrollador

A grandes rasgos estos son los pasos que tomamos para implementar una aplicación Web con WordPress. En otros artículos profundizaremos a nivel técnico para enseñaros, por ejemplo, cómo hacemos plugins.

Etiquetas:

Necesito una Web… ¿Qué debo saber para que no me la cuelen?

por lostium en Lost & Found

Hola Lostiums, llevo tiempo queriendo tener una web para mi negocio de palomas mensajeras. Mi problema es que de palomas sé mucho, pero de Internet nada. Varias empresas me han ofrecido presupuestos pero no tengo claros los criterios para elegir la mejor oferta… ¿Podéis echarme una mano para saber por dónde empezar?

– Manuel –

Leer respuesta

Inauguramos esta sección con las preguntas más habituales que nos suelen hacer amigos y conocidos. Estamos seguros de que, en el futuro, esto nos ahorrará mucho tiempo: será una especie de LostiumFAQ al que remitiremos de buen grado a todo el que nos repita una pregunta ya contestada. Si tienes alguna duda técnica o crees que podemos echarte una mano, contacta con nosotros y estaremos encantados de intentar responderte a través de esta sección.

Una cosa que nos gusta advertir a la gente que no tiene perfil técnico es que al menos debe tener las nociones básicas para saber lo que está contratando. Es algo parecido a comprar un coche: no somos mécanicos, pero conocemos el modelo, la potencia y los extras que queremos en nuestro flamante vehículo.

Mensajería El Palomar

Es mucha la gente conocida que nos cuentan autenticos ‘dramas’ con sus proveedores de tecnología. Suelen ser víctimas de empresas ‘buitre’ con sistemas propietarios, facturados a doblón y que difícilmente permiten actualizar contenidos, ampliar secciones o llevarse la web a otra empresa sin pasar por caja.

El remedio está en los gestores de contenidos (aka CMS) open source. Lo del open source lo veremos otro día tranquilamente; hasta entonces, repite conmigo: “open source no significa gratis, open source no significa gratis…”. Un CMS open source es una herramienta soportada por grandes comunidades de desarrolladores y que cualquier programador puede personalizar o extender fácilmente.

La ventajas de utilizarlos son muchas. Puedes tener acceso a los contenidos y modificarlos sin tener conocimientos avanzados. La presentación suele estar separada del contenido, es decir, si en un futuro te cansas del diseño de tu web, será mucho más fácil rediseñar el formato ya que el contenido no es necesario cambiarlo.

Si vas a contratar el desarrollo de una web presencial, de esas de: ¿quiénes somos?, ¿dónde estamos? ¿a dónde vamos?… Al menos deberás hacer tres preguntas a la empresa que te va a ofrecer el presupuesto.

  1. ¿Qué gestor de contenidos utilizará la web que os estamos encargando?

  2. Si un día ocurre lo peor y vuestra empresa desaparece o decidimos cambiar de proveedor, ¿Podremos migrar fácilmente la aplicacion y su contenido a otro servidor?

  3. ¿Se verá bien la web en tabletas y móviles?

La primera pregunta se responde fácil. Si el comercial te dice que ellos han desarrollado una herramienta con nombre esotérico y que permite hacer toda clase de virguerías, sólo tienes una salida: ¡corre!

Nuestro consejo es que lo evites si puedes, a esta altura de la película no merece la pena utilizar software propietario, cerrado y, posiblemente, con coste por licencia.

Si en cambio se sorprende de que sepas lo que es un CMS y te dice que la web está basada en alguno de los gestores más conocidos como:

Logos de WordPress, Joomla y Drupal

Los gestores de contenidos más comunes del mercado: WordPressJoomla y Drupal

Sin duda, el panorama mejora. Utilizar cualquiera de estas herramientas facilitará el mantenimiento de la web y además, si en algún momento necesitas hacer cambios o migrar a otro servidor, te será mucho más fácil y económico encontrar desarrolladores para estas plataformas.

Con la segunda pregunta te aseguras un plan B. Estás haciendo una inversión para tu negocio y lo último que quieres es quedarte tirado. Lo suyo, es que puedas disponer de una copia de seguridad o un mecanismo de exportación para que, en caso de necesidad, no tengas que depender de terceros.

La tercera pregunta es relevante porque el porcentaje de dispositivos que se conectan a Internet aumenta día a día, las tablets se están adueñando de muchos sofás y realmente todo indica que la tendencia seguirá creciendo.

La primera recomendación en el apartado de movilidad es que tu web no debería utilizar Flash. Esta tecnología ha permitido durante muchos años a los diseñadores y programadores dotar a las webs de animaciones con interacciones impresionantes. De hecho, sigue siendo una de las herramientas más utilizadas para los llamados ‘casual games’. Pero en la actualidad está perdiendo terreno, el motivo: no funciona en tabletas y móviles. Steve Jobs se negó a integrarlo en sus dispositivos y eso ha hecho que la alternativa sea HTML5.

Si quieres ir más lejos, y tienes presupuesto para hacerlo, invierte en una web con diseño ‘responsive‘ o adaptable. Aunque profundizaremos en otros artículos, significa que tu web se verá de manera óptima y ajustada a cualquier tamaño de dispositivo.

Ejemplo de una de nuestras aplicaciones web con diseño responsive o adaptable

Nuestra opinión es que es mucho más fácil y económico hacer una web desde cero pensando que se visualice correctamente en todos los dispositivos, que lanzar primero una ‘estandar’ y luego en un futuro tener que adaptarla a dispositivos móviles.

Y por último, asegúrate de que te den por escrito y bien detalladas todas estas cuestiones. Todos sabemos que las palabras se las lleva el viento.

Si sigues interesado en conocer más sobre el tema o tienes alguna cuestión más específica, escríbenos y te aclaramos tus dudas.

Etiquetas:

Lostium, terminado en “m”

por lostium en Trabajo

Paraíso tropical

Paraíso tropical

Detrás de Lostium Project estamos en estos momentos Antonio García y Juanjo Gaspar. Antes de seguir con las presentaciones, y como bien se indica en el título, no somos muy buenos eligiendo nombres. Lo sabemos.

El nombre viene de hace varios años, cuando decidimos que íbamos a montar un servicio de recuperación de gadgets basado en etiquetas y geoposicionamiento. Y el título, de cada vez que tenemos que decir nuestro nombre por teléfono. El servicio no llegó a ver nunca la luz, tras mucho plan de negocio y poco “manos a la obra” (en aquellos días ambos trabajábamos a jornada completa en un broker online). Pero fue el germen de lo que hacemos hoy, así que el nombre se quedó.

Respecto a lo que hacemos ahora, podéis echar un ojo a la sección de proyectos para ver algunos ejemplos. En los últimos dos años, hemos hecho diversos trabajos para clientes, y también algún proyecto propio (con algún FAIL por el camino…).

Lo primero, decir que queremos incondicionalmente a todos nuestros clientes, y los que lo han sido, saben que cuidamos de sus proyectos como si fueran los nuestros. Hemos crecido y adquirido mucha experiencia gracias a su confianza y su ilusión por sacar adelante nuevas ideas. Y eso a pesar de nuestra web.

Tras lo dicho, en los últimos años hemos ido aparcando bastantes ideas de aplicaciones, utilidades, inutilidades, e incluso de desarrollos hardware que nunca encontraban su hueco entre cliente y cliente. Gracias a que somos un equipo pequeño y mantenemos una estructura de costes muy reducida, hemos decidido dedicar los próximos meses a desarrollar lo que nos apetezca. Tenemos mil ideas de proyectos, y nuestra intención es sacar adelante cuantos más mejor, por lo que se tratará, en la mayoría de los casos, de pequeñas aplicaciones, plugins, un proyecto de Arduino o Raspberry Pi (tenemos prototipos para ambos)… incluído el rediseño de Tuitrafico, que ha dejado de formar parte de lainformacion.com. Hemos empezado por esta web, porque ya empezaba a ser urgente poder contar todas las cosas que hacemos habitualmente. Normalmente nos encanta nuestro trabajo, pero los próximos meses van a ser alucinantes.

Aunque ésta había sido nuestra intención desde el principio, la realidad te golpea insistentemente con un plato tres veces al día (a algunos incluso más) y, siendo prácticos, en la mayoría de los casos hemos tenido libertad suficiente con nuestros clientes como para sentirnos cómodos, e incluso proponerles desarrollos que sabemos que les podían encajar, encargándonos nosotros de toda la especificación.

A pesar de que la gente insiste en que tenemos que crecer, que podríamos hacer el doble o el triple de proyectos para clientes de los que hacemos actualmente, nos gusta tener la libertad de decidir en qué vamos a trabajar y cómo lo vamos a hacer. En el momento que arrastras un equipo más grande, esto ya no es posible, y las obligaciones te empujan en la senda del trabajo alimenticio, que está bien, pero no es tan divertido. Además contamos con la ventaja de cubrir con sólo dos personas perfiles complementarios (diseño y desarrollo front,  y desarrollo de backend y programación), por lo que sólo nos queda tirar millas…

También somos conscientes de las limitaciones que esto supone: siendo sólo dos personas en el equipo, nos encargamos de hacer lo mejor que sabemos todo el trabajo de: mock-ups y prototipos, maquetas en Photoshop, ilustraciones con Ilustrator, diseño, UX, logos, copy, desarrollo en HTML5, animaciones en javascript, fotografía, desarrollo en PHP, administración de servidores y de bases de datos, vídeo… Y así puedo seguir todo el día. Obviamente, somos dos personas haciendo el trabajo de un equipo de al menos 6 perfiles distintos, pero tampoco estamos hablando de refundar MySpace. Parte de nuestro objetivo es también aprender a hacer cosas nuevas o que no solemos hacer habitualmente. Y pasarlo bien, claro.

Sabemos que resulta difícil generar ingresos por esta vía, pero de la capacidad de generar ingresos con alguno de estos proyectos, dependerá el que podamos extendernos más en el tiempo experimentando y desarrollando otras ideas. Contamos con la ventaja de la experiencia adquirida, que en la actualidad nos permite desarrollar una aplicación básica multidispositivo con diseño responsive y backend basado en WordPress, en tiempos tan cortos como un mes. Por otra parte, la nueva web lleva ya una semana de retraso en el planing que cuelga a mi derecha. Nadie dijo fácil.

Etiquetas: