IDIS 110 Foundations of Information Technology

IDIS 110 Foundations of Information Technology Keith Vander Linden Calvin College

Nothing is more terrible than activity without insight. - attributed to Thomas Carlysle

Introduction • Course materials: • http://moodle.calvin.edu • Course objective: • Basic fluencyin Information and Communication Technologies (ICT)

Web Technologies • 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

HTML Exercise <html> <head> <title>007</title> </head> <body> <h1>James Bond</h1> <p><em>The world is not enough.</em></p> <p><imgsrc="bond.gif" /></p> <p>Image taken from the <a href="http://www.imdb.com">Internet Movie Database</a></p> </body> </html>

Useful HTML Tags • Pattern: <h1>text</h1> • Example: <h1>James Bond</h1> • Notes: Header tags include <h1>, <h2>, <h3> … • Pattern: <strong>text</strong> • Example: <strong>Goldfinger</strong> • Notes: Formatting tags include: <strong> (bold), • <em> (emphasized), <ul> (underlined), … • Pattern: <a href="URL">linkText</a> • Example: <a href="https://www.sis.gov.uk">MI6</a> • Notes: The linkText hyperlinks to the given URL. • Pattern: <imgsrc="URL" /> • Example: <imgsrc="http://upload.wikimedia.org/wikipedia/en/c/c5/Fleming007impression.jpg" /> • Notes: The img tag has no matching close-tag.

HTML5 Canvas Exercise <!DOCTYPE html> <!– Comments go between comment markers as shown here. --> <html> <head> <title>Raindrop</title> <script src="http://cs.calvin.edu/curriculum/idis/110/kvlinden/lib/fit.js"></script> <script type="text/javascript"> function init() { var canvas; var pen; canvas = getCanvas("myCanvas"); pen = getContext(canvas, "2d"); strokeEllipse(pen, 250, 250, 200, 200); } </script> </head> <body onload="init();"> <canvas id="myCanvas" width="500" height="500"></canvas> </body> </html>

Programs • Simple programs contain sequences of statements of the following types: • Variable declarations: • varvariableName; • Assignment statements: • variableName= expression; • Function calls: • functionName(arguments); • Comments: • <!–- your comments here…--> • HTML5 uses Javascript for programming.

Calling Functions • 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.

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

Basic Drawing Functions • 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) (x, y) (x, y)

RGB Color • 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

Drawing Attribute Functions • 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);

What’s the Big Idea 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

IDIS 110 Foundations of Information Technology