Transcript Assignment 3, In class Team Interim Presentations

Group 3: Art Gallery
Monica Almendarez
Content/Project Manager
Willliam Egle
Technology Manager
Christina Pié
Usability/ADA Compliance Manager
Mirjana Vukovic
Design Manager
Team Process



We have been working collaboratively in our
team to maximize our time together.
We meet after class on Wednesdays and
communicate via Blackboard during the week.
We’ve set a schedule and posted it on
Blackboard to make sure that we are staying
on target.
Content Goals



Provide amateur artists
with an electronic
portfolio.
Provide information
about the artist – contact
information and artist’s
statement.
Create a usable, image
based site with
appropriate content.
Target Audience




Art Aficionados
Mature Audience – contemplative and open to
new ideas
Visual Learners – are more interested in
images than text
Media Savvy
What’s Left for Content?




We have a long way to go, but have wisely
chosen to use these first weeks for planning
initiatives.
We need to add the artist’s statements and
captions to every picture.
We need to add our ALT tags to images.
We need to create our text-based site.
Web Design – Home Page
Logo
About Us
Contact Us Link to Text Site
Artists Names
Artist 1 Photo
Artist 2 Photo
Artist 3 Photo
Artist 4 Photo
Web Design – Artist Page
Logo
Artist Statement
Contact the Author Link to Text Site
Artists Names
Photos
Thumbnails of Photos
Border
Color is
Unique
To Artist
Graphics and Visual
Representation of Content





Content is mostly images.
Using JPEGs because of image quality.
We plan on using ALT tags for images.
Individual artist galleries will be characterized
by different background colors.
In order to achieve visual continuity, we will use
style sheets for font and other basic visual
components.
What’s Left for Design?



Upload all images and improve look and feel of
galleries.
Create a graphical logo for the site that will
appear on every page.
Make sure that galleries are distinct, yet
harmonize well with the entire design of the
site.
Web Hosting & Publication

We will be hosting the site on the Drexel web
space.
–
Located at
http://www.pages.drexel.edu/~wfe24/termproject/
Programming

Using a combination of frames and tables to
create the galleries.
–
Frames


–
Title bar
Menus and Thumbnail menu
Tables for general formatting within Content frame
Style Sheets

Style sheets to enable global updates without
much difficulty.
–
–
Title and menu use one style sheet
Each gallery has its own style sheet allowing for
individual customization.
Technical Issues re: Images

Photographs in .jpg format
–
–

Allows best color depth
Good compression
Photograph sizing
–
–
Some photos much larger than others
Used WIDTH=“100%” or WIDTH=“95%” attribute of IMG tag


Photos fit within the limited size of a frame without having to
specify a particular pixel size
By only specifying the width (or height) of an image, it is kept in
proportion automatically
What’s Left for Programming?

Update general content
–
–
Photograph captions
Photographer information


–
Background
Contact
Formatting issues

Thumbnails take too long to load
–

Need all photographs over a certain size (100k) copied to a
smaller format for use in thumbnails.
Different browsers display the title bar differently
Usability

Background
–

Text
–

Consider placement, font size, color. Is text easy to read?
Links
–
–

Keep background simple; provide contrast with images, text, and link
colors.
Are links clearly marked?
Include matching text tags for image links.
General design
–
–
–
Is there consistent display in a variety of browsers?
Do pages download quickly?
Does entry/main page fit 640x460 pixels standard browser window?
Usability Issues re: Images

Graphics
–
–
–
Size of file
Ease of loading
ALT tags for most images
Navigation

Navigation
–
–
–
–
–
–
Include standard navigation menu
Clear, simple, easy to use and understand
Avoid scrolling when possible
Provide useful, descriptive page titles
Provide navigation back to main sections
Include index or site map
Universal Design Principles
Consider the needs of people
 with disabilities
 who are unable to use a mouse and rely on
the keyboard for internet use
 who are older
 using older hardware and software
 with language barriers
ADA Compliance



Our site is mainly images, and therefore will
not be very accessible to the sight-impaired.
We plan to add ALT tags to all of the images.
We will consider making an all-text alternative
site for people who use speech output systems
that read aloud the text on the screen.
Include descriptive captions.
Accessibility Testing




Consult W3C Web Accessibility Initiative (WAI)
and W3C Web Content Accessibility
Guidelines.
Test site using a number of web browsers.
Consider how site displays with different
monitor sizes and screen resolutions.
Can site’s features be accessed with keyboard
only?
Accessibility Testing and Validation

Test for usability using software such as
Wave 3.0
A-Prompt

Check code using
W3C’s HTML validator


Conduct user testing by asking people unfamiliar with
the site to use the site and make suggestions.
Add Content Rating
What’s Left for Usability?



Include Contact information and last updated
information on the main page.
Consider adding a Search engine.
Printing capability
–
Provide print version of page if page will not print as
shown in browser window.
Questions? Comments?