| 00:07 | <TabAtkins> | Either can be used as a child of the other, as appropriate. In many instances, though, <section> will be a child of <article>. |
| 00:08 | <TabAtkins> | Because in many cases <article> will be used to denote the main content of a page. |
| 00:09 | <TabAtkins> | But you can, frex, have something like <article #pagecontent><section .pagesection><article .blogpost><section .sectionofblogpost>... |
| 00:10 | <JonathanNeal> | Taking from w3.org (if that's allowed here), they write "The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead." This is important for me to understand, because I may be upgrading the html of portlets within a portal, so I'm wondering if the portlet as an application should use div' |
| 00:11 | <TabAtkins> | Smashing's use is perfectly appropriate, though, if they're only getting down to the actual *article* after having some extra data before/after it. |
| 00:11 | <TabAtkins> | Probably should. |
| 00:11 | <JonathanNeal> | Right now I have <div class="portlet"><div class="portlet-topper"><div class="portlet-title">Blog Application</div><div class="portlet-content"><!-- blog application --!></div></div> |
| 00:12 | <webben_> | JonathanNeal: I think looking at the editor's draft portlet should probably use section not div. |
| 00:12 | <TabAtkins> | Rule is: if something should appear in an outline of the page, use <section>/<article>. If it shouldn't, use <div> |
| 00:12 | <webben_> | JonathanNeal: "The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading, possibly with a footer. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, contact information." |
| 00:12 | <webben_> | http://dev.w3.org/html5/spec/semantics.html#the-section-element |
| 00:12 | <TabAtkins> | I'll note that your use of a <div> for the *title* is worrying already. |
| 00:13 | <webben_> | JonathanNeal: So a portal site is split into sections, some of those sections are applications. |
| 00:13 | <JonathanNeal> | Sure, that's how it's been, because portlet's can optionally remove their topper, title, |
| 00:14 | <JonathanNeal> | For instance, the web content display portlet is often configured to skip right into the portlet's content, which is why I was wondering if the html should remain div based, because it has more to do with the structure of the page, but I can also see how it's thematically grouping content. |
| 00:14 | <TabAtkins> | Just use the "outline" rule. You don't have to quibble about semantics then. If you collapse the whole page into an outline, and your bit should show up, use the <section>. |
| 00:15 | <TabAtkins> | So, it's probably the case that the outermost div should be a <section>. The others are probably good as <div>s. |
| 00:16 | <webben_> | JonathanNeal: I guess I'd suggest <section class="portlet"><header><h1>Blog Application</h1></header><!-- content --></section> |
| 00:16 | <JonathanNeal> | Would you then say that <div class="portlet-topper"> could be <header> and <div class="portlet-title"> could be <h1>. From what I've read, sections are recommended to begin new header deliniating. |
| 00:17 | <JonathanNeal> | Sure, I need to wrap that content so there you would recommend using a DIV? I really appreciate your input on all of this, by the way, all of you. |
| 00:17 | <TabAtkins> | I agree with webben_ |
| 00:18 | <webben_> | JonathanNeal: Assuming you need it to be the same for all portlets, can't think of anything else than div off-hand. |
| 00:18 | <TabAtkins> | And yeah, probably just wrap the content with a div. Again, just mentally apply the outline rule. |
| 00:19 | <JonathanNeal> | All right, let me make a pastie of what I've gathered so far from what you've said. |
| 00:19 | <TabAtkins> | But if you can determine that some portlets *are* important enough to do so, consider an <article> or <section> to wrap it instead. |
| 00:23 | <JonathanNeal> | http://pastie.org/585342 |
| 00:23 | <JonathanNeal> | The first one labeled "HTML4" is actually what we've been using for some time, I never liked the spans being there alongside the divs. |
| 00:24 | <TabAtkins> | Yes, except you can probably drop most of the classes. |
| 00:25 | <TabAtkins> | Keep the .portlet class, but the others can be targetted just fine with child selectors. ^_^ |
| 00:25 | <TabAtkins> | ".portlet > header", ".portlet > header > h1", etc. |
| 00:26 | <webben_> | JonathanNeal: I suspect that may be a menu not a nav: http://dev.w3.org/html5/spec/Overview.html#the-nav-element vs. http://dev.w3.org/html5/spec/Overview.html#menus ? |
| 00:26 | <JonathanNeal> | Well, we walk the fine corporate line of trying to move towards html5 but keep ie6 compatibility. |
| 00:26 | <webben_> | JonathanNeal: depending on what the contents are. |
| 00:26 | <JonathanNeal> | Right now, most of that can be achieved through CSS, and JS using document.createElement function. |
| 00:26 | <JonathanNeal> | Child selectors aren't available in ie6, unfortunately. |
| 00:27 | <TabAtkins> | Bah, right. I am lucky enough to have been allowed to basically throw IE6 over the bridge at my job. |
| 00:27 | <webben_> | JonathanNeal: How are you selling migration to 5 to the biz? |
| 00:27 | <JonathanNeal> | webben_ by the grace of God. |
| 00:27 | <webben_> | heh |
| 00:27 | <JonathanNeal> | I have no idea how, but they like it. |
| 00:28 | <TabAtkins> | It looks fancy! |
| 00:28 | <JonathanNeal> | They're letting me style our new website using CSS3 almost exclusively, as long as the unCSS3'd ie browsers look good and consistant. |
| 00:28 | <JonathanNeal> | They don't mind letting the new browsers take on the added improvements. |
| 00:28 | <TabAtkins> | Woo, lucky you. |
| 00:29 | <webben_> | JonathanNeal: e.g. rounded corners with CSS3 and square corners for the old? |
| 00:29 | <JonathanNeal> | Exactly. |
| 00:29 | <TabAtkins> | I'm happy I got them to accept the rounded corners issue. That's about it. |
| 00:29 | <webben_> | yeah, rounded corners is about as far as we've got where I work. |
| 00:29 | <JonathanNeal> | Well, ie6+ supports gradients, so IE actually gets the gradients too. |
| 00:29 | <JonathanNeal> | Firefox is the tricky one, I have to calculate the colors for the gradients by using the inset shadow property. |
| 00:30 | <TabAtkins> | Hmm? How are you getting gradienets in ie6? |
| 00:30 | <webben_> | http://msdn.microsoft.com/en-us/library/ms532997(VS.85).aspx ? |
| 00:30 | <JonathanNeal> | We have browser selectors out of the box and ie supports gradients using the filter property. |
| 00:30 | <TabAtkins> | Ah, k. I stay away from the filter properties. |
| 00:31 | <JonathanNeal> | Me too, but the end effect let's me get away with a lot without introducing images to the design where they weren't necessary. |
| 00:32 | <TabAtkins> | So far I've dealt with it by using a gradient-generating image script in PHP. |
| 00:32 | <JonathanNeal> | The really, really great thing about this is, if I can convince them to move forward with some of the html5 adoptions in our portal, then our clients will take those html5 adoptions with them too. |
| 00:34 | <JonathanNeal> | Which is why using proper standards is so absolutely important to me. |
| 00:34 | <TabAtkins> | Cool. ^_^ |
| 00:35 | <webben_> | JonathanNeal: "inset shadow property": like this? http://markusstange.wordpress.com/ ? |
| 00:36 | <JonathanNeal> | It seems pretty straightforward, so http://pastie.org/585351 |
| 00:37 | <JonathanNeal> | I think I'm in good graces because I wrote this ( http://tiny.cc/JTlyy and http://tiny.cc/KyH4B ) a day after someone asked if we could support mobile |
| 00:37 | <webben_> | JonathanNeal: class="portlet seamless" would make more sense to me. ... it's still a portlet, even if it's borderless |
| 00:38 | <webben_> | or class="portlet portlet-seamless" if .portlet.seamless is going to cause a world of ie6-inflected pain. |
| 00:38 | <JonathanNeal> | ie6 has limited support of css chaining but I'm aware of how most of it needs to work. |
| 00:38 | <JonathanNeal> | yea, adding the portlet class to them both makes sense, webben_ |
| 00:39 | <webben_> | if it is seamless, tho, why do you need a div inside the seamless section? |
| 00:39 | <TabAtkins> | Ooh, shiny: http://tests.themasta.com/blogstuff/boxshadowselect.html |
| 00:39 | <webben_> | TabAtkins: Is that shiny for Fx? |
| 00:40 | <TabAtkins> | Yes. |
| 00:40 | <TabAtkins> | It's all -moz-box-shadow |
| 00:40 | <webben_> | very nice |
| 00:40 | <JonathanNeal> | Our shiny is shiny in ie6+, firefox, and safari |
| 00:40 | <JonathanNeal> | which includes any other trident / gecko / webkit browsers, obviously. |
| 00:40 | <TabAtkins> | Sure, just put -webkit-box-shadow, and some IE filters on it. |
| 00:40 | <TabAtkins> | Definitely reproducible. |
| 00:41 | <TabAtkins> | Note: I didn't make that. It's from the blog that webben_ linked to. |
| 00:41 | <webben_> | I guess one could use SVG data URIs for extra-http-request-less gradients in opera |
| 00:42 | <TabAtkins> | Man, that's *two* technologies I don't know how to use. |
| 00:43 | <JonathanNeal> | We used -moz-box-shadow as the secondary solution to -webkit-gradient and Microsoft.Gradient |
| 00:43 | <JonathanNeal> | For example @ http://pastie.org/585353 |
| 00:46 | <TabAtkins> | Ah, cool, php can help write data uris for me. |
| 00:47 | <JonathanNeal> | So now I have http://pastie.org/585355 |
| 00:47 | <TabAtkins> | I approve. |
| 00:48 | <webben_> | Tick! ;) |
| 00:49 | <webben_> | JonathanNeal: altho note my note about menu |
| 00:49 | <JonathanNeal> | Okay, the next big beast to tackle of the portal's page container. |
| 00:50 | <JonathanNeal> | I thought menu was gone in HTML5. |
| 00:50 | <webben_> | still here afaik |
| 00:50 | <JonathanNeal> | So, when would it be proper to use nav versus menu and vice versa? |
| 00:51 | <webben_> | nav = site links ; menu = commands |
| 00:52 | <webben_> | http://dev.w3.org/html5/spec/semantics.html#the-nav-element vs http://dev.w3.org/html5/spec/interactive-elements.html#menus |
| 00:52 | <webben_> | "control panel" sounds to me like commands/toolbar |
| 00:52 | <webben_> | so menu |
| 00:53 | <TabAtkins> | Hmm, I didn't realize that <menu> was meant to be used for in-page markup. Cool. |
| 00:53 | <webben_> | other lists of links ... ul or ol I guess. |
| 00:53 | <TabAtkins> | btw: http://www.whatwg.org/specs/web-apps/current-work/multipage/#menus for the multipage version |
| 00:54 | <JonathanNeal> | I see what you mean. |
| 00:54 | <TabAtkins> | I need to really read and digest that section soon. |
| 00:55 | <TabAtkins> | For now: grocery store, to prepare for tomorrow's grilling party. |
| 00:56 | <JonathanNeal> | Why seamless versus borderless-container |
| 00:56 | <JonathanNeal> | because of the meaning? |
| 00:58 | <webben_> | i guess various reasons |
| 00:58 | <webben_> | shorter, more abstract |
| 00:59 | <webben_> | "container" seems redundant |
| 00:59 | <webben_> | it's a section so... it's going to be a container |
| 01:00 | <webben_> | JonathanNeal: also http://dev.w3.org/html5/spec/embedded-content-0.html#attr-iframe-seamless |
| 01:04 | <JonathanNeal> | I see. |
| 01:05 | <JonathanNeal> | Great, I'm writing all of this up. |
| 01:05 | <JonathanNeal> | Thanks webben_ |
| 01:06 | <webben_> | JonathanNeal: yw :) |
| 01:09 | <JonathanNeal> | All right, here's the tougher one. |
| 01:10 | <JonathanNeal> | Any number of portlets can exist in here @ http://pastie.org/585373 |
| 01:12 | <JonathanNeal> | I'm curious if a section would replace wrapper, a header would replace banner, an h2 would replace current-community and be moved outside of the h1, both the h1 and the h2 would be wrapped with an hgroup, and a footer would replace footer. |
| 01:16 | webben_ | is too sleepy to think, but I'm sure one of the other #whatwg will answer eventually (if not just mail the help@ mailing list: http://www.whatwg.org/mailing-list#help ) |
| 01:20 | <JonathanNeal> | Should a <nav> ever go inside a <nav> for child pages? |
| 01:39 | <JonathanNeal> | I'm getting all crazy with this one. |
| 01:39 | <JonathanNeal> | You guys will have to tell me what you think. It's perhaps incorrect. |
| 01:41 | <JonathanNeal> | Here's my latest working copy @ http://pastie.org/585387 |
| 02:19 | <JonathanNeal> | Anyone around? |
| 02:26 | <jcranmer> | no |
| 02:29 | <JonathanNeal> | I figured as much :-) |
| 05:34 | <JonathanNeal> | hi all |
| 09:37 | <annevk42> | aboodman2, aboodman_mac_, answered your question |
| 09:37 | <aboodman_mac> | annevk42: thanks for replying |
| 09:37 | <aboodman_mac> | looking now |
| 09:41 | <aboodman_mac> | annevk42: ok, thanks. I am working on this area of webkit now, and want to be sure I don't break anything. |
| 09:47 | Philip` | wonders how much cardboard he needs to stick underneath his laptop's system board to bend it enough that it will successfully boot |
| 09:50 | <hsivonen> | hmm. http://www.fsf.org/resources/formats/playogg tells people to install VLC which expands the installed base of encumbered codecs, too |
| 09:50 | <hsivonen> | they could tell people to install Firefox, which wouldn't expand the installed base for encumbered-format players |
| 11:29 | <annevk42> | note to self: make a simple python script instead to generate encoding tests rather than cp 001.htm 00x.htm all the time |
| 11:49 | <krijnh> | http://code.google.com/p/sessionstorage/ |
| 12:18 | <Philip`> | Hmm, ten thicknesses of card under the PCMCIA slot seems to be sufficient |
| 12:28 | <Dashiva> | You probably even enjoy making it work |
| 12:34 | <Philip`> | I only had to take out 30 screws to reach it |
| 12:34 | <Philip`> | and I put 29 screws back in, which I consider a success |
| 12:36 | <Hixie> | wow, i've got less than 3 days backlog on my main folder of input |
| 12:37 | <Dashiva> | If you run out, you might have to start answering questions when asked. |
| 12:37 | <Hixie> | lots of XXX markers to worry about still |
| 12:37 | <Hixie> | and bugs |
| 12:38 | <Hixie> | (i don't like replying in realtime, i much prefer letting threads settle, since that way i can just look over the whole thread and use the best ideas.) |
| 12:38 | <Hixie> | anywya it's way past my bed time |
| 12:38 | <Hixie> | nn |
| 15:08 | <hsivonen> | wow. the StuffIt Expander download has become like downloading Real Player |
| 15:08 | <hsivonen> | and worse |
| 15:08 | <hsivonen> | very tacky |
| 15:10 | hsivonen | archives a old PPC 2005 version of StuffIt Expander and refrains from downloading the new version |
| 15:15 | gsnedders | has an old 68k version somewhere |
| 15:33 | <hsivonen> | I got tired of .zip files getting assigned to StuffIt Expander, which launches Rosetta |
| 15:57 | <Lachy> | hsivonen, couldn't you just change the default application for .zip files, without having to remove StuffIt Expander? |
| 15:58 | <Lachy> | Select any zip file, change the default app and click Change All... |
| 15:58 | <hsivonen> | Lachy: apparently not |
| 15:59 | <Lachy> | (I know it's made slightly complicated by the stupidity of Macs sometimes relying on invisible metadata for choosing default apps) |
| 15:59 | <hsivonen> | Lachy: I've gone through the usual steps in both Finder and Firefox |
| 16:00 | <hsivonen> | Lachy: but there's something somewhere that makes Firefox write the HFS creator code for StuffIt expander onto zip files |
| 16:00 | <hsivonen> | or so I suspect |
| 16:01 | <hsivonen> | could be some very, very legacy setting migrated a dozen times somewhere in the bowels of Carbon in the parts that came from Internet Config |
| 16:01 | <hsivonen> | or something like that |
| 16:01 | <Lachy> | yeah, that's what it's called. The way the creator code is used has to be one of the most annoying design flaws I dislike about macs |
| 20:17 | hsivonen | wonders what the messages sent, replies gotten stats divided by time on the list would look like now |