Возможности последних web-стандартов на примере их...
DESCRIPTION
Возможности последних WEB-стандартов на примере их использования в API Яндекс.Карт. Всеволод Шмыров Разработчик интерфейсов API Яндекс.Карт. API Яндекс.Карт. . - PowerPoint PPT PresentationTRANSCRIPT
Возможности последних WEB-стандартов на примере
их использования в API Яндекс.Карт
Всеволод ШмыровРазработчик интерфейсов API Яндекс.Карт
API Яндекс.Карт
http://api.yandex.ru/maps/
<script type="text/javascript"src="//api-maps.yandex.ru/2.0/?load=package.map&lang=ru-RU"></script>
4
Canvas
• Растровая графика• Часть спецификации HTML5• Включает в себя HTML-тег и JS API• Широкая поддержка браузерами
кроме Internet Explorer (9+)• Для Internet Explorer 7 и 8 можно
использовать JS библиотеку explorercanvas
http://code.google.com/p/explorercanvas/
5
Canvas<canvas id="example" width="500px" height="500px;"></canvas>
var canvasElement = document.getElementById("example"),canvas2DContext = canvasElement.getContext("2d");
...// Отображение черного прямоугольника.canvas2DContext.fillStyle = "#000000";canvas2DContext.fillRect(0, 0, canvasElement.width, canvasElement.height);...// Вывод изображенияvar img = new Image();img.onload = function () {
canvas2DContext.drawImage(img,10,10);};img.src = "http://....png";
6
SVG• Векторная графика, которая
описывается XML• Отдельная спецификация SVG• Возможность вставлять SVG в HTML
(inline SVG)• Можно работать при помощи
JavaScript как с DOM• Широкая поддержка браузерами
кроме Internet Explorer (9+)• Для старых версия Internet Explorer
можно использовать VML
7
SVG
<body>...<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon id="poly" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;"></svg>
var polygonElement = document.getElementById('poly');
polygonElement.setAttribute('style', 'fill:#000000;stroke:purple;stroke-width:1;');
8
Отображение многоугольника
var coords = [[57.72495,63.546779], [54.740667,70.050685], [50.407949,66.798732], [53.291545,61.349513], [53.133264,52.999904]];
var polygon = new ymaps.Polygon([coords], {}, {fillOpacity: 0.2, strokeColor: '#7CE823', fillColor: '#1C7BC9', strokeWidth: 4, draggable: true, geodesic: true
});
9
Отображение фигур на карте
• Canvas > SVG• Все современные браузеры
• VML• Internet Explorer < 9
• HTML-элементы• В некоторых случаях
12
Способы отображения карты
• HTML-элемент IMG• CSS свойство background-image• Новые возможности работы с графикой (Canvas, SVG)• Сторонние плагины
13
Методы отображения тайлов карты
• Canvas• Webkit кроме Safari, iOS, Android• Internet Explorer 9 & 10• Firefox
• HTML-элементы с фоном• Safari, iOS, Android• Opera• Internet Explorer < 9
14
Методы позиционирования тайлов<ymaps style="position: absolute; left: -162px; top: -243px;" />
position: absolute
<ymaps style="transform: translate(-162px, -243px);" />
transform & translate
<ymaps style="transform: translate3d(-162px, -243px);" />
transform & translate3d
15
Методы отображения тайлов карты• Canvas
• position absolute • Internet Explorer 9• Webkit кроме Safari, iOS, Android
• transform & translate3d• Firefox• Internet Explorer 10
• HTML-элементы с фоном• position absolute
• Internet Explorer < 9• transform & translate
• Opera• transform & translate3d
• iOS, Android
18
Использование CSS анимации
div { transition: transform 1s ease-in-out;
}.anim {
transform: translate(600px, 0px);}
http://video.yandex.ru/users/v-shmyroff/view/4/
19
Макет балуна кластера «Аккордеон»
http://bit.ly/balloon_accordion
clusterer = new ymaps.Clusterer({clusterBalloonContentBodyLayout:
"cluster#balloonAccordionContent"});
http://video.yandex.ru/users/v-shmyroff/view/2/
20
Использование CSS анимацииdiv {
-webkit-transition: -webkit-transform 1s ease-in-out; -moz-transition: -moz-transform 1s ease-in-out;-ms-transition: -ms-transform 1s ease-in-out;-o-transition: -o-transform 1s ease-in-out; transition: transform 1s ease-in-out;
}.anim {
-webkit-transform: translate(600px, 0px);-moz-transform: translate(600px, 0px);-ms-transform: translate(600px, 0px);-o-transform: translate(600px, 0px); transform: translate(600px, 0px);
}
22
Событие transitionend• В Internet Explorer 10, Firefox,
Opera >= 12 событие «transitionend»;
• Internet Explorer 9 событие «MSTransitionEnd»;
• Opera < 12 событие «oTransitionEnd»;
• В Webkit событие «webkitTransitionEnd».
23
Отмена анимации
http://video.yandex.ru/users/v-shmyroff/view/1/
24
Собственный макет с CSS анимацией
http://bit.ly/jsFiddle_vsesh
http://video.yandex.ru/users/v-shmyroff/view/3/
25
Собственный макет с CSS анимацией.arrow {
background: linear-gradient(315deg, #002400 0%, #35A800 100%);opacity: 1;transform: translate(-30px, -65px) rotate(45deg);border-radius: 60px 60px 0px;animation-name: arrow_animation;animation-duration: 1s;
}@keyframes arrow_animation{
0% { transform: translate(-30px, -100px) rotate(45deg); }60% { ... }100% { transform: translate(-30px, -65px) rotate(45deg); }
}
http://clck.ru/8drfh
var layoutHTML = '<div class="arrow"></div>',layout = ymaps.templateLayoutFactory.createClass(layoutHTML),placemark = new ymaps.Placemark(coords, {}, { iconLayout:
layout });
27
Cкроллбар в WebKit
.someClass ::-webkit-scrollbar { ... }
.someClass ::-webkit-scrollbar-track { ... }
.someClass ::-webkit-scrollbar-thumb { ... }
.someClass ::-webkit-scrollbar-thumb:hover { ... }
...
http://bit.ly/balloon_accordion
29
Geolocation API
navigator.geolocation.getCurrentPosition(onSuccess, onError);
function onSuccess(position) {var coords = [position.coords.latitude, position.coords.longitude];var placemark = new ymaps.Placemark(coords);map.geoObjects.add(placemark);map.setCenter(coords);
}
function onError(positionError) {console.log(positionError.message);
}
http://bit.ly/geolocationAPI
• Получение местоположение пользователя• Все методы асинхронные• Поддержка современными браузерами (IE9+, Opera10.6+)
32
Использование событий в API
// Событие "mousedown" будет работать на всех устройствах. ymaps.domEvent.manager.add(
htmlElement,'mousedown', callback
);// Специальные multitouch* события.ymaps.domEvent.manager.add(
htmlElement, ['multitouchstart', 'multitouchmove', 'multitouchend'],callback
);
33
Touch Events
• Поддержка браузерами iOS и стандартным браузером Android
• Определение событий, которые описывают прикосновения (touchstart, touchend …)
• Небольшие различия в реализациях• Статус предложения в
рекомендации
34
Pointer Events
• Поддерживается только Internet Explorer 10, но с префиксом ms
• Описание всех способов ввода единым интерфейсом
• Статус кандидата в рекомендации
36
Инициализация API Яндекс.Карт
<script src="//api-maps.yandex.ru/2.0/?lang=ru-RU&ns=ym" type="text/javascript"></script><script type="text/javascript">...ym.load('package.map', function() {
...});...</script>
<script type="text/javascript"src="//api-maps.yandex.ru/2.0/?load=package.map&lang=ru-RU"></script>
37
Плюсы:• Работа во всех браузерах• Доступность данных по доменуМинусы:• Данные постоянно отправляются в заголовках• Малый объем предоставляемого пространства под
данные
Сохранение в cookie
// запись document.cookie = key + '=' + escape(value);// получениеvar cookieData = document.cookie.split('; ');for(var i = 0, iMax = cookieData.length; i < iMax; i++){
if(cookieData[i].substring(0, name.length) == name)return unescape(cookieData[i].substring(name.length
+ 1));}
38
Сохранение данных во flash модуле
Плюсы:• 100кб под данные• Доступность данных по домену• Данные не нужно сериализовать• Сохраненные данные доступны во всех браузерах
Минусы:• Использование внешнего плагина• Необходимость загружать дополнительные файлы• Отсутствие поддержки мобильных ОС
39
Сохранение данных во flash модулеsharedObject = SharedObject.getLocal("savedData");ExternalInterface.addCallback("setData", function(data:Object):void {
// Получение данных из JSsharedObject.data[key] = data;sharedObject.flush();
}); // Вызов функции в JSExternalInterface.call("initStorage", sharedObject.data);
ActionScript
function initStorage(storageData) {// Получение данных из AS
}// Вызов функции в ASflashElement.setData({ key: value });
JavaScript
40
Web Storage
• localStorage• Бессрочное хранение данных• Доступность данных по происхождению
документа
• sessionStorage• Хранение данных до закрытия окна или
закладки• Доступность данных по происхождению
документа + по окну/закладке
41
Использование localStorage
var data1 = window.localStorage['key1'];data1 = data1 ? data1.split('|') : [2, 2];data1[0] = "1";
try {window.localStorage['key1'] = data1.join('|');
}catch (e) {
...}
42
Использование localStorage
var data1 = window.localStorage.getItem('key1');data1 = data1 ? data1.split('|') : [2, 2];data1[0] = "1";
try {window.localStorage.setItem('key1',
data1.join('|'));}catch (e) {
...}
43
Web Storage
• Плюсы:• Предоставляется 5мб под данные• Поддержка всеми современными браузерами
(IE 8+, Opera 11+)
• Минусы:• Same origin policy• Работа только со строками
44
Возможность работать с БД
• Web SQL• Интерфейс для передачи SQL команд
БД• IndexedDB
• Объектно-ориентированная модель
45
Web SQLvar db = openDatabase('test', '1.0', 'comment', 1024 * 1024);if(db) {
db.transaction(function (transaction) {transaction.executeSql('CREATE TABLE IF NOT
EXISTS ... ');});...db.transaction(function (transaction) {
transaction.executeSql('SELECT * FROM ... ');});
}
46
IndexedDBvar indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB,
request = indexedDB.open(indexedDBName);request.onsuccess = function (event) {
var db = event.result;if(db.version != '1.0) {
// Создание базы данных.var setVersionRequest = db.setVersion("1.0");setVersionRequest.onsuccess = function () { ... };setVersionRequest.onerror = function () { ... };
} else {...
}db.close();
}request.onerror = function (event) { ... }
47
IndexedDB & Web SQL
• Плюсы обоих методов:• Четкая структура данных• Большой объем под данные
• Минусы IndexedDB: • Поддержка только Firefox, Chrome, IE10• Same origin policy• Различия в реализациях
• Минусы Web SQL:• Разработка спецификации остановлена в
2010• Поддержка только Webkit и Opera