Adobe a récemment lancé un projet intitulé Rome, destiné à être 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, etc.
Aujourd'hui, je vais vous présenter une introduction à Rome pour débutants super basiques afin que vous puissiez voir ce que c'est, comment l'utiliser et si c'est fait pour vous.
Rome
Selon les propres mots d’Adobe, le Projet Rome est «une création de contenu simple, puissant et tout-en-un et une publication pour presque tout le monde». 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? Est-ce une concurrence pour Dreamweaver ou InDesign?
La réponse est vraiment? Aucune de ce qui précède. 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 professionnelles puissantes dont l’apprentissage en profondeur peut prendre des années (voire des décennies?), Rome se veut un moyen convivial de créer des contenus riches pour pratiquement tout le monde.
Avant de commencer, vous devrez 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. Apparemment, Adobe n'a pas encore décidé de sa stratégie de tarification et souhaite voir la réaction des utilisateurs avant de continuer. Vous pouvez télécharger une copie maintenant, mais sachez qu'un jour, il sera probablement désactivé et vous obligera à acheter une licence unique ou peut-être même un abonnement.
Commencer
Une fois l'application téléchargée, lancez-la. Une bande verticale de boutons apparaîtra sur votre bureau.
À partir de là, vous pouvez parcourir les modèles par défaut ou même une belle galerie de modèles soumis par l'utilisateur, mais ceux-ci ont déjà beaucoup à faire et il est donc préférable de commencer à partir de zéro pour l'apprentissage.
Cliquez sur le bouton? Créer nouveau? bouton pour ouvrir une galerie assez grande de tailles de document possibles. De là, allez à? Blank for Screen? et sélectionnez quelque chose dans la? Taille du navigateur? dossier. J'ai choisi 960? 550.
Rencontrez Rome: l'interface
Lorsque vous consultez pour la première fois l'interface de Rome, elle ressemble à une version extrêmement simplifiée de Photoshop. Plutôt qu'une mer infinie de palettes, il n'y a qu'un couple. En fait, il pourrait sembler qu'il y en ait beaucoup trop peu. En effet, Adobe semble expérimenter de nouvelles idées qui ne vous montrent que ce que vous devez voir quand vous en avez besoin, au lieu de vous donner l’ensemble de l’enchilada en même temps.
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 au fur et à mesure de notre projet simple.
Feuilles
Le site que nous allons construire aura plusieurs pages. Rome se réfère à ceux-ci comme? Feuilles? et les affiche en haut à gauche avec des aperçus miniatures.
La première chose à 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 maîtresse seront automatiquement transférés sur 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 principal et vous oblige donc à sélectionner la feuille maîtresse avant de la modifier.
Pour créer une feuille maîtresse, cliquez sur? Afficher les feuilles maîtresses? dans la? vue? menu. Cela devrait séparer votre menu de feuilles en deux sections: les feuilles et les feuilles maîtres. Cliquez sur le petit bouton plus pour ajouter quelques feuilles régulières supplémentaires. À côté de la vignette d'une feuille se trouve une petite icône de Rome. Ces icônes sont dispersées dans l'interface, indiquant qu'il existe ici un menu masqué et contextuel.
Utilisez ce petit menu déroulant pour nommer vos feuilles: Accueil, À propos, Portfolio et Contact.
le menu de navigation
Puisque nous conservons cela comme une simple introduction à l'application, nous pouvons montrer de nombreuses fonctionnalités de base en construisant un menu de navigation. Pour commencer, prenez l'outil texte et dessinez une boîte. Puis tapez? Home? et utilisez le menu ci-dessous pour sélectionner la police de caractères que vous aimez.
Ici, vous voyez vraiment ce menu magique en action. Il y a une tonne d'options de menu ici, chacune avec un ensemble de sous-menus. Ce que vous obtenez est beaucoup de fonctionnalités sans tout l'encombrement. Il faut certainement s’y habituer et prendre beaucoup de temps, mais une fois que vous avez compris, ce n’est pas si grave. J'aime beaucoup les petits curseurs qui peuvent être utilisés pour ajuster diverses propriétés telles que la taille de la police.
Une fois que vous avez déterminé la taille et la police, allez au? Lien? menu et définissez le lien vers la page d'accueil? drap.
Cela changera automatiquement l'apparence du lien en bleu avec un soulignement. Puisque nous ne voulons ni l’un ni l’autre, nous devrons régler le problème. Changer la couleur en noir est assez facile mais le soulignement était plus difficile à trouver. Cette option se trouve sous? Plus d'options de personnage? menu ci-dessous.
Effet de survol
Ensuite, nous souhaitons modifier l'apparence du lien lorsque l'utilisateur le 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 à? Paramètres de l'événement? dans le? Avancé? menu et activer? Événements standard.?
Vous devriez maintenant avoir un? Événements? option dans le menu principal. De là, allez à? Mouse Enter? et? Set Property.? 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é initiale lorsque quelqu'un le survolera.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 en permanence. Pour résoudre ce problème, nous devons ajouter un autre événement sur Mouse Exit qui ramène l'opacité à 100%. Voir l'image ci-dessous pour une référence.
Dupliquer le lien d'accueil
Maintenant que nous avons configuré notre premier lien exactement 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 accéder et modifier les liens pour qu'ils pointent vers les feuilles appropriées.
Vous voudrez également répartir les objets verticalement pour vous assurer qu'ils sont espacés de manière égale. 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 situé en haut de l'écran. Cela devrait vous donner un aperçu en direct de votre site en action.
Survolez les liens pour vous assurer qu'ils fonctionnent et cliquez autour de vous pour voir si la feuille est en train de changer.
La palette d'objets
Maintenant que vous avez quelques éléments sur la page, examinons la palette Objets. Cela équivaut à la palette Calques que vous aviez l'habitude de voir dans d'autres applications. Il s'agit essentiellement d'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, effets de calque, etc.
Finition de la feuille maîtresse
Puisque chaque bon site minimaliste a un logo de cliché, le nôtre ne peut tout simplement pas en rester. En vous moquant rapidement, vous aurez une idée de l'outil de forme. Notez que les formes sont complètement redimensionnables sans dégradation de l'image. Rome est parfaitement adapté au travail avec des objets vectoriels et matriciels.
Et avec cela, nous avons fini avec notre feuille maîtresse. Ces éléments apparaîtront sur chaque page sans aucun effort supplémentaire.
Finition 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.
À partir de là, vous devriez jouer seul et finir les autres pages. Essayez de coller dans une image, de travailler avec des paragraphes de texte et peut-être même de construire une grille. Assurez-vous de sélectionner la feuille appropriée avant d'ajouter du contenu afin d'éviter de continuer à l'ajouter à la feuille maîtresse.
Lorsque vous avez terminé avec le site, vous avez deux options de base pour l'exporter. Le premier est en tant que site de Rome. Cela télécharge votre site sur un serveur hébergé par Adobe à l'aide de votre identifiant Adobe (gratuit pour l'instant). Cependant, vous ne pouvez rien faire de cette façon, je préfère donc l'exporter au format SWF et sélectionner l'option permettant de créer un fichier HTML.
Cela vous donnera un site web fonctionnel en direct, construit par vous-même sans une once de code!
Mes pensées sur Rome
Vient maintenant la partie qui vous intéresse le plus, pouvez-vous utiliser Rome pour des projets concrets? Afin de répondre à cette question, examinons le pour et le contre.
D'abord, regardons le côté positif. Rome est un WYSIWYG innovant qui n’est en aucun cas parfait, mais qui se sent assez raffiné et puissant. La courbe d'apprentissage est beaucoup plus petite que les applications CS et devrait certainement intéresser toute personne intimidée par cette suite. En outre, il atteint l'objectif toujours illusoire de permettre aux non-développeurs de créer réellement un site Web fonctionnel sans une seule ligne de code.
Cependant, malgré ces avantages, je ne me verrai jamais utiliser Rome dans un contexte professionnel pour des projets Web. Le plus gros obstacle pour moi, c’est que cela dépend tellement de Flash. Je ne vais pas me lancer dans une impasse éclaircissante, mais c'est simplement une utilisation peu pratique de la technologie, que vous l'aimiez ou que vous le détestiez. Le site que nous venons de construire ne comportait que quelques liens et images. Il n'y a absolument aucune raison pour que les fichiers résultants soient autre chose que du HTML pur et du CSS. Je comprends que Adobe veuille construire 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 l'option de produire une sortie Web de base.
Gardez à l'esprit que cet article ne portait que sur Rome du point de vue du Web. Cela pourrait quand même être intéressant pour le développement de documents imprimés et de PDF interactifs. En fait, c’est un outil vraiment formidable pour ce dernier.
Conclusion
Pour résumer, si vous êtes totalement étranger au développement Web et que vous avez besoin de créer un site rapide vous-même, sans embaucher qui que ce soit ni lire 15 livres, consultez Rome. Quel que soit votre niveau d’expertise, il est assez facile à prendre en main et à utiliser.
Toutefois, si vous recherchez un WYSIWYG robuste et convivial créant des sites Web de niveau professionnel, consultez notre tutoriel sur Flux 3. Si vous comprenez CSS, Flux est une application qui tue et je n'ai trouvé aucun rival digne de ce nom.
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!