Chapter 12: Web Authoring Tools Section V: Using Multimedia Authoring Tools to Enhance Learning Chapter 12: Web Authoring Tools
Learner Objectives At the completion of study, learners will be able to: discuss research that supports the development of usable, accessible web design. use terminology associated with basic web design. describe various methods used to create web pages and the pros and cons of each method. establish a web account, a public_html folder, and create a homepage (index.html) create a folder structure for the organization of web files, transfer files and work with graphics discuss ethical and legal use of images and files in a web environment. distinguish between information suitable for school versus classroom web sites.
Learner Objectives, cont’d At the completion of study, learners will be able to: examine classroom web sites that serve as communication, showcase, and instructional tools for students and parents. identify elements that facilitate accessibility in web pages plan, design, and publish an accessible “classroom” website to serve as a communication and resource tool for students and their parents for curricular purposes.
Basics: What is a web page? A web page is an document written in HTML code and uploaded to a remote server for others to access on the WWW. group of related web pages make up a web site web pages are multimedia documents and contain text and graphics. Some contain audio and video clips. web sites are non-linear and are navigated with hyperlinks the entry to a web site is the homepage which is named index.html or (default.html) The server administrator will explain how to name the homepage.
Basics: Benefits of web publishing There are multiple reasons for schools, teachers AND students to design web pages. cost of web publication vs.. print-based color is free on web distribution instant revisions ability to include multimedia elements ability to archive documents without stacks of paper ability to link students to huge amounts of information
Basics: Information for School Sites The information on school sites is general in nature and apply to the entire population at the school. Typical information categories for school sites general information school administration school policies calendar of events extracurricular activities school newsletter parent organizations Within each category, there are sub-categories (see book) and should be decided for each school.
Basics: Information for Teacher Sites The information on teacher sites serves to communicate with students, parents and others. Typical information categories for teacher sites general information bio page instructional information showcase of student work class newsletter always links to school homepage and origin (faculty page) Within each category, there are typical sub-categories (see book) and others to be decided by teacher-designer.
Basics: Methods for Creating Pages Web pages are created using one of four methods: Writing HTML code Using a HTML editor Using a WYSIWIG editor Using a template or wizard (online) Let’s take a closer look at each of the methods.
Basics: Writing HTML code Initially all web pages were created by writing HTML code. extremely time-consuming no longer mandatory written with a series of “mark-up” tags mark-up tags have two parts opening tag <title> ending tag </title>
Basics: Standard Mark-up Code Standard mark-up code is the minimum code required for all web pages. <html> <head> <title> untitled document </title> </head> <body> Major part of information is here. </body> </html>
Basics:HTML editors HTML editors allow authors to create/format a web page using a menu but there are significant limitations to design options. Examples Coffee Cup: download a trial version for Windows NoteTab: download a trial version for Windows
Basics: WYSIWYG editors What You See Is What You Get (WYSIWYG) is a group of editors that allows the user to work in a document area similar to a word processor. Multimedia elements are easily inserted. Examples range from professional to free options MS FrontPage Adobe GoLive Macromedia DreamWeaver**: most popular NVu: free (limited features) Mozilla Composer: free with the browser (limited)
Basics: Obtaining server space Server space is offered by many entities. There are features to examine before choosing. Pre-service teachers typically given free web space on their university server while they are actively pursuing a degree. In-service teachers typically given free web space on their school server content limited to classroom business
Basics: Obtaining server space (cont’d) Server space for personal pages can be obtained for a fee from many hosts. Check out features and benefits. Contract requirements: Time requirement? Cost for service: set-up fee, monthly charge? Disk space offered ? Site management? Support offered: 24 hours? Free? Domain names offered: Free? Required to use template or may you use another design tool? Reliability Security
Basics: Building the folder structure A folder structure is used for organization. This is similar to a filing cabinet with the drawers being the different folders. Root folder base folder that holds all web folders/files contains a universal homepage (index.html) Provides links/navigation to other folders or pages contains project folders each folder has an entry (index.html) to the information in that folder each folder contains an images (art; graphics) folder to hold images
Basics: Naming web files Files should follow common web practices to allow them to work correctly and easy to locate. Naming the files each file is given a name (identity) Short Descriptive Lowercase No spaces (may use an underscore ( _ ) each file is given an extension Tells the user the file type Web docs have .html or .htm Graphics have .gif or .jpeg, or .png
Basics: Web Page Components Web pages have components that are commonly found. Basic components: text images tables hyperlinks internal (relative to the site) external (outside the site) email navigation scheme
Basics: Planning the Process Planning the site and the navigation is one of the most important steps to a good design. Use the storyboard chart to plan the classroom site design and the way that your pages will link to each other. Plan the page design that will be used. Background colors Typeface and colors Graphics Write the message for each page. Locate the graphics (check copyright) for each page.
Basics: Writing for the Web Writing the message for web pages is different than writing for printed pages. Reading long blocks of text is tedious on the Web Writing should be concise. Consider using lists Match writing style to target audience. Match writing to reading ability. Avoid long pages that require scrolling.
Adapting for Special Learners Attention to accessiblity helps make the site usable by the widest audience. Creating a template structure insures consistency. High contrast between the background and text. Avoid tile backgrounds. Consider for those with color deficiencies. Provide alternative text for all images (alt tags). Use images only when the text is enhanced. Give option to link to a page without graphics that can easily be read by a screen reader. Links and titles should be descriptive and meaningful. Summarize in charts and graphs. Design tables being mindful of screen readers.
Questions? ? ?