Html on Melabit

Qual è la somma? Soluzioni

Mon, 14 Dec 2020 06:00:00 +0000

Ed ecco la soluzione promessa al problema di ieri. Anzi, LE soluzioni, perché ce ne sono parecchie, più o meno complicate o, meglio, più o meno adatte al modo di pensare di ciascuno.

Il problema era:

Ciascun termine di una serie geometrica è il doppio del precedente. In una certa serie geometrica, la somma del settimo, ottavo e nono termine fa 3. Qual’è la somma del quarto e quinto termine?

In un primo momento può sembrare un problema complicato, ma basta pensarci un po’ per accorgersi che in realtà la soluzione è abbastanza semplice.

Serie geometrica

Come spiega l’enunciato stesso del problema, una serie geometrica è composta da un numero in teoria infinito di termini, ciascuno dei quali è il doppio di quello precedente. Ad esempio, la serie geometrica più semplice che mi viene in mente è

1, 2, 4, 8, 16, 32, 64…

nella quale 1 è il primo termine della serie, 2 il secondo termine e così via, e ciascun termine (ad esempio 8) è il doppio di quello che lo precede (in questo caso 4). (Volendo ci sarebbe una serie geometrica ancora più semplice, composta tutta da zeri, 0, 0, 0, 0, …, ma è un caso particolare molto banale).

Ogni termine della serie può essere indicato con una variabile a cui viene associato un pedice (cioè un numero scritto più in basso rispetto al nome della variabile), che aiuta ad individuare più facilmente il termine della serie a cui ci stiamo riferendo. As esempio a₁, a₂, a₃, indicano rispettivamente il primo, secondo e terzo termine della serie. Per una serie geometrica, a₂ = 2 a₁, a₃ = 2 a₂ = 4 a₁, e così via.

Soluzione #1

In base a quanto appena detto, definiamo il settimo, ottavo e nono termine della serie come a₇, a₈ e a₉. Il problema ci dice che la somma di questi termini è uguale a 3,

a₇ + a₈ + a₉ = 3

Ma abbiamo anche altre informazioni, perché sappiamo che a₈ = 2 a₇ e a₉ = 2 a₈. Possiamo quindi scrivere un sistema di tre equazioni in tre incognite,

a₇ + a₈ + a₉ = 3 a₈ = 2 a₇ a₉ = 2 a₈

che può essere semplificato tenendo conto delle relazioni fra a₇, a₈ e a₉ e esprimendo le tre equazioni in funzione della sola a₇,

a₇ + (2 a₇) + (4 a₇) = 3 a₈ = 2 a₇ a₉ = 4 a₇

La prima delle tre equazioni del sistema diventa 7 a₇ = 3, cioè

a₇ = 3 ⁄ 7

A questo punto è facile, perché a₆ è la metà di a₇, a₅ un quarto di a₇ e a₄ un ottavo, sempre di a₇. Quindi

a₆ = 3 ⁄ 14 a₅ = 3 ⁄ 28 a₄ = 3 ⁄ 56

da cui si ottiene che

a₄ + a₅ = 3 ⁄ 28 + 3 ⁄ 56 = (2 × 3 + 3) ⁄ 56 = 9 ⁄ 56

che è la soluzione del problema.

Soluzione #2

In realtà non c’è bisogno di mettere su un rigoroso sistema di tre equazioni in tre incognite, perché dalla definizione di serie geometrica sappiamo immediatamente che

a₇ + a₈ + a₉ = a₇ + 2 a₇ + 4 a₇ = 3

da cui ricaviamo immediatamente che a₇ = 3, e tutto il resto è identico al caso precedente.

Soluzione #3

Questa soluzione funziona al contrario delle due precedenti, che partono dai termini di ordine maggiore per calcolare quelli di ordine inferiore. In base alla definizione di serie geometrica,

