Pull to refresh

Коротко об дизайн-макетах, удобных XHTML-верстальщику

Lumber room
Заказчик прислал 14-мегабайтный PSD-файл, содержащий макет всего одной вебстраницы. Открыв его, обнаружил изрядный бардак в структуре: куча из скрытых слоёв, групп, поименованных абы как, каких-то продублированных несколько раз одинаковых слоёв и т.п. С грехом пополам разобрался, что к чему, сверстал. А потом выяснилось, что кое-что было забыто (я просто не смог увидеть это «кое-что»).

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

UPD: Хабралюди, не превращайте, пожалуйста, комментарии в арену для священных войн.

Читать дальше →
Total votes 39: ↑34 and ↓5 +29
Views 1.3K
Comments 89

Стоимость XHTML+CSS-вёрстки там, за бугром

Lumber room
Есть у меня любимый сайт, «Digital-web.com», который хорош ещё и тем, что на его страницах рекламируются интересные мне сетевые «конторы». Среди них есть и объект моего сегодняшнего пристального внимания — «PSD2HTML.com». Фирма занимается тем, что воплощает в XHTML+CSS-коде присланные клиентом макеты. 8 рабочих часов на вёрстку макета, как заявлено.

Мне понравилась раскладка стоимости за вёрстку одного макета. Не могу не рассказать об этом (не сочтите за рекламу).

Читать дальше →
Total votes 13: ↑11 and ↓2 +9
Views 2.9K
Comments 40

Плюшками балуемся

Lumber room
А мы тут плюшками балуемся. «Хабр», раздел «Работа» (главная, резюме, подраздел). XHTML+CSS. Пробуем, переделываем, снова пробуем. Эдакая разминка для мозга, знаете ли.

Заново написан весь код, внешний вид сохранён по мере возможности. Обкатываем повторяющиеся элементы, встречающиеся так же и в других страницах «Хабра» (например, блочок с кармометром, листалка).

Шрифты масштабируемы теперь и в IE тоже, код довольно легковесен, люб валидатору, ну и всё в таком духе.
Total votes 15: ↑15 and ↓0 +15
Views 847
Comments 23

Плюшками балуемся. Часть 2

Lumber room
Продолжаем заниматься любимым делом Карлсона.

Перевёрстаны формы добавления хабра-контента (Новая вакансия, Новый вопрос, Новый подкаст, Новое интервью). Имеющиеся блоки позволяют сверстать ещё парочку форм (например и ту, которую я заполняю в процессе написания этого сообщения).

CSS рулят, друзья мои.

Читать дальше →
Total votes 8: ↑8 and ↓0 +8
Views 676
Comments 31

Ответ на «15 преимуществ» XHTML и 2 вопроса к читателям

Lumber room
Для горячих голов: сразу остыньте. Я за стандарты и верстаю валидно. Но я за стандарты совсем не по той же причине, что и вы. Не нравится — проходите мимо, дальше не читайте. Адекватным людям:
Читать дальше →
Total votes 19: ↑10 and ↓9 +1
Views 1.6K
Comments 135

IE7 и поддержка CSS: комментарии специалистов

Lumber room
Все согласны, что седьмая версия Internet Explorer во многом продвинулась вперед по сравнению с шестой версией браузера, выпущенной пять лет назад. Появилась поддержка RSS, табы, поисковое окошко, изменился интерфейс в стиле новой операционной системы Windows Vista. Однако, веб-разработчиков волнует другое: как обстоят дела с поддержкой веб-стандартов в новом браузере? Об этом недавно рассказывал Крис Вилсон (Chris Wilson), руководитель группы разработки браузера IE. Его слова комментируют независимые эксперты.
Читать дальше →
Rating 0
Views 580
Comments 17

Yahoo вводит синтаксис nocontent для CSS

