І етап ІОІТ-2016
Веб-технології

Завдання I етапу номінації «Веб-технології»
Інтернет-олімпіади з інформаційних технологій

Беручись за виконання завдань Ви погоджуєтеся із Правилами участі в олімпіаді, зокрема із пунктами про дискваліфікацію.

---

Відповідно до Указу Президента України 2016 рік в нашій державі оголошений роком англійської мови. В зв'язку з цим Вам пропонується зробити веб-сторінку про англійську мову та культуру, а також надається можливість дізнатися про неї багато цікавого.

Робота поділяється на дві частини: Розробка та Розгортання.

Розробка

Завдання 1

Завдання коштуватиме 50 % балів

Використувуючи можливості HTML, CSS та JavaScript, а також довільних фреймворків чи бібліотек розробити веб-сторінку відповідно до поданого макету українською або англійською мовою на вибір.

Додаткові матеріали знахотяться в архіві all-about-english.zip

Текстові частини до кожної версії макету подані в належному форматуванні в документах all-about-english.en.rtf та all-about-english.uk.rtf для англійської та української версії відповідно.

Всі потрібні зображення та шрифти подані в каталозі assets в архіві з матеріалами завдань.

Вимоги до виконання макету

1. Шрифти:
   • Georgia для основного тексту
   • Open Sans для заголовків (рекомендується використовувати Google Fonts)
2. Кольори:
   • основний: #303F9F
   • текст: #212121
   • фон: #FFFFFF
   • тіні: #000000
   • світло: #FFFFFF
3. Блоки:
   • заголовки повинні добре читатися
   • посилання в тексті повинні активні та вести до вказаних джерел, як в супровідних документах all-about-english.en.rtf та all-about-english.uk.rtf
   • посилання на джерела у футері повинні бути клікабельними, та вести до наступних адрес:
     • Інтернет-олімпіада з інформаційних технологій: іоіт.укр
     • Mastersportal: www.mastersportal.eu/articles/1036/all-you-need-to-know-about-english.html
     • Вікіпедія: uk.wikipedia.org або en.wikipedia.org в залежності від обраної мови виконання завдання
     • Unsplash: unsplash.com/collections/341323/all-about-english

Завдання 2

Завдання коштуватиме 25 % балів

Вдосконалити виконану в попередньому завдані роботу згідно із наступними правками.

1. Карта англомових держав

У заголовку секції «Географія» (Georgaphy) розмістити карту відповідно до макету

Карта повинна відділятися від фону та бути посиланням на наступні сторінки Вікіпедії у відповідності до обраної Вами мовної версії макету

• en.wikipedia.org/wiki/List_of_countries_by_English-speaking_population в англомовній
• uk.wikipedia.org/wiki/Список_англомовних_країн_та_регіонів в україномовній

2. Слайдер

Перетворити секцію «Відомі носії мови» (Famous speakers of English) на слайдер використовуючи будь-яку зручну для Вас бібліотеку

Розгортання

Частина коштуватиме 25 % балів

1. За допомогою реєстратора реєстратора доменних імен NIC.UA зареєструвати домен та замовити безкоштовний випробувальний термін хостингу

   Домен повинен бути зареєстрований в безкоштовній зоні імен .pp.ua; для активації радимо скористатися автоматичним роботом сервісу миттєвих повідомлень Telegram — @ppuabot (Відеоінструкція)

2. Додайте до Вашого рішення мета-тег <meta name="itolymp:authcheck" content="...">, де замість ... вставте ідентифікатор, що знаходиться на сторінці етапу в системі itolymp (Етапи змагання - І етап у номінації "веб-технології")

3. Опублікуйте своє рішення на замовленому хостингу, та натисніть на сторінці етапу кнопку Перевірити для того, щоб система автоматично перевірила дану частину роботи

Зверніть увагу: зміна налаштувань DNS та реєстрація домену може тривати до 24 годин.

Якщо в системі під час перевірки виникла помилка, проте Ви впевнені в тому, що вказали та зробили все правильно, переконайтеся, що опубліковане Вами рішення доступне з мережі Інтернет. В іншому разі зачекайте добу та повторіть операцію ще раз.

Загальні вимоги та критерії оцінювання

1. Рішення подається у zip-архіві, в якому містяться

   • вихідні файли
   • зібрана версія проекту, якщо використовувалися препроцесори

2. Завдання повинні бути виконаними у відповідності до стандартів HTML 5 та CSS 3

3. Проект зібраний і цілком працездатний в останніх версіях найпопулярніших браузерів

Також звертається увага на

1. завершеність роботи, наявність усіх блоків
2. відповідність стандартам
3. якість коду
4. оптимізація (як клієнтська, так і робочого процесу)
5. використання сторонніх бібліотек та їх доцільність
6. відображення тексту відповідно до макета та поданих в матеріалах супровідних файлів
7. адаптацію рішення до дисплеїв різного розміру
8. успішне проходження перевірки Markup Validator Service