Skip navigation.

I'll think of a good title later

Posts tagged with "web design"

Pottering

,

I was given the option of take some holiday or lose my entitlement so I've got a week off work with not a lot to do.

Weather has been a bit grim so I've spent some time on the interwebnets & having a look at some new stuff. I've been playing around with Chrome a lot more which is very good & I'm much happier to use than Firefox but is still featureless when compared to Opera. I'm always impressed that I've been an Opera user for over 7 years now & I'm still discovering new features.

I've gone through a number of the articles at Opera's Web Standards Curriculum which although is very good is not really my style & is not inspiring me.

I've looked at Unite which I think is interesting but like widgets I can't really see the point. I get the argument about being in control of your own data, & a few years ago a free server side scripting system would have been just what I was looking for. But thanks to ByetHost offering free PHP hosting Unite really can't compare. For me PHP + MySQL is easier & more powerful, & for my projects if my hosting company wanted to look at the data I am storing remotely I wouldn't be particularly bothered.

I've cleaned up the quick & dirty PHP leader board I threw together last week, adding a nice load of js validation tricks to make updating the results easier.

I might itemise some of my code into reusable snippets for others to have a look at. The code I write tends to be specific for the apps that I build, as a result it is a lot smaller & faster. A lot of the generic javascript UI libraries are huge in order to take into account all the possible quirks of the pages they are cut & pasted into. As an internet snob I believe that pages should be as minimal as possible to avoid such quirks & that a web designer should know exactly what is on a page.

I've got a few ideas for future projects, but nothing is really catching my imagination at the moment so I'm struggling to find the motivation to really sink my teeth in.

Hence the pottering...

My Budget

, , ,

I needed a project to help me learn php & the result so far is: My Budget a site where you can record your income & outgoings. I started work on it in mid February & I've been extremely anal in using it to track every penny from the first of January onwards. I've got to the point where I've been using it without having to make any changes to the code for a number of weeks now so I am now going to declare it, "ready for use".

I'm sure a lot of people are feeling the pinch & I'm sure you've heard the phrase, "keep track of your budget" more than once. Up until last year I was totally oblivious about money, I had no idea about the cost of anything. I started keeping a track of my spending on a spreadsheet & found it really useful & I think it is a very worthwhile exercise. Just being aware of something is the first step to keeping it under control, you can't make an informed choice if you are not informed.

It's pretty simple so I haven't bothered with any instructions yet, but I will if anyone needs the help. Quite simply you record transactions: a date, an amount, notes if you want to & whether it is an income or an outgoing. Each transaction can be tagged (I've shamelessly duplicated the functionality of the tagging system used here at MyOpera), you can then view your total spending habits by month or by tag.

You can also set up regular transactions so you don't need to manually record the bills that are the same every month. I really struggled to come up with a form to easily specify the regularity of such payments but I believe I have come up with a pretty good solution.

It's been a fun project & it has certainly increased my respect for the Opera community devs who have a far more complex beast to deal with.

the United States of SVG

, , , ...

You can now test your knowledge of the United States of America!

This new page uses the exact same code that I used for the world countries page detailed in my last post. All I've done is change the data, the code for choosing random states, highlighting, keeping score etc. is pretty much identical.

Update 21/01/2007:

Thanks to help from Jeff we are now fully functional in IE+ASV as well!

We also have a much smaller Compressed svgz file of the game as well.

Find The Country

, , , ...

My sense of direction is infamous among my friends. However, recently I have been operating with increased international geographical awareness thanks to my very own Find the country game! (thanks to johnnysaucepn for the FireFox friendly code adjustment) After spending the time constructing & playing with it for probably less than 10 minutes I can now immediately picture in my mind the location of pretty much every country on the planet.

Update 21/01/2007:

Thanks to help from Jeff we are now fully functional in IE+ASV as well!

We also have a much smaller Compressed svgz file of the game as well.


For most people that's all you'll be interested in. The rest of this entry is extremely long & probably not that interesting. You have been warned.

Read more...

CSS: Completely Spartan Site

, , ,

Well, that took longer than expected. Tonight I have spent the evening tinkering away at my own custom stylesheet for this blog. It's been a long time since I've done any CSS hacking. You never know how much you don't know about something until you have to use it.

I was very confused about where all the 'tags' & 'Add images/files' boxes had gone had gone until I realised they shared the "nomarg" class which I had hidden in an attempt to get rid of that irritating edit title button.

As you may be able to see I have pretty much gutted everything out. What can I say? I like the minimalist approach. If anyone is interested my old calendar & sidebar which used to be on the right of the page are up for sale on ebay.

Tonight was also the first time in months that I have fired up FireFox & AAYYYEEEEEE!!! (er.. sorry IE) to check everything displays ok. Everything seems to be in order, but if you think something is missing it is probably because I've intentionally hidden it. If it was important let me know & I might un-hide it.

Notes on navigating around MyOpera

, ,

Overall I love the new community. It looks & feels fantastic, the extra functionality is superb. I'm also quite excited by the potential for all the extra features that I know are on the way. I'm sure the speed problems & server errors will disappear in time. I think the biggest (& easiest to fix) problem with the community is the navigation. There are several instances where links are missing (or included) which make navigation through the community difficult &/or confusing. What follows is my take on what needs to be done to improve the system to provide the most logical & intuitive interface. My notes focus primarily on the blog side of the community, I'll get to the forums another time.

Firstly though:

Pet hate

Please do away with the 'Edit Title' button completely. It looks really untidy & out of place floating in mid air. The logical place to edit a blog title is on the Blog settings page, which you can already do. Fix this & I'll never complain about anything ever again (not true).

First Page

When I first log in why am I taken to my account page first? The account page provides links to lots of pages where I can make changes to options which I don't need to change everythime I log in. It takes far too many clicks to complete the tasks I perform most frequently, yet the tasks I only need to look at once are all accessible in one click.

When I log in I want to go to a page with the following links:

Back to the page I just logged in from
Add new blog post
My Blog
A list of my friend's blogs
Main list of forums
A list of my favourite forums
Private Message system
Account

Account

This page needs an option to remove the link to the Get Started guide, once i've got started I don't need to start again.

Web Page Layout

Include links to:
customisation/web design forums - where user can get help with CSS from the community
Upload files -user may want to upload background images.

Blog Settings

Include links to:
Web Page Layout
Countdowns
Access Rights
Tags
Links

Remove these links from the Account page

Links

The link input screen is very but I'd like to be able to set the order of the categories as they appear on the links page & also the order with which the links appear in each category without having to delete & retype them.

The links page is ok but why the uneven two column layout? It just looks messy.

Forum settings

Include links to:
Ignored users
Friends
a control panel page like the old forum!!!

Ignored users

Fine & dandy

Group Memberships

Not sure about this yet, a group is simply a private forum. There is not enough distinction between the private forums & the public ones. I've not actually created or signed up to any groups to make use of this feature yet.

Edit Profile

Very comprehensive, clean, simple & self explanatory. I'm glad nothing is compulsory!

Spotlights

Fine & dandy again.

Countdowns

Fine & dandy again, but how about specifying who can see the countdowns like the whisper tag?

My Files

I'd like to be able to set up my own directories in addition to the standard /blog & /files

Access Rights

Fine & dandy

Tags

Include links to:
related tags (against each tag)
most popular tags

New Blog Post

Very cool!

When using the whisper tag I would like to be able to select usernames from my friends list or add all friends with one click (I can never remember whether lokutus_prime is capitalised or not). I'd also like to see my own whispers by default without having to list my own username.

Adding a hyperlink can also be a bit cumbersome, I like to drag a tab into the text area which automatically inserts the URL, but I can't drag a tab into a javascript prompt box. The prompt box requires you to know & manually type in the URL, which makes linking to complex URLS like forum posts for example a right pain. I'd like to be able to select the text of a URL & click a hyperlink button to add the correct tags around it rather than the current method.

More later I'm sure...

How I first came to Opera

, , ,

In 1999 I learnt html & built a website for the Tunbridge Wells Juggling Club <http://www.twjc.co.uk/> which I still maintain today. At the time it wasn't much, a dozen or so pages, some pretty (awful) pictures & that was about it.

By 2001 I was using a mixture of tables & CSS for layout & some javascript for effects. I thought I knew all I needed to know.

It was in this year that I was invited along to a business meeting for the British Juggling Convention 2002 which was to be held in Whitstable. The BJC is the second largest juggling event in the world behind the European Juggling Convention & is organised & run entirely by volunteers. At the meeting I volunteered to build a website. I was told that someone else had already mentioned that they would knock something up. I emailed the person in question to offer them my help & he replied saying that he was no longer available & he set me up with ftp access to the server.

I immediately launched into the task & built a small & simple website containing every scrap of information I had & uploaded it to the server. I sent an email to the event's main organiser to give it a once over. She emailed me back saying what a fantastic job I had done & was really pleased with how quickly I had got all the information tapped in :angel:

I posted to usenet & all the major juggling mailing lists & forums then sat back.

The next day I received a message from the guy who had originally planned to do the website:

"You haven't seen it in Netscape or Opera have you?"

In what?

That night I downloaded, Netscape 4.7 (kill, destroy, hate, vermin, putrid, die Netscape 4 die!!!!), Lynx (what a neat little browser) & Opera 5. When I went to download Opera I remember reading the words "The Fastest browser on earth!" Rubbish I thought, all browsers must be the same. They can only be as fast as your internet connection. I loaded up Opera & went to a couple of sites to get the feel of the thing. Then I loaded up Internet explorer resized both apps so they were sitting side by side next to each other. I typed in the same web address into each. I clicked go in IE & then in Opera. Opera rendered the site first by a clear second (try it yourself). Wow.

I took a look at my creation in my new toys.

What an eye opener.

All the images were broken in Netscape & Opera, although that was a pretty simple fix. I had to tweak the margins & a few other css declerations to make the layout work in Opera. It took me an age to get the site to work in Netscape 4, people kept emailing me saying that the images were obliterating the text but I couldn't workout the problem & no one I knew could tell me what was wrong either. In the end I managed to fix the problem by deleting all the line-height rules from the stylesheet. After that the site displayed as intended in IE, NN & Opera & was fully accessible in Lynx too.

This was my first major site, hundreds of people were visiting a day. & it was broken in about 20% of the browsers people were using. I was so embarassed.

After that I read up on the W3C standards & really managed to clean up my coding habits. It took me a few days to clean up the TWJC website & make that accessible too. I found that if I wrote to standards everything looked ok in IE & Opera but NN was still a major pain & really limited what I was trying to do.

I found myself using Lynx more & more, I just loved the way that I could browse the internet using 3 fingers on the arrow keys. Very fast too.

I stopped using lynx though as most of the sites of the day relied too much on images. What a shame. So I started giving Opera a serious test run. Within a couple of days I was hooked. What did it for me was the MDI. Nothing else at the time had this feature, I was so impressed by the innovation. I would often load up HTML/CSS how to pages in one window & my own experiments in another. It was so easy to read one page, write a bit of code then see what happened in the other. I also fell in love with alt + f3 - the first shortcut I ever learnt!

It was quite a while before I discovered the power of mouse gestures. This was around the same time Opera 6 was released & I registered it there & then. Now with Opera 7 I am still discovering features that make me think 'this is fantastic'. Yesterday I learnt that you can use fast forward to cycle through a directory of images without going back to the directory listing (thanks to <http://tntluoma.com/opera/lover/7/>. How cool is that!

Many people don't understand why which browser you use is so important. The internet is a very important part of my life. I use it everyday. Opera makes it easier & faster & I have so much more control over what happens than with any other browser. I am genuinely happier when using Opera than the other browsers.
November 2009
M T W T F S S
October 2009December 2009
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30