Сайт визитка рыболовного магазина

6).

Рис. 6. Встроенная Яндекс.Карта.

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

2.

7. Форма обратной связи Для полноценной работы сайту требуется развитая серверная часть — backend. Серверная часть сайта ответственная за хранение, добавление, обработку и оформление информации. Для создания серверной части требуется не только специальное программное обеспечение, но и площадка — хостинг — где сайт можно разместить для публичного доступа.

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

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

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

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

Форма обратной связи сайта ввиду простоты не обладает подобными «защитными механизмами.

Рис. 7. Форма обратной связи.

2.

8. Кнопка навигации «Наверх».

Отдельного рассмотрения заслуживает специальная кнопка «Наверх», предназначенная для того, чтобы пользователь мог быстро переместить к меню страницы. Подобная кнопка может быть реализована без применения JavaScript программирования. Для этого достаточно сделать анкор — специальную закладку вверху страницы. В результате перемещение будет мгновенным, что не всегда удобно для пользователя. Плавного перемещения модно добиться с помощью простейшего JavaScript скрипта, приведенного в листинге 4.

Листинг 4.

<script type="text/javascript" >

$(function () {.

$(window).scroll (function () {.

if ($(this).scrollTop () ≠= 0) {.

$('#toTop').fadeIn ();

} else {.

$('#toTop').fadeOut ();

}.

});

$('#toTop').click (function () {.

$('body, html').animate ({scrollTop:0}, 800);

});

});

</script>

Кнопка «Наверх» технически представляет собой фиксированный (fixed) блок, расположенный в нижнем правом углу страницы (рис. 7).

2.

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

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

Листинг 5.

@font-face {.

font-family: Pompadur; /* Гарнитура шрифта */.

src: url (fonts/pompadur.ttf); /* Путь к файлу со шрифтом */.

}.

В результате импортированный шрифт может быть применен к любому элементу страницы с помощью стиля font-family.

Какие плюсы в итоге даёт нам загрузка файла шрифта с последующим применением через CSS.

Текст легко добавлять и править.

В браузере можно пользоваться поиском и находить желаемые фразы.

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

Поисковые системы хорошо индексируют содержимое документа.

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

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

К тексту через CSS просто добавлять разные эффекты, например тень.

Подобная техника имеет ряд ограничений. Во-первых, не все браузеры поддерживают формат TTF. Во-вторых, не все шрифты поддерживают кириллический набор символов в полном объеме.

Существует современное решение для добавления подходящего шрифта на страницы — Google Fonts. Вставка шрифта заключается в подключении тега link в заголовок страницы листинг 6.

Листинг 6.

<link href=".

https://fonts.googleapis.com/css?family=PT+Serif" rel="stylesheet" >

Шрифт, добавленный подобным образом, не только оптимизирован с точки зрения скорости доставки (поскольку Google имеет сеть CDN для доставки контента по всему миру), но и с точки зрения качества шрифта.

Шрифтом, выбранным для нашего проекта, стал PT Serif — классический шрифт с засечками.

3. Расширение функционала приложения Работа по наращиванию потенциала Интернет-магазина возможна в трех направлениях, приводящих к конечной цели — увеличение продаж:

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

2. Продвижение сайта в поисковых системах. Заключается в расширении ссылочной массы — объема ссылок ведущих на сайт с других сайтов, сходных по тематике. Вопросы продвижения сайта выходят за рамки настоящей курсовой работы [7].

3. Оптимизация сайта под различные устройства. Этому направлению посвящен отдельный раздел работы.

Заключительным словом в отношении оптимизации сайта и расширения его привлекательности является технология AJAX (Asynchronous Javascript and XML), позволяющая отправлять запросы к серверу без перезагрузки страницы [8].

В нашей работе данная технология могла быть использована следующим образом. Для загрузки каталога товаров можно было бы иметь базу в формате JSON или XML на сервере. Оба эти формата, хотя и предназначены в первую очередь для машинной обработки, легко читаемы человеком. Отправляя AJAX запрос на сервер, можно было бы подгружать описания товаров динамически по мере просмотра страницы пользователем. Подобная техника известна под названием ленивая загрузка. Загрузка информации по AJAX позволяет, обращаться к данным, минуя сервер базы данных и серверную часть приложения.

Хорошей практикой разработки веб сайтов является использование технологии AJAX везде, где только возможно.

Заключение

Завершая построение Интернет-магазина «Рыболов», остановимся на основных результатах работы. Основным результатом работы является приобретение и закрепление знаний и навыков построения Интернет приложений, использующих современные технологии. Первым шагом к построению сайта является знакомство и подбор подходящей платформы, и соответствующего языка программирования. Проектирование приложения на основе любой системы предполагает следование основным принципам, заложенным в систему. Основополагающими принципами современной системы управления сайтом являются:

1. Адаптивность;

2. Модульность;

3. Высокая интерактивность.

Эти принципы могут быть реализованы, если следовать стандартам технологий создания сайтов: HTML, CSS и JavaScript.

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

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

Созданный сайт соответствует стандартам, принятым в области веб разработки, в частности HTML, CSS3 и JavaScript и проходит валидацию на validator. w3.org.

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

Орлов Л. Как создать электронный магазин в Интернет. М.: Бук-пресс, 2006.

Котеров Д.В. PHP5 в подлиннике, 2 изд. СПб.: BVH, 2008.

Акила К., Еремеевский А. Интернет-магазин с нуля. Полное пошаговое руководство. СПб.: Питер, 2013.

Сильвио Морето. Bootstrap в примерах. М.: ДМК Пресс, 2017.

Басыров Р. 1С-Битрикс. Строим профессиональный сайт и интернет-магазин. СПб.: Питер, 2009.

Юрасов А. В. Электронная коммерция. М.: Дело, 2003.

Денисова А. Л., Молоткова Н. В., Блюм М. А. Электронная коммерция: основы организации и ведения бизнеса: учебное пособие. Тверь.: Изд-во ФГБОУ ВПО «ТГТУ», 2012.

Веллинг Л., Томсон Л. Разработка веб-приложений с помощью PHP и MySQL. Вильямс, 2016.

Мишель Е. Дэвис, Джон А. Филлипс. Изучаем PHP и MySQL. Символ-Плюс, 2008.

Матевосов А. Основы Symfony 3 и не только. GitBook, 2014.