Lecture:

• What "kinds" of websites are there?

  
  Corporate/branding, personal/blog, social network, ecommerce, "the web gods", others?

• What tools are there to help you?

  
  Text editors (Textwrangler, Dreamweaver, others), FTP Clients, MAMP, Cheat Sheets, Websites, Books

• Web buzzwords

  
  Web 2.0, accessibility, useability, validation, bubble, xHTML, CSS, Javascript, PHP, Ruby, MySQL, ASP, AJAX, others?

Discuss Boagworld podcast

Lecture/Demo:

Lecture/Demo: Project 1-Service website

Guest speaker:

Below are some available projects:

Project Title

personal website

Contact person

Betsy DelleBovi

Phone: 888-2264

Email: dellebob@canisius.edu

Project Description

Am interested in the design/development of a personal/professional website.

Project Title

update web site for NABC

Contact person

Sara Morris

Phone: 888-2567

Email: morriss@canisius.edu

Project Description

The North American Banding Council is a non-profit dedicated to increasing the skills of bird banders. We have a web site, but would benefit greatly from some new ideas. The web site is at www.nabanding.net/nabanding/ We would also like to have some forms developed to allow people to apply for certification sessions online and have the information go directly onto the web and to the people who need to approve the applications.

Project Title

Science Camp Website

Contact person

Steven Szczepankiewicz

Phone: 888-2355

Email: szczepas@canisius.edu

Project Description

