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 |
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> |