CSSing – Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.
Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.
2017-07-16T00:00:00Z
https://cssing.org.ua/
Yuri Artiukh
akella.a@gmail.com
Displacement с помощью Pixi
2017-07-16T00:00:00Z
https://cssing.org.ua/2017/07/16/displacement-pixi-svg/
<p>Стрим номер 7 и Displacement на SVG и Canvas, <a href="https://cdn.rawgit.com/akella/distort/64e6d960/index.html">результат</a>.</p>
<div class="img">
<img src="https://cssing.org.ua/images/distort.gif" width="500" />
<span>Анимация</span>
</div>
<div class="img">
<div><iframe width="560" height="315" src="https://www.youtube.com/embed/RTYJ1fmYZ3g" frameborder="0" allowfullscreen=""></iframe></div>
</div>
Летающие треугольники и шестой стрим
2017-07-10T00:00:00Z
https://cssing.org.ua/2017/07/10/flying-triangles/
<p>Стрим номер 6 и летающие треугольники, <a href="https://cdn.rawgit.com/akella/MovingTriangles/ef80b643/build/page.html">пример того что делаю в видео</a>.</p>
<div class="img">
<img src="https://cssing.org.ua/images/triangle.gif" width="500" />
<span>Анимация</span>
</div>
<div class="img">
<div><iframe width="560" height="315" src="https://www.youtube.com/embed/LNSvO-jJhKg" frameborder="0" allowfullscreen=""></iframe></div>
</div>
Fragment shaders и стрим #5
2017-07-03T00:00:00Z
https://cssing.org.ua/2017/07/03/fragment-shaders-%D0%B8-%D1%81%D1%82%D1%80%D0%B8%D0%BC-5/
<p>Пятый стрим и космические Фрагмент Шейдеры, <a href="http://cssing.org.ua/shaders">пример того что делаю в видео</a>.</p>
<div class="img">
<div><iframe width="560" height="315" src="https://www.youtube.com/embed/YEYmYI7ZpQc" frameborder="0" allowfullscreen=""></iframe></div>
</div>
Простой лендинг, GSAP, и немного User Timing API
2017-06-26T00:00:00Z
https://cssing.org.ua/2017/06/26/simple-landing-gsap/
<p>Четвертый стрим и простой лендинг с анимациями, <a href="https://github.com/akella/space">результат в репозитории</a>.</p>
<div class="img">
<div><iframe width="560" height="315" src="https://www.youtube.com/embed/b8P-6DDKU_c" frameborder="0" allowfullscreen=""></iframe></div>
</div>
Желе эффект в канвасе
2017-06-18T00:00:00Z
https://cssing.org.ua/2017/06/18/canvas-jello/
<p>Третий стрим и создание <a href="http://cssing.org.ua/jela/jela.html">желе эффекта в canvas</a>, <a href="https://github.com/akella/balls">результат в репозитории</a>.</p>
<div class="img">
<div><iframe width="560" height="315" src="https://www.youtube.com/embed/XqB_Ulfpd0w" frameborder="0" allowfullscreen=""></iframe></div>
<p>Тут больше JS+Math</p>
</div>
Верстка адаптивного макета за час
2017-06-11T00:00:00Z
https://cssing.org.ua/2017/06/11/live-coding-responsive-mockup/
<p>Второй стрим и верстка адаптивного макета с нуля на чистую голову, <a href="https://github.com/akella/miami">результат в репозитории</a>.</p>
<div class="img">
<div><iframe width="560" height="315" src="https://www.youtube.com/embed/mLVBoH5Dwv0" frameborder="0" allowfullscreen=""></iframe></div>
<p>План верстки в<br /> описании видео</p>
</div>
Первый стрим
2017-06-04T00:00:00Z
https://cssing.org.ua/2017/06/04/stream-n1/
<p>Записал свой первый стрим, всё что делалось <a href="https://github.com/akella/lurity">доступно в репозитории</a>.<br />
Буду благодарен за ваше мнение, и что можно сделать лучше :)</p>
<div class="img">
<div><iframe width="560" height="315" src="https://www.youtube.com/embed/AajoBGoz8TQ" frameborder="0" allowfullscreen=""></iframe></div>
<p>Можно фулскрин</p>
</div>
Слепая доступность
2016-12-26T00:00:00Z
https://cssing.org.ua/2016/12/26/blind-accessibility/
<p>Познакомился с парнем который не видит, но делает сайты.<!--more--></p>
<h3>Мастеркласс Blind Accessibility от Дмитрия Попова</h3>
Вчера побывал на <a href="http://www.frontend-science.com/lab/">мастер-классе незрячего <strong>разработчика</strong></a> Дмитрия Попова, он выступал на последнем <a href="https://wsd.events/2016/11/26/">киевском WSD</a>, и ребята из Frontend-Science организовали отдельный развернутый воркшоп. И это было круто, немного информации, много ответов на вопросы, много реального опыта восприятия сайтов по-другому.
<h3>Что там было</h3>
Во-первых Дмитрий крутой перец.
<h3>Удивительное для лично меня</h3>
Совершенно и искренне перевернуло мой мир веб-разработчика когда Дмитрий Попов в Devtools браузера исправил HTML сайта, для того чтобы он стал более доступным для скринридера.
<p>Подумайте об этом.</p>
<p>И еще немного.</p>
<p>Забавно, что Devtools браузера были свернуты так, что на экране их даже не было видно. Но все получилось. Потому что их и не надо было видеть. Ну да.<br />
О том что Дмитрий абсолютно без проблем отредактировал html страничку в notepad, наверное даже лишне говорить. Но его родной редактор в котором он пишет код: Nodepad++, как он сказал.</p>
<p class="img"><img width="500" src="https://cssing.org.ua/images/a.jpg" alt="" /><span>Тестируем разные сайты на доступность, под рукой у Дмитрия его "шпаргалки" набранные шрифтом Брайля</span></p>
<p>Во-вторых поделюсь самыми главными мыслями, которые, надеюсь, помогут вам делать более доступные сайты.</p>
<h3>Основное</h3>
<ul>
<li>Вы никогда не узнаете кто использует ваш сайт.</li>
<li>Сделать сайт доступным, несложно, обычно они почти все доступны из коробки. Но досадные ошибки разработчиков в мелочах, или их легкомысленность могут легко сделать сервис недоступным для других людей.</li>
<li>Чтобы сделать сайт доступным обычно не нужно ничего переделывать. Лишь добавить немного смысла в код.</li>
<li>Атрибут lang значит много, и если неверно задан доставляет много неудобств. Лучше не задавать никакой, чем неверный.</li>
</ul>
<p>И несколько более конкретных примеров.</p>
<h3>Кнопки-активные элементы</h3>
<strong>90% проблем</strong> при доступности сайтов возникает из-за того что активные элементы сделаны не кнопкой и не ссылкой. Если кнопка сделана как <code><div></code> то читалка не воспринимает его как активный элемент, и не помещает фокус на него при проходе страницы.
<p>Чтобы решить эту проблему — просто используйте <code><button></code> или ссылку.</p>
<p>На худой конец используйте aria-label и <a href="https://www.w3.org/TR/wai-aria/roles">role</a> (<code>role="button"</code>, например). Тогда читалка поставит фокус на этот элемент, и подскажет что он активный.</p>
<p>Например такая проблема есть на сайте <a href="http://zakaz.ua/">Zakaz.ua</a></p>
<p class="img"><img width="500" src="https://cssing.org.ua/images/a3.png" alt="" /><span>Кнопка сделана ссылкой без href, и читалка не воспринимает ее как управляющий элемент</span></p>
<h3>Навигация по заголовкам</h3>
Оказывается очень удобно ходить по странице используя ее заголовки. На большинстве сайтов с этим все отлично, но на удивление на livejournal, заголовок статьи не является h1-h6 и тяжело найти начало текста. Вот например <a href="http://masterok.livejournal.com/3309231.html">подобная тема в живом журнале</a>
<h3>Отсылка к цветовой информации</h3>
Речь о всяких "Зеленые места свободны", это, причем распространяется не только на тех кто не видит, но и на тех кто видит цвета по-другому, а таких людей очень немало. Стоит дублировать эту информацию альтернативным способом.
<p>Например, Яндекс Карты, показывая пробки, дублируют информацию о пробке(это красная заливка) плотностью стрелочек на дороге. Я и не задумывался зачем это, пока Сергей Пузанков не рассказал.</p>
<p class="img"><img width="500" src="https://cssing.org.ua/images/a1.png" alt="" /><span>Обратите внимание на длину стрелочек там где пробка и где её нет</span></p>
<h3>Атрибут lang</h3>
Когда он задан неверно, читалка пытается читать русский текст с английской транскрипцией, и на скорости 400 слов в минуту это ужасно и вообще непонятно. Дмитрий рекомендовал задавать его даже для частей страницы, чтобы читалки экрана правильно произносили слова.
<h3>Не забывать об этом</h3>
Это конечно не полный список, но все это несложно, нужно просто не забывать о том что вашим сайтом будут пользоваться совершенно разные люди. И прекрасно, что и поисковая оптимизация, и семантика кода, и многое другое на самом деле косвенно помогает нам делать сайты более доступными для всех.
<ul>
<li><a href="https://www.w3.org/WAI/intro/aria">Главная страница о доступности в веб-стандартах</a></li>
<li>Нашел случайно статью о том как работают <a href="https://habrahabr.ru/post/262363/">другие незрячие разработчики</a></li>
<li><a href="https://www.facebook.com/frontendscience/posts/2067329360160106">Пара фото с воркшопа</a></li>
<li><a href="http://gov.design/blog/2016/11/08/accessibility.html">Чеклист доступности сайта от разработчиков государственных сайтов в России</a></li>
</ul>
Верстка вживую
2014-03-11T00:00:00Z
https://cssing.org.ua/2014/03/11/coding-live/
<p>Я туплю, опечатываюсь, в видео нет никаких звуков. И оно еще и проигрывается в два раза быстрее чем нужно.<br />
Не знаю зачем вам это смотреть, но если интересно как я сверстал какой-то макет за примерно час, смотрите :)</p>
<div class="img">
<div><iframe width="560" height="315" src="https://www.youtube.com/embed/teEwo5ynLyI" frameborder="0" allowfullscreen=""></iframe></div>
<p>Можно фулскрин</p>
</div>
<!--more-->
<p>Результат: <a href="https://github.com/akella/screencast">github.com/akella/screencast</a>. Я ничего не исправлял кроме того что сделал в видео, хотя естественно макет не попиксельно точный, и могут быть какие-то мелкие неопрятности.</p>
<p>Буду рад комментариям или советам как это делать еще быстрее чем я это делаю сейчас. Я за то чтобы делиться опытом.</p>
<p>Ну и буду рад если кому-то окажется полезным :)</p>
<h3>Использованный мною софт</h3>
<ul>
<li><a href="http://www.alfredapp.com/">Alfred</a></li>
<li><a href="http://colorsnapper.com/">Colorsnapper</a></li>
<li><a href="http://www.sublimetext.com/">Sublime</a></li>
<li><a href="http://hayakubundle.com/">Hayaku</a> и <a href="http://emmet.io/">Emmet</a></li>
<li><a href="http://pnghat.madebysource.com/">PNG Hat</a></li>
<li><a href="http://csshat.com/">CSS Hat</a></li>
<li><a href="http://www.keyboardmaestro.com/main/">Keyboard Maestro</a></li>
<li><a href="http://livereload.com/">Livereload</a></li>
<li><a href="http://www.boastr.net/">BetterTouchTool</a></li>
</ul>
<p>Это наш маленький верстальщицкий флешмоб, если вам интересно:</p>
<ul>
<li><a href="https://www.youtube.com/watch?v=YzivmuO8Vzs">так верстает макет Роберт Харитонов</a> (<a href="http://rhr.me/">http://rhr.me/</a>)</li>
<li><a href="https://www.youtube.com/watch?v=gTiWurgBX2A">а так Вячеслав Ефременко</a> (<a href="http://brainsapiens.com/">http://brainsapiens.com/</a>)</li>
</ul>
Узбекистан
2013-09-10T00:00:00Z
https://cssing.org.ua/2013/09/10/uz/
<p>Случайно оказался в этой стране, набор удивлений и фотографий.</p>
<!--more-->
<p>Сначала странные факты:</p>
<ul>
<li>Почти все машины белые. Белые машины стоят дороже чем небелые. Говорят, потому что черные больше греются. Но всякие крутые перцы ездят на черных.</li>
<li>Существуют "Chevrolet Matiz" и "Chevrolet Nexia", их выпускают прямо в Узбекистане, и вобщем 70% машин это эти две модели.</li>
<li>Несмотря на то что машины делают в Узбекистане, нельзя просто придти в магазин и купить машину. Нужно ждать год-два в очереди.</li>
<li>Чтобы купить машину деньги привозят в коробках, и подсчет занимает час-два.</li>
<li>В стране нет банкоматов. И карточками Visa-Mastercard рассчитаться тоже нельзя.</li>
<li>Зато на рынке можно купить муку или рис за местную кредитку UzKart. Но снять с нее наличные нельзя.</li>
<li>Курс доллара на рынке и в банке отличается в полтора раза.</li>
<li>Из-за отказа от кириллицы "сантехника" теперь на узбекском пишется как Santexnika.</li>
<li>Какой-то американский журнал поставил Узбекистан на 1-е место в мире по коррупции. Это чувствуется.</li>
<li>В 1966 в <a href="http://ru.wikipedia.org/wiki/%D0%A2%D0%B0%D1%88%D0%BA%D0%B5%D0%BD%D1%82%D1%81%D0%BA%D0%BE%D0%B5_%D0%B7%D0%B5%D0%BC%D0%BB%D0%B5%D1%82%D1%80%D1%8F%D1%81%D0%B5%D0%BD%D0%B8%D0%B5">Ташкенте было землетрясение</a>, разрушено 90% зданий. Погибло 8 человек. <strong>8</strong>.</li>
<li>Арбузы и дыни не взвешивают, продают поштучно на глаз.</li>
<li>Торговаться можно про все, даже на вход в государственный музей.</li>
<li>Главный герой в стране сейчас, чьим именем называют улицу Ленина это: Амир Темур, или Тамерлан. Но в Узбекистане используется только имя Амир Темур.</li>
<li>Много действительно древних огромных зданий, 11-16 века, это невероятно.</li>
</ul>
<h3>Фото</h3>
<div class="img"><img src="http://farm8.staticflickr.com/7405/9718076256_0f85123a07_z.jpg" height="427" /><span>Главный продукт страны</span></div>
<div class="img"><img src="http://farm8.staticflickr.com/7360/9714551247_0e2336927c.jpg" height="500" /><span>Глобализация</span></div>
<div class="img"><img src="http://farm8.staticflickr.com/7281/9714840745_109f881156_z.jpg" height="427" /><span>Очень сладкий всё</span></div>
<div class="img"><img src="http://farm6.staticflickr.com/5447/9718071246_84cd644ab7_z.jpg" height="427" /><span>Мирзачульские дыни</span></div>
<div class="img"><img src="http://farm4.staticflickr.com/3677/9714831925_a13bf81ee1_z.jpg" height="427" /><span>Нават (сахар)</span></div>
<div class="img"><img src="http://farm8.staticflickr.com/7401/9718057150_af5cb3e75e_z.jpg" height="427" /><span>Типичная семья</span></div>
<div class="img"><img src="http://farm6.staticflickr.com/5520/9714787053_d2548f9f2b_z.jpg" height="427" /><span>300$, 1000000 сум</span></div>
<div class="img"><img src="http://farm8.staticflickr.com/7421/9718017608_e67fe0260b_z.jpg" /><span>Девушки</span></div>
<div class="img"><img src="http://farm3.staticflickr.com/2815/9717816662_5f2a4715da_z.jpg" /><span>Купол в мавзолее Тамерлана (Амира Темура)</span></div>
<p>Чуть больше <a href="http://www.flickr.com/photos/akella/sets/72157635468872910/">фоток лежит тут</a>.</p>
<h3>В конце</h3>
В Узбекистане очень хорошо, но немного портят все милиции-таможни-государство.
Но фрукты-шашлык-плов-арбуз-дыня-спатьнаулице просто чудесное сочетание :)
Зубчики на CSS
2013-07-31T00:00:00Z
https://cssing.org.ua/2013/07/31/css-teeth/
<p>Внезапно пост! Небольшой странный чисто webkit трюк который вам пригодится разве что чтобы удивить свою девушку верстальщицу.</p>
<!--more-->
<h3>Что будет</h3>
Зззубчики:
<div class="img">
<img src="https://cssing.org.ua/pic/cssmask/0.png" />
<span>Интересный эффект чтобы показать вырезки</span>
</div>
И вот что <a href="https://cssing.org.ua/examples/cssmask">получилось в итоге</a> или то же на <a href="http://cdpn.io/cudBi">codepen</a>.
<h3>Как это сделать</h3>
Будем считать что у нас такой вот HTML:
<ol class="code">
<li><div class="pic"></li>
<li class="tab"><img src="pic.jpg"></li>
<li></div></li>
</ol>
Ничего такого, просто див.
<p>Первое и самое простое, как это можно сделать, вырезать непрозрачную картинку с фоном и зубчиками, и накладывать поверх нашей.<br />
Но тогда станет невозможным такой вариант</p>
<div class="img">
<img src="https://cssing.org.ua/pic/cssmask/1.png" />
<span>Зубчики накладываются друг на друга</span>
</div>
<h3>CSS Маски</h3>
Да, это существует, хотя и работает пока <a href="http://caniuse.com/#search=mask">далеко не везде</a> и не полностью. Но к счастью мой проект только для webkit. Да, да, в этом месте можно завидовать.
<p>Как это работает: мы рисуем картинку (gif, png, svg), важно только что у нее есть прозрачные и не очень пиксели-области.<br />
Потом «накладываем» на блок и получается:</p>
<div class="img">
<img src="https://cssing.org.ua/pic/cssmask/mask.png" />
<span>Как работают маски в css, иллюстрация от <a href="http://genn.org/">genn</a></span>
</div>
Все что было прозрачного в картинке маски - будет полностью удалено из результата наложения. Полупрозрачные места, соответственно - будут наполовину прозрачны.
<p>Делается в CSS это как-то так:</p>
<ol class="code">
<li>mask-image: url(mask.png); <small>// можно и svg</small></li>
<li><small>// <a href="http://www.html5rocks.com/en/tutorials/masking/adobe/">или так</a>:</small></li>
<li>mask-image: url(mask.svg) top left / cover; <small>// можно и svg</small></li>
</ol>
Можно так поступить и в нашем случае, но у нас зубы с двух сторон. Пришлось бы делать обертку и задавать вторую маску второй картинкой. Если бы не чудесное CSS свойство которое я бы может никогда и не использовал.
<h3>-webkit-mask-box-image</h3>
Эта штука называется страшно и непонятно, но суть ее такая же как у <a href="http://css-tricks.com/understanding-border-image/">border-image</a>. Она условно делит картинку на 9 областей, и растягивает их или повторяет, чтобы создать рамку и уголки вокруг блока.
Только нашем случае это не рамка, а маска, вот и вся разница. Вдаваться в теорию не буду, она по ссылке.
<p>А вот такой код сотворит магию:</p>
<ol class="code">
<li>-webkit-mask-box-image: url(mask.png) 0 3 0 3 repeat;</li>
</ol>
При этом вот такая картинка mask.png:
<div class="img">
<img src="https://cssing.org.ua/pic/cssmask/mask4.png" />
<span>увеличенная в стотысячмиллионов раз</span>
</div>
<p>Числа 0 означают что ширина бордера-маски сверху и снизу равна 0, там у нас гладкая картинка. Два других числа это ширины двух зубчиков, по 3 пикселя.</p>
<p>Но и этого оказалось мне мало, ведь теперь уголки у блоков не стыковались, зубчики соседних элементов не могли войти друг в друга и образовать цельный блок.</p>
<div class="img">
<img src="https://cssing.org.ua/pic/cssmask/4.png" />
<span>Нестыковка</span>
</div>
Потому я перерисовал маску в такой вид, сдвинув второй зубец:
<div class="img">
<img src="https://cssing.org.ua/pic/cssmask/mask5.png" />
<span>Вот такая картинка для маски</span>
</div>
Это и стало финальным вариантом.
<h3>Обводка</h3>
Тут все скучно, несмотря на то как красиво выглядят зубчики, ни <code>border</code> ни <code>outline</code> ни <code>box-shadow</code> не обходят всю границу, выглядит это примерно так:
<div class="img">
<img src="https://cssing.org.ua/pic/cssmask/fail.png" />
<span>Бордер и тень остаются квадратными</span>
</div>
<p>Потому пришлось идти дедовским способом известным со времен не работающего в браузерах text-shadow:</p>
<ol class="code">
<li>.pic:before{</li>
<li class="tab">-webkit-mask-box-image: url(mask.png) 0 3 0 3 repeat; <small>такая же маска</small></li>
<li class="tab">position: absolute;</li>
<li class="tab">top: -1px;</li>
<li class="tab">right: -1px;</li>
<li class="tab">left: -1px;</li>
<li class="tab">display: block;</li>
<li class="tab">height: 100%;</li>
<li class="tab">width: 100%;</li>
<li class="tab">padding: 1px; <small>// Это важно, делает высоту блока ровно 100% + 2px</small></li>
<li class="tab">background: yellow;</li>
<li class="tab">z-index: 2;</li>
</ol>
То есть создать псевдоэлемент, точно такой же как эта картинка, с такой же маской, закрасить его каким-то цветом, и растянуть на 1px за пределы блока. Ничего гениального, но в сочетании с маской работает невероятно красиво.
<p>Такая вот маленькая <a href="https://cssing.org.ua/examples/cssmask">приятная штука получилась</a>, надеюсь кому-то пригодится =) А вот <a href="http://cdpn.io/cudBi">codepen</a>, поиграться с ней.<br />
Я до сих пор не могу удивиться больше, понадобилась всего одна миниатюрная картинка для реализации того что, еще несколько лет назад казалось невозможным.</p>
<h3>Еще почитать на тему</h3>
<ul>
<li><a href="https://cssing.org.ua/examples/cssmask/">Финальный результат</a></li>
<li><a href="http://cssing.org.ua/2008/10/01/clip-it-baby/">Пост про clip, там есть фотка красивой модели</a></li>
<li><a href="http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-mask">На developer.apple.com</a></li>
<li><a href="http://css-tricks.com/understanding-border-image/">Как работает border-image</a></li>
<li><a href="http://www.html5rocks.com/en/tutorials/masking/adobe/">Еще разные идиотские маски, с анимацией</a></li>
</ul>
Префиксы, вебкит и вебстандарты
2012-02-14T00:00:00Z
https://cssing.org.ua/2012/02/14/panic/
<p>В верстальщицкой сфере наконец хоть что-то происходит! И я даже не про свой первый пост за полгода! О забавной ситуации с браузерами на базе webkit и всеми остальными.</p>
<!--more-->
<h3>суть проблемы вкратце</h3>
В данный момент некоторые мобильные браузеры теряют аудиторию из-за того, что многие сайты сделаны исключительно под webkit-браузеры (iPhone, iPod, iPad). Чтобы сохранить свою аудиторию они (браузеры) хотят начать «притворяться» webkit и поддерживать -webkit-*** свойства, в частности -webkit-text-size-adjust и какие-нибудь другие.
<p>Кроме этого, и, что я думаю важнее, им придется отдавать такой user agent, чтобы фильтры принимали их за вебкит браузер (deja vu?), несмотря на то, что они им не являются.</p>
<p>Из-за этого многие стандартисты в ужасе. «Интернет катится в ад» и все такое :)</p>
<p>Но мне все это кажется забавным, и это возможность заглянуть в мир стандартов.</p>
<h3>Почему это многих пугает</h3>
Во-первых потому что это как-то философски неправильно. Вот написал я в CSS <code>-webkit-border-radius:10px;</code> а окажется что граница закруглится и в Мозилле. А я, может, не хотел.
<p>А, предположим, я дурак, и я писал всегда только <code>-webkit-border-radius</code> и не добавлял просто <code>border-radius</code> (как это по стандартам должно быть). И сайт был красивый только в iPhone, но никогда в Опере. А потом вдруг Опера начала поддерживать <code>-webkit-border-radius</code>. И все стало красивым и в Опере, зачем мне тогда использовать что-то кроме <code>-webkit-border-radius</code>?</p>
<p>А потом я привыкну и захочу чтобы все свойства -webkit- работали во всех возможных браузерах. И тогда префиксы (которые были временными), останутся в вебе навсегда. И это, конечно, можно считать полным фиаско и самым страшным сном w3c.</p>
<p>Вобщем, это неправильно. Но.</p>
<h3>Почему это не так уж страшно все</h3>
Потому что все они видят только "ОНИ РЕАЛИЗУЮТ ВЕСЬ ВЕБКИТ", а на самом деле один из инициаторов этого всего Тантек Челик (представитель Mozilla, и «автор» IE5 Mac) <a href="http://lists.w3.org/Archives/Public/www-style/2012Feb/0313.html">говорит вот о чем</a>:
<blockquote>
One possible proposal is to only parse other vendors' prefixes in conjunction with parsing unprefixed. e.g. with -webkit-transform. We wouldn't parse that until we also parse transform.
</blockquote>
<blockquote>plinss: You're telling authors to just use webkit prefixes, we'll make it work.
Tantek: No, we're only implementing a <strong>small minimized number</strong> of these.</blockquote>
Никто не собирается сделать вебкит универсальными свойствами, скорее они хотят залатать дыры, пару важных свойств, чтобы их браузеры сейчас хоть как-то отображали iphone-сайты.
<p>Более того, предлагают решить эту проблему только для мобильных, тогда вообще использовать только -webkit- будет ненадежно, и придется писать все свойства рано или поздно.</p>
<blockquote>fantasai: What if -webkit- was implemented only for mobile? That would add
the unreliability factor that Tantek was asking for, because it
would not work on desktop. And that would bias authors to using
unprefixed, which is what we want.</blockquote>
<p>В конце концов все пришли к мнению что от всех префиксов надо избавляться :). Чего и вам советую.</p>
<h3>Реальная статистика свойств</h3>
Чтобы исследовать этот вопрос мозилловцы даже <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=708406">распарсили кучу CSS файлов</a>, чтобы понять насколько велика проблема и какие свойства с префиксами используются. Статистика 30 000 сайтов, и примерно 90 000 CSS файлов.
<p class="img con"><img src="http://i.imgur.com/9lpoO.png" alt="" /><span>Среди прочего, рейтинг использования css-свойств вообще. Width уверенно побеждает.</span></p>
Кстати одни из самых редкоупотребляемых свойств <code>dispaly</code> и <code>heigth</code>, я, периодически, их тоже использую! Yeah!
<p>А вот рейтинг префиксных свойств.</p>
<p class="img con"><img src="http://i.imgur.com/XCR5b.png" alt="" /><span>Скругления и тени побеждают с отрывом</span></p>
Забавно, но ни одному из этих свойств уже год префиксы не нужны. Потому, ну кому какой вред от того что -webkit-border-radius заработает в Mozilla? Вряд ли бы кто-то это вообще заметил.
<p>Все данные которые я обрабатывал <a href="https://bug708406.bugzilla.mozilla.org/attachment.cgi?id=579830">лежат вот тут</a>, можете сами поиграться.</p>
<h3>Кто виноват</h3>
Конечно, все валят вину друг на друга.
<p>Теперь w3c и браузеры говорят что виноват Webkit, который не сабмитит стандарты. Вебкиту, при этом как-то все равно. Другие хвалят Webkit за инновации, но винят во всем стандартистов и лень Webkit.</p>
<p>И в конце концов многие вдруг решили что виноваты разработчики!</p>
<p>Более того, на некоторых популярных блогах можно прочитать даже такую идеологически правильную фигню:</p>
<blockquote>We at Webmonkey hope it’s obvious that building WebKit-only sites is a waste of time.</blockquote>
<p>О, да.<br />
Конечно, по-хорошему надо делать для всех, но говорить что делать сайты только для вебкит - трата времени, перегиб в другую сторону.<br />
Кого из нас когда-то просили сделать сайт для Fennec или Opera Mini?</p>
<p>Хоть код и надо писать правильно, для всех, но спихивать ответственность на разработчиков тут тоже не очень верно. Они делали то, за что им платили деньги.</p>
<p>Я думаю никто не виноват, просто веб стал меняться слишком быстро, и процесс стандартов-реализации не успевает за ним. А тут еще эти префиксы которые уже давно все можно было отменить, но CSS WG не решается это сделать толком. А еще этот вебкит который столько всего наделал нового, и за ним мало кто успел.</p>
<p>Вобщем, виновник этой забавной ситуации, разве что популярность Андроида и Айфона.</p>
<p>А все остальные просто пытаются сохранить свои доли на рынке. На самом деле браузеры ходили этим путем уже много-много-много раз. Достаточно почитать <a href="http://webaim.org/blog/user-agent-string-history/">историю user agent string</a>, чтобы понять что все притворяются всеми, и никто еще не умер. Хотя, порядка это тоже не добавляло.</p>
<p>Такие пироги в нашей веб-стандартной песочнице.</p>
<h3>Почитать об этом же</h3>
<ul>
<li>Update! <a href="http://www.alistapart.com/articles/the-vendor-prefix-predicament-alas-eric-meyer-interviews-tantek-celik/">Интервью в Тантеком о том что они собираются делать с этим в Мозилла</a></li>
<li><a href="http://lists.w3.org/Archives/Public/www-style/2012Feb/0313.html">«Исторические» разговоры браузеров и стандартистов о реализации -webkit- свойств</a></li>
<li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=708406">Исследование префикс-свойств от Мозиллы</a></li>
<li><a href="http://www.glazman.org/weblog/dotclear/index.php?">Мысли на эту же тему от главы CSS Working Group</a></li>
<li><a href="http://www.webmonkey.com/2012/02/webkit-isnt-breaking-the-web-you-are/">Одна из полупанических статей которые меня забавляют</a></li>
<li><a href="http://remysharp.com/2012/02/09/vendor-prefixes-about-to-go-south/">Отличная объективная статья об этом всем от Remy Sharp</a></li>
</ul>
<h3>Что делать?</h3>
Да ничего, верстать по стандартам, и стараться <strong>всегда использовать свойства без префиксов</strong>. Потому что главным результатом этой миниинтрижки, я думаю, будет постепенный отказ от префиксов вообще. Наконец-то.
<p>Буду рад и вашему мнению об этом всем, особенно если оно отличается от моего :)</p>
<p>TL;DR: Webkit популярен, CSS WG медленное и педантичное, разработчики ленивые, Opera-IE-Moz тоже хотят жить, Жизнь прекрасна.</p>
Мастер-классы и конференции!
2011-09-23T00:00:00Z
https://cssing.org.ua/2011/09/23/workshops/
<p>На правах рекламы и все такое.<br />
По стечению обстоятельств я проведу аж 3 мастеркласса в ближайшие пару месяцев, потому если кому-то интересно послушать про верстку в моем исполнении и попить со мной пива, буду рад :) Они повторяют прошлогодний с небольшими апдейтами. А еще! В Киеве Web Standards Days! Подробности под катом.</p>
<!--more-->
<p>Новосибирск — 26 сентября (в рамках <a href="http://sibinetweek.ru/">Сибирской Интернет Недели</a>)</p>
<p>Киев — 8 октября (<a href="http://smartme.com.ua/css-workshop2">план и регистрация тут</a>)</p>
<p>Харьков — 15 октября (<a href="http://www.smartme.com.ua/css-workshop-kharkov/">план и регистрация тут</a>)</p>
<p>Николаев — 29 октября. (<a href="http://www.webni.mk.ua/">план и регистрация</a>).</p>
<p class="note">Это не я устроил себе такие гастроли, оно само, поймите меня правильно, я слишком скромный и ленивый для такого :)</p>
<p>А еще! У нас (в Киеве) будет <a href="http://webstandardsdays.ru/2011/10/22/#register">22 октября Web Standards Days</a>. И мы принимаем заявки от докладчиков, если вы клевый, или знаете что-то клевое о веб-стандартах, или знаете кого-то клевого кто знает что-то клевое про веб-стандарты, немедля ни секунды пишите мне в почту akella.a(wtf)<a href="http://gmail.com/">gmail.com</a>.</p>
CSS1k
2011-07-05T00:00:00Z
https://cssing.org.ua/2011/07/05/css1k/
<p>Мы с <a href="http://mega.genn.org/">genn</a> не выдержали и сделали свою версию для <a href="http://css1k.com/#bbubles">этой галереи</a>.</p>
<!--more-->
<p>Для тех кто не в теме, задача такова: у нас есть фиксированный html, мы к нему можем написать не более 1024 байт CSS кода, без скриптов и картинок, только CSS. Вот какие <a href="http://css1k.com/">красоты получаются у людей</a>.<br />
Не удержались и мы. Однако наш красивый дизайн, примерно такой:</p>
<p class="img"><a href="https://cssing.org.ua/pic/css1k/big.jpg"><img width="450" height="479" src="https://cssing.org.ua/pic/css1k/small.jpg" /></a><span>в итоге занял почти 2 килобайта (О УЖАС!)</span></p>
Аж 1834 байта. После чего я сыграл в игру «challenge accepted» и забыл пообедать.
<p>Рассказать о том что было дальше трудно, лучше приложу скриншот нашего с genn чата:</p>
<p class="img con"><img src="https://cssing.org.ua/pic/css1k/skype.jpg" width="450" height="415" /><span>Очень хорошо видно когда у меня пропал евпаторийский интернет :)</span></p>
Жертвуя красотой дизайна и используя селекторы вроде:
<ol class="code">
<li>header~a{<small>/*...*/</small>}</li>
<li>ul li,[role]>*>*:not(h2),ul li:hover a{<small>/*...*/</small>}</li>
<li>[role]>*+*+*:hover{<small>/*...*/</small>}</li>
</ol>
Мне и Гене таки удалось свести дело к 1000 байт.
Вобщем, это было весело :).
<p>Самое удивительное и любопытное, что я изначально писал сжатый CSS-код, и после того как я начал оптимизировать его, только без жертв дизайна удалось удалить 30% файла. И это не считая пробелов, и не считая упрощения дизайна — исключительно сокращение кода.</p>
<p>Впрочем, каждые сто байт оптимизации казалось что дальше уже некуда :)</p>
<p>В итоге за полдня родились <a href="http://cssing.org.ua/examples/css1k/index.html">Bbubles</a>.<br />
Возможно таки удастся подчистить еще пару десятков байт чтобы добить красоту :)</p>
<p>Буду рад советам, и вашим собственным вариантам дизайна.</p>
<ul>
<li><a href="https://github.com/akella/CSS1K/blob/master/styles/bbubles.css">Итоговый CSS на Github</a></li>
<li><a href="http://cssing.org.ua/examples/css1k/index.html">Живой пример Bbubles</a> (лучше всего в Сафари и Хроме, ну как всегда)</li>
<li><a href="http://mega.genn.org/2011/bbubles/">Отчет в блоге Genn.org</a></li>
</ul>
<p>В завершение, несколько советов тем кто захочет поучаствовать в галерее.</p>
<h3>Не бойтесь если у вас получилось 2kb</h3>
Мы все сильно недооцениваем то насколько наш код можно упростить. ;) Лучше отнеситесь к этому как к сложной задаче и попробуйте решить. Обычно в таких случаях абсолютно неважно добьетесь ли вы 1000 байт, но вы узнаете много нового и получите кайф =)
<h3>Где упрощать?</h3>
<ol>
<li> Группировать длинные свойства. Например, text-decoration или position:absolute стоит собрать в одном месте: <code>div,p,section{position:absolute}</code></li>
<li>Использовать крутые селекторы вместо обычных. Например вместо <code>article section p,article section ol</code> можно написать: <code>[role]>*>*:not(h2)</code>
А вместо <code>section:last-child</code>
<code>[role]>*+*+*</code>
</li>
<li>Вместо px использовать em. Запись 5em короче чем 50px</li>
<li>Короткую запись для цвета. Очевидно <code>#f3f5f8</code> длиннее чем <code>red</code> или <code>#fff</code></li>
<li>А еще, часть свойств из CSS можно просто удалить и ничего не изменится, мы же делаем под современные браузеры.</li>
</ol>
Оптимиизировать свой CSS очень интересно :)
HTML5 читалка для iPhone за сутки
2010-09-30T00:00:00Z
https://cssing.org.ua/2010/09/30/html5-app-in-24h/
<p>Вдохновились вместе с <a href="http://mega.genn.org/">genn.org</a> и за сутки сделали полноценную <a href="http://reader.org.ua/">читалку для айфона</a>, андроида, и всех кто поддерживает html5 чуть лучше утюга. О дизайне <a href="http://mega.genn.org/2010/33-hrs-project/">читайте в блоге у Гены</a>, остальное у меня здесь и сейчас. Все очень просто.</p>
<!--more-->
<p>Реклама, пам-пам:<br />
Пользуясь случаем хочу анонсировать мастер-класс <a href="http://www.smartme.com.ua/speedsite-workshop/">Николая Мациевского об ускорении сайтов</a> (он кстати написал про это две книги, и участвует в W3C), 9 октября в Киеве.</p>
<h3>Зачем оно вообще могло понадобиться?</h3>
Дело в том, что год назад я перепрошил свой айфон на чужом компьютере. И этот бедняга, уроженец Сан-Франциско, и без того залоченный, еще и заглючил. Я больше не смог ставить ничего из AppStore, и использование мной i2reader закончилось. Да, вот такой какой-то глюк с аккаунтами в itunes.
<p>Но, я люблю читать, и любовь эта, словно солнцелюбивое растение пыталась продраться сквозь тьму глюков айфона, к сияющему солнцу знаний, что сулили мне книги.</p>
<p>Я решил сделать читалку на HTML. После исследования этого вопроса, оказалось что меня спасёт HTML5. Стандарт еще не вышел, а уже помог мне прочитать несколько книг! Это для тех кто вечно спрашивает когда же HTML5 станет реальностью. Так вот, правильный ответ &#8212 вчера.</p>
<p>А потом мы c <a href="http://genn.org/">Геной</a> вдохновились и решили сделать проект супербыстро. Хотя идея жила во мне давно. Так и получился этот проект за сутки:</p>
<p class="img con"><a href="http://reader.org.ua/"><img src="http://cssing.org.ua/pic/reader/1.jpg" width="320" height="480" /></a><span>Вот так это выглядит на моем iPhone 3G</span></p>
Сразу оговорюсь, проект конечно же заточен под Webkit, просто потому что у меня айфон, а не что-то там еще с Оперой. И в Хроме и Сафари он выглядит ближе всего к дизайнерскому. Можно конечно заставить его выглядеть везде одинаково, но за сутки я этого не хотел и не мог сделать. Потом, ок.
<p>Формально проект состоит из двух частей: каталога книжек (обычная себе версия сайта под айфон), и собственно книжки, в которой и есть элемент того самого HTML5.</p>
<h3>Каталог</h3>
Обычный сайт, но в разработке столкнулись с интересными моментами.
<p>Так как пикселов на новом экранчике iPhone 4 ровно в 4 раза больше чем в старых. То иконки в формате PNG выглядели достаточно размыто и не очень клёво. Однако, мы перевели их все в SVG (ага, именно поэтому пользователи Фаерфокса не видят иконок вообще) и на новых айфонах они выглядят просто офигительно. Чего и вам советую при разработке сайтов под айфон.</p>
<p class="img"><img src="http://cssing.org.ua/pic/reader/5.png" width="540" height="348" /><span style="display:block;clear:both;">Вверху то, как это выглядит на старых айфонах (почти не видно разницы), а ниже скриншот из iPhone 4. Угадайте где PNG, а где SVG.</span></p>
<p>Кстати, проверить поддерживает ли браузер SVG можно таким образом:</p>
<ol class="code">
<li>if (document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.1")) { </li>
<li class="tab">...а тут например добавить class для body</li>
<li>}</li><li>
</li></ol>
<p>Кроме этого, все градиенты сделаны через CSS, и потому выглядят всегда идеально и меняются достаточно легко.</p>
<h3>Причем тут html5?</h3>
Это вторая часть сервиса.
<p>В проекте используется часть спецификации называемая <a href="http://dev.w3.org/html5/spec/Overview.html#appcache">application cache</a> и local storage (это вместо кук, только чтобы запомнить место последнего чтения книжки). Хорошая новость, что их почти все браузеры поддерживают. В том числе Сафари на iPhone.</p>
<p>Суть примерно такова: мы можем заставить браузер закешировать какие-то картинки и скрипты. То есть, при открытии этой страницы браузер не будет их запрашивать. Более того, если у вас не будет интернета, то браузер все равно откроет эту страницу, и покажет вам закешированную в последний визит копию вместе с картинками и джаваскриптом.</p>
<p>Синтаксис примерно такой:</p>
<ol class="code">
<li><!DOCTYPE HTML></li>
<li><html manifest="reader.manifest"></li>
</ol>
А внутри файла что-то вроде этого:
<ol class="code">
<li>CACHE MANIFEST</li>
<li>js/jquery.js</li>
<li>css/style.css</li>
<li>img/read.png</li>
<li>img/read-gr.png</li>
</ol>
(вообще говоря это точная копия с reader.org.ua)
<p>На самом деле в стандарте есть еще куча наворотов, но они мне не нужны были, вы же можете <a href="http://dev.w3.org/html5/spec/Overview.html#appcache">почитать</a>.</p>
<p>Собственно это я и проделал, я сделал страницу с текстом книги <em>офлайновым приложением</em>.</p>
<p>В результате, открыв лишь однажды страницу с книжкой, она становится вам доступна навсегда, даже когда у вас нет интернета.<br />
Но, доступна в браузере. То бишь чтение бы выглядело как-то так:</p>
<p class="img con"><img src="http://cssing.org.ua/pic/reader/2.jpg" width="320" height="480" /><span>Много пространства занято совершенно не относящимся к чтению интерфейсом</span></p>
<p>Тут на помощь приходят всякие крутые метатеги которые работают только для продуктов Apple:</p>
<ol class="code">
<li><meta name="apple-mobile-web-app-capable" content="yes" /></li>
<li><meta name="apple-mobile-web-app-status-bar-style" content="black" /></li>
</ol>
<a href="http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html">Подробнее о них на сайте apple.com</a>.
<p>В результате, если сохранить этот сайт на ваш Home Screen (в айфоне для этого есть кнопка «+» в сафари). Он превращается в нечто похожее на обычное приложение:</p>
<p class="img con"><img src="http://cssing.org.ua/pic/reader/4.jpg" width="320" height="480" /><span>Здесь у меня сохранено много книг, в 4-й прошивке думаю их логично группировать</span></p>
И после запуска выглядит вот так:
<p class="img con"><img src="http://cssing.org.ua/pic/reader/3.jpg" width="320" height="480" /><span>Максимально используется экран, никаких баров, ничего лишнего. Кроме этого, уже не нужен интернет чтобы читать эту книгу.</span></p>
<p>На этом мы и остановились пока. Нельзя сказать что это приложение должно заменить ваше нативное. (хотя в четвертом айфоне разница по скорости с нативными не заметна вовсе).<br />
Но для меня оно стало спасением, возможно пригодится и кому-то еще, как демонстрация или вдохновение, или для чтения.</p>
<h3>Полезные ссылки</h3>
<ul>
<li><a href="http://reader.org.ua/">reader.org.ua</a></li>
<li><a href="http://mega.genn.org/2010/33-hrs-project/">Пост на genn.org про дизайн интерфейса</a></li>
<li><a href="http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/">HOWTO: Create native-looking iPhone/iPad applications from HTML, CSS and JavaScript</a></li>
<li><a href="http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html%23//apple_ref/doc/uid/TP40007256-CH7-SW1">для девелоперов на apple.com</a></li>
</ul>
<p>Из того что пока не удалось до конца победить или успеть:</p>
<ul>
<li>В каталоге порядка 10 000 книг, но есть дубли и пустышки. Скоро надеюсь залить новую базу.</li>
<li>Настройки для чтения: размер и цвет текста и фона</li>
<li>Если у вас не iPhone 3gs или 4 то может ощутимо тормозить и долго все делать</li>
<li>Все что вызвано предыдущим пунктом, иногда лучше подождать, пока что-то произойдет</li>
<li>Пока только portrait mode. Не придумал как сочетать оба.</li>
<li>Постраничное перелистывание, есть идеи, но это уже сложнее чем 10 часов :)</li>
</ul>
Буду рад мнениям, советам и идеям. Или тому на что это вас может вдохновить.
Из Америк
2010-09-23T00:00:00Z
https://cssing.org.ua/2010/09/23/america/
<p>Опять совершенно случайно съездил на другой конец планеты, впечатления и фото. (осторожно, много фото)</p>
<!--more-->
<h3>DC</h3>
Случайно провел там ночь, сфоткал святую святых и улетел
<p class="img"><img src="http://cssing.org.ua/pic/nica/1.jpg" width="520" height="347" /><span>Washington</span></p>
<h3>LA</h3>
На этот раз запомнился: перуанской и японской кухней, бирманскими врачами, и сальса-вечеринками с живой музыкой.
А еще буфетом в <a href="http://www.caltech.edu/">Caltech</a> (тот самый вуз Шелдона и Леонарда) и <a href="http://www.usc.edu/">USC</a>. Все хорошие девчонки в USC. Калтех обитель ботанов, что и следовало ожидать.
<p class="img"><img src="http://cssing.org.ua/pic/nica/2.jpg" width="520" height="347" /><span>Manhattan beach</span></p>
<h3>Центральная Америка</h3>
Точнее, Никарагуа.
Почему я туда поехал? Потому что ничего не знал о них.
<p>Набор впечатлений:</p>
<ul>
<li>Я видел гуардабарранко.</li>
<li>Самая бедная страна в регионе, четверть страны эмигрировала в Коста-Рику.</li>
<li>Нет кранов с горячей водой. Никому не нужна.</li>
<li>От лихорадки нет ни лекарств ни прививок. Вообще. Можно заболеть если укусит комар. Это почти как грипп. А малярия еще неприятней, и тоже комары.</li>
<li>В пробках мальчики могут жонглировать факелами, потом собирать деньги с машин.</li>
<li>Никто не говорит по-английски. Без испанского делать почти нечего. А испанский звучит круто. </li>
<li>В словах Никарагуа и Манагуа (это столица) — буква «г» не произносится</li>
<li>Половина страны смуглая, а половина мулаты. И эти две части страны почти не сообщаются.</li>
<li>Существует вулканобординг.</li>
<li>Есть еще минимум 10 непохожих ни на что фруктов о которых я не знал. И у каждого десяток сортов. </li>
<li>Есть реклама белорусских тракторов.</li>
<li>В маршрутках и такси играет <a href="http://ru.wikipedia.org/wiki/%D0%91%D0%B0%D1%87%D0%B0%D1%82%D0%B0">бачата</a>, вместо шансона. А на дискотеках все танцуют под сальсу и реггетон. Но никто не танцует, то что в европе называют сальсой.</li>
<li>Теперь я учу испанский.</li>
</ul>
<p class="img" style="display:none"><img src="http://cssing.org.ua/pic/nica/3.jpg" width="520" height="347" /><span>Где-то у входа в хостел</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/nica/4.jpg" width="520" height="347" /><span>Молодежь перед выступ лением</span></p>
Юка, жареное сало, кукурузный лист, капуста перец и стакан с тамариндом. Типичное блюдо для центра Гранады, невкусно. Тамаринд, который коричневый в стакане — очень, очень вкусно.
<p class="img"><img src="http://cssing.org.ua/pic/nica/5.jpg" width="520" height="347" /><span>В центре Гранады, кушал</span></p>
У них почти все церкви такие вот.
<p class="img"><img src="http://cssing.org.ua/pic/nica/7.jpg" width="520" height="780" /><span>Старая церковь</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/nica/8.jpg" width="520" height="347" /><span>Набережная у большого озера</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/nica/9.jpg" width="520" height="347" /><span>Дети</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/nica/11.jpg" width="520" height="347" /><span>Атмосфера</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/nica/12.jpg" width="520" height="780" /><span>Любимый фрукт моей знакомой и (красная) «пера»</span></p>
Действительно, почему бы в фонтан в центре города не напустить черепах.
<p class="img"><img src="http://cssing.org.ua/pic/nica/13.jpg" width="520" height="347" /><span>А в этом фонтане плавали черепахи, центр Масайи, О_о</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/nica/14.jpg" width="520" height="347" /><span>Обычный рынок в Масайе</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/nica/15.jpg" width="520" height="347" /><span>Мальчик</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/nica/18.jpg" width="520" height="347" /><span>Кто-то припарковал лошадь</span></p>
<p>Все нарисовано на стенах от руки, тут я бы обратил внимание на 3д-эффект справа внизу. Не поленились :)</p>
<p class="img"><img src="http://cssing.org.ua/pic/nica/19.jpg" width="520" height="272" /><span>IT-бизнес в Никарагуа</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/nica/20.jpg" width="520" height="347" /><span>Девочка в автобусе</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/nica/21.jpg" width="520" height="347" /><span>Кокос</span></p>
Очень непонятное существо, живет в мокром песке.
<p class="img"><img src="http://cssing.org.ua/pic/nica/23.jpg" width="520" height="780" /><span>Муи-муи</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/nica/24.jpg" width="520" height="780" /><span>А тут есть краб</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/nica/25.jpg" width="520" height="780" /><span>«Автобусы» по Леону</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/nica/27.jpg" width="520" height="347" /><span>Вулкано бордисты</span></p>
Я разогнался на этой фанерке до 70км/час.
<p class="img"><img src="http://cssing.org.ua/pic/nica/28.jpg" width="520" height="780" /><span>Вулкано бординг</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/nica/29.jpg" width="520" height="347" /><span>3 часа ехал 100 километров</span></p>
<p>Чуть больше фоток <a href="http://www.flickr.com/photos/akella/sets/72157624713794333/">можно посмотреть на фликре</a>.</p>
<p>P.S.: Да, если захотите ехать, но не знаете испанского, лучше в Коста-Рику, там говорят по-английски, а в принципе тоже самое.</p>
IE9 и Web Standards Days в Киеве
2010-09-20T00:00:00Z
https://cssing.org.ua/2010/09/20/webstandardsdays-plus-ie9/
<p>Много событий за одну неделю, несколько фото и впечатлений.</p>
<!--more-->
<h3>IE9</h3>
Про него не написал только ленивый, то есть я :) потому я буду краток.
Он в целом хороший, и самое хорошее в нем для меня как разработчика то, что он обновляется часто (я имею ввиду бету и платформ превью).
Как они и <a href="http://cssing.org.ua/2010/04/15/rit-2010/">обещали еще весной</a>, апдейты выходят каждые два месяца.
<p>Компания Microsoft оказала мне честь рассказать о поддержке CSS в ИЕ9, что я с удовольствием и сделал. Презентация включала много примеров, слайды же все равно можно посмотреть, там есть щенок, Дуглас Адамс и look of disapproval.</p>
<div class="img"><div><object id="__sse5215058" width="425" height="355"><param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=index-100916090103-phpapp02&stripped_title=ie9-5215058&userName=akella" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><embed name="__sse5215058" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=index-100916090103-phpapp02&stripped_title=ie9-5215058&userName=akella" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355" /></object></div><p>IE9</p></div>
<p>Из того, что обязательно надо знать, IE9 бета <em>уже</em> поддерживает:</p>
<ul>
<li>border-radius!</li>
<li><a href="http://24ways.org/2009/working-with-rgba-colour">RGBa</a></li>
<li><a href="http://cssing.org.ua/2009/10/24/font-face/">WOFF</a></li>
<li>calc() (например, <code>width:calc(50%-20px)</code>)</li>
<li>multiple backgrounds</li>
<li>Data URI —, в полной мере и без ограничения в 32Кб как в IE8.</li>
<li>SVG (причем проще чем все другие браузеры)</li>
<li>HTML5 видео аудио</li>
</ul>
Ну и аппаратное ускорение которое можно посмотреть на <a href="http://ie.microsoft.com/testdrive/">разных демках вот здесь</a>.
<p class="img"><img src="http://cssing.org.ua/pic/ie9wsd/1.jpg" width="500" height="375" /><span>Сергей Байдачный из Microsoft об IE9</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/ie9wsd/2.jpg" width="500" height="375" /><span>Какой-то парень в белой рубашке</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/ie9wsd/3.jpg" width="500" height="375" /><span>Владимир Белоненко про поддержку SVG и HTML5</span></p>
Презентация Владимира находится онлайн, и <a href="http://html5-ie9.unit.ua/">вот тут её можно посмотреть</a>, рекомендую. Можно даже в IE9.
<p>Еще фото с мероприятия и отчеты:</p>
<ul>
<li><a href="http://cid-4830ae6a133a4559.office.live.com/browse.aspx/IE%209%20launch%20photos?nl=1&uc=150">Фотографии с мероприятия</a></li>
<li><a href="http://www.microsoft.com/ukraine/events/ie9-dev/default.mspx">Страничка мероприятия</a></li>
<li><a href="http://kit1980.ru/blog/2010/09/16/internet-explorer-9-launch-for-developers-kiev/">На kit1980.ru</a></li>
</ul>
<h3><a href="http://webstandardsdays.ru/">Web Standards Days</a></h3>
Летом мне внезапно подумалось что эту серию мероприятий надо наконец довезти до Киева. Благодаря многим хорошим людям, всё получилось.
Как все прошло лучше расскажут участники, я выложу несколько фото :)
<p class="img"><img src="http://cssing.org.ua/pic/ie9wsd/5.jpg" width="500" height="335" /><span>Мациевский перед докладом</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/ie9wsd/6.jpg" width="400" height="598" /><span>Вадим Пацев, дизайнер-разработчик интерфейсов из Яндекса</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/ie9wsd/13.jpg" width="500" height="335" /><span>Андрей Сумин из hh.ua рассказывал о специфике использования веб-стандартов в больших проектах</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/ie9wsd/7.jpg" width="500" height="335" /><span>Люди</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/ie9wsd/8.jpg" width="500" height="335" /><span>Тимофей Бабич из Mozilla</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/ie9wsd/4.jpg" width="500" height="335" /><span>Какие-то чуваки</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/ie9wsd/9.jpg" width="500" height="335" /><span>Мациевский рассказывает о рабочей группе W3C в которой он участвует</span></p>
Очень интересно было узнать, что способы измерения скорости загрузки страницы и многих других параметров будут стандартизированы. И Николай сам является участником <a href="http://www.w3.org/2010/webperf/">рабочей группы W3C</a> занимающейся этой задачей.
Кстати скоро он возможно приедет в Киев с мастер-классом, stay tuned ;-).
<p class="img"><img src="http://cssing.org.ua/pic/ie9wsd/10.jpg" width="500" height="335" /><span>Виталий Рыбалка сделал обзор библиотек и способов разработки</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/ie9wsd/11.jpg" width="400" height="598" /><span>Антон Немцев показал как нам будет хорошо, когда-нибудь :)</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/ie9wsd/12.jpg" width="500" height="333" /><span>Вадим pepelsbey Макеев рассказал об SVG и способах его использования</span></p>
Все фото © Михаил Баранов.
Видео докладов появится на сайте <a href="http://webstandardsdays.ru/">WSD</a> в ближайшие пару недель.
<h3>Credits</h3>
Без Евгения Некоза и Вадима Макеева мероприятие бы не состоялось. Спасибо им большое, и надеюсь мы сделали это не последний раз.
Кроме этого спасибо нашим спонсорам и партнерам Opera, Mozilla Foundation и <a href="http://www.smartme.com.ua/">SmartMe</a>, без них бы тоже мало что получилось.
В целом все прошло гладко, только гостиница подставила нас с интернетом. Больше не допустим.
<p>Будем надеяться мероприятий будет всё больше и они будут всё лучше =).<br />
Буду рад услышать ваши мнения и впечатления, или просто ссылки на фото и отчеты (добавлю в пост).</p>
overflow:hidden
2010-04-26T00:00:00Z
https://cssing.org.ua/2010/04/26/overflow-hidden/
<p>Незаслуженно непопулярный трюк. Я уже писал про <a href="http://cssing.org.ua/2005/07/03/display-table/">display:table</a>. Так вот, это &#8212 лучше. P.S.: оказалось трюк таки известен многим, надеюсь кому-то статья поможет.<!--more--></p>
<h3>Проблема</h3>
Еще пять лет назад я искал решение проблемы: как запретить обтекание float. Подробнее можно читать в <a href="http://cssing.org.ua/2005/07/03/display-table/">старом посте</a> (2005 год, офигеть). Вкратце, мы приводили это:
<p class="img con"><img src="http://cssing.org.ua/pic/overflow/1.png" width="377" height="133" /><span>Картинка-float</span></p>
к такому виду:
<p class="img con"><img src="http://cssing.org.ua/pic/overflow/2.png" width="377" height="149" /><span>Картинка-float + display:table для текста</span></p>
Для этого тексту задавалось свойство display:table. А для IE zoom:1.
<h3>overflow:hidden magic</h3>
Относительно недавно (относительно пяти лет) мы столкнулись с новым способом, оказалось что overflow:hidden может повторить этот эффект, и <a href="http://cssing.org.ua/examples/overflow-hidden/">сделать его даже лучше</a>. Причина обоих трюков, вовсе не глюки браузеров или специфика их отображения. Причина на сайте W3C:
<blockquote>The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same block formatting context as the element itself.
W3C, CSS 2.1</blockquote>
<cite><a href="http://www.w3.org/TR/CSS2/visuren.html#floats">источник</a></cite>
То есть это не хак, а документированное поведение. Всё дело в так называемом «контексте» или «контексте форматирования», такие правила как display и overflow создают этот контекст, и согласно правилам он (созданный контекст) не может пересекаться с флоатами. Что вобщем и происходит. В результате блок занимает все доступное пространство <em>кроме флоата</em>.
<blockquote>Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts.</blockquote>
Как видим контекст можно создавать разными способами.
<p>Важное отличие от display:table — <em>ширина блока</em>, я сделал <a href="http://cssing.org.ua/examples/overflow-hidden/index_text.html">специальный пример</a> чтобы было видно, чем часто был неудобен именно display:table.</p>
<p>Именно это отличие позволяет делать с overflow более сложные вещи чем с display:table.</p>
<p class="img con"><img src="http://cssing.org.ua/pic/overflow/tablehidden.png" width="460" height="307" /><span>Когда мало текста, блок не занимает всю ширину</span></p>
<h3>IE?</h3>
<strong>IE6</strong> — не работает ни display:table ни overflow:hidden. Нужно использовать zoom:1; (или любой hasLayout). В результате эффект идентичен действию overflow в других браузерах.
<p><strong>IE7-8</strong> — overflow:hidden работает также как во всех остальных возможных браузерах.</p>
<p>Резюмируя: можно добавить к overflow:hidden еще zoom:1; и забыть о проблеме.</p>
<h3>Возможные применения</h3>
Самое простое и банальное, вёрстка <a href="http://cssing.org.ua/examples/overflow-hidden/index_pic.html">блоков с текстом и картинкой</a>:
<p class="img con"><img src="http://cssing.org.ua/pic/overflow/2.png" width="377" height="149" /><span>Редкий сайт обходится без такого блока</span></p>
Используя overflow:hidden можно их стилизовать для произвольной ширины картинок.
<p>Чуть более сложный кейс, <a href="http://cssing.org.ua/examples/overflow-hidden/index_input.html">резиновый инпут и кнопка</a>:</p>
<p class="img con"><a href="http://cssing.org.ua/examples/overflow-hidden/"><img src="http://cssing.org.ua/pic/overflow/input.png" width="387" height="39" /><span>Обычное дело на резиновых сайтах</span></a></p>
С подобной проблемой недавно столкнулся Глеб Арестов и <a href="http://friendfeed.com/yodapunk/c1ada988">успешно решил</a> её как раз с помощью этого же свойства.
<p>Более того, можно строить layout страниц. В частности в фреймворке <a href="http://wiki.github.com/stubbornella/oocss/">OOCSS</a> колонки строятся как раз с использованием этого свойства. Примерно так:</p>
<p class="img con"><a href="http://cssing.org.ua/examples/overflow-hidden/index_layout.html"><img src="http://cssing.org.ua/pic/overflow/layout.png" width="456" height="99" /><span>Можно не задавать ширину резиновой колонке</span></a></p>
Конечно, тут минимум два недостатка. Во-первых, порядок контента — средняя колонка должна идти в коде после обоих боковых. Во-вторых, нестабильность при сжатии, когда что-то начинает не помещаться в блоке с overflow:hidden, его самым невероятным образом разрывает на части в IE. min-width мог бы спасти. <a href="http://cssing.org.ua/examples/overflow-hidden/index_layout.html">Использовать</a> осторожно.
<p>Но, помнить о таком мощном приеме стоит.</p>
<h3>Еще</h3>
<ul>
<li><a href="http://www.gunlaug.no/contents/wd_example_01_01.html">Пост Gunlaug</a> про это же поведение</li>
<li><a href="http://cssing.org.ua/2005/07/03/display-table/">Мой пост про display:table</a></li>
<li><a href="http://cssing.org.ua/examples/overflow-hidden/">Мой простой пример</a>, <a href="http://cssing.org.ua/examples/overflow-hidden/index_layout.html">пример трехколоночного сайта</a></li>
<li><a href="http://flack.ru/2008/08/26/semantic-coding-howto-6/">Пост Flack на эту же тему</a></li>
<li><a href="http://habrahabr.ru/blogs/css/48383/">Clear или overflow:hidden — очистка всего потока или создание контекста форматирования?</a></li>
<li><a href="http://habrahabr.ru/blogs/css/48429/">Управление потоком в CSS: создаём контекст форматирования</a></li>
</ul>
Это не CSS3 и далеко не вчерашнее изобретение, но кажется многие недооценивают силу этого простого приема.
<p>Буду рад если поделитесь своим опытом!</p>
РИТ 2010, 12-14 апреля, Москва
2010-04-15T00:00:00Z
https://cssing.org.ua/2010/04/15/rit-2010/
<p>небольшой отчет о <a href="http://www.ritconf.ru/">конференции</a> и интересных докладах<!--more--></p>
<h3>Алекс Могилевский про IE9</h3>
Ключевое слово выступления — HTML5. Именно так, это один из приоритетов нового браузера. Уже работает и видео таг, и SVG, и скоро будет много другое, из того что уже устоялось.
<p>Вторым, и даже более важным приоритетом является скорость. Команда заново переписала джаваскриптовую составляющую браузера, чтобы сделать всё еще более быстрым.<br />
Они даже провели аудит 7000 сайтов, чтобы узнать какие части джаваскрипта используются чаще всего. На первом месте, к слову, оказался <code>indexOf</code> и где-то в десятке getElementById. Они очень серьезно относятся к будущему интернета, веб-приложениям и потому готовят браузер к отрисовке множества элементов на странице.</p>
<p>ИЕ9 будет иметь аппаратное ускорение. Алекс покаал несколько демок, которые работают в ИЕ9 в несколько раз быстрее чем в Фаерфоксе и Хроме (видео и анимация картинок). <a href="http://ie.microsoft.com/testdrive/Performance/01FlyingImages/Default.html">Вот такая демка</a> в IE9 не тормозит даже когда весь экран в иконках.</p>
<p>Могилевский фактически поставил на место наши современные браузеры с их поддержкой CSS3. Вот так к примеру выглядит реализация border-type и border-radius.</p>
<p class="img"><img src="http://farm5.static.flickr.com/4068/4520402671_8178e5e697.jpg" alt="" /><span>Угадайте какой браузер слева</span></p>
Я уже в твиттере высказывался о том какой замечательный шаг они сделали опубликовав <a href="http://blogs.msdn.com/ie/archive/2010/03/19/the-css-corner-about-css-corners.aspx">эту статью.</a> А <a href="http://blogs.msdn.com/ie/">у них в блоге</a> сейчас можно найти еще очень много интересного и практического. Если так пойдет и дальше, у нас может окончательно исчезнуть «враг».
<p>Еще один посыл Могилевского, и компании Microsoft — <em>помогите нам избавиться от IE6</em>. Он рекомендовал не поддерживать его, и не разрабатывать приложения только под него. Сама компания будет продолжать выпускать для него фиксы. Но удалить его насильным апдейтом у пользователей они не могут, очень многие используют приложения которые работают только в IE6.</p>
<p class="img"><img src="http://farm3.static.flickr.com/2725/4521035514_446bb9c729.jpg" alt="" width="500" height="351" /><span>Алекс Могилевский</span></p>
Превью движка нового IE9 <a href="http://ie.microsoft.com/testdrive/">уже можно скачать</a>. Каждые два месяца превью будет обновляться. В частности девелоперская версия уже поддерживает HTML5 video (с кодеком H.264). Про дату релиза нового IE Алекс рассказать не смог, но судя по предыдущим релизам ждать его следует ровно через год, на следующей весенней конференции MIX. IE9 можно будет ставить только на Windows 7 и Vista.
Превью которую можно скачать не содержит интерфейса, потому пока непонятно как он будет выглядеть.
<p>Другим браузерам нужно будет поднапрячься чтобы конкурировать с ИЕ9 в будущем. Вся прошлая репутация Internet Explorer была реабилитирована выступлением Могилевского.<br />
А тут Ольга как будто грозит Алексу «не шали там с IE9!» @©<a href="http://twitter.com/martynov">martynov</a>.</p>
<p class="img"><a href="http://fotki.yandex.ru/users/smart0/view/311226?page=17"><img src="http://img-fotki.yandex.ru/get/4213/smart0.1e/0_4bfba_f0823457_XL" alt="" /></a></p>
Фото Сергея Мартынова.
<h3>Чарльз Невилл, директор по стандартам Опера.</h3>
<p class="img"><img src="http://farm5.static.flickr.com/4009/4521020746_f685efc33e.jpg" width="500" height="333" /><span>Чарльз Невилл</span></p>
Выступление было в основном про то как ведется работа над стандартами и что такое эти стандарты вообще. Невилл начал с метафоры, что стандарты как сосиски, их едят все, но лучше нам не знать как они делаются ;)
<p>Рассказывал про geolocation и проблемы с ним. Оказывается почти все браузеры уже его реализовали, но из-за нерешенных проблем с прайваси он до сих пор не запущен. В частности, что делать с тем что какой-то сайт будет знать географическое положение всех своих пользователей. Это уже гораздо круче чем просто пароль к имейлу ;).</p>
<h3>CSS3 анимации, <a href="http://chikuyonok.ru/">Сергей Чикуёнок</a></h3>
Вкратце рассказал о свойствах transition, animation и transform. После чего поделился некоторыми практическими советами по их применению.
<p>Например, правильным скриптом по определению вендор-префикса:</p>
<p class="img"><img src="http://cssing.org.ua/pic/rit2010/anim.png" alt="" width="480" height="299" /><span>Вендор-префиксы</span></p>
<p>Еще показал отличный способ определения поддержки 3д-трансформаций в браузерах.</p>
<ol class="code">
<li>.foo{</li>
<li class="tab">width:0</li>
<li class="tab">}</li>
<li>@media screen and (-webkit-transform-3d){</li>
<li class="tab">.foo{width:300px}</li>
<li class="tab">}</li>
</ol>
После этого можно проверить ширину блока джаваскриптом, и узнать поддерживает ли браузер 3д-трансформации.
<p>Очень мило, что Опера 9 тоже прочитает правило про 300 пикселей, как будто она поддерживает трансформации. Красивого решения этой проблемы нет, так что Сергей пока решил ее проверкой <code><a href="http://www.howtocreate.co.uk/operaStuff/operaObject.html">window.opera</a></code>.</p>
<p>Замечательность способа в том, что мы фильтруем не браузеры определенных версий, а браузеры поддерживающие то или иное свойство. Метод понятное дело подходит и для других случаев.</p>
<p>Забавно было узнать что если анимировать картинки которые имеют размер больше 2000 на 1000 пикселей, то в начале анимации они будут мигать. Для айфона граничное число 1024 пикселя. Это вроде бы связано с ограничениями на размер текстур в openGL. (?)</p>
<p>Аппаратное ускорение (начиная с Mac OS 10.6) и субпиксельное сглаживание делают анимации в Сафари очень привлекательными.</p>
<p>В конце Могилевский одобрил скрипт по определению свойств, и добавил что transition и animation немного дублируют друг друга и возможно синтаксис этих свойств будет изменен. Так что использовать их нужно с некоторой опаской и обязательно проверять на поддержку <em>анимаций</em>, а не на <em>версий браузеров</em>.</p>
<p>Резюме: если вы делаете приложения под мак или айфон, обязательно нужно использовать для анимаций transition-transform-animation. <a href="http://ritconf.ru/abstracts/438.html">Презентация</a>.</p>
<h3>Десктоп-подобные веб-приложения, Владимир Колесников</h3>
Рассказал о метафоре десктоп приложения, о том что она понятна пользователю даже онлайн, и что таких приложений становится все больше. Взять тот же <a href="http://me.com/">mobile.me</a>
<p class="img"><img src="http://cssing.org.ua/pic/rit2010/uki.png" alt="" width="480" height="276" /><span>Списки писем онлайн и на десктопе</span></p>
<p>Владимир автор <a href="http://ukijs.org/">новой библиотеки для построения десктоп-подобных интерфейсов Uki</a>. Целью было сделать ее простой и быстрой, и это точно получилось. В действии можно посмотреть на примере копии интерфейса <a href="http://ukijs.org/mail/index.html">Mail App</a> которую он сделал за пару дней. <a href="http://blog.ukijs.org/2010/04/08/mail-app-on-the-web/">Вот тут можно почитать подробнее</a>.</p>
<p>Следует упомянуть, что размер всего приложения с картинками и CSS в gzip — <a href="http://ukijs.org/mail/index.html">65 килобайт</a>. А сам фреймворк с картинками и стилями в сжатом виде 35 килобайт.</p>
<p class="img"><img src="http://farm3.static.flickr.com/2719/4521043860_b7c11098fe.jpg" alt="" width="500" height="333" /><span>Владимир Колесников</span></p>
Еще развеял некоторые мифы о таких библиотеках. Например, этот mail app работает отлично в IE6.
<p>Из альтернативных вариантов для построения десктоп-подобных интерфейсов Владимир рекомендовал <a href="http://www.sproutcore.com/">Sproutcore</a> и <a href="http://cappuccino.org/">Capuccino</a>.</p>
<h3>Ошибка. Осознание, анализ, извлечение пользы. Вадим Макишвили</h3>
Очередное великолепное выступление Вадима.
Чтобы вы поняли, приведу короткий разговор в кулуарах:
<blockquote>- Ты же уже был на его выступлении?
- Да, но только один раз.
</blockquote>
<p class="img"><img src="http://farm3.static.flickr.com/2794/4520408171_afa613c344.jpg" width="500" height="333" /><span>Вадим Макишвили</span></p>
Философский взгляд на ошибки, самооценку, работу верстальщика. Сдобренный несколькими реальными и интересными ошибками из опыта вёрстки сервисов Яндекса. Пересказывать бессмысленно, не пропустите если будет возможность ;).
<p>Если конечно его отпустят теперь на конференции, во время выступления звучали признания в любви. А ведь он женат! ;)</p>
<h3>Костыли это кошерно, Павел Кудинов</h3>
Это однозначно один из лучших докладов на конференции рекомендую всем.
<div class="img"><div><object width="400" height="327"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=10922497&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=10922497&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="327" /></object></div><p>Костыли — это кошерно</p></div>
И <a href="http://pavel-kudinov.livejournal.com/69412.html">ссылка на отчет самого Кудинова</a>. Если вы еще сомневаетесь смотреть или нет — перестаньте, смотрите.
<h3>Ещё</h3>
<ul>
<li><a href="http://www.flickr.com/photos/49251913@N05/sets/72157623844369312/">Фото первого дня</a></li>
<li><a href="http://ritconf.ru/">Сайт конференции</a></li>
<li><a href="http://ritconf.ru/abstracts/index.html">Слайды и тезисы</a></li>
<li><a href="http://fotki.yandex.ru/users/smart0/album/97336/">Куча клёвых фотографий от Сергея Мартынова</a></li>
</ul>
К сожалению с третьего дня конференции пришлось уехать, потому слушал не все доклады. Будем ждать видео.
<p>Спасибо организаторам за отличную конференцию.<br />
Очень рад был встретить всех старых знакомых. :)<br />
Буду рад и вашим впечатлениям!</p>
Презентация про CSS3 и HTML5 на них же
2010-03-31T00:00:00Z
https://cssing.org.ua/2010/03/31/html5-css3/
<p>Я показывал ее на недавнем <a href="http://openwebcamp.org.ua/">Openwebcamp</a>. Презентация на CSS3 и HTML5 без джаваскрипта. Как надо работает только в Safari и Хроме, но вы уже привыкли, да?</p>
<!--more-->
<h3>Предыстория</h3>
Началось с того что мне нужно было сделать доклад об использовании новых технологий. Делать его в Powerpoint и потом все время говорить «Ну вы это легко проверите в своём браузере» мне не нравилось, и я решил сделать презентацию целиком на этих эффектах. Вот что получилось.
То что получилось устроить все без Javascript — случайность. Приятная.
<h3>Сразу о поддержке браузеров</h3>
Это всего лишь презентация, и я c самого начала не преследовал цель полной кроссбраузерности. Мне было важно чтобы она работала в моем Сафари. Однако, в Опере и Фаерфоксе она <em>будет</em> работать, просто в некоторых местах коряво, а кое-где очень коряво. В Хроме она работает отлично, но иногда по непонятным мне причинам хром делает что-то вроде «Я устал от твоего CSS3» и опускает руки. Редко.
Вобщем Сафари и Хром наш выбор сегодня.
<h3><a href="http://cssing.org.ua/examples/css3html5/">Презентация</a></h3>
В презентации которую я показывал на конференциях ссылки были скрыты, было видно только их черную границу справа, которая становилась красной при фокусе на ссылке. Однако чтобы можно было смотреть ее в интернете, я сделал ссылки видимыми, <a href="http://cssing.org.ua/examples/css3html5/">кликайте</a>.
<h3>о том как это сделано</h3>
Структура кода примерно такая:
<ol class="code">
<li><body></li>
<li><section id="slide1"></li>
<li class="tab"><h1>CSS3 и HTML5</h1></li>
<li class="tab"><p>Openwebcamp, Киев, 2010</p></li>
<li></section></li>
<li></li>
<li><section id="slide2"></li>
<li>...</li>
</ol>
Каждый <code>section</code> — отдельный слайд. Всем им задан:
<ol class="code">
<li>section{</li>
<li class="tab">position:absolute;</li>
<li class="tab">top:0;left:0;</li>
<li class="tab">height:100%;</li>
<li class="tab">opacity:0;<small>/*по умолчанию все слайды скрыты*/</small></li>
<li class="tab">}</li>
</ol>
То есть они отображены все на одном месте, на весь экран, с прозрачностью 0.
Кроме этого, в файле содержится навигация, просто список ссылок на все эти слайды-<code>section</code>:
<ol class="code">
<li><ul></li>
<li class="tab"><li><a tabindex="100" href="#slide1">slide1</a></li></li>
<li class="tab">...</li>
</ol>
Навигации тоже заданы координаты через position:absolute;. tabindex тут не просто так, позднее станет ясно зачем он мне.
<p>Но как же я переключаю слайды? Это делается с помощью псевдокласса <code><strong>:target</strong></code>.</p>
<p>Этот селектор указывает на блоки, которые являются «адресом» внутренней ссылки. То есть при blabla.html#slide21, для блока у которого id="slide21" сработает <code>:target</code>.</p>
<p>Результат в CSS выглядит так:</p>
<ol class="code">
<li>section:target{</li>
<li class="tab">opacity:1;</li>
<li class="tab">}</li>
</ol>
То есть при клике на любую ссылку из навигации, слайд на который она ссылается станет видимым.
Известное <a href="http://cssing.org.ua/2009/11/04/css-animation/">свойство transition</a> позволит нам сделать это плавно:
<ol class="code">
<li>section{</li>
<li class="tab">transition:all 1s linear;</li>
<li class="tab">}</li>
</ol>
Таким образом вместо того чтобы отобразить слайд моментально, он будет плавно появляться.
Более того, я добавил еще пару эффектов, такой например:
<ol class="code">
<li>.effect-slideleft{
</li><li class="tab">left:-100%;</li>
<li class="tab">opacity:1;</li>
<li class="tab">transition:all 1s ease-in-out;</li>
<li class="tab">}</li>
</ol>
Это значит по умолчанию слайд будет смещен влево от экрана, а при клике плавно изменит положение. (opacity:1 значит что прозрачность не будет анимироваться).
А вот эффект кручения-исчезновения в центр:
<ol class="code">
<li>.effect-rotate{</li>
<li class="tab">transform:rotate(360deg) scale(.01) translate(50%, 50%);</li>
<li class="tab">transition:all 1s ease-in-out;</li>
<li class="tab">}</li>
</ol>
Подробнее об играх с transform можно почитать в <a href="http://cssing.org.ua/2009/11/04/css-animation/">моем же посте</a>
<h3>Как переключать слайды пультом?</h3>
Я написал небольшой <a href="http://en.wikipedia.org/wiki/AppleScript">applescript</a>, который по нажатию Apple Remote табулировался по ссылкам навигации (вот зачем tabindex), и по нажатию на пульте «Play» — кликал на них. Это единственная часть которую по понятным причинам трудно реализовать совсем без скрипта.
<p>Хотя у меня была идея построить все на -webkit-transition-delay (расписать в CSS появление каждого слайда по времени). Но тогда даже я сам считал бы себя психом.<br />
Если кому-то интересно итоговый скрипт выглядел примерно так (табулирование + enter):</p>
<ol class="code">
<li>on nextElement()</li>
<li class="tab">simulate keycode 48 with option</li>
<li class="tab">simulate keycode 76</li>
<li>end nextElement</li>
</ol>
Это я позаимствовал из <a href="http://www.gravityapps.com/sofacontrol/index.html">Sofa Control</a>.
<h3>Почитать</h3>
<ul>
<li><a href="http://cssing.org.ua/examples/css3html5/">Сама презентация</a> и ее <a href="http://cssing.org.ua/examples/css3html5/css/base.css">ядро</a></li>
<li><a href="http://www.css3.info/">CSS3.info</a></li>
<li><a href="http://dev.w3.org/html5/spec/Overview.html">HTML5 спецификация</a></li>
<li><a href="http://kigorw.com/articles/talks-engine">Еще вариант движка на Django</a></li>
<li><a href="http://meyerweb.com/eric/tools/s5/s5-intro.html">S5</a> один из первых движков для презентаций в браузере</li>
</ul>
Буду рад услышать ваши мысли про эту затею. Надеюсь она вдохновит кого-то на что-нибудь еще клёвое :)
Почетная грамота
2010-03-24T00:00:00Z
https://cssing.org.ua/2010/03/24/gramota/
<p>Мне была оказана <a href="http://www.svobodainfo.org/info/page/_toc118000563?tid=633200005&nd=902202223&prevDoc=902202223&spack=110listid%3D010000000100%26listpos%3D147%26lsz%3D191420%26nd%3D8000004%26nh%3D0%26">большая честь</a>.</p>
<p class="img"><a href="http://cssing.org.ua/pic/kremlin/gramota_big.jpg"><img src="http://cssing.org.ua/pic/kremlin/gramota.jpg" width="500" height="363" alt="Почетная Грамота Президента России" /></a></p>
Был рад возможности работать с командой настоящих профи над таким проектом!
<!--more-->
Фотоаппарат к сожалению нельзя было взять с собой, однако вот еще <a href="http://www.flickr.com/photos/akella/sets/72157623559177387/">несколько фото</a> с того дня.
OpenwebCamp, Киев
2010-03-22T00:00:00Z
https://cssing.org.ua/2010/03/22/openwebcamp-css3-html5/
<p>Короткие впечатления и фотки с мероприятия. <del datetime="2010-03-22T10:03:01+00:00">Плюс описание моей презентации.</del></p>
<!--more-->
<p>Так как через пару дней я выступлю с таким же докладом на iforum, я решил не портить никому удовольствия и выложить презентацию и само ее описание сразу 1-го апреля. Если у вас хватит памяти не забыть до тех пор о ней, я посвящу ей целый пост. ;)</p>
<p>(На самом деле я просто еще не успел дописать описание презентации.)</p>
<p>Среди докладов было несколько о революционных технологиях которые я к сожалению пока не совсем оценил, скорее потому что это не моя сфера. Потому расскажу о тех докладах что я успел услышать до того как пришлось убежать по Очень Важному Делу.</p>
<h3>Виталий Рыбалка из Ukr.Net</h3>
<p class="img"><img src="http://cssing.org.ua/pic/openwebcamp/vitex.jpg" alt="" width="480" height="320" /><span>Доклад Виталия</span></p>
Рассказывал о техниках оптимизации и ускорения сайтов, в том числе о тех что используются на актуальной версии ukr.net.
Кроме того рассказал о множестве инструментов с помощью которых можно оценить слабые места сайтов. <a href="http://vitex.in.ua/owc2010/">Вот тут находится его презентация</a>, для тех кому интересна тема.
<h3>Тимофей Бабич про user scripts</h3>
<p class="img"><img src="http://cssing.org.ua/pic/openwebcamp/tim.jpg" alt="" width="480" height="320" /><span>Вот тут Тиму надо было загадать желание</span></p>
Речь шла о скриптах для <a href="http://en.wikipedia.org/wiki/Greasemonkey">GreaseMonkey</a>, Stylish и новом приложении от мозиллы <a href="https://jetpack.mozillalabs.com/">Jetpack</a>. Рекомендую подробнее с ним ознакомиться. Тема эта очень интересная, хотя я лично дальше adblock так и не пошел.
<h3>Игорь Кононученко про Canvas</h3>
Игорь является техническим директором студии Веджо, доклад был достаточно коротким. Но за это время Игорь продемонстрировал несколько интересных применений этой технологии в проектах которые уже работают. В частности, мы раздевали женщин.
<p class="img"><img src="http://cssing.org.ua/pic/openwebcamp/canvas.jpg" alt="" width="480" height="320" /><span>Та самая женщина</span></p>
<h3><a href="http://pepelsbey.net/">Pepelsbey</a> про универсальные сайты для мобильных</h3>
<p class="img"><img src="http://cssing.org.ua/pic/openwebcamp/pepelsbey.jpg" alt="" width="480" height="320" /><span>Вот что нужно сделать</span></p>
Самая хорошая новость, что порядка 80% нашей аудитории используют браузер Opera Mini или Opera Mobile. Один так клево упрощает странички (и ориентирован на простые мобилы) что почти ни о чем можно не волноваться. А второй поддерживает столько крутого CSS3 что можно творить все что угодно.
В том числе Вадим рассказал о media queries. Это, например, фильтрование CSS для браузера учитывая его размер экрана, вот как-то так:
<ol class="code">
<li>@media screen and (max-device-width: 480px) {...}</li>
</ol>
Более того в мобильном браузере можно использовать селекторы и свойства вроде:
<ol class="code">
<li>input[type:text]{</li>
<li class="tab">background: url(pic.svg) no-repeat,</li>
<li class="tab">url(pic2.svg) no-repeat,</li>
<li class="tab">rgba(170,0,0, 0.5);</li>
<li class="tab">}</li>
<li>a:first-of-type{display:none}</li>
</ol>
И это на мобильных! Уму непостижимо :)
Кроме этого, сегодня <a href="http://www.opera.com/press/releases/2010/03/22_3/">Опера объявила о виджетах</a> для Opera <del datetime="2010-03-22T14:37:28+00:00">Mobile</del> Mini.
<p>Доклад получился достаточно насыщенный информацией, надеюсь он скоро его выложит, так как пересказывать слишком долго.</p>
<h3>Еще несколько случайных фото</h3>
<p class="img"><img src="http://cssing.org.ua/pic/openwebcamp/akella.jpg" alt="" width="480" height="360" /><span>Это я в кого-то стреляю, by <a href="http://twitter.com/klonfuture">@klonfuture</a></span></p>
<p class="img"><img src="http://cssing.org.ua/pic/openwebcamp/notes.jpg" alt="" width="480" height="320" /><span>А это мой и pepelsbey ноутбуки, у обоих открыты файлы презентаций, оба правим что-то</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/openwebcamp/girl.jpg" alt="" width="480" height="320" /><span>Вот такое у нас было расписание</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/openwebcamp/people.jpg" alt="" width="480" height="320" /><span>Народ</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/openwebcamp/znachki.jpg" alt="" width="480" height="320" /><span>А тут всем сказали что можно взять значки со стола</span></p>
<h3>Другие отчеты и ссылки</h3>
<ul>
<li><a href="http://twitter.com/#search?q=owcamp">Твиты про openwebcamp</a></li>
<li><a href="http://openwebcamp.org.ua/">Официальный сайт</a></li>
<li><a href="http://vovanada.org.ua/2010/03/openwebcamp/">в блоге Vovanada</a></li>
<li><a href="http://www.kigorw.com/places/owc2010">от Kigorw</a> (доклад о canvas)</li>
<li><a href="http://vitex.in.ua/owc2010/">Доклад vitex о клиентской оптимизации</a></li>
</ul>
В целом круто, и побольше бы таких мероприятий Киеву, правда?
Организаторам <a href="http://clear.com.ua/">Тимофею Бабичу</a> и <a href="http://klekovkin.com.ua/">Юрию Клековкину</a> из Mozilla, отдельное спасибо!
И слушателям спасибо за хорошие отзывы! =)
Буду рад услышать и ваши впечатления!
<p>P.S.: презентация в следующем посте.</p>
Мастер-класс в Киеве, 10 апреля
2010-03-17T00:00:00Z
https://cssing.org.ua/2010/03/17/css-workshop/
<p>10 апреля в Киеве состоится мой мастер-класс по вёрстке. <!--more--></p>
<p>Буду рассказывать о современных техниках вёрстки, опыте разработки ресурса <a href="http://kremlin.ru/">kremlin.ru</a>, подходах больших компаний (Yahoo, Yandex), ускорению загрузки сайтов, версиях для мобильных, поиске работы верстальщика, CSS3 и HTML5, и о чём меня только спросят, я готов подарить всем свой мозг. Ориентирован на людей которые уже умеют верстать. Примерно 4-5 часов с перерывами, затем с желающими в паб. :)<br />
<a href="http://www.smartme.com.ua/css-workshop/">Подробнее на страничке воркшопа</a>, тут же можно и зарегистрироваться.</p>
<p>Вход платный, до первого апреля стоимость 38 баксов.<br />
Буду рад встретиться и поделиться всем что я знаю!</p>
Слайсы на kremlin.ru
2010-03-12T00:00:00Z
https://cssing.org.ua/2010/03/12/kremlin-slice/
<p>Сегодня запустили слайсы на <a href="http://kremlin.ru/">kremlin.ru</a>. Небольшой рассказ чтобы упростить внедрение в будущем.</p>
<!--more-->
<h3>Что это вообще такое эти слайсы?</h3>
Это что-то вроде продвинутых закладок для IE8. Вы можете выбрать кусочек страницы, добавить его в Favorites. И после этого находясь уже на другом сайте, просмотреть этот кусочек. По клику на закладку откроется небольшое окошко с фрагментом другой страницы. Например это может быть погода, вот так это выглядит в слайсе от gismeteo:
<p class="img"><img src="http://cssing.org.ua/pic/slices/gismeteo.png" alt="" width="458" height="379" /><span>Заметьте, что при этом я нахожусь на сайте Digg</span></p>
Или это может быть десятка популярных линков Digg:
<p class="img"><img src="http://cssing.org.ua/pic/slices/digg.png" alt="" width="458" height="379" /><span>А теперь я на gismeteo, но держу руку на пульсе Digg! Я непредсказуем - согласитесь.</span></p>
Идея в том, что вам не нужно заходить на сайт, можно загрузить только тот кусочек который важен.
Но, обновлять так можно не любой фрагмент сайта, а только отдельные, предусмотренные сайтом. Фрагменты подсвечиваются примерно так:
<p class="img"><a href="http://cssing.org.ua/pic/slices/kremlin.jpg"><img src="http://cssing.org.ua/pic/slices/kremlin_small.png" alt="" width="460" height="279" /><span>Картинка кликабельна</span></a></p>
Такая вот полезная мелочь. А для больших сайтов, как известно, все мелочи значимы.
<h3>Что это такое для кодера</h3>
Не более чем набор микроформатов (за нас придуманных названий классов). Ничтоже сумняшеся перейдем к коду, он очень прост:
<ol class="code">
<li><div <strong>class="hslice" id="whatever"</strong>></li>
<li class="tab"><div <strong>class="entry-title"</strong>>Название слайса.</div></li>
<li class="tab"><div <strong>class="entry-content"</strong>>А тут то что будет отображаться в окошке слайса.</div></li>
<li></div></li>
</ol>
Пару классов, и какой-то, любой, но заданный id.
Это пример самого элементарного слайса.
В моем случае было что-то вроде этого:
<ol class="code">
<li><div class="b-news-main <strong>hslice</strong>" id="news"></li>
<li class="tab"><h2 <strong>class="entry-title"</strong>>Новости</div></li>
<li class="tab"><ul class="entry-content"><small>...список новостей...</small> </ul></li>
<li></div></li>
</ol>
Это код с <a href="http://kremlin.ru/">главной</a>. А результат получился такой:
<p class="img"><img src="http://cssing.org.ua/pic/slices/fail.png" alt="" width="396" height="285" /><span>Очень мило</span></p>
Неприятные мысли стали посещать меня в этот момент.
Но я снова воспрял духом едва прочитал документацию до конца. Оказалось, из стилей наложенных на этот фрагмент на оригинальной странице, берутся только инлайновые, и никаких наследованных (<code>body{font-size:12px}</code> не применяется).
<p><code>style="font-size:12px;"</code> применился бы, но кому интересно марать свой чистый код.</p>
<h3>Правильный путь</h3>
Можно, и я думаю нужно, подключать контент для слайса из отдельного файла. Какова бы ни была ваша страница, стили наложенные на фрагмент <em>на сайте</em>, вряд ли красиво переложатся в это <em>маленькое окошко</em> слайса в браузере.
<p>В <a href="http://msdn.microsoft.com/library/cc848871(VS.85).aspx">документации</a> описано несколько путей. Нам подошел следующий.<br />
Код на сайте:</p>
<ol class="code">
<li><div class="b-news-main hslice" id="news-slice"></li>
<li class="tab"> <h3 class="entry-title">Новости</h3></li>
<li class="tab"><strong><a rel="feedurl" href="/slice/news"></a></strong></li>
<li class="tab">...</li>
<li></div>
</li></ol>
Параметр feedurl используется для указания альтернативного источника для слайса, как раз то что нам нужно в данном случае.
<p>А по адресу <a href="http://kremlin.ru/slice/news">/slice/news</a> находится файл который я хочу чтобы отображался в браузере.</p>
<p>При этом важно помнить, что внутри этого файла снова должен быть размечен слайс, поскольку IE рассматривает его именно как <em>альтернативный источник</em>, который снова надо парсить. Если просто вставить в этом файле какой-либо HTML (было бы логично) слайс не будет работать в браузере. <a href="http://kremlin.ru/slice/news">Вот такое там содержимое прямо сейчас</a>:</p>
<ol class="code">
<li><div class="hslice entry-content" id="documents"></li>
<li class="tab"><h2 class="entry-title">Новости</h2></li>
<li class="tab"><small><!--Адрес куда IE будет ходить при обновлении, сюда же --></small></li>
<li class="tab"><a rel="entry-content" href="http://news.kremlin.ru/slice/news" style="display: none;" ></a></li>
<li class="tab"><ul class="entry-content"></li>
<li class="tabtab"><small>список новостей</small></li>
<li class="tab"></ul></li>
<li></div></li>
</ol>
Как видно, обычный слайс с которого мы начинали. И теперь наконец все работает! На этом мы пока и остановились. Слайс в действии можно видеть <a href="http://kremlin.ru/">на этой страничке</a>, а файл самого слайса <a href="http://kremlin.ru/slice/news">берется отсюда</a>.
Выглядит это прямо сейчас вот так:
<p class="img"><img src="http://cssing.org.ua/pic/slices/result.png" alt="" width="460" height="382" /><span>Слайс можно растянуть по вертикали чтобы уместилось больше новостей</span></p>
А вот так распознается браузером:
<p class="img"><img src="http://cssing.org.ua/pic/slices/result1.png" alt="" width="527" height="229" /></p>
После, я еще много игрался и комбинировал эти методы, если кому-то интересно, вы тоже можете окунуться с головой в увлекательный мир слайсов под IE8. Но я решил удовлетвориться одним рабочим вариантом :)
<h3>Ссылки</h3>
<ul>
<li><a href="http://habrahabr.ru/blogs/ie/72189/">Подробная статья на Хабрахабре</a></li>
<li><a href="http://msdn.microsoft.com/library/cc848871(VS.85).aspx">Про слайсы на MSDN</a></li>
<li><a href="http://ieaddons.com/ru/webslices/">Слайсы на других русскоязычных сайтах</a></li>
</ul>
<p>Надеюсь кому-то это сэкономит время в будущем, и буду рад вашему опыту!<br />
В одном из следующих постов могу рассказать об опыте вёрстки этого большого проекта. И почему все получилось сделать валидным.</p>
<p>P.S.: Так как у меня windows XP, и в ней стоит родной IE6, который я не хотел терять, тестировал я все в <a href="http://ru.wikipedia.org/wiki/Software_as_a_service">SaaS</a> решении <a href="http://spoon.net/">Spoon.net</a>. Нужно лишь установить плагин порядка 25 мегабайт, и можно запускать почти <a href="http://spoon.net/browsers/">любой браузер</a> (всё это работает правда пока под Windows).</p>
Web Standards Days, 28 ноября, Минск
2009-11-30T00:00:00Z
https://cssing.org.ua/2009/11/30/minsk-web-standards-days/
<p>Вернулся из Минска с первого мероприятия <a href="http://webstandardsdays.ru/">Web Standards Days</a>. Впечатления и отрывки докладов.</p>
<!--more-->
<h3>Андрей Сумин и редизайн hh.ru</h3>
Три верстальщика, около 60 разных страниц сайта, и пара месяцев на полный редизайн, включая внедрение.
<p class="img"><img src="http://cssing.org.ua/pic/minsk/4.jpg" width="480" height="320" alt="" /><span>Андрей Сумин</span></p>
В работе над редизайном хедхантера использовалась идея верстки независимыми блоками Харисова. Как сказал Андрей, подход превращает <em>ремесло</em> верстальщика в <em>производство</em>. А это позволяет эффективно работать над проектом сразу нескольким верстальщикам.
<p class="img"><img src="http://cssing.org.ua/pic/minsk/8.jpg" width="480" height="416" alt="" /><span>Было-стало</span></p>
<p>Андрей рассказал что редизайн происходил постепенно, на сайте появлялись отдельные страницы с новым дизайном. В результате многие, даже внутри хедхантера, не поняли что происходил полный редизайн сайта, пока не обновилась главная страница.</p>
<p>Как и в яндексе, на хедхантере колонки сайта сделаны ячейками таблицы. Просто потому что это наиболее стабильный вариант. Ну, такие популярные сайты в которых вдобавок всякая странная резина, можно понять.</p>
<p>Для работы над проектом ребята придумали некий движок:</p>
<p class="img"><img src="http://cssing.org.ua/pic/minsk/3.jpg" /><span>Работа над страницами сайта</span></p>
Там они разными цветами отмечали готовность верстки для разных страниц сайта. По словам Андрея подход очень помог в работе. (на фото видно что всё почти зеленое — это уже последние дни перед запуском, когда всё было готово)
<h3>Исповедь Макишвили</h3>
Настолько проникновенно и с чувством Вадим рассказывал что по-другому и не назовешь.
<p>Рассказ начался с вот такого слайда:</p>
<p class="img"><img src="http://cssing.org.ua/pic/minsk/1.jpg" width="480" height="360" alt="" /><span>Shame on you, Opera!</span></p>
<p>Вадим сделал не доклад, а настоящий рассказ-размышление. Речь шла об ошибках, о том зачем мы их допускаем, и как их не бояться. Внутренние переживания верстальщика, отношение менеджеров. Пересказывать трудно, выйдет блекло, просто постарайтесь попасть на его следующий доклад.</p>
<p>Также с сожалением сказал что quirksmode на страницах Яндекса возможно был не самым удачным решением.</p>
<p>Кроме того Вадим рассказал о нескольких наиболее вредных глюках. И его личном «любимом» баге на решение которого он потратил больше недели. Условий для бага целых 8, и он связан с флоат блоками и длинными неразрывными словами внутри таблиц.</p>
<p class="img"><img src="http://cssing.org.ua/pic/minsk/7.jpg" width="480" height="391" alt="" /><span>В среднем на одну задачу приходится две ошибки</span></p>
<p>По <a href="http://twitter.com/#search?q=%D0%BC%D0%B0%D0%BA%D0%B8%D1%88%D0%B2%D0%B8%D0%BB%D0%B8%20%23wstdays">количеству положительных отзывов</a> Вадима можно однозначно считать рок-звездой минской встречи. :)</p>
<h3>Макеев о веб-шрифтах</h3>
Первый слайд презентации:
<p class="img"><img src="http://cssing.org.ua/pic/minsk/2.jpg" width="480" height="360" alt="" /><span>Ответ Вадима Вадиму</span></p>
Pepelsbey рассказывал о шрифтах для веб, их истории и самых последних обновлениях. О том как все уже намучились c .eot. И всяком другом интересном про шрифты.
<p>Вадим также обмолвился, что во внутренней рассылке оперовцев идея WOFF была воспринята с энтузиазмом. Так что вполне может быть этот формат станет стандартом отрасли для веб-шрифтов. WOFF это на самом деле открытый и более совершенный вариант майкрософтовского EOT.</p>
<h3>А ещё</h3>
Николай Мациевский рассказал о том что и когда лучше использовать для рисования, SVG или <code>canvas</code>. <a href="http://webo.in/articles/wsd2009/vml-svg-canvas/">Доклад доступен у него на сайте</a>. Результат сравнения примерно такой: сложные области или чисто растровая графика — Canvas, большие по пиксельной площади объекты, которые могут быть в векторе — SVG.
<p>Ему вообще отдельная благодарность, так как много его хороших книг подарили по ходу мероприятия.</p>
<p class="img"><img src="http://cssing.org.ua/pic/minsk/5.jpg" width="480" height="320" alt="" /><span>Николай Мациевский</span></p>
Весь зал выглядел примерно так, почти полный:
<p class="img"><img src="http://cssing.org.ua/pic/minsk/6.jpg" width="480" height="320" alt="" /><span>Народу было очень много. Ловцевич об HTML5</span></p>
<p>Кроме этого выступали и <a href="http://webstandards.org.ru/">Константин Ефимов</a> (о современных технологиях в верстке и их правильном использовании) и <a href="http://lovtsevich.com/">Павел Ловцевич</a> (об HTML5). Артемий Ломов рассказал о конкурсе <a href="http://www.webhitech.ru/">WebHiTech</a> который недавно закончился.</p>
<p>Ожидался <a href="http://chikuyonok.ru/">Сергей Чикуёнок</a>, но, жаль, кажется просто не хватило времени.</p>
<ul>
<li><a href="http://webstandardsdays.ru/">Официальный сайт мероприятия</a> и <a href="https://twitter.com/webstandards_ru">твиттер</a></li>
<li><a href="http://live.miripiruni.org/2009/12/01/1/">Отчет Вячеслава Олиянчука aka miripuni</a></li>
<li><a href="http://habrahabr.ru/blogs/webstandards/76931/">Отчет на хабре</a></li>
<li><a href="http://www.webhitech.ru/press/11/">Отчет на WebHiTech</a></li>
<li><a href="http://fotki.yandex.ru/users/h404/album/83917?p=0">Фотографии от Михаила Баранова</a></li>
</ul>
<p>Видео и слайды докладов думаю скоро появятся на сайте WSTdays.</p>
<p>Было неожиданно много людей и отличная атмосфера. Очень приятно было увидеть кучу знакомых людей из интернета. Кажется теперь в Минске должна начаться б<em>о</em>льшая активность. Приходите на следующие мероприятия организованные <a href="http://web-standards.ru/">сообществом</a>, возможно и в Киеве ;). Организаторам большое спасибо, и Opera как спонсор молодец. А я дурак, потому что не попал на афтепати в бассейне :)</p>
Всё крутится и летает
2009-11-04T00:00:00Z
https://cssing.org.ua/2009/11/04/css-animation/
<p>Я занимался сексом с webkit-transition, результат <a href="http://cssing.org.ua/examples/cssanimation/">можно увидеть тут</a>, да и <a href="http://cssing.org.ua/examples/cssanimation/letters-comp-scaledelayrotate.html">тут впрочем тоже</a>, а <a href="http://genn.org/junk/kit3.html">вот что придумал Genn</a> узнав об этом (примеры работают пока только в Хроме и Сафари).<!--more--></p>
<p>Дальше будет немного теории, можно сразу перейти к примерам внизу.</p>
<h3>transition transform</h3>
Это CSS3 свойства, которые пока работают только в Safari и Chrome. Еще они будут в следующей версии Firefox и Opera. Но пока нет.
<p>Если вам совсем нечего делать, можно прочитать о них в <a href="http://www.w3.org/TR/css3-2d-transforms/">спецификации про 2d-transforms</a> и <a href="http://www.w3.org/TR/css3-transitions/">про transitions</a>. Это всё конечно draft, но вряд ли что-то изменится.</p>
<p>Вкратце всё обстоит так.</p>
<p><strong>transform</strong> — совершает всякие странные эффекты с блоком. По сути похоже на text-transform, просто эффекты более странные.<br />
Например можно писать так:</p>
<ol class="code">
<li>.weirdblock{
</li><li class="tab">transform: rotate(45deg) scale(2);</li>
<li>}</li>
</ol>
Путем невероятных мыслительных усилий, вы уже могли бы догадаться что этот код повернет блок на 45 градусов, и увеличит его в размере в два раза, без анимации, просто такой моментальный эффект.
<p class="img con"><img src="https://cssing.org.ua/pic/ex.png" /><span>Был маленький и прямой, стал большой и кривой</span></p>
<p>Пока спецификация неактуальна, для Сафари и Хрома правило нужно писать с префиксом <code>-webkit-</code>. То есть вот так:</p>
<ol class="code">
<li>.weirdblock{
</li><li class="tab">-webkit-transform: rotate(45deg) scale(2);</li>
<li>}</li>
</ol>
Вот вобщем и всё, transform уже работает в последнем Фаерфоксе, кстати. <a href="http://webkit.org/blog/130/css-transforms/">Подробнее о нём</a>.
<p><strong>transition</strong> — определяет анимацию блока. Используется примерно так:</p>
<ol class="code">
<li>div{</li>
<li class="tab">opacity:0.5;</li>
<li class="tab">-webkit-transition: opacity 1s linear; <small>/*opacity - что анимируем,1s - длительность эффекта, linear - плавность эффекта*/</small></li>
<li class="tab">}</li>
<li>div:hover{
</li><li class="tab">opacity:1;</li>
<li class="tab">}</li>
</ol>
По наведению курсора, блок просто плавно изменит свою прозрачность за 1 секунду. Это мог бы быть фон, размер и цвет текста и все что угодно. <a href="http://webkit.org/blog/138/css-animation/">Всё можно анимировать</a>.
А вот так например можно плавно менять цвет ссылки по наведению мыши:
<ol class="code">
<li>a{</li>
<li class="tab">color:green;</li>
<li class="tab">-webkit-transition:all 1s linear;</li>
<li class="tab">}</li>
<li>a:hover{</li>
<li class="tab">color:red;</li>
<li class="tab">}</li>
</ol>
А теперь примеры! ;)
<h3>Примеры (пока только для Safari и Chrome)</h3>
Анимация во всех примерах начинается по наведению мышки. Когда убираете мышку, она проигрывается до исходного состояния.
<p>Первое что пришло в голову, сделать анимированный комикс ;) <a href="http://cssing.org.ua/examples/cssanimation">Вот что получилось</a>, выглядит странно, но он целиком сделан на CSS! Подумать только!</p>
<p>Дальше, еще интересней, я <a href="http://cssing.org.ua/examples/cssanimation/words.html">решил анимировать слова</a>. А потом, конечно, это <a href="http://cssing.org.ua/examples/cssanimation/letters.html">случилось и с буквами</a>. :) Удивительно в этом то, что эту анимацию совершают всего 3-4 строки CSS-кода. (ну и джаваскрипт который предварительно раскидывает буквы по всему экрану, но это его единственная задача)</p>
<p>Если добавить изменение размера, <a href="http://cssing.org.ua/examples/cssanimation/letters-comp-scale.html">получается забавно</a>. А потом <a href="http://cssing.org.ua/examples/cssanimation/letters-comp-scaledelayrotate.html">их можно еще и крутить </a>;), тогда они похожи на муравьёв. Но с двумя лимериками уже начинает тормозить.</p>
<p>По дороге получился <a href="http://cssing.org.ua/examples/cssanimation/letters-comp_FAIL.html">смешной неудачный вариант</a>. Буквы тут довольно неуклюжие.</p>
<p><a href="http://mega.genn.org/">Genn</a> сделал <a href="http://genn.org/junk/kit.html">ASCII трибьют</a>, и <a href="http://genn.org/junk/kit2.html">еще один</a>, не менее клёвый. Еще <a href="http://genn.org/junk/kit3.html">один прекрасный с отложенной анимацией</a> (-webkit-transition-delay). И <a href="http://genn.org/junk/kit4.html">синяя лужа</a>.</p>
<p>Может и у вас есть варианты? :)</p>
<p>Если у вас вдруг нет ни Сафари ни Хрома, вот видео пары анимаций:</p>
<div class="img"><div><object width="400" height="207"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=7437524&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=7437524&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="207" /></object></div><p>Нравятся мне буквы</p></div>
<div class="img"><div><object width="400" height="400"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=7436281&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=7436281&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="400" /></object></div><p>Разбросанные буквы</p></div>
<div class="img"><div><object width="400" height="267"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=7436108&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=7436108&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="267" /></object></div><p>Пример от <a href="http://mega.genn.org/">Genn</a></p></div>
<h3>Opera & Firefox</h3>
В последних непубличных версиях этих браузеров эффекты уже работают, и вызываются соответствующими правилами -o-transform, -o-transition, -moz-transform, -moz-transition. Так что теоретически, если вы делаете эффект для сайта, правила можно продублировать с этими префиксами, авось потом заработает ;). Пока что свойства идеально деградируют в других браузерах, просто анимации нет, все происходит мгновенно. А красотами наслаждаемся в Хроме и Сафари.
<p>Мне известно только два, не совсем бесполезных варианта использования этих свойств, вот <a href="http://farukat.es/">здесь в правой колонке внизу</a> и <a href="http://forabeautifulweb.com/">вот тут смешно крутятся диски</a>. Но, учитывая скорую поддержку Оперы и Фаерфокса, можно придумать что-то интересное =)</p>
<h3>Все примеры</h3>
<ul>
<li><a href="http://cssing.org.ua/examples/cssanimation/">Комикс на CSS</a></li>
<li><a href="http://genn.org/junk/kit.html">Трибьют от Genn</a> <a href="http://genn.org/junk/kit2.html">и второй</a>, а также <a href="http://genn.org/junk/kit3.html">суперкрутой третий</a>, и <a href="http://genn.org/junk/kit4.html">ошеломляющий четвертый</a></li>
<li><a href="http://cssing.org.ua/examples/cssanimation/letters-comp-scaledelayrotate.html">Крутящиеся буквы</a>, <a href="http://cssing.org.ua/examples/cssanimation/letters-comp-scaleUP.html">буквы которые засасывает</a> и <a href="http://cssing.org.ua/examples/cssanimation/letters.php">поворачивающиеся буквы</a>, и еще <a href="http://cssing.org.ua/examples/cssanimation/letters-comp_FAIL.html">неудачный вариант</a></li>
<li><a href="http://www.fofronline.com/2009-03/an-analogue-clock-using-only-css/">Аналоговые часы с помощью transition</a></li>
</ul>
<p>Ваш арт по теме и мнение более чем приветствуется! :)</p>
<p>P.S.: Лимерики взяты из журнала <a href="http://tramway.msk.ru/archive.htm">Трамвай</a>,<br />
автор Татьяна Петросян, <a href="http://community.livejournal.com/tramway/52061.html">остальные тут</a>.</p>
font-face оживление
2009-10-24T00:00:00Z
https://cssing.org.ua/2009/10/24/font-face/
<p>Последнее время так надоело вставлять свои шрифты на странички, что я решил написать об этом пост. Аккумулированный опыт и последние новости. <!--more--></p>
<p>Практически, будущее наступило, во всех современных браузерах на данный момент можно вставить нестандартный шрифт на страничку <em>только с помощью CSS</em>. (Firefox 3.5+, Chrome 3.0+, Safari 3.1+, Opera 10+, IE 5+)</p>
<h3>Шрифты вообще</h3>
Способов за годы веб-разработки придумано множество. И <a href="http://wiki.novemberborn.net/sifr3">SIFR</a> (шрифты через Flash), которому скоро 5 лет стукнет, и <a href="http://wiki.github.com/sorccu/cufon/usage">Cufon</a> (шрифты через <canvas>), и всякие другие вариации типа <a href="http://typeface.neocracy.org/">Typeface</a> (там кстати уже можно выделять и копировать!).
<p>Но еще с прошлого тысячелетия самым крутым способом было конечно просто подключить нужный шрифт на страничку, и написать им текст. Сначала это сделали в Netscape, потом в IE 4.0. А теперь это в грядущем CSS3. По спецификации это принято делать так:</p>
<ol class="code">
<li>@font-face {</li>
<li class="tab">font-family: Parampampam;</li>
<li class="tab">src: url(parampampam.ttf);</li>
<li>}</li>
</ol>
И затем использовать это:
<ol class="code">
<li>p { font-family: Parampampam, serif; }</li>
</ol>
Именно такой подход на данный момент сработает в Firefox 3.5+, Chrome 3.0+, Safari 3.1+, Opera 10+. То есть практически во всех последних версиях браузеров. Они поддерживают .ttf и .otf файлы.
<p>В IE использование своих шрифтов работает еще с версии 4.0. Но, видимо, споткнувшись еще тогда на лицензировании (или по своим иррациональным причинам), они решили создать свой формат для подключаемых файлов Embedded OpenType (.eot). Который и является средоточием геморроя в этом шрифтовом вопросе.<br />
В любом случае, подключение там работает примерно также:</p>
<ol class="code">
<li>@font-face {</li>
<li class="tab">font-family: Parampampam;</li>
<li class="tab">src: url(parampampam.eot);</li>
<li>}</li>
</ol>
На данном этапе очевидно, если создать этот загадочный .eot файл, то всё будет великолепно, и практически все современные браузеры отобразят наш шрифт.
<h3>Как создать EOT</h3>
Давно было известно о специальной программе WEFT от Microsoft. Но мне почему-то никак не удавалось ею воспользоваться, шрифты получавшиеся в результате никогда не работали в ИЕ. Я скидывал это на лицензии или какие-то еще заморочки. Но судя по последним постам, почти ни у кого не получалось заставить ее работать. Программа эта вообще довольно уникальна, стоит лишь пробежаться глазами по <a href="http://www.100megspop2.com/tutorials/embeddingfonts/embeddingfonts.htm"><em>простому</em> скринкасту для конвертации OTF в EOT</a>.
<p>Но буквально за последний месяц появилось еще два варианта, которые нас и спасут.</p>
<h3>Вариант 1: FontForge+<a href="http://ttf2eot.sebastiankippe.com/">ttf2eot</a></h3>
Появился отличный онлайн сервис ttf2eot для конвертации. Но, если в него просто засунуть первый попавшийся TTF файл, получившийся EOT не будет работать в IE. Чтобы он работал, нужно предварительно почистить атрибуты шрифта. Для этого понадобится <a href="http://sourceforge.net/projects/fontforge/files/fontforge-executables/">FontForge</a>.
<p>Если открыть шрифт в FontForge, мы получим примерно такое окошко:</p>
<p class="img"><img src="https://cssing.org.ua/pic/fontface/garbage1.png" alt="FontForge" width="425" height="439" /><span>FontForge</span></p>
Затем нам нужно будет открыть окно с «Font Info→TTF Names» и удалить <em>все</em> записи отсюда, красные не удалятся, ну и ладно:
<p class="img"><img src="https://cssing.org.ua/pic/fontface/cleanup.png" alt="лишние атрибуты" width="465" height="522" /><span>Это окошко находится в меню <strong>Element>Font Info</strong></span></p>
Можно посмотреть как это <a href="http://snook.ca/archives/html_and_css/screencast-converting-ttf2eot">разжевано в скринкасте</a>.
<p>После чего просто сохраняем шрифт (File→Generate Fonts) и скармливаем его сервису <a href="http://ttf2eot.sebastiankippe.com/">ttf2eot</a>. Результирующий файл будет работать в IE.<br />
В скринкасте кстати, сказано, что надо удалить все атрибуты, и добавить несколько своих. Я просто удалял все, и у меня все работает. Так что можно не заморачиваться.</p>
<h3>Вариант 2: <a href="http://www.fontsquirrel.com/fontface/generator">fontsquierrel</a></h3>
Однако увидев всю эту мороку из предыдущего варианта, люди ее автоматизировали.
Это просто онлайн сервис. Вы загружаете шрифт, он вам генерирует .svg версию шрифта, .eot версию шрифта, и <a href="http://hacks.mozilla.org/2009/10/woff/">даже WOFF версию</a> (формат для новых Firefox). Вдобавок ко всему, CSS файл с правильным подключением всех этих woff-eot-svg-otf (кошмар какой-то) в @font-face.
<p>Вобщем, на данный момент <a href="http://www.fontsquirrel.com/fontface/generator">просто спасительный сервис</a>, пользуйтесь. Его разработчик активно следит за всеми новостями, и сразу же вносит обновления туда, так что на него можно в каком-то смысле ориентироваться.</p>
<h3>Как внедрить для всех</h3>
На данный момент оптимальным принят следующий код:
<ol class="code">
<li>@font-face {</li>
<li class="tab">font-family: 'Graublau Web';</li>
<li class="tab">src: url('GraublauWeb.eot');</li>
<li class="tab">src: local('Graublau Web Regular'), local('Graublau Web'), </li>
<li class="tabtab">url('GraublauWeb.otf') format('opentype');</li>
<li>}</li>
</ol>
Подробнее почему именно так, можно <a href="http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/">прочитать здесь</a>. local — означает, что браузер должен проверить есть ли в системе такой шрифт, прежде чем скачивать. <em>Должен</em>, но все равно не везде работает. =(
<p>Еще можно подключать шрифты в формате .svg, тогда они отобразятся даже в iPhone.</p>
<p>А буквально на днях <a href="http://hacks.mozilla.org/2009/10/woff/">активно продвинулся WOFF</a>, это «сжатый» truetype который пока будет работать только в Firefox 3.6. Просто чтобы веб-разработчикам было нескучно с OTF, TTF, SVG и EOT.</p>
<h3>Оптимизация</h3>
Во-первых файлы шрифта можно просто gzip'ить. <a href="http://www.phpied.com/gzip-your-font-face-files/">Как показывает опыт</a>, можно ужать в два раза. Что вовсе не так мало, при размере порядка 100 килобайт.
<p>Кроме того, если открыть файл шрифта тем же FontForge, то можно увидеть кучу символов, которые вряд ли будут вами использоваться:</p>
<p class="img"><img src="https://cssing.org.ua/pic/fontface/garbage1.png" alt="лишние символы в шрифте" width="425" height="439" /><span>Вся эта бяка, которая обычно никому не нужна, занимает такое же кол-во байт, как и нужные всем буквы</span></p>
Прямо в этом же FontForge ненужные символы можно удалить:
<p class="img"><img src="https://cssing.org.ua/pic/fontface/cleangarbage1.png" alt="удалить лишние буквы" width="421" height="447" /><span>Выделить с шифтом и сделать Clear</span></p>
Благодаря удалению только таких символов, файл для шрифта Myriad у меня уменьшился с 96 килобайт, до 40. Соответственно уменьшается и файл .eot.
<h3>Лицензия</h3>
Не все шрифты можно использовать в @font-face. Просто потому что его же можно будет легко скачать, а он может стоить денег. И хотя на практике вряд ли кого-то будут доставать по этому поводу, для популярных сайтов лучше не рисковать. Уже есть сайты-сборники шрифтов доступных для @font-face. Такой список есть на <a href="http://webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding">Webfonts.info</a>, например, и вот еще один <a href="http://www.theleagueofmoveabletype.com/">отличный ресурс</a>. (Спасибо Илья!) И время от времени на <a href="http://blog.dotmariusz.net/2009/08/09/free-font-face-fonts-you-might-want-to-use/">разных</a> <a href="http://www.devlounge.net/design/five-fonts-for-font-face">других</a> <a href="http://www.fontsquirrel.com/">сайтах</a>.
<p>Кириллических среди них конечно мало, но, пока никто толком не разобрался с этим вопросом, полагаю шрифты можно использовать какие найдете, или просто бесплатные. Вряд ли кого-то засудят за подключение Myriad на свой блог ;)</p>
<p>Предполагается, что WOFF должен решить проблему лицензирования, и что мы сможем использовать на страничках любой шрифт, <em>которым легально владеем</em>.</p>
<h3>Ссылки</h3>
<ul>
<li><a href="http://lb.com.ua/article/culture/2009/10/19/11329_oleg_kohan_dazhe_dadut.html">Пример на живом проекте</a> и <a href="http://cssing.org.ua/examples/fontface/">искусственный пример</a> (с WOFF и SVG сгенерированными на Fontsquirrel)</li>
<li><a href="http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master">Becoming a Font Embedding Master</a> — подборка информации о современном font embedding</li>
<li><a href="http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Лучший способ использования @font-face на данный момент</a> и <a href="http://paulirish.com/2009/fighting-the-font-face-fout/">оптимизация вставки шрифтов</a></li>
<li><a href="http://www.phpied.com/gzip-your-font-face-files/">Тестирование gzip для шрифтов</a></li>
<li><a href="https://cssing.org.ua/2009/10/24/font-face/#">Where to get web fonts</a> — отличная статья о лицензировании шрифтов и будущем этой проблемы</li>
<li><a href="http://hacks.mozilla.org/2009/10/woff/">Про WOFF</a></li>
<li><a href="http://lovtsevich.com/2009/10/26/font-face-ili-nazad-v-budushhee/">@font-face или назад в будущее</a></li>
<li><a href="http://www.umade.ru/log/2009/07/font-embed-eot-font-face/">Внедрение шрифтов — EOT и @font-face</a></li>
<li><a href="http://lyncis.info/uk/post/274">Тест 16 кириллических шрифтов доступных для использования</a></li>
</ul>
<p>Похоже, скоро мы забудем о SIFR и Cufon! Ура!</p>
LA, LV, NYC and Grand Canyon!
2009-08-26T00:00:00Z
https://cssing.org.ua/2009/08/26/la-lv-nyc-and-grand-canyon/
<p>Я тут случайно съездил на другой конец планеты, и решил поделиться своими впечатлениями и фото.<!--more--></p>
<h3>Америка!</h3>
Как-то так:
<ul>
<li>Все очень большое (порции еды, проспекты, <a href="http://twitpic.com/eq6km">люди</a>, каньон, американские горки)</li>
<li>В чайниках не нашел накипи</li>
<li><em>Хорошие</em> джинсы могут стоить 10 долларов</li>
<li>Европа современнее</li>
<li>В Нью-Йорке в метро в среднем 5% европеоидов</li>
<li>Красивых девушек почти нет. Вся надежда на латинскую америку и азиаток</li>
</ul>
Большая часть фото кликается, если что.
<h3>LA</h3>
Огромные широкие улицы. Жизнь немыслима без машины. Большие пустые пляжи, и нет жилых домов выше 3х этажей. Улицы Лос Анджелеса обычно пусты.
<p class="img"><a href="http://cssing.org.ua/pic/usa/santa.jpg"><img width="480" height="320" src="http://cssing.org.ua/pic/usa/_santa.jpg" alt="" /></a><span>Сразу после заката в Санта Монике</span></p>
<p class="img"><a href="http://cssing.org.ua/pic/usa/la.jpg"><img width="480" height="720" src="http://cssing.org.ua/pic/usa/_la.jpg" alt="" /></a><span>Они почти не некрасивые! Для Америки это огого!</span></p>
<p class="img"><a href="http://cssing.org.ua/pic/usa/la1.jpg"><img width="480" height="320" src="http://cssing.org.ua/pic/usa/_la1.jpg" alt="" /></a><span>Очень спортивная нация. Манхэттен Бич</span></p>
<h3>LV</h3>
Очень дешевые отели, казино в которых так и хочется все проиграть, классные буфеты и крутое фонтанное представление.
<p class="img"><img width="480" height="320" src="http://cssing.org.ua/pic/usa/_vegas.jpg" alt="" /><span>Ах! Отличный в Bellagio буфет</span></p>
<p class="img"><a href="http://cssing.org.ua/pic/usa/vegas1.jpg"><img width="480" height="320" src="http://cssing.org.ua/pic/usa/_vegas1.jpg" alt="" /></a><span>Пожалуй, лучшее место в Вегасе</span></p>
<div class="img">
<div><object width="480" height="258"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=6261984&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=6261984&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="480" height="258" /></object></div><p>Те самые фонтаны</p></div>
<h3>NYC</h3>
Удивительный Манхэттен, своя непередаваемая атмосфера, и самая <del datetime="2009-08-26T19:10:16+00:00">ужасная</del> странная в <del datetime="2009-08-26T19:10:16+00:00">мире</del> из тех что я знаю навигация в метро.
Несколько случайных фото:
<p class="img"><a href="http://cssing.org.ua/pic/usa/man.jpg"><img width="480" height="308" src="http://cssing.org.ua/pic/usa/_man.jpg" alt="" /></a><span>Задираешь голову и почти всегда вот так</span></p>
<p class="img"><a href="http://cssing.org.ua/pic/usa/man1.jpg"><img width="480" height="320" src="http://cssing.org.ua/pic/usa/_man1.jpg" alt="" /></a><span>Ночной Манхэттен</span></p>
<p class="img"><a href="http://cssing.org.ua/pic/usa/man2.jpg"><img width="480" height="320" src="http://cssing.org.ua/pic/usa/_man2.jpg" alt="" /></a><span>И утренний ;)</span></p>
<p class="img"><a href="http://cssing.org.ua/pic/usa/man3.jpg"><img width="480" height="720" src="http://cssing.org.ua/pic/usa/_man3.jpg" alt="" /></a><span>Прощай здоровая еда! Здравствуй Нью-Йорк!</span></p>
<p class="img"><img width="450" height="675" src="http://cssing.org.ua/pic/usa/_man5.jpg" alt="" /><span>Суббота всё-таки</span></p>
<p class="img" style="display:none"><img width="480" height="720" src="http://cssing.org.ua/pic/usa/_man6.jpg" alt="" /><span>А вверху все то же</span></p>
<p class="img"><img width="480" height="320" src="http://cssing.org.ua/pic/usa/_man7.jpg" alt="" /><span>На кондиционеры похоже</span></p>
<p class="img"><img width="480" height="720" src="http://cssing.org.ua/pic/usa/man7.jpg" alt="" /><span>Обычная улица, вообще ничего примечательного нет, кроме того, что она в Нью-Йорке</span></p>
<h3>Grand Canyon</h3>
Большой Каньон красивый.
Там где стояла наша палатка, паслись дикие олени. И это нормально!
<p class="img"><a href="http://cssing.org.ua/pic/usa/deer1.jpg"><img width="480" height="320" src="http://cssing.org.ua/pic/usa/_deer1.jpg" alt="" /></a><span>Настоящий олень</span></p>
<p class="img"><a href="http://cssing.org.ua/pic/usa/can3.jpg"><img width="480" height="320" src="http://cssing.org.ua/pic/usa/_can3.jpg" alt="" /></a><span>Большой Каньон на рассвете</span></p>
<p class="img"><a href="http://cssing.org.ua/pic/usa/can4.jpg"><img width="480" height="320" src="http://cssing.org.ua/pic/usa/_can4.jpg" alt="" /></a><span>Слева внизу славная речка Колорадо</span></p>
<p class="img"><a href="http://cssing.org.ua/pic/usa/can1.jpg"><img width="480" height="320" src="http://cssing.org.ua/pic/usa/_can1.jpg" alt="" /></a><span>Закаты популярны</span></p>
<p class="img"><a href="http://cssing.org.ua/pic/usa/can5.jpg"><img width="480" height="320" src="http://cssing.org.ua/pic/usa/_can5.jpg" alt="" /></a><span>На закате очень красно</span></p>
<p class="img"><a href="http://cssing.org.ua/pic/usa/can.jpg"><img width="480" height="314" src="http://cssing.org.ua/pic/usa/_can.jpg" alt="" /></a><span>Каньон</span></p>
<p>Мне, разумеется, понравилось. Вернусь. =)</p>
<p><a href="http://www.flickr.com/photos/akella/sets/72157622082296187/">Еще немного фоток</a>.</p>
<p>P.S.: А вот на <a href="http://www.sixflags.com/magicmountain/rides/x2.aspx">этих</a> <a href="http://www.youtube.com/watch?v=3-y-0IFiZqY&feature=fvw">горках</a> (не бойтесь, вы забудете что видели это видео после первых 30 секунд аттракциона) я просто не смог не кричать (мне казалось что только это может меня спасти):</p>
<p class="img"><img width="480" height="720" src="http://cssing.org.ua/pic/usa/flag.jpg" alt="" /><span>Вот эти парни сейчас начнут падать головой вниз. Понимаете?</span></p>
Блог на HTML5
2009-06-16T00:00:00Z
https://cssing.org.ua/2009/06/16/html5-wordpress/
<p>Это было так просто, что я не удержался. Новые таги такие миленькие! ;-) <!--more--></p>
<h3>Доктайп и новые таги</h3>
На самом деле больше ничего и не изменилось. Ну, кроме, соответствующих изменений в CSS блога.
Доктайп не может не радовать, тем что его впервые в жизни можно выучить наизусть (невалидные не предлагать, я приличный верстальщик):
<ol class="code">
<li><!DOCTYPE html></li>
</ol>
Класс, да? =)
<p>В HTML5 ввели несколько структурных тагов, собственно, они — почти единственное, что можно использовать из нового стандарта прямо сейчас. Потому я просто немного переписал HTML для блога, чтобы он стал более понятным.<br />
Самые приятные новые таги будут: <code><strong><header>,<footer>,<nav>,<article></strong></code> — говорят сами за себя.</p>
<p><code><strong><aside></strong></code> — вторичный контент, то, что обычно в сайдбаре.</p>
<p><code><strong><section></strong></code> — какой-то смысловой раздел документа.</p>
<h3>Собственно переход</h3>
Все очень просто, если у меня в коде было:
<ol class="code">
<li><!‐‐ BEGIN .hentry ‐‐></li>
<li><div class='hentry'></li>
<li class="tab"> content</li>
<li></div></li>
<li><!‐‐ END .hentry ‐‐></li>
</ol>
То стало:
<ol class="code">
<li><article class='hentry'></li>
<li class="tab"> content</li>
<li></article></li>
</ol>
И комментарии вобщем излишни. Я и класс-то оставляю только ради микроформатов, но по-хорошему они должны будут понимать и сам таг article.
Таким же образом боковая колонка:
<ol class="code">
<li><!‐‐ BEGIN .secondary ‐‐></li>
<li><div class='secondary'></li>
<li class="tab">боковая колонка</li>
<li></div></li>
<li><!‐‐ END .secondary ‐‐></li>
</ol>
превращается в:
<ol class="code">
<li><aside></li>
<li class="tab">боковая колонка</li>
<li></aside></li>
</ol>
И если все показать целиком:
<p class="img con"><img src="http://cssing.org.ua/pic/html5/smallhtml5.png" width="455" height="390" /><span>Новые таги</span></p>
Их же можно увидеть если сделать View Source на этой страничке сейчас.
Есть в этом какая-то красота :).
<p>На самом деле оставшиеся классы и айди почти полностью мог бы заменить суперсемантичный атрибут <code>role</code>, но атрибутивные селекторы пока не всем доступны. А было бы красиво:</p>
<ol class="code">
<li><section role="maincontent"></li>
</ol>
А в CSS:
<ol class="code">
<li>section[role=maincontent] {</li>
<li class="tab">bla:bla;</li>
<li class="tab">}</li>
</ol>
Код почти читается.
<h3>Оговорки в использовании</h3>
IE по умолчанию не будет давать возможности стилизовать новые таги. Однако, с помощью джаваскрипта его можно заставить (возможно кто-то помнит, как это было с <code><acronym></code>):
<ol class="code">
<li><!‐‐[if IE]></li>
<li class="tab"><script></li>
<li class="tabtab">document.createElement('header');</li>
<li class="tabtab">document.createElement('footer');</li>
<li class="tabtab">document.createElement('section');</li>
<li class="tabtab">document.createElement('aside');</li>
<li class="tabtab">document.createElement('nav');</li>
<li class="tabtab">document.createElement('article');</li>
<li class="tab"></script>
</li><li><![endif]‐‐>
</li></ol>
Это все новые таги, которые я использовал для блога.
<p>Вторым нюансом является то, что эти элементы во всех браузерах по умолчанию будут инлайновыми. То есть вам придется написать в CSS что-то вроде:</p>
<ol class="code">
<li>header, nav, article, footer,section {</li>
<li class="tab">display:block;</li>
<li class="tab">}</li>
</ol>
С этим можно жить.
<p>Третий и последний нюанс. Некоторые браузеры (Camino, Firefox2) будут некорректно строить DOM c новыми тагами. Чтобы решить этот вопрос, по злой иронии, вам придется отсылать вашу HTML5 страничку с контент-тайпом <code>application/xhtml+xml</code>. Но я голосую за вариант: «Наплевать».</p>
<h3>Сладкое </h3>
В HTML5 добавили таги <code><video></code> и <code><audio></code>:
<ol class="code">
<li><video src='xxx.yyy' autoplay controls></li>
<li class="tab"><a href=''xxx.yyy''>Download this video (или другой альтернативный контент, если видео на загрузится)</a></li>
<li></video></li>
</ol>
Вот так выглядят сейчас дефолтовые проигрыватели видео в браузерах:
<p class="img"><img src="http://cssing.org.ua/pic/html5/safari_video.png" width="400" height="225" /><span>В Сафари, не очень красивые дефолтовые контролы</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/html5/firefox_video.png" width="360" height="240" /><span>В Firefox 3.5b</span></p>
Opera решила выпустить только одну версию своего браузера поддерживающую <video>. Потому чтобы увидеть видео в действии вам <a href="http://dev.opera.com/articles/view/a-call-for-video-on-the-web-opera-vid/">понадобится даунгрейдиться до 9.52</a>. Спасибо <a href="http://twitter.com/pepelsbey/status/2184205937">@pepelsbey</a> из Оперы за разъяснения ;)
Однако, вот так выглядит там проигрывание видео:
<p class="img"><img src="http://cssing.org.ua/pic/html5/opera_video.png" width="360" height="240" /><span>В Opera 9.52, на иконку «Пауза» я навел курсор. </span></p>
Во всех браузерах контролы исчезают когда курсор не на видео.
<p>Оценивать красоту пока бессмысленно, мы все просто играем с новым понятием. Но я решил что будет интересно посмотреть, как это выглядит сейчас. В любом случае с помощью несложного javascript можно создать свои собственные элементы управления, любого внешнего вида. В этом, собственно, и преимущество того, что видео доверили браузерам.</p>
<p>О том как использовать HTML5-видео уже сейчас <a href="http://camendesign.com/code/video_for_everybody">читайте дальше</a>.</p>
<h3>Ссылки</h3>
Не стоит расстраиваться что HTML5 еще не стандарт, и получит статус «Proposed recommendation» лишь в 2022 году. Он уже частично поддерживается браузерами, и большие компании начинают с ним играться. Поиграйтесь и вы. ;)
На самом деле войдет в обиход гораздо раньше, не стоит пугаться 22го года.
<ul>
<li><a href="http://dev.w3.org/html5/spec/Overview.html">HTML5 Editor's Draft</a> — главная информация что есть на данный момент об HTML5</li>
<li><a href="http://www.youtube.com/html5">HTML5 на YouTube</a> и на сайте компании <a href="http://apple.com/">Apple</a></li>
<li><a href="http://camendesign.com/code/video_for_everybody">Про использование html5-video уже сейчас</a></li>
<li><a href="http://www.brucelawson.co.uk/2009/html-5-elements-test/">HTML 5 elements test</a> (и <a href="http://www.brucelawson.co.uk/tests/html5-elements.html">пример странички</a>)</li>
<li><a href="http://orderedlist.com/articles/structural-tags-in-html5">Structural Tags in HTML5</a> от Steve Smith</li>
<li><a href="http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers">Поддержка всяких модных фич в браузерах</a></li>
<li><a href="http://html5.validator.nu/">Экспериментальный HTML5-валидатор</a> да и <a href="http://validator.w3.org/">обычный</a> уже тоже проверяет HTML5</li>
<li><a href="http://www.alistapart.com/articles/previewofhtml5">Статья про HTML5 на A List Apart</a></li>
<li><a href="http://ishtml5readyyet.com/">Готов ли HTML5?</a></li>
</ul>
<p>Если с переходом на HTML5 что-то поломалось, я буду рад это услышать! Уж больно гладко все. Я даже <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fcssing.org.ua%2F">прошел валидацию</a>.<br />
И, да, это все пока лишь эксперименты. Не для серьезного использования, конечно.</p>
<p>Но, с HTML5 снова стало приятно расставлять таги. Всё как в первый раз. :)</p>
Копировать в буфер
2009-04-15T00:00:00Z
https://cssing.org.ua/2009/04/15/copy-to-clipboard-javascrip/
<p>Не самая критичная фича, но весьма специфическая в реализации. <!--more--></p>
<h3>Что это и зачем</h3>
Обычно эту кнопку помещают возле всяких «кодов для вставки» видео, или картинок. Чтобы людям было проще копировать. Как-то так:
<p class="img"><img src="http://cssing.org.ua/examples/clipboard/bitly.png" width="452" height="173" alt="копирование на bit.ly" /><span>Копирование ссылки на одном из укоротителей ссылок</span></p>
<p class="img"><img src="http://cssing.org.ua/examples/clipboard/dni.png" width="392" height="146" alt="копирование на дни.ру" /><span>Копирование кода на dni.ru</span></p>
<h3>Как это делают</h3>
Скопировать в буфер в IE можно обычным джаваскриптом:
<ol class="code">
<li>window.clipboardData.setData('Text','Текст который будет в буфере');</li>
</ol>
У всех остальных браузеров настройки безопасности по дефолту не позволят это сделать. Потому обычно этот вопрос решали с помощью Flash. Динамически создавался флэш ролик, и в его параметры добавляли текст, который нужно было поместить в буфер. А сам флэш уже имеет доступ к буферу в любой системе-браузере, примерно так:
<ol class="code">
<li>flash = '<embed src="copy.swf" FlashVars="clipboard='+encodeURIComponent(t)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';</li>
<li>element.innerHTML = flash;</li>
</ol>
Ролик запрограммирован так, что при создании сразу копирует свой параметр clipboard пользователю в буфер.
Так это всегда и работало. Но.
<h3>Проблема</h3>
Однако, осенью 2008 в флэше нашелся эксплойт, благодаря которому злоумышленники могли как угодно использовать буфер обмена пользователя без его ведома (собственно, метод описанный выше и был эксплойтом). Поэтому в Flash 10 <a href="http://www.adobe.com/devnet/flashplayer/articles/fplayer10_security_changes_02.html#head31">было введено ограничение</a>
<blockquote>With Flash Player 10, the System.setClipboard() method may be successfully called only through ActionScript that originates <strong>from user interaction</strong>.</blockquote>
Потому, на самом деле, вся та <a href="http://yangshuai.googlepages.com/jquerycopyplugin">куча</a> <a href="http://plugins.jquery.com/project/clipboard">плагинов</a> для jquery, например, которые вы нагуглите по запросу «jquery copy to clipboard» попросту не работает в 10м Flash плеере.
При этом, они отлично работают в 8 и 9 версиях (что внесло кучу путаницы в разбирательство с ситуацией). Но учитывая что <a href="http://www.adobe.com/products/player_census/flashplayer/version_penetration.html">10й имеет долю больше 50%</a> нет никакого смысла его игнорировать. Копирование в буфер старым способом больше нельзя считать надежным.
<h3>Решение</h3>
Так как мне в одном из проектов совершенно обязательно надо было реализовать эту фичу. Пришлось использовать единственный на данный момент вариант. Его я сделал реиспользуемым в своих же интересах.
Способ прост: если нельзя скопировать без клика на флэше, значит будем кликать на флэш.
<a href="http://mega.genn.org/">Genn</a> помог с самой простой и гибкой реализацией этой идеи.
Мы создали флэш-кнопку в качестве параметров которой передаются:
<ul>
<li><code>clipboard</code> — текст который нужно скопировать в буфер</li>
<li><code>normal</code> — картинка для для дефолтового состояния кнопки</li>
<li><code>hover</code> — картинка для mouseover состояния кнопки </li>
<li><code>pressed</code> — картинка для нажатого состояния кнопки</li>
</ul>
hover и pressed можно не задавать, тогда кнопка просто не будет изменяться при клике и наведении курсора. Текст из переменной <code>clipboard</code> копируется в буфер <em>при клике</em> на кнопку.
Для примера взял две такие картинки:
<p class="img"><img src="http://cssing.org.ua/examples/clip/nav.png" width="200" height="200" alt="картинка" /><span>Зеленая дефолтовая, синяя для нажатого состояния. Потому что зеленый круче.</span></p>
И <a href="http://cssing.org.ua/examples/clipboard/">самый простой пример иллюстрирующий применение</a>, там же и другие примеры. Фактически с помощью одного этого ролика можно сделать почти любую нужную кнопку. Для чего я, собственно, это все и затеял =)
<h3>Ссылки</h3>
<ul>
<li><a href="http://www.adobe.com/products/player_census/flashplayer/version_penetration.html">Апдейт флэша в котором запретили копировать в буфер без действий пользователя</a></li>
<li><a href="http://blog.guya.net/2008/09/21/thanx-for-not-killing-the-flash-clipboard/">Thanx for not killing the Flash clipboard</a></li>
<li><a href="http://cssing.org.ua/examples/clipboard">Примеры кнопок</a> (<a href="http://cssing.org.ua/examples/clipboard/clipboard.zip">скачать файлы</a>)</li>
<li><a href="http://riamatic.com/2009/01/20/clipboard-javascript-flash/">Автоматизированный вариант с mootools</a></li>
<li><a href="http://beckelman.net/post/2009/01/22/Copy-to-Clipboard-with-ZeroClipboard-Flash-10-and-jQuery.aspx">Способ с джаваскриптом подставляющим поверх кнопок прозрачный флэш-ролик</a> (Спасибо Иван!)</li>
<li><a href="http://mega.genn.org/2009/flash-antipasti/">Пост на mega.genn.org про эти кнопочки</a></li>
</ul>
<p>Собственно пост я написал чтобы никто не пытался реализовать копирование в буфер с помощью старого джаваскрипта. И чтобы никогда больше не волноваться об этой проблеме самому. =)</p>
<p><strong>Update</strong>: Как оказалось этот флэш-метод не работает на Ubuntu c Gnash/swfdec. Однако на этих эмуляторах не работают и никакие другие методы. Спасибо <a href="http://blog.sjinks.org.ua/">Владимиру</a> за указание на проблему!</p>
Простой аккордеон
2009-03-30T00:00:00Z
https://cssing.org.ua/2009/03/30/simple-handcoded-accordion/
<p>Это те самые, странно разворачивающиеся и очень редко нужные менюшки. ;)<!--more--><br />
Так как jquery стал почти стандартом в индустрии, дальше я буду говорить только о нем.</p>
<h3>Проблема</h3>
На сайте понадобился такой элемент. Выглядят они <a href="http://cssing.org.ua/examples/acco/">обычно как-то так</a>. Я буду считать что один из его блоков должен быть всегда открыт, но на деле, это не очень важно.
Ну и предполагаем, что по невероятному совпадению на сайте уже есть jquery. Потому что подключать его только ради меню глупо, согласитесь. Но, если очень хочется, то, как всегда, можно.
HTML — обычный <code>dl</code>, в котором <code>dt</code> будут кликаться, а <code>dd</code> раскрываться, вот такой:
<ol class="code">
<li><dl></li>
<li><dt class="b-acc">Заголовок</dt></li>
<li><dd></li>
<li class="tab">Контент</li>
<li></dd></li>
<li>...</li>
</ol>
И все видимые блоки имеют фиксированную высоту 150px.
<h3>#1: Своими силами</h3>
Сделать такой эффект своими силами вроде бы совсем несложно. Всего-то нужно схлопывать-расхлопывать два блока одновременно.
<ol class="code">
<li>$(".b-acc").click(function(){</li>
<li class="tab">if($(this).hasClass('b-acc-active')) {</li>
<li class="tabtab"><small>// сделать что-то если блок уже открыт</small></li>
<li class="tabtab">}</li>
<li class="tab">else{</li>
<li class="tabtab">$("dd:visible").slideUp();<small>// закрыть «видимый» блок</small></li>
<li class="tabtab">$(this).next().slideDown();<small>// открыть новый блок</small></li>
<li class="tabtab"><small>// и переключить класс b-acc-active</small></li>
<li class="tabtab">...</li>
<li class="tabtab">}</li>
<li class="tab">return;</li>
<li>});</li>
</ol>
Можно <a href="http://cssing.org.ua/examples/acco/index_simple.html">посмотреть в работе</a>. На первый взгляд все отлично.
Однако, если присмотреться, во время анимаций нижняя граница аккордеона скачет. В некоторых проектах на это и можно закрыть глаза, но когда под аккордеоном куча контента, который будет прыгать на 1-2 пикселя, это очень неприятно.
Пришлось искать решение.
<h3>#2: Плагин</h3>
Это будет первое что вы нагуглите. Проще всего его подключить и вызвать. И если всем плевать на размер файла, а также на то, что вы подключили кучу мусора (разве что ваш сайт будет увешан всеми видами аккордеонов). На этом можно и закончить уже разработку.
<p>Я сделал простой <a href="http://cssing.org.ua/examples/acco/index_plugin.html">пример работы плагина</a>. Нижняя кромка больше не прыгает.<br />
Однако добавилось <em>8 Кбайтов плагина</em>.</p>
<h3>#3: Улучшенный вариант</h3>
Но так хотелось все оставить простым, так не хотелось подключать кучу лишнего кода, который, я знал, никому на сайте уже не понадобится. И я решил раскопать проблему, почему же нижняя граница дергается, и как это все исправить.
В конце концов оказалось, что функции slideUp и slideDown меняют высоту блоков не по целым значениям. То есть, в процессе анимации высоте блока присваиваются значения вроде 2.157305232px. При этом, округление в браузерах работает очень по-разному, что и приводило к «вибрации» нижней кромки аккордеона.
<p>Наконец забравшись в недра плагина, я нашел решение, которое также познакомило меня с малоизвестными возможностями jquery.<br />
Идея примерно такая: мы начинаем «схлопывать» видимый блок, при этом, на каждом шаге анимации, рассчитывать высоту расхлопываемого блока так, чтобы сумма их оставалась константой. То есть, если на каком-то шаге высота закрываемого 50 пикселей, то высота открываемого будет 100 (в сумме 150px).</p>
<p>Для этого в jquery есть специальный механизм. В функции animate, есть возможность исполнять что-то на каждом шаге анимации. Называется этот коллбэк — step.<br />
Финальное работающее решение выглядит примерно так:</p>
<ol class="code">
<li>toShow = $(this).next();</li>
<li>toHide = $(".accordion dd:visible");</li>
<li> </li>
<li>staticheight = toHide.height(); <small>//определить высоту блоков, 150px</small></li>
<li>toShow.css({ height: 0,display: 'block' }); <small>// открываемый делаем "видимым" с высотой 0, теперь он готов к анимации</small></li>
<li>toHide.animate({height:"hide"},{ <small>// начинаем скрывать видимый</small></li>
<li class="tab">step: function(now) { <small>// на каждом шаге выполняем, now - значение height в каждый момент</small></li>
<li class="tabtab">var current = staticheight - now; <small>// собственно рассчет</small></li>
<li class="tabtab">if ($.browser.msie || $.browser.opera || $.browser.safari) { <small>// все округляют по-своему</small></li>
<li class="tabtabtab">current = Math.ceil(current);</li>
<li class="tabtab">}</li>
<li class="tabtab">toShow.height(current); <small>// присваиваем высоту</small></li>
<li class="tab">},</li>
<li class="tab">duration: 500</li>
<li>});</li>
</ol>
<a href="http://cssing.org.ua/examples/acco/">Работающий пример.</a> Вуаля, нижняя граница опять зафиксирована, и мы сэкономили 7 Кбайт несжатого кода.
<p>Понятно что конкретно этот аккордеон не универсален, но зная как работает step можно легко применить его к любому другому способу.</p>
<h3>В конце</h3>
Все это далеко не rocket science, но мои долгие попытки найти легкое решение этой проблемы приводили только к плагину. Который я, ну никак не хотел подключать. Потому надеюсь кому-то это сэкономит усилия и код. И буду рад услышать ваше мнение об этом.
<p>Разумеется, только ради аккордеона не стоит подключать jquery, но, обычно, сайты с такими навороченными меню содержат еще кучу всяких анимаций и действий. И потому, в результате, все равно удобнее использовать фреймворк для разработки.</p>
<h3>Ссылки</h3>
<ul>
<li><a href="http://docs.jquery.com/UI/Accordion">Плагин для jquery</a></li>
<li><a href="https://cssing.org.ua/2009/03/30/simple-handcoded-accordion/#">Ссылку на документацию step, найти не удалось, был бы благодарен, если кто-то сталкивался</a></li>
<li><a href="http://cssing.org.ua/examples/acco/index_plugin.html">Пример с плагином</a></li>
<li><a href="http://cssing.org.ua/examples/acco/index_simple.html">Пример своими силами</a></li>
<li><a href="http://cssing.org.ua/examples/acco/">Пример своими силами, с зафиксированной нижней кромкой</a></li>
</ul>
Яндекс-Субботник, 31 января, Москва
2009-02-01T00:00:00Z
https://cssing.org.ua/2009/02/01/subbotnik/
<p>День удался. Ездил в Москву <a href="http://clubs.ya.ru/company/replies.xml?item_no=14661&ncrnd=5331">послушать крымчан, и не только</a>. Фотки и впечатления.</p>
<!--more-->
<h3>Вадим Макишвили и IntelliJ IDEA</h3>
Вадим начал с великолепного философского вступления о FAR и роботах. Он признался, что ему, к сожалению, не заплатили, и он не собирался никого агитировать за свой редактор (но не потому, что не заплатили!). Просто делился приятным опытом разработки в этом приложении.
<p class="img"><img width="480" height="360" src="http://cssing.org.ua/pic/subbotnik/1.jpg" alt="Тут я жил 16 лет ;)" /><span>Вадим Макишвили об IntelliJ IDEA</span></p>
Дальше речь пошла о настройке и фичах IntelliJ IDEA. Похоже большая часть сервисов Яндекса написана именно в нем.
<p>Редактор предназначался для Java, но в нем оказалось так много вкусных фич для вёрстки, что никто не устоял. Если вкратце, то, что особенно понравилось мне: удобная валидация, возможность добавления своих DTD для валидации, продвинутый автокомплит, удобство организации проектов и интеграция с SVN.</p>
<p>Рассказывать больше пожалуй нет смысла, стоит один раз попробовать. Для начала рекомендую прослушать доклад Вадима, там описываются некоторые неочевидные настройки, из-за которых вы можете не докопаться до подлинного сокровища, которым этот редактор является.</p>
<p>IntelliJ IDEA платный, но если скачивать бета-версии, которые почти не падают, можно пользоваться им бесплатно.</p>
<p><a href="http://makishvili.com/2009/02/verstka-v-intellijidea-1/">Подробнее об IntelliJ IDEA в блоге Вадима Макишвили</a></p>
<h3>Наталья Макишвили и вёрстка под мобильные телефоны</h3>
Именно телефоны, а не ПДА, КПК и т д. Доклад про смартфоны будет следующим, как заявила Наталья.
<p>Милый курьез, в докладе:</p>
<blockquote>
<p>Вопрос из зала: -А как вы тестируете? У вас что, 50 мобильных там лежит что ли?!<br />
Наталья со смехом: -Нет-нет, ну что вы, конечно не 50... Всего лишь 30.</p>
</blockquote>
<p class="img"><img width="480" height="360" src="http://cssing.org.ua/pic/subbotnik/6.jpg" alt="тестовые мобильники в яндексе" /><span>Всего-то 24 на фото :-P</span></p>
<p>Сначала было просто интересно. Однако, после нескольких слайдов, когда оказалось, что часто нельзя менять шрифт или задавать фон, я сильно погрустнел.</p>
<p>Первое впечатление было конечно, что вообще ничего нельзя и лучше писать все в HTML-стиле 90х. Но в конце сказали что у Яндекса получается прятать все хаки в CSS, и отдавать всем мобильным один HTML. Что уже вобщем оглушительный успех, учитывая всякие такие штуки:</p>
<p class="img"><img width="480" height="360" src="http://cssing.org.ua/pic/subbotnik/7.jpg" alt="Эрикссон молодец!" /><span>Русский италик не везде есть</span></p>
И еще пара забавных слайдов которыми со мной любезно поделилась Наталья:
<p class="img con"><img width="480" height="348" src="http://cssing.org.ua/pic/subbotnik/9.jpg" alt="Фоновіе картинки на мобильных" /><span>Так работает фон</span></p>
<p class="img con"><img width="480" height="308" src="http://cssing.org.ua/pic/subbotnik/10.jpg" alt="Заголовки на мобильных" /><span>И, да, часто нельзя менять размер-семейство шрифта</span></p>
Слайд про то как выглядит жирный текст, я решил не показывать, чтобы никого не травмировать.
<p>Но жить в целом можно, в докладе была куча полезных советов, очень рекомендую ознакомиться причастным к мобильным сайтам.</p>
<p>Занимательные факты: за прошедший год мобильная аудитория Яндекса выросла в 5 раз, айфоны составляют 2% от мобильной аудитории.</p>
<p>Любопытно, что самым популярным мобильным с которым ходят на Яндекс оказалась Nokia 6300. Такая же как у верстальщицы мобильных версий, как выяснилось. И почти такая же, как была у меня. ;)</p>
<h3>Виталий Харисов про CSS Framework</h3>
Этот фреймворк не похож на другие, ибо в его основе лежит не «набор полезных CSS правил которые сэкономят вам время», а «идея упорядочивания CSS для проектов с неограниченным ростом». Звучит сложно, но на самом деле это просто формализированный <abbr title="Объектно Ориентированный">ОО</abbr> CSS. Который в той или иной мере применяют многие опытные верстуны. Но, на этот раз, правила установлены четко, и это работает для проектов Яндекса.
<p class="img"><img width="250" height="493" src="http://cssing.org.ua/pic/subbotnik/2.jpg" alt="Харисов про CSS Framework" /><span>«ИЕ недобраузер, если это вообще браузер»</span></p>
<p>Фреймворк является логическим расширением старой идеи <a href="http://vitaly.harisov.name/article/independent-blocks.html">Виталия о независимых блоках</a>. Но теперь кроме правил CSS-кода включает в себя правила упорядочивания CSS-файлов.</p>
<p>Идея, я считаю, очень сильная. Часть этого фреймворка, решающая типовые проблемы: вроде круглых уголков, и PNG прозрачности, <a href="http://vitaly.harisov.name/article/css-framework-examples.zip">была выложена Виталием в онлайн</a>. И кто хочет, может ее поизучать. Фактически, живой кусочек будущей вёрстки Яндекса, без лишнего кода (конкретного дизайна страниц яндекса).</p>
<p>Не пугайтесь кол-ва CSS-файлов, для продакшн версии сайта они сливаются в один.<br />
Можете сравнить например файл «<a href="http://blogs.yandex.ru/css/page-index.css">до деплоймента</a>» и в «<a href="http://blogs.yandex.ru/css/_page-index.css">боевом виде</a>». Они абсолютно эквивалентны. Но первый используется только при разработке.</p>
<p>Идея очень клевая, в маленьких проектах выигрыш будет лишь в поддержке, но в больших и средних разработка заметно выиграет. <!--Любопытно, что под концепцию этого фреймворка теперь выстроится и XSL и серверная часть Яндекса. Вот так верстальщики могут проектировать порталы ;) Математика и правильные абстракции торжествуют над жалкими знаниями в конкретных областях. --></p>
<p>Было и несколько относительно свежих идей:</p>
<p class="img"><img width="480" height="360" src="http://cssing.org.ua/pic/subbotnik/3.jpg" alt="Трюк с CSS для ИЕ" /><span>Таким образом, запрос к серверу только один. Идеей с Виталием поделился Алексей Тен.</span></p>
<p class="img"><img width="480" height="360" src="http://cssing.org.ua/pic/subbotnik/4.jpg" alt="Кешируемый expression" /><span>Кешируемый expression, уже не раз упоминали, не лишне.</span></p>
<a href="http://twitter.com/akella/status/1164377523">Вспоминали и про таблицы</a>.
<h3>Фёдор Голубев про Яндекс.Карты</h3>
Наконец появился так называемый Static API, с помощью которого вы можете просто поставить точку на карте, и вставить себе в сайт статическую картинку которая будет показывать эту точку. То, что я уже десяток раз успел сделать вручную ;).
Наконец-то это можно <a href="http://api.yandex.ru/maps/tools/draw/">сделать вот тут</a>:
<p class="img"><img width="480" height="303" src="http://static-maps.yandex.ru/1.x/?ll=33.356243,45.193017&z=13&l=map&size=480,303&pt=33.345086,45.194942,pmorl&wizard=draw&key=AGWShUkBAAAAdGI9NAMAKvE2Tf4x2knG_JstjToVaIt48KUAAAAAAAAAAACHiYtABzYjhUZ1kNcUIMgeC02YCQ==" alt="Тут я жил 16 лет ;)" /><span>Неизвестный смельчак перенёс в этой точке годы кормления манной кашей</span></p>
<p>Вся документация находится на <a href="http://api.yandex.ru/maps/">сайте компании</a>. И если потратить еще одну минуту и пару наноджоулей работы, можно вфигачить себе на сайт даже такое, потягайте:</p>
<script src="http://api-maps.yandex.ru/1.0/?key=AGWShUkBAAAAdGI9NAMAKvE2Tf4x2knG_JstjToVaIt48KUAAAAAAAAAAACHiYtABzYjhUZ1kNcUIMgeC02YCQ==" type="text/javascript"></script>
<div class="img"><div id="YMapsID" style="height:400px; width:480px;"></div><p>Потягайте карту</p></div>
<script type="text/javascript">
var map;
function init () {
map = new YMaps.Map( document.getElementById("YMapsID") );
map.setCenter(new YMaps.GeoPoint(33.377758,45.200569), 10,
YMaps.MapType.MAP);
};
init();
</script>
<p>Для меня же остается загадкой, почему такой элементарный функционал как метка, и возможность работы с картой пока не совмещен. Ну да, галочки очень удобно ставить джаваскриптом. Да, <em>удобно</em>. Жаль не успел спросить на самом субботнике.</p>
<p>В основном разговор шел про новооткрытый API для карт от Яндекса, о том как круто можно его встроить в ваш сайт, отмечая там всевозможные точки, и показывая любые локации, управляя всем этим.</p>
<p>Как они сами говорят, если бы дело было только в картах, то мы фактически создали себе конкурентов своим же API.</p>
<h3>Евгения Фирсова про деплоймент и Вадим Макеев про Паровоз</h3>
Евгения руководит группой верстальщиков для проекта Яндекс.Деньги. Информации в докладе было просто адски много, но не про меня. Потому под конец дня ничего не улеглось в голове. Последние два года я удалился от сервисов массового обслуживания, и уже стал забывать времена стресс-апдейтов в ukr.net. Так что эту информацию лучше читайте в других отчетах, или в официальном.
<p><a href="http://pepelsbey.net/">Вадим</a>, еще раз клево рассказал о всяких трюках с Photoshop'ом чтобы упростить жизнь верстальщикам. Прелюдно дал слово опубликовать статью с полным текстом доклада у себя в блоге. Ждем ;).</p>
<p class="img"><img width="480" height="360" src="http://cssing.org.ua/pic/subbotnik/5.jpg" alt="Вадим Макеев" /><span>Вадим и Кнопка</span></p>
<h3>Ссылки</h3>
<ul>
<li><a href="http://company.yandex.ru/experience/">Презентации с субботника</a></li>
<li><a href="http://fotki.yandex.ru/users/tarja2/album/64600/">Фотоальбом субботника</a> и еще один <a href="http://www.flickr.com/photos/miripiruni/tags/%D1%8F%D1%81%D1%83%D0%B1%D0%B1%D0%BE%D1%82%D0%BD%D0%B8%D0%BA/">фотоотчет</a></li>
<li><a href="http://blogs.yandex.ru/search.xml?text=%D1%8F%D0%BD%D0%B4%D0%B5%D0%BA%D1%81+%D1%81%D1%83%D0%B1%D0%B1%D0%BE%D1%82%D0%BD%D0%B8%D0%BA">Другие отчеты</a></li>
<li><a href="http://habrahabr.ru/blogs/yandex/50766/">Развернутый отличный отчет absolvo</a></li>
<li><a href="http://maltseff.livejournal.com/151653.html">Короткое впечатление Андрея Мальцева</a></li>
<li><a href="http://tachisis.livejournal.com/545599.html">Отзыв tachisis</a></li>
<li><a href="http://live.miripiruni.org/2009/02/01/1/">Отзыв от miripiruni</a></li>
</ul>
<h3>Отлично!</h3>
Спасибо Яндексу, спасибо его докладчикам. Клевый вышел день ;) Отличное уютное мероприятие. Много-много знакомых хороших людей.
<p>Pssst! такая чисто верстальщицкая однодневная штука была бы интересна кому-то в Киеве? =)</p>
CSSing 2008
2008-12-30T00:00:00Z
https://cssing.org.ua/2008/12/30/cssing-2008/
<p>Самое интересное опубликованное в этом блоге за год.</p>
<!--more-->
<h3>В хронологическом порядке</h3>
<ul>
<li><a href="http://cssing.org.ua/2008/01/08/find-a-bug/">Как найти баг в вёрстке</a> — самый простой и надежный способ обнаружить ошибку в верстке</li>
<li><a href="http://cssing.org.ua/2008/01/21/envision-2008-prague/">Envision, 14-15 января, Прага</a> — отчет о конференции для дизайнеров, организатором был Microsoft, основными темами: будущее дизайна, инструменты дизайнеров</li>
<li><a href="http://cssing.org.ua/2008/01/28/time-management-2/">Успеть всё или управление временем</a> — мой перевод статьи Кейт Робинсон о том, как экономить время в повседневной айти-жизни</li>
<li><a href="http://cssing.org.ua/2008/02/13/barcamp-riga/">Barcamp, 8-10 февраля, Рига</a> — самое интересное с первого латвийского баркемпа</li>
<li><a href="http://cssing.org.ua/2008/02/25/permova-kiev-2008/">Perl мова, 23 февраля, Киев</a> — отчет о перловой конференции проведенной в Киеве</li>
<li><a href="http://cssing.org.ua/2008/02/27/5-things-icant-live-without/">5 инструментов</a> — несколько приложений без которых я не могу жить, а также чужие списки</li>
<li><a href="http://cssing.org.ua/2008/03/01/miyamoto-musasi/">Миямото Мусаси и вёрстка</a> — параллели между учением одного из знаменитейших японских воинов и бытом фрилансера-верстальщика</li>
<li><a href="http://cssing.org.ua/2008/03/09/ul-li-ie-bug/">Проблема со списками в IE</a> — описание и решение стандартного бага со списками в ИЕ</li>
<li><a href="http://cssing.org.ua/2008/03/30/uaweb2008-done/">UA WEB 2008 состоялся!</a> — отчет о первой конференции веб-разработчиков которую я организовал</li>
<li><a href="http://cssing.org.ua/2008/04/07/css-print-framework/">CSS print framework</a> — безжалостная эксплуатация термина framework для некоторых советов по стилям для печати</li>
<li><a href="http://cssing.org.ua/2008/04/18/rit-2008-moscow/">РИТ 2008, 14-15 апреля, Москва</a> — фото, выступления</li>
<li><a href="http://cssing.org.ua/2008/05/04/idea-to-action-smth-is-missin/">От идеи к действию: что мешает?</a> — мои мысли о том как перестать собираться что-то сделать, и начать это делать</li>
<li><a href="http://cssing.org.ua/2008/05/21/5-things-to-remembe/">5 советов верстальщику</a> — мои, и не только мои советы верстальщикам, эстафета получилась большой и интересной.</li>
<li><a href="http://cssing.org.ua/2008/05/29/mobile-web-some-facts/">Интересное о мобильном интернете</a> — некоторые знания вынесенные из конкурса на лучшую статью о мобильном интернет.</li>
<li><a href="http://cssing.org.ua/2008/06/23/rounded-corners-unusual-approach/">Круглые уголки, интересные варианты</a> — несколько подсмотренных техник для круглых уголков</li>
<li><a href="http://cssing.org.ua/2008/08/29/float-mess/">Какие-то сложные игры c флоатами</a> — по-другому и правда не скажешь. Необычный clear'инг</li>
<li><a href="http://cssing.org.ua/2008/09/17/adaptive-boxes/">Адаптивные блоки</a> — несколько способов адаптировать кол-во отображаемых в строку элементов в зависимости от размера экрана</li>
<li><a href="http://cssing.org.ua/2008/10/01/clip-it-baby/">Применение clip для PNG в ИЕ </a> — эмуляция свойства background-position для полупрозрачных PNG-картинок в ИЕ</li>
<li><a href="http://cssing.org.ua/2008/11/07/png-8-alpha/">Альфа-каналы в PNG-8</a> — пост-напоминание, они (каналы) <em>есть</em>. Полупрозрачные картинки из 256 цветов</li>
<li><a href="http://cssing.org.ua/2008/11/18/hakon-wium-lie-css-educamp/">Håkon Wium Lie, CSS и educamp</a> — приезд одного из создателей CSS в Киев, видео, информация и фото</li>
<li><a href="http://cssing.org.ua/2008/12/07/internet-explorer-z-index/">Internet Explorer и z-index</a> — описание одного распространенного и вредного бага в ИЕ</li>
<li><a href="http://cssing.org.ua/2008/12/19/clienttech/">Clienttech, 15-16 декабря, Москва</a> — отчет о конференции посвященной клиентским технологиям</li>
</ul>
<h3>В прошлом</h3>
<ul>
<li><a href="http://cssing.org.ua/2005/12/27/cssing-highlights-2005/">Лучшее за 2005</a></li>
<li><a href="http://cssing.org.ua/2006/12/28/cssing-2006/">Лучшее за 2006</a></li>
<li><a href="http://cssing.org.ua/2007/12/27/cssing-2007/">Лучшее за 2007</a></li>
</ul>
<p>Спасибо всем кто читал, надеюсь вам нравится.<br />
С наступающим всех! ;)</p>
Clienttech, 15-16 декабря, Москва
2008-12-19T00:00:00Z
https://cssing.org.ua/2008/12/19/clienttech/
<p>побывал на <a href="http://www.clienttech.ru/">конференции</a> посвященной клиентским технологиям. Фотки, презентации, полезное.<!--more--><br />
Я был всего один день, потому выступления многих юзабилистов и флешеров пропустил, к своему сожалению.</p>
<h3>Баги в вёрстке и печатные версии</h3>
Наталья Арефьева поделилась коллекцией свежих багов из её опыта работы в компании <a href="http://www.sup.com/">SUP</a>. И с помощью <a href="http://nely-snork.livejournal.com/295663.html">веселых бегемотиков</a> (руки <a href="http://ohyesya.livejournal.com/">ohyesya</a>) описала основные правила поиска багов. Было интересно, и даже качество этой суперфотки не скрывает ужас одного из багов о которых она рассказала.
<p class="img"><img src="http://cssing.org.ua/pic/clienttech2008/2.jpg" width="480" height="360" alt="" /><span>Один из багов.<br />Тень профессионала (слева внизу) уже упала на его дрожащий от страха код</span></p>
Вряд ли там кто-то что-то разглядит, но ведь классно же фотки оформлены на блоге?
<p class="img con"><img src="http://cssing.org.ua/pic/clienttech2008/beg.jpg" width="480" height="321" alt="" /><span>Медицинская тема в дебаггинге</span></p>
<a href="http://designnotfound.ru/">Михаил Баранов</a> поделился секретами прикольных штук для печатных версий, и сетовал на то как мало нынче версий для печати. Даже среди лидеров недавнего конкурса <a href="http://www.webhitech.ru/">webhitech</a>. Не забывайте о печатных версиях ;)
<h3>base64 в массы</h3>
<a href="http://webo.in/">Николай Мациевский</a> рассказал об очередной клевой технологии оптимизации загрузки сайтов. На этот раз ему удалось сэмулировать <a href="http://webo.in/articles/clientside2008/data-uri-vs-css-sprites/">объединение всех CSS-картинок сайта в «в одну»</a>. Делается это с помощью base64-представления картинок для всех браузеров, и технологии mhtml для IE. Все отлично работает, есть только пара нюансов связанных с отключенным джаваскрипт и «плохо» (никак) не работающим mhtml в ИЕ7 под вистой.
<p class="img"><img src="http://cssing.org.ua/pic/clienttech2008/1.jpg" width="480" height="360" alt="" /><span>Недостатки mhtml</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/clienttech2008/uri.jpg" width="480" height="321" alt="" /><span>Живой автор книги!</span></p>
Вживую с алгоритмом сжатия можно ознакомиться на открытом Николаем вместе с Русланом Синицким сервисе <a href="http://duris.ru/">Data URI [CSS] Sprites</a>. Попробуйте сжать свой сайт ;-).
Николай, также рассказывал о <a href="http://webo.in/book/">своей книге</a>, которую можно будет купить в начале 2009-го. Очень насыщенная практической информацией, кстати.
<h3>Влияет ли вёрстка на анимацию в браузере</h3>
Любопытные тесты провел Сергей Чикуенок, технический директор студии Лебедева.
Он тестировал то, что на самом деле давно волнует всех верстальщиков и джаваскриптеров. Связана ли сложность верстки с временем отработки джаваскрипта. Все понимают, что чем сложнее код, тем медленнее будет работать джаваскрипт. Но тесты в некоторых случаях все равно оказались удивительными. Я приведу лишь несколько из них, Сергей пообещал что выложит их на сайте студии в менее отвратительном качестве, чем мои фото.
<p>Вкратце ситуация такова: у нас есть стандартная страничка, колонки, хедер. На ней анимируется группы элементов. Сложность кода самой странички меняется, для тестов.</p>
<p>В первом тесте сравнивались анимации (fps) когда блоки были relative и absolute. Почти везде оказалось одинаково, но в операх абсолюты сработали быстрее.</p>
<p class="img"><img src="http://cssing.org.ua/pic/clienttech2008/3.jpg" width="500" height="278" alt="" /><span></span></p>
Во втором тесте страничку усложнили глубоким DOM-деревом, и сравнивали скорость анимации с неглубоким. Safari, Chrome и Опера оказались к нему чувствительны:
<p class="img"><img src="http://cssing.org.ua/pic/clienttech2008/4.jpg" width="500" height="263" alt="" /><span></span></p>
Наконец, как вела себя анимация в которой участвовала картинка растянутая на 1 пиксель. (это когда ее размер 100x100, а мы в коде явно указываем 100x101). Почти во всех браузерах анимация этой картинки сильно замедлилась:
<p class="img"><img src="http://cssing.org.ua/pic/clienttech2008/5.jpg" width="500" height="279" alt="" /><span></span></p>
Тестов было гораздо больше, и в конце много советов. Из тех которые стоит повторить: верстайте обязательно с учетом будущих анимаций. Используйте alphaimageloader не только для прозрачных PNG, но и для повышения производительности ИЕ при работе с обычными картинками.
Так же, в некоторых случаях, в анимациях лучше использовать настоящие картинки (img) а не background-image.
<p>Сергей также пообещал что скоро расскажет подробнее о своей даваскрипт-библиотеке специально предназначенной для групповых анимаций.</p>
<h3>Верстка для iPhone</h3>
Последнее время часто пришлось сталкиваться с версткой для этого устройства. В презентации я поделился небольшим опытом рассчитанным на людей без айфонов, либо не верставших для него. Оказалось, там было много людей с айфонами. =) Один из редких моментов, когда я пожалел что живу не в москве.
<div class="img"><div><object style="margin:0px" width="425" height="355"><param name="movie" value="http://static.slideshare.net/swf/ssplayer2.swf?doc=iphone-1229513886281577-2&stripped_title=coding-for-iphone-presentation" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><embed src="http://static.slideshare.net/swf/ssplayer2.swf?doc=iphone-1229513886281577-2&stripped_title=coding-for-iphone-presentation" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355" /></object></div><p>Моя презентация. </p></div>
Немного подоптимизировал свой блог, было так:
<p class="img con"><img src="http://cssing.org.ua/pic/clienttech2008/1.png" width="320" height="480" alt="" /><span>Так было, просто уменьшенный сайт</span></p>
После совсем простой оптимизации (немножко джаваскрипта и <a href="http://cssing.org.ua/wp-content/themes/cssing2/css/iphone.css">отдельный CSS</a>)
<p class="img con"><img src="http://cssing.org.ua/pic/clienttech2008/2.png" width="320" height="480" alt="" /><span>Так стало, слегка оптимизированная версия</span></p>
Мелочь, а приятно. В презентации есть нос <a href="http://genn.org/">Геннадия</a>, кусочки кода и несколько полезных линков, для более глубокого изучения.
<h3>Диденко про IE8</h3>
Доклад вышел не совсем технологический, хотя и код показывали. В основном разговор пошел о новых фичах в ИЕ8, о слайсах. Их уже внедрили основные игроки российского рынка afisha.ru, yandex, gizmeteo, rutube и другие. Чем не преминул похвастаться Пётр. Слайсы, фактически, одно из применений микроформатов. Достаточно добавить определенные классы:
<ol class="code">
<li><div class="hslice" id="my-first-web-slice"></li>
<li class="tab"><p class="entry-title">Название слайса</p></li>
<li class="tab"><div class="entry-content"></li>
<li class="tabtab">…например погода в Киеве…</li>
<li class="tab"></div></li>
<li></div></li>
</ol>
И эта область будет подсвечиваться при наведении в ИЕ8, и можно будет следить за обновлениями <em>именно в этом кусочке</em> HTML.
В результате погоду можно <a href="http://www.kip.ru/realtime/2008/12/ie8-at-platforma-2009.html">смотреть примерно так</a>:
<p class="img"><img src="http://cssing.org.ua/pic/clienttech2008/ie8.jpg" width="480" height="447" alt="" /><span>Слайс для gizmeteo</span></p>
<p>Напомнили также о поддержке некоторых вещей из HTML5, и событий onoffline-ononline.</p>
<p>В конце Петру Диденко задали забавный технологический вопрос, который сам по себе прозвучал как шутка:</p>
<blockquote>Будет ли в IE8 <a href="http://www.w3.org/TR/DOM-Level-2-Core/">Дом 2</a>?</blockquote>
<p>Конференция вышла интересной, и в чем-то, уютной. Хотя народу в этот раз было не так много как раньше, всё объяснили этой штукой на букву «К» о которой все говорят.</p>
<p>P.S.: за часть фото (те на которых что-то видно) спасибо <a href="http://designnotfound.ru/">Михаилу Баранову</a>!</p>
Internet Explorer и z-index
2008-12-07T00:00:00Z
https://cssing.org.ua/2008/12/07/internet-explorer-z-index/
<p>ИЕ воспринимает z-index не совсем так, как все остальные браузеры. Это поведение настолько часто встречается в моей жизни, что я решил о нём написать целый пост.<!--more--><br />
Меня часто просят поправить ошибки в верстке. Так вот эта — входит в топ-5.</p>
<h3>z-index работает?</h3>
Да, совершенно точно работает. Берем два блока, с position:absolute (для работы z-index нужен либо <code>relative</code> либо <code>absolute</code>)
Задаем им обоим что-то такое:
<ol class="code">
<li>#block1, #block2{</li>
<li class="tab">position:absolute</li>
<li>}</li>
<li>#block1{z-index:10}</li>
<li>#block2{z-index:20}</li>
</ol>
<p class="img"><img src="http://cssing.org.ua/pic/iezindex/zigindex.png" width="406" height="346" alt="иллюстрация z-index" /><span>На самом деле, мне просто больше нравятся зеленые блоки. <br />Не обращайте внимания на Гитлера.</span></p>
Блок с б<em>о</em>льшим z-index отобразится поверх блока с меньшим z-index. Все как бы работает. И в IE в том числе.
<h3>работает, но...</h3>
Классическая обстановка для «проблемы в вёрстке».
<p>В коде идут подряд два блока с <code>position:relative</code>. Например, два блока новости, или блоки вроде header и content. В relative ничего необычного нет, может добавили для absolute блоков внутри, или <a href="http://cssing.org.ua/2005/11/11/ie-magic/">для хаков</a>.<br />
Как-то так:</p>
<ol class="code">
<li><div class="entry"></div></li>
<li><div class="entry"></div></li>
</ol>
И теперь, например, в одном из них появляется всплывающее окошко, или попап, или выпадающее меню:
<ol class="code">
<li><div class="entry"></li>
<li class="tab"><div class="popup">Попап</div></li>
<li></div></li>
<li><div class="entry"></div></li>
</ol>
И такой вот дизайн:
<p class="img"><img src="http://cssing.org.ua/pic/iezindex/right.png" width="351" height="167" alt="поведение всех броузеров кроме ИЕ" /><span>Попап должен находиться в блоке 1</span></p>
Будь вы мной, вы написали бы такой CSS:
<ol class="code">
<li>.entry{</li>
<li class="tab">position:relative</li>
<li class="tab">}</li>
<li>.popup{</li>
<li class="tab">position:absolute;</li>
<li class="tab">z-index:10;</li>
<li class="tab">top:10px;left:100px;</li>
<li class="tab">}</li>
</ol>
Если добавить цвета и размеры, <a href="http://cssing.org.ua/examples/iezindex/">все отобразится</a> и правда так, как в дизайне.
Но, разумеется, не в ИЕ.
<p>Там это будет выглядеть так:</p>
<p class="img"><img src="http://cssing.org.ua/pic/iezindex/wrong.png" width="339" height="166" alt="так выглядит в ИЕ" /><span>Попап или выпадающее меню скроется за следующие блоки</span></p>
Я это понимаю так: ИЕ сравнивает не только z-index блоков, но и z-index их родителей. Причем родительский важнее. В моем примере роль «родительского z-index» исполняет просто последовательность блоков в коде. Какие блоки дальше в коде, те и отобразятся поверх.
<p>Я сделал <a href="http://cssing.org.ua/examples/iezindex/">специальный пример</a>, смайлик из acid-теста будет улыбаться всем браузерам кроме ИЕ. (его улыбка зависит от этого вот поведения с relative блоками)</p>
<h3>решение?</h3>
<ol>
<li>Убрать position:relative для .entry</li>
<li>Задавать разные z-index для .entry. В случае новостей это невозможно, они ведь генерируются симметрично. Однако когда у нас header и content, вполне подходит.</li>
</ol>
Может быть есть еще?
<h3>В конце</h3>
Мне не хочется называть это багом, поскольку для него требуется куча обстоятельств, скорее всего не описанных w3c. (или описанных?)
Поведение имеет место в IE5-7. <del datetime="2008-12-08T09:13:21+00:00">И, наверное, 8.</del>
Как всегда буду рад вашему опыту и мыслям по этому поводу.
Статьи на тему этого поведения:
<ul>
<li><a href="http://css-discuss.incutio.com/?page=OverlappingAndZIndex">Stacking context</a></li>
<li><a href="http://aplus.rs/lab/z-pos/" rel="nofollow">Effect of z-index value to positioned elements</a></li>
</ul>
Håkon Wium Lie, CSS и educamp
2008-11-18T00:00:00Z
https://cssing.org.ua/2008/11/18/hakon-wium-lie-css-educamp/
<p>Познакомился с <a href="http://people.opera.com/howcome/">человеком</a> придумавшим название для моего блога. Буквы, картинки, видео. Еще он придумал Acid2 и CSS.<!--more--></p>
<p class="img"><img src="http://cssing.org.ua/pic/hakon/2.jpg" width="400" height="726" alt="Håkon Wium Lie" /><span>Håkon Wium Lie, что-то рассказывал кружку интересующихся.<br />Видите как размыта рука? Это специально!</span></p>
Håkon приехал в Киев выступить от Opera в рамках <a href="http://educamp.com.ua/">Educamp</a>. Это событие для студентов.
<p>Для тех кто не в курсе: Håkon Wium Lie создал <a href="http://www.w3.org/People/howcome/p/cascade.html">первую спецификацию CSS</a>, тест <a href="http://acid2.acidtests.org/">Acid2</a> также является его идеей, кроме того он работал с <a href="http://www.w3.org/People/Berners-Lee/">Тимом Бернерсом Ли</a> в CERN, на заре интернета.</p>
<h3>Из разговора</h3>
Как попал в Opera (Håkon CTO в <a href="http://www.opera.com/">Opera Software</a>): «в те времена я пытался помирить Netscape и Internet Explorer. Это было нелегко. И тут, я узнал, что мои коллеги из Норвегии разрабатывают свой броузер! И я поверил, что программное обеспечение можно делать за пределами США. Ну и влиять на разработку броузера, сделать его идеальным, было очень приятно.»
<p>Почти половина интернет-траффика в Осло — Опера. Это из-за того, что Opera mini шлет туда адрес набранный в телефоне, а из Осло, пользователю высылается обработанная страничка. Примерно в 10 раз меньшая по размеру чем оригинальная, что экономит время и деньги.</p>
<p>Часто говорил об Opera «везде», на компьютерах, на мобильных, на приставках и т. п. Они активно продвигают идею использования броузера повсюду. Украина и Россия, кстати, входят в топ-5 стран по популярности Оперы. Я сам удивился кол-ву Опера пользователей на его презентации.</p>
<p>Спросили: насколько перспективен еще один броузер? Ответил: «Сейчас это кормит 500 сотрудников, и компания продолжает расти. Броузеры становятся все важнее, разные броузеры для разных целей. Поэтому, я за еще один броузер.»</p>
<p><a href="http://cssing.org.ua/2008/11/14/css3-box-model-progress">Блочную модель</a> придумал Håkon и Bert Bos. Сказал что вопрос спорный, и что теперь же у всех есть box-sizing, расслабьтесь. Его приверженность к той модели поясняется, вобщем, очень легко. Он технический человек, он уже много лет проверяет почту через emacs. Он shell-guy, про маки сказал, что это не совсем его стиль, да и дорогие они.</p>
<p>Его <a href="http://people.opera.com/howcome/2006/phd/">phD thesis'ом</a> (это не тот, но похожий) в MIT стал... CSS.</p>
<p class="img"><img src="http://cssing.org.ua/pic/hakon/1.jpg" width="490" height="368" alt="первая html-страничка" /><span>Кажется, первая html-страничка.<br />Была на одном из слайдов в презентации</span></p>
О группе <a href="http://znaki.fm/info/268/">CSS</a> ему уже несколько раз говорили, но они ему не очень нравятся, не слушает. =)
<p>Про микроформаты: «круто было бы реализовать поддержку мироформатов в Opera Mini, но к сожалению мобильные ОС не дают доступ к адресной книге...»<br />
С микроформатами в обычной Opere они пока не торопятся, так как не видят ясного применения для них. Как оно вобщем и есть на самом деле. =(</p>
<p>Больше всего он сейчас жалеет, что в CSS1 они не реализовали border-radius. Неудобно ему за все эти обертки и хаки.</p>
<p>Очень заинтересован веб-шрифтами. Надеется, что в течение 10 месяцев font-face реализуют во всех броузерах. По крайней мере он активно продвигает это сейчас.</p>
<p>На вопросы о будущем веба отвечал так: сам веб не так сильно изменится, как способы его использования. Он станет (стал?) основным источником информации, а не одним из. Чтобы доказать это Håkon даже написал <a href="http://www.alistapart.com/articles/boom">книгу на HTML </a>. Ну и входит в правление проекта <a href="http://www.princexml.com/">PrinceXML</a> (генерация PDF из html+css)</p>
<p>Кроме оперы ему импонируют команды Webkit и Mozilla. Часто шутил про ИЕ, оно и не удивительно. Ведь это он тогда написал <a href="http://people.opera.com/howcome/2007/msft/">открытое письмо</a>. Одному парню не ответил на вопрос (в шутку, разумеется), потому что у того была майкрософтовская футболка с IE. =)</p>
<p>Черт, ребята, да он придумал CSS! Вы понимаете? =)</p>
<p class="img"><img src="http://cssing.org.ua/pic/hakon/3.jpg" width="490" height="368" alt="Håkon and akella" /><span>Håkon и какой-то парень в полосатой рубашке</span></p>
И короткое видео его общения в кулуарах, ничего сверхъестественного, но я сильно благодарен одной хорошей девушке, за то, что она оказалась там с камерой и поделилась со мной видео =):
<div class="img"><div><object width="400" height="300"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=2274989&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=2274989&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="300" /></object></div><p>Отвечал на вопросы в коридоре.</p></div>
Много информации из видео, я упоминал в посте.
<h3>Еще я там выступал</h3>
Моя презентация была об основах HTML, потому вряд ли будет интересна здешней публике. Я рассказал о том, как я стал HTML-верстальщиком (меня укусил другой HTML-верстальщик). Но, чтобы скрыть эту тайну, мне пришлось выдумать правдоподобную историю про <a href="http://cssing.org.ua/2004/11/07/my-ukrnet/">укр.нет и мой блог</a> (17й комментарий). В зале, кстати, на моем выступлении было примерно половина девушек. Надеюсь в нашей профессии их будет все больше ;)
<p>Вместе со мной выступал <a href="http://mega.genn.org/">Геннадий Осипенко</a>. Который очень весело рассказал о дизайне, его часть презентации называлась «Все мальчики - диджеи, все девочки - модели.»</p>
<p>Другие рассказы о приезде Håkon'а можно найти на блогах <a href="http://burlaka.org/2008/11/educamp-hkon-wium-lie-opera-rulez.html">Олега Бурлака</a> и <a href="http://blog.masterpiecer.org.ua/archives/460">masterpiecer'а</a></p>
CSS3 и блочная модель
2008-11-13T00:00:00Z
https://cssing.org.ua/2008/11/13/css3-box-model-progress/
<p>Это так мило и забавно, и связано со старыми добрыми временами, когда нужно было верстать под IE5.</p>
<!--more-->
<h3>Блочная модель (box model)</h3>
Думаю все, кто начинал верстать, столкнулись с тем, что модель вычисления ширины блока вместе со всякими padding и border не очень логична.
<p class="img"><img src="http://cssing.org.ua/pic/boxmodel.png" width="239" height="220" alt="box mdoel" /><span>синий блок 200px на 200px — контент. А padding и border, как видно, добавлены «извне».<br />Такова модель w3c.<br />Скриншот сделан в <a href="http://getfirebug.com/">Firebug</a>.<br />Еще можно посмотреть <a href="http://www.hicksdesign.co.uk/boxmodel/">иллюстрацию</a></span></p>
Да, есть много разных интересных пояснений и метафор, вроде бы делающих это логичным. Мол, задавая ширину, мы имеем ввиду содержимое и т. д. Но давайте смотреть правде в глаза, каждый кто начинал верстать считал это странным. Хотя бы потому что это <em>странно</em>.
<p>Нет, ну правда: вы задаете колонке ширину 100 пикселей, и небольшую границу в 2 пикселя.<br />
И, вуаля, ширина уже 104 пикселя!<br />
Почему? Если я сказал, чтобы она была 100? =)<br />
<em>Для тех кто не в курсе:</em> если это сделать в ИЕ5, то ширина блока останется 100 пикселей.</p>
<p>Если продавщица хочет больше пространства в коробке, она просто кладет туда меньше товара. А не увеличивает коробку волшебной палочкой. Так работает этот мир.</p>
<p>Вдобавок, все дизайнеры при отрисовке макетов думают майкрософтовской моделью, она интуитивна. А мы потом это верстаем.</p>
<p>Общепринятое пояснение: width — это <em>не ширина</em> «блока», а ширина его «содержимого». Что само по себе красиво в своей алогичной противоречивости. Надеюсь я применил достаточно букв, чтобы все поняли, что мне модель w3c не нравится.</p>
<p>Не то чтобы я винил кого-то, просто так сложилась история стандарта, просто в w3c на тот момент было слишком много технарей. Может быть разработчики броузеров даже сэкономили на этом пару строк кода. И, наверное, кому-то тогда так было проще.<br />
Накипело, не упустил повод высказаться. ;)<br />
Но, забавно не это.</p>
<h3>В чем забава?</h3>
Забава в том, что на данный момент все современные броузеры (включая IE8 Beta) поддерживают свойство box-sizing. Его смысл: переключать блочную модель от W3C-шной к traditional (или от microsoft). Я сделал <a href="http://cssing.org.ua/examples/css3boxmodel/">специальный пример</a>, где хорошо видно, как лишь с помощью CSS в Safari, IE8, Firefox, Konqueror, Chrome и Opera можно сымитировать старую добрую блочную модель от IE5. Это правда круто, и могло бы сэкономить сотни тысяч дивов-оберток в наших верстках.
<p>И... начинают появляться посты с обсуждением новой модели. Удивительно, неужели и правда можно задавать границу в 2 пикселя, а ширина блока по прежнему будет 100! Ура! CSS3 принесла нам еще одно полезное свойство!<br />
Блочная модель 10-летней давности возвращается!</p>
<h3>В конце</h3>
Я уже года три не вспоминал о блочной модели, я её просто запомнил. Но всплеск интереса к «новой» удобной блочной модели меня сильно позабавил.
Это <del datetime="2008-11-13T23:20:21+00:00">не</del> критика W3C, все равно я буду играть по их правилам, скорее просто любопытные наблюдения за тем как всё возвращается на круги своя. =)
<ul>
<li><a href="http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug">История модели в Википедии</a></li>
<li><a href="http://cssing.org.ua/examples/css3boxmodel/">Пример box-sizing</a></li>
<li><a href="http://www.quirksmode.org/css/box.html">Более подробное описание box-sizing</a></li>
</ul>
P.S.: я называл модел «блочной», но это вольный перевод, её еще называют коробочной, боксовой, и чаще всего css box model.
<p>И, вот просто интересно, кому-то кажется стандартная блочная модель логичной? Правда очень любопытны обоснования.</p>
Альфа-каналы в PNG-8
2008-11-07T00:00:00Z
https://cssing.org.ua/2008/11/07/png-8-alpha/
<p>Мало кто знает, но они действительно существуют.<!--more--></p>
<p>Проблема полупрозрачных картинок медленно умирает вместе с IE5-6, но, тем не менее будет актуальна для популярных сайтов еще несколько лет. Вдобавок, дальше станет понятно, почему процентная прозрачность для PNG-8 будет важна и без ИЕ.</p>
<h3>Чем они вообще отличаются, эти PNG?</h3>
<dl>
<dt><strong>PNG-24</strong>:</dt> <dd>доступны все возможные цвета, доступна любая степень их прозрачности.</dd>
<dt><strong>PNG-8 обычный</strong>:</dt> <dd> доступны 256 цветов, прозрачность только на уровне 0 или 100%. Прозрачность в 50%, например, невозможна.
</dd><dt><strong>PNG-8 с альфа-каналами</strong>:</dt> <dd><em> доступны 256 цветов</em>, каждый из этих 256 цветов имеет свой показатель прозрачности от 0 до 100%. Возможна прозрачность в 42%.</dd>
</dl>
Казалось бы, «Ну и что? Все равно альфа-каналы в ИЕ работать не будут, толку?».
<p>Однако, толк в том, что полупрозрачные пикселы в PNG-8 при просмотре в ИЕ будут показаны <em>полностью прозрачными</em>. Все остальные броузеры честно отобразят их полупрозрачными. Более того, не будет никакого уродливого серо-белого фона, который видно при просмотре PNG-24 картинок в Интернет Эксплорере.</p>
<p>То есть: все пикселы с прозрачностью от 0 до 99% будут отображены IE как <em>полностью</em> прозрачные.</p>
<h3>Как сохранить PNG-8 с альфа-каналами?</h3>
Это странно и дико, но сделать это в Photoshop нельзя. (возможно в CS4...?)
<p>Зато такую картинку можно сохранить в <a href="http://www.adobe.com/products/fireworks/">Fireworks</a>! Там это делается очень просто, при экспорте выбираем опции:</p>
<p class="img"><img src="http://cssing.org.ua/pic/png8alpha/fw.png" width="245" height="370" alt="Опции для экспорта PNG в Fireworks" /><span>Трудно ошибиться, нужно выбрать формат PNG-8 и тип прозрачности «Alpha Transparency». Видно также, что в палитре все цвета имеют прозрачность кроме одного (крайнего справа)</span></p>
Почему этого нет в Photoshop, загадка.
<p>Также существуют <a href="http://pngnq.sourceforge.net/index.html">утилиты</a>, превращающие PNG-24 в PNG-8. Естественно, при этом качество страдает, но часто с этим можно жить.</p>
<h3>Живой пример</h3>
Для примера, я сохранил одну и ту же картинку в трех форматах: PNG-24, PNG-8 обычный, и PNG-8 с альфа-каналами (из Fireworks). Все три поместил на узорчатый фон. Вот что вышло:
<p class="img"><img src="http://cssing.org.ua/pic/png8alpha/ff.jpg" width="319" height="371" alt="PNG картинки в Firefox" /><span>PNG картинки в Firefox</span></p>
Ничего особо интересного, кроме размеров картинок. Обратите внимание на вес PNG-24 и PNG-8 файлов, при почти идентичном отображении.
<p>А теперь, в ИЕ:</p>
<p class="img"><img src="http://cssing.org.ua/pic/png8alpha/ie.jpg" width="319" height="381" alt="PNG картинки в IE" /><span>PNG картинки в IE. Хорошо видно «серо-белое уродство» упомянутое ранее</span></p>
Вуаля! То, что называется «graceful degradation»!
<a href="http://cssing.org.ua/examples/png8alpha/">Сами смотрите</a>, если не верите. ;)
За фон <a href="http://www.squidfingers.com/">благодарен</a>.
<h3>Польза</h3>
Вряд ли это знание поможет вам познакомиться с девушкой вашей мечты, или начать наконец делать зарядку по утрам. Но, некоторая польза все же есть.
Во-первых, это экономит трафик. Во-вторых, в большинстве случаев отлично деградирует в ИЕ. То есть, можно применять для всяких некритичных украшательских штучек. В IE будет отображен обычный PNG-8 (а ля GIF), а для всех остальных полупрозрачная красота.
<p>Разумеется, в некоторых случаях картинки будут казаться выщербленными в IE (резкие края), но никто и не говорит, что этот способ панацея.</p>
<h3>Еще по теме</h3>
Эта техника, кстати, в некоторых случаях могла бы чуть-чуть упростить вот этот <a href="http://harisov.livejournal.com/58661.html">супер-универсальный трюк Виталия</a>. Другие заметки по теме:
<ul>
<li><a href="http://pngnq.sourceforge.net/index.html">Библиотека превращающая PNG-24 картинку в PNG-8 с альфа-каналами</a>. (<a href="http://ethan.tira-thompson.com/Mac%20OS%20X%20Ports.html">и версия c интерфейсом для Mac OS</a>)</li>
<li><a href="http://www.hackszine.com/blog/archive/2008/02/howto_crossbrowser_alpha_pngs.html">HOWTO: cross-browser alpha PNGs</a></li>
<li><a href="http://www.personal.psu.edu/drs18/blogs/davidstong/2007/09/png8_alpha_transparency_from_f.html">PNG8 alpha transparency from Fireworks</a></li>
<li><a href="http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/">Статья на Sitepoint</a></li>
<li><a href="http://cssing.org.ua/examples/png8alpha/">Пример трёх типов PNG из заметки</a></li>
</ul>
Уверен, кто-то уже это использовал. Знание это совсем не новое, но малоизвестное почему-то. Потому, был бы рад если бы вы поделились опытом по теме.
BlogcampCEE, Киев, 17-19 октября
2008-10-21T00:00:00Z
https://cssing.org.ua/2008/10/21/blogcampcee2008/
<p>Не мог пройти мимо <a href="http://blogcampcee.com/">этого события</a>. Несколько впечатлений. И пара фоток.<!--more--></p>
<p class="img"><img src="http://cssing.org.ua/pic/blogcampcee/2.jpg" width="480" height="456" alt="Расписание" /><span>Расписание как всегда заполняли с утра</span></p>
<h3>Яндекс об украинской блогосфере</h3>
Яндексовцы выступили со стандартной статистикой по украинским блогам. Как оказалось, сейчас в Украине уже <strong>270 тысяч блогов</strong> (это и всякие ЖЖ в том числе). Это аж <strong>4%</strong> от всего кириллического сегмента блогов (интересно, болгары туда попадают?). За год количество UA-блогов увеличилось примерно в <strong>2 раза</strong>. По сравнению с прошлым годом, рост замедлился.
<p class="img"><img src="http://cssing.org.ua/pic/blogcampcee/3.jpg" width="480" height="360" alt="Сервисы для украинских блоггеров" /><span>Сервисы для украинских блоггеров</span></p>
<p>Тройкой самых популярных сервисов среди украинских блоггеров являются <a href="http://liveinternet.ru/">liveinternet.ru</a>, <a href="http://mail.ru/">mail.ru</a>, <a href="http://livejournal.ru/">livejournal.ru</a>. Самым популярным украинским сервисом — <a href="http://bigmir.net/">bigmir.net</a>. Но, в то же время, самым медленнорастущим, так что скоро сдаст свои позиции.</p>
<p>Средний украинский блоггер за год повзрослел на год, теперь ему 24 года. Что, по словам, Волнухина, означает что в блогосферу стало приходить меньше молодых блоггеров.<br />
Вообще, общая тенденция такова, что много блогов начатых когда это было модно умерло, а теперь блоги начинают только те, кто правда хочет что-то сказать миру. Российский интернет пользователь вообще стал предпочитать блогам — социальные сети.</p>
<p>Еще, они шутили что-то про сало в диаграммах, так до сих пор и не удосужившись представить как странно выглядели бы шутки про матрёшек в украинских презентациях в Москве. =)</p>
<p class="img"><img src="http://cssing.org.ua/pic/blogcampcee/4.jpg" width="480" height="321" alt="Кукуц и Яндекс" /><span>Маленький Кукуц и большой Яндекс</span></p>
<h3>Конкурс блогов</h3>
<a href="http://itc.ua/node/33495">Список финалистов и победилитей</a> уже опубликован, как и <a href="http://blogcampcee.com/uk/buba/jury">список членов жюри</a>, главой которого я кажусь, благодаря алфавиту и случайно нажатому Enter.
<p>Мне не очень понравились правила конкурса, ведь в финал прошли не совсем лучшие блоги, а отчасти те, кто за себя просил проголосовать читателей. А это, ну, странно как-то. =) Побеждать ведь должны лучшие блоги. Но, это же первый конкурс, и организаторы обещали что-то изменить.<br />
Тем не менее, среди победителей есть очень интересные блоги, <a href="http://www.arturclancy.com/">Артура Оруджалиева</a> из ITC, <a href="http://totaltelecom.livejournal.com/">Романа Химича</a>, и, слегка слишком многословного как по мне, <a href="http://iwalker.spaces.live.com/">Игоря Шаститко</a> из Microsoft.<br />
А так же, совершенно случайно набрел на блог <a href="http://ko-online.com.ua/blogs/29">Александра Москалюка</a> из Facebook, я писал о его выступлении в <a href="http://cssing.org.ua/2008/04/18/rit-2008-moscow/">отчете о РИТ 2008</a>.</p>
<p>Награждение было очень похоже на оскаров. =) Будет клёво если и в следующем году проведут такой конкурс!<br />
Призы дарил Asus, но ее представитель выступил с весьма странной речью, выставив компанию в не совсем хорошем свете. Во мне даже нет злорадства, но мне захотелось уйти из зала, чтобы они не испортили моё мнение об Asus окончательно. :) Ну, наверное, волновались, бывает.</p>
<h3>Google Android</h3>
Про <a href="http://en.wikipedia.org/wiki/Google_Android">систему</a> уже много написано, но было интересно послушать из первых уст. Приятно, что от компании приехало сразу несколько человек, включая инженеров. Основной посыл всего выступления — идеалистический: нам не нужны деньги за операционку, нам нужно увеличить интернет-аудиторию, чтобы больше людей пользовалось сервисами Google. «Будущее интернет = Будущее Google».
<p>В америке устройства на базе Android уже начали продавать (сегодня). Но, насколько я понял, они «залочены». По словам представителя Google, в СНГ устройства появятся когда этого захочет T-mobile. И сам Google к этому уже не имеет отношения.<br />
Платформа открытая и скоро планируются устройства от Nokia, Siemens, LG и еще кого-то там..<br />
Для разработчиков приложений будет открыт сервис похожий на <a href="http://www.apple.com/iphone/features/appstore.html">AppStore</a> от Apple. Там можно будет продавать свои приложения, причем без комиссии Google. (как это принято в AppStore).</p>
<p>Затем был доклад о Chrome, но начался он так скучно и банально (рассказывал продажник), да и тема эта уже настолько нудная, что я не выдержал и убежал ;). Выступали также представители Opera и Mozilla. Но это было скорее «мы сюда пришли, смотрите», чем «давайте мы вам расскажем что-то интересное»</p>
<h3>В конце</h3>
Что-то я много ворчал в посте, на самом деле все было классно, и все недочеты с лихвой покрыты знакомствами! =)
Отчет в этом году короткий <del datetime="2008-10-23T14:07:40+00:00">и без фоток</del>, ибо большую часть времени я общался с кем-то. Успел встретить Юрия Бойко, Александра Орехова, Макса Берёзу и Йоху, камбоджийского и кыргызского стартаперов и много много всяких разных блоггеров :) Получилось весело. Приходите в следующий раз ;)
Если верить <a href="http://blogcampcee.com/ru/content/%D0%BD%D0%B5%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE-%D1%81%D1%82%D0%B0%D1%82%D0%B8%D1%81%D1%82%D0%B8%D0%BA%D0%B8">статистике</a> блогкемп посетило больше 800 человек!
<p><a href="http://blogcampcee.com/ru/content/%D0%BF%D1%80%D0%BE-%D0%BD%D0%B0%D1%81-%D0%BF%D0%B8%D1%88%D1%83%D1%82">Другие отчеты</a> на сайте. И мой <a href="http://cssing.org.ua/2007/10/15/blogcamp-2007/">прошлогодний отчет</a>.</p>
<p>Ну и забавная фотка про рыбу:</p>
<p class="img"><img src="http://cssing.org.ua/pic/blogcampcee/1.jpg" width="480" height="321" alt="Вооот столько процентов" /><span>Вооот столько процентов!</span></p>
За фото спасибо Дегтяревой Ольге, Артуру Оруджалиеву и Владимиру Хмельницкому.
<a href="http://picasaweb.google.ru/dehtyarova.olha">Остальные фото</a>
Применение clip для PNG в ИЕ
2008-10-01T00:00:00Z
https://cssing.org.ua/2008/10/01/clip-it-baby/
<p>Пожалуй, самое редкоиспользуемое CSS-свойство, из вообще используемых. Особенно удивительно при этом, что все броузеры его поддерживают. Еще удивительнее, что от него есть реальная польза.<!--more--></p>
<h3>Как работает clip?</h3>
Во-первых, свойство применяется только для абсолютно спозиционированных блоков. Жаль конечно, но такие правила.
Во-вторых, оно позволяет отображать определенную часть блока. На данный момент только прямоугольную. Как-то так:
<p class="img"><img src="http://cssing.org.ua/pic/clip/1.jpg" width="437" height="600" alt="илюстрация clip" /><span>Неяркие части картинки на самом деле невидимы. А жаль, да?</span></p>
Логика этих параметров нетривиальная. Проще всего запомнить что: 1е и последнее число — это координаты левого верхнего угла, а средние два числа — правого нижнего угла вырезаемого прямоугольника. Я сделал специальный <a href="http://cssing.org.ua/examples/clip/">интересный пример</a>, чтобы это проиллюстрировать. Если считать что (x1, y1) и (x2, y2) координаты левого верхнего и правого нижнего углов, то вот так все выглядит:
<ol class="code"><li>clip: rect(y1 x2, y2 x1) <small>/*Логично, не правда ли? может поэтому его никто и не использует?*/</small></li></ol>
<p>Очевидно, подразумевается, что в будущем появится возможность вырезать эллипсы:</p>
<ol class="code">
<li>clip: ellipse(42px,14px,188px, 200px);</li>
</ol>
И где-то в CSS3D, я надеюсь, наконец появятся додекаэдры:
<ol class="code">
<li>clip: dodecahedron(42px,16px, 188px, 100px);<small> /*да! для построения додекадра достаточно знать координаты центра его симметрии, и радиус*/</small></li>
</ol>
Вы ведь знаете <a href="http://ru.wikipedia.org/wiki/%D0%94%D0%BE%D0%B4%D0%B5%D0%BA%D0%B0%D1%8D%D0%B4%D1%80">что</a>:
<blockquote><p>Вселенная представляет собой набор бесконечно повторяющихся додекаэдров </p></blockquote>
<h3>clip: ИЕ и все остальные</h3>
Разумеется и тут не обошлось без нестыковок. Согласно спецификации расстояния должны писаться через запятую, вот так:
<ol class="code">
<li>clip: rect(5px, 40px, 45px, 5px);</li>
</ol>
Однако, при использовании запятых ИЕ не воспринимает значения. Таким образом, приходится писать без них:
<ol class="code">
<li>clip: rect(5px 40px 45px 5px);</li>
</ol>
Это не совсем валидно, но, тем не менее, воспринимается всеми броузерами. Такие вот милые казусы на окраинах CSS.
<h3>png-24 в ИЕ</h3>
Пожалуй все уже знают что полупрозрачные PNG-24 файлы в ИЕ6 и ниже не работают. И для их нормальной работы нужно задавать фон как-то так:
<ol class="code"><li>filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=<em>crop</em>, src='MYTERRIFIC.png')</li></ol>
В этом методе прекрасно только одно: он вообще работает. Но он не позволяет нам использовать background-position. То есть вся крутость от <a href="http://cssing.org.ua/2005/09/27/preload-by-css/">прелоадов и спрайтов</a> со всякими сдвиганиями фона теряется.
<p>Мы можем заменить «crop» на «scale», тогда картинка просто растянется (<em>не повторится</em>), но контролировать background-posiiton не можем. Я думал, что не можем.</p>
<h3>Можем! png-24 background-position в ИЕ!</h3>
Будем использовать, к примеру, такой вот рисунок, 200 на 200 пикселей. Для пущей простоты вычислений.
<p class="img"><img src="http://cssing.org.ua/examples/clip/nav.png" width="200" height="200" alt="картинка" /><span>В картинке два состояния пункта меню. Каждое размером 200 на 100 пикселей. Если у вас старый ИЕ, она коряво отобразится, мне очень жаль.</span></p>
<p>Так как все кроме ИЕ уже отображают PNG нормально, то для них сработает обычное:</p>
<ol class="code">
<li>a{</li>
<li class="tab">height:100px; width:200px;</li>
<li class="tab">background:url(nav.png) no-repeat 0 0;</li>
<li class="tab">}</li>
<li>a:hover{</li>
<li class="tab">background-position:0 -100px; <small>/*фоновый рисунок сместится на 100 пикселей вверх, и визуально цвет пункта меню изменится*/</small></li>
<li class="tab">}</li>
</ol>
Для начала заставим ИЕ нормально отображать полупрозрачный PNG (<em>эти стили должен увидеть только ИЕ</em>):
<ol class="code">
<li>a{</li>
<li class="tab">background:none;</li>
<li class="tab">filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="nav.png", sizingMethod="crop");</li>
</ol>
Вот что нужно теперь сделать для ИЕ:
<ol class="code"><li>a{</li>
<li class="tab">height:200px;<small>/*чтобы вся картинка поместилась в фон, и было из чего вырезать*/</small></li>
<li class="tab">clip:rect(0px 200px 100px 0px); <small>/*Вырезаем верхнюю часть картинки*/</small></li>
<li class="tab">}</li>
<li>a:hover{</li>
<li class="tab">clip:rect(100px 200px 200px 0px); <small>/*Вырезаем <em>нижнюю</em> часть картинки*/</small></li>
<li class="tab">top:-100px;<small>/*Так как clip вырезал нижнюю часть, и оставил пространство вверху, нужно приподнять видимую часть картинки вверх, прямо как на фотках с Надин*/</small></li>
<li class="tab">}</li>
</ol>
Можно <a href="http://cssing.org.ua/examples/clip/pngclip.html">любоваться результатом</a>. Работает!
<p>Если словами: при наведении мышки, clip вырезает нижнюю часть ссылки (верхняя некликабельна становится). Таким образом, чтобы визуально она осталась на месте, приходится её поднять на высоту 100px вверх. А кликабельная область остается того же размера.</p>
<h3>Ссылки</h3>
<ul>
<li><a href="http://www.w3.org/TR/CSS21/visufx.html">Про clip</a> на w3c</li>
<li><a href="http://cssing.org.ua/examples/clip/pngclip.html">Clip для PNG в ИЕ</a></li>
<li><a href="http://cssing.org.ua/examples/clip/">Clip для очаровательной девушки</a>, забыл добавить её в предыдущий пост</li>
<li><a href="http://www.quirksmode.org/bugreports/archives/2005/01/Opera_CSS_clipping_bug.html">Баг в старых операх</a></li>
<li><a href="http://www.twinhelix.com/css/iepngfix/">IE PNG Fix</a> джаваскрипт автоматически производящий манипуляции с clip (спасибо Михаилу Валенцеву за ссылку).</li>
</ul>
<h3>И</h3>
Кроме <code><a href="http://www.w3.org/TR/CSS21/visufx.html#clipping">clip</a></code>, существует так же свойство <code><a href="http://w3.org/TR/2002/WD-css3-box-20021024/#the-crop">crop</a></code>. Отличается только тем, что crop не просто оставляет видимой часть блока, а еще и убирает все остальное (не остается отступов равных размеру картинки по сторонам, как на фотках с <a href="http://cssing.org.ua/examples/clip/">«Каталиной»</a>).
Вторым важным отличием этого свойства от <code>clip</code> является то, что никто его не поддерживает. CSS3 Working Draft все-таки.
<p>Свойство интересное, но найти ему применение нелегко. Кроме описанной техники для ИЕ, я слышал еще лишь об обрезании аватар, под квадратный размер, либо подобный же контроль за загружаемыми пользоваталем картинками (когда лень делать это на сервере).</p>
<p>Возможно у вас есть идея?</p>
Красота
2008-09-21T00:00:00Z
https://cssing.org.ua/2008/09/21/beauty/
<p>несколько вещей, которые восхитили меня за последний год. И продолжают восхищать.<!--more--></p>
<h3>Canon in D major, Johann Pachelbel (мелодия)</h3>
Уже давно меня завораживает <a href="http://en.wikipedia.org/wiki/Pachelbel's_Canon">эта мелодия</a> из 17 века. Самое меткое слово, которым можно описать её воздействие на меня: жизнеутверждающая. Упрощенная для узнаваемости:
<div class="img"><embed src="http://www.odeo.com/flash/audio_player_standard_gray.swf" quality="high" width="300" height="52" allowScriptAccess="always" wmode="transparent" type="application/x-shockwave-flash" flashvars="valid_sample_rate=true&external_url=http://cssing.org.ua/pic/beauty/canon.mp3" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</div>
Она настолько прекрасна, что список песен использующих её кусочки, и артистов её исполнявших исчисляется уже не десятками, а сотнями.
<ul>
<li><a href="http://www.youtube.com/watch?v=by8oyJztzwo">Jerry C</a> сыграл обработанный для гитары Канон </li>
<li><a href="http://www.helander.se/stefan/pachelbel/">Про канон</a>, и песни на его основе, и <a href="http://www.origenmusic.com/canon-pachelbel2.html">еще один список</a></li>
<li><a href="http://www.youtube.com/watch?v=JdxkVQy7QLM">Выступление Rob Paravonian</a>, иллюстрация похожести песен на Канон</li>
</ul>
Среди тех, кто её использовал Oasis, U2, Coolio, The Beatles (let it be), Bob Marley (no woman no cry), Aerosmith (Cryin), Green Day, Avril Lavigne (Sk8ter boy), Natalie Imbruglia (Torn)....
В настоящее время трудно назвать группу не использовавшую Канон. Удивительно, почти все песни её использовавшие — хиты. =)
Как математик, я конечно понимаю, что это еще и из-за того, что в основе мелодии лежит простая идея. Тем не менее.
<h3>«Венский вальс» Штрауса (балет)</h3>
Возможно, это потому, что я был на балете впервые, но мелодия "Голубой Дунай", и гармоничные музыке движения танцоров на сцене, буквально размазали меня по креслу. Были мурашки, холодок, и все прочее.
Чтобы вы поняли, о какой мелодии идёт речь, вот самый популярный ее отрывок:
<div class="img"><embed src="http://www.odeo.com/flash/audio_player_standard_gray.swf" quality="high" width="300" height="52" allowScriptAccess="always" wmode="transparent" type="application/x-shockwave-flash" flashvars="valid_sample_rate=true&external_url=http://cssing.org.ua/pic/beauty/Blue_Danube.mp3" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </div>
<p>Я был на балете, и мне понравилось. OMG.</p>
<h3>Stop Crying Your Heart Out, Oasis (песня)</h3>
Не могу придумать почему она мне нравится, но я её обожаю. Я даже полюбил какую-то глупую типичную американскую комедию, только потому, что там в одном из эпизодов заиграл этот трэк.
<div class="img"><embed src="http://www.odeo.com/flash/audio_player_standard_gray.swf" quality="high" width="300" height="52" allowScriptAccess="always" wmode="transparent" type="application/x-shockwave-flash" flashvars="valid_sample_rate=true&external_url=http://cssing.org.ua/pic/beauty/oasis.mp3" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</div>
Надеюсь братья Галлахеры не обидятся, и не посадят (или побьют?) меня за это.
<h3>5 сантиметров в секунду (аниме)</h3>
Очень трогательный и красивый фильм. Наверное лучшая работа этого режиссера, и одно из лучших снятых аниме. Красивая картинка, красивый конец, всё красиво. :)
<p class="img"><img src="http://cssing.org.ua/pic/beauty/5sm.jpg" width="572" height="402" alt="5 сантиметров в секунду" /></p>
Я до сих пор не понимаю, как жизнь японского школьника смогла настолько мне понравиться, но... Вообще аниме заслуживает отдельного поста, уж больно оно <em>другое</em>, чем всё остальное.
Еще я люблю Cowboy Bebop, но он <em>клёвый</em>, а не «красивый». Ой, черт, лучше отдельный пост!
<h3>Linda Bergkvist (художница)</h3>
Она рисует мой идеал женщины (или я сделал идеалом то, что она рисует? who cares..).
<p class="img"><a href="http://forums.cgsociety.org/showthread.php?f=137&t=242000&"><img src="http://cssing.org.ua/pic/beauty/linda.jpg" width="500" height="682" alt="Master and Servant © Linda Bergkvist" /></a><span>© Linda Bergkvist</span></p>
<p class="img"><a href="http://forums.cgsociety.org/showthread.php?f=137&t=296186"><img src="http://cssing.org.ua/pic/beauty/linda2.jpg" width="500" height="960" alt="Hajieelkhe © Linda Bergkvist" /></a><span>© Linda Bergkvist</span></p>
Автор картин, великолепная шведка, Linda Bergkvist. Обе картины кликабельны, там увеличенные кусочки, и большой формат.
<ul>
<li><a href="http://www.furiae.com/">Официальный сайт</a></li>
<li><a href="http://enayla.cgsociety.org/gallery/">Галерея на форуме</a>, где собраны её работы</li>
</ul>
<h3>А еще!</h3>
Вот в таком виде мне подарили 4 сезона «House M.D.»:
<p class="img"><img src="http://cssing.org.ua/pic/beauty/3.jpg" width="500" height="667" alt="House M. D." /><span>5 DVD</span></p>
Это самые красивые диски что мне дарили. Угадывающаяся буква «А», кстати, символизирует первую букву моего ника.
<h3>В конце</h3>
Эти «вещи» не обязательно понравятся вам, это мой вкус, на который повлияли множество факторов. Но я буду очень рад, если вы поделитесь своим. Я не фанат эстафет, но обязательно поставлю ссылку на ваш пост про красоту. Либо отметьтесь в комментариях.
<p>Надеюсь этот пост скрасил чей-то день =)</p>
<p>P.S.: пост стал участником <a href="http://blog.erlang.com.ru/post.php?2008-9-17">эстафеты</a></p>
Адаптивные блоки
2008-09-17T00:00:00Z
https://cssing.org.ua/2008/09/17/adaptive-boxes/
<p>Это когда блоки подстраиваются под ваш размер экрана изменяя ширину и положение. Звучит сложно, выглядит <a href="http://cssing.org.ua/examples/adaptive/yandtables.html">естественно</a>. Далее несколько вариантов.</p>
<!--more-->
<p>Cтолкнулся в одном из проектов. Было бы обидно оставить добытые знания пылиться бесполезной кипой в мозге. =)</p>
<h3>Простой способ</h3>
Задать блокам процентную ширину и min-width:
<ol class="code">
<li>.block{</li>
<li class="tab">float:left;</li>
<li class="tab">min-width:200px;</li>
<li class="tab">max-width:300px;</li>
<li class="tab">width:25%;</li>
<li class="tab">}</li>
</ol>
Вот так они <a href="http://cssing.org.ua/examples/adaptive/">будут вести себя при изменении ширины окна</a>. Не очень совершенный вариант, пространство всё же будет появляться.
<p>Фактически, это означает, что блоки будут резиновыми при ширине экрана от 800 до 1200 пикселей (200<em>4 и 300</em>4).</p>
<h3>Плюс javascript</h3>
Затем я решил слегка улучшить предыдущий способ, подсчитывая джаваскриптом ширину экрана.
Будем просто считать количество колонок (n), которое подходит для ширины экрана, и задавать соответствующую процентную ширину (100/n) для каждого из блоков.
<p>Вот такой простой скрипт посчитает нам количество колонок (отрывок):</p>
<ol class="code">
<li>cc=Math.floor(document.documentElement.offsetWidth/(230)); <br /><small>// максимальная ширина блока 230</small></li>
<li>document.getElementsByTagName('body')[0].className = <strong>'columns' + cc</strong>; <br /><small>// присваиваем нужный класс для body</small></li>
</ol>
И примерно такой CSS, задаст им нужную ширину:
<ol class="code">
<li>.columns1 .block{width:100%} <small>//одна колонка</small></li>
<li>.columns2 .block{width:50%} <small>//две колонки</small></li>
<li>.columns3 .block{width:33%} <small>//три колонки</small></li>
<li>...</li>
</ol>
Это решение я в итоге и использовал в проекте. <a href="http://cssing.org.ua/examples/adaptive/blocks.html">Пример</a>.
Но, пока я пришел к нему, я решил понять как это делают Яндекс и Google.
<h3>Яндекс вариант, таблицы</h3>
В своей <a href="http://images.yandex.ru/yandsearch?rpt=image&text=microformats">выдаче поиска по картинкам</a>, Яндекс использует таблицы. И если страничку посжимать, видно как она подстраивается под ваш экран. Разумеется, я раскопал скрипт создающий этот эффект.
<p>Сам код <a href="http://cssing.org.ua/examples/adaptive/yandtables.html">можно посмотреть в действии тут</a>.<br />
Вкратце: скрипт получает все ячейки таблицы в массив, из которого затем создает новую таблицу, с нужным количеством колонок. Старая таблица при этом удаляется.</p>
<p>И, это работает. <a href="http://cssing.org.ua/examples/adaptive/yandtables.html">Пример</a>. Авторство скрипта принадлежит <a href="http://vitaly.harisov.name/">Виталию Харисову</a>.</p>
<h3>Google вариант, массив</h3>
Только настоящим криптографам под силу расшифровать джаваскрипт на страничке гугла!
<p>Потратив пару часов, я понял, что они еще на сервере генерируют джаваскриптовый массив с содержимым ячеек таблицы. И затем просто работают с самим массивом, не трогая DOM. На Яндексе сделано так же, только массив каждый раз при ресайзе окна создаётся заново, что, впрочем, происходит довольно быстро.<br />
Массив выглядит как-то так:</p>
<ol class="code">
<li>dyn.Img(</li>
<li class="tab">"http:/.../micro.html","",</li>
<li class="tab">"1UaobYhmShe-WM:",</li>
<li class="tab">"http://.../micro.png","119","117",</li>
<li class="tab">"microformats.org MicroFormats logo",</li>
<li class="tab">"","","337 x 330 - 65k","png","www.andypemberton.com","","",</li>
<li class="tab">"http://tbn0.google.com/images","1",[]</li>
<li>);</li>
</ol>
Google вариант — это быстро, удобно, но не подходит для обычных людей. Вот <a href="http://images.google.com/images?q=microformats">страничка с их примером</a>.
<p>В процессе разборок с кодом google столкнулся с таким вот:</p>
<pre>function K(a,c,d,b,e,f,h,k,n,p,M,N,O,P,Q,R,S)</pre>
<p>Я нахожу это весьма милым. Хотя это и не писалось руками, а результат сжатия. Все равно мило.</p>
<h3>На... flash</h3>
Удивительно, но один <a href="http://genn.org/">знакомый гениальный дизайнер</a>, создал флэш-версию этой техники. Она занимает всего пару килобайт, и её оптимизации посвящен <a href="http://mega.genn.org/2008/big-flash-collider/">целый пост</a>.
Людям не <a href="http://cssing.org.ua/examples/adaptive/block.swf">любящим flash посвящается</a>. Было бы интересно услышать мнения о производительности примера. Я уже давно убедился, что стереотип чего-то плохого флэш получил незаслуженно.
И живой пример <a href="http://serji.com/">красивого адаптивного флэш-сайта</a>.
<h3>В конце</h3>
Ссылки на примеры и похожие техники:
<ul>
<li><a href="http://cssing.org.ua/examples/adaptive/yandtables.html">Адаптивная таблица от Yandex</a> (мой пример) и <a href="http://images.yandex.ru/yandsearch?rpt=image&text=microformats">её живой вариант</a></li>
<li><a href="http://cssing.org.ua/examples/adaptive/">Адаптивные флоат-блоки</a> (мой пример), и с <a href="http://cssing.org.ua/examples/adaptive/blocks.html">джаваскриптом</a> (мой пример)</li>
<li><a href="http://images.google.com/images?q=microformats">Адаптивная таблица от Google</a></li>
<li><a href="http://www.alistapart.com/articles/switchymclayout">Switchy McLayout: An Adaptive Layout Technique</a> — техника описанная на alistapart</li>
<li><a href="http://www.brandspankingnew.net/archive/2005/12/dynamic_layouts_with_css_javascript.html">Dynamic layouts with adaptive columns</a> — еще один пример адаптивного сайта</li>
<li><a href="http://www.themaninblue.com/experiment/ResolutionLayout/">Пример сайта с динамическим лэйаутом</a> и <a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">статья об этом</a></li>
<li><a href="http://serji.com/">Красивый сайт на флэш</a> иллюстрирующий эту же идею</li>
</ul>
Если у вас были похожие проблемы, буду рад если поделитесь опытом!
<p>За фото спасибо <a href="http://www.shorpy.com/">shorpy.com</a>, за текст лично <a href="http://www.douglasadams.com/">Дугласу Адамсу</a>!</p>
Какие-то сложные игры c флоатами
2008-08-29T00:00:00Z
https://cssing.org.ua/2008/08/29/float-mess/
<p>По-другому и правда не назовешь. Ах, эта обманчивая внешняя простота:</p>
<p class="img con"><img src="http://cssing.org.ua/pic/floatmess/1.png" alt="конечный результат" /><span>Всё красиво</span></p><!--more-->
<h3>Всё просто</h3>
Скриншот нашей цели видно выше. Казалось бы, очевидным кодом будет:
<ol class="code">
<li><dl></li>
<li class="tab"><dt>42</dt></li>
<li class="tab"><dd></li>
<li class="tabtab"><strong>Ответ на Вопрос</strong></li>
<li class="tabtab"><a href="#">Купить</a></li>
<li class="tab"></dd></li>
<li></dl></li>
</ol>
Добавим такой CSS:
<ol class="code">
<li>dl,dt,dd{</li>
<li class="tab">float:left;<small>/*флоатим каждый из блоков DL, и оба подблока DT DD*/</small></li>
<li class="tab">}</li>
<li>dd strong{</li>
<li class="tab">display:block;<small>/*чтобы название товара и кнопка «купить» были на разных строках*/</small></li>
<li class="tab">}</li>
</ol>
Добавив еще <a href="http://cssing.org.ua/examples/floatmess/beauty.css">шрифтов и цветов</a> получим это:
<p class="img con"><img src="http://cssing.org.ua/pic/floatmess/1.png" alt="конечный результат" /><span>Ничто не предвещало беды</span></p>
<h3>Oh my... not again =(</h3>
Однако, вот что происходит при ресайзе окна:
<p class="img con"><img src="http://cssing.org.ua/pic/floatmess/2.png" alt="так выглядит в ИЕ" /><span>Так выглядит в ИЕ</span></p>
Как видите, блоки в панике, и не могут найти себе места. Не хватает только знаменитого крика «А-а-а-а-а».
Признаюсь, после получаса тщетных усилий чувство паники овладело и мной. Я решил обратиться к умным ребятам в WSG.
<h3>WSG to the rescue!</h3>
Одно из замечательнейших онлайн сообществ на этой планетке. Веселые австралийцы там спорят о том «как делать сайты для слепых», «каким HTML лучше размечать логотип», и «что такое эти веб-стандарты в честь которых назвали наше сообщество». Но там всегда помогают умным CSS-советом.
<p>Калифорнийский француз, многодетный отец (2!) и вообще положительный человек <a href="http://www.tjkdesign.com/">Thierry</a>, как настоящий воин, не смог пройти мимо моей трудной задачи, и придумал своё решение. Все оказалось до постыдного простым, блоки нужно сделать inline, и задать white-space:nowrap;<br />
Вот такой код нужно было добавить к первоначальному, чтобы все заработало:</p>
<ol class="code">
<li>/*Стили только для IE*/</li>
<li>dt,dd{float:none;} <small>/*убираем флоаты*/</small></li>
<li>dt,dd{display:inline;zoom:1;} <small>/*делаем DT и DD инлайновыми, но zoom наделяет их возможностью padding и другими блочными свойствами*/</small></li>
<li>dl{white-space:nowrap;}<small>/*заставляем DT и DD быть на одной строке*/</small></li>
</ol>
Попутно, Тьерри поделился забавным ИЕ хаком (из разряда грязных):
<ol class="code"><li>dt,dd,{float:none;}<small>/*лишняя запятая*/</small></li></ol>
Вся строка будет понята только IE6-7.
Всегда полезно общаться с иностранными коллегами.
Спасибо <a href="http://www.tjkdesign.com/">Thierry</a>! <a href="http://cssing.org.ua/examples/floatmess/floatdl_thierry.html">Вот подправленный и теперь уже рабочий пример</a>.
<p>Идея и код очень простые, но именно потому могут кому-то пригодиться.</p>
<h3>Еще об этом</h3>
Изначально я пытался решить проблему CSS-таблицами, но к сожалению мне не удавалось сэмулировать это поведение для ИЕ:
<ol class="code">
<li>dl{display:table} </li>
<li>dt, dd{display:table-cell}</li>
</ol>
Это чтобы они вообще ни при каких обстоятельствах не переносились. При сильном сжатии окна, во всех предыдущих примерах, DD таки соскакивал вниз. При таком CSS, не соскакивает. <a href="http://cssing.org.ua/examples/floatmess/floatdl_akella.html">Пример</a>.
<h3>И еще вариант!</h3>
Как круто и гениально посоветовал в комментариях Влад, все это можно было бы решить вообще одной строкой для ИЕ:
<ol class="code">
<li>dt,dd{clear:right}</li>
</ol>
Совершенно непонятно почему, что, впрочем, не редкость с ИЕ, но <a href="http://cssing.org.ua/examples/floatmess/floatdl_vlad.html">это работает</a> =).
Великолепно иметь в запасе сразу две простых идеи решения такой задачи.
<h3>В конце</h3>
Хотя проблема специфична, она связана с «флоатами в одну строку». Что, вобщем, встречается нередко. Никогда не знаешь где может пригодиться inline или clear.
Интересной проблема мне показалась еще и из-за внешней простоты дизайна.
<ul>
<li><a href="http://cssing.org.ua/examples/floatmess/normal.html">Первый глючный пример</a></li>
<li><a href="http://cssing.org.ua/examples/floatmess/floatdl_thierry.html">Пример от Тьерри</a> с display:inline</li>
<li><a href="http://cssing.org.ua/examples/floatmess/floatdl_akella.html">Третий пример</a> с table-cell</li>
<li><a href="http://cssing.org.ua/examples/floatmess/floatdl_vlad.html">Пример от vladfrandom</a> c clear:right</li>
</ul>
Буду рад если поделитесь своими мыслями по теме! Или задачами =)
Блок внизу одной из колонок
2008-08-14T00:00:00Z
https://cssing.org.ua/2008/08/14/valign-bottom/
<p>О том как это сделать меня спросили 2 раза за последние 3 дня, потому... Простой приём, вряд ли это будет полезно опытным кодерам, но наверняка принесет кому-то пользу.</p>
<!--more-->
<h3>Проблема</h3>
Поместить блок в одну из колонок одинаковой высоты, и прижать к низу:
<p class="img con"><img src="http://cssing.org.ua/pic/bottomblock/layout12.png" width="480" height="314" alt="Блок внизу колонки" /><span>Блок внизу колонки</span></p>
При этом, если вдруг контента в колонке станет много, поведение должно быть таким:
<p class="img con"><img src="http://cssing.org.ua/pic/bottomblock/layout2.png" width="480" height="509" alt="поведение при длинной колонке" /><span>Поведение при длинной колонке</span></p>
<p>Конечно, умный читатель сразу, подметит что эту картинку внизу можно было бы сделать и обычным фоновым рисунком, с <code>background-position:left bottom</code>. Но что если вместо гениальной картины Малевича внизу будет фраза Ницше?</p>
<p class="img con"><img src="http://cssing.org.ua/pic/bottomblock/layout1.png" width="480" height="314" alt="Текстовый блок внизу колонки" /><span>Текстовый блок внизу колонки</span></p>
Согласитесь, картинка в формате JPG и Ницше, это как-то глупо.
<p>Вобщем, это я к тому, что туда нужно поместить блок, а не просто фоновую картинку.</p>
<p>Будем считать, что кунг-фу <a href="http://cssing.org.ua/2004/09/10/flex-faux/">колонок одинаковой высоты</a> все уже умеют делать. Тогда после нехитрого CSS, у нас будет что-то <a href="http://cssing.org.ua/examples/bottomblock/index0.html">вроде этого</a>:</p>
<p class="img con"><img src="http://cssing.org.ua/pic/bottomblock/layout.png" width="480" height="314" alt="Обычные две колонки одинаковой высоты" /><span>Обычные две колонки одинаковой высоты</span></p>
CSS (который уверен все знают):
<ol class="code">
<li>#out{</li>
<li class="tab">background:#fff url(<a href="http://cssing.org.ua/examples/bottomblock/str.png">str.png</a>) repeat-y 0 0; <small>/*колонки "одинаковой" высоты*/</small></li>
<li class="tab">}</li>
<li class="tab">#left{width:200px;float:left;}</li>
<li class="tab">#right{width:500px;float:right;}</li>
</ol>
<h3>Решение #1, обычное</h3>
Идея крайне простая. Так как колонки у нас на самом деле не одинаковой высоты физически (видимость одинаковой высоты создает картинка). То ориентироваться можно лишь по низу обертки, в данном случае #out. Таким образом, достаточно поместить цитату Ницше в левый нижний угол блока #out, освободив при этом место внизу колонки #left:
<ol class="code">
<li>#out{</li>
<li class="tab">position:relative; <small>/*точка отсчета для absolute*/</small></li>
<li class="tab">}</li>
<li>#left{</li>
<li class="tab">padding-bottom:200px; <small>/*место в колонке для нижнего дива*/</small></li>
<li class="tab">}</li>
<li>#bottom{</li>
<li class="tab">position:absolute;</li>
<li class="tab">bottom:0; <small>/*левый нижний угол #out и левой колонки*/</small></li>
<li class="tab">left:0;</li>
<li class="tab">}</li>
</ol>
Можно посмотреть как это <a href="http://cssing.org.ua/examples/bottomblock/">выглядит и работает</a>.
<h3>Решение #2</h3>
Второе известное мне решение, основано на отрицательных отступах. Мы просто помещаем блок с цитатой <em>после</em> блока #out, и задаем ему отрицательный отступ вверх, вот так:
<ol class="code">
<li>#left{</li>
<li class="tab">padding-bottom:200px; <small>/*место для нижнего дива*/</small></li>
<li class="tab">}</li>
<li>#bottom{</li>
<li class="tab">margin-top:-200px;</li>
<li class="tab">position:relative; <small>/*чтобы блок отобразился поверх #out*/</small></li>
<li class="tab">}</li>
</ol>
<a href="http://cssing.org.ua/examples/bottomblock/index1.html">Пример этого метода</a>
<h3>В конце</h3>
Будь то Ницше или Малевич, мы всегда сможем их прижать к низу ;-)
<p>Кроме всего прочего, вчера эту задачу задали верстальщику на собеседовании. ;-)</p>
<p>Буду рад если поделитесь идеями на эту тему, или похожими проблемами, которые мы тут же решим все вместе.</p>
G-club, микроформаты и дизайн
2008-08-08T00:00:00Z
https://cssing.org.ua/2008/08/08/microformats-at-g-club/
<p>Выступали в <a href="http://www.globallogic.com.ua/globallogic/index.php?option=com_content&task=view&id=17213&Itemid=124">g-club</a>, замечательной инициативе от компании <a href="http://www.globallogic.com.ua/globallogic/">GlobalLogic</a>. Я рассказывал о вёрстке и микроформатах, <a href="http://mega.genn.org/">Гена</a> забавно и увлекательно о том <a href="http://mega.genn.org/2008/08/07/sites-in-g-club/">как делать сайты</a>.</p>
<!--more-->
<h3>Презентация</h3>
В ней куча скриншотов и картинок, основную часть информации я проговорил.
<object style="margin:0px" width="425" height="355"><param name="movie" value="http://static.slideshare.net/swf/ssplayer2.swf?doc=rep-1218053991455299-8&stripped_title=microformats-and-coding" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><embed src="http://static.slideshare.net/swf/ssplayer2.swf?doc=rep-1218053991455299-8&stripped_title=microformats-and-coding" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355" /></object>
<h3>Краткое вступление</h3>
Кроме рассказа о компаниях и проектах с кодом которых я сталкивался или работал, я рассказал о том, что такое микроформаты, на паре простых примеров показал, <em>как легко их внедрять</em>. Затем рассказал о гугловском API для парсинга XFN связей. Вот несколько ссылок:
<ul>
<li><a href="http://cssing.org.ua/2007/12/21/gogo-mf/">Микроформаты в жизнь</a> — мой старый пост о микроформатах</li>
<li><a href="http://microformats.org/">microformats.org</a> — официальный сайт микроформатов</li>
<li><a href="http://code.google.com/apis/socialgraph/">Google Social Graph API</a>, тот самый интерфейс гугла, для получения XFN связей. <a href="http://socialgraph-resources.googlecode.com/svn/trunk/samples/findcontacts.html?q=cssing.org.ua%0D%0A%0D%0A">На примере CSSing</a></li>
<li><a href="http://www.digital-web.com/articles/portable_social_networks_building_blocks_of_a_social_web/">Portable Social Networks, The Building Blocks Of A Social Web</a> — хорошая статья про социальные сети и XFN</li>
<li><a href="http://tantek.com/presentations/2007/10/social-network-portability/">Fundamentos Web: Social Network Portability</a> — презентация Тантека Челика.</li>
</ul>
<h3>Микроформаты для экономии времени</h3>
Проект toluu.com использует микроформаты для заполнения регистрационной инфо. Просто вводите ваш логин с Flickr, Upcoming или Twitter. Информация о вас будет взята оттуда: аватар, имя, сайт.
<p>Убедиться можно на <a href="http://www.toluu.com/join">этой страничке</a> (обратите внимание на блок «Use any of these?» справа).</p>
<h3>Yahoo & μF</h3>
Яху <em>уже</em> может искать по микроформатам, и это замечательно. Запрос нужно отправлять вида:
<pre>searchmonkeyid:com.yahoo.uf.hcard YourKeyword</pre>
Для поиска по hCard. Ну и соответственно, поиск по hReview:
<pre>searchmonkeyid:com.yahoo.uf.hreview YourKeyword</pre>
На всякий случай, uf — одно из общепринятых сокращений слова микроформаты (u напоминает μ)
Вот несколько готовых интересных ссылок (скрины в презентации):
<ul>
<li><a href="http://search.yahoo.com/search;_ylt=A0geu_GYAphI7xgBOjRXNyoA?p=searchmonkeyid%3Acom.yahoo.uf.hcard+artyukh&y=Search&fr=&ei=UTF-8">Поиск всех hCard людей, где упоминается фамилия Artyukh</a>, попробуйте со своим ником-именем-фамилией</li>
<li><a href="http://search.yahoo.com/search;_ylt=A0geu_ES3ZpIgRIBf9hXNyoA?p=searchmonkeyid%3Acom.yahoo.uf.hcard&y=Search&fr=&ei=UTF-8">Поиск всех hCard</a>, видно, что проиндексировано уже более миллиарда hCard</li>
<li><a href="http://search.yahoo.com/search;_ylt=A0geu_GYAphI7xgBOjRXNyoA?p=searchmonkeyid%3Acom.yahoo.uf.hreview+400D&y=Search&fr=&ei=UTF-8">Поиск всех hReview о фотоаппарате Canon 400D</a>, забавно что если бы было видно звездочки (оценки), можно бы было судить о фотоаппарате не кликая по ссылкам вообще</li>
<li><a href="http://search.yahoo.com/search;_ylt=A0geu432oJlInhsAyCVXNyoA?p=searchmonkeyid%3Acom.yahoo.uf.hreview+higuma&y=Search&fr=&ei=UTF-8">Поиск всех hReview о ресторанах со словом Higura</a>, а вот тут уже видно звездочки, здорово, да?</li>
</ul>
Для тех кто поленился кликать, вот картинка, значения для сереньких полей берутся из соответствующих полей в hCard (class="position" etc..):
<p class="img"><img src="http://cssing.org.ua/pic/mf.png" alt="микроформаты на yahoo" /><span>Микроформаты в действии!</span></p>
<span class="note">(Синим отвратительным маркером я обозначил места на которые нужно обратить внимание.)</span>
<p>А это уже означает, что микроформаты дают преимущество в поиске. А значит помогают SEO, а значит... <em>приносят деньги</em>.</p>
<p class="note">для такого отображения используется механизм SearchMonkey, который в свою очередь использует микроформаты. Но в моих мечтах яху начнет отображать их автоматически при заданном поиске по hCard или hReview</p>
<p>И ведь ничего не мешает yahoomen поставить вместо этого сложного запроса радиобуттон: «Искать в ревью» (hReview), «Искать в людях» (hCard), «Искать в событиях» (hCalendar).</p>
<p>Кажется, именно так они решили проблему <a href="http://cssing.org.ua/2007/12/21/gogo-mf/#comment-11521">курицы и яйца</a>. Как я уже говорил, поисковых механизмов по микроформатам нет, потому что недостаточно самих микроформатов в интернете. А микроформаты не внедряют на сайтах, потому что нет поиска по ним.</p>
<p>И вот, более миллиарда hCard и 46 миллионов hReview. And counting...</p>
<p>Подробнее о Searchmonkey (кастомизации результатов поиска) читайте в блоге талантливого разработчика Артемия Трегубенко «<a href="http://blog.arty.name/2008/mikroformatyi-yahoo-searchmonkey/">микроформаты, yahoo, searchmonkey</a>». Там же, пример профиля сайта для <a href="http://mirtesen.ru/">mirtesen.ru</a>.</p>
<h3>Фотки</h3>
<p class="img"><img src="http://cssing.org.ua/pic/gclub/1.jpg" width="470" height="313" alt="гена не упустил шанса что-то написать" /><span>Гена решил разрядить обстановку</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/gclub/2.jpg" width="470" height="314" alt="гена не упустил шанса что-то написать" /><span>Геннадий, какой-то парень, зал и сложный вопрос (слева направо)</span></p>
За фото спасибо Константину Кудрявцеву! Жаль только не видно, что выступали мы с Macbook Air, iBook и iPhone =)
<h3>В конце</h3>
<ul>
<li><a href="http://mega.genn.org/2008/08/07/sites-in-g-club/">Отчет Геннадия Осипенко</a>, там же его презентация с полным текстом доклада</li>
<li><a href="http://globallogic.com.ua/globallogic/?option=com_content&task=view&id=17640&Itemid=131">Другие мероприятия в g-club</a></li>
</ul>
Не то чтобы информация из доклада была сильно уникальна, но меня бы заели друзья за то, что я не пересказал свой доклад.
<p>Получилось неплохо! Еще десяток выступлений и мои связки окончательно окрепнут. =)</p>
Зачем жить
2008-07-13T00:00:00Z
https://cssing.org.ua/2008/07/13/why/
<p>Некоторые мысли математика родившиеся когда стало совсем плохо. И возникли вопросы, вроде: "а зачем дальше-то жить?". А я знаю зачем, akella. <!--more--></p>
<h3>Когда</h3>
Когда вам отрубили интернет, все порноканалы, заставили слушать шансон и кушать пенку на манной каше. В такие моменты невольно задумаешься, а зачем жить дальше?
Наверняка у многих бывали причины и поскучнее, но суть одна, <strong>зачем</strong>.
<h3>Вот</h3>
Я представил, что весь мир — это число, сумма чисел всех людей. Число человека — его поступки. Плохой поступок человека — «-1», хороший — «+1». Каждый человек непрерывно делает поступки, и мир, сумма этих поступков каждого человека. Сумма «чисел-людей». Возможно это «+1 000 000», когда мир хорош, или «-1000», когда всё скорее плохо, чем хорошо. Но, это такое вот число. И на него влияет каждый человек. Своими делами.
<p>Если вас не станет, вы не сможете влиять на него, вы будете обычный 0. И так навсегда.<br />
А если вы останетесь, и будете делать что-то хорошее, вы сможете изменить мир. Вы сможете сделать сумму мира — больше. Это же круто, делать этот мир лучше. Вместо того чтобы стоять в стороне с обиженным лицом и теребить свой 0.</p>
<p>Вобщем, какая бы фигня в жизни у вас не происходила, лучше всё же здесь остаться. И изменять весь мир к лучшему.</p>
<p>Кому нужен хороший мир? Я не знаю ответа на этот вопрос. Но кому-то точно нужен. Скорее всего, и в первую очередь, вам самим.</p>
<h3>Вы?</h3>
Это часть моей головы, она где-то рядом с <a href="http://cssing.org.ua/2007/11/30/you-are-genius/">кляксами</a>, ни плохая ни хорошая, но часть.
<p>И.. рад услышать мнения, и ваши же обоснования, зачем. Моменты такие (особенно с манкой), уверен, бывают почти у всех.</p>
Круглые уголки, интересные варианты
2008-06-23T00:00:00Z
https://cssing.org.ua/2008/06/23/rounded-corners-unusual-approach/
<p>Пару подсмотренных интересных способов и вариант, который обычно использую я.<!--more--></p>
<h3>Обычный вариант</h3>
На всякий случай расскажу о банальном, и основном способе вёрстки круглых краёв у блоков. Это всего лишь несколько обёрнутых один в другой дивов. Вот так:
<ol class="code">
<li><!-- BEGIN блок с круглыми краями --></li>
<li><div class="content"></li>
<li class="tab"><div class="in1"> </li>
<li class="tabtab"><div class="in2"></li>
<li class="tabtabtab"><div class="in3"></li>
<li class="tabtabtabtab">наконец контент!</li>
<li class="tabtabtab"></div></li>
<li class="tabtab"></div></li>
<li class="tab"></div></li>
<li></div></li>
<li><!-- END блок с круглыми краями --></li>
</ol>
Для уголков соответственно берутся картинки вроде этой:
<p class="img"><img src="http://cssing.org.ua/examples/corners/corner.png" alt="уголок" /> <span>Закругленный уголок, обычно нужно 4 штуки, для каждого из углов</span></p>
<p>Расставляются уголки вот так:</p>
<ol class="code">
<li>.content{background:url(../img/top-left.png) no-repeat top left}</li>
<li>.in1{background:url(../img/top-right.png) no-repeat top right}</li>
<li>.in2{background:url(../img/bottom-left.png) no-repeat bottom left}</li>
<li>.in3{background:url(../img/bottom-right.png) no-repeat bottom right}</li>
</ol>
<h3>Вариант на wordpress.org, css only</h3>
<ol class="code">
<li>.block{</li>
<li class="tab">-moz-border-radius: 3px;</li>
<li class="tab">-khtml-border-radius: 3px;</li>
<li class="tab">-webkit-border-radius: 3px;</li>
<li class="tab">border-radius:3px;</li>
<li class="tab">}</li>
</ol>
Это сработает везде кроме IE (и Opera всё собирается), а это сейчас уже, вобщем, <strong>немало</strong>. Потому для не очень важных мест, или для сайтов с известной статистикой, это можно делать уже сейчас.
<p>Также идеально подходит для ресурсов, которые хотят выказать своё идеологическое "Фе" неполноценным, по их мнению, броузерам.</p>
<h3>Вариант на beta.ya.ru</h3>
Всем верстальщикам знаком неприятный момент при загрузке круглых уголков. Они грузятся по очереди, и иногда это выглядит довольно неопрятно. Решить эту проблему можно, если поместить все уголки в одну картинку, и затем просто смещением позиции фона, расставить их.
Но возникает вопрос — «<strong>Как это сделать, черт возьми?</strong>».
<p>В Яндексе эту проблему решили. На <a href="http://beta.ya.ru/">главной</a> можно пронаблюдать кнопочку «Присоединиться». (тем кто залогинен, нужно выйти, на секунду)</p>
<p class="img"><img src="http://cssing.org.ua/examples/corners/betayaru.png" alt="кнопка на beta.ya.ru" /> <span>При увеличении шрифта, кнопочка будет расти. Более того! Фоном для нее может служить любой рисунок или градиент(имеется ввиду подложка, которая сейчас белая)</span></p>
Вот какой применяется HTML:
<ol class="code">
<li><a href="#" class="b-button b-button-orange"></li>
<li class="tab"><i class="t"><i></i></i></li>
<li class="tab"><i class="r"><i></i></i></li>
<li class="tab"><i class="b"><i></i></i></li>
<li class="tab"><i class="l"><i></i></i></li>
<li class="tab"><i class="rt"><i></i></i></li>
<li class="tab"><i class="rb"><i></i></i></li>
<li class="tab"><i class="lb"><i></i></i></li>
<li class="tab"><i class="lt"><i></i></i></li>
<li><b>Присоединиться!</b></li>
<li></a></li>
</ol>
Выглядит страшновато, но на самом деле все очень просто, и с помощью всего двух таких вот необычных картинок:
<p class="img"><img src="http://img.yandex.net/i/button/orange.png" alt="" /> <span>Все круглые края, а также верх и низ кнопки</span></p>
<p class="img"><img src="http://img.yandex.net/i/button/orange-lr.png" alt="" height="60px" width="32px" /> <span>Левый и правый края кнопки. Картинка на самом деле 32x1 пиксель, но я её растянул, чтобы было видно.</span></p>
Настоящие математики думаю оценят красоту задачи: "парой картинок реализовать круглые края".
<p>Вуаля, нам удалось реализовать круглые края, еще и с отличающейся от цвета фона границей.</p>
<p>Полный код я приводить не буду, скажу лишь, что всё замешано на position:absolute и background-position. Кому интересно, весь CSS-код находится в <a href="http://img-css.friends.yandex.net/css/_morda.css?build=11465">начале этого файла</a>.<br />
Остается только преклониться перед мастерством, и я бы сказал, изворотливостью профессионалов работающих в Яндекс (Крыму привет!). =)</p>
<p>Вобщем-то этот пост я затеял, чтобы поделиться Яндекс и "вордпресс" вариантами. Надеюсь и у вас в загашнике что-то есть.</p>
<h3>Cсылки</h3>
Проблема, мягко говоря, изучена вдоль и поперёк. Несколько полезно-интересных ссылок.
<ul>
<li><a href="http://cssing.org.ua/examples/corners/">Три примера из поста, вживую</a></li>
<li><a href="http://blog.ad.by/2008/03/nice-rounded-corners-for-ie-safari.html">Закругленные уголки с помощью VML (IE) и border-radius(для всех остальных), работает в IE,Safari,Firfox</a></li>
<li><a href="http://css-discuss.incutio.com/?page=RoundedCorners">Круглые уголки</a>, все методы, классифицированные по способам реализации</li>
<li><a href="http://www.roundedcornr.com/">Roundedcornr.com</a> ресурс для генерации картинок круглых уголков</li>
<li><a href="http://www.curvycorners.net/">Curvy Corners</a> генерируются джаваскриптом</li>
<li><a href="http://www.spiffycorners.com/">Spiffy Corners</a> без джаваскрипта, без картинок, эмуляция с помощью нескольких дополнительных дивов</li>
<li><a href="http://www.html.it/articoli/nifty/index.html">Nifty corners</a>, тоже самое что Spiffy, только с джаваскриптом</li>
<li><a href="http://www.cssplay.co.uk/boxes/krazy.html">Несколько интересных вариантов от Stu Nicholls</a> (Спасибо Tutta)</li>
</ul>
Рад буду услышать Ваш оригинальный способ для круглых уголков! Я думал, что применял всё что известно, но оказалось что о двух рассказанных сегодня в посте, я всерьез не задумывался никогда.
<p>ЗЫ: никогда никого не просил о помощи в этом блоге, но если Вы учитесь(учились, работаете) на физфаке МГУ и у вас добрая душа (или вы просто хотите улучшить карму, как это делает <a href="http://www.nbc.com/My_Name_Is_Earl/">Earl</a>), дайте знать пожалуйста, я в долгу не остаюсь.</p>
wp_footer exploit, владельцам блогов на Wordpress
2008-06-01T00:00:00Z
https://cssing.org.ua/2008/06/01/wp-footer-exploit/
<p>Мой блог стал пропадать из гугла, причиной оказался практически незаметный эксплойт для Wordpress. О том как узнать о нем, и избавиться от него, этот пост.</p>
<!--more-->
<p>Чтобы узнать об этих граблях мне пришлось наступить на них. Это было больно, половина страниц моего блога ушла из индекса гугла. Надеюсь с вами этого не случится.</p>
<h3>Что вообще происходит?</h3>
После определенных действий (о них ниже) на вашем блоге появляются рекламные ссылки на другой ресурс.
Однако видят их только поисковые боты. При обычном просмотре страничек вы не увидите их следа.
<p>Я заметил их случайно, просматривая HTML <a href="http://cssing.org.ua/pic/exp/cssing.html">закешированной главной странички</a> моего блога, вот скриншот кода (внизу странички, после футера, <strong>очень</strong> много ссылок):</p>
<p class="img"><a href="http://cssing.org.ua/pic/exp/big.png"><img src="http://cssing.org.ua/pic/exp/exploit.png" alt="скриншот спама" /></a><span>Куча спама в коде cssing'a</span></p>
Или вот кусочек кода, чтобы было видно:
<pre class="over"><div id="_wp_footer"><a href="http://www.articulate.com/blog/?page=0" title="Acyclovir">Acyclovir</a>
<a href="http://www.articulate.com/blog/?page=1" title="Adderall">Adderall</a>
<a href="http://www.articulate.com/blog/?page=2" title="Adipex">Adipex</a>
<a href="http://www.articulate.com/blog/?page=3" title="Alprazolam">Alprazolam</a>
<a href="http://www.articulate.com/blog/?page=4" title="Ambien">Ambien</a>
... и еще около 100 ссылок ...
</pre>
Ссылки, конечно, могут быть и другие, но их будет <strong>очень много</strong>, и заметить их будет легко.
<p>Обнаружить у себя этот спам очень просто:</p>
<ol>
<li>Вводим в google адрес своего блога</li>
<li>Жмем на "cached" или "сохраненная копия"
<img src="http://cssing.org.ua/pic/exp/goo.png" alt="" /></li>
<li>В своём броузере нажимаем "View Source" (просмотр исходного кода, или HTML-кода)</li>
<li>В самом низу кода ищем огромный список левых ссылок (как показано выше на скриншоте, и в виде текста). Ссылки могут быть другие, но понять ваши они или нет, вы сможете легко.</li>
</ol>
Либо прописываем в фаерфоксе вместо User Agent - "Googlebot/2.1 (+http://www.googlebot.com/bot.html)". Типа для продвинутых.
<p>Cсылки вставляются с помощью функции <code>wp_footer()</code>. Потому для быстрого исправления, достаточно ее закомментировать в <code>footer.php</code>. (она редко кем используется)</p>
<h3>Как это всё убрать</h3>
Так как у эксплойта есть несколько лазеек, нужно пробовать пока не получится.
Вот варианты:
<h4>1. Проверить .htaccess</h4>
В .htaccess возможны подозрительные редиректы. Обычно этот файл довольно маленький и без ссылок.
<h4>2. Проверить файлы внутри вашей темы</h4>
Проверить папку <code>wp-content/wp-theme/YOUR_THEME/</code> на предмет подозрительных файлов. Например в некоторых случаях там появляется файл index2.php. Или еще что-то необычное.
<h4>3. Проверить папку <code>wp-includes/</code></h4>
Искать нужно файл <code>class-mail.php</code>, если найдете:
<code>compat.php</code> — (необходимо заменить на корректный с wordpress.org)
<code>class-mail.php</code> — удалить.
<h4>4. Проверить файл <code>wp-includes/default_filters.php</code></h4>
В файле default_filters.php поищите такую строку:
<pre>add_action('wp_footer','wpc7c16b8466d864eeefd20050625c7775');</pre>
Или похожие на нее. Они же могут вобщем-то быть в любых файлах.
<h4>5. Таблица wp_options</h4>
В базе данных следует обратить внимание на строку в таблице wp_options, где <code>option_name=<strong>active_plugins</strong></code>. Там, в поле <code>option_value</code> вероятно могут находиться ссылки на вызываемый код, например так:
<pre class="over">i:1;s:117:"../../../../../../../../../../../../../../../../../../../../../../tmp/tmpzv0zq2/sess_12d33bbd6fb1b4f67df11f089be43b20";
<p>i:2;s:45:"../../wp-content/themes/cssing2/index_old.gif";<br />
</p></pre><br />
Не может не вызвать подозрения, неправда ли?<br />
Обычно там что-то вроде этого:<p></p>
<pre>i:6;s:25:"subscribe-to-comments.php";</pre>
<p>Если у вас обнаружились похожие подозрительные значения в базе, скорее всего такой запрос вернет вам остатки эксплойта:</p>
<pre>SELECT option_value FROM wp_options WHERE option_name = 'internal_links_cache'</pre>
<p>Непосредственно в этом поле, у меня хранились ссылки выводимые поисковикам закодированные base64.</p>
<h4>6. Проверить файлы *_new.giff *_old.pngg *_new.php, *_old.gif</h4>
В некоторых директориях инсталляции Wordpress могут появится файлы вроде index_old.gif, index_old.giff, whatever_new.php. И тому подобные. Их нужно обязательно удалить.
Файлы могут быть во всех директориях:
<code>/wp-content/uploads
/wp-content/plugins
/wp-content/themes
/wp-includes
/wp-admins
/</code>
<h4>7. Поиск 'base64' в тексте</h4>
В идеале лучше сделать поиск по всем файлам Вордпресса таких строк:
<strong>base64</strong> (рядом с кучей непонятных символов) — рядом должно быть что-то вроде <code>eval</code>....
<strong>_wp_footer_</strong> (в нормальном Wordpress не найдётся)
(или кусочки HTML, который выводит у вас СПАМ-ссылки)
<p>Эти кусочки кода могут оказаться в почти любом файле Wordpress.</p>
<p><strong>Каково! Куча вариантов на выбор, как вставить вам спам! Вот где смекалка сегодня работает!</strong></p>
<p>Интересно так же, что все методы позволяют вам апгрейдить Wordpress. Обновляйте его хоть каждый день, если эксплойт прописан, он останется. Умные спаммеры.</p>
<h3>Полезные ссылки</h3>
Без информации из этих ссылок, я бы просто не справился с атакой за 2 часа.
<ul>
<li><a href="http://www.teohuiming.name/blog/wordpress-exploit">Пошаговая инструкция по выявлению эксплойта в базе данных (очень полезно)</a> и <a href="http://linux.byexamples.com/archives/397/wordpress-exploit-we-been-hit-by-hidden-spam-link-injection/#more-397">вся история обнаружения и исследования атаки</a></li>
<li><a href="http://blog.kakkoi.net/wordpress/how-to-removed-wordpress-net-in-spam-injection-infected-by-mike-jagger-goro-class-mailphp/">Еще одна пошаговая инструкция к исправлению ситуации</a></li>
<li><a href="http://justinsomnia.org/2007/08/search-engine-marketeers-are-the-new-script-kiddies/">О том как один блоггер расследовал этот хак, и "нашел" ответственных</a>.</li>
<li><a href="http://pseudo-flaw.net/log/20/more-random-wordpress-blogs-and-al-gore-owned-by-seo-spammers">More Random WordPress Blogs (and Al Gore) Owned by SEO Spammers</a>, еще одно небольшое расследование ситуации</li>
<li><a href="http://cssing.org.ua/pic/exp/index_old.gif.zip">Файл index_old.gif</a>, для тех кому интересен хакерский код</li>
</ul>
У меня оказалось следующее:
<ol>
<li>wp-content/wp-theme/cssing/index_old.gif</li>
<li>Записи в таблице wp_options, в полях описанных выше.</li>
</ol>
<p>P.S.: Об истоках:</p>
<blockquote>I also found a signature name <strong>alxumuk</strong>...</blockquote>
Все дорожки ведут к славянам...
На блоге Альберта Гора, кстати тоже был этот вид спама, один в один как на cssing. =).
<p>Обновляйте wordpress почаще, и посматривайте не подцепили ли вы что-то вроде этого... Эксплойту, уверен, подвержено не так много сайтов, но лучше провериться.<br />
Опыт, мысли, советы — приветствуются!</p>
Интересное о мобильном интернете
2008-05-29T00:00:00Z
https://cssing.org.ua/2008/05/29/mobile-web-some-facts/
<p>Поучаствовал в жюри <a href="http://redtram.com/wap/contest/">журналистского конкурса</a>. В процессе пришлось прочесть несколько десятков статей о мобильном интернете. Чтобы полученная информация не пропала зря, публикую подборку интересных приобретенных знаний. А так же веб-разработческие советы по теме.<!--more--></p>
<h3>Всякое разное про мобильный интернет</h3>
Оказывается он уже очень популярен:
<blockquote>Мобильным интернетом по всему миру пользуется <strong>25%</strong> <strong>владельцев</strong> мобильных телефонов, а это почти <strong>825 миллионов</strong> человек </blockquote>
<blockquote>В Украине, по разным данным, любителей мобильно «прогуляться» по Сети около <strong>5 млн</strong>, в России около <strong>14 млн</strong>. </blockquote>
<blockquote>Почти <strong>30% всех выходов в Сеть</strong> в 2007 году осуществлялись исключительно с мобильных телефонов</blockquote>
<p>Под "выходами в сеть" имеются ввиду видимо люди, и правильнее (спасибо <a href="http://shitov.ru/">Андрею</a> за поправку):</p>
<blockquote>30 % тех, кто пользуется интернетом, пользуется им и с телефона</blockquote>
<p>Забавный факт:</p>
<blockquote>Также было установлено, что подавляющее большинство пользователей мобильного Интернета в Украине — это <strong>мужчины (91%)</strong>. В то же время <strong>женщины</strong> практически его не используют — <strong>всего 9%</strong>.</blockquote>
<p>Это перспективнее чем наркотики, порно и даже(!) недвижимость:</p>
<blockquote>По прогнозам исследовательской компании Juniper Research, к 2012 году количество активных пользователей различных мобильных социальных сетей увеличится более чем <strong>в 40 раз</strong> — до <strong>600 млн человек</strong>. Общий доход от этих сервисов вырастет более чем <strong>в 10 раз</strong> — до 5,7 млрд долларов.</blockquote>
<blockquote>Все больше производителей переходят на ОС Windows Mobile 6. Попытаемся сейчас спрогнозировать самые перспективные ОС, которые выберут большинство производителей. Это, конечно же <strong>Windows Mobile, Android и S60</strong>. </blockquote>
А значит в интернете нам стоит ждать Opera, Safari, Internet Explorer.
Но iPhone сам по себе крут:
<blockquote>Apple's iPhone is the <strong>No. 1 mobile browser</strong> in the US and No. 2 in the UK</blockquote>
<p>(броузер номер один в Америке, и на втором месте в Британии)</p>
<p>Как всегда в таких статистиках, всё покрыто мраком, и десятки разных чисел и систем подсчета, но общие тенденции ясны =)</p>
<h3>Веб-разработческое</h3>
Считалось, что мобильникам, и КПК можно отдавать CSS используя <code>media="handheld"</code>. Однако, как показало время, его почти все (кроме оперы, которой я как-то и не пользовался еще) игнорируют. В лучшем случае ваш сайт отобразят без стилей, в худшем — попытаются отобразить во всей красе на своем экранчике.
<p>Очень полезной является в этом смысле заметка Dave Shea <a href="http://mezzoblue.com/archives/2008/03/18/mediatyping/">Mediatyping </a>. Это всего лишь скрипт для определения устройств, с которых человек зашел на страничку. Фильтруются они на серверной части, и таким образом можно отдавать отдельный CSS для КПК примерно так:</p>
<ol class="code">
<li><?php</li>
<li class="tab">if ($mediaVersion == "mobile") {</li>
<li class="tabtab">echo "Контент для мобильника, например CSS-файл";</li>
<li class="tab">}</li>
<li>?></li>
</ol>
Более того, можно показывать отдельные части страницы лишь для мобильных, облегчая им трафик.
<p>Скрипт адски простой, но это и отличает наших программистов от "ихних", они умеют пиарить полезные простые вещи, а у нас... как-то по другому всё.</p>
<h3>CSS3</h3>
Так же <a href="http://www.css3.info/preview/media-queries/">хорошие перспективы</a> сулит нам CSS3. Это <strong>уже</strong> работает в Опере и Сафари 3 (а значит и в iPhone):
<ol class="code">
<li>@media all and (min-width: 640px) {</li>
<li class="tab">#ya-pc{display:block}</li>
<li>}</li>
</ol>
Будет означать что этот кусочек CSS только для устройств с шириной (разрешением) экрана более 640px.
А это для мобильных устройств с экраном не более 500px в ширину:
<ol class="code">
<li>@media all and (max-width: 500px) {</li>
<li class="tab">#ya-mobilnik{display:block}</li>
<li>}</li>
</ol>
А вот живой пример CSS специально для iPhone:
<ol class="code">
<li><link media="<strong>only screen and (max-device-width: 480px)</strong>" href="iphone.css" type="text/css" rel="stylesheet" /></li>
</ol>
Взят с сайта <a href="http://wordpress.org/">wordpress.org</a>.
<p><a href="http://www.w3.org/TR/css3-mediaqueries/">Спецификация</a>, для интересующихся. Это действительно может сильно упростить стилизацию сайтов для мобильных.</p>
<h3>Лично я</h3>
Я на своей Nokia 6120 проверяю почту, и админку блога. Иногда, в экстремальных ситуациях разыскиваю нужную информацию. И... всё.
<p>Буду рад если вы поделитесь своим опытом разработки сайтов под мобильники! Или просто сёрфинга :)</p>
<p>P.S.: В конкурсе, кстати, заслуженно победила статья Сергея Гипша о Яндекс.Пробках.</p>
5 советов верстальщику
2008-05-21T00:00:00Z
https://cssing.org.ua/2008/05/21/5-things-to-remembe/
<p>Принимаю <a href="http://uggallery.audiopeace.ru/2008/05/19/5-advices">всеобщее</a> <a href="http://blog.sribna.com/5-sovetov-verstalschiku.htm">увлечение</a> рекомендациями по вёрстке. Мои 5 советов верстальщику. Не тайные манускрипты, а всего лишь простые советы :)<!--more--><br />
Я в этом блоге только тем и занимаюсь, что пытаюсь дать полезные советы, потому слегка повторюсь.</p>
<h3>1. Правильная замена на картинки</h3>
Заменяйте текст на картинки хорошими CSS-техниками, например, для кликабельного логотипа сайта, нужен такой html:
<ol class="code">
<li><h1><a href="#">Вау! Я логотип!<span></span></a></h1></li>
</ol>
CSS:
<ol class="code">
<li>h1 a{
</li><li class="tab">width:250px;height:50px;</li>
<li class="tab">overflow:hidden;</li>
<li class="tab">display:block;</li>
<li class="tab">position:relative;</li>
<li class="tab">}</li>
<li class="tab">h1 a span{</li>
<li class="tabtab">position:absolute;</li>
<li class="tabtab">width:250px;height:50px;</li>
<li class="tabtab">top:0;</li>
<li class="tabtab">left:0;</li>
<li class="tabtab">background:transparent url(../img/kartinka.png) no-repeat 0 0;</li>
<li class="tabtab">}</li>
</ol>
<h3>2. Использовать табуляцию в CSS</h3>
Суть в табулировании селекторов в зависимости от иерархии. Чем более "глубокий" элемент — тем большим кол-вом табов он будет отделен.
Это на любителя, но попробовать совершенно точно стоит. Живой пример этого видно чуть выше, а вот так это выглядит издалека и вживую:
<p class="img con"><img src="http://cssing.org.ua/pic/tabsbabs.png" alt="табулияция в CSS" /><span>Мне нравится.
Как видно, иногда я пишу правила в одну строку, особенно когда подряд идут несколько правил с указанием лишь background</span></p>
<h3>3. Выделенный текст</h3>
Очень простой и маленький приём. Иногда полезен.
Вот такой код:
<ol class="code">
<li><h2><span>Ищу ту, особенную!</span></h2></li>
</ol>
В дизайне дано такое:
<p class="img"><img src="http://cssing.org.ua/pic/50c1.png" alt="выделенный текст" /><span>Выделенный красным "маркером" текст</span></p>
Если попробовать решать задачу "в лоб", пишем такое:
<ol class="code">
<li>h2 span{background:red;padding:4px;}</li>
</ol>
получаем это:
<p class="img"><img src="http://cssing.org.ua/pic/50c2.png" alt="выделенный текст" /><span>Вторая строка "прилипает" к краю.
Мелочь, а неприятно</span></p>
Вариантов решения несколько, наиболее простой таков:
<ol class="code">
<li>h2{<strong>border-left:4px solid red</strong>;}</li>
<li>h2 span{background:red;padding:4px 4px 4px <strong>0</strong>;}</li>
</ol>
Результат:
<p class="img"><img src="http://cssing.org.ua/pic/50c1.png" alt="выделенный текст" /><span>Правильно выделенный текст</span></p>
Я ранее решал этот вопрос повторением фонового рисунка и паддингом для H2. Подсказал <a href="http://mega.genn.org/">genn</a>.
<h3>4. Относитесь к вёрстке с чувством юмора</h3>
Например, можно давать смешные названия классам и айди.
Не стоит этим злоупотреблять, и использовать на сайтах где важна оптимизация, но на сайте какой-то веб-студии, или чисто представительском сайте это вполне оправдано:
<ol class="code">
<li><div class="i-was-born-in-1494"></li>
</ol>
Или
<ol class="code">
<li><div class="usually-i-dont-use-such-a-long-names-for-classes-but-today-is-a-special-day"></li>
</ol>
Могут сильно повеселить программистов и любителей заглянуть в ваш код. Смешной селектор может быть и коротким, главное, остроумным.
<p>Желательно конечно, чтобы такой класс или айди встречался в коде лишь один раз. Впрочем, возможны варианты. :) Еще можно шутить прямо в CSS.</p>
<h3>5. Доводите вёрстку до конца</h3>
Никогда не сдавайтесь на пол-пути в сложном проекте. Какими бы титаническими ни были усилия они практически всегда окупаются, если не деньгами то опытом и выносливостью. А так же духом победителя.
<h3>__END__</h3>
Адресую <a href="http://harisov.livejournal.com/">Виталию Харисову</a>, <a href="http://www.aether.ru/">Александру Шабуневичу</a>, <a href="http://makishvili.ya.ru/">Вадиму Макишвили</a>, <a href="http://mourner.livejournal.com/">Владимиру Агафонкину</a>.
<h3>Все советы</h3>
<ul>
<li><a href="http://rmcreative.ru/blog/post/neskolko-sovetov-verstalschikam">Александр RMcreative Макаров</a></li>
<li><a href="http://www.amazedev.com/5-sovetov-verstalshhiku/">Павел Коноплицкий</a></li>
<li><a href="http://habrahabr.ru/blog/webdev/43163.html">Владимир Mourner Агафонкин</a></li>
<li><a href="http://harisov.livejournal.com/105323.html">Виталий Харисов</a></li>
<li><a href="http://seleckis.lv/journal/css/5-sovetov-verstalschiku">Никита Селецкий</a></li>
<li><a href="http://uggallery.audiopeace.ru/2008/05/19/5-advices">Александр Исаков</a></li>
<li><a href="http://www.alexilin.ru/5-sovetov-po-html-i-css/">Алекс Iline</a></li>
<li><a href="http://www.aether.ru/blog/2008/06/04/5-advices">Александр Шабуневич</a></li>
<li><a href="http://blog.sribna.com/5-sovetov-verstalschiku.htm">Юрий Дроздов</a></li>
<li><a href="http://www.webmakerslounge.com/news/work-advices/">The Webmakers Lounge</a></li>
<li><a href="http://engelside.net/5-for-coder/">Engelside</a></li>
<li><a href="http://tanalin.com/blog/2008/05/xhtml-css-coding-tips-n-tricks/">Марат Таналин</a></li>
<li><a href="http://pepelsbey.net/2008/05/soviet-country/">Вадим Макеев</a></li>
<li><a href="http://cssing.org.ua/2008/05/21/5-things-to-remembe/">Юрий Артюх</a></li>
<li><a href="http://lusever.livejournal.com/21502.html">Павел Корнилов</a></li>
<li><a href="http://kizu.ru/webdev/five-tips/">kizu.ru</a></li>
</ul>
От идеи к действию: что мешает?
2008-05-04T00:00:00Z
https://cssing.org.ua/2008/05/04/idea-to-action-smth-is-missin/
<p>Как прочитать Большую советскую энциклопедию и потерять девственность? Как завести щенка спаниеля с такими милыми большими глазами и высыпаться? Как выпить 10 литров Гинесса и не умереть? Как синтезировать золото из свинца? Об этом и многом другом я не буду рассказывать в этом посте.</p>
<!--more-->
<h3>Мой опыт преодоления пропасти между идеей и действием</h3>
Как начать делать зарядку и бегать по утрам? Как сесть и сделать стартап, который крутится в голове. Как спасти очаровательную девушку от гопников.
<p>С этой проблемой мы сталкиваемся всякий раз когда мы знаем, <strong>что</strong> нужно сделать, но <strong>не можем</strong> себя заставить это сделать.<br />
Все это для меня началось с высказывания одной летчицы испытательницы по имени Amelia Earhart:</p>
<blockquote>The most effective way to do it, is to do it.</blockquote>
<h3>Всего лишь мой личный опыт</h3>
Многие из вас читали статьи о том как стать более эффективным, или как с помощью каких-то упражнений достигнуть чего-то. 99% людей понимают, что если начать следовать советам, жить станет легче и лучше.
<p>Но применять начинают далеко не все. Мало кто, если быть честным.<br />
Для некоторых, и меня в том числе, путь от идеи и мысли, до живого проекта, часто, труднее самого проекта.</p>
<p>Например, я 2 месяца собирался бегать по утрам. Неделю собирался ходить на турник. Всегда была причина: дождь, поздно, UA WEB, устал, пьяный.<br />
Можно было бы себе врать и говорить, что такой проблемы у меня нет, просто обстоятельства такие. Но, я её в себе признал. И вот как я ее решил.</p>
<h3>Как это сделать?</h3>
После некоторых размышлений я понял, что мешает перейти от идеи-мысли к действию.
<p><strong>И это мой мозг.</strong></p>
<p>Да, он бывает полезен. Но не в этом случае.</p>
<p>Управлять безмозглым телом куда проще мозговитого. Тело с мозгом, может начать придумывать отмазки. «Это не так и полезно», «Я начну делать это на следующей неделе, сегодня слишком устал, и вообще...», «Наверняка идея этого стартапа есть и у более талантливых чуваков», «Все равно мне не везет», бебебе.</p>
<p>Всё что нужно — <strong>отключить мозг</strong>, и сделать то, что вы хотели. Это просто. Выключить. Сделать. А потом пути назад не будет, и мозг поплетётся за вами, пытаясь вам помочь. Покажите ему кто хозяин. И он станет вам верно служить.</p>
<p>То, что я описал, сработает скорее для тех, у кого похожие образы в голове. Но так как я не очень-то необычный, надеюсь это поможет еще кому-то.</p>
<h3>Та же идея</h3>
Совершенно та же идея фигурирует в трудах пикаперов. Там описывается методика «отключения внутреннего диалога». Все это, конечно, чтобы подойти и познакомиться с девушкой. Но важнее сама методика. Этот «внутренний разговор» с собой только мешает. Вот что писал об этом Филипп Богачев:
<blockquote>Ваша задача — научиться подходить и открывать коммуникацию в состоянии «не думая», то есть без внутреннего диалога. Не думая, а делая.</blockquote>
Стив Павлина, в своей статье о вставании по будильнику, рекомендует просто не вовлекать сознание в процесс:
<blockquote>Нужно делегировать эту проблему. Весь процесс должен контролироваться подсознанием, а не сознанием.</blockquote>
Мне близко называть свое подсознание — «рациональным Я». Но у Стива, пикаперов и меня просто разные слова для одной и той же штуковины.
<p>Даже в «Книге 5 колец», Миямото Мусаси, идеальная боевая позиция, это позиция "пустоты". Это, в частности, означает отсутствие каких бы то ни было помыслов. Некогда вести внутренний диалог, когда тебя могут зарубить.</p>
<h3>Ссылки</h3>
<ul>
<li><a href="http://www.stevepavlina.com/blog/2006/04/how-to-get-up-right-away-when-your-alarm-goes-off/">How to Get Up Right Away When Your Alarm Goes Off</a> или <a href="http://www.psylive.ru/?mod=articles&gl=16&id=596">Как научиться вставать по будильнику (перевод)</a> — похожая идея для просыпания по будильнику</li>
<li><a href="http://www.books.ru/shop/books/271800">Секреты уличных знакомств</a> — интересная книжка, даже для тех, кто женат, или... девушка =) (если погуглить, можно скачать бесплатно...)</li>
</ul>
<h3>Это работает</h3>
Я не претендую на роль гуру, но мне это помогло. И было забавно вспомнить, что несколько людей уже используют эту идею. =) Надеюсь мой опыт окажется кому-то полезным.
<p>P.S.: я уже месяц подтягиваюсь на турнике каждый день. И делаю утреннюю пробежку. Я делаю это не задумываясь, это как сон и еда.<br />
А вы?</p>
РИТ 2008, 14-15 апреля, Москва
2008-04-18T00:00:00Z
https://cssing.org.ua/2008/04/18/rit-2008-moscow/
<p>Мой отчет о <a href="http://rit2008.ru/">конференции</a>. Слушали людей из Facebook, Internet Exporer 8, и многих других. На конференции было около полутора тысяч человек. Много фото.<!--more--></p>
<h3>Microsoft, Петр Диденко</h3>
Вкратце все, что рассказывает и делает майкрософт сейчас можно сформулировать парой пунктов:
<ul>
<li>S+S: дают понять, что они за продажу софта как услуги. Об этом, в частности был доклад Диденко, Хостинг 2.0</li>
<li>Silverlight 2.0 и линейка Expression. На конференции проводился конкурс на лучший логотип компании Майкрософт, нарисованный в экспрешн дизайн. Я победил! =) Мое лого всех рассмешило...</li> </ul>
Но знание этих двух трендов, дорогого стоит. Ибо они уже просматриваются и в мире повсюду. Возьмите Флекс, или нарастающую популярность SaaS в мире.
<p class="img"><img src="http://cssing.org.ua/pic/rit2008/7.jpg" alt="" width="500" height="375" /> <span>Apple vs Microsoft</span></p>
<h3>Facebook, Александр Москалюк</h3>
<p class="img"><img src="http://cssing.org.ua/pic/rit2008/13.jpg" alt="" width="500" height="375" /> <span>Москалюк</span></p>
Это было очень интересно, пускай разговор шел о высоких нагрузках. Не моей парафии... Но, человек он очень интересный, и те мелкие детали внутренней фейсбуковской информации, были очень ценны и интересны:
<ul>
<li>5й по посещаемости сайт в мире</li>
<li>Более 5000 серверов</li>
<li>Более тысячи серверов под memcached</li>
<li>Facebook на данный момент главные разработчики memcached</li>
<li>Среди их команды создатели Firefox, Firebug, и наибольшего кол-ва патчей к MySQL</li>
<li>75 миллионов пользователей</li>
<li>Основной язык, PHP.</li>
</ul>
<p class="img"><img src="http://cssing.org.ua/pic/rit2008/8.jpg" alt="" width="500" height="375" /> <span></span></p>
<p class="img"><img src="http://cssing.org.ua/pic/rit2008/10.jpg" alt="" width="500" height="375" /> <span>Кроме PHP</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/rit2008/11.jpg" alt="" width="500" height="375" /> <span></span></p>
<h3>Алексей Могилевский, Principal Development Lead в команде Internet Explorer</h3>
<p class="img"><img src="http://cssing.org.ua/pic/rit2008/1.jpg" alt="" width="500" height="375" /> <span>Может быть даже правил баги в ИЕ</span></p>
На вопрос о затишье между версиями, Алекс рассказал красивую легенду. Которую, он придумал сам =)
<p>Когда-то Интернет Экслорер конкурировал с Netscape 3. Но нетскейп перестал выпускать новые версии... И Эксплорер сам того не хотя, забрал 90% рынка себе. Опомнившись, они (IE) решили дать шанс сопернику и 6 лет не выпускали версии. Пока соперник не стал конкурентоспособен. И майкрософт не смог продолжить честную борьбу дальше.</p>
<p>Вообще было очень явно заметно, что пока Интернет Экслорер был чем-то абстрактным и злым, его можно было ненавидеть. Но когда у него появилось лицо Алекса, то у него было просто интересно спросить. Многие пересмотрели свое мнение о команде разработчиков ИЕ. Очень знаковый приезд, даже не так для фанатов и врагов ИЕ и Майкрософт, как для людей знающих, что такое веб-стандарты.</p>
<p>У Могилевского было два доклада, один про ИЕ8, второй о стандартах "изнутри". Он учавствует в CSS Working Group. И немного рассказал о том как стандарты выглядят оттуда. Например, одна из причин по которым ИЕ8 все еще не поддерживает CSS3 и CSS2.1 — они еще не стали стандартом, и они не хотят рисковать. Хотя, может это и отмазка =). Но, стало понятно, что слова об ответственности броузера имеющего самую большую аудиторию, не пустой звук, и действительно очень важны.</p>
<p>Вообще, многое стало ясным и понятным. Интересно, увидим ли мы когда-то девелоперов Фаерфокс? ;)</p>
<p class="img"><img src="http://cssing.org.ua/pic/rit2008/6.jpg" alt="" width="500" height="375" /> <span> Справа: Чикуенок, Могилевский</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/rit2008/15.jpg" alt="" width="500" height="375" /> <span>Алекс о CSS</span></p>
Кстати, Алекс дружит с <a href="http://molly.com/">Молли</a>, и <a href="http://jinabolton.com/">Джиной</a>. =) После этой информации я вообще перестал его воспринимать как работника компании Microsoft. Настолько для меня "близки" эти две женщины.
<h3>Стартап-линч</h3>
Сформировали команду судей-инвесторов (ABRT фонд, R&R, Диденко и другие), по очереди выходили стартапщики, и по 3 минуты рассказывали о проекте.
<p>Слушали такое: SaaS, нишевые видеохостинги, решение проблем бэкапа, нишевое онлайн телевидение и еще парочку. Пересказывать проекты смысла нет, но вот что нужно знать стартапщикам при 3х-минутном разговоре с инвесторами:</p>
<ul>
<li>Харизма, уверенность</li>
<li>Команда</li>
<li>Прототип</li>
<li>Чью и какую проблему решает проект?</li>
<li>На чем зарабатывать деньги?</li>
<li>Кому продать проект?</li>
<li>На что вам нужны инвесторские деньги?</li>
</ul>
Ответив на все эти вопросы, при вменяемой идее, вероятность получить инвестиции близка к 100%. Если вообще имеет смысл говорить о таких вероятностях...
Идея вообще сильно вторична в пунктах, как легко заметить.
<h3>Другое</h3>
Рассказать обо всем, как всегда, нереально. Но вот что еще я бы порекомендовал:
<ul>
<li>Доклад об индексации картинок, Алексей Лагутин — интересная технология, возможно это будущее. Можно делать поиск по фрагменту, или по подобным фото. Можно найти фотографии знакомых. Готов прототип http://photodate.ru/</li>
<li>Доклад Сергея Коваленко о лингвистическом процессоре. Было забавно узнать механизмы работы, для разбора поисковых фраз.</li>
<li>Доклад Алексея Байтина, об исправлении опечаток в запросах на Яндексе. Оказывается их помогаем исправлять мы, пользователи. Если после первого ввода, мы перезапишем кейворд на правильный, яндекс будет знать как оно пишется. Как оказалось, грамотных людей на вебе, больше чем неграмотных. А 15% запросов на яндексе — опечатки</li>
<li>Доклад Сергея Чикуенка. Я захватил лишь краем уха. Но те кто был там, порывались уйти домой с конференции, и плакать. Очень талантливый человек. Обязательно посмотрите запись. Он, кстати, технический директор Студии Лебедева.</li>
</ul>
Всего было около 100 докладов, так что я даже посоветовать все хорошее не могу =)
<h3>Разные фото</h3>
<p class="img"><img src="http://cssing.org.ua/pic/rit2008/2.jpg" alt="" width="500" height="375" /> <span>PS3 в холле</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/rit2008/3.jpg" alt="" width="500" height="375" /> <span>Асхат Уразбаев, отличный рассказчик</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/rit2008/4.jpg" alt="" width="500" height="375" /> <span>Пуфики от рамблера</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/rit2008/5.jpg" alt="" width="500" height="375" /> <span>Xbox, гонки офигенные были</span></p>
Слайд Алексея Капранова из блицдоклада, ЮТФ символ:
<p class="img"><img src="http://cssing.org.ua/pic/rit2008/9.jpg" alt="" width="500" height="375" /> <span>Менеджер-фокусник</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/rit2008/14.jpg" alt="" width="500" height="375" /> <span>Кружок вокруг IE8</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/rit2008/16.jpg" alt="" width="500" height="375" /> <span>Ашманов, где-то там в толпе</span></p>
<h3>Было клёво =)</h3>
Такие дела. Все это безобразие показывали несколько российских каналов, в том числе РТР.
<p>Кучу дополнительных фото и материалов можно найти на <a href="http://rit2008.ru/">сайте РИТа</a>.</p>
<p>Буду рад ответить на вопросы! =) Про ИЕ8 я услышал просто ВСЁ. =)</p>
CSS Naked Day или что случилось с моим дизайном
2008-04-08T00:00:00Z
https://cssing.org.ua/2008/04/08/css-naked-day-2/
<p>По старой традиции, 9 апреля, празднуем <a href="http://naked.dustindiaz.com/">CSS Naked Day.</a> Отключаем CSS на сайтах. Пусть все видят какие мы "внутри". ;)</p>
<!--more-->
<p><strong>Важно</strong>: 9 апреля на моём блоге были отключены CSS файлы. Сейчас они уже включены. =)</p>
<p>У меня вся разметка построена на иерархии заголовков. Потому выглядит не так красиво, как у фанатов списков =) Но...</p>
<h3>Со мной празднуют</h3>
<ul>
<li><a href="http://naked.dustindiaz.com/">Список всех сайтов</a></li>
<li><a href="http://pepelsbey.net/2008/04/css-nudism/">Pepelsbey</a></li>
<li><a href="http://brokenbrake.biz/2008/04/css-naked-day.html">Вдохновленный тормоз</a></li>
<li><a href="http://zhilinsky.ru/2008/04/08/css-naked-day-now//">Жилинский</a></li>
<li><a href="http://tapazukk.net/coding/css-naked2008/">Tapazukk</a></li>
<li><a href="http://blog.strelban.net/">Strelban</a></li>
<li><a href="http://booking.djfromrussia.com/">djfromrussia</a></li>
<li><a href="http://plaintext.ru/2008/04/08/css_naked_day.html">rAlex</a></li>
<li><a href="http://artem.chertov.name/">Артем Чертов</a></li>
<li><a href="http://blog.fxposter.org/2008/04/09/css-naked-day/">FXposter</a></li>
<li><a href="http://elv1s.ru/">Elv1s и все его проекты</a></li>
<li><a href="http://blog.nundesign.com/design/2008/04/css-naked-day/">NunDesign</a></li>
<li><a href="http://www.kotelnikov.net/blog/9/den-veb-nudista">Kotelnikov</a></li>
<li><a href="http://denis.in.ua/css-naked-day-2008.htm">Denis.in.ua</a></li>
<li><a href="http://www.mikolka.info/2008/04/09/css-naked-day/">Mikolka</a></li>
<li><a href="http://www.burnis.org/css-naked">Burnis</a></li>
</ul>
<p>А у вас как? =)</p>
CSS print framework
2008-04-07T00:00:00Z
https://cssing.org.ua/2008/04/07/css-print-framework/
<p>Пафосное название для моего обычного стандартного print.css который я всюду инклюдю.</p>
<!--more-->
<p>Несколько общих правил для печатных стилей, которые будет легко дополнить своими.</p>
<p>Разумеется, по-хорошему, каждый проект нуждается в своем печатном стиле. Но, на деле, когда вы верстаете 10 (вы монстр!) сайтов в неделю, такой вот шаблон print.css становится приятным бонусом, и знаком вашего профессионализма.</p>
<p>Файл состоит из нескольких условных групп правил. Сложного нет ничего. Просто экономлю мировую энтропию, чтобы кто-то не парился и украл у меня этот файл. =)</p>
<h3>Общие стили</h3>
Шрифты и цвета. При печати лучше смотрится черный на белом, и текст с засечками:
<ol class="code">
<li>body {</li>
<li class="tab">margin:.2in .55in; <small>/*отступы от края страницы, для красоты*/</small></li>
<li class="tab">padding:0;</li>
<li class="tab">background:#fff;</li>
<li class="tab">color:#000;</li>
<li class="tab">font:12pt "Times New Roman", Garamond, serif;<small>/*шрифт с засечками*/</small></li>
<li class="tab">}</li>
<li>form, <br />#secondary, <br />#sidebar,<br /> #nav,<br /> #whatever {<small>/*прячем ненужные при печати блоки, единственная часть печатного файла которую нужно обновлять на новом проекте*/</small></li>
<li class="tab">display:none; </li>
<li class="tab">}</li>
</ol>
В каждом проекте свои блоки нужно скрывать и показывать, все же остальные правила остаются неизменными.
<h3>Текст</h3>
Самые обычные приятные отступы и размеры. h1 самый большой, h2 поменьше, h3 еще меньше. И все прижимаются к тексту (margin-bottom:0):
<ol class="code">
<li>h1, h2, h3 {</li>
<li class="tab">margin:.6em 0 0 0;</li>
<li class="tab">font-family:Georgia,Serif;</li>
<li class="tab">font-weight:normal;</li>
<li class="tab">clear:both;</li>
<li class="tab">}</li>
<li>h2 {</li>
<li class="tab">font-size:240%;</li>
<li class="tab">margin:.3em 0 0 0;</li>
<li class="tab">}</li>
<li class="tab">...</li>
<li>h3+blockquote,<br /> h2+blockquote,<br /> p+ul{ <small>/*между заголовком и абзацем лучше иметь минимальный отступ*/</small></li>
<li class="tab">margin-top:.2em;</li>
<li class="tab">}</li>
</ol>
<h3>Ссылки</h3>
Псевдоселектор <code>:after</code>, работает только в "хороших" броузерах. В результате, в печати после текста ссылки добавляет её URL в скобочки.
<p class="img con"><img src="http://cssing.org.ua/pic/url.png" alt="УРЛ в скобочках" /><span>URL</span></p>
Вот, css-magic:
<ol class="code">
<li>#content a[href]:after {</li>
<li class="tab">content: " (" attr(href) ") ";</li>
<li class="tab">font-size: 90%;</li>
<li class="tab">}</li>
<li>#content a[href^="/"]:after{<small>/*для ссылок вроде href="/feed/"*/</small></li>
<li class="tab">content: " (http://cssing.org.ua/" attr(href) ") ";</li>
<li class="tab">}</li>
<li>abbr:after,<br />
acronym:after {<small>/* аббревиатуры */</small></li>
<li class="tab">content: " ("attr(title)") ";</li>
<li class="tab">}</li>
</ol>
<h3>Результат</h3>
Этих стилей достаточно, чтобы ваша страничка начала печататься примерно так:
<p class="img con"><a href="http://cssing.org.ua/pic/cssing.pdf"><img src="http://cssing.org.ua/pic/cssingprint.png" alt="скриншот версии для печати" /><span>Версия для печати (pdf, 160Kb)</span></a></p>
Мне, очень нравится.
Все что нужно дальше, легко добавить в этот фреймворк. Но базу он задает. Обожаю маленькие фреймворки!
<h3>Читать дальше</h3>
<ul>
<li><a href="http://cssing.org.ua/pic/print.css">Мой CSS print фреймворк</a> (осторожно! размер файла 1.3Kb)</li>
<li><a href="http://www.alistapart.com/stories/goingtoprint/">CSS Design: Going to Print</a></li>
<li><a href="http://www.digital-web.com/articles/css_styling_for_print_and_other_media/">CSS Styling for Print and Other Media</a></li>
<li><a href="http://www.smashingmagazine.com/2007/02/21/printing-the-web-solutions-and-techniques/">Printing the Web: Solutions and Techniques</a></li>
<li><a href="https://cssing.org.ua/2008/04/07/css-print-framework/#">На New York Times, кстати продают <a href="http://www.nytimes.com/2008/04/07/world/middleeast/07iraq.html?_r=1&hp=&oref=slogin&pagewanted=print">места в печатной версии</a> (вверху справа) :) </a></li>
<li><a href="http://cssing.org.ua/wp-content/themes/cssing2/css/print.css">Печатные стили для CSSing</a> — типичный пример моего фреймворка в работе, добавлено несколько специфических правил для блога</li>
<li><a href="http://npj.ru/seminar/printversion/">Подбор материалов c семинара npj</a> — очень всеобъемлющий материал, несмотря на возраст.</li>
<li><a href="http://designformasters.info/posts/improving-link-display-for-print/">Javascript для вынесения ссылок из текста в конец печатной версии</a></li>
<li><a href="http://elv1s.ru/files/js/ie-content-after.html">Замена :after для IE (expression), нюанс — нет скобочек</a></li>
</ul>
<p>Буду рад если поделитесь своими советами и печатными хаками. С радостью внесу в этот файл, чтобы он был еще более полезным!</p>
Шанс длиною в 7 минут
2008-04-02T00:00:00Z
https://cssing.org.ua/2008/04/02/7minutes-to-win/
<p>нигде не увидев информации о событии, решил известить всех о нем сам.</p>
<!--more-->
<p>Итак, в Киеве 17 апреля состоится конференция <a href="http://tmtevents.eu/">TMT Ventures’08</a> на которой пройдет конкурс "7minut".</p>
<p>Идея такая: выступают предприниматели, которым нужны инвестиции. Каждому дается 7 минут на выступление. За эти 7 минут человек должен убедить инвесторов в успешности проекта.</p>
<p>Нужно успеть преподнести идею, показать харизму, и убедить их, что деньги нужно отдать именно тебе.</p>
<p>При всем том, что мне лично ситуация кажется слегка перекошенной в пользу инвесторов... Похоже именно такие сегодня правила рынка, нужно засветиться и "выиграть" деньги инвесторов. И это прекрасная возможность.</p>
<p>Принимаются заявки от стартапов на темы:</p>
<ul>
<li>Интернет и мобильные сервисы</li>
<li>Мультимедиа инновации</li>
<li>Web 2.0</li>
<li>Интеграция офлайн и онлайн</li>
<li>Инновации в электронных системах оказания услуг</li>
</ul>
И прочие современные айти-предприятия.
<p>Всем у кого есть супер-идея, но нет денег на нее, настоятельно советую отсабмитить ее жюри! На сайте есть <a href="http://www.euromixer.net/konkurs_7min/index.phtml?lang=en">форма</a>, специально для предпринимателей.</p>
<p>Среди тех кто будет судить, Юрий Бойко, Александр Орехов, представители сразу нескольких инвестиционных фондов.</p>
<p>Жюри такое, что даже выступив неудачно и с плохим проектом, фидбек даст вам знаний и идей для проекта на год вперед.</p>
<p>Список жюри:</p>
<ul>
<li>Председатель жюри: Yuri Boyko HighTech Entrepreneur, Silicon Valley</li>
<li>Paul Fisher Associate, Advent Venture Partners</li>
<li>Andrzej Jasieniecki Investment Director, MCI Management</li>
<li>Georgy Kolpachev Investment Manager in Russia, Intel Capital</li>
<li>Nikolay Mitushin Investment Director, ABRT Venture Fund</li>
<li>Oleksandr Oriekhov DPE Lead, Microsoft Ukraine</li>
<li>Igor Semenov Investment Manager, AVentures Capital</li>
<li>Maxim Shkolnick Chairman&CEO, Techobridge</li>
<li>Andres Sussi Martinson Trigon Venture Partners</li>
</ul>
<p>Главным призом будет гарантированное выступление на осеннем <a href="http://seedcamp.com/">Seedcamp '08</a>. А это наверняка инвестиции и известность.</p>
<p>Всем участникам UA WEB 2008 предоставляется скидка на вход! ;)</p>
<ul>
<li><a href="http://7minut.eu/">Страничка конкурса</a>, сайи очень мутный, надо заметить. Но это квест.</li>
<li><a href="http://tmtevents.eu/">Сайт конференции</a></li>
<li><a href="http://tmtevents.eu/conference-tmt_ventures_2008_kiev-8.html">Регистрация участников</a></li>
</ul>
Когда же у нас уже появится куча стартапов и инвесторов :)
Заждались.
<p>Что думаете про такие конкурсы? Почему так мало стартапперов в стране?</p>
UA WEB 2008 состоялся!
2008-03-30T00:00:00Z
https://cssing.org.ua/2008/03/30/uaweb2008-done/
<p>UA WEB 2008 состоялся! =) Всякое забавное и результаты.</p>
<!--more-->
<h3>Сопутствующее</h3>
Во-первых, нас рекламировали по радио! Зацените:
<p><object width="300" height="80"><param name="movie" value="http://media.imeem.com/m/srjbpzlPBv/aus=false/" /><param name="wmode" value="transparent" /><embed src="http://media.imeem.com/m/srjbpzlPBv/aus=false/" type="application/x-shockwave-flash" width="300" height="110" wmode="transparent" /></object></p>
<p>Не знаю как вы, а я едва не заплакал услышав по радио слово "юзабилити". Есть в этом что-то.</p>
<p>Была и такая реклама:</p>
<p class="img"><img src="http://cssing.org.ua/uaweb8.png" alt="баннер" /><span>Такие дела, киска</span></p>
Специально для конференции напечатали UAWEB'ные материалы:
<p class="img"><img src="http://cssing.org.ua/pic/uaweb/1.jpg" alt="" /><span>Блокноты, ручки, пакеты</span></p>
<h3>Конференция</h3>
Как и планировалось, все прошло в конференц залах лучшей гостиницы Украины 2007 года — Президент Отеле.
Несколько фото:
<p class="img"><img src="http://cssing.org.ua/pic/uaweb/6.jpg" alt="устой конференц-зал" /><span>Пустой конференц-зал</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/uaweb/3.jpg" alt="Артюх и Бунин" /><span>Я и Олег слушаем Диденко</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/uaweb/4.jpg" alt="Тусовка на кофе-брейке" /><span>Тусовка на кофе-брейке</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/uaweb/5.jpg" alt="" /><span>Шитов, прилетевший в Киев на пару часов, на UA WEB. Спасибо Андрей!</span></p>
Больше фото можно найти в отчетах...
<p>Присутствовало более 300 человек, среди них представители практически всех значимых украинских веб-компаний. Докладывались сотрудники <a href="http://ukr.net/">ukr.net</a>, yandex, rambler, sun, microsoft и т.п. и т. д. Вопреки бытующему мнению доклады Майкрософт и Битрикс были не спонсорскими. Как это ни странно звучит ) я действительно хотел чтобы про SaaS и Silverlight рассказывали те, кто имеет к этим словам прямое отношение.</p>
<p>Конференцию открыл я (akella), затем пару слов о российских инициативах сказал Олег Бунин. Некую философию о развитии интернет-технологий и конференций привнес <a href="http://www.kip.ru/">Петр Диденко</a>, не нуждающийся в представлении. О его приезде на UA WEB, никто до последнего момента не знал, кстати =).</p>
<p>Кроме Диденко присутствовало так же очень много других знаменитостей:</p>
<p class="img"><img src="http://cssing.org.ua/pic/uaweb/2.jpg" alt="Бэн пришел с Джимми" /><span>Бэн пришел с Джимми</span></p>
<h3>Отчеты о конференции</h3>
<ul>
<li><a href="http://rutube.ru/tracks/581273.html?v=8e0e92d49413db35cd4843861f66ecdc">Видео-отчет!</a></li>
<li><a href="http://internetno.net/2008/03/28/uaweb-2008-%E2%80%94-pervaya-ukrainskaya-konferentsiya-veb-razrabotchikov-den-1/">Первый</a> и <a href="http://internetno.net/2008/03/29/uaweb-2008-%E2%80%94-pervaya-ukrainskaya-konferentsiya-veb-razrabotchikov-den-2/">второй день на интернетных штучках</a></li>
<li><a href="http://www.developers.org.ua/archives/a4/2008/03/28/ua-web2008-1/">Первый день на developers.org.ua</a> и <a href="http://www.developers.org.ua/archives/a4/2008/04/02/ua-web2008-2/">второй день</a></li>
<li><a href="http://developer.co.ua/posts/view/obzor_uaweb_2008_den_pervyj">Первый день на developer.co.ua</a> и <a href="https://cssing.org.ua/2008/03/30/uaweb2008-done/developer.co.ua/posts/view/obzor_uaweb_2008_den_vtoroj__zavershenie">второй день</a></li>
<li><a href="http://w2.com.ua/blogs/wafire/ua_web_2008_den_pervyj">Первый день на w2.com.ua</a> и <a href="https://cssing.org.ua/2008/03/30/uaweb2008-done/w2.com.ua/blogs/wafire/ua_web_2008_den_vtoroj">второй день</a></li>
<li><a href="http://webdeveloping.com.ua/activities/ua-web-2008">На webdeveloping</a></li>
<li><a href="http://www.agileukraine.org/2008/03/blog-post.html">На Agile Ukraine</a></li>
<li><a href="http://yuri.shilyaev.com/archives/2008/03/26/389/kievskaya-konferentsiya-i-horoshee-tz.html">О докладе Юрия Шиляева</a></li>
<li><a href="http://community.livejournal.com/softwarium/2633.html">Отчет Сергеева Сергея</a></li>
<li><a href="http://blog.nundesign.com/dybr/2008/03/uaweb-photo/">Фотки на nundesign</a></li>
<li><a href="http://schenkh.habrahabr.ru/blog/38857.html">Резюме лучших докладов</a></li>
<li><a href="http://egorfine.livejournal.com/333734.html">Резюме лучших от Егора Егорова</a></li>
<li><a href="http://fotki.yandex.ru/tags/uaweb">Фотки с тагом ЮА ВЕБ</a></li>
<li><a href="http://uaweb.in.ua/">Сайт конференции</a></li>
</ul>
Лично мне больше всего понравились рассказы Юрия Козлова из CEQA, Егора Егорова про высокие нагрузки из Telme, Алексея Колупаева про капчи, Пола Гокина из CEQA. Пол показал скринкапчу действий пользователя-тестировщика юзабилити сайта. 5 минут мы смотрели как бедный юзер безуспешно пытался найти ближайший ресторан со скидкой на сайте. Это было весело!
<p>ЗЫ: Копирайты на фото принадлежат <a href="http://svoloshyn.org.ua/">Сергею Волошину</a>, <a href="http://pepelsbey.net/">Вадиму Макееву</a> и <a href="http://pdidenko.ru/">Петру Диденко</a>.</p>
<p>Спасибо Олегу Бунину, Павлу Рогожину, Евгению Бойко, Вике Галимуллиной и Дмитрию Лоханскому за помощь в организации конференции!</p>
<h3>Файналли</h3>
Ур-ра! Первая конференция состоялась :)
Буду рад услышать впечатления-мнения.
<p>И, кстати, <strong>кого</strong> и <strong>о чем</strong> вы бы хотели послушать на следующей конференции?</p>
Проблема со списками в IE
2008-03-08T00:00:00Z
https://cssing.org.ua/2008/03/08/ul-li-ie-bug/
<p>Настоящие верстальщики должны слегка поморщиться вспомнив об этом баге.</p>
<!--more-->
<p>Проблема с которой сталкивался, наверное, каждый. Самая банальная ситуация, вертикальное меню, и в дизайне есть хавер-эффект для пунктов меню (или другая причина сделать их блочными).<br />
html:</p>
<ol class="code">
<li><ul></li>
<li class="tab"><li><a href="#"></a></li></li>
<li></ul></li>
</ol>
css:
<ol class="code">
<li>li a{</li>
<li class="tab">display:block;</li>
<li class="tab">}</li>
</ol>
И вуаля, вот что имеем в ИЕ6, например:
<p class="img"><img src="http://cssing.org.ua/examples/ul/ul.png" alt="Отступы между элементами списка в IE" /><span>Отступы между элементами списка в IE</span></p>
<h3>Примеры решений</h3>
Чтобы разобраться с этой проблемой раз и навсегда, я перебрал все возможные рабочие варианты, из них отобрал <a href="http://cssing.org.ua/examples/ul/ul.html">7 наиболее удачных на мой взгляд</a>. Ими и хочу пользоваться в будущем. Решения обычно сводятся к haslayout для LI, A. Или свойству vertical-align, или удалению пробелов, или изменению line-height.
<p>Из этих вариантов у меня в ИЕ6 рабочими оказались такие: в первой колонке 3, 4, 5, 7, 8. Во второй: все кроме нулевого.</p>
<p>Колонки отличаются только размером line-height. Для первой это 1, для второй 1.4.<br />
Значения 1.13-1.14 — являются граничными.</p>
<h3>Резюме, или как с этим воевать</h3>
После кучи экспериментов пришел к тому же выводу, что и <a href="http://www.brunildo.org/">Bruno Fassino</a>, глюки с непонятными отступами условно можно разделить на 3 категории:
<table class="data sess">
<thead>
<tr>
<th>отступы</th><th>чем вызвано</th><th>чем лечить</th>
</tr>
</thead>
<tbody>
<tr>
<th>Большие отступы</th>
<td>a{display:block}</td>
<td>удалить пробелы в коде<br /> или haslayout для a <br />(этот баг исправлен в IE7)</td>
</tr>
<tr>
<th>Маленькие отступы </th>
<td>li{haslayout}</td>
<td>li{vertical-align:top}</td>
</tr>
<tr>
<th>Маленькие отступы (второй вид)</th>
<td>маленький line-height + haslayout для li или а</td>
<td>увеличить line-height</td>
</tr>
</tbody>
</table>
Наконец-то я задокументировал самое тёмное для меня место в багах ИЕ =)
<h3>IE8 (не повторять на живых проектах!)</h3>
Буквально сегодня, с подачи <a href="http://www.tjkdesign.com/">Thierry Koblentz</a>, узнал хак для IE8. Это скорее любопытный факт, нежели то, что нужно использовать. Тем не менее этот CSS увидит только IE8:
<pre>
/*/ #nav a {position:relative;} /**/
</pre>
Фиксит проблему с отступами между элементами списка в ИЕ8. Исправить на стороне броузера, наверное, было очень трудно. Будем надеяться, что баг с отступами в списках исправят одновременно с этим хаком. Я лично отсабмитил эту проблему разработчикам.
<h3>Ссылки</h3>
<ul>
<li><a href="http://cssing.org.ua/examples/ul/ul.html">Примеры списков с разными решениями для ИЕ (смотреть имеет смысл только в ИЕ)</a></li>
<li><a href="http://www.brunildo.org/test/IEWlispace.php">Примеры бага с блочными ссылками в списках</a>, и очень хорошо задокументированный эксперимент. Фактически вдохновивший меня на его повторение.</li>
</ul>
<p>Если у вас есть чем дополнить, буду рад выслушать и проапдейтить пост!</p>
<p>P.S.: под haslayout я имею ввиду width, height, zoom, position. Любой из этих параметров является триггером этого свойства для блока.</p>
UA WEB 2008!
2008-03-04T00:00:00Z
https://cssing.org.ua/2008/03/04/ua-web-2008/
<p>Первая конференция украинских веб-разработчиков возвращается!</p>
<!--more-->
<p>Осенний UA WEB 2007 возвращается весенним UA WEB 2008! =)<br />
Для тех, кто не помнит, это конференция посвященная веб-разработке. Мы рассчитываем собрать наконец всех профессионалов в этой сфере вместе и познакомить. В программе конференции такие темы как серверное программирование, клиентское программирование, базы данных, инвестиции, аутсорсинг, фриланс, методики разработки и всё, всё, всё.</p>
<p>Конференция состоится 27-28 марта в <a href="http://uaweb.in.ua/delegates/3495.html">Президент Отеле</a> в центре Киева. Заявки на участие будут приниматься даже на самой конференции, если места вдруг не кончатся. А их не так и много, кстати. ;)</p>
<h3>Доклады</h3>
Предварительный список (еще несколько докладов утверждается, преимущественно о разработке)
<h4>Секция клиент</h4>
<table class="data sess">
<thead><th>Докладчик (компания)</th><th class="last">Название доклада
<tbody>
<tr><th>Владимир Агафонкин (Sonopia)</th> <td>JavaScript и доступность web-приложений</td></tr>
<tr><th>Виталий Харисов (Яндекс)</th> <td>Вёрстка независимыми блоками</td></tr>
<tr><th>Юрий Артюх</th> <td>Микроформаты: здесь и сейчас</td></tr>
<tr><th>Вадим Макишвили (Яндекс)</th> <td>Профессиональный верстальщик. Кто он?</td></tr>
<tr><th>Вадим Макеев (Яндекс)</th> <td>С ножом против паровоза. Нарезка и оптимизация графики для вёрстки</td></tr>
<tr><th>Геннадий Осипенко (laboratory8)</th> <td>Дизайн Онлайн Медиа</td></tr>
<tr><th>Сергей Байдачный (Microsoft)</th> <td>SilverLight 2.0: первое знакомство</td></tr>
<tr><th>Алексей Затворницкий + Сергей Ковалев</th> <td>RIA в перспективе Flex</td></tr>
<tr><th>Евгений Тютюнник</th> <td>Adobe AIR. Десктоп приложения, для веб-разработчиков</td></tr>
<tr><th>Надежда Строганкова (Яндекс)</th> <td>Комфортная разработка сайтов на XSL</td></tr>
<tr><th>Валентин Шибанов</th><td>Применение GWT для построения Web 2.0</td></tr>
<tr><th>Юля Климентовская (Sonopia)</th><td>Latest Guidelines for Web Usability</td></tr>
</tbody>
</th></thead></table>
<h4>Секция серверного программирования и баз данных</h4>
<table class="data sess">
<thead><th>Докладчик (компания)</th><th class="last">Название доклада
<tbody>
<tr><th>Алексей Колупаев (lohika)</th> <td>Теория и практика CAPTCHA-защиты
интерфейсов</td></tr>
<tr><th>Александр Костюченко (ukr.net)</th><td>Запрос - ответ ? Это не наш метод!</td></tr>
<tr><th>Илья Хамушкин</th> <td>Веб-разработка на django</td></tr>
<tr><th>Андрей Шитов</th> <td>Многоязычные сайты</td></tr>
<tr><th>Егор Анчишкин (viewdle.com)</th> <td>Video indexing, startup building experience, trends of web 2.0.</td></tr>
<tr><th>Дмитрий Маркелов (bigmir)net)</th><td>Рейтинг Bigmir.net, архитектура, перспективы</td></tr>
<tr><th>Алексей Клюкин</th> <td>Репликация данных в PostgreSQL</td></tr>
<tr><th>Игорь Сысоев (rambler)</th> <td>Вы можете задать свои вопросы разработчику nginx!</td></tr>
<tr><th> Дмитрий Сподарец</th><td>TYPO3 Web Content Management Framework</td></tr>
</tbody>
</th></thead></table>
<h4>Доклады на другие темы</h4>
<table class="data sess">
<thead><th>Докладчик (компания)</th><th class="last">Название доклада
<tbody>
<tr><th>Юрий Бойко</th><td>Привлечение капитала в Start-Up</td></tr>
<tr><th>Егор Егоров (Telme)</th> <td>Сrash course into high availabilty development</td></tr>
<tr><th>Владислав Флакс (owox)</th> <td>Бизнес процессы в веб-разработке</td></tr>
<tr><th>Сергей Панарин</th> <td>Управление проектами: требования, планирование, контроль</td></tr>
<tr><th>Станислав Малкин + Александр Махомет (artlab)</th> <td>Как стать успешным фрилансером</td></tr>
<tr><th>Владимир Михалко (community8)</th> <td>Особенности трансляции СМИ в интернете</td></tr>
<tr><th>Марина Дидковская</th> <td>Тестирование и оценка времени</td></tr>
<tr><th>Денис Довгополый (svod.org)</th> <td>Новые требования к интернет проектам в свете изменений на мировых финансовых рынках</td></tr>
<tr><th>Tim Boudreau (en) (Sun)</th> <td>Application Development with NetBeans</td></tr>
<tr><th>Никита Семенов</th> <td>Социальные сети, перспективы развития и способы монетизации</td></tr>
<tr><th>Алексей Кривицкий (agile-ukraine) </th> <td>Подходы гибкого управления требованиями в бизнес-ориентированных проектах. (часовой семинар от тренера)</td></tr>
<tr><th>Алексей Сидоренко</th> <td>SaaS, аренда приложений</td></tr>
<tr><th>Олег Серегин, Марина Власенко</th> <td>Технологии будущего: Инновации в области самообучения и самомотивации. Новый формат IT - тренингов и корпоративов</td></tr>
<tr><th>Максим Ищенко</th> <td>Зарплаты ИТ-специалистов: анализ developers.org.ua</td></tr>
<tr><th>Валерий Павлович Юриков</th> <td>Использование скрытых психофизических возможностей веб-разработчиков для успешного создания и внедрения современных Интернет-проектов</td></tr>
</tbody>
</th></thead></table>
Компания подобралась что надо: Яндекс, ukr.net, Rambler, Bigmir, Microsoft, Sun... OMG.
И это не говоря о других талантливейших людях.
<a href="http://uaweb.in.ua/news/3971.html">Весь список докладов UA WEB 2008</a> — по этому адресу его еще немножко дополнят, и скоро появится точное расписание. Всего будет не более 40 докладов.
<p>В целом, еще не поздно вскочить в поезд докладчиков со своим докладом, для этого нужно просто написать мне письмо на akella.a(?)<a href="http://gmail.com/">gmail.com</a>, если он действительно интересен, он появится в программе.<br />
По всем вопросам можно обращаться ко мне, либо <a href="http://uaweb.in.ua/delegates/3025.html">одному из организаторов</a></p>
<p>До 8 марта включительно у нас скидка.<br />
Приглашаю всех посетить нашу супер-пупер-конференцию!</p>
<p>Могу ответить на любые вопросы, комментарии, пожелания. =)</p>
<ul>
<li><a href="http://uaweb.in.ua/">Официальный сайт конференции UA WEB 2008
</a></li></ul>
<p>ЗЫ: на конференции будем кормить!</p>
<p>ЗЫЫ: чтобы раз и навсегда закрыть популярный вопрос с "рубкой бабла": я на этой конференции заработаю меньше, чем ваша месячная зарплата. Это для меня идейное мероприятие, а не бизнес.</p>
Миямото Мусаси и вёрстка
2008-02-29T00:00:00Z
https://cssing.org.ua/2008/02/29/miyamoto-musasi/
<p>ассорти из советов для фрилансеров-верстальщиков от одного из лучших воинов этой планеты.</p>
<!--more-->
<h3>Книга Пяти Колец</h3>
Книга написана в 17 веке, одним известным японским мастером, Миямото Мусаси. Я пытаюсь проводить параллели с современным миром.
<h3>Cостояние духа</h3>
<blockquote>
В бою состояние твоего духа не должно отличаться от повседневного. И в схватке и в обыденной жизни ты должен быть целеустремлен, но спокоен. Встречай ситуацию без напряжения, однако не беспечно, с духом уравновешенным, но не предубежденным. </blockquote>
Не позволяйте багам возникшим в верстке завладеть вами. Все равно, по опыту, они всегда решаются только когда успокаиваешься и перестаешь орать "Ну какого !@# IE!?".
<p>Когда вы увлечены эмоциями, вы себя с ними отождествляете. Буддисты, например, советуют разделить себя и свои эмоции. Очистить душу для любви (к вёрстке) и сострадания (к багам).</p>
<p>Еще очень хорошо создать внутри состояние спокойствия, когда вы знаете, что сейчас вам начнут звонить, писать и всячески вас пытаться раздражать. Лучше в этот момент стать спокойным и обычным.</p>
<h3>Стать противником</h3>
<blockquote>В быту люди имеют тенденцию думать о воре, обнаруженном и укрывшемся в доме, как о враге, запершемся в укреплении. Однако, представив себя на его месте, мы почувствуем, что весь мир против нас и что выхода нет. Он, запертый, -- дичь. Тот, кто входит арестовать его, -- ястреб.
</blockquote>
Когда вам кажется, что клиент вас убьет своими доделками, просто поставьте себя на его место. Он уже на исходе сил в написании 35го пункта(у меня это было!) в поправках к вёрстке =)
<p>То же можно сказать о проекте, который вы никак не доделаете. Просто поставьте себя на место этого проекта, вас уже делают полгода, у вас давно сил нет сопротивляться. Все ваши дедлайны давно пройдены и вам нечего противопоставить разработчику.</p>
<p>Люди с хорошим воображением, могут представить как тяжело на самом деле Интернет Эксплореру. Нет, он не черный непробиваемый ящик, который удивляет вас своими фокусами. Он просто загнанный нашими хаками в угол мышонок, который дрожит и своими неловкими испуганными движениями может порой удивить вас. Ну разве можно ругаться или злиться на маленького беспомощного мышонка?!</p>
<h3>Много противников</h3>
<blockquote>
Наблюдай за последовательностью, в которой они нападают, и встречай сначала тех, что нападают первыми. Ожидание пагубно.</blockquote>
А это о работе на несколько заказчиков. Или просто над несколькими проектами в одной компании. Часто замечал, что первым делом отвечаю и занимаюсь приятными проектами. Вместо того чтобы делать то, что "нужно на самом деле". То есть, отвечать тем "противникам", которые первые атакуют.
<p>"Ожидание пагубно", а это вообще "Do It Now", прямым текстом.</p>
<h3>Школы, использующие сверхдлинный меч</h3>
<blockquote>Некоторые школы предпочитают сверхдлинные мечи. С точки зрения моей Стратегии -- это слабые школы. Они не принимают принципа "рубить врага любыми средствами". Они предпочитают особо длинный меч. Полагаясь на его длину, они думают нанести поражение противнику с расстояния.
...В своем рассуждении я отрицаю заданность, узкий настрой.</blockquote>
Под сверхдлинными мечами, очевидно, имеются ввиду супер-крутые редакторы. Dreamweaver, и прочие IDE. Часто люди охотятся за ними, пытаются узнать кто каким пользуется, обновляют их постоянно, надеясь таким образом удлинить свой меч. А некоторые, в свою очередь, агитируют за свои редакторы, софт. Мол, скачайте это, и вы начнете быстрее работать!
Для меня редактор и меч очень четко ассоциируются, и я верен Мусаси. Главное "рубить врага любыми способами".
<p>Тот же самый принцип в полной мере относится к языкам программирования, известные споры "PHP vs Perl", "Ruby vs PHP" etc. Главное рубить, ребята...</p>
<p>И еще, неважно у какого профессионала вы учитесь, как видите, можно научиться веб-разработке у знаменитого мечника. Просто нужно учиться рубить любыми способами, и смотреть на вещи шире.</p>
<h3>__END__</h3>
Книгу эту я считаю просто сокровищем. Кроме того, как я недавно узнал, в Японии она считается настольной для маркетологов. А ниппонцы знают, где настоящие знания.
Конечно, стиль изложения не всем придётся по вкусу, но кому понравится, думаю оценят по достоинству.
Только представьте, сколько в ней еще мудрых и ценных советов для современных "воинов".
<ul>
<li><a href="http://www.lib.ru/DO/m6m.txt">Миямото Мусаси. Книга Пяти Колец</a></li>
</ul>
<p>Мастерство не имеет границ. Как прекрасно, что я могу в 21 веке поучиться у знаменитого воина 17 века.<br />
Как сказал Мусаси:</p>
<blockquote>
Когда обретаешь Путь Стратегии, нет ничего, чего ты не смог бы понять.
Ты будешь видеть Путь во всем.
</blockquote>
А как часто Вы видите Путь? =)
5 инструментов
2008-02-27T00:00:00Z
https://cssing.org.ua/2008/02/27/5-things-icant-live-without/
<p>5 штук на моём компьютере без которых не мыслимо его использование. Получил эстафету от <a href="http://softwaremaniacs.org/blog/2008/02/26/5-tools/">Сагалаева</a>.</p>
<!--more-->
<p><span style="color:#fff">5 инструментов без которых я не могу работать продуктивно</span></p>
<h3>1. Mac</h3>
Не смогу я больше делать стрессовые задачи на других системах. Красивый "альт+таб" — Expose, сглаживание шрифтов и скорость покорили меня навсегда. А еще, вот эта реализация radio button в интерфейсе:
<p class="img"><img src="http://cssing.org.ua/pic/tm.png" width="233" height="297" alt="Time Machine" /><span>ну не прелесть?</span></p>
Я влюблен.
<h3>2. Safari </h3>
Пока я не пользовался Сафари, я думал, что никакие силы не заставят меня съехать с Firefox. Ведь там так много плагинов, столько постоянных обновлений. И если, что-то и появляется под броузеры новенькое, то обязательно под Firefox.
Тем не менее. Мда. =)
<p>Почему никто не догадался делать автокомплит как у Сафари (он выкатывает первый вариант не внизу, а прямо в поле)? На одно нажатие клавиатуры меньше.</p>
<p class="img"><img src="http://cssing.org.ua/pic/sa.png" width="403" height="94" alt="Safari" /><span>Safari</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/f.png" width="403" height="91" alt="Firefox" /><span>Firefox</span></p>
<h3>3. Textmate (было Notepad++)</h3>
Уже писал об этом редакторе. Фантастическая расширяемость, ненагруженный интерфейс, приятная по дефолту подсветка. Да что там говорить, в нем просто приятно кодить!
<p>Более того, все черновики и todo-шки я веду в нем. Одним словом если текст, то Textmate.</p>
<h3>4. CSS</h3>
Инструмент это или нет, но жить без него было бы очень скучно. По крайней мере, это неплохая система, в которой можно увидеть такую же красоту идей как в математике, программировании, музыке и картинах знаменитых художников.
<p>Иногда я его использую для TODO:</p>
<pre>
.todo{
носки: постирать;
кофе: купить;
цветы: девушке;
цветы: второй-девушке !important;
etc..
}
</pre>
<p>Долго думал над 5м инструментом, сюда подходят и Gmail, и Photoshop, и мой ftp клиент Cyberduck, и RSS читалка Vienna. Но все это слишком обычно, и так понятно. Потому мой 5й инструмент без которого я не могу жить:</p>
<h3>5. iTunes</h3>
До мака, я просто обожал <a href="http://systrayplay.land.ru/index.html">STP</a> (не обращайте внимания на дизайн сайта, просто поверьте, это действительно один из лучших плееров ever под винду)
<p>Но, при всей своей неминималистичности, iTunes покорил меня своими возможностями быстрого составления нужных плейлистов. Любой поиск по музыкальной коллекции автоматически превращается в playlist. Кол-во параметров и удобство упорядочивания по ним поражают. Я уж не говорю о всяких стандартных системах рейтингов, куче пре-обозначенных плейлистов вроде: "Последние добавленные", "Лучший рейтинг", "Самые часто играемые". Мелочи, но очень радуют, без музыки работать хоть и быстрее, но как-то вот... не то =)</p>
<p>На первый взгляд чисто развлекательная штука, но не мыслю работы без него.</p>
<h3>__END__</h3>
А вот так выглядит мой десктоп прямо сейчас:
<p class="img"><a href="http://cssing.org.ua/pic/desktop.jpg"><img src="http://cssing.org.ua/pic/desktop_sm.jpg" width="500" height="313" alt="Рабочий стол" /></a><span>Рабочий стол</span></p>
Так как я против цепочек вроде "я ставлю ссылку на тебя, напиши об этом", то никого перечислять не буду. Но с радостью поставлю ссылку на того, кто напишет свои 5 инструментов. И скажет об этом в комментах.
<strong>Буду рад услышать ваши 5 инструментов в комментариях!</strong> По ним можно многое сказать о человеке...
Perl мова, 23 февраля, Киев
2008-02-25T00:00:00Z
https://cssing.org.ua/2008/02/25/permova-kiev-2008/
<p>Почти случайно оказался на <a href="http://event.perlukraine.org/upw2008/">интереснейшем мероприятии</a> организованном московской и киевской перловыми группами. И в частности Андреем Шитовым.</p>
<!--more-->
<p class="img"><img src="https://cssing.org.ua/pic/upw/1.jpg" height="346" width="500" alt="346" /><span>Перл там</span></p>
Вообще, удивительно, но я на самом деле полтора года правил скрипты на перле, и хотя звания программист вряд ли могу удостоиться, кое-что умею. Мероприятие же было дико интересным даже и без знаний перла.
<p class="img"><img src="https://cssing.org.ua/pic/upw/7.jpg" height="333" width="500" alt="Аудитория" /><span>Аудитория</span></p>
Средний возраст программиста на Perl довольно высокий.
Начал воркшоп <a href="http://shitov.ru/">Андрей Шитов</a>. Рассказывал обо всех изменениях, что он наблюдал в Киеве за последние два года, показал тучу классных фоток Киева, когда он только успел столько нащелкать! Вообщем, рассмешил всех =)
Затем рассказал о сходствах и различиях в Perl 6 и Perl 5.10. А так же, показал замечательную презентацию на немецком, было очень забавно читать всякие "Von URL"
<h3>Рампочта</h3>
Затем выступал Алексей Капранов, один из разработчиков почты рамблера. Как оказалось, она тоже написана на перле. Некоторые факты:
<ul>
<li>100 серверов</li>
<li>50 тысяч строк кода на перл</li>
<li>598 ревизий главного файла с которым взаимодействуют юзеры</li>
<li>10млн принятых писем в день, полтора миллиона отосланных. Как сказал Алексей, это обусловлено всякими форумами и одноклассниками, которые шлют уведомления про каждый пук на сайте</li>
<li>2 сисадмина и пара программистов на Перле.</li>
<li>10-15% украинских пользователей</li>
<li>25 миллионов пользователей, из них 15 миллионов активных</li>
<li>3я почта в рунете</li>
</ul>
На самом деле вся эта информация из вступления к докладу, но сам доклад был слишком перл-специфичным чтобы я о нем мог рассказать.
<p class="img"><img src="https://cssing.org.ua/pic/upw/11.jpg" height="333" width="500" alt="Алексей Капранов" /><span>Алексей Капранов</span></p>
Потом минут 20 его пытали о технических подробностях. Надо сказать, он отвечал ничего особо не скрывая. Что весьма показательно в сравнении с некоторыми украинскими специалистами, которые еще боятся делиться знаниями =)
<h3>Как продать Перл, доклад от portaone</h3>
Как продать ручку? Можно просто пытаться продать отличную золотую суперручку абстрактному клиенту. А можно попытаться узнать чего он хочет, и дать ему именно это.
Из технических преимуществ, Андрей Жиленко упомянул такие:
<ul>
<li>CPAN</li>
<li>Понятность кода и известность языка, относительно некоторых других</li>
<li>Скорость разработки</li>
</ul>
Как следствие, это влияет на бюджет и сроки.
Основное ударение делалось на том, что нельзя говорить клиенту о технических преимуществах языка. Нужно понять чего хочет клиент, и сказать ему что он выиграет на его же языке. Это, собственно, относится и к веб-стандартам в полной мере. Нельзя говорить клиентам что "это правильно!".
<h3>Укроп</h3>
Блиц доклад, Дмитрий Карасик (из Копенгагена) рассказывал об украинском языке программирования. Без лишних слов, вот кусочки кода:
<p class="img"><img src="https://cssing.org.ua/pic/upw/9.jpg" height="333" width="500" alt="Дмитрий Карасик об УКРОП" /><span>Дмитрий Карасик об УКРОП</span></p>
Или вот подлиннее:
<pre>
дiйство початок(аргументи)
нехай у;
доки (у = 0; y < аргументи.длина; у++) то
якщо ( аргументи[у].строка == '--')
геть;
читай( аргументи[у]);
отож
отож
</pre>
Код вполне рабочий, мы даже из командной строки запустили одну из таких вот программок. Автор предлагает развить конструкции "отож", до "отожбо" и "отожбойвоно". =)
<a href="http://mcfist.livejournal.com/12285.html">Оригинальное эссе об УКРОПе</a>, где чуть более подробная инфа и предыстория.
<h3>Форекс</h3>
Сергей Гулько, один из разработчиков системы для Forex оговорился, что им запретили рассказывать что-либо важное. В результате рассказывал о memchached и spread. Такие штуки будут интересны только тем, кто работает с большими нагрузками, но если это так, вы просто обязаны знать эти два слова. В остальном было любопытно узнать что на форексе пользователи вообще не взаимодействуют с базой данных, только с кэшом. Memchached — для разгрузки базы данных, spread — для быстрого обмена сообщениями между серверами и не только.
<p>Разговор плавно сполз в подробности использования spread и memcached в ПО Forex. Г-н Сережкин из Яндекс старательно выпытывал у Сергея всякие мелочи, прикрываясь "сбором статистики". Так я ему и поверил, хаха!</p>
<h3><a href="http://www.jnthn.net/">Jonathan Worthington</a></h3>
Примечательно, что на воркшоп приехали люди из <a href="http://event.perlukraine.org/upw2008/stats">Дании, Англии и Испании</a>. В частности, Джонатан, уроженец Британии живущий в Испании, один из разработчиков компилятора для Перл 6.
<p class="img"><img src="https://cssing.org.ua/pic/upw/2.jpg" height="369" width="500" alt="Вот как надо программить" /><span>Вот как надо про- граммить</span></p>
Еще один британец рассказывал об интеграции перлового фреймворка Catalyst и джаваскриптовой библиотеки ExtJS.
<p>Конференцию завершили докладом для начинающих программистов, "Perl 6 Tutorial". Андрей Шитов и Джонатан по очереди рассказывали о циклах, ООП, новых бинарных операторах и всем-всем-всем из Перл 6. Вышло очень динамично и интересно. В некоторые моменты запускался компилятор и начинался отлов ошибок в коде =). Особенно запомнился некто, несколько раз задавший вопрос: "Это ошибка исполнения или компиляции?". На который никто не мог никак ответить, без самого компилятора.</p>
<p class="img"><img src="https://cssing.org.ua/pic/upw/3.jpg" height="302" width="500" alt="Андрей Шитов и Jonathan Worthington" /><span>Worthi- ngton & Shitov</span></p>
<p class="img"><img src="https://cssing.org.ua/pic/upw/4.jpg" height="379" width="500" alt="Андрей Шитов" /><span>Андрей Шитов</span></p>
<p class="img"><img src="https://cssing.org.ua/pic/upw/6.jpg" height="333" width="500" alt="Jonathan Worthington" /><span>Jonathan Worth- ington</span></p>
<h3>В конце</h3>
Вообще, на такие мероприятия опасно ходить, можно начать забывать про HTML и писать на Perl...
<ul>
<li><a href="http://event.perlukraine.org/upw2008/">Український воркшоп «Перл мова» — 2008</a> - официальный сайт</li>
<li><a href="http://perl.lv/">Другие воркшопы по перлу</a></li>
<li><a href="http://event.perlukraine.org/upw2008/media/video.html">Видео с мероприятия (и я засветился, с незнакомым мне голосом)</a></li>
</ul>
За все фото огромное спасибо <a href="http://www.shitov.ru/">Андрею Шитову</a>! =) Другие организаторы тоже постарались на славу! Все вышло без сучка и без задоринки.
<p>Радует тенденция, в Украине и России все больше и больше таких вот качественных воркшопов-тусовок.</p>
Новый вид спама — купленный мозг
2008-02-17T00:00:00Z
https://cssing.org.ua/2008/02/17/brain-for-sale-spam/
<p>на блоге столкнулся с новым видом спама, раздумываю как победить</p>
<!--more-->
<h3>Виды спама</h3>
До последнего времени, весь спам был автоматический, и миникапча 2+2 обрубила его напрочь. Я считал что борьба со спамом окончена навсегда. Оказывается, нет.
<h3>Новый вид спама</h3>
Новый вид спама пишется исключительно людьми, более того они просматривают пост, и комментарий получается якобы по теме, но и ежу понятно по стилю текста, и ссылке на <a href="http://ru.wikipedia.org/wiki/%D0%A1%D0%BF%D0%BB%D0%BE%D0%B3">сплог</a>, что это такое на самом деле.
Типичные примеры, к посту про barcamp:
<blockquote>не ну епт. вот это встреча. прикольные фотки</blockquote>
<blockquote>сиськи очень понравились :D</blockquote>
К посту про тайм-менеджмент:
<blockquote>да советы в принципе не хилые. полезные. спс. надо тоже себе time manadgment завести</blockquote>
<blockquote>Замечательно!</blockquote>
<blockquote>Очень дельные советы! Обязательно воспользуюсь ими!</blockquote>
<blockquote>Понравилось!</blockquote>
<blockquote>Cпасибо, Замечательно!</blockquote>
Я даже где-то встречал форум, где платили по 1WMZ за 10 или 20 комментариев на блогах.
<h3>Данные из первых рук</h3>
<blockquote>
Работа заключаеться в следующем:
<p>Топаем сюда<br />
<a href="http://blogs.yandex.ru/top/standalone/">http://blogs.yandex.ru/top/standalone/</a></p>
<p>выбираем любой блог (не обязательно с первой страницы), открываем его. Быстренько пробегаемся глазами по какой ни будь записи там (не обязательно верхней), и пишем осмысленный отзыв или коментарий к записи. При этом можно там будет указать имя, почту, сайт. Имя и почту указывайте своё, а вот сайт мой (ниже напишу какой). Важно писать нормальный комент, а не тупо "Хорошая статья, афтар пишЫ есчё" иначе комент не пропустит админ.</p>
<p>Обрабатываем таким образом как можно больше блогов (не менее 10ти) и выкладываем сюда ссылки на те записи к которым есть комент с нашей ссылкой + z-кошёль</p>
<p>За каждые 13 таких коментов я плачу по 2 wmz.</p>
</blockquote>
<h3>Почему это бесит</h3>
Бесит это меня по нескольким причинам. Во-первых антиспам придумать теперь будет очень трудно. Единственный выход что я вижу, проверять комментарии на длину, но опять же, почему нормальный человек не может написать короткий комментарий? Может...
<p>Вдобавок, все это в целом привносит кучу шума (Signal vs Noise) в информационное поле, при поиске релевантной информации приходится просто пропускать, а порой вчитываться в бессмысленный текст.</p>
<p>А вторая причина, что это же просто продажа своего мозга. Люди на самом деле часто его продают, но тут связь уж совсем какая-то прямая. Тебе платят деньги, за то что ты становишься "читателем блога", ты его читаешь и комментируешь в тему за деньги. Людей жалко =(. <strong>Неужели труд человека теперь стоит дешевле ботов?!</strong> Это как-то странно и грустно одновременно.<br />
Хотя, я конечно понимаю, что боты видимо неэффективны стали.</p>
<p>Для меня это выглядит, как если бы людям платили за рассылку спамных писем деньги. По-большому счету это ничем не лучше обычного банального спама виагры и удлинителей. :( Мне вовсе не жалко подарить кому-то немного поискового веса, но когда это откровенный шум, так не хочется отдавать его в чей то мозг. Я ведь только ради этого не использую никакой рекламы на блоге.</p>
<p>Представляете, как вы за 1 бакс, рассылаете всем знакомым осмысленные письма, то есть спрашиваете о делах, отвечаете на вопросы. Но с рекламой виагры.</p>
<h3>Ссылки по теме</h3>
Единственный выход что я вижу, парсить комментарий на предмет слов "замечательно, классно, очень, понравилось" и оставлять их все на модерацию если длина не более 2х строк. Может быть у кого-то есть другие идеи?
<ul>
<li><a href="http://snook.ca/archives/other/effective_blog_comment_spam_blocker/">Эффективная система борьбы со спамом</a> очень интересная статья, очень похожие проблемы, возможно кому-то поможет побороть и другой спам</li>
<li><a href="http://hostinfo.ru/articles/internet/services/960/">Всеобъемлющая статья о спаме в комментариях</a></li>
</ul>
Было бы очень интересно послушать ваш опыт борьбы со спамом.
Barcamp, 8-10 февраля, Рига
2008-02-13T00:00:00Z
https://cssing.org.ua/2008/02/13/barcamp-riga/
<p>отчет о неконференции блоггеров в Латвии</p>
<!--more-->
<h3>22483</h3>
Всем участникам присвоили номера, они правда потом так и не пригодились. Но! Мой номер 22483 мне помог побороть бессонницу =), ночью в автобусе я решил разложить на множители 22483. Особую пикантность затее добавил тот факт, что число 22483 оказалось простым(не делится ни на что, кроме себя самого). Вышло очень увлекательно.
Теперь вы знаете с каким психом имеете дело. =)
<h3>Вообще</h3>
Конференция прошла в шикарнейшем Reval Hotel в центре Риги:
<p class="img"><img src="http://cssing.org.ua/pic/barcamp/12.jpg" alt="Revak Hotel Latvija" /><span>Reval</span></p>
Кто только там не был, USA, Англия, Франция, Германия, вся прибалтика, Россия, Украина, Беларусь, Азербайджан, Казахстан, Таджикистан и много других. География самая широчайшая
<p class="img"><img src="http://cssing.org.ua/pic/barcamp/2.jpg" alt="все" /><span>Человек 300 было</span></p>
Вот так люди записывали свой доклад в расписание:
<p class="img"><img src="http://cssing.org.ua/pic/barcamp/11.jpg" alt="йоха!" /><span>Йоха пишет!</span></p>
А вот финальное расписание первого дня(кликабельно):
<p class="img"><a href="http://www.flickr.com/photos/22359719@N07/2253262246/sizes/l/"><img src="http://cssing.org.ua/pic/barcamp/3.jpg" alt="расписание" /></a><span>Расписание Barcamp</span></p>
Сами понимаете, пересказать что-либо очень трудно. Нужно просто было там быть. Тем кто не был, остается только читать названия докладов, и ждать видео и презентации на <a href="http://barcamp.lv/">официальном сайте</a>.
Приехало много гиков:
<p class="img"><img src="http://cssing.org.ua/pic/barcamp/6.jpg" alt="geeky" /><span>Geeky</span></p>
<h3>Тематические блоги</h3>
Отлично выступил украинский кофеман и журналист <a href="http://coffeesponge.ru/">Слава Баранский</a>. Рассказывал о тематических блогах. О том, что блогосфера в опасности от блогов о заработке денег, которые не привносят в этот мир ничего. Параллельно пропиарил меня и <a href="http://5pages.net/">блог о литературе</a>. А многих вдохновил на начало тематических блогов. Вобщем и целом, рассказал как это круто иметь тематический блог, как на нем заработать не банальным способом, и как вообще его начать вести. За прямой и честный доклад о блогах, респект.
<p class="img"><img src="http://cssing.org.ua/pic/barcamp/5.jpg" alt="Слава Баранский" /><span>Баранский о блогах</span></p>
<h3>Pupi.lv</h3>
Один из лучших докладов был в формате <a href="http://en.wikipedia.org/wiki/Pecha_Kucha">Печа Кучи</a>, и посвящен сиськам. Артурс Меднис рассказал о всех реализованных фичах на своём проекте. Проиллюстрировал возможности Wordpress, поведал короткую предысторию проекта, его достижения, и оригинальные находки использовавшиеся в ходе разработки.
Артурс просто великолепен.
<p class="img"><img src="http://cssing.org.ua/pic/barcamp/10.jpg" alt="Артурс Меднис" /><span>Артурс про pupi.lv</span></p>
<h3>Инкубатор проектов</h3>
Пожалуй, самая интересная часть мероприятия. Собралось около 20 проектов, все расселись за свои столы, а между столами курсировали инвесторы и просто посетители. Мы подходили к каждому столу, и хозяева проекта начинали нам рассказывать, что они хотят сделать, как это круто, и зачем им нужно немного денег. Можете себе представить обьем информации, который получил наш мозг. Несколько проектов запомнилось.
<p><a href="http://www.osogato.com/">Osogato</a> — это десктопный софт подбирающий "музыку похожую на". Выглядит это так: выбираем несколько любимых песен, и несколько плохих, а программа анализирует всю вашу библиотеку музыки, и подбирает песни, которые вам понравятся. Как сказала главная разработчица, анализируется сам звук песни, а не метаинформация из гугла или <a href="http://last.fm/">last.fm</a>. То есть алгоритм ищет песни с нравящимся вам "звучанием". Уже придумали 42 алгоритма для этого подбора, и до сих пор не остановились! Пока есть версия только для Mac Os (интегрирована c iTunes), но все это планируется портировать на винду и вывести в итоге в онлайн.<br />
Проникся глубоким уважением, анализ музыки по звуку... это очень сильно.</p>
<p>Так же очень интересным оказался проект одного москвича. Они разрабатывают сложную систему для анализа любых коммьюнити. Представляете, есть у вас социальная сеть, 1000 человек из сферы веб-разработки. И тут вы приходите к ним, и с помощью этой системы находите людей идеально подходящих на роль руководителя проекта, главного программиста, и любую другую позицию. Все строится на анализе личных характеристик каждого члена сообщества.<br />
Потрясающая иде, позволяющая современным кадровым агентствам эффективно использовать социальные сети. Система даже "тестировалась" на одном из курсов МГИМО, и получила высокую оценку от преподавательского состава, так что все очень серьезно.</p>
<p>Среди остальных проектов не было ничего особенно нового, всякие вариации на тему социальных сетей, веб2.0 сервисов похожих на те, что уже есть, мобильного блоггинга, нового RSS-ридера, приложений для facebook и прочего в таком же духе. Такие вещи уже плохо запоминаются.</p>
<h3>Еще</h3>
<ul>
<li><a href="http://www.flickr.com/search/?q=barcamplv&m=tags">Фотографии с мероприятия</a></li>
<li><a href="http://barcamp.lv/2008/02/12/presentations-online-part-1/">Презентации с баркэмпа</a></li>
<li><a href="http://internetno.net/2008/02/10/barcamp-baltics-2008-den-pervyiy/">Первый</a> и <a href="http://internetno.net/2008/02/11/barcamp-baltics-2008-den-vtoroy/">второй день</a> на internetno</li>
<li><a href="http://barcamp.lv/%22%22">Сайт БарКэмпа</a></li>
</ul>
Вышло клёво, спасибо Йохе, Максу, Артурсу, Диане и всем всем всем. :)
<p class="img"><img src="http://cssing.org.ua/pic/barcamp/13.jpg" alt="Баркемперы" /><span>На афтепати</span></p>
За фотки спасибо <a href="http://www.flickr.com/photos/22359719@N07/sets/72157603870189605/">Oliver Berger</a>, <a href="http://www.flickr.com/photos/nuakin/">Nuakin</a>.
Успеть всё или управление временем
2008-01-27T00:00:00Z
https://cssing.org.ua/2008/01/27/time-management-2/
<p>отличные советы по эффективному управлению временем от Кейт Робинсон</p>
<!--more-->
<h3>Перевод</h3>
Пост, фактически переработанный перевод заметки <a href="http://www.dkeithrobinson.com/">Keith Robinson</a> "<a href="http://www.dkeithrobinson.com/entry/how_i_gtd/">How i GTD</a>". Его советы мне показались настолько полезными и по делу, что решил опубликовать на русском тут. Надеюсь кому-то это принесет пользу. Все что дальше будет от первого лица, это Кейт, не я =)
<h3>Записывайте всё!</h3>
Правило номер один: записывать всё! Я никогда не пытаюсь что-либо запомнить. Просто записываю все, что хотел бы помнить. Для этого у меня есть несколько записных книжек, а когда я добираюсь до компьютера то переписываю всё туда. Я делаю массу записей, составляю кучи списков, и пытаюсь записать все в тот же момент как это приходит мне в голову.
<p>Всё это делается для того, чтобы очистить голову от мыслей, и сложить их в место, откуда я смогу их легко достать, если захочу. Это освобождает голову для других забот.</p>
<h3>Делайте на месте</h3>
Второе правило: нельзя давать накапливаться маленьким делам. Сначала было тяжело этому следовать, но после какого-то времени, я начал делать это на автомате.
<p>Нужно делать не откладывая любые дела, отнимающие меньше пяти минут. Например, проверить почту, ответить на письмо. Никогда нельзя давать этим делам накапливаться. Иногда это труднее, маленьких дел может быть очень много. Но даже в такие дни, в целом лучше сделать все эти дела и приниматься за важные и большие только когда сможете на них полностью сконцентрироваться.</p>
<h3>Концентрируйтесь, избегайте многозадачности</h3>
Перед большими задачами я убираю все другие, так что могу сфокусироваться на одной. Например, пока я пишу эти строки, я выключил все приложения. Я не проверяю почту, мессенжеры, телефон и прочее. Для задач в которых мне действительно нужна концентрация — дизайн, например — я буквально отключаю всё, что может отвлечь меня от процесса. Для этого я обычно выделяю блоки времени с запасом по 2-4 часа, в зависимости от задач. Это, вдобавок, помогает не потеряться в "потоке" выполнения задачи.
<p>Такие правила не только увеличивают производительность. Качество работ сильно возрастает, когда можешь полностью на них сосредоточиться.</p>
<h3>E-mail и пустой ящик каждый день.</h3>
“Inbox Zero” очень модная сейчас методика, и тому есть хорошие причины. Годами я стремился к пустому почтовому ящику в конце дня, и теперь понимаю, что это действительно помогает лучше сосредоточиться. Для моей почты у меня есть несколько правил:
<ul>
<li>Не проверять почту постоянно. Дать письмам немного скопиться. Но только немного. :)</li>
<li>Отвечать сразу на все, что отнимает меньше 5 минут. Я никогда не жду, чтобы ответить, только если нужен действительно сложный ответ, или какое-то действие.</li>
<li>Архивировать все, на что я не могу ответить. У меня есть три места куда я все скидываю; первое, большой и хорошо организованный архив, второе, "waiting”-папка, для дел, где требуется дополнительная информация, и третья, "action"-папка, для задач, к которым нужно вернуться чуть позже и сделать их. Я просматриваю эти папки несколько раз в неделю.</li>
<li>Удалять все, что не понадобится позже. Я часто использую кнопку Del.</li>
</ul>
<h3>Стремиться к порядку</h3>
Это распространяется и на физическое и на цифровое рабочее пространство. Суета и хаос отвлекают. Я много времени уделяю очистке моих рабочих мест, и это помогает сосредоточиться еще лучше на важных делах.
<h3>Резюме</h3>
Думаю, суть управления временем — найти систему которая работает для тебя, и использовать ее. Часто люди изменяют своей системе ради какой-то новой, лучшей, более эффективной. Но управление временем не обязательно должно быть сложным.
<h3>В конце от меня</h3>
После использования десятков программ, которые должны были мне помогать управлять делами, убедился, что лучше, чем бумажка или текстовый файл, ничего вобщем-то для меня нет =). Действительно, чем проще методика, тем лучше, хотя тут на вкус и цвет... Эти советы мне нравятся именно потому что предельно просты, и позволяют лучше понять, что нам мешает все успевать.
<p>Одно правило верно для всех GTD методик, если хотите что-то успеть, начните делать это прямо сейчас.</p>
<ul>
<li>оригинальная статья <a href="http://www.dkeithrobinson.com/entry/how_i_gtd/">How I GTD</a></li>
<li><a href="http://rsdn.ru/article/career/doitnow.xml">Сделай это сейчас</a> от Стива Павлины, можно использовать как допинг, когда почувствуете что время утекает сквозь пальцы</li>
<li><a href="http://www.43folders.com/izero">Про "inbox Zero" и другие приёмы с почтой</a></li>
</ul>
Буду счастлив, если поделитесь своими приемами управления временем!
Envision, 14-15 января, Прага
2008-01-21T00:00:00Z
https://cssing.org.ua/2008/01/21/envision-2008-prague/
<p>Конференция из-за которой меня занесло в Прагу. Что там было, и как это может повлиять на нашу жизнь.</p>
<!--more-->
<h3>Envision</h3>
<a href="http://envision-event.com/">Конференцию</a> проводили в одном из самых пафосных мест Праги — <a href="http://www.cafelouvre.cz/en/">Cafe Louvre</a>. Там засиживались Кафка, Эйнштейн и братья Чапек. По слухам, там же частенько снимают всякие фильмы.
<p class="img"><img src="http://cssing.org.ua/pic/envision/1.jpg" alt="Cafe Louvre" width="500" height="375" /><span>Вход в Louvre</span></p>
Большая часть времени была посвящена обсуждениям, было лишь пару докладов. Потому довольно трудно пересказывать, что там было. Успели поговорить о всех темах которые только могли волновать дизайнеров. Я даже застал Crazydim'у и Genn'a обсуждающими с немецким профессором дизайна, то, как лучше располагать объекты для их сравнения. Они это на салфетках показывали...
<p>Народу было человек 20-30. Посмотрите сами на весь зал:</p>
<p class="img"><img src="http://cssing.org.ua/pic/envision/2.jpg" alt="Cafe Louvre" width="500" height="375" /><span>Зал, где прошел Envision</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/envision/3.jpg" alt="Matt Bagwell" width="500" height="281" /><span>Matt Bagwell (London 2012) из <a href="http://www.conchango.com/">Conchango</a></span></p>
<h3>Тенденции дизайна</h3>
О трендах в современном веб-дизайне рассказывал немецкий профессор дизайна, и по совместительству креативный директор <a href="http://www.competence-site.de/cc/experten.nsf/experte/H3946-Wolfgang-Henseler">Wolfgang Henseler</a> (<a href="http://www.syzygy.net/">Syzygy</a>).
Основные мысли выглядят так:
<ul>
<li>Представьте книгу. А теперь представьте что её экранизация выглядит как видеозапись переворачивания страниц этой книги. Затем, профессор, конечно, показал трэйлер Гарри Поттера, который все смотрели с раскрытыми ртами.
Такую метафору использовал Вольфганг чтобы показать, как плохо мы пока используем потенциал веба. В ближайшем будущем профессор предрек переход именно к нормальному использованию. Более интерактивному.</li>
<li>Уход от иерархии в сайтах (sitemap и прочее). В базе данных они могут быть и иерархическими, но для человека это должно быть представлено в другом виде, более подходящем для информации.</li>
<li>От страниц к интерфейсам, тут все понятно, отдельных страниц будет меньше, но, станет больше веб-интерфейсов</li>
<li>Click → Zoom; переход от кликов в интерфейсах, к более мягкому, увеличению. Эту идею кстати хорошо иллюстрирует продукт Microsoft Max, а также некоторые Mac OS приложения.</li>
<li>Переход от GUI к NUI (graphical user interface — natural user interface) Это означает, что в вебе будет все больше родных нам в реальности поведений обьектов. Например <a href="http://wefeelfine.org/">We Feel Fine</a>, <a href="http://amaznode.fladdict.net/">Amaznode books search</a> (тут проиллюстрированы связи путем деревьев, они же естественны нам), <a href="http://amaztype.tha.jp/US/Books/Title?q=design">Amaztype</a>, а так же <a href="http://www.oskope.de/">Oskope</a> (сейчас лежит, надеюсь подымут)</li>
</ul>
Но в целом суть ясна, переход к более естественным схемам взаимодействия в интернет, заимствованным из нашей жизни.
<p class="img"><img src="http://cssing.org.ua/pic/envision/5.jpg" alt="Август и Вольфганг" width="500" height="584" /><span>Справа Wolfgang Henseler</span></p>
<h3>О дизайне</h3>
Следующим докладывал August De Los Reyes, полненький парень на предыдущей фотке. Но пусть вас его улыбчивый вид не вводит в заблуждение =). Он учится в Гарварде на факультете дизайна, и в MIT на программиста. И хотя вузы американские, зато их 2! Кроме того он работает в Microsoft дизайнером, и участвует в разработке <a href="http://www.microsoft.com/surface/">Microsoft Surface</a>.
У него была пожалуй самая динамичная презентация, много рассказывал о диалектике в дизайне. О том что в дизайн и контент едины. Было много цитат психологов, историков, архитекторов. Произошло переполнение буфера, и я почти ничего не запомнил =)
<p>Август, рассказал о тесте, когда молодые люди переходили канатный мост над пропастью. И в первом случае симпатичную флиртующую медсестру поставили в конце, а во втором в середине дороги по мосту. Она всем подмигивала, и писала свой телефон, как бы невзначай. В результате, во втором случае, ей в несколько раз больше людей позвонило =). Люди остались более довольными, и с хорошими воспоминаниями.<br />
Затем мы долго прикладывали эту метафору к дизайну приложений...</p>
<p class="img"><img src="http://cssing.org.ua/pic/envision/6.jpg" alt="Август о двух факторах дизайна" width="500" height="375" /><span>Август о двух факторах дизайна</span></p>
Он рассказал, что они, когда пьют пиво, до сих пор прикалываются с чувака, который придумал Office Mate (скрепка, котик и т. п.). Так же, похвастался, что в его отделе работают люди придумавшие колесико для мышки, и цвета для слотов микрофона, колонок и др, на вашем системнике (они там зеленые, розовые, и еще какие-то).
<p class="img"><img src="http://cssing.org.ua/pic/envision/7.jpg" alt="Cafe Louvre" width="500" height="232" /><span>Слева-направо: Razorfish, Microsoft Surface, Syzygy, Microsoft Expression</span></p>
<h3>Размытие границ и Microsoft Expression</h3>
Много говорили о размытии границ между разработчиками и дизайнерами. А позже, оказалось, что дизайнеры должны еще и понимать маркетинг.
<p>Любой инструмент содержит в себе некий способ мышления, потому часто инструменты задают тон вебу.<br />
Дизайнеры склонны рисовать то, что может делать инструмент. И в этом смысле, как согласилось несколько гуру, выигрышны продукты Expression, поскольку одной из основных идей там служит свобода мысли разработчика-дизайнера, настраиваемый интерфейс и прочее.</p>
<h3>Самое интересное</h3>
Завершилась конференция походом дизайнеров в люди. Все докладчики усадились за столы с нами, и мы с ними смогли вволю наговориться. За нашим столом, например, оказался Steve Guttman, продакт менеджер Expression. Ему адресовали вопрос об индексировании сложных Silverlight приложений (например в магазине интерфейс по выбору размеров одежды, как решить проблему с отдельными страницами для каждого размера, в случае Сильверлайт интерфейса ).
<p>К слову, ответа на этот вопрос пока нет и для Flash. Но, Гатман вопрос понял, и кто знает, может ему приснится решение этой проблемы. Человек он опытный, работал раньше в Adobe... И хотя на вопрос он не ответил, вряд ли кто-то знает однозначный ответ в мире.</p>
<blockquote>At Adobe, Steve Guttman was the first product manager for Photoshop and launched that revolutionary application in 1989, growing its revenues to over $90 MM</blockquote>
Так же он рассказал о выпуске Silverlight 2 в 2008 году, и новых версиях Expression Blend.
<p>За столом, где уселись итальянские дизайнеры, и английский гуру дизайна Matt Bagwell, обсудили где и почем лучше брать софт, и кто кому какую скидку может обеспечить. Практичные люди. =)</p>
<p>Еще за одним столом, обсуждали размытие границ между дизайнерами, веб-разработчиками и сэйлсами.</p>
<p>Стол с Августом обсуждал философию дизайна, а так же выход Microsoft Surface. Компания решила следовать старой тактике, сначала эти устройства появятся в отелях и магазинах. Затем, поиграв, люди захотят их себе домой. И тут главное вовремя подсечь =)</p>
<h3>Что это значит для нас</h3>
Все очень просто, то о чем сейчас говорят эти дизайнеры, случится у нас через год-два-три. В личной беседе, продакт менеджер пакета Microsoft Expression, признался, что на самом деле никто не ожидает, что все моментально кинутся применять новую технологию. Происходит постепенная подготовка и переход рынка к новым целям, и новым продуктам. Сами инструменты постепенно адаптируются под наши нужды. В этом году, кстати, планируется выход Silverlight 2.
<p class="img"><img src="http://cssing.org.ua/pic/envision/8.jpg" alt="Genn нарисовал бандита" width="500" height="375" /><span>Во время ланча, Genn нарисовал такого вот бандита</span></p>
<h3>В конце</h3>
В конце первого дня, всех, и докладчиков и заезжих повели играть в бильярд =) Я чуть не выиграл у дизайнера логотипа <a href="http://www.london2012.com/">London 2012</a>. Черт. Всего один шар.... =)
<p>Мероприятие получилось уютным, и очень интересным. Буду рад ответить на любые вопросы о темах, что были в Праге.</p>
<p>За часть фото спасибо <a href="http://crazydima.livejournal.com/">Crazydima</a> и <a href="mailto:ReyMayson(at)gmail.com">Rey Mayson</a>.</p>
<ul>
<li><a href="http://mega.genn.org/2008/01/22/envision-praha/">Отчет Genn'a об Envision</a></li>
<li><a href="http://envision-event.com/">Сайт Envision</a></li>
</ul>
Я счастлив, что Microsoft оказало мне честь побывать на Envision! =)
Дизайн новостных сайтов, тренинг Геннадия Осипенко
2008-01-19T00:00:00Z
https://cssing.org.ua/2008/01/19/genn-about-news-site-design/
<p>Посчастливилось первым побывать на тренинге замечательного талантливого дизайнера и просто классного парня =) Небольшой фото-отчет, и основные мысли.</p>
<!--more-->
<h3>Где и зачем проводилось?</h3>
Тренинг организовывала компания "<a href="http://internews.ua/">Интерньюз</a>" для белорусских журналистов. В течении дня предполагались различные тренинги посвященные организации онлайн СМИ. Я попал на завершающий, который проводил некто <a href="http://genn.org/">Осипенко Геннадий</a>, и посвящен он был дизайну онлайн-изданий. Для тех, кто не в курсе, это креативный директор и дизайнер ответственный за дизайн таких проектов как <a href="http://zn.ua/">Зеркало Недели</a>, <a href="http://interfax.ua/">Интерфакс Украина</a>, <a href="http://rabota.ua/">Rabota.ua</a>, <a href="http://novy.tv/">Новый канал</a> и многих других...
<h3>Основные мысли</h3>
<ul>
<li>Дизайн и контент едины, нельзя их разделять, избегайте этого дуализма. Это помогает делать по-настоящему качественные и гармоничные продукты. Скорее нужно говорить о визуализации информации, чем о дизайне, и его наполнении контентом.</li>
<li>Идеальный новостной сайт, тот, на который человек заходит и читает новости, которые он хотел прочитать</li>
<li>Нужно управлять действиями человека на сайте, не заставляя его осознавать это</li>
<li>Не использовать более двух "выделенных" (ярких, с необычным фоном, с картинкой "new") блоков на странице</li>
<li>Вместо привлечения внимания миганием лучше использовать движение, это меньше раздражает сетчатку. Но и движение нужно использовать с умом.</li>
<li>В дизайне новостных сайтов важны приоритеты, нельзя отдавать новости как в блоге, лентой, это просто невкусно (приоритетность новостей видно, например на <a href="http://korrespondent.net/">Korrespondent</a>)</li>
</ul>
Вообще осталось дико приятное впечатление от людей, журналисты очень интеллигентный и внимательный народ. Хотя, разве они могли быть другими? ) Правда, их все время волновало в перерыве, что кого-то там посадили на 15 суток...
<p>Кроме того нам рассказали об истории создания дизайна для Зеркала Недели, где обосновали практически все дизайнерские решения, а так же рассказали о внутреннем устройстве этой газеты. Вышло очень интересно, несмотря, а может даже благодаря тому, что я верстал этот проект.</p>
<h3>Цитаты</h3>
<blockquote>Если программист говорит, что он не может это сделать, скорее всего ему лень искать: "Я не знаю как это сделать, а пока буду искать решение, это станет уже неактуально. Пойду-ка лучше пропатчу свой Линукс или поиграю в Контру"</blockquote>
<blockquote>Моя девушка живет в Беларуси, и поверьте, это самая привлекательная в мире причина любить вашу страну</blockquote>
<h3>Фото</h3>
<p class="img"><img src="http://cssing.org.ua/pic/genn/1.jpg" width="500" height="344" alt="" /><span>Журналисты</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/genn/2.jpg" width="500" height="377" alt="" /><span>Было много вопросов</span></p>
<p class="img"><img src="http://cssing.org.ua/pic/genn/3.jpg" width="450" height="639" alt="" /><span>Идеальный новостной сайт (так же обратите внимание на два (!) макбука)</span></p>
Дополнительную информацию можно почерпнуть на блоге Геннадия и в последнем отчете о тренинге:
<ul>
<li><a href="http://mega.genn.org/2008/01/19/internews-training/">Отчет о тренинге в блоге у Genn'a</a></li>
</ul>
Тренинг получился клёвым и веселым =)
Спасибо организаторам! Спасибо тренеру! Побольше бы таких мероприятий Киеву.
Прага
2008-01-17T00:00:00Z
https://cssing.org.ua/2008/01/17/praha/
<p>Занесло меня в Прагу, немного фоток и впечатления.</p>
<!--more-->
<h3>Прага</h3>
Город просто замечательный! =) Приезжать лучше с девушкой, иначе сопьетесь в кабаках. Кол-во их огромное, и пиво везде вкуснейшее. Часто в том же здании и приготовленное. Лучшие заведения за поездку "<a href="http://www.ufleku.cz/">U Fleku</a>" и "<a href="http://www.cafelouvre.cz/">Cafe Louvre</a>" (говорят, там снимали Иллюзиониста).
<p>В целом: маленький, аккуратный, романтичный и чем-то родной город (возможно, из-за кучи русских туристов и продавцов?). Но, скорее Европа чем мы.</p>
<p class="img"><img src="https://cssing.org.ua/pic/praha/1.jpg" width="500" height="375" alt="Фотки из поездки в Прагу 2008" /><span>Кто не хочет тут жить?!</span></p>
<p class="img"><img src="https://cssing.org.ua/pic/praha/2.jpg" width="500" height="344 alt=" Фотки="" из="" поездки="" в="" Прагу="" 2008""="" /><span>С Карлова моста</span></p>
<p class="img"><img src="https://cssing.org.ua/pic/praha/3.jpg" width="500" height="349" alt="Фотки из поездки в Прагу 2008" /><span>Вид с моста</span></p>
<p class="img"><img src="https://cssing.org.ua/pic/praha/4.jpg" width="400" height="533" alt="Фотки из поездки в Прагу 2008" /><span>Кривые дома! (или руки?;-))</span></p>
<p class="img"><img src="https://cssing.org.ua/pic/praha/5.jpg" width="500" height="375" alt="Фотки из поездки в Прагу 2008" /><span>Ночная Прага</span></p>
<p class="img"><img src="https://cssing.org.ua/pic/praha/6.jpg" width="500" height="353" alt="Фотки из поездки в Прагу 2008" /><span>Где-то возле Карлова моста</span></p>
<p class="img"><img src="https://cssing.org.ua/pic/praha/7.jpg" width="450" height="600" alt="Фотки из поездки в Прагу 2008" /><span>Обычная улица</span></p>
<p class="img"><img src="https://cssing.org.ua/pic/praha/8.jpg" width="500" height="401" alt="Фотки из поездки в Прагу 2008" /><span>КПИ? Мехмат?</span></p>
Набор удивлений:
<ul>
<li>Цена за весь заказ в кафе не будет равняться сумме цен за блюда</li>
<li>Тихие трамваи, такие же как у нас, но, ТИХИЕ</li>
<li>Ужасни черстви потравыны — таки действительно, красивая свежая еда</li>
<li>В некоторых кабаках, когда вы зайдете, вам могут не спрашивая поставить пиво</li>
<li>Можно выпить 4 литра темного Козела, и почти не опьянеть, просто пиво такое</li>
<li>Чешки красивые</li>
<li>Украинки красивее =)</li>
</ul>
<h3>Что я там забыл зимой?</h3>
Об <a href="http://envision-event.com/">этом</a> в следующем посте. Решил разделить из-за обилия фото. <a href="http://genn.org/">Ездил</a>, <a href="http://a1.ua/">кстати</a>, <a href="http://crazydima.livejournal.com/">не один</a>.
Как найти баг в вёрстке
2008-01-08T00:00:00Z
https://cssing.org.ua/2008/01/08/find-a-bug/
<p>Как часто вы тратите часы чтобы понять почему же эта эта вредная навигация сползла? Этот способ позволяет найти причину практически не думая за 5 минут. Наверное почти все пользовались этим методом поиска багов в вёрстке.<!--more--></p>
<h3>Зачем</h3>
Очень много времени в верстке уходит на решение багов, и поиски их причин. Если вы чувствуете, что можете потратить более 20 минут на поиски причины — лучше смело использовать этот метод, он редко отнимает более 5-10 минут. Впрочем, менее 5 минут, он тоже редко отнимает. И это его единственный недостаток.
<h3>Когда</h3>
Когда "сползла колонка", или "это гадское меню опять отображается не так как должно". Или еще тысячи глюков, которые вы наблюдаете и не можете понять, что заставляет сайт отображаться именно так. И какая строка в коде это делает.
<h3>Идея</h3>
Метод иногда называют методом дихотомии, известна так же классическая задача про поимку льва в пустыне, а иногда его еще называют <a href="http://incat.narod.ru/m1.htm">методом деления отрезка пополам</a>.
<p>Принцип очень простой, чтобы найти, например, точку на отрезке:</p>
<ol>
<li>Делим отрезок пополам, определяем в какой половине содержится наша точка</li>
<li>Повторяем процедуру для полученной половины отрезка с точкой</li>
</ol>
И так, пока не получим нужную точность.
<p>А так это выглядит в задаче про поимку льва в пустыне:</p>
<blockquote>Делим забором пустыню пополам. Затем та часть, в которой остался лев, снова перегораживается посередине, и так далее — до тех пор, пока лев не окажется в тесном загоне.</blockquote>
<p>Алгоритм в приложении к вёрстке мало отличается от классики. Львом будет кусочек кода делающий глюк. Пустыней — весь код.</p>
<h3>Суперпупералгоритм</h3>
<ol>
<li>Удаляем половину или просто большой кусок HTML (CSS)
<ul>
<li>Если глюк остался виден, продолжаем процедуру для оставшегося кода</li>
<li>Если глюк исчез, возвращаем удалённый код и повторяем процедуру для него (удалив другую половину)</li>
</ul>
</li>
</ol>
В результате останется только "глючный" HTML, обычно это пара блоков связанных с глюком.
<strong>Тоже самое</strong> повторяем для CSS кода. Если в HTML еще нужно было соблюдать иерархию, то в CSS можно смело удалять по половине кода.
<p>Таким образом, в конце у вас останется несколько строк CSS и только те блоки в HTML, которые составляют глюк. При таком количестве кода вам будет трудно не найти баг или опечатку.</p>
<p>Иногда проще начинать с CSS, но суть остаётся той же самой. Удаляем код, до тех пор пока не найдём место в нем вызывающее баг.</p>
<p>В то же время, обращаться за помощью на форумы лучше именно с этой "подчищенной" страничкой, без кучи лишнего кода, в котором всем разбираться лень.</p>
<p>Проделывать это все рекомендуется с копией кода. Чтобы можно было смело удалять и не беспокоиться.</p>
<p>В результате мы точно определяем строку кода, или кусочек HTML являющийся триггером для бага, а это уже полдела.</p>
<h3>В конце</h3>
Даже странно почему об этом способе так мало написано(может потому что это слишком просто?). Надеюсь кому-то он поможет, меня не раз выручал. Вдобавок, такие действия помогают начинающим лучше разобраться и прочувствовать как работает этот CSS. =) А при поиске глюка в чужом коде — это практически единственный путь.
<p>Кстати, только с помощью этой методики удалось обнаружить <a href="http://cssing.org.ua/2006/12/23/ie-css-russian-comments-bug/">странный баг с кодировкой CSS файлов</a>.</p>
<p>Конечно же рад услышать Ваши способы решения своих проблем!</p>
Зимняя Евпатория
2008-01-07T00:00:00Z
https://cssing.org.ua/2008/01/07/winter-in-yevpatoriya/
<p>На <a href="http://cssing.org.ua/2005/11/22/sea-yevpatoriya/">пирсе</a> не снег — замёрзшее море. Я не знаю что в этом фото особенного, но...<br />
<img src="https://cssing.org.ua/pic/sea2.jpg" alt="зимняя евпатория" /></p>
<!--more-->
<p>На утро стало повеселее правда:</p>
<p><img src="https://cssing.org.ua/pic/sea3.jpg" alt="зимняя евпатория" /></p>
<p><img src="https://cssing.org.ua/pic/sea4.jpg" alt="зимняя евпатория" /></p>
Так выглядит море при -11° в 4 часа дня.
cssing 2007
2007-12-26T00:00:00Z
https://cssing.org.ua/2007/12/26/cssing-2007/
<p>Традиция, которой уже два года. Самые полезные и интересные статьи на этом блоге за ушедший год.</p>
<!--more-->
<h3>В хронологическом порядке</h3>
<ul>
<li><a href="http://cssing.org.ua/2007/02/25/equal-height-columns/">Колонки “одинаковой” высоты с разделителем</a>
Красивая идея, связанная с отрицательными отступами. Один из вариантов колонок одинаковой высоты
</li>
<li><a href="http://cssing.org.ua/2007/03/28/london-designertopia-2007/">London, Designertopia 2007</a>
Мой отчет о конференции в Лондоне посвященной новым завораживающим технологиям от Microsoft. Интересный доклад футуролога и фантаста
</li>
<li><a href="http://cssing.org.ua/2007/04/07/print-version-with-javascript/">Печатная версия с Javascript</a>
Вариант "быстрого" переключения странички в печатную версию. Похожее, как оказалось, было и на алистапарте, но ведь приятно повторять чужие гениальные идеи?
</li>
<li><a href="http://cssing.org.ua/2007/04/24/rit-2007-moscow/">РИТ-2007, Москва</a>
Отчет об одной из первых российских конференций собравших веб-разработчиков. Было интересно
</li>
<li><a href="http://cssing.org.ua/2007/04/26/another-css-valign-method/">Еще один способ вертикального выравнивания в CSS</a>
Новый для меня способ вертикального выравнивания для IE, довольно практичный по сравнению со <a href="http://cssing.org.ua/2005/07/14/vertical-align-middle">старыми</a>
</li>
<li><a href="http://cssing.org.ua/2007/06/27/imac/">HTML+CSS+HTML+CSS+ … =MAC!</a>
Моё мак-рождение! Сам пост — пустышка. А вот в комментариях много полезных советов для новоявленных мак-юзеров. Продолжение советов в <a href="http://cssing.org.ua/2007/07/02/4days-on-a-mac/">следующем посте о маке</a>, и <a href="http://cssing.org.ua/2007/12/14/6-monthes-on-a-mac/">завершающем полугодовом отчете</a>
</li>
<li><a href="http://cssing.org.ua/2007/07/14/ratmir-timashev-seminar/">Семинар Ратмира Тимашева</a>
Основные мысли и фотографии с семинара с интереснейшим человеком, ныне инвестором, а в прошлом предпринимателем
</li>
<li><a href="http://cssing.org.ua/2007/09/30/non-symmetric-site/">Несимметричный фон на центрированном сайте</a>
Простая идея для реализации асимметричных сайтов, оказалось не все слышали...
</li>
<li><a href="http://cssing.org.ua/2007/10/09/platforma-web/">Платформа “WEB”, 28 сентября, Киев</a>
Конференция от Microsoft, на которой я был в качестве докладчика. Рассказывал о Silverlight. Мои впечатления, доклад и краткое содержание миниконференции
</li>
<li><a href="http://cssing.org.ua/2007/10/15/blogcamp-2007/">Blogcamp 2007</a>
Неконференция блоггеров! Мой отчет об этом необычном событии прошедшем в Киеве
</li>
<li><a href="http://cssing.org.ua/2007/10/24/html-quality/">Оценка качества верстки</a>
Мои критерии "любви" к чужому HTML. В комментариях много интересных мыслей
</li>
<li><a href="http://cssing.org.ua/2007/11/03/geeky-html-fun-by-genn/">Эмо-стихотворение от лица броузера</a>
Genn зажигает своими HTML-стихами. =)
</li>
<li><a href="http://cssing.org.ua/2007/11/11/client-side-2007/">ClientSide 2007, 6-7 ноября, Москва</a>
Вторая конференция на которой я читал доклад. На этот раз о доступности. Очень хотелось поднять эту тему на профильной для меня конфе. Доклад, впечатления, фотки
</li>
<li><a href="http://cssing.org.ua/2007/11/15/hacking-safari/">Как написать CSS только для Safari</a>
CSS-фильтры для Сафари, часть работает, часть не очень. Но иногда без них никак
</li>
<li><a href="http://cssing.org.ua/2007/11/30/you-are-genius/">Кляксы</a>
Простая теория, которую я придумал для описания гениальности и таланта людей
</li>
<li><a href="http://cssing.org.ua/2007/12/06/expression-optimization/">Одноразовый expression</a>
О том как заставить выполняться expression(кусочки джаваскрипта для IE) один раз
</li>
<li><a href="http://cssing.org.ua/2007/12/21/gogo-mf/">Микроформаты в жизнь</a>
Очередная попытка рассказать всем, что микроформаты это просто. А так же мои мысли о перспективах идеи
</li>
<li><a href="http://cssing.org.ua/2007/12/25/make-it-faster/">Как верстать быстрее</a>
Мысли о комфортной и быстрой верстке, никаких чудес</li>
</ul>
<h3>Еще</h3>
Тем кто недавно читает мой блог, возможно будет интересно посмотреть "сливки" за прошлые годы:
<ul>
<li><a href="http://cssing.org.ua/2005/12/27/cssing-highlights-2005/">Лучшее за 2005</a></li>
<li><a href="http://cssing.org.ua/2006/12/28/cssing-2006/">Лучшее за 2006</a></li>
</ul>
<h3>!</h3>
Спасибо тем кто меня читает! Всех вас я считаю главной ценностью этого блога. И надеюсь, у меня получается вас за это отблагодарить полезной информацией. :-)
<p><strong>С наступающим всех! =) Успехов Вам! И отличных праздников!</strong></p>
Как ускорить вёрстку
2007-12-24T00:00:00Z
https://cssing.org.ua/2007/12/24/make-it-faster/
<p>Несколько идей помогающих мне верстать быстрее и приятнее.</p>
<!--more-->
<p>Я обожаю что-либо обобщать, а в последнее время так много занимался своим любимым хобби(вёрсткой), что решил поделиться простыми идеями помогающими мне делать это быстро, и уставать меньше.<br />
Всё это субьектив фрилансера, который работает дома, и в основном верстает сайты с нуля.</p>
<h3>Войти в транс</h3>
Обычно вход в транс происходит после 15-30 минут непрерывного труда, без ответов в аську и других дел. Это такое чудесное состояние, когда вы полностью в вёрстке, и все что есть в этом мире, это текстовый редактор и Фотошоп (да, я фанат).
Состояние очень похоже на "счастье", максимальная самоактуализация, LSD и ecstasy курят.
<p>Общепринято, что идеальная работа должна происходить блоками по 90 минут. Обязательно нужно делать перерывы каждые полтора часа, иначе можно сгореть. Хоть бы самому не забыть это делать :)</p>
<h3>Разделять HTML и CSS</h3>
Удобно разделить весь процесс кодинга на этапы HTML+CSS. Хотя бы потому, что на обоих этапах нужны разного рода навыки, хоткеи и мыслительные процессы.
<p>Фактически, 99% HTML можно написать заранее, просто глядя на дизайн. Затем, я обычно делаю небольшой перерыв и принимаюсь за CSS. Часто перерывом служит ночь. Во сне можно придумать как сверстать самые трудные места дизайна. Я уже давно привык решать трудные задачи во сне.</p>
<p>У меня при таком разделении на HTML и CSS вёрстку остается ощущение легкости после работы. Да и мозгу как-то попроще, меньше нужно переключаться. Много маленьких задач лучше чем одна большая.</p>
<h3>От общего к деталям</h3>
Начинать легче с общего. Я обычно начинаю с построения лэйаута сайта. То бишь, некоего общего каркаса. Затем постепенно начинаю спускаться в детали.
<p>Когда после 5 строк в CSS файле, у вас уже трехколоночный центрированный сайт. Создается ощущение, что сайт вобщем-то готов, только нужно доделать детали.</p>
<p>Такой же подход, кстати, используется и при проектировании интерфейсов — человеку первым полем дают заполнить самое важное(e-mail при регистрации, например), после чего все остальные поля кажутся просто формальностями.</p>
<h3>"Фреймворки"</h3>
Чисто психологически проще начинать не с нуля, не создавать все файлы и папки, а использовать некий шаблон. Я например ощущаю, что переименовывая папку "template" в "novaya-verstka", я уже практически сделал полдела.
<p>Проще самому выработать свой стартовый шаблон, просто посмотрев, что вы делаете в начале каждого проекта. Так, например, сделал я.</p>
<p>Последний год стали очень популярными так называемые CSS-фреймворки, можно использовать один из них:</p>
<ul>
<li><a href="http://css-framework.ru/">CSS-Framework.ru</a> — русский фреймворк, поддерживает и разрабатывает <a href="http://agat.in/">Алексей Романовский</a> </li>
<li><a href="http://code.google.com/p/blueprintcss/">Blueprint</a> — один из самых старых фреймворков</li>
<li><a href="http://developer.yahoo.com/yui/grids/">YUI Grids CSS</a> — мощнейший инструмент, преопределенные имена классов для практически всех видов лейаутов</li>
</ul>
У меня они не прижились, и я использую просто набор файлов, о котором <a href="http://cssing.org.ua/2005/08/24/my-xhtml-template/">я уже писал</a>. Самую новую версию моего "фреймворка" <a href="http://cssing.org.ua/template.zip">можно скачать отсюда</a>. Он настолько гибкий(в нем почти ничего нет), что может даже кому-то пригодится.
<p>Помните, лучший фреймворк — ваш фреймворк. Эта идея подтверждается во всех отраслях.</p>
<h3>Хоткеи или куски готового кода</h3>
Трудно переоценить возможности современных текстовых редакторов, главное не забывать их использовать.
Раньше я редко обращал внимание на использование хоткеев и писал много руками, однако Textmate все изменил.
К примеру у меня стоят на таб-хоткеях следующие кусочки кода:
<ol class="code">
<li><!-- BEGIN #name --></li>
<li><div class="name"></li>
<li></li>
<li></div></li>
<li><!-- END #name --></li>
</ol>
Это помогает оставлять код легко читаемым, и соответственно, ускоряет внедрение сайта программистами. Для таких сниппетов я использую: div и нажатие TAB.
<ol class="code">
<li><form action="/"></li>
<li class="tab"><fieldset></li>
<li class="tabtab"><legend>name</legend></li>
<li class="tabtab"><p><label for="ff1">Имя</label> <input type="text" id="ff1" /></p></li>
<li class="tab"></fieldset></li>
<li></form></li>
</ol>
Список ссылок — атрибут практически 90% сайтов на сегодня:
<ol class="code">
<li><ul></li>
<li class="tab"><li><a href="#">name</a></li></li>
<li></ul></li>
</ol>
По опыту — это три самые часто встречающиеся для всех сайтов кусочка, стоит поставить их на горячие клавиши, вы уже сэкономите несколько минут жизни. Но никто не запрещает сделать 10 хоткеев.
<h3>Не верстать два сайта в один день</h3>
Во-первых, при такой скорости, вы станете неприлично богаты.
А во-вторых, у меня лично начинает все путаться в голове, пытаешься вписать классы из одной вёрстки в код другой... Вобщем, это не для слабонервных.
<h3>В конце</h3>
Разумеется, все это вещи помогающие лично мне. Но как часто мы осознаём, что очень похожи друг на друга...
Был бы рад услышать Ваши приемы ускоряющие работу!
Микроформаты в жизнь!
2007-12-21T00:00:00Z
https://cssing.org.ua/2007/12/21/gogo-mf/
<p>Мои(и не только) мысли о микроформатах. А так же нескольно примеров проектов, в которых я применял микроформаты.</p>
<!--more-->
<h3>Что это</h3>
Всего лишь предопределенные имена классов, и тагов. Не более того. Смотрите сами, ХТМЛ до микроформатов:
<ol class="code">
<li><dd></li>
<li class="tab">Юрий Артюх, </li>
<li class="tab">+38 096 970-6428,</li>
<li class="tab"><a href="mailto:...">akella.a@mail.com</a></li>
<li></dd></li>
</ol>
И после:
<ol class="code">
<li><dd class="vcard"></li>
<li class="tab"><span class="fn">Юрий Артюх</span>,</li>
<li class="tab"><span class="tel">+38 096 970-6428</span>, </li>
<li class="tab"><a class="email" href="mailto:...">akella.a@mail.com</a></li>
<li></dd></li>
</ol>
<p>Добавилися класс показывающий тип формата — vcard. Спаны, для того чтобы "машины" разобрались где телефон, имя и адрес. Вот и все. Делов то. Зато какие перспективы!</p>
<h3>Зачем это</h3>
Представьте себе 1970 год. Вся информация об организациях хранится в бумажном каталоге, "Желтые страницы" например. Обновляется раз в год, а то и реже. А потом еще полгода чтобы издать.
<p>Далее, 2000й год, уже есть сайт, на который сотни модераторов, или фирмы сами, добавляют данные о себе. После чего пользователь может на сайте получить всё ту же информацию, что из желтых страниц. Которая, однако редко обновляется. Попробуй уследи за адресами сотни тысяч фирм..</p>
<p>А теперь представьте, год 2010й. Каждая фирма обновляет свою информацию у себя на сайте. Где она разметила ее в hcard. Таким образом, при наличии поисковика по формату, мы будем иметь всё те же "Желтые страницы", но <strong>обновляющиеся моментально</strong>. (я принимаю интернетизацию общества за данность).<br />
Фирмам не нужно нигде регистрироваться, просто обновить инфо на своем сайте!</p>
<p>По сути это шаг от централизованных систем к распределенным. Тот же веб2.0 в некотором смысле шагнул, от централизованной генерации контента, к распределенной. И этот тренд видно практически во всех областях. Это наводит на мысли о правильности пути микроформатов.</p>
<p>В примере выше я упоминал формат hcard, но попробуйте представить распределенную систему оценок для фильма, или подписку прямо на страничке с форматом hAtom, без поиска RSS-каналов. Или обновление своей адресной книги, или то чудесное применение, что <a href="http://softwaremaniacs.org/blog/2007/03/25/cicero-openid-hcard/">придумал Иван Сагалаев</a>.</p>
<p>Примерно так бы я распределил сервисы и их аналоги по сущностям в микроформатах (на самом деле, мне просто нравится новый дизайн таблиц на блоге):</p>
<table class="data">
<caption></caption>
<thead>
<tr><th> </th><th>Цетрализованная система</th><th>Распределённая</th></tr>
</thead>
<tbody>
<tr>
<th>Новости</th> <td>Feedburner, news.google.com</td><td>hAtom</td>
</tr>
<tr>
<th>Адресная книга</th> <td>plaxo, linkedin, facebook (vkontakte)</td><td>hCard + XFN</td>
</tr>
<tr>
<th>Календари</th> <td>upcoming, ckopo.in.ua</td><td>hCalendar</td>
</tr>
</tbody>
</table>
<h3>Микроформаты и Wordpress</h3>
Как пример микроформатизации можно рассмотреть Wordpress, хотя практически все новые темы выходят с учетом hAtom. Тем не менее, сейчас у меня вот такой кусочек кода в /wp-content/wp-themes/wpthemename/index.php выводит список заметок:
<ol class="code">
<li><div class="hentry">
</li><li class="tab"><h2 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="пермалинк <?php the_title(); ?>">...</a></h2></li>
<li class="tab"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO'); ?>"><?php the_time('j F, Y') ?></abbr></li>
<li class="tab"><div class="entry-summary"><?php the_content('читать дальше'); ?></div></li>
<li></div></li>
</ol>
Результатом будет такой HTML, я выделил жирным все, что добавлено для микроформатов:
<ol class="code">
<li><div class="hentry"></li>
<li class="tab"><h2 <strong>class="entry-title"</strong>><a href="#" <strong>rel="bookmark"</strong>> ... </a></h2></li>
<li class="tab"><abbr <strong>class="published"</strong> title="<strong>2007-12-06T16:36:10+0200</strong>">6 октября, 2007</abbr></li>
<li class="tab"><div <strong>class="entry-summary"</strong>>Выдержка из поста</div></li>
<li></div></li>
</ol>
Как видно, всего лишь классы. Для даты принят стандартный формат <strong><abbr title="2007-12-06T16:36:10+0200"</strong>, вдобавок вся новостная лента должна быть обернута в див с классом <code>hfeed</code>.
<ul>
<li><a href="http://microformats.org/wiki/hatom">Спецификация hAtom (draft)</a></li>
<li><a href="http://microformats.org/wiki/hcard">Спецификация hcard</a></li>
</ul>
<h3>XFN</h3>
Так называется формат нагружающий смыслом ссылки. XFN — XHTML Friends Network. Здесь вообще все элементарно, вот одна из ссылок в правой колонке моего блога:
<ol class="code">
<li><a href='http://uggallery.audiopeace.ru/' rel='<strong>acquaintance met colleague</strong>'>Александр Исаков</a></li>
</ol>
Что означает, что я знаком с этим человеком(acquaintance), встречал его вживую(met) и являюсь его коллегой(colleague). Подробнее можно почитать на <a href="http://gmpg.org/xfn/">главной странице XFN</a>
<h3>В конце</h3>
Несмотря на то, что идее уже третий год, и даже Билл Гейтс считает ее удачной, она(идея) все еще в развивающемся состоянии. И думаю во многом это зависит от разработчиков.
Изучение микроформатов все же является неким риском. Никто не гарантирует во что это все выльется. Тем не менее, я их использую в большинстве своих проектов уже сейчас. Потому что это просто.
<ul>
<li><a href="http://microformats.org/">microformats.org</a> — главный ресурс где и находится <a href="http://microformats.org/wiki/">wiki c полным описанием</a> и возможностью проапдейтить формат или задать вопрос</li>
<li><a href="http://microformatique.com/optimus/">Этому сервису</a> можно скормить УРЛ странички, он же выделит на ней все известные микроформаты, <a href="http://microformatique.com/optimus/?uri=http://cssing.org.ua">вот так например</a>, к сожалению пока там легки проблемы с кириллицей =(. Но автор проекта Дмитрий Барановский уверен это поправит.</li>
<li><a href="http://blog.codeeg.com/tails-firefox-extension-03/">Официальная страничка плагина Tails для Firefox</a> и <a href="https://addons.mozilla.org/en-US/firefox/addon/2240">плагин для экспорта микроформатов</a> в другие приложения</li>
<li><a href="http://lucidplot.com/2007/07/12/microformats-kill-facebook/">Микроформаты убьют Facebook</a></li>
</ul>
<p>Ваши мысли о перспективах микроформатов приветствуются!</p>
Полгода на маке
2007-12-14T00:00:00Z
https://cssing.org.ua/2007/12/14/6-monthes-on-a-mac/
<p>Устоявшийся софт, впечатления от работы и прочие мысли из-за этой стороны баррикад.</p>
<!--more-->
<h3>Софт</h3>
Как бы там ни пользовали аргумент о недостатке софта, я сумел найти все, что мне было нужно и даже чуть больше. На данный момент список выглядит так:
<h4><a href="http://macromates.com/">Textmate</a> — текстовый редактор</h4>
<p class="img"><img src="http://cssing.org.ua/pic/macsoft/textmate.png" alt="textmate скриншот" height="306" width="421" /><span>Textmate</span></p>
Просто отличный редактор, после постепенной кастомизации под свои привычки (хоткеи, сниппеты) становится просто мощнейшим инструментом оптимизации труда кодера. Честно признаюсь, мне просто не хватает мозга чтобы использовать все его возможности, я их могу только осознавать. Код стал писать примерно в полтора раза быстрее чем в Notepad++. Не то чтобы мегаускорение, но вполне ощутимо.
<p>Есть еще <a href="http://www.panic.com/coda/">Coda</a>, <a href="http://macrabbit.com/cssedit/">CSSedit</a>, <a href="http://www.barebones.com/products/textwrangler/">textwrangler</a> и куча всего красивого, но все это противоречит моим представляениям о минимализме.</p>
<h4><a href="http://cyberduck.ch/">Cyberduck</a> — FTP клиент</h4>
<p class="img"><img src="http://cssing.org.ua/pic/macsoft/cyberduck.png" alt="cyberduck скриншот" height="254" width="427" /><span>Cyberduck</span></p>
После привыкания оказался отличным ФТП менеджером. То, что я ценил больше всего — закладки, оказались организованными даже удобнее чем в SmartFTP(идеальном для меня). Работает шустро и надежно, последние две мечты: несколько одновременных сессий, и понадёжнее запоминание директорий в которых я был последний раз.
<p>Вдобавок, как видно по иконкам на скриншоте, клиент удобно интегрируется с Textmate! Большего мне уже и не нужно. Я не feature-hunter =)</p>
<h4><a href="http://www.opencommunity.co.uk/vienna2.php">Vienna</a> — RSS клиент</h4>
<p class="img"><img src="http://cssing.org.ua/pic/macsoft/vienna.png" alt="vienna скриншот" height="287" width="427" /><span>Vienna</span></p>
Дизайн стандартный для RSS читалок (а ля аутлук), сам по себе простой и быстрый. Без лишних фич. И пересаживаться за джаваскрипт интерфейсы с него не хочется. Я перепробовал кучу RSS ридеров под виндой, все они мало чем друг от друга отличаются. Vienna пожалуй можно уличить в не до конца маковском подходе в дизайне, но в целом он на 100% справляется со своей задачей.
<h4><a href="http://www.parallels.com/">Parallels</a> — Windows</h4>
<p class="img"><img src="http://cssing.org.ua/pic/macsoft/macwin.jpg" alt="Windows в Parallels" height="207" width="421" /><span>Windows на Mac OS</span></p>
А вот так выглядит запущенная в виртуальной машине Parallels Windows XP. Чудесное спасение для тестирования верстки под ИЕ.
<h4><a href="http://quicksilver.blacktree.com/">Quicksilver</a> и namely — запускалки</h4>
<p class="img"><img src="http://cssing.org.ua/pic/macsoft/quicksilver.jpg" alt="Quicksilver скриншот" height="276" width="401" /><span>Quiksilver</span></p>
Под виндой практически не имел с ними дела, однако под маком вошел во вкус. Что это такое?
Примерно так: хочу я запустить Cyberduck.
Жму Control+Spacebar(хоткей для Quicksilver) затем на клавиатуре "Сy", уже после буквы "C" можно нажимать на Enter и запустится Cyberduck угаданный по первой букве. Итого: 4 касания клавиатуры для запуска практически любого софта. Без мышки.
<p>По ощущениям очень напоминает "~" + "say hf" + "Enter" (я это сочетание в <abbr title="Counter Strike">CS</abbr> набирал <strong>очень</strong> часто)</p>
<p>Quicksilver на самом деле помогает решать еще много других стандартных задач: ресайз картинок, отсылание файла по почте и т. п. О них можно прочитать например в статье <a href="http://www.lifehacker.com.au/tips/2007/11/15/top_10_quicksilver_plugins.html">"10 плагинов к Quicksilver"</a>.<br />
Его более простой аналог - Namely, позволял запускать только программы, однако весь его интерфейс уже достоин аплодисментов:</p>
<p class="img"><img src="http://cssing.org.ua/pic/macsoft/namely.png" height="98" width="363" alt="namely скриншот" /><span>Namely</span></p>
Говорят в Леопарде родной поиск "Spotlight" уже решает задачу запуска приложений, но не суть важно. Я все ещё на Tiger. И Quicksilver, как мне кажется, нашел наиболее оптимальное интерфейсное решение для ланчеров.
<h4>Разное</h4>
Сёрфлю: Safari 3.0.
Мессенжер: Adium (выбор небольшой, надо сказать).
mp3: iTunes (кто бы мог подумать?).
Видео: VLC.
<h3>В целом впечатления</h3>
Я очень рад что решился купить мак =). Я наконец избавился от всех старых виндовых привычек и наслаждаюсь жизнью. Ни о чем не жалею. С ним я сблизился гораздо сильнее чем с PC. Абсолютно нечего бояться переходить. Я писал о непривычной мышке - привык, не стоит извращаться пытаясь внедрить сенсу с винды в маке, просто расслабьтесь и через неделю вы привыкнете к мышке.
<p>Свой Windows ноутбук я подарил.</p>
<p>Похоже я в секте.</p>
<p>Буду рад если маководы поделятся своим софтом =). Вопросы из-за той стороны баррикад приветствуются.</p>
<ul>
<li><a href="http://bestmacsoftware.org/">Лучший софт под Mac OS</a></li>
</ul>
Одноразовый expression
2007-12-06T00:00:00Z
https://cssing.org.ua/2007/12/06/expression-optimization/
<p>Все уже часто сталкивались с специфическими для IE expressions, однако не все знают (я например не знал), что их можно оптимизировать. Об одном из приемов и пойдет дальше речь.</p>
<!--more-->
<h3>Проблема</h3>
Наверняка многие хакеры замечали, что когда expression становится много, то сайт начинает притормаживать в IE. Оно и понятно — они ведь исполняются при каждом действии на странице, будь то клик, наведение мышки, или ресайз экрана. <a href="http://cssing.org.ua/examples/expression/bad.html">Cмотрите сами</a>. Для некоторых скриптов так и должно быть (min-width например), другим же достаточно одного выполнения(PNG fix, :first-child etc). О том как заставить их исполняться только один раз при загрузке и идет дальше речь.
<h3>Решение</h3>
Все решения используют один и тот же прием. Есть некий "флаг", при наличии которого expression выполняется, скрипты же пытаются при первом же исполнении этот флаг убрать.
<h3>Вариант решения</h3>
Первый вариант выглядит так:
<ol class="code">
<li>jscript: expression(</li>
<li class="tab">this.p ? 0 : (</li>
<li class="tabtab">//а здесь пишем нужный нам код,</li>
<li class="tabtab">this.p = 1</li>
<li class="tab">)</li>
<li>);</li>
</ol>
В данном случае в качестве флага используется абстрактное и несуществующее в спецификации свойство "p". При первом выполнении, переменной p будет присвоена 1, а также выполнено наше действие. Таким образом при каждом следующем выполнении скрипта будет выполняться только <code>this.p = 0</code>. Что гораздо быстрее любых других операций.
<h3>Яндекс вариант</h3>
Вариация(false true переставили местами) на тему этого способа используемая в верстке Яндекса:
<ol class="code">
<li>b:expression(</li>
<li class="tab">!this.a?</li>
<li class="tabtab">(this.a=1, (this.previousSibling?this.innerHTML='&nbsp;&middot;' + this.innerHTML:0)):</li>
<li class="tabtab">0</li>
<li class="tab">);</li>
</ol>
В частности, этот скрипт ставит точки-разделители перед всеми "чайлдами", кроме первого — такая вот эмуляция first-child.
Скорее всего принадлежит руке большого и уважаемого мною профессионала в верстке — <a href="http://vitaly.harisov.name/">Виталия Харисова</a>
<h3>Второй тип, я использую</h3>
Есть и второй тип, используется CSS свойство, которое потом в самом expression "сбрасывается", так, что expression при первом выполнении как бы "удаляет" сам себя:
<ol class="code">
<li>background-image:expression(</li>
<li class="tab">this.runtimeStyle.backgroundImage = 'none', </li>
<li class="tab">//а здесь пишем нужный нам код</li>
<li>);</li>
</ol>
<code>background-image</code> тут играет лишь роль флага, на самом деле скриптить таким способом можно все, что вам нужно, как-то так выглядит эмуляция :first-child:
<ol class="code">
<li>background-image:expression(</li>
<li class="tab">this.runtimeStyle.backgroundImage = 'none', </li>
<li class="tab">this.previousSibling?false:this.className += 'first-child'</li>
<li>);</li>
</ol>
Когда мы присваиваем свойству <code>none</code>, соответственно и expression перестает исполняться.
<p>Безопасно вместо <code>background-image</code> использовать всякие редкие свойства вроде <code>azimuth</code>.</p>
<h3>Изучать дальше</h3>
Вообще за поднятую тему оптимизации expression спасибо <a href="http://lusever.ru/">Павлу Корнилову</a> выступившему с соответствующим докладом на ClientSide 2007.
<p>Следует помнить, что одноразовые expression нельзя применять для min-width, min-height и прочего. По понятным причинам подсчеты произведутся только при загрузке страницы.</p>
<ul>
<li><a href="http://cssing.org.ua/examples/expression/">Пример трех одноразовых expression</a> а так же <a href="http://cssing.org.ua/examples/expression/bad.html">пример одного обычного</a></li>
<li><a href="http://lusever.ru/proceedings/thin_css/index.html">Текст доклада Корнилова на ClientSide</a> и <a href="http://lusever.livejournal.com/15868.html">жж-пост про это</a>, рекомендую ознакомиться с презентацией(внизу текста на его сайте есть линк)</li>
<li><a href="http://komodomedia.com/blog/index.php/2007/11/05/css-png-image-fix-for-ie/">PNG fix</a> использующий прием оптимизации, в комментариях есть несколько способов оптимизации</li>
<li><a href="http://harisov.livejournal.com/58661.html">PNG прозрачность у Харисова</a> с использованием "одноразовости"</li>
</ul>
Кляксы
2007-11-30T00:00:00Z
https://cssing.org.ua/2007/11/30/you-are-genius/
<p>Простая модель, которую я придумал, чтобы показать что все люди гениальны. Без исключений. Это не про CSS.</p>
<!--more-->
<h3>?</h3>
Я всегда считал и буду считать, что все люди в чем-то талантливы. Кто-то классно водит машину, кто-то умеет решать дифференциальные уравнения в уме, другие очень быстро завязывают шнурки, а кто-то лучше всех в мире готовит кофе. И вот однажды, лет 8 назад, пришла в голову забавная метафора косвенно это показывающая. А вдруг не только мне она покажется забавной? Это уже давно часть моего мировоззрения.
<h3>Суть</h3>
Я размышлял так, талант каждого человека в какой-то дисциплине — проекция его личности на эту область знаний. Математика близка ему? Проекция личности на эту науку <strong>большая</strong> и человек в ней хорошо разбирается. И так далее.
<p>Дальше понятия "проекция" и "тень" я буду нещадно путать. Ибо суть одна. Но "тень" мне как-то человекоподобнее кажется.</p>
<p>Представьте, что каждый человек — капля чернил, у всех одна и та же по обьёму. Если её брызнуть на бумагу — будет клякса, разной формы. Что-то такое:</p>
<p class="img"><img src="https://cssing.org.ua/pic/klyaksa/klyaksa.png" alt="просто клякса бесформенная" /><span>Клякса</span></p>
Форма кляксы, как и личность человека, уникальна.
<p>А потом, я подумал, вспомнив о проекциях, что тень отбрасываемая этой кляксой(проекция), если бы солнце светило в плоскости (сверху и справа), и была бы талантом человека в этой дисциплине. Для наглядности, я взял разделение на гуманитарные и технические области знаний:</p>
<p class="img"><img src="https://cssing.org.ua/pic/klyaksa/gr1a.png" alt="График с проекциями на гуманитарные и технические науки" /><span>Человек: длина теней это его способности</span></p>
Понятно, что например "ось" стихотворства будет проходить где-то рядом с гуманитарной, так, что талантливые рифмоплёты волей-неволей будут "отбрасывать" большую тень и на гуманитарную ось:
<p class="img"><img src="https://cssing.org.ua/pic/klyaksa/gr5.png" alt="график где рядом с гуманитарной изображена рифмоплётная и две проекции на эти оси" /><span></span></p>
Как-то так думаю выглядят нынешние программисты:
<p class="img"><img src="https://cssing.org.ua/pic/klyaksa/gr3.png" alt="клякса для программиста" /><span>Программист</span></p>
А так выглядел бы Лев Толстой, если бы мы его капнули на бумагу:
<p class="img"><img src="https://cssing.org.ua/pic/klyaksa/gr2.png" alt="гуманитарий" /><span>Гуманитарий</span></p>
А это не Михаил Круг, нет, а просто равномерно развитый во всех отношениях человек:
<p class="img"><img src="https://cssing.org.ua/pic/klyaksa/gr4.png" alt="гармоничный человек" /><span>Круглый умник</span></p>
<p>Ну разве можно сказать что одна клякса "лучше" другой, или, что еще грубее, "эта клякса тупая"? :) В такой метафоре — это просто смешно. Максимум, "мне эта форма больше по душе".<br />
Все кляксы по-своему прекрасны и гениальны.</p>
<h3>Развитие модели</h3>
Разумеется, было бы очень ограниченно полагать, что люди описываются всего лишь плоскими кляксами. Но что нам стоит вообразить вместо чернил — кусок пластилина, отбрасывающий всё те же тени-проекции на другие плоскости, теперь уже от реального света. И никто, разумеется, нас не ограничивает 2-3 измерениями...
<p>Дальше можно представить, что обьект движется (живет), поворачивается разными сторонами к освещению, и на протяжении жизни может успеть отбросить дюжину разных по форме теней на ту же математику.</p>
<h3>!</h3>
Суть же одна, легко понять, что даже если в математике и сочинительстве у вас маленькая "тень", чернил и пластилина в вас ровно столько, сколько было в Эйнштейне. Просто нужно найти удачный ракурс, и отбросить тень побольше. ;)
Cколько-то способов min-height
2007-11-29T00:00:00Z
https://cssing.org.ua/2007/11/29/min-height/
<p>Несколько способов реализации min-height для всех броузеров. Короткий обобщающий пост. Надеюсь все оценили как я изящно избежал цифры в названии поста?=)</p>
<!--more-->
<p>Свойство нужное, часто полезное, но в Internet Explorer не работает. Далее способы вразумить синюю букву Е.</p>
<h3>1. min-height через height</h3>
Говорят, разработчики IE5-6 <strong>реализовали</strong> свойство min-height, просто решили его назвать height, так оно вобщем то и есть. height для 5й и 6й версий ведет себя как min-height. В 7й версии min-height уже работает. Потому вопрос лишь в том, как им всем отдать свои значения. Об этом позаботился Дастин Диаз:
<ol class="code">
<li>.block {</li>
<li class="tab">min-height:200px;</li>
<li class="tab">height:auto !important;</li>
<li class="tab">height:200px;</li>
<li>}</li></ol>
Комментировать особо нечего - это работает. Первая колонка в <a href="http://cssing.org.ua/examples/min-height/">примере</a>.
<p>На данный момент, в силу того что ИЕ7 уже поддерживает min-height, два другие способа я привожу скорее как историческую справку и пример интересных приемов.</p>
<ul>
<li><a href="http://www.dustindiaz.com/min-height-fast-hack/">оригинальная статья</a></li>
</ul>
<h3>2. min-height с помощью padding</h3>
Так же можно эмулировать минимальную высоту с помощью комбинации:
<ol class="code">
<li>.block{padding-top:200px}</li>
<li>.block .inner{margin-top:-200px}</li>
</ol>
Этот способ требует однако дополнительного элемента ".inner", тем не менее является пожалуй самым простым и иногда удобным.
Что бы кусок кода был максимально универсальным - лучше добавлять аж 2 обертки:
<ol class="code">
<li>.block .inner{padding-top:200px}</li>
<li class="tab">.block .inner1{margin-top:-200px}</li>
</ol>
В <a href="http://cssing.org.ua/examples/min-height/">примере</a> я вместо второй обертки использовал элемент h2.
<ul>
<li>Подробнее в блоге <a href="http://www.mezzoblue.com/archives/2004/09/16/minheight_fi/">у Dave Shea</a></li>
</ul>
<h3>3. min-height с помощью expression</h3>
Как всегда все можно решить с помощью джаваскрипт.
<p>До того как вышла 7ая версия можно было делать так:</p>
<ol class="code">
<li>.block{height: expression('32px'); min-height: 32px;}</li>
</ol>
Однако этот вариант не работает в 7й версии.
<p>Более универсально и в лоб, проблема решается так:</p>
<ol class="code">
<li>.block { </li>
<li class="tab">height: expression(this.scrollHeight < 201px ? "200px" : "auto" ); </li>
<li class="tab">min-height: 200px; </li>
<li>}</li>
</ol>
Или что бы ускорить работу скрипта, как <a href="http://cssing.org.ua/2007/11/29/min-height/#comment-11392">советует</a> <a href="http://lusever.ru/">Павел Корнилов</a>, <code>this</code> можно опустить:
<ol class="code">
<li>.block { </li>
<li class="tab">height: expression(scrollHeight < 201px ? "200px" : "auto" ); </li>
</ol>
Для body, однако, так нельзя оптимизировать.
<h3>В конце</h3>
<ul>
<li><a href="http://cssing.org.ua/examples/min-height/">Пример с тремя методами</a></li>
</ul>
Буду рад услышать ваши методы и мысли по поводу решения этой проблемы!
Как написать CSS только для Safari
2007-11-14T00:00:00Z
https://cssing.org.ua/2007/11/14/hacking-safari/
<p>Несмотря на экзотичность такого фильтра, он мне понадобился уже на двух проектах. Это, ясное дело, из-за того что у меня мак, и мне не все равно. Короткий грязный(невалидный и не future proof) но работающий здесь и сейчас хак для Safari 2-3.</p>
<!--more-->
<h3>Зачем это надо?</h3>
Ситуаций, в которых я он мне понадобился оказалось пока 2.
<ol>
<li>Когда вы стилизуете submit'ы, они, как известно в Mac OS Tiger не поддаются, и это иногда вызывает нежелательные эффекты для дизайна.<br />
Например на сайте UA WEB 2007 поле регистрации выглядит по разному в Safari и всех остальных броузерах:</li>
</ol>
<div class="img"><img src="https://cssing.org.ua/pic/safari/safari.png" alt="" safari"="" /> <span>Safari 2</span></div>
<div class="img"><img src="https://cssing.org.ua/pic/safari/ff.png" alt="" Firefox"="" /> <span>Firefox</span></div>
<ol start="2">
<li>На этом блоге я использовал для (всего)текста шрифт Myriad. Очень красивый и читабельный шрифт. Под виндой, однако, имеет совершенно неадекватное и нечитабельное сглаживание, догадайтесь какой скрин из винды:</li>
</ol>
<div class="img"><img src="https://cssing.org.ua/pic/safari/macosx.png" alt="" safari"="" /><span>Бебебе</span></div>
<div class="img"><img src="https://cssing.org.ua/pic/safari/winxp.png" alt="" Firefox"="" /><span>Вау!</span></div>
<p>Фильтр же позволил мне хотя бы для Сафари пользователей (а это дизайнер и верстальщик моего блога =)) отдавать сайт в первозданном виде с Myriad. Остальным же показывать красивый Arial.</p>
<h3>Как</h3>
Фильтр является комбинацией двух фильтров (Safari 2 и 3).
<p>Известно что Safari 2 очень чувствителен к посторонним невалидным символам в CSS, настолько, что не читает код после них. К примеру в вот такой конструкции:</p>
<ol class="code">
<li>p{color:red}</li>
<li>span{font-weight:normal;<strong>#</strong>}</li>
<li>p{color:green}</li>
</ol>
Все броузеры сделают параграф <strong>зеленым</strong>, в то время как в Сафари 2 он останется <strong>красным</strong>. На самом деле вместо <strong>#</strong> можно использовать кучу странных символов, но какая разница, если работает и этот. Разумеется, если эти три строки написать в самом начале CSS, сафари 2 его(файл) не прочитает вовсе. Вдобавок никто не мешает использовать вместо селекторов, например import, и отдавать целый отдельный CSS файл для Safari 2.
<h3>Safari 3</h3>
C Safari 3 все проще. Он вышел недавно, и как любой новый броузер поддерживает тьму-тьмущую интересных CSS3 псевдоклассов, до которых не додумались еще пока Windows броузеры, да и вообще все остальные. А значит есть большая вероятность что ближайшие несколько лет их будет поддерживать только он. Одно из таких свойств:
<ol class="code">
<li>body:first-of-type{color:red}</li>
</ol>
Шрифт будет красным только в Safari 3. Псевдокласс, кстати сам по себе экзотический - вразумительного теоретического применения ему я так и не придумал. Официальное предназначение:
<blockquote>The :first-of-type pseudo-class represents an element that is the first sibling of its type in the list of children of its parent element</blockquote>
Вобщем, прямой перевод, "первый, среди всех подобных ему". Скорее всего другие броузеры скоро(или не очень) начнут его тоже поддерживать. Так что, он ни разу не future proof. Однако, если очень нужно(критично), есть <a href="http://www.evotech.net/blog/2007/06/targeting-safari-30-with-css/">javascript определение Safari 3</a>. Выглядит примерно так:
<ol class="code">
<li><script type="text/javascript"></li>
<li class="tab">isSafari3 = false;</li>
<li class="tab">if(window.devicePixelRatio) isSafari3 = true;</li>
<li></script></li>
</ol>
<h3>Комбинация для Safari 2 и 3</h3>
Комбинируя эти два фильтра, можно скормить стили только для Safari 2-3.
Вот как я делаю это на своем блоге, что бы любоваться Myriad:
<ol class="code">
<li>body{font:62.5%/1 "Myriad Pro", arial, sans-serif;}</li>
<li>...</li>
<li><small>/*В конце файла*/</small></li>
<li>span{font-weight:normal;<strong>#</strong>} <small>/*Safari 2 дальше не читает, для него остался Myriad*/</small></li>
<li>body{font-family:Arial, sans-serif;} <small>/*Для всех броузеров*/</small></li>
<li>body:first-of-type{font-family:"Myriad Pro", arial, sans-serif;} <small>/*для Safari 3*/</small></li>
</ol>
<a href="http://cssing.org.ua/wp-content/themes/cssing2/css/base.css">Работает!</a>. Несмотря на малый процент Сафари в целом, есть тенденция к тому, что среди современных заказчиков он очень распространен. В целом, Safari очень хороший и фильтры эти нужны крайне редко.
<p><strong>Буду рад если кто-то поделится своим опытом!</strong></p>
<h3>Update v.2</h3>
Финальная подборка фильтров (спасибо Antejan и Mester):
<ol class="code">
<li>/*поймут только сафари*/</li>
<li class="tab">body:first-of-type .class{}
</li><li>/*поймут только сафари*/</li>
<li class="tab">html:root*.class {}</li>
<li>/*поймут только сафари*/</li>
<li class="tab">html*.class {}</li>
<li>/*поймут только сафари и опера*/</li>
<li class="tab">@media screen and (-webkit-min-device-pixel-ratio:0){ .class { } }</li>
<li>/*поймут только сафари*/</li>
<li class="tab">body:first-of-type .class{}</li>
</ol>
Если ваши наблюдения отличаются, жду письма или комментария, вместе надеюсь оттестим наконец пуленепробиваемый способ фильтровать Сафари. Тестировать тут:
<ul>
<li><a href="http://cssing.org.ua/examples/safari/">Тестовая страничка со всеми фильтрами для Сафари, все проверены на Сафари 3. Опера прочитает только 4й прием. Фаерфокс и ИЕ не прочитают ни одного.</a></li>
</ul>
<h3>Update (2009.07.06)</h3>
На данный момент из всех перечисленных хаков работает только один:
<ol class="code">
<li>@media screen and (-webkit-min-device-pixel-ratio:0){ </li>
<li class="tab">.class { } </li>
<li>}</li>
</ol>
Новая Opera, по своим каким-то причинам, перестала его читать.
<p><strong>Update:</strong> В силу выхода новых версий браузеров, обязательно тестируйте хаки.<br />
Хороший вариант предложил Василий Половнёв в комментарии к этой заметке.</p>
<blockquote>наиболее удачный на мой взгляд способ написать css только для Safari 3/Chrome:
<p>@media screen and (-webkit-min-device-pixel-ratio:0) {<br />
body:first-of-type .clazz {color: red}<br />
}</p></blockquote><p></p>
ClientSide 2007, 6-7 ноября, Москва
2007-11-11T00:00:00Z
https://cssing.org.ua/2007/11/11/client-side-2007/
<p><a href="http://client2007.ru/">ClientSide 2007</a> удался на славу! Конференция прошла просто мегагладко, куча интересных вдохновляющих докладов, множество живого общения и целая гора полезной информации. Подумать только, успел поговорить с людьми ответственными за верстку <a href="http://rossomachin.livejournal.com/">Лепра, Хабрахабра, Dirty</a>, <a href="http://pepelsbey.net/">ЖЖ</a>, <a href="http://harisov.livejournal.com/">Yandex</a> и <a href="http://moikrug.ru/users/P191780323/">его сервисов</a>... И все эти люди веб-стандартисты!</p>
<!--more-->
<h3>Мой доклад "Как сделать сайт доступным"</h3>
Вкратце - мне казалось что эта тема в разрезе верстки, просто обязана была прозвучать. Главное, что я хотел донести, что делать сайты доступными это просто, профессионально и нужно. Донес я не совсем так, как хотелось бы, но главное для меня, что эта тема прозвучала, а к качеству своей выступательной речи и интересности слайдов я теперь отношусь на два порядка серьезней =).
<div style="width:425px;text-align:left" id="__ss_161232"><object style="margin:0px" width="425" height="355"><param name="movie" value="http://static.slideshare.net/swf/ssplayer2.swf?doc=how-to-make-your-site-accessible-1194726470300686-3" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><embed src="http://static.slideshare.net/swf/ssplayer2.swf?doc=how-to-make-your-site-accessible-1194726470300686-3" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355" /></object></div>
Доклад вобщем то сам себя поясняет, в конце много полезных ссылок на тематику доступности. <strong>Спасибо всем кто пришел!</strong> Спасибо <a href="http://mega.genn.org/">Genn</a> за дизайн презентации! =) Ты лучший!
<h3>Запомнившееся</h3>
Пересказывать все нет смысла, потому перечислю запомнившиеся моменты.
<p>Артем Горбунов очень интересно рассказал о всевозможных дизайн-кейсах из его опыта, и просто встречавшихся ему. На рассказе об инфографике на шампуне - зал просто порвало =)</p>
<p>Так же красивым вышло сравнение отсылки SMS в iPhone и Fly телефонах: 3 экрана против 9. Вообще было просто <strong>интересно</strong>. Рекомендую посмотреть запись выступления Артема (когда она появится).</p>
<p>Павел Корнилов рассказывал о навороченных expression. В частности о том как ограничить их выполнение одним разом. Это очень актуально - так как даже для прозрачных PNG они буду выполняться при ресайзах и тп. Все так увлеклись ими что <a href="http://harisov.livejournal.com/">Харисов</a> пошел показывать <a href="http://pepelsbey.net/">Макееву</a> и еще паре человек, после доклада какие еще бывают экспрешны. Самый полезный, что я вынес для себя, превращает обычный UL список в перечисление через запятую.</p>
<p>Петр Диденко - евангелист из Microsoft рассказал о средствах accessibility в Windows и Офисе. Очень показательный и интересный выбор темы. =) Да и в целом рассказывал очень хорошо и интересно, чувствуется опыт.</p>
<p>Из нескольких докладов об оптимизации запомнилось: удаление пробелов в файлах и уменьшение HTTP запросов.</p>
<p><a href="http://harisov.livejournal.com/">Виталий Харисов</a> поведал об интересной верстальщицкой абстракции используемой в Яндексе — "Верстка независымыми блоками". Тем кто занимается версткой больших и сложных ресурсов с кучей ре-используемых частей - mustsee.</p>
<h3>Фотки</h3>
<p class="img"><img width="480" height="320" src="https://cssing.org.ua/pic/clientside/IMG_6866.jpg" alt="тусовка" /><span>тусовка </span></p>
<p class="img"><img width="480" height="360" src="https://cssing.org.ua/pic/clientside/_B070105.jpg" alt="математика" /><span>Дембицкий и кривые Безье</span></p>
<p class="img"><img width="480" height="360" src="https://cssing.org.ua/pic/clientside/_B070097.jpg" alt="Петр Диденко рассказывает о доступности" /><span>Петр Диденко</span></p>
<p class="img"><img width="480" height="360" src="https://cssing.org.ua/pic/clientside/_B070113.jpg" alt="Сумин о модульности Javascript" /><span>Андрей Сумин и белый светящийся экран</span></p>
<p class="img"><img width="334" height="500" src="https://cssing.org.ua/akella.jpg" alt="akella" /><span>Не знаю кто это</span></p>
<p class="img"><img width="480" height="360" src="https://cssing.org.ua/pic/clientside/_B070122.jpg" alt="макбук и люди" /><span>no comments</span></p>
<p class="img"><img width="480" height="360" src="https://cssing.org.ua/pic/clientside/_B070130.jpg" alt="макбук и люди 2" /><span>no comments 2</span></p>
<p class="img"><img width="480" height="360" src="https://cssing.org.ua/pic/clientside/_B070137.jpg" alt="еда на конфе" /><span>Еда</span></p>
<p class="img"><img width="480" height="320" src="https://cssing.org.ua/pic/clientside/IMG_6826.jpg" alt="Виталий Харисов" /><span>Харисов о верстке блоками</span></p>
<p class="img"><img width="480" height="320" src="https://cssing.org.ua/pic/clientside/IMG_7087.jpg" alt="Дмитрий Филёв" /><span>Флипчарт сессия Филёва</span></p>
<p class="img"><img width="480" height="320" src="https://cssing.org.ua/pic/clientside/IMG_7236.jpg" alt="Павел Корнилов" /><span>Корнилов об expression</span></p>
<p class="img"><img width="480" height="360" src="https://cssing.org.ua/pic/clientside/_B070176.jpg" alt="Горбунов о юзабилити и навигации" /><span>Артем Горбунов</span></p>
<h3>В конце</h3>
Конференция вышла интересной, и образовательный эффект очень хороший. Мне лично попалось много интересных идей. И наверняка многие, кто не закрывал свое сознание колпаком "я крутой", тоже. Думаю компаниям таки действительно стоит отправлять сотрудников на эти конференции, цель Бунина, Рогожина и Филева достигнута. Создана атмосфера для обмена информацией между лидерами отрасли.
Кто был на конфе, рад был бы услышать мнения! И кто не был, тоже. =)
<p><strong>P.S.: Отредизайнился! Буду рад услышать мнения о новом дизайне! Эластичность, микроформаты etc...</strong></p>
Эмо-стихотворение от лица броузера
2007-11-03T00:00:00Z
https://cssing.org.ua/2007/11/03/geeky-html-fun-by-genn/
<blockquote>Эйчтиэмэл, эксэмэлнэс, равно
Эйчтитипи и куча символов в кавычках.
Хэд, мета, тайтл, линк и вот оно —
Начало боди. Все пока отлично.
<p>Потом контент, где спанов хоровод<br />
Танцует в круге дивов и в костюмах стилей.<br />
Таблицы видишь? Их разыгран лот!<br />
Тут много классов и айди — мы победили!</p>
<p>Феерия внезапно подошла к концу:<br />
Налево скобка, слеш и закрываем боди.<br />
Закрытие эйчтиэмэл — отсыл к отцу.<br />
Прочитан сайт от корки и до корки, вроде…</p>
</blockquote>
<p>© <a href="http://mega.genn.org/">Genn</a></p>
<p>Просто не удержался! =)<br />
<span style="color:#ccc">Вдохновение началось со второй строки HTML моего блога</span></p>
Оценка качества верстки
2007-10-24T00:00:00Z
https://cssing.org.ua/2007/10/24/html-quality/
<p>Время от времени меня просят оценить качество той или иной свёрстанной страницы, да и сам я когда серфлю часто быстро проверяю - насколько профессионально была создана страничка. За всё это время сформировался ряд довольно стандартных критериев, коими делюсь.</p>
<!--more-->
<h3>Инструменты</h3>
Так как делается это все в онлайне, и я лентяй, то для оценки верстки я использую обычно Firefox с плагином <a href="http://chrispederick.com/work/web-developer/">Web Developer</a>.
<h3>Оценки в порядке важности (для меня)</h3>
<strong>0. Сайт должен нормально работать.</strong> Конечно это является важнейшим критерием. Это нужно а приори для оценки верстки, иначе какой смысл ее оценивать? Он должен быть достаточно кроссбраузерным: IE6-7, FF, Safari, Opera - мой список.
<p><strong>1. Семантика кода</strong><br />
Это я проверяю двумя способами.</p>
<ol>
<li>Отключаем стили на страничке Ctrl+Shift+S(для мак Apple+Shift+S) и сразу видно - остается ли страничка в понятном виде? Видно ли навигацию? Заголовки? Или все сделано сплошным текстом в ДИВах...</li>
<li>смотрю в коде - сколько разных тагов и для чего используется. Обычно с первого взгляда видно если там одни ДИВы, или множество вложенных таблиц (оба варианта плохи).</li>
</ol>
<p><strong>2. Правильное использование тага TABLE</strong><br />
Сам по себе критерий часть предыдущего. Но ввиду распространенности упомяну отдельно.<br />
Жмем <strong>Outline -> Outline Tables -> Table Cells</strong> и сразу видим где и для чего на странице использовались таблицы. Примерно так:</p>
<img src="https://cssing.org.ua/pic/tables.png" alt="Таблицы" />
<p><strong>3. Читабельность</strong><br />
Критерий конечно субьективный, но тем не менее всегда видно, когда человек старался делать отступы и комментарии, а когда делал "абы как"... Увидеть легко - сделав View Source.<br />
Так же в CSS сразу заметно когда человек пытался соблюдать хоть-какой то порядок. Я не говорю о каком-то конкретном именовании и комментариях - но хоть что-то...</p>
<p><strong>4. Структура заголовков</strong><br />
Для меня важно как выстроена структура заголовков h1-h6, по идее они должны соблюдать строгую иерархию. Конечно отклонения на живых сайтах - вполне реальны и приемлемы, я очень хорошо понимаю как это трудно. Но тем не менее: в плагине <strong>Information -> View Document Outline</strong> выдаст на хороших сайтах что то вроде этого (пример сайта <a href="http://uaweb.in.ua/">http://uaweb.in.ua/</a>):</p>
<img src="https://cssing.org.ua/pic/heading.png" alt="Заголовочная структура сайта UA WEB 2008" />
<p>h1 должен быть один на всю страницу, далее структура должна быть ниспадающей.(вообще то их может быть несколько, но они должны четко описывать структуру сайта) Это хорошо видно по картинке. Конечно, строго именно такая структура нигде не задана в стандартах - но лично я считаю такую иерархию очень правильной. Она напоминает книжное оглавление, или тезисы дипломной работы.<br />
Хотя существуют <a href="http://www.andybudd.com/archives/2004/07/heading_for_trouble/">другие мнения</a> по этому поводу (кол-во h1).</p>
<p><strong>5. Доступность (accessibility)</strong><br />
Альтернативный текст к картинкам, смысловая нагруженность кода(семантика), изменяемые размеры шрифтов, и то как сайт выглядит без картинок(<strong>Images -> Replace Images With Alt Attributes</strong>) - все это вместе делает сайт доступным для пользователей и поисковиков. Последний хоткей кстати проявляет "плохие" <a href="http://cssing.org.ua/2006/02/23/image-replacement/">image replacement</a> техники.</p>
<p><strong>6. Именование классов и ID</strong><br />
Неправильно: left-column-with-gray-border-at-top (привязано к отображению)<br />
Правильно: secondary-content (привязно к смыслу блока)</p>
<p><strong>7. Микроформаты</strong><br />
Это можно назвать "продвинутой семантикой". Их наличие легко определить плагином <a href="http://blog.codeeg.com/tails-firefox-extension-03/">Tails</a>. Если на страничке есть микроформаты то в статус баре будет активной их известная зеленая иконка, вот так:</p>
<img src="https://cssing.org.ua/pic/tails.png" alt="Tails" />
<p>А если микроформатов нет:</p>
<img src="https://cssing.org.ua/pic/tails1.png" alt="Tails Off" />
<p>(Оранжевая иконка плагина <a href="http://addons.mozilla.org/ru/firefox/addon/2240">Tails Export</a> - для экспорта информации из страницы в другие места)</p>
<p>Хотел бы добавить валидность, но это слишком круто для живых проектов. И из-за редкости этого пункта - я его обычно даже не затрагиваю. Хотя валидация HTML в шаблонах перед реализацией проекта в жизнь обязательна для меня.</p>
<p>7 хорошее число.</p>
<h3>В конце</h3>
Примерно таким способом я обычно оцениваю чужую верстку. В зависимости от наличия времени использую только первые 2 или первые 4 пункта...
<p><strong>Буду рад услышать ваше мнение и критерии!</strong></p>
Blogcamp 2007
2007-10-15T00:00:00Z
https://cssing.org.ua/2007/10/15/blogcamp-2007/
<p>В Киеве 13-14 октября состоялся первый украинский <a href="http://blogcamp.com.ua/">Blogcamp</a>. Получилось действительно клёво! =) Несколько фоток и воспоминаний.</p>
<!--more-->
<h3>неконференция</h3>
Вообще трудно что-то писать о Blogcamp. Что толку пытаться описать атмосферу, или ощущения от развиртуализации кучи знакомых, или искрометных докладов
<h3>началось</h3>
началось все с вступительного слова организаторов <a href="http://blogobig.com/">Максона Пуговского</a>, Оксы Завойко и <a href="http://demchenko.info/">Александра Демченко</a> (это не все организаторы конечно):
<img src="https://cssing.org.ua/pic/blogcamp/maxon.jpg" alt="Максон Пуговский" />
Затем появился Яндекс и рассказал о статистике украинской блогосферы:
<img src="https://cssing.org.ua/pic/blogcamp/ya.jpg" alt="выступает яндекс, слева Кукуц, справа Волнухин" />
Как оказалось самый популярный среди украинцев блогсервис - Liveinternet.ru. Так же выяснилось что в России средний блоггер это студентка 21 года(64% девченок). А у нас(в Украине) средний образ блоггера представлен парнем 24 лет и девушкой 21 года. В среднем наши украинские блоггеры пишут на 2 поста больше в месяц чем российские.
Пообещали скоро опубликовать подробную статистику по ЮА блогам.
<h3>Брейншторм идей для стартапов</h3>
В одной из сессий, нас разделили на команды по 5-6 человек и устроили конкурс стартапов. Это стало пожалуй одной из самых веселых затей. У всех команд кроме идей интеграции мобильников, GPS, и социальных сервисов был припрятан свой порно-стартапчик =) Торжественно договорились в миру идеи не распространять...
<h3>kukutz</h3>
Один из последних докладов делал Kukutz. Одним словом - отжог. Доклад был тем самым фриковским докладом "Антисоциальные сети" - который насмеялся над всеми остальными. Социальные сети и веб2.0 набили оскомину за два дня. Рассказывалось о <a href="http://2ch.ru/">Дваче</a>, его правилах, анонимусах и интернет мемах рождающихся в нем.
<img src="https://cssing.org.ua/pic/blogcamp/mems.jpg" alt="Интернет Мемы" />
Думается на каждой конференции должен быть доклад противопоставляющий себя всем остальным, и одновременно с этим не несущий ровно никакой серьезности. Расслабляет =)
<h3>WEB 2.0</h3>
Как верно предложил <a href="http://alisherhasanov.livejournal.com/">Алишер Хасанов</a> на закрытии, нужно запретить использование термина web 2.0. Полностью его поддерживаю - применяют его куда-попало и все подряд, лучше уж не употреблять вовсе.
<p>Вообще Алишеру нужно бы было вручить приз за лучшие комментарии. Часто они получались интереснее самих докладов. Если просуммировать время его вопросов и комментариев получилось бы наверно доклада на 2-3 времени =) Это не говоря о глубине мыслей.</p>
<p>Вот так происходила еда:<br />
<img src="https://cssing.org.ua/pic/blogcamp/eda.jpg" alt="Еда" /><br />
А вот к примеру кулуарное общение<br />
<img src="https://cssing.org.ua/pic/blogcamp/kuluar.jpg" alt="кулуары" /><br />
В частности вот как <a href="http://kurilka.co.ua/">wmas</a>(затылок) пытал <a href="http://sinodov.livejournal.com/">Юрия Синодова</a>, а за этим наблюдали <a href="http://kukutz.livejournal.com/">Kukutz</a> и <a href="http://wp.mazoo.net/">Phil</a>. Слева направо: Кукуц, Фил, Вмас, Синодов:<br />
<img src="https://cssing.org.ua/pic/blogcamp/wmas.jpg" alt="Слева направо: Кукуц, Фил, Вмас, Синодов" /></p>
<h3>Всего не расскажешь</h3>
Все рассказать нереально. Да и не нужно - эту (не)конференцию делали все, кто на нее пришел, а потому и отчет цельный нужно составлять читая все отчеты =)
<p>За фотки огромное спасибо <a href="http://internetno.net/">"Интернетным штучкам"</a> и Артему Чертову.</p>
<ul>
<li><a href="http://blogcamp.com.ua/">Blogcamp</a> - тут скоро должны появится ссылки на хорошие фотографии с мероприятия</li>
<li><a href="http://internetno.net/2007/10/14/blogcamp2007-den-pervyiy/">О первом</a> и <a href="http://internetno.net/2007/10/14/blogcamp2007-den-vtoroy/">о втором дне на интернетных штучках</a></li>
<li><a href="http://acekievua.livejournal.com/1895119.html">Подборка отчетов</a> от Евгения Шевченко</li>
<li><a href="http://cooluck.livejournal.com/43240.html">Презентации первого дня</a> и <a href="http://cooluck.livejournal.com/43474.html">второго</a></li>
<li><a href="http://ace.kiev.ua/sergej-petrenko-i-dmitrij-sholomko/">Google & Yandex - вместе!</a></li>
<li><a href="http://fotki.yandex.ru/users/CHAV4/album/13210/">Фотографии Артема Чертова с Блогкемпа</a></li>
<li><a href="http://sundr0p.livejournal.com/494741.html">Несколько высказываний и курьез с Кукуцом</a></li>
<li><a href="http://www.jocast.lv/2007/10/14/65-jocast/">Классный подкаст с пересказом блогкемпа</a>, жаль без половины второго дня, но все равно крайне позитивно =)</li>
<li><a href="http://roem.ru/2007/10/15/blogcamp/">Блогкемп на Roem.ru</a></li>
</ul>
Огромное спасибо всем организаторам и хелптим =) Будем ждать прибалтийский блогкемп в январе 2008!
Платформа "WEB", 28 сентября, Киев
2007-10-09T00:00:00Z
https://cssing.org.ua/2007/10/09/platforma-web/
<p>Мне оказали честь выступить на конференции организованной компанией Microsoft. Немного о том, что было на конференции и о том, что делал там я.</p>
<!--more-->
<h3>Конференция</h3>
Организована Microsoft и на очень высоком уровне! Были доклады:
<ul>
<li>Новi можливостi Windows Server 2008 для хостерiв </li>
<li>Live як платформа (спецiально запрошений гiсть Олександр Бойко, Microsoft)</li>
<li>Microsoft Expression Studio (Юрiй Артюх)</li>
<li>Live в Українi (Всеволод Леонов, Microsoft)</li>
<li>Програма SPLA для хостеров (Сергiй Байдачний, Microsoft та представник партнера)</li>
<li>Використання CardSpace (Вiктор Шатохiн, Microsoft)</li>
</ul>
Вкратце: Бойко в курсе всех трендов, Леонов остроумен и любит уколоть сервисы на букву Гэ, Байдачный улыбчив и знает всё, Шатохин профи докладчик :)
Часто вспоминали конкурента на букву Гэ.
<h3>Мой доклад</h3>
Доклад назывался "Microsoft Expression Studio", и рассказывал я о всех продуктах из этой линейки, о том что они дают, и как помогают делать Silverlight приложения и дизайн для них. В отчете внизу страницы есть более подробное описание моего доклада, потому я не буду вдаваться в подробности.
Вкратце, так:
<ul>
<li><strong>Expression Web</strong> - для редактирования кода (javascript, С#, HTML)</li>
<li><strong>Expression Design</strong> - для иллюстраторов, любой дизайн отрисованный в нем легко экспортируется в XAML понятный другим приложениям линейки Expression</li>
<li><strong>Expression Media Encoder</strong> - продукт предназначенный для конвертации видеофайлов, и их легкого экспорта в сильверлайтовский плеер</li>
<li><strong>Expression Blend</strong> - собственно то в чем можно создать Silverlight(ex WPF/E) и WPF приложения, работает с дизайном на уровне XAML импортированного из Design. Проекты сохраненные в Blend можно открыть в Visual Studio. Идея такова: Expression Blend - анимация, внедрение дизайна; Visual Stuido - C#, Javascript и прочая логика и кодирование. </li>
</ul>
Кроме того, продукты в целом позволяют внедрить что-то вроде новой философии разделения труда: дизайнер работает над дизайном приложения(XAML), разработчик над кодом(Javascript, C#) - и никто друг другу не мешает. :)
<h3>Презентация</h3>
<object type="application/x-shockwave-flash" data="http://s3.amazonaws.com/slideshare/ssplayer.swf?id=129099&doc=microsoft-expression-web4034" width="425" height="348"><param name="movie" value="http://s3.amazonaws.com/slideshare/ssplayer.swf?id=129099&doc=microsoft-expression-web4034" /></object>
<a href="http://cssing.org.ua/examples/Expression.pptx">Скачать pptx</a>
<h3>Windows Live и Cardspace</h3>
На конференции было много интересных докладов о серверных технологиях и направлениях развития сервисов, но больше всего понравились два доклада.
<p><a href="http://ru.wikipedia.org/wiki/Windows_CardSpace">Cardspace</a> (<a href="http://en.wikipedia.org/wiki/Windows_CardSpace">en</a>) - очень интересный рассказ Виктора Шатохина о том как уже сейчас использовать эту технологию аутентификации на своих сайтах, и ее интеграции в Vista. Кол-во информации которой поделился Виктор просто грандиозно, вопросы к нему пришлось прервать из-за недостатка времени.</p>
<p>Windows Live - очень интересно было послушать о том, в какую сторону планируется развивать сервисы, подробнее в отчетах.</p>
<p>После конференции больше всего вопросов вызвал Silverlight, я конечно клевый парень, но вызвано это было скорее новизной и недостаточной осведомленностью народа об этой технологии, тем не менее, факт. Cardspace+Silverlight больше всего заинтересовавшие пришедших темы.</p>
<p>Скоро состоится Developers Day, где будут более подробно описаны технические моменты девелоперства на Silverlight. Будьте на связи.</p>
<h3>Фото</h3>
Регистрация и раздача футболок с лого Silverlight:
<img src="https://cssing.org.ua/pic/platforma/9.jpg" alt="" />
<p>Народу пришло немало, считайте сами:<br />
<img src="https://cssing.org.ua/pic/platforma/1.jpg" alt="" /></p>
<p>Бойко рассказывает о направлениях развития Live:<br />
<img src="https://cssing.org.ua/pic/platforma/3.jpg" alt="" /></p>
<p>Доклад о Windows Server 2008<br />
<img src="https://cssing.org.ua/pic/platforma/2.jpg" alt="" /></p>
<p>Виктор Шатохин, какой-то непонятный тип, Сергей Байдачный и Алекандр Бойко - отвечали на вопросы зала:<br />
<img src="https://cssing.org.ua/pic/platforma/4.jpg" alt="" /></p>
<p>Кто-то доклад делает:<br />
<img src="https://cssing.org.ua/pic/platforma/ak.jpg" alt="" /></p>
<p>Сергей Байдачный улыбался весь день, тренированный :)<br />
<img src="https://cssing.org.ua/pic/platforma/5.jpg" alt="" /></p>
<p>Всеволод Леонов из Москвы рассказывал об украинизации веб сервисов Microsoft<br />
<img src="https://cssing.org.ua/pic/platforma/6.jpg" alt="" /></p>
<p>Еда и тусовка:<br />
<img src="https://cssing.org.ua/pic/platforma/7.jpg" alt="" /></p>
<p>Не поймите неправильно(или поймите), но весь день хотел снять с этой девушки футболку, уж больно красивая она (футболка):<br />
<img src="https://cssing.org.ua/pic/platforma/8.jpg" alt="" /></p>
<h3>Ресурсы касающиеся Silverlight</h3>
<ul>
<li><a href="http://silverlight.net/">Silverlight</a> - основной ресурс с кучей примеров, форумом и всей возможной информацией о Silverlight</li>
<li><a href="http://www.microsoft.com/expression/">Microsoft Expression Studio</a> - здесь можно скачать и ознакомиться с инфой по продуктам линейки Expression(Blend, Web, Design, Media Encoder), то с помощью чего разрабатываются Silverlight приложения</li>
<li><a href="http://www.microsoft.com/silverlight/downloads.aspx">Скачать Silverlight для вашего броузера</a> - поддерживаются IE/Firefox Windows, Firefox/Safari Mac OS. После установки Сильверлайт - можно просто посмотреть на эту страничку как пример применения технологии.</li>
</ul>
<h3>Buzz</h3>
<ul>
<li><a href="http://flash-ripper.com/archives/001929.php">Флэш-Потрошитель о конференции "Платформа WEB"</a> - Silverlight, веб-технология от Microsoft: XAML = XAML = XAML (+ <a href="http://flash-ripper.com/archives/001926.php">первая часть - Платформа Windows Live</a>)</li>
<li><a href="http://dev.net.ua/blogs/demon_xxi/archive/2007/10/02/4315.aspx">Платформа WEB ... итоги (Сергей Демьянов)</a></li>
<li><a href="http://nekoz.com.ua/blog/2007/09/29/platforma-web/">Отчет Евгения Некоза</a></li>
<li><a href="http://cyrillyun.blogspot.com/2007/10/web-microsoft-web.html">Отчет Кирилла Юна</a></li>
<li><a href="http://videlenka.googlepages.com/videlenka2.pdf">В студенческой газете "Выделенка"</a> от <a href="http://folone.edublogs.org/">Георгия Леонтьева</a></li>
</ul>
Буду рад, да что там, счастлив! Если кто то дополнит своими отчетами(или фотками) - к сожалению мало удалось найти откликов о конференции.
<p>ЗЫ: первый отчет о конференции на которой я был докладчиком, интересное ощущение: совершенно не хочется писать о своем докладе.</p>
Перенос конференции UA Web
2007-10-05T00:00:00Z
https://cssing.org.ua/2007/10/05/uaweb-delayed/
<p>Уважаемые колеги!</p>
<p>Мы приняли решение перенести первую конференцию украинских веб-разработчиков UA Web с октября 2007 на март 2008 года.</p>
<p>Единственная причина - желание сделать свою работу хорошо. Мало загореться идей, энтузиазм это здорово, но одного его недостаточно. Нужна еще профессиональная работа и именно на то, чтобы выполнить ее в полном объеме, времени не хватает.</p>
<p>Все достигнутые договоренности в силе; все деньги, уже уплаченные за участие в конференции будут по желанию плативших либо возвращены в полном объеме, либо перенесены на март 2008 года.</p>
<p>Спасибо за поддержку!</p>
<p>С уважением,<br />
команда UA Web<br />
Юрий Артюх, Евгений Некоз, Павел Рогожин и Олег Бунин<br />
<a href="http://uaweb.in.ua/">http://uaweb.in.ua/</a></p>
Несимметричный фон на центрированном сайте
2007-09-29T00:00:00Z
https://cssing.org.ua/2007/09/29/non-symmetric-site/
<p>Относительно часто встречаются макеты центрированные по горизонтали, но с уходящими влево и вправо разнымы фоновыми картинками, <a href="http://cssing.org.ua/examples/unsymbg/">примерно так</a>.</p>
<p>Делюсь своим способом решения этой задачи.</p>
<!--more-->
<h3>Конечный результат</h3>
Добиваться будем примерно <a href="https://cssing.org.ua/examples/unsymbg/">следующего</a>.
<p>Кто понимает код - можно дальше и не читать =)</p>
<h3>Центрирование</h3>
Вообще классическое центрирование обычно выглядит так:
<strong>HTML:</strong>
<ol class="code">
<li><body></li>
<li class="tab"><div id="out"></li>
<li class="tabtab">...сайт...</li>
<li class="tab"></div></li>
<li></body></li>
</ol>
<strong>CSS:</strong>
<ol class="code">
<li>body{text-align:center}</li>
<li>#out{</li>
<li class="tab">width:700px;</li>
<li class="tab">margin: 0 auto;</li>
<li>}</li>
</ol>
Почему-то все еще часто можно услышать вопросы о центрировании или применении тага <code>CENTER</code>, потому не лишне наверно было упомянуть эту реализацию =)
<h3>несимметричный фон</h3>
Для реализации придется добавить пустой див(это стыдно и неправильно, да):
<ol class="code">
<li><body></li>
<li><strong><div class="stupid-right"></div></strong></li>
<li class="tab"><div id="out"></li>
<li class="tabtab">...сайт...</li>
<li class="tab">...</li>
</ol>
и соответствующий этому диву CSS:
<ol class="code">
<li>.stupid-right{</li>
<li class="tab">position:absolute</li>
<li class="tab">top:0;</li>
<li class="tab">right:0;<small>/*правый верхний угол */</small></li>
<li class="tab">width:50%;<small>/*половина экрана */</small></li>
<li class="tab">height:200px;</li>
<li class="tab">background:green;</li>
<li>}</li>
</ol>
Таким образом див берется шириной в половину экрана, и позиционируется в правый верхинй угол, а значит никогда не будет вылазить слева от сайта, ни при каких разрешениях.
Добавив такой же блок слева, получим вот что-то <a href="https://cssing.org.ua/examples/unsymbg/index1.html">вроде этого (дивы перекроют по половине сайта справа и слева)</a>:
<p>Добавим:</p>
<ol class="code">
<li>#out{</li>
<li class="tab">position:relative;</li>
<li>}</li>
</ol>
Таким образом мы поменяли их местами "в третьем" измерении, и все <a href="https://cssing.org.ua/examples/unsymbg/">выглядит как надо</a>.
<h3>В конце</h3>
Паттерн до боли простой, если кто-то решал подобную задачу по другому, был бы рад опыту.
<ul>
<li><a href="https://cssing.org.ua/examples/unsymbg/">Пример с разными фонами с обеих сторон</a></li>
</ul>
Семинар Ратмира Тимашева
2007-07-13T00:00:00Z
https://cssing.org.ua/2007/07/13/ratmir-timashev-seminar/
<p>Вчера побывал на <a href="http://bayviewinnovations.com/ru/seminars/software-venture/">семинаре</a> с <a href="http://www.abrtfund.com/rus/who/">Ратмиром Тимашевым</a>.<br />
Некоторые отрывочные запомнившиеся мысли и немного фоток...</p>
<!--more-->
<p>Семинар был организован в форме дискуссии-диалога. Юрий Бойко задавал вопросы Ратмиру, и просил о чем то рассказать, позднее Тимашеву стали передавать записки из зала. Вобщем вышло довольно увлекательно.</p>
<p>Послушать человека добившегося такого успеха всегда интересно. Уже жизнь показала, что действия его приводят к успеху, а значит их можно копировать(не слепо конечно) и преуспевать самому. И вдвойне интересно, потому что образование, у этого человека достаточно схоже с моим(и образованием почти всех айтишников) - потому многие вещи-идеи о которых он говорит, легко мною воспринимались.</p>
<h3>Некоторые запомнившиеся мысли</h3>
<ul>
<li>"Стартап лучше начинать со своим сокомнатником в общежитии" - все компании Ратмир Тимашев делал вместе со своим институтским другом Андреем Бароновым. Рекомендуется связка предприниматель-технарь.</li>
<li>"Нет ничего хуже, чем много денег рано" (пословица из силиконовой долины)
Это относится к предпринимателям которые ищут инвестиции. Как сказал Ратмир, что бы человек смог заработать миллиард он должен быть "<strong>голодным</strong>". Именно поэтому так много наших эммигрантов добиваются успеха. Потому большие инвестиции на ранних этапах могут загубить стартап.</li>
<li>"Для первой версии любого продукта нужно от 3 до 6 месяцев и не более 2-3х программистов."
Ратмир неоднократно предостерегал от разработки оторванной от нужд пользователей - "разработки в темной комнате", а так же избыточного функционала. Он всегда настораживается когда проекту необходим год до первой версии - ибо за год и технологии и нужды пользователей могут измениться так что продукт уже никому не будет нужен.</li>
<li>Менталитеты аутсорсинговых и продуктовых компаний - противоположны, очень трудно вырастить стартап с хорошим software продуктом из аутсорсинговой компании. 1ые компании ориентируются на удовлетворение 100% нужд клиента и избыточный функционал, вторые на удовлетворение большинства нужд пользователей минимумом своего функционала.
Так что бросайте вы этот аутсорсинг ;)</li>
<li>Обычно венчурные капиталисты выкупают 30-40% от компании у владельцев. Просто любопытный факт</li>
<li>Неденежная(советы и связи) помощь инвесторов гораздо важнее денежной. Потому при выборе VC Ратмир советовал обращать внимание больше на людей, чем на деньги.</li>
<li>Если ваша компания стоит 1млн, и инвестор вкладывает в вас 500 тысяч, то доля инвестора в компании составит %=500/(500+1000)=33%</li>
</ul>
Многие мысли почти очевидные, но как жизнь показывает, ничего сложного в ней и не бывает.
<h3>Фотки</h3>
<img src="https://cssing.org.ua/images/tim2.jpg" alt="" />
<img src="https://cssing.org.ua/images/tim1.jpg" alt="" />
(Юрий Бойко зачитывает записки с вопросами Ратмиру)
<img src="https://cssing.org.ua/images/tim3.jpg" alt="" />
(Ратмир "катит бочку" на инвесторов из силиконовой долины)
<img src="https://cssing.org.ua/images/tim4.jpg" alt="" />
<h3>Благодарности</h3>
Мероприятие просто классное! Хочется сказать огромное спасибо Юрию Бойко и компании BayView Innovations. На второй семинар пришло уже в два раза больше людей. И люди все весьма интересные.
<p>Фотографиями со мной поделился хороший человек - <a href="http://b.com.ua/">Дмитрий Румянцев</a>, за что ему огромное спасибо!</p>
<h3>Ссылки</h3>
<ul>
<li><a href="http://bayviewinnovations.com/">BayView Innovations</a> здесь вы можете найти всю информацию об этих семинарах</li>
<li><a href="http://www.abrtfund.com/rus/">ABRT Venture Fund</a> инвестиционный фонд Андрея Баронова и Ратмира Тимашева</li>
<li><a href="http://www.vedomostivuz.ru/article.shtml?2007/05/21/3976">"Как стать венчурным капиталистом"</a> - статья о компании Ратмира Тимашева и Андрея Баронова</li>
</ul>
О маке
2007-07-01T00:00:00Z
https://cssing.org.ua/2007/07/01/4days-on-a-mac/
<p>Мои первые впечатления о маке.</p>
<!--more-->
<p>Созерцание компа на столе доставляет просто эстетическое удовольствие. Красивый он.<br />
<img src="https://cssing.org.ua/images/imac1.jpg" alt="на столе" /><br />
<img src="https://cssing.org.ua/images/imac2.jpg" alt="на столе" /><br />
Но начну с плохого.</p>
<h3>Негатив</h3>
Не очень понравилась мышка (Mighty Mouse) я как геймер очень тонко к ним отношусь, и после моего Copperhead'а, Mighty странновато как то ездит по материи... Вот мой зверинец на ковре, воин и мирная белая овечка:
<img src="https://cssing.org.ua/images/razmighty.jpg" alt="Copperhead and Mightymouse" />
<p>Во-вторых: где взять SmartFTP под Mac?(риторический видимо) Все что я пока попробовал вызывает лишь смех. Особенно порадовал один из самых популярных(!) клиентов - вот такой <a href="http://fetchsoftworks.com/Fetch5Tour/tour-widget.html">замечательный виджет</a> там существует. Просто создан для веб разработчиков которым наскучило тупо аплоадить файлы :)</p>
<h3>Позитив</h3>
Монитор вне всяких похвал - просто супер изображение. Не буду приводить ТТХ и бросаться терминами, но мои глаза расплакались от радости и сказали мне спасибо. После моего ноута как бальзам на глаза.
<p>Сама операционная система оставляет только приятные впечатления. Весь софт кроме фтп клиентов - просто отличный, юзабилити, дизайн - все мегаудобно и хорошо.</p>
<p>Без малейших проблем соединил iMac со своим ноутом и выкачал все что хотел. Удивился.</p>
<p><strong>Textmate</strong> - мегаредактор, если в двух словах - то вы можете повесить на хоткей все что можно сделать со стрингом в php, perl, ruby. На этих языках можно описывать свои действия и команды. Всех приятных мелочей в редакторе и не упомнишь, и просто отлично, что при этом они сумели сохранить минимальный дизайн и не превратиться в дримвивер какой-то.<br />
Пока я пишу в этом редакторе, я все время ловлю себя на мысли, что я могу касаться клавиатуры в 2 раза реже чем в notepad++.</p>
<h3>Вообще</h3>
Общий дух операционки да и компа можно проиллюстрировать на таком условном примере.
При копировании кучи файлов, например, выдает не "193 минуты" как в винде, а "около 3х часов". "3 часа" занимает меньше ячеек памяти в мозге чем "193 минуты" =). Тем более и так понятно что "193 минуты" это только "примерно 193 минуты". Это просто частный случай который похож по духу на всю ось(возможно и в винде уже так показывает - но я хочу показать само отношение).
Вобщем операционка говорит не то что происходит на самом деле, а то что мне нужно знать об этом. Возможно иногда это нехорошо, но пока просто приятно, что тебя не грузят лишней инфо. Когда то я думал что это ограничение, мне "недоговаривают", но теперь я вижу что это хорошо.
Это характерная черта МАК ОС вообще - она более дружелюбна к человеку. Ткаое впечатление.
<h3>Общее впечатление</h3>
Впечатление очень продуманной и хорошей ОС, в которой я пока правда не нашел свой путь(софт+хоткеи+привычка), под виндой я его вырабатывал полтора года =). Так что если через месяц я смогу успешно верстать и девелопить под маком со скоростью не меньшей чем под виндой - это уже будет мегауспех.
<p>Вобщем - мак это хорошо. =) И даже лучше. После адаптационного периода напишу пост с устоявшимися привычками.<br />
Буду только рад если мак-юзеры поправят мой субьектив - я мог и ошибиться в чем то...</p>
<p>PS: я решил, что мои отрывочные неформальные впечатления будут полезнее потенциальным мак-юзерам чем какой-то мой мегаотчет.</p>
Отчет о встрече докладчиков
2007-06-29T00:00:00Z
https://cssing.org.ua/2007/06/29/post-uaweb-meetup/
<p>Короткий отчет о том что было и о чем говорилось на встрече.<!--more--><br />
Народу пришло хоть и немало, но гораздо меньше чем мы рассчитывали - около 35-40 человек. Наверно это немало, хотя судить очень трудно.</p>
<h3>О чем говорили</h3>
Вкратце план встречи:
<ol>
<li>Я рассказал о том что такое UA WEB (это конференция для вебразработчиков в Украине)</li>
<li>Перезнакомились со всеми пришедшими</li>
<li>Немного поговорили о будущих секциях и темах которые стоит осветить</li>
<li>Коллеги из Москвы рассказали о своем опыте проведения РИТ 2007</li>
<li>В неформальной обстановке проводили сок-паузу, общаясь по интересам</li>
<li>См. последнее фото</li>
</ol>
<img src="https://cssing.org.ua/images/citycom1.jpg" alt="собрание докладчиков в сити.ком" />
<a href="http://flickr.com/photos/akella/657937451/"><img src="https://cssing.org.ua/images/citycom3.jpg" alt="собрание докладчиков с сити.ком" /></a>
<h3>Что решили</h3>
Во-первых и самое главное - многие согласились, что провести конференцию для веб разработчиков в Украине <strong>нужно</strong>.
<p>Во-вторых прояснили какие доклады хотели бы услышать люди, Евгений Шевченко например предложил интересную тему для доклада для которой тут же нашелся докладчик =).</p>
<p>В любом случае на открывающемся вскоре сайте конференции у любого появится возможность предложить свой доклад на рассмотрение программного комитета.</p>
<p>Определились с набором секций предстоящей конференции. На данный момент он выглядит так:</p>
<ul>
<li>Серверное программирование</li>
<li>Клиентское программирование</li>
<li>Бизнес</li>
</ul>
Если у вас есть что сказать по поводу секций - с радостью выслушаю!
Тезисы и темы докладов необходимо подать до начала сентября. Так что лето будет жаркое.
<p>Были выбраны кураторы некоторых секций (люди с которыми вы можете связываться по своим темам докладов, они контролируют непересекаемость тем и подбор докладов)<br />
Секция качество (подсекция клиентского программирования, юзабилити, QA и так далее) <strong>Мария Дидьковская</strong> (ICQ - 344 577 222)<br />
Секция серверного програмирования - <strong>Макс Ищенко</strong>. (ischenko(хм)<a href="http://gmail.com/">gmail.com</a>)<br />
Секция бизнес - <strong>Дмитрий Румянцев(ICQ:22-625-769)</strong>, <strong>Александр Рябцев </strong>(alex.riabtsev(хм)<a href="http://gmail.com/">gmail.com</a>)</p>
<p>Да и в конце концов просто пообщались, встречу посетили Алексей Мась(который кстати ищет Perl программиста), Евгений Шевченко(организатор <a href="http://internet-marketing.org.ua/">ИМУ</a>), Макс Ищенко(автор ресурса <a href="http://www.developers.org.ua/">developers.org.ua</a>), Олег Бунин и Павел Рогожин (<a href="http://www.rit2007.ru/">организаторы РИТ-2007</a>), Алексей Колупаев(<a href="http://ocr-research.org.ua/">каптчист</a>) и много других =).</p>
<p><a href="http://flickr.com/photos/akella/657937473/"><img src="https://cssing.org.ua/images/citycom2.jpg" alt="собрание айтишников в бочке" /></a></p>
HTML+CSS+HTML+CSS+ ... =MAC!
2007-06-27T00:00:00Z
https://cssing.org.ua/2007/06/27/imac/
<p>Свершилось. На одну материальную мечту меньше. :) Мой первый настольный ПК.<br />
<span style="color:#999">(формула из тайтла поста - работает, проверено)</span><br />
<img src="https://cssing.org.ua/images/imac.jpg" alt="Открывать или не стоит?" /><br />
Открывать страшно.</p>
Приглашаю всех желающих на встречу докладчиков UA WEB 2007
2007-06-17T00:00:00Z
https://cssing.org.ua/2007/06/17/pre-ua-web-2007/
<p>Собираем докладчиков на новую украинскую конференцию посвященную интернет технологиям!</p>
<!--more-->
<h3>Дамы и господа, коллеги!</h3>
<img src="https://cssing.org.ua/images/uawebsketch.gif" alt="Скетч логотипа конференции" title="Скетч логотипа конференции" class="left" />
<strong>27 июня</strong>, в Киеве, вечером в <strong>19:00</strong> состоится первое собрание докладчиков первой украинской конференции веб-разработчиков UA Web — 2007 ;)
<p>Ждем всех желающих сделать доклады, а также сомневающихся, сочувствующих и тех, кому не все равно. Задачи на вечер:</p>
<ul>
<li>Познакомиться;</li>
<li>Поделиться общей информацией о конференции (языки, состав, цель);</li>
<li>Обсудить потенциальную программу - о чем нам было бы интересно поговорить друг с другом;</li>
<li>Решить вопросы по продолжительности докладов;</li>
<li>Обсудить имеющийся опыт, как не повторить ошибок;</li>
<li>Выбрать ответственных за каждую секцию;</li>
<li>Установить самим себе крайние даты подачи тезисов докладов;</li>
<li>Сформировать план дальнейших действий.</li>
</ul>
<p>Встреча пройдет в конференц-зале по адресу <a href="http://maps.yandex.ua/kiev?upoint=47c4bda6fc1a">пр. Московский 23 а, гипермаркет Сити' ком (3 этаж)</a> (на Петровке, после 20:00 пускать не будут - имейте ввиду)</p>
<h3>Контактные телефоны:</h3>
<ul>
<li>в Киеве, в Украине - Юрий Артюх, ICQ: 296395204, +38 096 970-6428, akella.a@gmail.com</li>
<li>в Москве, в России - Олег Бунин, ICQ: 55370856, +7 916 635-9584, oleg.bunin@ontico.ru</li>
</ul>
<p>С уважением,<br />
Оргкомитет UA Web — 2007,<br />
Юрий Артюх, Евгений Некоз, Олег Бунин, Павел Рогожин</p>
<p>Буду рад ответить на любые вопросы(и в комментах, и лично). Учитывая что это событие может стать некоей неожиданностью. =)</p>
Еще один способ вертикального выравнивания в CSS
2007-04-26T00:00:00Z
https://cssing.org.ua/2007/04/26/another-css-valign-method/
<p>Много <a href="http://cssing.org.ua/2005/07/14/vertical-align-middle/">копий сломано</a> на ниве вертикального выравнивания без таблиц. Однако недавно я узнал о еще одном более простом способе. Этот пост, перевод статьи уважаемого мною <a href="http://www.gunlaug.no/contents/main_author.html">Gunlaug</a> о вертикальном выравнивании без дополнительного HTML и с помощью правда другого зла.<br />
Оригинальная статья: <a href="http://www.gunlaug.no/contents/wd_additions_20.html">fully centered across browser-land…</a></p>
<!--more-->
<h3>Задача</h3>
Отцентрировать что-нибудь вертикально внутри какого-либо элемента(экрана например).
<p>Возьмем такой вот HTML:</p>
<ol class="code">
<li><div id="out"></li>
<li class="tab"> <p id="centered" >...</p></li>
<li></div></li>
</ol>
Будем выравнивать этот абзац текста(с переменной высотой конечно, она зависит от текста). Высота #out не имеет особого значения - но пускай будет к примеру 500px(заведомо больше высоты параграфа).
<p>Для всех современных броузеров(не IE) это достигается двумя простыми строками:</p>
<ol class="code">
<li>#out{</li>
<li class="tab">height:500px;</li>
<li class="tab"><strong>display:table-cell;</strong></li>
<li class="tab"><strong>vertical-align:middle;</strong></li>
<li class="tab"> }</li>
</ol>
Только и всего. Теперь нужно это повторить для ИЕ...
<h3>IE+expression=нормальный броузер</h3>
Для эмуляции будем использовать expression (маленькие кусочки джаваскрипта который можно внедрять в CSS и работают лишь в ИЕ).
Вот что сэмулирует нам вертикальное выравнивание в ИЕ для элемента #centered внутри другого элемента:
<pre>
#centered {
margin-top: expression(((outer.offsetHeight/2)
-parseInt(offsetHeight)/2) <0 ? "0" :
(outer.offsetHeight/2)
-(parseInt(offsetHeight)/2) +'px') ;
}
</pre>
(видно как внутри ЦСС правил для #centered мы получаем его высоту по айдишнику <code>centered.offsetHeight</code> и высоту div#outer)
Или если мы выравниваем внутри <code>body</code>:
<pre>
#centered{
margin-top: expression((
document.documentElement.offsetHeight/2)
-(parseInt(offsetHeight)/2) <0 ? "0" :
(document.documentElement.offsetHeight/2)
-(parseInt(offsetHeight)/2) +'px') ;
</pre>
Это правило определяет высоту родительского элемента(или body) и высоту центрируемого элемента - после чего добавляет нужный margin-top для вертикального центрирования элемента.
<p><a href="http://css-html.org/17-vertical-align-in-divs/">Был предложен также метод для классов</a>:<br />
<code>margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px")</code><br />
(parseInt убран для наглядности)</p>
<h3>Как это работает</h3>
<ol>
<li><strong>document.documentElement.offsetHeight/2</strong><br />
определяет высоту body и делит ее на 2. Это дает нам отступ ровно в половину высоты экрана</li>
<li><strong>-(parseInt(offsetHeight)/2))</strong><br />
Определяет высоту самого центрируемого блока. Отнятое от высоты родителя дает нам конечный margin-top</li>
<li><strong><0 ? "0" :</strong><br />
Если полученная разница отрицательная, то отступу присваивается значение 0.</li>
<li><strong><0 ? "0" :</strong><br />
Если же полученный результат больше либо равен 0, то повторяем вычисления и берем margin-top равный полученному значению для вертикального центрирования</li>
</ol>
<h3>Словами</h3>
Что бы понять откуда взялись все эти вычисления. Представьте что наш блок отцентрирован по вертикали внутри другого блока. Вот так:
<img src="https://cssing.org.ua/images/valigned.png" alt="вертикально отцентрированный элемент" />
<p>И теперь нам нужно посчитать расстояние от верха родительского блока - до отцентрированного элемента(x-y). Очевидно для этого нам придется отнять от половины высоты родителя(x), половину высоты отцентрированного(y). Вычисление этого расстояния и происходит в скрипте, после чего оно присваивается в качестве margin-top, что по сути визуально центрирует блок по вертикали.</p>
<p>Конечно это своеобразная дилемма - "3 обертывающих DIV" или "expression", зависит от случая, но как по мне, выбор тут однозначен ;).</p>
<p>Если Вам нужна валидность, да и просто ради красоты, эту строку для IE стоит перенести в отдельный CSS файл(<a href="http://www.quirksmode.org/css/condcom.html">СС</a>), либо каким то образом оградить от других броузеров.</p>
<h3>Ссылки</h3>
<ul>
<li>Оригинал <a href="http://www.gunlaug.no/contents/wd_additions_20.html">fully centered across browser-land…</a> статья <a href="http://www.gunlaug.no/contents/main_author.html">Gunlaug Sørtun</a> про этот прием и центрирование вообще (там же в правой колонке несколько примеров)</li>
<li><a href="http://cssing.org.ua/examples/valign1/">Пример центрирования в блоке</a></li>
<li><a href="http://cssing.org.ua/examples/valign1/index1.html">Пример центрирования на экране</a></li>
<li><a href="http://cssing.org.ua/examples/valign1/index2.html">Пример Gunlaug</a>, для ИЕ там выводятся промежуточные числа вычислений..</li>
<li><a href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/measuring.asp">Информация об определении размеров блока на MSDN</a></li>
<li><a href="http://msdn2.microsoft.com/en-us/library/1kc6b02f(VS.80).aspx">Информация о методе parseInt</a></li>
<li><a href="http://css-html.org/17-vertical-align-in-divs/">Вариант для классов, а не айди</a></li>
</ul>
Метод в принципе не сложный, может кто то уже даже и использовал... буду рад услышать Ваше мнение или совет по поводу техники!
РИТ-2007, Москва
2007-04-23T00:00:00Z
https://cssing.org.ua/2007/04/23/rit-2007-moscow/
<p>Наконец а москве состоялась первая конференция веб профессионалов - <abbr title="Российские Интернет Технологии">РИТ-2007</abbr>. Короткий(и запоздалый) отчет о ней и второй встрече <abbr title="Web Standards Group">WSG</abbr>.<!--more--></p>
<h3>Собрание</h3>
На конфу собралось больше 600 человек! Прослушали 80 докладов. Просто необьятное поле знаний на самом деле. Надо сказать что организовано все было просто отлично, и если и были мелкие недочеты, то это давка(а может просто тесное общение?) и одновременное чтение 4х докладов, что порой делало из нас всех буридановых ослов =).
<h3>Доклады</h3>
Я в основном отсидел доклады по клиентской части, все они были мне интересны с профессиональной точки зрения. <a href="http://rossomachin.livejournal.com/">Макс Россомахин</a> отлично рассказал о Микроформатах, а затем произошло получасовое живое общение публики с Росcомахиным и <a href="http://flack.ru/">Алексеем Рыбаковым</a>. Последний кстати послал всех табличников гореть в аду, чем не слабо прославился :). Да и вообще отлично жог на своем докладе по QA верстки. Так же неплохие доклады вышли у Макеева (CSS management) и Марата Мамяшева(про javascript frameworks).
<p>Не считая клиентской части, запомнился доклад <a href="http://www.mysqlperformanceblog.com/">Петра Зайцева</a>, который просто поразил своими знаниями и mysqlистой мудростью. Советую просмотреть слайды тем кто замешан в мускульной оптимизации. Однако самое интересное от него можно было услышать в кулуарах, я не видел что бы он скучал один :). Кстати этот человек специально приехал из Лондона для конференции и своего мастеркласса.</p>
<p>Ну и конечно Игорь Ашманов с пересказом <a href="http://www.ashmanov.com/pap/ashrul.phtml">своих правил</a>. Речь вышла отличнейшая, зацепила. Запись уже пошла по инету, вот например <a href="http://rutube.ru/tracks/37785.html">его выступление на RuTube</a>. Пожалуй один из лучших докладов на РИТе.</p>
<h3>WSG</h3>
На конфе по плану состоялась вторая встреча русского крыла WSG. Из членов(WSG) были(кроме меня):
<ul>
<li><a href="http://pepelsbey.net/">Вадим Макеев</a></li>
<li><a href="http://flack.ru/">Алексей Рыбаков</a></li>
<li><a href="http://rossomachin.livejournal.com/">Макс Россомахин</a></li>
<li><a href="http://thebits.livejournal.com/">Сергей Мезенцев</a></li>
<li><a href="http://engelside.net/">Ольга Алексашенко</a></li>
<li><a href="http://cssblast.ru/">Марат Мамяшев</a></li>
<li><a href="http://harisov.livejournal.com/">Виталий Харисов</a></li>
</ul>
И еще много других, кто предложил свою помощь и практически вошел в нашу открытую группу.
Обсудили XHTML2, HTML5, что нас ждет в будущем. Одобрили тезис: "Табличная верстка дороже", который незамедлительно подтвердил Макс Лапшин(который кстати <a href="http://maxidoors.ru/articles/2007/04/18/html-coder-required">ищет верстальщика</a>). <a href="http://harisov.livejournal.com/">Виталий Харисов</a> вышел во второй раз, и разруливал ситуацию с XHTML2, HTML5, и глюками в сафари на яндекс-открытках ;). Вобщем было интересно. Следующая встреча... в питере.(?)
<p>Тусовка ruWSG в комнате докладчиков(pepelsbey, rossomachin, flack, thebits, марат):<br />
<img src="https://cssing.org.ua/images/rit/WSG_small.jpg" alt="сидят и смотрят" /><br />
Максим Россомахин и Алексей Рыбаков(справа налево) отвечают на вопросы публики:<br />
<img src="https://cssing.org.ua/images/rit/day1-004_small.jpg" alt="сидят и смотрят" /><br />
Свой доклад я не подготовил, но меня все равно засветил pepelsbey :P<br />
<img src="https://cssing.org.ua/images/rit/rit_cssing_small.jpg" alt="cssing таки втулился на рит" /><br />
А чем вы думали все закончится? )<br />
<img src="https://cssing.org.ua/images/rit/day2-027_small.jpg" alt="пьют" /></p>
<p>За часть фото спасибо <a href="http://cssblast.ru/">Марату</a>.</p>
<h3>Фотоотчеты</h3>
<ul>
<li><a href="http://www.rit2007.ru/">Сайт конференции</a> - отсюда кстати можно перейти на много фотоотчетов и других отзывов участинков и докладчиков, потому переписывать линки я не стал</li>
<li><a href="http://www.habrahabr.ru/blog/webdev/9644.html">Слайды докладчиков</a></li>
<li><a href="http://rossomachin.livejournal.com/80241.html">Отчет Макса Россомахина</a></li>
<li><a href="http://cssblast.ru/news/814/">на cssblast</a></li>
<li><a href="http://www.flickr.com/photos/thebits/sets/72157600103131875/">Фотки TheBits</a></li>
<li><a href="http://flickr.com/groups/wsg-russia/">Фотки с WSG meeting</a></li>
</ul>
Многие до сих пор не понимают зачем была эта конференция нужна(в хорошем смысле).
А мне понравилось как высказался Ашманов по поводу мероприятия:
<blockquote>Можно ли назвать полезным мероприятие, которое сделало счастливыми порядка 700 человек? Как вы думаете?</blockquote>
(<cite><a href="http://www.vz.ru/society/2007/4/18/78113.html">отсюда</a></cite>)
<p>ЗЫ: организаторы планируют провести в конце лета конференцию посвященную высоким нагрузкам. Все желающие могут подписаться на сайте уже сейчас <a href="http://rit2007.ru/">http://rit2007.ru</a></p>
Печатная версия с Javascript
2007-04-07T00:00:00Z
https://cssing.org.ua/2007/04/07/print-version-with-javascript/
<p>Я всегда знал два подхода к печатным версиям: старого типа - ставим ссылку "печатная версия", пользователь переходит на новую страницу и видит печатную версию этой же страницы, и новый: добавляем css media="print", и только знающие люди могут нажать Print Preview или догадаться распечатать эту страницу. Вот и пришла маленькая идея комбинации лучших сторон этих двух подходов.</p>
<!--more-->
<h3>Что я хочу</h3>
А хочу я, что бы по клику на ссылку "печатная версия" какой то волшебник заменял media="print" на media="screen", и страница преображалась без перезагрузки в печатный вид. Таким образом и пользователь экономит время(хоть и мизерное), и видит сам печатный вид без лазания по меню броузера. Вроде как - все довольны.
<h3>HTML</h3>
Для примера понадобится страница с печатной версией, это будет <a href="http://cssing.org.ua/examples/printwithjs/">что то вроде этой</a>. В head файла добавим print.css два раза для разных медиа:
<ol class="code">
<li><!--Для собственно принтеров --></li>
<li><link rel="stylesheet" type="text/css" media="print" href="css/print.css" /></li>
<li><!--Для нашего превью с джаваскриптом --></li>
<li><link rel="alternate stylesheet" type="text/css" media="screen,projection" href="css/print.css" title="printview" disabled /></li>
</ol>
Атрибут disabled указан для того что бы в ИЕ эти стили корректно включались и отключались.(<a href="http://www.quirksmode.org/js/cssdisable.html">см. статью</a>)
<p>Теперь страничка полноценная - у нее есть печатная версия, и она нормально отображается в броузерах. Дело за магией.</p>
<h3>Javascript</h3>
Нам необходимо как то переключаться между стилями, приходят на ум статьи о <a href="http://alistapart.com/stories/alternate/">Style Switcher</a> и тому подобных, однако его я считаю черезчур избыточным, он скорее предназначен для переключения разных вариантов дизайна или шрифтов. А запоминания в куку в данном случае явно излишни.
<p>Потому я обратился к другой статье(спасибо <a href="http://sudoku.org.ua/rus/blog/">CB</a> за наводку), где описывается метод буквального отключения <a href="http://www.quirksmode.org/js/cssdisable.html">CSS Disabling</a><br />
По сути взял с минимальными изменениями джаваскрипт оттуда, вот что я использовал для решения задачи:</p>
<pre class="code">function setPrintCSS(isPrint) {
// Определяем поддержку нужного нам элемента в броузерах
if (document.getElementsByTagName)
x = document.getElementsByTagName('link');
else if (document.all)
x = document.all.tags('link');
else
{
alert('Простите, этот скрипт не работает в вашем броузере');
return;
}
// Пробегая по всем элементам LINK в HTML - включаем и отключаем нужные нам стили
// идентифицируя их по атрибуту title
// параметр isPrint - отвечает просто за вариант стилей для печти или монитора
for (var i=0;i<x.length;i++) {
if(x[i].title == 'printview'){x[i].disabled = !isPrint;}
if(x[i].title == 'screenview'){x[i].disabled = isPrint;}
}
}</pre>
<p><span style="color:#999">(немного более логичный нейминг по сравнению с первым вариантом, спасибо <a href="http://sudoku.org.ua/rus/blog/">CB</a>)</span><br />
В результате в HTML можно добавить две ссылки вида:</p>
<ol class="code">
<li><a href="#" onclick="setPrintCSS(false)">Вернуться к стандартному виду</a></li>
<li><a href="#print" onclick="setPrintCSS(true)">Печатная версия</a></li>
</ol>
По клику на которые всё и будет происходить.
<a href="http://cssing.org.ua/examples/printwithjs/">Вот простой пример</a> этого приема.
<p>Можно пойти дальше(спасибо <a href="https://cssing.org.ua/2007/04/07/print-version-with-javascript/#comment-10881">Smash</a> за идею), и позволить пользователям давать ссылку на печатную версию сайта. Для этого достаточно одной строки скрипта после задания нашей функции:</p>
<pre>if(document.location.hash=='#print') setPrintCSS(true);</pre>
<p><a href="http://cssing.org.ua/examples/printwithjs/index2.html#print">Смотреть пример с работающим #print.</a></p>
<h3>Ссылки</h3>
<ul>
<li><strong>Update:</strong> Пример с переработанным кодом, теперь работает #print, <a href="http://cssing.org.ua/examples/printwithjs/index2.html">сам пример</a> и <a href="http://cssing.org.ua/examples/printwithjs/index2.html#print">печатная версия</a>(в адрес добавлено #print)</li>
<li><a href="http://cssing.org.ua/examples/printwithjs/">Мой пример</a></li>
<li><a href="http://cssing.org.ua/examples/printwithjs/index1.html">Пример из апдейта(см. ниже)</a></li>
<li><a href="http://www.quirksmode.org/js/cssdisable.html">Статья PPK</a></li>
<li><a href="http://akella.org.ua/pro/prostobank/publication.html">Второй пример</a></li>
<li><a href="http://alistapart.com/articles/printtopreview">Print to Preview</a> - статья с похожей идеей на алистапарте</li>
</ul>
Для красоты в media=screen я скрываю ссылку переключения в обычный вид, а в печатной версии соответствующую ссылку на печатную версию.
<h3>В конце</h3>
Вот такой маленький приемчик - иногда может быть довольно приятным, да и наконец позволяет более явно использовать нам наши CSS для принтеров. А то бывает пишешь-пишешь эти стили.. А они скопируют в ворд и распечатают по привычке =) Кстати многие любят читать печатные версии на сайтах, что бы ничего не мешало - а таким образом мы ускоряем им это переключение. Вдобавок, можно давать одинаковые тайтлы нескольким ЦСС файлам и они будут отключены все разом.
Буду рад услышать Ваши мысли, критику, приемы по этому поводу!
<p><strong>Обновлено:</strong> Спасибо <a href="http://vladson.com/">Vladson</a> за второй способ быстрой замены стилей, чуть менее абстрактный, но иногда возможно оптимальный. Задаем параметр id для элемента link(например main-css), и тогда</p>
<ol class="code">
<li><a href="#" onclick="document.getElementById('main-css').href = 'css/base.css'">Вернуться к стандартному виду</a></li>
<li><a href="#" onclick="document.getElementById('main-css').href = 'css/print.css'">Печатная версия</a></li>
</ol>
<p>Оба споосба еще нуждаются в тестировании - но под виндой работают под всеми броузерами. А последний и под Konqueror.</p>
London, Designertopia 2007
2007-03-28T00:00:00Z
https://cssing.org.ua/2007/03/28/london-designertopia-2007-2/
<p>Так уж сложились обстоятельства, что я стал участником <a href="http://www.designertopia.net/">этой конференции</a> в Лондоне. Проходила она Marriot Hotel, симпатичной гостинице недалеко от Гайд парка . Впечатлений осталась масса, гуси, красные автобусы, ноутбуки на полу. (лучше поздний отчет чем никакого =))</p>
<!--more-->
<h3>Конференция</h3>
Некоторой изюминкой конфы был зал, во время первого выступления было два одинаковых экрана. После чего зал перегородили по центру, и получилось два полноценных зала, где и велись параллельно сессии.
<img src="https://cssing.org.ua/images/c1.jpg" alt="зал в отеле, где проходила конфа" />
<h3>Microsoft наступает</h3>
Конференция началась со вступительной речи Эрика Зокера(человек отетственный за всю линейку <a href="http://microsoft.com/expression">expression</a>). Разговор как водится зашел издалека. Начали с извечного конфликта дизайнера и программиста. Имеется ввиду, что делая GUI, программист часто перевирает дизайн(и никакой управы на него нет! ). Как логичное решение предлагается <a href="http://en.wikipedia.org/wiki/Extensible_Application_Markup_Language">XAML</a>(читается «кзамл») – формат на базе XML предназначенный для описания дизайна интерфейсов, который должен стать тем самым языком общения дизайнера и разработчика. Но не руками же писать дизайнеру XAML! Для этого и предназначается линейка Expression.
<img src="https://cssing.org.ua/images/c2.jpg" alt="Эрик Зокер во время своего выступления" />
<p>Каждый из продуктов предназначен для четко очерченной задачи, так: <strong>Expression Design</strong> – для дизайнера, здесь он рисует дизайн и(может) экспортирует его в XAML, <strong>Expression Web</strong> – программист-верстальщик, <strong>Expression Blend</strong> – продукт для программиста, сюда экспортируется XAML дизайнера, и в визуальном редакторе легко применяется точный дизайнерский стиль. Если пытаться строить аналогии то: Expression Web – Dreamweaver, Expression Design – Photoshop, Expression Blend – Macromedia Flash MX.</p>
<p>Далее Эрик плавно перешел к козырям Microsoft – технологии WPF/E. По сути мобильная версия уже известной WPF. Грубо говоря, некий аналог Flash. Это как раз тот продукт который получается в Blend. На данный момент свойства флэша эмулируются джаваскриптом. Для просмотра «WPF/E-роликов» необходимо <a href="http://msdn2.microsoft.com/en-us/asp.net/bb187452.aspx">устанавливать плагин</a> – пока что есть версии для IE и Firefox под Win, и для Firefox и Safari под Mac.(1.1Mb)</p>
<p>Хотя сейчас принято сравнивать фичи WPF/E с уровнем всего 5й версии Flash, но достигнуты то эти результаты были всего за полтора месяца. (первая CTP WPF/E появилась в декабре 2006) Потому следует ждать на рынке еще одного серьезного «конкурента» Flash.</p>
<h3>Подробнее о XAML и WPF/E можно почитать тут:</h3>
<ul>
<li><a href="http://channel9.msdn.com/playground/wpfe/PageTurn/default.html">Пример WPF/E приложения</a></li>
<li><a href="http://msdn2.microsoft.com/en-us/asp.net/bb187452.aspx">Здесь можно установить плагин для броузера(1.1Mb)</a></li>
<li><a href="http://blogs.gotdotnet.ru/personal/allo/CommentView.aspx?guid=7D99BD12-C43F-4226-8A99-2C09FDB6560B">Отзыв О ранней бете WPF/E</a></li>
<li><a href="http://www.xaml.net/">Официальный сайт XAML</a></li>
<li><a href="http://channel9.msdn.com/playground/wpfe/">Сайт с примерами WPF/E</a></li>
<li><a href="http://microsoft.com/expression">Официальная страничка линейки продуктов Expression</a></li>
<li><a href="http://www.xakep.ru/post/36719/default.asp">Статья на Xakep о WPF/E</a></li>
</ul>
Что интересно, помогал Эрику со слайдами бывший продакт менеджер Macromedia Flash. =)
Есть еще в этой линейке Expression Design – но это софт для умной каталогизации дизайнов-портфолио-фотографий, и лишь очень косвенно касается веба.
<h3>Примеры WPF</h3>
Самым интересным было пощупать новую технологию. Вообще говоря WPF изначально была доступна лишь для Windows XP SP2, Vista, 2003. Но WPF/E (WPF/Everywhere) мобильная версия WPF, слегка урезана в возможностях (нет поддержки 3d) и использует Javascript+XAML. Зато мы получили работу в основных броузерах под Mac и Win платформами. На вопрос о версии для Linux, Эрик ответил, что если они ощутят востребованность технологии этими пользователями, то такая версия обязательно появится. И никаких преград на данный момент они не видят.
<p>Больше всего мне понравился <a href="http://select.nytimes.com/gst/timesreader.html">«New York Times Reader»</a>, пример применения WPF,удачный дизайн сочетается с классной интерактивностью и множеством удобных фич. Им попросту приятно пользоваться. Советую попробовать – по сути это RSS-ридер для New York Times, но какой! Вот пара скриншотов, жалкое подобие реальной красоты:<br />
Это главная страница темы «Technology »:<br />
<img src="https://cssing.org.ua/images/c3.jpg" alt="список статей в категории" /><br />
А это просмотр статьи:<br />
<img src="https://cssing.org.ua/images/c4.jpg" alt="просмотр статьи" /><br />
По статистике пользователи проводят в 10 (!) раз больше времени читая новости через это приложение – чем на обычном HTML сайте.</p>
<p>Так же было приведено несколько других примеров применения WPF, в основном это была красивая визуализация разных сложных данных, по сути первые решения призванные помочь второй волне разработчиков. Например рассказали о приложении «Лондонское метро», онлайновой визуализации движения поездов, а так же некоторой информации о каждой станции метро. Поезда действительно в онлайне двигались. (хотя нам показали только видеоролик работы с приложением)<br />
<img src="https://cssing.org.ua/images/c5.jpg" alt="Схема метро в приложении London Underground" /><br />
Схема позволяла переключиться из схематического вида к реалистичной схеме метро в 3D:<br />
<img src="https://cssing.org.ua/images/c6.jpg" alt="3D схема метро в приложении London Underground" /><br />
На фотке как раз взгляд на реальную трехмерную карту метро «из под земли» с ползущими по ней поездами – зал в этот момент замер.</p>
<p>Так же были представлены скорее игрушечные применения, как например интерфейс в котором удобно следить за любимыми гольфистами, онлайновая информация у вас на компе, возможность просматривать видеоотрывки ударов, сравнивать красивыми наложениями и т п. Все о чем может мечтать гольфист-болельщик. Позиционировалось как бесплатный софт для какого то известного гольф сайта.</p>
<p>На некоторых сессиях просто не хватало мест:<br />
<img src="https://cssing.org.ua/images/c8.jpg" alt="" /></p>
<p>Грубо говоря оставляет впечатление флэша с активным использованием внешних источников информации(онлайновых или оффлайновых)</p>
<h3>Expression Web</h3>
Так же весьма непривычно было слушать доклад об Expression Web(Jeff King) – в каком то смысле наследник Frontpage. Но наследник только по задачам. На этот раз вебстандарты играют очень важную роль, редактор обладает всеми стандартными фичами которе могут понадобиться для редактирования HTML, CSS и т. п. Среди прочих приятных неочевидных мелочей можно упомянуть:
<ul>
<li>Встроенные доктайпы</li>
<li>Встроенные шаблоны с готовыми CSS лейаутами</li>
<li>Удобное(хотя и генерирующее порой кучу мусорного кода) визуальное редактирование</li>
<li>Удобная работа с CSS – редактор распарсивает все селекторы из CSS файла и представляет их в удобном виде. Вдобавок радуют поразительные drag&drop – например если перетащить из файлового окошка .css файл внутрь .html файла – то редактор сгенерирует элемент <link /> и в итоге корректно вставит .css файл. Мелочь, а приятно.(или я отстал от жизни?)</li>
<li>Валидация документов на лету</li>
<li>Умное сжатие CSS – автоматически сжимает правила согласно сокращениям в CSS(padding:2px 3px 4px 5px;) и прочие приятные мелочи</li>
<li>У меня грузится быстрее чем Dreamweaver</li>
</ul>
И это только те что сам успел заметить – на самом деле продукт действительно заслуживает внимания. И хотя сделан в Microsoft :) скорее всего наиболее вебстандартизированный из всех больших пакетов на рынке на сегодняшний день.
Продукт предназначен для кодеров прежде всего, но присутствует и интеграция с ASP(можно вставлять контролы оттуда)
<p>Для меня конечно основным недостатком таких программ служит тяжеловесность(старт несколько секунд) и трудность обнаружения многих полезных фич. Но для долгого использования в промышленных масштабах лучше не придумаешь.</p>
<h3>Будущее</h3>
<img src="https://cssing.org.ua/images/c7.jpg" alt="Ray Hammond" class="left" />
Последним докладчиком(не по интересности) стал <a href="http://www.hammond.co.uk/">Ray Hammond</a>. По иронии, этот футуролог был единственым, кто не отвлекал нас красивыми эффектами на экране. Он использовал лишь своё красноречие. Однако по все той же иронии доклад его вышел наиболее захватывающим и интересным. Этот человек завладел аудиторией полностью. В выступлении он прошелся по всей истории человечества, и попытался заглянуть и предсказать направления развития человечества.
<p>По его словам уже через лет 30 у каждого из нас будет маленький “друг”, он же мобильный телефон, интернет броузер, GPS устройство, кредитная карточка и все все все. Друга он посоветовал называть именем жены, дабы избежать возможных конфузов.</p>
<p>Примерно в то же время компьютеры наконец станут умнее людей. На опасения публики, Рэй ответил, что считает их полным отражением деятельности человека, и потому неспособных навредить а приори.</p>
<p>В конце доклада он прикинулся что пришел к нам из 2056 года со своим “другом” Марией. Как я понял это уже был отрывок из одной из его книг - а он писатель фантаст кстати.</p>
<p>Одна из его идей о будущем может быть полезна всем. Рэй считает что в ближайшее время разрастется рынок продажи бизнес информации. В пример он привел решение некоторых проблем с лондонским метро(бюджет более 100млн $). Если бы команда решавшая эти проблемы задокументировала все свои шаги, ошибки, удачные решения, итог проекта. То в результате такая информация могла бы стоить десятки миллионов долларов для похожих проектов в Нью Йорке например. И все равно все компании остались бы в выигрыше. Загововорил он об этом, потому что с развитием технологий цена на ведение такой документации стремительно падает.</p>
<h3>Впечатления вообще</h3>
Немного непривычно было понимать, что практически все считают веб стандарты уже само собой разумеющейся вещью. И я сейчас говорю скорее не о посетителях конференции, а о докладчиках от MS.
<p>Постарался ничего важного не потерять, потому считайте что сэкономили пару тасяч баксов прочитав это ;)</p>
<h3>Другие отчеты</h3>
<ul>
<li><a href="http://flickr.com/search/?q=designertopia">Все фотографии</a> (<a href="http://flickr.com/photos/akella/sets/72157594174002385/">и в том числе мои</a>)</li>
<li><a href="http://blog.benhall.me.uk/2007/02/designertopia-post-event.html">Отчет Бена Холла</a></li>
<li><a href="http://blogs.msdn.com/robburke/archive/2007/02/03/designertopia-on-the-web.aspx">Еще один отчет</a></li>
<li>В деталях <a href="http://blog.steel-software.com/?p=24">первый день</a> и <a href="http://blog.steel-software.com/?p=25">второй день</a></li>
</ul>
ЗЫ: вот бы и <a href="http://www.vivabit.com/atmedia2007/">сюда</a> попасть... Эх...
<p>ЗЫЫ: пускай отчет получился слегка запоздалым, но это на самом деле важная победа над собой, я его сделал )</p>
Колонки "одинаковой" высоты с разделителем
2007-02-24T00:00:00Z
https://cssing.org.ua/2007/02/24/equal-height-columns/
<p>Недавно пришла в голову простая идея эмуляции колонок одинаковой высоты без использования фонового рисунка. Метод этот подходит только для случаев, когда между колонками разделитель, а фоном колонки не выделяются. Однако из-за своей простоты заслуживает внимания. <a href="http://cssing.org.ua/examples/2equalcols/">Смотреть пример</a>.</p>
<!--more-->
<h3>Ситуация</h3>
Метод этот простой, и слово метод даже слишком сильное. Мелкий трюк возникший при верстке вот такого макета:
<img src="https://cssing.org.ua/images/2cols.png" alt="колонки с разным кол-вом контента но разделителем до низу" />
Где не было известно в какой из колонок будет больше текста, а разделитель должен был быть по высоте максимально длинной колонки.
<p>Самым очевидным решением было бы обернуть эти колонки в какой то <code>div</code>, и для этого дива правильно спозиционировать фоновый однопиксельный рисунок ("повторить" рисунок по вертикали). Так сейчас решена идентичная проблема на сайте "<a href="http://alistapart.com/">A list apart</a>". Решение было описано в статье <a href="http://alistapart.com/articles/fauxcolumns/">Faux columns</a> (и <a href="http://cssing.org.ua/2004/09/10/flex-faux/">я когда то писал</a> об этом).</p>
<p>Однако, делать для этого картинку мне было <acronym title="самый главный мотиватор">лень</acronym>.</p>
<h3>border + margin</h3>
HTML был примерно такой:
<ol class="code">
<li><div id="c1"></li>
<li class="tab">тут контент</li>
<li></div></li>
<li></li>
<li><div id="c2"></li>
<li class="tab">тут контент</li>
<li></div></li>
</ol>
Самый простой CSS, для того что бы колонки встали одна за другой:
<ol class="code">
<li>#c1, #c2{</li>
<li class="tab">float:left;</li>
<li class="tab">width:281px;/*не имеет значения =)*/</li>
<li>}</li>
</ol>
В результате получались две колонки как на дизайне, но пока без разделителя.
Этот разделитель не что иное как обычная однопиксельная граница. Ее можно было бы задать для самой длинной колонки, но только если знать какая из них.... Потому зададим пока для обеих:
<ol class="code">
<li>#c1{border-<strong>right</strong>:1px solid #ccc}</li>
<li>#c2{border-<strong>left</strong>:1px solid #ccc}</li>
</ol>
В результате получилось то, что и ожидалось - сначала был двойной разделитель, а к низу оставалась только граница от большей колонки:
<img src="https://cssing.org.ua/images/2colsbad.png" alt="двойной разделитель между колонками, и одинарный внизу" />
Отсюда и пришло весьма простое решение:
<ol class="code">
<li>#c2{</li>
<li class="tab">margin-left:-1px</li>
<li>}</li>
</ol>
В результате, граница правой колонки накладывается поверх границы левой колонки, и мы получаем <strong>однопиксельный</strong> разделитель между ними. <a href="http://cssing.org.ua/examples/2equalcols/">Вот пример того, что получилось</a> (слегка приукрашенный для наглядности). А <a href="http://cssing.org.ua/examples/2equalcols/index1.html">здесь я раскрасил обе границы</a> в разный цвет.
<p>Таким образом, теперь разделителем всегда будет служить граница большей колонки, поскольку она будет "выглядывать" из-за меньшей.</p>
<p>Можно сразу же развить этот метод и на три колонки, вот что получается:</p>
<ul>
<li><a href="http://cssing.org.ua/examples/2equalcols/3cols.html">Для трех колонок</a> - интересно что разделители получаются - "умными", то есть они разделяют не до самого низу всю страницу, а разделяют только колонки. (можно поиграться с длиной колонок, что бы увидеть эффект)</li>
<li><a href="http://cssing.org.ua/examples/2equalcols/2coldes1.html">background вместо border</a> - просто заменяем border на background, и выставляем margin-left равный ширине фоновой картинки.</li>
</ul>
<h3>В конце</h3>
Метод, конечно, до боли простой, но избавил от лишнего открытия фотошопа, да и сервер от лишнего миллиона ХТТП запросов, а это немало. :). Вдобавок при изменении ширины колонок, нам больше не нужно изменять параллельно и позицию фоновой картинки как в <a href="http://alistapart.com/articles/fauxcolumns/">универсальном методе</a>.
И я уверен кто-то уже давно бессознательно пользовался приемом.
По использованию отрицательных полей, он напоминает мой недавний пост про "<a href="http://cssing.org.ua/2006/11/05/menu-separators/">Разделители в меню</a>".
Надеюсь это кому-то упростит жизнь так же как и мне.
<p>Буду рад услышать Ваши мысли, советы и рекомендации!</p>
Лондон
2007-02-04T00:00:00Z
https://cssing.org.ua/2007/02/04/london/
<p>Несколько вещей удививших меня в Лондоне:</p>
<ul>
<li>Вежливость водителей, уступающих дорогу, даже если охота постоять на перекрестке</li>
<li>Кол-во аудио дисков в магазине просто неприличное, на каждую букву все исполнители со всеми альбомами - <strong>нельзя же так жестоко со мной!</strong></li>
<li>Красных автобусов больше чем машин, и даже больше чем людей местами. Мешают фотографировать здания</li>
<li>Пабы в маленьких пустынных улочках - незабываемо разные и классные</li>
<li>Гуси-беспредельщики в Гайд парке (см. ниже)</li>
</ul>
<img src="https://cssing.org.ua/images/gusi.jpg" alt="гуси" title="гуси-беспредельщики" />
<span class="notimp">(не бейте за очевидные - я первый раз за границей)</span> О <a href="http://www.designertopia.net/">причинах и других впечатлениях</a> подробнее скоро...
cssing 2006
2006-12-28T00:00:00Z
https://cssing.org.ua/2006/12/28/cssing-2006/
<p>Некоторые посты с этого блога за последний год. Самое полезное и интересное, что по моему мнению писалось в 2006ом.<br />
С наступающими всех! :) Буду краток. Пусть Вас настигнет счастье!<!--more--></p>
<ul>
<li><a href="http://cssing.org.ua/2006/01/17/hacks-in-separate-stylesheet/">CSS для непослушных броузеров</a>
Несколько простых и сложных CSS хаков, которые порой могут сильно облегчить жизнь кодеру.</li>
<li><a href="http://cssing.org.ua/2006/02/15/css-tooltips/">Простой тултип или всплывающая подсказка</a>
Простой способ создать с помощью CSS подсказку для ссылок. Код. Примеры. И в будущем, видимо, unobtrusive скрипт для их автоматического создания.</li>
<li><a href="http://cssing.org.ua/2006/02/23/image-replacement/">Некоторые техники замены текста картинками (image replacement)</a>
Обзор нескольких способов типичной замены текста на картинки.</li>
<li><a href="http://cssing.org.ua/2006/03/07/css-bar-graphs/">Графики</a>
Один из вариантов представления сложных данных в виде графиков с легкой CSS magic.
</li>
<li><a href="http://cssing.org.ua/2006/05/09/office-darts/">Дротики - офисный релакс</a>
То чем мы развлекаемся нынче в офисе :). Успокаивает. Картонная мишень и дротики и поныне стоят на своем месте. Небольшой тюториал по созданию дартс из офисных принадлежностей. </li>
<li><a href="http://cssing.org.ua/2006/06/08/css-sliding-doors/">Идея раздвижных дверей в CSS</a>
Мое применение идеи раздвижных дверей. И посильное ее пояснение. Красивая идея, как и все красивые идеи, может легко найти свои применения не только в CSS.</li>
<li><a href="http://cssing.org.ua/2006/10/16/font-size-em/">Изменяемые размеры шрифтов</a>
Способ создания страничек с изменяемыми размерами шрифтов(в ИЕ конечно), которым я постоянно пользуюсь. Рекомендую и Вам.</li>
<li><a href="http://cssing.org.ua/2006/10/30/first-russian-wsg-moscow/">Первая встреча русских вебстандартистов. Москва</a>
Таки состоялось историческое событие. Мы встретились в Москве. Доклады, присутствующие и небольшой фотоотчет.</li>
<li><a href="http://cssing.org.ua/2006/11/05/menu-separators/">Разделители в меню</a>
Изящная идея реализации разделителей в меню с помощью свойства overflow.</li>
<li><a href="http://cssing.org.ua/2006/11/16/menu-z-index/">Меню на z-index</a>
Римейк меню двухлетней давности с той же самой идеей. Использование z-index для перекрывающихся пунктов навигации.</li>
<li><a href="http://cssing.org.ua/2006/12/23/ie-css-russian-comments-bug/">CSS, UTF и Интернет эксплорер</a>
Глюк с разными кодировками в CSS и HTML файлах(для IE конечно). Пост-предостережение - не напарываться.</li>
</ul>
<p>Вот такая вот подборочка получилась! Спасибо всем кто меня читает, это(чтение и Ваши комменты) и есть самая лучшая благодарность за мой скромный труд.</p>
<p>А ведь хороший год был! :) А какой следующий будет... Ух!</p>
<p>Счастливых праздников!<br />
<strong style="display:block;text-align:center;font:normal 17px/1 Arial,san-serif;">С наступающим Всех!</strong></p>
CSS, UTF и Интернет эксплорер
2006-12-23T00:00:00Z
https://cssing.org.ua/2006/12/23/ie-css-russian-comments-bug/
<p>Недавно я и некоторые из моих знакомых напоролись на интересный неочевидный глюк связанный с употреблением русских комментариев в CSS. Суть глюка и пример ниже. Сразу резюме: <strong>лучше не используйте комментарии с кириллицей в CSS</strong>.</p>
<!--more-->
<h3>Ответа в инете не нашел</h3>
Наверняка многие на него напарывались - но внятного ответа от гугла мне получить не удалось - потому я решил для экономии времени читателей озвучить этот гадкий и противный глюк. По незнанию такого глюка отладка может быть длительной. Глюк проявляется только в версиях интернет эксплорера 5.0-6.0
<h3>Типичная ситуация для бага</h3>
Вы верстаете сайт. Кодировка ваших CSS файлов по умолчанию выставлена windows-1251. После чего верстка попадает в реализацию, где она прикручивается к движку(в движке HTML отдается как UTF-8). Однако оказывается, что в ИЕ6 и ниже, сайт сильно расползается и часть CSS не работает. Причина - русские комментарии в CSS.
<h3>Пример</h3>
Для примера я создал CSS файл с русскими комментариями в кодировке windows-1251:
<ol class="code">
<li>/*Русский комментарий*/</li>
<li>#content{</li>
<li>color:#fff;</li>
<li>background:#000;</li>
<li>}</li>
</ol>
И две HTML странички(<a href="http://cssing.org.ua/examples/iecssutf/">страничка в windows-1251</a> и <a href="http://cssing.org.ua/examples/iecssutf/indexUTF.html">страничка в UTF-8</a>), отличающиеся лишь метатагами
<ol class="code">
<li><meta http-equiv="content-type" content="text/html; charset=utf-8"></li>
</ol>
И
<ol class="code">
<li><meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /></li>
</ol>
Обе странички ссылаются на один и тот же <a href="http://cssing.org.ua/examples/iecssutf/css/base.css">CSS файл</a>. В результате в ИЕ6 и ниже, CSS на страничке с кодировкой UTF не срабатывает. Все из-за русских комментариев.
<h3>Решение</h3>
Есть несколько путей:
<ul>
<li>Удалить русские комментарии из CSS</li>
<li>Поменять кодировку CSS файла на UTF-8</li>
</ul>
Но лучше никогда не использовать кириллицу для комментирования CSS файлов. Мало ли к чему там будут прикручивать потом вашу верстку... а кодировку CSS файлов догадаются поменять в последнюю очередь.
<p>Суть бага в том, что при наличии русского комментария(UTF кодировка страницы переносится и на CSS), IE сьедает символ закрытия комментария, в результате весь CSS после русских букв оказывается так же закомментированным. В IE7 этот "баг" не проявляется. Примеры смотреть в IE 6 и ниже.</p>
<h3>Ссылки</h3>
<ul>
<li><a href="http://cssing.org.ua/examples/iecssutf/">Страничка и CSS файл в кодировке windows-1251</a></li>
<li><a href="http://cssing.org.ua/examples/iecssutf/indexUTF.html">Страничка в кодировке UTF-8, CSS файл в кодировке windows-1251</a></li>
<li><a href="http://cssing.org.ua/examples/iecssutf/UTFnoRussianText.html">Страничка в кодировке UTF-8, CSS файл в кодировке windows-1251 без русских комментариев</a></li>
</ul>
Надеюсь, по крайней мере те кто это прочитают, не потратят теперь пару часов своей жизни на поиск такого бага. Будьте внимательны! Буду рад, если Вы поделитесь своим опытом по этому поводу.
Меню на z-index
2006-11-16T00:00:00Z
https://cssing.org.ua/2006/11/16/menu-z-index/
<p>Больше чем два года назад(ужас) <a href="http://cssing.org.ua/2004/09/01/navigation-on-css/">реализовывал свою идею меню</a>, когда определенные пункты отображаются "впереди" всех остальных. Сейчас пришлось использовать идею повторно. Вот это меню в oldschool дизайне:<br />
<a href="https://cssing.org.ua/examples/zindex/"><img src="https://cssing.org.ua/images/zindex.gif" alt="меню с пересекающимися пунктами" /></a></p>
<!--more-->
<h3>Идея</h3>
Идея тогда состояла в том, что бы впику <a href="http://superfluousbanter.org/archives/2004/05/navigation-matrix/">методам моих гуру</a>, у которых пересечение реализовывалось сложной логикой отрисовки картинок, сделать это при помощи простой отрисовки картинок, но с использоавнием свойства z-index, позволяющего как бы менять местами последовательность отображения блоков. То есть оставлять какой-то блок позади других. Свойcтво это по логике вещей как нельзя лучше подходит для данного случая, имхо.
<p>Вобщем о том как CSS в очередной раз спас мне жизнь :) пошагово и пойдет дальше рассказ.</p>
<h3>HTML</h3>
Очевидный список:
<ol class="code">
<li><ul id="nav"></li>
<li class="tab"><li><a id="n1" ...>Вакансии</a></li></li>
<li class="tab"><li><a id="n2"...>Резюме</a></li></li>
<li class="tab">...</li>
<li class="tab"><li><a id="n6" ...>Советы</a></li></li>
<li></ul></li>
</ol>
Проще некуда. id нужны так как каждый элемент навигации мы заменяем на картинку, потому нам нужно их различать.
<h3>Картинка</h3>
Для меню я буду использовать вот такую картинку:
<div style="overflow:auto;width:423px;height:80px;">
<img src="https://cssing.org.ua/images/nav.gif" alt="картинка использовавшася для меню" />
</div>
Как видно - в ней хранятся все пункты меню, вдобавок они же - но в положении "здесь" и :hover.(синие). Так же в отличие от техники которая меня вдохновила два года назад - картинки не пересекаются между собой - что заметно упрощает их отрисовку, в отличие от <a href="http://superfluousbanter.org/archives/2004/05/navigation-matrix-reloaded/">этого варианта</a>.
<p>Все меню будет сделано лишь с использованием одной картинки - что позволит нам избежать всевозможных проблем с недозагрузкой некоторых пунктов меню.</p>
<h3>CSS</h3>
Ну а теперь начинается самое интересное. z-index работает в ИЕ только для абсолютно позиционируемых элементов - это накладывает некоторые лишние правила на технику - которые я считаю ее основным недостатком. Но начнем с элементарных правил:
<ol class="code">
<li>#nav a{</li>
<li class="tab">display:block;</li>
<li class="tab">width:159px;<small>/*почти все пункты одинаковые у меня - но для двух я задаю отдельную ширину*/</small></li>
<li class="tab">height:25px;</li>
<li class="tab">background:transparent url(nav.gif) no-repeat 0 0;</li>
<li class="tab">position:absolute;</li>
<li class="tab">z-index:45</li>
<li>}</li>
</ol>
(я опустил <a href="http://cssing.org.ua/2006/02/23/image-replacement/">технику замены текста внутри ссылок</a> на картинки, для простоты)
<p>Координаты каждого пункта(мы вынуждены их задавать, так как я хочу использовать z-index, а значит пункты должны быть с position:absolute), так что бы они пересекались так, как нам кажется красивым:</p>
<ol class="code">
<li>#n1{left:0}</li>
<li>...</li>
<li>#n5{left:533px}</li>
<li>#n6{left:680px;}</li>
</ol>
Пункты навигации теперь расположены где надо, дело за фоновыми картинками...
<p>Выше для каждого пункта (#nav a) мы уже указали фоновую картинку nav.gif, все что нужно теперь - указать координаты ее сдвига для каждого пункта меню, тут понадобятся рассчеты:</p>
<ol class="code">
<li>a#n1{background-position:0 0}</li>
<li>a#n1:hover, .a1 a#n1{background-position: 0 -25px}</li>
<li><strong>a#n2</strong>{background-position:-159px 0}<small>/*фон для 2го пункта положения "покоя"*/</small></li>
<li><strong>a#n2:hover, .a2 a#n2</strong>{background-position:-159px -25px}<small>/*фон для 2го пункта положения "здесь" и "hover"*/</small></li>
<li>...</li>
<li>a#n6{background-position:-772px 0}</li>
<li>a#n6:hover, .a6 a#n6{background-position:-772px -25px}</li>
</ol>
a#n6 - собственно фон для 6го пункта навигации, для этого как видно надо сдвинуть наш фон на 772 пиксела влево.
a#n6:hover и .a6 a#n6 - положение фоновой картинки при наведенной мыши, и в положении "здесь".
<p>z-index для положения при наведенной мыши:</p>
<ol class="code">
<li>#nav a:hover{z-index:50}</li>
</ol>
Я задаю z-index:50(>45) что бы при наведении мыши пункты отображались поверх соседних - как бы всплывали из-за них.
CSS для сигнализации "я здесь":
<ol class="code">
<li>.a1 #n1, .a2 #n2, .a3 #n3, .a4 #n4, .a5 #n5, .a6 #n6{z-index:55}</li>
</ol>
Теперь нам достаточно менять класс для UL на a1,..,a6 и при этом будут подсвечиваться соответствующие пункты навигации, более того, так как z-index мы им задаем 55, то есть больше чем 50 и 45, то они будут отображаться еще и перед соседними пунктами(и даже перед соседними наведенными пунктами). Что и приносит собсно тот эффект ради которого это все и придумывалось.
Полюбуйтесь <a href="https://cssing.org.ua/examples/zindex">этим меню в действии </a>
<p>Картинки конечно не ахти ) но это то с чем мне пришлось работать, к сожалению. Мечтаю уже два года отрисовать для этой идеи stunning картинки.) Жаль я не <a href="http://www.nundroo.com/">Дидье</a>.</p>
<h3>В конце</h3>
<ul>
<li><a href="https://cssing.org.ua/examples/zindex">Пример меню</a> и <a href="https://cssing.org.ua/examples/coolzindex">чуть более навороченное</a></li>
<li><a href="http://cssing.org.ua/examples/c3/">Пример моего с той же идеей двухлетней давности</a></li>
<li><a href="http://cssing.org.ua/2004/09/01/navigation-on-css/">"Навигация по-русски"</a> - мой пост двухлетней давности про эту идею</li>
</ul>
Ничего особо сложного в меню нет, но опять же, идея мне нравится, вдруг кому еще и пригодится.
Если вы скажете что я извращенец что такое делал ) то не ошибётесь. Но другого способа сделать меню с пересекающимися пунктами я не знаю.(не считая отрисовки сложных картинок). Если у Вас есть идеи по этому поводу <strong>буду рад услышать</strong>!
<p>Вообще такие сложности с position:absolute мне были нужны только для поддержки ИЕ5.0 5.5, если их поддержка вам не нужна, можно легко обойтись комбинацией margin-left:-10px;position:relative c соответствующими изменениями z-index для подсвеченных пунктов. Прямо как поступил <a href="http://beholder-eye.info/">Александр Шабуневич</a> в <a href="http://beholder-eye.info/2006/11/13/phpmyadmin-new-theme">своей красивой теме для PMA</a>.</p>
Разделители в меню
2006-11-05T00:00:00Z
https://cssing.org.ua/2006/11/05/menu-separators/
<p>Довольно часто на практике встречаются <a href="https://cssing.org.ua/examples/menu/">меню с разделителями</a> - например:<br />
<a href="https://cssing.org.ua/examples/menu/"><img src="https://cssing.org.ua/images/razd-norm.gif" alt="Меню с разделителями" /></a><br />
О том как сделать такое меню с минимумом правильного HTML кода и пойдет дальше речь.<!--more--></p>
<h3>HTML</h3>
Очевидным HTML для подобных конструкций служит ненумерованный список UL, вот например такой:
<ol class="code">
<li><ul id="nav"></li>
<li class="tab"><li><a href="#">Главная</a></li></li>
<li class="tab"><li><a href="#">Новости</a></li></li>
<li class="tab"><li><a href="#">Каталог</a></li></li>
<li class="tab"><li><a href="#">Рейтинг</a></li></li>
<li></ul></li>
</ol>
Конечно если бы мы тупо и цинично рубили бабло © мы могли бы написать что то вроде:
<ol class="code">
<li><a href="#">Главная</a> | <a href="#">Новости</a> | <a href="#">Каталог</a> | <a href="#">Рейтинг</a></li>
</ol>
Но по причине совсем не циничной рубки (<a href="http://flack.ru/">© Flack</a>), а так же истокам проблемы с этим меню, и вдобавок семантики кода так лучше не поступать.
<h3>Как обычно делалось</h3>
Обычно для получения результата - то есть меню с вертикальными разделителями, приходилось задавать левую (или правую) границу для каждого элемента(здесь я опускаю код позиционирующий меню, он есть в примерах):
<ol class="code">
<li>#nav li{border-left:1px solid #000}</li>
</ol>
Таким образом мы получали <a href="https://cssing.org.ua/examples/menu/indexpast.html">что то вроде</a>:
<a href="https://cssing.org.ua/examples/menu/indexpast.html"><img src="https://cssing.org.ua/images/razd-bad.gif" alt="разделители слева от каждого пункта" /></a>
Не совсем то что нам надо, так как разделители на то и разделители что бы быть только между пунктами, а они у нас сейчас находятся просто слева от каждого пункта. Ранее эта проблема для меня решалась вставкой класса для первого элемента:
<ol class="code">
<li><ul id="nav"></li>
<li class="tab"><li class="first"><a href="#">Главная</a></li></li>
<li class="tab">...</li>
</ol>
И потом добавлением правила:
<ol class="code">
<li>#nav li.first{border:none}</li>
</ol>
И все вроде бы работает как надо. Но. Оба эти подхода(с class="first" и с текстовыми разделителями "|") требуют от нас несимметричной генерации элементов - надо различать первый и все остальные LI.
<h3>Проблема(лень)</h3>
Так как мои меню генерировал движок, то для вставки этого класса пришлось бы менять код движка, а лезть туда мне было <acronym title="Двигатель прогресса">лень</acronym>. Отсюда родилось решение как сделать такие разделители не вставляя никаких классов и оперируя лишь обычным списком.
<h3>Решение</h3>
Идея простая как 5 копеек. Вот весь код:
<ol class="code">
<li>#nav{</li>
<li class="tab">overflow:hidden;<small>/* что бы UL растянулся до содержимых float во всех броузерах кроме ИЕ, а так же для нашего "обрезания"*/</small></li>
<li class="tab">width:100%;<small>/* что бы UL растянулся до содержимого в ИЕ, к самому трюку имеет косвенное отношение*/</small></li>
<li>}</li>
<li>#nav li{</li>
<li class="tab">margin-left:-1px;<small>/*сдвигаем все элементы влево*/</small></li>
<li>}</li>
</ol>
Суть такова. Задаем overflow:hidden для UL - таким образом все что выходит за пределы блока UL отображаться не будет. Затем задаем margin-left:-1px для всех элементов списка, то есть первый элемент выйдет на 1 пиксель за пределы элемента UL, но это как раз и будет тот лишний злополучный первый разделитель! Все же остальные разделители останутся в деле - так как не выйдут за пределы блока. А первый будет скрыт. В результате получим:
<a href="https://cssing.org.ua/examples/menu/"><img src="https://cssing.org.ua/images/razd-norm.gif" alt="Меню с разделителями" /></a>
<a href="https://cssing.org.ua/examples/menu/">Смотреть пример</a>
<h3>Идея</h3>
Эта же идея только с заменой на border-top и margin-top:-1px сработает и для таких меню:
<a href="https://cssing.org.ua/examples/menu/indexhor.html"><img src="https://cssing.org.ua/images/razd-hor-norm.gif" alt="Меню с горизонтальными разделителями" /></a>
<a href="https://cssing.org.ua/examples/menu/indexhor.html">Смотреть пример</a>
Более того такой прием можно применять и для графических разделителей. Будь они даже потолще одного пиксела - просто придётся задавать больший отрицателый отступ для элементов списка. Таким образом это работает и для разделителей в виде картинки.
<h3>В конце</h3>
Хотя прием и довольно узкоприменимый, но мне сэкономил время, да и идея мне понравилась. Тестировалось и работает во всех моих виндошных браузерах(IE5-7, FF, Opera). Думаю работает везде.
<ul>
<li><a href="https://cssing.org.ua/examples/menu/indexhor.html">Рабочий пример для горизонтальных разделителей</a></li>
<li><a href="https://cssing.org.ua/examples/menu/">Рабочий пример для вертикальных разделителей</a></li>
<li><a href="http://cssing.org.ua/2004/09/01/navigation-on-css/">"Навигация по-русски"</a> - пост двухлетней давности про эту идею</li>
</ul>
Буду рад услышать Ваше мнение или приемы которые вы используете!
Первая встреча русских вебстандартистов. Москва
2006-10-30T00:00:00Z
https://cssing.org.ua/2006/10/30/first-russian-wsg-moscow/
<p>Наконец-то состоялась первая встреча русских веб-стандартистов в Москве. Надеюсь это станет традицией :). Далее небольшой отчет.<!--more--></p>
<h3>Организация и присутствующие</h3>
Отдельное спасибо за организацию хотелось бы сказать <a href="http://pepelsbey.net/">pepelsbey</a>'у. На встрече присутствовали следующие личности: <a href="http://pepelsbey.net/">Вадим "pepelsbey" Макеев</a>, <a href="http://flack.ru/">Алексей "Flack" Рыбаков</a>, <a href="http://linkedin.com/in/thebits/">Сергей "TheBits" Мезенцев</a>, <a href="http://uggallery.audiopeace.ru/">Александр "uggallery" Исаков</a>, <a href="http://mtonly.livejournal.com/">Марат “MT” Таналин</a>, <a href="http://www.cssblast.ru/">Марат Мамяшев</a>, <a href="http://linkedin.com/in/tachisis">Ольга Алексашенко</a>, виртуально <a href="http://webmascon.com/">Максим Россомахин</a> ну и я.
<h3>Доклады</h3>
Слушали три интересных доклада, пересказывать бессмысленно, скажу лишь вкратце о чем...
<p><strong>Про ASP (от Сергея Мезенцева)</strong>: услышали историю, новые возможности <a href="http://asp.net/">ASP.NET</a>, посетовали на потуги исключить верстальщика из цикла создания сайта..</p>
<p><strong>Про jQuery и других (от Марата Мамяшева из <a href="http://cssblast.ru/">cssblast.ru</a>):</strong> на пальцах рассказал о возможностях, применении, тут же показав примеры использования двух джаваскриптовых фреймворков, настолько просто что даже я приехав не удержался и начал использовать в работе. За что ему отдельное спасибо. Было действительно интересно.</p>
<p><strong>Про Типографику (от Александра "uggallery" Исакова):</strong> очень интересный доклад про русские(и не только) шрифты, их историю, и способы правильного употребления и еще много интересного. (этот доклад мне к сожалению не удалось дослушать до конца - не хватило времени...:()<br />
Далее несколько фото(событие проходило в законспирированной квартире с несколькими кофе-ти-брейками):<br />
(за фото спасибо <a href="http://uggallery.audiopeace.ru/">uggallery</a>)</p>
<p>Сергей Мезенцев рассказывает про то какая крутая новая ASP:<br />
<img src="https://cssing.org.ua/images/wsg/1.jpg" alt="Фото со встречи вебстандартистов в Москве" /><br />
<img src="https://cssing.org.ua/images/wsg/2.jpg" alt="Фото со встречи вебстандартистов в Москве" /><br />
Доклад Марата Мамяшева о библиотеках javascript(видно один из пальцев на которых он нам все это обьяснил :) ):<br />
<img src="https://cssing.org.ua/images/wsg/3.jpg" alt="Фото со встречи вебстандартистов в Москве" /><br />
Доклад Александра "uggallery" Исакова о типографике:<br />
<img src="https://cssing.org.ua/images/wsg/5.jpg" alt="Фото со встречи вебстандартистов в Москве" /><br />
Обсуждение структуры сайта русского WSG:<br />
<img src="https://cssing.org.ua/images/wsg/4.jpg" alt="Фото со встречи вебстандартистов в Москве" /></p>
<ul>
<li><a href="http://uggallery.audiopeace.ru/2006/11/03/tipografika-wsg">Доклад Александра Исакова</a></li>
<li><a href="http://www.webmascon.com/daily/?postid=200">Отчет на Вебмасконе</a></li>
<li>Фотки с подписями смотрите в <a href="http://www.flickr.com/photos/wsg-russia/">фликер аккаунте русского WSG сообщества</a>.</li>
</ul>
<h3>В целом</h3>
Было круто. ) Была отличная атмосфера и такие вещи надо повторять.
<p><strong>И вот что интересно, есть ли украинцы желающие участвовать в подобных мероприятиях? </strong> Делиться опытом и знакомиться с коллегами и просто интересными людьми из смежных областей.<br />
И вообще что думаете про подобные мероприятия? (не только украинцы)</p>
Изменяемые размеры шрифтов
2006-10-16T00:00:00Z
https://cssing.org.ua/2006/10/16/font-size-em/
<p>Разумеется я имею ввиду изменяемые в ИЕ(6-) шрифты, поскольку во всех остальных броузерах они и так легко изменяемы. Задавать шрифты в пикселах - нехорошо по отношению к юзерам. Можно и нужно задавать их в других относительных единицах. Тут я расскажу скорее не о каком то оригинальнои приеме, а просто об общем подходе для создания страничек с резиновыми шрифтами для ИЕ.<br />
Заметка(запоздалая) вызвана двумя постами на <a href="http://pepelsbey.net/webdev/2006/10/08/mashtabnyie-tonkosti/">pepelsbey.net</a> и <a href="http://www.mauzon.com/?p=77">mauzon.com</a> и желанием поделиться своим простым подходом, вдруг кому то поможет.</p>
<!--more-->
<h3>Возможности</h3>
Задавать шрифты можно в пикселах(если бы не ИЕ так и нужно было бы делать всем), поскольку это все же не абсолютная единица как многие любят говорить - а относительная(от точек экрана зависит), так же можно использовать ЕМ'ы, проценты и ключевые слова.
Ключевые слова немного глючат в IE - их <a href="http://alistapart.com/stories/sizematters/">значение там сдвинуто</a>, хотя при желании можно использовать и их(с хаками). Пикселы для текста это табу - по причине существования ИЕ - там пользователь не сможет изменять размеры шрифта заданного пикселами. Остаются проценты и ЕМ. Они очень похожи. Потому их можно использовать смешанно - что Вам больше нравится. Далее я расскажу как с помощью ЕМ добиться точных нужных пиксельных размеров.
<h3>С чего начать</h3>
В своем темплейте я как правило сразу задаю размер шрифта для body, вот так:
<ol class="code">
<li>body{</li>
<li>font: <strong>62.5%</strong>/1.4 Arial, sans-serif</li>
<li>}</li>
</ol>
По дефолту в броузерах размер шрифта 16 пикселов, таким образом 62.5% от 16 равняется ровно 10(я в столбик считал). То бишь этим нехитрым правилом дефолтовый шрифт мы сделали в броузере 10 пикселов.
Теперь пускай у нас есть подобная страничка:
<ol class="code">
<li><div id="header"></div></li>
<li><div id="content"></div></li>
</ol>
Вот такой вот CSS:
<ol class="code">
<li>#header{font-size:1.1em}</li>
<li>#content{font-size:1.3em}</li>
</ol>
Задаст нам по дефолту размеры в 11 и 13 пикселов для текста этих дивов, причем шрифт останется изменяемым и в ИЕ, чего мы собственно и хотели. Все предельно просто, но есть камни.
<h3>Подводные камни</h3>
После тех 62.5% весь текст на страничке должен быть якобы размером 10пикселов, но для заголовков и инпут полей это не сработает, не стоит удивляться, нужно отдельно задавать размеры что бы они подействовали:
<ol class="code">
<li>input,select{font-size:1.1em}</li>
<li>h1,h2,h3,h4{font-size:2em}</li>
</ol>
Подобные же несуразности возможны и для таблиц.
<p>Во вторых если у вас есть сложные многоуровневые конструкции, к примеру вложенный список:</p>
<ol class="code">
<li><ul id="nav"></li>
<li class="tab"><li></li>
<li class="tabtab"><ul></li>
<li class="tabtab"><li>...</li></li>
<li class="tabtab"></ul></li>
<li class="tab"></li></li>
<li></ul></li>
</ol>
то задав
<ol class="code">
<li>#nav li{font-size:1.1em}</li>
</ol>
Вы фактически зададите 1.1em и для #nav li и #nav li li (элементов вложенного списка), и таким образом во вложенном списке размер шрифта будет не 11пикселов, как ожидалось, а 1.1*1.1 ~ 1.2 - то бишь 12 пикселов. Потому что 1.1 для вложенного списка будет считаться от 1.1 для внешнего - и они попросту перемножатся.
<p>Потому для вложенного списка нужно задавать 1.1/1.1~1em (желаемый размер в емах нужно делить на тот который сейчас получился из-за наследования, для 10 пикселов надо было 1.0/1.1=0.91) Тогда после дописания</p>
<ol class="code">
<li>#nav li li{font-size:.1em} <small>/* 1em для 11px, либо 0.91em для 10px */</small></li>
</ol>
размеры шрифта в обоих списках будут по 11 пикселов(при дефолтовом размере шрифта в броузере).
<p>Об em нужно думать как о процентах 1.1=110%, 1=100%, в принципе в любом месте кода теперь <code>font-size:110%</code> и <code>font-size:1.1em</code> - будут абсолютно эквивалентны. И нужно помнить что проценты умножаются</p>
<p>Существуют так же способы в которых для body используется 100%(16px) или 76%(0.76*16~=12) - но в моем способе рассчеты размеров наиболее просты и глюков в нем я пока не заметил, потому остаюсь при своих. Если вы знаете какой либо глюк в нем буду рад услышать и проапдейтить пост.</p>
<h3>Как перейти с пикселов на ЕМы</h3>
Таким образом если вы все еще используете пикселы вместо ЕМов, просто вставляете размер в процентах для body, а затем последовательно заменяете все 11px на 1.1em, 12px на 1.2em, 9px на 0.9em и так далее, <strong>но с учетом подводных камней описанных выше</strong> - избегайте более чем двухразового наследования. Иначе потом становится трудно считать размеры шрифта вложенных элементов. Вдобавок при увеличении шрифта в броузерах размеры могут начать расти заметно быстрее чем хотелось бы.
<h3>В конце</h3>
Надеюсь кому то это поможет избавиться от атавизма в виде пиксельных шрифтов :). Хотя если бы не ИЕ то они были бы единственно правильным способом задавания шрифтов, ИМХО.
Работает во всех современных броузерах, для 5го ИЕ требуется немного лишнего кода(см. ссылки внизу), после которого и он работает корректно. Никаких глюков с данным способом указания шрифтов мною пока не было замечено.
Ссылки по теме:
<ul>
<li><a href="http://clagnut.com/blog/348/">How to size text using ems</a> - эта заметка помогла мне забыть про пикселы</li>
<li><a href="http://clagnut.com/blog/348/#c790">Легкое изменение техники для корректной работы в IE5/Win</a></li>
<li><a href="http://www.thenoodleincident.com/tutorials/box_lesson/font/">Text sizing</a> - тесты множества способов задавания размеров шрифта</li>
<li>Последние споры в рунете: <a href="http://pepelsbey.net/webdev/2006/10/08/mashtabnyie-tonkosti/">pepelsbey</a> & <a href="http://www.mauzon.com/?p=77">mauzon</a></li>
<li><a href="http://akella.org.ua/pro/portal/">Пример использования в моей верстке</a> - далек от совершенства, но шрифты сделаны именно так как в посте.</li>
</ul>
<p><strong>Если вы знаете другие способы или какие то уточнения и апгрейды(глюки) к этому методу буду рад услышать!</strong><br />
Учиться никогда не поздно.</p>
br{display:none}
2006-08-20T00:00:00Z
https://cssing.org.ua/2006/08/20/styling-br-display-none/
<p>Для меня такое правило в CSS еще недавно было удивительным, хотя может просто не было задач для него подходящих. Тем не менее, совсем недавно оно помогло решить одну не совсем тривиальную задачу. Проблема и решение...<!--more--></p>
<h3>Задача</h3>
Имеется у нас кусок HTML кода, примерно такого вида(так называемый информер ukr.net)
<ol class="code">
<li><a href="#">Link</a><br /></li>
<li><a href="#">Link</a><br /></li>
<li><a href="#">Link</a><br /></li>
</ol>
Такой вот список линков, за разметку конечно меня можно казнить(по хорошему здесь надо использовать UL), но к сожалению, не я занимался этим проектом. Выглядит примерно так:
<img src="https://cssing.org.ua/images/nobr.gif" alt="линки в куче, невозможно разорать где один кончается и начинается другой" title="линки в куче, невозможно разорать где один кончается и начинается другой" />
По условию задачи, HTML <strong>изменять нельзя</strong> - ясно что эти информеры стоят еще на десятках сайтов, и просто так сменить код не получится.(хотя можно было пытаться поизвращаться над серверной частью, но я сторонник вынесения таких вещей в CSS).
Итак собственно требование - нужно каким то образом научится менять расстояние по вертикали между линками. То бишь сделать отступы вверх и вниз от каждого линка.
<h3>Решение</h3>
Конечно просто сами просятся сюда такие свойства как:
<ol class="code">
<li>a{padding-top:...}</li>
<li>a{margin-top:...}</li>
</ol>
Однако, так же очевидно эти свойства не сработают, ибо как известно они задаются для блочных(block) элементов, и на Inline'овые, как наш <strong>a</strong>, просто не подействуют.
<p>Тогда следуя простой логике, что бы наши padding и margin стали работать, дописываем:</p>
<ol class="code">
<li>a{display:block}</li>
</ol>
В результате имеем вот такую картину(без margin и padding):
<img src="https://cssing.org.ua/images/2br2.gif" />
Между линками образовался двойной перенос строки. Однако все логично - каждый линк стал блочным элементом - это один перенос строки + оставшиеся BR - второй перенос строки. В результате имеем гигантское пространство между линками, намного больше чем нам нужно.
И вот тут меня и спасло это не совсем стандартное правило:
<ol class="code">
<li><strong>br{display:none}</strong></li>
</ol>
Пока я его писал, я вообще был неуверен что оно сработает, однако после того как оно сработало - переносы строк просто исчезли, теперь уже кажется что по другому просто и быть не могло. :)
<p>Таким образом после написания этого правила, все переносы строк в HTML аннулируются, и задав небольшой margin я заимел то что и хотел:<br />
<img src="https://cssing.org.ua/images/1br.gif" /><br />
По сути действие br{display:none} очевидно, оно заставляет отображаться страницу так, как будто <br /> там никогда и не было.</p>
<p>Конечно было и второе решение этой задачи - вместо убирания br, можно было использовать отрицательный margin по вертикали для ссылок, но решение с br показалось мне намного красивее и, теперь уже, очевидней.</p>
<h3>Конец</h3>
Несмотря на очевидность и простоту, я как то раньше не встречался с таким решением, наверное оно достаточно узкоприменимое. Однако по крайней мере знать что так можно, я думаю невредно. Все же лучше использовать семантический HTML нетрубующий таких нестандартных решений. Надеюсь все же кому то оно упростит жизнь когда-нибудь.
Живьем это сейчас висит на поиске от <a href="http://search.ukr.net/search.php?search_mode=ordinal&search_query=%E4%F0%EE%F2%E8%EA%E8&PerformSearch=%CF%EE%E8%F1%EA&geo=0">ukr.net</a>
<p>Всегда рад услышать чужой опыт по этому поводу, или просто мысли!</p>
Перерыв, Тарханкут и отличный магистр математики
2006-07-17T00:00:00Z
https://cssing.org.ua/2006/07/17/otpusk/
<p>Я еще не умер. Но жизнь полна забот, а потому я взял перерыв. Это не оправдание - но на неуверенную отмазку тянет :).<br />
Во-первых я стал магистром математики, с отличием. Чему я несказанно рад. Наконец-то 6 лет учебы позади и вроде как началось... что-то. А вот что, я придумаю только после отпуска который я взял, и который во-вторых :). Далее следуют несколько фотографий с Тарханкута. (это крайний западный мыс Крыма, 100км от Евпатории). Я уже писал об этом - пост <a href="http://cssing.org.ua/2004/08/28/tarhankut/">"Тарханкут"</a>. Фотки, что называется "под катом".</p>
<p>Надеюсь читатели отнесутся с пониманием к такому большому перерыву на блоге, не каждый день вручают такие дипломы.<!--more--></p>
<p>Так называемая скала Черепаха на закате. Голова справа. )<br />
<a href="http://www.flickr.com/photos/akella/191936718/" title="скала Черепаха"><img src="http://static.flickr.com/49/191936718_abf8c971bf.jpg" width="420" height="283" alt="скала Черепаха" /></a><br />
Она же но сверху. Там где зелена вода глубина метров 7, то есть рядом отвесная подводная скала с пещерами. Ныряли в пещеры без аквалангов? Оно того стоит. Акваланги для слабаков )<br />
<a href="http://www.flickr.com/photos/akella/191936251/" title="скала Черепаха сверху"><img src="http://static.flickr.com/73/191936251_8737bad29e.jpg" width="420" height="283" alt="скала Черепаха сверху" /></a><br />
Панорама открывавшаяся из палатки(без скал, которые сзади):</p>
<div style="overflow:auto;width:423px;height:250px;">
<a href="http://www.flickr.com/photos/akella/191936643/" title="панорамный вид из палатки"><img src="http://static.flickr.com/57/191936643_c0a096fe09_b.jpg" width="1024" height="223" alt="панорамный вид из палатки" /></a>
</div>
Закат. Полный штиль.
<a href="http://www.flickr.com/photos/akella/191936024/" title="Тарханкутский фирменный закат"><img src="http://static.flickr.com/61/191936024_dada0de997.jpg" width="420" height="283" alt="Тарханкутский фирменный закат" /></a>
Такое вот там побережье.
<a href="http://www.flickr.com/photos/akella/191936434/" title="Просто скала, торчит"><img src="http://static.flickr.com/74/191936434_abc89cb1b7.jpg" width="420" height="283" alt="Просто скала, торчит" /></a>
Увеличенные версии и полная галерея в <a href="http://flickr.com/photos/akella/">моём фликере</a>.
Просто замечательный уголок - рекомендую, я там уже лет 10 отдыхаю.
Лучшего места понырять и уединиться от мира не найти. Выкладывать фотки сьеденных там крабов, рапанов, мидий и рыбы наверно не стоит... проявлю гуманность :)
<p><strong>Искренне желаю всем отличных отпусков!</strong></p>
Идея раздвижных дверей в CSS
2006-06-08T00:00:00Z
https://cssing.org.ua/2006/06/08/css-sliding-doors/
<p>Наверное одна из первых статей про CSS, которая меня захватила, была "<a href="http://www.id-as.com/arts/ala/slidingdoors/">Раздвижные двери CSS</a>" (<a href="http://www.id-as.com/arts/ala/slidingdoors2/">и вторая часть</a>)(<a href="https://cssing.org.ua/2006/06/08/css-sliding-doors/www.alistapart.com/articles/slidingdoors/">оригинал</a>). Мне понравилось, что для решения некоторых проблем верстки порой нужно хоть и чуть-чуть, но нестандартно мыслить. В результате эта идея(раздвижных дверей) несколько раз сэкономила мне время. Вот пара применений, из которых Вы, я надеюсь, уловите идею и может быть она кому то поможет. И хотя многие наверняка знакомы с ней, тем не менее...<!--more--></p>
<h3>Раздвижные двери на ukr.net</h3>
Когда то давно на сайте укр.нет, еще когда я его первый раз переделывал (<a href="http://cssing.org.ua/examples/ukrnet/">вот тут вариант</a>) была желтая область для поиска, она задавалась в фоне одной картинкой - <a href="http://cssing.org.ua/examples/ukrnet/pic/bg_search.gif">вот такой вот большой</a> и выглядело вот так:
<img src="https://cssing.org.ua/images/ukrnet-2.png" />
Однако позднее понадобился редизайн, где эта область начинала занимать две трети колонки. А сейчас она вообще в ширину средней колонки - <a href="http://www.ukr.net/">сами посмотрите</a>:
<img src="https://cssing.org.ua/images/ukrnet-1.png" />
Естественно, когда запахло первым изменением ее ширины мне было лень перерисовывать картинку в нужную ширину. Конечно захотелось сделать это как то более ширино-независимо.(наверно, потому что я знал, что ее ширина еще 10 раз изменится). На помощь пришли "раздвижные двери".
Итак, задача:<strong> была область широкая с одной фоновой картинкой. Как, не перерисовывая картинку, сделать область уже, и тоже с круглыми краями?</strong>
Вот такой там был код HTML(и сейчас такой):
<ol class="code">
<li><!-- #searchrow --></li>
<li><div id="searchrow"></li>
<li class="tab"><form ></li>
<li class="tab">...</li>
<li class="tab"></form></li>
<li></div></li>
<li><!--END #searchrow --></li>
</ol>
Для начала зададим этот фон(большой который) для внешнего дива:
<ol class="code">
<li>#searchrow{</li>
<li class="tab">height:60px;</li>
<li class="tab">background: #fff url(pic/bg_search.gif) no-repeat 100% 0;</li>
</ol>
Вот что выйдет:
<img src="https://cssing.org.ua/images/ukrnet-3.png" />
Слева край не круглый.
Тогда добавим еще для формы:
<ol class="code">
<li>#searchrow form{</li>
<li class="tab">height:60px;<small>/*для одинаковой высоты*/</small></li>
<li class="tab">background: transparent url(pic/bg_search.gif) no-repeat 0 0;</li>
</ol>
Получим вот что:
<img src="https://cssing.org.ua/images/ukrnet-5.png" />
Сейчас у нас две картинки фоновых - одна поверх другой. Осталось раздвинуть двери:
<ol class="code">
<li>#searchrow {</li>
<li class="tab">padding-right:10px;</li>
</ol>
В результате:
<img src="https://cssing.org.ua/images/ukrnet-6.png" />
То что нужно. Блок формы (#searchrow form) отодвинулся:
<img src="https://cssing.org.ua/images/ukrnet-8.png" />
И если вы не умея рисовать в Фотошопе попробуете это изобразить для своего поста на блоге (что бы <strong>всем</strong> стало понятно), то выйдет(заодно прокляв маленькую ширину контент-области на блоге :)):
<img src="https://cssing.org.ua/images/ukrnet-7.gif" />
(<a href="http://cssing.org.ua/images/ukrnet-4.png">а здесь чуть больше</a>)
Если попытаться представить себе это то - мы как бы отодвинули одну дверку - из-за которой стал светить нижний фон.
Вот таким вот образом с помощью все той же большой картинки получилось сделать желтую область с круглыми краями для произвольной длины блока - ограниченной конечно шириной большой желтой картинки.
<p>Может из-за многословности(многокартинковости) красота идеи немного смазалась - но оглянитесь, 3-4 строчки ЦСС сэкономили нам открытие фотошопа. Мне кажется это немало.</p>
<h3>Вообще</h3>
Вообще же очевидно что присобачить эту идею(как и любую хорошую идею) можно к чему угодно. Раздвигать двери можно и по вертикали. <a href="http://cssing.org.ua/examples/sliding/">Вот тут</a> например я их развиднул по вертикали.(опять же для круглых краев, красным и зеленым обозначены "двери")
Стоит вспомнить оригинальную статью Дага Баумана где он их раздвигал для навигации. Для ее(идеи) применения достаточно ее прочувствовать, сделать своей, или украсть как я это называю. :)
Впрочем не такая она сложная, и я уверен что многие ее с успехом применяли, но надеюсь кому то это все же поможет.
<h3>Ссылки по этой теме</h3>
Пытался быть максимально понятным, но вот еще информация по этой теме:
<ul>
<li><a href="http://www.alistapart.com/articles/slidingdoors/">Sliding Doors of CSS</a> (<a href="http://www.alistapart.com/articles/slidingdoors2/">part 2</a>) - оригинальная статья Дага Баумана</li>
<li><a href="http://www.id-as.com/arts/ala/slidingdoors/">Раздвижные двери CSS</a> (и <a href="http://www.id-as.com/arts/ala/slidingdoors2/">вторая часть</a>) - переводы Андрея Смирнова</li>
</ul>
Дротики - офисный релакс
2006-05-09T00:00:00Z
https://cssing.org.ua/2006/05/09/office-darts/
<p>В моей CSSной жизни затишье, потому напишу хоть об изобретении, которое родилось у нас в офисе, и надеюсь, не убьет вашу работу. Чтобы ваши RSS ридеры не расслаблялись =).</p>
<!--more-->
<h3>Составляющие</h3>
Все до безобразия просто - четыре спички, кусочек изоленты, самая обычная скрепка, и квадратная бумажка. Позже понадобится мишень - но это мелочи.
<img src="https://cssing.org.ua/images/d1.jpg" alt="составляющие" />
Из этого всего нетрудно получить вот такое чудо:<span style="color:#999">(сначала стабилизатор вставляется между 4х спичек, потом все это перематывается изолентой, после чего можно вставлять разогнутую скрепку)</span>
<img src="https://cssing.org.ua/images/d2.jpg" alt="дротик" />
Стабилизаторы на любой вкус :) После долгих экспериментов с аэродинамикой - лучший вариант полукруглое оперение. Кстати если скрепку обрезать ножницами под углом - то есть "заточить", то дротики начинают втыкаться буквально во все.
<img src="https://cssing.org.ua/images/d3.jpg" alt="много дротиков" />
Дротики без проблем втыкаются в стены, но лучше все же использовать ящики из под мониторов и тому подобный картон. Вот как выглядит наша мишень после нескольких чемпионатов:
<img src="https://cssing.org.ua/images/d4.jpg" alt="наша мишень с дротиками" />
Все копирайты на создание дротиков из скрепок принадлежат моему соседу по офису - <a href="http://www.livejournal.com/~zomb">Zomb</a>'у :)
Пользуясь случаем, напоминаю ему, что последний чемп за мной.
<h3>В конце</h3>
Вот такое нехитрое изобретение заметно скрасило будни рабочих людей :). В детстве я делал такие же, но с иголками вместо скрепок, и нитками вместо изоленты. Но я и не подозревал какой боевой потенциал таится в скрепках Буквально чувствуешь себя Мошковым в "Охоте на пиранью" который из чужих волос делает тетиву лука. :)
CSS Naked Day
2006-04-05T00:00:00Z
https://cssing.org.ua/2006/04/05/css-naked-day/
<p>Праздную :). Сегодня работаем без стилей... Проверка на семантику кода ;)<br />
Как по мне замечательная идея. На <a href="http://naked.dustindiaz.com/">официальной страничке</a> я под именем akella.<br />
Как вам идея? А обесстиленная версия? ;)</p>
Графики
2006-03-07T00:00:00Z
https://cssing.org.ua/2006/03/07/css-bar-graphs/
<p>Недавно пришлось делать графики для процентных соотношений политических партий. Вышли довольно забавные варианты - делюсь.</p>
<p>Наверно все же и у меня есть <strong>читательницы</strong>. Всех их поздравляю с наступающим!!! :)<!--more--></p>
<h3>Что именно</h3>
<a href="http://cssing.org.ua/examples/graphs/">Тут можно посмотреть пример</a>. Как говорится это не rocket science. Тут все просто и вряд ли применяется какой то авангард. Но меня привлекает такой вид графиков и то как они просто получились - авось кому сгодится. Вот скрин для тех кто поленился кляцать:
<img class="center" src="http://cssing.org.ua/examples/graphs/graph.gif" alt="мои графики" />
Делал я их именно так - с помощью HTML-кода, а не ПХП библиотек или флеш штучек потому что так было проще :). А я никогда не ищу сложных путей. (почти)
<h3>HTML</h3>
Разумеется в основу всего этого я положил более или менее семантический с моей точки зрения код:
<ol class="code">
<li><div class="b-graph"></li>
<li><small><!-- классы e1-e12 нужны для позиций колонок --></small></li>
<li class="tab"><ul <strong>class="e1"></strong></li>
<li class="tab"></ul></li>
<li class="tab"><ul class="e2"></li>
<li class="tab">...</li>
<li class="tab"></ul></li>
<li class="tab"><ul class="e12"></li>
<li class="tab"></ul></li>
<li></div></li>
</ol>
Где каждый ul есть как раз та разноцветаня колонка из первого графика в примере. Как легко догадаться каждый из элементов списка является "прослойкой" цвета в колонках. Внутри списков примерно такой код:
<ol class="code">
<li><li <strong>class="c1"</strong> style="height: 14px;"></li>
<li class="tab"><span></li>
<li class="tabtab"><span class="hide">Название партии</span>14%</li>
<li class="tab"></span></li>
<li></li></li>
<li><li <strong>class="c2"</strong> style="height: 19px;"><span><span class="hide">Название партии</span>19%</span></li></li>
</ol>
Номер каждого класса c1 c2 ... с6 отвечает просто за цвет прослойки. Так как в каждой колонке они в одном порядке - нет ничего проще как в PHPшном цикле его расставлять.
<p>Название партии я скрывал через CSS, а позднее и вообще решил убрать из кода - разумеется это <strong>не совсем правильно</strong>. Но по статистике там не было слепых пользователей и мобильных :(. Да и SEO была неактуальна в контексте проекта.</p>
<p>Вместо этого я добавил центрирование по вертикали. Как вы возможно уже знаете, при указании одинаковой height и line-height - одна строка текста внутри блока центрируется по вертикали (<a href="http://cssing.org.ua/2005/07/14/vertical-align-middle/">уже писал</a>) А у нас как раз одна строка с процентами. :) Вот и хорошо.</p>
<ol class="code">
<li><li class="c1" style="height: 14px;"></li>
<li class="tab"><span <strong>style="height: 14px; line-height: 14px;"</strong>></li>
<li class="tabtab">14%</li>
<li class="tab"></span></li>
<li></li></li>
<li><li class="c2" style="height: 19px;"><span <strong>style="height: 19px; line-height: 19px;"</strong>>19</span></li></li>
</ol>
И так как за некоторые партии голосовало слишком мало народу - так что цифры попросту не влезали в эту прослойку - я расставлял через движок класс class="view" для тех у кого достаточно места для показа процентов, примерно так:
<ol class="code">
<li><li class="c1" style="height: 14px;"></li>
<li class="tab"><span <strong>class="view"</strong> style="height: 14px; line-height: 14px;"></li>
<li class="tabtab">14%</li>
<li class="tab"></span></li>
<li></li></li>
</ol>
<p>В результате при отключенных стилях мы бы имели что то вроде десятка списков с названиями партий и их процентами. Для полной доступности стоило конечно добавить туда еще и дату - так как каждая колонка соответствовала дате. Но по некоторым причинам(для тех кто не понял это лень и нехватка времени :)) пришлось ограничиться картинкой которую мне любезно предоставил ПМ. На ней уже были даты.</p>
<p>Вобщем и целом я думаю маркап довольно хороший, как для такой сложно структурированной инфы. С мобилы читается на ура.</p>
<h3>CSS</h3>
Подготовил поле:
<ol class="code">
<li>.b-graph {</li>
<li class="tab">width:532px;</li>
<li class="tab">height:297px;</li>
<li class="tab">background:transparent url(b-graph.gif) no-repeat 0 0;</li>
<li class="tab">position:relative;<small>/* для позиционирования колонок внутри*/</small></li>
<li>}</li>
</ol>
Затем стили для колонок и цвета для полосочек
<ol class="code">
<li>.b-graph ul{</li>
<li class="tab">position:absolute;</li>
<li class="tab">bottom:18px;<small>/* что бы низ колонок совпал с рисунком графика*/</small></li>
<li class="tab">width:30px;<small>/* собссно ширина*/</small></li>
<li>}</li>
<li>с<strong>i</strong>{background:#<strong>xxx</strong>} <small>/* у меня 6 раз*/</small></li>
</ol>
И наконец самое слабое место метода как по мне - позиционирование каждой колонки - так как страница с ограниченной шириной, то в моем случае их кол-во было не очень большим - поэтому я и использовал 13 разных классов для их позиционирования:
<ol class="code">
<li>.e1{left:37px;}</li>
<li>.e2{left:72px;}</li>
<li>...</li>
<li>.e13{left:457px;}</li>
</ol>
Таким образом я их разместил через одинаковое расстояние, точно подгадав под фоновую картинку для графика.
Однако это и есть главный недостаток - так как писать такой код довольно неудобно - да и приходится при увеличении колонок его дописывать. Возможно сделаю более универсальную версию...
<p><a href="http://cssing.org.ua/examples/graphs/">Вот что получилось</a>.</p>
<p>К сожалению проблему whitespace между элементами списка в ИЕ 5.0 мне так и не удалось решить. Но ввиду его малого кол-ва, я про него "забыл". Вообще же можно было отдавать отдельный CSS. Либо использовать какой то немного другой код. Хотя я еще не оставил надежды побороть таки глюк каким нить хаком :)</p>
<p>В остальных же всех броузерах работает отлично :)</p>
<p>Вот такие наскоро склепанные графики получились. Те что ниже и выглядят попроще построены по абсолютно такому же принципу - просто на одно измерение меньше.<br />
Буду рад если кому то пригодится. Нет предела фантазии поиграться с фоном колонок :). Жаль есть предел времени. Но как по мне получилось довольно занятно, я таких графиков у наших "гуру" еще не видел :P.</p>
<p><strong>Ваши предложения и замечания, комментарии приветствуются!</strong></p>
<h3>Ссылки</h3>
Еще про это писали:
<ul>
<li><a href="http://cssing.org.ua/examples/graphs/">Мои графики</a></li>
<li><a href="http://meyerweb.com/eric/thoughts/2005/12/20/bar-graphs-with-style">Bar Graphs With Style</a></li>
<li><a href="http://www.splintered.co.uk/experiments/57/">CSS bar graphs</a> и <a href="http://www.splintered.co.uk/experiments/archives/css_bar_graphs/">ссылка на пример</a></li>
<li><a href="http://apples-to-oranges.com/blog/article.aspx?id=55">CSS For Bar Graph</a></li>
<li><a href="http://www.terrill.ca/design/vertical_bar_graphs/">Похожая идея графиков</a> с отличной графической реализацией</li>
</ul>
принципы в основном похожие. Так что использовать нужно то, что удобно в данной ситуации. Ничего особо универсального нет.
Некоторые техники замены текста картинками (image replacement)
2006-02-23T00:00:00Z
https://cssing.org.ua/2006/02/23/image-replacement/
<p>Обзор некоторых способов замены текста картинками.<!--more--></p>
<h3>Зачем?</h3>
Часто хочется чтобы заголовки были красивыми, и не хочется себя ограничивать парой тройкой шрифтов пользователя (из тех что есть у всех) — тут и приходят на помощь способы заменить этот текст (оставить его в коде для поисковиков и других юзер агентов) на картинки или флэш. Итак для начала заменяем такой код на картинку:
<ol class="code">
<li><h1>Заголовок - картинка</h1></li>
</ol>
<h3>1. Способы без добавления HTML</h3>
Именно их я, как правило, и использую, если не нужно сильно заморачиваться на поддержке браузерами. Самые популярные:
<strong>1.</strong> LIR (<a href="http://www.moronicbajebus.com/playground/cssplay/image-replacement/">пример </a>) (так же известен как Phark Method)
<ol class="code">
<li>h1{</li>
<li class="tab">text-indent: -9000px;</li>
<li class="tab">overflow: hidden;</li>
<li class="tab">height:80px;width:200px;</li>
<li class="tab">background-image: url("img.gif");</li>
<li>}</li>
</ol>
Этот первый я чаще всего и применяю. Хотя при отключенных картинках мы не увидим ничего :(. Руководствуюсь принципом: «нефиг». :)
<p><strong>2.</strong> Метод Leahy/Langridge (<a href="http://www.kryogenix.org/code/browser/lir/">подробнее</a>)</p>
<ol class="code">
<li>h1{</li>
<li class="tab">padding: 80px 0 0 0;</li>
<li class="tab">overflow: hidden;</li>
<li class="tab">background-image: url("img.gif"); </li>
<li class="tab">height: 0px !important; <small>/* для большинства броузеров */</small></li>
<li class="tab">height /**/:80px; <small>/* для блочной модели IE5.5 */</small></li>
<li>}</li>
</ol>
Вместо 80px естественно нужно вставить свою высоту.
<p><strong>3.</strong> MIR (Malarkey Image Replacement) (<a href="http://www.stuffandnonsense.co.uk/archives/mir_image_replacement.html">подробнее</a>)</p>
<ol class="code">
<li>h1{</li>
<li class="tab">letter-spacing :-1000em;</li>
<li class="tab">height:80px;width:200px;</li>
<li class="tab">background-image: url("img.gif");</li>
<li>}</li>
</ol>
Довольно изящный метод.
Все три разумеется при отключенных картинках не покажут ничего. Следует это помнить. Доступность страдает, но иногда бывают ситуации в которых эти методы могут сильно выручить. <a href="http://cssing.org.ua/examples/ir/">Смотреть пример.</a>
<h3>2. Способы c добавлением HTML</h3>
<strong>1.</strong> Метод Pixy (<a href="http://wellstyled.com/css-replace-text-by-image.html">подробнее</a>)
<strong>HTML:</strong>
<ol class="code">
<li><h1>Заголовок - картинка<span></span></h1></li>
</ol>
<strong>CSS:</strong>
<ol class="code">
<li>h1{</li>
<li class="tab">margin:0; padding:0;</li>
<li class="tab">position:relative;</li>
<li class="tab">width:200px; height:80px;</li>
<li class="tab">overflow:hidden;</li>
<li>}</li>
<li>h1 span {</li>
<li class="tab">display:block;</li>
<li class="tab">position:absolute; left:0; top:0; z-index:1;</li>
<li class="tab">width:200px; height:80px;</li>
<li class="tab">background:url("img.gif") top left no-repeat;</li>
<li class="tab">}</li>
</ol>
Если картинки отключены текст будет видно. Один из лучших методов, главное не забыть вставить спан. По сути фоновая картинка ложится сверху на текст и при ее отсутствии текст просвечивает.
Есть еще несколько вариаций которые работают в тех же браузерах (ИЕ 5 и выше и все остальные более или менее новые) но отличаются немного структурой кода: <a href="http://levin.grundeis.net/files/20030809/alternatefir.html">Levin Alexander's</a> например.
<strong>2.</strong> Thierry Image (re)Placement (<a href="http://www.tjkdesign.com/articles/tip.asp">подробнее</a>)
<strong>HTML:</strong>
<ol class="code">
<li><h1><img src="pic.gif" />Заголовок - картинка</h1></li>
</ol>
<strong>CSS:</strong>
<ol class="code">
<li>h1 {</li>
<li class="tab">height:80px;</li>
<li class="tab">width:200px;</li>
<li class="tab">overflow:hidden;</li>
<li class="tab">position:relative;</li>
<li>}</li>
<li>h1 img {</li>
<li class="tab">z-index:1;</li>
<li class="tab">position:absolute;</li>
<li class="tab">top:0;</li>
<li class="tab">left:0;</li>
<li>}</li>
</ol>
<h3>Другие способы</h3>
Среди прочих нельзя не упомянуть <a href="http://www.mikeindustries.com/sifr/">sIFR</a> (и <a href="http://www.maratz.com/blog/archives/2006/01/16/multi-color-sifr-201/">неофициальные апгрейды</a> к нему) — замена с помощью флеша и джаваскрипта.
И некоторые методы замены картинками еще на сервере: <a href="http://www.alistapart.com/articles/dynatext">Dynamic Text Replacement</a> и на русском <a href="http://www.umade.ru/log/2006/01/167.html">PHP+CSS: Динамичеcкая замена текста</a>.
А так же то, к чему мы прийдем рано или поздно :), CSS3 метод замены текста:
<ol class="code">
<li>h1 {</li>
<li class="tab">content: url(img.gif);</li>
<li>}</li>
</ol>
Ну или простой и банальный font-face, который наконец заработает везде.
<h3>Ссылки</h3>
Собственно не такой же ж я умник что бы самому вот это все придумать. :)
К тому же это далеко не полный список методов, лишь те, которые я практикую и считаю удобными для себя.
<ul>
<li><a href="http://cssing.org.ua/examples/ir/">Мои примеры - для теста</a></li>
<li><a href="http://www.mezzoblue.com/tests/revised-image-replacement/">Revised Image Replacement</a></li>
<li><a href="http://css-discuss.incutio.com/?page=ImageReplacement">CSS Image Replacement and Alternatives to CSS Image Replacement</a></li>
</ul>
Линков из этих двух страничек хватит всерьез и надолго :)
С названиями полная путаница, поэтому называл я по имени того кто выше в гугле. Хоть для какой то ориентации.
Простой тултип или всплывающая подсказка
2006-02-15T00:00:00Z
https://cssing.org.ua/2006/02/15/css-tooltips/
<p>Довольно часто применяю этот простой прием, но еще о нем не рассказывал. Суть - при наведении мыши на определнный текст появляется краткое пояснение или расширенная информация рядом с текстом. <a href="http://cssing.org.ua/examples/csstooltip/">Вот пример</a>(и <a href="http://cssing.org.ua/examples/csstooltip/index1.html">пример для оперы</a> - оговорка одна - тултипы не должны перекрывать другие "тултипные" ссылки).<!--more--></p>
<h3>HTML</h3>
Так как :hover пока в ИЕ к сожалению поддерживается только для элемента a(ссылок) то вынужденный код - такой:
<ol class="code">
<li><a class="tt" href="#"> Текст ссылки</li>
<li><span>Пояснение к ссылке </span></li>
<li></a></li>
</ol>
Класс tt просто говорит о том что спан внутри таких ссылок будет отображаться по наведению мышки. Без CSS данная конструкция выглядит вполне логично. К тому же можно вспомнить о поисковой оптимизации и использовать <a href="http://agat.in/1/css-seo/">вот этот прием</a>.
<h3>CSS</h3>
Дело за малым - заставить это все работать :).
Вот такое простое CSS волшебство заставит тултип тултипиться :):
<ol class="code">
<li>a.tt span{</li>
<li class="tab">display:none;<small>/*собственно прячем тултип - пока мышь не наведена*/</small></li>
<li>}</li>
<li>a.tt:hover{</li>
<li class="tab">position:relative;<small>/*Ставим точку отсчета для тултипа внутрь данной ссылки*/</small></li>
<li class="tab">z-index:23;<small>/*это нужно что бы тултип показывался поверх этой и других ссылок*/</small></li>
<li>}</li>
<li>a.tt:hover span{</li>
<li class="tab">display:block;<small>/*показываем тултип при наведении*/</small></li>
<li class="tab">position:absolute;</li>
<li class="tab">top:-10px;</li>
<li class="tab">left:40px;<small>/*три строки для позиции тултипа относительно левого верхнего угла ссылки*/</small></li>
<li class="tab">z-index:22;<small>/*мне 22 + см. выше*/</small></li>
<li class="tab">background:#fafafa;<small>/*фон, что бы было видно тултип*/</small></li>
<li>}</li>
</ol>
Вот собственно и все. Остальное украшательсво. Рабочий пример <a href="http://cssing.org.ua/examples/csstooltip/">минимально приукрашенный</a> + <a href="http://akella.org.ua/pro/ratsystem/">пример из жизни</a> (даты 7 8 9 в календаре).
<h3>Конец</h3>
Вот такой до боли простой приемчик, нередко довольно эффектно выглядящий.
Конечно ему не тягаться с тултипами гоняющимися за курсором мыши. Но и им по простоте с ним не тягаться. :)
<ul>
<li><a href="http://cssing.org.ua/examples/csstooltip/">Мой пример</a></li>
<li><a href="http://cssing.org.ua/pro/ratsystem/index_.html">Из одной из страниц кторые я верстал</a> - навести мышь на 7-8-9 числа календаря</li>
<li><a href="http://www.meyerweb.com/eric/css/edge/popups/demo.html">Почти идентичный по реализации</a> - но другой по внешнему виду прием от Эрика Мейера</li>
</ul>
Авось кому сгодится...
<p class="update">
<img src="http://cssing.org.ua/wp-content/themes/akella/images/upd.gif" /> Попап имеет вредное свойство "залипать" в Опере. Точнее это Опера имеет вредное свойство оставлять попап видимым даже после отвода мышки от ссылки. Вредное свойство проявляется далеко не всегда.:-)
</p>
<p class="update" style="height:30px;">
<img src="http://cssing.org.ua/wp-content/themes/akella/images/upd.gif" /> <a href="http://cssing.org.ua/examples/csstooltip/index1.html">Вариант для оперы</a>
</p>
CSS для непослушных броузеров
2006-01-17T00:00:00Z
https://cssing.org.ua/2006/01/17/hacks-in-separate-stylesheet/
<p>Конечно все знают кучу всевозможных хаков для ИЕ, и * html и _height:0. Но порой этих хаков становится слишком много и разумнее их все впихнуть в отдельный CSS файл. О том как я это делаю я и написал.<!--more--></p>
<h3>Структура CSS файлов</h3>
Если <a href="http://cssing.org.ua/2005/08/24/my-xhtml-template/">кто помнит</a>(пост на эту тему), то я линкую из страниц на один CSS файл master.css. Примерно такого вида:
<ol class="code">
<li>@import url("base.css");</li>
<li>@import url("layout.css");</li>
<li>@import url("fonts.css");</li>
</ol>
Таким образом, если бы я мог добавить conditional comments типа
<ol class="code">
<li>...</li>
<li>@import url("fonts.css");</li>
<li>{только для ИЕ5}</li>
<li class="tab">@import url("fonts.css");</li>
<li>{/только для ИЕ5}</li>
</ol>
То я бы был несказанно рад. Сразу оговорюсь что весь этот сыр бор из-за того что мне не очень нравится замусоривать HEAD красивых HTML файлов всякими вот такими штучками:(<a href="http://www.quirksmode.org/css/condcom.html">conditional comments</a>)
<ol class="code">
<li><!--[if IE]></li>
<li><style></li>
<li class="tab">...</li>
<li></style></li>
<li><![endif]--></li>
</ol>
Мне это кажется неэстетичным :). Поэтому я люблю перенести весь этот бред с определением броузеров в малюсенький CSS файл и забыть навсегда. (я о нем по любому забуду, но в HTML он все же будет иногда напоминать о себе)
<h3>Волшебство</h3>
То есть дело лишь за тем, что бы реализовать вот это <strong>{только для ИЕ5}</strong> внутри CSS.
<p>Ну а дальше дело техники. Всем известный <a href="http://tantek.com/">Тантек Селик</a> который знает о броузерах не понаслышке :) подарил нам целый арсенал для таких фокусов.</p>
<p>Вот так выглядит теперь мой CSS файл master.css:</p>
<ol class="code">
<li>@import url("base.css");</li>
<li>@import url("layout.css");</li>
<li>@import url("fonts.css");</li>
<li>/* IE5/Win Only Styles(только для 5го Интеренет Эксплорера под винду)</li>
<li class="tab"> Uses the Mid Pass Filter:</li>
<li class="tab"> http://tantek.com/CSS/Examples/midpass.html</li>
<li>----------------------------------------------- */</li>
<li>@media tty {</li>
<li class="tab"> i{content:"";/*" "*/}} @import url('ie5win.css'); /*";}</li>
<li>}/* */</li>
</ol>
Вот собственно и все. Последний CSS файл увидит только лишь 5ый Эксплорер под виндой. Для меня такое отсеивание самое актуальное. Разумеется существует магия на любой вкус.
<p>Вот так можно "кормить" только ИЕ5 под Мак:</p>
<ol class="code">
<li>/* IE5/Mac Only Styles</li>
<li class="tab"> Uses the IE5/Mac Band Pass Filter:</li>
<li class="tab"> http://stopdesign.com/examples/ie5mac-bpf/</li>
<li>----------------------------------------------- */</li>
<li>/*\*//*/</li>
<li class="tab"> @import url("ie5mac.css");</li>
<li>/**/</li>
</ol>
Конкретно эти оба кусочка кода я позаимсвовал из CSS файла сайта <a href="http://stopdesign.com/">Дага Баумана</a>
<h3>Конец</h3>
Для тех кто использует conditional comments это конечно может и не пригодится. Но для меня это изящный способ от них уйти. Добавил себе в темплейт и горя не знаю :)
<h3>Ссылки</h3>
<ul>
<li><a href="http://stopdesign.com/css/050203/master.css">Оба хака в действии</a></li>
<li><a href="http://tantek.com/CSS/Examples/midpass.html">CSS для среднего звена броузеров ИЕ5-5.5 - Mid Pass Filter</a></li>
<li><a href="http://tantek.com/CSS/Examples/highpass.html">CSS только для самых новых броузеров - High Pass FIlter</a></li>
<li><a href="http://tantek.com/CSS/Examples/inlinehpf.html">Inline High Pass Filter</a> - первую половину одного CSS файла будут читать старые броузеры, а вторую только современные.</li>
<li><a href="http://stopdesign.com/examples/ie5mac-bpf/">IE5/Mac Band Pass Filter</a> - как отдать CSS только для ИЕ5 под Мак</li>
</ul>
Был бы рад услышать ваши мнения и идеи по этому вопросу.
cssing 2005
2005-12-27T00:00:00Z
https://cssing.org.ua/2005/12/27/cssing-highlights-2005/
<p>Всех с наступающим! :)<br />
Некоторые статьи с этого блога, которые вы могли пропустить из-за их "старости". Вобщем, просто подборка не самых плохих моих материалов 2005 года.<!--more--></p>
<h3>Посты</h3>
<ul>
<li><a href="http://cssing.org.ua/2005/01/19/aka-pull-quote/">Цитаты aka Pull Quote</a> - о том как делать красивые блоки с выделением важных частей текста - без лишнего HTML кода.</li>
<li><a href="http://cssing.org.ua/2005/02/16/ukrnet/">UkrNet!</a> - мой первый редизайн в стандартах посещаемого портала.</li>
<li><a href="http://cssing.org.ua/2005/02/25/xhtml-worth-or-not/">Настоящий XHTML или пока не стоит?</a> - мое видение спора о content negotiation - то бишь стоит ли отдавать XHTML как xhtml+xml или как text/html.</li>
<li><a href="http://cssing.org.ua/2005/03/21/useful-progs/">Мои полезности</a> - делился (а потом еще делились) полезными програмками - типа ФТП клиенты, текстовые редакторы и т д - каждодневные.</li>
<li><a href="http://cssing.org.ua/2005/04/07/gzipping-your-css/">Как сжимать CSS</a> - о том как сократить размер(для загрузки) раздувшихся CSS файлов.</li>
<li><a href="http://cssing.org.ua/2005/04/22/css-organization/">Структура CSS</a> - какими комментами размечать CSS файл для удобства. :) Животрепещущий вопрос для меня.</li>
<li><a href="http://cssing.org.ua/2005/06/09/css-selectors-weight/">Вес CSS селекторов</a> - о том какой селектор выигрывает - когда оба задают противоречивые CSS значения.</li>
<li><a href="http://cssing.org.ua/2005/06/29/css-layout/">Памятка по CSS layouts</a> - обзор различных способов для построения layout страниц - то есть разметки на колонки.</li>
<li><a href="http://cssing.org.ua/2005/07/03/display-table/">display:table</a> - использование малоизвестного CSS свойства для решения частой проблемы с floatами.</li>
<li><a href="http://cssing.org.ua/2005/07/14/vertical-align-middle/">vertical-align:middle</a> - вертикальное центрирование с помощью CSS - обзор техник.</li>
<li><a href="http://cssing.org.ua/2005/07/23/pravda-com-ua-web-standards/">pravda.com.ua!</a> - мой второй(и любимый) редизайн очень посещаемого украинского новостного ресурса - <a href="http://pravda.com.ua/">Украинская Правда</a></li>
<li><a href="http://cssing.org.ua/2005/07/29/css-banner-tip/">Маленькая хитрость с баннером</a> - очень простая "хитрость", как улучшить user experience от сайтов с баннерами вверху страницы. </li>
<li><a href="http://cssing.org.ua/2005/08/24/my-xhtml-template/">HTML заготовки</a> - шаблоны с которых мы обычно начинаем верстать сайты.</li>
<li><a href="http://cssing.org.ua/2005/08/28/time-management/">Управление временем</a> - алистапартовская байка про time management. Бородатая но все равно актуальная.</li>
<li><a href="http://cssing.org.ua/2005/09/02/min-width-for-ie/">min-width для IE</a> - обзор 3 способов как это лучше делать.</li>
<li><a href="http://cssing.org.ua/2005/09/27/preload-by-css/">Прелоад через CSS</a> - способы подзагрузки картинок без джаваскриптов - только с помощью CSS-триков.</li>
<li><a href="http://cssing.org.ua/2005/10/31/why-web-standards/">Зачем нужны вебстандарты (или бестабличная верстка)</a> - мое видение данного вопроса, который сейчас стал очень популярным в рунете.</li>
<li><a href="http://cssing.org.ua/2005/11/11/ie-magic/">Магия для IE</a> - некоторые почти мистические CSS свойства которые могут спасти от бед, таящихся в этом злобном броузере.</li>
<li><a href="http://cssing.org.ua/2005/11/24/css-simple-two-columns/">Как я делаю две колонки</a> - самые простыe две колонки которые только могут быть. Просто про две фиксированные колонки с помощью CSS.</li>
<li><a href="http://cssing.org.ua/2005/11/28/rasmus-30-second-ajax-tutorial-on-russian/">Аякс за 30 секунд</a> - перевод "вводной" по аяксу для начинающих - очень мне понравился - рекомендую.</li>
</ul>
Рад что иногда посты оказываются полезными кому то :)
<h3>HNY!</h3>
Всех еще раз с наступающим! :)
Коллеги слепили
2005-12-05T00:00:00Z
https://cssing.org.ua/2005/12/05/zy-and-infernal-cat/
<p>Прошу любить и жаловать: "<strong>Высаженный заец и инфернальный кот</strong>" - так я их решил назвать :)<br />
<img src="https://cssing.org.ua/images/zy.jpg" /><br />
<span style="color:#999">простите за качество - через мутное стекло фотал...</span><br />
Рекомендации по смене названия принимаются...</p>
Аякс за 30 секунд
2005-11-28T00:00:00Z
https://cssing.org.ua/2005/11/28/rasmus-30-second-ajax-tutorial-on-russian/
<p>Перевожу заметку с которой я начал свое знакомство с аяксом.<br />
Находится на <a href="http://rajshekhar.net/blog">сайте Rasmus'a</a> - <a href="http://rajshekhar.net/blog/archives/85-Rasmus-30-second-AJAX-Tutorial.html">Rasmus' 30 second AJAX Tutorial</a>.<br />
Мой вольный перевод.<!--more--><br />
Вообще сам Аякс я считаю немного обманом. Многие использовали те же самые приемы задолго до того как они вдруг стали "Аяксом". И эти вещи совсем не такие сложные как многие считают. Вот простой пример из одного из моих приложений.<br />
Сначала Javascript:</p>
<pre>
function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == 'Microsoft Internet Explorer'){
ro = new ActiveXObject('Microsoft.XMLHTTP');
}else{
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
function sndReq(action) {
http.open('get', 'rpc.php?action='+action);
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
var update = new Array();
if(response.indexOf('|' != -1)) {
update = response.split('|');
document.getElementById(update[0]).innerHTML = update[1];
}
}
}
</pre>
<p>Этот код создает обьект запроса, сам запрос и функцию для его принятия и распарсивания(по названиям, собственно, нетрудно догадаться). Для использования вам нужно включить этот скрипт в вашу страницу. (<code><script type="text/javascript" src="js.js"></script></code>)<br />
Теперь для того чтобы послать запрос нужно его прицепить к какому-нибудь событию. Например onclick или поместив прямо в href вот так:</p>
<ol class="code">
<li> <a href="javascript:sndReq('foo')">[foo]</a></li>
</ol>
Это означает что при клике на эту ссылку будет отослан вот такой запрос <strong>rpc.php?action=foo</strong>.
<p>В rpc.php у вас может быть примерно такой код:</p>
<ol class="code">
<li>switch($_REQUEST['action']) {</li>
<li class="tab">case 'foo': /*...action=foo...*/</li>
<li class="tabtab">/*<strong> тут например запрос к базе</strong>*/</li>
<li class="tabtab">echo "foo|foo done";</li>
<li class="tabtab"> break;</li>
<li class="tab">...</li>
<li>}</li>
</ol>
Теперь обратим внимание на handleResponse. Оно распарсивает строку "foo|foo done" и разделяет ее по символу '|'. Причем использует то что было до '|' - как id блока в HTML, а то что после - как новый innerHTML для этого блока. В данном случае, если у вас на странице есть вот такой HTML:
<ol class="code">
<li><div id="foo"></li>
<li></div></li>
</ol>
То как только вы кликните на ссылку, он динамически изменится на:
<ol class="code">
<li><div id="foo"></li>
<li>foo done</li>
<li></div></li>
</ol>
Вот собственно и все. Остальное лишь надстройка над этим простым скриптом. Заменяйте мой простой ответ от сервера "id|text" на более богатый формат XML, и делайте запрос сложнее чем просто с одной переменной. Перед тем как вы слепо установите одну из тысяч "AJAX" библиотек попробуйте сами добавить в этот скрипт нужный вам функционал, чтобы понять как именно оно работает и усложнить его ровно настолько насколько это вам нужно. Очень часто нужно не намного больше этого моего примера.
<p>Обобщить этот подход, например для отсылки нескольких переменных, было бы очень просто, примерно так:</p>
<ol class="code">
<li>function sndReqArg(action,arg) {</li>
<li class="tab">http.open('get', 'rpc.php?action='+action+'&arg='+arg);</li>
<li class="tab">http.onreadystatechange = handleResponse;</li>
<li class="tab">http.send(null);</li>
<li>}</li>
</ol>
<p>А функцию handleResponse можно легко расширить для более интересных целей, чем просто замещение содержимого ДИВа.</p>
<p>Автор - <a href="http://rajshekhar.net/blog">Rasmus</a></p>
<h3>В конце</h3>
Вот такая вот статейка. На ее базе мне например хватило 2Кб скрипта для создания вот <a href="http://cssing.org.ua/ajax/">такой вот фичи для укр.нета</a> (<a href="http://cssing.org.ua/examples/jx/u-jx.rar">исходники</a>). Не без помощи <a href="http://sudoku.org.ua/rus/">CB</a> правда. :) Джаваскриптер из меня все же слабенький.
Прошу прощения за местами косноязычный перевод - я старался :). Считаю это одним из лучших тюториалов для начала работы с аяксом.
<p>Хотя бы потому, что лично мне претит использовать все эти навороченные библиотеки. Это как использовать сложную ЦМС для сайта с 3 статическими страницами. Такие вот ассоциации. И это не говоря о пушках и воробьях.</p>
<p><strong>Ваше мнение по поводу тюториала приветствуется!</strong></p>
Как я делаю две колонки
2005-11-24T00:00:00Z
https://cssing.org.ua/2005/11/24/css-simple-two-columns/
<p>Мне кажется не лишним будет поделиться несколькими, для бывалых кодеров конечно очевидными, методами. Немало об этом написано - но никогда не лишне навести порядок в голове. Разумеется все без таблиц.<!--more--><br />
Очевидно - если вы умеете делать две колонки - ничего не стоит сделать их тремя - просто разбив одну из них опять на две. И так далее...</p>
<h3>Простые две колонки через CSS</h3>
Здесь я не буду описывать замороченные техники полурезиновых и на четверть эластичных дизайнов. Просто обычная фиксированная страница. Где размеры <strong><em>всех</em></strong> колонок указаны либо в <em>пикселах</em>, либо в <em>процентах</em>, либо в <em>EMах</em>. И имеем такой вот HTML:
<ol class="code">
<li><div id="wrap"></li>
<li></li>
<li class="tab"><div id="main"></li>
<li class="tab"></div></li>
<li></li>
<li class="tab"><div id="side"></li>
<li class="tab"></div></li>
<li></li>
<li></div></li>
</ol>
Вобщем далее HTML код меняться не будет. + для простоты буду считать что:
<ol class="code">
<li>#wrap{</li>
<li class="tab">width:700px;</li>
<li>}</li>
</ol>
<h3>FLOAT для двухколоночного дизайна</h3>
Проще всего сделать две колонки с помощью свойства FLOAT, вот так я их как правило и делаю: (<a href="http://www.ukr.net/">ukr.net</a>, <a href="http://pravda.com.ua/">pravda.com.ua</a>, <a href="http://cssing.org.ua/">cssing</a>)
<ol class="code">
<li>#main{</li>
<li class="tab"><strong>float:left;</strong></li>
<li class="tab">width:500px;</li>
<li>}</li>
<li>#side{</li>
<li class="tab"><strong>float:right;</strong></li>
<li class="tab">width:200px;</li>
<li>}</li>
</ol>
Еще можно так
<ol class="code">
<li>#main{</li>
<li class="tab"><strong>float:left;</strong></li>
<li class="tab">...</li>
<li>#side{</li>
<li class="tab"><strong>float:left;</strong></li>
<li class="tab">...</li>
</ol>
Вот и все. Для того что бы блок <strong>#wrap</strong> растянулся до своего содержимого(#side + #main) достаточно задать:
<ol class="code">
<li>#wrap{</li>
<li class="tab">overflow:hidden;</li>
<li>}</li>
</ol>
Вот <a href="https://cssing.org.ua/examples/2col/float.html">пример с заданными границами для наглядности</a>.(вариации с <a href="https://cssing.org.ua/examples/2col/2float.html">двумя float:left</a>)
Еще есть такая вариация:
<ol class="code">
<li>#main{</li>
<li class="tab"><strong>float:left;</strong></li>
<li class="tab">...</li>
<li>#side{</li>
<li class="tab"><strong>margin-left:500px;</strong></li>
<li class="tab">...</li>
</ol>
Но она самая негибкая и неверочная - <a href="http://cssing.org.ua/2004/11/16/strange-ie-6/">ломается в некоторых версиях ИЕ 6</a> - и вообще предпочитаю так никогда не делать. <a href="https://cssing.org.ua/examples/2col/1float.html">Пример</a>
<p>Из недостатков float методов - при переполнении одного из блоков - колонка может сползать(в ИЕ конечно). Но с этим можно и нужно бороться.</p>
<ul>
<li><a href="http://www.positioniseverything.net/explorer/expandingboxbug.html">Internet Explorer and the Expanding Box Problem</a></li>
</ul>
<h3>абсолютное позиционирование</h3>
Как известно "absolutные" блоки позиционируются относительно ближайших родительских relative-блоков. Как по мне, position:absolute - один из самых сильных инструментов в построении страниц.
Вот такой ЦСС построит нам две колонки.
<ol class="code">
<li>#wrap{</li>
<li class="tab">position:relative;</li>
<li>}</li>
<li>#main{</li>
<li class="tab"><strong>position:absolute;</strong></li>
<li class="tab"><strong>left:0;</strong></li>
<li class="tab">width:500px;</li>
<li>}</li>
<li>#side{</li>
<li class="tab"><strong>position:absolute;</strong></li>
<li class="tab"><strong>left:500px;</strong></li>
<li class="tab">width:200px;</li>
<li>}</li>
</ol>
<a href="https://cssing.org.ua/examples/2col/absolute.html">Вот пример с границами.</a>
Оговорка тут лишь одна - футер мы не сможем отобразить ниже обоих блоков - прийдется его "внедрить" в одну из колонок, Эта техника применяется например на <a href="http://ru.id-as.com/">http://ru.id-as.com/</a>, <a href="http://wired.com/">http://wired.com/</a>. Легко заметить, что футер всегда содержится в одной из колонок. Издержки метода. Зато во всем остальном он практически идеален :).
<h3>Конец</h3>
Естественно эти штуки можно применять не только для лэйаута страницы - но и для небольших элементов на ней. В тоже время в роли #wrap может выступать любой блок - даже body.
<p>Можно даже в какой-то мере сказать, что они помогают эмулировать таблицы - хотя я уже давно перестал думать таблицами. Но для тех кто еще думает...</p>
<p><strong>В любом случае всегда рад слышать уточнения, советы, Ваши мнения и техники!</strong></p>
Осенняя Евпатория
2005-11-22T00:00:00Z
https://cssing.org.ua/2005/11/22/sea-yevpatoriya/
<p>Люблю я море. В любом - даже таком грустном виде.<br />
<img src="https://cssing.org.ua/images/sea.jpg" alt="Причал в Евпатории - 21 ноября" title="Причал в Евпатории - 21 ноября" /></p>
Магия для IE
2005-11-11T00:00:00Z
https://cssing.org.ua/2005/11/11/ie-magic/
<p>Ни для кого не секрет что у интернет эксплорера полным полно разнообразных багов в поддержке CSS. Тот кто немного успел поверстать поймет - что часто большая часть времени уходит именно на их решение(а то и поиск), а не на саму верстку. Жаловаться на ИЕ и опускать руки тут бесполезно - он пока остается самым популярным броузером. Часто меня спасали эти несколько простых приемов.<!--more--></p>
<h3>Откуда магия</h3>
Большинство из этих магическик свойств напрямую связаны со <a href="http://www.satzansatz.de/cssd/onhavinglayout.html">свойством ИЕ - hasLayout</a>. Оно принципиально влияет на отображаемые ИЕ блоки. Вот это я и называю шаманством.
<h3>position:relative</h3>
Иногда родительские блоки с position:relative; просто перекрывают свои "внутренности" - в таких случаях спасает это свойство - для исчезнувшего блока. Вдобавок оно является одним из признаков по которому ИЕ наделяет блок hasLayout.
<p>Второе использование связано с отрицательными отступами. Если вы когда нибудь их использовали, и этот элемент выходил за пределы родительского блока - то часть вышедшая за пределы была попросту невидима в ИЕ. Выход тот же - <strong>position:relative;</strong> и все видно.</p>
<p>И что самое главноe, абсолютно безвреден для других броузеров. (если вы внутри этого блока не используете position:absolute;)</p>
<h3>height:0</h3>
Это мое любимое. Если юзать как <strong>_height:0</strong> - безвредно для всех. Воистину чудотворное свойство. Во первых блок растянется чтобы охватить все внутренние FLOAT блоки. То бишь никаких div class="clear" и тп для ИЕ уже не нужно выходит.
<p>Более того это свойство зарещает этому блоку <strong>обтекать</strong> что-либо. (<a href="http://cssing.org.ua/2005/07/03/display-table/">подробнее здесь</a>)</p>
<p>Вдобавок этот же хак(в этом варианте известный как Holly Hack) с <strong>height: 1%</strong>(что по сути то же самое) - позволяет побороть <a href="http://www.positioniseverything.net/explorer/threepxtest.html">3х пиксельную проблему у ИЕ.</a></p>
<p>Секрет в том, что если ИЕ видит высоту 0, он все-таки растягивает блок настолько сколько внутри контента - но при этом считает высоту <strong>заданной</strong>!. :) Что и добавляет блоку тот самый hasLayout. Ну чем не шаманство?</p>
<p>Короче height:0 для ИЕ - самое то. Я советую приправлять его <a href="http://www.wellstyled.com/css-underscore-hack.html"> "The Underscore Hack" (хак с подчеркиванием)</a>.</p>
<h3>Еще </h3>
Еще свойства которые могут помочь (имеют отношение к hasLayout):
<ul>
<li>display:inline display:inline-block</li>
<li>zoom:1</li>
<li>position: absolute</li>
<li>writing-mode: tb-rl</li>
</ul>
<h3>Как применять</h3>
Естественно - хотя и некоторые свойства безвредны - другие стоит все же спрятать от остальных броузеров. Можно это делать так: (в <head>)
<ol class="code">
<li> <!‒‒[if lt IE 7]><style>
</li><li class="tab"> /* стили для IE 6 + IE5.5 + IE5.0 */
</li><li class="tab"> .gainlayout { height: 0; }
</li><li></style><![endif]‒‒>
</li></ol>
это называется <a href="http://www.quirksmode.org/css/condcom.html">conditional comments</a>
Ну и все тот же хак:
<ol class="code">
<li>#for-iewin-only{</li>
<li class="tab">_height:0;</li>
<li>}</li>
</ol>
Свойство увидят только ИЕ под винду.
<h3>в конце</h3>
Просто полезно иметь под рукой пару свойств, которые не раз меня выручали. Иногда просто в отчаянии и надеясь на удачу можно поприменять их к чему-попало.
<p>Начинающим правда это не рекомендуется - так как часто то, что им кажется глюком на самом деле есть правильное отображение. Лучший выход сравнивать отображение в ИЕ, Опере и Файрфоксе. Если Опера и Мозилла все показывают нормально, а ИЕ глючит - скорее всего можно смело применять хаки.</p>
<p>Желательно все же знать <a href="http://www.positioniseverything.net/ie-primer.html">самые распространенные</a> глюки которыми грешит этот броузер.</p>
<p>Конечно хаки это зло - но с помощью некоторых методов мы можем их спрятать так что они не смогут принести вреда в будущем и никак не пересекутся с другими "нормальными" CSS-свойствами.</p>
<h3>Ссылки</h3>
<ul>
<li><a href="http://www.communitymx.com/content/article.cfm?cid=C37E0&print=true">How To Attack An Internet Explorer (Win) Display Bug</a> - потомок старой статьи "Magic Bullets", которой и навеян этот пост</li>
<li><a href="http://www.satzansatz.de/cssd/onhavinglayout.html">On having layout</a> очень хорошее описание свойства hasLayout у ИЕ</li>
<li><a href="http://www.positioniseverything.net/ie-primer.html">Глюки ИЕ</a> собрание некоторых распространенных проблем с интернетом эксплорером</li>
</ul>
<p>А вы что думаете про хаки?</p>
cssing.org.ua
2005-11-10T00:00:00Z
https://cssing.org.ua/2005/11/10/cssing-org-ua/
<p>Переехал. Хостинг стал напрягать своими проблемами. Надеюсь здесь будет намного уютнее :). Кроме того тот хостинг грешил медлительностью для неукраинцев - узкий канал. Тут вроде ровнее.<br />
(Менять айпишник на <a href="http://cssing.iatp.org.ua/">cssing.iatp.org.ua</a> мне "типа" отказали.) Для переезда использовал мод_реврайт, надеюсь это окажется кому-то полезным. <!--more--></p>
<ol class="code">
<li>Options -Indexes +FollowSymLinks</li>
<li><IfModule mod_rewrite.c></li>
<li class="tab">RewriteEngine On</li>
<li class="tab">RewriteCond %{HTTP_HOST} cssing\.iatp\.org\.ua$ [NC] </li>
<li class="tab"><del>RewriteRule ^(.*)$ http://cssing.org.ua/$1 [R] </del></li>
<li class="tab">RewriteRule ^(.*)$ http://cssing.org.ua/$1 [R=301,L] </li>
<li></IfModule></li>
</ol>
(<a href="http://lvm.converters.ru/93/ru/article_210.html">позаимствовал</a>)
Можно и более простым способом(спасибо <a href="http://zaartix.ru/">zaARTix</a>):
<ol class="code">
<li>Options -Indexes +FollowSymLinks</li>
<li><IfModule mod_rewrite.c></li>
<li class="tab">Redirect permanent / http://cssing.org.ua/</li>
<li></IfModule></li>
</ol>
<p>А работает тут все явно быстрее :). Tnx 2 <strong>Vitos</strong> :).</p>
<p>Просьба всех кто ссылается поменять ссылку на меня в блогроллах - буду возвращать PR...</p>
Cеминар "поисковая оптимизация", Киев, 4 ноября
2005-11-05T00:00:00Z
https://cssing.org.ua/2005/11/05/seo-seminar-kiev/
<p>Первый раз в жизни был на подобном мероприятии. После него проникся желанием посетить нечто подобное по вебразработке(или даже вебстандартам) вообще. Ухх как было бы интересно :). Семинар "<a href="http://internet-marketing.org.ua/ru/seo_11_2005">поисковая оптимизация</a>"<br />
Небольшой отчет.<br />
<img src="https://cssing.org.ua/images/all-seo.jpg" alt="seoшники" title="seoшники" /><br />
<span style="color:#999">Заметьте как все подпирают головы - что-то профессиональное...</span></p>
<!--more-->
<h3>Вообще</h3>
Все было цивильно - поили кофе - кормили в ресторане. Сидеть - удобно, слушать - тоже. А учитывая что я пришел на халяву (500грн вообще то стоило) то вообще класс :). Принципиально нового, правда, ничего не услышал - но вот в голове теперь вся разрозненная инфа про оптимизацию <strong>очень</strong> хорошо структурировалась. Программа <a href="http://internet-marketing.org.ua/ru/seo_11_2005/program">валяется здесь</a>. Вкратце о каждом докладе.
<h3>WebCEO</h3>
Первый доклад попросту был описанием работы программы <a href="http://webceo.com/">WebCEO</a>. Какая она хорошая и удобная и т д. Однако заодно была описана стандартная схема работы оптимизатора, что как раз и систематизировало мои знания. В любом случае был неплохой доклад. Если бы прога была бесплатная я бы даже может когда-нить....Хотя вряд ли. :) Это скорее для тех у кому в день надо оптимизировать по 10 сайтов.
<h3>Методика подбора ключевых слов для международных поисковых систем.</h3>
Просто методика использования Overture и Wordtracker (а так же платного adwords) - подробно описали как же подбирать ключевые слова для построения семантического ядра и раскрутки буржуйских сайтов - оценивать частотность и т д.
<h3>Методы исследования аудитории сайтов, Санченко Антон</h3>
Вот это действительно интересно, было проведено исследование - есть ли какое-то значительное распределение тематических аудиторий среди поисковых систем.
<p>К примеру, есть миф о большей платежеспособности ползователей рамблера по сравнению с яндексом. На примере сотни сайтов разных тематик и их "логов" (в кавычках потому что для второй части исследования использовали счетчики liveinternet, репрезентативность которых поставил под сомнение <a href="http://searchengines.ru/blog/">г-н Петренко</a>). Однако в целом вывод: зависимость есть. Как минимум, те кто ищут слово "<strong>игры</strong>" чаще обращаются к гуглу чем те кто ищет слово "<strong>работа</strong>" (эти идут к яндексу):). Это если грубо и в двух словах. На самом деле по исследованиям яндекс почит везде выигрывал у гугла заметно, но по запросу "игры" они были почти равны. Все это в РУнете разумеется.</p>
<h3>Сети сайтов</h3>
Тут нам рассказали о том что такое "елочка"(она же кораблик), "пирамидка", "звездочка". И вообще о том как правильно строить сети сайтов. Главная мысль - участники сети не должны пересекаться своими семантическими ядрами. Которая однако вызвала спор и осталась под сомнением. Понятно только то, что ниче толком не понятно. Эту мудрую мысль вынес я из этого доклада.
<h3>Аудит сайтов</h3>
Вот это действительно мне показалось полезным - хотя по сути слова были все те же - но в нужном порядке. Докладчик пояснил на пальцах, что такое аудит сайта и как его продавать клиенту. С точки зрения начинающих SEO-специалистов - полезная инфа, хотя пока эти услуги и не так востребованы на нашем рынке.
<h3>Остальные</h3>
Все остальное не особо запомнилось - может просто дневной буфер переполнился. Говорили о том как правильно делать ссылки внутри сайта, методика раскрутки сайта(*.com.ua) регистрируя областные украинские поддомены(*.od.ua, *.kiev.ua) и еще много такого. Даже предоставили доклад на базе курса для оптимизаторов сайта <a href="http://raskrutka.com/">razkrutka.com</a>. Но запомнилось мало что. Мало было харизмы у докладчиков.
<p>Немного развлек последний докладчик - экспресс-аудит сайтов он производил. Прямо на наших глазах оценивал "правильность" тех или иных сайтов с точки зрения оптимизации. Было очень интересно. Красной нитью прошел вопрос "Где ашодин(h1)?!". :)</p>
<h3>Конец</h3>
В целом название <a href="http://blog.promosite.ru/">одного блога</a> "беспочвенные фантазии о поисковых системах" довольно метко отражает будни оптимизатора.
Короче было интересно. Страсть как захотелось что-нибудь подобное по веб-стандартам и веб-проектам организовать. Ведь есть же чем делиться. Можно спорить не пролистывая 52 коммента :)
Когда же это будет?
Зачем нужны вебстандарты (или бестабличная верстка)
2005-10-31T00:00:00Z
https://cssing.org.ua/2005/10/31/why-web-standards/
<p>Честно говоря, порядком надоели все эти споры, таблицы против ДИВов, дивы против таблиц и т п. Кто "круче". Как правило они все сводятся к конкретным примерам. Так называемые "табличники" кидают в бестабличников пример — мол, "а слабо такое без таблиц?". Те("бестабличники") предлагают или решение или разводят руками о невозможности(что бывает редко). Потом "враги" выдумывают новую задачку, или кидают новые примеры ненужности или несостоятельности такой верстки и наоборот. Пока всем не надоест.</p>
<p>Печально, что все уже давным давно забыли зачем это все было надо. Мое видение этого вопроса совпадает(какое совпадение ;)) с мнением Дага Баумана. Немного украду с его выступления + мои мысли....<!--more--></p>
<h3>Пример из жизни</h3>
Начну издалека. Вот покупаете вы ДВД с фильмом, довольные приносите его домой. Вставляете в плеер - а вам выдают что то вроде: "Ваш DVD диск не совместим с этим плеером". Ваши ощущения? Мысли?
Мне вот хочется поматериться, и сказать этим производителям, чтобы наконец придумали <strong>один стандарт</strong> дисков которые все плееры читают.
<p>Совершенно аналогичная ситуация, заходим на сайт: "Этот сайт оптимизирован только для Интернет Эксплорер 5 и выше". И увы и ах, если вы на линуксе или мак — до свиданья... Сейчас таких сайтов уже осталось мало. Но именно для этого и были созданы стандарты. Чтобы "помирить" разработчиков броузеров и вебсайтов. Что бы DVD <strong>всегда</strong> проигрывался. И у меня как разработчика была <strong>гарантия</strong>, что мой сайт (<em>DVD</em>) будет работать <strong>везде и всегда в будущем</strong>(<em>проигрываться</em>).</p>
<h3>Почему этот принцип актуален и сейчас</h3>
Потому что никаких особых изменений не произошло. Если раньше речь шла о доступности в разных броузерах, то сейчас на ее место встали проблемы доступности из телефонов и бог весть каких девайсов которые лазят в Интернет(нынче даже холодильники там шастают). Я молчу о скринридерах, принтерах и других устройствах.
<p>Соблюдение стандарта, разумеется, лишь ваше личное дело. Однако, как можно судить из истории с DVD — рано или поздно это становится законом.<br />
А так как я хочу быть профессионалом и с гордостью называть себя верстальщиком — то я использую стандарты. Не только букву, но и дух "закона". А это: семантика кода, доступность, правильное использование тагов, разделение информации и ее дизайна.</p>
<h3>Слово о таблицах</h3>
Опускаться до конкретики неприлично в данном случае. Но чем же так плохи таблицы?
Они просто вынудят вас делать отдельные версии для разных девайсов — а для чего же нам тогда нужны стандарты?! Все равно что выпускать 15 разных DVD с одним фильмом для 15 разных DVD-плееров. <strong>Мы просто замучаемся делать разные версии для всех этих девайсов, если не будем соблюдать стандарты.</strong>
<p>А стандарт нам для того и нужен что бы выпускали лишь одну версию для всех. Это всем удобнее. И пользователям, и производителям броузеров.</p>
<p>Таблицы это вобщем-то хак, чтобы отобразить на экране пользователя "дизайн", как того хочет дизайнер, наплевав на логику разметки. Вот и получаются "хаки": таблицы — что бы оптимизировать для броузеров, отдельные печатные версии — для принтеров, отдельные странички — для мобильных. А ведь все эти головные боли разработчиков и должен решать стандарт. Так зачем мы усложняем себе же жизнь?</p>
<p>Кроме того, стандарты <strong>всегда</strong> предполагают будущую совместимость. Таблицы лишь для "переходного" этапа который уже давно прошел. И сайты с таблицами мой мобильник УЖЕ не понимает =(, хотя это и не критерий, но косвенный признак.</p>
<h3>Заключение</h3>
Поправьте если я где то был не совсем корректен. Писал быстро в состоянии легкого аффекта после просмотра <a href="http://www.livejournal.com/community/ru_webdev/998225.html">очередной битвы</a>.
<p>У меня уже давно эти споры(tables vs divs) вызывают лишь покачивание головой &#8212 для нас же старались...Мне кажется им нужно лишь время чтобы понять.</p>
<p>Спор ведь не о том "как верстать", а о том "как правильно".</p>
<p><strong>Приветствую любое мнение по этому вопросу в комментах!</strong></p>
Посещенные ссылки
2005-10-26T00:00:00Z
https://cssing.org.ua/2005/10/26/visited-links/
<p>Долго не писал в блог - очень мало времени - потом понял, что все время искал нечто глобальное и большое. Теперь стратегию решил изменить, буду теперь писать чаще и мельчее. )</p>
<p>Маленький трик с посещенными ссылками для "хороших" броузеров.<br />
<strong>Update</strong>: дал маху - об этом уже написали <a href="http://www.umade.ru/log/2005/09/110.html">Посещенные ссылки. Visited links</a> - на Юмэйд. Ничего не воровал - просто дал маху :(.</p>
<!--more-->
<h3>Ставим галочки</h3>
Один из способов красиво выделить посещенные ссылки не используя картинки. Ближе к делу:
<ol class="code">
<li>a:visited:after {</li>
<li class="tab">content:"\00A0\2713";</li>
<li>}</li>
</ol>
Или так (так делает Майк Дэвидсон у себя на сайте - разницу будет трудно увидеть ):
<ol class="code">
<li>a:visited:after {</li>
<li class="tab">content: "\00A0\221A";</li>
<li class="tab">font-size: 75%;</li>
<li>}</li>
</ol>
Псевдокласс :after работает уже практически везде (кроме сами знаете кого ;)). Таким образом во всех(!ИЕ) броузерах посещенные линки выделятся примерно таким образом(картинки в порядке CSSов):
<p><img src="https://cssing.org.ua/images/rad1.gif" title="Roger Johansson метод" alt="Roger Johansson метод" /><img src="https://cssing.org.ua/images/rad2.gif" title="Mike Davidson метод" alt="Mike Davidson метод" /></p>
<p>Вот такие красивые радикальчики-галочки. Среди символов есть и настоящая "галочка" (check mark) - но она, к сожалению, отображается далеко не во всех броузерах..<br />
Если указывать символы не в юникоде, возникают проблемы c броузерами - посему все в таком неочевидном на первый взгляд виде. Однако же работает. А ИЕ... это его проблемы ;)</p>
<p>Вот такой маленький прием - вид конечно на любителя - но я думаю применение не настолько надуманное. Мне лично, очень даже нравится. Если в свободное время я выиграю "бой с ленью" то и себе такие сделаю :).</p>
<h3>Ссылки по теме</h3>
<ul>
<li><a href="http://www.456bereastreet.com/archive/200509/check_marking_visited_links/">Check marking visited links</a> - собственно эту заметку я перевел</li>
<li><a href="http://icant.co.uk/csstablegallery/index.php?css=36">Пример первого CSS кусочка</a></li>
<li><a href="http://www.mikeindustries.com/blog/archive/2004/06/radical-links">Майк Дэвидсон про этот же маленький прием - у него на сайте живой пример второго кусочка CSS</a></li>
<li><a href="http://www.unicode.org/charts/">Символы юникода</a></li>
<li><a href="http://www.digitalmediaminute.com/reference/entity/index.php">XHTML символы</a> - красиво и удобно</li>
<li><a href="http://www.collylogic.com/index.php?/weblog/comments/ticked_off_links_reloaded/">Более "продвинутый" вариант</a> - с картинками, а не радикалами</li>
</ul>
Встреча блоггеров номер 2
2005-10-12T00:00:00Z
https://cssing.org.ua/2005/10/12/second-ua-bloggers-meetup/
<p>Ну что сказать - надо чаще встречаться. Рассказывать ниче не буду - дабы создать интригу для последующих встреч. Но было интересно:). (кто бы сомневался)<br />
<img class="center" src="https://cssing.org.ua/images/bloggers.jpg" title="ua-bloggers" alt="ua-bloggers" /><br />
нас было 5ро, список, не считая меня:</p>
<ul>
<li><a href="http://www.otebe.com/">Aph1na</a></li>
<li><a href="http://wmas.in.ua/">wmas</a></li>
<li><a href="http://dnevnik.org.ua/">speed</a></li>
<li><a href="http://co-media.kiev.ua/"> /lekcyc lllumukyc</a></li>
</ul>
Фотки каминг сун.
Завидуйте, коллеги :)
2005-10-11T00:00:00Z
https://cssing.org.ua/2005/10/11/he-he/
<p>Сбылась одна из глупых мечт :) (tnx to Gaadi ;))...<br />
<img class="center" alt="akella wearing XHTML t-shirt" title="akella wearing XHTML t-shirt" src="https://cssing.org.ua/images/xhtml.jpg" /><br />
<span style="color:#999">(Звыняйте шо поверх - дубарь тут однако...)</span></p>
<p>Кому надо - брал <a href="http://alistapart.com/store/">тут</a>. Вроде еще остались ;)...</p>
Тестинг
2005-10-07T00:00:00Z
https://cssing.org.ua/2005/10/07/test-dialup/
<p>Отдам в хорошие руки карточки укр.нет на диалап доступ :) С коллбэк. Акция действительна до воскресенья.<!--more--><br />
На нос 5 кодов по 20Грн (итого 100Грн) условия такие</p>
<p><strong>1) После регистрации выслать мне на мыло логин/пароль<br />
2) Успеть на выходных сменить тарифный пакет с дефолтового на что нить еще и выйти с новым тарифом хоть раз в инет (за выходные)<br />
3) Сообщать о всех глюках и несуразностях мне на мыло</strong></p>
<p>В принципе все. Есть коллбэк. Действует диалап - <a href="http://paycard.ukr.net:8080/pls/abs/htm.show?page_name=UN_START">сами посмотрите где</a>. Заинтересованные в комменты - под раздачу. Доступов мало...</p>
Заковыристые инпут
2005-09-30T00:00:00Z
https://cssing.org.ua/2005/09/30/styling-input/
<p>В последней верстке столкнулся с проблемой - такой себе маленкий challenge со стилями для input...</p>
<!--more-->
<h3>Как нарисовали</h3>
В макете было отрисовано примерно так:
<img src="https://cssing.org.ua/images/input-2.gif" class="center" />
<h3>Первые мысли</h3>
Сначала решил реализовать обернув этот INPUT в SPAN и потом задать белую границу для самого инпута и серую для СПАНа - рассчитывая что спан обернет весь инпут.
Очевидная как по мне мысля.
<p>Заработало сразу же в ИЕ (что говорило о том, что путь неправильный :)). А вот в Опере и ФФ спан отобразился сзади от ИНПУТа - примерно так:<br />
<img src="https://cssing.org.ua/images/input-4.gif" /><br />
Этого терпеть было никак нельзя. Еще пару минут подумав я задал:</p>
<ol class="code">
<li>input {</li>
<li class="tab">display:block'</li>
<li class="tab">width:.....</li>
</ol>
После чего оно кое-как нормализовалось в ФФ но опера понимала это как то еще по своему. Я начал впадать в отчаяние.(быстро я, да? отчаянный парень)
<p>Кроме того, мне было нельзя в том контексте использовать display:block потому как в той же строке был текст - это бы означало либо ломание дизайна либо создание нового элемента (СПАНа какого-нить) - а плодение спанов я очень не люблю. ОЧЕНЬ. :)</p>
<h3>Забрезжила надежда</h3>
Перебрав экзотические варианты с фоновой картинкой для INPUT(слишком просто) я вдруг вспомнил что у нас есть такой мощный инструмент как BORDER а именно DOUBLE,
вот такой CSS:
<ol class="code">
<li>input {</li>
<li class="tab">border:3px double #ссс;</li>
<li class="tab">background:#CAE4FF;/*голубой фон*/</li>
<li>}</li>
</ol>
Вот что я увидел во всех ИЕ (5.0-6.0) и Операх 7-8:
<img src="https://cssing.org.ua/images/input-1.gif" class="center" />
Это конечно не совсем то что хотел дизайнер - но очень и очень близко. И даже лучше как мне показалось :).
Но вот как это отобразил ФФ:
<img src="https://cssing.org.ua/images/input-3.gif" class="center" />
Он посчитал (и наверное правильно) что граница - это тоже часть блока и у нее должен быть такой же фоновый цвет - мне это ясное дело не понравилось...
<h3>-moz-* на помощь</h3>
Cузив проблемную область (для вин платформы по крайней мере) до одного браузера, да еще и самого любимого :) я понял что можно включить его тяжелую артилерию - а именно специальные CSS свойства этого броузера:
<ol class="code">
<li>input{</li>
<li class="tab">background:#CAE4FF;</li>
<li class="tab">border:3px double #ccc; </li>
<li class="tab"><strong>-moz-border-left-colors:#ccc #fff #ccc;</strong></li>
<li class="tab"><strong>-moz-border-right-colors:#ccc #fff #ccc;</strong></li>
<li class="tab"><strong>-moz-border-top-colors:#ccc #fff #ccc;</strong></li>
<li class="tab"><strong>-moz-border-bottom-colors:#ccc #fff #ccc; </strong></li>
<li>}</li>
</ol>
(<a href="http://www.xulplanet.com/references/elemref/ref_StyleProperties.html">Описание свойств -moz-</a>)
Свойство очевидно отвечает за цвета границы. В данном случае - сначала указывает цвет внешней, потом второй по счету извне, и наконец третьей. То есть делает из нашего многострадального инпута, пускай не совсем то что хотел дизайнер, но зато даже еще и красивее:
<img src="https://cssing.org.ua/images/input-1.gif" class="center" />
<h3>В конце</h3>
Вот такая короткая эпопея. У кого были похожие проблемы с лучшим решением (это я считаю полукостылем - хоть и рабочим) милости просю в комменты. Лучшего решения так и не нашел... :(
Прелоад через CSS
2005-09-27T00:00:00Z
https://cssing.org.ua/2005/09/27/preload-by-css/
<p>Структурирую свою информацию - несколько способов избежания страшненьких джаваскриптов делающих прелоад картинок.</p>
<!--more-->
<h3>Проблема</h3>
Пускай у нас для какого-то элемента по наведению мыши меняется фоновая картинка, типа такого:
<ol class="code">
<li>a{</li>
<li class="tab">background-image:url(default_img.gif)</li>
<li>}</li>
<li>a:hover{</li>
<li class="tab">background-image:url(hover_img.gif)</li>
<li>}</li>
</ol>
В результате когда страничка (и картинка <strong>default_img.gif</strong>) загрузится и пользователь наведет мышь на ссылку - броузер начнет грузить картинку <strong>hover_img.gif</strong> и пользователь сразу ничего не увидит. А если картинка немаленькая, то и пару секунд ничего видеть не будет.
<p>Вот для этого и нужен так называемый прелоад, загрузить картинки сразу, что бы пользователь не видел этого мигания. Далее следуют 4 способа избежать мигания.</p>
<h3>1. Метод Pixy</h3>
Идея проста - что бы исключить прелоад нужно... исключить вторую картинку.
<p>Помещаем обе картинки для HOVER и для DEFAULT в одно избражение и по наведению мышки просто меняем позицию фона:<br />
<img height="81" width="138" src="https://cssing.org.ua/images/img.gif" class="right" /></p>
<ol class="code">
<li>a {</li>
<li class="tab">background: url("img.gif") no-repeat <strong>0 0</strong> ;</li>
<li>}</li>
<li>a:hover {</li>
<li class="tab">background-position: <strong>0 -40px</strong>;</li>
<li>}</li>
<li>a:active, a#here {</li>
<li class="tab">background-position: <strong>0 -80px</strong>;</li>
<li>}</li>
</ol>
Конечно, это означает фиксированую высоту (или ширину) блока для которого мы делаем этот фон. Иначе фоны бы отображались более одного за раз, или еще как-нить криво.
<p>ИЕ однако и тут выпендрился и решил что так как фон меняется, то надо че то дозагружать. Это так называемый <strong>flicker эффект</strong> - метод борьбы с ним прост - но не всегда реализуем - нужно задать фон для внешнего блока - и тогда ховер эффект реализовывать не смещением позиции фона - а просто его убиранием.<br />
Таким образом в ИЕ можно избавиться от мигания и "дозагрузок" картинок.</p>
<p>Примерно так:</p>
<ol class="code">
<li>#outer{</li>
<li class="tab">background: url("hover_img.gif") no-repeat 0 0;</li>
<li>}</li>
<li>a{</li>
<li class="tab">background: url("default_img.gif") no-repeat 0 0;</li>
<li>}</li>
<li>a:hover {</li>
<li class="tab">background: none;</li>
<li>}</li>
</ol>
<ul>
<li><a href="http://wellstyled.com/css-nopreload-rollovers.html">Оригинальная статья</a> обратите внимание на Update внизу - к вопросу о мигании в ИЕ6</li>
</ul>
<h3>2. Прелоад через a:link</h3>
Таким образом можно закэшировать <strong>hover_img.gif</strong> для элемента навигации.
Селектор <strong>a:link</strong> "перебивает" просто <strong>a</strong> - поэтому визуально ничего не изменится, но броузер поместит файл в кэш:
<ol class="code">
<li>a{</li>
<li class="tab">background-image: url("hover_img.gif");</li>
<li>}</li>
<li>a:link,a:visited{</li>
<li class="tab">background-image: url("default_img.gif");</li>
<li>}</li>
<li>a:hover{</li>
<li class="tab">background-image: url("hover_img.gif");</li>
<li>}</li>
</ol>
Этот метод в принципе похож на четвертый, но для полноты я описал их отдельно.
<ul>
<li><a href="http://www.maratz.com/blog/archives/2005/06/22/preload-hover-images-in-css/">Preload :hover images in CSS</a></li>
</ul>
<h3>3. "Дырявая" картинка</h3>
Суть такова - в качестве фоновой картинки берем "дырявую", то есть ГИФ с прозрачными областями. А собственно :hover эффект делаем сменой фонового цвета, а не картинки. Однако нам придется фиксировать высоту и ширину элемента, да и сам эффект будет состоять лишь в смене цвета определенной области - но тем не менее:
<ol class="code">
<li>a {</li>
<li class="tab">background:#ccc url("img.gif") no-repeat 0 0;</li>
<li>}</li>
<li>a:hover {</li>
<li class="tab">background-color:#c00;</li>
<li>{</li>
</ol>
Впервые столь простую идею увидел на Simplebits с год-два назад - сейчас уже не смог найти линк.
<p>К примеру: все следующие изображения сделаны с помощью одной и той же картинки - лишь сменой фонового цвета: <img src="https://cssing.org.ua/images/issue.gif" width="13" height="13" alt="*" style="background:#000; padding:0;border:none;" />, <img src="https://cssing.org.ua/images/issue.gif" width="13" height="13" alt="*" style="background:#c00;padding:0;border:none;" />, <img src="https://cssing.org.ua/images/issue.gif" width="13" height="13" alt="*" style="background:#00c;padding:0;border:none;" />, <img src="https://cssing.org.ua/images/issue.gif" width="13" height="13" alt="*" style="background:#0c0;padding:0;border:none;" />. Фоновый цвет "светит" через прозрачные дыры в картинке. Сама же картинка лишь белого цвета.</p>
<p>Идею можно применять не только для :hover эффектов, но и для многоразового юзания одной картинки в разных цветах.</p>
<h3>4. Прелоад через указание фона для чего-нибудь</h3>
Можно поместить картинку для :hover в кэш браузера путем таких вот махинаций:
<ol class="code">
<li>h2 {</li>
<li class="tab">background:url("hover_img.gif') no-repeat;</li>
<li class="tab">background-position:-1000px -1000px;</li>
<li>}</li>
</ol>
Отличается от номера 2 только тем, что тут фон прячут позицией, а не "перебиванием" более сильным селектором.
<ul>
<li><a href="http://www.paulpgriffin.com/css/tabs/tabs.html">Подсмотрено тут</a></li>
</ul>
<h3>В конце</h3>
Все здесь описанное не претендует на оригинальность - скорее структурирую свои же знания - да и вдруг кому-то это окажется полезным. Почти все приемы просты до безобразия. Но в этом вся соль.
<p>Как говорил один человек - я горжусь тем, что так много "украл" у других. :)</p>
<p>Кто знает еще какие-то способы - пишите в комменты. Думаю от этого выиграем мы все.</p>
Реинкарнация webplanet.ru
2005-09-08T00:00:00Z
https://cssing.org.ua/2005/09/08/webplanet-reincarnation/
<p>Выдались скучные выходные...<br />
Вспомнил своё старое хобби. Вобщем без лишних фраз - беcтабличная переделка <a href="http://webplanet.ru/">webplanet.ru</a></p>
<!--more-->
<h3>Сухие цифры</h3>
<table cellspacing="0" cellpadding="0" class="data">
<thead><tr>
<th> </th>
<th><a href="http://webplanet.ru/">Старый код</a></th>
<th class="focus"><a href="http://akella.org.ua/webplanet.ru/">Новый код</a></th></tr>
</thead>
<tbody>
<tr>
<th>Размер CSS файла </th>
<td>~2 KB</td>
<td class="focus">~7 KB</td>
</tr>
<tr class="alt">
<th>Размер HTML файла </th>
<td>~57 KB</td>
<td class="focus">~20 KB( 18Kb+2Kb баннеров..)</td>
</tr>
<tr>
<th>Общая Экономия(На HTML)</th>
<td>-</td>
<td class="focus"><strong>~37Kb</strong></td>
</tr>
</tbody>
</table>
Честно скажу, я выбрал именно этот сайт совершенно случайно.
<a href="http://akella.org.ua/webplanet.ru/">Тут лежит переделка.</a> Код проходит валидацию.
<p>Разница почти 10 секунд для диалапщиков. Много это или мало? Я думаю много.<br />
И разница эта ощутима в первую очередь для пользователей - вряд ли цена на трафик для этого сайта играет какую-то серьезную роль...</p>
<h3>Отличия</h3>
Копия конечно не точная - я выбрал наиболее приближенный вариант с фиксированными боковыми колонками и резиновой средней(с контентом). (для этого был на скорую руку передран пример со статьи <a href="http://www.alistapart.com/articles/negativemargins/">Creating Liquid Layouts with Negative Margins</a> )
Для более точной копии нужно уже прилагать кой-какие усилия..
<p>В некоторых броузерах, типа ИЕ могут быть поползновения - но я оставил их даже умышленно. Все они в основном мелкие и если вдруг настанет день, когда это будет верстаться за деньги, будут без труда устранены.</p>
<h3>Цель</h3>
Основной целью для меня был очередной пример того как бестабличная верстка сделанная <strong>за 2 часа</strong> переигрывает табличную и по размеру и по читаемости кода, и по дополнительным возможностям, типа распечатки, чтения с мобил и т д...
<p>Не последней целью так же было...убить несколько часов за интересным занятием. Ну нравится мне это делать. :)</p>
<h3>Заключение</h3>
Думаю, что цель достигнута - судите сами по размерам файла.
Ваше(Да! Именно твоё!) мнение и оценка мне интересны.
<strong>Критика по делу и размышления на смежные темы принимаются с радостью.</strong>
<h3>Предмет разговора</h3>
Пока делал, они навели пару косметик, но я думаю вы поймете, что на общую картину они вряд ли повлияют.
<ul>
<li><a href="http://webplanet.ru/">оригинал</a></li>
<li><a href="http://akella.org.ua/webplanet.ru/">Бестабличный вариант</a></li>
</ul>
В очередной раз хочется спросить:
<strong>Почему такие солидные сайты <em>не делают</em> это(верстку) правильно?</strong>
Может вы знаете ответ? Ведь это как минимум солиднее и лучше для пользователей.
Время идет, а воз и ныне там... :(
Встреча украинских блоггеров :)
2005-09-04T00:00:00Z
https://cssing.org.ua/2005/09/04/ua-bloggers-meetup/
<p>Вчера, наконец, состоялась <strong>Первая Встреча Украинских Блоггеров</strong>. :)<br />
Были такие личности: <strong><a href="http://www.otebe.com/">Aph1na</a></strong>, <strong><a href="http://www.jeweller.com.ua/">Atlantis</a></strong>, <strong><a href="http://www.dp76.com/">Silver</a></strong>, <strong><a href="http://www.wmas.in.ua/">WMas</a></strong> ну и я понятно...</p>
<p>Люди собрались настолько же интересные как и очень разные. Встреча вышла однозначно хорошей, хотя сказать успели явно не всё. Впечатления остались только приятные :)<br />
Делать такие встречи <strong>стоит</strong>.<br />
Отчеты(список будет пополняться):</p>
<ul>
<li><a href="http://www.jeweller.com.ua/?p=260">Atlantis</a> + <a href="http://www.jeweller.com.ua/wp-gallery/index.php">фотки</a></li>
<li><a href="http://www.wmas.in.ua/2005/09/03/bloggers-meeting-in-kiev/">wmas</a></li>
<li><a href="http://www.otebe.com/moe/000423.php">Aph1na</a></li>
<li><a href="http://akella.org.ua/gallery/"> by Aph1na(people>bloggers)</a></li>
</ul>
min-width для IE
2005-09-02T00:00:00Z
https://cssing.org.ua/2005/09/02/min-width-for-ie/
<p><del datetime="2005-09-23T15:56:39-03:00">Два</del><strong>Три</strong> способа как это можно сделать в ИЕ...</p>
<!--more-->
<h3>min-width по нормальному</h3>
Это очевидно, так <strong>должно</strong> быть, это должно работать:
<ol class="code">
<li>#min-width {</li>
<li class="tab">min-width:600px;</li>
<li>}</li>
</ol>
Но, как вы можете легко догадаться, работает везде, кроме чего?
Правильно! Интернет Эксплорера! :)
<h3>Вступление</h3>
Здесь и дальше я буду укрощать(задавать минимальную ширину) блок <strong>#min-width</strong>.
<h3>Метод 1: JavaScript</h3>
Вот такой простенький кусок CSS (перемешанного с JS) решает проблему..
<ol class="code">
<li>#min-width {</li>
<li class="tab">min-width:800px;</li>
<li class="tab">width:expression(document.body.clientWidth < 770? "770px": "auto" );</li>
<li>}</li>
</ol>
Или так например:
<ol class="code">
<li>* html #min-width {</li>
<li class="tab">width:expression(document.body.clientWidth > 770? "100%" :"770px");</li>
<li>}</li>
</ol>
<a href="http://cssing.iatp.org.ua/examples/min-width/min1.html">смотреть пример</a>
Одна из проблем с этим методом описана ниже - заголок ВАЖНО!
<ul>
<li><a href="http://www.svendtofte.com/code/max_width_in_ie/">max-width in Internet Explorer (min-width)</a></li>
</ul>
<h3>ВАЖНО</h3>
Однако помните, что первый метод при некоторых Доктайпах вызывает подвисание IE WinXP SP1 при ресайзах окон. Смена доктайпа и еще пару примочек помогает. Например переход XHTML на HTML спасает.
Вот тут читайте подробнее - <a href="http://blog.unmatchedstyle.com/hacks/min-width-max-width-re-hacked">min-width, max-width re-hacked</a>.
<h3>Метод второй: два обертывающих DIV</h3>
Этот метод потребует добавления в код двух дополнительных DIV. Примерно так:
<ol class="code">
<li><div id="min-width"></li>
<li class="tab"><div class="minwidth"></li>
<li class="tabtab"><div class="container"></li>
<li class="tabtab">tut ku4a texta</li>
<li class="tabtab"></div></li>
<li class="tab"></div></li>
<li></div></li>
</ol>
Тогда вот такой CSS нам сымитирует min-width для IE:
<ol class="code">
<li>/*для всех броузеров что понимают min-width */</li>
<li>#min-width {</li>
<li class="tab">width:50%; </li>
<li class="tab">min-width:400px; </li>
<li>}</li>
<li>/* для IE */</li>
<li>* html .minwidth {</li>
<li class="tab">border-left:400px solid #fff;/*min-width*/</li>
<li class="tab">position:relative; </li>
<li class="tab">float:left; </li>
<li class="tab">z-index:1;</li>
<li>}</li>
<li>* html .container {</li>
<li class="tab">margin-left:-400px; /*-min-width*/</li>
<li class="tab">position:relative; </li>
<li class="tab">float:left; </li>
<li class="tab">z-index:2; </li>
<li>}</li>
</ol>
<a href="http://cssing.iatp.org.ua/examples/min-width/min.html">смотреть пример</a>
Если вкратце: то внутрь блока помещают другой, с границей равной минимальной ширине. Который и не дает ИЕ сжимать этот блок. Более подробное описание:
<ul>
<li><a href="http://www.cssplay.co.uk/boxes/minwidth.html">min-width for IE</a></li>
<li><a href="http://www.webreference.com/programming/min-width/">How to Use CSS to Solve min-width Problems in Internet Explorer</a></li>
</ul>
<h3><strong>Update:</strong> Метод 3: JavaScript</h3>
Для простоты приводимого кода я сделаю min-width для тэга body. Если необходимо реализовать для какого то блока - достаточно задать ID и использвать getElemetById.
<p>Вобщем достаточно проинклюдить в страницу вот такой скрипт:</p>
<ol class="code">
<li>var d = document;</li>
<li>var winIE = (navigator.userAgent.indexOf("Opera")==-1 && (d.getElementById && d.documentElement.behaviorUrns)) ? true : false;</li>
<li></li>
<li>function bodySize(){</li>
<li class="tab">if(winIE && d.documentElement.clientWidth) {</li>
<li class="tabtab">sObj = d.getElementsByTagName("body")[0].style;</li>
<li class="tabtab">sObj.width = (d.documentElement.clientWidth<<strong>760</strong>) ? "<strong>760px</strong>" : "<strong>100%</strong>";</li>
<li class="tab">}</li>
<li>}</li>
<li></li>
<li>function init(){</li>
<li class="tab">if(winIE) { bodySize(); }</li>
<li>}</li>
<li>onload = init;</li>
<li>if(winIE) { onresize = bodySize; }</li>
</ol>
В принципе аналогично первому методу с ескпрешонами - но этот вариант исключает подвисание броузера при ресайзе - поэтому если уж бить джаваскриптом, то лучше этим - хотя за определение броузера стыдно - но такова селяви... (подсмотрено живьем <a href="http://digital-web.com/">тут</a>)
<h3>Заключение</h3>
В очередной раз убеждаемся что заставить ИЕ понимать можно все. Но не всегда это очевидно и стоит того.
<h3>Все ссылки</h3>
<ul>
<li><a href="http://blog.unmatchedstyle.com/hacks/min-width-max-width-re-hacked">min-width, max-width re-hacked</a></li>
<li><a href="http://www.svendtofte.com/code/max_width_in_ie/">max-width in Internet Explorer (min-width)</a></li>
<li><a href="http://www.cssplay.co.uk/boxes/minwidth.html">min-width for IE</a></li>
<li><a href="http://www.webreference.com/programming/min-width/">How to Use CSS to Solve min-width Problems in Internet Explorer</a></li>
</ul>
Управление временем
2005-08-28T00:00:00Z
https://cssing.org.ua/2005/08/28/time-management/
<p>Когда времени становится все меньше, с удивлением можно обнаружить, что толком ничего за день не успеваешь. Вот для этих случаев и придумывают теории по управления временем. Простой прием, который я позаимствовал, помог мне справиться с этой проблемой...<!--more--></p>
<h3>Откуда сперто</h3>
Позаимствовал из статьи на <a href="http://www.alistapart.com/">алистапарте</a> под названием <a href="http://www.alistapart.com/articles/pickle/">"Time Management: The Pickle Jar Theory"</a>. Читал где то год назад - только сейчас пригодилась. Ниже мой вольный перевод основной идеи...
<h3>Теория</h3>
Предлагается провести такой эксперимент:<em>(хоть бы и мысленно)</em>
Пускай у вас есть пустая поллитровая банка. Обычная такая, с бумажной наклейкой "Вишня 2004" :). (запомнилось). Теперь возьмите несколько больших камней и засуньте в неё. Ну их туда штук 10 максимум влезет. Всовывайте пока не останется места в банке.
<p>Теперь банка <strong>полна</strong> и в нее уже больше не влезает? Возьмите гальку и насыпьте в банку, пока она снова не наполнится.</p>
<p>Теперь возьмите эту <strong>полную</strong> банку и насыпьте в неё песка, сколько еще влезет - пока не наполнится.</p>
<p>Ну и наконец залейте туда воды, сколько поместится...</p>
<p>Нетрудно теперь перенести этот опыт на нашу жизнь. У всех есть <strong>важные</strong>, приоритетные задачи на день (проект с дедлайном, романтический вечер с девушкой... :)) - это большие камни.<br />
Вещи которыми нам <strong>нравится</strong> заниматься - это галька, <strong>остальные дела</strong> которые нам надо сделать - песок. Ну и наконец есть вещи от которых нам никуда не деться (попить воды, завязать шнурки... :)) - это вода - которая все равно вклинится во все остальные дела.</p>
<h3>Пример</h3>
На практике выглядит примерно так (не обязательно это писать - я в голове держу например)
Или у вас план:(<strong>неправильный</strong>)
<ul>
<li><strong>9:00:</strong> проверить и ответить на мыло</li>
<li><strong>9:30:</strong> проверить сайты форум и тп</li>
<li><strong>10:30:</strong> RSS-reader...</li>
<li><strong>11:30:</strong> проверить свой сайт...лежит не лежит..</li>
<li><strong>12:00:</strong> успокоить клиентов</li>
<li>И еще куча дел которые я все равно не успею сделать</li>
</ul>
Или у вас план:(<strong>правильный!</strong>)
<ul>
<li><strong>9:00:</strong> определить "камни" на день</li>
<li><strong>10:00:</strong> написать заметку</li>
<li><strong>13:00:</strong> поработать над проектом X</li>
<li><strong>17:00:</strong> пообщаться с клиентами</li>
</ul>
Смотрится намного свободнее. Оставшееся время между этими "камнями" можно забить водой и песком.
Почему же первый хуже?
<h3>Вот почему</h3>
Просто представьте что в том эксперименте с банкой - мы сначала бы налили воду, потом насыпали песок и т д. Уже после наливания воды мы бы не смогли без потерь втулить гальку и песок, не говоря о камнях.
Собственно это и пытались сделать в первом плане на день.
<h3>Мораль</h3>
<strong>определить камни и залить водой все остальное время.</strong>
<h3>Info</h3>
Кому надо оригинал на английском идет опять же сюда:
<ul>
<li><a href="http://www.alistapart.com/articles/pickle">Time Management: The Pickle Jar Theory</a> by <a href="http://www.alistapart.com/authors/w/jeremywright">Jeremy Wright</a>
</li>
</ul>
<h3>Feedback</h3>
Ваш опыт по управлению своим временем <strong>приветствуется</strong> в комментах. Учиться никому и никогда не поздно!
Чем больше мы украдем друг у друга знаний и опыта тем умнее все станем!
HTML заготовки
2005-08-24T00:00:00Z
https://cssing.org.ua/2005/08/24/my-xhtml-template/
<p>На горизонте, как тучи, собирается работа... Решил не ждать - а начать готовиться. Подготовил серию XHTML заготовок.<!--more--></p>
<h3>Зачем?</h3>
Каждый раз когда я начинаю верстать, я заново ворую где то доктайп, создаю CSS файлы - переписываю метатэги с какого-нить доверенного сайта. Но, наконец, чаша полна. Лень ослабла, и я решился сделать стартовые HTML+CSS заготовки. Кому сгодятся - используйте на здоровье...
<h3>HTML</h3>
Не буду тут приводить полностью файл. Однако я в него насовал все метатэги которые я использовал. Вот небольшой такой список:
<ol class="code">
<li><meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /></li>
<li><meta http-equiv="Content-Language" content="ru" /></li>
<li><meta name="copyright" content="" /></li>
<li><meta name="description" content="" /></li>
<li><meta name="keywords" content="" /></li>
<li><meta name="author" content="" /></li>
<li><meta name="robots" content="all" /></li>
<li><link rel="Shortcut Icon" type="image/x-icon" href="/favicon.ico" /></li>
</ol>
Я выбирал самое нужное для себя - если у кого есть чем дополнить - пожалуйста в комменты...
<p>Плюс ссылки на (смотри ниже) CSS файлы</p>
<h3>CSS</h3>
Главная страница ссылается на 3 CSS файла: <strong>master.css print.css handheld.css</strong>. Которые все лежат в папке <strong>css</strong>.
<p>Содержание master.css примерно такое:</p>
<ol class="code">
<li>@import url("base.css");</li>
<li>@import url("layout.css");</li>
</ol>
И еще сколько влезет разделений на стили для <strong>цвета</strong>, <strong>шрифтов</strong>.
Просто я использую пока именно такое разделение.
<p>Все CSS файлы снабжены заботливо спертыми заголовками у Дага Баумана (нравятся они мне :)) Вот такого вида:</p>
<ol class="code">
<li>/*</li>
<li>-----------------------------------------------</li>
<li>Site Screen Master</li>
<li>Author: akella</li>
<li>Version: 28 Apr 1983</li>
<li>----------------------------------------------- */</li>
</ol>
<h3>Результат</h3>
В результате вышло такое:
<img alt="file tree of template" src="http://cssing.org.ua/images/tree.png" style="border:none;" />
Скачать все сразу можно <a href="http://cssing.org.ua/examples/template/template.rar">отсюда</a>. Посмотреть вживую - <a href="http://cssing.org.ua/examples/template/">тут</a>. (нажимайте вью сорс)
Для маленьких сайтов(воробьев) - это конечно скорее пушка, но для средних проектов самое то. Да и пушкой в принципе убить воробья - не так и трудно :).
<h3>Инфо</h3>
<ul>
<li><a href="http://www.digital-web.com/articles/architecting_css/">Architecting CSS</a></li>
<li><a href="http://particletree.com/features/quick-start-your-design-with-xhtml-templates">XHTML templates</a></li>
</ul>
<p>Замечания-указания-поправки с радостью принимаются )</p>
Небольшой итог
2005-08-12T00:00:00Z
https://cssing.org.ua/2005/08/12/one-year-anniversary/
<p>Сегодня прошел ровно год с первой индексации сайта(cssing) Гуглом. Я не фанат гугла, просто настоящую годовщину 21 июля я проспал :). Ровно год я веду свой блог. Небольшие итоги.<!--more--></p>
<h3>Сколько народу</h3>
С конца прошлогоднего июля меня посетило где то 16 тысяч человек-айпишников которые успели выкачать с сервера порядка 2х с половиной гиг трафика. Вот так вот. Не знаю много это или мало... Сейчас де то 300-400 хостов в день - тоже не знаю много это или мало... Для меня <strong>очень</strong> много.
<h3>Что мне дал блог</h3>
Блог дал мне всю работу, что я сейчас имею и еще несколько предложений на которые я уже не могу согласится из-за недостатка времени. Когда я начинал писать у меня фактически не было работы вообще. Теперь нет времени выполнять ту что есть. :)
Только благодаря блогу я отредизайнил <a href="http://ukr.net/">укр.нет</a> (они нашли меня через гугл :))
<p>Фактически блог дал мне более уверенное будущее. <em>(я еще молод и это для меня очень важно)</em></p>
<p>Так что если вы сомневаетесь нужен ли блог веб-девелоперу - по-моему ответ готов...</p>
<h3>Самое приятное</h3>
Писал я сначала для себя, что бы самому разобраться и не забыть.
Но самое главное, что меня сейчас радует, что я иногда оказываюсь кому то полезным, и может быть делаю этот веб лучше :).(очень на это надеюсь)
<strong>Вот этому я несказанно рад. :) </strong>
<p><strong>Спасибо всем тем, кто меня читает!</strong><br />
Надеюсь в будущем не разочаровать.<br />
<em style="color:#999;">(пошел на море пить пиво)</em></p>
Наш дизайн css Zen Garden, ты где?
2005-08-09T00:00:00Z
https://cssing.org.ua/2005/08/09/helloooo-csszengarden-where-r-u/
<blockquote><p>если вы дизайнер, который уже какое-то время использует css, то где же ваш “zen garden”-дизайн? ждемс…<br />
<span>сказал <a href="http://www.mezzoblue.com/">Дейв Ши</a>,<br />
перевел <a href="http://ru.id-as.com/">Андрей Смирнов</a></span></p></blockquote>
<p>Почти год назад я написал заметку с подобным названием <a href="http://cssing.iatp.org.ua/2004/08/21/csszengarden/">Где русский дизайн css Zen Garden</a>? К ней было довольно много, как по мне, откликов, даже с обещаниями доделать. А воз и ныне там.:(<!--more--><br />
<a href="http://cssing.iatp.org.ua/2004/08/21/csszengarden/">для тех кто не знает о чем это все...</a></p>
<h3>Печальное</h3>
Как ни печально сознавать, но у людей действительно нет на это времени. Да и мой энтузиазм по этому поводу уже давно угас.
<p>Видимо целиться надо не в <a href="http://ru.id-as.com/">старожилов</a> <a href="http://minimal.ru/">русского</a> <a href="http://live.julik.nl/">CSS дизайна</a>, а скорее в <a href="http://cssdesign.ru/">молодых дизайнеров</a>, которые еще готовы работать на своё имя без денег.</p>
<p>К счастью в последнее время кол-во людей знающих, что такое веб-стандарты, в наших местах стало заметно расти. (не в пример больше чем год назад)</p>
<h3>Так почему бы не сделать?</h3>
Мне кажется появление первого нашего дизайна <strong>там</strong> ознаменовало бы начало новой эры (как пафосно :)) вебдизайна у нас <strong>тут</strong> (хотя я наверняка преувеличиваю). И этот первый дизайн не смог бы остаться без внимания.(без моего точно)
<h3>ну так?</h3>
Я со своей стороны готов предложить дизайнерам, которые нарисуют макет, реализовать его с помощью CSS, и в соавторстве со мной войти в историю. :) Но не дизайнер я! :(
Если уж проблема в CSS...
<p><strong>Или просто самим нарисовать и реализовать!</strong><br />
Неужели так трудно? Ведь не самое плохое дополнение портфолио.</p>
<p>Ну или отмажтесь хоть в комментах, что мол мы уже рисуем...уже почти почти (читай <a href="http://cssing.iatp.org.ua/2004/08/21/csszengarden/">старую заметку</a>...) ;)</p>
<h3>Главная сцылка</h3>
<ul>
<li><a href="http://www.csszengarden.com/">css Zen Garden</a></li>
</ul>
Надеюсь на отклик... :( Пойду <a href="http://www.mezzoblue.com/zengarden/alldesigns/official/">проверю</a> вдруг появился наш дизайн...
Маленькая хитрость с баннером
2005-07-29T00:00:00Z
https://cssing.org.ua/2005/07/29/css-banner-tip/
<p>Излагаю простой приемчик. Позволяет немного облегчить жизнь беднягам на диалапе и медленных линиях. Прием касается очередности загрузки баннеров и контента (или чего-то там за <strong>чем</strong> мы пришли на сайт)<!--more--></p>
<p>Проблема не придуманная и мозги мне прокомпостировала уже не раз пока я сидел на dialup. Может это только у меня такой провайдер? :(</p>
<h3>Проблема</h3>
Вы переходите на какой-либо сайт. Но если сайт более или менее посещаемый - присутствует баннер. И если хозяин хочет много денег :) то баннер этот в самом верху страницы. И вот картина - грузится баннер (очень красивый) и доооооолго грузится (баннерокрутилка слабая например). А ты сидишь и на него "втыкаешь". Потому что пока он не загрузится - не появится контент-или-картинки-или-почта за которой вы пришли... :(
<h3>Решение</h3>
Решение чрезвычайно простое - хотя подходит не для всех случаев. Проблема эта возникает из-за того что баннер находится в коде в самом верху страницы - потому и грузИться начинает первым.
<p>Идея в том, чтобы перенести <strong>код баннера в конец HTML</strong> - тогда баннер начнет грузиться лишь после того, как весь контент загружен. Как перенести баннер в конец кода, а визуально оставить вверху, описано ниже.</p>
<p>По крайней мере сначала, юзер будет смотреть на загружающийся контент, а не на тормозящий баннер.</p>
<h3>Технически</h3>
Элементарный HTML+CSS даёт нам нужный результат.
<strong>HTML:</strong>(<em>с баннером в конце</em>)
<ol class="code">
<li><div id="page"></li>
<li class="tab"><div id="content"></li>
<li class="tab">a lot of content goes here</li>
<li class="tab"></div></li>
<li></li>
<li class="tab"><div id="banner"></li>
<li class="tab"></div></li>
<li></div></li>
</ol>
<strong>CSS:</strong>(<em>исправляющий положение</em>)
<ol class="code">
<li>#page{</li>
<li class="tab">position:relative;</li>
<li class="tab">padding-top:80px; /*Высота баннера, пускай 770х80*/</li>
<li>}
</li><li>#banner{</li>
<li class="tab">position:absolute;</li>
<li class="tab">top:0;</li>
<li>}</li>
</ol>
Вот и все. Теперь баннер будет <strong>визульно</strong> вверху - но грузиться будет последним. Такую фичу я сделал на <a href="http://ukr.net/">укр.нет</a>. Их топ-баннер в коде находится самым последним - и можно попасть в свой почтовый ящик до его загрузки.
<h3>Конец</h3>
Кроме того что мы выигрываем в ощущениях пользователей - мы так же немного улучшаем свою индексируемость поисковиками - ведь больше ценятся слова вверху страницы.
<p>К тому же иногда выигрыш бывает просто огромным. Вот взять к примеру <a href="http://pravda.com.ua/">pravda.com.ua</a>.<br />
В <a href="http://pravda.com.ua/news/2005/7/29/13043.htm">шаблоне отображения новости</a> 3(!!!) баннера и 2-3 килобайта нужного юзеру контента. Конечно такое кол-во баннеров - неправильно, но не нам судить. А представьте юзер бы ждал 2 баннера для чтения 10 строк новости? Там я тоже применил эту маленькую хитрость.</p>
<p>Вот такой вот tip. Был бы рад услышать чьё-нибудь мнение.</p>
<h3>Для тех кто не знает что такое absolute</h3>
Хорошая статья Дага Баумана:
<ul>
<li><a href="http://www.stopdesign.com/articles/absolute/">Making the Absolute, Relative</a></li>
</ul>
pravda.com.ua!
2005-07-23T00:00:00Z
https://cssing.org.ua/2005/07/23/pravda-com-ua-web-standards/
<p>Сегодня еще один посещаемый украинский сайт (а именно <a href="http://top.bigmir.net/show.php?u=1">3ий</a> в Украине) и <a href="http://top.bigmir.net/show.php?ctg=39&u=1&t=0">самый</a> популярный новостной ресурс - <a href="http://pravda.com.ua/">Украинская Правда</a> перешел на вебстандарты.<!--more--></p>
<h3>Бочка меда</h3>
Привожу небольшие замеры выгоды для юзеров:
<table cellspacing="0" cellpadding="0" class="data">
<thead>
<th> </th>
<th>Старый код</th>
<th class="focus">Новый код</th>
</thead>
<tbody>
<tr>
<th>Размер CSS файла </th>
<td>~6 KB</td>
<td class="focus">~12 KB</td>
</tr>
<tr class="alt">
<th>Размер HTML файла </th>
<td>~106 KB</td>
<td class="focus">~45 KB</td>
</tr>
<tr>
<th>Общая Экономия(На HTML)</th>
<td>-</td>
<td class="focus"><strong>~60Kb</strong></td>
</tr>
</tbody>
</table>
За понимание и содействие хочу сказать огроменное СПАСИБО <strong>Алене Притуле</strong>(главред) и <strong>Tadjik</strong>'у(webmaster)!
<p>В килобайтах разница еще круче чем с <a href="http://cssing.iatp.org.ua/2005/02/16/ukrnet/">Укр.Нет</a>.<br />
Дизайн опять же(как и с Укр.Нет) был повторен, что вызвало появление пары "лишних" DIV для копирования table-like эффектов.</p>
<p>К тому же теперь любую страницу этого сайта можно рачпечатывать (<em>media="print"</em>). А для мобильных девайсов я отключил графику - дабы экономить траффик (<em>media="handheld"</em>), хотя это конечно спорное решение. И добавил SKIP-menu - для навигации по длинным страницам.</p>
<p>Изначально дизайн был с фиксированными размерами шрифтов - поэтому я не косил под "настоящего" вебстандартиста и в вебстандартной версии размеры указывал в пикселах. Но я вынес их(все font-size) в <a href="http://pravda.com.ua/_site/css/MainSm.css">отдельный файл</a> и добавил <a href="http://www.alistapart.com/articles/alternate/">styleswitcher</a>. Правда позднее было решено оставить его лишь на странице с полным текстом статей, но сугубо из "дизайнерских" соображений - некуда впихнуть. :)</p>
<p>Так что за пикселы чур не казнить! :)</p>
<h3>Ложка дегтя</h3>
К сожалению есть ряд проблем которые я не в силах был решить.
Например все старые статьи останутся в виде
<pre class="code">
Abzac
<strong><br><br></strong>
Abzac
</pre>
И еще кучей фигового кода - который однако умудряется работать правильно в окружении нормального кода.
<p>Более того "порадовала" CMS, редактор статей которой генерит все тэги большими буквами, а иногда при вставке картинки - выдаёт такие перлы из набора DIV и TABLE - что хоть стой хоть падай.<br />
Так что вебстандартами это пока можно назвать все же с натяжкой(но бои с CMS продолжаются.) - из-за текста самих статей. :(</p>
<p>Хотя ИМХО шаг мы сделали в правильном направлении.</p>
<p>Ни о какой валидности пока не может быть и речи - при нашей баннерной системе и куче невалидных каунтеров - привести сайт к абсолютно валидному коду - самоубийство. Но не стоит забывать что валидация нужна прежде всего нам - разработчикам. Не закрой я там какой нить один ДИВ - была бы страшная картина...</p>
<h3>Feedback</h3>
Был бы очень рад услышать Ваше мнение по поводу кода.
Я понимаю что я несовершенен и какой то глюк мог и упустить при переходе на новый код. Поэтому комменты типа "а че оно все сползло вниз" с радостью принимаются, но при указании броузера и системы. <strong>Заранее спасибо!</strong>
<p>PS: скоро опишу некоторые полезности разработки кода для подобных сайтов..</p>
<h3>Предмет критики</h3>
<ul>
<li><a href="http://pravda.com.ua/">Украинская правда</a></li>
<li>Один из <a href="http://akella.org.ua/pro/pravda.com.ua/">последних моих темплейтов</a> перед началом реализации</li>
</ul>
vertical-align:middle
2005-07-14T00:00:00Z
https://cssing.org.ua/2005/07/14/vertical-align-middle/
<p>Продолжаю традицию обзывать посты экзотическими(для меня) CSS свойствами. Описываю свои трудности с реализацией вертикального выравнивания по центру.</p>
<p><strong>Update:</strong> рекомендую так же ознакомиться с <a href="http://cssing.org.ua/2007/04/26/another-css-valign-method/">новым методом вертикального выравнивания</a></p>
<!--more-->
<h3>Одна строка текста - просто</h3>
Для того что бы выровнять одну строку например такого кода:
<ol class="code">
<li><p></li>
<li class="tab">Rovno odna stroka texta</li>
<li></p></li>
</ol>
Нужен такой CSS:
<ol class="code">
<li>p {</li>
<li class="tab">line-height:<strong>30px</strong>;</li>
<li class="tab">height:<strong>30px</strong>;</li>
<li>}</li>
</ol>
Тогда эта строка текста по вертикали будет как раз посередине <strong>p</strong>. Можно посмотреть рабочий пример по адресу <a href="http://www.ukr.net/">ukr.net</a> (в самом низу, в серой области)
<h3>Несколько строк или просто блочный элемент</h3>
Тут все гораздо сложнее. Для начала сформулирую проблему:
<ol>
<li>У нас есть div(или любой блочный элемент) с <strong>известной</strong> высотой</li>
<li>Какой-нить абзац текста <strong>P</strong> внутри этого DIVa - известно лишь что он(текст) точно поместится в заданную высоту DIVa</li>
<li>Нужно отцентрировать этот текст по вертикали без использования таблиц</li>
</ol>
Вот такая непростая задачка.
Пускай HTML код такой:
<ol class="code">
<li><div></li>
<li class="tab"><p></li>
<li class="tab">Because the Welsh and Roman heritage was almost entirely erased by the invasion of low German and then Scandinavian populations....</li>
<li class="tab"></p></li>
<li></div></li>
</ol>
<h3>Для нормальных броузеров</h3>
Для всех броузеров кроме winIE и macIE работает такой CSS код:
<ol class="code">
<li>div {</li>
<li class="tab">display: table-cell;</li>
<li class="tab">vertical-align: middle;</li>
<li>}</li>
</ol>
Можно посмотреть мой пример <a href="http://cssing.org.ua/examples/valign/">здесь</a> - но помните работает только в "нормальных" броузерах (<strong>не ИЕ</strong>).
<h3>для IE</h3>
А вот тут начинаются извраты...
<del datetime="2005-07-12T12:52:45-03:00">Изврат</del> <strong>Метод n1</strong>:
Стили прямо в коде - внизу ссылка на оригинал с разделением CSS и HTML
<ol class="code">
<li><div style="display: table; height: 400px; _position: relative; overflow: hidden;"></li>
<li class="tab"><div style=" _position: absolute; _top: 50%;display: table-cell; vertical-align: middle;"></li>
<li class="tabtab"><p style=" _position: relative; _top: -50%"></li>
<li class="tabtab">any text<br /></li>
<li class="tabtab">any height<br /></li>
<li class="tabtab">any content, for example generated from DB<br /></li>
<li class="tabtab">everything is vertically centered</li>
<li class="tabtab"></p></li>
<li class="tab"></div></li>
<li></div></li>
</ol>
(взято <a href="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html">отсюда</a>) Метод не самый удачный имхо...
<p><strong>Метод n2</strong>: Тоже не без извращений смотрим на центрирование во всем окне - <a href="http://www.kriton.de/CSS/zentrieren/alle-zentriert.html">http://www.kriton.de/CSS/zentrieren/alle-zentriert.html</a> (видели ID на немецком? - посмотрите! :))<br />
Тот сайт пока умер - смотрим и читаем тут - <a href="http://www.umade.ru/log/2004/10/46.html">http://www.umade.ru/log/2004/10/46.html</a>.<br />
(не совсем отвечает постановке задачи, но очень распространенная проблема)</p>
<p><strong>Метод n3</strong>(ИМХО самый удачный и универсальный из тех что я знаю):<br />
Метод однако требует добавления в код пустого DIV или другого элемента.<br />
Итак центрируем #valign-center:</p>
<ol class="code">
<li><div class="wrap"></li>
<li class="tab"><div class="valign-center"></li>
<li class="tab"><p>lenzi, e profondissima quiete</p></li>
<li class="tab"><p>infinito silenzio a questa voce vo comparando: </p></li>
<li class="tab"></div></li>
<li><div class="just-for-IE"></div></li>
<li></div></li>
</ol>
И теперь центрируем для всех нормальных через <strong><code>display: table-cell;vertical-align: middle;</code></strong>, а для ИЕ используем извраты с <code>height:100%;</code> и <code>display: inline-block</code>:
<ol class="code">
<li>.wrap {</li>
<li class="tab">display: table-cell;</li>
<li class="tab">vertical-align: middle;</li>
<li class="tab">width: 100%;</li>
<li class="tab">height: 401px;</li>
<li>}</li>
<li>.just-for-IE {</li>
<li class="tab">display: none;</li>
<li class="tab">width: 1px;</li>
<li class="tab">margin-left: -1px;</li>
<li>}</li>
<li>* html .just-for-IE, * html .valign-center {</li>
<li class="tab">display: inline-block;</li>
<li class="tab">vertical-align: middle;</li>
<li>}</li>
<li>* html .valign-center {</li>
<li class="tab">width: 100%;</li>
<li>}</li>
<li>* html .just-for-IE {</li>
<li class="tab">height: 100%;</li>
<li>}</li>
<li>* html .just-for-IE, * html .valign-center {</li>
<li class="tab">display: inline;</li>
<li>}</li>
</ol>
Вот такой, мягко говоря немаленький, CSS и то ужатый(не считаю нужным поддерживать IE5Mac). Полную и рабочую версию можно посмотреть <a href="http://cssing.org.ua/examples/valign/index1.html">здесь</a>
<p><strong>n4</strong>:способ с помощью expression, смотрите в новом посте <a href="http://cssing.org.ua/2007/04/26/another-css-valign-method/">Еще один способ вертикального выравнивания в CSS</a>.</p>
<h3>Вывод</h3>
Если <strong>очень хочется</strong>(выровнять по центру), то <strong>можно</strong>. И даже будет работать - главно в хаках потом не запутаться...
Пока писал, думал - сча пару изящных хаков в две строки - нифига.... :(
Ну зато хоть есть откуда передирать теперь.
<h3>Инфо</h3>
<ul>
<li><a href="http://cssing.org.ua/2007/04/26/another-css-valign-method/">Еще один способ вертикального выравнивания в CSS</a></li>
<li><a href="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html">Vertical Centering in CSS</a></li>
<li><a href="http://www.brunildo.org/test/img_center.html">Centering (horizontally and vertically) an image in a box</a></li>
<li><a href="http://www.umade.ru/log/2004/10/46.html">Вертикальное центрирование</a></li>
<li><a href="http://www.brunildo.org/test/vertmiddle.html">CSS Vertical Centering</a></li>
<li><a href="http://wellstyled.com/css-underscore-hack.html">The Underscore Hack</a></li>
<li><a href="http://mrclay.org/web_design/centered_image/">Cross-browser method of centering images</a></li>
</ul>
display:table
2005-07-03T00:00:00Z
https://cssing.org.ua/2005/07/03/display-table/
<p>До недавнего времени считал это свойство практически бесполезным. Подходящим лишь для игр с CSS в топ-броузерах. А на самом деле это свойство решило проблему нерешаемую практически никаким другим способом.<!--more--></p>
<h3>Проблема</h3>
К примеру есть на сайте набор вот таких блоков: картинка + заголовок + выдержка.
В коде соответственно имеем:
<ol class="code">
<li><div class="post"></li>
<li class="tab"><img src="./i/image.jpg" alt="" /></li>
<li class="tab"><h2><a href="#">Heading</a></h2></li>
<li class="tab"><p>text tex text text text text ext text text textt</p></li>
<li></div></li>
</ol>
Cуть проблемы в том что заказчик хочет картинку с одной стороны блока и текст с другой. И это при том что картинка может быть какого угодно размера.
Итак первое и очевидное сделать <strong>float:left;</strong> картинке. Выйдет такое.
<div class="example">
<div>
<img src="http://cssing.org.ua/images/ff.jpg" alt="FF" style="float:left;margin:4px;" />
<p style="font-size:150%;margin:0">Some kind of Heading</p>
<p style="margin:0;">Some text. Dean then started to talk about the power of the enclosure element in RSS 2.0. What is great about it is that it enables one to syndicate all sorts of digital content. One can syndicate video, music, calen it is that it enables one to syndicate all sorts of digital content. One can syndicate video, music, calen Some text. Dean then started to talk about the power of the enclosure element in RSS 2.0. </p>
<div style="clear:both"></div>
</div>
</div>
<p>Но заказчик ой как <strong>не хочет что бы текст оказывался под картинкой.</strong><br />
Если бы знать размеры картинок - можно бы было задать ширину для выдержки и заголовка. Но в том то и дело что картинки эти могут быть <strong>какими угодно.</strong></p>
<p>Вот эту ситуацию я и считал практически нерешабельной в "стандартах" (без таблиц).</p>
<h3>Решение</h3>
А решение оказалось таким же простым как и неочевидным. (спасибо <a href="http://www.gunlaug.no/">Gunlaug Sørtun</a>)
Вот недостающий кусок CSS: (для выдержки что загибалась под картинку)
<ol class="code">
<li>div.post p{ </li>
<li class="tab"><strong>display: table;</strong></li>
<li class="tab"><strong>_height: 0;</strong><small>/*это для ИЕ5-6*/</small></li>
<li class="tab"><strong>zoom: 1;</strong><small>/*это для ИЕ7*/</small></li>
<li>}</li>
</ol>
<p>В результате вышеуказанный пример превращается в такой</p>
<div class="example">
<div>
<img src="http://cssing.org.ua/images/ff.jpg" alt="FF" style="float:left;margin:4px;" />
<p style="font-size:150%;margin:0">Some kind of Heading</p>
<p style="margin:0;display:table;_height:0;zoom:1">Some text. Dean then started to talk about the power of the enclosure element in RSS 2.0. What is great about it is that it enables one to syndicate all sorts of digital content. One can syndicate video, music, calen it is that it enables one to syndicate all sorts of digital content. One can syndicate video, music, calen Some text. Dean then started to talk about the power of the enclosure element in RSS 2.0.</p>
<div style="clear:both"></div>
</div>
</div>
Оттестировано на Opera 7-8, Firefox 1.0, Safari 1.2.4, IE/win.
Остались только Unix+Linix броузеры и Ie5Mac. Но и там по идее все идеально.
<p><strong>Так как ИЕ7 не понимает хак _height:0 то для него следует использовать либо <a href="http://cssing.org.ua/2005/11/11/ie-magic/">conditional comments</a> либо другие виды хаков как то - $height. Спасибо Max за замечание!</strong></p>
<p>Зато теперь какого бы размера ни была картинка - текст всегда будет отображен в стороне от неё.</p>
<p>Говоря русским языком свойство <strong>display:table</strong> обеспечивает <strong>"вертикальную целостность блока"</strong> или <strong>запрет на обтекание FLOATов</strong>. Текст внутри блока с этим свойством не будет обтекать float элементы.</p>
<p>Если кто то знает еще что то касательно этого свойства буду рад услышать.</p>
<h3>Еще немного инфы</h3>
<ul>
<li><a href="http://www.pupinc.com/files/test/float.html">Pup's Float Hack</a> - CSS игры на эту тему</li>
<li><a href="http://css.weblogsinc.com/entry/1234000890022801/">Развитие темы + display: table-cell; и т д</a></li>
</ul>
Памятка по CSS layouts
2005-06-29T00:00:00Z
https://cssing.org.ua/2005/06/29/css-layout/
<p>Прочитав пост на <a href="http://coda.co.za/">coda.coza</a>, по адресу <a href="http://coda.co.za/archive/20050616/17:11:16">http://coda.co.za/archive/20050616/17:11:16</a> , просто не могу удержаться и не "перевести" к себе. (никак не успеваю за своим RSS-ридером...:(). Перепись почти всех layout-техник для построения шаблонов страниц...<!--more--></p>
<h3>Предисловие</h3>
Всё ниженаписанное - копия с сайта <a href="http://coda.co.za/">coda.coza</a>. Ни на какое авторство не претендую. Просто "свои" букмарки ближе к телу... ;)
<h3>Техники</h3>
<ol>
<li>
<p><strong>Фиксированная</strong>: ширина колонок задана в пикселах (как правило), а ширина всей страницы такая, что помещается на экран.(800 или сейчас уже 1024 пикселов)<br />
За: Просто реализовать.<br />
Против: Обычно ломается если увеличить размер текста в броузере.<br />
Пример: <a href="http://www.news.com/">news.com</a>, <a href="http://www.aol.com/">aol.com</a>, <a href="http://www.macromedia.com/">macromedia.com</a> (80% CSS сайтов как минимум)</p>
</li>
<li>
<p><strong>Резиновая</strong> (aka. Fluid): ширина задается относительными величинами, обычно используют 100% что бы растянуть страничку на весь экран.<br />
За: Приспосабливается к любой ширине экрана. Больше информации доступно без прокрутки. Гибкость и простота последующих апгрейдов.<br />
Против: На широких экранах страдает читабельность.<br />
Пример: <a href="http://wired.com/">wired.com</a>, <a href="http://sercotransarctic.com/">sercotransarctic.com</a></p>
</li>
<li>
<p><strong><a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">Зависимая от разрешения</a></strong> (Resolution dependent by Cameron Adams): меняется в зависимости от размера окна броузера. При смене размера изменяется и ширина страницы. Нужен JavaScript, но без него имеем просто фиксированный layout.<br />
За: Полный контроль за изменениями размера странички в зависимости от размера окна броузера. Гибкость.<br />
Против: Отбирает много времени, больше головной боли.<br />
Пример: <a href="http://www.themaninblue.com/experiment/ResolutionLayout/">пример автора</a>, <a href="http://www.rammstein.com/">rammstein.com</a>, <a href="http://www.microsoft.com/">microsoft.com</a> (для изменения нужно обновить окно).</p>
</li>
<li>
<p><strong><a href="http://www.alistapart.com/articles/elastic/">Эластичная</a></strong> (by <a href="http://www.htmldog.com/">Patrick Griffiths</a> и недавно, <a href="http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/">Roger Johansson</a>, и опять by <a href="http://www.stopdesign.com/log/2005/06/24/zoom-layout.html?style=zoom">Douglas Bowman</a>): изменяется в зависимости от размеров шрифта пользователя. Очень похоже на зум в Опере.<br />
За: Пользователь может регулировать. Гибкая и доступная.<br />
Против: Отбирает много времени, больше головной боли. Трудности с картинками.<br />
Пример: <a href="http://www.mozilla.org/">mozilla.org</a>, <a href="http://www.yahoo.com/">yahoo.com</a>, <a href="http://www.csszengarden.com/?cssfile=/063/063.css&page=0">Elastic Lawn</a> (CSS Zen Garden)</p>
</li>
<li>
<p><strong><a href="http://uwmike.com/archive/jello-liquid-layout/">Jello</a></strong> (by <a href="http://uwmike.com/">Michael Purvis</a>): Комбинирование Фиксированной и Резиновой техник.<br />
За: Гибкость и простота последующих апгрейдов.<br />
Против: не совсем простая реализация.<br />
Пример: <a href="http://uwmike.com/layout/jello/index2.php">пример автора</a>.</p>
</li>
<li>
<p><strong><a href="http://pro.html.it/articoli/id_620/idcat_31/pro.html">Прогрессивная</a>(?)</strong> (Progressive by Alessandro Fulciniti): Комбинация Фиксированного и Резинового. Фиксированный - при ширине окна броузера меньше 540px (например) и больше 1024px (например); между ними - Резиновый. Требует JavaScript.(при отсутствии JS превращается в обычный Фиксированный)<br />
За: Гибкость и простота последующих апгрейдов.<br />
Против: не совсем простая реализация.<br />
Пример: <a href="http://pro.html.it/esempio/proglayout/2col.html">пример автора</a>.</p>
</li>
<li>
<p><strong>Ограниченная</strong>: Резиновая страничка с заданной максимальной шириной(в пикселах)<br />
За: Гибкость и простота последующих апгрейдов.<br />
Против: Использует чисто IE'шное CSS свойство для реализации max-width.<br />
Пример: <a href="http://coda.co.za/">coda.coza</a>.</p>
</li>
</ol>
<h3>Заключение</h3>
Вот такая подборка.
Есть на что убить пару коротких летних вечеров.
Мне лично больше всего нравится Jello, мне кажется эта техника наиболее точно отражает потребности пользователей, хотя вьехать поначалу трудновато. Но её бы я использовал для своего блога и всем рекомендовал..
ЗЫ: если для каких то из них уже общеприняты русские названия, с радостью исправлю.
Выступление Дага Баумана на Reboot 7.0 (Копенгаген)
2005-06-17T00:00:00Z
https://cssing.org.ua/2005/06/17/doug-bowman-reboot-7/
<p>Сегодня слушал выступление <a href="http://stopdesign.com/">Дага Баумана</a> на <a href="http://reboot.dk/reboot7/show/HomePage">Reboot 7.0</a>. До этого разумеется ни разу ничего подобного не слышал. Кому интересно - можно закачать <a href="http://www.archive.org/audio/audio-details-db.php?collection=opensource_audio&collectionid=Reboot70HallAspeakerssaturday">отсюда</a>,<br />
А для особо ленивых ссылка на <a href="http://www.archive.org/download/Reboot70HallAspeakerssaturday/5.Doug_Bowman.mp4">файл с выступления</a> (49.2Mb, 46 минут <em>.mp4</em>(Quicktime), но оно того стоит).<br />
Небольшое ревью...</p>
<!--more-->
<p><strong>Выступление классное</strong>. Хотя практически все услышанное уже проскальзывало в блогах и ничего нового я не услышал, но подача материала - супер.<br />
Даг начинает издалека, рассказывает историю о DVD, (купил диск, а его плеер не смог проиграть, попросив апгрейда... Знакомо неправда ли?).</p>
<p>Через эту историю подошел к важности стандартов. А потом начал рассказывать и показывать примеры своих проектов и просто известных редизайнов больших сайтов. (и про Wired не забыл). А так же стандартный набор - <a href="http://espn.go.com/">ESPN</a>, <a href="http://pga.com/">PGA</a>, <a href="http://www.csszengarden.com/">CSSZendarden</a> и много других..</p>
<p>Параллельно с описанием, начал рассказывать о простых и полезных техниках. (типа класс или id для body, разделения стилей на шрифты, цвета и т д).</p>
<p>Много времени уделил проблеме доступности и откликам пользователей на редизайн.<br />
Особенно понравилось: Даг вспомнил как однажды вечером пришел очередной отзыв на редизайн Wired, в письме Баумана благодарили за отличную работу, сулили большое будущее как одному из пионеров в подобного рода проектах и т д. Таких писем ему, как он говорит, пришло немало.<br />
А в конце письма была строка:</p>
<blockquote>By the way, i'm blind.</blockquote>
<p>Вобщем - <strong>очень интересное выступление</strong>. Причастным к продаже и продвижению вебстандартов рекомендую послушать. Выступление рассчитано на не очень подготовленноно слушателя. Но если вы знаете что такое CSS, будет гораздо интересней.</p>
Acrylic
2005-06-12T00:00:00Z
https://cssing.org.ua/2005/06/12/acrylic/
<p>Вышел в свет профессиональный графический редактор уровня Photoshop & Fireworks. M$ явно пытается втиснуться в этот рынок, на котором она пока вообще не была представлена.<br />
Первое впечатление и скрины пока еще беты прилагаются.</p>
<!--more-->
<h3>Кому нужен?</h3>
Acrylic является наследником "Creature House Expression" (бесплатный) выпущенным еще в 2003 году.
<img src="http://cssing.org.ua/images/acr3.jpg" alt="Acrylic pic" title="Acrylic pic" class="right" />
Главным предназначением считается создание "рисованных" эффектов, а так же эффектов красок на воде. Я не художник но я понял что нечто подобное рисункам гуашью.(как слева) А это значит что конкурировать он будет скорее c Adobe Illustrator, чем с Photoshop.
<p>Везде упоминается стандартные обороты, что мол хотя прога векторная, но если надо все прелести пикселов в менюшке рядом, что все же ближе в ФШ. Хотя потеревшись на форуме где обсуждают бету, я понял что все эти пиксельные навороты только портят хорошую векторную часть проги. О ней кстати там много лестных отзывов...</p>
<h3>Скрины и примеры</h3>
А вот так выглядит воркспейс:
<img src="http://cssing.org.ua/images/acr2sm.jpg" alt="Acrylic workspace" title="Acrylic workspace" />
<a href="http://cssing.iatp.org.ua/images/acr2bg.jpg">Увеличить (140Kb)</a>
Все стандартно и привычно, очень похоже на Фотошоп/Иллюстратор...
Рисовать в ней легко и приятно, впрочем так же как и в Иллюстраторе.
У программы имеется свой формат <strong>.xpr</strong>, хотя она понимает и .psd.
Все остальное просто набор стандартных возможностей, ничего особенного я не заметил. Речь тут идет скорее не о новых возможностях, а об удобстве рисования.
<h3>резюме</h3>
<img src="http://cssing.org.ua/images/acr1.jpg" alt="Acrylic pic" title="Acrylic pic" class="right" />Все-таки как бы ни тянули в МС на фотошоп, но основное предназначение - векторная графика, и интересна программа должна быть прежде всего художникам-иллюстраторам,то есть тем кто рисует подобные картинки:
<p>Им мне кажется как минимум стоит попробовать этот продукт. Программа пока бесплатно доступна для скачки(до середины октября)</p>
<h3>инфа по Acrylic</h3>
<ul>
<li><a href="http://www.microsoft.com/products/expression/">Скачать</a> (70Mb)</li>
<li><a href="http://www.microsoft.com/communities/newsgroups/en-us/default.aspx?dg=microsoft.public.expression.discussion&cat=en_US_53631781-e9c6-4399-a0c2-563426b0e98f&lang=en&cr=US">Форум обсуждения беты</a></li>
</ul>
Скины для админки Wordpress
2005-06-10T00:00:00Z
https://cssing.org.ua/2005/06/10/admin-themes-wordpress/
<p>Я уже юзаю Wordpress скоро как год. И за все это время администраторский интерфейс не менялся вообще, разве что расширялся, поэтому скины на админку WP это просто спасение.<br />
<strong>Оффтоп</strong>: все еще ищу киевского PHP программера.</p>
<!--more-->
<h3>Tiger</h3>
Нетерпеливым сразу линк на первый скин - <a href="http://www.orderedlist.com/articles/wordpress-administration-design-tiger/">Tiger</a>. А <a href="http://www.orderedlist.com/downloads/wp-admin-tiger-v1.1.zip">отсюда</a> можно закачать последнюю на сегодня версию скина - 1.1.
<p>Для установки достаточно cкопировать все файлы в директорию <strong>wp-admin</strong> и заменить(а лучше забэкапить) файл <strong>wp-admin.css</strong>(в той же директории). И вуаля - админка преображается.<br />
<a href="http://cssing.iatp.org.ua/images/tigerbg.jpg">Вот скрин</a>.(100Kb)</p>
<h3>SpotPress</h3>
Второй устанавливается как обычный плагин. Это значит, что закачанные файлы надо скопировать в дир. <strong>wp-content/plugins/</strong>
А затем активизировать плагин SpotPress через админку.
<ul>
<li><a href="http://homepage.mac.com/kohlmannj/wordpress/spotpress/">"Живая" версия интерфейса</a></li>
<li><a href="http://homepage.mac.com/kohlmannj/wordpress/spotpress/spotpress.zip">Закачать последнюю версию SpotPress</a></li>
</ul>
<h3>Остальные скины</h3>
А теперь наряду с темами (скинами на сам блог), появился раздел для скинов под админки.
<ul>
<li><a href="http://codex.wordpress.org/Using_Themes/Theme_List#Admin_Themes">Список всех скинов на администраторский интерфейс Wordpress</a></li>
</ul>
Вес CSS селекторов
2005-06-09T00:00:00Z
https://cssing.org.ua/2005/06/09/css-selectors-weight/
<p><strong>Оффтоп</strong>: я еще жив. :)<br />
<strong>Оффтоп 2</strong>: PHP программерам смотреть конец поста...<br />
Когда долго писал слoжные по логике стили иногда начинал путаться в каскадах.<br />
Какое правило над каким имеет приоритет? Не всегда был уверен...</p>
<!--more-->
<p>Быть может кому то пригодится(выдержка с В3Ц):</p>
<pre>
LI {...} /* a=0 b=0 c=1 -> specificity = 1 */
UL LI {...} /* a=0 b=0 c=2 -> specificity = 2 */
UL OL LI {...} /* a=0 b=0 c=3 -> specificity = 3 */
LI.red {...} /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red {...} /* a=0 b=1 c=3 -> specificity = 13 */
#x34y {...} /* a=1 b=0 c=0 -> specificity = 100 */
</pre>
<p>Короче говоря в селекторе - каждое название тэга - <strong>1</strong> балл,<br />
каждое название класса - <strong>10</strong> баллов,<br />
и каждое название ID - <strong>100</strong> баллов.</p>
<p>Определенно, все это придумывали математики...</p>
<h3>Работа</h3>
Разыскивается хороший <strong>киевский</strong> PHP программер для <strong>долгосрочного проекта</strong>(<strong>не</strong>благотворительного). Интересующимся слать мне мыло с указаниeм работ. (мой адрес внизу) Или в комменты...
Мой mp3 плеер
2005-05-13T00:00:00Z
https://cssing.org.ua/2005/05/13/my-iriver/
<p>Купил себе недавно мп3 плеер. Делюсь своими впечатлениями от моего iRiver IFP 899.</p>
<!--more-->
<h3><abbr title="Тактико Технические Характеристики">ТТХ</abbr></h3>
<img style="float:right;margin:5px;border:none" src="http://cssing.iatp.org.ua/images/ifp800.jpg" title="iRiver IFP 899" alt="iRiver IFP 899" />
Вмещает целый гиг, покупал все думал: <strong>256</strong> - мало, <strong>512</strong> - а вдруг не хватит? В итоге <strong>гиг</strong> и все равно не хватает :). Кушает батарейку АА, на офсайте написано 40 часов - не совсем так. Имеется ввиду поочередное использование воспроизведения и радио.
В итоге на воспроизведении mp3 - порядка 30-35 часов в лучшем случае. Но и это совсем немало.
<p>Проигрывает mp3, OGG, ASF и WMA битрейт до 320килобит(поддерживает переменный). А больше и не надо.<br />
С компом обменивается по USB 2.0 (переходник с миниUSB прилагается).</p>
<p><a href="http://www.iriver.com.ua/iriver/catalog/ifp-899.php">Подробная характеристика</a></p>
<p>В поставку входит</p>
<ul>
<li>наушники</li>
<li>диск с дровами и прогой для обмена файлами с компом</li>
<li>чехлы для крепления на плечо и пояс</li>
<li>шнурок на шею</li>
<li>куча книжек на всех языках (и русском) </li>
<li>батарейка</li>
</ul>
Нет цветного экрана, за что отдельное спасибо (нафига на плеере цветной экран?). С цветным стоят примерно на 60уе дороже.
<h3>ненужные навороты(имхо)</h3>
Есть ФМ тюнер. Можно при желании писать песни с радио с битрейтом до 320 килобит/сек. Так же есть микрофон - можно юзать плеер как диктофон.
<h3>Недостатки</h3>
Разработчики позаботились об авторских правах и запретили скачивание музыки с плеера на комп. То есть закачать на плеер - нет проблем. Обратно низзя...
Хотя для меня это не недостаток. А вот для некоторых друзей... :) но при покупке надо это иметь ввиду. Говорят перепрошивка помогает.
<p>И к сожалению с компом плеер обменивается лишь через свою специальную программу - для закачки надо инсталлить прогу... А не как с обычными флешками.</p>
<h3>Резюме</h3>
В целом - <strong>очень приятное впечатление</strong>. Батарейки хватает примерно на неделю (!) среднего использования (несколько часов в день). Очень удобно носить с собой (на поясе, шее или плече) Бегать с ним просто.
+ гиговая флешка для рабочих нужд (можно и фильмы с собой носить)
<p>Но не стоит забывать главное преимущество(перед иПод) - одной пальчиковой(!) мне <strong>хватает на неделю</strong>, не радио, а просто музыки!!!</p>
<p>Кто соберется покупать однозначно рекомендую!</p>
Украинская правда
2005-05-12T00:00:00Z
https://cssing.org.ua/2005/05/12/pravda-com-ua/
<p><strong>Update</strong>: они признали свою небольшую оплошность, поэтому штурм серваков (спасибо Денни за идею) отменяется.<!--more--></p>
<h3>К счастью все что написано ниже теперь можно считать нечаянным</h3>
<strong><! - -</strong>
С месяц назад пытался облагородить вебстандартами один украинский посещаемый сайт - pravda.com.ua. Сделал для них пробную версию главной для показа достоинств и экономии трафика.
<p>Прошел месяц. Насчет их редизайна я не договорился - временный обрыв связи.</p>
<p>Сравниваем ХТМЛ-код и ЦСС:</p>
<ul>
<li><a href="http://cssing.iatp.org.ua/examples/123pravda/">Мой вариант</a></li>
<li><a href="http://pravda.com.ua/">Сегодняшняя pravda.com.ua</a></li>
</ul>
Какое совпадение: код изменился лишь для главной страницы. :)
<p>Для тех кому лень смотреть: в код добавились таблицы в некоторых местах(вместо DIV), зато остались мои фирменные DT-DD списки и все семантические тэги. Короче говоря код украден с незначительными переделками...<br />
А из CSS файла даже поленились убрать мои комментарии в стиле Дага Баумана(предыдущий пост.)<br />
Достаточно посмотреть на то, что DTD там XHTML strict - лишь потому что было так в моей версии...</p>
<p>Наверно виноват я сам, но что-то глубоко в душе говорит, что такого не должно случаться...<br />
<strong>- -></strong></p>
Структура CSS
2005-04-22T00:00:00Z
https://cssing.org.ua/2005/04/22/css-organization/
<p>Когда CSS файлы разрастаются на более чем 10 килобайт, встает проблема как их структуризировать. Наверняка все её для себя уже решили. Делюсь своим решением и еще парой подсмотренных.<!--more--></p>
<h3>Как это делаю я</h3>
Впервые подобная проблема встала когда я писал CSS для укр.нет. Я воспользовался довольно простым методом. Мой шаблонный CSS выглядит примерно так:
<pre>
/*layout
---------------------------------------------------------------------------------------------- */
структура страницы - всякие float, width и position для sidebar etc
/*assorted
---------------------------------------------------------------------------------------------- */
ссылки, списки - глобальные стили
/*flashrows
---------------------------------------------------------------------------------------------- */
стили для баннеров
.banner{display:none;(forever)}
/*header
---------------------------------------------------------------------------------------------- */
хедер он и в африке хедер
/*nav
---------------------------------------------------------------------------------------------- */
как и навигация
/*content
---------------------------------------------------------------------------------------------- */
Контент из Кинг - самый обьемный раздел CSS файла.
/*sidebar
---------------------------------------------------------------------------------------------- */
/*footer
---------------------------------------------------------------------------------------------- */
</pre>
То есть я упорядочиваю их по блокам. А сами блоки по порядку следования в коде.
<p>С тем исключением что layout и assort идут в начале. И вообще их я обычно выношу в отдельный CSS файл. Потому как в него лезу только если что то глобальное поменялось. В результате получается что то вроде layout.css и base.css.</p>
<p>Это еще и для того что бы метаморфозы для "оперов" были не такие разительные. layout.css обычно около 1килобайта успевает загрузиться раньше чем опера покажет контент ВООБЩЕ без стилей.</p>
<p>Кроме того такие длинные разделители позволяют легко ориентироваться в файле. Лишних 200 байт не жалко...</p>
<h3>wired</h3>
Для этого сайта стили упорядочиваются очень похоже. Просто потому что свой вариант я спер у Дага Баумана, в одной из его более поздних работ ;).
Правда там еще разделяются стили по цветам. Но это вызвано спецификой - у этого сайта каждый день новая цветовая схема. В целом же все распределено по блокам.
<h3>По другому</h3>
Еще один вариант - сделать font.css. Я пока правда не созрел для такого разделения. Но чувствую рано или поздно придется. Обычно в этом случае делают три CSS файла layout.css, fonts.css, colors.css. Однако это на любителя.
Таким образом можно "обескрасить" или менять типографику странички за минимальное время - но лично я в этом не вижу особой выгоды.
<h3>Экзотика</h3>
И еще два метода которыми реально пользуются буржуи-geek'и.
<p><strong>Первый</strong> - пишем один CSS файл где все упорядочиваем в алфавитном порядке. То есть стили для <code>acronym</code> идут перед стилями для <code>body</code> (ИМХО плохо)<br />
<strong>Второй</strong> - опять же один файл где сначала идут все стили с id, потом все с классами и наконец html-элементы. (попробуй что-нить найди потом...)</p>
<p>Но это как по мне экзотика - не для меня точно.</p>
<h3>Откуда черпал</h3>
<ul>
<li><a href="http://archivist.incutio.com/viewlist/css-discuss/28720">incutio.com</a></li>
<li><a href="http://www.andybudd.com/archives/2003/08/how_i_organize_my_stylesheets/index.php">www.andybudd.com</a></li>
<li><a href="http://web-graphics.com/mtarchive/000669.php">web-graphics.com</a></li>
</ul>
<h3>Feedback</h3>
Хотелось бы услышать чужие наработки...
Gmail+Handheld+RSS
2005-04-20T00:00:00Z
https://cssing.org.ua/2005/04/20/gmail-handheld-rss/
<p>На днях открыл америку. Уже давно всем известно(ведь известно же?) как можно серфить по инету через handheld, то есть мобилы и КПК. Однако свой телефон я к категории этой никак не причислял. И вот на днях "по приколу" зашел на свой CSSing. Приятному удивлению не было границ. :)<!--more--></p>
<h3>Что же я увидел?</h3>
У меня Siemens C65. Прямо скажем: <strong>не</strong> КПК. И вот я через GPRS лезу на CSSing. Вот примерно такую картину я увидел:
<p style="text-align:center;"><img src="http://cssing.org.ua/images/sc651.jpg" alt="CSSing на мобиле" title="CSSing на мобиле" /></p>
Кому то может показаться неприглядно - однако для меня красивее чем версия без стилей нет! :) И главное все что можно доступно. Я даже комментарий оставил.
После этого поехало alistapart, stopdesign...... Денег стало нехватать.
Однако оказалось что не все сайты имеют стили для handheld, и что хуже всего, не все отключают ЦСС для handheld. Мой броузер на мобиле по крайней мере часто пытается грузить ЦСС. Хотя с его трактованием у него проблемы... :(
<h3>GMAIL+RSS</h3>
Известно что на Gmail есть RSS лента для Inbox. Вот по такому адресу:
<pre>
http://gmailusername:password@gmail.google.com/gmail/feed/atom/
</pre>
Мне пришла идея сграбить этот RSS в простой HTML, на который потом заходить через мобилу. И не надо никаких POP протоколов и полноценных броузеров. То есть, если у вас есть GPRS и хостинг(или друг с хостингом) - то вы можете без проблем узнавать за какие то пару копеек список непрочитанных писем в ящике.
Кроме заголовков как правило ничего и не надо.
<h3>Реализация</h3>
Я выбрал PHP-скрипт <a href="http://w100w.com/english/php/xml_and_php/">отсюда</a>. (подходит любой - почти) В результате получилось неплохая проверка почты.
Когда я захожу по определенному адресу (не скажу) - PHP-cкрипт сграбливает заголовки непрочитанных писем из моего ящика и отображает их как обычный <code>DL</code> лист. То есть если у вас есть обычный GPRS на мобильном (а не только ВАП). То можно за пару копеек проверять почту на Gmail в любом месте где есть GPRS!
Вот так. Может у кого то есть еще идеи по юзанию мобильных?
<h3>Подобное</h3>
<ul>
<li><a href="http://ezhe.ru/ib/issue.html?311">Ломов про handheld</a></li>
</ul>
Как сжимать CSS
2005-04-07T00:00:00Z
https://cssing.org.ua/2005/04/07/gzipping-your-css/
<p>Иногда на больших сайтах размер CSS файла вырастает до 20 килобайт и больше. Несмотря на то что он кэшируется, есть способ все же сжать сам файл. Этот пост практически перевод статьи <a href="http://www.fiftyfoureleven.com/sandbox/weblog/2004/jun/the-definitive-css-gzip-method/">"The Definitive Post on Gzipping your CSS"</a> написанной <a href="http://www.fiftyfoureleven.com/">Mike Papageorge</a>. <!--more--><br />
Здесь я опишу методы сжатия CSS файла на 70-80% с помощью PHP. Вообще говоря это можно сделать и без PHP, лишь используя модули апача: <strong>mod_gzip</strong> или <strong>mod_deflate</strong>. То как это можно сделать описано<a href="http://www.sitepoint.com/article/web-output-mod_gzip-apache"> тут</a>. Если же доступа к конфигурации у вас нет (как часто бывает на хостингах), то можно воспользоваться одним из нижеследующих методов.</p>
<h3>Собственно сжатие</h3>
Для сжатия понадобится вот такой кусочек кода
<pre>
<?php
ob_start ("ob_gzhandler");
header("Content-type: text/css; charset=UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>
</pre>
Этот код делает следующее:
<ol><li>Использует PHPшный <a href="http://es.php.net/ob_gzhandler" title="ob_gzhandler">ob_gzhandler</a> для посылки сжатых данных. Эта функция сначала проверит может ли броузер принимать контент типа 'gzip,deflate' encoding;при отрицательном ответе посылает <em>несжатые</em> данные.
</li>
<li>Посылает header с content type и кодировкой файла - здесь это text/css и UTF-8.</li>
<li>Далее проверяет надо ли уже обновлять кэш для этого файла</li>
<li>Посылает информацию о том, сколько хранить файл в кэше до следующей загрузки.</li> </ol>
<h3>Метод первый</h3>
Первый метод заключается в переименовании вашего CSS файла в <code>.php</code>. При этом прикрепление к страничке будет выглядеть так:
<pre>
@import url(mycss.php);
</pre>
Ну и в начало файла нужно добавить кусочек кода указанный выше.
<h3>Метод второй</h3>
Второй метод чуть более универсальный. Тут не надо будет ничего менять в CSS файлах. Однако он требует правки .htaccess файла.
Во-первых нужно сохранить код указанный выше, например в файл "gzip-css.php".
А затем добавить в .htaccess файл следующие строки:
<pre>
AddHandler application/x-httpd-php .css
php_value auto_prepend_file gzip-css.php
php_flag zlib.output_compression On
</pre>
<h3>Пример</h3>
Я применил первый метод на зеркале ukr.net по адоесу<a href="http://alegol.ukr.net/"> http://alegol.ukr.net/</a>. Результат себя полностью оправдал.
Поскольку доступа к логам у меня нет, то я воспользовался сервисом websiteoptimisation.
Результаты можно увидеть по адресам:
<a href="http://www.websiteoptimization.com/services/analyze/wso.php?url=http://alegol.ukr.net/">alegol</a>,
<a href="http://www.websiteoptimization.com/services/analyze/wso.php?url=http://www.ukr.net/">ukr.net</a>
В результате размер CSS файла упал с 18Кб до 4.5Кб. Жаль нельзя логи посмотреть и узнать как оно на самом деле работает при массовых нагрузках.
<h3>Заключение</h3>
100% очень полезная штука особенно когда нет контроля над веб-сервером.
<p>Однако есть несколько недочетов. Ходят слухи что есть какой то глюк в одной из версий ИЕ6, якобы он посылает инфу что может читать gzip, но на самом деле не раскодирует контент такого типа. Если кто то заметит подобный глюк или что то слышал об этих случаях просьба откликнуться в комменты.</p>
<p>Надо только еще перепроверить как оно нагружает сервер, ну а малым и средним сайтам 100% мастду.</p>
<p>Мну удалось найти такую инфу.</p>
<blockquote>Unfortunately, IE6 (and perhaps earlier versions?) appears to have a bug with gzip over SSL where the <strong>first 2048 characters are not included</strong> in the HTML rendering of the page when refresh is pressed. It only seems to happen on longish pages, and not when the page is first loaded. In fact, sometimes it doesn't happen at all. The only current solution is to put a 2048
character comment at the start of your longish pages of all spaces (which compresses pretty well, fortunately).</blockquote>
<p>Однако тут имелись ввиду ХТМЛ файлы и апачевское сжатие, поэтому не знаю имеет ли это отношение к нашему случаю.</p>
Wordpress и подсветка навигации
2005-03-28T00:00:00Z
https://cssing.org.ua/2005/03/28/highlight-navigation-wordpress/
<p>Делюсь своим недавним простым, но все же полезным решением проблемы подсветки навигации, типа "я тут". По крайней мере вкупе с этим строить сайты на базе Wordpress, именно сайты, а не блоги, может оказатсья проще. Вобщем ближе к делу.<!--more--></p>
<h3>В чем проблема?</h3>
Например у вас есть блог на ВП, а теперь вы решили создать кроме главной( она же блог), еще пару статичных страниц (или не очень статичных).
Вот как у меня например. Создал я "Про это", "Ресурсы" и "Архив". Резонно было бы после всего этого сделать навигацию между этими разделами сайта.
<p>Сделать это раз плюнуть - навигация то не меняется от страницы к странице. Но тут как всегда приходит мысль о подсветке нужного раздела. То есть если вы на главной в навигации выделяется меню "Блог", и в таком роде. Вот тут и появляется маленькая проблемка.</p>
<h3>Решение</h3>
Решение чрезвычайно простое. Даже название решение - это громко сказано. :)
Короче говоря. Так как я использую систему темплейтов для своего сайта. ( разложенный на мелкие куски макет странички сайта ) то все изменения коснулись лишь файла <strong>header.php</strong>.
<h3>Определение положения</h3>
Для того что бы знать какой элемент навигации подсветить нужно знать где мы находимся.
Вот такой простой код помогает и лечит от всех проблем:
<ol class="code">
<li>if(is_home()) {</li>
<li>$homid=" id="current"";</li>
<li>}</li>
<li>if(is_archive() || is_single()) {</li>
<li>$arcid=" id="current"";</li>
<li>}</li>
<li>if(is_page('Стоит посетить')) {</li>
<li>$resid=" id="current"";</li>
<li>}</li>
<li>if(is_page('Про это')) {</li>
<li>$aboid=" id="current"";</li>
<li>}</li>
</ol>
названия функций говорят сами за себя.
Каждая определяет находимся ли мы на главной, на странице с одним постом или же в архиве, и конечно не на странице ли мы с названием...
<h3>Навигация</h3>
Ну а теперь дело за малым собственно навигация начинает выглядеть примерно так
<ol class="code">
<li><ul></li>
<li><li><a href="/"<strong><?=$homeid;?></strong>>Блог</a></li></li>
<li><li><a href="/archive/"<strong><?=$arceid;?></strong>>Архив</a></li></li>
<li><li><a href="/resources/"<strong><?=$resid;?></strong>>Ресурсы</a></li></li>
<li><li><a href="/about/"<strong><?=$aboid;?></strong>>Про это</a></li></li>
<li></ul></li>
</ol>
Вот и все. Теперь <code>id="current"</code> будет у той странички на которой мы находимся. Остальное дело стилей. Как раз на моём блоге работает примерно такая схема.
Мои полезности
2005-03-21T00:00:00Z
https://cssing.org.ua/2005/03/21/useful-progs/
<p>Делюсь своими каждодневными програмками. У каждого есть какой-то устоявшийся инструментарий. Свой я почерпнул из подобной заметки на чужом блоге. Поэтому возвращаю долг. ;)<!--more--></p>
<h3>В чем код пишу</h3>
Сначала мой выбор пал на EditPlus. Легкая програмка. Подсветка где надо. Но чего то ей не хватало. Да и раскраска кода уж больно кислотная у них. Пускай её можно менять, но разве кто-то отменял лень? В итоге пользуюь я вот чем:
<p><strong><a href="http://notepad-plus.sourceforge.net/uk/site.htm">Notepad++</a></strong> - мой текстовый редактор. В нем собсвенно написано ВСЕ. Кроме картинок. Их я рисую в другом... "текстовом редакторе" ;). Любовь с первого взгляда, раскраска просто под меня. Плюс шрифт. Плюс по-русски(мелочь а приятно). Плюс поддержка всех возможных языков. Плюс возможность сворачивания кода "a la DOM".<br />
Короче для меня лучше и нет еще...</p>
<h3>Чем закачиваю то, что написал</h3>
<strong><a href="http://www.smartftp.com/">SmartFTP</a></strong> - мой любимый ФТП клиент. В принципе ничего особенного. На его месте мог оказаться любой другой. Вкратце:<strong> бесплатный</strong>, удобно хранить кучу аккаунтов, просто удобно. И относительно нетяжел...
<h3>Чем управляю</h3>
<strong><a href="http://wordpress.org/">Wordpress</a></strong> - моя любимая "родная" СMS. Первая ЦМС которую я стал использовать. Что-то в ней есть. По крайней мере попробовать стоит однозначно.
<p><strong><a href="http://textpattern.com/">Textpattern</a></strong> - моя любимая "неродная" СMS. То есть та, на которой удобно разверттывать быстро сайты удобные для добавление контента. Рулезз вобщем. Скоро ожидается релиз 1.0. Ждем-с...</p>
<h3>Чем отслеживаю</h3>
<strong><a href="http://www.shauninman.com/mentary/past/shortstat_again.php">ShortStat</a></strong> - удобнейшая статистика. Нормальный интерфейс. Привыкнув ниче другое уже не потребуешь. Особенно с плагином...
<p><strong><a href="http://jehiah.com/archive/pathstats">PathStats</a></strong> - плагин для статистики, который умножит время проводимое за её просмотром ровно в 3 раза. ;) Находка недели для меня. (<a href="http://cssing.iatp.org.ua/shortstat/path.php">пример моей</a>) Спасибки <a href="http://blog.emo.com.ua/">Поспелову</a></p>
<h3>А ты?</h3>
Буду рад если кто-то поделится своими полезностями. Милости просю в комменты.
Переход
2005-03-08T00:00:00Z
https://cssing.org.ua/2005/03/08/perehod/
<p>Временно блог будет только ввиде дневника и без свежих ссылок.<br />
Перехожу на wordpress-1.5...<br />
Для меня он особенно болезненный потому как моя предыдущая версия была оооочень стара... :(<br />
Можно сказать второе рождение блога.</p>
Баги укр.нет
2005-03-04T00:00:00Z
https://cssing.org.ua/2005/03/04/bagi-ukr-net/
<p>Решил описать некоторые глюки попавшиеся при разработке сайта укр.нет. Быть может кому то окажутся полезными. По крайней мере, мне - точно. :)<br />
Вобщем смотрите по заголовкам - что интересует...</p>
<!--more-->
<p><strong>Не по теме</strong>: Еще пара постов со словом укр.нет в заголовке и надо будет себе почту поднимать на сайте. :)<br />
Гугл траффиком обеспечит...</p>
<h3>height:<span class="strike">1%</span> 0.1%;</h3>
Есть такой баг у ИЕ - <strong><a href="http://www.positioniseverything.net/explorer/threepxtest.html">3px jog</a></strong>. Не буду точно описывать его тут.
Ну и разумеется как у каждого уважающего себя бага, у него есть своё решение. Которое называется звучно "<a href="http://www.positioniseverything.net/articles/hollyhack.%20html">Hollyhack</a>" .
Там вы прочитаете подробнее, если раньше не знали.
Суть в том что там(в хаке) есть строка:
<pre>
#hacked{
height:1%;
}</pre>
работает отлично и везде. Но.
Если блок который содержит этот элемент(#hacked) имеет большую высоту.
Например 10000 пикселей(много да?) как здесь <a href="http://www.ukr.net/?dir=topic&id=1"> http://www.ukr.net/?dir=topic&id=1</a>(после обеда и до 12 часов ночи)
Вобщем ИЕ 5.0 считает этот один процент от этих 10000 пискелей и получается совсем не то что надо.
Простое решение поставить вместо 1% например .1% или .01%. Что и было добавлено как замечание на странице "<a href="http://www.positioniseverything.net/articles/hollyhack.%20html">Hollyhack</a>"а.
<h3>Линукс и INPUT</h3>
Еще один баг мне подсказал некто Евгенией Шумилов, за что ему отдельная благодарность.
Баг заключается в следующем. Раньше на укр.нет была строка
<pre>
<input id="search" .... <strong>size="70"</strong> />
</pre>
Во всех системах отображалось примерно одинаково, даже во ФриБЗД. но вот в линуксе этого человека поле ввода было намного длиннее, что приводило к глюку части лэйаута странички. Уж не знаю с чем это может быть связано (настройки размера шрифта в системе?) Короче говоря самое простое решение это задавать его размер в пикселах. Тем более, как правило, резиновые поля ввода имеют мало смысла...(ИМХО)
<pre>
#search{
width:440px;
}</pre>
И все нормализовалось.
<h3>Iframe</h3>
Все кто имел дело с рекламой в вебе понимают, как трудно на сегодняшний день избавиться от Iframe, хотя его и надо изживать.
Вобщем на сайте укр.нет есть два баннера, оба задаются через ифрэйм.
Тот что справа не доставил мне особых проблем.
А вот верхний в виде полоски...
По непонятным для меня прричинам этот верхний баннер сдвигал некоторые (не все!) блоки в правой(причем тут правая?!) колонке. И ничего с этим нельзя было поделать.
Есть ифрэйм - есть сдвиг, нет ифрэйма - нет сдвига. И никакие отступы не помогали.
Единственное что я придумал и что все исправило :
<pre>
iframe{
position:absolute;
}
</pre>
Только вырывание этого блока и его содержимого из общей модели отображения исправило эти мистические отступы.
А так как размеры баннеров, как правило, известны заранее, то это решение тут было допустимо.
<h3>Замена заголовка на картинку</h3>
Для укр.нет я использовал примерно такой заголовок в коде
<pre>
<h1>
<a href="#">
Ukr.net это - мой Интернет.
</a>
</h1>
</pre>
А для замены на картинку вот такой CSS код:
<pre>
h1 a{
background: #fff url(pic/ukrnet.gif) no-repeat 0 0;
float:left;
width: 175px;
height: 54px;
text-indent: -1000em;
overflow: hidden;
}</pre>
Везде все отображается отлично. За исключением все тех же линуксоидов, они это видели примерно так:
<img src="http://cssing.iatp.org.ua/pic/ukrlogo.gif" alt="Логотип укр.нет в линуксе" title="Логотип укр.нет в линуксе" />
Можно это считать даже не глюком а моим недосмотром, все исправляет строка:
<pre>
h1 a{
background: #fff url(pic/ukrnet.gif) no-repeat 0 0;
float:left;
width: 175px;
height: 54px;
text-indent: -1983em;
overflow: hidden;
<strong>text-decoration:none;</strong>
}</pre>
И все в порядке.
<h3>Гороскоп</h3>
Это не глюк, но просто мне очень понравилось моё решение этой маленькой задачи.
<a href="http://www.ukr.net/?dir=goro&sign=taurus">Гороскоп</a> представлял собою раньше таблицу 4 на 3. Естественно таблицу я там допустить не мог - дело принципа :).
И как то само собой пришло следуещее решение. Оно почти очевидное, но мне все равно очень нравится.
Таблицу я заменил на вот такой код:
<pre>
<ul class="goro">
<li id="aries"><a href="#">Овен</a> <span>21.03-20.04</span></li>
<li id="taurus"><a href="#">Телец</a> <span>21.04-20.05</span></li>
.................
<li id="pisces"><a href="#">Рыбы</a> <span>21.02-20.03</span></li>
</ul>
</pre>
Отобразится без стилей примерно так:
<ul class="goro">
<li id="aries"><a href="https://cssing.org.ua/2005/03/04/bagi-ukr-net/#">Овен</a> <span>21.03-20.04</span></li>
<li id="taurus"><a href="https://cssing.org.ua/2005/03/04/bagi-ukr-net/#">Телец</a> <span>21.04-20.05</span></li>
<li id="pisces"><a href="https://cssing.org.ua/2005/03/04/bagi-ukr-net/#">Рыбы</a> <span>21.02-20.03</span></li>
</ul>
Обычный список. Айди я проставил что бы убрать картинки гороскопных созданий в ЦСС. В принципе это было дело вкуса, можно было и оставить тэг ИМГ.
И в результате с помощью всего пары строк CSS:
<pre>
ul.goro li{
<strong>width:127px;
height:40px;
float:left;</strong>
padding-left:28px; /* отступ для иконки знака зодиака*/
font-size:11px;
}
</pre>
Теперь <a href="http://www.ukr.net/?dir=goro&sign=taurus">здесь</a> мы видим таблицу 3 на 4, которая однако есть не что иное как обычный список. Который мне кажется гораздо ближе по смыслу.
Настоящий XHTML или пока не стоит?
2005-02-25T00:00:00Z
https://cssing.org.ua/2005/02/25/xhtml-worth-or-not/
<p><strong>Не по теме:</strong> Эхх... Хостинг упал на целых два дня... :( Сорри всем кто пытался.</p>
<p>Недавно меня уличили в том что страничка <a href="http://www.ukr.net/">UkrNet</a> не то что не удовлетворяет стандарту <abbr title="eXtensible Hypertext MarkUp Language">XHTML</abbr>. А самым грубейшим образом его нарушает. И вообще немедленно должна быть отредактирована.<br />
Первая мысль была "хм?!" - валидатор говорит ок!, и наличествует грубая ошибка.</p>
<!--more-->
<h3>А дело было вот в чем</h3>
Есть такой не совсем давний спор под названием "content negotiation".
Заключается она вот в чем.
Согласно рекомендации <abbr title="eXtensible Hypertext MarkUp Language">XHTML</abbr> сама страничка удовлетворяющая этому стандарту должна подаваться как "<strong>text/xml, application/xml, или application/xhtml+xml</strong>" . однако так же обозначается что он(контент тайп) может быть <strong>text/html</strong>.
Так вот это и было засчитано как грубейшая ошибка, несмотря на то что валидатор её "для простоты" игнорирует.
<h3>В чем разница</h3>
А разница состоит в том, что при указании правильного контент тайпа(xhtml+xml) Опера и ФФ используют другой парсер для отображения. Который работает быстрее.
Второе отличие, что в результате мы получаем не так называем "<strong>tag soup</strong>" то есть кашу из тэгов или обычный <abbr title="Hypertext MarkUp Language">HTML</abbr>, а <abbr title="eXtensible Hypertext MarkUp Language">XHTML</abbr> то есть почти XML.
В конце я приведу несколько ссылок, а пока сделаю свои выводы, если в чем то неправ поправьте в комментах:
<dl>
<dt>Итак сначала что мы выигрываем от использования правильного ДТД</dt>
<dd><ul style="margin:0;padding:0;"><li>Мы получем "расширяемость" <abbr title="eXtensible Hypertext MarkUp Language">XHTML</abbr>, то есть можем использовать другие ДТД типа MathML прямо в XHTML коде. Но для укрнет это пока что мягко говоря излишне</li>
<li>Странички будут рендерится быстрее, но только у ФФ и Оперы.
(рендерится значит сам броузер будет обрабатывать изображение с большей скоростью) но не грузиться быстрее.</li>
<li>Наконец у нас выйдет не тэг суп а настоящий XHTML (ура?!)</li>
<li>Это круто, это стандарт, это будущее</li>
</ul>
</dd>
<dt>А теперь недостатки</dt>
<dd>
<ul style="margin:0;padding:0;"><li>страничка будет отображаться только после полной загрузки
файла.(юзер икспириенс и хиты вниз)</li>
<li> множество джаваскриптов перестает работать (типа документ.врайт) - надо переписывать заново.</li>
<li> при наличии ошибок страничка не будет отображена вообще(в опере и ФФ).</li>
<li> сложности с подгонкой динамического кода под такой строгий стандарт</li>
<li>необходимость вставки в Хед файла ДЖскрипта который разным броузерам будет "записывать" разные ДТД. И совсем не факт что правильно.(ИЕ не понимает правильного доктайпа)</li>
</ul>
</dd>
</dl>
Вобщем в целом ни броузерный рынок (ИЕ попросту не понимает xhtml+xml) ни сам стандарт ИМХО еще не готовы для повсеместного внедрения.
Вот из таких предпосылок я и решил не переходить на данный контен тайп.
<p>Однако после этого возникает вопрос: почему я использую доктайп XHTML 1.0?<br />
Действительно <strong>формально</strong> у меня всего лишь обычный HTML и никак не XHTML.<br />
Однако я считаю для себя правилом употреблять кавычки для всех атрибутов, писать их с маленькой буквы, закрывать одиночные тэги и так далее. Валидатор же при доктайпе HTML, не найдет даже таких простых ошибок.<br />
И к тому же я считаю что само W3C позволяет использовать такой способ подания XHTML как переходной вариант. Ведь сами броузеры еще к нему не совсем готовы.</p>
<p>Собственно этот пост вылился из спора с одним веб-разработчиком, который почему то считает это(контент тайп на укр.нет) грубой ошибкой.<br />
Вот ресурсы где можно подробнее узнать об этом споре:</p>
<ul>
<li><a href="http://www.autisticcuckoo.net/archive.php?id=2004/11/03/content-negotiation">Content Negotiation</a></li>
<li><a href="http://blog.deconcept.com/2004/11/03/why-its-ok-to-send-xhtml-as-text-html/">Why it’s OK to send XHTML as text/html</a> - здесь очень много комментариев, среди прочих и Майк Дэвидсон отметился...</li>
<li><a href="http://www.spartanicus.utvinternet.ie/no-xhtml.htm">No to XHTML</a></li>
</ul>
<p><strong>ЗЫ</strong>: в следующей заметке напишу о глюках что я выловил во время разработки <a href="http://www.ukr.net/">Ukr.Net</a></p>
UkrNet!
2005-02-16T00:00:00Z
https://cssing.org.ua/2005/02/16/ukrnet/
<p>Так долго не доходили руки до блога.<br />
Но оно того стоило.<br />
Итак <a href="http://ukr.net/">ukr.net</a>.<br />
Один из первых сайтов на постсоветском пространстве отредизайненых в <a href="http://webstandard.ru/">стандартах</a>. Можно сказать работа <a href="http://live.julik.nl/">Мафии</a>. ;) В моём скромном лице.</p>
<!--more-->
<h3>Что случилось?</h3>
Сайт УКРНЕТа перешел на стандартную верстку вчера в 22 30 по киевскому времени(15.02.2005).
Всем идти на укрнет и смотреть сорс.
Пока конечно валидацию мы не проходим...
но это только из-за амперсандов и маленьких недосмотров.
Вобщем скоро будем. ;)
<p>Почему Транзишинал а не Стрикт?<br />
Все просто - <strong>target="_blank"</strong>.<br />
А тут они и по смыслу подходят как нельзя лучше.<br />
Вобщем Стрикт отложим до лучших времен...</p>
<p>Однако ЦСС валидацию проходит...<br />
А сама страничка проходит тест на соответствие требованиям доступности 508 статьи...(внизу странички есть ссылки)</p>
<h3>Числа</h3>
Однако не из-за стандартов же они редизайнились.
Теперь о коде. Что было и что стало. Дизайн, замечу, остался таким, каким и был до этого.
Сначала сухо:
<table cellspacing="0" cellpadding="5" width="100%" class="data">
<tr class="row-header">
<th> </th>
<th>Старый код</th>
<th class="focus">Новый код</th>
</tr>
<tr>
<th> Размер CSS файла </th>
<td>~10 KB</td>
<td class="focus">~18 KB</td>
</tr>
<tr class="alt">
<th> Размер HTML файла </th>
<td>~66 KB</td>
<td class="focus">~26 KB</td>
</tr>
<tr>
<th><strong>Общая Экономия(На ХТМЛ) </strong></th>
<td>-</td>
<td class="focus"><strong>~60%</strong></td>
</tr>
</table>
CSS вырос. Но следует помнить что грузится он будет лишь при первой загрузке. И потом время от времени.
Вобщем руководство довольно. И мне не остается ничего как порадоваться вместе с ними. :)
<p>Кстати оглянувшись на проделанное я понял - я фанат тэга <strong>DL</strong>. :)</p>
<h3>Еще немного чисел</h3>
И так предположим я средний посетитель портала ukr.net. Тогда в среднем за день я зайду на главную страничку примерно 20раз. (сужу по хитам и хостам в статистике Бигмира).
по сути все, что изменилось, это <abbr>HTML</abbr> и <abbr>CSS</abbr> файлы, баннеры грузятся все те же, как и скприпты.
СSS файлы можно из сравнения исключить. Грузится они будут реже. Да и разница в размере <abbr>HTML</abbr> намного больше чем в размерах старой и новой <abbr>CSS</abbr>.
Итак, при каждом хите(заходе на сайт) пользователь будет грузить на 30Кб меньше чем раньше. В день это ему выльется в 600Кб. В месяц 18 мегабайт. Если мегабайт по 50Коп (у меня так) , выходит ~10грн. То он может купить цветок девушке (или даже 3). Вот такое доброе дело я сделал. Теперь все кто платят за траффик пусть купят цветок и кому-нить его подарят. (если они пользуют укр.нет конечно...)
<p>Однако экономия траффика со стороны самого портала намного более заметна.<br />
Учитывая примерно миллион хитов в день и разницу в 30Кб в загружаемых файлах.<br />
Легко получаем <strong>10^6*30Kb=~30Gb</strong>. И за год примерно терабайт. Тут должны думать власть имущие.<br />
На месте руководства я б каждый жень дарил кому-нибудь цветы. :)</p>
<p>Естественно трафик это не все. Подробнее новых достоинствах портала читайте в недавно стартовавшем проекте <a href="http://webstandard.ru/faq.htm">Webstandard.ru</a></p>
<h3>Вывод</h3>
Напоследок замечу, что <a href="http://www.ukr.net/">ukr.net</a> - второй (почти первый) по посещаемости сайт в Украине. И верстка его близка к моему пониманию идеального кода. (почти идеального)
Переходить на стандарты стоит(скока пока не знаю... ;))! И смело можно!(?)
<p>Вобщем комментарии-замечания приветствуются!</p>
Цитаты aka Pull Quote
2005-01-19T00:00:00Z
https://cssing.org.ua/2005/01/19/aka-pull-quote/
<p>Очень мне нравится идея так называемых "Pull Quote". На русском просто цитата или врезка. Что это такое вы можете посмотреть например на сайте <a href="http://www.melos.com.ua/">http://www.melos.com.ua/</a> . Это те серые цитаты слева.<br />
Вот и решил посвятить им пост.</p>
<!--more-->
<h3>Про это</h3>
Хотя некоторые спорят насчет их полезности мне все же они кажутся очень удобными. Обычно они дублтруют какую-то строку из текста, для лучшего восприятия. Часто это означает и дублирование этой строки в коде. Вот это мне и не нравится.
Я нашел 2 метода избежания этой ситуации. Вдруг кому пригодятся
<h3>Метод первый</h3>
Первый метод я "спер" с сайта <a href="http://digital-web.com/">http://digital-web.com/</a>.
(например в этой <a href="http://digital-web.com/articles/web_design_for_all_the_senses/">статье</a> - цитата на сером фоне).
Небольшой скрипт решает простую задачу. Однако у них предусмотрено лишь одна такая цитата. И каждый раз в конкретном месте страницы(мы задаём номер абзаца). Для того чтобы скрипт работал нужно
<ol>
<li>Подключить его.</li>
<li>Иметь <code>SPAN</code> с классом <code>pullquote</code></li>
</ol>
В результате скрипт при загрузке спродуцирует такой код:
<pre>
<blockquote class='pullquote'>
<p class='pullquote'>
<span class='pullquote'>
content
</span>
</p>
</blockquote>
</pre>
Из которого вы уже можете сделать все что вам прийдет в голову с помощью CSS.(<a href="http://cssing.org.ua/examples/pullquote/wdpull.php" title="Пример украденный из журнала Digital Web">посмотреть пример</a>).
Лучше им конечно не пользоваться - он писался специально для тех страниц. Им нужны была лишь одна цитата.
<h3>Метод второй</h3>
Прочитал в статье "<a href="http://www.fiftyfoureleven.com/sandbox/weblog/2004/jun/javascript-pullquote/">Create a Pull Quote with Javascript (and CSS)</a>".
Этот метод гораздо универсальнее. С помощью этого скрипта этих цитат вы можете сделать столько сколько <code>SPAN</code> с классом <code>pullquote</code>, причем каждая цитата будет напротив своего "родного" параграфа.
Требования к работе точно такие, как и у предыдущего.
Этот скрипт будет при загрузке генерировать вот такой код:
<pre><blockquote class='pullquote'>
<p>
<span class=''>
content
</span>
</p>
</blockquote></pre>
Этот скрипт и меньше и универсальнее. Им я и рекомендую вам пользоваться.
(<a href="http://cssing.org.ua/examples/pullquote/" title="Универсальный пример">посмотреть пример</a>)
<h3>В конце</h3>
Мне нравится когда с содержанием можно вот так кратко ознакомиться в таких цитатах. (если их умело подбирать, конечно). А скрипты эти более чем просты в использовании. Так что себе наверно я такие сделаю, как только перейду на новый <a href="http://wordpress.org/nightly/">WP</a>. ;)
<p>Вот два примера(скрипты можно легко из них достать)</p>
<ul>
<li><a href="http://cssing.org.ua/examples/pullquote/" title="Универсальный пример">Универсальный пример</a></li>
<li><a href="http://cssing.org.ua/examples/pullquote/wdpull.php" title="Пример украденный из журнала Digital Web">Пример украденный из журнала Digital Web</a></li>
</ul>
Сайтик
2005-01-11T00:00:00Z
https://cssing.org.ua/2005/01/11/my-first-site/
<p>Перед новым годом сделал халтурку.<br />
Надо было облагородить сайт одной фирмы. Ну и мой друг свалил это на меня.<br />
Вобщем после дня работы родился сайт. (<a href="http://www.melos.com.ua/">www.melos.com.ua</a>)<br />
"Дизайн" весь мой, не считая верхней картинки, которую "клиент" решил изменить "под себя". :).</p>
<p>Может дизайн там и не ахти, зато код - песня. :) Вот такой я маньяк кодер.<br />
Кому не лень можете высказать мнение... А я пошел сдавать сессию.</p>
Конец
2004-12-28T00:00:00Z
https://cssing.org.ua/2004/12/28/new-year/
<p>Наконец то закончилась наша революция.<br />
По результатам ЦВК на этот момент посчитано 99.91% голосов<br />
За Ющенко - 52.01<br />
За Януковича - 44.18<br />
Я считаю что справедливость восторжествовала. Хотя до последнего момента в это не верилось.</p>
<h3>Всех с наступающими!</h3>
Всех поздравляю с праздниками! Всех благ!
<p>В связи с сессией и новым годом возможны некоторые перерыве на блоге...</p>
<p>p.s.: рекомендую на время праздников обои - <a href="http://www.mezzoblue.com/downloads/" title="Симпатичная снегурочка">http://www.mezzoblue.com/downloads/</a></p>
Таблицы в полоску
2004-12-13T00:00:00Z
https://cssing.org.ua/2004/12/13/striped-tables/
<p>Давненько уже на <a href="http://www.alistapart.com/" title="A List Apart">ALA</a> была статья про <a href="http://www.alistapart.com/articles/zebratables/">"Полосатые таблицы"</a>. Решил поделиться маленькой хитростью которую подсмотрел там же в обсуждении статьи.</p>
<!--more-->
<h3>Что было</h3>
В оригинальной статье использовался довольно немаленький (по меркам современного веба) скрипт. Этот скрипт искал таблицу и потом определенным ячейкам присваивал фоновый цвет.
Причем этот скрипт не работал в старых ИЕ(5.0, 5.5) поскольку они не поддерживали такое присвоение.(у меня по крайней мере не заработало).
<p>Присвоение же цвета агрументировалось экономией имени класса.(<acronym title="ин май опинион">ИМО</acronym> абсолютно не нужной). перевод статьи можно почитать здесь: <a href="http://cssing.iatp.org.ua/articles/index.php?p=6">Полосатые таблицы</a></p>
<h3>Другие пути</h3>
Порывшись на ALA в обсуждении этой статьи, я обнаружил несколько намного более изящных путей для решения проблемы.
<h3>Путь первый: универсальный</h3>
Идея первого пути почти такая же в оригинале. Но теперь мы присваиваем не фоновые цвета для каждой ячейки, а классы для строк.
Вот собственно скрипт:
<pre>
function stripe(id) {
var table = document.getElementById(id);
if (! table) { return; }
var trs = table.getElementsByTagName('tr');
for (var i = 0; i < trs.length; i += 2) {
trs[i].className += ' even';
}
}
</pre>
Где вместо ID нужно подставить ID будущей "зебры".
Лично я, для раскраски нескольких таблиц, использую такую конструкцию:
<pre>
/*Running onLoad Scripts*/
function runScripts()
{
stripe('price');
stripe('price-a');
stripe('price-b');
stripe('price-d');
}
window.onload = runScripts;
</pre>
Ну и естественно, так как скрипт лишь расставляет лишь класс для строк без CSS тут не обойтись:
<pre>
#price tbody tr.even td {
background-color: #edf3fe
}
</pre>
Таким образом на любой странице этим подключенным скриптом будут раскрашены таблицы с id <code>price,price-a,price-b,price-d</code>.
Пример можно посмотреть по адресу: <a href="http://cssing.iatp.org.ua/examples/melos/table.html" title="Пример зебры">http://cssing.iatp.org.ua/examples/melos/table.html</a>
<h3>Второй путь: НЕуниверсальный</h3>
Это решение наверно можно назвать реализацией CSS3 в <acronym title="Internet Explorer">ИЕ</acronym>.
Работает это естественно только для ИЕ. :(
Но уж больно симпатичное и изящное оно.
Для полосатых таблиц достаточно добавить в CSS вот такую строку:
<pre>
.zebra tr {
background: expression(this.rowIndex%2 == 1?'#F0F0F0':'#FFF');
}
</pre>
Все таблицы класса .zebra будут полосаты в ИЕ.
<h3>Само собой</h3>
Для того что бы работал скрипт, надо что бы структура таблиц была примерно такая:
<pre>
<table id='playlist'>
<tbody>
<tr class='odd'>
...
</tr>
</tbody>
</table>
</pre>
Ну и для красоты рекомендую сразу поставить <strong>cellspacing="0"</strong> для всех таблиц которые вам нужны полосатыми.
<p>В обсуждении были еще методы. Но первый был лучшим, а второй занятным. Что и определило мой выбор.</p>
Поиск Данстана
2004-12-06T00:00:00Z
https://cssing.org.ua/2004/12/06/dunstansearch/
<p>Немного оклемался от революции и на глаза попалась классная штука.<br />
Еще одну великолепную идею подарил нам <a href="http://www.1976design.com/blog/">Данстан Орчард</a>(<a href="https://cssing.org.ua/2004/12/06/dunstansearch/#update">уточнение</a>). Если вы еще не знаете попробуйте поискать на его сайте чего-нибудь.(Enter не нажимать!)</p>
<!--more-->
<p>Вот решил разобраться как же такое делать. Вдруг еще кому окажется полезным.</p>
<h3>В чем фишка?</h3>
Главная фишка этого "живого" поиска в том, что страница не обновляется, когда вы ищете что-нибудь. Как это возможно?
<h3>XML HTTP Request</h3>
Не буду излагать всю статью. Главное, что этот объект позволяет javascript делать HTTP запросы и получать на них ответ. Это открывает немерено возможностей. И одно из самых главных - мы можем обновлять некоторую информацию на странице <strong>без</strong> ее(страницы) обновления полностью. Подробнее об использовании этого объекта читайте здесь:
<a href="http://jibbering.com/2002/4/httprequest.html">Using the XML HTTP Request object</a>
(там есть некоторые оговорки с поддержкой, но Мозилла и ИЕ работают)
<h3>Не только javascript</h3>
Однако одним джаваскриптом тут не обошлось. Ведь надо получить из базы результаты поиска. Поэтому скрипт вызывает php файл поиска и оттуда черпает результаты.
<h3>Все вместе</h3>
В целом если опустить мелочи касательно задержек, очистки поиска и тому подобного. То можно так представить этот поиск:
<ol>
<li>Создается объект и примерно такой строкой запрашиваем результат поиска:
<pre>
liveSearchReq.open('GET', processURI+searchInput.value);
</pre>
При этом нам надо использовать специальный скрипт для поиска. Он должен возвращать <strong>не целую страницу</strong>, а лишь тот <strong>кусок HTML кода</strong>, который мы хотим отобразить сразу. То есть лишь результаты поиска.(без тэгов BODY, HTML)
</li>
<li>С помощью <abbr title="Document Object Model">DOM</abbr> создаем <code>DIV</code> в который и пишем эти результаты.</li>
<li>Любуемся "живым" поиском</li>
</ol>
<h3>Наконец</h3>
Блог Данстана это просто кладовая замечательных скриптов. Я наверно не раз еще вернусь и почерпну что-нибудь полезное оттуда.
<h3>Проблема</h3>
Почему то появились глюки с кодировкой. Как я ни гадал ЮТФ и Вин-1251 не подходят.
Причем ИЕ кодировку почему то угадывает.
А как бороться в других случаях, я так и не смог понять.
Быть может кто-то сталкивался с подобным? Откликнитесь в комменты.
<p>Можно посмотреть на поиск на сайте Данстана, но это неинтересно (там не глючит кодировка :) ) Поэтому вот здесь я привожу вариант с глючной кодировкой.<br />
<a href="http://cssing.iatp.org.ua/antry.php">Мой вариант "живого" поиска.</a>.<br />
Не все там гладко и со стороны Wordpress'a, когда результат поиска одна заметка этот гад (:)) делает переадресацию и выводит и HTML и BODY тэг. Но это не проблема. А вот кодировка...</p>
<h3 id="update">Уточнение</h3>
<p><strong>Восстанавливая справедливость.</strong><br />
Авторство данной техники принадлежит Christian Stocker.<br />
И подробнее о ней можно прочитать здесь<br />
<a href="http://blog4.bitflux.ch/wiki/LiveSearch" title="LiveSearch">http://blog4.bitflux.ch/wiki/LiveSearch</a></p>
Майдан
2004-11-25T00:00:00Z
https://cssing.org.ua/2004/11/25/maidan/
<p><del datetime="2008-11-13T17:25:35+00:00"><strong>Украина. Киев. Майдан. Я там. Со мной народ.</strong></del></p>
<p><del datetime="2008-11-13T17:25:35+00:00">Сейчас я уже не телом, но сердцем.(<strong>всем сердцем</strong>)<br />
(<strong>Update:</strong> а теперь уже и телом) :)</del></p>
<p><del datetime="2008-11-13T17:25:35+00:00">Я горд за свой народ. Горд за себя. Украина победит.</del></p>
<p><del datetime="2008-11-13T17:25:35+00:00">Все кто на Майдане: <strong>я с вами ребята.</strong></del></p>
<p><del datetime="2008-11-13T17:25:35+00:00">Кто поддерживает меня, просто оставьте слово ТАК! в комменты.</del></p>
<p><span style="background-color:#f60;height:15px;display:block;"></span></p>
<p><strong>2008.11.13:</strong> Мои взгляды немного трансформировались, и чтобы не вводить будущие поколения в заблуждение своей романтической верой, я перечеркнул этот текст. Кому интересно, я правда верил, и буду верить, но вряд ли это как-то связано с оранжевыми или синими, и политикой вообще, скорее с надеждой, что люди в этой стране когда-то поумнеют. Лет через 50, может быть.</p>
<p>Anyway, я в жизни более тесного единения людей в этой стране не видел.</p>
<p>Чмаки всем кто в чате. =)</p>
Интересный глюк IE 6
2004-11-16T00:00:00Z
https://cssing.org.ua/2004/11/16/strange-ie-6/
<p>Обнаружил на своём сайте интересный глюк. Он уже довольно давно портил жизнь некоторым моим посетителям использовавшим <abbr title="Internet Explorer">IE</abbr> 6. Но оказалось не всем!</p>
<!--more-->
<h3>Что глючило?</h3>
Для своего сайта я, как легко заметить, использую две колонки. Они содержаться в свою очередm в каком-то внешнем div. Примерно так
<pre>
<div id='outer'>
<div id='left'>
</div>
<div id='right'>
</div>
</div>
</pre>
Здесь они пустые, но это неважно.
<p>Так вот для того что бы из этого кода получились колонки, а не просто два блока идущих один за другим, я использовал такой <abbr title="Cascading Style Sheets">CSS</abbr>:</p>
<pre>
#outer{
width:700px;
}
#left{
float:left;
width:500px
}
#right{
width:190px;
margin-left:510px;
}
</pre>
<p>Размеры не совсем такие но это неважно.</p>
<h3>Как глючило?</h3>
Все броузеры что были(ИЕ 6 5.5 5.0, и другие) у меня отобразили это как две колонки. То есть так как это сейчас вы видите на этом сайте.
<p>Как оказалось ИЕ6 ИЕ6 рознь.(!)<br />
У меня был ИЕ 6.0.2600.0000.(помощь>о программе).<br />
И в нем все отображалось как и везде нормально.<br />
Оказывается уже в ИЕ 6.0.2800.1106 обнаружился глюк!<br />
правая колонка съезжала под первую. То есть левая(боковая меньшая #left) отображалась под правой(главная, большая, #right)<br />
Если везде колонки выглядели <strong>Так!</strong>(:-)</p>
<p><img src="https://cssing.org.ua/pic/ie6bok/right.gif" alt="правильное отображение" title="правильное отображение" /></p>
То версия ИЕ 6.0.2800.1106 показывала так:
<p><img src="https://cssing.org.ua/pic/ie6bok/bok.gif" alt="неправильное отображение" title="неправильное отображение" /></p>
<h3>Решение</h3>
решение оказалось очень простым, изменив стили для #right на такие:
<pre>
#right{
width:190px;
<span class="strike">margin-left:510px;</span>
<strong>float:right;</strong>
}
</pre>
Все заработало как надо и везде где это возможно.
<h3>Вывод</h3>
Нужно быть осторожным с float, особенно в разных версиях ИЕ 6.
<p>*Цвета для колонок выбраны <strong>абсолютно</strong>(!) рандомным образом. :) И любые совпадения с цветами из реальной жизни случайны. (поймут только жители Украины...)</p>
Мой Ukr.net
2004-11-07T00:00:00Z
https://cssing.org.ua/2004/11/07/my-ukrnet/
<p>Ну не могу я спокойно смотреть на плохой код. И несмотря на то что времени сейчас у меня не хватает ни на что, я решил переделать <a href="http://ukr.net/">ukr.net</a>. Это второй по посещаемости портал в Украине. Мои друзья имели там ящики, вот он мне и попался на глаза.</p>
<!--more-->
<h3>Что было?</h3>
<p>Я взял версию этого сайта от 21 октября сего года. Где то неделю после их редизайна. С того времени они добавили некоторые незначительные фичи, которые в принципе погоды бы не сделали.</p>
<p>После редизайна главная страничка занимала более 60 килобайт, что очень нервировало многих. Ведь большая часть пользователей лезла сюда что б проверить почту, и они вынуждены были каждый раз грузить эти 65Kb (это только HTML).<br />
Я уж молчу о непомерного размера флеш-баннерах.<br />
Это не моя сфера, но неужели нельзя было уложиться в 20Kb!?</p>
<p>Страничка понятное дело не удовлетворяла никаким требованиям доступности. И даже тест Cynthia она не проходила.</p>
<h3>Результат</h3>
Сначала факты:
<table class="data">
<tr class="row-header">
<th> </th>
<th>Оригинал</th>
<th class="focus">Мой вариант</th>
</tr>
<pre><code><tr class="alt">
<th>Таблиц использовано</th>
<td>106</td>
<td class="focus">0</td>
</tr>
<tr>
<th>Всего тєгов &lt;img&gt; </th>
<td>123</td>
<td class="focus">29</td>
</tr>
<tr class="alt">
<th>Фон через CSS</th>
<td>3</td>
<td class="focus">~20-30</td>
</tr>
<tr>
<th>Стандарт</th>
<td>без DocType'a</td>
<td class="focus"><a href="http://www.w3.org/TR/2001/REC-xhtml11-20010531/">XHTML 1.1</a></td>
</tr>
<tr class="alt">
<th> Размер HTML файла </th>
<td>64 KB</td>
<td class="focus">22 KB</td>
</tr>
<tr>
<th><strong>Экономия </strong></th>
<td>-</td>
<td class="focus"><strong>66%</strong></td>
</tr>
</code></pre>
</table>
<p>Ну а теперь как любят считать <a href="http://www.stopdesign.com/articles/throwing_tables/">американцы</a>, сколько же мы экономим. Я считал что в день в среднем заглавную страницу <a href="http://ukr.net/">ukr.net</a> посещают 110 000 раз.(<a href="http://top.mail.ru/Rating/Internet-Mail/Today/Hosts/1.html#5">статистика</a>)</p>
<p>Учитывая что при каждой загрузке мы экономим около 40Kb(64-22=40 :)). То нетрудно посчитать, что в день выходит экономия в 40*110000= 4 400 000. Четыре с половиной гига в день. Это где то 135 гиг в месяц. И наконец это полтора терабайта в год. хм.</p>
<p>Не мне судить об этих цифрах, но уж если на то пошло, то я каждый месяц остаюсь с 20 по 31 числа без интернета - кончается трафик (всего дан 1Gb). Получается что если им переделать только их навигацию и каким то мегаспособои перенаправить трафик мне, я буду онлайн весь месяц!!(мечта идиота).</p>
<p>Что бы быть честным, размер CSS файла вырос... на 2Kb. И то только из-за того, что тем кто делал <a href="http://ukr.net/">ukr.net</a> неизвестно ничего о типографике и наследовании. Все шрифты разные, а размеры подобрать было нелегко.</p>
<h3>Красивый код</h3>
Я скажу больше, если раньше во главу угла я ставил размер, то в этот раз это была семантика и доступность. После переделки страничка стала удовлетворять 508 статье (<a href="http://cssing.iatp.org.ua/index.php?p=42">перевод на русский</a>). Ну а код стал просто загляденье. Не зря на сайте wordpress.org написано
<blockquote>Code is poetry</blockquote>
(<em>это про XHTML :)</em>)
Поэтому присутствуют все <code>label</code>, где надо, и <code>alt</code> атрибуты для картинок и мультимедийных объектов.
<h3>Ну и?</h3>
Что "Ну и?"!
Аж полтора терабайта. По идее достаточное основание для перехода на веб-стандарты.
Да и пользователи мне кажется намного лучше воспримут легкие и доступные странички. Я уж не говорю о всех возможных наворотах со сменой стилей и размеров шрифтов. Которые мне кажется могли бы родить русский wired.(и русского Дага Баумана заодно :))
<p>Давайте помечтаем.</p>
<p>Совсем недавно редизайнился ABC.</p>
<p>И тут вдруг второй по посещаемости сайт в Украине сделан с помощью веб-стандартов.<br />
Ведь для Украины это что то вроде ABC. Это фактически по продвинутости нас кинет лет на 5 вперед.<br />
У нас и обычных сайтов на CSS по пальцам можно считать. А тут портал. Это ж какой прорыв был бы. Тут сразу все поймут что надо редизайниться (стадное чувство). И пойдут стандарты в наших регионах. Мне кажется сейчас не хватает лишь прецедента. Как раз такого.</p>
<p>Я в принципе аполитичен. Но не могу не вспомнить наши выборы. Так вот ситуация с недостатком сайтов сделанных <strong>нормально</strong> в нашей части света, мне напоминает тех людей, которые голосуют за Януковича в нашей стране. Тем кто знает, понятно, что это неправильно, остальные то ли очень упрямые, то ли живут в информационном вакууме.(это лишь мое мнение, никакой агитации)</p>
<p>Но какая все же прикольная мечта была бы отредизайнить все наши хедлайновые сайты на CSS*.</p>
<p>Интересно, это вообще реально в ближайшие 2-3 года?<br />
Судя по <a href="http://ezhe.ru/ib/issue.html?185">этой дискуссии</a> вряд ли... :(<br />
Как это типично...</p>
<h3>Собственно предмет разговора</h3>
<ul>
<li><a href="http://cssing.org.ua/examples/ukrnet/oldukrnet.html">Оригинальный сайт</a> от 21 октября</li>
<li><a href="http://cssing.org.ua/examples/ukrnet/">Мой вариант</a> (тестировал в Mozilla 1.7, Firefox 1.0, IE 5.0-6.0, Opera 7.54 и Lynx :) )**</li>
<li><a href="http://cssing.org.ua/examples/ukrnet/nostyle.html">Мой вариант без стилей </a>(для принтеров, мобил, КПК, старых броузеров, скринридеров (для слепых) и т. д. и т.п.)</li>
<li>Мой вариант <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fcssing.org.ua%2Fexamples%2Fukrnet%2F">проходит валидацию как XHTML 1.1</a></li>
<li>А <a href="http://www.contentquality.com/mynewtester/cynthia.exe?Url1=http://cssing.org.ua/examples/ukrnet/">Синтия говорит</a> доступный он. :)</li>
</ul>
<ul>
<li>
<ul>
<li>под редизайном на CSS я имел ввиду редизайн соответствующий веб-стандартам (что б не было путаницы)</li>
</ul>
</li>
</ul>
<p>** - для счастливых обладателей IE 5.0-5.5 я специально оставил маленький глюк, так что нечего мне на него показывать пальцем. <a href="http://browsers.org.ru/">Лучше смените броузер</a>.</p>
Разборки с TXP
2004-11-03T00:00:00Z
https://cssing.org.ua/2004/11/03/txp-bugz/
<p>Начал было разбираться с TXP. И застопорился на одном моменте. Этот пост вряд ли будет много значить для тех кто не пользовался textpattern'ом</p>
<!--more-->
<h3>Проблема</h3>
Никак не мог заставить работать секции. Все посты <strong>всегда</strong> отображались только с помощью так называемого "Default page template". Что я только не делал. переключал все возможные варианты работы clean URLs и messy. Ничего не помогло. Что бы я не делал индивидуальные посты всегда отображались на "Default page template".
<h3>Решение</h3>
Решение оказалось совсем не очевидным, но принесло надежду (я уж думал что я совсем туп). Вот что нужно делать если вы вдруг будете испытывыть подобную проблему с этой CMS (этот баг вроде только в последней версии от 20 сентября).
<p>Необходимо исправить в файле pubslish.php в 55 строке такой код:</p>
<pre>
$s = (empty($s)) ? 'default' : $s;
</pre>
<p>На такой</p>
<pre>
$s = (empty($s)) ? '' : $s;
</pre>
<p>То есть попросту удалить слово default. После этого у меня сразу заработали секции так как я хотел.<br />
В оригинале эту маленькую хитрость можно прочитать <a href="http://forum.textpattern.com/viewtopic.php?id=3950#28968">тут</a>.</p>
Мой любимый тэг
2004-10-28T00:00:00Z
https://cssing.org.ua/2004/10/28/mine-libe-tag/
<p>После этого сообщения меня наверно будут считать geek'ом (кто не знает что такое geek, читать <a href="http://www.google.com/search?hl=en&lr=&c2coff=1&client=firefox-a&oi=defmore&q=define:Geek">тут</a>).<br />
Но тем не менее, меня почему то заинтересовал этот вопрос. И я решил сформировать тройку лучших. :)</p>
<!--more-->
<h3>Как можно определить лучшего?</h3>
<p>Можно решить, что все теги предназначены для разных целей. И определение лучшего (читай любимого) невозможно. Но лично мне кажется, что очень часто их области применения пересекаются. И несомненно при таком пересечении сказываются наши личные предпочтения. Вот тут то и оказывается, что есть любимчики и ... другие теги.</p>
<h3>Моя тройка</h3>
<p>Недолго думая я определил свою тройку.</p>
<ol>
<li><strong><dl></strong></li>
<li><strong><ul></strong></li>
<li><strong><div></strong></li>
</ol>
<p>Оказалось, два первых места это списки. Легко обьяснимо - любые два куска похожей инфы это уже список. Тем более для них удобно писать стили.<br />
<strong><dl></strong>. Просто он мне нравится. Тем более он несет в себе много смысла, очень гибкого смысла. Например на этом сайте он используется для правой колонки. Каждый заголовок в ней это тег <dt>, а каждый список ссылок содержится в <dd>. Что по-моему полностью отвечает семантике моеё правой колонки. (<dt> - термин,<dd> - определение термина.)<br />
Примерно так выглядит этот тег без стилей:</p>
<dl>
<dt>Geek</dt>
<dd>a person who may be very smart yet lacks the social graces of those who are considered cool , a "computer geek" is someone who spends too much time on the computer and has no social life.</dd>
<dd>www.planetpals.com/coolkidz.html</dd>
<dt>Geek 2</dt>
<dd>Deragatory term for a person with limited social skills, and usually strong technical skills. While anybody can become a nerd, geeks are born, not made. The difference between a geek and a dweeb is that dweeb has no redeeming qualities. </dd>
<dd>www.msg.net/kadow/answers/g.html</dd>
</dl>
<p>Код выглядит примерно так (без инфы )</p>
<pre>
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
</pre>
<p>Почему <strong><ul></strong> занял второе, и так понятно. практически любая навигация (без таблиц) сделана на его основе. И вообще очень удобная штука.<br />
Ну а с <strong><div></strong> и так все ясно, куда ж без него?</p>
<p>А ваша тройка? ;-)</p>
Textpress или Wordpattern?
2004-10-20T00:00:00Z
https://cssing.org.ua/2004/10/20/textpress-wordpattern/
<p>Последнее время меня стал очень привлекать textpattern. Хотя может быть меня перестал устраивать wordpress. В любом случае решил поделиться впечатлениями.</p>
<!--more-->
<h3>Насколько я их знаю</h3>
<p>Сразу оговорюсь о своей компетентности в этом сравнении.<br />
Wordpress я знаю уже несколько месяцев, порядком правил его код, и долго и упорно читал форум по адресу <a href="http://wordpress.org/support/">http://wordpress.org/support/</a>.</p>
<p>Textpattern я знаю только с недавнего времени, и пока только по их форуму и по ссылкам что нашел на <a href="http://minimal.ru/">minimal</a> (кстати всем рекомендую для того чтобы луше узнать этот движок сначала покляцать ссылки на <a href="http://rise.lewander.com/textpattern/?c=Textpattern">http://rise.lewander.com/</a>).</p>
<h3>Чем меня привлек Wordpress</h3>
<p>В то время я выбирал в основном между <abbr title="Movable Type">MT</abbr> и <abbr title="Wordpress">WP</abbr>. Perl для мен был незнаком поэтому я и выбрал СИСтему на базе PHP. О чем до сих пор не жалею. Вряд ли исправления в Perl дались бы так же легко.</p>
<p>Впечатления же остались двоякие.<br />
Wordpress очень гибкий движок. При минимальных знаниях PHP вы всегда сможете сделать себе такой блог какой хотите. Без каких либо ограничений. было бы время...(:( а его ессно нет)</p>
<p>С другой стороны эта самая гибкость быстро надоедает, поскольку получаем мы её за счет своего времени. Сам код Wordpress'a удручает своей корявостью.(кстати, <a href="http://www.orderedlist.com/articles/wordpress-code">оказалось не один</a> я так думаю) Это по сути набор функций и процедур в куче файлов. А мне почему то хотелось какого-то смысла. К тому же меня начало доставать отсутствие некоторых элементарных вещей (сделать нормальный архив оказалось нетривиально, а для ленты свежих ссылок понадобилось качать модуль одного энтузиаста и т п.)<br />
Вобщем обычные атрибуты OpenSource.</p>
<h3>Что я успел узнать про Textpattern</h3>
Тут все обстоит насколькоя понял наоборот.
Хоть в код я и не заглядывал но говорят он "чистый". К тму же это все тот же PHP.
<p>Более того сразу бросилась в глаза какая-то "упорядоченность" этого движка. Первое что я прочитал можно назвать семантикой Textpattern. Уже одно это слово вызвало мою симпатию к этой <abbr title="Contetn Management System">CMS</abbr>.</p>
<p>В отличие от <abbr title="Wordpress">WP</abbr>, эта CMS позволяла контролировать через свой интерфейс не одну только страницу, а веб сайт (статические странички тоже). То есть даже цели у этих CMS оказались немного разные.</p>
<h3>Так что же</h3>
Вобщем говоря решать тут каждый должен сам. Оба движка развиваются. Скорее всего то что мне не нравится в них будет изменено.
<p>Но лично я решил перейти на <abbr title="Textpattern">TP</abbr>.<br />
И сейчас озабочен сохранением архива. Судя по<a href="http://forum.textpattern.com/viewtopic.php?id=65"> этому</a> придется самому писать скрипт на PHP для перевода базы Wordpress в Textpattern.</p>
<h3>Инфа</h3>
<ul>
<li><a href="http://wordpress.org/">Wordpress.org</a> тут можно достать wordpress</li>
<li><a href="http://www.textpattern.com/">Textpattern</a></li>
<li><a href="http://www.jdueck.net/articles/textpattern.html" title="Основные принципы Textpattern">TXP semantics</a> — Основные принципы Textpattern (украл с <a href="http://minimal.ru/">минимал</a>)</li>
<li><a href="http://rise.lewander.com/textpattern/?c=Textpattern" title="отличная подборка материалов о Textpattern">TXP@RDS</a> — отличная подборка материалов о Textpattern (украл с <a href="http://minimal.ru/">минимал</a>)</li>
</ul>
508 statement на русском
2004-10-14T00:00:00Z
https://cssing.org.ua/2004/10/14/russian-508/
<p>Столько раз мы ссылаемcя на эту главу американского закона. Но на русском я её еще не видел.<br />
Решил перевести.<br />
Предлагаю всем заинтересованным помочь в отладке перевода. Лингвист из меня накакой.</p>
<!--more-->
<p>Я перевел выдержку из всей сборки стандартов описанных в 508 разделе. Ту часть, которая относится непосредственно к вебу. Там есть еще много касательно телевидения, программного обеспечения и тому подобных путей получения информации в наше время.<br />
Мне естественно интересен именно веб.<br />
Вот ссылка на оригинал.<br />
<a href="http://www.section508.gov/index.cfm?FuseAction=Content&ID=12#Web">http://www.section508.gov/index.cfm?FuseAction=Content&ID=12#Web</a></p>
<h3>Что такое 508?</h3>
<p>Цитируя вышеуказанный сайт.<br />
Главной задачей этой части законодательства является обеспечение доступа людей с ограниченными возможностями к информации (ТВ, интернет, <abbr title="Программное Обеспечение">ПО</abbr> и т д ).</p>
<blockquote>Its primary purpose is to provide access to and use of Federal executive agencies’ electronic and information technology (EIT) by individuals with disabilities.</blockquote>
<p>Несмотря на то, что закон американский, он стал популярным ориентиром в оценке доступности информации.</p>
<p>Поправки и указания на ошибки с <strong>радостью</strong> принимаются.<br />
Собственно перевод.</p>
<h3>§ 1194.22 Информация и приложения, базирующиеся на веб-технологиях.</h3>
<p>(a) Для каждого <em>нетекстового</em> (мультимедийного) элемента должен быть предоставлен текстовый эквивалент (то есть, используя "alt", "longdesc", или прямо в элементе).</p>
<p>(b) Эквиваленты (вышеуказанные) для мультимедийных элементов, должны соответствовать содержанию этих элементов.</p>
<p>(c) Вся информация поданная в каком-либо цвете должна быть доступна независимо от этого цвета, например при чтении кода или вырванной из контекста.</p>
<p>(d) Документы должны быть построены так, что информация на них доступна без использования привязанных к ней стилей.</p>
<p>(e) Для каждой активной части image map, должны быть предоставлены текстовые эквиваленты ссылок.</p>
<p>(f) Вместо серверных image map должны использоваться клиентские image map (а как это серверный?:-)), за исключением случаев, когда секторы (области) не могут быть ограничены имеющимися геометрическими формами.</p>
<p>(g) Для таблиц должны присутствовать заголовки (названия) строк и столбцов. (thead, th, tfoot...)</p>
<p>(h) Необходимо использовать разметку, для определения соответствия между ячейкой и её заголовочной строкой или столбцом, при наличии более чем двух уровней вложения заголовков строк или столбцов.</p>
<p>(i) Страницы (окна броузера, фреймы, frames?) должны иметь текстовые заголовки, облегчающие навигацию между ними и их идентификацию.</p>
<p>(j) Оформление страниц не должно приводить к миганию экрана с частотой более 2 Hz и менее 55 Hz.</p>
<p>(k) Если вышеуказанные требования не могут быть удовлетворены никаким другим путем, то пользователю должна быть предоставлена текстовая страница с эквивалентной информацией и функциональностью. Обновление содержания этой текстовой страницы должно идти паралельно с обновлением главной.</p>
<p>(l) Если страничка использует скрипты для отображения контента или создания интерфейса, то информация, которую отображает скрипт, должна быть продублирована обычным текстом. Которій доступен людям использующим дополнительніе устройства для доступа в интернет (скринридеры например).</p>
<p>(m) Когда для доступа к информации требуется наличие апплетов, плагинов или других приложений со стороны клиента, должна быть предоставлена ссылка на этот апплет или плагин, удовлетворяющий пунктам §1194.21 от (a) до (l).</p>
<p>(n) Если предусмотрено заполнение электронных форм в онлайне, форма должна позволять доступ людей со специальными устройствами (как скринридеры например) к информации, элементам полей, и функциональности необходимой для заполнения и отправки формы, включая другие возможные действия.</p>
<p>(o) Пользователям должна быть предоставлена возможность пропускать повторяющиеся навигационные ссылки.</p>
<p>(p) Когда получение ответа связано с задержкой, пользователь должен быть заблаговременно уведомлен о том то потребуется дополнительное время.</p>
<h3>Дополнение к §1194.22:</h3>
<ol>
<li>Пункты от (a) до (k) считаются аналогами следующих наиболее важных пунктов <abbr tite="Web Content Accessibility Guidelines 1.0"> WCAG 1.0</abbr> (5 мая, 1999) опубликованных <abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title=" World Wide Web Consortium">W3C</abbr>:</li>
</ol>
<table class="waitable">
<thead><th>раздел 1194.22</th> <th> пункт WCAG 1.0</th></thead> <tr><td>(a)</td><td>1.1</td></tr>
<tr><td>(b)</td><td>1.4</td></tr> <tr><td>( с)</td><td>2.1</td></tr>
<tr><td>(d)</td><td>6.1</td></tr>
<tr><td>(e)</td><td>1.2</td></tr>
<tr><td>(f)</td><td>9.1</td></tr>
<tr><td>(g)</td><td>5.1</td></tr> <tr><td>(h)</td><td>5.2</td></tr>
<tr><td>(i)</td><td>12.1</td></tr>
<tr><td>(j)</td><td>7.1</td></tr>
<tr><td>(k)</td><td>11.4</td></tr>
</table>
<ol start="2">
<li>Разделы (l), (m), (n), (o), и (p) этого закона отличаются от WCAG 1.0. Страницы построенные согласно WCAG 1.0, уровня A (то есть удовлетворяющие всем наиболее приоритетным требованиям) так же должны согласоваться с разделами (l), (m), (n), (o), и (p) 508 раздела, чтобы ему удовлетворять. WCAG 1.0 можно посмотреть по адресу <a href="http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505">http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505</a>.</li>
</ol>
<h3>Конец</h3>
Занятно, но там где я брал оригинал, таблица (которую можно увидеть выше) не удовлетворяла требованиям 508. Верхняя строка была задана с использованием тэга <code>tr</code>, а не <code>thead</code> , как должно быть по идее.
<h3>Ресурсы</h3>
<ul>
<li><a href="http://bobby.watchfire.com/bobby/html/en/index.jsp">http://bobby.watchfire.com/bobby/html/en/index.jsp</a>, здесь можно проверить удовлетворяет ли ваша или какая другая страничка этим требованиям (508 или WCAG 1.0)
</li>
<li>А с помощью такого HTML кода можно проверить доступность на другом сервисе:
<code>http://www.contentquality.com/mynewtester/cynthia.exe?Url1=<strong>http://cssing.iatp.org.ua/</strong></code>, легко заметить, что моя страничка сейчас прокалывается в одном месте, нету label для поиска, исправим.</li>
</ul>
Универ c CSS
2004-10-11T00:00:00Z
https://cssing.org.ua/2004/10/11/univ-via-css/
<p>Вот опять не знаю что меня подвигло на переделку сайта с таблиц. Но дело уже сделано. Жертвой стал сайт моего универа. <a href="http://univ.kiev.ua/ru/">http://univ.kiev.ua/ru/</a>.</p>
<!--more-->
<h3>Почему Юнив.киев.юа?</h3>
<p>Да просто потому что я студент этого ВУЗа. К тому же, случайно натолкнулся на форум, где его обсуждали.</p>
<p>Здесь все было не так просто как с <a href="http://cssing.iatp.org.ua/index.php?p=9">Тендером</a>. Код был не такой "плохой", тэг font не использовался. Однако таблиц было все же немало. И мне стало интересно сколько можно сократить?</p>
<h3>С чего начал?</h3>
<p>Начал разумеется с LAYOUT, то есть с основного разделения странички на блоки или информационыые области. С ширинами этих самых областей была такая путаница, что я решил не смотреть в оригинал и сделать все по-своему.</p>
<p>Для этого я использовал технику описанную в статье "<a href="http://www.alistapart.com/articles/negativemargins/">Creating Liquid Layouts with Negative Margins</a>".</p>
<p>Я разделил весь сайт на две информационные области. одна слева с изменяющейся шириной. Другая справа с фиксированной. Дальше применил вышеуказанную технику. И получил копию(почти) табличной структуры оригинала.</p>
<h3>Структура</h3>
Стрнаничку верстал с шаблона XHTML 1.0 Strict., ворую <a href="http://www.webstandards.org/learn/templates/">тут</a>. (но надеюсь скоро воровать с webstandard.ru)
Для структурирования я использовал списки <code><dl>
</code>. Просто потому, что их удобно стилизовать. К тому же это один из ссамых гибких по семантике тэгов. Рекомендую.
Вот собственно и все про структуру.
<h3>Подгонять?Увольте...</h3>
<p>Где то на втором часу этого увлекательного занятия, оно мне вдруг надоело. Просто задолбало подгонять попиксельно к оригиналу.<br />
Кроме того структура была составлена. То есть код бы уже не увеличился. Дописывал только CSS файл. Который к концу эксперимента занимал все еще меньше чем CSS файл оригинала. Поэтому я спокойно прекратил это убийство времени. Результат бы уже практически не изменился.<br />
Поэтому то что сверстал я выглядит не совсем как оригинал, но по информации полностью соответствует. Только это мне и надо было.</p>
<h3>Результат</h3>
<p>Результат такой. У оригинала был размер кода (без картинок) 14.8(CSS) +5.5(CSS).<br />
То что сделал я занимает соответственно 7.5(CSS) +3.5(CSS).<br />
Урезало почти в два раза.<br />
Я считаю эксперимент удачным.</p>
<h3>Вывод</h3>
<p>CSS+XHTML рулит.</p>
<p>Кстати подробнее о проблеме перехода рунета на "стандартную" верстку читайте на "информационном буме" в выпуске Артемия Ломова "<a href="http://ezhe.ru/ib/issue.html?165">Свобода выбора или выбор свободы?</a>"</p>
<h3>Сравнить</h3>
<ul>
<li><a href="http://univ.kiev.ua/ru/">Оригинал</a></li>
<li><a href="http://cssing.iatp.org.ua/examples/univ/">Мой вариант</a></li>
</ul>
Наконец-то вернулся
2004-10-02T00:00:00Z
https://cssing.org.ua/2004/10/02/imback/
<p>Да-а такого большого перерыва еще не делал на блоге. Но ведь надо когда-то начинать? Шучу конечно...<br />
Вобщем после частичного улаживания своих дел я опять в строю, а значит буду пытаться найти что-нить интересное и изложить. Или по крайней мере редизайниться каждый месяц.</p>
<!--more-->
<p>Вообще это странно. У человека есть свой блог, то бишь место жительства в сети, но в жизни он фактически БОМЖ. До чего техника дошла, живем в сети, а физически кое-как...</p>
<p>Отдельное спасибо по этому поводу хочу сказать "Дирекції Студмістечка КНУ ім. Шевченка". И всему нашему бюрократическому аппарату. Только у нас в стране могут выселить студента 5-го курса с одной четверкой в дипломе за "<strong>остатки еды на столе</strong>".<br />
Нет ну вы подумайте <em>еда</em>, да еще и на <em>столе</em>. Бррр...</p>
<p>С другой стороны, когда меня полгода(!) назад выселили я понятия не имел что такое CSS, и только неделю как узнал что такое HTML. Не знаю хватило ли бы у меня времени, если б я жил нормальной жизнью...</p>
<p>Вобщем кое-как совладав с этими проблемами я уже было решился заняться блогом. Но тут кончился трафик моего инета. Где-то 21 сентября. К слову у меня 1 гигабайт в месяц на 8 человек. (а вот за <a href="http://witness.dp.ua/06.08.2004/2">эти слова</a> можно заслужить вечную ненависть dial-up-щиков и таких как я ) :)<br />
А именно</p>
<blockquote>0,7–2,4 Гб входящего трафика в сутки</blockquote>
<p>Так что, если я еще не растерял своих немногих читателей, они могут вернуться сюда. И даже не исключено, найти что-нибудь полезное или интересное. Буквально на днях.</p>
<p>P.S.: Это странно, но главное, что я уяснил за время своих проблем:(и это не реклама LG)<br />
<span style="display:block;text-align:center;font-family:Georgia, serif;font-size:150%;">Life is good!</span></p>
Nice titles по-русски
2004-09-22T00:00:00Z
https://cssing.org.ua/2004/09/22/nice-titles/
<p>Как то в последнее время я зачастил описывать известные техники в веб-разработке. Логичным продолжением стал и этот пост. Кому то может пригодится игры с атрибутом <code>title</code> для ссылок (и не только). Здесь можно ознакомиться с <a href="http://www.kryogenix.org/code/browser/nicetitle/">оригинальной статьей</a>.<!--more--></p>
<h3>Что дает?</h3>
<p>Давайте сразу посмотрим что же нам даст эта техника, хотя лучше это называть скриптом. Вот пример использования. Вы заметили как изменился атрибут <code>title</code>, теперь вместо всплывающей подсказки с желтоватым фоном мы видим красивое миниокошко, еще и полупрозрачное(не для <abbr title="Интернет Эксплорер">ИЕ</abbr>). Конечно надо 10 раз подумать прежде чем использовать этот скрипт. Далеко не всем сайтам он подойдет. Но тем не менее...<br />
Вот как это выглядит, если вы по каким-либо причинам не увидели в примере:</p>
<p><img src="http://cssing.org.ua/examples/nicetitle/nice1.gif" alt="Вот как это выглядит" title="Вот как это выглядит" /></p>
<h3>Что происходит?</h3>
<p>Скрипт пробегает по всем ссылкам на странице и находит те у которых указан атрибут <code>title</code>, после чего заменяет его на атрибут <code>nicetitle</code>. Это делается для того что бы избежать всплывания старых title. Ведь теперь всплывать будут новые и красивые. Кроме того, скрипт начинает "слушать" у каждой ссылки события onmouseout(указатель мыши не наведен), onmouseover (мышь наведена на ссылку), onblur (ссылка не в "фокусе"), и onfocus (ссылка в "фокусе", то есть вы нажимаете на TAB на клавиатуре, и когда доходит очередь до ссылки она оказывается в "фокусе").</p>
<p>Когда происходят события <strong>onmouseover/onfocus</strong> скрипт показывает DIV в котором содержится собственно "nicetitle", то есть title и адрес куда указывает ссылка.</p>
<p>А по событию <strong>onmouseout/onblur</strong> скрипт убирает этот DIV. Всплывающее окошко выглядит полупрозрачным так как фоном для него служит полупрозрачная <abbr title="Portable Network Grafix">PNG</abbr> картинка.</p>
<p>Всплывающее окно не использует ни docwrite ни innerHTML, а использует лишь <abbr title="Document Object Model">DOM</abbr>. Что фатически означает, что этот прием будет работать во всех браузерах поддерживающих <abbr title="Document Object Model">DOM</abbr>(на сегодняшний день это большинство).</p>
<h3>Как использовать?</h3>
<p>Использовать как всегда просто.<br />
Все что нужно скачать два файла nicetitles.js и nicetitles.css. (их вы можете найти в ЗИП фалйле в конце)</p>
<p>Затем у странички, для которой вы хотите сделать красивые всплывающие подсказки, укажите сылку на этот скрипт и эту стилевую таблицу. И еще один нюанс — нужно в стилях nicetitles.css указать путь к картинке которая будет служить фоном для всплывающих подсказок. Я использовал полупрозрачную картинку.</p>
<p>После этого все ссылки с атрибутом <code>title</code> будут выглядеть при наведении мыши примерно так:</p>
<p><img src="http://cssing.org.ua/examples/nicetitle/example.gif" title="Nicetitle в действии" alt="Nicetitle в действии" /></p>
<p>Вот собственно и все. Можно поиграться с картинкой и получить круглые края, или другие эффекты. Но это уже намного проще чем провернуть такой метод сначала.</p>
<h3>По теме</h3>
<ul>
<li>Рабочий пример, <a title="Скачать рабочий пример" href="http://cssing.org.ua/examples/nicetitle/nice.zip">качайте</a> и <a title="Посмотреть пример" href="http://cssing.org.ua/examples/nicetitle/">смотрите</a>.</li>
<li><a href="http://www.kryogenix.org/code/browser/nicetitle/">Оригинальная статья</a>.</li>
<li>nicetitles <a href="http://binarybonsai.com/">в действии</a>.</li>
</ul>
Критика
2004-09-15T00:00:00Z
https://cssing.org.ua/2004/09/15/critic/
<p>Важная штука, эта критика. Как то раньше я особо не задумывался об этом. Пока не прочитал вот <a href="http://www.uiweb.com/issues/issue35.htm">эту статью</a>. Как всегда после прочтения умной статьи я почувствовал себя дураком.<!--more--></p>
<p>Ведь если задуматься, критика это то, что помогает развиваться. Конечно, есть люди которым уже практически не нужны оценки. Они и сами знают, <em>что</em> у них получается хорошо, а <em>что</em> плохо. Но если такие и есть, то их очень мало.</p>
<p>Основная же масса людей нуждается в критике. Но это про "хорошую критику".</p>
<h3>Как критиковать</h3>
<p>Прочитав эту статью, я понял, насколько редка действительно "хорошая" критика в инете, да и в жизни. Большей частью она сводится к изложению собственных идей или, что еще хуже, к непониманию. Что бы вы поняли о чем я говорю, вот четыре главных ошибки, которые допускает <strong>плохая</strong> критика. (взяты с уже <a href="http://www.uiweb.com/issues/issue35.htm">упоминавшейся статьи</a>)</p>
<ol>
<li><strong>Любой</strong> объект можно <strong>объективно</strong> оценить, насколько он плох или хорош.</li>
<li>Сам критик владеет предметом в <strong>совершенстве</strong>.</li>
<li>Любой кто <strong>не владеет</strong> этим предметом(включая создателя объекта критики) — идиот и должен быть осмеян.</li>
<li>На критику <strong>всегда</strong> должен быть ответ. То есть, если уж я <em>нашел </em>ошибку, то пусть автор её исправляет.</li>
</ol>
<p>Не замечали за собой? Честно признаюсь — парочкой таких выводов я грешил. Естественно неосмысленно, но отношение к предмету критики было как раз такое. Теперь мне стыдно. Теперь, каждый раз когда я пытаюсь дать чему-либо оценку(или комментарий) я вспоминаю про эти 4 <strong>"плохих"</strong> априорных предположения.</p>
<p>Вроде бы простые истины. Но как часто о них забывают.<br />
Надеюсь кому-то они принесут пользу.</p>
<h3>Пример</h3>
<p>Я думаю излишне доказывать, что эти четыре ошибки, это плохо. Примеры вы можете найти и сами для себя. Но мне бросилось в глаза <a href="http://minimal.ru/blog/135/#c000039">вот это</a>. Яркий пример <strong>неправильной критики</strong>. Но это конечно моё мнение. И никого не хочу обижать. Все мы допускаем ошибки. Вобщем теперь критика на критику!</p>
<h3>Моя критика</h3>
<p>Итак приступим к критике. Но в голове будем держать те самые 4. Оригинал этой, как по мне, не совсем удачной критики лежит <a href="http://minimal.ru/blog/135/#c000039">тут</a>.</p>
<p>Первое, что я вижу пункт 2. Критик считает себя истиной в последней инстанции. То есть знает предмет в совершенстве. При всем моём уважении к нему, нужно было избрать другой тон. Можете сами почитать этот комментарий и оценить его "правильность".</p>
<p>Это опять же моё мнение, но таким комментариям место в почте. Хотя я возможно что-то не так понял.</p>
<p>Я уверен, что этот человек высококлассный специалист в той сфере, которую он критиковал. Но, увы, эта критика показала его не с самой хорошей стороны. IMHO.</p>
<h3>Где набрался?</h3>
<ul><li> <a href="http://www.uiweb.com/issues/issue35.htm">How to give and receive criticism</a>(тут еще много интересного)</li>
<li><a href="http://www.uwsp.edu/education/lkirby/Interpersonal/Criticism.htm">Effective criticism</a></li>
<li><a href="http://www.uiweb.com/issues/issue23.htm">How to run a design critique</a></li>
</ul>
Заголовки... с флешом
2004-09-14T00:00:00Z
https://cssing.org.ua/2004/09/14/sifr/
<p>Поскольку главным элементом страницы я считаю текст, то мне всегда было интересно как "продвинутые дизайнеры" решают для себя этот вопрос. Поэтому ранее я уже изучил заголовки на сайте <a href="http://www.cameronmoll.com/">www.cameronmoll.com</a>, можете почитать об этом <a href="http://cssing.iatp.org.ua/index.php?p=22">здесь</a>.</p>
<p>На очереди новая техника, теперь в борьбу с отображением шрифтов вступает... Flash.<!--more--></p>
<h3>Кто придумал?</h3>
<p>Авторами и разработчиками данной техники являются <a href="http://mikeindustries.com/">Mike Davidson</a>, <a href="http://www.jogin.com/">Tomas Jogin</a> и <a href="http://www.shauninman.com/">Shaun Inman</a>. Оригинальная статья находится по адресу : <a href="http://mikeindustries.com/blog/archive/2004/08/sifr">http://mikeindustries.com/blog/archive/2004/08/sifr</a>.<br />
</p>
<h3>Зачем?</h3>
<p>Как говорит сам Майк Девидсон: чтобы Arial'а стало меньше(не дословно, но смысл именно такой).</p>
<p>Этот прием адресован всем, кому не не хватает обычных шрифтов (Verdana, Helvetica, Georgia, etc). А так же тем, кто не доверяет аппаратному сглаживанию их на экране. И тем кто хочет иметь еще больший контроль над отображением страниц (это наверно про любого дизайнера можно сказать). Поэтому теперь я думаю понятно зачем заменять стандартные шрифты своими.</p>
<p>Уже довольно много попыток предпринималось "писать" страницы своими шрифтами (теми, которых нет у пользователей). Есть и статья с использованием PHP на ALA называвшаяся <a href="http://alistapart.com/articles/dynatext/">Dynamic Text Replacement</a>, и много было других техник подобных этой, на флэше (<a href="http://www.shauninman.com/mentary/past/ifr_an_fir_alternative.php">Inman Flash Replacement</a>).</p>
<p>Однако, эта оказалась одной из самых универсальных и простых для внедрения. Читайте сами. Назывется она sIFR</p>
<h3>Что же происходит?</h3>
Вот как можно описать действие этой методики.
<ol>
<li>Вы запрашиваете страничку и она начинает грузиться.</li>
<li>Javascript определяет установлен ли у вас Flash 6 или выше.</li>
<li>Если не обнаружено Flash 6 или выше, страничка грузится и отображается как обычно.</li>
<li>Если же Flash обнаружен, то элементу HTML присваивается класс “hasFlash”, что должно спрятать весь текст подлежащий обработке на этой страничке. То есть тот, который мы заменяем.</li>
<li>Javascript пробегает по страничке, и находит все элементы, которые нужно заменить. Как только находит — определяет высоту и ширину элемента, а потом заменяет Flash-роликом с соответствующими размерами.</li>
<li>Flash-ролик знает, какой текст он содержит. Он отображает его очень большим(96pt).</li>
<li>Flash-ролик уменьшает размер шрифта, пока он не поместится в отведенное для него место.</li>
</ol>
<h3>Размер шрифта</h3>
<p>Так как скрипт сначала получает размер заголовка(текста), а потом подгоняет под него наш флэш-ролик, то и размер конечного заголовка может варьироваться. То есть, если у вас стоит увеличенный шрифт(в броузере), то замена с помощью этой техники тоже будет увеличенной.</p>
<p>Однако, так как скрипт срабатывает при загрузке. То если вы на страничке измените размер текста, наши флэш-заголовки остануться неизменными. Хотя после обновления страницы они тоже станут увеличенными. По-моему это довольно сомнительный недостаток.</p>
<h3>Недостаток</h3>
<p>Автор упоминает лишь один недостаток.</p>
<p>Не следует использовать этот прием если флеш-ролик получается <strong>намного</strong> меньше(уже) чем оригинальный текст. В этом случае лучше задать отрицательные расстояния между буквами оригинального текста, что бы размеры будущего флэш-ролика и бывших заголовков <em>сильно</em> не отличались.</p>
<p>Хотя лично я считаю недостатком размер файлов, которые подгружаются. Я понимаю, что меньше уже некуда. Но все-таки...</p>
<h3>Как использовать?</h3>
<ol>
<li>Нужно открыть "sIFR.fla" (это можно сделать например с помощью Flash MX) и изменить параметр font (шрифт) на тот о котором вы мечтали, но боялись применять. После этого нужно экспортировать ролик в файл с именем "sIFR.swf", например.</li>
<li>Нужно задать CSS для заголовков, которые будем заменять, в таком роде:<pre>
html.hasFlash .replace {
visibility: hidden;
}
</pre></li>
<li>Определить, какие элементы мы будем заменять. Это нужно сделать внизу файла “sIFR.js”. Примерно так:
<pre>TJ_replaceElement('h1','sIFR.swf','','','#990000','#FFFFFF','');
TJ_replaceElement('h2.replace','sIFR.swf','','','#002D6F','#FFFFFF','');</pre>
Первый цвет — цвет шрифта, второй — фона. </li>
<li>Подключить скрипт “sIFR.js” к вашей страничке.</li>
</ol>
<h3>Смотреть</h3>
<p>Что бы не напрягать трафиком авторов(они почему-то всегда на него жалуются), я сделал свой пример.</p>
<ul><li><a href="http://cssing.iatp.org.ua/examples/sifr/sifr.html">Пример</a></li>
<li><a href="http://cssing.iatp.org.ua/examples/sifr/sIFR-1.1.4.zip">Скачать необходимые файлы.</a> (33Kb)</li>
<li><a href="http://mikeindustries.com/blog/archive/2004/08/sifr">Читать оригинальную статью</a></li>
</ul>
Простой прием или колонки «одинаковой высоты»
2004-09-10T00:00:00Z
https://cssing.org.ua/2004/09/10/flex-faux/
<p>После недавних статей <a href="http://www.stopdesign.com/log/2004/09/03/liquid-bleach.html">Liquid Bleach</a> и <a href="http://www.meyerweb.com/eric/thoughts/2004/09/03/sliding-faux-columns/">Sliding Faux Columns</a> захотелось это как то обобщить что ли, вобщем говоря изложить на русском. Разумеется ни в коей мере не предендуя на оригинальную идею. К тому же я не нашел перевода статьи <a href="http://www.alistapart.com/articles/fauxcolumns/">Faux Columns</a> (<a href="http://simplebits.com/" title="его сайт">Dan Cederholm</a>) (может плохо искал?). Вот об этой простой технике и о её не менее простом продолжении и пойдет речь.<!--more--><br />
Сначала понятно как всегда встала проблема.</p>
<h3>Проблема</h3>
<p>Проблема встала сразу после начала активного перехода с таблиц. И заключалась в колоночном дизайне. Допустим у нас страничка состоит из двух колонок. В одной все содержание, а в другой какая-нибудь навигация (примерно как на этой самой странице). Резонным будет желание сделать их разного цвета.</p>
<p>Как водится колонки в "стандартном дизайне" это <code>div</code>. И если задать этот цвет прямо для <em>них</em>, то он отнюдь не продолжится до самого низа. То есть картина будет примерно такая:<br />
<img style="padding:3px;border:1px solid #ccc;" src="http://cssing.org.ua/pic/columns/bad.gif" alt="неплохо, но можно лучше" title="неплохо, но можно лучше" /><br />
Это конечно не совсем плохой вариант, но логичнее было бы сделать так:<br />
<img style="padding:3px;border:1px solid #ccc;" src="http://cssing.org.ua/pic/columns/good.gif" alt="намного лучше" title="намного лучше" /></p>
<p>Но кто ж сказал <code>div</code>'ам быть одинаковой высоты. Это было просто, когда были таблицы, там ячейки всегда были одинаковой высоты (в каждой строке). А с дивами было сложнее. Вот в этом и заключается проблема.</p>
<h3>"Фиксированное" решение</h3>
<p>Первое решение изложил <a href="http://simplebits.com/" title="его сайт">Dan Cederholm</a> в своей статье на <a href="http://alistapart.com/">A List Apart</a> называвшейся <a href="http://www.alistapart.com/articles/fauxcolumns/">Faux Columns</a>. Можете подробнее почитать там, а я изложу основной прием.</p>
<p>Пускай эти две колонки содержатся в <code>div</code>'e. И у этого <code>div</code>'а фиксированная ширина (как и у двух колонок, что в нем). Тогда можно использовать вот такую картинку:<br />
<img style="padding:3px;border:1px solid #ccc;" src="http://cssing.org.ua/pic/columns/goodbg.gif" alt="почти мой фон" title="почти мой фон" /><br />
(картинка немного уменьшена, на самом деле её ширина должна совпадать с шириной внешнего <code>div</code>'а). И вместе с тем такой CSS:</p>
<pre>
#внешнийДИВ{
background: #fff url(bg.gif) <strong>repeat-y</strong> 0 0;
}
</pre>
<p>То есть повторяем этот фоновый рисунок по вертикали для обёртывающего <code>div</code>'а, а он как раз должен содержать внутри оба наших первых блока. Таким образом создаётся эффект одинаковой высоты этих блоков. Но это все разумеется лишь для колонок фиксированной ширины.</p>
<h3>"Резиновое" решение</h3>
<p>Второе решение всплыло недавно. Наверно правильно будет отнести авторство к двум людям: <a href="http://www.stopdesign.com/">Douglas Bowman</a> и <a href="http://www.meyerweb.com/">Eric Meyer</a>. Вот они и изобрели простое решение все той же проблемы, но уже для резиновых страничек. Вот здесь их оригинальные статьи на <a href="http://www.stopdesign.com/log/2004/09/03/liquid-bleach.html">stopdesign.com</a> и <a href="http://www.meyerweb.com/eric/thoughts/2004/09/03/sliding-faux-columns/">meyerweb.com</a></p>
<p>Основная идея использованная в этом приёме очень похожа на идею использованную все тем же Бауманом в своей статье <a href="http://www.id-as.com/arts/ala/slidingdoors/">Sliding Doors of CSS</a> (на русском+ <a href="http://www.id-as.com/arts/ala/slidingdoors2/">вторая часть</a>). Прием заключается в создании очень большого изображения (или двух, если дизайн из трех колонок). Картинка должна быть отчасти полностью прозрачной, а в другой части должен содержаться рисунок. Эту картинку нужно, так же как и в первом приеме, повторять вертикально (<code>repeat-y</code>).</p>
<p>Однако сама картинка теперь уже зависит от пропорций вашей странички. Например Мейер использовал в примерах трехколоночный дизайн. Для этого понадобились такие изображения 1000-2000.gif 2000-3000.gif. Эти картинки говорят своими названиями о <em>том</em>, где они <strong>непрозрачны</strong>. И использовал он разумеется дизайн, где все три колонки имеют ширину 33% от внешнего блока. Тогда нужен такой CSS:</p>
<pre>
.one {background: url(1000-3000.gif) <strong>33%</strong> 0 repeat-y;}
.two {background: url(2000-3000.gif) <strong>67%</strong> 0 repeat-y;}
</pre>
<p><a href="http://www.meyerweb.com/eric/css/edge/sliding-faux/demo.html">Примеры Мейера</a> слегка усложнены. Я например не сразу понял в чем ключ (секунд десять потерял :))(хотя то вобщем-то не примеры, а тестовый набор) Вот <a href="http://cssing.org.ua/examples/liquidfaux.html">мой пример</a>, он годится лишь для двухколоночного дизайна(66%/33%). Но я думаю его простота поможет кому-то лучше разобраться. Попробуйте посжимать страничку с примером. Вы должны увидеть как меняется ширина правой колонки, но пропорции их остаются прежними.</p>
<p>Вот это собственно и все об этой технике. Как говорит гуру (Мейер) этот трюк поддерживается хорошо. Есть какие-то мелкие глюки на Mac, но нам ли о них горевать.</p>
<h3>Ссылки по теме</h3>
<ul>
<li><a href="http://www.meyerweb.com/eric/css/edge/sliding-faux/demo.html">Пример Мейера</a></li>
<li><a href="http://cssing.org.ua/examples/liquidfaux.html">Мой пример</a></li>
<li><a href="http://www.stopdesign.com/log/2004/09/03/liquid-bleach.html">Liquid Bleach</a></li>
<li><a href="http://www.meyerweb.com/eric/thoughts/2004/09/03/sliding-faux-columns/">Sliding Faux Columns</a></li>
<li><a href="http://www.alistapart.com/articles/fauxcolumns/">Faux Columns</a></li>
</ul>
Децл на обложке!
2004-09-06T00:00:00Z
https://cssing.org.ua/2004/09/06/zeldman-book/
<p class="img"><img style="float:left;margin:10px;" src="http://cssing.org.ua/pic/dws100.jpg" alt="Designing With Web standarts" title="Designing With Web standarts" width="370" height="475" /><span>Designing With Web Standards</span></p>
<p>Именно так один из моих друзей отреагировал на книгу Зельдмана «Designing With Web Standards».</p>
<p>Наконец-то она ко мне попала. Сколько всего я про неё слышал читал. Несметное количество всяческих ревью и тому подобных. Да что там греха таить, читал на Амазоне пробные главы. Это наверно одна из самых известных книг в кругах "стандартных" вебдизайнеров. Вот мои первые впечатления о ней.</p>
<!--more-->
<p>Первое что я увидел был оранжевый цвет. "Хм" &#8212 подумал я, "яркая книга". И не ошибся. Вот на картинке отлично видно как она выглядит. Книгу просто приятно держать в руках. Может быть я немного идеализирую, но все отступы, подбор шрифтов и оформление глав очень располагают к чтению. Примерно такое же ощущение было когда я начинал читать <a href="http://useit.com/">Якоба Нильсена</a>.</p>
<p>Немного портит впечатление мягкая обложка. Это они зря, как по мне.</p>
<p>Но в отличие от книги Якоба, эта была сдобрена изрядной долей юмора. Не то что бы его там много, но он в тему. Хотя может это недочет переводчиков книги Якоба(её я читал на русском).<br />
Тем не менее, всем кто когда-либо читал нечто написаное Зельдманом я думаю понятно о чем я говорю(а кто не читал, идите к <a href="http://zeldman.com/">Зельдману</a>).</p>
<p>И хотя первые 200 страниц, которые я прочитал, посвящены в основном убеждению людей в том, что <em>вебстандарты</em> это хорошо (убедился в этом второй раз в жизни). Но читать все равно интересно. Хотя бы знать предысторию всего этого, войн броузеров, рождение вебстандартов. Лично для меня это все было дико интересно.</p>
<p>Кроме того во второй половине он начинает знакомить нас с некоторыми CSS-техниками, упрощающими жизнь всем. Вобщем даже если бы я ненавидел CSS, и обожал вложенные таблицы, мешанину кода, принципиальную невозможность нормального редизайна, недоступность страниц для ограниченных пользователей, просто на дух не выносил название W3C и никогда не слышал про Зельдмана... ой увлекся я что-то.<br />
Вобщем несмотря на все это я стал бы обожать вебстандарты и "молиться" на Зельдмана. Все таки даже один человек(З) может изменить мир(WWW).</p>
<p>Это то, что называют MUST-read для всех хоть как-то связанных с вебом.</p>
Навигация по-русски
2004-09-01T00:00:00Z
https://cssing.org.ua/2004/09/01/navigation-on-css/
<p>Какое-то время назад мне очень понравились две статьи. Одну написал <a href="http://simplebits.com/">Dan Cederholm</a>, называлась она <a href="http://www.simplebits.com/notebook/2003/09/30/accessible_imagetab_rollovers.html">"Accessible Image-Tab Rollovers"</a>, а вторую <a href="http://nundroo.com/about/">Didier Hilhorst</a> и называлась она <a href="http://superfluousbanter.org/archives/000186.php">"Navigation Matrix"</a> (и продолжение <a href="http://superfluousbanter.org/archives/000187.php">"Navigation Matrix Reloaded"</a>). Обе статьи посвящены построению навигации на базе картинок.</p>
<!--more-->
<p>Второй метод мне не понравился некоторой запутанностью в подсчетах и рисовании этой самой навигации. Хотя конечный визуальный эффект был гораздо лучше, чем в первом. А метод Cederholm'a был практически без недостатков. Вот мне и взбрело в голову их объединить.</p>
<p>А именно я хотел сделать такую же навигацию как сейчас на <a href="http://nundroo.com/">nundroo.com</a>, но по своему. Вот что <a href="http://cssing.org.ua/examples/c3/">получилось</a>.</p>
<h3>XHTML</h3>
<p>Естественно я взял для навигации обычный список. Вот такой:</p>
<pre>
<ul>
<li><a href='#' id='n-first'>first</a></li>
<li><a href='#' id='n-second'>second</a></li>
<li><a href='#' id='n-third'>third</a></li>
<li><a href='#' id='n-forth'>forth</a></li>
</ul>
</pre>
<p>Думаю излишне объяснять почему он лучше всего для этого подходит.</p>
<h3>Графика</h3>
<p style="float:left;"><img style="border:1px solid #ccc;margin:0.5em;padding:3px;" src="http://cssing.org.ua/examples/c3/n-home2.gif" alt="navigation" title="Картинка элемента меню" /> </p>
<p>Картинки, которые я использовал вы можете видеть слева. Для смены изображений я использовал маленький трюк с изменением позиции фона. Это делается что бы избежать мигания при наведении (flicker) и дозагрузки картинок. Для такого мелкого разборчивого текста мне пригодились шрифты с сайта <a href="http://www.dsg4.com/04/extra/bitmap/index.html">dsg4.com</a>. Как хорошо, что в этом мире есть что то бесплатное.</p>
<p>А это CSS который я использовал для задания фона навигации.</p>
<pre>
#nav a{
width:73px;
background: url(../n-home.gif) 0 -21px no-repeat;
}
#nav #second{
background: url(../n-art.gif) 0 -21px no-repeat;
}
#nav #third{
background: url(../n-arch.gif) 0 -21px no-repeat;
}
#nav #forth{
background: url(../n-exit.gif) 0 -21px no-repeat;
}
#nav #sfirst:hover, #nav #second:hover,
#nav #third:hover, #nav #forth:hover{
background-position: 0 0;
}
#nav a#first {
background-position: 0 0;
}
</pre>
<p>Тут конечно можно упростить, но не в этом сейчас суть.<br />
Последнее праввило говорит о том, что ссылка #first активная. Разумеется для всей навигации нужно будет написать несколько таких правил.</p>
<h3>CSS</h3>
<p>За основу я взял пример приведенный в статье Cederholm'a. То есть все позиционирование и весь CSS я взял оттуда. Если сейчас посмотреть на то что вышло то мы бы увидели что-то вроде этого:<br />
<img src="http://cssing.org.ua/examples/cutenav/middlenav.gif" alt="navigation" title="Картинка промежуточного результата" /></p>
<h3>Этого мало</h3>
<p>Но мне этого понятно оказалось мало. Хотелось что бы активный элемент навигации находился на переднем плане перекрывая соседних. Да и те в свою очередь перекрывали соседей. Решение пришло само: использовать <code>z-index</code>. И тут моё решение неожиданно усложнилось. Оказывается , <code>z-index</code> <a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/visuren.html#z-index">можно использовать</a> лишь для абсолютно позиционированных блоков. Пришлось добавить такие строки:</p>
<pre>#first{
left:0;
}
#second{
left:63px;
}
#third{
left:126px;
}
#forth{
left:189px;
}
</pre>
<p>Такие рандомные числа я взял не с головы. Просто ширина всех картинок была 73px. Плюс каждую сместил на 10px что бы они пересекались (то чего я так хотел).</p>
<p>Теперь дорога была свободна и я применил <code>z-index</code>:</p>
<pre>
#first{
z-index:13;
}
#second,#third,#forth{
z-index:7;
}
</pre>
<p>Естественно что эту часть я использовал лишь для случая когда активная ссылка #first. Для полноценной навигации нужно будет задать для каждого <code>body</code> свой селектор. Тогда через CSS можно будет доделать навигацию.</p>
<p>А пока можете посмотреть на то что у нас получилось. Вот скриншот:<br />
<img src="http://cssing.org.ua/examples/cutenav/endnav.gif" alt="navigation" title="Картинка конечного результата" /></p>
<h3>Заключение</h3>
<p>После того как закончил я посмотрел как сделана навигация на <a href="http://nundroo.com/">nundroo.com</a>. Оказалось там он использовал для свей навигации одну картинку. И соответственно не мог использовать HOVER эффекты. Моя же состоит из нескольких и поэтому в чем то проще для поддержки. Хотя это и спорный вопрос. В остальном навигация обладает всеми преимуществами CSS. Доступность, мало весит и т д. И неплохо поддерживается в броузерах. Я успел проверить лишь IE 6 и FireFox. И там никаких проблем не было.</p>
<p>Если вы что-то заметите отзывайтесь в комментарии</p>
<p>Видимо скоро такая навигация появится на этом сайте. Поскольку пиксельные шрифты меня заразили своей ... пиксельностью.</p>
<h3>Результат</h3>
<ul>
<li><a href="http://cssing.org.ua/examples/c3/">Действуещее меню</a> , которое я сделал (переключаться можно только между первыми двумя элементами, недостаток времени сказался)
UPDATE: уже работает все.</li>
<li><a href="http://www.simplebits.com/notebook/2003/09/30/accessible_imagetab_rollovers.html">"Accessible Image-Tab Rollovers"</a>.</li>
<li><a href="http://superfluousbanter.org/archives/000186.php">"Navigation Matrix"</a> </li>
<li><a href="http://superfluousbanter.org/archives/000187.php">"Navigation Matrix Reloaded"</a></li>
</ul>
Тарханкут
2004-08-28T00:00:00Z
https://cssing.org.ua/2004/08/28/tarhankut/
<p>Решил отдохнуть от содержательных сообщений на блоге. Если вы искали тут что-то полезное, этот пост не для вас. Мыс Тарханкут — это западная точка Крыма. Обычно я там провожу каждое лето. Но не в этот раз.<br />
И на то были <a href="http://etraining.dp.ua/">объективные</a> причины. Так что этим летом мне осталось только наслаждаться фотографиями счастливчиков туда попавших.<br />
Теперь вы узнаете, что такое Тарханкут. Хотя бы приблизительно.<br />
Если описывать его в трех словах. То получилось бы так.</p>
<p>Море. Скалы. Степь.</p>
<!--more-->
<p>А вот так это выглядит.</p>
<dl id="c-tarhan">
<dt>Вот это можно сказать типичный Тарханкутский пейзаж:</dt>
<dd><div class="alpha-shadow"><div><img alt="Тарханкут" title="Тарханкут" src="http://cssing.org.ua/pic/tarhan/smallside.jpg" /></div></div>
</dd><dt><a class="clr" href="http://cssing.org.ua/pic/tarhan/fullside.jpg" title="Полный размер">Полный размер (72Kb)</a></dt>
<dt>А это с другого конца:</dt>
<dd><div class="alpha-shadow"><div><img alt="Тарханкут" title="Тарханкут" src="http://cssing.org.ua/pic/tarhan/smallotherside.jpg" /></div></div>
</dd><dt><a href="http://cssing.org.ua/pic/tarhan/fullotherside.jpg" title="Полный размер">Полный размер (106Kb)</a></dt>
<dt>А вот этот снимок можно смело назвать символом этого мыса. Где я только не видел эту скалу. Даже в Киеве у одного фотографа заметил.</dt>
<dd><div class="alpha-shadow"><div><img alt="Тарханкут" title="Тарханкут" src="http://cssing.org.ua/pic/tarhan/smallrock.jpg" /></div></div>
</dd><dt><a href="http://cssing.org.ua/pic/tarhan/fullrock.jpg" title="Полный размер">Полный размер (128Kb)</a></dt>
<dt>Вот такие там скалы. Может показаться невзрачным, но только если там ни разу ни побывать..</dt>
<dd><div class="alpha-shadow"><div><img alt="Тарханкут" title="Тарханкут" src="http://cssing.org.ua/pic/tarhan/smallbay.jpg" /></div></div>
</dd><dt><a href="http://cssing.org.ua/pic/tarhan/fullbay.jpg" title="Полный размер">Полный размер (116Kb)</a></dt>
<dt>Вот такая рыба. "Собачка" её называют. А на заднем плане, мой любимый предмет охоты — рапан (моллюск такой).</dt>
<dd><div class="alpha-shadow"><div><img alt="Тарханкут" title="Тарханкут" src="http://cssing.org.ua/pic/tarhan/smalldog.jpg" /></div></div>
</dd><dt><a href="http://cssing.org.ua/pic/tarhan/fulldog.jpg" title="Полный размер">Полный размер (99Kb)</a></dt>
<dt>Ну а так там кончаются дни. По моему не самый плохой конец:</dt>
<dd><div class="alpha-shadow"><div><img alt="Тарханкут" title="Тарханкут" src="http://cssing.org.ua/pic/tarhan/smallzakat.jpg" /></div></div>
</dd><dt><a href="http://cssing.org.ua/pic/tarhan/fullzakat.jpg" title="Полный размер">Полный размер (145Kb — за красоту надо платить, размером)</a></dt>
</dl><div class="clr"></div>
<p>Вот такое это место. Трудно передать его красоту в нескольких фотографиях. Лучше один раз там побывать. А потом вернуться. Потому как мало будет раза. :) Поверьте.</p>
<p>Если кто хочет там побывать пишите на мыло внизу страницы.<br />
А кому нужны еще более качественные и красивые снимки(2288xXXX). По знакомству с авторами могу достать. Пишите туда же. Или отзывайтесь в комментарии...</p>
text-overflow
2004-08-25T00:00:00Z
https://cssing.org.ua/2004/08/25/text-overflow/
<p>Интереснейшее свойство нашел. Все наверняка имели дело с обычным <code>overflow</code>, ну или хотя бы слышали. Overflow определяет, что должно происходить с содержимым блока если оно переполняет его. То есть выходит за пределы этого блока. Точно так же <code>text-overflow</code> указывает, что произойдет с текстом, когда он переполнит место ему отведенное.</p>
<!--more-->
<p>Вот например такая ситуация:</p>
<pre>
.overflowing{
border:2px solid #000;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
width:256px;/*:)*/
margin:10px;
padding:10px;
}
</pre>
<p>(ellipsis в переводе с англ. — многоточие)</p>
<div style="text-overflow:ellipsis;border:2px solid #000;overflow:hidden;white-space:nowrap;width:256px;margin:10px;padding:10px;">
Donec non libero. Curabitur metus nulla, fringilla in, mollis eget, condimentum quis, metus. Integer sed arcu quis sem dapibus lacinia. Integer quis felis. Maecenas ac lorem sit amet est congue ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris quis sapien. Integer ipsum. Duis in eros. Aliquam tincidunt cursus wisi. Cras commodo, velit mattis sagittis tincidunt, massa mi consectetuer purus, id malesuada massa mauris sed nulla.
</div>
<p>Как видите достигнув конца блока текст был обрезан. Казалось бы это и есть свойство <code>overflow</code>, и зачем было выдумывать <code>text-overflow</code>.<br />
Но.<br />
Это по меньшей мере странно. Но это свойство поддерживает лишь <acronym title="Internet Explorer">IE 6</acronym>. Когда дело касалось фильтров, порожденных больной фантазией программистов, и поддерживаемых лишь <acronym title="Internet Explorer">IE</acronym> это было нормально. Но этот случай достоин книги рекордов Гинесса, эксплорер <em>поддерживает</em> полезное <acronym title="Cascading Style Sheets">CSS</acronym> свойство, которого <em>не поддерживают</em> Gecko и все остальные.</p>
<p>Но хватит удивлений давайте разберемся, что же оно делает. Если вы посмотрите на эту страничку в <acronym title="Internet Explorer">IE 6</acronym>. Вы увидите, что там, где во всех броузерах строка была просто обрезана, теперь появилось многоточие — "...". Если у вас нет эксплорера значит вам не повезло. Шутка. Вот скрин для тех кто ненавидит его настолько, что не хочет даже запускать:<br />
<img src="http://cssing.org.ua/pic/text-overflow.gif" alt="text-overflow в IE 6" title="text-overflow в IE 6" /><br />
Свойство <code>text-overflow</code> может принимать только два значения.</p>
<dl>
<dt><code>clip</code></dt>
<dd>При этом строку постигает обычное обрезание. Как обычный <code>overflow</code>.</dd>
<dt><code>ellipsis</code></dt>
<dd>А с этим значением мы получаем многоточие при переполнении.</dd>
</dl>
<p>Очень полезным может оказаться это свойство для таблиц.</p>
<pre>
.ovfltable {
table-layout:fixed;
border-top: 5px solid #333;
border-collapse: collapse;
background: #fff;
}
.ovfltable td {
border-bottom: 1px dashed #333;
padding: 2px 5px;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
</pre>
<p>Вот как это выглядит (best viewed with Internet Explorer 6 :) ):</p>
<table width="350" border="0" cellspacing="0" cellpadding="0" class="ovfltable">
<caption>Пионеры в русском цсс.</caption><colgroup><col width="130" class="col" /><col width="100" /><col /></colgroup>
<tbody>
<tr>
<th>Имя</th>
<th>Сайт</th>
<th>Откуда</th>
</tr><tr><td>Андрей Смирнов</td>
<td><a href="http://www.ru.id-as.com/" title="id-as.com">www.ru.id-as.com</a></td>
<td>Россия (Саров?)</td>
<pre><code><tr>
<td>Никита Вакорин</td>
<td><a href="http://www.umade.ru/" title="www.umade.ru">www.umade.ru</a></td>
<td>Россия</td>
</tr>
<tr>
<td>Denny</td>
<td><a href="http://www.minimal.ru/" title="www.minimal.ru">www.minimal.ru</a></td>
<td>Россия</td>
</tr>
</tbody>
</code></pre>
</tr></tbody></table>
<p>Теперь необязательно подгонять ширину ячеек (правда лишь в <acronym title="Internet Explorer">IE 6</acronym>). И по-моему с эстетической точки зрения очень даже смотрится. Когда я вижу многоточие на полуслове сразу понятно что строка обрезана.</p>
<p>Кстати если попытаться выделить многоточие, то на его месте появляется продолжение строки. Не всей, а той что заменена многоточием.</p>
<p>Вот такое свойство. И очень обидно, что его поддерживает лишь <acronym title="Internet Explorer">IE 6</acronym>. Но надеюсь скоро мозилловцы учтут его.</p>
<p>Кстати если верить этой <a href="http://www.w3schools.com/browsers/browsers_stats.asp">статистике</a>, то IE6 это 70%.</p>
<h3>Еще о том же:</h3>
<ul>
<li><a href="http://www.blooberry.com/indexdot/css/properties/position/textoverflow.htm">Описание</a> <code>text-overflow</code>.</li>
<li><a href="http://www.blakems.com/archives/000077.html">Blakems.com</a>, пост о <code>text-overflow</code>.</li>
<li>На <a href="http://www.google.com/url?sa=U&start=1&q=http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/textoverflow.asp&e=7507">Microsoft</a></li>
</ul>
Где русский дизайн CSSZenGarden?
2004-08-21T00:00:00Z
https://cssing.org.ua/2004/08/21/csszengarden/
<blockquote>если вы дизайнер, который уже какое-то время использует css, то где же ваш “zen garden”-дизайн? ждемс…
<span>сказал <a href="http://www.mezzoblue.com/">Дейв Ши</a>,
перевод <a href="http://ru.id-as.com/">id-as</a></span></blockquote>
Те кто не знает, что такое CSSZenGarden, сходите <a href="http://www.mezzoblue.com/zengarden/alldesigns/">сюда</a>. Вы увидите список ссылок с именами авторов. Это и есть CSSZenGarden.
<!--more-->
Это проект организованный <a href="http://www.mezzoblue.com/">Дейвом Ши</a>. Он об этом мечтал. Теперь это превратилось в демонстрацию возможностей дизайнеров и CSS. Оттуда можно черпать вдохновение если вы дизайнер, или примеры <acronym title="Cascading Style Sheets">CSS</acronym> если вы кодер. Суть проекта в том, что у нас есть один HTML файл и ничего менять в нем мы не можем. Задача дизайнера написать <acronym title="Cascading Style Sheets">CSS</acronym> файл. После предварительного просмотра получившейся страницы ссылку на неё с авторскими стилями помещают на странице со списком уже существующих дизайнов. Помещают не каждый дизайн. О подробностях принятия дизайнов читайте <a href="http://www.mezzoblue.com/zengarden/submit/">тут</a>.
<p>А недавно <a href="http://www.webmascon.com/daily/?postid=111">я узнал</a>, что появился даже <a href="http://csszengarden.coret.org/">удобный интерфейс</a> для просмотра дизайнов. Лучше используйте его.</p>
<p>Так вот, сейчас в списке официальных дизайнов насчитывается 115 разных дизайнов. И.. <strong>ни одного</strong> русского (в самом широком смысле этого слова — укр, белар и т. д.). Есть американские, канадские, испанские, итальянские и даже польские. Но нет наших. Хочется спросить: <strong>почему?</strong>.</p>
<p>Уже довольно давно сам основной HTML файл был переведен на русский. А на <a href="http://webmascon.com/">Webmascon.com</a> недавно грозились исправить немного корявый перевод файла.</p>
<p>И все-таки почему?!</p>
<dl>
<dt><strong><em>Не знают о существовании?</em></strong></dt>
<dd>Но если кто-то переводит файл значит как минимум они знают. Я уж не говорю, что наверно на каждого, кто перешел с табличной верстки на <acronym title="Cascading Style Sheets">CSS</acronym> отчасти повлиял именно этот сайт.</dd>
<dt><strong><em>Нет достойных дизайнеров?</em></strong></dt>
<dd>Вот уж, что точно есть. Взять хотя б последний дизайн на <a href="http://minimal.ru/">minimal.ru</a>, или <a href="http://ru.id-as.com/">id-as</a>. Я думаю их вклад в CSSZenGarden был бы по меньшей мере достойным. </dd>
<dt><strong><em>У людей нет времени на такие глупости?</em></strong></dt>
<dd>Это может быть. Но неужели за "наших" не обидно? Да и трудно назвать это глупостями.</dd>
<dt><strong><em>Бояться или лень.</em></strong></dt>
<dd>Чего? Стать известным? Стать первым русским на CSSZenGarden? Об этом скорее можно мечтать. И не такой большой труд, всего один CSS файл и немного графики.</dd>
<dt><strong><em></em></strong></dt>
<dd>Кроме того хорошая возможность для дизайнеров, чтобы их заметили.</dd>
<dt><strong><em></em></strong></dt>
<dd></dd>
</dl>
<p>Я признаю, что у нас маловато дизайнеров использующих <acronym title="Cascading Style Sheets">CSS</acronym>, но не настолько же!<br />
Я не дизайнер, но я готов что то наваять и пытаться всучить свой дизайн снова и снова.<br />
Разве вы хотите чтобы первый наш вклад был таким позорным? :)</p>
<p>Я призываю тех дизайнеров которые может быть прочтут это, задуматься об этом. Я готов сотрудничать с кем угодно, кто думал так же как и я о CSSZenGarden . Может быть вместе с кем-то это будет проще. Хоть я и не дизайнер но если кто-то нарисует, то более менее кроссплатформенный CSS я напишу. Мой e-mail внизу страницы.</p>
<p>Это все.<br />
Пойду на CSSZenGarden. Вдруг русский дизайн появился...</p>
<p><strong>Update</strong>:Вот набрел на <a href="http://ru.id-as.com/04/0304a.html#mar1904">id-as.com</a>, про css zen garden.</p>
Управляя роботами
2004-08-19T00:00:00Z
https://cssing.org.ua/2004/08/19/meta-robots/
<p>Роботы (их еще называют спайдерами) — минипрограмки, которые путешествуют по инету и индексируют наши странички, то есть дают знать поисковикам, что на них есть. И потом мы можем приносить пользу людям, которые что-то ищут. Даже на моём "молодом" блоге большая часть так называемых referrer'ов (мест где есть на меня ссылка) это поиски через Google. А на больших блогах их еще больше.</p>
<p>О поисковых роботах знают многие, и все рады когда они приходят. Но почему-то мало кто помогает им. Да и вообще на половине сайтов их игнорируют и не знают что можно управлять ими. <!--more--><br />
Специально для управления роботами предусмотрено два способа:</p>
<ul>
<li>Можно хранить небольшой текстовый файл "robots.txt" на вашем сервере со списком правил для роботов.</li>
<li>Использовать <code>META</code> тэг.</li>
</ul>
<h3>robots.txt</h3>
<p>Что бы поисковики нашли его (этот файл) он должен быть доступен по адресу <strong>"/robots.txt"</strong> .<br />
Это обычный текстовый файл, содержащий одну или больше записей каждая на своей строке. Для комментариев используют символ "#".<br />
Вот здесь, <a href="http://www.robotstxt.org/wc/norobots.html" title="Про ROBOTS.TXT">детально описано</a> как он формируется. А я приведу лишь несколько примеров :<br />
Пример запрещающий роботам посещение страниц начинающихся с "/cyberworld/map/" или "/tmp/", или /foo.html:</p>
<pre>
# robots.txt for http://www.example.com/
User-agent: *
Disallow: /cyberworld/map/ # в этой папке слишком много URL
Disallow: /tmp/ # а эту папку скоро удалят
Disallow: /foo.html
</pre>
<p>А этот файл запрещает всем роботам кроме "cybermapper" посещение URL начинающихся с "/cyberworld/map/" :</p>
<pre>
# robots.txt for http://www.example.com/
User-agent: *
Disallow: /cyberworld/map/ # слишком много URL в этой папке
# Cybermapper knows where to go.
User-agent: cybermapper
Disallow:
</pre>
<p>Можно и вообще запретить роботам посещать свой сайт, вот так :</p>
<pre>
# go away
User-agent: *
Disallow: /
</pre>
<h3><meta name="robots" ...</h3>
<h4>Куда ставить?</h4>
<p>Как и все метаданные его надо поместить в HEAD HTML документа :</p>
<pre>
<html>
<head>
<meta name="robots" content="noindex,nofollow" />
<meta name="description" content="This page ...." />
<title>...
</head>
<body>
...
</pre>
<h4>Какие значения</h4>
<p>Этот тэг должен содержать значения разделенные запятой. Вот так :</p>
<pre><meta name="robots" content="index,follow" />
<meta name="robots" content="noindex,follow" />
</pre>
<p>Причем нельзя задавать заведомо конфликтные значения, типа :</p>
<pre><meta name="robots" content="INDEX,NOINDEX" />
</pre>
<p>INDEX (NOINDEX) — отвечает за то, будет ли индексироваться эта страничка.<br />
FOLLOW (NOFOLLOW) — будет ли поисковик идти по ссылкам с нашего сайта дальше.</p>
<p>Например если у нас страничка часто обновляется, то может сложится ситуация неудобная для пользователя. Например поисковик пришел на страничку, проиндексировал её. Однако через час вы изменили информацию. Когда пользователь перейдет по ссылке с поисковика он уже не найдет нужной ему информации, и просто потеряет время.</p>
<p>Выходом из подобной ситуации может послужить такая директива :</p>
<pre><meta name="robots" content="noindex, follow" />
</pre>
<p>Теперь роботы не будут индексировать эту страницу, но будут переходить по ссылкам с неё, то есть индексироваться будет только постоянный контент. Здесь читать <a href="http://www.robotstxt.org/wc/meta-user.html" title="использование META"> про META</a>.</p>
<h3>Еще по теме :</h3>
<ul>
<li>Про <a href="http://urbanmainframe.com/folders/blog/20040811/">проблему</a> одного блоггера.</li>
<li>Как <a href="http://www.umade.ru/log/2004/06/31.html">узнать</a> что вас посетил <a href="http://google.com/">Google</a>?</li>
</ul>
Карта блоггеров
2004-08-16T00:00:00Z
https://cssing.org.ua/2004/08/16/blog-map/
<p>На карте <a href="http://www.multimap.com/">Multimap</a> можно было смотреть информацию об отелях, ресторанах и тому подобном просто по географическому положению. Все очень просто, увеличиваем, и нам показывают расстояния до аэропортов, погоду и прочее для указанного района. Однако теперь там появилась <a href="http://www.multimap.com/map/browse.cgi?lat=50.8452&lon=-0.1305&scale=100000&local=blog&localinfosel=true">категория блогов</a>.</p>
<p>Если вы блоггер, разве никогда вы не мечтали путешествуя в сети сразу узнавать <strong>откуда</strong> люди которые пишут блоги? Это как раз тот случай. Причем нанесение на карту мира на этом сайте бесплатное. <!--more--></p>
<p>Все что нужно разместить у себя на сайте (в любом разделе или внутри поста) ссылку определенного типа и хотя бы один раз по ней перейти на тот сайт (Multimap).<br />
На <a href="http://www.clagnut.com/blog/371/">Clagnut</a>, очень подробно описан весь процесс включения своего блога (сайта) на карту. Однако я повторю процедуру здесь. Уж очень мне понравилась эта идея, хочется привлечь людей.</p>
<p>Вот что нужно сделать для участия :</p>
<ol>
<li>Добавляем на сайт ссылку такого типа :
<strong><em>http://www.multimap.com/map/
browse.cgi?lat=50.8183&lon=-0.1106&cat=blog
&title=Clagnut</em></strong>
<strong>Update:</strong>Растянул на три строки — при увеличении шрифта колонка "ломалась".
Где вместо <strong>lat</strong> (<em>50.8183</em>) и <strong>lon</strong> (<em>-0.1106</em>) указываем <em>ваши</em> широту и долготу соответсвенно. Если у вас с этим проблемы, все на той же <a href="http://www.multimap.com/">Multimap</a> всегда ниже карты указываются координаты. Так что достаточно найти себя на карте мира...
А вместо <strong>title</strong> (тут <em>Clagnut</em>) — название своего блога или сайта.</li>
<li>Хотя бы раз перейти по этой ссылке.</li>
<li>В течении 24 часов вы будете занесены в базу данных. (а карта у них очень точная, понаходил некоторые деревни в Крыму... :))</li>
</ol>
<p>Предлагают на выбор такие миникнопочки: <img src="https://cssing.org.ua/2004/08/16/blog-map/pic/mm.gif" alt="Show this blog on a map" /> <img src="https://cssing.org.ua/2004/08/16/blog-map/pic/multimap.gif" alt="Show this blog on a map" /> <img src="https://cssing.org.ua/2004/08/16/blog-map/pic/onthemap.gif" alt="Show this blog on a map" />.<br />
Из-за множества желающих у них сейчас временые небольшие трудности (меня пока не занесли). Поэтому надо набраться терпения.<br />
По-моему оно того стоит.<br />
Моя ссылка на место на карте находится внизу правой колонки. Можете посмотреть, как выглядит Киев и какая там погода. К слову, нанесли они там пока только Жуляны...</p>
<p>Блоггеры всех, стран присоединяйтесь!</p>
PNGCRUSH и PNGOUT
2004-08-14T00:00:00Z
https://cssing.org.ua/2004/08/14/pngcrush-pngout/
<p>Натолкнулся на две замечательные програмки, которые я думаю будет полезно иметь всем связанным с вебграфикой. Обе заметно облегчают трафик.</p>
<p>Лично я предпочитаю чаще использовать PNG вместо GIF. Так вот для меня эти програмки оказались открытием. Обе делают одно и тоже, но немного разными способами. И кстати немного соревнуются между собой.<!--more--></p>
<p>PNGOUT, например, позволяет конвертировать такие форматы, как JPG, GIF, PNG в PNG. При чем я не зря упомянул PNG. Я попробовал обработать свои PNG картинки ею (которые я делал в фотошопе), и был приятно удивлен. Размер падал минимум в два раза, и это при неизменном качестве. Причем эффект увеличивался при поочередном использовании PNGOUT и PNGCrush.</p>
<p>PNGCRUSH, оптимизирует PNG файлы, но немного другим способом. Что позволяет использовать её в связке с конкурентом. И еще больше оптимизировать файл.</p>
<p>Вобщем это еще один шаг (мой) к тому чтобы забыть GIF.</p>
<p>Вот все нужные ссылки касательно PNGCRUSH и PNGOUT:</p>
<ul>
<li><a href="http://advsys.net/ken/util/pngout.exe">PNGOUT</a><em>(29Kb)</em>(+<a href="http://advsys.net/ken/util/pngout.htm">инструкция и описание</a> + <a href="http://advsys.net/ken/utils.htm">для линукса и др.</a>)</li>
<li><a href="http://prdownloads.sourceforge.net/pmt/pngcrush-1.5.10-win32.zip?download">PNGCRUSH</a> <em>(86Kb)</em></li>
<li><a href="http://twilightuniverse.com/blog/archives/2004/2/12/11/ping/">Сравнение</a> этих двух программ и <a href="http://twilightuniverse.com/blog/archives/2004/2/12/11/ping/">объяснение</a> почему PNG лучше чем GIF.</li>
</ul>
Заголовки
2004-08-11T00:00:00Z
https://cssing.org.ua/2004/08/11/heading/
<p>Заголовки, какие бы они ни были, всегда бросаются в глаза первыми.</p>
<h4><a href="http://www.cameronmoll.com/">www.cameronmoll.com</a></h4>
Эти заголовки просто поразили меня. Скажу честно, я очень удивился когда выделил текст в них. На первый взгляд, да и на второй это была картинка, но никак не текст!
<!--more-->
Просто поразительно какое гармоничое слияние нашел дизайнер своего красивого шрифта и обычного текста (курсива).
Когда я начал разбираться, вот какой маленький трюк применил <a href="http://www.cameronmoll.com/">Камерон Молл</a>.
Для заголовков он использует такую конструкцию:
<code><h1><img class="capA" src="/img/letters/a.gif" alt="" width="50" height="28" /><span class="hide">A</span>LA does it again</h1></code>
То есть в заголовке перед первой буквой идет картинка (они хранятся для каждой буквы). А потом идет сам текст, причем первую букву он заключил в <code><span></code>, что бы она не отображалась. А для каждой буквы-картинки выбрал идеальный правый отрицательный отступ (все разные!).
Вот как это выглядит:
<pre>
...
.capI {margin-right: -13px; vertical-align: -20%;}
.capL {margin-right: -5px; vertical-align: -20%;}
.capM {margin-right: -16px; vertical-align: -20%;}
.capN {margin-right: -22px; vertical-align: -20%;}
.capO {margin-right: -3px; vertical-align: -20%;}
.capP {margin-right: -14px; vertical-align: -20%;}
.capS {margin-right: -7px; vertical-align: -40%;}
.capT {margin-right: -20px; vertical-align: -20%;}
.capU {margin-right: -9px; vertical-align: -25%;}
...
</pre>
И из-за этого выглядит это все потрясающе. Заголовки смотрятся цельными словами, и курсив Georgia (именно этот шрифт используется для текста) гармонично сливается с красивым шрифтом дизайнера.
Вы можете подумать что наличие картинки портит вид при чтении без стилей.
Я тоже так подумал. Оказалось совсем нет. Эти буквы настолько красивы (я про первые буквы заголовков), что я даже не обратил на них внимания. Они совсем не мешают читать и не нарушают гармонию странички. Если вам лень загружать всю страницу вот те самые заголовки с сайта <a href="http://www.caneronmoll.com/">CaneronMoll.com</a>:
<div class="alpha-shadow"><div><img alt="Заголовок с сайта Камерон Молла" title="Заголовок с сайта Камерон Молла" width="214" height="67" src="http://cssing.iatp.org.ua/pic/cammol/h1ala.gif" /></div></div>
<div class="alpha-shadow"><div><img alt="Заголовок с сайта Камерон Молла" title="Заголовок с сайта Камерон Молла" width="214" height="67" src="http://cssing.iatp.org.ua/pic/cammol/h1post.gif" /></div></div>
<div class="alpha-shadow"><div><img alt="Заголовок с сайта Камерон Молла" title="Заголовок с сайта Камерон Молла" width="214" height="67" src="http://cssing.iatp.org.ua/pic/cammol/h1simple.gif" /></div></div>
<span class="non">* * *</span>Вобщем я думал описать побольше заголовков, но эта тема оказалась намного интересней, чем я предполагал. Я обязательно посвящу еще несколько постов ей. И надеюсь как-то обобщить всю информацию.
Apache + PHP + Mysql + Perl = Денвер
2004-08-09T00:00:00Z
https://cssing.org.ua/2004/08/09/apachephpmysqlperl/
<p>Когда-нибудь надо было отладить простенький скрипт или протестировать сайт? И ради этого приходиться ставить апач мускул и т. д. ...Даже если делал это много раз могут возникнуть задержки. А если делаешь это второй или первый раз? Что и говорить, всяческих tutorial'ов по этому поводу море.<br />
Но.<br />
Слава богу есть умные и бескорыстные люди. Угадайте откуда...<br />
Последнее на <a href="http://mezzoblue.com/">mezzoblue.com</a> и возвращение к программированию на PHP натолкнули меня на этот пост.</p>
<!--more-->
<p>Возможно некоторые уже знакомы с этим замечательным пакетом. Называется он <strong>Denwer</strong> или Денвер — <strong>Д</strong>ж<strong>Е</strong>нтльменский <strong>Н</strong>абор <strong>ВЕ</strong>б<strong>Р</strong>азработчика. Как справедливо гласит заголовок это Apache+PHP+MySQL+Perl в одном флаконе. Это просто один файл установки написанный на Perl.<br />
Причем про правку всяческих <code>httpd.conf</code> и <code>php.ini</code> можно забыть. Система ставится практически на любой комп без малейших проблем (мелкие нюансы с 98/Me не в счет). Сама настраивается и <strong>сразу</strong> работает. Это достигается за счет подключения виртуальных дисков.<br />
И что самое поразительное занимает это все чуть меньше 2.4Mb!!! Есть даже "дискетный" вариант!:)</p>
<p>Естественно такое добро получаем не бесплатно — пожертвовали документацией и некоторыми дополнительными возможностями (из того что мне понадобилось - Activeperl например). При том они все доступны на сайте <a href="http://dklab.ru/">dklab</a>. Но они, как правило, редко востребованы — и так хватает.<br />
К MySQL, например, прилагается phpMyAdmin. Лучше для администрации баз я не встречал. Удобное создание, изменение, редактирование и <a href="http://dklab.ru/chicken/web/base.html#top">все</a> <a href="http://dklab.ru/chicken/web/base.html#top">все</a> <a href="http://dklab.ru/chicken/web/base.html#top">все</a> .</p>
<p>Вобщем просто конфетка, а не прога. Любовь с первого взгляда. Гарантированно.<br />
Не так часто повстречаешь такой <a href="http://dklab.ru/chicken/web/base.html#cont1">содержательный и полный хелп</a> к установке и настройке пакета.<br />
Забыл сказать — все <strong>бесплатно</strong>.<br />
И это маленькое счастье веб-программера лежит здесь — <a href="http://dklab.ru/chicken/web/dis/Base/latest">Denwer</a>. (+<a href="http://dklab.ru/chicken/web/base.html">описание и помощь</a>)</p>
Приятно...
2004-08-06T00:00:00Z
https://cssing.org.ua/2004/08/06/glad/
<p>Приятно все-таки, когда на тебя обращают <a href="http://witness.dp.ua/06.08.2004/4">внимание</a>. Это заставляет думать быстрее, делать лучше. Это хорошо в любом случае и для всех...Я не исключение. И хотя сообщение застало меня в отпуске, это дало стимул поститься чаще и лучше (см.выше :))</p>
<!--more-->
<p><span class="non">* * *</span>Приятно так же, что и Google не обошел меня вниманием.<br />
Неужели CSSing такое редкое слово?<br />
И хотя такого слова вообще то нет, но оно относительно часто употребляется. Тем не менее, каким бы это ни было достижением Google или семантического и "легкого" CSS дизайна, но CSSing это теперь я (по крайней мере так думает Google)</p>
<div class="alpha-shadow"><div><img src="http://cssing.iatp.org.ua/pic/google.png" alt="Поиск в Гугль CSSing" width="236px" height="247px" /></div></div>
<span class="non">* * *</span>Кстати, кому интересно, поститься я теперь буду по средам и субботам. А ближайший пост (в среду) посвящу шрифтам для заголовков...
<strong>Update</strong>: ничего понятно не вышло из этого нового графика как видите ;).
XHTML таблицы: Добавляем стили
2004-08-04T00:00:00Z
https://cssing.org.ua/2004/08/04/tables-2/
<p><strong><a href="http://www.snook.ca/archives/000167.html">Designing Data Part 2: Adding Style</a></strong><br /> автор: 2004.06.13 © Jonathan Snook <br /> перевод: 2004.08.04 <a href="https://cssing.org.ua/">Юрий Артюх</a></p>
<p>Цель этой статьи из двух частей(<a href="http://cssing.org.ua/2004/07/31/tables-1/">первая </a>и <a href="http://cssing.org.ua/2004/08/04/tables-2/">вторая</a>) показать как можно создавать XHTML таблицы и эффективно использовать для них <acronym title="Cascading Style Sheets">CSS</acronym>.</p>
<p>Во второй части мы применим стили к структуре документа который мы создали в <a href="http://cssing.iatp.org.ua/index.php?p=17">первой части</a>.</p>
<!--more-->
<h3>Часть 2: Добавляем стили </h3>
<h4>Элемент TABLE </h4>
Что бы как то украсить нашу таблицу я затрону несколько самых важных свойств :
<code>border</code>, <code>border-collapse</code>, <code>border-spacing</code> и <code>empty-cells</code>.
<h4><code>border</code></h4>
<p>Свойство border аналогично элементу <a href="http://cssing.iatp.org.ua/index.php?p=17#atribut">frame</a> в <acronym title="HyperText Markup Language">HTML</acronym>. Оно задаёт <strong>внешнюю</strong> границу таблицы, но не границу каждой ячейки.</p>
<h4><code>border-collapse</code></h4>
<p>Здесь лишь два значения:: <code>collapse</code> и <code>separate</code>.</p>
<p>При задании collapse, между ячейками нет никакого свободного места. И так как границы между смежными ячейками получаются общие, то есть вероятность, что у нас будет два разных стиля для одной границы. По этому поводу на <acronym title="World Wide Web Consortium">W3C</acronym> есть <a href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution">решение проблемы конфликтования границ</a>, что бы помочь определить какой стиль будет показан. Вот как он выглядит, здесь каждая величина имеет преимущество над нижеследующей.</p>
<ol>
<li>border-style(стиль границы) для hidden элементов</li>
<li>border-width (ширина границы)<ol><li>большие значения <ol>
<li> атрибут rules в <acronym title="HyperText Markup Language">HTML</acronym></li>
<li>свойство border-width в стилях </li>
<li> атрибут frame в <acronym title="HyperText Markup Language">HTML</acronym> </li>
<pre><code></ol>
</code></pre>
</ol></li>
<li>меньшие значения <ol>
<li> атрибут rules в <acronym title="HyperText Markup Language">HTML</acronym></li>
<li>свойство border-width в стилях </li>
<li> атрибут frame в <acronym title="HyperText Markup Language">HTML</acronym> </li>
<pre><code></ol>
</li>
</ol>
</code></pre>
</ol></li>
<li>border-style (стиль границы)
<ol>
<li>double (двойная)</li>
<li>solid (обычная)</li>
<li>dashed (пунктир)</li>
<li>dotted (точками)</li>
<li>ridge</li>
<li>outset</li>
<li>groove</li>
<li>inset</li>
<pre><code></ol>
</code></pre>
</ol></li>
<li>элемент
<ol>
<li>cell(ячейка)</li>
<li>row(строка)</li>
<li>row group(группа строк)</li>
<li>column(столбец)</li>
<li>группа столбцов</li>
<li>таблица</li>
</ol>
</li>
<li>border-style для none </li>
</ol>
Во первых, <acronym title="Internet Explorer">IE</acronym> точно этим правилам <strong>не следует</strong>. Он даёт приоритет границе для всей таблицы над всеми остальными.Он так же воспринимает border-style для hidden, как border-style для none, отдавая преимущество всему остальному. Во вторых, нет никакого правила, какой цвет должен быть у спорной границы. Таким образом легко можно получить разное отображение под разными броузерами (я получил три разные картинки в броузерах в которых тестировал).
<p>Это не оговорено на <acronym title="World Wide Web Consortium">W3C</acronym>, но я добавил после тестирования в иерархию свойств то что под border-width.</p>
<p>При раздельной же модели (задано separate) между границами ячеек есть пространство. Это значение стоит по умолчаниюи скорее всего то, что все привыкли видеть. Что бы увеличить расстояние между ячейками используйте свойство <code>border-spacing</code> property.</p>
<p>Если задать border-collapse как separate, то Firefox и Opera игнорируют атрибут rules, и я не нашел никакоого стандарта на<acronym title="World Wide Web Consortium">W3C</acronym> который бы описывал это поведение.</p>
<h4><code>border-spacing</code></h4>
<p>Свойство border spacing может быть задано одним или двумя параметрами длины. Если задано одно значение то оно отражается на пространстве во все стороны. При двух значениях, первое отвечает за горизонтальные отступы (слева и справа от ячейки), а второе соответственно за вертикальные.</p>
<p>Но, как всегда, наш добрый друг <acronym title="Internet Explorer">IE</acronym> не поддерживает свойство border-spacing. Что означает, что мы остаёмcя при использовании старого доброго cellspacing в <acronym title="HyperText Markup Language">HTML</acronym> с тем же результатом. Сразу успокою, cellspacing все еще входит в <acronym title="Extensible HyperText Markup Language">XHTML</acronym> 1.0 Strict.</p>
<p>Следует заметить, что цвет который появляется в пространcтве между ячейками, всегда фон таблицы. Задавая background для строк или ячеек вы никогда не измените цвет между ними.</p>
<h4><code>empty-cells</code><code></code></h4>
<p>Свойство empty-cells принимает два значения: <code>show</code> and <code>hide</code>. И определяет, будет ли видимой граница у пустой ячейки. Его можно так же применить практически к любому элементу таблицы, как для строк, так и для ячеек.</p>
<p><acronym title="Internet Explorer">IE</acronym>, опять же не поддерживает свойство empty-cells. Это было бы смешно, если б так всех не достало к этому времени. К счастью, есть решение этой проблемы. Просто задайте свойства rules и frames в <acronym title="HyperText Markup Language">HTML</acronym> (описано в <a href="http://cssing.iatp.org.ua/index.php?p=17">первой части</a>). Тогда любая граница примененная к ячейке через <acronym title="Cascading Style Sheets">CSS</acronym> появится.</p>
<h4>Обрабатываем столбцы: COLGROUP и COL </h4>
<p>Эти элементы уникальны в том, что ячейки не наследуют от них свойств. Таким образом только три свойства можно к ним применить: border, background, width и visibility. Эти свойства поддерживаются далеко не полностью, так что будьте готовы!</p>
<h4><code>border</code></h4>
<p>Если применить это свойство для colgroup правая сторона которого совпадает с границей таблицы, то в Опере она (граница) не будет прорисована. Задавая атрибут border в <acronym title="HyperText Markup Language">HTML</acronym> как 0 или задавая frame как void, мы полностью так же теряем внешнюю границу таблицы.</p>
<p>В Firefox, все работает как и должно.</p>
<p>В <acronym title="Internet Explorer">IE</acronym>, это свойство не поддерживается.</p>
<h4><code>background</code></h4>
<p>Это редкий случай, но Firefox единственный кто не поддерживает этого свойства. И Opera и <acronym title="Internet Explorer">IE</acronym> поддерживают.</p>
<p><strong>UPDATE:</strong> Firefox 0.9 уже поддерживает это свойство. Ура!</p>
<h4><code>width</code></h4>
<p>Свойство width работает практически идеально во всех броузерах, где я тестировал. Исключение на этот рах составила Опера: для <code>colgroup</code>, она его не поддерживает.</p>
<p>Но надо помнить, что когда свойство width примененл для colgroup, то оно влияет на размер каждого столбца внутри colgroup. К примеру, если задать width 200 пикселов для colgroup содержащей два столбца, то каждый из них будет по 200 пикселов, и всся colgroup 400 пикселов.</p>
<h4><code>visibility</code></h4>
<p>Когда задается для столбца или группы столбцов (colgroup) можно ставить лишь значение <code>collapse</code>. Но ни один из тестируемых не поддерживал это свойство.</p>
<h3>Выравнивание текста в ячейке</h3>
<p>Есть два свойства в <acronym title="Cascading Style Sheets">CSS</acronym> которые управляют выравниванием внутри ячейки. Это <code>text-align</code> (атрибут <code>align</code> в <acronym title="HyperText Markup Language">HTML</acronym>) и <code>vertical-align</code> (атрибут <code>valign</code>). Эти свойства можно применить к любому элементу таблицы, кроме <code>table</code> и столбцов(<code>colgroup</code> and <code>col</code>) .</p>
<p>Что бы выравнивать текст в столбце, надо одновременно несколько атрибутов (что бы это работало в большинстве броузеров. Применим <code>align</code> и <code>valign</code> атрибуты в <acronym title="HyperText Markup Language">HTML</acronym> для тэгов <code>colgroup</code> или <code>col</code> (это как сказано в первой части не поддерживается Mozilla/Firefox). Нужно еще немного поднапрячься что бы это заработало и там.</p>
<ol>
<li>Установим <code>id</code> для загодовка столбца. Пример: <code><th id="qty">Quantity</th></code></li>
<li>становим атрибут <code>headers</code> таким же, как и id для столбца того. Пример: <code><td headers="qty">123</td>.</code> Я не описал эти атрибуты в первой части, так как согласно <acronym title="World Wide Web Consortium">W3C</acronym> они более подходят для accessibility (доступности), которую я не хотел описывать в первой статье.ОднакоБ тут они нам пригодились.</li>
<li>Теперь используя <acronym title="Cascading Style Sheets">CSS</acronym>, мы можем юзать селекторы для задания стилей. Пример: <code>td[headers=qty] { /*сюда поместить стили*/ } </code>Селектор по атрибуту работает в Mozilla, Firefox, и Opera...но не в <acronym title="Internet Explorer">IE</acronym>. </li>
</ol>
<p><acronym title="Internet Explorer">IE</acronym> позволяет задавать шрифт и выравнивание на группу столбцов, что вообще говоря не оговорено в рекомендации <acronym title="Cascading Style Sheets">CSS</acronym> .</p>
<h3> Caption (заголовок) </h3>
<p>Caption можно стилизовать как и большинство других блочных элементов, можно использовать выравнивание и настройки шрифтов . Еще одно свойство из<acronym title="Cascading Style Sheets">CSS</acronym> может нам пригодиться: <code>caption-side</code>. Оно может иметь значение top или bottom и позволяет заголовку появляться над или под таблицей соответственно. Firefox пошел даже дальше, он поддерживает значения left и right. Я похож на заевшую пластинку, но <acronym title="Internet Explorer">IE</acronym> не поддерживает <code>caption-side</code>.</p>
<h3>Margins и Padding </h3>
<p>Ячейки не имеют внешних отступов(margins), но имеют внутренние (padding). Вы можете применить margin для таблицы, что отразится на свободном пространстве вокруг неё. Firefox корректно отображал внешний отступ между заголовком и таблицей, тогда как <acronym title="Internet Explorer">IE</acronym> и Opera применили margin вне заголовка (caption).</p>
<h3>Borders</h3>
Когда вы в режиме separate (ячейки разделены) вы можете менять границы лишь для ячеек и таблицы. Стили для границ строк и столбцов будут проигнорированы. В collapsed режиме и Firefox и Opera позволяют задавать границы для строк и столбцов. <acronym title="Internet Explorer">IE</acronym> воспринимает режим collapsed как separate mode и не позволяет задавать границы для строк и столбцов.
<p>Есть глюк в Opera, если у вас есть таблица <code>thead</code>, <code>tbody</code>,<br />
и <code>tfoot</code> и вы применили стили для границ для <code>thead</code> тогда они отразятся на верхней части <code>tfoot</code>.И наоборот если зададим для <code>tfoot</code> стиль, то он отразится на <code>tbody</code>.</p>
<h3>Теперь за дело </h3>
Я надеялся остаться максимально информативным и не быть сухим. Я не затронул множество <acronym title="Cascading Style Sheets">CSS</acronym> свойств касающихся текста и селекторов типа
<code>:hover</code>. Возможно я дополню свою статью в будущем.
<p>Оставляю вас с примерами, которые, я надеюсь, вдохновят вас попробовать что-нибудь новое. Для примеров я пошерстил web на предмет таблиц данных, и отформатировал по своему.</p>
<ul>
<li>Посмотрите <a href="http://www.ij-healthgeographics.com/content/3/1/4/table/T1">оригинал</a> , а потом <a href="https://cssing.org.ua/technical/designingdata/example01.html">пример</a>.
Для этого примера я сохранил форматирование таким же. Оригинал использовал css-заданные тэги font которые конечно были не к месту. Я убрал все форматирующие тэги. Переместил заголовок в caption тэг и использовал <acronym title="Cascading Style Sheets">CSS</acronym> для задания границ. Только это уменьшило общий размер таблицы с 4k до менее чем 1.5k. </li>
<li>Я взял <a href="http://www.asmusa.org/memonly/asmnews/may99/table1.htm"> еще одну стандартную таблицу</a> и сам её <a href="https://cssing.org.ua/technical/designingdata/example02.html" title="Example Table #2">стилизовал</a>. В этот раз размер с 9k до 4, в основном только из-за тэгов font. Но я также сэкономил на <code>valign="top"</code> для всех ячеек. С точки зрения стиля я оставил все довольно просто(мне нравится когда все просто(мне тоже - akella)). Я задал первой строке (thead) фон и применил padding для всех ячеек. я использовал атрибуты frame и rules, чтобы создать линии между строками таблицы. То же самон можно было сделать применив границы для ячеек. Последнее, что я сделал&mdashприменил фон (background) первого столбца. Что бы это сделать я добавил некоторые тэги (<code>col</code>) для определения столбцов. Далее я задал класс для первого столбца и фоновый цвет для этого класса.
</li>
</ul>
<h3>Заключение</h3>
<h4>Дополнительная инфа:</h4>
<ul>
<li><a href="http://cssing.iatp.org.ua/index.php?p=17">Украшаем данные часть 1: Структура таблиц</a></li>
<li><a href="http://www.w3.org/TR/CSS21/tables.html">Раздел таблиц на W3C</a></li>
<li><a href="http://www.alistapart.com/articles/tableruler/">Линейка для таблиц</a> на A List Apart </li>
<li><a href="http://www.alistapart.com/articles/zebratables/">Полосатые таблицы</a> на A List Apart </li>
</ul>
<h4>Использованные броузеры:</h4>
<ul>
<li> <a href="http://www.mozilla.org/products/firefox/">Mozilla Firefox 0.8/0.9</a> </li>
<li> <a href="http://www.microsoft.com/windows/ie/">Internet Explorer 6.0</a></li>
<li> <a href="http://www.opera.com/">Opera 7.5</a></li>
</ul>
</li></ol>
XHTML таблицы: Структура
2004-07-31T00:00:00Z
https://cssing.org.ua/2004/07/31/tables-1/
<p><strong><a href="http://www.snook.ca/archives/000164.html">Designing Data Part 1: Table structure</a></strong><br /> автор: 2004.06.08 © Jonathan Snook <br /> перевод: 2004.08.02 <a href="https://cssing.org.ua/">Юрий Артюх</a></p>
<p>Цель этой статьи из двух частей(<a href="http://cssing.org.ua/2004/07/31/tables-1/">первая </a>и <a href="http://cssing.org.ua/2004/08/04/tables-2/">вторая</a>) показать как можно создавать XHTML таблицы и эффективно использовать для них <acronym title="Cascading Style Sheets">CSS</acronym>.<!--more--></p>
<p><strong>Содержание этой статьи (все на этой странице!)</strong></p>
<ul>
<li><a href="https://cssing.org.ua/2004/07/31/tables-1/#structura">Структура таблиц</a></li>
<li><a href="https://cssing.org.ua/2004/07/31/tables-1/#atribut">Атрибуты</a></li>
<li><a href="https://cssing.org.ua/2004/07/31/tables-1/#conclusion">Заключение</a></li>
</ul>
<p>В первой части рассмотрим базовую структуру таблицы.</p>
<h3 id="structura">Часть 1: Структура таблиц</h3>
<p>Первое дело в написании любой странички это поместить данные в семантический (подходящий по смыслу) и валидный <acronym title="Extensible HyperText Markup Language">XHTML</acronym>. Давайте начнем с базового примера который вы скорее всего уже использовали.</p>
<pre><table>
<tr>
<th>Year</th> <th>Quantity</th>
</tr>
<tr>
<td>2003</td> <td>50</td>
</tr>
<tr>
<td>2004</td> <td>100</td>
</tr>
<tr>
<td>Total</td> <td>150</td>
</tr>
</table></pre>
<p>Это простая таблица с 4-мя строками и ячейками первой строки обьявленными как head (заголовочные, просто самая первая строка) . Ничего особенного , но только этот шаг создаёт собственно таблицу.</p>
<p>Далее будем добавлять всякую информацию про таблицу и немного больше конкретизируем строки.</p>
<pre><table>
<caption>Total Sales of Thingamajigs</caption>
<thead>
<tr>
<th>Year</th> <th>Quantity</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td> <td>150</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>2003</td> <td>50</td>
</tr>
<tr>
<td>2004</td> <td>100</td>
</tr>
</tbody>
</table></pre>
<p>Элемент caption (заголовок) описывает таблицу и для чего она вообще нужна. Тэг caption должен быть первым элементом после тэга table и является заголовком таблицы. В большинстве броузеров этот заголовок будет отображаться сверху по центру таблицы (над первой строкой) . Во второй части станет ясно как это изменять.</p>
<p>Кроме того мы разделили строки(TR=Table Row) на три группы: THEAD, TFOOT и TBODY. Но почему же tfoot идёт ПЕРЕД tbody?А это позволяет , к примеру, броузеру показывать первую строку (head, тэг thead ) и последнюю ( footer, тэг tfoot) , тогда как основная часть таблицы (body, тэг tbody) только загружается (пользователь раньше узнает , что именно показано на таблице).</p>
<p>Теперь мы описали наши TR, время приняться за столбцы. Для этого существует два элемента: COLGROUP (column group) и COL (column). Давайте опять изменим нашу таблицу добавив эту новую информацию.</p>
<pre><table>
<caption>Total Sales of Thingamajigs</caption>
<colgroup>
<col />
<col />
</colgroup>
<thead>
<tr>
<th>Year</th> <th>Quantity</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td> <td>150</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>2003</td> <td>50</td>
</tr>
<tr>
<td>2004</td> <td>100</td>
</tr>
</tbody>
</table></pre>
<p>Мы указали, что наша таблица содержит одну группу столбцов состоящую из двух столбцов.</p>
<h3 id="atribut">Атрибуты</h3>
<p>Теперь мы вступили на неверную почву. Теоретически большинство атрибутов которые я собиралься описать должны применяться через <acronym title="Cascading Style Sheets">CSS</acronym>. Однако, из-за неправильной поддержки и конфликтования <acronym title="Cascading Style Sheets">CSS</acronym> и <acronym title="HyperText Markup Language">HTML</acronym> для некоторых атрибутов, я опишу их в этой части.</p>
<h4>Атрибуты таблиц: rules (правила), frame (рамка), и border (граница)</h4>
Атрибут border (граница) работает так же, как и всегда. Просто задаём числовое значение для указания её ширины в пикселах. (<a href="http://cssing.iatp.org.ua/examples/tables.html#border">Смотреть пример</a>)
<p>Атрибут frame отвечает за самую внешнюю границу нашей таблицы. Может принимать такие значения: void, above, below, hsides, vsides, lhs, rhs, box and border. void — значение по умолчанию, и полностью убирает внешнюю границу таблицы (рамку). Можно почитать на <a href="http://www.w3.org/TR/html4/struct/tables.html#adef-frame">W3C</a> о том как эти значения влияют на отображение таблицы. Отображение границы оказалось разным во всех трёх броузерах <a href="https://cssing.org.ua/2004/07/31/tables-1/#browsers">в которых я тестировал</a>. <acronym title="Internet Explorer">IE</acronym> прорисовал 3d(обьемную) границу со всех сторон, Opera попросту черную границу, а Firefox серую слева и вверху и черную справа и внизу. Когда в <acronym title="Internet Explorer">IE</acronym> было задано любое значение кроме void, он неверно понимая прорисовывал также границу каждой ячейки. Например, если задать lhs, то будет прорисована левая граница каждой ячейки. Firefox и Opera прорисовывают в этом случае все правильно. <a href="http://cssing.iatp.org.ua/examples/tables.html#frame">(Смотреть пример)</a></p>
<p>Атрибут rules имеет пять простых значений: none, groups, rows, cols, and all. Если задано значение none, то не будет прорисовано никаких линий между ячейками. Это значение задано по умолчанию. Интересно, что если не задать значение этого атрибута (rules), то любой border style (вид границы—solid,dotted,dashed и т. д.) (заданный через <acronym title="Cascading Style Sheets">CSS</acronym>) для colgroup или col не будет использоваться. Но стоит задать значение none как граница неожиданно возвращается на место. Значение groups задает границу (серую и разную в <acronym title="Internet Explorer">IE</acronym>, 1px черную в Firefox и Opera) вокруг каждого thead, tfoot, tbody и colgroup. Изменяя значение на rows или cols прорисует границу между соответственными обьектами. Значение all — около каждой ячейки. Опять же, <acronym title="Internet Explorer">IE</acronym> выделяется из всех и прорисовывает границу вокруг всей таблицы , если задано любое значение кроме none и атрибут frame не был задан.(<a href="http://cssing.iatp.org.ua/examples/tables.html#rules">Смотреть пример</a>)</p>
<p>Если хотите использовать атрибуты frame или rules, лучше использовать их вместе.</p>
<h4>Атрибуты столбцов: span, align, valign и width</h4>
К нашим colgroup и col можна применять атрибут span. Это не сливает несколько ячеек в одну, как атрибуты rowspan или colspan atributes для ячеек. Это просто даёт простой путь для задания одного свойства сразу для нескольких столбцов.
<pre><colgroup>
<col />
<col />
</colgroup>
<colgroup>
<col />
<col />
<col />
</colgroup></pre>
...можно записать как...
<pre><colgroup span="2" />
<colgroup>
<col span="2" />
<col />
</colgroup></pre>
<p>Атрибут span для colgroup показывает, что colgroup объединяет (spans) два столбца. Элементы col не используются когда есть атрибут span для colgroup. Если есть элементы col внутри colgroup, то атрибут span для colgroup игнорируется. Этот атрибут (span) для элемента col показывает наличие 2х столбцов.</p>
<p>Теперь рассмотрим атрибуты align и valign. Их можна применить как к colgroup, так и к col elements, и работают они в основном так же, как и их "ячеечные аналоги". Применяя align="right" для столбца должно задать выравнивание текста по правой стороне для всех ячеек столбца. Эти атрибуты (свойства) важны, так как нет стандартных аналогов в <acronym title="Cascading Style Sheets">CSS</acronym> для того что бы задать text-align (выравнивание текста) для col или colgroup. Таким образом, выравнивание текста должно быть задано на <acronym title="HyperText Markup Language">HTML</acronym> уровне. К несчастью, Mozilla пока не поддерживает применение этого свойства для colgroup. <acronym title="Internet Explorer">IE</acronym> поддерживает text-align на <acronym title="Cascading Style Sheets">CSS</acronym> уровне, хотя это и не оговорено в документации на W3C, но лучше придерживаться <acronym title="HyperText Markup Language">HTML</acronym> подхода для лучшей совместимости.</p>
<p>Атрибут width (ширина) может быть задан в трёх форматах:<br /><br />
<strong>width="100"</strong> ширина в пикселах<br /><br />
<strong>width="20%"</strong> ширина в процентах<br /><br />
<strong>width="2*"</strong> относительная ширина, показывающая, что ячейка в 2 раза шире обычной. Относительный способ не работает в <acronym title="Internet Explorer">IE</acronym> и Opera, поэтому его лучше избегать.</p>
<p>Следует помнить так же, что при использовании процентного или относительного метода в <acronym title="Internet Explorer">IE</acronym> делает общую ширину талицы 100%, тогда как Mozilla и Opera в которых я тестировал, сжимают ширину до минимальной, с наполненными ячейками — что можно было предвидеть.</p>
<p>Во <a href="http://cssing.iatp.org.ua/index.php?p=18">второй части</a>, мы посмотрим как приукрасить эту таблицу используя <acronym title="Cascading Style Sheets">CSS</acronym>.</p>
<h3 id="conclusion">Заключение </h3>
<h4>Доступность (accessibility)</h4>
<p>Есть еще один аспект создания хорошей структуры таблицы, который я еще не затронул, это доступность (accessibility). Это конечно тема которой должна быть уделена отдельная статья. Советую почитать <a href="http://www.w3.org/TR/html4/struct/tables.html#non-visual-rendering">прорисовка таблиц невизуальными методами</a> и <a href="http://www.w3.org/WAI/References/Tablin/">Tablin</a>, метод линеаризации таблиц.</p>
<h4>Примеры</h4>
<ul>
<li><a href="http://cssing.iatp.org.ua/examples/tables.html">Таблицы и атрибуты</a></li>
</ul>
<h3>Дополнительная инфа:</h3>
<ul>
<li><a href="http://cssing.iatp.org.ua/2004/08/04/tables-2/">Украшаем данные часть 2: Добавляем стили</a></li>
<li><a href="http://www.w3.org/TR/html4/struct/tables.html">Определение таблиц в HTML4.01 Standard</a> (на котором базируется <acronym title="Extensible HyperText Markup Language">XHTML</acronym> 1.0 )</li>
<li> <a href="http://www.w3.org/TR/html4/appendix/notes.html#notes-tables">Про таблицы на W3C</a></li>
</ul>
<h3><a name="browsers"></a>Броузеры в которых тестировалось:</h3>
<ul>
<li> <a href="http://www.mozilla.org/products/firefox/">Mozilla Firefox 0.8</a></li>
<li> <a href="http://www.microsoft.com/windows/ie/">Internet Explorer 6.0</a></li>
<li> <a href="http://www.opera.com/">Opera 7.5</a></li>
</ul>
Маленькая проблемка
2004-07-28T00:00:00Z
https://cssing.org.ua/2004/07/28/small-problem/
<p>В процессе написания стилей для этой страницы у меня возникла проблема ( с кем бы вы думали?) с IE 5.0.Я надеюсь тот простой выход что я нашел принесет кому то пользу...</p>
<!--more-->
<p>Я хотел, что бы заголовки постов на главной странице были немного смещены влево по отношению к содержанию.Мне кажется , что так легче визуально разделять страницу.<br />
К тому же хотелось впихнуть в начало заголовка соответствующую иконку (вы могли её заметить на главной странице).Вот такую <img src="https://cssing.org.ua/2004/07/28/small-problem/pic/ent.gif" alt="entry" title="иконка" width="16px" height="17px" />.<br />
Для этого я применил к заголовку такие стили:</p><pre>.storytitle {<br />
border-bottom: dotted 1px #aaa;<br />
font-weight:normal;<br />
margin-top: 0;<br />
padding-left:20px;<br />
<strong>position:relative;<br />
left:-1em;</strong><br />
background: transparent<span class="linewrap">»</span><br />
url(pic/ent.gif) no-repeat left;<br />
}</pre><br />
И все бы прекрасно.FireFox , Opera и IE 6 довольны.<strong>Но</strong>.Мне пришла ,наверно,самая глупая идея которая приходит на ум верстальщику — потестировать в IE 5.0.<br />
Вот что я увидел вместо своих желанных заголовков с отступом от текста:<br />
<img class="bord" src="https://cssing.org.ua/pic/bok.gif" width="222px" height="84px" alt="IE 5 во всей своей красе" title="IE 5 во всей своей красе" /><br />
После коротких игр с <acronym title="Cascading Style Sheets">CSS</acronym> я понял что это не я наглючил, а майкрософт (это не я модный , это они не очень :)) .<br />
После указания <code>position:relative;</code> IE 5.0 игнорировал мои потуги с <code>padding</code>.<br />
В конце концов утешение я нашел в отрицательных <code>margin</code>'ах.<br />
Поменяв старые правила для заголовков на эти :<pre>.storytitle {<br />
border-bottom: dotted 1px #aaa;<br />
font-weight:normal;<br />
margin-top: 0;<br />
padding-left:20px;<br />
background: transparent<span class="linewrap">»</span><br />
url(cssing/ent.gif) no-repeat left;<br />
<strong>margin-left:-1em;</strong><br />
}</pre><br />
В результате все остались довольны.И вот что стал теперь показывать IE 5.0:<br />
<img class="bord" src="https://cssing.org.ua/pic/nebok.gif" width="227px" height="88px" alt="Довольный IE 5" title="Довольный IE 5" /><br /><br />
Вот такое решение маленькой проблемки.<br />
Похожую тему недавно обсуждали на <a href="http://www.umade.ru/">Umade</a>.<br />
Довольно красивый и полезный русский блог.Недавно кстати <a href="http://www.umade.ru/log/2004/07/36.html">занесенный</a> в раздел noteworthy на <a href="http://www.cssvault.com/noteworthy/2004/07/index.php">CSS Vault</a> .<br />
А это ссылка на похожую <a href="http://www.umade.ru/log/2004/07/35.html">тему</a> на Umade.<p></p>
Творческие муки
2004-07-27T00:00:00Z
https://cssing.org.ua/2004/07/27/struggle/
<p>Хоть я и не дизайнер, но творческие муки мне не чужды.<br />
Очень понравилось видение этих мук с точки зрения успешного дизайнера.<br />
Просто интересно почитать как пишет об этом <a href="http://www.nundroo.com/archives/000001.html">Didier Hilhorst</a><br />
Рекомендую</p>
Случайно нашел...
2004-07-23T00:00:00Z
https://cssing.org.ua/2004/07/23/goodlink/
<p>Случайно набрел на <a href="http://www.insignificantother.com/">визуальное исполнение</a> которое меня поразило.<br />
Там еще и Гагарина цитируют.Коряво, но все равно приятно...<br />
Советую посмотреть, почитать...</p>
Сила Web стандартов
2004-07-22T00:00:00Z
https://cssing.org.ua/2004/07/22/web-standards-tender-com-ua/
<p>Просто для интереса я решил хоть один раз посмотреть насколько сокращается код страницы при переходе с таблиц на сугубо <abbr title="Cascading Style Sheets">CSS</abbr>+<abbr title="Exstensible HTML">XHTML</abbr> верстку.Жертвой стала страница <a href="http://tender.com.ua/news.aspx" title="ВДЗ">Висныка Державных закупивель...</a><!--more--></p>
<h4>Почему тендер?</h4>
Эта страница просто подвернулась под руку ,так как моя организация имеет отношение к этому проекту. Да и просто как яркий пример <strong>слишком</strong> неоптимизированного кода.Одного взгляда на <em>source</em> и подключаемый почти 50kb <abbr title="JavaScript">JS</abbr> хватило что бы это понять.Я абсолютно уверен , что для любой другой страницы разница в переходе на web стандарты была бы не так заметна.
<h4>Ближе к делу.</h4>
Я сразу решил не менять графику.Попросту для того , что бы для стороннего человека разница была лишь в скорости загрузки (к чему я собственно и стремился).
После коротких разбирательств с окошком страницы оказалось что она имеет фиксированную ширину ,что просто означало еще более простую её вёрстку.То есть проблем с layout (раположением основных областей страницы) вообще не должно было быть.Однако с надеждой (вдруг я в итоге этот проект перехвачу :)) я делал резиновый сайт то есть , можно было растягивать его как угодно и сжимать тоже , и в последний момент задал фиксированную ширину.
<p>Выпадающие менюшки на этой страничке меня очень "порадовали".Они требовали 47kb джаваскрипта и неперевариваемый вызов функций с немеряным количеством переменных внутри.</p>
<p>Скажу только что для этого использовал подход одной из последних статей с моего любимого сайта <a href="http://alistapart/">Alistapart</a>.<br />
А это ссылка на конкретную статью которую я использовал<br />
<a href="http://alistapart.com/articles/horizdropdowns/">Horizontal Dropdowns</a>.<br />
Только это заменило 47 Kb скрипта на 300b(байт).</p>
<h4>Итоги</h4>
Размер непосредственно <abbr title="Hypertext MarkUp Language">HTML</abbr> упал с 70Kb до 9Kb.
<p>Загадкой для меня осталось уменьшение <abbr title="Cascading Style Sheets">CSS</abbr> ;ведь теперь в него была занесена вся информация о страничке , а не только некоторые настройки шрифтов.</p>
<p>В общем подводя итоги , оказалось что общий размер кода ( <abbr title="Hypertext MarkUp Language">HTML</abbr> и Javascript) уменьшился где то в 10 раз (!).Это при том , что я не жалея расставлял <code>div</code>'ы и <code>id</code> для них.Хотя я и старался но болезнь автора гигатизмом картинок уменьшила мои старания в 5 раз.</p>
<p>Общий размер загружаемого файла уменьшился всего в 2 раза , что по моему не уменьшает эффекта.<br />
И это не считая того что моя страничка доступна с мобильных устройств ( спасибо структурному <abbr title=" eXtensible Hypertext MarkUp Language">XHTML</abbr>), редизайн легко осуществим сменой всего одного файла — вобщем ,все обычные преимущества <abbr title=" eXtensible Hypertext MarkUp Language">XHTML</abbr>+<abbr title="Cascading Style Sheets">CSS</abbr>.</p>
<dl><dt>Вот оригинал:</dt>
<dd><a href="http://tender.com.ua/news.aspx" title="Старый тендер на таблицах">Tender.com.ua</a></dd>
<dt>А это мой вариант:</dt>
<dd><a href="http://cssing.iatp.org.ua/tender/" title="А это мой вариант">CSSXHTMLTENDER</a>.</dd>
</dl>
Просто новость
2004-07-21T00:00:00Z
https://cssing.org.ua/2004/07/21/first-post/
<p>Привет мир!Пока это место в сети не примечательно абсолютно ничем ( ну разве что тем что я тут обосновался). Но надеюсь некоторые найдут тут скоро что-то полезное для себя.<!--more--><br />
Торжественно обещаю post'иться каждые 2-3 дня.<br />
Если вы заметили какой-то бок тут ( кодировка или просто бок ) или просто случайно сюда попали , пожалуйста оставьте комментарий к этому посту.</p>