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

Размещено на http://www.allbest.ru/

ВОЗМОЖНОСТИ ПЛАТФОРМЫ HTML5

к.т.н., доцент Бурукина И.П.

Пензенский государственный университет

Аннотация

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

слайдер сайт программа листинг

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

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

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

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

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

HTML5 вводит новые элементы и атрибуты, которые отражают использование разметки на современных веб-сайтах. Некоторые из них -- семантические замены для использования универсальных блочных (<div>) и строковых (<span>) элементов, например, <nav> (блок навигации по сайту), <footer> (обычно относится к нижней части страницы или последней строке HTML кода) или <audio> и <video> вместо <object>. Некоторые устаревшие элементы, которые можно было использовать в HTML 4.01, были исключены, включая чисто оформительские элементы, такие как <font> и <center>, чьи эффекты выполняются с помощью Каскадных таблиц стилей. Также в поведении веб снова заострено внимание на важности скриптов DOM (например, Javascript).

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

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

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

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

На WEB страницах можно рисовать используя Canvas API. Canvas очень просто освоить, он очень быстрый. При помощи тега <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 позволяет сделать сайт удобным, простым и презентабельным. Такой сайт будет одинаково хорошо смотреться на любом мониторе и в любом браузере.

Размещено на Allbest.ru