Размещено на http://www.allbest.ru/

Министерство образования и науки Российской Федерации

Федеральное государственное бюджетное образовательное учреждение

высшего профессионального образования

"КУБАНСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ"

(ФГБОУ ВПО "КубГУ")

кафедра дизайна, технической и компьютерной графики

ДИПЛОМНАЯ РАБОТА

Дизайн-проект web-сайта факультета архитектуры и дизайна

Работу выполнила А.В. Шамша

Руководитель работы

преподаватель А.Ю. Федченко

Краснодар 2015

Содержание

• Введение
• 1. История развития веб-дизайна
• 1.1 Понятие веб-дизайна
• 1.2 Основные этапы развития веб-дизайна
• 1.3 Виды и типы веб-сайтов
• 2. Теоретические аспекты создания веб-сайтов
• 2.1 Основные технологии веб-сайтов
• 2.2 Структура веб-сайта
• 2.3 Структура страницы веб-сайта
• 2.4 Этапы создания сайта
• 2.5 Процесс и результат разработки веб-дизайна
• 3. Разработка веб-сайта для факультета архитектуры и дизайна
• 3.1 Постановка задачи
• 3.2 Анализ целевой аудитории
• 3.3 Выравнивание и построение модульной сетки
• 3.4 Анализ аналогов
• 3.5 Разработка концепции дизайна веб-сайта
• 3.6 Разработка логотипа
• 3.7 Оформление планшетов
• Заключение
• Список использованных источников

Введение

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

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

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

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

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

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

В связи с поставленной целью были определены следующие задачи:

ознакомиться с теоретической частью истории развития и методов разработки веб-дизайна;

разработать уникальный логотип веб-сайта;

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

изучить целевую аудиторию.

Объект исследования - процесс проектирования визуальных образов и элементов веб-сайта для факультета архитектуры и дизайна.

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

Методы исследования:

теоретическое исследование, изучение литературы (журналов, книг, интернет-сайтов);

поиск аналогов, просмотр и анализов сайтов;

общение со специалистами, профессионально занимающимися созданием веб-сайтов;

анализ принципов разработки дизайна веб-сайтов.

На защиту выносится: пояснительная записка, презентационный планшет, CD-диск с полной информацией о дипломном проекте.

1. История развития веб-дизайна

1.1 Понятие веб-дизайна

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

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

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

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

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

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

Веб-дизайн ставит перед собой различные цели:

формирование у пользователя положительного восприятия образа объекта рекламного продукта;

простоту и четкость структуры сайта;

интуитивно понятного пользовательского интерфейса;

удобство навигационной системы.

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

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

Веб-дизайнер - сравнительно молодая профессия, и профессиональное образование в области веб-дизайна в России пока не распространено. В связи с увеличением спроса на интернет растёт и спрос на дизайн сайтов, увеличивается количество веб-дизайнеров.

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

1.2 Основные этапы развития веб-дизайна

Зарождение интернета происходило в 70-х годах прошлого века. На протяжении 1970-х перед высшим военным американским руководством стоял вопрос о том, как власти смогут производить общение после ядерной войны. За решение была принята сеть, которая всегда считалась ненадежной, в которой каждый узел должен быть суперкомпьютером. Все узлы этой сеты будут считаться равноправными по статусу происхождения, получения и отправления посланий. Сами же пакеты должны быть разделены на часть, называемые пакетами, которые будут отправляться отдельно. Каждый такой пакет будет начинаться с некоторого конкретного узла и отправляться по указанному направлению. Каждый из пакетом в любом сообщении будет проходить по независимому пути, после чего исходное сообщение будет собираться в начальную форму в конечном пункте. Коммуникационный стандарт дал толчок развитию TCP/IP (Transmission Control Protocol - протокол управления передачей информации, который превращает послания в потоки пакетов, и Internet Protocol - Интернет-протокол, который вновь группирует послание на конечном пункте назначения).

