Uitgelicht

Custom CSS opdracht

Deze opdracht is ook onderdeel van je examen, want daar maak je een Brandbook ofwel Huisstijlboek. Om dit te oefenen maak je nu een analyse van een artikel in een door jou gekozen medium. Je beschrijft de grafische stijl in een Bericht op je website, zie hieronder. Lever deze analyse in als url, in Teams.
Lees verder “Custom CSS opdracht”

WordPress 5.0: Gutenberg Editor en nieuw thema: Twenty Nineteen

Alle websites op ROCweb zijn bijgewerkt naar WordPress 5.0. Dit is de grootste update van de laatste jaren. De editor is compleet vernieuwd en heet nu de Gutenberg Editor. Deze editor waar je Pagina’s en Berichten aanmaakt ziet en nu veel moderner uit. Maar ook totaal anders. 

Als je nieuw bent in WordPress kan je misschien beter meteen beginnen met deze nieuwe editor omdat dit de toekomst is. Maar als je gewend bent aan de Classic Editor is het wel erg wennen, en kan je ook de Classic editor als plugin blijven gebruiken. Een aantal dingen zijn namelijk toch wel slechter en omslachtiger dan in de klassieke editor.

Natuurlijk is er ook weer een nieuw standaard thema: Twenty Nineteen.

https://wordpress.org/gutenberg/

Presenteer 3 websites

Zoek drie goede mooie websites. Je moet je voorstellen dat dit je eigen website is, met onder andere je portfolio. Dus het ontwerp moet voor jou helemaal goed zijn.

Maak een presentatie op staand A4 in Indesign. Van elke website maak je vier screenshots (⌘ Shift 4). Zet de plaatjes in het document, verdeel het over 6 pagina’s. De werking van de website moet zo duidelijk worden, en er moet ook wat beschrijvende tekst bij.

Kijk hier voor Indesign Tips

Als het klaar is maak je een PDF (⌘-E). Daarna zet je alles (beeld + INDD + PDF) in een map, en die zet je op je OneDrive  op portaalvoortalent.

 

Affinity Publisher cursus

Indesign was marktleider op het gebied van DTP-software, maar het zou binnenkort wel eens vervangen kunnen worden door Affinity Publisher.

In grote lijnen kun je van alles spelenderwijs wel vinden. De Beta-versie is gratis en kun je hier downloaden. Hieronder de basistips. Daarmee kom je al een heel eind. Google altijd direct alles wat je niet weet of waar je uitleg over wil. Hier staan tutorials. Zie ook de blog over Affinity Publisher op aartjan.nl.

Algemene tips

  • Voor tekst kan je eerst een vakje trekken met de tweede Text-tool (2 x T). Klik vervolgens in het kader om de tekst te bewerken, en tik Escape om het kader te bewerken. Pak je de eerste Text-tool (1 x T) dan is er geen kader.
  • Automatische tekstinloop: Shift-klik op het overflow-icoon rechtsonder in je tekstkader. Nieuwe pagina’s worden nu aangemaakt met identieke kaders zodat alle tekst geplaatst wordt.
  • Plaatjes: pak je het foto-kader (Place Image Tool) dan is het kader altijd in de afmeting van de foto, en de foto schaalt altijd mee bij aanpassen. Pak je het andere kader (Picture Frame Tool) dan wordt de foto altijd uitgesneden, vullend in het kader. Als je het ziet snap je het meteen. Dit kader kun je dubbelklikken om de inhoud te verplaatsen, te schalen of te draaien, los van het kader.
  • Een plaatje kan je ook Groeperen (⌘-G) om het daarna nog te schalen met Shift
  • Deselecteer door buiten objecten te klikken, of Escape, of ⌘D.
  • Plaatjes kun je vanuit de Finder in je document slepen, bij voorkeur direct in een kader. Of kies File > Place.
  • Kaders kun je schalen door hendels te verslepen. Bij tekstkaders zie je rechtsonder een tweede hendel: de inhoud schaalt dan mee. Met Shift kan ook, dan gaat het uit verhouding.
  • In de balk bovenaan vind je alle opties van het geselecteerde item. Wijzig die door op een getal te staan en pijltjes-toetsen te gebruiken, en dan Enter.
  • In die balk voor tekst zijn er aan de rechterkant 3 knoppen: Character, Paragraph en Typography.

Tik ctrl-w voor een Preview zonder hulplijnen.

  • Kaders die onder andere kaders staan kun je met ⌘-Shift-klik selecteren
  • Gebruik veel Rechts-klik voor allerlei opties (twee-vinger-klik / Ctrl-klik)
  • Gebruik de Tooltips (hover over een tool voor uitleg).
  • Klik uitklap-ikonen in paletten voor extra opties.
  • Effecten zoals Text-shadow kan via Rechtsklik > Layer Effects
  • Je kan tekenen zoals in Illustrator, met bezier curves. Gebruik dan de Pen Tool, en wijzig met de Witte pijl. Kies Rechtsklik > Geometry voor Add en Subtract en zo (Pathfinder).
  • Tekstkaders aan elkaar linken: met het witte driehoekje rechtsonder elk kader. Klik dat en je cursor is geladen met de rest van de tekst. Sleep dan een nieuw kader. Naast het driehoekje is er een oogje, waarmee je tekstoverloop kan verbergen.
  • Met het Lagen-palet kun je lagen maken, verschuiven, op slot zetten, en verbergen.
  • Tekstomloop (tekst komt automatisch om kader of plaatje heen) kan met de knoppen bovenaan.
  • éúíó: een accent op een letter is Alt-e en dan die letter
    üïëä: een trema is Alt-u en dan een letter
    Speciale tekens zie je verder ook bij Text > Show Glyph browser

