Веб-дизайн
Веб-дизайн (web page design) – это процесс проектирования, планирования, моделирования и реализации доставки электронного содержимого через сеть Веб с использованием технологий (на основе языков разметки), подходящих для интерпретации и визуализации веб-браузером или другим графическим веб-интерфейсом пользователя.
Основными аспектами веб-дизайна (в первую очередь для коммерческих веб-сайтов) являются следующие:
Содержимое. Информационное наполнение должно быть релевантным тематике сайта и ориентированным на целевую аудиторию сайта.
Удобство в использовании (usability). Сайт должен иметь дружественный пользовательский интерфейс с простой и надежной навигацией.
Внешний вид. Графика и текст должны быть выполнены в одном стиле и согласованы на всех страницах сайта. Стиль оформления должен демонстрировать профессионализм, привлекательность и релевантность.
Видимость. Сайт должен легко находиться с помощью большинства поисковых систем и рекламных площадок.
По-сути, веб-сайт - это информационная система, которая содержит две основные компоненты:
Компоненту представления (front-end). Видимое содержимое (разметка страниц, графика, аудио и текст).
Компоненту реализации (back-end). Связана с организацией и эффективной реализацией исходных кодов. Включает в себя неотображаемые сценарии, серверные компоненты, являющиеся основой для компоненты представления.
Процесс разработки веб-приложений
Работа с заказчиком начинается с составления краткого описания, в котором излагаются пожелания заказчика по визуальному представлению и структуре сайта. С учетом возможностей программных и дизайнерских средств и исходя из краткого описания, менеджер составляет требования к проекту, которые должны быть утверждены заказчиком.
Этапы проектирования веб-сайта зависят от объема сайта, его функциональности и многого другого.
Разработка веб-сайта включает в себя следующие этапы:
Дизайн главной и типовых страниц сайта. (выполняетя обычно в графическом редакторе).
HTML-кодирование, в результате которого создаётся код, который можно просматривать с помощью браузера.
Программирование сайта. Может осуществляться как "с чистого листа", так и с помощью специального высокоуровнего пакета - системы управления сайтом (CMS).
Размещение сайта в Веб, наполнение контентом и публикация.
Оптимизация веб-сайта с целью повышения его видимости в Веб.
Сдача сайта заказчику.
Для дизайна веб-сайта и разработки веб-приложений для него имеет широкий спектр инструментальных средств.
Технологии, которые обеспечивают деятельность World Wide Web:
Язык разметки гипертекста (HTML)
Протокол передачи гипертекста (HTTP)
Система имен доменов (DNS)
Серверы и браузеры Web
Статический и динамический контент
Типы контента
Обратим внимание на различные типы контента (любое содержательно-значимое наполнение информационного ресурса), который вы ожидаете увидеть в Интернет. Контент можно разделить на четыре типа —
простой текст,
стандарты Web,
динамические Web-страницы, и
форматы, требующие других приложений или подключаемых модулей (плагинов).
Простой текст
В самом начале, до появления каких-либо стандартов Web или плагинов, Интернет состоял в основном из изображений и простого текста — файлов с расширением .txt или похожим на него. Когда файл с простым текстом встречается в Интернет, браузер просто выводит его как есть, без какой-либо дополнительной обработки. Файлы с простым текстом все еще можно часто встретить на сайтах университетов.
Стандарты Web
Базовыми строительными блоками Всемирной паутины WWW являются три основных стандарта Web - HTML (или XHTML, эти два понятия будут использоваться здесь взаимозаменяемо для наших целей), CSS и JavaScript.
Язык разметки гипертекста (HTML HyperText Markup Language ) является в действительности довольно удачным названием, так как хорошо передает его назначение. HTML используется для разбиения документа, определения его содержания и структуры, и определения значения каждой части (того, что содержит весь текст и т.д., что мы видим на страницах Web). Он использует специальные элементы для определения на странице различных компонентов.
Каскадные таблицы стилей (CSS) предоставляют полный контроль над тем, как выводится элемент. Очень легко, используя объявления стилей, вывести все параграфы через две строки (line-height: 2em;), или сделать все заголовки второго уровня зеленого цвета (color: green;). Существует множество преимуществ разделения структуры и форматирования, и мы рассмотрим это более подробно в следующей лекции.
Наконец, язык JavaScript предоставляет Web-сайту динамические функции. Можно писать небольшие программы на JavaScript, которые будут выполняться на клиентском компьютере, не требуя установки на сервере какого-либо специального программного обеспечения. JavaScript позволяет добавить на Web-сайт некоторые базовые функции и интерактивность, но он имеет свои ограничения, что ведет нас к серверным языкам программирования и динамическим Web страницам.
Динамические страницы Web
Иногда при просмотре Интернет можно встретить страницы Web, которые не используют расширение .html - они могут иметь расширение .php, .asp, .aspx, .jsp, или какое-нибудь другое странное расширение. Все это примеры динамических технологий Web, которые могут использоваться для создания страниц Web, имеющих динамические разделы - код, который выводит различные результаты из базы данных или другого источника данных в зависимости от определяемых для него значений. Мы рассмотрим страницы Web этого типа ниже в разделе "Сравнение статических и динамических Web-сайтов".
Форматы других приложений или подключаемых модулей (плагинов)
Так как браузеры Web могут только интерпретировать и выводить определенные технологии, такие как стандарты Web, то при запросе адреса URL, который указывает либо на сложный формат файла, либо на страницу Web, содержащую технологию, которая требует подключаемого модуля (плагина), файл будет либо загружен на компьютер, либо открыт с помощью требуемого плагина, если он установлен в браузере. Например:
Если вы встретите документ Word, файл Excel, PDF, сжатый файл (ZIP, или SIT, например), сложный файл изображения, такой как Photoshop PSD, или другой сложный файл, который браузер не понимает, браузер обычно спрашивает, хотите ли вы загрузить или открыть этот файл. Оба действия обычно имеют аналогичные результаты, за исключением того, что во втором случае файл будет загружен в компьютер и затем открыт приложением, которое его понимает, если такое приложение установлено на компьютере.
Если вы встретите страницу, содержащую фильм Flash, MP3 или другой музыкальный формат, MPEG или другой формат видео, то браузер будет воспроизводить его с помощью установленного плагина, если такой плагин был установлен. Если плагина нет, то либо будет выведена ссылка для установки требуемого плагина, либо файл будет загружен и будет сделана попытка найти на компьютере приложения для его выполнения.
Конечно, имеется некоторая серая область - например формат SVG (Масштабируемая векторная графика) является стандартом Web, который реализован в некоторых браузерах, таких как Opera, но не реализован в других, таких как Internet Explorer - IE требуется плагин для понимания SVG. Ряд браузеров поставляется с некоторыми предустановленными плагинами, поэтому вы можете не знать, что некоторый контент выводится через плагин, а не естественным образом в браузере.