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: |
52 | <a href="http://kairo.mozdev.org/slides/fosdem2011/">http://kairo.mozdev.org/slides/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>Integrate UI 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 | "Examples of in-content UI already present include session restore, |
89 | about:config, new add-ons manager, network error pages and phishing/malware |
90 | warning pages." |
91 | <div class="cent topmargin"> |
92 | <img src="minefield-addons-manager.png" alt="Add-ons manager"> |
93 | </div> |
94 | </div> |
95 | </article> |
96 | |
97 | <article id="plans-prefs" title="Plans: Preferences"> |
98 | <h1>Plans: Preferences</h1> |
99 | |
100 | <div class="simplebox"> |
101 | As <a href="http://blog.stephenhorlander.com/2010/06/01/in-content-ui-visual-unification/">laid |
102 | out</a> by Stephen Horlander in June 2010, preferences are among the targets |
103 | for moving UI into tabs, here's a mockup he drew up: |
104 | <div class="cent topmargin"> |
105 | <img src="win7-preferences-network.png" alt="Win7 Network Preference Mockup"> |
106 | </div> |
107 | </div> |
108 | </article> |
109 | |
110 | <article id="plans-tentative" title="Plans: Tentative"> |
111 | <h1>Plans: Tentative</h1> |
112 | |
113 | <div class="simplebox"> |
114 | The blog post as well as the |
115 | <a href="https://wiki.mozilla.org/Firefox/Projects/Incontent_Page_Design">in-content |
116 | page design</a> wiki page also talks about the following: |
117 | <ul> |
118 | <li>Library (History and Bookmarks View)</li> |
119 | <li>Downloads Manager</li> |
120 | <li>Toolbar Customization</li> |
121 | <li>Tab View</li> |
122 | <li>home tab</li> |
123 | <li>About Firefox</li> |
124 | <li>Help</li> |
125 | </ul> |
126 | Non-goal: "Redesign all windows and panels" |
127 | tracking bugs: bug 584942 |
128 | </div> |
129 | </article> |
130 | |
131 | <article id="exp-dataman" title="Tahoe"> |
132 | <h1>Tahoe Data Manager</h1> |
133 | |
134 | <div class="simplebox cent"> |
135 | <img src="minefield-tahoe-dataman.png" alt="Tahoe Data Manager"> |
136 | </div> |
137 | </article> |
138 | |
139 | <article id="exp-dlman" title="Jökulsárlón"> |
140 | <h1>Jökulsárlón Download Manager</h1> |
141 | |
142 | <div class="simplebox cent"> |
143 | <img src="minefield-jokulsarlon-dlman.png" alt="Jökulsárlón Download Manager"> |
144 | </div> |
145 | </article> |
146 | |
147 | <article id="exp-mbrot" title="Mandelbrot"> |
148 | <h1>KaiRo.at Mandelbrot</h1> |
149 | |
150 | |
151 | <div class="simplebox cent"> |
152 | <img src="minefield-mandelbrot.png" alt="KaiRo.at Mandelbrot"> |
153 | </div> |
154 | </article> |
155 | |
156 | <article id="demo" title="Demo"> |
157 | <h1>Demo</h1> |
158 | |
159 | |
160 | <div class="simplebox"> |
161 | Let's take a look at some currently working examples of in-tab UI! |
162 | </div> |
163 | </article> |
164 | |
165 | <article id="end" title="Discussion"> |
166 | <h1>Open Discussion</h1> |
167 | |
168 | <div class="captionedbox"> |
169 | <p class="captionedbox-caption">Thanks for your attention!</p> |
170 | <div class="captionedbox-content"> |
171 | We should have some time for discussion now. |
172 | <ul> |
173 | <li>Any open questions?</li> |
174 | <li>Any unmentioned issues?</li> |
175 | <li>Anyone wanting to help us?</li> |
176 | <li>Anything I forgot to mention?</li> |
177 | </ul> |
178 | </div> |
179 | </div> |
180 | </article> |
181 | |
182 | </body> |
183 | </html> |