mia abstrakta

Flexbox

Benyttes hovedsakelig for å ordne de ulike elementene i rader og kolonner, og for å dynamisk tilordne plass avhengig av skjermstørrelse. For eksempel er et av de øverste elementene en kolonne bestående av overskrift, hovedinnhold, og bunntekst ("biografien"). Her tar overskrift og bunntekst akkurat så mye plass som nødvendig, mens hovedinnholdet fyller ut resten. Samtidig har hovedinnholdet et visst minimumskrav til hvor mye som tildeles (min-width og min-height i CSS), slik at dette ikke faller helt bort på visse skjermtyper.

Bildekunsten (altså de to bildene) er i utgangspunktet ordnet som en rad (fra venstre til høyre) med flexbox. På smalere skjermer vil dette kreve for mye plass, og det er derfor lagt inn en regel som bytter til kolonne-ordning på skjermer som er smalere enn en viss størrelse. Dette krever kun endring av ett attributt, og viser fleksibiliteten til flexbox.

Flexbox er også flittig brukt for å sentrere de ulike elementene både horisontalt og vertikalt.

Grid

Denne siden benytter ikke CSS grid, da layout-behovene er tilstrekkelig dekket av flexbox. Hadde det vært snakk om en mer kompleks sideutforming, med ordning i både kolonne og rad for de samme elementene (altså et grid), kunne grid helt klart vært aktuelt for å utfylle flexbox.

SVG

Det første bildet er tegnet i SVG ved hjelp av bilderedigeringsprogrammet Inkscape. HTML-dokumentet inkluderer en forenklet "plain SVG" for å unngå unødvendig Inskcape-markup. Animasjoner er implementert i CSS. Jeg valgte å benytte transitions , da det så ut til å dekke behovene mine bedre og enklere enn f.eks. animasjoner med @keyframes.

Overgangene utføres ved hjelp av stilklasser som "toggles" via jQuery. I tillegg forenkler jQuery oppkoblingen av de nødvendige klikk-lytterne som gir kunsten interaktivitet på element-nivå. Dette er jo i utgangspunktet ikke særlig vanskelig, da SVG-en fungerer som helt vanlige HTML-elementer.

HTML canvas

Canvas-implementasjonen av kunstverket er i all hovedsak en etterligning av SVG-versjonen. Her har jeg altså forsøkt å gjøre de så like som mulig for å muligens avdekke de mest sentrale forskjellene.

Først og fremst er canvas i all hovedsak et API til JavaScript, og i HTML-dokumentet finner en bare et nokså intetsigende <canvas>-element. For at noe som helst skal vises må det tegnes til dette element via en CanvasRenderingContext2D. Dette gjøres via en rekke instruksjoner som manipulerer canvaset, både for å tegne streker, men også for å rotetere og flytte på canvaset. Det har derfor krevd noe mer utregning og planlegging i forhold til SVG-byggingen i Inkscape.

Det som krevde mest tid, og som tydelig viste forskjellene mellom canvas og SVG, var animasjonene. Der SVGen benytter eksisterende animasjonsstøtte i CSS, er alle canvas-animasjonene helt hjemmelagde. Siden canvas ikke egentlig lar deg manipulere elementene etter at de er tegnet, er alle bevegelsene egentlig bare en evig prosess bestående av tegning og visking. Programmet må altså for hvert bilde (frame) beregne hvor elementene skal være, i tillegg til andre attributter som størrelse og farge, basert på et gitt tidsstempel.

Dette krever i sin tur en del logikk for å holde styr på starttidspunktet for animasjonene og den øyeblikkelige progresjonen til hver av dem. Siden animasjonene i CSS benytter ease-in-out som easing-funksjon, "måtte" jeg jo også finne frem funksjonen til en tilsvarende Bézier-kurve. Resultatet er ikke 100% likt CSS-versjonen, da de easer litt ulikt ved avbryting av animasjonene (dvs. når man trykker en andre gang før første animasjon er ferdig). For å animere fargeovergangen har jeg benyttet HSL-representasjonen, da den gjør det lettere å gå gjennom ulike kulør-verdier (hue).

Uten tydelige elementer slik som i SVG kan det være mer utfordrende å implementere klikklyttere på element-nivå i canvas. Én fremgangsmåte er å selv beregne "omrissene" til de ulike figurene, og utfra klikkposisjonen bestemme hva som trykkes på. Dette gikk forholdsvis greit for disken i midten, som jo bare har en sirkel som omriss. Det virket derimot ikke like trivielt å beregne omrissene for alle trekantene, og ikke minst å sjekke dette opp mot klikkposisjon. Redningen ble funksjonen isPointInPath(), og søsterfunksjonen isPointInStroke(), fra CanvasRenderingContext2D. Gitt en Path2D beregner funksjonene om et gitt punkt er inneholdt eller ikke. Det eneste som gjenstod var å samle sammen alle pathene under tegning, slik at de var tilgjengelige ved senere klikkhåndtering.

Siden canvas egentlig bare er et bilde, og ikke vektorgrafikk slik som SVG, er det viktig å spesifisere dimensjonene til "bildet" via DOM attributter (width og height) og ikke bare via CSS. Hvis ikke ender gjerne bildet opp med å se svært pikselert ut.

jQuery

Som nevnt har jQuery forenklet deler av logikken, blant annet element-spørringer, klikklyttere, CSS-klasse-toggling og enkle animasjoner. For det meste, kanskje utenom sistnevnte, er dette nokså lett å implementere uten jQuery, men det har i det minste bidratt til å øke kodens lesbarhet.

Testing

Siden er testet manuelt i nettleserne Firefox, Chrome og Safari. Her har utviklerverktøyene i Firefox og Chrome vært svært nyttige, spesielt for testing av ulike skjermstørrelser og mobil-visning. Siden er også testet på en faktisk mobiltelefon med Firefox. Ut ifra dette vil jeg påstå at siden har støtte for de fleste enheter.

Underveis i utviklingen dukket det opp et par tilfeller hvor de ulike nettleserne krevde noe forskjellig CSS-styling, blant annet bruk av vendor prefixes i styling av .no-select (som skal hindre tekstmarkering ved interaksjon med kunsten). Her var caniuse.com nyttig for å finne de riktige prefixene for å dekke de fleste brukerne.

Informasjonskilder

Den mest nyttige kilden til informasjon rundt de ulike teknologiene og API-ene har nok vært MDN Web Docs. Det fleste problemstillingene rundt spesielt Canvas API-et fant jeg løsninger for der. Til bruk av jQuery fikk jeg god nytte av den offisielle dokumentasjonen. Naturlig nok fikk jeg også en del hjelp av en søkemotor. I noen tilfeller kunne også StackOverflow presentere noen inspirerende løsninger, men jeg endte ikke opp med å benytte meg av noen av disse. Wikipedia kunne selvfølgelig informere om Bézier-kurver.