Курс: Веб-технології

Структура за темами

Вступ
Цей курс розроблено з урахуванням сучасних тенденцій веб-дизайну. Його матеріали можна використовувати для викладання профільного курсу за вибором "Основи веб-дизайну".
Матеріали подано у формі текстових лекцій з практичним ілюструванням усіх демонстрованих технологій. Завдання та вправи можна виконувати онлайн або на власному комп'ютері та завантажувати результати виконання у вигляді посилань або створених файлів. Для перевірки знань та закріплення матеріалу створено тести до кожного розділу.
У форумі курсу можна задати питання, якщо вони виникають.
Успіхів!
- Форум новин курсу
- Підручник онлайн URL (веб-посилання)
- Форум тематичних обговорень
- Завдання цього курсу зручно виконувати в онлайновому редакторі https://jsfiddle.net/ або http://cssdeck.com http://jsbin.com/
  Результат роботи можна зберегти та надіслати у вигляді посилання або файлу. Сервіси також передбачають спільну роботу, це може бути корисним при виконанні деяких завдань.
  Успіхів!
- Форум новин курсу
Як працює Інтернет. Основи веб-дизайну
Основні терміни та поняття веб-дизайну. Класифікація веб-сайтів та технології для їх створення
- Знати основні класифікації типів сайтів.
  Пояснювати застосування різних технологій для розробки сайтів.
  Визначати тип сайту та прогнозує його цільову аудиторію.
  
  Використовувати та налаштовувати інструментальні засоби для веб-розробки.
  Складати план розробки сайту.
  Створювати макет інформаційної структури сайту.
  
  Усвідомлювати важливість участі в діяльності глобальної інтернет-спільноти.
  
  Основні тренди у веб-дизайні.
  Види сайтів та цільова аудиторія.
  Інформаційна структура сайту.
  Інструменти веб-розробника.
- Види сайтів, способи їх створення Сторінка
- Терміни веб-дизайну Завдання
- Тест 1. Як працює Інтернет
Мова розмітки гіпертексту HTML5
Найбільш вживані теги для створення змістової структури сторінки, додавання зображень, таблиць, мультимедійних елементів та форм для зворотного зв'язку з відвідувачами сайту.
Публікація сайту на хостингу
- Знати основні теги мови гіпертекстової розмітки та їх параметри.
  Пояснювати переваги та недоліки різних прийомів верстки веб-сторінок.
  
  Проектувати веб-сторінки на основі попередньо розробленого макету.
  Створювати веб-сторінки за допомогою мови гіпертекстової розмітки.
  
  Усвідомлювати важливість кросбраузерної оптимізації сторінок сайту.
  Усвідомлювати важливість адаптивної верстки сторінок сайту.
  
  Мова гіпертекстової розмітки.
  Проектування та верстка веб-сторінок.
  Адаптивна верстка.
  Кросбраузерність.
- Основи HTML Сторінка
- HTML-довідник Сторінка
- Вправа "Вірш" (абзаци, заголовки) Завдання
- Вправа "Троянда столиста" (форматування символів) Завдання
- Вправа "Бембі" (зображення та ілюстрації) Завдання
- Вправа "Як вчитися вчитися" (абзаци, заголовки, форматування, ілюстрації) Завдання
- Вправа "Впізнай фільм" (карта зображень) Завдання
- Таблиці Сторінка
- Вправа "Бембі" (таблиці) Завдання
- Вправа "Табель" (таблиці) Завдання
- Вправа "Мислення зростання" (таблиці) Завдання
- Тест 2. Мова розмітки гіпертексту
- Пояснювати принципи та методи утворення та збереження зображень для веб-сторінок.
  Знати основні формати мультимедіа та теги їх додавання до веб-сторінок.
  
  Використовувати гіпертекстові, графічні, анімаційні та мультимедійні елементи на веб-сторінках.
  
  Дотримуватись авторських прав та ліцензій на використання графічних зображень та мультимедійних елементів на веб-сторінках.
  
  Графіка для веб-середовища.
  Анімаційні ефекти.
  Мультимедіа на веб-сторінках.
- Мультимедіа Сторінка
- Завдання Мультимедіа
- Вправа "Мислення зростання" (мультимедія) Завдання
- Форми на веб-сторінках
- Вправа "Мислення зростання" (форма) Завдання
- Тест 3. Додаткові елементи сторінки (мультимедіа та форми)
- Хостинг Сторінка
Каскадні аркуші стилів CSS3
Форматування та верстка веб-сторінок на основі стилів
- Знати основні теги каскадних аркушів стилів та їх параметри.
  Пояснювати переваги та недоліки різних прийомів верстки веб-сторінок.
  
  Проектувати веб-сторінки на основі попередньо розробленого макету.
  Створювати веб-сторінки за допомогою каскадних аркушів стилів.
  
  Усвідомлювати важливість кросбраузерної оптимізації сторінок сайту.
  Усвідомлювати важливість адаптивної верстки сторінок сайту.
  
  Каскадні таблиці стилів.
  Проектування та верстка веб-сторінок.
  Адаптивна верстка.
  Кросбраузерність.
- Стильове оформлення сторінок Сторінка
- Вправа "Стильове оформлення сторінок" Завдання
- Верстка сторінки Сторінка
- Вправа "Верстка" Завдання
- Довідник стильових властивостей Файл
- HTML та CSS: як створити простий сайт URL (веб-посилання)
- Практика CSS grid URL (веб-посилання)
- Практика CSS flexbox URL (веб-посилання)
- Практика "Роботи" Сторінка
- Вправа "Роботи" (стилі) Завдання
- Вправа "Ресторан" (стилі) Завдання
- Графічні ефекти на CSS Сторінка
- Вправа "Ефекти" Завдання
- Анімації Сторінка
- Тест 4. Каскадні аркуші стилів
Основи веб-програмування мовою JavaScript (+jQuery)
Інтерактивні веб-сторінки на основі JavaScript, знайомство з бібліотекою jQuery
- Описувати об’єктну модель документа.
  Пояснювати принципи взаємодії клієнт-сервер.
  Називати і наводити приклади використання основних елементів форм.
  Пояснювати принцип роботи прикладного програмного інтерфейсу.
  
  Створювати та налагоджувати інтерактивні веб-сторінки з використанням форм та веб-програмування.
  Створювати та застосовувати правила валідації даних, що вводяться у форму.
  Розміщувати сайт на сервері.
  
  Визначати необхідність застосування програмних скриптів на стороні клієнта чи сервера.
  
  Об’єктна модель документа.
  Веб-програмування та інтерактивні сторінки.
  Хостинг сайту.
  Веб-сервер та база даних. Взаємодія клієнт-сервер.
  Валідація та збереження даних форм.
  Прикладний програмний інтерфейс.
- Інструменти розробки у браузері Сторінка
- Об'єктна модель документа Сторінка
- Вивчення синтаксису мови JavaScript URL (веб-посилання)
- Кнопки, події, функції Сторінка
- Вправа "Підказка" Завдання
- Тестування на JavaScript Сторінка
- Вправа "Тест" Завдання
- Бібліотека jQuery Сторінка
- Вправа "Список справ" Завдання
- Слайдер Сторінка
- Проект "Монстрики" Завдання
- JavaScript Lessons URL (веб-посилання)
- JavaScript jQuery- The Missing Manual, 3rd Edition URL (веб-посилання)
Онлайнові конструктори сайтів
Розробка сайту в онлайновому конструкторі Weebly.Com: створення сайту з кількох сторінок, опитування відвідувачів, блогу
//Сервіс Weebly припинив свою роботу для користувачів з України, тему буде оновлено для роботи з іншим онлайновим конструктором сайтів
Розробка сайту на движку WordPress
Розробка блогу на основі системи керування вмістом WordPress, налаштування дизайну та структури блогу та сайту
Основи дизайну та CEO просування сайту
Принципи та поняття дизайну та юзабіліті; просування сайту та оптимізація для пошукових запитів
- Наводити приклади оптимізації та стратегій просування веб-сайтів.
  
  Виконувати перевірку та оцінку сайту з точки зору ергономіки та пошукової оптимізації.
  Створювати стратегію просування сайту.
  
  Дотримуватися правил ергономічного розміщення матеріалів на веб-сторінці.
  Ураховувати особливості користувачів з особливими потребами при розробці веб-ресурсів.
  
  Правила ергономічного розміщення відомостей на веб-сторінці.
  Пошукова оптимізація та просування веб-сайтів.
- Проектування сайту Сторінка
- Принципи графічного дизайну Сторінка
- “Flat Design vs Realism” (відео) URL (веб-посилання)
- Галерея дизайнів Lightbox Gallery
- Визначте помилки дизайну URL (веб-посилання)
- Основи СЕО Сторінка
- Як подружити свій сайт з Facebook URL (веб-посилання)
- Інклюзивний дизайн URL (веб-посилання)