Elena Gluhova
44
Я.Субботник, Киев, 28 мая 2011 года Разработчик интерфейсов Г лухова Елена API Яндекс.Карт и верстка кастомными тегами Friday, May 27, 2011
description
Верстка кастомными тегами для API Яндекс.Карт
Transcript of Elena Gluhova
Я.Субботник, Киев, 28 мая 2011 года
Разработчик интерфейсовГлухова Елена
API Яндекс.Карт и версткакастомными тегами
Friday, May 27, 2011
API Яндекс.Карт и верстка кастомными тегами
2
Friday, May 27, 2011
YMaps JavaScript API
3
Friday, May 27, 2011
4
Friday, May 27, 2011
Цель
Оптимизация и усовершенствование
верстки API.Карт
5
Friday, May 27, 2011
Задачи
6
Защитить нашу верстку от верстки пользователей
Friday, May 27, 2011
Задачи
7
Защитить нашу верстку от верстки пользователей
Защитить верстку пользователя от верстки API.Карт
Friday, May 27, 2011
Задачи
8
Защитить нашу верстку от верстки пользователей
Защитить верстку пользователя от верстки API.Карт
Позволить верстке пользователей жить внутри нашей верстки
Friday, May 27, 2011
9
<div class=“YMaps-balloon”><i class=“YMaps-balloon-top”></i>...
Как было
Friday, May 27, 2011
10
<div class=“YMaps-balloon”><i class=“YMaps-balloon-top”></i>...
Как было
Friday, May 27, 2011
11
Что может случиться
div { margin: 20px 0 20px 20px; }
Friday, May 27, 2011
12
Что может случиться
div { margin: 20px 0 20px 20px; }
Friday, May 27, 2011
Придумали использовать кастомные теги
13
Friday, May 27, 2011
Придумали использовать кастомные теги
14
<mytags> ... </mytags>
Friday, May 27, 2011
Придумали использовать кастомные теги
15
<mytags> ... </mytags>
Что получаем?
Friday, May 27, 2011
Придумали использовать кастомные теги
16
<mytags> ... </mytags>
Что получаем? Уникальность
Friday, May 27, 2011
17
Где нужна уникальность?
Friday, May 27, 2011
18
Где нужна уникальность?
Friday, May 27, 2011
19
Где нужна уникальность?
Friday, May 27, 2011
20
Где нужна уникальность?
Friday, May 27, 2011
Работает? Да!
21
Firefox, Opera, Safari, Chrome
Friday, May 27, 2011
22
За исключением ... IE < 9 :-(
Friday, May 27, 2011
23
Как победить IE?
Friday, May 27, 2011
24
document.createElement(“custom-tag”); ...
<custom-tag>Я.Уникальный</custom-tag>
Создание кастомных тегов в DOM-е при помощи JavaScript-а
Как победить IE?
Friday, May 27, 2011
25
Ещё ...
Импорт кастомных тегов
<html xmlns:prefix[=urn] ...
Friday, May 27, 2011
Почему пространство имен?
26
Friday, May 27, 2011
Почему пространство имен?
1. Официальный способ поддержки кастомных тегов в IE, начиная с версии 5.5
27
Friday, May 27, 2011
Почему пространство имен?
1. Официальный способ поддержки кастомных тегов в IE, начиная с версии 5.5
2. Сводит к минимуму совпадения
28
Friday, May 27, 2011
Почему пространство имен?
1. Официальный способ поддержки кастомных тегов в IE, начиная с версии 5.5
2. Сводит к минимуму совпадения
3. Не использует document.create.Element()
29
Friday, May 27, 2011
На практике ...
30
Friday, May 27, 2011
<html xmlns:ymaps xmlns:“http://www.w3.org/1999/xhtml”> ...
На практике ...
31
Friday, May 27, 2011
<html xmlns:ymaps xmlns:“http://www.w3.org/1999/xhtml”> ...
На практике ...
32
<ymaps:balloon><ymaps:balloon-top>
...
Friday, May 27, 2011
@media all {
ymaps\:balloon {...
}
ymaps\:balloon-top {...
}}
33
Friday, May 27, 2011
34
Friday, May 27, 2011
Супер — работает!
35
Firefox, Opera, Safari, Chrome
Friday, May 27, 2011
36
За исключением ... IE < 9 :-(
Friday, May 27, 2011
IE не инициализирует свое пространство имен до полной загрузки документа
37
За исключением ... IE < 9 :-(
Friday, May 27, 2011
Резюме
38
Частично задачи выполнены
Friday, May 27, 2011
Резюме
39
Частично задачи выполнены
Там где можно — кастомную верстку
Friday, May 27, 2011
Резюме
40
Частично задачи выполнены
Там где можно — кастомную верстку
IE — дивную верстку
Friday, May 27, 2011
Cветлое будущее
41
<ymaps> ... </ymaps>
Friday, May 27, 2011
Cветлое будущее
42
<ymaps> ... </ymaps>
<ymaps class=“YMaps-balloon”>...
</ymaps>
Friday, May 27, 2011
Вопросы?
43
Friday, May 27, 2011
Глухова ЕленаРазработчик интерфейсов
Friday, May 27, 2011
