Продвинутые анализаторы для Firefox/Firebug.

Добавить комментарий

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

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

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

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

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

Google Page SpeedНедавно похожий инструмент выложила в открытый доступ и Google. Говорят, он какое-то время использовался внутри компании для оптимизации собственных разработок. Google Page Speed — вот этот новый инструмент.

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

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

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

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

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



HTML5 Camp: завтра

7 комментариев

Завтра с утра и до вечера в Москве будет проходить довольно интересное мероприятие — HTML5 Camp под эгидой Microsoft. Регистрация на мероприятие, конечно, давно закрыта, но организаторы обещают онлайн-трансляцию, которая начнётся завтра (17 февраля) в 10:00. Регистрация для просмотра трансляции не требуется.

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

HTML5 Сamp

«Make Web Not War» — призывает Microsoft, хотя и не упускает ни малейшей возможности порекламировать очередную версию своего недобраузера. Теперь в него добавили бесполезную, но «принципиально новую» функцию.

Программа мероприятия:

  • 10:00 — Открытие: A More Beautiful web (Microsoft)
  • 11:00 — Современный подход к веб-стандартам (К. Кичинский, Microsoft)
  • 12:00 — Погружение в HTML5 (Г. Магдануров, Microsoft)
  • 14:00 — Динамическая графика: Canvas и SVG (В. Макеев, Opera Software)
  • 14:35 — Карты и SVG (Ф. Голубев, Яндекс)
  • 15:15 — Разработка игр в HTML5 (Н. Котляров, JoyBits Ltd)
  • 15:50 — Как стать ближе к пользователям с IE9 (Б. Бринза, Microsoft)
  • 16:50 — Эволюция JavaScript: ES5.0 (И. Кантор, JavaScript.ru)
  • 17:40 — Как померить скорость веба (Н. Мациевский, WEBO Software)
  • 18:20 — Кружок вышивания HTML5 JavaScript`ом (Р. Рождественский, Яндекс; В. Баум, Microsoft)

Посмотрим, послушаем, интересно же.



Таблицы: красиво и удобно.

15 комментариев

Что-то давно я не писал ничего, исправляюсь. Эта запись будет скорее в стиле «чтобы самому не забыть». Когда-то давно один читатель меня просил сделать произвольную сортировку в таблице, которая рисуется средствами PHP. Бегло просмотрев функции работы с массивами, я понял, что определённо должен быть способ проще. Так и вышло ©.

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

Поиск такого скрипта (а зачем писать если можно найти?) показал, что их десятки, и многие по навороченности напоминают центр управления космическими полётами, например – соответствующие плагины Tablesorter для JQuery, Phatfusion sortable и Mootable sorting для mootools, Datatables для YUI и TableKit для Prototype.

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

Я выбрал два маленьких скрипта, не требующих ничего ни от сайта (нужно подключить один JS-файл), ни от вёрстки (нужно просто задать CSS-класс для заголовков таблицы).

Unobtrusive Table Sort Standartista
Unobtrusive Table Sort Standartista


1. Unobtrusive table sort — это мой выбор, я использовал его в выводе результатов работы скрипта для проверки тИЦ и PR.

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

Очень легко подключается, и может работать даже без дополнительной CSS-обёртки. Хотя, стоит отметить, с ней он выглядит довольно симпатично.

2. Standartista — очень похожий скрипт, но со своими особенностями. Он умеет сортировать IP-адреса, валюты, числа, текст и даты, а главная его фишка в том, что он сам умеет эти типы данных угадывать, не требуя пояснений.

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



Диалог: верстка и прогресс.

21 комментарий

Блочная верстка Этот пост не совсем обычный — большая его часть написана не мной. Эти мысли прислал мне Владимир «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. Заказчику всё равно. Заказчик хочет отдать деньги и увидеть сайт, похожий на картинку, чтобы было очень красиво и иногда еще и понятно написано.

Жилинский: Кстати, полезное дело делает компания Opera Software — парни организуют семинары в городах СНГ в рамках программы поддержки высшего образования Opera Education Program. Прочитать об этом можно в их блоге.

Жилинский Владимир и Большаков «Bolzamo» Владимир



iCamp 2008: отчёт.

27 комментариев

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

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

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



Как сделать облако тегов на PHP.

41 комментарий

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

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

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

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

скачать PHP скриптTagCloud.phps - формирование облака тегов.

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

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



CSS Naked Day: завтра девятое.

15 комментариев

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

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

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

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

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



CSS Naked Day: обнаженный интернет.

20 комментариев

Вебмастера! Внимание! На 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 мой блог выглядит так. Подурачимся ? )))

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



Как на сайте сделать…

20 комментариев

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

Итак, как…

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

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



Iconize Textlinks – добавляем иконки к ссылкам

19 комментариев

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

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

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

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

Iconize v.0.5.

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

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




© 2007-2010 Блог интернет-разработчика, автор — Zhilinsky.ru.
При использовании информации ссылка на источник обязательна.