Animar a la creación de webs chiquitinas

Colaboraciones
1

¡Hola! He aquí una mini-reflexión y el lanzamiento de una mini-idea :slight_smile:

Mini-reflexión

Cuando descubrí el HTML y el CSS fue algo liberador. WordPress me encorsetaba y no sabía por dónde. Además, lo bonito es la diversidad y tanta gente usando la misma herramienta es contraproducente: hay centenares de generadores de webs estáticas y siempre nos quedará el HTML. Y a eso voy…

Inspiraciones

Con el hilo de @marcelcosta sobre las tarjetas: Tarjeta de contacto con HTML y CSS puro me animé yo también a crear una. Pero me salieron varias. Y al final he parido una matrioska, jajaja. Se llama MiniWebs y se explica en este otro hilo: MiniWebs, ekobitaj retpaĝoj (páginas web ecolobits)

Mini-idea

Como ya hemos comentado en otras ocasiones, molaría organizar algo para animar a crear webs chiquitinas. ¿Un concurso, un hackaton?

¿Alguien se animaría a quedar para imaginar qué se podría hacer sin que gaste mucha energía humana?

5 Me gusta
2

A mí me pasó al revés. Yo empecé haciendo webs en Flash, así que para mí también fue una liberación cuando apareció el CSS, sobre todo cuando se empezaron a implementar tipografías y gradientes cumpliendo con W3C. Pero necesitaba un CMS y después de probar muchos, WordPress también representó una liberación para mí. Luego llegaron los editores visuales, y fue otra liberación, porque en el fondo lo mío es el diseño gráfico… Y todo a pesar de ir perdiendo el control y la simplicidad de las primeras webs estáticas, y con mucha nostalgia de un internet que molaba mucho más que el actual. Hasta que llegué al Fedi, Anartist, Komun, Komunikilo…

Este hackaton… ¿Habéis testeado Penpot? ¿Sabéis que lo que dibujas se exporta a CSS limpio? ¡Podríamos diseñar módulos colaborativamente en Penpot y meterlos en Forĝejo para cualquiera!

1 me gusta
3

Sí! Tengo una cuenta en la instancia del proyecto. Me molaría que fuera local y sincronizara como Nextcloud. Ya llegará, supongo…

Probemos!

2 Me gusta
4

Una miniweb de 1.298 bytes:

<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pau Kokura Links</title>
<style>
	body {
		margin:10vh auto;
        max-width:20em;
		padding:0 .62em 3.24em;
		font:1.2em/1.62 sans-serif;
        line-height:1.3;
        background-image: url(https://picsum.photos/10/10?blur);}
    
    p {
    padding: 1em;
    color: black;}

	li a {  color: black;}
	li::marker {  color: red;}
	
    .d {
		background-color: RGB(239,233,226);
        padding: 0 2em 2em 0;
        border-radius: 0 50em 50em 2em;
        display: grid;
    }
    
 
</style>
</head>


<body >
<div class="d">
<img src="https://vivero.anartist.org/wp-content/uploads/2023/10/KOKURA.jpeg" alt="Foto de Pau Kokura" max-width="100%" height="150px">
    
    <p>@paukokura <br> ALL DATA TO THE P2PLE</p>
     <ul>
      	<li><a href="https://social.anartist.org/@paukokura" target="_blank">Mastodon</a></li>
      <li><a href="https://picto.anartist.org/paukokura" target="_blank">Pixelfed</a></li>
      <li><a href="https://video.anartist.org/a/paukokura" target="_blank">Peertube</a></li>
      <li><a href="https://blog.anartist.org/antigona-i-els-fenicis/" target="_blank">Writefreely</a></li>
      </ul>
</div>
 
</body>  
</html>
2 Me gusta
5

Ohhh! Quina preciositat!!! :heart:

1 me gusta
6

oh… El codi font ès poesia ?
Mi colega holandés <escribe … zen />

2 Me gusta
7

Desde que ví este hilo quería responder! No estoy llegando a todos los lados que quiero pero ahí vamos.
Al leerlo me recordó mucho a https://motherfuckingwebsite.com/ que luego trajo a https://thebestmotherfucking.website/ y un poco más allá https://perfectmotherfuckingwebsite.com/ :joy:

Además hace poco descubrí https://mmm.page/ y me tiene encandilado porque recupera mucho del arts&crafts de la web primigenia. Que aunque sea código cerrado (y es la pena) la persona que lo lleva -https://twitter.com/xhfloz - es bastante accesible y tiene buenísimas ideas, como que a futuro te bajes el HTML y CSS de tu página creada.

Por cuestión etárea también llegué al Internet en sus inicios y recuerdo el picar a mano hasta que Dreamweaver sacó un poco de lustro a las creaciones que podías guardar en un disco de 3 y medio.

Ojalá pueda sumarme a lo que se trame! Me quedo por el hilo atento.

2 Me gusta
8

Pues me alegra que se noten mis fuentes jajaja. También me inspiro del club 512 kB.

1 me gusta
9

Mola mucho este Zen. ¡Gracias por compartir!

10

Pues yo también me he animado con una mini web estática, 36kB. Os la dejo por aquí https://anartist.org/artista/ImpulsoBioelectrico/

1 me gusta
11

Me estoy estrujando la cabeza para simplificar el contenido de una web de un cliente y he encontrado muy inspirador el Top Tasks de Gerry McGovern. Recomiendo la lectura de estos dos artículos tanto para simplificar una web existente (con mucho histórico y complejidad acumuladas) como para crear una web chiquitina desde cero y elegir bien las 5 - 10 secciones que debe tener (y descartar las que no debe tener).

3 Me gusta
12

A destacar:

They say a picture paints a thousand words. Well, 1,000 words of text takes up roughly two A4 (210 mm wide and 297 mm long) pages and weighs about 6 KB. You’d place about four images that are 9 cm x 16 cm on two A4 pages. Let’s say these images are well optimized and weigh 40 KB each. (A poorly optimized image could weigh several megabytes.) Even with such high optimization, two A4 pages of images will weigh around 160 KB. That’s 27 times more than the two A4 pages of text. A 30-second video, on the other hand, could easily weigh 3 MB. Videos create massively more pollution than text. Text is the ultimate compression technique. It is by far the most environmentally friendly way to communicate. If you want to save the planet, use more text. Think about digital weight.

Amén :wink:

All these third-party websites create pollution and invade privacy.

Every time you add code, make sure it does something useful and it’s the leanest code possible

Publishing is an addiction. Giving a website to an organization is like giving a pub to an alcoholic. (…) Redesign is rehab for websites.

2 Me gusta