CDN CDN

Menu
Content
Por KyMAN. Creado a fecha 2021/10/27. Última modificación a fecha 2021/10/27.

CDN

Este sitio Web simplemente espeja la fuente original de ciertas herramientas públicas OpenSource, con el objetivo de no depender de cambios de versión, así como si desapareciere el proyecto, tener la referencia del mismo en un entorno local. Sólo se publicarán herramientas, ficheros y elementos que sean de autoría agena a los proyectos de KyMAN, con su correspondiente autoría y vinculación con el sitio Web original de cada recurso.

Por KyMAN. Creado a fecha 2021/10/27. Última modificación a fecha 2022/04/20.

Files (Archivos)

A continuación se listarán todos los ficheros que contiene el CDN para uso externo.

NOTA: Con respecto a los CSS que van orientados a las fuentes, los hay de uso remoto o de uso local. Se distinguen en la URL a partir del origen. A día de esta nota, las fuentes donde salga "google" en la URL se cogen directamente de Google, mientras que las que salen "local" son fuentes que se recogen únicamente desde el entorno local. Las fuentes que se recogen de forma remota siempre serán recogidas del CDN o servidor fuente oficial.
NOTA: Con respecto a las fuentes, Google divide las fuentes en grupos de caracteres, que es por lo que para una única fuente te puedes encontrar múltiples ficheros WOFF2. Al usar un sistema de identificación no humano, no se puede distinguir qué es cada una, pero uno se puede guiar por su homónimo de llamada en CSS.
Por KyMAN. Creado a fecha 2021/10/27. Última modificación a fecha 2022/04/20.

Sources (Fuentes)

A continuación se irán encapsulando las diferentes fuentes que comparte este CDN para nombrar autoría y recurso o recursos originales, así como si hiciere falta algún requisito de uso como adjuntar texto o contenidos a petición de la licencia o autor.

IMPORTANTE: Muchas gracias a los creadores de estos contenidos por compartirlos y permitirnos usarlos. Sois unos cracks. Por favor, visita los sitios de sus contenidos y Webs de los creadores si lo tienen.
IMPORTANT: Thank to content creators so much for sharing and allowing use them. You are cracks. Please, visit the content website and the creators' Web if they have it.

OpenSans

Fuente de texto cogida desde Google Fonts.

NOTA: Seguir la licencia de la página de Google Fonts.

Oxygen

Fuente de texto cogida desde Google Fonts.

NOTA: Seguir la licencia de la página de Google Fonts.

Roboto y Roboto Mono

Fuente de texto cogida desde Google Fonts.

NOTA: Seguir la licencia de la página de Google Fonts.

Source Code Pro

Fuente de texto cogida desde Google Fonts.

NOTA: Seguir la licencia de la página de Google Fonts.

Ubuntu y Ubuntu Mono

Fuente de texto cogida desde Google Fonts.

NOTA: Seguir la licencia de la página de Google Fonts.

Space Art Publish

Blue dust Blue dust Cold nebula Cold nebula Far star Far star Far Sun Far Sun Other far Sun Other far Sun Gas giant Gas giant Hot nebula Hot nebula Ice planet Ice planet Red giant Red giant Sun Sun Sun (Fixed for rotate) Sun (Fixed for rotate) Super earth Super earth Other super earth Other super earth Tiny Moon Tiny Moon Violet dust Violet dust Yellow dust Yellow dust

Este Pack de Sprites espaciales creo que es muy especial.

IMPORTANTE: Es libre su uso, sin embargo, el autor nos pide que si usamos dicho Pack en algún proyecto, por favor, se lo hagamos saber por correo enviándole un correo conforme dónde lo vayamos a usar, simplemente informativo. Ya que nos lo comparte, no nos cuesta nada hacer dicha acción. En los Links oficiales publicados ya sale el correo con la acción de publicación en el asunto del correo.

JSZip

Librería para gestionar Zips en el entorno cliente o entornos JS.

Font Awesome

Librería para gestionar Zips en el entorno cliente o entornos JS.

Material Icons

Librería para gestionar Zips en el entorno cliente o entornos JS.

highlight.js

Librería que permite crear un marco HTML con Syntax Highlighting contra un lenguaje concreto.

NOTA: Esta librería la encontré para ser usada en MarkDown contra GitLab y la adapté para que fuera comptabile con WMarkDown.

highlight.js

Librería que permite crear de forma dinámica en HTML SVG, a partir de una sintaxis de texto plano muy sencilla, diagramas y esquemas relativamente complejos. Se basa en un sistema de niveles de dependencia para la generación de los esquemas y diagramas. Posee una alta variedad de modelos para generar el gráfico que se requiera.

NOTA: Esta librería la encontré para ser usada en MediaWiki y la adapté para que fuera comptabile con WMarkDown.

MathJax

Librería que permite crear funciones y operaciones matemáticas de forma matemáticamente visual a partir de etiquetas y símbolos.

