TEACHING UNIT

CLIMATE CHANGE WEBSITE

Adela Tena Tena

CAPACITACIÓ ANGLÉS 2017-2018

1
Context and students This unit is part of the module Marked Language
and Information System Management taught in the
first year of Higher Level Training Cycle of Web
Applications Development. The curriculum of this
module is documented in the ORDEN 60/2012, 25th
of September of the Ministry of Tourism,
Education and Culture.

Students enrolled in this course come from

baccalaureate, Computer System Management
Professional Training or other Higher Level Training
Cycle, so they are aged 18 and over. Usually, they
are interested and motivated in learning both content
and language.

Most of the students have an intermediate level of

English, so they are able to understand videos with
subtitles and follow instructions.

Finally, that unit will be placed at the end of the

second term. Students have already learned about
HTML language, styles and using frameworks to
define websites templates.
Unit title CLIMATE CHANGE WEBSITE
Year of study 1ST Higher Technical Certificate in Web Applications
Development
Timing 9 hours
AIMS OF THE UNIT
The aims of the unit are:
✔ To deepen in knowledge about website components like carousel or navigation
tools in order to develop websites.
✔ To collect and select information.
✔ To distribute information properly on the website using the accurate
components.
✔ To master HTML codign.
✔ To design attractive understandable and easy to use websites.
✔ To document properly the website using the style guide.
✔ To work in groups in order to cooperate, sharing knowledge and skills, make
decisions and reach agreements.
TEACHING OBJECTIVES
The 4C framework is the key principle for planning lessons as well as for material
planning. In order to succeed when designing a lesson, I will combine all four
components: content, communication, cognition and culture.
Because the content is very technical I introduce the topic “Climate Change” not only
because it is an actual issue that affects everyone but also because is the school
project so it allows students to participate in the school community in order to
encompass the 4C's. I will plan different kind of activities that allow the authentic
communication using the four skills (listening, reading, speaking and writing) and also
promote low and hight order skills (from remembering to creating)

2
Content ✔ Parts of a website
✔ Websites components: navigation
bars, drop-down menus carousel,
progress bars ...
✔ HTML and style language
✔ Templates
✔ Web styles guide.
Cognition ✔ To remember the most important
HTML tags.
✔ To select the appropriate
components for the website
✔ To apply styles to the website.
✔ To organize the website using
frameworks.
✔ To develop the website style
guide.
Culture ✔ Causes and effects of climate
changes.
✔ Renewable energies.
✔ What we can do to keep a cleaner
planet.
✔ The utility of organizations for
climate change prevention.
Communication  Language of learning
✔ Vocabulary for position: left
right, top, bottom, center,
background, foreground,
margins...
✔ Vocabulary for colors and
measures: bright, dark,
transparent, opacity, pixels, cm.
✔ Shapes: round, square,
rectangle, border, shadow
✔ Prepositions of place: in, on, at,
under, below, above, on top of,
next to, beside, near, between.
✔ Ordering events: first, then,
before, after, next, finally

 Language for learning

✔ Environment vocabulary:
drought, seas, oceans,
hurricanes, rainfall, melt, dry...
✔ In groups request and
suggestions: Why don’t we..,
We could….,should we ……
✔ Giving opinion: The way I see it
… As far as I am concerned.
✔ Causes and effects: as a result,
therefore, so, such a … that

 Language through learning

✔ Future forms: using going to for

3
 future plans and arrangement :
We are going to use …
✔ Reason and purpose: because,
since, in order to, so that…
✔ Feelings (excitement, anger):
furious, excited, worried, upset,
enthusiastic, nervous
✔ Clarifying what we say: what I
mean is..., in other words.. let
me explain myself again..
METHODOLOGY
I will use a task-based methodology for planning the unit so I will design information
gap activities as conceptual maps, quizzes and flashcards to select information and
review technical concepts. Students will work in groups in order to achieve
agreements and make decisions. Therefore, opinion-gaps activities will be
necessary. Reasoning-gap activities will allow students to decide how distributing
information, what components use and what will be the web design.

The student centered approach is essential in planning CLIL units, in this particular
unit I will implement collaborative learning. Groups of students will work together to
create the website. I will promote active learning by means of intermediate group
activities that allow students evaluate their outcomes. I will act as facilitator
encouraging student asking for help, giving opinions and communicate actively with
classmates.

I will use scaffolding in the planning unit, taking into account the Bloom’s taxonomy
proposing tasks moving from low-level order thinking skills (understanding,
remembering) like quizzes to high-order thinking skills (create) like developing and
designing the website.
LEARNING OUTCOMES
By the end of this units students will be able to:
✔ To use languages and frameworks to develop websites.
✔ To select the suitable components.
✔ To organize information on the website.
✔ To describe the processes of designing and developing a websites.
✔ To write technical documentation.
SEQUENCE OF TEACHING/LEARNING ACTIVITIES
1 Lesson title Gathering information Timing 3h
LEARNING OUTCOMES
By the end of this units students will be able to:
✔ To understand the climate change.
✔ To collect and select information.
✔ To distribute information.
✔ To design and create the template.
WARMING ACTIVITY(ENGAGE STAGE) Timing 15 min
(1) C1-Content C2 Cognition C3-Culture C4-Communication (2) L- Listening S=Speaking R- Readign W-writing
(3) R- Remembering U-Understanding AP – Applying A – Analysing E-Evaluating C-Creating
I will introduce to students the topic for the 4C'S(1) SKILLS(2)
website “the climate change” (school's subject

4
project). I will remember students what they C1 C2 C3 C4 L S R W
have learned in previous units about HTML X X X X
language, web styles and templates. In this
Bloom's Taxonomy(3)
unit, they will learn more advanced
components and put all of them together. R U AP A E C
X X X X
Students will record activities in the portfolio
Assessment
along the unit. In each activity, I will specify
what they should keep in the portfolio for ✔ Self-assessment
assessment. I will not only evaluate the final
result but also the whole process.
(opening activity)

I will lead a brainstorming session in order to

motivate students asking questions like
Are you willing to eat less meat if it helps
reducing climate change? I help students
with sentences to give opinions.
(stimulation task)
MAIN ACTIVITIES
ACTIVITY 1 ClilStore activity Timing 1h
(1) C1-Content C2 Cognition C3-Culture C4-Communication (2) L- Listening S=Speaking R- Readign W-writing
(3) R- Remembering U-Understanding AP – Applying A – Analysing E-Evaluating C-Creating

I will propose students individually do the 4C’S(1) SKILLS(2)

clilstore Climate change Explained
C1 C2 C3 C4 L S R W
It consists of a video and an article from the
New York Times X X X X
Short answer to hard questions about climate
Bloom’s taxonomy
change.
R U AP A E C
Students will use wordlink when reading the
X X
article in order to find easily the meaning of
words that they did not know. Assessment
✔ Teacher assessment
Students should elaborate with ✔ Self assessment
https://www.mindmup.com a conceptual map
of the main issues covered in the article
distinguishing between problems and
solutions. At the same time, students will
make a list of the vocabulary they have
learned and kept both documents in the
portfolio.
Finally, students will respond this question in
order to practice writing skills (about 5 lines
each one)
• Do you feel the pattern of weather is
generally changing?
• How important is the issue of climate
change to you personally?

5
ACTIVITY 2 Planning the website Timing 1h
(1) C1-Content C2 Cognition C3-Culture C4-Communication (2) L- Listening S=Speaking R- Readign W-writing
(3) R- Remembering U-Understanding AP – Applying A – Analysing E-Evaluating C-Creating

I will use Flippity Random Name Picker to 4C’S(1) SKILLS(2)

