logo

Unit 5: Online language learning

Learning outcomes

By the end of this unit you should:

  • understand the evolution of the web
  • have transformed this webpage into a learner-friendly website by creating activities for the following aims:
    1. know the differences between Web 1.0 to Web 4.O CREATED
    2. know the impact that Web 1.0 to Web 4.O has on language learning
    3. be able to describe the Document Object Model (DOM) CREATED
    4. be familiar with the separation of content, styling, behaviour and interaction CREATED
    5. understand the importance of clear aims, outcomes, instructions and web design CREATED
Rubik

Activity 1: Webpage transformation

Work as a team to create Activities 2 to 6. Aim to finish this task during classtime. You can use any resources, but you must acknowledge all sources used. Use the same theme and conventions as the other units in this course.

  1. Activity 2: Reading task - find or create a paragraph describing Web 1.0 to Web 4.0. Create a couple of reading comprehension questions, and answers that are hidden using w3css accordian function
  2. Activity 3 : Thinking task - get students to consider how the changes to Web 2.0, 3.0 and 4.0 affected language learning. Show the connection between the different types of web to different education theories. Provide a suggested answer/commentary.
  3. Activity 4: Reading task - find a image of DOM with a creative commons licence. Explain the DOM simply. Suggest students check "page source" of this webpage to check DOM of this page
  4. Activity 5: Insert and describe a table showing - html used for content, css for styling, js for behaviour and php for interaction. Note that other choices are possible. Use event managers to change DOM in Activity 5 using JS.
  5. Activity 6: Reading task - Incorporate w3css glossary function for key words - aim = what you learn, outcome = what you can do (skill) or what you create (product), instruction = order, UX = ?, UI = ?.

Submit your code via the learning management system ( ELMS ) as an HTML file using the same format as the example divisions shown on this webpage.

Activity 2: Reading task

Read.

The Internet has come a long way from Web 1.0 to Web 4.0, and a lot has changed in its more than 50 years of existence. Below is a brief history of the development of Internet technologies. Read the following paragraphs and answer the questions:

Web 1.0

Web 1.0 was the first stage in the development of the Internet. This period was characterized by the fact that content creators could be counted on one hand, all other Internet users were consumers. At this stage, advertising on websites was prohibited; it was practically nowhere to be found. Web 1.0 can be characterized as a content delivery network that allowed information to be displayed on websites.

Web 2.0

Web 2.0 is the second stage in the development of the Internet and a kind of social network. Web 2.0 is an internet that values user-generated content, site usability, and interoperability. At this stage, it is not the technical specifications of the sites that change, but the way the web pages are designed and used.

Web 3.0

Web 3.0 is the result of the evolution of Internet use and interactions. The Internet has become a database. This stage is characterized by the optimization of the internal part of the sites, a lot of attention was paid to this. It was at this stage of the development of the Internet that the most innovations were introduced into the work of sites and the Internet as a whole.

Web 4.0

Web 4.0 is the result of the rapid development of Internet technologies. Today, Web 4.0 is about mobility and voice interaction between the user and robots. Previously, to interact with the Internet, the user had to be at the desktop in front of the computer, but mobile devices allow the user to use and distribute information regardless of location.

Question.1 Which stage did the interaction between users show up?

Question.2 From web 1.0 to 4.0, which stage are we might be in?

Question.1: There was no interaction with or between users in the first stage, and there was no user-generated content as well.

Question.2: Although the Internet will soon be replaced by Web 4.0, but we are currently in 3.0 stage

Activity 3: Heading

To be completed.

Put text here.

Activity 4: Reading

The Document Object Model, or DOM for short, is a programming interface for web documents. The DOM is a tree-like representation of the elements and objects that make up a web page, such as HTML tags, text, images, and scripts. Each element in the DOM tree can be accessed and manipulated using programming languages like JavaScript, allowing web developers to create dynamic and interactive web pages. (Text generated by chatGPT4). The following diagram shows an example DOM (Source: Wikipedia).

View the DOM of this webpage (right click -> view source) and find the link to ELMS in activity 1. Based on what you find, describe what "<a/>" and "href" are for. Click "View Answer" below to view the answer.

"<a/>" provides a text link, and "href" defines where the link leads.

Activity 5: Compare the Differences Here

Please read the table carefully, and then try to compare the ability of different technologies used in webpage development.

Please notice HTML, CSS, JavaScript and PHP are only among those hundreds of options for development.

Technology Function
HTML It is for content. That is, you can read these words in this page thanks to HTML.What if I type nothing? Oh, then you can read nothing.
CSS It is for styling. You may not understand art so much, but you have no need to worry. Have you ever thought about why this page is in dark background, and why you are reading white text? It is the part CSS is responsible for.

Here, let me use CSS to trick you, by making it ugly and difficult to read!

JavaScript Maybe you think HTML+CSS is enough, but try to MOVE your pointer HERE. Let me show you what JavaScript can do for you! Yes, JavaScript, or JS, can control the behaviour of the website. This time, I use JavaScript to control the webpage to alert sonmething when you move your pointer here.
PHP It is for interaction. It is not necessary for some webpage, but for Amazon, it is a very basic and important function that you can input and submit your username and password, and then the server of Amazon will check if it is correct. This kind of interaction between you and Amazon server is carried by PHP.

Activity 6: Reading task

Read the following description of creating an online language learning activity. You can reveal explanations of key words by hovering over the words.

Designing an online learning activity involves several key elements, including setting a clear learning aimA general statement that describes the overall goal or objective of a learning activity or course

It is also necessary to identify specific learning outcomesA specific statement that describes what a learner will be able to do, know or understand as a result of completing a learning activity or course. These outcomes should be measurable and achievable, and should guide the selection of appropriate instructional materials and methods.

In the materials, it is necessary to use clear instructionsA set of directions or guidance given to someone in order to complete a task or activity. In this context, it refers to an order or command given to someone to do something. so learners understand what they need to do.

In addition, effective web designThe process of creating and designing websites for the internet. It involves a range of activities, including graphic design, layout design, content creation, and user experience design, all with the goal of creating a visually appealing and user-friendly website. is crucial for creating an engaging and user-friendly learning experience. This includes designing a visually appealing layout, organizing content in a clear and logical way, and ensuring that navigation is intuitive and easy to use. By keeping these elements in mind, online learning activities can be designed to effectively meet learners' needs and help them achieve their desired learning outcomes.

Review

Can you do the following?

  1. Explain the evolution of the web from Web 1.0 to Web 4.0.
  2. Describe the DOM of a webpage.
  3. Explain the separation of layers in web design.
  4. State the essential components of an online learning activity.

If you cannot, make sure that you do before your next class.

Running count: 48 of 65 concepts covered so far.