Un file html, essendo in sostanza un documento di testo, per scrivere una pagina web potremmo avvalerci semplicemente di un editor di testo come notepad di windows, gedit di Gnome o Kate di Kde che trovate già sul vostro computer.
Mi raccomando di non confondere l’editor di testo con l’editor di documenti come MS Word o Writer di LibreOffice, la differenza sostanziale è che un editor di testo salva nel file tutto ciò che scrivi esattamente come lo scrivi, non è possibile ad esempio fare un titolo in maiuscolo e cambiargli colore, perchè su file viene salvato soltanto il testo, niente formattazione, niente colore o dimensione;
Ma noi vogliamo semlificarci la vita . . . . esistono innumerevoli strumenti di cui possiamo avvalerci, a partire dalla famiglia dei site builder, supertecnologici e supercostosissimi, di Macromedia ai più disparati servizi gratuiti o meno che ci permettono di creare il nostro sito in due click, …..ma non troppo, a noi piace tenere sotto controllo il nostro codice, quindi lo scriviamo noi stessi, però quando il nostro lavoro inizia a diventare un po complesso abbiamo bisogno di un programma che abbia la capacita di farci distinguere il nostro codice con un semplice colpo d’occhio attraverso l’evidenziazione della sintassi ( syntax highlighting ) tramite colorazione e che ci aiuti a tenerlo in ordine, un’altro aiuto che ci possono dare questi programmi è quello di velocizzare la digitazione mediante un auto-completamento del codice
Eistono decine e decine di editor di testo più o meno complessi, per avere una panoramica è sufficiente fare una rapida ricerca su un qualsiasi motore di ricerca. Quelli che attualmente risultano fra i più diffusi sono:
Notepad2 (Windows) http://www.flos-freeware.ch/notepad2.html
Su questo editor di testo c’è poco da dire, è uno dei piu leggeri freewere per Windows la caratteristica principale è la presenza di syntax highlighting per molti linguaggi di programmazione compresi i nostri CSS, HTML e JavaScript.
Istallandolo andrà a sostituire in BlocoNote di Windows
Le altre caratteristiche di Notepad2 a noi utili sono: l’auto indentazione[1], la corrispondenza parentesi, Undo/redo mulitpli e la ricerca e sostituzione basati su Espressioni Regolari.
In Notepad2 è possibile attivare e customizzare il syntax highlighting.
Dal menu a tendina selezionare Wiew->Syntax Sheme..
In questa finestra selezionare Web Source Code
Sempre al menu a tendina selezionare la finestra per personalizzare schema di visualizzazione Wiew->Customize Shemes..
Selezioniamo lo schema da personalizzare ….. il resto è semplice e intuitivo.
Notepad++ (Windows) http://notepad-plus-plus.org/
E’ forse l’editor di testo per eccellenza che ogni utente Windows dovrebbe avere installato nel proprio sistema. Fra i suoi pregi che ci interessano troviamo l’autocompletamento e l’evidenziazione della sintassi oltre a delle features che con il tempo scopriremo di non poterne fare a meno come la sintassi pieghevole, Cerca / Sostituisci, GUI interamente personalizzabile, Mappa documento, Multi-Document, il WYSIWYG[2] in stampa , lo zoom in e zoom out e ambiente multi-lingua. In fase di istallazione possimao decidere di impostare notepad++ come visualizzatore di default per i file html. Notepad++ è in grado di individuare da solo il linguaggio che stiamo utilizzando ma possiamo cambiare lo schema di visualizzazione, come Notepad2 possiamo personalizzare lo chema , dal menu a tendina: Configurazione->Configura gli stili…
Vim (Windows, Linux, Mac) http://www.vim.org/download.php
E’ un editor di testo molto apprezzato dagli utenti minimalisti e soprattutto conosciuto in ambiente Linux. La sua particolarità è quella di non avere una GUI grafica, ovvero nessuna interfaccia, ma di essere completamente utilizzato da riga di comando. Sicuramente se non siete utenti abituati ad interfacce testuali la prima volta che vi troverete davanti a Vim vi troverete spaesati. Facendoci l’abitudine e imparando i suoi shortcuts si rivelerà un editor molto veloce che offre evidenziazione della sintassi.
se siete utenti della ormai diffusissima Ubuntu potete trovare Vim nel Software Center.
Gli utenti Windows possono scaricare l’installer gvimXX.exe dell’ultima versione alla pagina di dowload del sito, l’istallazione non presenta difficoltà , l’editor si presenta in questo modo.
Anche Vim riconosce automaticamente il linguaggio che stiamo usando e come i programmi che abbiamo descritto in precedenza possiamo decidere noi quale sintassi deve riconoscere nel nostro listato. Possiamo anche scegliere lo schema dei colori.
Gedit (Windows, Linux, Mac) https://wiki.gnome.org/Apps/Gedit
E’ divenuto famoso grazie ad Ubuntu che lo propone come editor di default. Supporta la colorazione della sintassi, la possibilità di cercare e sosituire una o più porzioni di testo all’interno dei documenti ed ha anche una buona sorta di plugin da applicare per aumentarne le capacità. Anche gli utenti windows possono scaricare il file per l’istallazione dallla pagina di download, se invece utilizzate una distribuzione linux differente, avrete sicuramente modo di installare questo editor, se non vi piace quello presente di default nella vostra linux box, tramite il gestore di pacchetti. Ad esempio, in una distribuzione OpenSuse il gestore di pacchetti è Yast; se invece utilizziamo Fedora, l’installazione la faremo utilizzando il gestore Yum.
Anche in gedit possiamo personalizzare il carattere e lo schema dei colori
Modifica->Settings Tab Caratteri e colori
come abbiamo gia detto gedit ha una serie di plugin che permettono di aumentarne le capacità.
Modifica->Settings Tab Plugin
basta mettere la spunta in corrispondenza di quelli che ci interessa attivare
La procedura è la stessa per gli utenti Linux
Emacs (Windows, Linux, Mac) http://www.gnu.org/software/emacs/
Anche con Emacs vi troverete davanti ad un editor non facilmente utilizzabile alle prime battute ma dopo averci fatto il callo scoprirete che è un buon editor. Da sempre molto utilizzato dai programmatori.
Gli utenti di Ubuntu possono trovare Emacs nei repository, quindi si puo istallare facilmente da Ubuntu software center, gli utenti di Opensuse lo possono installare tramite lo strumento di installazione e configurazione YaST invece quelli di Fedora possono usare Yum.
Gli utenti di Windows possono scaricare il file per istallarlo al seguente indirizzo http://ftp.gnu.org/gnu/emacs/windows/
Come abbiamo già ampiamente detto la caratteristica minima che deve avere un editor è quello del syntax highlighting della sua personalizzazione e anche con Emacs possimo personalizzare questa fondamentale caratteristica.
Dal menu a tendina – Options->Customize Emacs->Custom Themes
Scegliamo il tema che ci piace, per salvare la modifica basta cliccare su “Save Theme Settings ”
In oltre emacs riconoscendo il linguaggio che stiamo utilizzando abilita un menu specifico per l’inserimento automatico di tag.
PSPad (Windows) http://www.pspad.com/it/
Per questo editor rimando alla pagina web http://www.pspad.com/it/ che ne riporta una chiara descrizione in italiano e alla pagina degli screenshot http://www.pspad.com/it/screenshot.htm, per il download http://www.pspad.com/it/download.php dove possiamo trovare anche la versione Portable.
Bluefish (Windows, Linux, Mac) http://bluefish.openoffice.nl/index.html
Presenta numerose funzioni per aiutare a scrivere codice come script, siti web o programmi in genere. Supporta la colorazione della sintassi di molti linguaggi di programmazione e di markup ed è particolarmente utilizzato in ambiente Linux dove è presente un’accanita concorrenza di IDE per la programmazione web. Molto interessante è la capacità di autocompletamento dei tag inseriti, la creazione parallela dei css e i suggerimenti del vocabolario che vengono mostrati.
Molto utile risulta il riquadro laterale che oltre ad avere una Tab per la navigazione trà i file ha altre due utilissime Tab per l’inserimento automatico di tag e per l’inserimnto di caratteri speciali anche come entità html
per l’uso e la personalizzazione rimando alla pagina ufficiale http://bluefish.openoffice.nl/screenshots.html dove troverete sia screenshot che videoguide in inglese, ma molto semplici, invece per l’installazione su tutte le piattaforme supportate http://bfwiki.tellefsen.net/index.php/Installing_Bluefish
Aptana (Windows, Linux, Mac) http://aptana.com/
Aptana è un IDE (integrated development environment), un ambiente di sviluppo integrato per la creazione di siti e applicazioni per il Web, è uno strumento completo che vi potrà essere utile anche quando diventerete dei professionisti. Oltre alle caratteristiche di base che ci eravamo prefissati questo ambiente di sviluppo possiede diversi strumenti, come supporto per vari linguaggi di sviluppo, supporto per lo sviluppo di applicazioni realizzate per dispositivi mobili, possibilità di creare Web application, strumenti per la creazione e la gestione di progetti, una grande disponibilità di librerie, strumenti integrati per il debugging di applicazioni JavaScript, disponibilità di strumenti per l’interazione con i database relazionali, sia in locale che in remoto, e molto altro;
Naturalmente stiamo parlando sempre di un software gratuito che può essere utilizzato sia come applicazione standalone sia come estensione dell’ambiente di sviluppo open source Eclipse.
Una delle caratteristiche che volevo portare alla vostra attenzione è quella dei suggerimenti sul codice, soffermandoci con il puntatore del mouse su un qualsiasi tag, Aptana apre un tips che ne riporta descrizione e sintassi, questa è una funzione da non sottovalutare, specialmente se ci troviamo a dover modificare un codice sctitto da altri e per giunta composto da elementi che non conosciamo ancora.
Per approfondire si rimanda alla documentazione ufficiale in inglese e alle video guide su vimeo sempre in inglese http://vimeo.com/aptana.
Per l’istallazione effetuiamo il download dalla pagina http://www.aptana.com/ products/studio3/download , dove possiamo personalizzare il download .
Bluegriffon (Windows, Linux, Mac) http://bluegriffon.org/
BlueGriffon è un editor WYSIWYG di contenuti per il Web nato dalle ceneri del famoso KompoZer . Supportato da Gecko, il motore di rendering di Firefox, è una soluzione robusta per modificare le pagine Web in conformità ai più recenti standard web. BlueGriffon è un’applicazione intuitiva che fornisce agli autori Web (principianti o superiori) con una semplice interfaccia utente. Grazie a Gecko, il documento che si stà modificando sarà esattamente lo stesso che vedrete in Firefox.
Se invece siete dei tipi che credono fortemente alla Cloud generation e il vostro desiderio è quello di poter editare il vostro codice ovunque siate, sia su un pc, sia dal vostro tablet e, se siete un po masochisti, anche dal vostro smartphone, allora potete avvalervi dei diversi IDE online come Codeanywhere (https://codeanywhere.net/), Cloud9 (https://c9.io/), ShiftEdit (https://shiftedit.net/), o Koding (https://koding.com/Home).
Tutti questi servizi, previa registrazione gratuita, vi offrono non solo di poter scrivere il vostro codice in un vero e proprio IDE con tanto di suggerimenti e autocompletamento ma anche di poter gestire i vostri progetti e di poterli condividere con altri collaboratori per poter programmare a 4, 6, 8… mani.
Come abbiamo capito c’è l’imbarazzo della scelta, io mi sentirei di consigliare di non fermarvi al primo editor ma provarne diversi per decidere quello che ci piace di più, a questo punto direi che ci siamo dilungati troppo, è ora di iniziare a scrivere il nostro codice.
[1]L’indentazione (o indentatura) è l’inserimento di una certa quantità di spazio vuoto all’inizio di una riga di testo. In tipografia il termine corretto è rientro. Nell’ambito della programmazione, l’indentazione è una convenzione utilizzata per esprimere al meglio la struttura di un codice.
[2] WYSIWYG- What You See Is What You Get – Quello che vedi è quello che è – ottieni quanto vedi. Il termine è proprio del campo dell’informatica.