1. week 1
  2. week 2
  3. week 3
  4. week 4
  5. week 5
  6. week 6
  7. week 7
  8. week 8
  9. week 9
  10. week 10
  11. week 11
  12. week 12
  13. week 13

Saturday, November 21, 2009

Fall 2009

week 10: 11/19, Wed 6:00 - 9:00

Hi everyone,

I know that for many of you this past week's class was a little difficult to understand, but I hope most of you have begun to catch on.

The essence of this project is to get to the basics of design, in much the same way that the early Modernists from the beginning of the 20th century did. These include, as I mentioned in class, the Russian Constructivists and the artists and designers from The Bauhausin case you are interested, there is a very nice exhibition of THE BAUHAUS at the Museum of Modern Art (MoMA) that I would highly recommend to anyone interested in art and design.


The basic idea behind these movements is to start from some fundamental principles. These include point/line/plane, positive space/negative space, and color. They pared down design to its essentials and worked with those before adding any decoration or embellishments.

That was what we also started with in our 2D design exercises with the 9-square, those steps that I made you follow to derive your designs. This week, I wanted you to begin to transform those designs into something that begins to resemble a webpage, by adding the primary navigation menu and also perhaps a dummy title.

Although my design from last week's blog with the black/white/gray/red forms DID NOT come from those steps, I intentionally tried to model the design with those same ideas in mind. Hopefully, you can see the resemblance to what you are doing in class with your own ideas. If you look at the two images below, the first one is the finished design from the last blog, and the second one is a 2D design that resembles what I came up with. You should definitely see the resemblance and how I might have come up with my little webpage.



Try using the same techniques to derive your own webpages, and show me what you come up with in class next week.

  1. TOPICS:
    • LINK   Homework
    • LINK   Questions
    • LINK   Final Project;
      • LINK   Content Requirements;
      • LINK   Technical Requirements;
      • LINK   Design Requirements;
     
  2. HOMEWORK IFinal Project, Part I: Starting this week, the homework for each class is part of the final project. Each part will be do one week from the time that it was assigned. This means that the assignment for this week will be due in the next class. Each week I will assign a new part to the website. If you produce these assignments on time each week, you will have accumulated a small website and you will receive a decent homework grade.

    The site that we are going to produce is for an ART GALLERY named Alpha Gallery. This week (as mentioned in class), you should design the title and the navigation for the site and keep in mind the comments that I made during class this week.

    1. Due in class next week: You must try to produce the first page (the home page) of the design in XHTML and CSS and name it index.html. You must attempt to design this page, otherwise known as the home page, using the 2D design you created some weeks ago as a guide. You should deviate from this design as little as possible, and only make changes for which you can make a convincing case to me.
    2. Due in class next week: when complete, you must make four (4) ADDITIONAL copies of this file (copy & paste them) and give them the following names: gal_01.html, gal_02.html, artists_01.html, artists_02.html. As a result, all the pages will be exactly alike for the time being.
      SEE BELOW FOR FURTHER INFORMATION ABOUT THE INDEX/HOME PAGE as well as all of the other pages.



  3. HOMEWORK IIQuestions: Answer the questions below for class next week

  4.  
  5. FINAL PROJECT: Information
    • The site that you are going to produce is for an art gallery and it will have six main parts: the home/index page, two gallery pages, two artist pages, an about page, a visit page, and an exhibit page. Please read the information provided.
      1. CONTENT REQUIREMENTS: 
        1. Part 1: HOME PAGE—due next week.

          —this page includes the following:

          1. In this page, you have already established the color scheme that you will use throughout your design for this site, as given to you through your 2D design.
          2. The name of the gallery: Alpha Gallery
          3. The name of the current exhibit: "ART:21 -- Art in the 21st Century;"
          4. A logo of your own design for the gallery (Alpha Gallery)
          5. The following text for the current exhibit:

            Contemporary art speaks directly to the important questions of our time, as well as to the changing landscape of American identity. It is both a mirror of contemporary society and a window through with we view and deepen our understanding of life as it exists today. Who are today's artists? What are they thinking about? How do they describe their work? Why do they do what they do?

            These are some of the questions addressed in the exhibition: ART:21 Art in the Twenty-First Century. This show presents the artists without interpretive mediation through large presentations of their work. If the unknown is the space in which creativity flourishes, This exhibit desires to bring it forward, illuminate it for others, and revel in it. This is ART:21's work—to reveal the existence of those regions which all the artists traverse, forging paths of exploration and study that take them into uncharted realms of creativity. By revealing the existence of those unknown territories, inhabited by all creative thinkers, I hope to educate, delight, and to provoke the viewers.

            It is difficult to imagine that anyone works harder than an artist. This—the non-stop work, accumulation of information, concentration, the need to be in the studio—is a continuing mini-theme for ART:21. Most artists experience intuitive leaps of recognition and connection, and find new ideas through introspection and research in many fields beyond art, although the art of the past remains a profound resource.

            One might say that in order to draw, you have to learn how to see first. Well, what about making drawings and other works of art about areas, about zones and realms that you CANNOT see, about areas hidden from view, about secret realms and invisible places? This is what many of these artists have in common: they are attempting to bring to light and view things that were previously unseen.

          6. Some kind of imagery or design to go with the name of the current exhibit, "Art 21: Art of the 21st Century.
        2. Part 2: ARTIST PAGES—due in 2 weeks.

          —these TWO pages will look identical. Essentially, what you will do for each artist is the following:

          1. a small picture of one of the works by the artist;
          2. his/her name; and
          3. a blurb of text about the artist—I have provided you with the text for these two pages below. Each page will contain 10 artists.

          LINK   CLICK HERE for the text for the ARTISTS PAGES;

        3. Part 3: GALLERY PAGES—due in 3 weeks.

          —These TWO pages will also look identical. They will have thumbnail images of the pictures that I have given you of the artwork. I gave you half of the images in our last class and will give you the remaining images in our next class. Each image should be clickable. When you click on the small thumbnail images, you are linked to a page with a much larger version of the image. Accompanying each large image should be the name of the artist and the title of the work as a caption. Also, when you click on the thumbnail images in the gallery, the pages with the larger image should open up in a separate browser window or tab.

          1. LINK   image 1;
          2. LINK   image 2;
          3. LINK   image 3;
          4. LINK   image 4;
          5. LINK   image 5;
          6. LINK   image 6;
          7. LINK   image 7;
          8. LINK   image 8;
          9. LINK   image 9;
          10. LINK   image 10;
          11. LINK   image 11;
          12. LINK   image 12;
          13. LINK   image 13;
          14. LINK   image 14;
          15. LINK   image 15;
          16. LINK   image 16;
          17. LINK   image 17;
          18. LINK   image 18;
          19. LINK   image 19;
          20. LINK   image 20;
      2.  
      3. DESIGN REQUIREMENTS:
        1. Color Scheme—your color scheme for your web-site comes from or is inspired by the 2D design that you created in class.
        2. Page Layout—you must use CSS to lay out all pages in a pleasing way. If you are not certain how to do this, consult our past classes and me for assistance. The layout itself should be inspired by the layout that is demonstrated design that you created in class.
      4.  
      5. TECHNICAL REQUIREMENTS:
        1. XHTML

          —ALL CODE for this site must be typed using STRICT XHTML standards. This means the following:

          • that all tags and their attributes must be typed in lower case;
          • that all attribute values must be typed in quotes and with units;
          • that the DTD for strict XHTML must be typed at the top of the document;
          • that all empty tags must be typed with the slash at the end, such as with the <br/> tag;
          • that none of the deprecated inline tags are to be used, such as the <font>, <b>, <u>, or <i> tags;
          • and, in addition, that the <tbody> and the <thead> tags, as well as the height attribute for the <table> and <td> tags, are NOT permitted.

          If you are uncertain about something, you can consult the requirements at the w3schools site (LINK), or you may ask me. Furthermore, the use of DreamWeaver is permitted; however, please note that DreamWeaver does not create strict XHTML. Therefore, you will have to go through the code and edit it yourself to make certain it follows strict standards.

        2. CSS

          —ALL STYLING must be done using CSS. We have used it extensively in this class, so it is a requirement that this site use CSS for the styling of the page. All three levels of styles may be, and are encouraged to be used. Please consult me if you need additional assistance with this.

     
  6. QUESTIONS: Answer these questions for next week's class as homework and to help guide you through this weeks' material—chapters 3, 5, and 7 on CSS:
    1. How many fonts can you specify for the font-family CSS property?
    2. According to the book (chapter 5), what are the four most widely supported fonts on computers?
    3. Of the two codes we have been covering in class up to now, which one is to be used mainly for structuring or organizing the page content and which is to be used mainly for designing or presenting the page content?
    4. What would the purpose be of consistent presentation of your individual web pages throughout your site be—for example: designing the text in the paragraphs the same in all the pages, designing the main headings in all the pages the same, making the links in all the pages the same?
    5. What is the difference between an internal and an external style sheet in where they are typed?
    6. What are two ways to link style sheets to a web page?
    7. What is a CSS rule?
    8. What are the two main parts of any CSS rule?
    9. What is a selector in CSS?
    10. Other than tag names, what are two other types of CSS selectors?
    11. What are two differences between IDs and Classes?
    12. What character must be typed before the name of an ID? Before the name of a class?
    13. How do you apply a class or an id so that the styles show up in a page?
    14. Name five (5) examples of CSS properties that we have used in class.
    15. Name three (3) examples of CSS selectors that we have used in class.
    16. What does the <div></div> tag pair do?
    17. How many different types of borders can you create with CSS? What are they?
    18. What is padding?
    19. Name three (3) places in a web page that you can set the background color.
    20. Type an example of the code for setting a background image using CSS. In this code, you must also determine if the image is to be repeated, and where it is to be positioned on the page.

No comments:

Post a Comment