Progettazione Web: risorse Open Source professionali e gratuite

In principio era l’HTML ed era sufficiente utilizzare un qualsiasi programma di editing testuale per creare e modificare pagine web e, volendo, riuscire a realizzare un sito web completo.

Oggi invece ci sono diverse modalità e numerosissimi softwares per la creazione di siti internet e un buon Web Developer professionista deve essere in grado di destreggiarsi bene in tutte queste soluzioni.

Alla base vi è sempre il linguaggio “di marcatura” HTML, che nel tempo è stato affiancato da altri linguaggi informatici (CSS, PHP, JAVASCRIPT, etc.) e che a sua volta si è considerevolmente evoluto. Tuttavia, prima di passare ai softwares per la creazione/modifica del codice, è importante partire da alcuni programmi utilizzati dai professionisti del web per far lavorare un computer come un vero e proprio server, in modo tale da poter sviluppare ogni progetto web direttamente sul proprio computer, testandone l’affidabilità “in locale” prima di pubblicarlo online.

web01

 

Applicazioni server

Come forse saprete, ogni sito web presente in internet non è altro che un insieme strutturato di files e cartelle che vengono ospitate su un particolare computer remoto detto “server”. Oltre a garantire la raggiungibilità del sito 24 ore su 24 per 365 giorni all’anno, i server hanno il compito di far girare correttamente un moderno sito web dinamico, per questo motivo al loro interno vi sono installate determinate applicazioni in grado di assolvere questo compito. Quindi, per simulare un server sul nostro computer è necessario installare i seguenti componenti:

  • Apache (è il server web);
  • MySql (è il sistema di amministrazione dei database);
  • PHP (o Perl, o anche Python: sono linguaggi di sviluppo per la programmazione Web).

Queste tre applicazioni sono disponibili in un unico pacchetto detto “AMP”, acronimo formato con le iniziali di ognuna Apache, MySql e PHP, quindi avremo:

WAMP per Windows;

MAMP per Mac (pagina download, è sufficiente poi installare la versione “free”);

– LAMP per Linux (pagina download)(pagina con guida all’installazione).

N.B. Maggiori informazioni sull’utilizzo di queste applicazioni sono consultabili in questi articoli:

  1. Installazione WordPress in locale su Windows
  2. Installazione WordPress in locale su Mac

 

Code editing

Ora che il vostro computer è in grado di funzionare da server e di testare offline siti internet dinamici, passiamo ai programmi per la scrittura e modifica del codice. Per evitare di spendere centinaia o migliaia di euro per acquistare programmi professionali come quelli Adobe è possibile reperire ottime alternative gratuite altrettanto professionali in internet.

Per quanto riguarda l’editing HTML, CSS, PHP, JAVASCRIPT, etc. vi sono molti programmi distribuiti liberamente in rete e si suddividono in due tipologie:

  1. WYSIWYG, ossia What You See Is What You Get (“quello che vedi è quello che è” o “ottieni quanto vedi”), sono quelli più semplici da utilizzare, poiché permettono di modificare il codice senza dover intervenire nelle righe di scrittura, infatti tutte le modifiche sono apportabili direttamente dal layout grafico della pagina web che si sta costruendo;
  2. Editor puri, sono quelli che non hanno la funzionalità WYSIWYG e che in genere supportano un gran numero di linguaggi, per questo motivo si fanno preferire dagli sviluppatori più esperti.

In realtà spesso i programmi WYSIWYG abbinano anche la modalità di scrittura diretta sul codice. Comunque, eccone tre che suggeriamo di utilizzare:

KompoZer
E’ il più noto tra gli antagonisti gratuiti di Adobe DreamWeaver ed in effetti merita la sua fama. L’unico neo riguarda la continuità del suo sviluppo, che ci auguriamo sia costante nel tempo. Esattamente come in DreamWeaver è possibile operare sul codice in modalità solo editor, in doppia visuale editor/WYSIWYG o in solo WYSIWYG;

OpenBexi
Secondo alcuni pareri raccolti in rete è attualmente il migliore per quanto riguarda la tipologia WYSIWYG, l’interfaccia di lavoro è visualizzata direttamente nella finestra del browser. Il nostro consiglio è di posizionare la cartella del programma nella stessa cartella del server (quella del pacchetto AMP visto sopra) al momento dell’installazione, la soluzione migliore che noi suggeriamo è inoltre di caricare la cartella del server (e di OpenBexi) su un hard disk a parte (meglio se quello virtuale generato da una partizione).

Amaya
Essendo direttamente sviluppato dal W3C (World Wide Web Consortium), che è l’associazione internazionale che stabilische gli standard tecnici per il World Wide Web, è doveroso menzionarlo. La sua peculiarità è quella di agire da browser web in grado di testare nuovi linguaggi, script e tecnologie sperimentali non ancora supportate dagli altri browsers.

Tra gli editor gratuiti più potenti per lavorare direttamente sul codice segnaliamo questi due programmi:

Aptana Studio 3
E’ un editor di linguaggi informatici per lo sviluppo web (HTML, CSS, PHP, JAVASCRIPT, etc.) molto robusto. E’ una valida alternativa al commerciale Adobe Dreamweaver, ma a differenza di quest’ultimo non possiede un’interfaccia grafica WYSIWYG (What You See Is What You Get), ossia non consente di operare modifiche al codice lavorando in ambiente grafico e vedere in tempo reale i cambiamenti nel layout. Con Aptana si lavora esclusivamente sul codice, è perciò consigliato per utenti aventi nozioni almeno di base dei diversi linguaggi.

BlueFish
Altro ottimo programma gratuito molto valido, esattamente come Aptana (e forse anche di più) supporta moltissimi linguaggi ed è inoltre più leggero. Ovviamente anche questo è consigliato per sviluppatori non alle primissime armi.

 

Grafica

La creazione e la modifica delle immagini sono fondamentali in un progetto web, ecco due ottime applicazioni open source gratuite:

Inkscape
Software per l’elaborazione grafica vettoriale alternativo al commerciale Adobe Illustrator. E’ supportato da una vasta comunità di sviluppatori ed è disponibile in versione italiana.

Gimp
Programma per la progettazione grafica in bitmap antagonista del celebre Adobe Photoshop. Anche questo configurabile in lingua italiana, assieme a Inkscape costituisce una validissima alternativa alle applicazioni Adobe.

 

FTP

File Transfer Protocol, “protocollo di trasferimento file” per caricare velocemente files e cartelle di un sito web su un server. Le applicazioni FTP che consigliamo sono due:

FileZilla
Programma che assolve bene il suo compito, anche se segnaliamo alcuni problemi di funzionamento col sistema operativo Mac.
In ogni caso riteniamo sia preferibile utilizzare l’alternativa proposta sotto (FireFTP), soprattutto se si utilizza prevalentemente Mozilla Firefox come browser.

FireFTP
Non è un software ma un componente aggiuntivo del browser Mozilla Firefox, è affidabile, completo e comodissimo da usare essendo integrato nel browser*.

*N.B. Vi sono altri due ottimi componenti aggiuntivi di Mozilla Firefox molto usati dagli sviluppatori professionisti e che decisamente consigliamo:

  1. FireBug per scandagliare, testare e correggere il codice di un sito;
  2. ColorZilla per lavorare al meglio sui colori.

 

CMS

CMS sta per Content Management System, ovvero “sistema per l’amministrazione dei contenuti”. I contenuti in questione sono quelli di una pagina o un sito web e il sistema per la loro amministrazione non è altro che un software in grado di generare siti internet dinamici, di sceglierli in base alla loro tipologia, di personalizzarne la struttura e l’aspetto grafico e, appunto, di scrivere, modificare e aggiornare tutto ciò che è contenuto al loro interno (testo, articoli, immagini, tracce audio, video, etc.).

Sostanzialmente è un sistema differente di realizzare e gestire siti web rispetto alle metodologie più tecniche e per molti aspetti ne semplifica considerevolmente il compito.

Prerogative dei CMS sono la loro potenza e la loro flessibilità, infatti il loro sviluppo è generalmente costituito da linguaggi stabili e versatili come il PHP ed è supportato da vaste comunità di programmatori indipendenti che condividono le loro competenze attraverso internet. Questi aspetti consentono di ampliare ulteriormente funzioni e strumenti di un sito web durante la sua creazione, grazie a plugins, moduli e componenti aggiunti implementabili nei CMS.

In pratica, con un software CMS è possibile creare da zero e gestire siti web professionali senza conoscere nemmeno una riga di codice, anche se il nostro consiglio è quello di imparare comunque, anche solo basilarmente, i linguaggi che governano il web.

I CMS da noi proposti non possono che essere due, se non altro perché sono entrambi in assoluto i più supportati da un vastissimo numero di sviluppatori a livello mondiale e per questo motivo presentano diversi vantaggi, al di là degli aspetti prettamente tecnici, come quello di avere a disposizione l’aiuto di molti forum e tutorials e soprattutto un’ampia scelta di templates (temi grafici), plugins, moduli, etc. I due CMS in questione sono:

WordPress
E’ il più longevo e per questo motivo è maggiormente supportato. Nato per creare blog, oggi ci si può realizzare qualsiasi tipologia di sito, compresi gli e-commerce, grazie all’integrazione di specifici plugins.

Guida all’installazione:

  1. Installazione WordPress in locale su Windows
  2. Installazione WordPress in locale su Mac

Joomla
Nato dopo WordPress, ma altrettanto ben supportato, con questo CMS si può creare qualsiasi tipo di sito web, e-commerce inclusi (anche in questo caso attraverso componenti aggiuntivi da integrare). Nella pagina download è possibile scegliere quale versione installare, a questo proposito è importante sapere che la numerazione delle versioni di Joomla non segue il consueto ordine di aggiornamento dalla più vecchia alla più recente, in quanto ogni versione distribuita ha uno sviluppo proprio e non è compatibile con le altre.

Magento
E’ un CMS per siti specifici, nativamente sviluppato per la creazione di siti e-commerce e secondo molti da preferire a WordPress e Joomla nella realizzazione di questa tipologia di siti.

A margine, segnaliamo due ottimi softwares liberi per la creazione e gestione di forum community:

phpBB
E’ il più popolare, ricco di strumenti e funzionalità.

MyBB
Anche questo molto funzionale e semplice da configurare.

 

Nota:

Il programma didattico dei corsi di Progettazione Web tenuti presso la nostra sede, oltre allo studio e all’analisi dei codici e dei linguaggi per il web, prevede anche la configurazione e l’utilizzo delle risorse e delle applicazioni viste in questo articolo.

Leggi anche:

Installazione WordPress in locale su Mac
Facebook: inserire emoticons, faccine e altre piccole immagini
Personalizzare WordPress: home page senza articoli

Leave a Reply