Разработка модуля каталога товаров для интернет-магазина

• Введение
• Глава 1. Теоретические аспекты создания интернет-магазина
• 1.1 Понятие, назначение, виды интернет-магазинов
• 1.1.1 Понятие
• 1.1.2 Виды интернет-магазинов
• 1.2 Особенности организации интернет-магазинов
• 1.3 Анализ требований к разрабатываемому продукту
• 1.3.1 Удобный и доступный интерфейс
• 1.3.2 Возможность выполнить оформление заказа без взаимодействия с персоналом магазина
• 1.3.3 Контроль учета товаров на сайте и складе
• 1.3.4 Возможность выбора удобных методов доставки
• 1.3.5 Возможность выбора удобных методов оплаты
• 1.4 Способы оптимизации графического контента
• Глава 2. Практическая сторона вопроса
• 2.1 Логическая, физическая структура сайта, особенности наполнения
• 2.1.1 Логическая структура сайта
• 2.1.2 Физическая структура сайта
• 2.1.3 Особенности наполнения
• 2.2 Анализ возможных средств реализации
• 2.2.1 Html
• 2.2.2 Cascading Style Sheets
• 2.3 Особенности реализации каталога товаров
• 2.4 Особенности реализации графического контента
• Глава 3. Экономика и организация производства
• 3.1 Положения и формулы для расчета стоимости программного продукта
• 3.2 Временные затраты труда на разработку
• 3.2.1 Поправочные коэффициенты затрат труда на исследование алгоритма решения задачи
• 3.2.2 Поправочный коэффициент остальных затрат труда на разработку
• 3.3 Расчет средней часовой оплаты труда программиста
• 3.4 Затраты по оплате машинного времени
• 3.4.1 Годовые отчисления на амортизацию
• 3.4.2 Затраты на электроэнергию
• 3.4.3 Текущие затраты на эксплуатацию ПК
• 3.4.4 Себестоимость часа работы на ПК
• 3.4.5 Трудоемкость использования ПК
• 3.4.6 Затраты на оплату машинного времени
• 3.5 Общие затраты на создание программного продукта
• Глава 4. Авторское право
• 4.1 Понятие и происхождение
• 4.2 Регистрация авторского права. Защита авторских прав
• 4.3 Объекты авторского права
• 4.4 Первый признак объекта авторского права
• 4.5 Исключения
• 4.6 Знак авторского права
• 4.7 Защита авторских прав
• 4.7.1 Технические средства защиты авторских прав
• 4.7.2 Информация об авторском праве
• Заключение
• Список литературы
• Приложение

Введение

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

Актуальность данной работы состоит в создании каталога товаров для небольшого DropShip-магазина литературы «Comics-Porosen».

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

Основными задачами данного проекта являются:

? изучение теоретических аспектов создания интернет магазинов;

? изучение способа организации интернет-магазинов;

? изучение видов и требований для создания интернет магазина;

? изучение методов оптимизации для графического контента сайта;

? описание необходимых языков для создания каталога;

? создание физической и логической структур сайта-каталога;

? описание создания различных графических элементов контента каталога;

? описание процесса создания каталога.

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

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

В третьей главе представлена экономическая сторона вопроса.

Основным содержанием четвертой главы является информационная база о авторском праве.

сайт каталог авторский право

Глава 1. Теоретические аспекты создания интернет-магазина

1.1 Понятие, назначение, виды интернет-магазинов

1.1.1 Понятие Интернет-магазин — электронный ресурс, основной задачей которого является продажа товаров, как в on-line так и в off-line режимах. 5]

Назначение

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

Интернет-магазин при эффективном подходе к делу способен приносить большую прибыль.

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

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

1.1.2 Виды интернет-магазинов

Сайт-визитка

Является рекламой на стартовом этапе развития. Обычно создаётся на платных или же бесплатных web-хостингах.

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

Каталог товаров

Данный вид содержит в себе более-менее полный список товаров. Цены при этом могут указываться, могут и нет. Практически, никогда не указывается количество товара на складе, разве что его наличие в форме «есть/нет». Покупка в таком магазине обычно происходит следующим образом:

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

— спустя какое-то время с ним связывается менеджер, уточняющий методы оплаты, доставки, наличие товара, и так далее;

— клиент оплачивает товар тем или иным способом (весьма часто — путем визита в банк для безналичного платежа);

— клиенту отправляется товар выбранным методом доставки.

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

В чем же минус данного вида? К сожалению, покупателям не раз приходится сталкиваться с тем, что товар, представленный на сайте, реально отсутствует. Цены, если они есть, часто не соответствуют действительности. Описание товара не является достаточным для получения представления о товаре.

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

Кроме того, будучи просто довеском к реальному магазину, последний редко уделяет серьезное внимание поддержанию актуальности ассортимента, наличия и цен. [7]

DropShip магазин

Продажи осуществляются по системе Dropshipping (по-русски читается дропшиппинг). В этом случае, вы можете не быть непосредственно знакомы с продаваемым товаром: не видеть, или не держать его в руках; и в этом, собственно, нет необходимости. Вы выступаете в роле продавца и можете сами устанавливать цену, вам не нужен склад, так как за отправку и доставку товаров отвечает поставщик. Когда покупатель оплатил товар, часть денег вы оставляете себе, а себестоимость (оптовую цену) — платите поставщику. Недостатками подобной модели является полная предоплата клиента (что может вызвать в определенной степени недоверие, особенно если он первый раз увидел ваш магазин), затраты времени и денег на доставку. [7]

Полноценный интернет-магазин

Полноценный интернет-магазин имеет единственную базу наличия товара — в интернете. В отличие от каталога, магазин имеет реальный товар на складе, готовый к отправке в кратчайшие сроки. Это не мешает такому магазину привозить товары под заказ (в том числе, и по более низким ценам, чем со склада), но большое количество товара уже присутствует на складе, полностью внесено в базу данных сайта с указанием количества, цены и подробными, как правило, описаниями. Такого рода магазин обычно не увлекается рекламой тех товаров, которых не закупает на постоянной основе. И потому все, что присутствует на сайте, как правило, можно купить и получить в кратчайший срок. [7]

1.2 Особенности организации интернет-магазинов Для того чтобы ответить на этот вопрос, необходимо обратиться к Общероссийскому классификатору видов экономической деятельности ОК 029−2001 [8], утвержденному Постановлением Госстандарта России от 6 ноября 2001 г. № 454-ст (далее — ОКВЭД).

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

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

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

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

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

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

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

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

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

После того, как сайт создан, торговая компания должна зарегистрировать его под своим доменом.

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

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

При продаже товара по Интернету переход права собственности на товар от продавца к покупателю происходит именно в момент вручения товара последнему.

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

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

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

? общую систему налогообложения;

? упрощенную систему налогообложения.

Причем ни та, ни другая не дают продавцу права работать без применения ККТ. А раз так, то применение ККТ при расчетах наличными при торговле через интернет-магазин является обязательным. [9]

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

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

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

1.3 Анализ требований к разрабатываемому продукту

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

— удобный и доступный интерфейс;

— возможность выполнить оформление заказа без взаимодействия с персоналом магазина;

— контроль учета количества товара на складе;

— возможность выбора удобных методов доставки;

— возможность выбора удобных методов оплаты;

— четкое выполнение заказов без ошибок и в заданные сроки.

Также немаловажна возможность консультаций в режиме on-line с компетентным менеджером, способным ответить на вопросы технического (в данном случае) плана, более сложные, чем «есть ли в наличии» или «сколько стоит». 7]

1.3.1 Удобный и доступный интерфейс

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

- разработать удобную и понятную систему поиска;

— информация о товаре должна быть полноценной и достоверной;

— необходимо установить простую систему оформления товара с полным описанием вариаций доставки и оплаты. [7]

1.3.2 Возможность выполнить оформление заказа без взаимодействия с персоналом магазина

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

1.3.3 Контроль учета товаров на сайте и складе

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

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

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

1.3.4 Возможность выбора удобных методов доставки

Важной характеристикой интернет-магазина является выбор методов доставки товара. Безусловно, намного проще, когда имеется 1−2 метода, и все отправляется с их помощью. Однако, очевидно, эти два метода, удобных для магазина, не обязаны совпадать с методами, удобными для конкретного покупателя. Поэтому чем больше вариантов доставки магазин поддерживает, тем удобнее заказчикам. [7]

