http://vader.aacc.edu/~csi118b2/index.html

This week in class we continued with looking at our website in the group project.  We critiqued each other critiques and are making wireframe outlines for what a new site should look like.  In reading and other homework we looked at how to incorporate flash videos into a website, which is quite applicable for me, and adding user interactivity.  I’m hoping by sunday I have a great working website that I can start going through with a fine toothed comb later on next week.

Well we are nearing the end of the class, so sad.  This week we are looking at usability and access.   A majority of the reading is about the use of meta tags.  Meta tags are invisible lines of code in a website, they contain key terms about each page and its content.  Search engines like google and yahoo will use these meta tags to show relevance links to peoples searches.  So aside from having a great looking website that is user friendly, meta tags are the second most important aspect of our design.  Without them search engines wont show show your site to anyone because it wont have anything to search.

Along with that we’ve been put into groups of four and are critiquing websites and offering suggestions as to what we would change and why.  My group has The NAW Librarys website.

http://www.naw.lib.ms.us/

It’s a pretty hum drum site that looks as though a lay person put it together using a template.  It definitely needs some work.

Lastly we looked at social networking sites and how to get our website to the public some examples are Facebook, Twitter, and Linkiden.

This week is learning about templates and how we can build a webpage using them.  Templates are great short cut to standardize webpages.  As opposed to starting from scratch everytime or just renaming an already built page; we can use a template store it in dreamweaver and access it anytime we want.  Below are a few videos to show us the basics on how to utilize these wonderful feature.

Layers TV

http://tv.adobe.com/watch/layers-tv/episode-62

Rapidly Building layouts

http://tv.adobe.com/watch/learn-dreamweaver-cs4/getting-started-03-rapidly-building-layouts

Creating Templates

http://www.adobe.com/designcenter/video_workshop/index.html?id=vid0157

Using Templates

http://www.adobe.com/designcenter/video_workshop/index.html?id=vid0158

Linkedin

http://www.linkedin.com/

A blog to aid you in creating the best professional profile

http://thecaffeinatedblog.typepad.com/the_caffeinated_blog/2008/08/unlock-the-full-potential-of-your-linkedin-profile.html

CSS Zengarden – This site shows the flexibility of using CSS, it’s a great resource.

http://www.csszengarden.com/

Below is link to a website that you give another websites URL to and it will take snapshots of how your website looks in other browsers.  It’s a great tool to use for looking how a site looks on other computers and browsers and will hopefully lead to better usability.

www.browsershots.org

Microstock is site that web developers can use to buy photos and images for a site at a low cost.  Many times royalty free images can be quite costly, this is a great alternative!

http://www.istockphoto.com/index.php

Below are a few of the articles we read this week, the first is about what people read and process.  The content is the bottom line of the web and if people won’t read what is on your site, you’ve failed.  Gerry McGovern has given us a few examples of how people read and look at websites.  Essentially people are looking for immediate answers that are short and to the point.

Killer Web Content!

http://www.gerrymcgovern.com/nt/2007/nt-2007-10-01-killer-web-content.htm

CSS Cheats!

http://webdesign.about.com/od/css/a/css_cheat_sheet.htm

CSS Page Layout Basics

http://www.adobe.com/devnet/dreamweaver/articles/css_page_layout_basics.html

This week our main project is to create a working DW template website from the designs we’ve been making.

Heres a link to the one i’ve uploaded!

http://bcts-potomac.aacc.edu/CAT/cat03/final%20project/dreamweaver/index.html

This week we are learning more about cascading style sheets and how the web standard is to use CSS in almost every aspect of creating a website.  Most of the tutorials we conquered in Dreamweaver and Fireworks showed us how to customize stylesheets or prepare for them in other programs.  It seems a little daunting at first but in the long run learning how to use CSS is worthwhile and will help you maintain and change a site and be a time-saving device.  Below are links to a few articles we read about CSS

Understanding CSS

http://www.adobe.com/devnet/dreamweaver/articles/understanding_css.html

How we Really Use the Web

http://www.sensible.com/chapter.html

How to Estimate time for a Project

http://www.sitepoint.com/blogs/2009/04/14/how-to-estimate-time-for-a-project/