form groups of four students.Working in
C1 C2 C3 C4 L S R W
groups, students will decide what information
about climate change they will focus on. I will X X X X X
give them some instructions and tips:
Bloom’s taxonomy(3)
About web site:
• The main page (all of the members of R U AP A E C
the group will participate)
X X X
• An individual page for each one of the
students. Each page will be different, Assessment
for instance: photo gallery, blog,
✔ Group-assessment
contact form, questionnaire form, links
✔ Teacher assessment
to games etc.
About topic:
I will recommend starting visiting:
https://climate.nasa.gov/ and
https://climatekids.nasa.gov/
Students will focus on two or three points like:
• Greenhouse gases,
• Weather effects,
• Renewable energies,
• Environmental organizations
• Countries policies,
• What we can do
• Other
Students will discuss and achieve
agreements on what information they will
focus on. Each student while write a
paragraph with one of the specific issues they
have discussed.
(Instruction / participation activity)
ACTIVITY 3 Website template Timing 1h
(1) C1-Content C2 Cognition C3-Culture C4-Communication (2) L- Listening S=Speaking R- Readign W-writing
(3) R- Remembering U-Understanding AP – Applying A – Analysing E-Evaluating C-Creating

Working in groups, students will agree about 4C’S(1) SKILLS(2)

how distributing the information collected in
C1 C2 C3 C4 L S R W
the previous activity. They will use sentences
and question using preposition of place, such X X X X
as where place the menu on top, or the right,
Bloom’s taxonomy(3)
What they will place in the center? a carousel,
an image and text or a video, where will they R U AP A E C
place the contact form on the top or on the
footer? X X X X
(Instruction / participation) Assessment
In the previous unit, students have already ✔ Teacher-assessment
done use bootstrap grids to create templates. ✔ Group-assessment
I will remain them that the information required
is on:

6
Bootstrap grid examples.
They can also review some template
examples on
https://startbootstrap.com/template-
categories/all/

After analyzing all the possibilities and reach

an agreement students will make the template
using a text editor like notepad or visual code
using bootstrap grids.

Students will show me and explain the

template using prepositions of place, ordering
events and usingfuture forms. They will attach
the template to the portfolio.
This template will be the start point for the
next lesson
(Instruction / participation closure activity)
2 Lesson title Building the website Timing 3h
LEARNING OUTCOMES
By the end of this units students will be able to:
✔ To understand technical documentation.
✔ To apply website languages structure.
✔ To use advanced components .
✔ To develop websites using frameworks.

WARMING ACTIVITY (ENGAGE STAGE) Timing 15 min

(1) C1-Content C2 Cognition C3-Culture C4-Communication (2) L- Listening S=Speaking R- Readign W-writing
(3) R- Remembering U-Understanding AP – Applying A – Analysing E-Evaluating C-Creating

This lesson is the continuation of the previous 4C’S(1) SKILLS(2)

one. Each group of students have already
C1 C2 C3 C4 L S R W
agreed about the distribution of the
information and they have done their X X X X
template. Now is time to code with HTML
Bloom’s Taxonomy(3)
tags. Previously, they learned the main HTML
tags and in this lesson, they will learn to R U AP A E C
combine these tags with the bootstrap
X X
framework to create more complex and useful
components like menus, tabs, carousel …. Assessment
In order to review their knowledge about ✔ Self assessment
HTML tags, students will fill the grid with the ✔ Teacher assessment
types of tags
TYPE HTML TAGS
Semantic <header> <section>
H1Header <H1>
Font <p>
List <ul>
Table <th>

7
Form <input>
Multimedia <img>
Links <a>
Others <br>
This activity will be done by all class on the
board and each student will write down his
personal grid with the purpose of recording in
his or her portfolio.

Students evaluate themselves their previous

knowledge about HTML language.
(opening and instruction/participation
activity)
MAIN ACTIVITIES
ACTIVITY 1 Advanced components Timing 1h
(1) C1-Content C2 Cognition C3-Culture C4-Communication (2) L- Listening S=Speaking R- Readign W-writing
(3) R- Remembering U-Understanding AP – Applying A – Analysing E-Evaluating C-Creating

