You're A Div And You're A Div And You're NOT A Div!?
I really couldn't find a suitable image to put here, so I put an image of a div. ~gunshot echoes in the distance~
I've encountered a few issues whilst implenting the new design. One of the most taxing problems involves the #topContent div and it's three sub div's which make up the top content blocks. Originally I'd planned to use one CSS statement to control most of the formatting of all three blocks like so.
#topContent div { }
However when I went to insert the links inside "This Week" I had to also use a div which inherited all of the values from the proceeding statement, meaning it displayed at 33% width.
Just as a note, for some reason I've incorporated each link into a p tag, which I now know is wrong semantically. However I can't think of what to replace it with. I don't think an unordered list would do the job either. So I did a bit of research on the w3schools website and came across definition lists.
Definition lists use the dt (definition term) and dd (definition description) tags to format lists. This means I could markup my review of useit.com like.
- Useit.com
- Horrible looking website. Looks worse than a bad bout of the piles.
Semantically this makes a bit more sense!
Also originally I had a title for each section in the links, which was either "Rocks" or "Sucks". Now I've replaced the title with a thumbs-up or thumbs-down icon, each of which I borrowed from the excellent Fam Fam Silk Icons collection.
Now back to the original problem. I think it'd be a bit too limiting to use a command like #topContent div { } as I'd be continually resetting the width of additional div's in the topContent bar. In the meantime I'll do it like this.
#biography, #technical, #thisWeek { }
Introducing Firebug
I've started using Firebug which is a debugging extension for Firefox. In the past debugging Javascript errors has been a nightmare, especially in Internet Explorer which gives seriously vague error messages.
Firebug, on the otherhand is much more specific with highlighting errors. It's seriously a godsend. I'd kiss it if it was alive and promised not to call the police afterwards.
The Front Page Has Nothing. Why is it showing?
Previously if you entered http://www.mattwaterworth.com/des511j1/ into your browser you'd have been presented with a blank page. Now if you visit the page you are automatically redirected to the current week. Here's the code I used for this.
if($this->params['controller'] == "pages" && $this->params['action'] == "display") {
$this->redirect("/weeks/view/$this->currentWeek");
}
The code itself is simple. It first checks to see if the user is on the index page. If he is, it redirects him to the appropriate week using CakePHP's redirect method.
The Title's They Are A'Changing
I decided that the page titles need revamping and made more descriptive. Here's how I made them fully dynamic. First I declared an array in the AppController, which is the class that all of the other controllers are derived from.
$this->titleArr = array('Matt Waterworth', 'DES511J1');
Then in the view method of the weeks controller, I added the selected Week to the array like so.
$this->titleArr[] = "Week $this->selectedWeek";
To format and set the title, I joined each of the array elements with pipes using the php implode function like so
$this->pageTitle = implode(" | ", $this->titleArr);
Fixing the Quick Links
It's come to my attention that the anchor links aren't working correctly. The problem is down to some faulty logic in my createSubNavigation function, which fails to name the anchor links correctly inside the main for loop.
Let's take the Quick Links for Week 1 as an example. Each link here is dynamically generated in the for loop and is assigned an href value of section_x, x being the loop variable. Therefore Belief Based Social Networking Website would have an href of #section_0, Emo Gaming Site #section_1, Worst Bands #section_2. If the logic was correct YouOs should have a href of #section_3 but doesn't as the x variable is reset in the for loop.
I solved this issue by declaring a new counter variable called z, which is incremented at the end of the for loop.
I managed to get the Quick Links menu working in IE too thanks to this third party getElementsByClass function.
Now instead of using this
var posts = document.getElementsByName("post");
I use this. It's almost identical and I didn't have to change a single line of code in the for loop! Brilliant!
var posts = getElementsByClass("post");
Finally I removed the "Back To Top" link beside the first h3 on each page as this heading is already at the top. I just put the code which generated the link in a condition stating that z has to be greater than 0.
Project Panic
It's already Week 6 and I feel like I haven't made enough progress with my project idea. It's time to get thinking!
On the home page there will be a text box with maybe an "I believe" prompt beside it. Whilst the user types in their belief, results which match will be returned via a drop-down box ala Google Suggest.
I'd like to use an input tagging system to make the website more interactive. For instance the user should be able to enter "I believe that (username) is God". This should automatically establish a believer-God relationship between the two users, founding a primitive belief system.
43things.com Research
I've been reading 43 Things : A Community Study and it has provided me with a few insights about 43 things.
- It was developed in the MVC Framework Ruby On Rails.
- Most of the developers previously worked with Amazon meaning they had a lot of experience.
Interestingly enough 43 things wasn't always pretty. This screenshot is from the preview release of 43things.com in November 2004, taken from the WayBack Machine.
More Mod-rewrite Experimentation with CakePHP
Over the weekend I was pissing about with Jackie Fullerton.com just to see if I could make one of the best URL's known to man. After a few hours of experimentation, I think I succeeded with http://www.jackiefullerton.com/god/of/man-boobs/
Let me explain how this works. First, some background knowledge on Jackie. Jackie is a God. He is the God of almost everything you can imagine. Including man boobs. On the Jackie Fullerton website I've created a God controller which contains a method called of. Whenever you visit the URL http://www.jackiefullerton.com/god/of/ you are essentially calling the of function from the God controller through the front controller which receives the request as index.php?controller=god&action=of.
Now this doesn't work without the final part of the URL, which is a unique identifier to what Jackie is the God of. In this case, Jackie is the God of man boobs, therefore the identifer is 'man-boobs'. The of method looks something like this.
function of($slug) {
$godOf = $this->God->findBySlug($slug);
if(!$godOf)
$this->redirect("insert address to 404 page here)
}
In 3 lines of code this retrieves the man boobs entry from the database, verifies if it exists and if not redirects the user to the 404 page.
Why is this important?
I want to create some really creative URL's in my final year project, so I think it's important that I start experimenting with this sorta stuff now.
Also, I have no life.
Automatically generating H3 anchors and link lists in Javascript
In the Week 4 lecture, Chris and Nicklas showed us some sample design blogs from last years group. All of them were really well designed, with a frightening amount of content.
I remember seeing one which linked to each subheading within a week, thinking it was a great way to create an entry point into the content.
I want to do something similar with this blog and display it in a right nav bar. Instead of creating each of the anchors manually, I think it'd be cool to automatically detect all of the h3 tags within the content and then generate the anchors in the appropriate place.
Here's the code I'm using at the minute to create the menu.
function createSubNavigation() {
var content = document.getElementById("content");
var subNavigation = document.getElementById("subNavigation");
// fetch all of the posts in the current document
var posts = document.getElementsByName("post");
var h3s
var x;
var y;
var index;
var titleArr = new Array();
// check each post to see if it continues subheadlines (i.e. h3s)
for(y = 0; y < posts.length; y++) {
h3s = posts[y].getElementsByTagName("h3");
var postTitle = posts[y].getAttribute("title");
var para = document.createElement('p');
para.innerHTML = postTitle
subNavigation.appendChild(para);
for(x = 0; x < h3s.length; x++) {
index = titleArr.length;
var eachLink = document.createElement('a');
var linkText = h3s[x].innerHTML;
h3s[x].innerHTML = h3s[x].innerHTML + " Back to Top";
var anchorLink = document.createElement('a');
anchorLink.name = "section_" + x;
h3s[x].appendChild(anchorLink);
eachLink.innerHTML = linkText;
eachLink.href="#section_" + x;
subNavigation.appendChild(eachLink);
}
}
}
Unfortunately this won't work in IE as it doesn't support the getElementsByName method, so I'll have to adjust this accordingly. Once I've ironed out this problem I can then strengthen the code by incorporating the links into an unordered list.
This is now working perfectly in Firefox and Safari! The only potential problem is that I'll have to use h3's solely for subheadings inside of the content div, otherwise the menu will display invalid links. I could resolve this by specifying a specific class for each of the subheadings but this would add a bit of overhead.
More Javascript Research
Tonight I'm going to research the Prototype Javascript library to see if it could help make JS development more efficient. Also, I've been referring back and forth all day to Professional Javascript for Web Developers, which is proving to be a great resource.
So I turned the computer off, opened up my sketch pad and started sketching out a rough idea for the sites design. The problem is that it looks like every other design I've ever produced. Take this sketch as an example.
There's absolutely nothing original about this layout at all. I just can't visualise anything unique at the minute. And since there are no toads about here, it's gonna be a pretty lean design season judging by this start.
Jokes aside I'm working my way through the first few chapters of The Principles of Beautiful Web Design. It's useful for me in that it deals solely with design in the context of the web. In order to understand the theory behind design I need to see practical examples of why they work.
In the next sketch I've tried to develop the original sketch in something more concrete, using a 3 x 3 grid as recommended in the book.
Whilst this sketch won't win me the Turner Prize just yet, it's helped to cement the image I have of the design in my head (yes I have one now and NO I haven't been able to source any toads..or toadstools).
Developing a Morgue File
I'm now going to look for personal websites that have a similar layout to the one I've sketched out above. I'll then refine the sketches if I can come up with anything different.
I'll take a screenshot of any interesting designs and then collate them into a morgue file.
Photoshop Design Stab # 1
The Design Process
My first port of call was Adobe's Kuler palette generator, where I had a quick browse about before deciding upon the "Sandy Stone Beach Ocean" colour scheme. In reflection I was careless choosing a scheme without considering the visual message I wanted to convey....(whatever the fuck that's meant to mean).
Seriously though, if I was designing a website for a client I'd have to ask about any existing corporate branding before even thinking about colour.
I selected the Stone Beach Ocean scheme because..
- It appeared second on the list when you sorted the schemes by the 'Highest Rated' criteria. These people know what they're talking about when it comes to colour....don't they?
- I liked it. I'm a sucker for blue and compliementary colour schemes.
It's All About the Balance
I'm interested in balance as a web design concept, especially after visiting gr0w.com. In my initial mockup above I added balance to the top 3 column grid, by making the opposite sides the same colour and widths. I opted to offset this balance by creating a wider centre column, using a different background colour. This doesn't work very well as the centre column now has too much emphasis on it.
I maintained the sense of balance at the top by shading my name in a light brown offset against white. I'm unhappy with this as it draws attention away from my name, which is exactly what I don't want.
It's the equivalent of walking into a job interview, being asked for my name and whispering it inaudibly on purpose. It just doesn't make a good first hand impression.
Reflections on the Mockup
This design might be suitable for a manufacturer of those custard cream biscuits, but not for a web developer.
On the upside, I really do like the layout of the mockup. I think I'll make all of the top columns equal width and start to convert this to HTML.
And by this stage I've already finished the HTML design. That's the wonder of blogging isn't it? You assume I'm talking in a constant stream, when in fact I often finish a paragraph, leave the blog for about 7 hours and then finish a design without documenting the process at all!
(I will dedicate a post to the development/maintainence process later on in the week).
But for now I'm off to have a Nice Cup of Tea and a Sit Down. It's a pity we don't have any of those custard creams in the house as I'm starving.
I Haven't Been Concentrating Enough on Design
For the next few weeks I'm gonna concentrate mainly on redesigning the blog in an attempt to extend my knowledge of CSS.
The last design seriously sucked. It looked like something out of a trashy World War II B-movie. I want to create a design that'll give me enough flexibility to experiment with different elements on the page inside sidebars. Whilst I have a reasonable understanding of CSS I've still quite a long way to go, which is why I've bought CSS Mastery.
So I've removed the CSS style sheet from the blog altogether and I'm starting afresh. It's important that I now take a bit of time to look at a few sites that make good use of CSS and to find out why they work.
Liar, Liar Pants On Fire
In Friday's class I told Nicklas that I'd concentrate solely on the blog's design. It's only been 8 hours and I've already broken my vow. I have a perfectly good excuse though, so bare with me.
I'm currently trying to think of dynamic page elements that I can incorporate into the sidebars such as Last.fm feeds, quote of the day etc. Once I decide upon a few of these I can then switch the computer off and figure out exactly how the blog will fit together.
This approach was inspired by the Reviving Anorexic Web Article on A List Apart which concludes that it's essential to perfect your content before designing.
Incorporating My Del.icio.us Links Feed Into My Blog
I've decided I'm going to use the Del.icio.us API to fetch links that are related to this module. For instance if I find a cool link that I want to include in my blog I'll include 'des511j1' as a tag. The second tag will either be 'rocks', 'sucks' or 'wtf' which will provide a quick capsule view and a means of categorising the links quickly.
I've Incorporated Del.icio.us Links Into The Blog
I'll explain quickly how I went about this. Firstly the PhpDelicious class has a GetAllPosts method which returns all of the links you've saved in Del.icio.us. I then looped through the resulting array, saving the results which met the following criteria in another array.
- Links with their first tag as des511j1.
- Links that occur within the specified week (at the moment this code is contained purely within the Weeks controller which means I can access the Unix timestamps for the start and end of the week. If the links date falls between that range, then it's saved into the new array.
Since the code is completely modular no errors are displayed if there are no del.icio.us links for the current week (which will be true for the first 3 weeks).
Posts This Week
I will also a seperate section listing the posts I've made this week. This will be simple to implement as I already have a posts array variable encapsulated inside of the weeks controller.
And One Final Technical Thing!
I've finally implemented a proper back-end to the blog and added in TinyMCE (using this guide) to deal with content management. I've also adjusted the timing system so that each week ends at Wednesday at 3PM (deadline for the blog updates). This means that the Week 5 link in the Week Bar will not be activated until Wednesday 24th October at 3:00PM.
Shaun Inman.com and Dynamic Colour Schemes
Nicklas showed me Shaun Inman's website on Friday and I was impressed by how well the monochromatic colour scheme works. What's even more impressive is that the blog randomly changes colour, albeit for seemingly no reason!
I think it would be cool to dynamically alter the appearance of this blog depending upon what music I've been listening to recently. For example. If I listen to Radiohead, it turns grey. If I listen to Metallica, it could turn black. If I listen to Bowie it turns pink. I could specify colour schemes by genre so that more artists are covered. I could set a pink glam colour scheme that'll come into effect if I listen to T-Rex, Bowie or the New York Dolls.
This would take quite a bit of work but it'll be really interesting to try. Right that's it! I'm really turning the computer off this time!
