Разработка сайта "Интернет-магазин средств связи" средствами веб-программирования PHP, HTML 4.01, CSS, JavaScript

Муниципальное образовательное учреждение высшего профессионального образования "Южно Уральский Профессиональный Институт"

Кафедра информатики и вычислительной техники

Контрольная работа

по дисциплине "Программирование"

Тема: Разработка сайта "Интернет-магазин средств связи" средствами веб-программирования PHP, HTML 4.01, CSS, JavaScript

Выполнил

Мурашкин Антон Викторович,

студент гр. ПСЗ-1-08,

специальность 230105.65

"Программное обеспечение ВТ и АС

Проверил

Кириллова Светлана Николаевна,

преподаватель ЮУПИ

Челябинск- 2010

Содержание

программирование сайт контент дизайн

Введение

1. Техническое задание

2. Технология создания сайта

2.1. Разработка структуры сайта

2.2. Определение структуры и формирование контента сайта

2.3. Разработка системы навигации

2.4. Особенности дизайна сайта

3. Средства разработки сайта

Заключение

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

Приложения

Введение

Значение и обзор современных средств веб-программирования

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

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

В качестве основных тенденций в развитии современных систем программирования следует указать внедрение в них средств разработки на основе так называемых языков четвертого поколения 4GL (four generation languages), а также поддержка систем быстрой разработки программного обеспечения RAD (rapid application development).

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

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

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

Предполагаемое назначение разрабатываемого сайта

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

1. Техническое задание

В начале работы выбрать тип сайта, который будете создать. Тип сайта: Интернет-магазин. Далее определиться с тематикой сайта: Тематика сайтов: Интернет-магазин средств связи.

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

Блок схема сайта: определяется веб-дизайнером самостоятельно. Головная (начальная) страница сайта должна содержать гиперссылки, обеспечивающие переход с нее на не менее чем 95% страниц сайта, но не более чем 160 гиперссылок. Объём сайта: 100 Мб.

Минимальное разрешение монитора, на котором будет просматриваться сайт: 1024 х 768 пикселей. При указанном разрешении возможность просмотра страниц сайта без горизонтальной прокрутки браузера не предусматривается. Основной браузер, которым будет просматриваться сайт, и его минимальная версия: IE 7 и выше.

Цветовая палитра: основной режим мониторов, на которых будет просматриваться сайт: 15 разрядов цветов и выше (число цветов 65536 и выше). При разработке сайта должен быть обеспечена возможность его просмотра при использовании безопасной цветовой палитры (разрядность цветов 8). Изменения оттенков цветов, при просмотре сайта с использованием безопасной цветовой палитры, не оговариваются.

Общий фон сайта: общий фон сайта светлый (белый). Допускается использование светлого фонового рисунка. Размер и вид шрифта сайта: размер шрифта сайта должен быть в пределах 10-12 для оформления текста. Размер шрифта для оформления заголовков, названия страниц и т.д. не оговаривается. Вид (название) шрифта не оговаривается.

Срок разработки сайта: с 15 сентября по 15 декабря 2009 года.

2. Технология создания сайта

2.1 Разработка структуры сайта

Схема структуры сайта

Рисунок 1-Схема: Главная страница

Рисунок 2-Схема: Открытая ссылка

Рисунок 3-Схема структуры сайта: Меню

Рисунок 4-Схема структуры сайта: Главная

Рисунок 5-Схема структуры сайта: Ссылка Звонок оператору

Рисунок 6-Схема структуры сайта: Открытая ссылка

Структурная схема сайта представлена в блочном варианте для облегчения прочтения и восприятия.

Особенности структуры

Данный сайт построен с использованием технологии фреймов. Благодаря технологии фреймов окно браузера делится на несколько частей (областей). Каждая часть по сути представляет собой отдельное окно, тем самым пользователю предлагается работать как-бы с несколькими окнами сгрупированными в единое целое. Естественно, это не могло не отразиться на структуре сайта пользователь переходя по ссылкам от страницы к странице всё время визуально как-бы находится на одном уровне, и не замечает степень углубления или поднятия в структуре сайта. Вершиной структуры (структурной схемы) является пункт "Меню" от которого происходит развевление структуры на различные ссылки, "Главная" страница, так же как группы товаров и связь с оператором является одним из пунктов. Далее происходит разветвление каждой ссылки, максимальное ветвление разумеется происходит на ссылке "Главная", которая дублирует в себе все остальные ссылки пункта "Меню" (группы товаров, звонок оператору). Ссылки относяшиеся к определённым товарам имеют более простую схему ветвления—это либо возврат на "Главную" страницу, либо на страницу "Звонок оператору". Ссылка "Звонок оператору" имеет ветвление подобное пункту "Меню", и обеспечивает переходы как на "Главную" страницу, так и к любому товару.

