Cómo configurar Cloudflare fácilmente

Cloudflare es una plataforma que nos permite mejorar el rendimiento de nuestras webs con sus características de CDN y protegerlas utilizando sus características de seguridad.
En este artículo vamos a seguir el sencillo proceso de configuración de Cloudflare, paso a paso con el plan gratuito. Como solución básica el plan gratuito es más que suficiente, aunque si tenemos necesidades un poco más avanzadas podemos pasar a los planes de pago y activar las características extra que ofrecen.

¿Por qué configurar Cloudflare?

Clouflare nos permite servir nuestra web en menos tiempo aprovechando su red de entrega de contenido (CDN) formada por 180 centros de datos en 80 países, esto quiere decir que a un visitante americano se le servirán los recursos estáticos o elementos cacheados por Cloudflare desde el centro de datos más cercano a su ubicación en lugar del servidor español en el que está alojada la web,  reduciendo así las latencias y por tanto el tiempo total de carga.

Además Cloudflare incluye algunas optimizaciones sobre los recursos como la minificación de javascript o la optimización de imágenes para incrementar esa mejora en el rendimiento de nuestra web. No vamos a comentar en este artículo la optimización de imágenes u otras funcionalidades que no están incluidas en el plan gratuito, porque se pueden utilizar otras herramientas para optimizar las imágenes como ya os contamos en un artículo anterior.

Desde Cloudflare también indican que su servicio de DNS es uno de los más rápidos, es evidente que todos los servicios que ofrecen están enfocados a optimizar al máximo una porción del tiempo necesario para cargar una web. Con todas esas optimizaciones, en algunos casos, podremos apreciar grandes mejoras.

Junto a los servicios de optimización también cuenta con servicios enfocados a la disponibilidad, por ejemplo un servicio de caché que podría servir nuestra web incluso en momentos en los que nuestro servidor se encuentre caído llamado Always Online.

Por último, además del rendimiento y disponibilidad, Cloudflare ofrece funcionalidades para mejorar la seguridad de nuestras webs como la mitigación de ataques DDoS y el WAF dedicado a proteger las webs de las vulnerabilidades más comunes que podrían exponer datos privados de los usuarios o poner nuestro servidor al servicio de actividades maliciosas.

Una de las características clave de Cloudflare es que se trata de un servicio totalmente independiente de las tecnologías usemos para desarrollar nuestra web, no importa el lenguaje o el CMS que usemos, y aunque existan paquetes específicos como el plugin para WordPress no es necesario instalarlos para poder aprovechar sus servicios, únicamente nos aportan la comodidad de poder realizar ciertas acciones desde el panel de nuestra web en lugar de tener que acceder al panel de Cloudflare.

¿Cómo activar Cloudflare en nuestra web?

#Paso 1: registra una cuenta

Lo primero que tendremos que hacer es registrar una cuenta en la web, una vez estemos registrados podremos añadir el dominio que queremos configurar, debemos tener en cuenta que no permite introducir únicamente un subdominio, por lo que tendremos que configurar el dominio raíz donde esté alojada la web.

configuracion-dominio-cloudflare

Una vez añadido el dominio, Cloduflare nos indicará que va a configurar automáticamente las entradas de DNS que tenemos ya configuradas en nuestro servicio para que no tengamos que introducirlas manualmente.

#Paso 2: selecciona el plan que tu web necesite

Lo siguiente que tendremos que hacer es seleccionar el plan que queremos utilizar para nuestra web, en este caso vamos a usar el plan gratuito que nos permite utilizar las funcionalidades de CDN y mitigación de DDoS junto a alguna característica adicional más.

Lo próximo que veremos será una lista similar a la de la captura que hay a continuación con nuestras entradas de DNS y el estado de la configuración de Cloudflare indicado con nubes grises y naranjas, si se trata de la primera vez que configuramos el servicio lo mejor es que dejemos la configuración que se ha generado automáticamente y que por lo general se trata de activar DNS y proxy HTTP para servir el tráfico a través de Cloudflare en las entradas que corresponden a la web y únicamente CDN para el resto.

configuracion-dns-cloudflare

#Paso 3: cambia los servidores de DNS

Para activar la configuración que acabamos de crear tendremos que cambiar los servidores de DNS del dominio a los indicados de Cloudflare (este proceso depende de nuestro proveedor pero en todos es similar) y esperar a que los cambios se propaguen. Una vez hecho esto, si Cloudflare no ha detectado que hemos actualizado la configuración de manera automática, podremos pulsar el botón Re-check now en el dashboard de nuestro dominio para validar la nueva configuración.

¿Qué posibilidades nos ofrece Cloudflare?

Con las DNS correctamente configuradas ya podremos personalizar los servicios que queremos utilizar en nuestra web, desde el propio dashboard además tendremos acceso a un conjunto de acciones rápidas que nos permiten activar y desactivar o ejecutar fácilmente las siguientes características:

  • El modo desarrollador para desactivar temporalmente la caché de Cloudflare, útil para poder ver los cambios instantáneamente reflejados en nuestra web mientras estamos trabajando en ella.
  • El modo Under Attack que permite añadir un captcha a cualquier usuario que intente acceder a la web para bloquear las peticiones que no sean realizadas por usuarios legítimos.
  • Purgar la caché es un acceso directo a la sección de caché donde podremos eliminar los contenidos cacheados por Cloudflare, bien por completo o bien definiendo qué contenidos queremos eliminar para mantener otros. Por ejemplo si solo queremos purgar la caché correspondiente a una url ésta opción nos lo permite.
  • Configuración de DNS, este último enlace es un acceso directo a la sección DNS de la configuración.

Además de activar las características que consideremos oportunas de manera global como las que ya hemos mencionado: caché, modo Always Online, minificado de estáticos podremos definir reglas dinámicas por url. La sección page rules nos permitirá configurar unas acciones, limitadas en cantidad y tipo por el tipo de plan contratado, dependiendo de la url.

Por ejemplo, nos permite desactivar el auto minificado de nuestro dominio a nivel global, ya que, puede ser fuente de problemas con nuestro ecommerce y activarlo únicamente para el blog tras comprobar que todo funciona correctamente añadiendo una regla como la de la siguiente captura.

configuracion-page-rule-cloudflare

Como hemos visto Cloudflare puede ser una herramienta que nos permita mejorar el rendimiento de nuestra web pero no sustituye un buen plan de WPO en el que tengamos en cuenta las características concretas del proyecto. Como con todas las herramientas hay que realizar una configuración adecuada a las necesidades existentes ya que las optimizaciones automáticas no siempre son la solución y nos traen algún problema nuevo. Lo ideal es optimizar al máximo nuestra web y revisar una a una las características de Cloudflare para ver en qué estamos interesados y en qué no, por ejemplo podemos encargarnos nosotros desde la web de generar los recursos estáticos optimizados y utilizar Cloudflare como CDN para servirlos desde puntos cercanos al usuario.

La importancia de usar Iconos y como ponerlos en tu web

Que son los ICO y porque debemos utilizarlos

A la hora de desarrollar un proyecto en base a un diseño, la mayoría de veces tenemos que implementar muchas imágenes (para poner el logo de tus redes sociales, iconos para una lista, o una imagen «SPRITE» indicando individualmente en cada posición que icono tiene que mostrar). Cada vez más los maquetadores web queremos prescindir de las imágenes basadas en bits como png o jpg. Y potenciar mas la utilización de contenido vectorial y escalable (iconos desde una fuente).

En la actualidad, en una misma página acaban habiendo 20 imágenes (aun que sean pequeñas) que tienen que cargar una a una. Esto es un trabajo costoso y pesado en la parte del servidor, aunque creamos que son pequeñas y va a tardar muy poco en cargar.  Actualmente existen varias webs donde podremos encontrar la mayoría de estos iconos en formato «fuente».

¿Qué significa que podemos encontrar los iconos en formato «fuente»?  Una tipografía normal (como la tan utilizada Comic Sans, Time news roman, etc.) que incluye estos iconos en lugar de caracteres o texto, con lo que es mas rápido y sobrecarga mucho menos el servidor cargar este tipo de tipografía que una imagen por cada icono que queramos utilizar.

¿Qué pasa si no encontramos un icono que nos gustaría utilizar? También existen herramientas para la creación de tu propia fuente en base a iconos creados por ti, en formato SVG.

El uso de este tipo de fuentes está preparado para funcionar y fusionarse fácilmente con cualquier plataforma (WordPress, Prestashop, Bootstrap, etc.), por lo que la podremos utilizarlo siempre en cualquier proyecto que tengamos que desarrollar.

Al utilizar este tipo de fuentes, obtenemos muchas ventajas ya que dentro de sus características se encuentran:

  • Fácil implementación con CSS, no necesitamos JavaScript (Aun que también dispone de esta opción de implementación).
  • Fácil gestión de su diseño por CSS, ya que al ser fuente podemos cambiar el color, tamaño, sombra, etc.
  • SVG esto significa que todos los iconos se visualizaran correctamente y a gran calidad en cualquier tamaño.
  • Soporte para todos los navegadores actuales y  ademas también en móvil.
  • Soporte para retina display,  lo que significa que son óptimos para ser utilizados en pantallas de alta resolución.
  • Se puede utilizar en todo tipo de plataformas (como hemos comentado antes).
  • Estas fuentes son totalmente libre para uso comercial.
  • Se puede utilizar en el Desktop, estableciéndolo como fuente de la aplicación, nos permite usar estos iconos de manera directa en bocetos en programas de nuestro ordenador.
  • Y por último y muy importante, ¡ES GRATIS!.

 

¿Cuales son este tipo de fuentes?

Por lo general, nosotros utilizamos principalmente 2 webs. Depende de las necesidades que tengamos en el momento dado. Por una parte, si necesitamos iconos genéricos que están ya creados, como redes sociales, etc. utilizamos FONTAWESOME y si lo que necesitamos son iconos propios (creados por nosotros) utilizamos FONTELLO  que nos permite subir en formato SVG para generar tu propia fuente.

Estas dos webs, son las que utilizamos, pero no son las únicas, también esta FLATICON, FREEPIK, etc. y muchas mas.

