Возможности последних стандартов на примере их WEB- использования в API
реклама
Возможности последних
WEB-стандартов на примере их
использования в API
Яндекс.Карт
Всеволод Шмыров
Разработчик интерфейсов API Яндекс.Карт
API Яндекс.Карт
<script type="text/javascript"
src="//api-maps.yandex.ru/2.0/?load=package.map&lang=ru-RU">
</script>
http://api.yandex.ru/maps/
Возможности работы с
графикой
• Отображение произвольных фигур на карте
Canvas
•
•
•
•
Растровая графика
Часть спецификации HTML5
Включает в себя HTML-тег и JS API
Широкая поддержка браузерами кроме
Internet Explorer (9+)
• Для Internet Explorer 7 и 8 можно
использовать JS библиотеку
explorercanvas
4
http://code.google.com/p/explorercanvas/
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";
5
SVG
• Векторная графика, которая описывается
XML
• Отдельная спецификация SVG
• Возможность вставлять SVG в HTML
(inline SVG)
• Можно работать при помощи JavaScript
как с DOM
• Широкая поддержка браузерами кроме
Internet Explorer (9+)
• Для старых версия Internet Explorer
можно использовать VML
6
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;');
7
Отображение многоугольника
var coords = [[57.72495,63.546779], [54.740667,70.050685],
[50.407949,66.798732], [53.291545,61.349513], [53.133264,52.999904]];
8
var polygon = new ymaps.Polygon([coords], {}, {
fillOpacity: 0.2,
strokeColor: '#7CE823',
fillColor: '#1C7BC9',
strokeWidth: 4,
draggable: true,
geodesic: true
});
Отображение фигур на карте
• Canvas
•
> SVG
Все современные браузеры
• VML
•
Internet Explorer < 9
• HTML-элементы
•
9
В некоторых случаях
Отображение карты
• Скорость и производительность работы карты
Тайлы карты
11
Способы отображения карты
• HTML-элемент IMG
• CSS свойство background-image
• Новые возможности работы с графикой
(Canvas, SVG)
• Сторонние плагины
12
Методы отображения тайлов карты
• Canvas
• Webkit кроме Safari, iOS, Android
• Internet Explorer 9 & 10
• Firefox
• HTML-элементы с фоном
• Safari, iOS, Android
• Opera
• Internet Explorer < 9
13
Методы позиционирования тайлов
position: absolute
<ymaps style="position: absolute; left: -162px;
top: -243px;" />
transform & translate
<ymaps style="transform: translate(-162px, -243px);" />
transform & translate3d
<ymaps style="transform: translate3d(-162px, -243px);" />
14
Методы отображения тайлов карты
• Canvas
•
position absolute
•
•
•
Internet Explorer 9
Webkit кроме Safari, iOS, Android
transform & translate3d
•
•
Firefox
Internet Explorer 10
• HTML-элементы с фоном
•
position absolute
•
•
transform & translate
•
•
Opera
transform & translate3d
•
15
Internet Explorer < 9
iOS, Android
CSS анимация
• Плавная анимация в некоторых
макетах
CSS анимация
• CSS Animations
• CSS Transitions
17
Использование CSS анимации
http://video.yandex.ru/users/v-shmyroff/view/4/
div {
transition: transform 1s ease-in-out;
}
.anim {
transform: translate(600px, 0px);
}
18
Макет балуна кластера «Аккордеон»
http://video.yandex.ru/users/v-shmyroff/view/2/
clusterer = new ymaps.Clusterer({
clusterBalloonContentBodyLayout:
"cluster#balloonAccordionContent"
});
19
http://bit.ly/balloon_accordion
Использование 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);
}
20
Управление префиксами браузеров
•
•
•
•
21
LESS
SASS
Stylus
-prefix-free
Событие transitionend
• В Internet Explorer 10, Firefox, Opera
>= 12 событие «transitionend»;
• Internet Explorer 9 событие
«MSTransitionEnd»;
• Opera < 12 событие «oTransitionEnd»;
• В Webkit событие
«webkitTransitionEnd».
22
Отмена анимации
http://video.yandex.ru/users/v-shmyroff/view/1/
23
Собственный макет с CSS анимацией
http://video.yandex.ru/users/v-shmyroff/view/3/
24
http://bit.ly/jsFiddle_vsesh
Собственный макет с 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); }
}
var layoutHTML = '<div class="arrow"></div>',
layout = ymaps.templateLayoutFactory.createClass(layoutHTML),
placemark = new ymaps.Placemark(coords, {}, { iconLayout: layout });
25
http://clck.ru/8drfh
Персонализация
скроллбара в WebKit
• Красивый скроллбар нативными
средствами
Cкроллбар в WebKit
.someClass
.someClass
.someClass
.someClass
...
27
::-webkit-scrollbar { ... }
::-webkit-scrollbar-track { ... }
::-webkit-scrollbar-thumb { ... }
::-webkit-scrollbar-thumb:hover { ... }
http://bit.ly/balloon_accordion
Geolocation API
• Получение местоположения
пользователя
Geolocation API
• Получение местоположение пользователя
• Все методы асинхронные
• Поддержка современными браузерами (IE9+,
Opera10.6+)
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);
}
29
http://bit.ly/geolocationAPI
События сенсорных
устройств
• Работа на сенсорных устройствах
Трансляция событий
Touch Events
Pointer Events
Mapper
Mouse Events
31
Использование событий в API
// Событие "mousedown" будет работать на всех устройствах.
ymaps.domEvent.manager.add(
htmlElement,
'mousedown',
callback
);
// Специальные multitouch* события.
ymaps.domEvent.manager.add(
htmlElement,
['multitouchstart', 'multitouchmove', 'multitouchend'],
callback
);
32
Touch Events
• Поддержка браузерами iOS и
стандартным браузером Android
• Определение событий, которые
описывают прикосновения (touchstart,
touchend …)
• Небольшие различия в реализациях
• Статус предложения в рекомендации
33
Pointer Events
• Поддерживается только Internet Explorer
10, но с префиксом ms
• Описание всех способов ввода единым
интерфейсом
• Статус кандидата в рекомендации
34
Локальное хранилище
• Сохранение данных на клиенте между
сессиями пользователя
Инициализация API Яндекс.Карт
<script type="text/javascript"
src="//api-maps.yandex.ru/2.0/?load=package.map&lang=ru-RU">
</script>
<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>
36
Сохранение
в
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));
}
37
Сохранение данных во flash модуле
Плюсы:
• 100кб под данные
• Доступность данных по домену
• Данные не нужно сериализовать
• Сохраненные данные доступны во всех браузерах
Минусы:
• Использование внешнего плагина
• Необходимость загружать дополнительные файлы
• Отсутствие поддержки мобильных ОС
38
Сохранение данных во flash модуле
ActionScript
sharedObject = SharedObject.getLocal("savedData");
ExternalInterface.addCallback("setData", function(data:Object):void
{
// Получение данных из JS
sharedObject.data[key] = data;
sharedObject.flush();
});
// Вызов функции в JS
ExternalInterface.call("initStorage", sharedObject.data);
JavaScript
function initStorage(storageData) {
// Получение данных из AS
}
// Вызов функции в AS
flashElement.setData({ key: value });
39
Web Storage
40
•
localStorage
• Бессрочное хранение данных
• Доступность данных по происхождению документа
•
sessionStorage
• Хранение данных до закрытия окна или закладки
• Доступность данных по происхождению документа +
по окну/закладке
Использование localStorage
var data1 = window.localStorage['key1'];
data1 = data1 ? data1.split('|') : [2, 2];
data1[0] = "1";
try {
window.localStorage['key1'] = data1.join('|');
}
catch (e) {
...
}
41
Использование 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) {
...
}
42
Web Storage
43
•
Плюсы:
• Предоставляется 5мб под данные
• Поддержка всеми современными браузерами (IE 8+,
Opera 11+)
•
Минусы:
• Same origin policy
• Работа только со строками
Возможность работать с БД
• Web SQL
• Интерфейс для передачи SQL команд БД
• IndexedDB
• Объектно-ориентированная модель
44
Web SQL
var 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 ... ');
});
}
45
IndexedDB
var 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) { ... }
46
IndexedDB & Web SQL
•
•
•
47
Плюсы обоих методов:
• Четкая структура данных
• Большой объем под данные
Минусы IndexedDB:
• Поддержка только Firefox, Chrome, IE10
• Same origin policy
• Различия в реализациях
Минусы Web SQL:
• Разработка спецификации остановлена в 2010
• Поддержка только Webkit и Opera
Полезные ссылки
api.yandex.ru/maps
clubs.ya.ru/mapsapi
facebook.com/ymapsapi
48
Всеволод Шмыров
Разработчик интерфейсов
API Яндекс.Карт
[email protected]
Спасибо!
