HTML 5: п'ять речей викликають особливий інтерес

HTML 5 – це прийдешнє оновлення гіпертекстового мови розмітки, основного способу створення контенту для розміщення його у всесвітній павутині. Розробка HTML зупинилася в 1999 році, на версії HTML 4.01 і з тих пір web-вміст змінилося так, що поточні специфікації HTML перестали відповідати сьогоднішнім вимогам.

HTML 5 націлений на те, щоб збільшити функціональну сумісність HTML і відповідати зростаючим вимогам різноманітного і змішаного web-контенту. HTML 5 так само націлений на усунення недоліків четвертої версії. У цій статті ми поглянемо на 5 нових цікавих речей в HTML 5.

Це стаття нашого гостя Jacob Gube, web-розробника і дизайнера, автора Six Revisions – блогу про web-розробці і дизайні.

Трохи історії


Абстрактні міркування про HTML 5 почалися в кінці 2003 року. World Wide Web Consortium (W3C), організація, яка спостерігає за стандартами протоколів і рекомендацій у web, висловила інтерес до чернетки HTML 5 розробленому Web Hypertext Application Technology Working Group (WHATWG), групою сформованої в 2004 році з представників Apple, Mozilla Foundation та Opera Software. У результаті, в 2007 році, для розробки специфікацій HTML 5, була сформована W3C HTML Working Group.

Розробка йде і очікується, що HTML 5 досягне статусу W3C Candidate Recommendation в 2012 році, хоча більшість сучасних браузерів вже зараз мають часткову підтримку специфікацій HTML 5.


Нові збуджуючі інтерес функції


1. Нові HTML-елементи, які дозволять нам краще описувати вміст

Первинне завдання HTML полягає в тому, щоб описувати структуру web-сторінки. Для прикладу, текст, укладений між елементами <p> </ p> говорить браузеру про те, що текст між цими елементами – Це абзац.


Різноманітний web-контент все більше виходить за рамки можливостей HTML 4 акуратно описувати вміст web-сторінок. Потокове відео й аудіо – характерний приклад. Такі частини web-сайтів, як меню навігації і торгові марки (зазвичай розташовані у заголовку) присутні на більшості web-сторінок. Що більш важливо, всупереч поточним специфікаціям HTML, покращення в JavaScript, Flash і технологіях на стороні сервера сприяють поширенню насичених інтернет-додатків (rich Internet applications), чуйних, націлених на користувача, заснованих на браузері додатків.

Додаючи безліч HTML-елементів, HTML 5 ставить за мету дати розробникам кращий і більш точний спосіб опису даних.

Для прикладу наведемо те, як, згідно з поточними специфікаціям HTML, ми описали б структуру типової web-сторінки:


Проблема такого варіанту розмітки полягає в тому, що для браузера всі елементи – це <div>-елементи. Браузер обробляє все всередині <div>-елементів однаково, оскільки не бачить різниці між блоками, а класи та ідентифікатори начебто content, sidebar і footer різні від сайту до сайту.

У HTML 5 ви можете описати розмітку тієї ж самої сторінки по-іншому:


У цій розмітці браузеру відомо призначення кожної з частин. Він знає, що основний вміст сторінки знаходиться всередині елемента <article>, що навігація web-сайту знаходиться всередині елемента <nav> і так далі.

Практичне використання не закінчується на привабливо виглядає і більше семантичної розмітки. Ці нововведення збільшують функціональну сумісність нашої розмітки. Для прикладу, зовнішня система, така як пошуковий бот, може більш точно визначати який контент на web-сторінці більш важливий. Ці системи можуть пропускати обробку елементів <nav> і <footer> тому що такі елементи, швидше за все не містять важливий контент на сторінках. Отже, правильно оформлений документ HTML 5 дозволить пошуковим системам краще розуміти його вміст.

Хитрий розробник може створити додаток, що збирає одні тільки секції <article> на групі web-сайтів для збереження в базу даних або, скажімо, генерує список всього відео на сторінці, знаходячи всі елементи <video>.

Програмне забезпечення, яке дозволяє читати текст для людей з ослабленим зором, дозволить користувачам швидше переходити в секції основного вмісту. Вони зможуть перейти безпосередньо до елемента <article>, якщо захочуть читати головне вміст на web-сторінці або перейти безпосередньо до елемента <nav>, якщо захочуть перейти на іншу сторінку.


