мобильная версия сайта

Содержание

Введение 4
1. Основные понятия (используемые в работе) 6
1.1. Способы адаптации к мобильным устройствам 6
1.2. Подходы к разработке мобильных версий сайтов 9
1.2.1. Адаптивный дизайн 9
1.2.2. Отдельная мобильная версия сайта 10
1.2.3. RESS 11
1.3 Анализ и выбор технологии 13
1.3.1. Проектирование структуры веб-интерфейса (Карты мозга) 14
1.3.2. Проектирование дизайна веб-интерфейса 17
1.3.3. Технологии прототипирования веб-интерфейсов 19
1.3.4. Технологии разметки (HTML5CSS3, SASS, SCSS) 20
1.3.5. Технологии программирования (JavaScript jQuery JQueryUI Ajax) 22
1.3.6. Наиболее распространенные средства серверной разработки (PHP MySQL) 24
2. Практическая часть 26
2.1. Постановка задачи 26
2.1.1. Этапы дизайнерской работы 26
2.1.2. Сбор актуальной информации 26
2.1.3. Проверка качества мобильного сайта 27
2.2. Основные этапы создания мобильной версии сайта 28
2.2 Описание инструментария 28
2.3 Реализация 31
Информационная архитектура 31
Прототипирование 32
Доработка концепции 33
Отрисовка в графике 34
Лайфхаки при разработке мобильной версии 39
Заключение 39

