Уровни владения HTML, CSS и Javascript: Часть 1. HTML

Original author: Roger Johansson
  • Translation
Вашему внимание предлагается достаточно большой отрывок статьи «Levels of HTML knowledge», написанной Роджером Йоханссеном 30 Мая 2006 года.

Прим. переводчика: Изначально я опубликовал этот пост в виде юмористических выдержек из трех статей, написанных тремя разными авторами и озаглавленных схожим образом: «Уровни владения HTML», «Уровни владения CSS» и «Уровни владения Javascript». Что, конечно же, было довольно глупой затеей. Осознание допущенной ошибки пришло через 5 минут и два минуса к посту и карме. Исправляюсь. Перевод «Уровней владения CSS» ждите завтра.



Уровень 0



Xэ–тэ–мэ–чаго?


Люди на этом уровне никогда не сталкивались с HTML, кроме как по ошибке, например, когда случайно открывали HTML-версию электронного письма в текстовом режиме. Эти люди не работают в веб-индустрии, и никогда не будут, поэтому у них нет ни причины, ни желания подняться выше нулевого уровня.

Типичное высказывание:

Уровень 1



HTML? Это такие штучки для того, чтобы делать текст жырным или курсивом?


Эти люди пользуются Интернетом достаточно давно и догадываются о том, что происходит за кулисами просматриваемого ими в данный момент веб-сайта. При попытке что-либо опубликовать в сети самим они беспомощны без какого-нибудь WYSIWYG-редактора. Это может быть Photoshop, Dreamweaver, Frontpage, или редактор, встроенный в CMS, которой им сказали пользоваться.

Люди, занимающиеся поддержкой содержания веб-сайта, зачастую находятся на этом уровне мастерства, а некоторые даже утверждают, что нет никакой надобности стремиться подняться на ступень выше. Многие визуально-ориентированные дизайнеры прочно застряли на этом уровне по своему собственному желанию, часто защищая свой выбор следующим: «Никто в печатном мире не редактирует PostScript-код вручную, так почему же в сети должно быть по другому?» К сожалению, многие менеджеры проектов также редко забираются выше первого уровня.

Уровень 2



Странички, которые я делаю в Macromedia Dreamweaver'е, отлично работают в Internet Explorer'е. Зачем мне вообще смотреть на этот HTML?


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

Разработчики второго уровня так же состоят из программистов, которые предпочитают безопасность Visual Studio или любой другой IDE, которую они используют. Они думают, что HTML — это слишком просто для них, и что их среда разработки достаточно продвинута, чтобы разобраться во все сама. Многие программисты второго уровня являются целевой аудиторией разработчиков CMS.

Уровень 3



Да, да. Я слышал об этих новых тэгах: ul, li и все такое. Но я отлично обхожусь своими любимыми table, img, br.


Многих веб-разработчиков старой школы, которые трудятся в индустрии с конца 90-х годов, можно найти на этом уровне. Вплоть до конца прошлого века эти люди писали HTML вручную, так что они знают все о вложенных таблицах и однопиксельных GIF-ах. С тех пор WYSIWYG-редакторы (такие как GoLive и Dreamweaver) улучшились до такой степени, что разработчики третьего уровня не видят никаких причин знать больше об HTML. Сейчас большая часть их работы, связанной с HTML, выполняется в дизайнерском режиме их редактора, поэтому они предпочли бы потратить свое время на изучение конкретного приложения, нежели вникать в то, что происходит за его кулисами.

Уровень 4



Слышь, а как можно сделать табличку с данными только div'ами и span'ами, не используя table?!


На этом уровне люди начинают сознательно использовать doctype-ы. На первом этапе это почти всегда переходный (transitional) doctype, чаще — XHTML 1.0 Transitional. Все таки XHTML является более поздней спецификацией чем HTML, так что наверное он лучше, правда? Люди на этом уровне являются также большими фанатами XHTML 1.1, наивно полагая, что более старшая версия подразумевает какие-то улучшения.

