Slides fra webside

Vi er ofte i den situasjonen at vi ønsker å vedlikeholde samme material for forskjellige formål. Vi vil gjøre det tilgjengelig på web, vi vil skrive det ut og vi vil kunne presentere det i et foredrag eller en forelesning, som en PowerPoint prsentasjon.

Hensikten er å lage en vevside som;

kan brukes, leses som den er
kan skrives ut med en fornuftig sidebrekking
kan brukes som grunnlag for en presentasjon

Basis

Løsningen er basert på en enkel struktur og dynamisk bruk av stilsett.

Løsningen er basert på følgende:

Alle nye nettlesere reagerer på F11 ved å toggle fullscreen
Vi bruker flere stilsett og bytter etter behov
Alle nye nettlesere identifiserer riktig media-type for "screen" og "print"
Vi bygger siden med en struktur som gjør det lett å identifisere "slides"

Opera greier i tillegg til "scren" og "media" også å kople media "projection" till fullscreen.modus.

Section

Hver section består av "vilkårlig" HTML-kode

Når en section skal presenteres flyttes innholdet til content-delen av slide malen.

En section vi normalt bestå av:

et h2-element
paragrafer som enten er
- vanlige, dvs synlige i alle media
- merket med class="print-and-screen", dvs. de er ikke synlig i projection

Det er enkelt å utvide repetoiret av stilklasser for ulike medier.

Javascriptkode:

function slideShow(){
var isFullScreen=false;
var sections=document.getElementsByTagName('section');
var showElt=document.getElementById('slideContent');
var currentSlide=0;
document.onkeydown=checkKey;

showSlide(currentSlide);
changeStyle(isFullScreen);

function changeStyle(full){      
	if(full)
	{
		document.getElementById('projectionstyle').disabled=false;
		document.getElementById('screenstyle').disabled=true;
		document.getElementById('printstyle').disabled=true;
	}
	else
	{
		document.getElementById('projectionstyle').disabled=true;
		document.getElementById('screenstyle').disabled=false;
		document.getElementById('printstyle').disabled=false;
	}
}

function checkKey(evt) {
	var evt = (evt) ? evt : event
	var charCode = (evt.which) ? evt.which : evt.keyCode
	if(isFullScreen)
	{// filter legal keybd input, too strict ?		
	if( 
	  (charCode != 122)&&                     //f11
	  (charCode != 33) && (charCode != 34)&& //page up/dwn
	  (charCode != 38) && (charCode != 40)    //arrow up/dwn
	  )
	return false;
	}
	if (charCode == 122)  // F11
	{
		isFullScreen=!isFullScreen;
		changeStyle(isFullScreen);
		return true;
	}
	if (isFullScreen && 
		(charCode==33) && (currentSlide > 0)) 
	{//page up
		showSlide(currentSlide-1);
		return true;
	}
	if (isFullScreen && 
		(charCode==34)&&(currentSlide < sections.length-1)) 
	{//page down
		  showSlide(currentSlide+1);
		  return true;
	}
}

function showSlide(pix){
	showElt.innerHTML=sections[pix].innerHTML;
	currentSlide=pix;
}
}

Stilsett

Tre stilsett med id'er screenstyle, printstyle og projectionstyle må være på plass

I tillegg kan du selvsagt ha så mange stildefinisjone og stilsett som innholdet krever

Minimalistiske løsninger

Screen

@media screen
{
  #projection{display:none;}
  .printFooter{ display:none;}
  section,.print-and-screen{display:block;}
  p,li{font-size:11px; color:black;}
  .codebox{width:100%;overflow: auto;max-height: 30em;}
}

@media print
{
  h2{page-break-before:always;font-size:36px;}
  p{font-size:12px;color:black;}  
  #projection{display:none;}
  .codebox{width:100%;overflow: auto;max-height: 300em;}
  section,.print-and-screen{display:block;}
  .printFooter{ display:block ;font-size:11px;color:blue;
       position:fixed;right:5px;bottom:10px	
  }
}

Projection

body{
  margin-left:30px;margin-top:10px;margin-right:30px;
  padding-left:100px;padding-right:100px;padding-top:10px;
  font-size:24px;
}
.printFooter{ display:none;}
#projection{ display:block;}
#projection footer{font-size:11px; color:gray;
       position:fixed;bottom:10px;width:100%;
}
#projection header{color:gray;width:100%;
       padding-top:10px; padding-left:10px; margin-bottom:40px;
}
section,.print-and-screen{display:none;}
.codebox{width:100%;overflow: auto;max-height: 30em;font-size:20px}
li{font-size:24px;margin:10px}
h1,h2{ page-break-before:always; font-size:36px;
}

Slides fra webside

Basis

Dokumentstruktur

Section

Javascriptkode:

Stilsett

Navigering

Innhold på en slide

Video

Canvas