Rambler's Top100
Максим Покровский

— Привет, меня зовут Максим Покровский. Вы находитесь в моем рабочем кабинете. Поскольку я фрилансер, будем считать, что именно так он и выглядит. Здесь я пишу много интересных вещей, и если вы почувствовали, что я именно тот человек, который вам нужен, то я всегда открыт для контакта.



Сейчас работаю над:


  • Техническая поддержка popsop.ru( url )

    Текущий статус - изменнение функционала шаблона.

  • Разработка интерфейса для Korv ( url, design )

    Текущий статус - мелкие доработки графического интерфейса.

 Заказать мне работу

Рубрики / Теги

Последние записи

27.12

Семантика или как же лучше
Комментарии (26) HTML

Допустим мы имеем такую картинку

Распишем идеальную семантическую раскладку:

<div id="search-form">
   <div id="cabinet">Вы зашли как <a href="#">admin</a></div>
   <form action="#">
      <input class="form-text" value="введите строку для поиска" onblur="if (value == '') {value = 'введите строку для поиска'}" onfocus="if (value == 'введите строку для поиска') {value =''}" type="text" />
      <input class="form-submit" value="найти" type="submit" />
   </form>
</div>

В данном чтобы панелька имела именно такой вид, мы подготовим три изображения. Левое закругление, правое и сам background. Левое мы назначим на #cabinet, правое на form, а bаckground на #search-form. И стилями раставляем все по своим местам. (Я не стал все расписывать в css, кляня свою лень и надеясь на то, что и так все понятно)

Получилось:
Семантично - да;
Компактно - да;
Чисто - да;
Удобно - фиг!;

Под удобно я разумею последующие возможные редизайны или внесения правок в структуру. Вздумай заказчику со своими познаниями на уровне тега font внести туда какие-нибудь структурные изменения (например, захочет передвинуть блок cabinet в противоположный угол), он там сразу и себе нервы потрепет и верстку в итоге сломает.

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

Удобная разметка выглядит так:

<div id="search-bg"><div id="search-lz"><div id="search-rz">
   <div id="cabinet">Вы зашли как <a href="#">admin</a></div>
   <form action="#">
      <input class="form-text" value="введите строку для поиска" onblur="if (value == '') {value = 'введите строку для поиска'}" onfocus="if (value == 'введите строку для поиска') {value =''}" type="text" />
      <input class="form-submit" value="найти" type="submit" />
   </form>
</div></div></div>

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

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

Метки:, ,

