Создание программ для Android устройств

Размещено на http://www.allbest.ru/

Министерство образования и наук РФ

Дагестанский Государственный Университет

Факультет математики и компьютерных наук

Курсовая работа

на тему:

Создание программ для Android устройств

Выполнил:

студент 2 курса 4 группы,

факультета математики и компьютерных

наук факультета математики и компьютерных н

аук ДГУ очной формы обучения

Магомед-Касумов Рустам Самурович

Научный руководитель:

Якубов А.З.



Введение

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

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

Во второй части работы рассматривается пример создания мобильного приложения на базе OS android для быстрого и удобного доступа к сайту http://dgu.ru. Рассматривается и еще взаимодействие сайта с приложением с использованием языка программирования JavaScript.



Глава1. Методы создания мобильной версии сайта

1.1 Адаптивный веб-дизайн

Адаптивный веб-дизайн обычно использует CSS3 Media Queries для настройки макета веб-страницы, основываясь на размере области просмотра. Можно использовать один и тот же HTML для отображения различных макетов веб-страницы для настольных компьютеров, планшетов, мобильных устройств, телевизоров и т.д.

Преимущества

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

Один URL для веб-страниц: Это облегчает процесс совместного использования контента и избавляет от ненужных переадресаций, чтобы получить лучший вид страниц для разных устройств (в отличие от отдельных мобильных сайтов).

Недостатки

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

Медленная работа: сoгласно данным за апрель 2013, средняя веб-страница весит около 1 - 1.5 Мб. Теоретически такого размера мoжно избежать при использовании адаптивнoго дизайна, но на практике 86% “резиновых сайтов” весят именно столько, а то и больше.

Есть много разных способов для оптимизации сайтов:

Оптимизировать изображения. Обычно именно они составляют огромную весовую часть сайта.

Сжимать CSS и JavaScript.

Использовать Ajax(Asynchronous Javascript and XML) для обновления отдельных частей страниц, вместо того чтобы полностью перезагружать страницу

Использовать отложенную загрузку изображений(Lazyload). Эта технинка особенна полезна для мобильных сайтов.

Группировка изображений (например по категориям).

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

1.2 Сoздание отдельнoго мoбильного сайта

Для тогo чтобы сделать сайт удобным для мобильных пользователей, некоторые веб-мастера создают отдельные сайты. Наиболее распространена история с перенаправлением мобильных пользователей на специальный cубдoмен (например, m.vk.com для vk.com).

Преимущества:

Проще вносить изменения в мобильные и обычные сайты: Изменения могут касаться только мобильной версии или только обычной версии.

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

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

Недостатки:

Несколько адресов для каждой страницы: Расшаривание веб-страницы в социальных сетях становится проблемой, потому что мобильные пользователи будут делиться мобильным URL, в то время как обычные юзеры тоже могут нажать на ссылку и перейти на мобильную версию. Во избежание дублированного контента SEO-специалистам нужно использовать мета-теги rel=«alternative» и rel=«canonical». Кроме того, когда пользователь мобильного поиска Google кликнет по ссылке в результатах, он попадет на десктопную версию или перенаправлен на мобильную. Но если мобильная версия этой страницы не существует, он получит сообщение об ошибке.

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

Требуются перенаправления: Мобильные пользователи должны быть перенаправлены на оптимизированную версию и наоборот. Редиректы добавляют ко время загрузки страницы. Они также могут иметь последствия для SEO вашего сайта.

1.3 Создание мобильной версии сайта ДГУ

