Андрей Сумин и редизайн hh.ru

Три верстальщика, около 60 разных страниц сайта, и пара месяцев на полный редизайн, включая внедрение.

Андрей Сумин

В работе над редизайном хедхантера использовалась идея верстки независимыми блоками Харисова. Как сказал Андрей, подход превращает ремесло верстальщика в производство. А это позволяет эффективно работать над проектом сразу нескольким верстальщикам.

Было-стало

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

Как и в яндексе, на хедхантере колонки сайта сделаны ячейками таблицы. Просто потому что это наиболее стабильный вариант. Ну, такие популярные сайты в которых вдобавок всякая странная резина, можно понять.

Для работы над проектом ребята придумали некий движок:

Работа над страницами сайта

Там они разными цветами отмечали готовность верстки для разных страниц сайта. По словам Андрея подход очень помог в работе. (на фото видно что всё почти зеленое — это уже последние дни перед запуском, когда всё было готово)

Исповедь Макишвили

Настолько проникновенно и с чувством Вадим рассказывал что по-другому и не назовешь.

Рассказ начался с вот такого слайда:

Shame on you, Opera!

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

Также с сожалением сказал что quirksmode на страницах Яндекса возможно был не самым удачным решением.

Кроме того Вадим рассказал о нескольких наиболее вредных глюках. И его личном «любимом» баге на решение которого он потратил больше недели. Условий для бага целых 8, и он связан с флоат блоками и длинными неразрывными словами внутри таблиц.

В среднем на одну задачу приходится две ошибки

По количеству положительных отзывов Вадима можно однозначно считать рок-звездой минской встречи. :)

Макеев о веб-шрифтах

Первый слайд презентации:

Ответ Вадима Вадиму

Pepelsbey рассказывал о шрифтах для веб, их истории и самых последних обновлениях. О том как все уже намучились c .eot. И всяком другом интересном про шрифты.

Вадим также обмолвился, что во внутренней рассылке оперовцев идея WOFF была воспринята с энтузиазмом. Так что вполне может быть этот формат станет стандартом отрасли для веб-шрифтов. WOFF это на самом деле открытый и более совершенный вариант майкрософтовского EOT.

А ещё

Николай Мациевский рассказал о том что и когда лучше использовать для рисования, SVG или canvas. Доклад доступен у него на сайте. Результат сравнения примерно такой: сложные области или чисто растровая графика — Canvas, большие по пиксельной площади объекты, которые могут быть в векторе — SVG.

Ему вообще отдельная благодарность, так как много его хороших книг подарили по ходу мероприятия.

Николай Мациевский

Весь зал выглядел примерно так, почти полный:

Народу было очень много. Ловцевич об HTML5

Кроме этого выступали и Константин Ефимов (о современных технологиях в верстке и их правильном использовании) и Павел Ловцевич (об HTML5). Артемий Ломов рассказал о конкурсе WebHiTech который недавно закончился.

Ожидался Сергей Чикуёнок, но, жаль, кажется просто не хватило времени.

• Официальный сайт мероприятия и твиттер
• Отчет Вячеслава Олиянчука aka miripuni
• Отчет на хабре
• Отчет на WebHiTech
• Фотографии от Михаила Баранова

Видео и слайды докладов думаю скоро появятся на сайте WSTdays.

Было неожиданно много людей и отличная атмосфера. Очень приятно было увидеть кучу знакомых людей из интернета. Кажется теперь в Минске должна начаться большая активность. Приходите на следующие мероприятия организованные сообществом, возможно и в Киеве ;). Организаторам большое спасибо, и Opera как спонсор молодец. А я дурак, потому что не попал на афтепати в бассейне :)

Дальше будет немного теории, можно сразу перейти к примерам внизу.

transition transform

Это CSS3 свойства, которые пока работают только в Safari и Chrome. Еще они будут в следующей версии Firefox и Opera. Но пока нет.

Если вам совсем нечего делать, можно прочитать о них в спецификации про 2d-transforms и про transitions. Это всё конечно draft, но вряд ли что-то изменится.

Вкратце всё обстоит так.

transform — совершает всякие странные эффекты с блоком. По сути похоже на text-transform, просто эффекты более странные.
Например можно писать так:

1. .weirdblock{
2. transform: rotate(45deg) scale(2);
3. }

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

Был маленький и прямой, стал большой и кривой

Пока спецификация неактуальна, для Сафари и Хрома правило нужно писать с префиксом -webkit-. То есть вот так:

1. .weirdblock{
2. -webkit-transform: rotate(45deg) scale(2);
3. }

Вот вобщем и всё, transform уже работает в последнем Фаерфоксе, кстати. Подробнее о нём.

transition — определяет анимацию блока. Используется примерно так:

1. div{
2. opacity:0.5;
3. -webkit-transition: opacity 1s linear; /*opacity - что анимируем,1s - длительность эффекта, linear - плавность эффекта*/
4. }
5. div:hover{
6. opacity:1;
7. }

По наведению курсора, блок просто плавно изменит свою прозрачность за 1 секунду. Это мог бы быть фон, размер и цвет текста и все что угодно. Всё можно анимировать.
А вот так например можно плавно менять цвет ссылки по наведению мыши:

1. a{
2. color:green;
3. -webkit-transition:all 1s linear;
4. }
5. a:hover{
6. color:red;
7. }

А теперь примеры! ;)

Примеры (пока только для Safari и Chrome)

Анимация во всех примерах начинается по наведению мышки. Когда убираете мышку, она проигрывается до исходного состояния.

Первое что пришло в голову, сделать анимированный комикс ;) Вот что получилось, выглядит странно, но он целиком сделан на CSS! Подумать только!

Дальше, еще интересней, я решил анимировать слова. А потом, конечно, это случилось и с буквами. :) Удивительно в этом то, что эту анимацию совершают всего 3-4 строки CSS-кода. (ну и джаваскрипт который предварительно раскидывает буквы по всему экрану, но это его единственная задача)

Если добавить изменение размера, получается забавно. А потом их можно еще и крутить ;), тогда они похожи на муравьёв. Но с двумя лимериками уже начинает тормозить.

По дороге получился смешной неудачный вариант. Буквы тут довольно неуклюжие.

Genn сделал ASCII трибьют, и еще один, не менее клёвый. Еще один прекрасный с отложенной анимацией (-webkit-transition-delay). И синяя лужа.

Может и у вас есть варианты? :)

Если у вас вдруг нет ни Сафари ни Хрома, вот видео пары анимаций:

Opera & Firefox

В последних непубличных версиях этих браузеров эффекты уже работают, и вызываются соответствующими правилами -o-transform, -o-transition, -moz-transform, -moz-transition. Так что теоретически, если вы делаете эффект для сайта, правила можно продублировать с этими префиксами, авось потом заработает ;). Пока что свойства идеально деградируют в других браузерах, просто анимации нет, все происходит мгновенно. А красотами наслаждаемся в Хроме и Сафари.

Мне известно только два, не совсем бесполезных варианта использования этих свойств, вот здесь в правой колонке внизу и вот тут смешно крутятся диски. Но, учитывая скорую поддержку Оперы и Фаерфокса, можно придумать что-то интересное =)

Все примеры

• Комикс на CSS
• Трибьют от Genn и второй, а также суперкрутой третий, и ошеломляющий четвертый
• Крутящиеся буквы, буквы которые засасывает и поворачивающиеся буквы, и еще неудачный вариант
• Аналоговые часы с помощью transition

Ваш арт по теме и мнение более чем приветствуется! :)

P.S.: Лимерики взяты из журнала Трамвай,
автор Татьяна Петросян, остальные тут.

Практически, будущее наступило, во всех современных браузерах на данный момент можно вставить нестандартный шрифт на страничку только с помощью CSS. (Firefox 3.5+, Chrome 3.0+, Safari 3.1+, Opera 10+, IE 5+)

Шрифты вообще

Способов за годы веб-разработки придумано множество. И SIFR (шрифты через Flash), которому скоро 5 лет стукнет, и Cufon (шрифты через <canvas>), и всякие другие вариации типа Typeface (там кстати уже можно выделять и копировать!).

Но еще с прошлого тысячелетия самым крутым способом было конечно просто подключить нужный шрифт на страничку, и написать им текст. Сначала это сделали в Netscape, потом в IE 4.0. А теперь это в грядущем CSS3. По спецификации это принято делать так:

1. @font-face {
2. font-family: Parampampam;
3. src: url(parampampam.ttf);
4. }

И затем использовать это:

1. p { font-family: Parampampam, serif; }

Именно такой подход на данный момент сработает в Firefox 3.5+, Chrome 3.0+, Safari 3.1+, Opera 10+. То есть практически во всех последних версиях браузеров. Они поддерживают .ttf и .otf файлы.

В IE использование своих шрифтов работает еще с версии 4.0. Но, видимо, споткнувшись еще тогда на лицензировании (или по своим иррациональным причинам), они решили создать свой формат для подключаемых файлов Embedded OpenType (.eot). Который и является средоточием геморроя в этом шрифтовом вопросе.
В любом случае, подключение там работает примерно также:

1. @font-face {
2. font-family: Parampampam;
3. src: url(parampampam.eot);
4. }

На данном этапе очевидно, если создать этот загадочный .eot файл, то всё будет великолепно, и практически все современные браузеры отобразят наш шрифт.

Как создать EOT

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

Но буквально за последний месяц появилось еще два варианта, которые нас и спасут.

Вариант 1: FontForge+ttf2eot

Появился отличный онлайн сервис ttf2eot для конвертации. Но, если в него просто засунуть первый попавшийся TTF файл, получившийся EOT не будет работать в IE. Чтобы он работал, нужно предварительно почистить атрибуты шрифта. Для этого понадобится FontForge.

Если открыть шрифт в FontForge, мы получим примерно такое окошко:

FontForge

Затем нам нужно будет открыть окно с «Font Info→TTF Names» и удалить все записи отсюда, красные не удалятся, ну и ладно:

Это окошко находится в меню Element>Font Info

Можно посмотреть как это разжевано в скринкасте.

После чего просто сохраняем шрифт (File→Generate Fonts) и скармливаем его сервису ttf2eot. Результирующий файл будет работать в IE.
В скринкасте кстати, сказано, что надо удалить все атрибуты, и добавить несколько своих. Я просто удалял все, и у меня все работает. Так что можно не заморачиваться.

Вариант 2: fontsquierrel

Однако увидев всю эту мороку из предыдущего варианта, люди ее автоматизировали.
Это просто онлайн сервис. Вы загружаете шрифт, он вам генерирует .svg версию шрифта, .eot версию шрифта, и даже WOFF версию (формат для новых Firefox). Вдобавок ко всему, CSS файл с правильным подключением всех этих woff-eot-svg-otf (кошмар какой-то) в @font-face.

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

Как внедрить для всех

На данный момент оптимальным принят следующий код:

1. @font-face {
2. font-family: ‘Graublau Web’;
3. src: url(’GraublauWeb.eot’);
4. src: local(’Graublau Web Regular’), local(’Graublau Web’),
5. url(’GraublauWeb.otf’) format(’opentype’);
6. }

Подробнее почему именно так, можно прочитать здесь. local — означает, что браузер должен проверить есть ли в системе такой шрифт, прежде чем скачивать. Должен, но все равно не везде работает. =(

Еще можно подключать шрифты в формате .svg, тогда они отобразятся даже в iPhone.

А буквально на днях активно продвинулся WOFF, это «сжатый» truetype который пока будет работать только в Firefox 3.6. Просто чтобы веб-разработчикам было нескучно с OTF, TTF, SVG и EOT.

Оптимизация

Во-первых файлы шрифта можно просто gzip’ить. Как показывает опыт, можно ужать в два раза. Что вовсе не так мало, при размере порядка 100 килобайт.

Кроме того, если открыть файл шрифта тем же FontForge, то можно увидеть кучу символов, которые вряд ли будут вами использоваться:

Вся эта бяка, которая обычно никому не нужна, занимает такое же кол-во байт, как и нужные всем буквы

Прямо в этом же FontForge ненужные символы можно удалить:

Выделить с шифтом и сделать Clear

Благодаря удалению только таких символов, файл для шрифта Myriad у меня уменьшился с 96 килобайт, до 40. Соответственно уменьшается и файл .eot.

Лицензия

Не все шрифты можно использовать в @font-face. Просто потому что его же можно будет легко скачать, а он может стоить денег. И хотя на практике вряд ли кого-то будут доставать по этому поводу, для популярных сайтов лучше не рисковать. Уже есть сайты-сборники шрифтов доступных для @font-face. Такой список есть на Webfonts.info, например, и вот еще один отличный ресурс. (Спасибо Илья!) И время от времени на разных других сайтах.

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

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

Ссылки

• Пример на живом проекте и искусственный пример (с WOFF и SVG сгенерированными на Fontsquirrel)
• Becoming a Font Embedding Master — подборка информации о современном font embedding
• Лучший способ использования @font-face на данный момент и оптимизация вставки шрифтов
• Тестирование gzip для шрифтов
• Where to get web fonts — отличная статья о лицензировании шрифтов и будущем этой проблемы
• Про WOFF
• @font-face или назад в будущее
• Внедрение шрифтов — EOT и @font-face
• Тест 16 кириллических шрифтов доступных для использования

Похоже, скоро мы забудем о SIFR и Cufon! Ура!

Америка!

Как-то так:

• Все очень большое (порции еды, проспекты, люди, каньон, американские горки)
• В чайниках не нашел накипи
• Хорошие джинсы могут стоить 10 долларов
• Европа современнее
• В Нью-Йорке в метро в среднем 5% европеоидов
• Красивых девушек почти нет. Вся надежда на латинскую америку и азиаток

Большая часть фото кликается, если что.

LA

Огромные широкие улицы. Жизнь немыслима без машины. Большие пустые пляжи, и нет жилых домов выше 3х этажей. Улицы Лос Анджелеса обычно пусты.

Сразу после заката в Санта Монике

Они почти не некрасивые! Для Америки это огого!

Очень спортивная нация. Манхэттен Бич

LV

Очень дешевые отели, казино в которых так и хочется все проиграть, классные буфеты и крутое фонтанное представление.

Ах! Отличный в Bellagio буфет

Пожалуй, лучшее место в Вегасе

NYC

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

Задираешь голову и почти всегда вот так

Ночной Манхэттен

И утренний ;)

Прощай здоровая еда! Здравствуй Нью-Йорк!

Суббота всё-таки

А вверху все то же

На кондиционеры похоже

Обычная улица, вообще ничего примечательного нет, кроме того, что она в Нью-Йорке

Grand Canyon

Большой Каньон красивый.
Там где стояла наша палатка, паслись дикие олени. И это нормально!

Настоящий олень

Большой Каньон на рассвете

Слева внизу славная речка Колорадо

Закаты популярны

На закате очень красно

Каньон

Мне, разумеется, понравилось. Вернусь. =)

Еще немного фоток.

P.S.: А вот на этих горках (не бойтесь, вы забудете что видели это видео после первых 30 секунд аттракциона) я просто не смог не кричать (мне казалось что только это может меня спасти):

Вот эти парни сейчас начнут падать головой вниз. Понимаете?

Доктайп и новые таги

На самом деле больше ничего и не изменилось. Ну, кроме, соответствующих изменений в CSS блога.
Доктайп не может не радовать, тем что его впервые в жизни можно выучить наизусть (невалидные не предлагать, я приличный верстальщик):

1. <!DOCTYPE html>

Класс, да? =)

В HTML5 ввели несколько структурных тагов, собственно, они — почти единственное, что можно использовать из нового стандарта прямо сейчас. Потому я просто немного переписал HTML для блога, чтобы он стал более понятным.
Самые приятные новые таги будут: <header>,<footer>,<nav>,<article> — говорят сами за себя.

<aside> — вторичный контент, то, что обычно в сайдбаре.

<section> — какой-то смысловой раздел документа.

Собственно переход

Все очень просто, если у меня в коде было:

1. <!‐‐ BEGIN .hentry ‐‐>
2. <div class=’hentry’>
3. content
4. </div>
5. <!‐‐ END .hentry ‐‐>

То стало:

1. <article class=’hentry’>
2. content
3. </article>

И комментарии вобщем излишни. Я и класс-то оставляю только ради микроформатов, но по-хорошему они должны будут понимать и сам таг article.
Таким же образом боковая колонка:

1. <!‐‐ BEGIN .secondary ‐‐>
2. <div class=’secondary’>
3. боковая колонка
4. </div>
5. <!‐‐ END .secondary ‐‐>

превращается в:

1. <aside>
2. боковая колонка
3. </aside>

И если все показать целиком:

Новые таги

Их же можно увидеть если сделать View Source на этой страничке сейчас.
Есть в этом какая-то красота :).

На самом деле оставшиеся классы и айди почти полностью мог бы заменить суперсемантичный атрибут role, но атрибутивные селекторы пока не всем доступны. А было бы красиво:

1. <section role=”maincontent”>

А в CSS:

1. section[role=maincontent] {
2. bla:bla;
3. }

Код почти читается.

Оговорки в использовании

IE по умолчанию не будет давать возможности стилизовать новые таги. Однако, с помощью джаваскрипта его можно заставить (возможно кто-то помнит, как это было с <acronym>):

1. <!‐‐[if IE]>
2. <script>
3. document.createElement(’header’);
4. document.createElement(’footer’);
5. document.createElement(’section’);
6. document.createElement(’aside’);
7. document.createElement(’nav’);
8. document.createElement(’article’);
9. </script>
10. <![endif]‐‐>

Это все новые таги, которые я использовал для блога.

Вторым нюансом является то, что эти элементы во всех браузерах по умолчанию будут инлайновыми. То есть вам придется написать в CSS что-то вроде:

1. header, nav, article, footer,section {
2. display:block;
3. }

С этим можно жить.

Третий и последний нюанс. Некоторые браузеры (Camino, Firefox2) будут некорректно строить DOM c новыми тагами. Чтобы решить этот вопрос, по злой иронии, вам придется отсылать вашу HTML5 страничку с контент-тайпом application/xhtml+xml. Но я голосую за вариант: «Наплевать».

Сладкое

В HTML5 добавили таги <video> и <audio>:

1. <video src=’xxx.yyy’ autoplay controls>
2. <a href=”xxx.yyy”>Download this video (или другой альтернативный контент, если видео на загрузится)</a>
3. </video>

Вот так выглядят сейчас дефолтовые проигрыватели видео в браузерах:

В Сафари, не очень красивые дефолтовые контролы

В Firefox 3.5b

Opera решила выпустить только одну версию своего браузера поддерживающую <video>. Потому чтобы увидеть видео в действии вам понадобится даунгрейдиться до 9.52. Спасибо @pepelsbey из Оперы за разъяснения ;)
Однако, вот так выглядит там проигрывание видео:

В Opera 9.52, на иконку «Пауза» я навел курсор.

Во всех браузерах контролы исчезают когда курсор не на видео.

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

О том как использовать HTML5-видео уже сейчас читайте дальше.

Ссылки

Не стоит расстраиваться что HTML5 еще не стандарт, и получит статус «Proposed recommendation» лишь в 2022 году. Он уже частично поддерживается браузерами, и большие компании начинают с ним играться. Поиграйтесь и вы. ;)
На самом деле войдет в обиход гораздо раньше, не стоит пугаться 22го года.

