En el espcacio en blanco (__________), va el nombre de la tipografía escogida, que será nuestra primera opción. Cuando esa fuente se demore o no se pueda cargar por alguna razón, el navegador debería usar las que están a la derecha.
El nombre --fuente corresponde al nombre de variable que le estamos dando a cada una de las fuentes.
Estos textos normalmente los ponemos en estilos:
root {
// Monoespaciadas
--fuenteMonoespaciada: '______________', 'Courier New', monospace;
// Serif
--fuenteSerifada: '______________', 'Garamond', 'Georgia', 'Times', serif;
// Sans-serif
--fuenteSinSerifas: '______________', 'Helvetica', 'Roboto', 'Arial', 'Tahoma', 'Verdana', sans-serif;
}Para cada tipo de fuente se debería poner algo así (el nombre de la variable puede cambiar):
Basado en este excelente artículo:
Estos son los elementos que van en el <head> del HTML
(todas esas rutas también pueden ser relativas, según el proyecto):
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/sitio.webmanifest">--
El archivo sitio.webmanifest se escribe en formato de JSON.
Normalmente ese archivo se guarda así recursos/sitio.webmanifest o estaticos/sitio.webmanifest, dependiendo como llamemos la carpeta donde guardamos los archivos (íconos, imágenes, etc) que no necesitamos que Astro o Vite, o el framework que estemos usando, procese.
{
"name": "Laboratorio EnFlujo", // Nombre del sitio web
"short_name": "EnFlujo", // Nombre corto del sitio web
"icons": [
{ "src": "/icono_192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icono_512.png", "sizes": "512x512", "type": "image/png" }
]
}
--
La imagen desde donde se crean el resto de versiones debe ser un PNG de 512x512.
Esa imagen se guarda en .recursos/icono_512.png
Squoosh es una herramienta genial para imágenes rasterizadas:
- Abre tu imagen icono_512.png en Squoosh.
- Cambia los ajustes de compresión a `OxiPNG``.
- Habilita "Reducir paleta" o “Reduce palette”.
- Selecciona 64 colores.
- Compara el antes y el después moviendo la perilla. SI ves alguna diferencia, aumenta el número de colores.
- Guarda el archivo.
- Repite estos pasos para tu icono-192.png y apple-touch-icon.png.
También se hace una de 192x192 y se guarda en .recursos/icono_192.png o estaticos/icono_192.png, dependiendo de cómo llamemos la carpeta.
3. Instrucciones para SEO (posicionamemiento en buscadores)
En el <head>del HTML vamos a ubicar las siguientes líneas y a reemplazar lo que haga falta para cada proyecto en particular:
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/sitio.webmanifest" />
<!-- <link rel="canonical" href="https://enflujo.com" /> -->
<title>..:: EnFlujo ::..</title>
<!-- <meta name="description" content="Descripción del sitio...." /> -->
<!-- OpenGraph -->
<meta property="og:locale" content="es_CO" />
<!-- <meta property="og:site_name" content="EnFlujo" /> -->
<meta property="og:type" content="website" />
<!-- <meta property="og:url" content="https://enflujo.com" /> -->
<!-- <meta property="og:title" content="Titulo ..." /> -->
<!-- <meta property="og:description" content="Descripción ..." /> -->
<!-- <meta property="og:image" content="https://xxxxxx.jpg" /> -->
<!-- <meta property="og:image:alt" content="Texto que describe la imagen" /> -->
<!-- <meta property="og:image:width" content="1200" /> -->
<!-- <meta property="og:image:height" content="630" /> -->
<!-- Twitter -->
<!-- <meta name="twitter:card" content="summary_large_image" /> -->
<!-- <meta name="twitter:site" content="@labenflujo" /> -->
<!-- <meta name="twitter:creator" content="@labenflujo" /> -->
<!-- <meta name="twitter:url" content="https://enflujo.com" /> -->
<!-- <meta name="twitter:title" content="Titulo ..." /> -->
<!-- <meta name="twitter:description" content="Descripción ..." /> -->
<!-- <meta name="twitter:image" content="https://xxxxxx.jpg" /> -->
<!-- <meta name="twitter:image:alt" content="Texto que describe la imagen" /> -->
</head>
</html>Aquí hay un ejemplo con un proyecto que ya se hizo:
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/sitio.webmanifest" />
<link rel="canonical" href="https://cerosetenta.uniandes.edu.co/especiales/lam/" />
<title>Lazos de Poder Mariano | 070-Manifiesta-EnFlujo</title>
<meta
name="description"
content="Grupo religioso que en Colombia ha buscado imponer en la agenda pública restricciones al aborto tras el fallo de la Corte Constitucional que lo despenaliza hasta la semana 24."
/>
<!-- OpenGraph -->
<meta property="og:locale" content="es_CO" />
<meta property="og:site_name" content="Cerosetenta" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://cerosetenta.uniandes.edu.co/especiales/lam/" />
<meta property="og:title" content="Lazos de Poder Mariano | 070-Manifiesta-EnFlujo" />
<meta
property="og:description"
content="Grupo religioso que en Colombia ha buscado imponer en la agenda pública restricciones al aborto tras el fallo de la Corte Constitucional que lo despenaliza hasta la semana 24."
/>
<meta property="og:image" content="https://cerosetenta.uniandes.edu.co/especiales/lam/imgs/img-redes.jpg" />
<meta property="og:image:alt" content="Lazos de Poder Mariano" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@cerosetenta" />
<meta name="twitter:creator" content="@cerosetenta" />
<meta name="twitter:url" content="https://cerosetenta.uniandes.edu.co/especiales/lam/" />
<meta name="twitter:title" content="Lazos de Poder Mariano | 070-Manifiesta-EnFlujo" />
<meta
name="twitter:description"
content="Grupo religioso que en Colombia ha buscado imponer en la agenda pública restricciones al aborto tras el fallo de la Corte Constitucional que lo despenaliza hasta la semana 24."
/>
<meta name="twitter:image" content="https://cerosetenta.uniandes.edu.co/especiales/lam/imgs/img-redes.jpg" />
<meta name="twitter:image:alt" content="Lazos de Poder Mariano" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Grenze+Gotisch:wght@700&family=Roboto+Mono:wght@400;600&display=swap"
rel="stylesheet"
/>
<script
async
src="https://analitica.enflujo.com/script.js"
data-website-id="569a36fc-18d4-4ee4-a40c-7c7a9a35b3a1"
></script>
</head>
</html>Ya teniendo el SVG, vamos a Squoosh y realizamos estos pasos:
-
Abre tu imagen en Squoosh.
-
Cambia los ajustes de compresión a `OxiPNG``.
-
Habilita "Reducir paleta" o “Reduce palette”.
-
Selecciona 64 colores.
-
Compara el antes y el después moviendo la perilla. SI ves alguna diferencia, aumenta el número de colores.
-
Guarda el archivo.
-
Una vez tengas ese archivo, abrimos el SVG con
Vscode. -
Quitamos la información de las capas que es información que no vamos a necesitar
<svg id="Capa_2" data-name="Capa 2"></svg>
<g id="Capa_1-2" data-name="Capa 1"></g>
-
Buscamos la extensión SVGO. Con ella vamos a los archivos y le decimos en cada uno, c9.lic derecho,
Minify current SVG. Con ese comando, el SVG pasa a ocupar menos líneas y por ende a bajar un poco el peso. -
Le damos guardar y tenemos nuestro SVG comprimido.