Муниципальное образовательноеучреждение высшего профессионального образования «Южно УральскийПрофессиональный Институт»
Кафедра информатики и вычислительнойтехники
Контрольная работа
по дисциплине «Программирование»
Тема: Разработка сайта «Интернет-магазинсредств связи» средствами веб-программирования 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 документ.
Тег —определяет место, где помещается различная информация неотображаемая в теле документа. Здесь располагается тег названия документа итеги для поисковых машин
Тег —не является частьюотображаемого текста. Он может отображаться, например, как заголовок страницыили название окна. Только один TITLE может быть в документе. Элемент TITLEдолжен использоваться для идентификации содержимого документа. Посколькупользователи часто обращаются к документам вне контекста, авторы должныпредоставлять осмысленные заголовки. Таким образом, вместо такого заголовка,как „Введение“, который не даёт достаточно информации о документе,авторы должны записать, например, так: „Введение в HTML“. Названиедолжно быть не более 40 символов, т.к. название, привышающее размер в 40символов непомещается в строку заголовка окна браузера.
Тег —служитдля описания фрейма.
Атрибуты:
cols=»200,*,…, *"—производит вертикальноеразделение окна,
rows=«100,*,…, 100»—производит горизонтальноеразделение окна.
Тег служит для описания фрейма. Закрывающий тегне требуется.
Атрибуты:
Name—назначает имя текущему фрейму. Это имя можетиспользоваться в качестве цели в последующих ссылках,
Src—определяет исходный документ, содержащийся в фрейме,
Noresize—если этот атрибут присутствует, он сообщает агентупользователя, что размеры фрейма изменять нельзя,
Scrolling—создаёт либо убирает полосыпрокрутки,
marginwidth=«0» marginheight=«0»—определяют ширинуполей фрейма.
Тег —определяет видимую часть документа.В этом разделерасполагается вся содержательная часть документа (текст статьи, фотографии,формы для заполнения, другие объекты).Тег имеет ряд необязательных атрибутов.Рекомендуется вместо нежелательных атрибутов использовать каскадные таблицыстилей. Начальный и конечный теги необязательны
Атрибуты:
Bgcolor—устанавливает цвет фона документа, используя значениецвета в виде RRGGBB—пример: FF0000—красный цвет, либо используя константыцвета, например для желтого цвета, используемой на данной странице
Background—указывает цвет фона документа,
Text—устанавливает цвет текста документа, используя значениецвета в виде RRGGBB — пример: 000000 — черный цвет, либо используя константы цвета,например для зеленого цвета, используемой на данной странице ,
Link—устанавливает цвет гиперссылок, используя значение цветав виде RRGGBB—пример: 00FF00—зеленый цвет, либо используя константыцвета, например для красного цвета, используемой на данной странице ,
Vlink—устанавливает цвет гиперссылок на которых вы ужепобывали, используя значение цвета в виде RRGGBB—пример: 333333—серый цвет,
Alink—устанавливает цвет гиперссылок при нажатии. Например,на этой странице ссылки становятся синими при нажатии мышкой
bgproperties=fixed—фоновое изображение прокручиваться небудет. Т.е. текст будет двигаться при нажатии PageDown, а фон—нет. Данныйпараметр поддерживается только Internet Explorer
Эти параметры можно объединять.
Тег вставка рисунка.
Атрибуты:
alt=«нокиа-8800»—всплывающая подсказка,
height=«100»—высота рисунка, может задаваться в %,
width=«200»—ширина рисунка, может задаваться в %,
border=«0»—обрамление рисунка.
Тег —выключка по центру.
Тег —выключка по левому краю.
Тег —выключка по правому краю.
Тег —служит для создания гипертекста(ссылок). Гипертекст позволяет осуществлять мгновенный переход от одного фрагментатекста к другому. Сам гипертекст поддается форматированию. Закрывающий тегобязателен. Тег должен содержать либо атрибут name, либо href
Атрибуты:
href—задает URL ресурса, на который должен перейти пользователь, щелкнув по ссылке.Атрибут может указывать как на внешний документ, так и на элемент внутриданного документа. Для создания гиперссылки вызова почтовой программы длянаписания письма используется ,
target=" name"—имяссылки или фрейма.
Тег определяет выводимый шрифт, егоцвет и размер. Закрывающий тег требуется.
Атрибуты:
fase=«times new roman»—задаёт тип техста,
color—зазаёт цвет текста,
size="+2"—размер текста.
Тег —жирный текст,
Тег —курсивный текст.
Тег —заголовок.
Тег —создаеттаблицу. Все прочие элементы таблицы должны быть вложенными в него. Допускаетсятакже вложение таблиц одна в другую, т.е. содержимым ячейки может быть другаятаблица. Закрывающий тег обязателен.
Тег —создает строку таблицы.
Тег —создает ячейку таблицы.
Атрибуты:
Align—выравнивание таблицыотносительно документа. Возможные значения: center, left, right,
Background—строка, определяющая рисунок длязаднего фона,
Bgcolor—определяет задний фонтаблицы,
Border—толщина рамки в пикселах. Еслиатрибут не указан, то таблица выводится без видимой рамки,
Bordercolor—цвет рамки,
Cellspacing—задает расстояние междуячейками таблицы,
Cellpadding—задает расстояние междусодержимым ячейки и ее рамкой.
Тег —не требует парного закрывающего тега, (BReakline) вставляет перевод строки.
Тег —элемент 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. www.alleo.ru
9. www.sotasot.ru
10. www.mobilelux777.ru
11. 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.