1. NSF North Mississippi GK-8 Program ‘Til You Drop Brenteria Travis NSF North Mississippi GK-8

2. What are Programs? Programs are a detailed set of instructions that tell the computer what it is that needs to be solved. It tells the computers what to do and tells other humans what it is that you want the computer to do.

3. NSF North Mississippi GK-8 Things that are programmed Video games ATMs Cash registers Washing machines Microwaves Drink/snack machines Casino games

4. NSF North Mississippi GK-8 Languages Programming Languages are the ways we communicate with the machines. We learn the language. We write the program in a language. There are many, many programming languages in existence.

5. NSF North Mississippi GK-8 Programming Languages BASIC Pascal Fortran Cobol C C++ Java Perl Python MatLab HTML ActionScript JavaScript SQL

6. NSF North Mississippi GK-8 What do you think is the most important concept for writing programs?

7. Exercise: How to Create a Peanut Butter and Jelly Sandwich

8. NSF North Mississippi GK-8 Important Things to Remember: Be Specific! Be Very Detailed! Computers are not Humans They do not have common sense!!!

9. NSF North Mississippi GK-8 Project Objectives Activity 1: Create an Advanced HTML Webpage Frames Applets Activity 2: Create an Introductory 3-D Graphics Program

10. NSF North Mississippi GK-8 Activity 1: HTML

11. NSF North Mississippi GK-8 What is HTML? Hyper Text Markup Language Tag-based language used to code WebPages for the Internet

12. NSF North Mississippi GK-8 HTML Code and Page Example Page Example Page This is an example of an HTML page. It shows how to create this page using the tag format. For further details on how to write an HTML page using an editor and the tags, go to http://smartweed.olemiss.edu/nmgk8. Paragraph Tag

13. NSF North Mississippi GK-8 How Do We Create HTML? Option 1: Manually type each line of code in a text editor. Option 2: Use software tools that allow you to build Web pages without writing code.

14. NSF North Mississippi GK-8 HTML Tools and Editors Programming Tools Microsoft FrontPage Netscape Composer Macromedia Dreamweaver Program Editors TextPad UltraEdit Notepad

15. NSF North Mississippi GK-8 What will we do? HTML Tool: Microsoft FrontPage

16. NSF North Mississippi GK-8 Microsoft FrontPage Microsoft FrontPage is a tool created by Microsoft that allows for the creation of Web pages using drag- and-drop operations. FrontPage functions are very similar to Microsoft Word. Difference: When saving a file, it converts all the contents to the HTML tag format.

17. Microsoft FrontPage Menu Bar Tool Bar Canvas

18. NSF North Mississippi GK-8 Applets

19. NSF North Mississippi GK-8 Java: Applet A small program written in Java and included in a HTML page. It is independent of the operating system on which it runs. (Windows or Mac) An applet can be used to display scrolling text in a specific area, special effects, animations, or calculations.

20. NSF North Mississippi GK-8 Example: ******************************************************** // Snowman.java Author: Lewis and Loftus // Demonstrates basic drawing methods and the use of color. //****************************************************** import java.applet.Applet; import java.awt.*; public class Snowman extends Applet { //----------------------------------------------------------------- // Draws a snowman. //----------------------------------------------------------------- public void paint (Graphics page) { final int MID = 150; final int TOP = 50; setBackground (Color.cyan); page.setColor (Color.blue); page.fillRect (0, 175, 300, 50); // ground page.setColor (Color.yellow); page.fillOval (-40, -40, 80, 80); // sun page.setColor (Color.white); page.fillOval (MID-20, TOP, 40, 40); // head page.fillOval (MID-35, TOP+35, 70, 50); // upper torso page.fillOval (MID-50, TOP+80, 100, 60); // lower torso page.setColor (Color.black); page.fillOval (MID-10, TOP+10, 5, 5); // left eye page.fillOval (MID+5, TOP+10, 5, 5); // right eye page.drawArc (MID-10, TOP+20, 20, 10, 190, 160); // smile page.drawLine (MID-25, TOP+60, MID-50, TOP+40); // left arm page.drawLine (MID+25, TOP+60, MID+55, TOP+60); // right arm page.drawLine (MID-20, TOP+5, MID+20, TOP+5); // brim of hat page.fillRect (MID-15, TOP-20, 30, 25); // top of hat }

21. NSF North Mississippi GK-8 If we want an applet, do we have to write code all the time? Answer: No!

22. NSF North Mississippi GK-8 Anfy

23. NSF North Mississippi GK-8 Anfy Is a programming tool that allows us to create Java applets without directly writing code. Gives the opportunity to add exciting graphical applets to our websites with simple “Click” and “Add” functionalities.

24. NSF North Mississippi GK-8 Anfy’s Opening Page

25. NSF North Mississippi GK-8 Anfy Demo: Open Anfy Choose the following Categories and Menu Items. Click the “Preview” button for the following: Banner/Slideshow & MOSAIC Fractals/Alife & FLOZOIDS Image Effects & ANSTRETCH Image Effects & LENS Other & ANPUZZLE

26. NSF North Mississippi GK-8 Activity 2: Beginner’s Programming

27. NSF North Mississippi GK-8 How do we learn to program? Option 1: Sit in front of a computer with a book and type code Option 2: Sit in front of a computer with a book and type code Option 3: Download a beginner’s programming software tool and learn the initial concepts of programming using 3-D graphics!!

28. NSF North Mississippi GK-8 Alice Alice is a tool created in Java that teaches programming concepts to beginners using 3-D animations. Alice was created at Carnegie Mellon for the purpose of enticing beginner programmers into programming. It allows the user to create 3-D “Worlds” incorporating objects, environments, and actions with drag- and drop programming techniques.

29. NSF North Mississippi GK-8 Example: Alice World Environment Object

30. NSF North Mississippi GK-8 Alice Demo: Double-click the “Alice” icon on your desktop. On the opening pop-up screen, click the “Examples” tab. Double-click the “IceSkater” icon on that screen. Click the “Play” button in the upper left-hand corner of the screen.

31. NSF North Mississippi GK-8 Alice: Code Scene Methods Built in Properties Objects

32. NSF North Mississippi GK-8 What we want to accomplish Create new web pages using Microsoft FrontPage Create a Java applet for the webpage using Anfy Create 3-D programs using Alice

33. NSF North Mississippi GK-8 Sources: Dann, W., S. Cooper, and R. Pausch. 2005. Learning to Program with Alice: Beta Version. Upper Saddle River, NJ: Pearson Prentice Hall. Lewis, J. and W. Loftus. 2001. Java Software Solutions: Foundations of Programs Design. Addison Wesley Longman, Inc. Alice v2.0: Learn to Program Interactive 3D Graphics. 1999-2005. Accessed 2005 November 14.. Anfy Homepage. 1997-2003. About Anfy Team. Accessed 2005 November 14.. Microsoft Office Training. 2005. Designing a Website with FrontPage. Accessed 2005 November 14..

34. NSF North Mississippi GK-8