Каталог статей
Поиск по базе статей  
Статья на тему Интернет » Веб-дизайн » One True Fit - верстаем в рамках стандартов

 

One True Fit - верстаем в рамках стандартов

 

 

Introduction

На данной странице я попытаюсь рассказать о том, как я создал сайт Lee Jeans - One True Fit.

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

Совет: чтобы посмотреть, как сайт выглядит без использования CSS, добавьте ?css=false к URL-у любой страницы сайта. Чтобы снова включить CSS, добавьте ?css=true, либо щелкните на ссылке, что размещена внизу каждой страницы.

Дизайн

Дизайн сайта выполнен на основе рекламной серии the One True Fit Commercials.

загрузка...

 

 

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

В разумных пределах на сайте использовался Flash для создания простой анимации с целью оживления сайта и приближения его внешнего вида к стилю того рекламного ролика. Я воспользовался отличным Flash-сниффером Travis-а (a) для того, чтобы избежать использования невалидного кода в тегах OBJECT и EMBED, и (b) для того, чтобы предоставить контент для старых версий Flash и для тех пользователей, у которых выключен JavaScript. Можно спорить о том, стоит ли использовать Javascript для генерации невалидных тегов, но это пока самое наилучшее решение на сегодняшний день.

PHP/MySQL

Сайт работает на собственной системе шаблонов. Эта система - объектно-ориентированная и модульная, благодаря чему для генерации разных страниц сайта широко используются одни и те же куски кода. Дизайн шаблонной системы немного повторяет известные шаблонные системы Tiles и Tapestry, которые выполнены на Java. Такая комбинация единого кода и различных CSS позволила создать очень мощную систему. Например, рекламные блоки на главной странице и внутрненние страницы сайта используют один и тот же код разметки, но с помощью CSS их внешний вид сделан различным.

На сайте лишь некоторые элементы связаны с базой данных: это блок "отзывы покупателей", что идёт в правой колонке, и система голосования. Эти два элемента были созданы на основе шаблонного решения Data Access Object (DAO). Благодаря этому логика базы данных удобно отделена от кода сайта.

Благодаря такому многоуровневому подходу дизайн сайта получился очень гибким: уровни дизайна, структуры, доступа и хранения данных связаны только со своими ближайшими соседями. Это означает, что любое изменение на одном уровне потребует изменений только на соседних уровнях; например, изменение дизайна (css) может потребовать лишь изменений на уровне разметки (html).

Разметка

Весь сайт проходит успешно валидацию по спецификации "XHTML 1.0 Strict". Для того, чтобы придать по необходимости индивидуальность дизайну каждой страницы, я использовал комбинацию атрибутов id и class в элементе <body>. Так я получил возможность задать основные стили для всех страниц, а затем переопределить их и добавить дополнительные стили для каждой страницы в отдельности. Для блоков сайта я использовал стандартные элементы <div>, присвоив их атрибутам id значения "header", "content", "navigation", "footer", чтобы было ясно видно логическое значение каждого блока страницы. Атрибут class использовался по-минимуму. Вместо него для разметки текста на странице я полагался на структурные и семантические элементы-теги.

CSS

CSS сайта проходит полную валидацию за исключением одного хака Star-7, который использован на главной странице.

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

/* "* html" targets only versions of ie */
* html body#internal #content {	\width: 429px;	/* set for all ie */	w\idth: 400px;	/* ie5win will ignore this */	/* backslash hack hides from ie5mac \*/	width: 200px;	/* end hack */
}

Другие приемы CSS:

  • приём "lir" - lir image replacement (подмена текста картинкой) - широко используется на сайте, чтобы заменить простой текст графикой.
  • приём "fir" - Fahrner image replacement (подмена текста картинкой) - для пары случаев, где ie5mac игнорировал первый прием "lir".
  • приём Fast rollovers (быстрый "перекат" картинок) - сокращает количество загружаемых картинок (следовательно и объем траффика), а также убирает эффект мигания, который появляется при использовании css для динамической смены картинок.

Все стили были разделены на несколько файлов, чтобы с ними было легче работать:

  • global: самые основные стили для всех страниц, включая стили для форм
  • page: цвета и общие элементы для всех страниц; например, для навигациия
  • layout_home: позиционные стили для главной страницы
  • layout_internal: позиционные стили для внутренних страниц
  • content: специфические стили для контента каждой страницы
  • popup: стили для каждого всплывающего окна

Все стили кроме global "обёрнуты" в файл, который импортирует с помощью @import уже реальный файл со стилями. Таким образом стили прячутся от Netscape 4 и IE 4 на MacOS 9. Пользователи таких броузеров увидят лишь слегка оформленные полностью работающие страницы, но без красот дизайна. А вот фрагмент @import, который отфильтровывает IE 4.5:

@import 'page.css'; /* for everyone but mac ie - note single quotes */
@im\port "page.css"; /* for mac ie5 but not mac ie4.5 */

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

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

