Самостійною роботою є реалізація статичного (HTML) або динамічного сайту (додатку) в різний спосіб. Сайт розгортається на безкоштовному або платному хостингу. Допустимо розгортання сайту на локальному сервері.
Реалізований проект та адміністративна панель демонструється викладачеві онлайн.
Мова сайту - українська (для підтвердження власної роботи).
Для виконання самостійної роботи студент обирає один з наведених нижче варіантів
1. Створення повноцінного тематичного HTML-сайту з втіленням Javascript
Написанняя власних динамічних елементів на чистому Javascript з використанням бібліотеки jQuery (не обов’язково). Прикладами втілених елементів, написаних власноруч можуть бути.
Взаємодії з користувачем та події
- Різноманітні ефекти, залежно від дій користувача.
- Діалогові вікна.
- Випадне меню на сайті при наведенні курсору миші.
- Поява чи зникнення елементів при натисканні на кнопку.
- Поява спливаючого вікна, коли курсор миші пішов межі вікна браузера.
- Затемнення заднього фону та ефекти плавної появи елемента.
Взаємодія з HTML-елементами на сторінці та керувати їх вмістом та стилями.
- При настанні певної події (наприклад, клік миші або іншого) зміна зовнішнього вигляду елементів на сторінці.
- При певній події додавання певних елементів або атрибутів до них.
Додавання анімації та різноманітних графічних ефектів на веб-сторінки.
- JS-анімація, що реагує на дії користувача.
- Плавна поява, приховування та переміщення об'єктів сторінки при певних діях користувача.
Окремі сервіси
- Таймер зворотного відліку від заданої користувачем дати.
- Калькулятор підрахунку з певних полів форми.
- Математичний калькулятор.
- Конвертація певних величин, введених користувачем (валюта, одиниці виміру, RGB to HEX тощо).
- Опитувальна система з виведенням результату.
Даний перелік не здатний охопити всіх можливих ситуацій, тому студент може втілювати власні ідеї
2. Створення окремого веб-додатку, написаного на чистому Javascript
- Інтерактивна гра.
- Автоматизована презентація.
- Система анкетування з виведенням підсумкового висновку.
- Інфографіка, що формується з даних форми, яка заповнюється користувачам
Даний перелік не здатний охопити всіх можливих ситуацій, тому студент може втілювати власні ідеї.
3. Використання безкоштовних популярних систем керування контентом (CMS).
Для реалізації обрати відповідний до теми шаблон і наповнити контентом та сервісами.
4. Створення повноцінного сайту, написаного за допомогою JS-фрейворків
5. Створення динамічного додатку, написаного мовою серверного програмування
6. Створення динамічного додатку за допомоги серверних фреймворків та бібліотек
Вимоги до HTML-сайту
- Головна сторінка сайту має назву index.html. Назви файлів (сторінок, картинок, скриптів, стилів) та папок – латинкою, малий регістр, без пробілів (для візуального розмежування застосовувати символи «-» або «_»). Кирилицю для назв не застосовувати!!!!
- Застосувати таблицю стилів в окремому файлі. Опис стилів зі сторінки перенести в файл таблиці стилів *.css. Назви стилів – латинкою, змістовні (.red .big тощо).
- Графіка, що відноситься до дизайну сторінок міститься в окремій директорії (зазвичай, img або images). Решта зображень, що відносяться до наповнення сторінок – в інших директоріях зі змістовними назвами (наприклад, picture, photo тощо).
- Кодування сторінки має підтримувати кирилицю (charset=utf-8).
- Верстання сайту блочне із застосуванням семантичних тегів HTML5 (<header><footer><main><article><aside><nav>…<figure> тощо). Основні модулі коду сторінки мають бути закоментовані (<!--Comment is here-->).
- Єдиний стиль для всіх сторінок сайту. Однакове розміщення основних блоків сайту (заголовку, рубрик, логотипу).
- Наявність навігації на всіх сторінках сайту.
- Для адаптивної структури сторінок застосувати сітку, користуючись Bootstrap, Grid, Flexbox або власними засобами.
Реалізовані елементи та сервіси
- Наявність логотипу, фавіконки та назви сторінки на вкладці.
- Застосувати веб-шрифти для основного тексту та заголовків. Для іконок використати спеціалізовані іконкові шрифти або SVG-зображення з відповідних ресурсів.
- На сторінках сайту розмістити зображення різних форматів (растрові, векторні). У відповідних місцях втілити анімацію SVG, CSS або JS.
- Втілити у сайт інтерактивну карту або панорамний перегляд певної місцевості. Це може бути ваш будинок, історичне місце, університет. Втілення з YouTube власного або доречного відео з обраної тематики.
- Додавання віджета (наприклад, новини, афоризми, анекдоти), інформера (прогноз погоди, курс валют, календар подій) та кнопку певної соцмережі.
- Наявність динамічного елементу (випадне меню, слайдер, збільшення фотографій, акордіон тощо) з бібліотеки jQuery або як результат під’єднання плагіну.
- Розмістити сайт на безкоштовному або платному хостингу.
Оцінювання роботи
- 10 балів - акуратний коментований код, з врахуванням основних вимог. Повне розуміння застосованих елементів, стилів і скриптів.
- 10 балів - втілення зазначених сервісів, розміщення на хостингу.
Вимоги до програмованого сайту
- Створити власний або адаптувати готовий шаблон.
- Сайт має містити 4-5 сторінок певної тематики. Єдиний стиль для всіх сторінок сайту. Однакове розміщення основних блоків сайту (заголовку, рубрик, логотипу).
- Наявність зручної навігації, логотипу, фавіконки та назви сторінки на вкладці.
- Наявність авторської сторінки за посиланням © Прізвище або нік (в нижній частині сторінок). На авторській сторінці поставити фотографію (аватар) і написати коротку інформацію про себе.
- Для певних елементів сторінок застосувати власні стилі та скрипти.
- Наповнити сторінки відповідними зображеннями.
Реалізовані елементи та сервіси
- Реалізація на сайті популярних сервісів: е-мейл, архів статей, календар, пошук, коментарі тощо.
- Застосувати веб-шрифти для основного тексту та заголовків. Для іконок використати спеціалізовані іконкові шрифти або SVG-зображення з відповідних ресурсів.
- Втілити у сайт інтерактивну карту засобами GoogleMaps API чи інше.
- Встановити відео з YouTube, Vimeo або власного хостингу.
- Додавання віджета (наприклад, новини, афоризми, анекдоти), інформера (прогноз погоди, курс валют, календар подій) та кнопку певної соцмережі.
- Додати динамічні елементи JavaScript (випадне меню, слайдер, збільшення фотографій, акордіон тощо).
- У разі реалізації на готовій CMS, під’єднати доречний до теми плагін, який можна активувати.
Оцінювання роботи
- 10 балів - Якість виконання, повноцінний, працездатний, естетично оформлений сайт. Наявність зазначених елементів та сервісів, зрозуміла логіка перебування на сайті, дотичний контент та зображення.
- 10 балів - Виконання завдань, що демонструють відповідні навики у обраних засобах.
Відео до самостійної роботи
Порядок роботи
- Обрати тему сайту.
- Визначитися з засобами реалізації, логічною та фізичною структурою сайту.
- Створити шаблонну сторінку, перевірити цілісність структури, наявність всіх основних блоків сторінки (окремі модульні блоки закоментувати), правильність посилань.
- За шаблонною сторінкою створити решта сторінок, об'єднати їх навігацією.
- Додати до сторінок сервіси згідно вимог.
- Розмістити сайт в Інтернеті.
Зміст звіту
- Тема розробленого сайту.
- Адреса розміщення.
- Застосовані засоби, сервіси та технології (мови, плагіни, АРІ тощо).
- Скрін головної та другорядної сторінок.
- Фрагмент HTML коду головної сторінки.
- Фрагмент коду CSS файлу.
- У висновку оцінити процес створення сайту, доступність та ефективність застосованих засобів і сервісів, якісні характеристики хостингу, зручність ftp-клієнта та інші моменти робочого процесу.