Разработка сайтов в Волгограде - последовательные шаги

     Продолжим тему создания сайтов в Волгограде, точнее говоря, web-строительства, его теорию. В предыдущих статьях я рассказывал как проще создать сайт и даже не упоминал термин разработка сайта - важнее было понять как и в каком порядке нужно что сделать для достижения конкретной цели в виде готового простейшего сайта. Теперь важно обсудить, почему нужно действовать именно в таком порядке и именно по таким этапам, необходимо раскрыть теоретическую часть. Не нужно следуя рекомендациям в предыдущей и других подобных статьях слепо копировать сайт который вам приглянулся в Интернете, делать свой сайт по его образу и подобию. Задайте себе простые вопрос: почему этот сайт сделать именно так, а не по-другому? Когда сможете ответить себе на этот вопрос то сразу же найдете свои собственные подходы к разработке собственного сайта, более подходящие для решения вопросов возложенных на него.
     В следующей статье я покажу как создавать главную страницу сайта, от чего отталкиваться. Эта страница создает первое впечатление посетителя сайта о том, каким сайтов является тот на который он имел честь забрести, что он может ждать дальше. Но сайты бывают и настолько миниатюрные, что создавать для них главную страницу - это слишком, почти так же как перевозить сумочку или чемодан на большегрузной фуре. Вы уже знаете каки должен быть сайт вашего предприятия, вашей студии, вашей фирмы, вашего персонального бренда? Какова у этого сайта будет структура? И какая информация будет размещена на нем и каким образом в каком виде? А сколько всего страниц будет насчитывать ваш сайт? Какое будет цветовое решение у страниц, текстовых блоков, элементов дизайна, элементов навигации? Вот на такие вопросы я и буду "филосовствовать" в рамках этой статьи. Конкретно будут освещены вопросы:

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

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

Шаги необходимые для разработки сайта в Волгограде

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

Продбор текстового и изобразительного содержимого сайта

     Шаг первый. Подбираем контент для сайта. С самого начала нужно сделать принципиальный выбор - чем будет наполнен сайт, каким содержимым. Какой информацией вы хотите поделиться с народом? Кстати, коммерческое предложение есть не что иное как вид информации, и ее тоже, и в особенности, нужно уметь подавать под нужным соусом и гарниром. Представьте, что вы в гостях просматриваете чужой семейный альбом с фотографиями и не обнаруживаете в нем ни одного известного вам узнаваемого лица. Станет ли вам интересно и любопытно просматривать этот альбом дальше? Надеюсь, вы не расчитываете, что на ваш замечательный "хоум пейдж" в очередь станут незнакомые сёрферы с желанием познакомиться с вашим жизнеописанием снабженным фотографиями, изложенным постным нестройным языком. Пробывали ли вы сами хоть раз вчитаться в строки титульной страницы иной домашней странички или сайта визитки какой-нибудь фирмы или организации, или даже небольшого корпоративного сайта? Это тоска зеленая - во-первых, во-вторых - это сильнодействующий рвотный порошок. Да, к сожалению, авторы и создатели сайтов в одном лице редко задумываются о том ЧТО они ИЗЛАГАЮТ и для КОГО они излагают, и даже о том ЗАЧЕМ это делается. А ведь это есть основа для УТП - уникального торгового предложения, если мы говорим о коммерческом сайте. У всех нас в жизни было что-то любопытное, чем можно похвастаться, или есть что-то отличное и превосходное в предполагаемом к продвижению продукте или услуге. Нужно всего лишь попытаться это донести вашу информацию до потенциального потребителя ее в таком виде в котором он будет СПОСОБЕН это "переварить" и вообще захочет это "хавать". Это умение, приобретаемое навыком. Это - целая наука, между прочим. Называется эта наука - копирайтинг. В приложении к созданию и дальнейшему продвижению сайтов в Интернете, есть отдельное направление этой науки - SEO-копирайтинг. Если копирайтинг - это прикладная наука о том как составлять хорошие, продающие (в широком смысле этого слова) тексты для людей, то SEO-копирайтинг - это прикладная наука о том как составлять хорошие во всех отношениях тексты как для людей так и для того чтобы эти хорошие тексты "добрались" до нужного читателя с помощью поисковых систем. То есть здесь имеется ввиду, что текст должен быть адаптирован для правильного восприятия его не только человеком, но и поисковиком, т.е. семантическим анализатором поисковой системы.