Услышав от кого-то, что использовать таблицы для разметки нельзя, многие программисты четвертого уровня используют div-ы для воссоздания таблицеподобных типов структуры. Так бывшие повара тег-супов становятся divоманами, которые денно и нощно производят тонны презентационной разметки с незамысловатами именами классов (red, blue, bigRedText и т.д.) и инлайновым CSS (атрибут style).

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

Уровень 5



Интересно, использование какого типа списка будет семантически более корректным в этом отрывке документа?


Большинство разработчиков, трудящихся в соответствие с канонам веб-стандартов, можно найти здесь. Эти люди, как правило, сначала думают о структуре и семантике и уже потом о представлении. На этом уровне обычно используются строгие (strict) doctype-ы, в целях поощрения разделения семантической и презентационной разметки. Будет ли это HTML версии 4.01 или XHTML версии 1.0, для многих не так уж и принципиально, хотя некоторые разработчики пятого уровня подвергают сомнению использование XHTML. На пятом уровне люди, как правило, склонны разводить бесконечные дискуссии о нюансах разметки. Они могут убить несколько часов, чтобы придумать имя для класса или реорганизовать HTML и CSS файлы.

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

Уровень 6



Я считаю спецификации HTML 4.01 и XHTML 2.0 семантически ограниченными. Поэтому я сейчас работаю над собственным языком разметки.


Эти люди являются мудрецами нашей отрасли. Они тратят много времени на то, что будет полезным лишь в будущем, а не прямо сейчас. Среднестатистический разработчик не сможет воспользоваться результатами значительной части их труда по крайней мере еще лет пять.

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

Читайте продолжение про CSS в следующей части.

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 54

    0
    Приколько. За перевод Спасибо!
    p.s А вот с пояснениями было бы круче..
      0
      Первая часть с пояснениями готова!
    • UFO just landed and posted this here
        0
        Подробно на эту тему будет написано во второй части.
        • UFO just landed and posted this here
            +1
            Использовать таблцы для презентации данных вполне корректно с точки зрения семантики элемета <table>. Так что, если вы не используете таблицы для создания колонок и т.д., ваш уровень не ниже. ;-)
        0
        просто и понятно! ловите пряники:)
          0
          думаю в последнем пункте лет 10 надо поставить
          0
          спасибо, забавно. с меня тоже пирожок )
          Поясните, пожалуйста маленькому любителю HTML, самоидентифицировавшемуся (вот ведь!) на уровне 4:
          Большинство веб-разработчиков, которые достигли четвёртого уровня, готовы продолжить обучение. Они понимают, что у методов, которые продвигаются авторами блоггов и книг о веб-стандартах, есть преимущество. Но они еще не поняли, почему эти методы лучше.


          Почему эти методы лучше? Или — почему хуже?
            0
            Семантика. Сверхзадача — передать информацию с минимумом искажений на максимум устройств воспроизведения. Информация должна быть в точности донесена до SE-роботов, мобильных телефонов, всего многообразия настольных браузеров, программ-чтецов и даже сервисов типа dapper.net
            То есть, ты больше не можешь доверять тому, что ты видишь.
              –1
              Смотри у тебя есть 3 колоночная верстка.
              Заказчик хочет чтобы справа были новости слева меню по середине контент.
              Ты пихаешь все это добро в табличку, запрогорамливаешь шаблон все работает и все шикарно :)

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

              А если ты сделал изначально на div, ты открываешь файл стилей - и правишь его как хочешь, меняешь расположение блоков и т.д -> не трогая свой шаблон где у тебя все запрограмированно :)

              Это так на в скиду - есть много и других преимуществ :)
                0
                ВОТ! Я тоже так думаю. Но в статье в пункте №4 между строк читается что divоманы — чудаки какие-то. Само слово то ещё — дивоман! Если я верстаю страницу не табличками, значит я дивоман. Убейте меня!!
                  0
                  Под дивоманами подразумеваются чудаки, которые ничего кроме дивов не используют. Вообще. Я таких разметок видел много. Див в диве и дивом погоняет.
                    0
                    Там сказано не "страницу не табличками", а "таблицу с данными - дивами". Дивоман - тот, кто меры не знает. А в данном примере вообще плохо осознает смысл и пользуется дивами, потому что уяснил, что это типа клёво.
                    0
                    пример вообще ни разу не корректный. HTML все равно придется править в большинстве случаев. При чем, если в таблицах ячейки просто местами поменять надо, то с дивами гемору может быть куда больше.
                    Divная верстка не для удобства делается.
                      0
                      Идеальный layout обязан быть продуман так, чтобы все правки заключались в добавлении либо нового блока либо совсем ненавязчивой минутной правки. Классика - csszengarden.
                        0
                        да. так и есть. но на самом деле - это и на таблицах делалось.
                        спорить о том, что удобнее - таблицы или цсс - имхо, бессмысленно. Ибо если с головой подойти к вопросу - и то и другое можно сделать хорошо. ну или плохо - соответственно.
                        это еще если забыть о разночтениях браузеров в обработке... с таблицами на данный момент с этим все ж проще.
                        потому я и говорю - дивная верстка используется не для удобства.
                        т.е. иначе говоря - "оправдывать" использование дивной верстки с точки зрения удобства - имхо, глупо и показывает лишь то, что говорящий это попросту не умеет работать с таблицами. И всего-то. Что кстати говоря вызывает сомнения по поводу того, что человек вообще достаточно грамотный верстальщик.
                          0
                          Сударь, вы до какого уровня CSS прокачались, если не секрет? ;-)

                          Ни, так называемая, "divная," ни "табличная" верстка права на жизнь не имеют. Есть одна правильная верстка — семантическая — которую нужно постичь, проникнутся и использовать в работе.
                            0
                            >Я использую CSS для дизайна. Это удобней табличной верстки, потому что…
                            Я лично говорю - Я использую CSS для верстки - ВСЕГДА! Таблица - это не что иное как элемент страницы? к которому тоже применяется CSS.
                            А то что хотели спросить - это "С помощью каких элементов я строю каркас страницы".
                            Я не считаю нужным "высчитывать" свой уровень по малограмотной статье, в которой все в кучу намешано и к тому же примитивно подменяются понятия.

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

                              Семантическая верстка - это большой комплекс правил, которые в одном сообщении не раскроешь. В двух словах (если брать только (x)html часть) - каждый документ имеет логическую структуру, а каждый элемент документа имеет свое структурное и логическое предназначение, например, заголовки не могут быть представлены как <p class="title"> (вот сейчас верстку рецензирую и вижу подобное). Таблицы должны использоваться исключительно для табличных данных, но никак не для сохранения структуры макета или там элементов меню.
                              Ни в коем случае нельзя путать с некоей "смешанной версткой", такой вообще не существует - это выдумки верстальщиков четвертого уровня. :)
                                +1
                                согласен.
                                но тем не менее, уровень верстальщика нужно оценивать не вопросом "что он использует", а вопросом "как он это использует".
                                ваш комментарий - только лишнее тому подтверждение)

                                зыж и уж тем более не по таким тупым градациям, в которых изначально ошибочный подход.
                                  0
                                  ps: ну вот это же "Слышь, а как можно сделать табличку с данными только div'ами и span'ами, не используя table?!" - это же тупость!
                    0
                    Огромное спасибо за перевод))

                    P.S. Круто)) Я аж на четвертом уровне))
                      0
                      Верной дорогой идете, товарищ!
                      –1
                      Почитал, но со многим несогласен!

                      Получается, что я на 5 уровне, но я вот использую transitional, и как-то не напрягает это меня, и во всех браузерах все ок, и валидацию все проходит и вообще.

                      6 уровень — по-моему к обычным смертным вообще не относится, это уже не хтмл, а что-то новое.
                        +1
                        не больше чем юмор, имхо.
                          0
                          в каждой шутке есть доля... и тут она немалая. опять же имхо :)
                          +1
                          При попытке что-либо опубликовать в сети самим они беспомощны без какого-нибудь WYSIWYG-редактора. Это может быть Photoshop
                          Первый раз вижу, чтобы Photoshop называли WYSIWYG-редактором :)
                            0
                            он умеет страницы сохранять html)))
                            режет макет и сохраняет)
                            так что в принципе его можно и в качестве висивига использовать...)
                            0
                            Очень хочется, подобное, видеть по адресу:
                            переведенное -> /чье/ -> /об чем/ -> /мой/ перевод
                              0
                              5.5 - XML/XSLT :)
                                0
                                :) +1
                                0
                                все в точку написали =) я на 4 уровне =))
                                  0
                                  шутки-шутками, но 6ой пункт попахивает идиотихмом (:
                                    0
                                    шестой уровень есть в любой сфере) не будь его мы все бы до сих пор сидели в SGML, я подозреваю что именно товарищи добравшиеся до шестого уровня создали HTML -> XML -> XHTML...

                                    именно неудовлетворенность существующими решениями и рождает новые технологии, разьве нет? и конечно до шестого уровня добираются единицы, но это и правильно, большинству достаточно остановиться на пятом уровне чтобы чувствовать себя профи
                                      0
                                      вы не совсем меня поняли
                                      я за свою короткую жизнь писал и "навейшии супер-язык праграмиравания" (кстати, достаточно неплохой, чуть-чуть до структур не дописал язык xD), и "тридидвижки", и собственные языки разметки. только это были не новые технологии и профессионализм, а идиотизм
                                      таких как я больше чем тех, кто, добравшись до 6го уровня (а я считаю, что по сей шкале - добрался) придумывал новые технологии. поэтому 6ой уровень скорей идиотизм, чем гениальность
                                      с другой стороны, идиотизм и гениальность просто сильные отклонения от нормы, просто в разные стороны :)
                                        0
                                        Когда б вы знали, из какого сора растут новые технологии... а я думаю вы знаете, раз добрались до 6-го уровня)

                                        так вот, пусть на тысячу идиотов будет один гений, но пусть он будет, надеюсь теперь мы поняли друг друга)
                                          0
                                          короче, я думаю, "6ой уровень - отклонение от нормы" будет приемлемым вариантом :)
                                    0
                                    я на 5 уровне. сижу порой подолгу думаю над названиями классов ))
                                      0
                                      я думал, что я один такой :)))
                                        0
                                        Glook, maddog
                                        Ребята - я тоже долго думаю над названиями и очень долго смеюсь (хотя если надо переделывать то плачу), когда вижу вот такой код http://www.stagi.ru/
                                          0
                                          Тут не смеяться, а плакать надо.
                                            0
                                            а что хорошие такие "елочки" у верстальшика :)
                                            вот это чистый пример "дивомании"
                                          • UFO just landed and posted this here
                                              0
                                              это нечеловеческая верстка.
                                                0
                                                это точно не НЛО, думаю все-таки человек
                                            0
                                            >> Среднестатистический разработчик не сможет воспользоваться результатами значительной части их труда по крайней мере еще лет пять.

                                            Обычно больше, к сожалению. XHTML используется средними разработчиками не слишком вктивно, несмотря и преимущества.
                                              0
                                              а использование в верстке микроформатов — это уровень 5.5? ))
                                                0
                                                Не думаю, так как использовать микроформаты несколько проще, чем придумывать свои: «…убить несколько часов, чтобы придумать имя для класса…»
                                                  0
                                                  Удивляет, что Roger Johansson не использует микроформаты.
                                                  Может быть он считает их чем-то из шестого пункта? :)
                                                  0
                                                  имхо, определять уровень верстальщика по тому что он использует - глупо.
                                                  я видел верстку DIV-фанатов такого качества, что просто в шоке был.
                                                  человек хотя и использовал блочную верстку и все такое - толком не мог объяснить зачем блочную, а не табличную и вообще кому оно надо. Но горд собой был зато до ужасу))
                                                  Так что "чем" - не показатель. Показать - "как".
                                                    0
                                                    Главное результат, а как это и какими программами делается-это не важно. ИМХО
                                                      0
                                                      "Как" зачастую и определяет результат.
                                                      0
                                                      А извращение с переходом на разметку по стандартам SGML это какой уровень?

                                                      Only users with full accounts can post comments. Log in, please.