DUMP-2013 Frontend - Возможности последних WEB-стандартов в 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
•
•
•
•
•
http://code.google.com/p/explorercanvas/

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

7
<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
•
• HTML-элементы
•

Способы отображения карты
•
•
•
•

13
•
•
•
•
•
•
•
•

14
<ymaps style="position: absolute; left: -162px;
top: -243px;" />
:
<ymaps style="transform: translate(-162px, -243px);" />
<ymaps style="transform: translate3d(-162px, -243px);" />

15
•
•
•
•
•
•
•
•
•
•
•
•
•
•

17
CSS анимация
• CSS Animations
• CSS Transitions

18
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
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

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

24
http://bit.ly/jsFiddle_vsesh

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/8drfh
var layoutHTML = '<div class="arrow"></div>',
layout = ymaps.templateLayoutFactory.createClass(layoutHTML),
placemark = new ymaps.Placemark(coords, {}, { iconLayout: layout });

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

27
.someClass ::-webkit-scrollbar { ... }
.someClass ::-webkit-scrollbar-track { ... }
.someClass ::-webkit-scrollbar-thumb { ... }
.someClass ::-webkit-scrollbar-thumb:hover { ... }
...
http://bit.ly/balloon_accordion

29
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
// Событие "mousedown" будет работать на всех устройствах.
ymaps.domEvent.manager.add(
htmlElement,
'mousedown',
callback
);
// Специальные multitouch* события.
ymaps.domEvent.manager.add(
htmlElement,
['multitouchstart', 'multitouchmove', 'multitouchend'],
callback
);

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>

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

38
•
•
•
•
•
•
•

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

41
var data1 = window.localStorage['key1'];
data1 = data1 ? data1.split('|') : [2, 2];
data1[0] = "1";
try {
window.localStorage['key1'] = data1.join('|');
}
catch (e) {
...
}

42
var data1 = window.localStorage.getItem('key1');
data1 = data1 ? data1.split('|') : [2, 2];
data1[0] = "1";
try {
window.localStorage.setItem('key1', data1.join('|'));
}
catch (e) {
...
}

44
Возможность работать с БД
•
•
•
•

45
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
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) { ... }

47
•
•
•
•
•
•
•
•
•
•

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

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

More Related Content

What's hot

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

More from it-people

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