4. Багаторазове збільшення швидкості роботи

Складно уявити сучасні веб- сайти без великого числа інтерактивних форм , відео та аудіо вставок , анімованих графічних елементів і різного роду оживляючих веб- сайт програм - скриптів. Звичайно , потужності сучасних обчислювальних машин цілком вистачає , щоб обробляти таку величезну кількість елементів веб -сторінки , але Інтернет технології не стоять на місці , і чим більше буде розвиватися візуалізація , інтерактивність і якість медіа -інформації , тим вище будуть вимоги до «заліза » користувача .

Звичайно ж , проектувальники HTML5 не могли обійти цю проблему стороною. Новий стандарт забезпечує підтримку багатопоточності , яку іменували як Web Works . Таким чином , сучасні багатоядерні системи отримують можливість паралельно виконувати обробку скриптів і тим самим збільшити швидкість роботи сайту на кілька порядків залежно від його конструкції і складності.

5. Технологія Web Storage

Користувачі комфортно працюють з тими сайтами , які здатні зберігати зміни в налаштуваннях , наприклад для зовнішнього вигляду робочого простору. Для того , щоб зберегти яку інформацію про дії користувача сайт зазвичай користується технологією cookies , яка дозволяє зберігати на комп'ютері відвідувача текстовий файл зі своїми даними .

Технологія Web Storage для HTML5 затьмарить cookies своїми можливостями тільки тому , що представляє з себе не форматно обмежений текстовий файл , а спеціально орієнтовану базу даних для різних видів інформації. Тепер в такій базі сайт може зберігати не тільки окремі настройки сайту , а цілі фрагменти його коду , що дозволить працювати з веб -додатками навіть за відсутності підключення до мережі Інтернет.

6. Структурні можливості html5

Роблять структуру веб- документа простіший , а код чистіше. Нові семантичні елементи header , nav , section , article , aside і footer можуть використовуватися замість контейнерів div , що застосовуються зараз в HTML4.0 . нові елементи дозволяють більш конкретно описувати заголовок , нижній колонтитул , колонки тексту та інші. Ці нововведення можуть використовуватися для автоматичної генерації змісту та організації більш ефективної і простий навігації по веб -сторінці. Код при цьому стає чистішим і менш засміченим другорядними деталями.

Кілька конкретних прикладів:

Приклад 1. Замість громіздкої записи HTML4 :

<! DOCTYPE html PUBLIC _ / / DTD XHTML1.0 Transitional / / EN

< # " justify " > 7 ) Переваги для кінцевого користувача

З HTML5 життя кінцевого користувача стає помітно легше :

Не потрібно установка численних додаткових програм;

HTML5 , на відміну від HTML4 сумісний , крім ПК і ноутбуків , ще й з планшетами , смартфонами і сучасними моделями телевізорів , які надають доступ в інтернет.

2.2 Недоліки html5

На сьогоднішній день в HTML5 присутні мінуси , через які він програє колишнім технологіями. Має місце деяка вразливість HTML5 в області захисту даних. Таку вразливість створює більший , в порівнянні з cookie стандарту HTML4 , обсяг даних , які зберігаються на жорсткому диску користувача . Небезпека полягає в тому , що у великих обсягах даних може міститися більше докладна інформація про користувача. Експерти висловлюють думку , сто якщо сховище HTML5 залишається на комп'ютері користувача протягом багатьох місяців , то інтернет- сайти , звертаючись до нього через JavaScript після завантаження сторінки , можуть непомітно для користувача збирати і передавати дані власнику сайту.

Відносно мультимедійного контенту теж є недоліки , що не дозволяють зробити остаточний вибір на користь HTML5. Як наголошується в офіційному блозі YouTube , підтримка відео HTML5 дозволяє відтворювати мультимедійний контент на комп'ютерах і пристроях , які не підтримують Flash Player , проте повною мірою HTML5 всім цим потребам все ще не відповідає. На сьогоднішній день Adobe Flash забезпечує найкращу платформу для відтворення відео. У HTML5 поки немає, наприклад , повноекранного режиму. Є недоліки , що стосуються використання HTML5 для створення ігор . І, крім того , новий стандарт поки що не підтримується всіма браузерами.

Різниця в форматах HTML5 відео / аудіо в різних браузерах може привести :

1) До збільшення часу тестування і розробки ;

2) До збільшення витрат дискового простору і навантаженні на сервер.

Також є й інші недоліки у використанні HTML5 відео / аудіо:

1) На даному етапі жоден їх кодеків не може підтримувати шифрування потоку з розпакуванням на клієнті , тобто не мають можливості віддавати контент в одну точку (теоретично його одночасно без шифрування зможе дивитися необмежену кількість клієнтів , а отже доведеться регулювати доступ до конкретного потоку на стороні сервера , що призведе до витрат потужностей ) ;

2) Немає жодного універсального рішення окрім як Flash для створення мітингів і онлайн- трансляцій прямо в браузері без установки додаткового ПЗ.

Недоліки HTML5 в розробці ігор :

· Повільна робота ігор, створених за допомогою HTML5 ;

· Не кожна платформа підтримує ігри , розроблені на HTML5 ;

· При розробці гри на HTML5 потрібно набагато більше ресурсів і часу;

· Відкритість коду HTML5 неприйнятна для безкоштовних ігор;

Відсутність потужних і зручних інструментів для створення ігор , особливо для анімації ;

Неможливість адекватно упаковувати гру в один файл для дистрибуції на різних порталах ;

Платформа Flash використовується також для анімації і розробки інтерфейсів, її застосовують для створення більш складної реклами і в тривимірній графіці . Вона постійно еволюціонує і вдосконалюється.

Як зазначив Філіп Ле Егар ( Philippe Le Hegaret ) , керівник напрямку компанії W3C , яка розробляє стандарт HTML5 , в найближчі роки не вийти відмовитися від технології Flash. Причиною цьому він назвав те , що буде потрібен тривалий час для переходу всіх веб -клієнтів до підтримки HTML5. Протягом найближчого часу технології HTML5 і Adobe Flash будуть існувати.

2.3 Canvas Canvas - елемент HTML5, який можна застосовувати для малювання графіки використовуючи скрипти (переважно JavaScript). Наприклад його можна застосувати для малювання графів, створення фотокомпозицій а також анімації.

Елемент <canvas> є частиною специфікації WhatWG Web applications 1.0, що відома як HTML 5.

<canvas> вперше було втілено Apple в Mac OS X Dashboard Safari. У Gecko підтримка canvas з'явилася в версії 1.5, уPresto з версії 9.0 веб-браузера Opera. Internet Explorer підтримує canvas починаючи з 9-ї версії. Щоб відобразити <canvas> в html документі слід використати наступний код:

<canvas id="tutorial" width="150" height="150"> </ canvas>

Він дуже схожий на тег <img>, з тією лише різницею, що не містить атрибутів src і alt. Елемент <canvas> має всього два атрибути — width і height. Обидва вони не є обов'язковими, і можуть бути задані через властивості DOM. Якщо ширина і висота не визначені, canvas буде створений шириною в 300 пікселів і 150 пікселів заввишки. Розмір елемента може бути довільним і задаватися через CSS, але при промальовуванні картинка масштабується відповідно до компонування.

Атрибут id не є специфічний для елемента <canvas>, але є одним з атрибутів HTML за замовчуванням, і може бути застосований майже до всіх елементів HTML (також як class, наприклад). Завжди визначати id елемента — гарна ідея, тому що це значно спрощує ідентифікацію його в нашому скрипті.

Стиль елемента <canvas> може налаштовуватися також, як і звичайне зображення через CSS (margin, border, background, і т.п.). Ці правила, проте, не впливають на саме малювання в canvas. Якщо ніякі налаштування стилю не задані, canvas буде створений повністю прозорим.

Аварійний стан

У зв'язку з тим, що елемент <canvas> відносно новий, і не реалізований в деяких браузерах (таких як Firefox 1.0 та Internet Explorer), нам необхідно надати якийсь аварійний вміст елементу, якщо браузер цей елемент не підтримує.

Це дуже просто: ми всього-лише надаємо альтернативний вміст всередині елемента canvas. Браузери, які не підтримують <canvas>, проігнорують контейнер і оброблять аварійний вміст всередині нього. Браузери ж, що підтримують <canvas>, проігнорують вміст контейнера і нормально оброблять canvas.

Приміром, ми можемо видати текстовий опис вмісту canvas, або показати статичну картинку замість динамічно намальованого вмісту. Це може виглядати приблизно так:

<canvas id="photo" width="150" height="150">

Використовуйте сучасніший браузер!

</canvas>

Або

<canvas id="photo" width="150" height="150">

<img src="images/photo.jpg" width="150" height="150/>

</canvas>

<canvas> створює поверхню для малювання, яка надає один або більше контекстів для відтворення, який використовується для створення відображуваного контенту і маніпуляцій з ним. Ми сфокусуємо на 2D (двомірному) контексті відтворення, який в наш час є єдиним певним контекстом. У майбутньому інші контексти зможуть підтримувати інші види відтворення: наприклад, цілком ймовірно, що буде додано 3D контекст, заснований на OpenGL ES.

<canvas> спочатку порожній, і для того, щоб що-небудь відобразити, скрипту необхідно отримати контекст відтворення і малювати вже на ньому. Елемент canvas має DOM-метод, званий getContext, і призначений для отримання контексту відтворення разом з його функціями малювання. getContext () приймає один параметр — тип контексту

var canvas = document.getElementById ('tutorial');

var ctx = canvas.getContext ('2 d ');

Першим рядком ми отримуємо DOM-вузол нашого canvas, використовуючи метод getElementById. А отримати доступ до контексту малювання ми можемо методом getContext.

У HTML5 визначений елемент <canvas> як «растрове полотно, який може бути використаний для відображення діаграм, ігрової графіки або зображень на льоту». Полотно це прямокутна область на вашій сторінці, де за допомогою JavaScript можна малювати що побажаєте.

Як же це полотно виглядає? Насправді, ніяк. У тега <canvas> немає власного контенту та рамки.

Код виглядає так.

<canvas width="150" height="300"> </ canvas>

height - Задає висоту полотна. За замовчуванням 300 пікселів. width - Задає ширину полотна. За замовчуванням 150 пікселів.

Давайте додамо пунктирну рамку, щоб побачити, з чим ми маємо справу.

Полотно з рамкою

У вас може бути декілька елементів <canvas> на одній сторінці. Кожене полотно буде відображатися в DOM і зберігати свій власний стан. Якщо ви додасте кожному полотну атрибут id, то можете отримати до них доступ, як і до будь-якого іншого елементу.

Розширимо наш код, включивши атрибут id.

<canvas id="a" width="300" height="225"> </ canvas>

Тепер легко можна виявити елемент <canvas> в DOM.

var a_canvas = document.getElementById ("a");

Подія onclick викликає цю функцію:

function draw_b () {

   var b_canvas = document.getElementById ("b");

   var b_context = b_canvas.getContext ("2d");

   b_context.fillRect (50, 25, 150, 100);

}

Перший рядок функції не робить нічого особливого, вона просто знаходить елемент <canvas> в DOM.

function draw_b () {

   var b_canvas = document.getElementById ("b");

   var b_context = b_canvas.getContext ("2d");

   b_context.fillRect (50, 25, 150, 100);

}

Кожне полотно має контекст малювання. Як тільки ви знайшли елемент <canvas> в DOM (за допомогою document.getElementById () або будь-яким іншим засобом), викликаєте метод getContext (). Необхідно зазначити рядок "2D" в методі getContext ().

Отже , у вас є елемент <canvas> і є контекст малювання , де визначені методи і властивості малювання . Мається ціла група властивостей і методів присвячених малювання прямокутників.

Властивість fillStyle може бути кольором , малюнком або градієнтом (докладніше про градієнтах трохи нижче). За замовчуванням fillStyle заливає суцільним чорним кольором , але ви можете встановити будь-що. Кожен контекст малюнка пам'ятає свої власні властивості при відкритті сторінки , поки ви її не поновіть .

fillRect ( x , y , width , height ) малює прямокутник , заповнений поточним стилем заливки.

Властивість strokeStyle як і fillStyle може бути кольором , малюнком або градієнтом .

strokeRect ( x , y , width , height ) малює прямокутник з поточним стилем лінії. strokeRect не заливати всередині , він просто малює кордону.

clearRect ( x , y , width , height ) видаляє пікселі у вказаному прямокутнику.

HTML5 - безсумнівний тренд. Причому, не стільки нова специфікація з новими тегами , скільки гармонійне і могутнє поєднання HTML + CSS + JS , витончено втирає носа Flash.

Вже зараз можна спостерігати красиві HTML - 5 сайти без мегабайтів зображень і без сотень кілобайт скриптів. Canvas дозволяє малювати в спеціальному елементі документа <canvas> лінії , дуги , прямокутники, кола , заливати простір , маніпулювати текстом і картинками. Все це прекрасно описано в « Canvas Tutorial « Mozilla Developers Center з прикладами та рисунками.

Цей тег незвичайний тим , що не керує параметрами візуалізації тексту , як , наприклад , "це слово буде виділено курсивом " , а дає можливість намалювати на сторінці будь-яке зображення використовуючи команди javascript .

Фактично до появи canvas якщо вам було необхідно розмістити на сайті динамічне зображення , наприклад , графік відвідувань сайту по днях тижня. То ви або створювали php - скрипт ( благо , навіть на безкоштовних хостингах давно є підтримка бібліотеки gd2 графічних функцій , таких як лінія , прямокутник , еліпс та інші). Або ви створювали flash - ролик , який також за допомогою своїх функцій малював зображення .

В окремих випадках можливе було використовувати кошти java applet або activex . Чим погані три останні підходу : flash як і java applet вимагає встановленого плагіна (і в разі java applet дуже немаленького розміру) , activex - працюють тільки під iexplorer і тільки під windows (не кажучи про те , що у багатьох користувачів ця дірява і , прямо скажімо , небезпечна технологія просто відключена). І ще , наприклад, у мене на роботі корпоративний proxy -сервер вирізає з сторінок flash - ролики , звичайно , це не показник , але все ж.

Підхід номер один , коли картинку генерує php код - універсальний, і надійний, правда споживає занадто багато надлишкової трафіку для деяких завдань. Наприклад , якщо ви створюєте додаток, який малює графік функції z = f ( x , y ) , то більша частина отриманого зображення буде залита одним кольором фону і лише невелика частина картинки буде відображати лінії графіка функції . Для експерименту я створив картинку розміром 1024 * 768 з намальованою лінією синусоїди. Її розміри в різних форматах були такі: gif - 8 кб , jpeg - 33 кб , png - зашкалив за 210 кб . Останнє зауваження : наше додаток буде набагато зручніше , якщо користувач зможе отримувати графіки функцій без підключення до Інтернету , що у разі dial - up або погодинної оплати саме те.

Будемо вважати , що я вас переконав у корисності підходу з перенесенням генерації зображення з сервера на сторону клієнта , а тепер пару слів про історію та поточної ситуації з html canvas .

Тег canvas не входив ні в один зі стандартів , його придумала і реалізувала у своєму браузері safari компанія apple . Ідею підхопила група розробників mozilla і додала підтримку тега canvas в движок html -візуалізації gecko використовуваного в firefox і суміжних продуктах.

Потім інновацію підтримала компанія Opera Software , і , починаючи з 9- ої версії , браузер opera також знає тег canvas . Самі " активні" розробники самого " ​​передового " ​​браузера (я говорю про iexplorer ) в цей час як завжди спали. На щастя novell і google почали проекти з реалізації плагіна підтримує canvas для iexplorer - а . Додалася чи підтримка canvas в новомодному 7-ий iexplorer я не знаю, тому ніде згадок в internet про це я не знайшов , а спробувати не можу через небажання викачувати сей монструозний продукт. Слід зазначити , що даний тег планують внести в перспективний п'ятий стандарт html .

Найпростіший приклад використання canvas це просто вставити його в тіло html документа , не забувши про fallback . Простіше кажучи , якщо браузер клієнта не підтримує даний тег , то він повинен побачити деякий поясняющее повідомлення . У прикладі нижче це розміщене всередині тега canvas зображення . Дуже важливо дати canvas -у ідентифікатор для цього служить атрибут id , якщо ви так не зробите , то не зможете з javascript звертатися до canvas і малювати на ньому. В якості стильового оформлення я задав області canvas кордон чорного кольору , це тільки для зручності подальшої роботи.

<html> <head>

<script> <! - саме тут розміщуватимуться функції , які малюють на canvas ->

</ script >

</ head > <body>

<canvas id="canva" width="400" height="400" style="border: 1px solid black;">

<img src="no_canvas_sorry.jpg" />

</ canvas >

<button onclick="draw()"> draw ! </ button > <! - ця кнопка викликає деяку функцію малювання ->

</ body > </ html >

Наступний крок це створення функції , яка буде викликатися при натисканні на кнопку button . Функція повинна отримати доступ до об'єкта " canva " , для цього ми застосуємо стандартний метод getElementById ( "той самий ідентифікатор об'єкта , який ви , сподіваюся, не забули задати " ) .

Потім слід перевірити , що браузер вміє малювати , слід попросити його для canvas повернути так званий контекст малювання (простіше кажучи , місце , де малюють ) . І потім , озброївшись довідником функцій , можна починати безпосередньо малювати. Найпростіше це створити прямокутник , зафарбований деяким кольором , при цьому ви можете задати колір як звичний rgb , або ж rgba - буква a на кінці дає нам можливість задати alpha компоненту або прозорість.

