Розробка середовища для управління сайтами на основі HTML5

   На  початку 2004 року доробок був представлений  спільно Mozilla і Opera на розгляд W3C на робочому обговоренні майбутнього веб-застосунків. Пропозицію було відхилено через  суперечності з раніше обраним W3C напрямком еволюції Інтернету — XHTML.

   Невдовзі  після цього, Apple, Mozilla і Opera оголосили про свій намір спільно продовжити роботу. Було створено відкритий список розсилки, і проект було перенесено на сайт WHATWG. У авторське право була внесена поправка, що робота буде спільно належати всім трьом постачальникам, і допускатиме повторне використання специфікацій.

   У 2006 році W3C висловило зацікавленість у специфікації, а також створила робочу групу для роботи разом  із WHATWG над розробкою специфікації HTML5. Робоча група відкрита в 2007 році. Apple, Mozilla і Opera дозволили W3C опублікувати специфікацію під ліцензією W3C, зберігаючи при цьому версію з менш обмежувальною ліцензію на сайті WHATWG. З того часу обидві групи працюють разом.

   22 січня 2008 представлена чернетка  чергової, п'ятої версії мови гіпертекстової  розмітки HTML.

   Робота над HTML 5, що почалася в 2004 році, зараз доводиться до кінця спільними зусиллями W3С HTML WG і WHATWG. У розробці також беруть участь багато ключових фігур, включаючи представників найбільших розробників браузерів: Apple, Google, Microsoft, Mozilla і Opera; також інші організації й користувачі з різними інтересами і досвідом.

   У загальному з нової версії мови пропонується прибрати близько 15 тегів.

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

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

   Елементами header є заголовки розділів. Вони можуть складатися з декількох частин —  наприклад, було б виправдано розділяти  блок заголовка на підзаголовки, історію  версій або вказання авторства. Елемент footer визначає нижню частину розділу, до якого він відноситься. Зазвичай він містить інформацію про розділ — наприклад, ім'я автора, посилання на схожі документи, копірайт і тому подібне. Блок nav містить список посилань для навігації. Підходить, наприклад, для навігації по сайту, або для змісту. Елемент aside підходить для розміщення вмісту яким-небудь чином спорідненого основному контенту. У звичайному випадку буде корисний для розмітки бічної колонки. Тег section представляє загальний розділ документа або додатку, наприклад, такий як розділ. Тег article відзначає незалежний розділ документа, сторінки або сайту. Застосуємо для такого вмісту як новини, запису блога, повідомлення у форумі або коментарі користувачів.

   В HTML 5 для того щоб підключити до сторінки відео або аудіо-доріжку, достатньо  скористатись відповідними тегами.

   Такі  сайти як Youtube, Viddler, Revver, Myspace, і десятки  інших дозволяють будь-кому опублікувати своє відео або аудіо. Багато сайтів удаються до Flash, щоб забезпечити  потрібну функціональність, оскільки HTML 4.1 не вистачає засобів для вбудовування і управління мультимедіа. І, хоча такі можливості надають різноманітні плагіни (Quicktime, Windows Media тощо), в даний час Flash — це єдиний широко поширений плагін, який надає крос-браузерне рішення з відповідним API для розробників.

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

   Елементи video і audio легко дозволяють це зробити. Більшість API — загальні між цими елементами, з відмінностями лише відносно до visual і не-visual медіа. Всі сучасні браузери (окрім Internet Explorer) вже реалізували підтримку даних елементів. Найпростіший спосіб вбудувати відео — це використовувати тег video і дозволити браузеру відобразити інтерфейс за умовчанням. Булевий атрибут controls визначає чи включати за умовчанням цей користувацький інтерфейс.

   Необов'язковий  атрибут poster може використовуватися  для вказання зображення, яке буде відображатися до того як відео почне  програватися. Хоча є формати відео, що підтримують власний попередній перегляд (такі як Mpeg-4), цей спосіб — рішення, що дозволяє бути незалежним від відео-формату.

   Також просто підключити і аудіо — використовуючи елемент audio. Хоча по очевидних причинах у тега audio немає атрибутів height, width і poster, між video і audio більшість атрибутів спільні.

   У HTML 5 включений елемент source для вказівки альтернативних відео і аудіо  файлів, щоб браузер міг вибрати  той, який підходить до підтримуваного медіа-типу або кодеків. Атрибут media визначає вибір медіа-запиту, що базується на обмеженнях пристроїв, а атрибут type — можливості медіа-типів і кодеків. Коли використовується атрибут source, слід опускати src в елементах video (audio), інакше source буде проігнорований. 
 

 

2. Вибір технологій розробки

 
 

1. Мова  програмування

 
 

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

   Синтаксис PHP подібний синтаксису мови Сі. Деякі  елементи, такі як асоціативні масиви і цикл foreach, запозичені з Perl.

   Для роботи програми не потрібно описувати  будь-які змінні, використовувані  модулі і т. п. Будь-яка програма може починатися безпосередньо з оператора PHP.

   Найпростіша програма Hello world на PHP виглядає наступним чином: 

<?php

     echo 'Hello, world!';

?> 

   PHP виконує код, що знаходиться  всередині обмежувачів, таких  як <? php?>. Все, що знаходиться  поза обмежувачів, виводиться  без змін. В основному це використовується  для вставки PHP-коду в HTML-документ, наприклад, так: 
 
 

<html>

<head>

<title>Тестируем PHP</title>

     </head>

     <body>

     <?php echo 'Hello, world!'; ?>

     </body>

</html> 

   Крім обмежувачів <? php?>, допускається використання додаткових варіантів, таких як <? ?> і <script language="php"> </ script>. Крім того, до версії 6.0 допускається використання обмежувачів мови програмування ASP <%%> (конструкції <??> та <%%> можуть бути вимкнені в конфігураційному файлі php.ini).

   Імена змінних починаються з символу $, тип змінної оголошувати не потрібно. Імена змінних, функцій і класів чутливі до регістру. Константи також чутливі до регістру. Змінні обробляються в рядках, взятих в апострофи або подвійні лапки, і heredoc-рядках (рядках, створених за допомогою оператора <<<).

   PHP розглядає перехід на новий  рядок як пробіл, так само як HTML та інші мови з вільним форматом. Інструкції поділяються за допомогою крапки з комою (;), за винятком деяких випадків, після оголошення конструкції if / else і циклів. 
 
 
 
 
 
 

   2.2 Система керування базами даних 
 

   В якості системи керування базами даних буде використовуватися MySQL.

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

   MySQL — компактний багатонитковий сервер баз даних. Характеризується великою швидкістю, стійкістю і простотою використання.

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

   Для некомерційного використання MySQL є безкоштовним. 
 

2.3 JavaScript фреймворк 
 

   В якості JavaScript фреймворку буде використовуватися jQuery. Основними перевагами jQuery являються: легковажність у порівнянні з іншими JavaScript фреймворками; наявність великої кількості плагінів, що реалізують різні можливості; розвинуте суспільство розробників. 
 
 

2.4 WYSIWYG редактор 
 

   В якості WYSIWYG редактору буде використовуватися CKEditor.

   CKEditor (раніше FCKeditor) є WYSIWYG редактором з відкритим вихідним кодом, розроблений CKSource, який можна використовувати у веб-сторінках. Основними перевагами являються легковажність та відсутність необхідності встановлення на стороні клієнта. Перша версія була випущена у 2003 році.

   Основний  код редактора написаний на JavaScript. Є серверні інтерфейси з Active-FoxPro, ASP, ASP.NET, ColdFusion, Java, JavaScript, Lasso, Perl, PHP і Python.

   CKEditor сумісна з більшістю інтернет-браузерів,  в тому числі: Internet Explorer 6.0 + (Windows), Firefox 2.0 +, Safari 3.0 +, Google Chrome (Windows), Opera 9.50 +, і Camino 1.0 + (Apple). 
 

 

3. Опис роботи 
 

3.1 Абстрактна модель  програми 
 

   Розроблювальна CMS буде складатися з двох частин: frontend (сам веб-сайт) і backend (панель адміністрування). Frontend буде видавати веб-сторінки, які будуть складатися з даних, що задаються через backend. Кожна сторінка буде мати свій вміст, яке буде вставлятися в загальний макет сторінки. Навігація буде реалізована за допомогою однорівневого меню, кожен елемент якого буде посилатися або на наявну в системі сторінку, або на конкретний URL. Кожна сторінка буде мати свою власну адресу.  
 

3.2 Проектування бази  даних 
 

   Таблиця settings призначена для зберігання налаштувань сайту

   Структура таблиці settings (Таблиця 1):

   name - унікальний ідентифікатор настройки

   value - значення настройки

Таблиця 1

Структура таблиці settings

 
 
 

   Таблиця pages призначена для зберігання інформації про користувальницькі сторінки (доданих вручну)

   Структура таблиці pages (Таблиця 2):

   id - ідентифікатор сторінки

   url - унікальний адреса сторінки (права частина url, що йде після імені хоста, наприклад в URL 'http://example.com/custom' шуканим фрагментом являється 'custom')

   content - вміст сторінки, що буде відображатися в розділі вмісту сторінки 

Таблиця 2

Структура таблиці pages

 
 
 

   Таблиця menu призначена для зберігання інформації про меню сайту

   Структура таблиці menu (Таблиця 3):

   id - ідентифікатор елемента меню