Возможности последних WEB-стандартов на примере их использования в API Яндекс.Карт

Возможности последних 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>

http://api.yandex.ru/maps/

Возможности работы с графикой

• Отображение произвольных фигур на карте

4

Canvas

• Растровая графика• Часть спецификации HTML5• Включает в себя HTML-тег и JS API• Широкая поддержка браузерами

кроме Internet Explorer (9+)• Для Internet Explorer 7 и 8 можно

использовать JS библиотеку explorercanvas

http://code.google.com/p/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-элементы• В некоторых случаях

Отображение карты

• Скорость и производительность работы карты

11

Тайлы карты

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

CSS анимация• Плавная анимация в некоторых макетах

17

CSS анимация

• CSS Animations• CSS Transitions

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"});






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);

}

21

Управление префиксами браузеров

• LESS• SASS• Stylus• -prefix-free

22

Событие transitionend• В Internet Explorer 10, Firefox,

Opera >= 12 событие «transitionend»;

• Internet Explorer 9 событие «MSTransitionEnd»;

• Opera < 12 событие «oTransitionEnd»;

• В Webkit событие «webkitTransitionEnd».

23

Отмена анимации






24

Собственный макет с CSS анимацией

http://bit.ly/jsFiddle_vsesh


http://bit.ly/jsFiddle_vsesh





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 });

Персонализация скроллбара в WebKit

• Красивый скроллбар нативными средствами

27

Cкроллбар в WebKit

.someClass ::-webkit-scrollbar { ... }

.someClass ::-webkit-scrollbar-track { ... }

.someClass ::-webkit-scrollbar-thumb { ... }

.someClass ::-webkit-scrollbar-thumb:hover { ... }

...

http://bit.ly/balloon_accordion

Geolocation API• Получение местоположения пользователя

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+)

http://bit.ly/geolocationAPI

События сенсорных устройств

• Работа на сенсорных устройствах

31

Трансляция событий

Pointer EventsTouch Events

Mouse Events

Mapper

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

48

api.yandex.ru/mapsclubs.ya.ru/mapsapifacebook.com/ymapsapi

Полезные ссылки

Всеволод Шмыров

Разработчик интерфейсов API Яндекс.Карт

[email protected]

Спасибо!

Documents

Возможности последних WEB-стандартов на примере их использования в API Яндекс.Карт