Web Standards
(From
www.maxdesign.com.au/presentation/checklist.cfm)
The term web standards can mean different things to different people. For some, it is 'table-free
sites', for others it is 'using valid code'. However, web standards are much broader than that. A
site built to web standards should adhere to standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML,
SVG etc) and pursue best practices (valid code, accessible code, semantically correct code, userfriendly URLs etc). In other words, a site built to web standards should ideally be lean, clean,
CSS-based, accessible, usable and search engine friendly.
The main ideas
There are a few main ideas behind the standards movement. They are:
1.
2.
3.
4.
to seperate content from presentation (using xhtml and CSS together)
using semantically correct markup (structuring the content so it makes logical sense)
clean, well-formed, valid (x)html code (structuring markup so it it precise and error-free)
Using a DOM - document object model (to define the type of document you are using)
The Technologies of Web Standards
The technologies that will use most are:
1. xHTML
2. CSS
3. DOM
There are of course other technologies that can be used with webstandards... including javascript at
others. Check out more at http://www.webstandards.org/learn/faq/
Benefits of using Web Standards
1. More logical content (using semantically correct markup)
2. Seperation of content from presentation - update the look of 100,000 pages with one CSS
file
1. Faster and smaller pages
2. Quick updates to design
3. Can work better in group projects... content is taken care of by programmers (often
with database driven content) & designers work on layout seperately
3. Better search engine placement
4. Better accessibilty for people who access site with other things than a visual browser...
screen readers, pdas, cell phones.
5. more.....
The bad
1. a bit more complicated?
For more:
1.
2.
3.
4.
5.
6.
What are web standards and why should I use them? - webstandards.org
Web Standards Non-Technical Primer - maccaws.org
Developing with web Standards - 456bereastreet.com
A Roadmap to Standards - mezzoblue.com
**The 4 Essentials of modern web design - www.sitepoint.com/article/essentials-modern-web-design
Semantics and HTML5 - http://www.alistapart.com/articles/semanticsinhtml5/
xHTML
info from:
456bereastreet.com
XHTML 1.0 is a reformulation of HTML 4 in XML 1.0, and was developed to replace HTML. Note that
there is nothing preventing you from using HTML 4.01 to build modern, structured, and standards
compliant websites.
What is different? Here is a list of the things that are most important to consider when using XHTML
1.0 Strict instead of HTML 4.01 Transitional (or no-name, plain old invalid HTML):
1. Requires a DOM (document object model) and validation - browsers have a tolerence for
invalid HTML code... but not for strict xHTML
2. Always use lower case, and quote all attributes: All element and attribute names must be
in lower case. All attribute values must be quoted.
Incorrect: <A HREF="index.html" CLASS=internal>
Correct: <a href="index.html" class="internal">
3. Close all elements: In HTML, some elements don�t have to be closed. Such elements are
automatically closed when the next element starts. XHTML does not allow that. All elements
must be closed, even those that have no content, like <img>.
4. Attributes can not be minimized: In HTML, certain attributes can be minimized. XHTML
does not allow this.
Incorrect: <input type="checkbox" id="checkbox1" name="checkbox1" checked>
Correct: <input type="checkbox" id="checkbox1" name="checkbox1" checked="checked"
/>
5. Don't use deprecated elements: Some elements and attributes that are allowed in HTML
4.01 Transitional and XHTML 1.0 Transitional are deprecated in XHTML 1.0 Strict (and in
HTML 4.01 Strict). A few examples are <font>, <center>, alink, align, width, height (for some
elements), and background.
For more:
1.
2.
3.
HTML and CSS - www.oreilly.com/catalog/css/chapter/ch01.html
Differences Between XHTML And HTML
1. www.w3schools.com/xhtml/xhtml_html.asp
2. www.w3.org/TR/xhtml1/#diffs
3. www.alistapart.com/articles/xhtml
Separation: The Web Designer's Dilemma - www.alistapart.com/articles/separationdilemma
Semantically Correct Markup
Providing logic to the way that you markup your html...
(From:
brainstormsandraves.com/articles/semantics/structure/)
Good HTML structure is based on logic, order, and using semantically correct markup. If you have a
heading use the heading element, beginning with the H1 element. If you have a paragraph, use a
paragraph element. If you have a list, use a list item element. If you're quoting a few lines, use a
blockquote element. Those elements provide meaning to the content, making them semantically correct,
in addition to being solid HTML structure.
Once your HTML structure is in place with the appropriate markup, add CSS for visual presentation.
Start with good HTML structure and then add the CSS, preferably with an external style sheet, for
the visual presentation that you have in mind.
Read more...
Semantically Correct Markup uses (simple markup):
1.
2.
3.
4.
h1-h6 for headings (h1 is most important, and only one h1 per page or section)
p.... for paragraphs of text
ol, ul & dl for lists... ordered, unordered or definition
divs to seperate divisions (or sections) of content - ie, <div id="header">This is the
Header<div> - NOTE: anything using a ID can only be used ONCE on a page
5. .classes to seperate
It all starts with structuring the html document. Sample code:
// Stacking divisions on top of each other
<body>
<div id="pagecontainer">
<div id="header"> content for header. </div>
<div id="content"> main content. </div>
<div id="footer"> content for footer </div>
</div>
</body>
// You can also nest divisions
<body>
<div id="pagecontainer">
<div id="header"> content for header.
<div id="topnav">navigation</div>
</div>
<div id="contentarea">
<div id="content">
<div id="sidebar">sidebar content</div>
main content
</div>
</div>
<div id="footer">content for footer</div>
</div>
</body>
HTML 5 and the Future of the Web - http://www.smashingmagazine.com/2009/07/16/html5-andthe-future-of-the-web/
For more:
1.
2.
3.
4.
5.
www.thefutureoftheweb.com/blog/writing-semantic-html
www.creativecoding.webforumz.com/articles/semantics.php
www.brainstormsandraves.com/articles/semantics/structure/
www.maxpc.co.uk/opinion/
Great simple intro - www.markboulton.co.uk/journal/
Well-Formed HTML
Well form HTML is a the term used for a validated (correctly structured) xHTML document. It means
that all the tags are properly nested and the DOM is correct. It has nothing to do with whether or not
the markup is semantically correct.
For more:
1.
2.
3.
4.
*Semantics, HTML, XHTML, and Structure - brainstormsandraves.com/
Guide to Structured Use of HTML - cs.tut.fi/~jkorpela/HTML/guide/
An introduction to Structured Text - zope.org/Documentation/Articles/STX
Don't Fake Your Markup: Accessibility Issues for CSS - link here
Validation
Validating your code is an extremely important step, and one that should be done early. It ensures
that your code is clean, valid and will be searched/indexed easily.
For more:
1.
2.
3.
4.
CSS - jigsaw.w3.org/css-validator/
xHTML - validator.w3.org/
HTML Tidy - infohound.net/tidy/
Check list - maxdesign.com.au/presentation/checklist.htm
Creativity
Creativity Workout
Assessing Your Creative Potential from thinksmart.com
1. There isn't any such "thing" as creativity.
2. IT IS IMPOSSIBLE TO MEASURE INDIVIDUAL CREATIVE POTENTIAL. Period.
Exclamation Point!!
3. Everyone has creative potential.
4. Everyone has more creative potential than they will ever use.
5. Everyone can learn to use more of his or her own creative potential.
-----------------------
I. What is Creativity?
Info from: Betsy Freedman, Elizabeth Anne Design.
Webster's defines creativity as a noun, meaning " ...creative ability; artistic or intellectual
inventiveness." And creative is defined as an adjective meaning " ...having the power to create;
pertaining to creation; inventive; productive (of); as, a creative mind, creative power.
II. Who/What is Creative?
We naturally assume artists are creative. However, I think a lot of people mistakenly assume that we
got all the creativity there is! Many people see art and say "that's creativity", but art is actually only
one expression of creativity. Remember our definition... Artistic or Intellectual Inventiveness? Art is
not intrinsically creative. Art is an object of creation from a creative mind who gave their thought/idea
artistic expression.
Human beings are naturally creative. Physically, mentally, emotionally... daily, we are being
inventive and productive whether we are aware of it or not!
Did you know that
At this very moment every cell in your body is reinventing itself?



You will have new stomach cells in a few days.
You will have new skin cells in two weeks.
You will have new olfactory cells (allow you to smell) in a month.
At this very moment your organs are being extremely productive?



Your lungs are exchanging oxygen and CO2 in a few thousandths of a second.
Your heart is extracting oxygen from your blood in seconds.
Your digestive system is working on what you ate here this morning.
III. How You can be more Creative...
To be or not to be that is not the question! You already are creative! The question is how to be more
creative. And, perhaps more specifically, how can you be more creative in promoting your business
in a tough market?
10 Steps for Boosting Creativity
by Jeffrey Baumgartner
1.
Listen to music by Johann Sebastian Bach.
If Bach doesn't make you more creative,
you should probably see your doctor - or
your brain surgeon if you are also troubled
by headaches, hallucinations or strange
urges in the middle of the night.
Johann Sebastian Bach
2.
Brainstorm. If properly carried out, brainstorming can help you not only come up with
sacks full of new ideas, but can help you decide which is best. Click here for more
information on brainstorming.
3.
Always carry a small notebook and a pen or pencil around with you. That way, if you are
struck by an idea, you can quickly note it down. Upon rereading your notes, you may
discover about 90% of your ideas are daft. Don't worry, that's normal. What's important
are the 10% that are brilliant.
4.
If you're stuck for an idea, open a dictionary, randomly select a word and then try to
formulate ideas incorporating this word. You'd be surprised how well this works. The
concept is based on a simple but little known truth: freedom inhibits creativity. There are
nothing like restrictions to get you thinking.
5.
Define your problem. Grab a sheet of paper, electronic notebook, computer or whatever
you use to make notes, and define your problem in detail. You'll probably find ideas
positively spewing out once you've done this.
6.
If you can't think, go for a walk. A change of atmosphere is good for you and gentle
exercise helps shake up the brain cells.
7.
Don't watch TV. Experiments performed by the JPB Creative Laboratory show that
watching TV causes your brain to slowly trickle out your ears and/or nose. It's not pretty,
but it happens.
8.
Don't do drugs. People on drugs think they are creative. To everyone else, they seem like
people on drugs.
9.
Read as much as you can about everything possible. Books exercise your brain, provide
inspiration and fill you with information that allows you to make creative connections
easily.
your brain. Brains, like bodies, need exercise to keep fit. If you don't exercise
10. Exercise
your brain, it will get flabby and useless. Exercise your brain by reading a lot (see above),
talking to clever people and disagreeing with people - arguing can be a terrific way to give
your brain cells a workout. But note, arguing about politics or film directors is good for
you; bickering over who should clean the dishes is not.
Intro to Color Theory
First... let's start with light theory. Now... on to theory - www.colorsontheweb.com
Digital Color
RGB vs CMYK Color Models
1. www.cdman.com/graphics/color/index.html - nice low-level guide.
2. www.cs.utk.edu/~huangj/CS594F03/color.ppt - Excellent powerpoint... in depth for sure.
Color Gamut
1. www.cdman.com/graphics/color/gamut.html
Knowing about color technically doesn't mean you know how to USE color. For that, we turn to color
theory.
----------------------------------------------------------------
Color Theory
1.
2.
3.
4.
Color Theory 101 - Color Theory 101.doc
Color Theory Basics - www.color-wheel-pro.com/color-theory-basics.html
What colors mean - Website Design - Choosing Your Colors Wisely
Websites organized by color - pages.blueidea.com
Picking Colors
Picking colors can be hard... you can use a tool such as:
1. epaperpress.com/monitorcal/ - first... set up your monitor right. A nice guide to monitor
calibration
2. *ColorMatchDK - excellent color scheming
3. Color Schemer - color picking tools
4. www.colorschemer.com/schemes/ - well chosen schemes
5. Adobe's new Kuler - kuler.adobe.com
6. Nice instant eyedropper - instant-eyedropper.com/
Or, it is often best to use colors from nature:
1.
2.
3.
4.
How to Find the Perfect Color - BA0453PerfectColor.pdf
Natural Selections: Colors Found in Nature and Interface Design
Or... upload a photo to automatically generate a color palette
Photographic palettes - 24ways.org/2006/photographic-palettes
*** However... PINK is not dead! - pingmag.jp/2007/01/29/pink-not-dead/
www.flickr.com/photos/tags/colortheory/show/
Now, lets have some fun. The 3D Logic 2 game introduces some color theory.
http://www.arcadeboredom.com/games/563/3d-logic-2.html
WHAT IS A CMS?
The most important thing you want to know is that CMS's are cool and the way of the future for
designers. There are major benefits with them, but also some pit falls.
The short answer - a CMS is a Content Management System.
The long answer - a CMS is a system that seperates the content of a web site (the text, images, and
so on) from the framework of linking pages together and controlling how the pages appear. In most
cases, this is done to make a site easier to maintain than would be the case if it was built
exclusively out of hard-coded html pages.m At least, that is the goal. (From:
www.opensourcecms.com/ )
Do all CMS have the same components/technologies?
No, each CMS has its own merits and strengths.
CMS is just a generic term for a class of applications that allow for sharing of ideas and content
without having a computer science degree and without having to spend a lot of time with the
technical details to present your information.
Each system is different and may contain different components that allow for ease of use in certain
functions such as a built-in forum, a survey or poll, security to certain areas based on user and
group permissions, and customization of the presentation with a simple change in the configuration
rather then low-level coding. (From: www.opensourcecms.com/ )
> Check out a comparison list of them.
Common Goals/Features of a CMS:
1. Content creation - help you create content for a site in a structured and user-friendly
environment
2. Content management - allow you to change, update, delete, and move content. Requires
users such as Administrators
3. Seperation of Content from Presentation - content is stored in a database (a database
can be flat file (rarely) or typically a tabled one)
4. Control of Presentation - using templates and CSS
5. Users and logins - allow certain users to administer website, or only to view certain content.
6. Self-generating menus - as you create content... it makes menu links
7. Content Hierarchy - like the structure of the site
8. Module based - ability to make modules to go on all or only certain pages.
9. Plugins and addons - news modules, blogging, galleries, polls, user management, etc.
10. File Management - upload, and control images and downloadable files
More.......***Use the "CMS Matrix" for comparisons of CMS features.***
Common Types of CMS's
Find CMS's in each category at: www.opensourcecms.com
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Simple online Wysiwyg editors - WysiwygPro, ktml, CuteEditor, etc...
Enterprise
Portals
e-Commerce
Groupware
Forums
Blogs
E-Learning
Image Galleries
Wikis
Some CMS to try out:
Flat-File/lite
1.
2.
3.
4.
5.
6.
(unique and cool) Onefile CMS - http://onefilecms.com/
(site-based) Cushy CMS - http://www.cushycms.com/
Get Simple (I think buggy, but fine for VERY simple sites) - http://get-simple.info/
LightnEasy - http://www.lightneasy.org/
CMSimple (my fav) - www.cmsimple.com
more flat-file ones - http://delicious.com/opensourcer/cms+flat-file
Database Driven CMSs
1.
2.
3.
4.
5.
Website Baker - start.websitebaker2.org/
CMS Made Simple - cmsmadesimple.org/main/features
Joomla - joomla.org
Wordpress - wordpress.org/
***Try out more at www.opensourcecms.com
Stand Alone Servers
Before you can install a CMS, you must have a server that will run it. You could post online, but it is
easy to run on your own pc if you have the right software. Some basics about them are that:
1. Most are WAMP (Windows/apache/mysql/php) or LAMP (Linux/apache/mysql/php)
2. Self-contained web servers
3. Temporarily opens a port and sometimes a temporary drive
http://digitalfire.com/dreamsite/LAMP.html
Benefits:
1. Installation not required (usually). Sometimes just unzip the files and go.
2. It's local... on your machine. No need to ftp or even have internet (unless you want to look up
wordpress help.)
3. Fast and responsive.
4. Transportable (can run off a pc, or USB drive, or Flash memory stick)
Installers:
1.
2.
3.
4.
XXAMP - www.apachefriends.org/en/xampp-windows.html
Easyphp - http://www.easyphp.org/
Server2Go - http://www.server2go-web.de/
DWebPro Stand-Alone Server (PC) - www.dwebpro.com/
PHP Scripts to Test
1. Test php - type in <?php phpinfo (); ?> and save as phpinfo.php
2. See all files! - index0r or encode explorer
Installing a CMS:
1. Requires a webserver... usually php or asp, with a database.
2. or a Stand Alone Server... see above
3. Run the install script supplied or edit the config files. Each CMS is different.
Creating Templates:
Tags are used for each CMS for types of content. Look at the documentation for each CMS. Some
are VERY easy, but some are VERY difficult. You have to learn which tags or code does what. I
suggest that you dig through exisiting templates to learn the functions and code, however, it is
common to find templates that have WAY for code than you really need.
So... how do you learn them. Start off with the most basic bare-bones template you can. Typically
you can create a normal template in html... and switch out the tags needed for the CMS. Quick and
easy! See below...
OneFileCMS CMS
The simpliest of them all... and one of the most efficient IMHO.
http://onefilecms.com/
What a great concept for a simple CMS. You have to use an external WYSIWYG editor (like
Dreamweaver or WysiwygPro, ktml, CuteEditor, etc... ) but it is still great. I like it as an add-on file
editor to ANY website.
More:




