DUMP-2013 Frontend - Возможности последних WEB-стандартов в API Яндекс.Карт - Шмыров Всеволод

  • 3,190 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,190
On Slideshare
0
From Embeds
0
Number of Embeds
12

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. http://api.yandex.ru/maps/<script type="text/javascript"src="//api-maps.yandex.ru/2.0/?load=package.map&lang=ru-RU"></script>
  • 2. Возможности работы сграфикой•
  • 3. 4•••••http://code.google.com/p/explorercanvas/
  • 4. 5<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. 6••••••
  • 6. 7<body>...<svg xmlns="http://www.w3.org/2000/svg" version="1.1"height="190"><polygon id="poly" points="100,10 40,180 190,6010,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. 8var 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});
  • 8. 9• Canvas > SVG•• VML•• HTML-элементы•
  • 9.
  • 10. 11
  • 11. Способы отображения карты••••
  • 12. 13••••••••
  • 13. 14<ymaps style="position: absolute; left: -162px;top: -243px;" />:<ymaps style="transform: translate(-162px, -243px);" /><ymaps style="transform: translate3d(-162px, -243px);" />
  • 14. 15••••••••••••••
  • 15.
  • 16. 17CSS анимация• CSS Animations• CSS Transitions
  • 17. 18div {transition: transform 1s ease-in-out;}.anim {transform: translate(600px, 0px);}http://video.yandex.ru/users/v-shmyroff/view/4/
  • 18. 19http://bit.ly/balloon_accordionclusterer = new ymaps.Clusterer({clusterBalloonContentBodyLayout:"cluster#balloonAccordionContent"});http://video.yandex.ru/users/v-shmyroff/view/2/
  • 19. 20div {-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
  • 21. 22••••
  • 22. 23Отмена анимацииhttp://video.yandex.ru/users/v-shmyroff/view/1/
  • 23. 24http://bit.ly/jsFiddle_vseshhttp://video.yandex.ru/users/v-shmyroff/view/3/
  • 24. 25.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/8drfhvar layoutHTML = <div class="arrow"></div>,layout = ymaps.templateLayoutFactory.createClass(layoutHTML),placemark = new ymaps.Placemark(coords, {}, { iconLayout: layout });
  • 25. Персонализацияскроллбара в WebKit•
  • 26. 27.someClass ::-webkit-scrollbar { ... }.someClass ::-webkit-scrollbar-track { ... }.someClass ::-webkit-scrollbar-thumb { ... }.someClass ::-webkit-scrollbar-thumb:hover { ... }...http://bit.ly/balloon_accordion
  • 27.
  • 28. 29navigator.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+)
  • 29.
  • 30. 31
  • 31. 32// Событие "mousedown" будет работать на всех устройствах.ymaps.domEvent.manager.add(htmlElement,mousedown,callback);// Специальные multitouch* события.ymaps.domEvent.manager.add(htmlElement,[multitouchstart, multitouchmove, multitouchend],callback);
  • 32. 33••••
  • 33. 34•••
  • 34.
  • 35. 36<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>
  • 36. 37••••// запись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. 38•••••••
  • 38. 39sharedObject = SharedObject.getLocal("savedData");ExternalInterface.addCallback("setData", function(data:Object):void{// Получение данных из JSsharedObject.data[key] = data;sharedObject.flush();});// Вызов функции в JSExternalInterface.call("initStorage", sharedObject.data);function initStorage(storageData) {// Получение данных из AS}// Вызов функции в ASflashElement.setData({ key: value });
  • 39. 40••••••
  • 40. 41var data1 = window.localStorage[key1];data1 = data1 ? data1.split(|) : [2, 2];data1[0] = "1";try {window.localStorage[key1] = data1.join(|);}catch (e) {...}
  • 41. 42var data1 = window.localStorage.getItem(key1);data1 = data1 ? data1.split(|) : [2, 2];data1[0] = "1";try {window.localStorage.setItem(key1, data1.join(|));}catch (e) {...}
  • 42. 43••••••
  • 43. 44Возможность работать с БД••••
  • 44. 45var db = openDatabase(test, 1.0,comment, 1024 * 1024);if(db) {db.transaction(function (transaction) {transaction.executeSql(CREATE TABLE IF NOTEXISTS ... );});...db.transaction(function (transaction) {transaction.executeSql(SELECT * FROM ... );});}
  • 45. 46var 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. 47••••••••••
  • 47. 48