WordPress:
Personlig portfolio

Overordnet om forløbet

Formålet med dette forløb, er at introducere eleverne til at skabe og formidle komplekst indhold og funktionalitet på nettet. Gennem en trinvis progression bliver de ledt gennem en række opgaver med CMS systemet WordPress, hvor de skal opbygge og reflektere over mulighederne, for at skabe en digital portfolio over en del af deres personlige faglige univers.

Indholdet i forløbet spænder over en bred vifte af kernefaglige områder: lay-out, skrifttyper, farvevalg, framing, stilvalg, online brug af billeder, multimedier og video etc. Men parallelt med de håndværksmæssige kompetencer, ligger der også et læringsmål om at eleverne bliver i stand til at forme en digital identitet, finde et udtryk som er personligt og har integritet, i forhold til de målgrupper som produktet har eller kan tænkes at få.

Metoden bygger på principper om “worked examples” – med WordPress som standardredskab og skabelon, er progressionen i forløbet opbygget som mindre øvelser, hvor eleverne gradvis tilegner sig platformen og dernæst søger at skabe et mere personligt udtryk.

Materiale

Evaluering: Eftersom forløbet efterhånden giver elevernes sider mere og mere personlige udtryk, og eftersom hele produktionen ligger online fra begyndelsen, er det oplagt at bruge den fordsætning i forløbets løbende formative såvel som summative evaluering. Summativt kan det i sær være, når elever producerer særligt flotte eksempler på udnyttelse af systemet eller løsninger på opgaver. Formativt kan produktionerne inddrages løbende som eksempler på rettesnore, faglige valg ift fx lay-out, funktionalitet eller farver.

En mulighed kunne være at lade eleverne bogmærke hele klassens sider, så de ikke bare følger med i deres egen produktion og evt sidemandens, men hele klassens.

Det er også muligt at inddrage systemets indbyggede redskaber til feedback/kommentarer/spørgeundersøgelser – og her kunne man godt give klassen nogle opgaver ift hinandens indlæg. Fx kommentér på mindst tre indlæg hos [x], besvar spørgeskemaer på …

Inspiration til evalueringsformer her 

_ _ _ _

Noter/todo til forløb.

Der skal installeres det samme tema, så alle kan følge med i hvad der foregår. Vi anvender derfor temaet ProtoPress.

Kunsten bliver at lave WP til et worked example med tilsvarende opgaver – og at få de endelige sites til faktisk at være personlige. Men først er det nødvendigt at se på den grundlæggende arkitektur og opbygning af WordPress. Det kræver at man skræller noget af funktionaliteten fra, og begynder forfra med sit eget indhold og sin egen forståelse.

Sekvensering

Lektion: forberedende øvelser

Formålet med lektionen er at starte med eleven selv, frem for systemet. Idéen med at lære CMS systemet at kende er ikke at få en masse funktioner og design trukket ned over hovedet. Men det er ofte det der sker, hvis man ikke begynder med at danne sig en slags ramme for hvad man har tænkt sig at udtrykke.

Første lektion holdes derfor på papir – ikke nogen computerskærm, bare nogle skitseøvelser af hvad man har tænkt sig.

  • Find to-tre ord som karakteriserer dig selv og dine (faglige) interesser
  • Skriv en kort tekst om dig selv. Den skal være saglig, introducerende og imødekommende. Behøver kun at være 3-5 linjer, men de skal sige noget om dig
  • Find et billede frem af dig selv – eller et billede som du vil bruge som profilbillede, men som ikke forestiller dig. Billedet skal være rektangulært, fylde under 300kb, og være min 800x800px;
  • Lav en simpel idé til et favicon til dit site: det lille billede der sidder i toppen af fanebladet
  • Brug to minutter på at skrive en liste over ting der som minimum skal præsenteres på siden. Det skal være faglige ting i første omgang. Ikke dine katte, dine komm-it relevante projekter. Det behøver ikke være noget du har lavet i skolen, men det skal være noget som relaterer sig fagligt.