a₂ = 2 a₁, a₃ = 4 a₁, a₄ = 8 a₁, a₅ = 16 a₁, a₆ = 32 a₁, a₇ = 64 a₁, a₈ = 128 a₁, a₉ = 256 a₁

Di conseguenza,

a₄ + a₅ = 8 a₁ + 16 a₁ = 24 a₁

a₇ + a₈ + a₉ = 64 a₁ + 128 a₁ + 256 a₁ = 448 a₁ = 3

Da questa eguaglianza si ricava il primo termine della serie, a₁ = 3 ⁄ 448, e quindi

a₄ + a₅ = 24 a₁ = 24 × 3 ⁄ 448 = 72 ⁄ 448 = 9 ⁄ 56.

Soluzione #4, 5, …

Se qualcuno trova delle soluzioni diverse al problema, sarò ben felice di aggiungerle qui.

Markdown e LaTeX

Markdown mi piace moltissimo e infatti lo uso per scrivere tutti i miei post, così come tanti documenti di lavoro che non devono circolare oltre il circolo, purtroppo ristretto, di chi è in grado di scrollarsi di dosso Word. Purtroppo devo ammettere che il supporto a LaTeX è abbastanza inconsistente. Va benissimo finché si tratta di scrivere delle equazioni semplici, ma appena le cose si complicano, ad esempio quando si prova ad inserire un sistema di equazioni, sono dolori.

Ancora peggio è il fatto che la resa finale dipenda dal motore di conversione. Ad esempio, Marked converte quasi sempre perfettamente le equazioni fuori testo (quelle centrate in uno spazio apposito), sia quando si usano i simboli $$ prima e dopo l’equazione sia inserendole all’interno dell’ambiente \begin{equation} ... \end{equation}. Ma se l’equazione incapsulata fra $$ ... $$ contiene dei pedici (o degli apici) Marked dà un errore, che invece non compare se si usa l’ambiente \begin{equation} ... \end{equation} (meno usato perché molto più lungo da scrivere).

Ancora peggio è quello che succede con il motore LaTeX di Wordpress.com, che non supporta l’ambiente \begin{equation} ... \end{equation} e nemmeno la forma abbreviata $$ ... $$, ma che per integrare le equazioni nel testo in Markdown usa una sintassi non standard, $latex ... $ (dove il codice LaTeX va inserito al posto dei puntini).

D’altro canto Markdown nasce per essere uno strumento semplice per scrivere sul web, caricarlo di troppe opzioni (e di troppe responsabilità) sarebbe un controsenso. In casi come questi forse la cosa migliore è scrivere il testo direttamente in LaTeX, convertendolo poi in HTML puro tramite pandoc o simili.

Io avevo già scritto quasi tutto il testo quando mi sono accorto di questi problemi e per questa volta ho preferito eliminare il codice LaTeX ed usare solo il normale HTML per indicare i pedici o le frazioni, perché la resa grafica delle equazioni fuori testo era davvero pessima. Basta confrontare questa equazione scritta in LaTeX,

$latex \begin{array}{ll} a_7 + a_8 + a_9 = 3\ a_8 = 2 a_7\ a_9 = 2 a_8 \end{array}$

con questa in HTLM mescolato al normale codice Markdown,

a₇ + a₈ + a₉ = 3 a₈ = 2 a₇ a₉ = 2 a₈

per rendersene conto. Purtroppo l’HTML non riesce a gestire bene le frazioni (o forse sono io che non so come fare), prometto di far meglio la prossima volta.

WorldWideWeb, il primo browser web è online

Wed, 20 Feb 2019 18:00:00 +0000

La storia la sapete. Trent’anni fa Tim Berners-Lee, un fisico del CERN, sviluppò su un computer NeXT il primo server web httpd e il relativo browser, che chiamò WorldWideWeb,¹ insieme al linguaggio HTML con cui creare i documenti ipertestuali visualizzabili dal browser.

