16 апреля 2007 года в два часа дня состоялось моё выступление на конференции РИТ-2007. Мне повезло — моё первое публичное выступление не только записывалось, но ещё и транслировалось в прямом эфире. Нервозности это, конечно, добавляло. Но, тем не менее, всё прошло хорошо: я поделился своими взглядами на работу с CSS и, как выяснилось позднее, многим этот доклад показался интересным. Теперь и у вас есть возможность выслушать мой доклад:
Видео недоступно
Также ролик доступен на страницах RuTube и imeem.
Операторы, снимавшие конференцию, только ближе к концу первого дня научились снимать не только докладчика, но и саму презентацию. Поэтому я предлагаю вам PDF-версию презентации, несколько улучшенную, по сравнению с оригинальной:
Вадим Макеев «CSS-менеджмент» РИТ-2007 (PDF, 122 kb)
Каждый мой многозначительный кивок в сторону проектора перелистывал очередную страницу презентации. Поэтому рекомендую и вам, для лучшего понимания, открыть во время просмотра PDF-версию.
ps: Видео всех докладов конференции доступно для просмотра у пользователя РИТ-2007 на RuTube и для скачивания на официальном сайте РИТ-2007.
Автор: Вадим Макеев.
Интересное...
Комментарии:
Антон Морозов 4 August 2007 at 23:17
Доклад действительно очень интересный, большое спасибо.
А вот на счет биороботов - зря вы так. :) По-моему, читать (и особенно писать) стили, написанные в строчку, очень даже удобно.
pepelsbey 5 August 2007 at 0:04
Мне кажется, что для человеческий мозг работает несколько иначе, чем интерпретатор. Тут важна чётко выраженная структура кода, когда для того, чтобы найти свойство достаточно скользнуть взглядом по верикальному столбцу, а не парсить нужное слово среди длинной строки, прокручивая страницу далеко вправо.
Антон Морозов 5 August 2007 at 0:41
Если располагать свойства внутри одного правила в строго определенной последовательности (о чем вы в докладе тоже говорили), то проблема поиска нужного свойства отпадает. А длинные строки можно переносить.
Зато в процессе написания, когда нужно по несколько раз изменять стили для многих элементов, не надо каждый раз скроллить туда-сюда. Все находится рядом.
Поэтому я думаю, что такой вариант тоже имеет право на существование, и для этого не обязательно быть биороботом :)
pepelsbey 5 August 2007 at 1:08
Про биороботов — это была шутка ) Конечно, этот вариант вполне достоин применения, более того, некоторые уважаемые мною разработчики пишут именно так.
Павел Кирсанов 5 August 2007 at 19:00
Очень интересный доклад!
Доклад сокращает путь поиска оптимального написания для начинающего (и не только) верстальщика!
garA 6 August 2007 at 11:07
Я как раз вчера просмотрел ваш доклад. и сожалел, что нет презентации как у Flack и Россомахина, а сегодня смотрю, появился .. :)
Спасибо..
Шильгия 6 August 2007 at 17:40
жаль, что обсуждение обрезано.
pepelsbey 6 August 2007 at 17:45
Учитывая то, что доклад должен был длиться 20 минут и обсуждение 10, а только доклад длился минут 35… то я вполне понимаю почему обрезали обсуждение ) К тому же вокруг начали ходить люди…
Del'ka 7 August 2007 at 1:48
Хороший доклад, хотя и ожидал “отцовского доклада для отцов” :) но посмотрел с удовольствием.
pepelsbey 7 August 2007 at 1:51
«Отцы» и так всё знают и готовы биться насмерть за убеждения, вроде пробелов после двоеточия ) Я же хотел рассказать о своём опыте. Если конечно я правильно понял термин «Отец».
В любом случае — доклад будет развиваться вместе со мной, думаю, что я ещё выступлю где-нибудь с его обновлённой версией.
ulmen 8 August 2007 at 1:03
а саму презентацию можно ли где нибудь посмотреть? а то больше половины доклада слайды не в кадре
pepelsbey 8 August 2007 at 1:08
2 ulmen: вчитайтесь во второй абзац сразу после видео, там вас ожидает сюрприз ;)
ulmen 8 August 2007 at 1:16
а, ссылку “далее” не увидел :) спасибо!
keep 11 August 2007 at 18:10
+1, Правда доклад показался, довольно «простым».
BTW Полностью согласен с IE, если он не обрабатывает поданные ему css с content-type: text/plain.
pepelsbey 11 August 2007 at 18:46
Хмм… если вам хотелось чего-то непростого, то стоило заглянуть на наш с Flack’ом семинар «Семантическая вёрстка» ;) Осенью будут ещё доклады, обещаю — будет непросто.
keep 12 August 2007 at 11:12
Хехе :) Семинары это хорошо, только на них надо ездить. Вряд ли можно будет увидеть меня на каком-нибудь ближайшие пару-тройку лет. Но жду с нетерпением. Видео с семинара о семантической вёрстке остались?
Марат 14 August 2007 at 17:03
Ха )
Я биоробот! ))
Chipset 14 August 2007 at 20:27
Дайте плз.. ссылку на видео, хочу сохранить это у ся, и пересмотреть..
pepelsbey 14 August 2007 at 20:42
Chipset, я обновил постскриптум, теперь там есть ссылка на оригиналы видео.
Arsart 15 August 2007 at 2:00
Говоришь, как обычно, отлично! ,) Молодца!
pepelsbey 15 August 2007 at 2:04
Да, ты в числе нескольких счастливчиков был свидетелем прототипа этого доклада весной 2006 года… Спасибо ;)
Данил 16 August 2007 at 17:15
При всем уважении к докладчику, W3C и CSS
попрежнему считаю анекдот про Вииларибу, Виллабаджу, див и таблицы актуальным.
Бо, стал бы тогда на данном сайте (на индексе, что немаловажно - ***) див, долженствующий быть в правом верхнем углу, стоять в правом нижнем? (IE 6 SP2 Maxthon)
pepelsbey 16 August 2007 at 17:47
Спасибо, что заметили.
Поправил одной строчкой в коде. Всё из-за видео: я, к счастью, не пользуюсь такими древностями, а сайт был собран два года назад сейчас активно переделывается.
А по поводу анекдота: если у вас хватает опыта, то семантическая (дивная-бестабличная) вёрстка для вас не сложнее традиционной табличной. Более того — предложи мне сейчас много денег за старинный табличный макет, я бы проиграл. Разучился (
Не ищите оправданий. Сроки сборки проекта — это не главное и это, к счастью, начали понимать работодатели.
Данил 16 August 2007 at 17:56
Ну… здесь можно было бы развернуть довольно большую дискуссию. Душой я за раздел между дизайном и контентом, а так же за действительную стуркутуризацию, понятную роботам, но при этом вижу на данный момент слишком много препятствий для однозначного ДА впользу верстки на дивах и окончательного НЕТ однозначности интерпретации верстки на таблицах. Но это скорее из-за неосведомленности, т.ч. буду работать :-)
LeKz 17 August 2007 at 11:03
Относительно биороботов.
Буквально два дня назад столкнулся с проблемой разрешения конфликта SVN в файле, который форматированный именно таким образом.
Да! Используя такой стиль можно писать и даже читать написанное, но решать конфликты системы контроля версий в таких файлах (ИМХО) буквально невозможно…
jahson 19 August 2007 at 10:28
Молодец, Вадим. Посмотрел уже давно и со многим согласен. Одно замечание - темп речи у тебя в докладе достаточно медленный, из-за чего материал достаточно тяжело воспринимается.
Насчёт структуры кода - тут ты прав. Надо доносить, что код пишется прежде всего для людей, а не для парсера, который почистит пробелы / табы / переносы строк, которые ему совсем не нужны.
ps. Надо сделать csslint для проверки оформления css-кода. lint-инструменты достаточно распространены, но почему-то забыты.
pepelsbey 19 August 2007 at 10:46
Спасибо ) Насчёт темпа и самого качества доклада — это всё-таки первое подобное публичное выступление, поэтому я с трудом помнил как меня зовут, а уж что говорить про сам доклад. Дима Барановский говорит, что к где-то к шестому выступлению должно наладиться )
Первый раз слышу термин «lint-инструменты». Ушёл гуглить…
jahson 19 August 2007 at 12:42
https://en.wikipedia.org/wiki/Lint_(software)
Термин, скажем так, придуман на ходу ;) Но лучшего названия я не нашёл.
Вообще, он должен проверять код на подозрительные места, возможные ошибки и т.п., что, впрочем, не помешает ему проверять оформление.
Как пример - jslint.com
Данил 20 August 2007 at 11:39
С вашего позволения, такие инструменты называются не lint-tool а styler-tool
стайлеров очень много разных, для конкретно ЦСС не скажу, но уверен, что они есть и что их так же можно легко настраивать
В частности многие IDE имеют встроенные стайлеры для всех используемых в них языков.
Один из универсальных тулов, что мне попадался под руку был polystyle.
jahson 22 August 2007 at 8:57
Данил, думаю lint и стайлер несколько разные вещи. Есть ещё beautifier.
Но lint выполняет несколько другие задачи, а проверка оформления - это так, бонус, или необходимость, иногда - когда определённые конструкции зачастую являются источниками ошибок.
Julik 26 August 2007 at 2:14
я как-то тему с обязательностью цветов в hex не понял - сам уже давно пишу все в rgb(), оно приятнее и понятнее (не говоря уж о том что времена 256 цветов давно прошли)
или с такой нотацией есть проблеиы? (кроме указания процентов по ошибке)
pepelsbey 26 August 2007 at 2:56
Что-то вы путаете… HEX-представление цвета переводится в RGB без каких-либо потерь и это совсем не 256 цветов.
Вам правда приятнее и понятнее запись: rgb(255,255,255), а не #FFF? Подумайте…
Julik 27 August 2007 at 5:46
Конечно я перепутал - 256 степеней яркости в каждом канале :-) пардон
а что касается записи - стопроцентно. hex/octal запись чисел просто не люблю, а начинал в принте - где все цвета всегда по числам
уже сколько времени занимаюсь вебом (правда с перерывами) - запомнить эти дурацкие номера так и не смог, а rgb-значения – вот они, во всех каналах во всем графическом (и видео кстати!) софте
pepelsbey 27 August 2007 at 8:16
…а у меня ещё в школе на информатике были проблемы с системали исчисления, кроме десятеричной, однако как только оказался в сети — почему-то сразу проникся шестнадцатеричной, и теперь уже могу примерно представить цвет по его коду ) Понимаю, это всё индивидуально. Но… в том же фотошопе: HEX — это одно поле, раз-два и в коде, а RGB — три поля. Тут либо нужно развивать память, либо копипейстить три раза.
И если продолжать тему моего доклада про быстрый визуальный парсинг кода, то решётка + прописные буквы несколько более индивидуальный признак, чем rgb(…) — у нас уже есть url(…), content(…). Про краткость записи я сказал выше.
Constantant 29 August 2007 at 22:18
Интересный рассказ… хотелось бы услышать совет где можно найти информацию по оптимизации CSS для разных браузеров (в особенности для Opera). В сети всего много, но на то что бы испробовать каждый вариант нет времени…
Меня интересуют такие свойства как цвет и размер разных элементов формы и соответствие размера шрифта.
Спасибо.
pepelsbey 29 August 2007 at 22:57
Про размеры шрифта можно прочитать в моей публикации «Масштабные тонкости», а по поводу Opera, да и по поводу форм, скажу вам, что оформление элеметнов форм должно быть максимально простым, понятным и желательно оставаться в стиле системных/браузерных контролов.
Интересный материал по оформлению элементов форм можно найти в разделе Lab на сайте Роджера Йохансона: Styling even more form controls.
asp_id 5 September 2007 at 7:03
пдфка некается.
pepelsbey 5 September 2007 at 8:25
asp_id, спасибо, поправил.
vipoff 27 September 2007 at 15:02
В защиту биороботов.
Уберите все пробелы и комментария и вы увидите, как можно сэкономить трафик.
Понятно, что читать это проблематично.
Мне кажется, вполне логичным объединять некоторые свойства в одну строку.
Пока я нашел только три пары – пары, которые не имеют слишком большой длины при полном наборе значений, но при этом имеют общее действие.
1. margin padding
2. width height
3. color font
pepelsbey 27 September 2007 at 15:07
> Уберите все пробелы и комментария
Это экономия на спичках и усложнение визуального восприятия, странно с этим спорить. Для экономии трафика нужно делать постпроцессинг файлов. Даже я смогу написать такую процедурку на PHP.
Я, главным образом, говорил про удобство ориентирования в огромных CSS-файлах, когда любое выпрямление кода приводит к образованию визуального шума, вместо простых конструкций.
Но опять же — это один из подходов.
Дима 2 October 2007 at 15:42
Привет.
У меня вопрос есть, зело дурацкий. Только не знаю, как связаться с тобой, окромя этого сайта. Спрашивал у Василия Степанова, он тоже не знает.
Кстати, ещё раз спасибо за крестики-нолики.
Не затруднит аську или телефон заслать на мыло?
akxxiv 3 October 2007 at 16:22
Приветствую, Вадим. Достаточно интересный доклад. Хотя с многим согласен и уже использую, но и для себя нашел пару другую интересных идей. Возьму на вооружение. Спасибо. Ты сейчас в Москве? Вспоминая Питерское собрание вебмасконовцев в пиццерии на Садовой, задался вопросом а может снова… :о)
pepelsbey 3 October 2007 at 16:27
Эх, тот самый пятничный маршрут ГЭЗ-Сбарро-Циник… И самому хочется повторить ;) В ноябре будет такая возможность, следите за объявлениями.
Elwe 26 October 2007 at 11:51
про тройные сокращения не знал. спасибо
сотик 7 November 2007 at 17:15
Даже есть что-то новенькое, по мелочам, конечно, но приятно было послушать. Спасибо за доклад!
0 коммент.:
Отправить комментарий
Ваш комментарий появится в блоге после проверки администратором