Lektion: grundlæggende opsætning

  • Installer WordPress – brug dit navn som sidens titel og de to-tre ord du fandt på, som tagline.
  • Installer temaet ProtoPress
  • Slet alle eksisterende sider og indlæg
  • Menuen udseende – tilpas. Find Widgets og slet alt sammen.

Tillykke – du har nu en tom wordpress skabelon, hvilket er meget bedre end en med en masse crap i. Du skal nu i gang med at skrive dit første indhold.

  • Gå ind under sider/tilføj – kald siden for forside
  • Sæt den tekst ind du skrev om dig selv – så dit site har en præsentation på forsiden. Der skal udelukkende være tekst på denne side – du kan altid tilføje mere senere, men ikke nu
  • Opret en ny side du kalder for portfolio. Skriv en meget kort linje på siden, der foreløbig fortæller, at her kan man se eksempler på projekter og faglige opgaver du kaster dig ud i.
  • Gå nu ind under udseende/tilpas
    • Du ser nu på den menu, hvor du sætter alle visuelle indstillinger for dit WordPress site. Det første vi vil gøre, er at sørge for at forsiden vises først – og portfolioen med dine indlæg på en anden side. Igen: du kan altid lave det om senere, men vi starter med at gøre sitet så overskueligt som muligt.
    • Gå ind under statisk forside – sæt forsiden til siden Forside og indlægssiden til siden Portfolio
    • Gå ind under “Title, tagline & Logo” og upload et favicon (512x512px 8bit webcolors)
    • Gå ind under “Google Web Fonts” og sæt både Title og Body til Open Sans
    • Gå ind under “Social Icons” og link til de sociale profiler du vil vise fra dit site

Du har nu et meget simpelt, men anvendeligt WordPress site – en forside hvor du beskriver dig selv, samt en side ved navn portfolio, hvor dine indlæg kommer til at ligge.

Menuer

Nåja.. Der er lige en ting til: menuer. De kan være ret besværlige i WordPress og ikke altid lige nemme at forstå. Derfor kan du lige så godt lære hvordan du selv tager kontrol med det samme.

  • Gå først ind under udseende – menuer og opret en ny menu. Kald den Hovedmenu.
  • Klik på dine to sider (forside og portfolio) i venstre side, og tilføj dem til menuen.
  • Vælg menuens område:  Primary
  • Gem

Du har nu en menu, der vises to steder – og det er jo irriterende. Bemærk at der under Udseende/Tilpas ligger et menupunkt der hedder “Ekstra CSS”. Kan du finde ud af at fjerne top-baren på siden helt, så du kun har en menu? Så er du i gang med at tage kontrollen tilbage fra WordPress og skabe dit eget site.


Afslutningsvis downloades Cyberduck, og de projekter der skal bruges til at lave indlæg med i følgende lektion, findes frem.

Lektion: Indlæg, kategorier og tags

Forberedelse: Du skal nu bruge tre projekter fra din gymnasiekarriere i faget, som du vil lægge ud på din portfolio. Hav følgende klar:

  1. Tandlægekampagne: Beskrivelse (gerne hel rapport), billede (800×600) samt evt video (link til youtube)
  2. Podcast: Beskrivelse (gerne rapport), billede (800×600) samt lydfil (max 2mb)
  3. Logo-redesign: Beskrivelse inkl overvejelser, billede (800×600)
  4. Websider fra bunden (jQuery Quiz)
  • Vælg indlæg/tilføj nyt
  • Skriv titlen – fx Kampagne til tandlægeforeningen
    • I tekstfeltet kan du gøre to ting. Enten kan du skrive en kort tekst, eller præsentere noget fra rapporten og vedhæfte rapporten som fil. Ellers kan du pase hele indholdet fra rapporten ind i wordpress – men så skal du huske at rette overskrifter mv til. Faktisk – eftersom dette er første gang – skal du vælge den første mulighed. På den måde får du også lige gode vaner med, ift at skrive længere tekster på nettet: overskriftniveauer skal være i orden
    •  I feltet “udvalgt billede” uploader du dit billede
    • Hvis du har et link til en film, skal du gøre følgende: I øverste højre hjørne af tekstfeltet i WP kan du vælge mellem visuel og tekst. Når du klikker på tekst, kommer du ind bagi, dvs du kan nu skrive html selv. Få iFrame koden kopieret til din på den måde. Du kan også vælge “indsæt medie” og skrive et link direkte til youtube der.

Kategorier

  • Gå nu ned til feltet Kategorier. Kategorier er megavigtige for at få WordPress til at fungere optimalt.
  • Du skal oprette en kategori – dvs en så unik betegnelse for dette indlæg, men også andre mulige indlæg. Lad os starte med at kalde kategorien Kampagner
  • Gem indlægget.
    • Gå nu tilbage og kig på dit website. Under portfolio er det første indlæg dukket op.

Vi skal lave et par indlæg til, før vi kan begynde at se på hvordan de bliver præsenteret mv. Gå derfor i gang indtil der er minimum 3 forskellige indlæg med forskellige kategorier på sitet.

Så skal vi også sørge for at kategorier vises som oversigt på din portfolio – gå ind under udseende/widgets og smid kategorier over i sidebaren. Gå derefter ind under udseende/tilpas og sørg for at sidebaren vises alle andre steder end på forsiden.

Fjern/rediger featured image

Og så en lille ting jeg i hvert fald synes er irriterende: man hænger på sit featured image, som er pænt i oversigten men irriterende i selve indlæggene. Se om du kan skrive den CSS der skal til for at fjerne feature images/gøre dem mindre eller lignende. Men kun på blog indlæg!

Lektion: Farver og typografi

Der er nogle fænomener om farvelære du skal kende, før vi giver os i kast med at vælge farver til siden. Gå ind på indlægget farver og læs om dem.

Du skal nu – alene ved hjælp af forsiden som kun indeholder tekst, lave nogle farver på dit site. Gå ind under Ekstra CSS og tilføj linjerne her:

#top-bar{
background-color:lightgray;
}

#site-navigation{
background-color:lightgray;
}

#colophon{
background-color:lightgray;
}

Nu er det virkelig gråt – og det er også meningen. Du skal nemlig selv finde frem til de centrale farver på dit site – og der skal være tre. Men du kan begynde med at vælge den første. Det kan gøres på mange måder, men problemet med farvevalg er, at det skal ses i kontekst. Vi kunne implementere et script, som gjorde muligt for os at se tilfældige farver på siden:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("h1").click(function(){
    var randomColor = "rgb(" + Math.floor((Math.random() * 255) + 1) + "," + Math.floor((Math.random() * 255) + 1) + "," + Math.floor((Math.random() * 255) + 1) + ")";
    console.log(randomColor);
    $("#site-navigation, #top-bar, #colophon").css("background-color", randomColor);
  });
});
</script>

Hent plugin’et “SOGO Add Script Header Footer” og past koden ovenfor ind på forsiden. Når du nu klikker på en overskrift – for eksempel sidens titel – skifter bjælkerne farve.

Løs nu følgende opgave:

  1. Opret et nyt indlæg, som du kalder WordPress Designvalg eller lignende
  2. Lav et afsnit som hedder “farver” i indlægget
  3. Vælg – enten ved at klikke på siden (eller ved at vælge din yndlingsfarve, finde en farve et andet sted etc) – en hovedfarve til din side
  4. Brug for eksempel Googles farveværktøj eller Adobes farveværktøj   til at lave en farveskala til din side – og implementér den i CSS.
  5. Argumenter for hvilken farveteknik din side er opbygget af og præsenter farveskalaen

Lektion: Feedback, spørgeskemaer, kommentarer og kontaktinfo

Formålet med denne lektion er, at give eleverne nogle konkrete redskaber til at indsamle kvantitativ feedback på deres komm/it produkter. Samtidig lærer de noget om webintegration, hvordan forskellige produktplatforme kan integreres i online interfaces.

Indholdet spænder over kernefaglige områder forbundet med produktion, it, evaluering og metode

  • Produktion
    • forskellige distributionssystemer, deres opbygning, tekniske komponenter og muligheder
  • It
    • it-værktøjer til fremstilling og programmering af interaktive systemer
  • Evaluering
    • anvende udvalgte metoder til vurdering af egne kommunikationsprodukter og give forslag til optimering af produkt og proces
  • Metode
    • kvantitative og kvalitative analysemetoder

