Предыдущий ролик Следующий ролик  

Видео урок: Инструменты для тестирования

Основы веб-дизайна

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

В большинстве случаев нужно убедиться, что в системе установлены браузеры Chrome, Firefox и Opera. Тем не менее, такие браузеры, как Safari и Internet Explorer, используются только в конкретных системах, и если эта система не установлена на вашем устройстве, будет очень сложно протестировать работу проекта в таком браузере. Что касается Internet Explorer, можете воспользоваться сайтом компании Microsoft - modern.ie, на котором содержится множество полезных ресурсов для разработки проектов под Internet Explorer, а также можете скачать вот такие виртуальные машины, с помощью которых можно запускать на машине разные версии Internet Explorer независимо от того, это Mac или стационарный компьютер.

Если вы работаете на стационарном компьютере и хотите протестировать проект в браузере Safari, то можно либо скачать последнюю версию этого браузера для Windows, либо выполнить что-то вроде тестирования в Chrome, поскольку этот браузер основан на WebKit, но на самом деле заменить тестирование в самом браузере ничем нельзя. В настоящее время, если вы работаете на стационарным компьютере, то протестировать проект в браузере Safari у вас не получится. Сделать это можно только, взяв в руки Mac. Поэтому, возможно, вам следует посетить Apple store. Кроме того, на той машине, на которой вы разрабатываете проект, необходимо установить локальный сервер тестирования. Если у вас будет локальный сервер, вы сможете тестировать динамические страницы, устанавливать такие вещи, как WordPress или другие CMS-системы, а также запускать некоторые инструменты, используемые на уровне сборки, которые значительно облегчают жизнь веб-дизайнера.

На Mac OS можно установить MAMP. Это бесплатная конфигурация, состоящая из PHP, MySQL и сервера Apache. Эквивалентом этой программы для Windows является WAMP. Обе эти программы не только бесплатные, но еще их невероятно просто устанавливать. На самом деле наличие нескольких браузеров и среды локального сервера - все, что вам нужно для тестирования проектов. Помимо этого нужно начать создавать лабораторию устройств, с помощью которой можно определить, как будут выглядеть и функционировать ваши сайты на мобильных устройствах. На самом деле это довольно дорогая задумка, особенно для тех из вас, кто только начинает заниматься веб-разработкой.

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

К счастью, во время редактирования сайта вы можете тестировать и отлаживать его на удаленных устройствах. Например, приложение Edge Inspect компании Adobe позволяет синхронизировать на компьютере несколько устройств, а затем выполнять предварительный просмотр сайта, над которым вы работаете, одновременно на всех устройствах. Я пользовался этим приложением, оно и правда клевое. Ghostlab компании Vanamco - аналогичный инструмент, позволяющий синхронизировать в одной среде разработки несколько устройств и браузеров. Эта компания даже продает подставки под несколько устройств, тем самым облегчая процесс тестирования страниц на нескольких устройствах.

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