Адаптационный дизайн изображения Retina и отладка для API Карт Google

() translation by (you can also view the original English article)

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

Адаптационный дизайн и медиа-запросы

Home page Left - mobile style Right - laptopdesktoptablet style — Адаптационная домашняя страница. Левый - мобильный стиль. Справа - стиль ноутбука/рабочего стола/планшета.

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

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

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

1	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

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

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

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

<!--Setting up the CSS styles-->
<style type="text/css">

html {
 height: 100%;
 }

 #gears{
 width:50%;
 }

 img {
 border:none;
 }

body {
 height: 100%;
 margin: 0px;
 padding: 0px;
 background: none;
 }

 #overall_wrapper {
 height: 100%;
 width: 100%;
 margin:0px;
 padding:0px;
 border:none;
 background:none;
 }

 #title_box{
 width: 100%;
 background-color:#89cbed;
 text-align:center;
 margin:0px;
 padding-top:5px;
 padding-bottom:10px;
 border:none;
 }

 #yellow_line_and_arrow{
 display:none;
 }

 #button_to_map_standard{
 width: 100%;
 background: none;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 margin-top: 2px;
 margin-bottom: 5px;
 padding: 0px;
 display:none;
 }

 #button_to_map_mobile {
 width: 95%;
 background: none;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 margin-top: 10px;
 margin-bottom: 10px;
 padding: 0px;
 display:block;
 }

 #blurb_about_demo_wrapper{
 width: 100%;
 background: #09F;
 margin:0px;
 padding:0px;
 border:none;
 }

 #blurb_about_demo_content{
 width: 80%;
 margin-left:auto;
 margin-right:auto;
 margin-top:5px;
 padding-top:5px;
 font-family:Tahoma, Geneva, sans-serif;
 font-size: 1.8em;
 line-height: 2em;
 text-align:center;
 color:#ffffff;
 }

 #footer_box_wrapper{
 width: 100%;
 background-color:#89cbed;
 text-align:center;
 margin:0px;
 padding:0px;
 border:none;
 border-top-width:2px;
 border-top-style:solid;
 border-top-color:#ffffff;
 }

 #footer_box_content{
 width: 80%;
 margin-left:auto;
 margin-right:auto;
 font-family:Tahoma, Geneva, sans-serif;
 font-size: 1.1em;
 line-height: 1.4em;
 color:#ffffff;
 }

/*The media query. This CSS overwrites the corosponding elements (above) when the screen is over 641px in width. */
@media (min-width: 641px) {

 body {
 height: 100%;
 margin: 0px;
 padding: 0px;
 background-image: url('background9.jpg');
 background-color: #B3CDE6;
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: right bottom;
 background-size: cover;
 }

 #overall_wrapper {

 height: 100%;
 width: 40%;
 margin-left: auto;
 margin-right: auto;
 margin-top:0px;
 margin-bottom:0px;
 padding-left: 5%;
 padding-right: 5%;
 padding-top: 2%;
 padding-bottom: 2%;
 border-right-width: 2px;
 }

 #title_box{
 width: 400px;
 background-color:#89cbed;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 margin-bottom:2px;
 padding-top:10px;
 padding-bottom:10px;
 border-top-left-radius:20px;
 border-top-right-radius:20px;
 border-bottom-left-radius:0px;
 border-bottom-right-radius:0px;
 }

 #yellow_line_and_arrow{
 width: 400px;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 margin-top:2px;
 display:block;
 }

 #button_to_map_standard{
 width: 95%;
 background: none;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 margin-top: 2px;
 margin-bottom: 5px;
 padding: 0px;
 display:block;
 }

 #button_to_map_mobile {
 width: 95%;
 background: none;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 margin-top: 2px;
 margin-bottom: 5px;
 padding: 0px;
 display:none;
 }

 #blurb_about_demo_wrapper{
 width: 95%;
 background:#ffffff;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 margin-top: 10px;
 margin-bottom: 0px;
 padding-top:5px;
 padding-left:5px;
 padding-right:5px;
 padding-bottom:15px;
 border-top-left-radius:20px;
 border-top-right-radius:20px;
 border-bottom-left-radius:0px;
 border-bottom-right-radius:0px;
 }

 #blurb_about_demo_content{
 font-family:Tahoma, Geneva, sans-serif;
 font-size: 1.4em;
 line-height: 1.6em;
 color:#09C;
 }

 #footer_box_wrapper{
 width: 95%;
 background-color:#89cbed;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 margin-top:0px;
 margin-bottom:30px;
 padding-left: 5px;
 padding-right: 5px;
 padding-top: 1px;
 padding-bottom: 2px;
 border-radius: 20px;
 border-top-left-radius:0px;
 border-top-right-radius:0px;
 border-bottom-left-radius:20px;
 border-bottom-right-radius:20px;
 border-width:0px;
 }

 #footer_box_content{
 font-family:Tahoma, Geneva, sans-serif;
 font-size: 0.9em;
 line-height: 1.3em;
 color:#ffffff;
 }
}

</style>

Медиа-запрос в этом случае представляет собой код @media (min-width: 641px) в строке 101 и последующий CSS в фигурных скобках. Этот медиа-запрос проверяет ширину устройства.

Первый мобильный дизайн

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

Таким образом, в приведенном выше коде первая часть кода (т. е. выше медиа-запроса - @media (min-width: 641px)) будет загружаться по умолчанию на каждом устройстве. Затем медиа-запрос @media (min-width: 641px)загружает стили в фигурные скобки для устройств шириной более 641 пикселей.

Контрольные точки

Общий вопрос:

«Где должны быть контрольные точки в дизайне?»

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

В этом примере iPhone (ширина 640 пикселей) отобразит стиль мобильного телефона по умолчанию, тогда как iPad2 (ширина 768) отобразит версию настольного компьютера. Наша выбранная точка останова подходит для этой карты, потому что графика слишком велика для телефона. Тем не менее, другие веб-сайты, основанные на тексте, могут обнаружить, что только тогда, когда вы переходите к значительно меньшим размерам экрана, стиль должен значительно изменяться, поэтому точки остановы могут быть опущенными.

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

Направление пользователей на разные версии карт

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

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

Медиа-запрос используется для чередования, какой div в настоящее время виден. То есть если вы посмотрите на приведенный выше код, вы увидите, что кнопка button_to_map_standard имеет display:none; применяется к нему, когда используется мобильный стиль по умолчанию, но когда мультимедийный запрос обнаруживает, что экран имеет ширину более 641 пикселя,он применяет display:block; to button_to_map_standard. (Запрос мультимедиа делает обратную ссылку на div button_to_map_mobile).

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

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

Изображения сетчатки

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

Сетки Retina (и другие hi-pixel density) имеют так много пикселей, они расположены так близко друг к другу, что почти невозможно, чтобы сетчатка в человеческом глазу отличалась от отдельных пикселей. Экраны сетчатки считаются экранами следующего поколения, и все большее число устройств уже есть, например, iPhone 4 и 5 и некоторые высокопроизводительные экраны, spec MacBook Pros. Однако недостатком является то, что графика, которая не подготовлена с учетом этих экранов, на самом деле выглядит немного расплывчатой.

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

Retina.js

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

1	<script type="text/javascript" src="/scripts/retina.js"></script>

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

emilysypic.jpg = нормальное разрешение
emilyspic@2x.jpg = версия с высоким разрешением

Затем вы добавляете свое изображение на разметку страницы, как обычно, просто добавляя стандартную версию разрешения -

1	<img src="/images/my_image.png" />

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

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

Зеленая кнопка «визитная карта» на домашней странице использует плагин retina.js. Чтобы увидеть это в действии, попробуйте просмотреть сайт на сетчатом устройстве, например. iPhone 4 или 5, и посмотрите,насколько четкий текст на зеленой кнопке. Если вы загрузили свою собственную копию кода, удалите плагин retina.js и снова просмотрите веб-сайт на устройстве сетчатки. Вы должны заметить, что качество кнопки (например, белые линии в тексте) хуже.

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

SVGs

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

As vector graphics are enlarged they retain their crispness — По мере увеличения векторной графики они сохраняют четкость.

