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

Бердянський державний педагогічний університет

Факультет комп'ютерних та енергозберігаючих технологій

Кафедра фундаментальних та інженерно-педагогічних дисциплін і інформатики

КУРСОВА РОБОТА

з дисципліни "Прикладне та Web-програмування"

на тему: Проектування та розробка віджету розкладу занять для ОС Android. Створення веб-сайту. "Комплексна тема"

Студента 3 курсу 301-б групи

напряму підготовки: 7.010104 Професійна

освіта (Комп'ютерні технології)

спеціальності: Комп'ютерні системи та мережі

Пушнєя О.А.

м. Бердянськ - 2015 рік

Зміст

• Вступ
• Розділ 1. Теоретична частина
• 1.1 Загальні теоретичні відомості
• 1.2 Визначення використаних засобів для створення веб-сайту
• 1.2.1 HTML
• 1.2.3 JavaScript
• Висновки до першого розділу
• Розділ 2. Створення веб-сайту
• 2.1 Визначення вимог до сайту
• 2.1.1 Технічні вимоги
• 2.1.2 Вимоги до зовнішнього вигляду сайту
• 2.1.3 Вимоги до функцій сайту
• 2.2 Розробка макета сайту
• 2.3 Верстка сайту
• 2.3.1 Вибір текстового редактору
• 2.3.2 Розмітка HTML
• 2.3.3 Оформлення сторінки за допомогою CSS
• 2.3.4 Створення функціоналу сайту
• Висновки до другого розділу
• Висновки
• Список використаних джерел
• Додатки

перелік умовних позначень

HTML	Hyper Text Markup Language - мова гіпертекстової розмітки
CSS	Cascading Style Sheets - каскадні таблиці стилів
JS	JavaScript

Вступ

Актуальність. У наш час розробка сайтів стала звичайною справою.

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

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

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

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

Відповідно до поставленої мети було визначено такі основні завдання курсового проекту:

Проаналізувати літературу, яка сприяє реалізації поставленої мети.

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

Розробити сайт для віджету.

Об'єктом курсового проекту є процес створення сайту для розробленого віджета розкладу.

Предмет курсового проекту: сайт для віджета розкладу.

Розділ 1. Теоретична частина

1.1 Загальні теоретичні відомості

Сайт - система електронних документів (файлів даних і коду) приватної особи або організації в комп'ютерній мережі під загальною адресою (доменним ім'ям або IP-адресою).

Перший у світі сайт info. cern. ch з'явився в 1991 році. Його творець, Тім Бернерс-Лі, опублікував на ньому опис нової технології World Wide Web, заснованої на протоколі передачі даних HTTP, системі адресації URI і мові гіпертекстової розмітки HTML. Також на сайті були описані принципи установки і роботи серверів і браузерів. Сайт став і першим в світі інтернет-каталогом, оскільки пізніше Тім Бернерс-Лі розмістив на ньому список посилань на інші сайти.

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

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

Мова HTML дозволяє форматувати текст, розрізняти в ньому функціональні елементи, створювати гіпертекстові посилання (гіперпосилання) та вставляти в сторінку зображення, звукозаписи і інші мультимедійні елементи. Відображення сторінки можна змінити додаванням стилів на мові CSS, що дозволяє централізувати в певному файлі всі елементи форматування (розмір і колір заголовних букв 2-го рівня, розмір і вид блоку вставки та інше) або сценаріїв на мові JavaScript, за допомогою якого є можливість переглядати сторінки з подіями або діями.

макет сайт інтернет віджет

Сторінки сайтів можуть бути простим статичним набором файлів або створюватися спеціальною комп'ютерною програмою на сервері. Вона може бути або зроблена на замовлення для окремого сайту, або бути готовим продуктом, розрахованим на певний клас сайтів. Деякі з них можуть забезпечити власнику сайту можливість гнучкої настройки структуризації і виведення інформації на веб-сайті. Такі керуючі програми називаються системами управління вмістом (CMS).

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

1.2 Визначення використаних засобів для створення веб-сайту

1.2.1 HTML

HTML - стандартна мова розмітки веб-сторінок в Інтернеті. Більшість веб-сторінок створюються за допомогою мови HTML.

Більшість веб-сторінок створюються за допомогою мови HTML (або XHTML). Документ HTML оброблюється браузером та відтворюється на екрані у звичному для людини вигляді.

HTML є похідною мовою від SGML, успадкувавши від неї визначення типу документу та ідеологію структурної розмітки тексту.

HTML разом із каскадними таблицями стилів та вбудованими скриптами - це три основні технології побудови веб-сторінок.html впроваджує засоби для: https: // uk. wikipedia.org/wiki/HTML - cite_note-w3-1

· створення структурованого документу шляхом позначення структурного складу тексту: заголовки, абзаци, списки, таблиці, цитати та інше;

· отримання інформації із Всесвітньої мережі через гіперпосилання;

· створення інтерактивних форм;

· включення зображень, звуку, відео, та інших об'єктів до тексту.

1.2.2 Каскадні таблиці стилів

