This repository contains the minimal configuration-files and folders you will need to create a BEM project from scratch.

• node.js

You may also consider installing bem-tools locally to your environment for ease of use, though it is not required

So, how easy is it to get started with BEM? Super easy.

It's as easy as...

1. ›git clone git://github.com/bem/project-stub.git
2. ›cd project-stub
3. ›npm install
4. ›./node_modules/bem/bin/bem server

(hint: execute the above commands in your terminal)

Now that bem server is running, check it out:

Navigate to: http://localhost:8080/desktop.bundles/index/index.html

(here, have a link: http://localhost:8080/desktop.bundles/index/index.html)

That's it, it's that simple. Congratulations, your BEM project is already underway!

Here's the replay... that bem server command will:

1. Install a local copy of all required dependencies from npm into the ./node_modules directory. (specifically: bem-tools)
2. Start a local bem server on port 8080.

What do we mean by "a local copy of all required dependencies"?

Well, when you run the bem make / bem server command for the first time, we install all of the required dependencies (bem-tools) to the ./node_modules directory within the local project directory. This is not the same thing as installing bem-tools locally to your environment - which, if you haven't done already, we strongly suggest that you do. This is by far the easiest, quickest way to use bem-tools in a more beautiful way.

› ./node_modules/bem/bin/bem server

This is the ugly way to run the bem server command. If you think it's ugly too and wish for a better way keep reading...

Once you have either (a) fixed your PATH environment variable, or (b) properly installed bem-tools to your local environment. You may now, more elegantly, start your bem server by running:

› bem server

Stopping the server is also easy:

[ctrl] + [c]

Pressing [ctrl] + [c] while the terminal is your active window will stop the server.

For a more permanent way to "easily" use the local-to-this-project's installation of bem-tools all you must do is ensure that the path to the bem executable (./node_modules/.bin) is included in your PATH environment variable.

> export PATH=./node_modules/.bin:$PATH

Optionally you may also add export PATH=PATH_TO_PROJECT_DIRECTORY/node_modules/.bin:$PATH to your .profile (obviously replacing PATH_TO_PROJECT_DIRECTORY with the actual path to your project)

BEM is an abbreviation for Block-Element-Modifier. BEM is a way to write code which is easy to support and develop.

• Блок выбора персонажа позволяет переключаться между персонажами.
• По наведению на блок персонажа меняется блок с его описанием.
• По клику на персонажа меняются все нижестоящие блоки, кроме последнего.
• Первый, второй, третий, предпоследний и последний экраны по содержимому одинаковы для всех, меняется только цвет фона.
• Выбор персонажа на последнем экране скроллит экран вверх, чтобы пользователь мог посмотреть историю только что выбранного.
• При загрузке страницы выбранным (активным) оказывается случайный персонаж.

• Лежит поверх основной страницы. При клике по ней выезжает, оставляя видимым кусок основной страницы с персонажами.
• Повторный клик вернет все обратно.
• При переключении персонажа меняется и содержимое правой панели.
• При увеличени ширины вьюпорта ширина основной страницы фиксирована (972px), увеличивается видимая область правой панели.

• Пользователь скроллит страницу. Когда выбор персонажа выходит за пределы экрана, сверху приезжают:
  • Большой круглый портрет персонажа, он остается жить в центре навсегда, пока не станет доступен один из блоков выбора.
  • Маленький переключатель персонажей, который остается вверху. В нём живут иконки, представляющие просматриваемый сценарий для каждого из персонажей. Клик по сценарию меняет персонажа.
• При переходе между экранами (они отделены друг от друга горизонтальными линиями пути) в маленьком блоке переключения персонажей меняются иконки. В каждом из кругов меняется иконка.

• Графика для правого блока лежит отдельно в папке задачи
• Ссылка на видео в попапе: player.vimeo.com/video/75709551?autoplay=1

• минимальное поддерживаемое разрешение 1024x768
• максимальное количество браузеров
• IE6 можно не поддерживать
• BEM
  • минимум как методология
  • максимум как платформа
• следование codestyle
• все ручками (исключение, использование csscomb)

Интернет сегодня — это не только информация и технологии, но и люди. Людей много и они все разные, а сайты для всех пользователей обычно выглядят одинаково. Яндекс уже научился адаптироваться под конкретного пользователя и готов поделиться этой технологией с другими.

«Атом». Технологическая платформа, задача которой — предоставить сайтам возможность изменять содержание страниц под конкретного пользователя.

Мир один, а люди разные. Так и интернет — он один, но для каждого разный.

Теперь посмотрите, как планировали путешествие в Таиланд другие герои.

Предпочитает путешествовать самостоятельно и налегке. Уверен, что только так можно проникнуться культурой страны.

В отпуск ездит вместе с женой и дочкой. Считает, что отдыхать лучше всего в отелях на побережье.

Очень дорожит редкими отпусками и превыше всего ценит комфорт и качество обслуживания.

Максим хочет увидеть настоящий, нетуристический Таиланд.

Он планирует путешествовать по стране самостоятельно, составлять маршрут по ходу. Поэтому всё, что ему нужно, — билет на самолёт.

Для путешествия по жаркой стране Максиму нужна удобная одежда и крепкая обувь.

Он не желает тратить время на походы по магазинам, ведь интересные ему вещи можно с лёгкостью найти в интернете.

Рюкзак с вещами и ноутбуком — вот и весь багаж Максима.

На метро он доберётся до вокзала, а оттуда поедет на аэроэкспрессе.

Максим не сидит на месте — в поисках интересных мест он колесит по всей стране.

Когда ночь застаёт его в пути, Максим просто находит ближайший хостел. Утром он решает — остаться и осмотреть местные достопримечательности или вернуться на дорогу.

Устав от турецких пляжей, Алексей Быков решил вывезти семью в Таиланд.

Он выбирает тур так, чтобы уложиться в адекватную сумму, но порадовать всех: приемлемый уровень комфорта, детская анимация, недалеко от пляжа, «все включено».

Алексей твердо уверен, что линзы практичнее обычных очков — как минимум потому, что вместе с ними можно надеть другие очки: для плавания или солнечные.

Он привык к тому, что у него всегда есть запас одноразовых линз.

У семьи Быковых с собой очень много багажа, большую часть которого занимают платья жены и детские вещи.

Ехать с сумками на общественном транспорте им совсем не хочется, тем более, когда есть вместительный автомобиль. Алексей решает переплатить за парковку у аэропорта, зато добраться с удобством.

Для Алексея один из основных мотивов выбора Таиланда — гастрономический: и он, и жена любят экзотическую кухню.

Каждый день они вместе отправляются на поиски новых ресторанов.

Григорий Иоганович Дауге редко отдыхает — бизнес требует от него полной отдачи.

Друзья и коллеги, переживающие за его здоровье, подарили ему билет в Таиланд. Поспорив для вида, Григорий Иоганович решает, что здоровье важнее, и садится выбирать отель.

Даже отдых должен приносить в жизнь что-нибудь новое — таков жизненный принцип Григория Иогановича.

В этой поездке он планирует научиться дайвингу: посмотреть на коралловые рифы и причудливых морских животных.

Перед отлётом Григорий Иоганович отправил своего личного водителя в отпуск.

Добираться до аэропорта он будет на такси.

В Таиланде Григорий Иоганович наконец понимает, как сильно он устал на работе.

Каждый день он в обязательном порядке ходит на массаж, а утро начинает с йоги.

####«Атом»: сценарии применения «Атом» — это платформа, которая позволит сайтам в интернете адаптироваться под каждого конкретного пользователя. Показывать ему только интересную информацию, помогать быстрее решать задачи.

Этого можно достигнуть за счёт индивидуальных изменений, не всегда заметных самому пользователю, но делающих страницу более интересной, более удобной для него.

####Презентация платформы «Атом» на конференции YaС 2013 Yet another Conference (YaС) — технологическая конференция Яндекса, которая ежегодно проходит в Москве, начиная с 2010 года.

####Закрытое тестирование «Атома»

Замысел такого масштаба невозможно воплотить в одиночку, поэтому мы уже начали проводить эксперименты с первыми партнёрами. Каким будет результат этой работы, во многом зависит от них и от других вебмастеров. У нас есть идея и технологии для её реализации, но мы не хотим двигаться дальше без ваших мыслей, мнения, опыта и осознания ваших потребностей. Всё это необходимо нам для того, чтобы превратить идею в полноценный продукт, полезный в реальных ситуациях.

Если вы хотите принять участие в развитии «Атома», то вам необходимо выполнить следующие шаги:

• выбрать ключевые рубрики вашего сайта;
• установить на ваш сайт Яндекс.Метрику;
• разметить страницы каждой выбранной рубрики разными целями в Метрике.

Присылайте письмо, в котором указаны идентификаторы целей и чётко описаны те задачи, которые вы бы хотели решить с помощью «Атома».

Авторы самых интересных писем и предложений станут участниками эксперимента. Все новости и примеры мы будет публиковать в корпоративном блоге и на Хабрахабре.

Свяжитесь с нами через форму обратной связи или пишите на [email protected]

Покупка авиабилетов

Уже в результатах поиска Максим может уточнить удобные даты и перейти сразу на сайт с подходящими ему вариантами.

Рекомендации по покупке подходящих товаров

Предложения на главной странице выбраны на основе информации о предпочтениях Максима, полученных сайтом от «Атома».

Предложение купить билет на аэроэкспресс

Зная предпочтения Максима, сайт предлагает ему подходящий способ добраться до аэропорта и рекомендует время отправления.

Выбор интересных мест для посещения

Когда Максим выбирает в интернете достопримечательности для посещения в путешествии, сайт предлагает ему обратить внимание и на другие объекты, которые могут быть ему интересны.

####Покупка тура В острове Алексей Быков сразу указывает параметры для поиска тура. Из результатов убраны слишком дорогие и престижные для Алексея отели. В списке вариантов — туры, идеально подходящие для семейного отдыха с детьми.

####Напоминание от интернет-магазина Контактные линзы из прошлого заказа Алексея скоро должны подойти к концу. Сайт, на котором он обычно их приобретает, отправляет ему напоминание о повторной покупке с кнопкой перехода на предзаполненную форму заказа в один клик.

####Рекомендация по времени выезда с учётом пробок на дорогах Алексею предлагается оптимальный маршрут с учётом времени вылета и прогнозом пробок.

####Рекомендации по выбору ресторана При поиске ресторанов для посещения, сайт рекомендует Алексею места на основе информации о его предпочтениях и вкусах.

####Рекомендации по подбору отеля Список отелей, показанных на главной странице сайта бронирования, основан на полученных от «Атома» гипотезах. В списке на первых местах те отели, которые наверняка понравятся Григорию Иогановичу.

####Рекомендации по покупке подходящих товаров Сайт рекомендует Григорию Иогановичу различные товары, которые точно ему подойдут.

####Напоминание о заказе такси Григорию Иогановичу приходит уведомление с рекомендацией вызвать такси с учётом времени отправления его рейса.

####Рекомендации по оздоровительным процедурам На сайте про оздоровительные процедуры в Таиланде Григорию Иогановичу сразу предлагаются подходящие ему варианты, учитывающие его предпочтения.

90717bf43914268c7082b981238745a5766853e7