Flexbox for the real world: Sticky footer fallback

Take advantage of flexbox for layout while still providing support for older browsers.

Publicado:

Flexbox has long been the promise of a revolution, had it been specified as it is today, when the original proposal came out, the adoption today would be complete. I’ve been playing with flexbox since the original syntax came out, and I loved it, specially coupled with media-queries, there was even a polyfill for IE. But as I tried to use it in production, I spent a week trying to figure things out, found big inconsistencies and bugs in the implementations that made it impossible to use it in production, with a disillusioned heart I dropped it. Four years later it’s ready for everyday use (with the proper fall-backs). Read more / Leer más

Remote working: our experience with Sqwiggle

Remote working is made easier than expected with the right tools.

Publicado:

As a design and development agency we have worked in may ways, for some years we even had a big office with many people working there. For the last 4 years we have been working from home. For many projects we “call in” contractors and work remotely with them, most of whom we have never seen in person. One problem has always been communication, even with people working in the same space. Read more / Leer más

Schema.org: datos estructurados

Como utilizarlos y sacar provecho en una tienda on-line

Publicado:

Los documentos de un sitio web por lo general no son más que textos, imágenes y enlaces. Pero nosotros somos los encargados de darle significado semántico a ese contenido, para que un buscador pueda discernir y entender de qué trata realmente un documento, logrando finalmente jerarquizar los datos y de esa manera entregar resultados de búsqueda certeros a los usuarios. Mientras más significado le demos a los datos de un documento mejor, y en caso como una tienda on-line, mientras más datos pueda ver un usuario de tu producto sin siquiera entrar a tu sitio web, si no que directamente en un buscador, mejor. Read more / Leer más

Macaw

Impresiones luego de haber probado este diseñador web

Publicado:

Me encargaron la tarea de probar Macaw, una herramienta para diseñar sitios web la cual profetiza “para de escribir código, empieza a dibujarlo”. Pensé “Bah… otra herramienta mas del tipo WYSIWYG”. Uno suele tener ciertos traumas con estos tipos de herramientas, quizás venga de lo mal que lo hacía Dreamweaver, o que da la sensación de que compiten por cual termina produciendo el peor código, códigos que vienen del mismo infierno, lleno de tags vacíos, id’s hasta en el <body> y un sin fin de clases CSS. Read more / Leer más

Guías de estilo front-end en sitios existentes

Una aproximación a generar guías de estilo en sitios web existentes

Publicado:

Desde que trabajamos con la Paz Vial , todos los años hacemos cambios en el sitio, este año estamos trabajando en grandes cambios, pero tenemos un legado de 3 años de modificaciones al CSS y entremedio adoptamos SASS, hay que hacer orden y limpieza, especialmente documentando los estilos de la marca. Acabo de terminarme la “Guía de bolsillo” Front-end Style Guides de Anna Debenham Es una confirmación de algo que sospechaba hace tiempo. Además da un montón de buenos recursos (mencionaré un par aquí). Read more / Leer más

Flujo de trabajo en Drupal con Git

Cómo trabajar en un proyecto de Drupal en equipo y no morir en el intento

Publicado:

Todo equipo cuenta con su flujo de trabajo establecido, lo más seguro es que hoy en día gran parte de ellos trabajen con algún sistema de control de versiones como Git o SVN, permitiendo no pisarse la cola unos a otros. Comúnmente todo funciona perfecto, ya que todo el proyecto es desarrollado por el mismo equipo, pero es un poco distinto cuando se trabaja sobre un proyecto que viene desde terceros, que no es pequeño, y que recibe actualizaciones constantemente: Drupal. Muchos tienden a colapsar cuando tienen que actualizar un módulo o el core del sistema, típicamente por problemas de incompatibilidad entre la nueva versión del core y el módulo. Read more / Leer más

Animating vapour with JavaScript on canvas

Particle animation rendered on the canvas element

Publicado:

As my day to day development must include support for IE8 and sometimes even IE7 playing with the recent toys is not possible, unless they degrade gracefully. But with mobile development, the story is different, now I have to replicate a vapour animation done in flash, but in regular HTML/Javascript. Enter <canvas>… All my experience with canvas has been just a few shapes a few years ago, it seemed really similar to the ActionScript drawing API and Bitmap Classes, today I’ll put that to the test. Read more / Leer más

Cómo actualizar Drupal Core usando linea de comando

Lista de comandos para hacer copy paste y una pequeña explicación de cómo funciona el proceso.

Publicado:

Muchas veces es una lata descargar un archivo, descomprimirlo, subirlo por FTP, arrastrar archivos y carpetas de un lado para otro para actualizar el core de Drupal 7. Y como dicen que un buen programador es flojo, pues aquí pego la secuencia de comandos que uso para respaldar y actualizar el core de Drupal 7, usando SSH. Read more / Leer más

Pie de página, datos de contacto, direcciones y microformatos.

Cómo aprovechar, mediante microformats, los típicos datos de contacto al pie de una página web para entregar información entendible para máquinas.

Publicado:

En términos generales, los seres humanos somos asombrosamente buenos para encontrar patrones de cosas que conocemos sin importar el ruido. De casi cualquier secuencia de números o letras podemos inferir si es una dirección postal, un número de teléfono fijo o celular. Pero las máquinas necesitan ayuda para discernir si algo es una dirección de contacto o es parte de la narrativa del artículo. Hace tiempo ya que vengo dándole vueltas al tema de los datos de contacto y las innumerables maneras en las que los vemos representados. Read more / Leer más

En la práctica: ¿Se puede usar SVG confiablemente como imagen?

Nuestra respuesta, durante mucho tiempo, había sido: NO, porque IE y Android no lo ven; sólo se podía en los estilos como una mejora de CSS. Pero estábamos equivocados. Sólo necesitamos un poco de Modenizr.

Publicado:

Cualquiera que halla llegado aquí sabrá ya de los beneficios de SVG, así que no explicaré qué es. Hace tiempo hay polyfills de SVG para IE o Android y algunos otros pero siguen siendo parches que requieren el uso de Flash u otras bibliotecas de javascript, como si ya hubiese poco javascript del que preocuparse en nuestras páginas. Así que nosotros habíamos evitado su uso, fuera de uno que otro gráfico de fondo en CSS como mejoras progresivas; mas, el uso que siempre quise darle era para el logo de un sitio web, que según nuestras políticas de diseño el logo va en el DOM. Desde la salida de las pantallas retina y otras de alta resolución, SVG tiene más sentido que nunca. Read more / Leer más

Propuesta de Normas de desarrollo web

Criterios y normas generales, no absolutas, de buenas prácticas para el desarrollo web en Médula Diseño

Publicado:

En Médula Diseño estamos definiendo poíticas y estándares de desarrollo para nuestros proyectos, desde cosas tan simples como cuerpos mínimos de texto, hasta criterios de selección para frameworks de trabajo o pre-procesadores de css. Nada de esto está escrito en piedra, son guías generales hasta que haya una buena razón para romperlas. Read more / Leer más

Primeros tropiezos con Sencha Touch 2

Un registro de errores, soluciones y links al empezar a trabajar con Sencha Touch 2, para el desarrollo de aplicaciones móviles.

Publicado:

Estoy armando un app (por primera vez), ya me he decantado por phoneGap y hoy tuve qe hacer la selección entre Sencha, XUI y jQuery Mobile. Cuando me di cuenta que jQuey Mobile es un plugin sobre jQuery lo descarté, en mobile no necesito ni la mitad de todo lo que trae jQuery. Read more / Leer más