Een pagina in Aurora is geen tekstblok waarin u afbeeldingen invoegt. Het is een raster van 48 kolommen waarop u zones plaatst en waarvan u de randen met de muis versleept. De pagina die u nu leest, is precies zo samengesteld.
Het raster van een pagina, zone voor zone
Het tabblad Inhoud van een publicatie: elke zone van het raster, haar grootte en wat ze bevat, in één oogopslag. U voegt toe, verplaatst en wijzigt het formaat zonder code te schrijven.
Het raster en zijn zonepalet
Elke zone krijgt haar breedte per schermgrootte, met de muis versleept, met een verschuiving om ruimte te laten, en ze kan uit de kolom breken om het hele scherm te overspannen. Onderaan rangschikt het palet de 45 zonetypes naar gebruik: tekst, afbeelding, publicatie, video, formulier, inhoudsopgave, stapel; het oog naast elk type opent zijn voorbeeld. De indeling wordt maar één keer geschreven en geldt voor alle talen van de website.
Het documentoverzicht: wat nog geschreven moet worden
Boven het raster somt het overzicht van een auditsjabloon de vijftien secties op en telt het voor elk de passages tussen vierkante haken die nog vervangen moeten worden. Elke tegel toont haar titel en instellingen, zoals “Verhoogd” of “Telefoon”.
Een kant-en-klare sectie invoegen
In de Bibliotheek biedt het tabblad “Secties” een tiental kant-en-klare opstellingen, op schaal van hun zones getekend: kaart en telefoon, vier kaarten in een vierkant, drie vergeleken accounts, te houden en te vermijden. De secties die u zelf hebt opgeslagen, wachten in het tabblad “Mijn secties”.
Een voorbeeld voor elke zone
Het tabblad “Zones” van de Bibliotheek toont elk van de 45 types aan het werk, door de server getekend in het thema van de website, met haar eigen afbeeldingen. “Dit voorbeeld invoegen” zet het in de pagina, met de teksten tussen vierkante haken om te vervangen.
En voor elk tekstblok
Het tabblad “Blokken” doet hetzelfde voor de achttien blokken van de editor, van de alinea tot de lijst met pictogrammen. Geopend vanuit een tekst, met de knop “Voorbeelden” of het menu van een blok, komt het voorbeeld in die tekst terecht, net na de cursor.
Het voorbeeld: de echte pagina, op telefoonbreedte
Het tabblad Voorbeeld vervangt het raster door de echte pagina, in het thema van de website, op de breedte van een computer, een tablet of een telefoon. Een klik op een zone in het voorbeeld onderstreept haar en opent haar instellingen in het paneel ernaast. Op een telefoon staan de zones onder elkaar, in de volgorde waarin ze zijn geplaatst.
Een geopende zone: haar plaats en haar uiterlijk
Een klik op een zone van het raster opent haar instellingen in het paneel ernaast, met het raster steeds in beeld: haar type, haar breedte per schermgrootte, haar verschuiving, een nieuwe regel, haar achtergrond, een afgedwongen licht of donker thema, haar accentkleur en haar verschijningseffect. Wat hier wordt ingesteld, geldt alleen voor haar. Een werkbalk staat op de zone zelf: omhoog, omlaag, dupliceren, kopiëren, opslaan voor hergebruik, verwijderen, met de mogelijkheid om het verwijderen ongedaan te maken.
Vier tabbladen: Inhoud, Indeling, Stijl, Zichtbaarheid
De instellingen van een zone zijn in vier tabbladen geordend. Indeling bepaalt waar ze komt: haar breedte op de 48 kolommen, haar verschuiving, haar verticale uitlijning, de ruimte erboven, en of ze bij het scrollen blijft staan of de volledige schermbreedte overspant.
De stijl van een zone
Het tabblad Stijl kleedt de zone aan: een achtergrond (kaart, verhoogd, tint, accent of aangepast), een afgedwongen licht of donker thema, de kleur van de hovereffecten en markeringen, en haar verschijningseffect.
Wie de zone ziet, en wanneer
Het tabblad Zichtbaarheid plant een zone tussen twee data, beperkt haar tot ingelogde leden, verbergt haar op telefoon of computer en geeft haar een ankerpunt, zodat een link er rechtstreeks naartoe leidt.
Een breed paneel om te schrijven
Bij een tekst wordt het paneel met één klik breder en neemt de editor de ruimte die hij nodig heeft; de gekozen breedte wordt onthouden voor de volgende keer. Het raster blijft ernaast, met de huidige zone gemarkeerd.
HTML schrijven in een echte code-editor
Als geen enkel blok doet wat nodig is, laat het HTML-blok de lay-out met de hand schrijven. Het wordt geschreven in een code-editor: kleuren, regelnummers, inspringen met de Tab-toets, vanzelf gesloten tags. Hier het infoblad van de volgende sessie, in drie kaarten.
Links de code, rechts de pagina
Op volledig scherm toont het blok zich zoals de website het zal tekenen, bijgewerkt tijdens het typen: dezelfde opschoning, hetzelfde thema. U bekijkt het op computer, tablet of telefoon, in lichte of donkere modus, zonder op te slaan of de pagina te openen.
Een codefragment, gekleurd in zijn taal
De zone Code toont een fragment ongewijzigd op de pagina, als geanimeerde terminal of als voor / na. Het wordt met dezelfde editor geschreven, gekleurd in de taal die u uit elf kiest, en elke taal van de website behoudt haar eigen commentaar.
Op een telefoon een blad dat omhoog schuift
Op een klein scherm wordt hetzelfde paneel een blad dat van onderaf over het raster omhoog schuift. U trekt het aan zijn handvat open, en het terug-gebaar sluit het weer.
Eén lijst, dertien weergaven
De zone Lijst bevat items (een titel, een tekst, een afbeelding, een link) en toont ze naar keuze als genummerde stappen, kerncijfers, veelgestelde vragen, getuigenissen, logo's, tijdlijn, aanbodkaarten, team, beeldverhaal, redactionele lijst, horizontale tijdlijn, kaarten met pictogram of beeldvitrine. Van weergave wisselen laat niets van wat geschreven is verloren gaan.
De 45 zonetypes en wat een zone kan
- Tekst en afbeeldingen: rijke tekst (koppen, lijsten, citaten, kaders, tabellen, gekleurde titels), een afbeelding alleen of in een computer-, telefoon- of browserkader, galerij, voor / na om te slepen.
- Media, code en grafieken: video, videomuur, audio met zijn hoofdstukken, te downloaden document, gekleurde code met regelnummers, insluiting van een externe dienst, staafdiagram, lijn, ring of voortgang.
- Publicaties en navigatie: een met de hand gekozen publicatie, of een automatische lijst die via een regel wordt gekozen en zichzelf bijwerkt; een vrije lijst, de termen van een taxonomie, een inhoudsopgave opgebouwd uit de titels, een zoekfunctie in de website.
- Om de pagina te structureren: tabbladen, een knop, een scheidingslijn (streep, ruimte, golf, diagonaal of schuine rand), een koptekst midden op de pagina, een gedeeld blok (één keer geschreven, op meerdere pagina's geplaatst, overal in één keer gecorrigeerd) en een stapel, een zone die andere zones bevat, bijvoorbeeld voor een hoge afbeelding naast twee op elkaar gestapelde zones.
- Wat de bezoeker invult: een formulier van de website, een peiling, een afspraak op tijdvakken, een offertesimulator, de opmerkingen van de pagina, de inschrijving op de nieuwsbrief en haar AVG-vermelding.
- Praktische informatie: de openingstijden en komende sluitingen, een beschikbaarheid, een aftelklok, een visitekaartje dat in de contacten wordt opgeslagen, een adres met routebeschrijving, een kaart met tarieven, een QR-code.
- Netwerken en integraties: een publicatie in de stijl van een sociaal netwerk, de Instagram-feed, de Google-beoordelingen, de GitHub-activiteit, de laatste activiteit van de website, een reiskaart etappe voor etappe, een publicatiekalender, een presentatie.
- Een zone kan een band worden die langzamer scrolt dan de pagina, of op haar plaats blijven terwijl haar buurvrouw scrolt.
- Een achtergrond (kaart, getint, accentkleur, of een gekozen kleur, kleurverloop of afbeelding), een eigen contrast, haar accentkleur en die van haar hovereffecten, boven die van de pagina.
- Een verschijning bij het scrollen: infaden, glijden van onderaf of van een zijkant, zoom of vervaging.
- Alleen tussen twee data getoond worden, of alleen voor ingelogde leden, en een ankerpunt zodat een link er rechtstreeks naartoe leidt.