1 / 49

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

Возможности последних WEB-стандартов на примере их использования в API Яндекс.Карт. Всеволод Шмыров Разработчик интерфейсов API Яндекс.Карт. API Яндекс.Карт. <script type="text/ javascript " src ="// api-maps.yandex.ru/2.0 /?load= package.map&lang = ru -RU"> </script>.

rhona-mooney
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Возможности последних WEB-стандартов на примере их использования в API Яндекс.Карт Всеволод Шмыров Разработчик интерфейсов API Яндекс.Карт

  2. API Яндекс.Карт <script type="text/javascript" src="//api-maps.yandex.ru/2.0/?load=package.map&lang=ru-RU"> </script> http://api.yandex.ru/maps/

  3. Отображение произвольных фигур на карте Возможности работы с графикой

  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> varcanvasElement = document.getElementById("example"), canvas2DContext = canvasElement.getContext("2d"); ... // Отображение черного прямоугольника. canvas2DContext.fillStyle = "#000000"; canvas2DContext.fillRect(0, 0, canvasElement.width, canvasElement.height); ... // Вывод изображения varimg = 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> ... <svgxmlns="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> varpolygonElement= document.getElementById('poly'); polygonElement.setAttribute('style', 'fill:#000000;stroke:purple;stroke-width:1;');

  8. Отображение многоугольника varcoords = [[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-элементы • В некоторых случаях

  10. Скорость и производительность работы карты Отображение карты

  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. Методы позиционирования тайлов <ymapsstyle="position: absolute; left: -162px; top: -243px;" /> <ymaps style="transform: translate(-162px, -243px);" /> <ymaps style="transform: translate3d(-162px, -243px);" /> position: absolute transform & translate 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

  16. Плавная анимация в некоторых макетах 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. Макет балуна кластера «Аккордеон» clusterer = new ymaps.Clusterer({ clusterBalloonContentBodyLayout: "cluster#balloonAccordionContent" }); http://video.yandex.ru/users/v-shmyroff/view/2/ http://bit.ly/balloon_accordion

  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. Отмена анимации http://video.yandex.ru/users/v-shmyroff/view/1/

  24. Собственный макет с CSS анимацией http://video.yandex.ru/users/v-shmyroff/view/3/ 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; } @keyframesarrow_animation { 0% { transform: translate(-30px, -100px) rotate(45deg); } 60% { ... } 100% { transform: translate(-30px, -65px) rotate(45deg); } } varlayoutHTML = '<div class="arrow"></div>', layout = ymaps.templateLayoutFactory.createClass(layoutHTML), placemark = new ymaps.Placemark(coords, {}, { iconLayout: layout }); http://clck.ru/8drfh

  26. Красивый скроллбарнативными средствами Персонализация скроллбара в 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

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

  29. Geolocation API navigator.geolocation.getCurrentPosition(onSuccess, onError); function onSuccess(position) { varcoords = [position.coords.latitude, position.coords.longitude]; varplacemark = new ymaps.Placemark(coords); map.geoObjects.add(placemark); map.setCenter(coords); } function onError(positionError) { console.log(positionError.message); } • Получение местоположение пользователя • Все методы асинхронные • Поддержка современными браузерами (IE9+, Opera10.6+) http://bit.ly/geolocationAPI

  30. Работа на сенсорных устройствах События сенсорных устройств

  31. Трансляция событий Touch Events Pointer Events Mapper Mouse Events

  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 Описание всех способов ввода единым интерфейсом Статус кандидата в рекомендации

  35. Сохранение данныхна клиенте между сессиями пользователя Локальное хранилище

  36. Инициализация 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>

  37. Плюсы: Работа во всех браузерах Доступность данных по домену Минусы: Данные постоянно отправляются в заголовках Малый объем предоставляемого пространства под данные Сохранение в cookie // запись document.cookie = key + '=' + escape(value); // получение varcookieData = document.cookie.split('; '); for(vari = 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 { // Получение данных из JS sharedObject.data[key] = data; sharedObject.flush(); }); // Вызов функции в JS ExternalInterface.call("initStorage", sharedObject.data); function initStorage(storageData) { // Получение данныхиз AS } // Вызов функции в AS flashElement.setData({key: value }); ActionScript 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 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 ... '); }); }

  46. IndexedDB varindexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB, request = indexedDB.open(indexedDBName); request.onsuccess = function (event) { var db = event.result; if(db.version != '1.0) { // Создание базы данных. varsetVersionRequest = 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/maps clubs.ya.ru/mapsapi facebook.com/ymapsapi

  49. Всеволод Шмыров Разработчик интерфейсов API Яндекс.Карт vsesh@yandex-team.ru Спасибо!

More Related