Designing a website is half the battle, we also need some place to put it once we’re done.  Here are few sites that host domains and webspace:

http://www.bluehost.com/tell_me_more.html

http://www.crystaltech.com/sharedhosting.aspx

https://www.godaddy.com/Hosting/web-hosting.aspx?ci=9009

http://www.networksolutions.com/;jsessionid=8f8ce168a3e5f00b4d6f1dcb124b:FFDW

This has been a great week of class.  The concentration has finally left the design aspect of
creating webpages and floated over to functionality.  A majority of the tutorials, lectures and
reading have been centered around exporting or formatting our deisigns and all the elements
associated with those design, jpgs and gifs.  Fireworks and Photoshop have amazing features
called slices.  This allows us to create invisible blocks around text and images, and associating
them specifically with CSS and xhtml code.  We the design elements and the slices into code
that then can be read by Dreamweaver or an internet browser.  This doesn’t mean we won’t have
any coding left to do but it has simplified the process, and cuts out a few steps.  Below are the
videos we’ve watched that clearly explain every step to creating slices and how it integrates with
other programs.

Getting Started: 06 Exporting CSS and Images

http://tv.adobe.com/watch/digital-design/getting-started-06-exporting-css-and-images/

Creating CSS/xHtml Layouts:

http://tv.adobe.com/watch/digital-design/creating-cssxhtml-layouts/

Export CSS and HTML from FW CS4 Part 1:

http://tv.adobe.com/watch/adc-presents/export-css-and-html-from-fireworks-cs4-part-1

Export CSS and Html from FW CS4 Part 2:

http://tv.adobe.com/watch/adc-presents/export-css-and-html-from-fireworks-cs4-part-2

Export CSS and Html from FW CS4 Part 3:

http://tv.adobe.com/watch/adc-presents/export-css-and-html-from-fireworks-cs4-part-3

Quickly Transform Photoshop Layouts:

http://tv.adobe.com/watch/everyday-timesavers-web/quickly-transform-photoshop-layouts/

Getting Started: 06 Dreamweaver intergration:

http://tv.adobe.com/watch/digital-design/getting-started-06-dreamweaver-integration/

We’ve also read a few articles explaining why slices are great and can benefit any web
designer.

Articles
The Benefits of Slicing Image:

http://www.communitymx.com/content/article.cfm?cid=A28C67FE21B6726E&print=true

Exporting CSS and Images in FW CS4:

http://www.adobe.com/devnet/fireworks/articles/export_css_images.html

Lorem Ipsum Generator:

http://www.lipsum.com/

Ok, so here are two very similar comps that have a little different color scheme.  These are very rough and to be honest I don’t like either of them.  I’m having a hard time translating the ideas in my head to the web.  Hopefully over the next couple of week i’ll be able to flush out some more ideas and get some better looking material.

Comp One:

bcts-potomac.aacc.edu/CAT/cat03/Final%20Project/Blue%20One.jpg

Comp Two:

bcts-potomac.aacc.edu/CAT/cat03/Final%20Project/Brown%20One.jpg



Week 8
This week we started to think about usability, and also common mistakes designers make when trying to create a webpage.  Web coders that come from a design background usually create a webpage around there design.  That, most of the time, isn’t pracitcal and will actually create bad websites.  Most of the reading and lectures were centered around disecting good web practices and looking at CSS.  One of the most compelling articles I read used Dao philosophy to explain how Web designers think and look at the web.  The is the Dao principle he used :
“Well established hierarchies are not easily uprooted;Closely held beliefs are not easily released;So ritual enthralls generation after generation.”Tao Te Ching; 38 Ritual
He used this an example of how  we use old ideas to create new ones.  Web Design is highly influenced by its predecessor Print Design.  Since the web is still very new, we often times find the influence of print design, over time the web will find its own sense of design and operations.  We’re starting to see that through CSS and Javascript.  It will be exciting to see how it evolves over our lifetimes.
Here are the links to several other articles we read:

http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/http://www.alistapart.com/articles/dao/http://bokardo.com/archives/five-principles-to-design-by/