Metode. I denne lektion skal eleverne gerne nå både at a) afprøve et evalueringsskema som er implementeret med den metode de skal lære b) at oprette et eget spørgeskema og integrere det med deres online portfolio, og c) at besvare et eller flere af hinandens spørgeskemaer. Det er altså en forholdsvis stramt sekvenseret time, som har fokus på brug af en række konkrete redskaber.

Materiale

Lektionen anvender elevernes CMS sider som er under udvikling, samt et andet online redskab til at opbygge mindre spørgeundersøgelser.

Evalueringen foregår dels ved at læreren kan gå direkte ind og se og kommentere på elevernes arbejde efterfølgende – ved at besøge de udvalgte sider samt besvare de spørgeskemaer der oprettes. Der er altså tale om en “dobbelt” evaluering, da eleverne 1) med dette redskab fremover kan give hinanden feedback på deres arbejde 2) eksponerer et evalueringsrum for læreren, hvor der kan kommenteres direkte på selve metoden samt tidligere produktioner

Sekvensering

Rammesætning: 5min

Husk at forholde til faglige mål: anvende udvalgte metoder til vurdering af egne kommunikationsprodukter og give forslag til optimering af produkt og proces

Eleverne informeres om timens opdeling i tre/fire sekvenser:

  1. besvarelse af lærerens evalueringsskema fra sidste lektion om farver
  2. udvælgelse af et eget produkt fra tidligere (på portfolio), som de vil have feedback på
  3. integration i WordPress
  4. hvis det kan nås: besvarelse af de andres skemaer, evt næste gang

Evalueringsskema: 5min

Eleverne går ind direkte på dette indlæg og besvarer evalueringsskemaet her:

Udvælgelse af produkt og oprettelse af spørgeskema

Vælg et produkt fra din portfolio, som du vil indsamle feedback på. Brug fem minutter på at skrive minimum tre spørgsmål ned, som du vil have svar på fra andre. Husk at spørgsmål skal være:

  1. Utvetydige (spørg om testpersonen synes videoen var morsom – ikke om den var morsom og lærerig)
  2. Kvantificerbare (spørg hvor morsom den var på en skala, hvor man fx kan vælge mellem “meget, lidt, slet ikke”)
  3. Værdifulde for dig (lad være med at spørge om testpersonens alder, hvis den er irrelevant)
  4. Interessante at krydse (spørg om testpersonens alder, hvis den er relevant)

Opret spørgeskemaet i Google Forms. Husk at skrive en kort indledning, hvor du fortæller om skemaet er anonymt og hvad det bliver brugt til. Tag stilling til om spørgsmål skal være påkrævede mv. Klik “Send” og derefter <> (embed) og kopier koden ind i dit wordpress indlæg,  direkte under indlægget.

Afrunding

Husk at forholde til faglige mål: anvende udvalgte metoder til vurdering af egne kommunikationsprodukter og give forslag til optimering af produkt og proces

Afprøvning/udfyldelse

Hvis der er tid tilbage, skal eleverne udfylde spørgeskemaer hos hinanden.

Brug linket her til at poste et link til jeres spørgeskema :kortlink.dk/padlet/t7ys

Flere opgaver

  • Gå ind under indstillinger/diskussioner og undersøg mulighederne – hvad betyder de forskellige indstillinger?
  • Gå ind på site [x] og skriv mindst tre seriøse kommentarer til indlæg
  • Gå ind på site [x] og udfyld spørgeskemaet..

Lektion: lay-out, opsætning og ekstra CSS

Lektion: peer feedback og afrunding

Formålet med denne lektion er, at eleverne kommer mere i dybden med at se deres portfolio som en række kommunikations- og designvalg. At de får repeteret og anvendt nogle af de principper for godt design og brugervenlighed som er blevet gennemgået i de forrige lektioner. Samtidig bliver eleverne mod slutningen af lektionen kastet ud i nogle resultatorienterede udfordringer, hvor de selv skal løse et problem vha deres viden om CMS systemets potentiale. Her gælder det mere fremadrettet at sætte eleverne ind i en tankegang omkring deres personlige blog som en svejtserkniv de kan bruge til at løse mange forskellige digitale kommunikationsopgaver.

Indholdet dækker både over evaluering (peer feedback), form og farvevalg samt viden om digitale distributionssystemer:

  • anvende udvalgte metoder til vurdering af egne kommunikationsprodukter og give forslag til optimering af produkt og proces
    – kunne generalisere erfaring med henblik på at forbedre egen praksis
    – formidle og dokumentere såvel produktionen som de tekniske og kommunikationsmæssige overvejelser i arbejdsprocessen.
  • grafisk formsprog og farvelære, til såvel papir som digital kommunikation, og betydningen heraf for en praktisk kommunikations gennemførelse, herunder forskellige principper og teorier for designs virkning og funktion
    – brugervenlighed og funktionalitet
  • – forskellige distributionssystemer, deres opbygning, tekniske komponenter og muligheder.

Metoden er opbygget som en række makkerøvelser, hvor eleverne selvstændigt skal finde frem til faglige begreber eller løse andre opgaver med udgangspunkt i deres online blogs. Løsninger præsenteres og diskuteres derefter i plenum.

Materialet er en blanding af indlæg om brugervenlighed og design her på siden, tekstmateriale i grundbogen “Det kommunikerende menneske” samt elevernes egne blogs, som ligger tilgængelige på nettet.

Evaluering indgår som en slags peer feedback, da eleverne i den første halve time skal finde frem til og præsentere form og designvalg på deres sider i fællesskab.

Sekvensering

5 minutter indledning

  1. Udkast til portfolier afleveret – lidt ros..
  2. Nu er det op til jer hvordan og hvor meget i vil bruge det her redskab, men i har i hvert fald fået mulighed for at se hvordan man
    1. Kan oprette en personlig digital profil med udvidet funktionalitet
    2. Kan udgive multimodalt indhold såsom spil, kode, film, animationer, samt i nogen grad kombinere disse
  3. Præsentation af timens forløb: 
    1. I skal i arbejde sammen to og to –
      1. Først skal i finde nogle steder hvor jeres portfolier indeholder nogle principper for godt webdesign (vi så på sidst)
      2. I anden omgang med at løse en åben udfordring om at udvide funktionaliteten i WordPress

5 minutter lærerpræsentation

Kort Opsamling af gestaltlovene samt principper for godt webdesign

10 minutter makkerarbejde

Find en makker. Gå ind på jeres blogs og find minimum to eksempler på gestaltlovene på jeres sider. Diskuter dernæst om i kan finde eksempler på Jacob Nielsens 10 principper for godt webdesign – eller måske ligefrem eksempler fra Googles material paradigme..?

10 minutter præsentation og diskussion i plenum

15 minutter makkerarbejde

Grupperne får hver et nummer, et, to eller tre.

Løs følgende opgave (tilsvarende gruppenummer) med WordPress. Find og installer noget som i mener kan tilføre denne funktionalitet i WordPress og kom så langt som i overhovedet kan med at implementere den. Gør jer også klar til at præsentere jeres løsning.

  • I vil gerne systematisere skolens LAN fester og har derfor brug for et kalender system hvor man kan oprette begivenheder og lave tilmeldingssider til elever.
  • I har lavet en forening for DIY projekter på skolen, og vil sætte et system op så i kan udsende nyhedsbreve med eksempler på projekter og info om arrangementer mv
  • I vil sætte en side op hvor elever kan sælge deres 3d printede modeller –

10 minutter Opsamling og diskussion

Diskussion af løsningsforslag

5 minutter afrunding

WordPress som svejtserkniv. Note/formaning om at jo mere du arbejder i det, desto skrappere bliver du.

Lektion: Avancerede indlæg: p5.js skitser og jQuery på din WP

Følger læringsobjekt her 

Lektion: Avancerede indlæg – Unity spil

Eleverne lærer at oprette spil fra Unity i webGL format og lægge dem direkte ind i WP.

 

 

 

 

Leave a comment

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *