МОЖЛИВОСТІ ПЛАТФОРМИHTML5
Пензенський державний університет
Анотація. У статті описані сучасні технології для створення WEB сайтів. Розглянуто переваги сучасної платформи HTML5. Наведено листинги програм зі створення слайдера. Слайдер часто використовується на комерційних сайтах і дозволяє розміщувати велику кількість інформації на невеликій ділянці екрана.
Сучасні WEB-сайти стають все більш складними і все більш перевантажуються логікою. Раніше продуктивність таких додатків визначалася, в основному, швидкістю роботи того чи іншого SQL-сервера і тим, чи існує для нього досить ефективна реалізація драйвера доступу до SQL-сервера для вибраної мови програмування. Це пояснюється тим, що перше покоління WEB-сайтів просто читало і писало інформацію в бази даних. Користувачів при цьому було відносно небагато. Таким чином, час на відпрацювання SQL-запиту становило 70-90% від загального часу обробки HTTP-запиту.
З підвищенням вимог до масштабованості (збільшення кількості користувачів) і нарощуванням логіки додатка вимоги до мови програмування і середовища виконання істотно зростають. До цього слід додати, що відносно недавно WEB-сайти перейшли зі світу Інтернет в світ корпоративних додатків. Це знову підвищило вимоги до ефективності середовища виконання.
У HTML5 з'являється синтаксичні особливості. елементи
Семантика в HTML5 дає уявлення про структуру документа і дозволяє людям і програмами більш повно керувати даними. У HTML5 додано безліч семантичних тегів. HTML5 вводить ряд нових елементів, таких як
Веб-форми в HTML 5 дозволяють проробляти валідацію зручним способом. Зараз розробники користуються скриптами для валідації форм. Скоро можна буде забути про використання скриптів в WEB-формах. Так само є можливість стилізувати обов'язкове поле.
HTML5 AppCache дозволяє працювати сайту навіть при відсутності підключення до інтернету.
На WEB сторінках можна малювати використовуючи Canvas API. Canvas дуже просто освоїти, він дуже швидкий. За допомогою тега
CSS3 в інтеграції з HTML5 дозволяє управляти видом будь-яких елементів на сторінці, створювати будь-які ефекти без шкоди семантичної структури, продуктивності і без додаткових скриптів.
В CSS3 з'явилися нові елементи, такі як borger-radius, призначений для того, що б робити закруглені краї без використання картинок.
Сайт повинен бути адаптивним під різні дозволи екранів. Проблема в тому, що їх багато, вони різні і постійно з'являються нові.
За допомогою CSS3 Media Queries можна вирішити і цю проблему.
CSS3 Media Queries дозволяє більш точно адаптувати контент під розміри екрану, орієнтація пристрою, глибина кольору.
Сенс Media Queries в тому, що можна визначити, як розміщувати контент, який контент показувати, а який ні. Наприклад, якщо екран маленький, то потрібно перегрупувати всі елементи так, щоб вони вміщалися в маленький екран, якщо великий, то можна більш оптимально зайняти вільне місце.
Синтаксис Media Queries простий, дозвіл, ширина або висота екрану визначається за допомогою правила @media. А далі в залежності від ширину можна змінювати властивості елементів і навіть розмітку.
За допомогою елемента прозорості можна змінювати прозорість елементів.
Все більше і більше стають затребувані різні слайдери (рис.1). Вони можуть бути використані для створення портфоліо, демонстрації партнерів - і для багато чого іншого. Безумовно, використання їх, особливо на головній сторінці - або точніше на сторінці входу - найчастіше виправдано, так як дуже привертає увагу відвідувачів.
Принцип розробки схожий з розробкою модуля меню.
Файл mod_slider. php, керуючий файл для модуля містить уявлення інформації.
Файлу контролера не буде, т. К. Він необхідний для керує всім в цілому. А в цьому модулі управляти нічим, і обробляти нічого.
Файлу helper теж не буде, т. К. Комбінувати один файл безглуздо.
У файлі default. php (рис.2) відповідає за відображення.
У циклі починаючи, з 9 сходинці, розраховується ширина всіх картинок і підраховується їх кількість.
Далі все картинки поміщаються в список і виводяться модулем на сайті.
Що б змусити рухатися картинки використовуємо java script.
У 4-6 рядках підключаються ці скрипти. Перший скрипт підключає фреймворк mootools.
Другий скрипт підключає файл в якому буде описуватися власні класи цього ефекту.
Огляд файлу scrollbar. js представлений на рис.3.
Третій скрипт підключає безпосередньо ефект. Можна було два останніх файлу об'єднати, але для зручності управління ефектами краще розділити їх на два файли.
Огляд файлу scrollbarf. js представлений на рис.4.
Як видно з малюнка слайдера картинки в ньому чорно-білі, а при наведенні вони стають кольоровими. Це не дві різні картинки, а ефект який накладається на картинку.
Цей ефект досягається використанням java script і canvaus (елемент специфікації HTML5).
Огляд файлу з чорно білим ефектом представлений на рис.5.
Починаючи з 20 строчки накладається ефект відтінки сірого за допомогою canvas.
Таким чином, можна зробити наступний висновок, що використання сучасних технологій HTML5 дозволяє зробити сайт зручним, простим і презентабельним. Такий сайт буде однаково добре виглядати на будь-якому моніторі і в будь-якому браузері.