1.2 Анализ элементов совместимости Web-публикаций

для различных браузеров

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

Наиболее распространенными сегодня являются браузеры: Internet Explorer, Mozilla Firefox, Google Chrome, Opera и Safari. Каждый браузер интерпретирует код сайта в свой собственный уникальный программный код, и это иногда может привести к различным проблемам с изображениями, таблицами и выравниванием различных информационных блоков , которые выбивают вроде бы красивый и стильный веб-дизайн из равновесия.

Тот факт, что новые версии браузеров выпускаются довольно часто, добавляет к задаче создания удобного веб-дизайна определенные правила. Самый простой способ избежать проблем с совместимостью с различными браузерами и разными версиями этих браузеров это создания простых макетов с небольшим количеством элементов. Как бы безопасно и скучно это ни звучало, некоторым компаниям стоит принять этот подход, потому что это экономит финансовые затраты, силы персонала и необходимое время для подгонки дизайна под кросс платформенность браузеров. Специалистам по веб-дизайну не только необходимо учитывать совместимость браузера, но и «платформу» (Windows, MacOS, Linux и т.д.) и «устройство», на которой будут работать браузеры. Например: настольные компьютеры, ноутбуки, Iphones или мобильные устройства.

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

Баланс между инновационным веб-дизайном и совместимостью с интернет-браузерами (старые и новые) должен основываться на понимании целевой аудитории сайта. Например:

1. Веб-дизайн ориентированный на академические или научные сообщества, скорее всего, потребует некоторого внимания на совместимость с графическими бесплатными браузерами (AKA текст браузеры), такие как Lynx или старые версии популярных браузеров.

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

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

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

Каждая компания должна будет "провести черту" на основе личного опыта руководителя проекта, общественного мнения и советов веб-дизайнера профессионала. Единого мнения не существует, но есть инструменты, которые позволят Вам более подробно и качественно оценить Вашу аудиторию. Например Yandex Metrica, Google Analytics - данные которые собирают аналитические счетчики позволяют Вам провести персональный анализ (аудит) именно Вашего ресурса и оценить, что именно Вам следует исправить для полного удовлетворения Вашей аудитории.

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

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

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

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

Adobe BrowserLab — это бесплатный инструмент проверки кросс-совместимости на различных браузерах, который позволяет протестировать сайт для ряда современных и устаревших браузеров, включая различные версии Chrome, Safari, IE и Firefox. Он предоставляет вам ряд способов просмотра страниц, в том числе в полноэкранном режиме для одного браузера, а также возможность параллельного одновременного сравнения браузеров. Сервис может работать онлайн с динамическими страницами в Интернете, или просматривать их локально через Firebug или Adobe Dreamweaver CS5. Возможность создания предопределенных наборов браузеров также полезно, если вам не нужно тестировать сайт на старых версиях браузеров.

Browsershots, вероятно, наиболее полный бесплатный доступный инструмент для тестирования. Он включает в себя возможность тестирования на браузерах операционных систем Linux, Windows и BSD. В нем также есть возможность тестирования для ряда браузеров, о которых вы, вероятно, никогда не слышали (например, Galeon, Iceape, Kazehakase и Epiphany). По большей части, тесты Browsershots самых последних версий каждого браузера также эффективны, как и для старых версий.

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

SuperPreview. Сервис SuperPreview предложен компанией Microsoft и он совместим только с Windows. Он позволяет вам определить собственный "основной" браузер, и он работает с любым браузером, установленном на вашей системе (поставляется с встроенным Internet Explorer). Тот факт, что он работает только со встроенными браузерами, делает его работу быстрее (потому что вы ничего не загружаете и не ожидаете ответа удаленного сервера), но из-за этого он ограничен в количестве браузеров, которые можно сравнить.

Триал версия SuperPreview действует 60 дней и работает как облачный сервис. В онлайн-версии доступна поддержка Chrome, Safari (Mac) 4 +5, Firefox 3 +4. Вы также можете использовать интерактивный режим для просмотра сайтов, требующих регистрации перед отображением страницы, которую вы хотите проверить. К сожалению, нет никакой поддержки для Opera, установленной локально или в облаке, и вы должны иметь версии, включая Expression Web, чтобы получить возможность доступа к облачным сервисам. Базовая версия поддерживает браузеры Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, которые включены и в бесплатную версию, а также Internet Explorer 9, если он установлен локально.

Lunascape 6 является браузером для Windows с тройным движком. Она работает как Trident (Internet Explorer), Gecko (Firefox) и WebKit (Safari, Chrome и), так что вы можете увидеть, как выглядит ваш сайт во всех трех браузерах одновременно. И хотя это не традиционный инструмент тестирования на совместимость браузеров, тем не менее, он является полезным инструментом для дизайнеров и разработчиков. Одним из главных его преимуществ является то, что вы получаете возможность одновременного просмотра вашего сайта сразу с помощью всех трех основных движков. В нем также присутствует поддержка расширений и плагинов Firefox, поэтому вы можете использовать инструменты для разработчиков, такие как Firebug, для диагностики проблем с совместимостью.

