В этой блогозаписи я намерена поделиться несколькими такими советами по увеличению юзабилити сайта, каждый из которых очень лёгок в реализации. Не все они кросс-браузерны, но всё равно они «глазурь на тортике»: читатель и не заметит, что их нет.

1. Отображайте нажатия кнопок и кнопкоподобных ссылок

Мой излюбленный совет. Когда стиль кнопки задаётся в CSS, или когда для отображения необычной кнопки используется рисунок (либо как фон, либо как элемент <img />), то кнопка не реагирует на нажатие во всех или в некоторых браузерах (зависит от ситуации). Вот какой простой уловкою вы можете дать знать посетителю сайта, что он и впрямь нажал на нечто нажимаемое:

.mybutton:active {
   position: relative;
   top: 1px;
   left: 1px;
}

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

Есть другие, не менее быстрые варианты: придать границе свойство inset, указать свойству text-indent значение 1px, изменить направление градиентного фона (что можно сделать быстро, если для этого не придётся прибегнуть ко графическому редактору, то есть если где-то ещё на сайте используется готовый перевёрнутый градиент), или комбинация нескольких из них.

2. Плавные переходы (CSS3 transitions)

В какой-то момент стало очень лениво отрывать свою пятую точку, чтобы перед сном выключить свет в комнате. И решил это дело автоматизировать. В итоге был изобретён свой велосипед для удалённого управления силовой нагрузкой – программно-аппаратный комплекс, обладающий следующими особенностями:

Классное расширение для фреймворка Twitter Bootstrap v2.0 — CSS-генератор кнопок. С помощью ползунков выбираете цвет, насыщенность, яркость и выпуклость кнопки.



Потом забираете CSS-код из соседнего окошка. И больше никогда не кодируйте цвет кнопок вручную!

P.S. Ещё один генератор кнопок: Button Maker, ну и вдобавок: CSS генератор градиентов.

Доброго дня, Хабр!
Довольно давно хотел как то автоматизировать закачки с трекеров любимых сериалов. И вот наконец неделю назад чисто случайно наткнулся на довольно интересную софтинку FlexGet.

Статьи про создание tooltips'ов уже не раз поднимались на хабре [1,2] в виду большой популярности этого элемента. Сегодня вы узнаете еще один способ как создать простые, анимированные подсказки с помощью псевдо-элементов before и after, а так же свойства transitions.



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

Не один раз в комментариях замечал что народ негодует по поводу того, что веб-разработчики стали злоупотреблять использованием Bootstrap от Twitter. Признаюсь, я и сам успел закончить несколько небольших веб-приложений с использованием этого набора скриптов и стилей. Я не против использования Bootstrap от Twitter, я против злоупотребления этим когда есть столько хороших альтернатив. Я почти каждый день натыкаюсь на интерфейсы, построенные на Twitter Bootstrap, и это начинает напрягать. Последней каплей для поиска альтернативы стало изменение интерфейса биллинг панели моего хостера на шаблон Bootstrap. В этой записи я хотел бы немного рассказать про одну из альтернатив — HTML KickStart.

Началось все года 4 назад когда во время рабочего дня у меня обчистили квартиру. Попасть домой через дверь после этого уже не удалось из-за поврежденного замка. Неприятное событие заставило задуматься о безопасности жилища. И это лишь одна из причин для мониторинга и автоматизации квартиры. Как часто прийдя на работу (а то и уезжая или улетая куда-либо) вы сомневались выключили ли перед уходом утюг, закрыли ли газ, воду ;-) Подбавим масла в огонь админам — спокойны ли вы что ваш старый БП в работающем системнике дома не чадит и не пылает!?) И что удаленно делать с девайсом, который «наглухо завис».

В этом посте я рассмотрю некоторые существующие на рынке решения, розничную стоимость доступного аппаратного обеспечения и способ как создать сигнализацию квартиры и некоторые из функций «умного дома» используя одноплатный компьютер Raspberry Pi

После моего поста в прошлый четверг не осталось сомнений в том, что простой и бесплатный шаблон (кто-то даже называет фреймворк) с адаптивной версткой на HTML5 вызывает интерес у потенциальных пользователей. Пост даже собрал достаточно голосов, чтобы НЛО разрешило мне пригласить кого-нибудь на Хабрахабр.

Нужно напомнить, что Simpliste — именно такой шаблон. И теперь работа по его развитию пойдет полным ходом.

Одним из преимуществ Simpliste я считаю наличие готовых тем оформления. Сразу, в момент запуска существовало 3 темы. Постепенно я создал еще несколько.

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

Simpliste, который я сразу назвал шаблоном, не претендовал ни на роль фреймворка-конкурента Бутстрапу, ни на роль сервиса создания сайтов в два клика. Хотя, поступали предложения о том, чтобы превратить его и в то, и в другое. Все, чего я хотел, было предоставить возможность людям скачать пару файлов, наполнить информацией и получить современный HTML5 сайт, оптимизированный для мобильных устройств. Еще там есть темы оформления.

Когда я предложил создавать темы оформления всем желающим, тяжело сказать, чего во мне было больше: скептицизма или веры в лучшее. Но судя по тому, что что-то заставило меня это сделать, я остаюсь преимущественно оптимистом.

Итак, правила были объявлены и неделя прошла в работе.

