Week 5 CSS Exercise

Well…finally got the blog/CSS exercise under control and (mostly) validated. Just a couple of things:

In the blog page, The DTD is for transitional, so I changed it to strict.

The links for the CSS needed to be between the <head> tags, not in the body.

So having changed those, the blog_final.html document was ‘tentatively’ validated. I need to make changes re the encoding to  make it ok. I need to declare the encoding somewhere. More research…

In terms of the CSS, changing some of the attributes was successful and easy enough, so I jumped to the ‘challenge’ part of the exercise. I couldn’t figure out where the pseudo class code for the hover functionality had to go–embarrassingly, it took ages (I refuse to say how long!) and although I looked online for it and found heaps of other stuff, nothing actually said where to put it. D’oh! It wasn’t until I checked Alastair’s video lecture notes again and  saw that it went outside of the styles that it worked. To make sure I would well and truly remember,  I added as many things as I could possibly think of,  including making the image go semi-transparent on hover. For the transparency, I used two commands  thinking that would make it work in most instances; however, the validator didn’t like it. Apparently one is recognised in 3.0 and not in 2.1. Here is what I based that decision on:

‘IE9, Firefox, Chrome, Opera, and Safari use the property opacity for transparency. The opacity property can take a value from 0.0 – 1.0. A lower value makes the element more transparent.

IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 – 100. A lower value makes the element more transparent.’ (w3Schools.com, 2012)

I still have a bit more work to do on that and a few of the other issues the validator brought up–parse errors and such. Luckily, there are only a few! By the way, the validator validates according to CSS 2.1.

Here is the CSS code I used for making the image 50% transparent on hover:


My exercise is here


CSS Image Opacity / Transparency. 2012. CSS Image Opacity / Transparency. viewed 31 March, 2012, <http://www.w3schools.com/css/css_image_transparency.asp/

The W3C CSS Validation Service. 2012. The W3C CSS Validation Service, viewed 31 March 2012, <http://jigsaw.w3.org/css-validator/>

The W3C Markup Validation Service. 2012. The W3C Markup Validation Service, viewed 31 March 2012, <http://validator.w3.org/>

Pointed Brackets and Favicons

Harvard referencing UTS style, and those little pointy brackets, also known as greater than/less than, need special treatment. If you are trying to get those brackets around your urls, you will need to use a code to display the brackets, as they are ‘reserved’ HTML characters. I found them under ‘entities’. Find the codes for those and other symbols here. Actually, at first I thought I’d copy them from the source of the UTS Harvard Referencing page, but didn’t realise the ; needed to follow the code. It displayed just fine, but the Validator wasn’t having any of it, so I went looking further. No matter, learned two ways to put them in…and the code validated.

Today I also created a favicon for my site–not sure if I will keep it or change it. I do like it but I admit I created it in PowerPoint (gasp!) and used an online favicon generator because Photoshop isn’t loaded on the machine on which I’m working, and neither is any reasonable graphics program. You probably already know you can save a PowerPoint presentation as an image by doing a Save as, Image, then choosing an image type. It worked just fine. Only thing is I didn’t get transparency–not that I tried too hard–so I will probably drop it into Photoshop later. I used this favicon generator which gave a nicer (ie not a boxy pixelated image) result than some of the others I tried, and it supports transparency. Once you’ve created your favicon, you just need to put it into your root directory, and copy the code that is provided into the <head>section of your HTML file.  The machine I am working on right now has Safari and Chrome, and initially it wasn’t displaying the favicon in Safari, but I reset Safari (having found the solution online) and it appeared.

If you are happy to have your favicon displayed in a gallery, then try this site. A look at the gallery might give some inspiration! This page gives information about favicons and I think it’s worth reading. I also think the code provided here might validate more readily …

This favicon generator allows you to create animations. Maybe I’ll try that another time 🙂



Favicon Generator. 2012. Favicon Generator. viewed 25 March 2012,  <http://www.degraeve.com/favicon/>

Favicon Generator. 2012. Favicon Generator. viewed 25 March 2012,  <http://favicon-generator.org/>

favicon.ico Generator. 2012. favicon.ico Generator. viewed 25 March 2012, <http://www.favicon.cc/>

Harvard UTS Referencing Guide | UTS Library. 2012. Harvard UTS Referencing Guide | UTS Library, viewed 25 March 2012, <http://www.lib.uts.edu.au/help/referencing/harvard-uts-referencing-guide>

HTML Entities. 2012. HTML Entities. viewed 25 March 2012, <http://www.w3schools.com/html/html_entities.asp>

The W3C Markup Validation Service. 2012. The W3C Markup Validation Service, viewed 25 March 2012, <http://validator.w3.org/>

The F word–my favourite!

