Time and computers
Download as DOCX, PDF0 likes615 views
This lesson plan focuses on time and computers. Students will learn to code clocks and convert between calendars using HTML5, CSS, and JavaScript. They will create art objects related to time, such as clocks and calendars, that use programming concepts like canvas drawing, CSS styling, and JavaScript functions. Students will also explore time zones by creating an "Erasmus clock" and comparing dates using JavaScript methods. The lesson involves both individual and group work, uses online coding resources, and aims to improve students' coding skills.
Time and computers
- 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