Web - программирование и интернет технологии

Стр 1 из 7Следующая ⇒

ОТЧЁТ

По учебеной практике

Web - программирование и интернет технологии

Выполнил Абди Арман

Группа 3 ВТиПО “Б”

Проверила Жумагалива А.

Алматы 2018

Содержание

Введение

1. Теоретическая основа

1.1. Способы денежного оборота по средствам сети

1.1.1. Электронная торговля – преимущества и недостатки

1.1.2. Коммерция в сетевой торговле

1.2. Понятие “Интернет-магазин”

1.2.1. Общая схема интернет-магазина

1.2.2. Потребительская аудитория

1.2.3. Функциональные возможности интернет-магазина

1.2.4. Фазы разработки интернет-магазина

1.3. Основы понятия Web-дизайна

1.3.1. Качество веб-дизайна

1.3.2. Технические аспекты создания Web-страницы

1.3.3. Языки разметки и таблицы стилей

1.3.4. Структуры документов HTML и CSS

1.3.5. Языки сценариев и программирования

1.3.6. Web-сервер

1.3.7. Базы данных и СУБД для Web-приложений

2. Тестирование

Заключение

Список использованной литературы

Введение

С развитием Интернета во всём мире наблюдается рост активности в области онлайновой торговли. На сегодняшний день через Интернет можно приобрести практически любые товары и услуги.

Электронная коммерция (e-commerce) - это ускорение большинства бизнес-процессов за счет их проведения электронным образом. В этом случае информация передается напрямую к получателю, минуя стадию создания бумажной копии на каждом этапе. Таким образом, электронную коммерцию можно характеризовать как ведение бизнеса через Интернет. В современном обществе всё больше компаний переносят значительную часть делового общения в Сеть.

Среди отличительных особенностей онлайн коммерции перед традиционной торговлей можно отметить:

· отсутствие географических, временных и языковых барьеров, что позволяет продвигать товары и услуги на новые рынки сбыта;

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

· более высокий уровень конкуренции: расстояние между магазинами всего несколько секунд - именно это время необходимо для загрузки соответствующего сайта;

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

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

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

· предоставление рекламных мест;

· прямые продажи товаров, услуг и информации;

· техническая поддержка;

· предоставление инструментов для ведения бизнеса.

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

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

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

Предоставление инструментов для ведения бизнеса, или ASP (Application Service Providers - провайдер услуг доступа к приложениям, расположенным на удаленном от пользователя сервере), - относительно новый, но активно развивающийся вид получения прибыли. Так же как и техническая поддержка через Интернет, ASP позволяет более экономно расходовать средства, выбирая необходимые приложения для использования и внося за них небольшую ежемесячную плату, вместо того, чтобы покупать дорогостоящие решения. ASP решает проблему постоянного обновления приложений, которые обновляются на сервере провайдера и загружаются по мере необходимости, а не приобретаются компанией отдельно.

Интернет-приложения условно можно разделить на два вида: использующие и не использующие интерфейс с пользователем.

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

Интернет-приложения, не взаимодействующие с пользователем, (баннерообменные сети, службы учета посетителей и т.д.), в большинстве случаев, являются "вспомогательной" частью других интернет-приложений.

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

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

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

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

Теоритическая основа

Потребительская аудитория

Основная масса клиентов - мужчины со средними или высокими доходами в возрасте 25-40 лет.

Существует несколько групп покупателей:

· 1 группа - клиенты, заказывающие книги, прежде всего, те, которые необходимы в их профессиональной деятельности;

· 2 группа - "увлеченные". В эту категорию входят коллекционеры игрушек, книг, записей любимых исполнителей. Сюда можно отнести любителей спорта, рыбалки, туризма. Эти клиенты заказывают товары для удовлетворения своих интересов;

· 3 группа - клиенты, заказывающие различные товары "народного потребления", - одежду, сувениры, электронику, бытовую технику, предметы домашнего обихода. Эти люди считают, что могут приобрести более интересные и оригинальные модели, подчас дешевле, чем в обычных магазинах;

· 4 группа - "любители новинок", приобретающие товары, еще не попавшие на рынок. Как правило, это обеспеченные люди.

Основы понятия веб-дизайна

Веб-дизайн (англ. Web design, веб проектирование) - разновидность дизайна, который занимается проектированием пользовательских веб-интерфейсов для сайтов и веб-приложений. Понятие веб-дизайна включает в себя два аспекта: технический и творческий. С технической точки зрения, веб-дизайн является проектированием, использующим верстку посредством гипертекстовой разметки (HTML), языка описания внешнего вида документа (CSS), языков программирования (PHP, JavaScript, Ajax). С творческой точки зрения веб-дизайн является художественным оформлением электронных ресурсов. Оба эти аспекта являются неделимым целым, так как невозможно исполнение веб-разработки без художественного оформления, и также невозможно разработать функциональный дизайн сайта без проектирования. Таким образом, веб-дизайн можно условно назвать художественным конструированием. Качество созданного веб-дизайна определяется многими факторами, которые необходимо учитывать при создании сайта, здесь важны не только технические, но также социальные, психологические и другие аспекты.

Качество веб-дизайна

Технические факторы.

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

Характеристики монитора (размер экрана, разрешающая способность, количество цветов), его качество. Наиболее рациональным веб-дизайном считается тот, который не теряет своего качества при разрешении от 600х800 до 1240х1024 (от 15" ЭЛТ до 19" ЭЛТ или 17" LCD). Основное разрешение, на которое следует ориентировать веб-дизайн - 1024х768 пикселей. Основной режим мониторов, на которые ориентируется веб-дизайн: 15 разрядов цветов и выше (число цветов 65536 и выше).

Установка или отключение возможности просмотра графики при просмотре сайта. При возможном отключении графики, веб-дизайн не должен сильно страдать. Должны быть прописаны атрибуты "alt" у всех значимых изображений (тогда текстовое значение картинок будет заменять графическое). Вместе с использованием фоновых изображений для блоков следует определить и фоновый цвет.

Кросс-браузерность (версия браузера). Следует учитывать, что посетителями используются разные браузеры, которые по-разному интерпретируют веб-страницу. Веб-дизайн должен максимально одинаково смотреться в поздних версиях наиболее распространенных браузеров. На сегодняшний день это Google Chrome, Mozilla Firefox и Opera.

Настройки системы безопасности компьютера посетителя. Например, настройки безопасности могут отключить некоторые JavaScript - скрипты, блокировать всплывающие окна.

Настройки браузера (размер шрифта, тип шрифта и пр.). Обычно размер шрифта сайтов в браузере интерпретируется как 10-12 пунктов. Оформление (размер шрифта, гарнитура, стиль) заголовков, названий страниц и пр. определяется разработчиком при создании дизайна сайта.

Версия операционной системы, установленная на компьютере посетителя. Версия ОС может влиять, например, на отображение цветовой гаммы.

Местоположение принимающего компьютера: город, страна. От этого параметра зависит отображение кодировки. В России стандартно применение "windows-1251"-кодировки. С некоторых пор, в мире осуществляется переход на универсальную кодировку "utf-8", одинаково хорошо отображающуюся на разных языках.

Социальные факторы.

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

· пол посетителя: мужчина или женщина, его возраст;

· его образование;

· место работы;

· материальное положение.

Психологические факторы:

· мотивация;

· степень заинтересованности посетителя;

· задачи, которые ставит перед собой посетитель;

· личностные особенности (характер, темперамент, склонности);

· психологическое состояние (мрачное, игривое, приподнятое);

· самочувствие посетителя, степень его усталости;

· релевантность - соответствует или нет информация, представленная на сайте, тому ключевому слову, по которому был найден сайт.

Физиологические факторы.

Перед началом разработки веб-дизайна сайта следует определиться, будет ли производиться учет физиологических факторов, например, таких как дефекты зрения (близорукость, дальнозоркость, дальтонизм).

Структура HTML .

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

Теги можно разделить на граничные и унарные. Унарные теги представляют собой определенные операции, предписывающие браузеру совершить определенное действие по достижению данного тега при обработке html - документа. Например, тег <br /> осуществляет перевод на новую строку.

Граничные теги определяют, как будет выглядеть на экране пользователя часть текста, заключенная внутрь этого элемента. Например, тег <p></p> определяет вид абзаца текста.

Элементы могут содержать атрибуты, определяющие те или иные их свойства (например, размер шрифта для тега <font>). Атрибуты указываются в открывающем теге.

В HTML не имеет значения регистр, в котором набраны имена тегов и их атрибутов (в отличие от XHTML). Элементы могут быть вложенными.

Кроме элементов, в HTML-документах есть и сущности (англ. Entities - специальные символы). Сущности имеют следующий вид: "&имя; " или "&#NNNN;", где "NNNN" - код символа в Юникоде в десятеричной системе счисления (например, &nbsp - символ неразрывного пробела).документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML <! DOCTYPE…>, которая обычно выглядит примерно так:

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict. dtd">

Указание этой строки помогает добиться корректного отображения документа в браузере.

Теги <html></html>, внутри которых находится вся основная информация HTML-документа. Информация вне этих тегов будет игнорироваться, либо некорректно интерпретироваться.

Внутри этих тегов документ подразделяется на две части:

· заголовок, ограниченный тегами <head></head>; как правило, содержит дополнительные данные о странице, такие как META-теги, заголовок страницы внутри тегов <title></title>, внутренние таблицы стилей внутри тегов <style></style>, скрипты внутри тегов <script></script>;

· тело документа, заключенное внутрь тегов <body></body>, содержит всю несущую страницей информацию, выводимую в главном окне браузера.

Области <head> и <body> не пересекаются. Любая информация вне данных тегов, но внутри <html>-области игнорируется, если не несет с собой управляющий характер (например, является java-скриптом).

Структура CSS .

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

Схематически это можно показать так:

Cелектор, селектор {свойство1: значение; свойство2: значение; свойство3: значение;. }

Тег {свойство1: значение; свойство2: значение;. }

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

Имя класса {свойство1: значение; свойство2: значение;. }

Тег class = ”Имя класса”

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

#Имя идентификатора {свойство 1: значение; свойство2: значение;. }

Тег id = ”идентификатор”

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

Структура PHP .

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

Синтаксис PHP .

Для работы программы не требуется описывать какие-либо переменные и используемые модули. Любая программа может начинаться непосредственно с оператора PHP.исполняет код, находящийся внутри ограничителей, таких как <? php? >. В основном, это используется для вставки PHP-кода в HTML-документ. Помимо ограничителей <? php? >, допускается использование дополнительных вариантов, таких как <?? > и <script language="php"> </script>. Всё, что находится вне ограничителей, выводится без изменений.

Имена переменных начинаются с символа $, тип переменной объявлять не нужно. Имена переменных, функций и классов чувствительны к регистру. Константы также чувствительны к регистру.рассматривает переход на новую строку как пробел, так же как HTML и другие языки со свободным форматом. Инструкции разделяются с помощью точки с запятой (;), за исключением некоторых случаев, после объявления конструкции if/else и циклов.

JavaScript - скриптовый язык программирования.

Наиболее широкое применение находит в браузерах в качестве языка сценариев для придания интерактивности .

Текст программы встраивается непосредственно в HTML-документ и интерпретируется самим браузером.

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

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

Основная идея JavaScript заключается в предоставлении пользователю возможности изменять значения атрибутов и свойства среды отображения в процессе просмотра HTML-страницы. Например, изменение фона, размера изображения, открытие нового окна. При этом не происходит перезагрузки страницы.

Структура JavaScript.

Структурно JavaScript можно представить в виде объединения трех четко различимых друг от друга частей:

· ядро (англ. ECMAScript), которое описывает типы данных, инструкции, ключевые и зарезервированные слова, операторы, объекты, регулярные выражения;

· объектная модель браузера (англ. Browser Object Model) - специфичная для каждого браузера часть языка, отвечающая за взаимодействие ядра и объектной модели документа. Основное предназначение - управление окнами веб-браузера и обеспечение их взаимодействия, управление фреймами, системные диалоги, управление адресом открытой страницы, управление информацией о браузере, управление информацией о параметрах монитора, ограниченное управление историей просмотра страниц, поддержка работы с HTTP-cookie;

· объектная модель документа (англ. Document Object, DOM) - не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML, XHTML и XML -документов, а также изменять содержимое, структуру и оформление таких документов.

Встраивание программного кода в веб-страницу:

· расположение внутри страницы.

Для добавления JavaScript-кода на страницу используются теги:

· расположение внутри тега.

Спецификация HTML описывает набор атрибутов, используемых для задания обработчиков событий, например:

<a href = "delete. php" onclick = "return confirm ('Вы уверены? '); ">Удалить</a>

В данном случае нажатие на ссылку функция "confirm" вызывает модальное окно с надписью "Вы уверены". Разумеется, этот код будет работать, только если в браузере есть и включена поддержка JavaScript, иначе переход по ссылке произойдёт без предупреждения;

· вынесение в отдельный файл.

Подключение отдельного файла скрипта с помощью конструкции:

Web-сервер

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

Одним из самых популярных серверов Интернет является Apache. Его популярность обусловлена, прежде всего, тем, что он является бесплатным и достаточно быстрым. Основными достоинствами Apache считаются надёжность и гибкость конфигурации. Он позволяет подключать внешние модули для предоставления данных, модифицировать сообщения об ошибках.

Несмотря на то, что первоначально данный сервер разрабатывался для операционных систем UNIX, сейчас он адаптирован под операционную систему Windows. Web-сервер Apache - своего рода стандарт сервера в сети Интернет.

Тестирование

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

Таблица 3.1 – совместимость с браузерами.

Браузер	Оценка
Google Chrome	Положительная.
Mozilla Firefox	Положительная.
Opera	Положительная.
Internet Explorer	Положительная.

При вводе в адресную строку не существующие страницы отобразится ошибка, в соответствии с рисунком 3.2.

Рисунок 3.2 – Сообщение об ошибке.

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

Рисунок 3.3 – Сообщение об ошибке.

При успешной регистрации, появится сообщение в соответствии с рисунком 3.4

Рисунок 3.4 – Сообщение об успешной регистрации.

Для корректного функционирования сайта в браузере должна быть включена поддержка использования сценариев JavaScript.

Заключение

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

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

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

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

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

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

Список использованной литературы

1. https://www.bibliofond.ru

2. https://wikipedia.org

3. Спейнауэр С. Справочник Web-мастера. СПб.: BHV, 1997.

4. Ратшиллер Т., Геркен Т. PHP4: разработка Web-приложений. СПб: Питер, 2001.

5. Томсон Л., Веллинг Л. Разработка Web-приложений на PHP и MySQL. - К.: "ДиаСофт", 2001.

6. Яргер Р., Риз Дж., Кинг Т. MySQL и mSQL. Базы данных для небольших предприятий и Интернета. - СПб: Символ-Плюс, 2000.

7. Орлов С.Д. Технологии разработки программного обеспечения. Учеб. пособие. 2-е изд. СПб.: Питер, 2003.