Tim Berners-Lee non aveva idea che il suo lavoro avrebbe rivoluzionato la nostra vita. In realtà voleva solo permettere di preparare dei documenti collegati uno all’altro da utilizzare all’interno del CERN, rendendo possibile passare da un documento all’altro cliccando sui link presenti nei documenti stessi.

Un’idea nemmeno troppo nuova, il concetto di ipertesto era stato introdotto da Ted Nelson già a metà degli anni ‘60 ed era stato reso popolare da Apple con il suo linguaggio HyperCard.

Il primo sito web sviluppato Tim Berners-Lee è ancora online, ed è un’ottimo modo per accedere ai documenti originali che sono alla base del web come lo conosciamo oggi.

Ora, per celebrare il trentesimo anniversario del web, il CERN ha messo online un emulatore del browser WorldWideWeb originale scritto da Tim Berners-Lee, che gira tranquillamente all’interno di un qualunque browser odierno. L’esperienza d’uso di WorldWideWeb è infinitamente meno soddisfacente di quello a cui siamo abituati oggi, ma vale la pena provare in prima persona una tecnologia che ha avuto effetti straordinari e assolutamente imprevedibili sulla vita di tutti noi. Anche se non ci sono le immagini, i siti odierni sono ancora perfettamente fruibili, sembra di usare un browser testuale come Links o Lynx. L’unica accortezza è ricordarsi che per attivare i link c’è bisogno di un doppio click, il click singolo a cui siamo abituati arriverà solo qualche tempo dopo.

E allora perché non provare a leggere questo blog tramite il browser originale di Tim Berners-Lee? Io ci ho provato, e non è nemmeno troppo difficile. Basta lanciare l’emulatore di WorldWideWeb, cliccare sulla voce Document del menu laterale e poi su Open from full document reference. A questo punto bisogna scrivere (o incollare) nel campo Reference l’indirizzo web completo di melabit, https://melabit.wordpress.com, e cliccare sul grosso (e brutto) bottone Open di destra. Quello che succede si può vedere qui sotto (cliccando sulle immaginini si aprono le versioni in alta risoluzione).

Niente immagini e niente colori, i caratteri speciali vengono resi con i codici HTML (l’apostrofo ad esempio diventa ’), il font è quello ancora pixellato del NeXT, cliccando sui link si aprono delle nuove finestre invece che nuove schede come nei browser moderni, la barra di scorrimento della finestra è a sinistra e non a destra come siamo abituati ora. Però a parte queste minuzie, il blog è perfettamente fruibile, anche se stiamo usando uno strumento pensato e sviluppato ben trent’anni fa.

Affascinante.

Da cui deriva la tripletta “www”, utilizzata da allora per indicare il web. ↩︎

Una linea di codice

Thu, 07 Sep 2017 18:00:00 +0000

A proposito di programmazione, cosa si può fare con una linea di codice? A volte si può fare moltissimo, come dimostra questa singola linea di codice JavaScript.

[code language=“javascript” htmlscript=true]


[/code]

Sono appena 128 caratteri, meno di un tweet, che però riescono a produrre questa bella immagine dinamica.

Ma come fa?

Alex Kras ha accettato la sfida e ha scritto un bellissimo articolo, Reverse Engineering One Line of JavaScript, in cui descrive il suo viaggio nei meandri di un codice solo apparentemente semplice.

È una splendida dimostrazione di capacità tecnica, sia di chi ha scritto il codice originale ma anche di chi si è dato tanto da fare per decodificarlo e per descriverne il funzionamento fin nei minimi particolari.

Capire tutti i dettagli dell’articolo non è facile, ma non credo che sia la cosa più importante. Ciò che importa è l’idea generale, è provare a mettersi nella testa di un programmatore per capire il suo modo di ragionare, è rendersi conto di quello che si può fare con una conoscenza più o meno approfondita di un linguaggio di programmazione (e delle basi matematiche che gli stanno dietro).

Il nostro codice non sarà mai così elegante e compatto? Che importa, l’importante è iniziare a provarci. Tanto si può solo migliorare.

Per la cronaca, questo è il codice finale dopo la decodifica.

[code language=“javascript” ] const DELAY = 64; // approximately 15 frames per second 15 frames per second * 64 seconds = 960 frames var n = 1; var p = document.getElementById(“p”); // var draw = “for(n+=7,i=delay,P=‘p.\n’;i-=1/delay;P+=P[i%2?(i%2*j-j+n/delay^j)&1:2])j=delay/i;p.innerHTML=P”;

/**
 * Draws a picture
 * 128 chars by 32 chars = total 4096 chars
 */
var draw = function() {
    var i = DELAY; // 64
    var P ='p.\n'; // First line, reference for chars to use
    var j;
 
    n += 7;
 
    while (i > 0) {
 
        j = DELAY / i;
        i -= 1 / DELAY;
 
        let index;
        let iIsOdd = (i % 2 != 0);
 
        if (iIsOdd) {
            let magic = ((i % 2 * j - j + n / DELAY) ^ j); // < ------------------
            let magicIsOdd = (magic % 2 != 0); // &1
            if (magicIsOdd) { // &1
                index = 1;
            } else {
                index = 0;
            }
        } else {
            index = 2;
        }
 
        switch (index) { // P += P[index];
            case 0:
                P += "p"; // aka P[0]
                break;
            case 1:
                P += "."; // aka P[1]
                break;
            case 2:
                P += "\n"; // aka P[2]
        }
    }
    //Update HTML
    p.innerHTML = P;
};
 
setInterval(draw, 64);

[/code]

Incredibile, no?

I più volonterosi possono anche provare a giocare con il codice, modificandolo a loro piacimento. Si può ad esempio cambiare colore e dimensioni del testo, inserendo queste righe nella sezione CSS (e poi andando a leggere qui per capire perché).

#p {
    color: blue;
    font-size: 10px;
}

Oppure modificare le le strighe "p" e ".", rispettivamente alle linee 39 e 42 del codice JavaScript, per cambiare i caratteri mostrati sullo schermo. Ancora più interessante è variare il valore di DELAY nella prima riga del codice JavaScript e vedere l’effetto che fa.

Sembra solo un giochetto un po’ stupido, ma si impara a programmare (anche) così.

Programmare l'inutilità

Mon, 23 Nov 2015 06:00:00 +0000

Come tanti ricevo ogni giorno una o più email che mi propongono di visitare questo o quel sito. Non è sempre tempo perso, spesso si trovano delle vere e proprie gemme.

Altre volte però scopro siti o applicazioni la cui utilità è perlomeno dubbia.

img2css

La palma del programma più inutile degli ultimi mesi vorrei assegnarla a img2css, una applicazione web scritta in JavaScript che converte una immagine bitmap (in formato png, jpg o simili) in un file CSS, che può qundi essere inserito direttamente in una pagina web.

In teoria l’idea è ottima, perché permette di integrare un’immagine in una pagina web senza bisogno di collegamenti a file esterni, ma nella pratica fallisce miseramente.

Anche con immagini semplicissime il file CSS generato diventa di dimensioni abnormi, ed è molto più pesante da gestire e da trasmettere in rete rispetto all’immagine originale.

Proviamo img2css

Proviamo ad usare img2css con una immagine semplicissima composta da un quadrato di 10x10 pixel con bordo nero e interno bianco. L’immagine si può creare da Terminale tramite convert, uno dei comandi più potenti di ImageMagick, in grado non solo (come dice il nome) di convertire le immagini da un formato grafico all’altro, ma anche di generare delle immagini ex-novo in praticamente qualunque formato conosciuto.

Il comando

	$ convert -size 10x10 xc:white -fill white \
	-stroke black -draw "rectangle 0,0 9,9" square_10x10.png

produce l’immagine , che occupa esattamente 127 byte (per maggiore chiarezza l’immagine è visualizzata al doppio della dimensione originale).

Convertendo l’immagine con img2css, il codice CSS corrispondente

<div style="height:1px;width:1px;box-shadow:#000 0 0, #000 1px 0, #000 2px 0, #000 3px 0, #000 4px 0, #000 5px 0, #000 6px 0, #000 7px 0, #000 8px 0, #000 9px 0, #000 0 1px, #000 1px 1px, #000 2px 1px, #000 3px 1px, #000 4px 1px, #000 5px 1px, #000 6px 1px, #000 7px 1px, #000 8px 1px, #000 9px 1px, #000 0 2px, #000 1px 2px, #fff 2px 2px, #fff 3px 2px, #fff 4px 2px, #fff 5px 2px, #fff 6px 2px, #fff 7px 2px, #000 8px 2px, #000 9px 2px, #000 0 3px, #000 1px 3px, #fff 2px 3px, #fff 3px 3px, #fff 4px 3px, #fff 5px 3px, #fff 6px 3px, #fff 7px 3px, #000 8px 3px, #000 9px 3px, #000 0 4px, #000 1px 4px, #fff 2px 4px, #fff 3px 4px, #fff 4px 4px, #fff 5px 4px, #fff 6px 4px, #fff 7px 4px, #000 8px 4px, #000 9px 4px, #000 0 5px, #000 1px 5px, #fff 2px 5px, #fff 3px 5px, #fff 4px 5px, #fff 5px 5px, #fff 6px 5px, #fff 7px 5px, #000 8px 5px, #000 9px 5px, #000 0 6px, #000 1px 6px, #fff 2px 6px, #fff 3px 6px, #fff 4px 6px, #fff 5px 6px, #fff 6px 6px, #fff 7px 6px, #000 8px 6px, #000 9px 6px, #000 0 7px, #000 1px 7px, #fff 2px 7px, #fff 3px 7px, #fff 4px 7px, #fff 5px 7px, #fff 6px 7px, #fff 7px 7px, #000 8px 7px, #000 9px 7px, #000 0 8px, #000 1px 8px, #000 2px 8px, #000 3px 8px, #000 4px 8px, #000 5px 8px, #000 6px 8px, #000 7px 8px, #000 8px 8px, #000 9px 8px, #000 0 9px, #000 1px 9px, #000 2px 9px, #000 3px 9px, #000 4px 9px, #000 5px 9px, #000 6px 9px, #000 7px 9px, #000 8px 9px, #000 9px 9px;"></div>

occupa 1259 byte, circa 10 volte in più del file png di partenza. Le cose peggiorano rapidamente se si usano immagini più complesse. Questa immagine da 20x20 pixel , composta da alcuni rettangoli concentrici colorati e generata tramite

$ convert -size 20x20 xc:white -fill white \
-stroke black  -draw "rectangle 0,0 19,19" \
-stroke red    -draw "rectangle 2,2 17,17" \
-stroke green  -draw "rectangle 4,4 15,15" \
-stroke blue   -draw "rectangle 6,6 13,13" \
-stroke yellow -draw "rectangle 8,8 11,11" concentric_color.png

occupa solo 481 byte in formato png, che diventano ben 6.491 byte quando di converte l’immagine in CSS con img2css.

Con immagini reali a colori, o peggio ancora fotografie (ad esempio questa), le immagini CSS possono diventare anche 150-200 volte più grandi di quella originale, mettendo in ginocchio il browser (e il computer!) durante il processo di conversione o quando si copia il file CSS ottenuto in una pagina web.

Provare per credere, ma se poi il Mac si pianta non prendetevela con me.

Dentro il codice

Il programma img2css è molto semplice ed è composto poche centinaia di linee di codice JavaScript. Ma è perfino troppo lungo per quello che fa.

In fondo si tratta solo di determinare il codice RGB di ogni pixel dell’immagine, convertirlo in formato esadecimale ed associarlo alle coordinate orizzonantali e verticali del pixel considerato.

Ogni pixel viene quindi convertito nella sequenza #AAA Xpx Ypx, dove #AAA indica il colore in esadecimale (la stringa può essere composta da 3 o 6 numeri a seconda del colore RGB determinato) e Xpx Ypx indicano le coordinate orizzonantali e verticali del pixel.

Tutto questo si può fare tranquillamente da Terminale, con poche righe di codice ben piazzate.

img2css da Terminale

Per convertire un file grafico in una sequenza di colori RGB si può usare ancora convert di ImageMagick,

$ convert square_10x10.png -compress none square_10x10.ppm

ottenendo un file in formato ppm, in cui ciascun pixel dell’immagine è rappresentato da tre numeri interi decimali, corrispondenti ai tre colori RGB del pixel stesso (il formato grafico ppm è molto inefficiente, ma è utilissimo dal punto di vista didattico perché mostra chiaramente come è fatto un file grafico).

Le sequenze di tre numeri decimali sono disposte per righe orizzontali a partire dalla quarta riga del file. Le prime tre righe contengono rispettivamente il numero magico che definisce il tipo di file, le dimensioni dell’immagine in pixel e il valore massimo del colore RGB del file.

La rappresentazione in formato ppm del quadrato di 10x10 pixel con bordo nero e interno bianco mostrato sopra è

P3
10 10
255
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
0 0 0 0 0 0 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 0 0 0 0 0 0 
0 0 0 0 0 0 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 0 0 0 0 0 0 
0 0 0 0 0 0 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 0 0 0 0 0 0 
0 0 0 0 0 0 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 0 0 0 0 0 0 
0 0 0 0 0 0 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 0 0 0 0 0 0 
0 0 0 0 0 0 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 0 0 0 0 0 0 
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Sequenze di dati come questa possono essere facilmente analizzate e trasformate tramite awk, uno dei tanti potenti strumenti specifici disponibili nei sistemi operativi basati su Unix.

Basta uno script awk di poche righe per convertire le informazioni RGB decimali contenute nel file ppm in formato esadecimale

#!/usr/bin/awk -f

/^255/  { while (getline == 1)
          { for (i = 1; i <= NF; i += 3)
              printf "0x%02X%02X%02X ", $i, $(i+1), $(i+2);
              printf "\n"
          }
        }

Eseguendo lo script img2css.awk sul file ppm precedente si ottiene

$ ./img2css.awk square_10x10.ppm 
0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 
0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 
0x000000 0x000000 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0x000000 0x000000 
0x000000 0x000000 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0x000000 0x000000 
0x000000 0x000000 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0x000000 0x000000 
0x000000 0x000000 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0x000000 0x000000 
0x000000 0x000000 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0x000000 0x000000 
0x000000 0x000000 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0xFFFFFF 0x000000 0x000000 
0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 
0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000 0x000000

Per riprodurre l’output prodotto da img2css, è sufficiente modificare leggermente il modo in cui lo script stampa i valori dei colori RGB, aggiungere la stampa della le coordinate di ciascun pixel e inserire le parti iniziali e finali del tag <div>, ottenendo

#!/usr/bin/awk -f

BEGIN   { out = sprintf("<div></div>");
          print out;
        }

che produce un output equivalente a quello di img2css

