Презентація "Етапи створення веб сайтів"

1. Власенко Ю.М.

2. Наявність власного сайту підприємства, організації,
навчального закладу тощо стає актуальним
питанням сьогодення. Розробка сайту складається
з кількох етапів. Ці етапи подібні до етапів
розв’язування задач з використанням комп’ютера.
Власенко Ю.М.

3. ЕТАПИ СТВОРЕННЯ ВЕБ-САЙТІВ
Постановка завдання.
Визначення структури сайта та його окремих
сторінок.
Розробка дизайн-макета сторінок сайта.
Створення та верстка сторінок сайта.
Етап програмування сайта (для розміщення на
сайті інтерактивних елементів).
Розміщення (публікація) сайта в Інтернеті.
Тестування сайта.
Популяризація та підтримка сайта.
Власенко Ю.М.

4. ПОСТАНОВКА ЗАВДАННЯ
На цьому етапі визначається мета створення сайту,
його основна тематика, обирається тип сайту,
здійснюється аналіз існуючих сайтів такої самої
або схожої тематики. У результаті розробник
повинен знати:
• мету, з якою створюється сайт;
• тематику сайту;
• тип сайту: домашня сторінка, форум, Інтернет-
магазин, портал тощо;
• відмінності сайту від інших сайтів такої самої
тематики;
• аудиторію потенційних відвідувачів сайту: вік
відвідувачів, стать, коло інтересів тощо;
• перелік сервісів для розміщення на сайті: форум,
чат, пошукова система, веб-каталог, електронна
пошта та ін.;
• перспективи розвитку сайту. Власенко Ю.М.

5. ВИЗНАЧЕННЯ СТРУКТУРИ САЙТУ
ТА ЙОГО ОКРЕМИХ СТОРІНОК
На цьому етапі важливо скласти перелік розділів
сайту для формування системи навігації, список
сторінок, визначити зв’язки між ними. Кількість
сторінок залежатиме від того інформаційного
наповнення, який планується на ньому розмістити.
Результатом повинна стати мапа (карта) сайту –
діаграма, що візуально відображає ієрархію
сторінок сайту, схему зв’язків та переходів між
ними, тобто внутрішню структуру сайту.
Власенко Ю.М.

6. ВНУТРІШНЯ СТРУКТУРА САЙТУ
Власенко Ю.М.

7. Другим завданням етапу є розробка так званої зовнішньої
структури сайту, яка визначає зовнішній вигляд веб-сторінок.
Оскільки для більшості сторінок сайту рекомендується
застосовувати єдиний стиль оформлення, то потрібно
визначити схему розташування на сторінках основних блоків:
як буде розташований основний матеріал, додаткові
інформаційні та рекламні блоки, анонси, меню, лічильник
відвідувачів тощо.
Схема зовнішньої структури – так звана модульна сітка:
• верхнього блоку – заголовку, у якому містяться логотип і
назва сайту;
• меню для переходу до основних розділів сайту;
• інформаційного блоку з основним матеріалом, що займає
центральну частину сторінки;
• нижнього блоку – підвалу, для розміщення контактних
даних, повідомлення про авторські права тощо.
Власенко Ю.М.

8. Приклад схеми зовнішньої структури
Власенко Ю.М.

9. РОЗРОБКА ДИЗАЙН-МАКЕТУ
СТОРІНОК САЙТУ
Дизайн-макет буде спиратися на попередньо
розроблену зовнішню структуру сторінок
сайту. Дизайн-макет сторінок включає набір
значень властивостей текстових та графічних
об’єктів сторінки: кольорової гами сторінок,
елементів графічного оздоблення, набору
шрифтів та ін., тобто визначає стиль сайту.
Важливо, щоб стиль відповідав призначенню
сайту, особливостям основної аудиторії, на
яку розрахований сайт, був орієнтований на
надання найбільших зручностей для
сприйняття основного матеріалу.
Власенко Ю.М.

10. СТВОРЕННЯ ТА ВЕРСТКА
СТОРІНОК САЙТУ
Створюються сторінки, як правило, мовою розмітки
гіпертексту HTML. У процесі створення відбувається
верстка сторінок. Як ви вже знаєте, верстка – це
процес розміщення на сторінці під час її створення
текстових та графічних елементів таким чином, щоб
сторінка отримала вигляд згідно розробленого
дизайн-макету.
Для розміщення на веб-сторінці варто використовувати
мультимедійні файли форматів, що передбачають
стиснення даних. Для графічних зображень це
можуть бути формати JPEG, GIF, PNG, для аудіокліпів
– MP3, для відео фрагментів – AVI, MP4 та ін.
Якщо на етапі постановки завдання передбачалось
розміщення на сайті інтерактивних елементів, таких
як системи пошуку, голосування, форуму та ін., то
потрібен ще й етап програмування сайту. Власенко Ю.М.

11. РОЗМІЩЕННЯ (ПУБЛІКАЦІЯ)
САЙТУ В ІНТЕРНЕТІ
У ході попередніх етапів створені веб-сторінки могли зберігатися
на локальному комп’ютері розробника. На даному етапі сайт
розміщують на сервері, який надає послуги хостингу. Під час
публікації в Інтернеті сайту надається доменне ім’я. Після
цього сайт стає доступним для перегляду усіма бажаючими,
якщо він або його частина не мають обмежень на доступ.
Організації, що надають послуги хостингу, називають хостинг-
провайдерами. Існують сервери, які надають безкоштовний
хостинг. При цьому, як правило, на вашому сайті буде
розміщуватись стороння реклама та обмежуватись
використання деяких інтерактивних засобів. Можна
розмістити сайт на сервері платного хостингу без реклами та
з усіма потрібними програмними засобами.
Після публікації сайту в Інтернеті розробка сайту не вважається
завершеною. Певний час буде тривати тестування
сайту для виявлення недоліків верстки.
Власенко Ю.М.

12. ПОПУЛЯРИЗАЦІЯ ТА ПІДТРИМКА
САЙТУ
Для того, щоб сайт почали відвідувати
користувачі Інтернету, бажано зареєстру-
вати його у пошукових системах та
каталогах, розмістити посилання на нього
на інших сайтах. Цей процес називають
популяризацією, розкручуванням або
просуванням сайту.
Для підтримки інтересу до вашого сайту
важливо регулярно оновлювати його,
доповнювати цікавими унікальними
матеріалами. Можливо з часом стане
бажаною зміна дизайну сайту – редизайн.
При виконанні таких робіт кажуть про
супровід сайту.
Власенко Ю.М.

13. ПРАВИЛА ОФОРМЛЕННЯ ВЕБ-СТОРІНОК
• Оберіть кольорову гаму для вашого сайту, враховуючи ваші вподобання,
тематику сайту та вподобання потенційних відвідувачів. Використайте для
оформлення не більше 2-3 кольорів.
• При визначенні кольорової гами сторінки вибирайте контрастні кольори для
тексту та фону, щоб текст легше читався.
• Розбивайте текст на абзаци, між якими зробіть збільшені відступи.
• Виберіть розмір шрифту, при якому текст буде сприйматися комфортно – не
занадто дрібний та в міру крупний. Шрифт на заголовках зробіть крупнішим
від шрифту основного тексту. Вид шрифту зробіть однаковим на всіх
сторінках.
• Вирівняйте заголовки по центру, а основний текст – по ширині.
• Для структурування тексту використовуйте таблиці. Розміщуючи фрагменти
тексту та графічні зображення у таблицях, можна створити цікаві
композиційні рішення на веб-сторінках.
• Не зловживайте флеш-анімацією, відео, музичними та графічними
елементами. Вони можуть відволікати увагу від корисних матеріалів та
уповільнювати завантаження сторінок.
• Зробіть гіперпосилання для переходу між сторінками сайту, але не
розміщуйте на сторінках занадто багато гіперпосилань. Виділяйте
гіперпосилання кольором, щоб користувач бачив, що це посилання і які з них
він вже відвідував.
• Зробіть логотип сайту, зображення або текст у заголовку гіперпосиланням на
головну сторінку сайту.
• Створіть для відвідувачів мапу сайту для спрощення переходу на сторінки з
потрібними матеріалами.
Власенко Ю.М.

14. Власенко Ю.М.