HTML5, CSS3 і пов'язані з ними технології

Розробка і маркетинг веб-стандартів
Малюнок 1. Логотип HTML5
Живий стандарт: HTML5, "HTML5" і HTML
Технології з поточної специфікації HTML5
Нові семантичні елементи
Новий алгоритм структурування
Відео та звук
Лістинг 1. Простий приклад відео
Автономні веб-додатки
Вбудоване редагування контенту.
Перетягування (Drag and drop)
Історія (History API)
Microdata
Технології, що входять в HTML5, але мають окремі специфікації і свої робочі групи
SVG
Контекст Canvas 2D
Web Storage
File API
WebSocket
Server-sent Events
WebGL
XMLHttpRequest Level 2
Модульний підхід до CSS3
селектори
Color
Backgrounds і Borders
Multi-column layout
Media Queries
Нові та розробляються модулі
CSS Fonts Module Level 3
CSS Animations Module Level 3 і CSS Transitions Module Level 3
Погляд у майбутнє
Ресурси для скачування

Керівництво по швидкому переходу на нові і розвиваються веб-стандарти

Розробка і маркетинг веб-стандартів

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

Настільки активне обговорення, безумовно, має свої переваги. Увагу публіки до нових стандартів сприятливо позначається на всіх учасниках галузі. З цієї точки зору використання зонтичних термінів, зокрема, HTML5, для опису «розвиваються веб-технологій» стає звичайною справою. Це дозволяє нетехнічних людям оцінити - загалом і в цілому - ту чудову роботу, яка в даний час ведеться в області розробки стандартів.

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

Малюнок 1. Логотип HTML5

Керівництво по швидкому переходу на нові і розвиваються веб-стандарти Розробка і маркетинг веб-стандартів Сьогодні прекрасний час для того, щоб бути веб-розробником

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

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

Живий стандарт: HTML5, "HTML5" і HTML

Безумовно, найважливішою з специфікацій є нова версія HTML. Добре це чи погано, але термін HTML5 став загальною назвою для всіх країн, що розвиваються технологій. Розробник JavaScript Петер-Пауль Кох (Peter Paul Koch) коротко описав цей феномен в замітці в своєму блозі в січні 2010 року: "Терміном HTML5 можна назвати все що завгодно, якщо ви хочете, щоб це звучало новомодних і круто".

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

Варто відзначити, що Web Hypertext Application Technology Working Group (WHATWG) - робоча група, яка керує зараз розробкою стандартів HTML-пішла зі шляху так званого «етапного процесу створення стандартів», який тривалий час застосовувався W3C. І хоча група тісно працює спільно з W3C для створення фіксованої специфікації HTML5, її власні процеси розробки стандартів орієнтовані на підтримку HTML як "живого стандарту".

Відклавши убік семантику, давайте познайомимося ближче з технологіями, які присутні в поточній специфікації HTML5. Для повного і глибокого занурення в будь-який з цих документів ви можете звернутися до розділу ресурси , Де наведені посилання на них, а також на інші стандарти, які згадуються в даній статті. Якщо говорити про даної специфікації, ми повинні подякувати WHATWG за недавно випущену версію веб-розробників; в ній виключені кілька сотень сторінок інформації, призначеної для творців браузерів, що зробило документ значно зручнішим для читання.

Технології з поточної специфікації HTML5

Перед тим як зануритися в компоненти, варто звернути увагу на те, що WHATWG не жартує, називаючи стандарт живим. Це рухома ціль. Деякі технології, такі як Canvas 2D API, спочатку входили до складу специфікації, але згодом перемістилися в інші документи.

Нові семантичні елементи

З усіх нових компонентів специфікації швидше за все приживаються саме семантичні елементи, наприклад, Header, Footer, Section і Aside. Багато з них засновані на типових шаблонах використання, які були виявлені в процесі збору відомостей редактором Йеном Хіксон (Ian Hickson). Це наочно видно на прикладі Header і Footer, які відображають загальноприйняті шаблони id = "header" і id = "footer", що застосовуються у всій глобальній мережі. Інші, наприклад, hgroup, aside і figure, стали логічним доповненням і поліпшенням існуючих елементів HTML.

І хоча конкретна підтримка нових елементів браузерами обмежена (наприклад, браузери практично нічого не роблять з елементів header), використання нових семантичних елементів набуває все більшого поширення. Розробники виробляють оптимальні підходи і створюють типові шаблони використання цих нових елементів. Наприклад, хоча старі версії Windows® Internet Explorer® мають певні проблеми при появі незнайомих елементів, такі бібліотеки, як Modernizr, і модулі, подібні HTML5Shiv, дозволили згладити шлях до підтримки нових елементів різними браузерами.

Новий алгоритм структурування

Разом з цими новими семантичними елементами в складі стандарту також з'явився новий алгоритм структурування, який дозволяє створювати більш гнучкі форми документів. На додаток до стандартних блокам заголовків від H1 до H6 в HTML5 є кілька нових секційних елементів, таких як section, article, aside, footer, header і nav. Ці елементи дозволяють розділити документ на нові розділи. Разом зі знайомими позначеннями заголовків і можливістю створити більш одного елемента H1 на сторінці все це створює більш потужну основу для створення багатих і структурованих документів.

Використання при розробці такого інструменту, як букмарклет HTML5 outliner (h5o), дозволяє легко освоїти новий алгоритм. Нові опції вимагають певного звикання, однак перегляд структури документа в процесі його розробки може допомогти розібратися в нововведеннях.

Відео та звук

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

З точки зору специфікації включення вбудованих в браузер API для відтворення відео і звуку представляються логічним і добре продуманим. Ті, хто знайомий з принципом роботи нині виключених елементів, таких як IMG, легко розберуться, як тепер вбудовувати відео і аудіо. Передбачений для цього інтерфейс API вкрай простий, як можна бачити в лістингу 1 :

Лістинг 1. Простий приклад відео

<- the HTML -> <figure> <video src = "_ assets / video / sample.webm" controls autoplay width = "400" height = "300" id = "video-sample" data-description = "sample web video "> Ваш браузер не підтримує тег відео </ video> <legend> This is a nice, sample web video </ legend> </ figure> // Це простий приклад відео на веб-сторінці var video = document.getElementById (" video-sample "), toggle = document.getElementById (" video-toggle "); toggle.onclick = function () {if (video.paused) {video.play (); toggle.className = "playing"} else {video.pause (); toggle.className = "paused"}};

На жаль, до моменту, коли цей код може працювати в більшості браузерів з єдиним джерелом відео, ще далеко. Поки творці браузерів діляться на два табори, ситуація залишається значно складнішою, ніж повинна бути. Поки Apple і Microsoft непохитно стоять на стороні обтяженого патентами стандарту h.264, а Google, Opera і Mozilla виступають за вільні, відкриті і безкоштовні формати відео, такі як WebM, вбудовування відео в сторінки залишиться більш, а не менш, складною процедурою, ніж у часи Adobe® Flash®.

У HTML5 є кілька нових елементів форм, які краще відображають сучасні завдання введення. Такі формати як Email і URL, тепер можна виділяти в браузері більш змістовним способом. Серед нових елементів форм можна відзначити range (для прокрутки), date (для вибору дати) і color (для вибору кольору).

На жаль, як показує дослідження Петера-Пауля Коха, творці браузерів, за винятком Opera і Research in Motion, дуже повільно впроваджують ці технології. Це ганьба.

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

Автономні веб-додатки

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

Вбудоване редагування контенту.

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

Перетягування (Drag and drop)

Новий API-інтерфейс drag-and-drop дозволяє перетягувати файли на сторінки прямо з робочого столу. Наживо цю функцію можна побачити в Google Gmail в браузері Mozilla Firefox або Google Chrome.

