Веб-технології та веб-дизайн

Самостійна робота

Самостійною роботою є створення статичного або динамічного адаптивного HTML-сайту на довільну тему об'ємом 4-5 сторінок.

Мова сайту - українська (для підтвердження власної роботи).

Наявність авторської сторінки за посиланням © Прізвище або нік (в нижній частині сторінок). На авторській сторінці поставити фотографію (аватар) і написати коротку інформацію про себе.

Створений сайт розміщається на хостингу і демонструється викладачеві онлайн.

Вимоги до HTML-сайту

  • Головна сторінка сайту має назву index.html. Назви файлів (сторінок, картинок, скриптів, стилів) та папок – латинкою, малий регістр, без пробілів (для візуального розмежування застосовувати символи «-» або «_»). Кирилицю для назв не застосовувати!!!! Кодуваннясторінки має підтримувати кирилицю (charset=utf-8).
  • Застосувати таблицю стилів в окремому файлі. Опис стилів зі сторінки перенести в файл таблиці стилів *.css. Назви стилів – латинкою, змістовні (.red .big тощо).
  • Графіка, що відноситься до дизайну сторінок міститься в окремій директорії (зазвичай, img або images). Решта зображень, що відносяться до наповнення сторінок – в інших директоріях зі змістовними назвами (наприклад, picture, photo тощо).
  • Основні модулі коду сторінки мають бути закоментовані (<!--Comment is here-->, /*Main Header */).
  • Єдиний стиль для всіх сторінок сайту. Однакове розміщення основних блоків сайту (заголовку, рубрик, логотипу).
  • Наявність навігації на всіх сторінках сайту. Виключення лише для сторінок, що відкриваються у новому вікні і містять інформацію, яка може сприйматися і не в контексті сайту (збільшена картинка, інформація про розробника, стаття, тощо).
  • Для адаптивної структури сторінок застосувати сітку, користуючись Bootstrap, Grid, Flexbox або власними засобами.

Реалізовані елементи та сервіси

  • Наявність логотипу, фавіконки та назви сторінки на вкладці.
  • Застосувати веб-шрифти для основного тексту та заголовків. Для іконок використати спеціалізовані іконкові шрифти або SVG-зображення з відповідних ресурсів.
  • Втілити у сайт інтерактивну карту або панорамний перегляд певної місцевості. Це може бути ваш будинок, історичне місце, університет. Втілення з YouTube власного або доречного відео з обраної тематики. Відредагувати відео засобами YouTube-редактора: додати титри, ефекти, музику тощо.
  • Додавання віджета (наприклад, новини, афоризми, анекдоти), інформера (прогноз погоди, курс валют, календар подій) та кнопку певної соцмережі.
  • Наявність динамічного елементу (випадне меню, слайдер, збільшення фотографій, акордіон тощо) з бібліотеки jQuery або як результат під’єднання плагіну.
  • Розмістити сайт на платному або безкоштовному хостингу. Для розміщення використовувати FTP-доступ.

Вимоги до CMS-сайту

  • Мова сайту - українська (для підтвердження власної роботи).
  • Створити власний або адаптувати готовий шаблон.
  • Сайт має містити 4-5 сторінок певної тематики. Єдиний стиль для всіх сторінок сайту. Однакове розміщення основних блоків сайту (заголовку, рубрик, логотипу).
  • Наявність зручної навігації, логотипу, фавіконки та назви сторінки на вкладці.
  • Наявність авторської сторінки за посиланням © Прізвище або нік (в нижній частині сторінок). На авторській сторінці поставити фотографію (аватар) і написати коротку інформацію про себе.
  • Для певних елементів сторінок застосувати власні стилі та скрипти.
  • Наповнити сторінки відповідними зображеннями.

Реалізовані елементи та сервіси

  • Реалізація на сайті популярних сервісів, що надає дана CMS: е-мейл, архів статей, календар, пошук, коментарі тощо.
  • Застосувати веб-шрифти для основного тексту та заголовків. Для іконок використати спеціалізовані іконкові шрифти або SVG-зображення з відповідних ресурсів.
  • Втілити у сайт інтерактивну карту засобами CMS або скористатися GoogleMaps API.
  • Встановити відео з YouTube, Vimeo або власного хостингу.
  • Додавання віджета (наприклад, новини, афоризми, анекдоти), інформера (прогноз погоди, курс валют, календар подій) та кнопку певної соцмережі.
  • Додати динамічні елементи (випадне меню, слайдер, збільшення фотографій, акордіон тощо).
  • Під’єднати доречний до теми плагін, який можна активувати на CMS.

Порядок роботи

  1. Обрати тему сайту.
  2. Визначитися з колірною гамою, стилем, логічною та фізичною структурою сайту.
  3. Зверстати шаблонну сторінку, перевірити цілісність структури, наявність всіх основних блоків сторінки (окремі модульні блоки закоментувати), правильність посилань.
  4. За шаблонною сторінкою створити решта сторінок, об'єднати їх навігацією
  5. Додати до сторінок сервіси згідно вимог.
  6. Розмістити сайт в Інтернеті.

Зміст звіту

  1. Тема розробленого сайту.
  2. Адреса розміщення.
  3. Застосовані засоби, сервіси та технології (мови, плагіни, АРІ тощо).
  4. Скріни головної та другорядної сторінки.
  5. У висновку оцінити процес створення сайту, доступність та ефективність застосованих засобів і сервісів, якісні характеристики хостингу, зручність ftp-клієнта та інші моменти робочого процесу.

Оцінювання роботи

10 балів - акуратний код, з врахуванням основних вимог. Повне розуміння застосованого коду і стилів. Навики роботи з CMS.

10 балів - втілення сервісів, розміщення на хостингу.

TOP