Mine projekter

Kodning &
Webudvikling

guld sommerfugl detalje

Kodning og Webudvikling er et ekstremt spændende fagområde, fordi der både er plads til kreativitet, æstetik, funktionalitet & næsten kun fantasien sætter grænser.

For mig betyder det alt at gøre mit bedste & udvikle mig løbende.

billede af computer med kode og en med webdesign

mit ynglings projekt

Highlighted

Gruppeopgave - eksamensopgave 2

Opgavebeskrivelse: WordPress, videoproduktion, kampagne osv.

“I skal udvikle en digital platform, som introducerer til jeres emne og som er egnet til at involvere brugeren. Semestrets emner var bl.a. InDesign, WordPress, UX-design, SEO, Bootstrap, videoproduktion og JavaScript. Vi er spændte på at se, hvordan I nu kombinerer jeres færdigheder og kompetencer inden for semestrets pensum til at skabe et konsistent udtryk, egnet indhold og interaktion med brugeren. “

Det her nok den mest omfattende eksamensopgave der er. Derfor er der også sindsygt meget til den & derfor kan jeg ikke 100% dække den her, men det er et af de projekter jeg er mest stolt af & især fordi den gruppe jeg var i, havde den ideelle dynamik.

07 - 2. Semester

billede af computer er min gruppes eksamen hjemmeside
De forskellige aspekter vores eksamensopgave
guld sommerfugl detalje
vores kampagne

Da vi lever i en verden, hvor usikkerhed og kriser fylder mere end tidligere, valgte min gruppe at udvikle en oplysningskampagne med fokus på vigtigheden af at være forberedt. Ikke bare fysisk, men også mentalt.

Derfor skabte vi “KriseKlubben”, som bestod af fire piger, der satte sig for at blive klogere på prepping, den aktuelle verdenssituation og hvordan man bedst kan forberede sig på uforudsete hændelser.

Herunder skulle vi også udarbejde noget til print, her valgte vi en plakat og en flyer.

video produktion

En del af eksamensopgaven var at udvikle en relevant videosekvens. Gennem idéudvikling og overvejelser om platform, format og redigering valgte vi at producere en YouTube Shorts-video i højformat.

Vi mødte danskerne med humor, da vi vurderede, at alvorlige emner ofte bliver lettere at forstå og tage imod, når de formidles på en let og genkendelig måde (humor).

Vi tog dermed hele vejen til Oksbøl kaserne for at interviewe fagfolkene selv.

Resarch

Selvfølgelig er dette en opgave der er baseret på fakta og dermed var en gennemført omgang reasearch alt afgørende for vores troværdighed & for vores opgave. 

Dermed lavede udførte vi også en del brugerteste/spørgeskemaer igennem hele forløbet, for at sikre os at vi havde målgruppen med hele vejen.

 

wordpress & designprincipper

Til projektet kunne vi enten kode hjemmesiden fra bunden eller udvikle den i WordPress. Min gruppe valgte WordPress, da vi gerne ville udvikle vores kompetencer inden for CMS-systemer.

Vi udviklede også KriseKlubbens visuelle identitet med blandt andet styletile, wireframes og en gennemgående visuel rød tråd på tværs af alle produkter.

SEO har ikke været et stort fokus i beskrivelserne af mine projekter, men det har været en fast del af mit arbejde gennem hele uddannelsen.

Resultat af print

Kodnings opgaver

guld sommerfugl detalje

01 - 1. Semester

computerskærm af css og html

individuel opgave

Opgavebeskrivelse: HTML & CSS

“I dette flowprojekt skal du lave et personligt website til en politiker, der stiller op til kommunalvalget”

Dette projekt var mit første møde med kodning. Herunder HTML & CSS. Vi arbejdede med GitHub og Visual Studio Code. Kodning er det fagområde jeg personligt finder mest udfordrende, men interessant.

Jeg stødte mange gange panden mod muren, men der er noget tilfredstillende over at der altid vil være et teknisk svar og at se din kode blive til noget.

ift. min proces, så sørgede jeg for at indsamle en masse research og udarbejde diverse design valg

