15 августа 2010.  Дублируйте редиректы ссылкой!

Итак, для тех кто не использует ночные сборки Файрфокса, будет новостью, что в последних версиях лисички не работают редиректы с включенным расширением Adblock (bug 23092). 

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

Хочу поделится результатами пользования популярными сервисами с отключенными редиректами.

• У mail.ru вроде бы всё работает. по крайней мере почта и поиск
• у рамблера работает авторизация на почту, но не работает поиск
• у гугла наоборот, работает поиск, но не работает авторизация в гмайл
• у яндекса не работает вообще ничего. Что не удивительно, ведь "поисковик №1" всегда отличался пренебрежением к веб-стандартам и удобству пользователя.
• на любимом хостинге Jino.ru, не работает регистрация.
• Недочёты есть и в авторизации PhpMyAdmin, и в шаблонах страниц nginx'а.

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

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

12 августа 2010.  Как отключить проверку совместимости расширений в Firefox

Поскольку с версии 3.7, любимое мной расширение Nightly Tester Tools больше не работает, то форсированно запускать остальные расширения на бета-версии файрфокса стало проблемой.

Не так давно Mozilla решила что будет лучше изменить для пользователей способ форсировать расширения для работы с новыми версиями Firefox, что введено уже в последнем релизе Firefox 3.6. Раньше вы могли выставить для всех версий файрфокса в свойствах about:config настройку extensions.checkCompatibility в значение false. Теперь название этой настройки немного изменилось.

Вам нужно будет немного менять его для каждого шага разработки Firefox (alpha, beta, release, и т. п.).

1. В адресной строке наберите: about:config
2. Кликните в любом месте страницы и выберите New -> Boolean
   
3. Имя настройки, которое вам нужно, зависит от того, какую версию Firefox вы используете, например:
   Firefox 3.6: extensions.checkCompatibility.3.6
   Firefox 3.7 Alpha: extensions.checkCompatibility.3.7a
   Firefox 4.0 Beta: extensions.checkCompatibility.4.0b
   
4. Установите её значение в false чтобы заставить браузер отключить проверку совместимости ваших дополнений с вашей версией Firefox.
   

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

28 июля 2010.  Пользователь важен для вас? Просто дайте ему зарегистрироваться

Сегодняшняя поучительная статья будет о правилах регистрации пользователей.

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

Много лет назад существовала возможность принудительно сделать сайт стартовой страницей, пока эту непотребность не запретили. До сих пор многие сайты агитируют сделать их сайт главной страницей или хотя бы добавить в избранное. В основном это мелкие доморощенные сайты, хотя масшаб катастрофы в умах менеджеров и владельцев сайтов настолько широк, что даже такие гиганты как яндекс, mail, rambler и даже Yahoo, используют подобную кнопку. Я всегда считала и считаю сейчас, что это крайне дурной тон — решать что-то за пользователя. В случае рамблера кнопка вообще ведёт на страницу для идиотов с инструкциями как назначить стартовую страницу. Что касается кнопок «добавить в избранное», то тут надо понимать, что если пользователь не умеет сам добавлять сайт в закладки, то он что-то добавленное скриптом и не найдёт в них.

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

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

29 июня 2010.  Игра 25 квадратов на javascript

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

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

28 июня 2010.  Лёгкое типографирование предлогов в PHP

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

Строки перенесены неверно:

• Приборы для ПЦР в
  реальном времени
• Оборудование для
  ПЦР-лабораторий
• Наборы реагентов и
  тест-системы для
  ПЦР в реальном времени
• Зонды для ПЦР в
  реальном времени
• Реагенты для
  секвенирования и
  фрагментного анализа

Строки с предлогами перенесены верно:

• Приборы для ПЦР
  в реальном времени
• Оборудование
  для ПЦР-лабораторий
• Наборы реагентов
  и тест-системы
  для ПЦР в реальном времени
• Зонды для ПЦР
  в реальном времени
• Реагенты
  для секвенирования
  и фрагментного анализа

Добиться такого эффекта легко, если заменить пробел после предлога на неразрывный -  
Это можно сделать если настроить следующую автозамену в php-скриптах вывода этого меню, например так:

$caption = str_replace(' в ',' в ',$caption);
  $caption = str_replace(' и ',' и ',$caption);
  $caption = str_replace(' для ',' для ',$caption);

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

function typo($str){      
    $predlogs=array('в', 'без','до','из','к','на','по','о','от','перед','при','через', 'с','у','и','нет','за','над','для', 'об', 'под', 'про');
    foreach($predlogs as $p){
        $str = str_replace(' '.$p.' ',' '.$p.' ',$str);
    }	
    return $str;
}

Приятной типографики вам =)

14 июня 2010.  Особенность свойства opacity в CSS

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

http://usabili.ru/labs/css_opacity_bug.html — посмотрите эту страницу, на ней видно что у абсолютно позиционированного элемента внутри с прозрачностью, не работает z-index относительно другого элемента с прозрачностью. Т. е. он оказывается под ним, и соответственно красная ссылка в нём не доступна для клика. Красная ссылка в этом примере обрабатывается так как будто имеет z-index:0 или даже меньше, хотя это не так. Причём, при убирании свойства opacity у любого из элементов, или при перемещении элемента со ссылкой из прозрачного — ссылка становится рабочей.
Всё что говорится по этому поводу в спецификации css3: «If an element with opacity less than 1 is positioned, the ‘z-index’ property applies as described in [CSS21], except that ‘auto’ is treated as ‘0’ since a new stacking context is always created. See section 9.9 and Appendix E of [CSS21] for more information on stacking contexts». В упомянутых выше ссылках я не смогла найти точного ответа. Чтобы разобраться я отправила письма Яну Хигсону (hixie), который рекомендовал задать вопрос в лист рассылки www-style@w3.org, и Дэвиду Арону (dbaron), который ответил в топике багзиллы.

Ниже я публикую ответ этой загадки (пока в непереведённом виде):

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

12 июня 2010.  Запрет от индексации участка текста в яндексе

Итак. поскольку я весь май ничего не писала, самое время отметить майские обновления в движке яндекса, в частности новые возможности скрывать от поисковика часть кода на странице. Полную версию спецификации можете читать тут: «Методы управления поведением робота».

Зачем это нужно разработчикам? Если вы не занимаетесь поисковой оптимизацией, а просто делаете сайты, то возможно вам это и не нужно. Если в кратце - каждая страница имеет свой поисковый рейтинг, т.е. ценность в глазах поисковика, и соответственно все исходящие ссылки часть рейтинга (тиц, PageRank) отдают страницам на которые они ссылаются, чтобы этого избежать целесообразно эти ссылки прятать от поисковика. Кроме того ценность страницы со статьёй про абразивные материалы неизменно упадёт если на ней будет стоять ссылка на отбеливание зубов =).

Тег <noindex>

Для запрета индексирования служебных участков текста вы можете использовать тег <noindex>, его действие распространяется на контент, заключенный внутри тега в формате:

 <noindex>текст, индексирование которого нужно запретить</noindex>

Тег noindex не чувствителен к вложенности (может находиться в любом месте html-кода страницы).

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

 <!--noindex-->текст, индексирование которого нужно запретить<!--/noindex-->

Атрибут rel="nofollow" у тега <a>

Атрибут rel="nofollow" используется в теге <a> в виде:

 <a href="url" rel="nofollow">текст ссылки</a> 

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

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

9 июня 2010.  Используйте border-radius

Вы любите скруглённые уголки? Я например — очень люблю. Практически в каждом дизайне или вёрстке у меня они присутствуют. Несколько лет назад — было бы проще нарезать дизайн в картинки и выложить их как есть, или же использовать метод c css-спрайтами.

Но сегодня я хочу рассказать пару новостей о свойстве border-radius, которое раньше служило хорошим способом «постепенного улучшения»:

Во-первых, хоть это и старая новость, Опера полностью поддерживает это свойство с версии 10.5 (т. е. уже полгода как). Грядущий IE9 также его поддерживает.

Вторая новость, подсмотренная на хабре, заключается в том что файрфокс видимо уберёт наконец префикс -moz- у этого свойства в следующем релизе. Что очень радует, так как для файрфокса свойство приходилось писать отдельно, что очень лениво. Так что ждём webkit, когда он тоже отменит свой префикс, поскольку для него я часто даже не задавала отдельного свойства.

Что касается предыдущих версий IE, то в них поддержка включается специальным скриптиком

behavior: url(ie-css3.htc);

Который можно взять тут http://fetchak.com/ie-css3/, замечу что это финальная версия популярного скрипта, разные версии которого часто используются в других способах скругления уголков.

Используйте border-radius — красиво же! =)

1 июня 2010.  Канонический url и устранение дублей страниц с помощью rel="canonical"

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

В частности, полезным может оказаться один способ избавиться от дублированного контента в поисковой выдаче. Не секрет, что часто одна и та же страница оказывается проиндексирована под разными url, для того чтобы этого избежать можно использовать тег link, с атрибутом rel="canonical". Использование rel="canonical" — является более удобной альтернативой редиректам, с точки зрения поисковой оптимизации, к сожалению яндекс пока не поддерживает этот тег, но надеюсь будет понимать в скором будущем. Располагать его следует вместе с остальными в <head>, например примерно такой результат вы можете видеть если посмотрите в код текущей страницы:

<link rel="canonical" href="http://usabili.ru/news/2010/06/01/canonical_url.html">

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

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

23 апреля 2010.  WOFF продвигают в стандарты

Восьмого апреля компании Мозилла, Опера и Майкрософт подали на рассмотрение в W3C спецификацию формата файла "WOFF File Format 1.0". Заявка была опубликована 19 апреля http://www.w3.org/Submission/2010/03/.

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

В то время, и Microsoft и Netscape разработали несовместимые друг с другом решения. Netscape поддерживал, (и в последствии отказался) формат Bitstream’s Portable Font Resource (PFR).  Интернет эксплорер использовал формат Embedded Open Type (EOT).

Десять лет спустя, Apple добавила в WebKit и Safari возможность подключения сырых шрифтов, т.е. TrueType или OpenType. Firefox и Opera последовали примеру, но использование было на практике ограничено бесплатными шрифтами и специальными сервисами обфускации типа Typekit, так как производители шрифтов категорически против того, чтобы позволять их интеллектуальная собственность была размещена "как есть" на страницах. Обычно большой размер файлов и различия связанные с поддержкой HTTP компрессии у разных пользователей добавили практических проблем.

В марте 2008, Microsoft подала заявку на стандартизацию EOT в W3C. Несмотря на большое количество существующих установленных EOT-совместимых IE, большое количество разногласий помешали формату Microsoft стать стандартом шрифта для веба.

Летом прошлого года, усилиями дизайнеров Тала Леминга (Tal Leming) и Эрика ван Блокланда (Erik van Blokland), и представителя Мозиллы Джонатана Кью (Jonathan Kew),  появился WOFF - открытый формат сетевого шрифта, уже содержащий в себе компрессию. Если сравнивать формат с обычным сжатым в gzip форматом TTF или OTF, новый формат не сильно отличается, однако я думаю, что изначально сжатый формат будет очень полезен тем, кто ещё не научился настраивать gzip на сайте.

Спецификация нового формата подготавливалась недавно созданной Fonts Working Group в которую вошли разработчики браузеров, компании-разработчики шрифтов и дизайнеры. 

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

Также файл может содержать в себе метаданные в формате XML, полезные чтобы получше узнать что это за шрифт и откуда.

Пример использования:

@font-face {font-family: 'PT Sans'; 
        src: url('pts55f.eot'); 
        src: local('PT Sans'), url('pts55f.woff') format('woff'), url('pts55f.ttf') format('truetype');}

 h2.style1 {font-size: 48px; line-height:normal; font-family: 'PT Sans'; font-weight: bold; font-style:italic;}

Предыдущие записи, смотрите в архиве новостей »