Students can find information about bootstrap 4C’S(1) SKILLS(2)

components with examples in the web:
C1 C2 C3 C4 L S R W
https://getbootstrap.com/docs/4.1/components
To learn how some of the components(cards, X X X X X X
navbar, carousel, modal and collapse) work.
Bloom’s Taxonomy(3)
Students will work in pairs to test some
examples in their computers trying to imitate R U AP A E C
the model I will provide them (see activity1 in
X X X X
the annex).
Assessment
To make sure students have learned through ✔ Teacher assessment
examples I will use flashcards with some ✔ Self assessment
questions and problems solving, so we also
practice how asking questions.
(instruction / participation activity)
ACTIVITY 2 Integrating components in the website Timing 1:15h
(1) C1-Content C2 Cognition C3-Culture C4-Communication (2) L- Listening S=Speaking R- Readign W-writing
(3) R- Remembering U-Understanding AP – Applying A – Analysing E-Evaluating C-Creating

This activity is the continuation of lesson1, 4C’S(1) SKILLS(2)

students will integrate the web components
C1 C2 C3 C4 L S R W
learned in the previous activity into the
template of lesson1.They will also add the X X X X X
information about climate change that they
Bloom’s Taxonomy(3)
have collected in lesson1 (images, videos,
text and their own opinions). R U AP A E C
This activity consists in two tasks:
x x x
• a group tasks: students will develop
together the main web page Assessment
• individual task: each student develops ✔ Teacher assessment
his or her own page (a form, a photo or ✔ Self assessment
video gallery, a blog …) ✔ Group assessment

8
Students must not just copy and paste
information, they should rephrase the
collected information.
(instruction/participation activity)
ACTIVITY 3 Merging process Timing 30 min
(1) C1-Content C2 Cognition C3-Culture C4-Communication (2) L- Listening S=Speaking R- Readign W-writing
(3) R- Remembering U-Understanding AP – Applying A – Analysing E-Evaluating C-Creating

In this activity students will merge the main 4C’S(1) SKILLS(2)

and individual web pages into the website
C1 C2 C3 C4 L S R W
making sure that works fine, reviewing and
enhancing the website if necessary. X X X X
Bloom’s Taxonomy(3)
Each student will explain their individual task
to the group They will use sentences with R U AP A E C
ordering events like first, then, before, after,
X X X
next, finally…
Assessment
Students will add the main page and the ✔ Teacher assessment
individual page to the portfolio for teacher ✔ Self assessment
assessment. ✔ Group assessment
By means of a questionnaire students will
evaluate his or her work and their teammates’
performance.
(see self assessment and group
assessment in the annex)

I also will assess the teaching learning

process using as a basis rubrics from the
document
Assessment-and-evaluation-in-CLIL.pdf
page 100 (holistic rubric)
page 106( assessment grid for content and
cooperative work )
closure activity)
3 Lesson title Customizing the website Timing 3h
LEARNING OUTCOMES
By the end of this units students will be able to:
✔ To work with flipped classroom methodology
✔ To apply styles on a website
✔ To use frameworks for theming
✔ To write technical a website guide styles
WARMING ACTIVITY(ENGAGE STAGE) Timing 20 min
(1) C1-Content C2 Cognition C3-Culture C4-Communication (2) L- Listening S=Speaking R- Readign W-writing
(3) R- Remembering U-Understanding AP – Applying A – Analysing E-Evaluating C-Creating

This is the last lesson of the unity, is time to 4C’S(1) SKILLS(2)

personalize the websites applying different
C1 C2 C3 C4 L S R W
styles like typography, colors, shapes, borders
and so on. In previous units students have X X X X X

