Se non siete pro­gram­ma­to­ri o web designer non vi capiterà spesso di chiedervi cosa ci sia dietro ai programmi e alle pagine web che uti­liz­za­te quo­ti­dia­na­men­te: di fatto questi si basano su lunghe istru­zio­ni, a volte molto com­pli­ca­te, in­di­riz­za­te al vostro computer. Questo testo di comando è chiamato codice sorgente o più sem­pli­ce­men­te sorgente (ma anche codice o listato). I pro­gram­ma­to­ri sta­bi­li­sco­no tutte le regole per l’azione che deve eseguire il computer ser­ven­do­si di un de­ter­mi­na­to lin­guag­gio di pro­gram­ma­zio­ne. Se il redattore dovesse in­vo­lon­ta­ria­men­te inserire un errore nel testo che va contro le direttive del lin­guag­gio di pro­gram­ma­zio­ne, il programma non fun­zio­ne­rà oppure crasherà durante l’ese­cu­zio­ne di de­ter­mi­na­ti processi.

De­fi­ni­zio­ne

Come codice sorgente si intende un testo leggibile dagli esseri umani composto in un de­ter­mi­na­to lin­guag­gio di pro­gram­ma­zio­ne. Lo scopo del codice sorgente è di dare regole e in­di­ca­zio­ni precise al computer così che questo possa tradurle in lin­guag­gio macchina. Si può quindi affermare che i codici sorgente co­sti­tui­sca­no le fon­da­men­ta di siti web e programmi.

Cos’è esat­ta­men­te un codice sorgente?

Che si tratti del PC di casa, del moderno smart­pho­ne o del cal­co­la­to­re in­du­stria­le o scien­ti­fi­co, i computer in generale operano per mezzo di un sistema binario: acceso/spento, carico/scarico, 1/0. Una suc­ces­sio­ne di bit indica al computer cosa fare. Mentre agli albori dell’in­for­ma­ti­ca i comandi si rea­liz­za­va­no ancora con questi due stati, da ormai molto tempo si è passati a scrivere le ap­pli­ca­zio­ni in un lin­guag­gio di pro­gram­ma­zio­ne che sia leggibile dagli esseri umani. Il che potrà sembrare strano agli occhi di un profano, che continua a vedere il codice sorgente solo come un ammasso di ge­ro­gli­fi­ci. Difatti “leggibile dagli esseri umani” in questo contesto è da in­ten­der­si come espres­sio­ne opposta a “lin­guag­gio macchina”: mentre i computer lavorano esclu­si­va­men­te con valori numerici, gli esseri umani si servono delle parole per co­mu­ni­ca­re. Proprio come le lingue straniere, anche i linguaggi di pro­gram­ma­zio­ne vanno in­nan­zi­tut­to imparati prima di poter esser uti­liz­za­ti.

Dif­fe­ren­ti linguaggi di pro­gram­ma­zio­ne

Esistono centinaia di linguaggi di pro­gram­ma­zio­ni dif­fe­ren­ti. Non ci sono linguaggi migliori e linguaggi peggiori, bensì dipende sempre dal contesto del progetto e dall’ap­pli­ca­zio­ne per cui viene uti­liz­za­to il codice sorgente. Tra i linguaggi di pro­gram­ma­zio­ne più famosi ri­tro­via­mo:

  • BASIC
  • Java
  • C
  • C++
  • Pascal
  • Python
  • PHP
  • Ja­va­Script

Tuttavia affinché il computer sia in grado di capire tali linguaggi, devono essere prima tradotti in lin­guag­gio macchina.

Com­pi­la­to­re e in­ter­pre­te

Per fare in modo che i computer possano rie­la­bo­ra­re il codice sorgente redatto dai pro­gram­ma­to­ri, serve un tra­dut­to­re che funga da in­ter­me­dia­rio sotto forma di ulteriore programma. Questa ap­pli­ca­zio­ne ausiliare può pre­sen­tar­si sotto forma di com­pi­la­to­re o in al­ter­na­ti­va di in­ter­pre­te:

  • Com­pi­la­to­re
    Questo tipo di ap­pli­ca­zio­ne traduce (compila) il codice sorgente in un codice che il pro­ces­so­re sia in grado di com­pren­de­re ed eseguire. Questo codice macchina è salvabile sotto forma di file ese­gui­bi­le.

  • In­ter­pre­te
    L’in­ter­pre­te traduce il codice sorgente riga per riga e lo esegue di­ret­ta­men­te. Pertanto il processo di tra­du­zio­ne avviene molto più ve­lo­ce­men­te che con un com­pi­la­to­re; tuttavia in cambio l’ese­cu­zio­ne è più lenta e necessita di un grande spazio di ar­chi­via­zio­ne.

La scelta non è libera, è infatti il lin­guag­gio di pro­gram­ma­zio­ne a stabilire se deve entrare in azione un com­pi­la­to­re o un in­ter­pre­te. Al giorno d’oggi si ricorre spesso anche a una soluzione in­ter­me­dia, ovvero la com­pi­la­zio­ne just-in-time (JIT): questo tipo di tra­du­zio­ne tenta di combinare i vantaggi di entrambi i programmi (analisi ed ese­cu­zio­ne veloci) e viene uti­liz­za­ta dai browser per uti­liz­za­re Ja­va­Script, PHP o Java in maniera più ef­fi­cien­te.

Linguaggi di markup

Anche per la struttura di un sito web si parla di codice sorgente. La base non è però un lin­guag­gio di pro­gram­ma­zio­ne, bensì il lin­guag­gio di markup HTML. Questo tipo di lin­guag­gio sta­bi­li­sce come si struttura il contenuto, pertanto grazie all’HTML si possono ad esempio definire in­te­sta­zio­ni, paragrafi ed evi­den­zia­zio­ni. Un file HTML di per sé non co­sti­tui­sce un programma, ma ne può contenere uno, per esempio sotto forma di codice Ja­va­Script. Lo stesso vale anche per altri linguaggi di markup come l’XML.

Struttura di un codice sorgente

Nella scrittura di programmi si fa ri­fe­ri­men­to a de­ter­mi­na­te con­ven­zio­ni a seconda dei linguaggi di pro­gram­ma­zio­ne uti­liz­za­ti. Solo una minoranza dei linguaggi di pro­gram­ma­zio­ne appaiono dal nulla, la maggior parte invece si co­strui­sce uno sull’altro. Per questo motivo esistono elementi ri­cor­ren­ti in diversi codici di pro­gram­ma­zio­ne e sono i seguenti:

  • Comandi
    Le istru­zio­ni stanno alla base di quasi tutte le ap­pli­ca­zio­ni. Il pro­gram­ma­to­re se ne serve per indicare al programma come agire. Tali comandi possono ad esempio provocare de­ter­mi­na­ti passaggi di calcolo oppure mostrare un testo.

  • Varianti
    Le varianti sono spazi vuoti che possono essere riempiti con delle in­for­ma­zio­ni. A queste ci si riferisce all’interno del codice sorgente con una de­fi­ni­zio­ne da assegnare.

  • Paragoni
    Decisivo per la co­stru­zio­ne della maggior parte dei programmi sono anche le richieste che fun­zio­na­no secondo uno schema “se-allora”, ossia il principio della logica degli enunciati. Quando viene in­tro­dot­to un de­ter­mi­na­to valore di verità si provoca una reazione, mentre da un dif­fe­ren­te valore di verità si genera un’altra azione.

  • Cicli
    Le richieste possono anche fungere da base per i cicli all’interno del codice sorgente. Un comando sarà ripetuto finché non è raggiunto un de­ter­mi­na­to valore. Solo allora il programma rilascia il ciclo ed esegue il codice restante.

  • Commenti
    In tutti i linguaggi di pro­gram­ma­zio­ne correnti si possono com­men­ta­re le righe all’interno del codice. In questo modo è possibile scrivere del testo all’interno del codice sorgente che non deve essere preso in con­si­de­ra­zio­ne dal programma. Ad esempio si in­se­ri­sco­no dei commenti per rendere chiari certi passaggi di codice.

Durante la scrittura del codice sorgente c’è sempre un problema al centro dell’at­ten­zio­ne. Gli svi­lup­pa­to­ri scrivono i programmi per offrire soluzioni, tuttavia il modo per arrivarci non è ancora stato pre­sta­bi­li­to. Se due pro­gram­ma­to­ri si occupano dello stesso problema può benissimo accadere che i due codici sorgente siano to­tal­men­te dif­fe­ren­ti tra loro no­no­stan­te abbiano uti­liz­za­to lo stesso lin­guag­gio.