Meteen maar doen:

  • Breek de Tools los voor een dubbele rij, dan zie je de Fill-kleur beter.
    Maximaliseer het venster met de Groene Knop. Met Tab kan je de UI uitzetten (behalve als je in Tekst zit, dan is het een Tab)
  • Zet bij meerdere pagina’s het Pagina-palet los linksonder
  • Loop door de Voorkeuren ,
  • Zet de Snapping Manager aan. Alle opties kunnen daar aan, behalve Show Snapping Candidates: die kan uit.

    Leuke oefening: zet de Snapping Manager aan. Plaats 3 kaders, maak ze exact even groot, ook de tussenruimte. Supersimpel! Plaats er 3 afbeeldingen in (drag & drop). Selecteer de kaders en resize.

Belangrijke dingen

  • Plaatjes staan NIET in het document! Die moet je altijd apart bewaren.
  • Afbreken: Zet de taal goed. Breek nooit af met afbreekstreepje of Enter, maar altijd automatisch (via Stijlen) of met Cmd-Shift-afbreekstreepje. Kan ook vóór het woord, om níet af te breken.
  • Gebruik altijd Stijlen voor koppen, subkoppen en allerlei andere stijlen. Die kun je namelijk later wijzigen / exporteren, en het werkt sneller en minder foutgevoelig.
  • Bij meerdere pagina’s gebruik je Stramienen: Master Pages. Die zie je staan in het Pagina-palet, boven de gewone pagina’s . Repeterende elementen zoals paginacijfer en headers en footers zet je op dit stramien.
  • Voor drukwerk exporteer je naar PDF. Kies een preset Drukwerkkwaliteit en zet snijlijnen en afloop AAN, maak daar eventueel een eigen nieuwe Preset van.
  • Zet bodytekst altijd op Basislijnstramien – Stel de Threshold in in op bijv 120%, en geef het als kleur Grid Orange.
  • Voor drukwerk moet je de afloop (bleed) rondom op 3 mm extra zetten. Aflopende foto’s en vlakken moeten ook altijd op die extra 3 mm staan.
  • Check voor drukwerk de resolutie van beeld. De Effective PPI moet minstens 240 zijn (voor online 72 ppi)

Nog wat tips

Maak zelf een shortcut voor Plaats Afbeelding: In de voorkeuren kies je ⌘ Shift D bij File > Place. ⌘D is Deselect: moet je zo houden.

Tekst importeren: Word en RTF kun je knippen-en-plakken. Stijl en opmaak bijft behouden.

Bij Voorkeuren > Tools kun je Select when intersect […] beter aanzetten.

Maskers: Klik de Triangle Tool voor allerlei vormen zoals een hartje. Via Layers > Convert to Picture frame kun je in elke vorm een plaatje plaatsen, als masker dus. Dubbelklik het plaatje voor opties.

Inmiddels al opgelost:

  • De “bleed” ofwel afloop is er (File > Document setup > bleed)
  • MET of ZONDER bleed heet View > Clip to Canvas  en er is ook View > bleed
  • Het kettinkje ontbrak bijna overal, om de vier getallen te koppelen voor Top Right Bottom Left.
  • maskers
  • Een gecropt plaatje kun je schalen inclusief inhoud als je eerst groepeert (⌘-G)
  • Automatisch Tekst-kaders aanmaken: Shift-klik op het overflow-icoon rechtsonder in je tekstkader. Nieuwe pagina’s worden nu aangemaakt met identieke kaders.
  • Nederlandse spelling is er nu ook, bij Character > Language. Afbreking NL nog niet. Engels, Duits, Frans, Spaans, Italiaans en Portugees wel. Handmatig afbreken kan ook, de gewone sneltoets ⌘Shift- kan je zelf instellen.

Update WordPress 4.9: HTML widget

In WordPress 4.9 is er veel onderhuids nieuw, maar ook vooral iets nieuws in de widgets. Er zijn nieuwe widgets bijgekomen, en die zijn allemaal handig. Je ziet ze vanzelf wel staan bij Weergave > Widgets. De belangrijkste is de HTML Widget. Voorheen kon dat alleen met de Tekst Widget. In de nieuwe HTML widget zit een HTML-editor, compleet met automatisch sluiten en aanvullen van tags, en met handige kleurcodering.

Je kan nu dus je eigen custom widgets maken, als je maar een beetje HTML kan!

Vanaf nu beschikbaar