Hace poco descubrí Bootstrap Studio, una herramienta de diseño que me ha ayudado muchísimo a la hora de crear prototipos y páginas web responsive sin tener que programar desde cero:
Bootstrap Studio
Es un programa de ordenador muy útil y eficaz que ayuda a diseñadores no programadores a crear páginas web de forma rápida y sencilla basado en el framework popular Bootstrap (creado por Twitter).
He aquí algunas de las características de Bootstrap Studio que a ti también te enamorarán:
- Diseño adaptativo a todos los dispositivos
- Interfaz intuitiva de arrastrar y soltar
- Pre visualización del proyecto en vivo
- Exportación e importación de componentes
- Amplia librería de componentes predefinidos
- Personalización a través de CSS
- Basado en el framework popular Bootstrap
¿Cómo funciona Bootstrap Studio?
El programa hay que descargarlo desde la página oficial en http://bootstrapstudio.io y comprar uno de los dos tipos de licencias que ofrecen: estándar o de por vida. Cada licencia incluye un uso ilimitado en hasta 3 ordenadores.
Al haber realizado el pago, recibirás un email con el enlace a la descarga. Una vez tengas instalado el programa, puedes elegir entre varios temas predefinidos – o subir el tuyo – y empezar a diseñar con componentes o modulos a través del interfaz de arrastrar y soltar (drag & drop).
La idea de BS es ir arrastrando esos modulos al proyecto y el programa automáticamente crea el código HTML por ti.
Archivos .bscomp y .bsdesign
Como podrás ver el equipo de BS ha trabajado en una amplia variedad de componentes gratuitos que se pueden modificar y personalizar a través del panel de opciones y si es necesario CSS. Puedes exportar e importar tus propios componentes (bs.comp) y hasta páginas completas (bs.design) para utilizarlos en nuevos proyectos.
Previsualización en vivo
Una de las características que más me gusta y utilizo es la opción de pre visualizar los proyectos en vivo con un click. Cuando actives esta opción, podrás previsualizar e interactuar con tu proyecto desde cualquier dispositivo móvil que tenga acceso a la red local, por ejemplo, la de tu casa.
Y aquí viene la mejor parte: los elementos cambian cuando los modificas desde el programa. Así que ya no tienes que refrescar manualmente el navegador cada dos por tres.
La gran comunidad de Bootstrap Studio
De vez en cuando usuarios de BS suben a la comunidad sus propios componentes de BS que cualquiera que tenga el programa puede descargar y utilizar. Y si tuvieras alguna pregunta o duda sobre Bootstrap Studio, siempre puedes echar un vistazo al fórum y participar en las discusiones.
El equipo BS comparte las características y funciones de nuevas versiones así que de vez en cuando está bien pasarse para estar al tanto. Y no sólo eso, entre las discusiones podrás encontrar temas como trucos, tutoriales, ideas y ayuda.
Prueba gratuita en Chrome
Si te gustaría probar el programa antes de comprarlo puedes hacerlo directamente en tu navegador desde la página web de Bootstrap Studio.
La versión de prueba ofrece pocas características pero aprenderás a dominar un poco el programa y descubrir las posibilidades que te ofrece. Una vez lo hayas probado no dudarás en comprarlo, te lo aseguro.
Mini Bootstrap Studio Tutorial
Bienvenido/a al Mini Bootstrap Studio Tutorial, donde encontrarás materiales de ayuda y guías que explican cada parte de la aplicación. Puedes navegar a través de todos los artículos disponibles en la barra lateral izquierda. Para buscar, utiliza el campo en la barra de navegación superior de su página original con todo el contenido.
La ventana de la aplicación
La ventana de Bootstrap Studio está dividida en varias áreas funcionales:
- Panel de componentes: consta de las pestañas «Studio» y «Online». Contiene todos los componentes disponibles que puedes arrastrar y soltar en el Escenario (6) y la Vista general (2).
- Panel de vista general: te proporciona una rápida visión general de todos los componentes de la página. Aquí puedes arrastrar y reordenar los componentes.
- Panel de editor: contiene las pestañas «HTML» y «Estilos». Puedes hacer clic para expandirlo y separarlo como una ventana independiente.
- Panel de diseño: contiene todas las páginas, archivos CSS, archivos SASS e imágenes de tu diseño. Al hacer doble clic, las páginas se abren en el Escenario (6) y otros elementos en el panel de editor (3).
- Panel de opciones: muestra las opciones del componente(s) seleccionado(s) y te proporciona controles de personalización visual sencillos.
- El Escenario: aquí es donde ves una vista previa de la página, arrastras y sueltas componentes y editas texto.
Puedes obtener más información sobre los paneles siguiendo algunos de sus tutoriales en la navegación principal.
Edición visual
La aplicación está construida en torno a la edición visual. Construyes tus diseños arrastrando y soltando componentes, seleccionándolos y cambiando su estilo. Bootstrap Studio genera un código HTML, CSS y JS limpio que está optimizado y es compatible con todos los navegadores web.
Para obtener más información sobre la edición visual, visita nuestro tutorial de selección de componentes y nuestra guía de apariencia.
Vale la pena señalar que la aplicación también se adapta a cargas de trabajo más centradas en el código. El panel de editor contiene una vista HTML, un potente editor JS y un editor CSS con excelente soporte para SASS. También se admite la conexión de editores externos.
Apertura y guardado
Los documentos que creas en Bootstrap Studio se denominan «diseños». Cada diseño se puede guardar como un archivo con la extensión «.bsdesign» y contiene todo sobre tu proyecto, incluido todo el código, las imágenes y las fuentes.
Abrir un diseño es sencillo: simplemente haz doble clic en él en el administrador de archivos de Windows/Linux/macOS o arrástralo hacia la aplicación.
Exportación
Una vez que hayas terminado tu diseño, puedes exportarlo como una carpeta con archivos HTML, CSS, JS e imágenes regulares. Todo el código exportado desde Bootstrap Studio es limpio y está bien estructurado. ¡Parece como si un desarrollador de front-end profesional lo hubiera escrito a mano!
Obtén más información en su guía de exportación dedicada.
Copias de seguridad automáticas
Los errores ocurren y las computadoras tienen tendencia a fallar en los peores momentos. Es por eso que Bootstrap Studio tiene copias de seguridad automáticas integradas.
De forma predeterminada, cada 5 minutos, la aplicación realiza una instantánea del diseño en el que estás trabajando y lo guarda en tu disco duro.