Історія (History API)

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

Microdata

HTML5 визначає стандартний метод маркування метаданих в тілі документа HTML. Принцип microdata здасться знайомим тим, хто працював з мікроформатами, такими як hCard і hCalendar, однак є ряд важливих відмінностей. Головне полягає в тому, що microdata переносить відповідну інформацію з класів, раніше захоплює мікроформатами, в новий атрибут itemprop.

На додаток до цього стандарт додає інші атрибути, які більш точно визначають формат мікроданних, і метод, що дозволяє швидше отримати програмний доступ до мікродані:

itemscope визначає область дії сегмента мікроданних.
itemtype надає URL, який визначає використовуваний формат мікроданних.
document.getItems () надає доступ до елементів мікроданних верхнього рівня; Цей метод повертає список NodeList, що містить елементи типу, заданого необов'язковим аргументом itemType, або елементи всіх типів, якщо аргумент був опущений.

Технології, що входять в HTML5, але мають окремі специфікації і свої робочі групи

Кілька технологій вийшли з специфікації HTML5 і тепер описані в своїх документах. Інші, що розроблялися завжди окремо від цього HTML-стандарту, об'єднані з ним в рамках "веб-платформи".

SVG

Мабуть, найдивніша технологія, яка потрапила під бренд HTML5, - це стандарт векторної графіки SVG (Scalable Vector Graphics). SVG є синтаксис векторної графіки на базі XML. Специфікація SVG розробляється W3C з 1999 року, тому включення цієї технології як «нової» складової HTML5 є великим лукавством.

Тим часом новий сплеск уваги до SVG цілком виправданий, тому що в даний час існує реальна тенденція до впровадження цього стандарту. Певний рівень підтримки вже доступний в новітніх версіях всіх основних браузерів, а API для більш старих версій Internet Explorer реалізується через бібліотеки, подібні Raphael.js.

Контекст Canvas 2D

Однією з перших зірок ери HTML5 став елемент Canvas і пов'язана з ним бібліотека API, які почали своє існування в якості розширення Apple для HTML. Як вже зазначалося раніше, ця технологія почала своє життя в рамках специфікації HTML5. Тепер же вона розробляється W3C в окремому документі.

Canvas 2D надає програмований інтерфейс для малювання двовимірних зображень і картинок прямо в браузері. Цей елемент вже застосовується для широкого кола завдань - від малювання карт до ігор, від популярної системи підтримки користувальницьких шрифтів до перенесення мови програмування Processing на JavaScript. На радість тих, хто хоче використовувати Canvas сьогодні, цей елемент до деякої міри підтримується і в старих версіях Internet Explorer завдяки бібліотеці ExplorerCanvas.

API Geolocation представляє собою стандартний інтерфейс для отримання даних про географічне місцезнаходження пристрою. Він надає доступ до об'єкту window.geolocation, який, в свою чергу, володіє методами, які допомагають визначити місце розташування пристрою на підставі інформації з спеціальних серверів. Інформація про місцезнаходження збирається з багатьох джерел, включаючи характеристики IP-адреси, вбудований приймач GPS, MAC-адреси Wi-Fi і Bluetooth, радіочастотні мітки RFID, і місце підключення до Wi-Fi.

Web Storage

Специфікація Web Storage визначає API для постійного зберігання даних в веб-браузері у вигляді пар ключ / значення. Ця специфікація схожа на cookies, але значно перевершує її за можливостями.

Зберігання даних відбувається в двох видах: sessionStorage і localStorage. Обидва вони надають однакові методи для управління елементами (setItem (), removeItem () і getItem ()), а також clear () для очищення всього сховища. Варіант SessionStorage призначений для зберігання інформації, яка потрібна тільки під час поточної сесії браузера. Варіант LocalStorage призначений для тривалого зберігання налаштувань сайту або інших даних користувача. Існує також подія storage, яке можна використовувати для моніторингу і реагування на дії зі сховищем.

Тим, хто хоче використовувати згадані функції вже зараз, бібліотека Persist.js надає надійне рішення для різних платформ, що дозволяє використовувати Web Storage або її еквіваленти в усіх популярних браузерах.

Ще дві специфікації йдуть рука об руку з Web Storage:

IndexedDB - це пов'язана, але ще незріла специфікація, яка надає ще більше можливостей для тривалого зберігання даних в браузері, включаючи можливість робити запити до бази даних, а також, що важливо, зберігати складні об'єкти, а не тільки прості рядки.
Web Workers - це дивно потужна специфікація, що визначає API, в якому передбачена можливість запуску фонових «виконавців», що виконують код паралельно з машиною JavaScript на головній сторінці. Ця функціональність дозволяє розробникам виводити ресурсомісткі завдання обробки даних в фонові процеси, звільнивши браузер для подальшої взаємодії з користувачем в основному контексті.

File API

Ця специфікація надає API для роботи з файлами прямо в веб-додатках. Разом з декількома країнами, що розвиваються і вже прийнятими технологіями, такими як XMLHttpRequest, drag-and-drop і Web Workers, бібліотека File API дозволить виробляти значно складніші взаємодії між веб-ресурсом і робочим столом користувача, ніж це можливо сьогодні. Замість простого елемента завантаження файлу, який передає файл на веб-сервер для обробки, або складного інтерфейсу на базі Flash, бібліотека File API дозволить безпосередньо звертатися до вмісту файлу в браузері.

WebSocket

WebSocket API розроблений для одночасного двостороннього взаємодії між браузером і сервером через один сокет TCP. Насправді впровадження WebSocket мало просунутися значно далі завдяки підтримці в останніх версіях Firefox, Opera, Chrome і Apple Safari, однак виявлена уразливість в системі безпеки призвела до того, що в даний час підтримка цієї технології в Firefox і Opera за замовчуванням відключена.

Server-sent Events

Ця специфікація визначає API для створення HTTP-з'єднання з метою отримання push- повідомлень у формі подій DOM. Ця специфікація замінює собою поточний формат регулярного опитування серверів з метою отримання оновлень, виключаючи необхідність в незліченній кількості непотрібних запитів, а також пов'язаних з ними навантажень на процесор і канал передачі даних.

WebGL

Бібліотека Web-based Graphics Library, або WebGL, розширює можливості JavaScript зі створення інтерактивної тривимірної графіки в браузері. WebGL реалізована як контекст HTML-елемента Canvas. 3 березня 2011 року специфікація досягла версії 1.0. Розробку веде некомерційна організація Khronos Group.

XMLHttpRequest Level 2

Специфікація XMLHttpRequest Level 2 вносити Поліпшення в об'єкт XMLHttpRequest, розшірюючі его возможности. Найбільш цікавім з нововведень, можливо, є функція Cross-Origin Resource Sharing, яка надає Безпечний способ обходу політики єдиного джерела Запитів, дозволяючі XMLHttpRequest взаємодіяті зі Стороннім сервером. В даний час XMLHttpRequest може контактувати в рамках одного протоколу тільки з одним сервером.

З огляду на повсюдне поширення JSON і JSONP, Cross-Origin Sharing може вже бути не так актуальна, як раніше, але вона все ж відкриває безліч шляхів для розвитку архітектури сайтів і гібридних додатків, знімаючи обмеження політики єдиного джерела.

Модульний підхід до CSS3

В останній версії CSS робоча група вирішила піти від єдиної монолітної специфікації і розділила роботу на кілька самостійних документів, які отримали назву «модулів». Кожен з модулів додає нові можливості або розширення функцій, визначених у другій версії CSS (CSS2).

Кілька модулів розробляються вже від 5 до 10 (і навіть більше) років і досягли зрілості. В ієрархії готовності W3C вони знаходяться в статусі пропонованих рекомендацій або рекомендацій-кандидатів. Це означає, що вони фактично готові. Давайте розглянемо докладніше найбільш цікаві та важливі модулі.

