Wednesday, June 25, 2008

Making Money with your Site and Javascript and DHTML - Week 7

There are a variety of ways to earn money with your site. These include:
- Soliciting donations (ex. http://american.redcross.org/ - non-profit institution)
- Advertising content (ex. any search engine you use: Google, Yahoo, etc.)
- Affiliate programs (ex. http://affiliate-program.amazon.com/gp/associates/ - an Amazon.com affiliates program that earns money for web sites that refer purchasers to Amazon)
- Sell merchandise (ex. http://www.megagear.com/ - web store for MegaTokyo webcomic)
- Sell content (ex. http://www.encyclopediabritannica.com)
This is certainly not a part of my web project, but definitely something I am glad to be aware of for the future.

JavaScript and DHTML are two types of coding that establish advanced interactivity for a web site. JavaScript provides a way to add dynamic text, such as current and accurate date and time information. It also allows for a wide range of modifications to basic HTML tags. Scripts can also be accessed like a CSS sheet- externally from the page they are viewed in.

Dynamic HTML is a combination of three parts: scripting languages, CSS sheets and the HTML Document Object Model (DOM), which treats a page of HTML as a collection of objects. The first step is to identify each object, so that the scripts written will be able to identify which object to modify. One of the most popular of these functions is the image roll over- changing an image or color of an image when the mouse rolls over that section of the page. Another is collapsible pages, a feature used extensively in computer-based programs such as Windows Explorer that allow a user to expand or collapse folders for ease of finding items. This can be used in web pages for the same purpose- to expand or limit the amount of text a user is expected to look at on any given page.

Monday, June 23, 2008

Site Reviews - Week 7

http://ilovetypography.com/
Hugely informative site about typography, including thousands of fonts, (at least) hundreds of articles, and too much knowledge to assimilate in one shot! The article 15 Excellent Examples of Web Typography was really informative, making me realize my fonts were boring but adequate!

http://typographica.org/

Typographica is an online journal about typography, with articles that convey news, opinions and commentary on fonts and other typographic designs. One of the cool parts of this site was the "Typefaces of..." a variety of years. The ones immediately accessible from the front page were 2004-2007 by year. My favorite was BistroScript, seen here.

http://abc.planet-typography.com/
This "virtual museum of typography" is divided into four subcategories:
- Classic (1480-1890)
- 20th Century
- Modern
- Miscellaneous
Unfortunately, none of the links seemed to work, so I was unable to peruse beyond the main page.

http://www.alistapart.com/topics/design/typography/
A List Apart is a magazine published for web designers, so the content on this page is relevant, practical and interesting to examine from a designer's point of view. A couple of the articles I looked at discussed grid systems for positioning text, formatting text in CSS and using CSS to actually retrieve fonts from online for site visitors so the text does not have to be frozen in image form. Pretty cool stuff!

http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
This article is amazing- 20 step by step fixes for CSS to polish up the minor issues that crop up with web design. Straightforward, it provides an image of the code so that it's easy to grasp and copy, which is a huge asset to newbies.

Friday, June 20, 2008

Attracting Visitors and Letting Them Talk to You - Week 6

This week's chapters discuss how to both attract and interact with visitors to your website! Attracting visitors is a process that requires a strategic plan in order to succeed over the long run. This process includes:
- Building a great site
- Sharing links with like-minded friends and related websites
- Creating and perfecting meta-tags
- Submitting your site to Internet directories
- Submitting your site to Internet search engines
- Test, reassess to figure out whether the above strategies are enough to generate the amount of traffic you want
This provided some interesting pieces of knowledge, but nothing major that I am going to utilize with my site for this class. I especially learned from the section about meta-tags, and how to use descriptions and keywords to attract users who will benefit from or enjoy accessing your content.

Interacting with visitors can take many forms: email links, form submissions, forums and/or groups. My site has the simplest form of these, the basic email link. I included it on each page as a webmaster contact, as well as on the staff page for each staff member. It is the easiest to code, as well as arguably the most recognizable for browsers. Forms are html coded forms of contact which provide a survey-like response for visitors, providing questions and answers in a limited format which are then submitted to the webmaster by an email. Finally, the most popular type of visitor interaction is forums, which can also be called groups, discussion boards, etc. This provides multiple visitors the opportunity to interact with one another, while the previous two only allow for one way communication with the web designer. Forums are asynchronous communication that provide space for users to post and respond to one another on any topic, in almost any format.

Wednesday, June 18, 2008

Site Reviews - Week 6

http://urbandirty.com/
Urban Dirty provides textured background photos covered under a Creative Commons license for design projects. These images are free to use, the artist just asks the user to credit the web page somewhere in the work. Some of the images are fascinating, carrying an artistic raw edge.

Best Textures
A group on Flickr, this collection currently has 1,402 images that serve as textured backgrounds for use by web designers. Ranging from nature shots to wall art, these images bring a wide variety of scale, perspective and mood to a project. I found a couple of shots of parchment I want to play around with.

Torley Textures
These texture collections provide seamless tiling, are available for any use and are in lossless PNG format. Also hosted on Flickr, the artist generously made them useful to all. Some of my favorites in this group were ones that looked like paint on a canvas, brushstrokes and all.

Deviant Art Textures
This site offers an overwhelming amount of resources for artists, and the texture section is no exception. I downloaded a few to play with, including a grunge page of text, a couple of photoshopped colors with light specks or patterns.

Grunge Textures
The graphics on this site are organized efficiently, easily accessible from the idex page. Another Creative Commons user, they ask that you link back. Interesting pictures, but nothing that looks useful for my design.

Grunge Style

This article published by smashing magazine online explains more about grunge and Web 2.0 design. I liked the explanations and examples they provided. It will help me as I work toward designing my own site. I want to see how I can integrate some of the elements they mentioned.

Vandelay Design
Tuturials, sweet tutorials! This site was IMMEDIATELY bookmarked because I am getting ready to start experimenting with Photoshop, and there are 40 video tutorials. I will so be back!

2007 Web Design Trends (and Cliches)
The top 6 web design trends of 2007 and some fabulous examples!

Web 2.0 Tutorials Round Up
Another fabulous tutorial site... on the back burner for emergencies.

Screen Resolutions and Aspect Ratios

Fascinating information about screen resolution average data across the globe. It's limited, of course, since the sample size is determined by visitors to one website, but a good idea for new web designers as to how big to design their pages.

Wow- this is a lot to digest and compile into useful knowledge. I am excited to start using some of the information and getting to final selections for my pages!

Wednesday, June 11, 2008

Page Layout Tools and Frames - Week 5

Chapter 9 in the Missing Manual talks about some page layout tools developed in HTML. The two major ones are table-based and style-based layouts. Tables are possibly the most basic of layout tools, infinitely customizable as to size, organization, and even the visibility of the outlines. However, they are notoriously sensitive to deal with, and if any one tag is missing, the page itself can be horrendously warped. Style sheets, on the other hand, create a much simpler format for HTML code. Since the sheet is a separate document which the page references, all the formatting standards are not necessary in the HTML, because they are dictated by the style sheet. This is the style which utilizes the cascading style sheets which have already been discussed earlier this semester. I've been working on these already, and I think they have great potential. However, I have a long way to go to make them seem effortless!

Frames are another tool in the web developer's arsenal. Chapter 10 talks about how to create them, and the (dis)advantages of using them on a web page. They have all but disappeared from many large web sites, mostly because they are annoying to a wide population of web users, not to mention unable to be viewed on cell phone web browsers. The basic concept of frames is that they split the browser viewing window into several different web pages, each broadcasting their own content. That is how the navigation bar is able to stay the same, no matter what is in the main part of the page. Blackboard is an example of this, because within the course site the navigational bar to the left stays static, no matter what the body text is in the right/center of the screen. I will probably utilize some of this design for the navigational part of the site, although I am considering just adding the code to each individual page. It's bulky, but at least it makes each page more cohesive. I will have to play with it to see.