Основи веб-дизайну. Веб 2.0. Вікі технології. Створення оформлення, публікація повідомлень, настроювання параметрів.

Урок 28

Тема: Основи веб-дизайну. Веб 2.0. Вікі технології. Створення оформлення, публікація повідомлень, настроювання параметрів.

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

Розвивальна мета: Розвивати координацію рухів, зорову пам’ять, вміння працювати з програмами

Виховна мета: Виховувати зосередженість, вміння активно сприймати новий матеріал.

Тип уроку:  Урок вивчення нового матеріалу (лекція)

Структура уроку

1. Організаційний момент
2. Етап орієнтації
3. Етап проектування
4. Етап навчальної діяльності
5. Робота за ПК
6. Контрольно-оцінювальний етап
7. Домашнє завдання                                                                                                                                                                                                                                                                                               

Хід уроку

І. Організаційний момент

Сьогодні ми з вами розглянемо тему: «Основи веб-дизайну. Веб 2.0. Вікі технології. Блог, різновиди блогів. Створення оформлення, публікація повідомлень, настроювання параметрів.».

II. Етап орієнтації

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

III. Етап проектування

1. Основи веб-дизайну.
2. Веб 2.0.
3. Вікі технології.
4. Блог, різновиди блогів.
5. Створення оформлення, публікація повідомлень, настроювання параметрів.

ІV. Етап навчальної діяльності

Основи веб-дизайну.

Веб-дизайн— галузь веб-розробки і різ­новид дизайну, завданням якого є проектування призначених для користувача веб-інтерфейсів для сайтів або веб-додатків.

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

Основи веб-дизайну

Слід виділити такі елементи, які використовують для створен­ня стилю:

• шрифт — у межах одного веб-сайту він не повинен мати багато розбіжностей за такими характеристиками, як гарнітура (на­писання), кегль (розмір букв), колір;
• абзац — бажано, щоб мав перевагу який-небудь один з видів вирівнювання на сторінці, наприклад відступ з лівого краю або вирівнювання вліво;
• графічне оформлення сайту має пов'язуватись із загальною ко­льоровою гамою. Для цього треба продумати його концепцію. Усі графічні елементи можна поділити на два великі класи: мальовані і фото, які не треба змішувати. Якщо ви використо­вуєте фотокартки, необхідно попередньо здійснити їх обробку, тонову і кольорову корекцію, кадрування, вибрати розмір зо­браження;
• навігація веб-сторінкою — власне вона не дає змогу користува­чеві загубитися на сайті. Завжди потрібно залишати відвідува­чеві можливість перейти на головну сторінку сайту. Не слід забувати, що більшість користувачів потрапляють на сторінки через пошукові системи, тобто не на першу сторінку, і гарний сайт завжди дозволяє перейти на першу сторінку, тому необ­хідно дублювати навігаційну систему на всіх сторінках і забез­печити перехід на головну сторінку;
• кольорова гама — вона починається з вибору тих трьох кольо­рів сторінки, які використовуються для подання основного тексту, звичайних і відвіданих посилань. Кольорова гама повторюється, і таким чином у користувача створюється почуття зв'язності, єдності сайту.

Дотримання цих правил дозволить надати сторінкам профе­сійного вигляду і зробить інформацію офіційного сайту доступною і корисною.

Як дібрати кольори для сайту?

Щоб визначити колірне рішення, важливо пам'ятати про таке:

• яскравість, тон і насиченість кольору мають відповідати фір­мовому стилю сайту;
• колір слід добирати з урахуванням орієнтування на аудиторію цього ресурсу;
• кількість використовуваних кольорів за можливості не повинна перевищувати трьох;
• кольори, що використовуються на сайті, повинні взаємодіяти і гармоніювати між собою;
• вживання кольору повинно відповідати елементарним прави­лам логіки.
• Текст обов'язково повинен бути читабельним, але не обов'язково чорним. Просто достатньо, щоб він був у контексті з іншими кольо­рами й не затьмарювався ними.

Кольори потрібно використовувати дуже обережно. Не слід бра­ти занадто багато кольорів.

Можливі такі методи поєднання кольорів:

• метод використання прилеглих кольорів(добирання кольору за візуальною сумісністю);
• метод використання протилежних кольорів, контрастність( поєднуються кольори, протилежні один одному);
• метод використання природних поєднань кольорів(щоб дібрати відтінки, ско­ристайся тим, що існує в природі);
• метод використання кольору різного ступеня насиченості(поєднання різних відтінків одного ко­льору).

Добирання колірного рішення — один з важливих компонентів у дизайні та формуванні фірмового стилю. Колірна гама не повинна втомлювати або акцентувати на собі ува­гу.

Правила дизайнерів

Перше правило: Протестувати створені сторінки в усіх популярних браузерах та їх версіях.

Друге правило: Передбачення, як виглядатимуть створені сторінки з урахуванням кольору. Навігація має залишатися простою і зрозумілою

