Share
La oss ta en titt på hvordan (eller faktisk hvis) Det er mulig å designe og bygge et nettsted helt på en iPad. Vi bruker en rekke apper til å tenke, wireframe, design, kode og distribuere en enkel HTML-webside.
Helt siden tabletter har gått i brudd på vanlig bruk, har vi tatt en rask holdning til å utarbeide den beste måten å støtte disse nye enhetene for forbruk av webinnhold. Jeg har skrevet mange artikler på tvers av våre blogger om dette emnet, som mange av mine medforfattere har. Bøker har blitt publisert. Paneler har blitt holdt.
Men hva om nettbrettet kan være en levedyktig plattform, ikke bare for forbruk, men for skapelse? Det har vært en gjentakende meme som berører enheter, er ikke bra for produktivitet, og det er ikke noe håp for å få noe skikkelig arbeid på en. Likevel gjør den svelte form og portabilitet det til en fantastisk enhet, spesielt for frilansere, som ikke nødvendigvis er bundet ned til en bestemt arbeidsplass.
Den første fasen av designprosessen er å planlegge og samle inn første ideer. Før vi hopper fremover og begynner å undersøke å sette sammen faktiske wireframes eller prototyper, finnes det en rekke nyttige iPad-apper som kan brukes til å bare skisse svært grove ideer, eller prototype små deler av et design.
Jeg valgte å bruke Adobe Ideas for å samle noen innledende ideer og konsepter. Ved å bruke det store lerretet, er det mulig å tegne en svært grov mockup av et potensielt område, og deretter enkelt zoome ut og annotere det på sidene. Åpenbart utfører vi ikke noe for komplisert med Adobe Ideas (det er sannsynligvis ikke i stand til å gjøre mye mer, for å være ærlig), men det er fortsatt en nyttig app og er en naturlig suitor for iPad.
Jeg var også i stand til å bruke Adobe Ideas for å skissere noen grunnleggende flytdiagrammer for sidestruktur, etc. iPad-pekeskjermen gjør dette til en intuitiv prosess, og dens formfaktor betyr at det er enkelt å passere rundt for å samarbeide med alle involverte.
Adobe Ideas er $ 9,99 (en pris som har steget ganske betydelig siden utgivelsen som en gratis app) og er i hovedsak en skissebok. Appen tilbyr et lerret hvor du kan utforske ideer med et grunnleggende freeform tegneverktøy.
Kombiner appen med en av en rekke styluser tilgjengelig fra tredjeparter, og du får et fantastisk verktøy for å sette sammen grove konsepter og visualiseringer av dine ideer. Hvis du jobber med andre og vil demonstrere for folk hva du tenker, gir ideer en flott plattform for deg å gjøre det.
Det er selvfølgelig alternativer til Adobes app (og det er $ 9,99 prislappen). Døyt! Whiteboard er et levedyktig alternativ, som gir samme stil med grunnleggende tegning og skissering. Med samme bruk, Jot! Whiteboard inneholder også en funksjon for live deling av skissene dine med andre, enten via en annen kopi av Jot! app eller nettleser. Døyt! Whiteboard er tilgjengelig for $ 4,99 i App Store.
En mer populær iPad-app for skissering og konceptualisering av designideer er Penultimate, som igjen tilbyr et lerret å skrive og tegne på. Du kan enkelt sende ideene dine til klienter eller medarbeidere som PDF også!
Den nest siste er den billigste av trioen av apper i denne delen, og koster bare $ 0,99.
I tillegg til å faktisk være vert for skisser av designkonsepter, kan disse appene være en fin måte å tegne hjernekart på og mer generelle notater på trender fra klienter, designideer og mer. Det finnes et vell av notatbøker som er tilgjengelige på iPad, inkludert lagereksemplet som leveres forhåndsinstallert på iPad.
Ikke glem at selv funksjoner som Safaris "Reading List" kan være utrolig nyttig, ettersom du legger til bokmerkebiter på nettet, synkroniserer de lagrede nettsidene til alle dine støttede enheter (inkludert selvfølgelig din iPad).
Nå som du har utforsket og innspilt ideer, er det på tide å faktisk sette dem sammen og lage en plan. Heldigvis er det en overflod av wireframing og generelle apper for å hjelpe planleggingsprosessen din på iPad. Jeg valgte Adobe Proto å gjøre min wireframing.
Adobe Proto ligner veldig på Adobe Ideas, og deler et tilsvarende grensesnitt. Men denne gangen, i stedet for fritt tegning med fingeren (eller pekepennen), vil du bruke et sett med komponenter for å binde sammen en wireframe. Den superkule tingen om Adobe Proto er den inneholder noen veldig nyttige funksjoner for wireframing, for eksempel integrering med en rekke populære CSS-nettverkssystemer.
Når en wireframe er satt opp, og vi vet planen for en enkel nettside, kan vi fortsette å starte arbeidet.
Du har sikkert hørt om OmniGraffle allerede, hvis bare på grunn av prisen på $ 49,99. Den kostnaden er faktisk heftig, om enn fast og ikke-tilbakevendende, men dette verktøyet er en av de mest sofistikerte tilgjengelige for plattformen.
OmniGraffle handler om planlegging, enten det skaper elegante, strukturerte flytdiagrammer og diagrammer, eller skisserer ut wireframes freehand. OmniGraffle er svært allsidig, og kan tilpasse seg mange ulike bransjer, inkludert webdesign. Hele spekteret av funksjoner kulminerer i planer som konkurrerer med de som er opprettet på en tradisjonell stasjonær driver.
OmniGraffle fortjener absolutt sin ærverdige omtale, men det finnes mange alternativer til betydelig lavere priser. SketchyPad er en $ 4,99 app for iPad som tilbyr verktøy for å lage noen effektive wireframes fra en bred katalog av sjabloner og elementer som sammen for å lage et siste stykke.
Appen jeg brukte var selvfølgelig Adobe Proto, Adobes wireframing-app. Adobe Proto lar deg enkelt skisse ut nettsider og app wireframes med en rekke komponenter, og til og med justere dem til kjente CSS-nettverkssystemer.
Det er meningsløst for meg å gå over hver planlegger app der ute, men jeg føler meg forpliktet til å nevne en app som skiller seg ut for meg. Selv om den ikke har det vakreste brukergrensesnittet, er $ 9,99 Mocking Pad ganske grei og litt minimalistisk, slik at du planlegger sessioner og setter sammen dine endelige ideer en bris.
Før vi hopper frem til scenen for å bygge et fungerende design, må vi fastslå hvor vi faktisk skal opprette nettstedet.
IPad er utvilsomt en enhet som kan få ting gjort. Dessverre er en av sine største ulemper den måten den håndterer filer på. Apps føles litt sandboxed og verktøy som Finder eller Explorer er bare ikke tilgjengelig på plattformen. Derfor kan det være vanskelig å utføre lokalt arbeid.
Heldigvis kan vi bruke lagringsplass uten enhet for å jobbe på våre nettsteder. En enkel måte å gjøre dette på ville være å jobbe på nettet, koble til en live-server over FTP (eller alternativ), og hosting filer på den måten.
Alternativt har vi muligheten til Dropbox, en tjeneste som er integrert i et antall apper vi kommer til å se på i neste avsnitt. Med en ganske generøs lagringskapasitet gratis (større kapasiteter er tilgjengelig mot et gebyr), er Dropbox et flott verktøy for å lagre, synkronisere og til og med versjone dine filer, samt dele dem med medarbeidere eller klienter når det trengs.
Mens Dropbox er integrert i et antall apper som vi ser på et øyeblikk, er det en offisiell, gratis Dropbox-app for iPad også.
Nå er det på tide å faktisk sette sammen et nettsted. Det finnes en rekke kode redaktører tilgjengelig for iPad, men jeg skal bruke Diet Coda, Panics siste iOS-utgivelse.
Når du er koblet over FTP og har konfigurert et nettsted, vil du i utgangspunktet bli lansert i en skriveopplevelse kjent med Coda for Mac OS X. Med relativt enkelt, ved å trykke på plussikonet i Diet Coda, kan du sette opp en ny katalog og eventuelle filer inni den. Jeg opprettet en HTML-fil og et CSS-stilark og åpnet dem begge sammen. Ikke la iPad's ganske små skjerm fraråtte deg selv; ved å trykke på det lilla sidenikonet i Diet Coda, avslører appen sine faner, slik at du raskt kan bytte mellom åpne filer (selv om dette ville være bedre å ha permanent åpent subtilt øverst).
Til syvende og sist er det et spørsmål om koding. Ved å trykke på snippets-ikonet, kan du enkelt dra i lagret eller forhåndsinnstilt kode i Diet Coda, noe som øker litt av tiden som egentlig skriver koden.
Kanskje den største feilen i Diet Coda er at du ikke kan laste opp bilder eller andre filer. Hvis du oppretter et image-tungt nettsted, kan dette potensielt være et problem. Jeg trengte bare et enkelt bilde i denne bestemte siden, som jeg klarte å laste opp utenom Diet Coda-appen ved hjelp av en FTP-klient.
Det finnes flere frittstående FTP-klienter tilgjengelige for iPad (bokstavelig talt bare søke etter "FTP" i App Store), selv om selv noen av Diet Codas rivaler har innebygde FTP-klienter som er egnede til å gjøre jobben.
Etter å ha passert hinderet for å laste opp bilder, var jeg i stand til å fullføre min ganske enkelt enkle nettside i Diet Coda helt fint. Det fungerte faktisk, og igjen, mens det ikke var noe spesielt, opprettet jeg en webside helt på iPad, fra konsept til wireframe, til et ferdig stykke.
Det finnes flere tekstredigerere tilgjengelig for iPad, men fire skiller seg virkelig ut. Den første er den nyeste utgivelsen, Diet Coda, en $ 19.99 app fra utviklerne av den populære Mac OS X App, Coda (og den nyeste versjonen, Coda 2). Jeg tok en titt på Diet Coda tilbake da den ble utgitt i forrige måned.
Jeg har spilt om med Diet Coda, og det er en ganske imponerende redaktør. Det virker mer som en app for redigering i stedet for å lage, uten lokal redigering, men det er sikkert i stand til å gjøre sistnevnte. Dessverre, uten lokal lagring, vil du trenge å sette opp en slags ekstern lagringsalternativ, kobling via FTP eller SFTP.
Personlig består mitt daglige liv av mye skriving, og jeg må noen ganger formatere som HTML. Åpenbart er det ikke på samme nivå som å designe et nettsted, men jeg måtte finne en passende tekstredaktør for når jeg ønsket å skrive på iPad. Min app av valg, før utgivelsen av Diet Coda, var Textastic, på $ 9,99.
Textastic er i sin kjerne en tekstredigerer for redigering på mer enn 80 språk, inkludert HTML, CSS, etc. Alle appene i denne delen har samme grunnleggende funksjonalitet, men det som skiller seg ut i Textastic er dets tilkoblingsalternativer. I tillegg til å synkronisere filene dine til en FTP-, FTPS- eller SFTP-server, kan du også enkelt dele dokumentene dine til Dropbox og få dem til å synkronisere med skyen og de andre enhetene dine. I tillegg kan den innebygde WebDAV-serveren enkelt overføre filer over WiFi til Mac eller PC.
Gusto er en annen tekstredigerer, tilgjengelig for $ 9,99 i App Store. Med mye av samme funksjonalitet som nevnt ovenfor, støtter Gusto også filoverføring over FTP, SFTP, FTPS og Dropbox, noe som gjør det til et flott alternativ.
Jeg har ikke hatt muligheten til å bruke denne neste appen, men fra hva jeg kan se fra iPad.AppStorms anmeldelse, det ser ganske kul ut.
Koder er den billigste av disse fire, priset til bare $ 5,99, og ser fantastisk ut. I sitt elegante brukergrensesnitt støtter Koder forfatter og redigering av en hel rekke språk, inkludert våre gamle venner HTML og CSS (hvis de ikke støttet dette, ville de ikke få mange salg).
Som de forrige tre, støtter Koder filoverføring over FTP, SFTP, FTPS og Dropbox, selv om du er fri til å jobbe lokalt.
Til slutt, den beste måten å teste ditt nettsted på ulike plattformer, er faktisk å gjøre det. Hvis du har brukt en av redaktørene vi diskuterte med Dropbox-støtte (eller den innebygde WebDAV-serveren), bør det overføres filer til en annen enhet. Eller hvis du har jobbet over FTP, trenger du bare å trekke opp en nettleser på enheten du vil teste, eller bruke en tjeneste som Adobes BrowserLab.
Det er noen apps som har tatt min oppmerksomhet som kan være nyttig gjennom hele prosessen med å bygge et nettsted.
FontBook er en $ 5,99 referanse app alt om typografi, dokumenterer arbeidet med mange typer støperier og designere og tilbyr opp tusenvis av skrifter for å undersøke. I tillegg, å være optimalisert for den nye iPadens netthinnen skal det bety at det ser helt fantastisk ut!
CSS3Machine for iPad er en annen referanseprogram som lar deg spille om med stiler, og til og med se hva du prototype eksternt i nettleseren til en annen enhet. CSS3Machine er selv i stand til å bygge og eksportere WebKit animasjoner og mer, slik at du enkelt kan sette sammen noen fantastiske CSS og slippe det inn i prosjektet ditt.
Ikke glem din nettleser. Gjennom Safari på iPad eller en tredjeparts nedlastet nettleser, får du tilgang til en verden av dokumentasjon, inspirasjon og fellesskapsstøtte, så absolutt ser ikke iPad som en isolert utviklingsenhet.
I denne artikkelen har vi gått gjennom prosessen med hvordan det er mulig å produsere et nettsted helt på en iPad. Og vi klarte det, fra planlegging til bygging.
Jeg har bare nevnt de appene som jeg personlig har hatt gode erfaringer med, eller har virkelig stått ut for meg. Hvis du har designet og / eller utvikler på iPad, kan du dele dine erfaringer og favorittapper i kommentarene. Takk for at du leste!
Accentsconagua