Greetings! Welcome to Tech 2!

1
Greetings! Welcome to Tech 2!

• Please sign in and take a password sheet.
• Go to a computer and log in as yourself if you
  are a Nebo Staff member
• Open the following Directory
• Open the Powerpoint
• Technology for Parapros 2.ppt

K\Nebomusic\Parapro Tech Training 2007\Tech 2
2
Section 1

• Windows User Interface

3
Brief History of Humans interacting with Computers

• Dials and Switches (ENIAC 1943)
• Punchcards and Keyboards (IBM System 360 1964)
• Text on television screen/Monitor
• Apple I and Apple II (1976, 1977)
• DOS (Disk Operated System) (1981)
• GUI (Graphical User Interface)
• Apple Macintosh (1984)
• OSX
• X Windows (KDE, Gnome, JWM, Fluxbox)
• Windows (3.1, Windows 95, 98, 2000, XP, Vista)

4
Structure of Windows (2000, XP)

• Kernel the base program that tells a computer
  what it is and what is attached to it.
• Windows Manager The program that works the user
  interface between the human and the
  Kernel/computer.
• Internet Explorer the main program in Windows
  that the human uses to view, manage, create, and
  explore the file system and innards of the
  computer.
• Windows Explorer Older program to interact with
  computer. (Right Click folder, select Explore
  (In XP this program is merged with Internet
  Explorer.)

5
Anatomy of a Window
Title Bar
Menu Bar
Toolbars
Minimize Maximize Close Icons
Stretch Points (Corners)
6
Menu Bar Tell the program what to do

• Location Directly below the title bar.
• Standard Commands
• File
• Edit
• View
• Insert
• Format
• Tools
• Window
• Help

7
Details about Menu Bar Commands

• File
• Saving, Opening, Closing, Importing, Exporting
  Files
• Edit
• Manipulate Data inside the document
• View
• How you look at the file
• Insert
• Putting data and objects into your file
• Format
• Changing the look and style of the data in the
  file
• Window
• Changing which file you are looking at
• Help
• Opens help and how to files

8
Toolbars

• Formatting Working with text, pictures
• Drawing Also working with pictures or graphics

9
Mouse Basics

• Left Click
• Once selects or focuses on object
• Twice starts an action (open, execute)
• Click once and hold grabs an object for dragging

• Right Click
• Once opens up a Context Sensitive Pop Up Menu
  for a specific object
• (Use Right Click to discover facts about your
  computer and files.)

10
Right Click and Properties

• Properties Tells you information about a file,
  folder, drive, device, or computer.

• Type
• Size
• Location
• Opens With
• When Created
• When Modified
• When Accessed
• Read only, Hidden, Archive

11
Left Click Focus

• When you interact with a computer-the computer
  can truly only focus on one thing at a time.
• Left clicking on object once focuses the computer
  on the object (window, file, folder, slide . . .)
• Remember if you want to change or work with any
  object you must focus the computer on the
  object with a Left Click.

12
Wheres the Focus?
13
Wheres the Focus?
14
Wheres the Focus?
15
Opening and Closing Windows

• To Open Left Double Click
• To Close Click on the x in the upper right
  corner.

16
Maximize and Minimize

• Click on center rectangle icon to make window
  take up entire desktop.
• Click on left line icon to shrink window down to
  taskbar.

17
Resizing Windows

• Stretch and Shrink
• Hover mouse over corners until it changes into a
  two way arrow.
• Left Click and Hold.
• Drag to resize.

18
View Modes

• Filmstrip
• Thumbnails
• Icons
• List
• Details
• Select View from menu bar to select from list.

19
Filmstrip Mode

• Shows miniature photo prints of picture files in
  a timeline format. Also very useful for
  previewing picture files

20
Thumbnail Mode

• Shows miniature photo prints of picture files.
  Also shows first page of PowerPoint files or
  images representing content of files. Very useful
  for previewing picture files.

21
Icons Mode

• Shows little pictures of files. The picture
  indicates what type of file.

22
List Mode

• Files by name only

23
Details Mode

• Files by name, size, type, and date modified.

24
Drag and Drop-or- Drag and Copy

• Primary method to move or copy files or folders.
• Left Click and hold to select and grab
• Move mouse and file follows arrow
• When you let go of the left button, the file
  moves to the new location.
• When moving files on the same computer or drive,
  the file will move from one directory to another.
• When moving files from one computer to another,
  the file will copy and leave the original in the
  directory.

25
Drag and Drop (Move)
26
Exercise 1

• Make your computer screen look like the following
  examples

27
Exercise 1
28
File Management

• Review of How to Navigate Your Computer

29
Using My Computer

• Shows Internal and External Connections
• Internal (Inside the Computer)
• A Drive Floppy
• C Drive Internal Hard Drive
• D Drive Usually CD ROM Drive
• E Drive Plug in Drives (Cameras, USB Sticks)
• External (Network)
• F Drive Mother of all Drives
• H Drive Home Directory for Paulding
• K Drive Courses where students can save their
  work.

30
(No Transcript)
31
Drives and Folders

• A Folder is a location on the Drive of a
  computer.
• Address in Windows Language
• C\Documents and Settings\Administrator\My
  Documents
• To find
• Double Click My Computer
• Double Click Documents and Settings
• Double Click Administrator
• Double Click My Documents

32
Universal File Types

• Three main computer operating systems
• Windows (2000, XP, Vista)
• Mac OSX
• Linux
• Certain file types will work with all these
  computers and ensure your data can be used no
  matter what computer/mp3 player you choose (or
  the school district chooses for you!) When you
  save your data, stay with these file types and
  you can always access your data (Bold files are
  recommended file types)

                       
33
Text Files

• .doc (Microsoft Word Format)
• .txt (plain text file all word processors and
  web browsers read this file format)
• .rtx (Rich text file)
• .htm or .html (Hyper text markup language Web
  Pages)
• .wks (Microsoft Works Format) Very old format.
• .lwp (Lotus Word Pro) Another rare type. Our
  School secretary uses Lotus Word Pro which is
  included by default on some school machines.
• .wps (Word Perfect) Rare. Seen on older
  computers. Microsoft Word can open this file
  type and convert.

34
Sound Files

• .wma (Windows Media File this is the file
  that Windows saves music as by default.)
• .mp3 (Mp3 files most common type and highly
  recommended. Most computers, mp3 players, and
  even CD players can read and play this file
  format. No digital rights projection in these
  files)
• .wav (Wav files as close to raw sound data.
  Very large files that can be read by most
  computers. )
• .aac (Apple Computers music file format. )
• .m4p (Mpeg 4 file Apple Computers files from
  iTunes that are digitally projected. )

35
Images

• .gif (Gif images. Can be read by all
  computers.)
• .jpg (Jpeg. Small data space and can be read
  by all computers and browsers. Recommended)
• .bmb (Bitmap seen with older computers.
  Large data and poor images. Can be read by all
  computer systems)
• .wmf (Windows Meta File not recommended as
  not all computers can render images created with
  this file. Causes problems on our school
  computers. There is a way to convert these
  images to Jpeg. See Mr. Michaud if you want the
  instructions.)

36
Assignment 1 What types of files are these?

• Report on Fish.doc
• Lettersounds.mp3
• Family.jpg
• Germany.bmp
• Equations.xls
• Directions.ppt

Note You can always Google the three letter
file extension to find the file type Example
Google .gif for flyingcars.gif
37
Bits and Bytes

• Computers think in electrical signals that are
  measured as on or off
• These signals are read as 0 and 1 in a binary
  number system.
• The smallest unit if thought 1 switchbit
• 8 bits together make a byte
• 01100001 letter a
• Files are measured in bytes
• Transfer rates between computers are measured in
  bits

38
Binary, Bits, and Bytes!

• Greetings!

01000111 01110010 01100101 01100101 01110100 01101
001 01101110 01100111 01110011 00100001
80 bits of data
10 bytes
39
File Size

• Measured in bytes
• Kilobyte (KB)1000 bytes
• 2 KB about 1 page of typed text without
  formatting
• 20-50 KB Average size of Word Document
• Megabyte (MB) 1000 Kilobytes (KB)
• 1 MB about 1 minute of music in mp3 format
• 1 MB 1 Excellent quality digital photograph
• 1.4 MB 1 floppy disk
• 512 MB Average Camera Memory Card
• 750 MB 1 CD ROM or 80 minutes of music on CD
• Gigabyte (GB) 1000 Megabytes (MB)
• 4 GB DVD disk 1 Movie on DVD
• 40 GB Average hard disk Size
• Terabyte (TB) 1000 Gigabytes (GB)
• Really BIG!!! One day we will use this as the
  standard for size

40
Exercise 2 How big are the following files?
41
Assignment 2

• Create the following Folder in your Home
  Directory.
• Lastname Tech 2 Training 2007
• Create the following Subfolders in your Tech 2
  training folder
• Pictures
• Word Files
• Web pages

42
Assignment 2

• Your Folders should look like this

43
Section 2

• Introduction to Digital Photography

44
Basic Vocabulary

• Shutter Speed
• Light Source
• Subject and Focus

45
Picture Taking Basic Vocabulary

• Shutter Speed How fast or slow the shutter opens
  and closes.

Low Speed
High Speed

• Still Shots
• Low Light
• Night Shots
• Blurry

• Action Shots
• Need Bright Light
• Very Detailed

46
Light and Subject Good
The camera should be between the light source and
the subject. Remember, cameras need light to
work!!!
Sun or Light Source
Camera
Subject
47
Light and Subject Bad
When light comes from behind subject, you will
get a silloughet effect or not see the subject.
Use flash to balance out light.
Sun or Light Source
Subject
Camera
48
Lighting Behind Subject
49
Light and Subject

• Behind Subject

• Use of Flash to balance light.

50
Subject and Focus

• Subject What you are trying capture in your
  picture
• Focus What the camera will make the clearest.
• Digital cameras are programmed to seek out a
  subject and then focus. Blurry pictures can be
  caused by the camera choosing a subject that is
  different than the human taking the picture!

51
Subject and Focus

• For close in subjects make sure camera is set on
  Close Up mode. (Usually a flower icon on the
  dial.)
• For distant subjects, use Landscape Mode
  (Usually a Mountain icon.)

52
Subject and Focus

• Focus behind subject

• Focus on Subject

• Camera in Default Mode

• Camera in Close Up Mode

53
Three Modes of Focus

• Default Mode

• Close Up Mode

Landscape Mode
Focus Far Away
Focus on Screen
Focus on Nemo
54
Night Shots
55
Taking Pictures and Video

• To Flash or not to Flash?
• Importance of Light Natural vs. Artificial
• Picture taking modes-what are all those different
  settings for?
• Taking short videos
• Preview Mode

56
To Flash or Not to Flash?

• Flash is not as important for Digital Cameras as
  film Cameras
• Flash will make most pictures lighting look
  unbalanced and unnatural.
• Use Flash only at night or in really dark
  settings.
• Use the flash off button to disable the flash and
  your camera and experiment. In most situations
  no flash will work better (and save battery
  life!)
• Flash only works when subject is 8 to 10 feet
  away.

57
Natural vs. Artificial Light

• Colors look best in natural sunlight because all
  the colors of the spectrum are in sunlight.
• Florescent and incandescent lighting will bring
  out different colors. Examine your camera
  settings for different modes for indoor and
  outdoor pictures. The computer in the camera
  will adjust for the lighting.

58
Lighting and Flash Examples
59
Lighting and Flash
60
More Examples of Lighting and Flash
61
Picture taking modes

• Standard (default)
• Sport Mode Fast shutter speed gives really
  detailed pictures but you need a lot of natural
  light.
• Night Mode Slow shutter speed you need to hold
  camera and subjects very still or use a tripod.
• Backlight When light is behind subject
• Distant view (Landscape View) Use for taking
  pictures of distant scenery
• Close Up For taking pictures of objects that are
  really close

62
Assignment 3

• Take your digital Camera and take at least 16
  pictures of at least 4 areas in your classroom or
  work area. Try to get pictures in the following
  Categories
• Centers (Example, Art Center, Computer Center,
  Math Center . . .)
• Student Work (Examples Student artwork or
  classwork that hangs on the walls.)

63
Transferring Pictures to Computer

• The computer sees pictures as a file. Usually
  pictures are in the .jpg format.
• Several programs exist to transfer pictures to
  your computer
• Kodak Easy Share
• Windows XP Default Picture program
• Adobe
• I prefer to transfer the pictures directly to the
  directory and location I wish. This allows me to
  rename and regroup pictures as I wish. Later,
  when I add pictures to PowerPoints, Word
  Documents, or Web Pages I know where to find them
  and what they are labeled.
• Windows and OSX have automatic ways to do these
  tasks, but again, I will show you the manual
  method that will work regardless of the computer
  you are using.

64
How Digital Cameras Store Pictures

• As .jpg files on a memory card or internal
  memory.
• File name usually like 103_1021.JPG
• On Memory Card
• Usually an SD card
• SD cards are an example of Flash Memory like
  USB flash drives
• SD card reader plugs into the USB port in a
  computer and allows the computer to directory
  communicate with the SD card as a disk drive.

65
Transferring Pictures

• Connecting Camera Directly to Computer
• Computer reads Camera like a Disk Drive or-
• Windows XP reads camera as a Camera and offers to
  directly work with pictures.

• Using A Card Reader
• Installs as a disk drive. (E Drive on School
  computers)
• Copy files directly to folder or directory.

66
Connecting Camera Directly To Computer

1. Plug Camera into the USB cable and then connect
   cable to Computer
2. Turn Camera on.
3. Computer should detect Camera and run through any
   installation steps as needed.
4. XP will provide a window asking what you want to
   do.
5. Select Work with Pictures Directly
6. Navigate to the folder on your camera where the
   pictures are stored.

67
Transferring Pictures Using Card Reader

1. Insert Memory Card into reader and place reader
   in USB port in the computer.
2. If prompted, select Open folder to view files
   Using Windows Explorer
3. Click OK

68
Transferring Pictures Using Card Reader

• 4. Left double click on DCIM folder. (This may
  differ depending on camera model.)
• 5. Double click 103KC330 (Again, this may be
  different)

69
Transferring Pictures Using Card Reader

• 6. Select Edit-gtSelect All
• 7. Select Edit-gtCopy

70
Transferring Pictures Using Card Reader

• 8. Open your Pictures folder in your Tech 2
  folder.
• 9. Select Edit-gtPaste to place your pictures in
  this folder.
• 10. Select View-Filmstrip to see your pictures.

71
Assignment 4

• Make a new folder called Lastname Classroom
  pictures in H\Lastname Tech Training
  2007\Pictures
• Transfer your pictures from your camera to this
  folder
• H\Lastname Tech Training 2007\Pictures\Lastname
  Classroom pictures

72
Editing Pictures

• Resizing
• Cropping
• Advanced
• Red Eye
• Color Adjustment
• Other settings and effects
• !!!Always make a copy of your picture file before
  you start editing!!!
• In case you destroy picture or save changes you
  do not want!
• Use Save As and rename your file.

73
Exercise 3 Editing a picture

• 1. Find one of your pictures and left double
  click to open.
• 2. Microsoft Photo Editor Should Open the picture
  file.

74
Exercise 3 Editing a picture

• 3. Select File-gtSave As and rename your picture
  Lastname Exercise 1
• 4. Click Save

75
Exercise 3 Cropping

• 5. Select Crop Tool
• 6. Draw a rectangle around the part of the image
  you want.
• 7. Right Click over image.
• 8. Select Crop

76
Exercise 3 Cropping

• 9. Finished Crop

77
Exercise 3 Resizing Picture

• 10. Select Image-Resize from Menubar
• 11. Type 25 in the percentage columns and click
  OK
• 12. This makes picture file size smaller and more
  appropriate for use in PowerPoint, Email, and Web
  pages.

78
Exercise 3 Resizing Picture

• 13. Note the difference in file size
• Original 665 K
• Michaud Exercise 1 27 K
• Over ten times
• smaller in size.

79
Difference in Pixel count and file size
1461x1093 252 K Detailed Good for Basic
PowerPoint
91x68 4 K Less Detail Good for Thumbnail
80
Difference in Pixel count and file size
1461x1093 252 K Detailed Good for Basic
PowerPoint
365x273 27 K Less Detailed Good for Basic Web
Page Or email attachment
91x68 4 K Little Detail Good for Thumbnail
81
Assignment 5

• Use the pictures you took of your classroom
• Select a picture and use Save-As to rename your
  picture and make a copy.
• Use Microsoft Photo Editor to crop your picture.
  
• Save and then resize picture to a file size less
  than 50 K.
• Use Save As and save the smaller picture file.
• Open the folder containing these files and note
  the difference in file size.
• Put both of your pictures into a PowerPoint file
  to compare the size and quality of the picture.
• Save PowerPoint as Lastname Assignment 4

82
Section 3

• Introduction to Web Site Design

83
Internet Vocabulary

• Server Remote computer that serves or dishes
  out data to your computer.
• Client The computer you use. The Server sends
  data to the Client.
• IP Address A numerical expression that is the
  location of your computer on the network or
  internet.
• Ethernet How computers are connected to a Local
  Network.
• Browser Graphical method of looking at data
  located on Clients and Servers.

84
Server

• Remote computer that serves or dishes out data
  to your computer.
• Example Servers at cnn.com send data to your
  computer.

85
Client

• Client The computer you use.
• The Server sends data like the web page to the
  Client.

86
IP Address

• IP Address A numerical expression that is the
  location of your computer on the network or
  internet.
• Examples
• 192.168.0.101 (Usually router type address)
• 10.8.0.01 (Local Network Address)
• Find example of Internet Address

87
Ethernet

• Ethernet How computers are connected to a Local
  Network.

88
Browser

• Graphical method of looking at data located on
  Clients and Servers.
• You use a Browser when you click on My Computer
  or Internet Explorer
• The browser receives and displays data from the
  client or server

89
What happens when I surf the web?

• Type in an internet address (url) into your
  Browser
• http//nebomusic.net
• You computer communicates with a domain name
  server that automatically converts the
  nebomusic.net into an IP address (you dont see
  this happen).
• Using your IP Address and the IP of
  nebomusic.net, your computer connects with the
  servers at sitebuilder.com where
  nebomusic.net is hosted.
• The servers at sitebuilder send the contents of
  the Nebo Music index page back to your
  computer.
• Your Browser receives the data and renders the
  page.
• All this happens in seconds from anywhere in the
  world!

90
Elements of a Web Page

• Text or content What the user reads
• Graphics Pictures and icons
• Hyperlinks Areas that are linked to other
  pages or objects. When a user left clicks on a
  hyperlink the Browser will display the contents
  of the link. Text links are usually blue and
  underlined.
• Examples of links
• http//nebomusic.net
• www.paulding.k12.ga.us
• www.weather.com
• When your mouse arrow is over a link, it will
  usually turn into a hand with a pointer finger.

91
HTML Hyper Text Markup Language

• HTML is the language that Browsers use to send
  web pages over the internet.
• HTML is simply regular letters and numbers that a
  Browser uses to recreate the web page on your
  computer.

92
Elements of HTML

• Header contains information about the page and
  the Title of the Page.
• Body Contains the content (what you see) of the
  page.
• Tags Other formatting commands to change look or
  action of text or pictures. Kind of like labels.

93
Simple Page and HTML
lthtmlgtltheadgtltmeta content"text/html
charsetISO-8859-1"http-equiv"content-type"gtltti
tlegtMy Really Simple Web Pagelt/titlegtlt/headgtltbod
ygtGreetings!ltbrgtltbrgtThis is a really simple
Web Page.ltbrgtltbrgtIt only uses
text.ltbrgtlt/bodygtlt/htmlgt
94
Visual Structure of Web Page
95
Example HTML code
lthtmlgtltheadgtlttitlegtMy Really Simple Web
Pagelt/titlegtlt/headgt ltbodygtGreetings!ltbrgtltbrgtT
his is a really simple Web Page.ltbrgtltbrgtIt only
uses text.ltbrgtlt/bodygt lt/htmlgt
96
More Complex Page
97
HTML for More Complex Page

• lthtmlgtltheadgtltmeta content"text/html
  charsetISO-8859-1"http-equiv"content-type"gtltti
  tlegtA more complex Pagelt/titlegtlt/headgtltbodygtltbi
  ggtltbiggtltbiggtltbiggtGreetings!lt/biggtlt/biggtlt/biggtlt/big
  gtltbrgtltbrgtThis is a more complex page with
  formatted text.ltbrgtltbrgtltbiggtltbiggtltbiggtltbiggtltbiggt
  ltbiggtBIG!!!lt/biggtlt/biggtlt/biggtlt/biggtlt/biggtlt/biggtltbr
  gtltbrgtltsmallgtltsmallgtltsmallgtltsmallgtsmalllt/smallgtlt/
  smallgtlt/smallgtlt/smallgtltbrgtltbrgtltdiv
  style"text-align center"gtCenteredltbrgtlt/divgtltb
  rgtltspan style"font-weight bold"gtBoldlt/spangt
  ltspanstyle"text-decoration underline"gtUnderlin
  elt/spangt ltspanstyle"font-style
  italic"gtItaliclt/spangtltbrgtltbrgtltspan
  style"color rgb(255, 0, 0)"gtRED
  Textlt/spangtltbrgtltbrgtlta href"http//www.nebomusic
  .net"gtHyperlink to Nebo Music website.lt/agtltbrgtltbr
  gtltbrgtlt/bodygtlt/htmlgt

98
Our Objective

• To create a website that features our classrooms
  with at least 4 pages with text, graphics, and
  hyperlinks.
• Welcome page (index.html)
• Centers (centers.html)
• Student Work (studentwork.html)
• Current Events (currentevents.html)
• Publish this website to the Internet.
• (Are you scared yet? ? )

99
My Goodness! This is way too complicated!

• Fortunately, we do not have to remember about all
  this code.
• An HTML editor works like a Word Processor to
  allow us to create web pages very much like the
  way we create Microsoft Word Documents.

100
Links to Three simple exercises

• Create a Text only Web Page.
• Create a Web Page with
• Different formats of text (bold, underline, size)
• Hyperlinks to other websites.
• Create a Web Page with
• Text Formats
• Hyperlinks
• Pictures

101
Basic Web Site Layout
Page 1 Link back to Main Page
(index.html) Main Page Link to Page 1 Link to
Page 2 Link to Page 3
Page 2 Link back to Main Page
Page 3 Link back to Main Page
102
Nebomusic.net Site Layout
Chorus Link back to Main Page
(index.html) Welcome Page Link to Chorus Link to
Dance Link to Drama
Dance Link back to Main Page
Drama Link back to Main Page
103
Your Web Site Layout
Centers (with pictures) Link back to Main Page
(index.html) Welcome To My Classroom Link to
Centers Link to Student Work Link to Weekly Events
Pictures of Student Work Link back to Main Page
Weekly Events Link back to Main Page
104
Web Site Hints

• The first and main page of your site is always
  called index.html
• Default 1st place every browser looks at.
• Always name your pages with lowercase letters and
  no spaces or punctuation.
• Keep all the pages and pictures in the same
  directory!