Разработка структуры сайта

     Шаг второй. Разработка структуры как чать разработки сайта в Волгограде. Каждый документ, каждая страничка обязана иметь некую структуру. Это крайне важно для восприятия информации, изложенной в этом документе. Тем паче, когда речь идет об HTML-странице, т.е. о документе гипертекстовом по сути, том который может быть взаимосвязан с другими документами как по респондентной так и по корреспондентной линии. В частном случае веб-документ может быть гипертекстовым сам в себе, то есть более менее объемный документ может ссылаться сам на себя, на отдельные свои части, абзацы, строки и даже слова. Язык разметки гипертекста изначально разрабатывался с такими возможностями. На первом этапе нужно решить для себя - будет ли данный документ представлять из себя собственно весь сайт в лице главной страницы (так делается, например, для создания сайтов-заглушек или реже в случаях простейших сайтов-визиток) или это будет отдельная страница более "разветвленного" по содержимому сайта. В первом случае, если это будет единственная страница, то какую структуру будет иметь эта Заглавная (и единственная пока) страница? Будет ли на странице соподчиненность разделов, абзацев и других блоков информационных едениц (иерархия) или структура будет линейной, последовательной? А каким образом во втором случае будет решен вопрос навигации по сайту, системы переходов между разделами и отдельными страницами? Этот вопрос более чувствительный чем кажется. Если с самого начала, пока сайт состоял из нескольких страниц, он не был решен толково, то когда разрастется даже до нескольких сот страниц, то на нем "черт ногу сломит". Вы будете терять реальных (уже пришедших на ваш сайт) посетителей только из-за того что вашим сайтом не удобно пользоваться. В вопросу разработки навигации по сайту нужно подходить очень щепетильно, с позиций юзабилити. Юзабилити - это термин описывающий все категории удобства использования сайта человеком, аналог термина эргономический применительно к интерактивным информационным структурам, в частности сетевым, таким как сайты. Помимо логической структуры сайта в обязательном порядке следует решить вопрос его физической структуры - как фактически (физически) будут расположены файлы сайта на хостинге, будет ли это одна директория, или будут созданы физические директории для файлов каждого раздела сайта. В случае с динамическими сайтами этот вопрос с одной стороны несколько усложняется, ведь структура физических директорий становится не очевидна и не всегда ясна. С другой стороны, при использвании систем управления контентом (CMS) этот вопрос перестает стоять так остро для потребителей сайта как со стороны бекенда (редакторов сайта, веб-мастеров), так и со стороны фронтенда (посетителей сайта). Ведь не нужно уже крепко задумываться где будут размещены файлы с текстовой информацией, шаблоны разметки, графические файлы. Об этом позаботится "автоматика" - сама система управления содержимым сайта - Content Management System.

Подготовка и обработка текстовых материалов для выкладывания на сайте

     Шаг третий. Подготовка текстовых материалов. Для подготовки текстов, разметки абзацев, заголовков, орфографической и стилистической проверки его целесообразно пользоваться всеми известнымым MS Word. По оптимальности функционала трудно найти более подходящюю программу. Можно попытаться, но давайте не будем. Почти на любом сайте в Интернете, едва ли не на каждой странице вы найдете несколько чисто орфографических ошибок. Почему это явление так распространено? Потому что web-мастера создающие сайт, дизайнеры используют для первичной подготовки текстов те же программы с помощью которых тексты сайтов верстаются, обрабатываются тегами HTML разметки. А они не суть текстовые процессоры, им в массе своей до фонаря орфография со стилистикой. Эти программные комплексы заточены для решения других задач, и иная из них не "просигналит" вам о неправильном написании слов и даже неправильном построение целых фраз. С другой стороны, составив текст, проверив орфографию, настроив аблазы и наметив заголовки, не пытайтесь тут же выгрузить полученный документы в файл HTML формата, т.е. воспользоваться собственным конвертором Word для разметки текста в соответствии со спецификацией HTML 4.0.. Word делает разметку документов HTML тегами не просто довольно коряво. При такой автоматизированной разметке возникают проблемы которые еще хуже по стравнению с орфографическими ошибками, которых нам удалось избежать на этапе подготовки текста с помощью грамматического ядра MS Word. Объем такого HTML-документа будет на много больше по объему чем если бы он размечался в строгом соответствии со спецификацией. Будет включено много мусорных, заведомо лишних тегов разметки, а описания стилей будут занимать в коде документа едва ли не пятьдесят процентов. Поэтому лучше банально скопировать полученный и предварительно отформатированный текст через буфер обмена, вставить его в специальную программу для разметки, и уже там, использую соответствующий функционал и инструменты, подставить необходимые стили - заголовки разных уровней, границы абзацев, выделения, подчеркивания и гипертекстовые ссылки.

