Web Design

Set Up Your Own WordPress Blog for Free!

I love open source technology and generous web hosting like 000webhost.com. Because of the free webhosting provided by 000webhost.com, you can host your own fully-featured WordPress blog, for free.

“What’s the catch,” you say?

Well, there is this one catch: you will have to conduct a manual install of WordPress, but I must say, compared to some CMS manual installs (and I’m thinking of simply installing and configuring a Drupal module), WordPress is a breeze, thanks to SiteGround.com’s tutorial, titled, WordPress Manual Installation. If you follow each step carefully, you can have your site up and running in minimal time.

The main steps to a manual install is to…

  1. Find a free host (like 000webhost.com)
  2. Download the latest version of WordPress
  3. Use File Manager to upload and extract WordPress
  4. Review Instructions from Siteground.com’s article on how to install WordPress manually
  5. Set up a Database (just use MySQL to do it)
    1. Be sure to copy down the following information:
      • Username
      • Password
      • Host
  6. Set up wp-config.php
  7. Run install.php

Before rushing to set it all up, you do owe it to yourself to follow the instructions on WordPress Security because there are some steps before it’s all installed you’ll want to take.

Hello, Corvallis!

I want to give a shout out to all my workshop participants hanging out in Corvallis with me this week. Yo!

In case you’re wondering, I’m back at OSU for the SuperQuest Summer Institute to present a workshop titled, Web Design From Soup to Nuts: Develop Your Own Word Press Site. The workshop starts on Tuesday and goes through Friday.

When planning our offerings, we decided to hit web design from a new angle. I chose to make Word Press my vehicle for teaching the many technologies used in Web Development: HTML, CSS, PHP, MySQL, & JavaScript. I chose Word Press because

  • it encorporates all major aspects of web development
  • it’s quite easy to peek behind “the curtain” of the magic of this content management system (CMS)
  • it’s also easy to swap out new themes and tweak with the designs
  • it quite frankly “rocks the casbah

Today, I presented a sampling of CS Unplugged to around 20+ teachers, many of whom were completely new to CS Unplugged. In just a little over an hour, we counted in binary, became human fax machines, and played battleship using linear, binary, and hash searching techniques.

One Giant Step for IE: One Baby Step for the Web

It looks like I’ll be calling IE Internet Exploder for years to come. The reports are coming out, and it looks like even though IE9 supports the main HTML5 and some CSS3 technologies, they left out some of the best: like transitions (animations), border-image (it’s a lot of fun, but can be tricky at first), text shadows & gradients.  

Microsoft has opted for a conservative approach to new web technologies in IE9. While the nearly complete Firefox 4 and the recently released Chrome 10 support more of the HTML5, CSS 3 and web API stack, IE9 is a huge step forward for Microsoft. IE9 offers support for the most widely used elements of HTML5 — like the new audio, video, canvas and semantic tags. Still, Microsoft has decided to pass on many of the new APIs. Cutting edge web tools like the offline web applications API, the File API, Web Workers API and the Web Notifications API won’t work in IE9. That’s bad news for web developers, but it’s also bad news for IE users since the web shows no signs of slowing down to accommodate IE.

If you want the full list of IE9 features, go to the IE9 Guide for Developers. Designing websites for Internet Explorer (all of them, even v9), is like paying alimony: the marriage was a bad idea to begin with, and we’ll be paying for it for years to come.

A few posts ago, I defined a layout that degrades gracefully is one that works on Internet Explorer, now I classify Internet Explorer 9 as legacy software.

A comparison between Chrome9 (scored 242) and IE9 (scored 116) from Feb. of 2011 -
Here are the results of an HTML5 test comparing Chrome9 beta build and the release candidate of IE9.

Drupal v. Joomla – Part 1: Installation

This is part of an on-going article about my Drupal v. Joomla toe to toe knock-down drag-out fight called Drupal v. Joomla.

Installation

Initial Drupal Setup
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)
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.

How I Might Code a 2-Column Layout in HTML5

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="https://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="https://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 Design Process for the Da Vinci Days Website

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!