Aprovechando estos días de fiesta he querido ponerme un poco las pilas con la maquetación web usando Bootstrap (además de barnizar unas estanterías para un intento de huerto urbano). Me decanté por este framework web porque por algún lado tengo que empezar, porque parecía sencillito de entender y porque regularmente sale a la palestra el dilema de Bootstrap sí, Bootstrap no [en].
Bien. Durante el día completo que le dediqué a mi puesta a punto coder tuve una revelación: no soy capaz de usar los programas tan modernos y chulos que te prometen crear webs sin escribir código o sin saber programar. No están hechos para mí. Me siento más cómodo con un editor de texto como Sublime Text que algunos dopan con un montón de extras.
Pero dejadme que os cuente un poco más sobre esta apasionante historia de inquietudes profesionales apta para todos los públicos.
Bootstrap es un recurso empleado con cierta frecuencia en el estudio y creo que es importante que un diseñador web tenga unas buenas bases sobre lo que se puede hacer y lo que no, teniendo en cuenta el entorno de trabajo en el que se encuentre y las herramientas de trabajo de equipo. De nada sirve que prepare visuales para webs ultra-mega-cool si el día a día o los proyectos no lo permiten encajar. Todos queremos hacer webs chulas pero a veces el tiempo y el dinero mandan.
No es que no supiera nada sobre el aspecto más técnico y developer de la web pero tampoco paso de beginner level y hacía tiempo que no le dedicaba un día entero exclusivamente a pelearme con HTML, CSS y un par de chorraditas de JS.
De hecho hacía tanto que no sacaba un hueco para estos menesteres que ha pasado suficiente tiempo como para que fueran apareciendo apareciendo un buen puñado de herramientas pensadas principalmente para nosotros, los diseñadores pezuñeros del código. Herramientas que prometen hacer de la creación de webs un auténtico camino de rosas. De entre todas las disponibles me he ido tropezando con:
- Webflow
- FROONT
- Readymag
- Pinegrow
- Divshot
- Easel (adquirida por GitHub)
- Macaw
- Pingendo
- LayoutIt!
- Jetstrap
- Brix.io
- Bootstrap Studio (aún no disponible)
Algunas son herramientas de trabajo directamente en el navegador y otras son programas independientes instalados en nuestro sistema. Las hay pensadas específicamente para desarrollo con Bootstrap y otras son mucho más generalistas. Pero todas tienen en común un objetivo: suavizar la transición entre la fase de diseño y la de maquetación, presentándose como entornos amigables que prometen ayudar a los usuarios menos experimentados que necesitan crear webs sin saber html. Como cuando Dreamweaver se vendía como una máquina de hacer webs él solito.
No he llegado a probar todos los programas que he enumerado arriba pero sí que he trasteado en diferentes momentos con Readymag, con Webflow, Macaw, Pingendo y LayoutIt! Por ejemplo Readymag está muy orientado para hacer case studies, presentaciones de proyectos, etc… Es muy interesante ver cómo lo usan grandes profesionales como Anton & Irene quienes han comentado en más de una ocasión que les parece una herramienta fantástica. Por algo será.
Webflow por su parte me parece de los entornos de trabajo más completos y robustos que hay disponibles actualmente. Es un buen editor online sin embargo creo que como entorno amistoso para el novato puede llegar a asustar. Demasiadas opciones y posibilidades de configuración.
Macaw por su parte empezó muy fuerte prometiendo un entorno mucho más potente que la alternativa de Adobe, Muse, pero le he perdido un poco la pista y no sé muy bien en qué quedará finalmente. No veo que tenga mucho movimiento últimamente en los rinconcitos de diseño. Lo último que leí era precisamente una comparativa con Webflow [en].
LayoutIt! me pareció infumable y con Pingendo he realizado todo el ejercicio que tenía en mente de maquetación responsive y que me ha empujado a estar escribiendo ahora mismo. Había oído hablar de Jetstrap muy bien pero al final fue Pingendo el que se llevó el gato al agua (por puro azar).
Pingendo NO es la solución para todos aquellos que buscamos el gran botón rojo que lance el método makeWeb('responsive','cool'); De hecho petardea lo suyo y en más de una ocasión tuve que cerrarlo y volver a abrirlo. Sin embargo en su favor tengo que decir que me ha servido para entender algunas estructuras al facilitarme el ir añadiendo y arrastrando componentes al html con el que estaba trabajando. Además presenta una interfaz sencillota y amigable para el que verdaderamente no tenga ni idea de en dónde se está metiendo.
Como extra muy interesante tengo que añadir que el día antes de ponerme con el ejercicio me sirvió mucho echarle un vistazo a un par de cursos que hay disponibles en video2brain sobre Bootstrap 3. No daré mucho la lata en este punto en concreto pero podéis probar video2brain durante 7 días gratis si queréis. Aquí dejo toda la información.
Cuanto más avanzaba haciendo el ejercicio más me daba cuenta de que en realidad no estaba usando ninguna de las características del programa. Teóricamente si usas un programa así es para poder emplear los módulos prefabricados o los asistentes. Al final terminé con la zona del editor de código maximizada para ir escribiendo directamente el HTML y las propiedades CSS necesarias. Guardaba, abría el HTML en el navegador y volvía al editor. Repetir ad infinitum.
Fue ahí donde me dí cuenta que la mejor metodología es, para mi, mamarte las bases de HTML y CSS para pegarte con ellas en un simple editor de texto. Con ejemplos muy chorras y sencillos al principio. Como si es para aprender simplemente qué es una lista desordenada y el código necesario para hacerla. Sólo así realmente entiendes qué es lo que estás haciendo. Desde la base más base de todas las bases que puedes estar pensando. Una vez tienes los conceptos iniciales claros, sí que es posible sacarle partido a un entorno como Webflow y compañía sin que todo suene a chino.
Lo curioso llega justo ahora y es que creo que en el momento en que se tienen unos conocimientos básico-intermedios, el uso de estos programas termina añadiendo una capa extra de complejidad al desarrollo. No digo que estos programas «sobren». Particularmente me parece muy interesante cacharrear y probarlos, pero tras haber catado unos pocos sigo sin encontrar uno que realmente pueda recomendar muy fuerte hasta el punto de señalarlo con el dedo con los ojos abiertos de par en par.
Resumiendo: Sé que enfrentarse al código web da un poco de miedo al principio y que si de verdad no sabes hacer nada todo parece muy muy MUY cuesta arriba. En ese caso échale un vistazo a los cursos mencionados anteriormente porque hay más chicha para aprender fundamentos de HTML y CSS para novatos. Creo sinceramente que es la mejor decisión que se puede tomar en vez de buscar un sustituto en forma de programa que promete hacer el trabajo sucio por ti…y se queda por el camino.
Bola extra: Aprovechando el calentón hice un freebie que consiste básicamente en el sistema de columnas responsive que viene por defecto en Bootstrap. Para Sketch. Aquí. Y también recordad que aquí hay muchísimas plantillas y módulos premium bien majos para no tener que empezar de cero.
Totalmente de acuerdo contigo Armando y ojalá, por nuestro bien, se quede siempre en promesa 😉
Bueno esto es como que las máquinas terminarán eliminando miles de puestos de trabajo a causa de la automatización, ¿no? Aquí seguimos aún.
Con esto quiero decir que no veo para nada malo el avance y la búsqueda de la automatización en según qué cosas. Si de verdad se encuentran patrones repetitivos o tareas automatizables seré el primero en recibirlo con los brazos abiertos para así poder dedicarme a otras tareas. Pero en concreto con este tema que nos aborda me cuesta pensar que se llegará a algo verdaderamente potente y que pueda sustituir a los que saben de verdad.
Estoy de acuerdo parcialmente, a medida que se van implementando page builders, hace poco que me enteré que en WordPress también están en ello, una parte nada despreciable de los trabajos se pueden hacer con alguna de las aplicaciones comentadas. La razón es que sencillamente se gana mucho tiempo y deja a los que somos creativos pensar un poco más en la parte estética. A mí no me gusta emplear plantillas y jamás engañaré a un cliente si uso una, pero qué demonios, a veces es lo más conveniente. Y es que, por supuesto, para webs robustas es necesario un programador, pero se trata simplemente de una cuestión de tiempo/presupuesto.
No te olvides de Adobe Muse. Yo lo uso de vez en cuando para crear landings sencillas o montar demos interactivas que no sean muy complejas, y está bien por que te puedes centrar totalmente en el diseño. Eso sí, cosas sencillas, si quieres hacer cosas más completas tiene que meterse un programador.
También está el Adobe Edge Reflow, que también lo he usado un par de veces para simular pruebas responsive, lo mismo que lo anterior, el programador se tendrá que meter si quieres ir más allá.
Muse lo comento muy muy de refilón porque lo toqué en sus primeras betas y no lo he vuelto a probar. Lo has llegado a usar para algún proyecto real? Te quedas solo en cosas como landings?
Es que por ejemplo, si es para hacer apaños rápidos, no merece más la pena pillar un template html que te guste y lo ajustas mínimamente? Porque los html responsive los encuentras free muy buenos y muy muy buenos por menos de 15-20 dolarines. Esto lo he hecho en más de una ocasión en la que necesito algo rápido para hacer pruebas o tests como http://goodphotoshoptexteffects.com/
Aprovecho para corregir algunas faltas garrafales de ortografía que se me habían pasado. Mil disculpas. Con lo talibán que soy para estas cosas…
Sí que lo he usado para proyectos reales, pero cosas muy muy sencillas, en las que tampoco merece la pena meterse a modificar una plantilla, y solo necesitaba poner un header, algún menú, galería o carroussel con efecto lightbox, algún efecto parallax… Cosas muy concretas que Muse te lo da fácil y tú le añades tu estilo. En un plis lo tienes montado sin haber tocado código, solo arrastrando y añadiendo cosas.
Lo más potente que he encontrado en Muse es que puedes crear nuevos efectos / menús / pasafotos, etc… casi como te de la gana, simplemente modificando los widgets básicos que te da el programa. Tampoco es que sea un experto en la materia, pero de un widget base he llegado a crear cosas muy muy personalizadas en un santiamén.
Sí que lo he usado, y lo sigo haciendo, para demos a cliente. Del estilo, mira, en este diseño irá un vídeo de fondo en el header, y mostrarle la versión montada en Muse simplemente con el vídeo aplicado en el header en movimiento, y unos cuantos botones con rollover. Da bastante el pego. O, mira esta caja quedará fija en el lateral, al hacer scroll se mantendrá, y mostrale el efecto con su diseño en muse. Lo mismo con los típicos menús superiores que al hacer scroll aparecen y se mantienen fijos en el «top» de la página, se lo enseñas a un cliente junto al diseño y les gusta bastante verlo ya «en movimiento». Efectos parallax en también 2 segundos los tienes aplicados… diría que el principal uso que le doy ahora mismo sobre todo es para demos de este estilo de cosas concretas. Sobre todo por que se hacen muy rápido y los clientes lo valoran mucho.
Le echaré un vistazo entonces en algún momento de esta vida xD. En particular si quiero mostrar algún efecto es porque lo he visto en algún sitio y cuando justifico las decisiones de diseño en la documentación no me corto en poner la referencia para mostrar la animación o el efecto si hiciera falta.
No obstante a lo que dices le veo paralelismo en mi caso, pero en tema de apps para mostrar transiciones entre pantallas o flujos de navegación. En ese caso yo tiro de Marvel (aquí un tuto que hice http://webdesign.tutsplus.com/tutorials/how-to-create-an-interactive-prototype-with-marvel–cms-22683).
Gracias Roberto!
A mi me pasó exactamente lo mismo que comentás, tengo conocimiento de HTML y CSS. Por curiosidad me instalé Macaw y fue frustrante plasmar lo que tenía bocetado, me llevó más tiempo y los resultados no fueron los óptimos. Como dices, aunque cueste es mejor aprender los fundamentos de HTML y CSS para entender y saber como funciona, luego con la práctica va saliendo solo.
Gracias por compartir tu opinión Julio con la que estoy, evidentemente, totalmente de acuerdo 😀
Aquí es un nuevo blog de diseño web – http://designmodo.es/. Están los artículos de Designmodo.com, popular sitio web.
¿Alguien de la sala ha probado la aplicación «Bloc»? Porque no la veo en la lista y creo que esa puede despuntar en un futuro no muy lejano…
Fernando, tienes link a mano para echarle un vistazo? Con un nombre tan genérico no soy capaz de encontrarla :S
Hola Skeku! erratas había…. no era bloc sino blocs…aquí te paso la url >> http://blocsapp.com
Pues no me sonaba de nada… Le tengo que echar un vistazo!
Cabe destacar que esa app es solo para Mac, parece preciosa, quedé encantado, pero me quedaré con las ganas XD
Es una lástima que se segmente a los usuarios de esta forma, la verdad :S
Acabo de visitar la web, la presentación es simplemente impecable. Dan ganas de probarlo. Pero antes una review. http://www.macworld.com/article/2929592/blocs-1-3-review-web-design-program-executes-well-on-limited-ambitions.html
Ahí también se habla de Macaw, que también tenía una pinta estupenda, pero una y otra vez he encontrado comentarios acerca de bugs que aparentemente siguen sin resolverse a día de hoy. Finalmente señalar a los que usamos o hemos usado Muse, que por fin los de Adobe se han bajado del burro y anuncian una versión para crear responsive webs.
Yo la he usado, he hecho 4 webs bien hechas con ella, cobrando vamos, y se hacen en menos de una hora montarlas, sin contar el tiempo de las imágenes, te saca de un apuro, eso sí no le pidas peras al olmo. Tiene fallos, y tiene un diseño actual, pero no permite salirse de ello. Y el php de los formularios se hace a mano.
Y bueno en resumen, lo que ves es lo que hay, si quieres hacer algo que no esté programado olvídate porque luego no podrás editarlo y tendrás que hacer los cambios a maniki en el archivo que te da blocs para subirlo.
¡Ok gracias por la aclaración!. Es que estoy pensando en comprarla, pero no veo el momento ni tampoco estoy seguro al 100%. ¿Otra sugerencia en la sala?
Una pregunta. Tengo conocimientos de web. y me parecio muy buena la pagina de webflow. Si sabes un poco sobre programacion web se te hara muy facil. Alguien ha trabajado con esta pagina ??? El problema que presento en estos momentos es que quiero tomar todo el codigo generado y ponerlo en un host privado pero no se como hacerlo..
A ver si esto te ayuda Diego: http://help.webflow.com/faq/how-to-export-a-webflow-site
Saludos!
Por cierto que andé trasteando con webflow, que también tiene una pinta estupenda, pero la verdad es que me acojona bastante. Espero hacerme con él pronto.
A mi webflow me parece bastante completito pero con ese nivel de complejidad visual yo termino prefiriendo volver a «los orígenes» y pelearme con el código directamente. Para las cosas que yo he necesitado hacer (bastante simples) termino apañándome mejor como comento en el artículo, con un editor como Sublime y a tirar millas!
Buenas. un artículo completo.
He utilizado varias herramientas de las que nombras, sobre todo Webflow, pero creo que es bastante liosa a mi gusto. Tengo un espacio web hecho con esta herramienta. También he investigado sobre el tema y encontré un creador de páginas parecido a Adobe Muse y a Webflow, que se llama Theme Generator. Me permite hacer diseños como este https://themesgenerator.com/themes-preview/corporate/ que son totalmente responsive. Puedes crear tu espacio con el sistema de arrastrar y soltar bloques, y mediante la opción CSS. Creo que tanto profesionales como principiantes les puede resultar útil.
Espero que sea de utilidad =)
Muchas gracias por tus aportes.