Разработка Web – сайтов

Содержание:

ВВЕДЕНИЕ

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

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

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

Создание Web – сайтов является одной из важнейших технологий разработки ресурсов «Internet». Хороший сайт, вбирая в себя всю полезную информацию, является лучшей визитной карточкой и коммерческой фирмы, и образовательного учреждения, работая на них в любое время суток.

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

• сайт приводит к повышенной утомляемости или отталкивает от длительного просмотра, так как перенасыщен элементами;
• увлечение анимацией, графическими изображениями и видео фрагментами, которые не несут смысловой нагрузки, автоматически влечет за собой уменьшение количества потенциальных посетителей web – сайта, так как повышает требования к пропускной способности Интернет – соединения и объем трафика;
• избыточность или недостаток представленной информации;

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

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

Предмет исследования – web – технологии.

Объект – разработка web – сайта.

Цель работы – рассмотреть возможности практического использования языков и средств для разработки web – сайтов.

ГЛАВА 1. ОСНОВЫ РАЗРАБОТКИ WEB – САЙТОВ

Понятие и классификация web – технологий

Развитие современной компьютерной техники и внедрение новейших технологий положили начало нового направления жизни на Земле. За короткий промежуток времени развития микроэлектроники и кибернетики произошло много изменений.

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

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

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

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

Информация, доступная пользователям Internet, располагается на компьютерах (Web – серверах), на которых установлено специальное программное обеспечение. Значительная часть этой информации организована в виде Web – сайтов. Каждый из них имеет свое имя (адрес) в Internet. Web – сайт – это информация, представленная в определенном виде, которая располагается на Web – сервере и имеет свое имя. Для просмотра Web – сайтов на компьютере пользователя используются специальные программы, которые называются браузерами. Наиболее распространенными браузерами в настоящее время являются «Яндекс» и «Google Chrome». В зависимости от того, какое имя сайта мы зададим в строке "Адрес", браузер будет загружать в свое окно соответствующую информацию.

Web – сайт состоит из связанных между собой Web – страниц. Web – страница представляет собой текстовый файл с расширением *.htm, который содержит текстовую информацию и специальные команды – HTML – коды, определяющие в каком виде эта информация будет отображаться в окне браузера. Вся графическая, аудио и видео информация непосредственно в Web – страницу не входит и представляет собой отдельные файлы.

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

В настоящее время с точки зрения назначения различают три основных типа порталов:

• Публичные, или горизонтальные, порталы (называемые иногда мегапорталами), такие как Yahoo, DDG, Google, Rambler. Такие порталы нередко являются результатом развития поисковых систем. Предназначены они для самой широкой аудитории, что отражается на содержании предоставляемой ими информации и услуг. Как правило, эта информация носит общий характер, равно как и предоставляемые услуги (электронная почта, новостные рассылки и так далее).
• Вертикальные порталы. Этот вид порталов предназначен для специфических видов рынка и обслуживает аудиторию, пользующуюся услугами этого рынка или работающую на нем. Примерами таких порталов могут служить, например, туристические агентства, предоставляющие услуги по бронированию мест в гостиницах, заказу и доставке билетов, доступу к картам и сведениям об автомобильных маршрутах, либо порталы типа B2B (business – to – business), позволяющие своим клиентам реализовывать совместные бизнес – операции (например, выбирать поставщиков и осуществлять закупку товаров, проводить аукционы).
• Корпоративные порталы предназначены для сотрудников, клиентов и партнеров одного предприятия. Пользователи такого портала получают доступ к предназначенным им сервисам в зависимости от их роли и персонального профиля.

Другие наиболее распространённые web – сайты:

• Региональные интернет – порталы, универсальные по своему направлению, но ограниченные географией заинтересованных посетителей (e1.ru);
• Поисковые системы – это интернет – порталы, которые предназначены для того, чтобы предоставить их посетителю возможность найти сайты, на которых встречаются заданные слова или целые фразы (metabot.ru);
• Каталог – это коллекция ссылок на сайты (mail.ru);
• Электронные доски объявлений – являются местом, где практически любой желающий может оставить информацию ознакомительного, пригласительного или рекламного характера;
• Форумы – это специальные сайты или разделы на сайтах, предназначенные для того, чтобы посетители, оставляя свои сообщения, обменивались мнениями;
• Чаты – являются еще одним местом для общения в интернете, только его назначение не обмен мнениями на какую – то тему, а просто времяпрепровождение;
• Файлы для скачивания;
• Фотогалереи;
• Элементы статистики;
• Хранение в интернете различной информации;
• Серверы почтовых рассылок, они предлагают услуги по доставке информации широкому кругу читателей (subscribe.ru);
• Интернет – магазины и аукционы (ozon.ru, molotok.ru).

Требования к web – сайтам

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

Вторым этапом будет построение информационной архитектуры сайта.

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

Карта сайта

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

Главная страница

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

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

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

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

"О нас"

В разделе "О нас" необходимо представить основные сведения о компании:

• состав верхнего управляющего звена (с библиографическим списком и фотографиями);
• контактная информация;
• философия организации (видение бизнеса, связи с обществом, стремления);
• основные исторические вехи;

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

Реклама

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

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

В рекламе пользователей больше всего раздражает:

• реклама во всплывающих окнах;
• её медленная загрузка;
• отсутствие кнопки "Закрыть";
• уловки заставляющие кликнуть;
• реклама закрывает читаемый материал;
• мигающая реклама;
• двигающаяся реклама;
• реклама произвольно начинающая играть музыку или проигрывать видео.

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

Если хочется разместить, рекламу она должна соответствовать следующим правилам:

• четко указывать, что произойдёт по щелчку по ней;
• четко идентифицировать себя как реклама;
• описывать, что именно рекламируется;
• даёт дополнительную информацию о себе без надобности покидать текущую страницу.

Ссылки

Ссылки должны быть предсказуемы, пользователь должен знать, что произойдёт, если он нажмет на ссылку. Ясно указывать, что является ссылкой: если это текст пусть он будет цветным или подчёркнутым. Не скрывать различия между посещёнными и не посещёнными ссылками. Создавать ссылки с расчётом того, что поисковые системы являются самыми важными посетителями, а они глухи и слепы по отношению к высоким технологиям. Оформить теги "title" так, чтобы они хорошо смотрелись в поисковых системах и закладках, поэтому начинать ссылки необходимо с ключевого слова.

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

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

Привязанность

Классический путь увеличения привязанности к сайту – это публикация свежих материалов с определённой регулярностью (от ежедневных до ежемесячных). Для желающих необходимо организовать рассылки свежего материала. Почти 100% из тех, кто подписался, будут периодически заходить и на сам сайт, пока автор будет напоминать им о себе.

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

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

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

Все предугадать невозможно, но на начальном этапе можно придерживаться следующих правил:

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

– если сайт предназначен для потребителей – например, сайт, который предлагает обучающие игрушки для детей, – внимание обращается на скорость загрузки и внешний вид сайта для AOL – браузеров;

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

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

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

Языки программирования

Язык разметки гипертекста (Hypertext Markup Language), или, как его чаще называют, HTML, – это компьютерный язык, лежащий в основе World Wide Web (Всемирной Паутины). Благодаря языку HTML любой текст можно разметить, преобразовав его в гипертекст с последующей публикацией в Web.

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

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

Второй тип – PHP. В первую очередь PHP используется для создания скриптов, работающих на стороне сервера, для этого его, собственно, и придумали. PHP способен решать те же задачи, что и любые другие CGI – скрипты, в том числе обрабатывать данные html – форм, динамически генерировать html страницы и тому подобное. Но есть и другие области, где может использоваться PHP.

Вторая область – это создание скриптов, выполняющихся в командной строке. То есть с помощью PHP можно создавать такие скрипты, которые будут исполняться, вне зависимости от web – сервера и браузера, на конкретной машине.

И последняя область – это создание GUI – приложений (графических интерфейсов), выполняющихся на стороне клиента.

Третий тип – Ajax. Расшифровывается как Asynchronous Javascript And XML (Асинхронные Javascript и XML) и технологией в строгом смысле слова не является. Если в стандартном web – приложении обработкой всей информации занимается сервер, тогда как браузер отвечает только за взаимодействие с пользователем, передачу запросов и вывод поступившего HTML, то в Ajax – приложении между пользователем и сервером появляется еще один посредник – движок Ajax. Он определяет, какие запросы можно обработать "на месте", а за какими необходимо обращаться на сервер.

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

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

Где стоит использовать Ajax:

• Формы. Они очень медленны. Если асинхронно передавать данные, страница не перезагружается.
• Навигация в виде "дерева". Вообще, такая навигация – ужас. Простая топология намного удобнее, но если уж до этого дошло, лучше использовать Ajax.
• Голосования. Пользователю будет приятней оставить свой голос за несколько секунд, чем за 30 – 40.
• Фильтры. Часто на сайтах делают сортировку по дате, по имени. Ajax это будет значительно удобнее.

Четвёртый язык программирования – JavaScript, разработан фирмой Netscape для создания интерактивных HTML – документов. Это объектно – ориентированный язык разработки встраиваемых приложений, выполняющихся как на стороне клиента, так и на стороне сервера. Синтаксис языка очень похож на синтаксис Java – поэтому его называют – Java – подобным.

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

• динамическое создание документа с помощью сценария;
• оперативная проверка достоверности заполняемых пользователем полей форм HTML до передачи их на сервер;
• создание динамических HTML – страниц совместно с каскадными таблицами стилей и объектной моделью документа;
• взаимодействие с пользователем при решении "локальных" задач, решаемых приложением JavaScript, встроенном в HTML – страницу.

Пятый язык создания сценариев – VBScript разработан фирмой Microsoft, является подмножеством достаточно распространенного в среде программистов языка Visual Basic разработки прикладных программ Windows – приложений. Как и его родитель, язык VBScript достаточно прост и лёгок в изучении.

Преимуществом его применения для создания сценариев является возможность использования, с небольшими корректировками, ранее написанных процедур на языках Visual Basic и Visual Basic for Application.

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

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

Для создания сценариев клиента используется набор объектов, аналогичный набору JavaScript. Объекты клиента и сервера отличаются друг от друга, но существует общая часть (ядро) объектов, используемых при разработке как сценариев клиент, так и сценариев сервера.

Шестой – Perl. Наиболее широко Perl используется для разработки инструментов системного администрирования, однако в последнее время он получил огромную популярность в области разработки Интернет – приложений: CGI – сценариев, систем автоматической обработки электронной почты и поддержки узлов Web.

Вот некоторые примеры задач, которые можно решать с помощью Perl:

• проверка пользователей Windows NT на несоответствие их статуса и возможностей;
• управление NT – сервисами из командной строки и дистанционно с локальной машины получение статистических данных на отдельной машине;
• может работать и с протоколом FTP;
• системная поддержка UNIX и Windows.

ГЛАВА 2. ПРИНЦИПЫ СОЗДАНИЯ САЙТА

Структура сайта

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

В тезисах структуру сайта можно охарактеризовать так:

• Где я нахожусь сейчас (страница входа);
• куда я могу попасть (переход);
• взаимосвязь между категориями.
• Формируя структуру, стоит разобраться в желаниях потенциальных посетителей, что они будут искать, и какая информация их интересует.

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

Вот пример простейшей структуры сайта небольшого интернет – магазина (см. рис. 1):

Рисунок 1. Структура сайта небольшого интернет – магазина

Какие существуют требования к структуре сайта.

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

Поисковые системы анализируют структуру сайта по – своему, они берут во внимание структуру URL сайта. В общем структура сайта и структура URL это одно и тоже, но в разговоре проще не использовать аббревиатуру URL.

Требования к структуре сайта от «Яндекс»

В поддержке Яндекса существует отдельная страница, посвященная описанию требований к структуре. Можно посетить ее и прочитать обо всем более детально, тут я объясню все вкратце и о более важном:

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

Каждая страница должна иметь уникальный и единственный URL – адрес. Имеется ввиду, что на разные страницы сайта должны вести разные URL, и наоборот одна и та же страница должна быть доступна только по одному адресу.

Делать ссылки на другие разделы (страницы) сайта текстовыми, Яндексу так проще анализировать контент.

Требования к структуре сайта от «Google»

Google в отличие от Яндекса вместил рекомендации в один абзац, и они довольно просты и понятны:

• Структура сайта должна быть простой;
• url должно иметь логическую структуру, понятную для человека;
• используйте слова, а не идентификаторы;
• используйте знаки пунктуации в url (рекомендуется дефис “ – “);
• не используйте слишком длинные и сложные url.
• Более подробно можно узнать по ссылке выше, там есть и примеры с возможными проблемами и методами их решения.

Структура сайта бывает:

• Простая (двухуровневая), главная страница и много внутренних страниц 2 – го уровня (home.ru/stranica1 и home.ru/stranica2 и т.д.) (см. рис. 2)
• Сложная (древовидная, три и больше уровней вложенности home.ru/category/stranica1 и home.ru/blog/statya и т.д.) (см. рис. 3)

Рисунок 2. Структура простая

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

Если кроме главной вы планируете создавать 20 – 30 или же 100 страниц, обязательно создайте структуру, разбейте страницы и будущие страницы на группы, это будет правильно и в дальнейшем позитивно скажется на продвижении вашего сайта.

Древовидная структура сайта самая распространенная и правильная, она используется на большинстве крупных сайтов, интернет – магазинах и порталах. Внешний вид имеет такой:

Рисунок 3. Структура древовидная

На примере схемы показаны все виды структуры, в совокупности это и есть древовидная структура сайта.

Важные элементы при создании сайта

Каждый сайт по – своему уникален. Тем не менее, есть общие для всех элементы, которые должны присутствовать на каждом ресурсе. Особенно это актуально для коммерческих проектов, где конверсия посетителей в покупателей является вопросом выживания.

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

1. Страница «О нас»

Если отбросить интернет – магазины, то на любом другом сайте страница «О нас» входит в список самых посещаемых. Это ваш шанс рассказать о своем бизнесе с личностной стороны, сделав первый шаг к построению доверительных отношений с клиентами.

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

Рисунок 4. «О нас»

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

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

2. Примеры работ

Для некоторых ниш это очень хорошо работает. К примеру, услуги по дизайну, строительству и архитектуре, сайты салонов красоты и парикмахерских, компаний, которые занимаются ремонтом и других подобных. В нише SEO и онлайн – маркетинга к этому пункту можно отнести кейсы по работе с различными проектами.

Хорошо работает сравнение в стиле «До и после», которое позволяет сравнить изменения (см. рис. 5):

Рисунок 5. Пример работы

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

3. Отзывы клиентов

Чем вы можете доказать, что ваша услуга и продукт действительно заслуживают внимания? Лучший способ сделать это – опубликовать на сайте отзывы довольных клиентов, которые рассказывают, как ваша компания помогла им.

Имейте в виду, что добавление фотографий и другой персонифицированной информации (фамилия, должность и компания) к отзывам, повышает уровень доверия к ним. А отзывы в видеоформате можно и вовсе назвать высшим пилотажем. (см. рис. 6,7)

Рисунок 6. Отзыв

Рисунок 7. Видео – отзыв

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

4. Хорошая страница контактов

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

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

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

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

Рисунок 8. Страница контактов

Хорошая страница контактов должна быть информативной и максимально упрощать возможность связи с вами для потенциального клиента. Ведь невозможно заранее предугадать какой именно канал связи будет удобнее для конкретного человека.

5. Часто задаваемые вопросы (FAQs)

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

Рисунок 9. Задаваемые вопросы

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

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

6. Подробности о сотрудничестве

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

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

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

Часто практикуется вывод данной информации прямо на странице товара в виде информационных блоков. Например, вот так (см. рис. 10):

Рисунок 10. Подробности о сотрудничестве

7. Призывы к действию (CTA)

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

Вот наглядный пример, взятый с сайта всем известной компании (см. рис. 11):

Рисунок 11. Призыв к действию

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

Простая кнопка «Перезвонить мне» для заказа обратного звонка, расположенная в шапке сайта, уже способна положительно повлиять на конверсию. Хоть и не очень креативно, но уже лучше, чем ничего.

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

8. Качественные фото

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

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

Рисунок 12. Пример того, как НЕ нужно делать

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

9. Подробное описание продукта

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

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

Рисунок 13. Подробное описание продукта

Не вводите их в замешательство и не давайте им уходить. Сделайте подробное описание того, что вы делаете и как вы это делаете. А главное – исходите от того, какую пользу это обеспечивает вашему потенциальному клиенту.

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

Аналитика. Оценка поведения пользователей и посещаемость сайта

Видео – посещения

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

Рисунок 14. Видео – посещения

Посмотрев видео посещений, вы поймёте, с чем у пользователей возникают трудности. Улучшите сайт, чтобы на нём было приятнее находиться.

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

Карта ссылок

Карта ссылок – инструмент, который показывает статистику переходов по ссылкам. (см. рис. 15)

Рисунок 15. Карта ссылок

На карте ссылок разными цветами отмечены ссылки, куда кликают пользователи. Чем теплее цвет, тем больше кликов.

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

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

Карта кликов

Карта кликов – инструмент, который показывает статистику по кликам на сайте. (см. рис. 16)

Рисунок 16. Карта кликов

Цветовыми зонами обозначены места, куда кликают пользователи. Чем шире зона и теплее цвет внутри, тем больше кликов она собирает.

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

Карта скроллинга

Карта скроллинга – инструмент, который показывает, как распределяется внимание посетителей сайта на определённых областях страницы. (см. рис. 17)

Рисунок 17. Карта скроллинга

Наиболее просматриваемые части страницы обозначены красным, наименее просматриваемые – зелёным.

Большинство пользователей изучает самый верх страницы. Чем ниже раздел, тем меньше людей его увидит – люди неохотно спускаются вниз, а до «подвала» сайта доходит лишь мизерная часть.

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

Анализ запросов в поисковом поле сайта

Анализ запросов в поисковом поле сайта – сбор статистики по запросам пользователей. (см. рис. 18)

Рисунок 18. Анализ запросов в поисковом поле сайта

Проанализируйте запросы пользователей. Упростите доступ к самым часто запрашиваемым разделам. Если вы продаёте кроссовки, и половина пользователей вбивает в поиск «кроссовки Nike», добавьте специальный раздел «Nike». Вы сэкономите время клиентов и порадуете любителей обуви с галочкой.

Анализ сред для создания сайтов

В настоящее время, во всемирной паутине размещено несколько миллионов Web – сайтов и их число постоянно растет. У каждого есть возможность не только просмотреть любой из них и извлечь полезную для себя информацию, но и принять активное участие в их создании. Большое значение при этом имеет среда, в которой будет происходить разработка.

Macromedia Dreamweaver

Компания Macromedia продолжает делать Dreamweaver интуитивно понятной и простой в использовании программой. Мощные средства с одной стороны и простота в использовании – с другой, делают продукты Macromedia идеальными программным пакетом, как для профессиональных web – дизайнеров, так и для новичков. Продукты, входящие в пакет Macromedia, такие как: Flash, Firework, Dreamweaver – сделают работу более продуктивной, и при этом могут заменять друг друга (так, например, в любой из них можно создать кнопки). Такие продукты как: Sitespring, FreeHand – добавит эффективности при работе с клиентом.

У Dreamweaver множество плюсов:

Программа Dreamweaver поддерживает "чистый" HTML код, а также последние расширения DHTML и CSS.

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

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

Применяется "Динамическая проверка для различных браузеров".

Поддерживает расширения, как сторонних разработчиков, так и самой Macromedia.

С Dreamweaver поставляется библиотека элементов, которые можно применять на WEB – страницах, например панель навигации, дескриптор авторского права и др.

Применяется для добавления мультимедийных средств на web – страницы и различных типов файлов от Flash и Java до RealAudio, интерактивных элементов, таких как поисковые системы, форумы, системы электронной коммерции.

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

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

Macromedia Fireworks

Fireworks – это редактор графики с возможностью её дальнейшей оптимизации и размещения в сети. Используя большое разнообразие инструментальных средств, можно создавать и редактировать как векторную, так и растровую графику в пределах одного файла вместо того, чтобы переходить из одной программы в другую. Fireworks генерирует HTML – код и JavaScript и может легко создавать динамические меню и навигационные панели для наших интернет – страниц. Эффективная оптимизация графических файлов позволяет максимально уменьшить их размер без потери качества.

Кроме этого, имеется возможность редактировать макеты WEB – страниц. Например, в Fireworks 8 можно открыть графический файл на всю ширину будущего сайта, нарисовать необходимое графическое оформление, а затем разрезать его инструментом Slice Tool так, как должна выглядеть будущая таблица HTML – документа. После этого можно начинать доработку отдельных графических элементов и, в том числе, создавать активную графику, реагирующую на курсор, совсем не зная языка программирования (JavaScript).

Macromedia FreeHand

Один из трех профессиональных графических редакторов, ведущих с переменным успехом борьбу за первенство в работе с векторной графикой. FreeHand гораздо быстрее и проще своих конкурентов – CorelDraw и Adobe Illustrator. FreeHand прекрасно подходит для создания логотипов, рекламы, Web – графики и анимации.

Разработчики программы приложили немало усилий, чтобы максимально облегчить жизнь пользователям: интерфейс программы прост и нагляден, имеется множество "примочек", позволяющих быстро и легко выполнять сложные преобразования объектов или достичь самых разных художественных эффектов. FreeHand умеет экспортировать и импортировать файлы практически во всех широко распространенных форматах. Более того, в его состав входят настройки "горячих клавиш", эмулирующие другие распространенные программы (Adobe Illustrator, CorelDraw). Так что не надо переучиваться, переходя на FreeHand.

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

Документы FreeHand легко превращаются в web – страницы. Конечно, FreeHand – не HTML – редактор, но поддерживает базовые элементы HTML. С помощью FreeHand WEB – страницы легко снабдить Flash – анимацией. В анимационный клип вставляются текстовые блоки, группы объектов, а также объекты с контурами. Небольшой клип из объектов FreeHand создается буквально одной командой – остается лишь проследить за некоторыми настройками. Каждый кадр клипа помещается на отдельный слой; анимационный эффект достигается последовательным воспроизведением содержимого отдельных слоев. Но средства FreeHand не заменят редактор Macromedia Flash.

Macromedia FLASH

Создаёт привлекательные интерактивные мультимедийные презентации, для WEB – сайтов. Для Flash характерна векторная графика и анимация, хотя эта программа может быть также использована для манипулирования или отображения растровой графики, монтажа видеоматериала и даже для манипулирования звуковыми файлами.

Flаsh – содержимое публикуется в компактных файлах формата SWF для последующего показа на самых разных платформах с помощью Flаsh – проигрывателя. Во время воспроизведения файла формата SWF в оперативном режиме в него можно динамически загружать такое содержимое, как звуковые файлы формата МР3, Flash – видео и изображения формата JPEG. Flash – проигрыватель позволяет подключаться к источникам данных, чтобы объединить их с базой данных, XML или web – службами. Благодаря всем этим возможностям привлекательные фрагменты анимации и эффекты могут быть введены в приложения, управляемые данными. Flash имеет поддержку антиалайсинг (сглаживание контуров с помощью смешения соседних цветов). Так как этот формат файла основан на векторной графике, объект сохраняет качество изображения при любом разрешении и идеален для создания кадров анимации.

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

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

Macromedia HomeSite

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

Гибкость интерфейса — это одна из сильнейших сторон продукта. Любой пользователь с легкостью сможет настроить интерфейс HomeSite в соответствии со своими предпочтениями и потребностями.

В процессе работы пользователь может видеть рабочую область с двумя вкладками – Browse и Edit. То есть программирование происходит во вкладке Edit, а результат можно увидеть, если выбрать вкладку Browse. При создании новой страницы на поле редактирования автоматически появляются некоторые теги вроде HTML и BODY. Это шаблон, загружаемый при создании новой страницы. Его содержание можно менять.

В HomeSite очень легко строить архитектуру сайта. Этому способствует панель Quick Bar с системой вкладок с готовыми тегами. Теги в этих вкладках самые разные – от простых вроде параграфа до java – скриптов. Можно вообще оставить одну вкладку, добавив в нее все необходимые теги через меню Customize. Также можно самому создавать теги или их комбинации. При нажатии на кнопку с определенным тегом появляется окно, где можно настроить опции тега и указать его атрибуты. Поддерживает режим WYSIWYG со всеми его плюсами и минусами.

Для скорости работы здесь имеется множество средств редактирования тегов. Это, например, такие функции, как Tag Completion, Tag Editors и Tag Insight. Они существенно облегчают редактирование тегов и их атрибутов. Так же есть заготовки кода (Code Snippets).

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

Microsoft FrontPage

Является наиболее популярным HTML – редактором на рынке, главным образом за счёт популярности пакета Microsoft Office. В программе предлагаются мощные функции и привлекательный пакет программ, включая Image Composer, который предназначен для создания изображений (Приложение В). Во FrontPage также содержатся WEB – компоненты, необходимые для добавления интерактивных свойств web – узлу. Microsoft FrontPage является классическим WYSIWYG – редактором, в котором, однако, присутствует возможность ручной правки кода.

В программе имеется три режима работы с документом: Normal, HTML и Preview.

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

В режиме HTML осуществляется подсветка синтаксиса, однако довольно посредственную – дескрипторы выделены, синим цветом, все остальное – черного цвета.

В режиме Preview можно посмотреть, как будет выглядеть ваша страница в окне браузера.

FrontPage имеет конструктор таблиц, существенно облегчающий их создание. Одним из основных преимуществ программы является большое количество имеющихся шаблонов, позволяющих пользователю не ломать голову над дизайном своего проекта. Выбрав необходимый шаблон, можем приступать непосредственно к наполнению страницы контентом. Вот тут то и ощущается вся прелесть FrontPage: процесс создания HTML – страницы ничем не отличается от создания обычного текстового документа в Microsoft Word. Доступны те же средства для редактирования текста, смены его форматирования, создания и редактирования таблиц, вставки различных объектов и изображений и всё это без знания HTML. FrontPage делит рабочую область на несколько блоков, содержащих определенные элементы страницы – рисунки, текст, заголовки и проч. Для каждого блока можно назначить свои параметры форматирования и расположения его относительно страницы.

Минусы: небольшой набор инструментов разработки, невозможность отдельного приобретения программы. Microsoft FrontPage неплохо подойдет в качестве HTML – редактора на первое время, однако с ростом потребностей его возможностей может не хватить. Есть и обратная сторона медали – сложность и громоздкость полученного кода, что естественно, сказывается на конечном размере документа. Также в дальнейшем будет весьма сложно вносить изменения в подобный документ. Но это скорее недостаток не конкретного продукта, а практически всех WYSIWYG – редакторов (What You See Is What You Get – "что видите, то и получите").

Web – компоненты работают только в том случае, если на web – сервере, который используется, присутствуют соответствующие им программы.

Microsoft Word

Несмотря на то, что Microsoft Word является текстовым редактором и по существу не считается HTML – редактором. Он имеет возможность сохранять файлы в формате HTML. В результате можно столкнуться со страницами, которые тем или иным способом были созданы в Microsoft Word. Проблемы в HTML – коде, полученном из редактора аналогичны проблемам FrontPage: обе эти программы создают избыточный код, который не во всём соответствует HTML – стандарта. Огромное количество людей, использующих Word в своей повседневной работе, становятся потенциальными разработчиками HTML – документов.

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

Adobe Illustrator

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

Web – страницы могут содержать много элементов – текст HTML, растровые изображения, векторную графику. В Illustrator можно использовать фрагменты для определения границ различных web – элементов в объекте. Web – страница делится на ячейки, которые представляются в трёх типах: изображения, без изображения, HTML – текст.

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

Карты ссылок позволяют связать одну или несколько областей изображения (так называемых активных областей) с URL – адресом. Когда щелкаем по активной области, web – браузер загружает связанный с ней файл.

Основная разница между использованием карт ссылок и фрагментов для создания связей состоит в том, как объект экспортируется на web – страницу. Использование карт ссылок сохраняет объект в виде единого файла изображения, а в случае использования фрагментов объект делится на несколько отдельных файлов. Еще одна разница между картами ссылок и фрагментами состоит в том, что карты позволяют связывать многоугольные или прямоугольные области в объекте, а фрагменты – только прямоугольные

Adobe Photoshop

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

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

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

CorelDraw

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

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

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

CorelDraw демонстрирует качества мощного визуального редактора web – страниц: пользователь получает возможность генерировать развитые HTML – документы, которые могут включать сценарии JavaScript и таблицы стилей CSS.

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

При размещении изображений на странице одна из наиболее важных задач – оптимизация размера файлов изображений. Рекомендуемый "потолок" общего размера страницы – от 100 до 150 кбайт. Уменьшение размера файлов изображений выполняется сжатием файлов и уменьшением количества цветов. Эти задачи доступны для любой из графических программ, перечисленных выше.

ЗАКЛЮЧЕНИЕ

С появлением web – технологии компьютер начинают использовать совершенно новые слои населения Земли. Можно выделить две наиболее характерные группы, находящиеся на разных социальных полюсах, которые были стремительно вовлечены в новую технологию, возможно, даже помимо их собственного желания. С одной стороны, это были представители элитарных групп общества – руководители крупных организаций, президенты банков, топ – менеджеры, влиятельные государственные чиновники. С другой стороны, это были представители широчайших слоев населения – домохозяйки, пенсионеры, дети.

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

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

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

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

Создание и разработка сайтов включает:

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

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

ЛИТЕРАТУРА

1.Борисенко А.А. Web – дизайн. Просто как дважды два. – М.: Эксмо, 2010. – 320 с.

2. Джамса Крис. Эффективный самоучитель по креативному Web – дизайну. HTML, XHTML, CSS,JavaScript, PHP, ASP, ActiveX. Текст, графика, звук и анимация. Пер с англ./Крис Джамса, Конрад Кинг, Энди Андерсон – М.: ООО "ДиаСофтЮП", 2005. – 672 с.

3. Зольников Д.С. PHP5. Как самостоятельно создать сайт любой сложности. – 2е изд. стер. – М.: НТ Пресс, 2007. – 272с.

4. Инькова Н. А., Зайцева Е. А., Кузьмина Н. В., Толстых С. Г. Создание Web – сайтов: Учебно-методическое пособие, 2013. – 56 с.

5. Орлов Л. В. Web – сайт без секретов. / Л. В. Орлов. – 2-е изд. – М.: Бук-пресс, 2012. – 512 с.

6. Создание Web – страниц и Web – сайтов. Самоучитель : [учеб. пособие] / под ред. В. Н. Печникова. – М.: Изд-во Триумф, 2011.— 464 с.

7. Якушев, Л. В. Начинаем работать в Интернет. Краткое руководство. – М.: Издательский дом "Вильяме", 2009. —128 с