Embedded Files
Aflevierning
Aflevierning
Her ville jeg fortælle lidt om hvad vi har lavet hen over grundforløbetes periode. Til sidst blev det så til en aflevering.
Webdesign
Webdesign
Overordnet præsentation
Overordnet præsentation
Hele forløbet har handlet om at lære at bygge og forstå hjemmesider — både teknisk og designmæssigt. Vi startede med det basale HTML og CSS, hvor vi lærte at lave struktur, layout og styling. Senere arbejdede vi med brugervenlighed, layoutprincipper, wireframes, prototyping og test.
Jeg har fået en ret god forståelse for, hvordan en hjemmeside bliver til, og hvor mange små beslutninger der ligger bag design og funktion.
Derudover har vi arbejdet med en fælles case, Kulturcafe Oskar, hvor vi i grupper lavede en prototype og et færdigt website.
HTML
HTML
Hvad er HTML?
Hvad er HTML?
HTML står for HyperText Markup Language. Det er det sprog, man bruger til at opbygge strukturen i en hjemmeside.
Man kan sige, at HTML er skeletter på en side – det bestemmer, hvad der er overskrifter, tekst, billeder, links, osv.
Grundlæggende opbygning
Grundlæggende opbygning
En HTML-fil starter med:
<!doctype html>
<html lang="da">
<head>
<meta charset="utf-8">
<title>Min side</title>
</head>
<body>
<h1>Velkommen</h1>
<p>Her er min tekst</p>
</body>
</html>
<head> indeholder info om siden, fx titel og meta-data.
<body> indeholder alt det, man faktisk ser på skærmen.
Vigtige tags jeg har brugt
Vigtige tags jeg har brugt
<h1> - <h3>: overskrifter
<p>: afsnit/tekst
<a>: links
<img>: billeder
<div> og <section>: bruges til at opdele indhold i sektioner
<form>: til kontaktformularer
CSS
CSS
Hvad er CSS?
Hvad er CSS?
CSS står for Cascading Style Sheets. Det styrer udseendet af hjemmesiden – farver, skrifttyper, marginer, layout osv.
Hvis HTML er skelettet, så er CSS tøjet og makeuppen.
Hvordan man linker HTML og CSS
Hvordan man linker HTML og CSS
Man linker sin CSS-fil i <head> med:
<link rel="stylesheet" href="style.css">
Refleksion
Refleksion
Jeg har lært at tænke mere struktureret når jeg bygger sider. Før prøvede jeg mig bare frem, men nu ved jeg, hvorfor ting skal stå hvor de gør.
Det fedeste var at se designet blive pænt og funktionelt.
Det sværeste var nok at få layoutet til at virke på både mobil og computer.
Men nu føler jeg mig meget mere sikker i HTML og CSS, og det bliver sjovt at bygge videre på i studieretningen.
Caseopgaven: Kulturcafe Oskar
Caseopgaven: Kulturcafe Oskar
Præsentation
Præsentation
Casen handlede om at designe en hjemmeside for Kulturcafe Oskar i Søby Kommune.
Formålet var at lave et sted, hvor folk kan læse om events, koncerter og booking, og samtidig vise kommunens kulturelle initiativer.
Kommunikationssituationen var en offentlig kulturinstitution, så designet skulle være venligt, overskueligt og nemt at bruge for alle aldersgrupper.
Brugervenlighed (teori)
Brugervenlighed (teori)
Vi brugte principper som:
Klar navigation – man skal altid vide hvor man er.
Genkendelighed – brug af kendte symboler og struktur.
Simpelt layout – fokus på indhold og ikke for meget støj.
Responsivt design – at siden virker på både mobil og computer.
Skitser og designnoter
Layout og wireframes
Layout og wireframes
Målet var at finde en god måde at placere tekst, billeder og knapper.
Jeg fandt ud af, at grid og flexbox er vildt gode til layout.
Jeg brugte wireframes til at planlægge strukturen, før jeg begyndte at kode.
Vi evaluerede hinandens designs i klassen og justerede efter feedback.
Prototyping
Prototyping
Prototyping handler om at lave en test-version af sit design, så man kan vise funktion og flow, før det hele er færdigt.
Vi lavede en prototype i HTML, hvor man kunne klikke rundt på siderne, men uden alt indholdet.
Det hjalp med at se om navigation og struktur fungerede, inden vi brugte tid på styling.
Test og rettelser
Test og rettelser
“Tænke-højt-testen” gik ud på, at en person prøvede siden og sagde højt, hvad de tænkte, mens de brugte den.
Vi observerede, noterede problemer og spurgte bagefter, hvad der kunne forbedres.
Fx opdagede vi at nogle knapper var for små, og at “tilbage”-links skulle stå tydeligere.
Bagefter rettede vi de ting i koden.
Video af vores webside
Video af vores webside
Følg dette link for at se vores video.
Link til hjemmesiden vi har lavet
Link til hjemmesiden vi har lavet
Her er det link der ville følge dig til vores hjemmeside.
Page updated
Google Sites
Report abuse