Project 6 Task 1 – Personal Portfolio Websites

Project 6, the final installment of our course, where hopefully we should now have some vague grasp of what we are doing. Well I think thats the plan. So inevitably the final project is based on producing a portfolio website for ourselves whilst working in a team (and remember folks, there is no ‘i’ in team!!). But before we get to the fun parts, I first of all have to deal with Task 1 which breaks down as follows:

Task 1: Research Portfolio Websites

A) Personal Portfolio Websites

I am to research and analyse a range of portfolio websites. These can be for graphic designers, web designers, photographers or anyone in the creative/design field.

B) Employment Opportunities

I am to research and report on the range of employment opportunities for web designers within the Brighton area. I must identify any local companies that I find.

I am then to investigate and report on the role of the freelancer in web design.

Task 1A) Personal Portfolio Website

So then, what better portfolio website to start with than my own. Please bear in mind this hasn’t been updated in terms of design for a good 6 years or so:

 Sler

Lets start at my home page. This is different from my original home page as about 4 years ago whilst living in Brazil I finally fulfilled one of my life ambitions and had a range of t-shirts made under my brand name Sler. To sell these I had to have a website built with a shopping cart facility (more on that later) so rather than have to redo my portfolio site to incorporate it I had a separate site built enabling both sites to be accessed from my home page (and from each individual site). My home page is very minimalist, I am a big fan of less is more and so kept the details down to a bare minimum. My Sler logo I love, kind of a gothic feel almost but by doing it in pink it makes for a much more modern feel. I have clearly marked the two different entry points into my site stating what they are, my illustration and my t-shirts. I also have a great piece of music playing on the home page, inspired from my time living in Brazil, I forget what the words mean now but it’s quite positive from what I remember, and it also works brilliantly in a loop. You have the option of turning off the sounds though with the megaphone icon at the top left, although this also turns off automatically when you enter the illustrator site as in my original site I had no on and off button built in for music (and I didn’t want to pay to get it added). My site is a little dated now in the sense that it is a Flash site, 100% flash. Looking back I wish I had had it built in HTML for longevity but back when I had this built Flash was the man (not Gordon) and I had no idea Apple would stop supporting it. Anyway, lets take a look inside, starting first with my illustrator section.

Upon clicking on the Illustrator section we are brought to the contents page. Here (as on every page) I have running along the bottom my contact details. I felt that too many sites had you clicking too many times to get to the information regarding contacts. After all it’s what you want people to do so make it accessible to them. For some reason my email link is looking lighter than the others, I have no idea why as it wasn’t a few months ago. Also each of my pages features my ‘Swoosh’ (sorry stole that word from Nike) which is a mark made by a marker pen. This was a kind of identity I came up with when I worked more with magic markers than how I work today. It just helps tie all the pages into the same theme. But anyway, I have every possible way of contacting me, even Skype. If I were doing this again today I would also add the obligatory Facebook and Twitter links. So my contents page consists of a Profile, Clients, Samples, Storyboard Artists and a link to my sister site for T-Sler. Lets go through these in order.

In the Profile section I basically have a little bit of information regarding myself and my background. Believe it or not some people are interested in things like that. I also have text links to all of the other sections from the body of the copy, as well as introducing a Home Button top right that takes you back to the contents page we looked at previously. Again I have all of my contact info located in the same location at the bottom of the page.

Next we have a client list, which if I do say myself, is pretty extensive and impressive. This is just a small fraction of the clients I have worked on over the last 8 years. I have pretty much worked for at least one big company from any area you could possibly think of ranging from clothing manufacturers to newspapers to banks to car manufacturers. I think its always good to show a client list, it helps install confidence with prospective clients.

Next we come to my Samples section, or my samples mosaic as I like to call it. I’m not entirely sure where I got the idea from for this layout but I just loved the idea of having hundreds of abstract little squares that left you intrigued as to what lay behind them. I love the randomness of the colours that come through. There are 144 images on each of my 5 samples pages (the sixth hasn’t got anything on it yet) which brings a total of 720 samples of my work. Thats a lot of work. I try and add another page of 144 every year and with each year the page number down the side increases. Its a time consuming process as i have to set each image into a template grid I have for the enlarged images then crop a little square out and save that down as the preview image. The guys who built my site are some guys I used to work with so they have devised a device that just lets me upload the images myself and they magically appear. One thing I guess I would change on this page is that the newer images go to the first page on not the 6th for example. This way it would reduce the number of clicks required to see my latest work. Lets take a look at how the page appears when you click on an image.

Here we can see an image that has been clicked on (this shows a yeti character I designed for Nokia). Now I have a couple of problems with this section of my site. The main one being that there is no ‘next’ or ‘previous’ button that lets you scroll through the enlarged images. As it stands you have to click on the close button that takes you back to the mosaic samples page and click on another square. This is an obvious flaw and one that I intend to remedy as soon as I have some spare cash. The other main problem I have is the size of the enlarged image. Its not big enough. Although this image looks great and its very clear, it is a very simple image. Lets take a look at some more detailed images.

Here we can see a more detailed sample. As you can see it really is a bit small. There is a great half tone pattern in the background of this image (which was done for a Suppliment for one of the Broadsheet Newspapers, I forget which one) which you can really see. Also for some reason my samples seem to sit a little low. There is a great big space above them that could have led to a slightly enlarged image. This might have killed two birds with one stone as it were.

The image above (for Nike Run London) is another example that could have done with being a bit bigger so you can see the details on the lamppost. With all the different galley options available nowadays with sliders etc I think for this project I can make a much more interesting gallery that functions in a much more practical way. As well as illustrating myself I also rep out various storyboard artists. So they have there own section (see below).

Here we have my storyboard artists section. Quite often when clients want to contract a storyboard artist to work for them they want to see samples of there work. Rather than people having to come to me  for samples I put together a downloadable pdf file (in both Hi and Low res) so clients can download them remotely and select which artist they want to use. I even colour coded the pdf icons (they roll over red when rolled over). Below shows a screen shot of what the pdf looks like when downloaded into your browser. I think its about 40 pages long but a great resource the client can download and keep on there desktop for future reference.

Finally we come to my sister site for t-shirts, T-Sler. Whilst not directly a portfolio website (although it could be argued that its showing some of my work just on t-shirts) I though I would just show you a couple of pages. The contents page is similar to my illustrator site it just has more options as this site is bigger, and uses the diamonds from the logo to act as bullet points. Note the link again to my illustrator site, but lets skip most of the sections and go to the interesting section, the t-shirts.

Here we can see the t-short section, there are a total of 9 designs (only 8 are visible here, the shirts scroll sideways) and each design has the option of linking to close up details on the shirt as well as a choice of sizes. once you have added what you want to your cart you can check out by viewing your shopping cart. Again this site is very clean looking with only the minimum amount of information on each page. Its just a little something different other than just have a normal portfolio site, why not a a walking portfolio! Well thats mu site done with, lets take a look at some other great portfolio sites.

Bless Design

Bless Design is a design company consisting of married couple Dan Broad and Mary Lam (two friends of mine). They are great designers and I have had the pleasure of working with several times in the past and what I love about there site is the sheer cleanness of it all. The design is minimalist to the extreme but it brought to life with great photography (shot by themselves). For example the photo on the homepage changes daily and is always beautifully shot and usually it has some sort of type reference. You also have the twitter link on the page and of course the option for subscribing. Let’s take a brief look at the various sections prior to the actual portfolio section.

In the About section we have a brief intro into what Bless is all about. Again not to heavy and can be read in a few seconds. Again the simple black and white colour scheme is just so crisp. Really like it.

The contact section again follows this really clean look with no fuss. all the company info is in there that anyone might require along with contact number and email addresses.

Testimonials has some great reviews for bless from some pretty heavy weight bods in the industry, from Guy Featherstone (another good friend of mine and Design Director at Wieden + Kennedy London) to heads of Art from both BBH and DDB London, two of the most successful advertising agencies of recent times. I think it will be a good idea to include a testimonial section on my new portfolio site. Something to consider when I start designing it.

Next we come to Bless’ Shop section, where they have some great Bless branded items. This is a really nice touch I have to say with a really cool variety of different items for sale. Here you can buy anything from a wooley hat to a bottle opener to a tea towel (I happen to have both the tea towels and the bottle opener, and the chopping board for that matter). The photography in these sections really is top class, clear and crisp with rich colours, and I love the sort of little stages they set up for them.

Above and below we can see some of the more detailed close up shots used for each item, I particularly like there own clothing labels, again all created by Bless. They Obviously have a shopping cart facility built into there site which is great.

Again we see some great staging in the photos’s, King Ken in the foreground (every designer has him) and the great alphabet poster in the background (I also have this on my wall at home, as well as the chopping board shown below).

Bless are also represented on Flickr (linkable through the home page). Above shows a great album they have that just has photos of typographical B’s (B for Bless geddit?). Its just another little aspect that shows how passionate they are about Typography and design in general. There are some great B’s on there!

In Bless’ work section they have some great work. Above you can see their Christmas tea towel designs ( I like the brief bit of info at the bottom including sizes etc). Below shows a great idea they did for a friends wedding invitation, I’m gathering the pair of them liked a drink!? Again the standard of photography is top notch.

I love the fact that they have included shots of there snowflake letterpress during the process of it being made and printed. The attention to detail is great, even down to the little winter wonderland scene featuring the finished card (see below). That particular shot is lit in a really dramatic way. Love it!

Here we have a couple of examples that show off Bless’ Illustrator skills. The Bear logo is brilliant and the cake below all adds to there list of skills that might entice clients in. They really do seem to cover all bases.

Again some more examples of their work. I just love the differences in styles they can work to. Shows great versatility.

Some great examples of  a CD cover created by Bless, and below some great shots of a book they produced.

Again a good idea for presenting the poster, rather than have just a flat jpg of the poster for example, they have shot Dan actually holding the poster up. Its the little touches like this that I think really makes this a great portfolio website. There are a lot of elements from this site that I would like to use in my new portfolio, from the testimonial section to the idea of staging your work and photographing it. Some great ideas starting to generate.

Siggi Eggertsson

Siggi Eggertsson is one of my favorite designers/illustrators. His work is just brilliant, so simple yet so complicated. Everything he draws is made up of circles, squares or triangles. Its kind of like pixel art but he has taken it to another dimension, curving off corners and such. It looks very simple but it is very time consuming to create images like this. I know, I have had to do it. The rewards are well worth it though. Siggi’s actual website is simple to the extreme. The text content on the home page (above) is kept to a bare minimum with the focus really being on the work (it looks like a giant patchwork quilt, much like his work). For such a good designer I was expecting his site to be a bit more designed but I get the impression its supposed to like this. Simple standard type and he’s letting the work do the talking.

Here we have his illustration section, which is pretty much exactly the same as the home page. Below I have an example of one of his images once clicked on to be enlarged. You can see the detail involved in each of the images. He uses great colours also in his illustrations, not what you might expect. The one thing I don’t like which I am not sure why it does it is that each image is surrounded by scroll bars. I’m not sure if this is just a mistake or a Safari problem or what exactly. Its a shame as it looks a bit pants.

The sample above is one of my favourites. A poster advertising a new album from a band I have never heard of. I just love the way that when you look at it from a distance it looks like a normal photo but when you get close you can see the patterns! Very Cool.

In his typography section he has some great type, again very simple but it just looks so cool. I particularly like his font entitled ‘Times New Siggi’, based on Times New Roman. The guy has a sense of humor also it would appear!

In the animation section there are 4 animations featured. One of which is a mad movie that just shows hundreds of examples of his work. A good idea when it comes to promoting yourself. His graphic design section below has some great logo design in it.

His exhibition section is pretty self explanatory. It shows what is my favorite of Siggi’s work. His famous quilt that he produced as his final piece as part of his degree. It contains over 10,000 pieces of material all stitched together. Its based on memories from his childhood. You can see it in more detail below, it really is quite special.

I absolutely love Siggi’s work, I do feel his site is a little basic though, whether it is supposed to be like this I don’t know as the work definitely shines through and isn’t overpowered by the look of the site. I do feel like it could have had a little more to it. I do like how on the home page you just have a mass of ‘patchwork squares’, a bit like on my websites samples pages. When you look at his work I have to wonder whether this is on purpose also. So to summerise a site featuring brilliant work, let down by a slightly feeble site design.

Serial Cut

This Serial Cut website has some really striking images, which I guess is what you would expect from a company describing themselves as ‘Imagemakers Since ’99’. They obviously specialize in high end computer generated images and the quality of the images is really something. What I particularly like is the way the image completely fills the screen. The logo and navigation all sit on top of the image but don’t obscure it. On certain images the logo and navigation gets somewhat lost as it stays the same colour throughout, I think they should have addressed this and tweaked the colour depending on what colour its sat on. But this is not a major gripe. I particularly like the About section (see below): 

This About section is a great example of an accordion and it works brilliantly. It looks slick, the colours work well. I like the way in the screen grab they have separated there clients into groups. Maybe this could be something I look at doing as I have worked for so many different companies it might make life easier if I break them down into certain criteria, such as Ad Agencies, Companies, Publishing and so on. This is a really great accordion, one of the most effective I have seen.

The above image is a good example of what I was saying about the navigation and text getting somewhat lost against the background. 

For me its all about the crispness and clarity of the images on this site that makes it stand out for me. They really are beautifully presented. Kind of the complete opposite of what I was saying regarding the images on my site. After all, its all about the work so I think its going to be vital that my images are as crisp as possible. 

Again another couple of examples of how the navigation gets lost a little on the images. 

In summary then a great site in terms of images and I love the accordion and even the navigation, the way it sits atop of the images, although I wish they had made it more legible. Like the idea of adding an accordion to my site and using their idea of splitting clients into categories. So a couple of useful gems I can use from this site.

Chuck U

This Chuck U site I thought looked really interesting at first glance. A pretty cool illustration on the home page, although you have to click again in order to get into the main site which nowadays people will soon find irritating (time is money after all). But I still had high hopes. 

Now I love this illustration and I like the fact that he has tried to incorporate the navigation as part of it but for me it is a little hard to read, also not sure what the point of the reflected navigation in the bottom right corner. The other really annoying thing I find with this site is the terribly distracting background. It sends my eyes funny and any time spent on this site I think would end up giving me a headache. 

Next I looked at the about section. I like the self portrait idea but the font for me doesn’t really work, it looks a bit clunky. Again the irritating back ground is present. I kind of think this site is trying a bit hard and for me there is a little bit to much going on, everything a little over thought and fussy.

Here we have the portfolio section, again the dodgy type is present and the background. Another issue I have with this site is that it takes so many clicks to get anywhere. To see one piece of work you have to click 4 times from the home page. Personally I think this is to many. Especially when you have to stare at that background. Below you can see how the samples are laid out. Again I find it all a little jumbled and fussy, just look at those arrows, far to much going on there. 

Again here we see more of the same in the arts section. I think the illustrations are great and are very intricate, they are just let down by there surroundings. The car wrap below is quite different, I like that, but if I see stripes again it will be to soon.

Maybe its just me and my love for all things minimal, but I think its time to go and look at some more sites along these lines. 

Yuna

Ahhhh here we are, back with the minimal vibe, much more like it. This I am Yuna website instantly grabbed my attention, it kind of reminds me of a Playstation control pad. I love the limited colours on a white background, it really pops. It does get a little distracting as when you roll over each shape as they jiggle around a bit and to be honest when I click on any shape I am not entirely sure where I have been taken to in terms of which section of the site I am now in. I find these fancy navigation things a little distracting. When people want to browse a portfolio in my opinion they want to do it quickly and efficiently. People tend to have very little time these days so everything has to run as smoothly and effectively. I am not sure that this site is as efficient as it could be.

I like the way that when you click on a specific area, for example ‘digital’ here a section appears in the middle of the page showing some great examples of work. All beautifully shot again and presented in an incredibly professional way. I am beginning to think I need to invest in a new camera, I don’t think mine will cut it.

Again we have some more examples of some great work, both books and video. I once did the illustrations for an Irish Lotto Ad, I’m wondering if its work tracking it down and adding a video/animation section to my portfolio. After all having learnt a bit of Flash on this course I would like to animate more of my illustrations. I have a lot of ideas now for my portfolio, I think I will look at one more site before moving on.

Veronika Goldberg

Just as I was calling it a day I came upon this website which I love. This site kind of has everything I like in a site and has executed it brilliantly. Clean and simple home page with a collection of great icons giving you an insight into the person. I like the fact that it just has her name at the top and a job title and the little quote is a nice touch. Her contact details are understated but feature on each page. The journal and about sections aren’t up and running yet but they are coming soon. Then comes the sexy bit….

When you click on the work section I absolutely love what happens. You get 4 sliders appear, each one has a different heading, Identity, Web, Old School Print and Packaging. Everything is done so simply but it all looks so slick (a bit like a lot of her work, just check out some of those logos, very nice!!). I definitely like the idea of including a slider into my site. I like the idea of having a different one for each section but all on the same page. I was reading an article on single page websites the other day and how they are all the rage at the moment. I wonder if I can combine the use of an accordion with a slider? That would be interesting? Again every thing is beautifully shot, I feel kind of embarrassed looking at the state of my old portfolio site. Definitely time for an upgrade. Now I have had a look at various folio sites, what conclusions can I draw?

Conclusion

Well that was an interesting experience. One thing is for sure, you have to have a damn slick and professional looking website these days in order for it to stand out. Everyone of the sites I have reviewed have had a massive amount of time spent on them. I am definitely looking to create a very minimal site, I am even thinking of going black and white with the only colour being the actual images. I think we have seen here with the Chuck U site that if somethings to fussy it loses its appeal very quickly. I want something that loads super quickly and while I would love to include a slider I’m a little concerned about load times. I definitely want to include an accordion for all of the text heavy areas, although I want to keep the text content on this site to a minimum. Lets face it, people rarely read it. As I mentioned previously I like the idea of having a single page website, with anchor points set up ready for the page to shoot down when you click on an appropriate section. I also want to shoot some quality photos of toys I have designed, any work that might be up or any brochures I might have produced. I love Bless’ ideas of setting little scenes for each shot, it makes it much more interesting. So all in all some great ideas to consider when I start designing my site. But first, what employment opportunities are out there these days for web designers?

Task 1B) Employment Opportunities

So now that we are fully fledged web designers what are our chances of actually making a living from our new found skills? Especially in these difficult economic times. The first thing you notice when you do a search for web designers in Brighton is the shear number of them. In fact, I think there is a serious surplus of buddy web designers in the Brighton area. One thing I have noticed though is that there are a lot of BAD web designers. When you see some of the atrocities  out there on the web it does make you wonder why some people even bother. What this means is that never more so has it been so important to promote yourself. So just what can we do to help ourselves find work?

Web design – How to find work

With there being so many web designers out there competition can be quite stiff but as long as you work hard at your marketing and networking activities there should always be bread on the table.

Like the majority of freelance market sectors the best source of new clients is existing clients so quite often the hardest times will be the early days so it is often a good idea to build up a small client base before making the leap into full time freelancing.

When you make new sites for clients ask if they would mind if you built a small ‘designed by’ link into their site so if visitors like the design it may be enough to prompt them to send an email or pick up the telephone.

With the amount of businesses now taking the opportunity of having a web site there is good justification in making sure you have a listing with the Yellow Pages or other local business directories. Unlike the Internet generation a lot of older business owners do still resort to ‘traditional’ methods for sourcing their web designer so do not apply all of your time and energy to online advertising and promotion.

As we have already discussed web design is a catch-all term that can apply to the huge amount of skills and understanding that make up the various disciplines required to build a website and this is where specialisation and networking can go hand in hand. Using your networking skills to make contact with other freelance web designers with skills in areas where you are weak can pay dividends. This not only means that work is completed faster and with a better end product for the client but also that there are two marketing heads bringing in new work and also larger projects could be considered by presenting a joint bid. There are many freelance co-ops and groups already in existence, this is an excellent way of working as long as all contributors are prepared to work to bring in new clients and promote the skills of the group.

Something I see mention quite regularly around Brighton is Wired Sussex (see screen grab below). Wired Sussex covers many different types of media and appears to have a rapidly expanding community. It covers everything from Jobs, to training, to current projects as well as news. It seems to be a good starting place for any new freelancer.