Это касается и JavaScript. Данный язык является объектным, объектно-ориентированным и, как объектный язык поддерживает DOM (объектную технологию представления документа или представление веб документа в виде группы объектов на некоторой подложке, которая носит название window. Окно может быть только одно и оно обладает рядом свойств. В окне располагается документ (который так же имеет ряд свойств), а уже на документе располагаются элементы в определенном порядке. Порядок расположения элементов может быть нарушен при использовании CSS стилей, которые, в свою очередь, могут управляться командами JavaScript[12]. Популярность JavaScript была переменчивой и в начале века поговаривали о полном отказе от данного языка программирования, так как ряд браузеров (например, IE) либо не использовали его, либо использовали с большими ограничениями («война браузеров»). Однако, язык развивался энтузиастами и к нему писались библиотеки, которые потом собирались в фреймворки. Наиболее распространенным сегодня является фреймворкjQuerycфреймворком внутри себя jQueryUI. jQuery позволяет выполнять все функции клиентской веб разработки и значительно расширяет и упрощает код благодаря разработанным в нем функциям. jQueryUI построен на базе фреймворка и направлен на оформление основных элементов интерфейсной части сайта (меню, текстовые блоки, галереи и т.д.). Использование фреймворков в разработке является характерным признаком современного сайта и, в настоящее время, является необходимым элементом.1.3.6. Наиболее распространенные средства серверной разработки (PHP + MySQL)Как уже упоминалось выше, на серверную часть сайта возлагается весь функционал сайта, поэтому количество языков программирования серверной части сайта значительно больше, чем клиентской и, кроме того, нет одной технологии, которая была бы определена в качестве стандарта разработки. Среди серверных языков можно выделить Ruby, ASP, JSP, Python, Perl, но наиболее распространенным (более 5 млн. серверов) является язык PHP версии 5. Особенностью данного языка, именно в 5 версии, является полная поддержка объектно-ориентированной технологии программирования, что упрощает работу по повторному использованию кода, улучшает читаемость кода и позволяет работать над созданием сайта команде разработчиков. На данном языке и для данного языка написано достаточно большое количество фреймворков (каркасов разработки структурных и функциональных элементов сайта). Среди наиболее распространенных фреймворков можно выделить Symphony, Zend, Yii, Doctrine, Smarty, Drupal, Wordpress и др. Среди этих фреймворков существуют универсальные и специализированные (предназначенные для реализации только некоторых функций и задач веб разработки). Использование фреймворков позволяет значительно ускорить процесс разработки, сделать код более стандартным и читаемым. На базе фреймворков разработаны CMS – системы управления контентом сайта, специальные решения, которые позволяют развернуть структуру сайта и затем дорабатывать функционал, в зависимости от требований к сайту.Современные динамические сайты обязательно используют базу данных как для хранения различного контента, так и для реализации своих функций. Наиболее распространёнными системами управления базами данных являются MySQL, PostgreSQL, ORACLE. Эти базы данных являются облегченными, т.е. обладают урезанным функционалом, достаточным для задач веб разработки. Наиболее распространенной является MySQL. Данная база достаточно проста в использовании и обладает высокой скоростью обработки запросов, что важно при большом количестве обращения пользователей к серверу, на котором располагается сайт[8].В back-endразработке наиболее распространенной является связка PHP+MySQL.PHP имеет достаточно средств для организации полномасштабной работы с базой данных. Расписывать сам язык программирования не имеет смысла, более подробно фрагменты работы с программным кодом будут обозначены во второй части дипломной работы.§2. Практическая часть 2.1. Постановка задачи Помимо очевидной борьбы с потерей потенциальных клиентов перед мобильной версией мы поставили несколько задач: актуализировать информацию о кафедре и направлении ее работы и облегчить студентам и преподавателям доступ к сайту с любого устройства;сделать доступной информацию, размещенную на сайте;сделать доступнее обратную связь для студентов и преподавателей.2.1.1. Этапы дизайнерской работыСбор актуальной информации.Создание информационной архитектуры.Эскизирование и прототипирование.Отрисовка в графике.Рис. 2.1. Проектирование макета мобильного сайта2.1.2. Сбор актуальной информацииНа начальном этапе разработке после анализа требований было сформулировано несколько положений:В первую очередь мобильная версия сайта должна быть с минимальным набором графики.Делаем абсолютно другую вёрстку для мобильных устройств, где будет только самое необходимое. Плюс позиционирование элементов делаем по-другому. Например, если меню слева, то лучше будет его сделать сверху, чтобы основную часть можно было растянуть на всю ширину экрана. Это как пример.Что касается ширины страницы, то ставимmax-width: 620px; у самого верхнего контейнера. Мобильную версию сайта делаем на отдельном поддомене, например, на virtlabse.com.Когда cайт для мобильных устройств будет готов, создаем редирект, для перенаправления пользователей с мобильными устройствами на мобильную версию сайта. Итак на начальном этапе версткиСоздал отдельный поддомен сайта для мобильной версии.Сделал новую вёрстку для мобильной версии.Скопировал все системные библиотеки с основного сайта на поддомен, а база данных, должна быть общей.В index-файл основного сайта добавил проверку на браузер пользователя. И если это мобильный браузер, то делаюредирект на мобильную версию сайта.Это всё, что требуется сделать для того, чтобы была мобильная версия Вашего сайта2.1.3. Проверка качества мобильного сайтаЭто первый вопрос, который нужно поставить себе: как проверить, оптимизирован ли мой сайт для просмотра на маленьких экранах? Тут есть два подхода: доверить анализ специальному сервису или открыть свой сайт на том же телефоне (на большом планшете даже не оптимизированный сайт, скорее всего, будет вполне читабельным).Начнём с сервиса, и воспользуемся инструментом от Google - developers.google.com. 2.2. Основные этапы создания мобильной версии сайтаОпираемся на требования к разработке мобильного сайтаНужно сообщитьGoogle, что страница рассчитана на мобильные устройства (или имеет аналог, предназначенный для мобильных устройств). Тогда Google сможет безошибочно направлять пользователей, выполняющих поиск с мобильных устройств, на ваши страницы. Ресурсы должны быть доступны для сканирования. Нельзя блокировать в файле robots.txt поисковым системам доступ к ключевым файлам сайта (включая объявления), от которых зависит отображение страниц. Если Googlebot не имеет доступа к CSS, JavaScript или изображениям страницы, нельзя определить, как она будет отображаться в мобильном браузере. То есть мы можем не распознать, что страница адаптирована для мобильных устройств, и показать ее неправильно пользователям, выполняющим поиск с мобильных устройств.Нужно избегать типичных ошибок, которые мешают мобильным пользователям: использовать неподдерживаемые форматы видео (Flash и другие) для основного контента на странице. 2.3 Описание инструментария  Кроме технологий описанных в первом параграфе существуют специальные средства для разработки мобильных сайтовРесурсы для разработчиков сайтов для смартфоновВ некоторых странах, обнаружив медленное подключение, Google автоматически перекодирует страницы, связанные с результатами поиска. Чтобы узнать, как будет выглядеть та или иная страница после такой обработки, воспользуйтесь этим инструментом. Проверьте вашу веб-страницу и узнайте, что может причинять пользователям неудобства при ее просмотре с помощью смартфона.Рис.2.2. Выявление проблемВыявить потенциальные проблемы также можно при помощи этого отчета в SearchConsole.Рис. 2.3. Поиск типичных ошибокРис.2.4. Анализ рекомендаций по устранению ошибокВ некоторых странах при низкой скорости подключения автоматически изменяются размеры изображений на странице результатов поиска. Вы можете отключить эту функцию для своих страниц, выполнив наши инструкции.В браузере Chrome есть эмулятор, с помощью которого можно оценить, как та или иная страница будет смотреться на различных мобильных устройствах.2.3 Реализация  2.3.1. Информационная архитектураНачали с создания структуры новой полной версии сайта, чтобы не упустить ничего из предложенного на предыдущем этапе. А составив ее, стало проще принимать решение о содержании мобильной версии — нещадно отрезали второй уровень страниц и длину оставшихся. Рис. 2.5. Разработка структуры мобильной версии 2.3.2. ПрототипированиеДля создания интерактивных прототипов я использую DudaMobileSiteEditor. Позволяет: динамические панели, которые позволяют пройти сценарии от начала до конца;адаптация просмотра прототипа под мобильные устройства.Рис.2.6. Определение элементов сайта2.3.3. Доработка концепцииДля проверки правильности решений моделируем отображение контента в различных операционных системах на разных устройствахРис.2.7. Проверка в эмуляторе2.3.4. Отрисовка в графикеСтатистика по размерам экранов устройств посетителей сайта позволяет определить диапазон ширины мобильного сайта. основной пик ширины экрана приходится на интервал 300-400px;следующий пик — 700-800px;остальные размеры не значительны.Дизайн отрисовуется под основную ширину — 320px. На примере главной страницы сделал «широкий» вариант. Остальные страницы адаптировали уже на этапе верстки. И несмотря на то, что из-за ограниченных ресурсов не смогли сделать полноценную адаптивную верстку, некоторые простые приемы все же применил:разделение одной колонки на две;со скриншотов платформы исчезает лупа, если ширина экрана достаточна для рассмотрения картинки без приближения отдельных участков.2.3.5. Кодирование в редактореКоректируем программный кодРис.2.8. РазработкаЗаключение В результате проведенной работы выполнили все этапы жизненного цикла по разработке мобильного сайта. Изучили все основные технологии разработки мобильных сайтов. Разработали пример мобильного сайта.Список литературыВильямсон X. УниверсальныйDynamic HTML. Библиотекапрограммиста./ X. Вильямсон - СПб.: Питер,2001. - 304 с.: ил.Гудман Д. JavaScript.Библияпользователя, 4-е издание.: Пер. с англ. / Д. Гудман - М.: Издательскийдом "Вильямс", 2003. -960с.Коггзолл, Джон. РНР 5. Полноеруководство. : Пер. с англ. / Джон Коггзолл: - М. : Издательскийдом "Вильяме", 2006. - 752 с.: ил. - Парал. тит. англ.Колисниченко Д.Н. Joomla 1.5. Руководствопользователя. / Д.Н. Колисниченко - М.: СПб.К.: Диалектика, 2009. -212с.: ил.Норт. Б. Joomla! Практическоеруководство. / Б. Норт. - М.; СПб.: Символ-Плюс, 2008, -448 с.: ил. Патерсон Л. Использование HTML 4. К.; М.; СПб.: Вильямс, 1998. Рамел Д. Самоучитель Joomla!.Пер. с англ. / Д. Рамел -СПб.. БХВ - Питербург, 2008. - 448 с.: ил.Томсон Лаура. РазработкаWeb-приложений на РНР и MySQL: Пер. с англ./Лаура Томсон, Люк Веллинг. - 2-е изд., испр. - СПб: ООО ДиаСофтЮП, 2003. - 672 с.Википедия. Сайт. – [Электронный ресурс] – Режим доступа: http://ru.wikipedia.org/wiki/сайтВикипедия.Система управления содержимым. – [Электронный ресурс] – Режим доступа: http://ru.wikipedia.org/wikiВикипедия. Artisteer. – [Электронный ресурс] – Режим доступа: http://ru.wikipedia.org/wiki/ArtisteerВикипедия. Скриптовый язык. – [Электронный ресурс] – Режим доступа: http://ru.wikipedia.org/wikiMindjetMindManagerProffesiona. – [Электронный ресурс] – Режим доступа: http://www.mindjet.com/Википедия. PHP. – [Электронный ресурс] – Режим доступа: http://ru.wikipedia.org/wiki/PHPВикипедия. JavaScript. – [Электронный ресурс] – Режим доступа: http://ru.wikipedia.org/wiki/JavaScriptВикипедия.Языки разметки. [– [Электронный ресурс] – Режим доступа: http://ru.wikipedia.org/wikiВикипедия.Joomla. – [Электронный ресурс] – Режим доступа: http://ru.wikipedia.org/wiki/JoomlaГагин А. Технология работы в глобальних общедоступных сетях. /А. Гагин - М: Jet Infosystems, 2006. - 235с.ВайкАллен. JavaScript. Энциклопедия пользователя : Пер.з англ./Аллен Вайк.- К. : ТОВ "ТИД" ДС", 2001.- 480с.Гудман Д. JavaScript. Библия пользователя, 4-е издание: Пер. з англ. /Д. Гудман - М.: Издательский дом "Вильямс", 2003. -960с.Коггзолл Джон. РНР 5. Полное руководство: Пер. з англ. / Джон Коггзолл - М.: Издательский дом "Вильямс", 2006. - 752 с.: рис. - Парал. тит. англ.