Anchor tag with target element

I'm trying to set up an anchor link so that it opens in a new page using the target element, but the HTML doesn't validate. The validation notes suggests using the XHTML Transitional document type instead of Strict.

Has anyone had any success with this?

Normal tag would look like this:
a href="http://www.google.com"

For the link to open in a new page, I think you should type this:
a href="http://www.google.com" target="_blank"

For more information, refer W3Schools.

Getting your website to work in Internet Explorer

I was interested to read in Smarterware that the Google Wave Team have given up on supporting Internet Explorer in native form. Instead they have released an IE add-on to make it work.

I have already encountered problems getting my CSS to work in Internet Explorer, and have not fully resolved the issue yet. I have scheduled the final CSS design towards to the end of the project, so I don't waste valuable time that could be spent on functionality.


Reference:

Smarterware, Google Wave Team Gives up on Internet Explorer, http://smarterware.org/3380/google-wave-team-gives-up-on-internet-explorer, [viewed 30 September 2009]

Total eclipse of the flowchart :-)

I thought this was a clever and lighthearted approach to the trusty flowchart, using the lyrics from Bonnie Tyler's "Total Eclipse of the Heart". It really opened my eyes to the way we are "programmed" to display information.

Flowing Data (2009), Total Eclipse of the Heart Flowchart, http://flowingdata.com/2009/08/28/total-eclipse-of-the-heart-flowchart/, [viewed 23 September 2009]

Guide to CSS Font Stacks

Here's an interesting article on CSS Font Stacks, which might be useful when I'm finalising the style of my website.

Chapman, C. (2009), CSS Font Stacks, Smashing Magazine, http://www.smashingmagazine.com/2009/09/22/complete-guide-to-css-font-stacks/, [viewed 23 September 2009]

Sydney's sky in hex codes

Peculiar weather this morning. I started to think about what hex codes would best describe the colour of the sky. Just a guess, but I think it's somewhere between #DC9000 and #BC001D.

There is a neat fold out hex colour chart in Castro (2007), which mentions that "the first two hexadecimal numbers represent the red component of the colour, the second two the green, and the last two the blue" (Castro, 2007: inside back cover). This makes sense knowing that screen colours are represented by the RGB colour model (Wikipedia, 2009).

The colour chart on the WebMonkey website is also useful (thanks to Kate who mentioned it on Anna's blog).


References:
Castro, E (2007), HTML, XHTML and CSS, Visual QuickStart Guide, 6th edn, Peachpit Press, Berkeley CA

WebMonkey (2009), Color Charts, http://www.webmonkey.com/reference/Color_Charts, [viewed 23 September 2009]

Wikipedia (2009), RGB Color Model, http://en.wikipedia.org/wiki/RGB_color_model, [viewed 23 September 2009]

Week 7 Prac (done in week 9)

Tonight I was playing catch up on the week 7 prac.

Here are the links to the files, and also a few comments about the process.

1). PHP Example
http://www-student.it.uts.edu.au/~twade/pracs/week7/echo.php
This one was quite simple. I just copied the file onto my web server and it worked :-)

2). Guestbook
http://www-student.it.uts.edu.au/~twade/pracs/week7/gb.php

Here's the steps I followed to get my guestbook working:

• Created a table in phpmyadmin, using Alastairs SQL query (comments in gb.php)
• Added my server name, database name, user name and password to the variables in gb.php
• Uploaded the file to my web server
  

I found out that the server name doesn't need the "http://" prefix (this caused an error to begin with). I also had incorrectly entered the table name in the database name variable - I hadn't realised that the code already referred to the guestbook table.

To begin with, we were concerned about saving our SQL password in the php file, but after talking to Alastair remembered that the password wouldn't be displayed in the file online, as the web server runs the php scripts first, and then only presents the html code when someone tries to view the source code.

To make the prac simpler, I decided to work on the UTS web server. I might try the same exercise on my 000webhost account, to compare the phpmyadmin tool.

3). Guestbook with Country field added
http://www-student.it.uts.edu.au/~twade/pracs/week7/country/gb.php

Here's what I did to add a new field callled "country"

• Added a new field called "country" to the table in phpmyadmin, and edited the existing record (adding country details)
  
• Looked for all references to the field names in gb.php, and added the new field "country" in a similar manner.

The first time I forgot to add it to the HTML form, so the country field didn't appear in the form, but this was pretty easy to fix.

