HTML and CSS: Languages of the Web

Project 1 Requirements

Project 1 is due November 14th at 11:59pm. If you want to do our client's project I would like you to do, you should get very familiar with the Friends of the Moshassuck's organizational Home Page. I want you to try out your HTML and CSS skills to create a more attractive design without having to change how the page functions. This is a common requirement for a Web designer working on a team with others who provide the functionality for the site. Another person on the team might be the graphic designer who does the artwork you use in the site, or that responsibility might fall on the Web designer's shoulders. In this case, you can contribute new graphic art for the page, or you can just focus on the text and layout of the page.

You can choose do create your own Web pages with your own concept if you have another client in mind or are trying to find employment with a potential funder who has a different need that you want to your demonstrate relevant skills for. But, in that case, you need to get started earlier and you need to provide me with a rough outline of your idea so I can help make sure you scope it appropriately for a first project. You can continue this project for your second project as well but don't have to decide that until you see what I want from the second project (which will be for another client of ours).

You must post all your code and graphics on the course server by 11:59pm, November 14th. I will show you how to do that in a text document and a video. I need you to prove you are comfortable publishing Web content to a Web server with a File Transfer Protocol program (of which you can choose many I will introduce you to). Publishing is an important part of the class according to our administrators. Once I show you how to update the server with your files, you can upload as often as you want as that space will be yours to practice with. I can look at your code whenever you want if you send me an e-mail message to do so. I will provide feedback and if your questions are really good, I can share them with the rest of the class via e-mail.

The contribution you make for Project 1 is up to you, based on what you think is your best contribution. It should show me that you understand basic HTML and CSS and that you have been working on iterating new designs with a reasonable process you have developed for yourself. You are turning in the project to me, but the goal is for you to do it for yourself more than me. So, let me know why you needed to do something in writing via e-mail if you think it was outside the scope of the project or took away from the time you had to do other things instead. Make the project relevant to you, first and foremost, as you should with every assignment you ever receive in your life (sometimes you have to do it for someone else because they are paying you to do that, but I am not in that category).

You will turn in two pages for project one: A Friends of the Moshassuck home page and a new sub-page of your choosing.

I will create a forum on-line for us to discuss the project. Please post your questions about the code and the project requirements to the forum so others can follow your thought. This is part of your class participation grade but don't force it if you have no questions or thoughts to share. There will be other forums for you to participate in as the course continues.

You can grab the Project 1 starting point from:
http://bdcampbell.net/html/fotm/fotm.zip

If you plan on using software that will render your code locally so you can see the design without having to upload the code (a tool like DreamWeaver, for example), you should also download the css and images directories and their contents and place that directory in the same directory (folder) as your development page. The directories contents can be see on the Web at: http://bdcampbell.net/html/fotm/css and http://bdcampbell.net/html/fotm/images

The code might look a little intimidating to you at first glance. If you have learned the lessons about the hierarchical nature of Web documents, you won't be intimidated by the length of any HTML code you find on the Web. That is very important to me - that you get over any initial intimidation you feel by looking at a long document in any language (anyone else out there remember when one of Victor Hugo's books was assigned in French class?). If you continue to feel intimidated, use it to your advantage to gain compassion for all the political refugees that had to escape death into a new country where they did not speak the language. In comparison, getting comfortable working with long HTML documents should be a few magnitudes less stressful. Or, if that tact seems too extreme (hey, it works for me), just fire up your competitive spirit and consider your attack on the Friends of the Moshassuck organizational home page an adventure into new territory for you.

I am dealing with a huge new set of JavaScript documents I have to understand from the California Marine Map Public Marine Reserves application on the Web. I am intimidated a bit and so can empathize to a point. There is very little structure to a JavaScript document (certainly not hierarchical) compared to HTML and CSS. So, don't get overconfident either as there are much bigger challenges ahead for you on the Web proficiency road.

The nice thing about an open-ended project is you can focus on the piece of the work you want to focus on. If you want to focus on XHTML, go ahead and be sure to make any changes to the code to make it valid XHTML. If you want to show off your graphic arts skills and would not mind the Friends of the Moshassuck using your art for the Friends of the Moshassuck organizational site, focus on that. But, of course, play around with the design to show me you understand HTML a bit and are not afraid to make design changes little by little or wholesale. I make project work open-ended which half of you may like and the other half may dislike (if we are a typical bunch of students of mine). But, open-ended is one basis for maximizing creativity, eh? With all the documentation and references on the Web regarding our class materials, clean homework assignments would be busy work or mindless work for so many of you (they were for me when I was assigned them and I did not like that). If you need more structure, use Liz's book and follow her chapter by chapter, finding the relevant parts in the RISD CE Link code and trying out changes! For the project though, I am requiring you to get a sense of a real world experience where you are given exisiting code that has been hacked together over time (most Web sites are like that even if generated by one person - their skills change over time and the code reflects those changes in abilities).

How will you make changes and see their effect? How will you back-up your work in case something goes terribly wrong? How will you work on the project little by little so as not to overwhelm yourself? Those are the three key questions I have to answer on any Web project I work on, no matter what the technology being used. Challenge yourself to find a better work process for yourself - get to know yourself and your thoughts without judgement and with an expectation for new surprises. Find the challenge in the work that best gets you motivated to make changes to the code. Don't let the grade be your driving consideration, but if you can't get over that way of doing things, e-mail me often with questions about expectiations based on what you want to do with the code.

I may update the requirements on this page as we discuss it as I am always reasonable in discussing what is reasonable to expect from you. So, come back here for more before you turn in your final project for grading.

The students did a great job of the first class project last Spring (so do feel motivated to aspire to their level of competence if possible). The assignment was to redesign the Watersheds Project website (the home page and the resources page). The students all started with:

http://bdcampbell.net/risd/wsp/index.html

and the winning submission actually was implemented by the client (a win-win-win for the client-me-student since Myles then had a great reference in his portfolio - or so I think it is great - do you?). Here is the implementation as it was tweaked to meet the requirements of the Google hosting solution:

http://watershedsproject.org/

The students also did a great job of the first class project in 2010 (so do feel motivated to aspire to their level of competence if possible). The assignment was to redesign the Blackstone Parks Conservancy website (the home page and the awards page). The students all started with:

http://bdcampbell.net/html/bpc.html

and the winning submission actually was implemented by the client (a win-win-win for the client-me-student since Chris then had a great reference in his portfolio - or so I think it is great - do you?). Here is a screenshot of the final concept:

http://bdcampbell.net/html/bpc_new.jpg

The students did less impressive work on project 1 in the Fall 2009 course. The assignment was to redesign the Ocean Project's World Oceans Day website (the home page and the cool links page). The students all started with:

http://bdcampbell.net/html/wod.html

and the winning submission actually was quite impressive. Here is Shawn's implementation (don't worry, if a client likes your submission, I will clean it up and do the full implementation for you if you don't want the gig):

http://metothesea.org/htmlcss/smw/

The students did impressive work on project 1 in the Fall 2008 course. The assignment was to redesign the Ocean Project's website (the home page and the contact page). The students all started with:

http://bdcampbell.net/html/top/

and the winning submission actually was quite impressive. Here is Kevin's implementation as a screen capture. He used an older CSS standard for much of the design elements so I have not provided the source code, but you can get as sense of the winning design and the improvement over the old site at the time.

http://bdcampbell.net/risd/top/knj.html