Курс лекцій з дисципліни «Web-проектування» для студентів спеціальності 080402 «інформаційні технології проектування»/ Уклад.: О. П. Цурін. К.: Нтуу «кпі», 2011 р с




Pdf просмотр
Сторінка1/10
Дата конвертації14.02.2017
Розмір5.21 Kb.
ТипКурс лекцій
  1   2   3   4   5   6   7   8   9   10

1
Курс лекцій з дисципліни «Web-проектування» для студентів спеціальності 7.080402 – «інформаційні технології проектування»/ Уклад.:
О.П. Цурін. – К.: НТУУ «КПІ», 2011 р. –с.

Навчальне видання
Курс лекцій з дисципліни «Web-проектування» для студентів спеціальності 7.080402 – «інформаційні технології проектування»

Укладач: Цурін Олег Пилипович, канд. техн. наук, доцент
Відповідальний редактор Цурін Олег Пилипович, канд. техн. наук, доцент

Рецензенти: В.М. Подладчиков, доктор техн. наук, професор
П.В. Кучернюк, канд. техн. наук, доцент



Редакція викладача


2
Зміст

ВСТУП (основні поняття Web-проектування)
4
В.1. Різниця між Web-дизайном та Web-проектуванням
4
В.2. Питання, що входять до Web-проектування
7 1. 1
КЛАСИФІКАЦІЯ Web-САЙТІВ
9 1.1 Класифікація по призначенню
9 1.2 Класифікація по технологіях, що використовуються
16 2
МОДЕЛІ ТА ЗАСОБИ МОДЕЛЮВАННЯ WEB САЙТІВ
20 2.1. Модель та моделювання роботи з Web-сайтом:
20 2.2 Імітаційне моделювання
22 3
СТРУКТУРА ПРОЦЕСУ РОЗРОБКИ WEB -САЙТІВ та WEB –
ДОДАТКІВ
26 3.1.Структура процесу розробки
26 3.2. Технічне завдання на розробку
28 4
ЕРГОНОМІЧНІ ОБМЕЖЕННЯ ТА РЕКОМЕНДАЦІЇ ПРИ WEB –
ДИЗАЙНІ
32 4.1. Обмеження на кількість елементів керування
32 4.2 Розташування інформації
34 4.3. Інформаційне наповнення
36 4.4. Графічна та текстова інформація
37 4.5. Часові обмеження при роботі з Web-сайтами та Web-додатками
38 4.6 Вплив кольору
40 5
МЕТОДИ РОЗРОБКИ
43 5.1 Використання HTML та програмних систем для розробки
43 5.2 Динамічні Web-сайти та системи управління Web-контентом.
45 5.3 Характеристики сучасних CMS
52 6
РЕЄСТРАЦІЯ ТА РОЗКРУЧУВАННЯ WEB -САЙТІВ У СВІТОВІЙ
МЕРЕЖІ
57

3 6.1.Підготовка до реєстрації на пошукових системах і каталогах
57 6.2. Індексація Web-сайту
67 6.3 Основні параметри сайтів, які видають пошукові системи
73 7
ПОНЯТТЯ РЕЙТИНГУ ТА РЕЙТИНГ WEB-САЙТІВ
76 7.1 Вихідні дані та їх збирання
76 7.2 Експертні оцінки та їх підрахунок
77 7.3 Використання даних з пошукових систем
79 7.4 Сучасні методи побудови рейтингу ВНЗ (Webometrics та інші)
82 8.
ВРАЗЛИВОСТІ WEB-САЙТІВ ТП WEB-СЕРВЕРІВ
91 8.1 Вразливості програмного забезпечення та Вразливості конфігурації
92 8.2 Класифікація вразливостей і атак
95 8.3 Статистика вразливостей Web-додатків
97 8.4 Аутентифікація,Авторизація та Атаки на клієнтів
106 8.5 Виконання коду (Command Execution), Розголошення інформації
(Information Disclosure)
119 8.6 Логічні атаки (Logical Attacks),
136















СПИСОК РЕКОМЕНДОВАНОЇ ЛІТЕРАТУРИ
188

4

ОСНОВНІ
ПОНЯТТЯ WEB-ПРОЕКТУВАННЯ

В
1 Різниця між Web-дизайном та Web-проектуванням
В багатьох джерелах та побуті вважається, що розробниками Web-сайтів є
Web-дизайнери. Але не складно показати, що Web-дизайнер це є один з розробників Web-сайтів. «Web- дизайн (від англ. Web design) згідно з
Векіпедією (Вільна енціклопедія) є — галузь веб-розробки и різновидність дизайна, в задачі якого входить проектування веб-інтерфейсів користувачів для сайтів чи веб-додатків. Веб-дизайнери проектують логічну структуру веб-сторінок, знаходять найбільш зручні рішення надання інформації, а також займаються художнім оформленням веб- проекта.» У результаті поєднання двох галузей людської діяльності гарний веб-дизайнер повинен бути знайомий з останніми веб-технологіями і мати відповідні художні якості.
Це визначення має суттєві недоліки.
По-перше, нема чіткого визначення місця Web-дизайнера у розробці та по дальшому супроводженні сайтів. Супроводження для сайтів це такий же важливий етап як і створення. Сайту без інформаційного наповнення не
існує, а його дає замовник.
По-друге, логічну структуру сайту, як і його інформаційне наповнення, теж задає замовник.
По-третьє, подальше існування сайту, його розвиток, його супроводження теж залежать не тільки від Веб-дизайнера.
І, четверте, сайт може мати певні вразливості (іноді вони мають назву - "дірки") і їх наявність залежить від кваліфікації Веб-дизайнера, а точніше від сумісної роботи Веб-дизайнера та Веб-програміста.

5
Фактично у розробці сайту приймають чи повинні приймати участь декілька спеціалістів різних фахів.
1. Замовник, який володіє інформацією, що розміщується на сайті. Який вміє структурувати інформацію, виділяти найбільш важливу, зробити її лінгвістичну перевірку чи доручити зробити цю перевірку відповідним фахівцям, виділити інформацію, що буде поновлюватись, визначити засоби online та offline зв'язку. І цей перелік може у кожному конкретному випадку бути продовжений.
2. Web-дизайнер функції якого в основному співпадають з наданим у
Вікіпедії визначенням. Але його треба розглядати як координатора робіт по створенню сайта. Він повинен опікуватися і про подальше існування розробленого сайту.
3. Web-програміст. Його роль все збільшується в процесі розвитку Web- технологій. Якщо на початку існування Web-сайтів його функції зосереджувались на розробці скриптів, які розширювали можливості сайтів. При технологіях, коли генерація сторінок виконується на боці сервера, функції Web-програміста при розробці Web-сайта вважаються основними. До речі, він є і основним джерелом наявності вразливостей на сайті, і тим, хто їх може прибирати;
4. Ще одним спеціалістом, який може бути залучений до роботи над
Web-сайтом, є Web-художник. Часто без спеціальної освіти, та таланту художника знайти художні рішення не вдається.
5. Якщо сайт потужній, а вміст (контент) збирається з багатьох джерел, керує проектом Менеджер проекту.
Для розробки Web-сайту на замовлення ідеальним було би об’єднання перших трьох спеціалістів в одній особі. Фактично це не можливо і тому йдуть, по-перше, на використання попередньо розроблених шаблонів (щоб зменшити необхідність у художниках), по-

