1.3. Языки разметки и таблицы стилей

 

     Основой любой web-страницы является разметка. Технологии разметки, такие как HTML, XHTML и XML, определяют структуру и возможное значение содержимого страницы. Несмотря на распространенное мнение о том, что  языки разметки определяют внешний  вид web-страниц, и не менее распространенное применение HTML в этом стиле, внешний  вид страницы на самом деле должен достигаться при помощи двух технологий, в частности, таблиц стилей.

     HTML (HyperText Markup Language, язык  гипертекстовой разметки) является  первостепенной важности технологией  разметки, применяемой на web-страницах.  Традиционный HTML определяется шаблоном DTD (Document Type Definition, описание типа документа)  стандартного обобщенного языка  разметки (Standardized General Markup Language, SGML) и  существует в трех основных  версиях (HTML 2, HTML 3.2 и HTML 4). Есть  три разновидности HTML 4: переходная, строгая и набор фреймов, причем  большинство авторов документов  пользуются переходным вариантом. HTML 4.01 является наиболее современной  и окончательной версией HTML.

     Хотя  многие теги и правила HTML довольно хорошо определены, большинство производителей браузеров предоставляют расширения к этому языку, выходящие за рамки  описания стандартного обобщенного  языка разметки. Более того, сами браузеры мало способствуют укреплению норм языка разметки, что приводит к небрежному применению этой технологии. К тому же, в то время, как HTML следует использовать прежде всего для структурирования документа, многие разработчики также употребляют его для форматирования документа для его демонстрации. Функции HTML, связанные с форматированием, в конечном итоге будут полностью вытеснены каскадными таблицами стилей (Cascading Style Sheets, CSS). Впрочем, даже при наличии достаточной поддержки таблиц стилей в браузерах, многие разработчики продолжают употреблять таблицы HTML и характерные HTML-теги в дизайне своих страниц. У W3C и производителей браузеров нет планов по дальнейшему развитию HTML, так что переход разработчиков на XHTML поощряется.

     XHTML – это новая редакция HTML, выполненная  с помощью XML (eXtensible Markup Language, расширяемый  язык разметки), а не SGML. XHTML разрешает  две основные проблемы, связанные  с HTML. Во-первых, XHTML, уделяя большое  внимание применению таблиц стилей, продолжает оказывать давление  на дизайнеров, с тем чтобы  они отделяли внешний вид документа  от его структуры. Во-вторых, XHTML привносит намного более строгое  требование о соблюдении правил  разметки web-страниц. К примеру,  в документах XHTML должны содержаться  только теги в нижнем регистре, атрибуты должны быть обязательно  обрамлены кавычками, и, в основном, все правила в том виде, как  они определены в спецификации, должны соблюдаться. 

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

     Расширяемый язык разметки (Extensible Markup Language, XML) многими расхваливается как революционная технология разметки, которая изменит облик web-страниц. Тем не менее, несмотря на эту рекламу, лишь немногие в точности понимают, что на самом деле такое XML. Вкратце, XML является разновидностью SGML, модифицированной для Web; таким образом, он позволяет разработчикам задавать их собственный язык разметки. Значит, с помощью XML можно изобрести YML (Your Markup Language, Ваш язык разметки).

     До  сих пор отрицательное воздействие  изобретения слишком большого количества индивидуальных языков на базе XML было ограничено, и большинство web-разработчиков согласны пользоваться широко общепринятыми языками вроде XHTML.

     Таким образом, все еще актуально для  разметки web-страниц пользоваться языком HTML.

Глава 2. Практическая часть

2.1. Разработка интерфейса 

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

     Веб-интерфейсы удобны тем, что дают возможность  вести совместную работу сотрудникам, не находящимся в одном офисе (например, веб-интерфейсы часто используются для заполнения различных баз  данных или публикации материалов в  интернет – СМИ).

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

     Интерфейс пользователя - элементы и компоненты программы, которые способны оказывать  влияние на взаимодействие пользователя с программным обеспечением. В  том числе:

     - средства отображения информации, отображаемая информация, форматы  и коды;

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

     - устройства и технологии ввода  данных;

     - диалоги, взаимодействие и транзакции  между пользователем и компьютером;

     - обратная связь с пользователем;

     - поддержка принятия решений в  конкретной предметной области;

     - порядок использования программы  и документация на нее.

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

     1. Чем проще, тем лучше. Это  вовсе не значит, что должен  быть только текст и контактная  информация, но на сайте не  должно быть бесполезной информации, шрифт должен легко читаться. Графические элементы должны  быть были чёткими, выразительными и быстро загружаться. На сайте магазина недопустимо использовать анимацию и звук, которые долго загружаются и отвлекают внимание покупателя.

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

     Чем проще выполнена верхняя часть  страницы, тем легче запомнить  название сайта и саму фирму.

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

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

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

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

     5. Для наглядности необходимо предусмотреть  специальные разделы, содержащие  товары, сгруппированные по маркетинговым  признакам. Допустим:

     - «Новинки» (товары, недавно поступившие  в продажу);

     - «Специальные предложения» (товары, на которые по каким-либо причинам  снижены цены);

     - «Товары дня» (самые модные товары);

     - «Лидеры продаж» (наиболее покупаемые  товары).

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

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

     8. В электронном магазине могут  быть и информационные разделы:

     - с данными о магазине (сфера  деятельности, адрес, контактные  телефоны и т.д.);

     - с информацией по доставке  товара;

     - с информацией по скидкам;

     - новости магазина;

     - статьи (системы управления новостями и статьями предоставляют возможность использовать интернет-магазин как настоящий информационный портал);

     - прочая полезная информация.

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

     10. Раздел «Вопросы и ответы»  (FAQ), где покупатель может задать  свой вопрос, а администратор  магазина – ответить на него. Это способствует повышению качества  обслуживания, удержанию старых  клиентов и привлечению новых.

     11. «Отзывы и вопросы» к товарам.  Покупателю следует предоставить  возможность просмотреть отзывы  о товаре, оставить свой отзыв  или задать вопрос – это  способствует повышению качества  описаний товаров.

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

     13. Обратной, невидимой покупателю, стороной  интернет-магазина является система  управления. Вход в систему администрирования  осуществляется только после  ввод администратором логина  и пароля (логин и пароль администратор  может менять). Администратор имеет  возможность полностью управлять  содержимым интернет-магазина:

     - добавлять или удалять товары, описания и фотографии к ним,  изменять их стоимость, условия  доставки товаров и уровень  скидок;

     - редактировать разделы магазина (новости, статьи, вопросы и ответы, отзывы и вопросы к товарам  и пр.);

     - редактировать специальные разделы  магазина (новинки, специальные предложения,  товары дня, лидеры продаж);

     - редактировать контактную информацию  интернет-магазина;

     - редактировать содержание заголовков  и текстов писем, отправляемых  покупателю при регистрации и  покупке товара;

     - составлять и рассылать письма  с новостями магазина подписчикам;

     - просматривать историю заказов  и статистику покупателей;

     - изменять курс валюты на витрине  магазина.

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

     14. Загрузка товарных предложений  должна осуществляться из файла  Microsoft Excel. Файл, в котором описаны  все группы, подгруппы каталога, а также информация о товарах,  создается на локальном компьютере (ограничений к количеству групп,  категорий и самих товаров  быть не должно). Затем файл  загружается в интернет-магазин.  После загрузки прайс-листа товары  автоматически появляются на  витрине. Таким образом, можно  оперативно изменять данные о  ценах и наличии товаров.