Unit 1 Web Mastering TEKS

Day 1

Day 2

Day 3

Day 4

Day 5

Day 6

Day 7

Day 8

Day 9

Day 10

Day 11

Day 12

Day 13

Day 14

Day 15

Watch for ICONS

Sharpen your Skills (practice)

Create or Produce a Product

Research and/or Read

Try

Discuss

Tools Needed

Think

Look at, See Example

Explore, Experiment

 

Introductory Level of the following:

Through the study of technology applications foundations, including technology-related terms, concepts, and data input strategies, students learn to make informed decisions about technologies and their applications. The efficient acquisition of information includes the identification of task requirements; the plan for using search strategies; and the use of technology to access, analyze, and evaluate the acquired information. By using technology as a tool that supports the work of individuals and groups in solving problems, students will select the technology appropriate for the task, synthesize knowledge, create a solution, and evaluate the results. Students communicate information in different formats and to diverse audiences. A variety of technologies will be used. Students will analyze and evaluate the results.

 

Knowledge and skills.

 

(1)  Foundations. The student demonstrates knowledge and appropriate use of hardware components, software programs, and their connections. The student is expected to:

(A)  demonstrate knowledge and appropriate use of operating systems, software applications, and communication and networking components;

(B)  compare, contrast, and use appropriately the various input, processing, output, and primary/secondary storage devices;

(C)  make decisions regarding the selection, acquisition, and use of software taking under consideration its quality, appropriateness, effectiveness, and efficiency;

(D)  delineate and make necessary adjustments regarding compatibility issues including, but not limited to, digital file formats and cross platform connectivity;

(E)  use vocabulary related to web mastering and delineate between the Internet and an intranet;

(G)  summarize the development of Internet protocols including, but not limited to, hypertext transfer protocol (http), gopher, file transfer protocol (ftp), telnet, and wide area information system (wais).

(3)  Foundations. The student complies with the laws and examines the issues regarding the use of technology in society. The student is expected to:

(A)  discuss copyright laws/issues and model ethical acquisition and use of digital information, citing sources using established methods;

(B)  demonstrate proper etiquette and knowledge of acceptable use policies when using networks, especially resources on the Internet and intranet; and

(C)  analyze the impact of the WWW on society through research, interviews, and personal observation.

(4)  Information acquisition. The student uses a variety of strategies to acquire information from electronic resources, with appropriate supervision. The student is expected to:

(B)  construct appropriate search strategies in the acquisition of information from the Internet including keyword and Boolean search strategies; and

(C)  obtain Uniform Resource Locators (URLs) and distinguish among the protocols including hypertext transfer protocol (http), gopher, file transfer protocol (ftp), telnet, and wide area information system (wais).

(5)  Information acquisition. The student acquires electronic information in a variety of formats, with appropriate supervision. The student is expected to:

(A)  acquire information in electronic formats including text, audio, video, and graphics, citing the source; and

(B)  identify, create, and use available file formats including text, image, video (analog and digital), and audio files.

(7)  Solving problems. The student uses appropriate computer-based productivity tools to create and modify solutions to problems. The student is expected to:

(A)  use technology tools to create a knowledge base with a broad perspective;

(B)  select and integrate appropriate productivity tools including, but not limited to, word processor, database, spreadsheet, telecommunication, draw, paint, and utility programs into the creation of WWW documents;

(C)  use foundation and enrichment curricular content in the creation of WWW pages;

(D)  create WWW pages using specific authoring tools such as text-based editing programs or graphical-based editing programs;

(E)  read, use, and develop technical documentation;

(F)  create and edit WWW documents using established design principles including consistency, repetition, alignment, proximity, ratio of text to white space, image file size, color use, font size, type, and style;

(8)  Solving problems. The student uses research skills and electronic communication, with appropriate supervision, to create new knowledge. The student is expected to:

(A)  demonstrate proficiency in, appropriate use of, and navigation of LANs, WANs, the Internet, and intranet for research and for sharing of resources;

(B)  extend teaching and learning in the local environment to the worldwide community through the creation and sharing of WWW documents;

(C)  synthesize and generate new information from data gathered from electronic and telecommunications resources;

(D)  create and format WWW documents containing bookmarks of on-line resources and share them electronically;

(E)  demonstrate the use of WWW pages, collaborative software, and productivity tools to create products;

(F)  participate with electronic communities as a learner, initiator, contributor, and teacher/mentor; and

(G)  participate in relevant, meaningful activities in the larger community and society to create electronic projects.

(9)  Solving problems. The student uses technology applications to facilitate evaluation of work, both process and product. The student is expected to:

(A)  design and implement procedures to track trends, set timelines, and review/evaluate progress for continual improvement in process and product;

(B)  seek and respond to advice from peers and professionals in delineating technological tasks;

(C)  create technology specifications for tasks and evaluation rubrics; and

(D)  resolve information conflicts and validate information through accessing, researching, and comparing data.

(10)  Communication. The student formats digital information for appropriate and effective communication. The student is expected to:

(A)  use hypertext linking appropriately when creating WWW pages;

(B)  develop interactivity for the web server via scripting additions such as Common Gateway Interface (CGI), Java Script, or JAVA; and

(C)  demonstrate the ability to conduct secure transactions from the web server to the client.

(11)  Communication. The student delivers the product electronically in a variety of media, with appropriate supervision. The student is expected to:

(A)  synthesize and publish information in a variety of ways including, but not limited to, printed copy, monitor display, Internet documents, and video; and

(B)  identify and use LANs, WANs, and remote resources to exchange and publish information.

(12)  Communication. The student uses technology applications to facilitate evaluation of communication, both process and product. The student is expected to:

(A)  create technology specifications for tasks and evaluation rubrics; and

(B)  seek and respond to input from peers and professionals in evaluating the product.

Sharpen your Skills (practice)

Create or Produce a Product

Research and/or Read

Try

Discuss

Tools Needed

Think

Look at, See Example

Explore, Experiment

DAY 1

Introduction to Class

bullet

GeekTest

Introduction to SCANS

bullet

What Employers Want

bullet

Discovering SCANS: SCANS Document   SCANS,  SCANS PPT

Introduction to Web Spinning Text

bullet

Web Site Design

bullet

10 Commandments of Web Design

Assignment: Rubric Design

Day 2

Introduction to Personalities and Peers-- Color Test

bullet

How do I relate to others in a group?

bullet

What is a balanced adult?

Introduction to Web Spinning Booklet

bullet

Assign groups

bullet

Skimming for understanding

bullet

Assign Chapter 3

Day 3

Finish Chapter 3 reading Assignment on Web Design & Storyboarding

Discuss examples of storyboards & Web site design

Introduction to HTML -- like building a sandwich

Tools Needed: Any Text Editor (like Word Pad, Note Pad, preferably not Microsoft Word)

bullet

Web Spinning Chapter 4

bullet

Open/Close Tags

bullet

Single Tags

bullet

Format for saving lessons
bullet

C4_1.htm (Chapter 4 lesson 1)

bullet

<title> Your First Name, Last Initial, and C4_1.htm </title>

bullet

Assign lessons

bullet

Purpose of Lesson 1 to work with <body> modifiers:
bullet

text="#ffffff"

bullet

link="#ffffff"

bullet

alink="#ffffff"

bullet

vlink="#ffffff"

bullet

bgcolor="#ffffff"

AND to include in the text on P. 28 the following tags:
bullet

<P>

bullet

<H1> </H1>

bullet

<BR>

bullet

<HR>

bullet

<B> </BR>

bullet

<I>  </I>

bullet

<Center> </Center>

Thinking Futuristically: Creating an original site

Day 4

Basic HTML

bullet

Web Spinning Chapter 4, pages 30-33

bullet

Review Open/Close Tags

bullet

Review Single Tags

bullet

Title this lesson C4_2.htm

bullet

Goal of this lesson is to demonstrate the purpose of the <pre> </pre> tag

bullet

Copy and paste the following text into your editor first without the <pre> tag and then with the <pre> tag:

 

CONSENT REQUIREMENTS

Copyrighted software or data may not be placed on any system connected to the District’s system without permission from the holder of the copyright. Only the owner(s) or individual(s) the owner specifically authorizes may upload copyrighted material to the system.

No original work created by any District student or employee will be posted on a web page under the District’s control unless the District has received written consent from the student (and the student’s parent) or employee who created the work and the work complies with the district's Media Publishing and Posting Policies. 

