• Tidak ada hasil yang ditemukan

Web-Based Instruction

N/A
N/A
Nguyễn Gia Hào

Academic year: 2023

Membagikan "Web-Based Instruction"

Copied!
281
0
0

Teks penuh

In our study, neither in-person instruction nor online instruction was found to be more effective. To most, it may seem obvious what is included in the discussion of Web-based Instruction (WBI).

Distance Education/Learning

This chapter is not intended as a comprehensive treatment of the various topics, but as a brief introduction. In the years since the introduction of the World Wide Web in 1993, the use of the Internet for teaching has grown tremendously.

Distributed Learning

Using these criteria, it is easy to see the variety of teaching methods included in the definition of distance education: correspondence courses, videotaped classes, and audio classes where students and instructors communicate by telephone are just a few examples. Interaction between an instructor and students through a print-based correspondence course is much more difficult to maintain than through Internet technologies.

The Internet and the Web

However, within this category there are a range of technologies that can be used to transfer media. For example, digital media can be downloaded over the Internet, stored on a CD-ROM or DVD, or transmitted via satellite.

Figure 1.1 shows how different digital multimedia technologies fall into these two structures.
Figure 1.1 shows how different digital multimedia technologies fall into these two structures.

P E DAG O G Y

Developing web-based learning materials for a variety of learning styles can be worthwhile, but there is no doubt that it can be a time-consuming and expensive proposition. Concept-based. The goal of a problem-based approach is to enable the user to transfer what is learned into concepts that can be transferred for future use elsewhere.

FIGURE 2.2 TeenLinks
FIGURE 2.2 TeenLinks

General Research or Reference Skills

Online Catalog Skills

Another example of a general research skills tutorial from the College of DuPage Library is shown in Figure 2-5. This academic tutorial introduces students to identifying types of information, determining the right type of information for their needs, and the available search tools to use.

Database- or Software-Specific Search Skills

The University of Wisconsin System Women's Studies Librarian's Office has created a tutorial that teaches students how to search Contemporary Women's Issues in Lexis-Nexis. Because Lexis-Nexis is an aggregator of many databases, skills learned in this tutorial can be transferred to other disciplines.

Discipline- or Course-Specific Research Skills

Assignment-Specific Tutorials

Internet Instruction

Communication on the Internet One of the most important uses of the Internet for many people is to communicate with others. Electronic files (usually audio and video) are made available for download over the Internet.

FIGURE 2.11 Internet Safety
FIGURE 2.11 Internet Safety

General Library Orientation

Estep mentions his experience of teaching an information literacy class about weblogs by having students evaluate the information found on selected political weblogs.16 Blogs will be discussed in more detail in chapter 7. However, it does allow anyone to edit, delete or edit content, including work from previous authors.

Information Literacy Courses

Teaching students about blogs—their history, purpose, and potential—can become a component of information literacy instruction. Recognition of the need to educate people to be information literate is by no means limited to academia.

Academic Integrity and Intellectual Property

UCLA Library has developed an introduction to the issues surrounding ethics and information: "Carlos and Eddie's Guide to Bruin Success with Less Stress" (figure 2.16). This interactive tutorial covers several important topics: intellectual property, file sharing, documenting and citing sources, avoiding disaster through organization and time management, and UCLA policies on academic integrity.

Productivity Software Applications

Haverkamp en Kelly Coffey, "Instruction Issues in Special Libraries."Special Libraries Management Handbook: The Basics, http://www.libsci.sc.edu/bob/class/clis724/. Susannah Fox, "Oudere Amerikanen en het internet" (Washington, DC: Pew Internet en American Life Project, 2004), http://www.pewinternet.org/pdfs/PIP_Seniors_Online_.

Needs Analyses

The first step in the cycle is therefore to perform needs analyzes of the customer, audience, stakeholders, information and resources. Determining information needs involves researching, selecting and arranging the content to be included in the tutorial.

Design and Prototyping

The next step in the design process is to transform the design ideas in the storyboard into actual models of the site. The production phase of the cycle is the one that most people think about when they decide to create a web project.

Marketing Strategy

It includes tasks such as developing a marketing strategy, indexing the site, maintaining the site and planning for the next version of the tutorial.

Site Indexing

Site Maintenance

Planning for the Next Version

Project Proposal

Timeline

Project management software is available to track timelines (such as Microsoft Project), but this can be done without investing in expensive software. A spreadsheet will work fine and a Google search will return links to free project management software.

Budget

If you do not have trained staff, application training may need to be included in the budget. But if this project marks your entry into the Web production arena, significant funding may be needed to get you going.