Benché in molti casi ci sono più strade che portano alla soluzione, tutti i lavori di pro­gram­ma­zio­ne con­di­vi­do­no la regola d’oro: un buon codice sorgente dovrebbe evitare tratti di codice superflui, che ren­de­reb­be­ro il programma poco chiaro, più lento e più incline agli errori. Un codice sorgente talmente confuso da risultare in­com­pren­si­bi­le persino agli esperti è di­spre­gia­ti­va­men­te chiamato spaghetti code, perché la struttura è in­gar­bu­glia­ta come un piatto di spaghetti in­trec­cia­ti e annodati.

Come scrivere un codice sorgente

Per scrivere un codice sorgente si necessita solamente di un semplice editor di testo, come ad esempio Editor (in inglese Original Notepad) di Windows o TextEdit di Mac. In questo modo si salva il codice sorgente anche come testo puro (ad esempio in codice ASCII o in UTF-8) con l’esten­sio­ne del file giusta per il lin­guag­gio di pro­gram­ma­zio­ne. Pertanto se sul vostro disco rigido trovate un file con esten­sio­ne “.cpp”, si tratta di un file di testo che pro­ba­bil­men­te contiene un codice nel lin­guag­gio di pro­gram­ma­zio­ne C++.

Fatto

Le esten­sio­ni dei file sono con­ven­zio­ni. Il suffisso separato con un punto che si aggiunge al nome del file ha il compito di indicare il formato del file. A partire dall’esten­sio­ne del file, se è nota, Windows riconosce quale programma usare per eseguire il file. Altri sistemi operativi basati su Unix (come ad esempio macOS) ne­ces­si­ta­no di conoscere anche il contenuto del file per sta­bi­lir­ne il formato.

Editor di testo

Oltre ai programmi standard dei sistemi operativi ci sono anche editor di testo ampliati che rendono il lavoro con il codice sorgente più facile grazie a diverse funzioni, come ad esempio:

  • Co­lo­ra­zio­ne della sintassi
    Tutti i linguaggi di pro­gram­ma­zio­ne uti­liz­za­no una propria sintassi, perciò in molti editor di testo potete scegliere il lin­guag­gio con cui scrivere il codice sorgente e il programma evi­den­zie­rà au­to­ma­ti­ca­men­te gli elementi decisivi. Anche i capoversi che con­tri­bui­sco­no a rendere più chiara la struttura del codice sono rea­liz­za­ti dallo stesso programma.

  • Au­to­com­ple­ta­men­to
    Molti editor di testo per la pro­gram­ma­zio­ne conoscono i ri­spet­ti­vi comandi dei linguaggi per cui li com­ple­ta­no au­to­ma­ti­ca­men­te e chiudono le parentesi lasciate aperte.

  • Evi­den­zia­zio­ne delle parentesi
    Nei linguaggi di pro­gram­ma­zio­ne le parentesi hanno il compito di rag­grup­pa­re gli elementi. Per garantire un certo grado di chiarezza anche nei codici di di­men­sio­ni più ampie, alcuni editor di testo evi­den­zia­no le parentesi all’interno delle quali state lavorando.

  • Code folding
    Nella maggior parte dei casi il codice sorgente è strut­tu­ra­to secondo un ordine ge­rar­chi­co e rap­pre­sen­ta­to per mezzo di capoversi e parentesi. Per avere una maggiore chiarezza mentre pro­gram­ma­te, alcuni editor di testo con­sen­to­no di na­scon­de­re il testo che si trova nei livelli inferiori. In questo modo lavorate solo sulle porzioni di codice rilevanti.

  • In­te­gra­zio­ne per il com­pi­la­to­re 
    Alcuni editor di testo si possono po­ten­zia­re per mezzo di plug-in dotati di com­pi­la­to­ri. In questo modo è possibile testare di­ret­ta­men­te il programma appena scritto.

  • Ela­bo­ra­zio­ne a più righe 
    Scrivere a mano il codice sorgente può essere uno sforzo non in­dif­fe­ren­te, perciò gli svi­lup­pa­to­ri sono ben contenti quando riescono a eseguire più passaggi in una volta sola. Grazie all’ela­bo­ra­zio­ne a più righe si possono applicare le stesse modifiche a diversi punti del file ri­spar­mian­do così tempo prezioso.

Immagine: Funzione di autocompletamento dell’editor di testo Notepad++
L’editor di testo Notepad++ supporta gli svi­lup­pa­to­ri con funzioni come l’au­to­com­ple­ta­men­to e la co­lo­ra­zio­ne della sintassi

Ambiente di sviluppo integrato (IDE)

