Кроссплатформенная разработка web-сайтов
Проблемы отображения сайтов в разных браузерах, их основные причины и предпосылки. Варианты устранения описанных проблем с помощью написания программного кода. Основные принципы кроссплатформенной верстки, используемые в данном процессе подходы и приемы.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | статья |
| Язык | русский |
| Дата добавления | 13.04.2016 |
| Размер файла | 172,3 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Размещено на http://www.allbest.ru/
Кроссплатформенная разработка web-сайтов
На сегодняшний день существует множество разнообразных браузеров, между которыми, как это часто происходит у большинства конкурентов, существуют несогласованности и рвение завоевать рынок своей уникальностью и удобством. В связи с этим возникло множество проблем с отображением 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).
Размещено на Allbest.ru
...Подобные документы
Подходы к созданию сайтов. Обоснование необходимости наличия персонального сайта компании ИП Тимонина Е.Н.. Структура, интерфейс, этапы создания сайта. Описание кода страниц. Создание web-страниц и наполнение их информацией. Верстка сайтов с чистым кодом.
дипломная работа [1,5 M], добавлен 03.06.2015Управление электронным бизнесом. Изучение технологии создания сайта предприятия с использованием выбранных бесплатных конструкторов сайтов. Сравнительный анализ макетов сайтов, разработанных для организации с помощью конструкторов "Nethouse" и "А5".
курсовая работа [867,2 K], добавлен 23.03.2016Современные тенденции разработки и принципы классификации web-сайтов. Сайт как средство развития бизнеса. Технологии, применяемые при разработке web-сайтов, системы управления контентом. Разработка web-сайта для ЗАО "Кондитерская фабрика "Саратовская".
дипломная работа [4,1 M], добавлен 01.10.2012Анализ средств формирования рейтинга Интернет-сайтов. Критерии оценки веб-сайтов при проведении Интернет-конкурса. Выбор браузера и разработка архитектуры плагина. Описание плагина средствами языка UML. Разработка и реализация программных модулей.
дипломная работа [3,2 M], добавлен 12.08.2017Анализ аппаратных и программных средств предприятия ТОО "Alicesystems", занимающегося разработкой web-сайтов. Выбор структур, топологий и технологий разработки системы. Технологии создания сайтов и выбор площадки. Описание программно-аппаратных средств.
отчет по практике [690,9 K], добавлен 29.05.2015Страницы сайтов как набор текстовых файлов, размеченных на языке HTML. Виды сайтов, их классификация. Характеристика сайта: статический или динамический. Проблема безопасности web-сайта. Исследование программного обеспечения и языков программирования.
дипломная работа [850,3 K], добавлен 11.01.2015Основные технологии разработки ресурсов Интернет. Процесс разработки веб-сайта. Понятие Web-сайта и классификация Web-сайтов. Основные этапы разработки Web-сайта. Использование HTML, CSS, JavaScript, FLASH, PHP и реляционной базы данных MySQL.
презентация [1,3 M], добавлен 28.11.2015Возможные варианты веб-сайты вегетарианских ресторанов. Изучение особенности дизайна корпоративных сайтов вегетарианских ресторанов на примере других сайтов. Создание дизайн-макета сайта в программе Adobe Photoshop. Готовый макет корпоративного сайта.
курсовая работа [1,7 M], добавлен 11.06.2015Классификация сайтов по технологиям, влияющим на дизайн и функциональность. Исследование языков программирования для web-сайтов. Характеристика особенностей личных и коммерческих сайтов. Разработка и реализация сайта Института математики и информатики.
отчет по практике [5,1 M], добавлен 09.12.2014История появления и развития методов шифрования, используемые в данном процессе приемы и инструменты. Принципы вскрытия одноалфавитных систем, обзор существующих программ. Требования к программному продукту и разработка руководства пользователя.
курсовая работа [755,9 K], добавлен 08.07.2014Обзор методов и средств по созданию и проектированию Web–сайтов. Языки программирования для создания Web–сайтов. Анализ достоинств и недостатков систем управления сайтом CMS. Разработка дизайна и макета сайта. Расчет затрат на разработку продукта.
дипломная работа [1,1 M], добавлен 02.06.2016Понятие средств обучения, их классификация. Подбор конструктора сайтов для создания электронного средства обучения. Создание электронных учебно-методических материалов с помощью технологии "Конструктор сайтов Wix.com". Категории шаблонов, дизайн страниц.
курсовая работа [2,4 M], добавлен 14.01.2014Анализ дизайна сайта с точки зрения его привлекательности для пользователей и на предмет удобства. Факторы, влияющие на восприятие пользователем информации. Основные критерии оценки туристических web-ресурсов. Сравнение сайтов Trаvel.ru и "100 дорог".
реферат [18,6 K], добавлен 19.06.2011Анализ технических требований к разрабатываемой системе. Обзор существующих Интернет-сайтов, посвященных проблемам дорожного строительства. Общая структура веб-приложения. Реализация отображения информации, модуля добавления и комментирования проблемы.
курсовая работа [2,5 M], добавлен 07.07.2012Социально-экономическая характеристика организации ООО "Автомир". Анализ уровня автоматизации бизнес-процессов. Технологии, используемые при разработке статических страниц сайтов. Оптимизация кода. Концепция присутствия организации в сети Интернет.
дипломная работа [2,6 M], добавлен 18.12.2015История веб-дизайна и сайтов. Пример раннего сайта Angelfire. Популярные браузеры, цветовая модель RGB. Структура корпоративного сайта. Предпроектный анализ разрабатываемого веб-сайта. Основные блоки макета. Пример адаптивной верстки. Макет в Photoshop.
дипломная работа [8,0 M], добавлен 10.10.2015Основные задачи, функции и права Налогового управления в Казахстане. Структура предприятия и функции его отделов. Разработка полноценного многофункционального HTML-редактора. Создание веб-сайтов нового поколения. Разработка, оформление объектов интернета.
курсовая работа [50,2 K], добавлен 20.05.2014Изучение синтаксиса пользовательских функций. Разработка приложения для вычисления параметров системы управления запасами. Синтаксис элемента "Список аргументов функции". Основные правила написания программного кода. Основные операторы языка VBA.
лабораторная работа [119,0 K], добавлен 22.09.2016Основы классификации объектов, их типы и подходы к моделированию. Программные и технические средства, используемые в данном процессе. Этапы моделирования, их общее описание и значение: постановка задачи, разработка модели, компьютерный эксперимент.
реферат [36,3 K], добавлен 23.12.2014Анализ современных концепций построения сайтов онлайн-тестирования. Разработка автоматизированного тестирующего комплекса – обучающего Web-приложения, позволяющего проводить контроль уровня знаний математики с применением языка программирования Php.
дипломная работа [865,8 K], добавлен 24.06.2013