*Jeg kan ikke vise resultat pga. ophavsret

krav til opgaven
guld sommerfugl detalje
metodiske krav

Generelt skulle vi forsøge os med et responsivt design, dermed med metoden “mobile first”.

visuelle krav

Visuelt skulle indholdet været velorganiseret, elementerne skulle flugte med hinanden & tilsidst så skulle layoutet passe til både mobil & desktop.

tekniske krav

Inde i HTML dokumentet & CSS stylesheet skulle man skrive relevante kommentarer. Vi måtte kun have ét eksternt stylesheet & vores mapper skulle være velorganiseret.

Vores online hjemmesiden måtte ikke vises i søgninger, så vi gjorde brug af koden: 

<meta name=”robots” content =”noindex”>

krav til indhold

Vi skulle have én forside og minimum 2 undersider. Billederne skulle være optimeret til brug på web (beskæres og komprimeres).

individuel opgave - Eksamensopgave 1

Opgavebeskrivelse: HTML & CSS

“Formålet med en portfolio er at præsentere og dokumenteredit faglige niveau og vise din faglige udvikling samt gøredig bevidst om, hvad du har arbejdet med og hvad du har lært. ydermere skal det være dit ansigt udadtil & den skal vise hvem du er.” (osv.)

Da design er det område, jeg brænder mest for, var det lidt af en udfordring at skulle bygge hele min portfolio op med kode. Jeg var stadig ny inden for kodning, så ikke alle mine idéer kunne lade sig gøre.

Dog lærte jeg utrolig meget kode undervejs, og jeg blev virkelig tilfreds med det færdige resultat. Det blev et godt kompromis mellem mine designidéer og de kodeevner, jeg havde på det tidspunkt.

Jeg stødte også på en del problemer da jeg skulle uploade den på mit domæne. Der blev omrukeret på mange af mine ting, så resultat blev som det blev.

Link til portfolio: https://amaliebyrne.dk/portfoliosem1/forside.html

*Nogle filer og medier er gået tabt igennem tiden*

02

billede af computere med html og med portfolio
krav til eksamensopgaven
guld sommerfugl detalje
Kode portfolio

Min portfolio skulle kodes fra bunden, dermed gøre brug af det jeg havde lært igennem vores kodningsforløb på første semester. Her skulle vi udarbejde et HTML dokument og designe i et seperat CSS stylesheet.

responsivtdesign

Et krav til vores portfolio var at det skulle have et responsivt design & dermed bruge metoden “mobile first”. Her skulle man finde de rette “breakpoints”. Til mobil kunne man gøre brug af “burger menu”, men det kunne jeg ikke få til at fungere.

designprincipper

Igennem første semester lærte jeg en del om designprincipper, farveteori osv. Den viden skulle vi indrage i vores produkt og dermed udarbejde diverse wireframes, styleguide mm.

video sekvens

Det sidst krav til vores portfolio var en video sekvens. videoen skulle vise vores evner inde for mediefaget. Hermed skulle vi udarbejde vores proces såsom storyboard, shotliste, storyline osv.

Yderligere skulle vi også sørger for at komprimere diverse medier.

03 - 2. Semester

billede af projekt flora amalie blomsterbutik

individuel opgave

Opgavebeskrivelse: HTML, CSS & JavaScript

“Du lærte at arbejde med DOM’en, at lytte på events, at styre UI state med addremove og toggle, at bruge if/else til logik og at håndtere data gennem arrays og objekter. I denne opgave skal du samle og anvende alle de teknikker og principper, du har arbejdet med i de to foregående uger, i én samlet løsning.

I dette projekt blev jeg introduceret til JavaScript og her arbejdede vi med at få en “alert” som jeg brugte til at lave en pop-up meddelse når man kom ind på forsiden. Yderligere udarbejde jeg en kurv man kunne trykke frem og tilbage. 

 

krav til opgaven
guld sommerfugl detalje
funktionelle krav 1

I dette projekt måtte man selv vælge hvad din Webshop skulle tilbyde. Om den skulle sælge chokolade, slik, isbar osv. så var kravet bare, at man skal kunne bestille online.

