meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

S5 1.1a2

I’ve posted an update to the testbed file that incorporates the new font-scaling routines from Michaël, and also a slightly corrected version of the internal-link slide routines contributed by Henryk Plötz back in the 1.0b2 days.  These routines all seem to work fine, except the internal-link routines don’t seem to work at all in Safari.  I tried several times to fix it, but I can’t figure out the problem.  So fixing that is now on the to do list.

Speaking of which, here’s the current to-do list for S5 1.1, categorized by their importance.  Any of these are, of course, subject to modification, deletion, and so forth.

  1. A way to trigger simple in-slide changes by hitting “next”.  For example, having a list of bullet points appear one at a time as the space bar (or other “next” action) is hit, and then moving on to the next slide.
  2. The ability to cleanly list multiple authors in the metadata.  I’ll get back to this in just a minute.
  3. Better, possibly more dynamic, theme selection.  I don’t know how yet, nor am I sure how it might impact the outline/slide show view toggling.
  4. A way to choose whether to show/hide all of the navigation controls, or just the menu.  Ordinarily, I’d say “do it in the CSS!” and you can in fact do that right now… as long as you don’t care that the behavior won’t be quite right in Internet Explorer.  The problem is that I’m not quite sure how to manage this in a fully cross-browser fashion, short of scanning the CSS files for certain rules, and firing JS based on that.  Which, frankly, sounds kind of ooky.  Adding that information via a meta tag doesn’t seem like the right answer, but maybe I’m wrong.
  5. A way to indicate the target resolution in the CSS, so that the scripts can use that for scaling purposes (thus making the scaling more intelligent).  I’m not really sure this is needed, and I’m open to being convinced one way or the other.

If there’s anything missing, let me know.  Also feel free to comment on what you think of the above plans.

Now for the metadata situation.  As I understand things, having read RFC 2068, you can have multiple HTTP headers that share a name so long as they’re interpreted as a comma-separated list of values associated with that name.  (Apologies if I’m mangling terminology, but HTTP headers aren’t really my thing.)  So given the following:

<meta name="author" content="Eric Meyer" />
<meta name="affiliation" content="Complex Spiral Consulting" />
<meta name="author" content="Joe Public" />
<meta name="affiliation" content="ConHugeCo Corp." />

…this is an equivalent construction:

<meta name="author" content="Eric Meyer, Joe Public" />
<meta name="affiliation" content="Complex Spiral Consulting, ConHugeCo Corp." />

I find this to be a long way from ideal.  In addition, since commas are the default value separator, if I understand the situation correctly,  I can’t really do something like this:

<meta name="authors" content="Eric Meyer, Complex Spiral Consulting; Joe Public, ConHugeCo Corp." />

…because that ends up as equivalent to:

<meta name="authors" content="Eric Meyer" />
<meta name="authors" content="Complex Spiral Consulting; Joe Public />
<meta name="authors" content="ConHugeCo Corp." />

That’s even further from ideal.  So here’s my current thinking for a way to represent multiple authors and affiliations:

<meta
 name="authors"
 content="Eric Meyer - Complex Spiral Consulting, Joe Public - ConHugeCo Corp." />

Anyone have a better idea than what I’ve proposed?  I’d love to hear it.  As part of said proposal, please keep in mind possible expansion of the information carried in the meta element.  For example, titles might be added, which in my current thinking would go like this:

<meta
 name="authors"
 content="Eric Meyer - Principal Consultant - Complex Spiral Consulting, 
          Joe Public - VP of IF - ConHugeCo Corp." />

It isn’t pretty, but it conforms to my understanding of meta value syntax.  As I say, I’d be very happy to be shown a better way of forming the meta values.

20 Responses»

    • #1
    • Comment
    • Wed 10 Nov 2004
    • 1631
    Ugly Virgin wrote in to say...

    is it legal to do: content=”Eric Meyer&#44; Complex Spiral Consulting”?

    • #2
    • Comment
    • Wed 10 Nov 2004
    • 1632
    Ugly Virgin wrote in to say...

    k, that didnt’ work out right… where it shows a comma, I had put in the html entitiy for a comma which is (ampersand)#44;
    so content=”Eric Meyer(ampersand)#44; Complex Spiral Consulting”

    • #3
    • Comment
    • Wed 10 Nov 2004
    • 1721
    L Rutker wrote in to say...

    Testbed has a js alert “aEL”
    Also will point 5 about target resolution help in image scaling?

    • #4
    • Comment
    • Wed 10 Nov 2004
    • 1804
    Henryk Pl wrote in to say...

    Moin,

    Regarding the first point on the to-do list (I’ll just call that incremental slides) I recently (read: yesterday) did a presentation with two fellow students and added exactly that functionality to the js. See the resulting file at http://www.informatik.hu-berlin.de/~pilop/SNA/ (the slides are in German, though). I decided to do a simple to implement user interface first: click anywhere to advance in-slide (if there is anything left) or go to the next slide and use keyboard navigation (page up/down, space, etc.) to navigate between slides. Incremental slides are currently implemented as dimmed colors for text, and invisibility for images, although other possible css rules would include invisibility for text, too or (really cool, but _extremely_ CPU intensive) using opacity for not yet shown content.

    As for the usage: Simply flag all content that is to appear later on with class="inc" (there is a special convenience service in that class="inc" on a list will automatically moved over to each child). At startup a javascript function runs through the DOM and gathers a list of all those elements for each slide. I then modified the clicker() function to remove the list class on these and only call go when there are no unshown elements remaining in the slide.

    I even did incremental graphics! To trigger this you need something like <img src="foo3.png" class="graphinc" alt=""/> which will be transformed to
    <div class="graphinc"&ltdiv>
    <img src="Netzwerk_graph1.png" class="inc" alt=""/>
    <img src="Netzwerk_graph2.png" class="inc additional" alt=""/>
    <img src="Netzwerk_graph3.png" class="inc additional last" alt=""/>
    </div>

    The other javascript then simply picks this up just like any other class="inc" and some css takes care of positioning the images over each other (obviously they need to be of equal size and should not be transparent, unless you know what you’re doing).

    As always I only tested in Gecko and IE (and IE doesn’t like some of my selectors …). Oh, and somehow I broke the style toggler: Trying to toggle between slide and outline mode reproducibly crashes Mozilla/Firefox.


    Henryk Pl

    • #5
    • Comment
    • Wed 10 Nov 2004
    • 1822
    Lou Rutker wrote in to say...

    Henryk,
    Your incremental slides only work with a mouse. Any plans on adding keyboard support (it now jumps to the next slide and not the next incremental point)

    • #6
    • Comment
    • Wed 10 Nov 2004
    • 1858
    Henryk Pl wrote in to say...

    Moin,

    I know, that was sort of a ‘design decision’ (others would probably call it an ugly hack) because I didn’t want to do bigger modifications to the js. And also because I have no idea how users really would want it to behave. I did it this way because we were presenting with a cordless mouse.

    If you give me your opinions about what the interface should be like I would take up the task of modifying it to behave this way. (And clean the code up for inclusion in the latest version.)


    Henryk Pl

    • #7
    • Comment
    • Thu 11 Nov 2004
    • 0001
    Lachlan Hunt wrote in to say...

    I don’t understand why your comparing HTTP header syntax with the <meta> element, when you’ve used the name attribute. It doesn’t use the HTTP header field syntax unless it’s used with the http-equiv attribute, which should generally be avoided in favour of real HTTP headers anyway.

    The best way to do meta data in a standardised way is using the Dublin Core. I haven’t read it all in detail, so I don’t know how it supports multiple authors

    Finally, Ugly Virgin (if that is your real name :-), the correct way to encode an ampersand to display, as you tried in comments 1 and 2, is to write it as &amp;.

    • #8
    • Comment
    • Thu 11 Nov 2004
    • 0010
    Eric wrote in to say...

    The testbed now has incremental objects working. It even has a new feature where, via the class name, you can indicate if you want the first child to be pre-revealed, or if you want all the children to be faded. (Or whatever CSS effect is used in the theme.)

    The interface at this point is that any keyboard or mouse-click advance will trigger incremental display, except clicking on the “next slide” link in the lower right-hand corner. Using that link will jump you to the next slide regardless of the state of incremental display on the current slide. What I’m trying to figure out is if reverse keyboard events (left arrow, page up, etc.) should run the incremental display back a step, or jump straight to the previous slide. At the moment, the JS does the latter, but I’m becoming convinced it should do the former. I’ll have to tackle that in the near future.

    At the moment, the testbed’s styles are really only set up to handle incremental bullet points, and only when they’re text to boot. I’m still looking at Henryk’s approach to incremental graphics, and thinking about how I want things to work, and whether or not the two are at all different. They may not be. We’ll see.

    Lachlan: so are you saying that commas aren’t a problem in named meta elements, that they don’t imply a concatentation of some kind? So I could have values like "Eric Meyer, Complex Spiral; Joe Public, ConHugeCo Corp." and not run into trouble? That would make me really, really happy.

    • #9
    • Comment
    • Thu 11 Nov 2004
    • 0014
    Lou Rutker wrote in to say...

    The incremental objects seem to work vry nicely, butbseem to only work when moving forward. When moving back it movs one full slide at a time.

    • #10
    • Comment
    • Thu 11 Nov 2004
    • 0808
    Laurens Holst wrote in to say...

    http://www.w3.org/TR/html4/struct/global.html#edef-META

    Looks like it can be anything.

    • #11
    • Comment
    • Thu 11 Nov 2004
    • 0824
    Martin Hense wrote in to say...

    There is an indirect possibility of listing multiple Authors in the header of an XHTML-document. You can represent the whole project-author relationship with an RDF-document and simply link to that document within your XHTML header. This is the way dublincore.org does it with larger information structures since years:
    link rel=”meta” href=”index.rdf”

    • #12
    • Comment
    • Thu 11 Nov 2004
    • 0850
    Micha wrote in to say...

    Is the change in the text size for printing intentional? In an earlier version of S5, up to five slides were printed on each page. With this testfile, I see only three slides on the first page in the Firefox Print Preview. I believe the old printing was better…

    • #13
    • Comment
    • Thu 11 Nov 2004
    • 1032
    Eric wrote in to say...

    RDF– thanks, but no thanks. Since it turns out I’d misunderstood the nature of meta elements, I’m going to concentrate on that approach instead. I’m just curious what the meaning (if any) would be of this:

    <meta name="author" content="Eric Meyer, Complex Spiral Consulting" />
    <meta name="author" content="Joe Public, ConHugeCo Corp." />

    Does that imply the second value will overwrite the first? Are they concatenated instead, and if so, how? Granted, the point of the meta elements is to be human-readable but I’d like to avoid any machine-read problems.

    Print size changing– hmmm, no, that wasn’t intentional. That’s happening due to the dynamically added style sheet that sets the font size, since if you toggle to outline view and print, the font size is normal. We need to restrict the created style sheet to media="screen, projection".

    • #14
    • Comment
    • Thu 11 Nov 2004
    • 1121
    Eric wrote in to say...

    Okay, I’ve hit a serious wall. Here’s as far as I got with the style sheet creation code:

    function fontSize(value) {
    if (!document.getElementById('s5ss')) {
    if (!isIE) {
    document.createElement('style');
    s5ss = document.styleSheets[document.styleSheets.length - 1];
    } else {
    document.createStyleSheet();
    document.s5ss = document.styleSheets[document.styleSheets.length - 1];
    }
    s5ss.setAttribute('media','screen, projection');
    s5ss.setAttribute('id','s5ss');
    }
    if (!isIE) {
    s5ss.insertRule('body {font-size: ' + value + ' !important;}',0);
    } else {
    document.s5ss.addRule('body','font-size: ' + value + ' !important;');
    }
    }

    That gets me the following error in Firefox: “Error: s5ss.setAttribute is not a function”. Which seems weird, because I use it elsewhere in the JS without incident. Anyone know what’s going on and, more importantly, how to fix it?

    • #15
    • Comment
    • Thu 11 Nov 2004
    • 1336
    Matt O'Dell wrote in to say...

    Here’s another brief thing to possibly add to the to do list. Not exactly sure how to fix it, but in Firefox, when I try to select text to copy, if it’s within the same bullet, it acts like I clicked the mouse to move onto the next slide. If I select text across multiple bullets, it doesn’t move on. I have no clue why it would do one and not the other.

    It’s not a huge problem, for if you were using powerpoint you wouldn’t be able to select text, but it might be a nice feature to be able to select and copy text if someone wants to. Just an idea

    • #16
    • Comment
    • Thu 11 Nov 2004
    • 2136
    Leung WC wrote in to say...

    Eric,

    After inspecting the script in comment 14, I found out that the whole script went wrong! (damn)

    1. You didn’t append the
    2. tAttribute from a CSSStyleSheet, not a DOM node.
    3. Inserting the rule this way just get Firefox ignoring it (damn again to Firefox this time)

    Finally I made the corrections here:
    function fontSize(value) {
     if (!(s5ss = document.getElementById('s5ss'))) {
      if (!isIE) {
       document.getElementsByTagName('head')[0].appendChild(s5ss = document.createElement("style"));
       s5ss.setAttribute('media','screen, projection');
       s5ss.setAttribute('id','s5ss');
      } else {
       document.createStyleSheet();
       document.s5ss = document.styleSheets[document.styleSheets.length - 1];
      }
     }

     if (!isIE) {
      while (s5ss.lastChild) s5ss.removeChild(s5ss.lastChild);
      s5ss.appendChild(document.createTextNode('body {font-size: ' + value + ' !important;}'));
     } else {
      document.s5ss.addRule('body','font-size: ' + value + ' !important;');
     }
    }

    • #17
    • Comment
    • Thu 11 Nov 2004
    • 2340
    Eric wrote in to say...

    WC – That seems to be the answer. Thanks! The testbed has been updated. After I get a chance to run some extra tests on the new code and try out a couple of ideas, I’ll move the code to 1.1a3 and post anew.

    • #18
    • Comment
    • Fri 12 Nov 2004
    • 0122
    Leung WC wrote in to say...

    What are the target browsers of S5? I mean, Gecko/IE5/IE6/Opera/Safari/Konqueror and/or others.

    BTW, pt 2 of my previous comment is "You called setAttribute from a CSSStyleSheet, not a DOM node."

    • #19
    • Comment
    • Fri 12 Nov 2004
    • 0351
    Scott wrote in to say...

    Will the incremental bullets be an easily switchable option? I can see where they can be useful in presentations, but they aren’t needed (or wanted) in every one of my presentations. Also, I think that the question of whether the bullets should ‘fade out’ one at a time when you press left, or if they should just fade out really comes down to the way you think people use the back feature (perhaps this could be a switchable option as well.) It would be handy to ‘undo’ one bullet at a time if you accidentally revealed one before you were ready to talk about it. On the other hand, if you wanted to review a previous slide, it would be a hassle to go back line-by-line. It really depends on how the individual presenter expects the software to function. Perhaps these options could go in an ‘advanced options’ configuration file or something, or could be tied in with themes, in order to give people choices.

    On another note, I’m not sure if I’ve posted on this software in general. I think it’s a brilliant project both in its usefulness and its level of sophistication. It’s truely kind of you to volunteer it to the community. Thank you.

    • #20
    • Comment
    • Fri 12 Nov 2004
    • 0719
    christian wrote in to say...

    a short function to add new style rules in a cross browser way ( Opera, Fox, IE):

    function addStyle(string){
    if(/microsoft/i.test(navigator.appName) && !/opera/i.test(navigator.userAgent)){
    document.createStyleSheet().cssText=string;
    }
    else {
    var ele=document.createElement(‘link’);
    ele.rel=’stylesheet’;
    ele.type=’text/css’;
    ele.href=’data:text/css;charset=utf-8,’+escape(string);
    document.getElementsByTagName(‘head’)[0].appendChild(ele);
    }
    }

    a test link

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


November 2004
SMTWTFS
October December
 123456
78910111213
14151617181920
21222324252627
282930  

Sidestep

Feeds

Extras