FRAMEWORK CSS

¿Qué es un Framework?

Un Framework, que se podría traducir aproximadamente como marco de trabajo, es el esquema o estructura que se establece y que se aprovecha para desarrollar y organizar un software determinado. Esta definición, algo compleja, podría resumirse como el entorno pensado para hacer más sencilla la programación de cualquier aplicación o herramienta actual.

Este sistema plantea varias ventajas para los programadores, ya que automatiza muchos procesos y además facilita el conjunto de la programación. Es útil, por ejemplo, para evitar el tener que repetir código para realizar funciones habituales en un rango de herramientas, como puede ser el acceder a bases de datos o realizar llamadas a Internet. Todas estas tareas son las que se realizan de forma mucho más fácil cuando se trabaja dentro de un framework.

Plantea muchas ventajas y, además, es capaz de hacer que se realicen incluso labores mucho más complejas que, por otros medios, serían imposibles de plantear siquiera a la hora de programar algo. No obstante, su utilidad es algo que depende del tipo de programa y de contexto en el que vaya a emplearse.

Existen muchos frameworks diferentes, como pueden ser Meteor para trabajar con JavaScript en web y móviles o el más que popular .NET Framework de Microsoft. Todos ellos poseen herramientas específicas y funciones características que encajan mejor con el tipo de aplicación a desarrollar, así como el uso que se le pretenda dar una vez terminada. Son, a día de hoy, algo imprescindible para cualquier programador, sea amateur o profesional

¿Para qué sirve un Framework?

Un Framework sirve para poder escribir código o desarrollar una aplicación de manera más sencilla. Es algo que permite una mejor organización y control de todo el código elaborado, así como una posible reutilización en el futuro. Debido a esto, garantiza una mayor productividad que los métodos más convencionales y una minimización del coste al agilizar las horas de trabajo volcadas en el desarrollo.

Por otra parte, su acción es algo que afecta también a los errores, minimizándolos considerablemente. En definitiva, es algo que brinda una ayuda general y más que considerable al programador y desarrollador, haciendo que sus labores sean mucho más sencillas.

¿Qué es Responsive Web Design?

Esta técnica es una de las más utilizadas en la actualidad, permitiéndonos hacer que nuestros sitios web puedan adaptarse a cualquier dispositivo móvil o desktop.

Responsive Web Design o también conocido como Diseño Web Adaptable, es una técnica de diseño y desarrollo web que mediante el uso de estructuras flexibles (contenedores flexibles, imágenes y video flexibles) y junto con Media Queries especificados en CSS, logran adaptar un sitio web al entorno del dispositivo en el que se encuentre. Con ésta técnica se consigue que el contenido del diseño de tu sitio se vea bien y pueda ser bastante legible para los usuarios sobre el dispositivo con el que éste interactúe.

Esta técnica fue creada por Ethan Marcotte y extendida en su libro Responsive Web Design, aunque este concepto fue introducido anteriormente por la W3C  en el año 2008 , bajo el nombre de One Web, en donde se especifica que el mismo contenido y los servicios que ofrece tu sitio web esten disponibles, independientemente del dispositivo que se use.

Ventajas y desventajas de utilizar un framework

Ventajas

