Presentasjon

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. Vi vet da følgende om de tre nettleserne vi bekymrer oss for:

Alle tre, MSIE, FireFox 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 og Firefox til å oppføre seg som Opera.

Skjelettet

Vi velger en variant av den siste modellen og lager i 2 stilsett, ett for medietypene screen og print og et som skal virke for projection. Trikket blir å plukke opp F11 og bytte stilsett.

Stilsett for screen og print: test_normalstyle.css

@media screen
{
  .printClass{ display:none;}
  .projectionClass{display:none;}
  .screenClass{ display:block ;}
  .print-and-screen{display:block;}
  .all{display:block;}


  p.li{
    font-size:16px;
    color:black;
  }
}

@media print
{
  .printClass{ display:block ;}
  .projectionClass{display:none;}
  .screenClass{ display:none;}
  .print-and-screen{display:block;}
  .all{display:block;}

  h2{
    page-break-before:always;
    font-size:36px;
  }

  p{
    font-size:16px;
    color:red;
  }
}

Stilsett som skjal brukes for projection: test_projectionstyle.css

.printClass{ display:none;}
.projectionClass{ display:block;}
.screenClass{ display:none;}
.print-and-screen{display:none;}
.all{display:block;}

body{
  margin-left:30px;
  margin-top:10px;
  margin-right:30px;
  padding-left:100px;
  padding-right:100px;
  padding-top:10px;
  font-size:24px;
}

h2{
  page-break-before:always;
}
p{color:green;
  font-size:36px;}

Merk at det siste ikke har media-angivelse. Vi skal sette dette i aksjon ved hjelp av javascript.

Vi lager første versjon av scriptet:

var isFullScreen=false;

// called: body onload=startup()
function startup(){
    document.onkeyup=checkKey;
    isFullScreen=false;
    setStyle();
}

function setStyle()
{
  if(isFullScreen)
  {// set projetion style
      document.getElementById('projectionstyle').disabled=false;
      document.getElementById('normalstyle').disabled=true;
  }
  else
  {// set normal style, print and screen
      document.getElementById('projectionstyle').disabled=true;
      document.getElementById('normalstyle').disabled=false;
  }
}

function checkKey(evt) {
    var evt = (evt) ? evt : event
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode == 122)  // F11
    {
      isFullScreen=!isFullScreen;
      setStyle();
      return true;
    }
}

Vi tester dette med følgende vevside:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>testing</title>
    <link rel="STYLESHEET" id="projectionstyle" 
          href="test_projectionstyle.css"/>
    <link rel="STYLESHEET" id="normalstyle"     
          href="test_normalstyle.css"/>
    <script type="text/javascript" src="test_script.js"> </script>
</head>
<body onload="startup()">

<div class="projectionClass">
    <h1>start</h1> 
  <h2>side 1</h2><p>Litt text</p>  
  <h2>side 2</h2><p>Litt mer text</p> 
</div>

<div class="print-and-screen">
    <h1>start</h1>
    <h2>side 1</h2><p>Litt text</p>
  <h2>side 2</h2><p>Litt mer text</p>
</div>

</body>
</html>

Test, prøv F11 og Print Preview

Så langt har vi greidd å skifte stilsett på F11 i alle nettleserne, men vi får ikke sideeffekt i projection modus i noen av dem. Print ser ut til å går greitt, som forventet siden vi utnytter de media print som vanlig.

Merk at løsningen har en svakhet til. Variabelen isFullScreen kan komme i motfase med virkelighetene, f.eks. hvis vi tar en reload på siden mens vi er i fullscreen modus.

Løsning

Det som gjenstår, rent funksjonelt, er å skaffe oss kontroll over sidebegrepet i projection-modus. Jeg har valgt å se dette i sammenheng med hvordan vi kan tenke oss å redigere materiale av den typen vi her snakker om. Det innebærer at jeg antar inntil videre at en side defineres litt tydeligere enn ved f.eks. h1 eller h2. Det er verdt å merke seg at med den løsningen jeg har valgt kan dette løses opp ved hjelp av litt mer javaskripting. Forhåpentligvis vil dette går fram av den løsningen som vises nedenfor.