Каскадні таблиці стилів (або скорочено CSS) - спеціальна мова, що використовується для опису сторінок, написаних мовами розмітки даних. CSS використовується, щоб визначити кольори, шрифти, верстку та інші аспекти вигляду сторінки. Одна з головних переваг - можливість розділити зміст сторінки (або контент, наповнення, зазвичай HTML, XML або подібна мова розмітки) від вигляду документу (що описується в CSS).

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

Один і той самий HTML або XML документ може бути відображений по-різному залежно від використаного CSS.

Переваги:

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

· різна інформація про стилі для різних типів користувачів: наприклад великий розмір шрифту для користувачів з послабленим зором, стилі для виводу сторінки на принтер, стиль для мобільних пристроїв;

· сторінки зменшуються в об'ємі та стають більш структурованими, оскільки інформація про стилі відділена від тексту та має певні правила застосування і сторінка побудована з урахуванням їх;

· прискорення завантаження сторінок і зменшення обсягів інформації, що передається, навантаження на сервер та канал передачі. Досягається за рахунок того, що сучасні браузери здатні кешувати (запам'ятовувати) інформацію про стилі і використовувати для всіх сторінок, а не завантажувати для кожної.

1.2.3 JavaScript

JavaScript (JS) - динамічна, об'єктно-орієнтованa мова програмування. Реалізація стандарту ECMAScript. Найчастіше використовується як частина браузера, що надає можливість коду на стороні клієнта (такому, що виконується на пристрої кінцевого користувача) взаємодіяти з користувачем, керувати браузером, асинхронно обмінюватися даними з сервером, змінювати структуру та зовнішній вигляд веб-сторінки. Мова JavaScript також використовується для програмування на стороні серверу.

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

JavaScript має низку властивостей об'єктно-орієнтованої мови, але завдяки концепції прототипів підтримка об'єктів в ній відрізняється від традиційних мов ООП. Крім того, JavaScript має ряд властивостей, притаманних функціональним мовам.

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

Висновки до першого розділу

В першому розділі ми:

1. Ознайомилися з загальними теоретичними відомостями.

2. Визначили засоби, які будуть використовуватися для створення веб-сторінки.

Розділ 2. Створення веб-сайту

2.1 Визначення вимог до сайту

2.1.1 Технічні вимоги

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

2.1.2 Вимоги до зовнішнього вигляду сайту

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

Адаптивний веб-дизайн - дизайн веб-сторінок, що забезпечує відображення сайту на різних пристроях, підключених до інтернету.

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

2.1.3 Вимоги до функцій сайту

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

2.2 Розробка макета сайту

Перед версткою веб-сторінки бажано розробити її макет.

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

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

Також перед створенням макету сайту нам необхідно визначити з яких основних частин повинен складатися сторінка. Основними частинами є:

· Хедер;

· футер;

· меню;

· блок контенту.

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

Футер - це блок в нижній частині сторінки, куди виносять корисну, але не першочергову інформацію. Як приклади можна навести:

· Дані про копірайт - (с) Ім'я компанії;

· карта сайту;

· дублювання основних пунктів навігації - Головна, Про нас, Контакти;

· облік основних тегів сайту;

· назва команд або компаній, які розробляли сайт, з посиланням на їхні контактні дані або їх сторінку в інтернеті.

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

Блок контенту - блок, у якому розміщується основна інформація, яка цікавить користувача.

Рис. 2.1 Схема розміщення елементів сторінки

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

Після створення схеми розміщення елементів та вибором кольорового оформлення сторінки можна приступати до розробки макету сторінки. Макет було створено за допомогою графічного редактора Adobe Photoshop.

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

Процес створення макету в Adobe Photoshop полягає у розробці такого дизайну сайту, який і буде відображуватись у браузері користувача. Створення макету відбувається поступово - від хедера до футера.

Перш ніж почати розробку дизайну елементів сторінки потрібно визначитись з розмірами макету. Ширина макету буде складати 1200 пікселів, а висота 2400 пікселів. При цьому контент буде центруватися по середині сторінки, а його ширина - 960 пікселів.

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

Рис. 2.2 Хедер сторінки

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

Рис. 2.3 Слайдер сторінки

Далі йде найскладніша частина проектування макету - створення основної частини головної сторінки, на якій буде відображена інструкція по використанню та налаштуванню віджету (див. рис. 2.4).

Фінальним етапом при створенні сторінки є створення футеру, який містить меню навігації по сайту (див. рис. 2.5).

Рис. 2.4 Слайдер сторінки

Рис. 2.5 Футер сторінки

Після виконання усіх цих дій ми маємо готовий макет головної сторінки сайту, який буде використовуватись при верстці:

Рис. 2.6 Макет головної сторінки

2.3 Верстка сайту

2.3.1 Вибір текстового редактору

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

· Sublime Text

· Brackets

· Atom

Для верстки нашого сайту був обраний текстовий редактор Brackets. Brackets - текстовий редактор компанії Adobe. Brackets безкоштовний, поширюється на всі платформи і має продуманий і лаконічний зовнішній вигляд. Даний редактор має дуже зручну функцію Live Preview, яка забезпечує інтерактивний перегляд сторінки в живому режимі. Тобто відразу, під час верстки сайтів.

Рис. 2.7 Робоче вікно Brackets

Після обрання текстового редактору можна приступати до верстки сайту.

Верстка будь-якого сайту складається з декількох етапів:

1. Розмітка HTML.

2. До HTML додається ще й CSS.

3. Оживлення функціоналу сторінки за допомогою JavaScript.

2.3.2 Розмітка HTML

На першому етапі початковий зміст сторінки розмічається за допомогою HTML. Для розмітки документа використовуються теги. При розмітці нашої сторінки використовувались такі теги:

· <html></ html> - вказує програмі перегляду сторінок що це HTML документ.

· <head></head> - визначає місце, де поміщається різна інформація не відображається в тілі документа. Тут розташовується тег назви документа та теги для пошукових машин.

· <body></body> - визначає видиму частину документа.

· <div></div> - є блоковим елементом і призначений для виділення фрагмента документа з метою зміни виду вмісту.

· <ul></ul> - створює ненумерований список.

· <li></li > - елемент списку.

· <img src="name"> - додає зображення в HTML документ.

· <a href="URL"></a> - додає гіперпосилання на інший документ або на частину поточного документу.

· <p> - визначає текстовий абзац.

· <span></span > - призначений для визначення рядкових елементів документа. За допомогою тега <span> можна виділити частину інформації всередині інших тегів і встановити для неї свій стиль.

· <script></script > - призначений для опису скриптів, може містити посилання на програму або її текст певною мовою.

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

2.3.3 Оформлення сторінки за допомогою CSS

Після розмітки сторінки настає другий етап верстки - зовнішнє оформлення сторінки за допомогою CSS.

Існує кілька способів впровадження CSS в HTML-документ:

1. Застосувати стильовий опис в самому елементі - це схоже на написання атрибутів, які ми використовували в HTML. Використовувати даний спосіб необхідно лише в тому випадку, коли необхідно прописати індивідуальний стиль для будь-якого елемента на даній HTML сторінці.

2. Глобальні стилі. При використанні глобальних стилів властивості CSS описуються в самому документі і розташовуються в заголовку веб-сторінки.

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

Коли стилі винесені в окремий файл, то виникає потреба їх підключення до HTML-документу. За підключення файлу стилів відповідає рядок <link href="css/style. css" rel="stylesheet">, який прописано всередині тегу <head> нашої сторінки.

Стилі являють собою набір параметрів, керуючих видом і положенням елементів веб-сторінки. Будь-який css-файл складається таких частин:

· Селектор - визначає елемент HTML, до якого застосовується форматування.

· Властивість - показує параметр цього елемента HTML.

· Значення - показує які зміни має зазнати даний параметр.

Рис. 2.8 Опис кнопок "Завантажити" та "Відправити"

При створенні сторінки використовувались такі основні CSS-властивості:

· margin - встановлює величину відступу від кожного краю елемента;

· padding - встановлює значення полів навколо вмісту елементу.

· border - дозволяє одночасно встановити товщину, стиль і колір межі навколо елемента;

· background - встановлення фону сайту;

· font-family - встановлює сімейство шрифту, яке буде використовуватися для оформлення тексту вмісту;

· font-size - визначає розмір шрифту елемента;

· float - визначає, по якій стороні буде вирівнюватися елемент, при цьому інші елементи будуть обтікати його з інших сторін;

· width - встановлює ширину блокових або замінних елементів;

· height - встановлює висоту блокових або замінних елементів;

· сolor - встановлює колір тексту елемента;

Також, для створення адаптивного сайту при написанні стилів були використані медіа-запити. Медіа-запити обмежують ширину макету і при досягненні цього значення (наприклад за рахунок зменшення вікна або при перегляді на пристрої з вказаним розміром) вже застосовується інший стиль. Всі запити починаються з правил @media, після чого пишеться умова, в якій використовуються типи носіїв, логічні оператори та медіа-функції. Для прикладу можна розглянути один з медіа-запитів, що використовувався для створення адаптивності нашого сайту (Рис. 2.9).

Рис. 2.9 Медіа-запит

З прикладу ясно, що код буде застосовуватися, якщо видима область для сайту (viewport) кінцевого користувача менше або дорівнює 480 пікселям по ширині. Усередині такого запиту може бути скільки завгодно елементів, до яких застосовується скільки завгодно властивостей і всі вони будуть задіяні тільки коли виконується умова медіа запиту.

Слід сказати, що для коректного відображення сайту був використаний мета-тег viewport. Для цього в HTML-файлі прописується такий рядок:

<meta name="viewport" content="width=device-width, initial-scale=1">

Задавши мета-тег viewport значення "device-width", ми говоримо браузеру, що ширина області перегляду дорівнює ширині цього пристрою, а не стандартній ширини у 980px, як він може припускати за замовчуванням. Значення "initial-scale=1" задає початковий масштаб сторінки.

На цьому етап описання стилів для сторінки завершено. Зміст CSS-файлу містить ДОДАТОК Б.

2.3.4 Створення функціоналу сайту

Завершальним етапом при створенні сторінки є її оживлення за допомогою JavaScript та її бібліотеки jQuery.

jQuery - бібліотека JavaScript, що фокусується на взаємодії JavaScript і HTML. Бібліотека jQuery допомагає легко отримувати доступ до будь-якого елементу DOM, звертатися до атрибутів і вмісту елементів DOM, маніпулювати ними.

Скрипти підключаються так само, як і стилі: їх або пишуть всередині сторінки, або підключають як зовнішні файли. Зовнішні файли. js підключаються у HTML-файлі за допомогою тега <script>. Тег <script> можна використовувати в будь-якому місці HTML-документа, але краще вставляти його в самому кінці перед закриваючим тегом </ body>.

Наприклад, для підключення бібліотеку jQuery у HTML-файл було написано такий рядок: <script src="js/jquery. js"></script>

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

Суть роботи слайдеру полягає в тому, що при натисканні на кнопку зміни слайда повинно змінюватися зображення слайдера і текст до слайду. Це було реалізовано за допомогою бібліотеки jQuery. Для цього був використаний метод click, що вказує на натискання кнопки зміни слайдів. Зміна слайдів була реалізована за допомогою методів fadeOut (time) та fadeIn (time), де значення time - це час тривалості анімації зміни слайду. Для автоматичної зміни слайду був використаний метод setInterval (function () {}, 5000). Суть методу полягає в тому, що function () {} буде виконуватись через кожні п'ять секунд.

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

Реалізація плавного скролінгу сторінки виконувалась в декілька етапів. Спочатку за допомогою метода preventDefault () була відмінена стандартна обробка натискання по посиланню. Потім була створена змінна, у яку за допомогою методу attr було внесено значення атрибута href. Після цього у нову змінну за допомогою атрибутів offset та top було внесено відстань від початку сторінки до блоку, на який посилається якір блоку. Після цього за допомогою методу animate здійснюється анімація, що імітує плавний скролінг сторінки.

На цьому розробка функціоналу сайту завершується. Повний зміст скриптів містить ДОДАТОК В.

Висновки до другого розділу

1. Визначили вимоги до сайту.

2. Розробили макет сайту за допомогою графічного редактору Adobe Photoshop.

3. Зверстали сайт, використовуючи HTML, CSS та JS.

Висновки

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

Підчас виконання курсового проекту ми:

Проаналізували літературу, за допомогою якої була досягнута поставлена мета.

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

Розробили сайт для віджету.

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

Список використаних джерел

1. Макфарланд Д. Большая книга CSS. - "Питер", 2011. - 560с.

2. Флэнаган Д. JavaScript. Подробное руководство.5 е издание. - СПб: Символ-Плюс, 2008. - 992с.

3. Фримен Э. Изучаем HTML, XHTML и CSS. - "Питер", 2010. - 656 с.

4. Хеник Б.html и CSS Путь к совершенству. - "Питер", 2011. - 336с.

5. [http://htmlacademy.ru/]

6. [http://htmlbook.ru]

7. [http://www.codecademy.com]

8. [https: // learn. javascript.ru]

Додатки

Додаток A

Розмітка HTML

<! DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>test page</title>

<link href="css/bootstrap. css" rel="stylesheet">

<link href="css/style. css" rel="stylesheet">

<script src="https: // oss. maxcdn.com/libs/html5shiv/3.7.0/html5shiv. js"></script>

<script src="https: // oss. maxcdn.com/libs/respond. js/1.4.2/respond. min. js"></script>

<! [endif] - ->

</head>

<body>

<div class="header clear-fix">

<div class="col-sm-1 col-xs-1 prev-slide"></div>

<div class="col-sm-1 col-xs-1 next-slide pull-right"></div>

<div class="navbar navbar-inverse menu calibri">

<div class="container ">

<div class="navbar-header">

<span class="title">MegaSchedule</span>

<button class="navbar-toggle" data-target="#collapse" data-toggle="collapse">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

</div>

<div class="collapse navbar-collapse" id="collapse">

<ul class="nav navbar-nav pull-right">

<li><a href="#main" class="main-page menu-item">Главная</a></li>

<li><a href="#gallery" class="gallery-page menu-item">Галерея</a></li>

<li><a href="#contact-us" class="contact-us-page menu-item">Обратная связь</a></li>

</ul>

</div>

</div>

</div>

<div class="container no-padding header-slider">

<div class="col-sm-5 col-xs-12 slider-container">

<div id="carousel" class="carousel slide slider slider-bg">

<ol class="carousel-indicators">

<li class="active" id="indicator1" class="active" data-target="#carousel" data-slide-to="0"></li>

<li data-target="#carousel" id="indicator2" data-slide-to="1"></li>

<li data-target="#carousel" id="indicator3" data-slide-to="2"></li>

</ol>

<div class="carousel-inner screens ">

<div class="item active item1">

<img src="img/rest. jpg" alt="">

<div class="carousel-caption">

<h3></h3>

</div>

</div>

<div class="item item2">

<img src="img/pars_list. png" alt="">

<div class="carousel-caption">

<h3></h3>

</div>

</div>

<div class="item item3">

<img src="img/edit_dialog. png" alt="">

<div class="carousel-caption">

<h3></h3>

</div>

</div>

</div>

<a href="#carousel" class="carousel-control left" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left"></span></a>

<a href="#carousel" class="carousel-control right" data-slide="next">

<span class="glyphicon glyphicon-chevron-right"></span></a>

</div>

</div>

<div class="col-sm-7 col-xs-12 main-information">

<div class="clear-fix" id="capabilities">

<div class="first capability active" id="test">

<h3 class="title calibri">MegaSchedule? Что это? </h3>

<p>MegaSchedule - виджет-расписание, с помощью которого любой студент сможет с помощью своего смартфона получить всю необходимую информацию о текущем или предстоящем учебном занятии. </p>

</div>

<div class="second disabled capability" id="test">

<h3 class="title calibri">Просмотр расписания</h3>

<p>MegaSchedule - это не только виджет, но и удобное приложение для просмотра расписания учебных занятий. Приложение обладает удобным интерфейсом, с помощью которого найти необходмое занятие в любой день недели не составит труда. </p>

</div>

<div class="third disabled capability" id="test">

<h3 class="title calibri">Редактирование данных</h3>

<p>С помощью MegaSchedule можно не только просматривать расписание учебных занятий, но и редактировать его, если возникнет такая необходимость. Можно изменить занятие, аудиторию и преподавателя. </p>

</div>

</div>

<a href="#download" class="btn btn-primary pull-right download calibri">скачать</a>

</div>

</div>

</div>

<div class="col-sm-12 content">

<div class="instruction" id="main">

<div class="container">

<h3 class="calibri main-title">ИНСТРУКЦИЯ</h3>

<div class="row">

<div class="install col-sm-6 col-xs-6">

<h2 class="calibri title">УСТАНОВКА</h2>

<p>Для установки виджета требуется запустить файл с расширением apk и дождаться окончания установки. Установка может длиться около минуты. </p>

<div class="arrow arrow1 pull-right"></div>

</div>

<div class="col-sm-4 col-xs-5 mobile pull-right">

<div class="mobile-screen mobile-screen-right">

<img class="zoom_mob" src="img/2. jpg" alt="">

</div>

</div>

</div>

<div class="row">

<div class="install configurate col-sm-6 col-xs-6 pull-right">

<h2 class="calibri title">НАСТРОЙКА</h2>

<p>Для корректной работы виджета необходимо предварительно скачать файл расписания в Excel-формате и выбрать его в настройках виджета. После этого следует выбрать свой курс и группу. </p>

<div class="arrow arrow2"></div>

</div>

<div class="col-sm-4 col-xs-6 mobile mobile2">

<div class="mobile-screen">

<img class="zoom_mob" src="img/courses. png" alt="">

</div>

</div>

</div>

<div class="row">

<div class="install using col-sm-6 col-xs-6">

<h2 class="calibri title">ИСПОЛЬЗОВАНИЕ</h2>

<p>На этом процесс настройки виджета завершен. Теперь на рабочем столе вашего смартфона отображается вся необходимая информация о учебных занятиях. </p>

</div>

<div class="col-sm-4 col-xs-6 mobile mobile3 pull-right">

<div class="mobile-screen mobile-screen-right">

<img class="zoom_mob" src="img/para. jpg" alt="">

</div>

</div>

</div>

</div>

</div>

<div class="send-message disabled" id="contact-us">

<div class="container">

<h3 class="calibri main-title send-message-title">НАПИСАТЬ СООБЩЕНИЕ</h3>

<form onsubmit="return checkForm (this)" name="send" method="post" action="send. php">

<p class="calibri field-name">Введите Ваше имя: </p>

<input name="name" id="name" class="calibri field name-field">

<p id="err_fio"></p>

<p class="calibri field-name">Контактная информация (E-Mail): </p>

<input name="contact" type="email" id="contact" class="calibri field contact-field">

<p id="err_contact"></p>

<p class="calibri field-name">Сообщение: </p>

<textarea name="message" id="message-field" class="message-field"></textarea>

<p id="err_message-field"></p>

<p><input type="submit" class="calibri btn btn-send" value=" Отправить "></p>

</form>

</div>

</div>

<div class="gallery disabled" id="gallery">

<div class="container">

<h3 class="calibri main-title">ГАЛЕРЕЯ</h3>

<div id="carousel2" class="carousel slide slider slider-bg">

<ol class="carousel-indicators">

<li class="active indicator indicator1" data-target="#carousel2" data-slide-to="0"></li>

<li data-target="#carousel2" class="indicator indicator2" data-slide-to="1"></li>

<li data-target="#carousel2" class="indicator indicator3" data-slide-to="2"></li>

<li class="active indicator indicator4" data-target="#carousel2" data-slide-to="3"></li>

<li class="active indicator indicator5" data-target="#carousel2" data-slide-to="4"></li>

</ol>

<div class="carousel-inner screens ">

<div class="item active item1">

<img src="img/slider/1. png" alt="">

<div class="carousel-caption">

<h3></h3>

</div>

</div>

<div class="item item2">

<img src="img/slider/2. png" alt="">

<div class="carousel-caption">

<h3></h3>

</div>

</div>

<div class="item item3">

<img src="img/slider/3. png" alt="">

<div class="carousel-caption">

<h3></h3>

</div>

</div>

<div class="item item4">

<img src="img/slider/4. jpg" alt="">

<div class="carousel-caption">

<h3></h3>

</div>

</div>

<div class="item item5">

<img src="img/slider/5. jpg" alt="">

<div class="carousel-caption">

<h3></h3>

</div>

</div>

</div>

<a href="#carousel2" class="carousel-control left" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left"></span></a>

<a href="#carousel2" class="carousel-control right" data-slide="next">

<span class="glyphicon glyphicon-chevron-right"></span></a>

</div>

</div>

</div>

</div>

<div class="col-sm-12 footer">

<div class="container" id="footer-menu">

<a href="#main" class="calibri" id="main-page">ГЛАВНАЯ</a>

<a href="#gallery" class="calibri" id="gallery-page">ГАЛЕРЕЯ</a>

<a href="#contact-us" class="calibri" id="contact-us-page">ОБРАТНАЯ СВЯЗЬ</a>

</div>

<a href="https: // vk.com/arsen. arsen" class="vk"></a>

<span class="calibri copyright">2015 | All Rights Reserved</span>

</div>

<script src="js/bootstrap. js"></script>

<script src="js/jquery. js"></script>

<script src="js/okzoom. js"></script>

<script src="js/script. js"></script>

<script src="js/send. js"></script>

</body>

</html>

Додаток Б

CSS стилі

body {font-family: `Arial', serif; color: white; font-size: 16px; text-shadow: 2px 2px black; }

. calibri {font-family: `Calibri', serif; font-weight: bold; }

. row {margin: 0px; }

. disabled {display: none; }

. clear-fix: after {content: ""; display: block; clear: both; }

. no-padding {padding: 0px}

/*Header-menu*/

. header{background: url (. /img/test_bg2. png),

url (. /img/test_bg. jpg); background-size: cover; }

. navbar-header. title{cursor: default; color: white}

. menu{text-transform: uppercase; font-size: 22px; box-shadow: 2px 2px 20px black; background: #101010; z-index: 2}

. navbar-header. title{text-transform: none; font-size: 35px; }

. menu a{color: #fff! important; }

. navbar-collapse a: hover{color: #d9d9d9! important; }

. menu. active-menu: hover{color: black! important; }

. menu. active-menu{background: #ffffff! important; color: black! important; text-shadow: 2px 2px white; }

. first,. second,. third{position: absolute}

. main-information{margin-top: 18%; margin-bottom: 10%; margin-left: 0%; font-size: 16px; }

#capabilities{min-height: 200px; font-size: 18px; }

. main-information. title{font-size: 40px; }

. download,. btn-send{background: rgba (0,0,0,0.4); border: none; border-radius: 10px; font-size: 20px; margin-top: 30%; text-transform: uppercase; padding-left: 30px; padding-right: 30px}

. download: hover,. btn-send: hover{background: rgba (0,0,0,0.6); color: white; }

/*Slider*/

. prev-slide: hover{background: url (". /img/arrow-left. png") no-repeat 50%; background-color: rgba (0,0,0, 0.6); opacity: 1.0; }

. next-slide: hover{background: url (". /img/arrow-right. png") no-repeat 50%; background-color: rgba (0,0,0, 0.6); opacity: 1.0; }

. next-slide,. prev-slide{cursor: pointer; display: inline; position: absolute; min-height: 760px; opacity: 0.5; z-index: 1}

. next-slide{right: 0px; box-shadow: 0px 0px 20px 1px black; background:

url (". /img/arrow-right. png") no-repeat 50%; background-color: rgba (0,0,0,0.8) }

. prev-slide{box-shadow: 0px 0px 20px 1px black; background: url (". /img/arrow-left. png") no-repeat 50%; background-color: rgba (0,0,0,0.8) }

. header. slider-container{padding: 0px; margin-top: 5%; min-width: 280px; }

. header. carousel-control{display: none}

. header. carousel-control. left{margin-left: - 15px; }

. header. carousel-control. right{margin-right: - 15px; }

. header. slider. slider-bg{background: url (". /img/smart-bg. png") no-repeat 50% 50%; background-size: cover; min-width: 270px; max-width: 307px; height: 550px; box-sizing: border-box}

. header. screens /*Граница слайда*/{width: 251px; margin: 0 auto; height: 483px; }

. header. screens img{width: 100%; height: auto; max-height: 248%; }

. header. item{position: absolute; padding-bottom: 250px; height: 420px; margin-top: 61px; }

. header. carousel-control{background: none! important; }

/*Content*/

. content{background: #363636; /**#ca8456**/box-shadow: 2px 3px 40px black; padding-bottom: 100px; padding-top: 50px; z-index: 2; }

. content. main-title{font-size: 60px; }

. install{padding: 0px; margin-top: 10%; font-size: 20px}

. install>p, #capabilities{text-shadow: 1px 1px black; }

. configurate,. using{margin-top: 5%; }

. configurate{margin-right: 7%}

. install. title{padding-left: 80px; background: url (". /img/first. png") no-repeat 0; padding-top: 23px; padding-bottom: 20px; font-size: 50px; }

. configurate. title{background: url (". /img/second. png") no-repeat 0; }

. using. title{background: url (". /img/third. png") no-repeat 0; }

. mobile{background: url (". /img/Mobile. png") no-repeat 100%; height: 480px; background-size: contain; }

. mobile img{display: block; width: 100%; height: 332px; }

. mobile-screen{width: 79%; line-height: 0px; margin-top: 26%; margin-left: 4%; }

. mobile-screen-right{margin-left: 17.5%; }

. mobile2{background: url (". /img/Mobile. png") no-repeat; background-size: contain; margin-top: - 5%; }

. mobile3{margin-top: - 5%; }

. arrow{background: url (". /img/arrow1. png") no-repeat; height: 120px; width: 65px; margin-top: 3%; }

. arrow2{background: url (". /img/arrow2. png") no-repeat; height: 130px; width: 65px; margin-top: 5%;

}

/*CONTACT-US*/

. send-message{/*background: url (". /img/test. png") no-repeat 100% 20%; */}

#err_fio,#err_contact,#err_message-field{background: url (". /img/icon_warning. png") no-repeat; background-size: contain; padding-left: 25px; display: block; }

. send-message-title{padding-left: 110px; background: url (". /img/letter. png") no-repeat 0% 50%; margin-bottom: 5%; }. field-name{font-size: 35px; }

#name{background: url (". /img/user. png") no-repeat 100%; background-color: white; background-size: contain; }

#name: focus{background: url (". /img/user_active. png") no-repeat 100%; background-color: white; background-size: contain; }

#contact{background: url (". /img/mail. png") no-repeat 100%; background-color: white; background-size: contain; }

#contact: focus{background: url (". /img/mail_active. png") no-repeat 100%; background-color: white; background-size: contain; }

. field,. message-field{border: none; height: 50px; min-width: 80%; max-width: 80%; box-shadow: 2px 2px 5px black; color: black; font-size: 32px; padding-left: 10px; padding-right: 50px; margin-bottom: 2%; }

. message-field{min-height: 200px; max-height: 200px; }

. btn-send{margin-top: 5%; }

/*FOOTER*/

. footer{text-align: center; background: #070707; box-shadow: 2px - 2px 10px black; padding: 31px 0px 30px 0px}

. footer a{color: white; text-decoration: underline; font-size: 18px; }

. footer a: hover{color: #d9d9d9; }

. vk{display: inline-block; border-radius: 17px; width: 35px; height: 35px; padding: 13px; text-align: center; background: url (". /img/vk-icon. png") no-repeat 50% 50%; background-color: white; color: black! important; margin-top: 1%; }

. vk: hover{background-color: #dddddd}

. copyright{display: block; margin-top: 10px; font-size: 14px; }

. gallery. main-title{background: url (". /img/camera2. png") no-repeat 0% 50%; padding-top: 12px; padding-bottom: 12px; padding-left: 100px}

. gallery. carousel{background: #888888; margin-top: 5%; margin-bottom: 5%; padding: 20px 0px 20px 0px; border-radius: 5px; border: 25px solid white; }

. gallery img{max-height: 500px; margin: 0 auto; }

. gallery. indicator{height: 65px; width: 37px; margin-bottom: - 145px; border: 2px solid black

}

. gallery. indicator1,. gallery. indicator1. active{ background: url (. /img/slider/1_sm. jpg); background-size: cover}

. gallery. indicator2,. gallery. indicator2. active{ background: url (. /img/slider/2_sm. jpg); background-size: cover}

. gallery. indicator3,. gallery. indicator3. active{ background: url (. /img/slider/3_sm. jpg); background-size: cover}

. gallery. indicator4,. gallery. indicator4. active{ background: url (. /img/slider/4_sm. jpg); background-size: cover}

. gallery. indicator5,. gallery. indicator5. active{ background: url (. /img/slider/5_sm. jpg); background-size: cover}

. gallery. indicator. active{border: 2px solid white}

@media screen and (max-width: 990px) {. header-slider{padding-left: 45px; padding-right: 30px; }

. download{margin-top: 200px; }

. mobile-screen{width: 92%; margin-top: 31%margin-left: 4%; }

. mobile-screen-right{margin-top: 46%; }

. mobile img{height: 288px; }}

@media screen and (max-width: 768px) {. header-slider{padding: 0px; }

. configurate{margin-right: 50px; margin-top: 50px; }

. install. title{font-size: 40px; }

. arrow{display: none; }

. mobile{width: 186px! important; height: 300px; margin-top: 85px; }

. mobile-screen{width: 88%; margin-top: 30%; margin-left: 2%; }

. mobile-screen-right{margin-left: 10.5%; }

. mobile img{height: 206px; }

. next-slide,. prev-slide{display: none; }

. header. slider{margin: 0 auto; }

. download{margin-top: 10px; }}

@media screen and (max-width: 600px) {

. send-message. main-title{font-size: 35px; padding-top: 20px; padding-bottom: 20px}

. send-message{background: none; }

. mobile{width: 140px! important; margin-top: 85px; }

. mobile-screen{width: 102%; margin-top: 34%; margin-left: - 1%; }

. mobile-screen-right{margin-top: 60%; }

. mobile img{height: 169px; }}

@media screen and (max-width: 480px) {

. header. slider{margin: 0 auto}

. main-information{font-size: 15px; }

#capabilities{height: 325px}

. instruction. main-title{font-size: 40px; }

. mobile{height: 170px; width: 99px! important; margin-top: 20px; float: left! important; }

. mobile-screen{width: 114%; margin-top: 38%; margin-left: - 8%; }

. mobile-screen-right{margin-left: - 6%; }

. mobile img{height: 118px; }

. install{width: 100%; font-size: 15px; margin: 0; }

. install. title{font-size: 25px; }

. arrow{display: none}

. field-name{font-size: 20px}

. send-message-title{font-size: 24px! important; padding-top: 20px; padding-bottom: 20px}

. gallery. main-title{font-size: 40px; }

. gallery. indicator{height: 10px; width: 10px; margin-bottom: - 70px; }

. gallery. indicator. active{background: white; }}

Додаток В

Скрипти

$ (document). ready (function () {

$ ("#collapse, #footer-menu"). on ("click","a", function (event) {

// отменяем стандартную обработку нажатия по ссылке

event. preventDefault ();

// забираем идентификатор блока с атрибута href

var id = $ (this). attr ('href'),

// узнаем высоту от начала страницы до блока на который ссылается якорь

top = $ (id). offset (). top;

// анимируем переход на расстояние - top за 1500 мс

$ ('body,html'). animate ({scrollTop: top}, 1500);

});

/*menu-selection*/

$ (". navbar-collapse a"). click (function () {

$ (". menu-item"). removeClass ("active-menu")

$ (this). addClass ("active-menu")

});

$ ("#main-page"). click (function () {

$ (". menu-item"). removeClass ("active-menu")

$ (". main-page"). addClass ("active-menu")

});

$ ("#gallery-page"). click (function () {

$ (". menu-item"). removeClass ("active-menu")

$ (". gallery-page"). addClass ("active-menu")

});

$ ("#contact-us-page"). click (function () {

$ (". menu-item"). removeClass ("active-menu")

$ (". contact-us-page"). addClass ("active-menu")

});

/*page-change*/

$ ('. main-page, #main-page'). click (function () {

$ ('. gallery,. send-message'). css ('display','none');

$ ('. instruction'). fadeIn (1500);

});

$ ('. gallery-page, #gallery-page'). click (function () {

$ ('. instruction,. send-message'). css ('display','none');

$ ('. gallery'). fadeIn (1500);

});

$ ('. contact-us-page, #contact-us-page'). click (function () {

$ ('. instruction,. gallery'). css ('display','none');

$ ('. send-message'). fadeIn (1500);

});

/*indicator-select*/

$ ('. header #indicator1'). click (function () {

$ ('. second,. third'). fadeOut (200)

$ (". header. screens. item1"). fadeIn (1000);

$ ('. header #indicator2,. header #indicator3'). removeClass ("active");

$ ('. header #indicator1'). addClass ("active");

$ ('. second,. third'). removeClass ("active");

$ (". header. screens. item3,. header. screens. item2"). removeClass ("active");

$ (". first"). addClass ("active");

$ (". header. screens. item1"). addClass ("active");

$ (". first"). fadeIn (1500);

$ (". header. screens. item2,. header. screens. item3"). fadeOut (1000);

clearInt ();

});

$ ('. header #indicator2'). click (function () {

$ ('. first,. third'). fadeOut (200)

$ (". header. screens. item2"). fadeIn (1000);

$ ('. header #indicator1,. header #indicator3'). removeClass ("active");

$ ('. header #indicator2'). addClass ("active");

$ ('. first,. third'). removeClass ("active");

$ (". header. screens. item1,. header. screens. item2"). removeClass ("active");

$ (". second"). addClass ("active");

$ (". header. screens. item2"). addClass ("active");

$ (". second"). fadeIn (1500);

$ (". header. screens. item1,. header. screens. item3"). fadeOut (1000);

clearInt ();

});

$ ('. header #indicator3'). click (function () {

$ ('. second,. first'). fadeOut (200)

$ (". header. screens. item3"). fadeIn (1000);

$ ('. header #indicator2,. header #indicator1'). removeClass ("active");

$ ('. header #indicator3'). addClass ("active");

$ ('. second,. first'). removeClass ("active");

$ (". header. screens. item1,. header. screens. item2"). removeClass ("active");

$ (". header. third"). addClass ("active");