селектори

CSS не працює без селектор. Вони використовуються для вибору елементів в документі HTML і застосування відповідного стилю.

У цьому модулі містяться вже існували селектори з першої версії CSS (CSS1) і CSS2, а також розширення і деякі нові можливості. Доповнення головним чином фокусуються навколо групи структурних псевдокласів, таких як E: empty, який відповідає порожньому елементу, а також E :: nth-child (n) для дочірнього елемента з конкретним індексом n. Серед інших нових селекторів - заперечує псевдоклас E: not (s), який являє собою заперечення простого селектора, а також елемент UI, який визначає псевдокласи E: enabled і E: disabled, які відповідають включеним або вимкненим елементів призначеного для користувача інтерфейсу.

Користувачі популярних бібліотек JavaScript, таких як jQuery, Dojo і YUI, вже знайомі з новими селекторами третьої версії CSS (CSS3), так як вони вже досить давно включені в движки цих бібліотек.

Color

Color визначає колірні аспекти CSS, включаючи прозорість і позначення колірних параметрів. Серед нових значень кольорів - Red Green Blue + канал Alpha (RGBA), а також Hue, Saturation, Lightness + канал Alpha (HSLA).

Backgrounds і Borders

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

Multi-column layout

Розмітка Multi-column дозволяє розробникам розміщувати контент в шпальтах з легко налаштованим параметрами.

Media Queries

Media Queries є поліпшення правил @media в CSS, а також атрибутів media в HTML, додаючи такі параметри, як розмір дисплея, глибина кольору і співвідношення сторін. Цей модуль дозволяє розробникам більш точно надавати контент для пристроїв різних типів і можливостей в межах одного класу.

Media Queries грає важливу роль в концепції Responsive Web Design від Ітена Маркотт (Ethan Marcotte), яка описується в популярній статті A List Apart і в підготовлювану книзі.

Нові та розробляються модулі

Перераховані зрілі модулі гарні, практичні і надзвичайно корисні, однак основна частина найбільш цікавої роботи з CSS ведеться в серії (відносно) нових модулів. Нижче наведені деякі гідні згадки приклади.

CSS Fonts Module Level 3

Fonts Level 3 являє собою розширення оригінальних і добре відомих властивостей шрифтів, використовуваних з часів появи CSS. Level 3 включає в себе популярне правило @ font-face, яке дозволяє краще управляти типографікою в мережі, надаючи можливість безпосередньо вбудовувати спеціальні шрифти в документ за допомогою правил CSS.

Модуль 2D Transformations надає новий елемент, що дозволяє виконувати обертання, перевороти, масштабування та інші трансформації в діалоговому вікні.

Розроблений разом з SVG модуль 3D Transforms розширює можливості 2D Transforms, додаючи методи перспективного перетворення.

CSS Animations Module Level 3 і CSS Transitions Module Level 3

Модуль Animations дозволяє анімувати елементи, визначаючи параметри анімації, тимчасові параметри анімації та компоненти, які будуть змінюватися під час анімації. Модуль Transitions дозволяє визначити анімацію переходів між псевдоклас. Типовим прикладом переходу є перехід елемента в стан: hover і вихід з нього.

Погляд у майбутнє

Малюнок 2. Я бачив майбутнє

Наш огляд поточного стану світу веб-стандартів добігає кінця. Варто сказати, що зараз дійсно дивовижний час, оскільки що багато хто з перерахованих технологій вже доступні в вигляді демонстрацій або навіть робочого коду. І поки розробники зайняті документуванням особливостей цих нових технологій і створенням бібліотек для підтримки в застарілих браузерах, у вас є можливість оцінити ці нові технології самостійно. Таке самостійне використання, безумовно, є кращим способом оцінити майбутнє Інтернету. Отже, якщо вам цікаво, куди ж ми рухаємося, зараз саме час зануритися глибше і розібратися, про що так активно говорять в галузі сьогодні.

