Использование CSS-спрайтов на сайте позволяет повысить производительность и грамотно организовать элементы интерфейса.



Sprite Sheet — это одно большое изображение мелких графических элементов сайта, например иконок или кнопок. И благодаря CSS можно отображать каждый элемент отдельно.

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

Большие и популярные сайты

Behance - работы лучших дизайнеров со всего мира

Месяца три назад я писал об этой критической уязвимости в skype support, но она до сих пор не исправлена (уже исправлена).

Сразу скажу, что саму уязвимость я целиком не знаю(уже известна), но в последнее время начались массовые угоны аккаунтов.

Для реализации атаки необходимо лишь знать логин скайпа и e-mail жертвы.

А что если к такой замечательной возможности MySQL как создание триггеров, способных записывать старые и новые значения данных при вставке, изменении и удалении записей добавить информацию, которой обладает php скрипт?

Триггеры MySQL знают:
* момент в который происходит изменение
* старое и новое значение

PHP знает:
* кто в данный момент залогинен
* какая страница открыта, с какой перешли
* бравзер
* IP адрес
* POST, GET
* Cookie

Каким же способом можно умудриться записать всю необходимую информацию?

В подборке сервисы, плагины, темы и другие полезности, облегчающие работу с Twitter Bootstrap.

Стилизация

BootSwatchr — быстрая стилизация Twitter Bootstrap.

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

Полезные сервисы

Easel.io — отличный сервис для прототипирования прямо в браузере.

Доброго времени суток!

Все мы достаточно наслышаны об HTML5 и его возможностях. Например, элементы audio и video, которые у всех на слуху. Но несмотря на это, существует парочка тегов, о которых знают далеко не все, и о которых не знал я до недавнего времени. Итак, вот чем я хочу с вами поделиться.

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

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

Фреймворк Twitter Bootstrap уже давно стал одним из самых любимых средств ленивых сторонников быстрого прототипирования и разработки интерфейсов, а где популярность там много разных сторонних интересных штук.
На этот раз я случайно попал на пополняющуюся коллекцию сниппетов.
Думаю многим пригодится, сейчас там набор небольшой (23 штуки), но уже достаточно полезный чтобы поделиться.
Кликабельные картинки:

Интерфейс аля gmail

Каждый хороший верстальщик скажет, что только безукоризненное знание собственной работы способно принести позитивные результаты. Собственные наблюдения привели меня к выводу, что не только начинающие верстальщики не совсем понимают сути применения свойства float. На Хабре просмотрел имеющиеся публикации на данную тематику. Появилось желание поделиться некоторыми замечаниями и практическими применениями данного свойства. Приведенные ниже разъяснения в большинстве своем могут стать полезными для начинающего верстальщика.

В конце прошлого года мне для целей поддержки пользователей Windows-программ потребовалось организовать Web-сервис скриншотов с клиентской программой, позволяющей выделять для размещения нужный прямоугольный фрагмент экрана. Сторонние сервисы вроде Gyazo удовлетворять перестали ввиду чрезмерного объёма рекламы и невозможности своими силами контролировать мероприятия по обеспечению надёжности вроде резервного копирования, поэтому были написаны свои сервис скриншотов и клиентская программа.

Сейчас многие покупают точки доступа 802.11n, но хороших скоростей достичь удается не всем. В этом посте поговорим о не очень очевидных мелких нюансах, которые могут ощутимо улучшить (или ухудшить) работу Wi-Fi. Всё описанное ниже применимо как к домашним Wi-Fi-роутерам со стандартными и продвинутыми (DD-WRT & Co.) прошивками, так и к корпоративным железкам и сетям. Поэтому, в качестве примера возьмем «домашнюю» тему, как более родную и близкую к телу. Ибо даже самые администые из админов и инженеристые из инженеров живут в многоквартирных домах (или поселках с достаточной плотностью соседей), и всем хочется быстрого и надежного Wi-Fi.
[!!]: после замечаний касательно публикации первой части привожу текст целиком. Если вы читали первую часть — продолжайте отсюда.

Поздравляю всех с пятницей и в качестве небольшого развлечения предлагаю представить, как бы выглядел популярный CSS-фреймворк Twitter Bootstrap, если бы он был от Google? Встречайте Plusstrap.

Сегодня я хочу познакомить вас с замечательными примерами hover-эффектов от Mary Lou. Многим понравились её примеры с hover-эффектами для меню и на этот раз она решила порадовать нас не менее замечательными примерами для круглых элементов. Поскольку сейчас у нас есть возможность использовать свойство border-radius, мы можем создавать круглые формы, и они все чаще появляются в качестве элементов дизайна на веб-сайтах. Один из вариантов использования, который мне более всего нравится, это круглые миниатюры, которые выглядят гораздо интереснее, чем обычные, прямоугольные. И сейчас мы собираемся создать несколько необычных эффектов при наведении на такие элементы!

Решил рассказать о уязвимости AirOS на примере взлома NanoStation M2.

Началось все с того, что меня подключили к интернету. А так как я живу в частном секторе, провайдер поставил направленный wi-fi а у меня на крыше NanoStation M2 2.4 GHz.
Меня очень возмутило что мне не сообщили ни пароль от wi-fi ни пароль от NanoStation (хотя и причины мне вполне понятны). Как я получил пароль от wi-fi читайте под катом.

Это красноречивое объявление я увидел и сфотографировал в подъезде своего знакомого на двери неизвестного мне товарища. Возможно, стоило позвонить в дверь и познакомиться, но я растерялся и этого не сделал. Если товарищ есть на Хабре, то ему — большой привет.

Подобный крик души — мне хорошо знаком. Я несколько лет фрилансил, да и сейчас, перебравшись на постоянную работу, всё равно часто тружусь удалённо из дома. Наблюдательные соседи это заметили, поэтому для пяти из пятнадцати квартир подъезда мне «приходилось» с разной периодичностью оказывать техническую поддержку (порой срочную, порой бессмысленную). А ещё же есть компьютеры в своей квартире и у родственников на соседних улицах. При этом я всегда трудился и тружусь в области веб-разработок, и никогда — системным администратором. Но для окружающих негиков я всё равно «компьютерщик, который в этом деле понимает».

На этом печальная рефлексия закончена, ведь вы читаете позитивный воскресный пост.

Друзья, проблема «тех. поддержки по-соседски» существует для многих айтишников, но я поделюсь аж несколькими способами её благополучного решения, которые в моём случае — отлично сработали.

Ещё больше способов, наверняка, предложат в комментариях.

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

Сегодня мы рассмотрим все преимущества использования множественных фонов. Изучим базовые основы и создадим крутые эффекты при наведении с помощью CSS свойств hover и transition.

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

Что должно получиться

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

Демонстрация

Хабракамп — это пост на Хабре, где в комментариях первого уровня IT-специалисты пишут темы, в которых они хорошо разбираются. Темы должны быть специфичные — nginx на 100 000 юзеров в день и настройка bind неинтересны и описаны везде, а nginx на 100 000 000 пользователей в день или настройка гео-DNS для распределенного сервиса интересно. Пользователи в ответ к комментариям пишут своим вопросы специалистам.
Обсуждение Хабракампа в Q&A: habrahabr.ru/qa/19034/
Просьба на первом уровне не задавать вопросы, а писать только специалистам об их сфере деятельности.
Для специалистов это шанс получить некоторое количество кармы, если им лень писать статьи, а для остальных — возможность задать вопросы, ответы на которые сложно найти в Google.
Не ленимся плюсовать тему, чтобы она вышла в топ.
Не забываем плюсовать карму тем кто ответил на ваши вопросы.

Занимаюсь редизайном приложения 10tracks для Android, и решил позаимствовать красивый интерфейсный ход старших братьев — Facebook и других. На эту тему нашлась хорошая статья, переводом которой спешу поделиться с вами. Между тем эта статья — больше платформа для дискуссии, чем нерушимые устоявишеся правила.


За последний год интерфейс Android улучшался с феноменальной скоростью (я подобрал небольшую галерею приложений, которые мне нравятся в Google+). Много изменений являлись лишь косметическими (тема Holo в ICS, шрифт Roboto, и т.д.). Мы не увидели больших качественных изменений в принципах проектирования интерфейсов. Но, возможно, как раз сейчас происходит одно такое.

Почти одновременно несколько приложений внедрили у себя боковую навигацию как в приложении Facebook. Сначала мы увидели, как она используется в новом дизайне Spotify, а затем почти сразу решение переняли Evernote. Не прошло и года, в новом дизайне приложения Google+ представили аналогичный паттерн.

UPD: Рыская на просторах интернета набрел на новый более простой способ, без танцев с питоном( а можно и с ним если необходимо).
Оказалось что сайт sms.ru уже более полугода предоставляет Бесплатные СМС для программистов.

Регистрация проходит на номер мобильного телефона, никаких смс отправлять для этого не нужно. На номер придет только проверочный код.

После регистрации можно отправлять до 60смс в день на свой номер, указанный при регистрации. Уже почти месяц как перевел все свои сервисы с гугла на данный сервис. Радует отсутствие минутной задержки перед отправкой и возможность получения статуса сообщения.

Отправить можно разными способами, на сайте, в разделе «Программистам» есть множество готовых примеров:

• HTTP
• curl для командной строки (UTF-8)
• php (с включенным модулем curl)
• php (без curl)
• php (усиленная авторизация)
• PERL (усиленная авторизация)
• Python

Самый простой способ это открыть страницу:

sms.ru/sms/send?api_id=xxxx-xxxx-xxxxx-xxxx-xxxx&to=номер_телефона&text=hello+world
,где - xxxx-xxxx-xxxxx-xxxx-xxxx это id доступный после регистрации.

Так же есть возможность пересылки email на смс. В разделе «Почта sms.ru» можно настроить свой почтовый ящик name sms.ru письма на который будут пересылаться на телефон в виде смс. При включенной опции «обрезать до 1смс» все сообщения на свой номер будут бесплатны.

---