Как новенький
3 ноября 2008Инициатива, начатая порядка трёх месяцев назад, наконец-то обернулась новым сайтом. Вы можете недоверчиво приглядываться — мол, вроде тот же, нет? Но уверяю вас, весь HTML, CSS и JS-код, а также часть плагинов для WordPress были написаны с нуля, а дизайн претерпел некоторые изменения.
С чего бы вдруг? Всё просто — предыдущей вёрстке исполнилось примерно полтора года и настало время её обновить для того, чтобы сделать сайт ещё быстрее, ещё удобнее и просто продемонстрировать некоторые новые технологические приёмы. Итак, чего же новенького?
Документ и HTML
Минусом предыдущей раскладки было не слишком логичное расположение блоков — элемент #sidebar, в силу технических особенностей вёрстки, располагался в коде после элемента #foot, теперь же всё логично:
<div id="page"><div id="head"></div><div id="content"></div><div id="sidebar"></div><div id="foot"></div></div>
Также, для повышения доступности, было добавлено более подробное скрытое навигационное меню:
<ul class="skipto"><li><a href="#content">Содержимое</a></li><li><a href="#menu">Навигация</a></li><li><a href="#latest">Из последнего</a></li><li><a href="#search">Поиск</a></li></ul>
В ответ на просьбы, были несколько доработаны комментарии. Изменился список разрешённых элементов: <blockquote cite="">, <a href="">, <strong>, <em>, <del>, из которого, в силу презентационной природы, ушли <b> и <i>.
Также в тексте комментария теперь можно удобно публиковать фрагменты кода. Достаточно обернуть ваш фрагмент в тег [source]. За этот плагин к WordPress нужно поблагодарить Ольгу Алексашенко — в дальнейшем планируется его публикация. В качестве примера — ваш код в поле ввода:
[source]<div class="title"><h1>Пепелсбей.net</h1><a href="#">RSS</a></div>[/source]
…и то, что в итоге оказывается в комментарии:
<ol class="code"><li><code><div class="title"></code></li><li><code> <h1>Пепелсбей.net</h1></code></li><li><code> <a href="#">RSS</a></code></li><li><code></div></code></li></ol>
Представление, вёрстка и CSS
Размеры CSS остались примерно в тех же рамках, однако файл reset.css теперь не подключается директивой @import, а входит в состав главного и единственного файла style.css, что позволило сэкономить на одном запросе к серверу — и это только начало.
Что касается хаков для IE, теперь они разделены на два файла ie.css (для всех версий) и ie6.css (для шестой версии и младше). IE8, от греха подальше, пока переключён в режим совместимости со стандартами при помощи директивы X-UA-Compatible. Подробнее об этой технике я уже писал в заметке «Уличная магия IE».
Отдельной строкой хочется упомянуть о причинах, которые заставили меня не чистить отдаваемые файлы от пробелов и переводов строк, а также не сжимать их явно при помощи GZIP. Дело в том, что этот сайт является не только демонстрацией моих навыков, но также может стать хорошим примером для тех, кто учится вёрстке. Я отлично помню сколько интересного я узнал много лет назад, прошерстив CSS-файл ещё первой версии A List Apart. Надеюсь, кому-то это будет полезно.
Что касается новых вещей, то в теперь в CSS есть правила, отвечающие за обработку инлайн-цитат <q>, к сожалению — по причинам кроссбраузерности, не при помощи правил content:open-quote и content:close-quote, а более грубо:
Q:before {content:'\00AB';}Q Q:before {content:'\201E';}Q:after {content:'\00BB';}Q Q:after {content:'\201C';}
…ну и другие радости из черновика CSS 3 с вендорными префиксами, которые хоть и благословлены W3C, но делают CSS невалидным:
border-radius:4px 4px;-webkit-border-radius:4px 4px;-moz-border-radius:4px 4px;
Но самым интересным в работе над новым сайтом, оказалось использование CSS-спрайтов. Прежняя версия сайта подключала в CSS-файле 22 (двадцать две) картинки. При общем весе порядка 12 килобайт, за этими картинками уходило 22 запроса к серверу. И вроде бы — чёрт с ним, справится с такой нагрузкой, чай не Яндекс по пиковой посещамости. Но если можно сделать лучше, зачем себе в этом отказывать?
Новая версия вёрстки использует всего 7 картинок, хотя самой графики на сайте стало использоваться больше. Как я умудрился? Всё просто — множество файлов картинок были сгруппированы в несколько, которые при использовании были спозиционированы нужным образом. Самый яркий пример такого объединения — файл graphics.png. Для удобства просмотра, прозрачность заменена на зелёный цвет.
На вопрос почему же файлов тогда целых семь, а не один?
отвечу так: к этому привела целесообразность и некоторые технические ограничения. Под целесообразностью понимается нежелание городить лишнюю экстра-разметку, ведь я использую пуленепробиваемый метод, при котором картинки не едут при сильном изменении шрифта, поскольку заключены в отдельный контейнер с фиксированными размерами. Технические ограничения были связаны только с одним анимированным GIF-файлом.
Помимо версии для обычных браузеров, в скором времени появится полноценная версия для печати, а также версия сайта для iPhone — и всё это будет решено подключением двух дополнительных файлов: print.css и iphone.css.
Немного блёсток и JavaScript
Предыдущая версия сайта уже использовала JS, но весьма скромно. По этой причине, подключение примерно 30 килобайт фреймворка jQuery было явно не слишком целесообразным. Теперь всё лучше: фреймворк по-прежнему подключается (одним файлом, вместе со скриптами), но теперь он ощутимо помогает делать сайт удобнее и надёжнее, а именно:
- Поле поиска избавилось от лишнего заголовка и теперь о его функциональности говорит написанное прямо в нём недвусмысленное предложение поискать, которое скрывается при фокусе.
- Правила публикации комментариев вежливо спрятаны в разворачивающемся блоке, чтобы не мозолить ваши глаза, а поле ввода плавно увеличивается до более удобных размеров, если вы решите оставить комментарий.
- Картинки теперь открываются не просто как отдельный файл в новом окне, а довольно удобно подгружаются над затемнённым экраном. Попробовать как это работает можно в заметке «Firefox против Photoshop», кликнув на превьюшки. Описанию этого скрипта в скором времени будет посвящёна отдельная публикация.
- Ну, и для хромых — упомянутое выше свойство для автоматического закавычивания фраз внутри элемента
<q>эмулируется при помощи JS. Кхм, речь конечно же об IE.
В общем, в целом
В числе небольших изменений в дизайне — третий цвет. Хорошо это или плохо — судить вам. Мне кажется, что это, по меньшей мере, удобно — ведь зелёный цвет имеет отношение только к вашей активности на этом сайта — к коммментариям. Также изменения коснулись постраничной навигации на главной: теперь она организована при помощи специальных «ушек» слева и справа внизу страницы — они не занимают много места и вполне интуитивно понятны.
Поиск на сайте работает при помощи Яндекса и его слегка подкрашенного поиска по сайтам. Попробуйте — это гораздо удобнее, чем калечный поиск от WordPress. При всём уважении к последнему — теперь поиском действительно можно пользоваться.
Надеюсь, что сайт стал лучше. Поэтому с меня новые публикации, а с вас — впечатления и багрепорты.
- Правила добавления и форматирования
-
Комментарии неинформативные, не относящиеся к теме публикации, а также несущие прямой или скрытый рекламный характер, удаляются без предупреждения. При поддержке Parasite Eliminator.
Разрешённые теги:
<blockquote cite="">,<a href="">,<strong>,<em>,<del>. Примеры кода для лучшего отображения рекомендуется обрамлять тегом[source]…[/source], внутри него конвертация HTML-кода в текст происходит автоматически.
Комментарии: добавить
border-radius вижу, но по-прежнему смущают много-div'ные module-* уголки ;)
Ну и тут:
<div id="content"><div id="content-inner" class="content">Читать дальше и "комментарии" рядом - тоже что-то смущает
А вообще все очень мило, спрайты супер.
ЗЫ В первом предложении не закрыт.
В Опере лайтбокс для картинок не сработал. Бесконечно крутится лоадер.
Нет, я конечно могу сделать всё при помощие border-radius, border-image или mutiple backgrounds, но профессиональная привычка не позволила оставить за бортом IE6–8. А использовать JS для построения раскладки — не мой метод.
У самого такое ощущение, нужно что-то придумать…
А ведь тестрировал, вроде работало, а сейчас ни в какую — 9.26–9.62. Даже в IE5 работает…
я спецмально ничего не делал
http://img-fotki.yandex.ru/get/3106/yuri.6/0_17afd_16b1fd54_XL.jpg
С новым кодом %)
У меня очень небольшое предложение по форме поиска — можно хорошо её улучшить, если пиктограмма поиска будет лейблом только пока ничего не введено, а после пользовательского ввода — становится сабмитом. М? :)
Кстати, сейчас заметил: в форме комментирования пиктограмы в полях «Имя» и двух других перекрывают инпуты. Сейчас быстро в файрбаге положил их внутрь лейбла — поведение стало правильным %)
Смущает текст комментариев вывороткой - белый текст на темном фоне тяжело воспринимается. И постоянное использование аббревиатур - лишнее это,в самом деле.
я думаю css3 можно отдельный файлом замутить (если не жалко дополнительный запрос) и в media использовать queries для проверки поддержки css3
зато основной файл будет валидным
спамеры до тебя ещё не добрались? — вижу поле ввода без капчи)
Юра, спасибо — потерялся апдейт для IE6. Поправил.
Глеб, фильтровать CSS 3 совсем не хочется. Как-то это неправильно и неперспективно ) А спамеры не прибиваются окончательно ни одной из методик. Правда капчу ещё не пробовал ставить, но у меня претензии к плагинам — чтобы не гадили в код, так что нахожусь в поисках.
Речь идёт о тексте? Мне кажется, что аббревиатура должна быть размечена как аббревиатура, если у нас есть такой инструмент как HTML.
kizu, хорошая идея, попробую.
Может стоить размечать аббревиатуру как аббревиатуру только при первом вхождении в текст статьи? Как это происходит со сносками, например. Чтобы избежать пестроты в некоторых случаях.
Открытие картинок при помощи скрипта — это хорошо. Но может переместить крестик закрытия окна в правый угол? Или это mac-style такой?
smmurf, в этом что-то есть.
Михаил, да, расположение крестика — это мак-стайл ;) Ничего не могу поделать. С другой стороны — Esc тоже работает, как и клик по тени.
Треугольник к "Правила добавления и форматирования" в IE7 расположен чуть ниже.
Не знаю, как кому, но в последнее время использование условных комментариев, раздельно для разных версий IE приводит к тому, что присохранении страницы в IE7 на HDD и при просмотре локально, стилей скажем для IE6 не наблюдается.
Тоже происходит и при сохранении в FireFox, стили для IE теряются :)
Как с этим бороться?
Понятно борьба за валидность стилей превыше всего, но как решить проблему?
Продолжим :)
Новая верстка, нюансы есть :)
Тот же треугольник в IE6 отсуствует.
Ну скриншот: http://trifler.ru/blog/i/p/pepelsbey.png
что-то со стилями в IE6 не порядок :)
gordi, честно говоря, создаётся впечатление, что стили для IE6 вообще не подключились. Проверил на самом что ни на есть настоещем IE6 @ Windows 2000 — всё выглядит отлично. Возможно, скрин сделан со стандалон версии, в которой барахлят условные комментарии.
"...Возможно, скрин сделан со стандалон версии..."
Может быть, "зоопарк" брал у вас давно, давно :)
Но на своих сайтах подобного не наблюдаю,
хотя многие из них переведены на единый файл стилей,
но на не которых, есть и условные комментарии,
проблем с подгрузкой не было :)
В любом, случае на вопрос заданный в более раннем комментарии,
об отдельном, раздельном подключении файлов стилей для IE, хочется услышать мнение профи.
Думаю, что зоопарк следовало бы обновить при помощи Multiple IE, хотя лучше оригинальных версий на виртуальных машинах всё равно ничего нет.
По поводу условных комментариев: если у пользователя стоит IE7, то он скачает и увидит всё, что нужно. Если IE6 — аналогично. Пытаться сделать так, чтобы сохранённые версии сайтов смотрелись хорошо — это, на мой взгляд, сложное и совершенно бесполезное занятие.
Да, тут уже подсказали в комментариях - рябит. Это все равно как делать ссылкой любое упоминание, например, Microsoft. Не играйте в Капитана Очевидность только потому что есть тэг abbr.
"Пытаться сделать так, чтобы сохранённые версии сайтов смотрелись хорошо — это, на мой взгляд, сложное и совершенно бесполезное занятие."
Проблема, как раз и решается единым файлом стилей :)
Тут видимо, больше вопрос принципа:
или валидность стилей - для машин :)
или пользователь.
Чтобы разобрать, скажем, вашу страничку по косточкам :)
Сохраняться надо, как минимум в трех браузерах, что весьма не удобно :)
Учиться на подобных образцах, согласитесь, проблематично.
Тем более, что при достаточно сложной верстке, сокрытие индивидуальных стилевых правил для OPERA, FF, Safari тоже проблема, пусть их и не много, и может вообще не быть, но если они есть, то о какой валидности стилей тогда идет речь?
А подгрузка файлов, тоже может стать проблемой по каким-то причинам.
Мне, кажется, все должно быть в одном файле стилей.
Основные проблемы только в IE6, но тут * html рулит.
Треугольник в IE7 поправили, хорошо.
Но использование отрицательного margin-top, привело к разночтениям в IE6 и IE7, возможно, при абсолютном позиционирование этого можно было бы избежать, часто смена акцентов, позволяет избавиться от индивидуальных стилевых правил, под тот или иной браузер.
Проблема с Opera и лайтбоксом решилась — оказалось, что этот чудный браузер не умеет ловить событие onload для картинки, которая не записана в документ, а просто создана как элемент…
А зачем Вы оставляете в CSS пустые блоки правил?
#latest {}Panya, на будущее :D
Ещё, на мой взгляд, стоит добавить пространства между абзацем про комментарии и абзацем про разрешённые теги в «Правилах добавления и форматирования»
Чтобы сохранить структурную целостность CSS'ника. Если уж есть дерево — должна быть корневая нода.
Согласен, были такие мысли, просто не дошли руки.
Честно говоря, я не понял зачем разворачиват форму при клике. Вот если я написал уже много текста др. вопрос. А так только непонятная движуха.
зы. спрайты действительно рулят :)
Цвета ужасны, на мой взгляд.
Кстати, это нормально, что заголовок "Пепелсбей.net" прилипает к белому полю с контентом?
И еще, чем отличаются "заметки" от "статей"?
Цвета могут быть ужасны только для дальтоника. Для нормального человека они могут подходить для какой-то цели или не подходить. Мне кажется, что для моих целей они подходят. У вас есть контраргументы?
Нормально. Он не прилипает, а является его частью. Как ножницами из бумаги, понимаете?
А заметки отличаются от статей тем, что заметки — это заметки, а статьи — статьи. Т.е. первые не претендуют на всехватывающее исследование, а вторые именно для этого и предназначены. По этой причине статей в разы меньше, потому как дело это ответственное.
Разворачивание формы при клике просто делает её компактее до и удобнее после.
А мне понравилась новая кнопка с надписью "Добавить". Старая скорее походила на кнопку play, чем на отправку комментария.
Еще я бы все-таки не стал изменять высоту textarea при клике на ней. Этого никто не ожидает. А вот увеличивать ее высоту по мере набора в ней текста мне кажется менее пугающим) А то кнопка и другие поля, что находятся ниже уезжают за пределы окна.
А что с http://darkentries.ru/ ? Я что-то пропустил?
Про поле для комментов и его динамику подумаю, да. Раз уж столько мнений )
А DarkEntries тихо, по-английски закрылся ибо не покатило. Продолжение будет в жж.
Радостно приветсвую перемены. Они - к лучшему!
Зеленые кнопки отлично вписываются. А вот ссылку на РСС в шапке я бы по умолчанию показывал подсвеченной на красном фоне. Ну так, как она выделяется при наведении. Такая форма более привычна для восприятия.
Простите, но для Opera border-radius не работает...
По поводу «хромых»… я было подумал, что речь о Google Chrome, сейчас хромой в жаргоне — чаще он.
По поводу уголков. Вычитал про способ сделать их из тегов br. Немного мусора, но нет проблем при масштабировании и различных dpi. Вроде бы такой способ используют в Gmail. Т.к. ссылки на описание сходу не нашел — вот пример.
:) Вадим-Вадим... Все браузеры (кроме Safari) сейчас грузят не меньше 2 CSS-файлов с твоего сайта: обычный и print. Это уже тысячу раз везде обсуждалось: надо через @media print {} вставить его содержимое в основной.
По поводу minify -- я полностью согласен, пусть изучают. Но gzip-то как мешает? Ты пробовал открывать gzip CSS-файл через браузер? Они же его в уже распакованном виде в кэше содержат, и открывают через кэш. Т.е. для пользователей ничего (кроме скорости загрузки) не изменится.
sunnybear, print.css вообще сейчас по ошибке подключен был — он фактически пустой, версия для печати пока в разработке. А так — видимо да, буду пробовать включать её при помощи @media и тестировать адекватность восприятия браузерами.
С gzip'ом попробую, спасиб.