Liste over designelementer
UiO har laget en rekke designelementer for Canvas som du kan se gjennom i v?rt "showroom" i Canvas (uio.instructure.com, krever innlogging med UiO-brukernavn).
Herunder finner du informasjon om hvert designelement med tilh?rende kode som du legger inn i HTML-visningen i Canvas.
Horisontal linje ?verst p? siden
Noen foretrekker ? ha en farget linje ?verst p? siden som hjelper brukere ? feste blikket. Horisontal linje er i UiO-bl?fargen:
Anbefalt m?te ? legge inn p?
<div class="uio-heading-stripe"> </div>
OBS! Du legger inn koden ?verst p? siden, og dette skal v?re et tomt div-element, s? du trenger ikke legge inn noe mer enn koden ovenfor.
Tips: Om det er behov for en horisontal linje midt p? en side, oppgave, kunngj?ring, osv. kan du legge inn en linje med teksteditormenyen. Velg Sett inn og deretter Horisontal linje.
Fargeboks variant 1
Det er noen ganger behov for ? fremheve deler av teksten i en nettside, og ved ? bruke tabeller er man i strid med kravene til universell utforming.
Derfor har UiO laget tre ulike fargebokser som er mer brukervennlige og som benytter UiO-farger.
Anbefalt m?te ? legge inn p?
Velg "Colorbox 1" i designelementboksen, eller legg inn koden manuelt:
<div class="uio-color-box-1">
<h3>Overskrift niv? 3 (slett hvis du ikke trenger overskrift)</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
in quam id lectus fermentum elementum. Suspendisse at tortor a
sapien placerat tempor. Phasellus faucibus justo sed felis tempus,
luctus dapibus est faucibus. Fusce efficitur, risus a faucibus
finibus, ex felis varius mi, eu laoreet erat tellus ut augue.
Pellentesque volutpat elit ac ipsum ullamcorper feugiat.</p>
</div>
Fargeboks variant 2
Det er noen ganger behov for ? fremheve deler av teksten i en nettside, og ved ? bruke tabeller er man i strid med kravene til universell utforming.
Derfor har UiO laget tre ulike fargebokser som er mer brukervennlige og som benytter UiO-farger.
Anbefalt m?te ? legge inn p?
Velg "Colorbox 2" i designelementboksen, eller legg inn koden manuelt:
<div class="uio-color-box-2">
<h3>Overskrift niv? 3 (slett hvis du ikke trenger overskrift)</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
in quam id lectus fermentum elementum. Suspendisse at tortor a
sapien placerat tempor. Phasellus faucibus justo sed felis tempus,
luctus dapibus est faucibus. Fusce efficitur, risus a faucibus
finibus, ex felis varius mi, eu laoreet erat tellus ut augue.
Pellentesque volutpat elit ac ipsum ullamcorper feugiat.</p>
</div>
Fargeboks variant 3
Det er noen ganger behov for ? fremheve deler av teksten i en nettside, og ved ? bruke tabeller er man i strid med kravene til universell utforming.
Derfor har UiO laget tre ulike fargebokser som er mer brukervennlige og som benytter UiO-farger.
Anbefalt m?te ? legge inn p?
Velg "Colorbox 3" i designelementboksen, eller legg inn koden manuelt:
<div class="uio-color-box-3">
<h3>Overskrift niv? 3 (slett hvis du ikke trenger overskrift)</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
in quam id lectus fermentum elementum. Suspendisse at tortor a
sapien placerat tempor. Phasellus faucibus justo sed felis tempus,
luctus dapibus est faucibus. Fusce efficitur, risus a faucibus
finibus, ex felis varius mi, eu laoreet erat tellus ut augue.
Pellentesque volutpat elit ac ipsum ullamcorper feugiat.</p>
</div>
Ikonbokser - positivt og negativt
Ikonbokser brukes til ? fremheve deler av tekst og de har en ikon og farge som kan kobles til en bestemt bruk, enten positivt eller negativt:
- Overskriften for den positive ikonboksen kan v?re for eksempel "Gj?r" ("Do" p? engelsk), "Positivt", "Godkjent", "Anbefalt" eller lignende.
- Overskriften for den negative ikonboksen kan v?re for eksempel "Ikke gj?r" ("Don't" p? engelsk, "Negativt", "Ikke godkjent", "Ikke anbefalt" eller lignende.
Anbefalt m?te ? legge inn p?
<div class="uio-grid-row">
<div class="uio-icon-box do col-lg">
<h3>Gj?r / Do / Positivt / Godkjent / Anbefalt</h3>
<p>Phasellus faucibus justo sed felis tempus, luctus dapibus...</p>
</div>
<div class="uio-icon-box dont col-lg">
<h3>Ikke gj?r / Don't / Negativt / Ikke godkjent / Ikke anbefalt</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris in quam id lectus fermentum elementum.</p>
</div>
</div>
OBS! Koden ovenfor er for n?r boksene brukes sammen. Dersom du ?nsker ? bruke bare én av boksene velger du "Iconbox Do" eller "Iconbox Don't" i designelementboksen, eller legg inn koden manuelt:
<div class="uio-icon-box do">
<h3>Gj?r / Do / Positivt / Godkjent / Anbefalt</h3>
<p>Phasellus faucibus justo sed felis tempus, luctus dapibus...</p>
</div>
ELLER
<div class="uio-icon-box dont">
<h3>Ikke gj?r / Don't / Negativt / Ikke godkjent / Ikke anbefalt</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris in quam id lectus fermentum elementum.</p>
</div>
Ikonboks info
En infoboks med ikon kan v?re en god m?te ? fremheve viktig informasjon p? n?r den er midt i en nettside.
Anbefalt m?te ? legge inn p?
Velg "Iconbox Info" i designelementboksen, eller legg inn koden manuelt:
<div class="uio-icon-box info">
<h3>Info</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
in quam id lectus fermentum elementum. Suspendisse at tortor a
sapien placerat tempor. Phasellus faucibus justo sed felis tempus,
luctus dapibus est faucibus.</p>
</div>
Ikonboks oppgave/gj?rem?l/l?ringsaktivitet
En oppgaveboks med ikon kan v?re en god m?te ? fremheve en oppgavetekst, gj?rem?lsliste eller l?ringsaktivitet p?, n?r den ligger midt i en nettside.
Anbefalt m?te ? legge inn p?
Velg "Iconbox Task" i designelementboksen, eller legg inn koden manuelt:
<div class="uio-icon-box task">
<h3>Oppgave / Gj?rem?lsliste</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
in quam id lectus fermentum elementum. Suspendisse at tortor a
sapien placerat tempor. Phasellus faucibus justo sed felis tempus,
luctus dapibus est faucibus.</p>
</div>
Ikonboks refleksjon
En refleksjonsboks med ikon er en god m?te ? fremheve refleksjon som en ?velse eller l?ringsaktivitet p?, n?r den er midt i en nettside.
Anbefalt m?te ? legge inn p?
Velg "Iconbox Reflect" i designelementboksen, eller legg inn koden manuelt:
<div class="uio-icon-box reflect"> <h3>Refleksjon</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <ul> <li>Fusce efficitur, risus?</li> <li>Risus a faucibus finibus, ex felis varius mi?</li> <li>Fusce efficitur, risus?</li> </ul> </div>
Kildeboks / Ressursboks
Ofte er det behov for ? fremheve en liste, enten midt i eller nederst p? en nettside. Denne boksen kan v?re en god m?te ? gj?re det p?.
Eksempeler p? bruk:
- kilder
- ressurser
- eksterne nettsider
Anbefalt m?te ? legge inn p?
Velg "Iconbox Source" i designelementboksen, eller legg inn koden manuelt:
<div class="uio-icon-box source"> <h3>Kilder / Ressurser / Nettsider</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> </ul> </div>
Trekkspill
Trekkspill brukes n?r du har mange relaterte avsnitt i en lang tekst, og der brukeroppgaven i hovedsak er ? velge én av dem. Det er viktig ? ha en god overskrift rett over trekkspillet som gir brukeren informasjon om hva slags informasjon er skjult i trekkspillet.
I denne videoen ser du et eksempel av trekkspill i Canvas:
Oppsummering av video: Denne videoen viser et eksempel av trekkspill-funksjonen i Canvas. Brukeren i videoen klikker p? de ulike trekkspill-overskriftene og -ikonene for ? ?pne og lukke trekkspillene. Det er ikke meningsb?rende lyd i videoen.
Beskrivelse av trekkspill-funksjonaliteten: Trekkspillet "pakker" tekstavsnittene sammen slik at kun overskriften synes f?r man klikker p? den (eller pil-ikonet). Da ?pner avsnittet seg. For ? lukke avsnittet klikker man p? overskriften eller ikonet. Det er mulig ? ?pne flere eller alle trekkspill samtidig.
Anbefalt m?te ? legge inn p?
<h2>Overskrift niv? 2</h2> <div class="uio-icon-box"> <details> <summary>Details med en skjult liste</summary> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> </ul> </details> <details> <summary>Details med en skjult paragraf</summary> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in quam id lectus fermentum elementum. Suspendisse at tortor a sapien placerat tempor. Phasellus faucibus justo sed felis tempus, luctus dapibus est faucibus. Fusce efficitur, risus a faucibus finibus, ex felis varius mi, eu laoreet erat tellus ut augue. Pellentesque volutpat elit ac ipsum ullamcorper feugiat.</p> </details> <details> <summary>Lorem Ipsum</summary> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> </ul> </details> <details> <summary>Lorem Ipsum</summary> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> </ul> </details> <details> <summary>Lorem Ipsum</summary> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in quam id lectus fermentum elementum. Suspendisse at tortor a sapien placerat tempor. Phasellus faucibus justo sed felis tempus, luctus dapibus est faucibus. Fusce efficitur, risus a faucibus finibus, ex felis varius mi, eu laoreet erat tellus ut augue. Pellentesque volutpat elit ac ipsum ullamcorper feugiat.</p> </details> </div>
Annet - Grid Layout
Hvis man ?nsker ? styre layout p? en Canvas-side er det IKKE anbefalt ? bruke tabeller av hensyn til universell utforming. Det er andre m?ter ? gj?re det p? som gir en bedre brukeropplevelse. Bruk av for eksempel Grid Layout (uio.instructure.com, krever innlogging med UiO-brukernavn) er en m?te som s?rger for uu- og brukervennlig innhold, og fungerer uavhengig av skjermst?rrelse.
Hvordan legge inn et designelement
F?rst m? du ha lagt inn tekst, bilder, embeddete videoer og annet innhold i en nettside i Canvas, og du m? v?re i redigeringsmodus p? nettsiden.
Deretter legge du inn designelementet ved ? bytte til HTML-visningen og legge inn koden manuelt.
Du bytter til HTML-visning ved bruk av knappen i teksteditoren:
Knappen finnes under teksteditorfeltet:
N?r du har f?tt lagt inn koden bytter du tilbake til vanlig visning og lagrer nettsiden n?r du er ferdig.
NB! Koden du legger inn i HTML-visningen vil ikke vises i teksteditoren, men er f?rst synlig etter at du lagrer nettsiden. Det er derfor ingen m?te ? "forh?ndsvise" et designelement f?r lagring.