Список разделов



Поиск
введите слово для поиска
расширенный поиск




Календарь
<Октябрь 2017>
ПнВтСрЧтПтСбВс
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
ГлавнаяВходРегистрацияПоследние статьиПоискКонтакты
   

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 открыл для вас другую сторону Луны.




Похожие статьи


1 : Первое знакомство с Window Mobile. Нелегкий выбор новичка: Смартфон или Коммуникатор?
Сегодня мы с вами рассмотрим самые общие вопросы о Windows Mobile и попытаемся помочь определиться будущим пользователям, в их нелегком выборе: "Смартфон или коммуникатор?". Что же такое представляет из себя Windows Mobile? Если вы ответа на этот воп...

2 : Google Webma статистика сайта
Сервис поисковой системы Google для анализа интернет-сайтов – Google Webmaster Tools – позволяет не только отслеживать индексацию ресурса поисковой машиной, наличие ошибок на страницах своего сайта или удалять определенные страницы из ...

3 : Организация CSS
Современные браузеры поддерживают работу множества технологий, в частности технологию оформления веб-страниц CSS (Cascading Style Sheets – каскадные таблицы стилей), необходимые для качественного оформления HTML и XHTML-документов. Организация CSS-фа...

4 : Microsoft настоятельно рекомендует скачать свежий патч
Microsoft официально признала, что её новейшая операционная система Windows XP опасна для пользователей: хакеры могут взломать систему через Интернет и взять её под свой полный контроль со всеми вытекающими отсюда последствиями.Такое признание не мог...

5 : Шлем Shoei Z-One: инфо, тесты, фото, продажа
На презентации этой модели фирма Shoei заявила, что их гоночный шлем Z-One является новым стандартом в технологии производства шлемов. Как и в случае большинства других технологических достижений в области защитных свойств шлема, наиболее существенны...

Рейтинг: 2.8/5 (227 голосов)

Последние статьи


1: Автоматическая сверка счетов-фактур – новые возможности «1С:Бухгалтерии 8» ред. 3.0
2: Возможности CRM в 1С «Управление торговлей»
3: Настройка отчетов 1С
4: Как отразить доп. расходы в 1С?
5: Взаимозачет в 1С



Последние новости


Делец в Удмуртии на госденьги открыл нарколабораторию - УФСБ
МОСКВА, 2 ноя - РИА Новости. Следствие заподозрило жителя Удмуртии в организации нарколаборатории на полученные от государства деньги, сообщает в пятн...

Сотрудница томского вуза продавала героин около общежития

ТОМСК, 2 ноя – РИА Новости, Сергей Леваненков. Полиция задержала 58-летнюю томичку при попытке продать героин, возбуждено уголовное дело, сообщи...

Молодежную премию наноиндустрии получил автор технологии для наркоза

© РИА Новости. Сергей ПятаковМОСКВА, 1 ноя - РИА Новости. Лауреатом Российской молодежной премии в области наноиндустрии 2012 года стал заместитель ге...

Жители еще одного мексиканского города взялись за борьбу с наркомафией

МЕХИКО, 2 ноя - РИА Новости, Дмитрий Знаменский. Жители города Олинала в мексиканском штате Герреро взяли в руки оружие, чтобы противостоять попыткам ...

Бразильские студенты получали наркотики по специально вырытому туннелю

© РИА Новости. Артур ГабдрахмановМЕХИКО, 2 ноя - РИА Новости, Дмитрий Знаменский. Оригинальный способ доставки наркотиков в университет крупнейшего бр...


Послать ссылку на этот обзор другу по ICQ или E-Mail:


Разместить у себя на ресурсе или в ЖЖ:


На любом форуме в своем сообщении: