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

Так как я сижу без работы и становится скучно, решил безвозмездно посодействовать. Что получилось, смотрите под ниже.

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

Конечно же, не претендую на какую-то новизну, и данная заметка будет больше полезна начинающим с jQuery (коим и сам являюсь), чем людям, имеющим существенный опыт с данным javascript фреймворком.

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

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




Но знаем ли мы почему возникли именно такие пропорции? Какой смысл в них закрыт? Что видели древние и почему упорно применяли их для создания произведений искусства, особенно, носивших религиозный смысл?



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

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

Под катом я еще немного ее обрисую.

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

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

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

В данной статье автор Steve Souders приводит наглядные доказательства, почему не стоит использовать import для загрузки стилей в документ.

LINK vs. import

Существует 2 способа загрузки файлов стилей. Использовать тег LINK:

<link rel='stylesheet' href='a.css'>

Или импортировать файлы с помощью import:

<style>
@import url('a.css');
</style>

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

Решил поделиться практическим внедрением в интернет магазине.

Мы имеем интернет магазин, продающий товар с доставкой до клиента. Практика показала, что сделав обязательную, даже не 100% предоплату, заказов поступает на порядок меньше. Сделав пост-оплату, тоесть оплату при получении на почте, заказов гораздо больше, но очень много возвратов — с почты клиенты просто не забирают товар — причины очень разнообразны, и даже если предварительно с клиентом созванивались — перестают брать телефоны и т.д. и т.п. А возвраты с почты — это потерянные деньги, ибо за услуги почте приходится платить уже владельцу интернет — магазина.

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

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

Может кому то идея пригодится.

Зачастую стандартный вид кнопочек не может сочетаться с концепцией дизайна, которую придумал дизайнер, поэтому он рисует свои кнопочки.

Что обычно делает верстальщик при виде такой кнопки? Правильно, просто напросто, вырезает ее как есть, и вставляет ее в верстку как картинку.

Например:

<a href="some_page.html"><img src="button.gif" alt="Button"></a>
<input type="image" src="button.gif" alt="Button">

* This source code was highlighted with Source Code Highlighter.

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

Примерно каждые пол года, на хабре пиарится новый клон pastebin. Я решил продолжить данную традицию. Представляю вам результат моей, а так же дизайнерской трёхмесячной работы — проект showmecode.com.

Чем же отличается мой вариант, от уже существующих?

Во-первых дизайном. Обычно авторы сайтов такого характера влюбленны в минимализм. Это касается и меня, но к счастью не дизайнера, который рискнул и решил сделать такой сайт в стиле веб 2.0. Если вас не особо интересует сам сервис, стоит хотя бы зайти и оценить работу украинского дизайнера.

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

Я уже довольно-таки давно верстаю в Notepad++, пробовал и другие редакторы — не срослось. Основная причина, по которой мне нравился раньше этот редактор — подсветка кода. Видел. что есть много каких-то настроек, но небыло необходимости в них разбираться — ведь и так всё работает прекрасно.

Ситуация изменилась, когда объем работы вырос, и я физически не успевал верстать то, что вроде как должен успевать. Конечно, есть свои html и css заготовки, но копипастить их — сомнительный выигрыш во времени. Работа по FTP через Total Commander тоже не очень то удобна — много лишних телодвижений.

И вот я решил потратить время на настройку своего любимого Notepad++, слышал где-то что гибко он настраивается :)

(Описание скорее для тех разработчиков, которые не в курсе всех прелестей Notepad++, знающие могут дальше не читать).

Задача:
Дизайнер нарисовал макет страницы, на заднем фоне которой была картинка. Я сначала было решил, что это фон который увеличивается по ширине в зависимости о разрешения монитора.
Но не тут то было. Дизайнер настаивал на то, что это масштабируемая картинка, которая сужается / растягивается при изменение окна приложения и по ширине и по высоте.
Заранее предупредив заказчика – что картинка будет грузиться 1 и в максимальном разрешении – его определили как 1600, приступил к работе.

Перевод «Operating System Interface Design Between 1981-2009»

Графический пользовательский интерфейс (GUI — Graphical User Interface) это средства позволяющие пользователям взаимодействовать с аппаратными составляющими компьютера достаточно комфортным и удобным для себя образом.
В течении многих лет для большого количества операционных систем, таких как OS/2, Macintosh, Windows, AmigaOS, Linux, Symbian OS, и т. п., было создано еще большее количество графических интерфейсов.
Давайте попробуем взглянуть на эволюцию дизайна интерфейсов этих систем, начиная с 80-х годов.
Должен заметить, этот топик демонстрирует только значительные достижения и этапы в области графического дизайна (а не операционных систем в целом), да и не все системы существуют и по сей день.

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

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

Основные существующие способы можно разделить на 3 категории:

• Установка на компьютере резидентного монитора, который при подключении флешки проверяет наличие файла autorun.inf, и при наличии такового принимает меры. Минус — привязка к конкретной машине
• Защита флешки методом прав NTFS — отличный железобетонный способ, но его преимущества являются одновременно и его недостатками — NTFS не всегда применима (скажем в случае Win9x, или конкретной модели автомагнитолы или DVD-плеера, читающих только FAT).
• Метод создания на флешке одноименного каталога AUTORUN.INF. Из минусов можно отметить то, что новые вирусы научились удалять этот каталог, или переименовывать в случае невозможности удаления

Именно третий метод был взят мной за основу, и доработан. Внешне все выглядит вот так:



Принцип работы скрипта заключается в следующем:

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

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

В этой статье, мы рассмотрим 7 простых инструментов для тестирования кроссбраузерной совместимости; инструментов, которые справляются со своей задачей очень легко, и к тому же, каждый из этих инструментов можно использовать бесплатно.

Практически любой человек сможет написать CSS-код, в наше время любая программа сделает это за вас. Но будет ли это хороший CSS? Далее представлены пять советов по совершенствованию вашего CSS

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

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

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

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

Продолжая выкладывать на блоге Amazing Development всё, что может понадобиться компаниям или специалистам начать заниматься проектированием и работами над повышением юзабилити своих продуктов и проектов, опубликовал коллекцию стенсилов. Стенсилы – примитивы используемые для графического представления чего-либо. Ниже представлены стенсилы для программ Microsoft Visio, Adobe InDesign и OmniGraffle. Если Вы знаете ссылки на другие стенсилы, которые можно использовать в проектировании, то сообщите о них в комментариях.

Microsoft Visio

Стенсилы Nick Finck

Наверное, многие, при html-верстке, встречали «баг», когда, размещая в блоке подряд два изображения, между ними возникает промежуток, примерно в 3-5 пикселей. Этот эффект присутствует не только в горячо любимом IE6, но и в других браузерах. Большинство решали это с бубнами – подменой Doctype, убиранием лишних отступов в html-файле и так далее.

Начав искать решение проблемы в интернете, в том числе и на хабре, я понял, что вопросов по этому поводу много, но правильного ответа большинство так и не нашли. В итоге выяснилось, что это вовсе не баг. IMG – внутристрочный элемент, и поэтому к нему применяется свойство vertical-align. В браузерах это свойство задается по умолчанию (в большинстве baseline, если не ошибаюсь).

Достаточно к изображению применить vertical-align:bottom и отступа внизу не будет. В других случаях будет неоднозначность, и браузеры будут вести себя на свое усмотрение.