Foundation vs Bootstrap:Round 1

Hace tres meses aproximadamente descubrí dos frameworks para el desarrollo de interfaces web, algo que anteriormente no había usado pero que ya tocaba, principalmente para poder tomar ventaja en el tiempo de desarrollo. El primer framework, y el que actualmente uso, es Foundation de Zurb y el segundo Bootstrap de Twitter.

Ambos buscan cubrir las mismas necesidades, ofreciendo una serie de recursos web para acelerar el desarrollo de sitios web basados en estándares y buenas prácticas. Sin embargo, no son competencia directa aún. Boostrap es mucho más completo que Foundation al incluir gran cantidad de estilos por defecto y una colección de librerias de javascript, pero por otro lado Foundation ofrece un buen soporte a responsive design, es ligero y también más flexible para modificar.

La piedra angular

Durante algún tiempo trabajé con Foundation porque se ajusta mejor a mi forma de trabajar, que prefiero tener más control sobre la apariencia, sin embargo, hace unas semanas decidí que la mejor opción era crear un framework propio para trabajar. Por supuesto comenzar desde cero no era una opción así que debía elegir cuál framework, entre Foundation y Bootstrap, sería la piedra angular.

Foundation fue el ganador, principalmente porque lo conozco bien, así que me dedique a modificarlo, hice varios avances incluyendo migrarlo a Less e integrar Minify para optimizar archivos. Pero justo ayer decidí darle una segunda oportunidad a Bootstrap, realmente su grilla de 16 columnas me agrada y ofrece una base mucho más completa para el desarrollo de sitios web gigantes. Durante algunas horas me convenció tanto que estuve a punto de deshacer el trabajo realizado con Foundation y cambiarlo.

Pero pudo más Foundation y Bootstrap quedo rezagado de nuevo. Es contradictorio pero aunque Bootstrap continua siendo mucho más completo que Foundation, en cuanto a características y apariencia inicial (básicamente es la misma que Twitter), son esas mismas razones lo dejaron fuera del juego.

Bootstrap al buscar cubrir más estilos web se vuelve grande y complejo, y con esto no me refiero a que sea difícil de entender pero hay que manejar más archivos y variables, sumando tiempo al desarrollo. Esta ventaja, de poseer más características, también significa más estilos pre-definidos que a la larga quitan más control sobre diseño, ú obligando a dedicar más tiempo a la edición de estilos.

En resumen, Foundation es más pequeño pero está mejor enfocado, también es ligero y permite experimentar más gráficamente con los elementos web. Por otro lado Bootstrap ofrece una base bastante robusta para el diseño de interfaces, ofreciendo más opciones pero a la vez “amarrando” la apariencia a una línea de diseño gráfico previamente definida, que desde el punto de vista personal significa una personalización más lenta y complicada.

Si eres programador, o tu especialidad no es el diseño gráfico web, mi recomendación es que vayas tras Bootstrap, te dará una apariencia completa prácticamente sin necesidad de modificar estilos (apenas unas variables). Mientras que si lo tuyo es el diseño gráfico y los sitios web a la medida entonces la mejor opción es Foundation, que da mejor soporte a responsive design para ofrecer tu sitio web en versiones para computadoras, tablets o móviles.

Pedazos de comentarios, pequeños y aleatorios

  • Estuve a punto de cambiar Foundation por Bootstrap, que es más completo y trabaja con 16 columnas, pero hubiera sido un error.
  • Foundation es más simple que Bootstrap y requiere más trabajo de diseño, pero es mucho más flexible y rápido para prototipar.
  • Vale aclarar: Foundation es más rápido porque uso una adaptación basada en Less y lo elegí para trabajo porque ofrece mejor soporte a responsive design.

La última palabra

Después de todo lo dicho, en donde Foundation parece ser el ganador, la última palabra aún no está dicha. El equipo de Twitter, liderado por @mdo, lanzará el 30 de enero la versión 2.0 de Bootstrap que promete un gran avance sobre la versión actual, la 1.4, y tampoco hay que olvidar que este es uno de los proyectos más grandes y activos de Github, lo cual es algo bastante notable en su desarrollo, ofreciendo corrección de errores y características nuevas más rápido.

Foundation por su parte es pieza clave para Zurb, una empresa genial de diseño web, que mantiene a su equipo enfocado en el framework, ofreciendo aportes al código diariamente y guiados por una serie de buenas practicas que hacen al framework muy innovador.


Nota en construcción, seguiré editando.

CSS: Cómo evitar que un botón se “rompa”

