Life, The Universe and Everything

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:

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

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

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:

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

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

To av bøkene som står på pensumlista vår finnes i online-versjoner på nett. Jeg har ikke bladd igjennom alt for å sjekke at alt er med – men det kan se sånn ut … Så – hvis du ikke er avhengig av papir, sjekk ut disse:

David Sawyer McFarland: Dreamweaver-CS4-The-Missing-Manual-by-OReilly-Media

Jeffrey Zeldman: Designing With Web Standards

Hardt nok å være meg

Arbeidskrav 1 i emne 2; vevspublisering er ferdigstilt: http://bibin.hio.no/~s162610/index.html. Ideen med side 1 er The Beatles’ “A Hard Days Night” -coveret. Jeg tok alle bildene med fjernutløser og satte lyset mest mulig som på originalen. Og så la jeg inn en litt hemmelig popUp på et av bildene som viser originalbildet.

Kravet var tre sider med felles CSS og bruk av tabell og lister samt minst et bilde. Jeg har konstruert albumet som  en DIV med alt det blå som bakgrunnsgrafikk, med alle portrettene satt inn i tabell. På side to, Meg og studiene, har jeg laget en liste som er tilpasset med grafikkbasert kuler og litt dypere innrykk. Ellers var målet med den siden å lage et elegant layout, inspirert av sveitserstil. Den tredje siden, bildegalleriet, kostet mest arbeid. HiO-serveren ville ikke samarbeide med flashbaserte løsninger, så jeg endte opp med en JavaScriptbasert løsning. Mye jobb – men kult resultat. Og alt validerer:

Stilarket: http://bibin.hio.no/~s162610/screen.css

Hjemmesiden: http://bibin.hio.no/~s162610/index.html

Side 2 – Meg og studiene: http://bibin.hio.no/~s162610/index.html

Side 3 – Bildegalleriet: http://bibin.hio.no/~s162610/2.0.html