mirror of https://git.sr.ht/~alienagain/plumaweb
lo siento no es atomico, añado todo el proyecto que tenia en local
This commit is contained in:
paula
commit
f00e8ac5f8
|
|
@ -0,0 +1,58 @@
|
|||
<style>
|
||||
div.container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul.myUL {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
<h1>
|
||||
<p style="text-align: center;">
|
||||
MI TÍTULO
|
||||
</p>
|
||||
</h1>
|
||||
<p>Esto es un párrafo de texto sin ningún tiò de HTML, solo un formato de <strong>markdown</strong>, en el que se juega con <em>cursivas</em> o <strong><em>negritas cursivas</em></strong> o simplemente se usan <a href="/thebrokenpencil.com">enlaces</a> pero no se usa HTML.</p>
|
||||
<figure>
|
||||
<img src="https://gitlab.com/terceranexus6/website/-/raw/master/public/images/masto.png" alt="" /><figcaption>Ejemplo de ilustracion, un mastodonte de estilo cartoon adorable mirando al cielo</figcaption>
|
||||
</figure>
|
||||
<p><img
|
||||
style="display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 30%;"
|
||||
src="https://gitlab.com/terceranexus6/website/-/raw/master/public/images/masto.png"
|
||||
alt="ilustración de un mastodonte de estilo cartoon adorable mirando al cielo"> </img></p>
|
||||
<!-- Como este bloque es de HTML, si queremos comentar algo lo haremos en formato HTML, y listo, no se verá en el resultado final -->
|
||||
<h2 id="esto-es-otro-título-en-markdown">Esto es otro título, en MARKDOWN</h2>
|
||||
<!-- Usarmos <br> para hacer espacios en html -->
|
||||
<br>
|
||||
<p style="text-align: center;">
|
||||
Esto sería un ejemplo de una párrafo centrado suelto y ha continuación una lista centrada:
|
||||
</p>
|
||||
<div class="container">
|
||||
<ul class="myUL">
|
||||
<li>
|
||||
Elemento <b>número</b> uno
|
||||
</li>
|
||||
<li>
|
||||
Elemento <i>número</i> <a href="https://thebrokenpencil.com">dos</a>
|
||||
</li>
|
||||
<li>
|
||||
Otro elemento más
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</p>
|
||||
<p>Mientras que esto es un ejemplo de una lista en markdown sin centrar sin HTML:</p>
|
||||
<ul>
|
||||
<li>Elemento <strong>número</strong> uno</li>
|
||||
<li>Elemento <em>número</em> <a href="https://thebrokenpencil.com">dos</a></li>
|
||||
<li>Otro elemento más</li>
|
||||
</ul>
|
||||
<p><br></p>
|
||||
<p>Hay otros objetos interesantes que se pueden usar como menús desplegables:</p>
|
||||
<details>
|
||||
<summary>Pulsame y podrás desplegar un menu</summary> <br> Esto es el contenido
|
||||
</details>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<style>
|
||||
div.container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul.myUL {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
<h1><p style="text-align: center;">MI TÍTULO</p></h1>
|
||||
|
||||
Esto es un párrafo de texto sin ningún tiò de HTML, solo un formato de **markdown**, en el que se juega con *cursivas* o **_negritas cursivas_** o simplemente se usan [enlaces](/thebrokenpencil.com) pero no se usa HTML.
|
||||
|
||||
[comment]: <> (Como esto es un comentario no se va a ver, siempre y cuando estemos en un bloque de markdown. La siguiente imagen no usa HTML:)
|
||||
|
||||
|
||||
|
||||
[comment]: <> (Mientras que esta si:)
|
||||
|
||||
<img
|
||||
style="display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 30%;"
|
||||
src="https://gitlab.com/terceranexus6/website/-/raw/master/public/images/masto.png"
|
||||
alt="ilustración de un mastodonte de estilo cartoon adorable mirando al cielo">
|
||||
</img>
|
||||
|
||||
<!-- Como este bloque es de HTML, si queremos comentar algo lo haremos en formato HTML, y listo, no se verá en el resultado final -->
|
||||
|
||||
## Esto es otro título, en MARKDOWN
|
||||
|
||||
<!-- Usarmos <br> para hacer espacios en html -->
|
||||
<br>
|
||||
<p style="text-align: center;">
|
||||
Esto sería un ejemplo de una párrafo centrado suelto y ha continuación una lista centrada:
|
||||
</p>
|
||||
|
||||
<div class="container">
|
||||
<ul class="myUL">
|
||||
<li> Elemento <b>número</b> uno </li>
|
||||
<li> Elemento <i>número</i> <a href="https://thebrokenpencil.com">dos</a></li>
|
||||
<li>Otro elemento más</li>
|
||||
</ul>
|
||||
</div>
|
||||
</p>
|
||||
|
||||
Mientras que esto es un ejemplo de una lista en markdown sin centrar sin HTML:
|
||||
|
||||
* Elemento **número** uno
|
||||
* Elemento *número* [dos](https://thebrokenpencil.com)
|
||||
* Otro elemento más
|
||||
|
||||
<br>
|
||||
|
||||
Hay otros objetos interesantes que se pueden usar como menús desplegables:
|
||||
|
||||
<details>
|
||||
<summary>Pulsame y podrás desplegar un menu</summary>
|
||||
<br>
|
||||
Esto es el contenido
|
||||
</details>
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
# Webs ligeras
|
||||
Aunque hay muchos recursos para crear páginas web desde cero, muchas de ellas requieren de recursos y funciones que "pesan" demasiado (osea, que requieren un rato para cargarse), y algunas webs no cargan bien porque lo que usan es poco eficiente o simplemente está descontinuado. Hay otras formas de hacer una web, y una de las más simples es a través de un poco de magia `HTML` y formato `markdown`. Además, podemos hacer un paso más y procesar las imágenes para que sean de muy baja resolución usando difuminado floyd steinberg.
|
||||
|
||||
|
||||
# Markdown
|
||||
|
||||
Markdown se utiliza para crear texto con un formato más complejo que el texto plano. Te permite añadir **negritas**, *cursiva*, `código` y mucho más. Markdown se puede combinar con HTML (un tipo de formato web) para hacer diseñós simples que sirvan en web.
|
||||
|
||||
|
||||
## Usando markdown sin HTML
|
||||
|
||||
Para empezar se puede escribir Markdown en muchos editores, incluso es interpretado por sistemas de mensajería instantánea como Telegram. Uno de los programas más interesantes para usarlo es **Joplin**.
|
||||
|
||||
Una vez tenemos dónde escribir, podemos comenzar a probar. Si vas a usar un editor de texto o código normal como **Vim**, **Neovim**, **emacs**, **Sublime**, **Atom** o cualquier otro, haz un archivo que tenga la extensión `.md`, que es la extensión oficial de Markdown.
|
||||
|
||||
Hay varios tutoriales muy buenos de Markdown, aquí dejo algunos:
|
||||
* [Muy completa, en inglés](https://www.markdownguide.org/)
|
||||
* [Muy completa, en español](https://tutorialmarkdown.com/)
|
||||
* [Específico para web, en inglés](https://www.w3schools.io/file/markdown-introduction/)
|
||||
|
||||
Por si acaso, pondré algunas de las claves:
|
||||
|
||||
Para hacer negritas usaremos:
|
||||
```
|
||||
**texto**
|
||||
```
|
||||
De modo que se verá tal que así:
|
||||
|
||||
**texto**
|
||||
|
||||
Para hacer cursivas usaremos `_esto_` o `*esto*`, ambas opciones valen.
|
||||
Para hacer código, lo pondremos entre dos símbolos \`mitexto\` para un código `así`, y para una cajita de código usaremos \`\`\`mi contenido\`\`\`, que se verá tal que así:
|
||||
|
||||
```
|
||||
mi contenido
|
||||
```
|
||||
|
||||
## Usando markdown con HTML
|
||||
|
||||
Se pueden mezclar etiquetas de HTML en markdown para enriquecer el contenido. De este modo podemos centrar contenido o crear formatos.
|
||||
|
||||
Por ejemplo, para crear un título centrado:
|
||||
|
||||
```
|
||||
<h1>
|
||||
<p style="text-align: center;">
|
||||
Mi título
|
||||
</p>
|
||||
</h1>
|
||||
```
|
||||
|
||||
_Nota: Se han añadido los espacios y tabulaciones para que quede una idea más clara, pero no afecta al funcionamiento._
|
||||
|
||||
Como se puede comprobar arriba, están las etiquetas `<h1> Mi título </h1>` que hacen un texto en formato de título con el contenido `Mi título`. En Markdown esto podría hacerse usando el símbolo \#. Osea: `# Mi título`. Sin embargo, en este caso también queremos centrarlo, de modo que además usamos `<p style="text-align: center;"> Mi contenido </p>`. En HTML, las etiquetas `<p> Contenido </p>` Permiten indicarle a un navegador que `Contenido` es un **p**árrafo de texto. Y, adicionalmente, le podemos decir qué formato tiene. En este caso, le estamos indicando que tiene un estilo centrado.
|
||||
|
||||
Para añadir una imagen en Markdown, basta con usar:
|
||||
|
||||
```
|
||||
|
||||
```
|
||||
|
||||
Que se parece mucho a lo que se usa para poner enlaces, solo que el enlace va sin la `!`:
|
||||
|
||||
```
|
||||
[texto del enlace](enlace.com)
|
||||
```
|
||||
|
||||
Volviendo a una imagen, si queremos centrarla y reducirla o ampliarla, podemos usar HTML, de este modo:
|
||||
|
||||
```
|
||||
<img
|
||||
style="display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 50%;"
|
||||
src="enlace/a_la_imagen.png"
|
||||
alt="Descripción ALT text">
|
||||
</img>
|
||||
```
|
||||
|
||||
En este caso le estamos diciendo que haga un bloque para poner una imagen usando las etiquetas `<img>miimagen.png</img>`, le estamos diciendo que calcule el espacio exacto entre los márgenes derecho e izquierdo, que utilice la anchura al 50% (a la mitad) del espacio calculado, que el enlace de la imagen `src=` está entre comillas y la descripción para Alt Text (que ayuda a las personas ciegas a comprender una imagen, o a las personas usando tecnología muy lenta que no carga imágenes bien) con la etiqueta `alt=`. El resultado sería algo así:
|
||||
|
||||
<img
|
||||
style="display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 30%;"
|
||||
src="https://gitlab.com/terceranexus6/website/-/raw/master/public/images/masto.png"
|
||||
alt="Ejemplo de ilustracion, un mastodonte de estilo cartoon adorable mirando al cielo">
|
||||
</img>
|
||||
|
||||
Mientras que sin HTML, sería algo así:
|
||||
|
||||
|
||||
|
||||
Si se quiere añadir un enlace en un párrafo, como decíamos antes que usabamos con `<p> contenido </p>`, usaremos el formato de HTML para enlaces:
|
||||
|
||||
```
|
||||
<a href="enlace.com">texto</a>
|
||||
```
|
||||
|
||||
Esto es útil cuando queremos, por ejemplo, centrar un texto e incluir un enlace dentro. Por ejemplo:
|
||||
|
||||
```
|
||||
<p style="text-align: center;">
|
||||
Esto sería un ejemplo de párrafo con un <a href="https://thebrokenpencil.com/mataameta.html"> enlace </a> a una web.
|
||||
</p>
|
||||
```
|
||||
|
||||
Que se vería así:
|
||||
|
||||
<p style="text-align: center;">
|
||||
Esto sería un ejemplo de párrafo con un <a href="https://thebrokenpencil.com/mataameta.html"> enlace </a> a una web.
|
||||
</p>
|
||||
|
||||
Mientras que sin HTML, usando markdown simple, se vería así:
|
||||
|
||||
Esto sería un ejemplo de párrafo con un [enlade](https://thebrokenpencil.com/mataameta.html) a una web.
|
||||
|
||||
## Procesando imágenes para que pesen mucho menos
|
||||
|
||||
Aunque se puede cambiar la resolución de una imagen de muchos modos, algo que se usa a veces en redes sociales es el difuminado " floyd steinberg" que también se utiliza para imprimir en impresoras térmicas, porque el resultado es comprensible pero tiene muy baja resolución. Primero se reduce el color a una escala de grises, posteriormente se separa la imagen en pequeños trocitos de información, se simplifican esos trocitos haciendo una reducción de la información que contienen por estadística y finalmente se crea una imagen con esa información simplificada, que pretende reducir mucho el tamaño comprometiendo lo menos posible la calidad de la información. El resultado es una imagen granulada en la que se puede ver la imagen en escala de grises. Por ejemplo:
|
||||
|
||||
Imagen sin procesado:
|
||||
|
||||
|
||||
|
||||
Imagen procesada:
|
||||
|
||||
|
||||
|
||||
A veces las imágenes son decorativas o sirven para crear descansos de texto o explicaciones. En cualquiera de esos casos, pueden usarse imágenes procesadas para ocupar mucho menos espacio. [Aquí](https://git.sr.ht/~alienagain/art-research/tree/master/item/image_processing) hay un enlace con un script de python3 para convertir `png` normales a la versión ligera.
|
||||
|
||||
En mi caso también tengo `JPG`, así que a veces hago el paso de `JPG` a `PNG` primero:
|
||||
|
||||
```
|
||||
find . -name "*.jpg" -exec mogrify -format png {} \;
|
||||
```
|
||||
|
||||
## Ejemplo
|
||||
|
||||
En [este enlace]() hay un ejemplo descargable de una web estática hecha de esta manera. Si estás usando [**Joplin**]() basta que en la pestaña con el nombre del documento des click botón derecho-> exportar-> html y guardarlo para subirlo en tu servidor o en alguna plataforma que te permita crear webs estáticas, como [Gitlab](). Si estás usando un archivo y un sistema Linux, puedes usar `pandoc`:
|
||||
|
||||
```
|
||||
pandoc -f markdown -t html miweb.md > miweb.html
|
||||
```
|
||||
|
||||
Y te guardará la versión en HTML.
|
||||
|
||||
<br>
|
||||
|
||||
# ¿Importa tanto todo esto?
|
||||
|
||||
Seguramente a estas alturas te estarás preguntando si realmente es necesario todo esto y si hay un cambio que merezca la pena tanto esfuerzo. Como la mayor parte de los problemas actuales, visto desde una perspectiva individualista la respuesta es: **no**. Si sólo tú y yo hacemos una web ligera, no hay ninguna diferencia.
|
||||
|
||||
¿Entonces?
|
||||
|
||||
Bueno, hay mucha más gente con esta misma idea. Que incluso llega más allá y propone formas de comunicarse y hacer webs en internet centrándose en el texto, como si volvieran a un estado de Internet anterior dondo todo era más simple. Un ejemplo son las comunidades trabajando con el protocolo [Gémini](https://gemini.circumlunar.space/), como el grupo detrás de [Compudanzas](https://compudanzas.net/) o el colectivo de arte [100r](https://100r.co/site/home.html). La idea del decrecimiento de **todo** para mejorar nuestra actual situación climática incluye preocuparse por cómo funciona ahora [Internet, incluyendo su infraestructura física](https://tunubesecamirio.com/) y proponer alternativas, en **comunidad**. Otro enfoque, por ejemplo, propone la idea de usar energías limpias en Internet, o acostumbrarse a la descarga y lectura offline, como en [Low Tech Magazine](https://solar.lowtechmagazine.com/about).
|
||||
|
||||
Habrás notado si has probado a hacer la web que carga mucho más rápido y mejor que otras webs llenas de recursos, porque no necesita cargar tantas cosas. ¿Cuál es el precio de tener menos estímulos en una web? A lo mejor parece más "aburrido" (a mi personalmente no), pero ¿a qué coste medioambiental?
|
||||
|
||||
Gran parte de querer llamar la atención más rápido y más estridentemente tiene un motivo de producción económica detrás. Monetizar nuestra presencia de Internet, arrebatar la atención de las personas o plataformas que estén generando más dinero. Cabe plantearse si ese es el Internet que queremos mantener y desarrollar.
|
||||
|
||||
Vale la pena experimentar y dedicar tiempo, al ritmo que cada persona quiera, de estas pequeñas acciones. No sólo por lo que simboliza esa web que se crea, si no por hacer un nodo más en ese pensamiento del decrecimiento, en el que la tecnología tiene sitio, pero no eclipsa todo lo demás.
|
||||
|
||||
Loading…
Reference in New Issue