Arbeidskrav 2 – emne vevspublisering

Piet Mondrian

Arbeidskrav 2: En hyllest til Piet Mondrian

Arbeidskrav 2 i emne 2; vevspublisering er ferdigstilt: http://bibin.hio.no/~s162610/arbkrav02/index.html. Med denne innleveringen ville jeg publisere en artikkel om kunstneren Piet Mondrian, samt et galleri med hans bilder – satt inn i et layout med utgangspunkt i Mondrians bilder. Jeg ville eksperimentere med bruk av borders for å oppfylle det meste av linjene som inngår i layoutet, samt fyllfarge. Av fyllfargene ble det bare den blå jeg definerete i CSS, mens gul (med sorte linjer på begge sider) og rød er grafikk, plassert som bakgunnsgrafikk i DIV’ene. Den loddrette sorte linjen på høyre side er også bakgrunnsgrafikk – resten er borders (16px).

I og med designideen basert på Mondrian kunne jeg (ville jeg) ikke ha en fleksibel høyde. Wrapper og alle DIV’er har fått definerte høyder, mens i Content-DIV’en med artikkelen er overflow satt til auto – sånn at det blir en scroll-bar på dennes høyre side. jeg er ikke så glad i scroll-barer innenfor browser-vinduet, men jeg har i det minste lagt den i en imaginær linje i grunnkonseptet. Jeg har også satt wrapper til 700px høyde – og da slapp jeg scroll-bar i browser-vinduet på min 15″ LapTop-skjerm. Uansett ser det ikke for galt ut om vinduet blir trangt. Kravet var to sider, en med topp, margområde og hovedområde – og en med det samme pluss footer. Jeg løste dette ved å krympe marg og hovedfelt i høyden, slik at jeg fikk innplassert en footer. Jeg har også brukt fontene bevisst for å understreke den minimalistiske perioden som gav støt til sveiterdesignet som kom etter denne perioden. Jeg har prioritert Helvetica over Arial i Font-Family av den grunn, og ellers fulgt inspirasjonen etter Bauhaus-skolen … Ja, også la jeg til en bildefunksjon basert på JavaScript (Lightbox2), som viser en større versjon av bildet ved å klikke på miniatyrene. Her er også alle titler lagt inn. Og alt validerer:

W3C - CSS Validator

Stilarket: http://bibin.hio.no/~s162610/arbkrav02/stilark.css

W3C HTML Validator

Side 1: http://bibin.hio.no/~s162610/arbkrav02/index.html

W3C HTML Validator

Side 2: http://bibin.hio.no/~s162610/arbkrav02/2.0.html

For blant annet å imøtekomme kravet om universell utforming, men også for korrekt utskrift – i og med at jeg har en ganske lang artikkel i en DIV med fast høyde (scroll), har jeg splittet opp CSS’en: Først en print.ccs hvor jeg har fjernet all pynt, samt knapper/lenker og gjort om fonten til Times (1em), og gjort all tekst 100 % sort. Denne har jeg lenket inn i HTML-siden sammen med en siste; aural.css som skal styre taleeneheter og blindeskrift. Her har jeg åpnet for lenkene til forskjell fra print.css. Men i begge variantene har jeg bildetekster under bildene i galleriet – i en CLASS som tislvarende er skjult i screen-varianten. Men der kommer disse bildetekstene til syne via Javascript-løsningen i LightBox 2. Her er lenker til CSS-validator for de to siste stilarkene:

Valid CSS!

Print: http://bibin.hio.no/~s162610/arbkrav02/print.css

Valid CSS!

Braille og aural: http://bibin.hio.no/~s162610/arbkrav02/aural.css

Dette innlegget ble publisert i HiO - studier. Bokmerk permalenken.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *