Мультибраузерный сайт или как его сделать


Содержание

Как сделать сайт в 10 раз быстрее, чем вручную?

Создание любого сайта отнимает достаточно много времени у вебмастера, и если на СДЛ подготовить, отформатировать и разместить 2-3 статьи в неделю не сложно, то сателлит на 100 статей в неделю – уже сделать не так-то просто. Поэтому я вам сейчас расскажу про то, как сделать сайт в 10 раз быстрее, чем вручную с помощью программы Зеброид, позволяющей автоматизировать процесс создания сайта. Ваша задача лишь – найти тексты для создания сайта, и указать нужные вам настройки, все остальное сделает за вас программа.

Я не забыл, что в прошлой статье я обещал вам рассказать про парсеры картинок, но так как я на Зеброид уже месяц облизывался, и тут эта программа у меня наконец-то появилась, и парсер картинок там уже есть, удержаться от рассказа просто не могу. До этого я пользовался Textkit – она вроде дешевле, но потом начал читать про возможности Зеброид сделать сайт быстрее и проще, и понял – что все, я ее хочу. Создать сайт можно быстро, а потом – останется лишь поднять ТИЦ, для чего вам пригодится база трастовых сайтов – сайтов с большим Тиц, где можно оставить открытую для индексации поискоивками ссылку. С помощью трастовых сайтов также можно осуществлять продвижение сайта. Ладно, хватит лирики, давайте и вам про возможности расскажу вкратце.

Для начала нам нужны статьи для сайта. У меня был десяток статей с уроками для Gimp – заголовки выделяем H2 – чтобы программа автоматически разбила ваш файл на статьи. Рубрики – выделяем H1 . Если вам самим разбивать текст лень – можно потом это сделать в автоматическом режиме с помощью Зеброида. Есть автоматическое распределение статей по категориям – тоже для сателлитов отличная фишка. Через кнопку “Импортдобавляем статьи в программу и получаем такую картинку:

Что мы с этими статьями можем сделать? Можно добавить картинки – либо свои, либо с помощью встроенного парсера картинок – он подбирает похожие из сервиса Google.картинки , Яндекс.картинки или с flicr – через метки или заголовки. При моих настройках через полминуты получаем все статьи с готовыми картинками – для сателлита – лишь бы более-менее по смыслу подходили, так что можно сделать очень быстро, для СДЛ – просто не будем вставлять картинки автоматически, а из спарсенных – выберем вручную, выделяя мышкой. Быстрее сделать сайт с картинками вручную не получится в обоих вариантах.

Что еще нам нужно? Давайте расставим метки. Опять же – если для СДЛ – это можно сделать вручную, выбирая каждую запись и проставляя метки, то для сателлита – можно и автоматически.

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

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

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

Все, осталось опубликовать статьитак быстро создать сайт вручную невозможно. Тут есть две возможности – опубликовать статьи на сайте прямо из программы с помощью XML-RPC – настроили один раз – и можно постоянно публиковать статьи на сайт прямо из программы. Можно создать файл экспорта для самых разных сайтов на CMS, Интернет магазинах, форумах, блогах, статичный сайт сделать. И это гораздо быстрее, чем по одной добавлять статьи на сайт через редактор. Вот весь список:

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

  1. Гибкие настройки и большие возможности. Практически все, что вам нужно – можно реализовать с помощью программы, используя модули работы с картинками, с метками, с категориями, с видео, с датой, с украшательством текста или внутренней перелинковкой проекта.
  2. Лучше, чем Textkit – выделил в отдельный пункт, так как я долго не решался приобрести эту программу потому, что у меня уже была Texkit в Pro версии. Так вот – она и рядом не стоит. Из явно видных отличий: работающий визуальный редактор – в Texkit мне его очень не хватало, дополнительные сервисы, о которых скажу ниже, больше настроек, дополнительные поля – часто нужно, например – для шаблонов WordPress с картинками перед постом – проще сделать то, что захочется.
  3. Возможность создать форум, а не только обычный сайт, Интернет магазин, добавить комментарии – не для всех CMS, но для WordPress – можно сразу же создавать комментируемый блог-сателлит, если вы планируете его потом монетизировать в том же Ротапосте – имитация живого блога дает большое преимущество.
  4. Парсер картинок – уже упоминал – очень удобная вещь. Теперь не нужно подбирать к каждой статье картинки вручную – парсер все за вас сделает, вам останется лишь мышкой ткнуть в ту картинку, что вам больше нравится, для СДЛ проектов. Вовсе не обязательно хранить картинки на сервере – можно с помощью программы автоматически залить их на тот же Fotoradikal , а в статьях использовать только ссылки на них – удобно для экономии места.
  5. Встроенный переводчик – подключенный сервис перевода текстов через Google Translate – можно делать сателлиты на текстах с иностранных сайтах, где-то я читал, что самый читаемый текст получается при переводе с украинского – можно просто накачать украинских статей, перевести их – вот вам и готовый сателлит.
  6. Встроенный синонимайзер – еще одна возможность уникализировать статьи на вашем сайте – это использование синонимайзера. Словарь синонимов – можно добавить свой собственный, какой в сети получше найдете. Также добавлена классная вещь – проверка уникальности статей по Яндексу – уникализировали статьи – проверьте себя – не нужно ли что-то еще получше обработать.
  7. Реализация новых идей. В самой программе есть пункт “ Проголосуй за обновления ” – где можно распределить выданные вам 20 очков между теми дополнениями, что вам кажутся полезными или добавить свой пункт. Те, что наберут большинство очков – появятся в следующих версиях программы, которые выходят очень часто. Правда, обновления платные – год обновлений стоит 15% от цены программы, но оно себя оправдывает, так как постоянно появляются какие-то новые полезные фишки.

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

Подпишись на обновления блога по RSS, Email, twitter!

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

Самый распространённый способ – создание нескольких языковых копий сайта на поддоменах или в папках с названиями вроде ru, en, ua, de. Такой способ хорошо подходит для использования во связке с CMS и хостингом. То есть создается нужное количество почти одинаковых сайтов на поддоменах или в отдельных папках основного домена. Это самый надёжный способ, никакой путаницы, но он технически сложен в реализации, особенно в рамках CMS.

Создать нормальный мультиязычный сайт позволит далеко не каждый сервис. Мы отобрали несколько сайтбилдеров, которые способны хорошо решить эту задачу: uCoz, Wix, uKit, SITE123, Tilda, Ucraft. Это не рейтинг по убыванию или возрастанию. Мы хотим показать особенности реализации мультиязычных сайтов в облачных конструкторах. Также из угла CMS выйдет WordPress для сравнения подходов.

Создание мультиязычного сайта в uCoz

uCoz – самый популярный конструктор на просторах Рунета. Обладает мощным функционалом, позволяет воплотить в жизнь проект любой сложности – от сайта-визитки до огромного интернет-гипермакрета. Фактически это полноценная облачная CMS идущая в комплекте с хостингом и конструктором. Есть полный доступ к исходному коду, FTP, PHP, SEO инструментам и средствам поискового продвижения.

Для создания двуязычного сайта-визитки, состоящего всего из нескольких статичных страниц, наиболее простым и быстрым вариантом будет дублирование всех страниц сайта на втором языке используя «Редактор страниц». Если языков больше двух, в файловом менеджере лучше создать отдельные папки en, fr, de и загрузить в них языковые копии страниц в htm формате.

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

Коротко опишем схему создания сайта на нескольких языках:

  1. Для каждого языка отдельный сайт
    Первым делом нужно создать три сайта: первый будет русскоязычным – site.ucoz.ru (в настройках выбираем русский язык сайта), второй на английском – site.ucoz.com (язык выбираем – английский), третий на немецком – site.ucoz.de (язык – немецкий). Их нужно сделать полностью идентичными: с одинаковыми шаблонами, модулями, структурой, настройками.
  2. Объединение доменов
    Второй шаг – объединить три сайта под одним доменом. Для этого к русской версии покупаем и прикрепляем главное доменное имя mydomain.ru. Затем, в панели управления делаем два поддомена вида: en.mydomain.ru и de.mydomain.ru. К сайту site.ucoz.com прикрепляем en.mydomain.ru, к site.ucoz.de – de.mydomain.ru. В итоге, в глазах посетителей такие сайты станут единым целым под общим доменом, между которыми можно переключаться.
  3. Добавление переключателя языков
    В завершение, остается лишь проставить в шапку всех сайтов переключатель языков, в который будут зашиты ссылки на языковые версии сайтов. Переключатель может быть в виде картинок или выпадающего списка.

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

Создание мультиязычного сайта в Wix

Wix – международный конструктор для создания стильных сайтов-визиток, портфолио и блогов. Базируется на визуальном редакторе, не требует знаний программирования. Функционал рассчитан на неопытных новичков, платформа предлагает более 500 дизайнерских шаблонов различной тематики.

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

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

Теперь необходимо из App Market добавить на сайт приложение Wix Multilingual, перейти в его настройки и:

  1. В разделе «Duplicate Pages» сделать копии страниц сайта либо подтвердить, что они уже готовы;
  2. В разделе «Translate Pages» нажать на «I did it», если у вас копии страниц уже переведены. Если нет, тогда добавьте перевод и подтвердите действие;
  3. В разделе «Create Menu» подтвердите создание меню из кнопок через «I did it»;
  4. В разделе «Redirect Pages» нажмите «Start» для активации перенаправлений на страницы при смене языка;
  5. Далее нужно выбрать язык домашней страницы и языки локализаций во вкладке «Select languages»;
  6. Теперь нужно настроить перенаправления в «Redirection Settings». Устанавливаем язык сайта, отображаемый по умолчанию для тех, чей язык браузера отсутствует в локализациях. Как правило, нужно выбрать английский. Перенаправления можно задать по одному из принципов: автоматическое переключение в зависимости от языка браузера либо посетитель сам выберет язык через иконку со флагом;
  7. Во вкладке «Language Picker» можно настроить внешний вид кнопок для смены языка (название, фон, границы, разделитель, шрифт).

Если всё сделано верно, получится весьма удобный мультиязычный сайт. Главное – качественный перевод страниц. Каждый раз после добавления новой страницы нужно будет создать её дубль с переводом и в приложении Wix Multilingual подключать её, используя первые 4 пункта инструкции.

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

Создание мультиязычного сайта в uKit

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

uKit крайне комфортный вариант для создания мультиязычного сайта компании. Все заботы по техническому обеспечению мультиязычности берёт на себя техподдержка. Бесплатно. Для новичков – идеально.

Когда у вас будет готов сайт на основном языке и переводы его страниц, нужно написать в службу поддержки через обратную связь в личном кабинете. В рамках вашего аккаунта саппорт сделает копию сайта на поддомене основного домена. Локализации будут выглядеть как en.site.org, de.site.org и т.д. Их может быть сколько угодно.

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

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

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

Создание мультиязычного сайта в SITE123

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

При добавлении нового языка можно выбрать под него флаг для отображения в шапке сайта и регион для корректного отображения контента для разной аудитории. Можно также разделить поддоменами языковые версии сайта – всё удобно и просто.

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

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

Создание мультиязычного сайта в Tilda

Tilda позволяет создавать сайты, поддерживающие до 2-х локализаций. Например, английскую и немецкую для русскоязычного сайта. Можно сделать их в виде разных сайтов, а можно объединить 3 языка в рамках одного сайта. Второй вариант подходит только для одностраничных сайтов.

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

Одностраничный сайт может обойтись и без шапки (части сайта, которая будут видна на каждой странице, и тоже требует перевода). Можно создать 2-3 языковые версии одностраничника и в содержании блока меню указать ссылки на странице и языки – так же, как и в 1 случае.

В Tilda локализация организована не очень удобно из-за необходимости постраничного дублирования сайтов. В остальном – вполне рабочий вариант.

Создание мультиязычного сайта в Ucraft

В Ucraft Мультиязычность реализована из коробки. В «Дашборде» есть пункт «Языки», английский язык сайта активирован по умолчанию. Можно добавить любой язык из огромного списка, код, название и приставка для URL будут сгенерированы автоматически. Все служебные надписи сайта получат перевод на выбранный язык автоматически.

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

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


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

Создание мультиязычного сайта в WordPress

CMS WordPress умолчанию не поддерживает мультиязычность. Её можно реализовать на поддоменах, скопировав сайт нужное количество раз и переведя его контент. Это стандартный дедовский метод. Сложный в реализации для новичков, поскольку придётся прибегнуть к использованию скриптов, но зато надёжный.

Можно также воспользоваться каким-нибудь плагином, варианты есть, но большинство хороших платные. Мультиязычность в таком случае будет вынесена в отдельный блок управления. Удобно ли это? Да, для тех, кто знает, как правильно обращаться с CMS. Для новичков – категорически нет.

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

Выводы

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

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

Реальнее всего добиться результатов можно при использовании конструкторов сайтов. uCoz даёт большую гибкость управления процессом, но нужно всё делать руками. В uKit, напротив, техподдержка сама сделает почти всё бесплатно (кроме переводов, понятно). SITE123и Ucraft поставляются с удобными интерфейсами для настройки мультиязычности. Пользователи Wix, желающие добиться внимания иностранной аудитории, тоже смогут это сделать при помощи фирменного приложения. Tilda менее удобна в настройке по сравнению с одноклассниками, но тоже позволяет делать мультиязычные сайты. WordPress – хардкорный вариант для тех, кто не боится тяжёлой работы и дополнительных вложений средств.

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

Илон Маск рекомендует:  Что такое код deletedc

Кроссбраузерность сайт — что это, проверка отображения сайтов во всех браузерах

Привет читатели seoslim.ru! Ничего загадочного в слове “кроссбраузерность” нет, часто новички задаются вопросом, что это за понятие.

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

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

Что такое кроссбраузерность

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

Происходит такое довольно часто, так как алгоритмы обработки каскадных таблиц css, а также html-кодов в них могут значительно отличаться друг от друга.

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

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

Начинающие разработчики могут сделать ручной тест, на наиболее используемых Опере, Мозилле, Гугл Хром, IE.

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

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

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

Сервисы для тестирования сайта в браузерах

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

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

Browsershots Итак, начнем с наиболее доступных сайтов. По праву считается, что browsershots.org в этом списке можно поставить на первое место среди бесплатных вариантов.

Сразу при переходе у вас открыта вкладка “Browser Compatibility Test”, это и есть проверка на кроссбраузерность.

Для этого в строку необходимо ввести url вашего сайта и нажать на кнопку “Submit”:

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

После нажатия на кнопку “Submit” вы встанете в очередь на проверку, появится вот такое сообщение:

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

Дополнительно вы можете получить приоритет на час, если нажмете на “Expire in 60 minutes for Priority Users”.

Параллельно вы увидите, как появляются скриншоты уже проверенных версий, если нажать на “Details”, можно проследить текущее состояние в деталях, а также сколько потрачено минут на каждую:

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

Также совершенно спокойно вы можете их скачать и держать у себя на заметке.

Viewlike Следующий сайт, который можно однозначно порекомендовать — www.viewlike.us . С помощью сервиса вы также сможете оценить успешность юзабилити тестируемого ресурса и проверить скорость его работы.

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

Вводим адрес в специальную строку, нажимаем “Test now!”:

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

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

Заходим на страницу crossbrowsertesting.com , небольшая сложность здесь в том, что для использования возможностей сервиса нужно зарегистрироваться, а для начала нажмите “Start Your Free Trial”:

Для этого требуется указать свой адрес электронной почты и новый пароль, нажать “Create Your Free Account”:

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

При этом в использование дается ограниченное количество времени тестирования — всего 60 минут.

Но начнем проверку, сделать это просто — после подтверждения аккаунта вы оказываетесь в разделе “Start a Screenshot Test”.

Проводится она на базе Windows и Mac, браузеры Chrome, FireFox, IE, Opera, Safari, анализ в мобильной версии предоставляется в отдельной вкладке.

В строку вводим адрес нужного вам сайта, как и в предыдущих случаях:

Всего потребовалось порядка 2-3 минут для анализа, теперь можно подробно увидеть полученные скриншоты, а нажав на “Layout Differences”, вы увидите различия в макете, которые обнаружила система.

Больше всего разногласий заметно при исследовании браузера Internet Explorer:

Все полученные скриншоты доступны для скачивания, для этого нажмите “Download” в верхнем правом углу, материалы сохраняться в формате .zip.

