En este tutorial práctico revisaremos que es CDN CloudFlare e implmentaremos el nuevo icono de Twitter haciendo uso de CDN font-awesome, precisar, CDN es el acronimo de Content Delivery Network con la traducción al casteñado como Red de Distribución de Contenidos. El icono de Twitter normalmente es usado en la sección del Social Networking de un sitio web para aplicar la estrategia de marketing online de una determinada empresa.
Requisitos:
- XAMPP v3.3.0.
- HTML 5.
- Visual Studio Code.
Lo que veremos en este tutorial:
- ¿Qué es CloudFlare?
- ¿Qué es CDN libraries font-awesome?
- Crear el nuevo icono de Twitter.
- Conclusiones y Referencias.
1. ¿Qué es CDN cloudflare?
CloudFlare es un sistema gratuito que actúa como un intermediario (proxy ) entre los visitantes del sitio y el servidor, es decir, al actuar como un proxy, CloudFlare guarda temporalmente contenido estático del sitio, el cual disminuye el número de peticiones al servidor pero sigue permitiendo a los visitantes el acceso al sitio.
3. ¿Qué es CDN libraries font-awesome?
El CDN libraries font-awesome es el css o js, son archivos que contiene los iconos que está alojados en la web (servidores) de un tercero, quiere decir, que los iconos no están alojados en nuestros propios servidores.
Ventajas de usar CDN font-awesome:
- Disponibilidad de iconos de font awesome 24/7.
- El CDN font awesome siempre esta en funcionamiento.
- Actualizar rápidamente los iconos (de pago) sin generar cambios en nuestro sitio web.
- Se puede crear múltiples códigos de incrustación para diferentes sitios web.
- Font Awesome CDN se puede cargar nuestros propios iconos de forma asíncrona, mejorado el rendimiento del sitio web.
- Automatizar la accesibilidad a nuestros iconos.
- Disponibilidad de iconos de font awesome 24/7.
- El CDN font awesome siempre esta en funcionamiento.
- Actualizar rápidamente los iconos (de pago) sin generar cambios en nuestro sitio web.
- Se puede crear múltiples códigos de incrustación para diferentes sitios web.
- Font Awesome CDN se puede cargar nuestros propios iconos de forma asíncrona, mejorado el rendimiento del sitio web.
- Automatizar la accesibilidad a nuestros iconos.
3. Agregar el nuevo icono de Twitter.
Crear la página HTML y adiciona el LINK de hoja de estilo (stylesheet) donde hacemos referencia al cdnjs.cloudflare.com, finalmente agrega el icono nuevo de Twitter (fab fa-x-twitter):
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <head> <title>Icon - blog.hadsonpar.com</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" /> </head> <body> <div> <h3>Nuevo icono de Twitter desde CDNJS cloudflare</h3> <i class="fab fa-x-twitter"></i> </div> </body> </html> |
4. Conclusiones y Referencias.
Conclusiones:
Revisamos algunos conceptos de CDN, CDN libraries font-awesome y sus ventajas; asimismo, implementamos nuestro demo con relación al nuevo icono de Twitter haciendo referencia al link de CDN JS font-awesome.
Referencias:
Gracias nuevamente 😊 comentarios y apreciaciones son bienvenido, un fuerte abrazo para todos ✌...!!!
0 Comentarios