From: robert Date: Sun, 30 Jan 2011 23:28:42 +0000 (+0000) Subject: add a first version of the FOSDEM 2011 slides X-Git-Url: https://git-public.kairo.at/?a=commitdiff_plain;h=8dae779e40b59c735bee5c2bfe827d24c94ff2c9;p=slides.git add a first version of the FOSDEM 2011 slides --- diff --git a/fosdem2011/cc-by-sa-80x15.png b/fosdem2011/cc-by-sa-80x15.png new file mode 100644 index 0000000..c67509f Binary files /dev/null and b/fosdem2011/cc-by-sa-80x15.png differ diff --git a/fosdem2011/index.html b/fosdem2011/index.html new file mode 100755 index 0000000..25391ed --- /dev/null +++ b/fosdem2011/index.html @@ -0,0 +1,183 @@ + + + + + + In-Tab UI + + + + + + + + + + + +
+

Table of Contents

+

In-Tab UI

+ +
+

The following slides can be found in this presentation:

+
+
    +
+
+ +
+

In-Tab (In-Content) UI

+ +
+Robert Kaiser, +"KaiRo" <kairo@kairo.at> +
Mozilla contributor, add-on developer, SeaMonkey coordinator +
+ +
+

Slides: + http://kairo.mozdev.org/slides/fosdem2011/

+
+
    +
  • Created for + Mozilla + Developer Room at FOSDEM 2011 in + Brussels.
    • +
  • Written with in HTML 5 with CSS 3 and JavaScript.
    • +
  • Navigation with links on all slides, with accesskeys + (e.g. "n"/Alt+Shift+N for "next") or back/forward keys
    • +
  • Table of Contents
    • +
  • Licensed under CC-BY-SA, 02/2011 Robert Kaiser
    • +
+
+
+
+ +
+

Basic Description

+ +
+
    +
  • Eliminate separate windows
    • +
  • Integrate UI into browser tabs
    • +
  • Non-modal, non-popup
    • +
  • Hide web-specific controls for those tabs
    • +
+
+
+ +
+

Current State

+ +
+"Examples of in-content UI already present include session restore, +about:config, new add-ons manager, network error pages and phishing/malware +warning pages." +
+Add-ons manager +
+
+
+ +
+

Plans: Preferences

+ +
+As laid +out by Stephen Horlander in June 2010, preferences are among the targets +for moving UI into tabs, here's a mockup he drew up: +
+Win7 Network Preference Mockup +
+
+
+ +
+

Plans: Tentative

+ +
+The blog post as well as the +in-content +page design wiki page also talks about the following: +
    +
  • Library (History and Bookmarks View)
    • +
  • Downloads Manager
    • +
  • Toolbar Customization
    • +
  • Tab View
    • +
  • home tab
    • +
  • About Firefox
    • +
  • Help
    • +
+Non-goal: "Redesign all windows and panels" +tracking bugs: bug 584942 +
+
+ +
+

Tahoe Data Manager

+ +
+Tahoe Data Manager +
+
+ +
+

Jökulsárlón Download Manager

+ +
+Jökulsárlón Download Manager +
+
+ +
+

KaiRo.at Mandelbrot

+ + +
+KaiRo.at Mandelbrot +
+
+ +
+

Demo

+ + +
+Let's take a look at some currently working examples of in-tab UI! +
+
+ +
+

Open Discussion

+ +
+

Thanks for your attention!

+
+We should have some time for discussion now. +
    +
  • Any open questions?
    • +
  • Any unmentioned issues?
    • +
  • Anyone wanting to help us?
    • +
  • Anything I forgot to mention?
    • +
+
+
+
+ + + diff --git a/fosdem2011/minefield-addons-manager.png b/fosdem2011/minefield-addons-manager.png new file mode 100644 index 0000000..be552a7 Binary files /dev/null and b/fosdem2011/minefield-addons-manager.png differ diff --git a/fosdem2011/minefield-jokulsarlon-dlman.png b/fosdem2011/minefield-jokulsarlon-dlman.png new file mode 100644 index 0000000..8c01c40 Binary files /dev/null and b/fosdem2011/minefield-jokulsarlon-dlman.png differ diff --git a/fosdem2011/minefield-mandelbrot.png b/fosdem2011/minefield-mandelbrot.png new file mode 100644 index 0000000..d853478 Binary files /dev/null and b/fosdem2011/minefield-mandelbrot.png differ diff --git a/fosdem2011/minefield-tahoe-dataman.png b/fosdem2011/minefield-tahoe-dataman.png new file mode 100644 index 0000000..922be69 Binary files /dev/null and b/fosdem2011/minefield-tahoe-dataman.png differ diff --git a/fosdem2011/slides.css b/fosdem2011/slides.css new file mode 100644 index 0000000..77b11ce --- /dev/null +++ b/fosdem2011/slides.css @@ -0,0 +1,266 @@ +/************************** + * styles for talk slides * + * by Robert Kaiser * + * * + * (for Linuxwochen 2009) * + **************************/ + + +/***** base style *****/ + +html { + overflow: hidden; /* to make translations not paint scrollbars */ +} + +body { + margin: 0px; + padding: 0px; + border: 0px; + font-family: Arial,Helvetica,sans-serif; + font-size: 2em; + color: white; + background-color: black; +} + +ul { + padding-left: 1.2em; + margin-bottom: 0.5em; +} + +ul:first-child, +ul:last-child { + margin-top: 0; +} + +#header { + height: 38px; + position: relative; + border-bottom: 1px solid #781412; + background: #000000 url("template/header-background.png") top left repeat-x; + padding: 0 15px 0 0; + z-index: 1; +} + +#headerlogo { + height: 38px; + width: 186px; +} + +#header-text { + float: right; + padding: 7px 20px; + font-size: 24px; + font-weight: bold; + color: #CCCCCC; +} + +#header-text.neartime { + color: #CCCCFF; +} + +#header-text.ontime { + color: #CCFFCC; +} + +#header-text.overtime { + color: #FF8080; +} + +#slidenav { + background: #f02925 url("template/breadcrumbs-background.png") bottom repeat-x; + padding: 4px 15px 30px 55px; + font-size: 10px; + color: #FFCCCC; +} + +#slidenav a:link, +#slidenav a:visited { + color: #FFFFFF; +} + +#slidenav a:hover, +#slidenav a:active { + color: #FFCCCC; +} + +#slidenav .nolink { + color: #AA8080; +} + +#subheader-text { + float: right; + padding: 0 20px; +} + +article { + position: absolute; + width: 100%; + /* header is 38px + 1px border, slidenav is 13px + 4px + 30px paddings, + another 5px for safety */ + height: -moz-calc(100% - 90px); + overflow: auto; + + -moz-transition-property: -moz-transform, opacity; + -moz-transition-duration: 3s; + -moz-transition-timing-function: ease; + -webkit-transition-property: -moz-transform, opacity; + -webkit-transition-duration: 3s; + -webkit-transition-timing-function: ease; + -moz-transform-origin: center 5em; + + opacity: 0; +/* + -moz-transform: translate(-100%, 0); + -webkit-transform: translate(-100%, 0); +*/ +/* + -moz-transform: scale(0.1) rotate(360deg); + -webkit-transform: scale(0.1) rotate(360deg); +*/ + -moz-transform: scale(0.1) rotate(360deg) translate(-200%, 0); + -webkit-transform: scale(0.1) rotate(360deg) translate(-100%, 0); +} + +article[aria-selected="true"] { + opacity: 1; + -moz-transform: scale(1) rotate(0deg) translate(0, 0); + -webkit-transform: scale(1) rotate(0deg) translate(0, 0); +} + +article[aria-selected="true"] ~ article { + opacity: 0; +/* + -moz-transform: translate(100%, 0); + -webkit-transform: translate(100%, 0); +*/ +/* + -moz-transform: scale(0.1) rotate(-360deg); + -webkit-transform: scale(0.1) rotate(-360deg); +*/ + -moz-transform: scale(0.1) rotate(-360deg) translate(200%, 0); + -webkit-transform: scale(0.1) rotate(-360deg) translate(100%, 0); +} + +/***** headers *****/ + +h1 { + margin: 0 0 0.5em 0; + font-size: 1.7em; + font-weight: bold; + text-align: center; + text-shadow: #AA8080 3px 3px 5px; +} + +h2 { + margin: 0.5em 0; + font-size: 1.3em; + font-weight: bold; + text-align: center; + text-shadow: #AA8080 2px 2px 3px; +} + +h3 { + margin: 0.5em 0; + font-size: 1.1em; + font-weight: bold; + text-align: center; +} + +h4 { + margin: 0.5em 0; + font-size: 1em; + font-weight: bold; + text-align: left; +} + +/***** boxes *****/ + +.simplebox { + padding: 0.5em; +} + +.captionedbox { + padding: 0px; +} + +.simplebox, +.captionedbox { + margin: 1em; + border: 1px solid #FF8080; + background-color: #400000; + -moz-border-radius: .5em; + -moz-box-shadow: #AA8080 1px 1px 3px 2px; +} + +.captionedbox-content { + margin: 0px; + padding: 0.5em; + border: 0px; + border-top: 2px solid #9FCBF7; + -moz-border-top-colors: #FFFFFF #FF8080; + -moz-border-radius: 0 0 .5em .5em; +} + +.captionedbox-caption { + margin: 0.5em; + font-weight: bold; + text-shadow: #804040 1px 1px 2px; +} + +/***** misc formatting *****/ + +mark { + font-weight: bold; + color: #0060C0; + background-color: transparent; + text-shadow: #5959ec 1px 1px 1px; +} + +.border { + border: 1px solid #FF8080; + padding: 0.5em; +} + +ul > li { + margin: 0.5em 0; +} + +.cent { + text-align: center; +} + +.topmargin { + margin-top: 0.5em; +} + +.akey { + text-decoration: underline; +} + +a:link { color: #CCCCFF; text-decoration: none; } +a:visited { color: #EECCFF; text-decoration: none; } +a:hover, a:active { color: #FFCCCC; text-decoration: underline; } + +/***** small stuff *****/ + +.small, +.small { + font-size: 0.75em; +} + +ul.small, +.small ul { + padding: 0px; + border: 0px; + margin: 0px 0px 0px 1em; +} + +ul.small > li +.small ul > li { + margin: 0px; + padding: 0px; + border: 0px; +} + +/***** specific slides *****/ + diff --git a/fosdem2011/slides.js b/fosdem2011/slides.js new file mode 100644 index 0000000..87b2961 --- /dev/null +++ b/fosdem2011/slides.js @@ -0,0 +1,198 @@ +/****************************** + * JavaScript for talk slides * + * by Robert Kaiser * + * * + * (for FOSDEM 2011) * + ******************************/ + +var slides = {}; +var articleNodes; +var currentSlide; +var currentIdx; +var defaultIdx = 1; // set to slide index to show by default +var firstIdx = 2; // set no value if to use first available +var lastIdx; // set no value if to use first available + +var pageTitle, headerText, subHeaderText; +var navPrev, navNext, navPrevNolink, navNextNolink; + +// Called when the document has been loaded. +function docLoaded() { + pageTitle = document.getElementsByTagName("title")[0]; + headerText = document.getElementById("header-text"); + subHeaderText = document.getElementById("subheader-text"); + navPrev = document.getElementById("nav-prev"); + navNext = document.getElementById("nav-next"); + navPrevNolink = document.getElementById("nav-prev-nolink"); + navNextNolink = document.getElementById("nav-next-nolink"); + articleNodes = document.getElementsByTagName("article"); + + if (!firstIdx) + firstIdx = 0; + if (!lastIdx) + lastIdx = articleNodes.length - 1; + + // Get a list of all slides (articles). + subHeaderText.textContent = articleNodes.length + " slides..."; + for (var i = 0; i < articleNodes.length; ++i) { + subHeaderText.textContent = "Indexing slide " + i + " / " + articleNodes.length; + if (!articleNodes[i].id) + articleNodes[i].id = "slide_" + i; + + slides[articleNodes[i].id] = + {"idx": i, + "name": articleNodes[i].id, + "title": articleNodes[i].title ? articleNodes[i].title : articleNodes[i].id, + "obj": articleNodes[i]}; + + if (location.hash.length && + (location.hash == "#" + articleNodes[i].id || location.hash == "#" + i)) { + articleNodes[i].setAttribute("aria-selected", "true"); + currentSlide = slides[articleNodes[i].id]; + currentIdx = i; + } + } + + if (!currentSlide) { + currentIdx = defaultIdx; + currentSlide = slides[articleNodes[currentIdx].id]; + currentSlide.obj.setAttribute("aria-selected", "true"); + location.hash = "#" + currentSlide.name; + } + updateDisplay(); +} + +// Called when the hash part of the location changes. +function locationHashChanged() { + if (location.hash.length > 1) { + var hashtag = location.hash.substring(1); + // If not a number, treat as ID + if (isNaN(hashtag) && slides[hashtag]) { + currentSlide.obj.removeAttribute("aria-selected"); + currentSlide = slides[hashtag]; + currentIdx = currentSlide.idx; + currentSlide.obj.setAttribute("aria-selected", "true"); + updateDisplay(); + } + else if (articleNodes[hashtag]) { + currentSlide.obj.removeAttribute("aria-selected"); + currentIdx = hashtag; + currentSlide = slides[articleNodes[currentIdx].id]; + currentSlide.obj.setAttribute("aria-selected", "true"); + updateDisplay(); + } + } +} +window.onhashchange = locationHashChanged; + +// Update the display after we updated what slide is shown. +function updateDisplay() { + if (currentIdx >= firstIdx && currentIdx <= lastIdx && + currentSlide.name != "toc") + subHeaderText.textContent = (currentIdx - firstIdx + 1) + "/" + + (lastIdx - firstIdx + 1) + " - " + + currentSlide.title; + else + subHeaderText.textContent = currentSlide.title; + pageTitle.textContent = headerText.textContent + ": " + currentSlide.title; + if (currentIdx > firstIdx && currentSlide.name != "toc") { + navPrev.hidden = false; + navPrev.href = "#" + articleNodes[currentIdx - 1].id; + navPrevNolink.hidden = true; + } + else { + navPrev.hidden = true; + navPrevNolink.hidden = false; + } + if (currentIdx < lastIdx && currentSlide.name != "toc") { + navNext.hidden = false; + navNext.href = "#" + articleNodes[currentIdx + 1].id; + navNextNolink.hidden = true; + } + else { + navNext.hidden = true; + navNextNolink.hidden = false; + } + headerText.className = ""; + slide_start = new Date(); + if (currentSlide.name == "toc") + createTOC(); + else + setTimeout("timerFired()", 1000*(slide_seconds/3)); +} + +// Create TOC list. +function createTOC() { + var list = document.getElementById("toc-list"); + if (!list.getElementsByTagName("li").length) { + for (var slide in slides) { + if (slide != "toc") { + var item = document.createElement("li"); + var link = document.createElement("a"); + var slideHeaders = slides[slide].obj.getElementsByTagName("h1"); + if (slideHeaders.length) + link.textContent = slideHeaders[0].textContent; + else + link.textContent = slides[slide].title; + link.href = "#" + slides[slide].name; + item.appendChild(link); + list.appendChild(item); + } + } + } +} + +// Do timed color variation on slides. +var slide_seconds = 3*60; +var slide_start = new Date(); + +function timerFired() { + var slide_current = new Date(); + var seconds_diff = Math.round((slide_current.getTime() - slide_start.getTime()) / 1000); + if (seconds_diff >= slide_seconds) { + headerText.className = "overtime"; + } + else if (seconds_diff >= Math.round(2*slide_seconds/3)) { + headerText.className = "ontime"; + setTimeout("timerFired()", 1000*(slide_seconds/3)); + } + else if (seconds_diff >= Math.round(slide_seconds/3)) { + headerText.className = "neartime"; + setTimeout("timerFired()", 1000*(slide_seconds/3)); + } + else { + // We should never come here, but if we do, go into a 1s loop until we get over the upcoming step. + setTimeout("timerFired()", 1000); + } +} +setTimeout("timerFired()", 1000*(slide_seconds/3)); + +// Keyboard/click nav functionality, mostly inherited from FOSDEM 2007. +(function() { + function go(where) { + where = where || "next"; + var navElem = document.getElementById("nav-" + where); + if (!navElem.hidden) + window.location.href = navElem.href; + } + + function handleClick(e) { + e = e || event; + var target = (window.event) ? e.srcElement : e.target; + if (e.which == 1 && target.nodeName != "A" && target.nodeName != "VIDEO") + go("next"); + } + + function handleKeyPress(e) { + e = e || event; + switch (e.keyCode) { + case e.DOM_VK_LEFT: + go("prev"); break; + case e.DOM_VK_RIGHT: + go("next"); break; + } + } + + window.onclick = handleClick; + window.onkeypress = handleKeyPress; +})(); diff --git a/fosdem2011/template/breadcrumbs-background.png b/fosdem2011/template/breadcrumbs-background.png new file mode 100644 index 0000000..349df7e Binary files /dev/null and b/fosdem2011/template/breadcrumbs-background.png differ diff --git a/fosdem2011/template/header-background.png b/fosdem2011/template/header-background.png new file mode 100644 index 0000000..65c3fc5 Binary files /dev/null and b/fosdem2011/template/header-background.png differ diff --git a/fosdem2011/template/header-logo.png b/fosdem2011/template/header-logo.png new file mode 100644 index 0000000..1795568 Binary files /dev/null and b/fosdem2011/template/header-logo.png differ diff --git a/fosdem2011/win7-preferences-network.png b/fosdem2011/win7-preferences-network.png new file mode 100644 index 0000000..02bc721 Binary files /dev/null and b/fosdem2011/win7-preferences-network.png differ