А для подробного анализа воспользуйтесь указанной ссылкой под картинкой — “Layout Differences”, при переходе становится доступен подробный анализ элементов:

Итак, сервис прост и удобен в использовании, но, к сожалению, бесплатен только на недельный период.

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

Quirktools Довольно интересный сервис по адресу quirktools.com , не требуется регистрации или оплаты каких-либо функций.

Перед вами просто строка, куда необходимо ввести адрес:


Фактически это средство для эмуляции большого количества устройств, разрешения могут подбираться по ходу:

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

Browserstack Если ничего из перечисленного выше вам не понравилось, попробуйте перейти по ссылке www.browserstack.com и поработать здесь, вводим адрес:

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

Нажимаю “Free Trial”, ввожу адрес электронной почты и пароль, все как обычно.

После регистрации выбираем вкладку “Live”, открывается менюшка со всеми доступными платформами и браузерами.

То, что выделено ярким цветом, доступно для бесплатной версии, учтите, что всего на тестирование дается 30 минут.

Например, выбираю браузер Chrome, загружается программа последней версии:

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

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

Browserling Еще один вариант — www.browserling.com , удобен тем, что сразу есть возможность выбрать из выпадающего списка необходимую для тестирования операционную систему, браузер и его версию, далее кликнуть на “Test now!”:

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

Для смены браузера и его версии будет достаточно нажать на значок (в данном случае Chrome), а когда все готово к новой проверке, запустите ее кнопкой “Run”.

Turbo Следующий сервис, на который можно обратить внимание, находится на сайте turbo.net в подразделе Browser Sandbox.

Достаточно удобно все устроено — для прохождения теста вы сразу выбираете конкретную платформу и версию браузера, для проверки нужно нажать “Run”.

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

Предварительно нужно зарегистрироваться (можно сначала нажать, а потом уже сделать это).

Ввожу новый логин и адрес электронной почты:

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

Те, кто хочет постоянно пользоваться сервисом, стоит скачать прилагающееся приложение, точнее расширение, для этого нажмите на “Install Turbo.net” в нижней части страницы.

Browsera Один из иностранных ресурсов — www.browsera.com , ничего сложного в работе с ним нет. Для начала работы нажмите соответствующую команду на главной странице:

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

Для тестирования задаете все необходимые параметры, самое главное — адрес страницы, нажимаете “Run Test”.

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

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

  • Еще один конкурент — saucelabs.com , зайдите и сюда.
  • А тем, кого интересует читабельность сайта и прочих характеристики относительно только IE, советую обратиться к ресурсу netrenderer.com .

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

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

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

Время чтения: 17 минут Нет времени читать? Нет времени?

Интернет стирает границы: вы можете продавать продукт и распространять информацию для жителей Москвы, Мадрида и Сан-Диего, работая в Находке или даже в Окленде. Однако вам придется решить ряд проблем. Одна из них — желание аудитории из разных стран мира читать контент на разных языках. Еще одна — потребность пользователей, которые могут говорить на одном языке, получать релевантную их региону информацию. Например, англоязычные жители Австралии, Великобритании и ЮАР предпочитают видеть стоимость вашего продукта в австралийских долларах, фунтах стерлингов и рандах соответственно. Эти проблемы решает мультиязычное и мультирегиональное SEO.

Зачем необходимо мультиязычное SEO

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

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

Чтобы сделать блог максимально удобным для аудитории, вам придется заняться мультиязычным SEO.

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

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

Когда необходимо мультирегиональное SEO

Представьте себя боссом международной софтверной компании. Нет, вы пока не Билл Гейтс, будьте скромнее. Ваша фирма создает платную программу, которой пользуются жители России, Украины и Белоруссии. Офис с программистами и продавцами находится в Москве. Здесь вы пишете код, продаете продукт и поддерживаете клиентов.

Допустим, по техническим причинам поддержка украинских и белорусских клиентов обходится вам на 5 % дороже, чем российских. Поэтому жителям Украины и Белоруссии ваша программа обходится на 5 % дороже, чем жителям России. Кроме того, жителям России вы показываете цену в рублях, а жителям Украины и Белоруссии в гривнах и белорусских рублях соответственно. Наконец, функциональность программы для жителей каждой из трех стран незначительно отличается.

У вас нет возможности создать украиноязычную и белорусскоязычную версии сайта. Однако вам необходимо показывать российским, украинским и белорусским клиентам разную информацию. Жители России, Украины и Белоруссии должны видеть актуальную цену программы в валюте страны, условия обслуживания и фактическую функциональность продукта, который они покупают.

Вам придется заниматься мультирегиональным SEO.

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

Под мультирегиональным SEO подразумевается предоставление пользователям информации, соответствующей их месту пребывания. Например, жителям России вы можете показывать цену продукта в рублях, а жителям Украины в гривнах. Более того, вы можете предлагать покупателям из разных стран разные продукты.

Обратите внимание, в мультирегиональное SEO может входить мультиязычное SEO. В этом случае вы обеспечиваете жителю Белоруссии доступ к информации о продукте и цене, релевантной для этой страны. Эта информация отображается на русском языке для русскоязычного жителя Гродно и на белорусском языке для белорусскоязычного жителя Минска. В этом случае удобнее использовать термин «мультирегиональное и мультиязычное SEO».

Для удобства описания можно условно выделить три понятия:

  1. Мультиязычное SEO позволяет показывать одинаковую информацию на разных языках. Желательно, чтобы поисковая выдача и страница сайта отображалась в соответствии с настройками браузера и предпочтениями пользователя, а не его текущим местоположением.
  2. Мультирегиональное SEO позволяет показывать пользователям информацию, адекватную их месту проживания и пребывания. Например, жители Украины хотят видеть цену в гривнах, а жители Белоруссии в белорусских рублях.
  3. Мультирегиональное и мультиязычное SEO. В этом случае вы показываете пользователям информацию, соответствующую их месту проживания, на удобном для них языке.

Создаем мультиязычный сайт

Чтобы создать мультиязычный сайт, вам необходимо решить следующие задачи:

  • Перевести меню CMS и контент ресурса на выбранные языки.
  • Выбрать подходящую структуру URL.
  • Обеспечить языковой таргетинг.

Перевод меню CMS и контента

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

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


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

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

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

Выбор структуры URL

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

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

  • Подкаталоги домена верхнего уровня. В этом случае URL выглядят так: vashsite.ru, vashsite.ru/ua/, vashsite.ru/by/. Это самый простой вариант, не требующий дополнительных расходов. Выбирайте его, если администрированием всех языковых версий сайта занимается одна команда.
  • Субдомены домена верхнего уровня. В этом случае URL выглядят так: vashsite.ru, ua.vashsite.ru, blr.vashsite.ru. Обратите внимание, за подключение субдоменов хостинг-провайдер может выставить вам дополнительный счет. Структура URL с субдоменами позволяет работать с фактически независимыми версиями сайта. Поэтому этот вариант лучше подходит для мультирегионального или мультиязычного и мультирегионального сайта.
  • Разные домены. В данном случае вы получите такие URL: vashsite.ru, vashsite.ua, vashsite.by. Вам придется платить за каждый домен отдельно. Данный вариант удобен для транснациональных компаний, которые имеют представительства в разных странах. Языковые версии сайтов фактически не связаны друг с другом.

Языковой таргетинг

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

Атрибут hreflang сообщает поисковым системам язык страницы, на которую указывает ссылка. Например, если на вашем сайте есть страницы на русском, украинском и белорусском языке, в их коде должны присутствовать атрибуты локализации:

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

Способы добавления атрибутов hreflang в заголовки страниц сайта зависят от «движка», который вы используете. Если ваш ресурс работает на WordPress, воспользуйтесь плагинами:

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

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

Если вы хотите показывать какие-либо страницы всем пользователям независимо от их языковых предпочтений, отмечайте их атрибутом hreflang со значением x-default. Например, такая разметка подходит для главной страницы сайта, если она изменяет язык в зависимости от местоположения пользователя или его языковых настроек. Чтобы указать атрибут hreflang со значением x-default с помощью плагина Language Selector Related, выберите соответствующую опцию в режиме редактирования страницы.

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

Создаем мультирегиональный сайт

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

  • Выбрать подходящую структуру URL.
  • Создать страницы и контент для представителей разных регионов.
  • Обеспечить страновой таргетинг.

