SlideShare a Scribd company logo
API Яндекс.Карт и верстка
                кастомными тегами
                Глухова Елена
                Разработчик интерфейсов



                Я.Субботник, Киев, 28 мая 2011 года



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
Задачи

               Защитить нашу верстку от верстки
               пользователей
               Защитить верстку пользователя от
               верстки API.Карт




                7
Friday, May 27, 2011
Задачи

               Защитить нашу верстку от верстки
               пользователей
               Защитить верстку пользователя от
               верстки API.Карт
               Позволить верстке пользователей жить
               внутри нашей верстки


                8
Friday, May 27, 2011
Как было

                  <div class=“YMaps-balloon”>
                    <i class=“YMaps-balloon-top”></i>
                      ...




                9
Friday, May 27, 2011
Как было

                  <div class=“YMaps-balloon”>
                    <i class=“YMaps-balloon-top”></i>
                      ...




                10
Friday, May 27, 2011
Что может случиться

                  div { margin: 20px 0 20px 20px; }




                11
Friday, May 27, 2011
Что может случиться

                  div { margin: 20px 0 20px 20px; }




                12
Friday, May 27, 2011
Придумали использовать
                          кастомные теги




                13
Friday, May 27, 2011
Придумали использовать
                          кастомные теги
                  <mytags> ... </mytags>




                14
Friday, May 27, 2011
Придумали использовать
                          кастомные теги
                  <mytags> ... </mytags>



                Что получаем?



                15
Friday, May 27, 2011
Придумали использовать
                          кастомные теги
                  <mytags> ... </mytags>



                Что получаем?
                          Уникальность


                16
Friday, May 27, 2011
Где нужна уникальность?




                17
Friday, May 27, 2011
Где нужна уникальность?




                18
Friday, May 27, 2011
Где нужна уникальность?




                19
Friday, May 27, 2011
Где нужна уникальность?




                20
Friday, May 27, 2011
Работает? Да!

                Firefox, Opera,
                         Safari, Chrome




                21