Recientemente tuve problemas con un enlace que simula ser un botón en una página web. El problema ocurre porque la página se ajusta al ancho de la ventana del navegador, permitiendo que los elementos dentro de ella también se ajusten, pero a la vez forzando a que el botón se rompa en dos líneas cuando la ventana se reduce, de esta forma:

Botones en la página con ancho normal

Botón cortado cuando la página tiene dimensiones reducidas

La solución a este problema es utilizar dentro de los estilos del botón la propiedad white-space con el valor nowrap que le indica al navegador que el texto dentro de ese elemento no debe ajustarse. Esta propiedad es el equivalente CSS a la propiedad no break de los estilos de InDesign.

a.boton {
  color:#51626f;
  background:#e8eaec;
  border:solid 1px #51626f;
  white-space:nowrap;
  /* (...) */
}

Esta solución da como resultado que igual se utilicen dos líneas para los botones, pero evita que se rompa el botón:

Botón con el estilo corregido

Vale aclarar que este problema no es común en páginas web con ancho fijo o con botones de medidas especificas, y por esta misma razón la propiedad white-space tampoco es muy conocida, sin embargo, es compatible con la mayoría de navegadores recientes y puede aplicarse a otros elementos.

De tablets y la identidad de un producto

Esta semana leí dos noticias del mercado de las tablets, acerca de los $220 millones de ganancia que genera el Nook para B&N y las perdidas de $485 millones de Blackberry por la Playbook, y que curiosamente me hicieron retomar un comentario que estaba en borrador acerca del manejo de identidad de producto, incluso a nivel gráfico, en donde el del Nook Color es muy bueno y el de la Playbook deja mucho que desear.

No quiero apuntar al hecho de que un mejor manejo de la identidad haga diferencia en ventas porque en realidad depende de muchos factores, como por ejemplo que Nook es un lector de libros asociado a una librería gigante mientras que Playbook es un producto “yo también” para competir con la iPad de Apple. Sin embargo, si es un reflejo del cuidado que cada empresa coloca en su producto y un indicio del éxito que tenga, o no.

Blackberry Playbook

La Playbook pretende competir con la iPad pero su producto parece descuidado, comenzando con que carece de un detalle visual característico, ni siquiera un botón o logotipo gigante (al estilo de la manzana de Apple), solamente tiene un pequeño logo de Blackberry al frente. No hay un signo del que el dueño pueda apropiarse. De hecho Playbook como marca carece de un logotipo reconocible, es simplemente texto (aún no averiguo la fuente) junto al logo de Blackberry. En este sentido pienso que la empresa se confió demasiado de su éxito para vender la tablet, convirtiéndola en un modelo más de su catalogo, un “yo también hago tablets”, y un error a nivel de identidad.

El mayor problema de la Playbook es ser solo una tablet. No se promociona como la más rápida, no es la más bonita y ciertamente no es la más popular. Me pareció que intentaron promocionarla como una herramienta de oficina pero terminaron diluyendo la idea entre otras características hasta terminar con una tablet genérica con el único atractivo de ser marca Blackberry. Supongo que esta bien para los actuales dueños de un móvil Blackberry pero como argumento de venta, o incluso como argumento para su propio desarrollo, deja mucho que desear.

Un buen producto debe poseer una identidad por si mismo e independiente de la empresa, aunque sea coherente con esta, para que la creación y promoción sean liderados por ella y el resultado sea un “producto solido”, que destaque sus valores desde el empaque hasta en el uso diario. Es una idea que la industria automotriz entendió bien y aprendió a utilizarla. Esta es la razón porque no verán a un Tundra promocionarse como Yaris aunque ambos sean Toyota.

Nook Color

Por otra parte, el Nook Color aunque podría clasificarse igual que la Playbook —como otra tablet intentando competir con el lider del mercado, iPad— no comete los mismos errores, el aumento de sus ventas y gama de productos lo prueban, porque B&N ofrece un producto mejor diseñado, aún con sus deficiencias (que no son pocas) acertó con el Nook.

Una de las principales razones, pienso, es que el Nook Color surge con la identidad de lector de libros, funciona de esa forma, se vende de esa forma y nosotros, sus compradores, lo percibimos de esa forma. Además B&N lo enfoco en el mercado familiar, me atrevería decir al de ama de casa, para reemplazar al libro en todos los ámbitos caseros, desde literatura hasta el libro de cocina, y esto lo comunica el producto con su diseño amigable y una fuerte campaña de promoción liderada por una chica que lee, ve recetas y narra cuentos a sus hijos.

Mencioné el diseño amigable del Nook Color, qué básicamente es una tablet rectangular como las demás, porque tiene detalles como el material antideslizante en la parte trasera (con la marca de Nook estampada) que hace la lectura muy cómoda, tiene bordes suaves, redondeados y el botón central —idéntico al del iPad/iPhone— tiene, de nuevo, el logotipo de Nook. No es el diseño más atractivo para un geek pero sin duda si lo es para un lector tradicional, una ama de casa o un padre de familia, que son su mercado objetivo.

Desde el momento que se desempaca (ver vídeo) hay una intención muy clara de mostrar que se esta comprando, la caja tiene una fotografía del Nook Color con revistas en portada, al abrir la caja (con cierre magnético) se muestra el logo de Nook como parte de la caja (el empaque es genial) y durante todo el inicio B&N se encarga de mostrar el logotipo, desde el asistente de bienvenida hasta el wallpaper (la Playbook casi no usa su logo, supongo que porque parece cualquier otra palabra). Incluso es sorprendente que el mismo empaque se pueda usar como stand para colocar el Nook gracias a otro imán en el empaque, y que como pueden imaginar muestra un logo gigante de Nook.

Tengo que decir que admiro el manejo de la identidad gráfica de Nook Color por la forma en que la utilizan más no por su aspecto, personalmente no me gusta. Su elección de fuentes y colores es bastante mala, los gradientes hacen lucir al logo retrogrado, aunque en general no es insípido como el Playbook.

A nivel gráfico sigue siendo interesante pero lo realmente genial es que la apariencia es una consecuencia, porque en esencia todo el producto esta enfocado hacía la identidad, incluso en el catalogo de revistas que ofrece para comprar, así como en los libros. Probablemente no llegará a tener un catalogo como el de Amazon en los próximos años, pero es un catalogo muy bien enfocado que logrará mantener sus usuarios comprando.

En resumen

Dudo que el Nook Color superé al iPad, o más adelante al Kindle Fire que es su competidor directo, sin embargo, pienso que está más apto como producto para competir que la Playbook, no por razones de negocio o cantidad de características. Sino porque como producto el Nook Color contiene una identidad muy fuerte —lector de libros para la familia—, que lo limita pero a la vez lo enfoca, qué no decepcionará a un papá cuando no pueda editar un documento de Word pero si pueda leerle cuentos a sus hijos (o dejar que el mismo Nook los lea). Mientras que la Playbook no puede permitir ningún error a nivel de aplicaciones de oficina o de juegos, ni uno, y en su intento de venderse como una tablet que hace de todo, pocas personas están entendiendo para que es buena.

No se trata de una lucha de características (que en ese caso gana la Playbook) sino de, como marca, como producto, establecer una identidad basada en un estándar de uso (la mejor tablet para ______) que se refleje en el anuncio, empaque, diseño y en su uso día a día, de forma que el comprador quede satisfecho de haber hecho la compra correcta, sin frustración, y siendo el mismo quién recomiende el producto más adelante.☺

Letras pequeñas (que no son pequeñas)

No incluí al iPad en la comparación porque es un producto graduado con honores en el tema, líder del segmento y que —por ahora— aprovecha toda la prensa que recibe para venderse de diferentes formas: ayer era la mejor tablets de juegos por Angry Birds y mil juegos más, luego es la mejor herramienta de productividad gracias a la AppStore, y mañana quién sabe. La iPad es una excepción por tantos factores por los que esta rodeada que se merece un artículo por si sola, algún día.

Hay que decir que los medios se dedicaron a alabar el extenso catalogo de Amazon, por sus aplicaciones y películas además de libros, sin embargo, el catalogo de libros en español de Nook Color de momento es más amplio y la oferta del catalogo de revistas es quizá tan buena como la de iPad, por lo que no es para nada despreciable el poder de B&N.

Cada vez que escribo “valores” temo que un lector despistado, o no muy curioso, piense que me refiero a los valores morales —ha pasado. Pues no, no me refiero a esos valores y ya deberían de ir a buscar unas tijeras y cortar esa palabra en dos, que pueden ir separadas.


Silencio, ese sonido que hace la gente cuando esta leyendo.

 

 

 

Resumen de noticias

Guatemala y…

  • su próximo presidente.
  • Dina Fernandez que dice: “La gente vende su voto porque hay quien lo compre y a los que lo compran no les pasa nada”.
  • …sus servilletas de colores, que además de limpiar también sirven de fondo de pantalla.

Mundos aparte

El mundo de los sentidos habitado de personas que comparten experiencias sobre los sentidos, con varios pedacitos que aprenderle a cada una y recopilados en El placer de sentir. Una recomendación de Sofy.

Planeta Wishlist® presenta: Comentarios sobre la Wacom Inkling, por Aegir de Ministry of type, y gracias a Jenny pase de querer una Canon S100 a querer una Leica X1, igual ¿qué son $1500 de diferencia? ¡PLOP!

Planeta Retro giró con los comentarios Edna, y recordé mi época escuchando Iguanamanga y recordar de lo que son capaces los universitarios.

Acción y reacción

De la nota anterior, sobre la colaboración, obtuvimos dos respuestas (curiosamente de dos Lectores Chapines ;- ):


Terminé la semana escuchando recomendaciones de mis hermanitos, Pablo recomendando El Gordo y Sofy a Carla Morrison.

Cuando el arte se desnuda

Al inicio de la semana la comunidad de DeviantArt movió ideas acerca del desnudo artístico, el arte erótico y la perversión con su artículo Good Nudes vs. Bad Nudes (inglés, NSFW). Si te interesa el tema tenes que verlo, pero no solo verlo sino un poco más: salta entre enlaces, comentarios y por supuesto intenta responder las preguntas. El artículo además incluye una excelente selección de fotografías sobre el tema que no tienen perdida.

Si aún después sigues interesado te recomiendo revisar el portafolio de George Hurrell —un vistazo retrospectivo a la fotografía glamorosa/erótica de los ’30s—, el de Bruno Dayan —actualidad— y el blog de The thought experiment con literatura, erotismo, chicas, fotografía y superheroes.

Si lo tuyo es la literatura tienes que darle un vistazo a la poesía de Sabines, a In Media Res de Eleonora Requera y quizá revisar Las edades de Lulú.

Actualización:

Resumen de noticias

Guatemala y…

…Los Encapuchados de Panajachel.
¿Por qué siguen votando los guatemaltecos?.
…las Palabras

Confieso que…

…a pesar de todo las palabras de Kundera aún rebotan dentro de mi cabeza, como quién ha escuchado una verdad que no esperaba saber y no sabe que hacer con ella.

Las huellas que marcaron el paso de la semana

Son huellas que quedaron en forma de proyectos “tangibles” —usualmente solo vienen como nuevas ideas— y que puedo hacer públicos a través de GitHub, una web para trabajar proyectos en colaboración, al que llegué gracias a Christian. Esta semana he publicado mi primer proyecto, y aprovechando el impulso publiqué dos proyectos más (nada mal para un principante ¿eh? ;- ):

  1. Fastats, para facilitar el uso de estadísticas de redes sociales en Google Spreadsheet.
  2. Projeasy, para automatizar la creación de carpetas para proyectos. Ya lo he mencionado aquí en el blog pero ahora hay planes de mejorarlo.
  3. Trix ‘n Metrix, un proyecto bastante simple pero poderoso, con mucho potencial a largo plazo pero sobretodo es un pilar para varios proyectos más. En resumen es un script que unifica los códigos de los marcadores sociales(Facebook, Twitter, etc.) y Google Analytics, de forma que con un simple archivo se pueden integrar varios servicios de medición, pre-configurar metas y mejorar el rendimiento de sitios web. Detrás del proyecto de programación hay un ideal de acercar las estadísticas web a diseñadores gráficos, community managers y escritores, es decir, proporcionales mejor información sin cobrarles el precio de no-ser-programadores.


Mientras escribía esta nota giraba un planeta, también una lavadora, y en alguna habitacion intermedia sonaba The outernational sound.

¿1+1=3?

En alguna lista de temas siempre-interesantes de seguro hay un espacio reservado para el tema de la colaboración. Como miembros de una sociedad deberíamos tener como uno de los pilares de nuestras acciones la colaboración pero no es así, no creemos ciegamente en ella, no la practicamos y hasta pretendemos huir de ella. Sin embargo, la necesitamos, nos motiva y nos mantiene vivos.

Del tema puedo decir que me ha dado para entretenerme varias horas, a veces creando premisas, a veces deshaciéndolas, por momentos respondiéndome preguntas y en otros preguntando. Al finalizar solo me queda afirmar (y confirmar) la útilidad de la colaboración pero entonces surgen preguntas (Ver Las preguntas más adelante).

Supongo que no hay respuestas fáciles para el tema pero hay respuestas, abajo los dejo con un montoncito de ellas.

Las respuestas

Considerando que la colaboración puede surgir de la conciencia de nuestras limitaciones fui a buscar a Adler, quien escribió sobre el complejo de inferioridad, y fue interesante encontrar a otros psicólogos humanistas hablando del tema. De hecho, una de las razones que me atrajo al tema de la colaboración fue precisamente haberlo re-encontrado recientemente en las teorías humanistas, cuando Fromm plantea1 el humanismo como una forma de “salvar” a los humanos de su auto-destrucción.

  • Para retomar el tema, buscar a Adler me llevo a una página sobre el individuo y la sociedad de donde resalto: “la mayor ventaja para un individuo, miembro de una sociedad, es la de tener acceso al conocimiento acumulado de la misma”. Es un documento extenso y un poco tedioso pero no deja de ser interesante: El individuo y la sociedad.
  • Punset: Si te aislas, estas perdido.
  • Lev Vygotsky y su concepto de la zona de desarrollo próximo (más completo en inglés: Zone of proximal development). Además tiene otras teorías sobre aprendizaje colaborativo que todavia son materia pendiente. Gracias a Sofy por la pista.
  • Toma y daca, en inglés Tit for tat. “Golpea suavemente al que te ha golpeado suavemente”.
  • El miedo a la libertad de Erich Fromm. Un libro recomendado, que no aborda precisamente el tema de la colaboración, sino de la libertad del individuo, su toma de decisiones y la realización de acciones independientes. Sin embargo, no es incompatible con la idea de una sociedad, e incluso sugiere que el individuo al conseguir su libertad es más apto de retribuir a la sociedad, aunque claro se trata de una “retribución” por elección y no por coacción. Sin sacrificio.
  • Jacob Levy Moreno se aventuro bastante y propuso un método para medir las relaciones sociales: Sociometría.
  • La importancia del intercambio: ley de costos comparativos (vídeo, 46m).
  • No está demás darle un vistazo a la misión de Creative Commons y que solo para resaltar palabras claves resumiré así: desarrollar y apoyar para maximizar la creatividad, el intercambio y la innovación.
  • Aprendizaje social y las teorías de Albert Bandura.
  • Inconsciente colectivo.
  • (más adelante agregaré algunos más)

Las preguntas

  • ¿Hasta dónde debo ser egoísta sin perder el beneficio de la colaboración?
  • ¿Si la colaboración es necesaria por qué pretendemos indiferencia? (¿negación?)
  • ¿Por qué algunas personas son más propensas a colaborar que otras? (Temo que Adler debe tener la respuesta en alguna de sus publicaciones).
  • ¿Cómo puede trasladarse la cultura de colaboración en Internet al Mundo Real?
  • ¿Por qué las escuelas no enseñan acerca de colaboración?

Dicen que decían

Es inevitable evadir grandes palabras así que mejor abracemoslas2

Lo inconsciente colectivo es todo menos un sistema aislado y personal. Es objetividad, ancha como el mundo y abierta al mundo. Yo soy el objeto de todos los sujetos, en perfecta inversión de mi consciencia habitual, donde soy siempre sujeto que tiene objetos. Allí estoy en la más inmediata e íntima unión con el mundo, unido hasta tal punto que olvido demasiado fácilmente quien soy en realidad. «Perdido en sí mismo» es una frase adecuada para designar ese estado. Pero ese «mismo» es el mundo, o un mundo cuando puede verlo una consciencia. Por eso hay que saber quién se es.
Carl Gustav Jung, sobre los arquetipos de lo inconsciente colectivo.

 

El hombre es como es, y la misión que se le ha encomendado es desarrollarse plenamente. El ideal del hombre renacentista es un hombre universal, la realización polifacética, acabada y equilibrada de la humanidad en cada individuo. Cada individuo representa a la humanidad entera, y la misión del hombre es desarrollar la humanidad en sí mismo.

Erich Fromm, en El humanismo como utopía real.

El tema, por supuesto, da para mucho más, pero no es mi intención aturdir [más] sino poner el tema sobre la mesa. Los comentarios o invitaciones a un cafecito se agradecen de antemano ;- )


Terminé la nota pensando si la canción “2+2=5″ de Radiohead tiene que ver con el titulo del álbum “Hail to the thief”. Si alguien te regala un nuevo paradigma a la vez te está robando una verdad previa ¿Es un ladrón?

  1. “El humanismo como utopía real” de Erich Fromm. []
  2. Me gusta más como se lee “embrace” pero para los fines que aquí se buscan mejor dejamos al español en paz. []