1 of 20

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Напрямки та інструменти веб-дизайну

2 of 20

  1. Інструменти, які використовують для розробки сайтів
  2. Основні етапи створення сайтів
  3. 30 корисних Chrome-розширень для дизайнерів та веб-розробників
  4. Незамінні інструменти веб-дизайнера
  5. Підбірка інструментів веб-розробників

3 of 20

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Пригадайте:

Напрямки та інструменти веб-дизайну

  • Що таке інформаційна структура сайту?
  • Чому важливо продумати структуру сайту?
  • Які структури розміщення інформації вам відомі

4 of 20

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Про основні інструменти розробки сайтів

Які бувають види програм для створення веб-сайтів

Як визначити доцільність використання інструментів дизайну сайту

Ти дізнаєшся:

Напрямки та інструменти веб-дизайну

5 of 20

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Інструменти веб-розробника

6 of 20

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Напрямки та інструменти веб-дизайну

Інструменти веб-розробника

Всесвітня павутина (Веб)

Найвідомішою та найпопулярнішою службою Інтернету є Всесвітня павутина (Веб). Саме після її розповсюдження став можливий доступ користувачів до Всесвітньої мережі.

Своєю появою Веб має завдячити Тіму Бернесу-Лі, який винайшов протокол HTTP, адреси URL та мову HTML — технології, на яких ґрунтується Веб.

7 of 20

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Напрямки та інструменти веб-дизайну

Інструменти веб-розробника

Служба Веб підтримується сукупністю серверів, які здатні обмінюватися даними за протоколом HTTP. Цих серверів мільйони, й розповсюджені вони по всьому світу.

На них містяться веб-сторінки — спеціальні документи, створені з використанням мови HTML.

Кожна веб-сторінка має адресу URL, за допомогою якої вона може бути знайдена.

Перегляд веб-сторінок здійснюється у спеціальних програмах – браузерах

Всесвітня павутина (Веб)

8 of 20

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Напрямки та інструменти веб-дизайну

Інструменти веб-розробника

Веб-дизайн (англ. web design) — галузь веб-розробки, що охоплює цілий ряд напрямів і дисциплін із створення та супроводу сайтів або веб-застосунків, таких як графічний веб-дизайн, проектування інтерфейсів, авторинг, використовність та оптимізація для пошукових систем

Веб-дизайн

менеджер проекту

дизайнер

веб-програміст

веб-майстер

Спеціалісти веб-дизайну

9 of 20

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Напрямки та інструменти веб-дизайну

Інструменти веб-розробника

На кожному етапі створення сайту веб-дизайнери послуговуються різними інструментами. З часом ці інструменти зазнають оновлення у відповідності до нових стандартів і програмного забезпечення, однак принципи їхнього застосування залишаються сталими

Інструменти і технології

У графічному веб-дизайні використовують пакети векторної й растрової графіки для створення прототипів зображень чи дизайну у форматі для веб.

До технологій, використовуваних при створенні веб-сайтів, належить стандартизована розмітка, яку пишуть вручну чи генерують за допомогою редакторів WYSIWYG

Для перевірки позиціювання сайту у пошукових системах та його покращення застосовують інструменти оптимізації для пошукових систем

До інструментів веб-дизайну належать також валідатори розмітки та інші засоби тестування використовності й доступності, які дозволяють пересвідчитися у тому, що сайт відповідає стандартам веб

10 of 20

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Напрямки та інструменти веб-дизайну

Інструменти веб-розробника

Валідатор — комп'ютерний сервіс, програма, об'єкт, функція або оператор, яка/який перевіряє відповідність деяких даних вимогам до типу, вмісту, формату або синтаксису.

Валідатор

Процес перевірки називають валідацію (процес затвердження, легалізації, ратифікації), а дані, що відповідають вимогам — валідними

11 of 20

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Напрямки та інструменти веб-дизайну

Інструменти веб-розробника

Програмне забезпечення

Текстові редактори

Використовують текстові редактори Блокнот, Edit Plus, HomeSite, HTML Pad та ін.

Готову сторінку зберігають з розширенням імені файлу htm або html

Створення веб-сторінки такими засобами передбачає знання мови розмітки гіпертекстів HTML

Розмір такого файлу невеликий, тому сторінка швидко завантажується та відкривається у вікні браузера

12 of 20

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Напрямки та інструменти веб-дизайну

Інструменти веб-розробника

Програмне забезпечення

Прикладні програми загального призначення

Програми з пакету MS Office, які можуть зберігати файли у форматі HTML: Word, PowerPoint, Publisher

Для створення веб-сторінки непотрібні знання мови HTML, застосування тегів для розмітки відбувається автоматично

Файли, у яких зберігаються такі сторінки, мають великий обсяг

13 of 20

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Напрямки та інструменти веб-дизайну

Інструменти веб-розробника

Програмне забезпечення

Спеціалізовані веб-редактори

Adobe Dreamweaver, MS Frontpage, SharePoint Designer, WYSIWYG Web Builder, KompoZer та ін.

Не вимагають від розробника знання мови HTML

WYSIWYG-редактори (англ. What You See Is What You Get -що ви бачите, то ви й отримуєте)

14 of 20

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Напрямки та інструменти веб-дизайну

Інструменти веб-розробника

Програмне забезпечення

Системи управління веб-контентом WCMS

WCMS (англ. Web Content Management System - система управління веб-контентом) є системи Joomla, Wordpress, Drupal, Media Wiki, Mambo, NUKE та ін.

Шаблони оформлення веб-сторінок і модулів, що роблять сайт динамічним: форумів, чатів, стрічок новин, каталогів файлів, контролю статистики тощо

15 of 20

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Домашнє завдання

  • Вивчити тему
  • Підготуйте інформацію (реферат, публікацію, презентацію, сайт) Що таке веб-дизайн? Що виконує кожен із спеціалістів веб-дизайну?»

  • Заповнити словничок

Види сайтів

менеджер проекту

дизайнер

веб-програміст

веб-майстер

Спеціалісти веб-дизайну

16 of 20

Домашнє завдання

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Заповніть таблицю «Інструменти розробки сайтів»

Назва програми

Логотип

(товарний знак)

Призначення

Веб-посилання

17 of 20

  • Розгадай�АнаГРамУ

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

18 of 20

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

СІТРУНЕНТИМ

Розгадай анаграму

ІНСТРУМЕНТИ

19 of 20

Робота з комп'ютером

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Відкрийте файл Інструменти для розробки сайтів.* і зробіть опорний конспект або презентацію, публікацію, сайт

20 of 20

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Працюємо за комп’ютером