Дизайн
27.01.2011
HTML 5 – Бъдещето вече е тук

Имало едно време HTML 1 или както му викали тогава - просто HTML (Hyper Text Markup Language). Основната цел при измислянето му билa, да се създаде и ползва език, който да форматира текстовите уеб страници на компютърният  екран. Огромните благодарностите за измислянето на HTML отправяме към, Sir Timothy  John "Tim" Berners-Lee.

Всичко свързано с интернет, както и самият интернет се развива главоломно. От език с 20 описателни тага през последните 15 години, стигнахме от HTML2 до HTML5, не очаквахте да стане толкова бързо, нали? *

Огромният въпрос, който ни човърка е „Какво ново, как най-ползотворно и правилно да използваме HTML5 ?“.

HTML и Web стандартите на W3C

Доста обширен въпрос, въпреки това ще си позволя да го съкратя с около 50%, а може и повече. Основният повод за това е, че HTML5 дефинира синтаксис, който е съвместим с вече съществуващите HTML4 и XHTML документи. Това което отличава HTML5 е, че спира да подържа SGML (Standard Generalized Markup Language).

В следствие, на гореспоменатото една порция HTML може да бъде поднесена по два начина:

Изполвайки html синтаксис:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>

Използвайки xml синтаксис:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>

За да не си играете на „открий 10-те разлики“ първото парче код дефинира <!doctype html> и <meta charset="UTF-8"> и както ни съветват от w3c трябва да го ползваме, когато целим резултата да е text/html. Когато искаме да изпратим application/xhtml+xml трябва да ползваме xml синтаксиса.

Стига толкова стандарти и синтаксиси, да видим какво наистина ново има…

HTML5 промени и новости

Без да пледирам за изчерпателност **, ще прегледам по-интересните промени и новости, които идват с HTML5.

Елемента <canvas>

„Нарисувай ми овца“ – почти с подобно обръщение ще се обръщаме към този нов елемент в HTML5. Чрез него, могат да се изобразяват векторни графики (подобно flash), да се анимират изображения и картинки както и дори дава възможност за правене на игри. Цялото нещo е базирано на JavaScript, а реалните му приложения са необятни.
Разгледайте http://html5games.com . Най-добра производителност при игрите показа Google Chrome, така че пробвайте html5 игрите с него.

Тук можете да видите малка демонстрация, която съм приготвил специално за вас.

Tаговете <video> и <audio> и

В зората на html когато съществувал дебат за въвеждането на нов таг <img>, един от участниците в опозиция за въвеждането на новият таг написал:

„My objection was to the discussion of “how are we going to support embedded images” rather than “how are we going to support embedded objections in various media”. Otherwise, next week someone is going to suggest ‘lets put in a new tag ‘ for audio <AUD SRC="file://foobar.com/foo/bar/blargh.snd">.“

Седемнайсет години по-късно, се оказва, че не е бил толкова далече от истината.
HTML5 предлага вграждане на видео и аудио без нуждата от допълнителни приложения от трети страни т.е. плъгини. Това е чудесно, стига само да се постигне ситуация, в която поне един формат и енкодинг да бъде възпроизвеждан от всички браузери. За момента разполагаме с .ogg, .mp3, .wav при аудио файловете, и  при видео файловете. Повече информация за това кое, как и къде върви можете да намерите тук:
http://en.wikipedia.org/wiki/HTML5_video#Table

Бърз пример, който преминава към flash при липса на подръжка на html5 видео тага от страна на браузера:

(видеото е предоставено от Google и е с тема Google Analytics Interface Tutorial)

Web storage - повече място, повече възможности

HTML5 носи със себе си възможност уеб сайтовете да записват информация при потребителя. Ако ви звучи познато и на ум ви идва думата „бисквитка (cookies), то сте на прав път или пък сте гладни.
Концепцията на новата технология е същата, място за съхраняване на информация, която по-късно да можем да ползваме. Основната разлика е че cookies са за  сравнително малък ограничен размер, и се викат всеки път когато заредим една страница, което пилее ценният ни трафик.
Web storage предлага много място – 5mb за записване на информация в тип ключ/стойност, съхранено при клиента. Тази информация се запазва след refresh на страницата и за разликата от „бисквитките“, не се предава към сървъра.

Нови типове за елемента input

Input елементите се облагодетелстват с нови атрибути за тип: datetime , datetime-local, date, month, week, time, number, range, email, url и др. Целта на занятието, както може би се досещате е по-добра и по-висока ползваемост oт потребителите. Според типа на данни, към даденото input поле ще ви излизат например: календар за избор на дата, палитра за избор на цвят, слайдер за избор на числова стойност, валидация за формат на email, максимална и минимална стойност и тн. Това ще свали един товар по-малко от плещите, на JavaScript , което ще улесни и разработчиците и съответно означава по-широко приложение из сайтовете.

Друга полезна добавка от HTML5 са placeholder-ите. Това са текстовете, които стоят в дадено поле с цел описание и пояснение, какво трябва да въведем. При клик, когато фокуса попадне върху полето този текст се скрива, и ние можем да въведем желаната информация.

<input name="name" placeholder="Моля, въведете Име и Фамилия">

Офлайн сайтове и приложения

Една от най-интересни функционалност предлагани от HTML5 е офлайн режима на работа. Идеята е следната. Потребителя посещава нашият сайт, разглежда дадени страници, извърша действие. Сайта съхранява дадената информация, и в същото време прави копие на страницата, на компютъра на потребителя – кешира страницата. Когато потребителя, се опита да достъпи страницата, в момент в който не свързан с глобалната мрежа, браузъра ще зареди сайта от локалното копие. Потребителя отново ще може да извърши действията и да използва и променя вече съхранената информация, след което когато се свърже чрез интернет и посети отново даденият сайт, неговото локално копие ще изпрати и синхронизира информацият.

Това е доста напредничава идея, която със сигурност ще намери доста приложения, при различни уеб апликации и сайтове.

HTML5 чисто нови неупотребявани тагове

Освен тези, които споменах от нетърпение в предишната точка, с HTML5 идват още куп интересни нови тагове:
•  section – представлява документ или секция от апликация. Може да бъде използван заедно с h1-h6 за да покаже структурата на документа
•  article – представлява  независим откъс от съдържание на документа, например като страничните колонки в вестник, кутийка с последни или най-нови материали в блог и тн.
•  aside – представлява парче от съдържание, което има слаба свързаност с останалото съдържание на страницата.
•  header – представлява хедъра на страницата или секцията.
•  footer – представлява футъра на страницата или секцията и може да съдържа информация за автора, авторски права, права на ползване и тн.
•  nav - представялва част от документа предназначена за навигацията (менюта, таблица на съдържанието и др.)
•  dialog – предназначен за маркиране на диалог:

<dialog>
<dt> Добър ден.
<dd> Здравейте.
<dt> Може ли да ви зададем няколко въпроса ?
<dd> Да, разбира се ще се радвам да ви отговоря.
<dt> Искаме да разберем, какво е вашето мнение и как ще коментирате глобалното затопляне и миграцията на пингвините ?
<dd> Чудесен въпрос, за съжаление времето напредна и трябва да бързам за зъболекар. Така, че довиждане.
<dt> Но, вие не отго…
<dd> Благодаря за интервюто, довиждане.
<dt> Довиждане, … и „благодаря“ за интервюто.
</dialog>


 

HTML5 по-динамичен от всякога

Спокойно можем да кажем, че HTML5 притежава неща, за които преди само сме си мечтали. Цялата логика за валидация на полета за форми, canvas елемент способен на всичко и най-важното навсякъде, видео и аудио без допълнителни плъгини, уеб сторидж, уебсайтове като офлайн приложения, гео локация и тн.
Всичко това, преплетено с презентационните способности на CSS3 определено бележи, началото на нова поколение сайтове и уеб приложения. Единствената бариера, която трябва да бъде счупена е поддръжката на HTML5 и CSS3 от всички браузъри и докато това се случи изцяло, ще е добре да използваме алтернативни варианти за „старомодните“ браузъри.
За да разберете дали вашият браузър попада в лигата на готините браузъри – посетете http://html5test.com

Modernizr
http://www.modernizr.com е JavaScript библиотека, която ви дава възможност да използвате css3 и html5 и да засечете, кога даден браузър не подържа използваните от вас техника, като в тези случаи да подготвите алтернативно представяне.

„HTML5 служи за улеснение, за стандартизиране и за един по-красив и подреден интернет.“

Calipers подкрепя прилагането на HTML5 и CSS3 като нужно подобрение за старите сайтове и задължителна употреба в новите. В Calipers винаги следваме стандартите и следим иновациите от близко. Ако желаете вашите потребители да се възползват от удобствата предлагани в новите браузъри и искате да направим нов или реконструираме настоящ проект, свържете се с нас за да изпълним вашите нужди.

Бележки:

* Винаги има по-любопитни и по-малко любопитни хора… за по-любопитните, които искат да разберат какво точно е станало със HTML през годините - хронология на http://www.w3.org/html/wg/wiki/History. А за тези, които са любопитни, но не чак толкова, ето историята в едно изречение: Преди много години през 1991 се появил HTML, през 1994 идва HTML2, през 1996 идват CSS1 + JavaScript, през 1997 – HTML4, през 1998 – CSS2,  2000 с XHTML, 2005 със AJAX  и ето ни ни в наши дни със HTML5 и CSS3.

** Най-пълният източник на информация е относно новостите и промените по HTML5 е документацията в w3c за това, ако искате да се запознаете в основи със всички нови тагове и добавки вижте тези два сайта:
http://www.w3.org/TR/2008/WD-html5-diff-20080122/
http://diveintohtml5.org


***  Всички от създателите на браузъри имат интерес и ще се борят за любовта на потребителите.За това и ни предлагат коя, от коя по-интересни демонстрации на HTML5 и CSS3:

http://ie.microsoft.com/testdrive/
http://hacks.mozilla.org/category/demo/featured-demo/
http://www.chromeexperiments.com/
http://developer.apple.com/safaridemos/

Вашата оценка:

Достигнат рейтинг: / 5. Гласувания: