Wednesday, October 29, 2008

Exam Prep Suggestions

Some Tips:

• 198.96.86.36 is the ISP number we are currently using.
• The web site will have three pages.
• All web page graphics will be created in Photoshop layers.
• The slices will need to be saved into a folder called images inside the folder called MIDTERMEXAM
• The MIDTERMEXAM folder resides inside the Sites folder.
• Create a link from the current index file on your web site to the index file located inside the MIDTERMEXAM folder. HINT: You will need to download from the Remote site the current index file (assuming you have one there already) and add a Flash button to link to the MIDTERMEXAM index file.
• READ THE WHOLE EXAM BEFORE BEGINNING.
• sketch out the navigational flow
• Yes, there is a drop down menu on the exam.
• UPLOAD OFTEN. Upload after you create each web page, and test it.
• What do I do first? SUGGESTION: 1. MIDTERMEXAM index page, 2. link from Remote index page to theMIDTERMEXAM index page, 3. main menu 4. drop down menu 5. links between pages 6. meta tags.
• If you find that the Photoshop layer setup is foreign to you, then create your own layers to suit your design process.
• BE SURE TO INCLUDE YOUR PHOTOSHOP FILE on the Remote Site.
• HAND IN THE EXAM SHEET BEFORE LEAVING THE CLASS.
• Practice, Practice, Practice... you have 120 minutes to complete the exam.

Wednesday, October 22, 2008

Revisit: How to Use the Timeline in a drop down menu

The tutorial on the drop down menu Timeline begins at 1:04 in the following Week #5 Video.
Video content includes the following:
• Insert an APDiv 2
• Add the graphics into the APDiv
• Resize the APDiv
• Drag the APDiv (from the APDiv handle) into the Timeline
• To shorten the time of the show, slide the right keyframe from frame 15 to frame 5
• Assign a Show-Hide Elements Behavior in the "B" Behavior channel of the Timeline to hide the APDiv on frame 5
• Assign Behaviors to the trigger graphic...

Tuesday, October 21, 2008

Question on Image mapping

You will find image mapping at the 3:45 mark in the video, as covered in week 3 of classes.

What is covered on the Mid-Term Exam?

The mid-term exam will examine only the items we covered in classes over the past seven weeks.
What follows is a list of what was covered in class:

• meta tags (Keywords, Description)
• page wrapper using an APDiv & CSS
• page properties such as title, background, margins
• Creating a SIte Folder and Site Definition setup in Dreamweaver
• Setting up layers in Photoshop for up and over states
• Creating a menu in Photoshop and saving for WEB HTML and images
• Creating slices with guides in Photoshop
• hyperlinking between pages (index.html to menu.html)
• anchors and hyperlinks
• Flash text and hyperlinks
• Flash buttons and hyperlinks
• Email link (mailto)
• Image mapping
• BREAK character (Soft Return)
• Layout with multiple APDivs (absolute positioning)
• Uploading files and folders to Remote Site
• Downloading files and folder from Remote SIte
• File and Folder creation from within the Dreamweaver File Panel
• Using the Timeline and Timeline behaviors in Dreamweaver
• Using the Nav Bar behavior in Dreamweaver
• Setting up layers in Photoshop with trigger up and over, and menu up and over images
• Creating a drop down menu using images from Photoshop, and a Timeline in Dreamweaver
• Writing a javascript function to hide a drop down menu onload

The mid-term exam is designed to test your knowledge and ability to create a web site using the tools and techniques covered during the first seven weeks of class, within a time limit of 100 minutes.

The mid-term exam is an open book exam. You may have notes that you created to assist you.

Monday, October 20, 2008

WACOM Cintiq at Henry's Photographic Show

Building a Web Site using Photoshop

Create all the pages in one Photoshop file, and use grouped layers to hold each page.
For each web page, turn on and off the appropriate groups and layers and SAVE FOR WEB (HTML and images for up state, and images only for over state).

Open the html files inside your Dreamweaver Site and add the NAV BAR behaviors and drop down menu scripts.

For example, a typical portfolio site might include the following pages:
index.html ( Flash animation)
menu.html (hyperlinked menu to all the pages)
contact.html (name, address, email)
portfolio.html (illustrations, photo gallery, design sketches)
videos.html (process videos, tutorials, animations)
references.html ( at least three references, academic and industry)
resume.html (up-to-date curriculum vitae)

Wednesday, October 15, 2008

Exam Preparation Exercise

Here's today's challenge:
Create a Web Site in 100 minutes, with the following specifications:
1) (10 marks) Web site will have four pages ( index page, menu page, strengths page, contact page). Each page must include a page wrapper with a width of 760 pixels.
2) (10 marks) Menu is created in Photoshop with the file saved as menu.psd. Menu page will have two links (Strengths, Contact) each with a NavBar Behavior with over and up state. The strengths link will link to the strengths.html page. The contact link will link to the contact.html page.
3) (10 marks) Strengths page will have a drop down menu with three strengths and a link to a description of each. TIP: You can use anchors for the links to the descriptions on this page. The drop down menu is created in Photoshop and must be saved as dropdown.psd.
4) (10 marks) Contact Page will have a picture of self, a working email link, and name information.
5) (10 marks) Each page will have an image map linking back to menu.html.
6) (10 marks) All pages will have meta tags (title with author name, 10 keywords, 1 sentence description of page)
7) (10 marks) Index page will have a Flash Header text and a Flash button hyperlinking to menu.html.
8) (10 marks) The local EXAM Site is set up with the following file names and folders: index.html, menu.html, strengths.html, contact.html, images folder, scripts folder, headertxt.swf, button.swf. All images must be inside the images folder. A folder called PHOTOSHOP will hold the two photoshop files(menu.psd, dropdown.psd)
9) (10 marks) Files are posted to your account (Remote Site) in a folder called EXAM. Place a new link from your Remote Site Account main menu to the index file in the EXAM folder. You can use an image map for this.
10) (10 marks) Everything works perfectly AND all specifications met.

Friday, October 10, 2008

Converting mov to flv & Inserting into HTML page

Some multimedia content for ya!!
Creating a flv (Flash Video Format) from a Quicktime mov file using Flash Video Encoder.
Then, inserting a flv into Dreamweaver and adding a Skin, with auto play and rewind settings.


Flash Video

Flash Video referred to a proprietary file format, having the extension FLV.
The most recent public release of Flash Player supports H.264 video and HE-AAC audio.
Flash Video content may also be embedded within SWF files.
Notable users of the Flash Video format include YouTube, Google Video, Yahoo! Video, Reuters.com, and many other news providers.

Web Site Portfolio Project Specifications

PROJECT DUE DATE: Week 14
CLASS PRESENTATION DATE : Week 15

THEME: “The Medium is the Massage.”

The purpose of this project is to create a Web Site Portfolio that reflects the identity of Me, the Web Designer.

The Web Site Portfolio must include all original work, specifically including the following content and technical specifications:
1) A picture of me, the Web Designer;
2) A description of my identity (five) strengths – in relationship to me as a designer;
3) Working links to at least five Web sites that relate directly to my identity;
4) A Site Map, including working hyperlinks to all page references;
5) At least five examples of my own original designs, with description of techniques, design features, process;
6) A Mailto: linking to the email address of Me, the Web designer;
7) Meta tags for each page – Description and Keywords, and a proper title tag;
8) A custom designed internal or external CSS, including a page wrapper for each page;
9) Use of image maps;
10) Use of a table;
11) Use of rollovers (including Nav Bar Behavior);
12) Drop down menu (using Timeline technique);
13) Evaluations: by self & by another associate;
14) Contact and Project information from the designer: full name, email address, hours worked on the project, date due.
15) All resource files (Photoshop [.psd], Illustrator [.ai], Flash [.fla] text, etc…), and the final Web Site must be submitted on a CD-R, or DVD-R. The Site must be fully functional on the CD-R, DVD-R. Suggestion: Use two folders: one labeled “Working Files” and the other named “Final Site”.

The Web Site will be evaluated according to the following: evidence of creativity, aesthetics, and web design principles, functionality, ease-of-use, and the meeting of all content and technical specifications.

Important Notes:
1) Projects are evaluated in class on the due date and must be submitted on CD-R, DVD-R (readable on both MAC & PC).
2) All submissions must be received on the due date.
3) All CD-R, DVD-R submissions (to be accepted) must be labeled with full name, Email address, and date of submission.

Project Tip#1: Menu Sections

When building your menu for your Web Site Portfolio ... Common sections include:

Portfolio: This is the showcase of your work.
About: This can be a bio overview.
Contact: Be sure to make it easy for people to find your contact info.
The Process: Talk about your design process, goals and how you deal with clients.
Case Studies: In a case study section, you can focus on a few clients or projects and discuss the design process. This is effective for showcasing branding jobs or clients for whom you have done several related projects.
Clients: A list of clients, often divided by industry or job type.
Press: Show publications you have appeared in and any awards or honors.
Resume: Depending on the goal of the site, including a standard format resume can be helpful to prospective employers or clients.

http://graphicdesign.about.com/od/buildingaportfolio/ss/web_portfolio.htm

Thursday, October 9, 2008

Saturday, October 4, 2008

Week 09: Mid-Term Exam

Here is a sample session for the mid term exam.

Prepare a Web Site with a Drop Down Menu with five items.
Set up a Sites Folder
Set up a SIte Definition
Test the connection.
Create a Web Site with the following specifications:
Create a menu page with a drop down menu.
Each item in the menu will link to a web page.
Each web page will link back to the menu page using an image map.
All pages will have meta tags: a title, keywords and description.
All graphics will go into an images folder at the root level of the web site.
A Spash (index.html) page will link to the main menu.
Include a picture of yourself.
Include your five strengths and a description of each strength.
All files will be posted to a Remote SIte.
Save the menu.psd and all html files to the root folder of the web site

TIME YOURSELF: Try and get all of this finished in 120 minutes.
ALSO: Be sure to take time to back up the work on an external USB or local HARD DRIVE.

Week 08: Mid-Semester Break

Relax...
Practice 20 minutes per day Photoshop and Dreamweaver....

AND

Start the major project.
• Start sketching the interface now!
• Start sketching the navigation map now!
• Start gathering and scanning design work into digital file formats.
• Start a check list of what needs to be done (technical, artistic)
• Plan to attend a help session ( Monday's 11-12, Room 139) to solve any technical design issues.

Week 07: Review For Mid-Term Exam

Please review the following for the Week 09: Mid-Term Exam:
• Site Organization
• Site Definition in Dreamweaver
• How to create a page wrapper using apDiv & CSS
• Inserting meta tags (title, description, keywords)
• Using Photoshop to create slices
• Using the Slice From Guides technique in Photoshop
• Naming files and images correctly in Photoshop Save for Web
• Saving for Web HTML & images - All Slices, Images Only - Selected Slices
• Saving for Web a Drop Down Menu from Photoshop
• Wrapping the table from Photoshop
• Applying Set Nav Bar Behavior in Dreamweaver
• Applying Timeline Behaviors to a drop down menu
• Adding more layers and placing them inside the Page wrapper.
• Creating a trigger and drop down layer for a drop down menu
• Using the Timeline to hide a layer, applying a Behavior in the Timeline
• Connecting and uploading files to the Remote Site
• Creating a navigational structure (index.html, menu.html, and sub-folder pages)
• Using Image Maps
• Create a splash page (index.html) that links to the menu.html.
• Create Flash Text using Dreamweaver
• Create a Flash Button using Dreaamweaver

Practice creating a Site with a drop down menu. Link to two pages using the drop down menu.
index.html
menu.html
page1.html
page2.html
images folder

Week 06: Moving Files AND Flash Text & Buttons

Today we will work on the following:
1) File and Folder management on Remote and Local file areas
2) Flash Text
3) Flash Buttons
4) hypertext & CSS a:link, a:hover, a:visited, a:active
5) anchors (local)
6) anchors (non-local)
7) mailto:

the lesson for week 06:


Files can be dragged directly from the Remote Site to the SItes Folder or to another folder in the Local Files area.
Folders can be created on both the Remote Site and Local Files areas to hold files and folders.

See tutorial below:


Creating Flash Text and Flash Buttons using Dreamweaver.
Both Flash Text and Flash Buttons can be used to hyperlink to another web page.

imagineNATIVE Film + Media Arts Festival, October 15 - 19

Volunteer for imagineNATIVE!
A volunteer orientation session will be held Sunday, October 5 from 4pm-5.30pm at the Al Green Theatre at 750 Spadina Avenue.

The imagineNATIVE Film + Media Arts Festival, October 15 - 19, is an international festival that celebrates the latest works by Indigenous peoples at the forefront of innovation in film, video, radio, and new media. The screenings, parties, panel discussions, and cultural events attract and connect filmmakers, media artists, programmers, and industry professionals from Canada and around the world.

WE NEED VOLUNTEERS!

As a non-profit charitable organization, we depend on the support of volunteers. As well as being a lot of fun, volunteering can provide a way to gain valuable experience and meet key players in the entertainment industry while helping out a community-oriented organization and supporting Toronto's art scene.

We are seeking enthusiastic volunteers to fill a number of positions before and during the festival, October 15 - 19. Some positions include:

- Guest Relations
- Airport Greeters
- Theatre Ushers / Ticket-Takers
- Workshop Attendants
- Party set-up
- Office Prep (pre-festival)

ImagineNATIVE volunteers are rewarded for their hard work with a Festival Pass, which gives access to festival screenings, special presentations, workshops, and parties.

If you are interested in volunteering please contact: Amy Rouillard, Volunteer Coordinator, web volunteer@imagineNATIVE.org
http://www.imagineNATIVE.org

Thursday, October 2, 2008

IMPORTANT NOTICE: Account Access Problem Solved

For example:
MESSAGE READS: Safari could not open the page http://198.96.86.36:16080/~graf2024_025/Week05/up_trigger.html because the server stopped responding.

SOLUTION: Remove the port number :16080 from the url.
Use: http://198.96.86.36/~graf2024_025/Week05/up_trigger.html.
***** Be sure all the hyperlinks ( NAV BAR links) do not include the port number :16080.

Thanks.
P.E.R.