• Estructura y organización del código predeterminada. Los frameworks proporcionan tanto un esqueleto como una forma de trabajar. Por lo tanto, evitan tener que realizar un análisis sobre dónde situar los diferentes archivos de la aplicación (recursos, controladores, vistas, modelos, etc.).
• Reutilización del código. Evitar duplicidad de código. En el desarrollo de una aplicación existen ciertos apartados que suelen repetirse, como la conexión con la base de datos, validación de formularios, páginas de estilos, etc. Con la utilización de un framework ahorraremos tiempo en desarrollar funcionalidades que ya están cubiertas y podremos enfocarnos en el funcionamiento de la aplicación más que en cómo llevarla a cabo.
• Agilidad y rapidez en el desarrollo. Precisamente gracias a la reutilización de código mencionada anteriormente, conseguimos mayor rapidez en el desarrollo, ya que no perderemos tiempo en desarrollar funcionalidades nuevas.
• Menor coste en el desarrollo. El coste es un parámetro que está directamente relacionado con la rapidez y agilidad. Acabar antes un proyecto implica que la dedicación es menor y por lo tanto el coste del proyecto también disminuye. Al igual que la rapidez en el desarrollo, esta ventaja beneficia tanto al cliente como al desarrollador.
• Buenas prácticas de desarrollo con el uso de patrones. La mayoría de frameworks están basados en patrones de diseños, que nos indican pautas sobre cómo solucionar un problema específico que ya ha ocurrido con anterioridad. El patrón de diseño más popular es MVC (Modelo-Vista-Controlador), que nos ayuda a separar la capa de datos de la lógica del negocio de la interfaz con el usuario.
• Minimizar errores y mayor facilidad para solucionarlos. Como el framework ya incorpora código implementado por otros programadores, los posibles errores que este pueda tener siempre serán menores que al desarrollarlo desde cero. Además, en caso de que hubiera un error, lo más probable es que ya haya sido solucionado por la comunidad.
• Facilidad a la hora de encontrar una librería o código que ya cubra funcionalidades de tu desarrollo. Resulta más fácil encontrar herramientas (utilidades, librerías) adaptadas al framework que para un desarrollo propio.
• Facilita la colaboración con otros desarrolladores. Tanto si son compañeros de tu equipo como de GitHub, leer el código desarrollado por otra persona puede resultar complejo. Sin embargo, si ya sabes qué estructura va a seguir el código y cómo se organiza, resultará más fácil comprenderlo y poder aplicarle nuevos cambios. Lo que nos lleva a la siguiente ventaja.
• Facilita el mantenimiento. Si todos los miembros de un equipo trabajan de la misma forma, en el momento que haya que actualizar la aplicación o realizar algún evolutivo, tardaremos menos tiempo y el coste será menor.

Desventajas

• • Tiempo de aprendizaje. Antes de empezar a utilizar un framework debemos familiarizarnos con él, con cómo se estructuran sus archivos, con la forma en la que se comunican los componentes, etc. Por lo tanto, tendremos que invertir tiempo en superar la curva de aprendizaje para poder comenzar un nuevo desarrollo utilizando el framework.
  • Versiones inestables. El hecho de que los frameworks sean tan populares provoca que estén en constante actualización para cumplir con las nuevas tecnologías y las nuevas políticas de seguridad. Por ello, si en el desarrollo surgen incompatibilidades con otras librerías o se detectan errores de seguridad, la elección de una versión muy reciente del framework podría ralentizarnos.
  • Menor rendimiento. Los frameworks consumen, en general, más recursos que una aplicación creada desde cero y orientada al rendimiento. En aplicaciones muy exigentes, un framework puede resultar poco apropiado.
  • Código sin utilizar. Si la aplicación es pequeña o no requiere mucha funcionalidad, probablemente estaremos desaprovechando mucho código que viene implementado en el framework, por lo que la aplicación ocupará más espacio del que realmente necesitaría.
  • Elección del framework. Puede resultar complicado elegir cuál es el framework en el que te vas a especializar, ya que existe una gran variedad, y cada uno posee sus propias características. Por lo que, antes de lanzarse a aprender un framework nuevo, hay que dedicar tiempo a estudiar cuáles son los que tienen una base más sólida, ya que puede ocurrir que tras comenzar a desarrollar con un framework poco usado, se quede desactualizado al poco tiempo.

  Bootstrap

  El framework de desarrollo más conocido y más utilizado en la actualidad, este framework proporciona una gran cantidad de componentes y estilos preestablecidos, un grid responsive de 12 columnas para que organices los componentes de tu sitio web, y una documentación extensa, clara y completa.

  Ventajas

Bootstrap es soportado por la mayoría de navegadores web.
Framework apoyado por una gran comunidad de desarrollo detrás.
Muchas plantillas y componentes disponibles están creadas en Bootstrap.
Buena documentación.


• Desventajas

  Utiliza clases CSS no semánticas que “ensucian” tu HTML.
  Tiene la necesidad de utilizar jQuery.
  Si no personalizas tu sitio, se parecerá a muchas webs que utilizan este framework, debido a que es el framework más utilizado en estos momentos.

Foundation

Foundation fue durante mucho tiempo, el rival directo de Bootstrap, actualmente la adopción de este framework no es tan alta como lo es la de Bootstrap, pero esto no significa que Foundation no sea un framework CSS a tener en cuenta.

Ventajas

• Gran cantidad de componentes muy personalizables.
• Extensa y detallada documentación con tutoriales en vídeo en algunas secciones.
• Las clases CSS utilizadas son semánticas, por lo que no ensucian tu HTML.

Desventajas