NOTA: Esta librería la encontré para ser usada en MediaWiki y la adapté para que fuera comptabile con WMarkDown.

html2canvas

La librería html2canvas es una librería JS que aprobecha la capacidad del motor JS sobre CANVAS en un ordenador o en NodeJS para transformar un documento DOM gráfico (HTML a partir de un IFRAME) en datos de imagen Bit Map.

NOTA: Esta librería la conocí por el proyecto de la librería jsPDF al ser una dependencia no directa de éste. Es muy útil para pasar a formatos de imagen una página. En jsPDF es usado para coger los binarios de las imágenes.
IMPORTANTE: Esta librería no se salta el CORS de las fuentes remotas. Aunque existe la técnica de crear 2 CANVAS y clonar punto a punto de color mediante una matriz, ésta usará las reglas por defecto. Para saltarse el CORS es necesario hacer uso de un Proxy CORS o de la práctica anteriormente mencionada.

DOMPurify

La librería DOMPurify, o "purify.js", no es más que una librería para renderizar el DOM, es decir, para quitar elementos inservibles, invisibles o cambiar a una estructura equivalente pero con mejor rendimiento XML sobre DOM.

NOTA: Esta librería la conocí por el proyecto de la librería jsPDF.

jsPDF

La librería jsPDF es una librería que nos permite crear archivos PDF dinámicamente desde JavaScript, ya sea desde navegador como desde NodeJS.

NOTA: Herramienta necesaria para crear informes PDF desde un cliente JS.
Por KyMAN. Creado a fecha 2021/10/27. Última modificación a fecha 2021/10/27.

Instalación

Para instalar el servidor CDN se requiere de tener previamente un servidor Apache2, Nginx, IIS, etc. El cual, a su vez, tenga implementado el módulo de PHP. En este caso se desarrolló para ser instalado en un servidor Apache2, pero eso no imposibilita la adaptación de este pequeño manual de instalación contra otro tipo de servidores, siempre que sean comptabibles con el módulo de PHP.

También se requiere de al menos el lado PHP del proyecto WMarkDown para gestionar la creación o actualización de los HTML a partir de los ficheros WMD.

Como Sistema Operativo donde va montado el proyecto, en este caso será Debian, pero puede ser cualquiera que admita el servidor Web con PHP sobre el que va a ir montado. Al estar desarrollado cara Debian, el manual irá sobre Debian, pero no quita que pueda ser adaptado a otros entornos como puede ser Fedora, Windows, etc.

Para empezar, por si se busca una instalación que parta de 0, una vez instalado el Sistema Operativo (Debian para este ejemplo), hemos de instalar Apache2 y PHP, lo cual lo podemos hacer a partir de los siguientes comandos:

                    
  • Language sh
  • Lines 3
  • Characters 79
apt update # apt upgrade # Sólo si fuese necesario. apt install apache2 php7.4
NOTA: No se pone PHP 8 por el hecho de que requiere de una instalación con repositorio externo.

Una vez instalado estos programas, hemos de clonar el proyecto del CDN en el directorio donde lo queramos instalar, mediante el siguiente comando.

                    
  • Language sh
  • Lines 1
  • Characters 38
git clone https://git.k3y.pw/KyMAN/CDN

Una vez descargado, hay que crear dos ficheros los cuales no pertenecen al proyecto y que serán ignorados por Git mediante el fichero ".gitignore", los cuales son el Secrets PHP para determinar la ubicación local del proyecto WMarkDown y su configuración base para la creación de los ficheros HTML a partir de los ficheros WMD; y el fichero de configuración de Apache.

Empezando por el primero, el fichero se ubicaría con el Path "PATH/CND/PHP/CDN.Secrets.php" y su contenido sería tal que así:

                    
  • Language php
  • Lines 12
  • Characters 211
namespace CDN; class Secrets{ const wmarkdown = [ "root" => "{PATH}/CDN", "html_base" => "/HTML/base.cdn.html", "title" => "CDN" ]; };
IMPORTANTE: El fichero ha de ir encabezado con la apertura de código de PHP ("<?php").
IMPORTANTE: El fragmento de código "{PATH}" ha de ser substituído por el Path absoluto, dentro del sistema, del proyecto.

El fichero de configuración de Apache2 no tiene una ubicación específica pero por defecto se puede poner en el raíz del proyecto con Path "PATH/CDN/CDN.apache2.conf", y su contenido sería tal que así:

                    
  • Language conf
  • Lines 26
  • Characters 1045