Для того щоб намалювати прямокутник є три функції: fillRect , strokeRect , clearRect - які відповідно малюють прямокутник суцільним кольором , тільки кордон прямокутника , очищають частина області малювання . Всі ці функції отримують як параметр координати лівого верхнього кута прямокутника і його розміри.

function draw () {

var canvas = document.getElementById (' canva ');

if ( canvas.getContext ) {

var ctx = canvas.getContext ('2 d ');

/ / Попереджаючи наступне питання , немає , тривимірного контексту малювання немає ,

/ / Малювати можна тільки на площині

ctx.fillStyle = " rgb ( 200,0,0 )";

ctx.fillRect ( 10 , 10 , 55 , 50);

ctx.fillStyle = " rgba ( 0 , 0 , 200 , 0.5 )";

ctx.fillRect ( 30 , 30 , 55 , 50);

ctx.fillStyle = " rgb ( 0,0,0 )"; / / Чорний колір

ctx.fillRect ( 100,100,100,100 ) ;

ctx.clearRect ( 125,125,60,60 ) ;

ctx.strokeRect ( 150,150 , 120,120 ) ;

}

}

Якщо вам необхідно намалювати більш складну фігуру , то слід використовувати Path . Path - це просто шлях по якому водиться віртуальний олівець. Шлях повинен початися , олівець проводить кілька ліній ( дуг , кривих Безьє , прямокутників і т.д.) , потім шлях закривається (цей крок необов'язковий, наприклад , ви самі довели лінію від останньої точки до першої) . І останній крок - це запуск отрисовки або контуру Path , або її зафарбування , як варіант малюється і контур і фонова зафарбування одночасно.

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

Якщо вам хочеться намалювати коло , дугу , то використовуйте функцію arc ( x , y , radius , startAngle , endAngle , anticlockwise ) , її параметри соотвественно координати центру кола або дуги , потім йде радіус , параметри startAngle і endAngle - задають початок і кінець дуги в радіанах (і це важливо ), останнім йде параметр anticlockwise - логічний ознака того , чи буде дуга малюватися за годинниковою або проти годинникової стрілки. У прикладі нижче я малюю дві зірки , одна з яких відображається у вигляді контура , другий у вигляді заливки суцільним кольором , також малюється приклад дуги. Для того щоб задати колір контуру використовується властивість strokeStyle .

function draw () {

var canvas = document.getElementById (' canva ');

if ( canvas.getContext ) {

var ctx1 = canvas.getContext ('2 d ');

var ctx2 = canvas.getContext ('2 d ');

ctx1.beginPath ();

ctx2.beginPath ();

var deltaI = 0.1;

ctx1.moveTo ( 200 + 100 * Math.cos ( 0 ) , 200 - 100 * Math.sin ( 0 )) ;

ctx2.moveTo ( 200 + 170 * Math.cos ( 0 ) , 200 - 170 * Math.sin ( 0 )) ;

for ( var i = 0 ; i < 2 * Math.PI ; i + = deltaI ) {

ctx1.lineTo ( 200 + 100 * Math.cos ( i ) , 200 - 100 * Math.sin ( i )) ;

ctx1.lineTo ( 200 + 150 * Math.cos ( i + deltaI ) , 200 - 150 * Math.sin ( i + deltaI )) ;

ctx2.lineTo ( 200 + 170 * Math.cos ( i ) , 200 - 170 * Math.sin ( i )) ;

ctx2.lineTo ( 200 + 190 * Math.cos ( i + deltaI ) , 200 - 190 * Math.sin ( i + deltaI )) ;

}

ctx1.closePath ();

ctx1.stroke ();

ctx2.closePath ();

ctx2.fillStyle = " rgb ( 120,78,89 )";

ctx2.fill ();

}

ctx1.strokeStyle = " rgba ( 255,255,255,125 )";

ctx1.beginPath ();

ctx1.arc ( 200 , 200,40 , 45 * ( Math.PI / 180) , 315 * ( Math.PI / 180) , false ) ;

ctx1.closePath ();

ctx1.stroke ();

}

Зверніть увагу на одночасне існування двох контекстів малювання . Всі приклади коду даної статті ви може знайти на сайті автора: http://black-zorro.jino-net.ru . Наступного разу я покажу як відобразити на canvas існуючі зображення jpeg / gif , а також як працювати з кривими Безьє , крім того , ми зробимо введення в трансформації зміщення , обертання , масштабування.