Time and computers

LESSON PLAN: TIME AND COMPUTERS

DATE: the 9th of November, 2016GRADE: the 11thTEACHERS: Francisco Pérez GarcíaTHEME: Time and computers Crosscurricular activity involving communication in a foreign language (English), computer sciences and art

COMPETENCES:- Design by using HTML5, CSS and Javascript libraries in order to create time related objects.- Understand the diferent types of calendar (Julian, Gregorian, Islamic, Hebrew) and the role of ISO 8601.- Understand the possibilities of programming in art object with a time component (e.g. p5.js javascript library)- Understand the drawing possibilities of programming with a canvas element (e.g. canvas in HTML5)- Understand the style possibilites of programming with CSS (Cascade Style Sheet)- Understand the role of random numbers and variables in the generation of an art objects- Learn to program clocks by using mathematical funcions and coding- Learn how to use conditional statements to tell the current date and time in natural English by using real time javascript functions

TYPE OF LESSON: Combined lessonTYPES OF INTERACTION: teacher – student, student – student, computer-studentTEACHING TOOLS: the blackboard, the projector and a computer room with software: Sublime text code editor and the web w3schools.com to learn coding.

TIME: 4 lessons of 50 minutes

WARMERThey are asked to review their mobiles and the internet to find this information, specially to practice coding online at w3schools.com in order to improve their coding skills by using another code editor as Sublime Text or Visual Studio Code

LEARNING STRATEGY

Create codes using as a code editor Sublime Text or Visual Studio Code in order to create art object related to art.

FORMULATION OF THE SUBJECTStudents will be informed that during this lesson they will learn some English instructions in Javascript, HTML5 and CSS to create objects to express time.

COMMUNICATION OF KNOWLEDGE

Activity 1- Programming a clock

Part I - Create the CanvasThe clock needs an HTML container. Create an HTML canvas:

Canvas for the clock

Part II - Draw a Clock FaceThe clock needs a clock face. Create a JavaScript function to draw a clock face:

Clock face

Part III - Draw Clock NumbersThe clock needs numbers. Create a JavaScript function to draw clock numbers:

Clock numbers

Part IV - Draw Clock HandsThe clock needs hands. Create a JavaScript function to draw clock hands:

Clock hands

Part V - Start the ClockTo start the clock, call the drawClock function at intervals:

Clock start

Example at http://arteducation.eu/clock

Activity 2. Explore the calendar converter at http://arteducation.eu/calendars and propose codes to interconvert calendars

Date formats: There are many formats and many calendars. These are examples for the Gregorian calendar

Date format ExampleISO Date "2016-09-11" (The International Standard)Short Date "11/09/2016"Long Date “Nov 09 2016" or "09 Nov 2016"Full Date "Wednesday November 9 2016"

ISO 8601International Standard Organization rule 8601YYYY-MM-DD or YYYYMMDDIt is easer to order everything!

Date Get MethodsGet methods are used for getting a part of a date. Here are the most common (alphabetically):

Method DescriptiongetDate() Get the day as a number (1-31)getDay() Get the weekday as a number (0-6)getFullYear() Get the four digit year (yyyy)getHours() Get the hour (0-23)getMilliseconds() Get the milliseconds (0-999)getMinutes() Get the minutes (0-59)getMonth() Get the month (0-11)getSeconds() Get the seconds (0-59)getTime() Get the time (milliseconds since January 1, 1970)

Date Set MethodsSet methods are used for setting a part of a date. Here are the most common (alphabetically):

Method DescriptionsetDate() Set the day as a number (1-31)setFullYear() Set the year (optionally month and day)setHours() Set the hour (0-23)setMilliseconds() Set the milliseconds (0-999)setMinutes() Set the minutes (0-59)setMonth() Set the month (0-11)setSeconds() Set the seconds (0-59)setTime() Set the time (milliseconds since January 1, 1970)

Compare DatesDates can easily be compared.

The following example compares today's date with January 14, 2100:

Code example

Activity 3. Understand the time zones creating an Erasmus clock

Create an art clock

Change the functions previously explained in order to create an art clock