Выбор структуры URL

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

Создание страниц и контента и обеспечение странового таргетинга

Способы создания страниц для разных регионов отличаются для разных CMS. Если вы используете WordPress, воспользуйтесь платным плагином WPML или бесплатной связкой плагинов Multilanguage и Language Selector Related. Вы будете использовать их для создания региональных страниц с разным контентом на русском языке, а не для дублирования одинакового контента на русском, украинском и белорусском языках.

Представьте, что вы делаете карточку товара с описанием на русском языке для жителей России, Украины и Белоруссии. Региональные версии страниц отличаются только ценой и валютой расчетов. Действуйте так:

  • В режиме редактирования страницы добавьте релевантный регионам контент. Чтобы переключаться между региональными версиями страниц, пользуйтесь вкладками «Русский», «Украинский» и «Белорусский язык».

В разделе Related links укажите URL региональных версий страниц, выберите русский язык и соответствующую страну.

В заголовке каждой региональной версии страницы вашего сайта должны присутствовать следующие значения атрибута hreflang:

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

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

Создаем мультирегиональный и мультиязычный сайт

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

  • Выбрать структуру URL.
  • Создать региональные версии страниц на выбранных языках.
  • Обеспечить географический и языковой таргетинг аудитории.

Выбираем структуру URL

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

Создаем региональные версии страниц на разных языках и обеспечиваем таргетинг

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

  • На русском, украинском и белорусском для жителей России.
  • На русском, украинском и белорусском для жителей Украины.
  • На русском, украинском и белорусском для жителей Белоруссии.

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

Илон Маск рекомендует:  Что такое код sector

Способ создания мультирегиональных и мультиязычных версий страниц зависит от выбранной CMS. Если вы пользуетесь WordPress, обратитесь к хостинг-провайдеру и зарегистрируйте региональные субдомены основного домена. После этого установите WordPress на поддомены. Теперь вы можете создать семь версий страницы с помощью описанной выше связки плагинов Multilanguage и Language Related Selector. Они будут иметь URL такого вида:

  • vashsite.ru/kupit-mielofon/
  • vashsite.ru/ua/prydbaty-mielofon/
  • vashsite.ru/by/kupits-mielofon/
  • ua.vashsite.ru/prydbaty-mielofon/
  • ua.vashsite.ru/ru/kupit-mielofon/
  • by.vashsite.ru/kupits-mielofon/
  • by.vashsite.ru/ru/kupit-mielofon/

С помощью атрибута hreflang вы должны таргетировать версии страниц по языкам и странам. Каждая версия должна включать такие значения:

Если на сайте есть страницы, отображающиеся всем пользователям по умолчанию, разметьте их атрибутом hreflang x-default.

Вы создали мультиязычный и мультирегиональный сайт, аудитория которого таргетируется по языку и местоположению. Благодаря этому жители целевых стран могут пользоваться вашим ресурсом на удобном им языке. Например, если белорусскоязычный пользователь из Смоленска введет в поисковую строку запрос «купіць міелофон», в выдаче он увидит ссылку на белорусскоязычную версию страниц для жителей России: vashsite.ru/by/kupits-mielofon/. Если такой же запрос введет житель Могилева, он увидит в выдаче ссылку на белорусскоязычную версию страницы для жителей Белоруссии: by.vashsite.ru/kupits-mielofon/.

Как помочь поисковым системам определить региональную принадлежность сайта

Поисковые системы самостоятельно определяют язык сайта по контенту и атрибутам hreflang. Вы можете проверить корректность использования атрибутов в Search Console Google. Для этого выберите меню «Поисковый трафик – таргетинг по странам и языкам – язык». Здесь вы увидите сообщения об ошибках, которые вы могли допустить при разметке страниц. В меню «Страна» вы можете выбрать целевую страну сайта. Не используйте эту опцию, если ваш сайт ориентирован на несколько стран.

Чтобы помочь определить региональную принадлежность сайта «Яндексу», укажите контактные данные представительств вашей организации. Например, если на региональных версиях страницы «Контакты» указаны адреса российского, украинского и белорусского офисов, поисковая система отнесет ресурс к соответствующим регионам. Если ваше представительство работает только в Москве, а сайт работает для жителей трех стран, укажите отдельные контактные телефоны и адреса электронной почты для жителей Украины и Белоруссии. В меню «Вебмастера» «География сайта – регион сайта» вы можете вручную указать регион и URL подтверждающей страницы.

Вместо резюме: на что обратить внимание при создании мультирегиональных и мультиязычных сайтов

Если ваша аудитория живет в разных странах и разговаривает на разных языках, обратите внимание на следующие моменты:

  • Вы можете создать мультиязычный, мультирегиональный или мультиязычный и мультирегиональный сайт.
  • Вам придется решить техническую задачу, связанную с созданием языковых и региональных версий страниц. Способ решения задачи зависит от функциональности вашей CMS.
  • Выбор структуры URL зависит от задач, которые решает ваш проект. Например, если вы показываете пользователям из разных стран одинаковый контент на разных языках, остановитесь на варианте с подкаталогами или субдоменами. Если вы предлагаете жителям разных регионов разный контент, подумайте о покупке региональных доменов и независимом продвижении сайтов.
  • Используйте атрибуты hreflang, чтобы таргетировать аудиторию по языкам и странам. Вы можете указывать их в заголовках страниц или в файле Sitemap. Чтобы корректно указывать значения hreflang, пользуйтесь генератором и валидатором тегов.
  • Обязательно размечайте атрибутами hreflang все версии страниц. Если вы укажете язык и регион на украинской версии страницы, но не сделаете этого на белорусской, разметка не будет работать.
  • Используйте значение hreflang x-default для версий страниц, которые отображаются всем пользователям по умолчанию.
  • Обеспечьте читателям возможность самостоятельно выбирать язык и/или страну в меню сайта.


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

13 сервисов тестирования сайта в разных браузерах и устройствах (обновлено)

Тестирование сайта в разных браузерах и устройствах

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

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

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

1. Browsershots (бесплатно/платно)

Browsershots — это веб-сервис, который делает скриншоты вашего сайта в разных операционных системах и браузерах ( всего доступно более 130+ браузеров и платформы: Linux, Windows, Mac OS, Gecko, KHTML/WebKit). Причем, можно, дополнительно выставлять некоторые опции: разрешение экрана, глубину цвета, включить или выключить Javascript, Java, Flash. Это удобный, хоть и довольно медленный способ проверить свой сайт сразу во многих браузерах. Когда вы вводите адрес вашего сайта в строку для проверки, он ставится в очередь на тестирование. После этого скриншоты будут появляться на итоговой странице по очереди. Это может занять от 5 минут до 2 часов. В бесплатной версии все происходит довольно медленно. Кроме того, одна сессия (запрос) может длиться только 30 минут.

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

Однако, хоть данный сервис заявлен как бесплатный, в нем есть и платные услуги. За 29.95 у.е. в месяц вы получите так называемую «приоритетную обработку«: скриншоты будут появляться намного быстрее, чем в бесплатной версии, сможете получить от 30 до 50 скриншотов всего за 5 минут. Кроме того, ваши скриншоты будете видеть только вы, тогда как в бесплатной версии они в итоге выкладываются в общую ленту.

2. Adobe

До марта 2013 года у Adobe был отличный бесплатный сревис Adobe BrowserLab для тестирования сайта в разных браузерах и ситемах. Но теперь он закрыт и вместо этого представлен новый сервис Adobe Edge Inspect CC.

Adobe Edge Inspect CC — это продукт, входящий в принципиально новую организацию Adobe продуктов — в облако Adobe Creative Cloud. Получить аккаунт в данном облаке можно по нескольким пакетам, все они платные. Средний стоит 49,99 у.е. в месяц. Бесплатно Adobe Creative Cloud можно попробовать 30 дней.

3. IE NetRenderer (бесплатно)

IE NetRendererбесплатный онлайн-сервис только для браузера Internet Explorer, который дает возможность проверить ваш сайт под браузером Internet Explorer версий: 9, 8, 7, 6, 5.5.

Тут все просто: вводите адрес своего сайта, выбираете версию IE и тут же получаете скриншот.

4. IE Tester (бесплатно)

