!

Dette materialet blir ikke lenger vedlikeholdt. Du vil finne oppdatert materiale på siden: http://borres.hiof.no/wep/

CSS
JavaScript
Media
Børre Stenseth
Eksempler >Presentasjon

Presentasjon

Hva
En flerbruksside (screen,print,projection)

Når jeg skal holde et foredrag eller en forelesning er det oftest ønskelig at jeg leverer følgende:

  • En vevside som kan leses før og/eller etter foredraget.
  • "Handouts". Det vil si et kort sammendrag på papir
  • Selve presentasjonen støttet av framvisning på videokanon

Altså den typiske "Powerpoint"-situasjonen. I denne modulen skal vi se på alternative måter å preparere materiale på, uavhengig av PPT og basert bare på HTML/CSS/Javascript.

Det er flere måter å angripe dette på.

  1. Vi kan ta utgangspunkt i ett eller annet XML-format og kjøre XSLT-transfomasjoner for de forskjellige situasjonene. Dette vil i så fall trolig føre til at vi ut fra ett datasett vil generere 3 forskjellige dokumenter. Enten HTML-dokumenter, eller dersom vi er forsiktige med XML-formatet: HTML eller PDF (via XSL-FO).
  2. Vi kan forsøke å manipulere en HTML-side med JavaScript og stilsett.

Vi velger den andre angrepsvinkelen.

MSIE, FireFox, Chrome og Opera, har implementert stilsettskifte for print/printpreview. Det vil si at vi kan bruke media taggene screen og print og få effekt av disse. Du ser en effekt av dette dersom du ber om print eller print preview av denne siden. Opera har i tillegg implementert media projection, og aktiviserer dette når vi trykker F11 for full skjerm. De andre to har også F11 for full skjerm men aktiviserer ikke en alternativ medietype, screen beholdes. Hvis du kjører Opera og prøver F11 på denne siden vil du få en layouteffekt, men den er ikke særlig god eller planlagt for foredrag, projection. Det eneste jeg har gjort er å lage forstørret skrift på kodefragmenter.

Alle tre ser ut til å reagere fornuftig på tastene Page-Up og Page-Down slik at vi kan forvente at sideskift i fullskjermmodus kan fungere i foredragssituasjonen.

Hvis vi skal realisere vår ide om et alternativ til PPT ved hjelp av JavaScript/stilsett som virker i alle de tre nettleserne, så synes det å være to måter å tenke på. Enten så tar vi full kontroll over stilsettene og glemmer Operas projectionløsning eller så forsøker vi å få MSIE, Chrome og Firefox til å oppføre seg som Opera.

Vi velger å ta kontroll over stilsettene og kopler dem til og fra ved hjelp av javascript. Løsningen er laget i HTML5.

Løsningen presenterer seg selv som webside eller foredrag (F11, pageUp og pageDown);

Slides http://www.it.hiof.no/~borres/dw/presentation/self/index.html

Eller du kan se på et (uferdig) foredrag om XP-metoden.

Slides http://www.it.hiof.no/~borres/dw/presentation/self/xp.html

Eller en minimusvariant med to slides som du kan bruke som skjelett for egne løsninger ( inspiser og kopier kildekoden og kildekoden til stilsett og javascript)

Slides http://www.it.hiof.no/~borres/dw/presentation/self/skeleton.html
Referanser

Eksempelet Picasso viser programmering av stilsett for et litt annet formål.

Vedlikehold

B.Stenseth, april 2011

( Velkommen ) Eksempler >Presentasjon ( Picasso )