¿Como implementar este tipo de fuentes?

Este tipo de fuentes, para implementarlo necesitaremos descargar del sitio oficial el pack (por lo general una carpeta de /font y otra de /css) que lo deberemos incluir en nuestro directorio, empezaremos explicando FONT AWESOME.

FONTAWESOME

  1. Copia el contenido completo en tu proyecto.
  2. En el header de su sitio web haz referencia a la ubicación  de tu font-awesome.min.css.
  3. Ahora ponemos varios ejemplos:
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

Para saber cual es la clase necesaria para tu ICO, la puedes buscar AQUI

FONTELLO

Esta vamos a explicar como utilizar los iconos personalizados. Una vez tienes tu icono (creado con formato SVG o creado vectorizado y exportando como SVG), nos dirigimos a la web de FONTELLO.
En esta web vemos que tiene sus propios ICO como el fontawesome, pero la primera opción es: «Drag custom SVG icons or SVG font here». Ahí si arrastramos nuestra imagen, nos la cargara. En este caso nosotros hemos cargado 4.

Como podéis ver los 4 iconos están con un borde «ROJO» esto indica que han sido seleccionados para la exportación, antes de realizar la exportación, debes elegir los ICO que vas a exportar, ya que dependiendo del proyecto necesitaras unos u otros y se guardan todos los que has subido anteriormente.
Una vez tenemos seleccionados todos le damos a «Download webfont». Esto descargara un ZIP donde estará todo el contenido necesario para importar y poder utilizar esta fuente generada con nuestros iconos.

    1. Dentro del zip encontraremos «demo.html» donde sale un ejemplo claro de la implantación de tus iconos, con los códigos para poder utilizarlo.
    2. Copia las carpetas CSS y FONT dentro de tu proyecto.
    3. En el header de su sitio web haz referencia a la ubicación del css que hay en el archivo comprimido y que previamente has exportado en tu proyecto.
    4. Realizamos la importación de los estilos en nuestra hoja de estilo principal (Style.css, global.css, etc.) (Importación fuente + estilo)
    5. Ahora vamos a poner varios ejemplos:
icon-chaise 0xe800
icon-sillas 0xe801
icon-sillones 0xe802
icon-sofas 0xe803

 
 
 

Ejemplos de modificación

– Como podemos comprobar tardan bastante poco en cargar, no sobrecargan el sistema apenas, es una herramienta MUY FÁCIL de instalar y también es MUY FÁCIL de utilizar.
– Como cada icono tiene su propia «CLASS», desde el CSS podemos modificar fácilmente el tamaño, color, etc. De cada uno independientemente.

fa-2x
fa-3x
fa-4x
fa-5x

– En muchas ocasiones, no podemos acceder al elemento y añadirle una clase especifica, por que genera el contenido por PHP o Javascript, aun asi igualmente podemos añadir estos iconos por CSS con las propiedades :before / :after. Ahora os pongo un claro ejemplo de como se realizaría. En este ejemplo, vamos a generar un texto con «P» con la clase «ejemplo» y por nuestro css le añadiremos el icono deseado antes del elemento y después:

Elemento que añadiremos en el css:

Elemento «P» que esta en nuestra web.

Ejemplo:

TEXTO DE EJEMPLO CON ICONO ANTES Y DESPUES

La mayoría de estas fuentes se instalan de forma similar, por lo que con estas explicaciones de instalación acabamos el «mini tutorial» y vamos con las conclusiones.

Conclusiones

En la actualidad la velocidad a la hora de cargar las páginas web es un dato MUY IMPORTANTE ya que todos sabemos que GOOGLE te puede beneficiar en SEO si tu web tiene una carga rápida frente a otra que no la tiene. Con esto facilitaremos el trabajo a nuestros compañeros «SEO» y como podemos ver la redimensión de tamaños no pierde calidad y visualmente se ve perfecto (tanto si hablamos de grandes tamaños como de pequeños).

Hemos comprobado también que añadirlos tanto manualmente como por CSS es una tarea muy fácil y rápida por lo que no hay excusa ninguna para utilizar este método de iconos y mas siendo que es algo «GRATIS» y no tenemos que pagar ningún tipo de derechos.

En los últimos años hemos utilizado mucho las «IMAGENES SPRITE» que es una imagen donde contiene todos los ICONOS y tu personalizas vía CSS la posición exacta del icono que deseas mostrar, por lo que solo carga una imagen, aun así este método es mas rápido ya que carga menos aun la web que «IMAGENES SPRITE» y como hemos comprobado es mucho mas fácil de implementar.

 

¿Tienes alguna incidencia?

Cuéntanos qué ocurre
y nos pondremos con ello lo antes posible.

Este sitio está protegido por reCAPTCHA, y la Política de privacidad y Términos de servicio de Google.
Sucríbete a
nuestra newsletter

para estar al día en el mundo online

¡Cuéntanos tus ideas!
+34 96 653 19 14
+info@acceseo.com
He leído y acepto la política de privacidad

Este sitio está protegido por reCAPTCHA, y la Política de privacidad y Términos de servicio de Google.