For lectures this week we looked at the complete design process and how to incorporate fireworks and photoshop to make mock-ups of a site.   Most professional designers make complete interactive websites with just html and then use CSS to add all of the design elements later.  The importance of the mock-up is usablity.

http://tv.adobe.com/watch/fireworks-tips-and-tricks/the-complete-design-process/http://tv.adobe.com/watch/max-2008-design/common-mistakes-print-designers-make-on-the-web/

This week in our reading we were diving back into CSS.  We found out the main differences between ID and Class tags and how they relate to CSS and HTML.  Talking about style inevitably led us to Typography, this is important.  If people can’t read your web page, then what’s the point, really?  It gave us food for thought on line spacing, and height and how it correlates directly to how fast a person can read and process the words.  It also gave us warnings about of the 100,000 different fonts available now most people only have up to 40 installed on there the computer.  Which translates: “Just because we have it, doesn’t mean everyone else does,” so we need to be mindful of that.

The Difference Between ID and Class

http://css-tricks.com/the-difference-between-id-and-class/

In the book “The Principles of Web Design,” we continued with typography.  They’re five categories of font-families: serif, sans-serif, cursive, fantasy and monospace.  We have literally thousands of variations but when coding font in CSS we can use these categories as the last resort for what the browser should display.

To get around using fonts that people don’t have installed on their operating systems we have new technology combing flash and javascript called sIFR.  I’m just trying to understand the concept myself of how this works, so I can’t explain it to you at this moment.  But, it is out there and people are using it.

Finally that chapter moved into the mechanics of what is type for instance: x-height, ligature, baseline, cap height, crossbar, and bowl.  This takes me back to graphic design fundamentals, which is one of my favorite classes taught by probably the best teacher AACC has to offer, and probably deserves a raise…hint hint, Admin staff at AACC!

Finally we looked at some place where we can buy fonts at:

www.fontshop.com

www.dafont.com

www.wantedfonts.com

www.veer.com/products/type

www.myfonts.com

www.itcfonts.com

CSS Typography

http://www.digital-web.com/articles/css_typography/

www.ilovetypography.com

http://articles.sitepoint.com/article/anatomy-web-fonts

http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml

http://www.digital-web.com/articles/css_typography/

In the Lynda.com tutorials we looked the structure of a webpage and what to think through when designing for the web.  The basic skeleton of a page is:

Title, Header, Body, Sidebars, Footer

Next we need to think of the content or Information Hierarchy.  Information hierarchy is going from most important to least, general to specific.  This is how we naturally read web pages, and how we should lay out information.

A couple ways to make a site been found in search engines is using key words or phrases in your titles of the page, and also in what are called META tags.  Although the words and phrases wont be seen on the page, only in code, they will be picked up by a search engine.

There are a couple types of search engine out there the first being a Crawler, the second being Human, and the third Hybrid.  Google is a great example of a Crawler, MSN is a Human.

http://www.webreference.com/dev/gifanim/ Optimizing Animated GIF’s

http://www.tips-tricks.com/k_gifanimation.asp GIF Animation programs

Looked at Top Level Domain (TLD), how to acquire, why they are important.  A TLD is usually the last part of a website address, example .com, .biz, or .gov.

12 Rules for choosing a domain name:

1. Brainstorm 5 top keywords
2. Make the name unique
3. Only choose dot-com available domains
4. Make it Easy to Type
5. Make it easy to remember
6. Keep the name as short as possible
7. Create and fulfill expectations
8. Avoid Copyright infringement
9. Se yourself apart with Brand
10. Reject Hyphens and Numbers
11. Don’t follow the latest trends
12. Use an Ajax Domain selection tool

Use Godaddy.com to find TLD

Some search engine links that have info on how to design sites specifically for search engines.

www.searchenginewatch.com

http://www.groovecommerce.com/ecommerce-blog/search-engine-optimization/20-nifty-seo-tools/

http://www.seomoz.org/

http://www.seroundtable.com/archives/014550.html

http://www.seomoz.org/blog/web-design-tactics Web Design tactics to help you when your stuck!

In our practice tutorials for the week we are learning how to create animated GIF files. Here’s a link to what I worked on: http://bcts-potomac.aacc.edu/CAT/cat03/Week%207/week7.html