funktionelle krav 2

Det skal ikke blot være en statisk hjemmeside, men en løsning, der reagerer på brugerens handlinger og arbejder med data.

samlet funktionelitet

Siden skal kunne vise produkter dynamisk, åbne og lukke menuer, skifte indhold, reagere på klik og håndtere simple systembeskeder – fx tidspunkt for en bestilling eller information om, hvorvidt butikken er åben eller lukket

Javascript

I løsningen skulle vi aktivt inddrage og kombinere de byggesten, vi havde arbejdet med i undervisningen. Arrays skulle danne grundlag for produkterne. if/else skulle styre logikken. Event listeners skulle håndtere brugerens handlinger.

Webudviklings opgaver

guld sommerfugl detalje

04 - 1. Semester

prototype af hjemmeside lavet i figma

gruppe opgave

Opgavebeskrivelse: Figma hjemmeside

“I skal nu i jeres grupper udarbejde en prototype på en event hjemmeside for unge. Her skal i indrage billederrne fra jeres fotosaferi. I bestemmer selv hvilke events og hvordan den skal designes.” 

Her havde fået en del undervisning i Figma og dets mange funktioner, så her skulle vi bare sidde og udforske i gruppen med design, funktionalitet & generelt lære Figma at kende. 

Her var det meget med stemningen og at gøre vores events attraktive for unge. Vores ide var at lave event for de unge der starter på uddannelser, da det kan være svært og komme ind på helt nye mennesker.

individuel opgave

Opgavebeskrivelse: WordPress

I denne opgave fik vi introduktion til det basale ved WordPress, herefter skulle vi selv arbejde med at lave en hjemmeside med diverse krav og tekster. Dette var generelt en oplæringsopgave og vores chance for at sidde med WordPress alene. 

Dette var mit første møde med CMS, specifikt WordPress. Jeg fik indtrykket af at det var smart og lækkert at designe med. Dog fandt jeg også ud af at de var en del mere indviklet end lige til. WordPress skal man have respekt for, da der er en masse tiltag, funktioner og ikke noget man lærer med det samme. 

05 - 2. Semester

billede af computer der har en hunde hjemmeside på

06 - 2. Semester

computer med wordpress cafe hjemmeside

individuel opgave (selvstudieopgave)

Opgavebeskrivelse: WordPress

“Hele sitet skal forestille at være for Café Buchka (du bestemmer selv navnet på din café): tone, billeder, tekster, menupunkter og kategorier skal passe til en café.”

I denne opgave fik jeg virkelig lov til at sidde og pudse-nusse med design, stemning & layout, hvilket helt klart var den del, jeg nød mest. WordPress var stadig lidt af en udfordring, men undervejs fik jeg en meget bedre forståelse for de forskellige funktioner.

Efterfølgende blev jeg introduceret til Hello Elementor, som gjorde designdelen meget mere lige til og gav mig langt større frihed til at arbejde med mine idéer.

krav til opgaven
guld sommerfugl detalje
krav til indhold

Man skulle minimum oprette 5 sider (pages), på minimum 3 af siderne skulle der være et featured images, oprette 6 blogindlæg (posts) & tilsidst lave en header med undersiderne på.

krav til design

Visuelt skulle hjemmesiden have den café æstetik der sælger og formidler din café. Selve menu siden skulle deles op i forskellige sektioner (mit tilfælle opdelte jeg dem i “Kaffe- Hot&Cold”, “Te- varm & beroligende”, “Diverse drikke- Hot&Cold” & “Lidt til den søde tand”)

krav til posts

Kravene til hvert indlæg var, at der skulle være et featured image, et uddrag på 1-2 linjer & til sidst være under en kategori. Ift. kategori skulle vi minimum oprette 3 kategorier & valgfrit kunne vi vælge at lave tags på hvert indlæg.

Tema & tilpasninger

Vi måtte selv bestemme hvilket tema vi valgte for vores hjemmeside & ydermere skulle vi lave 3 tilpasninger (fx logo/site title, farver eller typografi, layout osv.)

guld sommerfugl detalje
Næste færdighed