Recientemente, echamos un vistazo a Easel, un constructor de sitios basado en la web que aprovecha Twitter Bootstrap. Hoy lo seguimos con un recorrido por una herramienta muy similar: Divshot.
Con Divshot, puede crear de forma rápida y fácil diseños de páginas web limpias y con capacidad de respuesta utilizando una combinación de herramientas visuales y codificación manual. Es una herramienta realmente elegante y creo que disfrutarás usándola.
Conoce a DivShot
Si lees nuestro artículo sobre Easel, Divshot te parecerá súper familiar. El concepto aquí es exactamente el mismo. Se te proporciona una interfaz visual de estilo de arrastrar y soltar que se basa en el popular marco de Bootstrap de Twitter.
Como puede ver, al igual que con Easel, tenemos un gran lienzo que ocupa la mayor parte de la pantalla y una barra lateral donde residen todas las herramientas, los elementos de la interfaz de usuario y las opciones de personalización. Todo lo que ves aquí es muy sencillo y muy fácil de usar. Vamos a saltar y construir una página.
Crear una nueva página
En la parte superior de la interfaz, verá una barra horizontal que contiene dos controles: uno para crear carpetas y otro para crear archivos. Primero, cree una nueva carpeta con el menú desplegable a la derecha, luego una nueva página con el menú desplegable a la derecha.
Al crear una nueva página, aparece la pantalla que se muestra a continuación. Aquí puede elegir entre algunos diseños de inicio diferentes (una característica clave que falta en el caballete), clonar la página actual o comenzar de cero.
Seamos aventureros y comencemos una nueva página en blanco para que podamos sentir realmente cómo construir algo con esta herramienta.
Añadir un menú de navegación
Una vez que hayas comenzado tu nueva página, echa un vistazo a la barra lateral de la izquierda y encuentra los? Componentes? sección. Aquí es donde encontrarás todas las piezas de la interfaz de usuario de Bootstrap con las que estás familiarizado si alguna vez has usado el marco.
Desplácese por las distintas opciones hasta que encuentre la barra de navegación. Arrastre esto hacia el área con el borde discontinuo (el contenedor de la página Bootstrap).
Con un poco de esfuerzo, tenemos un menú de navegación pequeño y agradable en la parte superior de nuestra página. Viene con un espacio para el nombre de una empresa y dos páginas.
Personalizar este menú es fácil. Haga doble clic en un fragmento de texto para escribir un valor de reemplazo y pulse Opción y arrastre un elemento del menú para duplicarlo. Cambié el nombre de la compañía a? Design Shack? y copió algunos elementos más del menú. Aquí está el resultado:
La unidad heroica
Esto es básicamente cómo va el flujo de trabajo. Ahora simplemente continuaremos arrastrando y personalizando elementos desde la barra lateral. A continuación, vamos a arrastrar en una unidad de héroe.
Una vez más, la personalización es muy fácil. Todo lo que hice fue hacer doble clic en el texto y escribir algo nuevo. Ahora tenemos un buen encabezado de aspecto para nuestra página.
Diseño
Ahora vamos a dedicarnos un poco más a un ejercicio de diseño de forma libre. Quiero crear tres columnas de contenido. Para ello, arrastro un? Diseño? módulo y esto es lo que obtengo:
Como puede ver, por defecto, esto se divide en dos columnas. Si reviso el Inspector en la barra lateral, puedo personalizar esto escribiendo los números manualmente o haciendo clic en uno de los diseños prefabricados.
Hice clic en el diseño de tres columnas y verifiqué las? Columnas de fluidos? caja. Ahora mi módulo de diseño se parece más a lo que quiero y está listo para recibir algo de contenido.
Contenido central
Ahora que tenemos estos ingeniosos cuadros de diseño que definen a dónde irá nuestro contenido, solo necesitamos arrastrar algunos elementos hacia ellos. Metí un encabezado, un párrafo y una imagen en cada uno, ajustando las opciones de personalización disponibles a medida que avanzaba.
CSS personalizado
Mi característica favorita en Divshot es la posibilidad de agregar tu propio código personalizado. Esto es absolutamente clave si va a conseguir que los desarrolladores reales consideren el uso de algún tipo de WYSIQYG. Si no puedo personalizar algo que no me gusta, simplemente no voy a usar tu aplicación.
Una cosa que no me gusta en mi diseño actualmente es la falta de espacio entre las imágenes de los marcadores de posición y los párrafos debajo de ellas. Aunque esto es fácil de arreglar. Primero, agregaré una clase a cada una de las cajas usando la? Estructura? opciones
Ahora si golpeo el? Editar CSS? en la parte inferior izquierda, aparecerá una barra en la parte inferior de la pantalla y me permitirá agregar algunos CSS personalizados. Me gusta especialmente que puedo usar preprocesadores aquí. Todo está compilado en vivo, completo con informes de errores. ¡Increíble!
Con este código, mi barra de navegación y mis imágenes ahora tienen un poco de espacio para respirar. ¡Mucho mejor! Si lo necesita, también hay un módulo para agregar HTML personalizado, de modo que realmente tenga total libertad para hacer lo que quiera.
Más herramientas
Cerca de la parte superior derecha de la pantalla, hay algunas herramientas diferentes que vale la pena mencionar. Hay un Deshacer / Rehacer estándar, una descarga de código, una vista previa en vivo y un botón para cambiar su ventana gráfica
Recuerde, todo esto está construido sobre Boostrap, lo que significa que sus diseños deben ser plenamente receptivos. Esto es un increíble bonificación que no debe ser pasado por alto. Esta es una de las maneras más fáciles que conozco para crear sitios web atractivos y atractivos. Incluso hay un menú que le permite establecer si un elemento está oculto o visible en un tamaño de vista determinado.
Caballete o Divshot? ¿Cual es mejor?
Así que ahora he probado y revisado dos de estas herramientas. La pregunta es, ¿a qué debe dirigirse si está buscando construir un sitio de Bootstrap? Para ser honesto, no hay un ganador claro en general. Sin embargo, si nos fijamos en las características individuales, tengo opiniones firmes sobre cuál es mejor.
Flujo de trabajo y diseño: Divshot
En general, encontré que el flujo de trabajo y el proceso de diseño eran mucho mejores en Divshot que en Easel. El flujo de trabajo de Easel fue torpe e hice varias sugerencias para mejorarlo en mi revisión.Curiosamente, cuando probé Divshot, descubrí que era muy similar a lo que imaginaba que debería ser Easel.
Me encantó el módulo de diseño de la columna y lo fácil que fue modificar para satisfacer mis propias necesidades. El caballete tiene algo similar, pero no es tan suave o intuitivo.
Tipo e iconos: caballete
Este es un lugar donde Easel es el claro ganador. Tiene soporte completo de Google Web Fonts y le permite una personalización mucho mayor sobre su tipo. De hecho, incluso sin las fuentes personalizadas, las herramientas de tipo eran mucho mejores en Easel.
Además, Easel también tiene integración con FontAwesome, por lo que tiene acceso a toneladas de excelentes íconos que puede lanzar rápidamente a su trabajo.
Una cosa genial que Divshot hace Sin embargo, tenemos un selector de temas, que te permite cambiar el aspecto general de todo el tema con unos pocos clics. Actualmente hay trece temas y un? Custom? opción.
Código de exportación: caballete
Ambas aplicaciones tienen una función de exportación de código, pero la de Easel era mucho más robusta e impresionante, lo que le permite ver todos los elementos y descargar un archivo .zip que contiene todo.
Personalización: Divshot
Esta es, literalmente, la característica más importante para mí como usuario y le doy esta a Divshot. Las características de ajuste de código personalizadas aquí son realmente buenas, especialmente el módulo CSS. Realmente sentí que podía hacer lo que quisiera y realmente aprecié esa libertad.
Imágenes de marcador de posición: Divshot
El sistema de imagen de marcador de posición fue una de mis mayores quejas sobre Easel. Las imágenes de sus marcadores de posición parecían súper buggy y difíciles de trabajar. En comparación, los Divshot son realmente sencillos y fáciles de usar.
Precios:?
Divshot se encuentra actualmente en una versión beta pública gratuita, por lo que es imposible saber cómo se compararán los dos en precio hasta que Divshot publique sus planes de precios. Tendrán mucho por lo que vivir porque me gusta mucho la estructura de precios de Easel. No es muy barato, pero sí tienes bastante en el plan gratuito:
Quejas y comentarios de Divshot
Disfruté mucho utilizando Divshot y creo que es una de las mejores herramientas de creación rápida de prototipos que he encontrado. Bootstrap se presta muy bien para este tipo de aplicación y estoy encantado de ver a los desarrolladores esforzarse en crear herramientas que faciliten el uso de Bootstrap. Dicho esto, definitivamente hay algunas áreas que necesitan mejorar.
Tipo Sucks
Primero, la personalización de la tipografía. Una vez más, Divshot necesita sacar una página del libro de Easel en este. Sus herramientas de texto son mucho más intuitivas y potentes.
Mejor modelo de caja
Creo que actualmente es demasiado trabajo para ajustar el espaciado de varios objetos. Es bueno tener la opción de escribir mi propio CSS, pero para algo tan simple como relleno y margen, debería poder ingresar los números en un campo cerca de donde inserto las dimensiones.
Descargar CSS
Actualmente, la función de exportación de código solo te da el HTML. Definitivamente necesito ver una opción para empaquetar todo en una descarga como vimos con Easel.
Vista previa de Buggy
No estoy seguro de por qué, pero parecía que mi vista previa en vivo fue siempre un cambio atrás, por lo que casi nunca refleja el estado actual real de mi documento. Esto fue bastante molesto!
Dame un poco de espacio!
Me resultó muy difícil agregar elementos al final de mi diseño si se extendía por debajo de los límites de la ventana gráfica. Dame un poco de espacio adicional para trabajar allí, incluso si no está en la salida real.
¿Qué piensas?
Divshot es una aplicación estelar y definitivamente creo que deberías intentarlo, especialmente si eres fanático de Boostrap, Foundation y otros marcos similares de todo incluido.
Ahora que has visto de qué se trata Divshot, deja un comentario y déjame saber lo que piensas. ¿Usaría esto sobre el caballete? ¿Por qué o por qué no? ¿Qué otras herramientas similares has encontrado y cómo se comparan?