via dribbble.com

via dribbble.com ...»See Ya

Amanda Lear Photo-graphic (Topless Disco)

Amanda Lear

VIDEO

Photo-graphic

amanda_lear_photo.mp4 Watch on Posterous

(No YT! Steamy Disco)

Amanda Lear Photo-graphic amanda_lear_photo.mp4 Watch on Posterous (No YT! Steamy Disco) ...»See Ya

via pornsterous.posterous.com

via pornsterous.posterous.com ...»See Ya

Some time ago I was asked in an interview whether I preferred HTML or CSS. It was a bit like being asked if I prefer pens or pencils. I made an instinctive choice. I chose HTML. It’s the typography of data; the inflection in our voices; the grid of meaning upon which presentation can flourish. I find it beautiful when done well, and that’s why watching HTML 5 unfold with new and refined elements is fascinating to me.

Also available in:

1. Беларуская мова (Belarusian)

This is a brief introduction to the new structural elements in the HTML 5 Working Draft, and how to use semantic class names in HTML 4.01 or XHTML 1.0 markup that correspond to the names of those structural elements. By doing so, you’ll get a head start in understanding how to use the new elements and also go some way towards using plain old semantic HTML if you’re not already.

Sections:

1. Introduction
2. header
3. nav
4. section
5. article
6. figure
7. dialog
8. aside
9. footer
10. Multiple Class Names
11. End Notes
12. References

i. Introduction

HTML 5 will be the first major change to our lingua franca since XHTML 1.0 in 2000; some might say HTML 4.01 in 1999. You’ve probably already seen the HTML 5 Working Draft of the 22^nd January this year. The W3C HTML Working Group and WHATWG have been grafting away on our behalf, and trying to satisfy everyone in an open process. Not an easy task. Sometimes, amongst the concerns and the questions it’s easy to forget that, so I’m taking a brief second in between sips of coffee to acknowledge the hard work. Thanks, folks.

Let’s get to know these new structural elements a little better. If you’d rather go straight to the horse’s mouth before continuing I recommend a comfy chair, and a perusal of HTML 5 differences from HTML 4, edited by Anne van Kesteren. W3C documents seem to be getting easier to read, and this is no exception. If you’re sticking with me for a while, let’s get to it:

ii. The <header> Element

The header element is for page or section headings. Not to be confused with a traditional masthead, which often holds just a logo mark, it should also contain one of <h1>–<h6> in hierarchical rank. It could also contain meta information for that page or section of a page like “last updated”, a version number, or blog entry information like published date, author, etc.

A simple example for a page using a semantic class name that corresponds to the HTML 5 header might be:

<div class="header"> <h1>Page Title</h1> </div>

You could include the logo mark and other meta information within the layer. The next example for blog articles includes author and published date information (as well as an example of referencing the section and article elements with semantic class names):

<div class="section">  <div class="article">  <div class="header"> <h1>Page Title</h1> <p>By Author on [date]</p> </div>  [Article content…]  </div>  <div class="article"> [Repeat as required…] </div>  </div>

iii. The <nav> Element

The nav element should contain a set of navigation links, either to other pages, or fragment identifiers in the current page. Referencing it with semantic class names is simple:

<div class="nav"> <ul> <li>Menu item 1</li> <li>Menu item 2</li> [Repeat as required…] </ul> </div>

iv. The <section> Element

A section element defines a section of a page or a distinct piece of content. It would ordinarily have a header and possibly a footer. This is how we could represent it using semantic class names:

<div class="section">  <div class="header"> <h2>Section Title</h2> </div>  [Section content…]  </div>

I’ve also been using <div class="section"> to define a group of layers that are related (like news and events). In such an example, those sub-sections would be nested, each with their own <h1>–<h6> in rank order to maintain heirarchy. For example:

<div class="section">  <div class="header"> <h2>News and Events</h2> <p>The latest announcements and upcoming conferences</p> </div>  <div class="section"> <h3>News</h3> [Section content…] </div>  <div class="section"> <h3>Events</h3> [Section content…] </div>  </div>

Each section could also have a layer with a semantic class name of header if the content made it necessary.

