6350 Reading Notes

Lesson Two

Multimedia

"Rationale for Multimedia Use and Instruction in Education"
Introduction
  • "In the age of cyberspace in the twenty-first century, composition, calculation and communication on paper alone is an impoverished, fractional and increasingly outdated concept and practice for thinking and communication."
    -If we are trying to prepare students to be valuable 21st century citizens, we can not hamper them by requiring them to follow the techniques my father-in-law used as a teacher in the beginning of the 20th century. Rote memorization and the chalk slate are not the tools of today's students./
Educational Values
  • The Challenges of Multimedia Education
    -"It's the First Day of School (Again)!" Scott McLeod seems to summarize this so well!
  • The Vision of Multimedia
    -"seven of the major multimedia forms: text and programming, still images, audio, video, animation, three-dimensional imagery, virtual reality and electronics device controllers (e.g., sensors, telescopes, robots). Interaction is an additional concept but one that can be potentially applied to each and all."
    -"the same tech. that displays and presents can also be used to invite interaction and participation."
    -Wonder why Houghton doesn't mention the use of 2.0 tools??
    -Whoops!! "Fair Use" is a defense, not a right!
    -"The concept of interaction for active minds also extends to email, instant messaging, web form pages for surveys, collaborative writing, audio conferencing, video conferencing, and networked white boards, simulations and games."
    -"Okolo and Ferretti (1998) showed that student composition representing ideas simultaneously through text and audio, video and sound increased the likelihood that students will acquire an understanding of complex information."
  • The Tipping Point for Multimedia Literacy
    -"Literacy can also be seen as the skill needed to think, create and reason at the level preferred by a given culture."
    -Factors in finding the mm. tipping point for today's culture: cost, usage by adults, availability, common cultural practices. (Just watch the cell phones come out when the last bell rings! Pictures, music, text messages, IM to the friend across the building...wow!)
Social Values
  • Problem Solving 3D's of Problem Solving: Thought, Sequence, Perspective
  • Politics & Learning - the Art of the Allocation of Resources
    -two general concerns: effectiveness & too specialized
    -"To the degree that relevance to the larger world beyond classroom education is important, in fact, multimedia capacity has become the cultural norm."
    -"An implication of of this analysis is that funding sources must continue to expand the portion of the budget that provides for multimedia hardware, software and training and the innovative pedagogy which incorporates it." (cf. McLeod again!)
  • The Impact on Reading Skills
    -"Text is enhanced if one accepts the inherent educational challenge to find ways to so meld all media that they reinforce the value of each other, such as reinforcing the value of text and its many efficiencies."
  • Reinforcing Negative Social Values
    -"it is inherent that malevolent cultural forces work constantly to find new ways to emerge. It is inherent that citizens must constantly guard against the wolves of old problems emerging under the sheepskin of new developments. This requires the active engagement of our pedagogy, not avoidance."
  • Multimedia's Economic Value
    -"The twenty-first century is about the knowledge economy. Economic value is increasingly developing from the convergence of media."
    -"An important and comprehensive evaluation of the ICT status of all the countries of the world was recently completed by the International Telecommunications Union (ITU) , a organization within the United Nations. ITU created a "digital access index" (November, 2003) and from it developed the world's first global ICT ranking. The United States (tied for tenth place with Canada) apparently has much to learn from the 9 countries that ranked ahead of it on this index. The number of schools and students in the United States with lower educational and technical opportunities was a factor in the United States not being higher on this list. This analysis should be of some importance to United States corporations, political systems and educational systems interested in maintaining global leadership in the knowledge age."
    -makes me wonder what the numbers are for 2007?
    -"Indeed, the lack of basic information literacy skills is as much a factor of the so-called digital divide as the lack of material technology. These new skills are rapidly becoming a prerequisite for the active participation of citizens in democratic society" Internet Literacy Handbook
  • Getting There
    -"Within education there are two classes of users of multimedia that need to be emphasized in weighing its relevance: teacher education programs around the country; and schools within range of our student teacher population."
    -Association for the Advancement of Computing in Education
    -Society for Information Technology and Teacher Education
    -"The degree to which schools in the region around a university use multimedia is likely to extend over a wide range."
    -"Multimedia has so transformed the power of communication through the integration of computers and networks, that it has outgrown the term multimedia itself."
