Браузеры и стандарты. Вечная погоня. Из-за несоответствий стандартам, из-за разных способов рендеринга страниц большая часть времени веб-дизайнера уходит на то, чтобы загладить эти несоответствия (использовать хаки). В итоге, вместо эффективной работы, дизайнер вступает в противоестественные отношения с браузерами, теряя драгоценное время.

Уважаемые хабровчане, представляю вам вольный перевод статьи Avoiding common HTML5 mistakes. Здесь мы рассмотрим частые ошибки в HTML5 разметке с точки зрения семантики, и как их избежать.

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

Гид по пикнику

12-00 — 16-00

• Круглый стол «Нужны ли кластеры в Петербурге, и если да — то какие?»
• Hackathon

17-00 — 20-00

• Выставка стартап-проектов
• Lightning talks (5-минутные выступления)

20-00 — 23-00

• Костер, фрисби, волейбол.

Судя по комментариям в этой статье, создание веб-приложений с возможностью аякс-навигации является интересной для сообщества темой и пока еще немногие сталкивались с подобной задачей. Я расскажу о ее решении с помощью небольшой библиотеки под названием jQuery-Pjax (либо моего форка ее).

Моя мотивация: в проекте нужно было реализовать mp3-плеер, играющий независимо от навигации на сайте. Далее потребовалось добавить поддержку браузеров без pushState — и я сделал форк библиотеки.

Основные особенности

• навигация по сайту и обработка форм без полной перезагрузки страниц
• чистые url, доступные для прямого доступа
• поддержка #!/hash для устаревших браузеров (добавлено в моей версии)
• работа с кнопками «назад» и вперед» для современных браузеров
• а теперь и для старых — благодаря benalman.com/projects/jquery-hashchange-plugin
• похоже, есть проблемы с ИЕ7 (спасибо Nc_Soft) (тем более, большое спасибо за участие Nc_Soft) и, возможно, opera 11.5 (пока не могу подтвердить, но нахожу крайне удивительным из-за dev.opera.com/articles/view/introducing-the-html5-history-api) — сообщение artishok — проверено и работает на сборке 1074 (not_ice)
• imsamurai (https://github.com/imsamurai) предложил улучшения библиотеки (и я радостью слил изменения): встроенная функция для отправки форм, улучшения работы с хешами и более развитая система триггеров. (у imsamurai, к сожалению, нет аккаунта на хабре — будем рады помощи)

Ссылки

• jQuery Pjax github.com/defunkt/jquery-pjax
• мой форк с поддержкой хеш-навигации github.com/ckald/jquery-pjax
• работа библиотеки на примере моего проекта amsterdamusic.com.ua
• пример от создателя pjax.heroku.com

Принцип работы Pjax

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

Сегодня мы хотим рассказать о некоторых дополнительных возможностях, которые вы можете использовать при продвижении своего сайта через инструменты от самих поисковых систем Яндекс.Вебмастер и Google Webmasters.

Данный обзор инструментов идет в продолжение первых двух статей (см часть 1 и часть 2)

Сейчас мы разберем такие важные вопросы как:

• Присвоение региона сайту
• Формирование особых сниппетов
• Обзор самых важных слов сайта
• Анализ мета-описаний страниц сайта
• Проблемы индексации

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

В связи с событиями у Clodo, выкладываю свой скрипт для резервного копирования. Очень подходит для небольших vps. Заточен для Ubuntu, но думаю, это не проблема.

Скрипт создает 2 архива: в одном файлы, в другом директория с дампами всей БД по базам.
Нужно поменять настройки в начале.

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



Заходите на специальную страницу под своим аккаунтом Facebook и наслаждайтесь фильмом из музея о себе.

Амит Сингхал, почетный сотрудник Google

В последние месяцы мы проделали огромный объем работы, чтобы сайты с качественным содержанием стали более доступны для пользователей Google на английском языке. В этой статье мы хотели бы рассказать о том, как мы этого достигли.

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

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

• Написана статья любителем с поверхностными представлениями или профессионалом с глубокими познаниями в данной предметной области?
  
• Не скопирована ли статья из другого источника? Содержит ли она уникальную информацию, неопубликованные ранее исследования, новые отчеты или свежие аналитические материалы?
  
• Много ли статей в Интернете на эту тему? Существенно ли отличается от них в лучшую сторону эта страница?
  
• Допущены ли в статье грамматические, стилистические ошибки или ошибки в предоставляемых данных?
  
• Насколько качественно редактировалось содержание?
  
• Призвана ли статья реально помочь читателям?
  
• Представлена ли информация на данную тему в этой статье наиболее полно и всесторонне?
  
• Вызывает ли доверие информация, представленная в статье, в том числе, и по жизненно важным вопросам, например, медицинским?
  
• Замусорена ли статья рекламой, которая отвлекает от основного содержания?
  
• Положа руку на сердце, готовы ли вы добавить закладку на эту страницу или рекомендовать этот материал к прочтению своим друзьям и другим пользователям?
  
• Останется ли пользователь недоволен, посетив страницы этого сайта?

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

А что же делать веб-мастерам?

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

Если вы хотите нам что-нибудь сообщить, ждем вас на форуме для веб-мастеров. По мере работы над обновлениями наших алгоритмов мы всегда учитываем ваше мнение.

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

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

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

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

Неужели нам остаётся лишь сносить эту му́ку? Что ж, теперь нет! Недавно я обнаружил подход, который позволит дизайнерам распрощаться с открытием 23 PSD-файлов только ради смены цвета элемента в шапке. Вместо этого мы можем поступать разумно, как наши коллеги, разработчики, и импортировать внешние файлы при помощи кое-чего с названием «Variables (Переменные)».

Сие позволит поместить многократно используемый компонент в отдельный файл и просто импортировать его во все макеты. Теперь, когда нам понадобится внести изменение, мы будем просто вносить его в одном месте.

Я очень люблю паттерны. Нередко применяю идеи из одной сферы в другой — так, в тайм-менеджменте отлично работает принцип программирования KISS (keep it simple, stupid), равно как и DRY (don't repeat yourself).



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

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

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

Вместе с тем, многие пытаются управлять своим временем по «водопадной модели» — пишется план, а потом не корректируется. При этом план составляется сложнейший, на много дней вперед. И конечно, он либо проваливается полностью, либо выполняется на небольшой процент. Такие планы, как точно заметили ребята из 37signals, точнее называть догадками.

А как же писать планы, которые работают?

Представляю вашему вниманию перевод статьи в двух частях под названием "Can Experience be Designed?" от Oliver Reichenstein. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением компании Information Architects Inc..

Для начала загадайте число от одного до десяти. А затем сделайте шаг назад и посмотрите на словосочетание «Проектирование впечатлений пользователя» так, словно вы никогда раньше его не видели.



Смотрите внимательно на эти слова до тех пор, пока вы не услышите в своей голове волшебно красивый голос, произносящий их вслух: «ПРОЕКТИРОВАНИЕ ВПЕЧАТЛЕНИЙ ПОЛЬЗОВАТЕЛЯ». Что думаете? Все это кажется вам какой-то нелепицей? Нет, я говорю не про загадывание числа и не про шаг назад, а про идею. Идею о том, что кто-то может контролировать ваши чувства и ощущения. Или же вы с легкостью согласитесь, что ваши впечатления от прочтения этой статьи были продуманы мной как автором? Вы читаете этот текст каким-то своим, особым образом? Или вы прочитали и ощутили его так, как я это задумал?

CSSO (CSS Optimizer) является минимизатором CSS, выполняющим как минимизацию без изменения структуры, так и структурную минимизацию с целью получить как можно меньший текст.
CSSO написан на Javascript, выполняется как в браузере, так и в командной строке (с помощью NodeJS).
Распространяется под лицензией MIT.

В начале этого года по приглашению канала ITV я дал интервью Наилю Байкову о юзабилити (о чем я еще могу говорить?).

Анонс канала ITV: «Юзабилити — наука, которая была востребована еще тогда, когда такого термина даже не существовало. Сегодня же каждый второй веб-дизайнер объявляет себя специалистом по юзабилити. О том, что представляет собой эта наука на самом деле, где таятся ее корни и чего ожидать от нее в перспективе — в рассказе от первого лица.»

Вместе с борьбой за качество и количество иконок в бесплатных сетах (снимаю шляпу перед gasyoun и Yusuke Kamiyamane) навигация по ним становится все более невыносимой. Особенно в ситуации, когда несколько проектов уже на стадии отладки и в каждом используется свой сет. Начинаешь путать названия для типовых иконок, а поиск нужной иконки в огромных PNG-картах занимает львиную долю времени.

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

style.css

.habr span
{
    display:block;
    overflow:hidden;
    white-space:nowrap;
    width:100%;
    -moz-binding:url("ellipsisxul.xml#ellipsis");
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
}

Добрый день

Этот пост написан по мотивам поста «Вёрстка c «Ушами»». По комментариям в этом поста я понял, что у людей есть реальная проблема сделать такой вид макета для IE7. Вот Я и решил предложить решение, которым уже давно пользуюсь в работе, и которое полностью отвечает требованиям, озвученным в выше названном посте.

Итак, макет позволяет удовлетворить такие требования:

• независимо от разрешения, информативная часть сайта должна находиться посередине;
• справа и слева должны остаться графические блоки (уши), причём эти уши должны быть видны только при увеличенном размере экрана браузера, а при уменьшенном не уместившаяся часть должна прятаться (в идеале, чтобы ещё горизонтальной полосы прокрутки не было);
• страница должна быть резиновой от 600px до 1000px;
• подвал всегда прижат к низу.

Резиновая версия работает в FF3.5+ (можно сделать что бы работал в FF3.11), IE7+, Opera 9.64+, Chrome, Safari.
Фиксированная версия работает в IE6+.

Инструменты системы управления временем, описанные в прошлом посте, дают возможность свести все дела, происходящие в вашей жизни и требующие участия, в одно место. Это, как, наверное, понятно — списки дел, разбитые на категории DAY, LATER, CONTROL. Работой со списками предшествует работа с накопителями.

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

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

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

Проблему можно представить графически так:


Задача вёрстки заключается в следующем:

• — независимо от разрешения (размера она браузера), информативная часть сайта находилась посередине;
• — справа и слева должны остаться графические блоки (уши), причём эти уши должны быть видны только при увеличенном размере экрана браузера, а при уменьшенном не уместившаяся часть должна прятаться (в идеале, чтобы ещё горизонтальной полосы прокрутки не было);;
• — страница должна быть резиновой от 680px до 1000px.

Работает для FF3, FF4, IE8 и почти для Opera.