Требования к дизайн-макету сайта

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

Жесткие требования

К файлу

• Сам макет должен быть представлен в форматах PSD или TIFF, сохранять строго в RGB
• Все слои одного логического элемента должны быть в одной папке (например модуль авторизации)
• Слои не в коем случае не должны быть склеены, кроме дизайнерских фишек
• Выравнивание слоев строго по rulers. Их не удалять. Оставлять в макете.
• Rulers должны быть выровнены строго с точностью до одного пикселя. Полпикселя не допустимо.
• Каждый элемент должен находится в одном слое, названным человечески-понятным именем, а не slice 1,2,
• В случае фиксированного шаблона четкое соответствие ширины макета утвержденной минимальной ширины сайта (а то говоришь что сайт будет фиксированный на 800 пкс, а рисуют 850 макет - что хошь то и верстай после этого)
• При разработке дизайна "под разрешение" обязательно отрисовывать в разрешение окна браузера а не монитора (при 1024 ширина браузера 1000)

Нестандартные шрифты на сайте с помощью CSS

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

И так, начнем конечно со спецификации CSS. Она сама здесь. Нам нужно только "Font Descriptions and @font-face"

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

Мои первые ошибки и как правильно верстать

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

Каждый начинающий изучает CSS с помощью интернета. СТОП! Не стоит этого делать. Я рекомендую сначала купить книгу "Основы CSS". Чтобы понять какие параметры существуют для селекторов. После трехкратного прочтения, уже можно искать дополнительную информацию по CSS в интернет.

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

* { font-size:11px;} 

Ни когда не используете в качестве селектора "*". Это даст большие проблемы по написанию стилей для всех элементов. Так как данное определение устанавливает для всех селекторов размер шрифта в 11px. А как же заголовки, параграфы, ячейки и так далее? Это конечно можно исправить с использованием правила "!important"

* {font-size:11px;}

td {font-size:12px !important;} 

Это же относится и к цвету текста. Не использовать в при данном селекторе правило color, т.е.

* {color: #000;}

Валидная вставка флеш (flash)

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

Тег "embed" не проходит w3c-валидацию,чтобы это недразумение исправить, пишем так:

<object type="application/x-shockwave-flash" data="images/header.swf" width="800" height="181">
<param name="movie" value="images/header.swf" />
<param name="quality" value="high" />
<param name="menu" value="false" />
<param name="wmode" value="opaque"> //обязательно, делает флеш в тексте, убирает баг верхнего слоя
<img src="images/top.jpg" alt="Без флеша" height="181" width="800" /> // Показывается картинка, когда отключен флеш.
</object>

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

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

Компонент True Gallery 2.0

Новый компонент фотогаллерея True Gallery для Joomla.

Откуда True Gallery?

Галерея основана на Datso Gallery от Андрея Датсо, который использовал изначально Pony Gallery. Основа все таки AkoGallery.

Кто?

Вся команда Joomlaforum.

Атрибуты селекторов

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

Что же это такое? И так начнем.

Для начала конечно можно посмотреть спецификацию CSS 2.0.

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

input[type="button"] {border:solid 1px #000;}