Il problema di tantissima documentazione digitale risiede, in molti casi, nella difficoltà nell’integrare immagini, cosa che è possibile effettuare mediante inserimento di immagini: che sono veloci e comode, senza dubbio, ma hanno anche l’inconveniente di essere difficili da modificare. Sarebbe molto più comodo poter utilizzare un markup editabile in formato testo ed è proprio quello che ha proposto la libreria open source in Javascript di nome Typograms. La sintassi si basa su elementi primitivi come pipes (linee), dots (punti) e arrows (frecce),
L’uso della libreria è molto semplice e segue la falsariga seguente, all’interno del markup HTML:
<script src="https://code.sgo.to/typograms/typograms.js"></script>
<link rel="stylesheet" href="https://code.sgo.to/typograms/typograms.css"></link>
<script type="text/typogram">
+----+
| |---> My first diagram!
+----+
</script>PRT96919
Si integra la libreria mediante tag script, si aggiuge il foglio di stile CSS e saremo pronti a disegnare quello che ci serve all’interno di un blocco HTML script text, di cui alleghiamo a fine articolo una piccola demo di quello che possiamo fare, e che abbiamo deciso di adottare per parte della documentazione tecnica nel nostro sito web.
La libreria si presta abbastanza facilmente anche alla realizzazione di mockup in forma testuale, come è possibile vedere di seguito. Il testo che scrivete all’interno del blocco viene trasformato in grafica vettoriale SVG, con tutti i vantaggi modulari, adattabili e di stampa che ne conseguono.
Esempi di uso di typogram
Esempio di handshake per username e password
Mockup di schermata di login
Da non perdere 👇👇👇
- 🔒 Conosci meglio privacy e diritti digitali
- 👩💻 Impara a programmare in Python, C++, PHP
- 💻 Configura hosting e domini
- 📊 Tutto sui database
- 🛠️ Approfondisci le nuove tecnologie
- 🎮 Esplora la sezione retrogame
- 👀 Guarda i migliori servizi in offerta
- 🏁 Usa al meglio Excel
- 💬 Il nostro canale Telegram: iscriviti
- 😳 Tivùsat: cos’è e come funziona
- 🤩 Cosa vuol dire pipeline in informatica
- 😬 Il codice USSR **04* funziona?
