Changeset 12

Show
Ignore:
Timestamp:
07/07/06 00:55:11 (2 years ago)
Author:
jm3
Message:

refined pitch structure and added script for demo
switched s5 themes

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • subphonium/concept/the-concept.html

    r11 r12  
    4141        </div> 
    4242 
     43        <!-- <div class="slide"> 
     44                <h1>The Promise:</h1> 
     45                        <ul> 
     46                Finally, we can answer the question that has plagued the ancients for centuries: 
     47                                <li>What does my inbox SOUND like?</li> 
     48                                <li>[DEMO]</li> 
     49                        </ul> 
     50        </div> 
     51        --> 
     52 
    4353        <div class="slide"> 
    44                 <h1>you monitor lots of data sources:</h1> 
    45                 <ul class="incremental"> 
    46                         <li>the team's bug list or to-do's</li> 
    47                         <li>news: digg, google news, slashdot</li> 
     54                <h1>Your life is busy:</h1> 
     55                You keep tabs on lots of information: 
     56                <ul> 
     57                        <li>mail in your inbox</li> 
     58                        <li>comments on your website</li> 
     59                        <li>the team's to-do's or bug list</li> 
     60                        <li>news items: digg, google news, slashdot</li> 
    4861                        <li>links: feedmelinks, del.icio.us, etc</li> 
    49                         <li>mail in your inbox</li> 
    50                         <li>comments on your blog</li> 
     62                        <li>log files</li> 
    5163                        <li>it becomes overwhelming</li> 
     64                </ul> 
     65                <!-- By now, we can get everything as RSS or Email: --> 
     66        </div> 
     67 
     68                <div class="slide"> 
     69                        <h1>You're monitoring lots of stuff.</h1> 
     70                                But wait. it gets worse. 
     71                        <ul> 
     72                                <li>your data flow at different speeds</li> 
     73                                <ul> 
     74                                        <li>real-time Digg updates</li> 
     75                                        <li>vs. monthly comments on your loser myspace profile</li> 
     76                                        <li><b>The noiser sources and frequent posters will drown out the quieter ones</b></li> 
     77                                </ul> 
     78                                <li>You work at a relatively low resolution</li> 
     79                                <ul> 
     80                                        <li>72dpi?  Blackberry?</li> 
     81                                        <li><b>If you're not actively watching the light-bulb box, you're behind.</b></li> 
     82                                </ul> 
     83                                <li>You could try CPA ("constant partial attention") to casually monitor all these feeds.</li> 
     84                                <ul> 
     85                                        <li>(how's that working out for you? :-)</li> 
     86                                </ul> 
     87                        </ul> 
     88                        <ol> 
     89                </ol> 
     90        </div> 
     91 
     92        <div class="slide"> 
     93                <h1>We want:</h1> 
     94                <ul> 
     95                        <li>to <em>steep</em> in our feeds so we become more productive, more in touch, and happier.</li> 
     96                        <!-- in other words, to make keeping up fun, and falling not induce guilt trips --> 
     97                        <b>Not:</b> 
     98                        <li><s>to become information janitors, constantly searching, and sorting, and RELOADing</s></li> 
    5299                </ul> 
    53100        </div> 
    54101 
    55102        <div class="slide"> 
    56                 <h1>this is a lot of data. but wait. it gets worse.</h1> 
    57                 <ul class="incremental"> 
    58                  <li>your data flow at different speeds and directions</li> 
    59                  <li>and you work at a very low resolution (72dpi? blackberry?)</li> 
    60                 <li>the river of news offers solace...sort of.</li> 
    61                 <li>ANIMATION HERE</li> 
    62                 By merging all your feeds together and sorting by date, noisy sources and frequent posters tend to drown out the quieter ones, making it difficult to manage + track the pulse of your life 
    63         </ul> 
     103                <h1> &lt; Jam session &gt; </h1> 
     104                <ul> 
     105                speaker notes: 
     106                        <li>config: set BPM based on feed type, time of day, and location profile</li> 
     107                        <li>demo: show rolling loop mode (short, constantly-edited lists: to'do's)</li> 
     108                        <li>config: show wholesale sound set swaps</li> 
     109                        <li>demo: zen: ambient jams for nighttime</li> 
     110                        <li>config: show real-time tuning of sound asssignments as events occur</li> 
     111                        <li>demo: show CEO-inbox mode: hand-picked ringtones with default backing sound</li> 
     112                        <li>config: timeshifting: "catch up" on feeds by compressing time in rapid-review mode, listening for outliers</li> 
     113                        <li>demo: my gmail spam / drum n bass / rock the fucking house out</li> 
     114                </ul> 
    64115        </div> 
    65116 
    …… 
    69120 
    70121</div> 
    71 </div> 
    72122 
    73123</body> 

  • subphonium/concept/ui/default/framing.css

    r10 r12  
    1 /* The following styles size, place, and layer the slide components. 
    2    Edit these if you want to change the overall slide layout. 
     1/* The following styles size and place the slide components. 
     2   Edit them if you want to change the overall slide layout. 
    33   The commented lines can be uncommented (and modified, if necessary)  
    44    to help you with the rearrangement process. */ 
    55 
    6 /* target = 1024x768 */ 
     6div#header, div#footer, div.slide {width: 100%; top: 0; left: 0;} 
     7div#header {top: 0; left: 0; z-index: 1;} 
     8div#footer {top: auto; bottom: 0; width: 100%; z-index: 5;} 
     9div.slide {top: 0; width: 88%; padding: 1em 7% 2em 5%; z-index: 2;} 
    710 
    8 div#header, div#footer, .slide {width: 100%; top: 0; left: 0;} 
    9 div#header {top: 0; height: 3em; z-index: 1;} 
    10 div#footer {top: auto; bottom: 0; height: 2.5em; z-index: 5;} 
    11 .slide {top: 0; width: 92%; padding: 3.5em 4% 4%; z-index: 2;  list-style: none;} 
    12 div#controls {left: 50%; bottom: 0; width: 50%; z-index: 100;} 
    13 div#controls form {position: absolute; bottom: 0; right: 0; width: 100%; 
    14   margin: 0;} 
    15 #currentSlide {position: absolute; width: 10%; left: 45%; bottom: 1em; z-index: 10;} 
     11#footer div#controls {bottom: 1.5em; left: 0; width: 100%; text-align: center; z-index: 1;} 
     12div#controls form {margin: 0; padding: 0;} 
     13 
     14#currentSlide {position: absolute; left: 0; bottom: 0.5em; z-index: 10; 
     15  width: 100%; text-align: center;} 
    1616html>body #currentSlide {position: fixed;} 
    1717 

  • subphonium/concept/ui/default/pretty.css

    r10 r12  
    1 /* Following are the presentation styles -- edit away! */ 
     1/* Following are the presentation styles -- edit away! 
     2   Note that the 'body' font size may have to be changed if the resolution is 
     3    different than expected. */ 
    24 
    3 body {background: #FFF url(bodybg.gif) -16px 0 no-repeat; color: #000; font-size: 2em;} 
    4 :link, :visited {text-decoration: none; color: #00C;} 
    5 #controls :active {color: #88A !important;} 
    6 #controls :focus {outline: 1px dotted #227;} 
    7 h1, h2, h3, h4 {font-size: 100%; margin: 0; padding: 0; font-weight: inherit;} 
    8 ul, pre {margin: 0; line-height: 1em;} 
    9 html, body {margin: 0; padding: 0;} 
     5body {background: #95A7D4 url(bg-slide.jpg) 100% 100% no-repeat; color: #210; font: 29px Arial, sans-serif;} 
     6a {text-decoration: none; color: #336; border-bottom: 1px dotted;} 
     7h1, h2, h3, h4, h5, h6 {font-size: 1em; margin: 0;} 
     8sup {font-size: 0.75em; font-weight: normal; 
     9  vertical-align: 0.5em; line-height: 1px;} 
     10ul {margin-left: 1em; padding-left: 0;} 
     11li {margin-bottom: 0.66em;} 
     12li li {margin: 0.33em 0; font-size: smaller;} 
    1013 
    11 blockquote, q {font-style: italic;} 
    12 blockquote {padding: 0 2em 0.5em; margin: 0 1.5em 0.5em; text-align: center; font-size: 1em;} 
    13 blockquote p {margin: 0;} 
    14 blockquote i {font-style: normal;} 
    15 blockquote b {display: block; margin-top: 0.5em; font-weight: normal; font-size: smaller; font-style: normal;} 
    16 blockquote b i {font-style: italic;} 
     14#header {background: url(bg-shade.png); border-bottom: 1px solid #333; 
     15  padding-bottom: 2em;} 
     16#footer {background: url(bg-shade.png); color: #BBB; border-top: 1px solid #333;} 
     17#header, #footer {font-size: 0.5em;} 
     18#footer h1, #footer h2 { padding: 0.5em 0.75em; 
     19  font-weight: normal; font-style: italic;} 
     20#footer h1 {left: 0; font-size: 1em; letter-spacing: 1px;} 
     21#footer h2 {position: absolute; bottom: 0; right: 0;} 
    1722 
    18 kbd {font-weight: bold; font-size: 1em;} 
    19 sup {font-size: smaller; line-height: 1px;} 
     23#controls a {display: none;} 
     24#controls select {visibility: hidden;} 
     25#controls div:hover select {visibility: visible;} 
    2026 
    21 .slide code {padding: 2px 0.25em; font-weight: bold; color: #533;} 
    22 .slide code.bad, code del {color: red;} 
    23 .slide code.old {color: silver;} 
    24 .slide pre {padding: 0; margin: 0.25em 0 0.5em 0.5em; color: #533; font-size: 90%;} 
    25 .slide pre code {display: block;} 
    26 .slide ul {margin-left: 5%; margin-right: 7%; list-style: disc;} 
    27 .slide li {margin-top: 0.75em; margin-right: 0;} 
    28 .slide ul ul {line-height: 1;} 
    29 .slide ul ul li {margin: .2em; font-size: 85%; list-style: square;} 
    30 .slide img.leader {display: block; margin: 0 auto;} 
     27#currentSlide {font-size: 0.5em;} 
     28#currentSlide span {font-size: 13px; color: rgb(49%,47%,66%);} 
     29#currentSlide #csSep {display: none;} 
     30#currentSlide #csHere {font-weight: bold;} 
     31#currentSlide #csHere:before {content: "#"; font-weight: normal;} 
     32#currentSlide #csTotal:before {content: " of ";} 
    3133 
    32 div#header, div#footer {background: #005; color: #AAB; 
    33   font-family: Verdana, Helvetica, sans-serif;} 
    34 div#header {background: #005 url(bodybg.gif) -16px 0 no-repeat; 
    35   line-height: 1px;} 
    36 div#footer {font-size: 0.5em; font-weight: bold; padding: 1em 0;} 
    37 #footer h1, #footer h2 {display: block; padding: 0 1em;} 
    38 #footer h2 {font-style: italic;} 
    39  
    40 div.long {font-size: 0.75em;} 
    41 .slide h1 {position: absolute; top: 0.7em; left: 87px; z-index: 1; 
    42   margin: 0; padding: 0.3em 0 0 50px; white-space: nowrap; 
    43   font: bold 150%/1em Helvetica, sans-serif; text-transform: capitalize; 
    44   color: #DDE; background: #005;} 
    45 .slide h3 {font-size: 130%;} 
    46 h1 abbr {font-variant: small-caps;} 
    47  
    48 div#controls {position: absolute; left: 50%; bottom: 0; 
    49   width: 50%; 
    50   text-align: right; font: bold 0.9em Verdana, Helvetica, sans-serif;} 
    51 html>body div#controls {position: fixed; padding: 0 0 1em 0; 
    52   top: auto;} 
    53 div#controls form {position: absolute; bottom: 0; right: 0; width: 100%; 
    54   margin: 0; padding: 0;} 
    55 #controls #navLinks a {padding: 0; margin: 0 0.5em;  
    56   background: #005; border: none; color: #779;  
    57   cursor: pointer;} 
    58 #controls #navList {height: 1em;} 
    59 #controls #navList #jumplist {position: absolute; bottom: 0; right: 0; background: #DDD; color: #227;} 
    60  
    61 #currentSlide {text-align: center; font-size: 0.5em; color: #449;} 
    62  
    63 #slide0 {padding-top: 3.5em; font-size: 90%;} 
    64 #slide0 h1 {position: static; margin: 1em 0 0; padding: 0; 
    65    font: bold 2em Helvetica, sans-serif; white-space: normal; 
    66    color: #000; background: transparent;} 
    67 #slide0 h2 {font: bold italic 1em Helvetica, sans-serif; margin: 0.25em;} 
    68 #slide0 h3 {margin-top: 1.5em; font-size: 1.5em;} 
    69 #slide0 h4 {margin-top: 0; font-size: 1em;} 
    70  
    71 ul.urls {list-style: none; display: inline; margin: 0;} 
    72 .urls li {display: inline; margin: 0;} 
    73 .note {display: none;} 
    74 .external {border-bottom: 1px dotted gray;} 
    75 html>body .external {border-bottom: none;} 
    76 .external:after {content: " \274F"; font-size: smaller; color: #77B;} 
    77  
    78 .incremental, .incremental *, .incremental *:after {color: #DDE; visibility: visible;} 
    79 img.incremental {visibility: hidden;} 
    80 .slide .current {color: #B02;} 
    81  
    82  
    83 /* diagnostics 
    84  
    85 li:after {content: " [" attr(class) "]"; color: #F88;} 
    86  */ 
     34.slide h1 {font-size: 1.66em; line-height: 1; letter-spacing: -1px; 
     35  margin: 0 -15% 1em 0; padding: 0.25em 15% 0.06125em 0; border-bottom: 0.06125em solid rgb(90,94,120);} 
     36#slide0 h1 {border: none; font-size: 2.25em; letter-spacing: 0; margin: 3em 0 1.5em;} 
     37#slide0 h3 {margin-bottom: 0;} 
     38#slide0 h4 {margin-top: 0; font-size: smaller;} 

  • subphonium/concept/ui/default/s5-core.css

    r10 r12  
    11/* Do not edit or override these styles! The system will likely break if you do. */ 
    22 
    3 div#header, div#footer, div#controls, .slide {position: absolute;} 
    4 html>body div#header, html>body div#footer,  
    5   html>body div#controls, html>body .slide {position: fixed;} 
     3div#header, div#footer, div.slide {position: absolute;} 
     4html>body div#header, html>body div#footer, html>body div.slide {position: fixed;} 
     5div.slide {visibility: hidden;} 
     6#slide0 {visibility: visible;} 
     7div#controls {position: absolute;} 
     8#footer>div#controls {position: fixed;} 
    69.handout {display: none;} 
    7 .layout {display: block;} 
    8 .slide, .hideme, .incremental {visibility: hidden;} 
    9 #slide0 {visibility: visible;}