No personally identifiable information about a District student will be posted on a web page under the District’s control or provided by the district for posting elsewhere unless the District has received written consent from the student’s parent. An exception may be made for "directory information" as allowed by the Family Education Records Privacy Act and District policy.

SYSTEM ACCESS

Access to the District’s electronic communications system will be governed as follows:

1. Upon completion of practicum requirements, as appropriate, and with the written approval of the immediate supervisor, District employees will be granted access to the District’s system.

2. Students in grades K-12 will be granted access to the District’s system by their teachers, as appropriate. Students in grades 5 - 12 will be assigned individual accounts upon completion of practicum requirements for Internet Driver’s License.

Add these commands (see p. 33) to lesson C4_2.htm

bullet

More Header Tags
bullet

<H1> This is Header 1 </H1>

bullet

<H2>  This is Header 2 </H2>

bullet

<H3> This is Header 3  </H3>

bullet

<H4>  This is Header 4 </H4>

bullet

<H5>  This is Header 5 </H5>

bullet

<H6> This is Header 6  </H6>

bullet

Don't forget the <body> tag modifiers

 

Day 5

Basic HTML

bullet

Web Spinning Chapter 4, page 34

bullet

Review Open/Close Tags

bullet

Review Single Tags

bullet

Modifiers for the HR tag
bullet

size=1

bullet

size=5

bullet

size=15

bullet

width=5%

bullet

width=25%

bullet

width=75%

bullet

noshade

bullet

Experiment with these modifiers. Make sure you can answer questions about what each modifier does.

bullet

Save this lesson as C4_3.htm

bullet

Individual Practice: Complete Lesson on Page 37 by yourself. Save this lesson as C4_4.htm. Don't forget to place the correct information in the Title Tag (Your First Name, Last Initial and Lesson name). Make sure you add the Body Tag Modifiers.

TOOLS REQUIRED FOR THE NEXT FEW LESSONS:

bullet

GIF CONSTRUCTION SOFTWARE

bullet

DIGITAL CAMERA

Day 6

Basic HTM

Goal: Internet Research:  Work in Groups of 3. Student in the middle is the scribe. Add each Student's name to the document below. Students on each side will do the research and provide the information and sources

bullet

Open Word Document and Save to Desktop. Click Here  Web_Graphics.doc

bullet

Answer each question using the Internet.

bullet

Make sure you cite your source by attaching the URL where the information was found to each detail you provide.

DISCUSSION

bullet

Web Spinning Chapter 5, pages 39-41

bullet

Goal is to understand limitations of Images on the Web and the <img src="images/filename.jpg"> tag

bullet

THINGS to Remember:
bullet

Use ONLY Graphics that are .jpg or .gif (for now)

bullet

Learn the difference:

JPG VS GIF VS PNG
bullet

Most common graphic formats used on the Web

bullet

Since the Web is visualized by RGB monitors, the images you place on the Web should be RGB 24bit graphics (this is default for jpg graphics).

bullet

Source of graphics: clip art, photos, or original graphics. The source graphic should be kept as a bmp. The Bmp format is a larger file and can be edited and saved in a graphic editor as a 24 bit gif or jpg.

bullet

JPG and GIF files are compressed using algorithms that reduce the file size of the image. Since saving a BMP as a JPG results in a "lossy" compression, actual loss of data, it is good to keep the original BMP in case you wish to edit the graphic again.

bullet

The Web Safe Palette has 256 Colors in it and can be readily visualized in true color on a computer monitor.

bullet

http://www.webwitchery.com/articles/format/

bullet

Utilize these colors to maintain a predictable color palette on your Web site.

bullet

The GIF file format reduces the size of a graphic by 30-50%. GIF allow the use to create transparent backgrounds and animation files

bullet

The JPG file format is not limited in color (17 million colors), however, each time you re-save the graphic you are compressing it again and losing information.

bullet

The PNG file format is not supported by all browsers, is an improvement on the GIF allowing for transparency and does not degrade with re-saving.

bullet

http://www.siriusweb.com/tutorials/gifvsjpg/  Read for understanding of GIF, JPG, and Dithering.

bullet

Rule of Thumb: Use JPGs for photorealistic graphics and GIF for bright minimal color useage (buttons, animations, cartoons, line art, etc.) mona lisa and cartoonhttp://www.codinghorror.com/blog/archives/000464.html

