La libreria JS Typograms permette di realizzare diagrammi e schemi logici in una pagina HTML


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),

Annuncio:

Cerchi un hosting economico per il tuo sito o blog? Tophost ti aspetta (clicca qui) – Puoi anche usare il coupon sconto esclusivo 7NSS5HAGD5UC2 per spendere di meno ;-)

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>

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

+—-+
| |—> Vi piace questo diagramma?
+—-+

Esempio di handshake per username e password

+—–+ +—–+
| X | | Y |
+–+–+ +–+–+
| username |
|—————–>|
| password |
|—————–>|–+
| response | | check
|<—————–|–+
| |
–+– –+–

Mockup di schermata di login

|————————|
| “https://trovalost.it” |
|————————|
| ______________________ |
|| ||
|| Bonjour! ||
|| ||
|| ||
|| .—————-. ||
|| | username | ||
|| ‘—————-‘ ||
|| .—————-. ||
|| |”*******” | ||
|| ‘—————-‘ ||
|| ||
|| .—————-. ||
|| | “Login” | ||
|| ‘—————-‘ ||
|| ||
|+———————-+|

👇 Da non perdere 👇



Questo portale web esiste da 4552 giorni (12 anni), e contiene ad oggi 4141 articoli (circa 3.312.800 parole in tutto) e 20 servizi online gratuiti. – Leggi un altro articolo a caso
Privacy e termini di servizio / Cookie - Il nostro network è composto da Lipercubo , Pagare.online e Trovalost
Seguici su Telegram, ne vale la pena ❤️ ➡ @trovalost
Questo sito contribuisce alla audience di sè stesso.