Министерство образования и науки Республики Казахстан Северо-Казахстанский государственный университет им. М. Козыбаева «Допущен к защите»______________________ И.о. зав. кафедрой «Информационные системы» _______________________ Е.В.Шевчук КУРСОВОЙ ПРОЕКТ На тему: «Разработка web-сайта «Интернет-витрина компьютерного магазина» по дисциплине: Web-технологии ИС1ИС.10713079.06 КП Выполнил студент группы ИС – 13 Соболь М.В. Научный руководитель ст. преподаватель информационных систем Отинова И.В. Нормоконтроль магистр технических наук Касимов И.Р. Петропавловск, 2015 1 СОДЕРЖАНИЕ ВВЕДЕНИЕ...................................................................................................... 5 1. Теоретические аспекты разработки интернет-витрины.......................... 7 1.1 Понятие Web - витрины ........................................................................... 7 1.1.1 Принципы построения Web - витрины ................................................ 9 1.1.2 Принципы архитектуры Web – витрины ........................................... 10 1.2 Формирование требований к системе ................................................... 11 1.2.1 Требования к интерфейсу web-страниц............................................. 11 1.3. Обоснование выбора средств реализации курсового проекта .......... 12 1.3.1 Развитие HTML .................................................................................... 12 1.3.2 HTML – язык разметки гипертекста .................................................. 16 1.3.3 Структура HTML-документа .............................................................. 17 1.3.4 CSS......................................................................................................... 18 1.3.5 JavaScript ............................................................................................... 20 1.3.6 Adobe Photoshop CС ............................................................................. 21 1.3.7 Adobe Dreamweaver CC 2014.1 ........................................................... 23 2 Разработка web-сайта «Интернет-витрина магазина компьютерной техники» ......................................................................................................... 25 2.1 Общие требования к веб-сайту .............................................................. 25 2.2 Требования к веб-сайту по дизайну ...................................................... 27 2.3 Логическая и физическая структуры web-сайта .................................. 28 2.4 Верстка сайта с помощью CSS .............................................................. 30 2.5 Описание структуры и формата страниц web-сайта ........................... 33 2.6 Тестирование web-сайта ......................................................................... 39 ЗАКЛЮЧЕНИЕ ............................................................................................. 40 СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ ..................................... 41 2 3 ПЕРЕЧЕНЬ ИСПОЛЬЗУЕМЫХ ОБОЗНАЧЕНИЙ И СОКРАЩЕНИЙ В данном курсовом проекте используются следующие обозначения и сокращения: - HTML – HyperText Markup Language (язык гипертекстовой разметки); - СSS – Cascading Style Sheets (каскадные таблицы стилей); - JS – Java Script (язык сценариев); - WWW – World Wide Web (Всемирная паутина). 4 ВВЕДЕНИЕ Успех любого бизнеса во многом зависит от того, насколько эффективно компания доводит свою информацию до клиентов и партнеров. Создание интернет-витрины и размещение его в Интернете – один из альтернативных методов позиционирования компании и информирования целевой аудитории. Именно в Интернете многие ищут подробную, и свежую информацию, на основе которой можно получить представление об интересующей компании, товарах и услугах. Сейчас трудно представить крупную компанию без интернет-сайта. Наличие у компании хорошего сетевого представительства не только усиливает положительный образ фирмы, но и говорит в пользу надежности и основательности компании, создает определенный имидж и впечатление. В настоящее время одним из популярных интернет-сайтов для компаний является интернет-витрина. Интернет-витрина обычно содержит наглядный и красочный каталог предоставляемых товаров, с их достаточным описанием и указанием цены, что позволяет заинтересовать потенциального покупателя, помочь ему сделать выбор. Преимущества интернет-витрины: - не требует затрат на аренду площади, найма продавцов и другого персонала; - доступ к виртуальным витринам магазина может получить любой покупатель, не зависимо от места проживания; - интернет-витрина не имеет ограничений на виртуальную площадь; - владелец интернет-витрины может сдавать в аренду свои виртуальные торговые площади так же, как и владелец обычного магазина; - потенциальный покупатель получает исчерпывающую информацию об интересующем его товаре или услуге без помощи посредников (продавца, менеджера); - можно разместить сколь угодно много товаров или описать любое количество услуг; Делая свой выбор в пользу открытия интернет-витрины, компания переходит на более высокий уровень развития своего бизнеса и делает свой ассортимент более доступным для широкого круга покупателей, что и является актуальностью. Целью курсового проекта является разработка интернет-витрины компьютерной техники, которая позволит подробно ознакомится с различными товарами, оценить их характеристики. Реализация поставленной цели подразумевает выполнение следующих задач: - обеспечение удобного и эффективного интерфейса пользователя; - разработка дизайна, делающего нахождение пользователя на сайте 5 максимально комфортным; - обеспечение удобного просмотра всего списка товаров; - необходимо чтобы каждый покупатель, независимо от возраста, смог без проблем получить необходимую ему информацию о товаре. Объектом исследования является web-сайт «Интернет-витрина компьютерной техники». Предметом исследования является использование интернет-витрины для рекламы и продвижения товаров магазина в сети интернет. Методами исследования являются разработка web-сайта с помощью HTML и языка программирования JS, а также его верстка с помощью CSS. Итак, web-страница должна быть информативна, не содержать лишней или ненужной информации, при этом иметь такой способ представления товаров, который позволит покупателю с легкостью найти то, что его интересует, а также ненавязчиво попробовать заинтересовать его чем-то другим, чтобы webстраница запомнилась. Тогда при необходимости клиент будет возвращаться в нее снова и снова, будет советовать его своим друзьям и близким. Основные положения, выносимые на защиту: проект Web-сайта в виде диаграмм; структура Web-сайта; проект интерфейса Web-сайта. Структура курсового проекта: Курсовой проект состоит из двух глав: «Аналитическая часть» и «Практическая част». В первой главе представлена информация об объекте исследования, функциональная модель, обзор, и обоснование выбора программных средств. Во второй главе приведен проект Web-сайта с использованием диаграмм, проект интерфейса и структуры Webсайта. В заключении подводятся итоги исследования, формируются окончательные выводы по рассматриваемой теме. Объем курсовой работы составляет 41 страницу. В процессе работы над курсовым проектом и оформлением пояснительной записки были использованы методические указания по оформлению письменных работ [1]. 6 1. Теоретические аспекты разработки интернет-витрины 1.1 Понятие Web - витрины Торговля через Интернет из области экспериментов и модного увлечения переходит в разряд необходимого дополнения любого бизнеса, продающего свои товары и услуги. Часто созданием и поддержкой интернет магазина в малом бизнесе, занимается непосредственно его владелец. К сожалению, не все имеют специальное образование и опыт в программировании и дизайне, для того, чтобы создать и заставить такой виртуальный магазин работать. Виртуальная витрина – это веб-сайт, главной целью которого является интернет реклама. Виртуальная витрина представляет собой как online магазин, так и интернет-площадку, позволяющую рекламировать и продвигать offline магазины. Главная задача виртуальной витрины заключается в обеспечении более информативной и продуктивной связи между продавцом и покупателем. Продавец размещает на страницах подобного веб-сайта фото-галереи продаваемого товара с описанием, размещает информацию о распродажах и акциях. Покупатель получает возможность круглосуточного доступа к информации о магазине о реализуемых в нем товарах. Web-витрина имеет определенные преимущества перед другими, в том числе: удобная система навигации, выбор языка интерфейса, отзывы покупателей о товаре, новости магазина и анонсы. Веб-витрина представляет собой сайт, который предназначен для демонстрации товаров и услуг владельца витрины с помощью сети Интернет. Существует более развернутое определение рассматриваемого понятия: Интернет-витрина – совокупность инструментов и средств электронных коммуникаций, предназначенных для приёма заявок на товары и услуги через Интернет, которая позволяет ознакомиться с характеристиками товаров, осуществить их выбор и оформить заявку на покупку. Как правило, на страницах веб-витрины размещена информация о компании, каталоги товаров и услуг, прайс-листы и форма заполнения для подачи заявки. Здесь можно публиковать новости компании, дополнительную информацию о производителях, аналитические обзоры и др. Информация обо всех заказах отправляется в почтовый ящик фирмы-продавца, сотрудники которой исполняют их в установленном порядке. Если сравнить веб-витрину с традиционными источниками, то последнее не может обеспечить настолько полную информацию о товарах и услугах, в отличие от первого. Среди веб-витрин выделяют разновидности: - статическая, на основе обычных НТМL-файлов. - динамическая, с отображением информации из некоторой базы 7 данных. Наравне с участием в электронном торговом ряду, это решение является наименее затратным, однако веб-витрина в отличие от торгового ряда не может обеспечить полный цикл продажи, включая интерактивные процедуры выписки счетов, прима оплаты, отслеживания выполнения заказа и т. д. Принцип работы веб-витрины основан на сборе предварительных заявок с последующим их выполнением. По этому принципу работают, например, вебсайты, которые специализируются на продаже товаров ограниченного спроса (предметы искусства). Основной проблемой продавца - это необходимость обеспечить гарантию потенциальному клиенту о выполнении заказа на заранее оговорённых условиях. Проблема покупателя: риск получения выбранного товара или услуги с опозданием (или риск не получить товар/услугу вообще). Отличительная черта данного варианта бизнес-модели – это реализация процесса купли-продажи в несколько этапов. Первым этапом является сборка заявок, чем занимается продавец, затем он выясняет у поставщика сроки и условия исполнения заказа, после чего оповещает об этом потенциальных клиентов (обычно, по электронной почте) и последним этапом является доставка товара, при условии, если потребитель подтвердил свое согласие. Хотя, веб-витрина – относительно недорогое средство организации розничной торговли, она имеет существенные недостатки: - не позволяет автоматизировать торговлю с реального склада; - не допускает сокращения штата фирм продавцов и их операционных расходов; - отсутствие гибкости в управлении торговыми процессами и организации маркетинговых акций. Все запросы клиентов в веб-витрине поступают к менеджерам по продажам, а не как в электронном магазине - в автоматизированную систему обработки заказов. Затем бизнес-процессы веб-витрины полностью повторяют бизнес-процессы традиционного предприятия розничной торговли. В этом случае нет возможности реального сокращения операционных издержек, рентабельность веб-витрины мало отличается от рентабельности обычных методов ведения торговли. Главной особенностью работы такого варианта Интернет-торговли являются процессы взаимодействия веб-витрины с внутренним бизнес-процессом компании, которые осуществляются менеджерами вручную. Зачастую интернет-витрину путают с интернет-магазином, но это совсем не так! При общей схожести форматов, данные категории кардинально различаются по осуществляемым задачам. Ведь первичной целью виртуальной витрины является именно донесение информации до покупателя и создание в его голове определенных образов и побуждений. Это, в каком-то роде, реклама продукции, бьющаяся точно в цель. А уже после изучения каталога клиент может обратиться в компанию и заказать понравившийся товар или услугу. Таким косвенным путем интернет-витрина способна серьезно повлиять 8 на продажи и существенно увеличить Вашу прибыль. При этом создание и раскрутка сайтов такого типа, вследствие их упрощенного функционала, обойдется дешевле, чем разработка интернет-магазина. Преимущества сайта-витрины во многом схожи с теми, которыми обладает интернет-магазин. Имея своей целью привлечь внимание клиента к продукту, интернет-витрина может стать отличным рекламным средством и принести серьезную пользу бизнесу. Помимо этого, она обладает и некоторыми другими полезными свойствами. - Огромные возможности для презентации своей продукции в мировой сети. При правильном подходе, сайт-витрину можно превратить в великолепную рекламную площадку, на которой будет представлен весь ассортимент Вашей продукции. А результатом грамотного продвижения ресурса станет серьезное увеличение числа новых клиентов; - Доступность для клиента. Разместив подробную информацию о продуктах и их характеристиках в Интернете, Вы сможете существенно разгрузить сотрудников и консультантов своей компании в реальности. А профессиональная подача материала со страниц интересного интернеткаталога будет иметь гораздо больший эффект для посетителя; - Эффективное сочетание с реальным бизнесом. Витрина, размещенная в интернете, идеально подойдет владельцам реальных магазинов и салонов продаж. Таким образом, Вы сможете охватить как аудиторию, далекую от современных технологий, так и ту часть покупателей, которые предпочитают ознакомиться с товаром через всемирную паутину. Таким образом, веб-витрина – это лишь инструмент привлечения покупателя, интерфейс для взаимодействия с ним и проведения маркетинговых мероприятий. Кроме стандартных возможностей для администратора доступны: статистика о посетителях, новых заказах и товарах, пользующихся наибольшим спросом; подключение модулей доставки и оплаты; рассылка сообщений подписчикам; резервное копирование базы данных на локальный диск; администрация web-витрины на основе любой платформы (Windows, Unixсистемы), т.к. администрирование происходит с помощью браузера. 1.1.1 Принципы построения Web - витрины Удачный web-сайт – это в высшей степени эффективный инструмент торговли – он способен захватывать внимание аудитории. Как и любой другой маркетинговый инструмент, основанный на принципе непосредственного отклика, прежде всего он должен заинтриговать посетителя, а затем подвигнуть его на определенные действия. Однако многие игнорируют эту особенность главной страницы, что часто приводит к тому, что посетители не задерживаются на сайте надолго и покидают его, едва зайдя. Такие web-сайты, пусть даже 9 содержащие иногда огромное количество полезных советов и статей, практически никогда не достигают предполагаемого уровня посещаемости, не говоря уже о продажах. Сделав всего несколько изменений, простой web-сайт может превратиться в более надежный и эффективный инструмент. Важно помнить, что изо дня в день на потенциальных клиентов обрушивается поток информации и различных рекламных сообщений, и что в плане завоевания их внимания существует предельно жесткая конкуренция. Web-сайт, способный привлечь внимание и вызвать любопытство, побудит клиентов не только просмотреть оставшиеся страницы и совершить покупки, но и снова посетить его через некоторое время, а также рекомендовать своим друзьям и знакомым. Программная часть архитектуры web-страницы рассматривается как взаимосвязь операционной и серверной части. В операционной части рассматривается среда разработки web-страницы. Серверная часть содержит в себе размещение web-страницы на сайте провайдера, поддерживающие технологии, используемые при создании webстраницы. Как известно, реклама – двигатель прогресса, а Интернет - самый, что ни есть продукт этого самого прогресса. 1.1.2 Принципы архитектуры Web – витрины Архитектура сайта – систематизация информации и навигации по ней с целью помочь посетителям более успешно находить нужные им данные. Хорошо продуманная грамотная архитектура сайта гарантирует, что пользователи потратят меньше времени на поиск нужной информации. Разработка архитектуры сайта должна вестись с учётом наиболее важной информации с точки зрения продвижения товаров/услуг на интернет-рынке. В процессе создания структуры нового сайта, либо оптимизации структуры уже существующего, необходимо концентрировать внимание потребителей именно на этой информации и управлять посещаемостью сайта потенциальными клиентами именно в наиболее важных разделах сайта в соответствии с позиционированием на рынке, продвигаемых товаров/услуг. Грамотное распределение приоритетов между разделами и страницами сайта, сделает их основными точками входа на сайт, что позволит потенциальному потребителю быстро найти необходимую ему информацию об искомых товарах/услугах и повысит успешность бизнеса в интернете. Архитектура интернет-магазина должна быть проста и интуитивно удобна. 10 1.2 Формирование требований к системе 1.2.1 Требования к интерфейсу web-страниц Есть несколько простых правил, позволяющих интерфейсу web-страницы быть понятной клиенту. 1) Чем проще, тем лучше. Это вовсе не значит, что должен быть только текст и контактная информация, но на сайте не должно быть бесполезной информации, шрифт должен легко читаться. Графические элементы должны быть чёткими, выразительными и быстро загружаться. На сайте магазина недопустимо использовать анимацию и звук, которые долго загружаются и отвлекают внимание покупателя. Человеческий глаз просматривает страницы сайта сверху вниз. Наибольшее внимание сосредотачивается на левой верхней части страницы. Поэтому в верхней части страницы сайта, как правило, размещается наиболее важная информация: название фирмы, логотип, само название сайта и т.д. Чем проще выполнена верхняя часть страницы, тем легче запомнить название сайта и саму фирму. 2) Типовой ошибкой многих сайтов является нагромождение в верхней части страницы сайта авангардной и сложной композиции из многих рисунков, среди которых едва заметно располагается название фирмы и название сайта. В результате человеческий глаз, сканируя данную часть страницы сайта, не успевает распознать и запомнить нужную информацию. Происходит перенасыщение. Вместо увеличения запоминаемости, на таких сайтах, происходит снижение запоминаемости основных надписей (рисунков) сайта, названия фирмы и название сайта. 3) Покупатель должен без труда находить интересующий его товар и иметь возможность получить о нём исчерпывающую информацию (описание в виде текста плюс несколько фотографий). На витрине желательно разместить данные о деятельности фирмы-продавца (чем занимается компания, какие регионы обслуживает, адрес, контактную информацию и т. д.). 4) Товары/услуги должны быть распределены по группам. Для каждого товара/услуги обычно предусмотрены: краткое и полное описание, плюс несколько фотографий. 5) Аккуратная работа с цветом. Правильно примененный цвет может, например, передавать тонкие различия между однородными элементами. Неправильно примененный цвет может мешать работать с программой. Особенно это относится к красному цвету. Так уж получилось, что для всех людей красный цвет ассоциируется с некой опасностью. Большое количество красного цвета в каком-либо месте на экране привлекает внимание, заставляет пользователя настораживаться, думая, что что-то не так. 11 Дорожные знаки красного цвета либо запрещают, либо предупреждают об опасности. Поэтому, если кнопка на экране окрашена красным, независимо от того, что на ней написано пользователь будет стараться избегать нажатия на нее. В малых количествах красный цвет может исправно служить в качестве ненавязчивого указания наличия каких-либо проблем. Например, если получившееся в результате расчета число превышает норму. Красный цвет может также использоваться в парах с другими. Существуют две метафоры – «термометр», когда красному противостоит синий, и «светофор» – зеленый. Обе они должны использоваться только, если это уместно. Руководствуясь данными принципами разработки интерфейса, было решено сделать ставку на простоту и информативность, чтобы пользователь, попадая на сайт, должен получать четкую информацию о товаре, новинках, предстоящих релизах. На web-странице должен быть реализован удобный и быстрый поиск необходимого пользователю товара, так как не все имеют неограниченный доступ в интернет, и многие оплачивают его по часам. Да и утомительный просмотр каталогов мало кому по душе. Все товары, предлагаемые на сайте, должны быть в наличии. Будет сделана простая и предельно удобной навигация, с тем, чтобы пользователь оперативно получал ответы, на любые вопросы по тематике сайта. Не найдя нужной информации, посетитель может просто уйти, так и не получив четкого представления о вашем ресурсе. Цветовая гамма будет ориентирована на светлые серо-синие тона, удачно гармонирующие с черным цветом текста. 1.3. Обоснование выбора средств реализации курсового проекта В текущем разделе описан инструментарий, используемый при разработке данного курсового проекта, а именно: - HTML; - CSS; - JavaScript; - Adobe Photoshop CS6; - Adobe Dreamweaver CC 2014.1; 1.3.1 Развитие HTML Первая версия языка разметки гипертекста (HyperText Markup Language, HTML) была разработана в 1991 году сотрудниками CERN. За его основу взят SGML (Standard Generalized Markup Language), стандартный язык структурной 12 разметки. Разметка была логической, то есть не несла никакой информации о внешнем виде документа, а лишь указывала границы и соподчинение его составных частей. Позднее была добавлена возможность выделения текста. HTML 1.0 не был стандартизирован, так как на данный момент существовал только один браузер, Mosaic. В 1995 году появилась первая спецификация для языка гипертекстовой разметки, HTML 2.0. В ней появилась возможность вставлять рисунки, гиперссылки (выделенные области документа, позволяющие переходить к другому документу) и формы отправки информации на сервер. С появлением спецификации HTML 3.2 (версия 3.0 не стала стандартом) начался подъем в web-дизайне. Были реализованы таблицы, разметки математических формул, обтекание текста вокруг объектов. Самым важным обновлением в данной версии HTML была поддержка Каскадных таблиц стиля (Cascading Style Sheets, CSS), позволявших производить графическое описание документа отдельно. Таким образом разрешались противоречия между идеологиями структурной разметки и визуального представления. Текущая версия HTML 4.01 была стандартизирована 24 декабря 1999 года. Она отличается законченностью и полнотой, а также поддерживает усовершенствованную версию CSS. По мере роста количества и изменения качества документов в Интернет, росли предъявляемые к ним требования. Простота HTML превратилась в его главный недостаток. Ограниченность количества тегов и полное безразличие к структуре документа побудили разработчиков в лице консорциума W3C к созданию такого языка разметки, который был бы не столь сложен, как SGML, и не настолько примитивен, как HTML. В результате появился язык XML, сочетающий в себе простоту HTML, логику разметки SGML и удовлетворяющий требованиям Интернета. Он используется для создания многих web-приложений, в том числе и для мобильных устройств. Изначально, основой Всемирной паутины были web-сервера CERN httpd, написанные Тимом Бернерсом-Ли на языке программирования Си. Сервер NCSA httpd появился после CERN, когда возникла потребность в небольшом и быстром web-сервере. Позднее к проекту подключились другие авторы, которые стали накладывать свои патчи (программы-дополнения). В 1995 году Брайан Белендорф объединил эти патчи и создал первую версию сервера Apache (сокращение от «a patchy server»), который по настоящее время занимает лидирующую позицию по популярности. Первая версия имела номер 0.6.2. В декабре 1995 года вышел релиз Apache 1.0. В следующие годы группа разработчиков расширилась, и Apache был портирован на различные операционные системы. В 1999 году была создана некоммерческая организация Apache Software Foundation, а в марте 2000 года состоялась первая конференция разработчиков под названием ApacheCon, где была представлена версия Apache 2.0. В ней была переработана предыдущая серверная архитектура. 13 На сегодняшний день существуют 2 ветки Apache - 1.3 и 2.0. Одновременно с появлением Apache, компания Microsoft выпустила коммерческий web-сервер Internet Information Server (IIS), как надстройку для операционной системы Windows NT 3.51. В этой версии отсутствовали многие возможности, но имелись стандартные веб-службы, FTP и Gopher. В более поздней версии IIS3, вышедшей в 1997 году, появились новые возможности, такие как Active Server Pages (ASP), а через год в IIS4 упразднена служба Gopher и значительно расширен набор параметров. В 2003 году вышел web-сервер IIS6 в составе операционной системы Windows Server 2003. В данной версии произошли значительные изменения: добавлена поддержка программной платформы .NET и применен новый подход с точки зрения безопасности. С момента появления по настоящее время IIS является вторым по популярности web-сервером. Остальные существующие сервера созданы для выполнения узкопрофильных задач и пользуются сравнительно небольшой популярностью. Например, программа HTTP File Server, написанная в 2002 году Массимо Мелиной, работает, как простой сервер для передачи файлов по сети, а Lighttpd (2003) создана для использования на сильно нагруженных системах. Web-программирование это раздел программирования, ориентированный на разработку динамических web-приложений. Языки webпрограммирования делятся на серверные (команды которых обрабатываются web-сервером) и клиентские (команды обрабатываются браузером). Для связи с сервером используется интерфейс CGI (англ. Common Gateway Interface — «общий интерфейс шлюза»). В 1994 году датский программист Расмус Лердорф создал набор сценариев на Perl/CGI для вывода и учёта посетителей его онлайн-резюме, обрабатывающий шаблоны HTML-документов. Лердорф назвал его PHP (англ. Personal Home Page – «личная домашняя страница»). Вскоре функциональности и быстроты Perl, интерпретатора скриптов, перестало хватать, и, спустя год, Лердорф разработал с использованием языка C новый интерпретатор шаблонов PHP/FI (англ. Personal Home Page / Forms Interpreter — «Личная Домашняя Страница / Интерпретатор форм»), который мог становиться частью webсервера. PHP/FI был размещен в Сети для всеобщего использования, и началось его повсеместное распространение. К концу 1997 года РНР использовался более чем на пятидесяти тысячах сайтов. Так как исходный код интерпретатора был открыт, то энтузиасты стали заниматься его доработкой, и летом 1998 года появился РНРЗ – разработка Зива Сураски и Энди Гутманса. РНРЗ был создан практически «с нуля», так как его авторы сочли код предыдущих версий недостаточно эффективным. Кроме того, РНРЗ стал весьма легко расширяемым продуктом. В 2000-м году вышла разработанная компанией Zend Technologies четвертая версия интерпретатора РНР, дополненная множеством новых функций. В настоящее время именно она является наиболее распространенной – 14 РНР используется более чем на 20% сайтов Сети. Разработка первого клиентского языка велась в 1992-1995 годах компанией Nombas. Этот язык, названный Cmm («Си-минус-минус») не получил широкого распространения, так как сценарии, написанные на нем работали только в 16-битовом Netscape Navigator под управлением Windows. В это же время, группа разработчиков компании Netscape под руководством Брендона Айха создала язык LiveScript, который впоследствии был переименован в JavaScript и стандартизован Европейской компьютерной ассоциацией. В 1996 году компания Microsoft выпустила технологию ASP (англ. Active Server Pages — «активные серверные страницы»), позволяющую подключать программные модули во время процесса формирования web-страницы. Относительная популярность ASP основана на простоте используемых при этом языков Visual Basic Script и JScript (аналога языка JavaScript). Технология ASP получила своё развитие в виде ASP.NET в 2003 году. Разработчики могут писать код для ASP.NET, используя практически любые языки программирования, входящие в комплект программной платформы .NET (C#, Visual Basic.NET, и JScript .NET). В 2005 году была разработана технология AJAX (от англ. Asynchronous JavaScript and XML — «асинхронный JavaScript и XML»). Это новый подход к построению интерактивных пользовательских интерфейсов web-приложений, заключающийся в «фоновом» обмене данными браузера с сервером. В 1995 году Джон Гей и Роберт Татцуми из компании Future Wave разработали программу FutureSplash для создания анимации методом векторного морфинга (плавной трансформации изображения). В этой версии присутствовал программный модуль, позволяющий просматривать анимацию в web-браузере. В 1996 году Future Wave была куплена компанией Macromedia и программу FutureSplash переименовали во Flash 1.0. Дальнейшие версии программы претерпели множество изменений и получили широкое распространение в сети Интернет. Поворотным моментом в истории Flash было добавление языка сценариев в четвертую версию, впоследствии названного ActionScript. Появилась возможность создавать с помощью Flash игры, интерактивные презентации, приложения. Также во Flash 4 появилась возможность использования сжатия звука mp3. В 2002 году выходит 6 версия – Flash MX. Добавляется поддержка видео. Благодаря этому Flash используют для видеовещания в Интернете. Получают широкое распространение видеосервисы (YouTube, Fox Interactive, Yahoo и другие). С 2005 года, когда корпорация Adobe купила компанию Macromedia, начался новый виток развития Flash. В последующих версиях была расширена функциональность программы, усилена её безопасность и добавлена возможность работы с 3D-графикой. 15 В 2007 году компания Microsoft выпустила браузерную мультимедийную платформу Silverlight, работающую с .NET Framework.[29,30] 1.3.2 HTML – язык разметки гипертекста Hyper Text Markup Language (HTML) – язык разметки гипертекста – предназначен для написания гипертекстовых документов, публикуемых в WWW. Гипертекстовый документ – это текстовый файл, имеющий специальные метки, называемые тегами, которые впоследствии опознаются браузером и используются им для отображения содержимого файла па экране компьютера. С помощью этих меток можно выделять заголовки документа, изменять цвет, размер и начертание букв, вставлять графические изображения и таблицы. Но основным преимуществом гипертекста перед обычным текстом является возможность добавления к содержимому документа гиперссылок – специальных конструкций языка HTML, которые позволяют щелчком мыши перейти к просмотру другого документа. HTML-документ состоит из двух частей: собственно, текста, т. е. данных, составляющих содержимое документа, и тегов – специальных конструкций языка HTML, используемых для разметки документа и управляющих его отображением. Теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ. Графическая и звуковая информация, включаемая в HTML-документ, хранится в отдельных файлах. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащих HTML-документы приняты расширения .htm или .html. В большинстве случаев теги используются парами. Пара состоит из открывающего <имя_тега> и закрывающего </имя_тега> тегов. Действие любого парного тега начинается с того места, где встретился открывающий тег, и заканчивается при встрече соответствующего закрывающего тега. Часто пару, состоящую из открывающего и закрывающего тегов, называют контейнером, а часть текста, окаймленную открывающим и закрывающим тегом, — элементом. Последовательность символов, составляющая текст может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например #, +, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл: < (меньше), > (больше), & (амперсанд) и " (двойная кавычка). Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов [2]. 16 1.3.3 Структура HTML-документа Самым главным из тегов HTML является одноименный тег <html>. Он всегда открывает документ, так же, как тег </html> должен непременно стоять в последней его строке. Эти теги обозначают, что находящиеся между ними строки представляют единый гипертекстовый документ. Без этих тегов браузер или другая программа просмотра не в состоянии идентифицировать формат документа и правильно его интерпретировать. HTML-документ состоит из двух частей: заголовок (head) и тела (body), расположенных в следующем порядке: <html> <head> Заголовок документа </head> <body> Тело документа </body> </html> Чаще всего в заголовок документа включают парный тег <title>... </title>, определяющий название документа. Многие программы просмотра используют его как заголовок окна, в котором выводят документ. Программы, индексирующие документы в сети Интернет, используют название для идентификации страницы. Хорошее название должно быть достаточно длинным для того, чтобы можно было корректно указать соответствующую страницу, и в то же время оно должно помещаться в заголовке окна. Название документа вписывается между открывающим и закрывающим тегами. Тело документа является обязательным элементом, так как в нем располагается весь материал документа. Тело документа размещается между тегами <body> и</body>. Все, что размещено между этими тегами, интерпретируется браузером в соответствии с правилами языка HTML позволяющими корректно отображать страницу на экране монитора. Текст в HTML разделяется на абзацы при помощи тега <р>. Он размещается в начале каждого абзаца, и программа просмотра, встречая его, отделяет абзацы друг от друга пустой строкой. Использование закрывающего тега </р> необязательно. Если требуется «разорвать» текст, перенеся его остаток на новую строку, при этом, не выделяя нового абзаца, используется тег разрыва строки <BR>. Он заставляет программу просмотра выводить стоящие после него символы с новой строки. В отличие от тега абзаца, тег <BR> не добавляет пустую строку. У этого тега нет парного закрывающего тега. Язык HTML поддерживает логическое и физическое форматирование содержимого документа. Логическое форматирование указывает на назначение данного фрагмента текста, а физическое форматирование задает его внешний вид. При использовании логического форматирования текста браузером выделяются различные части текста в соответствии со структурой документа. Чтобы отобразить название, используется один из тегов заголовка. Заголовки в 17 типичном документе разделяются по уровням. Язык HTML позволяет задать шесть уровней заголовков: h1 (заголовок первого уровня), h2, h3, h4, h5 и h6. Заголовок первого уровня имеет обычно больший размер и насыщенность по сравнению с заголовком второго уровня. Пример использования тегов заголовков: <hl>l. Название главы</hl> <h2>l.l. Название раздела</h2> Теги физического форматирования непосредственно задают вид текста на экране браузера, например пара <b></b> выделяет текст полужирным начертанием, <u></u> задает подчеркивание текста, <font></font> управляет шрифтом текста. Тег <img> вставляет изображение в документ, как если бы оно было просто одним большим символом. Пример применения тега: <img src = "picture.gif"> Для создания гипертекстовой ссылки используется пара тегов <а>... </а>. Фрагмент текста, изображение или любой другой объект, расположенный между этими тегами, отображается в окне браузера как гипертекстовая ссылка. Активация такого объекта приводит к загрузке в окно браузера нового документа или к отображению другой части текущей Web-страницы. Гипертекстовая ссылка формируется с помощью выражения: <а href = "document.html"> ссылка на документ</а> Href здесь является обязательным атрибутом, значение которого и есть URL-адрес запрашиваемого ресурса. Кавычки в задании значения атрибута href не обязательны. Если задается ссылка на документ на другом сервере, то вид гиперссылки такой: <а href = "http://www.nkzu.kz/11.jpg"> История университета</а> С помощью различных тегов можно рисовать таблицы, форматировать текст, вставлять в документ изображения, видео, звуковые файлы и прочее [4]. 1.3.4 CSS CSS (Cascading Style Sheets) с английского переводится как каскадные таблицы стилей, - это язык, который используется как средство оформления webстраниц, а именно для работы с шрифтами, цветами, полями, таблицам, картинками, расположением элементов. Основной целью, которая послужила для разработки языка CSS, являлось разделение разметки содержимого (которое написанного на HTML или другом языке программирования) и представления документа (написанного на CSS). Результат этого разделения помогает увеличить доступность документа, предоставить большую гибкость, а также уменьшить сложность и повторяемость в структурном содержимом, создает удобное описание дизайна и стилистики web-страницы и ее содержимого. Еще CSS дает возможность предоставить один 18 документ в различных стилях или методах вывода (например, таких как экранное представление, чтение голосом, печать). В 1990-х возникла необходимость стандартизировать web-инструменты, создать общие правила, с помощью которых программисты и webдизайнеры могли бы создавать сайты. Как результат этой необходимости, появились языки HTМL 4.01 и XHTML, а также стандарт CSS. Первое упоминание о CSS было в 1994 году, когда Хоком Виум Ли предложил использовать CSS (Каскадные таблицы стилей) для стилистического оформления web-страниц. У него не сразу получилось продвинуть свою технологию, - только через пару лет ему удалось привлечь внимание к CSS. Итак, 17 декабря 1996 года опубликована первая спецификация (CSS1) и она была рекомендована к использованию Консорциумом Всемирной паутины (W3C). После небольшого успеха положение дел у технологии CSS пошли куда лучше и 12 мая 1998 года (через 2 года) была принята рекомендация W3C для CSS2. Следующим этапом была CSS 2.1 - версия W3C от 8 сентября 2009 года, она была построена на базе CSS2, и была работой над исправлением существующих ошибок. Сегодня актуальна версия CSS3, которая максимально расширена по сравнению с предыдущими версиями. CSS3 включают эффекты теней, а также скругленные углы у блоков. В CSS3 появилась возможность устанавливать изображения в качестве фона и использовать их как границы. Намного проще и удобнее стала работа с анимацией – теперь для ее создания достаточно возможностей самой CSS3, стало не нужно работать с языком Java Script. До того, как появился CSS, оформление web-страниц могло осуществляться непосредственно внутри содержимого документа, появление же технологии CSS дало возможность разделению содержания и представления документа. Благодаря этой возможности стало реальным простое применение единого стиля оформления для большинства подобных документов, и стало доступно быстрое изменение их оформления. Использование CSS в разработке сайтов имеет свои плюсы и минусы. Преимущества CSS: Простота самого языка CSS вместе с принципом отделения оформления от содержания дает возможность сократить время на разработку и поддержку сайта. Имеется несколько вариантов дизайнов страницы для просмотра на разных устройствах. Например, дизайн на экране компьютера рассчитан на одну ширину, и будет полностью выводиться на экран, а на мобильных устройствах он будет подстраиваться к размерам экрана и некоторые элементы будут исключены от показа, также и при печати, будет печататься нужный текст, без лишнего (например, без шапки меню). Уменьшается время загрузки страниц web-сайта за счет переноса правил представления данных в отдельный CSS-файл. Благодаря этому браузер загружает только структуру документа, а также данные, хранимые на 19 странице, а представление этих данных загружается браузером только один раз и может бать закеширован, - благодаря этому уменьшается трафик, время загрузки, а также нагрузка на сервер. Простота изменения дизайна. Один CSS управляет отображением множества HTML-страниц. Когда возникает необходимость изменить дизайн сайта, то незачем править каждую страницу. Для последующего изменения дизайна всего лишь нужно изменить CSS-файл, и как результат, изменение дизайна делается быстрее. CSS предоставляет дополнительные возможности форматирования, о которых при использовании только самих атрибутов даже и не приходилось мечтать. Повышение совместимости с разными платформами за счет использования web-стандартов. Недостатки CSS: Различное отображение вёрстки в разных браузерах. Если браузеры устаревшие, то возможно, что одни и те же данные CSS по-разному ими интерпретируются. Необходимость исправлять не только один CSS-файл, но и теги HTML. Часто встречается на практике необходимость исправлять не только один CSS-файл, но и теги HTML, которые связаны с селекторами CSS. Иногда это значительно увеличивает время редактирования, а также и тестирования. Итак, CSS – это сильнейший инструмент и один из основных составляющих практически любого web-сайта. Без CSS просто невозможно представить современную деятельность web-разработчиков. Сегодня CSS – это общепринятый стандарт разработки, который принимается всеми без исключения компаниями-разработчиками, что явно показывает его значимость и необходимость. 1.3.5 JavaScript Javascript – это язык программирования, с помощью которого вебстраницам придается интерактивность. С его помощью создаются приложения, которые включаются в HTML-код (например, анкеты или формы регистрации, которые заполняются пользователем). Часто Javascript путают с языком программирования Java, однако общего между ними очень мало. К тому же, некоторые сравнивают Javascript с языками Python, Self, Ruby. Однако это особенный язык, который существует сам по себе. С помощью Javascript можно изменять страницу, изменять стили элементов, удалять или добавлять теги. С его помощью можно узнать о любых манипуляциях пользователя на странице (прокрутка страницы, нажатие любой клавиши, клики мышкой, увеличение или уменьшение рабочей области экрана…) Через него можно к любому элементу HTML-кода получить доступ и 20 делать с этим элементом множество манипуляций. Можно загружать данные не перезагружая страницу, выводить сообщения, считывать или устанавливать cookie и выполнять множество других действий. Вся уникальность данного языка программирования заключается в том, что он поддерживается практически всеми браузерами и полностью интегрируется с ними, а все что можно сделать с его помощью – делается очень просто. Ни одна другая технология не вмещает в себе все эти преимущества вместе. К примеру, есть такие, которые не кросс-браузерны (то есть поддерживаются не всеми браузерами). Это – VBScript, ActiveX, XUL. А есть такие, которые с браузером не интегрированы в нужной степени, это – Java, Flash, Silverlight. На сегодняшний день данная технология активно развивается, разрабатывается язык программирования Javascript 2[16]. 1.3.6 Adobe Photoshop CС Adobe Photoshop – это самый мощный на сегодняшний день графический редактор. Возможности этой программы охватывают весь спектр различных операций, связанный с графикой, а именно: обработка фотографий, создание собственных рисунков, создание постеров, коллажей, обложек для разной продукции, создание открыток и многое другое. Photoshop содержит в себе сотни инструментов, тысячи функций и миллион эффектов. Интерфейс в программе простой и понятный в обращении, всегда есть возможность установить множество новых эффектов, кистей, градиентов и узоров, которые сделают Вашу работу красивой и необычной. Следует отметить, что программа Adobe Photoshop является главным инструментом дизайнеров. 21 век – это век высоких технологий, нового слова в дизайне, поэтому большинство дизайнеров используют именно эту программу для работы. Художники могут создавать свои картины уже не на холсте, а прямо в данной программе. У тех же, кто все-таки предпочитает работать с холстом и красками всегда есть возможность подкорректировать свое произведение искусства ли добавить неожиданные элементы. Фотографы теперь делают действительно качественные и красивые фотографии. На данный момент актуальна версия Adobe Photoshop 12 (СС), благодаря огромному количеству эффектов, позволяет делать работу интересной и разнообразной. Ну а каждый дизайнер без этой программы вообще никуда. Практически все макеты для сайтов создаются в этой программе, кроме того, это программа позволяет создавать не только макеты, но и различную качественную графику, которая наполнит Ваш сайт и сделает его неповторимым. В последних версиях программы появилась возможность создавать 3D модели. Также, дизайнеры используют эту программу для создания рекламы – от постеров, до анимированных роликов. А самые красивые и необычные авторские открытки также зарождаются в этой программе. Возможность программы Adobe Photoshop 21 не знают даже самые продвинутые пользователи, которые много лет пользуются ею. Каждый найдет в этой программе что-то интересное для себя. Рисунок 1.1 Рабочая область Adobe Photoshop 12 (CC) Преимущества Adobe Photoshop 12 (CC) над предыдущими версиями: - быстрое графическое ядро Adobe Меrсurу, позволяющее работать с графикой и фото на слабых компьютерах. Новая версия редактора отлично работает даже на моем 2-х ядерном нетбуке (2*1 ГГц). - увеличена скорость работы с изображениями за счет автоматизации часто используемых инструментов (например, обрезка, ретушь, выделение и маска) - добавлена функция переноса настроек между устройствами (например, с ПК на ноутбук) - наконец-то добавлено автосохранение и восстановление добавлены новые инструменты в Adobe Саmеrа Raw 7 - интегрирован видеоредактор с набором фильтров, эффектов и переходов - реализован поиск по слоям с фильтрацией по типу 22 - добавлены заданные размеры документа для мобильных устройств (iPad, iPhone, Android и т.д.) [17,18]. 1.3.7 Adobe Dreamweaver CC 2014.1 Adobe Dreamweaver – это HTML-редактор от компании Adobe, который на сегодняшний день очень известный. Первая его версия была выпущена в 1997 году и на сегодняшний день существует уже 8 его версий. Самая основная особенность этого редактора – поддержка режима WYSIWYG. Это только название такое страшное, потому что обозначает аббревиатуру, расшифровать которую можно так: WhatYou See Is What You Get. А вот значение этого режима в переводе означает «что ты видишь, то и получишь». Многообещающе, не правда ли? Что же, по сути, это означает? А это означает, что если вы делали исправления на html-страничке, и хотите увидеть полученный результат, то вам уже не нужно заново открывать страничку или обновлять окно браузера, потому что на все изменения можно посмотреть в самом редакторе Dreamweaver и непосредственно в режиме правки кода. Это очень удобно и к тому же позволяет сэкономить массу времени, особенно при разработке сложных веб-сайтов. Но это не единственное преимущество Dreamweaver! Программа предоставляет полный набор возможностей, чтобы помочь создать собственный сайт. Работать можно, начиная с дизайна, оформления, и заканчивая рабой с кодом, скриптами, плагинами и т.д. Dreamweaver полностью поддерживает HTML5, а это дает новые возможности в использовании онлайн-видео, анимации, что, в свою очередь, придаст уникальность любому сайту. К программе подсоединен jQuery – это значит, что пользователь с легкостью может использовать Java-скрипты при создании веб-странички. Для начинающих Dreamweaver – просто находка! При создании первых сайтов он способен значительно облегчить обучение. Есть сервис подсказок и приличное количество шаблонов, элементов оформления, скриптов – с помощью всего этого легко, как говорится, «набить руку». Очень простые странички не заберут у пользователя много времени и сил. Опытные веб-мастера, используя Dreamweaver, имеют значительно больше возможностей. Например, можно использовать CSS3, разрабатывать страницы под разные операционные системы (iOS и Android) и приложения. 23 Рисунок 1.2 Рабочая область Adobe Dreamweaver 2014 CC Есть уникальная панель «Многоэкранный просмотр», с помощью которой возможно оптимизировать сайт под самые разные устройства, не зависимо от размеров их экранов (вплоть до мобильных телефонов) и при этом ваш сайт будет выглядеть так, как вы хотите, как вам нужно. Немаловажно также и то, что Dreamweaver поддерживает известные движки, такие как WordPress и Joomla. Изменения можно вносить непосредственно в код сайта, что улучшает оптимизацию. Одним словом, этот продукт предоставляет очень много возможностей. 24 2 Разработка web-сайта «Интернет-витрина магазина компьютерной техники» 2.1 Общие требования к веб-сайту Практика создания web-сайтов позволила сформулировать следующий ряд общих требований: - Глубина содержания; - Простота навигации; - Стабильность информационных ресурсов; - Оперативность обновления информации; - Доступность для пользователей; - Единство дизайна всех разделов. Глубина содержания определяется объемом имеющейся информации, степенью ее детализации и ценностью. Естественно, все эти показатели должны стремиться к максимуму. Информативность web-сайтов может быть достигнута путем размещения материалов, представляющих наибольший интерес для виртуальных посетителей, которыми потенциально могут стать все пользователи Интернет. Простота навигации зависит от логичности схемы построения web-сайта, которая обычно имеет иерархическую структуру. Важно обеспечить посетителям возможность без труда двигаться от раздела к разделу, легко возвращаться назад или получить справку. Ключевое значение при этом имеет разработка титульной страницы, которая содержит самый общий перечень разделов сервера, его своеобразный «основной ряд». Стабильность информационного наполнения определяется постоянством представленной информации. Пользователи должны быть уверены, что найдут интересующие их сведения, при любых технических и структурных реорганизациях. Даже утратившие острую актуальность материалы, например, доклады позапрошлогодней конференции или материалы завершившейся выставки, следует не удалять, а переводить в архивную часть сайта. Оперативность обновления данных обеспечивает постоянное поддержание сайта в актуальном состоянии. Регулярное обновление и пополнение сведений, как ничто другое способствуют сохранению интереса к web-сайту у его постоянных посетителей и, соответственно, повышают его популярность. Следует постоянно помнить одно из правил, выработанное цифровым сообществом: устаревшее наполнение сайта часто производит худшее впечатление, чем даже его отсутствие. Доступность страниц складывается из нескольких факторов, главным их которых является техническая «устойчивость» web-сайта, что составляет заботу штата системных администраторов. Однако на доступность информации может повлиять и оформление страниц. Злоупотребление иллюстративными 25 материалами, аудио- и видеофрагментами, которые «весят» намного больше обычного текста, может ощутимо снизить скорость передачи данных и, таким образом, в значительной степени затруднит или сделает совершенно невозможным их использование. Об этом надо постоянно помнить и применять графику, а тем более звук и видео, в разумных пределах. Внешнее оформление web-страниц не имеет кардинального значения, хотя смотреть на изысканный фон и со вкусом сделанную анимацию, конечно, приятнее, чем на тоскливо-серые страницы. Естественным требованием является единообразный стиль оформления всего web-сайта. При выборе цветового решения не следует гнаться за чрезмерной оригинальностью дизайнерского решения, цветовая схема web-сайта должен быть удобна для восприятия пользователем. Однако, следует всегда помнить, что изысканный внешний вид сайта не самоцель и хорош только тот дизайн, который работает на содержание. После создания или обновления страниц и перед загрузкой страниц непосредственно на web-сайт необходимо произвести проверку текста на наличие орфографических ошибок. В дальнейшем, после завершения работ над сайтом, его придется поддерживать, т.е. дополнять и изменять. Для быстрой и успешной модификации сайта необходимо, чтобы: 1) Сайт имел структуру, пример предлагаемой структуры сайта см. выше. 2) Исходный HTML-код должен быть читабельным. 3) Верхние и нижние колонтитулы были вынесены в отдельный файл. 4) CSS (таблицы каскадных стилей), используемые в нескольких документах находились в отдельном файле. 5) Функции JavaScript, используемые в нескольких документах находились в отдельном файле. 6) Гиперссылки имели правильные пути - абсолютные и относительные. 7) В именах файлов и адресах гиперссылок использовались только цифры и буквы английского алфавита нижнего регистра, также допускается использование символа подчеркивания. Все остальные символы русского алфавита, английские символы верхнего регистра значительно могут осложнить поддержку веб-сайта. При соблюдении вышеуказанных требований модификация сайта и портабельность сайта будут осуществляться с минимальными затратами. Об использование стилей, JavaScript, новых технологиях и прочих извращенных фантазиях. Интерфейс веб-сайта - это средство навигации и доступа к информации. Исходя из этого определения, применяют только те технологии и те средства тех или иных технологий, которые вам действительно необходимы. Например, в языке гипертекстовой разметки HTML достаточно большое количество команд, однако реально на практике мы применяем лишь меньшую половину из них, в остальных просто нет надобности. Совсем не стоит применять самые последние технологии, которые могут не поддерживаться какими-либо браузерами. Главная задача - дать пользователям удобно работать с информацией на нашем сайте, а не затруднить к ней доступ. 26 2.2 Требования к веб-сайту по дизайну Приведем ряд общих требований, предъявляемых к веб-сайтам: легкость освоения; запоминаемость; эффективность использования; надежность использования; удовлетворение пользователя. При создании веб-сайтов необходимо руководствоваться следующим: 1) Не существует типичных людей. Всегда нужно пытаться представить в качестве посетителя вашего сайта реально существующего человека. 2) Избегать использования текста, графики и фона одного оттенка. 3) Поддерживать высокий контраст. Избегать использования текста, фона и графики одинаковой яркости. 4) Избегать фонов, перегруженных графическими элементами. 5) Не заставлять пользователей запоминать информацию, так как узнавание намного проще, чем воспроизведение из памяти. 6) Ссылки, уже посещенные пользователем, должны отличаться цветом и/или стилем от тех, по которым еще не был осуществлен переход. 7) Так как запоминать зрительные образы намного проще, делать страницу так, чтобы она оставалась в памяти у пользователя и отличалась от остальных. 8) Ограничивать размер однородных групп (например ссылок), из которых необходимо сделать выбор 5 – 9 элементами. Это связано с «магическим» числом Миллера – 7 2, указывающего, сколько объектов одновременно человек может удерживать во внимании. 9) Помнить, что время, которое пользователь согласен потратить на ожидание, пропорционально ожидаемому результату. 10) Если время загрузки страницы составляет более 30 с., необходимо обеспечить пользователю уверенность в том, что процесс действительно происходит. Это можно реализовать, например, при помощи индикатора выполнения процесса. 11) Затраченное время значит для пользователя намного больше, чем закаченные байты. 12) Свести к минимуму расстояние, преодолеваемое указателем мыши между двумя последовательными вариантами выбора. 13) Постараться свести к минимуму расстояние между наиболее часто посещаемыми областями страницы (особенно это касается главной страницы) и кнопкой «Назад» браузера. Ниже приведены некоторые наиболее распространенные традиции в вебдизайне: 27 Логотип сайта в верхнем левом углу одновременно является ссылкой на главную страницу. На длинных страницах применяются ссылки, возвращающие пользователя в верхнюю часть страницы. То, на чем возможен щелчок кнопкой мыши, имеет специальное выделение. Например, текст ссылок обычно имеет подчеркивание или какоелибо иное выделение. Кроме того, обычно применяется динамическое выделение, когда объект изменяет свой внешний вид в момент прохода над ним указателя мыши. - 2.3 Логическая и физическая структуры web-сайта Логическая структура web-сайта отображает то, как именно связаны между собой страницы одного сайта. При разработке интернет-витрины компьютерной техники максимальная связь страниц достигнута при помощи постоянного отображения главного меню сайта, благодаря этому навигация по сайту не вызывает никаких затруднений. Логическая структура интернет-витрины электронной техники представлена в соответствии с рисунком 2.2. Главная страница сайта имеет определённую структуру, представленную в соответствии с рисунком 2.1. Основное меню сайта Название Логотип 2 box 1 box Подвал сайта Рисунок 2.1 Структура главной страницы web-сайта «интернет-витрина компьютерной техники» 28 Меню сайта Главная страница сайта Системные блоки Ноутбуки Комплектующие Периферия Игровые приставки Программное обеспечение О нас Акции Контакты Подвал сайта Рисунок 2.2 Логическая структура интернет-витрины компьютерной техники Логическая и физическая структуры могут не совпадать, поскольку в общем случае физическая структура ресурса разрабатывается, исходя из удобства размещения файлов. Однако более или менее точное сохранение порядка следования логических разделов в физической структуре сайта позволит вам избежать путаницы при последующем дополнении и обновлении материалов. Физическая структура сайта представлена в соответствии с рисунком 2.3. 29 Рисунок 2.3 Физическая структура сайта При разработке внешней и внутренней структуры – главная задача сделать так, чтобы в будущем посетителю было легко ориентироваться на сайте, чтобы важная и нужная информация легко находилась. С такой структурой пользователю будет удобно осуществлять переходы по сайту. 2.4 Верстка сайта с помощью CSS Следующим этапом разработки сайта после создания его макета является верстка. Задача верстальщика перенести с помощью html кода и таблиц css скелет будущего сайта в виртуальный мир. Проще говоря, перенести размеры и пропорции ресурса в форму, понятную для браузера. В процессе верстки кодом html происходит разбивка «скелета» сайта на части. А с помощью css (каскадных таблиц стилей) задаются размеры его «костей», цвет и расположение. Различают несколько видов верстки: 1) Табличная – ранее была основным способом верстки. В табличной верстке для задания структуры сайта используется тег <table> и его дочерние теги. Верстка с помощью таблиц позволяет наиболее пропорционально расположить все элементы дизайна относительно друг друга. Но в тоже время такой код получается слишком объемным (рисунок 2.4): Рисунок 2.4 Табличная верстка сайта с помощью CSS 30 Также к основным недостаткам табличного кода относится его долгая загрузка и плохая индексация содержимого поисковыми системами. Содержимое страницы, сверстанной на основе таблиц, не будет отображено до тех пор, пока не загрузятся все данные. Блочная верстка позволяет отображать каждый загруженный элемент отдельно. Плохая индексация табличных страниц объясняется большими промежутками между блоками текста, расположенного в разных ячейках таблицы. Теперь табличная верста редко используется в качестве основного метода создания сайтов. Сейчас ее применяют лишь для структурирования табличных данных и расположения графических изображений. 2) Блочная – в данный момент является основным способом верстки. В отличие от табличной блочная верстка обладает рядом преимуществ: Отделение стиля элементов от кода html; Возможность наложения одного слоя на другой – такая возможность во многом облегчает позиционирование элементов. Лучшая индексация поисковиками; Высокая скорость загрузки страницы, состоящей от взаимно независимых элементов; Легкость создания визуальных эффектов (выпадающих меню, списков, всплывающих подсказок). Основным недостатком блочной верстки является некая «двусмысленность» понимания ее кода различными браузерами. Поэтому часто html страницы приходится «доводить» путем использования специальных хаков. С появлением блочной верстки родилось такое понятие, как «кроссбраузерность». Из-за различия отображения одного и того же элемента в разных браузерах верстальщикам приходится вставлять в основной html целые куски кода (хаки). Действие хака является узкоспециализированным и решает проблему некорректного отображения лишь в одном браузере. Основным элементом, применяемым в блочной верстке, является тег <div>. Участок кода, отделенный этим тегом, называется слоем. Все стилевые решения вынесены за границы кода html в каскадные таблицы стилей. Доступ к ним осуществляется через идентификаторы или классы css (рисунок 2.5). 31 Рисунок 2.5 Классы CSS Перед началом верстки, мы создали psd макет сайта в графическом редакторе, разрезали на блоки (слои). В отдельную папку поместили вырезанные фоновые картинки, которые будут прикрепили отдельно к каждому слою (рисунок 2.6). Рисунок 2.6 PSD макет сайта 32 Далее в текстовом редакторе с помощью div задаем структуру будущего ресурса и присваиваем каждому слою свой селектор id. Получается такая структура, представленная в соответствии с рисунком 2.7. Рисунок 2.7 Структура сайта Затем к готовой структуре сайта на html строкой <link rel="stylesheet" type="text/css" href="style.css" /> прикрепляем файл css. После чего добавляем в него стилевое описание каждого слоя, позиционирование относительно других элементов и его размеры. 2.5 Описание структуры и формата страниц web-сайта Интернет-витрина «Магазин компьютерной техники» состоит из нескольких страниц: - Главная 33 o Категории Системные блоки Ноутбуки Комплектующие Периферия Игровые приставки Программное обеспечение - О нас - Акции - Контакты Главная страница web-сайта «Интернет-витрина магазина компьютерной техники» представлена в соответствии с рисунками 2.8 и 2.9. Рисунок 2.8 Главная страница сайта (часть 1) Рисунок 2.9 Главная страница сайта (часть 2) 34 Страницы пользовательской части включают такие web-элементы, как горизонтальное меню, шапка с названием и фирменным логотипом, контентная область, футер. Главная страница содержит следующие элементы: - блок «Главная»; - блок «О нас»; - блок «Акции»; - блок «Контакты»; - блок «Категории»; Блок «Категории» содержит каталог всех товаров, и разделов в соответствии с рисунком 2.10. Рисунок 2.10 Блок «Категории» В данном блоке отображаются названия категорий товаров интернетвитрины. Для того что бы просмотреть подробную информацию о категории необходимо нажать по названию категории. Откроется страница выбранной категории, на которой будет представлен товар в соответствии с названием категории. Например, перейдя по ссылке «Системные блоки», мы будем направлены на страницу «Системные блоки» (Рисунок 2.11), где отображен перечень компьютерной техники, соответствующий категории «Системные блоки», которая на данный момент времени имеется в наличии в магазине, который представляет данная интернет-витрина. 35 Рисунок 2.11 Страница «Системные блоки» На странице «О нас» web-сайта «Интернет-витрина магазина компьютерной техники» пользователь имеет возможность ознакомиться с общей информацией о магазине, а также о политике, проводимой данным магазином. Страница «О нас» представлена в соответствии с рисунком 2.12. Рисунок 2.12 Страница «О нас» 36 На странице «Акции» web-сайта «Интернет-витрина магазина компьютерной техники» пользователь имеет возможность ознакомиться с проводимыми в магазине на данный момент времени скидками и акциями Страница «Акции» представлена в соответствии с рисунком 2.14 Рисунок 2.14 Страница «Акции» На данной странице надпись: «На данный момент в нашем магазине акции не проводятся», была реализована с помощью JS, код которого представлен на рисунке 2.14. Рисунок 2.14 JS, с помощью которого реализована переливающаяся надпись на странице «Акции» 37 На странице «Контакты» web-сайта «Интернет-витрина магазина компьютерной техники» пользователь имеет возможность ознакомиться с контактными данными данной интренет-витрины, с помощью которых пользователь сайта имеет возможность связаться с продавцами, менеджерами и руководством данного сайта и магазина. Страница «Контакты» представлена в соответствии с рисунком 2.15 Рисунок 2.15 Страница «Контакты» Как можно было заметить выше, все страницы интернет-витрины содержат некоторые одинаковые элементы – «шапку» страницы, представленную в соответствии с рисунком 2.16. Рисунок 2.16 «Шапка» интернет-витрины В ходе разработки web-сайта «Интернет-витрина магазина компьютерной техники» в рамках курсового проекта по дисциплине «Web-технологии» были достигнуты все поставленные цели и выполнены все задачи. 38 2.6 Тестирование web-сайта Проверка на совместимость сайта с различными браузерами и разными настройками браузеров производилось на их последних версиях, в соответствии с таблицей 2.1. Таблица 2.1 – совместимость с браузерами. Браузер Google Chrome Mozilla Firefox Windows Internet Explorer Microsoft Edge Оценка Положительная. Все эффекты работают отлично. Положительная. Все эффекты работают отлично. Нежелательно. Некоторые эффекты не работают. Нежелательно. Некоторые эффекты не работают. Исходя из данных таблицы 2.1, можно увидеть, что не рекомендуется просмотр страниц сайта с помощью браузеров Windows Internet Explorer и Microsoft Edge. 39 ЗАКЛЮЧЕНИЕ В процессе проектирования курсового проекта был разработана интернет-витрина магазина компьютерной техники. Интернет-витрина компьютерной техники предназначена для рекламы различных товаров в интернете. Областью применения данного Web-сайта выступает интернет-реклама. Создание данной интернет-витрины позволит продвигать товары, уменьшить издержки на рекламу, расширить клиентскую аудиторию и, как следствие, увеличение прибыли. Интернет-витрина имеет удобный и понятный интерфейс, благодаря которому не требуется излишних усилий в освоении работы с сайтом. Вся информация не содержит ничего лишнего. Результаты проверки показали, что система работает без ошибок, имеется возможность работы с веб-сайтом во всех популярных браузерах. В результате разработки курсового проекта были отточены навыки в дизайне сайтов, проектировки интерфейсов, разработке логотипов. Приобретены практические умения HTML и CSS верстки сайтов, а также использования системы управления содержимым сайта. В результате выполнения данного проекта цель достигнута и выполнены следующие задачи: - обеспечение удобного и эффективного интерфейса пользователя; - разработка дизайна, делающего нахождение пользователя на сайте максимально комфортным; - обеспечение удобного просмотра всего списка товаров; - необходимо чтобы каждый покупатель, независимо от возраста, смог без проблем получить необходимую ему информацию о товаре. В дальнейшем возможна модернизация и улучшение данного web-сайта, с последующим внедрением. 40 СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ 1) Отинова И.В., Копнова О.Л., Касимов И.Р. Методические указания «Оформление письменных работ студентами бакалавриата для специальностей 5B070300 «Информационные системы» и 5B011100 «Информатика». – Петропавловск: СКГУ им. М. Козыбаева, 2014. – 100 с.; 2) HTML, https://ru.wikipedia.org/wiki/HTML (Дата присвоенная файлу: 18.07.2014. Актуальная дата 05.04.2015); 3) Язык разметки гипертекста, http://russika.ru/t.php?t=4472 (Дата присвоенная файлу: 19.04.2013. Актуальная дата 08.11.2014); 4) Введение_в_HTML,http://html.findinfo.ru/html/008/introduction.htm#h2.1 (Дата присвоенная файлу: 17.02.2010. Актуальная дата 28.11.2014); 5) Учебник HTML для начинающих. Блочная верстка. Урок 2. Знакомство с HTML, http://www.web-lesson.ru/site-creation/html/page,3,16uchebnik-html-blochnaya-verstka.html (Дата присвоенная файлу: 27.08.2013. Актуальная дата: 10.04.2015); 6) Спейнауэр С. Справочник Web-мастера. СПб.: BHV, 1997. – 368 с. 7) Дронов В.А. Программирование. - СПб.: БХВ-Петербург, 2006; 8) Алексеев А.П. Введение в Web-дизайн: учебное пособие. - М.: СОЛОН-ПРЕСС, 2008; 9) Барысов Р. Постройте профессиональный сайт сами. - СПб., 2009; 10) Печников В.Н. СомоучительWeb-страниц и Wrb-сайтов. - М.: Триумф, 2006; 11) Печников В.Н. Создание Web-сайтов без посторонней помощи. М.: Триумф, 2006; 12) Кроудер Д. Создание web-сайта для чайников: 3-е издание. - М.: Диалектика, 2009; 13) Панфилов И.В., Создание Web-сайтов. – М.: Триумф, 2008. – 464 с.; 14) Статья «Верстка макетов сайта», http://inst-it.ru/default-extensions/2kurs/verstka-maketov-sajtov-html-css/ (Дата присвоенная файлу: 14.06.2014. Актуальная дата: 9.11.2015); 15) Соколов С.А. HTML и CSS в примерах, типовых решениях и задачах, Москва, Вильямс, 2007 г.; 16) «Что такое Java Script?» http://projs.org/about-javascript (Дата присвоенная файлу: 14.09.2014. Актуальная дата: 30.10.2015); 17) Статья «Как создать слайдер?», http://siteacademy.ru/index.php/jquery/40-jquery/image-slider-jquery-css3 (Дата присвоенная файлу: 14.09.2014. Актуальная дата: 17.11.2015); 18) «Краткий обзор Adobe Photoshop», http://cg-evolution.ru/beglyj-obzoradobe-photoshop/ (Дата присвоенная файлу: 15.08.2014. Актуальная дата: 23.09.2015); 19) Статья «10 плюсов и 10 минусов программы Adobe Dreamweaver», http://evgeniypopov.com/blog/10-plyusov-i-10-minusov-programmyi-adobe41 dreamweaver.html (Дата присвоенная файлу: 14.10.2014. Актуальная дата: 18.11.2015); 20) Статья «Преимущества текстового редактора Notepad++», http://wpnew.ru/udobnaya-rabota/uchimsya-rabotat-s-tekstovym-redaktoromnotepad.html (Дата присвоенная файлу: 28.03.2014. Актуальная дата: 18.11.2015); 21) «Структура сайта: Основные виды», http://sait-sozdat.ru/etapsozdanie-sait/proekt-sait/sait-struktura-osnovnye-vidy.php (Дата присвоенная файлу: 17.07.2014. Актуальная дата: 18.10.2015); 22) Статья «Структура сайта», http://itferma.com/publications/40Struktura_sayta.html (Дата присвоенная файлу: 30.05.2014. Актуальная дата: 21.10.2015); 23) http://helpx.adobe.com/ru/dreamweaver/using/cascading-stylesheets.html (Дата присвоенная файлу: 2.03.2014. Актуальная дата: 25.10.2015); 24) Статья «Этапы разработки дизайна сайта», http://www.aklychin.ru/view_post.php?id=5 (Дата присвоенная файлу: 15.08.2014. Актуальная дата: 3.11.2015); 25) Самоучитель по фотошопу для начинающих, http://photoshop.demiart.ru/book/Index.html (Дата присвоенная файлу: 17.01.2014. Актуальная дата: 8.11.2015); 26) «Все для создания Web-сайта», http://www.Webstudio.ru.ru/glossary/logical_structure.htm (Дата присвоенная файлу: 13.05.2014. Актуальная дата: 15.11.2015); 27) Денисова А., Вихарев И., Белов А., Наумов Г. Интернет. Самоучитель. 2-е изд. – СПб.: Питер. 2004. – 368 с.; 28) Обзор скриптовых языков программирования. Понятие о скриптовых языках, http://www.script-coding.com/Browse.html (Дата присвоенная файлу: 07.09.2013. Актуальная дата: 21.10.2015); 29) Статья «Что такое HTML», http://htmlweb.ru/html/bhtml.php (Дата присвоенная файлу: 17.06.2014. Актуальная дата: 20.09.2015); 30) Официальный сайт HTML, http://www.html.com (Дата присвоенная файлу: 1.08.2014. Актуальная дата: 6.11.2015); 31) Статья «Создание сайта», http://www.informatik.kz/website1.htm (Дата присвоенная файлу: 1.06.2014. Актуальная дата: 8.11.2015); 32) Статья «Как создать свой сайт», http://www.internettechnologies.ru/how-to-create-a-website.html (Дата присвоенная файлу: 10.08.2014. Актуальная дата: 25.11.2015). 42 ПРИЛОЖЕНИЕ A Содержание компакт-диска К курсовому проекту прилагается компакт-диск, содержащий следующее: пояснительную записку к курсовому проекту (IS10713079.doc); презентацию PowerPoint к курсовому проекту (IS10713079.ppt); папку с разработанным материалом (проект); 43
