RSS иконки на заказ Хотите себе? Лично я - да :)

Уж кто-кто, а я на иконки всякие насмотрелся. Но чтобы такие….В таких случаях принято говорить - “Это просто БОМБА”

Умение и талант Миши Квакина поражают. Мастер визуальной коммуникации.

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

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

Качество разработки? “Надо платить зарплату”? “Аренда дорого стоит”? Имидж на рынке? (это, безусловно, да, но, простите, покупая Mercedes или BMW я ТОЧНО знаю, что я покупаю, сколько я плачу, за что, и за что и сколько я “переплачиваю” за бренд. Именно поэтому ни о каком “мани бэк” в случае такой покупки речь идти не может ВООБЩЕ. Чего не скажешь о продукции очень многих веб-студий.

Большинство людей еще не понимают (должны ли - я не знаю) что веб-дизайн, онлайн брендинг, фирстиль (слово мерзковатое, чем -то похоже на “дизигн”) это ГОРАЗДО БОЛЬШЕ, чем красивые картинки.

И когда я вижу, что до сих пор, до сих пор, известные студии клепают сайты таблицами, не вставляют стилей для распечатки, имеют мегабайт “веса” на главной странице, анимируют логотипы, делают меню таким, что им нельзя пользоваться ни разу не вспомнив чью-то мать, допускают грубейшие орфографические ошибки в рекламном тексте (достаточно? можно продолжить легко!) пытаются продавать свою, с позволения сказать, “продукцию” за (согласно упомянутого выше исследования) $4000 - мне становится очень грустно.

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

Дизайн, а особенно веб-дизайн - это не “искусство убеждать” (клиента картинками), это, как уже давно известно, “искусство коммуникации” (клиентского бизнеса с потребителями его продукции или услуг).

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

В связи с чем у меня возникает несколько вопросов. Каковы критерии качества продукции в нашей епархии? Сразу хочу сказать, что “посещаемость” как критерий качества рассматриваться не может, да и не должна. Во-первых потому что посещаемостью занимаются SEO и копирайтеры (с оговоркой о том, что приличная студия вполне может включать в свой пакет услуг как SEO так и копирайтинг).

Какие функции (вернее набор функций) должен выполнять сайт безусловно, вне зависимости от его “ниши”?

Когда, наконец, черт возьми, словосочетания и слова типа “информационная архитектура”, “юзабилити”, “user experience” станут что-то значить в украинской практике веб-разработки?

А пока я буду рехтовать собственную тему, я решил включить Cutline v2.0 from
Chris Pearson

Ну и, кстати, чтоб сделать этот пост хоть как-то кому-то полезным - GTDInbox FF extension для организации работы, с применением Gmail’овского аккаунта.

Всем, кто в Киеве - приходите, будет интересно. Неконференция продлится 2 дня - 13 и 14 октября.

Настроить переключение клавиатурного регистра с английского на русский в Ubuntu не составляет проблемы, используя стандартный интерфейс настройки системы - Система / Параметры / Клавиатура / Параметры раскладки / функция смены раскладки и далее выбираем нужное (привычное) сочетание клавиш. Это все просто. Настоящие траблы начинаются тогда, когда символы, которые напечатаны на клавишах вашей клавиатуры не совпадают с теми, которые реально печатаются. Вот это, действительно, раздражает. Все время сбиваешься и приходится вспоминать. А это потеря темпа. И если вашей клавиатуры (типа или бренда производителя) нет в списке “Модель клавиатуры” меню “Раскладки” (см. выше) - то остается только тихо ругаться. Но выход есть.

Умудренный оптом Unix администрации коллега нашел такой выход достаточно быстро. Обладая правами root (в Ubuntu sudo -i) проходим в каталог /etc/X11 и находим там файл xorg.conf . В 48 строке после пробела после слова “XkbVariant” в пустых кавычках вписываем “,winkeys” (без кавычек, естественно) и перезапускаем иксы. (Ну или просто перезагрузите систему).
Вуаля! Все становится на свои места и теперь клавиатура функционирует одинаково в обоих ОС. Мне это помогло, надеюсь, поможет еще кому-то.

Иногда бывает, что при перезагрузке слетает установленная до этого в предыдущем шаге “переключалка” регистров - не страшно, просто повторите эту процедуру еще раз с помощью меню.

На сегодняшний день у меня всего 14 постингов, 3 из которых пользуются популярностью и я, вот не поверите, регулярно натыкаюсь на именно эти три постинга и самый “лояльный” референс был такой: “материал взят с сайта Айди Контент”. Нормальные пацаны?

Но вчера друг прислал ссылку на вот это www.elementdesign.ru/info/1/
(там три страницы такого, так может есть и ваше)

Скриншот, 33 кБ.

Не знаю, как это будет по-русски, а в Украине в таких случаях говорят: “Ну цэ, тля, ващще!”

И PR у первого каталога со статьями — троечка.

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

Специально для этих ребят хочу повтроить прописные “человеческие” истины, которые нужно учитывать, при использовании чужих материалов в Интернет.

Во-первых, стоит спросить разрешения, в 99% случаев вы его получите. Во-вторых, надо ставить гиперссылки на источник. (Тогда и разрешения спрашивать вообще-то не нужно, это ваше право). Гиперссылка - это такая штука, по которой можно “кликнуть” и которая регистрируется поисковыми роботами. Это ситуация “win-win”. Ну и в-третьих, все тайное становится явным, рано или поздно и вас “расшифрует” кто-нибудь. И возможный подрыв репутации будет куда сильнее своим эффектом чем теоретическая выгода (вот скажите мне — какая?) от “несанкционированного” использования чужих материалов на своем сайте.

Ставьте гиперссылки, дамы и господа, и вам воздастся.

Слегка популярные статьи на сайте “Айди Контент”:

Чем веб-дизайнер отличается от HTML кодера

Веб-разработка средствами Open Source

Процесс веб-дизайна. Как найти контент

1. Сколько стоит надежный хостинг?

Сразу оговорюсь, — этот постинг написан с потребительской точки зрения, — мне надо не хостинг купить на самом деле, а сайт разместить, в хорошем месте, “чтоб работал” (99,99% uptime), чтобы на мои вопросы, вдруг возникнут, круглосуточно отвечали в течении 20-30 минут. Причем внятно отвечали, как в том анекдоте, — “ты мне не Зюйд-Зюйд-Вест, ты пальцем покажи”, а то некоторые некомпетентные товарищи из службы поддержки начинают рассказывать, что я сам-де могу свои настройки Apache’a поменять. И это после того, как попросил, например, 403 включить на отсутствие индексного файла в основном каталоге — у нормальных хостеров включена по-умолчаннию.

Итак, у вас есть задача разместить простой, среднестатистический блог на платном хостинге. Берусь утверждать, что более $100/в год платить не разумно. Есть предложения $120/2 года (сразу платить). Но это просто цифры, а что предлагают нам за эти деньги?

2. Что входит в хостинг-пакет?

Судите сами: 96$ /год или 120$ /2 года. Но эта радость будем вам в том случае, если у вас есть кредитка Visa или Mastercard или American Express и вы не испытываете серьезных проблем в общении на английском языке и/или вашим клиентам не нужны документы, подтвержающие платежи.

Того, что входит в эти пакеты “навсегда хватит” 99% пользователей или клиентов. К тому же, вы сможете 5 раз “отбить деньги” на каждом своем аккаунте.

“Зачет”? Тема раскрыта? Поправьте меня, пожалуйста, если я ошибаюсь.

Патриотический хостинг

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

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

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

P.S.
Конечно, я никак не связан с этим хостерами и мне за эти рекомендации ничего не будет :)