Below is another good example of a freelance collective. The Brighton Farm has a huge collection of different skilled professionals. I am liking the way its clearly labelled as to what different peoples skills are so its easy for someone to track down the right person for a job.

There are also many national and regional agencies as well as the usual online job sites that are often on the lookout for freelance or contract web designers. This is another way of life entirely, it is possible to pick up short and long term contracts and simply jump from job to job. Some good techniques are to work with your employment agency, find out who handles the contract work and make sure they get your CV and details. Once you have completed your first contract with them they are often forthcoming with more as long as your client facing skills, as well as your industry knowledge, are suitable.

One of the other major factors to consider is whether you want to freelance or work for one of the many Web Design Companies that are out there. Maybe one thing to think of is how the client would perceive the differences between working with a freelancer or with a Web Design Company. So what are the pros and cons?

Web Design Companies vs. Freelance Designers

Websites play a very important role in successfully running a business. The websites have now become the display picture for companies. Looking smart in the eyes of customers is what a company wants from its web existence. Whether the company is small or the business is crossing geographical boundaries, the importance of having an appealing website carries the same weight.

The Cost Factor

A small company can decide to choose a freelance web designer to design its website. It can save its budget because the requirements are very low, the activities are limited. The preference of the freelance designer may be because of the lower cost incurred and the lower rates of the web designer.

The Quality Factor

Can a company that is very conscious about its image among its customers and that knows the value of the loyal customers as its asset, compromise over quality?

The answer is obviously ‘NO’. Customers are the real profit of any company. So why to step back at the point of quality of your website?

A web designing firm offers its services though at rates higher than a freelance web designer but the standard of the website is much better. The web designing company provides all the necessary support in developing the design for your company website. In most of the cases the companies don’t know what they want in their web presence. Web designing firm gives you solution to all of your problems.  You have to tell them your mind and they will give you with the options. Go with the best one that you think will brighten your company’s picture. The web designing firm will never let you down with your expectations.

Professional Approach for more revenues:

Web designing firms are more professional in performing their tasks. You don’t have to worry about any change in design and to pay someone else for the said purpose because web designing firm takes the responsibility of all the matters involved in web designing.

Online marketing through websites needs a serious approach for the website design because you are doing your business through your website.  If it would appeal your clients then you can think of high revenues. This is possible only if you hire the services of a more professional web design firm. A freelance designer can’t do the best thing as the team of more expert and more experienced members of a web design firm.  You have to beat your competitors, you want to have a different look for your website, you want best color schemes of your site, and you want your website to be the most searched site over the search engines. All these demands are met only by getting the services of a web designing firm.

Avoiding risk in promotion strategy:

Lastly developing your company website is part of your online promotion strategy. Can you afford to put your strategy at risk by handling all the matters in the hand of a single individual instead of a whole company comprising of specialists in areas of designing and marketing. Of course not! Then decide quickly. The decision can make or break the image of your company. Be critical in your thinking.

So perhaps then if you want the opportunity to work on some quality projects rather than Dave’s Hair Salons websites and alike, your best option might be to try and gain employment with a Web Design company, Brighton has plenty to choose from.

Brighton Based Web Design Companies

Mark.Design

Mark.Design are more of an all round design agency rather than covering solely web design. They do however seem to have a great range of websites featured on there site. When looking for a web design companies on the web I noticed that there are few Design Agencies that specialize purely in web. Most (most of the good ones anyway) cover all aspects of design from Logo Design to print and brochure work to web design to direct mail. I suppose on one hand you might feel like this might mean that they do all of those things well rather than one of those things expertly? Its a tough balance to make, as a company that covers many bases might have people who can help you with other aspects of your business whereas a more specific place might offer you less in other areas but absolutely nail the task you initially give them. It all depends on where else you want to go. At the end of the day the only real way to know is by going to see these companies and find out what best suites your needs, and indeed if looking for employment, where produces the type of work you would be interested in producing and getting involved with.

BozBoz

BozBoz is another Design company although this one does look as though it is more Web based than anything else. You can link to all of this sites mentioned on my blog by clicking on there name heading. Rather than go through each website I will you the viewer take the time to go and have a look around the various sites. Most are much of a muchness it seems. Some are individuals some are web design companies with shocking websites, which I never quite understand. How do they expect people to use them? Scarily though, people do. Anyway feel free to browse.

Moo Cow Media

Brighton Web Design

Justin Wanstall

This is an example of a one man band guy. He looks like he knows his stuff and his site looks professional if not inspirational.

Zig Zag Design

Here we have an example of a pony looking site advertising there web design services. Why oh why would anyone feel drawn to use these guys? Unless they are cheap of course.

The Brighton Media Centre

Now the Brighton Media Centre I had to include as its a great place to try and track down various media companies, not necessarily web design companies although there are some here, but there is generally quite a nice vibe around the place so it’s probably worth while checking out some of the companies there as they might well be worth a visit with your portfolio.

Conclusion

So what are my conclusions regarding employment opportunities for us budding web designers in the Brighton area? Well I think the first thing that is pretty obvious is that competition is tough. There seems there are numerous web designers out there, who are probably fighting for a limited number of briefs. This means that now more than ever it is important that you have the best portfolio possible, both a hands on folder style portfolio and an on-line portfolio, as well as using as many different ways and opportunities to market yourself. The more of these community websites you register with the better. But for me the best way of marketing yourself is by word of mouth. Getting those first clients is always the hardest. Being a freelancer myself I know how important it is to maintain a good relationship with every client you ever work with. This is not always easy. In fact sometimes clients can leave you pulling your hair out (could explain a lot). But its worth it. I was fortunate to start out working in a large advertising agency, but as people moved on from that agency, now almost 10 years ago I still work with most of them at various occasions, and if they ever know of anyone looking for an illustrator they will always recommend me. Why is this? Well I like to think its because I have 2 simple rules that I always follow and if you stick to these you will not go wrong. so what are they?

1) Never miss a deadline.

2) You are only as good as your last job.

So what do I mean by these? Well the first is pretty self explanatory, there, in my opinion is no excuse for missing a deadline. When you take on a job, allow for unforeseen circumstances, add on an extra couple of days if you think it will help. Never agree to unrealistic time restraints. It will only make you look bad if you then can’t meet your deadline. One thing I have learned being a freelancer is that there are 24 hours in a day, a freelancers life is not 9 – 5 (at least none of the good ones). You would be amazed how much more work you get done when working out of hours. No phone call interruptions.I regularly work late into the evening, I kind of get a buzz from it, especially when you are working for a client who has agreed to pay you over time rates (If people want to hire me on a day rate I say fine, my day rate is from 9am – 6pm, but anything out of these times is extra (I charge time and a half from 6pm – 9pm and double time from 9pm – 9am). There is nothing better to urge you on through the night on those late night projects than the fact that you are getting paid by the hour. Its soon mounts up.

Your only as good as your last job? This I find is very true. It’s a cut throat world as a freelancer. You could work for someone 10 times but if on the 11th time you fcuk it up, they more than likely won’t use you again, at least for a while, at worst ever. I rep out storyboard artists as a side line and I always remember sending a guy in who had been doing work for them for years and on one pitch he drew some terrible storyboards. I’m not sure why by for whatever reason they were shocking. The client complained as basically it had left them up the creek and had to pay extra to have them re done at the last minute and requested that I never send them that artist again, which I didn’t. I also had to swallow the cost which wasn’t great. There are so many other people out there other than you do not get fooled into thinking you are indispensible, you are not. Plus you should be taking pride in your work anyway, you are going to have a pretty useless portfolio if your not enjoying what your doing.

I may be painting this pretty ominous outlook as life as a freelancer. So is it better to try and find a job at a Web Design Agency, or any agency for that matter? In my opinion I think this is a great way to start out. It might mean starting off on a shitty salary being the scanner boy as a junior in the studio, but you can learn so much from the people surrounding you. I was very lucky to have worked my way into the Campaign Magazines Agency of the Decades Design studio after having written a proposal to the studio head showing how they can save money by bringing storyboarding in house. The 3 main studio designers all had Firsts from St Martins and were top of there game yet all different (one is now head of Design for Wieden + Kennedy Europe, the other has his own design agency that has just done the rebranding of the Eurostar). The amount I learned from just being around these guys was immense. I have never been formally trained in any of the apps like Photoshop, Illustrator etc (apart from this web design course) I picked it all up from working with these guys. The other beauty of working with creative people like this is to increase your networking potential, it’s bollocks people saying its all about what you know, its all about who you know (and then a big dollop of what you know). So this would be my advice for someone starting out. Try and get in somewhere, squeeze every little bit of knowledge and contact you can out of the place and move on into the world of a freelancer. Chances are they will hire you back as a freelancer anyway only this time on freelancer wages (so much higher), I know thats what happened to me in my first year of freelancing. You do have to be patient when building clients, but trust me, there is nothing better than being your own boss!

Advertisement

Project 6 Task 2 – Professional Practice

The second part of this project is broken down into 4 main sections, which are:

1) As a team you are to design a showcase interface which will then incorporate all of your team members portfolio sites.

2) As a team you must produce a project management file.

3) Individually you are to design a portfolio site for yourself, to be included in the showcase.

4) Review the production process.

So we may as well start off at the beginning.

Initially our team consisted of 3 members, Me, Tom and May. Unfortunately due to some cop outs (he he) one team imploded meaning our team had a new member join it. David. This did however make our company name and logo somewhat redundant, as will become clear below.

1) Man Down Design

The name we had chosen for our team was Man Down Design, due to the fact that our team had only 3 team members and everyone else had 4. You see now what I mean about it being a bit redundant having a 4th member. It was to late to go back however as we had already begun on our logos etc for the team.

We had the idea of using an outline of a body as used when police mark up a ‘man down’ (geddit!?). We found a few examples (which feature on a moodboard later on) and I created a hand drawn font that we played with a bit until we got something we were happy with. We then tried lots of different colour versions until we found something we liked. Below you can see all of the different versions that we tried.

Once we were happy with a design we finalized it and made a couple of versions for different uses.

Final Logo Design

Here you can see our final design. We created a black on white version, a white on black version, a main version and also a web 2.0 version (might as well cover all bases). Below is the logo we decided on as a final Logo.

Showcase Ideas

Next we needed an idea for a showcase. We had a few team members away for the first week so me and tom tossed around a few ideas. You can see some of our initial doodles below for this (as well as some  of our logo ideas). We started leaning towards the idea of a sort of Stage Showcase Spectacular. Kind of like a cross between the Moulin Rouge and the Circus. We wanted it to look bright and vibrant so we started off by putting together a moodboard featuring different types of  stages. This can be seen below:

We also liked the whole look of the logo we found for the Moulin Rouge. The idea of having twinkling lights really appealed and we thought the thought of them twinkling away would give the site a really professional look. It also gave us an idea for having a set of lightbulb letters at the top of the page spelling out showcase. This meant we would have to go on the hunt around Brighton looking for the right types of lettering. A moodboard of some of the samples can be seen below:

Next we decided to tackle the moulin rouge style logo. We wanted to make the lights on it twinkle so decided the best way of doing it was to create an animated gif. I didnt know how to do this but a quick look on google soon showed me how. The initial artwork was created in illustrator and imported into Photoshop. Below you can see the results, but with and with out twinkles (this version is when we only had three people in our team).

The final version can be seen below with all 4 of our team members added as well as more frames of twinkle. 5 were used in all. Because this has been saved as a a gif the transparent background enables us to drop this image onto our stage background, which means the stage background isn’t restricted to 256 colours making the shot look better. Once this was done we had all of the elements ready to start creating our showcase home page.

The Stage Elements

We tried to gain access to various Theatres only to be refused so we needed to source some images online. We couldn’t find anything perfect though so it meant I had to comp several images together. Below you can see the original images that I started with.

This shot of the stage is exactly what we wanted, apart from the gold curtains etc on stage. This meant that we needed to find some rich red curtains to replace them with. Luckily we found them ok, see below:

Next we needed some gold ropes and tassles from which to hang our moulin rouge logo from. These ones I used can be seen below:

We also had the idea of including pictures of ourselves sitting in the audience that could be used to link to our individual portfolios. For this Tom took shots of us all. We needed to find somewhere that had the right sort of light so this it looked like we were being lit up from the stage. Phil’s office was the perfect place.

Now that we have all of the elements, below you can see what the comp looked like. I cut out all of the letters that we needed from our hundreds of photos, tweaked the colour and shapes and sizes of them all so they all worked together (we wanted them different but all with a similar feel). I extended the ropes and added highlight beams from the lights that will make it seem as though they are highlighting our main logo (that has yet to be shown here as that was added in Dreamweaver). I also had to adjust the seat positions in the audience so that we were sitting central to the stage. We also wanted it fading to black so there was no edge to our site which just makes it look more slick.

Next we needed to add the logo hovering on stage. This can be seen below:

I think this is looking great especially when you see the logo twinkling online. Our group home page was almost there. All that was required was to add a few finishing touches such as highlights and sounds effects when rolling over each of our backs of heads which would be used as the links to our individual portfolio sites. Below you can see a screen grab of what happens when a rollover occurs on each of our heads.

Here you can see the subtle glow that occurs when rolling over each of us. We also added some comedy sounds to add to the sense of fun with the site. There is also a fanfare of music that plays when a viewer initially arrives at the site. So basically that was our joint homepage completed. All we needed now was to link peoples individual sites to this one and we are away.

The final last touch was to add our little man down design logo into the bottom left corner (complete with donkey roll over for no apparent reason). I think it looks really quite smart. Now if I can only get my own portfolio site done to a similar standard I will be laughing.

Next we moved on to the Project Management file.

2) Project Management File

At the start of the project we split the duties for this project. These roughly broke down as follows:

Ben – Create the Showcase home page, most of the Photoshop and Illustrator work as well as building the Showcase home page in Dreamweaver. Also the creation of the Man Down Design Logo & Showcase logo.

Tom – All photography and image searches for Showcase home page as well as initial design ideas and logo ideas. Stealing of ideas from Georgio (undercover operative).

May – Helped with the creation of the animated gif for the Showcase site. Other general Photoshop helping.

David – Davids task was to create all of the Project management file. Any information he required was sent to him to collate, which worked well as thats the kind of thing he does in his day to day work.

So basically what I am saying is that should the project management file not be up to scratch…blame David.

I did do some initial costings though and a brief timing plan. These can be seen below:

Here we can see the costings. This was when we only had 3 people in the team though.

Here is our initial timing plan, and to be honest it has pretty much run like clockwork. tomorrow is week 6 and we (well me and Tom at least) have our sites ready to put together. I think the others if they don’t have time will at least put up a holding page for the time being. A well oil machine me thinks, and I’m not talking about David in the Gym!?

3) Individual Portfolio

Having trawled through the various portfolio sites (see part one) I had basically come up with an idea of what I wanted my site to look like and contain. Below lists the main items I wanted to include:

• Single Page Site (the scrolls down to the various sections)

• Minimalist Design

• About Section

• Web Portfolio

• Illustration Portfolio

• Client list broken down into sections

• Contact 

I had the idea spurned from one of the portfolio sites I looked at, of having the home page navigation as like a word search so that when you mouse over one of the words such as ‘web’ it becomes highlighted. Below are some of my initial sketches.

These sketches are made up of the various doodles for logo designs as well as the showcase and finally the personal portfolio. Due to work commitments it basically worked out that I had 1 day to build my personal site. nether the less I attempted it. Below you can see a screen grab of my initial workings.

it gives you the idea of the kind of look i was going for. Extreme minimal I like to call it! The plan was to use some sort of query code to get the cool scrolling effect I was after and use a new plug in I had just bought for RW called weaver pix that again works using query meaning you can get all of the cool effects from a flash site but it will work on an iphone and an ipad! When I came to build my site I had a few issues with the design. The main problem being that the font I intended to use was to light and got lost on my site. So instead I decided to use the next weight up and I think it was a good choice.

The next (and to be honest only) major head ache I had with this site was adding in the anchors to zoom down the page. I was having a nightmare until i found some snippets of code that with the help of Phil I managed to find out which bits were needed and which weren’t and as soon as one of his life saving screen casts showed the way it took 5 mins to do. It’s easy when you know how this website business. Below Are some screen shots of my final site. Considering I built it in a day I am pretty pleased with it. The only bit I think needs a tad more designing, purely because its a bit to simple is the web section. Glad I now know how to do anchors as this had been seriously annoying me and like I said before its so easy when you know how! Next comes the hard bit. Critically reviewing my role in this project.

Final Site

I got the idea for the kind of word search thing from another site I saw, this one was all flash and didn’t work very well but I could tell what he was trying to do it just needed making less fussy! My plan originally was to have random letters surrounding the important words but it worked quite nicely having the ‘web design and illustration’ running as the top two lines. Just uber clean with some nice clean icons linking to the various bits such as the usual facebook and twitter as well as a sound on and off icon that I didn’t get around to adding properly. Something for another time I think. The links along the top appear on every page and the links in the wordsearch also link to the various aspects of the page. My contact details are shown on every page to ensure there is no doubt in where or how to get hold of me.

The about page has a brief bit about my background and experience. I also did a quick illustration  which needs re looking at it was just something to fill the space quickly in the time I had. I think I would like a much more accomplished illustration site if I were ever to use this as a professional site, but at least the basics are there!

I wanted my clients to be broken down into groups as on one of the sites I had seen in my research. It just made sense to me. I couldn’t remember all of my clients so basically remembered as many as I could. Either way though with this shortened list of clients its still a pretty decent looking list!

Next we have my illustration section. This is a jQuery weaver pix slide show that is great, I used it on my wives site and its great as it gives you sexy flash style with no flash problems and anyone on iphones or ipads will not have any trouble. I also like the option of it displaying the name of the work so it gives the viewer an idea of the project that was being worked on. When I have more time I will use the space better to fill the width but I do like the fact you can click on the show and it will open up a high res image so perspective clients can see the detail on the image.

The web section needs a bit more styling in my opinion but it links to the various sites I have worked on thus far! I think its true I have a definite style, clean looking etc. I am loving how quickly I can now produce a website in RW. There will always be some bits that require a bit of learning on each project (like the anchors on this project) but the basics are there.

My contact section I have just left really simple seeing as my contacts have been on every page. A little bit of copy regarding commissions etc just to cover everything. Thats about it on my site design. Next I have to review my role on the production of this site!

4) Review of the Production Process

My main role in the team was probably organizer. Although this was actually made quite easy by the fact that during the first week it was only me and Tom there so it was quite easy to come up with some pretty solid ideas without to many cooks spoiling the broth as it were. We started by just brain storming but as soon as I heard the word showcase I had the idea pop into my head of a kind of elaborate cabaret like the Moulin Rouge or something very theatrical and above all a bit of fun. Its not very often we will get the chance to do whatever we want on something so we may as well make the most of it now. It was good as it was pretty obvious what each persons skills were in our team and people seemed happy to go along with their strengths! I had a vision that the ‘Showcase Stage’ would look very high end, rich colours and stuff like that. This obviously meant we needed some great photography which was right up toms alley. So I briefed him on the sort of stuff I thought we would need and basically he went and got it. We both went to shoot all of the lightbulb type (which I think came out great by the way), well Tom took the pics and I kept an eye out for pikies who might try and knick his tripod! We were lucky enough to find all of the letters that we needed.

Then in between then and the next class I created our man down logo and the initial Moulin Rouge Logo. We had drawn up a brief timing plan at this point but it was difficult to plan to much as we still hadn’t seen half of our team (in fact at this point David hadn’t even joined us yet as his team hadn’t imploded yet! That week in class we learned David was in our group and everyone was there which was great as we all had something to do. I showed May how to make an animated gif of our Moulin Rouge logo as I had done a quick test the week before but now we needed to make it using the final logo with all of our names on. While she did this Tom image searched all the stage images and curtain images we required as none of the theatres would let us in to shoot. He found a few great shots which meant with a bit of photoshoping they would be perfect. David started gathering some stuff for in the folder whilst I started to cut out of of the images we collectively chose for the lightbulb type.

By the time the type was all cut out Tom had sourced the other images and I began to photoshop the different elements together. There was quite a bit, you can see all of the different elements required earlier in this post but in the end we got there. At this point we hadn’t shot the backs of us but i could see they weren’t going to align well so I also had to photoshop the chairs at the front of the theatre so we would be sat centrally. Then as everyone was in we found a good light source and Tom set to shooting us. the lighting worked well I think and makes us look as those we are in the theatre. Then I cut out the people, and then came the nasty bit. Making us as rollovers was a bloody nightmare. Very fiddly but i think the subtle glow when you roll over them adds to the classy look we were going for with this. We also ended up looking for some sound effects to keep it light hearted although I am not sure may will be to happy with hers! ;0). That was basically the finishing touches to our site. Unfortunately due to working on the groups site for 2-3 weeks I got a bit behind in my own site design and typically work has just snowballed but I managed to build my site and finish this blog in the last two days! All that is left now is to go into class tomorrow and set up all 4 of our sites so they come off of our showcase site and then when I get home tomorrow evening I can upload the whole thing… hopefully!

I think if I am honest I probably did about 70% of the work for this actual showcase element of this, which is fine by me as the majority of it was photoshop work and basically I was able to do it in half of the time as the others purely because I work using this kind of stuff everyday. But I couldn’t have done it without the help of the others, Tom taking and sourcing images which took a long while to find good enough ones, May doing the labour intensive animated gif (her first ever one it might be said) and saving me the workload, and David doing the part of the project that nobody really wants to do so that we could concentrate on the rest. It was a hard slog, mainly due to work commitments which typically have all kicked off right at the wrong time for this project but we got there in the end.

I think this is it as far as blogging goes for me for a while then. I have really enjoyed this course, learned a lot, not only in Dreamweaver and Rapidweaver but also a few Photoshop gems that I never thought I would learn. Met some great people, many of whom I will stay in contact with so now the only question is what to study next! I have got the bug!

Toodle Pip!

••The End – – For Good••

Mobile Website

Today we made some jQuery Mobile websites. The Gallery below shows these different screens:

Project 5 – Final Hand-In

http://www.benhaslerdesigned.me/posebox

Task 2 – Producing a Web 2.0 Style Website

Right then now down to the fun stuff, creating a Web 2.0 style site. For this project I wanted to use an idea that I had a long time ago but have as yet had the knowledge and opportunity to put it together. An idea if you will that has yet to be planted in order for it to grow. The idea itself is not a particularly original idea as things such as this have appeared in the past but mainly in book form, and it was mainly due to the seemingly lack of websites that provide a really comprehensive version of what I am looking to create. What is it I hear you cry? Well in my day job I work as an illustrator. One of the things I find myself spending the most time doing is looking for reference. Good reference. More specifically good figure reference. There is nothing harder to draw without reference than people, its also one of the things that has so many different pose options. Just think for a second how specific a pose might need to be and then think about all of the different variables that can change in a pose, angle of shot, high, low, back, front and then think about all of the elements of the person that can move, arms, legs, fingers, head, the list is endless. So unless you take the shots yourself you are very unlikely to find the exact shot you require.

Thats where my new site comes in. ‘The Posebox’ (or after having watched the movie the Social Network) ‘Posebox’ (“It’s more snappy”) was initially an illustrators figure reference guide, that would have featured designated sections for each type of subject matter e.g. Males, Females, Children through to Teenagers, Hands, Characters and Situation poses. Much in the same way the old Fairburn System used to do it (more on the Fairburn System shortly). The brilliance with the Fairburn system was not only did it have a vast array of different poses, it had the same pose taken in 360 degrees! This obviously amounts to a huge amount of photography which is the main reason that I had never really undertaken this project. This 2.0 project though has given me a better idea of making this into a type of ‘web community’ for illustrators, artists, designers, basically anyone creative who will have the opportunity of uploading there own reference shots for all to use and share. Providing there is some sort of system for when you upload images that you have the opportunity  to clearly label them, for example, listing gender, angle, a general pose description etc (the more descriptive the better) then the easier the image will be to search for (as the site must surely have a search function). My aim or rather hope is that doing it this way would rapidly increase the content of the site.

First of all before going any further lets take a look at the afore mentioned Fairburn System as this will give a good idea of the kind of thing I am trying to create.

The Fairburn System

http://www.fairburnsystem.com/

The Fairburn System was developed in the 1970’s and was THE perfect tool found in every artists studio that could afford it (its possible for some of the Sets to still be purchased on-line at a cost of $189 per set (3 books in a set) but I have seen individual books for sale for £100 each on ebay. There were 9 books in total). There are only 2 main problems with the Fairburn System in todays day and age. Firstly all the photography is from the 70’s so the hair styles and clothing are 40 years out of day. Secondly copies of the book are pretty much impossible to get hold of. I had to get my copies from the British Library and take shots of each of the pages (very time consuming) to have an idea of what types of poses I would need. They are also not printing anymore copies so whats out there now is it, and people do tend to hold on to them. Like I said earlier they do come up sporadically on ebay but they are expensive and often have pages missing. Anyway having gone on about how wonderful they are I suppose I had better show you what all the fuss is about. Below are a few shots I took of the Covers of each book and a couple of sample shots from inside.

Set 1 Books 1-3 feature Male and Female Full Figure Shots, as well as Male & Female Situations & Poses.

Set 2 Books 1-3 feature Male and Female Head Shots, as well as Ethnic & Character Type Head Shots (not sure you would get away with calling something Ethnic these days?)

Set 3 Books 1-3 feature Male and Female Children Shots, as well as Children Situations & Poses. Note: Sourcing reference of children is a nightmare for an artist/illustrator unless you have kids of your own or friends or family who can help you. Surfing the net for pictures these days on the internet unfortunately now has somewhat dodgy undertones. A sad reflection on modern times.

You may have noticed how a few of the covers are different from each other, this gives you can idea on how difficult it is to track down a complete set of these books!

Below shows various shots featured within each of the books. Note the sheer variety of angles and poses. It must have taken forever to put these books together in the first place.

Some cracking haircuts there also eh!

I think Fairburn had this down, so I don’t want to change to much in terms of how they have divided up the 9 books. I think it works well. So basically I will have three main sections in my site, Male, Female and Children Poses, and then in each of those sections there will be sub-sections broken down into Faces & Heads, Figure poses, Hands and finally poses using props and situations. Initially I thought I would include other sections such as Sign-In, Contact, Help, Search and Subscribe. As I begin developing my site I may well expand on this but for the time being that seems like a good frame work. I would also need to develop a logo for my site. So lets look at that now:

Logo Ideas & Development:

Firstly I started to look at various box logo stimulus. I want the log to be clean as is the 2.0 way, and also iconic. Also what sort of thing can be associated with posing? below are some stimulus that got my mind thinking:

I am liking the way this box opens, the symmetry is really nice. Maybe I could have something bursting out of the box. Hmmm what could burst out of the box…..?

Maybe some sort of jack in a box? Could make a good animation for the home page (one of the elements that we have to include in the project).

Or maybe some sort of mannequin like this artists posing aid. The beauty of something like this is that almost immediately people will understand what site is all about. These sort of mannequin’s are great but they lack the sort of detail required for doing really detailed illustration work.

I’m not sure what but there is something in the simplicity that I love in the image above. It kind of reminds me of the sort of images and iconic graphics found on the Skype website (something I will go into more detail about later). Maybe if i can incorporate something like this into the logo or various buttons that would look cool?

Here are some examples of where a box has been incorporated into a logo already. 3 different takes on the same sort of thing. I love the culture box logo, it looks like a more finished off version of the photo I published earlier. Very clean and very clear. I like the blue and white contrasting on the recycle at work logo plus the clean angles, everything is drawn on the same angle which i like. The Media Box logo is a slightly different take in that it is enclosed within a box. This could also work nicely, although i kind of like the idea of something bursting out of the opening box.

Web 2.0 Style Logos

Here are some examples of web 2.0 style logos, which after all, is what i need to create:

I particularly like the look and feel of the Skype logo. Even down to the colour ways. Most of these Logos are a bit 2D, lets check out some supoer sexy web 2.0 3D Logos:

Just by adding even the subtlest bit of shading to give the logo that 3D look really make it stand out and look super cool and slick. I definitely think I will be using this look for my logo. With all of this stimulus its time to start creating my logo. Below is a scan showing some initial scribblings in my note book followed by a screen grab showing my workings and then my final logo design:

On this page you can see a few ideas I played with. Taking the box idea from the earlier stimulus I played with a few designs and different arrangements. Theres also a few button examples that I used in the site but more on them later. I had a look at trying something with a mannequin but I don’t think the dimensions don’t work and the logo wouldn’t have enough impact at small sizes. I ended up using a font similar to the font used in the Web 2.0 pages I mentioned earlier and used that as a stand alone ‘P’ popping out of the box. This gives me an icon that can be used with the Posebox text and on its own (perfect for a little favicon). All of the text in the Posebox logo is bespoke, based on the font Bauhaus 93, but there were certain letters and curves that I didn’t like to I redrew then in a more subtle and flowing manner. Below are the final versions of the logo:

Final Logo:

I have 2 versions of the logo, one landscape version and a portrait version thats more square. The Logo can also be used with just the box part of it on it’s own. I think when used on its own it will make a great element that can be animated for the flash movie I need to produce on the home page.

Site Map:

Next I had to plan the layout of my site by creating a sitemap. Below is my sketch of my intended site map. its a bet of a mess but hopfully you can work it out.  it shows that basically everything stems from the home page and then the sub sections of the site. Pretty simple when you get your head round it.

NOTE: I have also included below a screen grab of the built in site map on my site. It is actually hidden to the viewer but it sits there in the background hopefully enabling Google and other search engines to find and search the site more easily. Only the key areas are entered. Take a look below:

Next I need to develop a look and feel for the site.

Site Styling:

Before I started, it was important to look at some other web 2.0 sites and the elements they contained so that I can ‘borrow’ various elements from the sites to inspire mine. I will also look at there normal design elements, not just the 2.o ones:

Web 2.0 Styling:

1. Pixel Matrix Design

Josh Pyles (who designed this site) is a fantastic, disciplined designer. His latest iteration of Pixel Matrix is a stunner, and makes especially good use of color and a strong grid system. Browse over his portfolio and you’ll see that he carries this practice into his client work.

If you check out the “About” page (making note of the nice tab system in play), you can see that Josh has included a nice photo of his workspace.

Below this shot is a great balance of Web 2.0 styled fonts, which establish an extremely strong hierarchy of information. He keeps his own bio small and tucked into the sidebar, and balances the larger text of the content area with smaller, sophisticated type in the sidebar.

Traditional Aspects:

Great grid system.

Wonderful color theory

Strong hierarchy of information

Web 2.0 Enhancements:

Beautiful gradients.

Subtle details.

Large, highly legible font choices.

A great number of ways to stay connected.

Even the contact form has a nice implementation of rounded corners!

2. MuttInk

Lately texture seems to be the greatest thing since rounded corners, and though MuttInk’s site might not be classified as typical Web 2.0, one glance is all that’s required to know that Jeremy Holmes (the man behind the work) is an amazing designer and graphic artist.

An attention to detail, texture, and a strong identity places this as a personal fave.

Even though the days of overly-muted colors are somewhat behind us (which is a good thing, in my opinion), I’m still a fan of subtle, earthy tones that are complimented with bright accents, and MuttInk has pulled this off brilliantly.

The turquoise atop the beige really pops, and maintains the “drafting table” feel that permeates the site. And though the type is on the tiny side, and a bit tough to read in spots, it still looks great on the page.

Traditional Aspects:

• Extremely close attention to detail.
• Nice type (though perhaps too small).
• Great brand identity.
• Great use of space, particularly on the portfolio pages.

Web 2.0 Enhancements:

• Great use of texture.
• Big, professional images showcasing the work.
• Quick access to social linkage.

3. FeelWire

Another amazing example of great whitespace is Feelwire. Black type on white backgrounds, with great shades of gray in between, never seems to get old. Add a couple of brightly colored icons, and you have yourself a simple, yet effective site. It’s all about simplicity here (heck, they only have one page!).

The Web 2.0 styled icons serve as the centerpiece for this page, and they go a long way in holding the site together. They also prevent the site from being overrun with text, and give the user something to be curious about.

Upon rolling over these icons, I was really happy with what I found: A very simple hover status that gave me the information I was looking for, doing so with the ever-popular Web 2.0 “Speech Bubble”. A great touch.

Last thing: Though I like the red links, which also pop off of the page and interact well with the icons, I do think they should make the contact link a bit more noticeable. As of now it’s a bit too tucked into the content, and I really had to search for a way to get in touch with these talented developers. Just sayin’.

Traditional Aspects:

• Short, sweet, and to the point: a single page site.
• White space!
• Subtle, tasteful font choices.
• Nice, basic layout.

Web 2.0 Enhancements:

• The glossy icons pop off the page, in a good way.
• Really cool rollovers on the icons keep the site uncluttered, yet give you the information you need in a fun way.
• Nice avatars add a human element.

4. Cream Scoop

The first thing you’ll notice about Cream Scoop is the bold selection of colors used throughout the site. They’re not afraid to take the colors up a notch from the norm, and the result is as refreshing as it is different.

Though the colors are bold, there are also subtle blends of strong type and gradients that are peppered throughout the site. Notice how the background gradient brightens at the top, like the edge of a spotlight, to highlight the otherwise minimal navigation. The type is well organized and balanced, with a distinctly Web 2.0 feel.

Traditional Aspects:

• Bold selection of colors, yet a selection that works in surprisingly effective ways.
• Minimalist navigation that gets the job done.
• Great use of playful illustration.
• Layout is structured but fun.

Web 2.0 Enhancements:

• Fantastic use of a gradient in the background.
• Bright blue really grabs your attention and directs it to the important stuff.
• Cool use of avatars on the about page (how old are these guys?).
• Great fonts used throughout.

5. DSGN + DVLP

Again the overall black and white color scheme works for this site, and they accent this direction with some clean icons pulled right out of the Web 2.0 handbag.

The homepage stands on its own as a sort of splash page, and has a good mix of icons, strong layout, and even a bit of photography. All of these elements come together in a sophisticated way and manage to emit quite a bit of energy.

You’ll notice that the secondary pages use a separate, 3-column template to serve up the information. It’s all very much a minimalist design, but that’s not a bad thing.

Traditional Aspects:

• Black, white and gray offer a distinct feel.
• Good balance of type on the homepage.
• 3-column secondary page template allows a consistent flow of information once you navigate away from the homepage.

Web 2.0 Enhancements:

• Social media awareness is definitely in play.
• Glossy icons scattered throughout add needed color.
• Good mix of photography and icons.

Jumbo icons are featured on the secondary pages.

6. Paiko

Paiko, though simple, is one of my favorite sites on the list. It comes across as a split blend of traditional design staples and Web 2.0 enhancements: Good type of all sizes (including the very Web 2.0 mega-headlines), great whitespace, and of course the ever-important grid that holds it all together.

The choice of adding texture in the background really sets the site apart, and adds another layer to the already strong design; it is treated with care, and not overly used as it is in some sites. This texture, combined with the more sophisticated appeal of the site, goes a long way in strengthening Paiko’s identity.

Browse over to the portfolio page to see an example of great spacing and grid structure, not to mention some fun examples of well-cropped images.

Traditional Aspects:

• Simple, two-column grid structure with gutter space that gives it a nice airy feel. This structure is carried throughout the site, which gives it a very consistent flow.
• Crafty feel adds a nice touch, without being overbearing.
• Font variations and color are very sophisticated.

Web 2.0 Enhancements:

• Jumbo-text!
• The headline is huge and highly legible, and plays nicely against the smaller type below.
• Great images and layout on the portfolio page.
• Conservative use of texture adds to the overall identity.

7. Digital Mash

With Digital Mash, you can see that plenty of thought went into the items they wished to include in the site, or better yet, the items they chose to leave out.

Being able to cut back the fat is an important practice for any designer, and Digital Mash lays out the basics, and only the basics. Open the page and you’ll know within seconds what the author of the site is all about.

The smooth gradient of the background does a great job of presenting the content in a sophisticated manner. From the clean type, to the punchy graphic of the illustration, the site keeps it simple.

The best part has to be when you dig deeper into the site. Head to the work page and you’ll find a portfolio presented in an almost old-fashioned way; the individual pieces look as though they’re ready to be printed and bound into a leather attache case.

However, the sleek presentation, the dropshadows, and the small details (such as the slightly bent corners of each piece), give it all a contemporary slant. Combining the new and the old. Gotta love it.

Traditional Aspects:

• Trimmed away unnecessary elements.
• Vibrant colors on the homepage and in the header of the secondary pages add a vibrant accent to the gray background.
• Hierarchy of information is strong, and so is the general flow of the site.

Web 2.0 Enhancements:

• Amazing presentation of the portfolio images; dropshadows, upturned edges, and small details really bring this site to a higher standard.
• Nice gradient in the background really presents the information well.
• Large type and oversized imagery are friendly to the eyes.

Very cool navigation solution.

8. Rockatee

Well, it says “Functional Design” in the header, so it had better work, right? Luckily, this site does. It’s another example of how texture is creeping into the web design market and confirming the notion that we’re well into the high-speed era of surfing the web.

Something you might notice is that Rockatee has quite a few projects on display in the portfolio section, so a streamlined solution was definitely in order. They did so with a series of snapshots, which showcase the depth of their prolific portfolio. Do yourself a favor and check it out.

Another feature of note is the nice navigation. It’s well placed and makes the site a breeze to click through. They even help you along on the homepage with a nice big button that leads to the portfolio.

Traditional Aspects:

• Everything has an extremely solid feel.
• General layout of each page is strong.
• Color theory is well explored and implemented.
• Strong attention to detail.

Web 2.0 Enhancements:

• Fantastic navigation.
• Big buttons lead you to the important bits.
• Cool “snapshot” portfolio with great crops of the individual works.
• Site showcases the designers many side projects, but doesn’t let them get in the way of the central elements.

Great idea with the timeline on the “About” page.

9. Things That Are Brown

Another one of my personal favorites is Things That Are Brown. They pull off an extremely polished site that is an equal to (or better than) sites created by large agencies, yet they also give you an inside look at the people behind the scenes.

The about page contains great photography that, while professional enough, is also has a very homemade appeal. You can tell that the team took a trip outside, scouted a decent spot, and took a few snapshots with their own digital cameras.

A professional, yet accessible and friendly team is exactly the type of team I want to work with. These people are real.

This is one of those rare sites that seamlessly fuses strong design rules with modern tweaks. Their tagline, “Humbly Awesome,” is dead on.

Traditional Aspects:

• Nice color with great accents.
• Good use of artwork that integrates well.
• Solid and consistent throughout.

Web 2.0 Enhancements:

• Navigation is clean and easy to read.
• Nice buttons that don’t overdo the gloss.
• Photography is personal and adds a human touch to the site.
• The portfolio is clear and easy to navigate, with great presentation of the work.
• Headlines are large, yet sophisticated.

10. Andrew Bradshaw

This is perhaps one of the most sophisticated sites on the list. Andrew has a great way of meshing texture, type, buttons, and photography into a congealed package. He also keeps hierarchy in mind, accentuating the important aspects and minimizing the sections that may not be of interest to all users.

The navigation is a highlight, with varying colors appearing as you hover over the tabs; a very sleek touch.

Also of note is the textured header and the strong font choice used in his logo. Again, Andrew combines subtlety and accents to create a beautiful site that is thorough and compelling throughout.

Traditional Aspects:

• Overall appeal of clean sophistication.
• Good use of accent elements, both in color and with type.
• As usual, a strong grid system holds it together.
• Hierarchy is implemented well.

Web 2.0 Enhancements:

• A different take on buttons.
• Brilliant use of photography and image presentation.
• Awesome details in the navigation.

Skype:

Having mentioned that I liked the Skype logo earlier I thought I would take a look at the design of the rest of there site. Below is a screen grab of the Skype homepage:

