Розробка веб-сайту відеофільмів

Вступ

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

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

Це буде час, коли будь-яка людина, що володіє комп’ютером, зможе «скачати» з його допомогою статті, ілюстрації, відео-або аудіоінформацію по будь цікавить його темі. Він зможе отримати цю інформацію тоді, коли він цього забажає. Через якийсь час системи штучного інтелекту — паралельний машинний переклад, а також ідентифікація і розпізнавання голосу зламають останні національні й мовні бар'єри і зроблять можливим вільний транснаціональний обмін інформацією.

Кожен з нас вже зараз може зробити свій внесок у розвиток Internet. Для цього досить створити свій Web-сайт і розмістити його в Мережі. Але як це зробити? Відповідь на дане питання я спробую дати в цій роботі.

Для цього необхідно вирішити наступні приватні задачі:

— Ознайомитися з сучасними Інтернет-технологіями і, по можливості, використовувати їх у своїй розробці;

— Вивчити програмний інструментарій, застосовуваний для розробки і створення Web-сайтів;

— Виявити і врахувати методи і способи представлення на Web-сторінках різних видів інформації, що не перешкоджають їх доступності;

— Ознайомитися з основними правилами і рекомендаціями з розробки і створення Web-сайтів і неухильно дотримуватися їх у своїй практиці;

— Визначитися зі структурою Web-сторінок;

— Вибрати стратегію розробки та створення Web-сайту.

World Wide Web — глобальна комп’ютерна мережа, на сьогоднішній день містить мільйони сайтів, на яких розміщена будь інформація. Люди отримують доступ до цієї інформації за допомогою використання технології Internet. Для навігації в WWW використовуються спеціальні програми — Web-браузери, які істотно полегшують подорож по безкрайніх просторах WWW. Вся інформація в Web-браузері відображається у вигляді Web-сторінок, які є основним елементом байтів WWW.

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

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

Створити Web-сторінку непросто, але мабуть кожна людина хотіла б спробувати себе в ролі дизайнера.

У своїй курсовій роботі я зробив спробу розібратися в тому, що необхідно знати і вміти для створення Web-сторінки, яке програмне забезпечення є інструментарієм створення Web-сторінок і як його ефективно використовувати.

Також в даній роботі мною розглянуті основи мови програмування Web-сторінок — HTML, який є загальноприйнятим стандартом WWW. Це дасть нам можливість ознайомитися зі структурою Web-сторінки і прийомами її правильного оформлення.

Так що ж таке World Wide Web, або, як кажуть в просторіччі, WWW, the Web, або ще простіше — 3W? WWW — це розподілена інформаційна система мультимедіа, заснована на гіпертексті. Давайте розберемо це визначення по порядку.

Розподілена інформаційна система: інформація зберігається на величезній безлічі так званих WWW-серверів (servers). Тобто комп’ютерів, на яких встановлене спеціальне програмне забезпечення і об'єднані в мережу Internet. Користувачі, які мають доступ до мережі, отримують цю інформацію за допомогою програм-клієнтів, програм перегляду WWW-документів. При цьому програма перегляду посилає по комп’ютерній мережі запит серверу, що зберігає файл з необхідним документом. У відповідь на запит сервер висилає програмі перегляду цей необхідний файл або повідомлення про відмову, якщо файл по тих або інших причинах недоступний. Взаємодія клієнт-сервер відбувається за певними правилами, або, як кажуть інакше, протоколу. Протокол, прийнятий в WWW, називається HyperText Transfer Protocol, скорочено — HTTP.

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

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

Такі посилання називають гіперпосиланнями або гіперзв'язками. На екрані комп’ютера у вікні програми перегляду посилання виглядають як виділені яким-небудь чином (наприклад, іншим кольором і / або підкресленням) дільниці тексту або графіки. Вибираючи гіперпосилання, користувач програми перегляду може швидко переміщатися від однієї частини документа до іншої, або ж від одного документа до іншого. При необхідності програма перегляду автоматично зв’язується з відповідним сервером в мережі і запитує документ, на який зроблене посилання. До речі, ідея гіпертекстового представлення інформації повинна вже бути добре знайома користувачам різних версій системи Microsoft Windows. Саме за цим принципом побудована в Windows система підказок (Help), з тією лише різницею, що гіпертекстова система підказок Windows не є розподіленою.

Отже, Web-сторінка може містити стилізований і форматований текст, графіку і гіперзв'язки з різними ресурсами Internet. Щоб реалізувати всі ці можливості, була розроблена спеціальна мова, названа HyperText Markup Language (HTML), тобто, Мова Розмітки Гіпертексту. Документ, написаний на HTML, являє собою текстовий файл, що містить власне текст, несучий інформацію читачеві, і прапори розмітки. Останні являють собою певні послідовності символів, що є інструкціями для програми перегляду; згідно з цими інструкціями програма розташовує текст на екрані, включає в нього малюнки, що зберігаються в окремих графічних файлах, і формує гіперзв'язки з іншими документами або ресурсами Internet. Таким чином, файл на мові HTML набуває вигляд WWW-документа тільки тоді, коли він інтерпретується програмою перегляду.

1. Постановка технічного завдання

1.1 Постановка завдання

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

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

1.2 Вибір мови програмування та середовища розробки

Для виконання поставленого завдання було обрано мову програмування php з використанням СУБД MySQL та середовище розробки NetBeans. Розглянемо основні їх можливості та недоліки.

Основні можливості мови php:

автоматична обробка POST і GET параметрів, а також змінних оточення веб-сервера та їх запис у масиви;

функції для обробки локальних та відданих файлів;

автоматичне відправлення http-заголовків;

робота з cookies і сесіями;

обробка файлів, які завантажуються на сервер;

робота з http-заголовками і http-авторизацією;

робота з Xforms;

підтримка роботи з сокетами.

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

Мова програмування php є найбільш популярною для створення динамічних веб-сайтів. На відміну від ASP та JSP, для php немає суттєвої різниці, на якому веб-сервері буде розміщений розроблений сайт. Також для виконання даної лабораторної роботи можна було обрати мову perl, або python, але дані мови з самого початку мали інше призначення, і менш зручні, ніж php, для написання веб-сайтів.

MySQL — вільна система керування реляційними базами даних. Дана система керування базами даних (СКБД) з відкритим кодом була створена як альтернатива комерційним системам. MySQL з самого початку була дуже схожою на mSQL, проте з часом вона все розширювалася і зараз MySQL — одна з найпоширеніших систем керування базами даних. Вона використовується, в першу чергу, при створенні динамічних веб-сторінок, оскільки має чудову підтримку з боку різноманітних мов програмування. Цей факт і був вирішальний при виборі СУБД.

Можливості сервера MySQL:

простота у встановленні та використанні;

підтримується необмежена кількість користувачів, що одночасно працюють із БД;

кількість рядків у таблицях може досягати 50 млн.;

висока швидкість виконання команд;

наявність простої і ефективної системи безпеки.

NetBeans IDE — вільне інтегроване середовище розробки додатків на мовах програмування Java, JavaFX, Ruby, Python, PHP, JavaScript та інших. Проект NetBeans IDE підтримується і спонсорується компанією, але розробкою NetBeans займається незалежне співтовариство розробників-ентузіастів і компанією NetBeans Org. За якістю і можливостями останні версії NetBeans не поступаються кращим комерційним середовищам розробки.

До основних переваг середовища розробки NetBeans можна віднести:

— мультиплатформенність;

— зручний режим відладки;

— виділення синтаксичних конструкцій;

— автодоповнення;

— рефакторінг;

— профілювання;

— підтримка плагінів.

Основним недоліком даного середовища можна вважати високі вимоги до апаратного забезпечення персонального комп’ютера.

На відміну від інших середовищ розробки (Zend Studio, Delphi for PHP, Eclipse та ін.), середовище розробки NetBeans IDE є безкоштовним, мультиплатформенним, постійно оновлюється та має потужну підтримку плагінів.

1.3 Аналіз поставленого завдання та огляд існуючих аналогів

Кожну сторінку даного веб-сайту можна умовно розбити на 3 частини, а саме заголовок, меню та основна частина.

В заголовку розміщено логотип та назва сайту.

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

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

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

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

http://lib.ru/

http://infanata.com/

http://lib.aldebaran.ru/

www.wdl.org

lib.rus.ec

Але оскільки дані проекти є більш універсальними та містять книги із різних областей знань, що ускладнює пошук необхідної інформації. Також дані проекти не надають можливість користувачам завантажувати власні книги до бібліотеки. Більш близьким до поставленого завдання є проект http://window.edu.ru, але він має трохи іншу специфіку та вміст (більшість викладених матеріалів спрямовані для вищих навчальних закладів Російської Федерації).

2. Реалізація технічного завдання