1.3.5 Возможность выбора удобных методов оплаты

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

Поскольку клиент идет в магазин, то риск достается ему. А вот величина этого риска уже зависит от многих факторов. Клиент может оценить ее по тому, как оформлен магазин, как он реагирует на обращения клиента, какие о нем отзывы на других ресурсах или личные впечатления знакомых. И лишь потом принимает решение о том, доверять или нет. Допустим, что с этим все в порядке. Но как же платить?

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

1.4 Способы оптимизации графического контента

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

В среднем, время, в течение которого пользователь ждет загрузки страницы, составляет примерно одну минуту, после чего он может нажать кнопку «Стоп» или закрыть браузер. Если учесть, что средняя скорость связи у пользователя, подключенного через модем, находится в диапазоне от 19 200 до 28 800 бит/с, то получается, что Web-страница со всей графикой должна занимать не более 140 Kb.

Кроме этого, очень желательно сделать так, чтобы пользователь мог увидеть текст страницы до окончания ее полной загрузки. Для этого надо явно указать размеры всех загружаемых картинок. Некоторые HTML-редакторы, например Namo Web Editor, умеют делать это автоматически, в остальных придется это явно указать либо в свойствах рисунка, либо переключиться в режим редактирования HTML-кода, найти тег IMG для каждой картинки и прописать атрибуты height и width.

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

Что же делать, если объем страницы получается больше этих 140 Kb? В этом случае ее можно попытаться оптимизировать (точнее, оптимизировать графику нужно всегда, поскольку чем меньше по объему страница при той же самой информативности, тем более позитивно к ней отнесется пользователь). Правильно выполненная оптимизация графики может привести к значительному уменьшению объема при почти незаметном уменьшении качества.

Оптимизация графики начинается с выбора формата, в котором она будет помещена на Web-страницу. В данный момент в Сети используется 3 графических формата: GIF, JPEG и PNG. Каждый из них имеет смысл применять в определенных ситуациях.

GIF — из рассматриваемых форматов исторически появился самым первым. GIF поддерживает сжатие без потерь и позволяет хранить изображения, содержащие не более 256 цветов, при этом один из цветов может быть прозрачным (т.е. при выводе картинки в броузере на месте прозрачных пикселей отображается фон). GIF поддерживает также создание простейших анимационных роликов, которые хранятся в виде последовательности кадров в одном GIF-файле.

PNG — существует два варианта этого формата: с отображением по палитре и полноцветный, причем оба варианта обеспечивают сжатие без потерь. PNG с отображением по палитре во многом похож на GIF: позволяет отображать не более 256 цветов и поддерживает прозрачность, но использует другой алгоритм сжатия. PNG на данный момент не позволяет создавать анимационных роликов.

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

С учетом всех этих особенностей можно дать следующие рекомендации по применению форматов:

? JPEG следует применять для цифровых фотографий и больших рисунков с плавными цветовыми переходами. Это позволит добиться эффективного сжатия при совершенно незначительном уменьшении качества;

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

? для простейших анимированных роликов можно использовать только GIF, т.к. другие форматы анимации не поддерживают;

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

После того, как формат выбран, можно приступать непосредственно к оптимизации изображения. Оптимизация изображений в формате JPEG производится путем подбора коэффициента потери качества, который может принимать значения от 1 (максимум потерь) до 100 (сжатие без потерь). Рекомендуется сохранять несколько вариантов изображения, изменяя коэффициент потерь от 100 в сторону уменьшения с шагом 5 или 10, затем последовательно просмотреть их и выбрать из тот, который имеет наименьший коэффициент, но устраивает вас с точки зрения качества.

Оптимизация файлов в форматах GIF и PNG с палитрой производится путем уменьшения количества цветов в палитре (при этом убираемые цвета заменяются наиболее похожими из оставшихся в палитре), а также изменением параметра Dithering, который отвечает за передачу полутонов путем «разбрасывания» по изображению точек другого цвета (особенно сильно использование Dithering влияет на рисунки в формате GIF).

