Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

WEB дизайн - начинаем с пикселя -баннеры, скрипты, шаблоны № 2


Сегодня в выпуске:
Новости
Шаблон для WAP сайта №2
Оценка качества создания сайта
Советы по созданию страниц для вэб-дизайнеров
Как заценить собственный сайт
Софт - mp3DirectCut

Новости
1. К сожалению наш сайт (design-forever.ru) пока не работает, все руки не доходят до его восстановления, не все, но часть Вы можете посмотреть на нашем старом сайте dbsite.hop.ru - его работоспособность была недавно восстановлена. 
2. Напоминаем для тех кто еще не скачал руководство по созданию WAP сайта, поспешите скачать - http://mobile.ida-dbs.com/category/doc/ 

Шаблон для WAP сайта №2 Шаблон для WAP сайта №2  
Шаблон содержит 2 страницы:
 - главная
 - основная
 В шаблоне присутствуют:
 - 3 картинки для оформления главной
 - собственный счетчик для подсчета посетителей
 - 2 картинки для примера
 - 2 мелодии в формате mmf 
Для установки шаблона скопируйте все файлы к себе на сервер и запустите страницу www.мой_сайт.com/index.wml
В архиве находиться инструкция по установке счетчика. Теперь своих посетителей Вы можете считать сами.
Скачать шаблон: http://ida-dbs.com/mobile/wap_shablon/w_2.zip
Автор счетчика Трофимов Дмитрий, делал скрипт ориентируемый еще на старый bmp формат, я немножко модернизировал скрипт 
Было
<?
// Wap-Counter v.0.1 от Norge

$counter_array = file("counter.dat");
$all = $counter_array[0]+1;
$fp = @fopen("counter.dat","wb");
@fputs($fp,$all);
@fclose($fp);

$im = ImageCreateFromPng("counter.png");
ImageString ($im, 1, 10, 12, $all,0); 
header("Content-type: image/vnd.wap.wbmp");
ImageWBMP($im);

?>
Стало
<?
// Wap-Counter v.0.1 от Norge

$counter_array = file("counter.dat");
$all = $counter_array[0]+1;
$fp = @fopen("counter.dat","wb");
@fputs($fp,$all);
@fclose($fp);

$im = ImageCreateFromPng("counter.png");
ImageString ($im, 1, 6, 10, $all,0); 
header("Content-type: image/gif");
ImageGif($im);

?>

Т.е. сделал чтобы код php формировал gif картинку, а не wbmp.
Основным источником картинки счетчика  стоит картинка в формате png. Вы можете в программе Photoshop нарисовать новый счетчик для себя.

Оценка качества создания сайта
Совсем недавно я наткнулся на такой вот интересный сервис:
Дорогие друзья! Предлагаемый вашему вниманию сервис предназначен для оценки качества создания сайтов. Результатом проверки является оценка качества (в баллах), значение фактора эмоциональной оценки (фактор D) и текст с краткими пояснениями и комментариями к произведённой оценке. Диаграмма на страницах с результатами оценки иллюстрирует процентные отношения четырёх основных факторов и их абсолютные значения.
Когда я оценил свои работы то получил следующий результат. Максимально 734 балла, остальные работы были в пределах 300-500. Попробуйте и Вы провести оценку своего сайта. Можете посмотреть, насколько система оценивает тот же yandex.ru. 
Сервис находиться по этому адресу http://cys.ru/ 

Советы по созданию страниц для вэб-дизайнеров

Автор: KLEZ
Дата: 16.08.2005

