Topicm29fc33ea40e2111c_1528449000663_0Topic

Principles of Website designwebsite designWebsite design

Levelm29fc33ea40e2111c_1528449084556_0Level

Second

Core curriculumm29fc33ea40e2111c_1528449076687_0Core curriculum

Grades VII‑VIII

II. Programming and solving problems by using the computer and other digital devices. Using computer applications, the student:

2) creates documents and presentations, including those in a cloud in order to solve problems and create papers from various fields (subjects), adjusts the format and the appearance of the research papers to their content/purpose and demonstrates the following skills:

e) creating a simple website including: text, images and hyperlinks, with the use of the basic commands of HTML.

III. Using the computer, digital devices and computer networks. The student:

2) develops the skill of using various devices for creating the electronic versions of texts, images, sounds, films and animations;

3) uses correctly the terminology related to computer science and technology.

Timingm29fc33ea40e2111c_1528449068082_0Timing

45 minutes

General objectivem29fc33ea40e2111c_1528449523725_0General objective

Understanding the principles of website design.

Specific objectivesm29fc33ea40e2111c_1528449552113_0Specific objectives

1. Getting to know the principles of website design.

Learning outcomesm29fc33ea40e2111c_1528450430307_0Learning outcomes

The student:

- knows the principles of website design.

Methodsm29fc33ea40e2111c_1528449534267_0Methods

1. Flipped classroom.

2. Discussion.

Forms of workm29fc33ea40e2111c_1528449514617_0Forms of work

1. Indvidual work.

2. Whole class.

LESSON STAGESm29fc33ea40e2111c_1528450135461_0LESSON STAGES

Introductionm29fc33ea40e2111c_1528450127855_0Introduction

Task 1

Students open several websites from a similar industry, and then write the similarities and differences between them. They take into account the geometric form of the pages, their layoutlayoutlayout, colours used, whether they are built based on available CMS systems or are written in HTML, etc.

[Table 1]

Procedurem29fc33ea40e2111c_1528446435040_0Procedure

Task 2

Students read the text and then, based on the information it contains, they make a multimedia presentation on the principles of website designwebsite designwebsite design.

In the modern world, dominated by electronic communication, websites play a key role. In order to fulfill their tasks, they should be well designed and properly made. When creating a website (as well as a blog, fan page or online store) it is good to have a similar approach as you have when building a house or a machine - first define the expected functions and appearance, and then the design and mechanisms of operation.

When designing a website, the following recommendations should be taken into consideration:

- Create a website to be responsive or adjusting its image and layoutlayoutlayout to the device on which it will be viewed (computer, tablet, smartphone).
- Use modern generations of programming languages of websites without obsolete elements such as Flash.
- Create a simple, light and legible image and page layout that allows the viewer to quickly find the required content.
- Use a functional layout of a page similar to other websites of similar character, so that the viewer could use the site intuitively in a manner similar to other pages.
-  Do not hide your authorship data, because most people do not trust content with anonymous authors.
- Use the full available width of the device so that the person viewing the website could read the information posted on it in the most convenient way.
- Enable viewers to comment on and rate the content, although in this case it is worth taking care of eliminating anonymous slanderous comments by, for example, allowing comments only made by people logged in to the known social networks (e.g. Facebook).
- Design a website preferably in the following layoutlayoutlayout:

[Illustration 1]

- Remember to give the page a title, because it is the title, along with a short description, which appears in browsers. Thanks to it, we are able to find out which site we are on and switch between them when we have more browser windows open;
- Rethink the domain name under which we will place the page name;
- Think how to divide the collected material into logical blocks;
- Think about entering contact details on the website;
- Remember about copyright;m29fc33ea40e2111c_1527752263647_0- Remember to give the page a title, because it is the title, along with a short description, which appears in browsers. Thanks to it, we are able to find out which site we are on and switch between them when we have more browser windows open;
- Rethink the domain name under which we will place the page name;
- Think how to divide the collected material into logical blocks;
- Think about entering contact details on the website;
- Remember about copyright;

In order to properly fulfill the above recommendations, it is good to make a decent, well‑considered project, including the website's functions, its graphics image, the layoutlayoutlayout of content prepared in the form of the so‑called site mapsite mapsite map (i.e. a graph including subpages and their relationships).

After drafting a solid project, it is time to choose the tool / language in which our site will be made. Here we have two basic methods enforced by the page type.

If the content of our site is going to be modified only by us and at the same time it will not happen too often - it is worth using HTML to create the page. Creating the code of such a page requires programming skills in HTML language and it is time‑consuming, however, such websites are characterized by a short open time (load fast) which is good both from the viewer's point of view and well‑rated by search engines.

If, however, the content of our site requires frequent updates, you will need the ability to evaluate and comment or other interactivity mechanisms - we must reach for other programming languages (e.g. PHP) preferably in the form of ready‑made content managementcontent managementcontent management systems (so‑called CMS).

After installing such a system on the server to operate our site, high technical qualifications are not required, because content managementcontent managementcontent management is quite simple, and writing articles is similar to writing in word processors. You can use a wide commercial offer to write such a system, but you can also reach for widely used free CMS systems such as Wordpress, Drupal or Joomla. The same applies to online stores, photo galleries, blogger or information portals.

[Slideshow]

Lesson summarym29fc33ea40e2111c_1528450119332_0Lesson summary

Anyone who would like to create a valuable website should:
- plan its tasks, functions and graphical layout
- draw up a solid detailed design;
- choose the right technology of execution;
- get down to work :-)m29fc33ea40e2111c_1527752256679_0Anyone who would like to create a valuable website should:
- plan its tasks, functions and graphical layout
- draw up a solid detailed design;
- choose the right technology of execution;
- get down to work :-)

Selected words and expressions used in the lesson plan

browserbrowserbrowser

content managementcontent managementcontent management

domaindomaindomain

electronic commuicationelectronic commuicationelectronic commuication

graphics appearancegraphics appearancegraphics appearance

layoutlayoutlayout

mechanism of operationmechanism of operationmechanism of operation

responsivenessresponsivenessresponsiveness

site mapsite mapsite map

website designwebsite designwebsite design