Ресурси для скачування

Схожі тими

Оригінал статті: HTML5, CSS3, and related technologies .
Логотип HTML5 : Прочитайте про веб-платформі і завантажте логотип HTML5.
" Терміном HTML5 можна назвати все що завгодно "(QuirksBlog, січень 2010 р.) Петер-Пауль Кох (Peter-Paul Koch) про плутанину навколо поняття HTML5.
" HTML - це новий HTML5 "(Блог WHATWG, січень 2011 р.) В цьому блозі обговорюється нова модель розробки HTML5, в якій технологія не фіксіруетс в версіях, а формулюється в живому документі, що описує мову в процесі його розвитку.
" Специфікація HTML5 для веб-розробників "(WHATWG, лютий 2011 р.) Особливістю цієї специфікації є зручність читання і відкритий доступ. На відміну від повної специфікації HTML, дана" версія для веб-розробників "не містить інформації, яка потрібна тільки виробникам браузерів.
" Нові типи введення "(QuirksBlog, березень 2011 р.) Вивчіть таблиці сумісності нових типів введення.
" HTML Canvas 2D Context "(W3C, лютий 2011 р.) Дізнайтеся більше про двовимірному контексті елемента HTML Canvas.
cufón : Дізнайтеся про підтримку спеціальних шрифтах за допомогою cufón.
" Web Storage "(W3C, квітень 2011 року). Дізнайтеся більше про цю бібліотеці для постійного зберігання даних на стороні веб-клієнта у вигляді пар ключ / значення.
" Web Workers "(Apple Computer, Inc., Mozilla Foundation і Opera Software ASA, квітень 2011 року). Прочитайте про API, який дозволяє авторам веб-додатків використовувати фонові процеси для запуску скриптів в паралельному режимі з головним вікном. Багатопотокові операції координуються за допомогою спеціальних повідомлень.
" File API "(W3C, жовтень 2010 р.) Дізнайтеся більше про API, що дозволяє працювати в веб-додатках з файловими об'єктами, включаючи програмний вибір і прямий доступ до даних.
" The WebSocket API "(W3C, квітень 2011 року). Дізнайтеся більше про API, який дозволяє веб-сторінкам використовувати протокол WebSocket для двосторонньої взаємодії з віддаленим хостом.
" Experiment comparing Upgrade and CONNECT handshakes "(IETF, листопад 2010 р.) Прочитайте про проблеми вразливості, які призвели до обмеження підтримки WebSockets. Детальніше про цю проблему безпеки можна прочитати в Chromium Code Reviews .
" Server-Sent Events "(W3C, квітень 2011 року). Дізнайтеся більше про бібліотеку API, що дозволяє відкривати з'єднання HTTP для отримання push повідомлень з сервера в формі подій DOM.
" Специфікація WebGL "(Khronos Group, лютий 2011 р.) У даній специфікації описані додатковий контекст рендеринга і допоміжні об'єкти елемента HTML 5 Canvas [CANVAS]. Цей контекст забезпечує рендеринг з використанням API, близьким до OpenGL ES 2.0 API.
" XMLHttpRequest Level 2 "(W3C, березень 2011 р.) Специфікація XMLHttpRequest Level 2 розширює можливості об'єкта XMLHttpRequest такими функціями, як крос-серверні запити, події і обробка бітових потоків при відправці і отриманні.
" Selectors Level 3 "(W3C, грудень 2009 року): Дізнайтеся більше про селекторах, вже існуючих в CSS1 і CSS2, а також про нові селекторах CSS3 і про інші мови, для яких вони можуть знадобитися.
" Модуль CSS Backgrounds and Borders Level 3 "(W3C, лютий 2011 р.) Дізнайтеся про можливості CSS level 3 щодо кордонів і фону.
" Модуль CSS Multi-column Layout "(W3C, квітень 2011 року). В даній специфікації описується Багатоколоночних формат в CSS, мові опису таблиць стилів в Інтернеті. За допомогою функцій, описаних в даній специфікації, контент можна розділити на кілька стовпців із заданими проміжками і з певними правилами перенесення.
" Media Queries "(W3C, июль 2010 г.). Дізнайтеся про те, як MediaQueries розширює функціональність MediaTypes, дозволяючи більш точно застосовувати таблиці стилів.
" Responsive Web Design "(A List Apart, травень 2010 р.) Дизайнери прагнуть до максимальної точності верстки, в той час як мінливі умови відображення сторінок в Інтернеті зводять нанівець їхні старання. Ітен Маркотт (Ethan Marcotte) вважає, що потрібно змінити принципи дизайну з урахуванням цих обмежень: використовувати верстку з перетіканням, гнучкі зображення і медіа-запити; він показує нам, як створити дійсно інтерактивний веб-дизайн для поточного і мінливого світу Інтернету.
" CSS Color Module Level 3 "(W3C, жовтень 2010 р.) У даній специфікації описуються значення кольорів, параметри відтінку переднього плану, а також групова прозорість. В їх число входять параметри і значення з CSS2, а також деякі нові показники.
" CSS Fonts Module Level 3 "(W3C, березень 2011 р.) Цей модуль CSS3 описує, як визначаються параметри і як відбувається динамічне завантаження спеціальних шрифтів.
" CSS 2D Transforms Module Level 3 "(W3C, грудень 2009 року). Дізнайтеся, як CSS 2D Transforms дозволяє обробляти елементи CSS і трансформувати їх в двовимірному просторі.
" CSS 3D Transforms Module Level 3 "(W3C, березень 2009 року). Дізнайтеся, як CSS 3D Transforms розширює можливості трансформації CSS, дозволяючи змінювати елементи CSS в тривимірному просторі.
" CSS Animations Module Level 3 "(W3C, березень 2009 року). Дізнайтеся, як CSS Animations дозволяють автору сторінки змінювати параметри CSS згодом.
" CSS Transitions Module Level 3 "(W3C, грудень 2009 року). Дізнайтеся, як CSS Transitions дозволяє змінювати значення параметрів CSS в певні інтервали часу.
" Специфікація Geolocation API "(W3C, вересень 2010 року). Ця специфікація визначає API для програмного доступу до інформації про географічне положення пристрою.
HTML5 Cross Browser Polyfills : Дізнайтеся про бібліотеки та інших елементах коду, які допоможуть вам почати роботу з новими стандартами прямо зараз.
" Історія сесії і навігація "(WHATWG, квітень 2011 року). Дізнайтеся про новому інтерфейсі History API.
WHATWG в Твіттері : Стежте за WHATWG в Твіттері
W3C в Твіттері : Стежте за W3C в Твіттері
Роб Ларсен в Твіттері : Стежте за твітами автора статті
Processing.js Завантажте Processing.js, відгалуження проекту популярного візуальної мови програмування Processing, призначене для Web.
Explorer Canvas : Додайте підтримку Canvas в Internet Explorer за допомогою Explorer Canvas.
PersistJS Завантажте PersistJS, клієнтську бібліотеку персистентного зберігання даних на базі JavaScript.
Modernizr : Дізнайтеся більше і завантажте Modernizr, систему, що додають елементи HTML для використання спеціальних функцій браузера в таблицях стилів.
HTML5Shiv : Завантажте HTML5Shiv.
HTML5 outliner (h5o) Завантажте букмарклет HTML5 outliner. Поточна робоча версія HTML5 визначає досить точний алгоритм для структурування документів HTML.
Raphael.js Завантажте Raphaël, невелику бібліотеку JavaScript, яка допоможе спростити вашу роботу з векторною графікою в мережі.

Підпішіть мене на ПОВІДОМЛЕННЯ до коментарів

Статьи