Опис інформаційного забезпечення системи для розробки сайту

Вступ

Інтернет - всесвітня система взаємосполучених комп'ютерних мереж, що базуються на комплекті Інтернет-протоколів. Інтернет також називають мережею мереж. Інтернет складається з мільйонів локальних і глобальних приватних, публічних, академічних, ділових і урядових мереж, пов'язаних між собою з використанням різноманітних дротових, оптичних і бездротових технологій. Інтернет становить фізичну основу для розміщення величезної кількості інформаційних ресурсів і послуг, таких як взаємопов'язані гіпертекстові документи Всесвітньої павутини (World Wide Web - WWW) та електронна пошта.

В повсякденній мові слово Інтернет найчастіше вживається в значенні Всесвітньої павутини і доступної в ній інформації, а не у значенні самої фізичної мережі. Також вживаються терміни Всесвітня мережа, Глобальна мережа чи навіть одне слово Мережа, Іне́т, Тенета, Міжмережжя, Інтерне́трі або Не́трі. Все частіше Інтернет вживається і з малої літери, що можна пояснити паралелями з термінами "радіо", "телебачення", які пишуть з малої.

Історія Інтернету сягає досліджень 1960-х років, які проводилися на замовлення уряду США і мали на меті створення надійних розподілених комп'ютерних мереж, стійких до пошкоджень. Попередницею Інтернету стала мережа ARPANET (англ. Advanced Research Projects Agency Network), яка почавши функціонувати в кінці 1960-х, в кінці 1970-х об'єднувала близько 200 вузлів.

Урядове фінансування магістральної мережі Національного наукового фонду США в 1980-х, а також приватне фінансування для інших комерційних магістральних мереж в усьому світі призвело до участі в розробці нових мережевих технологій і злиття багатьох мереж.

Комерціалізація в 1990-х міжнародної мережі привела до її популяризації та впровадження в практично кожен аспект сучасного життя людини. З 2011 року більше 2,1 мільярда людей користуються послугами Інтернету.

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

Загальний розділ

Опис інформаційного забезпечення системи для розробки сайту

На початковому етапі свого розвитку портал розваг " 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-документі повинні бути присутніми три головних частини:

a) Оголошення HTML;

b) Заголовок;

c) Тіло документа.

Оголошення HTML

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

<HTML>

</HTML>

Заголовна частина.

<HEAD> і </HEAD>. Між цими тегами розташовується інформація про документ (назва, ключові слова для пошуку, опис і т.д.). Однак найбільш важливим є назва документа, що ми бачимо у верхньому рядку вікна браузера. Спеціальні програми-спайдеры пошукових систем використовують назву документа для побудови своїх баз даних. Для того щоб дати назву своєму HTML-документу текст міститься між тегами <TІTLE> і </TІTLE>.

<HTML>

<HEAD>

<TІTLE>Моя перша сторінка</TІTLE>

</HEAD>

</HTML>

Тіло документа.

Третьою головною частиною документа є його тіло. Воно випливає відразу за заголовком і знаходиться між тегами <BODY> і </BODY>. Перший з них повинний стояти відразу після тега </HEAD>, а другий - перед тегом </HTML>. Тіло HTML-документа - це місце, куди автор поміщає інформацію, отформатовану засобами 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 - написати скрипт в окремому файлі, а по тому підключити його за допомогою конструкції:

<script type="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-файлі, що дозволяє швидко робити зміни в дизайні та презентації сторінок;

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

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

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

Спеціальний розділ

Постановка задачі

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

Головні вимоги:

чіткий план викладу матеріалу

логічна послідовність висновків

стилістична єдність тексту

відсутність штампів, "побитих" виразів

відсутність тавтології - частого повторення одних і тих же слів

легкість і читабельність

наявність ключових слів в тексті

поділ тексту на абзаци

смислові виділення курсивом і жирним шрифтом

серйозно і продумано складений перший абзац тексту

мінімум складносурядних і складнопідрядних пропозицій - розмір до 4000-5000 знаків без пробілів

Обгрунтуємо кілька вимог, наприклад, останнє - розмір тексту. Оптимальний розмір статті для веб-близько 2500-3000 знаків без пробілів - це трохи більше листа а4, написаного 14 шрифтом. Стаття такого розміру, якщо вона буде написана цікаво, читається дуже легко, можна сказати "в літ". Але, ось більший обсяг вже читати важче.

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

Наши рекомендации