Приложения для соцсетей. Универсальные приложения на...
TRANSCRIPT
![Page 1: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/1.jpg)
Я.Субботник, Киев, 5 мая 2012 года
Разработчик интерфейсовАлександр Титула-Бойченко
Приложения для соцсетей.Универсальные приложения на БЭМ
![Page 2: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/2.jpg)
Зачем?
2
![Page 3: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/3.jpg)
Зачем?
2
— Аудитория свыше 25 млн. пользователей
![Page 4: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/4.jpg)
Зачем?
2
— Аудитория свыше 25 млн. пользователей
— Реклама товаров и услуг
![Page 5: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/5.jpg)
Зачем?
2
— Аудитория свыше 25 млн. пользователей
— Реклама товаров и услуг
— Способ заработка денег
![Page 6: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/6.jpg)
Зачем?
2
— Аудитория свыше 25 млн. пользователей
— Реклама товаров и услуг
— Способ заработка денег
— Способ взаимодействия с пользователями
![Page 7: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/7.jpg)
Как?
3
![Page 8: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/8.jpg)
Как?
3
— iFrame
![Page 9: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/9.jpg)
Как?
3
— iFrame
— Любые технологии, поддерживаемые браузером
![Page 10: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/10.jpg)
Как?
3
— iFrame
— Любые технологии, поддерживаемые браузером
— JavaScript API для взаимодействия с соцсетью
![Page 11: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/11.jpg)
Яндекс.Фотки
4
![Page 12: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/12.jpg)
Яндекс.Фотки
4
— Хостинг фотографий от Яндекса
![Page 13: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/13.jpg)
Яндекс.Фотки
4
— Хостинг фотографий от Яндекса
— Без ограничений на размер фотографии
![Page 14: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/14.jpg)
Яндекс.Фотки
4
— Хостинг фотографий от Яндекса
— Без ограничений на размер фотографии
— Без ограничений на количество фотографий
![Page 15: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/15.jpg)
Яндекс.Фотки
4
— Хостинг фотографий от Яндекса
— Без ограничений на размер фотографии
— Без ограничений на количество фотографий
— Альбомы, метки, геотеги, комментарии, EXIF и тд.
![Page 16: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/16.jpg)
Яндекс.Фотки
4
— Хостинг фотографий от Яндекса
— Без ограничений на размер фотографии
— Без ограничений на количество фотографий
— Альбомы, метки, геотеги, комментарии, EXIF и тд.
— Бесплатно
![Page 17: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/17.jpg)
Фото дня
5
![Page 19: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/19.jpg)
Задача
7
![Page 20: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/20.jpg)
Задача
7
— Показывать Фото дня на Яндекс.Фотках
![Page 21: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/21.jpg)
Задача
7
— Показывать Фото дня на Яндекс.Фотках
— Подстраивание под текущую социальную сеть
![Page 22: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/22.jpg)
Задача
7
— Показывать Фото дня на Яндекс.Фотках
— Подстраивание под текущую социальную сеть
— дизайном
![Page 23: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/23.jpg)
Задача
7
— Показывать Фото дня на Яндекс.Фотках
— Подстраивание под текущую социальную сеть
— дизайном
— функциональностью
![Page 24: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/24.jpg)
Пожелания разработчиков
8
![Page 25: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/25.jpg)
Пожелания разработчиков
8
— Наличие ядра проекта, в котором реализована базовая функциональность
![Page 26: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/26.jpg)
Пожелания разработчиков
8
— Наличие ядра проекта, в котором реализована базовая функциональность
— Быстро создавать новые приложения для других социальных сетей
![Page 27: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/27.jpg)
Пожелания разработчиков
8
— Наличие ядра проекта, в котором реализована базовая функциональность
— Быстро создавать новые приложения для других социальных сетей
— Легко модифицировать все приложение или его отдельные модули
![Page 28: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/28.jpg)
Реализация
9
![Page 30: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/30.jpg)
Уровни переопределения
11
Уровень переопределения — это набор реализаций блоков, сгруппированных в одну директорию
![Page 31: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/31.jpg)
Уровни переопределения
12
На проекте может быть несколько
![Page 32: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/32.jpg)
Уровни переопределения
13
Подключив код с разных уровней переопределения получаем готовый продукт
![Page 33: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/33.jpg)
BEM-tools
14
clck.ru/Pb65
Инструменты для работы с файлами, написанными по БЭМ методу
![Page 34: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/34.jpg)
Фоторама
15
Симпатичная javascript-галерея
fotoramajs.com
![Page 35: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/35.jpg)
BEM-bl
16
Библиотека блоков, написанная по БЭМ методу
clck.ru/Kuu4
![Page 36: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/36.jpg)
Технологии
17
![Page 37: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/37.jpg)
Технологии
17
— bemjson
![Page 38: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/38.jpg)
Технологии
17
— bemjson
— bemhtml
![Page 39: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/39.jpg)
Технологии
17
— bemjson
— bemhtml
— i-bem.js
![Page 40: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/40.jpg)
bemjson
18
{ block: 'b-gallery', content: { block: 'b-fotorama', elem: 'preloader', content: 'Загрузка данных...'}
Like JSON формат описания БЭМ дерева документа
![Page 41: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/41.jpg)
bemhtml
19
block b-gallery { attrs: { id: 'fotorama'},}
JavaScript шаблонизатор для преобразования bemjson в HTML
![Page 42: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/42.jpg)
bemjson+bemhtml=HTML
20
<div class="b-gallery" id="fotorama"> <div class="b-fotorama__preloader"> Загрузка данных...
</div></div>
Наложением bemhtml на bemjson получаем HTML
![Page 43: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/43.jpg)
i-bem.js
21
Это JavaScript библиотека умеющая работать с документом в БЭМ-терминах.
![Page 45: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/45.jpg)
Ядро
23
![Page 46: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/46.jpg)
Ядро
23
Уровни переопределения:
![Page 47: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/47.jpg)
Ядро
23
Уровни переопределения:
— bem-bl
![Page 48: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/48.jpg)
Ядро
23
Уровни переопределения:
— bem-bl
— blocks
![Page 49: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/49.jpg)
Ядро
23
Уровни переопределения:
— bem-bl
— blocks
— fotorama.js
![Page 50: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/50.jpg)
Ядро
23
Уровни переопределения:
— bem-bl
— blocks
— fotorama.js
— получение и обработка данных
![Page 51: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/51.jpg)
Ядро
23
Уровни переопределения:
— bem-bl
— blocks
— fotorama.js
— получение и обработка данных
— основной макет приложения
![Page 52: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/52.jpg)
Fotorama.js
24
blocks/ b-fotorama/ b-fotorama.css b-fotorama.js
![Page 53: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/53.jpg)
Получение и обработка данных
25
rss/ rss.xml
blocks/ b-gallery/
b-gallery.bemhtml b-gallery.css b-gallery.js
![Page 54: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/54.jpg)
Основной макет приложения
26
({ block: 'b-page', title: 'Фото дня на Яндекс.Фотках', head: [ { elem: 'css', url: '_index.css'}, { block: 'i-jquery', elem: 'core' }, { elem: 'js', url: '_index.js' } ], content: [{ block: 'b-gallery', content: { block: 'b-fotorama', elem: 'preloader', content: 'Загрузка данных...' } },{ block: 'b-social' }]})
index.bemjson.js
![Page 55: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/55.jpg)
Основной макет приложения
27
![Page 56: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/56.jpg)
28
![Page 57: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/57.jpg)
28
— blocks-fb
![Page 58: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/58.jpg)
28
— blocks-fb
— изменение размера вьюпорта
![Page 59: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/59.jpg)
28
— blocks-fb
— изменение размера вьюпорта
— изменение дизайна fotorama.js
![Page 60: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/60.jpg)
28
— blocks-fb
— изменение размера вьюпорта
— изменение дизайна fotorama.js
— кнопка Share
![Page 61: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/61.jpg)
Изменение размера вьюпорта
29
blocks-fb/ b-gallery/ b-gallery.bemhtml
block b-gallery { js: { width: '760', height: '520' }}
![Page 62: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/62.jpg)
Изменение дизайна fotorama.js
30
blocks-fb/ b-fotorama/ b-fotorama.css
.fotorama__wrap { background: #fff;}...
![Page 63: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/63.jpg)
Кнопка Share
31
blocks-fb/ b-social/ __like/ b-social__like.css b-social.bemhtml
block b-social { content: [{ elem: 'like' }]}
.b-social__like { position: absolute; top: 3px; right: 3px;}
![Page 66: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/66.jpg)
Мой Мир@mail.ru
34
![Page 67: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/67.jpg)
Выводы
35
![Page 68: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/68.jpg)
Выводы
35
— Гибкость за счет уровней переопределения
![Page 69: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/69.jpg)
Выводы
35
— Гибкость за счет уровней переопределения
— Легкая модификация приложения
![Page 70: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/70.jpg)
Выводы
35
— Гибкость за счет уровней переопределения
— Легкая модификация приложения
— Понятная файловая структура
![Page 71: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/71.jpg)
Выводы
35
— Гибкость за счет уровней переопределения
— Легкая модификация приложения
— Понятная файловая структура
— Новые возможности раскатываются сразу на всех приложениях
![Page 72: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/72.jpg)
Выводы
35
— Гибкость за счет уровней переопределения
— Легкая модификация приложения
— Понятная файловая структура
— Новые возможности раскатываются сразу на всех приложениях
— Командная работа
![Page 73: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/73.jpg)
Выводы
35
— Гибкость за счет уровней переопределения
— Легкая модификация приложения
— Понятная файловая структура
— Новые возможности раскатываются сразу на всех приложениях
— Командная работа
— Подобный принцип можно применять для многих программных продуктов в вебе
![Page 75: Приложения для соцсетей. Универсальные приложения на БЭМ](https://reader033.vdocuments.net/reader033/viewer/2022052621/557c4d1dd8b42a67358b4f46/html5/thumbnails/75.jpg)
Александр Титула-БойченкоРазработчик интерфейсов
@banzalik