6 друге, на використання розроблених плогінів (щоб зменшити необхідність у програмістах). Але розробка Web-додатків (“Web-приложений”- російською мовою) виконується Web-програмістами. Складності полягають і в тому, що Web-дизайнер це напівтехнічна професія, а Web- програміст – технічна. Якщо розглянути глибше, то і програміст має в собі декілька рівнів (Ф.Брукс “Мифический человеко-месяц или как разрабатываются программные системы“). Ці рівні треба враховувати і при підготовці програмістів у ВНЗ. Хоча є крилата фраза: «Навчити програмуванню не можливо, а навчитись можна». Ця фраза підкреслює практичний бік цієї професії де в основі лежить велика самостійна робота.
Виділю 4 категорії програмістів, яки визначив у своїй роботі Брукс. 1.-
«Ідеолог» це той, хто може генерувати ідеї вирішення задачі (програміст він середній, може лише перевірити свої ідеї, на тій мові програмування, що знає; 2- «Алгоритміст». Його задача перейти від ідеї до алгоритмів.
Знання програмування теж середнє. 3-«Кодувальник». Чудово володіє мовою програмування. По алгоритмам створює програмні реалізації; 4-
«Тестер» . Дуже важливий ланцює, що знає методи та засоби тестування програмних рішень. Web-програміст має все більше значення при розробці Web-сайтів та Web-додатків. Якщо Web-дизайнеру ще іноді вдається засвоїти програмування з боку клієнта (звичайно JavaScript), то серверні додатки створюються професійними програмістами
(програмування на мовах РНР і це нижній рівень, а дійсно професійні програмісти працюють на мовах С++ та Java ). В деяких публікаціях є висловлювання, що сучасний сайт це програмний продукт. Якщо сайт і звичайний та простий, але вимагає засоби спілкування, то вони створюються програмістами. До засобів спілкування чи активних компанентів відносяться форми, гостьові кгниги, форуми та інше подібне.
Можна взяти стандартну розробку, але фільтрацію інформації для

7 більшості активних компанентів треба робити. Обумовлено це багатьма причинами і в основному пов'язаними з шумом, який генерує користувач- нецензурна лексіка, просте клацання, образи та інше.
В2 Питання, що входять до Web-проектування
Web-проектування це процес, який включає:
- створення та-чи узгодження Технічного завдання;
- розробку Web-сайту (додатку);
- SEO (оптимізація сайту, формування мета тегів та robots.txt);
- Реєстрація в пошукових системах, каталогах, обмін банерами
(просування сайту);
- Аналіз рейтингу сайта;
- Сканування на вразливості та їх прибирання;
- Супроводження сайту та оцінка якості супроводження.
В Вузах Росії цей курс часто має назву «сайтостроение».
1.
КЛАСИФІКАЦІЯ WEB-САЙТІВ
InterNet – це великий смітник
Рей Брейдбері (відомий у світі фантаст)

Важливість
і складнощі задач класифікації. На цей час в InterNet понад
280 млн. Web-сайтів. Кількість їх постійно зростає. Звідси і збільшення ентропії і реальність слів Рея Брейдбері. Будь-яка класифікація при такій кількості Web- сайтів буде умовною, але хоча б 90% сайтів вона повинна охоплювати. При цьому рішення про створення чи замовлення нового сайту бажано вести на основі класифікації сайтів. Критерії класифікації можуть бути різні, але основний – це призначення сайту.

8
Успішність
нового проекту З’являються сотні нових проектів, але тільки деякі з них є успішними. Успішність залежить від багатьох факторів, і в першу чергу від мети та задач проекту, ідей закладених у реалізацію, подальшу підтримку проекту, фінансового забезпечення проекту.
1.1 Класифікація по призначенню
Сайт
-візитка . Ці сайти охоплюють дуже широку множність існуючих
Web-сайтів Це можуть бути і сайти з декількох сторінок, і достатньо розгалужені сайти із засобами online та offline зв’язку, з форумами та гостьовими книгами. Web сайт-візитка використовується навчальними закладами, підприємствами, організаціями та приватними особами.
Звичайно простий сайт візитка складається з декількох сторінок і в залежності від призначення має певні розділи. Можна надати деякі класи цих сайтів. Особисті сайти і в залежності від професійної діяльності особи вони можуть мати подібні розділи. Наприклад, Web сайти викладачів з такими розділами як: біографічні дані, навчальна та наукова діяльність, виховна діяльність, методичний матеріал, а далі можуть бути розділи, які виводять з класу “Особисті сайти”- спеціалізовані форуми по дисциплінам, об’яви на сайти навчальних груп та інше. Аналогічні, але значно об'ємні,
Web сайти підрозділів Вищих Навчальних Закладів (ВНЗ) з такими розділами як: історія, педагогічний склад, навчання, наука, студентське життя з багатьма підрозділами, інформація для абітурієнтів та інше. Для
ВНЗ до деяких видів інформації можуть бути сформульовані певні вимоги.
Клас особистих сайтів може бути розглянуто і для компаній, які бажають розмістити інформацію про себе і тоді можуть бути розділи: «Про компанію», «Продукція чи послуги», «Прайс-листи», «Контактна
інформація». Дизайн цих сайтів надзвичайно різний. Від простого до розмальованого та з використанням анімованих малюнків.

9
Зараз у більшості випадків сайти візитки з багатьма додатковими можливостями робляться блогами, де користувач може ввести, змінити та відправити інформацію. Так більшість викладачів кафедри СП ІПСА мають свої блоги, наприклад, блог проф.. А.І. Петренко http://telef.kpi.ua/teacher/blog/petrenko
, блог доц. О.П. Цуріна http://telef.kpi.ua/teacher/blog/tsoorin
Персональний
проект – особистий проект, тематика дуже різнорідна, оформлюється в будь-якому стилі, що розкриває зміст сайту. Часто ці сайти створюються особами, для яких тематика сайту є їх хобі. Ці сайти близькі до сайтів візиток, Але орієнтовані на певне інформаційне наповнення. .
Контент
-проект чи спеціалізований інформаційний Web—сайт.
Звичайно це досить великий віртуальний масив інформації. Це може бути
інформація по одній тематиці чи по різним, може бути багато тематичних розділів, чи навіть декілька самостійних проектів. Створюються
інформаційні Web-сайти таким чином щоб для користувача це було основним джерелом інформації і нагадувало енциклопедію чи спеціалізований журнал по тематиці Web-сайту. Суттєвою різницею є наявність гіперпосилань на Web-ресурси, що створює зручну роботу користувача з інформаційним сайтом. Ці проекти дуже часто пов’язані з комерційними проектами, коли користувач проекту перетворюється у покупця, іноді вони можуть бути і розважальними чи ігровими порталами, а також виконувати освітянські функції. Всі знайомі з такими проектами.
Зараз без захисту від вірусів працювати з комп’ютером не можливо
(особливо під WINDOWS ). Бажання отримати антивіруси безкоштовно приводить до відповідних Web-сайтів, наприклад сайтам Avast чи Avista.
Корпоративний__іміджевий_web_сайт_(портал)'>Корпоративний
іміджевий web сайт (портал) – він необхідний фірмам, компаніям, організаціям усіх форм власності для забезпечення іміджевої

10 присутності їх у мережі InterNet ; сайт призначено для надання деталізованої інформації про фірму, організацію, компанію та інше. Зміст сайту пов’язано з професійною діяльністю. Так для сайту ВНЗ це
інформаційне обслуговування абітурієнтів, студентів, викладачів, співробітників, випускників і просто відвідувачів цього сайту. Включає такий портал такі розділи як історія, події, навчання, наука, видання, вихід до бібліотеки та інше. З активних компонентів використовують гостьові книги, форми, спеціалізовані форуми, чати та інше. З графічних засобів широко використовується текст з графічними ілюстраціями, фото галереї, мультимедійні засоби та інше. Звичайно активна робота ведеться з абітурієнтами – надаються презентації кафедр, коментуються дні відкритих дверей, ведеться супроводження приймальної комісії та інше.
Коли корпоративний іміджевий web сайт використовується для компаній надається детальна інформація про неї, історія створення , торгова марка, довідки про послуги та товари, сайт звичайно має стрічку новин, функцію
RSS, публікації про торгові акції, каталоги продукції та багато іншого. При оформленні часто використовуються нестандартні ідеї, обов’язково дається логотип фірми, інформація про товари та послуги надається з широким використанням графіки та анімації. Звичайно ці сайти яскраві та гарно оформлені.
Корпоративний
web-портал. Часто його основна функція є реалізація автоматизації внутрішнього документообігу, визначення показників компанії, аналіз виробництва та продажу, управління персоналом та
іншого. Такий Web-сайт може мати функції обміну інформацією поміж підрозділами, що можуть бути віддаленими. Більшість інформації корпоративного Web-порталу є інформацією для службового використання
і такий сайт повинен мати засоби обмеження доступу до інформації.

11
Корпоративний сайт є сучасним засобом організації роботи фірми. Дизайн такого Web-сайту звичайно досить простий і відповідає фірмового стилю.
В більшості випадків такий сайт має функції CMS і дозволяє певному рангу співробітників вводити та змінювати інформацію своїх розділів.
Інтернет, будучи інструментом ведення бізнесу, суттєво підвищує швидкість і динаміку взаємин бізнес-партнерів при правильному використанні цього інструменту. У міру об'єднання життя реального підприємства з Web, проблема управління контентом Web-сайту буде стояти все більш гостро. В основі будь-якого Web-сайту є його
інфраструктура та інформаційне наповнення, розумне управління якими є першочерговим завданням для досягнення ефективності.
Існують досить коштовні розробки провідних фірм. Прикладом є Adobe
Acrobat Connect - програмне забезпечення для веб-конференцій, яке дозволяє окремим особам і малим підприємствам миттєво спілкуватися і співпрацювати через простий у використанні онлайн-доступ. Adobe
Acrobat Connect є частиною сімейства Adobe.Adobe Acrobat Connect складається з набору модулів так
Adobe Connect Pro Meeting - Засіб організації нарад та семінарів по мережі в реальному часі. Дозволяє користувачам проводити презентації, обмінюватися файлами, потоковим аудіо, відео, а також служить засобом для організації багатокористувацьких відео конференцій. Ви можете зберігати вже створені віртуальні переговорні кімнати і їх вміст для подальшого швидкого доступу до них - така можливість значно скорочує час підготовки до семінарів, переговорів та проведення презентацій.
Сайти
, а точніше програмні Web-системи для дистанційного навчання
Одним з перших був WebCT (), але найбільшу популярність отримав
MOODLE . Ці системи мають три типи користувачів- гість, студент
(учень), викладач. Кожний з них має свої права. Як і всі CMS є реєстрація

12 нових відвідувачів з підтвердженням на особистий E-mail , викладач може використовувати Візівіг для введення своїх лекцій, вставляти різні види тестів, на кожний курс лекцій уставлено форум і багато інших можливостей,
Adobe Connect Pro Training - Засіб, що дозволяє створювати, управляти, проводити і відстежувати курси дистанційного навчання. Дозволяє розробляти навчальні програми, які можуть поєднувати в собі як
індивідуальні навчальні плани на основі курсів, створених за допомогою
Adobe Presenter, так і матеріали сторонніх виробників, і інтерактивне навчання під керівництвом викладача.
Adobe Connect Pro Events - Засіб управління життєвим циклом всіх подій, що відносяться до участі у зустрічах та тренінгах, таких як оцінка учнів, реєстрація на курси, повідомлення та звітність.
InterNet – магазин. Має багато різних назв (Мережевий магазин,
Електронний магазин, Internet shop, E-shop та інше). Це інтерактивні
Web—сайти, що рекламують та продають товари чи послуги. Ці сайти приймають замовлення на покупку, можуть надавати рекомендації при виборі товару (послуги), рекомендують чи визначають методи та засоби оплати, визначають доставку товару . Звичайно ці сайти можуть рекомендувати де знайти товар, а якщо його нема, то надають інформацію, коли він буде. Ці сайти пропонують користувачам варіанти розрахунку, вони видають рахунок на оплату і цей рахунок є підтвердженням замовлення.
Адміністратор чи менеджер магазину звичайно організує:
- доставку товару;
- контролює розрахунки.

13
Згідно з правилами маркетингу в основі магазинів лежить номенклатура товарів, їх якість та ціна і швидкість та культура обслуговування.
Прикладом найбільш успішного у світі Web-сайту магазину є www.amazon.com спершу це був магазин по продажу книжок, а зараз магазин з широким асортиментом товарів.
Гральні
портали – звичайно це досить складні розважальні інтерактивні проекти, якщо ігри цікаві, то такий портал має значну кількість відвідувань. Зараз прості ігри в основному використовуються в мобільних телефонах, а потужні ігрові портали в основному впроваджують колективні ігри з віртуальною реальністю. Ці проекти використовують сучасні досягнення у комп’ютерній графіці, сучасні технічні засоби, вимагають значних обчислювальних ресурсів.
Тематичні
форуми В InterNet досить багато різних тематичних форумів і звичайно зібрання людей за інтересами. У багатьох випадках це зібрання по хобі. Ці сайти звичайно гарно оформлені і мають стабільне відвідування. Багато з цих форумів існують вже більше 10 років і можна прогнозувати їм ще довге життя. Одним з прикладів є Військово історичні форуми ().

Місця
віртуальних зустрічей Часто їх називають соціальні мережі.
З’являються вони досить часто, але найбільш пулярними є міста зустрічей пов’язаних з ностальгією. Популярним на теринах колишнього СРСР є портал “Однокласники” , а у світі Twitter та Fasebooк. При цьому недоліком Twitter є обмеження на довжину повідомлень. До речі, Fasebooк побудовано з використанням блогів, що і вивело ,блоговий CMS WORD
Press на перше місто по популярності.
Пошукові
портали Це найбільш потужні InterNet ресурси. Зараз у світі найбільш популярними є Google, Yahoo, BING і Російські: Яндекс та

14
Рамблер. Недоліком всіх пошукових систем є значна ентропія вхідних даних, якими є вміст Інтернету. Вихід з цього становища має популярний напрямок створення семантичних Web-додатків. Пошукові портали мають ще багато додаткових функцій (індексація та оцінка сайтів по певним параметрам, перевнихірка сайтів, служба електронної пошти, перекладачі, створення поштових скриньок, засоби створення особистих сайтів, функції створення навчальних засобів та інше). Основні недоліки пошукових порталів пов’язано зі значною ентропією і при пошуку отримується значна кількість не потрібної інформації.
Flash -сайти. Технологія флеш (flash) дозволяє створювати дуже красиві,
інтерактивні, зі звуком та анімацією, сайти, які виглядають на порядок ефектніше, ніж звичайні html-сайти. Однак складність і трудомісткість їх виготовлення, а також те, що сторінки, створені на флеш, мають, як правило, велику вагу і довго завантажуються, що відлякує частина користувачів, призводить до того, що флеш-сайти не отримали поки надто широкого розповсюдження.

1.2 Класифікація сайтів по технологіях, що використовуються
Всі сайти в мережі можна розділити на дві великі групи: статичні і
динамічні
сайти. З точки зору відвідувача сайту часто не важливо, на якій сторінці він знаходиться, статичній чи динамічній, іноді навіть важко точно це визначити. Розглянемо цей поділ з точки зору розробника - творця сайту.
Статичний__сайт_._Статична__сторінка'>Статичний
сайт
.
Статична
сторінка - сторінку, яка цілком зберігається на сервері і показується відвідувачу у своєму незмінному вигляді (слід врахувати, що статична сторінка може містити деякі змінні елементи, наприклад банери, проте вона все одно залишається статичної).

15
Припустимо, тепер вона зберігається у файлі "Page.html" Якщо ви відкриєте її за допомогою браузера, то побачите все наповнення сторінки.
Ось приблизно в такому вигляді (як при збереженні на локальний комп'ютер) статичні сторінки зберігаються на сервері, який лише видає їх відвідувачеві.
Статичний
сайт - це сайт більшість або всі сторінки якого є статичними.
Переваги
статичних сайтів
Переваги систем на базі мови HTML:
1. Легко змінити зовнішній вигляд будь-якої конкретної сторінки, не вплинувши на вигляд інших сторінок.
2. Нескладно додати на сайт нову сторінку, скопіювавши і виправивши файл з існуючої сторінки.
3. Людині, що займається підтримкою сайту, достатньо знати лише мову
HTML.
4. Сайт буде працювати на будь-якому сервері хостингу, навіть з дуже обмеженими можливостями.
5. Сайт можна переглядати локально, не використовуючи додаткове програмне забезпечення. Веб-майстру зручно робити сторінки, не виходячи в Інтернет.
6. Мала кількість програмних компонентів дуже утруднює злом такої системи.
Недоліки
статичних сайтів
1. Складно внести зміни в структуру і зовнішній вигляд сайту. Наприклад, якщо треба змінити меню сайту, логотип або структуру сторінок, то для цього необхідно змінити вміст усіх сторінок, оскільки HTML-код цих елементів продубльований на кожній сторінці.
2. Система не гарантує єдиний стиль сторінок сайту - кожна сторінка фактично створюється заново і будь-яка помилка при зміні файлів, що

16 містять сторінки, призводить до того, що різні сторінки сайту виглядають по-різному.
3. Треба розробляти чи знаходити програмні модулі для реалізації активних компонентів ( коментарі та відгуки користувачів, голосування, форум, чат та інше).
4. Досить складно забезпечити розділення прав доступу до вмісту сайту.


Поділіться з Вашими друзьями:
  1   2   3   4   5   6   7   8   9   10


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

войти | регистрация
    Головна сторінка


загрузить материал