КРОССПЛАТФОРМЕННАЯ РАЗРАБОТКА WEB-САЙТОВ

CROSS-PLATFORM DEVELOPMENT OF THE WEBSITES

Victoriya Taran

candidate of Science, assistant professor of Humanitarian and Pedagogical Academy (branch) “V.I. Vernadsky Crimean Federal University” in Yalta,

Russia, Yalta

Viktoriya Osyka

student 3 courses of the direction of preparation 09.03.03 "Applied informatics" of Humanitarian and Pedagogical Academy (branch) “V.I. Vernadsky Crimean Federal University” in Yalta,

Russia, Yalta

Roman Horschar

student 3 courses of the direction of preparation 09.03.03 "Applied informatics" of Humanitarian and Pedagogical Academy (branch) “V.I. Vernadsky Crimean Federal University” in Yalta,

Russia, Yalta

АННОТАЦИЯ

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

ABSTRACT

In this article, problems of mapping of the websites in different browsers are considered. The main reasons of different display of the websites by browsers are allocated. Options of elimination of the described problems by a coding of writing are offered. The basic principles of cross-platform imposition are formulated.

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

Keywords: browser, web application, problems of display of the websites, style sheets, correctness of a coding

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

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

В данный момент наиболее популярными браузерами являются: Google Chrome, Opera, Firefox, Safari, Internet Explorer. Почти все из них идут в ногу со временем и стараются подстраиваться под общепринятые стандарты. Исключением является Internet Explorer. Этот браузер появился одним из первых и фактически является прародителем всех последующих. Разработчики долгое время поддерживали обозреватель на высоком уровне, имелся мощный функционал и приятный стиль отображения. Но вскоре он начал отставать от своих конкурентов по всем параметрам и, в итоге, перестал подстраиваться под быстроменяющиеся общепринятые стандарты обработки web-страниц. Остальные же браузеры сумели идти в ногу со временем, поэтому с ними в процессе web-программирования проблем возникает намного меньше. Тем не менее, стандарты меняются, версии web-обозревателей устаревают, им на замену создаются новые, с современным функционалом и методами обработки данных, что так же порождает множество проблем.

Рассмотрим основные проблемы кроссплатформенности и выделим причины разного отображения браузерами исходного кода:

1. Усовершенствование языков. Языки web-программирования, как и все другие, постоянно изменяются, дополняются и необходимо вовремя изучать и по назначению использовать их новые функции. Некоторые функции перестают существовать, появляются другие, изменяются уже имеющиеся. Это влечет за собой индивидуальное восприятие одних и тех же таблиц стилей разными версиями языка.
2. Версии браузеров. Вслед за языками программирования усовершенствуются и браузеры, но не все пользователи их обновляют, что порождает проблему устаревшего способа отображения web-страницы, использующей современные функции и методы.
3. Способ отображения браузеров. Некоторые web-обозреватели по-своему обрабатывают некоторые правила таблиц стилей. Браузеры стараются помочь разработчикам и при возможности скрывают явные ошибки.
4. Атрибуты по умолчанию. Разные версии web-обозревателей используют свои собственные атрибуты по умолчанию (рамки, шрифты, цвета).

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

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

Зачастую именно способ отображения и использования некоторых параметров браузером доставляет много неудобств разработчикам web-сайтов. Примером послужит отображение сайта университета в браузерах Google Chrome (рис. 1) и Internet Explorer (рис. 2). На скриншотах видно, что отображение одного и того же сайта в разных браузерах очень отличается. Но даже из этой ситуации есть выход. Первым вариантом является написание таблиц стилей для каждого обозревателя отдельно, а вторым – написание сайта при постепенной проверке корректности отображения и, по возможности, упрощение стиля или подбор аналоговой версии кода. В случае, который показан на рис. 1 и рис. 2, проблема заключается в следующем:

Рисунок 1. Отображение в браузере Google Chrome

Рисунок 2. Отображение в браузере Internet Explorer

1. IE (Internet Explorer) не увеличивает размеры блочного элемента при использовании внутренних отступов (padding), что повлияло на смещение положения блоков в верхней части страницы;
2. IE игнорирует параметры top и left для элемента с параметром “position: fixed” и, более того, разрешает его позиционирование значением “text-align: center”, указанным в родительском элементе;
3. IE отображает ошибки разработчика, которые большинство браузеров скрывают.

В данном случае это ошибочные значения “margin” внутри центрального блока, которые сдвинули блок новостей. Отлавливание ошибки разработчика в обозревателе IE, которую автоматически исправляют другие браузеры, показано на рис. 3.

Рисунок 3. Отлавливание ошибки в IE

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

Самым простым способом решения проблемы с атрибутами по умолчанию является определение в таблице стилей правил, которые не дадут возможности браузеру некорректно отображать web-сайт [2]:

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-weight: inherit;

font-style: inherit;

font-size: 14px;

font-family: inherit;

vertical-align: top;

background: transparent;

font: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;

background-color : white;

}

Используя приведенный код, можно избавиться от большинства ошибок, но иногда возникают случаи, которые требуют особого подхода. К примеру использование одного из самых часто используемых тегов, парного тега <p>, в разных браузерах может привести к непредсказуемым появлениям различных отступов, не поддающихся форматированию даже с использованием конструкции “!important”. Такого рода проблема проявляет себя в браузере Google Chrome, в котором при просмотре страницы в режиме разработчика (F12) можно найти следующее правило:

user agent stylesheet

p {

display: block;

-webkit-margin-before: 1em;

-webkit-margin-after: 1em;

-webkit-margin-start: 0px;

-webkit-margin-end: 0px;

}

Функцией, которую реализует этот код является отображение отступов перед и после абзаца на 1em. Переназначить данные правила не является возможным и единственным выходом является переназначение для тегов типа <p> значения “display: block;” в “display: inline-block;”. Это приведет к тому, что браузер потеряет возможность управлять отступами данного тега и станет возможным последующее его наделение новыми стилями.

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

• установить все браузеры и тестировать web-страницу;
• установить Dreamweaver либо WordPress, которые включают в себя специальные модули для тестирования правильности кода.

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

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

1. Необходимо использование сторонних специализированных программ;
2. Обязательна своевременная проверка корректности отображения в различных браузерах;
3. Выполнять сброс параметров атрибутов по умолчанию;
4. Определять версии языка разметки;
5. Постоянно следить за усовершенствованием языков программирования и состоянием хоста.

Список литературы:

1. Кроссбраузерная верстка сайта – [Электронный ресурс]. – Режим доступа: http://artspektr.com/information/krossbrauzernaya-verstka-sayta (Дата обращения: 18.03.2016).
2. Полезные шорткоды CSS. – [Электронный ресурс]. – Режим доступа: http://mainview.ru/programming/css/poleznye-shortkody-css (Дата обращения: 17.03.2016).