This is the current Skype home page. It has actually changed a bit from when I last looked at it but I still love it. For me its the perfect example of how a 2.0 website should look. striking, high contrast colours, that have a couple of main colours with some great highlight button colours (see the pinks and fluro greens). All of the different sections are grouped with some great icons that clearly show what is available in that section. I like the access to sign in and search being on the home page, something I think my site will benefit from. I love this colours scheme also, it really works and it was something I considered when designing my logo.

I also happened to have a screen grab of the old Skype homepage. Not a lot has changed really but I like the navigation seen here and feel it could work well for my site. I’m thinking I could have my primary navigation how they have theres (where it says Download, Use Skype, Business, Shop and Account) and when you click on the section you require the secondary navigation could appear like the Home, Get connected, Features, Mobile, Prices, Share and All. I like the idea of creating some cool buttons to use for my site. Not for everything but when used sparingly in the right areas they will create a good 2.0 feel. Below you can see some of my initial sketches and scamps of various layout considerations (there are also a few notes from later on in the project when I was working out exactly what I needed for the finishing touches):

Below is a screen grab of my first attempt at a layout for my home page:

This initial layout seems to be missing something. I am not happy with the font used for the main buttons. I also think the secondary navigation needs to be in a different font to distinguish it more clearly. I have also been thinking that in order to make this site successful it needs to have the option for users to upload there own poses, and of course them to download poses they require. In order to do this I need to include an Upload section. My second attempt at a site design is shown below with my new improvements:

This version is working much better although I have forgotten I need to include a flash movie on the home page as per the brief. Also I secondary navigation is currently fading a little into the background. I think it needs to be made to pop a little. Its also worth mentioning that my primary navigation shown in this screen grab has all of the items selected. Below is my third attempt at a homepage layout.

Here you can see my final layout for the home page. I have added a flash movie (more on that shortly) as well as all the usual links to Facebook, Twitter, and also a Blog (well it is a web 2.0 site). I have also added links in the text that will link to the various sections as well as changing the fonts on the main navigation. The blue tabs will only appear on mouseover and so you can tell where you are on the site I plan to have a highlighted blue text for the section your in. I am liking this layout. I think its looking very 2.0. Now my design is set, I need to start planning the elements required. Starting with the main additional element, the flash movie on the home page.

Flash Home Page Movie:

Now I have never used Flash before but its something I have always wanted to learn. This is the perfect opportunity. Having worked out the size of the area I wanted to insert my movie into (204px x 231px) I sketched out a quick storyboard to give me an idea of how I wanted the animation to flow. My sketch is below (ignore my checklist of things to tweak on the site):

First I had to create the different frames in illustrator (shown below). I needed to create them on layers one on top of each other so that each of the frames was exactly on top of each other so the animation was smooth and not jerky. 

You can see the edge of the page which marks the size of the animation frame that I wanted to use. The bits poking out of the top are the frames where the P flies off out of the frame. From Illustrator I then exported the layered file into Photoshop so that I could save each layer down as a jpg ready to be imported into my flash movie. Each frame needed to be exactly the same size.

Below I have included each individual frame that was required for the intro sequence.

Next I took it into Flash and added some sound effects. Below is a screen grab of my Flash desktop. You can see each element on the different layers, including the sound effects and the motion tweens:

You will have to wait to see the finished effect on my website but I have to say I really enjoyed putting it together. I think with more time I would have added more steps in the animation to make it smoother and I am not sure why the tweens look a little blurry. Maybe I need to make them myself frame by frame to make them look better. Again something I can tackle with more time. Now its time to figure out what other elements I need to complete the site.

Additional Elements:

Below is a sketch (and when I say sketch its more like a page of scribbles and notes) with all of my workings out etc that I use to figure out the site, sizes etc and elements that I will need.

You can see here where I figured out the size of the various elements on the site, from the tabs to the video area to the actual main content area on the site. I also made notes on the colour breakdowns on various sections of the site. Below is a close up of my upload and download button ideas as well as an example of the 3 different versions of each tab that was required for each of the buttons.

Button colour variants

Home Static

Home Mouseover

Home Actual

Each button needed 3 versions. One for when its static, one when the mouse is rolled over the button and one for when you are on an actual page so that its different from the other buttons on the page. That pretty much covers it in terms of elements required to put my site together. There will of course be some Contact forms that need to be created and a Blog and a few gallery/slider elements but these will be done using plug-ins in Rapidweaver. Talking of Rapidweaver, I thought I would attempt this project using Rapidweaver rather than Dreamweaver. Partly just to give it a go and partly because I have heard its much more user friendly. So what did I think of it?

Rapidweaver vs Dreamweaver:

Well what can I say really, Rapidweaver is a wet dream to the nightmare that is Dreamweaver! In my opinion in terms of interface and usability Rapidweaver is everything that Dreamweaver isn’t. Its simple, straightforward, intuitive. I feel like I have accomplished more in 2 days learning Rapidweaver than I have in 2 months with Dreamweaver. There are a couple of things at base level are a tad limited, mainly with editing specific elements of things such as form text and colour but from the more comfortable you get with RW the more you realise that you can actually get into the code if need be and tweak it so its exactly what you are looking for. I love also the fact you can bolt on the various elements that you might need. To be fair the initial set up cost is quite expensive. Just to build this site I think it has cost me £200 or there abouts. But to be honest its money well spent. I feel confident now that should someone ask me to build them a site I could do it tomorrow and it would both look and work great. Don’t get me wrong, I intend to keep trying with Dreamweaver but I can tell that once this course is finished pretty much everything I build in future will be done in RW. One great help is the forum available to you. Pretty much most of my question I asked on there were answered in 20 mins. You don’t have that kind of support with DW. RW just has that Mac feel about it (its only available on Macs) whereas DW looks and works like a PC to me. Let the Mac vs PC War continue!

Final Site Development:

Now I am ready to start building my final site. I have planned out the layout. I have planned out the elements required, all I have to do know is build it. To do this I am using a plug-in for Rapidweaver called Blocksbox. This enables you to build a site from scratch (as a lot of RW sites are build using themes that already exist). Like I mentioned earlier RW is all about the plug-ins. if you can’t find a way to do something you just download a plug-in that can. When starting out I didn’t havea clue what plug-ins would be required. But by the end I had amassed a small army of plug-ins that cost a small fortune (any change of getting a refund from the college? Thought not) but at least it’s a one time layout cost and what it does mean is that gradually you will build a great collection of plug-ins. So as well as using Blocksbox as my main theme I also used the following plug-ins. Blocks, Coverflow, Formloom 2, PlusKit, Rapd FLV, Sitemap Plus and Stacks. In the end I didn’t end up using them all, for example Formloon 2 after buying it it turned out it wasn’t compatible with using Blocks (which is a shame as it produces to great HTML forms. It is however compatible with Stacks if you use a work around so maybe thats one for next time). I also never ended up using Pluskit as that is for adding pages into themes other than Blocksbox as Blocksbox has its own method. I also in the end didn’t use Stacks either but from what I have been reading Stacks is kind of taking over from Blocks and has many more compatible plug-ins being developed for it. Additionally I used the RW built in Contact Form pages and the built in Blog page. So then below I have screen grabs of each of my pages on my site. Below each one I will explain the problems that I came up against when creating each page as well as what Plug-Ins I used.

Here we have my finished home page, featuring my flash movie. The basic framework of this page was pretty straight forward to put together. For the background I used a thin strip that was repeated to keep the load time down to a minimum. I just used a classic font helvetica for the main body copy, its simple and clean and most importantly web safe. I added mouseover buttons for the primary navigation and all the usual social networking links to Facebook & Twitter. Linking to the Blog is done through the little Blog icon in the footer. I have the first of my secondary navigation located top right which links to the sign in page, the upload page as well as the contact, help and search pages. The primary navigation consists of the 5 main features needed to attract users. Obviously the home page, then the 3 main sub sections of posing reference, male, female and children as well as a subscribe section (as after all without members the site is pretty useless). I was toying with the idea of having 3 icons arranged along the bottom where the main copy is that could also link to the 3 main pose sections (much like the icons featured in the Skype home page) but because on the brief we are tasked with including the flash movie I felt it would end up a little to cluttered which goes against the whole Web 2.0 look.

Talking of the Flash movie this was the main issue I had with this page. Not actually creating the movie, that was pretty easy, but getting it imported into the page was a nightmare. I found a great plug-in called Rapd FLV which works with blocks and lets you import Flash FLV files into a blocks page. Great I thought, how hard can it be to create a FLV file from a SWF file? As it turns out pretty difficult. An FLV file is basically a flash video file, like what is used on You Tube. Annoyingly Flash doesn’t let you export as a FLV, you have to find a converter that can do it. I ended up downloading 3 different ones, Flash Video Converter, Xilisoft Video Converter Platinum (which ended up costing me £40) and Elmedia Player. Now all of these claimed to be able to convert a SWF file to a FLV file, but they don’t. For some reason, despite on there demo’s it working perfectly, they wouldn’t import SWF files properly. In the end after much banging my head against the wall I ended up exporting a .mov file from flash of my movie, importing that into the Xilisoft Converter, and then converting that into a FLV file. even that took about ten goes to work. Thats one thing that seems to drive me insane with web design, you do the same thing exactly and it seems to be hit and miss whether it works or not. But anyway after one frustrating afternoon and another not so frustrating morning (ie it worked) I had my FLV file all ready to be imported. This worked great as I had made the movie size to fit the space exactly, the only problem I then came across was a small bar running along the bottom of the FLV window. I managed to get rid of this by going into the CSS on the Rapd FLV page and changing the value to zero of the controls bar. Low and behold it worked, I must admit I was quite surprised!

So a steep and expensive learning curve on the importing of flash into my home page. Thankfully I think it works great. Like I mentioned earlier I would have liked to add some more frames into the animation to make it smoother but that is for another day! Just one thing to mention, should the sound effects or movement of the flah movie start to drive you insane, all you have to do is click on the movie and it stops, click again and it starts. The screen shot below shows this:

Screen shot showing the paused Flash video

From there we then navigate through to the first of the main posing areas. We will start in the Male section on the male home page. The first thing you notice when you click on the Male section is that the secondary navigation for these sections then appears. I have used a CSS3 rollover mode for these which kind of gives you a fade from the static colour to the mouseover colour (although not in Firefox and good old Internet Explorer) which I think works nicely. This CSS3 rollover is also used on the navigation to the top of the page. The other main thing of note on this page is the Cover flow mini gallery. This just shows you one sample image from each of the 4 subsections in the male pose section, ie Heads & Faces, Figures, Hands and Props & Situations. This was for 2 reasons, to help give the viewer an idea of the sorts of resource available to them and purely for the fact that I wanted to include some sort of slider or fancy gallery. I think the gallery works well with the look and feel of the site. From here we can then enter the more specific areas of the Posebox website.

Below is a screen grab from the Male Faces & Heads section, here you have the option of clicking on one of the specific age ranges and from there you will be taken to reference photos of heads of that age range. You can also look for men with specific features such as glasses or beards for example. As at the moment I don’t have any of the reference shot ready to upload, none of the links to the various sections are available. This is something that will come when I actually come to realise this project for real.

From there we enter the Male Figures section. Here in a similar way to the Heads & Faces section we have a list of full body shots in various poses. Whether it be standing, walking, running there are plenty of options so I’m sure people will be able to find exactly what they need.

Next we move to the hand section which does exactly what it says on the tin, provides male hand shots in various poses, whether it be clapping, preying or so on, there will eventually be a great library of shots. Hands are notoriously hard to draw well so this section will be very useful.

Finally we come to the Male Props & Situation section. This again does as it sounds and will contain shots of men using items such as telephones, laptops or in the supermarket with a basket for example. Very useful when you might not have to hand the certain props you need. Thats the end of the Male section. Next we move to the female section.

The Female Home Page section of the site is exactly the same as the Male section but obviously features females. Everything here is exactly the same as the the male section (except the pics are of ladies) so there isn’t really a great deal more to add here.

The Female Heads & Faces section below is much the same as the male section but with a few gender specific options such as ponytails etc.

The same with the Figures section, pretty much the same as the Male section with a few items specific for women.

Female hands are much more delicate than male hands (well most are) hence they have there own section shown below.

Again Female Props &  Situations is similar to the male section but with a few different gender related options, such as shaving your legs etc.

Next we enter the Children section. Reference of children is notoriously hard to find for a number of reasons. Firstly and rather unfortunately in this day and age searching the internet for pictures of children is somewhat dodgy and your may end up being flagged by the internet Police. Plus people today are more worried about putting images of there children on the internet for the very reason that there are so many weirdo’s out there, especially in our class, oh, sorry  i mean on the internet. So unless you are lucky enough to have friends or family who have kids who don’t mind you using them as a posing machine then it can be very hard to source reference of children. I dread any job involving them. The other thing of course is that children change so quickly and have a completely different body shape to adults, much larger heads in comparison to there bodies for example. Babies and Toddlers even more so, especially things like there hands and feet. There may be some sort of legal issues regarding having a hugh database of images of children which would be something I would have to look at should this site ever go properly live.

Anyway from there we can enter the same 3 sections found in both the male and female pages. The Heads & Faces section has a much more condensed age range than the adult sections as as they are growing children change so quickly. The other sections you can see also carry specific options only related to the children section. Thats our 3 main content sections covered. Now we move into the secondary areas of the site, starting with the Subscribe section.

Below we can see the first of my form pages in the Subscribe section. I have to say I was a bit disappointed with the limitations in the basic contact form pages in Rapidweaver. There was no easy way of tweaking the simplest things such as the size and colour of the text of the field headings. Apparently this can be done by getting into the CSS of the contact pages. At the time of writing I have found the CSS pages of the forms but only after exporting. I am now on the hunt to find out how to do it before exporting. I did download a special form plug-in called form loom 2 which makes some great forms with HTML 5 style animations and great buttons but unfortunately it isn’t compatible with Blocks so I will have to wait to use that another day. Anyway it was still possible to produce a decent looking form very easily and you can tweak the background form field colour easily enough so at least thats something.

Here we have the option for users to subscribe, where they have to fill in there name, e-mail, select an occupation from the list (Artist, Illustrator etc) and then the type of subscription they would like (1 month trial, 6 months, a year etc). Then you have the register buttons or reset to clear the form. At the moment these forms are all set to be sent to my email, which thankfully all works. Now lets continue to some of the remaining pages.

Here we have the sign in page which is where you can sign in after you have been registered. Again very simple, just 2 fields, name and password and then the forgotten password button and the enter Posebox button. Obviously if this were a live site it would need some kind of database system behind it to store not only all of the user details but also the actual reference images.

Here we have a contact page, much the same as the other forms but including a few extra fields. I have kept the colour scheme of all of the forms consistent throughout the whole site.

Next we come to the Upload (and Download) section. This is actually a key area of the site as this is where potentially users can start to upload there own reference shots. They obviously have the option of downloading any saved poses that they require, kind of like a shopping basket of poses. This page I enjoyed creating as it gave me a chance to create some cool 2.0 style buttons. The idea being that they are as clickable and cool looking as possible. I created them in the same vein as the main Posebox logo, giving them that 3D metallic sheen look to them. I also like how they are both similar but its obvious what each one is for (not just because of the text on there) but the directional arrows are really clear. I had a play with trying some different colours for the arrows but it didn’t look quite right. I’m pleased with how these look though. Again these don’t actually work as yet but if the site was real it would have a the option enabled and a whole interface designed to take the user through the upload process. Lets not forget it the detail provided at this stage that will enable the search functions to work properly.

Below we have a pretty standard help page where users can send an email should they come upon a problem. They have space to choose which department they want the email to go to and space to write details of what there query is.

The search facility will eventually become one of the main tools featured in the site. The aim is for people uploading there images to give as much detail and as many keywords so that the search database can find as many different and in some cases specific poses required. Here you have pull down menus featuring gender, age, pose type (figures hands etc) and any additional info such as glasses or hats. This will save the user time when it comes to looking for a specific pose for a job. A great tool.

Last but not least we have the Posebox Blog. One of the big features of web 2.0 sites is the ability to interact with its users so I decided  to added a blog that users can sign up to via an RSS feed. That way whenever I send an update or a post for example they will get it sent to the RSS feeds in there mailbox. I had a few issues with blog. Initially I had it set so that the content was just a preview and you had to click on the read more section to open the remainder of the content. However for some reason that I nor the RW forums have been able to fathom upon clicking the link it opened at the top of the screen in completely the wrong place. I also had an issue with my page being set quite small, as soon as i had a few blog entries it would start going off at the bottom of the page. In the end to get around both of these problems I basically took off the read more option so the whole message is revealed and added the option of scroll bars that appear only when needed on the blog so when feeds get to large you can just scroll down to them. Not the sexiest solution but a solution none the less. With more time I would have tried to find a more pleasing solution like making this one page different from the rest so that it can scroll down the whole page as it grows. Again I would rather more control over things like the Blog heading colours but I’d imagine this is possible in a similar way to the forms. Its just a case of getting in there to have a look. So that ends the tour of my site. So what conclusions can I draw from this project?

Conclusion:

Well I really enjoyed working on this project. I think that is partly because I was able to avoid Dreamweaver and build it in Rapidweaver. I actually feel like I am getting somewhere and feel confident I can now produce websites that work with no real help (apart from forums of course). Phil was a great help during this project with some particularly helpful screencasts but once you get the basics you can find a lot out yourself. I’m looking forward to getting involved more intensely into the inner workings of RW as I’m sure with the time you can find ways of producing pretty much anything you want. The basic shell of this site (which has about 25 pages I think) only took me 2 days to build having never used this application before in my life. It’s just so much easier to pick up than DW. That being said I still want to perceiver with DW as I’m sure once it clicks in your head it will be ok to use. But for speed and ease of use it’s RW all the way for me. Its just so much more like what I am used to working with on a Mac.

In terms of do I think I have fulfilled the brief in terms of creating a Web 2.0 Style site/community, I would have to say yes. The site has all of the characteristics of a 2.0 site from the 3D effect logo, to the clean minimal look and feel, it features slideshows, blogs, uploads and downloads, RSS feeds the works. I have kept the interface as simple as possible, I want it just to appear as straightforward as possible so that it doesn’t distract from what its there for. Look at my example of Flickr in the first part of this project, thats a really clean looking site that is basically a large database of photos like Posebox will be and that is as non fussy as they come. I really enjoyed using Flash for the first time, something I have been meaning to do for years, just a shame its on its way out nowadays! Flash is definitely a program I will use again.

I have also tested this site on all 4 of the main browsers in use today. Safari and Chrome produced the best results with everything looking exactly as it should with all the the CSS3 rollovers working with the fade. Firefox worked completely also with everything working ok apart from the CSS3 rollovers so that was ok although I was surprised Firefox didn’t support these as normally its one of the better ones. That just leaves our old friend Internet Explorer. What a piece of junk this browser is, why do people even bother with it? it cant support even the most basic of things. For a start none of the Flash plug-ins worked. No idea why seeing as I have the latest version installed on my machine. Maybe it needs to be installed directly into the browser? Then a few of the little PNG images of the Facebook Icons didnt show. I don’t understand why some work on some pages and some work on others. Highly confusing! My view is that any fool still crazy enough to still be using IE is not the kind of person I want visiting my site anyway. They are more than likely a PC user and they want there heads reading anyway. Not that I am a biased Mac user by the way! ;0)

Posebox has always been intended to be my long term project that I would work on in my spare time as I have thousands of reference photos that I have built up over the last 10 years. At least now I have made a significant start on it. This project also gave me the idea of having the option for viewers to upload there own images. This process alone will help reduce the massive workload required to get the sort of numbers of images required to make this work as a site. I really look forward not to the point where I can actually take this further and get a database builder to create me a working database so I can start the upload process. It is going to be a long process to start with but I’m hoping that it will be like a rolling stone, gathering momentum as it goes. Roll on the next project (no pun intended).

•The End•

The History of Sy-Fy

I know I know its not spelt like that but if its good enough for the SyFy Channel its good enough for me!

Saw this illustration the other day representing the history of Sy Fy. Not entirely sure how easily it reads but factually someone obviously had a lot of time on there hands!

Enjoy Sy Fy Geeks!

 

Task 1 – The Web 2.0 Phenomenon

For The first part of this project we were tasked with researching and analysing one of the following:

A) The Web 2.0 Phenomenon

1) What is Web 2.0? Look at and describe in a minimum of 500 words an illustrated account of the design and technical properties of Web 2.0.

2) Choose one Web 2.0 Site and describe its appearance and functionality; ie its online identity.

B) Mobile technologies and the Web

1) Mobile Websites (not apps) have become more popular than ever. Describe at least 2 platforms for creating a mobile website, eg online or through framework like jquery mobile and what usability and design considerations should be taken into account when designing sites for mobiles.

2) Research and analyse at least one mobile website and describe how it differs from its usual formatted version.

I think I will firstly look in detail at Web 2.0 before later on having a brief look at the whole mobile technology thing!

The Web 2.0 Phenomenon

Many people have heard the term web 2.0 but do you actually know what web 2.0 means? Let me try to explain. In my opinion, web2.0 is a revolutionary concept; it’s the next generation of Internet allowing web users to take active part to the development of a webpage’s content and history. Using sophisticated dynamic applications a website can do some really cool things! Web 2.0 gives web users the ability and the freedom to do what they want, enhance and control their experience. Web 2.0 websites are not just static or dynamic web pages. They are web-based applications that you can use anywhere.

There are thousands of developers working on web 2.0 websites as we speak. Many will say that web 2.0 is another Internet trend that will go away in a few months. But web 2.0 is here to stay and there are so many reasons for that. The most important reason is that web 2.0 technologies allows a website to connect with millions of users and makes the Internet a really cool place to be. It’s not a coincidence that very well-known websites like YouTube.com or Myspace.com are implementing this exact web 2.0 concept to reach users and succeed with their goals. Should I remind you that YouTube owners recently sold their company for over 2 billion dollars to Google? Should I mention that MySpace.com has become one of the top-5 most popular websites in the entire web?

YouTube Home page as mentioned in text

MySpace Home page as mentioned in text (note the clean 2.0 design)

How about Social Bookmarking websites like Digg.com or Furi.com? Why have they’ve become so amazingly popular? These websites are a cool place to be that’s why they are so popular. They allow web users to take part and customize their online experience in an easy, fun and free way! Users decide whether they want to upload their own videos or talk about their favorite interests or hobbies and even share their favorite websites. Users can create their own friends lists, share them and thus leave their mark in the website’s history. All these remarkably popular websites are active web based applications utilizing the ideas of web 2.0 concept. And they make tons of money every single day relying solely on advertising. They will never charge you for using their website.

Digg.com Home page as mentioned in text

Furi.com Home page as mentioned in text

Another great example of a web 2.0 website is the infamous wikipedia. The first free online encyclopedia where users can edit its contents. Wonder why wikipedia has become so popular? It’s not only because it’s free and provides tons of great info. What makes wikipedia stand from the crowd is the ability/option to edit its contents. Isn’t it so simply amazing? Just look at the screen grab attached of wikipedia’s home page and it gives you an idea of the scale of this thing, the millions of different pages in hundreds of different languages. It really is quite impressive. So what does this have to do with you? If you are a webmaster or an internet marketer or a coder then you better take advantage of the web 2.0 idea while you can. It’s so easy to get into that and conquer it effectively. How many niches do you know of that has a real web 2.0 project established in it? I bet there are thousand’s of niches waiting for web developers to take the next step and conquer them.

Wikipedia Home page as mentioned in text

In a few months from now you will not be able to avoid the web2.0 concept. It happens all the time. Good ideas just appear, it takes some time before they become accepted and gain some popularity and then everyone wants a piece of the action. Web 2.0 is already gaining popularity in an unimaginable way.

The Web 2.0 phenomenon comprises a set of techniques and applications design principles for personalizing the web. It is different to classic web technologies as it refers to a class of web-based applications that have been recognized to share certain design patterns. Today, the term encompasses web-based applications like mashups, blogs, wikis, feeds, tagging systems, user-created publication systems, and social networking applications implemented by a range of techniques from programming languages to algorithms.

This video below is a brilliant way of explaining the web. It certainly made it a bit clearer for me.

Web 2.0 Explained

Web 2.0

The term Web 2.0 is associated with web applications that facilitate participatory information sharing, interoperability, user-centered design, and collaboration on the World Wide Web. A Web 2.0 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community, in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them. Examples of Web 2.0 include social networking sites, blogs, wikis, video sharing sites, hosted services, web applications, mashups and folksonomies.

The term is closely associated with Tim O’Reilly because of the O’Reilly Media Web 2.0 conference in late 2003. Although the term suggests a new version of the World Wide Web, it does not refer to an update to any technical specification, but rather to cumulative changes in the ways software developers and end-users use the Web. Whether Web 2.0 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee, who called the term a “piece of jargon”, precisely because he intended the Web in his vision as “a collaborative medium, a place where we [could] all meet and read and write”. He called it the “Read/Write Web”.

History

The term “Web 2.0” was coined in January 1999 by Darcy DiNucci, a consultant on electronic information design (information architecture). In her article, “Fragmented Future”, DiNucci writes:

The Web we know now, which loads into a browser window in essentially static screenfulls, is only an embryo of the Web to come. The first glimmerings of Web 2.0 are beginning to appear, and we are just starting to see how that embryo might develop. The Web will be understood not as screenfulls of text and graphics but as a transport mechanism, the ether through which interactivity happens. It will […] appear on your computer screen, […] on your TV set […] your car dashboard […] your cell phone […] hand-held game machines […] maybe even your microwave oven.

Her use of the term deals mainly with Web design, aesthetics, and the interconnection of everyday objects with the Internet; she argues that the Web is “fragmenting” due to the widespread use of portable Web-ready devices. Her article is aimed at designers, reminding them to code for an ever-increasing variety of hardware. As such, her use of the term hints at, but does not directly relate to, the current uses of the term.

The term Web 2.0 did not resurface until 2002. These authors focus on the concepts currently associated with the term where, as Scott Dietzen puts it, “the Web becomes a universal, standards-based integration platform”. John Robb wrote: “What is Web 2.0? It is a system that breaks with the old model of centralized Web sites and moves the power of the Web/Internet to the desktop.”

In 2003, the term began its rise in popularity when O’Reilly Media and MediaLive hosted the first Web 2.0 conference. In their opening remarks, John Battelle and Tim O’Reilly outlined their definition of the “Web as Platform”, where software applications are built upon the Web as opposed to upon the desktop. The unique aspect of this migration, they argued, is that “customers are building your business for you”. They argued that the activities of users generating content (in the form of ideas, text, videos, or pictures) could be “harnessed” to create value. O’Reilly and Battelle contrasted Web 2.0 with what they called “Web 1.0”. They associated Web 1.0 with the business models of Netscape and the Encyclopædia Britannica Online. For example,

Netscape framed “the web as platform” in terms of the old software paradigm: their flagship product was the web browser, a desktop application, and their strategy was to use their dominance in the browser market to establish a market for high-priced server products. Control over standards for displaying content and applications in the browser would, in theory, give Netscape the kind of market power enjoyed by Microsoft in the PC market. Much like the “horseless carriage” framed the automobile as an extension of the familiar, Netscape promoted a “webtop” to replace the desktop, and planned to populate that webtop with information updates and applets pushed to the webtop by information providers who would purchase Netscape servers.

In short, Netscape focused on creating software, updating it on occasion, and distributing it to the end users. O’Reilly contrasted this with Google, a company which did not at the time focus on producing software, such as a browser, but instead focused on providing a service based on data such as the links Web page authors make between sites. Google exploits this user-generated content to offer Web search based on reputation through its “page rank” algorithm. Unlike software, which undergoes scheduled releases, such services are constantly updated, a process called “the perpetual beta”. A similar difference can be seen between the Encyclopedia Britannica Online and Wikipedia: while the Britannica relies upon experts to create articles and releases them periodically in publications, Wikipedia relies on trust in anonymous users to constantly and quickly build content. Wikipedia is not based on expertise but rather an adaptation of the open source software adage “given enough eyeballs, all bugs are shallow”, and it produces and updates articles constantly. O’Reilly’s Web 2.0 conferences have been held every year since 2003, attracting entrepreneurs, large companies, and technology reporters.

In terms of the lay public, the term Web 2.0 was largely championed by bloggers and by technology journalists, culminating in the 2006 TIME magazine Person of The Year (You). That is, TIME selected the masses of users who were participating in content creation on social networks, blogs, wikis, and media sharing sites. In the cover story, Lev Grossman explains:

It’s a story about community and collaboration on a scale never seen before. It’s about the cosmic compendium of knowledge Wikipedia and the million-channel people’s network YouTube and the online metropolis MySpace. It’s about the many wresting power from the few and helping one another for nothing and how that will not only change the world, but also change the way the world changes.

Since that time, Web 2.0 has found a place in the lexicon; in 2009 Global Language Monitor declared it to be the one-millionth English word.

Characteristics

Web 2.0 websites allow users to do more than just retrieve information. By increasing what was already possible in “Web 1.0”, they provide the user with more user-interface, software and storage facilities, all through their browser. This has been called “Network as platform” computing. Users can provide the data that is on a Web 2.0 site and exercise some control over that data. These sites may have an “Architecture of participation” that encourages users to add value to the application as they use it.

The concept of Web-as-participation-platform captures many of these characteristics. Bart Decrem, a founder and former CEO of Flock, calls Web 2.0 the “participatory Web” and regards the Web-as-information-source as Web 1.0.

The impossibility of excluding group members who don’t contribute to the provision of goods from sharing profits gives rise to the possibility that rational members will prefer to withhold their contribution of effort and free-ride on the contribution of others. This requires what is sometimes called radical trust by the management of the website. According to Best, the characteristics of Web 2.0 are: rich user experience, user participation, dynamic content, metadata, web standards and scalability. Further characteristics, such as openness, freedom and collective intelligence by way of user participation, can also be viewed as essential attributes of Web 2.0.

Technologies

The client-side/web browser technologies used in Web 2.0 development are Asynchronous JavaScript and XML (Ajax), Adobe Flash and the Adobe Flex framework, and JavaScript/Ajax frameworks such as Yahoo! UI Library, Dojo Toolkit, MooTools, and jQuery. Ajax programming uses JavaScript to upload and download new data from the web server without undergoing a full page reload.

To allow users to continue to interact with the page, communications such as data requests going to the server are separated from data coming back to the page (asynchronously). Otherwise, the user would have to routinely wait for the data to come back before they can do anything else on that page, just as a user has to wait for a page to complete the reload. This also increases overall performance of the site, as the sending of requests can complete quicker independent of blocking and queueing required to send data back to the client.

The data fetched by an Ajax request is typically formatted in XML or JSON (JavaScript Object Notation) format, two widely used structured data formats. Since both of these formats are natively understood by JavaScript, a programmer can easily use them to transmit structured data in their web application. When this data is received via Ajax, the JavaScript program then uses the Document Object Model (DOM) to dynamically update the web page based on the new data, allowing for a rapid and interactive user experience. In short, using these techniques, Web designers can make their pages function like desktop applications. For example, Google Docs uses this technique to create a Web-based word processor.

Adobe Flex is another technology often used in Web 2.0 applications. Compared to JavaScript libraries like jQuery, Flex makes it easier for programmers to populate large data grids, charts, and other heavy user interactions. Applications programmed in Flex, are compiled and displayed as Flash within the browser. As a widely available plugin independent of W3C (World Wide Web Consortium, the governing body of web standards and protocols), standards, Flash is capable of doing many things which were not possible pre HTML 5, the language used to construct web pages. Of Flash’s many capabilities, the most commonly used in Web 2.0 is its ability to play audio and video files. This has allowed for the creation of Web 2.0 sites where video media is seamlessly integrated with standard HTML.

In addition to Flash and Ajax, JavaScript/Ajax frameworks have recently become a very popular means of creating Web 2.0 sites. At their core, these frameworks do not use technology any different from JavaScript, Ajax, and the DOM. What frameworks do is smooth over inconsistencies between web browsers and extend the functionality available to developers. Many of them also come with customizable, prefabricated ‘widgets’ that accomplish such common tasks as picking a date from a calendar, displaying a data chart, or making a tabbed panel.

On the server side, Web 2.0 uses many of the same technologies as Web 1.0. New languages such as PHP, Ruby, ColdFusion, Perl, Python, JSP and ASP are used by developers to dynamically output data using information from files and databases. What has begun to change in Web 2.0 is the way this data is formatted. In the early days of the Internet, there was little need for different websites to communicate with each other and share data. In the new “participatory web”, however, sharing data between sites has become an essential capability. To share its data with other sites, a web site must be able to generate output in machine-readable formats such as XML, RSS, and JSON. When a site’s data is available in one of these formats, another website can use it to integrate a portion of that site’s functionality into itself, linking the two together. When this design pattern is implemented, it ultimately leads to data that is both easier to find and more thoroughly categorized, a hallmark of the philosophy behind the Web 2.0 movement.

In brief, AJAX is a key technology used to build Web 2.0 because it provides rich user experience and works with any browser whether it is Firefox or Internet Explorer. Then, a language with very good web services support should be used to build Web 2.0 applications. In addition, the language used should be iterative meaning that it will help easy and fast the addition and deployment of features.

Concepts

Web 2.0 can be described in 3 parts which are as follows:

Rich Internet Application (RIA) – It defines the experience brought from desktop to browser whether it is from a graphical point of view or usability point of view. Some buzz words related to RIA are AJAX and Flash.

Service-oriented Architecture (SOA) – It is a key piece in Web 2.0 which defines how Web 2.0 applications expose its functionality so that other applications can leverage and integrate the functionality providing a set of much richer applications (Examples are: Feeds, RSS, Web Services, Mash-ups)

Social Web – It defines how Web 2.0 tend to interact much more with the end user and making the end user an integral part.

As such, Web 2.0 draws together the capabilities of client- and server-side software, content syndication and the use of network protocols. Standards-oriented web browsers may use plug-ins and software extensions to handle the content and the user interactions. Web 2.0 sites provide users with information storage, creation, and dissemination capabilities that were not possible in the environment now known as “Web 1.0”.

Web 2.0 websites include the following features and techniques: Andrew McAfee used the acronym S.L.A.T.E.S to refer to them:

Search

Finding information through keyword search.

Links

Connects information together into a meaningful information ecosystem using the model of the Web, and provides low-barrier social tools.

Authoring

The ability to create and update content leads to the collaborative work of many rather than just a few web authors. In wikis, users may extend, undo and redo each other’s work. In blogs, posts and the comments of individuals build up over time.

Tags

Categorization of content by users adding “tags” – short, usually one-word descriptions – to facilitate searching, without dependence on pre-made categories. Collections of tags created by many users within a single system may be referred to as “folksonomies” (i.e., folk taxonomies).

Extensions

Software that makes the Web an application platform as well as a document server. These include software like Adobe Reader, Adobe Flash player, Microsoft Silverlight, ActiveX, Oracle Java, Quicktime, Windows Media, etc.

Signals

The use of syndication technology such as RSS to notify users of content changes.

While SLATES forms the basic framework of Enterprise 2.0, it does not contradict all of the higher level Web 2.0 design patterns and business models. In this way, a new Web 2.0 report from O’Reilly is quite effective and diligent in interweaving the story of Web 2.0 with the specific aspects of Enterprise 2.0. It includes discussions of self-service IT, the long tail of enterprise IT demand, and many other consequences of the Web 2.0 era in the enterprise. The report also makes many sensible recommendations around starting small with pilot projects and measuring results, among a fairly long list.

Usage

A third important part of Web 2.0 is the Social Web which is a fundamental shift in the way we communicate. The social web consists of a number of online tools and platforms where people share their perspectives, opinions, thoughts and experiences. Web 2.0 Applications tend to interact much more with the end user. As such, the end user is not only a user of the application but also a participant by:

Podcasting

Blogging

Tagging

Contributing to RSS

Social bookmarking

Social networking

The popularity of the term Web 2.0, along with the increasing use of blogs, wikis, and social networking technologies, has led many in academia and business to coin a flurry of 2.0s, including Library 2.0, Social Work 2.0, Enterprise 2.0, PR 2.0, Classroom 2.0, Publishing 2.0, Medicine 2.0, Telco 2.0, Travel 2.0, Government 2.0, and even Porn 2.0. Many of these 2.0s refer to Web 2.0 technologies as the source of the new version in their respective disciplines and areas. For example, in the Talis white paper “Library 2.0: The Challenge of Disruptive Innovation”, Paul Miller argues

Blogs, wikis and RSS are often held up as exemplary manifestations of Web 2.0. A reader of a blog or a wiki is provided with tools to add a comment or even, in the case of the wiki, to edit the content. This is what we call the Read/Write web. Talis believes that Library 2.0 means harnessing this type of participation so that libraries can benefit from increasingly rich collaborative cataloguing efforts, such as including contributions from partner libraries as well as adding rich enhancements, such as book jackets or movie files, to records from publishers and others.

Here, Miller links Web 2.0 technologies and the culture of participation that they engender to the field of library science, supporting his claim that there is now a “Library 2.0”. Many of the other proponents of new 2.0s mentioned here use similar methods.

The meaning of web 2.0 is role dependent, as Dennis D. McDonalds noted. For example, some use Web 2.0 to establish and maintain relationships through social networks, while some marketing managers might use this promising technology to “end-run traditionally unresponsive I.T. department.”

There is a debate over the use of Web 2.0 technologies in mainstream education. Issues under consideration include the understanding of students’ different learning modes; the conflicts between ideas entrenched in informal on-line communities and educational establishments’ views on the production and authentication of ‘formal’ knowledge; and questions about privacy, plagiarism, shared authorship and the ownership of knowledge and information produced and/or published on line.

Facebook Home page. Probably the most famous Social Website in History.

Marketing

For marketers, Web 2.0 offers an opportunity to engage consumers. A growing number of marketers are using Web 2.0 tools to collaborate with consumers on product development, service enhancement and promotion. Companies can use Web 2.0 tools to improve collaboration with both its business partners and consumers. Among other things, company employees have created wikis — Web sites that allow users to add, delete and edit content — to list answers to frequently asked questions about each product, and consumers have added significant contributions. Another marketing Web 2.0 lure is to make sure consumers can use the online community to network among themselves on topics of their own choosing.

Mainstream media usage of web 2.0 is increasing. Saturating media hubs – like New York Times, PC Magazine and Business Week – with links to popular new web sites and services, is critical to achieving the threshold for mass adoption of those services.

Web 2.0 offers financial institutions abundant opportunities to engage with customers. Networks such as Twitter, Yelp and Facebook are now becoming common elements of multichannel and customer loyalty strategies, [buzzword] and banks are beginning to use these sites proactively to spread their messages. In a recent article for Bank Technology News, Shane Kite describes how Citigroup’s Global Transaction Services unit monitors social media outlets to address customer issues and improve products. Furthermore, the FI uses Twitter to release “breaking news” and upcoming events, and YouTube to disseminate videos that feature executives speaking about market news.

Twitter Home page as mentioned in text.

Yelp Home page as mentioned in text.

Small businesses have become more competitive by using Web 2.0 marketing strategies to compete with larger companies. As new businesses grow and develop, new technology is used to decrease the gap between businesses and customers. Social networks have become more intuitive and user friendly to provide information that is easily reached by the end user. For example, Companies use Twitter to offer customers coupons and discounts for products and services.

According to Google Timeline, the term Web 2.0 was discussed and indexed most frequently in 2005, 2007 and 2008. Its average use is continuously declining by 2-4% per quarter since April 2008.

Web-based Applications and Desktops

Ajax has prompted the development of websites that mimic desktop applications, such as word processing, the spreadsheet, and slide-show presentation. In 2006 Google, Inc. acquired one of the best-known sites of this broad class, Writely. WYSIWYG wiki and blogging sites replicate many features of PC authoring applications.

Several browser-based “operating systems” have emerged, including EyeOS and YouOS. Although coined as such, many of these services function less like a traditional operating system and more as an application platform. They mimic the user experience of desktop operating-systems, offering features and applications similar to a PC environment, and are able to run within any modern browser. However, these operating systems do not directly control the hardware on the client’s computer.

