Share
Să aruncăm o privire la modul în care (sau într-adevăr dacă) este posibil să proiectați și să construiți un site în întregime pe un iPad. Vom folosi o varietate de aplicații pentru conceperea, modelarea, proiectarea, codarea și implementarea unei pagini web simple HTML.
De când tabletele au intrat în uz curent, am luat o poziție rapidă în ceea ce privește elaborarea celui mai bun mod de a susține aceste noi dispozitive pentru consumul de conținut web. Am scris numeroase articole pe blogurile noastre despre acest subiect, la fel ca mulți dintre colegii mei scriitori. Cărțile au fost publicate. Au fost organizate panouri.
Dar ce ar fi dacă tableta ar putea fi o platformă viabilă, nu numai pentru consum, ci pentru creație? A existat o meme recurentă care atinge dispozitivele nu sunt bune pentru productivitate și nu există nicio speranță pentru a obține o lucrare reală pe una. Cu toate acestea, forma sa slabă și portabilitatea o fac un dispozitiv fantastic, în special pentru persoanele independente, care nu sunt neapărat legate la un anumit loc de muncă.
Prima etapă a procesului de proiectare este planificarea și reunirea ideilor inițiale. Înainte de a merge înainte și a începe investigația de a pune împreună fâșii reale sau prototipuri, există o serie de aplicații iPad utile care pot fi utilizate pentru a schița pur și simplu idei foarte brute, sau prototipuri mici părți ale unui design.
Am optat pentru utilizarea Adobe Ideas pentru a reuni câteva idei și concepte inițiale. Folosind panza mare, este posibil să trageți un mockup foarte dur al unui potențial site și apoi să micșorați ușor și să-l adnotați pe lateral. Evident, nu facem ceva prea complicat cu Adobe Ideas (probabil că nu este capabil să facă mult mai mult, să fim cinstiți), totuși este încă o aplicație utilă și este un suitor natural pentru iPad.
De asemenea, am fost capabil să utilizez Adobe Ideas pentru a schița câteva diagrame de bază pentru structura site-ului etc. Ecranul tactil al iPad-ului face acest proces intuitiv, iar factorul său de formă înseamnă că este ușor să treci în jur pentru a colabora cu oricine implicat.
Adobe Ideas este de 9.99 dolari (un preț care a crescut destul de semnificativ de la lansarea sa ca o aplicație gratuită) și este, în esență, un sketchbook. Aplicația oferă o pânză în care puteți explora idei cu ajutorul unui instrument de desen liber.
Combinați aplicația cu unul din mai multe stilouri disponibile de la terți și veți obține un instrument fantastic pentru a pune împreună concepte și vizualizări bruște ale ideilor dvs. Dacă lucrați cu alții și doriți să demonstrați oamenilor ceea ce gândiți, ideile oferă o platformă excelentă pentru a face acest lucru.
Există, desigur, alternative la aplicația Adobe (și la prețul ei de 9.99 dolari). Iotă! Tabla albă reprezintă o alternativă viabilă, oferind același stil de desen și schiță de bază. Cu aceleași utilizări, Jot! Tabla include, de asemenea, o caracteristică pentru partajarea live a schițelor dvs. cu alții, fie prin intermediul unei alte copii a Jot! aplicație sau browserul lor. Iotă! Whiteboard este disponibil pentru $ 4.99 în App Store.
Una dintre cele mai populare aplicații iPad pentru schițarea și conceptualizarea ideilor de design este Penultimate, care oferă din nou o pânză de scris și trasată. Puteți să trimiteți cu ușurință ideile dvs. clienților sau colegilor dvs. ca și PDF!
Penultima este cea mai ieftină dintre cele trei aplicații din această secțiune, costând doar 0,99 dolari.
Pe lângă faptul că joacă gazde la schițele conceptelor de design, aceste aplicații pot fi o modalitate excelentă de a extrage hărți ale minții și note mai generale despre pliante de la clienți, idei de design și multe altele. Există o mulțime de aplicații care acceptă note pe iPad, inclusiv exemplul de stoc care este preîncărcat pe iPad.
Nu uitați că funcții precum "Lista de citire" a lui Safari pot fi utile, deoarece vă marchează biți de pe web, sincronizând paginile web salvate cu toate dispozitivele dvs. acceptate (inclusiv, desigur, iPad-ul dvs.).
Acum că ați explorat și ați înregistrat idei, este timpul să le puneți împreună și să elaborați un plan. Din fericire, există o mulțime de fireframing și aplicații generale pentru a vă ajuta procesul de planificare pe iPad. Am ales-o pe Adobe Proto să-mi fac fâșia de sârmă.
Adobe Proto este foarte asemănător cu Adobe Ideas, partajând o interfață comparabilă. Cu toate acestea, de data aceasta, în loc să desenați liber cu degetul (sau stylusul), veți utiliza un set de componente pentru a asambla un cadru wireframe. Lucru super cool despre Adobe Proto este că include câteva caracteristici utile pentru fireframing, cum ar fi integrarea cu o gamă largă de sisteme de grilă CSS.
Odată ce o rețea wireframe este instalată și cunoaștem planul pentru o pagină web simplă, suntem capabili să mergem înainte și să începem munca.
Probabil că ați auzit de OmniGraffle deja, doar datorită etichetei sale de preț de 49,99 USD. Acest cost este într-adevăr grav, deși fix și non-recurent, dar acest instrument este unul dintre cele mai sofisticate disponibile pentru platformă.
OmniGraffle are de-a face cu planificarea, fie că este vorba de a crea diagrame și diagrame elegante, structurate și de a schița schemele fără fir. OmniGraffle este foarte versatil, fiind capabil să se adapteze la munca multor diferite industrii, inclusiv la designul web. Întreaga gamă de caracteristici culminează în planuri care concurează cu cele create pe un driver tradițional pentru desktop.
OmniGraffle merită cu siguranță mențiunea sa onorabilă, dar există o mulțime de alternative disponibile la prețuri semnificativ mai ieftine. SketchyPad este o aplicație pentru iPad de 4,99 USD, care oferă instrumentele necesare creării unor fire de rețea eficiente dintr-un catalog extins de șabloane și elemente care se cuplează împreună pentru a crea o piesă finală.
Aplicația pe care am folosit-o a fost, desigur, Adobe Proto, aplicația Adobe pentru prelucrarea prin fire. Adobe Proto vă permite să schițați cu ușurință site-urile și ramele de aplicații cu o varietate de componente și chiar să le aliniați la bine-cunoscutele sisteme de grilă CSS.
Nu are rost să trec fiecare planificând aplicația acolo, dar mă simt obligată să menționez încă o aplicație care iese în evidență pentru mine. Deși nu are cel mai frumos interfață utilizator, tamponul de batjocură de 9.99 dolari este destul de simplu și oarecum minimalist, făcând sesiunile dvs. de planificare și punând împreună ideile finale o briză.
Înainte de a trece la etapa construirii unui proiect de lucru, trebuie să stabilim locul în care vom crea site-ul.
IPad este fără îndoială un dispozitiv care poate face lucruri. Din nefericire, unul dintre dezavantajele sale majore este modul în care gestionează fișierele. Aplicațiile se simt într-o oarecare măsură cu sandbox-uri, iar instrumente, cum ar fi Finder sau Explorer, nu sunt disponibile pe platformă. Prin urmare, efectuarea muncii locale poate fi incomodă.
Din fericire, putem folosi stocarea în afara dispozitivului pentru a lucra pe site-urile noastre. O modalitate simplă de a face acest lucru ar fi să lucrați pe web, să vă conectați la un server live prin FTP (sau alternativă) și să găzduiți fișiere în acest fel.
Alternativ, avem opțiunea de Dropbox, un serviciu care este integrat într-un număr de aplicații pe care le vom privi în secțiunea următoare. Cu o capacitate de stocare destul de generoasă gratuit (capacitățile mai mari sunt disponibile contra cost), Dropbox este un instrument excelent pentru stocarea, sincronizarea și chiar versiunea fișierelor dvs., precum și împărțirea acestora cu colaboratori sau clienți atunci când este necesar.
În timp ce Dropbox este integrat într-un număr de aplicații pe care le vom examina într-un moment, există o aplicație oficială, gratuită Dropbox pentru iPad.
Acum este momentul să creați un site web. Există o varietate de editori de coduri disponibile pentru iPad, dar am de gând să folosesc Diet Coda, versiunea recenta a iOS de la Panic.
Odată conectat prin FTP și instalând un site, veți fi în esență lansat într-o experiență scrisă familiarizată cu Coda pentru Mac OS X. Cu ușurință, prin atingerea pictogramei plus din Diet Coda, puteți configura un nou director și orice fișiere înăuntru. Am creat un fișier HTML și o foaie de stil CSS și le-am deschis amândouă. Nu lasati ecranul iPad destul de mic sa va dispara; prin atingerea pictogramei paginii purpurie din Diet Coda, aplicația își dezvăluie filele, permițându-vă să comutați rapid între fișierele deschise (deși acest lucru ar fi mai frumos să aveți subtil deschis permanent în partea de sus).
În cele din urmă, este o chestiune de codificare. Prin atingerea pictogramei de fragmente, puteți trage cu ușurință codul salvat sau presetat în Diet Coda, care accelerează puțin timpul petrecut de fapt scriind codul.
Poate că cel mai mare defect din Diet Coda este că nu puteți încărca imagini sau alte fișiere. Dacă creați un site greu de imagine, acest lucru poate fi o problemă. Am nevoie doar de o singură imagine în această pagină particulară, pe care am reușit să o încărc cu succes în afara aplicației Diet Coda folosind un client FTP.
Există mai mulți clienți independenți FTP disponibili pentru iPad (pur și simplu căutați "FTP" în App Store), deși chiar și câțiva dintre rivalii Diet Coda au încorporați clienți FTP înșiși potriviți pentru a-și face treaba.
După ce am trecut de obstacolul încărcării imaginilor, am reușit să finalizez pagina mea cu adevărat simplă în Diet Coda. A functionat intr-adevar si, din nou, in timp ce nimic special, am creat o pagina web in intregime pe iPad-ul meu, de la concept, la wireframe, la o piesa finita.
Există mai mulți editori de text disponibili pentru iPad, însă patru se remarcă într-adevăr. Prima este cea mai recentă versiune, Diet Coda, o aplicație de 19.99 dolari de la dezvoltatorii popularului Mac OS X App, Coda (și cea mai recentă versiune, Coda 2). Am aruncat o privire la Diet Coda când a fost lansată luna trecută.
Am jucat cu Diet Coda și este un editor destul de impresionant. Se pare mai degrabă o aplicație de editare decât de creare, fără editare locală, dar este cu siguranță capabilă să o facă. Din păcate, fără stocare locală, veți face asta nevoie pentru a configura o opțiune de stocare la distanță, conectând prin FTP sau SFTP.
Personal, viața de zi cu zi constă într-o mulțime de scrieri și uneori trebuie să fie format ca HTML. Evident, nu este la același nivel cu proiectarea unui site web, dar a trebuit să găsesc un editor de text adecvat atunci când am vrut să scriu pe iPad-ul meu. Aplicația mea preferată, înainte de lansarea dietei Coda, a fost Textastic, la 9.99 dolari.
Textastic este, în centrul său, un editor de text pentru editare în mai mult de 80 de limbi, inclusiv HTML, CSS etc. Toate aplicațiile din această secțiune au aceleași funcționalități de bază, dar ceea ce se remarcă în Textastic este opțiunile de conectare. În plus față de sincronizarea fișierelor dvs. cu un server FTP, FTPS sau SFTP, puteți de asemenea să distribuiți cu ușurință documentele dvs. în Dropbox și să le sincronizați cu cloudul și celelalte dispozitive. În plus, serverul WebDAV încorporat vă permite să transferați cu ușurință fișiere prin WiFi pe computerul dvs. Mac sau PC.
Gusto este un alt editor de text, disponibil pentru $ 9.99 în App Store. Dispunând de o mare parte din aceeași funcționalitate ca și cele de mai sus, Gusto susține transferul de fișiere prin FTP, SFTP, FTPS și Dropbox, făcându-l o opțiune excelentă.
Nu am avut ocazia să folosesc următoarea aplicație, dar din ceea ce văd din revizuirea iPad.AppStorm, arată destul de bine.
Koder este cel mai ieftin dintre cele patru, la pretul de doar 5.99 dolari, si arata fantastic. În interfața sa uimitoare, Koder sprijină redactarea și editarea unei întregi game de limbi, inclusiv a vechilor prieteni HTML și CSS (dacă nu ar fi susținut acest lucru, ei nu vor obține multe vânzări).
Ca și celelalte trei, Koder acceptă transferul fișierelor prin FTP, SFTP, FTPS și Dropbox, deși sunteți liber să lucrați la nivel local.
În cele din urmă, cel mai bun mod de a testa site-ul dvs. pe diferite platforme este de a face acest lucru. Dacă ați folosit unul dintre editorii pe care l-am discutat cu suportul Dropbox (sau cu serverul WebDAV încorporat), transferarea fișierelor într-un alt dispozitiv ar trebui să fie o briză. Sau, dacă ați lucrat cu FTP, trebuie doar să scoateți un browser pe dispozitivul pe care doriți să-l testați sau să utilizați un serviciu precum BrowserLab-ul Adobe.
Există câteva aplicații care mi-au atras atenția, care pot fi utile în timpul procesului de construire a unui site Web.
FontBook este o aplicație de referință de 5,99 USD, care se referă la tipografie, documentarea lucrărilor de turnătorii și designeri numeroși și oferirea de mii de fonturi pentru investigații. În plus, fiind optimizat pentru noul afișaj al retinei de pe iPad ar trebui să însemne că arată absolut fantastic!
CSS3Machine pentru iPad este o altă aplicație de referință care vă permite să jucați cu stiluri și chiar să vizualizați ceea ce prototipul de la distanță în browser-ul unui alt dispozitiv. CSS3Machine este chiar capabil să construiască și să exporte animații WebKit și multe altele, permițându-vă foarte ușor să puneți împreună câteva CSS fantastice și să le dați în proiect.
Nu uitați browserul dvs. Prin intermediul Safari pe iPad sau prin browserul descărcat de la o terță parte, veți avea acces la o lume de documentare, inspirație și suport comunitar, deci cu siguranță nu vedeți iPad-ul ca un dispozitiv de dezvoltare izolat.
În acest articol, am parcurs procesul prin care este posibil să realizăm un site în întregime pe un iPad. Și am reușit, de la planificare la construcție.
Am menționat doar aplicațiile cu care am avut personal experiențe bune sau chiar am fost în picioare pentru mine. Dacă ați proiectat și / sau dezvoltați pe iPad, împărtășiți-vă experiențele și aplicațiile favorite în comentarii. Vă mulțumim pentru lectură!
Accentsconagua