ResEc112 Spring ‘08 Blog

Here is the link to the end of class survey.  Thanks for your feeback!

http://www.zoomerang.com/Survey/?p=WEB227T6FUS4SA

Glenn

In our last class, I will answer any question you have about the take home and in-class final.  The take home final focuses on spreadsheet design, and you must submit your file in Spark by May 22nd at noon.  The in class final you will complete on Monday or Tuesday (May 19-20) during the following timeslots: 9:00 - 11:45 or 2:00 - 5:00.  The in class exam should take less than a hour to complete, and it will include content from the two quizzes we had this semester: functional understanding of web terminology, mechanics of using excel, and one database design question.

It has been an honor and privilege to teach you this semester, and I’m generally very impressed with the quality of your work.  Your websites were categorically more sophisticated and thoughtful than in past years and the database assignments, while more mixed, also displayed greater comprehension of the challenging but useful concepts of relational database design.  I appreciate your openness to trying many new learning tools this semester, and I particularly value your thoughtful feedback.  These made the class fun for me, but I know there still much room for improvement.  Please let me know of any suggestions you have in this area, either with the zoomerang survey we will do in class today, in person, by email, in the discussion threads for the tools in Spark, or in your journal. 

I was most pleased with your journal entries.  One of my greatest teaching frustrations is the time constraints a large class size presents and the challenges to see you past the barriers in the classroom (I guess that is two frustrations).  The journals helped me connected with you as individuals, and I credit you for using this tool to share your perceptions with me.

So, thanks for working hard this semester, and enjoy your summer.  Keep in touch.

Glenn

Here are instructions from my email message for the wrapping up the website project:

First of all, I will give you until the night before the last day of classes to finish your work, that’s Monday, May 12th, at midnight.

In summary, the first part of the assignment was to see whether you are able to create a working website and design to meet the web needs of an organization.  In this second part, my standards are high.  I want you to use professional-quality techniques to create a working website that could function as the starter website for the organization you chose.  You can continue the work that you’ve started in part one, you can copy design ideas submitted to the 112 Commons by classmates (http://resec112.pbwiki.com/ResEc112+Commons), or some combination of the two.  NOTE: if you copy any ideas from sites in the 112 Commons, you must cite the source(s) and specifically what creative work from that site you used.

Here are my expectations:

1. The design meets the stated website goals of the organization.  I will post my understanding of these needs in the course wiki.  I understand that you’ve had limited exposure to the clients, but you should do your best with what you have.  Remember that this is a first shot at a design.  It is unlikely that a first design, no matter how talented the designer, will be just right.  However, an utter disregard for the needs of the organization will turn off a client faster than anything else.  Please ask me if you have any questions about this.
2. All styles (formatting of content in web page) should be stored in a separate .css file.  This means that you do not make text green, for example, by selecting the text and changing the text color property to green.  See video demo in Spark if you don’t know what this means.  I will also demonstrate this in class on Tuesday.
3. If you are using a typeface for your text other than arial or times roman (i.e., some fancy font typeface), you must create an image of that text in Fireworks, Photoshop, or some similar image editing software so the typeface will be dependably readable by the users’ browsers.
4. If you are using sample images in your site, either use images provided by Jenny, Rebecca, or Jody (or available on their websites), or use images you have rights to use.  A good way to find images for a mockup is to search Flikr, the photo sharing website.  If you use the advanced search tool, you can check the box for “creative commons license” so the search results will be limited to those photos you have a right to use.
5. All web pages must have meaningful titles (”Untitled Document” is the default and it is not OK).
6. Your files should be neatly organized in your website.  For example, the css files should be in a css folder, the images should be in an images folder, and so on.
7. You should use tables appropriately to create an overall layout for your site.  All you content should be contained in one outer table, with a size and structure that you specify.  All tables’ structures should be simple.  Don’t merge and split cells to create the layout that you want.  Instead place an inner table (say, one for the navigation) inside the a cell in the outer table.
8. Tables should have appropriately defined border, padding, and spacing values.
9. Styles for tags (body, h1, …) should be thoughtful.  There should be consistency in the text and heading formatting throughout your site.  Consider spacing text a little or changing the text color from black to charcoal or a dark shade of a color in your scheme (do this by editing the style for the body tag–making line height greater that 1.0 ems will give you more spacing between lines of text).
10. Your color scheme should be thoughtful and deliberate (use color pickers to find coherent color scheme you like).
11. Your hyperlink styles should be consistent with your design, and it should be clear to user that these are links.  You may use either styles (a:link, a:visited, a:hover) to format you hyperlink text, or you can create rollover images in Fireworks and insert them as interactive images in Dreamwever.  You must use one of these two methods of formatting your hyperlinks.
12. Use images thoughtfully, not just as eye candy.  Consider the role each images plays (is it a link, does it illustrate a point made in nearby text or a caption?).
13. Don’t ignore the little details: thin contrasting borders around images or the outer table (use the borders category in the style), padding in cells (that’s the margin that separates the text from the border–a table property), try adding a line between cells of tables or under a section (create a class–say called “.borderleft” that has a style with only a left border set, then apply that class to the cells of the table that should have a border on the left).  These things are demonstrated in the video clips in spark, or you can ask for help during office hours, or I can demonstrate this in class–let me know.
14. Your second (”content”) page should have a design that retains many of the design elements of the homepage, but includes space for content.  If you have no other ideas, this page could be a “Contact us” page with information on how to contact the program director.  However, the format should work for most other content that the program might need to present in a web page.  Again, if this is not clear, ask.

I will talk more about this on class on Tuesday, but feel free to email me questions in the interim.  I will continue to provide video demonstrations in Spark as I hear of demos that would be useful to you.

Good luck, and let me know how I can make this challenging assignment work better for you.

This is the time of the semester when we are all tired, and some of us wonder what corners we might need to cut in order to complete all the work before the rapidly approaching end of the semester deadline.   However, I encourage you all to invest as much as you can into your website designs.  In the first half of this assignment, I was please with how engaged everyone was, and many of you are starting to get some command of these many details that go into creating a modern website.   However, perhaps the greatest value of that first assignment was identifying what you know and don’t know, and now’s the time to act on that. 

Over the next week and a half, you will be asked to polish your work so that our clients might have the makings of a website they will be proud of and that will server their needs.  There is much to be gained in this second phase.  I want each of you to be proficient in three areas:

1. understanding the terminology, concepts, and procedures for creating a website using Dreamweaver;
2. developing the discipline for creating a professional quality site;
3. maintaining focus on the client’s needs.

Perhaps the last item is the most challenging, given the limited access you have had to the clients.  However, I think the biggest challenge is not that we don’t understand what they want (they were pretty clear about that I think, at least the big picture), but that we will be so distracted by all the technology that we will lose sight of these goals.  Moreover two of the three organizations have websites.  But remember that they don’t like these websites; those designs don’t meet their needs.  So your job is not to redesign what they have, but think fresh about what they need.  This is just a first attempt, and you are unlikely to nail it the first time, but do your best. 

I will evaluate you on your ability to accomplish those three items above, and the learning that came out of it as expressed in your Spark journal.  This is a high standard to be sure, and I recognize that, but I expect each of you are capable of it.  Let me know how I can help, and remember there are many resources available for this:

1. atomic learning tutorials
2. my videos (in spark)
3. color scheme pickers and sample sites in the course wiki (http://resec112.pbwiki.com/)

One final note, at if you are proud of your work, please submit it to the 112 Commons in the course wiki, so others may adopt your design ideas and we are more likely to leverage the skills of the whole class to produce a good product for our clients.   Remember that you get extra credit for any of your work that is adopted by others; ask if you have any questions.

During the first two classes, we created “what-if” calculators that let us predict results based on assumptions.  In the first case, we predicted race results based on the assumptions of pace and distance, and in the second case we predicted cumulative GPA based on assumptions of current semester grades and past performance.  In both these cases, we followed a similar strategy.  First we decided what information would be most useful to the user (and it what form), then we decided what inputs we would need from the user to generate that information (again, paying attention to the most convenient form, for ease of use and to reduce user error).  We then had to make sure we understood the process of converting the inputs to the output with sufficient precision to model it in our spreadsheet.  Understanding a process is called operational attunement, and it has nothing to do with Excel.  Often, the process of creating a spreadsheet to model a process reveals gaps in our understanding that we need to address by further research or by asking the client, but again, this is more a prerequisite for using excel than an issue with Excel itself.

When we understand the results we want to generate, the inputs required, and the process of calculating the results from the inputs, we can begin our work in Excel.  In this course, I am interested in you learning good form: efficient and likely to minimize errors.  The mechanics of using Excel are the easy part, and you will become confortable with data validation, lookups, effective formating, protection, and generally how to create a complex formula using unknown functions.  We will practice these, and you can refer to the atomic learning videos and my own videos as needed.

After these two warm up exercises, we will work more independently on a calculator that many find challenging, one that would let us design a house so that we optimize the amount of sunlight (heat) that comes in the windows (low in summer, high in winter).  Here is a link to that problem description:

For this project, we will work individually, then in pairs, then as a class to figure out how to proceed with this spreadsheet, then you will each be asked to work independently in class to develop it, getting help from me or the TA as needed.  Although some of the math involved might be a little rusty, I hope that you can stay focused on the process, and we’ll discuss this at the end.

Due April 27th at midnight (this is a revised due date)

This is part one of the two part web development assignment.  For this assignment you are to create a mockup of the layout for the home page and one content page suitable for use by the Holyoke agency you are assigned to.  The standard for this assignment is high: it has to be professional quality and meet the needs expressed by the director when she visited class.  There are two phases of this first assignment: 1) developing and refining the design, and 2) creating the mockup using Dreamweaver.  The time demands of both of these are hard to predict, other than it taking longer than you expect it to, so you should be working on this in earnest now. 

