[slides.git] / fosdem2011 / index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="Author" content="KaiRo - Robert Kaiser">
  <title>In-Tab UI</title>
  <link rel="stylesheet" type="text/css" href="slides.css">
  <script type="text/javascript" src="slides.js"></script>
  <link rel="contents" href="#index" title="Overview">
  <link rel="index" id="link-toc" href="#toc" title="Content">
  <link rel="start" id="link-start" href="#index" title="Start">
  <!-- link rel="first" id="link-first" href="#" title="First page" hidden>
  <link rel="previous" id="link-prev" href="#" title="Previous page" hidden>
  <link rel="next" id="link-next" href="#" title="Next page" hidden>
  <link rel="last" id="link-last" href="#" title="Last page" hidden -->
</head>
<body onload="docLoaded();">
<header id="header"><div id="header-text">In-Tab UI</div>
  <img id="headerlogo" src="template/header-logo.png" alt="">
</header>
<nav id="slidenav"><div id="subheader-text"></div>
  <a href="#toc" id="nav-toc" accesskey="t">toc</a> ||
  <a href="#index" id="nav-start" accesskey="s">start</a> ||
  <a href="#" id="nav-prev" accesskey="p" hidden>&lt; prev</a>
  <span id="nav-prev-nolink" class="nolink">&lt; prev</span> |
  <a href="#" id="nav-next" id="goNext" accesskey="n" hidden>next &gt;</a>
  <span id="nav-next-nolink" class="nolink">next &gt;</span>
</nav>

<article id="toc" title="Table of Contents">
<h1>Table of Contents</h1>
<h2>In-Tab UI</h2>

<div class="captionedbox">
<p class="captionedbox-caption">The following slides can be found in this presentation:</p>
<div class="captionedbox-content">
<ul id="toc-list">
</ul>
</article>

<article id="index" title="Start Page">
<h1>In-Tab (In-Content) UI</h1>

<div class="simplebox">
<mark><a href="http://home.kairo.at/">Robert Kaiser</a></mark>,
"KaiRo" &lt;kairo@kairo.at&gt;
<br><small>Mozilla contributor, add-on developer, SeaMonkey coordinator</small>
</div>

<div class="captionedbox">
<p class="captionedbox-caption">Slides:
  <a href="http://slides.kairo.at/fosdem2011/">http://slides.kairo.at/fosdem2011/</a></p>
<div class="captionedbox-content small">
<ul class="small">
  <li>Created for
    <a href="http://fosdem.org/2011/schedule/track/mozilla_devroom">Mozilla
    Developer Room</a> at <a href="http://www.fosdem.org/">FOSDEM 2011</a> in
    Brussels.</li>
  <li>Written with in HTML 5 with CSS 3 and JavaScript.</li>
  <li>Navigation with links on all slides, with accesskeys
   (e.g. "n"/Alt+Shift+N for "next") or back/forward keys</li>
  <li><a href="#toc">Table of Contents</a></li>
  <li><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/at/"><img
      alt="Licensed under CC-BY-SA," style="border-width:0;vertical-align:bottom;"
      src="cc-by-sa-80x15.png" /></a> 02/2011 Robert Kaiser</li>
</ul>
</div>
</div>
</article>

<article id="basics" title="Basics">
<h1>Basic Description</h1>

<div class="simplebox">
<ul>
  <li>Eliminate separate windows</li>
  <li><mark>Integrate UI</mark> into browser tabs</li>
  <li>Non-modal, non-popup</li>
  <li>Hide web-specific controls for those tabs</li>
</ul>
</div>
</article>

<article id="current" title="Current State">
<h1>Current State</h1>

<div class="simplebox">
<ul>
  <li>about:config</li>
  <li>Session restore</li>
  <li>Network error and phishing/malware warning pages</li>
  <li><mark>FF4 add-ons manager</mark></li>
</ul>
<div class="cent topmargin">
<img src="minefield-addons-manager.png" alt="Add-ons manager">
</div>
</div>
</article>

<article id="plans-prefs" title="Plans: Preferences">
<h1>Plans: Preferences</h1>

<div class="simplebox">
<a href="http://blog.stephenhorlander.com/2010/06/01/in-content-ui-visual-unification/">Stephen
Horlander, June 2010</a>: <mark>preferences</mark> among targets - mockup:
<div class="cent topmargin">
<img src="win7-preferences-network.png" alt="Win7 Network Preference Mockup">
</div>
</div>
</article>

