Share
Voyons comment (ou en effet si) il est possible de concevoir et de construire un site Web entièrement sur un iPad. Nous utiliserons diverses applications pour concevoir, filaire, concevoir, coder et déployer une simple page Web HTML..
Depuis que les tablettes ont envahi l'usage courant, nous avons rapidement décidé de trouver le meilleur moyen de prendre en charge ces nouveaux appareils pour la consommation de contenu Web. J'ai écrit de nombreux articles sur ce sujet dans nos blogs, au même titre qu'un grand nombre de mes collègues écrivains. Les livres ont été publiés. Des panels ont eu lieu.
Mais que se passe-t-il si la tablette pourrait être une plateforme viable, non seulement pour la consommation, mais pour la création? Il est de plus en plus courant que les appareils tactiles ne favorisent pas la productivité et qu’il n’ya aucun espoir d’obtenir un travail réel. Pourtant, sa forme svelte et sa portabilité en font un outil fantastique, en particulier pour les pigistes, qui ne sont pas nécessairement liés à un lieu de travail spécifique..
La première étape du processus de conception consiste à planifier et à rassembler les idées initiales. Avant d’aller de l’avant et de commencer à étudier la possibilité de créer des structures filaires ou des prototypes, il existe un certain nombre d’applications iPad utiles qui peuvent être utilisées pour esquisser simplement des idées très brutes ou pour prototyper de petites parties d’un dessin.
J'ai choisi Adobe Ideas pour rassembler quelques idées et concepts de base. En utilisant la grande toile, il est possible de dessiner une maquette très grossière d'un site potentiel, puis d'effectuer un zoom arrière et de l'annoter facilement sur les côtés. De toute évidence, nous ne faisons rien de trop compliqué avec Adobe Ideas (ce n’est probablement pas capable de faire beaucoup plus, pour être honnête), mais c’est quand même une application utile et un prétendant naturel pour iPad.
J'ai également pu utiliser Adobe Ideas pour dessiner des organigrammes de base pour la structure du site, etc. L'écran tactile de l'iPad en fait un processus intuitif et son facteur de forme signifie qu'il est facile de faire passer pour collaborer avec toute personne impliquée..
Adobe Ideas coûte 9,99 $ (un prix qui a considérablement augmenté depuis sa sortie en tant qu'application gratuite) et constitue essentiellement un carnet de croquis. L'application propose un canevas dans lequel vous pouvez explorer des idées avec un outil de dessin libre de base.
Combinez l'application avec l'un des nombreux stylets proposés par des tiers et vous obtiendrez un outil fantastique pour rassembler des concepts approximatifs et des visualisations de vos idées. Si vous travaillez avec d'autres personnes et que vous voulez montrer aux gens ce que vous pensez, Ideas vous donne une excellente plate-forme pour le faire..
Il existe bien sûr des alternatives à l'application Adobe (et son prix de 9,99 $). Iota! Le tableau blanc est une alternative viable, offrant le même style de dessin et de dessin de base. Aux mêmes usages, Jot! Le tableau blanc inclut également une fonctionnalité permettant de partager en direct vos croquis avec d’autres, soit via une autre copie du logiciel Jot! application ou leur navigateur. Iota! Le tableau blanc est disponible pour 4,99 $ dans l'App Store.
Penultimate est une application iPad plus populaire pour dessiner et conceptualiser des idées de conception. Elle propose également un canevas sur lequel écrire et dessiner. Vous pouvez également facilement envoyer vos idées à des clients ou à des collègues au format PDF.!
Avant-dernier est le moins cher du trio d'applications dans cette section, pour seulement 0,99 $.
En plus de contenir des esquisses de concepts de conception, ces applications peuvent être un excellent moyen de dessiner des cartes mentales et des notes plus générales sur les briefs des clients, les idées de conception, etc. Il existe une multitude d'applications de prise de notes disponibles sur l'iPad, y compris l'exemple standard qui est préchargé sur votre iPad..
N'oubliez pas que même des fonctionnalités telles que la "liste de lecture" de Safari peuvent s'avérer extrêmement utiles, car vous marquez des extraits du Web en synchronisant les pages Web enregistrées sur tous vos appareils pris en charge (y compris, bien sûr, votre iPad)..
Maintenant que vous avez exploré et enregistré des idées, il est temps de les rassembler et de produire un plan. Heureusement, il existe une multitude d'applications filaires et générales pour vous aider dans votre processus de planification sur iPad. J'ai choisi Adobe Proto pour faire mon wireframing.
Adobe Proto est très similaire à Adobe Ideas, partageant une interface comparable. Cependant, cette fois, au lieu de dessiner librement avec votre doigt (ou votre stylet), vous utiliserez un ensemble de composants pour assembler une structure filaire. Ce qui est super cool avec Adobe Proto, c’est qu’il inclut des fonctionnalités très utiles pour l’animation filaire, telles que l’intégration avec une gamme de systèmes de grille CSS populaires..
Une fois qu'une structure filaire est installée et que nous connaissons le projet d'une page Web simple, nous pouvons aller de l'avant et commencer les travaux..
Vous avez probablement déjà entendu parler d'OmniGraffle, ne serait-ce qu'en raison de son prix de 49,99 $. Ce coût est certes lourd, bien que fixe et non récurrent, mais cet outil est l’un des plus sophistiqués disponibles pour la plateforme..
OmniGraffle est une question de planification, qu’il s’agisse de créer des organigrammes et des diagrammes élégants et structurés, ou d’esquisser des structures filaires à main levée. OmniGraffle est très polyvalent et peut s’adapter aux travaux de nombreuses industries, y compris la conception de sites Web. L'ensemble des fonctionnalités aboutit à des plans rivalisant avec ceux créés avec un pilote de bureau traditionnel.
OmniGraffle mérite certes sa mention honorable, mais de nombreuses alternatives sont disponibles à des prix nettement moins chers. SketchyPad est une application pour iPad à 4,99 $ offrant les outils nécessaires pour créer des structures filaires efficaces à partir d'un vaste catalogue de pochoirs et d'éléments assemblés pour créer une pièce finale..
L’application que j’ai utilisée était bien entendu Adobe Proto, l’application filaire d’Adobe. Adobe Proto vous permet de dessiner facilement des wireframes pour sites Web et applications avec une variété de composants, et même de les aligner sur des systèmes de grille CSS bien connus..
C'est inutile pour moi d'aller chaque planification de l'application là-bas, mais je me sens obligé de mentionner une autre application qui se démarque pour moi. Bien qu'il n'ait pas la plus belle interface utilisateur, le tapis de frappe de 9,99 $ est assez simple et quelque peu minimaliste, ce qui facilite la planification de vos sessions et l'assemblage de vos idées finales..
Avant de passer à l'étape de la création d'un concept fonctionnel, nous devons déterminer où nous allons réellement créer le site..
L'iPad est sans aucun doute un appareil qui peut faire avancer les choses. Malheureusement, l'un de ses principaux inconvénients est la façon dont il traite les fichiers. Les applications se sentent un peu en bac à sable et des outils tels que Finder ou Explorer ne sont tout simplement pas disponibles sur la plate-forme. Par conséquent, effectuer des travaux locaux peut être délicat.
Heureusement, nous pouvons utiliser le stockage hors périphérique pour travailler sur nos sites. Une méthode simple consiste à travailler sur le Web, en se connectant à un serveur en direct via FTP (ou une alternative) et en hébergeant des fichiers de cette manière..
Alternativement, nous avons l'option de Dropbox, un service intégré à plusieurs applications que nous verrons dans la section suivante. Avec une capacité de stockage assez généreuse et gratuite (de plus grandes capacités sont disponibles moyennant un supplément), Dropbox est un excellent outil pour stocker, synchroniser et même mettre en version vos fichiers, ainsi que pour les partager avec vos collègues ou vos clients en cas de besoin..
Bien que Dropbox soit intégré à un certain nombre d'applications que nous examinerons dans un instant, il existe également une application officielle et gratuite pour iPad.
Il est maintenant temps de créer un site Web. Divers éditeurs de code sont disponibles pour l'iPad, mais je vais utiliser Diet Coda, la dernière version iOS de Panic..
Une fois connecté via FTP et après avoir configuré un site, vous serez essentiellement initié à une expérience d’écriture familière avec Coda pour Mac OS X. Avec une relative facilité, en appuyant sur l’icône Plus dans Diet Coda, vous pouvez configurer un nouveau fichiers à l'intérieur. J'ai créé un fichier HTML et une feuille de style CSS et les ai ouverts. Ne laissez pas l’écran assez petit de l’iPad vous dissuader; en appuyant sur l'icône de page violette dans Diet Coda, l'application révèle ses onglets, ce qui vous permet de basculer rapidement entre les fichiers ouverts (bien que ce serait plus agréable d'avoir une ouverture subtilement permanente en haut).
En fin de compte, il s’agit d’une question de codage. En appuyant sur l'icône d'extraits, vous pouvez facilement faire glisser un code enregistré ou prédéfini dans Diet Coda, ce qui accélère un peu le temps passé à l'écriture du code..
Le principal défaut de Diet Coda est peut-être que vous ne pouvez pas télécharger d’images ou d’autres fichiers. Si vous créez un site riche en images, cela peut potentiellement être un problème. Je n'avais besoin que d'une seule image sur cette page, que j'ai pu télécharger en dehors de l'application Diet Coda à l'aide d'un client FTP..
Il existe plusieurs clients FTP autonomes disponibles pour l'iPad (il suffit de chercher "FTP" dans l'App Store), même si certains rivaux de Diet Coda ont des clients FTP intégrés qui leur permettent de faire le travail..
Après avoir franchi l’obstacle du téléchargement d’images, j’ai pu très bien finir ma simple page Web dans Diet Coda. Cela a effectivement fonctionné et, encore une fois, rien de spécial, j'ai créé une page Web entièrement sur mon iPad, du concept à la structure filaire en passant par le produit fini..
Il existe plusieurs éditeurs de texte disponibles pour l'iPad, mais quatre d'entre eux se démarquent vraiment. Le premier est la version la plus récente, Diet Coda, une application à 19,99 $ conçue par les développeurs de la populaire application Mac OS X, Coda (et sa version la plus récente, Coda 2). J'ai jeté un coup d'œil à Diet Coda à sa sortie le mois dernier.
J'ai joué avec Diet Coda et c'est un éditeur assez impressionnant. Cela ressemble plus à une application pour l’édition que pour la création, sans édition locale, mais elle est certainement capable de faire cette dernière. Malheureusement, sans stockage local, vous aurez avoir besoin configurer une sorte d’option de stockage à distance, en se connectant via FTP ou SFTP.
Personnellement, ma vie quotidienne consiste en beaucoup d'écriture et je dois parfois formater au format HTML. Évidemment, ce n’est pas au même niveau que la conception d’un site Web, mais j’ai eu besoin de trouver un éditeur de texte adapté à mes besoins lorsque je voulais écrire sur mon iPad. Mon application de choix, avant la sortie de Diet Coda, était Textastic, à 9,99 $.
Textastic est, à la base, un éditeur de texte à éditer dans plus de 80 langues, dont HTML, CSS, etc. Toutes les applications de cette section partagent les mêmes fonctionnalités de base, mais ce qui la distingue, ce sont ses options de connexion. Outre la synchronisation de vos fichiers sur un serveur FTP, FTPS ou SFTP, vous pouvez également partager facilement vos documents sur Dropbox et les synchroniser avec le cloud et vos autres appareils. De plus, le serveur WebDAV intégré vous permet de transférer facilement des fichiers via WiFi vers votre Mac ou votre PC..
Gusto est un autre éditeur de texte, disponible pour 9,99 $ dans l'App Store. Présentant à peu près les mêmes fonctionnalités que celles mentionnées ci-dessus, Gusto prend également en charge le transfert de fichiers via FTP, SFTP, FTPS et Dropbox, ce qui en fait une excellente option..
Je n'ai pas eu l'occasion d'utiliser cette prochaine application, mais d'après ce que je peux voir d'après l'avis de iPad.AppStorm, il a l'air plutôt cool.
Koder est le moins cher de ces quatre, au prix de 5,99 $ seulement, et a l’air fantastique. Dans son interface utilisateur épurée, Koder prend en charge la création et la modification de nombreuses langues, y compris nos anciens amis HTML et CSS (s’ils ne la prenaient pas en charge, elles ne généreraient pas beaucoup de ventes)..
Comme les trois précédents, Koder prend en charge le transfert de fichiers via FTP, SFTP, FTPS et Dropbox, même si vous êtes libre de travailler localement..
En fin de compte, le meilleur moyen de tester votre site sur différentes plates-formes est de le faire. Si vous avez utilisé l'un des éditeurs dont nous avons parlé avec le support Dropbox (ou le serveur WebDAV intégré), le transfert de vos fichiers sur un autre appareil devrait être un jeu d'enfant. Ou bien, si vous travaillez par FTP, vous devez simplement vous procurer un navigateur sur le périphérique que vous souhaitez tester, ou utiliser un service tel que Adobe BrowserLab..
Certaines applications qui ont attiré mon attention peuvent être utiles tout au long du processus de création d'un site Web..
FontBook est une application de référence à 5,99 $ consacrée à la typographie, documentant le travail de nombreuses fonderies et concepteurs et proposant des milliers de polices à explorer. De plus, être optimisé pour l'affichage de la rétine du nouvel iPad devrait lui donner un look absolument fantastique!
CSS3Machine for iPad est une autre application de référence qui vous permet de jouer avec les styles et même de voir ce que vous protégez à distance dans le navigateur d'un autre appareil. CSS3Machine est même capable de créer et d'exporter des animations WebKit et plus, ce qui vous permet de créer très facilement des CSS fantastiques et de les insérer dans votre projet..
N'oubliez pas votre navigateur. Grâce à Safari sur votre iPad ou à un navigateur téléchargé par une tierce partie, vous aurez accès à un monde de documentation, d'inspiration et de soutien de la communauté. Ne considérez donc certainement pas l'iPad comme un périphérique de développement isolé..
Dans cet article, nous avons expliqué comment créer un site Web entièrement sur un iPad. Et nous avons réussi, de la planification à la construction.
Je n'ai fait que mentionner les applications avec lesquelles j'ai personnellement vécu de bonnes expériences ou qui se sont vraiment démarquées pour moi. Si vous avez conçu et / ou développé sur votre iPad, partagez vos expériences et vos applications préférées dans les commentaires. Merci d'avoir lu!
Accentsconagua