Путешествуя по Интернету, невольно замечаешь "небольшие" ляпы, порой, очень больших порталов. Конечно, в основном, это относится к начинающим. Но иногда видишь, как "фиговый" сайт, который по рейтингу опережает нормальные сайты и красуется своим тёмно-красным фоном с насыщенно-ярким красным цветом шрифта, невольно хочется сказать: "Какого чёрта администраторы хостингов не удалят эти сайты к праотцам и дадут, наконец, свободу "нашим". 
Так вот, от всех этих нестандартных цветовых схем через десять минут у Вас заболят и начнут слезиться глаза. Через пятнадцать - заболит голова. Ну а через тридцать - Вас сблюёт (дай Бог не на монитор . 

Я пользуюсь Opera (для тех, кто не в танке: браузер такой). В этой программе есть полезная кнопочка: "Режим пользователя". До этого можно настроить данный режим по собственному вкусу: отображение ссылок, фона, шрифта заголовка, основного текста и др. Переключившись в данный режим, просматриваемая вэб-страница отображается так, как Вы это настроили. Например, красный фон сменится на настроенный белый. Салатовый шрифт - на чёрный и т.д. Всё вышеописанное действует только для браузера Opera. Для Internet Explorer - не знаю. Не пользуюсь. 

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

∙ От цветовых схем (об этом было выше) глаза вылезают на орбиту. Не надо быть оригинальным. Если ничё в голову не лезит (как у меня), то достаточно выполнить сайт стандартом: белый фон, тёмный шрифт. Примером нормальных стандартных могут служить абсолютно все хоть в коей мере знаменитые сайты: Yandex.ru, Rambler.Ru, Mail.Ru и др. (единственное, что стоит отметить: наряду с белым выбирается любой другой цвет - сивол сайта, получается пара цветов - сивол сайта, которые мы и видим на данных порталах)

∙ При высоких разрешениях монитора (1024 * 768 и выше) появляется горизонтальная полоса прокрутки. Извините, но это полный бред, если мне, например, нужно посмотреть то, что расположено внизу справа, то я должен сначала прокрутить вертикальную полосу, а потом ещё и горизонтальную. А если мне нужно просмотреть несколько таких страниц? Да я скорей поищу что-нибудь получше. Такая вещь была недавно на сайте Mail.Ru из-за висевшего там рекламного баннера, размером с мой сканер. Администратор убрал этот баннер, за что ему огромнейшее спасибо. 

∙ Хотя, данный пункт не является обязательным (для меня важнее содержание, чем красота), всё же приятно будет побродить по таким сайтам. Это я про стандарты. Конечно, белый фон, чёрные буквы никому мозолить глаза не будут. Но, может быть, добавить парочку картинок, изменить цвета ссылок при наведении на них указателя (как на этом сайте: с черного на серый) или что-нибудь ещё. Пофантазируйте! Блин, дизайнер Вы или нет?! Только не переборщите. 

∙ А теперь - самый больной вопрос: ГРАФИКА! В каждой, абсолютно в каждой (!) статье, посвящённой вэб, имеется пункт на эту тему. И там ясно сказано: НЕ перегружайте свой сайт графикой. Ну какого чёрта (блин, как хочется выругаться) многие сайты до сих пор построены только на картинках. А если они у меня вообще выключены? Тогда сайт будет "пустым". Поэтому вот совет: посмотрите, что будет с сайтом, если отключить картинки, можно ли прочесть в этом случае информацию на данном сайте и т.д. У всех моих друзей уже выделенка (у меня тоже), но я то не Билл Гейтс, чтобы платить за лишний трафик. Даже на 56К линиях тянет около 4 минут одну страницу. Представьте, сколько времени у меня займёт посещение, например 7-9 страниц данного сайта. 30 - 40 минут! И то без того, чтобы чего-то успеть там прочитать. А логотип один занимает столько же, сколько документация или электронная книга, скачиваемая обычно через интернет-качалки. Обычно - это GIF или, что хуже, флэш - картинки (хотя сейчас флэш уже в размере занимает столько, сколько маленький jpeg-логотип, а иногда даже сравнивается с гифом). Короче говоря, ни буду продолжать. Если человек умный, поймёт с первого раза. Примером данного "графического ляпового сайта" может послужить Evanescense.Com и ещё много других. Всех не упомнишь. 

∙ Навигация по сайту у многих сайтов - тоже является больным местом. Бывает, зайдёшь куда-нибудь в дебри, а потом думаешь: "Это я где?" ?:| Пожалуйста, ставьте хоть домашнюю ссылку. И ещё кое-что: желательно, чтобы весь сайт имел одинаковые навигационные менюшки. Данная проблематика обычно касается только больших или сверхбольших порталов. 

∙ Как же меня бесят скрипты! Честно признаться, я за то и уважаю Narod.Ru, что он не поддерживает PHP, Perl и др . Правда весь этот сайт написан на скриптах, но есть и исключения, да я и не про это. Есть скрипты, которые не дают посмотреть, куда ведёт ссылка, также есть скрипты, которые создают различные анимации на сайте, за которыми не видно самого сайта, ещё есть те, которые что-то вытворяют с курсором, полями ввода и т.д. И даже, если это делается, чтобы защитить свои авторские права. Значит, Вы делаете свою работу не на благо других, а для того, чтобы всё больше и больше "других" шло на Ваш "уникальный" сайт. А как будет приятно, например, навести курсор на ссылку "Скачать" и увидеть на конце (если, вообще его видно будет) не .php, а .exe (это я имею в виду обсчёт скачивания файлов). 

∙ Ну и, конечно, враньё (ложная реклама) не является путём к положительным отзывам. Пишите про сайт именно то, что там есть, а не то, что прибавит Вам посетителей. 

Один ушастый ламер в каком-то форуме задал вопрос: "Почему не покупают мой сайт? (Цена 2000руб)" и дал ссылку на сайт. Такой "перегрузки" я ещё не испытывал никогда. Мало того, что он дооооооооооолго грузился на максимальной скорости (видно из-за скриптов), так он ещё и чисто был перегружен графикой, заполнен цветом яркого солнца, с таким же ярким шрифтом, я чуть не ослеп. Не дожидаясь полной загрузки, я выключил и просмотрел ответы. Многие были "за меня": "Такое фуфло", "Сиди дома и отращивай" и др. Ответ на все эти заявления был такой: "Я хотел сделать красивый сайт. Ведь на Яндексе абсолютно нет никакого дизайна, так почему вы его не ругаете?"

Судите сами. Да и ещё одно, вы поймёте сами: http://pupkin.ru/design.htm прочитайте первые строчки содержания страницы, которые написал автор 

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

Как заценить собственный сайт

Любой дизайнер по природе своей любопытен. Хотя бы в той части, что является предметом его деятельности. В частности, это относится к его работам: сделав сайт, ему интересно узнать - получилось или нет? В большей части это относиться к начинающим дизайнерам, ибо у профессионалов «проколы» случаются редко. 


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

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

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


Ищем грубые ошибки

∙ Не остались ли на сайте страницы, отличающиеся дизайном от общего стиля? Все одинаковые элементы должны быть выполнены в одном цвете, одним шрифтом и.т.д. Ситуация, когда на одной странице меню в синих тонах, а не другой в зеленых - недопустима. 
∙ Нет ли ошибок в скриптах, SSI-директивах? Все ли ссылки работают и ведут на существующие страницы? 
∙ Исправлены ли все орфографические ошибки, особенно в важных элементах, таких как заголовки? 
∙ Исправлены ли грубые ошибки в верстке - блоки разной ширины, «поехавшие» заголовки, отсутствующие изображения, текст вне предназначенного для него места, в общем, все, что бросается сразу в глаза 
∙ Правильно ли подобраны цвета? Нет ли нечитаемого текста, с цветом, близким к цвету фона? Цвета шрифта и текста должны быть контрастными.
∙ Ошибки в использовании шрифтов и оформлении текстов
Контрастен ли шрифт по отношению к фону? Например, серый шрифт по черному фону совершенно нечитабелен 
∙ Шрифт не задан фиксировано? В принципе, фиксированный шрифт имеет право на существование, но, если вы лишаете пользователя возможности самому выбрать необходимый размер шрифта, уделите двойное внимание подбору оптимального размера шрифта. 
∙ Нормально ли выглядит страница при любом размере системного шрифта. Некоторые пользователи устанавливают в настройках максимальный размер шрифта, отчего плохой дизайн сразу разваливается. Проверте свою верстку на прочность при максимальном размере шрифта 
∙ Корректно ли сайт печатается? Для информационных сайтов есть смысл создавать специальную версию для печати 
∙ Текст выводиться удобной для чтения гарнитурой? Отвечает ли данная гарнитура настроению и стилю сайта? Помогает ли (или хотя бы не мешает?) усвоить содержание текста? 
∙ Разбит ли текст на абзацы? Абзацы должны быть не слишком длинными, в каждом абзаце должна быть законченная мысль 
∙ Нет ли лишних эффектов в тексте? Мигающий, яркий, движущийся текст часто раздражает пользователя. Использовать данные эффекта лучше только в крайних случаях 
∙ Выделяются ли главные мысли наклонным или жирным шрифтом? Выделение существенных моментов позволяет облегчить восприятие текста 
∙ Отсутствует ли выделение текста подчеркиванием? Подчеркивание - это стереотип, обозначающий для пользователя ссылку. Не стоит обманывать пользователя, лучше обойтись другим методом выделения 
∙ Присутствуют ли заголовки и подзаголовки? Такое деление помогает пользователю лучше ориентироваться в документе. Причем, деление следует проводить с помощью специальных тэгов 
∙ Если вы используете тёмный или чёрный фон, установлено ли жирное начертание текста по умолчанию (на большинстве низкокачественных мониторов, которые и составляют большинство, тонкий светлый текст на тёмном фоне проявляет несведение лучей и от этого выглядит сильно размытым)?


Ошибки при использовании графики

∙ Хорошо ли оптимизирована графика? Нет ли лишних изображений, особенно больших? Графика существенно увеличивает время загрузки сайта. Обычно, вес всей страницы с графикой, не должен превышать 50 kb. Иначе пользователь может так и не дождаться полной загрузки и уйти 
∙ Использует ли графика метафоры, известные пользователю по обычной жизни? Лишаете ли вы её несущественных подробностей, без пользы усложняющих её восприятие? Вообще говоря, нет никакого смысла, как в абстрактных пиктограммах, так и в пиктограммах, инспирированных компьютером. Место хранения файлов можно обозначить изображением жёсткого диска, но при этом от пользователя будет требоваться знание того, как этот диск выглядит. Что неправильно, т.к. от пользователя вообще нельзя ничего требовать. Лучше нарисовать шкаф. 
∙ Если вы используете графику, имитирующую трехмерность, все ли тени падают в одну сторону? Это очень распространенная ошибка, сайт на котором все тени падают в разные стороны выглядит нелепо и смешно 
∙ По назначению ли используется флеш и анимированные изображения? Лишнее мельтешение на странице еще никому не принесло пользы. Кроме того, такие объекты обычно прилично «весят» 
∙ У всех ли графических изображений есть соответствующий альтернативный текст? Он поможет разобраться, если у пользователя в браузере отключена возможность просмотра графики, кроме того, указание этих атрибутов является обязательным в стандарте HTML 4.0


Ошибки в навигации

∙ Хорошо ли продумана навигация? Разбит ли сайт на разделы, если это необходимо? 
∙ Навигация должна присутствовать на всех страницах сайта. На каждой ли странице есть ссылка на главную страницу? 
∙ Отражает ли навигационная панель текущее местоположение посетителя на сайте? Это может быть выделение текущего пункта в меню цветом, либо другим эффектом 
∙ Всегда ли корректно работает кнопка Back браузера? Некоторые страницы, переданные по шифрующему протоколу, не могут быть взяты браузером из кэша и их требуется загружать заново (в лучшем случае пользователю нужно самому нажать кнопку Refresh, в худшем - производить более сложные и неочевидные действия). При повторной загрузке таких страниц может также слететь установленная в браузере кодировка (и весь русский текст превратится в тарабарщину). Избегайте делать такие страницы. Также, если у вас есть страницы с формами ввода, добейтесь того, чтобы вернувшийся на эту страницу пользователь (не важно, копкой ли Back, либо благодаря гиперссылке) нашел её со всеми своими установками (это очень экономит время, если нужно вернуться и что-нибудь поправить). 
∙ Если навигация вашего сайта непрозрачна, сложна, имеет древовидную структуру, то доступна ли карта сайта?


Тестируем юзабилити

∙ Использованы ли все возможности для взаимодействия с пользователем? Я имею в виду интерактивные кнопки, другие элементы, реагирующие на действия пользователя. 
∙ Если объем сайта велик, имеется ли возможность текстового поиска? 
∙ Всегда ли доступен архив информации? Старая информация не значит ненужная. 
∙ Предупрежден ли пользователь о возможных неприятных последствиях его действий? Это может быть открытие нового окна, запуск апплета, уведомление о ходе загрузки страницы или размер файла, доступного для скачивания 
∙ Видимы ли все изменения в содержании и дизайне, произошедшие из-за действий пользователя? Например, если пользователь установил какой-нибудь переключатель, то во всех страницах, демонстрирующих результаты его действий, должно быть показано, что этот переключатель установлен в соответственное положение. Принципом, послужившим основой этого вопроса, является утверждение, гласящее, что любое действие пользователя должно быть отражено интерфейсом. 
∙ Находятся ли важные данные в начале страницы? Важная информация должна заинтересовать пользователя, заставить его прочесть до конца ваш материал 
∙ Помогает ли альтернативный текст понять изображение? Имеется ли у всех навигационных ссылок пояснение? Пояснение должно отвечать на вопрос, куда попадет пользователь, щелкнув по ссылке. 
∙ Различаются ли цвета у пройденных и непройденных гиперссылок? 
∙ Отражают ли заголовки (title) путь к данной странице? 
∙ Стараетесь ли вы использовать кнопки с глаголами, нежели иными частями речи, например "Показать" вместо "Готово"? 
∙ Нет ли на странице ссылок на саму себя? Это нелогично, т.к. ссылка сама по себе предполагает перемещение. 
∙ Изображение логотипа должно быть ссылкой на главную страницу. 
∙ Помните что синий подчеркнутый текст - это стереотип? Так чаще всего обозначают ссылки. Старайтесь это использовать и вашу ссылку заметят (ах, как жаль, что у нас на сайте не синие ссылки - прим. KLEZ'а)


Послесловие

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

Впечатление от сайта, как известно, формируется в первые 5-10 секунд после загрузки. Если вам удалось создать стильный, красивый, необычный сайт, и при этом не испортив все впечатление грубыми ошибками, то можете считать, что дизайн удался! Можно начинать заполнять сайт информацией, раскручивать, совершенствовать. Немного терпения - и ваш проект будет популярным!

Удачи тебе, Дизайнер!
Автор: Поликарпов Роман (public@fromru.com)

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

Программа для редактирования mp3 файлов
Небольшой редактор MP3 файлов.
Главной особенностью этой программы является то, что она позволяет работать с аудио-файлами без их декодирования. Тем самым удаление, вставка, копирование, разделение музыкальных файлов осуществляется без потери качества звучания и со значительным выигрышем по времени, относительно декодирования MP3 файла и его последующей обработке. Ещё одной положительной чертой MP3DirectCut является возможность работы с файлами большого размера. В главном окне редактора музыкальный файл отображается в виде визуального графика, с которым и происходит работа. Кроме того, предусмотрена возможность изменения громкости звучания аудио файлов.Позволяет обрезать тишину в начале и/или конце файла, нормализировать звук, а также плавно убирать его в конце композиции, обьединять файлы, редактировать ID3-тэги и записывать Mp3 непосредственно на диск.
 
Легкая инcтрукция по работе:
Откройте файл mp3: Файл -> Открыть
Далее, нажмите кнопку "Пуск" для прослушивания файла. Вы увидите движение курсора, график композиции. Прослушайте мелодию.
Инструкция, описание к программе mp3DirectCut
Запишите начало и конец нужного для Вас фрагмента. Затем, в поле "Выделение" - укажите интервал нужного фрагмента, он автоматически отобразиться на графике.
Сохраните выделенный фрагмент: Файл -> Сохранить выделение
 
Скачать программу: http://mobile.ida-dbs.com/2006/03/23/mp3DirectCut.html можно здесь.

В избранное