Завдання для практики (група 35)
Цьогорічне (2024/2025 н.р.) завдання лише одне, вони дуже творче й замовниками виступають співробітники коледжу. Обидві команди працюють над одним і тим же завданням в режимі конкуренції - розуміють його по-своєму, намагаються реалізувати якісь унікальні можливості й перевершити конкурентів, тож на виході мають бути два різні продукти😁
Застосунок-навігатор для “Днів відкритих дверей”
Мета проекту
Створити клієнтський веб-застосунок, який коли ви за межами будівлі коледжу, вказує напрямок до неї та відстань у метрах, а коли ви вже потрапили до фойє коледжу на першому поверсі - надає візуальні вказівки стосовно того як потрапити до 221-ї аудиторії. Це має бути стрілка, яка вказує у напрямку руху, і текстові підказки. Працює застосунок з використанням GPS (слід заздалегідь зняти координати кількох точок точок - центр фойє, точка перед сходами, точка на другому поверсі, точка перед 221-ю аудиторією). Слід подбвати про красивий, футуристичний і технологічний стиль застосунку і про сторінку з інформацією про нашу спеціальність.
Головна мета - зацікавити абітурієнтів та їх батьків нашою спеціальністю та підштовхнути до думки вступати до нас.
Детальний опис
Вид застосунку: Клієнтський веб-застосунок (тільки HTML/CSS/JavaScript)
Тип: “Навігатор” (можуть бути й допоміжні функції, які відповідають поставленій меті - посилання на сайт коледжу, інформація про спеціальність тощо)
Опис функціональності:
- після переходу на сторінку має відобразитись діалог з коротким описом продукту - типу “цей застосунок допоможе вам потрапити до аудиторії 221 аби дізнатися про спеціальність “Розробка програмного забезпечення”, і кнопкою “Почати навігацію”
- далі, якщо ви не в приміщенні коледжу - має відобразитися стрілка, яка вказує напрямок до нього та відстань у метрах і посилання на коледж на картах Google
- якщо ж ви знаходитесь у фойє першого поверху - відображається стрілка і вказівки стосовно того як потрапити до 221-ї аудиторії. Для навігації використовується GPS (це навігація за точками - слід заздалегідь зняти координати кількох точок точок - центр фойє, точка перед сходами, точка на другому поверсі, точка перед 221-ю аудиторією)
- коли ви вже біля 221-ї аудиторії - має відобразитися діалог з текстом “Вітаю! Ви досягли пункту призначення!” і кнопка аби його закрити. Коли ви її натискаєте - відкривається сторінка злоготипом нашої спеціальності (з описом і посиланням на сайт) та текст, що закликає вступити до нас на навчання
Візуальний стиль:
- Футуристичний дизайн
- Неонова кольорова гама
- Елементи кіберпанку в інтерфейсі (наприклад, дрони, імпланти, штучний інтелект)
- слід подбати про привабливий інтерфейс та приємні анімації (можливо, “перевертання” сторінок тощо)
Приклад інтерфейсу - для натхнення:
☝️ Продукти мають бути доступні на будь-якому пристрої з підключенням до Інтернету, і створені з використанням стандартного стеку технологій HTML/CSS/JavaScript з використанням, наприклад, Canvas API або SVG-графіки, популярних бібліотек (jQuery тощо), та мають бути захощені прямо в репозиторії за допомогою GitHub Pages.
Рекомендовані ресурси
- Point arrow to location (geolocation)
- Real Compass on mobile browsers with Javascript
- Using the Geolocation API
- Web Geolocation API
- HTML5 - 12 Cool HTML5 Geolocation Ideas
☝️ Якщо у вас на думці якийсь конкретний рушій чи фреймворк - можете сміливо використовувати його - ви не обмежені у виборі технологій, мов, бібліотек чи інструментів. Тільки не забувайте, що результат не повинен містити серверного коду й бути захощений в GitHub Pages!
💡 Приклади для натхнення - Pure CSS Cyberpunk 2077 Buttons, Use Three.js to achieve a cool cyberpunk-style 3D digital earth screen, Compass.js, CompassJs. Думаю, в Мережі ще купа подібних прикладів…
💡 Текстовий контент та вихідні коди ви можете генерувати з допомогою AI (Gemini, Copilot, Chat GPT, Claude, YOU тощо), графічні матеріали - також (Microsoft Designer, DALL-E, Gencraft,Monica, Koala,Fotor тощо). Це не заборонено, а навіть вітається!