Если вы запускаете новый сайт и заканчиваете его оформление, то есть смысл посмотреть коллекцию Subtle Patterns: отлично оформленную коллекцию фоновых текстур (паттернов) под лицензией Creative Commons Attribution 3.0 Unported. Их можно использовать без ограничений.



Сайт привлекает удобным предварительным просмотром: каждую текстуру можно мгновенно применить на всей странице в качестве фона. Сейчас там 93 работы, коллекция еженедельно пополняется отличными новинками.

Все текстуры на сайте Subtle Patterns являются повторяющимися, то есть склеиваются в бесшовную заливку.

Хочу поделиться ссылками на несколько полезных сервисов. Некоторые из них помогут сэкономить время, другие — сделают за Вас незнакомую/нелюбимую работу. Список разбит по категориям, чтобы было легче ориентироваться.

Сервисы опросов
userreport.com (добавил Romanych)
simpoll.ru
webanketa.com (добавил mihass)

Кнопки постинга в социальные сети
Кнопка от Яндекса
addthis.com (добавил UksusoFF)
share42.com

Одновременная межсайтовая аутентификация (SSO), для чего же она нужна? Допустим у нас есть, назовём его анахроничным термином «портал», с блогами, фотками, фейлами (или файлами, кому как), назовём его fail.ru (не путать с одноимённым сервисом почты на букву М), причём всё это усложнено следующими факторами:
— функционал совершенно разный;
— код написан разными людьми, с испольованием разных технологий;
— работает всё это на разных серверах в разных датацентрах и с разными базами данных;
— сервера находятся на разных доменах.

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

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

Далее мы рассмотрим самописные альтернативы, OpenID, OAuth, SAML, и почему всё это в общем случае не слишком хорошее решение, вопросы хранения аутенитификационных данных, а также некоторые вопросы безопасности в которые без хороших знаний самому лезть не стоит, что такое вообще межсайтовая аутентификация, развеем некоторые мифы.

Ниже пойдёт речь о методе поиска по выпадающему списку (select).

Для этого требуется поле ввода текста и собственно сам выпадающий список:

<input class="type-search" type="text" />
<select size="10" id="list">
    <option value="val">Text</option>
    ...
    <option value="val*n">Text</option>
</select>

Чтобы результат поиска был нагляднее для пользователя, стоит задать тегу select атрибут size со значением 10.

Добавим к этому немного css:

input, select {
    width: 300px;
    margin: 10px auto;
    display: block;
}

При вводе данных в поле input всё, что не совпадает со строкой поиска, будем скрывать, оставляя в списке только нужные результаты.

На этой неделе Microsoft представила свой новый сервис Excel Mashup, который предназначен для внедрения возможностей табличного процессора Excel в HTML-страницу, причем все вычислительные и графические возможности Excel сохраняются, а управление объектом возможно при помощи JavaScript-библиотеки.

С сервисом предлагается работать следующим образом:

• Web-разработчик, располагая некими данными и/или графиками в книге Excel, загружает её на облачный сервис SkyDrive (необходима регистрация) и настраивает права доступа к ней.
  
• Затем получает от сервиса HTML-код для установки на страницу. Этот код и будет, по сути, «web-версией» обычной «десктопной» книги Excel.
  
• Если внедренным объектом необходимо управлять, то программист может использовать по своему усмотрению возможности JavaScript-библиотеки Excel Services.
  

Сервис хорошо документирован: есть интерактивные примеры сниппетов, выполнив код которых можно тут же увидеть как это выглядит, а также полноценное демо-приложение.

Эффектный пример с использованием Bing Maps также можно оценить здесь.

Для еще более глубокого использования также предлагается REST и SOAP API.

[ExcelMashup]

Есть куча советов как убыстрить отдачу сайта – это и статика через nginx и кластеризация и куча еще всяческих хитрых технологий. Однако во всех книжках, советующих как можно повысить загрузку сайтов можно найти две постоянно повторяющиеся темы – «склеивание CSS/JS» и «включение сжатия».

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

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

Проблема очевидна. Нужен способ облегчить работу с префиксами.

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

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

Последнее время натыкался на несколько различных статей об интеграции сайта и 1С. В комментариях часто начинались споры о различных подходах, и я решил поделится способом который однажды довелось реализовать мне. Разумеется, описанный ниже способ не претендует на универсальность и единственность, но, думаю, будет полезен тем, кто только собирается писать свой вариант.

Посмотреть альфа-демку можно на unrealengine.com, весит она метров 50, полноэкранного режима пока нет.

Помимо molehill, во всю используется alchemy2, поэтому требуется flash player 11.2, который можно скачать в adobe labs.

Думаю все знают что в поиске Google можно предварительно просмотреть сайт открыв его превью.

Сегодня поделюсь с вами одним из методов получения данного изображения.

Устали от политики — вот довольно интересное занятие на сегодня (да и не только).

Mari0 — это довольно удачное сочетание игр Марио и Портал. Быть может кто также ждал релиз этой игры? Так вот — он сегодня. Что примечательно — можно скачать полные исходники, вместе с шейдерами, звуком, графикой. Написана на Lua, на движке для 2D игр LÖVE. Все запаковано в файл с раcширением .love, что по сути есть zip архив, можно распаковать и посмотреть что там внутри на глаз. А можно сходить и посмотреть что это за зверь сюда: https://love2d.org/.

Игра доступна для Windows, Linux и MacOS.

Для пользователей Windows чтобы игра работала может понадобиться vcredist.

Есть некоторый опыт проектирования, и реализации интернет магазинов который мы решили обобщить. Мы были удивлены выводами о степени важности разделов в интернет магазине, но приняли их к сведению. В каждом новом проекте мы идем по этому списку и в этом порядке. Объясняем заказчику, почему нужно начинать с описания «аудитории», а не с «главной страницы» сайта.

Здравствуй, дорогой хабрадруг! Сегодня существуют более тысячи способов создать кнопку; чтобы понять их сущность, вам нужно лишь потратить немного времени, просмотрев работы на сайте dribbble.com. Большинство из этих примеров очень похожи друг на друга, однако время от времени попадаются и такие кнопки, на создание которых потратили чуть больше внимания, времени и сил.



Воспользовавшись замечательными параметрами CSS3, мы можем создать элегантые и стильные кнопки без особых усилий (учитывая старые браузеры, конечно). Создаете ли вы кнопку непосредственно в CSS или пользуетесь специальными инструментами для их создания, всегда нужно тщательно подумать о том, как ваша кнопка будет выглядеть в контексте веб-сайта.

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

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

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

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

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

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

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

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

Сначала эта задача показалась мне невыполнимой, но я нашел html2canvas.

Многие любят писать такие конструкции в том или ином виде, каждый сталкивался:

foreach ($items as &$item) {
    $item += 2;
}

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

Веб-дизайнеры любят стилизировать стандартные элементы форм. Потом эти элементы приходиться реализовывать нам — верстальщикам.

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

Естественно, после всего этого я решил изобрести свой велосипед.

Пример разработан без дополнительных картинок с помощью CSS3. Демо-страница с песочницей здесь.