Een website bouwen met Adobe Project Rome
Adobe heeft onlangs een project met de naam Rome gelanceerd dat bedoeld is als een soort alles-in-één platform voor het publiceren van inhoud. U kunt deze innovatieve applicatie gebruiken om websites te bouwen, projecten af te drukken, interactieve pdf's en meer.
Vandaag geef ik je een super eenvoudige beginnersintroductie in Rome, zodat je kunt zien wat het is, hoe je het kunt gebruiken en of het wel of niet geschikt voor je is.
Rome
In de woorden van Adobe is Project Rome "Eenvoudige, krachtige, alles-in-één contentcreatie en publicatie voor vrijwel iedereen." Als je denkt dat dit een beetje vaag is, heb je gelijk. Maar nogmaals, het hele project is een beetje raadselachtig. Is Rome de toekomst van Photoshop? Is het concurrentie voor Dreamweaver of InDesign?
Het antwoord is eigenlijk "geen van bovenstaande". Na er een beetje mee te hebben gespeeld, wordt het duidelijk dat Adobe probeert zich op een andere markt te richten dan met de Creative Suite. Hoewel CS een ongelooflijk dure set krachtige, professionele applicaties is die jaren (decennia?) Kan duren om grondig te leren, is Rome bedoeld als een gebruiksvriendelijke manier voor zowat iedereen om rijke inhoud te creëren.
Voordat we beginnen, wil je even langs de website van Rome gaan en de desktop-applicatie downloaden of de web-app starten (ik gebruik de desktop-versie).
Hoeveel kost het?
Rome is momenteel beschikbaar in een gratis preview. Adobe heeft blijkbaar hun prijsstrategie nog niet bepaald en wil graag zien hoe gebruikers reageren voordat ze verder gaan. U kunt nu een exemplaar downloaden, maar weet gewoon dat het op een dag waarschijnlijk zal worden gedeactiveerd en u een eenmalige licentie of misschien zelfs een abonnement moet kopen.
Ermee beginnen
Zodra u de applicatie hebt gedownload, moet u bij het opstarten een verticale strook knoppen op uw bureaublad laten verschijnen.
Vanaf hier kunt u door de standaardsjablonen bladeren of zelfs door een mooie galerij met door de gebruiker ingediende sjablonen, maar deze hebben al veel te bieden, dus het is beter voor leerdoeleinden om helemaal opnieuw te beginnen.
Klik op de knop "Nieuwe maken" om een vrij grote galerij met mogelijke documentformaten te openen. Ga vanaf hier naar "Blank for Screen" en selecteer iets in de map "Browser Sizes". Ik koos voor 960 × 550.
Maak kennis met Rome: The Interface
Wanneer je voor het eerst de interface van Rome bekijkt, ziet het eruit als een extreem vereenvoudigde versie van Photoshop. In plaats van een eindeloze zee van paletten, zijn er maar een paar. Er lijken er zelfs veel te weinig te zijn. Dit komt omdat Adobe lijkt te experimenteren met een aantal nieuwe ideeën die je alleen laten zien wat je moet zien als je het moet zien, in plaats van je de hele enchilada in één keer te geven.
De afbeelding hierboven laat zien hoe kaal het scherm wordt vergeleken met wat we gewend zijn in de Creative Suite. We zullen elke sectie hieronder nader bekijken terwijl we ons eenvoudige project induiken.
Lakens
De site die we gaan bouwen heeft meerdere pagina's. Rome noemt deze "Spreadsheets" en geeft ze linksboven weer met miniatuurvoorbeelden.
Het eerste dat we willen doen, is een 'Master Sheet' maken. Hierdoor kunnen we een paar basisitems instellen die op elke pagina zullen verschijnen. In plaats van items handmatig op elk vel te plaatsen, worden items in het hoofdvel automatisch overgedragen naar uw andere bladen. Dit kan in het begin verwarrend zijn omdat je vaak een element op een blad ziet dat je niet lijkt te kunnen bewerken. Dit komt omdat, hoewel het item op dat blad kan verschijnen, het een master-element is en u daarom het masterblad moet selecteren voordat u het bewerkt.
Om een stramienblad te maken, klikt u op "Toon stambladen" in het menu "Beeld". Dit zou uw bladenmenu in twee secties moeten verdelen: Spreadsheets en Master Sheets. Klik op de kleine plusknop om een paar extra gewone bladen toe te voegen. Naast de miniatuur van een blad is een klein Rome-pictogram, je ziet deze verspreid over de interface, wat aangeeft dat er hier een verborgen, contextgevoelig menu is.
Gebruik dit kleine uitklapmenu om uw bladen een naam te geven: Home, Over, Portfolio en Contact.
navigatie menu
Omdat we dit als een eenvoudige introductie van de app houden, kunnen we veel van de basisfuncties laten zien door een navigatiemenu te bouwen. Pak om te beginnen het tekstgereedschap en teken een kader. Typ vervolgens "Home" en gebruik het onderstaande menu om een lettertype te selecteren dat u bevalt.
Hier zie je die menumagie echt in actie. Er zijn hier een heleboel menu-opties, elk met een set submenu's. Wat je krijgt is veel functionaliteit zonder alle rommel. Het is zeker even wennen en het kan tijdrovend zijn, maar als je er eenmaal achter bent, is het niet zo erg. Ik hou echt van de kleine schuifregelaars die kunnen worden gebruikt om verschillende eigenschappen aan te passen, zoals de lettergrootte.
Zodra je de grootte en het lettertype hebt bedacht, ga je naar het menu "Link" en stel je de link in naar het blad "Home".
Hierdoor wordt de weergave van de link automatisch gewijzigd in blauw met onderstreping. Omdat we geen van beide willen, moeten we het oplossen. De kleur terug veranderen in zwart is gemakkelijk genoeg, maar de onderstreping was moeilijker te vinden. Deze optie is te vinden onder het menu "Meer tekenopties" hieronder.
Hover Effect
Vervolgens willen we het uiterlijk van de link wijzigen wanneer de gebruiker erover beweegt met de cursor. Dit is niet bepaald een intuïtief proces en het kostte me een paar minuten om erachter te komen.
Met je tekstvak geselecteerd, ga je naar "Evenementinstellingen" in het menu "Geavanceerd" en activeer je "Standaardevenementen".
U zou nu een optie "Evenementen" in het hoofdmenu moeten hebben. Ga vanaf hier naar "Mouse Enter" en "Property instellen". Selecteer vervolgens uw tekstobject en stel de eigenschap in op dekking. Stel tenslotte de waarde in op 50%.
Hierdoor wordt de tekst gedimd tot 50% van de oorspronkelijke dekking wanneer iemand erover zweeft. Ik had graag gewoon de kleur willen instellen, maar die optie verschijnt niet in het evenementenmenu.
Het probleem dat we nu tegenkomen is dat de tekst op Mouse Enter van kleur verandert, maar permanent zo blijft. Om dit op te lossen, moeten we een andere gebeurtenis toevoegen aan Mouse Exit die de dekking weer op 100% zet. Zie de afbeelding hieronder voor een referentie.
De Home Link dupliceren
Nu we onze eerste link hebben ingesteld zoals we dat willen, kopieer en plak deze drie keer om de About-, Portfolio- en Contact-links te maken. Vergeet niet dat je de tekst voor elke tekst moet selecteren, ga dan naar binnen en wijzig de links om naar de juiste bladen te verwijzen.
U wilt de objecten ook verticaal verdelen om ervoor te zorgen dat ze gelijkmatig verdeeld zijn. Om dit te doen, selecteert u alle tekstvakken en gaat u naar het menu Uitlijnen.
Een voorbeeld van uw werk bekijken
Om te zien of uw navigatiemenu naar behoren werkt, klikt u op de kleine monitorknop met een afspeelknop boven aan het scherm. Dit zou u een live preview van uw site in actie moeten geven.
Plaats de muisaanwijzer op de links om te controleren of ze werken en klik rond om te zien of het blad verandert.
Het Objecten-palet
Nu je een paar elementen op de pagina hebt, laten we het Objecten-palet eens bekijken. Dit komt overeen met het Lagen-palet dat u gewend bent te zien in andere apps en is in wezen slechts een interactieve lijst van alle elementen op de pagina.
Merk op dat het veel eenvoudiger is dan het palet met Photoshop-lagen. Er is geen maskering, laageffecten, etc.
Het masterblad afmaken
Omdat elke goede minimalistische site een clichécirkellogo heeft, kunnen de onze gewoon niet zonder blijven. Als u er snel een opmaakt, krijgt u een gevoel voor het vormgereedschap. Merk op dat de vormen volledig aanpasbaar zijn zonder beeldverslechtering. Rome is perfect geschikt om te werken met zowel vector- als rasterobjecten.
En daarmee zijn we klaar met ons Master Sheet. Deze elementen verschijnen op elke pagina zonder extra moeite.
De site afmaken en exporteren
Zoals ik eerder al zei, stelde de navigatie ons in staat om de meeste functies te dekken die ik wilde laten zien. We hebben links opgezet, objecten gepositioneerd en gedistribueerd en zweefeffecten gemaakt.
Vanaf hier moet je alleen spelen en de andere pagina's afmaken. Plak een afbeelding, werk met alinea's tekst en bouw misschien zelfs een raster. Zorg ervoor dat u het juiste blad selecteert voordat u inhoud toevoegt, zodat u niet blijft toevoegen aan het hoofdblad.
Wanneer u klaar bent met de site, heeft u twee basisopties om deze te exporteren. De eerste is als een Rome-site. Hiermee upload je je site naar een door Adobe gehoste server met je Adobe ID (voorlopig gratis). U kunt er op deze manier echter niets mee doen, dus ik exporteer het liever naar een SWF en selecteer de optie om een HTML-bestand te bouwen.
Dit geeft je een live, werkende website die helemaal zelf is gebouwd zonder een greintje code!
Mijn gedachten over Rome
Nu komt het deel waarin u echt geïnteresseerd bent, kunt u Rome gebruiken voor daadwerkelijke projecten? Laten we, om deze vraag te beantwoorden, naar de voor- en nadelen kijken.
Laten we eerst eens kijken naar de positieve kant. Rome is een innovatieve WYSIWYG die zeker niet perfect is, maar behoorlijk gepolijst en krachtig aanvoelt. De leercurve is veel kleiner dan de CS-apps en zou zeker iedereen moeten aanspreken die door die suite wordt geïntimideerd. Verder bereikt het het altijd ongrijpbare doel om niet-ontwikkelaars in staat te stellen daadwerkelijk een functionerende website te bouwen zonder een enkele regel code.
Ondanks deze voordelen zie ik mezelf echter nooit Rome in een professionele context gebruiken voor webprojecten. De grootste hindernis voor mij is dat het zo afhankelijk is van Flash. Ik ga geen Flash-bashing-tirade lanceren, maar dit is gewoon een onpraktisch gebruik van de technologie, of je er nu van houdt of er een hekel aan hebt. De site die we zojuist hebben gebouwd, bevatte slechts een paar links en afbeeldingen. Er is absoluut geen reden waarom de resulterende bestanden allesbehalve pure HTML en CSS zouden moeten zijn. Ik begrijp dat Adobe Flash-ondersteuning wil inbouwen, maar beweer niet dat ik websites met deze tool kan bouwen als je niet eens een optie hebt voor een standaard webuitvoer.
Houd er rekening mee dat dit artikel Rome alleen vanuit een webstandpunt heeft bekeken. Het is misschien nog steeds geweldig voor het ontwikkelen van printmaterialen en interactieve pdf's. In feite is het voor dit laatste echt een geweldige tool.
Gevolgtrekking
Samenvattend, als je een complete onbekende bent in webontwikkeling en zelf een snelle site moet bouwen zonder iemand in te huren of 15 boeken te lezen, ga dan naar Rome. Het is vrij eenvoudig om op te halen en uit te voeren, ongeacht uw expertiseniveau.
Als je echter op zoek bent naar een robuuste en gebruiksvriendelijke WYSIWYG die daadwerkelijk websites op professioneel niveau maakt, bekijk dan onze tutorial over Flux 3. Als je CSS begrijpt, is Flux een geweldige applicatie en ik heb geen waardige rivaal gevonden.
Laat hieronder een reactie achter en laat ons weten wat je van Project Rome vindt. Wat heeft Adobe goed gedaan in dit experiment? Wat hebben ze fout gedaan? We willen van je horen!