Lavorare a progetti più ampi è più facile con l’aiuto di programmi speciali. Gli ambienti di sviluppo integrato, in inglese “in­te­gra­ted de­ve­lo­p­ment en­vi­ron­ment”, combinano insieme (per questo “integrato”) diversi strumenti che servono agli svi­lup­pa­to­ri per ac­ce­le­ra­re il flusso di lavoro. Un ulteriore vantaggio di tali IDE è che gli strumenti in essi contenuti co­mu­ni­ca­no per­fet­ta­men­te tra loro e apportano modifiche in sincronia. Gli strumenti sono co­mu­ne­men­te:

  • Editor di testo
    L’editor di testo è il fulcro anche degli ambienti di sviluppo. Esistono anche alcuni linguaggi di pro­gram­ma­zio­ne visiva che fun­zio­na­no tramite la di­spo­si­zio­ne di elementi grafici, ma la maggior parte di ap­pli­ca­zio­ni si scrive con un classico codice sorgente. Gli editor di testo che fanno parte di un IDE hanno una varietà di funzioni simile a quella degli editor uti­liz­za­ti al di fuori di un ambiente per la pro­gram­ma­zio­ne.
     
  • Com­pi­la­to­re/in­ter­pre­te
    Gli IDE com­pren­do­no anche i com­pi­la­to­ri e/o gli in­ter­pre­ti. In questo modo i pro­gram­ma­to­ri riescono a emettere il codice di­ret­ta­men­te a partire dall’ambiente di sviluppo.
     
  • Debugger
    L’impiego di un debugger è ir­ri­nun­cia­bi­le per un lavoro decente di pro­gram­ma­zio­ne, motivo per cui questo strumento è un com­po­nen­te standard degli ambienti di sviluppo integrato. Con questo tool potete ve­ri­fi­ca­re se nel vostro codice sorgente non siano contenuti errori (bugs), in­ter­rom­pen­do il corso del programma con degli stop e ana­liz­zan­do i processi eseguiti.
     
  • Link editor
    Per com­ple­ta­re un processo di com­pi­la­zio­ne è ne­ces­sa­rio unire diversi elementi. Un link editor (o linker) è un programma che esegue questo compito e crea un file ese­gui­bi­le.
     
  • Controllo versione
    Questo strumento registra tutte le modifiche apportate al codice sorgente e può ri­pri­sti­na­re le versioni pre­ce­den­ti del codice. In questo modo l'intero progetto non è a rischio se ac­ci­den­tal­men­te inserite un errore. La gestione della versione è es­sen­zia­le anche per la col­la­bo­ra­zio­ne di più svi­lup­pa­to­ri a un progetto.
     
  • GUI builder
    Molte ap­pli­ca­zio­ni includono un'in­ter­fac­cia utente grafica (GUI) che deve essere ugual­men­te definita dal codice sorgente. Il GUI builder supporta gli svi­lup­pa­to­ri nella pro­get­ta­zio­ne del­l'in­ter­fac­cia utente. Sotto forma di editor WYSIWYG è spesso possibile or­ga­niz­za­re gli elementi grafici grazie alla funzione di drag&drop. Il GUI builder lo traduce poi in funzioni del lin­guag­gio di pro­gram­ma­zio­ne al­l'in­ter­no di un IDE.

Famosi esempi di ambienti di sviluppo integrati sono l'open source Eclipse e il prodotto Microsoft Visual Studio.

Il codice sorgente dei siti web

Anche per quanto riguarda la struttura di base delle pagine web so­li­ta­men­te si parla di un codice sorgente, no­no­stan­te si tratti di un documento e non di un programma. Le pagine web sono scritte con il lin­guag­gio di markup HTML. Tuttavia in generale non è raro che le pagine web con­ten­ga­no elementi scritti in linguaggi di pro­gram­ma­zio­ne come Ja­va­Script. Ciò che entrambi i linguaggi hanno in comune è che si possono scrivere anche in semplici editor di testo. Pertanto un sito web può essere com­ple­ta­men­te scritto con Editor o con TextEdit.

Anche se non siete web designer può essere in­te­res­san­te per voi esaminare il codice sorgente di una pagina su Internet, ad esempio per rilevarvi elementi difettosi. Tutti i browser più comuni offrono diversi modi per vi­sua­liz­za­re il codice sorgente di un sito web; malgrado abbiano nomi diversi, troverete le stesse funzioni in Mozilla Firefox, Internet Explorer (o Microsoft Edge) e nel browser di Google, Chrome.

Un’al­ter­na­ti­va per rendere visibile il codice sorgente di un sito web è il sal­va­tag­gio come file HTML. Potete scaricare la pagina cliccando con il tasto destro del mouse oppure tramite il menu, facendo at­ten­zio­ne a se­le­zio­na­re solo HTML come tipologia di file; al­tri­men­ti se salvate l’intera pagina web, essa sarà vi­sua­liz­za­ta così come appare sul browser incluse tutte le immagini ma senza i tag HTML.

Infine potete aprire il file con un editor di testo; tuttavia è altamente probabile che gli editor di base forniti dal vostro sistema operativo rap­pre­sen­ti­no il codice in modo poco chiaro. Se invece ricorrete a un editor di testo con una varietà più ampia di funzioni, potete vi­sua­liz­za­re il codice sorgente in modo tale che sia fa­cil­men­te leggibile.

Immagine: Menu di contesto sul browser di Google, Chrome
I browser come ad esempio Google Chrome offrono diverse pos­si­bi­li­tà di vi­sua­liz­za­re il codice sorgente

Comunque sia potete vi­sua­liz­za­re il codice sorgente di un sito web anche senza salvare la pagina. I browser moderni vi offrono due possibili metodi: potete scegliere di vi­sua­liz­za­re il codice HTML dell’intero sito web oppure di attivare un tool di analisi che vi aiuti ad esaminare il codice. La prima soluzione si distingue lie­ve­men­te dalla rap­pre­sen­ta­zio­ne del file scaricato e consiste nell’aprire un nuovo tab o finestra sul browser che rap­pre­sen­ta il codice sorgente nu­me­ran­do­ne le righe.

La seconda versione è più in­te­res­san­te e offre più funzioni. Ritrovate lo strumento di analisi a partire dalla voce "Ispeziona" (su Chrome) o "Ispeziona elemento" (su Internet Explorer e Firefox) del menu con­te­stua­le; a quel punto appare un'area al­l'in­ter­no della finestra dove è possibile vi­sua­liz­za­re il codice sorgente, oltre ad altre funzioni. La dif­fe­ren­za rispetto alle altre soluzioni è che al­l'in­ter­no di questi strumenti di sviluppo è possibile se­le­zio­na­re di­ret­ta­men­te gli elementi cor­ri­spon­den­ti sulla pagina web spostando il puntatore del mouse sul codice sorgente: ciò significa che lo strumento mostra quale parte di una riga di codice è in­te­res­sa­ta. Gli stessi pro­fes­sio­ni­sti del web design si servono di questa funzione, ad esempio per con­trol­la­re l'aspetto dei loro siti web.

Immagine: I tool di sviluppo su Google Chrome
Con gli strumenti di sviluppo dei browser è possibile esaminare in dettaglio il codice sorgente di un sito web.
Consiglio

È possibile aprire la funzione “Ispeziona” in diversi modi. Oltre al menu con­te­stua­le, che si apre facendo clic con il tasto destro del mouse, si può anche premere il tasto F12 nei browser tra­di­zio­na­li.

Diritto d’autore del codice sorgente

Dietro ad ogni codice sorgente c’è tanto lavoro e molta energia creativa, per cui non stupisce che siano protetti dal diritto d’autore. Proprio come altre proprietà in­tel­let­tua­li non è con­sen­ti­to dif­fon­de­re o plagiare il codice di una terza persona senza la sua au­to­riz­za­zio­ne. Ciò vale so­prat­tut­to per i software co­sid­det­ti pro­prie­ta­ri. Il discorso cambia per i programmi open source: proprio nell’ambito dello sviluppo di software esiste una scena open source molto attiva in cui i codici si uti­liz­za­no con molta più libertà. Il senso di questa cultura aperta tra svi­lup­pa­to­ri è quello di lavorare insieme a un progetto e quindi svi­lup­pa­re e mi­glio­ra­re a lungo termine i software. Su GitHub, Sour­ce­For­ge e altre piat­ta­for­me simili gli svi­lup­pa­to­ri mettono il codice sorgente a libera di­spo­si­zio­ne di altri pro­gram­ma­to­ri. Tuttavia so­li­ta­men­te gli svi­lup­pa­to­ri di programmi open source si devono attenere anche a de­ter­mi­na­te con­di­zio­ni, come ad esempio nominare l’autore e la licenza se intendono uti­liz­za­re il codice.

Vai al menu prin­ci­pa­le