Advertisement
  1. Web Design
  2. HTML/CSS
  3. Bootstrap

Una guía rápida para elegir el mejor framework para tí

Scroll to top
Read Time: 6 min

() translation by (you can also view the original English article)

Una siempre creciente variedad de frameworks está disponible para diseñadores y desarrolladores front-end, listos para tomar parte en la construcción de prototipos y la implementación. Hay una amplia gama de frameworks integrales y ligeros, y cualquier cosa que esté entre éstos extremos. Con tantas opciones, podrías simplemente escoger el más popular que podría no ser lo mejor para tu proyecto particular.

Cada framework tiene sus desventajas, y a tí te corresponde decidir cuál se ajustará mejor a tus necesidades. Por suerte, he efectuado una investigación y experimentación para que conozcas bien cuatro diferentes frameworks. Los he evaluado en:

  • Sencillez para aprender.
  • Volumen de recursos externos
  • Versatilidad
  • Soporte de navegadores
  • Accesibilidad

Los frameworks que examiné son Bootstrap, Concise, Foundation y Gumby. Ten en cuenta, no te aconsejaré cual elegir o cuál es mi favorito, sólo explicaré los puntos fuertes de cada framework para que tú puedas decidir cual es el más adecuado para tí. ¡Iniciemos!

Bootstrap Concise Foundation and Gumby frameworksBootstrap Concise Foundation and Gumby frameworksBootstrap Concise Foundation and Gumby frameworks

Nota: Estoy usando el término Framework, pero alguien podría sentir que Librería o Boilerplate (Plantilla Estándar) son más apropiados.

Fácil de Aprender

Ganador: Concise

Cada framework que analicé tiene una curva de aprendizaje amistosa y corta, pero encontré que Concise es el mejor para un principiante. Un framework más ágil, Concise es ligero en funcionalidades, permitiendo que la documentación sea una lectura rápida y simple.

Si estás buscando más que características básicas, hay un número de complementos que puedes incluir en tu proyecto.

Concise add-onsConcise add-onsConcise add-ons

A la mitad del camino: Bootstrap y Foundation

Bootstrap y Foundation tienen documentación excepcional para guiarte a través de la configuración, módulos y extensiones. La amplia gama de características inevitablemente hace la documentación más laboriosa y abrumadora para el principiante, comparada con la de Concise. Foundation incluye un archivo de demostración llamado index.html para que los principiantes experimenten con él y les sirva como un punto de inicio.

Más avanzado: Gumby

La descarga de Gumby también incluye un archivo demo:html para mostrar su grilla en acción así como ui:html con ejemplos de cada elemento ui. Sin embargo, es más abrumadora la etapa de configuración pues te exhorta a usar SASS y complilar CSS en la terminal. Mientras éstos no son esenciales para usar Gumby, conforman la carga pesada de la documentación para comenzar.

Gumby sólamente tiene una opción de descarga, a diferencia de Bootstrap y Foundation que te dan la opción de descargar diferentes paquetes que se ajustan a tus necesidades y capacidades.

Volumen de Recursos Externos

Ganador: Foundation

Además de la documentación, una rápida búsqueda en Google te proporcionará ayuda extra que puedes necesitar en el camino. Foundation, sin embargo, tiene su propio centro de entrenamiento y videos para una experiencia de aprendizaje impecable. Si más bien tienes solo nociones sobre éste, se han escrito un inmenso número de blogs y tutoriales con consejos para usar Foundation, incluyendo los que tenemos en Tuts+.

Foundation tutorials on TutsFoundation tutorials on TutsFoundation tutorials on Tuts

Segundo muy cerca del primero: Bootstrap

Como Foundation, Bootstrap ha sido buscado por el diseño y la comunidad front-end desde su concepción. Tuts+ tiene varios cursos y muchos tutoriales disponibles sobre el tema. Un framework inmensamente popular, hay enorme cantidad de blogs, artículos y foros a tu disposición.

A la mitad del camino: Gumby

