1. IDIS 110 Foundations of Information Technology Keith Vander Linden Calvin College

2. © 2012 Calvin College 2 Nothing is more terrible than activity without insight. - attributed to Thomas Carlysle

3. © 2012 Calvin College 3 Introduction ● Course materials: – http://moodle.calvin.edu http://moodle.calvin.edu ● Course objective: – Basic fluency in Information and Communication Technologies (ICT)

4. © 2012 Calvin College Web Technologies 4 ● HTML – Hypertext Markup Language common tags: h1 p em strong img a ● URL – Uniform Resource Locator http://en.wikipedia.org/wiki/James_Bond ● HTTP – HyperText Transfer Protocol

5. © 2012 Calvin College HTML Exercise 5 007 James Bond The world is not enough. Image taken from the Internet Movie Database

6. © 2012 Calvin College Useful HTML Tags 6 Pattern: text Example: James Bond Notes: Header tags include,, … Pattern: text Example: Goldfinger Notes: Formatting tags include: (bold), (emphasized), (underlined), … Pattern: linkText Example: MI6 Notes: The linkText hyperlinks to the given URL. Pattern: Example: http://upload.wikimedia.org/wikipedia/en/c/c5/Fleming007impression.jpg Notes: The img tag has no matching close-tag.

7. © 2012 Calvin College HTML5 Canvas Exercise 7 Raindrop http://cs.calvin.edu/curriculum/idis/110/kvlinden/lib/ function init() { var canvas; var pen; canvas = getCanvas("myCanvas"); pen = getContext(canvas, "2d"); strokeEllipse(pen, 250, 250, 200, 200); }

8. © 2012 Calvin College Programs 8 ● Simple programs contain sequences of statements of the following types: – Variable declarations: var variableName; – Assignment statements: variableName = expression; – Function calls: functionName(arguments); – Comments: ● HTML5 uses Javascript for programming.

9. © 2012 Calvin College Calling Functions 9 ● Functions perform useful actions. ● To draw an ellipse, use the following pattern: strokeEllipse(context, x, y, width, height); Example: strokeEllipse(pen, 250, 250, 200, 200); Be sure to specify the arguments in the proper order.

10. © 2012 Calvin College Canvas 10 ● The HTML5 canvas is a 2D, rectangular drawing surface. x axis y axis height width … (x-1) x (x+1) … … (y-1) y (y+1) … x axis y axis x y height width (0, 0) (x, y) ● Coordinates specify x and y components. ● The origin is in the upper left corner.

11. © 2012 Calvin College Basic Drawing Functions 11 Pattern: point(context, x, y); Example: point(pen, 75, 50); Pattern: line(context, x1, y1, x2, y2); Example: line(pen, 0, 0, 75, 50); Pattern: strokeRect(context, x, y, width, height); Example: strokeRect(pen, 25, 20, 100, 60); Pattern: strokeEllipse(context, x, y, width, height); Example: strokeEllipse(pen, 75, 50, 100, 60); Pattern: strokeText(context, text, x, y); Example: strokeText(pen, "testing...", 25, 50); (x, y)

12. © 2012 Calvin College RGB Color 12 ● A canvas is a 2D array of pixels. ● Pixels have: - Intensity values for red, green & blue - An optional alpha value for transparency. Image based on Wikipedia image

13. © 2012 Calvin College Drawing Attribute Functions 13 Pattern: setLineWidth(context, widthInPixels); Example: setLineWidth(pen, 10); point(pen, 75, 50); Pattern: setStrokeStyle(context, red, green, blue); Example: setStrokeStyle(pen, 255, 0, 0); line(pen, 0, 0, 75, 50); Pattern: setFillStyle(context, red, green, blue); Example: setFillStyle(pen, 0, 0, 255); fillRect(pen, 25, 20, 100, 60); Example: setFillStyle(pen, 220, 220, 220); fillEllipse(pen, 75, 50, 100, 60); strokeEllipse(pen, 75, 50, 100, 60); Pattern: setFont(context, fontSize, fontName); Example: setFont(pen, 35, "Calibri"); setFillStyle(pen, 5, 150, 5); fillText(pen, "testing...", 25, 50);

14. © 2012 Calvin College 14 Reformed Views of Technology ● Information technology is part of God’s creation and its use is redeemable. ● Doing this requires that we: – Understand the issue – Determine if an IT-based solution is possible – Identify the strengths/weaknesses of the solution – Work to achieve the strengths and address the weaknesses What’s the Big Idea