Профессионального образовательного учреждения

«КОЛЛЕДЖ СОВРЕМЕННОГО УПРАВЛЕНИЯ»

ИНДЕКС: 109316, г. Москва, ул. Волгоградский проспект, д. 42, кор. 7. ТЕЛ: 8(495)542-78-64

Учебное пособие

для подготовки студентов специальности:

09.05.01  Прикладная информатика (по отраслям)

к участию в WorldSkills по компетенции

«Веб-дизайн и разработка»

(Web Technologies)

по дисциплине: ОГСЭ. 03. Иностранный язык

Москва, 2020

Оглавление

UNIT 1 WHAT IS WORLDSKILLS?        4

UNIT 2 PROFESSIONAL TERMINOLOGY WORLDSKILLS STANDARD SPECIFICATION SKILL WEB TECHNOLOGIES        8

UNIT 3 TEXTS FOR READING        16

GLOSSARY        21

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ        22

Пояснительная записка

Уважаемые студенты!

Современные выпускники должны владеть иностранными языка, чтобы выступать конкурентноспособными на современном рынке услуг.

Данная разработка поможет освоить профессиональную лексику чемпионата WorldSkills по компетенции «Веб-дизайн и разработка» и получить практику в чтении и переводе конкурсной документации. Тексты пособия, учитывают требования WorldSkills и требования  профессионального стандарта по компетенции.

Освоив данный материал, вы сможете соответствовать требованиям, которые выдвигает перед выпускниками современное общество.

Желаю вам успехов!

UNIT 1 WHAT IS WORLDSKILLS?

1.Watch the video “What is WorldSkills” and mind the pronunciation of the underlined words in the text. Write down these words to your vocabularies.

https://www.youtube.com/watch?v=4hfPE-O1IeM

What is WorldSkills?

Our life today is based on one cornerstone: SKILLS. Skills shape people and their societies: plumbers, electricians, machinists, mechanics, cooks, computer technicians, welders, designers, and many other necessary skill professionals constantly improve our world with the power of skills.

In 1950 when skilled labor collaboration and innovation were needed more than ever the first WorldSkills Competition was hosted in Spain. Today over 70 member-countries and regions participate in the biggest vocational education and skills excellence event in the world.

The WorldSkills Competition truly reflect the global industry. Tens of thousands of young students and professionals have participated over the years. The WorldSkills Foundation contributes by connecting champions, experts, and partners with project initiatives that improve life and reveal innovative and sustainable activities around the world.

WorldSkills is not just a competition now. It is a movement. Like working in six main areas:

• Promoting skills:

• Career building:

• Skills Competitions;

• Education and training:

• International cooperation and development;

• Research.

WorldSkills is a global hub for skills excellence and development with ongoing activity nationally and globally. WorldSkills raises the profile and recognition of skilled people and shows how important skills are in achievement an economic growth and personal success.

WorldSkills - the global hub for skills excellence and development!

Answer the questions to the text:

1. What does our professional life constantly depend of?

2. When and where was the first WS Competition held?

3. What are the main areas of WS Competition?

4. What is the aim of WS movement?

2. Read the history of WorldSkills and make short story using underlined words

1946

WorldSkills rose out of the ruins of the Second World War, which devastated the economies of Europe and created a huge skills shortage that threatened a new economic depression.

1950

Some took this challenge as an opportunity to introduce young people to the world of vocational skills. Francisco Albert Vidal was charged with creating a skills contest for the youth of Spain and Portugal. Madrid 1950 was a modest event by today’s standards but an international movement was born.

1953

The competition grew rapidly. Young people from Germany, Great Britain, France, Morocco and Switzerland answered the call, with two competitors travelling to Spain unannounced and at their own expense.

1958

The competition moved abroad for the first time, to Brussels in Belgium. It was the start of the WorldSkills movement expanding across the globe.

1960s

By the end of the 1960s, international competitions had been held in Germany, Great Britain, Ireland, the Netherlands and Switzerland.

1970

Then came the biggest leap so far with Tokyo as the host city for 1970. By the end of the 1980s, Atlanta in the USA, Sydney in Australia, Seoul in Korea, and Chinese Taipei had all welcomed what was becoming the world’s greatest international vocational skills event.

2007

WorldSkills Shizouka 2007 introduced One School One Country, now a staple of competition, in which pupils are introduced to vocational skills and the diverse cultures of the WorldSkills family by pairing each competition team with a local school in the host country.

2009

WorldSkills Calgary 2009 saw the biggest competition to date, with 850 young people taking part from 47 countries. Just a year later, the WorldSkills movement broke though the 50 country target, with 53 members.

2017

WorldSkills Abu Dhabi 2017 took the competition to the Middle East for the first time, and introduced the International TVET Youth Forum where participants worked to create a Youth Declaration on the future of skills and training.

WorldSkills today

The Competition moves from Kazan, Russia and then to Shanghai, China, but the WorldSkills movement has become much more than an international competition. The organisation is helping young people around the world change their lives through vocational skills.

2. Tell your opinion about each of the seven values which shape and underpin all work of members of WorldSkills. Why are these values ​​chosen?

WORLDSKILLS VALUES

Excellence

Innovation

Partnership

Fairness

Integrity

Diversity

Transparency

UNIT 2 PROFESSIONAL TERMINOLOGY WORLDSKILLS STANDARD SPECIFICATION SKILL WEB TECHNOLOGIES

1. Read and learn the following word combinations, taken from the Standard Specification WorldSkills

SECTION 1  Work organization and management

SECTION 2  Communication and interpersonal skills

SECTION 3  Website Design

SECTION 4   Layout  

SECTION 5 Front-End Development

SECTION 6 Back-End Development

SECTION 7  Content Management Systems

2.Put in the gaps with the word combinations below. Every word combination can be used only once and one extra

Our world has changed a lot over the past ten years, the borders of country are blurred, it becomes to travel, 1___________________. But this leads to an increase in the information processed and may be the reason for the loss of the most important and interesting aspects of the life of the studied worlds for travellers.

This problem is 2______________________, simple and affordable Internet services that help to systematize the data, follow the notes of other travelers, create new resources and databases about interesting places and things.

Your task will be to develop 3________________of one of these services – Interactive Presenter. And a onepage site for his presentation on the Internet.

The main idea of that service is to create a huge database of everything. And to 4________________to get acquainted with it in an interactive way, allowing you to concentrate only on this interesting information.

But the company understands that this is a voluminous task, so it suggested that you develop a prototype of a web application for one narrow area -5_______________________, whose goal is to acquaint visitors of the city with the history, culture and atmosphere of capital of Russia in an interactive presentation format. The visitor can choose the route of acquaintance and receipt of information in accordance with his contextual choice on each slide.

In the future, 6_________________to create their own interactive routes and publish them on the company's website. Therefore, special attention is paid to the route editor in terms of convenience and ease of use for the mass user.

А. a working prototype

B. it is planned to open for everyone

C. tourist company of Moscow

D. people learn new worlds and become travelers

E. solved by various electronic helpers

F. give everyone the opportunity

G. a freelancer working in the field

*1- D 2- E 3-A 4-F 5-C 6-B

3. Listen to the audio first, then read and translate the following text.

The Module A involves knowledge about website design, website layout techniques, client-side scripting, and server-side scripting, all combined in one CMS project. You will be using one of the most popular content management systems - WordPress. Your job is to develop a one-page design by creating your own theme as a child-theme of the Blankslate WordPress theme. You will name your theme Moscow_MuseumTour. For the fully functional website you will need to add some of the provided plugins or develop your own.

The goal of this website is to present an overview of all available museums in Moscow and to give a list of upcoming events, which could be of interest to all tourists visiting Kazan.

You customer needs to have the possibility to add and modify every entry for each museum to either update existing information or add new museums to the list.

They also need to maintain a list of events of various kinds to keep their visitors up to date.

The website also needs to provide the possibility for visitors to communicate with Moscow’s tourist information via a contact form.

The target audience for this page are tourists visiting Moscow. This can be a wide range, therefore you will define your interpretation of the target audience (based on “tourists visiting Moscow”) and document this definition in your submission.

Answer the following questions.

1. What knowledge does involve Modul A?
2. What content management systems will be using?
3. What is your job?
4. Name the your theme of a one-page design.
5. What is the goal of the website?
6. Name the possibility for visitors.