Тщательно все спланировать

Независимо от того, работаете ли вы полностью самостоятельно (что, безусловно, сложнее организационно, но легче технически) или работаете в команде, — самым лучшим средством планирования, лично для меня, является лист формата А4 и карандаш. Нарисовал страничку — поделил на предполагаемые основные зоны (div’ы), а их, в свою очередь, если нужно поделил на подзоны, визуально выделил каждую и пронумеровал. Кто учился в институте — знает как делать эскизы, главное, это чтобы вам было понятно (я исхожу из того, что эти эскизы нужны только для вас, и не есть частью документации по текущему проекту).

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

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

Грамотно присвоить имена элементам XHTML структуры

Фокус в том, чтобы правильно “обозвать” пронумерованные вами ранее функциональные блоки. Сразу скажу, — пренебрегать этим просто глупо. Функциональным элементам структуры нужно присваивать функциональные имена. Это значит, что имена нужно присваивать основываясь на том, что данный элемент структуры делает, а не на том, как он сейчас выглядит. И тогда, даже через год, вы сможете быстро сообразить, что это за элемент и зачем он нужен на странице.

Простой пример. Можно назвать боковую панель redsidebar, а можно и outsidelinkblock. Как называть блоки — дело ваше, главное, чтобы это было вам понятно и носило функциональную окраску. Тогда ваша структура реально не зависит от презентации — дизайна и может иметь таких дизайнов сколько угодно. К тому же, пару раз воспользовавшись этой методикой вы, скорее всего, станете присваивать одинаковые имена одинаковым функциональным блокам на разных сайтах. Если это произошло — ваша эффективность как кодера возросла. Вот парочка интересных ссылок о том, как люди называют свои блоки в HTML структуре:

What’s in a name
What’s in a name (pt2)

А так же:

Use class with semantics in mind
Structural Naming

Компетентно использовать id и class’ы

Атрибут id или уникальный идентификатор, в отличие от атрибута class, может быть включен в код конкретной валидной страницы только один раз, для этого (идентификации элемента) и предназначен. Любая веб-страница имеет свой набор уникальных (единственных для каждой страницы) элементов, например #global-navigation, #search и так далее. Также, надо помнить, что у конкретного HTML элемента может быть только один id. А вот классов может быть несколько (сколько угодно), поэтому их можно “сцеплять”, как, например, в следующем коде:
<ul id="lookalsolinks" class="intext bullets outside"></ul>

Здесь я (зачем-то, для примера) захотел добавить буллеты (.bullets) к списку ссылок в тексте (.intext) и указать визуально признак того, что это внешниие ссылки, например прописав картинку в классе outside. Конечно, все это можно сделать и в одном классе, но тогда у меня не будет возможности манипулировать этими параметрами. Обращаю ваше внимание на то, что я не призываю плодить ненужные классы, наоборот, я предлагаю использовать возможности CSS эффективно и “гибко”.

Использовать CSS манипуляции с XHTML элементом body

Присваивая конкретный класс элементу body на конкретной странице вы обретаете возможность кардинально сменить CSS параметры как всей страницы в целом, так и отдельного элемента на такой странице. Этот класс работает как переключатель. Освоив эту технику вы сможете менять дизайн каждой отдельной страницы и “подсвечивать” навигацию, например текущее расположение пользователя на сайте. Все просто как 2×2:
body {background:#fff;}
body.about {background:#fff url(aboutus.jpg) top right no-repeat;}

И продолжая эту тему, подсвечиваем (изменяем стиль по умолчанию на другой) в меню ссылку “О Нас” на странице “О нас”, указывая тем самым “местоположение” пользователю на сайте:
body.about ul#navigation a#aboutuslink {color:#f50;}

Естественно, вы можете писать какой-угодно стиль, изменяя все, что угодно, а не только цвет. Три строчки кода - и 2 решенные серьезные задачи :) — альтернативный дизайн страницы “О нас” и улучшение usability сайта. Ну а что вы хотите? Современный CSS дизайн.

Использовать CSS каскад

Вот как использую его я. В коде страницы я прикрепляю css файл для отображения на экране компьютера (media screen). Этот файл называю почти всегда screen.css В этом файле содержится следующий код:
@import url(layout.css);
@import url(typo.css);
@import url(visuals.css);

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

Использовать стандартные возможности CSS по полной программе

Никита Вакорин, from Umade.ru замечательно на мой взгляд перевел статьи Роджера Йохансена (Roger Johansson) CSS tips and tricks, для начинающего CSS дизайнера — “источник мудрости и вдохновения”, переводы прочесть просто необходимо, вот они:

CSS: советы и приёмы, часть 1
CSS советы и приёмы, часть 2

Подводя итог, в очередной раз хочу напомнить, что CSS это не “rocket science” и все зависит от практики и желания. Чем быстрее человек освоит CSS, тем быстрее его работа станет похожа на творчество, а не на тупое переписывание табличных тегов.