{"id":3972,"date":"2020-11-27T17:17:08","date_gmt":"2020-11-27T16:17:08","guid":{"rendered":"https:\/\/esferas.org\/msqlu\/?p=3972"},"modified":"2020-11-27T17:18:11","modified_gmt":"2020-11-27T16:18:11","slug":"paginas-estaticas-por-doquier","status":"publish","type":"post","link":"https:\/\/esferas.org\/msqlu\/2020\/11\/27\/paginas-estaticas-por-doquier\/","title":{"rendered":"P\u00e1ginas est\u00e1ticas por doquier"},"content":{"rendered":"<div class='__iawmlf-post-loop-links' style='display:none;' data-iawmlf-post-links='[{&quot;id&quot;:198,&quot;href&quot;:&quot;https:\\\/\\\/commons.wikimedia.org\\\/wiki\\\/Main_Page&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20260415103735\\\/https:\\\/\\\/commons.wikimedia.org\\\/wiki\\\/Main_Page&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-04-19 09:20:43&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-04-19 09:20:43&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:199,&quot;href&quot;:&quot;https:\\\/\\\/fontawesome.com&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20260413193413\\\/https:\\\/\\\/fontawesome.com\\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-04-15 10:59:44&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-19 09:20:44&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-04-19 09:20:44&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:200,&quot;href&quot;:&quot;https:\\\/\\\/forkaweso.me\\\/Fork-Awesome\\\/get-started&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20260411032847\\\/https:\\\/\\\/forkaweso.me\\\/Fork-Awesome\\\/get-started\\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-04-15 10:59:48&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-04-19 09:20:47&quot;,&quot;http_code&quot;:206}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-04-19 09:20:47&quot;,&quot;http_code&quot;:206},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:201,&quot;href&quot;:&quot;https:\\\/\\\/packages.debian.org\\\/fonts-fork-awesome&quot;,&quot;archived_href&quot;:&quot;&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[],&quot;broken&quot;:false,&quot;last_checked&quot;:null,&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:202,&quot;href&quot;:&quot;https:\\\/\\\/fonts.google.com\\\/specimen\\\/Exo&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20260402141854\\\/https:\\\/\\\/fonts.google.com\\\/specimen\\\/Exo&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-04-15 10:59:52&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-19 09:20:44&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-04-19 09:20:44&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:203,&quot;href&quot;:&quot;https:\\\/\\\/es.wikipedia.org\\\/wiki\\\/Open_Sans&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20251209050644\\\/https:\\\/\\\/es.wikipedia.org\\\/wiki\\\/Open_Sans&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-04-15 10:59:57&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-19 09:20:43&quot;,&quot;http_code&quot;:429}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-04-19 09:20:43&quot;,&quot;http_code&quot;:429},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:204,&quot;href&quot;:&quot;https:\\\/\\\/github.com\\\/google\\\/woff2&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20260415110425\\\/https:\\\/\\\/github.com\\\/google\\\/woff2&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-04-19 09:20:44&quot;,&quot;http_code&quot;:206}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-04-19 09:20:44&quot;,&quot;http_code&quot;:206},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:205,&quot;href&quot;:&quot;https:\\\/\\\/tidy.js.org\\\/css&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20260415110525\\\/https:\\\/\\\/tidy.js.org\\\/css\\\/&quot;,&quot;redirect_href&quot;:&quot;http:\\\/\\\/tidy.js.org\\\/css\\\/&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-04-19 09:20:44&quot;,&quot;http_code&quot;:206}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-04-19 09:20:44&quot;,&quot;http_code&quot;:206},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:206,&quot;href&quot;:&quot;https:\\\/\\\/developer.mozilla.org\\\/en-US\\\/docs\\\/Web\\\/CSS\\\/@font-face&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20251103033225\\\/https:\\\/\\\/developer.mozilla.org\\\/en-US\\\/docs\\\/Web\\\/CSS\\\/@font-face&quot;,&quot;redirect_href&quot;:&quot;https:\\\/\\\/developer.mozilla.org\\\/en-US\\\/docs\\\/Web\\\/CSS\\\/Reference\\\/At-rules\\\/@font-face&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-04-19 09:20:44&quot;,&quot;http_code&quot;:206}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-04-19 09:20:44&quot;,&quot;http_code&quot;:206},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:207,&quot;href&quot;:&quot;https:\\\/\\\/www.wpmediamastery.com\\\/host-google-fonts-locally&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20260415110438\\\/https:\\\/\\\/www.wpmediamastery.com\\\/host-google-fonts-locally&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-04-19 09:20:43&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-04-19 09:20:43&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;}]'><\/div>\n<p>Y es que una vez que le he cogido el tranquillo est\u00e1 resultando muy f\u00e1cil exportar la idea al resto de los sitios. <\/p>\n\n\n\n<!--more-->\n\n\n\n<p>He renombrado el repositorio, que antes ten\u00eda el nombre de la p\u00e1gina final, para que incluya varios otros sitios creados con <a href=\"https:\/\/esferas.org\/msqlu\/2020\/11\/26\/una-pagina-estatica-con-hugo\/\" data-type=\"post\" data-id=\"3885\">Hugo<\/a>. Un archivo make me permite construirlos por separado compartiendo las im\u00e1genes que he ido descargando o construyendo seg\u00fan el caso. Y, por cierto, resulta que en <a href=\"https:\/\/commons.wikimedia.org\/wiki\/Main_Page\" target=\"_blank\" rel=\"noreferrer noopener\">Wikimedia Commons<\/a> tienen un buen mont\u00f3n de logotipos de empresas e instituciones espa\u00f1olas en formato vectorial. Hay alguien por ah\u00ed que est\u00e1 haciendo cosas buenas. <\/p>\n\n\n\n<p>Ahora lo \u00fanico que me queda para no andarme con dependencias externas extra\u00f1as es conseguir que los iconos que emplea el tema <em>slate<\/em> tomen su fuente de la propia instalaci\u00f3n y no de <a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Fonts Awesome<\/a> porque muchos son de tipo <em>premium<\/em> y no aparecen. Y si no hay icono no hay filtrado de lugares y la p\u00e1gina se ve mal. <\/p>\n\n\n\n<p>Para resolverlo he mirado en <a rel=\"noreferrer noopener\" href=\"https:\/\/forkaweso.me\/Fork-Awesome\/get-started\/\" target=\"_blank\">la documentaci\u00f3n de Fork Awesome<\/a> que detalla c\u00f3mo usarlos localmente. All\u00ed mencionan que se deben descargar en el ordenador local (obvio) y a\u00f1adir una l\u00ednea concreta a la cabecera HTML con el recurso localizado:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\"><code>&lt;link rel=\"stylesheet\" href=\"css\/fork-awesome.min.css\"&gt;<\/code><\/code><\/pre>\n\n\n\n<p>El directorio <em>css<\/em> debe estar situado dentro de la p\u00e1gina est\u00e1tica o accesible desde el servidor web. Esta \u00faltima opci\u00f3n es m\u00e1s compleja y si tratamos con Apache resultar\u00eda en:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Instalar paquete <a rel=\"noreferrer noopener\" href=\"https:\/\/packages.debian.org\/fonts-fork-awesome\" target=\"_blank\">fonts-fork-awesome<\/a>.<\/li><li>Crear un alias en el servidor para que apunte a los archivos instalados dado que est\u00e1n fuera del \u00e1rbol que sirve. <\/li><li>Modificar el campo <em>href<\/em> de las p\u00e1ginas HTML para que apunte a \u00e9l.<\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"apacheconf\" class=\"language-apacheconf\">Alias \/fork-awesome \/usr\/share\/fonts-fork-awesome<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"apacheconf\" class=\"language-apacheconf\">&lt;link rel=\"stylesheet\" href=\"\/fork-awesome\/css\/fork-awesome.min.css\"&gt;<\/code><\/pre>\n\n\n\n<p>Pero como mi idea original era tenerlo todo bajo una carpeta simple que pudiera sincronizar o empaquetar directamente, lo que hago es copiar los archivos <em>css<\/em> en cada uno de los directorios donde construyo las p\u00e1ginas y alterar, tambi\u00e9n en todos, la l\u00ednea que incluye los estilos del tema <em>slate<\/em> por estos nuevos.<\/p>\n\n\n\n<p>La tipograf\u00eda tambi\u00e9n es importante. El tema <em>slate<\/em>, c\u00f3mo no, emplea a Google y su servicio de fuentes para solicitar aquella que le es necesaria. En este caso emplea la fuente <a rel=\"noreferrer noopener\" href=\"https:\/\/fonts.google.com\/specimen\/Exo\" target=\"_blank\">Exo<\/a> que yo voy a sustituir por <a rel=\"noreferrer noopener\" href=\"https:\/\/es.wikipedia.org\/wiki\/Open_Sans\" target=\"_blank\">Open sans<\/a>. <\/p>\n\n\n\n<p>Para ello realizo lo siguiente:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Instalar el paquete <em>fonts-open-sans<\/em> y <em>woff2<\/em> (este \u00faltimo no trae <a href=\"https:\/\/github.com\/google\/woff2\" target=\"_blank\" rel=\"noreferrer noopener\">documentaci\u00f3n<\/a>).<\/li><li>Copiar los archivos tipogr\u00e1ficos (con extensi\u00f3n <em>.ttf<\/em>) en un directorio aparte.<\/li><li>En ese directorio convertir los <em>.ttf<\/em> a <em>.woff2<\/em> con el programa <em>woff2_compress<\/em>.<\/li><li>Instalar el archivo <em>.woff2<\/em> en el directorio de fuentes del tema.<\/li><li>A\u00f1adir la estrofa CSS necesaria.<\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">@font-face {\n   font-family: \"Open Sans\";\n   src: url(\"\/fonts\/OpenSans-Regular.woff2\") format(\"woff2\"),\n }<\/code><\/pre>\n\n\n\n<p>El resultado es bastante vistoso:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/esferas.org\/msqlu\/wp-content\/uploads\/sites\/12\/2020\/11\/image-15.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"589\" src=\"https:\/\/esferas.org\/msqlu\/wp-content\/uploads\/sites\/12\/2020\/11\/image-15-1024x589.png\" alt=\"\" class=\"wp-image-3978\" srcset=\"https:\/\/esferas.org\/msqlu\/wp-content\/uploads\/sites\/12\/2020\/11\/image-15-1024x589.png 1024w, https:\/\/esferas.org\/msqlu\/wp-content\/uploads\/sites\/12\/2020\/11\/image-15-300x173.png 300w, https:\/\/esferas.org\/msqlu\/wp-content\/uploads\/sites\/12\/2020\/11\/image-15-768x442.png 768w, https:\/\/esferas.org\/msqlu\/wp-content\/uploads\/sites\/12\/2020\/11\/image-15-1200x690.png 1200w, https:\/\/esferas.org\/msqlu\/wp-content\/uploads\/sites\/12\/2020\/11\/image-15.png 1222w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Referencias<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/tidy.js.org\/css\/\" target=\"_blank\">Tidy CSS<\/a>: para reorganizar de forma visible archivos CSS<\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@font-face\" target=\"_blank\">Mozilla @font-face<\/a>: o c\u00f3mo definir las tipograf\u00edas y de d\u00f3nde bajarlas. <\/li><li><a href=\"https:\/\/www.wpmediamastery.com\/host-google-fonts-locally\/\" target=\"_blank\" rel=\"noreferrer noopener\">How &amp; Why I Host Google Fonts Locally (November 2020)<\/a><\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Y es que una vez que le he cogido el tranquillo est\u00e1 resultando muy f\u00e1cil exportar la idea al resto de los sitios.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","webmentions_disabled_pings":false,"webmentions_disabled":false,"footnotes":""},"categories":[14],"tags":[602,1065,1066,1064,1080,1079,433,1078,1081],"class_list":["post-3972","post","type-post","status-publish","format-standard","hentry","category-internet","tag-css","tag-font-awesome","tag-fork-awesome","tag-hugo","tag-open-sans","tag-svg","tag-tipografia","tag-wikimedia","tag-woff2"],"_links":{"self":[{"href":"https:\/\/esferas.org\/msqlu\/wp-json\/wp\/v2\/posts\/3972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/esferas.org\/msqlu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/esferas.org\/msqlu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/esferas.org\/msqlu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/esferas.org\/msqlu\/wp-json\/wp\/v2\/comments?post=3972"}],"version-history":[{"count":8,"href":"https:\/\/esferas.org\/msqlu\/wp-json\/wp\/v2\/posts\/3972\/revisions"}],"predecessor-version":[{"id":3981,"href":"https:\/\/esferas.org\/msqlu\/wp-json\/wp\/v2\/posts\/3972\/revisions\/3981"}],"wp:attachment":[{"href":"https:\/\/esferas.org\/msqlu\/wp-json\/wp\/v2\/media?parent=3972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/esferas.org\/msqlu\/wp-json\/wp\/v2\/categories?post=3972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/esferas.org\/msqlu\/wp-json\/wp\/v2\/tags?post=3972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}