Подготовка графики перед выкладыванием на сайте

     Шаг четвертый. Подготовка графических материалов. Если вы планируете создать в качестве домашней странички семейный фотоальбом или виртуальную фотогаллерею, или если на сайте вашего предприятия предполагается разместить каталог производимых товаров и их изображениями, то конечно, вам понадобиться множетство графического материала в цифровом виде. Для этого сначала нужно перевести все изображения в цифровой вид - рисунки и фотографии, черчежи. При необходимости составить трехмерные модели продуктов в специализированных для этого программах. Понодобиться сканер и достаточно времени. Потом, над цифровыми "отпечатками" нужно как следует поколдовать в программе, которая позволяет редактировать растровые изображения, Adobe Photoshop, например. В нем можно сделать нужную выкадровку, обрезку снимков, поправить артефакты если они имелись изначально (конечно по возможности лучше иметь идеальный исходный материал), цветовую коррекцию, даже ретушировку и наложение объектов, текста. В этой же программе можно выгрузить файлы изображений в подходящий формат, с нужным для web-представления разрешением и размером итогового файла. Общепринятые для web форматы графических файлов - jpg, gif, png. Изображения считается полезным сжимать до тех пор, пока это возможно без значительной, сильно ощутимой для среднестатистического глаза потери качества. Графические файлы на выходе должны быть как можно меньше по объему. При этом картинки и фото должны оставаться приятными для восприятия по изобразительным качествам.

Разработка дизайна сайта, изобразительных решений

     Шаг пятый. Разработка дизайна. Все страницы одного сайта, либо все страницы одного крупного раздела большого сайта имели одинаковый дизайн, или, по крайней мере, общую продуманную концепцию дизайна, переходящюю из раздела в раздел. Под дизайном сайта подразумевается стиль оформления, в том числе цветовые решения, сочетания цветов, размеры и начертания шрифтов, размещение графических элементов, разделителей, рамок, функциональных блоков. Вот перед вами все подготовленные для размещения на сайте материалы - текстовые, графические. Попробуйте поработать правым полушарием, абстрагируйтесь от технической и сорержательной части, вгляните на весь материал как бы третьим глазом. Сделайте несколько глубоких медленных вдоха и выдоха, сосредоточенно посмотрите спокойным ненапряженным собранным взглядом в одну точку, в даль. Еще несколько медленных вдохов и выходов и снова мысленный взгляд на собранный материал. При этом, если вы не окончательный неисправимый безнадежный технарь с господствующим и давлеющим над вами левым логическим полушарием, у вас обязательно возникнут ассоциации в различных модальностях. В каких именно, зависит от того какой анализатор преобладает в вашем восприятии картины мира - зрительный, слуховой, тактильный, обонятельный. Первые два - наиболее распространенное явление. С каким цветом или цветами ассоциируются у вас собранные для сайта материалы? Какой цвет из них первый по значимости, какой дополнительный? Каким образом, в одном стиле, в рамках одной канвы можно описать отдельные товары в каталоге продукции и забавную историю о том как вам в голову пришла мысль открыть фирму по производству табуреток с тремя ножками? Это вместо того, чтобы в дежурном разделе "О нас" / "About Us" писать тошнотные фразы о том, что вы, оказывается, молодая быстроразвивающаяся фирма выходящая на рынок в регионах с уникальным проуктом в виде пластиковых бутылок с самооткручивающейся и замозакручивающейся крышкой и самовыпивающих из себя пиво. Совсем не лишним будет продумать общую стилистику подачи информации на сайте, некую перчинку, особенность интонации красной лентой проходящую сквозь весь сайт, через каждую или почти каждую страницу. В таком случае сайт будет навевать ваши мотивы (это хорошо, если "мотивы", свойственные вам, хороши), "пахнуть" индивидуальностью вашего предприятия и особенностями вашего продукта без явного упоминания об этом в дежурных фразах УТП.

Разработка отдельных элементов оформления сайта

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

