Comment créer un site Web avec Adobe Project Rome
Adobe a récemment lancé un projet appelé Rome qui se veut une sorte de plate-forme de publication de contenu tout-en-un. Vous pouvez utiliser cette application innovante pour créer des sites Web, des projets d'impression, des PDF interactifs et plus encore.
Aujourd'hui, je vais vous donner une introduction super basique à Rome pour que vous puissiez voir ce que c'est, comment l'utiliser et si c'est bon pour vous.
Rome
Selon les propres termes d'Adobe, Project Rome est «une création et une publication de contenu tout-en-un simples, puissantes pour pratiquement n'importe qui» Si vous pensez que c'est un peu vague, vous avez raison. Mais là encore, l'ensemble du projet est un peu déroutant. Rome est-elle l'avenir de Photoshop? S'agit-il d'une concurrence pour Dreamweaver ou InDesign?
La réponse est vraiment «aucune de ces réponses». Après avoir joué un peu avec, il devient évident qu'Adobe tente de cibler un marché différent de celui de Creative Suite. Alors que CS est un ensemble incroyablement coûteux d'applications puissantes et professionnelles qui peuvent prendre des années (des décennies?) Pour apprendre à fond, Rome est censé être un moyen convivial pour presque n'importe qui de créer du contenu riche.
Avant de commencer, vous voudrez vous arrêter sur le site Web de Rome et télécharger l'application de bureau ou lancer l'application Web (j'utiliserai la version de bureau).
Combien ça coûte?
Rome est actuellement disponible en avant-première gratuite. Adobe n'a apparemment pas encore décidé de sa stratégie de tarification et souhaite voir comment les utilisateurs réagissent avant de poursuivre. Vous pouvez télécharger une copie maintenant, mais sachez qu'un jour, il la désactivera probablement et vous obligera à acheter une licence unique ou peut-être même un abonnement.
Commencer
Une fois l'application téléchargée, son lancement devrait faire apparaître une bande verticale de boutons sur votre bureau.
De là, vous pouvez parcourir les modèles par défaut ou même une belle galerie de modèles soumis par les utilisateurs, mais ceux-ci ont déjà beaucoup de choses, il est donc préférable à des fins d'apprentissage de recommencer à zéro.
Cliquez sur le bouton "Créer nouveau" pour ouvrir une galerie assez large de tailles de documents possibles. De là, allez dans «Blank for Screen» et sélectionnez quelque chose dans le dossier «Browser Sizes». J'ai choisi 960 × 550.
Rencontrez Rome: l'interface
Lorsque vous obtenez un premier coup d'œil à l'interface de Rome, cela ressemble à une version extrêmement simplifiée de Photoshop. Plutôt qu'une mer infinie de palettes, il n'y en a que deux. En fait, il pourrait y en avoir beaucoup trop peu. En effet, Adobe semble expérimenter de nouvelles idées qui ne vous montrent que ce que vous avez besoin de voir quand vous avez besoin de le voir, plutôt que de vous donner l'ensemble de l'enchilada à la fois.
L'image ci-dessus montre à quel point l'écran est nu par rapport à ce à quoi nous sommes habitués dans Creative Suite. Nous examinerons de plus près chaque section ci-dessous pendant que nous plongeons dans notre projet simple.
Feuilles
Le site que nous allons construire comportera plusieurs pages. Rome les appelle «feuilles» et les affiche en haut à gauche avec des aperçus miniatures.
La première chose que nous voulons faire est de créer une «feuille maîtresse». Cela nous permettra de configurer quelques éléments de base qui apparaîtront sur chaque page. Plutôt que de placer des éléments manuellement sur chaque feuille, les éléments de la feuille principale seront automatiquement transférés vers vos autres feuilles. Cela peut être déroutant au début, car vous verrez souvent un élément sur une feuille que vous ne semblez pas pouvoir modifier. En effet, bien que l'élément puisse apparaître sur cette feuille, il s'agit d'un élément maître et vous oblige donc à sélectionner la feuille maître avant de l'éditer.
Pour créer une feuille maître, cliquez sur «Afficher les feuilles maîtres» dans le menu «Afficher». Cela devrait séparer votre menu de feuilles en deux sections: Sheets et Master Sheets. Cliquez sur le petit bouton plus pour ajouter quelques feuilles régulières supplémentaires. À côté de la miniature d'une feuille se trouve une petite icône de Rome, vous les verrez dispersées dans l'interface indiquant qu'il y a un menu contextuel caché ici.
Utilisez ce petit menu déroulant pour nommer vos feuilles Accueil, À propos, Portfolio et Contact.
le menu de navigation
Étant donné que nous conservons cela comme une simple introduction à l'application, nous pouvons montrer de nombreuses fonctionnalités de base en créant un menu de navigation. Pour commencer, saisissez l'outil texte et dessinez une boîte. Tapez ensuite «Accueil» et utilisez le menu ci-dessous pour sélectionner une police que vous aimez.
Ici, vous voyez vraiment cette magie du menu en action. Il y a une tonne d'options de menu ici, chacune avec un ensemble de sous-menus. Ce que vous obtenez, c'est beaucoup de fonctionnalités sans tout l'encombrement. Cela prend certainement un certain temps pour s'y habituer et peut prendre du temps, mais une fois que vous avez compris ce n'est pas si mal. J'aime vraiment les petits curseurs qui peuvent être utilisés pour ajuster diverses propriétés comme la taille de la police.
Une fois que vous avez compris la taille et la police, descendez dans le menu «Lien» et définissez le lien vers la feuille «Accueil».
Cela changera automatiquement l'apparence du lien en bleu avec un soulignement. Puisque nous ne voulons ni l'un ni l'autre, nous devrons le réparer. Changer la couleur en noir est assez facile mais le soulignement était plus difficile à trouver. Cette option se trouve dans le menu «Plus d'options de caractères» illustré ci-dessous.
Effet de survol
Ensuite, nous voulons changer l'apparence du lien lorsque l'utilisateur survole avec le curseur. Ce n'est pas exactement un processus intuitif et m'a pris quelques minutes pour comprendre.
Avec votre zone de texte sélectionnée, allez dans "Paramètres d'événement" dans le menu "Avancé" et activez "Événements standard".
Vous devriez maintenant avoir une option «Événements» dans le menu principal. De là, allez dans "Entrée de la souris" et "Définir la propriété". Ensuite, sélectionnez votre objet texte et définissez la propriété sur Opacité. Enfin, définissez la valeur sur 50%.
Cela réduira le texte à 50% de son opacité d'origine lorsque quelqu'un survolera le texte. J'aurais aimé simplement définir la couleur, mais cette option ne semble pas apparaître dans le menu des événements.
Le problème que nous rencontrons maintenant est que le texte changera de couleur sur Mouse Enter mais le restera de manière permanente. Pour résoudre ce problème, nous devons ajouter un autre événement à la sortie de la souris qui redéfinit l'opacité à 100%. Voir l'image ci-dessous pour une référence.
Duplication du lien d'accueil
Maintenant que nous avons configuré notre premier lien comme nous le souhaitons, copiez-le et collez-le trois fois pour créer les liens À propos, Portfolio et Contact. N'oubliez pas que vous devrez sélectionner le texte pour chacun, puis entrer et modifier les liens pour pointer vers les feuilles appropriées.
Vous voudrez également répartir les objets verticalement pour vous assurer qu'ils sont espacés uniformément. Pour ce faire, sélectionnez toutes les zones de texte et accédez au menu Aligner.
Aperçu de votre travail
Pour voir si votre menu de navigation fonctionne correctement, cliquez sur le petit bouton du moniteur avec un bouton de lecture en haut de l'écran. Cela devrait vous donner un aperçu en direct de votre site en action.
Passez la souris sur les liens pour vous assurer qu'ils fonctionnent et cliquez pour voir si la feuille change.
La palette d'objets
Maintenant que vous avez quelques éléments sur la page, jetons un œil à la palette Objets. Cela équivaut à la palette Calques que vous avez l'habitude de voir dans d'autres applications et n'est essentiellement qu'une liste interactive de tous les éléments de la page.
Notez que c'est beaucoup plus simple que la palette des calques Photoshop. Il n'y a pas de masquage, d'effets de calque, etc.
Fin de la feuille principale
Étant donné que chaque bon site minimaliste a un logo de cercle de cliché, le nôtre ne peut tout simplement pas en rester un. En faire une maquette rapidement vous donnera une idée de l'outil de forme. Notez que les formes sont entièrement redimensionnables sans dégradation de l'image. Rome est parfaitement adapté pour travailler avec des objets vectoriels et raster.
Et avec cela, nous avons terminé avec notre feuille de maître. Ces éléments apparaîtront sur chaque page sans effort supplémentaire.
Fin du site et exportation
Comme je l'ai mentionné précédemment, la navigation nous a permis de couvrir la plupart des fonctionnalités que je voulais montrer. Nous avons créé des liens, positionné et distribué des objets et créé des effets de survol.
De là, vous devriez jouer seul et terminer les autres pages. Essayez de coller une image, de travailler avec des paragraphes de texte et peut-être même de créer une grille. Veillez à sélectionner la feuille appropriée avant d'ajouter du contenu afin de ne pas continuer à ajouter à la feuille principale.
Lorsque vous avez terminé avec le site, vous disposez de deux options de base pour l'exporter. Le premier est un site de Rome. Cela télécharge votre site sur un serveur hébergé Adobe en utilisant votre Adobe ID (gratuit pour l'instant). Cependant, vous ne pouvez rien faire de cette façon, donc je préfère l'exporter vers un fichier SWF et sélectionner l'option pour créer un fichier HTML.
Cela vous donnera un site Web en direct et fonctionnel construit par vous-même sans une once de code!
Mes pensées sur Rome
Maintenant vient la partie qui vous intéresse vraiment, pouvez-vous utiliser Rome pour des projets réels? Afin de répondre à cette question, examinons les avantages et les inconvénients.
Tout d'abord, regardons le côté positif. Rome est un WYSIWYG innovant qui n'est en aucun cas parfait mais se sent assez poli et puissant. La courbe d'apprentissage est beaucoup plus petite que les applications CS et devrait certainement plaire à toute personne intimidée par cette suite. En outre, il atteint l'objectif toujours illusoire de permettre aux non-développeurs de créer un site Web fonctionnel sans une seule ligne de code.
Cependant, malgré ces avantages, je ne me vois jamais utiliser Rome dans un contexte professionnel pour des projets Web. Le plus gros obstacle pour moi est qu'il dépend tellement de Flash. Je ne vais pas me lancer dans une diatribe de dénigrement de Flash, mais c'est simplement une utilisation peu pratique de la technologie que vous l'aimiez ou la détestiez. Le site que nous venons de créer ne comportait que quelques liens et images. Il n'y a absolument aucune raison pour que les fichiers résultants soient tout sauf HTML et CSS purs. Je peux comprendre qu'Adobe souhaite intégrer le support Flash, mais ne prétendez pas que je peux créer des sites Web avec cet outil si vous n'avez même pas d'option pour une sortie Web de base.
Gardez à l'esprit que cet article ne regardait Rome que d'un point de vue Web. Il pourrait encore être idéal pour développer des documents imprimés et des PDF interactifs. En fait, c'est en fait un outil vraiment génial pour ce dernier.
Conclusion
Pour résumer, si vous êtes un parfait inconnu du développement Web et que vous devez créer vous-même un site rapide sans embaucher personne ni lire 15 livres, consultez Rome. Il est assez facile à prendre en main et à exécuter, quel que soit votre niveau d'expertise.
Cependant, si vous êtes à la recherche d'un WYSIWYG robuste et convivial qui crée réellement des sites Web de niveau professionnel, consultez notre tutoriel sur Flux 3. Si vous comprenez CSS, Flux est une application de tueur et je n'ai trouvé aucun rival digne.
Laissez un commentaire ci-dessous et dites-nous ce que vous pensez du projet Rome. Qu'est-ce qu'Adobe a bien fait dans cette expérience? Qu'ont-ils fait de mal? Nous voulons de vos nouvelles!
