Уроки 31, 32
29.12.2023
Узагальнення вивченого у 1 семестрі
Вітаю! Усі, хто сумлінно працював, можете відпочивати. А ті, хто не має оцінки за семестр, чекаю роботи
________________________________
Уроки 29, 30
22.12.2023
Ергономіка розміщення відомостей на веб-сторінці.
Пошукова оптимізація
урок у Meet о 12.55
https://meet.google.com/yhb-wkiy-ewv
Вітаю! Сьогодні завершуємо вивчення основ веброзробки. А саме, діязнаємось, яке розташування інформації є егрономічним та як вдосконалити пошукову оптимізацію
Крок 1: Ергономіка розміщення відомостей
Ергономіка (грец. έργος — праця, νώμος — закон) — це наука, яка вивчає особливості виробничої діяльності людини з метою забезпечення ефективності, безпеки та зручності цієї діяльності.
Ергономічний сайт — це сайт, який забезпечує для відвідувача необхідні зручності, не викликає фізичної та психологічної втоми, не впливає на здоров’я та працездатність.
👆Складовою частиною ергономіки сайту є його інтуїтивно зрозумілий інтерфейс, зручність і простота у використанні для користувача, без необхідності проходження спеціального навчання.
Сторінки сайту, створені самостійно з використанням засобів HTML, PHP, MySQL та інших вебтехнологій, також мають відповідати основним правилам розробки сайтів та критеріям ергономічного розміщення матеріалів на сторінках сайту.
Крок 2: Критерії ергономічного сайту
👆Правило «трьох кліків»: до будь-якої сторінки сайта користувач має дістатися не більш ніж за три переходи.
Оформлення вебсторінок
- Дотримання єдиного стилю оформлення вебсторінок.
- Вибір кольорів тла та тексту згідно з правилами колористики.
- Читабельний шрифт, виділення заголовків кольором і більшим розміром шрифта.
- Вирівнювання тексту за шириною.
- Якісні графічні зображення з можливістю перегляду.
- Уникнення використання подразнюючої анімації.
- Текстові поля і зображення мають відступи один від одного та від країв таблиць.
Зміст контенту
- Зазначення назви сайту на всіх вебсторінках.
- Наявність заголовків на вебсторінках.
- Розміщення найважливіших відомостей на початку вебсторінки.
- Розміщення тексту максимум у три колонки.
- Недопустимість використання горизонтальних смуг прокручування для перегляду сторінок.
- Дублювання в нижньому колонтитулі меню, роміщення контактних даних власника ресурсу, відомостей про авторські права тощо.
Розташування контенту
👉Можливість переходу всіх вебсторінок на головну сторінку сайту.
- 👉Використання не більш ніж трьох рівнів вкладеності вебсторінок.
- 👉Помітність і наочність меню і кнопок, усунення їх двозначності.
- 👉Відмінність гіперпосилань від решти тексту.
- 👉Використання в одному блоці не більш ніж 7 гіперпосилань (краще використовувати вкладені меню або блоки).
👉Використання не більш ніж трьох рівнів вкладеності вебсторінок.
👉Помітність і наочність меню і кнопок, усунення їх двозначності.
👉Відмінність гіперпосилань від решти тексту.
👉Використання в одному блоці не більш ніж 7 гіперпосилань (краще використовувати вкладені меню або блоки).Крок 3: Пошукова оптимізація
СЕО, а точніше SEO (Search Engine Optimization) - це оптимізація сайту під пошукові системи, або пошукова оптимізація. Це дії, спрямовані на підвищення позиції сайту в результатах видачі пошукових систем, що призводить до зростання відвідуваності з них.
___________________________________________
Уроки 27, 28
15.12.2023
CSS. Flexbox
урок у Meet о 12.55
https://meet.google.com/yhb-wkiy-ewv
Вітаю! Сьогодні познайомимось з третьою складовою веброзробки - CSS
Крок 1: Переглянь карту необхідних знань FrontEnd розробника
Анімація тексту, реалізована за допомогою GSAP.
Анімація відскоку тексту, реалізована за допомогою CSS і Splitting.js.
👉Крок 3: Завдання
FLEXBOX FROGGY
12 завдань - 10 балів
14 завдань і більше - 12 балів
за виконані всі 24 завдання - додаткова 12
Скриншот з кількістю виконаних завдань надсилай на електронну скриньку teacheritschool1@gmail.com
________________________________________
Уроки 25, 26
08.12.2023
Арифметичні дії в JavaScript.
Основні алгоритмічні структури
урок у Meet о 12.55
https://meet.google.com/yhb-wkiy-ewv
Вітаю! Сьогодні розглянемо особливості арифметичних дій в JavaScript та опрацюємо оператори для запису алгоритмічних структур
Крок 1: Арифметичні дії
Крок 2: Алгоритмічні структури
Ми засвоїли три ключові алгоритмічні структури в мові програмування JavaScript, які будуть важливими для нашого подальшого розуміння та роботи з цією мовою:
👌1. Лінійні алгоритми
Попрактикувалися виконувати послідовні дії та оператори, які допомагають створювати прості послідовні програми.
👌2. Умовні конструкції
Розібралися з операторами умови, які дозволяють виконувати різні дії залежно від умов, що виконуються в програмі.
JavaScript надає різні способи використання умов для розгалуження програми за допомогою умовних операторів if, else if та else.
Оператор if дозволяє виконувати певний блок коду, якщо вказана умова вірна.
Приклад:
let age = 18;
if (age >= 18) {
console.log("Ви досягли повнолітнього віку.");
}
👌3. Цикли
Розглянули використання різних типів циклів для повторення виконання коду, що допомагає нам оптимізувати та автоматизувати завдання.
JavaScript використовує ці алгоритмічні інструменти для створення динамічних та інтерактивних вебзастосунків. Розуміння цих концепцій буде важливим кроком для подальшого розвитку навичок в програмуванні на JavaScript.
Цикл for
Цикл for дозволяє виконувати певний блок коду певну кількість разів.
Він складається з трьох частин: ініціалізації, умови виконання та кроку.
Синтаксис циклу for виглядає так:
for (початок; умова; крок) {
// блок коду, який виконується на кожній ітерації
}
Цикл while
Цикл while дозволяє виконувати блок коду, поки задана умова є істинною.
while (умова) {
// блок коду, який виконується поки умова істинна
}
👉Крок 3: Завдання
Скриншот з кількістю виконаних завдань надсилай на електронну скриньку teacheritschool1@gmail.com
________________________________________
Уроки 23, 24
01.12.2023
Змінні в JavaScript
Вітаю! Сьогодні продовжуємо роботу з вебпрограмуванням. Розглянемо основи JavaScript, а саме створення змінних
Крок 1: Змінні в JavaScript
JavaScript - це мова програмування, яка викорситовується для створення динамічних інтерактивних вебсторінок.
👉Оголошення змінних
Змінні в JavaScript використовуються для зберігання та керування даними.
Оголошення змінних за допомогою let:Оголошення змінних за допомогою var:
Оголошення змінних за допомогою соnst:
Крок 2: Приклад використання змінних
Крок 3: Середовища для роботи
Для програмування на JavaScript d\використовують наступні середовища:
JDoodle
Repl.it
Крок 4: Завдання
1. Перейдіть за покликанням і розгляньте основні компоненти IDE
2. Протестуйте код прикладу, який надається за замовчуванням.
3. Змініть приклад на виведення Hello World (увага на рядок 5)
4. Напишіть короткий висновок щодо зручності роботи з середовищем і які пункти завдання вам вдалося виконати.
5. Змініть код так, щоб виводилось не "Я - JavaScript!", а "Я - (і ваше ім'я)" Роботи надсилай на електронну скриньку teacheritschool1@gmail.com
_________________________________________
Уроки 21, 22
24.11.2023
Вебпрограмування та інтерактивні сторінки
урок у Meet о 12.55
https://meet.google.com/yhb-wkiy-ewv
Вітаю! Сьогодні починаємо роботу з вебпрограмуванням. Розглянемо основи JavaScript
Крок 1: Де використовується JavaScript
JavaScript - одна з трьох технологій, які мають вивчити та знати всі веброзробники:
1. HTML для визначення змісту вебсторінки
2. CSS для створення макета вебсторінки
3. JavaScript для програмування поведінки вебсторінок
Примітка. Вебсторінки - це не єдине застосування, де використовується JavaScript. Багато настільних і серверних програм використовують JavaScript. Платформа Node.js є найвідомішим застосуванням для виконання високопродуктивних мережевих додатків. Деякі бази даних, такі як MongoDB і CouchDB, також використовують JavaScript як мову програмування.
Крок 2: Де використовується JavaScript?
Створюємо перший JavaScript проєкт
Крок 3 : Приклад Arc Time Slider
Цікава реалізація слайдера часу за допомогою чистого JS
👉Крок 4 : Завдання
ТЕОРЕТИЧНЕ
Проведіть пошук щодо практичного використання JavaScript в популярних розробках.
Де ваш пошук був більш вдалим: через пошуковий запит чи з допомогою бота на кшталт ChatGPT?
✍️Наведіть 3 найцікавіших приклади.
ПРАКТИЧНЕ
Створюємо перший JavaScript проєкт
Немає коментарів:
Дописати коментар