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

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

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

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

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

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

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

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

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

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

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



Атрибуты next и prev от Google

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

Директивы next и prev от GoogleНе так давно специалисты компании Google выдали вебмастерам инструмент для обеспечения более правильной индексации их сайтов своей поисковой системой — атрибут rel="canonical", указывающий на дублирующийся контент.

Теперь они добавили ещё пару атрибутов, которые должны обеспечить более правильное понимание поисковой системой материалов, разделённых на страницы — это атрибуты rel="prev" и rel="next" .

Работает это следующим образом: в head-блоке страницы прописывается тег link с атрибутами rel и href. Первый атрибут принимает значение prev или next, а второй содержит ссылку на предыдущую или следующую страницу соответственно.

Например, записи в этом блоге выводятся на главной странице и их вывод разделяется постранично. Первая страница — zhilinsky.ru, вторая — zhilinsky.ru/page/2/, и так далее. Для первой страницы конструкция будет выглядеть следующим образом:

<link rel="next" href="https://zhilinsky.ru/page/2/" />

Поскольку страница первая в списке, предыдущая страница не указывается (а у последней страницы не будет указана следующая). У второй страницы будут присутствовать уже оба атрибута:

<link rel="prev" href="https://zhilinsky.ru/" />
<link rel="next" href="https://zhilinsky.ru/page/3/" />

  • Значения атрибута href могут представлять из себя как относительные, так и абсолютные пути.
  • Если на странице объявлен тег base, то адреса можно указывать относительно его атрибута href.
  • Разрешено использование значения rel="previous" как альтернативы rel="prev".

Если вы в чём-то ошибётесь при верстке этих атрибутов, то катастрофы не случится — Google просто проиндексирует ваши страницы, используя свои обычные алгоритмы.



OpenID: официальный провал?

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

openid.pngСопоставьте несколько интересных фактов, которые, по-моему, говорят о провале формата OpenID:

Google отказался использовать OpenID в сервисе Google Apps в пользу схожей с ним собственной системы межсайтовой авторизации — Google Open ID Federated Login API. Фактически, они сделали собственную систему авторизации, что может запросто привести к появлению таких же решений, например, от Microsoft и Yahoo и к окончательному отказу от открытых стандартов вроде OpenID.

Google возрождает старый протокол finger, который позволял получить данные о человеке, зная его e-mail (а не URI, как в OpenID). Новый протокол (WebFinger), естественно, ориентирован на интернет. Среди разработчиков заметен Brad Fitzpatrick — создатель LiveJournal.com и OpenID.

И, кстати, этот самый Brad Fitzpatrick пишет, что проект OpenID по большей части провалился из-за косяков при разработке интерфейсов для работы с ним:

«People have been trying to use URLs as identifiers for people (as OpenID does), as it has great readability/discoverability properties, but this effort has largely failed because of UI/UX design failings, user confusion about URLs, etc.»

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



Обновления браузеров

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

Пожалуй, главная новость интернета за эту неделю — это долгожданное обновление сразу двух популярных браузеров.

Google ChromeНовый браузер от интернет-гиганта Google Chrome получил новую бета-версию 2.0.169.1, которая, впрочем, более чем стабильна. По заявлению разработчиков и тестеров, скорость работы этой программы увеличилась на 25% за счёт перехода на более новые версии компонентов.

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

А разработчикам советую заглянуть на сайт экспериментов с Chrome, на котором можно отточить свои навыки работы с JavaScript.

Internet Explorer 8Вторая новость — выход Microsoft Internet Explorer 8, который как всегда «быстрее, безопаснее и удобнее», правда в сравнении всего лишь с собственными старыми версиями.

Из нововведений пользователям IE8 обещают «умную» адресную строку, более высокую скорость работы, поддержку акселераторов, веб-фрагментов,  улучшенную безопасность и более точное следование веб-стандартам.

Справедливости ради, стоит отметить, что этот браузер на самом деле лучше своих предыдущих версий, но всё равно хуже более надёжных и безопасных альтернатив: Opera, FireFox, Chrome, Safari…

В подтверждение моих слов: «Взлом браузера Internet Explorer 8 у немецкого студента занял около пяти минут. После этого он получил контроль над компьютером.»



Учим друзей искать самостоятельно

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

Нашёл забавнейший ресурс — LetMeGoogleThatForYou.com. «Этот сайт создан для людей, которые считают, что лучше побеспокоить вас своими вопросами, нежели самим поискать ответ в Google

Давай я поищу в Google вместо тебя

Принцип использования такой:

  • 1. Ваш друг спрашивает, что означает «STFU».
  • 2. Переходите на этот сайт, вводите запрос «STFU» и нажимаете кнопку «Поиск в Google».
  • 3. Полученную ссылку отправляете другу.
  • 4. Он откроет ссылку и получит не только результат поиска, но и короткий скриптовый ролик на тему того, как этот результат можно было получить самостоятельно с помощью Google.

Вот так — и забавно, и познавательно, я считаю.



Исторический фотоархив LIFE на Google

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

Google договорился с журналом LIFE и оцифровал его исторический оффлайн-фотоархив с 1750-го года — это миллионы фотографий, ранее в сети не существовавших. Фотографии выложены в свободном доступе, а так же доступны при поиске по изображением в Google. Можно искать только по этому архиву, используя уточнение source:life.

Теперь можно увидеть, как выглядело программирование под MAC в 1966-м году.

Google LIFE



День интернета

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

День интернета в разных странах отмечают в разные дни. В России прижилась дата 30 сентября из-за того, что московская фирма «IT Infoart Stars» решила проявить инициативу: назначить 30 сентября «Днем Интернета», ежегодно его праздновать и провести «перепись населения русскоязычного Интернета».

Так и появился этот неофициальный праздник, с которых я сегодня всех официально и поздравляю. Меня поздравил Google, дав этому блогу при недавном обновлении PR 5, чему я очень рад.

Компания Webmaster.SPb сделала довольно прикольный сериал на тему офисной жизни вебмастеров “Разработка сайта”, вот третья серия:



QR-code. Бар-коды в современном интернете

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

Слово «бар-код» в русском языке появилось благодаря англичанам. Среди значений их глагола bar – «испещрять полосками, зарешечивать». В некоторых словарях этого слова нет вовсе, но в тех, где присутствует, оно пишется через дефис: бар-код. Хотя, не исключаю, что впоследствии его причешут до «баркод» — по привычке.

qr-code

На данный момент самым популярным и перспективным стандартом кодирования бар-кодов является QRQuick Response. Это сейчас стандартный для Японии способ кодировать текстовую и графическую информацию в форме маленьких картинок, которые легко отсканировать сотовым телефоном. Если вы напечатаете такую картинку и проведете по ней сотовым телефоном, то закодированный текст автоматически распознается, лишая вас сомнительного удовольствия долго вводить требуемый e-mail или веб адрес, пользуясь крошечными кнопками с клавиатуры телефона. Такие коды в Японии печатают на продуктах, в рекламе, на формах заказа и так далее. Вы можете сами найти такой баркод на процессоре своего компьютера – именно так производится их учёт в Intel и AMD.

QR была разработана в Японии, компанией Denso в 1994 году. Ключевое отличие QR от аналогичных стандартов — учет специфики японского языка средствами UTF-8, что для нас означает возможность спокойно шифровать и русские буквы в QR-кодах.

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



Безопасный Gmail

34 комментария

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

Но с учётом того, что мы часто используем Wi-Fi и выходим в сеть из публичных мест, использование веб-клиента может быть небезопасно. Например, в из общей Wi-Fi сети на Chaos Constructions наши умельцы вытаскивали все пароли беспечных участников фестиваля прямо на большой экран. Выглядело это как-то так:

Chaos Constructions

Так вот – хорошая новость. Теперь в настройках почты Gmail появилась галочка – “Всегда использовать https”:

Gmail HTTPS

Эта галочка включает обязательное RC4 128 бит шифрование данных, которое желающим почитать вашу почту принесёт немало головной боли. Включите её.

Мы собрали рюкзаки, повесили на них палатки, спальные мешки и через несколько часов выезжаем в Москву на iCamp. Не упустите шанс пообщаться!



Организация общения с посетителями сайта: варианты.

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

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

Такой подход явно не располагает посетителей к контакту: я не люблю звонить непонятно куда по телефону (да и зачем, я же в сети), ICQ – это что-то личное, да и для контакта требуется слишком длинная цепочка действий, а по почте мы все знаем, что не дождёмся ответа скорее всего никогда.

На западе решением этой проблемы было озадачено несколько компаний, разработавших всё, что можно найти в Google по запросу “Live Chat Software“, то есть программы для мгновенной связи оператора с посетителем сайта. По некоторым данным, такой механизм в хорошей реализации может увеличить конверсию и, соответственно, продажи более чем на 80% (!). Это вполне логично – задать вопрос специалисту проще, чем лазать по каталогу и легче, чем звонить, искать кого-то в ICQ или ждать ответа по e-mail.

Отсюда логически следует жизненный вопрос: как это реализовать, желательно самостоятельно и бесплатно?

Подход первый. Грамотный.
Будем писать сервис под себя. Самый удобный, открытый и подходящий для этой цели стандарт, на мой взгляд – Jabber Jabber. Берём class.jabber.php class.jabber.php или немного его доработанный вариант PHP Jabber Client PHP Jabber Client и пишем всё, что нам нужно. Для любителей Python: xmpppy xmpppy.

Не нравится XMPP – можно рискнуть и заморочиться с ICQ, например на основе PHP-класса WebIcqPro WebIcqPro или даже Java-библиотеки Joscar Joscar. Я думаю, что ICQ следует использовать только в том случае, когда нет возможности использовать Jabber, так как этот протокол не блещет стабильностью, надёжностью и предсказуемостью. Да и возможность несложного создания Jabber2ICQ гейта даёт Jabber`у дополнительное преимущество.

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

1. Hab.la Hab.la. Весьма удобный сервис, основанный на Jabber. Легко настраивается, не вызывает конфликтов, легко интегрируется в любую страницу, позволяет использовать любой jabber-клиент на стороне оператора. Подробнее про хаблу можно почитать у Дикого Hab.la.

2. Google Talk chatback badge Google Talk chatback badge. Просто и со вкусом, если грамотно оформить, то вполне приемлемо. Но найден недостаток в реализации – сделано с использованием Flash (Google, ЗАЧЕМ?), что ограничивает в общении неанглоязчных пользователей не-windows. Я надеюсь, в Google исправят этот косяк.

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

  • Веб Мессенджер Веб Мессенджер
  • SiteHelper.NET SiteHelper.NET
  • GoTalk GoTalk
  • LiveContact LiveContact

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

Спонсор статьи: продвижение сайтов от StarDesign. Без комментариев.

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




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