13 Nov 2008

CSS and HTML Coding Today

Okay, it’s the last (session-filled) day of PubCon and I’ve been tasked to cover a session on CSS and coding? Who hates me? Seriously. One of you did this. I know it.

It seems that Ted Ulle is playing double duties as speaker and moderator. Marc Juneau, Bryan Gmyrek and Lachlan Hunt will be helping him out with the speaking duties.

Laclan Hunt is up first and I’m coughing like a crazy person. Darn air conditioning.

New Structure and Semantics of HTML 5

They’re adding more structure and semantics to the document. He shows what a typical blog post looks like. Header, footer, sidebar, text, etc. Normally you would use div elements to style your document. In HTML 5, they give you elements for specific purposes.  There are self-contained Article, Side, Footer and Header elements to use.  The advantage of that is search engines can take advantage of the semantics. A screen reader can more easily skip or jump to the navigation. They can see how many articles there are.

They also added a time element that gives you a machine-readable way of marking up dates.  The advantage of this is so that you can easily export calendar information.

They added a figure element to make it easy for screen readers to recognize captions and associated images.

Meter element: Lets the browser decided how to draw a widget. Or something? I’m so lost. I’m sorry. 🙁

Section element: Helps you break up a page without worrying about h1, h2, and h3. This way you can just use h1s for all of them and let the nested system take care of the hierarchy.

Element Implemenations: No native supprot but can be styled with CSS in Opera, FF3, Safari, IE6 and IE7.

New Multimedia Elements

Video: Traditionally you’d use  a Flash-based plaer. They wanted to add native video element support to browsers so that video becomes a first class citizen. They added a Video element which gives APIs to embed the video and gives you native controls. The JavaScript APIs let you make customizable interfaces using HTML features. One of the problems with adding video is what video player to use. They can’t get browsers to agree on a single format.

Canvas Element: Created by the Webkit team for the Apple dashboard. Allows you to dynamically draw graphics and text. Grapics-oriented DOM APIs. It’s different from SVG which gives you vector graphics. Canvas is more bitmap so you can draw lines and shapes.

Developer Tools

One of the most important things for developers is to have tools.

Validator.nu: HTML 5 Conformace Checker. Exceeds the capabilities of traditional DTD-based validation.

Parsing HTML 5: html5lib Parsing library for HTML. Off the shelf parser reduces reliance on RegExp hacks.

Ted Ulle is up.  He thinks people care more about money than code purity.

He’s going to give us the number one cutting-edge approach that no one does.  If you listen to him you will speed up your development time, reduce maintenance time, send clear signals to the search engines and have more time to work on core business tasks.

This major secret: RTFM (Read the Freakin Manual)

You need a basic understanding of what you’re doing. There’s so much that goes into creating a Web site that people trying to rush through it and end up shooting themselves in the foot.

HTML: The M stands for markup. The document is assumed to be the foundation of what you’re doing.  HTML is simply a way of marking up a document. If you know that you start looking at things differently.

Semantic Meaning vs Visual Rendering

  • HTML tags = semantic information
  • CSS rules = display information

Go to strict code, not transitional code. (I hope this makes sense to other people.  I may as well be blogging in Russian.)

The goal is to learn lean and mean HTML. That’s a trade secret.

Underused CSS

Common element deserve their own default style rules. You don’t need more than one h1 tag so you can define its style someplace and then the h1 sits there and takes that style automatically. It doesn’t need span or class elements.  Put your rules for h1, p, li, etc in the external CSS file.

Multiple class declarations with a space separator. Put together a basic kit of the rules that are going to come.  .c = center .r = right .s = size.  Allows for easier coding on the fly. It lowers the need for new classes.  Easy team coordination.

Line height. Line height is like leading in print technology. He sets line height as a ratio. That way the ratio is there and people are more at ease on your Web site. It’s more readable.

Abused CSS

Hidden Anchors: Don’t let aesthetics hurt communication. Links are the core of the Web. Keep your visitors in touch.  If you’re going to remove underscores and the default blue link color, then use redundant link cues like color, font variations, hover behavior, etc.

Span tag: Just because it validates doesn’t mean its not abusive. The span tag should be extremely rare. If you’re using it, you’ve been painted into a corner.  It should only change part of a larger containing element.

H1, H2: They have semantic meaning, they’re not for presentation.  Use an “imitation” class for the H2 look.

Bryan Gmyrek is here to confused me even further. He’s going to talk about programming. [cries]

Web Programming is Problem Solving

Bryan is making PHP jokes. I am completely lost.

First thing you need to do is just get started. Choose a platform. He uses LAMP.  It’s free. Webmasters are halfway there.  You can solve little problems. Don’t get carried away and start coding in the bathtub.

Read the right books.  You don’t have to read all the books, but its important to not get all of your information off the Web.

PHP: Ease of integration into Web pages. It’s very plug and play. It’s portable. It’s fast. It has attitude.

Perl: Not as shared hosting, plug and play as PHP. Its better to have a dedicated server. It rocks for Web apps, especially larger ones.  It’s great for sysadmin tasks and text processing/spidering.

MySQL Database: phpMyAdmin. Use apache .htpassword.

Sigh. I’m sorry to both the speakers and WBP readers if I’ve botched this session. Coding is another language to me. My apologies.

No Comments

Leave a Reply