$ ./img2css_v2.awk square_10x10.ppm
<div style="height:1px;width:1px;box-shadow:#000000 0 0px, #000000 1px 0px, #000000 2px 0px, #000000 3px 0px, #000000 4px 0px, #000000 5px 0px, #000000 6px 0px, #000000 7px 0px, #000000 8px 0px, #000000 9px 0px, #000000 0 1px, #000000 1px 1px, #000000 2px 1px, #000000 3px 1px, #000000 4px 1px, #000000 5px 1px, #000000 6px 1px, #000000 7px 1px, #000000 8px 1px, #000000 9px 1px, #000000 0 2px, #000000 1px 2px, #FFFFFF 2px 2px, #FFFFFF 3px 2px, #FFFFFF 4px 2px, #FFFFFF 5px 2px, #FFFFFF 6px 2px, #FFFFFF 7px 2px, #000000 8px 2px, #000000 9px 2px, #000000 0 3px, #000000 1px 3px, #FFFFFF 2px 3px, #FFFFFF 3px 3px, #FFFFFF 4px 3px, #FFFFFF 5px 3px, #FFFFFF 6px 3px, #FFFFFF 7px 3px, #000000 8px 3px, #000000 9px 3px, #000000 0 4px, #000000 1px 4px, #FFFFFF 2px 4px, #FFFFFF 3px 4px, #FFFFFF 4px 4px, #FFFFFF 5px 4px, #FFFFFF 6px 4px, #FFFFFF 7px 4px, #000000 8px 4px, #000000 9px 4px, #000000 0 5px, #000000 1px 5px, #FFFFFF 2px 5px, #FFFFFF 3px 5px, #FFFFFF 4px 5px, #FFFFFF 5px 5px, #FFFFFF 6px 5px, #FFFFFF 7px 5px, #000000 8px 5px, #000000 9px 5px, #000000 0 6px, #000000 1px 6px, #FFFFFF 2px 6px, #FFFFFF 3px 6px, #FFFFFF 4px 6px, #FFFFFF 5px 6px, #FFFFFF 6px 6px, #FFFFFF 7px 6px, #000000 8px 6px, #000000 9px 6px, #000000 0 7px, #000000 1px 7px, #FFFFFF 2px 7px, #FFFFFF 3px 7px, #FFFFFF 4px 7px, #FFFFFF 5px 7px, #FFFFFF 6px 7px, #FFFFFF 7px 7px, #000000 8px 7px, #000000 9px 7px, #000000 0 8px, #000000 1px 8px, #000000 2px 8px, #000000 3px 8px, #000000 4px 8px, #000000 5px 8px, #000000 6px 8px, #000000 7px 8px, #000000 8px 8px, #000000 9px 8px, #000000 0 9px, #000000 1px 9px, #000000 2px 9px, #000000 3px 9px, #000000 4px 9px, #000000 5px 9px, #000000 6px 9px, #000000 7px 9px, #000000 8px 9px, #000000 9px 9px;"></div>

perfettamente funzionante, come si può verificare inserendo pari pari il tag <div> ottenuto in un documento html (come questo):

Conclusioni

È chiaro che usare convert ed awk non risolve il problema di fondo, le immagini CSS generate rimangono comunque molto più grosse di quelle originali, ma almeno sono prodotte con poche righe di codice ed usando solo degli strumenti standard di Unix.

Alcuni anni fa si parlava in senso negativo di bloatware, di quei programmi inutilmente grossi e tanto poco ottimizzati da richiedere grosse risorse hardware anche per svolgere funzioni relativamente semplici.

A volte i programmatori dimenticano due concetti fondamentali della buona programmazione, cercare la semplicità e usare lo strumento più adatto per il compito specifico, e si perdono in inutili (e stucchevoli) esercitazioni di stile. Succede a chi propone banalmente di usare file CSS enormi al posto di semplici immagini grafiche, ma succede anche in tanti altri casi ben peggiori.

A parte questo, il post è stato anche un’occasione per parlare di awk, uno strumento poco conosciuto ma molto otente, in particolare quando si tratta di analizzare e trasformare dati contenuti in file di testo.

Uno strumento che è diventato parte integrante da anni della mia routine di lavoro quotidiana. Sarebbe bello poterne riparlare.

Markdown online

Tue, 31 Mar 2015 06:00:00 +0000

Markdown è uno strumento che permette di scrivere testi per il web utilizzando una sintassi semplificata rispetto a quella un po’ bizantina del linguaggio HTML e di convertire tali testi in codice HTML valido, pronto per essere incluso in una pagina web perfettamente funzionale.