На основании этого простого принципа была создана первая пробная сеть для соединения. В Качестве спонсора этого проекта выступал пентагон. Сеть быстро развивалась. В 1969 году в сети было четыре узла, а в 1972 году в ней было уже 32 узла. Она использовалась для сетевой работы на компьютера, но основной ей функций был обмен сообщениями при совместной работе над исследовательскими проектами. В связи с тем, что компьютеры становились все более доступными, их начали соединять с растущей сетью. Для того чтобы классифицировать организации, владеющие узлами сети, эти узлы были разбиты на шесть доменов: gov, com, edu, org, mil и net.

В 1989 году руководству центра ядерных исследований в Швейцарии британский ученый Тим Бернерс-Ли предложил концепцию новой распределенной информационной системы, которую назвал World Wide Web. В то время он считал, что информационная система, построенная на принципах гипертекста, должна объединить всё множество информационных ресурсов, которое состояло из базы данных отчетов, компьютерной документации, списков почтовых адресов и т.п. В 1990 году было положено начало самой популярной и современной сети - Intenrt. На всю работу, выполнявшуюся в течении полугода, было предоставлено четыре дизайнера, разработчик программного интерфейса и программиста, для каждого из которых было предоставлено отдельное рабочее место. Вскоре их работу уже можно было демонстрировать. Уже через год в Internet был установлен анонимный протокол TELNET для доступа в систему. Через полтора года, программа Mosaic, разработанная Марком Андресеном из NCSA, построенная на принципах WWW, обеспечила бурный рост популярности "паутины" и внесла огромный вклад в развитие спецификаций World Wide Web. Эта огромная индустрия росла с каждым днём. В марте 1993 года трафик WWW составил 0,1% от компьютерной сети национального фонда науки США, которая была образована в 1984 году и служила каркасом Internet. В сентябре 1993 года трафик WWW составлял уже 1%, в октябре 1993 года количество зарегистрированных серверов WWW равнялось 500, а к июню 1994 года оно достигло 1500 и продолжало расти [8].

Первый в мире web-сайт появился 6 августа 1991 года. http://info. cern. ch/ Его создатель Тим Бернерс-Ли (Tim Burners-Lee) опубликовал на нём описание новой технологии World Wide Web (WWW), основанной на протоколе передачи данных HTTP, системе адресации URI и языке гипертекстовой разметки HTML. Также на сайте были описаны принципы установки и работы web-серверов и web-браузеров. Сайт стал и первым в мире интернет-каталогом, так как позже Тим Бернерс-Ли разместил на нём список ссылок на другие сайты (рис.1).

Рисунок 1 - Скриншот первого в мире сайта

Сайты в период с 1990 по 1994 год выглядели как группа текстовых документов, связанных между собой ссылками (рис. 2,3).

Рисунок 2 - Скриншот сайта IBM Webexplorer 1994 год

Рисунок 3 - Скриншот браузера Cello 1993 год

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

В 1996 году была издана очень влиятельная книга Дэвида Сигэла под названием "Creating Killer Web Sites". Система раскладки страниц, описываемая в этой книге, в основном базировалась на использовании таблиц HTML и однопиксельных GIF'ов. Страница раскладывалась по сетке; содержимое, будь оно текстом или графикой, помещалось в ячейки этой сетки. Чтобы предотвратить "сворачивание" пустых ячеек таблицы, использовались прозрачные GIF'ы размером 1 Ч 1 пиксель. Сигэл (и не только он) пошел дальше, и предлагал использовать однопиксельные GIF, как средство управления разрывами между буквами в тексте, и для того, чтобы создавать отступы. Появление таких методов позволило дизайнерам создавать визуально привлекательные страницы, ставя эстетический аспект в сайтах наряду с функциональным [17].

Одним из важнейших достижений этого времени является программа Flash 1.0. Создателем этой программы является программист Джонатан Гай, который ещё школьником, написал на языке программирования Pascal, свой первый графический редактор "SuperPaint", за который был удостоен награды на научной выставке в школе (рис.4).

Рисунок 4 - Программа SuperPaint

После создания "SuperPaint II" и завершения обучения в колледже, Джонатан начал разработку технологии для создания нового поколения программного обеспечения для работы с графикой, которая сожжет использоваться как на компьютерах Macintosh, так и на компьютерах с операционной системой Windows. Эта технология породила программу под названием "Intellidraw", которая составила конкуренцию "Adobe Illustrator". Уникальность "Intellidraw" заключалась в том, что помимо возможности рисования изображений, она так же позволяла добавлять к нарисованным изображениям действия, так что кроме возможности создания линий, которые бы соединялись с каким-либо объектом и другими линиями, можно было добавить так элементы как гистограмма, которая изменялась при введении пользователем чисел в текстовое поле. Позже выяснилость, что "Intellidraw" была не первой программой, которая позволяла это делать, так как существовал редактор изображений "SketchPad", но он был быстро забыт. В своё время "Intellidraw" не вызывала должного уважения у пользователей и когда стало ясно что она обречена, было принято решение действовать иначе. В это время становятся популярными компьютеры, представляющие собой экран, на котором можно было рисовать электронным пером. Очень привлекательной была идея сделать компьютер меньше, чтобы пользователь мог фактически брать его с собой куда угодно. С помощью инвестиций Чарли Джексона в январе 1993 года была создана компания Future Wave Software, целью которой было доминирование на рынке графического программного обеспечения для перьевых компьютеров. На тот момент главной задачей было создание сложного продукта, который был бы легок в использовании.

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

Компания Future Wave Software сильно заинтересовалась в создании программного обеспечения для анимации, но на тот момент единственными способами распространения анимации были VHS и CD ROM, и рынок программных продуктов для производства анимации был очень узок. Так же в это время, новое понятие, которое называлось Интернет, дебютировало перед публикой. В теории, казалось вероятным, что сеть станет настолько популярной, что пользователи захотят отправлять и просматривать графику или анимацию, создавая тем площадку для FutureWave Software для создания полезного продукта для двумерной компьютерной анимации. С такими мыслями началась работа над добавлением функций по созданию анимации в "SmartSketch" (рис.5) и созданию интерпретатора, который поначалу был очень медленным, для визуализации анимации. FutureWave Software продолжала разработку, а осенью вышел браузер Netscape с API для подключения плагинов, который предоставил возможность для создания плагина с достойной производительностью [14].

Рисунок 5 - Программа SmartSketch

Особенности дизайна сайтов данного времени:

фоновые картинки часто резались на фрагменты и вставлялись в таблицу;

принципы хорошего дизайна часто уступали новым и популярным "фишкам";

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

анимированный текст, бегущая строка и gif-картинки были почти на каждой странице.

Ниже приведены примеры сайтов возданных в 1997 году (рис 6,7).

Рисунок 6 - Скриншот сайта Yahoo январь 1997 год

Рисунок 7 - Скриншот сайта Apple апрель 1996

В конце 1990 годов flash приобрел популярность. Особенностью дизайна сайтов данного периода стало то, что многие сайты начали использовать комбинацию табличного дизайна и flash-элементов для эффектов (рис.8).

Рисунок 8 - Скриншот сайта Apple октябрь 1999 год

В 2000-ом году популярность приобретает CSS. CSS (англ. Cascading Style Sheets - каскадные таблицы стилей) - формальный язык описания внешнего вида документа, написанного с использованием языка разметки. CSS - одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название "стандарты Web". В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01 и XHTML и стандарт CSS. В начале 1990 годов различные браузеры имели свои стили для отображения веб-страниц.html развивался очень быстро и был способен удовлетворить все существовавшие на тот момент потребности по оформлению информации, поэтому CSS не получил тогда широкого признания. Термин "каскадные таблицы стилей" был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS. В отличие от многих существовавших на тот момент языков стиля, CSS использует наследование от родителя к потомку, поэтому разработчик может определить разные стили, основываясь на уже определенных ранее стилях. В середине 1990-х Консорциум Всемирной паутины (W3C) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.

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

Особенности дизайна сайтов в 2000 году (рис.9,10):

каскадные таблицы стилей (CSS) позволили дизайнерам отделить контент сайта от веб-дизайна

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

Рисунок 9 - Скриншот сайта Apple май 2000 год

Рисунок 10 - Скриншот сайта Yandex апрель 2000 год

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

Особенности дизайна сайтов в начале 2000-х годов (рис.11):

навигация сайта начала перемещаться в верхнюю часть страницы;

выпадающее меню стало популярным решением для навигации;

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

пользователи получают возможность создавать и оформлять контент.

Рисунок 11 - Скриншот сайта Apple 2004 год

В конце 2000-х годов в web-дизайне популярность приобретает интерактивный контент и web-приложений. Web-дизайнеры широко используют JavaScript и XML для плавной смены контента и разработки приложений. Развиваются социальные сети. Web дизайнеры фокусируются на оформлении контента. Важным достижением становится появление альтернативы Flash - HTML 5.

В 2008 году впервые был осуществлен доступ к интернету через мобильные устройства.

Адаптивный веб-дизайн (Adaptive Web Design) - дизайн веб-страниц, обеспечивающий корректное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера.

Целью адаптивного веб-дизайна является универсальность веб-сайта для различных устройств. Для того, чтобы веб-сайт был удобно просматриваемым с устройств различных разрешений и форматов, по технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта для отдельных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре устройств. В 2010 году Итан Маркотт в одной из своих статей ввёл понятие отзывчивого веб-дизайна (responsive web-design), предложив отображать одинаковое содержимое, используя при этом разные формы макетов для его представления. Среди веб-дизайнеров стали понимать адаптивный дизайн как более широкое понятие, включающее отзывчивый дизайн и постепенное улучшение.

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

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

В наши дни существует несколько новых идей, которые поддерживают движение в этом направлении:

новые элементы CSS, такие как vh, vw (высота и ширина области просмотра) позволяют получить гораздо большую гибкость при позиционировании элементов и решить такую проблему как центральное выравнивание по вертикали;

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

Web Components - представляет собой набор компонент, которые при совместном использовании позволяют разработчикам веб-приложений создавать независимые модули, выполняющие определённую функцию с богатыми визуальными возможностями, которые будут легки в разработке и повторном использовании. Таким образом, это создает возможность упростить рабочий процесс, так как элементы становятся строительными блоками, которые могут быть использованы много раз, в том числе и самостоятельно.

1.3 Виды и типы веб-сайтов

Сайт представляет собой набор web-страниц, которые объединены общей тематикой и связаны между собой ссылками, единой системой навигации. Для передачи данных используется протокол прикладного уровня - http, который указывается в URL или адресе любого ресурса (документа, файла) в Internet. Общий вид URL: схема: // иер-часть? запрос, где:

схема - это схема обращения к ресурсу (часто указывает на сетевой протокол);

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

запрос - строка запроса с передаваемыми на сервер параметрами (необязательный компонент).

Сайты можно разделить на несколько типов в зависимости от технологии их создания:

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

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

Flash-сайты - представляют собой интерактивные приложения разработанные в среде Macromedia Flash. Благодаря Flash сайт выглядит наиболее интерактивно и динамично.

Комбинированные сайты - при создании таких сайтов используются вышеприведённые технологии.

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

Сайт может создавать с различными целями и нести различную функциональную нагрузку. Можно выделить следующие виды сайтов:

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

Сайт-визитка. Сайты этого типа отличаются лаконичностью. Стандартно это 1-5 статичных страниц с описанием компании, схемой проезда к офису, некоторые описания основных товаров и услуг.

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

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

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

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

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

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

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

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

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

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

2. Теоретические аспекты создания веб-сайтов

2.1 Основные технологии веб-сайтов

HTML (HyperText Markup Language, язык разметки гипертекста) - язык логической разметки веб-страниц.html "вырос" из более сложного языка SGML (Single Generalized Markup Language, ISO 8879).html как стандарт для разметки веб-страниц вышел в свет в ноябре 1995 года под названием "HTML 2.0". После чего были предприняты попытки его модернизации, однако проект "HTML 3.0" так и не был рекомендован интернет-консорциумом. Возможно, тогда потребностям веб-разработчиков вполне отвечал предыдущий стандарт. С течением времени число пользователей WWW увеличивалось, что привело к появлению среди разработчиков всё более талантливых людей, которых возможности второй версии HTML явно не устраивали. То есть паутина всего за два года развилась до "HTML 4.0", который практически в неизменном виде используется и по сей день с незначительными изменениями.

В конце 90-х интернет-консорциуму (W3C) стало ясно, что HTML не отвечает потребностям Web, и любая новая версия HTML быстро устареет. Поэтому было предложено развивать расширяемый язык разметки: XML (eXtensible Markup Language) - новый стандарт оформления самых разнообразных документов, в том числе и веб-страниц. Уникальность XML заключается в его неограниченной расширяемости в силу четкой структурированности данных, возможности определения своих тегов и т.д.

XML так сильно отличается от HTML, что был разработан XHTML (это основанный на XML язык разметки гипертекста, максимально приближенный к текущим стандартам HTML). Был опубликован консорциумом в первый день 2000 года как переформулирование (reformulation) HTML в XML.

HTTP (HyperText Transfer Protocol, протокол передачи гипертекста) используется для передачи веб-страниц от сервера к пользовательскому браузеру.

Веб-браузер - программа, необходимая для просмотра веб-страниц.

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

Нововведением в стандарте W3C HTML 4.0 явились листы стилей (style sheets), позволяющие отделять содержание HTML-документов от их представления. Связывая один сценарий со всеми страницами ресурса, вы можете изменять внешний вид сразу всего сайта, даже если со страницами в данный момент работают пользователи. В настоящее время существует стандарт Cascade Style Sheets Level 3 (CSS3), однако полностью его не поддерживает ни один браузер. Элементы, поддержка которых реализована в тех или иных браузерах, как правило, по разному "понимаются". Дальше всех в этой области продвинулись браузеры, выпускаемые под маркой Mozilla (Mozilla, Mozilla ForeFox, Mozilla ThunderBird).

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

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

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

2.2 Структура веб-сайта

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

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

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

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

2.3 Структура страницы веб-сайта

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

Структурно дизайн поделён на три части:

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

основная рабочая область - work area. Рабочая область страницы, в которой размещаются собственно информационные материалы веб-сайта. В качестве Основной рабочей области может подключаться как физический файл, так и создаваемый системой на основе комплексных компонентов динамический код.

Если в качестве Основной рабочей области подключается физический файл, то такая страница называется статической. Если подключается динамический код, то такая страница называется динамической.

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

Эти три части могут занимать разную площадь, иметь разную форму. Неизменно одно: их порядок.

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

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

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

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

2.4 Этапы создания сайта

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

Разработка дизайна и архитектуры проекта. Работа над дизайном сайта предполагает следующие стадии:

анализ требований пользовательского интерфейса;

интуитивно понятная организация материала и продуманная навигация для обеспечения удобства и понятности любому пользователю;

разработка концепции дизайна;

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

одобрение дизайна;

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

создание эскизов всех типовых страниц веб-сайта в результате разработки дизайна и архитектуры проекта.

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

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

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

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

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

Тестирование готового решения. После завершения всех работ по интеграции систем и наладке оборудования производится тестирование сотрудникам компании.

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

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

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

2.5 Процесс и результат разработки веб-дизайна

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

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

Ознакомимся с двумя важными понятиями влияющих на успех разработки дизайна сайта:

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

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

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

Модальные окна

Модальные окна подобны всплывающим окнам, с тем лишь отличием, что они образуются непосредственно на уже открытой странице. Довольно часто модальные окна используются для запроса у клиента обратной связи. При открытии такого окна всё остальное содержимое сайта уходит в тень, позволяя сосредоточить внимание всё внимание клиента. В большинстве своем в модальных окнах располагаются различные настройки, формы, авторизации располагаются в модальных окнах, которые отображаются поверх сайта. Использование для этих целей отдельно открывающуюся страницу было бы нерациональным и неудобным. Так же использование модальных окон позволяет не только упростить работу пользователю и позволить ему затрачивать меньше времени, но и уменьшить нагрузку на сервер, так как эти действия будут совершаться на стороне пользователя и избавят сервер от избыточных и не нужных запросов [21].

Кнопки при наведении

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

Управление по запросу

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