4. Circle the correct word

A friend of yours/your would like to have a simple/simpler online game on their website. They have already prepare/prepared the front end template, but need some help with the server-side implement/ implementation of the interaction logic and integration/integrate into their template. The game he has chosen/choose is called Towers of Hanoi.

*your simple prepared implementation integration chosen

5. Choose the correct answer

Towers of Hanoi is a common single player game. It should suit 1___ the following user stories / test cases:

•        2___ the initial / configuration page the player can start a new game session, setting the difficulty 3___ choosing the number of bricks (3-5) [dropdown] and a nick name [text field] he would like to use. He will then be forwarded to the game page.

•        Pressing the submit button 4 ____the configuration page will always start a new game session with the values entered.

•        5_____a page refresh (F5) on the game page, the board is still displayed as configured by the user without re-starting the game or changing any values.

•        On the game page there is a link to get back 6_____the configuration page.

•        Accessing the game page 7_______having an ongoing game session, the user will be redirected to the initial / configuration page.

*1- 2 on 3 by 4 on 5 after 6 to 7 without

6. Use the word given in capitals at the end of each line to form a word that fits in the gap in the same line

*Called designer supplied using different screens header have been provided

UNIT 3 TEXTS FOR READING

The competition task in Kazan`2019

Introduction

You are a freelancer working in the field of Web Technologies and you have been asked to develop the brand new website for Kazan’s most beautiful museums. Your client has heard, that you are the expert in developing state-of-the-art responsive one-pagers and he is looking forward to working with you.

Description of project and tasks

This module involves knowledge about website design, website layout techniques, client-side scripting, and server-side scripting, all combined in one CMS project. You will be using one of the most popular content management systems - WordPress. Your job is to develop a one-page design by creating your own theme as a child-theme of the Blankslate WordPress theme. You will name your theme Kazan_MuseumTour. For the fully functional website you will need to add some of the provided plugins or develop your own.

The goal of this website is to present an overview of all available museums in Kazan and to give a list of upcoming events, which could be of interest to all tourists visiting Kazan.

You customer needs to have the possibility to add and modify every entry for each museum to either update existing information or add new museums to the list.

They also need to maintain a list of events of various kinds to keep their visitors up to date.

The website also needs to provide the possibility for visitors to communicate with Kazan’s tourist information via a contact form.

The target audience for this page are tourists visiting Kazan. This can be a wide range, therefore you will define your interpretation of the target audience (based on “tourists visiting Kazan”) and document this definition in your submission.

Front-end Details

You will be provided with both HTML and CSS templates, which consist of the basic elements of modern websites. Use this template as a starting point for your work. You will need to create your own theme, based on the given theme (Blankslate) and the provided HTML and CSS templates.

You will need to implement the following elements for your one-pager:

• A header image slideshow, including marketing texts and possible buttons for evey image

• The marketing texts could be something like the following: “Check out our fall special!”

• The buttons could link to a section on the page

• A menu to jump to the specified area of the page

• The menu needs to be sticky and scroll with the page

• The list of 4-6 museums, including a filter to select museums of a certain category

• A 50/50 splitview of

• the five upcoming events

• the fivw latest news posts

• A contact form

• A footer with copyrights and social media links

You do not need to stick completely to the provided template. Feel free to add and change as many elements as you like, but the elements in the list need to be present and your design should blend in with the given design.

Since your customer likes fancy pages, there need to be at least three animations within the website.

Further optimization tasks:

The page needs to be optimized for search engines. You can choose one of the provided plugins or implementyour own SEO. Remember to optimize certain parts of your website (e.g. urls, sitemap, …).

Secure your page by installing and configuring a security plugin.

Note: If the plugin you would like to choose is broken or does not work as expected, you need to choose another one or feel free to fix this plugin.

The customer needs to exchange certain images of the image slider via the backend.

All inquiries via the contact form need to be stored within the database on the server and they should be accessable for a client user. The feedback, sent to the user after submitting the form, also needs to be editable by the client user.

Use a plugin to add and modify the social links in the footer.

Seven segment digital Timer (Difficult)

Create a 7 segment digital timer, time format is: 3 digit of seconds passed, and centiseconds following it. It’s max value is: “999:59”. “Start timer“ button starts, “Stop timer” button stops, “Reset timer” button stops and resets to 0 the timer.

Cube Rotation

We want to create the following cube rotation effect.

1. You should create two cubes using the index.html and the cubes shuld be rotated same as video.mp4.

2. Left cube should be rotated left to right.

3. Right cube should be rotated up to down.

4. color codes

        - front - #fa5252

        - back - #f76707

        - right - #12b886

        - left - #4c6ef5

        - top - #fab005

        - bottom - #7950f2

5. You can only use style.css for the Cube Animation, JavaScript is not allowed.

Smiley

Create a big smiley face on the center of the page. It is 400px wide, and rectangular. Below the smiley, there are 3 buttons with texts: “:)”, “:|”, and” :(“. By clicking the buttons the smiley face changes to that state with a 0.5s animation. By default the smiley is in “:|” state. The states have these designs:

Transition

You are given a picture that you need to cut into N cards and each card should disappear animated. X is 5 and Y is 3.

Animated Social Button Plugin

Create social buttons plugin for Wordpress using Fontawesome icons and add hover effects for the buttons.

When the plugin activated, social buttons must be shown in the footer area.

There should be 4 social buttons and the icon fonts are below.

facebook -

pinterest -

twitter -

thumblr -

The color of hover effects are below.

facebook - #3d5998

pinterest - #e50122

twitter - #54acec

thumblr - #314258

The effects should be same with thie example video but you can change the duration time of the hover effects.

Calendar

1. You can create index.php using index.html

2. When you open the index.php, in the top area of calendar, current month and current year should be shown and today's date should be highlited like index.html

3. If you click the left arrow button the previous month calendar should be shown.

4. If you click the right arrow button the next month calendar should be shown.

You can only use HTML and CSS, no JS(including Libries and Framewors) are allowed.

GLOSSARY

• Route Editor - a mode in the service that can be used to link different element using links visually and can be controlled using mouse and keyboard
• View Mode - a mode in the service that can be used to see the end result of all linked elements and their transition (like a presentation of slides)
• Element - a node in the route editor that is used to store the content and link it with other element (like a slide)
• Link - a line in the route editor that is used to store information about the next element to transition and the transition property itself
• Transition - an animation that run in view mode between moving from one element into other element
• Content – it is user data that he wants to demonstrate.
• Navigation Map: You might also hear this discussed as the information architecture. What this refers to is the structure and hierarchy of the pages of the website.
• Mood board: A collection of aspirational design elements you would like to see incorporated into your website. Think of it as a scrapbook of sorts. You'll often see mood boards used if you're working with an agency to kick off the design process.
• Wireframe: Blueprints are to home construction as wireframes are to websites. They are a critical piece of the website strategy process that outlines the structure of all your website templates.
• Conversion Map: Another critical piece of the planning phase, a conversion map shows you the alignment between pages, their calls to action and the stage in the buyer's journey.
• Sub-page: Any page that is not your homepage. Another way to think of this is any page on a URL that is a sub-folder of your main domain. For example, www.newbreedmarketing.com/careers is a sub-page. www.newbreedmarketing.com is our homepage.
• Hero: The large image, headline and call to action that will usually be seen above the fold of the homepage.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1. ДВИЖЕНИЕ WORLDSKILLS [Электронный ресурс] / Режим доступа: https://worldskills.ru/o-nas/dvizhenie-worldskills/(дата обращения 05.03.2020)

2. WORLDSKILLS [Электронный ресурс] / Режим доступа: https://worldskills.org/(дата обращения 05.03.2020)

3. WORLDSKILLS HISTORY [Электронный ресурс] / Режим доступа: https://worldskills.org/about/#history

4. WORLDSKILLS KAZAN 2019 [Электронный ресурс] / Режим доступа:  https://worldskills2019.com/en/index.html (дата обращения 05.03.2020)

5. WORLDSKILLS VISION 2025 STRATEGIC PLAN [Электронный ресурс] / Режим доступа:  https://api.worldskills.org › resources › download (дата обращения 05.03.2020)