In an earlier posting in this blog, I suggested other resources (e.g., Atomic Learning for Dreamweaver and Fireworks “how-to” demonstrations, and the wiki for websites that help you choose color schemes and see a wide range of designs).  You also will have class time on Thursday and TA office hours Tuesday and Wednesday evenings to get help. 

I suggest that you spend this week experimenting with designs, inspired by the web resources and directed by our interviews with the program directors.  Then next week you can focus on developing the website using Dreamweaver and Fireworks. 

I will grade your assignment by looking at the version you publish to the web.  For me to find your work, you must upload the files into the holyoke folder you created on the web server.   Additionally, the filename of your homepage must be “index.html” (all lowercase).   If you have done this correctly, your work should display when I enter the following URL:

http://people.umass.edu/youroitnetid/holyoke

If you are proud of your work, you can choose to make it available to others throught the 112 Commons (we will use the wiki, not Spark, this time around for the Commons: http://resec112.pbwiki.com/FrontPage).  I’ve created a page on the wiki called “112 Commons” that you may click on to post a link of your work.  If you choose to do so, first click on the “edit page” button to make changes to the page.  Then paste the web address of your homepage onto a numbered line under the project you are working on, and write a brief (a sentence or two) description of it’s strengths and any limitations on that same line.  Be sure to click the “save” button to save the changes that you’ve made.  If you have any questions about this process, send me an email.

I expect each of you to write about your early work on this project in your journal.  It not only helps me know what issues the class as a whole are dealing with, but it lets me know the effort you are putting into this assignment, which I consider when evaluating your performance in this course.

Over this next week, you should be solidifying your web design skills and be experimenting with designs that might be appropriate for our partners from the agencies in Holyoke.  The course wiki (http://resec112.pbwiki.com/) lists several resources that will hopefully broaden your perspectives on design, from layout to colors to software techniques.  Look at many designs, keep notes about what you like, whether details to broad ideas, and write about it in your journal.  Concurrently, practice replicating these design ideas in Dreamweaver, using a combination of html and css. 

One important note: if you are inspired by a particular website, even if just a small detail, cite that inspiration in your journal.  When you hand in your project, you will be asked to list the resources, from color choosers to sample websites, that inspired your design.

On Thursday, April 10th, the 11:15 section will meet Jody Spitz, who is the coordinator of a program called Pathways to Family Success.  She will tell us about the Holyoke Family Literacy Coalition, explain what “family literacy” means, and describe the roles of the website that this section will create for her program.  She currently has a >>website>> that does not meet her needs well, and we can talk about that as well.  She will arrive at the start of class, so be prepared to ask any questions that you have in order to understand what she thinks will make a successful website.

The 9:30 section will have two visitors on Tuesday, April 15th.  Jenny Navasky, the Adolescent Program Coordinator at Holyoke Health Center, will tell us about the peer-to-peer model that her program uses, and the role she would like to see the new website play in meeting her program goals.  She currently does not have a website, but several websites that Jenny likes (full of life and color) are listed in the weblinks in Spark.  

The second visitor is Rebecca Masters, coordinator of the Holyoke Youth Task Force/Youth Commission, which focuses on collaborations between 50 youth-oriented organizations in Holyoke.  She will tell us how she hopes the new website will help highlight and promote successful partnerships.  This redesign will build off of her outdated >>website>>.

In class today, we will focus on replicating the layout of highly structured web page: http://www.umass.edu/nre.  This will be an opportunity to test your comprehension of web concepts and techniques we learned to date and also see how well you can maintain the discipline necessary for managing many containers in a document.

Since the web project will not be due for a couple weeks, you should be writing in your journals about your learning process.  What are you doing to develop skills and conceptual understanding?  What do you understand and what still confuses you?

Remember, there are many resources available to you to help you learn, including the Atomic Learning videos, TA hours in the evenings, and my office hours during the day.  I’ve seen a pattern in your journal entries from the database section of the class: often it is hard to do something on your own, even if you are following along in class.  With the web section, it was important to me that I maintained a pace that would allow you to see the interconnectedness of all the file types that contribute to a website and also get a feel from the design process.  For some, that pace was a little too fast.  Now is the time to catch up, ask questions, and try things out.  So, don’t wait until the project is due.  Practice after every class until you are either comfortable with the material or have identified areas of confusion.  Then, write about this in your journal and ask me or the TAs for clarification.

There will be a very short quiz on Thursday, focused mostly on web development vocabulary (how well do you understand the terminology and the roles of the various technologies and file types).  There will also be one database question on the quiz.

Already you have been exposed to the basic concepts and methods for creating a modern website, and it is time to practice.  There are many, many details to get right when creating a website, new software tools to learn, and new concepts to apply, so you cannot wait until the first project is due to practice.  In class today we split our time between refining our practice site from Tuesday–as a group–and seeing how far you can go individually to reproduce the layout and design of the college homepage: http://www.umass.edu/nre

What’s perhaps most important is how you spend your time outside of class practicing this stuff.  There are ample office hours available this week, both with the TA’s and me, to get help; see the “contact info” link on the right. Remember, too, that the there are Atomic Learning video clips covering most of the components of web design using Dreamweaver.  It is important to try on your own to practice what we do in class, with the goals being to solidify what you know, identify more precisely what confuses you, and generally increase your comfort in a web design environment.

I want to know how this is going for you.  Please write about your practicing in your journal in Spark.  What have you been trying?  What do you understand?  What confuses you?  How do you plan to address what confuses you.  As with the databases, I will credit you for your thoughtful effort, as this independent work is, like coming to class regularly, critical to becoming proficient in web design.

One last reminder:  Dreamweaver is available on all the OIT computers in the campus labs and Learning Commons.  Also, you may download a trial version from the Adobe website that is full-featured but expires in 30-days: http://www.adobe.com/downloads/