Forum workshop

Forums

If you were to put a forum on your site you would firstly have to consider security. The second thing you would have to take into account would be whether the theme would suite your site and be editable, the price and the amount of time it would take to moderate.

The one I decided to look at in class was ‘Vanilla’ which had some free forums to try which were very simple to add to a web page. I downloaded the free forum styles, but here used one which only involved copying some code and pasting it to my page.

I also tried PunBB in class. I downloaded the source files from punbb.org, unzipped the software, and put the SpinkBB css into the folders.

I then tried putting different widgets into the page which was also very straight forward. I went to widgetbox. There are so many that you can customise to fit in with your site, changing the size, colours etc.For one of these I chose the subject matter, ‘Natural Cleaning tips’ to fit in with the website I had chosen to do, and the other I could also choose the subject, ‘Cleaning tip of the day’. The Google search menu bars were also straight forward to add.

Dreamweaver Spry

I tried out the spry accordion in Dreamweaver, which was easy to follow and change colours and sizes in the css. The tabs, tab panels,collapsable menu and menu bar, all worked in the same way.

Flash

We spent one class concentrating on Flash which seemed much easier to get the hang of than Dreamweaver. I could imagine that if you had the time to spend you could produce some interesting things. I was doing quite well in class until I lost everything having not remembered to save! Should have learnt that by now!

deciding on a theme

For our first Web 2.0 workshop we were to create a logo out of a word and a shape using the custom Shape Tool, gradient overlays and drop shadows.

We have to make our mind up pretty quick as to what our next site is going to be. It has to incorporate Web 2.0 features, be simple and bold but also bring people together as in a community to share information and ideas.

As I was walking home I passed the Duke of York cinema and thought it would be quite good idea to do a site for them. It has a bar and coffee and cake shop with comfy sofas, where friends can meet up. I thought it may be interesting to try and recreate that sort of atmosphere on a website, with places where people could talk about films that had just been shown, or up and coming and even show short films they had put together themselves. I looked at the top ten independent cinema sites but didn’t really see anything inspiring apart from the site the Duke of York has at the moment to celebrate 100 years.

This site is really clearly set out, the navigation is really bold and easy to follow, the fonts are large and clear, it has a central layout, a really clear sidebar and is also very interesting. I don’t think I can top that really…I’ll have to think of something else.

Another idea I had was to do a site where people can share household tips, the sort of thing your Granny would have told you. People are really trying to be ‘green’ and save money in the this economic climate and are happy to share any tips they have. It could extend to the garden and bits of DIY. There would also be a chance to incorporate or have links to other eco friendly sites.

I did find a few sites that have this sort of thing, none of them looked as if they had been designed at all. The obvious style for this I supose would be a retro, 50’s housewifey feel, the challenge will be to combine this with a simple, shiny web 2.0 look.

I have just found loads, of course it’s possible!

I really like the subtle colours used on this site and the simple layout. I love the ribbon leading you down through all the information and the fact that the the footer stays attached to the background. So the important navigation remains static, with a slight opacity, while you scroll down or click on any of the buttons. Even though the navigation is at the bottom of the page it is really obvious as there is virtually nothing else on the page.

This Shabby chic site fits all the web 2.0 style requirements, central, very simple clear layout with minimal easy to use content but retains a unique style of its own without having to use shiny buttons.

the web 2.0 phenomenon

What is web 2.0?

Although web 2.0 suggests a new version of the World Wide Web, it doesn’t 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 all meet and read and write”.

Web 2.0 is the second generation of the World Wide Web, especially the movement away from static webpages to shareable content and social networking. While there is no set definition of Web 2.0, it generally refers to the use of the web as a more social platform where users participate by generating their own content alongside the content provided by the websites. It marks a fundamental change in how we use the Internet.This DIY festival site has aTwitter, Facebook and events screen on the Home page updating as you are on the page.