Numerous web-based application services appeared during the dot-com bubble of 1997–2001 and then vanished, having failed to gain a critical mass of customers. In 2005, WebEx acquired one of the better-known of these, Intranets.com, for $45 million.

Internet applications

Rich Internet Applications (RIAs) are web 2.0 applications that have many of the characteristics of desktop applications and are typically delivered via a browser.

Distribution of Media

XML and RSS

Many regard syndication of site content as a Web 2.0 feature. Syndication uses standardized protocols to permit end-users to make use of a site’s data in another context (such as another website, a browser plugin, or a separate desktop application). Protocols which permit syndication include RSS (really simple syndication, also known as web syndication), RDF (as in RSS 1.1), and Atom, all of them XML-based formats. Observers have started to refer to these technologies as web feeds.

Specialized protocols such as FOAF and XFN (both for social networking) extend the functionality of sites or permit end-users to interact without centralized websites.

Web APIs

Web 2.0 often uses machine-based interactions such as REST and SOAP. Servers often expose proprietary APIs (Application Programming Interfaces), but standard APIs (for example, for posting to a blog or notifying a blog update) have also come into use. Most communications through APIs involve XML or JSON payloads.

REST APIs, through their use of self-descriptive messages and hypermedia as the engine of application state, should be self describing once an entry URI is known. Web Services Description Language (WSDL) is the standard way of publishing a SOAP API and there are a range of web service specifications. EMML, or Enterprise Mashup Markup Language by the Open Mashup Alliance, is an XML markup language for creating enterprise mashups.

Good Examples of Web 2.0 Style Sites

I love the way the logo pop’s on this Brix Website, the white set on the rich deep blues looks really smart. I also like logo its self. the ‘rubix’ cube type thing looks great and relates to the name of the site. I like the font used also with the Brix type. The ‘X’ is great. I also like the simple navigation in the top right hand corner.

This Voxy site is a bit garish for me but there  is a font used for the logo that is very similar to the Brix logo (is there a theme developing here?). The simple layout is good but that awful yellow wallpaper ruins this site. Why!?

Loving the clean lines and illustration on this Ringbow site. Blue and whites seems to be a theme I am drawn to again and again. The logo top left and small simple navigation also looks great top right. If you look closely there are some great little icons coming off of the screen of the mobile which i also like!

Another white and blue example with black to make certain areas pop. I do like this clean look for a site much more than the grunge style I used for my last project. It fits my style of work better.

Again great use of icons on this Ditto site. Maybe I can think about incorporating something similar on my site? They could have added a more interesting wallpaper background rather than just the plain old grey! BORING!!!!!

Again a nice clean logo top left. I particularly like the selected ‘home’ button that mimics the logo with the speech bubble look. Again Blues, Black and Whites working well together. Some good idea generators there. I definitely think I have an idea for a colour scheme and general layout for my site that I have to develop in Task 2.

What does the future hold? Web 3.0

Definitions of Web 3.0 vary greatly. Some believe its most important features are the Semantic Web and personalization. Focusing on the computer elements, Conrad Wolfram has argued that Web 3.0 is where “the computer is generating new information”, rather than humans.

Andrew Keen, author of The Cult of the Amateur, considers the Semantic Web an “unrealisable abstraction” and sees Web 3.0 as the return of experts and authorities to the Web. For example, he points to Bertelsmann’s deal with the German Wikipedia to produce an edited print version of that encyclopedia. CNN Money’s Jessi Hempel expects Web 3.0 to emerge from new and innovative Web 2.0 services with a profitable business model. Others still such as Manoj Sharma, an organization strategist, in the keynote “A Brave New World Of Web 3.0” proposes that Web 3.0 will be a “Totally Integrated World” – cradle-to-grave experience of being always plugged onto the net.

Futurist John Smart, lead author of the Metaverse Roadmap echoes Sharma’s perspective, defining Web 3.0 as the first-generation Metaverse (convergence of the virtual and physical world), a web development layer that includes TV-quality open video, 3D simulations, augmented reality, human-constructed semantic standards, and pervasive broadband, wireless, and sensors. Web 3.0’s early geosocial (Foursquare, etc.) and augmented reality (Layar, etc.) webs are an extension of Web 2.0’s participatory technologies and social networks (Facebook, etc.) into 3D space. Of all its metaverse-like developments, Smart suggests Web 3.0’s most defining characteristic will be the mass diffusion of NTSC-or-better quality open video to TVs, laptops, tablets, and mobile devices, a time when “the internet swallows the television.” Smart considers Web 4.0 to be the Semantic Web and in particular, the rise of statistical, machine-constructed semantic tags and algorithms, driven by broad collective use of conversational interfaces, perhaps circa 2020. David Siegel’s perspective in Pull: The Power of the Semantic Web, 2009, is consonant with this, proposing that the growth of human-constructed semantic standards and data will be a slow, industry-specific incremental process for years to come, perhaps unlikely to tip into broad social utility until after 2020.

According to some Internet experts Web 3.0 will allow the user to sit back and let the Internet do all of the work for them. Rather than having search engines gear towards your keywords, the search engines will gear towards the user. Keywords will be searched based on your culture, region, and jargon. For example, when going on a vacation you have to do separate searches for your airline ticket, your hotel reservations, and your car rental. With Web 3.0 you will be able to do all of this in one simple search. The search engine will present the results in a comparative and easily navigated way to the user.

 

Flickr

for the second part of this task we were tasked with choosing one Web 2.0 Site and describing its appearance and functionality; ie its online identity. I have decided to look at Flickr, mainly because it is similar to what I am thinking of building for the second project, in the sense that it a photographic resource where people can upload and share photos that are then searchable under specific things.

First of all lets look at its appearance:

Appearance:

Here we can see Flickr’s home page. Typically of the Web 2.0 look and style its very clean and easy to read with a limited colour palette. The logo is a very simple two, flat colour example (a vibrant pink and blue, that really pop’s off of the page). We have the photo of the day sat top left with large bold headline type to the right of it clearly stating what this website is all about – “Share your photos. Watch the World!” The couple of main buttons that are featured on the page have a very subtle gradient to them, making them appear slightly three dimensional (to help entice click-ability) with pink copy on them (the pink being a tint from the pink in the logo). Other secondary clickable items are highlighted in blue tints in a standard ‘link’ kind of way. There are the obligatory ‘Sign In’ and ‘Search’ facilities from the home page making life as easy as possible for the user (a key web 2.0 trait). Then we have the 4 other main ports of call clearly marked with a header 2 kind of look (Black and bold but not as larger point size as the main headline mentioned earlier. Here you have the option to ‘Share and Stay in Touch‘, ‘Upload and Organise‘, ‘Make Stuff!‘ and last but not least ‘Explore‘. Its pretty obvious what each of these is and will enable you to do and so simple for the user. We have further links to the Flickr blog, a World map, even a camera finder for those looking at finding the best camera. One thing I particularly like is the option to choose from one of ten languages at the bottom of the home page. This option seems to appear on a lot of the really high profile 2.0 websites, for example Wikipedia as mentioned earlier in my blog.

So basically Flickr is a pretty standard looking 2.0 site, its clean, with a basic colour palette of 4 colours, including black and white, I like the use of a daily ‘hero’ photo that changes daily (just like googles search page). Buttons are clearly marked and labelled, even a simpleton could find what they are looking for. Having not used Flickr for a little while I was very surprised at the quality of photos that are on there. Most are of a high quality (unlike some of the 4k jpgs you get from google images) and there pictures from pretty much everyplace you could imagine. Great for an illustrator like myself who is always on the look out for reference of strange and bizarre things! Now lets have a look at the websites functionality, as you may have guessed from some of my previous comments this a pretty straight forward.

Functionality:

I thought I would treat Flickr as though I had never used it before. So my first port of call from the home page was to ‘Take the Tour‘!

Here we have the first page of the tour just one click away from the home page. It has a striking illustration (although I’m not completely sure of its relevance to the rest of the site, or of its quality. But at least the colours draw your eye) that kind of sets up the Flickr Brand (or World might be a better term). It tells a simple story of what Flickr’s whole vibe is about. Then from this initial page you can explore further into the tour to find out specifics. It’s worth noting that on each page of the tour there is the option for signing up and creating your account, so if you decide half way through the tour that you have heard enough and want to sign up you don’t have to wait until the end.

The next step of the tour takes you through a very clearly annotated list of the best way to upload and categorize your photos. It all works in a very similar way to Facebook where you can ‘tag‘ who is in your photos and they get to share them also. It great that they are getting you to buy in to the whole Flickr brand even by this early stage of the tour. After all, its this that allows Flickr to be so useful when you search its databases for a specific subject matter.

Next you have the option of importing your own contacts thus enabling you to expand rapidly your Flickr experience. Its processes like this that have an exponential growth rate and before you know it you would have linked with ten, hundreds if not thousands of people with a couple of clicks of the mouse. Quite staggering really. You also have the options here of setting your privacy settings to determine who can and cant see your pictures.

The comes the option of linking your Flickr account with all of the other major players in social networking, namely Facebook, Twitter etc. You can again see how quickly these things can spread.

Then comes all of the information about all of the different ways that you can upload your pics to the web. Whether it be from your mobile, your email, your browser or even a Flickr app, the options are endless these days. All of this may seem like a lot of information but its very clearly displayed on the site making understanding it easy and simple to follow.

Then you are taught how to organize your images, again this is done with the simplest of annotated diagrams.

Next comes the kind of Flickr subsiduries, with links to various other aspects Flickr has to offer, such as groups and blogs and places. Again similar things are on offer, or dare I say it, ‘stolen’ from Facebook? I’d be interested to know who came up with it first!

The last part of the tour gives you all the info regarding the the various Flickr Apps. An interesting end to a pretty comprehensive tour. I must admit I didn’t realise quite how many different aspects there were to Flickr. I had already made a start on part 2 of this project but I think I may rejig the layout a touch now and find a clearer way to display things, with the option of people uploading stuff to have the option of categorizing things into there specific sections. At least this part of the project has helped stimulate some ideas for the design of my 2.0 site.

 

Mobile Technologies & the Web:

Now I couldn’t completely gloss over the whole mobile technologies bit of this task without looking at it at least a little bit!!! So here we go!

Mobile Websites

Over the past few years, mobile web usage has considerably increased to the point that web developers and designers can no longer afford to ignore it. In wealthy countries, the shift is being fueled by faster mobile broadband connections and cheaper data service. However, a large increase has also been seen in developing nations where people have skipped over buying PCs and gone straight to mobile.

Unfortunately, the mobile arena introduces a layer of complexity that can be difficult for developers to accommodate. Mobile development is more than cross-browser, it should be cross-platform. The vast number of mobile devices makes thorough testing a practical impossibility, leaving developers nostalgic for the days when they only had to support legacy browsers.

In addition to supporting different platforms, each device may use any number of mobile web browsers. For instance, an Android user could access your site using the native Android browser, or could have also installed Opera Mini or Firefox Mobile. It’s fine as long as the smartphone uses a progressive web browser (and it’s safe to say that most browsers are progressive nowadays), but it doesn’t have to.

The mobile web reintroduces several issues that have been largely ignored in recent years. First, even with 4G networks, bandwidth becomes a serious issue for mobile consumers. Additionally, mobile devices have a significantly reduced screen size, which presents screen real estate issues that have not existed since the days of projection monitors. Combine these issues with cross-platform compatibility problems, and it isn’t hard to see how mobile development is a lot like ‘stepping backwards in time’. So let’s tackle these issues one at a time and create a road map for mobile web development:

How To Implement Mobile Stylesheets

The first step to adding mobile support to a website is including a special stylesheet to adjust the CSS for mobile devices:

Server-side Methods & The UA String

One approach to including mobile stylesheets involves detecting the user agent string with a server-side language such as PHP. With this technique, the site detects mobile devices and either serves an appropriate stylesheet or redirects the user to a mobile subdomain, for instance m.facebook.com. This server-side approach has several advantages: it guarantees the highest level of compatibility and also allows the website to serve special mark-up/content to mobile users.

While this technique is perfect for enterprise level websites, there are practical concerns that make it difficult to implement on most sites. New user agent strings come out almost daily, so keeping the UA list current is next to impossible. Additionally, this approach depends on the device to relay its true user agent. Even though, browsers have spoofed their UA string to get around this type of detection in the past. For instance, most UA strings still start with “Mozilla” to get through the Netscape checks used in the 90′s, and for several years Opera pretended to be IE. As Peter-Paul Koch writes:

“It’s an arms race. If device detection really catches on, browsers will start to spoof their user agent strings to end up on the right side of the detects.”

Client-side Methods & Media Queries

Alternately, the easiest approach involves detecting the mobile device on the client side. One of the earliest techniques for including mobile stylesheets involves taking advantage of the stylesheet’s media type, for instance:

1 <link rel=”stylesheet” href=”site.css” media=”screen” />

2 <link rel=”stylesheet” href=”mobile.css” media=”handheld” />

Here we’ve included two stylesheets, the first site.css targets desktops and laptops using the screen media type, while the second mobile.css targets mobile devices using handheld. While this would otherwise be an excellent approach, device support is another issue. Older mobile devices tend to support the handheld media type, however they vary in their implementation: some disable the screen stylesheets and only load handheld, whereas others load both.

Additionally, most newer devices have done away with the handheld distinction altogether, in order to serve their users fully-featured web pages as opposed to duller mobile layouts. To support newer devices, we’ll need to use media queries, which allow us to target styles to the device width (you can see another practical adaptation of media queries in Ethan Marcotte’s article Responsive Web Design). Since mobile devices typically have smaller screens, we can target handheld devices by detecting screens that are 480px and smaller:

1 <link rel=”stylesheet” href=”mobile.css” media=”only screen and (max-device width:480px)”/>

While this targets most newer devices, many older devices don’t support media queries, so we’ll need a hybrid approach to get the largest market penetration.

First, define two stylesheets: screen.css with everything for normal browsers and antiscreen.css to overwrite any styles that you don’t want on mobile devices. Tie these two stylesheets together in another stylesheet core.css:

1 @import url(“screen.css”);

2 @import url(“antiscreen.css”) handheld;

3 @import url(“antiscreen.css”) only screen and

4 (max-device-width:480px);

Finally, define another stylesheet handheld.css with additional styling for mobile browsers and link them on the page:

1 <link rel=”stylesheet” href=”core.css” media=”screen”/>

2 <link rel=”stylesheet” href=”handheld.css” media=”handheld,

3 only screen and (max-device-width:480px)”/>

While this technique reaches a large market share of mobile devices, it is by no means perfect. Some mobile devices such as iPad are more than 480 pixels wide and will not work with this method. However, these larger devices arguably don’t need a condensed mobile layout. Moving forward, there will likely be more devices that don’t fit into this mold. Unfortunately, it is very difficult to future-proof mobile detection, since standards are still emerging.

Besides device detection, the media query approach also presents other issues. Mainly, media queries can only style content differently and provide no control over content delivery. For instance, a media query can be used to hide a side column’s content, but it cannot prevent that mark-up from being downloaded by your users. Given mobile bandwidth issues, this additional HTML should not simply be ignored.

User Initiated Method

Considering the difficulties with mobile UA detection and the pitfalls of media queries, some companies such as IKEA have opted to simply allow the user to decide whether to view the mobile version of their website. While this has the clear disadvantage of requiring more user interaction, it is arguably the most fool-proof method and also the easiest to accomplish.

The site contains a link that reads “Visit our mobile site” which transports the user to a mobile subdomain. This approach has some drawbacks. Of course, some mobile users may miss the link, and other non-mobile visitors may click it, since it is visible regardless of what device is being used. Even though, this technique has the advantage of allowing the user to make the mobile decision. Some users prefer a condensed layout that is optimized for their device, whereas other users may prefer to access the entire website, without the restrictions of a limited mobile layout.

What To Change With Mobile Stylesheets

Now that we’ve implemented mobile stylesheets, it’s time to get down to the nuts and bolts of which styles we actually want to change.

Increase & Alter Screen Real Estate

The primary goal of mobile stylesheets is to alter the layout for a smaller display. First and foremost this means reducing multi-column layouts to single columns. Most mobile screens are vertical, so horizontal space becomes even more “expensive” and mobile layouts can rarely afford more than one column of content. Next, reduce clutter throughout the page by setting display: none; on any less important elements. Finally, save additional pixels by reducing margins and padding to create a tighter layout.

Reduce Bandwidth

Another goal of mobile stylesheets is to reduce bandwidth for slower mobile networks. First make sure to remove or replace any large background images, especially if you use a background image for the whole site. Additionally set display: none on any unnecessary content images.

If your site uses images for buttons or navigation, consider replacing these with plain-text / CSS counterparts. Finally if you’d like to force the browser to use the alternate text for any of your images, use this snippet (and use JavaScript to add the as-text class for img and make sure that alt-attributes are properly defined in your markup):

1 img.as-text { content: attr(alt); }

Other Changes

Besides addressing screen size and bandwidth concerns, there are a few additional changes that should be made in any mobile stylesheet. First, you can improve readability by increasing the font size of any small or medium-sized text. Next, clicking is generally less precise on mobile devices, so make sure to increase the clickable areas of any important buttons or links by setting display: block and adding padding to the clickable elements.

Additionally, floated elements can cause problems for mobile layouts, so consider removing any floats that aren’t absolutely necessary. Remember that horizontal real estate is especially expensive on mobile, so you should always opt for adding vertical scrolling as opposed to horizontal.

Finally, mouseover states do not work with most mobile devices, so make sure to have proper definitions of :active-states. Also, sometimes it may be useful to apply definitions from the already defined :hover states to the :active states. This pseudo-class is displayed when the user clicks an item, and therefore will work on mobile devices. However this only enhances the user experience and should not be relied on for more important elements, such as drop-down navigation. In these cases it is best to show the links at all times in mobile devices.

Beyond Stylesheets

In addition to mobile stylesheets, we can add a number of special mobile features through mark-up.

Clickable Phone Numbers

First, most handheld devices include a phone, so let’s make our phone numbers clickable:

1 <a href=”tel:15032084566″ class=”phone-link”>(503) 208-4566</a>

Now mobile users can click this number to call it, however there are a few things to note. First, the number in the actual link starts with a 1 which is important since the web is international (1 is the US country code).

Second, this link is clickable whether or not the user has a mobile device. Since we’re not using the server-side method described above, our best option is to simply hide the fact that the number is clickable via CSS. So use the phone-link class to disable the link styling in your screen stylesheet, and then include it again for mobile.

Special Input Types

When it comes to mobile browsing, another concern is the difficulty of typing compared to a standard full-sized keyboard. But we can make it easier on our users by taking advantage of some special HTML5 input types:

1 <input type=”tel” />

2 <input type=”email” />

These input types allow devices such as iPhone to display a contextual keyboard that relates to the input type. In the example above type=”tel” triggers a numeric keypad ideal for entering phone numbers, and type=”email” triggers a keypad with @ and . buttons.

HTML5 input types also provide in-browser validation and special input menus that are useful in both mobile and non-mobile browsing. Furthermore, since non-supportive browsers naturally degrade to view these special input types as <input type=”text” />, there’s no loss in using HTML5 input types throughout your websites today.

See a complete list of HTML5 input types. You can find some information about the current browser support of HTML5 input attributes in the post HTML5 Input Attributes & Browser Support by Estelle Weyl.

Viewport Dimensions & Orientation

When modern mobile devices render a webpage, they scale the page content to fit inside their viewport, or visible area. Although the default viewport dimensions work well for most layouts, it is sometimes useful to alter the viewport. This can be accomplished using a <meta> tag that was introduced by Apple and has since been picked up by other device manufacturers. In the document’s <head> include this snippet:

1 <meta name=”viewport” content=”width=320″ />

In this example we’ve set the viewport to 320, which means that 320 pixels of the page will be visible across the width of the device.

The viewport meta tag can also be used to disable the ability to resize the page:

1 <meta name=”viewport” content=”width=320,user-scalable=false” />

However, similar to disabling the scrollbars, this technique takes control away from the user and should only be used for a good reason.

Additionally, it is possible to add certain styles based on the device orientation. This means that different styles can be applied depending on whether the user is holding their phone vertically or horizontally.

To detect the device orientation, we can use a media query similar to the client-side device detection we discussed earlier. Within your stylesheet, include:

1 @import url(“portrait.css”) all and

2 (orientation:portrait);

3 @import url(“landscape.css”) all and

4 (orientation:landscape);

Here portrait.css styles will be added for vertical devices and the landscape.css will be added for horizontal.

However orientation media queries have not been adopted by all devices, so this is best accomplished with the max-width media query. Simply apply different max-width queries for the different orientation widths you want to target. This is a much more robust approach, since presumably the reason to target different orientations is to style for different widths.

Special Concerns For iPhone / iPad

With a market share of 28% and estimates of as much as 50% of mobile browsing going through iPhone, it makes sense that developers make special accommodations for the mobile giant.

No Flash

Regardless of Apple’s ethics, the reality is that iPhones do not play Flash unless they are jailbroken. Fortunately, there are alternatives to Flash, and iPhone’s issues with this technology are often easy to get around. The main use for Flash in modern websites is Flash video, which can easily be circumvented using HTML5 video. However since older browsers don’t support HTML5, make sure to include a Flash backup for non-supportive browsers (this is why the whole debate about Flash vs. HTML5 is a bit pointless, because you can actually offer both to your users and the user’s device will pick up the one it can render automatically).

Beyond video, it is usually best to use JavaScript to accommodate any simple functionality. JavaScript libraries such as jQuery make it easy to build rich interactive applications without Flash. Regardless of your desire to support iPhone, these JavaScript apps typically have a number of additional advantages over Flash alternatives.

Finally, certain applications are simply too hard to recreate with HTML5 and Javascript. For these, iPhone users will have to be left out, however make sure to include appropriate alternate content.

A spoof of Adobe’s “We Love Apple” campaign, where the heart is replaced by the broken plugin icon.

Other Shortcomings

Besides Flash, there are a few additional caveats to supporting iPhones and iPads

First, iPhone does not support <input type=”file” />, since it does not have an accessible internal file structure. While most mobile devices connect to a computer as an external hard-drive, Apple has taken steps to ensure that the iPhone file structure remains obfuscated.

Next, iPhone will only cache files that are 25 kb or less, so try to keep any reused files under this restriction. This can be a bit counter-intuitive, as it often means breaking out large image sprites and concatenated JavaScripts into smaller chunks. However be careful to serve these files only to iPhone, or it will cause extra HTTP requests in all other browsers.

Finally, when it comes to @font-face font embedding, iPhone’s Mobile Safari doesn’t fully support it and supports the SVG file format instead. However, SVG fonts are only supported by Chrome, Opera and iPhone, so we’ll need a hybrid approach to target all browsers. In addition to the SVG, we’ll need an .otf or .ttf for Firefox and Safari, as well as an EOT for IE (IE has actually supported @font-face since IE4).

After obtaining the necessary files, tie them all together with the appropriate CSS:

1 @font-face {

2 font-family: ‘Comfortaa Regular’;

3 src: url(‘Comfortaa.eot’);

4 src: local(‘Comfortaa Regular’),

5 local(‘Comfortaa’),

6 url(‘Comfortaa.ttf’) format(‘truetype’),

7 url(‘Comfortaa.svg#font’) format(‘svg’);

8 }

For more information, read this article on cross-platform font-face support.

Special iPhone / iPad Enhancements

Despite iPhone’s various shortcomings, the device offers a wonderfully rich user experience that developers can leverage in ways not possible with older mobile devices.

First, there are a variety of JavaScript libraries that can be used to access some of the more advanced functionality available in iPhone. Take a look at Sencha Touch, jQTouch and iui. These three libraries allow you to better interface with the iPhone, and also work on similar devices such as Android. Additionally, keep an eye on the much anticipated jQuery Mobile which has just been released in alpha.

Next, the App Store isn’t the only way to get an icon on your users’ iPhones: you can simply have them bookmark your page. Unfortunately the default bookmark icon is a condensed screen shot of the page, which doesn’t usually look very good, so let’s create a special iPhone icon. Also check the Icon Reference Chart by Jon Hicks for further details.

Start by saving a 57 x 57 pixel PNG somewhere on your website, then add this snippet within your <head> tag:

1 <link rel=”apple-touch-icon” href=”/customIcon.png”/>

Don’t worry about rounded corners or a glossy effect, iPhone will add those by default.

Conclusion

As the worldwide shift to mobile continues, handheld device support will become increasingly important. Hopefully this leaves you with both the desire and toolset necessary to make mobile support a reality in your websites.

Although mobile occupies a significant chunk of global web browsing, the technology is still very much in its infancy. Just as standards emerged for desktop browsing, new standards are emerging to unify mobile browsers. This means that the techniques described in this article are only temporary, and it is your responsibility to stay on top of this ever-changing technology.

In fact, the only thing in web development that remains constant is the perpetual need to continue learning!

Right then, now for the fun part, producing my own Web 2.0 Style Website!!!

 

Web 2.0 Style Logo

Today we had to create a web 2.0 style logo. This is basically a clean shiny looking logo. To be fair I got a bit carried away and ended up creating this monstrosity!

Oh well, the project will be a better chance to create something good.

 

Project 4 – Final Hand-In

www.benhaslerdesigned.me

Task 1 – Overview of HTML & CSS

For the first part of this project we were tasked with writing a short analysis of HTML and CSS and how they affect web design. I will also demonstrate later a very simple piece of coded HTML that will include:

1) The basic page structure including Doctype, HTML, head and body.

2) Paragraph text

3) An unordered list

4) An H1 heading

5) An image

6) A page link

I will then create a CSS rule for the above HTML page and link it to the page. Then I will style the p and h1 tags. The CSS rule should include:

1) The paragraph tag (p) with font family Veranda. font size 12px, in colour black with a line height of 20 pixels.

2) The heading tag (h1) with font family Veranda, font size 25px in bold and blue in colour.

But before we come to this lets first look at the basics of HTML and CSS.

What is the difference between HTML & CSS?

HTML (Hyper Text Markup Language) is a widely accepted web-design language.

HTML is responsible for the construction, and the total output, of a page.

There are three “sections” of a decent HTML document source: Inline, Internal, and External.

Inline markup goes in the <body> tag, and defines the webpage’s base layout. It structures the output of a webpage, such as creating tables and divisions (And the data in them), forms and buttons, links (And anchors), or even just normal text and images (And videos, flash documents, etc). Inline markup is not generally used to decorate the page with colors and borders, as these methods are usually deprecated. HTML should be used to create the structure of a webpage – Not decorate it with borders, lines, and colors (Although it’s possible).

Internal markup goes in the <head> tag (Excluding DtD’s, which go in the first line of a document, etc). Most of the time, users do not directly see anything in internal markup (With the exception of something such as the <title> of a page). Internal markup can declare some special things about a page that the user won’t notice, such as the Character Set Declaration, the Document Type Declaration, and keywords (For search engine purposes) to that webpage.

Multi-web-language documents need to use Internal markup to link the multiple languages together (Like CSS and JavaScript), so in a way, Internal markup is also used for decorating, aligning (etc), and making dynamic things, out of Inline markup.

External markup is markup (Of any language) not contained in the HTML document, but in a different file. The contents of this file, to retrieve the markup, can usually be called by Internal Markup. External markup could effect the webpage in vast variety of ways.

CSS (Cascading Style Sheets) is another widely-accepted web-design language.

Unlike HTML, CSS does not “create” anything. Instead, it decorates, aligns, and positions (etc) elements in HTML. In a nutshell, CSS takes the normal HTML output and adds a few rules to how it’s actually displayed.

CSS can edit things such as element width and height, background color, border, alignment, and actual visibility, for starters. HTML is capable of doing some of these things, but as mentioned earlier, the methods are usually deprecated, or are soon to be deprecated.

CSS is incorporated into a webpage using Internal markup (In the <head>; in <style> tags) or external markup (From a “.css” file).

Now lets look at these again in a bit more detail. Firstly lets have a brief recap:

HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages and Web Applications.

What is HTML?

HTML is the language for describing the structure of Web pages. HTML gives authors the means to:

• Publish online documents with headings, text, tables, lists, photos, etc.
• Retrieve online information via hypertext links, at the click of a button.
• Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
• Include spread-sheets, video clips, sound clips, and other applications directly in their documents.

With HTML, authors describe the structure of pages using markup. The elements of the language label pieces of content such as “paragraph,” “list,” “table,” and so on.

What is XHTML?

XHTML is a variant of HTML that uses the syntax of XML, the Extensible Markup Language. XHTML has all the same elements (for paragraphs, etc.) as the HTML variant, but the syntax is slightly different. Because XHTML is an XML application, you can use other XML tools with it (such as XSLT, a language for transforming XML content).

What is CSS?

CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.

What is WebFonts?

WebFonts is a technology that enables people to use fonts on demand over the Web without requiring installation in the operating system. W3C has experience in downloadable fonts through HTML, CSS2, and SVG. Until recently, downloadable fonts have not been common on the Web due to the lack of an interoperable font format. The WebFonts effort plans to address that through the creation of an industry-supported, open font format for the Web (called “WOFF”).

Before we go to deeply into HTML and CSS etc. Its important to understand where the World Wide Web originated and the standards that where set and are constantly being developed.

Introduction to the Web & Web Standards

Tim Berners-Lee’s dream for his invention, the World Wide Web, is a common space where users can share information to work together, to play, and to socialise (The World Wide Web, A very short personal history). As Web developers, creating business, social, and educational sites, we turn this dream into reality.

But in this period of tremendous growth, the Web needs guidance to realize its full potential. Web standards are this guidance. These standards help ensure that everyone has access to the information we are providing, and also make Web development faster and more enjoyable.

Standards compliance makes it easier for people with special needs to use the Web. Blind people may have their computer read Web pages to them. People with poor eyesight may have pages rearranged and magnified for easier reading. And people using hand-held devices can browse the Web just as easily as those using high-end workstations.

As we will explain, there are also many practical reasons for developers to be concerned with Web standards. Search engines can do a better job of indexing sites, for example. Using browser-specific code often doubles or triples the work to create Web pages, and leaves a lot to be desired when new media are introduced. This situation will only get worse without the sound direction of Web standards.

Some people fear that standards are limiting. In reality, they remove much of the tedious labour involved in Web development, and give developers more time and more flexibility to be truly creative. They are both open to future improvement and mindful of past technology.

Many uses of the Web, including some that are only dreamed of today, will not be possible, or will be more difficult, without widespread standards compliance. At the moment, there are systems and software that are very common, seemingly close to universal, but who knows what tomorrow will bring? Tying ourselves to the control of any single company means limiting our future to the fortunes and misfortunes which that one company can, or will, provide. Maintaining universal standards will allow the Web to survive while encouraging innovation to continue at its current pace.

Standards have so much to offer that its considered necessary to help you learn more about them. Below will give you a solid understanding of what standards exist, why they do, and why you should care about them. Every time we create a piece of the Web, we contribute to the common information space that is the Web. We can build it up, or we can add weight that will tear it apart. The choice belongs to us; the consequences belong to everyone.

What are the standards?

W3C Standards

What is the W3C?

The World Wide Web Consortium (W3C) is an international industry consortium dedicated to “leading the Web to its full potential”. It’s led by Tim Berners-Lee, the inventor of the Web. Founded in 1994, the W3C has more than 330 member organizations – including Microsoft, America Online (parent company of Netscape Communications), Apple Computer, Adobe, Macromedia, Sun Microsystems, and a variety of other hardware and software manufacturers, content providers, academic institutions, and telecommunications companies. The Consortium is hosted by three universities – MIT in the US, INRIA in Europe, and Keio University in Japan.

What does it do?

The W3C develops open specifications (de facto standards) to enhance the interoperability of Web-related products. W3C Recommendations are developed by working groups consisting of Consortium members and invited experts. Working groups obtain general consensus from companies and other organizations involved in creating applications for the Web, and create Working Drafts and Proposed Recommendations. These are then submitted to the W3C membership and director, for formal approval as W3C Recommendations. More information regarding this process and the review stages can be obtained from the W3C Web site.

What are the W3C standards?

HTML 4.0 – HyperText Markup Language

HyperText Markup Language (HTML) is widely used on the Web for adding structure to text documents. Browsers interpret these documents, representing the structure in media-specific ways to the user. For example, visual browsers typically display the strong element (<strong> … </strong>) as bold text, while text-to-speech readers might emphasize that text when pronouncing it.

With the help of Cascading Style Sheets (CSS) the author may define how structural elements are to be represented, overriding the browser defaults.

XML 1.0 – Extensible Markup Language

Example of part of an XML document

<addressbook>

<entry>

<name>Bill Gates</name>

<email>bgatesmicrosoft.com</email>

</entry>

<entry>

<name>Marc Andreesen</name>

<email>marcanetscape.com</email>

</entry>

<entry>

<name>Jon S. von Tetzchner</name>

<email>jonopera.com</email>

</entry>

</addressbook>

Extensible Markup Language (XML) is a markup language like HTML, but instead of having a single, fixed set of elements, it allows you to define your own – or use a set made by someone else. It even allows using multiple sets within a single document – by using XML namespaces.

Some applications of XML, such as XHTML and MathML, have already become W3C Recommendations. Others are currently W3C Working Drafts.

Style sheet standards, such as CSS and (in the future) XSL, can be used to specify how XML elements are to be rendered. CSS and XSL both allow you to specify different styles for different media, so that you can have separate sets of styles for visual, voice, braille and other media.

XML is more flexible than HTML, primarily because of the ability to add your own elements and make your own structural systems. This makes it an ideal format for the organization of large quantities of data – it is already in use in many databases and search engines.

CSS – Cascading Style Sheets

Cascading Style Sheets (CSS) is a mechanism for changing the appearance of HTML or XML elements, by assigning styles to element types, self-defined classes of elements or individual instances.

Stylesheets can be used to consistently define the appearance of an entire site. Following the introduction of CSS, the W3C recommended that layout-specific features in HTML be phased out and replaced by stylesheets, creating a simpler and more structural World Wide Web.

DOM 1 – Document Object Model Level 1

The DOM allows the full power and interactivity of a scripting language (such as ECMAScript, the standardized version of JavaScript) to be exerted on a Web page. (In programming terms, the Document Object Model (DOM) Level 1 is an Application Programming Interface (API) for interacting with Web pages.) It gives the scripting language easy access to the structure, content, and presentation of a document which is written in such languages as HTML and CSS.

The DOM is compatible with future improvements in technology; it will allow any scripting language to interact with whatever languages are being used in the document. This standard will not only make it easier to program dynamic HTML, but will also make adapting to future Internet technology much less painful.

Emerging Standards

The W3C is constantly at work on creating new standards; the most important of these right now are are XHTML and XSL. XHTML, Extensible Hypertext Markup Language, is a reformulation of HTML 4.0 in XML; XSL, the Extensible Stylesheet Language, is a language for transforming and displaying XML documents, using an XML vocabulary.

ECMA Standards

What is the ECMA?

The European Computer Manufacturers Association (ECMA) is an organization officially founded in 1961 in order to meet the need for standardizing computer operational formats, including programming languages and input/output codes.

The ECMA is based in Geneva, Switzerland, near the headquarters of the International Organization for Standardization (ISO) and the International Electrotechnical Commission (IEC). In 1994, the organization’s name was changed to the ECMA – European Association for Standardizing Information and Communication Systems, in order to reflect its broader range of activities.

What does it do?

The main role of the ECMA is to develop Standards and Technical Reports in the area of information and communication technology. As ECMA is an association of companies and not an official standardization institute, they often collaborate with official national or international institutes.

ECMA Standards have been accepted as a base for international and European standards. So far 270 ECMA Standards and 70 Technical Reports have been published.

Of these standards 85 have been accepted as international standards by the International Organization for Standardization (ISO). In addition, 25 have been accepted as European standards by the European Telecommunications Standards Institute (ETSI).

What are the ECMA standards?

ECMAScript (standardized JavaScript)

ECMAScript is a standardized scripting language, based largely on Netscape’s JavaScript and Microsoft’s JScript. The ECMAScript standard is defined by ECMA’s Technical Committee 39 (TC-39).

The main use of ECMAScript, which is an object-based language, is to manipulate the objects in Web pages which are specified by the Document Object Model (DOM). These objects (effectively, the elements which make up Web pages, or the Web pages as a wholes) can then be added to, deleted, moved, or have their properties changed. This lets Web developers implement such effects as animated text, graphic roll-overs, and pages that change based on user input without having to be reloaded.

The current ECMAScript specification is ECMA Standard ECMA-262, ECMAScript Language Specification, 2nd edition.

Platform-Independent Computing Environments (Standardization of Java)

In June 1999 ECMA started a new Technical Committee (TC 41) to work on a Java standard. The resulting specification will be submitted to ISO for international standardization.

What are the advantages of using Web standards?

Accessibility

To software/machines

Complying with Web standards can give your Web pages greater visibility in Web searches. The structural information present in compliant documents makes it easy for search engines to access and evaluate the information in those documents, and they get indexed more accurately.

Because use of Web standards makes it easier for server-side as well as client-side software to understand the structure of your document, adding a search engine to your own site becomes easier and gives better results.

Standards are written so that old browsers will still understand the basic structure of your documents. Even if they can’t understand the newest and coolest additions to the standards, they’ll be able to display the content of your site. The same, of course, applies to robots – systems that collect information from your site on behalf of search engines and other indexers.

Compliant code gives you the opportunity of validating your page with a validation service. Validators process your documents and present you with a list of errors. This makes finding and correcting errors a lot easier, and can save you a lot of time.

Compliant documents can easily be converted to other formats, such as databases or Word documents. This allows for more versatile use of the information within documents on the World Wide Web, and simplified migration to new systems – hardware as well as software – including devices such as TVs and PDAs.

To People

Accessibility is an important idea behind many Web standards, especially HTML.

Not only does this mean allowing the Web to be used by people with disabilities, but also allowing Web pages to be understood by people using browsers other than the usual ones – including voice browsers that read Web pages aloud to people with sight impairments, Braille browsers that translate text into Braille, hand-held browsers with very little monitor space, teletext displays, and other unusual output devices.

As the variety of Web access methods increases, adjusting or duplicating Web sites to satisfy all needs will become increasingly difficult (indeed, some say it’s impossible even today). Following standards is a major step towards solving this problem. Making your sites standards-compliant will help ensure not only that traditional browsers, old and new, will all be able to present sites properly, but also that they will work with unusual browsers and media.

Some consequences of ignoring standards are obvious: the most basic consequence is that you will restrict access to your site. How much business sense does it make to limit your audience to only a fraction of those who wish be a part of it? For a business site, denying access to even small portions of a target audience can make a big difference to your profit margin. For an educational site, it makes sense to allow access not only to affluent, able-bodied school-children with graphical browsers, but also to children in Third-World countries who only have text-based browsers access, or disabled students using specialized browsers.

The same principle applies to all types of Web site – while straying from the standards and taking advantage of browser-specific features may be tempting, the increased accessibility which comes from standards-compliance will lead to far greater rewards in the long run.

Stability

Most Web standards are generally designed with forward- and backward-compatibility in mind – so that data using old versions of the standards will continue to work in new browsers, and data using new versions of the standards will “gracefully degrade” to produce an acceptable result in older browsers.

Because a Web site may go through several teams of designers during its lifetime, it is important that those people are able to comprehend the code and to edit it easily. Web standards offer a set of rules that every Web developer can follow, understand, and become familiar with: when one developer designs a site to the standards, another will be able to pick up where the former left off.

Conclusion

As Web developers, we are constantly trying to address the problem of inconsistencies between the renderings of Web pages by different browsers and browser versions. This necessitates either time-consuming double/multiple coding, or coding for a single browser (which makes it harder, if not impossible, for some of the public to use the site). This situation will be made even worse with the advent of additional hardware and software which will be able to browse the Web, such as telephones, pagers, and PDAs.

Web standards are not arcane laws decreed by ivory-tower organizations. As I have described, the standards are for the most part decided by representatives of the same people who use them – browser makers, Web developers, content providers, and other organizations.

Writing Web pages in accordance with the standards shortens site development time and makes pages easier to maintain. Debugging and troubleshooting become easier, because the code follows a standard. No longer do you have to worry about the coding and maintenance for several versions of code that are supposed to accomplish the same presentation. One version of your site, and that is it.

The universal adoption of Web standards is becoming of paramount importance. The mission of the Web Standards Project is to make the Web a better place, for developers and for end-users, by encouraging browser and Web page editor makers to follow the standards in their applications. This effort will be greatly helped when Web developers use the standards as a matter of course, and insist that generators and renderers of their code comply with the standards.

The reasons I have given should give you, the Web developer, plenty of incentive to begin using standards, and also plenty of ammunition with which you can encourage your place of business and fellow developers to use those standards.

Help make the dream a reality.

HTML Code, Body & Headers Explained

First of all, just as a matter of convention, the first tag in your HTML document should always be the <HTML> tag. Make this your habit. It alerts browsers that your document is written in HTML. Likewise, the very last tag in your document should always be the </HTML> tag – it is a cue to your browser (and to you or anyone else who reads the code) that your page is done.

HTML pages are always broken up into two sections, called the head and the body. The head contains information about the page that other programs might need to know, while the body contains all of the stuff that your readers will see.

You surround the head section with the <HEAD> and </HEAD> tags. It can contain two basic things: the title and “meta” tags.

The title is surrounded by the <TITLE> and </TITLE> tags. Inside these tags, you place the name that you want browsers to show when they display your page. For example:

<TITLE>Bens Body and Headers Explained</TITLE>

You can see how your browser displayed this title information by looking at the very top of your screen.

“Meta” tags are still not supported consistently by all browsers. They can contain many types of information (in fact, they can contain anything you want – they don’t actually “do” anything), but the two basic meta tags that most people use are called “description” and “keywords”. They could look like this regarding this page:

<META name=”description” content=”This page explains the head, body, and HTML tags.”>

<META name=”keywords” content=”HTML, section codes, Ben Hasler”>

You put these on this page so that when a search engine, like Yahoo or Google, comes looking at this page, they will be able to tell what the page is about. Remember that search engines look at millions of pages a day, and they need automated ways like this to record all of their information. If you want your pages to be available on search engines, you should use these tags in the HEAD section of your document.

The description tag should be a simple sentence that describes the content of your page.

The keywords tag should be a list of words, separated by commas, that people might type in to a search engine when they are looking for a page like yours. So for example if I thought people who were looking for information on HTML were to be able to find this page, I would include it as one of my keywords.

For Example

<HEAD>

<TITLE>Ben’s HTML Code information</TITLE>

<META name=”description” content=”This page explains the head, body, and HTML tags.”>

<META name=”keywords” content=”HTML, section codes, Ben Hasler”>

</HEAD>

The BODY section of the page contains all of the information that you are now reading. The body section is started with a <BODY> tag, and is ended with a </BODY> tag. The opening tag can (and should) contain some additional information.

For example, here is the complete BODY tag for an example page:

<BODY

BACKGROUND=”bckgrnds/marblbak.gif”

BGCOLOR=000000

LINK=”#0000FF”

ALINK=”FF0000″

VLINK=”000066″>

Let’s go through this line by line.

<BODY – Opens the BODY tag. Tells the browser that we are entering the portion of the HTML document that is meant to be displayed to the reader. The fact that we haven’t yet included the > bracket means that we have more information to provide about the BODY before we get to the content, though.

BACKGROUND=”bckgrnds/marblbak.gif” – This tells the browser to display a file called “marblbak.gif”, which is located on my server in the “bckgrnds” subdirectory, as the background of this page. It is the gray and white marble-looking background that you are now seeing.

BGCOLOR=000000 – This tells the browser to display the color 000000 (black) as the background color of a page. If you are using a background image, you don’t need to include this line, as the background image will cover up whatever color you specify (that’s what happened here). HOWEVER, the borders on tables, and divider bars (which are created using the <HR> tag) WILL use the background color as their shading color, in most browsers. The proper format for listing hex colors is to include both quotation marks and the pound (#) sign – but most browsers will let you get away with sloppy code, as I’ve demonstrated here.

LINK=”#0000FF” – This tells the browser to display all links in the color 0000FF (blue). Once you visit a link, it will no longer be displayed in this color – it will then be displayed in the Visited Link (VLINK) color. Note that I’ve used the “proper” formatting of the hex color here.

ALINK=”FF0000″ – This tells the browser to display a link in the color FF0000 (red) while the user pushes down the mouse button on it. As soon as the user lets go of the mouse button, the link is no longer displayed in this color. This code gives the user feedback that they are choosing this link.

VLINK=”000066″> – This tells the browser to display all links that have been visited in the color 000066 (light blue). Finally, the > bracket tells the broswer that we are done describing the BODY tag, and we can move on to the content.

Note that the BODY tag was shown over 6 lines – this was for ease of reading and modifying. Your browser didn’t even notice that it was spread over six lines – it read the whole thing as if it was written like this:

<BODY BACKGROUND=”bckgrnds/marblbak.gif” BGCOLOR=000000 LINK=”#0000FF” ALINK=”FF0000″ VLINK=”000066″>

In fact, this is a perfectly fine way to write it.

At this point, you know what you need to know about the HEAD and BODY sections. Let’s look at one final example to see how it all fits together:

<HTML>

<HEAD>

<TITLE>Ben’s Sample Web Page</TITLE>

<META name=”description” content=”This is a bogus page that demonstrates section codes in HTML.”>

<META name=”keywords” content=”HTML, section codes, Ben Hasler”>

</HEAD>

<BODY

BACKGROUND=”bckgrnds/marblbak.gif”

BGCOLOR=”#000000″

LINK=”#0000FF”

ALINK=”#FF0000″

VLINK=”#000066″>

<DIV ALIGN=CENTER><FONT SIZE=7 COLOR=”red”>Bogus Page</FONT></DIV>

<BR><BR>

This is bogus text.<BR><BR>

Click <A HREF=”hthedbod.htm”> here</a> to return.<BR><BR>

</BODY>

</HTML>

<head>; in <style> tags) or external markup (From a “.css” file)

About CSS Rules

A CSS formatting rule consists of two parts—the selector and the declaration (or in most cases, a block of declarations). The selector is a term (such as p, h1,a class name, or an id) that identifies the formatted element, and the declaration block defines what the style properties are. In the following example, h1 is the selector, and everything that falls between the braces ({}) is the declaration block:

h1 {

font-size: 16 pixels;

font-family: Helvetica;

font-weight:bold;

}

An individual declaration consists of two parts, the property (such as font-family) and value (such as Helvetica). In the previous CSS rule, a particular style has been created for h1 tags: the text for all h1 tags linked to this style will be 16 pixels in size, Helvetica font, and bold.

The style (which comes from a rule, or a collection of rules) resides in a place separate from the actual text it’s formatting—usually in an external style sheet, or in the head portion of an HTML document. Thus, one rule for h1 tags can apply to many tags at once (and in the case of external style sheets, the rule can apply to many tags at once on many different pages). In this way, CSS provides extremely easy update capability. When you update a CSS rule in one place, the formatting of all the elements that use the defined style are automatically updated to the new style.

You can define the following types of styles in Dreamweaver:

• Class styles let you apply style properties to any element or elements on the page.

• HTML tag styles redefine the formatting for a particular tag, such as h1. When you create or change a CSS style for the h1 tag, all text formatted with the h1 tag is immediately updated.

• Advanced styles redefine the formatting for a particular combination of elements, or for other selector forms as allowed by CSS (for example, the selector td h2 applies whenever an h2 header appears inside a table cell.) Advanced styles can also redefine the formatting for tags that contain a specific id attribute (for example, the styles defined by #myStyle apply to all tags that contain the attribute-value pair id=”myStyle”).

CSS rules can reside in the following locations:

External CSS Style Sheets

Collections of CSS rules stored in a separate, external CSS (.css) file (not an HTML file). This file is linked to one or more pages in a website using a link or an @import rule in the head section of a document.

Internal (or embedded) CSS Style Sheets

Collections of CSS rules included in a style tag in the head portion of an HTML document.

Inline Styles

Defined within specific instances of tags throughout an HTML document. (Using Inline styles is not recommended.)

 

The Future

HTML5 & CSS3

What Exactly is HTML5?

Clearly, there’s a great deal of interest in, and excitement about HTML5 right now. When someone of the importance of Apple’s Steve Jobs (whatever you might think of Jobs, there’s no doubting his influence) says publicly:

“HTML5, the new web standard that has been adopted by Apple, Google, and many others, lets web developers create advanced graphics, typography, animations, and transitions”

…and when the word “HTML5” appears on the front page of major newspapers around the world, well, you know something is up. But just what exactly is HTML5?

The above quote from Steve Jobs demonstrates precisely how imprecise the term is. HTML5 is not about typography, animations, or transitions (that’s CSS3, the subject for another course). And HTML5 is about much more than advanced graphics (conversely, there’s more to advanced web graphics than HTML5—SVG, for instance).

Increasingly, HTML5 is a brand name that denotes “cool stuff on the Web.” There are many developers out there, whom you might call purists, decrying the sloppiness of the term on the grounds that “HTML5” should only apply to a specific set of technologies that are part of the HTML5 specification. There’s definitely something to that argument, and in fact, this course will almost exclusively focus on that specification. When speaking to fellow web professionals, it makes sense to use the term HTML5 accurately to apply to the technologies defined in the HTML5 specification (though we’ll see in a moment that it’s a little more complex than this). But I take the position that when dealing with a less technical audience there’s no great harm, and indeed a lot of good, for people like my mum to perceive HTML5 as a positive thing that is making the Web a better place.

But as this course is for web professionals, we should be a bit more exact, so we’ll be covering technologies that are part of the HTML5 specification. Not that we’ll be covering all of HTML5, of course—it’s a huge specification, far from complete, and very far from having universal support in modern web browsers. We’ll actually be focusing on a part of the HTML5 specification that is:

of immediate use and value to developers

particularly relevant to semantic and structural markup

useful in a wide range of modern browsers—and where not supported, workarounds do exist

But before we delve into these aspects of HTML5, let’s look at the broader HTML5 landscape.

Where Does HTML5 Come From?

If the rather convoluted history of HTML5 isn’t of great interest to you, feel free to skip to the next section!

After the completion of HTML4 in 1999, the W3C (the organization responsible for HTML, CSS, and numerous, though not all, web standards) began work on XHTML, a new direction for web markup. Many of you will know of and very likely have used XHTML, the first version of which was compatible with older browsers and older versions of HTML. XHTML2, however, was far less compatible, and while web professionals criticized aspects of the new markup language, its development continued within the W3C, with little relevance to the real world of web development.

In 2004, to address the growing difference between the work of the W3C and the needs of web and browser developers, the W3C held a Web Applications workshop. As a consequence of disagreements arising between various stakeholders at this workshop, the Web Hypertext Application Technology Working Group (WHAT-WG) was almost immediately formed by employees of Opera Software, Mozilla Foundation (developers of Firefox), and Apple.

The WHAT-WG began work on its own future version of HTML, then called Web Applications 1.0. In 2007, the W3C began work once more on versions of HTML that weren’t based on XML technologies, with the WHT-WG work as the foundation for what became known as HTML5 (after much deliberation, it was decided there was to be no space between “HTML” and “5”).

So it’s that simple? HTML5 began life as Web Applications 1.0 from the WHAT-WG, moved into the work of the W3C, and is now known as HTML5. Well, not so quickly!

There is, in fact, two versions of HTML5: One developed by the W3C, and one developed by the WHAT-WG. It’s not quite as confusing as it sounds, because for the most part the same people work on both, and the WHAT-WG’s version is a superset of the W3C HTML5 specification—it includes technologies that aren’t yet (and may never be) part of HTML5 as published by the W3C.

For those who wanted the big picture of how it all fits together, this is the broader HTML5 landscape. For our purposes in this course, though, everything we’ll be covering is part of the W3C’s HTML5 specification.

What’s in HTML5?

Okay, now we’ve got that out of the way, what’s actually in HTML5? Well, I like to think of it as having two main areas of focus (at least, from the perspective of those of us who build stuff for the Web). The “markup” aspect of HTML5 is focused on developing web sites and pages, while the API (application programming interface) part is focused on building web applications (think of Gmail as an example of a web application). In this course we’ll be dealing with the first part, but let’s look briefly at the big picture.

HTML5 comprises the following aspects (there are more, but these are the most relevant, well-supported, and useful features right now):

new structural and semantic markup, such as the header, footer, and nav elements

the new canvas element, for creating web-based bitmap graphics using JavaScript

new native audio and video elements, and related elements and attributes for embedding multimedia content that browsers can play without plugins

We’ll be covering all of these features in detail.

In addition, HTML5 features the following powerful technologies.

Geolocation

The Geolocation API, which allows a web site or application to ask the browser where a user is located (including longitude, latitude, and altitude, but also potentially the direction in which they are facing, and their speed; of course, whether the user wishes to share this information is at their discretion). While Geolocation is not and never has been part of the HTML5 specification, it is widely, and I think sensibly, considered part of HTML5.

The Geolocation API is widely supported, in Safari 5, Safari on the iPad and iPhone, Opera 10.6, Firefox 3.5, and many mobile devices. It isn’t, however, supported in Internet Explorer 9 preview releases, and is rumored to not be supported in that browser.

For anyone proficient in JavaScript and the DOM, the Geolocation API is really straightforward to use. A new geolocation object, a child of the document object, provides a number of methods including the ability to watch the user’s location:

navigator.geolocation.watchPosition(function(position) {

showLocation(position.coords.latitude, position.coords.longitude,

position.coords.altitude);

}

Locating the user may take some time, of course, so Geolocation works asynchronously. So we pass the geolocation object the callback function showLocation, which we define elsewhere, and when the position is known, the callback function is executed. It really is a very straightforward technology to start working with.

Offline Web Application Support

One of the most significant hurdles to making web applications as useful as native applications on mobile or other devices is that, while native apps work regardless of whether the user is connected, web applications have typically required the user to be connected in order to work. With HTML5 that’s no longer the case (nor are browser extensions like Google Gears needed as in the past). HTML5 supports offline web applications in several ways:

by enabling resources like HTML, CSS, and JavaScript to be cached, so that if a user goes offline, the browser will have kept these resources, and the application can still be used or even installed locally on a device

by sending events to a web application when the user goes on and offline

These are part of the HTML5 specification. A closely related feature from the W3C, Web Storage is not part of the official W3C specification, but enables the persistent storage of data on the client device between sessions (think cookies, but much more sophisticated and less of a hack). Data stored this way is stored with simple key value pairs. There’s also a partially complete specification for a much more sophisticated storage mechanism, based on SQL. For rather complicated reasons, this partially completed specification is unlikely to be completed as it stands. For some more on Web SQL database storage, see the invaluable article at the HTML5 Doctor.

“Threaded” JavaScript

To date, JavaScript has not easily allowed multiple processes to run simultaneously, meaning that scripts which take a long time to execute can bring most browsers to a standstill, unless developers have gone to some effort to ensure processes that may take some time to pause and frequently hand control back to the browser. Web Workers, which is a specification from the WHAT-WG separate from HTML5 but sensibly considered part of it, addresses this concern. A web worker is a DOM object that can be given a script to run, and which then communicates back to another script the results of the process.

For instance, we might want to find the next prime number after the one the user enters, as in this example from the Web Worker specification. Finding primes can take some time, so we could create a web worker to do the task, which then uses the result:

var worker = new Worker(‘worker.js’);

worker.onmessage = function (event) {

document.getElementById(‘result’).textContent = event.data;

};

Standardized Communication between Browsers and Servers

The communication between web browsers and servers has long been less than ideal; it’s a relatively complicated process. Before the introduction of XMLHttpRequest, it was essentially only possible to communicate whole pages at a time between browser and server. The introduction of XMLHttpRequest (originally in IE5, and widely adopted some years later in other browsers) enabled web pages and applications to communicate with the server, but browsers must still explicitly request data from a server.

There have been relatively complicated techniques, which collectively go by the name of “Comet” to enable the server to send data (for example, when a process on the server is completed, or the server state changes in some way) without the client explicitly requesting that information. The Web Sockets API (a specification from the W3C, but separate to HTML5) and the Web Sockets protocol (being developed by the IETF) allows genuine bi-directional communication between the browser and a web server in a standardized approach (either the server or browser can independently send messages to one another). Web Sockets is currently supported by Firefox, Safari, and Chrome.

For a good overview of Web Sockets, see this article.

Richer Forms Support

As its original WHAT-WG name implies, HTML5 started life focusing on web applications. One area in which this was particularly evident was Web Forms. Web Forms are now officially part of the HTML5 specification, so even the most pedantic may safely refer to them as HTML5!

Web Forms include many new possible, commonly used input element types, such as sliders and date pickers, as well as attributes like required, and a placeholder text. We’ll be covering some of the most useful, widely supported, or backwards-compatible aspects of Web Forms in Lesson 4.

Much More

There’s much, much more in HTML5 (either directly part of the specification, or in closely related specifications) that we haven’t touched on, including:

native drag-and-drop of elements within a page, without the need for often-complex JavaScript

standardized editable page content

the ability to drag files directly from your desktop

Not all of these are widely supported in today’s browsers, though, so read on for where you can learn more.

Introduction to CSS3 – What Is It?

What is it?

CSS3 offers a huge variety of new ways to create an impact with your designs, with quite a few important changes. This first tutorial will give you a very basic introduction to the new possibilities created by the standard.

Modules

The development of CSS3 is going to be split up into ‘modules’. The old specification was simply too large and complex to be updated as one, so it has been broken down into smaller pieces – with new ones also added. Some of these modules include:

The Box Model

Lists Module

Hyperlink Presentation

Speech Module

Backgrounds and Borders

Text Effects

Multi-Column Layout

View the full list of modules

Timescale

Several of the modules have now been completed, including SVG (Scalable Vector Graphics), Media Queries and Namespaces. The others are still being worked upon.

It is incredibly difficult to give a projected date when web browsers will adopt the new features of CSS3 – some new builds of Safari have already started to.

New features will be implemented gradually in different browsers, and it could still be a year or two before every module is widely adopted.

How will CSS3 affect me?

Hopefully, in a mainly positive way. CSS3 will obviously be completely backwards compatible, so it won’t be necessary to change existing designs to ensure they work – web browsers will always continue to support CSS2.

The main impact will be the ability to use new selectors and properties which are available. These will allow you to both achieve new design features (animation or gradients for instance), and achieve current design features in a much easier way (e.g. using columns).

Future articles in this series will each focus on a different module of the CSS3 specification, and the new features they will bring. The next one relates to CSS3 borders.

 

My Own Piece Of HTML Coding

Below is an example of a piece of HTML coding featuring the basic page structure including Doctype, HTML, head and body, Paragraph text, an unordered list, an H1 heading, an image and a page link.

HTML Code:

Above is a split screen view of my HTML coding allowing you to see the code and the actual webpage. Not the various tags. For example: <h1> for the Header, <h2> for the Secondary Header, <ul> and <li> for the Unordered List, <p> for Paragraph and <a href=> for the web link.

CSS Syntax:

Here we can see the same HTML page as before but with the style sheet attached. Not the line spacing added to the paragraph and the size and colour of the headline.

That brings about an end to my overview of HTML and CSS. At first glance it appears to be quite honestly, a bit of a head f**k. It seems like somebody has thrown up a load of random type onto a page. But once you get down to it (I found it best to do this in a darkened room with no distractions what so ever as otherwise you have no hope) and get down to actually playing with it and experimenting its amazing how quickly some of it goes in. I don’t think I will ever be the best coder in the world but at least now I feel confident I can create a website that looks good and works, which I guess is the main thing, and at the end of the day what I wanted to get out of this course! There are still a few areas that don’t make sense to me, mainly where a few bits of code need to go in order for them to work properly but the basics are definitely forming. At one point I was particularly worried that I wasn’t going to get this project done as I had a mountain of work come up in January and February. So to basically put this 6 week project together in 2 weeks I am quite pleased with and it just goes to show that with a little knowledge these things don’t take long to create. I’m looking forward to the next project as a great opportunity to expand my knowledge further.