Installation

Initial Drupal Setup

For both Drupal and Joomla, I used CPANEL to install the CMS. Drupal was a quick installation. Once you have it installed, you can see a nice, clean layout with 4 steps to getting started. Each step is easy to understand and includes links to documentation. Joomla was a little different. 

First of all, I forgot that there was Joomla and Joomla 1.5. I installed Joomla and told it to enter test data. The initial page was inundated with data (something I did not expect). I regretted starting out with initial test data. I then saw I could have installed Joomla 1.5, so I installed that as well; however, this time, I chose not to give it test data. Guess what, there was no data or content at all. In fact, there wasn’t even a log-in or admin section, it was that sparse. There was nothing I could do but start over with test data. 

Initial Joomla 1.5 Setup (with data)

Joomla 1.5 installation with test data looks almost identical to Joomla 1.0; you’re presented with 3 menu boxes on the left, a list of latest news, an online poll, and a few articles from the Joomla developers, etc. The first thing I wanted to do was get logged in and start administrating (for lack of a better term) the page. 

Score 5 points to Drupal for an easy installation and 10 points for a welcoming screen. 

Score 5 points to Joomla for easy installation and -10 points for the no-test data install and 0 points for cluttered test data install 

Getting Started

I wanted to see how quickly I could set up a new theme, modules, and users. In Joomla it wasn’t clear where to go after logging in. I logged out and back in to see if anything changed, and I noticed there was a User Menu on the left. I clicked the first link, User Details, and checked it out. 

I got excited when I saw a back-end and front-end language, thinking it had something to do with choosing between PHP and Python or something, until I realized it was what language the documentation was written in, and the only option was UK English. I guess I’ll have to deal with colours, torches & bobbies. 

On a better note, I had the option to include a WYSIWYG editor (TinyMCE) or not. Drupal does not come with a WYSIWYG out of the box like Joomla does, but you can install a variety of WYSIWYGs if you want (I’ll try that later). 

Drupal was completely intuitive in getting to the admin panel. On the first installation, you’re welcomed with a list of steps to get started, and you get the login up front and visible. The best part is there is no other noise from random articles, etc.  

Drupal scores -5 points for no WYSIWYG editor out of the box and -5 points considering they are already on version 6 with no editor 

Score 10 points to Joomla for WYSIWYG editor right out of the box 

Administration Panel

Drupal had a well-organized administration panel, but there are so many options, it could overwhelm a new admin. The panel has 2 views (by task & by module), and there are 5 sections of links to administer with 4 to 12 specific links each. I’m not saying that it’s bad, but you immediately realize that you may have some work to do, especially when you see the word, “taxonomy” for the first time. Anyone starting with drupal will do themselves a service if they at least skim the various topics related to administering a site before clicking and entering. I recommend you browse the Drupal Cookbook. 

Once I did the initial setup of Joomla, I had to dig around to get to the administration section. It turns out that to get there, you have to click on the “Administrator” link at the bottom of the resources box. I had to log in one more time. Once I got to the administration section, I felt like I was finally getting somewhere. Finally, I was given some power. I could add an article, manage articles, manage the front page (clean it up would be the first order of business), manage sections, categories, media, the menu, the language, users, and configure the global settings. 

Drupal gets 5 points for immediately presenting the admin panel and organization.  

Joomla gets -5 points for having to dig and log in 2 separate times to get to the admin. 

Bonus Round

5 bonus points go to Joomla for the SEO Settings box at the global configuration section, especially the Search Engine Friendly URLs option. Not only that, but you can easily set up ftp settings and set up a mailer. Drupal does have a search engine friendly URL, but you could easily miss that. 

Final Score After Round 1:

Drupal: 10  

Joomla: 5 

Drupal is currently in the lead for initial set up and admin screen, but Joomla 1.5 gets kudos for their out of box wysiwyg and SEO settings.

HTML5 has a whole host of cool new elements and attributes to be on the lookout for, but the thing that gets me most jazzed is I no longer have to create a boatload of <div> tags with id attributes. That’s because they took into account web designers and the way we code & structure layouts when redesigning HTML5. Here is how I plan to start using the new tags for layout design:

The Old School Markup

The old-school way to code a layout is to determine all “real estate” sections to your page (call them windows, panes, divisions, etc.), then create 1 <div> with a unique id attribute for each section like so:  

<div id="banner">
   <h1>Website Logo or Title Goes Here</h1>
   <h2>Tagline goes here. Note: this could be in a p tag with a tagline id attribute</h2>
</div>

<div id="navcontainer">
<ul id="navlist">
     <li><a href="index.html">home</a></li>
     <li><a href="about.html">about us</a></li>
     <li><a href="gallery.html">images</a></li>
     <li><a href="contact.html">contact us</a></li>
     <li><a href="site.html">site map</a></li>
</ul>
</div>

<div id="page">

   <div id="content">
      <h2>Content Header Goes Here</h2>
      <p>Paragraph goes here.</p>
      <!-- Continue on with more content for the "content" div -->
   </div><!-- close "content" div -->

   <div id="sidebar">
      <h2>Side Bar Div</h2>
      <p>Add side bar content here.</p>
   </div> <!-- close "sidebar" div -->

</div> <!-- close "page" div -->

</div> <!-- close "container" div -->

<div id="footer">
   <p>Designed by <a href="http://hundredvisions.com">Hundred Visions</a> &copy; 2010</p>
</div> <!-- close "footer" div -->

Note the following:  

1. According to the W3C, it is acceptable to use the <div> tags with identifying id attributes as a way to select the specific tag with CSS to be displayed in the way we deem fit
2. Some people surround everything with a “container” or “wrapper” <div> to allow us to center all of our content and possibly add some interesting background graphics to the body element, but I’m beginning to move away from that technique because it adds an extra meaningless <div>, and you can still apply width and centering technique to each main div (“banner”, “navcontainer”, “content”, & “footer”)
3. Creating a “page” div that has two direct child elements: <div id=”content”> and <div id=”sidebar”> makes it much easier to display as two columns, plus, you can add a background color to the “page” that matches the “sidebar” div and make it look like the sidebar’s background color extends as far as the “content” div (provided you have no padding on the “page” and you do set the “content” background color)
   • However, the extra div is mostly meaningless, and combined with the “container”/”wrapper” div, you’re mostly just adding markup in order to make more stylistic changes

The New HTML5 Way to Do it

Note: I should give credit to A List Apart’s article, titled A Preview of HTML5 for giving me inspiration (in fact most of what I’ve come up with came from that site). The remaining ideas came from trying to “translate” my HTML from above and the W3C’s specs on section tags in HTML5. For each new tag, I added a content with a definition of that element taken straight from the W3C spec. 

<header>
 <!-- The header element represents a group of introductory or navigational aids. -->
 <h1>CSS Samples</h1>
 <h2>Different Ways to Style a Layout</h2>
</header>

<nav>
 <!-- major navigation blocks are appropriate for the nav element -->
 <ul id="navlist">
  <li><a href="index.html">home</a></li>
  <li><a href="about.html">about us</a></li>
  <li><a href="gallery.html">images</a></li>
  <li><a href="contact.html">contact us</a></li>
  <li><a href="site.html">site map</a></li>
 </ul>
</nav>

<section> <!-- a section represents a generic section of a document or application...a thematic grouping of content,
               typically with a heading. -->

  <article> <!-- an article represents a self-contained composition in a document, page, application, or site and that is,
                 in principle, independently distributable or reusable -->
     <h1>Content Header</h1>
     <p>Content content goes here.</p>  
  </article> 
  <aside> <!-- The aside element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups
               of nav elements, and for other content that is considered separate from the main content of the page -->
     <h1>Here is my aside Header</h1>
     <p>Here is my paragraph of text</p>
 </aside>
</section>

<footer>
 <!-- A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. -->
 <p>Designed by <a href="http://hundredvisions.com">Hundred Visions</a> &copy; 2010</p>
</footer>

Note: This isn’t the only way to code a page in HTML5. In my opinion, the difficulty mainly lies in the difference between the usage of a section and an article; I chose to go the route that Standardista recommended. In the case of a blog, each post should probably be its own <article>, and they could be sectioned into 2 parts (the post and the comments section) using the <section> element (for obvious reasons). 

Also Note: this post is about using HTML5 for semantically marking up a page for layouts. The elements I introduce here (header, nav, section, article, aside, & footer) have not been officially recommended by the W3C. They are currently in “last call” status, which means they are probably not going to change between now and recommendation stage.

As a teacher of web design, I feel that teaching the web design process is essential, but it’s often times difficult to do, so whenever someone opens up their own process of designing a production site (especially one as nice as the site for the Da Vinci Days), I think I should link to that site. So, without further ado, you must visit The da Vinci Days Web Design Process (from the ProWorks Blog)

The next challenge for me as a designer is building the framework of the actual website so that it looks exactly like my design. The design also needs to hold up to real data getting plugged into it, so I make sure everything’s flexible. In the end we come up with an entire visual system for da Vinci Days that encompasses any type of page Brenda wants to make!

I’m in the heart of open source country: Corvallis, Oregon, preparing to teach a workshop on website layout design for the 2010 SuperQuest Summer Institute at Oregon State University. I’ll be covering a variety of CSS techniques to generate cross-browser layouts (1, 2, & 3-column). We’ll also cover typography, use of color, background graphic positioning, and other fun techniques.

So we can get right to the meat of the matter, I decided to post some “starter” code.

XHTML 1.0 Strict Template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

</style>
<title></title>

</head>
<body>

</body>
</html>

HTML-Ipsum

Since our concern will be primarily with coding layouts, I want to jump right to some sample code to drop into our various columns, headers, & footers. A great site to drop sample code is the HTML-Ipsum site. Look at the page, decide how much or what type of sample code you want, click the title box above the code, and you’ll get the sample code copied to your clipboard, ét voilá!

Stay tuned for some more yummy CSS goodness forthwith…!

Here is my PowerPoint that I planned to present during the workshop: PHP Form Validation PowerPoint 

Disclaimer 

I must make 2 disclaimers. One, you should type F5 to view this as a PowerPoint, or some slides will not make sense (I overlapped some code and animated the presentation).

Two, the Powerpoint is just an introduction to form validation. The content I present is only at a hobbyist level at best, this is not meant to cover all aspects of security. Trying to create your own email processor would most likely lead you open to all kinds of attacks. If you really want a decent PHP form processor, I highly recommend you look into Tectite Forms.