Computer and Multimedia in Education: Theory and Concepts WhatisEducationalTechnology?

Educational Technology AV IT Process Teaching Methodologies TV, Radio, Digital TV, Cellular phone, etc Computer and Internet WHATISCOMPUTERINEDUCATION? Itistheuseofcomputersinthedesign,development, delivery and evaluation of teachin g and learning materials (instruction) It means: computer-based instruction (CBI) computer-assisted instruction (CAI) computer-assisted learning (CAL) WHATISLEARNING? Learningisa persistingchangeinhumanperformanceorperformancepotential[brought]about asaresult of the learner s interaction with the environment Driscoll, 1994, p. 8-9 (in Newby, T.J., 2000) Learning occurs when experience causes a relatively permanent change in an individual s knowledge or permanent change in an individual s knowledge or behaviour Woolfolk, 1998, p. 204 (in Newby, T.J., 2000) To learn is to change(or have the capacity to change) one s level of ability or kn owledge in a permanent way which is brought about by experience or interaction o f a person with his/heenvironment LEARNING THEORIES A learning theory is anorganised set of principles LEARNINGTHEORIES A learning theory is an organised set of principles explaining how individuals l earn; that is, how they acquire new abilities and/or knowledge (Newby, T.J., 200 0) Learning Theory Main Principle B h l P i reinforcement if Behavioural Perspective Cognitivist Perspective organised information Constructivist Perspective learn from one another No one learning theory is the BEST and integrating them with different learning situation may look the best. BehaviouralPerspectiveWhatislearning? Achange in the probability of a behaviour occuring What is the learning process? Antecedent Behaviour Consequence What is the teacher s Arrange external contingencies COMPARISONS: THE ORETICAL PERSPECTIVES OF LEARNING Primary role?

ggWhat cant heteacher doto carry out that role? State objectives Guide student behaviour with cues arrange reinforcing consequencest immediately follow student s behaviour What is the student s primary responsibilities? Respond to cues Behavioural Perspective What is learning? Achange in the probability of a behaviour occuring What is the learning process? Antecedent behaviour consequence What is the teacher s Arrange external contingenc ies COMPARISONS: THEORETICALPERSPECTIVESOFLEARNING Primary role?ggWhat cant he teacher do to carry out that role? State objectives guide student behaviour with cues arrange reinforcing consequen ce stoimmediately follow student s behaviour What is the student s primary responsib ilities? Respondtocues Cognitiv ist Perspective What is learning? A change in knowledge stored in memory What is the learning process? Attention encoding retrieval of information from memory What is the teacher sil? Arrange conditions to support memory COMPARISONS: THE OR ETICAL PERSPECTIVES OF LEARNING Primary role? Processes What can the teacher do to carry out that role? Organise new information link new information to existing knowledge Use avariety of attention,encoding and retrieval aids What is the student s prima ry responsibilities? ActivelysynthesizeinformationCognitivistPerspectiveWhatislearning? AchangeinknowledgestoredinmemoryWhatisthelearningprocess? Attention Encoding retrievalofinformationfrommemoryWhatistheteacher sil? ArrangeconditionstosupportmemoryCOMPARISONS: THEORETICALPERSPECTIVESOFLEARNINGDr. CK Tan, UMS 7 primaryrole? processesWhatcantheteacherdotocarryoutthatrole? organisenewinformation linknewinformationtoexistingknowledge useavarietyofattention, encodingandretrievalaidsWhatisthestudent sprimaryresponsibilities? Activelysynthesizeinformation ConstructivistPerspectiveWhatislearning? AchangeinmeaningconstructedfromexperienceWhatisthelearningprocess? RepeatedgroupdialogueandcollaborativeproblemsolvingWhatistheteacher sprimaryrole? ModelandguideCOMPARISONS: THEORETICALPERSPECTIVESOFLEARNINGDr. CK Tan, UMS 8

pyWhatcantheteacherdotocarryoutthatrole? provideopportunitiestosolverealisticandmeaningfulproblems providegrouplearningactivities modelandguidetheprocessofconstructingknowledgewithinthecontextofmutualproblemsol vingWhatisthestudent sprimaryresponsibilities? ExplorelikeascientistConstructivistPerspectiveWhatislearning? AchangeinmeaningconstructedfromexperienceWhatisthelearningprocess? RepeatedgroupdialogueandcollaborativeproblemsolvingWhatistheteacher sprimaryrole? ModelandguideCOMPARISONS: THEORETICALPERSPECTIVESOFLEARNINGDr. CK Tan, UMS 8 pyWhatcantheteacherdotocarryoutthatrole? provideopportunitiestosolverealisticandmeaningfulproblems providegrouplearningactivities modelandguidetheprocessofconstructingknowledgewithinthecontextofmutualproblemsol vingWhatisthestudent sprimaryresponsibilities? Explorelikeascientist INSTRUCTIONALMETHODSCooperativelearningCooperativelearningCooperativelearningCoo perativelearningDiscoveryDiscoveryDiscoveryDisc overyProblemsolvingProblemsolvingProblemsolvingProblemsolvingInstructionalgamesI nstructionalgamesInstructionalgamesInstructiona lgamesSimulationSimulationSimulationSimulationDiscussionDiscussionDiscussionDisc ussionDrillandpracticeDrillandpracticeDrillandp racticeDrillandpracticeTutorialTutorialTutorialTutorialDemonstrationDemonstratio nDemonstrationDemonstrationPresentationPresentationPresentationPresentation Dr. CK Tan, UMS 9

C CCo ooo oop ppe eer rra aat tti iiv vve ee L LLe eea aar

rrn nni iin nng gg M MMe eet tth hho ood dd Cooperative learning is an instructional paradigm in which teams of students work on structured tasks ( e. g. , homework assignments, laboratory experiments, or design projects) . Learning is via social interaction among group members. ( Johnson, Johnson, and Smith, 1998) Approach: Approach: C CCo

oon nns sst ttr rru uuc cct tti iiv vvi iis sst tt TG20503, Dr. C.K.Tan 10

Examples on cooperative learning: In a science project, one student is assigned to search the internet, another goes the library for background research and others design and conduct experiments; then meet to discuss Implementation

of cooperative learning can also be computerbased ( info sharing via online forums, emailing) 11 TG20503, Dr. C.K.Tan

D DDi iis ssc cco oov vve eer rry yy L LLe eea aar rrn nni iin nng gg M MMe eet tth hho ood dd Discovery learning takes place in problem solving

situations where the learner draws on his or her own past experience and existing knowledge to discover facts and relationships and new truths to be learned. Models that are based upon discovery learning model include: guided discovery, problembased learning, simulationbased learning, casebased learning, incidental learning and etc. Discovery learning is inquirybased and was created by Bruner, J S ( 1967)

J. S. ( 1967) A AAp ppp ppr rro ooa aac cch hh: :: C CCo oon nns sst ttr rru uuc cct tti iiv vvi iis sst tt TG20503, Dr. C.K.Tan 12

P PPr rro oob bbl lle eem mm S SSo ool llv vvi iin nng gg M MMe eet tth

hho ood dd Problem solving is a mental process and is part of the larger problem process that includes problem finding and problem shaping. Problem-Based Learning is a way to improve motivation, thinking, adnlearning. There are several problem solving techniques including; introspection, behaviorism, simulation and computer modeling, and experiment. ( Source: Wikipedia) Approach: Approach: CognitivistCognitivist

TG20503, Dr. C.K.Tan 13

I IIn nns sst ttr rru uuc cct tti iio oon nna aal ll G GGa aam mme ees ss M MMe eet tth hho ood dd Instructional games are learning activities that encourage students to

perform or master targeted concepts/skills/strategies in a particular learning task.

Examples of instructional games include checkers, cards, dice, spinners and game boards ( including games using computer) . Instructional games can be implemented in individualized learning situations, small group learning situations and whole class learning situations. Keyword: learning is fun Approach: Approach: BehaviouristBehaviourist TG20503, Dr. C.K.Tan 14

S SSi iim mmu uul lla

aat tti iio oon nn M MMe eet tth hho ood dd Simulation method is: The act of imitating the behaviour of some situation or some process by means of something suitably analogous An ICT technique of representing the real world by a computer program Model: representation of something ( sometimes on a smaller scale)

Approach: Approach: BehaviouristBehaviourist TG20503, Dr. C.K.Tan 15

D DDi iis ssc ccu uus sss ssi iio oon nn M MMe eet tth hho ood dd Discussion method is used usually in brainstorming of ideas or small scale problem solving. According to Rawlinson ( 2004) , large group is not encouraged but if it

needs to be done it should not be more than 12 members. Small group discussion is more favourable or the buzz group method where discussion starts off with pairs and later merged into larger groups for further discussion ( comparison of ideas) Approach: Approach: ConstructivistConstructivist TG20503, Dr. C.K.Tan 16

D DDr rri iil

lll ll a aan nnd dd P PPr rra aac cct tti iic cce ee M MMe eet tth hho ood dd Drill and Practice method is one of the most effective instructional techniques in learning. It helps to improve the learner s skills and readiness levels, adjusting both practice repetitions and new content introduction in the process. For

example, the corrective feedback paradigm sets an effective pattern for the rehearsal of failed problems ( Source: Allen, M. W. ( 2006) ) Approach: Approach: BehaviouristBehaviourist TG20503, Dr. C.K.Tan 17

T TTu uut tto oor rri iia aal ll M MMe eet tth hho ood dd The tutorial method is

a sequential small group discussion that derives from the main lecture group. Students are encouraged to participate in tutorial discussion on lecture topics to motivate and reinforce understanding of concepts that are being lectured. It is more or less similar to questioning ( by students) and answering ( by course lecturer/tutors) sessions. Approach: Approach: ConstructivistConstructivist TG20503, Dr. C.K.Tan

18

D DDe eem mmo oon nns sst ttr rra aat tti iio oon nn M MMe eet tth hho ood dd The demonstration method is an instructional method in which an instructor shows and explains to enrich and increase the learner's understanding. The effective demonstration involves telling, showing, questioning, and application. When skill

development is the desired outcome, practice must be included as a major component of the method. This method is also known as imitation learning or teaching by showing . It is quite similar to simulation but usually done by human or can be done with the help of models ( robots) or recorded videos TG20503, Dr.

C.K.Tan 19 Approach: Approach: BehaviouristBehaviourist ( robots) or recorded videos. P PPr rre ees sse een nnt tta aat tti iio oon nn M MMe eet tth hho ood dd Presentation method is:

The act of presenting, or something presented A lecture or speech given in front of an audience (

Source: Wikipedia) Presentation using computer slides is known as electronic presentation and it is usually a 1way traffic and some minimal interactions with the audience are usually allowed after the presentation A AAp ppp ppr rro ooa aac cch hh: :: B BBe eeh hha aav vvi iio oou uur rri iis sst tt TG20503,

Dr. C.K.Tan 20

INSTRUCTIONALTECHNIQUESFocusingquestionsFocusingquestionsFocusingquestionsFocusi ngquestionsHighlightingHighlightingHighlighting HighlightingAnalogiesAnalogiesAnalogiesAnalogiesMnemonicsMnemonicsMnemonicsMnemo nicsImageryImageryImageryImagerygygygygyConcept mapsConceptmapsConceptmapsConceptmapsEmbeddedquestionsEmbeddedquestionsEmbeddedq uestionsEmbeddedquestionsFeedbackFeedbackFeedbackFeedbackCasestudiesCasestudiesC asestudiesCasestudiesRoleplayingRoleplayingRoleplayingRoleplaying Dr. CK Tan, UMS 21

Subtopik pengajaran:

LATIHAN Kaedah: Contoh-contoh aktiviti: Teknik:

PADAM TEKS Dr. CK Tan, UMS 22

TYPESOFMEDIAwithATTRIBUTESInstructionalMediaKeyAttributesRealobjectsandmodelsAct ualitemor3DrepresentationTextWrittenwordsVideoMovingpicturesAudioSoundGraphics( visuals, slides, overheadtransparencies)

