Возможности платформы HTML 5

В статье описаны современные технологии для создания WEB сайтов. Рассмотрены достоинства современной платформы HTML5. Приведены листинги программ по созданию слайдера. Слайдер часто используется на коммерческих сайтах и позволяет размещать большое количество информации на небольшом участке экрана.

слайдер сайт программа листинг Современные WEB-сайты становятся все более сложными и все более перегружаются логикой. Раньше производительность таких приложений определялась, в основном, скоростью работы того или иного SQL-сервера и тем, существует ли для него достаточно эффективная реализация драйвера доступа к SQL-серверу для выбранного языка программирования. Это объясняется тем, что первое поколение WEB-сайтов просто читало и писало информацию в базы данных. Пользователей при этом было относительно немного. Таким образом, время на отработку SQL-запроса составляло 70−90% от общего времени обработки HTTP-запроса.

С повышением требований к масштабируемости (увеличение количества пользователей) и наращиванием логики приложения требования к языку программирования и среде выполнения существенно возрастают. К этому следует добавить, что относительно недавно WEB-сайты перешли из мира Интернет в мир корпоративных приложений. Это снова повысило требования к эффективности среды выполнения.

HTML5 — это не продолжатель языка разметки гипертекста, а новая открытая платформа, предназначенная для создания веб-приложений использующих аудио, видео, графику, анимацию и многое другое.

HTML5 — это платформа, который включает в себя несколько стандартов, не только HTML5, но так же различные спецификации CSS3, веб-сокеты т.д. HTML5 не развивает какая-то одна компания, это тренд который поддерживают огромное количество компаний, прежде всего создателями браузеров. И уже завтра нам будет удивительно воспринимать мир без HTML5 как нам сегодня удивительно воспринимать мир без социальных сетей.

В HTML5 появляется синтаксические особенности. Элементы, и, а также возможность использования SVG. Эти новшества разработаны для упрощения внедрения и управления графическими и мультимедийными объектами в сети без необходимости обращения к собственным плагинам и API. Другие новые элементы, такие как, , и разработаны для того, чтобы обогащать семантическое содержимое документа (страницы), а также есть поддержка RDFa, микроформатов и микро данных.

HTML5 вводит новые элементы и атрибуты, которые отражают использование разметки на современных веб-сайтах. Некоторые из них — семантические замены для использования универсальных блочных () и строковых () элементов, например, (блок навигации по сайту), (обычно относится к нижней части страницы или последней строке HTML кода) или и вместо. Некоторые устаревшие элементы, которые можно было использовать в HTML 4.01, были исключены, включая чисто оформительские элементы, такие как и, чьи эффекты выполняются с помощью Каскадных таблиц стилей. Также в поведении веб снова заострено внимание на важности скриптов DOM (например, Javascript).

Семантика в HTML5 дает представление о структуре документа и позволяет людям и программам более полно управлять данными. В HTML5 добавлено множество семантических тегов. HTML5 вводит ряд новых элементов, таких как, ,, и. Есть также ряд элементов данных, таких как, который «представляет скалярное измерение в известном диапазоне или дробное значение, например, используемый объем диска» и элемент, который указывает дату и/или время.

Веб-формы в HTML 5 позволяют проделывать валидацию удобным способом. Сейчас разработчики пользуются скриптами для валидации форм. Скоро можно будет забыть про использование скриптов в WEB-формах. Так же есть возможность стилизовать обязательное поле.

Потребность воспроизводить аудио и видео в браузере без плагинов и расширений кажется все более и более естественной и востребованной т.к. не все мобильные устройства поддерживают flash. Работа с тегами и не сильно отличается от работы с картинками.

HTML5 AppCache позволяет работать сайту даже при отсутствии подключения к интернету.

На WEB страницах можно рисовать используя Canvas API. Canvas очень просто освоить, он очень быстрый. При помощи тега можно создавать рисунки, анимацию, игры, выводить текст. Так же можно создавать 3D графику. Canvas — это весело и доступно каждому.

CSS3 в интеграции с HTML5 позволяет управлять видом любых элементов на странице, создавать любые эффекты без ущерба семантической структуры, производительности и без дополнительных скриптов.

В CSS3 появились новые элементы, такие как borger-radius, предназначенный для того, что бы делать скруглённые края без использования картинок.

Можно накладывать несколько фоновых изображений, и делать их полупрозрачными. Есть возможность внедрять собственные шрифты. Можно при описания стиля указать font-famaly и указать адрес из которого браузер может загрузить шрифт и с помощью этого шрифта отобразить пользователю этот элемент.

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

С помощью CSS3 Media Queries можно решить и эту проблему.

CSS3 Media Queries позволяет более точно адаптировать контент под размеры экрана, ориентация устройства, глубина цвета.

Смысл Media Queries в том, что можно определить, как размещать контент, какой контент показывать, а какой нет. Например, если экран маленький, то нужно перегруппировать все элементы так, чтобы они умещались в маленький экран, если большой, то можно более оптимально занять доступное место.

Синтаксис Media Queries прост, разрешение, ширина или высота экрана определяется с помощью правила @media. А дальше в зависимости от ширину можно менять свойства элементов и даже разметку.

С помощью элемента прозрачности можно менять прозрачность элементов.

Всё больше и больше становятся востребованы различные слайдеры (рис.1). Они могут быть использованы для создания портфолио, демонстрации партнёров — и для многого другого. Безусловно, использование их, особенно на главной странице — или точнее на странице входа — чаще всего оправдано, так как очень привлекает внимание посетителей.

Рис. 1

Принцип разработки схож с разработкой модуля меню.

Файл mod_slider.php, управляющий файл для модуля содержит представление информации.

Файла контроллера не будет, т.к. он необходим для управляет всем в целом. А в этом модули управлять нечем, и обрабатывать нечего.

Файла helper тоже не будет, т.к. комбинировать один файл бессмысленно.

В файле default. php (рис.2) отвечает за отображение.

В цикле начиная, с 9 строчке, рассчитывается ширина всех картинок и подсчитывается их количество.

Далее все картинки помещаются в список и выводятся модулем на сайте.

Что бы заставить двигаться картинки используем java script.

В 4−6 строчках подключаются эти скрипты. Первый скрипт подключает фреймворк mootools.

MooTools является модульным, объектно-ориентированным фреймворком, созданным для помощи разработчикам JavaScript. MooTools содержит мощную коллекцию классов и продвинутую систему наследования, которая позволяет вторичное использование кода, а также его расширение.

Второй скрипт подключает файл в котором будет описываться собственные классы этого эффекта.

Рис. 2.

Обзор файла scrollbar. js представлен на рис. 3.

Рис. 3

Третий скрипт подключает непосредственно эффект. Можно было два последних файла объединить, но для удобства управления эффектами лучше разделить их на два файла.

Обзор файла scrollbarf. js представлен на рис. 4.

Рис. 4

Как видно из рисунка слайдера картинки в нём чёрно-белые, а при наведении они становятся цветными. Это не две разные картинки, а эффект который накладывается на картинку.

Этот эффект достигается использованием java script и canvaus (элемент спецификации HTML5).

Обзор файла с чёрно белым эффектом представлен на рис. 5.

Рис. 5

Начиная с 20 строчки накладывается эффект оттенка серого с помощью canvas.

Таким образом, можно сделать следующий вывод, что использование современных технологий HTML5 позволяет сделать сайт удобным, простым и презентабельным. Такой сайт будет одинаково хорошо смотреться на любом мониторе и в любом браузере.