Hoy vamos a echar un vistazo a Boks, una pequeña herramienta increíble que te ayudará a especificar un diseño básico del sitio en un instante.
Revisaremos qué es y cómo puede usarlo para acelerar su desarrollo, así como cuáles son las limitaciones y desventajas que debe conocer antes de descargar la aplicación.
Introducción
Los sistemas de grilla son una bestia interesante: o los amas o los odias. Personalmente, puedo ver ambos lados del argumento, pero al final no tengo demasiado en contra de ellos, dado que los personaliza para sus propios propósitos en lugar de dejar toneladas de códigos intactos o no semánticos.
El problema real con los sistemas de red es lo complejos que tienden a ser. Acabo de terminar un tutorial en Six Revisions sobre el uso del Sistema Grid 960 y los comentarios parecieron ser unánimes, ya que la mayoría de las personas solo necesitaban que alguien les explicara cómo usar el sistema en términos sencillos y fáciles de entender. Si se encuentra confundido por los sistemas de cuadrícula, asegúrese de revisar ese artículo.
Como seguimiento, quise mostrarle cómo usar una GUI para crear y crear estructuras de código HTML y HTML realmente complejas, basadas en el Marco CSS de Blueprint, increíblemente rápido. Haremos esto con una aplicación de AIR llamada Boks.
Cianotipo
Solo para informarle, Blueprint es un marco gratuito con toneladas de excelentes funciones. Éstos incluyen:
- Un restablecimiento de CSS que elimina las discrepancias entre los navegadores.
- Una cuadrícula sólida que puede soportar los diseños más complejos.
- Tipografía basada en principios expertos que preceden a la web.
- Formar estilos para interfaces de usuario de gran apariencia.
- Estilos de impresión para hacer cualquier página web lista para el papel.
- Plugins para botones, pestañas y sprites.
- Herramientas, editores y plantillas para cada paso de su flujo de trabajo.
Para mi propio uso, Blueprint es un poco demasiado masivo, que veremos más adelante. Sin embargo, muchos desarrolladores lo usan religiosamente y lo encuentran entre los mejores frameworks que hay.
Nos guste o no, esto es lo que Boks usa para crear código. Si los desarrolladores de Boks están leyendo esto, me encantaría ver una opción para usar la cuadrícula de CSS de 1 KB en su lugar.
¿Qué es Boks?
Ya es suficiente introducción, ¿qué diablos es esta cosa Boks? Sinceramente, no recuerdo cómo lo encontré originalmente, pero fue una de esas situaciones en las que descargas algo, lo metes en la carpeta de aplicaciones y olvidas que existe. Hace poco purgué mi disco duro de tonterías cuando abrí Boks por primera vez y pensé: "¡Oye, esto es realmente genial!"
Como dije antes, Boks es una aplicación de AIR, por lo que debería funcionar bien con Mac o PC.
Lo que Boks hace es proporcionar una forma visual innovadora para crear el marcado estructural básico para su sitio. Me detendré allí para decirle a los que odian a WYSIWYG que estoy contigo. Si codificar un sitio desde cero es como acercarse a un lienzo vacío, WYSISYGs siempre me parece un poco como Paint By Number.
Lo que quiero decir con esto es que, en general, son demasiado estructurados y agregan todo tipo de confinamientos y complicaciones innecesarios. Boks no es una de estas aplicaciones.. De hecho, ni siquiera es algo que usarías para construir un sitio completo. Simplemente le ayuda a crear el esqueleto sobre el que construye su sitio.
Empezando
Después de descargar la descarga gratuita, abra Boks y verá la interfaz que se muestra a continuación.
Aquí es donde expondrá visualmente la estructura de su sitio web. Hacer esto será tan fácil como hacer clic y arrastrar hacia donde quieres que vayan tus columnas. Sin embargo, antes de hacer cualquier otra cosa, haga clic en ¿Configuraciones de cuadrícula? botón. Aquí encontrarás muchas opciones de personalización de cómo Boks construirá tu página.
Bajo las opciones de cuadrícula que se ven arriba, puede configurar su ancho de página junto con número de columnas y cómo quieres dividir los canales y columnas. Ya vemos que Boks hace que el uso de un marco de cuadrícula sea realmente flexible y mucho más fácil de personalizar que desgarrar el código pieza por pieza.
En la imagen de arriba, puedes ver que he configurado todo para que funcione esencialmente como la versión de 12 columnas del 960 Grid System. Esto me dará 12 columnas que tienen 60 píxeles de ancho cada una con un margen de 20 píxeles. Si no estás de acuerdo, simplemente entra tu propio configuración preferida aquí.
Otros ajustes
Pasando a la siguiente pestaña en la ventana de configuración, aquí puede establecer una línea de base personalizada para el tamaño de fuente, así como especificar cualquier elemento de encabezado que necesite.
Las pestañas de CSS y JavaScript le permiten adjuntar recursos personalizados. Estos se colocarán en sus propias carpetas o se agregarán al código existente.
Por último, si cambias algo en absoluto en las preferencias, Asegúrate de que sea la configuración de exportación. Hay una serie de cosas importantes aquí para golpear. Primero, establece el título de tu página y el idioma. Luego asegúrese de estar usando el DOCTYPE correcto. El valor predeterminado es XHTML, pero como puede ver en la pantalla a continuación, HTML5 es compatible, por lo que podrá usar Boks durante un tiempo.
te lo recomiendo mucho apagando la? comprimir CSS? opción. Será mucho más fácil ordenar y personalizar su código si hace esto. De lo contrario, todo se romperá todo junto. Esto es genial para el tamaño del archivo pero es increíblemente molesto tratar de leer.
Finalmente, si es la primera vez que usa Boks, es posible que desee activar la opción para mostrar la cuadrícula para que pueda ver lo que está pasando. Obviamente, cuando comiences a usar esto para crear sitios reales, querrás desactivar esa opción.
Creación del diseño de página
Ahora que tenemos todas nuestras configuraciones cuadradas, es hora de crear el diseño. Para hacer esto, simplemente Haga clic y arrastre en la vista previa de la cuadrícula para crear un div.
Aparecerá un rectángulo que se ajusta automáticamente a la estructura de la cuadrícula que ha creado.Usted puede Crea tantos divs como quieras Al hacer clic y arrastrar para agregar más. Para reposicionar un div, haga clic en él una vez y use las teclas de flecha. Mantenga presionada la tecla shift mientras usa las teclas de flecha para cambiar el tamaño de un div.
Añadiendo marcado
Boks contiene muchas características que te permiten personalizar realmente tu diseño como lo harías si estuvieras codificando manualmente. Puede hacer clic en el div, agregar un borde, y previsualizar y agregar cualquier clase de CSS.
Si quieres llegar tan lejos, incluso puedes comenzar a acumular contenido HTML en un div. Como puede ver a continuación, simplemente escríbalo como lo haría en un editor de código.
¿No sabes con qué quieres rellenar el diseño en este momento? No hay problema, puede dejarlo en blanco o usar el generador integrado de Lorem Ipsum de Bok para modificar un texto ficticio.
Go Nuts
Como puede ver en la imagen de abajo, Boks le permite crear diseños que son Tan complejo como necesitas que sean. El diseño siguiente tiene un área de navegación, una barra lateral, un área de contenido y un pie de página. El área de contenido tiene varios otros divs anidados dentro y divididos en columnas separadas.
Esto literalmente tomó unos treinta segundos y, por lo tanto, puede ahorrarle toneladas de tiempo de codificación inicial en la fase inicial de la construcción del sitio.
No hay altura?
Como dije antes, Boks no está destinado a crear sitios web completos. Las barras horizontales que ves en las imágenes de arriba representan sólo el ancho y la jerarquía resultantes de los divs creados. La altura de cada uno se expandirá dinámicamente a medida que agregue contenido, pero se debe tratar con cualquier altura específica cuando realmente progrese en la codificación del sitio.
Exportador
Cuando haya terminado de dividir su diseño, presione el botón exportar y elija una ubicación para los archivos. El resultado será un archivo HTML junto con el CSS, JavaScript y otros recursos que optó por incluir.
El producto final no parece mucho en este momento, pero considerando que tomó solo unos segundos y solucionará muchos de sus dolores de cabeza de diseño CSS, ¡no es una tarea fácil!
La baja
La parte desafortunada es, por supuesto, la enorme Archivo CSS que resulta. Si estás acostumbrado a usar Blueprint, esto no te molestará en lo más mínimo, pero podría enloquecer a todos los demás.
Como dije antes, sería genial ver una implementación de Boks de 1 KB que eliminó todo este código adicional. Mientras tanto, el archivo CSS es realmente claro y contiene muchos comentarios. Esto hace que sea fácil entrar y eliminar rápidamente cualquier código que no necesite.
Si desea utilizar Boks continuamente para crear sus diseños pero no quiere todo este CSS adicional, le recomiendo que dedique unos minutos a crear su propio archivo CSS personalizado que pueda reutilizar una y otra vez. Para hacer esto, simplemente mire el archivo CSS predeterminado y elimine todo lo que no afecte el diseño de la cuadrícula. Esto incluye estilos de texto, estilos de campo, código de reinicio, etc. Después de hacer esto una vez, siempre puede colocar esto como un reemplazo para el archivo CSS creado por Boks.
De hecho, si es lo suficientemente inteligente, puede hacer clic derecho en la aplicación y acceder a "Mostrar contenido del paquete". para hurgar en los archivos predeterminados utilizados aquí y personalizarlos a tu gusto (solo para Mac).
Conclusión
Boks es una herramienta pequeña y ordenada que le ayuda a crear el marcado básico para su sitio utilizando una versión completamente personalizable del sistema de columnas del marco Blueprint. No está destinado a crear sitios web completos, sino que le permite ahorrar tiempo en la parte delantera de su proyecto, que se realiza creando varios divs y aplicando las clases apropiadas.
Desafortunadamente, dado que estás bastante estancado con el uso del marco Blueprint, Boks no es para todos. Deje un comentario a continuación y háganos saber lo que piensa de Blueprint y si utilizará o no Boks en su próximo proyecto.