Dokumentasjon

Gjennom dette prosjektet har jeg fått muligheten til å sammenlikne programmering av figurer gjennom Canvas API-et og bruk av SVG. For å få siden til å se ut som jeg ønsker, har jeg brukt både CSS Grid og Flexbox, mens jQuery hovedsaklig er brukt for funksjonaliteten på SVG-en.

CSS Flexbox er nøkkelen til sidestrukturen. Jeg har et rot-element som omfatter hele nettsiden, også det som ikke synes. Dette elementet er ikke en Flexbox fordi det kan skape problemer med annen funksjonalitet jeg vil ha på rotnivå. I stedet er en barnenode av rotnoden med id "content" en Flexbox med flyt langs kolonnen. Den representerer alt av hovedinnhold som er synlig. Her blir Flexbox brukt til å sentrere siden horisontalt. Dette er bedre enn å bruke margin, ettersom sentrering med Flexbox er mer dynamisk og passer bedre for mobile skjermer. Flexbox brukes videre for sentrering på denne måten nedover i html element-treet, ettersom en så enkel nettside passer bra for å hovedsaklig være sentrert. Flexbox passer ypperlig til dette, spesielt siden det ikke var ønskeelig at teksten i seg selv skulle være senterjustert.

CSS Grid brukes for å plassere bildene i en fin avstand fra hverandre horisontalt. Siden bildene ligger i "content", vil selve boksen bildene da ligger i være sentrert, noe som faller i stil med resten av nettsiden. Her kunne jeg også brukt Flexbox med justify-content: space-between, men da blir jeg tvunget til å sette fast bredde på containeren for å få mellomrom mellom bildene, og dette kan skape komplikasjoner når jeg vil bytte til å vise bildene under hverandre på mindre enheter. Ved å sette row-gap og column-gap, er jeg sikker på at det kommer til å se fint ut, uansett om bildene er presentert vertikalt eller horisontalt.

For å lage SVG-en, lagde jeg først raketten i Figma, og kopierte det jeg lagde som SVG inn i html-filen. Jeg eksperimenterte lenge med en egen SVG fil importert som et html object med egne JavaScript og CSS filer importert i seg, men dette førte til at jeg ikke hadde tilgang til jQuery for å manipulere SVG-en. Etter å ha kopiert inn SVG-koden, delte jeg elementene inn i grupper (g i svg) og ga dem id-er og klasser for å kunne manipulere dem med CSS. Interaktivitet med SVG-en ble laget ved å legge til onclick funksjoner på SVG-elementene. Selve funksjonene er skrevet i et eget JavaScript-dokument, og manipulerer blant annet hvilke CSS klasser som elementene har til enhver tid. De foskjellige CSS-klassene kjører bestemte animasjoner og transisjoner når det passer seg. Farge og posisjon endres ved å legge til CSS som en streng gjennom JavaScript og jQuery.

I canvas ble mesteparten gjort gjennom JavaScript. Her lagde jeg en render-funksjon som tolket "shapes" - en array av JavaScript "shape"-objecter med en egen struktur. Hvert "shape"-object definerer hvor i canvaset et element befinner seg, elementets form, bredde og høyde, samt farge, rotajon, synlighet og klikk-funksjonalitet. For å forme selve elementene brukte jeg Path2D. I render runksjonen ble hvert "shape"-object convertert til en Path2D instans, og ved bruk av denne tegnet den elementet inn i canvaset . Path2D-instansene var avgjørende for å kunne finne hva man klikket på i canvaset. Ved et klikk i canvaset ble det sjekket om det var et innenfor en path, og hvis klikket var det, ble klikk-funksjonen til det korresponderende "shape"-objectet kjørt. Klikk-funksjonen hadde tilgang på den nåværende "shapes"-arrayen som var gengitt i canvas, og funksjonaliteten på raketten besto av å generere en ny "shapes"-array med de forespurte endringene, og så sende denne nye arrayen til render-funksjonen. Animasjoner i canvas besto derfor av å manipulerte "shapes"-arrayen og rendere den med nye verdier bestemt ut ifra matematiske funksjoner. For at klikk-funksjonen til en "shape" til enhver tid skulle ha tilgang til den nåværende "shapes"-arrayen, måtte klikk-event-handleren til canvaset oppdateres i render-funksjonen hver gang canvaset ble renderet på nytt. Ettersom event handlerne ikke ble kjørt under en animasjon, ble de stacket oppå hverandre, noe som førte til uønsket funksjonalitet der flere handlere ble kjørt ved et klikk på canvas. Derfor kunne ikke klikk-funksjonalitet på canvas legges til i animasjoner.

Jeg har brukt jQuery for manipulere elementene i SVG-en, samt å håndtere knappen for å vise dokumentasjonen (det du har oppe nå). For å endre fargen til rakett-delene, manipulerte jeg fill-attributten til barnenodene i svg-en. Ved å bruke attributten kunne jeg lettere hente ut tekstverdien til fargen, som gjorde det lett å rotere farge. For å flytte på SVG-en manipulerte jeg en CSS variabel ved hjelp av jQuery, og for å animere rakettoppskytingen og eksplosjonen brukte jeg jQuery for å legge til og fjerne CSS klasser, og kjøre event handlere som bare kjører en gang. Når det gjelder vising av dokumentasjonen, brukes jQuery for å gjøre popup-en synlig og usynlig, samt gjøre bakgrunnen uklar med CSS. For både popup-en og SVG-en har jQuery forkortet koden betraktelig og gjort den mer lesbar.

Jeg testet nettsiden i 3 nettlesere: Google Chrome, Mozilla Firefox og Microsoft Edge. Det viktigste i cross-browser testing er at man sikrer seg at alle HTML-elementene, CSS-egenskapene og JS-funksjonene man bruker er støttet og oppfører seg som forventet. Ved gjennomføringen av testen gjorde jeg derfor følgende manuell testing:

Testet at nettsiden så for det meste lik ut: at Flexbox, Grid og de andre CSS funksjonene fungerte som de skulle.
Testet at "Left", "Right" og "Launch" fungerte som forventet på både SVG og Canvas bildet.
For å teste timing og tilfeldige hendelser, trykket jeg aggresivt rundt i canvas og kjørte animasjonene flere ganger.
Testet at nettsiden oppførte seg som forventet ved endring av skjermstørrelse, slik at den fortsatt så bra ut.
Sjekket at ingen feilmeldinger oppsto under testingen

Testingen viste at funskjonaliteten var lik i alle nettleserne. Det er likevel verdt å merke seg at scrollbarene ser forskjellig ut i Firefox fra de andre browserne, fordi Firefox har forskjellig støtte for å endre på dem fra Chromium-browserne.

Hovedkilder

Mitt abstrakte bilde

Jeg er en student som leker meg med SVG og Canvas API-et. Med dette prosjektet har jeg gjenlært det jeg tidligere visste om SVG og Canvas, jeg har i tillegg sett på Path2D i Canvas og å bruke CSS, JS og jQuery med SVG.

Vis dokumentasjon

Klikk på de forskjelleige delene av raketten for å bytte farge på delen.
Klikk "Left" eller "Right" for å flytte raketten horisontalt.
Klikk "Launch" for å skyte og eksplodere raketten. Etter raketten har eksplodert, kan du trykke på hvilken som helst del for å sette den sammen igjen.

Rakett - SVG

Rakett - Canvas