2.1 Вибір середовища розробки

Macromedia Dreamweaver одне з популярних середовищ розробки сайтів. Воно дозволяє редагувати файли різного формату: від html до js. Враховуючи вимоги до розробки сайту та навички користування даним середовищем, воно було обране в якості основного інструменту.

2.2 Розробка дизайну

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

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

Для зм’якшення вигляду сайту було вирішено використати властивості box-shadow та border-radius шо нададуть блокам округлення кутів та тінь.

2.3 Розробка коду сайту

Сайт створено блочним методом. Він складається з трьох основних стандартних блоків: #header, #content, #footer. Блок header складається з двох блоків, лого та меню. На сайті реалізована навігація, яка робить сторінки інформаційно-ненавантаженими та дозволяє переглядати одночасно 4 одиниці контенту.

Також на сайті реалізована реєстрація та вхід за допомогою тегів . Для них було встановлено відповідні типи та налаштування. Зокрема було ввімкнено перевірку валідності даних в полі email та номер телефону.

Меню реалізоване за допомогою списку, в якого відключений атрибут list-style. Його формують такі стилі:.menu_items ul li. menu_items ul li: hover. menu_items ul li a.

Menu_items ul li встановлює розмір шрифту, вирівнює текст по центру, також встановлює фоновий колір для елемента меню градієнтом.

Menu_items ul li: hover змінює напрямок градієнта, що створює вигляд виділеної кнопки.

Menu_items ul li a встановлює колір для тексту посилань в меню.

Блок #content складається з трьох блоків, побоках новини, а посередині контент. Обидва блоки новини однакові, відповідно стилі для них використані однаокові.

Блок Новини формується за допомогою таких стилів:.news.news h3. news р.news img.

News визначає ширину блоків Новини, фоновий колір блоків, та внутрішні відступи.

News h3 визначає розмір шрифту заголовка блоку новини та його відступи.

News р визначає розмір шрифту для абзаців та нижні відступи їх один від одного.

News img встановлює відступи від картнки та метод обтікання її текстом.

Вигляд блоку content формується за допомогою таких стилів: #content.center p. center img.center h3. films, #content h2.

#Content визначає фоновий колір та внутрішні відступи.

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

Center h3 встановлює розмір, колір та тип шрифта.

Films визначає фоновий колір та встановлює заокруглені вугли та тінь для блока.

#Content h2 визначає розмір та тип шрифту для заголовка, а також встановлює відступи та тінь від тексту.

3. Тестування

Головна сторінка сайту виглядає так:

Рис. 1. Головна сторінка Як бачимо сторінка має приємний, нерізкий на очі інтерфейс, вгорі знаходиться меню, побоках новини, а посередині фільми, як говорилось раніше.

Висновки

В результаті виконання даної курсової роботи реалізовано веб-сайт на тему відео фільмів. Користувач на даному сайті має наступні можливості:

— виконувати навігацію по розділам сайту;

— переглядати інформацію про фільми;

— завантажувати фільми;

— переглядати новини кіноіндустрії;

Адміністратор, крім вищезазначених можливостей, може виконувати наступні дії:

— додавати фільми;

— редагувати інформацію про фільми;

— видаляти фільми;

— додавати нові категорії;

— додавати та редагувати новини;

Розроблений сайт призначений для розміщення в мережі Internet. Темати сайт в даний момент має попит тому, що можливості інтернету ростуть, а з ними ростуть і бажання споживачів.

При розробці сайту були використані найновіші технології, такі як HTML 5, CSS 3. Було враховано особливості основних браузерів (Mozila FireFox, Chrome, Opera), що дозволяє сайту відображати сторінки сайту однаково в усіх браузерах.

сайт сервер мова відео

Список літератури

1. Мерсер Д. PHP 5 для начинающих /Дэйв У. Мерсер, Алан Кент — СПб.: Диалектика, 2006.? 848 с.

2. Соколов С. А. JavaScript в примерах, типових решениях и задачах /С.А. Соколов — М.: ООО «И.Д. Вильямс», 2006. — 592 с.

3. Полонская Е. Л. Язык HTML. Самоучитель /Е.Л. Полонская — СПб.: Диалектика, 2005.? 320 с.

4. Учебник по HTML, CSS, дизайну, графике и созданию сайтов [Електронний ресурс]/ В. Мержевич http://www.htmlbook.ru/

5. Портал Web-мастера [Електронний ресурс] /Д. Давиденко http://www.dweb.ru/