final blog

��This class has helped me a lot in my daily life. I can now create a website, add content, and make it look ok. I know some design principles in which I tried to incorporate into my FrontPage version of my website. These principles were also included in my web node version, however, in a different way. In FrontPage I used the principles in the actual designing and the placement of each item. I tried to keep positioning, relative sizing, font types and sizes, as well as consistent navigation menu in mind. Everything I did in FrontPage was done without a template. In web node however, I was asked to choose a template and this is when I mostly used the design principles learned. I tried to pick a template that would not only suit my needs but that would also look good and follow the design principles learned. Some of the positioning in web node was negotiable, however most items were unmovable. There were many options and versatility in content, however most cells followed the template and did not allow you to deviate from that. An example of this is in the heading you have no control over font size, only the characters and picture. I did not have enough room to fit my logo and the company name. I tried to make the font smaller to fit both but there was no option for that.

I found it easier to add content in web node because it was drag and drop. I did not have to think very hard about table placement. When adding a page in web node you would click new page and it would open already in the navigation, already in the menu, already in the sitemap, already ready to add content. It was easier to add a page. I wanted to add the page Take A Break into my FrontPage version, however that would mean having to redo all the buttons (make a table with six columns instead of five) on each page, re-add each button to each page, and test them again to make sure they were linked appropriately. Web node does this all for you. I decided to forgo this page in FrontPage because when I wanted to add some gadgets to the Tutorial page FrontPage was acting funny and not liking what I had to say. I did manage to add one gadget and it works sometimes. J�

FrontPage would be my preferred method to work in if it was not as outdated as it is. I tried using Dreamweaver which has nice capabilities but I got lost in all the settings. I prefer to have the ability to fully customize my website so I plan on working in Dreamweaver and getting to know it to keep up with my website. I used the same content for both sites but they came out very different. I think if I would have used a template for my FrontPage website it would have looked better. Templates usually come with CSS sheets that make the site uniform and clean looking. I plan on trying my hand at windows expressions after seeing its capabilities and hearing feedback on it.

I thoroughly enjoyed this class and hope that I can now make professional websites that will help enhance my business as well as personal sites that I put up for hobby purposes.

Final Website

Here is a link to my website. It was created in WebNode and linked to my existing domain name.

http://www.asksolutionspa.com

Reading Response

This weeks readings focused on ways to enhance your website using tables, animation, sliced graphics, and anti alaiasing text. Photoshop can be used for functions such as rounded out the text, adjusting hue and saturation, and making graphics look better on your website. Adjusting the resolution can be helpful for people with different internet connection speeds. I can see why some websites have an option to view the page differently if you are on a slower connection. These chapters were helpful in learning how to make your website less "simple". When building a professional website it is important to stand out from others and obtain a level of professionalism as oppose to personal websites.Using a storyboard is helpful in keeping focused on what you hope to obtain as a final product. I found the storyboard helpful in determining how many graphics I needed, what size graphics, and what type of graphics. I used the storyboard to organize the pages and plan out the site. I have created some (very basic) websites before and I think having a storyboard (which I have never used before) is extremely helpful and good idea.







-----------



My website is based on my business, Ask Solutions Computer Consulting. I plan on making the business name my homepage title and using the page categories as their titles (staff, services, tutorials, faq, contact us). I chose this topic because I purchased the domain name last year and our "website designer" put up a default template and the words (under construction). I think it will help me focus more on the project and do a better job if I do a website that is meaningful to me as oppose to something that I probably will not keep up with :-). I gathered images mostly from freedigitalphotos.net (diigo) I ma also using some custom graphics I made in photoshop, as well as our company logo created by a former employee.I plan on using frontpage (which I also have at home) because we learned how to use it and I do not know how to use any other ones. I feel the website will come out better if I use something I know.I also plan on using webnode as my web 2.0 place because they allow domain name transfers.

Website Critiques

I chose www.laeyeworks.com as one of my websites to critique. I found this site through websitesthatsuck.com The navigation issues are evident from the splash page. Every item on the splash page leads to somewhere else. These items include text, pictures, and flash animations. The individual items are all centered on the page and are very close together making them harder to decipher and click. The buttons are not labeled in some cases and not easily known where they are going to take you.

A good website that is easy to navigate is www.la-z-boy.com. The links are all at the top and properly labeled. It is easy to find information on products, locations, as well as contact information.The sidebar is nicely labeled and the links take you to a page that is expected as oppose to a random irrelevant page.

The criteria I used to critique these sites was based on Chapter 8 and the Not-So-Good Design Checklist found on page 162-163.

Reading Response Week Three

This week I read Chapters 7 and 8 of The Non Designers Web Book

Chapter seven focused on the dos and do nots of website interfaces. To design a usable interface you should first plan out the website. This makes creating it a lot easier with to do lists, agendas, and focuses. The website should be contained within the viewing page and a user should not have to scroll sideways. To ensure the content fits on a page a screenshot can be taken and used as a sizing template. There are many different navigation styles, some feasible others not. A good navigation style is tabbed sites that use constant links at the top. Bad navigation style can be links that don't work or go to unrelated pages.

Chapter eight focused on recognizing good and bad design. Ugly type that is used without purpose is just that, ugly and un-useful. Broken links, broken up lines, and inactive buttons are also bad design techniques.Good design can help a user see, interpret, and use your website in a functional way. Bad design can hinder the message of your website.

This information was helpful in learning how to create my website. I plan to make a list and follow it in order to stay organized. I am going to use the design checklist to ensure I made a user friendly website. I am also going to keep the pdf file we read as a handy guide and reminder for designing. I have downloaded GIMP to try out and I read the website on ways to help master GIMP, this will be helpful for my graphics on the webpage. Reading the evaluation websites gave me an idea how websites are evaluated and how to make mine presentable and termed as a good design.

Polls

I voted on all the polls. They were all good, I like Hersheypark, drink Dunkin Donuts coffee, drive a gas guzzling suv, would order dessert, have faith in a woodchuck that in reality can not chuck wood, and have no idea who Lebron James is. :-)

Making Images Web Ready

To make an image web friendly, one must change a few things about the image. One change that can be made is using a transparent background. If the image is not square with a white background, you may want to save the file as a gif image to get a transparent background. The transparent background will allow the color of your website to show through as oppose to a white "box" around the image.

Another change is making sure you have used web friendly colors as described in the reading response post. Web friendly colors ensure that your image will look the same regardless of what computer it is viewed on.

When saving an image for the web, Photoshop will tell you the file size and how long it will take to download. Keeping this number small is important so that users will not have to wait long to see the image and so that you can keep within your allotted web space.

An image that is going to be seen on the web should be saved in either 72ppi or 96ppi. These two resolutions will show the image best on a website. These resolutions also keep the image in perspective to the web page.

Keeping the image small is important because you would not want a huge image showing up on your website. Large images are obnoxious and out of place between text. Crop essential parts of the picture and discard the unnecessary. If a large image of sky and an airplane is compressed, the airplane will be hardly visible. Cropping the airplane gets rid of the unneeded sky and will let the airplane be the visible focal point.

Sending a Stock Image

It is not a good idea to take a photo and send it without making any changes. This is not good because the image can look different of different monitors. You would want to make a universal monitor friendly image, This can mean changing file types, image size, color scheme, etc. Also an image taken with a camera may not be perfect. Examples of content changes can be red eye removal, color fixes, cropping, centering, or removing unwanted objects.

Reading Response Week Two

In Chapter 9, I learned that you should always save images for the web in rgb color as oppose to cmyk color. Images of higher bit can show more color depth. There are certain colors that are "web-safe", these colors can be determined by rgb values of 00,51,102,153,204,or255. Web safe hex codes are 00,33,66,99,cc or ff. Web safe color percentages are 0,20,40,60 or 80. Adobe has a color swatch that can be downloaded (and comes preset in Photoshop) of colors that are web safe.

In Chapter 10, I learned graphic definitions that are useful lingo to know. The advantage of a gif file is that transparency can be used. Gif formats do not have the same colors available as jpeg , however they can have a transparent background which can be very useful on a website.

Chapter 12 focused on font and writing on a website. The difference between font type that is easy to read and legible can be quite different. For readability font should be set at serif or sans script, between 8-10, and 14-18 size, don't overuse bold italic all caps or small caps, short lines are better than long ones, and there must be contrast between font color and background color. For legibility, use sans serif and do not use all caps; words are harder to recognize in all caps.

Reading Response Week One

This week I read Chapters One, Two, Five, Six, and some other odd pages of the book "The Non-designers Web Book".

Chapter one stated that if you already knew and was familiar with the web skip it. Well, I didn't skip it but I skimmed it. Pretty standard stuff, WWW, addresses links, pages, etc. Nothing new here.

Chapter two was all about search engines and how they work. I consider myself a Google guru in that I pretty much find everything I am looking for. However, I did not know about directories!

Chapter five focused on designing in print vs the web. The web is good for colors, distribution, price, music, animation. The print version is good because its portable, cheaper to read, and is familiar.

Chapter six introduces the CRAP principles. Contrast. Repetition. Alignment, Proximity.

The odd pages (186-192) were about file types and anti aliasing. Examples of file types for images are bmp, gif, and jpeg. Anti aliasing refers to the smooth edge of the graphic as oppose to being square ledges.

Design plays a role in our daily lives because it makes advertisements, web pages, and even books and magazines easier to read and comprehend. If it is hard to see text, you wont be able to read. If the web pages is overloaded with images and cramped with text your understanding of it will be limited. Personally, if something is not designed well I get a headache and look for my information elsewhere.

Designing for the web vs designing for print is almost the same in that it follows CRAP principles, however the web is a little more complicated because there are so many more possibilities.

Second Thoughts . . .

This new background is only going to be temporary because it does not show the text well and also it is not full page? I will have to change some things around. To be continued . . .

Adding a background

I got a background from http://blogspottemplates.blogspot.com/.

I downloaded the template as a zip file that contained two text files. The one text file was a readme and the other contained the coding.

I logged into my account and clicked on Design > Edit html

I then clicked the link that said choose file and chose the text file containing code.

Then I clicked Upload and blogger uploaded the code into the text box for me.

Clicked Save Template and Voila! Background appplied.

Terminology Worksheet

32. Java applet - a small fruit containing coffee

hehehehehehe

First Post

I finally got one :-) Google agreed I am who I am.