Unimedia
  • A new term is needed to describe the new way in which the Internet has influenced the usage of multimedia. Houghton proposes "unimedia."
    -"As the web merges every prior medium, new-age composers will incorporate the full range of metaphor, variation and awareness in one presentation space, with one machine. The computer has become the universal reader. The computer has also become the universal writer. The web page has become the universal form for communication. But the integration is even tighter than the mere parallel display of text, sound and image on one web page. These elements interact."
    -"The phrase "comprehensive composition" is another offering as a phrase to replace the reign of the term multimedia and less awkward than the "holistic composition" phrase."
    -"Future curriculum for 21st century learners must consist of reading, writing AND linking a range of multimedia elements. The cultural importance of this transition parallels the magnitude of change initiated by the move thousands of years ago from oral to written culture."
    -"for the first time, the basic knowledge and tools are within the grasp of even primary level students who are given sufficient time and education with these technologies. Never has such power to communicate and express been put within reach of so many teachers and learners through computer based technology."
    -"Comprehensive composition knowledge has practical benefits as well. This facility to invent with computer-based multimedia allows you to put your multimedia needs in the local context, in the context of the learner, and in the display formats available to them. Increasing ease of use allows the youngest of learners to become composers, finders and editors for their own linking needs as well as allow teachers and administrators to do the same."
Summary
  • -"Comprehensive composition knowledge has practical benefits as well. This facility to invent with computer-based multimedia allows you to put your multimedia needs in the local context, in the context of the learner, and in the display formats available to them. Increasing ease of use allows the youngest of learners to become composers, finders and editors for their own linking needs as well as allow teachers and administrators to do the same."
Back to top

Dreamweaver 1

Getting Started with Dreamweaver
Layout seems very similar to Adobe's Photoshop Elements, imho.
Code & Design view is best for debugging html (in the Document toolbar)
Remember, Less is More in graphics and design
Flash Button Objects are Flash obj that can be created in Dreamweaver and serve as links to other files or Web pages

Planning a Website Do your PRIO (Purpose, Reader, Information, Organization) - or watch ADDIE :)
  • Plan the site
  • Setup the basic structure (parent and child pages, root and asset directories, etc.)
  • Create the pages
  • Test/Modify/Publish/Modify/Test pages :)

Good idea to have a site map, and create an effective nav. structure

Site map: def--graphical representation of the site, quite often in a tree structure. Can be graphic (.bmp, .png, etc) or XML. cf: Sitemaps.org.
Back to top

Lesson Three

Design

