This slide show can be driven in the same way as Power Point. +To advance to the next slide click anywhere on the page with the +mouse, or press the space bar. You can move forwards or backwards +through the slides with the Cursor left, Cursor right, Pg Up and +Pg Dn keys. The font size is automatically adjusted to match the +browser's window width, but you can also adjust it manually using +the "S" key for smaller and the "B" key for bigger. You can also +use the "<" and ">" keys. Before printing, use the "A" key +to toggle between current slide and all slides. Use the "F" key to +switch off/on the bottom status line. The "K" key toggles the use +of mouse click to advance to the next slide. You can use "C" to +show the table of contents and any other key to hide it. Use the +"F11" key to toggle the browser's full screen mode. Note that not +all keys are supported in all browsers, as browsers may reserve +some keys for browser control and this varies from one browser to +the next.

Firefox users may want the autohide +extension to hide the toolbars when entering full screen with F11. +Newer versions of Firefox have built-in support for SVG, but on older +versions for Microsoft Widows, you should consider installing the Adobe SVG Viewer +6.0.

If you would like to see how Slidy works, use View Source to view +the XHTML markup, or see this longer explanation, +which also explains additional features. Each slide is marked up as +a div element with class="slide". CSS positioning and percentage +widths on images can be used to ensure your image rich slides scale +to match the window size. Content to be revealed incrementally can +be marked up with class="incremental". The linked style sheet and +scripts were developed as a Web-based alternative to proprietary +presentation tools and have been tested on a variety of recent +browsers. Integrated editing support is under development. Please +send your comments to Dave +Raggett <dsr@w3.org>. +If you find Slidy useful, you may want to consider becoming a +W3C Supporter.

You are welcome to make use of the slide show style sheets, +scripts and help file under W3C's document use +and software +licensing rules.

+function collectNotes() +{ + var notes = new Array(); + var divs = document.body.getElementsByTagName("div"); + + for (var i = 0; i < divs.length; ++i) + { + div = divs.item(i); + + if (hasClass(div, "handout")) + { + // add slide to collection + notes[notes.length] = div; + + // hide handout notes as they are found + div.style.display = "none"; + div.style.visibility = "hidden"; + } + } + + return notes; +} + +// return new array of all

+// including named backgrounds e.g. class="background titlepage" +function collectBackgrounds() +{ + var backgrounds = new Array(); + var divs = document.body.getElementsByTagName("div"); + + for (var i = 0; i < divs.length; ++i) + { + div = divs.item(i); + + if (hasClass(div, "background")) + { + // add slide to collection + backgrounds[backgrounds.length] = div; + + // hide named backgrounds as they are found + // e.g. class="background epilog" + if (getClassList(div) != "background") + { + div.style.display = "none"; + div.style.visibility = "hidden"; + } + } + } + + return backgrounds; +} + +// show just the backgrounds pertinent to this slide +function syncBackground(slide) +{ + var background; + var bgColor; + + if (slide.currentStyle) + bgColor = slide.currentStyle["backgroundColor"]; + else if (document.defaultView) + { + var styles = document.defaultView.getComputedStyle(slide,null); + + if (styles) + bgColor = styles.getPropertyValue("background-color"); + else // broken implementation probably due Safari or Konqueror + { + //alert("defective implementation of getComputedStyle()"); + bgColor = "transparent"; + } + } + else + bgColor == "transparent"; + + if (bgColor == "transparent") + { + var slideClass = getClassList(slide); + + for (var i = 0; i < backgrounds.length; i++) + { + background = backgrounds[i]; + + var bgClass = getClassList(background); + + if (matchingBackground(slideClass, bgClass)) + { + background.style.display = "block"; + background.style.visibility = "visible"; + } + else + { + background.style.display = "none"; + background.style.visibility = "hidden"; + } + } + } + else // forcibly hide all backgrounds + hideBackgrounds(); +} + +function hideBackgrounds() +{ + for (var i = 0; i < backgrounds.length; i++) + { + background = backgrounds[i]; + background.style.display = "none"; + background.style.visibility = "hidden"; + } +} + +// compare classes for slide and background +function matchingBackground(slideClass, bgClass) +{ + if (bgClass == "background") + return true; + + // define pattern as regular expression + var pattern = /\w+/g; + + // check for matches and place result in array + var result = slideClass.match(pattern); + + // now check if desired name is present for background + for (var i = 0; i < result.length; i++) + { + if (hasToken(bgClass, result[i])) + return true; + } + + return false; +} + +// left to right traversal of root's content +function nextNode(root, node) +{ + if (node == null) + return root.firstChild; + + if (node.firstChild) + return node.firstChild; + + if (node.nextSibling) + return node.nextSibling; + + for (;;) + { + node = node.parentNode; + + if (!node || node == root) + break; + + if (node && node.nextSibling) + return node.nextSibling; + } + + return null; +} + +// right to left traversal of root's content +function previousNode(root, node) +{ + if (node == null) + { + node = root.lastChild; + + if (node) + { + while (node.lastChild) + node = node.lastChild; + } + + return node; + } + + if (node.previousSibling) + { + node = node.previousSibling; + + while (node.lastChild) + node = node.lastChild; + + return node; + } + + if (node.parentNode != root) + return node.parentNode; + + return null; +} + +// HTML elements that can be used with class="incremental" +// note that you can also put the class on containers like +// up, ol, dl, and div to make their contents appear +// incrementally. Upper case is used since this is what +// browsers report for HTML node names (text/html). +function incrementalElementList() +{ + var inclist = new Array(); + inclist["P"] = true; + inclist["PRE"] = true; + inclist["LI"] = true; + inclist["BLOCKQUOTE"] = true; + inclist["DT"] = true; + inclist["DD"] = true; + inclist["H2"] = true; + inclist["H3"] = true; + inclist["H4"] = true; + inclist["H5"] = true; + inclist["H6"] = true; + inclist["SPAN"] = true; + inclist["ADDRESS"] = true; + inclist["TABLE"] = true; + inclist["TR"] = true; + inclist["TH"] = true; + inclist["TD"] = true; + inclist["IMG"] = true; + inclist["OBJECT"] = true; + return inclist; +} + +function nextIncrementalItem(node) +{ + var slide = slides[slidenum]; + + for (;;) + { + node = nextNode(slide, node); + + if (node == null || node.parentNode == null) + break; + + if (node.nodeType == 1) // ELEMENT + { + if (node.nodeName == "BR") + continue; + + if (hasClass(node, "incremental") + && okayForIncremental[node.nodeName]) + return node; + + if (hasClass(node.parentNode, "incremental") + && !hasClass(node, "non-incremental")) + return node; + } + } + + return node; +} + +function previousIncrementalItem(node) +{ + var slide = slides[slidenum]; + + for (;;) + { + node = previousNode(slide, node); + + if (node == null || node.parentNode == null) + break; + + if (node.nodeType == 1) + { + if (node.nodeName == "BR") + continue; + + if (hasClass(node, "incremental") + && okayForIncremental[node.nodeName]) + return node; + + if (hasClass(node.parentNode, "incremental") + && !hasClass(node, "non-incremental")) + return node; + } + } + + return node; +} + +// set visibility for all elements on current slide with +// a parent element with attribute class="incremental" +function setVisibilityAllIncremental(value) +{ + var node = nextIncrementalItem(null); + + while (node) + { + node.style.visibility = value; + node = nextIncrementalItem(node); + } +} + +// reveal the next hidden item on the slide +// node is null or the node that was last revealed +function revealNextItem(node) +{ + node = nextIncrementalItem(node); + + if (node && node.nodeType == 1) // an element + node.style.visibility = "visible"; + + return node; +} + + +// exact inverse of revealNextItem(node) +function hidePreviousItem(node) +{ + if (node && node.nodeType == 1) // an element + node.style.visibility = "hidden"; + + return previousIncrementalItem(node); +} + + +/* set click handlers on all anchors */ +function patchAnchors() +{ + var anchors = document.body.getElementsByTagName("a"); + + for (var i = 0; i < anchors.length; ++i) + { + anchors[i].onclick = clickedAnchor; + } +} + +function clickedAnchor(e) +{ + if (!e) + var e = window.event; + + // compare this.href with location.href + // for link to another slide in this doc + + if (pageAddress(this.href) == pageAddress(location.href)) + { + // yes, so find new slide number + var newslidenum = findSlideNumber(this.href); + + if (newslidenum != slidenum) + { + slide = slides[slidenum]; + hideSlide(slide); + slidenum = newslidenum; + slide = slides[slidenum]; + showSlide(slide); + setLocation(); + } + } + else if (this.target == null) + location.href = this.href; + + this.blur(); + stopPropagation(e); +} + +function pageAddress(uri) +{ + var i = uri.indexOf("#"); + + if (i < 0) + i = uri.indexOf("%23"); + + // check if anchor is entire page + + if (i < 0) + return uri; // yes + + return uri.substr(0, i); +} + +function showSlideNumber() +{ + slideNumElement.innerHTML = "slide".localize() + " " + + (slidenum + 1) + "/" + slides.length; +} + +// every 200mS check if the location has been changed as a +// result of the user activating the Back button/menu item +// doesn't work for Opera < 9.5 +function checkLocation() +{ + var hash = location.hash; + + if (slidenum > 0 && (hash == "" || hash == "#")) + gotoSlide(0); + else if (hash.length > 2 && hash != "#("+(slidenum+1)+")") + { + var num = parseInt(location.hash.substr(2)); + + if (!isNaN(num)) + gotoSlide(num-1); + } +} + +// this doesn't push location onto history stack for IE +// for which a hidden iframe hack is needed: load page into +// the iframe with script that set's parent's location.hash +// but that won't work for standalone use unless we can +// create the page dynamically via a javascript: URL +function setLocation() +{ + var uri = pageAddress(location.href); + var hash = "#(" + (slidenum+1) + ")"; + + if (slidenum >= 0) + uri = uri + hash; + + if (ie && !ie8) + pushHash(hash); + + if (uri != location.href /*&& !khtml */) + location.href = uri; + + if (khtml) + hash = "(" + (slidenum+1) + ")"; + + if (!ie && location.hash != hash && location.hash != "") + location.hash = hash; + + document.title = title + " (" + (slidenum+1) + ")"; + showSlideNumber(); +} + +// only used for IE6 and IE7 +function onFrameLoaded(hash) +{ + location.hash = hash; + var uri = pageAddress(location.href); + location.href = uri + hash; +} + +// history hack with thanks to Bertrand Le Roy +function pushHash(hash) +{ + if (hash == "") hash = "#(1)"; + window.location.hash = hash; + var doc = document.getElementById("historyFrame").contentWindow.document; + doc.open("javascript:''"); + doc.write("hello mum"); + doc.close(); +} + +// find current slide based upon location +// first find target anchor and then look +// for associated div element enclosing it +// finally map that to slide number +function findSlideNumber(uri) +{ + // first get anchor from page location + + var i = uri.indexOf("#"); + + // check if anchor is entire page + + if (i < 0) + return 0; // yes + + var anchor = unescape(uri.substr(i+1)); + + // now use anchor as XML ID to find target + var target = document.getElementById(anchor); + + if (!target) + { + // does anchor look like "(2)" for slide 2 ?? + // where first slide is (1) + var re = /\((\d)+\)/; + + if (anchor.match(re)) + { + var num = parseInt(anchor.substring(1, anchor.length-1)); + + if (num > slides.length) + num = 1; + + if (--num < 0) + num = 0; + + return num; + } + + // accept [2] for backwards compatibility + re = /\[(\d)+\]/; + + if (anchor.match(re)) + { + var num = parseInt(anchor.substring(1, anchor.length-1)); + + if (num > slides.length) + num = 1; + + if (--num < 0) + num = 0; + + return num; + } + + // oh dear unknown anchor + return 0; + } + + // search for enclosing slide + + while (true) + { + // browser coerces html elements to uppercase! + if (target.nodeName.toLowerCase() == "div" && + hasClass(target, "slide")) + { + // found the slide element + break; + } + + // otherwise try parent element if any + + target = target.parentNode; + + if (!target) + { + return 0; // no luck! + } + }; + + for (i = 0; i < slides.length; ++i) + { + if (slides[i] == target) + return i; // success + } + + // oh dear still no luck + return 0; +} + +// find slide name from first h1 element +// default to document title + slide number +function slideName(index) +{ + var name = null; + var slide = slides[index]; + + var heading = findHeading(slide); + + if (heading) + name = extractText(heading); + + if (!name) + name = title + "(" + (index + 1) + ")"; + + name.replace(/\&/g, "&"); + name.replace(/\/g, ">"); + + return name; +} + +// find first h1 element in DOM tree +function findHeading(node) +{ if (!node || node.nodeType != 1) + return null; + + if (node.nodeName == "H1" || node.nodeName == "h1") + return node; + + var child = node.firstChild; + + while (child) + { + node = findHeading(child); + + if (node) + return node; + + child = child.nextSibling; + } + + return null; +} + +// recursively extract text from DOM tree +function extractText(node) +{ + if (!node) + return ""; + + // text nodes + if (node.nodeType == 3) + return node.nodeValue; + + // elements + if (node.nodeType == 1) + { + node = node.firstChild; + var text = ""; + + while (node) + { + text = text + extractText(node); + node = node.nextSibling; + } + + return text; + } + + return ""; +} + + +// find copyright text from meta element +function findCopyright() +{ + var name, content; + var meta = document.getElementsByTagName("meta"); + + for (var i = 0; i < meta.length; ++i) + { + name = meta[i].getAttribute("name"); + content = meta[i].getAttribute("content"); + + if (name == "copyright") + return content; + } + + return null; +} + +function findSizeAdjust() +{ + var name, content, offset; + var meta = document.getElementsByTagName("meta"); + + for (var i = 0; i < meta.length; ++i) + { + name = meta[i].getAttribute("name"); + content = meta[i].getAttribute("content"); + + if (name == "font-size-adjustment") + return 1 * content; + } + + return 1; +} + +function addToolbar() +{ + var slideCounter, page; + + var toolbar = createElement("div"); + toolbar.setAttribute("class", "toolbar"); + + if (ns_pos) // a reasonably behaved browser + { + var right = document.createElement("div"); + right.setAttribute("style", "float: right; text-align: right"); + + slideCounter = document.createElement("div") + slideCounter.innerHTML = "slide".localize() + " n/m"; + right.appendChild(slideCounter); + toolbar.appendChild(right); + + var left = document.createElement("div"); + left.setAttribute("style", "text-align: left"); + + // global end of slide indicator + eos = document.createElement("span"); + eos.innerHTML = "* "; + left.appendChild(eos); + + var help = document.createElement("a"); + help.setAttribute("href", helpPage); + help.setAttribute("title", helpText.localize()); + help.innerHTML = "help?".localize(); + left.appendChild(help); + helpAnchor = help; // save for focus hack + + var gap1 = document.createTextNode(" "); + left.appendChild(gap1); + + var contents = document.createElement("a"); + contents.setAttribute("href", "javascript:toggleTableOfContents()"); + contents.setAttribute("title", "table of contents".localize()); + contents.innerHTML = "contents?".localize(); + left.appendChild(contents); + + var gap2 = document.createTextNode(" "); + left.appendChild(gap2); + + var start = document.createElement("a"); + start.setAttribute("href", "javascript:firstSlide()"); + start.setAttribute("title", "restart presentation".localize()); + start.innerHTML = "restart?".localize(); +// start.setAttribute("href", "javascript:printSlides()"); +// start.setAttribute("title", "print all slides".localize()); +// start.innerHTML = "print!".localize(); + left.appendChild(start); + + var copyright = findCopyright(); + + if (copyright) + { + var span = document.createElement("span"); + span.innerHTML = copyright; + span.style.color = "black"; + span.style.marginLeft = "4em"; + left.appendChild(span); + } + + toolbar.appendChild(left); + } + else // IE so need to work around its poor CSS support + { + toolbar.style.position = (ie7 ? "fixed" : "absolute"); + toolbar.style.zIndex = "200"; + toolbar.style.width = "99.9%"; + toolbar.style.height = "1.2em"; + toolbar.style.top = "auto"; + toolbar.style.bottom = "0"; + toolbar.style.left = "0"; + toolbar.style.right = "0"; + toolbar.style.textAlign = "left"; + toolbar.style.fontSize = "60%"; + toolbar.style.color = "red"; + toolbar.borderWidth = 0; + toolbar.style.background = "rgb(240,240,240)"; + + // would like to have help text left aligned + // and page counter right aligned, floating + // div's don't work, so instead use nested + // absolutely positioned div's. + + var sp = document.createElement("span"); + sp.innerHTML = " * "; + toolbar.appendChild(sp); + eos = sp; // end of slide indicator + + var help = document.createElement("a"); + help.setAttribute("href", helpPage); + help.setAttribute("title", helpText.localize()); + help.innerHTML = "help?".localize(); + toolbar.appendChild(help); + helpAnchor = help; // save for focus hack + + var gap1 = document.createTextNode(" "); + toolbar.appendChild(gap1); + + var contents = document.createElement("a"); + contents.setAttribute("href", "javascript:toggleTableOfContents()"); + contents.setAttribute("title", "table of contents".localize()); + contents.innerHTML = "contents?".localize(); + toolbar.appendChild(contents); + + var gap2 = document.createTextNode(" "); + toolbar.appendChild(gap2); + + var start = document.createElement("a"); + start.setAttribute("href", "javascript:firstSlide()"); + start.setAttribute("title", "restart presentation".localize()); + start.innerHTML = "restart?".localize(); +// start.setAttribute("href", "javascript:printSlides()"); +// start.setAttribute("title", "print all slides".localize()); +// start.innerHTML = "print!".localize(); + toolbar.appendChild(start); + + var copyright = findCopyright(); + + if (copyright) + { + var span = document.createElement("span"); + span.innerHTML = copyright; + span.style.color = "black"; + span.style.marginLeft = "2em"; + toolbar.appendChild(span); + } + + slideCounter = document.createElement("div") + slideCounter.style.position = "absolute"; + slideCounter.style.width = "auto"; //"20%"; + slideCounter.style.height = "1.2em"; + slideCounter.style.top = "auto"; + slideCounter.style.bottom = 0; + slideCounter.style.right = "0"; + slideCounter.style.textAlign = "right"; + slideCounter.style.color = "red"; + slideCounter.style.background = "rgb(240,240,240)"; + + slideCounter.innerHTML = "slide".localize() + " n/m"; + toolbar.appendChild(slideCounter); + } + + // ensure that click isn't passed through to the page + toolbar.onclick = stopPropagation; + document.body.appendChild(toolbar); + slideNumElement = slideCounter; + setEosStatus(false); + + return toolbar; +} + +function isShownToc() +{ + if (toc && toc.style.visible == "visible") + return true; + + return false; +} + +function showTableOfContents() +{ + if (toc) + { + if (toc.style.visibility != "visible") + { + toc.style.visibility = "visible"; + toc.style.display = "block"; + toc.focus(); + + if (ie7 && slidenum == 0) + setTimeout("ieHack()", 100); + } + else + hideTableOfContents(); + } +} + +function hideTableOfContents() +{ + if (toc && toc.style.visibility != "hidden") + { + toc.style.visibility = "hidden"; + toc.style.display = "none"; + + try + { + if (!opera) + helpAnchor.focus(); + } + catch (e) + { + } + } +} + +function toggleTableOfContents() +{ + if (toc) + { + if (toc.style.visible != "visible") + showTableOfContents(); + else + hideTableOfContents(); + } +} + +// called on clicking toc entry +function gotoEntry(e) +{ + var target; + + if (!e) + var e = window.event; + + if (e.target) + target = e.target; + else if (e.srcElement) + target = e.srcElement; + + // work around Safari bug + if (target.nodeType == 3) + target = target.parentNode; + + if (target && target.nodeType == 1) + { + var uri = target.getAttribute("href"); + + if (uri) + { + //alert("going to " + uri); + var slide = slides[slidenum]; + hideSlide(slide); + slidenum = findSlideNumber(uri); + slide = slides[slidenum]; + lastShown = null; + setLocation(); + setVisibilityAllIncremental("hidden"); + setEosStatus(!nextIncrementalItem(lastShown)); + showSlide(slide); + //target.focus(); + + try + { + if (!opera) + helpAnchor.focus(); + } + catch (e) + { + } + } + } + + hideTableOfContents(e); + if (ie7) ieHack(); + stopPropagation(e); + return cancel(e); +} + +// called onkeydown for toc entry +function gotoTocEntry(event) +{ + var key; + + if (!event) + var event = window.event; + + // kludge around NS/IE differences + if (window.event) + key = window.event.keyCode; + else if (event.which) + key = event.which; + else + return true; // Yikes! unknown browser + + // ignore event if key value is zero + // as for alt on Opera and Konqueror + if (!key) + return true; + + // check for concurrent control/command/alt key + // but are these only present on mouse events? + + if (event.ctrlKey || event.altKey) + return true; + + if (key == 13) + { + var uri = this.getAttribute("href"); + + if (uri) + { + //alert("going to " + uri); + var slide = slides[slidenum]; + hideSlide(slide); + slidenum = findSlideNumber(uri); + slide = slides[slidenum]; + lastShown = null; + setLocation(); + setVisibilityAllIncremental("hidden"); + setEosStatus(!nextIncrementalItem(lastShown)); + showSlide(slide); + //target.focus(); + + try + { + if (!opera) + helpAnchor.focus(); + } + catch (e) + { + } + } + + hideTableOfContents(); + if (ie7) ieHack(); + return cancel(event); + } + + if (key == 40 && this.next) + { + this.next.focus(); + return cancel(event); + } + + if (key == 38 && this.previous) + { + this.previous.focus(); + return cancel(event); + } + + return true; +} + +function isTitleSlide(slide) +{ + return hasClass(slide, "title"); +} + +// create div element with links to each slide +function tableOfContents() +{ + var toc = document.createElement("div"); + addClass(toc, "toc"); + //toc.setAttribute("tabindex", "0"); + + var heading = document.createElement("div"); + addClass(heading, "toc-heading"); + heading.innerHTML = "Table of Contents".localize(); + + heading.style.textAlign = "center"; + heading.style.width = "100%"; + heading.style.margin = "0"; + heading.style.marginBottom = "1em"; + heading.style.borderBottomStyle = "solid"; + heading.style.borderBottomColor = "rgb(180,180,180)"; + heading.style.borderBottomWidth = "1px"; + + toc.appendChild(heading); + var previous = null; + + for (var i = 0; i < slides.length; ++i) + { + var title = hasClass(slides[i], "title"); + var num = document.createTextNode((i + 1) + ". "); + + toc.appendChild(num); + + var a = document.createElement("a"); + a.setAttribute("href", "#(" + (i+1) + ")"); + + if (title) + addClass(a, "titleslide"); + + var name = document.createTextNode(slideName(i)); + a.appendChild(name); + a.onclick = gotoEntry; + a.onkeydown = gotoTocEntry; + a.previous = previous; + + if (previous) + previous.next = a; + + toc.appendChild(a); + + if (i == 0) + toc.first = a; + + if (i < slides.length - 1) + { + var br = document.createElement("br"); + toc.appendChild(br); + } + + previous = a; + } + + toc.focus = function () { + if (this.first) + this.first.focus(); + } + + toc.onmouseup = mouseButtonUp; + + toc.onclick = function (e) { + e||(e=window.event); + + if (selectedTextLen <= 0) + hideTableOfContents(); + + stopPropagation(e); + + if (e.cancel != undefined) + e.cancel = true; + + if (e.returnValue != undefined) + e.returnValue = false; + + return false; + }; + + toc.style.position = "absolute"; + toc.style.zIndex = "300"; + toc.style.width = "60%"; + toc.style.maxWidth = "30em"; + toc.style.height = "30em"; + toc.style.overflow = "auto"; + toc.style.top = "auto"; + toc.style.right = "auto"; + toc.style.left = "4em"; + toc.style.bottom = "4em"; + toc.style.padding = "1em"; + toc.style.background = "rgb(240,240,240)"; + toc.style.borderStyle = "solid"; + toc.style.borderWidth = "2px"; + toc.style.fontSize = "60%"; + + document.body.insertBefore(toc, document.body.firstChild); + return toc; +} + +function replaceByNonBreakingSpace(str) +{ + for (var i = 0; i < str.length; ++i) + str[i] = 160; +} + + +function initOutliner() +{ + var items = document.getElementsByTagName("LI"); + + for (var i = 0; i < items.length; ++i) + { + var target = items[i]; + + if (!hasClass(target.parentNode, "outline")) + continue; + + target.onclick = outlineClick; + + if (!ns_pos) + { + target.onmouseover = hoverOutline; + target.onmouseout = unhoverOutline; + } + + if (foldable(target)) + { + target.foldable = true; + target.onfocus = function () {outline = this;}; + target.onblur = function () {outline = null;}; + + if (!target.getAttribute("tabindex")) + target.setAttribute("tabindex", "0"); + + if (hasClass(target, "expand")) + unfold(target); + else + fold(target); + } + else + { + addClass(target, "nofold"); + target.visible = true; + target.foldable = false; + } + } +} + +function foldable(item) +{ + if (!item || item.nodeType != 1) + return false; + + var node = item.firstChild; + + while (node) + { + if (node.nodeType == 1 && isBlock(node)) + return true; + + node = node.nextSibling; + } + + return false; +} + +function fold(item) +{ + if (item) + { + removeClass(item, "unfolded"); + addClass(item, "folded"); + } + + var node = item ? item.firstChild : null; + + while (node) + { + if (node.nodeType == 1 && isBlock(node)) // element + { + // note that getElementStyle won't work for Safari 1.3 + node.display = getElementStyle(node, "display", "display"); + node.style.display = "none"; + node.style.visibility = "hidden"; + } + + node = node.nextSibling; + } + + item.visible = false; +} + +function unfold(item) +{ + if (item) + { + addClass(item, "unfolded"); + removeClass(item, "folded"); + } + + var node = item ? item.firstChild : null; + + while (node) + { + if (node.nodeType == 1 && isBlock(node)) // element + { + // with fallback for Safari, see above + node.style.display = (node.display ? node.display : "block"); + node.style.visibility = "visible"; + } + + node = node.nextSibling; + } + + item.visible = true; +} + +function outlineClick(e) +{ + var rightclick = false; + var target; + + if (!e) + var e = window.event; + + if (e.target) + target = e.target; + else if (e.srcElement) + target = e.srcElement; + + // work around Safari bug + if (target.nodeType == 3) + target = target.parentNode; + + while (target && target.visible == undefined) + target = target.parentNode; + + if (!target) + return true; + + if (e.which) + rightclick = (e.which == 3); + else if (e.button) + rightclick = (e.button == 2); + + if (!rightclick && target.visible != undefined) + { + if (target.foldable) + { + if (target.visible) + fold(target); + else + unfold(target); + } + + stopPropagation(e); + e.cancel = true; + e.returnValue = false; + } + + return false; +} + +function hoverOutline(e) +{ + var target; + + if (!e) + var e = window.event; + + if (e.target) + target = e.target; + else if (e.srcElement) + target = e.srcElement; + + // work around Safari bug + if (target.nodeType == 3) + target = target.parentNode; + + while (target && target.visible == undefined) + target = target.parentNode; + + if (target && target.foldable) + target.style.cursor = "pointer"; + + return true; +} + +function unhoverOutline(e) +{ + var target; + + if (!e) + var e = window.event; + + if (e.target) + target = e.target; + else if (e.srcElement) + target = e.srcElement; + + // work around Safari bug + if (target.nodeType == 3) + target = target.parentNode; + + while (target && target.visible == undefined) + target = target.parentNode; + + if (target) + target.style.cursor = "default"; + + return true; +} + + +function stopPropagation(e) +{ + if (window.event) + { + window.event.cancelBubble = true; + //window.event.returnValue = false; + } + else if (e) + { + e.cancelBubble = true; + e.stopPropagation(); + //e.preventDefault(); + } +} + +/* can't rely on display since we set that to none to hide things */ +function isBlock(elem) +{ + var tag = elem.nodeName; + + return tag == "OL" || tag == "UL" || tag == "P" || + tag == "LI" || tag == "TABLE" || tag == "PRE" || + tag == "H1" || tag == "H2" || tag == "H3" || + tag == "H4" || tag == "H5" || tag == "H6" || + tag == "BLOCKQUOTE" || tag == "ADDRESS"; +} + +function getElementStyle(elem, IEStyleProp, CSSStyleProp) +{ + if (elem.currentStyle) + { + return elem.currentStyle[IEStyleProp]; + } + else if (window.getComputedStyle) + { + var compStyle = window.getComputedStyle(elem, ""); + return compStyle.getPropertyValue(CSSStyleProp); + } + return ""; +} + +// works with text/html and text/xhtml+xml with thanks to Simon Willison +function createElement(element) +{ + if (typeof document.createElementNS != 'undefined') + { + return document.createElementNS('http://www.w3.org/1999/xhtml', element); + } + + if (typeof document.createElement != 'undefined') + { + return document.createElement(element); + } + + return false; +} + +// designed to work with both text/html and text/xhtml+xml +function getElementsByTagName(name) +{ + if (typeof document.getElementsByTagNameNS != 'undefined') + { + return document.getElementsByTagNameNS('http://www.w3.org/1999/xhtml', name); + } + + if (typeof document.getElementsByTagName != 'undefined') + { + return document.getElementsByTagName(name); + } + + return null; +} + +/* +// clean alternative to innerHTML method, but on IE6 +// it doesn't work with named entities like +// which need to be replaced by numeric entities +function insertText(element, text) +{ + try + { + element.textContent = text; // DOM3 only + } + catch (e) + { + if (element.firstChild) + { + // remove current children + while (element.firstChild) + element.removeChild(element.firstChild); + } + + element.appendChild(document.createTextNode(text)); + } +} + +// as above, but as method of all element nodes +// doesn't work in IE6 which doesn't allow you to +// add methods to the HTMLElement prototype +if (HTMLElement != undefined) +{ + HTMLElement.prototype.insertText = function(text) { + var element = this; + + try + { + element.textContent = text; // DOM3 only + } + catch (e) + { + if (element.firstChild) + { + // remove current children + while (element.firstChild) + element.removeChild(element.firstChild); + } + + element.appendChild(document.createTextNode(text)); + } + }; +} +*/ + +function getSelectedText() +{ + try + { + if (window.getSelection) + return window.getSelection().toString(); + + if (document.getSelection) + return document.getSelection().toString(); + + if (document.selection) + return document.selection.createRange().text; + } + catch (e) + { + return ""; + } + return ""; +} diff --git a/Slidy/slidy.js.gz b/Slidy/slidy.js.gz new file mode 100644 index 0000000..542709d Binary files /dev/null and b/Slidy/slidy.js.gz differ diff --git a/Slidy/template.html b/Slidy/template.html new file mode 100644 index 0000000..c6801df --- /dev/null +++ b/Slidy/template.html @@ -0,0 +1,187 @@ + + + + +Slidy template for W3C Blue2 Style + + + + + + + + + +

+ + + + + + + + + + + + + + + +

+ +

Event, Location, Month Year

+ +

W3C Blue2 Style I - Document Structure

+ +

To get the W3C Blue2 Style:

+ +

The xhtml file should match the following template, but +please modify the content of the title element as appropriate +for your presentation. The relative links below assume +that your presentation is in a directory like +/2005/Talks/your-slide-dir and should be modified as needed, +or you can use absolute links, as generated by comma slidy.

+ +

+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Slidy template for W3C Meetings</title>
+<meta name="copyright" content="Copyright &#169; 2005 W3C (MIT, ERCIM, Keio)" />
+<link rel="stylesheet" href="../Slidy/w3c-blue2.css" type="text/css"
+media="screen, projection, print" />
+<script src="../Slidy/slidy.js" type="text/javascript">
+</script>
+</head>
+<body>
+  ... background, cover slide ...
+  <div class="slide">
+    <h1>Introduction</h1>
+    ... slide content ...
+  </div>
+  ... other slides ...
+</body>
+</html>
+

+ +

W3C Blue2 Style II - Background and Cover

+ +

To get the slide background and cover page:

+ +

The body element's content should start with the following +markup, but please modify the heading and contact details +as appropriate:

+ +

+<div class="background">
+  <div class="header"> </div>
+  <img src="../Slidy/bullet.png" alt="hidden bullet" />
+  <div class="footer">
+    <object id="w3c-logo"
+    data="../Slidy/w3c-logo-blue.svg" type="image/svg+xml"
+    title="W3C logo"><a href="http://www.w3.org/"><img
+    alt="W3C logo" id="w3c-logo-fallback"
+    src="../Slidy/w3c-logo-blue.gif" /></a></object>
+    <!-- modify the following text as appropriate -->
+    Presentation Name<br />
+    Event, Location, Month Year
+  </div>
+</div>
+
+<div class="slide cover">
+  <div class="header">
+    <h1>Slidy template for W3C Blue2 Style</h1>
+    <p><a href="http://www.w3.org/People/Raggett/">Dave Raggett</a>,
+    &lt;<a href="mailto:dsr@w3.org">dsr@w3.org</a>&gt;</p>
+  </div>
+  <img src="../Slidy/keys.jpg" class="cover"
+  alt="W3C as letters on 3 plastic buttons from a keyboard" />
+</div>
+

+ +

Further information

+ +

Avoid placing too much content on each slide, no one will remember +it all, and it will overflow the slide design.
For further guidance on slide markup see the Slidy pages
If you want to print all the slides, press the "A" key to toggle +to the "all slides view" then use the browser's print function in the +normal way.
The comma slidy tool can be used with all.htm files in the old +W3C slide format, for example: +
```
http://www.w3.org/2005/Talks/0605-sb-acintroduction/all.htm,slidy
```
+
You are advised to save the output from the tool to a different +location and make it available Public, Members only or Team restricted +as appropriate.
If you want to view slides offline, be careful to save the slides +with all of the content (see browser's Save As function, and +"Web Page, complete" for the save as type).
Firefox users may want the autohide +extension to hide the toolbars when entering full screen with F11
If you get stuck then Dave +Raggett should be able to help.

+ +

Using SVG for great looking graphics

+ +

If you want to include graphics in SVG, you should stick to SVG +Tiny to increase the chance of people seeing it on whatever browser +they are using. Always, provide a fallback as a JPEG, PNG or GIF.
The use of SVG may result in users being prompted to install +a plugin. The Adobe SVG plugin is reasonably effective, but an +alternative may be to switch to a browser with native SVG support.
Some versions of browsers implement SVG in a brittle way that +may cause the browser to crash. If this happens to you, please +consider switching to a different version. Alternatively, you could +strip out the object tag and just use the img element
The W3C logo in the footer uses SVG for jaggy free scaling +via the markup for the slide background, see slide 3
Firefox users on Windows should install the Adobe SVG Viewer 6.0, +or install Firefox 1.5 which +has native SVG support.

+ + + diff --git a/Slidy/unfold-bright.gif b/Slidy/unfold-bright.gif new file mode 100644 index 0000000..2748131 Binary files /dev/null and b/Slidy/unfold-bright.gif differ diff --git a/Slidy/unfold-dim.bmp b/Slidy/unfold-dim.bmp new file mode 100644 index 0000000..c2a6baf Binary files /dev/null and b/Slidy/unfold-dim.bmp differ diff --git a/Slidy/unfold-dim.gif b/Slidy/unfold-dim.gif new file mode 100644 index 0000000..bee5671 Binary files /dev/null and b/Slidy/unfold-dim.gif differ diff --git a/Slidy/unfold.bmp b/Slidy/unfold.bmp new file mode 100644 index 0000000..30af625 Binary files /dev/null and b/Slidy/unfold.bmp differ diff --git a/Slidy/unfold.gif b/Slidy/unfold.gif new file mode 100644 index 0000000..0753ae4 Binary files /dev/null and b/Slidy/unfold.gif differ diff --git a/Slidy/w3c-ac.css b/Slidy/w3c-ac.css new file mode 100644 index 0000000..ff79035 --- /dev/null +++ b/Slidy/w3c-ac.css @@ -0,0 +1,418 @@ +/* w3c-ac.css + + Copyright (c) 2005 W3C (MIT, ERCIM, Keio), All Rights Reserved. + W3C liability, trademark, document use and software licensing + rules apply, see: + + http://www.w3.org/Consortium/Legal/copyright-documents + http://www.w3.org/Consortium/Legal/copyright-software +*/ +body +{ + margin: 0 0 0 0; + padding: 0 0 0 0; + width: 100%; + height: 100%; + color: black; + background-color: white; + font-family: "Gill Sans MT", "Gill Sans", GillSans, sans-serif; + font-size: 14pt; +} + +div.toolbar { + position: fixed; z-index: 200; + top: auto; bottom: 0; left: 0; right: 0; + height: 1.2em; text-align: right; + padding-left: 1em; + padding-right: 1em; + font-size: 60%; + color: red; background: rgb(240,240,240); +} + +div.background { + display: none; +} + +div.handout { + margin-left: 20px; + margin-right: 20px; +} + +div.slide.titlepage { + text-align: center; +} + +div.slide.titlepage.h1 { + padding-top: 40%; +} + +div.slide { + z-index: 20; + margin: 0 0 0 0; + padding-top: 0; + padding-bottom: 0; + padding-left: 20px; + padding-right: 20px; + border-width: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + line-height: 120%; + background-color: transparent; +} + +/* this rule is hidden from IE6 which doesn't support + selector */ +div.slide + div[class].slide { page-break-before: always;} + +div.slide h1 { + padding-left: 1em; + padding-right: 1em; + padding-top: 0.3em; + padding-bottom: 0.3em; + margin-top: 0; + margin-left: 0; + margin-right: 0; + margin-bottom: 0.8em; + display: block; + font-size: 140%; + line-height: 1.2em; + color: white; + background-color: #005A9C; +} + +pre { + color: rgb(0,128,0); font-size: 80%; + font-weight: bold; line-height: 120%; + padding-top: 0.2em; + padding-bottom: 0.2em; + padding-left: 2em; + padding-right: 1em; + border-style: solid; + border-left-width: 1em; + border-top-width: thin; + border-right-width: thin; + border-bottom-width: thin; + border-color: #95ABD0; + color: #00428C; +} + +li pre { margin-left: 0; } + +@media print { pre { font-size: 60% } } + +blockquote { font-style: italic } + +img { background-color: transparent } + +p.copyright { font-size: smaller } + +.center { text-align: center } +.footnote { font-size: smaller; margin-left: 2em; } + +a img { border-width: 0; border-style: none } + +a:visited { color: navy } +a:link { color: navy } +a:hover { color: red; text-decoration: underline } +a:active { color: red; text-decoration: underline } + +a {text-decoration: none} +.navbar a:link {color: white} +.navbar a:visited {color: yellow} +.navbar a:active {color: red} +.navbar a:hover {color: red} + +ul { list-style-type: square; } +ul ul { list-style-type: disc; } +ul ul ul { list-style-type: circle; } +ul ul ul ul { list-style-type: disc; } +li { margin-left: 0.5em; margin-top: 0.5em; } +li li { font-size: 85%; font-style: italic } +li li li { font-size: 85%; font-style: normal } + +div dt +{ + margin-left: 0; + margin-top: 1em; + margin-bottom: 0.5em; + font-weight: bold; +} +div dd +{ + margin-left: 2em; + margin-bottom: 0.5em; +} + + +p,pre,ul,ol,blockquote,h2,h3,h4,h5,h6 { + margin-left: 1em; + margin-right: 1em; +} + +p.subhead { font-weight: bold; margin-top: 2em; } + +.smaller { font-size: 80%; } + +td,th { padding: 0.2em } + +ul { + margin: 0.5em 1.5em 0.5em 1.5em; + padding: 0; +} + +ol { + margin: 0.5em 1.5em 0.5em 1.5em; + padding: 0; +} + +ul { list-style-type: square; } +ul ul { list-style-type: disc; } +ul ul ul { list-style-type: circle; } +ul ul ul ul { list-style-type: disc; } + +ul li { + list-style: none; + margin: 0.1em 0em 0.6em 0; + padding: 0 0 0 40px; + background: transparent url(bullet.png) no-repeat 5px 8px; + line-height: 140%; +} + +/* workaround IE's failure to support background on li for print media */ +@media print { ul li { list-style: disc; padding-left: 0; background: none; } } + +ol li { + margin: 0.1em 0em 0.6em 1.5em; + padding: 0 0 0 0px; + line-height: 140%; +} + +li li { + font-size: 85%; + font-style: italic; + list-style-type: disc; + background: transparent; + padding: 0 0 0 0; +} +li li li { + font-size: 85%; + font-style: normal; + list-style-type: circle; + background: transparent; + padding: 0 0 0 0; +} +li li li li { + list-style-type: disc; + background: transparent; + padding: 0 0 0 0; +} + +img.withBorder { + border: 2px solid #c60; + padding: 4px; +} + +div.header { + position: absolute; + z-index: 2; + left: 0; + right: 0; + top: 0; + bottom: auto; + height: 2.95em; + width: 100%; + padding: 0 0 0 0; + margin: 0 0 0 0; + border-width: 0; + border-style: solid; + background-color: #005A9C; + border-bottom-width: thick; + border-bottom-color: #95ABD0; +} + +div.footer { + position: absolute; + z-index: 80; + left: 0; + right: 0; + top: auto; + bottom: 0; + height: 3.5em; + margin: 0; + font-size: 80%; + font-weight: bold; + padding-left: 1em; + padding-right: 0; + padding-top: 0.3em; + padding-bottom: 0; + color: #003366; + background-color: #95ABD0; +} + +/* this is a hack to hide property from IE6 and below */ +div[class="footer"] { + position: fixed; +} + +#w3c-logo { + margin: 0; + margin-top: 0.3em; + margin-right: 0.75em; + padding-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + height: 2em; + width: 4.1em; + float: right; + z-index: 3; + background: #90A7D0; +} + +#w3c-logo-fallback { + margin: 0; + margin-top: -0.5em; + margin-right: 0.75em; + padding-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + height: 3em; + width: 4.1em; + float: right; + z-index: 3; + background: #90A7D0; +} + +div.cover { + margin: 0; + padding: 0; + background-color: black; + overflow: hidden; + width: 100%; + height: 100%; +} + +div.cover div.header +{ + position: absolute; + z-index: 0; + left: 0; + right: 0; + top: 0; + bottom: auto; + height: auto; + margin: 0; + width: 100%; + padding: 0.5em 0.5em 1em 0.5em; + color: #FFFFFF; + border-width: 0; + border-style: solid; + background-color: #005A9C; + border-bottom-width: thick; + border-bottom-color: #95ABD0; +} +div.slide.cover h1 +{ + float: left; + margin-bottom: 0; + background-color: #005A9C; +/* background-color: #00428C; */ +} + +div.slide h1 a:link {color: white} +div.slide h1 a:visited {color: white} +div.slide h1 a:active { + color: red; + text-decoration: underline; +} +div.slide h1 a:hover { + color: yellow; + text-decoration: underline; +} + +div.slide h1 a { text-decoration: none } +div.cover div.header p +{ + clear: both; + margin-top: 0.5em; + margin-left: 1.5em; + margin-bottom: 0; +} + +div.header p.explanation { + font-style: italic; +} +div.cover img +{ + width: 100%; + margin: 0; + padding: 0; +} + +div.slide.cover a { + color: white; +} + +div.slide.cover a:hover, div.slide.cover a:active { + color: yellow; text-decoration: underline; +} + +/* for Bert as an ardent user of the old W3C slidemaker tool */ +div.comment { display: none; visibility: hidden } + +@media print { div.comment { display: block; visibility: visible } } + +/* fold/unfold support outer ol, ul needs outline class */ +/* set class="compact" on li to make it compact */ + +ol.outline { list-style:decimal; } +ol.outline ol { list-style-type:lower-alpha } +ol.outline li.nofold { + padding: 0 0 0 20px; + background: transparent url(nofold-dim.bmp) no-repeat 0px 0.5em; +} +ol.outline li.unfolded { + padding: 0 0 0 20px; + background: transparent url(fold-dim.bmp) no-repeat 0px 0.5em; +} +ol.outline li.folded { + padding: 0 0 0 20px; + background: transparent url(unfold-dim.bmp) no-repeat 0px 0.5em; +} +ol.outline li.unfolded:hover { + padding: 0 0 0 20px; + background: transparent url(fold.bmp) no-repeat 0px 0.5em; +} +ol.outline li.folded:hover { + padding: 0 0 0 20px; + background: transparent url(unfold.bmp) no-repeat 0px 0.5em; +} +ol.outline li:hover { cursor: pointer } +ol.outline li.nofold:hover { cursor: default } + +ul.outline { list-style:decimal; } +ul.outline li.nofold { + padding: 0 0 0 20px; + background: transparent url(nofold-dim.bmp) no-repeat 0px 0.5em; +} +ul.outline li.unfolded { + padding: 0 0 0 20px; + background: transparent url(fold-dim.bmp) no-repeat 0px 0.5em; +} +ul.outline li.folded { + padding: 0 0 0 20px; + background: transparent url(unfold-dim.bmp) no-repeat 0px 0.5em; +} +ul.outline li.unfolded:hover { + padding: 0 0 0 20px; + background: transparent url(fold.bmp) no-repeat 0px 0.5em; +} +ul.outline li.folded:hover { + padding: 0 0 0 20px; + background: transparent url(unfold.bmp) no-repeat 0px 0.5em; +} + +ul.outline li:hover { cursor: pointer } +ul.outline li.nofold:hover { cursor: default } diff --git a/Slidy/w3c-blue.css b/Slidy/w3c-blue.css new file mode 100644 index 0000000..34a5447 --- /dev/null +++ b/Slidy/w3c-blue.css @@ -0,0 +1,508 @@ +/* w3c-blue.css + + Copyright (c) 2005 W3C (MIT, ERCIM, Keio), All Rights Reserved. + W3C liability, trademark, document use and software licensing + rules apply, see: + + http://www.w3.org/Consortium/Legal/copyright-documents + http://www.w3.org/Consortium/Legal/copyright-software +*/ +body +{ + margin: 0 0 0 0; + padding: 0 0 0 0; + width: 100%; + height: 100%; + color: black; + background-color: white; + font-family: "Gill Sans MT", "Gill Sans", GillSans, sans-serif; + font-size: 14pt; +} + +div.toolbar { + position: fixed; z-index: 200; + top: auto; bottom: 0; left: 0; right: 0; + height: 1.2em; text-align: right; + padding-left: 1em; + padding-right: 1em; + font-size: 60%; + color: red; background: rgb(240,240,240); +} + +div.background { + display: none; +} + +div.handout { + margin-left: 20px; + margin-right: 20px; +} + +div.slide.titlepage { + text-align: center; +} + +div.slide.titlepage.h1 { + padding-top: 40%; +} + +div.slide { + z-index: 20; + margin: 0 0 0 0; + padding: 0; + border-width: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + line-height: 120%; + background-color: transparent; +} + +div.background { + z-index: 1; + position: absolute; + vertical-align: bottom; + left: 0; + right: 0; + top: 0; + bottom: auto; + height: 4.1em; + padding: 0 0 0 0.2em; + margin: 0 0 0 0; + border-width: 0; + background-color: #90A7D0; +} + +div.background img { + height: 4em; +} + +/* this rule is hidden from IE which doesn't support + selector */ +div.slide + div[class].slide { page-break-before: always;} + +div.slide h1 { + padding-left: 0.1em; + padding-right: 0; + padding-top: 0.1em; + margin-bottom: 0.8em; + margin-top: -0.05em; + margin-left: 3em; + margin-right: 5em; + min-height: 2.3em; + color: white; + height: 2.2em; + font-size: 160%; + line-height: 1.1em; + background: #90A7D0;; +} + +div.slide h1 a { + color: white; + text-decoration: none; +} + +div.slide h1 a:link { + color: white; + text-decoration: none; +} + +div.slide h1 a:visited { + color: white; + text-decoration: none; +} + +div.slide h1 a:hover { + color: white; + text-decoration: underline; +} + +div.slide h1 a:active { + color: red; + text-decoration: underline; +} + +#head-icon { + margin-top: 0.5em; + margin-bottom: 0; + margin-left: 0; + margin-right: 1em; + background: #90A7D0; + border-width: 0; + height: 3em; + max-width: 3em; + z-index: 2; + float: left; +} + +#head-logo { + margin: 0; + margin-top: 0.25em; + padding-top: 0.25em; + padding-bottom: 0.2em; + padding-left: 0; + padding-right: 0; + height: 3.2em; + width: 4.8em; + float: right; + z-index: 2; + background: #90A7D0; +} + +#head-logo-fallback { + margin: 0; + padding: 0; + margin-top: -0.8em; + width: 4.8em; + float: right; + z-index: 2; +} + +/* the next two classes support vertical and horizontal centering */ +div.vbox { + float: left; + height: 40%; + width: 50%; + margin-top: -240px; +} +div.hbox { + width:60%; + margin-top: 0; + margin-left:auto; + margin-right:auto; + height: 60%; + border:1px solid silver; + background:#F0F0F0; + overflow:auto; + text-align:left; + clear:both; +} + +/* styling for named background */ +div.background.slanty { + z-index: 2; + bottom: 0; + height: 100%; + background: transparent; +} + +div.background.slanty img { margin-top: 4em; width: 100%; height: 80% } + +/* the following makes the pre background translucent */ +/* opacity is a CSS3 property but supported by Mozilla family */ +/* filter is an IE specific feature that also requires width */ +div.slide.slanty pre { + width: 93%; /* needed for IE filter to work */ + opacity: .8; + filter: alpha(opacity=80); +} + +img.withBorder { + border: 2px solid #c60; + padding: 4px; +} + +li pre { margin-left: 0; } + +@media print { pre { font-size: 60% } } + +blockquote { font-style: italic } + +img { background-color: transparent } + +p.copyright { font-size: smaller } + +.center { text-align: center } +.footnote { font-size: smaller; margin-left: 2em; } + +a img { border-width: 0; border-style: none } + +a:visited { color: navy } +a:link { color: navy } +a:hover { color: red; text-decoration: underline } +a:active { color: red; text-decoration: underline } + +a {text-decoration: none} +.navbar a:link {color: white} +.navbar a:visited {color: yellow} +.navbar a:active {color: red} +.navbar a:hover {color: red} + +ul { list-style-type: square; } +ul ul { list-style-type: disc; } +ul ul ul { list-style-type: circle; } +ul ul ul ul { list-style-type: disc; } +li { margin-left: 0.5em; margin-top: 0.5em; } +li li { font-size: 85%; font-style: italic } +li li li { font-size: 85%; font-style: normal } + +div dt +{ + margin-left: 0; + margin-top: 1em; + margin-bottom: 0.5em; + font-weight: bold; +} +div dd +{ + margin-left: 2em; + margin-bottom: 0.5em; +} + + +p,pre,ul,ol,blockquote,h2,h3,h4,h5,h6,dl,table { + margin-left: 1em; + margin-right: 1em; +} + +p.subhead { font-weight: bold; margin-top: 2em; } + +div.cover p.explanation { + font-style: italic; + margin-top: 3em; +} + + +.smaller { font-size: smaller } + +td,th { padding: 0.2em } + +ul { + margin: 0.5em 1.5em 0.5em 1.5em; + padding: 0; +} + +ol { + margin: 0.5em 1.5em 0.5em 1.5em; + padding: 0; +} + +ul { list-style-type: square; } +ul ul { list-style-type: disc; } +ul ul ul { list-style-type: circle; } +ul ul ul ul { list-style-type: disc; } +li { margin-left: 0.5em; margin-top: 0.5em; } +li li { font-size: 85%; font-style: italic } +li li li { font-size: 85%; font-style: normal } + + +ul li { + list-style: none; + margin: 0.1em 0em 0.6em 0; + padding: 0 0 0 40px; + background: transparent url(bullet.png) no-repeat 5px 8px; + line-height: 140%; +} + +/* workaround IE's failure to support background on li for print media */ +@media print { ul li { list-style: disc; padding-left: 0; background: none; } } + +ol li { + margin: 0.1em 0em 0.6em 1.5em; + padding: 0 0 0 0px; + line-height: 140%; +} + +li li { + font-size: 85%; + font-style: italic; + list-style-type: disc; + background: transparent; + padding: 0 0 0 0; +} +li li li { + font-size: 85%; + font-style: normal; + list-style-type: circle; + background: transparent; + padding: 0 0 0 0; +} +li li li li { + list-style-type: disc; + background: transparent; + padding: 0 0 0 0; +} + +/* rectangular blue bullet + unfold/nofold/fold widget */ + +/* + setting class="outline on ol or ul makes it behave as an + ouline list where blocklevel content in li elements is + hidden by default and can be expanded or collapsed with + mouse click. Set class="expand" on li to override default +*/ + +ol.outline li:hover { cursor: pointer } +ol.outline li.nofold:hover { cursor: default } + +ul.outline li:hover { cursor: pointer } +ul.outline li.nofold:hover { cursor: default } + +ol.outline { list-style:decimal; } +ol.outline ol { list-style-type:lower-alpha } + +ol.outline li.nofold { + padding: 0 0 0 20px; + background: transparent url(nofold-dim.gif) no-repeat 0px 0.5em; +} +ol.outline li.unfolded { + padding: 0 0 0 20px; + background: transparent url(fold-dim.gif) no-repeat 0px 0.5em; +} +ol.outline li.folded { + padding: 0 0 0 20px; + background: transparent url(unfold-dim.gif) no-repeat 0px 0.5em; +} +ol.outline li.unfolded:hover { + padding: 0 0 0 20px; + background: transparent url(fold.gif) no-repeat 0px 0.5em; +} +ol.outline li.folded:hover { + padding: 0 0 0 20px; + background: transparent url(unfold.gif) no-repeat 0px 0.5em; +} + +ul.outline li.nofold { + padding: 0 0 0 52px; + background: transparent url(bullet-nofold-dim.gif) no-repeat 5px 8px; +} +ul.outline li.unfolded { + padding: 0 0 0 52px; + background: transparent url(bullet-fold-dim.gif) no-repeat 5px 8px; +} +ul.outline li.folded { + padding: 0 0 0 52px; + background: transparent url(bullet-unfold-dim.gif) no-repeat 5px 8px; +} +ul.outline li.unfolded:hover { + padding: 0 0 0 52px; + background: transparent url(bullet-fold.gif) no-repeat 5px 8px; +} +ul.outline li.folded:hover { + padding: 0 0 0 52px; + background: transparent url(bullet-unfold.gif) no-repeat 5px 8px; +} + +li ul.outline li.nofold { + padding: 0 0 0 21px; + background: transparent url(nofold-dim.gif) no-repeat 5px 8px; +} +li ul.outline li.unfolded { + padding: 0 0 0 21px; + background: transparent url(fold-dim.gif) no-repeat 5px 8px; +} +li ul.outline li.folded { + padding: 0 0 0 21px; + background: transparent url(unfold-dim.gif) no-repeat 5px 8px; +} +li ul.outline li.unfolded:hover { + padding: 0 0 0 21px; + background: transparent url(fold.gif) no-repeat 5px 8px; +} +li ul.outline li.folded:hover { + padding: 0 0 0 21px; + background: transparent url(unfold.gif) no-repeat 5px 8px; +} + +img.withBorder { + border: 2px solid #c60; + padding: 4px; +} + +div.header { + position: absolute; + z-index: 2; + left: 0; + right: 0; + top: 0; + bottom: auto; + height: 2.95em; + width: 100%; + padding: 0 0 0 0; + margin: 0 0 0 0; + border-width: 0; + border-style: solid; + background-color: #005A9C; + border-bottom-width: thick; + border-bottom-color: #95ABD0; +} + +div.footer { + position: absolute; + z-index: 80; + left: 0; + right: 0; + top: auto; + bottom: 0; + height: 3.5em; + margin: 0; + font-size: 80%; + font-weight: bold; + padding-left: 1em; + padding-right: 0; + padding-top: 0.3em; + padding-bottom: 0; + color: #003366; + background-color: #95ABD0; +} + +/* this is a hack to hide property from IE6 and below */ +div[class="footer"] { + position: fixed; +} + +#hidden-bullet { + visibility: hidden; + display: none; +} + +div.slide.cover { + color: white; + background-color: #90A7D0; + padding-top: 0; + padding-right: 0; + padding-left: 3em; + height: 100%; +} + +div.slide.cover h1 { + margin: 0; + padding: 0.5em; + color: white; + height: auto; +} + +div.slide.cover h2 { + color: white; +} + +div.slide.cover a { + color: white; +} + +div.slide.cover a:visited { color: white } +div.slide.cover a:link { color: white } +div.slide.cover a:hover { color: yellow; text-decoration: underline } +div.slide.cover a:active { color: yellow; text-decoration: underline } + +div.slide.cover a:hover, div.slide.cover a:active { + color: yellow; text-decoration: underline; +} + +div.slide.cover img.cover { + margin: 0 0 0 0; + float: right; + padding-bottom: 4em; + width: 50%; + overflow: hidden; +} + +div.slide.cover a:hover, div.slide.cover a:active { + color: yellow; text-decoration: underline; +} + +/* for Bert as an ardent user of the old W3C slidemaker tool */ + +div.comment { display: none; visibility: hidden } + +@media print { div.comment { display: block; visibility: visible } } diff --git a/Slidy/w3c-blue2.css b/Slidy/w3c-blue2.css new file mode 100644 index 0000000..fd013fe --- /dev/null +++ b/Slidy/w3c-blue2.css @@ -0,0 +1,508 @@ +/* w3c-blue.css + + Copyright (c) 2005 W3C (MIT, ERCIM, Keio), All Rights Reserved. + W3C liability, trademark, document use and software licensing + rules apply, see: + + http://www.w3.org/Consortium/Legal/copyright-documents + http://www.w3.org/Consortium/Legal/copyright-software +*/ +body +{ + margin: 0 0 0 0; + padding: 0 0 0 0; + width: 100%; + height: 100%; + color: black; + background-color: white; + font-family: "Gill Sans MT", "Gill Sans", GillSans, sans-serif; + font-size: 14pt; +} + +div.toolbar { + position: fixed; z-index: 200; + top: auto; bottom: 0; left: 0; right: 0; + height: 1.2em; text-align: right; + padding-left: 1em; + padding-right: 1em; + font-size: 60%; + color: red; background: rgb(240,240,240); +} + +div.background { + display: none; +} + +div.handout { + margin-left: 20px; + margin-right: 20px; +} + +div.slide.titlepage { + text-align: center; +} + +div.slide.titlepage.h1 { + padding-top: 40%; +} + +div.slide { + z-index: 20; + margin: 0 0 0 0; + padding: 0; + border-width: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + line-height: 120%; + background-color: transparent; +} + +div.background { + z-index: 1; + position: absolute; + vertical-align: bottom; + left: 0; + right: 0; + top: 0; + bottom: auto; + height: 4.1em; + padding: 0 0 0 0.2em; + margin: 0 0 0 0; + border-width: 0; + background-color: #728ec2; +} + +div.background img { + height: 4em; +} + +/* this rule is hidden from IE which doesn't support + selector */ +div.slide + div[class].slide { page-break-before: always;} + +div.slide h1 { + padding-left: 0.1em; + padding-right: 0; + padding-top: 0.1em; + margin-bottom: 0.8em; + margin-top: -0.05em; + margin-left: 3em; + margin-right: 5em; + min-height: 2.3em; + color: white; + height: 2.2em; + font-size: 160%; + line-height: 1.1em; + background: #728ec2; +} + +div.slide h1 a { + color: white; + text-decoration: none; +} + +div.slide h1 a:link { + color: white; + text-decoration: none; +} + +div.slide h1 a:visited { + color: white; + text-decoration: none; +} + +div.slide h1 a:hover { + color: white; + text-decoration: underline; +} + +div.slide h1 a:active { + color: red; + text-decoration: underline; +} + +#head-icon { + margin-top: 0.5em; + margin-bottom: 0; + margin-left: 0; + margin-right: 1em; + background: #728ec2; + border-width: 0; + height: 3em; + max-width: 3em; + z-index: 2; + float: left; +} + +#head-logo { + margin: 0; + margin-top: 0.25em; + padding-top: 0.25em; + padding-bottom: 0.2em; + padding-left: 0; + padding-right: 0; + height: 3.2em; + width: 4.8em; + float: right; + z-index: 2; + background: #728ec2; +} + +#head-logo-fallback { + margin: 0; + padding: 0; + margin-top: -0.8em; + width: 4.8em; + float: right; + z-index: 2; +} + +/* the next two classes support vertical and horizontal centering */ +div.vbox { + float: left; + height: 40%; + width: 50%; + margin-top: -240px; +} +div.hbox { + width:60%; + margin-top: 0; + margin-left:auto; + margin-right:auto; + height: 60%; + border:1px solid silver; + background:#F0F0F0; + overflow:auto; + text-align:left; + clear:both; +} + +/* styling for named background */ +div.background.slanty { + z-index: 2; + bottom: 0; + height: 100%; + background: transparent; +} + +div.background.slanty img { margin-top: 4em; width: 100%; height: 80% } + +/* the following makes the pre background translucent */ +/* opacity is a CSS3 property but supported by Mozilla family */ +/* filter is an IE specific feature that also requires width */ +div.slide.slanty pre { + width: 93%; /* needed for IE filter to work */ + opacity: .8; + filter: alpha(opacity=80); +} + +img.withBorder { + border: 2px solid #c60; + padding: 4px; +} + +li pre { margin-left: 0; } + +@media print { pre { font-size: 60% } } + +blockquote { font-style: italic } + +img { background-color: transparent } + +p.copyright { font-size: smaller } + +.center { text-align: center } +.footnote { font-size: smaller; margin-left: 2em; } + +a img { border-width: 0; border-style: none } + +a:visited { color: navy } +a:link { color: navy } +a:hover { color: red; text-decoration: underline } +a:active { color: red; text-decoration: underline } + +a {text-decoration: none} +.navbar a:link {color: white} +.navbar a:visited {color: yellow} +.navbar a:active {color: red} +.navbar a:hover {color: red} + +ul { list-style-type: square; } +ul ul { list-style-type: disc; } +ul ul ul { list-style-type: circle; } +ul ul ul ul { list-style-type: disc; } +li { margin-left: 0.5em; margin-top: 0.5em; } +li li { font-size: 85%; font-style: italic } +li li li { font-size: 85%; font-style: normal } + +div dt +{ + margin-left: 0; + margin-top: 1em; + margin-bottom: 0.5em; + font-weight: bold; +} +div dd +{ + margin-left: 2em; + margin-bottom: 0.5em; +} + + +p,pre,ul,ol,blockquote,h2,h3,h4,h5,h6,dl,table { + margin-left: 1em; + margin-right: 1em; +} + +p.subhead { font-weight: bold; margin-top: 2em; } + +div.cover p.explanation { + font-style: italic; + margin-top: 3em; +} + + +.smaller { font-size: smaller } + +td,th { padding: 0.2em } + +ul { + margin: 0.5em 1.5em 0.5em 1.5em; + padding: 0; +} + +ol { + margin: 0.5em 1.5em 0.5em 1.5em; + padding: 0; +} + +ul { list-style-type: square; } +ul ul { list-style-type: disc; } +ul ul ul { list-style-type: circle; } +ul ul ul ul { list-style-type: disc; } +li { margin-left: 0.5em; margin-top: 0.5em; } +li li { font-size: 85%; font-style: italic } +li li li { font-size: 85%; font-style: normal } + + +ul li { + list-style: none; + margin: 0.1em 0em 0.6em 0; + padding: 0 0 0 40px; + background: transparent url(bullet.png) no-repeat 5px 0.3em; + line-height: 140%; +} + +/* workaround IE's failure to support background on li for print media */ +@media print { ul li { list-style: disc; padding-left: 0; background: none; } } + +ol li { + margin: 0.1em 0em 0.6em 1.5em; + padding: 0 0 0 0px; + line-height: 140%; +} + +li li { + font-size: 85%; + font-style: italic; + list-style-type: disc; + background: transparent; + padding: 0 0 0 0; +} +li li li { + font-size: 85%; + font-style: normal; + list-style-type: circle; + background: transparent; + padding: 0 0 0 0; +} +li li li li { + list-style-type: disc; + background: transparent; + padding: 0 0 0 0; +} + +/* rectangular blue bullet + unfold/nofold/fold widget */ + +/* + setting class="outline on ol or ul makes it behave as an + ouline list where blocklevel content in li elements is + hidden by default and can be expanded or collapsed with + mouse click. Set class="expand" on li to override default +*/ + +ol.outline li:hover { cursor: pointer } +ol.outline li.nofold:hover { cursor: default } + +ul.outline li:hover { cursor: pointer } +ul.outline li.nofold:hover { cursor: default } + +ol.outline { list-style:decimal; } +ol.outline ol { list-style-type:lower-alpha } + +ol.outline li.nofold { + padding: 0 0 0 20px; + background: transparent url(nofold-dim.gif) no-repeat 0px 0.3em; +} +ol.outline li.unfolded { + padding: 0 0 0 20px; + background: transparent url(fold-dim.gif) no-repeat 0px 0.3em; +} +ol.outline li.folded { + padding: 0 0 0 20px; + background: transparent url(unfold-dim.gif) no-repeat 0px 0.3em; +} +ol.outline li.unfolded:hover { + padding: 0 0 0 20px; + background: transparent url(fold.gif) no-repeat 0px 0.3em; +} +ol.outline li.folded:hover { + padding: 0 0 0 20px; + background: transparent url(unfold.gif) no-repeat 0px 0.3em; +} + +ul.outline li.nofold { + padding: 0 0 0 52px; + background: transparent url(bullet-nofold-dim.gif) no-repeat 5px 0.3em; +} +ul.outline li.unfolded { + padding: 0 0 0 52px; + background: transparent url(bullet-fold-dim.gif) no-repeat 5px 0.3em; +} +ul.outline li.folded { + padding: 0 0 0 52px; + background: transparent url(bullet-unfold-dim.gif) no-repeat 5px 0.3em; +} +ul.outline li.unfolded:hover { + padding: 0 0 0 52px; + background: transparent url(bullet-fold.gif) no-repeat 5px 0.3em; +} +ul.outline li.folded:hover { + padding: 0 0 0 52px; + background: transparent url(bullet-unfold.gif) no-repeat 5px 0.3em; +} + +li ul.outline li.nofold { + padding: 0 0 0 21px; + background: transparent url(nofold-dim.gif) no-repeat 5px 0.3em; +} +li ul.outline li.unfolded { + padding: 0 0 0 21px; + background: transparent url(fold-dim.gif) no-repeat 5px 0.3em; +} +li ul.outline li.folded { + padding: 0 0 0 21px; + background: transparent url(unfold-dim.gif) no-repeat 5px 0.3em; +} +li ul.outline li.unfolded:hover { + padding: 0 0 0 21px; + background: transparent url(fold.gif) no-repeat 5px 0.3em; +} +li ul.outline li.folded:hover { + padding: 0 0 0 21px; + background: transparent url(unfold.gif) no-repeat 5px 0.3em; +} + +img.withBorder { + border: 2px solid #c60; + padding: 4px; +} + +div.header { + position: absolute; + z-index: 2; + left: 0; + right: 0; + top: 0; + bottom: auto; + height: 2.95em; + width: 100%; + padding: 0 0 0 0; + margin: 0 0 0 0; + border-width: 0; + border-style: solid; + background-color: #005A9C; + border-bottom-width: thick; + border-bottom-color: #95ABD0; +} + +div.footer { + position: absolute; + z-index: 80; + left: 0; + right: 0; + top: auto; + bottom: 0; + height: 3.5em; + margin: 0; + font-size: 80%; + font-weight: bold; + padding-left: 1em; + padding-right: 0; + padding-top: 0.3em; + padding-bottom: 0; + color: #003366; + background-color: #95ABD0; +} + +/* this is a hack to hide property from IE6 and below */ +div[class="footer"] { + position: fixed; +} + +#hidden-bullet { + visibility: hidden; + display: none; +} + +div.slide.cover { + color: white; + background-color: #728ec2; + padding-top: 0; + padding-right: 0; + padding-left: 3em; + height: 100%; +} + +div.slide.cover h1 { + margin: 0; + padding: 0.5em; + color: white; + height: auto; +} + +div.slide.cover h2 { + color: white; +} + +div.slide.cover a { + color: white; +} + +div.slide.cover a:visited { color: white } +div.slide.cover a:link { color: white } +div.slide.cover a:hover { color: yellow; text-decoration: underline } +div.slide.cover a:active { color: yellow; text-decoration: underline } + +div.slide.cover a:hover, div.slide.cover a:active { + color: yellow; text-decoration: underline; +} + +div.slide.cover img.cover { + margin: 0 0 0 0; + float: right; + padding-bottom: 4em; + width: 50%; + overflow: hidden; +} + +div.slide.cover a:hover, div.slide.cover a:active { + color: yellow; text-decoration: underline; +} + +/* for Bert as an ardent user of the old W3C slidemaker tool */ + +div.comment { display: none; visibility: hidden } + +@media print { div.comment { display: block; visibility: visible } } diff --git a/Slidy/w3c-logo-blue.gif b/Slidy/w3c-logo-blue.gif new file mode 100644 index 0000000..890bc97 Binary files /dev/null and b/Slidy/w3c-logo-blue.gif differ diff --git a/Slidy/w3c-logo-blue.svg b/Slidy/w3c-logo-blue.svg new file mode 100644 index 0000000..6595d01 --- /dev/null +++ b/Slidy/w3c-logo-blue.svg @@ -0,0 +1,14 @@ + + diff --git a/Slidy/w3c-logo-slanted.jpg b/Slidy/w3c-logo-slanted.jpg new file mode 100644 index 0000000..54e0ac3 Binary files /dev/null and b/Slidy/w3c-logo-slanted.jpg differ diff --git a/Slidy/w3c-logo-white.gif b/Slidy/w3c-logo-white.gif new file mode 100644 index 0000000..3b3c6fd Binary files /dev/null and b/Slidy/w3c-logo-white.gif differ diff --git a/Slidy/w3c-logo-white.svg b/Slidy/w3c-logo-white.svg new file mode 100644 index 0000000..d63907f --- /dev/null +++ b/Slidy/w3c-logo-white.svg @@ -0,0 +1,14 @@ + + diff --git a/clojure-icon.gif b/clojure-icon.gif new file mode 100644 index 0000000..84eee16 Binary files /dev/null and b/clojure-icon.gif differ diff --git a/clojure-slides.xhtml b/clojure-slides.xhtml new file mode 100755 index 0000000..464f81c --- /dev/null +++ b/clojure-slides.xhtml @@ -0,0 +1,79 @@ + + + + + Clojure + + + + + + + +

+ +

+
+

Clojure

Jorge 'slack' Gorbe

slack@codemaniacs.com

+ +

En busca del lenguaje de programaciÃ³n ideal

"Hay dos clases de lenguajes: los que todos odian y los que nadie usa"
Uso C++ :)
Odio C++ :(

+ +

No hay funciones anÃ³nimas
Es incÃ³modo usar funciones de orden superior (boilerplate a + montones si se usan functores)
Falta un buen sistema de macros

+ +

Patrones de diseÃ±o

La comunidad de seguidores de la OOP adora los patrones de diseÃ±o

Su uso se considera una seÃ±al de madurez

+ "When I see patterns in my programs, I consider it a sign of trouble. The + shape of a program should reflect only the problem it needs to solve. Any + other regularity in the code is a sign, to me at least, that I'm using + abstractions that aren't powerful enough - often that I'm generating by + hand the expansions of some macro that I need to write." +

Alexander Stepanov (coautor de la STL) dijo una vez:

I find OOP technically unsound. It attempts to decompose the world in + terms of interfaces that vary on a single type. To deal with the real + problems you need multisorted algebras - families of interfaces that span + multiple types.
I find OOP philosophically unsound. It claims that everything is an + object. Even if it is true it is not very interesting - saying that + everything is an object is saying nothing at all.

+ + +

HTML Slidy: Slide Shows in XHTML

Slide Shows in XHTML

What you need to do

To get the W3C Blue Style

To use it off-line

Generate a Title Page

Incremental display of slide contents

Create outline lists with hidden content

Make your images scale with the browser window size

Incremental display of layered images

How to center content vertically and horizontally

Include SVG Content

Caveats with SVG+object

Additional Remarks

Localization and automatic translation

Future Plans

Acknowledgements

Acknowledgements

Slide Show Help

Slidy template for W3C Blue2 Style