By peterx on

http://dc2009.drupalcon.org/ has a lively theme worthy of study. How is it built? How could you build your own?

Tools of trade:

You already have Firefox. If not then you are not serious about Web development, bash the side of your head with a 4" * 4" div element.

CSSViewer is a Firefox plug in to give you a quick view of the CSS values applied to an element The boundaries of the element are highlighted and the element named. You do not see the chain of inheritance used to complete the styling of the element.

Firebug shows you all the information missing from CSSViewer but takes longer because you have to click down through the HTML.

Total Validator tells you which elements fail to conform to their definitions. The W3C validator points out lots of common errors but does not check that elements conform to their scheme definition. Use both validators. The W3C shows you places where your HTML does not do what the W3C wants you to do while Total Validator shows you the places where your page does not fit the scheme actually published by the W3C.

The HTML shows files from the following modules:
/modules/acquia/filefield
/sites/all/modules/date/date_timezone
/sites/all/modules/karousel
/modules/acquia/views
/modules/openid
and theme:
/sites/all/themes/dcdc

The city scene is a repeating image that is itself a repeating image. You could built something like that the cruddy Photoshop way with lots of layers then compress the layers but there is a better way. The Photoshop way is the best way for commercial Web development because your customers only receive the crushed version in a dinky little jpeg. They have to crawl back to you for every little change to the image and you can thoroughly sting them for mega bucks. For your own sites, where you want to actually get stuff done quickly, use Inkscape.

Inkscape lets you create graphics the same easy way you create graphics in almost everything except Photoshop. You draw bits and group them together. You can group the groups together to build bigger elements. The bigger elements are grouped together into pictures. Anything can be resized without loss of resolution. The result is saved in a completely reusable format and you can expert to any other format. you can also take existing graphics and split out elements, or groups of elements, for reuse in new graphics.

You could draw your whole page layout in Inkscape then cut it up later. Komposer is quicker but sloppy and limited. Dreamweaver does too much and you spend forever cleaning up the HTML. Inkscape takes longer to learn and does not create HTML. Both accept images as elements.

Think about matching the billboard image over the background city. You could draw all that in one sitting using Inkscape keeping the background in one group and the billboard in another group. When you are finished, you can save them as the complete image, then delete the billboard and export the background as a PNG, JPEG, or GIF, then open the original file again, delete the background and expert the billboard as a PNG, JPEG, or GIF. You have your cake, the slices, plus you can eat it and keep it.

Look at those rows of trees. One image repeated. There are nice tools in Inkscape for repeating images along lines with graduations. Everything about the city scene shouts Create me in Inkscape

The menu across the top looks like two lines of independent menues. I have not yet looked at their construction. When faced with the same requirement, I would make one the primary menu and the other the secondary menu. Some themes handle both. My favourite themes handle either but not both at the same time.

The HTML contains only a couple of errors repeated a few times and could be easily fixed. I suggest starting theme development with a theme that is tested with all the standard validators plus TV. You then have minimal work ahead to keep your additions compliant.

The Drupalcon DC theme is then split into several sub themes. The home page has a unique theme and Drupal 6 has a standard way of changing your theme for the home page. You copy page.tpl.php as page-front.tpl.php then make the changes for the home page. The attendees page and several other pages are a single column layout instead of a two column layout.

What can you find from looking through the page? Where would you start?

petermoulding.com/web_architect

Comments

peterx’s picture

peterx commented

HTML error on home page:
The default style sheet language must be specified when style attributes are used:

<a href="/user/dries" class="user-picture picture-120" style="background-image:
url(http://dc2009.drupalcon.org/sites/default/files/imagecache/120x120_crop/pictures/picture-4.jpg)">dries</a>

From: http://www.w3.org/TR/html401/present/styles.html#h-14.2.1
Authors must specify the style sheet language of style information associated with an HTML document. Authors should use the META element to set the default style sheet language for a document. For example, to set the default to CSS, authors should put the following declaration in the HEAD of their documents:

<META http-equiv="Content-Style-Type" content="text/css">

The default style sheet language may also be set with HTTP headers. The above META declaration is equivalent to the HTTP header:

Content-Style-Type: text/css

petermoulding.com/web_architect

petermoulding.com/web_architect

peterx’s picture

peterx commented

The page has block elements, divisions, within non block elements, spans:
<div class="views-field-picture"><span class="field-content"><div class="picture">

A div is a span with an added structural element, a break at the end. If you do not want the break, use span. Think of div as paragraph formatting in a word processor while span is character formatting. Forms and some other elements are block level elements with an assumed break at the end. You find endless discussions on how to remove the built in break from forms and divs because each browser does something slightly different.

Block elements also break the inheritance of text formatting. If <span class="field-content"> tried to format the contained text, <div class="picture"> should stop the formatting from working. Browsers vary in how they apply the rule. You see people trying to get around block elements by repeating formatting from the body element down to every clock element:

body, div, form
      {
      color: blue;
      }

You can test changes to HTML in Firebug. Select the HTML element, in this case the inner div or the outer span, then right click and edit the HTML. Changing the inner div to a span breaks the layout. Changing the span to a div does nothing. Try removing unneeded HTML using Firebug then go back to the modules producing the HTML to remove the unused HTML. Firebug shows the inheritance of attributes and you can see the layers that are not used.

One of the problems with Drupal is the excess of divs and spans that cannot be easily turned off even when they do nothing. You can end up with a page containing 30 percent or more of unused HTML. The solution is to look at the formatting of your most frequently accessed pages and rip out the duplication. You also get modules that wrap fields within spans and divs with long lists of classes even if there is no data to display in the field. A small change to a module template file can remove the unused HTML.

petermoulding.com/web_architect

petermoulding.com/web_architect