Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Моло...Ontico
Frontend-разработчики и веб-дизайнеры решают совместную задачу – чтобы пользователь получил лучший user experience. Но часто смотрят на проблему с разных позиций — либо наилучшего технического решения проблемы, либо художественного видения мира. Различие инженерных и художественных подходов нередко приводит к конфликту интересов и снижает эффективность работы команды. Однако поле битвы мировоззрений можно превратить в совместное рабочее пространство. В качестве основного подхода к поиску оптимального процесса создания и сопровождения визуального стиля веб-сайта рассматривается подготовка User Interface Kit (или UI Kit). UI Kit содержит элементы, которые служат кирпичами при построении единообразного интерфейса корпоративных веб-сайтов.
Из предлагаемого доклада слушатели смогут узнать следующее:
– какие плюсы предоставляет декомпозиция дизайна;
– что такое UI Kit и какими свойствами он обладает;
– почему работа с UI Kit понравится и разработчикам, и дизайнерам, и даже менеджеру проекта;
– как можно реализовать UI Kit и организовать его хранение.
UI Kit is an abstract conception to organize your user interface in modular way. It strongly relies on documentating design components. Learn how to build your team's workflow by implementing the UI Kit for next project.
С ростом кодовой базы становится все более очевидной необходимость использования компонентного подхода, когда каждая логическая часть обособлена. Если говорить про JavaScript, то в нем есть области видимости, опираясь на которые можно соорудить изолированные компоненты. Но в CSS нет подобных механизмов, поэтому и придумываются Shadow DOM (Web Components) и различные методики вроде БЭМ.
Но что если взглянуть на проблему под другим углом? Адаптируя подходы, что уже используются для других задач, можно получить куда больше выгоды, чем просто изолированные стили!
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...Ontico
Microsoft Edge -- новый браузер от Microsoft с новым движком и новым интерфейсом.
Какие цели преследует Microsoft, и что это нововведение означает для веб-разработчиков?
Что нового в движке браузера по сравнению с IE, и как он будет развиваться дальше?
Движок Edge внутри Windows 10: хостинг сайтов внутри приложений и доступ к нативной функциональности.
Дорожная карта: к чему и когда готовиться?
Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Моло...Ontico
Frontend-разработчики и веб-дизайнеры решают совместную задачу – чтобы пользователь получил лучший user experience. Но часто смотрят на проблему с разных позиций — либо наилучшего технического решения проблемы, либо художественного видения мира. Различие инженерных и художественных подходов нередко приводит к конфликту интересов и снижает эффективность работы команды. Однако поле битвы мировоззрений можно превратить в совместное рабочее пространство. В качестве основного подхода к поиску оптимального процесса создания и сопровождения визуального стиля веб-сайта рассматривается подготовка User Interface Kit (или UI Kit). UI Kit содержит элементы, которые служат кирпичами при построении единообразного интерфейса корпоративных веб-сайтов.
Из предлагаемого доклада слушатели смогут узнать следующее:
– какие плюсы предоставляет декомпозиция дизайна;
– что такое UI Kit и какими свойствами он обладает;
– почему работа с UI Kit понравится и разработчикам, и дизайнерам, и даже менеджеру проекта;
– как можно реализовать UI Kit и организовать его хранение.
UI Kit is an abstract conception to organize your user interface in modular way. It strongly relies on documentating design components. Learn how to build your team's workflow by implementing the UI Kit for next project.
С ростом кодовой базы становится все более очевидной необходимость использования компонентного подхода, когда каждая логическая часть обособлена. Если говорить про JavaScript, то в нем есть области видимости, опираясь на которые можно соорудить изолированные компоненты. Но в CSS нет подобных механизмов, поэтому и придумываются Shadow DOM (Web Components) и различные методики вроде БЭМ.
Но что если взглянуть на проблему под другим углом? Адаптируя подходы, что уже используются для других задач, можно получить куда больше выгоды, чем просто изолированные стили!
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...Ontico
Microsoft Edge -- новый браузер от Microsoft с новым движком и новым интерфейсом.
Какие цели преследует Microsoft, и что это нововведение означает для веб-разработчиков?
Что нового в движке браузера по сравнению с IE, и как он будет развиваться дальше?
Движок Edge внутри Windows 10: хостинг сайтов внутри приложений и доступ к нативной функциональности.
Дорожная карта: к чему и когда готовиться?
JavaScript завтра / Сергей Рубанов (Exante Limited)Ontico
За последние несколько лет в мире js-разработки особое внимание получили такие проекты как AtScript, TypeScript, SoundScript, Flow, Traceur, Babel, каждый из которых пытается предоставить разработчикам некую "улучшенную" версию JavaScript. Комитет TC39 также стал очень активен и разработал стратегию развития стандарта ECMAScript с более частыми релизами. Движки JavaScript стремительно приближаются к полной поддержке ES6. Огромное количество JS-фреймворков и библиотек выбирают следующую версию стандарта уже сегодня. Это означает, что необходимо уже сегодня обратить внимание на происходящее в мире JavaScript-разработки и разобраться, что ждет язык завтра.
В своем докладе я постараюсь дать ответы на следующие вопросы:
- почему такие фреймворки и библиотеки как Angular, Ember, React начали активно и кардинально меняться;
- почему новая версия стандарта языка ES6 так долго внедряется вендорами браузеров и как TC39 решил ускорить процесс стандартизации и внедрения последующих версий ECMAScript;
- почему CoffeeScript больше не "just JavaScript", и действительно ли он сделал такой значимый вклад в следующую версию JavaScript;
- почему были созданы AtScript, TypeScript, Flow, чем каждый из них отличается от остальных, и как они влияют на дальнейшее развитие JavaScript;
- что такое Strong Mode и SoundScript;
- как начать писать ES6+ код уже сегодня.
Компонентный веб. Проникновение в дизайн / Антон Виноградов (АО "Альфа-Банк",...Ontico
По-моему, всем давно надоело, что дизайнеры и разработчики интерфейсов дублируют работу друг друга, причем постоянно. У каждого свой набор компонентов для сборки интерфейса, свои понятия о принципах его построения, и компоненты каждый делает, как знает, лишь бы выглядели хорошо.
Компонентный веб, современные методологии, такие как БЭМ, и инструменты, такие как Sketch и AI, вкупе с передовыми фреймворками, такими как React и Angular, а также шагающий по миру стандарт ES6, могут решить насущные проблемы создания интерфейсов.
Я покажу, как дизайнер может использовать компоненты в Sketch, сделанные разработчиком. Редактировать и изменять их. А также расскажу, насколько сильно это упрощает жизнь в команде, создающей невероятные продукты каждый день ;)
Meet Magento Belarus - Andriy Samilyak speech on 'How we have played DevOps and built an autoscale platform for Magento'
http://by.meet-magento.com/
http://amasty.com/
bem-components — от методологии до full stack платформыYandex
Мало кто знает, но Яндекс – это не только Поиск. Больше десяти лет Яндекс делает разные интернет-сервисы: Карты, Почту, Директ, Музыку, Авто и так далее. В процессе их разработки был приобретён опыт, который мог быть полезен другим веб-разработчикам. Большое количество примеров из реальной практики побудило нас 10 лет назад придумать методологию БЭМ. Спустя 5 лет мы поделились ей с вами, вынеся в open source, вместе с инструментами и библиотекой блоков.
Сейчас БЭМ — не просто свод правил про CSS и набор инструментов. Это открытая full stack платформа, у которой есть пользователи далеко за пределами Яндекса и СНГ. В докладе мы расскажем про эволюцию БЭМ: от методологии до полноценной платформы. Речь пойдёт об использовании полного стека БЭМ-технологий, о переходе к серверному JavaScript и автоматизации разработки. Мы поделимся нашими библиотеками блоков bem-core и bem-components, которые позволяют быстро собрать качественный интерфейс как из конструктора «Лего».
На РИФ-Воронеж Владимир Гриненко и Елена Джетпыспавеа подробно рассказали, зачем БЭМ пошел в опенсорс, как прошел путь от методологии до full stack платформы и чему научились за это время, а также показали наших пользователей в лицо и поделились интересными уроками, которые вынесли, и которые помогут вам в разработке ваших продуктов. Обещаем много интересных подробностей.
Евгений Батовский, Николай Птущук "Современный станок верстальщика"Yandex
Рассказ о том, что представляет собой наш «станок» верстальщика сегодня. Рассказывается с примерами, какие браузеры поддерживаем, как производим кроссбраузерное тестирование и какие инструменты используем, готовя проект к выходу в свет.
User Experience 2011: Мастер-класс: Кросс-платформенное проектирование для мо...Yury Vetrov
Мастер-класс Юрия Ветрова "Кросс-платформенное проектирование для мобильных — Android, iPhone, Windows Phone 7, Symbian" с конференции User Experience 2011.
Доклад об особенностях фронтенд-разработки. Речь пойдет о специфике разработки интерфейсов в больших и маленьких компаниях и о том, что должен знать хороший фронтенд-разработчик. Вы узнаете также, как устроен процесс разработки в Яндексе и какие интерфейсные задачи мы решаем.
Доклад об особенностях фронтенд-разработки. Речь пойдет о специфике разработки интерфейсов в больших и маленьких компаниях и о том, что должен знать хороший фронтенд-разработчик. Вы узнаете также, как устроен процесс разработки в Яндексе и какие интерфейсные задачи мы решаем.
Почему можно хотеть использовать кастомные шрифты. Какой нужен оптимальный синтаксис и какие нужны форматы шрифтов для подключения. Как легко подключать кастомные шрифты в терминологии БЭМ.
В лекции мы попробуем взглянуть на страницу глазами пользователей и понять, что можно сделать для ускорения ее загрузки. Рассмотрим основные оптимизации на стороне браузера, познакомимся с инструментами для измерения времени отображения.
Доклад об особенностях фронтенд-разработки. Речь пойдет о специфике разработки интерфейсов в больших и маленьких компаниях и о том, что должен знать хороший фронтенд-разработчик. Вы узнаете также, как устроен процесс разработки в Яндексе и какие интерфейсные задачи мы решаем.
JavaScript завтра / Сергей Рубанов (Exante Limited)Ontico
За последние несколько лет в мире js-разработки особое внимание получили такие проекты как AtScript, TypeScript, SoundScript, Flow, Traceur, Babel, каждый из которых пытается предоставить разработчикам некую "улучшенную" версию JavaScript. Комитет TC39 также стал очень активен и разработал стратегию развития стандарта ECMAScript с более частыми релизами. Движки JavaScript стремительно приближаются к полной поддержке ES6. Огромное количество JS-фреймворков и библиотек выбирают следующую версию стандарта уже сегодня. Это означает, что необходимо уже сегодня обратить внимание на происходящее в мире JavaScript-разработки и разобраться, что ждет язык завтра.
В своем докладе я постараюсь дать ответы на следующие вопросы:
- почему такие фреймворки и библиотеки как Angular, Ember, React начали активно и кардинально меняться;
- почему новая версия стандарта языка ES6 так долго внедряется вендорами браузеров и как TC39 решил ускорить процесс стандартизации и внедрения последующих версий ECMAScript;
- почему CoffeeScript больше не "just JavaScript", и действительно ли он сделал такой значимый вклад в следующую версию JavaScript;
- почему были созданы AtScript, TypeScript, Flow, чем каждый из них отличается от остальных, и как они влияют на дальнейшее развитие JavaScript;
- что такое Strong Mode и SoundScript;
- как начать писать ES6+ код уже сегодня.
Компонентный веб. Проникновение в дизайн / Антон Виноградов (АО "Альфа-Банк",...Ontico
По-моему, всем давно надоело, что дизайнеры и разработчики интерфейсов дублируют работу друг друга, причем постоянно. У каждого свой набор компонентов для сборки интерфейса, свои понятия о принципах его построения, и компоненты каждый делает, как знает, лишь бы выглядели хорошо.
Компонентный веб, современные методологии, такие как БЭМ, и инструменты, такие как Sketch и AI, вкупе с передовыми фреймворками, такими как React и Angular, а также шагающий по миру стандарт ES6, могут решить насущные проблемы создания интерфейсов.
Я покажу, как дизайнер может использовать компоненты в Sketch, сделанные разработчиком. Редактировать и изменять их. А также расскажу, насколько сильно это упрощает жизнь в команде, создающей невероятные продукты каждый день ;)
Meet Magento Belarus - Andriy Samilyak speech on 'How we have played DevOps and built an autoscale platform for Magento'
http://by.meet-magento.com/
http://amasty.com/
bem-components — от методологии до full stack платформыYandex
Мало кто знает, но Яндекс – это не только Поиск. Больше десяти лет Яндекс делает разные интернет-сервисы: Карты, Почту, Директ, Музыку, Авто и так далее. В процессе их разработки был приобретён опыт, который мог быть полезен другим веб-разработчикам. Большое количество примеров из реальной практики побудило нас 10 лет назад придумать методологию БЭМ. Спустя 5 лет мы поделились ей с вами, вынеся в open source, вместе с инструментами и библиотекой блоков.
Сейчас БЭМ — не просто свод правил про CSS и набор инструментов. Это открытая full stack платформа, у которой есть пользователи далеко за пределами Яндекса и СНГ. В докладе мы расскажем про эволюцию БЭМ: от методологии до полноценной платформы. Речь пойдёт об использовании полного стека БЭМ-технологий, о переходе к серверному JavaScript и автоматизации разработки. Мы поделимся нашими библиотеками блоков bem-core и bem-components, которые позволяют быстро собрать качественный интерфейс как из конструктора «Лего».
На РИФ-Воронеж Владимир Гриненко и Елена Джетпыспавеа подробно рассказали, зачем БЭМ пошел в опенсорс, как прошел путь от методологии до full stack платформы и чему научились за это время, а также показали наших пользователей в лицо и поделились интересными уроками, которые вынесли, и которые помогут вам в разработке ваших продуктов. Обещаем много интересных подробностей.
Евгений Батовский, Николай Птущук "Современный станок верстальщика"Yandex
Рассказ о том, что представляет собой наш «станок» верстальщика сегодня. Рассказывается с примерами, какие браузеры поддерживаем, как производим кроссбраузерное тестирование и какие инструменты используем, готовя проект к выходу в свет.
User Experience 2011: Мастер-класс: Кросс-платформенное проектирование для мо...Yury Vetrov
Мастер-класс Юрия Ветрова "Кросс-платформенное проектирование для мобильных — Android, iPhone, Windows Phone 7, Symbian" с конференции User Experience 2011.
Доклад об особенностях фронтенд-разработки. Речь пойдет о специфике разработки интерфейсов в больших и маленьких компаниях и о том, что должен знать хороший фронтенд-разработчик. Вы узнаете также, как устроен процесс разработки в Яндексе и какие интерфейсные задачи мы решаем.
Доклад об особенностях фронтенд-разработки. Речь пойдет о специфике разработки интерфейсов в больших и маленьких компаниях и о том, что должен знать хороший фронтенд-разработчик. Вы узнаете также, как устроен процесс разработки в Яндексе и какие интерфейсные задачи мы решаем.
Почему можно хотеть использовать кастомные шрифты. Какой нужен оптимальный синтаксис и какие нужны форматы шрифтов для подключения. Как легко подключать кастомные шрифты в терминологии БЭМ.
В лекции мы попробуем взглянуть на страницу глазами пользователей и понять, что можно сделать для ускорения ее загрузки. Рассмотрим основные оптимизации на стороне браузера, познакомимся с инструментами для измерения времени отображения.
Доклад об особенностях фронтенд-разработки. Речь пойдет о специфике разработки интерфейсов в больших и маленьких компаниях и о том, что должен знать хороший фронтенд-разработчик. Вы узнаете также, как устроен процесс разработки в Яндексе и какие интерфейсные задачи мы решаем.
Если вы пишете веб-приложения только под Windows, однако рано или поздно выбор определенной ОС накладывает на вас свои ограничения, наступает время подумать о кроссплатформенной разработке веб-приложений. К чему нужно быть готовым? Mono или .Net Core? Готовы ли Вы портировать свое приложение? Я расскажу о нашем опыте перехода на mono и о том, как это было, с какими проблемами мы столкнулись в первую очередь и почему. Помимо ASP.NET приложений мы так же портировали наш MS SQL Server под Docker. А в заключении мы поговорим о веб-серверах для ASP.NET приложений: — XSP — Apache — nginx
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров ЯндексаYandex
Лекция Юлия Тихоход в Школе вебмастеров: «Структурированные данные на поиске»
https://academy.yandex.ru/events/webmasters_school/yawebm2015/
Что такое микроразметка и в чём её польза
Что такое микроразметка (семантическая разметка, семантическая микроразметка) и кому она нужна. Очень кратко — всё, что я знаю о применении семантической разметки поисковыми системами и другими веб-сервисами.
Передача данных в машиночитаемом виде
Какие ещё есть способы передать данные о сайте поисковым системам кроме микроразметки, особенности разных способов. Что бывает с плохими вебмастерами, которые пытаются обмануть поисковые системы и передать неверные данные.
Типы разметки
Из чего состоит микроразметка, какие бывают словари и синтаксисы. Популярные сочетания словарей и синтаксисов, как правильно выбирать нужную комбинацию для своего сайта.
Передача данных об интернет-магазине
Разбор семантической разметки: что в принципе доступно для разметки в интернет-магазине, что это даёт, а что можно не размечать вовсе.
Проверка правильности микроразаметки
Ошибки в микроразметке, способы их обнаружения и исправления. Популярные валидаторы микроразметки. Какие ошибки непременно нужно исправлять, а что можно игнорировать.
Юрий Василевский «Автоматизация в XCode»
Yandex Mobile Camp в Санкт-Петербурге 2012
http://events.yandex.ru/events/yamobcamp/spb-may-2012/
Xcode — основной инструментарий разработки приложений под Mac OS X и Apple iOS. Он обладает широкими возможностями как для редактирования кода, так и для автоматизации задач. Мы обсудим некоторые из аспектов автоматизации (Code Sense, Targets, Services, Help), связанные с нумерацией сборок билдов, форматированием и контролем стиля кода, анализом дублированных участков кода, управлением внешними библиотеками.
Yandex Mobile Camp в Санкт-Петербурге, 30 мая 2012
Юрий Василевский, ведущий разработчик EPAM Systems, Mobile Solutions
Тема: Автоматизация в XCode
Тезисы:
Xcode — основной инструментарий разработки приложений под Mac OS X и Apple iOS. Он обладает широкими возможностями как для редактирования кода, так и для автоматизации задач.
Мы рассмотрим некоторые из аспектов автоматизации (Code Sense, Targets, Services, Help), связанные с нумерацией сборок билдов, форматированием и контролем стиля кода, анализом дублированных участков кода, управлением внешними библиотеками.
Семинар по созданию и продвижению интернет-магазинаtoWave.ru
www.towave.ru — это информационный интернет-журнал. Мы предлагаем вам самые интересные статьи, самые актуальные темы и самый передовой опыт западных и отечественных специалистов.
22. XHTML Mobile Profile
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
22
22
23. XHTML Mobile Profile
— оптимизирован для мобильных устройств
— рекомендован для разработки мобильных
сервисов W3C
— разработан на основе XHTML DTD
— правила разметки XHTML DTD
23
23
29. <head>
<style>
Плюс:
— нет проблемы с устройствами, не понимающими внешние
стили
— стили загружаются с html одним http-запросом
Минус:
— нет кеширования
29
29
36. Правила для стилей
— Ластик используем только для тех элементов,
которые используются в данном проекте,
— На странице использовать только необходимые
стили,
— Сборка стилей.
36
36
40. Таблицы
Правила:
— не использовать таблицы для раскладки,
— не использовать вложенные таблицы,
— использовать альтернативные способы
оформления информации
40
40
43. Ссылки
— цвета активным и посещенным ссылкам
задавать можно и нужно,
— не все браузеры применяют изменения
цветов ссылок,
— не следует использовать фон для ссылок
черного, синего или красного цветов.
43
43
44. Ссылки
accesskey:
— для удобства навигации (быстрого перехода
по ссылкам),
— необходимо информировать пользователя о
наличии ключей.
Не поддерживается некоторыми Nokia.
44
44
56. Фоновое изображение
Особенности:
— не применяется сокращенная запись css
свойств,
— не применяется позиционирование
фона в % в сокращенной форме,
— не отображаются фоновые изображения.
56
56
58. Вес страницы
— не более 10кБ кода,
— не более 20кБ кода со стилями и
картинками.
58
58
59. Полезные ссылки
http://www.w3.org/TR/mobile-bp/ − Mobile Web Best Practices 1.0
http://www.w3.org/TR/css-mobile/ − CSS Mobile Profile 2.0
http://www.openmobilealliance.org/ − Open Mobile Alliance
http://www.mobiforge.com/ − mobiForge - mobile development community
http://www.forum.nokia.com/main/resources/getting_started/xhtml_content.html −
Nokia Content Development recomendations
http://developer.sonyericsson.com/site/global/home/p_home.jsp −
Sony Ericsson Mobile Developer Support
http://developer.openwave.com/dvl/tools_and_sdk/phone_simulator/choosing.htm −
Openwave Developer Network
59
59