Web 2.0 is the move toward a more social, collaborative, interactive and responsive web. It is a change in the philosophy of web companies and web developers, but even more than that, Web 2.0 marks a change in us as a society as well as the Internet as a technology. In the early days of the web, we used it as a tool. Today, we aren’t just using the Internet as a tool — we are becoming a part of it. Web 2.0  is the process of putting us into the web. It is a social web, our society today is merging with a network of computers. Not only are we increasing our usage of the internet at home but are increasingly carrying around a version of it in our pockets, and changing the way we interact with it. Web 2.0 is about people connecting with other people.

This has led to a social web where we aren’t just getting information from a computer, but we are  connecting with other people to hear what they have to say on a subject. We do this in the form of social media sites like blogs (Techcrunch, Mashable), social networks (MySpace, Facebook), social news (Digg, Propeller) and wikis (Wikipedia, Wikia). The common theme of each of these websites is human interaction. On blogs, we post comments. On social networks, we make friends. On social news, we vote for articles. And, on wikis, we share information.This party gift site has very clear, simple buttons to share information on the main social networks

These Web 2.0 ideas of bringing the power of people into the Internet wouldn’t be possible without the technology to support it. For the collective knowledge of people to be harnessed, websites must be easy enough to use so they don’t stand in the way of people using the Internet to share their knowledge.

Web 2.0 is not only about creating a social web, but also about creating a more interactive and responsive web. AJAX become central to the idea of Web 2.0. AJAX, which stands for Asynchronous Javascript And XML, allows websites to communicate with the browser behind the scenes and without human interaction. This means you don’t have to click on something for the web page to do something. It is not something that was possible until the last few years. And what it means is that websites can be more responsive, more like desktop applications, which means that they are easier to use. This allows websites to harness the collective power of people because the more difficult a website is to use, the less people that are willing to use it. So, to truly harness our collective power, websites must be designed to be as simple as possible so as not to get in the way of people sharing information.

The idea of a social web has transformed the way we think and the way we do business.

The idea of sharing information is being valued as much as the idea of proprietary information. Open source is becoming a significant factor and the web link is becoming a form of currency.

Visually, a good web 2.0 site  has to have at least some of these elements:

 Simplicity. Central layout. Fewer columns. Separate top section. Simple nav. Bold logos. Bigger text. Bold text introductions. Strong colours. Rich surfaces. Gradients. Reflections. Cute icons and Star flashes.

Simplicity should be the main feature with all the rest helping to make that happen.

Unnecessary elements should be stripped out. The result of this is that you have to look at the content. You should find yourself interacting with exactly the screen features the designer intended and you shouldn’t mind – you are getting what you came for. It should be a discipline to consciously remove all unnecessary visual elements.

Web sites have goals and all web pages have purposes, it’s the designer’s job to help users to find what they want (or to notice what the site wants them to notice). Stuff on the screen attracts the eye. The more stuff there is, the more different things there are to notice, and the less likely a user is to notice the important stuff.

We need to enable certain communication, and we also need to minimise noise. That means we need to find a solution to the brief with as little as possible which is economy, or simplicity.

This Pixel Matrix site uses a simple grid system, great colours and a really good hierarchy of information. This is enhanced by Web 2.0 elements of gradients, subtle details, large, highly legible fonts, a great number of ways to stay connected, and the contact form has nice rounded corners.

These layouts use really strong colours for the navigation and large bold tabs. All the information is immediately visible, they are clear, clean and bold using a single column or image across the home page and a central layout.

Both these layouts use strong single and central images, the information is really well organised and easy to find what you are looking for. The premium site uses subtle gradients and a drop shadow for the image.

The ‘2.0’ style sites that sit straight front & center feel more simple, bold and honest. Also, because people are being more economical with the content, they don’t seem as pressurised to cram in as much information as possible.

Designers are using less to say more, being a bit more free with the amount of space used, and the content has lots of lovely white space.

A by-product of  centered layouts, is fewer columns, 2 is common, and 3 is the mainstream maximum at the moment. Because designers are not filling the whole screen so much, and not trying to get as much on-screen at any one time, they don’t need as many columns of information. Less is more. Fewer columns feel simpler and bolder, designers are communicating less information more clearly.

Logos are also becoming bolder and where possible, because there is less on the page the type can also be bigger. This means that not only does the bigger text stand out, but it’s also more accessible to more people.

Web 2.0 sites – Tumblr

Apparently, the Tumblr blogging site has become a really big craze with young girls all over Europe and America. They are mainly blogging about fashion and anything else that is current. But it is now not only young girls that are using Tumblr as recently ‘Mashable’, the social media news blog, published a trend piece on the rush of fashion brands to Tumblr. Companies like Kate Spade, Oscar de la Renta, and Alexander McQueen, not to mention magazines like Vogue, V, and Elle have recently created Tumblr accounts.

The Tumblr website is a public blog. It’s a place where people can come together and express any feeling they care to. Many teens take interest in this website because it’s a place that they can express who they are and their thoughts without being ridiculed for it. It’s a way where they can say things that they may not have the courage to say in person. It’s also popular amongst the younger generations because it’s similar to Facebook. Though it’s a blogging website, users are able to build connections with other users and create a relationship.

Users are able to “like” posts from any of the users that they come across. They are able to respond, and even reblog thoughts that others have posted. Instead of having friends as Facebook does, Tumblr has followers. At any time, a person can follow or unfollow any particular blog that either caught or lost their interest. For many teens, Tumblr is just a place where they can be themselves. Young people use it as a place to vent their feelings.  All of the posts are creative and it has a wide variety of things that keep them entertained. In addition, Facebook has created a way for users to even connect their Tumblr pages to Facebook and show their posts on the news feed.

It has a classic web 2.0 feel to the home page which is really simple, the background is one overall colour, adding to the simplicity of the site, and is a really subtle, sophisticated, strong blue. There is an invitation to sign up or find out more with a bold link at the bottom of the page. Everything is central and very bold.

If you want to follow the bold link at the bottom of the page and find out more about Tumblr, you will find everything layed out in a very simple, clear way. Here everything is explained in a very clear user friendly way. Everything from themes to choose from, designing your own, updating, linking with facebook, private blogging, analytics, a help centre and much more to make the experience straightforward. What’s more it’s free!

You are able to design your own blog but the range and number you can get which are already done is huge, to suite every need.

final hand in

building my website

After planning which pages I would need on the site and how they would link together I started working out the layouts in Photoshop. When I had decided on most of the images I cropped them as I wanted them in Photoshop and optimised them for the web by saving for Web and devices. Most of the images I saved as jpegs but for those I had used in a polaroid background I saved as PNGs as I wanted to keep the transparency where I had added a drop shadow. We did get quickly shown how to do this in CSS3 but when I came to try, it seemed easier to stick with what I had already done. The pictures I used throughout the site as polaroids I also posterized in Photoshop to give them more of a fun feel and to be in keeping with the vector background.

I thought I would stick with the signpost idea that I had tried in Illustrator using the Live Trace mode. I changed the colours slightly of the sky to make it look a bit brighter, and put a gradient on the bottom so that it faded to white when scrolled right down. It wasn’t until I had put it into Dreamweaver that I realised I would have to separate the sky from the signpost so that the signpost would remain in one place on my Home page.

To begin with I made a Main folder with an overall project name for my site.  Inside that I put a folder called ‘Original Docs’ with sub-folders ‘Original Text’ and ‘Original Images’. I put in a folder for my Photoshop PSDs,  with subfolders called ‘Test’ and ‘Real’. Then a folder called Real Website which would be the folder for all my web pages, website images, CSS and Javascript files. No other files must go into this. After creating the folders for my site, I decided to put in the navigation and the logo and added them to the five pages I had saved and copied, linking the text navigation on all the pages.

