Pingendo – Un buon tool grafico basato su Bootstrap

Dopo aver introdotto, nel precedente articolo, Bootstrap, oggi vorrei parlarvi di un tool grafico, un’editor per la precisione, che facilita molto la vita a chi non sa bene come si scrivano pagine web, ma vuole creare un sito semplice, ma ben fatto e ben strutturato, senza ricorrere a CMS come WordPress.

Prima però voglio fare una premessa in merito. Io non sono molto favorevole all’utilizzo di questi strumenti, in quanto compilando il codice in modo automatico, lo stesso codice risulta essere di scarsissima comprensione e soprattutto non è facilmente modificabile. Ecco qui un esempio di una pagina scritta con Pingendo.

Pagina scritta con Pingendo

E questo è il suo codice sorgente:

Codice sorgente scritto con Pingendo

Anche se la pagina è molto semplice, nella sua realizzazione, in quanto non presenta elementi complicati, il suo codice sorgente essendo compresso e senza alcuno spazio o riga di indentazione, è veramente difficile comprenderlo. Per questo motivo consiglio sempre, per progetti veramente importanti, di affidarsi a se stessi, ovvero scrivere il codice in modo autonomo, per riuscire a modificarlo senza troppi problemi in futuro.

Questo software, inoltre, è l’alternativa più valida che abbia visto, all’editor originale Bootstrap, che è a pagamento. L’editor originale si chiama Bootstrap Studio.

Bootstrap Studio

Ma ora direi di passare a vedere come funziona Pingendo e quali siano i suoi punti di forza e quali invece siano i suoi lati negativi.


Prima di tutto dovrete procede a scaricare il software dal seguente link.

Pingendo - Sito download

Come possiamo notare dall’immagine, il software è disponibile per Windows, Linux e Mac. In poche parole copre praticamente tutte le piattaforme pc.

Una volta scaricato e installato (l’installazione è veramente semplice, quindi mi risparmi di scriverla), è possibile aprire l’editor, che si presenta con questa interfaccia, piuttosto minimale, ma ben comprensibile.

Pingendo - Interfaccia avvio

Cliccando sul link al centro sarà possibile creare la prima pagina del nostro sito.

Pingendo - Creazione nuova pagina

L’editor ora ci permette di scegliere tra una pagina totalmente vuota, da personalizzare completamente da 0, oppure una pagina con già presente un template personalizzato. Io in questo caso sceglierò la prima, ovvero la pagina vuota.

Questa è l’interfaccia che ci compare ora

Interfaccia grafica modifica pagine Pingendo

L’interfaccia grafica si suddivide in 3 sezioni:

  • La siderbar a sinistra permette di aggiungere elementi alla pagina, quali intestazioni, vari div con gallerie immagini, piuttosto che sezioni con del testo o così via.
  • La parte centrale permette di visualizzare un’anteprima della pagina e soprattutto permette di cliccare sui vari elementi posizionati e di personalizzarli a proprio piacimento grazie agli strumenti posti nella siderbar laterale destra.
  • La siderbar laterale a destra permette di personalizzare tutti gli elementi della pagina

 

Facciamo un esempio. Aggiungiamo un titolo principale alla pagina, scegliendolo dal menu a sinistra e poi lo andiamo a personalizzare dal menu posto a destra.

Aggiunta header alla pagina

Notiamo che ad esempio l’header che ho aggiunto presenta una serie di link pratici, totalmente modificabili, in alto alla pagina e poi presenta un titolo posto al centro, totalmente personalizzabile e un pulsante che permette all’utente di compiere un’azione che noi dovremmo stabilire.

Questo è l’header con apportata qualche piccola modifica

Header modificato Pingendo

Si possono fare ulteriori modifiche. Ad esempio, utilizzando le classi dei pulsanti di bootstrap, che abbiamo visto nell’articolo precedente, è possibile modificare il pulsante al centro.

Modifica pulsante bootstrap con Pingendo

Qui c’è un piccolo dettaglio da sottolineare. Per modificare i pulsanti è necessario specificare manualmente la classe da utilizzare. Non è infatti disponibile un menu a tendina che consenta questa scelta per chi proprio Bootstrap non lo conosca.

Modifica pulsante bootstrap con Pingendo

La cosa bella però è che grazie ai form di personalizzazione dei pulsanti, è possibile impostare in un modo piuttosto semplice, l’IDdel pulsante, utile per effettuare personalizzazioni aggiuntive grazie a un css esterno creato da voi a mano, specificare la classe del pulsante, con il form CLASS e impostare la url di destinazione del pulsante, grazie al form HREF.

Possiamo impostare un’immagine di sfondo per ogni sessione della pagina, andandola a caricare noi manualmente, oppure scegliendola tra quelle inserite nel database di Pingendo. Una cosa negativa che ho notato, è che scegliendo un’immagine personalizzata, caricandola dal proprio computer, non venga utilizzata. Vengono utilizzate solo le immagini pre-caricate su Pingendo stesso.

Caricamento immagini Pingendo

Questa invece è la selezione delle immagini di Pingendo

Immagini Pingendo

Dal menu in alto è possibile scegliere se si vogliono utilizzare immagini o svariate sfumature

Immagini Pingendo

Scegliendo un’immagine, la nostra header viene in questo modo:

Personalizzazione con immagine Pingendo


Ora andiamo a personalizzare il contenuto della pagina.

Andiamo a scegliere dalla sliderbar a sinistra un elemento, o una serie di elementi, da aggiungere alla nostra pagina.

Contenuto pagina Pingendo

Andiamo a personalizzare, come prima la pagina e vediamo se possiamo andare ad implementare un’aspetto gradevole.

Ad esempio, per ogni colonna, io andrei ad aggiungere un’immagine personalizzata.

Immagine corpo Pingendo

Sempre dal form a destra è possibile scegliere l’ID, per modificare il tutto da un css esterno, impostare la classe con CLASS e andare a scegliere un’immagine personalizzata con SRC.

Ora abbiamo modificato anche i titoli alle varie colonne. Come vedete è possibile veramente fare di tutto con questo editor.

Modifica dei titoli Pingendo


Una volta salvata la pagina, la potremmo visionare dal nostro browser.

Pagina finita Pingendo


Per concludere possiamo ben dire che grazie a Pingendo, software totalmente gratuito, è possibile veramente fare grandi cose, anche per chi non conosce molto bene i linguaggi web, ma ha voglia di “smanettare” un po’ con il computer, mettendosi in gioco.

Con questo è tutto e vi aspetto al mio prossimo articolo!

The following two tabs change content below.
Denis Genitoni
Per avere ulteriori infomazioni riguardo l' utente, si prega di visitare la seguente pagina
Condividi

Copyright © 2016. All Rights Reserved.

Denis Genitoni

About Denis Genitoni

Per avere ulteriori infomazioni riguardo l' utente, si prega di visitare la seguente pagina

Lascia un commento