Чтобы увидеть пример, взгляните на домашнюю страницу. Значок передач и гаечного ключа - это изображение SVG. Его ширина равна 50%. При изменении размера вашего браузера вы сможете увидеть, что он всегда остается совершенно четким. Он также остается абсолютно четким, если вы увеличиваете масштаб своего браузера (например, на телефоне).

1	<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
2	<circle cx="100" cy="100" r="90" stroke="red" stroke-width="9" fill="yellow" />
3	</svg>

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

Simple SVG demo screetshot — Простая демонстрация SVG (скриншот).

Вы можете вставлять SVG-изображения в свои веб-страницы так же, как вы вставляете jpg или любое другое изображение.

img src="yellowcircle.svg" width="70" height="70"

SVG поддерживаются всеми современными браузерами, в том числе используемыми на сетчатых устройствах, таких как iPhones 4 и 5. Тем не менее, все же важно обеспечить отказ для старых браузеров, которые их не поддерживают, например IE 8. Если вы используете Modernizr (см. ниже) уже для остальной части вашего сайта, то это разумный подход. Тем не менее, есть также специальный плагин JavaScript, SVGeezy, который будет иметь дело с этим.

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

1	<script type="text/javascript" src="svgeezy_plugin/svgeezy.js"></script>
2	<script type="text/javascript">
3	svgeezy.init(false, 'png'); // this will let the plugin check all images
4	</script>

Подобно плагину сетчатки, о котором говорилось выше, вы фактически будете предоставлять два изображения каждый раз; SVG-файл и JPEG-файл с уменьшением или png. Эти данные должны храниться в одном месте на вашем сервере. Когда плагин SVGeezy отмечает, что ваш браузер не поддерживает файлы SVG, он будет использовать альтернативную версию изображения.

Если вы загрузили исходные файлы для демонстрации из ссылки в верхней части этой страницы, посмотрите файл SVG refresh.svg и как файлtutorial4_index.html использует это изображение.

Когда дело доходит до создания файлов SVG, идея ручного кодирования файла изображения достаточно, чтобы даже geekest geek пробежал милю! К счастью, вы можете сохранять изображения в виде файлов SVG из AdobeIllustrator (щелкните File > Save > SVG)или программное обеспечение для редактирования изображений с открытым исходным кодом Inkscape. Говоря это, я бы рекомендовал сделать несколько пробных запусков, чтобы убедиться, что ваши проекты выглядят так, как ожидалось в браузере.

Есть также множество сайтов, которые предлагают бесплатные иконки SVG для загрузки. Значок передач, используемый в этой демонстрации, - Game Icons. Еще один хороший сайт - Icon Finder, в котором перечислены доступные форматы наряду со всеми результатами поиска. Icon Finder также очень полезен, чтобы понять, какие изображения могут быть созданы как файлы SVG.

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

Один набор данных: две версии карт

Это демо имеет две версии карты; версию для ноутбука / настольного компьютера / планшета и мобильную версию.

Both mobile and desktop maps use the same data ie photos stored on Flickr — На карте мобильных и настольных компьютеров используются те же данные (то есть фотографии), хранящиеся на Flickr.

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

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

Я привел пример из последнего урока. Учебник извлекает данные из этой новой учетной записи Flickr (идентификатор пользователя:99915664 @ N08). (Напоминание - каждый Flickr имеет простой (ish), чтобы запомнить имя пользователя, в данном случае bennett1671 и идентификатор пользователя, в данном случае 99915664 @ N08.) Итак, если вы следуете за тем,что вы сделали в последнем уроке, вам нужно указать свою карту на эту новую учетную запись Flickr.

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

Пометка в Flickr

Маркировка ваших фотографий в Flickr является ключом к тому, чтобы это работало. Каждая фотография в Flickr помечена, чтобы указать,являются ли они главными или второстепенными (эти теги необходимы для версии ноутбука / настольного компьютера / планшета) и являются ли они англичанами,шотландцами, walesevent или irelandevent (эти метки необходимы для мобильной версии).

API-интерфейс Flickr

Когда кнопка оранжевого события «Маленькие события» нажата на версию для ноутбука / настольного компьютера / планшета, выполняется следующий вызов API Flickr. Это вызывает учетную запись 99915664 @ N08 Flickr и фильтрует результаты по тегу smallevent.

1	http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f7095d157adfd78715344ed893a9554b&user_id=99915664@N08&tags=smallevent&has_geo=1&extras=geo&format=json&jsoncallback=?

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

1	http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f7095d157adfd78715344ed893a9554b&user_id=99915664@N08&tags=englandevent&has_geo=1&extras=geo&format=json&json&jsoncallback=?

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

Файлы SVG и мобильная версия

Все маркеры карты на мобильной версии являются SVG-файлами (см. Выше). Поэтому, хотя они немного проще, чем значки на ноутбуке / настольном столе / планшете, они всегда остаются четкими при просмотре на сетчатых экранах, таких как iPhone 4 или 5.

Тестирование и отладка

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

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

Инструменты разработчика Google Chrome

Чтобы получить доступ к инструментам разработчика Chrome, откройте Chrome и нажмите кнопку «Меню» в правом верхнем углу, а затем«Инструменты», затем «Инструменты разработчика».

The Elements tab in the Google Chrome Developers tools lets you click on parts of your web page to reveal information about how it has been rendered by the browser — На вкладке «Элементы» в инструментах разработчика Google Chrome вы можете щелкнуть части своей веб-страницы, чтобы открыть информацию о том, как она была показана браузером.

Это делает огромное количество вещей; достаточно, чтобы заполнить весь учебник самостоятельно! Я часто использую несколько бит:

Вкладка «Элементы» (выше). Позволяет вам нажимать на области вашей веб-страницы и видеть базовый код. Он также позволяет вам играть с CSS и просматривать изменения в реальном времени на своей веб-странице. Это полезно при экспериментировании с различными проектами.
Вкладка «Консоль» - вызовет ошибки. Иногда они безвредны, иногда (особенно при создании сайта!) им нужно уделить некоторое внимание.
Вкладка «Сеть» (ниже). Позволяет увидеть все загружаемые ресурсы и (слева) включает в себя временную линию (справа) с загрузкой, чтобы вы могли определить, что может замедлить ваш сайт.

Network tab tells you how long each part of a web page takes to load — Вкладка «Сеть» показывает, сколько времени требуется для загрузки каждой части веб-страницы.

Поддержка браузера

Не все браузеры поддерживают все функции HTML и CSS. Это может быть проблематично, если вы хотите воспользоваться более интересными функциями HTML5 и CSS3, а также убедиться, что люди с самой древней копией IE могут также получить доступ к вашему сайту.

Но если у вас нет необычной памяти (я этого не делал!), почти невозможно вспомнить, какие браузеры не поддерживают какие-то функции. Здесь сайт caniuse очень удобен. На этом веб-сайте дается краткое описание того, какие функции HTML, CSS, SVG и т. д. Совместимы с версиями браузеров.

Кроме того, если вы хотите использовать новую функцию, но старые браузеры ее не поддерживают, вы можете использовать библиотекуJavaScript Modernizr. Как они объясняют на своем сайте:

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

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

Кросс-браузерное тестирование

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

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

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

Проверка HTML, CSS и Javascript

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

Существует также ряд инструментов, которые помогут вам проверить ваш синтаксис JavaScript. Closure Compiler - это инструмент для сжатия вашего JavaScript (который вы также можете захотеть сделать, если размер вашего файла массивный), но он также полезен для проверки синтаксических ошибок. Например досадные недостающие полуколоны, которые нам всем нужны! Если вы скопируете и вставите в свой код и нажмите «Компиляция», любые ошибки будут выделены на вкладке «Ошибки». Другим полезным сайтом для проверки кода является JSHint.

Загрузить тест скорости

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

Analyzing the loading speed of the website using Google Pagespeed — Анализ скорости загрузки веб-сайта с помощью Google Pagespeed.

Существует ряд инструментов, которые позволят вам проверить это, в том числе –

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

Заключение

ОК - вот и все! Как я уже сказал в начале этого урока, это будет свист-стоп-тур! Надеюсь, после этой серии уроков вы теперь сможете создавать свои собственные карты Google. Радуйся!

Кредиты изображения

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