Kreativ webkodning

Webfeature

En webfeature, webdoc eller webdok er en online artikel, som indrager flere forskellige typer af medier fx video og animationer. De indeholder ofte effekter som udløses når man scroller.

Denne webfeature udgivet af the New York Times indeholder flere videoer og interviews som hjælper med at give kontekst og en bedre fornemmelse af historien og stedet den skete. Flere af videoerne er embedded i artiklen og man skal selv starte dem, men nogen bruges som baggrund til artiklen, som i øvrigt gør brug af parallax scrolling (baggrunden står stille eller scroller langsommere en resten af artiklen i forgrunden).

Denne webfeature fra dr.dk bruger parallax scrolling gennem helle artiklen, til at skabe en slags tegneserie gennem som passer til historien og viser på et tidspunkt et kort over olieledninger. Artiklen er helt gennemsigtig så man kan kune se tekst og billeder, hvilket gør at man kan se tegneserien i baggrunden hele tiden uden nogen brud. Dette kaldes for scrollytelling.

Genbesøg af HTML/CSS 

Jeg valgte kun at lave øvelse CSS4. Jeg synes at jeg huskede det meste, det føltes i hvert fald relativt nemt at få fat i det igen, dog var der nogle fortegn jeg lige skulle mindes om.

Video

Refleksion

Jeg mener, at jeg har fået nogenlunde styr på at arbejde med videoer på hjemmesider nu. Der er nok nogle ting jeg ikke kommer til at huske, men jeg vil i hvert fald have dem liggende i baghovedet. Jeg kom lidt i problemer, da min computer genstartede af sig selv ca. halvejs gennem første øvelse, fordi brackets ikke lod my genåbne filerne, så jeg blev nød til at starte forfra, dog tog det heldigvis kun et par minutter, og jeg nåede at blive færdig med begge øvelser inden modulet var ovre.

Parallax scrolling

Baggrunden bevæger sig ikke/med en anden hastighed en forgrunden, når man scroller.

Refleksion

Jeg har lært hvordan man laver parallax scrolling, ved at indsætte billeder og video som en fastlåst baggrund. Det var egentlig lidt nemmere end jeg havde forestillet mig, og jeg oplevede ingen problemer, udover at jeg havde lidt for meget tekst, men det var jo nemt nok at fjerne, da det bare var genereret tekst uden nogen rigtig substans. Jeg vil mene at jeg har fået nogenlunde styr på det, og at jeg ville kunne arbejde med det i fremtiden.

Animation

Refleksion

Jeg har fået en god fornemmelse for, hvordan animation fungerer i HTML og CSS. Det gik for det meste relativt godt, men jeg kæmpede en smule med den sidste øvelse. Ellers gik det godt, men selvom jeg føler, at jeg har en god fornemmelse for det, har jeg nok brug for at arbejde med det en smule mere for at få det helt på plads.

Audio

Refleksion

I denne øvelse har jeg lært, hvordan man laver en knap der både starter og pauser musik med javascript. Først prøvede jeg dog selv krafter med at lave en knap der pausede musikken, som er den fil der ligger ovenfor.