To begin with the program was hard to work with as it is so different from any other program I have used. For instance, it took a while to work out that by copying over the AP DIVS that I had drawn for the index page meant that everything I did when moving them or putting images in the background would appear on all the pages!

I started to add the pictures that I thought were appropriate to give the home page a friendly, fun look and feel but also trying to show at a glance what the site was about. Walking, dogs and partners. The target audience I was trying to attract to the site was really quite large. Any age group or sex that could walk and who loved dogs. I have tried to include photos of all age groups, young and older enjoying being outdoors.

When first looking at the about page I thought I would use a large vector image on each page, but in the end decided that I needed to have a lot of ‘happy people and dog’ shots to put over the idea of the site properly.

I decided to put Real life stories on the About page with pictures of the couples who had been brought together by their dogs. I linked their names underneath their photos using named anchors. These linked to a specific place where they were telling their story in the text. I also used a link at the top, to the text ‘Back to top’ within the text where each couple ended their story.

I put hot spots on the pictures on the Home page to link to the About page where more could be found out about the people in the pictures.

I also added a You Tube video to this page that I found ‘Walking the Dog – Beginner’s Luck – Gershwin’. This is about a man who borrows someones dog to walk, and use to get to know a beautiful girl he is trying to find an excuse to talk to! To do this the code from under the video on the You Tube page was put into the HTML code in the position that the video was wanted on the page.I decided to use the coloured panel I had used for the navigation to tie the pages together. I put the times and days of the organised walks within this panel. I linked the name of each walk to the maps page so the visitor can get more information.

When I started putting these pages together in Dreamweaver the fact that such things happened as, the images that were put into the Divs would suddenly appear on a different part of the page was very irritating and confusing. After a while it did become easy to look at the code and see where the problem was, and where the code for the image, for instance should be put. Quite often things would have to be put back inside the wrapper. Another thing that was very useful to get to know when using the AP DIVs was the Z -Index, how high the item was within the stack.  

Until I got used to the layers, code and divs, putting these pictures together on the maps page became very frustrating because I couldn’t get them to behave as I wanted. I tried using a table but couldn’t get rid of the borders, which I didn’t want. After a while when Dreamweaver started to sink in a bit more I redid the page and got the effect I was after! I used pop up windows on the page to show larger images of the walks. To begin with this opened up behind my web page, which meant that the ‘close’ button didn’t work, and my web page showed over the top. This was corrected by opening the Slimbox CSS file and putting in the missing Z-index on the overlay. z-index:9999; was typed into the code and it then opened correctly. This meant the pop up box was in the highest layer. Also on this page I put links to PDFs of maps. There is one for each walk that can be opened and printed off if required.

I also put a link to another website which had different walks and information for people wanting to know the best places to go with a dog.

On the contact page I put a form which we experimented with in a class workshop. It included fields for name, address, age, and email address. Check boxes for gender and a drop down menu for how many dogs were owned. We also put in a Submit button where we had to put the email address we wanted the form to go to in the PHP Process form.

There is also a link on this page to an email address for anyone who would like more information. I used a text link for this using a font that I had downloaded from Font Squirrel. We had to define the rule, calling the font “font-family”.

@font-face {

font-family: ‘JournalRegular’;

src: url(‘journal-webfont.eot?’) format(‘eot’),

url(‘journal-webfont.woff’) format(‘woff’),

url(‘journal-webfont.ttf’) format(‘truetype’),

url(‘journal-webfont.svg#webfontKxGpfKgK’) format(‘svg’);

font-weight: normal;    font-style: normal;

I also added an MP3 file to this page. I didn’t want the skin to open up on a completely new page so I changed the behaviour by going to window>behaviours. Clicking on add behaviour> open browser window, browse to the MP3 file and put in the required measurements of the bar.

I designed a Favicon in Photoshop 32 pixels square to begin with. I used the vector image of the signpost from the Home page. I used the Dynamic Drive website to generate the icon and put it into the web folder. It won’t be visible on the page until the site has been uploaded.

In the HTML code I put the title which will show in the browser window and meta tags for the description and the keywords, used by the browser to find your page.

I have tested the site in Safari, Firefox on the Mac and Internet Explorer and Firefox on and PC. The only thing really that isn’t showing correctly in Safari where I added code to keep the visited links blue on the About page so that the ‘Back to top’ text could be seen, this also doesn’t show up in Explorer.

}

#main a:visited{

color:#33F;

In Internet Explorer the video doesn’t play, the MP3 or the pop up boxes for the pictures. The smooth scrolling doesn’t work either.

I have tested on monitor resolutions of 1024 x 768. On the smaller screen the website fits into the screen perfectly but with no background showing and with a need for a small half scroll down the page.

This is the Thank you page that a visiter will be taken to once the form on page five has been submitted.

CSS Layout AP DIVs

Instead of using templates we looked at an alternative way to lay out our web pages in Dreamweaver, using AP DIVS. To start off we went to Site>New Site as usual and located where our file would be stored. We then created a blank page, File>New then blank – HTML – <none> and then create. We then drew the AP DIVS on the page, going to Layout, making sure we were in Standard, click the Draw AP DIV button, then drew on the page a div for the header, sidebar, footer and main content or whatever was needed. Each DIV must then be named by clicking on the top left corner of each DIV box and putting the name in the element box. We used the example below to start with.

I found using this method much simpler than using templates and so decided to use AP divs for my main site. It seemed much more flexible and easier to move things around on the page.

research for web site

I started off  thinking along the lines of an event for Labradoodles, mainly because we have just got our second one and I had heard of a yearly get together for these dogs a while ago. I also started looking at walkers sites and the benefits of dog walking. One of the things I always find amusing about dogs is there owners, and the way people interact when they have a dog.

People talk to you all the time when you have a dog. I did recently suggest to a single friend she should get one to increase her chances of meeting someone! This led me onto thinking about a dating site for dog owners especially as it is well known that Ben Fogle and Davina Macall met their partners while walking there dogs.

I found these articles about people meeting because of their dogs or wanting to meet someone because of  their dog!

As I started looking I did find quite a few references to dogs bringing people together not only romantically but people also formed close friendships. I did find a couple of dating agencies for people with dogs one being www.petspartnersandpals.co.uk and a speed dating event for people with there dogs!

I started to think about what would go onto each page of my site and put together a rough page in Photoshop to make a start using images I had already. After looking at alot of walking, dating and doggy sites I thought most of them looked very messy and slightly dull. I really wanted my site to look lively, colourful and fun, so that any visitor to the site would not think the people using it were stereotypical walkers and doggy people!

I  used the live trace option in Illustrator to turn some images I had into vector images which I thought could work for this sort of site.

I feel happier with this page although I need to find a good owner and dog picture to go in the corner. I would really like the navigation to drop down a bit like the example below but I’m not sure if we are going to be able to do that yet.

linking in Dreamweaver

In this workshop we went through the same procedure to make a new website using images and text that were supplied. First of all we made a link to an email address. We put some text on the site that we wanted to act as the link to open the email window, highlighted this text then went to Insert> Common>Email link and put in mailto: and then the email address that we wanted to link to. We went to a web site to obfuscate the address. This gives you a code to insert into your page that will guard against spamming.

To add in a link to another web page we put in some text on the page that we wanted to act as the link to another page. In this case we put ‘Visit our other site’, highlighted this text then put the web page full URL address in the link box in the Properties panel. We made the website link open in a new window by choosing ‘blank’ from the target option on the Properties palette.

To link to another file and open it, such as a PDF, we put in some text to highlight, ‘download info here’ and used the point to file to point to the document in the files panel. This then opened the PDF in a separate window when the text was clicked.

We also put in a MP3 sound clip. We first went to Insert> Media> Plugin and chose the file we wanted to add.

We inserted an FLV or Flash video clip. These can be compressed and played on a variety of browsers without the need for video player plug-ins. We selected  Insert> Media>FLV and browsed to the clip which we wanted to insert. We selected a skin style, which are the controls that are used to stop play and pause the video and entered the size we wanted the video to appear.

To insert the ‘You tube’ video we put the cursor on our DW page where we wanted it to appear. Went to the clip on ‘You tube’ that we wanted to insert. We clicked embed and copied the code into our DW page where the cursor was placed. Saved and tested in the browser.

Named anchors in Dreamweaver

In this workshop we again opened a new template in Dreamweaver. We put in the prepared header for the site and the supplied pictures following the same procedure as before. We added a new div tag for the navigation bar, put in the text ‘Home’, ‘UK News’ and ‘World News’ for navigation and linked the three pages. We went to ‘Modify’ – ‘page properties’ – ‘link styles’ to choose the appearance of the links. Here we could choose the colour of the type, the colour when the mouse rolled over the link and whether the link was underlined or not. After testing in the browser we added a long piece of text to the UK News page and some simple headings to the top of the page to link the text back to. We then added the ‘named anchors’.

Anchors are links which let a visitor link to another part of the same page or to a certain part or paragraph on another page as opposed to just linking to a whole page. For example they could be used to link a list of contents to certain related paragraphs on a long scrolling page or to enable a visitor to get back up to the top of the page if they had scrolled all the way to the bottom (ie. a ‘back to top’ link). This is what we did in the workshop.

We went to the ‘insert’ – ‘common’ then to the ‘named anchor’ button and typed a name in the anchor name field. An anchor  then appeared where the cursor was placed. The text was highlighted where we wanted the link to go to. We then used the point to file button to point to the anchor.

We also added anchors to the headings in the text and linked them back to the text we had highlighted at the top. Now when tested in the browser the headings at the top take you down to the relevant piece of text and when you need to go back to the top the linked ‘back to top’ text takes you back to the top.

Editing a Dreamweaver template

After looking at the source code for the photographers sites we started laying out our first simple site using a Dreamweaver template.

We created a folder on the computer, named it and payed particular attention to where the file was placed as DW has to have EVERYTHING in one folder.

We went to Site > New Site. Put a name for our site and under Local Root Folder navigated to our folder and selected it.

We then went to File > New and chose Blank Page > HTML > 2 column, fixed, left sidebar, header and footer. We made sure Layout CSS is set to Create New File, then clicked ‘Create’.

We wrote a name for our style sheet. It defaulted to twoColFixLtHdr.css but we renamed it styles.css (no caps, no spaces between words).

We opened our CSS styles palette and double clicked on the items we wanted to edit. The first thing we added was the header that we had created in Photoshop. We clicked header in the CSS styles panel, then under background – then background image, we clicked browse, then navigated to our header image.

We added a navigation panel by clicking the plus symbol for a new CSS rule, chose ‘class’ then a name which was #navbar. We made sure it was set to styles.CSS then ok. We could then choose the type and style, the panel size and colour and anything else we wanted to do.

We made three other pages calling them About, Gallery and Contact us, so that we could link the pages with the navigation bar. To do this we highlighted each navigation heading in turn on the index (home) page and with the ‘point to file’ button in the Properties panel we attached it to the corresponding page in the files panel. We then copied all the headings on the index page and pasted them onto each of the other three pages in the navigation bar so that the links were all copied over.

We then tested in a browser to check everything was working by selecting the preview in browser, globe button.

We added the gradient we had done in Photoshop and set it to repeat so that it would go on indefinitely when the page was scrolled down. We added images by either dragging them from the file panel or going to Insert-Image.

We put in a <title> for the site in the <head> section of the code, which was ‘northlaine,brighton,photography’. Then also in the <head> section we put meta tags for the keywords and the description.