bullet

For now...make sure you save the graphic in the same folder as the html file

bullet

Web-based graphics should be no more than 300 X 200 pixels @ 72 pixels/inch. No more than 2-15K in size. The entire Web page should be no more than 30 Kilobytes. What is a Kilobyte?

bullet

 

bullet

8 bits (informal notation: kilobyte = 1024 bytes)

bits

8

bytes

1

kilobits

0.0078125

kilobytes

0.0009765625

megabits

7.62939453125e-06

megabytes

9.5367431640625e-07

gigabits

7.45058059692383e-09

gigabytes

9.31322574615479e-10

terabytes

9.09494701772928e-13

petabytes

8.88178419700125e-16

bullet

Use all the tags and modifiers on pages 40-41
bullet

Learn the IMG Tag:     <img src="filename.extension">

bullet

Learn the ALT subtag

bullet

align subtags  - experiment with top, center, bottom

bullet

Title this lesson C5_1.htm

bullet

Remember to correctly identify your lesson in the Title Tag

bullet

Remember to add your Body Tag modifiers.

Day 7

bullet

Rules of Thumb for Copying graphics from the Web
bullet

Save  graphic in Web Folder

bullet

Use a text file to save all your hyperlinks for attaching to your graphics on your Web page.

bullet

All graphics from the Web need accompanying copyright information and ALT tags

<IMG SRC="name.gif" ALT="Text-only display" WIDTH=100 HEIGHT=200 border="11">  

bullet

 All graphics need to be a reasonable size for a Web Page. How do we make graphics a reasonable size? HINT: Using Width & Height is NOT the answer!

bullet

http://www.its2.uidaho.edu/cti/tutorials/web_graphics/index.htm  Read and report. What size should a Web Graphic be?

bullet

Width & Height are used to "tweak" graphics, NOT to size them!

bullet

Add the Width, Height, and Border subtag to lesson C5_1.htm and save it as C5_2.htm

bullet

Make sure you edit the <title> tag information

bullet

Make sure you add all the modifiers in the <body> tag.

TABLES

<Table Border=0 Width="97%">

        <TD width="10%"> </TD>  <!-- left margin of 10%>

        <TD width="80%"></TD>    <!--main text area of 80%>

        <TD width="10%"></TD>    <!-- rt margin of 10%>

 

MANAGING MEDIA:

bullet

In order to edit a Web page, we need an HTML editor.  Name 4 HTML editors. Which HTML editors do you have available to you?

bullet

In order to edit graphics, we needs a graphics editor.  Name 4 graphic editors. Which graphic editors do you have available to you?

bullet

In order to edit music, we need an audio editor. Name 3 audio editors?  Do you have an audio editor available to you?

bullet

In order to edit video, we need a video editor. Name 4 video editors? Do you have a video editor available to you?

Animated GIFs  Animation Tutor

Animated Gif PowerPoint for Gif Construction Set

<img src="smiley.gif">   This is NOT a transparent Gif.

bullet

Software Tools

bullet

Keep them Small -
bullet

If you generate a GIF and find it's too big, DON'T use HEIGHT and WIDTH tags to reduce it. A big GIF squeezed down will still take a long time to load. Make your GIFs the right size.(source: http://members.aol.com/royalef/conserva.htm )

bullet

On a Web Page, your GIF animation will need your name underneath it to give copyright credit to the author.

MORE Examples: Click Here  
bullet

bullet

Animated GIFs are like cartoon frames. Saving each frame individually allows you to create the sense of motion.

bullet

ANIMATION STEPS - Create, Erase, Replace in new position, with new color, or with new feature.

 

Day 8

BASIC HTML

GOALS for Today: Successfully link pages together AND link pages to other resources on the Internet (URLS)

bullet

Linking Pages Together

bullet

Linking Pages to Internet URL

bullet

Linking Pages using Buttons (graphics)
bullet

POWERPOINT

bullet

READ Page 43 - 45
bullet

Complete the Assignment on Page 45. Save it as C5_2.htm

bullet

Add one of your Animated GIFs to this page.

bullet

Do NOT forget your body tag modifiers

bullet

Do NOT forget your Title Tag Information

bullet

Begin to PLAN for your 5 page project over a hobby or other topic of interest. This site will not be required to be published on the WWW, however, all other projects will be published. Make sure you understand the posting policies.

Day 9

BASIC HTML

GOALS for Today: Link all existing lessons together using a Default.htm page as a Splash page and an Index to all your lessons. Add text on the page to let us know what the page's purpose is (i.e. This is the Index to Joy's Lessons). Link all Lessons back to the Index (default.htm). In the Title tag put you name and the word INDEX.

