Erasmus + arteducation.eu Time upper secondary Francisco Perez

1. LESSON PLAN: TIME AND COMPUTERS
DATE: the 9th of November, 2016
GRADE: the 11th
TEACHERS: Francisco Pérez García
THEME: 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 lesson
TYPES OF INTERACTION: teacher – student, student – student, computer-student
TEACHING 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
WARMER
They 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 SUBJECT
Students will be informed that during this lesson they will learn some English instructions
in Javascript, HTML5 and CSS to create objects to express time.

2. COMMUNICATION OF KNOWLEDGE
Activity 1- Programming a clock
Part I - Create the Canvas
The clock needs an HTML container. Create an HTML canvas:
Canvas for the clock
Part II - Draw a Clock Face
The clock needs a clock face. Create a JavaScript function to draw a clock face:

3. Clock face
Part III - Draw Clock Numbers
The clock needs numbers. Create a JavaScript function to draw clock numbers:

4. Clock numbers
Part IV - Draw Clock Hands
The clock needs hands. Create a JavaScript function to draw clock hands:

5. Clock hands
Part V - Start the Clock
To start the clock, call the drawClock function at intervals:

6. 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 Example
ISO 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 8601
International Standard
Organization rule 8601
YYYY-MM-DD or YYYYMMDD
It is easer to order everything!
Date Get Methods
Get methods are used for getting a part of a date. Here are the most common
(alphabetically):

7. Method Description
getDate() 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 Methods
Set methods are used for setting a part of a date. Here are the most common
(alphabetically):
Method Description
setDate() 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 Dates
Dates can easily be compared.

8. The following example compares today's date with January 14, 2100:
Code example
Activity 3. Understandthe time zones creatingan Erasmus clock

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