Staffing and Teamwork

A storm develops when group members reach a level of comfort with each other and may begin to compete for status within the group and argue. Rules for achieving goals are established, roles are defined, and the team is ready to get down to business.

Resource Allocation

Performance is the stage in which the team begins to function as a system and focuses attention on the work or content. Coaching staff to put the good of the team ahead of individual considerations is a skill that requires patience, maturity and a good sense of humor.

Reports

Client Relations

Quality Control

As discussed in the previous chapter, analyzing hardware and software needs is an important part of the pre-production phase of your web project. However, you do need to worry about what hardware and software your audience is using to access your tutorial.

Hardware Issues

This is measured in megahertz (MHz) or gigahertz (GHz), depending on the age of the computer. If part of the tutorial will convey important information in audio format, you'll need to decide how to deliver it in public settings (perhaps providing access to headphones).

FIGURE 4.1 Screen Size Tester
FIGURE 4.1 Screen Size Tester

Browser Issues

Although computers manufactured since 2000 have GHz processors, there are still plenty of computers running on the slower MHz processors. Remember that your tutorial is not the only thing running on a computer at any given time.

FIGURE 4.2 Browser Chart
FIGURE 4.2 Browser Chart

Access Method

Having the right development hardware to create a multimedia project will make the project go much more smoothly. This is a general discussion of the elements to consider when choosing the hardware used.

Computer Selection

An important specification to be aware of is the speed at which the drive records. The specs will tell you three speeds: how fast it records, writes and records (in that order).

Peripherals Selection

Resolution The higher the resolution - the number of pixels (squares) per inches - on the screen, the sharper the image. Image quality. Image quality depends on many things, but the most important determinant is the resolution of the CCD.

HTML/Web Editors