IETester это бесплатный (как для личного, так и для профессионального использования) браузер для Windows, который имеет движок для рендеринга и JavaScript для предварительного просмотра в браузерах Internet Explorer 10, Internet Explorer 9, Internet Explorer 8, Internet Explorer 7, Internet Explorer 6 и Internet Explorer 5.5 на Windows 7, Vista и XP. Пока доступна только альфа-версия программы. Необходимыми требованиями для запуска программы является наличие ОС Windows 7, Windows Vista или Windows XP и браузера Internet Explorer 7 или выше.

IE NetRenderer позволяет проверить совместимость сайт для браузеров Internet Explorer от 5.5 до 9 версий. Вам придется проверять каждый вариант в отдельности, зато эта программа является бесплатной.

Spoon это бесплатный сервис, эмулирующий работу браузеров. Он предоставляет бесплатные версии Firefox, Chrome, Opera и Safari для пользователей Windows. Список версий каждого браузера включает: Firefox 2-5, Chrome 4-8, Safari 3-5 и Opera 9-10.

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

Browsera обеспечивает автоматизированное тестирование на совместимость. Он автоматически выделяет различия в способах загрузки вашего сайта различными браузерами, тем самым упрощая процесс тестирования. Оно также обнаруживает ошибки JavaScript, а коммерческая версия может тестировать страницы, закрытые авторизацией. Он также может проверять динамические страницы. Бесплатный тарифный план включает в себя ограниченное число браузеров и низкое разрешение экрана. Премиум планы начинаются с $39 для одного проекта. Месячная подписка будет стоить от $49 до $99 и обеспечит поддержку большего количества браузеров с высоким разрешением экрана и позволит тестировать закрытые страницы.

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

Бесплатная версия поставляется с пятиминутным пределом сессии, а версия для разработчиков стоит $20 в месяц без ограничения времени.

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

Mogotest делает полную проверку на совместимость браузеров. В нем есть API, поэтому он может быть интегрирован в существующие инструменты и рабочие процессы. Mogotest также предлагает отчет о состоянии сайта, который расскажет вам о неработающих ссылках и страницах и других вопросах, общих для новых веб-сайтов. Служба также предлагает инструмент сравнения скриншотов для различных браузеров. Есть два тарифных плана для физических лиц: личный план, начиная с $15 в месяц, позволяющий протестировать до 50 страниц на трех сайтах, и фрилансер-план за $45 в месяц, включающий в себя до 10 веб-сайтов из 350 страниц. Команда планирует расширить варианты планов от $125 в месяц, и до $4499 и более за предоставление неограниченного доступа. Два самых дорогих плана предусматривают настраиваемые отчеты.

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

BrowserCam включает в себя средства тестирования совместимости для настольных и мобильных браузеров (последнее до сих пор отсутствует во многих других инструментах). Он также предлагает удаленный доступ для оперативного тестирования Windows, Linux и Мас OS, проверки электронной почты для проверки ваших HTML, RTF и TXT писем. Цены на BrowserCam начинаются от $19,95 в день для одного вида сервиса до $999,95.

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

Цена одиночной пользовательской лицензии использования продуктов и обновлений Multi-Browser Viewer составляет $139,95 в год. Стоимость обновлений по окончании первого года использования составляет $99,95. Бесплатная пробная версия доступна на веб-сайте разработчика сервиса.

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

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

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

Таблица 1 – Сравнительная таблица тестовых сервисов

Приложение	Количество версий браузеров, которые поддерживаются	версия IE	Интерактивная проверка?	Одновремен-ное тестирование?	Цена
Adobe BrowserLab	13	IE6+	Нет	Да	Бесплатно
Browsershots	60+	IE6+	Нет	Нет	Бесплатно
SuperPreview	различное	IE6+	Да	Да	Бесплатно
Lunascape	3	IE6+	Да	Да	Бесплатно
IETester	6 версий IE	IE5.5+	Да	Да	Бесплатно
IE NetRenderer	5 версий IE	IE5.5+	Нет	Нет	Бесплатно
Spoon	16+	нет	Да	Нет	Бесплатно
Sauce Labs	40+	IE6+	Да	Нет	Бесплатно - $499 /месяц
Browsera	9	IE6+	Нет	Да	Бесплатно - $99 /месяц
Browserling	9	IE5.5+	Нет	Нет	Бесплатно - $20 /месяц
Mogotest	7+	IE6+	Нет	Да	$15 - $4,499 /месяц
Cloud Testing	4+	IE6+	Да	Да	Не указана
BrowserCam	90+	IE5.2+	Да	Да	$19.95 - $89.95 /месяц
Multi-Browser Viewer	80+	IE6+	Для некоторых браузеров	Да	$139.95
CrossBrowserTesting	100+	IE6+	Да	Да	$29.95 - $199.95 /месяц

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

2 Практические вопросы к контрольной работе

2.1. В среде Macromedia Flash Professional разработана презентация для ОАО «Элеваторстройдеталь»

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

1. Содержательные элементы слайда

Заголовок слайда.

Назначение данного элемента информационной структуры состоит в однозначном информировании аудитории о содержании слайда.

Заголовок слайда – ОАО «Элеваторстройдеталь».

Подзаголовок.

Подзаголовок – Строительство зданий из легкий металлоконструкций.

2. Текстовый блок – блок 1,2,3 из информационной структуры презентации.

3. Графический информационный блок

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

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

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

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

Подпись. Все представленные в презентации виды продукции будут даны с подписью их названия.