CMSimple CMS
WebsiteBaker CMS
Joomla CMS
Wordpress CMS
Why learn 3D
3D is cool. Kids know it, otherwise they wouldn't play so many games. 3D represents "real life" better
than other things, since "real life" is already in 3D.
3D is still one of the fastest growing areas in digital media:
1. The Decline and Resurrection of the 3D Industry www.m2research.com/reports/TheDeclineandResurrectionof3D.pdf
-----------------------------------------------------------------
Uses of 3D
Games, Entertainment




www.3dgamers.com/
www.conitec.net/a4info.htm
thesims.ea.com/index_flash.php
Way cool engine - unity3d.com/gallery/live-demos/tropical-paradise
Medical Imaging






www.nucleusinc.com/medical-animations.php
www.crd.ge.com/esl/cgsp/projects/medical/
www.crd.ge.com/esl/cgsp/projects/video/medical/3dmed.html
www.ablesw.com/3d-doctor/
www.javelin3d.com/
nano scale - customer.alicona.com/
CAD, architectural









www.cadoutpost.com/catalog.html
www.3dcadbrowser.com/
www.austin.cc.tx.us/donn/
Hi Quality - www.conceptvisualization.com/
*Using Blender!! - www.gmg.com.au/articles/visualisation/architecture-a-0001.html
www.cgarchitect.com/upclose/article1_AG.asp
www.plan3d.com/home/gallery.htm
Interactive Flash floor planner - www.floorplanner.com/tryit/
3D version of Floor plan - www.floorplanner.com/3ddemo
Product Design





