SMACSS: Scalable and Modular Architecture for CSS

Hoy os traemos SMACSS, que aunque no ha salido del horno hace poco (es del 2011) sigue siendo totalmente recomendable, en especial para todos los que os dejáis la piel en el lado del front-end y tenéis ganas de profundizar en los beneficios de una organización y metodología que mejore algunas mecánicas del trabajo con CSS.

SMACSS es una guía con base teórica y conceptual sobre cómo organizar y establecer pautas para lograr unos estilos CSS flexibles y escalables, sin caer en algunos de los errores más habituales a los que nos enfrentamos en la maquetación de cualquier web con HTML (¿deberíamos decir ya HTML5?) y CSS. Su autor es Jonathan Snook, y para conocerle mejor no se nos ocurre mejor consejo que visitéis su blog, lleno de información muy valiosa, aunque desde hace tiempo muy poco actualizado.

[Q] en Adobe Creative Days hablando de JavaScript, HTML5 y desarrollo móvil

Desarrollo de apps HTML5 y JavaScript en Adobe Creative Days, Barcelona

Últimamente estamos como motos y al viaje de la semana anterior a Barcelona para participar como ponentes en una de las sesiones del TurisTIC 2013 por nuestro proyecto Synctur, hemos de sumar nuestra participación en los Adobe Creative Days que se enmarcan dentro del Adobe Create Now World Tour. En nuestra línea de colaboración con Adobe desde BlocketPC (que por si no os habíais enterado cierra sus puertas), Marcos González participará junto con Raúl Jiménez en una sesión inspiracional a las 16.00 horas.

Como no podía ser de otra manera hablaremos de móviles, de aplicaciones y en este caso del buen uso de JavaScript y de otras posibilidades con HTML5 y CSS3 para hacer las cosas bien. Tenemos preparada una demo sencilla pero divertida que sin duda permitirá mostrar que hoy en día desarrollar con HTML5 y JavaScript para dispositivos no tiene por qué ser una mala elección a nivel técnico (obviamente y como siempre decimos, dependiendo de la tipología de la aplicación).

Así que si estáis por Barcelona el 7 de Junio, y os apetece participar del evento en el que habrá sesiones de todo tipo, además de información sobre Adobe Creative Cloud, es una buena oportunidad para empaparse de buena información de temas tan interesantes como digital publishing, video, movilidad, imagen, fotografía…

¡Nos vemos en Barcelona!

The Starter Kit, recursos de calidad seleccionados minuciosamente sobre diseño y desarrollo web para el día a día

The Starter Kit, un directorio con enlaces a recursos ultra high quality

Ya nos imaginábamos cuando Criterion anunció su Alt+F4 que el Sr. Sotoca no podía estar demasiado tiempo sin emponzoñar la web con otro proyectazo para todos los que nos dedicamos a hacer de nuestra profesión algo más que una fábrica de pasteles, y estamos en el constante reciclaje que este negocio te exige si quieres hacer las cosas bien.

Pues el tiempo nos ha dado la razón, y tampoco ha hecho falta esperar demasiado. The Starter Kit es un nuevo rincón al que habrá que tener muy vigilado, porque estamos totalmente convencidos que recogerá las mejores perlas en forma de enlaces hacia los mejores recursos (seleccionados con mucho mimo y cuidado, nos consta) tanto para diseñadores como para desarrolladores web.

Seguir leyendo…

LESS Prefixer, Prefixr y GUI Tools para el uso de CSS con LESS

Si trabajas con LESS porque has decidido tener algunos super-poderes extra cuando te pegas con CSS, este extra llamado LESS Prefixer te va a venir muy bien para poder olvidarte además de los «vendor prefixes» que tanta rabia dan. Además lo hace de forma inteligente, para añadir los estrictamente necesarios según CSS3Please.

Si buscas una aplicación GUI para su uso, te recomendamos Crunch! basada en Adobe AIR, y simpLESS (aunque esta última ya tiene incluida la capacidad de solventar los vendor prefixes a base de prefixr.

GreenSock Animation Platform (GSAP) v12, JavaScript version

JavaScript GreenSock Animation Platform (GSAP)

Desde hace ya bastante tiempo, el mundo de los estándares web está recibiendo magníficas aportaciones de muchos desarrolladores para simplificar y potenciar el uso de algunas de las características más interesantes de estas tecnologías.

Cada día son más los motores de físicas que se están portando a JavaScript, frameworks y herramientas de animación, para permitir subir un nivel más la interacción, animación y principalmente el desarrollo de juegos con estándares. En mi opinión, Flash sigue bastante por delante si se analiza el estado actual de ambos referentes en el campo de los videojuegos, pero quien va a decir que no le gustan algunos dulces que nos están llegando como CreateJS, Adobe Edge, o multitud ya de Game Engines.

En este post os presento los pasos básicos de uso de una herramienta que es un referente en el mundo «flashero» y que abraza a JavaScript con una versión para trabajar de la misma forma en dicho lenguaje. Si el día en el que descubrí las bondades de TweenLite (y posteriormente su hermano mayor TweenMax) fue grande, el día en el que GreenSock ha decidido sacar una versión para JavaScript seguramente será igual o más grande aun.

Seguir leyendo…

Comparativa SASS vs LESS

Interesantísima comparativa entre estas dos herramientas para el trabajo avanzado con CSS. Si siempre te has preguntado cual es mejor, este enlace te servirá para tener claro el ganador en algunos de los aspectos más importantes. Y en cualquier caso, hazte un favor y usa al menos una de ellas!

Web APASA, Diseño y Desarrollo web por [Q] interactiva

Diseño y desarrollo web APASA

Hoy os queremos presentar la web de APASA, una web que siempre nos ha gustado mucho en el estudio, resultado de un cliente que se centró en el contenido y nos dio su confianza plena para darle la forma adecuada.

Puedes conocer el proyecto más a fondo en la entrada de nuestro portfolio, y como siempre dejarnos aquí tus comentarios :)

Target _blank sin target _blank (o casi)

Un truquito rápido para los que no somos programadores sino emponzoñadores de código :D . Si necesitas que los enlaces de una página web se abran en una ventana nueva, lo lógico es tirar de target=»_blank» ¿verdad? El problema es que no pasa la validación XHTML y si somos muy tiquismiquis con esto la cosa se complica. rel=»external» sí que valida pero los navegadores actualmente no interpretan esta propiedad para abrir los enlaces en nueva ventana. Entonces, ¿cómo lo hacemos?
Seguir leyendo…