"The Language of Design"
Def: design "Design is the PROCESS of SELECTING and ORGANIZING elements or components in order to fulfill a specific purpose. This purpose may be functional or aesthetic, or (frequently) both."
Elements
  • Point - "compulsion to connect parts is described as grouping, or gestalt"
  • Line - "A line is a mark made by a moving point and having psychological impact according to its direction, weight, and the variations in its direction and weight."
    -Expressive Qualities - e.g. calligraphy, maps, floor plans, graphs; can also communicate emotion & state of mind: Straight (horizontal, vertical, diagonal) vs. Curved (shallow, soft, e.g.)
    -"The quality of line in itself contributes to the mood of the work, and for the master artist, the quality of line is a fundamental expression of his/her style."
  • Form, Shape & Space - "Form and shape are areas or masses which define objects in space. Form and shape imply space; indeed they cannot exist without space."
    -2D or 3D
    -can be organic or geometric
    -realistic/naturalistic vs. abstract (objective, non-objective, caricature
    -Perception is affected by viewpoint, e.g. space/light around the object
    -2D - Line, Value, Hue, Texture affect our perception
    -Forms/Shapes can be positive or negative
    -"Training the eye to keep on looking beyond first impressions is a crucial step in developing true visual literacy."
    -2D illusion of 3D: "The tools for creating illusions of three dimensional space are overlapping, changing size and placement, linear perspective, relative hue and value, and atmospheric perspective."
    -3D Form - "Three dimensional shape and space is the basis of architecture and most designed objects."
  • Movement - "Movement is the design element that operates in the fourth dimension - time. Movement is the process of relocation of objects in space over time."
    -Literal or Compositional - Literal is physical movement. Compositional is "how the viewer's eye moves through the composition" ; static/dynamic
  • Color, Value & Hue - color is the general term, hue refers to the specific point on the spectrum, value is the relative lightness or darkness (cf. contrast & gradation)
    -"If values are close, shapes will seem to flatten out, and seem closely connected in space; none will stand out from the others. If values contrast, shapes will appear to separate in space and some will stand out from the others."
    -Primary - RGB (additive) vs. CMYK (remember tint, shade, & tone)
    -check site for "Psychological Implications of Color"
  • Pattern - "Pattern is an underlying structure that organizes surfaces or structures in a consistent, regular manner."
    -Grid, Flow, Branching, Spiral, Packing & Cracking
  • Texture - "Texture is the quality of an object which we sense through touch. It exists as a literal surface we can feel, but also as a surface we can see, and imagine the sensation might have if we felt it. Texture can also be portrayed in an image, suggested to the eye which can refer to our memories of surfaces we have touched. So a texture can be imaginary."
    -many kinds of textures, eliciting many feelings in response
Principles
  • Balance - "the concept of visual equilibrium, and relates to our physical sense of balance. It is a reconciliation of opposing forces in a composition that results in visual stability."
    -Symmetrical - formal, can be bilateral or radial
    -Asymmetrically - informal, works around a "fulcrum point"
  • Proportion - "the relative size and scale of the various elements in a design. The issue is the relationship between objects, or parts, of a whole."
    -Universal standard=the human body
    -"scale in surface design is also important"
  • Rhythm - "timed movement through space; an easy, connected path along which the eye follows a regular arrangement of motifs."
    -e.g. linear, repetitive, alternative, graduated
  • Emphasis - "Emphasis is also referred to as point of focus, or interruption. It marks the locations in a composition which most strongly draw the viewers attention."
    -Repetition, Contrast, etc.
  • Unity - "Unity is the underlying principle that summarizes all of the principles and elements of design. It refers to the coherence of the whole, the sense that all of the parts are working together to achieve a common result; a harmony of all the parts."
    -Can consist in pattern, form/color, variety, or even a matter of concept

"creativity is the ability to see connections and relationships where others have not."
Back to top

Dreamweaver 2

Developing a Web Page
Apply a consistent theme. color, fonts, placement of the nav links and overall page design give a site a unified look and promotes greater ease-of -use
  • head content - page title, meta tags, keywords
  • PICS (Platform for Internet Content Selection)
  • body - the part of the page that appears in a browser window

Design Decisions
  1. background color
  2. default font and default link colors
  3. colors for: unvisited links and visited links
Hexadecimal values - represents RGB, in base 16 ergo 0-9 and A-F

FONTS
Font Combination: 3 fonts that specify which fonts a browser should use to display the text of your web page.
Default base font is size 3 (1 is smallest, 7 is largest)
Heading: Heading 1 is largest, Heading 6 is smallest
Sans-serif fonts (block-style) often used for heading and subheadings
Serif fonts (contain small extra strokes) often used for text that is/will be printed
More than 3 fonts creates a "ransom note effect"

FILE NAMES
Home Page should be index.html
Don't use spaces or special characters
Default extension is .html

Include point of contact and nav bar as well as plain text links for accessibility

JavaScript adds dynamic content

Testing - use different browsers and screen sizes, as well as checking on different platforms! Most common resolution today is 1024x768 or higher.

Smart Design Principles in Web Page Layout
Horizontal symmetry, Vertical symmetry, Diagonal symmetry, Radial symmetry
Rule of Thirds: divide a page into 9 squares with interest increased when your focus is on one of the intersections in the grid. Most important info should be at the top of the page, visible without scrolling
Back to top

Lesson Four

Design & Typography

Foundations of Design & Typography
  • Elements of Design
  1. Attract an audience
  2. Provide a strong (consistent) visual hierarchy for messages
    Symmetry/Asymmetry - The Golden Section/Mean
    Contrast is the most important element of Graphic design
    * value & color
    * mass & space & scale
    * Positive shapes in Negative space
    * simulating movement
    * dimension/perspective
    * creating a mood, in the abstract
    Ten Minute Tanagram (took me a LOT longer!)
    10MinuteTanagram.jpg
  • Content: Words & Pictures
    KISS
    " The key is to develop a visual concept that works within the limitations, budget, and scope of the delivery media."
    _Do your PRIO (Purpose, Reader, Information, Organization) FIRST!_
    Types of Images: Photographs, illustrations, information graphics, borders, etc.
    Web Design Links from Christine Castigliano
  • Typography
    Hierarchy: Headlines, subheads, body text, captions, pullquotes & other breakouts
    Measured in points - 72pts=1 in, 12pts=1 pica
    Leading expressed in a ration of size to leading - most "auto" settings are for leading 20% greater than text size, e.g. 10 pt text on 12 pt leading.
    Tracking vs Kerning - Tracking applies to whole lines, Kerning is between specific letters
    Serif (Roman) vs San Serif (Gothic)
    the tone of the message should be reflected in your font choice
    "*The Rule of Two*. As a general rule of thumb: for unity and clarity, use no more than two font families in a project. Exploit the variations to establish the hierarchy."
    "The important thing is to serve the values that the text stands for."
    Before & After compliments of Robin Williams
  • Putting It All Together
    _Do your PRIO first!_
    "Remember your mission: to attract & direct the reader's eye"
    "Be consistent: Use alignment, repetition & proximity"
    "ALIGNMENT: This means aligning text and graphics to your layout grid or guidelines, which makes your work look more organized and is easier to follow.
    "REPETITION: Humans love pattern; it makes us feel secure and content. If you choose a graphic theme or font or supporting element such as a rule, use it throughout. The style should evolve naturally from the goals, appropriate content and layout.
    "PROXIMITY: This means to to keep things that belong together close together on the page, which will make it easier for viewers to make connections. For example, you wouldn't want the price of your catalog item to be far away from its photograph."
    Create a thumbnail sketch of the whole layout before you start worrying about the type, etc.
    Know what the print specs are ahead of time!
    Use the grid in your DTP app :)
