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



Скачати 276.82 Kb.
Дата конвертації01.05.2017
Розмір276.82 Kb.


Тема: Основи веб-дизайну. Огляд сервісів Веб 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/).

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

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

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

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

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


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

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

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

Html-верстальник створює за допомогою коду розмітки web-сторінки: розміщує текст і малюнки. У його завдання також входить проставлення посилань для переходу з однієї сторінки на іншу.
У роботі html-верстальник керується технічним завданням, підготовленим відповідно до розробок програмістів і дизайнерів. Більш складний рівень у трудовій діяльності html-верстальника: створення різноманітних каскадних стилів, за допомогою яких можна додати сторінкам сайту стандартного і типового вигляду. Фахівці з html-верстки в основному самоучки. Достатньо мати кмітливість і бажання: всю іншу інформацію, що цікавить, легко знайти в Інтернеті або на полицях книгарень. Також можна закінчити спеціалізовані курси.

Види діяльності:

• верстка web-сторінок.



Місця роботи:

• компанії, що займаються розробкою сайтів;

• дизайн-студії;

• організації-департаменти Інтернет-проектів;

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

• компанії, які у своїй структурі мають Інтернет-відділи.



Професійні навички:

• уявлення про функціональні та навігаційні можливості, доступні для сайту;

• знання html-коду;

• уміння створювати таблиці стилів (CSS);

• знання програм Photoshop, Adobe Illustrator, Flash;

• володіння програмами-редакторами для html-верстки, такими як Dreamweaver;

• уміння орієнтуватися в системах керування сайтом (CMS);

• обробка графіки для web;

• розуміння принципів табличної, блокової та кросбраузерної верстки.
Специфіка професії

Плюси професії

• Можливість самостійного освоєння професії.

• Високий попит на ринку праці.

• Необхідність постійного відновлення знань.

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

Мінуси професії

• Мало простору для удосконалення.

• Рутинність.

• Постійна робота з монітором згубно позначається на загальному самопочутті.



Особисті риси

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



Освіта
Від людей цієї професії фахової освіти не потрібно, головне тут знання й досвід, підкріплені портфоліо. Необхідно знати: HTML (вручну), CSS 1, CSS 2, JavaScript, Dreamweaver, Front Pages. Бажано знати: Photoshop, PHP, MySQL, XML\XSL.

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

Якщо ви плануєте вступати до університету, подавайте документи до:
Університету сучасних знань (Київ)

Київського національного університету ім.. Тараса Шевченка

Київського політехнічного інституту (КПІ)

Кар’єра
Успішний верстальник, що починає, в майбутньому може претендувати на посади: веб-дизайнер, веб-програміст, баннер-мейкер.

Додаткові особливості:

Html-верстальнику необхідне знання графічних і флеш-програм, оскільки саме йому доведеться працювати над створенням і форматуванням картинок і банерів, без яких не обходиться жоден сайт. Якщо верстальник працює із великою кількістю html-сторінок, то при цьому завжди використовуються спеціальні програми-редактори для верстки, такі як, наприклад Dreamweaver. Також верстальнику необхідно розуміти різноманітні системи керування сайтом (CМ).


Професія Веб-дизайнера досить-таки нова. Восьмидесяті роки – прості роки, існує вже чимала кількість сайтів, але всі вони подібні один на одного, всі дотримуються чіткого академічного стилю оформлення. Але технології розвиваються все швидше і швидше, модифікується мова HTML, з’являються нові просунуті браузери. Елементом відображення web-сайтів стає не лише текст, але і графіка, що і стало поштовхом до появи нового напряму в дизайні – web-дизайну і, відповідно, виникненню нової професії. З’явилися компанії, які стали включати в число своїх послуг розробку оригінального дизайну своєї продукції, як ще один інструмент для залучення відвідувачів.

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

Web-дизайнер повинен знати: класифікацію сайтів за призначенням; функції моди та дизайну; основи малюнку, живопису, композиції, кольору; історію мистецтв і дизайну; історію і основи проектування шрифтів; способи конструювання і моделювання сайтів; технологію виготовлення і сучасної обробки зображень; знання спеціальних програм для ЕОМ і галузевих стандартів.

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

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

Створення сайту – це не лише його зовнішнє оформлення, але і цілий ряд інших робіт:

1. Постановка завдань, які повинен вирішувати сайт

2. Вироблення ідеології сайту (концепції сайту)

3. Підготовка контенту сайту (текст сайту, таблиці, графіка сайту тощо)

4. Розробка і відладка програмного коду сайту

5. Пошукова оптимізація сайту

6. Розкрутка сайту

7. Підтримка сайту тощо.

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

Зокрема:

1. Розуміти основні цілі, що стоять перед конкретним бізнесом.

2. Уміти формулювати основні завдання, поставлені перед сайтом, покликані вирішувати певні проблеми конкретного бізнесу.

3. Уміти розробити грамотну ідеологію сайту (концепція сайту).

4. Уміти аналізувати можливі шляхи досягнення поставлених цілей.

5. Уміти вибирати з можливих шляхів оптимальний.

6. Уміти запропонувати конкретні рішення схемо-технічні рішення для досягнення виявлених цілей сайту.

7. Уміти лаконічно, ємко і грамотно формулювати текст сайту.

8. Уміти збирати і аналізувати статистику роботи самого сайту і запитів потенційних клієнтів конкретного бізнесу в пошукових системах.

9. Знати програмування.

10. Мати загальні уявлення про колір і викликаємих кольорових асоціаціях.         

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

