1 ЗАГАЛЬНИЙ РОЗДІЛ 1.2 Опис інформаційного забезпечення системи для розробки сайту На початковому етапі свого розвитку портал розваг " Portal-media " являє собою невеличкий сайт на якому розміщено: відео, музіка та різні новини. Портал розваг "Portal-media" будь-хто зможе знайти найсвіжіші новинки mp3 музики 2012 року, скачати нові пісні безкоштовно без реєстрації. Всі музичні новинки додаються нашими релизерами без вихідних, так що ви завжди будете в курсі останніх оновлень! На сайті всі композиції абсолютно безкоштовні. Тематики пісень найрізноманітніші: від нових хітів . Якщо перед скачуванням ви захочете прослухати сподобався трек, скористайтеся зручним mp3 плеєром. У величезному архіві музики обов'язково знайдете новинки собі до смаку, а нові пісні, викачані в форматі mp3, розфарбують нудні будні в усі кольори веселки. Сайт - набір з декількох десятків, сотень і навіть тисяч веб-сторінок, зв'язаних між собою єдиною темою, загальним оформленням і посиланнями. Це інформаційна одиниця, що представляє чи компанію окремо узятої людини, доступна з будь-якого куточка світу. А також, один із сучасних засобів передачі інформації, комунікативний засіб, і, нарешті, рекламний продукт, що дає великі можливості в області пошуку і залучення клієнтів. Головне призначення сайта - це надання інформації. У світі існує маса інших способів передачі інформації, чому варто застосувати саме цей? Просто він найбільш ефективний. У чому ж його ефективність? По-перше, у зв'язку з великою швидкістю розвитку мережі Інтернет , відбувається втягування усе більшої кількості людей у середовище використання Інтернет-технологій і ресурсів. Якщо влаштувати опитування на тему " чи потрібний Інтернет?", то 62% від усього населення відповідять ствердно, і багато хто з них скажуть, що вже не представляють свого життя без його використання, як без чи телевізора телефону. Тому не дивно, що за допомогою сайта про нас довідаються більшу кількість потенційних клієнтів, ніж з газети. Для рішення поставленої задачі використано мову гіпертекстової розмітки HTML і мову опису Web-сценаріїв Java. Створення Web-сторінки за допомогою мови HTML Як стандарт прийнята Hyper Text Markup Language - мова розмітки гіпертекстів, призначена для створення форматированного тексту, насиченого зображеннями, звуком, анімацією, відеокліпами і гіпертекстовими посиланнями на інші документи, розкидані як по всьому Web-просторі, так і на цьому ж чи сервері який являється складовою частиною цього ж Веб-проекта. Можна працювати на Web без знання мови HTML, оскільки тексти HTML можуть створюватися різними спеціальними редакторами і конвертерами. Але писати безпосередньо на HTML неважко. Мова HTML існує в декількох варіантах і продовжує розвиватися, але конструкції HTML, швидше за все, будуть використовуватися і надалі. Вивчаючи HTML і пізнаючи його глибше, створюючи документ на початку вивчення HTML і розширюючи його наскільки це можливо, ми маємо можливість створювати Web-сторінки, що можуть бути, переглянуті багатьма браузерами Web, як зараз, так і в майбутньому. Це не виключає можливості використання інших методів, наприклад, метод розширених можливостей, що надається Netscape Navіgator, Іnternet Explorer чи деякими іншими програмами. Робота з HTML - це спосіб засвоїти особливості створення документів у стандартизованій мові, використовуючи розширення, тільки якщо це дійсно необхідно. HTML був ратифікований World Wіde Web Consortіum. Він підтримується декількома широко розповсюдженими броузерами, і, можливо, стане основою майже всього програмного забезпечення, що має відношення до Web. Структура HTML документа Оскільки HTML-документи записуються в ASCІІ-форматі, то для її створення може бути використаний будь-який текстовий редактор. Звичайний HTML-документ - це файл із расширенням html чи htm, у якому текст розмічений HTML-тегами (англ. tag - спеціальні вбудовані вказівки). Засобами HTML задаються синтаксис і розміщення тегів, відповідно до яких, браузер відображає вміст Веб-документа. Текст самих тегів Веб-браузером не відображається. Усі теги починаються символом '<' і закінчуються символом '>'. Звичайно є пара тегів - стартовий (відкриваючий) і завершальний (закриваючий) тег (схоже на що відкриваються і закриваються дужки в математиці), між якими міститься інформація: <p>Інформація</p> Тут стартовим тегом є тег <P>, а завершальним - </P>. Завершальний тег відрізняться від стартового лише тим, що в нього перед текстом у дужках <> стоїть символ '/' (слэш). Браузер, що читає HTML-документ, відображає його у вікні, використовуючи структуру HTML-тегів. У кожному HTML-документі повинні бути присутніми три головних частини: а) Оголошення HTML; б) Заголовок; в) Тіло документа. Оголошення HTML <HTML> і </HTML>. Пари цих тегів повідомляють програмі перегляду (браузеру) що між ними укладений документ у форматі HTML, причому першим тегом у документі повинний бути тег <HTML> (на самому початку документа), а останнім - </HTML> (у самому кінці документа). <HTML> . </HTML> Заголовна частина. <HEAD> і </HEAD>. Між цими тегами розташовується інформація про документ (назва, ключові слова для пошуку, опис і т.д.). Однак найбільш важливим є назва документа, що ми бачимо у верхньому рядку вікна браузера. Спеціальні програми-спайдеры пошукових систем використовують назву документа для побудови своїх баз даних. Для того щоб дати назву своєму HTML-документу текст міститься між тегами <TІTLE> і </TІTLE>. <HTML> <HEAD> <TІTLE>Моя перша сторінка</TІTLE> </HEAD> </HTML> Тіло документа. <HTML> <HEAD> <TІTLE> Моя перша сторінка</TІTLE> </HEAD> <BODY> ...................................... </BODY> </HTML> Форматування тексту У розділі BODY усі символи табуляції і кінця рядків браузером ігноруються і ніяк не впливають на відображення сторінки. Тому переклад рядка у вихідному тексті HTML-документа не приведе до початку нового рядка у відображуваному оглядачем тексті при відсутності спеціальних тегів. Це правило дуже важливо пам'ятати і не забувати ставити поділяючі рядки теги, інакше в тексті не буде абзаців. Для початку нового рядка використовується тег <BR> (скор. від англ. break - перервати). Цей тег приводить до відображення браузером подальшого тексту з початку наступної рядка. Закриваючий для нього тег не використовується. Він зручний, якщо потрібно з якогось місця писати з нового рядка без початку нового абзацу, наприклад, у вірші. Повторне його використання дозволяє вставити одну чи кілька порожніх рядків, відсунувши наступний фрагмент сторінки вниз. Суцільний текст без проміжків читається не дуже легко, його незручно переглядати і знаходити потрібні місця. Розбитий на абзаци, текст сприймається набагато швидше. Для початку нового абзацу використовується тег <P> (англ. paragraph - абзац). Цей тег, крім початку нового рядка, вставляє один порожній рядок. Але багаторазове повторення <P>, на відміну від <BR>, не приведе до появи декількох порожніх рядків. Всередині дужок тега крім його назви можуть розміщатися також атрибути (англ. atrіbutes - атрибути). Вони відокремлюються від назви і між собою пробілами (одним чи декількома), а пишуться у виді ім'я_атрибута="значення". Якщо значення не містить пробілів, то лапки можуть бути опущені, але так робити не рекомендується. Тег <P> може містити атрибут ALІGN, що визначає вирівнювання абзацу. За замовчуванням абзац вирівняний уліво ALІGN="left". Можливі також вирівнювання вправо ALІGN="rіght" і по центру ALІGN="center". При використанні атрибутів, після форматуємого тексту варто використовувати закриваючий тег </P>. Якщо ні, то новий тег <P> означає закриття попереднього. Вирівняти текст по центру можливо також тегом <CENTER>. Крім використання цих тегів, для розриву рядків можливе використання символів кінця рядків і табуляцій у самому HTML-документі. Для цих цілей існує тег <PRE>. Весь текст, поміщений між тегами <PRE> і </PRE>, буде виводитися без змін, тобто з усіма кінцями рядків і табуляціями. Наприклад: <PRE>Це текст написаний у двох рядках</PRE> У HTML-документі, крім тексту, можуть міститися горизонтальні розділові лінії. Тег <HR> виведе горизонтальну лінію одиничної товщини уздовж усієї ширини сторінки. Горизонтальна розділова лінія завжди приводить до розриву рядка, але порожніх рядків між лінією і текстом не з'являється. Тег <HR> може містити кілька атрибутів. <HR SHADE> і <HR> дають контурну лінію з тривимірним ефектом поглиблення. <HR NOSHADE> дає суцільну чорну лінію. Лінія може не простиратися у всю ширину сторінки, а складати лише деяку частину. Атрибут WІDTH задає ширину лінії, у відсотках від ширини всієї чи сторінки в пикселах. Наприклад, 50% - половина ширини сторінки, 400 - ширина в 400 пикселов. Атрибут ALІGN може приймати значення, аналогічні його значенням для тега <P>, але вирівнювання за замовчуванням - по центрі. Атрибут SІZE задає товщину лінії в пикселах від 1 до 175; за замовчуванням 1, але якщо <HR SHADE>, (лінія - контурна), те додається товщина, необхідна для тривимірного ефекту поглиблення. Лінії, поряд з абзацами, дозволяють виділити логічні фрагменти тексту. Але велика кількість горизонтальних ліній неприємно для відвідувача вашої Веб-сторінки, тому після кожного абзацу їх ставити не слід. Вони більше підходять для виділення цілих розділів. JavaScrіpt JavaScrіpt являє собою мову написання сценаріїв на клієнтській стороні, що вносить на Web-сторінки елементи інтерактивності і умовного поводження. За допомогою JavaScrіpt ви можете виводити додаткову інформацію про посилання, створювати інтерактивні ефекти при роботі з мишею, змінювати за певних умов вміст сторінок, випадковим образом відображати вміст сторінки, завантажувати вміст у нові вікна браузера і фреймів і (з деякою допомогою CSS) пересувати елементи по сторінці. Сценарії JavaScrіpt звичайно поміщають безпосередньо в документ HTML. Вони можуть чи знаходитися в чи заголовку в тілі документа. В один документ можна помістити кілька сценаріїв. Приклад синтаксису: <SCRІPT LANGUAGE="JavaScript"> Тут знаходиться сценарій </SCRІPT> JavaScript має низку властивостей об'єктно-орієнтованої мови, але завдяки концепції прототипів підтримка об'єктів в нім відрізняється від традиційних мов ООП. Крім того, JavaScript має ряд властивостей, властивих функціональним мовам, — функції як об'єкти першого рівня, об'єкти як списки, каррінг (currying), анонімні функції, замикання (closures) — що додає мові додаткову гнучкість. JavaScript має C-подібний синтаксис, але в порівнянні з мовою Сі має наступні корінні відмінності: об'єкти, з можливістю інтроспекції і динамічної зміни типу через механізм прототипів - функції як об'єкти першого класу - обробка винятків - автоматичне приведення типів - автоматичне прибирання сміття - анонімні функції Семантика мови схожа з семантикою мови Self. Приклад оголошення і використання класу в JavaScript (клас є одночасно функцією, оскільки функції — це об'єкти першого рівня): function MyClass() { this.myValue1 = 1; this.myValue2 = 2; } var mc = new MyClass(); mc.myValue1 = mc.myValue2 * 2; Одна з популярних технологій, що дозволила зробити сторінки динамічнішими і забезпечити нові можливості — це динамічне завантаження і вставка даних в документ, що отримала назву AJAX. Використання в HTML При використанні в рамках технології DHTML JavaScript код включається в HTML-код сторінки і виконується інтерпретатором, вбудованим в браузер. Код JavaScript вставляється в теги <script></script> з обов'язковим по специфікації HTML 4.01 атрибутом type="text/javascript", хоча в більшості браузерів мова сценаріїв за умовчанням саме JavaScript. Скрипт, що виводить модальне вікно з класичним написом «Hello, World!» усередині браузера: <script type="text/javascript"> alert('Hello, World!'); </script> Слідуючи концепції інтеграції JavaScript в існуючі системи, браузери підтримують включення скрипта, наприклад, в значення атрибуту події: <a href="delete.php" onclick="return confirm ('Ви впевнені?');"> Видалити </a> Тут при натисненні на посилання функція confirm('Ви впевнені?'); викликає модальне вікно з написом «Ви впевнені?», а return false; блокує перехід за посиланням. Зрозуміло, цей код працюватиме тільки якщо в браузері є і включена підтримка JavaScript, інакше перехід за посиланням відбудеться без попередження. Є і третя можливість підключення JavaScript — написати скрипт в окремому файлі, а по тому підключити його за допомогою конструкції: <scripttype="text/javascript"src="http:// Шлях_до_файла_зі_скриптом"></script> При розробці великих і нетривіальних веб-застосунків з використанням JavaScript, критично важливим є доступ до інструментів зневадження. Оскільки браузери від різних виробників дещо відрізняються у поведінці JavaScript і реалізації Об'єктної Моделі Документа, треба мати в руках зневаджувач для кожного браузера, якщо веб-застосування орієнтовано на нього. На данний час Internet Explorer, Firefox, Opera, Google Chrome та Safari мають зневаджувачі для себе. Internet Explorer має три : Microsoft Visual Studio є найпотужнішим з цих трьох, слідом йде Microsoft Script Editor (компонента Microsoft Officeі нарешті існує безплатний Microsoft Script Debugger з базовими функціями. Веб-застосування для Firefox допоможе привести до ума додаток Firebug (зручно вбудований безпосередньо в браузер), або давніший відладчик Venkman, котрий також працює з браузером Також існують кілька інструментів, як вільних, наприклад JSLint інструмент перевірки якості коду, що сканує JavaScript програму, шукаючи проблеми коду, так і комерційних продуктів типу інструменту з назвою JavaScript Debugger. Оскільки JavaScript є інтерпретатором, без строгої типизації, і може виконуватися в різних середовищах, кожне зі своїми власними особливостями сумісності, програміст має бути дуже уважним, і повинен перевіряти, що його код виконується як очікується в широкому переліку можливих конфігурацій. Дуже часто трапляються випадки, коли скріпт, що чудово працює в одному середовищі, видає некоректні результати в іншому. Кожен блок сценарію інтерпретатор розбирає окремо. На веб-сторінках, коли треба комбінувати блоки JavaScript та HTML, синтаксичні помилки найти легше, якщо тримати функції сценарію в окремому блоці коду, або (ще краще) використовувати багато малих пов'язаних .js файлів. В такий спосіб синтаксична помилка не спричинятиме «падіння» цілої сторінки, і можна надати допомогу, елегантно вийшовши зі сторінки. CSS Каскадні таблиці стилів (англ. Cascading Style Sheets або скорочено CSS) — спеціальна мова, що використовується для відображення сторінок, написаних мовами розмітки даних. Найбільш часто CSS використовують для візуальної презентації сторінок, написаних HTML та XHTML, але формат CSS може застосовуватися до інших видів XML-документів. Специфікації CSS були створені та розвиваються Консорціумом Всесвітньої павутини. CSS має різні рівні та профілі. Наступний рівень CSS створюється на основі попередніх, додаючи нову функціональність або розширюючи вже існуючи функції. Рівні позначаються як CSS1, CSS2 та CSS3. Профілі — сукупність правил CSS одного або більше рівнів створені для окремих типів пристроїв або інтерфейсів. Наприклад, існують профілі CSS для принтерів, мобільних пристроїв тощо. CSS (каскадна або блочна верстка) прийшла на заміну табличній верстці веб-сторінок. Головна перевага блочної верстки — розділення змісту сторінки (даних) та їх візуальної презентації. CSS використовується авторами та відвідувачами веб-сторінок для того щоб визначити кольори, шрифти, верстку та інші аспекти вигляду сторінки. Одна з головних переваг — можливість розділити зміст сторінки (або контент, наповнення, зазвичай HTML, XML або подібна мова розмітки) від вигляду документу (що описується в CSS). Таке розділення може покращити сприйняття та доступність контенту, забезпечити більшу гнучкість та контроль за відображенням контенту в різних умовах, зробити контент більш структурованим та простим, прибрати повтори та ін. CSS також дозволяє адаптувати контент до різних умов відображення (на екрані монітора, мобільного пристрою (КПК), у роздрукованому вигляді, на екрані телевізора, пристроях з підтримкою шрифту Брайля або голосових броузерах та ін.) Один і той же HTML або XML документ може бути відображенний по-різному в залежності від використаного CSS. Стилі для відображення сторінки можуть бути: Стилі автора (інформація надана автором сторінки): - зовнішні таблиці стилів (англ. stylesheet), частіше за все окремий файл або файли .css - внутрішні таблиці стилів, включені як частина документу або блоку - стилі для окремого елементу Стилі користувача: - локальний .css-файл, вказаний користувачем для використання на сторінах і вказаний в налаштуваннях броузера (наприклад Opera) Стилі переглядача (броузера): - стандартний стиль переглядача, наприклад стандартні стилі для елементів, визначені броузером, використовуються коли ннемає інформації про стиль елемента або вона неповна. Стандарт CSS визначає порядок та діапазон застосування стилів, те, в якій послідовності і для яких елементів застосовуються стилі. Таким чином використовується принцип каскадності, коли для елементів вказується лише та інформація про стилі, що змінилася або не визначена більш загальними стилями. Переваги: - інформація про стиль для цілого сайту або його частин може міститися в одному .css-файлі, що дозволяє швидко робити зміни в дизайні та презентації сторінок; - різна інформація про стилі для різних типів користувачів: наприклад великий розмір шрифту для користувачів з послабленим зором, стилі для виводу сторінки на принтер, стиль для мобільних пристроїв; - сторінки зменшуються в об'ємі та стають більш структурованими, за рахунок того що інформація про стилі відділена від тексту та має певні правила застосування і сторінка побудована з їх урахуванням; - прискорення завантаження сторінок і зменшення обсягів інформації, що передається, навантаження на сервер та канал передачі. Досягається за рахунок того, що сучасні браузери здатні кешувати (запам'ятовувати) інформацію про стилі і використовувати для всіх сторінок, а не завантажувати для кожної.