fosdem2011/index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   5   <meta name="Author" content="KaiRo - Robert Kaiser">
   6   <title>In-Tab UI</title>
   7   <link rel="stylesheet" type="text/css" href="slides.css">
   8   <script type="text/javascript" src="slides.js"></script>
   9   <link rel="contents" href="#index" title="Overview">
  10   <link rel="index" id="link-toc" href="#toc" title="Content">
  11   <link rel="start" id="link-start" href="#index" title="Start">
  12   <!-- link rel="first" id="link-first" href="#" title="First page" hidden>
  13   <link rel="previous" id="link-prev" href="#" title="Previous page" hidden>
  14   <link rel="next" id="link-next" href="#" title="Next page" hidden>
  15   <link rel="last" id="link-last" href="#" title="Last page" hidden -->
  16 </head>
  17 <body onload="docLoaded();">
  18 <header id="header"><div id="header-text">In-Tab UI</div>
  19   <img id="headerlogo" src="template/header-logo.png" alt="">
  20 </header>
  21 <nav id="slidenav"><div id="subheader-text"></div>
  22   <a href="#toc" id="nav-toc" accesskey="t">toc</a> ||
  23   <a href="#index" id="nav-start" accesskey="s">start</a> ||
  24   <a href="#" id="nav-prev" accesskey="p" hidden>&lt; prev</a>
  25   <span id="nav-prev-nolink" class="nolink">&lt; prev</span> |
  26   <a href="#" id="nav-next" id="goNext" accesskey="n" hidden>next &gt;</a>
  27   <span id="nav-next-nolink" class="nolink">next &gt;</span>
  28 </nav>
  29
  30 <article id="toc" title="Table of Contents">
  31 <h1>Table of Contents</h1>
  32 <h2>In-Tab UI</h2>
  33
  34 <div class="captionedbox">
  35 <p class="captionedbox-caption">The following slides can be found in this presentation:</p>
  36 <div class="captionedbox-content">
  37 <ul id="toc-list">
  38 </ul>
  39 </article>
  40
  41 <article id="index" title="Start Page">
  42 <h1>In-Tab (In-Content) UI</h1>
  43
  44 <div class="simplebox">
  45 <mark><a href="http://home.kairo.at/">Robert Kaiser</a></mark>,
  46 "KaiRo" &lt;kairo@kairo.at&gt;
  47 <br><small>Mozilla contributor, add-on developer, SeaMonkey coordinator</small>
  48 </div>
  49
  50 <div class="captionedbox">
  51 <p class="captionedbox-caption">Slides:
  52   <a href="http://slides.kairo.at/fosdem2011/">http://slides.kairo.at/fosdem2011/</a></p>
  53 <div class="captionedbox-content small">
  54 <ul class="small">
  55   <li>Created for
  56     <a href="http://fosdem.org/2011/schedule/track/mozilla_devroom">Mozilla
  57     Developer Room</a> at <a href="http://www.fosdem.org/">FOSDEM 2011</a> in
  58     Brussels.</li>
  59   <li>Written with in HTML 5 with CSS 3 and JavaScript.</li>
  60   <li>Navigation with links on all slides, with accesskeys
  61    (e.g. "n"/Alt+Shift+N for "next") or back/forward keys</li>
  62   <li><a href="#toc">Table of Contents</a></li>
  63   <li><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/at/"><img
  64       alt="Licensed under CC-BY-SA," style="border-width:0;vertical-align:bottom;"
  65       src="cc-by-sa-80x15.png" /></a> 02/2011 Robert Kaiser</li>
  66 </ul>
  67 </div>
  68 </div>
  69 </article>
  70
  71 <article id="basics" title="Basics">
  72 <h1>Basic Description</h1>
  73
  74 <div class="simplebox">
  75 <ul>
  76   <li>Eliminate separate windows</li>
  77   <li><mark>Integrate UI</mark> into browser tabs</li>
  78   <li>Non-modal, non-popup</li>
  79   <li>Hide web-specific controls for those tabs</li>
  80 </ul>
  81 </div>
  82 </article>
  83
  84 <article id="current" title="Current State">
  85 <h1>Current State</h1>
  86
  87 <div class="simplebox">
  88 <ul>
  89   <li>about:config</li>
  90   <li>Session restore</li>
  91   <li>Network error and phishing/malware warning pages</li>
  92   <li><mark>FF4 add-ons manager</mark></li>
  93 </ul>
  94 <div class="cent topmargin">
  95 <img src="minefield-addons-manager.png" alt="Add-ons manager">
  96 </div>
  97 </div>
  98 </article>
  99
 100 <article id="plans-prefs" title="Plans: Preferences">
 101 <h1>Plans: Preferences</h1>
 102
 103 <div class="simplebox">
 104 <a href="http://blog.stephenhorlander.com/2010/06/01/in-content-ui-visual-unification/">Stephen
 105 Horlander, June 2010</a>: <mark>preferences</mark> among targets - mockup:
 106 <div class="cent topmargin">
 107 <img src="win7-preferences-network.png" alt="Win7 Network Preference Mockup">
 108 </div>
 109 </div>
 110 </article>
 111
 112 <article id="plans-tentative" title="Plans: Tentative">
 113 <h1>Plans: Tentative</h1>
 114
 115 <div class="simplebox">
 116 Stephen's blog post and
 117 <a href="https://wiki.mozilla.org/Firefox/Projects/Incontent_Page_Design">in-content
 118 page design</a> wiki page go further:
 119 <ul>
 120   <li><mark>Library</mark> (History and Bookmarks View)</li>
 121   <li><mark>Downloads</mark> Manager</li>
 122   <li>Toolbar <mark>Customization</mark></li>
 123   <li>Tab View</li>
 124   <li>Home tab</li>
 125   <li>About Firefox</li>
 126   <li>Help</li>
 127 </ul>
 128 <mark>Non-goal</mark>: "Redesign all windows and panels"
 129 tracking bugs: bug 584942
 130 </div>
 131 </article>
 132
 133 <article id="exp-dataman" title="Tahoe">
 134 <h1>Tahoe Data Manager</h1>
 135
 136 <div class="simplebox cent">
 137 <img src="minefield-tahoe-dataman.png" alt="Tahoe Data Manager">
 138 </div>
 139 </article>
 140
 141 <article id="exp-dlman" title="Jökulsárlón">
 142 <h1>Jökulsárlón Download Manager</h1>
 143
 144 <div class="simplebox cent">
 145 <img src="minefield-jokulsarlon-dlman.png" alt="Jökulsárlón Download Manager">
 146 </div>
 147 </article>
 148
 149 <article id="exp-mbrot" title="Mandelbrot">
 150 <h1>KaiRo.at Mandelbrot</h1>
 151
 152
 153 <div class="simplebox cent">
 154 <img src="minefield-mandelbrot.png" alt="KaiRo.at Mandelbrot">
 155 </div>
 156 </article>
 157
 158 <article id="demo" title="Demo">
 159 <h1>Demo</h1>
 160
 161
 162 <div class="simplebox">
 163 Let's take a look at some currently working examples of in-tab UI!
 164 </div>
 165 </article>
 166
 167 <article id="end" title="Discussion">
 168 <h1>Open Discussion</h1>
 169
 170 <div class="captionedbox">
 171 <p class="captionedbox-caption">Thanks for your attention!</p>
 172 <div class="captionedbox-content">
 173 We should have some time for discussion now.
 174 <ul>
 175  <li>Any open questions?</li>
 176  <li>Any unmentioned issues?</li>
 177  <li>Anything I forgot to mention?</li>
 178 </ul>
 179 </div>
 180 </div>
 181 </article>
 182
 183 </body>
 184 </html>