All four letters of it (well, three really). Free, of course! A bit excited: I think I can include this in my web site; however, if anybody has any experience of any similar software I’d love to hear about it. This is an interactive booking system suitable for small business and I think it will slot in really well to my proposed website/app for a personal trainer. It can be embedded in an existing site, hooray! Did I mention it was free? My first experience with such a system was when booking a venue via Woollahra Council last year but I think the free Setmore.com software could do the trick for my purposes better than the one that deploys the Woollahra bookings system. I would love to program something like that myself if I have time (and let’s be honest, the smarts!) but if not, I can at least include this to provide the proposed functionality in my prototype. Wonder if I can change colours?

I did a bit of looking up and apparently it can be done in PHP but at this stage the code appeared incomprehensible to me and I’m not sure I could develop the skills in such a short space of time to do it. But it’s not completely off the list of potential happenings!



Event management software. Venue management software. Software for venue and event management. Events. Venues.. 2012. Event management software. Venue management software. Software for venue and event management. Events. Venues.. [ONLINE] Available at: http://www.priava.com/. [Accessed 23 March 2012].

Home – SetMore: Online Appointment Booking. 2012. Home – SetMore: Online Appointment Booking. [ONLINE] Available at: http://www.setmore.com/home. [Accessed 23 March 2012].

Online Booking System: Woollahra Municipal Council. 2010. Woollahra Municipal Council Online Booking System. [ONLINE] Available at: http://woollahra.eponline.parrimark.net/eponline/default.aspx [Accessed 23 March 2012]

Right about now…

Just realised I hadn’t posted a link to yesterday’s PHP exercise, but then decided I’d see if I could push it some more. So, with the help of http://au.php.net/manual/en/function.date.php I thought I’d add a bit more. Check it out here. You might notice I haven’t yet figured out how to get things on separate lines 😀 I kept getting error messages. I’m tired and a bit pushed for time right now to go looking but will post as soon as I’ve found the solution. I wasn’t sure what the convention is for where spaces are added but have added them before the closing quotes in each string. Another thing to look up. I was pretty happy that it validated on the first go!


Tips from W3Schools HTML Tutorial

I’ve got a bit of basic HTML knowledge, but never have the opportunity to do much coding or solve problems, so I thought I’d go through the W3C Schools Basic HTML tutorial (didn’t get any further than that yet, but CSS is next). I found some interesting things that I haven’t had much to do with, so I thought I’d list them for future reference.  These might be simple knowledge for the more experienced web people, so bear with me… Would be interested in people’s comments re what things they use a lot or other tips–or even some things that they prefer not to use and why.

One cool thing about these tutorial pages is there is a ‘try it’ feature so you can have a go at editing their code and see the results. The screen is split so you can see code as well as preview:

Bi-directional override

For scripts (languages) that are written right-to-left, the <bdo> (bi-directional override, not big day out!) tag is used. Hebrew and Arabic are two examples. According to http://www.w3.org, all major browsers support this tag.

<bdo dir=”rtl”>Here is some right-to-left text!</bdo>


The <q> tag can be used for short quotations. It inserts double quotes. I can’t figure out what the difference is between using <q> tags or simply typing the double quotes, unless it’s something that is read by software for the visually impaired. Anybody know? Have a look: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_q

Image Height and Width Attributes

“Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).” That tip was a direct quote from http://www.w3schools.com/html/html_images.asp

Image Map

Creating an image map: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_areamap

Different Types of Lists

(under the heading ‘Further Examples’)


In particular:

Definition Lists

Nested Lists

Optgroups in forms –  labels for items in a list using the <optgroup> tag


Colour Names

Names of colours, along with hexadecimal codes—if you prefer to use words instead of codes (there are 147 supported by all browsers). This is a nifty little page—you can preview the colour as a background with examples of coloured text on the background. http://www.w3schools.com/html/html_colornames.asp

Hope this might have helped others!


I Need (a) Space!!!

And I finally got the space I needed. When marking up my draft learning proposal, I did it in the HTML editor included in cPanel, the site administration software provided by my web host. Basically, it was all I had access to at the time. Long story. Thing is, I couldn’t get validation approved because of just one little thing: there wasn’t a space between the quotes in the HTML declaration, ie

… EN“”http://www.w3.org

which might seem a fairly straightforward thing to fix. Yeah…no. I tried all sorts of things (like pressing the spacebar, for example) but each time I saved the file, the space disappeared. Who would have thought? ‘Space. The final frontier.‘ In the end I opened it up in Dreamweaver at work, inserted the space, then saved and uploaded the file. Seemed a little like hitting an eggshell with a sledgehammer, but there you go. Web apps can be a little idiosyncratic.

And while I’m on the topic, I was relieved that I did my usual obsessive thing by keying in the proposal content in a text editor before copy/pasting it into the HTML file and adding tags (a bit laborious, but safe). I had been marking it up (again in my web host’s cPanel web editor), had saved it and a minute later the screen kind of started overlaying text on other text, like it wasn’t refreshing or something. No worries, I’d only just saved it, so I closed it and opened it again… to find about half a page of my content had disappeared. Well, obsessive saves the day, because I at least had my backup and didn’t have to compose the text again.

Moral of the story: web-based programs can come with added surprises (read: unreliable).


SWOT Analysis