<VirtualHost *:80> ServerName cdn.local DocumentRoot {PATH}/CDN/Public RewriteEngine On RewriteCond %{HTTPS} !=on RewriteRule ^/?(.*) https://%{SERVER_NAME}/$1 [R,L] ErrorLog ${APACHE_LOG_DIR}/error_cdn_80.log CustomLog ${APACHE_LOG_DIR}/access_cdn_80.log combined </VirtualHost> <VirtualHost *:443> ServerName cdn.local DocumentRoot {PATH}/CDN/Public <Directory {PATH}/CDN> Options +Indexes +FollowSymLinks +MultiViews AllowOverride all Order Allow,Deny Allow from all Require all granted </Directory> SSLEngine on SSLCertificateFile {CRT} SSLCertificateKeyFile {KEY} ErrorLog ${APACHE_LOG_DIR}/error_cdn_443.log CustomLog ${APACHE_LOG_DIR}/access_cdn_443.log combined </VirtualHost>
IMPORTANT: el fragmento de código {PATH} ha de ser substituído por el PATH absoluto del proyecto; y los fragmentos {CRT} y {KEY} por los Paths absolutos del certificado y la llave del mismo para el SSL.
NOTA: La URL se cambiaría para hacer la ruta que se quiere concretamente. Es importante tener en cuenta para la ruta, el tema de si hay un servidor Proxy en la DMZ o no, para determinar una ruta final o no, lo mismo para que hacer uso de SSL localmente o no.

Finalmente quedaría vincular este fichero a los sitios instalados en Apache2. En nuestro caso, al trabajar con Debian, se hará un enlace simbólico al mismo de la siguiente forma:

                    
  • Language sh
  • Lines 4
  • Characters 119
cd /etc/apache2/sites-avaliable ln -s {PATH}/CDN/CDN.apache2.conf a2ensite CDN.apache2.conf /etc/init.d/apache2 restart
Por KyMAN. Creado a fecha 2021/10/27. Última modificación a fecha 2021/10/27.

Diseño

Esta sección se creó con la idea de mostrar y gestionar el diseño del proyecto.

Logo

El logo se basa en un nodo central que une a los servidores de los que parten las fuentes (Círculos grandes) con los clientes (Círculos pequeños). Se hizo como un efecto de hélice girando en el mismo sentido todos los nexos entre los distintos elementos, quedando como resultado el siguiente:

Original Original 512x512 Favicon 512x512 Favicon 270x270 Favicon Mac y Android 270x270 Favicon Mac y Android 192x192 Favicon 192x192 Favicon 180x180 Favicon Mac 180x180 Favicon Mac 32x32 Favicon clásico 32x32 Favicon clásico
Por KyMAN. Creado a fecha 2021/10/27. Última modificación a fecha 2021/10/27.

Proyectos

Este proyecto puede evolucionar con el tiempo, aunque su versión actual se considera final. Para poder llevar a cabo dicho proyecto se hicieron uso de tecnologías internas a las que pertenece el autor de este proyecto, KyMAN, las cuales son:

  • WMarkDown: Proyecto para gestionar documentaciones y páginas Web con SEO y otras características con fácil acceso de configuración a partir de ficheros y elementos de marcas de texto en su lenguaje. Sus sitios Web son los siguientes:
  • WDictionaries: Proyecto que complementa el WMarkDown para establecer un diccionario de uso y visualización rápida sobre los proyectos. Al permitir un uso customizado por proyecto, aunque sea a partir del constructor del WMarkDown, éste se usa directamente sobre el mismo.

Por otro lado, fueron usados programas para llevar acabo el proyecto como fueron GitLab y Git para la gestión de versiones del proyecto, Atom para su desarrollo, Inkscape y Gimp para el diseño de imágenes, etc. Dichos programas los exponemos a continuación:

Por KyMAN. Creado a fecha 2021/10/27. Última modificación a fecha 2021/10/27.

Objetivos

Aquí se expondrán los objetivos a cumplir cara el desarrollo del proyecto del CDN de KyMAN. Básicamente, los títulos que tenga este apartado irán orientados a quien o quienes han de llevarlos a cabo, acompañando a cada objetivo con un Checkbox que nos indica si el objetivo fue realizado ( ), está realizándose ( ) o aun no se inició el desarrollo de dicho objetivo ( ). En caso de haber más de un desarrollador, en base al orden que se establezca en el texto descriptivo de cada título, cada Checkbox de cada objetivo representa, consecutivamente, a cada desarrollador, pudiéndose dar el caso de ser desarrollado por 1 o más desarrolladores.

KyMAN

Aquí se pondrán los objetivos exclusivos para KyMAN.

  • Crear proyecto.
    • Generar proyecto Git.
    • Estructurar proyecto.
    • Gestionar el GitIgnore.
    • Crear el servidor local para pruebas.
    • Montar el servidor remoto.
  • Guía de estilos.
    • Seleccionar colores.
    • Crear logo del proyecto.
    • Seleccionar fuentes.
  • Documentar proyecto.
    • Montar el index.
    • Montar el archivo de ficheros.
    • Montar el archivo de fuentes.
    • Manual de instalación del servidor.
    • Página de estilo y diseño.
    • Montar el archivo de proyectos.
    • Montar el archivo de objetivos.
Files