Архив рубрики: Интерфейсы

Слайды с семинара про БЭМ

1.5 года я работаю в проекте, полностью построенном на стеке технологий БЭМ и считаю этот стек действительно удачным решением многих проблем современного front-end.

Думаю, многие даже небольшие проекты во многом выиграют от перехода на этот стек, но большое количество технологий (иногда даже дублирующих друг друга), используемых в стеке, могут отпугнуть храбрецов, решивших освоить БЭМ.

hammer.js rocks or raps...

hammer.js rocks or raps…

На прошедшем семинаре я попробовал показать, насколько несложно использовать часть стека на проекте полностью построенном на Ruby on Rails, сайте о недвижимости «Идинайди«,  Ниже слайды с этого семинара. Сайт-пример — https://github.com/DimitryDushkin/bem-light-example.

Первая часть (она на слайдах) посвящена «карте» технологий БЭМ. Она весьма разнообразна, но в действительности каждому элементу на ней есть своё место, которое возможно заменить на что-то другое из другого стека. Например, в Rails Борщик можно заменить на Sprockets. Формирование BEMJSON — на использование хелпера.

Вторая часть практическая. В ней описаны базовые принципы сборки проекта и написания блоков.

Скачать и посмотреть презентацию можно на я.диске — https://yadi.sk/i/66-ZYR7YpxHFo

Slideshare (заблокирован в РФ =():

Internet explorer 10 (+ windows phone 8): проблемный z-index

Если у вас есть невидимые элементы управления:

ie10 example

 

на клик по которым надо что-то сделать, то учтите следующий баг на Internet Explorer 10 (который воспроизводится и на windows phone 8):

он игнорирует z-index «пустых» элементов.

То есть клик попадёт на красный элемент, а не на контрол, который расположен над ним.

Чтобы это поправить, можно просто добавить контролам стиль:

 background-color: rgba(0, 0, 0, 0); 

К слову, просто

transparent

не сработает.

Да, дорогой читатель, ослик всё так же держит верстальщиков в тонусе.)

Это решение совершенно случайно обнаружил тут.

Ускорение всех действий на Internet Explorer 10+ в Windows Phone

Для того, чтобы переходы по ссылкам, разнообразные кнопки, слайдеры и пр. быстро работали на windows phone необходимо сделать следующее:

1. Добавить мета-тег, удаляющий серое выделение активного блока:

 <meta name="msapplication-tap-highlight" content="no"/> 

2. На все активные элементы поставить следующие стили:


-ms-touch-action: none; /* IE 10 */
touch-action: none; /* IE >= 11 */
user-select: none;

Обновлен раздел с интерфейсами

Полностью обновил раздел на сайте с моими интерфейсами. Там вы найдёте как неумелые поделки от 2007 года, так последние наработки по системе, которая реализует некоторые положения диссертации.

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

Я в основном занимаюсь дизайном, особых талантов к декоративным работам не имею и занимаюсь им только для личных проектов либо по просьбе.)

Карта пунктов приема вторсырья

В нашей лаборатории сделали небольшой проект – интерактивную карту пунктов приёма вторсырья – Переработай это! –  eco.asmon.ru.

Интерактивная карта пунктов приёма вторсырья.

Под капотом bootstrap, django, Google Maps, в качестве БД используется Google Fusion Tables. БД доступна всем для просмотра. Через приложение можно добавить новые точки приёма вторсырья.

В планах:

  1. Адаптация веб-приложения для планшетов и смартфонов;
  2. Геймификация!)

Данные собирали со всех возможных источников. В основном проходились по списку отсюда.

Firefox 11: классная фича для начинающих верстальщиков

В новом Firefox 11 появился 3D вид верстки страницы. Я думаю, это очень полезная визуализация для начинающих верстальщиков. Вот как выглядит наш Сурдосервер в этом представлении:

 

Чтобы ей воспользоваться, нажмите правой кнопкой мышки на любой элемент — «инспектировать» — справа снизу выберите «3D».

Интернет-магазин светотехники – «Анатомия света»

Я давно завязал с коммерческим созданием сайтов, но иногда делаю исключения – интересно попробовать новые платформы, фреймворки, дизайнерские решения, ну и помочь хорошим людям. В течение 2-ух месяцев в свободное от основных дел время (работа и аспирантура) делал вот этот сайт – http://an-light.ru. Компания занимается оптовыми поставками светодиодных энергосберегающих светильников и ламп.  Делал не торопясь – благо в это время уже работала простая версия сайта, и заказчик, мой хороший знакомый, не давил со сроками. К работе над оформлением привлек дизайнера.

Итак, что под капотом:

  • modx revolution – как оказалось, очень удобная и гибкая CMS. Пожалуй, буду использовать её по-чаще для несложных сайтов.
  • Shopkeeper – расширение для modx, добавляет функционал интернет-магазина.
  • Twitter Bootstrap – html, css, js фреймворк. Очень всё симпатично и функционально. Единственный минус – в стандартной поставки совсем не учтено отображение для IE6 (разъезжается абсолютно всё), пришлось искать и добавлять специальные стили.
  • jQuery Slides – хороший и удобный плагин для карусели.
  • Disqus – легко встраиваемая система комментирования (в этом блоге её тоже использую).
  • CSS3 transitions – для симпатичного эффекта в каталоге.

В дизайне постарались добавить нотки Metro UI:

Критический обзор MacOS X Lion 10.7 и mbp в целом

Мой первый macbook 2007 года

Уже почти два года основной мой рабочий инструмент – macbook pro. Сначала для пробы купил б/у простой macbook. Попользовался полгода и понял, что macbook – это определенно удобная штука. Продал macbook и купил новенький macbook pro 13 (2010). Он, как и ожидалось, оказался прекрасен.

Читать далее