Con il tempo, l’uso di Markdown si è esteso notevolmente ed ora è possibile usarlo per scrivere documenti di qualunque genere, convertendol in qualunque formato di testo significativo tramite Pandoc.

Io uso da tempo Markdown ogni giorno per scrivere di tutto, fra cui tutti i post di questo blog. Le uniche eccezioni sono gli articoli scientifici, per cui LaTeX è ancora insuperabile, e i documenti inviati dai colleghi, che mi obbligano ad usare l’odiato Word.

Quello che trovo però molto difficile è provare a spiegare l’utilità di Markdown a chi non l’ha mai usato. La risposta normale è “Perché mai imparare ad usare un altro strumento quando c’è già Word che va benissimo?”

Purtroppo in parte hanno ragione: finché non lo si prova è difficile rendersi conto dei vantaggi di Markdown e della sua estrema semplicità di uso.

Invece di provare a spiegare in teoria perché usare Markdown, non sarebbe meglio mostrare degli strumenti semplici semplici per iniziare ad usarlo senza troppi problemi?

E cosa c’è di meglio, oggi, che usare strumenti che funzionano direttemente nel browser, senza nulla da scaricare, installare o configurare?

Imparare Markdown

Per questo non c’è storia, il sito migliore è di sicuro This is Markdown, che insegna la sintassi di Markdown tramite una pagina web interattiva, che può essere modificata direttamente nel browser visualizzando immediatamente il risultato delle modifiche effettuate.

Strumenti di conversione

Anche qui non c’è molto da dire, lo strumento più interessante è Try pandoc!, che permette di usare Pandoc dal browser per convertire un documento scritto in Markdown (o in una dozzina di altri formati di testo) in formato HTML, RTF, LaTeX, oltre che in varie implementazioni di Markdown e in altri formati di testo meno noti.

Un altro strumento utile è Babelmark 2, che permette di valutare le differenze fra il codice HTML generato dalle varie implementazioni (dialetti?) di Markdown.

Detto fra parentesi, l’esistenza di svariate implementazioni di Markdown leggermente differenti l’una dall’altra è la vera debolezza di questo strumento di scrittura. Spero vivamente che prenda piede una implementazione standard come quella proposta da CommonMark (anche se criticata, a mio modesto parere un po’ scioccamente, da John Gruber, l’ideatore di Markdown).

Heck Yes Markdown fa il contrario: prende una pagina web e la converte in Markdown. Utilissimo per convertire in questo formato dei documenti scritti in passato in HTML, magari allo scopo di creare un archivio di pagine web in un formato uniforme o di riutilizzarli per un sito web statico. Ma forse altrettanto utile per implementare con il solo Markdown uno strumento simile a Readability. Da provare con i siti più pesanti e carichi di pubblicità e animazioni.

Editor online

In questo campo c’è solo da scegliere: gli editor online di Markdown sono fin troppi.

Per un uso occasionale consiglio, in ordine (molto) personale di preferenza, Dillinger, che permette di importare e salvare i documenti in Dropbox, Google Drive, One Drive e GitHub, StackEdit, il più completo e facile da usare, con sincronizzazione opzionale dei documenti con alcuni servizi cloud, Markdown Web Dingus di John Gruber, con una colonna con la sintassi di Markdown, Showdown, contenente una guida molto dettagliata alla sintassi di Markdown e Socrates, decisamente pulito e minimale. Tutti questi editor non richiedono registrazione e possono essere usati immediatamente, ma hanno lo svantaggio di non permettere il salvataggio dei documenti prodotti, a meno di non usare qualche servizio cloud come quelli citati sopra.

Per un uso più continuativo, oltre a Dillinger e StackEdit, consiglio di provare anche Beegit, che permette a più persone di collaborare alla stesura dello stesso documento, Draft, il più completo oltre che il più bello dal punto di vista grafico e Markable, che purtroppo, non so perché, mi fa pensare a un prodotto pensato per Windows.

Peccato solo per Editorially, un ottimo editor online che ha avuto però una vita molto breve.