Hacer webs con Carrd: algunos trucos
Sigo probando cosas en Carrd y me sigue pareciendo una herramienta potentísima e insuperable, en su relación calidad/precio, a la hora de hacer webs sencillas.
Si quieres empezar con Carrd te recomiendo que eches un vistazo a este post que escribí: https://medium.com/livink-offsite/hacer-webs-con-carrd-recursos-y-ejemplos-af869941688c
Con Carrd prácticamente cualquiera puede tener una web, con certificado SSL, funcionando en minutos. Esto del certificado SSL es muy importante porque los navegadores penalizan las webs que no tengan SSL. Otras herramientas para hacer webs, o te cobran una cantidad aparte o te requieren una configuración extra no del todo sencilla, aunque cierto es que cada vez más el certificado SSL básico viene por defecto.
En Carrd la curva de aprendizaje para poder tener algo resultón es rapidísima. Por supuesto, para hacer más cosas complejas tendrás que echar horas y, seguramente, acudir a tutoriales, pero, me gustaría añadir que el aprendizaje en Carrd es agradable y apetece, y no se siente como si estuvieras atascado en un callejón sin salida, como me ha pasado este mes con una herramienta que se llama Plasmic.
Definitivamente, para webs estáticas no se me ocurre mejor herramienta, aunque supongo que ser la mejor herramienta no la hace la más óptima, que entiendo que siempre será picarse el código en HTML+CSS+JS.
Lo último que he hecho ha sido mudar la web de LIVINK de Wordpress a Carrd. La plantilla que estábamos usando se rompió con la última actualización de Wordpress y no parecía que los desarrolladores fuesen a actualizarla. Hice la web en un día y me enfoqué en incluir lo principal: precios, fotos, información de contacto, el mapa de la zona y acceso al contrato que firmamos con los coworkers. Puedes verla aquí: https://livink.es/
Wordpress es un mundo completamente distinto a Carrd así es que me ha tocado investigar y aprender algunas cosas por el camino. Te cuento todo aquello que voy aprendiendo y que no aparece en ningún sitio o es difícil de encontrar. Encontrarás lo siguiente:
- Como embeber un mapa de Google a tu web, y el truco para que tener un mapa en la web no ralentice la carga.
- Como embeber una vista personalizada de un calendario de Google.
- Como usar fuentes tipográficas de Google Fonts, o de cualquier otro repositorio, que no están añadidas por defecto en Carrd.
- Redirecciones de subdominios.
Añadir un mapa de Google a tu web
Carrd tiene una funcionalidad integrada para embeber código externo. La tendrás que usar para mostrar un mapa de Google en tu página. Añades un componente tipo Embed, lo defines como Iframe y le das ancho y alto. Tal que así.
El resultado es igual que esto que ves aquí abajo, porque Medium también permite embeber mapas de Google. Tendrás que ir a buscar la opción de “Compartir mapa” o “Insertar este mapa” para que Google te muestre el link que identifica el mapa. Puedes embeber un mapa creado por ti, como este de aquí abajo, o cualquier otro trozo de mapa con un lugar “buscado”.
Pero embeber un mapa de Google en tu web, tal y como está aquí descrito, queda bonito, pero no es lo más óptimo, porque ralentiza un poco la carga y eso no le gusta a los navegadores. Cada vez que embebes código externo hay movimiento de información que consume recursos y tiempo. Google te penaliza si tu web es lenta y consume muchos recursos. Lo que yo he hecho en la web de LIVINK para evitar la llamada a la API de Google ha sido hacer una captura del mapa, añadirla como imagen y definirle un link si se hace clic en ella. Puedes verlo aquí: https://livink.es/#localization. Visualmente funciona igual, cumple su función y me ahorro la llamada a la API de Google Maps.
Añadir un calendario de Google
En LIVINK tenemos 3 salas de reuniones compartidas que gestionamos con Google Calendar. Sé que hay decenas de herramientas, pero ninguna me ofrecía una solución óptima a un precio razonable. Embeber un calendario de Google en una web no tiene complejidad pues en la propia configuración del calendario te viene toda la información. La dificultad está en embeber más de uno o si queremos personalizar algunas de las opciones. La web para personalizar la vista de Calendario es esta: https://calendar.google.com/calendar/u/0/embedhelper
En Wordpress solo había que copiar el código HTML que se genera automáticamente, ese que se ve el cajón superior, y pegarlo. En Carrd esto no funcionaba por el formato en que se genera la URL.
Si observas, el link generado es una URL así: “calendar.google.com/calendar/embed?atributo1=valor&atributo2=valor&…”
El trozo “&” indica el final de un atributo y el comienzo del siguiente.
Al añadir este link en el campo URL de un componente Embed de Carrd, Carrd estaba añadiendo “amp;” automáticamente a cada atributo haciendo que el link fuese ilegible por el navegador. Para que funcionase tuve que editar la URL y eliminar todos los “amp;”.
En link que queda es así: https://calendar.google.com/calendar/embed?height=600&wkst=2&bgcolor=%23ffffff&ctz=Europe/Madrid&src=bGl2aW5rLmVzX2JiZ203Zm9mOXN0dms2M2dmdWJndDNiN3NzQGdyb3VwLmNhbGVuZGFyLmdvb2dsZS5jb20&src=bGl2aW5rLmVzXzFvN2twYXFmNDM2N25zajRwYnB2NWY3cXRnQGdyb3VwLmNhbGVuZGFyLmdvb2dsZS5jb20&src=bGl2aW5rLmVzX3U1NjJtY2p0a2JuZnVxOTFwbXY1Y25qMDEwQGdyb3VwLmNhbGVuZGFyLmdvb2dsZS5jb20&color=%23000000&color=%23cc0000&color=%230000cc&title=LIVINK%20COWORKING&mode=WEEK
Como ves, los atributos están separados por el ampersand (&) pero ni rastro del “amp;”, pero si nos vamos a ver el código fuente vemos que Carrd ha añadido esta parte haciendo legible la web.
Puedes ver el resultado aquí: https://livink.es/#salas.
Añadir fuentes de Google Font, Adobe o cualquier otro repositorio de fuentes.
En Google Fonts tienes fuentes ilimitadas para que nada limite tu creatividad. En Carrd, sin embargo, el listado de fuentes tipográficas incluidas es limitado. Aquí puedes verlas todas: https://fontsin.carrd.co/. Pero ahí va el truco para poder utilizar cualquier fuente de Google Fonts en Carrd.
Lo primero es añadir un componente Embed, preferiblemente al final de la página. Definimos los parámetros del componente tal y como se ve en la imagen.
Al campo Type le damos valor ‘Code’ y a los campos Style los valores ‘Hidden’ y ‘Head’. Con esta configuración, Carrd colará el código dentro de la etiqueta <head>. El campo Label es opcional.
En el campo Code tenemos que añadir este trozo de código que tenemos aquí.
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=DotGothic16">Y en la parte que hay después “family=DotGothic16” definimos la fuente.
En Google Font cada fuente tiene su propia URL. https://fonts.google.com/specimen/DotGothic16.
El nombre de la fuente es todo lo que hay después de la última barra, DotGothic16 en este caso.
Si queremos añadir más de una fuente a la vez, las separamos con barra vertical (|).
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans">Cuando le pides a la API de Google Font una fuente te devuelve, solamente, su versión ‘regular’. Si queremos otra versión (Bold, Italic, Thin, etc) hay que indicárselo. La fuente Roboto por ejemplo, tiene además de su versión ‘Regular’, 11 variantes más. El código sería así.
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:bold,bolditalic">Con esto le decimos al navegador que busque la fuente con la que tiene que presentar el texto en Google Font. El último paso es darle estilo al texto. El componente Text en Carrd tiene una pestaña de estilos, Styles. Añadimos el texto siguiente, cambiando el nombre de la fuente al nuestro.
font-family: ‘DotGothic16’, serif;
Si lo dejamos así, podremos manipular el resto de opciones de un texto (formato, tamaño, espaciado, márgenes, etc), excepto el atributo Weight, desde las propias funcionalidades de Carrd.
Si quieres saber más, la propia documentación de Google Fonts te puede ayudar. Échale un ojo a este link: https://developers.google.com/fonts/docs/getting_started#overview
Si en vez de Google Font quieres usar fuentes de Adobe el código a insertar es el siguiente.
<link rel="stylesheet"
href="https://use.typekit.net/xxxxx.css">Redireccionamientos
Uno de los problemas que tuve que solucionar a la hora de migrar de Wordpress a Carrd fueron los redireccionamientos.
La gran desventaja de Carrd es, sin duda, que no permite crear de forma fácil un árbol de contenidos. Todo cae bajo una única dirección.
Algo del tipo tuweb.com/blog o tuweb.com/productos no es automático, aunque no imposible. Se puede hacer clonando el proyecto inicial y editando los links, pero si quieres modificar algo de los elementos estructurales (header, footer, etc) tendrás que ir sitio por sitio editando.
En Wordpress yo tenía un blog con 4 o 5 artículos y alguna que otra página, que no podía llevarme a Carrd de forma fácil. Analytics mostraba que todas estas páginas tenían visitas recurrentes todas las semanas, pocas, pero había. Concretamente, un post que escribí (https://livink.es/tuppers-coworking-no-cocinar/) sobre servicios de tuppers a la oficina estaba recibiendo unas cien visitas semanales. Estaba claro que esas páginas iban a seguir recibiendo visitas y si no hacía algo se iban a perder. Me llevé todos los posts a Medium y redireccioné las urls antiguas a su link en Medium. Puedes ver cómo quedó aquí abajo.
Esto lo puedes desde el campo Settings.
El formato es la página sin la parte del dominio (/tuppers-coworking-no-cocinar), un igual (=) y la URL de destino.
A lo largo de todo el canuto que es Internet hay varios elementos de cacheo, que guardan información un tiempo para no tener que solicitarla de nuevo. Si ves que no te funcionan los redireccionamientos es porque alguno de estos elementos tiene guardada la versión anterior y no está recibiendo la nueva información. Yo tuve que reiniciar mi ordenador para poder ver los redireccionamientos funcionando desde mi propio equipo, mientras veía que funcionaba perfectamente en el móvil.
