Основи веб-дизайну. Огляд сервісів Веб 2.0

Анотація

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

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

Для даного уроку мною підготовлена лекція, бо матеріалу багато і він дуже важливий. Основне можна записати в робочий зошит (визначення, поняття тощо). А при підготовці до наступного уроку учні можуть повторити матеріал з лекції. Це зекономить час на уроці та дасть можливість приділити увагу розвитку практичних навичок учнів. Крім того учні отримують у друкованому вигляді пам’ятку «Правила оформлення веб-сторінок», яку можуть використати при розробці блогу чи сайту.

Даний урок є комбінованим. Крім того, що учні дізнаються новий матеріал, вони мають змогу ознайомитися з процесами роботи сервісів веб 2.0 та створенням блогів, сайтів. А веб-дизайн – один із способів розвивати не лише навички роботи з ПК, а й естетичний смак. І при вивченні цієї теми комп’ютер є основним засобом навчання, відпрацювання набутих навичок та їх засвоєння.

На своєму уроці я використовую розроблену мною презентацію, яка ознайомлює учнів з теоретичними аспектами теми. А практичні навички роботи показую на основі власноруч створених сайтів та блогів (http://kor-gimn.at.ua – сайт навчального закладу, http://my-astronomy.ucoz.ua – навчальний сайт з астрономії, http://multiurok.ru/new-info - власний сайт, блог вчителя). І активно використовую мережу Інтернет, де наочно можна пояснити принципи роботи сервісів веб 2.0, вікі-спільнот та веб-дизайну.

Якщо говорити про напрям уроку, то це така тема, де учні можуть проявити свої творчі здібності. Домашнє завдання побудоване таким чином, що окрім теорії учні показують свої практичні знання при підготовці до майбутніх практичних робіт та створенні міні-проектів з теми «Веб-дизайн» (презентація чи публікація). І вивчаючи лише одну з багатьох тем ми одразу повторюємо те, що вивчали раніше (робота з програмами MS Office – MS Word, MS Power Point, MS Publisher, мережею Інтернет тощо). А це дозволяє розвивати навички роботи з ПК вцілому.

Як наслідок нашої роботи над темою я хочу представити кілька робіт, які були створені учнями при виконанні домашнього завдання. Це блоги та додаткові файли проектів.

Практичні роботи учнів 11 класу

(у папці «Приклади практичних робіт» збережено копії даних веб-сторінок)

Блог «Французька кухня» http://frenchfood.mypage.ru

Блог «Італійська кухня» http://italyfood.mypage.ru

• Виберіть кольорову гаму виходячи з теми, вподобань (не більше 2-3 кольорів).

• Контраст між текстом і фоном.

• Розбити текст на абзаци.

• Виберіть розмір шрифту.

• Вирівняйте заголовки по центру, а основний текст по ширині.

• Використовуйте таблиці для подання даних.

• Не зловживайте флеш-анімацією, відео, музикою. Вони можуть відволікати від основних матеріалів.

• Зробіть гіперпосилання для переходу між сторінками сайту.

• Зробіть логотип сайту.

• Створіть мапу сайту.

Міністерство освіти і науки України

Відділ освіти Корюківської районної державної адміністрації

Корюківська гімназія Корюківської районної ради Чернігівської області

Розробка уроку

з інформатики

для учнів 11 класу

на тему:

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

Розробила: вчитель інформатики

Корюківської гімназії

Лагодна Діана Олегівна

2015 – 2016 н.р.

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

Девіз: «Комп’ютер - це найдивовижніший інструмент, з яким я коли-небудь стикався. Це велосипед для нашої свідомості». Стів Джобс. Memory & Imagination, 1990 г.

Мета:

навчальна: ознайомити учнів з поняттям веб-дизайн, веб 2.0, вікі, блог, основами веб-дизайну та процесом створення та ведення блогів;

розвиваюча: розвивати навички роботи з комп’ютером, мережею Інтернет, веб-сайтами, вікі-спільнотами, блогами, образне, логічне мислення, увагу, уяву, естетичний смак, творчі здібності;

виховна: виховувати самостійність, наполегливість, активність учнів.

Тип уроку: комбінований.

Обладнання та наочність: ПК, мережа Інтернет, презентація до уроку, веб-сайти, вікі-спільноти, блоги.

Хід уроку

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

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

ІІ. Актуалізація опорних знань

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

Орієнтовний перелік питань, які необхідно повторити.

1. Інтернет – це …

2. Дайте визначення поняттю веб-сторінка?

3. Веб-сайт – це…

4. Різновиди веб-сторінок та веб-сайтів.

5. Гіперпосилання – …

6. Назвіть основні етапи створення веб-сайтів.

7. Хостинг – це …

ІІІ. Мотивація навчальної діяльності

Ми логічно підійшли до безпосередньої роботи з мережею Інтернет та її сервісами. Сьогодні ми познайомимося з основами веб-дизайну, сервісами Веб 2.0 та процесом створення блогів.

Сьогоднішній урок – це не лише інформатика, а й естетика та художнє мистецтво.

Дизайн сайту – дуже важливий елемент впливу на Інтернет-аудиторію. Приміром, найчастіше, коли читач купує книгу, журнал або газету, в першу чергу він звертає увагу на логотип, назву і оформлення друкованого видання. А вже потім знайомиться зі змістом та інформаційним наповненням. На вибір читача вплине також наявність цікавих ілюстрацій, зручний читабельний шрифт, і звичайно ж, вдалий дизайн. Хороший дизайн видання – це 80% того, що читач придбає саме його. Давно відомо, що людина краще запам'ятовує візуальну інформацію, ніж текст. Враховується цей факт і при створенні сайту.

При створенні сайту, чи то корпоративний сайт, сайт-візитка, інтернет-магазин, бізнес-сайт, інформаційний портал або інший веб-ресурс, має величезне значення, як цей сайт буде оформлений. Саме веб-дизайн визначає комфортність відвідувачів під час ознайомлення з матеріалами сайту, блогу тощо.

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

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

Стати на сходинку ближче до таких професіоналів нам і допоможе сьогоднішній урок.

ІV. Вивчення нового матеріалу (міні-лекція з елементами демонстрації)

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

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

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

• шрифт — у межах одного веб-сайту він не повинен мати багато розбіжностей за такими характеристиками, як гарнітура (на­писання), кегль (розмір літер), колір;

• абзац — бажано, щоб мав перевагу який-небудь один з видів вирівнювання на сторінці, наприклад відступ з лівого краю або вирівнювання вліво;

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

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

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

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

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

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

• яскравість, тон і насиченість кольору мають відповідати фір­мовому стилю сайту;

• колір слід добирати з урахуванням орієнтування на аудиторію цього ресурсу;

• кількість використовуваних кольорів за можливості не повинна перевищувати трьох;

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

• вживання кольору повинно відповідати елементарним прави­лам логіки;

• текст обов'язково повинен бути читабельним, але не обов'язково чорним. Просто достатньо, щоб він був у контексті з іншими кольо­рами й не затьмарювався ними.

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

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

• метод використання прилеглих кольорів (добирання кольору за візуальною сумісністю);

• метод використання протилежних кольорів, контрастність (поєднуються кольори, протилежні один одному);

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

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

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

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

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

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

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

Базові елементи веб-дизайну:

• Лінії – підкреслюють важливий зміст, підсилюють читабельність сайту.

• Форми – утворюються з використанням замкнених контурів і тривимірних об’єктів.

• Текстура – використовується як фон і створює ілюзію поверхні.

• Колір – використовується як фон, для розставлення акцентів, утворює зображення, розділяє передній та задній план.

• Напрям – додає настрій, створює ілюзію сталості та руху.

Види форм:

• Геометричні (квадрат, овал, трикутник тощо).

• Природні (листя, крапля).

• Абстрактні (символи).

Кольорова гама сайту

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

• Світлий стиль – легко сприймається всіма відвідувачами, але здається надто простим.

• Однокольоровий стиль – стиль оформлення, в якому переважає один колір.

• Різнокольоровий стиль – передбачає використання 2-х або більше кольорів.

Дизайн сайту за принципом використання графіки:

• Чистий – стиль сайтів, на яких графічні елементи є частиною інформаційного наповнення, а не використовуються для оформлення.

• Стандартний – елементи використовуються для оформлення заголовку сайту.

• Художній – стиль сайту, де графіка є декорацією до змісту й основним елементом дизайну.

Розміщення контенту:

• Мінімалістичний – один головний об’єкт, який займає більшу частину площі.

• У 2,3 колонки.

• Складний стиль має велику кількість інформаційних блоків, різного розміру.

Стилі за тематичною ознакою:

• Стиль «Ретро».

• Стиль «Гранж» - асиметрія елементів.

• Футуристичний – роботи, високотехнологічні механізми.

• Журнальний – великі заголовки, якісні фотографії.

• Мультяшний – мультфільми чи комікси.

Правила оформлення веб-сторінок:

• Виберіть кольорову гаму виходячи з теми, вподобань (не більше 2-3 кольорів).

• Контраст між текстом і фоном.

• Розбити текст на абзаци.

• Виберіть розмір шрифту.

• Вирівняйте заголовки по центру, а основний текст по ширині.

• Використовуйте таблиці для подання даних.

• Не зловживайте флеш-анімацією, відео, музикою. Вони можуть відволікати від основних матеріалів.

• Зробіть гіперпосилання для переходу між сторінками сайту.

• Зробіть логотип сайту.

• Створіть мапу сайту.

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

Якщо говорити про тематику веб-спільнот, то це наукові, творчі, освітні, бізнес ресурси тощо. За територіальною ознакою: глобальні, регіональні, корпоративні.

Блог – веб-сайт, що створений для регулярного додавання записів, які містять текст, зображення та інші мультимедійні дані.

Блог – це один з типів сайту. Чим цей тип сайту, тобто блог відрізняється від всіх інших типів?

Так само як сайт, блог займає деякий простір, де зберігаються всі його файли і папки. І називається це сховище – хостинг. Це одна з головних спільних рис. У сайту, як і у блогу є електронна адреса, ввівши яку в адресний рядок браузера ми потрапляєте на головну сторінку.

Так само як сайт, блог може бути створений будь-яким користувачем інтернету, не дивлячись на вік, рід занять і соціальне становище.

Як і на сайті, так і в блозі інформація може надаватися у вигляді тексту, у вигляді якихось картинок, графіки або відео контенту.

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

А тепер розглянемо, чим же вони відрізняються.

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

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

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

Найголовніше, чим приваблює блог, це те, що для його створення не потрібно мати стільки знань як для створення сайту. Блоги, найчастіше, створюються на двигуні WordPress. Створити блог можна дуже швидко. Так само і керувати ним дуже просто. В адміністративній панелі можна додавати і редагувати контент, створювати якісь «фішки» для блогу і т.д. Все це
можна робити не заходячи на хостинг. Навчитися цьому дуже легко.

Крім того, кожен блог має певну мету. На сайті інформація дається в односторонньому порядку. А у блозі зовсім інша ситуація. Він призначений для прямого безпосереднього спілкування автора з читачами. Для цього, у блозі, є такий інструмент, як коментарі. Коментарі до будь-якої статті може залишити як читач, так і включитися сам автор. Тут він має безпосереднє спілкування з читачем, коли відповідає на його питання.

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

Блоги поділяються

За авторами:

• Особистий (авторський, приватний) блог – ведеться однією людиною (як правило його власником).

• “Прозорий” блог – ведеться від чужого імені невідомою персоною.

• Колективний блог – ведеться групою осіб за правилами, визначеними власником.

• Корпоративний блог – ведеться працівниками однієї організації.

За наявністю/виглядом мультимедіа:

• Текстовий блог – блог, основним змістом якого є тексти.

• Фотоблог – блог, основний зміст якого складають фотографії.

• Музичний блог – блог, основний зміст якого складає музика.

• Підкаст і Блогкастінг – блог, основний зміст якого надиктовуєтся і викладається у вигляді MP3-файлов.

• Відеоблог – блог, основний зміст якого представлений у вигляді відео файлів.

За особливостями контента:

• Контентний блог – блог, що публікує первинний авторський контент.

• Моніторинговий (посилальний) блог – блог, основним контентом якого є коментування посиланнь на інші сайти.

• Цитата блог – блог, основним контентом якого є цитати з інших блогів.

• Тамблелог Сплог – спам блог.

За технічною основою:

• Stand alone блог – блог на окремому хостингу і движку.

• Блог на блог-платформі – блог, що ведеться на потужностях блог-служби (Livejournal, Liveinternet і ін.).

• Моблог – мобільний веблог, що містить контент, що розміщується в вебі з мобільних або портативних пристроїв. 

Види навчальних блогів

1. Блог вчителя-предметника.

Даний навчальний блог може містити план або матеріали уроку, короткий конспект уроку в тезах, завдання учням, корисні поради щодо навчання або підготовки до занять, додаткову інформація учням, додаткову літературу, корисні посилання, навчальне відео, журнал успішності учнів класу, корисні та цікаві гаджети та віджети, можливість зворотного зв’язку, та інше.

2. Блог класу.

Створюючи блог класу (або паралелі) можна запрошувати вести його інших вчителів-предметників, батьків та учнів. При цьому варто розміщувати в даному блозі інформацію про різні заходи, які проводяться (тиждень фізики чи математики, творчий вечір запрошеного гостя, спортивні змагання…), плани позакласної роботи, навчальні матеріали, інформацію для батьків, світлини, цікаві відео, та інше.

3. Блог інтернет-товариства.

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

4. Блог предметного об’єднання.

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

5. Блог навчального проекту.

Даний блог створюється з метою ознайомлення, опрацювання та вивчення певної конкретної теми або явища. Наприклад: «Блог вивчення культурної спадщини Т.Г. Шевченка» або «Блог 21.12.2012», який присвячений проблемам кінця світу та їх науковому спростуванню і т.д.

6. Блог, присвячений певній конкретній темі, наприклад, дослідженням Адронного колайдера.

7. Блог – електронний зошит учня.

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

8. Блог – шкільна (або класна) газета.

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

Веб 2.0

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

Веб 2.0 (Web 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/).

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

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

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

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

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

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

• Моя сторінка обговорення за внутрішньою адресою Обговорення користувача: Іванов Петро.

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

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

V. Робота з комп’ютером

При роботі з комп’ютером учням пропонується зареєструватися на одному з запропонованих веб-ресурсів для створення блогів. Ця робота покликана як узагальнити дану тему, так і підготуватися до наступних уроків. А також повторити навички роботи в мережі Інтернет.

VI. Узагальнення і систематизація навчального матеріалу

Для узагальнення знань з теми учням пропонується розпочати роботу над проектом «Веб-дизайн». Учні класу діляться на групи по 3-4 учні, обирають стиль веб-сайту, над яким будуть працювати та готують публікацію чи презентацію з теми.

VIІ. Підбиття підсумків уроку

Учитель пропонує учням відповісти на запитання:

• Чи досягли ми мети, яку поставили перед собою на початку уроку ?

Завдяки чому? Що допомогло у засвоєнні матеріалу уроку?

• Що було легко, а що – складно?

• Що найбільше запам’яталося на сьогоднішньому уроці?

• Веб-дизайн – це …

• Які елементи стилю використовуються при створенні сайту?

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

• Які ви знаєте сервіси веб 2.0?

• Вікі технології та їх призначення.

• Що таке блог?

VІIІ. Домашнє завдання

Конспект уроку.

Завдання 1. Підготовка до практичної роботи. Знайти інформацію для створення кулінарного блогу. (Кожен учень отримує картку з країною та повинен до практичної роботи знайти інформацію про кулінарні традиції цієї країни та найпопулярніші страви. На практичній роботі учень безпосередньо буде працювати над створенням блогу та його заповненням).

Завдання 2. Підготувати міні-проект на тему «Основи веб-дизайну» (презентація чи публікація).

19

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

Огляд сервісів Веб 2.0.

Веб-спільноти. Вікі технології. Поняття блогу, різновиди блогів.

Створення й оформлення блогу, публікація повідомлень та настроювання параметрів блогу»

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

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

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

• шрифт — у межах одного веб-сайту він не повинен мати багато розбіжностей за такими характеристиками, як гарнітура (на­писання), кегль (розмір літер), колір;

• абзац — бажано, щоб мав перевагу який-небудь один з видів вирівнювання на сторінці, наприклад відступ з лівого краю або вирівнювання вліво;

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

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

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

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

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

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

• яскравість, тон і насиченість кольору мають відповідати фір­мовому стилю сайту;

• колір слід добирати з урахуванням орієнтування на аудиторію цього ресурсу;

• кількість використовуваних кольорів за можливості не повинна перевищувати трьох;

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

• вживання кольору повинно відповідати елементарним прави­лам логіки;

• текст обов'язково повинен бути читабельним, але не обов'язково чорним. Просто достатньо, щоб він був у контексті з іншими кольо­рами й не затьмарювався ними.

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

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

• метод використання прилеглих кольорів (добирання кольору за візуальною сумісністю);

• метод використання протилежних кольорів, контрастність (поєднуються кольори, протилежні один одному);

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

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

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

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

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

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

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

Базові елементи веб-дизайну:

• Лінії – підкреслюють важливий зміст, підсилюють читабельність сайту.

• Форми – утворюються з використанням замкнених контурів і тривимірних об’єктів.

• Текстура – використовується як фон і створює ілюзію поверхні.

• Колір – використовується як фон, для розставлення акцентів, утворює зображення, розділяє передній та задній план.

• Напрям – додає настрій, створює ілюзію сталості та руху.

Види форм:

• Геометричні (квадрат, овал, трикутник тощо).

• Природні (листя, крапля).

• Абстрактні (символи).

Кольорова гама сайту

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

• Світлий стиль – легко сприймається всіма відвідувачами, але здається надто простим.

• Однокольоровий стиль – стиль оформлення, в якому переважає один колір.

• Різнокольоровий стиль – передбачає використання 2-х або більше кольорів.

Дизайн сайту за принципом використання графіки:

• Чистий – стиль сайтів, на яких графічні елементи є частиною інформаційного наповнення, а не використовуються для оформлення.

• Стандартний – елементи використовуються для оформлення заголовку сайту.

• Художній – стиль сайту, де графіка є декорацією до змісту й основним елементом дизайну.

Розміщення контенту:

• Мінімалістичний – один головний об’єкт, який займає більшу частину площі.

• У 2,3 колонки.

• Складний стиль має велику кількість інформаційних блоків, різного розміру.

Стилі за тематичною ознакою:

• Стиль «Ретро».

• Стиль «Гранж» - асиметрія елементів.

• Футуристичний – роботи, високотехнологічні механізми.

• Журнальний – великі заголовки, якісні фотографії.

• Мультяшний – мультфільми чи комікси.

Правила оформлення веб-сторінок:

• Виберіть кольорову гаму виходячи з теми, вподобань (не більше 2-3 кольорів).

• Контраст між текстом і фоном.

• Розбити текст на абзаци.

• Виберіть розмір шрифту.

• Вирівняйте заголовки по центру, а основний текст по ширині.

• Використовуйте таблиці для подання даних.

• Не зловживайте флеш-анімацією, відео, музикою. Вони можуть відволікати від основних матеріалів.

• Зробіть гіперпосилання для переходу між сторінками сайту.

• Зробіть логотип сайту.

• Створіть мапу сайту.

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

Якщо говорити про тематику веб-спільнот, то це наукові, творчі, освітні, бізнес ресурси тощо. За територіальною ознакою: глобальні, регіональні, корпоративні.

Блог – веб-сайт, що створений для регулярного додавання записів, які містять текст, зображення та інші мультимедійні дані.

Блог – це один з типів сайту. Чим цей тип сайту, тобто блог відрізняється від всіх інших типів?

Так само як сайт, блог займає деякий простір, де зберігаються всі його файли і папки. І називається це сховище – хостинг. Це одна з головних спільних рис. У сайту, як і у блогу є електронна адреса, ввівши яку в адресний рядок браузера ми потрапляєте на головну сторінку.

Так само як сайт, блог може бути створений будь-яким користувачем інтернету, не дивлячись на вік, рід занять і соціальне становище.

Як і на сайті, так і в блозі інформація може надаватися у вигляді тексту, у вигляді якихось картинок, графіки або відео контенту.

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

А тепер розглянемо, чим же вони відрізняються.

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

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

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

Найголовніше, чим приваблює блог, це те, що для його створення не потрібно мати стільки знань як для створення сайту. Блоги, найчастіше, створюються на двигуні WordPress. Створити блог можна дуже швидко. Так само і керувати ним дуже просто. В адміністративній панелі можна додавати і редагувати контент, створювати якісь «фішки» для блогу і т.д. Все це
можна робити не заходячи на хостинг. Навчитися цьому дуже легко.

Крім того, кожен блог має певну мету. На сайті інформація дається в односторонньому порядку. А у блозі зовсім інша ситуація. Він призначений для прямого безпосереднього спілкування автора з читачами. Для цього, у блозі, є такий інструмент, як коментарі. Коментарі до будь-якої статті може залишити як читач, так і включитися сам автор. Тут він має безпосереднє спілкування з читачем, коли відповідає на його питання.

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

Блоги поділяються

За авторами:

• Особистий (авторський, приватний) блог – ведеться однією людиною (як правило його власником).

• “Прозорий” блог – ведеться від чужого імені невідомою персоною.

• Колективний блог – ведеться групою осіб за правилами, визначеними власником.

• Корпоративний блог – ведеться працівниками однієї організації.

За наявністю/виглядом мультимедіа:

• Текстовий блог – блог, основним змістом якого є тексти.

• Фотоблог – блог, основний зміст якого складають фотографії.

• Музичний блог – блог, основний зміст якого складає музика.

• Підкаст і Блогкастінг – блог, основний зміст якого надиктовуєтся і викладається у вигляді MP3-файлов.

• Відеоблог – блог, основний зміст якого представлений у вигляді відео файлів.

За особливостями контента:

• Контентний блог – блог, що публікує первинний авторський контент.

• Моніторинговий (посилальний) блог – блог, основним контентом якого є коментування посиланнь на інші сайти.

• Цитата блог – блог, основним контентом якого є цитати з інших блогів.

• Тамблелог Сплог – спам блог.

За технічною основою:

• Stand alone блог – блог на окремому хостингу і движку.

• Блог на блог-платформі – блог, що ведеться на потужностях блог-служби (Livejournal, Liveinternet і ін.).

• Моблог – мобільний веблог, що містить контент, що розміщується в вебі з мобільних або портативних пристроїв. 

Види навчальних блогів

1. Блог вчителя-предметника.

Даний навчальний блог може містити план або матеріали уроку, короткий конспект уроку в тезах, завдання учням, корисні поради щодо навчання або підготовки до занять, додаткову інформація учням, додаткову літературу, корисні посилання, навчальне відео, журнал успішності учнів класу, корисні та цікаві гаджети та віджети, можливість зворотного зв’язку, та інше.

2. Блог класу.

Створюючи блог класу (або паралелі) можна запрошувати вести його інших вчителів-предметників, батьків та учнів. При цьому варто розміщувати в даному блозі інформацію про різні заходи, які проводяться (тиждень фізики чи математики, творчий вечір запрошеного гостя, спортивні змагання…), плани позакласної роботи, навчальні матеріали, інформацію для батьків, світлини, цікаві відео, та інше.

3. Блог інтернет-товариства.

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

4. Блог предметного об’єднання.

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

5. Блог навчального проекту.

Даний блог створюється з метою ознайомлення, опрацювання та вивчення певної конкретної теми або явища. Наприклад: «Блог вивчення культурної спадщини Т.Г. Шевченка» або «Блог 21.12.2012», який присвячений проблемам кінця світу та їх науковому спростуванню і т.д.

6. Блог, присвячений певній конкретній темі, наприклад, дослідженням Адронного колайдера.

7. Блог – електронний зошит учня.

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

8. Блог – шкільна (або класна) газета.

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

Веб 2.0

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

Веб 2.0 (Web 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/).

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

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

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

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

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

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

Моя сторінка обговорення за внутрішньою адресою Обговорення користувача: Іванов Петро.

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

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

Підготувала:

вчитель інформатики Корюківської гімназії

Лагодна Діана Олегівна

Актуалізація опорних знань

• Інтернет – це …
• Дайте визначення поняттю веб-сторінка?
• Веб-сайт – це…
• Різновиди веб-сторінок та веб-сайтів.
• Гіперпосилання – …
• Назвіть основні етапи створення веб-сайтів.
• Хостинг – це …

Девіз уроку:

• «Комп’ютер - це найдивовижніший інструмент, з яким я коли-небудь стикався. Це велосипед для нашої свідомості».

Стів Джобс. Memory & Imagination, 1990 г.

Веб-дизайн

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

Елементи створен­ня стилю:

• шрифт;
• абзац;
• графічне оформлення;
• навігація веб-сторінками;
• кольорова гама.

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

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

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

• метод використання прилеглих кольорів;
• метод використання протилежних кольорів;
• метод використання природних поєднань кольорів;
• метод використання кольору різного ступеня насиченості.

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

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

Базові елементи веб-дизайну:

• Лінії

• Форми

• Текстура

• Колір

• Напрям

Види форм:

• Геометричні (квадрат, овал, трикутник тощо).

• Природні (листя, крапля).

• Абстрактні (символи).

Кольорова гама сайту

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

• Світлий стиль – легко сприймається всіма відвідувачами, але здається надто простим.

• Однокольоровий стиль – стиль оформлення, в якому переважає один колір.

• Різнокольоровий стиль – передбачає використання 2-х або більше кольорів.

Дизайн сайту за принципом використання графіки:

• Чистий – стиль сайтів, на яких графічні елементи є частиною інформаційного наповнення, а не використовуються для оформлення.

• Стандартний – елементи використовуються для оформлення заголовку сайту.

• Художній – стиль сайту, де графіка є декорацією до змісту й основним елементом дизайну.

Розміщення контенту:

• Мінімалістичний стиль – один головний об’єкт, який займає більшу частину площі.

• У 2,3 колонки.

• Складний стиль має велику кількість інформаційних блоків, різного розміру.

Завдання:

Визначити стиль

розміщення контенту.

Стилі за тематичною ознакою:

• Стиль «Ретро» .

• Стиль «Гранж» - асиметрія елементів.

• Футуристичний – роботи, високотехнологічні механізми.

• Журнальний – великі заголовки, якісні фотографії.

• Мультяшний – мультфільми чи комікси.

Правила оформлення веб-сторінок: (робота з пам’яткою)

Веб-спільноти

• спільноти веб-форумів;

• чатів;

• вікі-спільноти;

• блоги;

• соціальні мережі.

Блог

• Блог – веб-сайт, що створений для регулярного додавання записів, які містять текст, зображення та інші мультимедійні дані.

Блоги за авторами:

• Особистий (авторський, приватний) блог – ведеться однією людиною (як правило його власником).

• “ Прозорий” блог – ведеться від чужого імені невідомою персоною.

• Колективний блог – ведеться групою осіб за правилами, визначеними власником.

• Корпоративний блог – ведеться працівниками однієї організації.

За наявністю/виглядом мультимедіа:

• Текстовий блог – блог, основним змістом якого є тексти.

• Фотоблог – блог, основний зміст якого складають фотографії.

• Музичний блог – блог, основний зміст якого складає музика.

• Підкаст і Блогкастінг – блог, основний зміст якого надиктовуєтся і викладається у вигляді MP3-файлов.

• Відеоблог – блог, основний зміст якого представлений у вигляді відео файлів.

Блог

(фізика, інформатика, астрономія)

За особливостями контенту:

• Контентний блог – блог, що публікує первинний авторський контент.

• Моніторинговий (посилальний) блог – блог, основним контентом якого є коментування посилання на інші сайти.

• Цитата блог – блог, основним контентом якого є цитати з інших блогів.

• Тамблелог Сплог – спам блог.

За технічною основою:

• Stand alone блог – блог на окремому хостингу і движку.

• Блог на блог-платформі – блог, що ведеться на потужностях блог-служби (Livejournal, Liveinternet і ін.).

• Моблог – мобільний веблог, що містить контент, що розміщується в вебі з мобільних або портативних пристроїв. 

Веб 2.0

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

• Веб 2.0 — це платформа, до якої є вільний доступ, її структура універсальна та спрощена.

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

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

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

• Найбільшим популярним вікі-сайтом стала Вікіпедія  http://uk.wikipedia.org/ .

Вікіпедія

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

Робота над створенням блогу

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

• Конспект уроку.

• Завдання 1. Підготовка до практичної роботи. Знайти інформацію для створення кулінарного блогу.

• Завдання 2. Підготувати міні-проект на тему «Основи веб-дизайну» (презентація чи публікація).

Дякую за увагу!

Ретро -стиль у веб-дизайні

RETRO (з лат.): «назад», «звернений до минулого»

• За твердженням американського письменника Джона Стейнбека , більшість людей на 90 % живе в минулому, на 7 % в сьогоденні, а для майбутнього залишається тільки 3 %.
• Що ж, підрахунки нобелівського лауреата з літератури занадто складно перевірити, однак заперечувати факт привабливості подій минулого не доводиться.
• Якщо щемливе почуття цінності минулого і привабливості старовинних речей вам знайоме не з чуток, можливо, стиль ретро в веб-дизайні виявиться вашим фаворитом. Залишається лише подумати, чи задовольнить ретро-концепція цільову аудиторію ресурсу.

Ретро-стиль

• В одязі, автомобілебудуванні або дизайні інтер'єрів до ретро-стилю досить впевнено прив'язують часові рамки з 20-х до 80-х років минулого століття .
• Дати чіткі часові ознаки ретро-стилю у веб-дизайні не так легко, адже що в звичайному житті може вважатися минулим днем, в стрімко мінливій ​​IT-сфері сміливо можна назвати днем ​​позавчорашнім. І те, що тридцятирічний художник ще вважатиме актуальним і сучасним, молодь вже давно списала в утиль.

Ретро-стиль

• Однак тим цікавіше і складніше буде завдання, що стоїть перед дизайнерами, які вирішили відпрацювати стилістику свого сайту саме в ретро-стилі. Лише знання характерних рис і особливостей ретро-стилю, помножене на чимале почуття міри, дозволить не скотитися в банальний кіч.
• Більшість часових відрізків, якими може сміливо оперувати дизайнер, який вирішив використовувати стиль ретро, ​​прив'язані до моди 20 століття.

Ретро-стиль

• Хочете відтворити у відвідувача сайту відчуття агресивного шику 20-30-х років - допоможіть йому згадати музу Володимира Маяковського Лілю Брик , хороша ідея буде і використання персонажа Еллочка-людожерка з «Дванадцяти стільців».
• Це були тривожні роки раптової і масової дамської емансипації: жінки одягли брючні костюми, вкоротили спідниці і закурили довгі сигари. Всі ці панчохи в сітку, трикотажні шапочки і казанки а-ля Чарлі Чаплін , оголені руки і плечі в хутряних горжетках в роки НЕПу знатно розбурхували кров обивателю. Беріть оливковий, чорний і пурпурові кольори за основу, додайте драйв джазової імпровізації, казку синематографа і аеропланів - і Ви легко знайдете суть ретро 20-30-х років!

Ретро-стиль

• Якщо ж вам більше до смаку стриманість і скромна елегантність - озирніться в післявоєнні 40-і - 50-і роки. На зміну показній химерності і вульгарності прийшов new look стиль, винайдений Крістіаном Діором . Стиль чуттєвий, декадентський, безоглядно романтичний, стилізований під «кріноліновий» XIX століття. Це зарозуміло підняті підборіддя жінок у сукнях з шовку, атласу, крепдешину. Це тонкі талії, хвилюючі декольте, рукавички до ліктя, широкополі капелюхи і лаковані ремені, що форсують жіночність до меж полупристойного пін-апу.
• Перегляньте «Щоденник пам'яті» Ніка Кассаветіса і «Хрещеного батька» Френсіса Ф. Копполи , включіть записи оркестру Гленна Міллера і скоріше беріться за планшет. Настрій Ви вже вловили.

Ретро-стиль

• Бажаєте зробити ставку на сексуальність і чуттєвість - перегорніть сторінки журналів 60-х і 70-х рр. У той час тон задавали спокусливі кінодіви Бріджит Бардо , Мерілін Монро , Софі Лорен .
• Колірна палітра відповідає настрою - це домінуючий червоний, рожевий, синій в асортименті: квіти, горошок, клітина. Автомобільні прогулянки на шикарному "Бентлі" під запаморочливі мотиви крамольного Елвіса . Бітлз у «них», ВІА «Самоцвіти» - у «нас». Джинсові 70-і, взуття на платформі, танці під музику диско і море синтетики в одязі: нейлон, капрон, кримплен диких забарвлень. Легкість, яскравість, невимушеність - ось як можна буде описати сайт в ретро-стилі 60-х - 70-х рр.

Ретро-стиль

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

Ретро-стиль

• Підведемо підсумки. Ретро-стиль по суті цілком стабільний і затребуваний тренд у веб-дизайні, зі своєю чарівністю і унікальною кольоровою палітрою. Що б Ви не обрали: трагічні 20-і , карамельні 50-і , квіткові 60-і , дискотечні 70-і або номенклатурне ретро 80-х , відштовхуючись від минулого, доповнивши його своїми відчуттями і активно використовуючи багаті можливості графічних редакторів, Ви здатні створити маленький шедевр.
• Додатково колірними палітрами ретро-стилю можна надихнутися в невеликій добірці ретро дизайнів.

Dallas Advertising Agency

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

Lana Landis - реалізація на flash, красиві вінтажні фото + чудова музика.

ThunderFuel – компанія займається всім від дизайну, анімації до ігор.

Сайт-портфоліо Michela Chiucini веб-дизайнера – бачимо, що вона явно не байдужа до ретро-стилю.

Tennessee Vacation – для всіх любителів штату Tennessee і відпустки в тих краях, дуже класна реалізація в ретро стилі, де увага приділена практично кожній дрібниці, один з кращих сайтів в подібному стилі.

Дякую за увагу!