Web Technologies Research
Key words and acronym meanings.
1. Website - A website is a place on the web where you can find content. The content can be in any form. It could be a video, text or image.
Examples of websites:
http://www.mono-1.com/monoface/main.html
http://waterlife.nfb.ca/
2. Web Application two way interaction application coded with web technologies
3. Uniform Resource Locator - A Uniform resource locator also known as a URL is a internet address which take you to websites.
4. Content - Content is the information you find on the website. The content can be in any form. It could be an image, video, text ... Its what makes your website.
5. Layout - The layout is the way the website is constructed. Its the way you choose to group and construct your site.
6. Structure - The structure is the overall layout of the site. ie. How all the web documents on your site a placed together.
7. Cookies - Cookies are files you download when you visit a site. You can then later read them in notepad. There normally used to record someones session on the site. They can also be used to automatically remember peoples account detail's for when they return to the site.
8. Servers - Servers are the physical location of websites.
9. Remote - Remotes are machines containing websites external to your location
10. Local - Your own connection using a browser to the web
11. File Sharing - File sharing is the sharing of files between people. p2p or peer to peer is the most common type of sharing which loads of people do. Its the system of sharing files between local machines.
12. E-commerce - E-commerce basicly means making money over the internet. The business of buying and selling on the internet. The virtual economy.
13. VOIP - VOIP is your voice over Internet. So it basically means communicating over the internet. This could be done in many ways. Here are a few of the main ways people might communicate using the internet: Teamspeak, facebook, skype, msn the list is really endless. The main reason why people do it is because its quick, easy, cheap and if it does cost anything its usually cheaper then a phone line.
14. HTML - HTML or Hypertext Markup Language is the language used to program and write websites
15. XHTML - E(xtensible) Hypertext Markup Language
16. DHTML - Read Canvas
17. JavaScript - Programming Language, called a scripting language used for behavior (interactivity in web pages)
18. Perl - Used often for processing forms
19. PHP - PHP Hypertext Preprocessor
20. ASP - Microsoft version of PHP - called active server pages
21. Java - programming language used to make applications, web applications and games
22. Client Side Scripting - Client side scripting is when web programs are run from the client. Most commonly from there web browser
23. Server Side Scripting - Server side scripting is the opposite of client side scripting. Instead of running from the clients side its run from the server side.
24. Cascading Style Sheets - CSS is the language used to alter the website style sheet. It's used to style your website. Meaning what your website looks like.
25. FLV - FLV means flash video format. Its a format for videos. Its used to play videos over the internet.
26. Canvas - Interactive Element which behaves like flash within an HTML5 document
Website issues
Access Speed - The access speed of your site is important because if its to slow no one is going to want to use it. They will use someone else's site if it means finding the information quicker.
Content - Its important to have the right content on your site. For example you should't have a website based on football and then have content about fashion on the site because its not relevant and its notwhat your viewers want.
Website colours - Its important to have good colours on your website. This can be for a number of reasons. One reason might be so it catches the users eye and draws there attention. Another reason why it might be important is usability. If the colours make it hard to read or understand something on your site it can effect how easy it is to use your website.Here's an example of a site that doesn't use colours well.
http://www.sixtiespress.co.uk/
Image format - Its important to use the right image format on your website. Some image formats are not compatible on older web browsers and other image formats can make your website slower.For example in this site it has GIF's that rotate images and if your trying to scroll through the site quickly it can cause the site to lag and jump about.
Here's an example of bad image format's.
http://www.lowpriceskates.com/
Over use of graphics - Its important not to over use graphics on your website. When creating your website you should try and find a perfect balance between the right amount of text and the right amount of image's/Graphics. If you have to many image's it can have a few negative effects on your site. For example it add's to loading time which is access speed. Another reason why you shouldn't have to many image's is it can make your website look very amateur. Also people that come to your site looking for information and all they get is picture's they will be disappointed, which takes me back to content. Another reason user's might not like it is they could feel over whelmed by all the images.
Here is an example of a site with way to many graphics.
http://heaven.internetarchaeology.org/heaven.html#bottom
Here is an example of a site with way to many graphics.
http://heaven.internetarchaeology.org/heaven.html#bottom
Music - This one especially bugs me in particular. I hate it when I load up a website and background music play's. I find it really annoying. What makes it worse is some websites wont add the option to turn it off so your stuck with it playing in the background. Another reason why its annoying is its often to loud. This is even worse for head set users. It often will shock you when suddenly music is blasting through your head set. Music playing in the background should only be used if its really necessary. Although some times it has a really good effect on your visit to the site. If done well and used correctly it can really change the atmosphere of the site.
The music should away's have a volume gradient meaning it starts of quietly and gets louder over time. This is so you don't give that shock to visitor when they first load up a page.
Here is an example of bad background music on a site.
http://www.shorewoodlubeandservice.com/
Here is an example of bad background music on a site.
http://www.shorewoodlubeandservice.com/
Website tutorial
My Website design
This week we were given the task to create a professional looking website following a website tutorial given to use through blackboard. The exercise was useful for learning the dream weaver basics. The only problem is the more advance techniques we need to know to create a professional looking website
are a lot of the time very hard to remember because when you follow a tutorial you don't always take it in. Here is a image of my website after I had finished the tutorial.
My Website design
I started of by designing my website on paper. I did my basic design of my index (home page) first. I wanted all my pages to use the same page design and layout.
This would make it a lot easier when making it on dream weaver because instead of having to re-make every page I could just copy and paste one of the page's. All I wrote for nots on the sheet is the banner would be 960PX and the image/text box would be 940.
I then designed the rest of my pages. I used the same design as I used for my home page I just changed the content with in the boxes. The only thing that changed on each page was the button would change colour depending on which page you had opened.
Here is my website design I made on Photoshop following my on paper design and using the 960grid templates which are downloadable from the internet . I chose to create my website with a grungy feel simply because I think more people would create the slick and modern looking website and I wanted mine to be different and out of the ordinary. This would make it a bit more interesting for people when there viewing my site.
My Website
Problems I encountered
When building my website on Dreamweaver I came across some problems.
When building my website on Dreamweaver I came across some problems.
One of my main problems is the image slider. The only way you can make the image slider work the way I planned it to work is by using Flash. My plan was when you moved the slide along the slide channel it would change my image. I thought I would be able to do this by making the slide a separate image to the slide channel then do some coding along the lines of. When slider at *Y axes change image. But it turned out you cant do that kind of coding with in Dreamweaver.
Another problem I came across when creating my website was creating the text. When I originally did my design on Photoshop I used the font Aachen. My first issue was the font isn't on Dreamweaver So I had to download the font from the internet and edit the Dreamweaver font list. Once I had added it to the Dreamweaver font library I came across another problem. When I went to preview my website it turner out the web browser Safari doesn't support that font. But if I open the font in Google Chrome or Firefox it worked fine. The only way I could think of getting around this issue is changing the font so I chose a font that's supported by all browsers ( Impact ). It was hard to find at font at first that worked with all web browsers and went well with my grungy website feel.
Another problem I found with my website was the image format. At first I had it in a strange format that a few of the web browsers couldn't read. But that was an easy fix all I had to do is re-open the image in Photoshop and then re-save the images as a PDF, JPG or GIF, I chose PDF because its useful to have vector files so I can change the size at anytime and not effect the quality of the image.
Another problem I found with my website was the image format. At first I had it in a strange format that a few of the web browsers couldn't read. But that was an easy fix all I had to do is re-open the image in Photoshop and then re-save the images as a PDF, JPG or GIF, I chose PDF because its useful to have vector files so I can change the size at anytime and not effect the quality of the image.
I also had a problem with the layout. Because when I opened it in different browsers some of the stuff got shifted around. This was again quite easy all I had to do is copy and paste the reset code that was provided by meyer.
Creating my website
The First thing I did on dream weaver after planning out my site and designing it on Photoshop was create div tag's. I inserted 4 div tags for the page's I would later be making.
After I inserted the div tags I then split the div tag into four sections, one for each of my pages. I then added the button images and the text in that I would be using for each page. After putting both of them in I then put them to the correct place using the coding shown in the image.
I then did my background. I wanted to go for a grungy theme website. So I found a image that would suite the theme well. Once I had found that image I put it to the size that I wanted the background to be ( 940 x 1020 ) using Photoshop. After I have finished the background I added it to my website's image folder.
Once it was in my image folder all I had to do is go to 'Page properties' then 'appearance' then browse for image and find the correct image. Once I inserted the image I found it wasn't centered.
I was able to put it to the center of the page by using the 'margin: 0 auto;' code.
I also found the background was repeating so I had a never ending scroll to reach the bottom.
I fixed this by adding a 'background-repeat: no-repeat;' code shown in the image bellow. I did this because I want to have a set size for my website. Then people using bigger screens would have a black border which was a never ending expandable size. Meaning how ever big there screen is it wouldn't make a difference to the my website.
After putting my background image in I wanted to add the banner in. I did this the same way. By creating the banner in Photoshop and then saving it to the correct format (PNG) and putting it inside the image folder. Once It was in the folder I was able to do the same thing as I did with the background. I simply added it to my div tag and put it in the correct place . Once it was inside the div tag I put it to the correct place using the 'align: center;' code. After doing that It looked like the image above.
Once I had done that it was time to add some content. I simply got a piece of work I had done in the past and added it to the div tag below the banner. Like shown below
After adding in the image I put it to the center using the same code as I used to center my background. The next step was creating a carousel to rotate through some images I had made in the past. I added the image's into the image folder of my website. After doing that I got the coding and java scrip's from the css trick's website and applied it to the place's the tutorial showed me to.
Creating my website
The First thing I did on dream weaver after planning out my site and designing it on Photoshop was create div tag's. I inserted 4 div tags for the page's I would later be making.
After I inserted the div tags I then split the div tag into four sections, one for each of my pages. I then added the button images and the text in that I would be using for each page. After putting both of them in I then put them to the correct place using the coding shown in the image.
I then did my background. I wanted to go for a grungy theme website. So I found a image that would suite the theme well. Once I had found that image I put it to the size that I wanted the background to be ( 940 x 1020 ) using Photoshop. After I have finished the background I added it to my website's image folder.
Once it was in my image folder all I had to do is go to 'Page properties' then 'appearance' then browse for image and find the correct image. Once I inserted the image I found it wasn't centered.
I was able to put it to the center of the page by using the 'margin: 0 auto;' code.
I also found the background was repeating so I had a never ending scroll to reach the bottom.
I fixed this by adding a 'background-repeat: no-repeat;' code shown in the image bellow. I did this because I want to have a set size for my website. Then people using bigger screens would have a black border which was a never ending expandable size. Meaning how ever big there screen is it wouldn't make a difference to the my website.
After putting my background image in I wanted to add the banner in. I did this the same way. By creating the banner in Photoshop and then saving it to the correct format (PNG) and putting it inside the image folder. Once It was in the folder I was able to do the same thing as I did with the background. I simply added it to my div tag and put it in the correct place . Once it was inside the div tag I put it to the correct place using the 'align: center;' code. After doing that It looked like the image above.
Once I had done that it was time to add some content. I simply got a piece of work I had done in the past and added it to the div tag below the banner. Like shown below
After adding in the image I put it to the center using the same code as I used to center my background. The next step was creating a carousel to rotate through some images I had made in the past. I added the image's into the image folder of my website. After doing that I got the coding and java scrip's from the css trick's website and applied it to the place's the tutorial showed me to.
After doing that I wanted to add to my buttons on my banner. A basically wanted it to change the colour to green when ever I was on the page. I created the on and off buttons on Photoshop and added them to the image folder. I then changed the source code so when I click on the button to change page it changes the image to the on image.
After I had done that it was time to add a little content to each page. I created a new page by copy and pasting the index page and renaming it. I then put it in my website folder. I created a box to put my content in by simply adding a new div tag to the new page I made.
After I made the box I started to add my content I wanted on my site. For the time being all the information is just put there to fill space. Its basically there to show what could be there in the future if I so choose to keep the website. But for the time being any old junk will do.
About me page - On this page I wrote a quick and small paragraph to sum up what im doing and who I am.
Contact me page - On this page I added ways you might be able to contact me if you needed to. (none of the information on this page is real)
Links page - On this page I showed examples of good and bad website designs.
If I was to create a website in the future I don't think I would have a links page as I don't really think there necessary. I would put links like Blogger, Twitter and Facebook which could go into contact me.
I made all of these page's using text and page properties. In page properties I changed the font to something I liked. I also was able to change the colour of the text. To make the line I cheated a bit and just did a really long underscore. If I had a bit more time I would have made an image in Photoshop. But it doesn't look to bad so it really isn't that necessary it's just there to divide the page and really point out the use of space on the pages.
Once I had added all the page's and content it was built. Here is a final image of one of my page's.
I feel this task went well. In my opinion I completed everything on the criteria. I have produced a fully working website that's compatible on all web browsers with no bugs or glitches. I have shown many different techniques and have shown thought in the design. The only thing I think I would change if I was going to do it again is maby add a logo and footer. But that's not needed so its not really necessary.