Третє правило: Використання тільки стандартних шрифтів, які поставляються з Windows і гарантовано знаходяться на машині клієнта. Це Arial, Times New Roman, Courier. Недотри­мання цього правила призводить до некоректного відображення вмісту сторінки.

Веб 2.0.

Під час автоматизованого створення веб-сайту неможливо обій­тися без уявлень про Веб 2.0.

Веб 2.0 (Web 2.0) — поняття, яким користуються для позначен­ня ряду технологій та послуг Інтернету.

Які риси сервісу Веб 2.0?

Веб 2.0 — це платформа, до якої є вільний доступ, її структура універсальна та спрощена. Учасники сервісу — співрозробники та співавтори, тобто сто­роння регламентуюча сторона скасовується. Після поповнення бази даних стають доступними кожному. Дані зберігаються не в ката­логах чи бібліотеках, а в АРІ-інтерфейсах. Сайти не статичні, а динамічні. Підтримка програмного забезпечення відбувається через відділ технічної підтримки. Спільний контент створюється кожним учасником.

Веб 2.0 можна також охарактеризувати його складовими компо­нентами, тобто тими новими можливостями й застосуваннями, що надають веб нового забарвлення: веб-сервіси, веб-синдикація, mash-up (змішування), мітки (теги), «розумні (динамічні) помічники».

Приклади Веб 2.0 проектів

Вікіпедія — вільна багатомовна енциклопедія. GoogleEarth — google-карти. Flickr — онлайн-фотоальбом. Netvibes — персональний робочий стіл. Digg.com — ресурс новин. UcoZ — веб-хостинг.

Вікі технології.

Вікі технології - це гіпертекстове середовище, яке відносять до сервісів Веб 2.0, колекція взаємопов’язаних між собою текстових сторінок, до яких кожний зареєстрований користувач інтернету може вносити свої зміни (за виключенням певної кількості статичних веб-сторінок) або створити нову сторінку.

Середовище ВікіВікі має переваги над іншими веб-ресурсами: можливість багатократно правити текст; облік змін, що були внесені до змісту сторінки, та можливість повернутися до попередньої версії; сторінка обговорень до кожної статті, де відвідувач може залишити свої коментарі.

Для створення вікі-середовища необхідне особливе серверне програмне забезпечення – «Вікі-двигун». Це різновид системи управління сайтом досить простої структури і функціональності, бо майже всі дії по структуризації та обробці відомостей здійснюються користувачами.

Перша Вікі-мережа, «Портлендське сховище зразків» (зразків програмного коду), була створена 25 березня 1995 року програмістом Уордом Каннінгемом. Найбільшим популярним вікі-сайтом стала Вікіпедія http://uk.wikipedia.org/.

Вікіпедія – це відкрита багатомовна онлайнова енциклопедія, що побудована на Вікі-технології. 

Інструменти Вікі-середовища застосовуються з різною метою: як персональний інформаційний менеджер; як засіб організації спільної роботи над колективними проектами; як колективна електронна дошка, на якій може писати ціла група; як база даних – сховище колективного досвіду. Також середовище Вікі-Вікі широко використовують у дистанційній формі навчання, для організації позакласної й позашкільної роботи зі школярами, створюють на цій платформі енциклопедії, посібники, підручники тощо.

Для здійснення пошуку потрібних відомостей у вікі-середовищі користуються панеллю «пошук». У поле «Пошук» введіть ключові слова та натисніть кнопку «Перейти», яка розміщується нижче. Результат пошуку сформується у вигляді списку посилань.

Основним структурним елементом будь-якого вікі-сайту є сторінка – «стаття».

Реєстрація здійснюється один раз на початку роботи в середовищі. Авторизація здійснюється на початку кожного сеансу роботи. Після реєстрації у Вікі-середовищі автоматично створюється власна сторінка користувача (власний міні-сайт). Якщо, наприклад, зареєструватися під іменем Іванов Петро, то система підтримує наступні сторінки:

•                               Власна сторінка користувача (головна сторінка Вашого міні-сайту) за внутрішньою адресою: Користувач: Іванов Петро.
•                               Моя сторінка обговорення за внутрішньою адресою Обговорення користувача: Іванов Петро.

Власна сторінка – це один із способів ефективно організувати роботу в проекті та допомогти іншим зрозуміти з ким вони працюють.

VI. Контрольно-оцінювальний етап

Фронтальне опитування

1. Які є способи створення сайтів?
2. Що таке хостинг?
3. Де «знаходиться» редактор веб-сайтів?
4. Які можливості має система керування вмістом сайту?
5. У чому полягає процес реєстрації?
6. Що таке технологія Веб 2.0?
7. Які правила веб-дизайну ви знаєте?

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

§ 28, 29 пит. 1,2,7 с. 272

Вивчити терміни, конспект, підготуватися до Практичної роботи № 12 «Створення й ведення власного блогу»