Для создания мобильной версии для сайта ДГУ (Дагестанский Государственный Университет - http://dgu.ru ) был выбран первый метод создания мобильной версии для сайтов - Адаптивный веб-дизайн, потому что этот метод является наиболее удобным и быстрым способом, т.к. нет необходимости создавать копию сайта для мобильной версии или использовать метод RESS.

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

Для начала создаем новый файл стилей(CSS - Cascading Style Sheets), назовем этот файл responsive.css (responsive переводится как - отзывчивый, адаптивный, что очень подходит для данного случая, а расширение css - это расширения для стилей, которые можно подключать к web-странице).

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

<link href="responsive.css" type="text/css" rel="stylesheet">

Тег <link>

Описание

Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. В отличие от тега <a>, тег <link> размещается всегда внутри контейнера <head> и не создает ссылку.

Для начала открываем браузер(в моем случае - Mozilla firefox) и устанавливаем на нем расширение FireBug ;

Об этом дополнении:

Firebug интегрируется в Firefox для того, чтобы принести изобилие средств разработки на кончики Ваших пальцев, в то время как Вы путешествуете по сети. Вы можете редактировать, выполнять отладку и просматривать CSS, HTML и JavaScript в режиме реального времени на любой странице в сети...

Открываем файл responsive.css любым текстовым редактором(от себя рекомендую - notepad++ или sublime text, т.к. в них хорошая подсветка кода, дружелюбный интерфейс и прочие удобства).

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

img{

max-width: 100%;

}

Дословно можно перевести этот код так - для всех тегов “img” установить максимальную ширину 100%.

Открываем главную страницу сайта http://dgu.ru , нажимаем на Ctrl+Shift+M для вызова инструмента «Адаптивная верстка», которая позволит быстро изменять размер страницы и увидеть как страница будет меняться на разных разрешениях экранов, итак, при уменьшении ширины страницы, можем наблюдать за тем, что при достижении ширины в 1000px, появилась горизонтальная полоса прокрутки, которая говорит о том, что больше страница уменьшаться не может.

И вот теперь нам понадобится то самое расширение firebug, познакомившись с которым можно получить широкие возможности в разработки/дизайна сайтов, нужно найти блок, который не может дальше сжиматься, т.к. ширина слишком маленькая, немного поигравшись я нашел тег table с фоновым рисунком bg3.gif - это верхнее меню сайта(в котором дублирующиеся ссылки с левого меню), который мешал сайту в дальнейшем уменьшении, скрываем этот тег, если ширина экрана меньше 1000px, для этого добавляем код в файл responsive.css:

@media screen and (max-width: 1000px)

{

table[background$='bg3.gif']{

display: none;

}

}

(Описание медиа запросов можно прочесть на странице - http://htmlbook.ru/css/value/media )

После обновляем страницу и пытаемся опять изменить размер, при достижении ширины 1000px мы можем наблюдать как скрывается тег table(верхнее меню сайта) открывая нам новые пространства для уменьшения страницы.

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

@media screen and (max-width: 920px)

{

#ja-container{

width: 98%;

}

table[background$='bg3.gif']{

display: none;

}

#ja-col2{

display: none;

}

#ja-mainbody{

width: 100%;

}

#ja-contentwrap{

width: 70%!important;

}

#ja-col1{

width: 30%;

}

td[background$='bg_top2.gif']{

display: none

}

#ja-content{

padding: 0 10px 0 20px;

}

}

Если снова обновить страницу, то можем увидеть, как страница сайта меняется в зависимости от ширины области просмотра, добавив еще парочку кусочков кода :

@media screen and (max-width: 850px)

{

#ja-contentwrap{

width: 70%!important;

}

.contentpaneopen {

width: 78%;

}

.contentheading{

font-size: 100%!important;

}

#ja-mainbody-fr #ja-col1{

width: 30%;

}

#ja-col1 .moduletable{

display: none;

}

#ja-wrapper{

overflow: hidden;

}

#ja-content{

padding: 0 5px 0 10px;

}

.blog td {

text-align: left;

}

}

@media screen and (max-width: 500px)

{

img{

max-height: 300px;

float: none!important;

}

.contentpaneopen {

width: 47%;

}

}

@media screen and (max-width: 400px)

{

.contentpaneopen {

width: 44%;

}

#ja-contentwrap

{

width: 99%!important

}

div.moduletable_menu{

display: none;

}

}

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

С хорошим подходом и с хорошей версткой, при помощи адаптивной верстки с помощью Media Queries можно получить отзывчивые, хорошо адаптируемые под разные устройства, страницу(сайт).



Глава 2. Создание гибридных мобильный приложений

2.1 Пример использования компонента WebView и класса WebViewClient

сайт мобильный приложение гибридный

WebView - это компонент в android приложении, который дает возможность простым образом создавать приложения, которые будут открывать web страницы/сайты.

Для начала, в удобном для вас IDE(интегрированная среда разработки, рекомендация google - Eclipse) создаем пустое приложение с базовым Activity и Layout, где корневым элементом Layout-а делаем компонент WebView. Даем компоненту id для дальнейшего взаимодействия с ним.

После создания файла View(представление), нужно открыть наш базовый Activity, написать все необходимые переменные, а также основную часть приложение в методе onCreate(код на скриншоте с комментариями):

Теперь необходимо создать классы MyClient и WebAppInterface.

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

2.2 Пример взаимодействия JavaScript из WebView

Для того, чтобы иметь возможность взаимодействовать с нашим WebView из JS(JavaScript) кода, мы добавляем в код :

web.addJavascriptInterface(new WebAppInterface(this), "Android");

Теперь необходимо создать этот класс, чем и займемся прямо сейчас.

Для того, чтобы вызвать этот метод из JS кода, необходимо у объекта Android(название мы указывали чуть выше) вызвать соответствующий метод(функцию), в нашем случае showToast();

Пример:



Заключение

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

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

В данной работе были рассмотрены популярные способы создания мобильной версии сайта, расписаны преимущества и недостатки каждого способа. На практическом примере была создана мобильная версия сайта http://dgu.ru , а также была создана небольшая программа, которая позволяет получить быстрый доступ к этому сайту

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

Размещено на Allbest.ru