Прочее

К сожалению сайт использует PHP на IIS, поэтому мне не удалось поиграться с mod_rewrite.

Достижения

Счастлив отметить, что сайт выглядит прекрасно в:

  1. IE 5 на OSX
  2. Camino на OSX
  3. Safari на OSX
  4. OmniWeb 4.5 на OSX
  5. IE 6 на Windows
  6. IE 5 на Windows
  7. Opera 7 на Windows
  8. Netscape 6.2 на Windows
  9. Прочие броузеры семейства Mozilla - Netscape 7, Firebird, и т.д..
  10. С основным стилем - Netscape 4
  11. С основным стилем - IE 4.5 на MacOS9

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

Больше всего мне в сайте нравятся: результаты опроса ("8,217 Women said they love their One True Fit Jeans" - посмотрите на главную страницу с css, и без css, а также на сам файл, на ту часть текста, что идет под комментарием "Stats"), а также эти маленькие скругленные уголки, что вы видите на внутренних страницах сайта. Предоставляю вам возможность самим узнать, как я это сделал :)

Заключение

Я мог бы перечислить тысячу причин, по которым сайт должен быть сделан в XHTML/CSS, но главная из них - это видимость сайта на поисковых серверах. Именно из-за этого заказчик согласился на сайт, требующий последних версий броузера. Я не эксперт по поисковым системам, но считаю, что результаты у нас будут неплохие, так как у нашего сайта: минимальное количество кода разметки, присутствуют семантические элементы (такие как тег <h*>) и содержимое страницы расположено близко к началу файла.

Надеюсь, данный сайт послужит примером того, что с помощью правильного кода разметки и стилей можно создать не только простой блог-сайт. Хоть я и являюсь поклонником блогов, а также других информационных сайтов, думаю, что One True Fit открыл для вас другую сторону Луны.

загрузка...

 

 

Наверх


Постоянная ссылка на статью "One True Fit - верстаем в рамках стандартов":


Рассказать другу

Оценка: 4.0 (голосов: 16)

Ваша оценка:

Ваш комментарий

Имя:
Сообщение:
Защитный код: включите графику
 
 



Поиск по базе статей:





Темы статей






Новые статьи

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

Вместе с этой статьей обычно читают:

Mercedes SLK устанавливает новые стандарты

В 2003 году в борьбу за покупателей дорогих родстеров вступит новое поколение Mercedes SLK, который еще больше укрепит позиции немецкой компании на этом сегменте рынка. Надо отметить, что пока и SLK является одним из самых популярных автомобилей в своем классе, несмотря на довольно высокую цену. Правда, и конкуренты не являются «дешевкой» - BMW Z3 и Audi TT стоят не намного дешевле.

» Немецкие автомобили - 1479 - читать


Skoda Octavia: В рамках приличия

В тесте участвуют автомобили: Skoda Octavia Главным козырем «Skoda » всегда был и остается поразительный баланс между ценой и качеством автомобиля. Впрочем, это не мешает чехам создавать вполне приличные модели и для тех, кто, как говорится, любит погорячее, например Skoda Octavia RS.

» Немецкие автомобили - 1273 - читать


Lexus ES 350 устанавливает новые стандарты

Компания Lexus представила на автошоу в Чикаго пятое поколение седана ES, которое уже в апреле этого года появится в автосалонах дилеров. Разработанный с нуля, Lexus ES предлагает новый уровень комфорта, безопасности и динамики в сочетании с элегантной внешностью. Дизайнерское ателье Lexus продолжает развивать направление «L-finesse Design», и новое поколение ES станет четвертой моделью, построенной по такой концепции.

» Разное - 1511 - читать


Mini обзавелся новыми версиями One и Cooper D

Модельный ряд компактного автомобиля Mini в ближайшее время пополнится новыми версиями One и Cooper D, их мировой дебют состоится на Международном автосалоне в Женеве уже весной этого года. Версия One станет самой простой модификацией автомобиля Mini и будет комплектоваться 1,4-литровым 95-сильным бензиновым двигателем. Заявленный производителем разгон с 0 до 100 километров в час будет занимать всего 10,5 секунд, а максимальная скорость составит около 185 км/ч.

» Разное - 1632 - читать


Новая Нива - стандарт или халтура?

Кажется, в следующем году начнут выпускать новую «Ниву». Причем, выпускать по настоящему, а не на Опытно-промышленном производстве в количестве нескольких штук в день – именно так делали «Ниву» до недавнего времени. Слово «делали» не зря стоит в прошедшем времени.

» Разное - 4640 - читать



Статья на тему Интернет » Веб-дизайн » One True Fit - верстаем в рамках стандартов

Все статьи | Разделы | Поиск | Добавить статью | Контакты

© RusAdvice.Org, 2006-2014, при копировании материалов, прямая индексируемая ссылка на сайт обязательна.

Энциклопедия RusAdvice.Org