<article id="plans-tentative" title="Plans: Tentative">
<h1>Plans: Tentative</h1>

<div class="simplebox">
Stephen's blog post and
<a href="https://wiki.mozilla.org/Firefox/Projects/Incontent_Page_Design">in-content
page design</a> wiki page go further:
<ul>
  <li><mark>Library</mark> (History and Bookmarks View)</li>
  <li><mark>Downloads</mark> Manager</li>
  <li>Toolbar <mark>Customization</mark></li>
  <li>Tab View</li>
  <li>Home tab</li>
  <li>About Firefox</li>
  <li>Help</li>
</ul>
<mark>Non-goal</mark>: "Redesign all windows and panels"
tracking bugs: bug 584942
</div>
</article>

<article id="exp-dataman" title="Tahoe">
<h1>Tahoe Data Manager</h1>

<div class="simplebox cent">
<img src="minefield-tahoe-dataman.png" alt="Tahoe Data Manager">
</div>
</article>

<article id="exp-dlman" title="Jökulsárlón">
<h1>Jökulsárlón Download Manager</h1>

<div class="simplebox cent">
<img src="minefield-jokulsarlon-dlman.png" alt="Jökulsárlón Download Manager">
</div>
</article>

<article id="exp-mbrot" title="Mandelbrot">
<h1>KaiRo.at Mandelbrot</h1>


<div class="simplebox cent">
<img src="minefield-mandelbrot.png" alt="KaiRo.at Mandelbrot">
</div>
</article>

<article id="demo" title="Demo">
<h1>Demo</h1>


<div class="simplebox">
Let's take a look at some currently working examples of in-tab UI!
</div>
</article>

<article id="end" title="Discussion">
<h1>Open Discussion</h1>

<div class="captionedbox">
<p class="captionedbox-caption">Thanks for your attention!</p>
<div class="captionedbox-content">
We should have some time for discussion now.
<ul>
 <li>Any open questions?</li>
 <li>Any unmentioned issues?</li>
 <li>Anything I forgot to mention?</li>
</ul>
</div>
</div>
</article>

</body>
</html>
Commit	Line	Data
8dae779e	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>< prev</a>
	25	<span id="nav-prev-nolink" class="nolink">< prev</span> \|
	26	<a href="#" id="nav-next" id="goNext" accesskey="n" hidden>next ></a>
	27	<span id="nav-next-nolink" class="nolink">next ></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" <kairo@kairo.at>
	47	<br><small>Mozilla contributor, add-on developer, SeaMonkey coordinator</small>
	48	</div>
	49
	50	<div class="captionedbox">
	51	<p class="captionedbox-caption">Slides:
f79a4c37	52	<a href="http://slides.kairo.at/fosdem2011/">http://slides.kairo.at/fosdem2011/</a></p>
8dae779e	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>
fb170731	77	<li><mark>Integrate UI</mark> into browser tabs</li>
8dae779e	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">
fb170731	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>
8dae779e	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">
fb170731	104	<a href="http://blog.stephenhorlander.com/2010/06/01/in-content-ui-visual-unification/">Stephen
fb170731	105	Horlander, June 2010</a>: <mark>preferences</mark> among targets - mockup:
8dae779e	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">
fb170731	116	Stephen's blog post and
8dae779e	117	<a href="https://wiki.mozilla.org/Firefox/Projects/Incontent_Page_Design">in-content
fb170731	118	page design</a> wiki page go further:
8dae779e	119	<ul>
fb170731	120	<li><mark>Library</mark> (History and Bookmarks View)</li>
	121	<li><mark>Downloads</mark> Manager</li>
	122	<li>Toolbar <mark>Customization</mark></li>
8dae779e	123	<li>Tab View</li>
fb170731	124	<li>Home tab</li>
8dae779e	125	<li>About Firefox</li>
	126	<li>Help</li>
	127	</ul>
fb170731	128	<mark>Non-goal</mark>: "Redesign all windows and panels"
8dae779e	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>
8dae779e	177	<li>Anything I forgot to mention?</li>
	178	</ul>
	179	</div>
	180	</div>
	181	</article>
	182
	183	</body>
	184	</html>