• La comunidad de Foundation no es tan grande como la de Bootstrap.
• No hay tantos recursos externos disponibles para Foundation.
• Es más complejo que otros frameworks disponibles.

Bulma

Bulma CSS es un framework de desarrollo relativamente nuevo, pero ya ha capturado la atención de una gran número de desarrolladores, Bulma CSS se centra en crear un framework CSS ligero y simple utilizando Flexbox para su sistema de rejilla.

Ventajas

• Una sintaxis semántica, hace que nuestro código sea más comprensible.
• Es un framework ligero, por lo que tu web se verá recompensada a la hora de cargar con rapidez.
• Fácil de usar.
• Muy personalizable y modular, con la posibilidad de exportar solamente los componentes que necesites.
• Un grid responsive basado en flexbox.

Desventajas

• Al ser relativamente nuevo la comunidad que lo apoya no es muy grande, pero crece con fuerza.
• Debido a su temprana edad falta corregir algunos bugs.
• No es una buena opción para navegadores Internet Explorer(pero a quién le importa Internet Explorer).

Milligram

El framework CSS Milligram, con un estilo minimalista y limpio, dice tener un tamaño de solo 2kb, su objetivo es ofrecer un rendimiento alto debido a su tamaño, con una alta productividad, al no tener la necesidad de añadir muchas clases a los elementos HTML para aplicar los diferentes estilos disponibles.

Ventajas

• Un diseño limpio y minimalista.
• Tamaño de solamente 2kb.

Desventajas

• Falta de personalización en los elementos.
• Comunidad pequeña.

UIKit

El siguiente en la lista es UIKit, con un tamaño pequeño, modular, como lo es Bulma CSS y con un estilo minimalista y limpio. UIKit es una buena opción, a tener en cuenta cuando se trata de frameworks CSS en el 2018 para crear tus proyectos web.

Ventajas

• Modular.
• Un tamaño ligero.
• Aspecto cuidado sin necesidad de añadir tu propio CSS.
• Muy Personalizable.

Desventajas

• La nomenclatura de las clases no es muy elegante.
• Falta de una comunidad más grande.

Semantic UI

Semantic UI como su propio nombre indica, está enfocado en un código de programación legible para el programador. En mi opinión Semantic UI es para los desarrolladores que deseen un diseño elegante por medio de un código de programación con un lenguaje natural.

Ventajas

• Carga solamente los elementos que necesitas.
• Amplia gama de elementos muy personalizables.
• Clases realmente semánticas.
• Diseño elegante.

Desventajas

• Un tamaño de archivos demasiado grande comparándolo a su competencia.
• Uso excesivo de Javascript.

Materialize

Si el proyecto con el cual estás involucrado, desea un diseño al estilo material desing como el que tiene Android, no hay ninguna duda de que tu elección debe ser el framework CSS Materialize.

Ventajas

• Gran librería de componentes con un diseño Material Desing.
• Facilidad de uso.
• Buena documentación.

Desventajas

• Un tamaño de archivos grande.

Pure.css

Para diseños web simples una de las opciones disponibles es Pure.css. Todos sus componentes tienen como denominador común la simplicidad, Lo que no es para todos los públicos, Pero no hay duda que si buscas una opción con un tamaño reducido y un estilo sencillo, Pure.css es un buen candidato.

Ventajas

• Una fácil personalización.
• Un tamaño ligero.

Desventajas

• Documentación un poco confusa.
• Falta de estilos en sus componentes, esto puede ser una ventaja o desventaja, depende del gusto de cada uno.

Kube

Kube no es un framework CSS muy usado, pero su estilo me parece muy refinado, por lo que decidí añadirlo a esta lista rodeado de los mejores, y de esta forma dispones de alguna opción más con un diseño diferente a los nombrados más arriba.

Ventajas

Los archivos CSS son de un tamaño reducido.
Proyecto estéticamente sólido.

Desventajas

La comunidad es realmente pequeña, por no decir que no existe.

Cualquiera de los frameworks CSS de esta lista puede dar a tu nuevo proyecto web un diseño bonito con una cierta facilidad, que hará que ahorres tiempo en el diseño y te centres en el desarrollo.

Esto no quiere decir que el diseño no sea una parte imprescindible que no deba tenerse en cuenta, pero en mi opinión cuando un proyecto es joven se debe lanzar y validar lo más rápido posible y una vez el proyecto tenga una audiencia, siempre es recomendable invertir en un diseño personalizado para que pueda destacar frente a la competencia.