• HTML5 Editor’s Draft — главная информация что есть на данный момент об HTML5
• HTML5 на YouTube и на сайте компании Apple
• Про использование html5-video уже сейчас
• HTML 5 elements test (и пример странички)
• Structural Tags in HTML5 от Steve Smith
• Поддержка всяких модных фич в браузерах
• Экспериментальный HTML5-валидатор да и обычный уже тоже проверяет HTML5
• Статья про HTML5 на A List Apart
• Готов ли HTML5?

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

Но, с HTML5 снова стало приятно расставлять таги. Всё как в первый раз. :)

Что это и зачем

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

Копирование ссылки на одном из укоротителей ссылок

Копирование кода на dni.ru

Как это делают

Скопировать в буфер в IE можно обычным джаваскриптом:

1. window.clipboardData.setData(’Text’,'Текст который будет в буфере’);

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

1. flash = '<embed src="copy.swf" FlashVars="clipboard='+encodeURIComponent(t)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
2. element.innerHTML = flash;

Ролик запрограммирован так, что при создании сразу копирует свой параметр clipboard пользователю в буфер.
Так это всегда и работало. Но.

Проблема

Однако, осенью 2008 в флэше нашелся эксплойт, благодаря которому злоумышленники могли как угодно использовать буфер обмена пользователя без его ведома (собственно, метод описанный выше и был эксплойтом). Поэтому в Flash 10 было введено ограничение

With Flash Player 10, the System.setClipboard() method may be successfully called only through ActionScript that originates from user interaction.

Потому, на самом деле, вся та куча плагинов для jquery, например, которые вы нагуглите по запросу «jquery copy to clipboard» попросту не работает в 10м Flash плеере.
При этом, они отлично работают в 8 и 9 версиях (что внесло кучу путаницы в разбирательство с ситуацией). Но учитывая что 10й имеет долю больше 50% нет никакого смысла его игнорировать. Копирование в буфер старым способом больше нельзя считать надежным.

Решение

Так как мне в одном из проектов совершенно обязательно надо было реализовать эту фичу. Пришлось использовать единственный на данный момент вариант. Его я сделал реиспользуемым в своих же интересах.
Способ прост: если нельзя скопировать без клика на флэше, значит будем кликать на флэш.
Genn помог с самой простой и гибкой реализацией этой идеи.
Мы создали флэш-кнопку в качестве параметров которой передаются:

• clipboard — текст который нужно скопировать в буфер
• normal — картинка для для дефолтового состояния кнопки
• hover — картинка для mouseover состояния кнопки
• pressed — картинка для нажатого состояния кнопки

hover и pressed можно не задавать, тогда кнопка просто не будет изменяться при клике и наведении курсора. Текст из переменной clipboard копируется в буфер при клике на кнопку.
Для примера взял две такие картинки:

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

И самый простой пример иллюстрирующий применение, там же и другие примеры. Фактически с помощью одного этого ролика можно сделать почти любую нужную кнопку. Для чего я, собственно, это все и затеял =)

Ссылки

• Апдейт флэша в котором запретили копировать в буфер без действий пользователя
• Thanx for not killing the Flash clipboard
• Примеры кнопок (скачать файлы)
• Автоматизированный вариант с mootools
• Способ с джаваскриптом подставляющим поверх кнопок прозрачный флэш-ролик (Спасибо Иван!)
• Пост на mega.genn.org про эти кнопочки

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

Update: Как оказалось этот флэш-метод не работает на Ubuntu c Gnash/swfdec. Однако на этих эмуляторах не работают и никакие другие методы. Спасибо Владимиру за указание на проблему!

Проблема

На сайте понадобился такой элемент. Выглядят они обычно как-то так. Я буду считать что один из его блоков должен быть всегда открыт, но на деле, это не очень важно.
Ну и предполагаем, что по невероятному совпадению на сайте уже есть jquery. Потому что подключать его только ради меню глупо, согласитесь. Но, если очень хочется, то, как всегда, можно.
HTML — обычный dl, в котором dt будут кликаться, а dd раскрываться, вот такой:

1. <dl>
2. <dt class="b-acc">Заголовок</dt>
3. <dd>
4. Контент
5. </dd>
6. …

И все видимые блоки имеют фиксированную высоту 150px.

#1: Своими силами

Сделать такой эффект своими силами вроде бы совсем несложно. Всего-то нужно схлопывать-расхлопывать два блока одновременно.

1. $(”.b-acc”).click(function(){
2. if($(this).hasClass(’b-acc-active’)) {
3. // сделать что-то если блок уже открыт
4. }
5. else{
6. $(”dd:visible”).slideUp();// закрыть «видимый» блок
7. $(this).next().slideDown();// открыть новый блок
8. // и переключить класс b-acc-active
9. …
10. }
11. return;
12. });

Можно посмотреть в работе. На первый взгляд все отлично.
Однако, если присмотреться, во время анимаций нижняя граница аккордеона скачет. В некоторых проектах на это и можно закрыть глаза, но когда под аккордеоном куча контента, который будет прыгать на 1-2 пикселя, это очень неприятно.
Пришлось искать решение.

#2: Плагин

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

Я сделал простой пример работы плагина. Нижняя кромка больше не прыгает.
Однако добавилось 8 Кбайтов плагина.

#3: Улучшенный вариант

Но так хотелось все оставить простым, так не хотелось подключать кучу лишнего кода, который, я знал, никому на сайте уже не понадобится. И я решил раскопать проблему, почему же нижняя граница дергается, и как это все исправить.
В конце концов оказалось, что функции slideUp и slideDown меняют высоту блоков не по целым значениям. То есть, в процессе анимации высоте блока присваиваются значения вроде 2.157305232px. При этом, округление в браузерах работает очень по-разному, что и приводило к «вибрации» нижней кромки аккордеона.

Наконец забравшись в недра плагина, я нашел решение, которое также познакомило меня с малоизвестными возможностями jquery.
Идея примерно такая: мы начинаем «схлопывать» видимый блок, при этом, на каждом шаге анимации, рассчитывать высоту расхлопываемого блока так, чтобы сумма их оставалась константой. То есть, если на каком-то шаге высота закрываемого 50 пикселей, то высота открываемого будет 100 (в сумме 150px).

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

1. toShow = $(this).next();
2. toHide = $(”.accordion dd:visible”);
3.  
4. staticheight = toHide.height(); //определить высоту блоков, 150px
5. toShow.css({ height: 0,display: ‘block’ }); // открываемый делаем “видимым” с высотой 0, теперь он готов к анимации
6. toHide.animate({height:”hide”},{ // начинаем скрывать видимый
7. step: function(now) { // на каждом шаге выполняем, now - значение height в каждый момент
8. var current = staticheight - now; // собственно рассчет
9. if ($.browser.msie || $.browser.opera || $.browser.safari) { // все округляют по-своему
10. current = Math.ceil(current);
11. }
12. toShow.height(current); // присваиваем высоту
13. },
14. duration: 500
15. });

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

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

В конце

Все это далеко не rocket science, но мои долгие попытки найти легкое решение этой проблемы приводили только к плагину. Который я, ну никак не хотел подключать. Потому надеюсь кому-то это сэкономит усилия и код. И буду рад услышать ваше мнение об этом.

Разумеется, только ради аккордеона не стоит подключать jquery, но, обычно, сайты с такими навороченными меню содержат еще кучу всяких анимаций и действий. И потому, в результате, все равно удобнее использовать фреймворк для разработки.

Ссылки

• Плагин для jquery
• Ссылку на документацию step, найти не удалось, был бы благодарен, если кто-то сталкивался
• Пример с плагином
• Пример своими силами
• Пример своими силами, с зафиксированной нижней кромкой

Вадим Макишвили и IntelliJ IDEA

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

Вадим Макишвили об IntelliJ IDEA

Дальше речь пошла о настройке и фичах IntelliJ IDEA. Похоже большая часть сервисов Яндекса написана именно в нем.

Редактор предназначался для Java, но в нем оказалось так много вкусных фич для вёрстки, что никто не устоял. Если вкратце, то, что особенно понравилось мне: удобная валидация, возможность добавления своих DTD для валидации, продвинутый автокомплит, удобство организации проектов и интеграция с SVN.

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

IntelliJ IDEA платный, но если скачивать бета-версии, которые почти не падают, можно пользоваться им бесплатно.

Подробнее об IntelliJ IDEA в блоге Вадима Макишвили

Наталья Макишвили и вёрстка под мобильные телефоны

Именно телефоны, а не ПДА, КПК и т д. Доклад про смартфоны будет следующим, как заявила Наталья.

Милый курьез, в докладе:

Вопрос из зала: -А как вы тестируете? У вас что, 50 мобильных там лежит что ли?!
Наталья со смехом: -Нет-нет, ну что вы, конечно не 50… Всего лишь 30.

Всего-то 24 на фото :-P

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

Первое впечатление было конечно, что вообще ничего нельзя и лучше писать все в HTML-стиле 90х. Но в конце сказали что у Яндекса получается прятать все хаки в CSS, и отдавать всем мобильным один HTML. Что уже вобщем оглушительный успех, учитывая всякие такие штуки:

Русский италик не везде есть

И еще пара забавных слайдов которыми со мной любезно поделилась Наталья:

Так работает фон

И, да, часто нельзя менять размер-семейство шрифта

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

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

Занимательные факты: за прошедший год мобильная аудитория Яндекса выросла в 5 раз, айфоны составляют 2% от мобильной аудитории.

Любопытно, что самым популярным мобильным с которым ходят на Яндекс оказалась Nokia 6300. Такая же как у верстальщицы мобильных версий, как выяснилось. И почти такая же, как была у меня. ;)

Виталий Харисов про CSS Framework