www.actify.com/v2/index.htm
www.immdesign.com/
www.cult3d.com/ - web-based.
www.xproject.ru/eng/tech/cult3d/
www.anark.com/ - really cool too!
Accident Reconstruction
1. www.c4animation.com/sample.html
Scientific Visualization
1.
2.
3.
4.
Weather maps
Location Maps - earth.google.com/
Data visualization
Astronomy - WorldWind and Partiview
Lets deal with solid geometry.
Constructive Solid Geometry
The simplest solid objects used for the representation are called primitives. Typically they are
the objects of simple shape: cuboids, cylinders, prisms, pyramids, spheres, cones. The set of
allowable primitives is limited by each software package. Some software packages allow CSG
on curved objects while other packages do not.
It is said that an object is constructed from primitives by means of allowable operations, which
are typically Boolean operations on sets: union, intersection and difference.
A primitive can typically be described by a procedure which accepts some number of
parameters; for example, a sphere may be described by the coordinates of its center point, along
with a radius value. These primitives can be combined into compound objects using operations
like these:
Difference
Union Merger of two objects into Subtraction of one object from
one
another
Intersection Portion common to both
objects
Combining these elementary operations, it is possible to build up objects with high complexity
starting from simple ones.
Raster Graphics
Intro to Bitmap Graphics
Bitmap, Raster... whatever
Bitmap or rather (raster) graphics are one of the most basic type of graphics. According to
en.wikipedia.org/wiki/Raster_graphics "A raster-graphics image, digital image, or bitmap, consists of a
data file or of a data structure representing a generally rectangular grid of pixels, or points of color,
viewable via a computer monitor, paper, or other display medium.
A nice pictorial intro is: freerangestock.com
How bitmaps work
First... understand how computers work:
1. Data formats are based on patterns of 0’s and 1’s
2. The smallest unit of binary data is a bit
3. A single bit can contain one of two possible values, either 0 or 1
Bitmap Images
1. Bitmap images are made of pixels (a "picture element")
2. Pixels are "mapped" to a location on a rectangular grid... thus "bitmap"
3. A byte is a sequence of eight bits (00001010)
1. 1 bit can store 2 possible patterns (2 colors)
2. 1 byte (8 bits) can store 28 possible patterns (256 colors)
3. 2 bytes (16 bits) can store 216 possible patterns (65,536 colors)
4. 3 bytes (32 bits) can store lots of possible patterns (16.7+ million colors)
4. Color resolution ranges from 1-bit color (2 colors) to 32-bit color (16.7+ million colors)
LINKS