Комментарии

  1. 1
    pepelsbey (27.12.2007) #

    …а если панелек на сайте две и больше, то универсальность вашего примера несколько хромает. Сюда бы скорее классы, чем ID…

  2. 2
    FX Poster (28.12.2007) #

    pepelsbey
    Ну согласись, поменять все id на class, а # на . труда не составляет.

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

  3. 3
    le`Mur (28.12.2007) #

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

    FX Poster, я довольно долго проработал в одной студии, где организация работы была настолько ужасной, что правки могли быть и похлеще приведенного примера. В итоге куча потраченных времени и нервов, но зато какая городость, за “ко всему готовый макет” :)

  4. 4
    Artem.Chertov (28.12.2007) #

    Все потенциальные изменения не предусмотришь. Добавление элементов только нагружает код. Таким макаром можно захламить его до безобразия.

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

  5. 5
    le`Mur (28.12.2007) #

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

    Вы наверное хотели донести какую-то важную мысль… но я ее не понял.

  6. 6
    Artem.Chertov (28.12.2007) #

    Важные мысли несет консорциум в своих рекомендациях)

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

  7. 7
    Михаил Валенцев (29.12.2007) #

    Как-то “угловато”. Я бы сделал две картинки с правым и левым закруглением и некоторой ширины (допустим, в 800px - png формат для такого решения трафик пользователя не съест)
    Ну и наложил бы их внахлест - внешнему div’у и самой форме.

    (левый угол)

    (правый угол)
    …

    css писать лень.

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

    onblur/onfocus в тексте - некрасиво. Стоит вынести в внешний js. Мне больше нравится реализация через .

  8. 8
    Михаил Валенцев (29.12.2007) #

    Обрезалось - извините, я не блогер :)

    (левый угол)
    (правый угол) ...
  9. 9
    le`Mur (29.12.2007) #

    Artem.Chertov, Михаил Валенцев, суть поста вобщем то в том, что есть ситуации когда надо верстать семантично, а когду удобно. И в подавляющем большинстве “удобная верстка” нужна когда работа жутко неорганизована, и постоянно приходится переверстовать по желаниям заказчика.

    Artem.Chertov, по поводу “элементы привлечения внимания” я отписался у вас на блоге. (может в спам ушло)

    и всякие ноды и атрибуты в форме.

    Это вы о чем конкретно?

    Михаил Валенцев, я занаю про sliding doors. Обычно я применяю эту технику на коротких небольших отрезках верстки (иеню, блоки с закруглением). И в таких ситуациях стараюсь полностью отделить контентную часть, от графической. Что, например, если владелец сайта захочет убрать из этой панельки форму и поместить, скажем, бегущую строку?

  10. 10
    Artem.Chertov (29.12.2007) #

    @le`Mur: fieldset, legend, tabindex, label, title, accesskey etc.

    > отписался у вас на блоге. (может в спам ушло)
    Неа, не в спаме нет, странно. Под чем авторизировались, кстати? Попробуйте еще разок :)

  11. 11
    le`Mur (29.12.2007) #

    fieldset, legend, tabindex, label, title, accesskey etc - это все можно, но в данном случае не нужно.

    Под чем авторизировались, кстати?

    Гостем заходил

  12. 12
    Artem.Chertov (29.12.2007) #

    @le`Mur
    > но в данном случае не нужно
    В заглавии статьи фигурирует слово “семантика”, а в листингах ей и не пахнет. Я понимаю, что суть не в этом, но своим кодом вы подаете плохой пример начинающим.

  13. 13
    le`Mur (29.12.2007) #

    Напротив.

    FIELDSET и LEGEND

    Элемент FIELDSET определяет группу управляющих элементов формы. Объединяя взаимосвязанные управляющие элементы в группы, авторы могут разбить форму на несколько частей, облегчая пользователю ее заполнение.

    Где вы видете группу форм?

    Элемент LEGEND задает титул группы элементов.

    Нет группы, нет и заголовка к группе.

    Элемент LABEL создает текстовую метку

    Зачем мне текстовая метка, когда суть input передана в атрибуте value?

    И так далее… Если бы я обозначил названия групп через div, или даже через h2, то это было бы нарушении семантики. Применение элементов тогда когда они нужны, называется не семантикой, а здравым смыслом. Семантика же нечто другое.

  14. 14
    Artem.Chertov (29.12.2007) #

    Гы) Весело…
    Я писал уже: семантика - это неотъемлемая часть доступности. Копайте не html-спецификации, а работы ATF, WAI etc. Возьмите разные читалки сайтов для слепых, глухих. Посмотрите, как они имплементируют ваш код.

    Спасибо за дискуссию :)

  15. 15
    le`Mur (29.12.2007) #

    Значит вы затеяли диспут по другой теме. Пожайлуста.

  16. 16
    Nikita (02.01.2008) #

    Вздумай заказчику со своими познаниями на уровне тега font внести туда какие-нибудь структурные изменения (например, захочет передвинуть блок cabinet в противоположный угол), он там сразу и себе нервы потрепет и верстку в итоге сломает.

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

    Такого быть не должно. Пишется договор, и акт сдачи-приема. Запрещаются посягательства на изменение структуры. Без договора — устное обсуждение макета, утверждение графического оформления с последующей версткой. Все изменения оговариваются отдельно с отдельной оплатой.

    le`Mur, Artem.Chertov говорит о таких вещах как, например, микроформаты. Каждый элемент должен быть назван по его сути. Для это предназначены определенные атрибуты, как то id, class, legend и др.

  17. 17
    Nikita (02.01.2008) #

    Я бы сделал такой код:

    <div id="footer">
       <div class="login_info">Вы зашли как <a href="#">admin</a></div>
       <form action="#" name="seach_form" class="search_form">
          <input type="text" name="search_term" class="search_term" value="введите строку для поиска" />
          <input type="submit" name="search_submit" class="search_submit" value="найти" />
       </form>
    </div>
  18. 18
    le`Mur (03.01.2008) #

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

    Это я про ситуацию в студии, когда делает один (верстальщик), а согласует другой (менеджер)

  19. 19
    LitoX (06.01.2008) #

    Бум знать…

  20. 20
    Bolton (16.01.2008) #

    спасибище за подробное описание!
    у меня вроде все получилось…будут вопросы - спрошу…

  21. 21
    tapazukk (17.01.2008) #

    Простите, но что вы понимаете под словом семантика? В xml’ном контексте? Почему бы не заключть в параграф

    Вы зашли как admin

    .

  22. 22
    bonusov (17.01.2008) #

    возьмём на заметочку, спасибо!

  23. 23
    CCatch (18.01.2008) #

    углы бы еще научится менять….

  24. 24
    le`Mur (18.01.2008) #

    tapazukk, потому что это не параграф.
    bonusov, пожайлуста
    CCatch, в смысле?

  25. 25
    tapazukk (18.01.2008) #

    Хорошо, это не параграф, тогда почему это блок, объясните, plz. Скажите, как вы трактуете слово семантика в (x)html-разметке?

  26. 26
    le`Mur (19.01.2008) #

    Если не бросаться терминами, то семантика - это когда все выполняет свою роль. Для заголовка есть теги h1-h6, для параграфов

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

Оставить комментарий

Вы можете использовать простые теги форматирования HTML (вроде <a>, <ul> and others). Чтобы вставить пример код, используйте
<code lang="php">$a = "hello";</code> (поддерживаемые языки: ruby, php, yaml, html, css, csharp, javascript). Также Вы можете использовать <code>$a = "hello";</code>, синтаксис не будет подсвечен. Если вы не хотите использовать тег <code>, замените символ < на &lt;


!

Самое обсуждаемое

Они читают меня, я читаю их

— Как предоплата мобилизует отоношения - так и и гибкость в отношениях позволяет зарабатывать больше
комментарий заказчика к статье http://pokrovskii.com/predoplata-i-druzya