Этот фреймворк не похож на другие, ибо в его основе лежит не «набор полезных CSS правил которые сэкономят вам время», а «идея упорядочивания CSS для проектов с неограниченным ростом». Звучит сложно, но на самом деле это просто формализированный ОО CSS. Который в той или иной мере применяют многие опытные верстуны. Но, на этот раз, правила установлены четко, и это работает для проектов Яндекса.

«ИЕ недобраузер, если это вообще браузер»

Фреймворк является логическим расширением старой идеи Виталия о независимых блоках. Но теперь кроме правил CSS-кода включает в себя правила упорядочивания CSS-файлов.

Идея, я считаю, очень сильная. Часть этого фреймворка, решающая типовые проблемы: вроде круглых уголков, и PNG прозрачности, была выложена Виталием в онлайн. И кто хочет, может ее поизучать. Фактически, живой кусочек будущей вёрстки Яндекса, без лишнего кода (конкретного дизайна страниц яндекса).

Не пугайтесь кол-ва CSS-файлов, для продакшн версии сайта они сливаются в один.
Можете сравнить например файл «до деплоймента» и в «боевом виде». Они абсолютно эквивалентны. Но первый используется только при разработке.

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

Было и несколько относительно свежих идей:

Таким образом, запрос к серверу только один. Идеей с Виталием поделился Алексей Тен.

Кешируемый expression, уже не раз упоминали, не лишне.

Вспоминали и про таблицы.

Фёдор Голубев про Яндекс.Карты

Наконец появился так называемый Static API, с помощью которого вы можете просто поставить точку на карте, и вставить себе в сайт статическую картинку которая будет показывать эту точку. То, что я уже десяток раз успел сделать вручную ;).
Наконец-то это можно сделать вот тут:

Неизвестный смельчак перенёс в этой точке годы кормления манной кашей

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

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

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

Как они сами говорят, если бы дело было только в картах, то мы фактически создали себе конкурентов своим же API.

Евгения Фирсова про деплоймент и Вадим Макеев про Паровоз

Евгения руководит группой верстальщиков для проекта Яндекс.Деньги. Информации в докладе было просто адски много, но не про меня. Потому под конец дня ничего не улеглось в голове. Последние два года я удалился от сервисов массового обслуживания, и уже стал забывать времена стресс-апдейтов в ukr.net. Так что эту информацию лучше читайте в других отчетах, или в официальном.

Вадим, еще раз клево рассказал о всяких трюках с Photoshop’ом чтобы упростить жизнь верстальщикам. Прелюдно дал слово опубликовать статью с полным текстом доклада у себя в блоге. Ждем ;).

Вадим и Кнопка

Ссылки

• Презентации с субботника
• Фотоальбом субботника и еще один фотоотчет
• Другие отчеты
• Развернутый отличный отчет absolvo
• Короткое впечатление Андрея Мальцева
• Отзыв tachisis
• Отзыв от miripiruni

Отлично!

Спасибо Яндексу, спасибо его докладчикам. Клевый вышел день ;) Отличное уютное мероприятие. Много-много знакомых хороших людей.

Pssst! такая чисто верстальщицкая однодневная штука была бы интересна кому-то в Киеве? =)

В хронологическом порядке

• Как найти баг в вёрстке — самый простой и надежный способ обнаружить ошибку в верстке
• Envision, 14-15 января, Прага — отчет о конференции для дизайнеров, организатором был Microsoft, основными темами: будущее дизайна, инструменты дизайнеров
• Успеть всё или управление временем — мой перевод статьи Кейт Робинсон о том, как экономить время в повседневной айти-жизни
• Barcamp, 8-10 февраля, Рига — самое интересное с первого латвийского баркемпа
• Perl мова, 23 февраля, Киев — отчет о перловой конференции проведенной в Киеве
• 5 инструментов — несколько приложений без которых я не могу жить, а также чужие списки
• Миямото Мусаси и вёрстка — параллели между учением одного из знаменитейших японских воинов и бытом фрилансера-верстальщика
• Проблема со списками в IE — описание и решение стандартного бага со списками в ИЕ
• UA WEB 2008 состоялся! — отчет о первой конференции веб-разработчиков которую я организовал
• CSS print framework — безжалостная эксплуатация термина framework для некоторых советов по стилям для печати
• РИТ 2008, 14-15 апреля, Москва — фото, выступления
• От идеи к действию: что мешает? — мои мысли о том как перестать собираться что-то сделать, и начать это делать
• 5 советов верстальщику — мои, и не только мои советы верстальщикам, эстафета получилась большой и интересной.
• Интересное о мобильном интернете — некоторые знания вынесенные из конкурса на лучшую статью о мобильном интернет.
• Круглые уголки, интересные варианты — несколько подсмотренных техник для круглых уголков
• Какие-то сложные игры c флоатами — по-другому и правда не скажешь. Необычный clear’инг
• Адаптивные блоки — несколько способов адаптировать кол-во отображаемых в строку элементов в зависимости от размера экрана
• Применение clip для PNG в ИЕ — эмуляция свойства background-position для полупрозрачных PNG-картинок в ИЕ
• Альфа-каналы в PNG-8 — пост-напоминание, они (каналы) есть. Полупрозрачные картинки из 256 цветов
• Håkon Wium Lie, CSS и educamp — приезд одного из создателей CSS в Киев, видео, информация и фото
• Internet Explorer и z-index — описание одного распространенного и вредного бага в ИЕ
• Clienttech, 15-16 декабря, Москва — отчет о конференции посвященной клиентским технологиям

В прошлом

• Лучшее за 2005
• Лучшее за 2006
• Лучшее за 2007

Спасибо всем кто читал, надеюсь вам нравится.
С наступающим всех! ;)

Баги в вёрстке и печатные версии

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

Один из багов.
Тень профессионала (слева внизу) уже упала на его дрожащий от страха код

Вряд ли там кто-то что-то разглядит, но ведь классно же фотки оформлены на блоге?

Медицинская тема в дебаггинге

Михаил Баранов поделился секретами прикольных штук для печатных версий, и сетовал на то как мало нынче версий для печати. Даже среди лидеров недавнего конкурса webhitech. Не забывайте о печатных версиях ;)

base64 в массы

Николай Мациевский рассказал об очередной клевой технологии оптимизации загрузки сайтов. На этот раз ему удалось сэмулировать объединение всех CSS-картинок сайта в «в одну». Делается это с помощью base64-представления картинок для всех браузеров, и технологии mhtml для IE. Все отлично работает, есть только пара нюансов связанных с отключенным джаваскрипт и «плохо» (никак) не работающим mhtml в ИЕ7 под вистой.

Недостатки mhtml

Живой автор книги!

Вживую с алгоритмом сжатия можно ознакомиться на открытом Николаем вместе с Русланом Синицким сервисе Data URI [CSS] Sprites. Попробуйте сжать свой сайт ;-).
Николай, также рассказывал о своей книге, которую можно будет купить в начале 2009-го. Очень насыщенная практической информацией, кстати.

Влияет ли вёрстка на анимацию в браузере

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

Вкратце ситуация такова: у нас есть стандартная страничка, колонки, хедер. На ней анимируется группы элементов. Сложность кода самой странички меняется, для тестов.

В первом тесте сравнивались анимации (fps) когда блоки были relative и absolute. Почти везде оказалось одинаково, но в операх абсолюты сработали быстрее.

Во втором тесте страничку усложнили глубоким DOM-деревом, и сравнивали скорость анимации с неглубоким. Safari, Chrome и Опера оказались к нему чувствительны:

Наконец, как вела себя анимация в которой участвовала картинка растянутая на 1 пиксель. (это когда ее размер 100×100, а мы в коде явно указываем 100×101). Почти во всех браузерах анимация этой картинки сильно замедлилась:

Тестов было гораздо больше, и в конце много советов. Из тех которые стоит повторить: верстайте обязательно с учетом будущих анимаций. Используйте alphaimageloader не только для прозрачных PNG, но и для повышения производительности ИЕ при работе с обычными картинками.
Так же, в некоторых случаях, в анимациях лучше использовать настоящие картинки (img) а не background-image.

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

Верстка для iPhone

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

Немного подоптимизировал свой блог, было так:

Так было, просто уменьшенный сайт

После совсем простой оптимизации (немножко джаваскрипта и отдельный CSS)

Так стало, слегка оптимизированная версия

Мелочь, а приятно. В презентации есть нос Геннадия, кусочки кода и несколько полезных линков, для более глубокого изучения.

Диденко про IE8

Доклад вышел не совсем технологический, хотя и код показывали. В основном разговор пошел о новых фичах в ИЕ8, о слайсах. Их уже внедрили основные игроки российского рынка afisha.ru, yandex, gizmeteo, rutube и другие. Чем не преминул похвастаться Пётр. Слайсы, фактически, одно из применений микроформатов. Достаточно добавить определенные классы:

1. <div class="hslice" id="my-first-web-slice">
2. <p class="entry-title">Название слайса</p>
3. <div class="entry-content">
4. …например погода в Киеве…
5. </div>
6. </div>

И эта область будет подсвечиваться при наведении в ИЕ8, и можно будет следить за обновлениями именно в этом кусочке HTML.
В результате погоду можно смотреть примерно так:

Слайс для gizmeteo

Напомнили также о поддержке некоторых вещей из HTML5, и событий onoffline-ononline.

В конце Петру Диденко задали забавный технологический вопрос, который сам по себе прозвучал как шутка:

Будет ли в IE8 Дом 2?

Конференция вышла интересной, и в чем-то, уютной. Хотя народу в этот раз было не так много как раньше, всё объяснили этой штукой на букву «К» о которой все говорят.

P.S.: за часть фото (те на которых что-то видно) спасибо Михаилу Баранову!