2. Покращена робота з web-формами


У наші дні важко обійтися без форм на web-сайтах. Ви стикаєтеся з ними, коли відправляєте коментар в блозі, реєструєте обліковий запис користувача або відправляєте пошту в Gmail. HTML 5 пропонує специфікації, названі Web Forms 2.0, що включають переосмислення того як web-форми повинні використовуватися. Вони надають web-розробникам безліч опцій і нових функцій для ефективного і простого управління полями введення і відправкою форми.

Одна з найбільш вражаючих речей в Web Forms 2.0 – це валідація. В даний час розробникам потрібно використовувати код JavaScript (на стороні клієнта) або PHP (на серверній стороні) щоб зробити валідацію введення. Для прикладу, багато web-форми містять обов'язкові до заповнення поля (скажімо, для полів імені користувача або email):



У HTML 4, розмітка для такої форми могла б виглядати таким чином:


В даний час, ви повинні використовувати скрипти для валідації користувальницького введення. У цьому прикладі розробник повинен написати свій власний код валідації (або використовувати створений раніше, на зразок цього) щоб переконатися, що обов'язкові поля випадково не були заповнені або що вказаний email вказаний правильно (зазвичай це робиться через перевірку регулярними виразами).

Для того щоб дозволити авторові обробляти сторінку без скриптів валідації, HTML 5 (з поточними специфікаціями Web 2.0) надає нам додаткові атрибути, такі як "required" і "email", які автоматично перевіряють чи заповнені поля і чи правильно заповнено поле email.


3. API для більш простої розробки web-додатків


HTML 5 представить кілька API для нових і наявних елементів, націлених на поліпшення розробки web-додатків і призначених для усунення недоліків HTML 4 в плані можливостей для розробників створювати розмітку для їх web-додатків.

Один з таких API спеціально створений для роботи з аудіо і відео через використання елементів <audio> і <video>. Цей API надає можливість програвання аудіо і відео і усуває необхідність використовувати сторонні програми, такі як Flash, для того щоб відображати медіа (принаймні для підтримуваних медіа-файлів).

                                          


4. Елемент <canvas> дозволяє змінювати зображення на льоту

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


Мінус зображень в тому, що вони статичні. Якщо ви створили кругову діаграму традиційним способом (через редактор зображень типу Photoshop або додаток типу Excel), то у вас не буде можливості змінювати дані без ручного редагування вашої графіки.

З елементом <canvas>; ви можете брати змінювані дані (з бази даних) і застосовувати їх на кругову діаграму, чи будь-яке інше 2D-відображення, через скрипти.

API canvas так само дозволяє користувачам взаємодіяти з елементами <canvas>. Наприклад, ви можете написати скрипт, який реагує на клік користувача на одну з частин кругової діаграми.


5. Користувачі можуть редагувати і взаємодіяти з секціями web-сторінки


Секція User Interaction в HTML 5 описує нові шляхи створення інтерактивних web-сторінок. Атрибут "contenteditable" (логічний атрибут, який може приймати значення true або false) дозволяє вам відзначати які частини веб-сторінки користувачі можуть змінювати.

Цей механізм може бути корисним для wiki-style web-сайтів, в яких контент генерується користувачами. Іншим варіантом використання атрибуту contenteditable може бути створення шаблонів web-сторінок. Це дозволить надати користувачам вашого web-сайту, не знайомим з HTML, зручну можливість вводити вміст безпечно, без зачіпання критичних місць на сторінці, які повинні заповнюватися більш компетентними користувачами.

На рівні документу ви можете вказати ознаку сторінки, що дозволяє редагувати контент, через атрибут designMode, який приймає два значення: "on" або "off".


У підсумку


Передбачається, що специфікації досягнуть статусу W3C Candidate Recommendation в 2012 році, але це не означає, що ви повинні будете чекати так довго, для того, щоб почати використовувати якісь нові речі HTML 5. Більшість сучасних браузерів, наприклад, вже мають реалізацію елемента <canvas> (влкючая Mozilla Firefox, в якій він частково реалізований з версії 1.5).

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

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


Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*