Thought I’d do a little research into SWOT analysis to help me write my learning proposal. These free templates have quite a bit in them that might not be useful, but they might give you a few ideas:

http://www.businessballs.com/free_SWOT_analysis_template.pdf (more structured towards business opportunities but a few things are likely to be relevant)

http://www.mindtools.com/pages/article/worksheets/SWOTAnalysisWorksheet.pdf (broader, simpler and more general)

Not sure of the credentials of the author here (I couldn’t find one!) but I thought this statement was useful: ‘In the SWOT Analysis Template matrix, Strengths and Weaknesses involve identifying the firm’s internal capabilities and / or disadvantages against its competitors, while Opportunities and Threats involve identifying external factors such as government policies, forces from competition …’  (SWOT Analysis Template.com)


SWOT Analysis Template.com. (n.d.). SWOT Analysis Template and Case Studies in its real life application of the SWOT Analysis template. viewed March 11, 2012, <SWOT Analysis Template: http://swotanalysistemplate.com/>


I shopped around quite a bit for a web host, and looked beyond the standard requirements for class. I tried to find something that was flexible, to take account of any future professional endeavours in web development. I have to say that comparing the offerings from different providers was a bit like trying to compare insurance plans–very difficult to compare like with like, and as I’m not hugely savvy with all that was being offered, it was quite a challenge. However, words like ‘unlimited’ helped when it came to capacities and so on. Some factors that were important for me were:

  • Environmental responsibility
  • Cost
  • Location

Environmental Responsiblity

Two providers stood out when it came to the environment: http://www.greengeeks.com, and http://www.digitalpacific.com.au, both of which are carbon neutral. GreenGeeks is ‘300% wind powered’–they purchase ‘wind credits’ to the value of 3 times the amount of energy they use. There is some pretty funny reading about lunch and dinner at the office on GreenGeeks. Digital Pacific purchases carbon credits.


GreenGeeks was $AUD61.40 for the first year and $95 for subsequent years (and a chance to win an iPad 2!)  Digital Pacific was $99 per year.


Digital Pacific is located in Sydney and ‘overseas’ (couldn’t find where).

GreenGeeks has server locations in the USA (San Diego and Chicago) and Canada. Glad they have somewhere besides San Diego–earthquakes could be an issue…

I ended up going with GreenGeeks–They won out slightly on eco-responsibility and decisively on price and features. Digital Pacific won out on location–I think having a server based in Australia might be an advantage when it comes to any legalities that might crop up, or in terms of customer service. In all honesty, there were a few things that I missed when comparing the plans. For example, Digital Pacific offers (‘strives to achieve’) 99.99% uptime compared with GreenGeeks guaranteed 99.9%, and Digital Pacific backs up 3 times daily compared with GreenGeeks nightly backups. Not sure if it would have changed my decision, though.

I’ve also purchased julie.id.au – couldn’t believe it was available! Using only my first name suits me just fine. Will try and get something up there this weekend, but at this stage I feel like I am really just stumbling around in a thick fog. Time to get on with my learning proposal!


PS Noticed that the head honcho at GreenGeeks is one Trey Gardner (looks/ sounds like Tree Gardener?!?) 😀


Hi, my name is Julie, and I attend the earlier class.


I can’t (and don’t) say I’m emotionally attached to Digital Media Technologies and/or Interactive Multimedia in and of themselves, but they have been a part of my personal and professional life for quite some time, arrived at via a path of typing (yes, on a typewriter), learning, using and, finally, teaching computer applications including multimedia programs, and design, mainly graphic and media design.

Technology Topic/Area/Issue

My interests lie in the uses, applications and contexts of the technology in various areas and the role of the technology’s capabilities in influencing these. I want to know who is using it (in our out of the predicted demographic?), how they are using it (as intended?), where are they using it and on what device, and whether they have found uses for it that weren’t foreseen. How do the capabilities of the technology influence the way it is used? How do you live your life with it? What about our close physical and tactile relationship to our devices? Oh yeah…and is a piece of technology a worthwhile addition to my life?


I’m doing this course because my employer has said I need to do it. I think I can generally pick up on things pretty well (some things faster and better than others!) and am pretty relaxed about the technical as well as the creative side. I take the attitude that outcomes can be unexpected, which can be exciting, so in this topic I’m more inclined to explore and absorb as much as I can and work out how best I can use and apply it.


I’m never comfortable talking about myself, but if you’re still reading, here goes: academically, I can be a bit driven and like to achieve at the top of my capabilities or even higher. That was not always the case! I’m fortunate in that I’m fairly capable with grammar and punctuation so I can devote more energy to the content of written work. I’m sure I take much longer to do things than I need to! Unsurprisingly, juggling work, family and study presents a challenge. Being able to concentrate and engage on just one or two things at a time is lovely…

So far, I can’t think of a URL to share. Will do so once I think of one!

Looking forward to an enjoyable and productive semester—where will it lead?


PS Chose this theme and colour to reduce distraction. I kind of like the austere look. Might play with it some more later.