Блог Кировского строителя Интернет » Правила

Верстка (порезка) макета

Khlyupin — Fri, 20 Nov 2009 08:00:27 +0000

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

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

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

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

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

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

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

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

Из всего этого ясно, что хорошая верстка PSD макета – это верстка, сделанная с грамотным употреблением тегов, оптимизируемой графикой, легким и понятным кодом.

Спонсор поста: Магазин инженерной сантехники Сушилка.net. На сайте вы можете приобрести полотенцесушители водяные из нержавеющей стали. С легким паром!

Все права на материалы, размещенные в ленте, охраняются в соответствии с гражданским законодательством РФ. Материалы не могут быть использованы без письменного разрешения владельца сайта. © 2009-2010 www.blog.khlyupin.ru

Основы дизайна

Khlyupin — Thu, 19 Nov 2009 08:00:51 +0000

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

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

Наиболее распространенные ошибки дизайнеров перечислены ниже.

Неправильное использование шрифтов. Поймите, что какие бы хаки не использовали программисты для более сотни браузеров предусмотреть обход данной проблемы невозможно. Рекомендую использовать стандартные Arial, Tahoma и Verdana. Дополнительно можно использовать Georgia, Trebuchet MS, но не увлекаться ими. Важно размер шрифтов задавать в пикселях.

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

Бывают такие кадры, которые стандартную троицу рисуют в векторе (стандартная троица – это иконки main, email, map).

Размытости и неточностей в макете быть не должно! Это относится и к шрифтам, сейчас идет тенденция косить в макетах под сафари с её сглаживанием, сидишь и гадаешь толстый шрифт или тонкий.

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

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

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

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

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

Найти вакансию дизайнера в Москве, вы сможете на сайте KeyWork. KeyWork – это лучший поиск работы в IT отрасли!

Бан Яндекса

Khlyupin — Mon, 16 Nov 2009 08:00:03 +0000

Что же это такое? Это когда все или большая часть страниц выпадают из индекса поисковой системы. Проверить домен перед покупкой на зеркала (клей тИЦ и PR) можно добавив в аддурилку Яндекса, она покажет вам, что-то типа такого.

Сайт находится в бане Яндекса.

Зеркало сайта со склеенными данными тИЦ и PR.

Наверняка вы слышали о таинственном фильтре Яндекса АГС-17. Мои проекты данный фильтр не задел и с уверенностью 99% не заденет. Но мне удалось участвовать в процедуре вывода из бана сайта, который был мне подарен.

Что же было сделано?

1. Была написана хорошая порция контента, 2-3 статьи в день объемом 3-5 тысяч знаков, проставленная на 2 недели автоматического опубликования;

2. Был сменен алгоритм ЧПУ (например, преобразовав из http://www.site.ru/page/ в http://www.site.ru/page.html);

3. Разработал «правильный» robots.txt, в котором 15% сайта было отключено от индексирования;

4. Создал карту сайта нескольких форматов;

5. Были прописаны alt и title в шаблоне, где это нужно;

6. Заголовки, ключевые слова, описания массово сгенерированы новыми и заменены;

7. Написал письмо Платону

Через 1,5 недели сайт добавился в аддурилку Яндекса, после нескольких апдейтов 80% страниц были в индексе.

Лучшая проверка тиц и pr на этом ресурсе, быстро, удобно и не висит, как у конкурентов

«Поспешишь, людей насмешишь!»

Khlyupin — Thu, 27 Aug 2009 08:00:33 +0000

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

Перечислим факторы сайта, который не вылетит из индекса с уверенностью 99%.

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

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

3. Верстку желательно выполнить семантичной, с правильным использованием тегов (h1, h2, h3, strong) и микроформатов;

4. Что касается контента желательно перед публикацией проверить его DCFinder’ом или в Copyscape.

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