Friday, May 27, 2011
За исключением ...
                              IE < 9
                                   :-(

                22
Friday, May 27, 2011
Как победить IE?




                23
Friday, May 27, 2011
Как победить IE?

               Создание кастомных тегов в DOM-е при помощи
               JavaScript-а

                   document.createElement(“custom-tag”);
                        ...

                   <custom-tag>Я.Уникальный</custom-tag>




                24
Friday, May 27, 2011
Ещё ...

               Импорт кастомных тегов

                   <html xmlns:prefix[=urn]
                        ...




                25
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”>
                        ...


                   <ymaps:balloon>
                     <ymaps:balloon-top>
                        ...




                32
Friday, May 27, 2011
@media all {

                       ymaps:balloon {
                         ...
                       }

                       ymaps:balloon-top {
                         ...
                       }
                   }




                33
Friday, May 27, 2011
34
Friday, May 27, 2011
Супер — работает!

                Firefox, Opera,
                         Safari, Chrome




                35
Friday, May 27, 2011
За исключением ...
                              IE < 9
                                   :-(


                36
Friday, May 27, 2011
За исключением ...
                              IE < 9
                                          :-(
                IE не инициализирует свое пространство
                имен до полной загрузки документа




                37
Friday, May 27, 2011
Резюме

               Частично задачи выполнены




                38
Friday, May 27, 2011
Резюме

               Частично задачи выполнены
               Там где можно — кастомную верстку




                39
Friday, May 27, 2011
Резюме

               Частично задачи выполнены
               Там где можно — кастомную верстку
               IE — дивную верстку




                40
Friday, May 27, 2011
Cветлое будущее

                   <ymaps> ... </ymaps>




                41
Friday, May 27, 2011
Cветлое будущее

                   <ymaps> ... </ymaps>



                   <ymaps class=“YMaps-balloon”>
                     ...
                   </ymaps>




                42
Friday, May 27, 2011
Вопросы?




                43
Friday, May 27, 2011
Глухова Елена
                       Разработчик интерфейсов

                       lento4ka@yandex-team.ru




Friday, May 27, 2011

More Related Content

Similar to Elena Gluhova

ITConnect 2011-Автоматизация автоматизациии web разработки
ITConnect 2011-Автоматизация автоматизациии web разработкиITConnect 2011-Автоматизация автоматизациии web разработки
ITConnect 2011-Автоматизация автоматизациии web разработкиВладимир Винников
 
Использование библиотеки bem-bl
Использование библиотеки bem-blИспользование библиотеки bem-bl
Использование библиотеки bem-blVarya Stepanova
 
Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухов...
Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухов...Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухов...
Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухов...yaevents
 
Александ Черный «XCode 4: Штуки и муки»
Александ Черный «XCode 4: Штуки и муки»Александ Черный «XCode 4: Штуки и муки»
Александ Черный «XCode 4: Штуки и муки»e-Legion
 
i-bem.js: JavaScript в БЭМ-терминах. Елена Глухова, Варвара Степанова, Яндекс
i-bem.js: JavaScript в БЭМ-терминах. Елена Глухова, Варвара Степанова, Яндексi-bem.js: JavaScript в БЭМ-терминах. Елена Глухова, Варвара Степанова, Яндекс
i-bem.js: JavaScript в БЭМ-терминах. Елена Глухова, Варвара Степанова, Яндексyaevents
 
JavaScript в БЭМ терминах
JavaScript в БЭМ терминахJavaScript в БЭМ терминах
JavaScript в БЭМ терминахVarya Stepanova
 

Similar to Elena Gluhova (6)

ITConnect 2011-Автоматизация автоматизациии web разработки
ITConnect 2011-Автоматизация автоматизациии web разработкиITConnect 2011-Автоматизация автоматизациии web разработки
ITConnect 2011-Автоматизация автоматизациии web разработки
 
Использование библиотеки bem-bl
Использование библиотеки bem-blИспользование библиотеки bem-bl
Использование библиотеки bem-bl
 
Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухов...
Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухов...Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухов...
Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухов...
 
Александ Черный «XCode 4: Штуки и муки»
Александ Черный «XCode 4: Штуки и муки»Александ Черный «XCode 4: Штуки и муки»
Александ Черный «XCode 4: Штуки и муки»
 
i-bem.js: JavaScript в БЭМ-терминах. Елена Глухова, Варвара Степанова, Яндекс
i-bem.js: JavaScript в БЭМ-терминах. Елена Глухова, Варвара Степанова, Яндексi-bem.js: JavaScript в БЭМ-терминах. Елена Глухова, Варвара Степанова, Яндекс
i-bem.js: JavaScript в БЭМ-терминах. Елена Глухова, Варвара Степанова, Яндекс
 
JavaScript в БЭМ терминах
JavaScript в БЭМ терминахJavaScript в БЭМ терминах
JavaScript в БЭМ терминах
 

More from yaevents

Как научить роботов тестировать веб-интерфейсы. Артем Ерошенко, Илья Кацев, Я...
Как научить роботов тестировать веб-интерфейсы. Артем Ерошенко, Илья Кацев, Я...Как научить роботов тестировать веб-интерфейсы. Артем Ерошенко, Илья Кацев, Я...
Как научить роботов тестировать веб-интерфейсы. Артем Ерошенко, Илья Кацев, Я...yaevents
 
Тема для WordPress в БЭМ. Владимир Гриненко, Яндекс
Тема для WordPress в БЭМ. Владимир Гриненко, ЯндексТема для WordPress в БЭМ. Владимир Гриненко, Яндекс
Тема для WordPress в БЭМ. Владимир Гриненко, Яндексyaevents
 
Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Я...
Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Я...Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Я...
Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Я...yaevents
 
Модели в профессиональной инженерии и тестировании программ. Александр Петрен...
Модели в профессиональной инженерии и тестировании программ. Александр Петрен...Модели в профессиональной инженерии и тестировании программ. Александр Петрен...
Модели в профессиональной инженерии и тестировании программ. Александр Петрен...yaevents
 
Администрирование небольших сервисов или один за всех и 100 на одного. Роман ...
Администрирование небольших сервисов или один за всех и 100 на одного. Роман ...Администрирование небольших сервисов или один за всех и 100 на одного. Роман ...
Администрирование небольших сервисов или один за всех и 100 на одного. Роман ...yaevents
 
Мониторинг со всех сторон. Алексей Симаков, Яндекс
Мониторинг со всех сторон. Алексей Симаков, ЯндексМониторинг со всех сторон. Алексей Симаков, Яндекс
Мониторинг со всех сторон. Алексей Симаков, Яндексyaevents
 
Истории про разработку сайтов. Сергей Бережной, Яндекс
Истории про разработку сайтов. Сергей Бережной, ЯндексИстории про разработку сайтов. Сергей Бережной, Яндекс
Истории про разработку сайтов. Сергей Бережной, Яндексyaevents
 
Разработка приложений для Android на С++. Юрий Береза, Shturmann
Разработка приложений для Android на С++. Юрий Береза, ShturmannРазработка приложений для Android на С++. Юрий Береза, Shturmann
Разработка приложений для Android на С++. Юрий Береза, Shturmannyaevents
 
Кросс-платформенная разработка под мобильные устройства. Дмитрий Жестилевский...
Кросс-платформенная разработка под мобильные устройства. Дмитрий Жестилевский...Кросс-платформенная разработка под мобильные устройства. Дмитрий Жестилевский...
Кросс-платформенная разработка под мобильные устройства. Дмитрий Жестилевский...yaevents
 
Сложнейшие техники, применяемые буткитами и полиморфными вирусами. Вячеслав З...
Сложнейшие техники, применяемые буткитами и полиморфными вирусами. Вячеслав З...Сложнейшие техники, применяемые буткитами и полиморфными вирусами. Вячеслав З...
Сложнейшие техники, применяемые буткитами и полиморфными вирусами. Вячеслав З...yaevents
 
Сканирование уязвимостей со вкусом Яндекса. Тарас Иващенко, Яндекс
Сканирование уязвимостей со вкусом Яндекса. Тарас Иващенко, ЯндексСканирование уязвимостей со вкусом Яндекса. Тарас Иващенко, Яндекс
Сканирование уязвимостей со вкусом Яндекса. Тарас Иващенко, Яндексyaevents
 
Масштабируемость Hadoop в Facebook. Дмитрий Мольков, Facebook
Масштабируемость Hadoop в Facebook. Дмитрий Мольков, FacebookМасштабируемость Hadoop в Facebook. Дмитрий Мольков, Facebook
Масштабируемость Hadoop в Facebook. Дмитрий Мольков, Facebookyaevents
 
Контроль зверей: инструменты для управления и мониторинга распределенных сист...
Контроль зверей: инструменты для управления и мониторинга распределенных сист...Контроль зверей: инструменты для управления и мониторинга распределенных сист...
Контроль зверей: инструменты для управления и мониторинга распределенных сист...yaevents
 
Юнит-тестирование и Google Mock. Влад Лосев, Google
Юнит-тестирование и Google Mock. Влад Лосев, GoogleЮнит-тестирование и Google Mock. Влад Лосев, Google
Юнит-тестирование и Google Mock. Влад Лосев, Googleyaevents
 
C++11 (formerly known as C++0x) is the new C++ language standard. Dave Abraha...
C++11 (formerly known as C++0x) is the new C++ language standard. Dave Abraha...C++11 (formerly known as C++0x) is the new C++ language standard. Dave Abraha...
C++11 (formerly known as C++0x) is the new C++ language standard. Dave Abraha...yaevents
 
Зачем обычному программисту знать языки, на которых почти никто не пишет. Але...
Зачем обычному программисту знать языки, на которых почти никто не пишет. Але...Зачем обычному программисту знать языки, на которых почти никто не пишет. Але...
Зачем обычному программисту знать языки, на которых почти никто не пишет. Але...yaevents
 
В поисках математики. Михаил Денисенко, Нигма
В поисках математики. Михаил Денисенко, НигмаВ поисках математики. Михаил Денисенко, Нигма
В поисках математики. Михаил Денисенко, Нигмаyaevents
 
Using classifiers to compute similarities between face images. Prof. Lior Wol...
Using classifiers to compute similarities between face images. Prof. Lior Wol...Using classifiers to compute similarities between face images. Prof. Lior Wol...
Using classifiers to compute similarities between face images. Prof. Lior Wol...yaevents
 
Поисковая технология "Спектр". Андрей Плахов, Яндекс
Поисковая технология "Спектр". Андрей Плахов, ЯндексПоисковая технология "Спектр". Андрей Плахов, Яндекс
Поисковая технология "Спектр". Андрей Плахов, Яндексyaevents
 
Julia Stoyanovich - Making interval-based clustering rank-aware
Julia Stoyanovich - Making interval-based clustering rank-awareJulia Stoyanovich - Making interval-based clustering rank-aware
Julia Stoyanovich - Making interval-based clustering rank-awareyaevents
 

More from yaevents (20)

Как научить роботов тестировать веб-интерфейсы. Артем Ерошенко, Илья Кацев, Я...
Как научить роботов тестировать веб-интерфейсы. Артем Ерошенко, Илья Кацев, Я...Как научить роботов тестировать веб-интерфейсы. Артем Ерошенко, Илья Кацев, Я...
Как научить роботов тестировать веб-интерфейсы. Артем Ерошенко, Илья Кацев, Я...
 
Тема для WordPress в БЭМ. Владимир Гриненко, Яндекс
Тема для WordPress в БЭМ. Владимир Гриненко, ЯндексТема для WordPress в БЭМ. Владимир Гриненко, Яндекс
Тема для WordPress в БЭМ. Владимир Гриненко, Яндекс
 
Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Я...
Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Я...Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Я...
Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Я...
 
Модели в профессиональной инженерии и тестировании программ. Александр Петрен...
Модели в профессиональной инженерии и тестировании программ. Александр Петрен...Модели в профессиональной инженерии и тестировании программ. Александр Петрен...
Модели в профессиональной инженерии и тестировании программ. Александр Петрен...
 
Администрирование небольших сервисов или один за всех и 100 на одного. Роман ...
Администрирование небольших сервисов или один за всех и 100 на одного. Роман ...Администрирование небольших сервисов или один за всех и 100 на одного. Роман ...
Администрирование небольших сервисов или один за всех и 100 на одного. Роман ...
 
Мониторинг со всех сторон. Алексей Симаков, Яндекс
Мониторинг со всех сторон. Алексей Симаков, ЯндексМониторинг со всех сторон. Алексей Симаков, Яндекс
Мониторинг со всех сторон. Алексей Симаков, Яндекс
 
Истории про разработку сайтов. Сергей Бережной, Яндекс
Истории про разработку сайтов. Сергей Бережной, ЯндексИстории про разработку сайтов. Сергей Бережной, Яндекс
Истории про разработку сайтов. Сергей Бережной, Яндекс
 
Разработка приложений для Android на С++. Юрий Береза, Shturmann
Разработка приложений для Android на С++. Юрий Береза, ShturmannРазработка приложений для Android на С++. Юрий Береза, Shturmann
Разработка приложений для Android на С++. Юрий Береза, Shturmann
 
Кросс-платформенная разработка под мобильные устройства. Дмитрий Жестилевский...
Кросс-платформенная разработка под мобильные устройства. Дмитрий Жестилевский...Кросс-платформенная разработка под мобильные устройства. Дмитрий Жестилевский...
Кросс-платформенная разработка под мобильные устройства. Дмитрий Жестилевский...
 
Сложнейшие техники, применяемые буткитами и полиморфными вирусами. Вячеслав З...
Сложнейшие техники, применяемые буткитами и полиморфными вирусами. Вячеслав З...Сложнейшие техники, применяемые буткитами и полиморфными вирусами. Вячеслав З...
Сложнейшие техники, применяемые буткитами и полиморфными вирусами. Вячеслав З...
 
Сканирование уязвимостей со вкусом Яндекса. Тарас Иващенко, Яндекс
Сканирование уязвимостей со вкусом Яндекса. Тарас Иващенко, ЯндексСканирование уязвимостей со вкусом Яндекса. Тарас Иващенко, Яндекс
Сканирование уязвимостей со вкусом Яндекса. Тарас Иващенко, Яндекс
 
Масштабируемость Hadoop в Facebook. Дмитрий Мольков, Facebook
Масштабируемость Hadoop в Facebook. Дмитрий Мольков, FacebookМасштабируемость Hadoop в Facebook. Дмитрий Мольков, Facebook
Масштабируемость Hadoop в Facebook. Дмитрий Мольков, Facebook
 
Контроль зверей: инструменты для управления и мониторинга распределенных сист...
Контроль зверей: инструменты для управления и мониторинга распределенных сист...Контроль зверей: инструменты для управления и мониторинга распределенных сист...
Контроль зверей: инструменты для управления и мониторинга распределенных сист...
 
Юнит-тестирование и Google Mock. Влад Лосев, Google
Юнит-тестирование и Google Mock. Влад Лосев, GoogleЮнит-тестирование и Google Mock. Влад Лосев, Google
Юнит-тестирование и Google Mock. Влад Лосев, Google
 
C++11 (formerly known as C++0x) is the new C++ language standard. Dave Abraha...
C++11 (formerly known as C++0x) is the new C++ language standard. Dave Abraha...C++11 (formerly known as C++0x) is the new C++ language standard. Dave Abraha...
C++11 (formerly known as C++0x) is the new C++ language standard. Dave Abraha...
 
Зачем обычному программисту знать языки, на которых почти никто не пишет. Але...
Зачем обычному программисту знать языки, на которых почти никто не пишет. Але...Зачем обычному программисту знать языки, на которых почти никто не пишет. Але...
Зачем обычному программисту знать языки, на которых почти никто не пишет. Але...
 
В поисках математики. Михаил Денисенко, Нигма
В поисках математики. Михаил Денисенко, НигмаВ поисках математики. Михаил Денисенко, Нигма
В поисках математики. Михаил Денисенко, Нигма
 
Using classifiers to compute similarities between face images. Prof. Lior Wol...
Using classifiers to compute similarities between face images. Prof. Lior Wol...Using classifiers to compute similarities between face images. Prof. Lior Wol...
Using classifiers to compute similarities between face images. Prof. Lior Wol...
 
Поисковая технология "Спектр". Андрей Плахов, Яндекс
Поисковая технология "Спектр". Андрей Плахов, ЯндексПоисковая технология "Спектр". Андрей Плахов, Яндекс
Поисковая технология "Спектр". Андрей Плахов, Яндекс
 
Julia Stoyanovich - Making interval-based clustering rank-aware
Julia Stoyanovich - Making interval-based clustering rank-awareJulia Stoyanovich - Making interval-based clustering rank-aware
Julia Stoyanovich - Making interval-based clustering rank-aware
 

Elena Gluhova