Project 1 Requirements - Due November 1st at 11:59pm

For our first project, I want you to try out your HTML and CSS skills to create an attractive design for two pages of a website promoting a new academic program. Your focus should be on investigating HTML and CSS code first and foremost. You can imagine there is another person on the team who is the graphic designer who is responsible for the artwork you integrate into the site. In this case, you can develop new graphic art for the site, but your focus should include emphasis on the text and layout of the pages.

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 your choosing).

You must post all your code and graphics on the course server by November 1st, at 11:59pm. I will show you how to do that in class. 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 from those I introduce you to). Publishing is an important part of the class according to our certificate program 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 at least two pages for project one: A Proficiency of Ocean Data Science (PODS) home page and a program curriculum page.

To practice reading existing code, you can take a look at this starter package for the first project. This code is a simplification of the content management system being used to host the PODS website.

Our CE Link site includes a forum on-line for us to discuss the project (Project 1 Requirements and Implementation as seen in Week 2). Please post your questions about the code and the project requirements to the forum so others can follow your thoughts. 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.

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?).

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 your code is valid XHTML. But, of course, play around with the design of your website 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 requirements 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, overly contrived 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 to your project code and trying out changes!

How will you incrementally make changes to code to see the effect? How will you back-up your work in case something goes terribly wrong? How will you make sure your incremental work efficiently works towards your grand vision? Those are the three key questions I have to answer on any technological project I work on, no matter what technology is 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 (a portfolio piece is more likely of use), but if you can't get over that way of doing things, e-mail me often with questions about expectations based on what you want to do with the code.

Take some comfort in the fact that many groups of students have come before you in this class. Here are the assignments and results attained by previous students:

The Spring 2016 class created two pages for project one: A Captain Stephen Olney Park home page and a x-county ski themed page. The students started with this starter package and attained these results here (see the top). The best result (by class consensus) was sent to the Town of North Providence for consideration as the existing page was quite unattractive.

The Spring 2015 class all created a version of a book promotion site based on a Simulaton Life mock-up. You can see their results here (see the top).

Students did a good job of the first class project during Autumn 2014 when they were asked to take some sketches I had done of a disc golf website. They came up with the following:

Project 1 submissions (middle).

Students did a good job of the first class project during Spring 2014 when they were asked to redesign part of the Ocean Connectors website. They came up with the following:

Project 1 submissions (bottom).

Students were asked to redesign the Streetime Technologies website as the first class project during Autumn 2013.

They came up with the following (see the top half):

Project 1 submissions

The students did a great job of the first class project during Spring 2013 (so do feel motivated to aspire to their level of competence if possible).

Students were asked to redesign the L'il Red Gallery site. They came up with the following (see the bottom half):

Project 1 submissions

The students did a great job of the first class project during Spring 2012. The winning submission was incorporated into the oworld community home page, replacing the original site.

The students also did a great job of the first class project during Fall 2011. The assignment was to redesign the Friends of the Moshassuck website (the home page and the resources page). The students all started with:

http://bdcampbell.net/html/fotm/

and the winning submission actually was implemented by the client (a win-win-win for the client-me-student since Susan then had a great reference in her portfolio - or so I think it is great - do you?). Here is her implementation - you won't see any credit explicitly given to Susan as she wanted to remain an anonymous designer on the site (hopefully, that is an exception and not the norm as I am hoping to provide the client website credits as a place for you to be recognized):

themoshassuck.org/

The students also did a great job of the first class project during Spring 2010. 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:

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?):

blackstoneparksconservancy.org

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://www.worldoceansday.org/

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

We've also had a competition for the Seas the Day website redesign in 2008.

The before site included a monthly newsletter.