• Interaktion

    Basic CSS

    En CSS-fil indeholder lige som HTML, også et rule set. CSS rule sets indeholder: 1. Først en selector (consist of the identifiers that are coded at the beginnig of the rule set) efterfulgt af en declaration block (som består af ‘opening brace {‘, en eller flere declarations og en ‘closing brace }’). 2. Indeni declaration blokken er der ’property med kolon:’ og ’value med semikolon;’ – Selekotoren er h1 – applies til alle h1 elementerne – Rule set consist of a single property named ’color’ og value named ’navy’ – Denne kode vil resultere I, at alle h1 elementer vil blive vist I navy blue   Comments (bliver ikke vist…

  • Interaktion

    Basic HTML

    Et HTML dokument indeholder ALTID to dele: 1. <!DOCTYPE html> Dette er ALTID den første linje I et html dokument. Det fortæller browseren at dokumentet bruger HTML5 2. Document tree Disse koder kommer ALTID lige efter DOCTYPE. De definerer indhold og struktur af websiden <html> </html> Er html elementet selv. Det markerer ’start’ og ’slut’ på hele kodesiden. Det indeholder alle de andre elementer og kan refereres til som ’roden af the document tree’ <head> </head> Indeholder elementer der giver informationer om selve siden <body> </body> Indeholder elementer der giver informationer om struktur og indhold på siden             2. Elements and tags To elementer med…

  • Visualisering

    Æstetik

    1. Color modes: – RBY (primary – red, blue, yellow) – RGB (additives colors, skærmfarver, hvis man tilføjer lys til dem, så bliver det hvidt – rød, grøn, blå) – CMYK (hvis man samler alle de farver, bliver det sort – cyan, magenda, yellow, kontrast/sort) – HEX (betyder en farvekode, altså # og så en farve) 2. Farvekoder (hex koder) går fra 0 til F: 0,1,2,3,4,5,6,7,8,9 -> A (10) B (11) C (12) D (13) E (14) F (15) – Gestalt love – Proximity: Who decides who comes to this country – Simplicity: Hjemmeside landing-page – Figure and Ground: Billede med mennesker og skakbrikker – Similarity: Amazon produkter – Continuation: Billede med strakt arm, der…

  • Visualisering

    Adobe Premiere Pro – Øvelse

    Reflektion: Det var første gang jeg arbejdede i Adobe Premiere Pro og da jeg var syg den dag vi havde undervisning i det, brugte jeg en del tid på at sidde og se introduktion til programmet på Lynda.com. Opgaven var at lave en trailer til en film, ændre stemningen og klippe den sammen. Efter vi havde set traileren på storskærm i klassen, var det lettere at se hvilke forbedringer der kunne gøres. Eksempelvis synes jeg at klippet i starten af traileren var for langt og nogle af lydene kunne godt få en bedre overgang. Det er svært at vurdere helhedsindtrykket, når man sidder og arbejder med det på computeren.

  • Visualisering

    Typhography

    Typografiens oprindelse går helt tilbage til 25.000 år f.Kr og former og tegninger repræsenterede et ord eller betydning 1. Tidlige alfabeter – Fønikisk– 1000 år f.Kr. – Græsk – Hver bogstav får et navn, så man danne et ord – Romersk – Starten på det vi bruger I dag – lavet ud fra græsk 2. Manuskripter – Manu = Hånd – Bøger blev håndlavet i hundrede år – Lavet af munke med religiøst formål og var meget dyre 3. Printing Press – Johannes Gutenberg opfandt print pres i midten af det 15. Århundrede – Bogstaver blev organiseret i blokke af tekst – Brugt til at producere bøger i store mængder…

  • Projekter

    Projekt 2. – Installation til museet Tidens Samling

    I dette projekt skulle vi udarbejde en installation til museet Tidens Samling i Odense. Krav til installationen: Den skal tilgodese blinde og seende unge under 30 år og må ikke tage for meget plads i udstillingen Vores problem formulering Hvordan kan oplevelsen på Tidens Samling forbedres og gøres mere attraktiv for unge besøgende at vende tilbage til? 1. Hvilke digitale og visuelle løsninger kan skabe samspil mellem installationen og de besøgende? 2. Hvordan kan seende og blinde tiltrækkes til samme installation? 1. Vi startede med.. hele at klassen at tage op og besøge Tidens Samling og få en rundvisning og kigge lidt omkring. 2. Ved at bruge.. Design thinking metoden, gik vi først igang med…

  • Visualisering

    Adobe Illustrator Pentool – Øvelse

    Reflektion: I visualisering fik vi til opgave at tegne os selv med pentool i Adobe Illustrator. Jeg fandt derfor et billede af mig selv og tegnede med pentool ovenpå det. Da jeg var færdig og følte at jeg havde fået alle detaljerne med, fjernede jeg originalbilledet bagved og endte med dette resultat, som jeg er rimelig tilfreds med. 

  • Workshops

    CSS Workshop

    Formålet med denne workshop var at lave en animation med HTML og CSS Inden det hele gik i gang, havde vi en gennemgang af forskellige koder og animationer fra Andrea og Anni. Filerne ligger på Fronter og står nederst i blogoplægget. Vi startede med at tegne vores spritesheet i Adobe Illustrator. Her brugte jeg pentool og pencil til at tegne blomster og sommerfugle. Mit artboard i Adobe Illustrator satte jeg til at være 400px højt og 2000px bredt. Jeg arbejdede med 5 frames og indsatte ‘rulers’ for nemt at kunne holde animationen indenfor hver frame. Mine frames havde en størrelse på 400px x 400px. Spritesheet for animationen Jeg valgte at lade blomsterne stå stille…

  • Projekter

    Projekt 1. – Evaluering og re-design af Bunkermuseets hjemmeside

    I projekt 1. skulle vi komme med forslag til forbedringer i udarbejdelsen af næste version af www.odensebunkermuseum.dk, som kunne optimere brugeroplevelsen (UX) 1. Vi startede med..  At udarbejde én primær persona og et scenarie, baseret på databaseret målgruppeindsigt og analyse. Her kom vi frem til en mand ved navn Hans Søndergård, der arbejder som dansklærer i en folkeskole. 2. Dernæst udførte vi.. En heuristisk evaluering af bunkermuseet vha. Nobanet Usability Guidelines. Dette gjorde vi først individuelt, hvorefter vi sammenlignede, diskuterede og analyserede vores besvarelser og udarbejdede en samlet evaluering. De fundne problemer på hjemmesiden, lavede vi så en prioriteret liste over. Vi delte dem op i alvorlige og mindre alvorlige…

  • Visualisering

    InDesign – Magazine Cover Øvelse

    Idag havde vi introduktion til InDesign CC Vi fik til opgave at udvælge et magazine cover og genskabe det bedst muligt. Her ses det færdige resultat. Mit billede er til venstre, mens det originale er til højre.  Reflektion: Det var en ret hyggelig opgave og faktisk sad jeg tilbage og troede at jeg havde gjort det forkert. Jeg ved ikke hvad jeg helt havde forestillet mig, det virkede måske lidt for ‘let’. Det var selvfølgelig svært at lave det præcist magen til, men jeg synes resultatet blev godt. Jeg havde en del problemer med den øverste del, hvor teksten er bag ved modellens ansigt. Jeg endte derfor med at bruge…