2.2 Определение структуры и формирование контента сайта

Схема структуры контента

Рисунок 7-Схема: Главная страница

Схема структуры сайта

Рисунок 8-Схема: Открытая ссылка

Особенности и объем контента

Контент представляет собой каталог товаров, в котором приведены фотографии и описание различных средств связи (мобильных телефонов). Браузер открыв окно предлагает пользователю "Главную" страницу, где имеется перечень товаров и доступ к дополнительным опциям, все эти же возможности продублированы в блоке "Меню", который расположен в левой части страницы. Перейдя по ссылке товара можно ознакомится с его характеристиками, и далее воспользовавшись встроенными кнопками ссылками либо вернуться на "Главную" страницу, либо получить данные для связи с оператором. Связаться с оператором возможно так же через специальный пункт "Меню". Сайт создан с помощью языка разметки гипертекста HTML. При производстве использована технология фреймов. В качестве графической составляющей использованы рисунки в формате .jpg, т.к. данный формат сохраняет рисунок с минимальным объёмом (размером), размером 15—100КБ, и безопасная цветовая палитра. Объём сайта составляет—6,7МБ в обычном виде и 5,32—ввиде архива Win.rar.

Источники для формирования контента сайта

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

Средства и способы форматирования контента

Для форматирования контента использованы средства языка разметки гипертекста HTML. Файлы содержащие кодировку HYML написаны в текстовом редакторе "Блокнот" переведены в формат HTML путём сохранения докуиента с соответствующим расширением (.html). Все рисунки выполнены в формате .jpg.

2.3 Разработка системы навигаци

Средства навигации

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

Особенности системы навигации

Система навигации данного сайта создана с учётом возможности перехода из ооного пункта в любогой пункт за одно нажатие ссылки.

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

2.4 Особенности дизайна сайта

Описание средств для создания дизайна

Для создания дизайна использованы средства языка разметки гипертекста HTML. Размеры рисунков (фотографий) задаются специальными командами (операторами, тегами), с их помошью также произведено распределение объектов на страницах сайта. В качестве основного разметочного инструмента использованы таблицы. Цветовые решения выполенные без рисунков (фотографий) созданы с использованием кодировки цветов безопасной палитры.

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

Использование библиотек

Библиотека данного сайта состоит из общей папки К.р._веб-прогр._МурашкинАВ, в которую включены четыре управляющих HTML файла: index.html, logo.html, menu.html, content.html, sale.html; два рисунка: 1.jpg, a0001.jpg и архив из двадцати одной папки (1, 2, 3….21). Каждая папка из этого архива(1, 2, 3…21) содержит управляющий файл HTML (1.html, 2.html, 3.html….21.html) и коллекции картинок товаров. Например: папка-1: 1.html, 8800_1.jpg, 8800_2.jpg, 8800_3.jpg.

3. Средства разработки сайта

Описание языка разметки или веб-программирования

Тег <HTML> </HTML>—указывает программе просмотра страниц что это HTML документ.

Тег <HEAD> </HEAD>—определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин

Тег <TITLE> </TITLE>—не является частью отображаемого текста. Он может отображаться, например, как заголовок страницы или название окна. Только один TITLE может быть в документе. Элемент TITLE должен использоваться для идентификации содержимого документа. Поскольку пользователи часто обращаются к документам вне контекста, авторы должны предоставлять осмысленные заголовки. Таким образом, вместо такого заголовка, как "Введение", который не даёт достаточно информации о документе, авторы должны записать, например, так: "Введение в HTML". Название должно быть не более 40 символов, т.к. название, привышающее размер в 40 символов непомещается в строку заголовка окна браузера.

Тег <frameset> </frameset>—служит для описания фрейма.

Атрибуты:

cols="200,*,…, *"—производит вертикальное разделение окна,

rows="100,*,…, 100"—производит горизонтальное разделение окна.

Тег <frame> служит для описания фрейма. Закрывающий тег не требуется.

Атрибуты:

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

Src—определяет исходный документ, содержащийся в фрейме,

Noresize—если этот атрибут присутствует, он сообщает агенту пользователя, что размеры фрейма изменять нельзя,

Scrolling—создаёт либо убирает полосы прокрутки,

marginwidth="0" marginheight="0"—определяют ширину полей фрейма.

Тег <body></body>—определяет видимую часть документа.В этом разделе располагается вся содержательная часть документа (текст статьи, фотографии, формы для заполнения, другие объекты).Тег имеет ряд необязательных атрибутов. Рекомендуется вместо нежелательных атрибутов использовать каскадные таблицы стилей. Начальный и конечный теги необязательны

Атрибуты:

Bgcolor—устанавливает цвет фона документа, используя значение цвета в виде RRGGBB—пример: FF0000—красный цвет, либо используя константы цвета, например для желтого цвета, используемой на данной странице <body bgcolor= "yellow">

Background—указывает цвет фона документа,

Text—устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет, либо используя константы цвета, например для зеленого цвета, используемой на данной странице <body text= "green">,

Link—устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB—пример: 00FF00—зеленый цвет,либо используя константы цвета,например для красного цвета,используемой на данной странице <body link= "red">,

Vlink—устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде RRGGBB—пример: 333333—серый цвет,

Alink—устанавливает цвет гиперссылок при нажатии. Например, на этой странице ссылки становятся синими при нажатии мышкой

bgproperties=fixed—фоновое изображение прокручиваться не будет. Т.е. текст будет двигаться при нажатии PageDown, а фон—нет. Данный параметр поддерживается только Internet Explorer

Эти параметры можно объединять.

Тег <img src="8800_1.jpg"> вставка рисунка.

Атрибуты:

alt="нокиа-8800"—всплывающая подсказка,

height="100"—высота рисунка, может задаваться в %,

width="200"—ширина рисунка, может задаваться в %,

border="0"—обрамление рисунка.

Тег <center></center>—выключка по центру.

Тег <Align left></ Align left >—выключка по левому краю.

Тег < Align right ></ Align right >—выключка по правому краю.

Тег <A> </A>—служит для создания гипертекста (ссылок). Гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Сам гипертекст поддается форматированию. Закрывающий тег обязателен. Тег должен содержать либо атрибут name, либо href

Атрибуты:

href —задает URL ресурса, на который должен перейти пользователь, щелкнув по ссылке. Атрибут может указывать как на внешний документ, так и на элемент внутри данного документа. Для создания гиперссылки вызова почтовой программы для написания письма используется <a href="mailto:your@email">,

target=" name"—имя ссылки или фрейма.

Тег <font></font> определяет выводимый шрифт, его цвет и размер. Закрывающий тег требуется.

Атрибуты:

fase="times new roman"—задаёт тип техста,

color—зазаёт цвет текста,

size="+2"—размер текста.

Тег <b></b>—жирный текст,

Тег <i></i>—курсивный текст.

Тег <h1></h1>—заголовок.

Тег <TABLE></TABLE>—создает таблицу. Все прочие элементы таблицы должны быть вложенными в него. Допускается также вложение таблиц одна в другую, т.е. содержимым ячейки может быть другая таблица. Закрывающий тег обязателен.

Тег <tr></tr>—создает строку таблицы.

Тег <td></td>—создает ячейку таблицы.

Атрибуты:

Align—выравнивание таблицы относительно документа. Возможные значения: center, left, right,

Background—строка, определяющая рисунок для заднего фона,

Bgcolor—определяет задний фон таблицы,

Border—толщина рамки в пикселах. Если атрибут не указан, то таблица выводится без видимой рамки,

Bordercolor—цвет рамки,

Cellspacing—задает расстояние между ячейками таблицы,

Cellpadding—задает расстояние между содержимым ячейки и ее рамкой.

Тег <BR>—не требует парного закрывающего тега, (BReak line) вставляет перевод строки.

Тег <DIV></DIV>—элемент DIV определяет контейнер для HTML. Закрывающий тег: требуется.

Заключение

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

Кроме всего прочего влияет даже такой фактор, как размер элементов сайта, т.к. пока грузится например картинка в Internet Explorer в другом браузере уже можно просмотреть часть страницы сайта. Приходится учитывать так же вожмозности пользователей, так например сайт с низкими параметрами будет некомфортно просматривать на Full HD мониторе. Так же проблемно будет пользователю с низкими возможностями аппаратных средств просматривать сайт с очень высоким разрешением элементов. Не каждый пользователь может позволить себе выделенку с максимальной скоростью в своём регионе, и соответственно загрузка Web-страниц будет происходить с разными скоростями.

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

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

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

Литература

1.Храмцов П.Б. , Брик С.А. , Русак А.М. , Сурин А.И. Основы web-технологий, БИНОМ. Лаборатория знаний, Интернет-университет информационных технологий - ИНТУИТ.ру, 2007.

2.Громов Ю.Ю., Земской Н.А., Иванова О.Г., Лагутин А.В. Основы Web-инжиниринга. В 2 ч. Ч. 1: Учебное пособие.—Тамбов: Издательство ТГТУ, 2007.

3.Пауэлл Т. WEB-дизайн.—СПб.: Питер, 2005.

4.Розенсон И.А. Основы теории дизайна.—СПб.: Питер, 2006.

5.Кузнецов, М.В. РНР 5. Практика разработчика Web-сайтов. / М.В. Кузнецов, И.В. Симдянов, С.В. Голышев.—СПб.: БХВ-Петербург, 2007.

6.Захаркина В.В. JavaScript. Основы клиентского программирования: Учебное пособие.—СПб.: Ф-т филологии и искусств СПбГУ, 2007.

7.Белозубов А.В., Николаев Д.Г. Основы работы с HTML-редактором Adobe Dreamweaver CS3: Учебно-методическое пособие.—СПб.: СПбГУ ИТМО, 2007.

8. http://www.alleo.ru

9. http://www.sotasot.ru

10. http://www.mobilelux777.ru

11. http://www.vertu-luxe.ru

Приложение 1

Скриншоты страниц

Рисунок 9-Скриншот страницы: Главная

Рисунок 10-Скриншот страницы: Нокиа 8800

Рисунок 11-Скриншот страницы: Нокиа 8800 (окончание)

Рисунок 12-Скриншот страницы: Нокиа 8820

Рисунок 13-Скриншот страницы: Нокиа 8820 (окончание)

Рисунок 14-Скриншот страницы: I Phone Air Slim

Рисунок 15-Скриншот страницы: Звонок оператору

Рисунок 16-Скриншот страницы: I Phone Air Slim (окончание)

Приложение 2

1. Имя сайта (название домена): www.S_MAG.ru

2. Название сайта: cайт "Интернет Магазин Средств Связи". Далее - Фирма.

3. Назначение сайта (цель создания сайта):

Практическое задание по дисциплине Web-програмирование.

4. Язык сайта: русский/english.

5. Основные ключевые слова, по которым сайты должны находить по запросам в поисковых системах и Интернет – каталогах:

Интернет Магазин Средств Связи.

6. Объём и состав текстовой и графической информации в электронном виде: необходимый и достаточный.

7. Предполагаемая возрастная аудитория сайта: от 10 лет и старше, ядро аудитории от 18 до 50 лет.

8. Количество страниц сайта: сайт содержит следующие html страницы: 1—Главная (домашняя) страница; 2…22—Вид товара с описанием характеристик;23—Страница заказа ( Звонок оператору).

9. Кнопки управления (навигация сайта): Текстовые и графические гиперссылки. Пользователь с просматриваемой страницы может перейти на другую любую по его усмотрению станицу сайта.

10. Объём сайта: 6,70 МБ (ввиде архива Win.rar—5,32 МБ).

11. Оформление рисунков: все рисунки объемом от 15—100 МБ в формате .jpg. Рисунки на страницах с описанием характреристик товара выполнены с замещающим текстом.

12. Основной диапазон разрешения мониторов, на которых будет просматриваться сайт: основное разрешение, на которое оптимизируется сайт: 1280х800 пикселей.

13. Основной браузер, которым будет просматриваться сайт, и его минимальная версия: Mozilla Firefox 3.6.10, Opera 10.62, Safari 4.0.4 , Internet Exsplorer 8.0.