Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "IDIS 110 Foundations of Information Technology Keith Vander Linden Calvin College."— Presentation transcript:

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: – ● 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 – HyperText Transfer Protocol

5 © 2012 Calvin College HTML Exercise 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: Notes: The img tag has no matching close-tag.

7 © 2012 Calvin College HTML5 Canvas Exercise 7 Raindrop 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


Download ppt "IDIS 110 Foundations of Information Technology Keith Vander Linden Calvin College."

Similar presentations


Ads by Google