Верстка сайта

     Шаг седьмой. Верстка.Не так важно в какой специализированной программе вы будете создавать макет сайта из отдельных файлов. Есть множество удобных и узко специализированных программных комплексов и отдельных программ, предназначенных для создания сайтов, в частности - для вёрстки сайта. Это Dreamweaver от Micromedia (сейчас преобретенный концерном Adobe), GoLive от Adobe, HotDog, всем известный FrontPage от Microsoft. Верстать сайт можно даже в обычном Блокноте Виндоуз, да будет вам известно. И очень даже успешно верстать. Для этого необходимо достаточно сносно знать правила разметки по спецификации HTML и теги этого языка разметки. А это наука не сложная, как бы не казалось иначе. Если совсем просто, то суть верстки сайта - правильным образом вставить эти самые теги разметки в подготовленный к размещению текст. Этими тегами формируется шаблонный каркас сайта - макет. Делать это можно средствами того же HTML разметки, но подходить к верстке можно по разному. Два основных способа верстки с помощью HTML - табличная и блочная. Табличная верстка делается с помощью тегов, описывающих таблицу. То есть создается как бы невидимая таблица, ячейки которой представляют из себя зоны сайта, как то заголовок (шапка с логотипом), поле горизонтального навигационного меню, поле вертикального навигационного меню, зона динамического текста, зона статического текста, подножие (футер) с зонами копирайта, счетчиков и минибаннеров. Это как пример. В основе своей это теги <table>, <tr>, <td>, с параметрами, описывающие ячейки таблицы, их границы, фон, линейные размеры и другие параметры. Блочная верстка делается с помощью одного универсального тега, описывающего блок через класс CSS - <div>. Как считается, блочная верстка более "гибкая", а потому предоставляет больше возможностей по форматированию и управлению каркасом шаблона. Именно с помощью блочной верстки и активном использовании упомянутых каскадных листов стилей (CSS) делается так называемая "резиновая" верстка, когда размещение, форма и линейные размеры блоков задаются относительно и условно (могут менятся в зависимости от условий). Поэтому вне зависимости от разрешения монитора, на котором просматривается сайт, аспекта разрешения, сайт будет смотреться одинаково презентабельно, потому что "приспособится" к условиям отображения - где нужно подрастянется, где нужно сожмется, и так, что общая картина шаблона не расползется в стороны непредстказуемым образом. Довольно часто, в особенности профессиональными дизайнерами используется сочетание в одном шаблоне жесткой табличной и гибкой блочной верстки. Есть плюсы и минусы в обоих способах. При таком сочетании и умелом использовании этого способа верстки, достигаются, как правило, наилучшие результаты. Так же основные теги, используемые для верстки сайта - это теги и мета-теги, описывающие заголовочную часть документа, не отображаемую пользователю - <head>, <title>, <description>, <keywords>, и теги форматирования текста - <p>, <br>, <hr>, <b>, <strong>, <em>, <u>, <i>, теги внедрения медиа-контента (как то графики) - <img src="..."> и наконец один зи важнейших концептуальных тегов всей HTML спецификации - <a href="..."></a> - тег описывающий гипертекстовую ссылку. Это то, на чем собственно и основан www (World Wide Web) в том понимании, как мы знаем Интернет сейчас. За описанием и разъяснением этих тегов можно обратиться к специальной литературе, которая доступна в огромном количестве и бесплатно. Еще раз говорю, что наука эта не хитрая. Это не программирование (как часто ошибочно называют HTML-разметку). Собственно web-программирование - это суть другое явление. А то о чем говориться в этом абзаце - это разметка гипертекста. Фактически это не отличается от форматирования текста во всем известной офисной программе - Word.

Тестирование "бета-версии" созданного сайта

     Шаг восьмой. Тестирование сайта. Задача этого этапа - убедиться в том, что шаблон сайта правильным образом, так как вы задумывали, отображается во всех наиболее популярных браузерах. На этом этапе можно выявить ошибки верстки. Кроме того различные браузеры могут по-разному интерпретировать некоторые теги. Путаница, приведшая к таким разночтениям, была заложена на ранних этапах развития спецификации HTML. Какие-то теги рекомендованы к использованию, какие-то считаются устаревшими. Кроме того разные браузеры в разном объеме реализуют спецификации расширения языка HTML разных версий - CSS, CSS2, CSS3. По принципу "здесь играем, здесь - не играем, а здесь - рыбу заворачивали". Нужно запустить браузеры Internet Explorer (как самой последней версии, 8й, так и предыдущих - 6, ими еще очень активно пользуются), Opera, Mozilla Firefox - это браузеры, работающие на трёх основных конкурирующих браузерных движках. Вы удивитесь, насольку по разному будет выглядеть ваш сайт на первом этапе верстки. Особенно если вы вздумали для разметки использовать расширения CSS. Тестирование с последующими подчистками и доводками занимает обычно довольно много времени из того, что вы потратите на создание сайта в Волгограде вообще. Количество и объем доводок и переделок зависит от вашего уровня владения языком разметки и его расширений, опыта, от того насколько вы хорошо справились собственно с разметкой каркаса шаблона. Со временем ошибок, конечно, будет меньше и меньше. Еще раз говорю: вёрстка сайта и разметка гипертекста - абсолютно доступная для простых смертных людей деятельность. Ничего трансцендентного. Пасьянс "Косынка" раскладывать умеете? Умеете, отлично. А в Worde выделить текст полужирным или курсивом и отступы красной строки поставить - сможете? Значит и шаблон своего сайта разметить сможете, и текст оформить на веб-странице сможете.

Выкладывание сайта в Интернет - Публикация

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