Я не люблю CSS. Он простой и понятный. Это движущая сила Интернета, но он слишком ограниченный и им трудно управлять. Пришло время привести этот язык в порядок и сделать его более полезным, используя динамический CSS при помощи LESS.
Объясню свою позицию на примере. Почему бы вместо использования #FF9F94 для получения темно-персикового цвета просто не хранить значение этого цвета в переменной для её последующего использования? Что бы перекрасить сайт достаточно будет изменить значение переменной всего в одном месте и всё.
Другими словами: это будет очень изящно, если мы будем использовать немного программирования и логики в CSS, что бы сделать его более мощным инструментом. Хорошо, что это всё возможно с использованием LESS.

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

Вдохновленный постом, я подумал, что будет интересно сделать собственную эволюцию иконок. Вариантов будущего нашего мира фантастами выдумано огромное количество и вполне вероятно что все они когда-нибудь, так или иначе сбудутся.

Наткнулся недавно в интернете на интересный материал, идея заинтересовала, но после сборки отказалась корректно работать, погуглив дальше наткнулся на другой вариант, который и представляю.

Простой цифровой термометр с подключением через COM-порт.

Есть несколько идентичных серверов (4 ноды) на Amazon EC2 с Ubuntu. Каждый генерирует и хранит у себя на диске кэш, который хотелось бы синхронизировать. Но простой rsync тут не подойдет — файлов несколько миллиардов, nfs — слишком медлителен, и т. д. Полный список рассмотренных вариантов с пояснениями ниже.

К тому же, время от времени нужно удалять устаревшие файлы сразу на всех серверах, что пока делается вручную и занимает несколько суток. Вопрос наиболее быстрой для такого Use Case файловой системы планирую описать позже. Оговорюсь только, что по нескольким причинам была выбрана XFS.

После теста нескольких кластерных технологий и файловых систем, по совету старшего товарища, решили использовать тот же rsync, но в связке с inotify. Немного поискав в интернете готовое такое решение, дабы не изобретать велосипед, наткнулся на csyncd, inosync и lsyncd. На хабре уже была статья о csyncd, но он тут не подходит, т.к. хранит список файлов в базе SQLite, которая вряд-ли сможет сносно работать даже с миллионом записей. Да и лишнее звено при таких объемах ни к чему. А вот lsyncd оказался именно тем, что нам и было нужно.

UPD: Как показала практика, необходимо ощутимое измение и дополние в тексте. Я решил внести лишь незначительные правки в основную часть, а новыми выводами поделиться в конце статьи.

Понадобилось начальству в своё время организовать своими силами видео-наблюдение за некоторыми вещами и уложиться в минимальное финансирование. Задача автоматизировать это легла на плечи системного администратора, то есть – меня.
Дано: N – видео-камер D-Link 2102, физический двух-юнитовый сервер под сервер видео-наблюдения и удаленное файло-хранилище.
Результатом должна быть возможность пускать некоторых пользователей на сервер видеонаблюдения в онлайн режиме и организовать архив видеозаписей.

Под катом несколько скриптов, которые сильно помогли мне понять, как лучше писать код, зачем нужны многие вещи и как они решаются, а так же навести порядок в своей голове и очень надеюсь, что они помогут кому-то еще.
Проект писался достаточно сложно — настолько сильно я shell(bash) скрипты не изучал — не было надобности до этого.
Но, когда задача поставлена и в голове есть алгоритм решения — все скрипты были переделаны так, чтобы читая их через пол года у меня и моего преемника не было вопросов и желания переписать все с нуля.

UPD: пост периодически обновляется.

Вы наконец-то можете сделать кое-что со своим старым LCD монитором, который завалялся у Вас в гараже. Превратите его в шпионский монитор! Для всех вокруг он будет выглядеть просто белым экраном, но не для Вас, потому что у Вас будут специальные «волшебные» очки.

Всё что Вам нужно – это пара старых очков, нож для бумаги и растворитель для краски.

Доброго времени суток, Под катом предлагаю Вам ознакомиться с функциями на PHP, которые я использую в большинстве своих проектов. В статье мы получим погоду для любого города мира при помощи Google, получим Whois и favicon домена, количество ретвитов определенной страницы и сделаем генератор ссылок на профили в твиттере, сделаем скриншот сайта, соберем css в 1 файл как у яндекса, распакуем zip и преобразуем картинку в ASCII-код.

С выходим Ubuntu 11.04 на неё перестал устанавливаться пакет mjpg-streamer весьма полезный для организации видеонаблюдения посредством USB web-камер.

Последние четыре года я работал верстальщиком в разных питерских веб-студиях.

От полуподвальных контор из 3-5 человек до больших фирм 25-40 человек, работающих на рынке дорогих сайтов для крупных заказчиков. Но независимо от размера компании задачи были одни и те же.

• нужно продать дизайн
• сделать сайт, который не стыдно положить в портфолио
• сделать оригинально, как еще не делали конкуренты

Таким образом, задачи верстальщикам и дизайнерам ставились одинаковые: «давайте что-то креативное, свежее, интересное».

Я очень хорошо понимаю верстальщиков, дизайнеров и владельцев веб-студий, поэтому чтобы облегчить им поиск плагинов под готовый функционал и в то-же время показать что-то свежее, чего еще многие [возможно] не видели, решил уволиться отовсюду, и запустить проект Plugin Detector



В этой статье будет затронуто: