QA Fest 2015. Татьяна Скрипник. Кросс-браузерность, что ты делаешь?.. Ах-ха-х...QAFest
Зачастую начинающие тестировщики предполагают, что «посмотреть» веб-приложение в «разных» браузерах и есть содержание кросс-браузерного тестирования. Но множество вопросов остаются недосказанными:
- На что обращать внимание?
- Какие браузеры выбрать? Что делать с разными версиями одного браузера?
- Какие инструменты использовать?
- Сколько времени выделить?
Зная ключевые различия браузеров, особенности отображения контролов, форм и прочих элементов страницы, можно не только улучшить карму своего веб-приложения, но и не теряя эффективности значительно сократить время на тестирование.
В докладе хочу поделиться с вами приобретенными знаниями различий известных браузеров, показать, на что стоит обращать внимание в первую очередь и, как можно более грамотно описать проблему разработчику в случае её нахождения.
QA Fest 2015. Юрий Федько. XSS - от простого к сложному!QAFest
Цель моего доклада, показать, что XSS-атаки - это не всегда просто, а если даже и просто, то во многих стлучаях может привести к серьезным последствиям для бизнеса. Я подробно остановлюсь на следующих аспектах:
- типы XSS-аттак
- какие последствия
- какими инструментами можно и нужно тестировать
Bootstrap 3. Адаптивная верстка для WordPressIgor Sazonov
Основы и примеры для понимания зачем нужен CSS-фреймворк Bootstrap. Доклад читался в рамках WordPress Meetup #3 в Санкт-Петербурге. Объясняется в чем суть верстки на Bootstrap, зачем он нужен для WordPress, подробно разбирается основы grid (сетки) на Bootstrap чтобы верстать адаптивный дизайн.
QA Fest 2015. Татьяна Скрипник. Кросс-браузерность, что ты делаешь?.. Ах-ха-х...QAFest
Зачастую начинающие тестировщики предполагают, что «посмотреть» веб-приложение в «разных» браузерах и есть содержание кросс-браузерного тестирования. Но множество вопросов остаются недосказанными:
- На что обращать внимание?
- Какие браузеры выбрать? Что делать с разными версиями одного браузера?
- Какие инструменты использовать?
- Сколько времени выделить?
Зная ключевые различия браузеров, особенности отображения контролов, форм и прочих элементов страницы, можно не только улучшить карму своего веб-приложения, но и не теряя эффективности значительно сократить время на тестирование.
В докладе хочу поделиться с вами приобретенными знаниями различий известных браузеров, показать, на что стоит обращать внимание в первую очередь и, как можно более грамотно описать проблему разработчику в случае её нахождения.
QA Fest 2015. Юрий Федько. XSS - от простого к сложному!QAFest
Цель моего доклада, показать, что XSS-атаки - это не всегда просто, а если даже и просто, то во многих стлучаях может привести к серьезным последствиям для бизнеса. Я подробно остановлюсь на следующих аспектах:
- типы XSS-аттак
- какие последствия
- какими инструментами можно и нужно тестировать
Bootstrap 3. Адаптивная верстка для WordPressIgor Sazonov
Основы и примеры для понимания зачем нужен CSS-фреймворк Bootstrap. Доклад читался в рамках WordPress Meetup #3 в Санкт-Петербурге. Объясняется в чем суть верстки на Bootstrap, зачем он нужен для WordPress, подробно разбирается основы grid (сетки) на Bootstrap чтобы верстать адаптивный дизайн.
Кир Белевич, Сергей Горобцов: "Touch it: новое мобильное направление веб-разр...Yandex
15 октября 2011, Я.Субботник в Алматы
Кир Белевич, Сергей Горобцов: "Touch it: новое мобильное направление веб-разработки"
О докладе:
Мы расскажем о том, что такое «тач», какие есть устройства и платформы, про особенности тач-интерфейсов и вёрстки. Цель выступления – введение в новое мобильное направление веб-разработки, немного подробностей и картина в целом.
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едятHappyDev-lite
Расскажу, чем разработка front end для Web отличается от остальных дисциплин программирования. Чему нужно научиться, чтобы разрабатывать быстрые, удобные и интуитивно понятные пользовательские интерфейсы.
- Веб доказал свою применимость в качестве платформы для создания приложений и сервисов практически любого масштаба и направленности. - Новые веб-API позволяют полноценно использовать функциональность устройств, так что клиентской части веб-приложений больше незачем себя ограничивать рамками браузера. - Набор API, спецификаций и подходов к разработке, позволяющий создавать практически “нативные” приложения для любой платформы, используя навыки веб-разработчика, получил название PWA (Progressive Web Applications). - Сегодняшняя поддержка PWA всеми основными разработчиками браузеров говорит о том, что это может быть одним из главных векторов развития и распространения веб-технологий. - В выигрыше оказываются и разработчики (единая кодовая база), и пользователи (легкие, быстрые, функциональные приложения).
Онлайн-версия: https://slides.com/webmax/pwa-rif/
Кир Белевич, Сергей Горобцов: "Touch it: новое мобильное направление веб-разр...Yandex
15 октября 2011, Я.Субботник в Алматы
Кир Белевич, Сергей Горобцов: "Touch it: новое мобильное направление веб-разработки"
О докладе:
Мы расскажем о том, что такое «тач», какие есть устройства и платформы, про особенности тач-интерфейсов и вёрстки. Цель выступления – введение в новое мобильное направление веб-разработки, немного подробностей и картина в целом.
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едятHappyDev-lite
Расскажу, чем разработка front end для Web отличается от остальных дисциплин программирования. Чему нужно научиться, чтобы разрабатывать быстрые, удобные и интуитивно понятные пользовательские интерфейсы.
- Веб доказал свою применимость в качестве платформы для создания приложений и сервисов практически любого масштаба и направленности. - Новые веб-API позволяют полноценно использовать функциональность устройств, так что клиентской части веб-приложений больше незачем себя ограничивать рамками браузера. - Набор API, спецификаций и подходов к разработке, позволяющий создавать практически “нативные” приложения для любой платформы, используя навыки веб-разработчика, получил название PWA (Progressive Web Applications). - Сегодняшняя поддержка PWA всеми основными разработчиками браузеров говорит о том, что это может быть одним из главных векторов развития и распространения веб-технологий. - В выигрыше оказываются и разработчики (единая кодовая база), и пользователи (легкие, быстрые, функциональные приложения).
Онлайн-версия: https://slides.com/webmax/pwa-rif/
2. Доступность: степень того, насколько возможно пользоваться сайтом как можно более широкой аудитории людей
3. Доступность: степень того, насколько возможно пользоваться сайтом как можно более широкой аудитории людей независимо от их физических или технических возможностей
8. технические ограничения браузер, в котором не поддерживается или отключён JavaScript ограниченные или нестандартные устройства ввода/вывода ограничение трафика или пропускной способности канала
10. физические ограничения зрительной функции (слепота, плохое зрение, дальтонизм) двигательных функций (в частности движения рук) когнитивные ограничения (нарушения функций памяти, внимания) множество других
18. с чем могут быть проблемы при использовании JavaScript? навигация (чаще всего строгая зависимость от мыши) скрытый контент оповещение пользователя о динамических изменениях на странице нестандартное поведение браузера (например, Ajax и кнопки вперёд/назад)
19. два шага к доступности: предоставить не требующую JavaScriptальтернативу всего содержимого и функциональности сделать саму JavaScript-функциональность максимально доступной
21. в качестве элементов, принимающих важные действия от пользователя, используйте толькоэлементы, которые могут принимать фокусa, input, button, textarea, selectdiv.onclick
22. события в JavaScript устройство-зависимые onclick ondoubleclick onmouseover onmouseout onmousedown onmouseup onkeypress onkeyup onkeydown устр.-независимые onfocus onblur onchange onselect onclick* * только для ссылок и элементов форм
23. используйте по возможности только независимые от устройств событияonclick*, onfocus, onblur, onchange, onselect
24. при необходимости использовать устройство-зависимые события, применяйте сразу группы аналогичных событий, например:onmouseover + onfocusonmouseout + onbluronmouseup + onkeyup
25. убедитесь, что на сайте можно попасть куда угодно и сделать что угодно с помощью одной только клавиатуры
26. обрабатывайте location.hash (чтобы работали ссылки на любой контент)website.com/blabla#tab1website.com/blabla#tab2website.com/gallery#photo1website.com/gallery#photo2
27. используйте JS-библиотеки для реализации Ajax history- Really Simple History- jQuery history plugin- Mootools HistoryManager- YUI Browser History Manager- Dojo dojo.back
31. два подхода к разработке: graceful degradation progressive enhancement
32. graceful degradation: «плавное упрощение» доработка полной версии сайта для функционирования без JavaScript в отдельных местах
33. progressive enhancement: создать полноценную версию сайта без JavaScript заменить с помощью JavaScript стандартное поведение улучшенным (динамическим)
34. как совершать эту замену? unobtrusive Javascript (ненавязчивый JavaScript)