IETester — это абсолютно бесплатное приложение только для браузера Internet Explorer, которое позволяет локально на вашем компьютере просматривать сайт в разных версиях Internet Exlporer (версии: 10, 9, 8, 7, 6, 5.5) под операционными системами Windows 7, Vista и XP.

Для этого нужно скачать IE Tester и установить у себя на компьютере. Найти последнюю версию IE Tester можно тут: http://www.my-debugbar.com/wiki/IETester/HomePage.

5. BrowserСam (платно)

BrowserСam — очень мощный платный онлайн-сервис для тестирования сайтов под любым браузером и любой платформой. Одна из главных «фишек» данного сервиса в том, что на нем предоставляется удаленный доступ (через VNC) к компьютерам с уже установленными ОС и браузерами, в которых вы можете тестировать свой сайт. Кроме того есть такая важная опция как тестирование под iPhone OS, Android, Blackberry, Windows Mobile. Можно также тестировать е-мейлы на разных устройствах, что очень важно для рассылочных компаний.

Цены стартуют от 19,95 у.е . в день в зависимости от функционала.

6. CrossBrowserTesting (платно)

CrossBrowserTesting — также очень функциональный платный сервис, где вы можете проверить за несколько минут сайт в разных браузерах, в разных операционных системах, на разных устройствах (поддерживается более 100 вариантов проверок, в том числе тестирование под Android, iPad, iPhone ) .

Ценовая политика выгодней и гибче, чем у предыдущего сервиса BrowserСam: базовая цена стартует от 29.95 у.е. в неделю . Кроме того, дается бесплатный тестовый триальный период в 7 дней на каждый из трех пакетов, правда с несколько с ограниченной квотой, нежели в платной версии.

7. Litmus (платно/бесплатно)

Litmus — онлайн-сервис, который предоставляет возможность тестирования сайта на разных браузерах. Кроме предоставления скриншотов, заодно проверяет валидность html и css кода. Особенность его в том, что он в основном ориентирован на тестирование е-мейлов в разных браузерах и на разных устройствах. Есть возможность протестировать е-мейл в 30 разных почтовых клиентах и другие важные функции, такие как аналитика для е-мейлов.

Платная версия сервиса предполагает три пакета: базовый (49 у.е. в месяц), плюс (99 у.е. в месяц), премиум (299 у.е. в месяц.) Бесплатная триал-версия действует 7 дней.

8. СloudTesting (платно)

CloudTesting — платный онлайн-сервис, который предоставляет возможность функционального тестирования кроссбраузерности сайта. Вы записываете сценарий поведения пользователя с вашим браузером и Selenium IDE, загружаете его, после чего Cloud Testing будет выполнять этот сценарий в нескольких браузерах и операционных системах. Затем он предоставляет скриншоты.

Ценовая политика стартует от 99 у.е. в месяц .

9. Mogotest (платно)

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

Ценовая политика стартует от 15 у.е. в месяц для физических лиц. При этом есть возможность бесплатно тестировать выбранный пакет (триальная версия) 14 дней.

10. Multi-Browser Viewer (платно)

Multi-Browser Viewer — платное приложение, которое работает с десктопными и мобильными браузерами и включает в себя 26 виртуализируемых браузеров, 5 мобильных браузеров (в том числе iPhone и IPad) и 61 скриншот-браузер (с их помощью можно видеть, как визуализируются страницы, но нельзя видеть результат взаимодействия пользователя с сайтом).

Ценовая политика Multi-Browser Viewer составляет 139,95 у.е. за однопользовательскую лицензию и включает один год использования продуктов и обновлений. Кроме того доступна бесплатная триал-версия программы (14 дней).

11. Sauce Labs (бесплатно/платно)

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

Сервис предоставляет платные пакеты (цены стартуют от 49 у.е. в месяц ), кроме того, есть бесплатная квота на тестирование: 200 минут в месяц и позволяет создавать тесты автоматизированного тестирования в браузерах (используется Selenium)

12. Spoon (бесплатно)

Spoon — это онлайн-сервис эмуляции программ. Предоставляется бесплатная возможность запуска Firefox, Chrome, Opera и Safari для пользователей Windows. Доступны разные версии браузеров Firefox, Chrome, Safari, Opera. Технически, Spoon поддерживает виртуализацию IE, но эта возможность отключена по требованию Microsoft.

13. Browsera (бесплатно/платно)

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

Бесплатная версия включает в себя довольно ограниченное число браузеров и низкое разрешение. Платные пакеты стартуют начиная от 39 у.е. за 14 дней и от 49 у.е. до 99 у.е. за месячную подписку.

Браузерные плагины для вэб-разработчиков и не только.

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

Не буду выделять какой-то и участвовать в “браузерных войнах”, сейчас по определенным причинам использую Google Chrome. На таком же движке (Chromium) есть еще куча популярных и не очень интернет-проводников: Opera, Firefox, Яндекс Браузер, Amigo и т.д., и это означает, что если постараться то можно установить все перечисленные ниже плагины и для них. Разберем полезные плагины на примере Google Chrome: скачиваем, запускаем, жмем три точки справа вверху, далее – Дополнительные инструменты – Расширения – Ещё расширения и в поиске по магазину вбиваем LastPass.

Освобождаем память – LastPass (последний пароль) – это мега полезное дополнение позволяет не держать в голове кучу паролей, а запомнить всего один – от LastPass. Программа позволяет запоминать пароли и адреса к web страницам, в удобном виде безопасно хранить и автоматически заполнять их в различных формах. Есть менеджер автозаполнения форм, куда вы сможете написать свою карточку и плагин будет автоматически заполнять поля на сайтах. Программа подходит для многих браузеров и имеет приложение для мобильных телефонов, что согласитесь очень удобно.

Для удобства хранения закладок я использую очень удобный и мультибраузерный плагин Live Start Page. Этот плагин из серии Speed Dial позволяет в красивом интерфейсе с живыми обоями, коих найдется на любой вкус, удобно управлять закладками (импорт/экспорт/синхронизация), разбивать на группы ( у меня например такие: популярные, стартовая, создание сайтов, анализ, раскрутка, биржы ссылок, web-дизайн, программирование PHP, JavaScript, CSS, HTML … ), можно делать заметки и даже медитировать – вообщем это красиво, удобно и полезно. Также из плюсов – в Google Chrome работает голосовой поиск, и это приятно, 21 век все же.

Бывает так: куча открытых вкладок, случайно не ту закрыл, а еще если несколько, эту проблему решает плагин для Chrome – Sexy Undo Close Tab, в других браузерах есть аналоги ищем – Undo Close.

Менеджер сеансов Session Buddy позволяет сохранять и восстанавливать открытые вкладки. Восстановит открытые вкладки после сбоя или когда ваша ОС перезагрузит компьютер. Управление открытыми окнами и вкладками в одном месте.

Надоедливую рекламу поможет убрать мультибраузерный блокировщик AdBlocker Ultimate – он убирает всю рекламу, не имеет белых списков, в отличии от конкурентов. Не забудьте отключить его на ваших сайтах, сожрет баннеры и у вас.) Тут стоит отдельно сказать про браузер Opera – в него подобные блокировщики не нужно устанавливать, нужно всего лишь зайти в настройки и включить встроенный, к тому же Opera имеет бесплатный VPN, что помогает заходить на заблокированные страницы (к примеру ok.ru или vk.com в Украине.)

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

Немного о картинках, точнее о плагинах для них. Если на вашем сайте есть уникальные картинки, которые по праву принадлежат только вам и вы не хотите, чтобы в поиске по этой картинке выдавались ссылки на чужие сайты, поймать вора поможет плагин кто украл мои картинки, после установки появится пункт в контекстном меню, который поможет найти дубликаты. А если наоборот вы хотите позаимствовать изображения с чужого сайта, в этом деле поможет плагин загрузчик картинок – Image Downloader, он вытягивает все изображения, даже из CSS.

Плагин SearchPreview позволяет улучшить ваши страницы результатов поиска, вставляет изображения предварительного просмотра сайта (эскизы) сайтов. Поддержка Google, DuckDuckGo, Yahoo и Bing. Теперь о грустном – SEOquake с ним не дружит, потому используем по очереди.


Плагины для web-разработчика.

Расширение Web Developer добавляет в браузер кнопку c различными инструментами веб-разработчика. Это настоящий комбайн или швейцарский нож, который имеет тучу всего полезного: работа с cookie, стилями CSS, JS, формами, картинками, ссылками, покажет палитру сайта, поможет в тесте на мобильную версию, проверит сайт на ошибки кода при помощи онлайн валидаторов. Позволяет добавлять свои инструменты. Вообщем must have. Из минусов – отсутствие русской локализации в последней версии. Расширение доступно для Chrome, Firefox и Opera.

Rds bar – это мультибраузерная панель инструментов для быстрого анализа различных SEO-показателей сайта, таких как PR, ТИЦ, индексация страниц и т.д., кроме того в настройках можно включить подсветку noindex и nofollow, внешних ссылок и скрытых блоков, плагин умеет показывать метрики и в поисковой выдачи.
Очень важно* кликнуть по значку с бомбой и включить пункт – проверять по кнопке, иначе вы рискуете получить санкции в виде капчи от поисковиков. Так же необходимо зайти в настройки и вдумчиво отключить все галочки с метрик, которые вам не нужны, в настройках поиска выбрать анализировать первые: 3 – будет быстрее работать и меньше капчи. Я вообще на всякий случай отключаю Rds bar в плагинах, когда им не пользуюсь.

SEOquake – еще один бесплатный плагин SEO-панель для браузеров Mozilla Firefox, Google Chrome и Opera. SEOquake может предоставлять параметры для списков в результатах выдачи поисковой системы. Наряду с различными SEO-метриками, SEOquake предоставляет другие полезные инструменты, включая SEO аудит, отчет по плотности ключевых слов, анализ внутренних и внешних ссылок, социальные показатели, показатели конкурентов в выдаче. Требует тщательной и вдумчивой настройки. Когда не пользуемся, кликаем по значку на панели и отключаем, чтоб не словить капчи.

Вот вам небольшой SEO – кейс: Rds bar или SEOquake пригодится при анализе конкурентов – смотрим топ выдачи, если у сайта низкий ТИЦ И PR или бэклинки, соответственно на него стоит меньше ссылок, значит у него мощные внутренние факторы ранжирования (статьи, мета-теги, заголовки…) и полезно его изучить детально.
А для любителей бесплатных шаблонов эти плагины помогут выявить внешние скрытые ссылки, которые любят ставить недобросовестные товарищи.

Бонус: скачать мои настройки этих двух SEO-панелей.

Хотите узнать какой web-движок использует ваш конкурент? Rds bar частично поможет, но лучше и удобнее с этой задачей справится Wappalyzer он не только умеет распознать CMS систему сайта, но и покажет какие JS, CSS и Web фреймворки использует сайт. По ним имеются некие рейтинги и можно перейти на их официальные сайты. Так же этот плагин умеет показывать аналитику и использованные на сайте шрифты.

Кстати о шрифтах. Вам понравился шрифт на каком-то из сайтов и хотите себе такой же как у него? Тут на помощь придет плагин Font Finder. Работает он очень просто: кликаем по кнопке плагина, наводим на шрифт и тут же видим его название и стили. Похожим образом работает CSSViewer, он покажет CSS стили оформления выделенного элемента.

Если веб-мастер находит сайт в интернете, который выглядит круто или делает крутые технологические трюки, всегда возникает желание посмотреть из чего он сделан. Quick source viewer – быстрый и компактный просмотрщик исходного кода, покажет в удобном виде все HTML, Javascript и CSS, из которых создана страница. Умеет форматировать сжатые файлы в красивый и читабельный вид, на значке показывает общее количество скриптов. Must have!

Visual Event – позволяет простым наведением мыши на объект Dom увидеть все события (event), прикрепленные с использованием стандартных фреймворков javascript.

Pretty Beautiful Javascript – автоматически форматирует для удобного чтения сжатые Javascript файлы, добавит подсветку синтаксиса. Нет необходимости копировать/вставлять или что-либо еще, все это происходит «на лету» для вашего удобства.

Еще одним важным фактором ранжирования поисковых систем является скорость загрузки сайта. Плагин для Chrome Performance-Analyser позволяет наглядно в виде графиков увидеть причину медленной загрузки: ответ от сервера, количество запросов, скорость загрузки картинок и скриптов, построение DOM. Google PageSpeed Insights API Extension покажет оценку для настольных компьютеров, мобильных телефонов и мобильных устройств вместе с навигационной ссылкой на сайт Google PageSpeed ​​проверяемого сайта.

Что-то изменили в коде шаблона и не видите результат? Необходимо очистить кеш. Для очистки кеша браузера в один клик есть удобный плагин Clear Cache

Broken Link Checker – это дополнение поможет проверить web-страницу на битые ссылки.

Для фильтрации ссылок по различным параметрам при покупке на бирже Sape, я использую плагин Sape Webmaster, и пусть никто мне не говорит, мол ссылки больше не работают и все такое, пускай эти умники покажут мне в топ 10 запрос к примеру “окна ПВХ” без единой ссылки. Такого чуда пока никто не видел, потому качаем, пользуемся, покупаем хорошие ссылки на свои сайты.

Плагин Yandex Wordstat Assistant для браузеров Google Chrome, Яндекс и Opera, позволяет значительно ускорить ручной сбор слов с помощью сервиса подбора ключевых слов Яндекс (Wordstat).

Emmet LiveStyle – мгновенно обновляет таблицу стилей вашей веб-страницы, когда вы редактируете файл CSS, LESS или SCSS в текстовом редакторе SublimeText. Без перегрузки страниц, в режиме реального времени! Работу плагина рассмотрим подробнее в следующей статье, посвященной редактору SublimeText 3.

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

4 специальных браузера для анонимного сёрфинга

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

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

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

Илон Маск рекомендует:  Где купить готовую статью для сайта 5 бирж дешевых и уникальных статей!

1. Tor Browser

Операционные системы: Windows, Mac, Linux.

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

Существует множество программ для использования сети Tor, но легче и безопаснее всего делать это с помощью браузера Tor Browser. Вам практически не понадобится ничего настраивать и устанавливать. Браузер можно запускать даже с флешки, он полностью настроен и готов к работе.

2. Epic Browser

Операционные системы: Windows, Mac.

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

3. SRWare Iron

Операционные системы: Windows, Mac, Linux, Android.

Если вы используете Chrome, то интерфейс SRWare Iron покажется вам очень знакомым. Он основан на коде проекта Chromium, который послужил стартовой площадкой и для браузера от компании Google.

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

4. Comodo IceDragon

Операционные системы: Windows, Mac, Linux.

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

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

СТАРЫЙ ФОРУМ 2006-2020

Меню навигации

Пользовательские ссылки

Информация о пользователе

Вы здесь » СТАРЫЙ ФОРУМ 2006-2020 » Топка » Мультибраузерный сайт: как его сделать

Мультибраузерный сайт: как его сделать

Сообщений 1 страница 1 из 1

Поделиться12007-08-07 14:33:00

  • Автор: allright
  • более менее)
  • Зарегистрирован: 2006-12-05
  • Приглашений: 0
  • Сообщений: 119
  • Уважение: 0
  • Позитив: 0
  • Провел на форуме:
    4 часа 18 минут
  • Последний визит:
    2011-03-08 16:03:47


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

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

перво-наперво необходимо определить, в каких браузерах наш сайт должен отлично выглядеть. в моем варианте это: ie, opera, netscape и mozilla.

и сразу совет: старайтесь не использовать атрибуты , переложите эти обязанности на css. или на строковые элементы стиля aka style=»*». хотя даже «style» стоит использовать только при крайней необходимости.

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

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

функция возвращает имя браузера. используем ее так:

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

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

вот наиболее важные нюансы, на которых стоит заострить внимание:

если используете комментарии в css файлах, то юзайте конструкцию /* комментарий */, но никак не # и не , т.к. mozilla и netscape странно реагируют на них, поэтому следующий за комментарием элемент стиля просто игнорируется, правда, в opera и ie все ок.

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

position: relative; top: 1px;

это спасает. но! в opera я заметил такую фишку, что при наложении такого кода на любой другой элемент, например, на бордюр таблицы, границы просто становятся невидимыми:( выйти из этого положения можно следующим способом: дописать «z-index». т.е. у нас получается:

position: relative; top: 1px; z-index: 1;

далее идут различия в кнопках. т.е. например, где-то текст кнопки располагается выше на 1px, где-то ниже. короче, это безобразие надо отслеживать. а самое прикольное, что в opera возможен такой глюк, что при использовании doctype (хотя многие его не используют, но без него валидный код вам будет только сниться:)), размеры кнопок странно отображаются, т.е. для дорогой opera я указываю «height: 14px;», несмотря на то, что в других браузерах стоит «height: 18px;», который и является реальной величиной.

будьте внимательны с размерами и

. мною было найдено некоторые несоответствие в размерах в браузерах netscape и opera(7.6). самое интересное, что в opera 8 этого нет!

сокращайте слова в атрибуте «alt» при , так как в mozilla этот текст «выйдет» за границы . эту фишку я заметил толька в mozilla, в других браузерах все было ок.

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

scrollbar-face-color, scrollbar-shadow-color, scrollbar-highlight-color, scrollbar-3dlight-color, scrollbar-darkshadow-color, scrollbar-track-color, scrollbar-arrow-color

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

не юзайте следующий код:

leftmargin, marginwidth, topmargin, marginheight

подобные скармливают нам различные визуальные редакторы. точно знаю про namo webeditor(дааавно пользовался)

используйте для отступов документа код:

если же вы хотите сделать отступ в 1px сверху и снизу, то просто напишите:

вы, наверное, спросите «а зачем margin: 0 нужен, ведь и без него все нормуль?» а я вам отвечу, что это просто необходимо для mozilla. а то вы будете ломать голову, почему же у вас там появились лишние отступы:)
вот в общем-то и все. дерзайте, и у вас все получится.

Мультибраузерный сайт: как его сделать

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

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

Перво-наперво необходимо определить, в каких браузерах наш сайт должен отлично выглядеть. В моем варианте это: IE, Opera, Netscape и Mozilla.

И сразу совет: старайтесь не использовать атрибуты , переложите эти обязанности на CSS. или на строковые элементы стиля aka style=»*». Хотя даже «style» стоит использовать только при крайней необходимости.

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

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

Функция возвращает имя браузера. Используем ее так:

Т.е., если, например, к нам зашли через IE, то скармливаем CSS файл по имени ie.css. Можно сделать небольшую модернизацию и определять еще и версию браузера, но я в этом большого резона не увидел.

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

Вот наиболее важные нюансы, на которых стоит заострить внимание:

Если используете комментарии в CSS файлах, то юзайте конструкцию /* комментарий */, но никак не # и не , т.к. Mozilla и Netscape странно реагируют на них, поэтому следующий за комментарием элемент стиля просто игнорируется, правда, в Opera и IE все ОК.

Различное отображение тега . В IE он будет смотреться наиболее презентабельным образом, а вот в других браузерах, он мало того, что некрасиво выглядит(ИМХО), так он еще и выравнивается несколько странно. Т.е. где-то выше, где-то ниже. Поэтому для решения этой проблемы я использую относительное позиционирование:

position: relative; top: 1px;

Это спасает. НО! В Opera я заметил такую фишку, что при наложении такого кода на любой другой элемент, например, на бордюр таблицы, границы просто становятся невидимыми:( Выйти из этого положения можно следующим способом: дописать «z-index». Т.е. у нас получается:

position: relative; top: 1px; z-index: 1;

Далее идут различия в кнопках. Т.е. например, где-то текст кнопки располагается выше на 1px, где-то ниже. Короче, это безобразие надо отслеживать. А самое прикольное, что в Opera возможен такой глюк, что при использовании DOCTYPE (хотя многие его не используют, но без него валидный код вам будет только сниться:)), размеры кнопок странно отображаются, т.е. для дорогой Opera я указываю «height: 14px;», несмотря на то, что в других браузерах стоит «height: 18px;», который и является реальной величиной.

Будьте внимательны с размерами и

. Мною было найдено некоторые несоответствие в размерах в браузерах Netscape и Opera(7.6). Самое интересное, что в Opera 8 этого нет!

Сокращайте слова в атрибуте «ALT» при , так как в Mozilla этот текст «выйдет» за границы . Эту фишку я заметил толька в Mozilla, в других браузерах все было ОК.

Далее хочу напомнить, что использование для оформления скроллбара кода типа:

scrollbar-face-color, scrollbar-shadow-color, scrollbar-highlight-color, scrollbar-3dlight-color, scrollbar-darkshadow-color, scrollbar-track-color, scrollbar-arrow-color

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

Не юзайте следующий код:

leftmargin, marginwidth, topmargin, marginheight

подобные скармливают нам различные визуальные редакторы. Точно знаю про Namo WebEditor(дааавно пользовался)

Используйте для отступов документа код:

Если же вы хотите сделать отступ в 1px сверху и снизу, то просто напишите:

Вы, наверное, спросите «А зачем margin: 0 нужен, ведь и без него все нормуль?» А я вам отвечу, что это просто необходимо для Mozilla. А то вы будете ломать голову, почему же у вас там появились лишние отступы:)
Вот в общем-то и все. Дерзайте, и у вас все получится.

Обзор мультибраузеров

Как известно, большую часть информации человек воспринимает визуально. Поэтому мы стараемся улучшить качество её приема всеми способами. В случае с Интернетом, информационное обеспечение нас любимых напрямую зависит от обеспечения программного, то есть от веб-браузера. Удобство использования той или иной софтины может резко изменить уровень восприятия информации. В сегодняшнем обзоре мы попробуем объективно оценить достоинства мультибраузеров на основе Internet Explorer. Конечно, упускать из виду альтернативные браузеры (Opera, FireFox и так далее) стоит, но IE все же пока занимает лидирующие позиции. О нем, навязанном пользователям компанией Microsoft, а точнее а его более совершенных доработках сегодня речь и пойдет. Список кандидатов выбирался однозначно из ярких представителей мультибраузерного IE-семейства: NetSurf, PhaseOut, SlimBrowser, Maxthon, Avant Browser, iNetAdviser

NetSurf
Разработчик: Евгений Орлов klodware@narod.ru
Официальный сайт: http://www.klodware.narod.ru/index_rus.htm
Внешний вид NetSurf существенно отличается от стандартного IEшного. Но отнюдь не в лучшую сторону. Образно интерфейс этого мультибраузера можно охарактеризовать как «интуитивно непонятный». Невзрачные «плоские» кнопки панели управления чередуются с «объемными», смешение стилей, странная и непривычная система группирования закладок (окон) – все это может сразу же отпугнуть привыкшего к простоте и ясности IE пользователя. Но, тем не менее, NetSurf обладает некоторыми функциональными возможностями, благодаря которым он и попал в данный обзор. Это автоматическое сохранение посещенных страниц с соблюдением структуры сайта, менеджер закачки файлов, правда, без поддержки многопоточности и докачки, и несколько полезных «фич», таких как автоскроллинг, быстрый доступ к сервису «whois» и автоматическое переключение на английскую раскладку клавиатуры в адресной строке. Но из-за отсутствия блокировки всплывающих окон, что странно, присутствия (!) проблем с отображением некоторых страниц (IE их отображает прекрасно) и неприглядности интерфейса, использовать NetSurf можно разве что как программку для сохранения веб страниц.
Интерфейс: 3 из 10
Юзабилити: 6 из 10
Функциональность: 3 из 10
Общая оценка: 4 из 10
Впечатления: некрасивый интерфейс, неудобная организация мультиоконности, проблемы в отображении страниц

PhaseOut
Разработчик: PhaseOut
Официальный сайт: http://www.phaseout.net/
Этот браузер можно назвать если самым впечатляющим и запоминающимся по внешнему виду. Сделан он полностью на Flash и, несомненно, за это приходится расплачиваться: браузер использует чрезмерно много ресурсов системы и что работать он может только в полноэкранном режиме.
PhaseOut – браузер только с красивой оберткой, который по функциональности выше среднего уровня не поднимается. Хотя в этой программе есть некоторые очень интересные «находки» и просто полезные функции. Это предварительный просмотр загруженных страниц на дополнительной панели в виде их эскизов, возможность отправки фотографий по почте (работает при наличии подключенной веб-камеры) и блокировка pop-up окон.
Стоит также отметить сделанную в виде путеводителя «Помощь» и наличие «примочек» для удобного серфинга, которых и в помине нет у Internet Explorer. Подводя итог скромного описания PhaseOut можно сказать, что только лишь дизайн заслуживает всяческих похвал. Более ничем программа от своих аналогов не отличается, а многие стандартные функции реализованы в ней на порядок хуже.
Интерфейс: 8 из 10
Юзабилити: 6 из 10
Функциональность: 4 из 10
Общая оценка: 6 из 10
Впечатления: красивый интерфейс на Flash и возможность устанавливать «скины» на свой вкус, предварительный просмотр страниц и удобное переключение между ними с одной стороны и требовательность к ресурсам, малая функциональность и работа исключительно в полноэкранном режиме с другой

SlimBrowser
Разработчик: Flash Peak
Официальный сайт: http://www.flashpeak.com/
Этот браузер обладает простым, но приятным интерфейсом и сочетает неплохую подборку функций. Полностью описывать все возможности SlimBrowser бессмысленно, так как их довольно много и они уже стали стандартом для программ такого типа. Но некоторые наиболее важные моменты упомянуть стоит.
Очень кстати оказалась возможность для быстрого выбора прокси-сервера из заранее заданного списка и функция выбора элементов, которые будут загружены на текущей странице. Наличествует в SlimBrowser и возможность работы с различными внешними почтовыми клиентами. Прямо на панели управления присутствуют кнопки увеличения и уменьшения как всего масштаба страницы, так и отдельно шрифта (правда, горячих клавиш не предусмотрено). Также SlimBrowser может похвастаться встроенным блокировщиком рекламы и всплывающих окон (вполне толковая штучка, хотя и не дотягивает до возможностей такой же функции в iNetAdviser).
Интерфейс: 9 из 10
Юзабилити: 8 из 10
Функциональность: 7 из 10
Общая оценка: 8 из 10
Впечатления: стандартный набор функций, сдобренный блокировщиком баннеров и некоторыми полезными «фичами», простой и уже изученный интерфейс, стабильность работы

Maxthon. Он же бывший MyIE
Разработчик: Maxthon International Limited
Официальный сайт: http://www.maxthon.com/
Программа поддерживает как большинство характерных для браузеров функций, так и набор нестандартных дополнений юзабилити. На наш взгляд, этот продукт заслуживает пристального внимания, так как является одним из мощнейших мультибраузеров. Maxthon имеет в своем арсенале неплохой, относительно предыдущих экземпляров, блокировщик рекламы и всплывающих окон. Полезные возможности, предоставленные в этом браузере – раздельная очистка всей истории работы в сети и возобновление сессий с предыдущих сеансов. Также Maxthon позволяет изменять масштаб страницы, причем делать это можно как из меню, так и при помощи горячих клавиш. Набор «удобств» для пользователя в данной программе внушительный. Это и автоскролл просматриваемой страницы и использование псевдонимов вместо адреса, и метапоиск сразу по нескольким поисковым ресурсам и многое другое. Дополнительно в браузере реализована навигация «по страницам» с помощью «жестов мыши» (движение мыши в определенных направлениях). И, наверное, основная гордость разработчиков этого браузера – это поддержка плагинов, способных расширять возможности браузера.
Интерфейс: 10 из 10
Юзабилити: 10 из 10
Функциональность: 7 из 10
Общая оценка: 9 из 10
Впечатления: если не обращать внимания на некоторую нестабильность работы из-за подключаемых плагинов и на «корявость» нескольких выпущенных билдов, то можно точно сказать, что Maxthon – великолепный браузер. Удобный, функциональный и, что главное, поддающейся практически любой настройке путем установки новых плагинов. Однозначно – рекомендуем.

Avant Browser
Разработчик: Avant Force
Официальный сайт: http://www.avantbrowser.com/
Этот браузер по функциональности очень напоминает Maxthon, но с более приятным и хорошо организованным интерфейсом (аккуратные и симпатичные кнопочки, компактные панели). И по возможностям эти два браузера практически идентичны (например одинаково недоработанный – только по черному списку адресов — блокировщик рекламы и всплывающих окон). С организацией данных в Avant Browser дело обстоит также как и в Maxthon, то есть никаких принципиальных нововведений тут нет. И возможность управления страниц «жестами мыши» тоже присутствует. Различия кроются разве что в немногочисленных обработках «фасада» программы – ее интерфейса и стабильности работы. Avant Browser лишен права подключать новые плагины и, судя по всему, стабилен именно поэтому. Кстати, где-то по дороге разработчики этого браузера «потеряли» горячие клавиши для изменения масштаба отображения страницы.
Интерфейс: 8 из 10
Юзабилити: 9 из 10
Функциональность: 7 из 10
Общая оценка: 8 из 10
Впечатления: исходя из всего вышеперечисленного, можно сделать вывод, что Avant Browser является клоном браузера Maxthon (или наоборот). Поэтому и итог подведем похоже: симпатично, удобно, функционально. Но, как водится у платы формы IE – не без глюков. Но – рекомендуем.

iNetAdviser
Разработчик: СофтИнформ
Официальный сайт: www.offliner.com
iNetAdviser сочетает в себе функциональные возможности трех различных по своим задачам продуктов: мультибраузера, блокировщика рекламы и менеджера закладок. Это довольно интересная программа с множеством возможностей в одной оболочке.
Рубрикатор ссылок и ресурсов, с возможностью разделения по категориям и система быстрых групп, реализованные в этом браузере – удобная вещица, обеспечивающая систематизацию посещенных страниц и облегчающая их дальнейшее использование. «Довеском» к рубрикатору можно определить визуализацию ссылок и создание визитной карточки страницы (пользовательские комментарии к ней, ее рейтинг и даже внешний вид).
Отдельного упоминания заслуживает встроенная «баннерорезалка». Определенно на порядок функциональнее своих аналогов в других браузерах. Тут присутствует блокировка как по черному списку баннеров, так и по их размерам (размеры можно варьировать). С pop-up тоже все отлично – программа явно не путает, является ли окно вредным рекламным трюком или функциональной особенностью сайта.
Также, после пристального изучения этой программы было выяснено, что iNetAdviser умеет: отслеживать доменные линки, использовать URL-псевдонимы, переводить и проигрывать (прочитывать) текст на страницах. Такие функции как уничтожение всей информации о пребывании в сети и загрузка любого количества страниц одним кликом тоже наличествуют. Так же среди много численных возможностей был найден и менеджер картинок (компоновка изображений с того или иного ресурса или физического носителя в удобную для просмотра форму). Внушительный набор, не правда ли?
Но есть и минусы. К ним можно отнести перегруженность интерфейса управляющими кнопками (хотя проблема решается настройкой – можно убирать и добавлять новые тулбары) и общую непритязательность внешнего вида. Но самым главным минусом является отсутствие в iNetAdviser большинства «фич» повышения юзабилити, присутствующих в том же Avant или Maxthon, к примеру, управления мышью или автоскроллинга. В принципе, набор таких функций приличный (то же открывание нескольких страниц одним кликом или закрытие страницы двойным кликом по ее табу), но никак не дотягивает до уровня получивших в этом обзоре высокие оценки браузеров.
Интерфейс: 9 из 10
Юзабилити: 8 из 10
Функциональность: 10 из 10
Общая оценка: 9 из 10
Впечатления: очень мощный инструмент, сочетающий в себе функции не только мультибраузера, но и блокировщика рекламы, менеджера закладок и менеджера картинок. Немного подкачал перегруженный элементами интерфейс. Но в целом, надежно, функционально и прекрасно подойдет для работы и серфинга в Интернете.

Среди рассмотренных браузеров самыми достойными оказались Maxthon, Avant Browser и iNetAdviser. Самым симпатичным внешним видом, гибкостью настроек и удобным интерфейсом может похвастаться разработка компании Maxthon International Limited – бывший MyIE. Остальные все же уступают лидеру теста «юзабилити». Но вот по функциональности однозначный победитель – iNetAdviser от компании СофтИнформ. Остальные претенденты даже рядом не стояли ни с набором полезных функций, ни с качеством их исполнения.
Если Вы хотите получить от серфинга в Интернете максимум удовольствия (при этом не собираетесь переходить на полностью самостоятельные браузеры, например, Opera или FireFox), то Ваш выбор прост – Maxthon. Но если Вам требуется не только удобство работы, но и повышенная функциональность, то лучше, чем iNetAdviser Вам определенно ничего найти не удастся.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL