Tag Archives: generador

Free as a bee: hacer mails responsive sin complicarse la vida

Free as a bee: hacer mails responsive sin complicarse la vida

El trafico móvil ha superado el tráfico en ordenador desktop desde hace unos meses y Google favorece las páginas webs responsive en los resultados de búsqueda desde móvil así que la palabra clave es adaptabilidad.

Sin embargo, leyendo el artículo de un contacto – hace marketing por un grupo – me sorprendió leer que no se molestaba crear sus newsletters responsive y que su modelo de construcción era el de siempre es decir optimizado para el desktop. Argumentaba su decisión por el hecho que no valía la pena crear modelos adaptativos ya que el ancho de sus newsletters permitían una muy buena visualización en las pantallas del Smartphone, es cierto, y que perder tiempo en crear un modelo optimizado para todas las pantallas no ayudaría en mejorar las ventas.

Personalmente no comparto su punto de vista pero busque si existía un servicio que permitía crear modelos buenos, rápidamente y sin soltar ni un duro, encontré el servicio BeeFree que permite hacer todo esto.

El servicio es de los más simple y totalmente user friendly con un sistema de arrastrar/soltar que permite crear un modelo de principio a fin sin ni siquiera necesitar programar nada. Al empezar, el usuario está invitado a elegir un modelo básico o ‘enriquecido’ ya preformado para ver cómo funciona el generador y las opciones disponibles por cada elemento.

Una de las cosas que más me gusta es que se puede elegir el ancho total del mensaje, de 500 a 900 pixeles, todos los elementos añadidos se adaptaran al ancho que se puede cambiar en todo momento. Luego el trabajo es muy fácil, solo consiste en arrastrar/soltar los elementos disponibles y personalizarlos, la interfaz es realmente muy intuitiva y las opciones son muy claras.

Hacer una newsletter nunca ha sido más rápido y más barato, se puede ver el resultado en formato desktop y móvil y el código completo se puede descargar en el ordenador, no hay trucos.

Ahora están con la versión 2 del servicio que solo es disponible en ingles pero siempre se puede ver la versión 1 que es disponible en español, es un poquito menos intuitiva y hay menos cosas para elegir pero es muy buena.

Están viendo como monetizar el servicio y en las semanas/meses a venir añadirán un servicio de pago para permitir crear/guardar sus modelos y trabajar en línea con su equipo pero por lo visto el servicio actual no debería cambiar y quedaría gratuito.

Compartir

Crear web responsive en linea con WebFlow

Crear web responsive en linea con WebFlow

Los CMS son bastante buenos y sirven para cualquier tipo de necesidad, de un blog personal hasta marcas internacionales muchos utilizan WordPress por su simplicidad y sus templates que se encuentran en todas partes y el codex es suficientemente explícito como para hacer lo que uno quiere. Crear una web responsive a partir de la nada puede requerir mucho tiempo si se hace programándola o muy poco utilizando un site builder como Webflow.

Los sites builder tienen una ventaja, no se necesita conocimientos de programación para crear webs de calidad y suelen ser ‘user friendly’ y WebFlow no es una excepción a la regla, más bien el contrario, funciona bajo el mismo principio que Pinegrow o Pingendo pero es más practico que el primero y más completo que el segundo.

La interfaz principal está divida en 3 partes principales, la de la izquierda contiene todos los elementos básicos que se encuentran habitualmente en una web – contenedor, columnas, bloque de imágenes,… – más la opción de añadir páginas y de ver tutoriales videos directamente sin salir de la página principal.

La parte central es de tipo WYSIWYG y se puede ver y actuar directamente en esta parte para modificar el aspecto grafico de elementos, añadir texto, eliminar elementos,…. Y por fin, la parte de la derecha, la más técnica, donde el usuario puede modificar muy fácilmente buena parte del CSS, elegir si un elemento se debe ver en todos los formatos o solamente algunos, ver la estructura de la página completa, añadir efectos y ver todas las imágenes que contiene la página actual.

WebFlow

WebFlow

La última parte útil para el usuario es la barra superior que permite simular la web finalizada (con todos los efectos activados), ver como es en los distintos formatos (desktop, Tablet, Smartphone, exportar el código o publicar el trabajo en un subdominio de Webflow o en un dominio propio.

La creación de una página web puede ser muy rápida con el sistema de arrastrar/soltar habitual de los site builder e incluso un tutorial enseña cómo se puede conseguir hacer una entera, de principio a fin, en menos de 40 minutos con un resultado bastante aceptable.

WebFlow está bien pensado e incluso el sistema de integración de formulario de contacto es bastante bien hecho cosa que no se puede decir de muchos site builder. Pero todo tiene un precio y los usuarios gratuitos no podrán hacer mucho más que probar el servicio sin poder exportar el código, la cosa se pone interesante a partir del plan de 20 USD/mes (16 USD si anual) que permite crear hasta 20 proyectos distintos de 80 páginas cada uno y de poder exportar el HTML/CSS.

La única verdadera pega del servicio es que no se puede integrar una tienda ni un sistema de venta de productos directamente desde el servicio, habrá que modificar luego para integrar una tienda de tipo Amazon u otra. Una galería de proyectos de usuarios es visible aquí.

Compartir

Pixel together, un generador de landing page (todavia en Alpha)

Pixel together, un generador de landing page (todavia en Alpha)

Hoy toca una entrada aún más corta que de costumbre, pero los Viernes, todo es posible! Encontré por pura casualidad un generador de páginas webs de tipo ‘one page’ todavía en su fase alpha y con muy pocas funcionalidades de momento pero el video me engancho con su musiquita así que decidí probarle.

Funciona como los demás generadores de los que hablé con un sistema de arrastrar/soltar y sin duda la primera cosa que note es que, por una vez, no reposa sobre un sistema de columnas pero eso no significa que no se pueda hacer webs responsives.

En realidad, la web a crear está dividida en viñetas de distintos tamaños (desktop, Tablet y Smartphone) y el usuario puede decidir de como ordenar cada elemento de cada viñeta (y cambiar su altura) por cada tamaño de pantalla o, como no, hacer algo totalmente distinto según el formato.

De momento las opciones son muy básicas pero sale del tradicional sistema de columnas a la bootstrap que no gusta a todo el mundo así que en este caso no se trata de un nuevo framework, es puro HTML/CSS y de momento no he visto nada de JS, la programación es digna de los programadores del final de los 90 pero con un resultado multi plataforma.

Habrá que dejarle algo de tiempo para ver como evoluciona pero ya como muchos otros generadores, proponen una versión gratuita con limitaciones – no se puede exportar nada – y las versiones de pago, demasiada caras por lo que propone el servicio, que permiten exportar los trabajos y por la versión más cara, crear una web multi páginas.

Compartir

Pinegrow, editor visual BootStrap y WordPress

Pinegrow, editor visual BootStrap y WordPress

Cuando alguien quiere lanzar un nuevo WordPress, una de las preguntas más importante es que témplate utilizar y según que sea para bloguear o vender, los templates que vienen con WP pueden no resultar adecuados y hay 2 opciones, la sencilla y la menos sencilla.

La sencilla es irse de paseo en las grandes plataformas que venden templates y comprarse por un puñado de €uros un témplate profesional y modificarlo un poco si necesario para que sea exactamente como uno quiere.

La menos sencilla es partir de una base vacía, tener el Codex bajo el codo, empezar el trabajo para acabarlo varias semanas después. Dado el precio de los templates profesionales, no vale realmente la pena a menos de tener un proyecto muy especial y un cliente dispuesto a gastarse más de lo que le gustaría.

Entre estas 2 soluciones hay un gran vació intersideral con pocas estrellas y una de ellas es Pinegrow. Se trata de un generador bastante bueno que permite sin demasiados conocimientos técnicos unos templates BootStrap pero le prefiero Pingendo por la simplicidad.

Sin embargo, Pinegrow acaba de volverse realmente muy interesante con su versión 2.0 que permite, además de trabajar con varios framework (angular JS, foundation, 960 grid), trabajar con los elementos recurrentes de WP (entradas, comentarios, loop,…) e insertarles exactamente donde se necesitan.

El generador funciona entonces en 2 tiempos, el usuario coloca primero los elementos desde una amplia biblioteca de elementos con un simple arrastrar/soltar para crear su diseño en directo. Luego, cada elemento puede ser modificado directamente en el editor, tanto el PHP como el HTML/CSS sin olvidarse de las propiedades individuales de cada elemento por pequeño que sea.

Pinegrow - GIF animado

Pinegrow – GIF animado

Una vez el diseño acabado, el usuario pasa a otra pestaña que recopila un gran cantidad de las funciones de WP y solo tiene que seleccionar un elemento del diseño – que puede ser un container vacío – y pinchar en una de las funciones WP y automáticamente, el container integrara el PHP deseado (loop, categorías, nav menu,…).

Las posibilidades son infinitas y tienen la enorme ventaja de funcionar como un editor visual de tipo WYSIWYG, ver el resultado final en distintos tamaños de pantalla y ganar un tiempo considerable al momento de programar.

Pinegrow es un generador realmente muy completo y complejo por los que quieren entrar en los más mínimos detalles sin salir del editor, los más exigentes estarán a gusto por un precio increíblemente bajo, 85 USD por una licencia personal y 135 USD por una agencia que podrá ahorrarse semanas de desarrollo.

Los que quieren pueden probar la versión completa durante 7 días pero no podrán exportar el trabajo realizado. Una documentación es disponible y permite hacerse una buena idea de las posibilidades del editor.

Compartir

Un generador HTML/CSS para crear landing pages

Un generador HTML/CSS para crear landing pages

Me gustan los generadores de templates de tipo WYSIWYG, primero porque son simple de uso y luego porque siempre se puede aprender cosas cuando se mira el código en detalle, los considero como ayudantes/profesores y también como una manera de ahorrarse un buen puñado de horas al momento de realizar una pequeña página de presentación por la que se cobrara una miseria pero a veces hay que hacer un esfuerzo para los que realmente no tienen pasta.

Hace un par de semanas, hable de Pingendo, un excelente editor Bootstrap y de hecho no he visto ninguno que lo superaba. Froont podría ser un competidor muy serio pero no utiliza el sistema Bootstrap sino una enorme cantidad de scripts incluidos en una carpeta de la plantilla, nada de scripts exteriores.

A diferencia de Pingendo, Froont es un editor online y solo requiere una inscripción que tarda unos largos 22 segundos antes de poder acceder a una interfaz sencilla y depurada que permite concentrar sobre el esencial, el aspecto visual y nada más. La fase tutorial es muy breve, el usuario está invitado a pasar el cursor en la parte izquierda de la pantalla para abrir un panel que contiene un montón de bloques que sirven de ‘ladrillos’ que se apilan los unos sobre los otros.

La parte izquierda de la pantalla oculta entonces varios tipos de ladrillos, Cada uno tiene su función como los elementos básicos que permiten añadir videos o imágenes, los blocks que permiten insertar texto e imágenes juntos de distintas maneras, sliders, formulario de newsletter (pero no de contacto) iconos o blocks ya listos y diseñados.

La parte derecha es más técnica, permite añadir un título y descripción a la página, un ID analytics, mostrar o no la parrilla y determinar el número de columnas, ver el CSS de cada elemento insertado en la página – pero sin poder editarlo – y con un clic en cualquier elemento, se puede personalizar en su integralidad como cambiar la imagen de fondo, añadir un efecto de aparición, cambiar tamaño y fuente de texto, crear un enlace, añadir un estilo CSS propio y un modo experto permite acceder a una cantidad de ajustes abrumadora, diría incluso que demasiados porque resta a la sencillez de la interfaz, personalmente me resulta más fácil el teclado pero seguro que no todo el mundo compartirá este punto de vista y de todos modos hay muchos tutoriales disponibles.

Una vez acabado su primer modelo, se puede ver en modo preview y en varios formatos de pantalla, de full screen a Smartphone para comprobar que todo sea perfectamente responsive y que el resultado sea lo esperado. Cada modelo tiene una URL propia y se puede compartir con un cliente (por ejemplo) y se puede configurar un dominio para acceder directamente a la página creada lo que facilitara los eventuales retoques y un autobackup permite restablecer una versión anterior.

Por último, es posible descargar los archivos completos por lo menos durante 14 días que corresponde al periodo de prueba. Podría haber empezado a decir que no era totalmente gratuito pero el servicio vale realmente la pena y ni siquiera es caro, 17 USD/mes o 39 USD/mes según el número de página que se quiere hacer, tomando en cuenta que por el más barato se puede crear hasta 20 modelos distintos, el precio es más que correcto, se puede pagar 1 mes, hacer 20 modelos por 20 clientes, descargar los archivos y no volver jamás, el ahorro de tiempo es tremendo y permite proponer landing pages buenísimas y baratas.

Froont es perfecto para los que buscan presentar un servicio, un producto, una asociación o todo tipo de cosa que necesita crear un impacto visual al visitante y lo han logrado. Una versión multi páginas esta en desarrollo y permitirá ampliar bastante las posibilidades del servicio pero será accesible únicamente para los clientes de pago.

Se puede ver unos modelos hechos con Froont en su página web o se puede ver un modelo hecho por yo en 42 segundos con los bloques pre diseñados disponibles.

Compartir

Pingendo, un editor bootstrap realmente muy bueno

Pingendo, un editor bootstrap realmente muy bueno

Todos los que deben crear landing page, newsletter o pequeñas páginas webs tienen siempre el mismo problema, hay un precio incomprensible por debajo del cual no se gana dinero y a menudo le faltan 9 €uros para tener un billete de 10 al cliente o más formalmente, siempre hay que bajar el precio porque no hay dinero…

Todos tenemos trucos como tener nuestras plantillas hechas manualmente o compradas, o tenemos contactos en la India, Pakistán o Bangladesh o por ultimo utilizamos un editor para ayudarnos un poco, trabajar más rápido y bajar el precio final.

En los editores de tipo WYSIWYG hay de todo, unos son gratuitos y otros de pago y los de pago no son necesariamente los mejores ni en el resultado final ni siquiera en ergonomía, tengo el doloroso recuerdo de un editor que pague un poco caro y que hoy, a pesar de recibir actualizaciones de vez en cuando, no vale para mucho.

Sin embargo, hay 2 que realmente están por encima de los demás y han tenido la muy buena idea de ser gratuitos, de momento por lo menos. Uno de estos 2 es LayoutIt, un bonísimo editor online que permite ganar mucho tiempo y el segundo es Pingendo, un editor aún mejor que se instala en el ordenador.

Pingendo es un editor de tipo arrastrar/soltar basado en BootStrap 3.2, es decir que todo lo que se hace con tendrá un código limpio y un diseño responsive, argumento perfecto para vender un trabajo unos €uros más.

El programa se divide en 3 columnas, una a la izquierda que contiene todas las opciones disponibles para tipografía, media, componentes, botones y layouts. La columna de la derecha nos indica la estructura del elemento seleccionado y los ajustes posibles por el elemento y la columna central es el visual del proyecto en curso así que el código HTML en su integralidad.

El trabajo es bastante sencillo y consiste en arrastrar los elementos de la columna izquierda a la parte central para ver el resultado al instante y cambiar texto e imágenes en vivo pero también, y es la gran fuerza de Pingendo, poder ajustar varias cosas con las opciones disponibles en la columna derecha como indicar un ID al elemento, elegir su posición, color, tamaño y si tiene que ser visible u oculto en Smartphone, Tablet, laptop y/o ordenadores es decir que esta última columna permite ganar un montón de tiempo de retoques de código y hasta la fecha no conozco otro servicio o programa, gratuito o de pago, que permite hacer tantas cosas.

Crear un témplate o un landing page se convierte en una tarea sencillísima, se pueden añadir fotos y videos, en una línea, columna o sección en unos clics y todo se puede deshacer con la misma facilidad sin riesgo de fastidiar el HTML que se actualiza en tiempo real, que queda siempre disponible y que se puede editar. La última gran ventaja de Pingendo es que se puede comprobar la visibilidad del trabajo en curso en todos los formatos disponibles gracias a 4 botones situado en la parte superior y que permiten simular una pantalla de Smartphone, Tablet, laptop u ordenador sin tener que guardar su trabajo en su espacio FTP para poder hacerlo.

Para ser sincero, me sorprendió mucho que un programa tan bueno sea gratuito y la versión 2.0 es increíblemente mejor tanto en ergonomía que en posibilidades porque los creadores han añadido unos mini templates de sección vacías o preparados – galerías, equipo de 3 o 4 personas, texto + imagen,…), componentes (video, parágrafo, botón,…) y la posibilidad de hacer un SEO sencillo con las opciones de la columna derecha. Además, es posible retocar directamente el CSS/LESS (imposible en la versión 1) trabajar en varios proyectos a la vez, guardarles. La versión 2.0 de Pingendo está en su fase beta y los que quieren probarla solo tienen que enviar un mail a info @ pingendo.com para recibir un enlace de descarga para Windows, Mac y Linux.

Al final, Pingendo no hace todo el trabajo y no es exento de fallitos pero facilita bastante la tarea para dejar al usuario hacer los retoques necesarios para cumplir con sus requisitos o los de su cliente y entregar un trabajo bien hecho con un código limpio.

Compartir