9
learned about CSS styles, so in this warning Bloom’s Taxonomy(3)
activities I will review with the whole class
R U AP A E C
CSS concepts using quizlet.com to match
definition and terms. X X
https://quizlet.com/1745900/css-flash-cards/
Assessment
(quizlet.com have a big variety of activities
(writing, listening and games) ✔ Self assessment
(opening and instruction/participation
activity)
MAIN ACTIVITIES
ACTIVITY 1 Improving design Timing 50 min
(1) C1-Content C2 Cognition C3-Culture C4-Communication (2) L- Listening S=Speaking R- Readign W-writing
(3) R- Remembering U-Understanding AP – Applying A – Analysing E-Evaluating C-Creating

In order to plan this activity, I will use flipped 4C’S(1) SKILLS(2)

classroom methodology, so students will
C1 C2 C3 C4 L S R W
watch the video at home.
Bootstrap 4 Theme Customization (with Sass) X X X X X X
| BOOTSTRAP 4 TUTORIAL Bloom’s Taxonomy(3)
In the classroom, working in groups students
R U AP A E C
will agree about the website look (colors,
shapes, sizes, typography) and apply them X X X
using the bootstrap framework as they have
Assessment
been taught in the video. Students will also
consult the web documentation theming ✔ Teacher assessment
bootstrap. Students will apply the same style ✔ Group assessment
in every website page.

With this activity, the website is finished and of

course, students will record it in the portfolio
With this activity the website is finished and of
course, student will record it in the portfolio
(instruction/participation activity)
ACTIVITY 2 Writing the style guide Timing 50 min
(1) C1-Content C2 Cognition C3-Culture C4-Communication (2) L- Listening S=Speaking R- Readign W-writing
(3) R- Remembering U-Understanding AP – Applying A – Analysing E-Evaluating C-Creating

A style guide is a collection of pre-designed 4C’S(1) SKILLS(2)

elements, graphics and rules that designers or
C1 C2 C3 C4 L S R W
developers should follow to ensure a cohesive
experience among different pages. Also it X X X X X X
helps to ensure that future development or
Bloom’s Taxonomy(3)
third-party production will follow brand
guidelines and will be perceived as part of the R U AP A E C
overall brand.
X X X X
And, as is only natural, this activity consists of
writing the website style guide. In order to help Assessment
students, I will show them some examples ✔ Teacher assessments
such as ✔ Group assessment
UPV style guide or National Geographic style
guide
Working in groups, they will divide the style

10
guide into four sections, one for each student.
Students will add the style guide to portfolio
(instruction/participation activity)
ACTIVITY 3 Exposing the website Timing 1h
(1) C1-Content C2 Cognition C3-Culture C4-Communication (2) L- Listening S=Speaking R- Readign W-writing
(3) R- Remembering U-Understanding AP – Applying A – Analysing E-Evaluating C-Creating

This is the last activity of the unit, at this point, 4C’S(1) SKILLS(2)
each group will expose their work to the rest
C1 C2 C3 C4 L S R W
of the classmates. Each group has about 8
minutes to explain their work including what X X X X X
information about climate change is focused
Bloom’s Taxonomy(3)
on their website and how they have developed
the website. R U AP A E C

Next, I will deliver students some assessment X X

survey about climate change, technical Assessment
aspects and pros and cons of working in
group. Altogether, Students and teacher will ✔ Teacher assessment
make a final reflection about the teaching-
learning process and the level of satisfaction.
Finally, students will vote the best website.

ASSESSMENT

The assessment goals of this unit are to verify the degree of achievement in analyzing
and developing websites following the correct phases. To evaluate the autonomy and
the ability to work in groups and the improvement in interaction using the target
language.
I will take into account to assessment the following criteria:
✔ Identification of relevant information from various sources of information.
✔ Learning through examples.
✔ Applying new knowledge properly.
✔ Writing technical documentation.
✔ Using language for interaction.
✔ Ability to assess own progress.
✔ Ability to cooperate in carrying out group tasks.

In order to evaluate this unit, I will apply formative assessment observing and asking
questions, tasks recorded in the portfolio, surveys, tests, checklists and rubrics. The
aim of the formative assessment is to check how knowledge and understanding are
improving through the lessons, how students are developing communication and
thinking skills, how is going the process like the accuracy of materials, the timing for
activities and if it needs adjustments. Besides, I will pay attention to the interest,
motivation, and engagement of students. At the end of each lesson, I will spend some
minutes for reflection (self, group and process) using surveys or questionnaires. At the
end of the unit I will evaluate the final product, in this case, the website and their
exposition, that is called summative assessment.

I will use the three types of assessment:

➔ Teacher assessment:
As a teacher, I will act as facilitator along the unit observing and helping

11
 students to develop the tasks. At the same time, I will take notes using a
rubric to assess the process in each activity taking into account:
✔ Timing of activity
✔ Interest of students
✔ Difficulties
➔ Self-assessment: Students will be aware their own progress
✔ autonomy
✔ motivation
✔ improvement
✔ critical thinking
➔ peer-assessment: working in pair and groups
✔ collaboration
✔ interaction
✔ integration

Teacher assessment, self assessment peer assessment and group assessment are
especially valuable in formative assessment in order to achieve the two essential
principles in learning assessment: validity and reliability.
RESOURCES
For this unit I will use the followings materials:
✔ Computers, projector, whiteboard
✔ Text editors, for example visual code
✔ Clilstore and Wordlink
✔ Online tools to make conceptual maps,
✔ Websites with technical documentation and examples
✔ Flascards
✔ Quizlet (a variety of listening, writing, speaking and games
to match definitions and terms)
✔ youtube
✔ portfolio
✔ Questionnaires, surveys and rubrics

12
 ANNEXES

Lesson2 → Activity 1: Advanced components

In this activity students take the examples from bootstrap documentation and they will
made changes to obtain the image given by the teacher

1. Single dropdown menu

https://getbootstrap.com/docs/4.1/components/dropdowns/

<div class="dropdown">
<button class="btn btn-secondary dropdown-
toggle" type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-
labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another
action</a>
<a class="dropdown-item" href="#">Something
else here</a>
</div>
</div>

Make the necessary changes to obtain the following dropdown button

SOLUTION
<div class="btn-group dropright"">
<button type="button" class="btn btn-success
btn-lg">FACTS</button>
<button type="button" class="btn btn-success
dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-left"
aria-labelledby="dropdownMenuButton">
<a class="dropdown-item disabled"
href="#">Evidence</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">causes</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item active"
href="#">effects</a>
</div>
</div>

13
I will use flash cards to be sure how components works and at the same time we will
practice asking questions
dropdown flashcards

14
Lesson2 → Activity 3: Self assessment

STUDEN’S NAME CLASS

1 2 3 4
MY EVALUATION
lacking adequate good excellent
Bootstrap documentation is clear
and easy to understand.
The class examples have been
useful.
I needed extra documentation to
do the task
I needed help with the individual
tasks
Th timing for activities has been
enough
I followed the teacher
explanations.
I answered the teachers’s
questions
I repeat verbally whtat I had
previously hear or written
I have known enough vocabulary
to express my own ideas.
I have known enough grammar
to express myself.
I tried to express orally, in my 1
own words what I heard, read or
written
DIFFICULTIES ENCOUNTERED

WHAT INTERESTED ME THE

MOST

15
Lesson2 → Activity 3: Group/peer assessment

STUDEN’S NAME CLASS

1 2 3 4
GROUP EVALUATION lacking adequate good excellent
Working in gruup has been profitable
We feel satisfied with our work
we have reached agreements easily
We have lacked order and work methods
to take advantage of the time
Some of the group have been worked
more than others
We have lost time talking about other
matters
I have helped others more than I should
I feel comfortable working In group
I have been listening and paying attention
my coallegues
I have participated in the task group
I have shared my ideas with my group
My colleagues have taken my opinions
into account
I have asked for jelp when I had
difficulties
I have learn from my colleagues
COLLEGUES EVALUATION PARTICIPATION LEVEL
Name names 1-5
He or she help a lot to others

He or she has done his or her task

properly and willingly

16