АНОТАЦІЯ
Барняк О. В. Розробка інформаційно-наукового web-ресурсу з тематики: Розробка web-ресурсу для підприємства, з метою реклами та організації його роботи, засобами НТМL i CSS. – Курсова робота за спеціальністю Комп’ютерні технології. – Тернопільський національний педагогічний університет імені Володимира Гнатюка. – Тернопіль, 2015.- 34
В курсовій роботі розглянуто теоретичні основи web технологій, визначено особливості програмування на мові HTML та технології роботи css. Проаналізовано, відомості про специфіку роботи ПП Квітковий дворик. Розроблено макет web-ресурсу, написано стилі для кожного блоку сайту.
Ключові слова:
HTML, CSS, Java Script, web-рторінка, web-ресурс, гідропоніка.
ВСТУП
На сучасному рівні розвитку інформаційних технологій використання комп’ютера для пошуку, обробки та збереження будь-яких видів інформації стає основним засобом навчання, комерційної, наукової та розважальної діяльності. Важливу роль у процесі отримання доступу до цифрової інформації відіграє мережа Internet. Яка на сьогодні є найбільш розвинена у світі комплексна інформаційна система, за допомогою якої здійснюється комунікація між мільйонами користувачів. Сьогодні в Україні послугами Інтернет з різною періодичністю користуються близько 9 млн. жителів України до більш як п'яти мільйонів інформаційних Web-сайтів.
З самого початку розвитку Internet, а особливо з появою Web-технологій, мережа орієнтована на забезпечення користувачів доступу як до розважальної так і комерційної представленої у вигляді Web-документів. Тому практичне вміння створення та структурування інформації яка може бути представлена у глобальній павутині найближчим часом буде розглядатись як базове, не лише у вищій, але і середній школі.
Об’єкт дослідження: процес розробки web-ресурсу для приватного підприємства «Квітковий дворик».
Предмет дослідження: закономірності викладення матеріалу та його представлення інформації засобами HTML і CSS.
Мета роботи: розробка web-ресурсу для реклами підприємства і покращення продажу вирощеної продукції засобами HTML та CSS.
Відповідно до поставленої мети у роботі розв’язано наступні завдання:
Проаналізувати роботу підприємства «Квітковий дворик», здійснити візуальне представлення та структурування його у вигляді web -документа.
На основі проведеного аналізу розробити дизайн, інформаційне та стилістичне наповнення web-ресурсу, засобами HTML та CSS .
Практичне значення одержаних результатів:
Розроблений інформаційно-науковий web-ресурс може бути використаний з метою просування власної справи на економічному ринку.
РОЗДІЛ І
ТЕОРЕТИЧНІ ОСНОВИ WEB-ТЕХНОЛОГІЙ
Програмні рішення для створення web-сайту
HTML (англ. HyperText Markup Language — Мова розмітки гіпертексту) стандартна мова розмітки документів у Всесвітній павутині. Більшість web-сторінок створюються за допомогою мови HTML (або XHTML). Документ HTML оброблюється браузером та відтворюється на екрані у звичному для людини вигляді [7].
HTML є похідною мовою від SGML, успадкувавши від неї визначення типу документу та ідеологію структурної розмітки тексту.
HTML разом із каскадними таблицями стилів та вбудованими скриптами - це три основні технології побудови веб-сторінок.
HTML впроваджує засоби для:
створення структурованого документу шляхом позначення структурного складу тексту: заголовки, абзаци, списки, таблиці, цитати та інше;
отримання інформації із Всесвітньої мережі через гіперпосилання;
створення інтерактивних форм;
включення зображень, звуку, відео, та інших об'єктів до тексту.
Елементи HTML можна поділити на три основні категорії:
Заголовні елементи, тобто елементи, що використано в елементі HEAD ("шапка", заголовок) і містять інформацію про документ у цілому: TITLE, ISINDEX, BASE, META, LINK, SCRIPT, STYLE
Блокові елементи, що включають елементи, які визначають структуру документа, наприклад, поділ на частини й параграфи (абзаци): H1, H2, H3, H4, H5, H6, ADDRESS, і елементи P, UL, OL, DL, PRE, DIV, CENTER, BLOCKQUOTE, FORM, ISINDEX, HR, TABLE.
Текстові елементи. Текстовими елементами можуть бути:
простий текст, що можливо містить escape послідовності;
вирази розмітки: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE;
розмітка шрифту: TT, I, B, U, STRIKE, BIG, SMALL, SUB, SUP;
спеціальні елементи: A, IMG, APPLET, FONT, BASEFONT, BR, SCRIPT, MAP;
елементи форми: INPUT, SELECT, TEXTAREA [3].
Каскадні таблиці стилів (англ. Cascading Style Sheets або скорочено CSS) — спеціальна мова, що використовується для відображення сторінок, написаних мовами розмітки даних.
CSS використовується авторами та відвідувачами веб-сторінок для того, щоб визначити кольори, шрифти, верстку та інші аспекти вигляду сторінки.
Існує три види таблиць стилів: внутрішні таблиці стилів, глобальні таблиці стилів і пов'язані таблиці стилів. Внутрішні таблиці стилів (Inline Style Sheets) містяться в HTML тегу. Глобальні (Global Style Sheets) визначають стиль елементів у всьому документі. Пов'язані (Linked Style Sheets) можуть бути використані для декількох документів відразу й зберігаються в зовнішньому файлі, що дозволяє уніфікувати подання даних на декількох пов'язаних сторінках.
CSS (каскадна або блочна верстка) прийшла на заміну табличній верстці веб-сторінок. Головна перевага блочної верстки — розділення змісту сторінки (даних) та їх візуальної презентації. CSS використовується авторами та відвідувачами веб-сторінок для того, щоб визначити кольори, шрифти, верстку та інші аспекти вигляду сторінки.
Стандарт CSS визначає порядок та діапазон застосування стилів, те, в якій послідовності і для яких елементів застосовуються стилі. Таким чином, використовується принцип каскадності, коли для елементів вказується лише та інформація про стилі, що змінилася або не визначена загальнішими стилями.
CSS має різні рівні та профілі. Наступний рівень CSS створюється на основі попередніх, додаючи нову функціональність або розширюючи вже існуючі функції. Рівні позначаються як CSS1, CSS2 та CSS3.
Профілі — сукупність правил CSS одного або більше рівнів створені для окремих типів пристроїв або інтерфейсів. Наприклад, існують профілі CSS для принтерів, мобільних пристроїв тощо.
CSS (каскадна або блочна верстка) прийшла на заміну табличній верстці веб-сторінок. Головна перевага блочної верстки — розділення змісту сторінки (даних) та їх візуальної презентації.
Пов'язані таблиці стилів, використовуються для додання кільком документам одного стилю. Вони зберігаються в окремому файлі [7].
Зв'язок HTML-документа з файлом CSS здійснюється за допомогою елемента :
[6]
JavaScript — динамічна, об'єктно-орієнтованa мова програмування. Найчастіше використовується як частина браузера, що надає можливість коду на стороні клієнта взаємодіяти з користувачем, керувати браузером, асинхронно обмінюватися даними з сервером, змінювати структуру та зовнішній вигляд веб-сторінки [3].
JavaScript має C-подібний синтаксис, але в порівнянні з мовою Сі має такі корінні відмінності:
об’єкти, з можливістю інтроспекції і динамічної зміни типу через механізм прототипів;
функції як об’єкти першого класу;
обробка винятків;
автоматичне приведення типів;
автоматичне прибирання сміття;
анонімні функції.
JavaScript містить декілька вбудованих об'єктів: Global, Object, Error, Function, Array, String, Boolean, Number, Math, Date, RegExp. Крім того, JavaScript містить набір вбудованих операцій, які, строго кажучи, не обов'язково є функціями або методами, а також набір вбудованих операторів, що управляють логікою виконання програм. Синтаксис JavaScript в основному відповідає синтаксису мови Java (тобто, зрештою, успадкований від C), але спрощений порівняно з ним, щоб зробити мову сценаріїв легкою для вивчення [6].
Основні етапи процесу підготовки та створення web-ресурсу
Розробка сайту так само як і будівництво будинку, мають послідовно виконані визначені етапи: від проектної документації і закладки фундаменту до внутрішньої і зовнішньої обробки приміщення.
Розміщення власних матеріалів в Інтернеті включає два етапи: підготовку матеріалів і їхню публікацію. Підготовка матеріалів полягає у створенні документів, що мають формат, прийнятий в Інтернеті, які називають, Web-сторінками [3]. Тексти, написані мовою HTML і ще називають кодом HTML. Публікація матеріалів, тобто відкриття до них доступу в Інтернеті, виконується дистриб’ютором після одержання дискового простору на Web-сервері.
Етапи розробки проекту, як правило, виконуються послідовно, тому, вкрай важливо дотримуватися черговості етапів і розуміти, що будь-які несподівані і неузгоджені заздалегідь зміни чи правки можуть значно вплинути на ефективність роботи.
Роботу над кожним проектом слід проводити в строгій відповідності з приведеними нижче етапами робіт з розробки сайту.
1. Передпроектна підготовка. Ідея
Визначення тематики майбутнього сайту, з’ясування цілей і завдань, визначення і аналіз цільової аудиторії. Аналіз конкурентів. Розробка структури сайту – ескіз сайту на папері. Створення списку майбутніх тематичних розділів.
2. Розробка дизайну сторінок[7].
Дизайн-концепція сайту (креативний дизайн)- Креативна ідея, розробка основної графічної концепції дизайну сайту на прикладі головної та другорядних сторінок. Вибір колірної гамми, художнього стилю. Підготовка макету дизайну.
Технічний дизайн, розробка логічної і фізичної структури ресурсу. Компонування сторінки, верстальної структури. Елементи навігації
3. Верстка
Створення шаблонів сторінок. Перевірка правильності написання коду. Верстка сторінок сайту на основі затвердженого дизайну типових сторінок. Збірка сторінок.
4. Інформаційне наповнення сайту
Підготовка текстових матеріалів. Підготовка графічних матеріалів у растровому форматі, оптимізація картинок. Заповнення сторінок.
5. Програмна частина проекту
Інтеграція сайту з системою управління [6].
Зараз вже жоден сучасний сайт не обходиться без системи управління, оскільки важливою є не лише красива зовнішня оболонка цього сайту, але і можливість зручної роботи з ним. Це особливо актуально для сайтів з розгалуженою структурою і великим об'ємом даних. В цей етап входить: інтеграція з системою управління, програмування, налаштування сервера, забезпечення безпеки проекту. Контроль якості.
Програмування, запуск проекту. На цьому етапі допрацьовується функціонал, що не міститься у стандартному складі системи управління.
6. Тестування сайту в Інтернеті
Тестування сайту на наявність помилок та коректність функціонування в різних браузерах (Internet Explorer, Netscape, Opera, Safari). Перевірка ідентичності відображення сторінок в різних екранних роздільних здатністях в різних браузерах.
7. Розміщення сайту в Інтернеті
Організація робіт з розміщення проекту в мережі Інтернет. Вибір та реєстрація доменного імені. Вибір хостинг провайдера, розміщення сайту. Фінальне тестування сайту. Навчання персоналу клієнта як працювати з системою управління сайту.
8. Просування сайту
В даний час вже мало просто розробити якісний сайт із зручною структурою і навігацією, важливим є забезпечення для сайту високої відвідуваності. Спромогтися цього можна не лише розміщенням реклами в засобах масової інформації, але і здійснюючи просування сайту в пошукових системах і каталогах, а також рекламою в Інтернеті.
9. Подальша підтримка сайту
Перші шість етапів відносяться безпосередньо до створення сайту, решта потрібні для подальшого існування сайту.
Перш, ніж розпочати роботу над сайтом, потрібно чітко уявляти, що в результаті має бути, а також перспективи розвитку сайту[10].
Отже, потрібно вирішити:
• Навіщо створювати сайт (чи потрібно це взагалі).
• Тематика сайту.
• Тип сайту (домашня сторінка, портал тощо).
• Відмінність від сайтів з такою ж тематикою (якщо це не домашня сторінка).
• Яка буде аудиторія сайту (стать, вік, інтереси).
• Якого роду сервіси будуть присутні на сайті (форум, каталог, пошта).
• Перспективи подальшого розвитку.
Основні поради для створення web-ресурсу:
Перед тим, як створювати сайт спочатку подумайте про кількість людей, що цікавляться даною темою, про кількість сайтів-конкурентів. Чим більше сайтів з подібною темою висвічується в пошукових системах, тим менше відвідувачів буде на Вашому сайті, тим складніше буде залучати відвідувачів. Наберіть в будь-якій пошуковій системі назву майбутньої теми сайту з 2-3 головних слів і подивіться, скільки знайдено сайтів за цією темою. Кількість сайтів з певних тем сягає мільйонів і всі хочуть, щоб їх сайт був на перших позиціях. Подумайте, чи зможете ви забезпечити високу відвідуваність.
Ніколи не робіть сайт про те, в чому не розбираєтеся. Найбільшою помилкою багатьох новачків спроби робити сайти про те, як заробляти в Інтернеті або щось подібне. Вони, не розуміючи в цьому абсолютно нічого, починають вчити інших, як треба заробляти в Інтернеті. Пошуковики не дуже люблять сайти про заробіток, і за цією темою завжди віддають пріоритет лише тим сайтам, які створені давно і мають певний авторитет.
Добре подумайте про інформацію, яка буде розміщена на сайті. Зробіть те, в чому Ви добре розбираєтеся, що буде корисне і цікаво іншим, нехай навіть це буде якась зовсім вузька і малопопулярна тема. Чим менше за цією темою буде сайтів в пошуковиках, тим більше буде відвідувачів і тим більше сайт в майбутньому приноситиме дохід.
Ніколи не копіюйте і не розміщуйте на своєму сайті інформацію з інших сайтів без згоди їх авторів, щоб в подальшому уникнути неприємностей. В Інтернеті це теж називається «крадіжкою». Власник сайту, з якого взяли інформацію без згоди, може написати в пошукові системи, хостинг-провайдеру, де розташовано Ваш сайт та в інші інстанції. Такий сайт пошуковики можуть вилучити з свого пошуку назавжди. А якщо сайт буде видалено з пошукових систем, він буде нікому не потрібний, окрім Вас, його ніхто ніколи не знайде, він буде недоступним для інших користувачів. Хостинг-провайдер, на хостингу якого буде розташовано такий сайт, теж може його видалити.
В подальшому, для сайту необхідна щоденна підтримка сайту в актуальному стані. Треба постійно стежити за своєчасним оновленням ресурсу і вилученням з сайту сторонньої, недостовірної або застарілої інформації.
Лише після визначення чіткого образу сайту, можна приступати до інших етапів. Певні етапи розробки сайту можуть проводитися паралельно, особливо, якщо над створенням сайту працює не одна людина, а команда в кілька чоловік [7].
РОЗДІЛ ІІ
РОЗДІЛ ІІІ
ВИСНОВКИ
У результаті виконання курсової роботи вирішено актуальне практичне завдання, яке полягало у створенні web-ресурсу для уявного приватного підприємства «Квітковий дворик».
Під час розробки сайту, було розроблено макет, на основі якого, в середовищі Adobe Photoshop CS5 створено дизайн і розкроєно на елементи. Потім, за допомогою HTML коду і таблиць каскадних стилів у середовищі Notepad++ втілено створений дизайн.
Проведені дослідження дають змогу зробити такі висновки:
Розглянуто і освоєно інформацію про роботу приватного підприємства, а також закладено основу знань про маркетингову політику даного підприємства.
. На основі проведеного аналізу розроблено дизайн, інформаційне та стилістичне наповнення web-ресурсу засобами HTML, та CSS. Для того, щоб розрекламувати підприємство, було створено web-ресурс, основними кольорами якого були білий, зелений, і оранжевий. При розробці веб-документу було використано таблиці каскадних стилів та Java скрипти.
ПЕРЕЛІК ВИКОРИСТАНИХ ДЖЕРЕЛ
Гаевский А.Ю. 100% самоучитель. Создание Web-страниц и Web -сайтов. HTML и JavaScript / А.Ю. Гаевский, В.А. Романовский // М.: Триумф , 2008. – 360 с.
Геттинс Доминик. Секреты создания рекламних материалов/ Доминик Геттинс// Санкт-Петербург.: Астрель, 2007.-96с.
Коэн Лазаро Исси. Полный справочник по HTML, CSS и JavaScript/ Лазаро Исси Коэн, Джозеф Исси Коэн // М.: ЭКОМ Паблишерз, 2007. – 510 с.
Пфаффенбергер Брайан. HTML, XHTML и CSS. Библия пользователя [издание 3-е]/ Брайан Пфаффенбергер, Стивен Шафер, Чад Уайт, Билл Кароу // М.: Вильямс, 2007. – 271с.
Довідник HTML [Електронний ресурс]. — Режим доступу : http://htmlbook.ru/
Довідник веб-програмування [Електронний ресурс]. — Режим доступу: http://www.w3schools.com/