Formación, curso: Handlebars, plantillas en JavaScript

[Q] Formación: Nuevo Curso de Handlebars, plantillas en JavaScript

Recién salido del horno, os traemos un curso en formato videotraining resultado de la estrecha colaboración que mantenemos con video2brain, una compañía de la prestigiosa Lynda.com.

En esta ocasión el curso va dirigido a desarrolladores web que trabajen en el lado cliente, y trata sobre Handlebars, este potente e interesante motor de plantillas en JavaScript.

Para todos los que trabajáis con aplicaciones web, donde puede ser muy importante separar la lógica de la presentación, un motor de plantillas se convierte en una herramienta fundamental, para simplificar la integración entre la vista y los datos. Handlebars es uno de los más extendidos y conocidos, porque ofrece muy buena relación calidad / rendimiento, además de que su filosofía (continuando la de su origen que no es otro que Mustache) fomenta de manera clara que las plantillas sean solamente eso, plantillas.

Formación en videotraining / Curso: Handlebars, plantillas en JavaScript

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.

app-UI: componentes para el desarrollo de apps con HTML5

Hoy os traemos el enlace a una librería de componentes reusables que pueden venir muy bien en el desarrollo de apps para dispositivos, ya que se trata de componentes de vista para mostrar la información. Los componentes están enteramente creados con HTML, CSS y Javascript, empleando propiedades CSS3 para las transiciones y siendo necesario mencionar que tiene dependencia de jQuery como librería base sobre la que trabaja.

Seguir leyendo…

CSSDB, las mejores librerías CSS, LESS, SASS…

Cuando la información se convierte en saturante por exceso, siempre es bueno tener a mano sitios donde hacen el trabajo sucio de evalaución y clasificación, para terminar ofreciendo un listado bien “saneado” y con los referentes más importantes. Si esto lo aplicas al trabajo con CSS, LESS, SASS, etc. sin duda un lugar a tener en cuenta es este: CSSDB.co

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.

Diseño y desarrollo de la web, presencia en twitter y e-mail marketing para Mejor Así.

¡Mejor Así!, página web y presencia en twitter

Aprovechamos para mostraros uno de los proyectos en las que hemos estado metidos estos últimos meses, alternándolo con un proyecto que nos tiene muy ocupados y del que pronto os hablaremos.

Es la continuación del proyecto “¡Mejor Así!”, del que ya os hablamos en varias ocasiones, y del que estamos muy orgullosos.

Si queréis más información podéis visitar nuestra entrada en el portfolio, la propia web o seguir el proyecto en twitter para estar al tanto de todas las novedades.

Como siempre… y si os apetece dejar una opinión, estaremos encantados de escuchar vuestros comentarios :)

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!

Bienvenido CSS3

Aunque quizá sea demasiado pronto para darle una bienvenida con fuente de chocolate, figuritas de hielo y confeti sí que es buen momento para poder ir jugueteando con algunas de las características que esta nueva versión de CSS incluye y que nos van a poder permitir tener mayor libertad a la hora de crear gráficos para la web.
Seguir leyendo…

CSS3 :: Font-face

Hay en ocasiones que estamos desarrollando webs en XHTML y nos encontramos en el diseño con tipografías que no tendrá la mayoría de los usuarios por lo que no podrán tener una correcta visualización de la página. Por lo que hasta ahora nos quedaban dos soluciones:

  • Uso de imágenes de fondo en el elemento que contiene la tipografía.
  • Algún método alternativo como el SIFR

Ahora en CSS3 tenemos la etiqueta font-face que permite usar una tipografía ubicada en el servidor.
La sintaxis de uso es la siguiente:

@font-face {
  font-family:NOMBRE_TIPOGRAFIA;
  src: url(RUTA_TIPOGRAFIA);
}

A partir de ese momento ya se puede usar en el CSS.

La verdad que me parece un gran paso. Ahora a buscar soluciones para versiones de navegadores antiguas que no lo soporten :). Os dejo un ejemplo para que veais como queda (se debe de probar en navegadores que ya lo soporten como puede ser a partir de la versión 3.1 de Firefox o safari 3.1) Prueba de font-face