Сайт-визитка. Понятие, предназначение сайта-визитки, его характеристика
Простейшей версией сайта является сайт-визитка. Сайт предоставляет собой набор HTML-страниц, без средств интерактивного взаимодействия с пользователем (веб-приложений). Сайт полностью соответствует дизайну компании. Данный вариант наиболее привлекателен для компаний, основной род деятельности которых не связан с сетью Интернет. Компании, используют сайт, прежде всего лишь для предоставления рекламной информации для потенциального клиента.
Две основные функции, которые выполняет сайт визитка - коммуникация и интерактивность.
Коммуникацией является использование сайта визитки для получения какой-либо информации. Содержание некоторых сайтов визиток статично и предназначено для того, чтобы пользователь принял его к сведению. Например, целью страницы с описанием изделия, на которой размещены текст с информацией об изделии и его фотография, служит сообщение информации об изделии. В результате успешного знакомства с такой страницей пользователь пополняет свои знания об изделии – он получает сведения о том, что это такое и как это выглядит.
Цель описания состоит в том, чтобы рассказать людям об изделии. Так как описание выполняется в виде текста, необходимо, чтобы пользователь мог воспринять его. Должно быть ясно, что на странице находится текст. Для пользователей с нормальным зрением важно, чтобы текст на сайте визитке был читаем, для пользователей с ограничениями по зрению - чтобы текст легко распознавался, и его можно было качественно воспроизвести с помощью специальных программ.
Цель фотографии – показать людям, как выглядит изделие. Для выполнения этой функции фотография должна быть различимой - люди должны знать о том, что на странице помещена фотография, и что это фотография изделия. Тем не менее, назначение изображения - передавать его визуальные характеристики. Для этого изображение должно быть понятным. Пользователям с нормальным зрением необходимы условия для качественного восприятия изображения, чтобы увидеть его визуальные характеристики. Пользователи с ограничениями по зрению лишены возможности увидеть изображение, и им требуется описание визуальных качеств в текстовом формате.
Основная функция содержания – передать его пользователю, поэтому на первый план выходит свойство доступности. Для реализации процесса коммуникации необходимо, чтобы пользователь располагал всеми элементами и имел доступ к ним.
К основным страницам сайта-визитки относятся:
- главная;
- о компании;
- продукция;
- контакты.
Главная – содержит краткую и самую главную информацию о Вашей компании.
О компании – содержит информацию о достижениях компании, практику работы с клиентами и получаемые ими выгоды от общения именно с Вами.
Продукция – содержит краткую информацию о товаре, с возможностью размещения фотографий.
Контакты – обычно основная контактная информация повторяется на каждой странице. На данной странице содержится полная информация о Вашей компании.
Требования к сайтам
Сегодня каждый сайт индивидуален, креативен и отличается своим содержимым, но при этом все сайты, находящиеся в сети, отвечают ряду требований.
Ниже приведены шаги создания сайта, отвечающие стандартным требованиям при разработке.
Шаг 1. Определить цели и задачи сайта. Составить список ключевых запросов для продвижения и всесторонне его оценить. Без списка запросов невозможно сделать «правильный» сайт для дальнейшего продвижения в поисковиках.
Шаг 2. Составить индивидуальную структуру навигации сайта, а именно разделы, категории, страницы, с таким расчетом, чтобы правильно распределить поисковые запросы по страницам. Неправильная структура и как следствие неправильное распределение запросов по страницам сильно ограничивает возможности продвижения.
Шаг 3. Подобрать домен наиболее подходящий для продвижения. Домен должен быть оформлен на имя заказчика по прямому договору с регистратором. В любом другом случае — исполнитель «страхуется» и создателя ждут проблемы в будущем.
Шаг 4. Дать рекомендации по наполнению сайта. Наполнить несколько страниц материалами, предоставленными заказчиком, предварительно проверив их на уникальность.
Размещая не уникальные материалы, создателя ждут трудности в дальнейшем продвижении сайта.
Шаг 5. Создать индивидуальный дизайн по требованиям заказчика и с учетом требований поисковиков. Шаблонный дизайн, выпадающие блоки, скрытый текст или прокрутка — все это отрицательно сказывается на перспективах продвижения.
Шаг 6. Кросс-браузерная верстка сайта. Сайт должен быть одинаково читабельным во всех популярных браузерах: Internet Explorer8, Internet Explorer9, Opera, Firefox3, Chrome. Сайт должен корректно отображаться в любом браузере и при любом разрешении.
Шаг 7. Все пункты меню должны меняться из административной панели сайта. Все тексты и изображения на сайте должны меняться средствами административного интерфейса.
Все описания, заголовки и Титлы должны так же меняться из административного интерфейса. Все решения должны быть базовыми без дополнительного программирования и изменения CMS (информационная система или компьютерная программа для обеспечения и организации совместного процесса создания, редактирования и управления контентом).
Шаг 8. Внешний вид сайта должен полностью управляться через шаблон в CMS. Для этого нужно:
- иметь возможность сменить часть дизайна или весь - без изменения внутренней структуры сайта и/или переписывания CMS
- иметь возможность средствами административного интерфейса размещать счетчики статистики
- иметь возможности управления расположения и публикации информационных блоков, а также менять их содержание и порядок.
- менять телефон в шапке и/или в подвале, а так же другие контактные данные (обычно программисты зашивают это в код страницы).
Шаг 9. Настроить безопасность сайта. Разъяснить клиенту правила безопасного использования сайта. Иначе взломщики легко разместят на сайте вредоносный код.
В среднем взлому подвергается более 20% сайтов в интернете. Например, на сайте могут появиться скрытые внешние ссылки, которые продаются через биржу.
Шаг 10. Требуется установить расширение для «красивых» URL-адресов (модуль ЧПУ). Настроить его для всех разделов-категорий-страниц сайта. Выстроить правильную структуру адресов внутренних страниц. Необходим полный контроль над адресом каждой страницы, с возможностью ручной замены, автоматического редиректа, автоматического создания правильных адресов без лишних знаков и управления всеми мета-тегами на каждой странице.
Шаг 11. При необходимости создать адреса страниц на русском языке (важно для доменов в зоне России, Украины и других стран с преобладанием русского яыка), иначе сайт будет выглядеть так: президент.рф/index.php?option=com_content&view=article&id=42&Itemid=90 вместо: президент.рф/выступления/встречи.
Шаг 12. Установить модуль для автоматического создания и обновления карты сайта.
Шаг 13. Настроить интерфейс управления файлами. Нужна возможность выкладывать файлы на сервер, например для фото-галереи — средствами административного интерфейса (без использования FTP).
Шаг 14. Сайт не должен быть требователен к хостинг-площадке. Должен работать быстро.
Шаг 15. Не должно быть никакой аренды или абонентской платы.
Шаг 16. Передача сайта заказчику в собственность. Обязательные признаки прав собственности на сайт:
- создатель сайта получает исходники дизайна в формате PSD;
- создатель сайта являетесь владельцем домена по прямому договору с регистратором;
- сайт расположен на выбранной сайтосоздателем хостинг-площадке и он в любой момент ее поменять на другую.
Создатель сайта имеет все виды доступа к сайту и его файлам, в том числе доступ к панели управления хостингом. Если хоть один пункт этих правил не соблюден — создателя сайта ждут следующие неприятности:
- трудности наполнения сайта;
- вымогательство денег на поддержку или внесение изменений;
- повышенные расходы на содержание сайта;
- проблемы с продвижением;
- потеря домена и сайта.
1.4 Способы создания сайтов
Способ 1. Используем систему управления сайтом (CMS). Этот способ – самый быстрый и широко используемый. В Рунете такие системы называют «системами управления контентом» или просто «движками». Они позволяют не только удобно и комфортно разработать сайт, но и вести электронный бизнес. Например, широко используются такие «движки» как Joomla, WordPress. Всё просто. Скачиваем и устанавливаем CMS на сервер, а затем работаем, как и с конструктором, по той же схеме.
Такие CMS позволяют разрабатывать как простые одностраничные сайты-визитки и блоги, так и многофункциональные и многостраничные ресурсы. CMS имеет большую библиотеку (несколько десятков тысяч) шаблонов и дополнений. Используя это богатство можно разработать многофункциональный интернет-ресурс, совершенно не задумываясь о последующем представлении материалов на сайте. Они будут представлены «как надо» всегда.
При использовании CMS необходимо самому зарегистрировать доменное имя, определиться с хостингом, пройти регистрацию в поисковых системах, каталогах. Необходимы знания по CSS и HTML.
Способ 2. Создание сайта с нуля.
Этот способ – наиболее длительный и трудный. Необходимо будет изучить хорошо хотя бы один из распространенных языков веб-программирования, например, HTML, PHP, CSS, а также работу с базами данных, например, MySQL. Этот процесс - длительный.
Можно также идти по пути создания сайтов на основе популярных программ, например, Dreamweaver и используя и графический редактор, в частности, Photoshop. При этом вся «черновая» и рутинная работа будет выполняться самим разработчиком, включая и «закидывание» («заливку») файлов на сервер.
Это способ, ввиду своей непроизводительности и трудоемкости сейчас не пользуется популярностью.
Макет сайта – это набор правил, по которым располагаются элементы страницы сайта. Таким образом, макет - это основа верстки, - тот каркас, на котором собираются элементы дизайна и информационное наполнение страницы.
Зачем нужен макет страниц сайта? Как один из основополагающих элементов стиля, макет создает в документе единство, ощущение неделимого образного ряда. То есть макет упорядочивает документ, делает его, в общем случае, легко читаемым и более удобным для восприятия.
Прежде чем начать создание макета, необходимо определить, макет чего вы собираетесь делать, что сводиться к определению количества принципиально различных страниц на вашем будущем ресурсе. Например, сайт TEPKA.ru" целиком создан на одном макете, несмотря на то, что первая страница внешне несколько отличается от всех остальных; в этом случае создание макета для сайта сводиться к планированию одной единственной страницы. Результатом такого планирования, является единый шаблон, по которому создаются все внутренние страницы.
Все страницы создаваемого сайта должны быть выполнены в едином стиле, разве что компоновка текстовой области у главной страницы может быть чуть более сложной, чем у внутренних. Исходя из этих соображений, для информационного сайта любой сложности необходимо создать один макет, максимум два.
Иногда возникает необходимость создания нескольких макетов для одного сайта, однако это может быть оправдано только в том случае, если нужно заметно разделить несколько разделов или при наличии различных типов материалов, размещаемых отдельно. Но даже и в этом случае важно понимать, что создавать разные страницы, пользуясь одним макетом гораздо проще, чем создать стилистически похожие страницы на разных макетах.
Поскольку основным средством точного позиционирования элементов на HTML-странице являются таблицы, то задача макетирования во многом сводиться к рисованию (естественно на бумаге) сетки этой таблицы. Потом, с помощью языка разметки страниц HTML, в том или ином редакторе создается рабочий вариант этой таблицы и наполняется содержимым, а пока ваша задача только нарисовать ее на бумаге.
Очевидно, что для создания макета страницы сайта необходимо четко представлять себе количество и характер элементов на странице, а следовательно, вам необходимо заранее определить типы материалов и их объем. Ну, с типами все довольно просто, так как они определены еще при планировании сайта, а вот с объемами есть два варианта: либо вы подгоняете макет под объем материалов, либо вы подгоняете объем материалов под заранее созданный макет. На самом деле, прибегать к первому варианту приходиться крайне редко, например, при работе с авторскими или другими специфическими материалами, которые не подлежат редактированию. Во всех же остальных случаях, любой материал - картинка или текст может быть доработан в соответствии с требованиями макета.
Особенности WWW и собственно языка HTML приводят к тому, что вид вашей страницы зависит от используемого монитора и от настроек конкретного компьютера пользователя. Если вы не хотите доставить пользователям неудобство (а горизонтальная прокрутка экрана - это одна из самых неприятных штук), то ограничивайтесь экранным разрешением. Доминирующее сейчас разрешение - 1024х768 точек. Опираясь на эти цифры, вы можете смело рассчитывать на ширину 900 точек - это будет оптимальная ширина вашей таблицы.
С другой стороны, большие мониторы созданы для того, чтобы на них умещалось много информации (в нескольких окнах или рабочих областях), и разворачивать при работе с ними окошко браузера на все 2048 пикселей, мягко говоря, не совсем правильно. Хотя осуждать предпочтения пользователей разработчики не вправе.
Макет страницы сайта
Создание макета страницы сайта - это не только конструкторская задача, но и, в некотором роде, творческий процесс. Выпишите на бумагу все элементы страницы, в том числе и те, которые будут присутствовать только с некоторой степенью вероятности - планирование их присутствия необходимо, чтобы макет был достаточно гибок и учитывал все возможности расширения.
Если мы грамотно спланируем принципиальный макет, то нам не придется его часто менять из-за того, что необходимо внести какие-либо материалы, которые "не лезут" в старую сетку. В списке обязательно следует отразить и рекламные баннеры, и кнопки, и элементы навигации - все до самых последних мелочей, что должно присутствовать на страницах создаваемого сайта.
Целесообразно задаться какими-то начальными величинами, на основе которых будут рассчитываться все пропорции будущей композиции. Это может быть либо ширина уже имеющегося в наличии логотипа, либо размеры рекламного баннера, который планируется разместить в верхней части страницы, либо просто какая-то цифра, взятая буквально с потолка, если работа начинается с нуля. Если элемент имеет фиксированные размеры, то обязательно пометьте это у себя в списке. На этом этапе все подобные элементы должны быть распределены по странице, то есть в этот момент уже должно быть представление, как будет выглядеть будущая страница.
«Каркас» будущего сайта может иметь фиксированную ширину или верстаться по «резиновому» принципу, растягиваясь с увеличением разрешения экрана. Нужно сразу взвесить все за и против. «Резиновый» макет верстать сложнее, да и вряд ли композиция будет выглядеть сбалансированно при возможном изменении ее ширины в два с лишним раза от расчетной, ведь растровые графические элементы — компоненты интерфейса, реализованные в виде GIF-, JPEG- или PNG-файлов, не масштабируются с изменением ширины окна браузера. В то же время вокруг содержимого страниц с фиксированной шириной при больших разрешениях экрана остаются огромные пустые поля, и выглядят эти страницы в такой ситуации весьма сиротливо.
На всякий случай напомню, что самые распространенные на сегодняшний момент размеры баннеров - это 728х90, 468х60, 120х60, 100х100, 400х50, а также кнопка 88х31. Таким образом, задача создания макета наполовину состоит из решения головоломки, как разместить все эти элементы на ограниченном поле страницы так, чтобы полученный результат выглядел гармонично и аккуратно.
Закончив с принципиальной схемой, нарисуйте макет на бумаге уже с помощью линейки и карандаша, приводя все к реальному масштабу и размечая размеры элементов. Теперь вам точно известны размеры ячеек таблицы, а, следовательно, и ширина размещения текстовых или графических элементов, поскольку часть из них образована от стандартных баннеров, а остальные получены по остаточному принципу. Расчертив таблицу, отобразите на макете характер материала в каждом информационном потоке, стандартные элементы, расположение навигации, колонтитульные элементы и пр.
Теперь по полученному макету нужно определить сетку таблицы, которая будет составлять основу HTML-страницы. Основная задача на этом этапе - создать такую таблицу, в которой можно разместить все указанные нами элементы.
Вернемся к собственно самому макетированию - ваша задача создать таблицу, отвечающую нескольким требованиям. Во-первых, она должна содержать пространство для каждого возможного элемента на странице, то есть, создавая таблицу, вы должны предусмотреть место для каждого элемента, который вы захотите на данной странице поместить. Во-вторых, в создаваемой таблице должно быть минимальное количество ячеек, которое будет удовлетворять вышеозначенному требованию. В-третьих, таблица должна быть достаточно гибкой, чтобы в нее можно было поместить широкий диапазон непредусмотренных элементов. Вам предстоит создать свою таблицу, исходя из вышеозначенных предпосылок.
Основным элементом страницы сайта является область основного содержания — то, ради чего, собственно, создается страница, ее полезная площадь. Важно осознать тот факт, что пространства для основного содержания страницы следует отводить как можно больше, но в то же время с расчетом, чтобы не было ущерба функциональности прочих элементов.
На макете главной страницы сайта в блоке основного текста желательно присутствие места для краткой аннотации — пояснения, кому адресован этот ресурс. Наличие такого описания — признак уважения к личному времени пользователя: если ему неинтересна тематика сайта, он незамедлительно покинет страницу; если же тематика вызывает интерес, со вкусом составленная аннотация только подогреет его. На главной странице часто размещают и новости, причем желательно, чтобы информация о последнем обновлении также была видна без прокрутки содержимого окна. Поэтому целесообразно применить для текстового содержания главной страницы сайта макет с двумя и более колонками, тогда как на внутренних страницах вполне можно обойтись размещением текста в одну колонку.
Подвал — немаловажная часть интерфейса, которой, к сожалению, многие разработчики не уделяют должного внимания. Чисто композиционная роль подвала — уравновесить шапку, придать странице законченность. В информационном плане он тоже весьма полезен: в самой нижней области страницы можно разместить выходные данные, контактную информацию, дату последнего обновления, различные счетчики, рекламные баннеры и прочие элементы подобного рода.
Композиция сайта будет выглядеть гармонично, если, при создании макета сайта, детально выверить нюансы пространственных отношений. Скажем, если ширина области, в которой располагается логотип, будет соответствовать ширине вертикально ориентированной панели навигации, расположенной ниже, а все поля и отступы будут одинаковыми, глазу, несомненно, будет приятно.
Собственно, это все. Макет уже готов и теперь его можно описать в виде HTML-кодов и "натягивать" на него элементы дизайна, в результате чего, у вас получиться шаблон для последующих страниц сайта. После этого на шаблон "заливаются" уже сами материалы и получается сайт. Такие действия лучше всего выполнять в специализированных программах, а именно HTML-редакторах.
1.6 Редакторы HTML
HTML-редактор — компьютерная программа, позволяющая создавать и изменять HTML-страницы. Несмотря на то, что HTML-код может быть написан в простом текстовом редакторе (например, Notepad), специальные редакторы для написания кода HTML предлагают больше удобств и функциональности. По своей функциональности они делятся (часто весьма условно) на две категории:
а) редактор, показывающий только исходный код;
б) редактор, который показывает готовую страницу в режиме WYSIWYG (что видишь, то и получишь).
Многие WYSIWYG-редакторы позволяют одновременно работать и с кодом страницы.
Существует множество HTML-редакторов, позволяющих создать сайт легче, чем, допустим, с помощью Блокнота. Для примера ниже показаны два редактора:
а) NVU - Визуальный (WYSIWYG) HTML-редактор;
б) Web Studio - Пакет программ для создания и поддержки Web-сайтов.
Основой для создания NVU послужил код Mozilla Composer. По сравнению с оригиналом, возможности NVU значительно шире - менеджер сайтов с возможностью редактирования страниц на удаленном сервере, редактор CSS c предварительным просмотром стилей, цветная подсветка синтаксиса в режиме редактирования кода, проверка орфографии, расширение плагинами и многое другое.
Основу составляет довольно мощный "визуальный" редактор, включающий инструменты для работы с HTML/XHTML, JavaScript, CSS, PHP, Perl, SQL и другими современными веб-технологиями. Кроме этого, в пакет включены Tags Designer, Template Editor, средства для проверки правильности HTML-кода, а также простой и в то же время удобный текстовый редактор LightPad. Имеются средства для управления проектом, в том числе встроенный браузер, утилита для загрузки файлов на сервер по FTP-протоколу (допускается автоматизация работы с "зеркалами" сайта), имеется поддержка макросов для автоматизации. Возможно многопользовательское использование.
1.7 HTML-редактор NVU
Подробнее рассмотрим редактор NVU. NVU – это небольшой кроссплатформенный визуальный (WYSIWYG) HTML-редактор с открытым исходным кодом. Его основой послужил код, выделенный из Mozilla Composer. Благодаря этому, редактор получился лёгким и удобным в использовании и на настоящий момент по своему функционалу уже далеко обогнал своего "прародителя", вплотную подбираясь к возможностям своих коммерческих "собратьев", таких, как FrontPage и Dreamweaver.
NVU позволяет легко и просто любому новичку, незнакомому с HTML, в визуальном режиме создать качественный сайт или отдельные страницы, отвечающие всем современным веб-стандартам. Продвинутые пользователи при необходимости могут переключиться в режим непосредственной правки кода. Помимо этого в NVU имеются и дополнительные инструменты. Это Менеджер сайтов, позволяющий не только управлять страницами, но и редактировать их прямо на удаленном сервере; встроенный Редактор CSS c предварительным просмотром стилей, цветовая подсветка синтаксиса в режиме редактирования кода, проверка орфографии и многое другое.
NVU поддерживает смену интерфейса с помощью подключения дополнительных тем, а функционал редактора можно значительно расширить за счёт подключения расширений, как написанных специально для NVU, так и некоторых аддонов для Mozilla Firefox.
Имеется в наличии интерфейс с поддержкой вкладок и быстрым доступом к часто используемым меткам (тегам), браузер предварительного просмотра и несколько мастеров для создания часто используемых элементов веб-страниц.
К недостаткам можно отнести отсутствие некоторых профессиональных функций, таких как подсветка синтаксиса, поддержка скриптов и некоторых других.