El Camino College Web Design Class: Lecture Notes

EL CAMINO COLLEGE: SPRING 2002
ART 146

LECTURE NOTES:

Week 1	1/14/02 Web design class: Art146abcd I. Introduction -Lab guidelines -Register for Art100 for open lab hours -Buy cheap book; http://www.bookpool.com or amazon.com II. Syllabus/Student Information Sheet III. Structure of web 1: search engines LAB WORK Report: your name your background Reason for taking this class the best site you have chosen under the keyword: the worst site you have chosen under the keyword: 1/16/2002 How to register for Art100? I. Today's website: http://graphicdesign.about.com II. Schedule III. Introduction to HTML -How the internet works?? Platforms: Windows N T/2000, UNIX (IBM, HP, SUN) LINUX, MAC Web server platform: Apache, IIS, Netscape enterprise, (MAC, Windows?) Internet Service Provider: AOL, Earthlink, MSN What's HTML? What's URL? FTP? Type of connections: MODEM (28.8kbps, 56kbps, kpbs=Kilo Bits Per Second) (When we say KB, it usually means kilo Bytes, 1 byte=8bits) CABLE : not affected by the distance, phone company DSL (data/voice separate)--affected by the distance T1; ethernet T3 W3C (WWW committee): authorize and approves HTML tags IV. Creating HTML documents. <html> </html> Head Title text (bold, italic, size) image hyperlink <HTML>, <HEAD>, <FONT>, <P>, <BR>, <IMG SRC=" ">* V. Lab Assignment I Create two pages of HTMl documents. 1. create a folder in DOCUMENTS and name it using your last name. 2. go to any website and download two pictures. 3. create Hyper links to one external site and to your 2nd page. Back to Top
Week 2	1/23/02 I. Today's Websites (downloading images): http://www.Freefoto.com http://www.corbis.com http://www.Iconbazaar.com http://www.webdevelopersjournal.com/ II. Review What is HTML?: Hypertext markup language What is URL?: Uniform Resource Locator Review of Lab 1 III. Colors on computer graphics: RGB based color: what do you see on your monitor? _________ pure black and pure white: 1bit Grayscale: 8 bit /16 bit (how many GRAYs?) 8 bit color =2x2x2x2x2x2x2x2=256 colors (index color)--GIF image 16 bit color = 65536 colors (thousands) 24 bit color = 16777216 colors (millions of colors,)--JPG -8 bit for Red, 8 bit for Green, 8 bit for Blue 32bit color = true colors, 4294967296 -8 bit for Red, 8 bit for Green, 8 bit for Blue, 8 bit for Alpha channel -this means: R: 0-255, G: 0-255, B: 0-255 --check you monitor resolution! FYI)--check on photoshop! R(255), G(255), B(255)=white additive colors: (Cyan Magenta Yellow (K-black)=subtractive colors) Reading (get files from Art5teacher station using AppleShare: this article is from http://www.webdevelopersjournal.com/) IV. Websafe colors: -Video Card capabilities: -The 256 colors were determined by a mathematical formula, rather than their aesthetic qualities. The major computer platform developers did not use all of the same 256 colors. -but the web safe colors are 216 -The colors in this basic palette would display solid (and not dithered) on specific platform's monitors that were capable of displaying 256 colors. This basic palette of 256 colors contains the 216 we now call the Web Safe palette, although in the days when the basic palette was devised the web was not available for the public to use. -Web Safe colors are defined in terms of RGB values of 0, 51, 102, 153, 204, and 255. These numbers might seem a bit random, but are in fact made up of multiples of 51. OK, you say, where does the 51 come from? Well I was asking myself the same question before I discovered that 51 is 20% of 255. (NOTE: As 0 is considered a value, we say 0-255 instead of 1-256). 102 is 40% of 255, and so on. So out of this randomness comes order. Of sorts. ---Check photoshop's color picker/palette--- 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F--Hexadecimal code What is DITHERED COLOR? To give the appearance of more colors, and this is especially true of early monitors that could only display 16 pure colors, a process called dithering was used to give the impression of more colors. When you create an image or text image that will contain an invisible background color, make the background color the same as your web site (which should be a Web Safe color). Or, pick a Web Safe color that comes very close to your background color or background texture. The reason for this is when your application creates the web image, often it will anti-alias (blend) the edge of the visible image to the background color. If you use a white background, for example, and your site has a red brown background, you may see an annoying light colored fringe around your image such as you can see on the example on the left. Using a Web Safe color, on the other hand, should produce a cleaner image like the one shown on the right. When and How to Use them? If you create a web graphic with an invisible background, make the invisible background color a web safe color. It will work better and produce fewer display problems. In some cases, designating a non-web safe color transparent can lead to a dithered transparency when viewed on some browsers. When To Be Web Safe--who is your target audience? Bottom line is this. You have to decide who your audience is and design for her or him. If you are designing for the mass market, including persons with antiquated computer systems and slug-like modems, then better to be Web Safe than sorry. On the other hand, if you are taking to the computer savvy who have more modern displays and faster modems (like us), then you'll want to read the second half of this article (next month) where we will deal with alternative palettes such as Adaptive and Web-Snap Adaptive, and other adaptations of the 256-color palette that make life for us Web Site Designers and Developers a little more, dare I say, palatable. V. Introduction to Photoshop: Vector Graphics: based on mathematical calculation (y=mx+b) --small file, scalable Raster Graphics: each pixel has color (and transparency) information. --picture quality (graduation)-- Image size in pixels, file format. (GIF, JPG, EPS, TIF, TARGA) Color Mode: RGB, CMYK, Grayscale, index color Creating GIF image--dithering decisions: VI. Controlling the HTML TEXT* Download images: (GIF, animated GIF) Iconbazaar.com Background color, and/or Background Image. Buttons to go to the next page. (make a new folder in your root folder named 'Nav_Graphics' and save all the buttons and BG image there) MORE text controlling tags: Definite link and relative links. (create 2nd page) E-mail link LAB Assignment 2 Use Lab 1 assignment. Add.<HR> Link to outer site--Http://www.elcamino.cc.ca.us/ E-Mail link: Mailto:your e-mail address Background color, and /or Background Image. Back to Top
Week 3	1/28/02/01--4th day Today's website: flashkit.com http://www.coolhomepages.com/ (let's go see some cool sites) announcement: Register for ART100 to use the lab in open lab hours: section# is 5233. I. More HTML <tags>: Review* <HR> Link to other site--http://www.elcaminocollege.org/digitalarts/ E-mail link: Mailto: Background color. <body bgcolor="# ", > Background Image/ (how to make background with graduation, and tiled background). <body background=" ", ><html> <head> <title>Tilebackground sample</title> </head> <body bgcolor="#FFFFFF" text="#CCFF00" background="Button3.gif"> </body> </html> II. Fundamentals of graphic design. Formal Elements of Graphic Design http://www.grantasticdesigns.com/glossary.html (when you need a dictionary of technical terms) http://www.lightlink.com/xine/graphics.html (cool links to web design and source materials) http://www.coolhomepages.com/ (let's go see some cool sites) Graphic Design Solutions: Robin Landa, OnWord Press (Thomson Learning), 2nd ed. 2001 Graphic design elemetents that are specific to WEB are, screen size and sequential navigation. 1. Formal Elements: They are the building blocks of two-dimensional design. Line, Shape, Color, Value, Texture, Format --definition is not important but the application is. --Photoshop/Flash DEMO of Elements-- Line: A line is a MARK made by a tool as it is drawn across a surface. --In what direction is the line moving? Line Type (attributes): refers to the way it moves from its beginning to its end. (straight or curved?) Line Direction: describes a line's relationship to the page. (i.e. horizontal line move across the page, east to west or west to east. ) Line Quality: refers to how a line is drawn. Delicate or bold, smooth or broken, thick or thin, regular or changing--line's visual quality. Shape: Closed form or closed path. --Lines can be used to describe flat shape, like a pyramid or cube. A shape can be open or filled with colors, tone, or texture. --Representational (2D representation of the real world objects, either simplified or not) or Non-representational. Linear Shape: Lines are used to describe the shape. Shape made by Color or Collage : an area of a certain color/collage that is not surrounded by lines but clear and distinct. Color: Powerful and provocative design element! Black, white, gray, and other colors. HUE: name of the color, i.e., red blue, orange. VALUE: the range of lightness and darkness, i.e. light red as opposed to dark red. Shade, tone and tint are different aspects of value. SATURATION: brightness or dullness of a color, bright red or dull red. In photoshop, getting more saturation is to eliminate the variation of the color. Chroma and intensity are synonyms for saturation. Three primary colors on paint or pigment: red, yellow and blue. (because they cannot be mixed while other colors can be mixed from them. (3 primary colors on the light??) --Certain colors are associated with certain things. Certain industries use certain colors than other industries. Cosmetics, Pharmaceutical, Bank, (GOLD and WHITE, WHITE and BLUE, RED and BLUE, etc) Value: range of darkness and lightness of a visual element. (similar to value in color) -Value Contrast: the relationship of one element (Part or Detail) to another in respect to lightness and darkness is called value contrast. I.e. we need value contrast in order to read words on a page. (Black and white have the maximum value contrast each other) -Low Contrast: Narrow range of values. -High-contrast: Wide range of values. Texture: Tactile quality of a surface or the representation of such a surface quality. Tactile texture--lace, sandpapers, linen, velvet, etc, Visual texture--creating the illusion of a texture or the impression of a texture with line, value, and/or colors. --photoshop techniques on crearing textures (using filters) Format: Brochures, book covers, shopping bags, envelope, etc, WEB--Computer screen with the scroll availability. III. How to be a better webdesigner? -Be a good evaluator of web sites design: Develop the habit of Critical analysis: visit as many sites as you can. -Be critical to your own design. (because you can always make it better) -Be proud of what you make when you give a presentation. --analyze the following-- -The overall feeling of the site. -The kind/function/nature of the site. (commercial, educational, informative, hobby, cult, etc) -Target audience of the site. (is it for everybody, if not who are the ones to veiw the site?) -Navigational system. -Color strategy of the site. -The part the you like about the site. -The part you hate about the site. __________ Example Site: http://www.coolhomepages.com/ (let's go see some cool sites) HW: visit one of the following site and analyze the color scheme/color theme/color strategy of the site. Turn one sheet of paper, with your name, and the name of the site that you analyzed. http://www.2advanced.com (design house) http://www. gagosian. com (high profile art gallery) http://www. moca. org (museum) IV. Color Scheme of WEB SITE: what is the color-scheme? 1. Why is it importnat to set the color shceme of the site? 1. Create easy navigation. 2. Create visual pleasure and theresore, attracts more people (and they are less tired after the viewing)2. Designing the color scheme of your site: --Governing Tone/Mood. (Monotone based or specific color based), Use adjective to describe the overall feeling of the site. --Theme Color?? (One or more, i.e. specific contents gets specific colors. Each menu can have its own theme color. --Assign certain colors to the individual elements of web site according to its function within the site. <<BASICS>> A. Navigational graphics should be consistent in style, varied in color. B. Text links to the external site should be in the same color. C. Text links to the internal contents should be in the same color and be different from that of the external links. D. Titles/headings of particular pages should match the theme (not just the color, the FEELING!) of the site or the theme of the page (content). E. If titles and headings are graphic in nature, rule A should apply to them as well. --Relationship between Text color and Background color. (how to make it better using HEX code). <<things to always remember>> Visual consistency creates the easy navigation. Visual contrast should be used to attract the attention of the viewer (as a hook) and the use of it should be limited becuase (it is not contrasty at all if it used too much!!) And you should always strive to make it less crowded. 1/31/02: Today's websites: http://www.coolhomepages.com/ (let's go see some cool sites) Please turn in your HW (website color analysis) I. More on Photoshop.* JPG format--compression issue. GIF--TRANSPARENT, MATTE, INTERLACED Creating Nav_buttons. (make a new folder in your root folder) Example of MATTED GIF and its relation to the background color.-- How to make 3D like circular buttons. (Gradient tool) II. Dreamweaver review. --Information Hierarchy. --site management system (define site) --Folder structure review--linking (how to point to a file in a folder within the same root folder) --Preview in browser: --Inline graphics aligning text with images --Using Table I III. How to Use Fetch to upload your files to the server. Folder structure. Password IV. Lab--continue on the LAB 2 assignment. Use Lab 1 assignment, and reconfigure in Dreamweaver -Elements you have already done: Link to outer site--Http://www.elcamino.cc.ca.us/ E-Mail link: Mailto:your e-mail address Background color, and /or Background Image. -In Photoshop, create a GIF format button and place it in your first page. make a new folder in your root folder named "Nav_Graphics" and save all the buttons and BG image there apply proper matte color on the button *this button is a link to go to your second page replacing the text link that you previously had. -Reorganize all of the elements in your page and make it look good using dreamweaver! Back to Top
Week 4	02/04/02(MON) ISBN for HTML Illustrated Complete (2nd ed.): 0619018801 I. Graphic Design Lecture Review: Formal Elements (line, shape, value, color, texture, format) II. Adding Graphics and Multimedia files. --Download icons, fonts, sound files (and save them in your folder) http://www.iconbazaar.com/ http://www.iconfactory.com/ http://www.flashkit.com --for fonts, sound effects, tutorials --Making images a clickable link (Dreamweaver) --Hyperlinking sound files. --add inline graphics and align them to the text.(top, middle or bottom) III. Creating Imagemap/Rollover on Dreamweaver. --Links to different sites. --Make Rollover images. (USE icons) IV. Photoshop 6: creating a logo V. Lab Assignment 3 --Download sound files and save in "sound" folder inside your roof folder and hyperlink them. (http://www.flashkit.com) --Download still and animated gifs. (http://www.iconbazaar.com) and Add inline graphics (animated GIF and still GIFs) and align them to the text.(top, middle or bottom) --Make Rollover images and make it work as a hyper link to the sound files. 2/06/01 (WED) -7th day Today's website: http://www.tryoncenter.org/ (use of ICONS) http://www.coolhomepages.com (for LOGO samples) Review of HW: gagosian.com I. TCP/IP Transmission Control Protocol/Internet Protocol. Your PC is connected to internet through this protocol. A standard method/protocol is to use phone line. (dial-up connection) The other type is to use data only line such as ethernet (T1). IP address (unique to each computer): 127.7.7.900 II. More on Dreamweaver -Creating Imagemap on Dreamweaver-review. -Creating a roll over images on dreamweaver. (photoshop buttons again) -Downloading MOVIES. Two kinds of online movies: streaming (need streaming server) and downloadable. -Online Movie format: .AVI, .MOV, .mpeg, RM(non-streaming), RAM(streamimg) 100-200 Kbytes/second. (phone connection) 200K or more for faster connections. .swf (through flash plug-in) shockwave movies (through shockwave plug-in) -SOUND format: wav, aiff, mp3, mp4 III. Photoshop DEMO: creating a LOGO --QUIZ 1--- VI. Lab Assignment 3 --Download sound files and hyperlink them. (http://www.flashkit.com) --Download still and animated gifs. (http://www.iconbazaar.com) and Add inline graphics (animated GIF and still GIFs) and align them to the text.(top, middle or bottom) ---Make Rollover images on the 2nd page or to your buttons. (you have done above already) -Create Imagemap on your picture on the 1st page and have two different links (to extenal site) of your choice. --Create a sample logo of your page and place it in both of your pages. Back to Top
Week 5	2/11/01--8th day. --QUIZ 1 returned, and review. HEX code=Hexadecimal code Bring two photographs (or two magazine pages) that best describe your personality on WED. Today's website: http://www.lynda.com I. Fundamentals of Graphic Design 2: Principle of Design. Graphic Design Solutions: Robin Landa, OnWord Press (Thomson Learning), 2nd ed. 2001 The principles of Design --how to --Make the design visually appealing. 1. Balance--Equal Distribution of Weights. --When a design is balanced, we tend to feel that it holds together, looks unified, and feels harmonious. --When a design is unbalanced, it can --Make us feel uncomfortable. (but it could be effective) Three Elements in Balance--Weight, Position, Arrangement. Weight: --When you --Make a mark on a page, that mark has a visual weight, it can appear to be light or heavy. Visual weight can be defined as creating the illusion of physical weight on a 2D surface. (EX. -two contrasty lines on one page) Position: The same mark positioned at different points on a page (bottom, top, right, left) will appear to change in visual weight. (NIKE logo?) --Different areas of page seem to carry more or less visual weight. (Flash EX.) CENTER of the page is very powerful, and carries a heavy weight. Arrangement: --Symmetry-Arrange all identical and similar visual elements in evenly distributed manner in a page. (equal distribution of weight, Symmetry is always balanced) --Asymmetry-Arrange dissimilar or unequal elements in equal weight. (Asymmetry can be balanced or unbalanced) How to achieve asymmetrical balance?--every element affects each other. 2. Emphasis: Focal Point and Hierarchy How does a viewer absorb visual information? How does a viewer know what is most important? (More people are passive and waiting for the direction/navigation) Emphasis is the idea that some things are more important than others, and important things should be noticed in a visual realm. The part of the design that is most emphasized is called FOCAL POINT. --A focal point is usually determined by the relative importance of the chosen element to the message and by what the designer believes will attract the viewer. Main Message (=Focal Point) and Peripheral Information (=ACCENTS) If you give emphasis to all elements in a design, you have given it to none of them. It is just confusing... Possible Ways to --Make a visual element a Focal Point. 1. --Make it brighter. (COLOR(hue, value, saturation), VALUE) 2. --Make it a different color. (Color scheme) 3. --Make it in a color if everything is in Grayscale or vice versa. 4. --Make it go in a different direction. (Vertical, Horizontal, direction of line, direction of weight) 5. --Make it a different value 6. Position it in a different manner than other elements. (aligning) 7. Give it a texture or a different texture than the other elements. 8. Arrange all the elements to lead to it. 9. --Make it a different shape than the other elements. 10. ISOLATE IT> 11. --Make it clear and the other elements hazy. 12. REVERSE IT> 13. --Make it an opaque color and other colors transparent. 14. --Make it glossy and the other elements dull. How to achieve consistency and focal point at the same time? Establish VISUAL HIERARCHY --arranging elements according to emphasis. Establish a priority order. A. Where do you look first? B. Where do you look second? C. Where do you look third? Decide what is the most important, then secondly, thirdly, and so on. Use factors such as position, size, value, color and visual weight to --Make sure your audience sees the elements in the order of importance. --In web design, what kind of priority do you give to the following elements? company logo, navigational graphics, text links, main text/images. 3. Rhythm A beat, sense of movement established by visual elements (not the sound) RHYTHM is a pattern that is created by repeating or varying elements, with consideration given to the space between them. maintaining the rythm--consistency. (REPETITION) changing the rythm--contrast and Focal Point. (VARIATION) 4. Unity How does a designer successfully organize all the visual elements and achieve UNITY where the elements in a design look as though they belong together? Achieving UNITY relies on basic knowledge of formal elements, and understanding of other design principles. --Establish a Common Bond around the elements. GESTALT--from GESTALT PSYCHOLOGY: if a viewer cannot find unity in a design, he or she will lose interest. GESTALT describes the visual unity and wholeness. Unity contributes to memorability, total effect, and clear communication. HOW TO ACHIEVE UNITY: Correspondence: (between the elements) When you repeat an element like color, direction, value, shape, or texture, or establish a style, like a linear style, you establish a visual connection or CORRESPONDENCE among the elements. Continuity? -used to create family/category within a design. (in WEB DESIGN, what kind of category do you have?) Variety is between the categories, and exist within the continuity. (How?) GRID: Subdividing the format into horizontal or vertical divisions, columns, margins and spaces establishes a framework for organizing space, type and pictures. ALIGNMENT: When the edges or axes of elements line up, the eye easily pick up these relationships and makes connections among the them. FLOW: Elements should be arranged so that the audience is led from one elements to another through the design. Also called MOVEMENT and is connected to the principle of rhythm. II. More text controlling tags. <blockquote> <UL> <OL> <DD><DT> III. Using Tables. Significance of table--Definite layout of the page, E-commerce (database driven website). www.rvsearch.com -HTML Tags. "ALT" tag What is ALT tag? ALT tag does not work on MAC. ALT tag does not work if JavaScript Roll Over is applied to the image(s). -Using Dreamweaver to control table. 1. Dreamweaver-New File-Page Property-Set colors on LINK. 2. View HTML source. -Span Columns ON Dreamweaver: -Format border, Modify dorder -Align Text -Adding color -Table dimensions (percentage or pixel) -Cell space, Cell Pad ex.--USC, Berlin/LA Film Festival Page. IV. Scanning: (photo/flat art) 1. Scan DEMO 2. Photoshop Retouching. -resize for WEB (72dpi) -Retouching (scan noise, dust) -Color Balance, Tone Curve, Brightness and Contrast. -Filters: sharpen, unsharp mask, noise (add and remove), artistic, etc. -save for WEB (Imageready-optimization) V. Lab Assignment 3 -continued- --Download sound files and hyperlink them. (http://www.flashkit.com) --Download still and animated gifs. (http://www.iconbazaar.com) and Add inline graphics (animated GIF and still GIFs) and align them to the text.(top, middle or bottom) --Create Imagemap on your picture on the 1st page and have two different links (to extenal site) of your choice. --Make Rollover images on the 2nd page or to your buttons. 2/13/02 I. Using Tables. --Review-- Significance of table--Definite layout of the page, E-commerce (database driven website). www.rvsearch.com II. Graphic Design Review; Formal Elements and Principle of Design III. LOGO Critique.--Presentation of your LOGO. IV. Scanning: (photo/flat art) 1. Scan DEMO 2. Photoshop Retouching. -resize for WEB (72dpi) -Retouching (scan noise, dust) -Color Balance, Tone Curve, Brightness and Contrast. -Filters: sharpen, unsharp mask, noise (add and remove), artistic, etc. -save for WEB (Imageready-optimization) V. Photoshop: Liquify Effect VI. LAB WORK; Lab Assignment 3 -continued- --Download sound files and hyperlink them. (http://www.flashkit.com) --Download still and animated gifs. (http://www.iconbazaar.com) and Add inline graphics (animated GIF and still GIFs) and align them to the text.(top, middle or bottom) --Create Imagemap on your picture on the 1st page and have two different links (to external site) of your choice. --Make Rollover images on the 2nd page or to your buttons. --Create a sample logo of your page and place it in both of your pages. LAB Assignment 4--personal narrative (2 pages) (due Wed. 2/13/02) -Scan and touch up two photographs/magazine pages. (Add special effect filters on PHOTOSHOP) 1st Page: -create a table and place your logo and one of the scanned image. -Create a link to the 2nd page. 2nd page: -create a table and place your logo and 2nd picture. -Add text explanation about the images and why the images represents your personality. USE Ordered List, unordered list or blockquote. Back to Top
Week 6	2/20/02 Annoucement: -BRING YOUR OWN PAPER to PRINT!!! -Quiz 2 on Feb 25 (M)--Graphic design theories -Individual project 1: Abstract Visual Narrative (minimum of 4 pages of HTML and images)--details to come, NO WORDS, SENTENCES Today's website: www.alllooksame.com I. -Structure of Web II: Example of database driven site. (.php, .cfm, .asp, .jsp) www.rvsearch.com -What is DATABASE? -card, table? -ORACLE, Microsoft Access, Filemaker Pro. -searchable content. -What does DYNAMIC mean? Dynamic web site vs. static website. CGI, perl--server side dynamic operation. Others--userside dynamic operation. How does a webserver store a database (so that it can be accessed through web pages) -requires a server software. -How to access to the database? SQL (Structured Query Language) ex. )Coldfusion: -Online Security Issues II. Using forms to Control Input. Planning a Form: purpose of the form. <body> <form name ="feedback" action="mailto:tomoisoyama@hotmail.com" method="post"> </form> </body> -textfield (single/multi line) -checkbox -radiobutton -list/menu -jump menu -Testing FORMS on IE, Edit-Preferences-E-mail-General (put in your e-mail address and setting) H.W.>>Ch 13(pp420-438) on Dreamweaver HOT. Read and complete the exercises. III. Using Layers on Dreamweaver. -absolute positioning on the page. -Browser compatibility (4.0 or later) -Viewing the GRID on your page. (VIEW-GRID or apple+option+shift+G) -Using the Layer Palette -Convert Table to Layer, Layer to Table. More on Layers--Behaviors: -Show and Hide layers. -Drag Layer --Read CH 8 and 15 (pp.498-529) on Dreamweaver HOT. IV. LAB Assignment 5: Feedback page to be included on your final project. USE textfield, radio button, checkboxes, drop-down menu Form objects to be included: Last Name, First Name, Gender, Occupation, Age, -"How did you know my site?" (checkboxes) -IMPRESSION of the site. -Submit and Reset Button -2 Layer objects, with show and hide behavior Back to Top
Week 7	2/25/02 Annoucement: Individual Project I "Abstract Visual Narrative" -Minimum of 4 pages of HTML and Images -Due Mar 6 (Wed.) -Only visuals (images, lines, shapes) carry the narrative. -Text(words and sentences) is only allowed to title the piece. (go to page property--title) -Alphabet and letters can be used only as visual elements. -Consider this project as a stand alone, self-contaning Fine Art Piece on the Web. -You are going to include this piece as a part of final project. KEY ISSUES TO ATTACK: 1. Theme: (feeling: happy, sad, etc...) -i.e. Social/Political Commentary ? -"ABSTRACT" means what? -Power of the colors, or the monotone -Power of the simple shapes and lines (Go back to the Graphic Desing Lecture Note) 2. The conventions about ICONS and web imagery. (i.e. shopping cart icon, E-mail Icon, arrows to go back and forth) 3. Think carefully on how to navigate audience through the pages. (arrows or buttons?, imagemap?, rollover? how to do it w/o TEXT?)Today's website: Link to free and not free jpgs: http://www.thebiggerpixel.com http://creative.gettyimages.com/photodisc/ I. Quiz 2 II. Using Anchor tag (example: lecture note) III. FTP DEMO(lecture notes) -download the lecture note page, modify and upload the page. IV. Using Layers on Dreamweaver. -absolute positioning on the page. -Browser compatibility (4.0 or later) -Viewing the GRID on your page. (VIEW-GRID or apple+option+shift+G) -Using the Layer Palette Behaviors: -Show and Hide layers. -Drag Layer -Convert Table to Layer, Layer to Table. --Read CH 8 and 15 (pp.498-529) on Dreamweaver HOT. VI. LAB Assignment 5: Feedback page to be included on your final project. USE textfield, radio button, checkboxes, drop-down menu Form objects to be included: Last Name, First Name, Gender, Occupation, Age, -"How did you know my site?" (checkboxes) -IMPRESSION of the site. -Submit and Reset Button -2 Layer objects, with show and hide behavio 02/27/02 Annoucement Todays's website: http://www.internet.com/ (also the example of layer based naviagation) Midterm Exam March 13th (W) I. Layers Review: -If you are inserting a picture inside a layer, MAKE SURE that the layer is big enough for the picture dimensions. Remember that you can overlap the layers. (if combined with show and hide layers, it could create nice effect) -selecting the events to trigger the behavior -more layer behaviors to come (i.e. timeline animaiton, dragging the layer) II. Graphic Design Lecture 3: Manipulation of Graphic Space 1. Positive and Negative Space -Positive and Negative Relationship (subject and background) -If you draw a shape on a page, you instantly create a positive /negative relationship. The shape is the positive space, or figure, and the rest of the space on the page is the negative space, or ground. -The positive and negative space is interdependent and interactive in a good design. (no space is dead or leftover) -Designer should always aware of BLANK SPACES and make them work in a design. (ALL SPACE have to be active in a design--CREATE WHOLENESS) -Every format has a limited amount of space and a shape of its own (WEB??) -CHARGING THE NEGATIVE SPACE: creating WHOLENESS, UNITY in design. 2. ILLUSION The first and foremost decision on 2D design. --Keep it FLAT or create 3D ILLUSION (depth of field, spatial depth)--or you can combine them. In Visual Perception: Smaller things are , the farther away they appear to be. The larger things are, the closer as they appear to be. --the size and scale of shapes or objects play an important role in creating the illusion of spatial depth. -the size of one shape or object in relation to another, what we call SCALE, can make elements appear to project forward to recede on the page. -Overlapping objects or shape can also increase the illusion of spatial depth. One shape appears to be in front of the other. Ex> Draw a CUBE at the bottom corner of the page. Then draw a vertical line behind it. The cube will appear to project forward off the surface defined by the vertical line. A cube is a volumetric shape. and the VOLUME (which is a 3D effect) on a 2D surface can be defined as the illusion of a FORM with mass or weight. What is PICTURE PLANE?? -you begin a design on a blank, flat surface--that surface is the picture plane. -as soon as you start marking on a surface, picture plane starts to have Illusion of spatial depth. Perspective (linear perspective) -Perspective is based upon the idea that diagonals moving toward a point on the horizon, called the vanishing point, will imitate the recession of space into the distance and create the illusion of spatial depth. Use of shadow?? TROMPE-L'OEIL--use of shadows and overlapping shapes can create impressive illusions. III. Using Frames: What is FRAME? (example. www.usc.edu/dept/finearts) -two or more independent HTML pages integrated into one HTML page. Pros and Cons. Pros: -efficiency on updating (links, contents) -fixed navigation -special effects Cons: -can make pages so confusing (when badly designed) -printing problems. (only IE5 or later on windows let you print entire frameset on a page. Other browsers can only print one frame inside the frameset) -Bookmarking Problems--(ex. www.usc.edu/dept/finearts) -apperance--adding rows and columns to such a small graphic space. -misleading to audiences when contents of external links shown within the frameset. (news section) Dreamweaver hands on Training. (H.O.T.) Chapter 9.--HW -----using appleshare to copy files from instructor's machine---- apple menu-chooser-appleshare-art5teacher-log in as guest. (no password) hold down option key while you drag the files/folders to your student folder. copy the folder "Lab6_Frame_Isoyama" -Define site as "LAB6_Frame_LASTNAME" -creating a new frameset and save. -using Frame window (selecting the frame to work on) -modify the frameset property. -modify left frame. -modify right frame -naming each frame on frame window. -TARGET _blank: new browser window, _parent: when you have a frameset inside another frameset--not recommended _self: default setting; show link in current frame. _top: get out from the frameset--i.e. back to top page. -using frame property window. -creating the seamless background between the frames. (frameset2.html) -Using object palette to insert frames(options on object palette) meaning of white area and blue area; White: defined by pixels (good for men), Blue: relative to the browser window. SAVE ALL -using frame property window. meaning of white area and blue area; White: defined by pixels (good for men), Blue: relative to the browser window. *SAVE ALL -creating the seamless background between the frames. (frameset2.html) Back to Top
Week 8	03/04/04 Annoucement: Sign in when you use the open lab Quiz 3 on WED Individual Project I due MON (03/11/02) I. More on forms target="_blank": new window target="_self": default target="_top": get out fo the frameset target="_parent": get out fo the frameset target="_leftframe" target="_mainframe" In order to specify which frame the link appear, you have to work on the frameset II. LAB WORK: Individual Project I Individual Project I "Abstract Visual Narrative" -Minimum of 4 pages of HTML and Images -Due Mar 11 (Mon.) -Only visuals (images, lines, shapes) carry the narrative. -Text(words and sentences) is only allowed to title the piece. (go to page property--title) -Alphabet and letters can be used only as visual elements. -Consider this project as a stand alone, self-contaning Fine Art Piece on the Web. -You are going to include this piece as a part of final project. KEY ISSUES TO ATTACK: 1. Theme: (feeling: happy, sad, etc...) -i.e. Social/Political Commentary ? -"ABSTRACT" means what? -Power of the colors, or the monotone -Power of the simple shapes and lines (Go back to the Graphic Desing Lecture Note) 2. The conventions about ICONS and web imagery. (i.e. shopping cart icon, E-mail Icon, arrows to go back and forth) 3. Think carefully on how to navigate audience through the pages. (arrows or buttons?, imagemap?, rollover? how to do it w/o TEXT?) 3/06/02 Today's website:Free clipart: http://www.clipart.co.uk/index.shtml Annoucement: -Midterm Exam Next week: Openbook, Opennotebook, BUT you cannot look at the printout of my lecture note from my website 1. written 2. practical what to review: Photoshop: -how to make LOGO -save for web (optimizing images, GIF, JPG) Dreamweaver -how to apply colors using HEX code -table, form, frame -modify page properties MAKE SURE TO REVIEW QUIZZES!! I. Graphic Design Lecture 4: Applying theories to WEB DESIGN. Screen Size, Sequential Navigation are the two unique design elements. 1. Major Elements: -SPLASH Graphics: The visual identity of your site. (examples from the last semester) -Home Page: the first screen the visitor usually see. It is often preceded by the SPLASH GRAPHICS (animation or still). It gives a central navigation system, contact information, establish the look and feel of the site. -Navigational System: Streamlined navigational system with repetitive visual layout. (design a method for leading the viewer through the site) VISITORS are impatient! consider the downloading time. -Core pages and subsequent linked pages. Core pages are mini home pages. (Top page of each menu) Internal links and external links are to be clearly and visually differentiated. -Contact information and feedback page. 2. Design Considerations. -Web technology may be changing rapidly, but graphic design principles are here to stay! -The main challenge is INTERACTIVITY. (you need to tell viewers where they are in your website.) -VISUAL HIERARCHY (focal points and accents) -LAYOUT: work within the limited space (screen size and resolution), Fight against the different "defaults" of computers and browsers to make it consistent. -COLOR: web safe colors or not?? -STYLE: mood, governing theme, theme color. 3. Story Boarding/Flow chart Example on White Board 3. Story Boarding/Flow chart Example on White Board --Quiz 3-- II. Templates and Library on Dreamweaver. From Dreamweaver Hand On Training, CH17. III. LAB: work on Individual Project I** Individual Project I "Abstract Visual Narrative" -Minimum of 4 pages of HTML and Images -Due Mar 11 (Mon.) -Only visuals (images, lines, shapes, colors) carry the narrative. -Text(words and sentences) is only allowed to title the piece. (go to page property--title) -Alphabet and letters can be used only as visual elements. -Consider this project as a stand alone, self-contaning Fine Art Piece on the Web. -You are going to include this piece as a part of final project. Back to Top
Week 9	3/11/02 Announcement: Final Project Proposal:Due Mar 18 (M) -two pages. -Final Project (minimum of 8 pages of website) -One page: Story Board/Flow Chart/Diagram of your site. -One Page description of Main Topic(s), Target Audience of your site, and the Navigational System. I. Individual Project I due: Critique --save your project in a zip disc and bring it to instructor's station!! (do not include the files, such as PSD files, that are not used on your website) Presentation: -what is the narrative you are trying to convey? (and is it clear or not? why?) -technical difficulties you faced? -ask for feedback II. Course Evaluation III. Review for the Midterm Exam Openbook, Opennotebook, BUT you cannot look at the printout of my lecture note from my website 1. Written -MAKE SURE TO REVIEW QUIZZES and LECTURE NOTES!! -basic HTML tags -Hexadecimal Code: R: 16x16=256 G: 16x16=256 B: 16x16=256 "#33DF00" 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F 2. Practical what to review: Photoshop: -how to make LOGO -save for web (optimizing images, GIF, JPG) Dreamweaver -how to apply colors using HEX code -table, form, frame -modify page properties (review how to change link colors) IV. Photoshop/ImageReady. (NEXT WEEK) 1. Creating texture for background. (load texture.atn on Photoshop) 2. Using the Style Palette. (with custom shape tool) 3. Slicing the Image. les5-04a.psd 4. Web photo gallery. /les5-05/ 5. Making Roll Over images. --modify on Dreamweaver. try5-04.psd les6-02.psd 6. Making a GIF Animation. 7. Liquify. figure: les6-01a.psd, 8. Warp text: les6-02b.psd 3/13/02 Midterm Exam and Individual Meeting. Back to Top
Week 10	3/18/02 Today's website: http://www.tripod.com Free webhosting provided by Lycos I. Announcement -Project I is up on my website! (Project II--Fake Information Pages-- due Apr. 10th (W) -Miderm Exam returned and review -Midterm Grade will be given at the end of the class -Final Project requirements. ______________ FINAL PROJECT: Minimum of 8 pages of WEBSITE. 1. Website a. Statement Page (MicrosoftWord based, Clean-up HTML on Dreamweaver): what your site is about. -Includes the description of each content. b. Proposed Project c. Splash Animation: Flash Animation for welcome graphics. 2. Description/storyboard (one page) 3. Proposal (due WED, 3/20/02) 2 pages: one page(description--what is the topic, what are the contents, target audience), and one page diagram _____________________ II. Photoshop/Imageready. 1. Creating texture for background. (load texture.atn on Photoshop) -do it at your home. ACTIONS (on ACTION PALETTE)-LOAD ACTIONS-FIND "TEXTURE" FOLDER and load texture.atn These are the preset ACTIONS to create real looking texture. 2. Slicing the Image. (-using sample file provided: index_test.psd) -ex. www.tomoisoyama.com 3. Making Roll Over images. (-using sample file provided)--modify on Dreamweaver. 4. Web photo gallery. /les5-05/ 5. Making a GIF Animation. Liquify.--figure: les6-02a.psd, warp text: les6-02b.psd Back to Top 3/20/02 Annoucement: -Midterm Grade will be given. -Final Project Proposal Due today -Individual Project II (Fake Information Pages)--due Apr.10. Fake person/identity/alien, fake planet, fake zoo, fake online shopping, fake company, fake date/mathing service, fake history(of family, town, city, company, etc) -top/menu page has to be index.html, and include disclaimer saying it is a class project, and a part (or all) of the information on this site is not true, but fake (lie). -Today's website (about the color) www.lynda.com -->Web>Inspiration>color http://www.colormatters.com/colortheory.html http://www.valcasey.com/webdesign/color.html I. Specifying Style Dynamically: Cascading Style Sheet 1. What is CSS?? -current version is CSS 2.0 (it is an add-on to HTML) -compatiblility: Netscape 4.0 or later, IE 4.5 o later. 2. Cascading Style Sheet on Dreamweaver: -Copy the folder called "publicart_CSS" using Appleshare. -How do we change the link colors? (page property OR CSS?) -Redefine HTML Tags:Redefine BODY tag. <style type="text/css"> <!-- body {font-family:"Verdana","Arial","Helvetica","sans-serif"} --> </style> -Creating Custom Style (Redefined Class overwrites the redefined HTML tags.) -Using CSS Selector -for multiple tags(body/table)--insert comma inbetween the tag names on HTML source. -for LINKS A:visited{text-decoratiron:none} A:link{text-decoration:none} A:hover{text-decoration:underline} -Linking to external style sheet -Export CSS styles. -Link to CSS from the documents. -Convert to CSS to HTML for older browsers . FILE-CONVERT-3.0 Browser compatible. II. Introduction to Macromedia Flash http://www.flashkit.com Three applicaitons in ONE: Vector graphics, Vector animaiton, HTML authoring (can also import pixel based images, sound, movie) 1. Knowing the work area. 2. Drawing Tools. -Pencil, Pen, Paint Bucket (work on fills), Ink Bottle (work on the edge of shpages), Brush (create Shapes, not lines--ink bottle work on the edges. graduation shapes that look like a line can be made.) -Oval and rectagular tool -Fill color/No fill color -Controlling the Graduation select paintbucket to modify the graduation. --3 handles explained. -Adding and subdividing objects. (line and shape) -grouping objects (modify-group) HW for SPRING BREAK: Read and Compelete the Exercises 1. CSS--Ch.11 on Dreamweaver 4 HOT 2. DHTML--CH-16 on Dreamweaver 4 HOT (Drag Layer, Timeline animation, Go/Stop/Reset Links) III. Lab Assignment 7 2 pages One page--sample welcome graphics/sample menu page with SLICES, ROLLOVER made on Photoshop/ImageReady. AND a link ot the second page. 2nd page--CSS applied to text and link style (font name, color, size, and link styles), and a gif animation (create your own using ImageReady) Back to Top
	SPRING BREAK (Mar. 25-31)
Week 11	4/01/02 (MONDAY) Today's website: Festival of Lying: http://www.grizedale.org/lying/--what does it mean to LIE? Thebot: http://thebot.org/--award winning "conceptual art" on www. I. Annoucement: -Quiz 4 will be next week. -Last day to drop is next Friday (April 12)!! -Individual Project II (Fake Information Pages) due April 10 (W). fake persoon/identity/alien, fake animals, fake online shopping, fake company, fake date/mathing service, fake history(of family, town, city, company, etc) -4 pages minimum. -must use CSS -Top page must be named as "index.html" -Top page must include "disclaimer" (i.e. "this website is created as a part of the web design class, ART129 offered in El Camion College, Spring 2002 semester. Part or all of the information presented in this website is not true, but fake...." -Final Project Proposal returned.) II. Dreamweaver: Dynamic HTML, Timeline Animation, Behavior and Simple JavaScript REVIEW Ch.15 on Dreamweave 4 HOT 1. Using Timeline 2. Behavior: Dragging Layer 3. Behavior: using status bar. (WED) 4. Behavior: Opening new browser window using JavaScript. (WED) the another way to do this is <Target="_blank"> III. Lab Assignment 7 -2 pages One page--sample welcome graphics/sample menu page with SLICES, ROLLOVER made on Photoshop/ImageReady. AND a link to the second page. 2nd page--CSS applied to text(font name, font size) and link style, and a gif animation (create your own using ImageReady) IV. Lab Assignment 8 -WORK ON Individual Project II. Back to Top 4/03/02 Today's websites http://www.flashkit.com http://www.flashplanet.com FROM ADOBE http://studio.adobe.com/expertcenter/photoshop/download.html animated gifs... http://www.animfactory.com/ Annoucement: -I have a show coming up (http://www.tomoisoyama.com/Comfort_Control) -Quiz 4 Next Week -Fine Arts Digital Arts Open House 4/26/02(F)--interested in presenting your work?? -Individual Project II (Fake Information Pages) due April 10 (W). fake persoon/identity/alien, fake animals, fake online shopping, fake company, fake date/mathing service, fake history(of family, town, city, company, etc) -4 pages minimum. -must use CSS -Top page must be named as "index.html" -Top page must include a link to "disclaimer" (i.e. "this website is created as a part of the web design class, ART129 offered in El Camion College, Spring 2002 semester. Part or all of the information presented in this website is not true, but fake...." II. Dreamweaver: Behavior and Simple JavaScript** (Dreamweaver HOT: Ch.14) 1. Detecting the browsers and leading to alternative pages. (do it at your home:) 2. Set text on status bar. (onMouseOver/onMouseOut) 3. Pop-up messages: (onLoad, onclick) 4. Opening new browser window using JavaScript. the another way to do this is <Target="_BLANK"> 5. Using Extention Manager: do it at your home. III. Macromedia Flash: Review of Basic Tools: -Transform, rotate -Editting the gradient! (paint bucket tool has to be active to edit the gradient) 1. Animaition Basics:--creating Alien Flying -Animation Basics: adding frame by frame to create animation. Jitter animation, Figure animation(each layer has each body part) -Understanding Keyframe and Blank Key Frame. -Shape Tween. What shape tween can do: Tween the shape of the object, color of an object, position of an object, the text that has been broken apart, and gradients. Cannot do: Tween grouped object, symbols, non-broken-apart text. -Adding shape hint. -Motion Tween. symbol naming conventions: (just like file and directory naming for HTML) -No Spaces -No Special Characters @#$%^&(()({[ -No forward slashes//// -Must begin with a letter -No dots "button1" -Captalization and descriptive name should be used instead of 'Symbol112'. IV. Lab Assignment 7 -2 pages One page--sample welcome graphics/sample menu page with SLICES, ROLLOVER made on Photoshop/ImageReady. AND a link to the second page. 2nd page--CSS applied to text(font name, font size) and link style, and a gif animation (create your own using ImageReady) V. Lab Assignment 8** -WORK ON Individual Project II. Back to Top
Week 12	04/08/02 Schedule Change: Individual Projects II Due: Next MON, April 15th. Individual Project III: Flash Animation will due at the same time as the Final Projects: Monday, May 20th. (Flash Animation has to be a part of your final project) Quiz 4 today -Fine Arts Digital Arts Open House 4/26/02(F)--interested in presenting your work?? I. Today's website* Example of web art: Art in Motion: student competition http://www.usc.edu/aim/ (One of the good ones from AIM: http://www.nahcnivek.com/) Amazing JavaScript--Clock that moves with your mouse: http://pweb.netcom.com/~rickydik/clock2.htm Flash Games: http://www.ferryhalim.com II. LAB WORK -Lab Assignment 7 2 pages One page--sample welcome graphics/sample menu page with SLICES, ROLLOVER made on Photoshop/ImageReady. AND a link to the second page. 2nd page--CSS applied to text(font name, font size) and link style, and a gif animation (create your own using ImageReady) -Lab Assignment 8 Work on Individual Project II. fake persoon/identity/alien, fake animals, fake online shopping, fake company, fake date/mathing service, fake history(of family, town, city, company, etc) -4 pages minimum. -must use CSS -Top page must be named as "index.html" -Top page must include "disclaimer" (i.e. "this website is created as a part of the web design class, ART129 offered in El Camion College, Spring 2002 semester. Part or all of the information presented in this website is not true, but fake...." Back to Top 04/10/02 Schedule Change: Individual Projects II Due: Next MON, April 15th. Individual Project III: Flash Animation will due at the same time as the Final Projects: Monday, May 20th. (Flash Animation has to be a part of your final project) -Fine Arts Digital Arts Open House 4/26/02(F)--interested in presenting your work?? I. Today's website* Exmaple of Flash Animation: http://games.sohu.com/fightgame/fight3.swf http://www.lo9ic.com/ http://www.usc.edu/dept/finearts/greetingcard.html II. Macromedia Flash 1. Shape tween What shape tween can do: Tween the shape of the object, color of an object, position of an object, the text that has been broken apart, and -tween using eraser to make the shape tween natural (have to be between fill color to fill color) -Break apart the text -Using Shape-hint *NEXT MONDAY: Animate gradients. (MON after the critique) Cannot do: Tween grouped object, symbols, non-broken-apart text. 2. Creating Symbols and using library* symbol naming conventions: (just like file and directory naming for HTML) -No Spaces -No Special Characters @#$%^&(()({[ -No forward slashes//// -Must begin with a letter -No dots "button1" -Captalization and descriptive name should be used instead of 'Symbol112'. 3. Motion Tween:* -Only works on Grouped objects and Symbols. a. Motion Tween basics. -Motion tween can animate: position, scale, tint, transparency, rotation and distortion. -Onion Slices. (toggle onion slice visibility) -"Effect Panel" only works with Symbols. (not with Grouped Object) -Editting Multiple Framesb. Orient to Path. (using motion guide)--only works with symbols. --Grab the center point of a symbol (where "+" is) and snap it to the path. --Rotation, Orient to Path. c. Traveling layer mask. d. Controlling Opacity-alpha channel. (only to the symbols) III. LAB WORK Lab Assignment 8 Work on Individual Project II. fake person/identity/alien, fake animals, fake online shopping, fake company, fake date/matching service, fake history(of family, town, city, company, etc) -4 pages minimum. -must use CSS -Top page must be named as "index.html" -Top page must include "disclaimer" (i.e. "this website is created as a part of the web design class, ART129 offered in El Camion College, Spring 2002 semester. Part or all of the information presented in this website is not true, but fake...." Back to Top
Week 13	4/15/02 Individual Project II Critique: (click here to view the projects) 4/17/02 Annoucement: Quiz 5 next week Individual Project II is up on my website. I. Today's website: Link to free and not free jpgs: http://www.thebiggerpixel.com II. Macromedia Flash --shape tween review Animate gradients. (MON after the critique) what shape tween cannot do Tween grouped object, symbols, non-broken-apart text. 1. Motion Tween: -Only works on Grouped objects and Symbols.a. Motion Tween basics. -Motion tween can animate: position, scale, tint, transparency, rotation and distortion. -"Effect Panel" only works with Symbols. (not with Grouped Object) -Editting Multiple Framesb. Orient to Path. (using motion guide)--only works with symbols. --Grab the center point of a symbol (where "+" is) and snap it to the path. --Rotation, Orient to Path. c. Traveling layer mask.d. Controlling Opacity-alpha channel. (only to the symbols) 2. Creating Symbols and using library symbol naming conventions: (just like file and directory naming for HTML) -No Spaces -No Special Characters @#$%^&(()({[ -No forward slashes//// -Must begin with a letter -No dots "button1" -Captalization and descriptive name should be used instead of 'Symbol112'. LAB 9:* Work on 10 sec flash animation/Final Project. Back to Top
Week 14	4/22/02 Anouncement: -Quiz 5 next week -Fine Arts Division Open House this Friday! (check the flyer) -Thinking of buying a new computer? THINK TWICE Today's websites: -Example of "Fiction" in digital age--Miwa Yanagi: "My Grandmothers" http://www.yanagimiwa.net/ -Downloading MUSIC (registeration required) http://www.soundshopper.com/ -Free sound editor for MAC: http://www.hitsquad.com/smm/programs/Reason_mac/ I. Individual Project II Critique Continued II. Example of MORE CSS (font size in points, line height in pixels) III. Macromedia Flash: 1. Simple Button and object action: GoToURL 2. Importing BITMAP Images (JPG, GIF, GIF animation, PNG) sound files and picture files will be embedded within a flash file. But NOT the MOVIE files. (.mov, .avi) 3. Using Sound. -Using Sound libarary -importing sound files 4. Publishisng Animation -show bandwidth profiler -movie properties IV. Lab Assignments 9 10Sec flash animation. to be used as the splash animation of your website. --show the work in progress to be checked off from Lab 9. (on WED) 4/24/02 Annoucement: -Fine Arts Division Open House This Friday! (Bring your friends, help the college and the division) Bring one or two AUDIO CD on next Monday!! I. Cool Websites: More LINKS: http://www.digitalartsource.com/ II. FLASH 1. Importing BITMAP images as symbols (apply motion tween, 2. Importing SOUND -Prepare sound files as .AIF or .WAV (no space and no special characters) -Using iMovie, import form Audio CD -Use iMovie to add sound effect and edit.(fade in and fade out), you can also use the built-in sound effects that comes with iMovie -export as MOV -Using QuickTime Pro, extract sound and export as AIF or WAV!! Organizing Library Items: Createing new folder inside the library. III. Testing the Movie -show streaming. -using Bandwidth Profiler IV. LAB 9** 10Sec flash animation to be used as the splash animation of your website. --show the work in progress to be checked off from Lab 9 today. Back to Top
Week 15	4/29/02 I. Anoucement: we will look at the student show this WED II. Flash Action Script Basics 1. Object Action (button and links) -stop and play animation -stop play sounds: create a separate .swf file just for the music. Then, loadmovies and unloadmovies in object action. 2. Frame Action -Preloader sequence- (WED) -Simple Drop-Down Menu (optional--WED) III. LAB 9: Work on your 10SEC(minimum) Flash Movie: show the work in progress to be checked off from LAB 9 Requirement: Use both SHAPE TWEEN and MOTION TWEEN Use at least one nested movie (symbol-behavior-"Movieclip") Traveling Layer Mask Guide Layer and orient to Path Sound or Music. Preloader 5/01/02 Anoucement: Changing your final project? --turn in your proposal again. Project 2 grade will be given. Student work from ART OPENHOUSE (some cool movies...) Let's go see the student show! I. Cool Websites: PhoneME: http://phoneme.walkerart.org/ 360 degrees.org: http://360degrees.org/ II. Flash Action Script Basics 1. Preloader sequence 2. Simple Drop-Down Menu and nestting movies (next week) 3. Publishing movie, and insert the movie onto HTML using dreamweaver. IV. LAB 9: Work on your 10SEC(minimum) Flash Movie: show the work in progress to be checked off from LAB 9 Requirement: Use both SHAPE TWEEN and MOTION TWEEN Use at least one nested movie (symbol-behavior-"Movieclip") Traveling Layer Mask Guide Layer and orient to Path Sound or Music. Preloader Back to Top
Week 16	05/06/02 I. Annoucement: II. Cool Home Pages: PhoneME: http://phoneme.walkerart.org/ Los Angeles and the Problem of Urban Historical Knowledge http://cwis.usc.edu/dept/LAS/history/historylab/LAPUHK/index.html CLUI (Center for Landuse Interpretation) http://www.clui.org Discussions/Articles on contemporary issues Rhyzome http://rhizome.org/ Los Angeles Culture .net http://members.labridge.com/lacn/default.html Critical Mass Online: http://www.critmass.com/ ------------------------------- For Final Project Ideas: -Surveillance/Privacy on INTERNET http://www.wired.com/news/privacy/0,1848,43272,00.html How do surveillance cameras impact the internet? Are you on-line without knowing it? Where are there web cams? Should there be signs indicating the presence of web cams? Is a web cam the same as surveillance? http://www.exploited.net/crap/ Performance artists and political activists unite to poke fun at surveillance. Are they right or wrong? What are the political implications of surveillance cameras; of not having them? http://www.jennicam.org "The "JenniCam" is, in essence, a series of cameras located throughout the house I live in with my amour, Dex. These cameras that take images of this house all day long, every day." -Fake Information Example; "Diary": how do we know if it's true? Why do people reveqal their personal life on WEB? Open diary : http://www.opendiary.com/ Diary Project: http://www.diaryproject.com/ --------------------------------------- III. Dreamweaver: "Cleanup HTML" Working with HTML pages generated by Microsoft Word/Excel/Powerpoint On MicrosoftWord: FILE-->>SAVE AS WEB PAGE 1. Cleanup HTML to remove redundant tags. 2. Cleanup HTML to re-format MicrosoftWord generated HTML. MSWord specific special characters that are not always understood by HTML. " ' -- (two dashes) ... (two or three consecutive periods) ; : ? & * ^ ~ IV. Lab Assignment 9-10sec (or longer) Flash animation Work on your Flash Movie: show the work in progress to be checked off from LAB 9 Requirement: Use both SHAPE TWEEN and MOTION TWEEN Use at least one nested movie (symbol-behavior-"Movieclip") Traveling Layer Mask Guide Layer and orient to Path Sound or Music. Preloader Back to Top 5/08/02 Annoucement: Quiz5 nextweek! (JavaScript and Flash) Today's website -got questions? http://www.webdeveloper.com -Webmonkey's resource page http://hotwired.lycos.com/webmonkey/ I. Flash: animated buttons: nested movie on over state II. Introduction to Javascript http://javascript.internet.com http://www.javascript.com/ http://home.netscape.com/eng/mozilla/3.0/handbook/javascript/ Learning it ONLINE: http://www.onlinelearning.net/ (Recommended Preparation: calculus-->>C++-->>JavaScript) What is JavaScript?? It is a scripting language to be used in local web browsers and the web server. 1. JavaScript runs on the viewer's browser. (how about CGI? Common Gateway Interface) Embedded scripts eliminate the lag time involved in contacting the remote server, waiting for a response, and downloading new information. Reduced server load, Improved interactivity, immediate response. 2. JavaScript is case-sensitive!! -No syntax error will be ignored. (means it does not work if you have a spelling error, or leave a unnecessary character or a space) because of the dot syntax, you cannot have any space right after the dot. -concept of "IF" <Script language="javascript"> <!-- //--> </Script> -dot syntax: document.images (instead of document/images) -numbering starts with [0] documents.forms[0].elements[0] documents.forms[0].elements[1] documents.forms[0].elements[2] -dot syntax is also used to refer to an object's method. document.write("text"); this code causes the information in parenthesis to be written to the documents. 3. Basic TAGS: works both in the head content and body content. -object, properties, method object: JavaScript treats each element in the window as a unit called an object. JavaScript gives each object a default name and set of descriptive features based on its location and function. These features include Properties. (image tag would be an object, and the width and height of the image would be properties. ) Each object also has associated methods, which are actions the object can carry out. documenet.write("I am tired") -function: "function" is an user defined set of operations(=methods) <script language="JavaScript"> <!-- function OpenWin1() {win=window.open("licari.html","new","toolbar=no, location=no,directories=no, status=no, menubar=no, scrollbars=yes, resizable=no,width=620,height=600");} // --> </script> Refer to the function from a link inside the body tag <a href="javascript:OpenWin1()"> 4. Simple javascript pages: from HTML Illustrated Complete -alert message window: (H-1.html) -event handlers (H-2.html) (onMouseOver="window.status='we will reply to your inquiry within 24 hours';return true" onMouseOut="window.status='';return true") 5. Copying the source code from: http://www.javascriptsource.com IV. LAB WORK Lab 9: Work on your 10SEC(minimum) Flash Movie: show the work in progress to be checked off from LAB 9 Requirement: Use both SHAPE TWEEN and MOTION TWEEN Use at least one nested movie (symbol-behavior-"Movieclip") Traveling Layer Mask Guide Layer and orient to Path Sound or Music. Preloader Lab 10: Work on your Final Project Back to Top
Week 17	5/13/02 Annoucement: Quiz5 Today Today's website I. Protecting Images on your website -Use Layers -ASP -JavaScript II. Meta Tag: -What is Meta-tag?? (inside the head content) -how do search engines find matching web sites? 1. <title> of your pages 2. Meta keywords and description <HEAD> <TITLE>USC School of Fine Arts, Los Angeles, CA</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <META name="description" content="School of Fine Arts at the University of Southern California located in Los Angeles, California. About us, admissions, programs and departments, news, events, contacts, faculty, student resources, facilities, alumni and support groups."> <META name="keywords" content="art, fine arts, art school, art school los angeles, los angeles, california, painting, drawing, photography, usc, sculpture, desing, computer graphics, film, digital photography, art education, post secondary art education."> </HEAD> -Examples: www.usc.edu/dept/finearts/public_art www.usc.edu/dept/finearts/index.html -Where to go on the internet to find out more http://www.webdeveloper.com/html/html_metatags.html III. Quiz5 IV. LAB WORK Lab 9: Work on your 10SEC(minimum) Flash Movie: show the work in progress to be checked off from LAB 9 Requirement: Use both SHAPE TWEEN and MOTION TWEEN Use at least one nested movie (symbol-behavior-"Movieclip") Traveling Layer Mask Guide Layer and orient to Path Sound or Music. Preloader Lab 10: Work on your Final Project
Week 18	Final Exam/Presentation (3:30pm-5:30pm)