You Define Learning Information Instruction

Learning

Information

Instruction

Grabowski, B., Small, R. (1997). Information, instruction, and learning: A hypermedia perspective. Performance Improvement Quarterly, 10(1), 156-166). Personally driven Deliberate intent that learners will remember, apply, or act upon the information Personally defined Pre-planned pedagogically based design strategies Content Internal External External Learning Instruction Information

Hypermedia “Tool for linking nonlinear information presented in the form of graphics, animation, video, and sound” (Grabowski, 1997, p. 157). How can it be used as an instructional tool that enhances rather than inhibits learning?

“Tool for linking nonlinear information presented in the form of graphics, animation, video, and sound” (Grabowski, 1997, p. 157).

How can it be used as an instructional tool that enhances rather than inhibits learning?

Goal of Instructional Designer: create a system as represented by the shaded area which brings together information (content) and principles of learning with instructional strategies. Grabowski, B., Small, R. (1997). Information, instruction, and learning: A hypermedia perspective. Performance Improvement Quarterly, 10(1), 156-166). Information Instruction Learning

Hypermedia-based Learning Systems Use of the computer to automate (nonlinear) paths through chunks of information. Present simultaneous, integrated displays of information in a variety of formats to learners, providing opportunities for self-guidance, open-ended and interactive learning with little or no instructional guidance. (p. 161).

Use of the computer to automate (nonlinear) paths through chunks of information.

Present simultaneous, integrated displays of information in a variety of formats to learners, providing opportunities for self-guidance, open-ended and interactive learning with little or no instructional guidance. (p. 161).

Learning Issues with Hypermedia Grabowski, B., Small, R. (1997). Information, instruction, and learning: A hypermedia perspective. Performance Improvement Quarterly, 10(1), 156-166). Internal Attitudes Interest Relevance Self-confidence Satisfaction Internal Scanning differences Conceptual integration Risk taking Constricted/flexible control Internal Search strategies Decisions Purposes Use External Accessibility Technology Interface Content External Cognitive requirements Selection of information Evaluation of information External Organization of information Color cues Screen position Contextual cues Mnemonics Written directions Motivation Cognitive Navigation

Internal

Attitudes

Interest

Relevance

Self-confidence

Satisfaction

Internal

Scanning differences

Conceptual integration

Risk taking

Constricted/flexible control

Internal

Search strategies

Decisions

Purposes

Use

External

Accessibility

Technology

Interface

Content

External

Cognitive requirements

Selection of information

Evaluation of information

External

Organization of information

Color cues

Screen position

Contextual cues

Mnemonics

Written directions

Your Web Portal What are your goals? Share information Announcements Homework Collaborative space Teaching space Portal (Richardson, 21)

What are your goals?

Share information

Announcements

Homework

Collaborative space

Teaching space

Portal (Richardson, 21)

Design Turn to your neighbor/group and list features that you think are important to your web portal design

Turn to your neighbor/group and list features that you think are important to your web portal design

Look at a few….see what you think! http://www2. murrieta .k12.ca. us/tovashal/bcoley/index .htm http: //mabryonline .org/ http://www. mpsomaha .org/willow/ http: //westwood . wikispaces .com/ http: //fhswolvesden . wikispaces .com/ http://www.qcsd.org/2130125627113246/site/default.asp http: //teacherweb .com/ http://www.crsd.org/5034298164240/site/default.asp?5034298164240Nav=%7C&NodeID=166 http://www.crsd.org/50370927105730/site/default.asp?50370927105730Nav=%7C&NodeID=347 M. Hull Science Leadership Academy http://www. sdst .org/shs/library/ Now - revise your list…What is important to you in your Web Portal?

http://www2. murrieta .k12.ca. us/tovashal/bcoley/index .htm

http: //mabryonline .org/

http://www. mpsomaha .org/willow/

http: //westwood . wikispaces .com/

http: //fhswolvesden . wikispaces .com/

http://www.qcsd.org/2130125627113246/site/default.asp

http: //teacherweb .com/

http://www.crsd.org/5034298164240/site/default.asp?5034298164240Nav=%7C&NodeID=166

http://www.crsd.org/50370927105730/site/default.asp?50370927105730Nav=%7C&NodeID=347

M. Hull Science Leadership Academy

http://www. sdst .org/shs/library/

Now - revise your list…What is important to you in your Web Portal?

The Tools District mandated software Free web page publishing sites: www.weebly.com Blog http://www.speedofcreativity.org/ Wiki http: //coolcatteacher . wikispaces .com/ http://westwood.wikispaces.com/ http://teachdigital.pbwiki.com/ Word PPT Other ideas???

District mandated software

Free web page publishing sites:

www.weebly.com

Blog

http://www.speedofcreativity.org/

Wiki

http: //coolcatteacher . wikispaces .com/

http://westwood.wikispaces.com/

http://teachdigital.pbwiki.com/

Word

PPT

Other ideas???

Design - Colors Limit yourself to three colors . Use one color for background. Use one color for text. Use one color for title and highlighting. Use dark background and light text for screen presentations. Cool colors are best for backgrounds. (Blue) Warm colors are best for highlights. (Yellow) Use the same colors throughout the web page (almost like a template so viewers immediately know it “belongs” together within your page). Don’t use green and red together – they are hard to read.

Limit yourself to three colors .

Use one color for background.

Use one color for text.

Use one color for title and highlighting.

Use dark background and light text for screen presentations.

Cool colors are best for backgrounds. (Blue)

Warm colors are best for highlights. (Yellow)

Use the same colors throughout the web page (almost like a template so viewers immediately know it “belongs” together within your page).

Don’t use green and red together – they are hard to read.

Design - Font The font should be large enough. Avoid fancy fonts (Gothic, Old English) ﾘ  They are hard to read. ﾘ  Not all computers have the same “fancy fonts”. Don’t mix fonts; use no more than two fonts. Check the font size as it will be used – on a TV screen, computer screen, pull down screen. Don’t overuse uppercase letters; use them for headings, titles, and emphasis.

The font should be large enough.

Avoid fancy fonts (Gothic, Old English)

ﾘ  They are hard to read.

ﾘ  Not all computers have the same “fancy fonts”.

Don’t mix fonts; use no more than two fonts.

Check the font size as it will be used – on a TV screen, computer screen, pull down screen.

Don’t overuse uppercase letters; use them for headings, titles, and emphasis.

Design - Graphics Choosing Graphics (read the copyright disclaimers on the sites first!) Be sure they enhance your site and match the content. Too many graphics can distract the audience. http://school. discoveryeducation . com/schrockguide/yp/iypabout .html (scroll to the bottom) http://school. discoveryeducation .com/clipart/ http://www. sdst . org/shs/library/cfimages .html (joyce valenza’s site - a great one!) http: //teacherlibrarianwiki . pbwiki .com/Copyright+Friendly+Image+Sources

Choosing Graphics (read the copyright disclaimers on the sites first!)

Be sure they enhance your site and match the content. Too many graphics can distract the audience.

http://school. discoveryeducation . com/schrockguide/yp/iypabout .html (scroll to the bottom)

http://school. discoveryeducation .com/clipart/

http://www. sdst . org/shs/library/cfimages .html (joyce valenza’s site - a great one!)

http: //teacherlibrarianwiki . pbwiki .com/Copyright+Friendly+Image+Sources

Great “Design” Resources In addition, here are 2 links to excellent sites that provide both good and bad tips for designing a website (short and sweet!): http://www. ratz . com/featuresgood .html http://www. ratz . com/featuresbad .html Web 2.0 style web page design: http: //webdesignfromscratch .com/web-2.0-design-style-guide. cfm

In addition, here are 2 links to excellent sites that provide both good and bad tips for designing a website (short and sweet!):

http://www. ratz . com/featuresgood .html

http://www. ratz . com/featuresbad .html

Web 2.0 style web page design:

http: //webdesignfromscratch .com/web-2.0-design-style-guide. cfm

2 Things… Begin working on your Web Portal After you have “something to share” (we all know this is a work in progress!), Complete the reflection in our Class Ning !

Begin working on your Web Portal

After you have “something to share” (we all know this is a work in progress!),

Complete the reflection in our Class Ning !