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

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

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

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

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

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

В среднем, время, в течение которого пользователь ждет загрузки страницы, составляет примерно одну минуту, после чего он может нажать кнопку "Стоп" или закрыть браузер. Если учесть, что средняя скорость связи у пользователя, подключенного через модем, находится в диапазоне от 19200 до 28800 бит/с, то получается, что 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: если рисунок, вставленный с помощью тега <img> по ширине или высоте меньше, чем указано в свойствах height и width, то он будет растянут (или наоборот, сжат) до нужного размера, а если рисунок описан как фон таблицы, ячейки или другого объекта в свойстве background, то он будет повторяться до тех пор, пока не заполнит весь объект. В результате вместо того, чтобы сохранять в файл весь элемент целиком, достаточно вырезать его небольшой кусок, а дальше растянуть или размножить непосредственно в браузере с помощью свойств, описанных выше.

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

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

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

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

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

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

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

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

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

(см. Приложение 1)

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

Физическая структура сайта – схема расположения фактических файлов по подпапкам папки, в которой размещен сайт. [12]

(см. Приложение 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>обозначает начало кода страницы. В стартовом теге часто задаются значения атрибутов (свойств, параметров, характеристик) элемента.

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

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

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

Тег может иметь атрибут или не иметь его. Например, тег верхнего уровня <HTML> не имеет атрибутов, а в строке создания новой таблицы <TABLE BORDER="1" WIDTH="100"> выражение "BORDER="1" WIDTH="100"" является атрибутом тега </TABLE>.

В общем виде синтаксис записи тега 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]