FRAMEWORK CSS

Framework

Un framework, entorno de trabajo​ o marco de trabajo es un conjunto estandarizado de conceptos, prácticas y criterios para enfocar un tipo de problemática particular que sirve como referencia, para enfrentar y resolver nuevos problemas de índole similar.

En el desarrollo de software, un entorno de trabajo es una estructura conceptual y tecnológica de asistencia definida, normalmente, con artefactos o módulos concretos de software, que puede servir de base para la organización y desarrollo de software. Típicamente, puede incluir soporte de programas, bibliotecas, y un lenguaje interpretado, entre otras herramientas, para así ayudar a desarrollar y unir los diferentes componentes de un proyecto.

Representa una arquitectura de software que modela las relaciones generales de las entidades del dominio, y provee una estructura y una especial metodología de trabajo, la cual extiende o utiliza las aplicaciones del dominio.

Que es el Responsive Desing?

Debido a la proliferación de smartphones y tablets en el mercado actual, existe más diversidad que nunca de formatos de pantalla. De acuerdo con el estudio realizado por Comscore, las ventas de smartphone superarán a las de computadoras de escritorio durante este año y la adopción de tablets en Estados Unidos se prevee que experimente un crecimiento del 40% en los próximos 4 años, alcanzando los 75.8 millones en 2016.

Este panorama obliga a adaptar los formatos web a estos nuevos dispositivos y la estructura de cada uno de ellos, es indiscutible que necesitamos websites inteligentesque se adapten a todos ellos. Sobre todo si tenemos en cuenta las ventas a través de m-commerce (e-commerce adaptados a móvil), según eMarketer, las ventas a través de smartphones han crecido en un 81% ($25.000 millones en los Estados Unidos).

A partir de todo esto, el término “responsive web design” se escucha frecuentemente, pero ¿qué es exactamente? El responsive design corresponde a una tendencia de creación de páginas web que pueden ser visualizadas perfectamente en todo tipo de dispositivos, desde ordenadores de escritorio hasta smartphones o tablets. Con este tipo de diseño no necesitas tener una versión para cada dispositivo, una sola web se adapta a todos ellos.

¿Cómo funciona el responsive web design?

En lugar de construir una website para cada tipo de dispositivo (smartphone, tablet, ordenador desktop, laptop e incluso, hoy en día, para smart TV), se crea una sola website utilizando CSS3 media queries y un layout con imágenes flexibles. De esta forma, la website detecta desde qué clase de dispositivo está accediendo el usuario y muestra la versión más optimizada para ese medio, reorganizando los elementos de la web e incluso discriminando algunos de ellos (menos imágenes, más ligeras, redistribución de las columnas en el diseño, menos texto, etc.).

El HTML5 permite una experiencia excelente para los usuarios, sin el coste de desarrollar una app nativa para cada dispositivo. En resumen, se diría que el responsive design son todo ventajas.

Es fácil de manejar ya que solamente trabajas sobre una website y los resultados serán uniformes en todas las plataformas sin distorsiones en las imágenes o texto. Además, ahorras tiempo y dinero al desarrollar una vez y un pago único de hosting.

Principales ventajas y desventajas de emplear una framework CSS

 0

PUBLICADO EL 11 AGOSTO, 2014 ·DESARROLLO WEB

Una framework CSS es un programa que ofrece diversas opciones para que empleas en el desarrollo de HTML, potenciando tu velocidad de desarrollo y facilitando el porceso de creación de aplicaciones o sitios web. Parece ser sólo obtienes beneficios si utilizar una framework CSS, pero ¿en realidad es así?

La verdad es que utilizar una framework CSS te puede traer tanto ventajas como desventajas, las cuales mencionaremos a continuación:

Ventajas de utilizar una framework CSS

1. Agilización del proceso de desarrollo

Una framework CSS te permite desarrollar más rápido mediante el uso de código base y tareas comunes, de modo que no tienes que empezar desde cero. Si estás trabajando con un equipo, todos tendrán el mismo código, así que la colaboración en equipo también se beneficia de una framework CSS.

2. Facilita la funcionalidad en diversos navegadores

Una framework CSS ya viene programada para que el resultado (es decir, tu aplicación o sitio web) final luzca similar en todos los navegadores, de modo que puedes concentrarte en personalizar y crear contenido en vez de preocuparte en modificar la apariencia base.

3. Te permite trabajar con layout simétrica

Una framework CSS con sistemas de cuadrículas asigna columnas con anchos predefinidos, de modo que puedes concentrarte en la creación de contenido en vez de la alineación de bloques de texto.

4. Refuerza buenos hábitos de diseño

Una framework CSS te provee una serie de selectores que puedes utilizar para tus sitios web y aplicaciones, de este modo el diseño se hace congruente ya que no debes adivinar ni acordarte que hiciste en proyectos pasados.

Desventajas de utilizar una framework CSS

1. Limita tu libertad

En general, sólo se utiliza una framework CSS para todos tus proyectos ya que aprender una tras otra realmente no es muy práctico. Ya que una framework CSS tiene una serie de retículas, selectores y otro tipo de código limita tu diseño en cuanto al tamaño de los elementos y el estilo.

2. Añade código extra

Es poco probable que emplees todas las características de una framework CSS por lo que definitivamente tus aplicaciones tendrán código que no necesitas. Esto podría ser un problema si deseas que tu aplicación sea súper ligera y cada byte cuenta.

3. Te fuerza a usar la semántica propia de la framework

Al usar una framework CSS tienes que acostumbrarte a trabajar con la semántica de ésta. En general, esto no suele ser un problema para muchos desarrolladores que trabajan solos. Sin embargo, si estás colaborando con varias personas deberás asegurarte que todos tengan el mismo nivel de conocimiento sobre la framework, lo que es un escenario ideal, por supuesto. Así que debes esperar que tus compañeros se familiaricen con la framework primero.

4. Podría ser una pérdida de tiempo

Si ya estás acostumbrado a trabajar y ordenar tu código de cierta manera y debido a una petición de cliente o a un proyecto en equipo te ves obligado a trabajar con cierta framework CSS, obviamente primero debes aprender cómo funciona. Esto podría ser tiempo valioso que podrías haber invertido en comenzar a codificar sin el uso de una framework CSS.

   

¿CUAL ES EL MEJOR FRAMEWORK CSS? 2018

6 minutos

Cuando ya llevas en tu espalda varios sitios, y tienes libertad de elegir tus herramientas, acabas probando todo lo que hay en el mercado. Los Frameworks CSS son fáciles de aprender, y todos tienen algo que ofrecerte. Los acabas utilizando por diferentes razones: te llama la atención, parece que te va a ahorra trabajo, lo recomienda un compañero… y porque resulta muy divertido probar nuevos sabores.

He seleccionado los que he podido probar por mi mismo y he realizado al menos un sitio completo. Con todo lo bueno y malo que conlleva mantener diferentes sitios con diferentes Frameworks. Después de analizarlo respondo a la pregunta que muchos os haréis: ¿Cual es el mejor Framework CSS? O lo que en realidad te quieres preguntar: ¿Qué es lo próximo que voy a aprender?

Bootstrap

V4.1.2

Hablamos del segundo proyecto más exitoso de GitHub (126.000 estrellas), con una popularidad sin precedentes en el desarrollo Web. Nació como una simple herramienta interna de Twitter. Mark Otto y Jacob Thornton se encargaron de realizar un conjunto de estilos y patrones para dar homogeneidad a todas las Webs que se estaban creando dentro de empresa. Lo bautizada como Blueprint. En 2011 terminaron el desarrollo y lo hicieron público bajo el nombre de Bootstrap. Su gran uso a ayudado a que tenga una evolución, adaptándose a nuevos estándares, hasta llegar a nuestro días con Flex.

Ventajas:

• Componentes suficientes y configurables para cualquier proyecto.
• Enorme apoyo de la comunidad, con muchas extensiones y preguntas resueltas en foros.
• Documentación clara y rápida de consultar.
• Proyecto maduro con una larga trayectoria (7 años).
• Su Reset CSS (llamado Reboot), te permite usarlo de forma independiente al propio Bootstrap.
• El núcleo principal lo desarrolla un equipo experimentado de Twitter.

Inconvenientes:

• Multitud de dependencias, necesitas enlazar 4 archivos diferentes (3 de ellos Javascript).
• Complejo a la hora de modificar sus estilos.
• Te obliga a maquetar con un HTML poco flexible.
• La última versión (v4) da un giro duro. Pierde compatibilidad con versiones anteriores y navegadores que no usen Flex (Safari 10, iOS6, IE8, IE9…).

Enlace: https://getbootstrap.com/

Tailwind CSS

Version 0.6.4

Tailwind no es un Framework, o UI kit, como Bootstrap, Bulma o Foundation… No tiene temas, ni componentes prefabricados, ni Javascript, ni te impone un diseño que te pelearas para modificar. Son simples estilos, en concreto un montón clases. Una gran biblioteca que te acelerará como un cohete la creación de cualquier diseño que se te pase por la cabeza. Cuando lo domines se dará el caso de hacer una página sin haber escrito ni una línea de CSS.

Ventajas:

• Solo clases de CSS, el HTML a tu gusto.
• Transparente. Puedes incorporarlo a un sitio que ya tenga otro Framework CSS sin alterar ni un pixel del diseño original.
• Puedes filtrar por los estilos que necesite tu web.
• Sin un tema molesto que de un aspecto al sitio, no hay necesidad de sobrescribir nada. Al estar todo en variables CSS, puedes usar nativamente @apply para mejorar los tuyos.

Inconvenientes:

• Duro para iniciados.
• Si no controlas el peso, con PurgeCSS o desactivando módulos, llegará a ser pesado (298,8kb).
• La documentación tiene zonas sin terminar.
• Esta construido en Javascript, lo que conlleva que sea más complejo para la comunidad realizar aportaciones al repositorio.

Enlace: https://tailwindcss.com

Bulma

Version 0.7.1

Cuando se presentó al público web, su popularidad alcanzó rápidamente los primeros puestos de Hacker News (el foro más popular entre desarrolladores). Y no solo en una ocasión, sino en dos. Adelantó al titánico Bootstrap jugando en su propio terreno utilizando Flex en su núcleo. Modernizó el sistema de maquetación para usar el potencial de los nuevos estándares. Por otro lado nos regaló un diseño precioso y cuidado en cada pixel.

Ventajas

• Diseño exquisito.
• Detrás hay un gran diseñador Web como Jeremy Thomas.
• Fácil de personalizar.
• Sin Javascript, aunque varios ejemplos por si quieres complementar.
• Guía para migrar desde Bootstrap.
• El código esta en un SASS preciosamente bien ordenado.

Contras

• La Documentación no es cómoda. Necesita un buscador urgentemente.
• El contenedor no siempre se comporta como esperas.
• No dispone herramientas para dar espacios como paddings o margins.
• Comparado con Bootstrap o Semantic UI, podría tener muchos más componentes y opciones.
• No resetea correctamente algunos estilos.

Enlace: https://bulma.io/

Semantic UI

V2.3

Una estupenda alternativa nacida en el 2003. Aunque en apariencia parece estar más enfocado a smartphone, con su estilo plano e integración con los grandes Frameworks de Javascript, es perfecto para cualquier sitio. Sea una web pequeña o grande. Al igual que Bootstrap, hace gran uso de JQuery para activar y manipular sus componentes. No obstante, no quiero que ello te asuste, su documentación da ejemplos lo suficientemente buenos para no pelearte.

Ventajas:

• Animaciones integradas.
• Interfaz moderna.
• Una cantidad inmesa de componentes: rating, varios tipos de menús (como desplegables en lateral), varios modales, dimmers…
• Integración oficial con los Frameworks de Javascript más populares: React, Meteor, Ember, Angular…
• Integración con herramientas como Gulp o Node.

Inconvenientes:

• Necesitas enlazar 3 archivos diferentes.
• Gran dependencia de Javascript.
• Todo tiene un aire orientado a Smartphone.

Enlace: https://semantic-ui.com

Foundation

V6.4.2

El ancestral enemigo de Bootstrap. Se ha visto siempre como la alternativa seria para empresas. Cabe destacar que nación en el 2011 con la intención de mejorar lo que había en el mercado. Y para ello usaron SASS como base, exprimiendo todo su potencial (con mixins) y siendo pioneros en la incorporación. A pesar de estar mantenido por una empresa (Zurb), su código posee licencia Opensource. Por otro lado es un proyecto con 3 ramas. No solo puedes hacer sitios Web, sino también Emails y Apps (con Angular). Siendo en su conjunto una navaja suiza del Diseño Web.

Ventajas:

• 3 en 1: Webs, Emails y Apps.
• Herramienta para personalizar los componentes y así controlar el peso final de CSS.
• Una documentación maravillosa: su buscador es inteligente, muchos ejemplos incluyen un vídeo tutorial a parte de su demo, viene con una gran cantidad de ejemplos en forma de código, enlace para modificar cualquier demo en codepen, boton para ayudar en los textos o pedir ayuda por Slack…
• Varias plantillas para maquetar con una base estructurada.
• Sección en su web con snippets (trocitos de código de ejemplo) realizado por la comunidad.

Inconvenientes:

• 7 archivos diferentes para vincular.
• Gran dependencia de Javascript.
• Puede resultar complejo para un Diseñador Web con poca experiencia.
• Para Apps hay otras herramientas más completas.

Enlace: https://foundation.zurb.com/

Minicss

V3.0.0

Se podría considerar un microframework o un punto de partida. Se centra en dar las herramientas mínimas de maquinación y nivelar las pequeñas imperfecciones del HTML. Para algunos será simple, pero si valoramos su ridículo peso con todo lo que nos proporciona podrás comprobar que es una inversión muy buena. Por encima de su esqueleto te deja colocar lo que necesites. Será tan potente como buen Diseñador Web seas.

Ventajas:

• Peso insignificante (46kb).
• Documentación clara y búsqueda sencilla.
• Sistema de grid (columnas) clónico de Bootstrap. No es necesario aprender nada si ya lo conoces.
• Se aplica la gran mayoría de los estilos a las etiquetas. Olvídate de añadir nuevas clases.
• 3 temas incluidos (Original, Dark y Nord).
• No necesitas Javascript para nada.

Inconvenientes:

• Es tan minimalista que se quedará corto cuando el proyecto crezca. Todo lo básico viene incluido, pero el resto tendrás que fabricarlo.
• Las listas podrían estar más elaboradas.
• No cumple el formato típico para los menús de headers (nav>ul>li>a).

Enlace: https://minicss.org

Tu framework CSS

v0.0.0

No he podido evitar una opción que nadie recomienda pero creo que es esencial para cualquier Diseñador Web. Estamos acostumbrados a que nos den el trabajo ya empaquetado en forma de estilos y una documentación perfectamente redactada. No es una perdida de tiempo desarrollar nuestras propias herramientas. Lo más seguro es que exista decenas de librerías iguales, con menos problemas y mucho más eficientes. Todos los Frameworks que he nombrado nacieron por dos razones: necesidad o ganas de aprender. Y todos los desarrolladores lucharon contra los mismos sentimientos que te vas a enfrentar: inseguridad, apatía, frustración, pereza… Forma parte del aprendizaje, de ser curioso. En el peor de los casos te servirá para entender la estructura de los grandes, y en el mejor serás independiente. Y, ¿quién sabe?, puede serle de ayuda a otras personas.

Ventajas:

• Aumentará tu vocabulario CSS.
• Mejorarás tus habilidades al maquetar con Flex y Grid.
• Entenderás como funcionan otros Frameworks CSS.
• Podrás ir incluyendo componentes por demanda.
• Aprenderás a tener una estructura clara.

Inconvenientes:

• No estará tan testeado como te gustaría.
• Vas a reinventar la rueda.
• Tendrás que hacer un esfuerzo extra a la hora de documentar. Sería recomendable una web con ejemplos para que otros te comprendan.