local.wasp.uwa.edu.au/~pbourke/dataformats/bitmaps/
Image Resolution:
This is one thing that is more misunderstood than anything else...
Resolution = the total number of pixels
Calculating image resolution is easy... it is the number of pixels used to make up the entire image.
It can be described two ways:
1. Pixel dimensions: eg, 1024x768 (Used by the web and digital display)
2. Document Size: eg, Height x Width @ Resolution (number of pixels per unit of
measurement, usually dpi): 2"x4" @ 300dpi (dots per inch) (Used by Print-based
applications)
The rule of thumb is: more pixels = more resolution. It would be logical to think that more
resolution = more quality but this is not always the case. It is possible to have a low quality but
high-resolution image.
from: http://www.eastbywest.com/pub/vectorbitmap/
So, what is Resolution?
So... looking below we have document sizes that change... but not pixel diminesion. These are all
the SAME EXACT FILE!!!!! From document size, the pixel dimensions are a simple math equation.
(H * dpi) x (W * dpi) = pixels x pixels ... so...








900x600 = 9"x6" @100dpi
900x600 = .9"x.6" @1000dpi
900x600 = 900"x600" @1dpi
900x600 = 3"x2" @300dpi
900x600 = 1.5 "x1" @600dpi
900x600 = 45"x30" @20dpi
900x600 = 4.5"x3" @200dpi
900x600 = 12.5"x8.333" @72dpi
Resampling
Resampling is changing the total number of pixels. If you turn it off, you can change the document
size and/or dpi settings, but it is not actually changing the physical pixel dimensions of the file. See
how the pixel dimensions are locked.
Image Color Modes:
Colors are shown by Channels in Phototshop.
Standards: RGB vs CMYK
1. www.cdman.com/graphics/color/index.html - nice low-level guide.
2. www.cs.utk.edu/~huangj/CS594F03/color.ppt - Excellent powerpoint... in depth for sure.
Black and White Color modes:


Bitmap or Lineart - only Black or White
Greyscale - 256 levels of black (from white to black)
Color Color modes:






Index - 256 indexed colors (such as with a .gif image)
RGB - Additive color model that adds red, green & blue together to make white. What we
use most of the time on the computer since all cameras, scanners, monitors and other digital
devices capture and/or display color in this mode.
CMYK - Subtractive color model for printing uses Cyan, Magenta, Yellow and Black.
LAB - Luminance (value of black/white), hue (color) and saturation (how much color) - has
greater color space (gamut) than CMYK or RGB.
Multitone (Duotone) - uses a greyscale image and makes it two or more colors... used for
professional printing. Must be saved as a .eps file.
Multichannel - more than one "channel" in Photoshop
EXAMPLES of Images (using color modes)
go to www.prepressure.com/library/file-formats/bitmap-versus-vector
1.
2.
3.
4.
Line-art
Grayscale
Multitones (duotones, tritones)
Full color images
Common File Formats
1. BMP (BitMaP)
o basic format for pc. No compression
2. GIF (Graphics Interchange Format)
o 256 max colors
o may have basic on/off transparency
o Uses lossless compression
o best used for limited colors
3. JPEG (Joint Photographic Experts Group)
o 16 million colors
o no transparency
o lossy compression - always lose info when you save the file
o variable compression and quality (sacrifice image quality for small file sizes)
o best for photos
4. PNG (Portable Network Graphics)
o
o
o
o
5.
6.
7.
8.
new format... flexible
256 colors or millions
246 levels of transparency - doesn't work in IE
layers possible (but adds significantly to file size)
TIFF (Tagged Image File Format)
o for professional printing
o lossless compression
o has ability to save clipping path (vector path)
EPS (Encapsulated PostScript)
o Postscript is the language that laser printers use
o for print... can be bitmap or vector
TGA (Targa)
o Used for video (will use later in the curriculum)
o lossless compression
o can have alpha channels
lots of others .... over 400!!
View some common web formats at: www.fieggen.com/ian/g_formats.htm
So... more image samples:
JPG images (photos)
0% quality, 9k
note the obvious compression artifacts.
GIF images (photos)
70% quality, 20k
note this one looks good.
2 colors, not dithered, 2k
So, which is which?
42k
Using Flashes
Flash Button Types
Button Styles
Creating buttons is one of the most important things you do in Flash. Afterall, much of the interaction
we do with Flash is based upon having something that we click on. Creating buttons is both a
technical ability and design ability... you want people to instantly tell that something is a button and
give them a good idea of what that button does as well.
How do we know if something is a button. Easy... it looks and acts like one. Ah, but making it look
like a button is the trick. While there are many styles of buttons, the reigning champ right now is the
WEB 2.0 buttons style that you see all over the place, such as:
As more advanced and "slick" interfaces are coming out, the current design focus is on the
advanced interaction with buttons... which is something we will cover later.
Basic Button "States"
We know something is a button by how is looks and acts. Buttons often have text and/or icons that
also tell us what they are or do. Buttons also have more than one "state" so that the user can tell
when the button is active... an important concept in GUI design known as State Visualization. In
order for us to know something is a button it must have at least two... a default state and a hover
state.
When you create a button symbol in Flash, the object is automatically given the possibility of four
keyframes, or "states."
1. Up is the button's default state.
2. Over is the state change that occurs when the user "hovers" over the button before clicking.
This tells the user that something will happen if they click the button.
3. The down state is the button's state change when the button is clicked. This tells the user
that something is actually happening.
4. The hit state is simply for the designer to identify the area that can be clicked by the user.
This is most commonly used for text or odd-shaped buttons. "
Note: buttons require that you at least have two states... the UP (normal) state and an OVER
(hover/rollover) state. Also, be careful of shifting position or size of the graphics for buttons... as
they can lead to undesirable results.
Creating Buttons in Flash
Here is how to make 3 basic styles of buttons in Flash.
1. Button with shapes inside
1. Create a shape for your button.
2. Select the shape. (It will already be selected if you use a drawing object.)
3. Right click on shape (should be already selected) and >convert to button symbol, giving the
symbol a logical name.
4. Double-click on button to go into it's timeline
5. Copy the Up keyframe into other frames (you need at least Up and Over states)
6. Change look of button for the different states.
7. Add a new layer for text if desired so the text is consistent for both states.
8. Test your button (Ctrl + Enter)
9. Go back to the main timeline before you create another button.
2. Button with symbols inside ( _mc preferred)
1. Create a shape for your button and convert to button symbol
2. Double-click on button to go into it's timeline
3. Reselect the shape (inside the button) and convert this to a Movieclip. MAKE SURE IT IS
NOT A BUTTON SYMBOL.
4. Copy the _mc on the Up keyframe into the Over frame. Use the other frames if needed.
5. Change look of the _mc symbols for the different states.
6. Add a new layer for text if desired.
7. Test your button (Ctrl + Enter)
8. Go back to the main timeline before you create another button.
3. Button with Animated symbols inside
1. Create a shape for your button and convert to button symbol
2. Double-click on button to go into it's timeline
3. Reselect the shape (inside the button) and convert this to a Movieclip. MAKE SURE IT IS
NOT A BUTTON SYMBOL.
4. Copy the Up frame to the Over frame.
5. Click on Over keyframe, select the existing movieclip symbol and convert this to movieclip
symbol (this puts the symbol into a new timeline for you to do animation)
6. Double-click on the new movieclip to go into it's timeline.
7. Add some animation... two keyframes with a classic tween works great. (keep the animation
pretty conservative... remember this is an animated button... eg, do not MOVE the button.
Change the color or use a mask to have elements animate in, but for best results don't
physically change the size or position of the button)
8. Add a stop(); action to a keyframe at the end of the animation so it stops, or create a third
keyframe so that the animation cycles.
9. Go back to the button (double-click outside the animation.)
10. Add a new layer for text if desired.
11. Test your button (Ctrl + Enter)
12. Go back to the main timeline before you create another button.
The following video tutorial will take you through the three types of buttons above.
Button Libraries in Flash
Flash has a number of buttons that are already in Flash if you know where to look. Some are pretty
good, and some are pretty ugly... but at least they are buttons. One of the most useful ones
however, is the component button. The following tutorial will take you through the different button
libraries in Flash, and how to update the elements in a button.