Share
Diamo un'occhiata a come (o effettivamente Se) è possibile progettare e costruire un sito Web interamente su un iPad. Useremo una varietà di app per concepire, wireframe, design, codice e distribuire una semplice pagina web HTML.
Da quando i tablet hanno violato l'uso mainstream, abbiamo preso una posizione rapida per elaborare il modo migliore per supportare questi nuovi dispositivi per il consumo di contenuti web. Ho scritto numerosi articoli sui nostri blog su questo argomento, così come molti dei miei colleghi scrittori. I libri sono stati pubblicati I pannelli sono stati tenuti.
Ma cosa succede se il tablet potrebbe essere una piattaforma valida, non solo per il consumo, ma per la creazione? C'è stato un meme ricorrente che i dispositivi touch non sono buoni per la produttività e non c'è speranza di fare un vero lavoro su uno. Tuttavia, la sua forma snella e la sua portabilità ne fanno un dispositivo fantastico, soprattutto per i liberi professionisti, che non sono necessariamente legati a un luogo di lavoro specifico.
La prima fase del processo di progettazione sta pianificando e riunendo le idee iniziali. Prima di andare avanti e iniziare a indagare sulla creazione di wireframes o prototipi reali, ci sono una serie di utili app per iPad che possono essere utilizzate per tratteggiare semplicemente idee molto approssimative o per prototipare piccole parti di un design.
Ho optato per l'utilizzo di Adobe Ideas per riunire alcune idee e concetti iniziali. Usando la grande tela, è possibile disegnare un mockup molto approssimativo di un potenziale sito, e quindi facilmente rimpicciolirlo e annotarlo sui lati. Ovviamente, non stiamo eseguendo nulla di troppo complicato con Adobe Ideas (probabilmente non è in grado di fare molto di più, a dire il vero), tuttavia è ancora un'app utile ed è un naturale pretendente per l'iPad.
Ho anche potuto usare Adobe Ideas per tracciare alcuni diagrammi di flusso di base per la struttura del sito, ecc. Il touch screen dell'iPad rende questo processo intuitivo e il suo fattore di forma significa che è facile passare in rassegna per collaborare con chiunque sia coinvolto.
Adobe Ideas è $ 9,99 (un prezzo che è aumentato in modo significativo dal suo rilascio come app gratuita) ed è essenzialmente un album da disegno. L'app offre una tela in cui è possibile esplorare le idee con uno strumento di disegno a mano libera di base.
Combina l'app con uno di una serie di stili disponibili da terze parti e otterrai uno strumento fantastico per mettere insieme concetti grezzi e visualizzazioni delle tue idee. Se lavori con gli altri e vuoi dimostrare alla gente cosa stai pensando, Ideas ti offre una grande piattaforma per farlo.
Ci sono naturalmente delle alternative all'app di Adobe (e al suo prezzo di $ 9,99). Jot! La lavagna è un'alternativa valida, che fornisce lo stesso stile di disegno e schizzo di base. Con gli stessi usi, Jot! La lavagna include anche una funzione per la condivisione live degli schizzi con gli altri, tramite un'altra copia di Jot! app o il loro browser. Jot! La lavagna è disponibile per $ 4,99 nell'App Store.
Un'altra app per iPad popolare per disegnare e concettualizzare idee di design è Penultimate, che offre ancora una tela per scrivere e disegnare. Puoi inviare facilmente le tue idee a clienti o colleghi di lavoro anche in formato PDF!
Penultimate è il più economico del trio di app in questa sezione, che costa solo $ 0,99.
Queste app possono essere un ottimo modo per disegnare mappe mentali e note più generali sui brief da parte dei clienti, idee di progettazione e altro ancora. Sull'iPad sono disponibili tantissime app per prendere appunti, tra cui l'esempio di serie che viene precaricato sul tuo iPad.
Non dimenticare che anche funzioni come la "Lista di lettura" di Safari possono essere incredibilmente utili, come i siti preferiti del Web, sincronizzando le pagine Web salvate su tutti i dispositivi supportati (incluso, naturalmente, il tuo iPad).
Ora che hai esplorato e registrato idee, è ora di metterle insieme e produrre un piano. Fortunatamente, c'è un'abbondanza di wireframing e app generali per aiutare il processo di pianificazione su iPad. Ho scelto Adobe Proto per fare il mio wireframing.
Adobe Proto è molto simile a Adobe Ideas, che condivide un'interfaccia comparabile. Tuttavia questa volta, invece di disegnare liberamente con il dito (o lo stilo), utilizzerai un set di componenti per assemblare un wireframe. La cosa fantastica di Adobe Proto include alcune funzioni davvero utili per il wireframing, come l'integrazione con una gamma di popolari sistemi di grid CSS.
Una volta che un wireframe è stato configurato, e conosciamo il piano per una semplice pagina web, siamo in grado di andare avanti e iniziare il lavoro.
Probabilmente hai già sentito parlare di OmniGraffle, se non altro per il suo prezzo di $ 49,99. Quel costo è davvero alto, anche se fisso e non ricorrente, ma questo strumento è uno dei più sofisticati disponibili per la piattaforma.
OmniGraffle è tutto basato sulla pianificazione, che si tratti di creare diagrammi di flusso e diagrammi eleganti e strutturati o di disegnare a mano libera wireframe. OmniGraffle è molto versatile, essendo in grado di adattarsi al lavoro di molte industrie diverse, incluso il web design. L'intera gamma di funzionalità culmina in piani che competono con quelli creati su un driver desktop tradizionale.
OmniGraffle merita certamente la sua menzione d'onore, ma ci sono molte alternative disponibili a prezzi significativamente più convenienti. SketchyPad è un'app $ 4,99 per iPad che offre gli strumenti per creare dei wireframes efficaci da un ampio catalogo di matrici e elementi che si uniscono per creare un pezzo finale.
L'app che ho usato era ovviamente Adobe Proto, l'app wireframing di Adobe. Adobe Proto ti consente di tracciare facilmente i wireframe di siti Web e app con una varietà di componenti e persino di allinearli a noti sistemi di griglia CSS.
È inutile che io vada oltre ogni pianificazione app là fuori, ma mi sento obbligato a menzionare un'altra app che spicca per me. Anche se non ha l'interfaccia utente più bella, il Mocking Pad da $ 9,99 è abbastanza semplice e un po 'minimalista, rendendo le tue sessioni di pianificazione e mettendo insieme le tue idee finali un gioco da ragazzi.
Prima di saltare alla fase di costruzione di un progetto di lavoro, dobbiamo stabilire dove effettivamente creeremo il sito.
L'iPad è indiscutibilmente un dispositivo che può fare cose fatte. Sfortunatamente, uno dei suoi principali svantaggi è il modo in cui gestisce i file. Le app si sentono in qualche modo in modalità sandbox e strumenti come Finder o Explorer non sono disponibili sulla piattaforma. Pertanto, svolgere il lavoro locale può essere imbarazzante.
Fortunatamente, possiamo utilizzare la memoria off-device per lavorare sui nostri siti. Un modo semplice per farlo sarebbe quello di lavorare sul web, collegandosi a un server live tramite FTP (o alternativo) e ospitando i file in questo modo.
In alternativa, abbiamo l'opzione di Dropbox, un servizio che è integrato in una serie di app che vedremo nella prossima sezione. Con una capacità di archiviazione abbastanza generosa gratuitamente (capacità maggiori sono disponibili a pagamento), Dropbox è un ottimo strumento per archiviare, sincronizzare e persino eseguire la versione dei file, nonché condividerli con colleghi o clienti quando necessario.
Mentre Dropbox è integrato in un certo numero di app che guarderemo tra un attimo, c'è un'app ufficiale Dropbox ufficiale anche per iPad.
Ora è il momento di mettere insieme un sito web. C'è una varietà di editor di codice disponibili per l'iPad, ma ho intenzione di utilizzare Diet Coda, la recente versione iOS di Panic.
Una volta connesso tramite FTP e dopo aver configurato un sito, verrà essenzialmente avviato in un'esperienza di scrittura familiare con Coda per Mac OS X. Con relativa facilità, toccando l'icona più in Diet Coda, è possibile impostare una nuova directory e qualsiasi file al suo interno. Ho creato un file HTML e un foglio di stile CSS e li ho aperti entrambi. Non lasciatevi dissuadere dallo schermo abbastanza piccolo dell'iPad; toccando l'icona della pagina viola in Diet Coda, l'app rivela le sue schede, permettendoti di passare rapidamente da un file aperto (anche se sarebbe più bello averlo aperto in modo permanente in alto).
Alla fine, è una questione di codice. Toccando sull'icona snippet, puoi facilmente trascinare il codice salvato o preimpostato in Diet Coda, che accelera un po 'il tempo trascorso effettivamente a scrivere il codice.
Forse il difetto più grande in Diet Coda è che non è possibile caricare immagini o altri file. Se stai creando un sito ricco di immagini, questo può essere potenzialmente un problema. Avevo bisogno solo di una singola immagine in questa particolare pagina, che ero in grado di caricare correttamente all'esterno dell'app Diet Coda utilizzando un client FTP.
Ci sono diversi client FTP standalone disponibili per l'iPad (letteralmente si cerca "FTP" nell'App Store), anche se alcuni dei rivali di Diet Coda dispongono di client FTP integrati adatti a svolgere il lavoro.
Dopo aver superato l'ostacolo di caricare le immagini, sono riuscito a completare la mia semplice pagina web in Diet Coda. Ha funzionato davvero e, ancora una volta, mentre niente di speciale, ho creato una pagina web interamente sul mio iPad, dall'ideazione, al wireframe, a un pezzo finito.
Sono disponibili diversi editor di testo per l'iPad, ma quattro si distinguono davvero. La prima è la versione più recente, Diet Coda, un'app $ 19,99 dagli sviluppatori della famosa app Mac OS X, Coda (e la sua versione più recente, Coda 2). Ho dato un'occhiata a Diet Coda quando è stato rilasciato il mese scorso.
Ho giocato con Diet Coda ed è un editor davvero impressionante. Sembra più un'app per l'editing piuttosto che la creazione, senza editing locale, ma è sicuramente in grado di fare il secondo. Sfortunatamente, senza alcuna memoria locale, lo farai bisogno per impostare una sorta di opzione di archiviazione remota, collegandosi tramite FTP o SFTP.
Personalmente, la mia vita di tutti i giorni consiste in un sacco di scrittura e talvolta devo formattare come HTML. Ovviamente non è allo stesso livello della progettazione di un sito Web, ma ho dovuto trovare un editor di testo adatto per quando volevo scrivere sul mio iPad. La mia app preferita, prima del rilascio di Diet Coda, era Textastic, a $ 9,99.
Textastic è, al suo interno, un editor di testo per la modifica in oltre 80 lingue, tra cui HTML, CSS, ecc. Tutte le app in questa sezione condividono le stesse funzionalità di base, ma ciò che spicca in Textastic sono le sue opzioni di connessione. Oltre a sincronizzare i tuoi file su un server FTP, FTPS o SFTP, puoi anche condividere facilmente i tuoi documenti su Dropbox e sincronizzarli con il cloud e con gli altri dispositivi. Inoltre, il server WebDAV integrato consente di trasferire facilmente i file tramite WiFi sul tuo Mac o PC.
Gusto è un altro editor di testo, disponibile per $ 9,99 nell'App Store. Dotato di molte delle stesse funzionalità di cui sopra, Gusto supporta anche il trasferimento di file su FTP, SFTP, FTPS e Dropbox, rendendolo una grande opzione.
Non ho avuto l'opportunità di utilizzare questa app successiva, ma da quello che vedo dalla recensione di iPad.AppStorm, sembra piuttosto interessante.
Koder è il più economico di questi quattro, al prezzo di soli $ 5,99, e sembra fantastico. Nella sua elegante interfaccia utente, Koder supporta l'authoring e la modifica di un'intera serie di lingue, compresi i nostri vecchi amici HTML e CSS (se non lo supportano, non otterrebbero molte vendite).
Come i precedenti tre, Koder supporta il trasferimento di file tramite FTP, SFTP, FTPS e Dropbox, sebbene tu sia libero di lavorare localmente.
In definitiva, il modo migliore per testare il tuo sito su varie piattaforme è farlo davvero. Se hai utilizzato uno degli editor che abbiamo discusso con il supporto Dropbox (o il server WebDAV integrato), trasferire i tuoi file su un dispositivo diverso dovrebbe essere un gioco da ragazzi. Oppure, se hai lavorato su FTP, devi semplicemente aprire un browser sul dispositivo che desideri testare o utilizzare un servizio come Adobe BrowserLab.
Ci sono alcune app che hanno attirato la mia attenzione e che possono essere utili durante il processo di creazione di un sito web.
FontBook è un'app di riferimento da 5,99 dollari che parla di tipografia, documenta il lavoro di numerose fonderie e progettisti di tipi e offre migliaia di caratteri da esplorare. Inoltre, essendo ottimizzato per il display della retina del nuovo iPad, dovrebbe significare che sembra assolutamente fantastico!
CSS3Machine per iPad è un'altra app di riferimento che ti consente di giocare con gli stili e persino visualizzare ciò che prototipi in remoto nel browser di un altro dispositivo. CSS3Machine è anche in grado di costruire ed esportare animazioni WebKit e molto altro, consentendoti di creare facilmente fantastici CSS e di inserirli nel tuo progetto.
Non dimenticare il tuo browser. Attraverso Safari sul tuo iPad o un browser scaricato da terze parti, avrai accesso a un mondo di documentazione, ispirazione e supporto della community, quindi non vedi l'iPad come un dispositivo di sviluppo isolato.
In questo articolo, abbiamo analizzato il modo in cui è possibile produrre un sito Web interamente su un iPad. E lo abbiamo gestito, dalla pianificazione alla costruzione.
Ho menzionato solo le app con cui ho avuto esperienze personali o mi sono distinto per davvero. Se hai progettato e / o sviluppato sul tuo iPad, condividi le tue esperienze e le tue app preferite nei commenti. Grazie per aver letto!
Accentsconagua