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

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

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

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

• для IOS (для закладки и для экрана «Домой»);
• для Windows;
• для Android;

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

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

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

Для начала приведем пример стандартной таблицы, которая выводит список характеристик товаров для сравнения:

<table>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Продукт 1</th>
      <th>Продукт 2</th>
      <th>Продукт 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Характеристка 1</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
    </tr>
    <tr>
      <td>Характеристка 2</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
    </tr>
    <tr>
      <td>Характеристка 3</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
    </tr>
    <tr>
      <td>Характеристка 4</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
    </tr>
  </tbody>
</table>

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

Решение 1: Flexbox

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

@media screen and (max-width: 768px) {
  tr {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }

  td, th {
    display: block;
    width: 33%;
  }

  th:first-child,
  td:first-child {
    text-align: center;
    background: #efefef;
    width: 100%;
  }

  th:first-child {
    display: none;
  }
}

Однако, данное решение не является универсальным, т.к. поддержка flexbox составляет около 80% для современных браузеров и более 93%, если учитывать версии браузеров, которые требуют префиксы. Поддержка IE начинается с IE10 (синтаксис 2012 года), в то время как IE11 имеет полную поддержку.

Так как мы заинтересованы в поддержке маленьких экранов, то мы можем игнорировать отсутствие поддержки предыдущих версий IE. На мобильных устройствах, поддержка начинается с Android 4.4 и iOS 7.1. Предыдущие версии требуют префиксы или не поддерживают данную функцию.

Решение 2: доп. разметка + ARIA

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

<table>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Продукт 1</th>
      <th>Продукт 2</th>
      <th>Продукт 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="visible-xs" aria-hidden="true">
      <td>&nbsp;</td>
      <td colspan="3">Характеристика 1</td>
    </tr>
    <tr>
      <td>Характеристика 1</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td>&nbsp;</td>
      <td colspan="3">Характеристика 2</td>
    </tr>
    <tr>
      <td>Характеристика 2</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td>&nbsp;</td>
      <td colspan="3">Характеристика 3</td>
    </tr>
    <tr>
      <td>Характеристика 3</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td>&nbsp;</td>
      <td colspan="3">Характеристика 4</td>
    </tr>
    <tr>
      <td>Характеристика 4</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
    </tr>
  </tbody>
</table>

CSS в таком случае будет еще проще:

.visible-xs {
  display: none;
}

@media screen and (max-width: 768px) {
  .visible-xs {
    display: table-row;
  }

  td:first-child,
  th:first-child {
    display: none;
  }
}

Выводы

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

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

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

Что такое защита контента сайта

Большинство людей, которые сталкивались с вопросом защиты текстов и картинок сайта, считают, что для защиты контента достаточно отключить контекстное меню (кнопку правой мыши) и выделение текста на сайте, или добавлять к скопированному тексту ссылку на страницу откуда скопирован текст.

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

Отключение контекстного меню и блокировка выделения текста обладают следующими недостатками:

1. реализованы на JavaScript — отключите JS в браузере и вы сможете пользоваться контекстным меню и выделять текст;
2. код страницы все-равно доступен — горячие клавиши Ctrl+Shift+J в Chrome открывает консоль JS, где вы можете перейти на вкладку «Elements» и легко скопировать текст/сохранить изображение;
3. страницу можно сохранить к себе на компьютер со всем ее текстом и картинками Ctrl+S в помощь.

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

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

• запрет доступа — доступ к информации полностью закрыт для сторонних пользователей;
• шифрование — информация находится в открытом доступе, но она зашифрована, например при помощи ключа;
• частичный доступ — пользователи могут ознакомиться только с определенной частью информации.

(если какой-то пункт пропустил — пишите в комментариях)

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

Защита текста на сайте

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

В виду этого, поисковые системы Google и Яндекс пытаются решить проблему определения авторских прав и предлагают по два решения.

Быстрое добавление страниц

Вы можете указать поисковой системе на то что добавили новую страницу, чтобы ускорить индексацию текста на ней. Сделать это можно по следующим ссылкам:

• Google Search Console;
• Яндекс.Вебмастер;

и вот как это выглядит:

Указание авторства для Google

Поисковая система Google также предлагает подтверждать авторство контента страниц при помощи специальных тегов:

