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

Про матеріал

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

Перегляд файлу

Урок 28

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

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

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

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

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

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

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

Хід уроку

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

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

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

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

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

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

І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. Контрольно-оцінювальний етап

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