Exploring DreamWeaver: Look in the DreamWeaver Menu Bar, Click on the Globe   This will allow you to preview your pages in a Browser. Make sure that all your pages are linked to the Index page.

THREE REASONS A LINK MAY NOT WORK PROPERLY:

  1. You did not Save the Web page you were working on BEFORE attempting to put in links OR images on a page. Unless you establish the location of the Web page first (by saving it in a location), it will have issues pointing to other pages or to images.

  2. A Syntax Error: A syntax error is an error in typing the Tag or command. An extra space, incorrect command, forgetting  the ">", forgetting the quotes, forgetting to close the tag "</a>", OR misspelling the name of the html file you are point to.

  3. A Location Error: The file you have identified for your link is NOT in the location that you have pointed to using the link tag.

Day 10

Using a digital Camera take a picture, resize it and place it on your Index page.

Digital Camera QuickStart

bullet

Use Macromedia Fireworks
bullet

Modify--> Canvas-->Image Size

bullet

Make sure the picture is under the maximum recommended size of 200 X 300 pixels.

bullet

Making a "scrap book" of photos
bullet

Take 4 or 5 pictures, resize them, save them in your HTML folder

bullet

Use Gif Construction Set, add each picture just as you did your paint files, and save them under 1 file name. Place this animation on your Index page.

bullet

JOURNAL ACTIVITY - fill out your journal. Use complete sentences and paragraphs! This is a communications class. Demonstrate your communication skills.

Day 11

Begin to design a professional Web site using Storyboarding Techniques and Best Practices. Research Best Practices on the Web. Collect 10 rules from experts on how to design an excellent Web site. Report your findings in a Word document.

bullet

Create a Storyboard for your 5 page (minimum) First Project

bullet

Example:    

Default Page might include: A short description of the site (its purpose and content), something interesting to draw Internet surfers into the the site, and an index to all the other pages (or major segments) of the site. This is the one page where you might want to add gif animation, sound, or flash.

Graphic & More Information: http://www.mediaworkshop.org/hses/criticalbasics01/day1/storyboardingtips.html

Another Resource: http://www.plocktau.com/how-tos/web_development/index.html

QUESTIONS TO ANSWER:  Resource: http://www.charlesriver.com/resrcs/chapters/1584500360_1stChap.pdf

INCLUDE AS PART OF STORYBOARD:

Ø Who is my target audience?

Ø What message does the Web site need to convey?

Ø Will I have a client? (Teacher, Coach, Organization, Classroom) What are my client’s needs?

Ø What type of Web sites does my client like and why?

Ø How often will my site be updated? When I update, will I add pages or just replace content? If I add pages, where will I add them?

WHAT ARE 10 RULES FOR EXCELLENT WEBSITE DESIGN?

Research on the Web to find out what experts feel good Web Design should include or avoid. Cite your sources using the URL. Use at least 5 URLs (5 different sources from experts.) Type up 10 Rules in a Word Document. Cite your Sources. Name this file: Rules.doc. Email document to your teacher.

Day 12

Today's Goal is to build an assessment rubric in your groups to measure your Web site. You may use Word to build the Rubric. Examples of Rubrics are:

EXAMPLE OF A Beginner's Rubric

Develop Project Site

CRITERIA

bullet

Collaborate as Mentor with classroom project = TEAM

bullet

Create Thematic Web Site Storyboard

bullet

Follow 10 Rules for Good Design

bullet

Collaborate with TEAM to Develop Goals & Objectives for Site

bullet

Utilize HTML and animation on Splash page.

bullet

Use Splash page, Index, & content flow chart

bullet

Create an evaluation rubric to determine success of site

bullet

Include interactive component that promotes global communication

bullet

Incorporate into TEAM auxiliary members (business, community, on-line experts, or Internet key-pals)

bullet

Keep project current

bullet

Provide efficient service to TEAM Project

Examples: http://www.arp.sprnet.org/curric/classes.htm   AND http://www.arp.sprnet.org/curric/read/statt/page.htm

Decide what materials you will need to collect for your Web site and begin planning how you will collect the materials. Assign each member of your group to a specific job (editor, photographer, writer, interviewer, etc.

bullet

pictures

bullet

interviews

bullet

research and/or news content

bullet

schedules, calendars, event listings

bullet

media releases for individual pictures or student content

Decide who the client will be and have them sign the Client contract.

DAY 13

REVIEW: What items are involved in a Web site DESIGN THEME?  Click Here.

Make decisions concerning the theme of your project Web site. Make sure you ADD THEME to your RUBRIC.

New Skills: Design elaborate texts as graphics and provide media on a Web site. Using the Websites below create titles for each of your Web site main pages. Also look at creating buttons to match your titles.

What buttons (navigation hyperlinks) will you need on each page?

  1. Cool Text

FlamingText.com OR CoolText.com or GraffitiCreator.net - Create Cool Titles and Buttons for your Splash Page. GIVE CREDIT to FlamingText or Cool Text for your graphics.

bullet

Follow instructions on the Web site. You will have to wait for your graphic to be generated by the FlamingText server.

bullet

Once it has been generated you will need to save it into your project folder.

bullet

NOTE: CHANGE THE NAME of the graphic (RENAME) so that it is really simple like "index.jpg" instead of the weird name the FlamingText server gives it (like "cs800000021.jpg").

bullet

REMEMBER animated graphics will be .gif -- not .jpg

bullet

Add it to your Web page using the

<img src> tag

EXAMPLE: http://www.arp.sprnet.org/hs/fca06_07/default.htm

bullet

For Graphic Buttons: place the <img src> tag INSIDE the open and closed <a href> tag

EXAMPLE: http://www.arp.sprnet.org/webmaster/organizations/NHS/class_02/default.htm

DAY 14:

GOAL:

bullet

Learn 10 Guides to Good Web Design.

bullet

Learn the <embed src> </embed> tag for placing media on a Web page.

POWERPOINT ON ALL ABOUT MEDIA

  1. SOUND

Sounds on Web Page: Sound Effects...Free: http://www.dewa.com/sound/  (Rt Mouse Click on Source and Save in your project folder)

bullet

    Read through this Page to see EXAMPLE of how sound might be used to emphasize the content of the page.

Code for HTML Page:
bullet

    Know types of audio files:  .mp3, .wav, .au, .mid, .wma

bullet

Sound_Page 1  <embed> tag inside <body> </body> tags allowing the user to "Replay" the sound.

bullet

Sound_Page 2  <embed> tag inside <body> </body> tags but using width and height to limit its size on the page.

bullet

http://www.arp.sprnet.org/asfroot/EV_15/EV.htm (takes about 10 seconds to load)

bullet

To play automatically place this tag between <head> and </head>
bullet

<embed src="filename.mp3" width="30" height="30">      </embed>

bullet

We will use the <embed> tag for multimedia (sound, movies, flash animations)

bullet

Add a FlamingText or CoolText graphic and a sound effect to your Splash Page. Make sure the graphics and media are suited for the theme of your page.

 

  1. MOVIES

    EXAMPLE OF MOVIE: http://www.arp.sprnet.org/webmaster/masters/default.htm

    EXAMPLE OF PODCAST: http://podcast.arpisd.org//blojsom_resources/meta/joy/Hemphill1a.mp4  Using 28 Seconds of music you will recognize.

Use all the tags and skills (animation, graphics, sound, etc.) you have learned thus far to enhance your site.

bullet

Utilize email to acquire content

bullet

Utilize digital camera to enhance site

bullet

Utilize animation and graphics to coordinate theme

bullet

Utilize best practices

 

DAY 15

STUDY FOR HTML 6 Weeks TEST

JOURNAL ACTIVITY - fill out your journal. Use complete sentences and paragraphs!

MEANING OF ICONS

Sharpen your Skills (practice)

Create or Produce a Product

Research and/or Read

Try

Discuss

Tools Needed

Think

Look at, See Example

Explore, Experiment