The annual Midle School Summer Science Camp is advertised primarily through our website (http://www3.canisius.edu/~szczepas/Camp/ssc.html). The popularity of this program is booming with 240 campers in 2008, so the website is due for a professional makeover. An alternative project would be an advertising brochure for the collective summer camps on campus.

Project Title

Faculty Research Websites

Contact person

Paul Sauer

Phone: 888-2631

Email: sauer@canisius.edu

Project Description

As faculty research coordinator, I am responsible for designing and maintaining Canisius College websites that provide information regarding research opportunities, conference and publication issues, etc. to business school faculty. The student assigned to this project would provide valuable assistance for me in this effort.

Project Title

Personal Website/Teaching Portfolio

Contact person

Daniel Kaczmarek

Phone: 716-949-7145

Email: kaczmard@canisius.edu

Project Description

I am looking to create a personal website. I currently teach composition at Canisius and Creative Writing at Niagara University. I recently graduated with my MFA in Creative Writing (poetry) and am looking to set up a site that will not only serve to promote any future publications and readings that I might have, but also be a tool to showcase my teaching portfolio and have a blog space where my students can interact. The due date is very flexible. Thanks!

Project Title

Justice in Action Web Site

Contact person

Sr. Patricia Brady

Phone: x2177

Email: bradyp@canisius.edu

Project Description

We would like the creation of a web site for Social Justice.This site would be the "home" of all social justice activities occurring on campus. That would be a variety of things. We would like the site to be creative, interesting to students and others, dynamic...if possible containing some video clips, with pictures zooming in and out and changing. In other words, an attractive site! Thank you. Sr Pat Brady

Project Title

Website re-design for Professional Photographer

Contact person

Tom Tom Wolf

Phone: 716 632 7498

Email: tomwolfimaging@mac.com

Project Description

Professional photographer, specializing in travel, commercial and professional sports photography, looking to partner with a creative, innovative web designer for a complete re-design of a professional website. The web designer must have the vision and technical expertise to take an existing, basic website to a whole new level. The designer will be given considerable creative leeway to bring his/her vision to fruition. As part of this project, the designer will also have the opportunity to work with a nationally published ad agency on projects involving image re-design, marketing campaign delivery and print media advertising.

Project Title

Atlantis Dual Degree Program

Contact person

Jerry Neuner

Phone: 888-2122

Email: neuner@canisius.edu

Project Description

A web site with descriptive information and links about the Dual BS Degree program in International Business at Canisius with its parthers U. of Antwerp and U. of Strasbourg.

Project Title

Traumatic Brain Injury Website

Contact person

James Tretter

Phone: 76-285-8070

Email: jtretter@ventureforthe.com

Project Description

Venture Forthe is a company that provides services to individuals suffering from traumatic brain injuries. We developed a basic website to provide information to people affected by brain injuries. Venture Forthe is looking for students who would be interested in taking the information currently provided on the website located at ventureforthe.us and turning it into a site that is both professional and accessible to all types of people. Venture Forthe Expects the Site to: 1. Meet W3C accessibility guidelines. 2. Be professional and easily navigated. 3. Provide those with brain injuries information about where they can obtain help. Venture Forthe welcomes your creativity. Anything about the site can change except for the information provided. You will be given the freedom to exhibit the skills you have obtained as well as develop new skills. Venture Forthe will provide all resources necessary to allow you to complete this project. Thank you for your time and interest. We look forward to working with well rounded and creative students.

Project Title

Canisius Women's Basketball Program

Contact person

Beth OBoyle

Phone: 609-4157 or 88

Email: oboylee@canisius.edu

Project Description

Create a website that would promote the women's basketball program and would be essential in taking our recruiting and advertising efforts to a higher level. Currently, our you tube site and twitter accounts are in the beginning stages of development and this project would help us organize our technological efforts. Our ideas include video highlights of our season, tour of new locker room, a day in the life of one of our players, great places of Buffalo and our coaching philosophy.

Project Title

Re-Design of Buffalo Arts Studio Website

Contact person

Jeff Langridge

Phone: 716.833.4450 E

Email: jeff.langridge@gmail.com

Project Description

Our organization is looking for a volunteer to re-design our web presence. Currently we are in the planning phase of our new website re-design. http://www.buffaloartsstudio.org Some of the following could be implemented: 1. A gift shop 2. Registration for art classes via the web 3. Be able to accept donations via the web 4. Exploration of the gallery and studios via the web. 5. Others.

We will work on teams of three to design and develop the project. Each person in the team must design and develop one site. Teams should collaborate on meeting with the client, discussing needs/goals for the site, coordinate access to content, and making revisions to the site as per client request.

Demo-Exercise 1 (DUE Thu, Sep 10): Build a homepage for this class. We're going to work locally on our desktops on the website, and then upload our work to wlab at the end of class. When you work on the page outside of class, you'll dowload it to whatever desktop you're working at, work in that folder, and then upload it back when you're done. This is standard practice for web design, when you're working on lots of different computers as you are in our academic enbvironment.

Technical instructions provided in class.

• Create a folder called public_html on your desktop. Note that this is the same name as the folder you work on in wlab.
• Into this folder, save a file called index.html. Add code from last class's demo to make it a webpage. Also, save a file called format.css.
• Between the body tags, add four div elements: header, nav, main, and footer.
• In your header div, type your name, and put a link to your logo.
• In the nav div, create a list of links using ul and li elements.
• In your main div, write a sentence as a placeholder for now.
• In the footer div, add a mailto link.
Work on your format.css file to style the page.

Lecture/Demo: Project 1: Site Planning.

Lecture/Demo: Exercise 2-Browsers

Find a website for a large corporation. Examine it in several different browsers. Keep going until you find a site that seems to vary widely among browsers. Take a screenshot of the site in the following browsers: Explorer, Firefox, Safari, and Opera. Take screenshots on both Mac and Windows. You may need to install browsers on windows.

For each screenshot, list at least one unique visual/Graphical User Interface (GUI) characteristic of the browser. EXTRA CREDIT: Include the new google chrome browser in your list for 5 bonus qps.

It will make things easier if you choose a site with fixed width. For more information on fixed width sites vs. fluid width sites vs. elastic sites, read this article.

Open your screenshots in photoshop, and combine them into one photoshop document with a layer for each of your screenshots. Show two layers at a time, hiding the others. Change the opacity of the upper layer to 50% to reveal the layer beneath. Nudge the upper layer until it lines up as best as possible. Zoom in/out as necessary. Option-command-0 is a great shortcut to zoom out to 100%, which you should do frequently.

Look for differences in box widths, line placements, font rendering, and anything else that varies from screenshot to screenshot.

Write a one-page missive or build a powerpoint presentation describing the differences between screenshots. Note any bizarre things you see, and make generalizations about which browser seemed to do the best job with the site.

Project planning Demo continues: Designing the site diagram and wireframe.

Lecture/Demo: Exercise 3: Webmaster skills

• Log in to http://comdma.com/cpanel with your username (note:CHANGE THE ~USERNAME IN THAT LINK TO YOUR OWN USERNAME) and password handed out in class.
• Change your password in the control panel screen that you see once you log in.
• Create email accounts as needed.
• Create a database and a database user on the site and add the user to the database.
• Upload your client's beta site to the server. Upload your planning docs and list as links on the site's home page.
• Add a link to your client's site on your wlab homepage.

Discuss latest boagworld.

Lecture and Demo: Project 2- CMS customization.

For the second project, we will create our own personal website. This will feature the use of Wordpress as the blogging engine and the CMS. You've probably made several websites by now, in various other DMA courses. This is your own website. You don't have to have links to all your projects etc. You can link to whatever you want, and have any content you want.

We will host the site on the comdma server. If you want, you can register a domain name and point it at our server.

Required links:

• About Me
• Resume/CV
• Portfolio
• Blog

Instructions:

• Make sure you have created the database for your site before you begin. Download the latest version of wordpress. Unzip the folder. Drag the contents of the folder into the root directory of your site. Go to http://comdma.com/~username. You should see a wordpress page telling you to create a configuration file. Do it. On the next page, you need to add the name of your database, the name of the database user and the password. Because of how we set it up in exercise 3, both of these are username_username.
• Explore Wordpress. Write the new pages for your site; don't worry about content for now. Install cool plugins and widgets. Add some interesting themes. Wordpress is a huge and exciting product and there is so much out there.
• Design your own custom theme. More to come.

Demo: Wordpress Customization

Demo: Exercise 4: Flash for web.

We will design a nav bar in Flash.

1. Open flash, create a new file, and save it as "nav.fla" into a support folder in your ex10 folder (make the folder when you ssave the file).
2. Design your button as you wish. When you're done, select it (hit apple-A or you may only select part of it) and hit f8 (Modify>Convert to symbol) and call the symbol navButton. Make sure it is a button symbol, not a movie clip or a graphic.
3. Double-click on one of the buttons, so that you are editing the symbol. Option-drag the "Up" tab into the "Over" tab of the button. Change the color/look of the button in the "Over" tab.
4. When you're satisfied, click on where it says "Scene one" in the top navigation in Flash to return to the root timeline.
5. Create a new layer. Using the text tool, click on the stage and type the label for the button. Use the move tool (the black arrow) to position the label on top of the button.
6. Select all (apple-A), copy/paste in front (apple-c, shift-apple v) to paste a copy of the button and its label immediately in front of itself.
7. Hit the down arrow (shift-down arrow will move it faster!) to where you want the next button/label to go. Use the align pallette to help you. If you're having trouble, try grouping the button and the label before you copy/paste in front.
8. Use the text tool to change the labels to their correct links.
9. Using the move tool, click on each button (not the label!!) and change its instance name to "aboutUsButton" etc. (no spaces!)

Write the code

1. Make a new layer in the timeline; call it actions. Open the actions pallete (window>actions) and type:
   

   aboutUsButton.onRelease=function() { 
        getUrl("about_us.html");
   }

2. Copy and paste for each button, and change aboutUsButton and about_us.html for each of your links.

Place in Dreamweaver

1. Publish your nav bar by going to File>Publish. This will create a swf (the nav bar) and an html file (with the code to add to your page so the nav bar shows up).
2. That's it. Make sure you link to this exercise from your wlab homepage.