I haven't done the extra challenge yet, might do it later from home.

JavaScript - Week 8 Prac

This week, we are learning the basics of JavaScript. I wasn't sure if I would have time to include JavaScript in my project, but it seems quite straightforward, so I'm thinking to use it for for my image gallery.

Here are the links for this week's practical exercise:

Click here to see the Simple Blog
As you click on the thumbnail, the image changes below.
I think this script will be useful for the image gallery on my project website, and will have a play during the week (maybe using some of my images).

Click here to see the Challenge Exercise
Using JavaScript to compare 2 dates, and then using the alert() function to display the result. But don't get too excited, I didn't let on my birth date... so it's calculating how many days that I've been married - I wonder if my husband is counting :-)


References:
W3C Schools, JavaScript Date Object, http://www.w3schools.com/jS/js_obj_date.asp [viewed 15 September 2009]

W3C Schools, JavaScript Popup Boxes, http://www.w3schools.com/JS/js_popup.asp, [viewed 15 September 2009]

Wireframing

Smashing Magazine has tonnes of information, but you just need to dig through it to find the useful stuff. I'm posting a few links today - not enough time to read through them all - but I think some could be useful reference for this subject (DMT) and maybe also DMDP.

There are also links to some wireframing tools - some for free, some you have to pay for.

Smashing Magazine, 35 Excellent Wireframing Resources, http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/, [viewed 10 September 2009]

CSS Backgrounds

This article provides an overview of using backgrounds in CSS. I like how they provide a few different examples of how each property works. Just need a spare hour to "play around" with it.

Smashing Magazine, CSS Backgrounds: Everything you need to know, http://www.smashingmagazine.com/2009/09/02/backgrounds-in-css-everything-you-need-to-know/, [viewed 10 September 2009]

Website screen design - now in CSS

Last night - I created a page layout in Powerpoint.
24 hours later - I have started to create the CSS style sheet for my website homepage.

You can see my page layout here:
http://www-student.it.uts.edu.au/~twade/alpinemagnum/index.php

I have also started to use PHP include() function for the navigation menu. The links are saved in a separate file called menu.php. The html files are now saved with a .php extension.

I read in the Albino Blacksheet blog that you are meant to keep all the "included" files in a separate folder. I'll keep that in mind for my project, and will also check with Alastair next week.

Reference:
Albino Blacksheep, http://www.albinoblacksheep.com/tutorial/include, [viewed 9 September 2009]

Website screen design

After downloading a few of the free CSS templates, I have decided to design the screen layout for my website. It would be really easy to download a template "as is" - but then I won't learn how to do CSS from scratch.

Here's my idea for the home page. I am by no means a graphic designer - so keeping it simple, and using powerpoint to mock up screens. Next step to see if I can come up with a CSS style sheet to match.

Cheat Sheets

Here's a link to some cheat sheets for CSS, HTML, PHP. I'm going to download a few and will report back on which ones I find helpful.

http://www.tripwiremagazine.com/tools/tools/55-seriously-useful-front-end-web-developer-cheat-sheets.html

Technology Analysis

Here is a link to my draft Macro and Micro Technology Analysis

http://www-student.it.uts.edu.au/~twade/micromacro/

Google Wave

I went to the FED networking event last night to hear Lars Rasmussen talk about Google Wave - their new communication and collaboration tool due out later this year. Google Wave is an HTML5 application built using the Google Web Toolkit.

Click here to see the Google Wave preview (YouTube video)

Lars was part of the startup that designed Google Maps, a product I use every week.


Reference:

Duckett, C. (2009), Google ushers in Sydney-built Wave, ZDNet, http://www.zdnet.com.au/news/software/soa/Google-ushers-in-Sydney-built-Wave/0,130061733,339296697,00.htm?feed=pt_lars_rasmussen [viewed 2 September 2009]

Week 6 - CSS Layout

With a basic understanding of CSS Style and Layout, and after completing this week's practical exercise, I feel empowered to add some sparkle to my own website design.

Here's some highlights from this week's prac:

1). The second exercise with the hibiscus flower was the one that's really starting to look like a "real website".
http://www-student.it.uts.edu.au/~twade/pracs/week6/layout.html

2). I thought I had mastered the challenge exercise, but I think the CSS need some tweaks. The layout looked right at the lab last night, but it looks different on my wider screen at home.
http://www-student.it.uts.edu.au/~twade/pracs/week6/challenge.html