Pictures, linedrawings, mapsMultimediaCombinationofvariousmediaforms Dr. CK Tan, UMS 23

A computerbased process that WHATISMULTIMEDIA? combines text, graphics, sound, animation, and video to create an application that can be used to inform, entertain, educate, or motivate. James E Shuman ( 2000) 24 Dr. CK Tan, UMS

CAIandIMI Computer-Assisted Instruction (

CAI) is defined as the computer storage of instructional materials, the presentation of a part of them to the learner and the evaluation of the learner s responses Kropp, 1970

IMI is defined as an instructional program intentionally designed in segments, coherent and interactive with responses. It must be interactive with responses and guidance from it

Schwier & Misanchuk, 1993

Dr. CK Tan, UMS 25

MULTIMEDIARESEARCHAresearchbyComputerTechnologyResearch( CTR)in1993showedthatanindividualcanunderstand and learn :

20 % of what they see 30% of what they hear 50% of what they see and hear 80 % of what they see, hear and do Findings indicated that

average learning time has been reduced significantly and achievement levels increased when multimedia is used for learning Prof. James Kulik, 1985, 1986, 1991, 1994

Dr. CK Tan, UMS 26

MULTIMEDIA RESEARCH Dr. CK Tan, UMS 27 Sumber: Brent dan Felder (1997) dalam http://courses.science.fau.edu/~rjordan/active_learning.htm THELEARNINGPIRAMID The learning piramid ( Source: in Hofstetter, F.T. , 2001) Dr. CK

Tan, UMS 28

Apakahkebaikandankeburukanmultimedia? KEBAIKAN KEBURUKAN PADAM TEKS Dr. CK Tan, UMS 29

ADVANTAGESOFMULTIMEDIATheadvantagesofmultimediaareasfollow: learningwillbemoreeffectivewiththeintegration of various multimedia elements

will capture the interest and motivation of the learner learner can learn at his/her own free time/will/pace ( self-paced, self-directed, self-access) no teaching manpower

is needed ( role as facilitator only) . In addition, it saves cost and time. lots of learning materials and sources are incorporated in a multimedia presentation 30 Dr. CK Tan, UMS

TYPESOFMULTIMEDIASOFTWARETYPESOFMULTIMEDIASOFTWARE There are 9 types of multimedia software : 1. Image editing and painting 2. Drawing applications 3. 3D and

animation 4. 4. Sound editing Sound editing 5. Video editing 6. Presentation software 7. Multimedia authoring 8. Special effects/utilities programs 9. Internet programs 31 Dr. CK Tan, UMS

IMAGEEDITINGSOFTWAREExamplesofimageeditingandpaintingsoftware: 1. Adobe Photoshop 2. Microsoft Paint 3. PaintShop Pro 4. Adobe PageMaker Dr. CK Tan, UMS 32

DRAWINGAPPLICATIONSExamplesofdrawingapplications: 1. Freehand

( Macromedia) 2. Microsoft Paint 3. Illustrator ( Adobe) 4. Corel Draw 5. Macromedia Flash Dr. CK Tan, UMS 33

3-DANIMATIONSOFTWAREExamplesof3-Danimationsoftware: 1. Asymetrix 3D-FX 2. Autodesk 3D Studio 3. 3D Studio Max 4. Lightwave 3D Dr. CK Tan, UMS 34

SOUNDEDITINGSOFTWAREExamplesofsoundeditingsoftware: 1. SoundEdit 2. Nero WaveEdit 3. GoldWave 4. SoundForge

Dr. CK Tan, UMS 35

VIDEOEDITINGSOFTWAREExamplesofvideoeditingsoftware: 1. Ulead Video System 2. Ifilm Edit 3. MGI Video System 4. QuickTime VR Dr. CK Tan, UMS 36

PRESENTATIONSOFTWAREExamplesofpresentationsoftware: 1. Power Point 2. Macromedia Flash 3. Astound 4. Action! Dr. CK Tan, UMS 37

MULTIMEDIAAUTHORINGTOOLSExamplesofmultimediaauthoringtools: 1. Asymetrix Toolbook

Assistant 2. Asymetrix Toolbook Instructor 3. Macromedia Director 4. Macromedia Authorware 5. HyperStudio Dr. CK Tan, UMS 38

SPECIALEFFECTS/UTILIESSOFTWAREExamplesofspecialeffects/utilitiessoftware: 1. Kai s Power Tools 2. Flying Fonts 3. Adobe AfterEffect 4. Gif Construction Set Dr. CK Tan, UMS 39

INTERNETTOOLSExamplesofinternettools: INTERNETTOOLSExamplesofinternettools: 1. Microsoft FrontPage 2. Macromedia Dreamweaver 3 MMacromedia Shockwave di

Sh k 3. 4. Real Coolections RealPresenter RealProducer RealSlideShow Dr. CK Tan, UMS 40

Klasifikasi Multimedia dalam Pengajaran dan Pembelajaran ( Sumber: Ismail Zain, 2002) Dr. CK Tan, UMS 41

MULTIMEDIA COMPONENTS Graphics Audio Cds Dr. CK Tan, UMS 42 Animation Video T E X T T e x t i s a n

e f f e c t i v e w a y t o c o m m u n i c a t e i d e as a n d p r o v i d e i n s t r u c t i o n s t o u s e r s TEXTText is an effective way to communicate ideas and provide instructions to users FontClassification Classification of font : Serif Sans serif Square serif Script Decorative

/ Alternative 43 Dr. CK Tan, UMS

Font Classification

SERIF Dr. CK Tan, UMS 44

Font Classification

SANS-SERIF Dr. CK Tan, UMS 45

FontClassificationSQUARESERIF FontClassificationSQUARESERIF Dr. CK Tan, UMS 46

Font Classification

SCRIPT Dr. CK Tan, UMS 47

FontClassificationDECORATIVE & ALTERNATIVE Dr. CK Tan, UMS 48 FontClassificationDECORATIVE & ALTERNATIVE Dr. CK Tan, UMS 48 Neverhavethisschemeinyourpresentation Clash scheme Dr. CK Tan, UMS 49

GRAPHICSA graphic is said to be worth a thousand words if it is shown

when it is needed Basically, there are 2 kinds of graphics : Basically, there are 2 kinds of graphics : bitmaps ( based on pixels) vector images ( based on mathematical equations) Dr. CK Tan, UMS 50

Graphic images

A digital display is divided into discrete, individually addressable points

called pixels Images are produced by assigning a color and intensity to each pixel 51 Dr. CK Tan, UMS

Vector Graphics

It is stored as a set of instruction which describe the dimension and shape of every component of the drawing To display a vector graphic, each To display a vector graphic,

each instruction is read and converted to the shapes and colors that comprise the image Created by DRAW programs ( CorelDraw, MacDraw, etc. ) 52 Dr. CK Tan, UMS

Vector Graphics

Advantages: Object orientation: objects in a graphic can be manipulated separately Good for line art and charts Good for line art and charts

Disadvantages: The larger the graphic, the longer it takes to render the image 53 Dr. CK Tan, UMS

Bit Maps

It is stored as a set of bits in computer memory that define the color and intensity of each pixel in an image Created by digitizing images Created by digitizing images ( photo, art work)

or using PAINT programs ( PC Paintbrush, PaintShop Pro, etc.) Also called raster or pixel maps 54 Dr. CK Tan, UMS

Bit Maps

Advantages: Can display faster than vector graphics Good for reproducing images with complex variations in color, shading and detail Disadvantages: Require more disk space Fixed resolution

can lead to scalability problems 55 Dr. CK Tan, UMS

Image Depth

Image depth refers to the maximal number of colors used in bitmap Each pixel can have 1 or more bits of color information attached to it Bits Colors Uses 1 2 Text, line drawing 4 16 Simple drawings, graphics 8

256 Natural images 24 16.7M Photographic realism Dr. CK Tan, UMS 56

Image File Size

Size ( in bytes) = ( Height x Width x Color Depth) / 8 Sample file size for different images size and color depths: Monocrome: ( 640 x 480 x 1 bit) / 8 (

) / = 38 KB 256 colors: ( 640 x 480 x 8 bits) / 8 = 307 KB 16M colors: ( 640 x 480 x 24 bits) / 8 = 922 KB 57 Dr. CK Tan, UMS

Images : Issues

High quality images Big file size High

resolutions Image requirement will affect hardware and software selections including authoring and graphic software, video graphics adapter, disk space and data transfer rate 58 Dr. CK Tan, UMS

Techniques

Techniques for reducing image size: Reduce size of height and/or width of image Reduce the number of colors ( ex: image

depth) Image data compression 59 Dr. CK Tan, UMS

Image Compression

Data compression reduces file size by eliminating redundancy Compression involves two parts : compression and decompression called codecs Two types of data compression: Lossless output is exactly the same compression ( used for programs and data) (

done by PKZIP, stacker) 60 Dr. CK Tan, UMS

Image Compression

Second type of data compression: Lossy a set of data will undergo a loss of accuracy after compression. Typically used on image or graphics, animation, g p , , g audio and video

Eliminates info that is

difficult for our eyes to detect ( Ex: eye is less sensitive to change in color than it is to change in intensity Dr. CK Tan, UMS 61

Some graphic image formats

Bitmap ( . bmp) Internal format used by Windows Graphics Interchange Format ( . gif) . Used to transmit

and exchange images between platforms Joint p g Photographic Expert Group ( . jpg/. jpeg) Offers the greatest compression ( 10: 1 without visible loss) 62 Dr. CK Tan, UMS

Animation is the use of a computer to create movement on the screen ANIMATION Frame animation ( makes framedobjects move on

the screen) Morphing ( transition from one shape into another) Dr. CK Tan, UMS 63

The concept of animation is to : Bring to life Creating motion Breathe life into Inspirit inspire 64 Dr. CK Tan, UMS

2D animation software :

Animator Pro Rio Animator Animator Toons 65 Dr. CK Tan, UMS

3D animation software :

3D Studio Topas Playmotion Playmotion Flying fonts Lightwave 3DFX 66 Dr. CK Tan, UMS

AUDIOAudio can be any form

of recorded voice or music or both AUDIOAudio can be any form of recorded voice or music or both Whyisaudioused? Convey meaning provide extra channel of info to audience channel of info to audience Different learner, different learning strategies ( live web lecture) Add sense of realism, sensation Directing attention to important events

Facilitate communication Dr. CK Tan, UMS 67

Voice 68 Voice is analogue waves Voice is audio narration ( whispers, cries, shouts, etc) Expressed in decibels ( db) Expressed in decibels ( db) dB Watts Examples 195 2540m Saturn rocket 170 100,000 Jet engine 70 0.00001 Voice 30 0.000000001 Whispers

Dr. CK Tan, UMS

Terms related to audio

Volume is peak of the wavelength Frequency is the distance between the audio waves If 1000 waves are repeated in a second 1000 Hz or 1 KHz Sampling is the process of digitizing analogue signals 69 Dr. CK Tan, UMS

Terms related to

audio

There are 3 main sampling rate for audio 11, 22.05 and 44.1 KHz Sample size is either 8 or 16pl bit

Channel is either stereo or mono 70 Dr. CK Tan, UMS

Comparison

Comment Sampling rate Sample size Bytes CD Quality 44 KHz 16 bit 10 MB

Close to CD 22 KHz 16 bit 5 MB Voice quality 11 KHz 16 bit 2.5 MB Dr. CK Tan, UMS 71

Audio File Calculation

Formula File size = sampling rate X recording duration in second X ( Sample size in bits/ 8) X number of channels Example: 10 seconds

of recording at 22.05 kHz, 8 bit resolution and mono channel = 22050 x 10 x ( 8/ 8) x 1 = 220500 bytes 72 Dr. CK Tan, UMS

VIDEOVideo provides a rich and lively resource for multimedia According to Agnew & Kellerman ( 1997) , video is: video is:

a digital media that shows a sequence of still pictures which produces illusion due to movements of the pictures Dr. CK Tan, UMS 73

Analog video: continuous value sets that uses microwaves to produce moving images like what is watch on TV watch on TV it cannot be played on

a computer when enlarged, it does not influence the video quality 74 Dr. CK Tan, UMS

Digital video: consists discrete values between 0 and 1 it is played on a computer and pixelbased when enlarged, video quality drops 75 Dr. CK Tan, UMS

Importance of video

in education :

explains abstract concepts shows motion/animation shows the real situation shows the real situation provides interactions and responses ( interactive videos) gives affective teaching 76 Dr. CK Tan, UMS

Some common video file formats :

.avi .mpg mov .mov

.gif ( animated gif) Dr. CK Tan, UMS 77

WebAuthoring78 WebAuthoring78 Creating a Web site Design Homepage Use webauthoring programs Dr. CK Tan, UMS

Create Web Site

A web site is a virtual site hosted and administered by a Web Server You can can

apply for a free web site at : http: / / geocities yahoo com http: / / geocities. yahoo. com After submitting the eform, you will be given a username and password. Please write down your web site s URL ( address) 79 Dr. CK Tan, UMS

Create Web Site

Dr. CK Tan, UMS 80

Example of a homepage

A homepage is the main page that hosts your series of web pages. It usually consists of a menu with hyperlinks to various destination Dr. CK Tan, UMS 81

Web Authoring Programs

Also known as Web page editors or HTML editors HyperText Markup Language ( HTML) is a tagged language used by web browsers to display web pages Examples of Web page editors : MS Frontpage Macromedia Dreamweaver 82 Dr. CK Tan, UMS

Web Authoring Reminder

Homepage and web pages must

be confined to a folder All graphical objects/ pictures, audio and video files must first be copied into the same folder before they are hyperlinked 83 Dr. CK Tan, UMS

Upload To Web Site

All files in the folder must be uploaded to your registered web site Files are transported

to web site using File Transfer Protocol ( FTP) programs ( ) p g Examples of FTP programs : WS FTP Pro builtin FTP in Frontpage Dr. CK Tan, UMS 84

WS FTP Pro

Dr. CK Tan, UMS 85

W WWWWh hhhha

aaaat ttttt tttth hhhhe eeeee eeeex xxxxp ppppe eeeer rrrrt tttts sssss ssssa aaaay yyyya aaaab bbbbo oooou uuuut tttte eeeed ddddu uuuuc cccca aaaat tttti iiiio oooon nnnna aaaal lllls sssso oooof fffft ttttw wwwwa aaaar rrrre eeee The principle challenges in Interactive Multimedia ( IMM) are those of ( ) pedagogy and design

Hooper, 1988 Dr. CK Tan, UMS 86

PRESENT INFORMATION Pretest ARCS Strategy Dr. CK Tan, UMS 87 Interaction Media Time Keller sMotivationalModelKeller sMotivationalModelKeller sMotivationalModelKeller sMotiv ationalModel

Attention l RRelevance Confidence Satisfaction 88 Dr. CK Tan, UMS

An ideal multimedia team for Interactive Multimedia software production:

instructional designer hi d i graphic designer animator audiovideo experts programmer content experts Dr. CK Tan, UMS 89

Instructional Design is the science of creating detailed specifications for the development, implementation, evaluation and maintenance of situations that facilitate the learning of both large and ll it fbj t

tt tlll l small units of subject matter at all levels of complexity Adapted from Training and Instructional Design , Applied Research Laboratory, Pennsylvania State University Dr. CK Tan, UMS 90

Mastery Learning Model

Specify learning objectives Teaching and Learning Diagnostic evaluation Unit 1 Diagnostic evaluation Achieved objectives

? Unit 2 Enrichment Activities Remedial Activities Dr. CK Tan, UMS 91

Dr. CK Tan, UMS 92

Dr. CK Tan, UMS 93

Typical multimedia screen layout should have fixed locations for content area, navigational buttons and possibly menu. We must plan the layout so that

the content is presented with good balance. Divide the screen into regions ( Do layout analysis) . Dr. CK Tan, UMS 94

Some important screen design principles: Font: must be readable easily; with proportional spacing between characters Choose suitable background colour to produce a good contrast of your text (

foreground) . Use drop shadows text for ( foreground) . Use drop shadows text for photographic background Text and pictures must be arranged in such a way so that they look neat Always adopt a common look especially colour of text and buttons 95 Dr. CK Tan, UMS

Some important screen design

principles: Use metaphors for popular interfaces like next, previous or home buttons Example : Home Previous Next

Dr. CK Tan, UMS 96

Some important screen design principles: Interfaces must be userfriendly, functional and easytoremember and consistent in term of location Certain interfaces

can provide feedback after being clicked so that user know the after being clicked so that user know the progress of certain action Example: Save button Location of navigational buttons are usually fixed at one location throughout the presentation 97 Dr. CK Tan, UMS

Interactivity

Interactivity is the

most important aspect in learning Researches on interactive multimedia showed that interactivity is vital for showed that interactivity is vital for teaching and learning effectiveness Interactive multimedia can help learners to gain understanding and problem solving 98 Dr. CK Tan, UMS

Interactivity is

Allowing a continuous twoway transfer

of information between a computer and the person using it Phillips ( 1997) The process of empowering the user to control pow ng t pr the environment created by the computer Barker ( 1994) A necessary and fundamental mechanism for knowledge acquisition and the development of both cognitive and physical skills 99 Dr. CK Tan, UMS

Types of Interactivity

Sims ( 1996) describes 10 types of interactivity Object interactivity Objects are activated through mouse clicks or input devices Linear interactivity Forward and backward movements of electronic pages Hierarchical interactivity Freedom of movements to selected modules via a menu 100 Dr. CK Tan, UMS

Types of Interactivity ( cont )

Supporting interactivity Users are provided with help and messages ( simple to complex) Updating interactivity Problem solving with provided gp dialogue boxes ( discussion) Constructive interactivity The system creates a situation where objects manipulation can take place to achieve certain objectives 101 Dr.

CK Tan, UMS

TypesofInteractivity( cont ) Reflective interactivity Users are provided with answers from other users for comparison purpose and selfevaluation Hyperlink interactivity Users are provided with vast electronic resources in databases to solve problems dynamically Dr. CK Tan, UMS 102

TypesofInteractivity( cont )103 TypesofInteractivity( cont )103 Non-

immersive contextual interactivity Virtual reality type of interactions using all the above types of interactivity Immersive virtual interactivity Virtual reality type of dynamic interactions using all the above types of interactivity in a computer generated VR environment Dr. CK Tan, UMS

Computer Systems and Components p 104 Dr. CK

Tan, UMS

Microcomputer Hardware

System Unit I/ O Devices Secondary Storage Dr. CK Tan, UMS 105 The Motherboard ISA PCI Dr. CK Tan, UMS 106 The Motherboard ISA PCI Dr. CK Tan, UMS 106 Memory RAM ( Random Access Memory) holds programs and data temporary

volatile memory ROM ( Read Only Memory) y y) ( fixed startup instructions CMOS ( Complementary metaloxide semiconductor) flexible startup instructions Dr. CK Tan, UMS 107

RAM (Volatile Memory)

Dr. CK Tan, UMS 108

Memory Measure U

UUUUUUUU n nnnnnnnn i iiiiiiii t tttttttt C CCCCCCCC a aaaaaaaa p pppppppp a aaaaaaaa c cccccccc i iiiiiiii t tttttttt y yyyyyyyy Kilobyte ( KB) 1,024 bytes M b t ( MB) Megabyte ( MB) 1024 KB1024 KB Gigabyte ( GB) 1024 MB Terabyte ( TB) 1024 GB 109 Dr. CK Tan, UMS

Input

Devices

Mouse Trackball Touchsurface Touch screen Light pen Joystick 110 Dr. CK Tan, UMS

Output Devices

CRTs ( CathodeRay Tubes) FlatPanel or LCD ( Liquid Crystal Display) passivematrix and activematrix ( TFT) Data projectors

( LCD Projectors) 111 Dr. CK Tan, UMS

Printers

Inkjet Printer uses spray technology Laser Printer uses laser beam to produce images Thermal Printer uses heat elements to produce images 112 Dr. CK Tan, UMS

Printers 113 Dot

matrix uses a series of small pins ( print head) Chain printer connected to several computers Plotters specialpurpose printers Dr. CK Tan, UMS

Hard Disks

Also known as fixed disk Metallic disks with multiple platters Fast information ( speed ranges from 3600 7200 rpm)

Readwrite write heads heads Read Capacity: ranges from 500 GB to 1 TB Dr. CK Tan, UMS 114

Human hair dust particle fingerprint smoke particle disk head p disk surface M MMa aat tte eer rri iia aal lls sst tth hha aat ttc cca aan nnc cca aau uus sse eea aah

hhe eea aad ddc ccr rra aas ssh hh Dr. CK Tan, UMS 115

Optical Disks It uses a laser beam to read light reflection from flat areas ( lands 1s) and bumpy areas ( pits 0s) . It is used for permanent storage 2 types: CD-

ROM ( Compact discreadonly memory) DVDROM 116 Dr. CK Tan, UMS

Scanners ( useful for scanning printed graphics) Digital cameras ( for capturing images) Digital video cameras ( for capturing full motion digital video for video clips production) Webcams videoconferencing/capture motion video/ still images Graphics

accelerator ImportantHardwareforMultimedia117 Dr. CK Tan, UMS

Software

A program consists of the stepbystep instructions that tell the computer how to do its work Convert data ( unprocessed facts) into information ( processed facts) Two major kinds System software Application software Dr. CK Tan, UMS 118

Systems Software

Behind the scenes activities Designed to handle Technical details Where programs stored How commands executed Where files saved How output handled 119 Dr. CK Tan, UMS

Categories of OS

Hundreds of operating systems Three basic categories g

Embedded handheld Network OS linked computers Standalone OS desktop 120 Dr. CK Tan, UMS

Major OS

Windows 80% of market Mac OS powerful and easy to use UNIX network; originally designed for UNIX network; originally designed for

Web LINUX non proprietary; free off Web ( potential for outsourcing of software) Dr. CK Tan, UMS 121

Utilities

Hard disk crashes Antivirus programs Computer freezeups Decrease operation slow downs 122 Dr. CK Tan, UMS

Device drivers

Specialized programs Loaded into memory each time y When you add a new device, you must install the device driver 123 Dr. CK Tan, UMS

Language translators

programming language into computer language Translators and compilers 124 Dr. CK Tan, UMS

Application Software

Used by many people Basic applications Common tasks Examples of application software: Examples of application software: word processor ( MS Word) presentation ( MS PowerPoint) spreadsheet ( MS Excel) database ( MS Access) web authoring tool ( MS FrontPage) Dr. CK Tan, UMS 125

Software Suites

Convenient and effective data sharing Less expensive Mi More expensive Most Widely Used Microsoft Office Corel WordPerfect Suite Lotus SmartSuite Dr. CK Tan, UMS 126

Program Development

Program development consists of a series of steps programmers use to build computer programs

One of the most popular program development method is Program Development Life Cycle 127 Dr. CK Tan, UMS

Program Development

128 Dr. CK Tan, UMS

Internet

It is used for global communication, moving ideas and information. Cyberspace concepts ( virtual environment)

Started with ARPANET ( Advanced Research Project Network) by USA in 1969

Known as WWW, World Wide Web in 1992 at CERN ( Center for European Nuclear Research) in Switzerland Dr. CK Tan, UMS 129

Wired Connections

Telephone lines Coaxial cable Fiberoptic cable Dr. CK Tan,

UMS 130

fiberoptic 26,000 coaxial 80 NumberofConnectionsDr. CK Tan, UMS 131 twistedpair 1 fiberoptic 26,000 coaxial 80 NumberofConnectionsDr. CK Tan, UMS 131 twistedpair 1 Wireless Connections Microwave Dr. CK Tan, UMS 132 Satellite Wi-Fi How to be connected to internet

Internet service providers

( ISP) National ( Streamyx, Jaring) Wi l i Wireless service providers DIGI, Celcom, Maxis Dr. CK Tan, UMS id 133 How modems work ?

Dr. CK Tan, UMS 134

Network Types

Local Area Network ( LAN) networks with computers and

peripheral devices within the same building Metropolitan Area Network ( MAN) a networks of LANs Wide Area Network ( WAN) integration of LANs and WANs countrywide/ worldwide networks 135 Dr. CK Tan, UMS

Internet Applications

Communicating Shopping Researching Entertainment

Education Dr.

CK Tan, UMS 136

Uses of internet for education

Elearning Lecture notes, discussion board, online exam Education portal LMS, Cikgu. net (( chats, discussion, online kg tuitions)

Information showcase Personal websites/ homepage Educational shareware Ex: hotpotatoes ( for building online

quiz) Dr. CK Tan, UMS 137

Web 2.0 The concept of "Web 2.0" began with a conference brainstorming

session between O'Reilly and MediaLive International Web 1.0 Web 2.0 DoubleClick -> Google AdSense Ofoto -> Flickr Akamai -> BitTorrent mp3. com -> Napster Britannica Online -> Wikipedia

p personal websites -> blogging evite -> upcoming. org and EVDB domain name speculation -> search engine optimization page views --> cost per click screen scraping -> web services publishing -> participation content management -> wikis systems directories (taxonomy) -> tagging ("folksonomy" ) Stickiness -> syndication Dr. CK Tan, UMS

138

Advantages of Social Networking Democratization of media Relationships and conversation Creativity and remix culture Embrace your passion and identity Community, sharing, and connecting Increase transparency in government and organizations Disadvantages Too much content still gets overlooked ( lacks quality, what is true? ) Anonymity can create hate culture

Teenagers overengaged in social networking ( social sickness, etc) Can lead to danger when meeting strangers 139 Dr. CK Tan, UMS

WHAT IS A BLOG? A weblog or blog is a personal diary or a collection of links to you. In simple terms, a bl blog iis a website, where you write stuff on

i i ff bh an ongoing basis. New stuff shows up at the top for visitors comments. ( Susana & Sergio 2007) Dr. CK Tan, UMS 140

WHAT IS FACEBOOK? The Facebook platform allows developers to create Web applications that integrate with Facebook s social network and are delivered via

the Facebook Web site. Facebook users can browse available applications and enable the ones they wish to use, granting them permission to access a subset of their account data ( PennState 2007) . 141 Dr. CK Tan, UMS

WHAT IS GLOGSTER? A Glog is an interactive visual platform in which users create a

poster or web page containing multimedia elements including: text, audio, video, images, graphics, drawings, and data ( http://edu. glogster.com/what-isglogsteredu/) . Glogster EDU is the leading global education platform for the creative expression of knowledge and skills in the classroom and beyond. 142 Dr. CK Tan, UMS

http: / /cktanums.edu.glogster.com/ drcktan/ Dr. CK Tan,

UMS 143

WHAT IS WALLWISHER?

Wallwisher is a collaborative tool that lets students be prosumers rather consumers ( Sharon Tonner, 2011) . Wallwisher is an Internet application that allows students to post their thoughts on a common topic using post their thoughts on a common topic using electronic sticky notes

on a shared digital wall. Students can type a maximum of 160 characters per electronic sticky note that can incorporate an image, audio or video using the appropriate web address link ( Sharon Tonner, 2011) Dr. CK Tan, UMS 144

Dr. CK Tan, UMS 145

WHAT IS YOUTUBE

YouTube is a popular video sharing website where users can upload, view, and share video clips. YouTube allows users to post and tag videos, watch those posted by others and tag videos, watch those posted by others and

post comments. YouTube ties into several blogging applications, giving users a quick way to

blog about a particular video and include a link to it. Dr. CK Tan, UMS 146

Other Web 2.0 tools blogspot. com ( blog) wikispaces. com ( sharing) google docs ( sharing) ning ( social network) jing ( video) slideshare ( sharing) skype (

video) twitter ( social network) Dr. CK Tan, UMS 147

Breach of privacy and security

Is email secure? snoopware, spyware, phishing Stealing confidential info ( HP numbers, etc) Browser records pages visited Cookies record Times and pages visited Other private information Dr. CK Tan, UMS

148

Privacy Laws

Freedom of Information Act ( 1970) Privacy Act ( 1974) Computer Fraud and Abuse Act ( 1986) ( 1986) Computer Abuse Amendments Act ( 1994) outlaws transmission of virus Software Copyright Act ( 1980) 149 Dr. CK Tan, UMS

Computer

Threats

Thefts ( organised crime) Hardware, data, computer time Software piracy Hackers ( for fun and challenge) and crackers ( for malicious purposes) Natural disasters Dr. CK Tan, UMS 150

Computer Security

Viruses Damage to computers, programs or files 3 types:

Virus ( damage/ delete system files) Worm ( selfmultiplying and spreads) Trojan ( can be virus or worm) 151 Dr. CK Tan, UMS

Security Measures

Protecting Information Encrypting messages Restricting access ( password and firewall) Dr. CK Tan, UMS 152 ( password and firewall)

Anticipating disasters ( disaster recovery plan) Backing up data Antivirus Ergonomics

Ergonomics study of human factors related to things people use Physical Health Physical Health Avoiding eyestrain and headache Avoiding back and neck pain Avoiding effects of electromagnetic fields 153 Dr. CK Tan, UMS

Isu-isu Semasa ICT

Dr. CK Tan, UMS 154

ISU 1 Keselamatan dan Ancaman ICT Jenis Ancaman kecurian perkakasan ICT k k peii cetak rompak perisian serangan virus/ ulat pencerobohan sistem komputer bencana alam Dr. CK Tan, UMS 155

ISU

1 Keselamatan dan Ancaman ICT Langkah yang boleh diambil memohon hakcipta untuk perisian i ba k k peii operasi membanteras cetak rompak perisian pasang firewall / antivirus pasang kata laluan pasang perkakasan komputer di tempat yang bebas daripada bencana alam mengupah pengawal keselamatan Dr. CK Tan, UMS 156

ISU

2 Pemisahan Digital ( Digital divide) Pemisahan digital merujuk kepada perbezaan tahap kemahiran mengguna komputer di kalangan penduduk dalam zonzon geografi yang berbeza. Di Malaysia, dianggarkan bahawa hanya 59.0% penduduk sahaja mempunyai akses internet ( Laporan MCMC 2008) Contohcontoh pemisahan digital bilangan pengguna internet yang besar di bandar berbanding dengan luar bandar

bilangan pengguna memiliki komputer yang besar di bandar berbanding dengan luar bandar bilangan sekolah mempunyai makmal komputer yang lengkap di bandar berbanding dengan luar bandar 157 Dr. CK Tan, UMS

ISU 2 Pemisahan Digital ( Digital divide) Sebabsebab pemisahan digital penduduk di bandar mempunyai pendapatan yang lebih tinggi berbanding dengan

luar bandar penduduk di bandar mempunyai kemudahan infrastruktur yang lebih ( contoh talian telefon) berbanding dengan luar bandar taraf pendidikan penduduk di bandar yang lebih tinggi ( lebih terdedah kepada teknologi komputer) berbanding dengan luar bandar ( lebih suka bertani) kurikulum sekolah 158 Dr. CK Tan, UMS

ISU 2 Pemisahan Digital ( Digital divide)

Langkahlangkah yang boleh diambil kerajaan memasang lebih banyak kemudahan infrastruktur telekomunikasi di luar bandar seperti telefon, kemudahan internet tanpa wayar, mobile internet kiosk, etc Kementerian Pendidikan tingkatkan program literasi komputer di kalangan pelajar sekolahsekolah luar bandar tingkatkan promosi pemilikan komputer jenis jenama murah untuk penduduk di luar bandar melalui skema mudah bayar, etc ubahsuai kurikulum

sekolah untuk mewajibkan pendidikan untuk meningkatkan literasi komputer pelajar Dr. CK Tan, UMS 159

ISU 3 Traditional Learning versus ELearning

Scenario

Traditional learning merangkumi proses penyampaian maklumat/ isi kandungan secara bersemuka di bilik darjah/ dewan kuliah Elearning atau online/ mobile learning merupakan proses penyampaian maklumat/ isi kandungan

melalui internet. Ia juga lebih dikenali sebagai pembelajaran tanpa sempadan Sering didebatkan bahawa traditional learning lebih popular dan efektif manakala elearning pula lebih menjimatkan kos dan kuasa penyebaran maklumat yang meliputi kawasan geografi yang lebih luas Dr. CK Tan, UMS 160

ISU 3 Traditional Learning versus ELearning Perbandingan Tradisional Learning

ELearning Kekurangan ruang apabila pelajar meningkat Boleh menerima ramai pelajar serentak mengikut kapasiti Pelayan Komputer Merupakan pembelajaran synchronous Isi kandungan pembelajaran kurang menarik Pembelajaran asynchronous ( nota + forum atas talian) dan synchronous ( chat / video conferencing) Isi kandungan pembelajaran menarik seperti multimedia Dr. CK Tan, UMS 161

ISU 3 Traditional Learning versus ELearning Perbandingan Tradisional Learning ELearning Satu kaedah pembelajaran Kaedah pembelajaran iaitu kuliah atau pengajaran dipilih oleh pelajar; forum, iaitu kuliah atau pengajaran guru kepada pelajar sahaja dipilih oleh pelajar; forum, kaedah latih tubi, multimedia Isi kandungan statik Isi kandungan beranimasi Bilangan graduan

dihasilkan kurang Bilangan graduan dihasilkan ramai 162 Dr. CK Tan, UMS

ISU 4 Penggunaan komputer merosakkan kesihatan Jenisjenis ancaman kepada kesihatan Bekerja berjam-jam lama di hadapan komputer akan: merosakkan mata ( extensive ray emitted from monitor) menyakitkan tulang leher/ belakang jika kerusi kurang sesuai dipakai 163 Dr.

CK Tan, UMS

ISU 4 Penggunaan komputer merosakkan kesihatan Jenisjenis ancaman kepada kesihatan kepenatan tangan dan jari kerana menaip jika papan kekunci tidak selesa digunakan papan kekunci tidak selesa digunakan

mengalami bahu bongkok jika ketinggian meja komputer tidak sesuai Bidang penggajian yang cuba mengatasi masalah kesihatan akibat penggunaan komputer

dinamakan ergonomics 164 Dr. CK Tan, UMS

ISU 5 Masalah kecapaian internet secara broadband Antara masalah yang dihadapi ialah: broadband penetration rate yang rendah ( < daripada 25% daripada penduduk) broadband penetration rate untuk sekolah adalah tinggi ( 7474 daripada 9176 sekolah di Malaysia) ( Sumber: NST, 30 Mac 2005) berapa ramai

guru mempunyai akses internet broadband ? 165 Dr. CK Tan, UMS

ISU 5 Antara kebaikan broadband ialah: pencapaian bahan pembelajaran multimedia yang cepat dapat muat turun bahanbahan multimedia ( audio, video, grafik) dapat guna kemudahan 3G dan 4G 166 Dr. CK Tan, UMS

ISU 5

Langkah menggalakan penggunaan internet ialah: turunkan yuran penggunaan ( Contoh: streamyx RM 66 sebulan hanya mampu diguna oleh penduduk bandar) turunkan harga PC atau laptop wajibkan aktiviti P & P berasaskan komputer ( Contoh: program Intel Teach yang guna teknologi web 2.0) Banyak kemudahan talian telefon di luar bandar atau turunkan kadar bulanan internet tanpa wayar

( Contoh: DIGI, Celcom, Maxis) 167 Dr. CK Tan, UMS