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.
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.
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
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.
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.
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.
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.
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.
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
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
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.
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 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:
<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>
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”)
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.
<!-- The header element represents a group of introductory or navigational aids. -->
<h2>Different Ways to Style a Layout</h2>
<!-- major navigation blocks are appropriate for the nav element -->
<li><a href="about.html">about us</a></li>
<li><a href="contact.html">contact us</a></li>
<li><a href="site.html">site map</a></li>
<section> <!-- a section represents a generic section of a document or application...a thematic grouping of content,
typically with a heading. -->
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!