Чёртова дюжина советов начинающим верстальщикам. Часть вторая

    Доброго времени суток!

    О том, что вы читаете


    Вот оно и свершилось — перед вами продолжение советов начинающим верстальщикам. Если вы не читали первую часть, то можете сделать это прямо сейчас.
    В данной части вы ознакомитесь ещё с 11 советами (именно столько в моей второй заметке их находится).
    Сперва мы пройдём нововведения в визуализации, а затем пофилосовствуем на тему семантики.

    Ещё немного лирики


    После выхода первой части я получил огромное количество feedback'a. Если честно, я не ожидал такого желания изучить что-то новое. Да-да, быдлокодеры там тоже есть. Но сейчас не об этом…
    Также, как вы можете заметить, что количество человек, добавивших мой топик в избранное достигло миллиона, достаточно велико, что не может не свидетельствовать об огромном интересе к HTML5. Итак, поехали.


    Поддержка Audio


    Ранее мы прибегали к использованию каких-либо велосипедов, чтобы проигрывать музыку на своей страничке. Теперь же мы можем избежать этого и использовать нативный способ — проигрывать музыку в HTML5 плеере. Делается это следующим способом:

       <audio autoplay="autoplay" controls="controls">  
            <source src="moment of peace.mp3" />  
            <p>Для проигрывания музыки вам необходимо обновить ваш браузер. Также вы можете <a href="file.mp3">скачать</a> аудиофайл.</p>
        </audio>  
    




    Поддержка Video


    Аналогичная ситуация обстоит и с проигрыванием видео на вашей страничке. Код будет выглядеть аналогично предыдущего, но с единственной правкой. Я надеюсь, вы догадались. Конечно же, тег video вместо audio.

    <video controls preload>  
        <source src="moment of peace.mov" /> 
        <p>Для проигрывания видео вам необходимо обновить ваш браузер. Также вы можете <a href="moment of peace.mov">скачать</a> видеофайл.</p>
    </video> 
    




    Предзагрузка Video


    Теперь нам не нужно беспокоиться о том, быстр ли интернет у пользователя или нет. Например, видео на Youtube можно смотреть только тогда, когда оно уже загружено (фрагмент покрайней мере), но с мобильной версии получается смотреть видео лишь в режиме реального времени.
    Что же касается разработчика, то он может выбирать одну из двух зол — либо видео загружается заранее, а потом уже пользователь приступает к просмотру; либо же пользователь будет смотреть видео в real-time режиме. Если мы хотим первого, то нам необходимо добавить атрибут preload к элементу video:

    <video preload>
    Да обновите же вы браузер в конце концов!
    </video>
    


    Если же мы хотим пользователю позволить смотреть видео по мере его загрузки, то нам необходимо убрать этот атрибут. Всё просто!

    Отображение контролов


    Бывает ситуация складывается таким образом, что нам не нужно показывать наш плеер пользователю. Более того, нам необходимо играть музыку в фоне (чем злоупотреблять не следует). Мы же беспокоимся о наших пользователях, ведь так?

    Добавить контролы мы можем следующим образом:

    <video controls>
    Тынц! Обновите ваш браузер, а?
    </video>
    




    А убрать контролы, как вы уже догадались, мы можём путём удаления атрибута controls.

    <video>
    Нас не видно и не слышно.
    </video>
    


    Где все? Нет никого!



    Регулярные выражения


    Да, да. Вы не ослышались. Именно регулярные выражения или же регулярки. Приведём простой пример их использования. Представьте, что нам необходимо ограничить набор вводимых символов в текстовое поля следующими критериями:
    1. Количество символов не должно быть меньше 6 и превышать 16. И...
    2. Можно вводить лишь заглавные и строчные латинские буквы.

    Ок, нет проблем. Рассмотрим следующий фрагмент кода:

        <form action="register.rb" method="post">  
            <label for="username">Введите имя пользователя: </label>  
            <input type="text"  
               name="username"   
               placeholder="Введите имя пользователя..."  
               pattern="[A-Za-z]{6,16}"
               required>  
            <button type="submit">Регистрация</button>  
        </form>  
    

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

    Переопределение элемента Small


    Теперь давайте отвлечёмся немного от визуализации и поговорим о семантике.

    Недавно я использовал элемент small для того, чтобы обозначить подзаголовок статьи в блоге. Это очень хороший и полезный элемент, однако, данное его использование неверно.
    Значение элемента было переопределено (разумеется, на уровне семантики) и теперь я должен его использовать, как, например, для указания копирайта в подвале своей странички.

    Header и Footer


    Раньше для вёрстки шапки и подвала нашего сайта мы использовали div'ную вёрстку. Например, так:

    <div id="header">
         <p>Шапка-ушанка.</p>
    </div>
    <div id="footer">
         <small>Ушанист production (c)</small>
    </div>
    


    Теперь же данная вёрстка будет считаться некорректной (на моральном уровне, конечно же). Да и на семантическом. Теперь будет верна следующая вёрстка:

    <header>
         <p>Шапка-ушанка.</p>
    </header>
    <footer>
         <small>Ушанист production (c)</small>
    </footer>
    


    Элемент Mark


    Теперь для того, чтобы обернуть какую-либо заметку, которая должна быть выделена должным образом, мы можем не использовать застилизованный div. Для этого существует новобранец mark. Давайте посмотрим на него.

    <mark>Хе-хе! НЛО было здесь. И ему здесь понравилось.</mark>
    




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

    mark {
    	border-radius: 15px;
    	background: silver;
    	color: white;
    	font-family: Tahoma;
    	padding: 5px;
    }
    


    И теперь он будет выглядеть так:

    \

    Уже лучше. Поехали дальше…

    Где использовать div, а где нет


    Опять же, можно привести пример с шапкой и пол=двалом сайта, чтобы понять, где прекратить использовать div'ы. Ваш код постепенно должен стремиться к следующему:

    <header>
         <p>Шапка-ушанка.</p>
    </header>
    <footer>
         <small>Ушанист production (c)</small>
    </footer>
    


    Вместо чисто div'ной вёрстки. Как эта, например:

    <div id="header">
         <p>Шапка-ушанка.</p>
    </div>
    <div id="footer">
         <small>Ушанист production (c)</small>
    </div>
    


    Также не следует забывать про элементы hgroup, article и section. Теперь лучше использовать их напрямую, нежели их div'ные аналоги. Нет, не от слова «диво».

    Собственные атрибуты


    Теперь мы можем использовать собственные атрибуты для собственных нужд.
    Представьте, что нам необходимо оставить где-то в недрах страницы имя разработчика (скажем, веб-приложения) и надоедать им (путём alert'ования), если тот не купил полную версию.

    Оставляем имя разработчика в атрибуте:

    <p id="yep" data-name="krovatti">Вам необходимо купить полную версию игры</p>
    

    И раз уж у нас alert, то и воспользуемся мы, соответственно, JavaScript'ом.

    var tag = document.getElementById("yep");
    var attr = tag.getAttribute("data-name");
    alert(attr + " would have you later!");
    


    И напоследок… Величайшая вещь…

    Local Storage aka Локальное хранилище


    Считайте, что это подобие БД. Несомненным преимуществом является то, что она хранится на стороне клиента, а не сервера. Из чего следует простой вывод — если мы будем играть, например, в HTML5-игру, то нам не нужно запрашивать какие-либо переменные с сервера и тем самым тратить свой трафик. С помощью Local Storage мы можем хранить пары ключ/значение (так корректнее звучит) на стороне клиента.
    Что касается поддержки хранилища браузерами, то тут дела обстоят следующим образом:



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

    function isSupported() {
       try {
          return 'localStorage' in window && window['localStorage'] !== null;
       } catch (exc) {
             return false;
       }
    }
    


    Почему-то с Google Chrome 12 я в этом даже не сомневался.

    Поехали дальше… Теперь перейдём непосредственно к использованию. Нет ничего проще!

    function goGoGo() {
         var attr = "kill me"; // наша переменная
         localStorage.setItem("one", attr); // сохраним её в хранилище
         var some = localStorage["one']; // и снова её выну и положу в другую переменную
         localStorage.removeItem("one"); // всё итак понятно. поигрались и хватит
    }
    


    Вот и всё. Простая вещь, но такая полезная…

    Заключение


    Сегодня мы познакомились с вами ещё с 11 нововведениями в HTML5. Полезными и не очень. Тем не менее, несомненно, что все они имеют право находиться в черновике новоиспечённого стандарта в web-индустрии — HTML5.

    Что почитать


    28 HTML5 Features, Tips, and Techniques you Must Know.
    Погружение в HTML5.
    Web Storage: easier, more powerful client-side data storage.
    Метки:
    Поделиться публикацией
    Похожие публикации
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 51
    • +1
      Благодарю, некоторые советы были действительно интересные, но про header и footer уже несколько раз обговаривалось…
      • +41
        Заранее извиняюсь, но как-то все обыденно, помоему такие статье уже настолько наводнили интернет, что не увидеть их невозможно. К сожалению у меня сложиласьвпечатление что статься писалась для галочки путем «я погуглил 10 минут, нашел непонятный текст — запостил».
        Да хотя бы вот godcow.org/2008/01/19/obzor-novovvedenij-vhtml-5/ статья описывает тоже что и вы только более грамотно и потнятней для новчика. А тут огрызки из предложений и кода (

        Надеюсь на адекватное восприятие моей критики.
        • 0
          А есть ли возможность через тег audio — воспроизводить не файл, а интернет-радио поток? Я пробовал — не работает.
          • 0
            dev.w3.org/html5/spec/Overview.html#the-audio-element
            судя по спецификации w3c это можно «An audio element represents a sound or audio stream.». Работоспособность же будет зависит от реализации данного элемента в браузере и соотвественно от формата потока который вы указываете.
            • 0
              Можно но есть нюансы. Например радиосерверы Icecast2/Shoutcast отдают поток только если в запросе есть хэдер Icy-MetaData иначе он выдаст просто страницу со статистикой)
              можно через nginx проксить Icecast и подставлять: proxy_set_header Icy-MetaData 1;
              в некоторых браузерах(webkit) и так работает.
              • 0
                иначе он выдаст просто страницу со статистикой

                Странно, не сталкивался с таким заголовком. Потоки с указанной mount point отдаются без дополнительных трюков.
            • +1
              Отличный пост, он гораздо лучше смотрелся если бы не эти белые поля i.imgur.com/6RbxN.png
              • –11
                На ближайшие несколько лет HTML5 наше все, поэтому интерес вполне оправдан :) Такого рода качественные статьи сейчас ценны.
                • 0
                  Для localstorage есть отличный плагин который позволяет использовать хранилище в том числе в браузерах которые его нативно не поддерживают github.com/marcuswestin/store.js
                • –1
                  Наверное, не «начинающим верстальщика», а «тем, кто хочет, чтобы их сайт был виден только гикам». Ничего личного, чес-слово, но не у всех стоит что-то «из последнего»!

                  Я понимаю, что иногда хочется сделать сайт ух-какой-красивый! Делают — то на flash-е, то на чем-то более семантическом и индексируемом, вроде html5+… Но, я считаю, нельзя при этом забывать, что есть посетители, которые просто не смогут этого увидеть. И для них надо тогда либо делать верстку и с <video>, и с flash-плеером, либо, создать версию сайта без наворотов, но где можно хотя бы контент увидеть. А сообщения вида «Да обновите же вы браузер в конце концов!» иначе как хамством не отдают. Я бы такой сайт закрыл )

                  Для примера — сидишь на «голой» машине со свежепоставленной системой, и надо скачать драйвер для чего-то экзотического, напр. Идешь на страницу с драйвером — опс!, а там вся из себя такая флешка, в которой, как ни странно, важна только одна кнопка — «скачать». И вместо драйвера качаем флеш, потом обновляем браузер, потом ставим сервис-пак (к примеру)… И так хочется такого горе-дизайнера спросить — «чем я тебя обидел, за что ты так?»

                  Вывод — думаем о людях, а не только о правилах и о том, как оно должно быть в идеальном мире.
                  • 0
                    немного промахнулся чуть ниже ответ вам habrahabr.ru/blogs/html5/137049/#comment_4562928
                    • НЛО прилетело и опубликовало эту надпись здесь
                      • –1
                        Ну вот и минусы пошли.

                        Я-то лишь о том, что, получив теги video и прочие в свои руки, надо не забывать о тех, кто, в силу каких-то причин, их не может использовать. И, если уж контент так важен, думать о workaround-ах. А если не важен, то и без обходных вариантов отлично живем. Только хамить между тегами video «срочно побежал обновляться» при этом не надо.

                        Но это вопрос вкуса, как ни крути, автора сайта.
                        • НЛО прилетело и опубликовало эту надпись здесь
                          • 0
                            Ну, насчет «исключительно» — это не совсем так, но, надо же и мозг авторам кода включать в процессе написания:

                            — если такая возможность человек, человек уже обновил сайт
                            — если возможности нет, либо человек обновлений боится — не побежит он ради сайта что-то со своей системой делать. «Не говорите мне, что делать, и я не скажу вам...» ))

                            Я очень рад, что вместо полстраницы кода вызова плеера можно использовать один тег. Но я привык думать и о тех, у кого этот тег не сработает. И мне в чем-то стыдно перед такими людьми, что у меня, такого умного, не нашлось способа им показать rich-контент на странице.

                            Мне нравится фраза: «Обычный летчик поднимает в воздух то, что летать может. Хороший летчик — даже то, что летать, в общем-то, не способно». Давайте стараться быть такими вот «хорошими летчиками»! Я не призываю делать сайты, выглядящие одинаково даже в IE6, но содержание, даже с небольшой потерей красоты, сайт должен доносить не только до узкой группки технически продвинутых посетителей.
                            • +1
                              Точно сказано! Но на дворе время фастфуда… (к сожалению).
                              • НЛО прилетело и опубликовало эту надпись здесь
                                • 0
                                  Отлично. Я, собственно, со всем согласен, и под этим вполне подпишусь.

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

                                  Делать ли в качестве альтернативного содержания тега video вывод флеш-плеера, или вывести прямую ссылку — дело десятое, главное, включать голову, и думать о посетителях с уважением, разрешая им иметь свое мнение по поводу того, обновлять ли им браузер.
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                    • НЛО прилетело и опубликовало эту надпись здесь
                          • +2
                            Всем не угодишь. Пусть несколько процентов посетителей просто закроют сайт. Зато разработчик не вынужден будет заботиться о совместимости со старыми браузерами. А значит заказчик получит сайт быстрее и дешевле. А это значит, что он успеет набрать больше новых клиентов, чем потерял бы пользователей IE6.
                            • 0
                              Не все же меряется клиентами. Есть сайты и некоммерческие. IE6, конечно, зло, но скоро и дефолтный IE из поставки Win7 (а она, попомните мое слово, не скоро уйдет со сцены!) покажется кому-то недостаточно продвинутым…

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

                              Давайте лучше так скажем — пусть даже несколько процентов людей лучше не все на сайте увидят, чем закроют его. Сможет верстальщик этого достичь — ему самому и будет повод для гордости. Людей надо уважать, они это все равно почувствуют.
                            • 0
                              Сообщение, я думаю, просто шутка. Но вот поддержка устаревших клиентов не мотивирует их пользователей на их обновление, а значит снова и снова доставляет головную боль верстальщикам, а значит и заказчикам. В конце-концов подавляющее большинство сайтов создаётся, по-моему, исходя из предположений ожидаемой отдачи и вложенных ресурсов. Далеко не всегда увеличение стоимости разработки в, например, два раза окупится ростом аудитории на один процент.
                              • 0
                                Не вижу мотивации обновления в том, что что-то новое (грубо — один сайт из сотни миллионов, или сколько их там сейчас?) не работает в чьем-то браузере: купить новый комп не всех хотят/могут, а пойти на другой сайт, более терпимый к, извините, не самым bleeding-edge клиентам — это куда проще. А новые браузеры просто не у всех пользователей старой техники идут, да и может найтись масса других причин у людей не обновляться.

                                Вы думаете, если бы на Youtube видео шло бы только через html5, все бы срочно обновились? Нет, просто появились бы конкуренты и сайты-посредники, которые предложили бы видео с возможностью просмотра и в старых браузерах.
                                • +2
                                  Для того, чтобы обновить браузер новый комп не нужен. На машинке десятилетней давности последний файерфокс или хром вполне работают.

                                  Я не спорю, что если поддержка старых браузеров заключается в паре строчек кода, то их можно и нужно написать (собственно и пишу что-то вроде
                                  <!--[if IE]>
                                  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
                                  <![endif]-->
                                  ). Но если фактически нужно верстать две, а то и три версии сайтов, осваивать новые технологии (новые для себя, на самом деле близкие к вымиранию типа ActiveX, приобретать средства разработки и тестирования под них, причём неизвестно где), то тут встаёт вопрос о целесообразности. Сделать новую фичу для подавляющего большинства посетителей или тратить время на малую часть аудитории, оставляя остальную «в одиночестве».

                                  А можно позаботиться о людях с ограниченными возможностями, сделав сайт соответствующий ГОСТ Р 52872-2007 и WCAG 2.0. Времени даже меньше займёт, а пользы, имхо, больше принесёт обществу.
                                  • 0
                                    Вы знаете, жизнь уже давно меня приучила, что люди — в массе своей — не делают так, как «положено» и «валидно». Они смотрят на то, как им проще, либо как им престижнее, либо — «как все», потому что спрашивают у тех самых «всех», как обычно оно делается. Предельный пример — директор фирмы, который админу говорит, что «да, я знаю, что мой ноут завирусован, но работать на нем надо, вот ты и придумай, как сделать, чтобы мои вирусы никому не навредили. А переставишь систему потом, как у меня время будет» — их обоих можно понять!

                                    Браузеры, в этом смысле, проще не обновлять — их и не обновляют. И если старенькая машинка у кого-то потянет вместо Windows 98 и Opera 5 что-то вроде Win XP + последний FF, не факт, что юзеру стоит тратить время на переустановку и нервы на тормоза XP на таком не новом железе.

                                    Ладно Россия, но западный мир даже дома часто принимает решения об апгрейде только по веским причинам, поскольку привыкли считать затраты, и к затратах относит в т.ч. и стоимость нового ПО, поэтому покупка компа для них — это не как у нас, $500-800 за новые «системник с монитором», а куда больше, т.к. на новый комп купится новая OEM ОСь, да и софт захочется обновить. Так что стоят у них 98-е и даже 95-е, и народ работает и работает.

                                    Согласен с Вами, что писать video… /video, а между ними полстраницы кода вывода флеш-плеера — это уж чересчур. Проще подключить скриптик, который на старых браузерах заменит video на старинный плеер ) Но и делать «фичу ради фичи» — тоже не правильно.

                                    С другой стороны, если у Вас есть система управления сайтом, кто мешает настрогать 2 шаблона, «красивый и фичастый», и «просто для чтения». Для иных сайтов (напр., приводимый мною в пример сайт с драйверами) это будет хорошим выходом. Для развлекательных, конечно логично будет просто video скриптом, когда надо, менять на плеер.
                                    • 0
                                      >Браузеры, в этом смысле, проще не обновлять — их и не обновляют.

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

                                      >С другой стороны, если у Вас есть система управления сайтом, кто мешает настрогать 2 шаблона, «красивый и фичастый», и «просто для чтения».

                                      Для этого нужно, минимум, вводить механизм настройки режима и использование нужного шаблона. Не говоря о том, что его нарисовать юзабельно.
                                  • +1
                                    >Не вижу мотивации обновления в том, что что-то новое (грубо — один сайт из сотни миллионов, или сколько их там сейчас?) не работает в чьем-то браузере

                                    И не увидите, покуда все будут делать по вашим призывам. Если же таких сайтов станет не один на сотни миллионов, а наоборот, то вот она мотивация и возникнет.

                                    >Для примера — сидишь на «голой» машине со свежепоставленной системой

                                    Э-э-э? Это с какой? Пиратской вендой, что ли? Где сейчас можно легально взять свежепоставленную систему позапрошлого поколения одиннадцатилетней давности? Впрочем, даже если так, первое, что она предложит сделать — это загрузить ИЕ9 :)

                                    >да и может найтись масса других причин у людей не обновляться

                                    Ну, и ваш конструктив-то какой? Распустить подкомитет html5 в w3c и изъять стандарт? Эта самая старая техника может работать ещё десятилетия и всегда найдутся люди у которых будет масса причин не обновлять её. И, заодно, запретить HD-видео — ведь есть масса людей, у которых есть масса причин не обновляться до оборудования, способного это видео проиграть. Да чего уж, DVD тоже надо запретить. До сих пор есть масса людей, у которых домашний источник видеосигнала — vhs-плеер. И у них тоже (сюрприз!) есть масса причин не обновляться!
                                    А может всё-таки наоборот? Если хочешь пользоваться новыми технологиями технику придётся обновить. К тому же, о чём разговор? О том что пользователь старой техники, на которую не встаёт новый браузер не сможет просмотреть видео под тегом [video]? Так он и так не сможет его посмотреть — если его техника не вытягивает даже браузер, то на видео она захлебнётся гарантированно. Так стоит ли сохранять совместимость ради тех, кто всё-равно не сможет ею воспользоваться?
                                • +1
                                  Мне кажется, что вы пришли сюда потролить. «Спасиние утопающего — дело рук самого утопающего» и не будем это забывать. Пользователя можно и нужно провоцировать сменить браузер, что сейчас все же начинает активно реализовываться.
                                  Давайте будем исходить из задач, поддерживать или не поддерживать старые браузеры определяет проект — является ли поддержка старых браузеров хорошим бизнес решением или нет.
                                  Говоря о Graceful Degradation надо не забывать, что не каждый сайт хочет за это платить и еще больше сайтов просто не поймут, что это такое.
                                  Да и вообще в статье нас хотят ознакомитm с html5, правда стиль изложения ужасен и чистый копипаст, но собситвенно не говорят делайте так и все!
                                  • 0
                                    Сударь, я лишь писал об уважении. Обновление — иногда это даже хорошо (если бы оно никогда ничего не ломало, цены бы ему не было; а раз от него могут быть проблемы, то...), однако есть ситуации, когда оно нежелательно/невозможно. Уважать даже таких посетителей — мне кажется, это не то чтобы обязанность создателей, но хотя бы их культура и чувство вкуса.
                                    • +1
                                      Мне кажется и юзер должен уважать разработчика. В жизни все определяется выгодой и финеансовой рентабельностью.
                                • 0
                                  современные технологии(js плагины обеспечивающие кроссбраузерную поддержку в зависимости от возможностей браузера посетителя) и принцип Graceful Degradation позволяет, и делает надо сказать — это очень успешно, предоставить возможность практически любому посетителю ресурса «насладиться» «информационным ресурсом».
                                  Другой вопрос — это те разработчики которые не хотят, или не могут правильно воспользоваться(создать?), средствами которые для них уже разработано предостаточно и тем самым не создавать ресурсы для «избранных», а к ним я могу отнести и сайты созданные специально для ie6-only + activex components, а создавать проекты для очень широкого круга лиц которые можно увидеть и которыми можно воспользоваться как открыв браузер на наручных часах, так и начав вещание на биллборд.
                                  • 0
                                    Да я и сам очень уважаю Graceful Degradation, беда только в том, что дизайнеры часто об этом не думают, верстальщики работают «до сдачи», а не до «радости посетителя», и, только зайдя на сайт текстовым links-ом, вспоминаешь, что контент должен быть важнее оформления. ))

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

                                    IE6 — не самая гроза. В Win7 по умолчанию уже не IE6, но вопросов «почему в нем не работает» довольно много, а обновляться любят (и не боятся) не все.
                                    • 0
                                      ваш предыдущий комментарий, на который я писал свой ответ был куда более категоричен.
                                      Ваше же данное высказывание я поддерживаю собственно практически об этом же говориться и в моем комментарии :)
                                  • +1
                                    Вопрос автору — исходя из чего вы сделали вывод, что дивная вёрстка, без использования header и footer, считается несемантичной? Насколько более семантичным, по вашему мнению, является употребление тегов header и footer, нежели использование дивов с классами .header и .footer? Да и чем вообще является семантика — в вашем понимании?
                                    • 0
                                      Справедливое замечание. Присоединяюсь к вопросу «что есть семантика в контексте „преимуществ“ HTML5 перед XHTML».

                                      А то таким макаром можно сказать, что UL не семантичен и заменить его на тег MENU, как более семантичный для разметки меню на сайте…
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                    • +1
                                      'localStorage' in window && window['localStorage']
                                      А в чем смысл такой двойной проверки, есть какая-то тонкость?
                                      • 0
                                        А вот, интересно получается!
                                        Несмотря на приличное количество злопыхателей критики в комментариях пост добавило в закладки более 200 хабраюзеров… Чудеса:)
                                        • +1
                                          Видимо, критика обращена к форме поста, а содержание (пусть и фрагментами) многие кажется актуальным.
                                          • +2
                                            Если я ничего не путаю, то в Избранное могут добавлять пользователи с read-only.
                                            • 0
                                              Да, вы правы. Но тем не менее.
                                          • –2
                                            Читаешь так Хабр и складывается вредная иллюзия, что Html5 уже во всю применяется в продакшене.
                                            IE8 никто еще не списывал. Успокойтесь уже. И никакие бойлерплейты не спасают. Зачем усложнять разработку дополнительными сущностями?
                                            • НЛО прилетело и опубликовало эту надпись здесь
                                            • 0
                                              Задумка про тэги VIDEO и AUDIO хорошая, но на данный момент использовать Flash всё равно проще:
                                              c AUDIO потому что FireFox так и не поддерживает MP3, то что поддерживает FireFox (.OGG) не поддерживается в IE
                                              с VIDEO потому что Chrome не поддерживает h.264 (.MPG), а то что поддерживает Chrome (.WEBM) не поддерживается в IE
                                              • 0
                                                Local Storage упомянули, Web Storage тоже, а как же веб кеш? Отличная штука, я ей понемногу пользуюсь и работает уже много где. Оффлайн сайты очень не плохо работают на планшетах. Как минимум можно сделать простую читалку для сайта. Человек зашел, выбрал статьи и потом без инета, в дороге например, включил планшет и почитал.
                                                • +3
                                                  var tag = document.getElementById("yep");
                                                  var attr = tag.getAttribute("data-name");
                                                  alert(attr + " would have you later!");


                                                  Обращение к кастомным атрибутам, как в статье не совсем верно. Точнее оно будет работать в любых браузерах, но красивый, каноничный и предпологаемы способ:

                                                  var tag = document.getElementById("yep");
                                                  var attr = tag.dataset.name;
                                                  alert(attr + " would have you later!");


                                                  • +9
                                                    Автор! В обеих статьях количество советов равно 11, что не является ни дюжиной, ни тем более чертовой.
                                                    • +2
                                                      Значение элемента было переопределено (разумеется, на уровне семантики) и теперь я должен его использовать, как, например, для указания копирайта в подвале своей странички.


                                                      Что бы это значило? И неграмотно и непонятно.

                                                      должна быть выделена должным образом


                                                      То же самое. А какой образ должный?

                                                      Представьте, что нам необходимо оставить где-то в недрах страницы имя разработчика (скажем, веб-приложения) и надоедать им (путём alert'ования), если тот не купил полную версию.


                                                      Кто тот? Разработчик?
                                                      • 0
                                                        Я тоже пытался написать guide для верстальщиков на одной прошлой работе.

                                                        Пришел к следующему.
                                                        а) Все эти советы верстальщикам от программистов можно сформулировать одной фразой «HTML, CSS и названия файлов, включая файлы картинок — это тоже КОД!»
                                                        б) А исходя из этого, приходим ко второму правилу — верстку должны делать верстальщики с квалификацией и зарплатой программиста. Однако на практике верстальщики зарабатывают в 1.5-3 раза меньше, и квалификация плюс возможности для роста у них соответствующие.

                                                        Соответственно, приходим к выводу, что тольку от таких советов — ноль.

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