Gumby también ha sido bien cubierto en blogs y en tutoriales, aunque, no tan extensamente como Foundation y Bootstrap. La documentación Gumby también te dirigirá a los recursos para aprender Sass y herramientas útiles para compilar CSS.

El nuevo chico de la cuadra: Concise

Habiendo apenas llegado al escenario de los frameworks, Concise está todavía por ser examinado tan minuciosamente como los otros tres.  Aunque recursos extra podrían no ser tan necesarios, considerando el pequeño tamaño y la versatilidad de éste framework.

Versatilidad

Empatados: Bootstrap, Foundation, y Gumby

Bootstrap y Foundation son frameworks muy completos, con un vasto número de características y recursos disponibles para tí. Cada uno de ellos puede ser personalizado incluso antes de que descargues los archivos, lo que significa menos modificaciones en  CSS para tí.

También son versátiles en la manera en que pueden usarse, como en combinación con un CMS o para la construcción de un prototipo de una aplicación. Los tres tienen caracteristicas similares de  UI, aunque Bootstrap y Foundation tienen un poco menos que Gumby, como tipografía, galerías, y acordeones. 

Customise your Bootstrap downloadCustomise your Bootstrap downloadCustomise your Bootstrap download

Básico: Concise

Concise está construído para ser un framework pequeño, proporcionando sólo lo esencial.  A diferencia de los otros tres, Concise sólo te da lo que es absolutamente necesario en su descarga, pero te permite crear el sitio como quieras. Es perfecto si quieres diseñar elementos UI tú mismo, pues menos modificaciones en CSS serán necesarias.

Soporte de Navegadores y Accesibilidad

Todos los frameworks calificaron en nuestro test similarmente en ésta área, siguiendo la mayoría de los estándares.  Foundation es el único que no soporta IE8.

Compatibilidad de Foundation

Bootstrap advierte sobre ciertas propiedades CSS3 que no son soportados en IE8.

"Internet Explorer 8 y 9 también son soportados, sin embargo, ten en cuenta que algunas propiedades CSS3 y elementos HTML5 son son completamente soportados por éstos navegadores. -Bootstrap Docs

La documentación de Bootstrap cubre en detalle el soporte de navegadores y dispositivos, así como las diferencias en en la forma en que son renderizadas ciertas propiedades. La próxima sección de la documentación de Bootstrap cubre la accesibilidad. Foundation también tiene las mejores prácticas de accesibilidad, pero Concise y Gumby no.

Mención Honorífica

Skeleton es otro framework ligero, similar a Concise, y recientemente fue reestructurado. Es más eficiente para sitios pequeños, enfocándose principalmente en navegación y tipografía.  Con menos estilos que Concise es pequeño, preciso, ligero y muy fácil para comenzar a usarlo. No incluye Sass o CSS minificado, a diferencia de los otros cuatro frameworks examinados. 

Conclusión

No hay una elección mala para que framework deberías usar, sólo una mejor opción. Mi meta aquí era ayudar a determinar cuál es la mejor elección para tí, con base en criterios que podrían impactar un proyecto y tu flujo de trabajo. Si eres nuevo en frameworks, o estás más familiarizado en cómo funcionan, es importante determinar cuál satisfacerá las necesidades de tu proyecto.

Aquí hay un breve resumen en forma tabular. ★ sugiere un  ganador absoluto, mientras que ☆ muestra que el primer lugar fue compartido.


Bootstrap Concise Foundation Gumby
Fácil de aprender



Volumen de recursos externos



Versatilidad




Soporte de navegadores



Accesibilidad




De los criterios evaluados, fácil de aprender, recursos externos, versatilidad, y soporte de navegadores y accesibilidad-uno o dos clasificarán más alto en importancia para tí, y de verías elegir tu framework consecuentemente. Para los que tienen experiencia con Bootstrap, Concise, Foundation, o Gumby, ¿En qué áreas piensas que el framework que usas tiene mejor desempeño? ¿Para qué tipo de proyectos lo usas?

Para los que se inclinan por otros frameworks, ¿Cómo sientes que tu elección se compara con éstos?

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.