Back to top

Dreamweaver 3

Working with Text and Graphics

CSS Cascading Style Sheets: sets of formatting instructions, usually sorted in a separate file, that control the appearance of content on a Web page or throughout a website.
  • sets of formatting attributes called rules
  • Class style can be used to format any page element
  • HTML style is used to redefine an HTML tag
  • Advanced style is used to format combinations of page elements
  • a style consists of a selector (the name of the tag to which the style declarations have been assigned) and a declaration (consists of the property and the value)
External CSS style sheets apply to entire sites, Embedded CSS style sheets apply only to a single page
Style sheets can be used to format much more than text objects. They can be used to set the page background, link properties, tables, or determine the appearance of almost any object on the page.

Graphic/Image File Formats ("graphic"=non-text items on a web page, "image"=specific formats as below)
  • .gif (Graphics Interchange Format) download quickly but limited in the number of colors they can represent. Have the ability to show transparent areas (licensed format)
  • .jpg or .jpeg (Joint Photographic Experts Group) can display many colors, often used for photographs
  • .png (Portable Network Graphics) can display many colors and use various degrees of transparency, called opacity. free to use, but not all browsers support the .png format

Lists Unordered=bullets, Ordered=numbered, Definition=like Unordered, but without bullets

Back to top

Lesson Five

Flash 1

Getting Started with Flash



Back to top

Lesson Six

Flash 2

Drawing Objects in Flash


Back to top

Lesson Seven

Flash 3

Working with Symbols and Interactivity



Back to top

Lesson Eight

Flash 4

Creating Animations



Back to top

Lesson Nine

Flash 5

Creating Special Effects



Back to top

Lesson Ten

Fireworks 1

Getting Started with Fireworks



Back to top

Lesson Eleven

Fireworks 2

Working with Objects



Back to top

Lesson Twelve

Fireworks 3

Importing, Selecting and Modifying Graphics



Back to top

Lesson Thirteen

Integrating

Integrating Fireworks, Flash and Dreamweaver