Створення складних сайтів (Інтернет-порталів) ведеться групою фахівців різної спеціалізації:

1. Контент-менеджер, по-іншому – веб-письменник.

2. Веб-редактор.

3. Перекладач.

4. Дизайнер.

5. Програміст.

6. Маркетолог.

7. Фотограф.

8. Системный адміністратор та ін.

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

Web-дизайнер повинен володіти програмами такого роду, як Photoshop, Corel Draw, 3d Studio Max, і окрім цього він обов’язково повинен знати такі мови програмування, як HTML і Javascript.
На сьогоднішній день це професія, яка швидко набирає темпи. Щодня з’являються нові і нові сайти, відповідно є гостра необхідність в кваліфікованих фахівцях. Часто зустрічаються оголошення про вакансії web-дизайнера, або web-розробника. Кожна солідна компанія зараз бажає мати свій особистий сайт і це свого роду є візиткою.
Веб-дизайнеру початківцю перш за все потрібно орієнтуватися на зарубіжну літературу, перекладену на українську/російську мови, тому що іноземні фахівці мають більший досвід роботи ніж наші. Далі, перш ніж створити якусь подібність дизайну майбутнього сайту, необхідно “полазити по Інтернету” і подивитися аналогічні роботи, щоб продумати структуру й інтерфейс.

Плюси роботи:

Можливість самовиразитися і самореалізуватися.


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

Будучи професіоналом, знайти роботу досить просто.


Досить непогані умови праці (мультимедіа, стіл, крісло – “живи – не хочу”).

Мінуси роботи:

Зарплата безпосередньо залежить від наявності замовлень.


Частенько навіть хороша робота у великому обсязі йде в “корзину”. Твоє творіння може не збігатися з уявленнями замовника про дизайн.
Обсяг роботи перевищує необхідність у такій (створювати інколи доводиться декілька макетів, з яких іде лише один).
Головний біль в прямому і переносному значенні.
Негативний вплив комп’ютера (падіння зору, внутрішній очний тиск, нервозність).

Веб-дизайнер повинен мати:

Художній смак. Як художник-дизайнер, потрібно розміряти можливості Інтернету з ідеєю оформлення.

Вміння працювати з програмами (векторна, растрова, тривимірна графіка, різні аніматори).

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



Поради початківцям:

Наведемо приклад корисних програм для початківців.


Найлегша зі всіх Microsoft Frontpage Express або Office’ний варіант 98 або 2000. Ця програма найлегша для початківців, оскільки володіє рядом безперечних достоїнств. По-перше, у неї дуже грамотний інтерфейс, по-друге, не треба знати мову HTML, а по-третє, – до програми додається багато прикладів, шаблонів і помічників. Наступна програма – це Netscape Composer. Вона теж досить легка для освоєння, хоча трохи поскладніша Frontpage’a. І, нарешті, Macromedia Shockwave – програма для створення дуже красивих анімованих сайтів. Вона теж досить проста, але, поза сумнівом, складніше Composer’a і Frontpage’a.

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


Користувач і не замислюється, скільки всього необхідно, щоб на «клік» мишею відкривалася сторінка. Він і не повинен замислюватися – головне, щоб було зручно і, бажано, красиво. А по технічних питаннях болить голова у творця сайту – web-майстра.

Насправді, web-майстер – поняття дуже невизначене. Адже для того, щоб створити коректно працюючий сайт, необхідні зусилля, як мінімум, трьох фахівців: web-програміста (поєднує написання програм із адмініструванням сайту), web-дизайнера і контент-редактора. А щоб їхнє дітище не «померло» і стало «розкрученим» у всесвітній павутині, потрібен ще й менеджер із маркетингу та реклами.

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

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

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

Нехай мене навчать!

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



Сьогодні wеb-майстер повинен уміти:

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

– програмувати на С / С + +, Perl і Java / JavaScript (рідше – PHP і ASP);

– працювати з базами даних (SQL, Postgres і т.д.);

– розробити стиль фірми (або підтримувати вже наявний);

– працювати із графічними пакетами (Photoshop, Corel Draw, Flash і т.п.);

– розміщувати і оптимізувати графіку;

– верстати сторінки в html;

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

– встановити та налаштувати відповідний веб-сервер і поштовий сервер, забезпечити їхній захист та стабільну роботу. Для цього необхідно знання NT + IIS і Unix (FreeBSD, Linux …)+ Apache;

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

Скільки коштує?

Дизайнер – традиційно дорогий співробітник (від $ 800 і вище), тому що його робота передбачає авторське тавро і копірайт. Особливо, якщо дизайнер «з нуля» створює стиль фірми. Тоді вся подальша рекламна і поліграфічна продукція буде зав’язана на стилі сайту, який створив дизайнер. Далі за вартістю йдуть програмінг (від $600) і контент-редактор (від $500). Ці цифри – початкова ціна, верхня «межа» може перебувати на захмарних висотах.


Як приватники, так і студії працюють з клієнтом за двома схемами: перша передбачає створення продукту та передання його замовнику, а друга – постійний супровід сайту (підтримка, «розкрутка», захист, поновлення тощо). Вартість такої підтримки у приватного web-майстра – від $100 до $300 на місяць. Ці гроші – «хороша надбавка до зарплати» web-майстра.

Особисті риси

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


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

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

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


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

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


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

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



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

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

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

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

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

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

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

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

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

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

  • Які професії пов’язані зі створенням веб-сайтів?


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

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

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

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





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

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