Hosting

Last night I took advantage of the UTS server being down and moved my site into the real world.

Domain: www.alpinemagnum.com.au

Hosted by: Digital Pacific

I registered the domain name with Digital Pacific, so I didn't have to update the name server. So all in all, it was quite an easy process.

UTS server issue

Anyone else having problems with PHP on the UTS server?

Cleaning up my CSS, and a few other links.

I've been catching up on some of my RSS feeds tonight, and wanted to share the following links:

Tips on cleaning up your CSS code.
I'll be taking note of Antoni Lupetti's tips - to order the CSS properties alphabetically and indenting the child elements.

Popular HTML Tags.
The most used tag is the anchor tag, followed by the div tag. And luckily, I know all 7 tags Antoni mentions.

Popular HTML Editors.
Results of a small survey conducted by Lupetti. NotePad++ - the one I'm using - is the most popular editor for Windows users.

And just for fun.
After all, we all need a little comic relief at the end of semester. Monoface uses Flash to
create more than 700,000 combinations of faces. Just click on the mouth, nose, head, etc.


References

Lupetti, A. (2009), 5 Rules to Write More Readable CSS Files, Woorkup, http://woorkup.com/2009/10/18/5-rules-to-write-more-readable-css-files/, [viewed 25 October 2009].

Lupetti, A. (2009), Most Used HTML Tags in 50 Popular Websites, Woorkup, http://woorkup.com/2009/10/17/most-used-html-tags-in-50-popular-web-sites/, [viewed 25 October 2009].

Lupetti, A. (2009), HTML Editors War What Are You Using, Woorkup, http://woorkup.com/2009/10/15/html-editors-war-what-are-you-using/, [viewed 25 October 2009].

Monoface, http://www.mono-1.com/monoface/main.html

Screen capture software

Snag-It (for Windows)
I really recommend Snag-It to capture screen shots of your website. You can download a free 30 day trial here http://www.techsmith.com/screen-capture.asp

Clip-It (for Mac)
On Antoni Lupetti's blog, I also read about a similar program for Mac called Clip-It! I haven't tried it, but it sounds similar to Snag-It. You can download it here http://www.headnix.com/


References

Lupetti, A (2009), Clip it! Capture Any Web Page Into a Single Image, Woork, http://woorkup.com/2009/10/20/clip-it-capture-any-web-page-into-a-single-image/, [viewed 25 October 2009].

Sitemaps and Footers

I've been struggling with my site structure. I'd like to set up a folder structure so that all the second level pages are in separate folders, which sounds easy enough, but I'm not sure how to incorporate into my PHP menu system without using absolute references for the links. I've created just one menu file, which I include in each page. Maybe something to check with my peers on Tuesday.

Sitemaps usually belong in the footer, along with contact details and information about the site owner. In Smashing Magazine, Lennartz provides a whole swag of footer examples and recommends that you use colours to clearly separate footers and content.

When I eventually work it out, I'm thinking of using the Google Sitemap Generator (see link below).


References

Google Sitemap Generator, http://code.google.com/p/googlesitemapgenerator/, [viewed 25 October 2009].

Lennartz, S. (2008), Footers in Modern Web Design: Creative Examples and Ideas, Smashing Magazine, http://www.smashingmagazine.com/2008/04/08/footers-in-modern-web-design-creative-examples-and-ideas/, [viewed 25 October 2009].

Progress Update - Week 12

The good news - the build is on schedule. This week I finished the CSS style sheet, although I think I should spend a bit of time "cleaning it up". I've also populated the site with content, and the business owner is now reviewing the site. I found a royalty-free image on the Getty website which I'm using as a logo placeholder, and impressed myself by changing the colours to match the hex codes in the style sheet.

I am using PHP for the online form- and have reused the code provided by CSS Karma. I decided not to use MySQL in my online enquiry form, because I don't think it's necessary to store the information. Instead, I'm taking the "fire and forget" approach - anticipating that the enquiry messages don't get lost in the ether.

The main pages of the site all validate successfully - both HTML and CSS. However, I've run into a couple of problems validating the Gallery and Contact Us pages - where I have reused other people's code for the photo gallery (JavaScript), the embedded videos (YouTube) and the online enquiry form (CSS Karma). It seems I can get the pages to validate if I change the doc type to Transitional (rather than Strict), but I need to look into the implications for this. I'll see if Alastair can help me on Tuesday night.

Hoping to complete the first draft of the system documentation and add some metatags to the site before Tuesday night.

It's not likely that I will add any advanced features to the site next week, as I need to focus on completing the documentation of the project, taking into consideration the peer feedback received during semester. Although if there's time - I will probably look into improving the site accessibility.

CSS, active links and breadcrumbs...

I found an image that I can use as a logo placeholder, and have changed the colours to match my hex codes. Now my site has something resembling a masthead. CSS and I are becoming better friends.

I've inserted the HTML code for the masthead and menus into small PHP files, which I include in the relevant files. It's basic functionality that makes the site easier to maintain, because I only need to make changes in one place - rather than across the whole site.

One thing I'm really struggling with is trying to get my active links to come up in the right colour. I've got them all in the right order (W3Schools says to put them in this order - link, visited, hover, active), but it's still not working. It's not a show stopper - but would be nice, because it gives the user an idea of which page they are on.

I am also looking for some code for breadcrumbs, but so far haven't come across anything. I will keep looking.

The basic functionality of the site is pretty much finished. I arranged hosting and purchased the domain name today, so will also plan to move the site off the UTS server. I'm also going to start writing the system documentation, leaving next week free to add extra functionality, if I have time.

Creating forms in HTML

Today I'm working on the online enquiry form for my website.

I have created a basic form structure, with help from W3Schools. Now I'm trying to make it look pretty, hence scouring the web for examples to borrow.

Here's an article from CSS Tricks discussing where best to put your field title. For example, top aligned labels have the best completion rates and are easiest for users to process.
http://css-tricks.com/label-placement-on-forms/

This article from Sitepoint talks about accessible form markup, and how to label form elements so people using screenreaders can make a connection between the form label and it's text label.
http://articles.sitepoint.com/article/fancy-form-design-css

And here's a site called HTML Ipsum, which provides sample Lorem Ipsum, already marked up in HTML tags, and yes there a form text example.
http://html-ipsum.com/


References:

Coyier, C. (2008), Label Placement on Forms, CSS Tricks, http://css-tricks.com/label-placement-on-forms/, [viewed 20 October 2009].

Adams, C. (2008), Fancy form design using CSS, Sitepoint, http://articles.sitepoint.com/article/fancy-form-design-css, [viewed 20 October 2009].

HTML Ipsum, http://html-ipsum.com/

W3Schools

The W3C launched their new website on 13 October - with a much better GUI.

On the W3C schools website, I also noticed that they include browser support (the icons make it easy to read), as well as explaining the difference between HTML and XHTML. I've only just noticed this, so not sure if it's a new feature or not - but it is helpful.

For example:
http://www.w3schools.com/tags/tag_input.asp

Guest lecture: Chris Mills from Opera

Tonight, Chris Mills from Opera Software was our guest lecturer. Chris refers to himself as a web evangelist - and spends a lot of time touting webucation. I related to his comment about web design being a mix of science and art.

Chris talked about his belief in open source software, web standards and accessibility - which should consider both device and human limitations. He also spoke about some of the issues in developing websites for mobile phones, highlighted some new features in HTML5/CSS3, and, being an Opera advocate, told us about their debugger called Firefly, which seems to have similar functionality to Firebug.

Here's a link to Chris' blog and also an interview with Chris that I found on Sitepoint's blog.

Chris Mills, Electric Brain Salad, http://my.opera.com/chrismills/blog/, [viewed 13 October 2009].

Interview: Opera Software's Chris Mills, Sitepoint, http://www.sitepoint.com/blogs/2009/07/21/interview-opera-softwares-chris-mills/, [viewed 13 October 2009].

Week 11 - CSS Update on Alpine Magnum website

I've just restructured the divs to get the page layout looking a bit better. I am starting to feel like I've got the reins controlling my CSS, rather than it being a surprise every time I changed the style sheet. It really helped by doing the Subcide online tutorial.

I'm using a "container" div to define the width of the site, which seems to be working well. But I'm having a few issues with defining the background colour on my side menu on the sub-pages. Will fiddle around and see if I can get it working before next week's class.

If you're interested, here are the links to my WIP website:
Home Page - with top navigation menu
Product Range Page - with top and side navigation menus

I think I've spent enough time on the CSS. My next goal (and I suspect big challenge) is to get an online enquiry form working, using PHP and MySQL.

Week 10 Update - Alpine Magnum Website

So far this week I have created the HTML template and initial file structure for my website. I have used PHP to integrate the navigation menu - to keep the links in one central file.

I spent more time on my CSS than I had planned for my CSS, but it became evident that I need to review the structure of the divs on the page. I'm thinking of following the Four Bubbles Model outlined by Lupetti (2009).

I hope to spend some time this weekend learning how to get the online form working, with PHP and MySQL.

Here's a link to my WIP website.
http://www-student.it.uts.edu.au/~twade/alpinemagnum/index.php


Reference:

Lupetti, A. (2009), Methodic approach to CSS coding: Four Bubbles Model, http://woorkup.com/2009/10/09/a-methodic-approach-to-css-coding-four-bubbles-model/, [viewed 10 October 2009].

System Plan

Here is a link to my draft System Plan

Last week I spent a lot of time thinking about the wireframes. What I want versus what I think I can actually create in CSS will be a big challenge over the coming weeks. I have also completed the sitemap and content plan.

This week will be busy, as I'm hoping to complete the following tasks:

• Create HTML templates and pages
• Create file structure
• Create CSS stylesheet to define basic page style and layout
• Test basic HTML structure and CSS stylesheet, bug fixing
• Create and integrate PHP scripts for navigation menu
• Create and integrate JavaScript for photo gallery

Progress update this time next week.