v. The <article> Element

This is how the HTML 5 working draft explains article element:

“The article element represents a section of a page that consists of a composition that forms an independent part of a document, page, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content.”

Multiple article elements can also be nested. We looked at the example of a series of blog posts using semantic class names in the header section. This is an example using semantic class names in a unique article page with header and footer:

<body>  <div class="article">  <div class="header"> <h1>Title</h1> </div>  [Article content…]  <div class="footer"> [Footer content…] </div>  </div>  </body>

vi. The <figure> Element

The figure element contains embedded media like <img> and the new elements of <audio> and <video>. It also contains an optional <legend> element performing the function of a caption. Our semantic class name version could be like so:

<div class="figure">  <img src="*" alt="*">  <p class="legend">[…]</p>  </div>

vii. The <dialog> Element

The dialog element replaces a <dl> to contain converations like transcripts. Using it as a semantic class name is straightforward:

<dl class="dialog">  <dt>Speaker 1</dt> <dd>So I said to him, I said…</dd>  <dt>Speaker 2</dt> <dd>You never. You did? Oh my…</dd>  </dl>

viii. The <aside> Element

To quote the working draft:

“The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.”

I’ve been using “aside” as a class name for sidebars with mixed content, but my reading of the draft also indicates it may also be appropriate for pull-quotes and anything partially related to the main content, but not of it. See the sections relating to the ins and img elements for examples. It woud seem appropriate to use it with a semantic class name like this:

<body>  <div class="section"> [Section content…] </div>  [Repeat sections as required for main content…]  <div class="aside"> [Aside content…] </div>  <div class="footer"> [Footer content…] </div>  </body>

ix. The <footer> Element

This is what the working draft has to say:

“The footer element represents the footer for the section it applies to. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.”

In the changed elements section of HTML 5 differences from HTML 4, it also explains that, “The address element is now scoped by the new concept of sectioning.” This is important, because now, if you have multiple sections in a page, each can have both a header and a footer with a corresponding address in the footer for each if you deem it necessary. However, that would seem to be a rare use-case. Let’s stick with a more common one: A single footer for each page with a single address element; here’s how it might be done using a semantic class name:

<div class="footer">  <address>[…]</address>  [Other footer content …]  </div>

x. Multiple Class Names

Let’s recap a little: By using semantic class names, we give the information a semantic boost, and each chunk of related data is self-contained. However, it may have become obvious to some designers reading this that a side-effect of using this method, and eventually using HTML 5 elements themselves, will be lots of different content within containers of the same name. <div class="section">, for example. You might want to present different content very differently in the browser. Multiple class names will enable you to do that. class="section" can becomes class="section news", or class="section services". The "section" class name allows us to standardise some of the presentation; say, typography for example. The "news" class name will allow us to present it differently as a section variant.

So now we have the best of both worlds; the critical structural elements are included by default with more semantic class names providing hooks to apply our creativity to.

xi. End Notes

Bear in mind HTML 5 is a working draft so there will probably be some changes before it becomes a recommendation. It would seem unlikely that any of the new structural elements will be removed, but a sharp eye on the draft updates might be a good move.

Any errors in this article are my own. If you some across any, please let me know and I’ll make corrections.

xii. References & Further Reading

1. References:
   1. HTML 5 Working Draft
   2. HTML 5 differences from HTML 4 and specifically, the new structural elements section
   3. Semantic class names
   4. Plain old semantic HTML (POSH)
   5. <header>
   6. <nav>
   7. <section>
   8. <article>
   9. <figure>
   10. <dialog>
   11. <aside>
   12. <footer>
2. Further Reading:
   1. A Preview of HTML 5 on A List Apart by Lachlan Hunt
   2. HTML 5 Latest Working Draft at WHATWG
   3. WHATWG on Twitter
   4. W3C HTML Working Group

via jontangerine.com

S ome time ago I was asked in an interview whether I preferred HTML or CSS . It was a bit like being asked if I prefer pens or pencils. I made an instinctive choice. I chose HTML. It’s the typography of data; the inflection in our voices; the grid of meaning upon which presentation can flourish. I f ...»See Ya

Eric Meyer | The Geek Talk

A father, a husband, a speaker, a conference organizer, an author, and a reader.  A proud and happy resident of Cleveland, Ohio and a traveler of the world.  A man of many words in print but fewer in person, an aficionado of all kinds of music, and a semi-competent coder.  A veteran of the web going on 17 years now, a booster of markup and style, a creator of movements, and a defender of community and collaboration.  A lover, not a fighter.

What about CSS3?

It’s here, it’s coming, it’s stalled, it’s dead… depending on which of the various CSS modules and browsers you choose to scrutinize. For example, some of the advanced CSS selectors are supported by just about every browser in use today, and they’re part of CSS3.  Then there are things like CSS Transforms and Animations, which are well supported by a few browsers.  And then you have CSS Math, which is potentially interesting but not implemented in browsers (as it has not been for most of the past decade).

So it’s not a question that’s simple to answer.  There’s a different answer for every person.

Why reset styles?

Because browsers don’t all have the same defaults.  A reset levels the playing field.  However, as I’ve said many times, it’s most effective if you take a reset style sheet and alter to suit your own tastes, thus creating a personalized “reboot” style sheet.  Raw reset style sheets are a starting point.

What does your typical day look like?

Some administrative work for An Event Apart, a fair amount of feed reading, and a lot of e-mail.  It’s also pretty common to do content and other creative work for An Event Apart, writing talks and creating slides, and then there’s always blog, article, and book writing.

What do you do in your free time?

I work on some personal programming projects.  I meet weekly online with a group of Halo 3: ODST gamers and irregularly in real life with a group of Rock Band gamers.  I also try to make it to local web-related group meetings.  Of course, I travel a fair amount for work so these things don’t happen as often as I’d like.

Current favorite apps?

BBEdit, Transmit, Camino, Twitterrific, Eudora, and Osmos. Runners-up:  Thunderbird, NetNewsWire 2, and Darwinia.

What OS do you prefer?

Mac OS X.  I’m still on Leopard mostly because I don’t have the time to devote to an OS upgrade, and also because as some of my favorite applications get older, I get more and more wary that an OS upgrade will break them.

Small picture of your workplace?

The office is halfway through being reconfigured, so it’s a total mess right now.  I’ll just say it’s a smallish room in our converted attic with two windows offering a lovely view of the trees behind the house and a patch of sky where I can watch summer thunderstorms approach.

Favorite: Color, Font, Language, JS Framework?

Respectively:  navy blue, New Century Schoolbook, HTML, don’t have one.

Name something that has inspired you recently?

The documentary film “Man On Wire”.  What a fantastic work of art.

What do you prefer (and why): Freelance work or full time employment?

I prefer working for myself.  It has a lot of advantages, not least of which is that I can really never be fired.  It also lets me be closer with my family.  The downside is that as a U.S. citizen, I have to pay for my own health care and health insurance, and that’s not exactly inexpensive.  If I didn’t have access to a decent group plan through a local small-business coalition, it would be even more expensive.

What are your personal projects and goals for 2010?

To finish up my current book project for Wiley and start on the fourth edition of “CSS: The Definitive Guide”, and to keep focused on making An Event Apart the best event it can be and the premiere conference choice for web designers and developers.

More personally, I have a web service idea that a friend and I are going to try to build– it’s one of those “we wish this thing existed so we’ll have to make it happen ourselves” situations.  I’m also hoping to finish a much better version of HYDEsim incorporating work I did in conjunction with Nuclear Darkness and some additions of my own.  I’m most of the way there but my weakness at JavaScript programming has proven quite a hurdle.  Once that’s done, I have some old WordPress plugins that could really stand to be overhauled and updated, and sometimes I think I should revisit S5 to take advantage of CSS animations and transforms.

I also hope to find time this year to become more conversant in American Sign Language and maybe do some carpentry.

via thegeektalk.com

A father, a husband, a speaker, a conference organizer, an author, and a reader.  A proud and happy resident of Cleveland, Ohio and a traveler of the world.  A man of many words in print but fewer in person, an aficionado of all kinds of music, and a semi-competent coder.  A veteran of the web going ...»See Ya