Так уж вышло, что связка Firefox и Firebug оказалась очень удобной для веб-разработки — быстрая отладка и поиск элементов избавляют от множества рутинных операций и сильно разгружают мозг разработчику.

Firebug — это расширение для браузера Firefox, являющееся консолью, отладчиком, и DOM-инспектором JavaScript, DHTML, CSS, XMLHttpRequest.

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

Например, компания Yahoo ещё в 2007 году выпустила своё расширение Yahoo! YSlow, которое анализирует скорость загрузки всех компонентов веб-страницы и дает советы по клиентской оптимизации, основанные на собственных исследованиях и тестах Yahoo.

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

После установки этого расширения в Firebug появляются две новых вкладки: Page Speed (анализ загрузки страницы и формирование инструкций по исправлению найденных ошибок оптимизации) и Page Speed Activity (детальная отрисовка загрузки всех компонентов страницы).

Из отличий Page Speed от YSlow и аналогов можно назвать следующие: он умеет самостоятельно оптимизировать картинки и сжимать JS и CSS, а также показывать все неиспользуемые CSS-селекторы.

Ещё одно любопытное расширение для Firebug, не имеющее впрочем отношения к скорости загрузки страницы, — это SenSEO. Он анализирует огромное количество мелких факторов на странице, влияющих тем или иным образом на её поисковую оптимизацию.

Кстати, неплохо было бы сделать что-то подобное с поправкой на российские реалии. Никто не хочет озадачиться?

Этот пост не совсем обычный — большая его часть написана не мной. Эти мысли прислал мне Владимир «Bolzamo» Большаков, я их только немного откорректировал и добавил свои комментарии. Итак, читаем.

В наши дни web-разработка уже совсем не та, что была в 90-х, а еще через пару лет она изменится ещё больше. На дворе XXI век, и Web 2.0 принёс нам XHTML, Ajax, микроформаты, OpenID, RSS и прочие вкусности.
То, что раньше «лепилось вслепую», теперь уже перерабатывается, проходит стандартизации и спецификации. Это касается и web-технологий, в частности — языков разметки и описания web-интерфейсов: HTML и CSS, о которых и пойдет речь.

Жилинский: А что 90-е? Я в ВГТУ получал сертификат по web-программированию в 2001 году — нам тогда давали PHP3 и говорили, что «некоторые веб-мастера уже иногда используют для верстки DIV-блоки с абсолютным позиционированием, но полностью сделать страницу на них невозможно.»

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

Будучи web-программистом, и ходя большей частью по сайтам таких же гиков и фанатов развития новых технологий, иногда начинаешь считать, что весь web красив и продвинут, что Web 2.0 прочно вошел в нашу жизнь, что красивый ненавязчивый дизайн (разработанный согласно требованиям юзабилити) и блочная семантическая верстка — это обыденность, это нормально…

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

Сколько их, этих ресурсов, построенных на табличной верстке, в коде которой сломаешь обе ноги, руку и голову? Чья кодировка — windows-1251, перенос строки формата — cr/lf, а у некоторых в еще и <META NAME=»Generator» CONTENT=»FrontPage 4.0″>…

Жилинский: Много. Очень много. Даже в корпоративном сегменте, не говоря уже про Юкоз, Народ и леса сателлитов...

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

Почему HTML изучают с таблиц? Элементарно! Потому что в учебниках написано изучать HTML с таблиц. Все учебники, самоучители и методические пособия вышли в далеких 90х годах, когда CSS рассматривался, разве что, как средство выставить шрифты и расцветку сразу для всего сайта. И слыхом никто не слыхивал о разделении контента и представления.

Есть, конечно, и новые учебники. Полистал недавно парочку… Нашел в них перепечатку старых. Только версия FrontPage поменялась и добавилось пара глав о CSS и блочной верстке. Почему-то авторы этих учебников ни разу не задумываются о том, что, чтобы научить человека чему-то хорошему, надо для начала не учить его плохому.

Кто не согласен с тем, что табличная верстка — это плохо? Почитайте спецификацию: тег table предназначен для представления табличных данных, равно как микроскоп предназначен для изучения микроскопических объектов, а не для забивания гвоздей.

Как-то я разговорился на эту тему с одним программистом, который иногда зарабатывает созданием простеньких сайтов на заказ для местных организаций. Сайты делает просто удивительные: верстка табличная, картинки увесистые, скрипты самописные, ЧПУ даже и не пахло. На все мои увещевания, что это неправильно, что надо стремиться к лучшему, он просто ответил, что веб никогда не был и не будет правильным. Что HTML — это куча мусора, к которой добавили еще одну кучу мусора — CSS, и теперь пытаются присобачить третью кучу мусора, называя ее стандартами веб-разработки. Классная формулировка, которая для многих может показаться вполне резонным оправданием, чтобы продолжать забивать интернет этим самым мусором. А какая разница? Заказчик ничего в этом не смыслит, ему красиво — он доволен.

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

Вот так мы и находим основные факторы, убивающие мотивацию к дальнейшему развитию себя как web-разработчика, изучению технологий и стандартов:

1. Делаем, как привыкли. Уже научились верстать в таблицах, кажется очень сложным изучать все тонкости и хитросплетения CSS, вдумываться в структуру документа, воевать с багами IE, чтобы достичь кросс-браузерности. На самом деле, блочная верстка куда проще и логичнее, просто сначала стоит изучить вопрос.

2. Заказчику всё равно. Заказчик хочет отдать деньги и увидеть сайт, похожий на картинку, чтобы было очень красиво и иногда еще и понятно написано.

