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



Скачати 72.04 Kb.
Дата конвертації28.12.2016
Розмір72.04 Kb.
Урок 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 «Створення й ведення власного блогу»





База даних захищена авторським правом ©lecture.in.ua 2016
звернутися до адміністрації

    Головна сторінка