• <meta name=»author» content=»Nikita Spivak«>
• <link rel=»author» href=»https://plus.google.com/u/0/+NikitaSp_ua«/>
• <link rel=»publisher» href=»https://plus.google.com/u/0/+NikitaSp_ua«/>

Бытует мнение что первый тег уже не актуален, но я пока продолжаю его использовать. Author-тег указывает на ссылку страницы автора в Google+, а publisher — это непосредственно страница самого издательства (бизнес-страница), в моем случае, это одна и та же страница.

Добавление оригинальных текстов в Яндекс

Обязательно добавьте свой ресурс в систему Яндекс.Вебмастер и подключите в разделе «Содержимое сайта» сервис «Оригинальные тексты».

Кросспостинг как метод защиты текста

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

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

Защита изображений на сайте

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

• некоторые типы водяных знаков можно безболезненно удалить;
• при наложении водяных знаков сохраняется доступность оригиналов;

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

Накладывайте сложные водяные знаки, ведь простой можно обрезать, удалить, перекрыть своим водяным знаком. Пример слабого водяного знака и как можно удалить такой водяной знак с изображения я описывал в статье «Водяные знаки на изображениях и как удалить простой водяной знак«.

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

Например в CMS OpenCart изображения хранятся в корневой папке image, которая содержит два каталога:

• cache;
• data.

В директории data хранятся оригиналы изображений, которые прикреплены к продуктам интернет магазина, а в папке cache находятся копии этих изображений, уменьшенных до используемого на сайте размера и с водяным знаком. При этом файловая структура в директории cache полностью повторяет структуру папки data, а файлы имеют те же названия, что позволяет злоумышленнику скопировать адрес изображения с водяным знаком, например:

http://example.com/image/cache/data/catalog/product-300×800.jpg

и обратиться по адресу:

http://example.com/image/data/catalog/product.jpg

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

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

Но в последние годы, все основные браузеры мигрировали на платформу WebKit, что упростило разработку кроссбраузерных сайтов, однако компания Microsoft старается выделиться и выпускает Internet Explorer на платформе Trident вплоть до последней, 11-ой версии всеми горячо любимого браузера. Но на этом MS решили не останавливаться, и сделать жизнь разработчиков еще разнообразнее и насыщенней, путем удаления фильтров из IE 10 и 11 версий, что повлекло сложности, в том числе и с обесцвечиванием картинок с помощью CSS, методом наложения Grayscale фильтра.

И поскольку, как уже было написано выше, в Internet Explorer начиная с версии 10 были отключены DX Filters, то необходимо искать другое альтернативное решение. Одним из таких решений является наложение SVG слоя (jsFiddle):

img.grayscale:hover {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

svg {
	background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

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

• оригинальное изображение;
• предварительно обесцвеченное изображение;

Таким образом достигается эффект 100% работоспособности в браузерах Internet Explorer без громоздкого кода и костылей. Обращаю внимание на то, что данный метод используется только в случае если пользователь использует IE, а для остальных браузеров будет применено просто CSS правило:

.directions .direction a.open-modal{
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: grayscale(1); /* Firefox 4+ */
	filter: gray; /* IE 6-9 */
}

Принцип работы скрипта достаточно прост и элегантен (требует подключенную библиотеку jQuery):

1. размещаем несколько блок-ссылок с фоном;
2. загружаем оригиналы и обесцвеченные копии изображений в одну директорию, где у обесцвеченных копий имя файла формируется по принципу «название»-grey, например: original-name-grey.jpg;
3. прописываем соответствующий CSS-код для позиционирования изображения (а также его размеров).

Теперь, если вы откроете страницу с помощью Internet Explorer 10-11, то вы увидите, что добавляется элемент IMG в блок-ссылку, который перекрывает фон родительского элемента, и исчезает (fadeOut) при наведении на блок.

Посмотреть в живую | Скачать демо

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

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

Если раньше для поддержки мобильных устройств владельцам сайтов предлагалось разработать отдельный проект для мобильных устройств, например на поддомене m.example.com, то сегодня все решается благодаря адаптивной верстке, использование которой стало возможно, с внедрением media query (rules) в CSS3.

Данные медиа запросы/правила — это определенный набор стилей, которые написаны специально под мобильное устройство, имеющее определенный размер (разрешение) экрана. Принцип правил следующий: если устройство имеет размер экрана, подходящее под описанные верстальщиком условия, то применяются соответствующие символы.

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

Как же все таки проверить сайт на наличие адаптивной верстки? Все проще чем кажется: достаточно просто изменить размер окна бразуера и проверить как сайт себя поведет. Пример адаптивной верстки вы изображен на анимированном рисунке ниже (для просмотра кликните по изображению).

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

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

Вот например на этом сайте мобильная версия «включается» поздно, и кнопка «Contact» закрывает собой пункты меню. В данном случае, было бы уместно дописать еще десяток строк CSS-кода для решения данной проблемы (для просмотра кликните по изображению). (сайты были найдены случайным образом, автор не пытается обидеть или оскорбить владельцев или разработчиков сайтов, представленных ниже в виде наглядных примеров)

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

Следующий пример «адаптивности» — сайт вроде адаптивный, но скрол есть, текст вылазит, элементы залазят друг на друга, образуя такую себе кашу (для просмотра кликните по изображению).

Почему нельзя проработать адаптивность для всех размеров? Почему только мобильные, совсем маленькие устройства? (для просмотра кликните по изображению)

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

При создании современного сайта каждый разработчик должен это учитывать! Что такое адаптивный дизайн, резиновая верстка, статика и в чем отличие, в чем преимущества адаптивной верстки, и зачем ее делать? Давайте разбираться!

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

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

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

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

Такой сайт безболезненно откроется на любом устройстве, будет работать корректно, но не все элементы управления (ссылки, кнопки) будут удобны для взаимодействия пользователем. Такой сайт необходимо «зумить» (увеличивать/уменьшать масштаб), скроллить и ловить искомый элемент.

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

Также для более корректного отображения при создании такого сайта разработчик может использовать JavaScript для более точного позиционирования элементов. Данный вид сайтов достаточно интересный, однако сегодня его вытесняет адаптивный дизайн сайтов.

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

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

Некоторые владельцы интернет магазинов создают отдельную мобильную версию сайта, которую размещают на поддомене «m» и создают редирект (переадресацию) для мобильных устройств с основного домена example.com на m.example.com. К сожалению, на данный момент я затрудняюсь ответить в чем преимущество такого решения, но если вы знаете — пишите в комментариях — найдем истину вместе!

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

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

Сегодня, создавая сайт его можно украсить очень красивой анимацией элементов, которые не только будут радовать глаз, но и будут удобными для пользователя — никаких резких движений, появлений, сдвигов. Работая над одним проектом я заметил одну особенность в браузере Сафари: -webkit-transition: all 0.5s ease — не работает!

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

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

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

В поисках нужно информации я перерыл достаточно сайтов, перепробовал несколько костылей, однако обхитрить браузер Apple мне помогло лишь установка параметра -webkit-transition-property, в котором назначил те параметры стилей которые менялись, а именно opacity и margin-top.

Тем не менее, отработка анимации в Safari все-равно оставляет желать лучшего: присутствуют рывки, странно работает исчезновение элемента (каллбек, callback). Возможно вы, уважаемые подписчики что-то еще подскажете, чтобы улучшить отработку анимации на CSS-transition в Safari?

В последнее время я не часто вас баловал новыми записями, и вот наконец-то интересный пост в моей блоге!
Сегодня я бы хотел ознакомить вас с тестом браузеров. Таких как:

• Google Chrome 24.0.131
• FireFox 12.0
• Internet Explorer 9
• Opera 12.12

Недавно я наткнулся на ресурс проверки браузера на работу с HTML5. Сайт оценивает браузер, и после чего выдает оценку в очках, где максимум — 500 очков. И вот какие результаты мне выдал ресурс.

Первое место занимает естественно Google Chrome с 448 очками:

На второе место номинируется… как вы думаете кто? FF? Opera?

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

Замыкать тройку лидеров будет естественно FireFox. Он, с количеством в 340 баллов занимает 3 место:

UPD: не учел последних обновлений FF, но места остаются за своими владельцами! Вот выкладываю обновленный скрин

Четвертым к финишу естественно пришел Internet Explorer 9 (8,7) набрав лишь 138 и по 42 очка соответственно.

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

На эту тему можно много спорить и распинаться, но я скажу, что:

• IE пользуются считанные проценты пользователей интернета
• если наблюдается острая необходимость у заказчика совокупить мозг верстальщика, то N$ решат вопрос

Надеюсь что пост пригодится и будет кому-то еще интересен, линк на ресурс прикрепляю.

Удачной верстки!

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

Итак, приступим!

Для начала мы скачиваем последнюю версию скрипта — tagcanvas version 1.17 для Internet Explorer качаем — excanvas

Добавляем в свою страницу код:

<!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="tagcanvas.js"></script>

Или (если используете jQuery):

<!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.tagcanvas.min.js"></script>

Добавляете на свою страницу елемент canvas:

<canvas width="300" height="300" id="myCanvas">
  <p>Все браузеры, которые поддерживают элемент canvas проигнорируют текст внутри этого абзаца</p>
 </canvas>

Если вам не обязательна поддержкаcanvas

<canvas width="300" height="300" id="myCanvas">
  <p>Anything in here will be replaced on browsers that support the canvas element</p>
  <ul>
   <li><a href="http://www.google.com" target="_blank">Google</a></li>
   <li><a href="/fish">Fish</a></li>
   <li><a href="/chips">Chips</a></li>
   <li><a href="/salt">Salt</a></li>
   <li><a href="/vinegar">Vinegar</a></li>
  </ul>
 </canvas>

Если вы все-таки хотите чтобы ваше облако правильно отображалось и в Internet Explorer’e ниже 9, то поместите свои ссылки ВНЕ блока canvas:

<canvas width="300" height="300" id="myCanvas">
  <p>In Internet Explorer versions up to 8, things inside the canvas are inaccessible!</p>
 </canvas>

 <div id="tags">
  <ul>
   <li><a href="http://www.google.com" target="_blank">Google</a></li>
   <li><a href="/fish">Fish</a></li>
   <li><a href="/chips">Chips</a></li>
   <li><a href="/salt">Salt</a></li>
   <li><a href="/vinegar">Vinegar</a></li>
  </ul>
 </div>

Инициализируйте класс TagCanvas следующим образом подключив его в свою страницу:

<script type="text/javascript">
  window.onload = function() {
    try {
      TagCanvas.Start('myCanvas');
    } catch(e) {
      // something went wrong, hide the canvas container
      document.getElementById('myCanvasContainer').style.display = 'none';
    }
  };
 </script>

Если ваши ссылки не в элементе canvas, то инициализируйте его при помощи следующего выражения:

...
      TagCanvas.Start('myCanvas','tagList');
      ...

Если вы используете jQuery плагин, то инициализируйте его таким образом:

 <script type="text/javascript">
 $(document).ready(function() {
   if( ! $('#myCanvas').tagcanvas({
     textColour : '#ffffff',
     outlineThickness : 1,
     maxSpeed : 0.03,
     depth : 0.75
   })) {
     // TagCanvas failed to load
     $('#myCanvasContainer').hide();
   }
   // your other jQuery stuff here...
 });
 </script>

Вот вроде бы и все! Удачного коддинга!
Оригинал статьи, опции и другая документация по скрипту — тут

Пост написан по просьбе читателя krendel.
Итак, с облаком меток, тегов, ссылок мы разобрались, а как сделать облако изображений? Вот об этом мы сегодня и поговорим.

Все на самом деле просто.
Для того чтобы создать облако изображений на обычном сайте, нам необходимо всего 3 файла:
— сама флешка
— javascript-файл (х2)

Скачать Исходники + Демо

Прописываем на нашей странице наши изображения и ссылки куда они ведут:

<a href="http://nikita-sp.com.ua/">1.gif</a>
<a href="http://nikita-sp.com.ua/">2.gif</a>
<a href="http://nikita-sp.com.ua/2011/05/flash-облако-изображений-на-обычной-html-стра/">3.gif</a>

Берем все наши изображения в теги div с id=»oblapics».

Подключаем два наших js-файла:

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="oblapics.js"></script>

Все! Готово! Смотрим!

Демо

Напоследок:

Файл oblapics.js содержит настройки облака:
— params.wmode — прозрачность фона (transparent — прозрачный, solid — непрозрачный)
— params.bgcolor — цвет фона (задается как в HTML, сокращенная запись не допускается, только из 6 знаков), работает, только если предыдущий параметр = solid
Ширина и высота облака выставляется Вами в последней строчке файла oblapics.js, в настоящий момент там выставлено `350` `350` Если сделаете всё правильно, то получите вот такое облако на свой сайт. Желаю удачи.