"Framework" es una palabra de moda en el desarrollo web en estos días. Por ejemplo, los marcos de JavaScript YUI, JQuery y Prototype han atraído una gran atención, y los marcos de aplicaciones web Rails y Dojo han atraído aún más atención. Parece que todo el mundo utiliza algún tipo de marco para desarrollar sus propios sitios web. Pero, ¿qué es exactamente un marco? ¿Los marcos sólo son útiles para los programadores?
¿Qué es un marco?
Para facilitar la comunicación, damos una definición unificada de "marco" (al menos en este artículo): un conjunto de herramientas, bibliotecas de funciones, convenciones y módulos generales que intentan abstraer tareas comunes y pueden reutilizarse. y desarrolladores para centrarse en aspectos exclusivos del proyecto de tarea y evitar la duplicación del desarrollo. En términos generales, los marcos son el marco de JavaScript y el marco de aplicaciones web mencionados anteriormente.
Es importante enfatizar que no tenemos que hablar de construcción, empaque y distribución, sino que solo usted o su equipo pueden usar un marco.
Marco CSS
A veces, es posible que pruebes los beneficios del código CSS abstracto y similar, lo cual es más obvio entre los diseñadores que diseñan varios sitios web similares al mismo tiempo. Además, los diseñadores del equipo se beneficiaron mucho del enfoque del marco. Por ejemplo, trabajo para un periódico y los más de 20 sitios web tienen mucho en común, según las características de los sitios web de noticias, tienden a ser más similares que diferentes. Pero incluso un solo diseñador que trabaja en un proyecto que se ve muy diferente en la superficie puede abstraer algunas pequeñas piezas comunes para el marco CSS.
En Lawrence Journal-World, donde trabajo, recientemente creamos un marco CSS y descubrimos que es un enorme multiplicador de eficiencia. Claro, nos tomó días crear un marco CSS nosotros mismos, pero una vez que el marco estuvo completo, desarrollar páginas web de alta calidad fue extremadamente rápido. Es más, dado que ahora todos los diseñadores del equipo utilizan este marco, cuando un diseñador modifica la página web de otro miembro del equipo, ya no necesita dedicar 20 minutos a comprender las ideas de construcción de otras personas y puede comenzar de inmediato.
¿Hay alguno que pueda ignorarse?
Al invertir en un marco CSS muy holístico, lo que hay que buscar es un código común que se repita una y otra vez en cada proyecto. El objetivo es consolidar la posición central de estos códigos y seguir el principio de "No repetirse". t Repítete)" método de codificación. Esto facilita mucho el mantenimiento y ahorra costes de ancho de banda a sus visitantes.
En casi todos los proyectos en los que trabajo, hay algunos problemas de CSS que debo declarar:
"Restablecimiento completo" del estilo predeterminado del navegador, por ejemplo, establecer el margen y el relleno de todos los elementos en 0, eliminar los bordes de conjuntos de marcos e imágenes, etc.
Alinear con la línea de base. Esto incluye cosas como establecer márgenes para elementos a nivel de bloque, como párrafos, encabezados y listas, a la misma (o varias) alturas de línea base.
Crea el estilo básico del formulario.
Cree varias clases CSS de uso común, por ejemplo, .hide (establezca la visualización en ninguna, es decir, oculte el elemento), .mute (establezca una fuente más pequeña y un color más brillante).
Y aquí está lo más divertido: muchos diseñadores de sitios web se encuentran reutilizando la misma estructura básica una y otra vez, entonces, ¿por qué no hacerla suya, de una manera que sea muy flexible y pueda usarse en múltiples sitios web? Yahoo hizo esto. YUI. Cuando estábamos construyendo el marco CSS para el sitio web Lawrence Journal-World, comencé observando cómo lo hacía Yahoo. Estamos bastante seguros de que eso no es lo que queremos, pero sirve como un buen ejemplo y nos da muchas ideas en las que pensar y cómo construir nuestro propio marco. Nos decidimos por un problema de 16 celdas que era lo suficientemente flexible como para funcionar en cada uno de nuestros sitios, incluso si cada sitio se veía un poco diferente del siguiente. Además, la mayoría de los sitios web comparten widgets, como menús desplegables, menús de navegación, botones, etc. Estos también son los objetos principales que deben abstraerse. Además, es posible que tenga nombres de contenido comunes, como miniaturas para listas de imágenes. Puede estandarizar los nombres CSS, como "lista de miniaturas", para que todas las miniaturas que muestran miniaturas utilicen esta clase CSS.
Otra cosa que puedes hacer es extraer trucos (como la compatibilidad con esos navegadores antiguos) y agregar tu propio módulo de estilo extendido. Lo probé yo mismo, pero descubrí que el truco era demasiado propietario para extraerlo en un marco general.
¿Cuáles son los beneficios reales?
El beneficio real del marco es que puede comenzar a trabajar rápidamente. Puede crear un nuevo archivo (X)HMTL e introducir su marco. Ya no tendrá que lidiar con restablecer el relleno y los márgenes. Hermosa tipografía, formularios limpios, diseño ordenado. Widgets válidos, etc. Obviamente, obviamente, definitivamente debes personalizar la apariencia de cada sitio. Para lograr esto, todo lo que necesita hacer es anular y agregar al estilo predeterminado cuando sea necesario.
Obviamente, aunque tienes que personalizar el aspecto de cada sitio web, todo lo que necesitas hacer para lograrlo es agregar algunas líneas de código a los estilos predeterminados. Por ejemplo, si configura un estilo de navegación horizontal básico para todas las etiquetas UL con el atributo de clase "pestañas" en su marco y tiene un borde gris, solo necesita unas pocas líneas de código CSS para personalizar su apariencia. el sitio web se ajusta a.
| El siguiente es el contenido citado: ul.tabs li { borde: ninguno; imagen de fondo: url('/images/tabs/ ?site-specific-tab-look.jpg'); } ul.tabs li { borde: ninguno; imagen de fondo: url('/images/tabs/ ?site-specific-tab-look.jpg'); } |
La lista flota hacia la izquierda y los enlaces se colocan en forma de bloques en la lista. Los enlaces también flotan hacia la izquierda y la fuente está centrada. El marco le ayudará a completar estas tareas como anuncios molestos en su sitio web. trabajo de diseño, simplemente concéntrese en Céntrese en los detalles específicos e interesantes de su sitio web, en lugar de escribir código CSS que se ha escrito un millón de veces antes.
¿Cómo construir un marco CSS?
Hay varias formas posibles de crear un marco, pero la más común, y posiblemente la más útil, es abstraer CSS común en un archivo de hoja de estilo independiente que solo contenga una parte específica del todo. Por ejemplo, podría tener un estilo que controle la tipografía y otro que controle el reinicio masivo. Este buen método le permite introducir selectivamente los estilos que necesita. Puede haber seis o siete archivos de estilos diferentes en su marco, pero no necesita uno o dos de ellos, siempre que no estén importados. El marco creado por nuestro equipo consta de 5 archivos de estilo:
reset.css: maneja el reinicio
type.css: maneja la tipografía
grid.css — maneja el diseño
widgets.css: maneja widgets como menús de pestañas, menús desplegables y botones "más"
base.css: contiene todos los demás archivos de hojas de estilo, por lo que solo necesitamos hacer referencia a base.css en (X)HTML para usar todo el marco CSS. Luego almacenamos el marco en un lugar separado para que cada sitio importe este marco. Por supuesto, cada sitio web también necesita una hoja de estilo única, y el estilo único hace que sean necesarios complementos al marco.
consejo
Este método es bueno, pero también trae nuevos problemas: aumenta el número de enlaces http para cada página. Para sitios web con tráfico grande y mediano, si se agregan más de 5 conexiones HTTP a cada página, el administrador del sistema puede tener un gran problema. Dos posibles soluciones:
Coloque todos los estilos en un solo archivo en lugar de dividirlos en varios módulos. El problema aquí es que se pierde la flexibilidad del marco para incluir sólo archivos específicos y el mantenimiento se vuelve engorroso.
Existe un programa del lado del servidor que procesa dinámicamente varios archivos individuales en una respuesta. No he visto esto hecho todavía, pero debería ser muy eficiente si se hace bien. Tomando mi marco anterior como ejemplo, este proceso de procesamiento dinámico se activa cuando se solicita base.css, no cuando se solicita type.css, grids.css, etc. De esta manera, los archivos individuales siguen estando disponibles y todo el marco es válido en la versión de la plataforma.
En resumen, es importante señalar que nuestro objetivo no es ser lo más abstracto posible. En cambio, el objetivo es proporcionar un inicio rápido y un proceso de diseño más eficiente que definitivamente nunca será posible. Si se vuelve demasiado abstracto, las cosas pueden volverse confusas y demasiados enlaces HTTP pueden afectar el rendimiento de su sitio. Recuerde: un buen marco no se trata de hacer las cosas más difíciles y complicadas, sino de empezar desde cero.
Resumir
Nosotros, los diseñadores web, tendemos a repetirnos todo el tiempo y, al igual que mis amigos en el mundo de la programación, restablecemos los estilos, diseños y menús de navegación predeterminados del navegador una y otra vez, en casi todos los proyectos. Dedicar un poco de tiempo a ordenar el marco CSS le permitirá iniciar rápidamente cada proyecto de sitio web, mantener el sitio web más fácilmente y ayudar a otros diseñadores del equipo a comprender su trabajo. Cabe señalar que estos beneficios deben obtenerse sin afectar el rendimiento del sitio web.