Jeg har valgt å bruke html-taggen fieldset som "sidewrapper". Et skjelett til et dokument vil kunne se slik ut:

<html>
<head>
    ... lenker til script og styles ...
</head>
<body onload="startup()">
    
    <!-- the one and only div that will display i projectionmode -->
    <div id="proshow" class="projectionClass">
    ....
    </div>
    
    <!-- alle the pages, one fieldset for each -->
    <div id="allpages" class="print-and-screen">
        <fieldset class="pagefield">
        ... any HTML (except fieldset) ...
        </fieldset>    
        <fieldset class="pagefield">
        ... any HTML (except fieldset) ...
        </fieldset>    
    </div> <!-- all pages -->

</body>
</html>

Strategien blir:

• Å legge alle sidene, fieldset-nodene, i en array.
• Bytte stilsett mved F11, som vist ovenfor
• Presentere neste/forrige side ved Page Down/Page Up

Den "komplette" javascriptkoden blir slik:

    var isFullScreen=false;
    var pages=null;
    var showElt=null;
    var currentPage=0;
    var footer='B.Stenseth - Høgskolen i Østfold';

    function startup(){
      document.onkeyup=checkKey;
      pages=document.getElementsByTagName('fieldset');
      showElt=document.getElementById('showID');
      currentPage=0;
      showPage(currentPage);
      isFullScreen=false;
      setStyle();
      makePrintFooter();
    }

    function setStyle()
    {
        if(isFullScreen)
        {
            // set projetion style
            document.getElementById('projectionstyle').disabled=false;
            document.getElementById('normalstyle').disabled=true;
        }
        else
        {
          // set normal style, print and screen
            document.getElementById('projectionstyle').disabled=true;
            document.getElementById('normalstyle').disabled=false;
        }
    }

    function checkKey(evt) {
      var evt = (evt) ? evt : event
      var charCode = (evt.which) ? evt.which : evt.keyCode
      if (charCode == 122)  // F11
      {
        isFullScreen=!isFullScreen;
        setStyle();
        return true;
      }
      if (isFullScreen && (charCode==33) && (currentPage > 0)) 
      {//page up
        showPage(currentPage-1);
        return true;
      }
      if (isFullScreen && 
          (charCode==34)&&(currentPage < pages.length-1)) 
      {//page down
          showPage(currentPage+1);
          return true;
      }
    }

    function showPage(pix)
    {
      showElt.innerHTML=pages[pix].innerHTML;
      currentPage=pix;
    }

    function makePrintFooter()
    {
      var td=new Date();
      var footer=document.getElementById('footertext').innerHTML;
      var this_date=td.getFullYear()+':'+td.getMonth()+':'+td.getDate();
      for (var ix=0;ix < pages.length;ix++)
      {
        var ruler=document.createElement('hr');
        ruler.className="printClass";
        pages[ix].appendChild(ruler);

        var par=document.createElement('p');
        par.className="printClass";
        var this_url=document.location;
        var fs=footer+' : '+this_date+' : '+this_url;
        var T=document.createTextNode(fs);
        par.appendChild(T);
        pages[ix].appendChild(par);
      }
    }

Jeg har laget et skjelett til et foredrag om eXtreme Programming med denne koden.

Hvis du ser på kildekoden vil du se at på hver side, inne i hvert fieldset, står jeg fritt i å lage HTML-kode som skal vises i de tre forskjellige modiene, scree, print og projection. Eksempelet bruker svært lite stilsetting. Jeg har selvsagt alle muligheter for å "style opp" hva jeg måtte ønske. Den eneste begrensningen jeg har lagt på meg er at jeg, uten noen testing, bruker alle fieldsets som "sider". Jeg kunne erstatte linja:

pages=document.getElementsByTagName('fieldset');

med en funksjon som plukker fram sider og bygger opp arrayen pages på en annen måte.

Stilsettet for print og screen:

Stilsettet for projection:

Det er mange muligheter for å ta denne løsningen videre. Formatteringen kan definitivt raffineres, og det er interessant å se om det er effektivt å produsere slike HTML-sider på grunnlag av databaser eller XML-filer.