Search engines *
Похоже, что у создателей поисковой машины Yahoo сейчас трудное время — различать участки с контентом от навигационных зон на веб-страницах становится всё сложнее. Однако, различение может быть полезным в улучшении качества ранжирования, а также отображении в поисковых результатах более релевантных участков. Yahoo ввела специальный CSS-класс под названием robots-nocontent. Его можно использовать в таких элементах, как <div> или <p>, для извещения поисковому роботу Yahoo, что эта часть страницы не имеет отношения к основному контенту. В соответствующем разделе своего справочника, Yahoo советует использовать этот синтаксис в заголовках, в подвалах, навигационных секциях сайта…

Я, конечно, понимаю заинтересованность команды Yahoo во введении подобного элемента — это действительно может улучшить выдачу результатов. Но мне кажется, что большинство веб-мастеров проигнорируют это нововведение, как раньше произошло с гугловским параметром nofollow. Да и наверняка будут веб-мастера, которые проигнорируют новинку из-за боязни снижения позиции своего сайта в выдаче результатов.
Total votes 14: ↑13 and ↓1 +12
Views 876
Comments 43

Семинар «Семантическая вёрстка» 18 мая, Москва

Website development *
18 мая в конференц-зале «Экстрополис» пройдёт семинар под названием «Семантическая вёрстка», который продолжит серию обучающих семинаров под эгидой прошедшей в апреле конференции РИТ-2007. Проведут семинар докладчики секции «Клиентское программирование»:
  • Вадим Макеев (ваш покорный слуга, он же pepelsbey, автор блога http://pepelsbey.net, автор доклада «CSS-менеджмент» на РИТ-2007, участник WSG-Russia)
  • Алексей Рыбаков (он же flack, автор блога http://flack.ru, автор нашумевшего доклада «Тестирование верстки» на РИТ-2007, участник WSG-Russia)
Читать дальше →
Total votes 33: ↑27 and ↓6 +21
Views 1.8K
Comments 33

XHTML. Простота и порядок, доступные каждому.

Website development *
Во времена “младенчества” сети Интернет, ему многое прощалось: отсутствие качественного оформления документа, отсутствие эргономики интерфейсов, некорректность по ряду причин программного кода языков и многое другое. Было это потому, что сам Интернет был неким ноу-хау, если хотите, и распространялся по принципу “как есть”. Это была эпоха Веб 1.0, как его позже назовут. Сегодня же мы с вами являемся современниками Веба, который с легкой руки Тима О’Рейли получил название Веб 2.0, что означает выход на новый качественный уровень, когда в вебразработку приходят профессионалы, которые не рисуют мышкой, заботятся об удобстве использования своего продукта, отвечают за корректность каждой строчки кода и за его безопасность. Работы этих специалистов говорят сами за себя. Это люди, которые понимают и принимают весь груз ответственности за то, каким Веб станет после них.
Далее в статье обсуждаются преимущества XHTML
Total votes 43: ↑30 and ↓13 +17
Views 3.2K
Comments 213

Валидация HTML — миф

Website development *
Пришло время и я открою главную тайну:

Нет ничего страшного если ваш сайт невалиден из-за 2-3х аттрибутов которые придумали вы сами.

Попробуйте придумать вескую причину почему это утверждение в корне неправильно прежде чем
читать дальше
Total votes 77: ↑57 and ↓20 +37
Views 2.8K
Comments 142

CSS Bugs. Ошибки, возникающие при верстке

CSS *

1. Удвоение полей у плавающих (float) блоках в IE 5-6


Проблема: мы очень часто используем поля (margin) и не реже их применяем к блокам со свойством float, ожидая нужный результат, можно сильно удивиться, когда IE вдруг сдвинет наш блок на большее расстояние, чем предполагалось. Конкретно: ошибка левого поля (margin-left) – при свойстве float c параметром left, ошибка правого поля (margin-right) – при свойстве float c параметром right.

#FloatBlock
{
background-color:#ccc;
width:200px;
height:100px;
float:left;
margin-left:50px;
}


Ожидаемый результат (корректный):
Ожидаемый результат

Какой же результат мы видим в IE (некорректный):
Читать дальше →
Total votes 14: ↑9 and ↓5 +4
Views 2.5K
Comments 43

Favicon.ico или иконка в адресной строке браузера

Website development *
Сразу отмечаю, что статья из разряда «для самых маленьких». Просто пощу ее, вдруг пригодится кому-нибудь.

Favicon, что это и для чего он нужен? Favicon.ico это файл ярлыка в ОС Win32 который является иконкой-ссылкой на страничку сайта, на которой он присутствует. Его можно видеть в в избранных ссылках вашего браузера, адресной строке и на закладках в многооконных браузерах. Как его прикруть к страничке? Для того чтобы нарисовать иконку вам необходимо воспользоваться любым графическим редактором, но после вам необходимо конвертировать ваш полученный графический файл в формат .ico либо же изначально рисовать его в специализированных редакторах типа AWIcons Pro, IconWorkshop, MicroAngelo и т.п. Простое переименование расширения файла в .ico плохая идея, т.к. некоторые браузеры не примут такой файл и не отобразят иконку. Если вам всеже привычнее работать в фотошопе, то вот здесь вы можете скачать плагин для работы с изображениями в формате .ico. Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File Formats в корневой директории Photoshop.

Итак, у нас есть иконка, конвертированная правильным способом в формат .ico. Далее по пунктам.
Читать дальше →
Total votes 30: ↑21 and ↓9 +12
Views 24K
Comments 24

Google начинает тестировать AdSense для мобильных сайтов

Lumber room
Некоторые партнёры программы Google Adsense начали получать приглашения поучаствовать в бета-тестировании нового сервиса — программы Adsense for mobile. В приглашениях сообщается, что компания Google уже «успешно закончила внутренне тестирование системы» и сейчас готова предложить её публике.

Данная программа предназначена для размещения контекстной текстовой рекламы на мобильных версиях веб-сайтов. Принципиальной особенностью мобильной рекламы, как несложно догадаться, станет масштабное применение модели оплаты за каждый звонок. Собственно, здесь ссылки могут иметь вид “Call: Phone Number”, что вполне логично. Вместо перехода на сайт рекламодателя предлагается сразу ему позвонить. Максимальное количество рекламных модулей на странице — одно.
Технические требования программы Google Adsense for mobile
Total votes 13: ↑11 and ↓2 +9
Views 545
Comments 4

Переводы некоторых официальных документов W3C и DCMI

IT Standards *
Total votes 30: ↑27 and ↓3 +24
Views 811
Comments 19

Proof-of-concept: блог на статическом XHTML

Lumber room
haque.nfshost.com/blog

(поддерживается только firefox 1.5+)

Практически все делается на клиенте — на сервере только серверная логика. Какое-либо генерирование xhtml на сервере отсутствует.

Клиентский софт представляет из себя единственную xhtml-страницу, генерирует она сама себя с помощью xslt. На сервере — dsl для серверной логики (интерпретатор написан на хаскеле), называется haque.

Поддерживаются пользователи, администрирование, модерирование комментариев, markdown.

Строк кода: xhtml — 262, скрипт на самописном dsl (haque) — 76.

Основной вопрос — имеется ли в таком бреде смысл?
Total votes 11: ↑8 and ↓3 +5
Views 602
Comments 16

XOWML, который преобразуется в XHTML

Lumber room
XOWML, — новый язык разметки, разработанный в студии Onlyweb. Читается, — хоумл.

Язык имеет единственное предназначение, — дать XHTML верстальщику возможность быстро и эффективно писать валидный XHTML код. Т.е. работает это так: пишешь код в XOWML, нажимаешь сохранить, автоматически появляется .html файл, его можно просматривать в браузере.

Вот первые примеры XOWML:
.BriefDescription{{
.Image{%img src="images/elephant.jpg" width="240" height="181"{}}
.Description{
.Date{10 августа}
%p{В этой плашке пишем краткую аннотацию, о статье.
Это позволит поситителям сайта понимать о чём идёт речь.}
%p{Надо сразу определится и размерами фотографии.
Необходимо жёстко зафиксировать ширину (я предлогаю использовать ту что сейчас)
а высота фото может меняться без ущерба для внешнего вида страницы.
А без фото на внутренних будет плохо — изначально дизайн соориентирован
на получ. инф. и быстрый прогруз.}
%a href="#"{читать полностью...}
}
.Clear{}
}}


Преобразуется в XHTML код:
<div class="BriefDescription"><div class="BriefDescriptionInside0">
<div class="Image"><img src="images/elephant.jpg" width="240" height="181" /></div>
<div class="Description">
<div class="Date">10 августа</div>
<p>В этой плашке пишем краткую аннотацию, о статье.
Это позволит поситителям сайта понимать о чём идёт речь.</p>
<p>Надо сразу определится и размерами фотографии.
Необходимо жёстко зафиксировать ширину (я предлогаю использовать ту что сейчас)
а высота фото может меняться без ущерба для внешнего вида страницы.
А без фото на внутренних будет плохо —
изначально дизайн соориентирован на получ. инф. и быстрый прогруз.</p>
<a href="#">читать полностью...</a>
</div><!-- .Description -->
<div class="Clear"></div>
</div></div>


Читать дальше →
Total votes 7: ↑4 and ↓3 +1
Views 1.1K
Comments 28

Пару мыслей о версткe…

Lumber room
Немного мысленно порассуждал о расположении различных блоков страницы (меню, контент, строка поиска, пр.)…

Известно, что поисковики индексируют только часть страницы. Соответственно нужно стараться, чтоб важная и полезная информация была как можно ближе к началу страницы.
Читать дальше →
Total votes 11: ↑7 and ↓4 +3
Views 417
Comments 15

Уроки верстки

Lumber room
Опыт. Какое же всетаки это бесценное сокровище, его нельзя купить, одолжить, его можно только получить самостоятельно. Учиться, учиться и учиться, как говорил небезызвестный дедушка всех октябрят. Однако опыт приходит быстрее и усваивается лучше, если человек наряду с получением академических знаний, практикуется, практикуется и практикуется.

В свое время мне очень помогли блоги вебразработчиков и форумы, на которых они делились своими практическими знаниями по интересующей меня теме верстки гипертекстовых документов. Это очень помогло мне в быстром освоении правильного подхода к верстке. До моего озарения я 5 лет придерживался старой «табличной» школы верстки, слыхом не слыхивал о принципах вебстандартов, поэтому мне было крайне тяжело переучиваться, когда я столкнулся с необходимостью кардинального роста качества моей работы.
Читать дальше →
Total votes 17: ↑15 and ↓2 +13
Views 1.8K
Comments 15

О чем не стоит забывать, когда верстаешь HTML

Website development *
Когда верстаешь (X)HTML, порой не знаешь или забываешь о многих фичах, которые стоит использовать. Перечислю те, о которых вечно забываю сам, а зря :)
Читать дальше →
Total votes 107: ↑83 and ↓24 +59
Views 2K
Comments 203

12 причин ненавидеть XHTML

Lumber room
Хотелось бы опубликовать в веб-разработке, да кармы не хватило, опубликую пока здесь.
По мотивам недавнего обзора HTML5 захотелось рассмотреть основные причины, по которым использование XHTML можно считать нецелесообразным. Указанные причины были собраны из различных источников и добавлены на основании собственного опыта.

Итак, основные причины, почему не стоит использовать XHTML:

1. С точки зрения SEO — в обычном HTML приходится приходится писать меньше кода, а, значит, HTML более оптимизирован под поисковики, нежели XHTML;
Читать дальше →
Total votes 43: ↑6 and ↓37 -31
Views 772
Comments 42