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.

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.

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!

This post is password protected. To view it please enter your password below:

Password:

This post is password protected. To view it please enter your password below:

Password:

This post is password protected. To view it please enter your password below:

Password:

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…!

What is Alice?

Alice (& Storytelling Alice for that matter) allows you to create and program 3D worlds. It was developed at Carnegie Mellon University under the direction/leadership of Randy Pausch (NOTE: you absolutely must watch Randy Pausch Last Lecture: Achieving Your Childhood Dreams or read The Last Lecture if you haven’t before–I dare you to watch or read it all the way through without shedding a tear).

With Alice…

• You can program animations
• You can program 3D games
• You can program simulations
• With your imagination, I’m sure you can do other things I did not think of
• And Most Importantly, while you’re programming games and animations, you’ll be learning to program the following…
  
  • variables (local & global)
  • conditional execution
  • repetition (while loops & for loops)
  • math
  • event-driven programming
  • object-oriented programming (methods, properties)
  • and you might not even realize it
    

There are currently 3 Main Versions/Flavors of Alice:

1. Alice 2.2 (or Alice 2.0) – Good for high school and college
2. Storytelling Alice - Good for middle school or high school (really, in my opinion)
3. Alice 3 (Beta) - You need Java for this, for this reason, it’s better used at the college level. Note the beta; it’s still buggy from my understanding. Highlights are that EA has entered into a partnership with Alice and have provided the Sims characters as 3D models in Alice 3.

Alice or Storytelling Alice?

Some may ask which program is the better program to use. I am no expert on the differences between the two, but from my experience, I have noted the following:

• All versions of Alice are free (yay!)
• Storytelling Alice is based on Alice
• Storytelling Alice works the same way as standard Alice
  • Anything you can do in Alice, you can do in Storytelling Alice (and vice versa)
  • Worlds created with Storytelling Alice will NOT work with regular Alice (not compatible)
• Storytelling Alice has more methods built into each object – This is very important to note as some students can get frustrated getting over the learning curve of programming objects
  • For example, the horse in Storytelling Alice has the following Methods ready to go (out of the box):
    • shake head
    • charge forward
    • run (distance)
    • rear
    • paw ground
    • walk (distance, speed)
  • In standard Alice, if you want to program a horse walking, you would have to create your own method and individually program each leg (top & bottom parts) to move, and you would have to figure out how to make it look realistic
  • Another example is the “lunch lady” can perform mind control on other characters (you’ll have to download it and try it out yoursel)
• Storytelling Alice has worlds & objects designed to encourage story-telling - this is probably due to the additional methods

• Hello World: Computer Programming for Kids and Other Beginners – one of my students showed me this book. I think this might be my new “textbook” for beginning programming. They have some good PyGame samples, and most chapters cover programming games. They even have a 3D chapter using VPython (Visual Python)
• One Day of IDLE Toying – If you’ve never worked with IDLE before, you should really start here.
• Instant Hacking – this is a very short, but jam-packed, introduction to both programming and Python.
• Young Programmers Podcast – if you would rather learn through video podcasts, this is the place for you. This also contains PyGame tutorials. Note: some indicate Jython, which works with Java (not a bad combination, since it allows you to work with Java classes), but I’m guessing you need the Java SDK for this.
• Learning to Program – this covers a large amount of Python, but I haven’t had much of a chance to explore it. A nice feature of this site is that it has two different versions: one for version 2 and one for version 3
• A Byte of Python – If you already know how to install Python and get a new file created, I recommend you jump right to chapter 4 (the Basics) or beyond.
• How to Think Like a Computer Scientist – this was the site that I initially learned Python with. It’s a bit high-end for younger learners, especially the writing, which almost reads like a college textbook

Downloads

• Download Portable Python 2.6 – the advantage with Portable Python is that you can install it and run it off a flash drive AND comes with PyGame
• Download Python 3.1.2 Windows Installer – just know that with Python version 3, print is a function print(“Hola, el Mundo!”), and there is no raw_input(), it’s just input() and it treats data as a string, so you’ll need to cast your number strings into floats or integers.