Выпускная квалификационная работа бакалавра Интернет магазин по продаже Андроид-приложений (стр. 3 )

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

Рис 3.1.3

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

Рисунок 3.1.4

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

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

3.2 Проектирование сайта

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

Каждый сайт представляет собой набор из страниц двух типов – уникальные страницы и типовые страницы.

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

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

В итоге мы имеем несколько уникальных страниц – главная, корзина, Личный кабинет, а так же типовые, которые в целом будут оформляться относительно одинаковым способом – такие страницы как «новинки», «бесплатные», «платные» будут выполняться с представлением разной информации в одном стиле и с использованием одних и тех же методов реализации.

3.3Реализация основных элементов сайта

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

При разработке сайта, в первую очередь были созданы страницы, реализующие одно из основных его требований  – легкость дополнения контентом. Одна из таких страниц – «Бесплатные» приложения. Она представляет собой перечень бесплатных приложений, которые можно отсортировать по определенной теме.

<a rel="nofollow"

href=http://linyacrazy. bget. ru/product/rush-rally-2/

data-quantity="1"

data-product_id="104"

data-product_sku=""

class="button product_type_simple ajax_add_to_cart">

Подробнее

</a>

При нажатии на кнопку «Подробнее» происходит переход по ссылке указанной в теге href на страницу с соответствующим приложением и гиперссылка не передает свой вес странице на которую ссылается.

<form class="woocommerce-ordering" method="get">

<select name="orderby" class="orderby">

<option value="menu_order" >Исходная сортировка</option>

<option value="popularity"  selected='selected'>По популярности</option>

<option value="rating" >По рейтингу</option>

<option value="date" >По новизне</option>

<option value="price" >Цены: по возрастанию</option>

<option value="price-desc" >Цены: по убыванию</option>

</select>

       </form>

Здесь производится сортировка товаров по определенным критериям путем изменения параметра «option value».

<tr class="cart_item">

<td class="product-remove">

<a href="http://linyacrazy. bget. ru/cart/?remove_item=a8f15eda80c50adb0e71943adc8015cf&#038;_wpnonce=5d973cbbf1" class="remove" title="Удалить эту позицию" data-product_id="151" data-product_sku="">&times;</a> </td>

<td class="product-thumbnail">

<a href="http://linyacrazy. bget. ru/product/hockey-hero/"><img width="180" height="171" src="http://linyacrazy. bget. ru/wp-content/uploads/2016/06/гл-180x171.jpg" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="гл" /></a> </td>

<td class="product-name" data-title="Товар">

<a href="http://linyacrazy. bget. ru/product/hockey-hero/">Hockey hero</a> </td>

<td class="product-price" data-title="Цена">

<span class="woocommerce-Price-amount amount">5.00<span class="woocommerce-Price-currencySymbol">&#8381;</span></span> </td>

<td class="product-quantity" data-title="Количество">

<div class="quantity">

<input type="number" step="1" min="0" max="" name="cart[a8f15eda80c50adb0e71943adc8015cf][qty]" value="1" title="Кол-во" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" />

</div>

</td>

<td class="product-subtotal" data-title="Итого">

<span class="woocommerce-Price-amount amount">5.00<span class="woocommerce-Price-currencySymbol">&#8381;</span></span>

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

<div class="cart_totals ">

<h2>Сумма в корзине</h2>

<table cellspacing="0" class="shop_table shop_table_responsive">

<tr class="cart-subtotal">

<th>Подытог</th>

<td data-title="Подытог"><span class="woocommerce-Price-amount amount">5.00<span class="woocommerce-Price-currencySymbol">&#8381;</span></span></td>

</tr>

<tr class="order-total">

<th>Итого</th>

<td data-title="Итого"><strong><span class="woocommerce-Price-amount amount">5.00<span class="woocommerce-Price-currencySymbol">&#8381;</span></span></strong> </td>

</tr>

</table>

<div class="wc-proceed-to-checkout">

<a href="http://linyacrazy. bget. ru/checkout/" class="checkout-button button alt wc-forward">

Перейти к оформлению</a>

</div>

Здесь происходит подсчет общей стоимости всех приложений, а также переход к странице оформления по нажатии кнопки «Перейти к оформлению»

<div class="author-avatar"><a href="http://linyacrazy. bget. ru/account/?user=1" title="В личный кабинет"><img alt='' src='http:///avatar/5ecb1efdbbf7911a8683a7b70bacf1c5?s=60&#038;d=mm&#038;r=g' srcset='http:///avatar/5ecb1efdbbf7911a8683a7b70bacf1c5?s=120&amp;d=mm&amp;r=g 2x' class='avatar avatar-60 photo' height='60' width='60' /></a><span title="рейтинг" class="rating-rcl rating-type-user"><span class="rating-value rating-plus">1</span></span></div><div class="buttons"><p><a href="http://linyacrazy. bget. ru/account/?user=1" class="recall-button "><i class="fa fa-home"></i><span>В личный кабинет</span></a></p>

  <p><a href="http://linyacrazy. bget. ru/wp-login. php? action=logout&amp;redirect_to=http%3A%2F%2Flinyacrazy. bget. ru&amp;_wpnonce=6dca0b0a8f" class="recall-button "><i class="fa fa-external-link"></i><span>Выход</span></a></p></div></div></aside><aside id="recent-comments-2" class="widget widget_recent_comments"><h3 class="widget-title">Свежие комментарии</h3><ul id="recentcomments"></ul></aside><aside id="woocommerce_widget_cart-5" class="widget woocommerce widget_shopping_cart"><div class="widget_shopping_cart_content"></div></aside><aside id="rcl-online-users-2" class="widget rcl-online-users"><h3 class="widget-title">Сейчас в сети</h3><div class="userlist mini-list"><div class="user-single">