Son tantos los servicios que ofrece BaseKit que es difícil resumirlo en un simple titular. Con BaseKit, puedes diseñar tu web en Photoshop, convertir ese diseño en HTML y CSS a partir de tu plantilla, y alojar la web resultante, incluso utilizando to propio dominio.
BaseKit cuenta con un editor online que permite modificar el diseño de tu web por completo, insertar y recolocar imágenes, bloques de texto, lo que se os ocurra. Incluso modificar el código CSS. Y para los más torpones, se ofrecen más de 100 plantillas predefinidas que puedes usar como punto de partida.
Diseña en Photoshop, que BaseKit se encarga del HTML
Es la funcionalidad estrella de BaseKit, su punto fuerte. Lo mejor de dos mundos… crear el diseño de nuestra web en una herramienta profesional, como pueda ser Photoshop, y con el editor online de BaseKit convertirla en código HTML. Una delicia, pero con matices.
No esperéis coger cualquier archivo PSD y que por arte de magia tengáis la web perfectamente creada. Hay una serie de características que debe tener ese archivo PSD para que BaseKit lo interprete correctamente y realice la conversión, pero no es nada del otro mundo.
Ancho del contenido: El fondo puede tener cualquier ancho, pero el contenido debe ser 780, 960 o bien 1200 pixels, de partida. Esto puede ajustarse al gusto en el editor.
Separar diseño de contenido: Algo que cualquier diseñador web debería repetir como un mantra. Las capas de contenido deben estar agrupadas por un lado. Las de imágenes de fondo deben estar en varias capas no superpuestas.
Dividir el área de la web en capas con nombre: header, subheader, feature, subfeature, main, footer y/o background. De esta forma, BaseKit sabrá dónde tiene va cada cosa. Si le añadimos “(flex)” al nombre de la capa, el alto de esa zona será dinámico, en función del contenido.
Que el archivo resultante no sobrepase los 20 megabytes.
En el vídeo que encabeza este apartado está perfectamente explicado cómo adaptar cualquier plantilla muy fácilmente, además de algún truquito avanzado que da una idea de lo extremadamente potente que es la herramienta de importación.
He seguido los pasos del vídeo y he adaptado una plantilla gratuita que se ofrece en PSD. El resultado es esta página de prueba. Tras subir la plantilla a BaseKit, han sido apenas diez minutos de retoque en el editor online, sin esmerarme demasiado. Desde BaseKit te ofrecen una plantilla de ejemplo en PSD que ayuda mucho a entender cómo hay que formatearlas.
O utiliza una de las plantillas
Si tienes un proyecto sencillo, lo tuyo no es el diseño, o no quieres complicarte la vida, puedes optar por tomar como punto de partida una de las más de 100 plantillas que te ofrece BaseKit.
Hay diseños para todos los gustos. ¿Moda? ¿Deportes? ¿Una web corporativa? ¿Gatitos? De todo. Pero es que además, con el editor online podrás modificar cualquiera de estas plantillas, así que las posibilidades dependen sólo de tu talento y creatividad.
Retoca el diseño de tu web con el editor online
Una vez tengamos nuestra plantilla base, bien a partir de un PSD o usando uno de los diseños que ofrece BaseKit, el siguiente paso es darle nuestro toque personal. Desde el panel de edición disponemos de una serie de elementos para añadir, como bloques de texto, imágenes, disposición de texto en columnas, menús de navegación, barras de búsqueda, mapa de la web, o incluso algunos más complejos como formularios, miniaturas de Flickr, o vista en tiempo real de Twitter a partir de hashtags o de nuestra propia cuenta.
Otros de los widgets disponibles permiten crear nuestra propia tienda online usando Google Checkout como motor, añadir comentarios a la página, insertar vídeos, mapas con Google Maps… la lista es muy grande.
Cada uno de estos widgets puede ser colocado en cualquier parte de la página, y cuenta con su propio panel de configuración para afinarlo a nuestro gusto. Es más, tenemos acceso al código CSS de cada elemento, por si queremos picar código y darle los últimos retoques de estilo a mano.
Aquí os doy un pequeño consejo: no editéis el CSS hasta que hayáis organizado los elementos a insertar, porque he visto que si modificas ciertas propiedades CSS (como margin o padding), el editor se vuelve un poco loco al editar bloques de texto (al menos en Chrome).
Una vez que tengáis una página como base, podéis crear cuantas páginas sean necesarias a partir de esta. Es más, si queréis podéis aplicar a cada página un diseño independiente, a partir de diferentes plantillas.
El código HTML generado por BaseKit es sorprendentemente claro, muy bien estructurado y con comentarios indicando cuál es cada sección. Podéis comprobarlo en la cutre web que he creado durante las pruebas.
Gestiona bases de datos, comentarios, Analytics…
Cada formulario que incorpores en tus páginas está vinculado a una base de datos. Desde el panel de administración podemos añadir o modificar esas bases de datos, así como consultar el contenido remitido por lo usuarios. La gestión de comentarios se realiza de forma separada, y podemos ver y administrar todos los comentarios recibidos.
Si quieres además conocer las estadísticas de visita de tu web, puedes añadir con facilidad el código de control de tu cuenta de Google Analytics, que es gratuito.
Aloja tu web en Basekit
Cuando termines el diseño, sólo queda tener el valor de darle a “Publicar”... ya está nuestra página accesible. Aunque si algo falla, siempre podemos volver al panel de control, retocar lo que sea, y actualizar la web. En segundos nuestra web tendrá aplicados esos cambios.
BaseKit no sólo te permite diseñar tu web desde el navegador. También ofrece hosting para las páginas que diseñes. El coste dependerá de tus necesidades, pero con seis euros al mes ya puedes alojar una web con cualquier cantidad de páginas, un gigabyte de almacenamiento y posibilidad de usar tu propio dominio.
Si quieres probar el servicio, puedes crear sin coste una web de hasta tres páginas, 10 megabytes de alojamiento y utilizando un subdominio. Incluso en este modo demo, tienes un canal de soporte donde te resolverán en tiempo real cualquier duda que pueda surgirte durante el diseño de la web.
Por ahora BaseKit no ofrece la posibilidad de descargar la web generada para trasladarla a tu propio alojamiento. Sin embargo, si tu web es sencilla (no utilizas bases de datos) es fácil portarla.
Conclusiones
Me ha sorprendido la facilidad de uso del editor online de BaseKit. Es muy simple trabajar con él, incluso para usuarios sin las más mínimas nociones de diseño web. Es bastante robusto, y no he tenido problemas durante su uso, salvo cuando toqueteé los márgenes con CSS (la web se desplazaba sola al editar el texto), pero es fácil de evitar si editas el CSS sólo al final, cuando ya tienes los elementos en su disposición final.
Tampoco es difícil adaptar cualquier diseño en PSD para que BaseKit pueda importarlo. Con seguir el vídeo que os he puesto es suficiente.
En cuanto al alojamiento, los precios son razonables para lo que se ofrece. Y si no te interesa alojar la web allí, siempre puedes utilizar el editor online para convertir tu plantilla PSD a HTML, descargarla, y utilizarla para tus propios proyectos. Con lo bien estructurado que está el código, no lleva mucho adaptarlo a WordPress o a otro CSM a nada que sepas un poco de HTML. Te habrás ahorrado un buen trabajo.
Enlace | BaseKit
Web de ejemplo | Web de prueba en Basekit
Diseño utilizado como base | En Construcción, de Cifra en DevianArt