Вот и закончилась «неконференция интернет-активистов» iCamp 2008, проходившая с 31 июля по 4 августа. Это было несколько дней круглосуточного драйва с небольшими перерывами на то, чтобы залезть в палатку и выспаться. В качестве трофеев привезено несколько гигабайт фотографий, пара роликов на Рутубе с моим участием, несколько десятков полезных контактов и море хорошего настроения.

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

Впрочем, обо всём по порядку. Читать далее »

«Облако тегов» или «Облако меток» (англ. tag cloud) — визуальное представление списка ярлыков. Частота упоминаний, поисков, ссылок в интернете с определенного сайта неких слов, терминов, имен, отображается в виде изображения этих слов в формате гиперссылок. Размер изображения тем больше, чем выше релевантность данного слова.

Теги для многих удобнее категорий, и, наверное, поэтому без них сейчас не обходится ни один проект в концепциях Web 2.0. Для многих CMS есть модули или плагины, выводящие облако тегов. WordPress поддерживает такую функцию начиная с версии 2.3.

Но мне захотелось вывести такую штуку на самописном движке сайта «Коллеги: 1000 IT-блогов«. Реализация оказалась проще, чем я думал.

• 1. Создал таблицу соответствий «Тег — Число».
• 2. Заполнил её (несложная функция, подсчитывающая число вхождений тега в таблице блогов).
• 3. Рассчитал максимальное значение и исходя из него — популярность каждого тега в процентах.
• 4. Разделил теги на группы по популярности и назначил им CSS-классы.
• 5. Подготовил соответствующие CSS-классы для отображения.
• 6. Вывел облако на страницу блоком.

TagCloud.phps - формирование облака тегов.

В тексте исходника — все инструкции, дамп таблицы и CSS-классы. Посмотреть этот код в действии можно в «Коллегах».

Жилинский Владимир.

Несколько дней назад я писал про то, что готовится акция CSS Naked Day — один день без CSS на сайтах в целях популяризации и продвижения единых веб-стандартов.

Так вот, 9-е апреля наступает, тем, кто решил присоединиться — не забыть отключить CSS и зарегистрироваться в качестве участников.

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

Многие восприняли это не совсем адекватно — кто-то счёл это «наездом» на свой любимый недобраузер IE, кто-то — борьбой с ветряными мельницами. Но кого это волнует? Отключаем ))

Жилинский Владимир.

Вебмастера! Внимание! На 9-е апреля назначена мировая акция CSS Naked Day.

Цель: показать всю важность создания единых стандартов верстки.
Метод: отключить на 1 день CSS на своих сайтах и показать, как всё это выглядит без стилей.

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

В 2006-м году специально для этой акции был даже создан плагин для WordPress, который впрочем с новыми версиями уже не работает. Но его функциональность легко восстановить: замените объявление CSS-импорта в файле header.php в папке вашей темы на следующий код:

<?php
function is_Naked_Day() {
$use_gmt_offset = 1;
$start = date('U', mktime(0,0,0,04,09,date(Y)));
$end = date('U', mktime(24,0,0,04,09,date(Y)));
$now = time('U');
if($use_gmt_offset)
$offset = get_settings('gmt_offset')*60*60;
$start = $start + $offset;
$end = $end + $offset;
$now = $now + $offset;
if (($now >= $start) && ($now <= $end))
return true;
else return false;
}
if(is_Naked_Day()) {
echo "<!-- Сегодня CSS Naked Day -->";
} else {
echo "<link rel='stylesheet' href='".bloginfo('stylesheet_url')."' type='text/css' media='screen' />"; } ?>

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

Без CSS мой блог выглядит так. Подурачимся ? )))

Жилинский Владимир.

По ряду причин, мне не найти времени и сил на полноценную статью, а написать что-нибудь хочется. Поэтому я просто дам несколько полезных на мой взгляд ссылок на статьи моих коллег-блогеров. На всякий случай: в этих статьях описывается решение задач средствами PHP.

Итак, как…

• Добавить на картинки watermark (водяные знаки, копирайты).
• Создать превьюшьки больших изображений.
• Добавить проверку CAPTCHA (капча) к форме.
• Настроить облако тэгов в WordPress 2.3.
• Сделать верстку нумератора страниц (английский вариант).
• Сделать поиск с русской морфологией через phpMorphy.

Может кто-нибудь продолжит список в комментариях ?

Жилинский Владимир.

Давно искал такой CSS-скрипт и вот наконец нашёл, делюсь.

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

Поддерживаемые браузеры: Firefox (Mac & PC), Camino, Safari, Opera (Mac & PC) & Internet Explorer 7 (в IE 6 не работает).

Подключается и работает как обычный CSS-файл.

Iconize v.0.5.

Ну, а для тех, кому так неинтересно — есть полный исчерпывающий тему гайд по определению ссылок иконками средствами CSS.

Жилинский Владимир.

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

• Quick Highlighter (C++, PHP, Ruby, HTML, JavaScript, Perl, Python, Smarty, XML).
• PrettyPrinter (PHP, Java, C++, C, Perl, JavaScript, CSS)
• PHP Code Beautifier (PHP, PEAR).
• Ruby Script Beautifier
• Tabifier (CSS, HTML, C).
• CSS Beautifier
• CSS Formatierer und Optimierer
• Highlight.js (Python, Ruby, Perl, PHP, HTML, CSS, Django, JavaScript, VBScript, Delphi, Java, C++, SQL).
• Code Beautifier Plus (Java, C# and ActionScript).
• PHP Formatter
• PHP_Beautifier
• Online Beautifier for JavaScript
• Lorins simple code beautifier for C++, C#, Java, and Javascript
• Tidy
• Javascript und CSS-Compressor
• Artistic Style (C, C++, C#, Java).
• Cleancss.com
• Codebeautifier.com

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