Share
Laten we eens kijken hoe (of inderdaad als) is het mogelijk om een website volledig op een iPad te ontwerpen en te bouwen. We zullen een verscheidenheid aan apps gebruiken om een eenvoudige HTML-webpagina te bedenken, te bedenken, ontwerpen, coderen en implementeren.
Sinds tablets zijn doorgebroken in het reguliere gebruik, hebben we een snelle houding aangenomen met betrekking tot de beste manier om deze nieuwe apparaten te ondersteunen voor het gebruik van webinhoud. Ik heb talloze artikelen op onze blogs over dit onderwerp geschreven, net als veel van mijn collega-schrijvers. Boeken zijn gepubliceerd. Panelen zijn gehouden.
Maar wat als de tablet een levensvatbaar platform zou kunnen zijn, niet alleen voor consumptie, maar voor creatie? Er is een terugkerende meme geweest dat aanrakingsapparaten niet goed zijn voor de productiviteit, en er is geen hoop op echt werk op één. Toch maakt de slanke vorm en draagbaarheid het een fantastisch apparaat, vooral voor freelancers, die niet noodzakelijkerwijs gebonden zijn aan een specifieke werkplek.
De eerste fase van het ontwerpproces is het plannen en samenbrengen van eerste ideeën. Voordat we verder gaan en beginnen met het onderzoeken van het samenstellen van echte wireframes of prototypes, zijn er een aantal nuttige iPad-apps die kunnen worden gebruikt om eenvoudig ruwe ideeën te schetsen of kleine delen van een ontwerp te prototypen.
Ik heb ervoor gekozen om met Adobe Ideas enkele initiële ideeën en concepten samen te brengen. Met behulp van het grote canvas is het mogelijk om een zeer ruwe mock-up van een potentiële site te tekenen en vervolgens eenvoudig uit te zoomen en aan de zijkanten te annoteren. Vanzelfsprekend doen we niets ingewikkelds met Adobe Ideas (het is waarschijnlijk niet in staat om veel meer te doen, om eerlijk te zijn), maar toch is het een nuttige app en een natuurlijke suitor voor de iPad.
Ik kon ook met Adobe Ideas enkele basisstroomdiagrammen schetsen voor de structuur van de site, enz. Het aanraakscherm van de iPad maakt dit een intuïtief proces en de vormfactor betekent dat het eenvoudig kan worden doorgegeven om samen te werken met alle betrokkenen.
Adobe Ideas kost $ 9,99 (een prijs die behoorlijk is gestegen sinds de release als gratis app) en is in wezen een schetsboek. De app biedt een canvas waarin je ideeën kunt verkennen met een eenvoudige freeform-tekentool.
Combineer de app met een van een aantal stylussen die beschikbaar zijn van derden en je krijgt een fantastische tool voor het samenstellen van ruwe concepten en visualisaties van je ideeën. Als u met anderen samenwerkt en mensen wilt laten zien wat u denkt, biedt Ideas u een geweldig platform om dit te doen.
Er zijn natuurlijk alternatieven voor de app van Adobe (en het prijskaartje van $ 9,99). Jota! Whiteboard is een levensvatbaar alternatief dat dezelfde stijl van basistekenen en schetsen biedt. Met hetzelfde gebruik, Jot! Whiteboard bevat ook een functie voor het live delen van uw schetsen met anderen, ofwel via een andere kopie van de Jot! app of hun browser. Jota! Whiteboard is beschikbaar voor $ 4,99 in de App Store.
Een andere populaire iPad-app voor het schetsen en conceptualiseren van ontwerpideeën is Penultimate, dat opnieuw een canvas biedt om te schrijven en te tekenen. U kunt uw ideeën ook eenvoudig als PDF naar uw klanten of collega's verzenden!
Penultimate is de goedkoopste van het trio van apps in deze sectie en kost slechts $ 0,99.
Naast het daadwerkelijk hosten van schetsen van ontwerpconcepten, kunnen deze apps een geweldige manier zijn om mindmaps en algemene opmerkingen over klanten, ontwerpideeën en meer uit te tekenen. Er is een schat aan notitie-apps beschikbaar op de iPad, inclusief het standaardvoorbeeld dat vooraf op uw iPad wordt geladen.
Vergeet niet dat zelfs functies zoals Safari's "Leeslijst" ongelooflijk nuttig kunnen zijn, omdat je bladwijzers van het web toevoegt, de opgeslagen webpagina's synchroniseert met al je ondersteunde apparaten (inclusief, natuurlijk, je iPad).
Nu je ideeën hebt onderzocht en vastgelegd, is het tijd om ze daadwerkelijk samen te stellen en een plan te maken. Gelukkig is er een overvloed aan wireframing en algemene apps om je planningsproces op de iPad te helpen. Ik koos Adobe Proto om mijn wireframing te doen.
Adobe Proto lijkt sterk op Adobe Ideas en deelt een vergelijkbare interface. Maar deze keer, in plaats van dat je vrij tekent met je vinger (of stylus), gebruik je een aantal componenten om een draadframe samen te voegen. Het super coole aan Adobe Proto is dat het een aantal echt handige functies bevat voor wireframing, zoals integratie met een reeks populaire CSS-rastersystemen.
Zodra een wireframe is ingesteld en we het plan voor een eenvoudige webpagina kennen, kunnen we doorgaan en aan de slag gaan.
U hebt waarschijnlijk al van OmniGraffle gehoord, al was het maar vanwege het prijskaartje van $ 49,99. Die kosten zijn inderdaad fors, zij het vast en eenmalig, maar deze tool is een van de meest geavanceerde die beschikbaar is voor het platform.
OmniGraffle heeft alles te maken met plannen, of het nu gaat om het maken van elegante, gestructureerde stroomdiagrammen en diagrammen, of het uit de losse hand schetsen van wireframes. OmniGraffle is zeer veelzijdig en kan worden aangepast aan de werkzaamheden van veel verschillende industrieën, waaronder webdesign. De hele reeks functies culmineert in plannen die concurreren met die gemaakt op een traditionele desktopdriver.
OmniGraffle verdient zeker zijn eervolle vermelding, maar er zijn veel alternatieven beschikbaar tegen aanzienlijk lagere prijzen. SketchyPad is een app van $ 4,99 voor iPad die de tools biedt om effectieve wireframes te maken uit een brede catalogus van stencils en elementen die samen een laatste stuk creëren.
De app die ik gebruikte was natuurlijk Adobe Proto, de wireframing-app van Adobe. Met Adobe Proto kunt u eenvoudig website- en app-wireframes schetsen met een verscheidenheid aan componenten en ze zelfs uitlijnen met bekende CSS-rastersystemen.
Het heeft geen zin om over te gaan elk planning van de app, maar ik voel me verplicht om nog een app te vermelden die opvalt. Hoewel het niet de mooiste gebruikersinterface heeft, is de Mocking Pad van $ 9,99 redelijk rechtlijnig en enigszins minimalistisch, waardoor je sessies van planning en het samenstellen van je definitieve ideeën een fluitje van een cent worden.
Voordat we doorgaan naar de fase van het bouwen van een werkend ontwerp, moeten we vaststellen waar we de site daadwerkelijk gaan maken.
De iPad is ongetwijfeld een apparaat dat dingen voor elkaar krijgt. Helaas is een van de grootste nadelen de manier waarop bestanden worden verwerkt. Apps voelen zich enigszins sandboxed en tools zoals Finder of Explorer zijn gewoon niet beschikbaar op het platform. Daarom kan het uitvoeren van lokaal werk lastig zijn.
Gelukkig kunnen we off-device-opslag gebruiken om op onze sites te werken. Een eenvoudige manier om dit te doen zou zijn om op het web te werken, verbinding te maken met een live server via FTP (of alternatief) en bestanden op die manier te hosten.
Als alternatief hebben we de optie Dropbox, een service die is geïntegreerd in een aantal van de apps die we in de volgende sectie zullen bekijken. Met een vrij royale opslagcapaciteit gratis (grotere capaciteiten zijn tegen betaling verkrijgbaar), is Dropbox een geweldig hulpmiddel om uw bestanden op te slaan, te synchroniseren en zelfs te verslaan, en ze ook te delen met collega's of klanten wanneer dat nodig is.
Hoewel Dropbox is geïntegreerd in een aantal van de apps die we in een oogwenk bekijken, is er ook een officiële gratis Dropbox-app voor iPad.
Nu is het tijd om een website daadwerkelijk samen te stellen. Er is een verscheidenheid aan code-editors beschikbaar voor de iPad, maar ik ga Diet Coda gebruiken, de recente iOS-release van Panic.
Nadat je verbinding hebt gemaakt via FTP en een site hebt ingesteld, wordt je in feite gelanceerd in een schrijfervaring die bekend is met Coda voor Mac OS X. Met relatief gemak kun je door op het pluspictogram in Diet Coda te tikken een nieuwe map en een willekeurige map instellen. bestanden erin. Ik heb een HTML-bestand en een CSS-stylesheet gemaakt en deze beide geopend. Laat je echter niet afschrikken door het tamelijk kleine scherm van de iPad; door op het paarse paginapictogram in Diet Coda te tikken, geeft de app de tabbladen weer, zodat je snel kunt schakelen tussen geopende bestanden (hoewel dit prettiger zou zijn om bovenin permanent subtiel te openen).
Uiteindelijk is het dan een kwestie van coderen. Door op het pictogram Fragmenten te tikken, kunt u eenvoudig de bewaarde of vooraf ingestelde code in Diet Coda slepen, wat de tijd die u daadwerkelijk aan het schrijven van de code besteedt versnelt.
Misschien is de grootste fout in Diet Coda dat je geen afbeeldingen of andere bestanden kunt uploaden. Als u een site met veel afbeeldingen maakt, kan dit een probleem zijn. Ik had slechts één afbeelding nodig op deze specifieke pagina, die ik succesvol kon uploaden buiten de Diet Coda-app met behulp van een FTP-client.
Er zijn verschillende stand-alone FTP-clients beschikbaar voor de iPad (letterlijk alleen 'FTP' zoeken in de App Store), hoewel zelfs sommige concurrenten van Diet Coda ingebouwde FTP-clients hebben die geschikt zijn om het werk te doen.
Toen ik de horde van het uploaden van foto's gepasseerd was, was ik in staat om mijn weliswaar eenvoudige webpagina in Diet Coda prima af te maken. Het werkte inderdaad en, nogmaals, hoewel niets bijzonders, heb ik een webpagina volledig op mijn iPad gemaakt, van concept tot wireframe, tot een voltooid stuk.
Er zijn verschillende teksteditors beschikbaar voor de iPad, maar vier springen er echt uit. De eerste is de meest recente release, Diet Coda, een app van $ 19,99 van de ontwikkelaars van de populaire Mac OS X-app, Coda (en de meest recente versie, Coda 2). Ik nam Diet Coda terug toen het vorige maand werd vrijgegeven.
Ik heb gespeeld met Diet Coda en het is een behoorlijk indrukwekkende editor. Het lijkt meer op een app om te bewerken in plaats van te creëren, zonder lokale bewerking, maar het is zeker in staat om de laatste te doen. Helaas, zonder enige lokale opslag, zul je nodig hebben om een soort van externe opslagoptie in te stellen, verbinden via FTP of SFTP.
Persoonlijk bestaat mijn dagelijks leven uit veel schrijven en soms moet ik opmaken als HTML. Het is duidelijk dat het niet op hetzelfde niveau staat als het ontwerpen van een website, maar ik moest wel een geschikte teksteditor vinden voor wanneer ik op mijn iPad wilde schrijven. Mijn favoriete app, vóór de release van Diet Coda, was Textastic voor $ 9,99.
Textastic is in wezen een teksteditor voor bewerking in meer dan 80 talen, inclusief HTML, CSS, enz. Alle apps in deze sectie delen dezelfde basisfunctionaliteit, maar wat opvalt in Textastic zijn de verbindingsopties. Naast het synchroniseren van uw bestanden naar een FTP-, FTPS- of SFTP-server, kunt u uw documenten ook gemakkelijk delen met Dropbox en synchroniseren met de cloud en uw andere apparaten. Bovendien kunt u met de ingebouwde WebDAV-server eenvoudig bestanden overbrengen via WiFi naar uw Mac of pc.
Gusto is een andere teksteditor, beschikbaar voor $ 9,99 in de App Store. Met veel van dezelfde functionaliteit als de hiervoor genoemde, ondersteunt Gusto ook bestandsoverdracht via FTP, SFTP, FTPS en Dropbox, waardoor het een geweldige optie is.
Ik heb niet de gelegenheid gehad om deze volgende app te gebruiken, maar van wat ik kan zien op iPad. De beoordeling van Appstorm, het ziet er best gaaf uit.
Koder is de goedkoopste van deze vier, geprijsd op slechts $ 5,99, en ziet er fantastisch uit. In zijn gestroomlijnde gebruikersinterface ondersteunt Koder het schrijven en bewerken van een groot aantal talen, inclusief onze oude vrienden HTML en CSS (als ze dit niet zouden ondersteunen, zouden ze niet veel verkopen krijgen).
Net als de vorige drie ondersteunt Koder bestandsoverdracht via FTP, SFTP, FTPS en Dropbox, hoewel je lokaal kunt werken.
Uiteindelijk is de beste manier om uw site op verschillende platforms te testen, om het daadwerkelijk te doen. Als je een van de editors hebt gebruikt die we hebben besproken met Dropbox-ondersteuning (of de ingebouwde WebDAV-server), zou het overbrengen van je bestanden naar een ander apparaat een koud kunstje moeten zijn. Of, als u via FTP hebt gewerkt, hoeft u alleen maar een browser te openen op het apparaat dat u wilt testen of een service te gebruiken zoals Adobe's BrowserLab.
Er zijn een paar apps die mijn aandacht trekken die nuttig kunnen zijn tijdens het hele proces van het bouwen van een website.
FontBook is een $ 5,99 referentie-app die alles te maken heeft met typografie, het documenteren van het werk van een groot aantal lettergieterijen en ontwerpers en het aanbieden van duizenden lettertypen die je kunt onderzoeken. Bovendien zou optimaliseren van het nieuwe Retina-scherm van de iPad betekenen dat het er fantastisch uitziet!
CSS3Machine voor iPad is een andere referentie-app waarmee je kunt spelen met stijlen en zelfs kunt bekijken wat je op afstand prototypt in de browser van een ander apparaat. CSS3Machine is zelfs in staat om WebKit-animaties en meer te bouwen en te exporteren, waardoor je heel gemakkelijk een aantal fantastische CSS kunt samenstellen en in je project kunt laten vallen.
Vergeet uw browser niet. Via Safari op uw iPad of via een gedownloade browser van derden heeft u toegang tot een wereld van documentatie, inspiratie en community-ondersteuning, dus zie de iPad zeker niet als een geïsoleerd ontwikkelingsapparaat.
In dit artikel hebben we het proces doorlopen van hoe het mogelijk is om een website volledig op een iPad te produceren. En we zijn erin geslaagd, van planning tot constructie.
Ik heb alleen de apps genoemd waar ik persoonlijk goede ervaringen mee heb gehad of die echt opvalt voor mij. Als je aan het ontwerpen en / of ontwikkelen bent op je iPad, deel dan je ervaringen en favoriete apps in de comments. Bedankt voor het lezen!
Accentsconagua