Two examples of this type of editor are Macromedia HomeSite (for PC, http://www.macromedia.com/software/homesite/) and Bare Bones Software's BBEdit (Mac, http://www.barebones.com/products/ . bbedit/index.shtml). Two examples of a WYSIWYG editor are Macromedia Dreamweaver (for PC and Mac, http:// . macromedia.com/software/dreamweaver/) and Adobe GoLive (for PC and Mac, http:// .. www.adobe. com/products/golive/main.html).

Content Management Systems

An example of this integrated approach is Macromedia Fireworks (PC and Mac, http://www.macrome dia.com/software/fireworks/). About.com's topic site on graphics software (http://graphicssoft.about .com/od/findsoftware/) is a good resource to use to find the appropriate applications for your project.

Illustration Software
Illustration Software

Animation Applications

Apple also has an authoring tool, QuickTime Pro (http://www.apple.com/ . quicktime/), that you might want to consider. A good resource for the latest information on streaming technology, including authoring software, is Streaming Media (http://www.streamingmedia.com).

Audio Software

There are reasonably priced full-featured editors available: Adobe Audition, formerly Cool Edit (PC, http:// . www.adobe.com/products/audition/main.html) and SmartSound SonicFire Pro (Mac, http:// www.smartsound.com/sonicfire/index.html) are just two examples. Hitsquad (http://www.hitsquad.com/.smm/cat/FORMAT_CONVERTERS/) offers downloadable shareware encoders for all platforms.

Video Editing Applications

Sound Forge is another well-regarded digital audio editor (http://mediasoft ware.sonypictures.com/products/soundforgefamily.asp). Make sure that any audio editor you choose supports a wide variety of audio files (see Chapter 6 for more information on audio files).

Presentation Tools

If you already have sound files and just need to convert them to another format, a standalone format converter (called a batch encoder) is a more cost-effective solution than buying audio editing software. If you decide to use presentation software, make sure it supports the various file formats on the web, and be prepared to enjoy the interactivity that can only involve the user's ability to select a link to continue.

Authoring Systems

RealNetworks has developed a slideshow product that works well for incorporating animated images and text into a video slideshow.

Course Management Systems

A good tool to help compare the features of many course management systems can be found at EduTools (http://www .edutools.info/course/). Some of the major players in this market are Blackboard.com (http://www.black board.com), WebCT (http://www.webct.com), and TopClass (http://www.wbtsystems.com). ).

Specialty Tools

A new framework that is becoming increasingly common in CMS and LMS is SCORM (Shareable Content Object Reference Model), a new XML-based standard designed to ensure interoperability between systems.

Database Applications

The needs you determine will help you decide whether you need an enterprise-level database solution such as Oracle (http://www.oracle.com) or Microsoft SQL Server (http://www.microsoft.com/ sql/ default.mspx), or a more modest solution such as Microsoft Access (http://office.microsoft.com/en-us/FX aspx). Do you have the internal expertise to use an open source solution (software that is freely available to use and modify) such as MySQL.

Web Programming and Scripting Tools

Integrated Application Server and Authoring Tools

A well-known example of an application server is Macromedia's ColdFusion (http://www.macromedia.com/software/cold fusion/). One of the first steps in the pre-production phase is audience needs analysis, as discussed in Chapter 3.

Instructional Design

Open versus Closed Structure

Many web users have become accustomed to having second browser windows open to take them to a new site, but leaving the original window open for easy return. Many web editor software programs can create these popups without knowing a specific script.

Writing for the Web

Because people don't like reading text on a screen, they tend to scan a page to pick out key words and ideas. Notice in figure 5.3 that scannability has been increased by using headings, boldface, highlighted keywords and bulleted lists.

Navigation should allow users to leave the screen and return to the previous one. This style of writing lends itself to the concept of breaking down or dividing material into small segments that are easier to digest.

Qualities of Successful Navigation Systems

Savvy users of the web want to feel in control of their experience. Navigation in an instructional website is second only to content in importance to the success of the instructional design.

Types of Navigation Systems

The text menu on the left side of the screen acts as a local navigation system within the current module. A sitemap link at the bottom of the screen will take the user to a hierarchical view of the content.

Navigation Methods

Other links at the bottom of the screen also return the user to the main list of other available tutorials. In Figure 5.11, see the breadcrumb arrow at the top of the content area.

Tabs have become a popular way to separate content into different categories. See the top right of figure 5.7 for an example.
Tabs have become a popular way to separate content into different categories. See the top right of figure 5.7 for an example.

Placement of Navigation Tools on the Screen

If a designer wants to ensure that what is placed on the right side of the screen is visible to everyone, then the design must be set to adapt by percentage if the interface takes up the entire screen. Instead of designating a specific number of pixels for the screen based on width and height, the screen layout should be specified as a percentage of the screen width and height.

Linear versus Nonlinear Navigation

Because screens are drawn from top to bottom and left to right, it is preferable to locate navigation tools in the upper or left areas of the screen to ensure that they are visible to everyone.

Frames as a Navigation Device

First, the URL that appears at the top of the browser is actually the frameset address, a document that specifies the size and location of each frame. If a page from an external site is displayed in one of the frames and users try to bookmark it, they will end up bookmarking the frame's original document.

FIGURE 5.13 Linear Navigation
FIGURE 5.13 Linear Navigation

The need to bookmark a specific page of content within a tutorial isn't as pressing as it might be on a general site, and most users will probably want to set the bookmark to the home page of the tutorial. The static navigation menu is visible at all times and provides an easy way for students to return to the instructions.

Layout Tables

Align the table in the middle of the page so that the extra screen space is the same on the left and right side of the table. If you use tables, be aware that the contents of any given table will not appear until the end table tag is downloaded to the browser.

Cascading Style Sheets

The style in the document header is more important than the style set in the external .css file. The selector is h1 and has five statements in the statement block: position, top, left, color, and font-family.

Extensible Stylesheet Language (XSL)

Browser support for CSS is growing, but don't expect support in versions of Internet Explorer and Netscape Communicator older than 4.0. CSS2.1 support is best in standards-compliant browsers such as Opera, Mozilla, and Firefox.

Simplicity and Clarity

Guidelines for designing a visually appealing site exist, of course, but due to the wide spectrum of taste and creativity, they are open to much more flexible interpretation than the UID guidelines. This section introduces some of the key visual design elements to consider when designing your tutorial.

White Space

Color

A complementary color scheme is one that starts by using two colors that are opposite each other on the color wheel and then includes hues, shades, and so on to round out the colors. A triadic color scheme consists of three colors selected by drawing an equilateral triangle on the color wheel.

Figure 5.20 illustrates (even with the gray scale used here) that the high contrast is more easily read.
Figure 5.20 illustrates (even with the gray scale used here) that the high contrast is more easily read.

Highlighting

Colors for unvisited links should be more vibrant, brighter and more saturated than those for visited links, which should look 'used' (dull and faded).”7.

Backgrounds

Instead of an image automatically moving back and forth across the page, CSS2 allows an author to specify whether the image should be repeated or not, or displayed horizontally or vertically for one row, and it allows placement and positioning of a single image on the page. Value statements for positioning an image on the page are similar and can be viewed on the W3C site (http://www.w3.org/TR/CSS21/colors.html#q2).

Table labels and some headings Only in conjunction with a hyperlink
Table labels and some headings Only in conjunction with a hyperlink

Linking

Typography

If they have browsers that don't support CSS, some of the following solutions may help. Due to the limitations of rendering fonts on the web, web designers often turn to graphics to ensure that the font style they have chosen is displayed exactly as intended.

Elements embedded in an HTML page must be directly accessible or compatible with assistive technologies. The W3C has also compiled a page with links to tools that can be used to evaluate, repair, and transform pages to meet accessibility rules (see http://www.w3.org/ . WAI/ER/existingtools.html).

Visual-Based Web Editors

Optimization Tips

Optimization Tools

Since the web is a multimedia environment, it is easy to envision incorporating multimedia into an educational tutorial to enhance the learning experience. When thinking about how and when to integrate multimedia into your online instruction, there are several considerations to make.

Benefits and Limitations of Multimedia

The spatial contiguity principle. Students learn better when text and graphics on the screen are physically integrated. Redundancy principle. Pupils learn better from animation and narration than from animation, narration and text on the screen.

Appropriateness

For example, you can describe what students should expect to see when they run a search, but showing a screen capture image of what is described allows students to associate the description with a representation of the screen they will see. To better illustrate the options, a screen capture of the email and storage options is included.

Multimedia Considerations

However, almost all illustration programs offer the ability to convert a vector image into a raster image so that it can be viewed on the web. While there are many formats that can be used to create computer graphics, only a limited number of them are supported by browsers for viewing on the web.

FIGURE 6.10 Vector Images
FIGURE 6.10 Vector Images

Audio

Because it is the native audio file format for the platform that has the vast majority of presence on the Internet, it is common to see. Because it is not compressed, WAV is the preferred format for storing archive versions of audio.

Animation

The professional version includes all the features of Flash, plus it can be used to create forms, data-driven applications and high-quality videos. A big advantage of layer-based animation (besides the ease of writing) is that a plug-in is not required for display because the animation script is part of the HTML page code.

Figure 6.19 illustrates the construction of an animated GIF in JASC Animation Shop.
Figure 6.19 illustrates the construction of an animated GIF in JASC Animation Shop.

Video

To learn more, visit the project website (http://www.web3d.org), which provides an FAQ along with information about the specifications and available tools (viewers, author, and developer). More than fifty file formats can be imported and more than twenty-five can be exported (see http://www.apple.com/quicktime/pro/specs.html).

FIGURE 6.24 QuickTime Movies
FIGURE 6.24 QuickTime Movies

QTVR

As mentioned earlier, QuickTime has been chosen as the basis for beginning the development of the MPEG-4 (.mp4) standard. Making an action movie that takes place over time on a computer screen is achieved with specialized software that acts as a video recorder.

Streaming Media

To include streaming media on a web page, you can provide a text or graphic link or embed the file in an HTML document so that it appears as part of the web page. In addition, as already mentioned, QuickTime is heavily involved in the development of the MPEG-4 standard, which will include streaming technology.

SMIL

ASF requires a server component, specifically the Windows Media Services streaming server, to deliver the file. A simple definition of interactivity is "a dialogue that occurs between a human and a computer." It's easy to see that this can encompass a wide range of possibilities when you start to consider what forms interactive web-based learning can take.

Individual Interaction

This may mean that the student has some control over the order, pace and content of the teaching. The level of interactivity depends very much on how the teaching material is presented to the student on the computer screen.

Social Interaction

The interaction can take place in various ways, which will be discussed in the next section. Social interaction can be achieved both synchronously and asynchronously through avenues including e-mail, chats, discussion forums, virtual experiences, and blogs.

Basic Hyperlink Interaction

Deciding what level and types of interactivity to include in your teaching will be influenced by the scope and goals of your project and the expertise of your development staff. See the table in Figure 1.1 for the synchronous and asynchronous types of interactions you can expect in online instruction.

Communication

Online forms can be programmed to process information available to the instructor or provide immediate feedback to the student. With this type of form, the results are communicated only to the person performing the assessment;.

Gambar

Figure 1.1 shows how different digital multimedia technologies fall into these two structures.
FIGURE 2.2 TeenLinks
FIGURE 2.11 Internet Safety
FIGURE 2.12 RSS and Weblogs
+7

Referensi

Dokumen terkait

Based on the table above, three (8.57%) students was strongly disagree about how big tense would the students get if a foreigner asked for directions in English, four (11.4%)