Il web è diventato da tempo il fulcro di qualsiasi tipo di comunicazione, personale e aziendale, e c’è sempre bisogno di professionisti adeguati in grado di supportare singoli e aziende nella creazione della propria presenza sul web. Chi lavora ogni giorno con la Rete, e anche chi è più semplicemente incuriosito dalla possibilità di mettere alla prova le proprie abilità tecniche, scopre in fretta come la propria “cassetta degli attrezzi” digitale può semplificare molto il proprio lavoro o complicarlo inutilmente, se la scelta degli attrezzi-software non è stata ottimale.
Quando si parla di sviluppo web spesso si dà per scontata la necessità di strumenti di lavoro molto costosi, come la Adobe Creative Suite nell’edizione Design & Web Premium oppure Zend Studio, un ambiente di sviluppo versatile e potente per realizzare progetti in PHP e anche semplice HTML evoluto. Il pacchetto completo di Adobe ha un prezzo per licenza di 2.660 euro, mentre Zend Studio si accontenta di 300 euro. Se si punta su singole applicazioni della suite, le più adatte per lavorare sul web sono sicuramente Fireworks (405 euro), Dreamweaver (538 euro) e Flash Professional (958 euro). Si risparmia qualcosa, ma è ancora un prezzo un po’ elevato per chi inizia la sua avventura nel Web.
Esistono però strumenti meno noti ma altrettanto potenti che, con un investimento molto inferiore, permettono di ottenere risultati simili o comunque adeguati. Quando si deve valutare l’acquisto di un software, ciò che bisogna tenere a mente non è solo il suo curriculum storico ma anche le caratteristiche delle eventuali alternative (ragionevoli) più economiche. Alcune le esamineremo proprio in queste pagine: le applicazioni che vi stiamo per proporre non sono semplicemente economiche ma anche soluzioni valide realizzate appositamente per Mac, applicazioni che di certo lasciano piacevolmente sorpresi.
Grafica e web design
È ormai molto diffuso l’utilizzo di Photoshop, che è nato per l’editing fotografico, come strumento per la realizzazione di interfacce web. Meglio, invece, il più adatto Fireworks, ereditato dall’acquisizione di Macromedia: dopo aver realizzato un’interfaccia grafica e aver indicato gli elementi da ritagliare, questo comodo strumento di Adobe permette di ottenere le singole immagini da montare in una pagina web e, soprattutto, direttamente il codice HTML che le contiene. Il codice può poi essere inserito in un progetto PHP, un tema WordPress o ciò che si preferisce. Per animazioni, transizioni ed effetti speciali c’è invece Flash Professional, che oggi sa fare in comodo codice HTML5 e JavaScript, eseguibile dai browser più recenti, ciò che una volta richiedeva pesanti oggetti leggibili solo tramite il plug-in Flash Player. Utilizzare questi software professionali è indubbiamente comodo ma non certo economico, specie per chi è alle prime armi e si rende conto che, nel panorama lavorativo attuale, ammortizzare la spesa non è cosa immediata. Come alternative noi puntiamo su Pixelmator e Hype, con la piccola aggiunta del gratuito Prepo.
Disponibile dal 2007 e sviluppato dalla società omonima, Pixelmator è fondamentalmente uno strumento per l’editing di foto e la realizzazione di elementi grafici. Composto da appassionati di grafica digitale, fotografia e design, il team di Pixelmator ha sviluppato nel corso degli anni un’applicazione sempre più potente e integrata nell’ecosistema software messo a disposizione da Apple, molto leggera e in grado di sfruttare sia i 64 bit dei moderni processori sia la potenza di elaborazione dei chip grafici dedicati. La versione 2 di Pixelmator, introdotta nel 2011, ha confermato quanto di buono si era già visto negli anni precedenti e vi ha aggiunto una veste grafica più pulita e una serie più completa di funzioni ed effetti che vengono incrementati a ogni aggiornamento.
Pixelmator non dispone, come invece Fireworks, della possibilità di tagliare automaticamente un’interfaccia e generare codice HTML, richiedendo quindi qualche passo in più per la realizzazione di una pagina web, ma ha un prezzo assolutamente abbordabile se confrontato a un solo software della suite Adobe offrendo buona parte delle funzionalità proposte dalle più costose applicazioni. Ha poi il vantaggio di essere l’applicazione di grafica più integrata con le caratteristiche del sistema operativo OS X. Si avvia in un istante, supporta il salvataggio dei documenti su iCloud e la modalità di lavoro a pieno schermo offerta da OS X Lion e Mountain Lion. Dal punto di vista prettamente grafico permette di realizzare con pochi gesti forme geometriche con la massima naturalezza, gestisce vertici e livelli e permette di ritoccare fotografie e pattern per renderli più integrati negli elementi grafici da realizzare. Gli strumenti, oltretutto, sono personalizzabili in molti aspetti, permettendo di creare pennelli dalle forme e dal tratto assolutamente unici, ideali per chi intende usare anche una tavoletta grafica e dare gli ultimi ritocchi manuali al proprio lavoro. Alcune funzioni content-aware evolute di Photoshop, come la possibilità di far sparire oggetti non voluti, sono presenti anche in Pixelmator.
Imparare a padroneggiare completamente Pixelmator non è facile, proprio perché è uno strumento ricco di funzionalità e personalizzazioni. Per comprendere al meglio come utilizzarlo la sua software house presenta sul proprio sito una serie di guide pratiche testuali e video su come modificare fotografie o realizzare loghi, pulsanti, interfacce e quant’altro. Il sito include anche moltissime guide realizzate, con la stessa cura, dagli utenti finali del prodotto, il che dimostra l’affezione verso Pixelmator e la voglia di condividere e contribuire alla diffusione del software.
Al lancio su Mac App Store l’applicazione fu messa in vendita a circa 25 euro, per poi raddoppiare il prezzo dopo poche settimane. Oggi, grazie anche alle altissime vendite e all’apprezzamento da parte degli utenti, si può acquistare Pixelmator con appena 13,99 euro. Per provare tutte le caratteristiche senza spendere un centesimo si può sempre scaricare una versione dimostrativa, utilizzabile per 30 giorni, direttamente dal sito ufficiale www.pixelmator.com.
La software house Tumult ha creduto probabilmente prima di altri nell’esigenza di mantenere una continuità con le interfacce Flash ma riviste nell’era del codice evoluto e leggero, compatibile con qualsiasi browser e senza plug-in. Il risultato, nel 2011, è stato Hype: un’alternativa a Flash Professional focalizzata esclusivamente sulla realizzazione di transizioni animate in HTML5. Oggi Hype è molto di più. Pur mantenendo un look semplice e le funzionalità base per cui è stato creato, permette di creare pagine con interfacce complesse, compatibili con computer e dispositivi mobili, e di realizzare web application ed elementi grafici animati.
Assemblando i componenti realizzati con uno strumento di grafica o caricando una pagina già realizzata, si possono aggiungere transizioni, far scomparire o comparire oggetti e via dicendo. Buona parte del lavoro si basa su una timeline in cui ordinare le varie fasi di caricamento della pagina e le relative animazioni che verranno proposte all’utente, sia automaticamente sia dopo che questi ha cliccato su un’immagine o ha spostato il puntatore del mouse su una determinata area della pagina. Grazie alla possibilità di avere un’anteprima del risultato su vari dispositivi si possono creare pagine interattive o ricche di animazioni che saranno visibili anche su iPhone e iPad, con un adattamento perfetto di testi e grafica.
Hype è disponibile sul Mac App Store a 54,99 euro o direttamente dal sito ufficiale (www.tumult.com/hype) in cui è possibile ottenere uno sconto per l’acquisto di più licenze e scaricare una versione di prova della durata di 30 giorni. Come nel caso di Pixelmator, anche gli sviluppatori di Hype offrono sul loro sito diversi tutorial per imparare e realizzare creatività sempre più complesse.
In confronto a due applicazioni come Pixelmator e Hype, Prepo è più che altro un gadget, però utile: nasce come strumento per realizzare icone nelle varie risoluzioni richieste nello sviluppo delle App iOS. Si carica l’immagine di partenza e con pochi clic la si adatta in funzione del dispositivo di destinazione, con o senza l’ormai noto effetto di riflessione. Esportando l’immagine elaborata si possono anche ottenerne delle versioni PNG con sfondo trasparente, a varie risoluzioni, utilizzabili in ambito web, per realizzare ad esempio delle icone o la favicon di un sito. Prepo è quindi molto semplice, magari non indispensabile, ma dato che è scaricabile gratuitamente dal Mac App Store merita qualche prova.
Per lo sviluppo
Andando oltre l’interfaccia e gli elementi grafici, c’è chi deve lavorare direttamente sul codice, non necessariamente per creare pagine da zero ma magari per apportare personalizzazioni a un tema WordPress o per rielaborare un progetto su cui ha lavorato un collega. E se HTML è un linguaggio a marcatori, quindi realizzare una pagina con un minimo di interattività è praticamente alla portata di tutti, il lavoro diventa più complesso se al codice HTML aggiungiamo script di linguaggio, come JavaScript, o iniziamo a rendere le pagine dinamiche utilizzando PHP e un database MySQL, come anche i fogli di stile CSS, che consentono di rendere più uniforme lo sviluppo delle pagine, e altri elementi che rendono più difficile, ma al tempo stesso versatile, lo sviluppo di un sito. Infine, compito di uno sviluppatore web non è soltanto realizzare l’impalcatura della pagina web ma anche caricare, mantenere e aggiornare questa struttura all’interno di un server.
Proprio per questo, oltre a indicare gli strumenti per creare e modificare il codice delle pagine, segnaliamo un’applicazione per raggiungere un server remoto e anche qualcosa di più particolare. Andiamo con ordine, partendo da TextWrangler e Flow per arrivare a Coda e Sublime Text, che meritano ciascuno uno spazio a parte.
TextWrangler nasce come costola gratuita del più potente BBEdit, sempre di Bare Bone Software, ed è un editor di testo avanzato per Mac: consente di scrivere documenti di testo plain-text senza alcuna formattazione e soprattutto gestisce in modo “naturale” il linguaggio di programmazione che abbiamo deciso di usare. TextWrangler infatti non è esclusivamente dedicato allo sviluppo di pagine web ma gestisce la scrittura in C, C++, Objective-C e simili, mostrando a schermo una perfetta suddivisione “a colori” della sintassi del codice per renderne più semplice la lettura. Nel caso della programmazione di applicazioni è poi necessario passare il codice a un compilatore, per le pagine HTML è sufficiente aprire in un browser web il file appena realizzato.
TextWrangler è leggero quanto potente. Include al suo interno, tra l’altro, un glossario che permette di auto-completare eventuale codice di programmazione. Questo, soprattutto per JavaScript e PHP, consente di avere a portata di mano le variabili impostate e il “common code” per rendere funzionante e facilmente interpretabile ciò che stiamo scrivendo. Una comoda colonna sulla sinistra permette di passare rapidamente da un file a un altro e di verificare quali siano modificati, salvati o collegati a quello in lavorazione. TextWrangler è molto noto, quindi le principali applicazioni che consentono di impostare un editor di sviluppo esterno lo prevedono tra le applicazioni di modifica predefinite.
TextWrangler è totalmente gratuito, scaricabile sia tramite il Mac App Store sia, con qualche funzione in più, dal sito ufficiale (www.barebones.com/products/textwrangler).
Flow fa qualche passo in più di TextWrangler ed è allo stesso tempo in grado un editor e un potente client FTP/SFTP, il che permette di gestire in un’unica applicazione sia il trasferimento sia la modifica dei file di un sito web. Similmente a TextWrangler, Flow include al suo interno un editor di codice, ma dedicato in questo caso esclusivamente a pagine HTML, CSS, JavaScript, PHP, ASP, JSP e simili. Solo codice web, quindi, ma comunque basta per manutenere ed effettuare piccole modifiche alle pagine.
Grazie a funzioni molto complete per la gestione dei siti “preferiti” si possono catalogare i loro dati di accesso in varie cartelle, raggruppando ad esempio i progetti di un singolo cliente, mentre le funzioni di anteprima mostrano le pagine HTML in fase di modifica così come le vedremmo in un browser e, similmente a quanto avviene sul Mac, visualizzano senza doverle scaricare le immagini presenti su un server remoto. Flow è anche in grado di lanciare un browser web esterno facendolo puntare all’URL del sito su sui si sta lavorando, in modo da verificare rapidamente anche le modifiche effettuate alle pagine dinamiche.
Flow è disponibile su Mac App Store al prezzo di 4,99 euro e, anche in questo caso, sul sito web ufficiale (www.fivedetails.com/flow) è disponibile una versione di prova per verificarne il funzionamento.
Colpo di Coda
Gli sviluppatori e i grafici web che usano abitualmente il Mac molto probabilmente hanno già utilizzato o sentito nominare Coda, uno strumento creato da Panic che permette di avere in un’unica applicazione ciò che serve per realizzare e progettare siti Internet. Coda 2 è fondamentalmente un editor per pagine web che supporta naturalmente linguaggi di scripting (PHP, ASP, JSP), la gestione di fogli di stile e alcune funzioni utili soprattutto per chi deve lavorare in gruppo a diversi progetti.
All’interno di un’unica completa e, per certi versi, mastodontica applicazione troviamo un client FTP/SFTP, la possibilità di collegarsi a server WebDAV e profili cloud S3, la gestione remota di database, la verifica di modifiche a singoli file attraverso una piattaforma SVN (per mantenere aggiornati i lavori effettuati anche da colleghi), un editor completo di codice e la possibilità di interagire via terminale (qualora il servizio sia disponibile) per lavorare direttamente sulla console del server remoto.
A differenza di Flow, che fondamentalmente fa buona parte delle attività permesse da Coda 2 ma con le dovute distinzioni, questa applicazione racchiude un completissimo editor di codice e, quindi, dà il meglio di sé soprattutto per quanto riguarda le funzioni di editing dell’interfaccia di una pagina web attraverso i fogli di stile: possibilità di creare istantaneamente stili di base, anteprime in tempo reale delle modifiche effettuate, navigazione rapida e passaggio istantaneo allo stile anche da una pagina già aperta o che apriremo successivamente.
L’interfaccia di Coda 2 è fondamentalmente in una finestra a “schede” . Ogni scheda rappresenta un file o una “sezione” del profilo aperto, così da raggiungere rapidamente gli elementi di interesse. L’interfaccia, pulita e semplice da tenere sotto controllo, consente di lavorare con cura e rapidità ai progetti e di accedere in qualsiasi momento anche alle guide raccolte nella sezione Books, del tutto interattive e basate su quelle ufficiali dei principali linguaggi di programmazione web. Le guide sono accessibili da un motore di ricerca interno e vengono proposte anche in base al tipo di codice utilizzato nelle pagine.
L’accesso rapido a codici già scritti e script ridondanti permette di recuperare con pochi clic, all’interno dell’editor di codice, fogli di stile, inclusioni e variabili. Essendo tutto integrato in un unico strumento, lavorare con Coda 2 è sia semplice sia complesso: bisogna prenderci la mano ma dopo qualche ora tutto si fa più chiaro e diventa possibile lavorare con maggiore facilità. La pagina dedicata all’elenco dei preferiti è una vera e propria libreria: è possibile definire una macro-categoria e inserire al suo interno i progetti che vengono rappresentati, oltre dal nome impostato, da un’immagine di anteprima catturata automaticamente dall’indirizzo web pubblico del sito su cui si sta lavorando.
Oltre a poter lavorare sul codice delle pagine, Coda 2 integra un editor MySQL che consente di leggere e modificare il database del sito su cui si lavora direttamente dall’interfaccia dell’applicazione (se il server consente di accedere al database da un IP esterno).
800×600
____________________________________________________
Continua la lettura su Applicando Magazine
Clicca qui per scaricare l’applicazione gratuita Applicando+ Puoi acquistare la
rivista e leggerla e conservarla sul tuo iPad.
Normal
0
14
false
false
false
IT
X-NONE
X-NONE
MicrosoftInternetExplorer4
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Tabella normale”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:””;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:”Times New Roman”,”serif”;}
