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

Размещено на http://www.allbest.ru/

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

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

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

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

Тема: Разработка сайта "Интернет-магазин средств связи" средствами веб-программирования 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. Размеры рисунков (фотографий) задаются специальными командами (операторами, тегами), с их помошью также произведено распределение объектов на страницах сайта. В качестве основного разметочного инструмента использованы таблицы. Цветовые решения выполенные без рисунков (фотографий) созданы с использованием кодировки цветов безопасной палитры.