Теорія розробки Веб-сайту

Размещено на http://www.allbest.ru/

Теорія розробки веб-сайту

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

Web - це світова багатовіконна стрічка комп'ютерних баз даних, які використовують загальну інформаційну архітектуру, що обновлюється. Концептуально Web представляє собою систему управління базою даних типу «клієнт» - «сервер».

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

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

Вузол Web - це частина системи Internet, що вміщує сервер Web. Сервер Web являє собою програмне забезпечення вузла, що дозволяє браузеру Web отримати доступ до документів, які зберігаються на вузлі.

Web-сервер - це підключений до Internet комп'ютер, що підтримує протокол HTTP (HyperText Transfer Protocol). Він використовується для доставки даних в Internet і дозволяє користувачам клієнтських програм завантажувати і відтворювати текст, малюнки, звук, відео і інші дані. Протокол FTP (File Transfer Protocol) також є поширеним способом завантаження файлів на віддалений сервер.

Web-сервер, володіючи спеціальними програмними засобами, забезпечує представлення розміщених на ньому Web-сторінок і пов'язаних з ними файлів по запиту клієнта. Відвідуючи вузол за допомогою Web-orajwana, користувач робить запит, повідомляючи адресу URL (наприклад: microsoft.com). URL - це універсальний покажчик ресурсів (Uniform Resource Locator). Він є адресою файлу, що знаходиться в мережі. Отримавши запит, сервер представляє потрібну сторінку, а також всі пов'язані з нею файли, наприклад малюнки, звуки і т.п.

Web-оглядач - основний інструмент для перегляду і отримання інформації в Internet. Він є програмою, яка інтерпретує HTML-файли як Web-сторінки і відображає їх. Приклади Web-оглядачів: MS Internet Explorer, Netscape Navigator.

Web-оглядач можна використовувати для переходів з однієї Web-сторінки на іншу по гіперпосиланнях, для завантаження файлів з Internet на комп'ютер, для відтворення на Web-сторінці файлів звукозапису, анімації, відео, а також запуску програм-додатків (наприклад, поштових).

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

Початковою точкою (входом) будь-якого Web-вузла є його домашня сторінка. Вона відкривається за умовчанням, коли відвідувач переходить на вузол в Web-оглядачі, і забезпечує зв'язок з іншими Web-сторінками вузла за допомогою гіперпосилань.

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

Панель посилань - набір графічних або текстових кнопок Web-сторінки, що містить гіперпосилання.

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

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

Структура Web-вузла. Web-вузол є набором Web-сторінок, з'єднаних в загальну структуру, яка має ієрархічний вигляд. Вершиною цієї структури, як правило, є головна (домашня) сторінка. Звичайно їй відповідає HTML-файл, якому призначається ім'я Default.htm або Index.htm.

Перш, ніж приступити до роботи над сайтом, потрібно чітко уявляти, що в результаті має бути, а також перспективи розвитку сайту. Отже, потрібно вирішити:

* Навіщо створювати сайт (чи потрібно це взагалі).

* Про що буде сайт (тематика).

* Що це буде (домашня сторінка, портал, або щось ще).

* Відмінність від сайтів з такою ж тематикою (якщо це не домашня сторінка).

* Яка буде аудиторія сайту (стать, вік, інтереси і т.д.).

* Якого роду сервіси будуть присутні на сайті (форум, каталог, пошта і т.д.).

* Плани на найближче майбутнє.

* Плани подальшого розвитку (перспективи).

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

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

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

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

Кодинг і програмування. Тепер маємо оболонку (макет зовнішнього вигляду сайту) і план дій (структуру). Але, що стоїть за оболонкою? А за оболонкою знаходиться каркас, на якому ця оболонка тримається, це є код сторінки. Він відповідає за те, як в певній послідовності на сторінці відображається текст і картинки. Мова HTML є основною при створенні документів, що розміщуються у World Wide Web. Завдяки мові розмітки користувач Web може у себе на екрані переглянути документ у тому вигляді, в якому його задумав розробник: із визначеними розмірами шрифту і розбивкою на абзаци, із заданими розмірами і розташуванням малюнків, із виділеними словами, посиланнями тощо. HTML - набір угод для розмітки документів, що визначають зовнішній вигляд документів на екрані комп'ютера при доступі до них із використанням програми браузера. Документи, підготовлені мовою HTML, називаються HTML-документами. Уявити, як виглядає код HTML-документа, ви зможете, якщо завантажите документ у браузер і виконаєте команду Вид - В виде HTML (в браузері Internet Explorer). У вікні Блокнот ви побачите код поточного документа.

HTML-документ (або веб-сторінка) - це звичайний текстовий файл із розширенням htm або html, складений мовою HTML, який містить відомості для публікації в World Wide Web.

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

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

Тестування і доопрацювання. Коли сайт готовий, його викладають в мережу (Інтернет). Для цього потрібно зареєструвати для сайту доменне ім'я (адреса), і визначитися з хостингом (місце на сервері провайдера, де буде знаходитися сторінка). Процедура розміщення сайту в Інтернет не дуже складна, дізнатися все про це можна в Інтернеті.

Коли сайт розміщено в Інтернеті, то перш, ніж його просувати і рекламувати, слід перевірити сайт на працездатність. Можливо, якісь скрипта виконуються з помилками. Можливо, десь пропущена важлива і цінна інформація або потрібна картинка.

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

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

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

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

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

Подальша підтримка і оновлення. Яким би хорошим не був сайт, його слід періодично поповнювати новою інформацією, щоб не втратити відвідувача. Підтримкою і оновленням комерційних сайтів, як правило, займається теж фахівець: веб-розробник. З одного боку це універсал, від якого потрібні знання як працювати з графікою (поверхневе), хороші знання в області кодингу (html, css) і знання мов програмування (поверхневе); з іншого боку веб-розробник не має глибоких знань ні в області програмування, ні в області дизайну, тобто не може замінити ні дизайнера, ні програміста при розробці серйозного комерційного ресурсу. Підтримкою ж особистих проектів доведеться займатися самостійно, правда, з часом, якщо ресурс хороший, можуть з'явиться помічники-добровольці. Але, відвідувача цікавить не лише нова інформація. Важливо також підтримувати зв'язок з відвідувачами: спілкування на форумі або в гостьовій книзі, які розташовуються на сайті, по можливості, відповідати на всі листи відвідувачів. При розвитку ресурсу іноді необхідно орієнтуватися на думку відвідувача. Потрібно відстежувати за сайтами з подібною тематикою, і прагнути бути на належному рівні. Відстеження за тенденціями в дизайні і новими технологіями: те, що було добре декілька років тому, сьогодні може виявитися застарілим і безглуздим, можливо прийде такий момент, коли оформлення сайту доведеться змінити, і його начинку також.

Програми, що потрібні для web-мастерингу. Для виготовлення професійних сторінок доведеться вивчити декілька професійних програм.

Візуальні редактори дозволяють швидко розробляти web-сторінки і корегувати вже написані, але з ними потрібно бути обережними, оскільки, завдяки саме їм, сторінка може погано відображатися в браузері.

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

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

Вона нададуть змогу веб-розробнику здійснити:

Сканування фотографій;

Корекція відсканованих і готових фотографій, зокрема - тонова і колірна корекція; Ретуш фотографій;

Розуміння відмінностей у форматах графічних файлів;

Грамотне використання фільтрів;

Як конкретні програми можна привести наступні:

Adobe PhotoShop - дана програма є лідером в області графічних програм такого роду.

Adobe ImageReady - підтримує фільтри від Adobe PhotoShop і є незамінною для створення анімованих Gif-зображень.

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

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

Типовими представниками даного класу є Corel DRAW і Adobe Illustrator - обидва є лідерами в своїх областях і, відповідно, мають останні досягнення в області векторної графіки. На противагу ним можна порадити програму Corel Xara. Ця програма, на відміну від двох попередніх, є швидкою і маленькою, але деякі ефекти і дії, що є доступними в інших програмах, у ній зробити неможливо.

Програми переглядання web-сторінок - це браузери - у даний час популярними є три браузера - це Microsoft Internet Explorer, Opera та Mozilla FireFox. Для контролю зовнішнього вигляду сторінок доведеться скористатися власне ними. Якісна веб-сторінка повинна однаково виглядати в будь-якому з цих браузерів.

Простий текстовий редактор знадобиться для ручного виправлення і додавання HTML-коду, оскільки існуючі візуальні редактори не можуть повністю контролювати процес створення web-сторінки. Як приклад підійде звичайний Блокнот із стандартного постачання Windows або один HTML-редакторів, які мають вбудовані команди на перевірку правильності тегів і структури документів.

Текстовий процесор потрібен для набору тексту, перевірки орфографії і виправлення помилок в розпізнаних текстах. Як приклад - звичайний Microsoft Word.

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

Спеціалізовані програми дозволять виконати певні ефекти і справитися з такими завданнями, які іншими способами не можливо виконати.

Ulead GIF Animator - програма для створення анімованих GIF-зображень. Має потужні засоби оптимізації.

Фільтри для Adobe PhotoShop - їх кількість просто величезна, але реально знадобиться небагато. Вони здатні істотно підвищити роботу і двома-трьома натисненнями створити вражаючі ефекти.

Macromedia Flash - стандарт для використання в web-анімованих зображень. Має власне середовище розробки і дозволяє створювати вражаючу векторну анімацію.

3D-nporpaMMbi - створення тривимірних композицій і експортування в графічні формати, що застосовуються у веб. Як приклад - 3D Studio Max.

Програми для обробки звуку - можуть знадобитися, якщо того вимагає сторінка. Це програми взагалі окремого класу, але для простої обробки звуку, наприклад, підійде CoolEdit.

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

О.Бовкун, як варіант, пропонує використати для створення персонального сайту унікальну систему «Ucoz». По-перше, ця система має україномовний інтерфейс, а отже, немає необхідності замінювати стандартні назви сторінок та розділів. По-друге, персональний сайт на початковому етапі свого існування має солідний розмір - 405 Мб, якого вистачає для сайту навчального призначення. Єдина вимога, яка висувається до власників сайтів, - сайт повинен бути діючим. Тобто, власник сайту повинен його використовувати, змінюючи або доповнюючи інформацію, хоча б раз на 40 днів. Ця вимога мотивує власника сайту дбати про своє «творіння».

Персональний веб-сайт вчителя може виконувати наступні функції:

* створення навчального міні-середовища;

* поширення власного педагогічного досвіду;

* підвищення власного фахового рівня;

* підвищення рівня володіння засобами ІКТ;

* можливість зробити навчально-виховний процес гнучкішим за рахунок більш мобільного управління;

* розміщення навчальних матеріалів (програм, планів, контрольних запитань до заліку та тематичного оцінювання);

* допомога учням у самостійній роботі та підготовці домашнього завдання;

* можливість для учнів на відстані отримувати навчальний матеріал;

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

Размещено на Allbest.ru