В некоторых графических редакторах (например, в Adobe Image Ready, Macromedia FireWorks, Ulead GIF Animator) имеется возможность производить сжатие в GIF с потерями. В этом случае из изображения убирается часть пикселей, которая наиболее сильно оказывает влияние на эффективность сжатия (например, отдельные пиксели другого цвета в середине одноцветной области). В большинстве случаев применение этой возможности приводит к значительному ухудшению качества изображения, но иногда такое сжатие оказывается эффективным. Поэтому имеет смысл попробовать использовать различные показатели этого параметра в диапазоне от 100 до 90 и посмотреть, как это будет влиять на изображение и его размер.

Еще один важный способ оптимизации графики — это уменьшение ее размеров по ширине и высоте и последующее растягивание до исходных размеров средствами браузера. Этот способ применяется, в основном, для элементов оформления сайта: фоновых рисунков для таблицы, разделительных полос и т. п. Основан он на следующих особенностях отображения HTML: если рисунок, вставленный с помощью тега по ширине или высоте меньше, чем указано в свойствах height и width, то он будет растянут (или наоборот, сжат) до нужного размера, а если рисунок описан как фон таблицы, ячейки или другого объекта в свойстве background, то он будет повторяться до тех пор, пока не заполнит весь объект. В результате вместо того, чтобы сохранять в файл весь элемент целиком, достаточно вырезать его небольшой кусок, а дальше растянуть или размножить непосредственно в браузере с помощью свойств, описанных выше.

Например, если требуется создать полосу-разделитель с плавным переходом цвета по вертикали размером 600×10, то достаточно вырезать из нее кусок размером 1×10 и вставить его с помощью тега , указав в атрибутах height=10 width=600. В результате отображаться он будет точно так же, как и исходная полоса размером 600×10, но объем файла с нескольких килобайт уменьшится до двух-трех сотен байт.

Аналогично можно поступать и с фоновыми рисунками для таблиц и ячеек (в тех случаях, когда фон является достаточно абстрактным) — вырезать куски шириной несколько десятков пикселей, после чего они будут дублироваться браузером по всей ячейке. Однако при этом возможна ситуация, когда левый и правый край изображения плохо стыкуются между собой. В этом случае можно применить следующий несложный трюк: увеличить размер области рисования (canvas size) в 2 раза по горизонтали, выделить исходное изображение и вставить его в появившееся свободное место, после чего применить функцию «отобразить горизонтально» (Flip horizontal). В итоге получившееся изображение будет идеально стыковаться по горизонтали и в браузере выглядеть как совершенно однородный рисунок.

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

Еще один способ оптимизации графики — нарезание крупных изображений на «ломтики». Сам по себе этот метод почти неэффективен, так как каждый «ломтик» занимает примерно такой же объем, как и в исходном изображении, кроме того, к нему добавляется заголовок файла и необходимость выполнить дополнительный HTTP-запрос для получения еще одного файла (что добавляет еще примерно 1 Kb передаваемой/принимаемой информации). Исключение составляют только те случаи, когда изображение содержит резкие переходы между различными областями, которые совпадают с границами «ломтиков», т.к. в этом случае возможно увеличение эффективности сжатия). Однако если в разрезаемом изображении есть однородные области, то можно применять сочетание этого метода с методом растягивания в браузере, описанным выше, и тогда его эффективность значительно повышается.

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

Глава 2. Практическая сторона вопроса

2.1 Логическая, физическая структура сайта, особенности наполнения

2.1.1 Логическая структура сайта

Логическая структура сайта — это система ссылочного взаимодействия между страницами виртуального ресурса. Она должна продумываться на самых ранних этапах разработки сайта и являться основой функциональности дизайна. 6] (см. Приложение 1)

2.1.2 Физическая структура сайта

Физическая структура сайта — схема расположения фактических файлов по подпапкам папки, в которой размещен сайт. (см. Приложение 2)

2.1.3 Особенности наполнения

В данном каталоге основным контентом является информация о продаваемом товаре:

? его изображение;

? информация о его физическом состоянии;

? информация о его подлинности;

? информация о его стоимости.

Так же, на сайте представлены различные фоновые изображения.

2.2 Анализ возможных средств реализации

2.2.1 Html

Основным языком при программировании каталога служит язык HTML.

HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартный язык разметки документов во Всемирной паутине. Большинство web-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами, полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.

Во всемирной паутине HTML-страницы, как правило, передаются браузерам от сервера по протоколам HTTP или HTTPS, в виде простого текста или с использованием шифрования. [15]

Язык HTML в настоящее время является основным языком создания Web-страниц. Язык HTML формирует внешний вид Web-страниц. HTML обычно просто указывает другим программам (Web-браузеру, например), как нужно отображать текст, рисунки и т. п., создаёт ссылки к другим Web-документам. HTML позволяет включать в текст и поддерживать работу объектов, созданных средствами JAVA и др.

Web-страницы, написанные с помощью «классической» части HTML, статичны и не поддерживают интерактивный режим работы пользователя.

Код HTML — это аналог программы на HTML. Код HTML состоит из тегов. [1]

Тег — стартовый или конечный маркер (метка, признак, указатель) элемента. Теги определяют границы действия элементов и отделяют друг от друга.

Стартовый (открывающий) тег — это элемент, заключенный в угловые скобки. Стартовый тег объявляет начало включения элемента в страницу. Например, тег обозначает начало кода страницы. В стартовом теге часто задаются значения атрибутов (свойств, параметров, характеристик) элемента.

Конечный (закрывающий) тег снабжается косой чертой и обозначает конец действия элемента. Например, тег

служит признаком конца кода страницы.

Существуют элементы, не имеющие конечного тега. Например, горизонтальная линия включается в страницу только с помощью стартового тега

---

Если элемент языка HTML является контейнером для других элементов, то он имеет открывающий и закрывающий тег. Значения его свойств оказывают влияние (распространяются, наследуются) на вложенные элементы.

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

выражение «BORDER="1» WIDTH="100″ «является атрибутом тега.

В общем виде синтаксис записи тега HTML в совокупности с его атрибутами выглядит следующим образом:

<�ТЕГ ИМЯ_АТРИБУТА-2="ЗНАЧЕНИЕ" ИМЯ_АТРИБУТА-2="ЗНАЧЕНИЕ" … ИМЯ_АТРИБУТА-n=ЗНАЧЕИЕ" > [2]

2.2.2 Cascading Style Sheets

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Преимущественно используется как средство описания, оформления внешнего вида web-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры web-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой web-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля. [14]

2.3 Особенности реализации каталога товаров

Первым шагом к созданию является написание начального HTML кода страницы (см. Рисунок 1).

Рисунок 1 — Начальный код страницы Там где написано «Название» необходимо вписать название вашего каталога. В области где написано «ссылка на css файл» необходимо указать ссылку на расположение файла с CSS.

Далее следует описать CSS для страницы (см. Рисунок 2).

В данном случае, в CSS обозначены:

? шрифт текста;

? цвет текста;

? размер шрифта;

? работоспособность ссылок;

? цвет ссылок;

? подчеркивание ссылок.

Рисунок 2 — CSS таблица страниц Помещаем CSS файл «thunders.css» (название можно выбрать любое) в директорию «css».

Следующим шагом будет разделение экрана на 4 части путём таблиц.

В первую очередь пишется главная таблица. Внутри неё помещается таблица форматом 2 столбца на 2 строки (см. Рисунок 3).

Рисунок 3 — Кодовое представление разделения экрана В результате получается таблица разделённая на 4 области (см. Рисунок 4).

Рисунок 4 — Графическое представление разделения экрана

Далее, с помощью параметров height и width (длина и ширина) устанавливаем значения (см. Приложение 3):

? 350 height и 350 width для области 1;

? 900 height 350 width для области 2;

? 350 height 900 width для области 3;

? 900 height 900 width для области 4.

Получается разделенная область с указанными размерами (см. Рисунок 5).

Визуальное представление разделения расположено в Приложении 3.

Рисунок 5 — Кодовое представление установки размеров Затем, в области № 4 создаём ещё одну таблицу форматом 3 столбца и 3 строки (см. Приложение 4).

Далее, ссылаясь на графические файлы в директории images/fr и распределяя их по указанным зонам, следует вписать оригинальные параметры для каждой из зон (согласно номеру, указанному в рисунке 7):

1 — width: 56px; height: 29px; letter-spacing: 0px; word-spacing: 0px; background-image: url («images/fr/l_up.png»); background-repeat: no-repeat; background-position: right top;

2 — height: 29px; letter-spacing: 0px; word-spacing: 0px; background-image: url («images/fr/verx.png»); background-repeat: repeat;

3 — width: 56px; height: 29px; letter-spacing: 0px; word-spacing: 0px; background-image: url («images/fr/r_up.png»); background-repeat: no-repeat; background-position: left top;

4 — width: 56px; letter-spacing: 0px; word-spacing: 0px; background-image: url («images/fr/l_centr.png»); background-repeat: repeat-y; background-position: right top;

5 — background-image: url («images/fr/centr.png»); background-repeat: repeat;

6 — width: 56px; letter-spacing: 0px; word-spacing: 0px; background-image: url («images/fr/r_centr.png»); background-repeat: repeat-y; background-position: left top;

7 — width: 56px; height: 29px; letter-spacing: 0px; word-spacing: 0px; background-image: url («images/fr/l_down.png»); background-repeat: no-repeat; background-position: right top;

8 — height: 29px; letter-spacing: 0px; word-spacing: 0px; background-image: url («images/fr/niz.png»); background-repeat: repeat; background-position: left top;

9 — width: 56px; height: 29px; letter-spacing: 0px; word-spacing: 0px; background-image: url («images/fr/r_down.png»); background-repeat: no-repeat; background-position: left top;

В итоге проделанных шагов, был создан код внутренней таблицы. (см. Рисунок 6).

Рисунок 6 — Кодовое представление запрограммированной таблицы внутри области № 4

Таким образом, каталог получает первое графическое составляющее (см. Приложение 5).

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

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

Согласно изображениям, хранящимся в директории «imagesfeed» запрограммировать следует все три столбца (см. Рисунок 7)

Первый столбец:

width: 195px; height: 200px; background-image: url ('images/feed/feed-11.png'); background-repeat: no-repeat; background-position: right top; letter-spacing: 0px; word-spacing: 0px;

Второй столбец:

background-image: url ('images/feed/feed-2.png'); background-repeat: repeat; background-position: right top; letter-spacing: 0px; word-spacing: 0px; height: 200px;

Третий столбец:

width: 33px; height: 200px; background-image: url ('images/feed/feed-3.png'); background-repeat: no-repeat; background-position: left top; letter-spacing: 0px; word-spacing: 0px;

Рисунок 7 — Кодовое представление запрограммированной области № 1

Там, где красным указано «информационная зона» следует указать контактные данные, например:

? Логин Skype;

? Адрес электронной почты;

? Номер телефона За перевод строк отвечает тег

В итоге запрограммированная область № 1 получает графическое составляющее (см. Рисунок 8).

Программирование области № 3 примерно такое же. Первым делом, создаётся форматом 1 столбец и 3 строки. Согласно изображениям, расположенным в директории «imagesniz», программировать следует так:

Рисунок 8 — Графическое представление запрограммированной области № 1

Первая строка: width: 300px; letter-spacing: 0px; word-spacing: 0px; background-image: url («images/niz/verx.png»); background-repeat: no-repeat; background-position: center bottom; height: 218px;

Вторая строка: width: 300px; vertical-align: middle; background-image: url («images/niz/centr.png»); background-repeat: repeat-y; background-position: center top; letter-spacing: 0px; word-spacing: 0px;

Третья строка: width: 300px; height: 70px; letter-spacing: 0px; word-spacing: 0px; background-image: url («images/niz/niz.png»); background-repeat: no-repeat; background-position: center top;

В итоге проделанной работы, был написан код области № 3 (см. Рисунок 9).

Рисунок 9 — Кодовое представление запрограммированной области № 3

В место, где установлена надпись «Меню» необходимо встроить навигационное меню страницы (см. Приложение 6).

Программирование области № 2 является самым простым.

Необходимо вставить следующий код:

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