Основные компоненты Web-страницы

ОСНОВЫ WEB-ДИЗАЙНА

Основы Web-дизайна

История развития Интернета. Появление интернета в Беларуси. WEB – дизайна. История возникновения. Требования к дизайну сайта в соответствии со стандартами W3C. Основные браузеры. Структура сайта, дискрипты и тэги.

Ответ.

Internet (англ. Internet, Interconnected Networks — соединённые сети) – гигантская компьютерная сеть, состоящая из множества соединенных друг с другом меньших по размеру сетей и покрывающая весь земной шар.

История Интернета началась в середине прошлого века: в 1957 году в США было создано Агентство Перспективных Разработок (ARPA), которое занималось военными разработками.

В 1989 году Тим Бернерс-Ли создал язык HTML.

В 1961 году Управление перспективных исследований и разработок Министерства обороны США (DARPA - Defence Advanced Research Agensy) по заданию министерства обороны США приступило к проекту по созданию экспериментальной сети передачи пакетов. Эта сеть, названная ARPANET, предназначалась первоначально для изучения методов обеспечения надежной связи между компьютерами различных типов.

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

В 1973 году через Arpanet впервые «пообщались» компьютеры разных стран. Сеть стала международной.

Развитие сети шло быстрыми темпами. В 1987 году число хостов превысило 10000. В 1988 году к NSFNET подключились Канада, Исландия, Дания, Норвегия, Франция Финляндия и Швеция. В 1989 году число хостов превысило 100000. К сети подключились Великобритания, Япония, Германия, Австрия, Израиль, Италия, Мексика, Новая Зеландия, Нидерланды. Россия подключилась к СЕТИ в 1990 году. Беларусь также в начале 90-х.

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

WEB – дизайна. История возникновения.

Веб-дизайн (от англ. web design) — это визуальное оформление веб-страниц. Он играет такую же роль для сайта, как полиграфический дизайн и вёрстка для бумажного издания. Часто «веб-дизайном» называют веб-разработку: проектирование интерфейса (графическое и текстовое содержание сайта), проектирование структуры, навигации и движка сайта (выделенная часть программного кода для реализации конкретной прикладной задачи).

В настоящее время под термином «веб-дизайн» понимают именно проектирование структуры, идейной целостности Интернет-ресурса, обеспечение удобства пользования Интернет-ресурсом для пользователей. Важной частью проектирование веб-сайтов, является их соответствие стандартам W3C (англ. World Wide Web Consortium, Консорциум Всемирной паутины — организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины), что обеспечивает доступность содержания сайтов для людей с ограниченными физическими возможностями, а также для пользователей портативных устройств.

Также с непосредственно дизайном сайтов смежны маркетинг в Интернете (Интернет-маркетинг), то есть, продвижение и реклама созданного ресурса, поисковая оптимизация

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

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

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

Юзабилити (англ. usability — дословно «удобство пользования», «применимость») — применительно к компьютерной технике термином юзабилити называют концепцию разработки пользовательских интерфейсов программного обеспечения, ориентированную на максимальное психологическое и эстетическое удобство для пользователя.

Требования к дизайну сайта в соответствии со стандартами W3C

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

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

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

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

Приветствуется наличие красивых графических объектов, использование небольших, но стильных графических элементов (пиктограмм, «визуалов») в оформлении страниц сайта.

Приветствуется небольшое включение элементов анимации.

Дизайн сайта должен быть достаточно «легким» по объему графических элементов и обеспечивать как можно большую скорость загрузки страниц сайта.

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

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

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

Ве́б-обозрева́тель, или бра́узер.

В настоящее время каждый пользователь выбирает для себя «свой» браузер. Наиболее популярными являются Opera и Firefox. За ними идет Internet Explorer (IE).

Ве́б-обозрева́тель, или бра́узер (от англ. Web browser) — это программное обеспечение для поиска, просмотра веб-сайтов, то есть для запроса веб-страниц (преимущественно из Сети), для их обработки, вывода и перехода от одной страницы к другой .

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

• Internet Explorer (версия 5.5 и выше):

• Opera (версия 7.0 и выше);

• Mozilla Firefox (версия 1.0 и выше).

• Основной цветовой режим мониторов, на которых должен корректно просматриваться сайт, - 15 разрядов цветов и выше (число цветов 65536 и выше).

Разработка структуры web-проекта

Согласно общей концепции проекта, поставленным целям и задачам определяется структура web-проекта, а именно:

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

§ определение уровня автоматизации обработки данных, разработка структуры управления данными;

§ проводится спецификация форм и порядок их появления;

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

§ разработка эскизов дизайна проекта (количество вариантов утверждается заранее).

Разработка.

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

§ программирование: создание программных элементов;

§ pеализация навигации в рамках утвержденной модели проекта;

§ базовое информационное наполнение;

Язык разметки гипертекста HTML

• (от англ. Hypertext Markup Language — «язык разметки гипертекста») — это стандартный язык разметки документов во Всемирной паутине. Все веб-страницы создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, удобном для человека.
• Вместе с XML, HTML обычно причисляют к «языкам разметки текста». На самом деле роль этих двух языков, как и самого формата под названием «просто текст» («plain text»), выходит далеко за рамки обработки текстовой информации.
• Изучение любого компьютерного языка начинается со знакомства с его основными строительными блоками — операторами, выражениями, переменными. С этой точки Зрения язык HTML крайне прост, чтобы не сказать — примитивен: кроме обычного текста, HTML-файл содержит лишь один тип управляющих конструкций, так называемые теги (tags).

Слова заключенные в угловые скобки “<” и “>” называются HTML - дескрипторами или HTML – тегами.

Основные компоненты Web-страницы

Основная навигационная панель сайта (меню). Альтернативное меню и дублирующее основного меню. Ссылки, виды ссылок и их выполнение. Основные элементы дизайна сайта. Компоновка страницы сайта. Цветовое решение сайта. Оптимизация графики Web, подготовка изображений для Web-страницы. Принципы работы с картинками.

Ответ.

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

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

Несколько основных пунктов меню можно продублировать в альтернативном меню. Если основное горизонтальное – то в вертикальном, или наоборот.

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

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

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

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

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

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

Основные элементы дизайна сайта.

• Дизайн — это конструирование вещей, машин, интерьеров, основанное на принципах сочетания удобства, экономичности и красоты.

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

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

• Главная задача Web-дизайна является создание комфортной атмосферы для усвоения информации на страницах Интернет-сайта.

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

• компоновка Web-страниц сайта;

• цвет;

• шрифт;

• графика.

Компоновка страницы сайта.

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

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

Цветовое решение сайта.

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

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

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

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

• количество используемых основных цветов по возможности не должно превышать трех;

• цвета, используемые на сайте должны взаимодействовать и гармонировать между собой;

• употребление цвета должно отвечать элементарным правилам логики;

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

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

Оптимизация графики Web, подготовка изображений для Web-страницы. Принципы работы с картинками.

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

Сайт должен загружаться быстро, а графика занимает основной объем трафика веб-страниц. Одна фотография в килобайтах занимает место в десятки раз большее, чем лист текста A4. Графика обязательно должна быть оптимизирована! Следует использовать повторяющиеся изображения, так как компьютер сохраняет один раз загруженные файлы во временных папках для экономии времени загрузки. Повторяющимся изображением может служить «шапка» сайта на всех его страницах.

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

Среднее время загрузки страниц не должно превышать 30 секунд при скорости соединения 28.8 Кбит/сек. Допускается увеличение времени загрузки отдельных страниц до 35 секунд, но не более чем 30% общего числа страниц сайта. Главная страница должна иметь время загрузки не более 40 секунд

На WEB странице можно использовать графические файлы форматов JPG, GIF и PNG. GIF -специальный сетевой формат: имеет малый размер файла, возможность плавного проявления и анимации, а также эффект прозрачности, позволяющие использовать картинку как "обои" на странице или в таблицах. Но т.к. gif содержит 256 цветную палитру, он неэффективен для хранения фотографий. JPG напротив не имеет ограничений по глубине цвета, но также и возможности анимации. Новый формат файлов поддерживающий и глубину и прозрачность -PNG, имеет недостаток в том, что старые браузеры его не видят. Поэтому, если не брать во внимание пользователей устаревшими программами, пинги вполне можно включать в свои страницы. Чтобы включить в страницу рисунок, надо описать ссылку на него:

<IMG SRC="Image">

где SRC (от source -источник)=Image -файл в формате gif, jpg или png , содержащий рисунок.
Вы можете задавать взаимное расположение рисунка и текста включением атрибута align = " ":

Возможны следующие типы выравнивания:
align = "middle" - относительно центра строки
align = "left" -текст обтекает картинку справа
align = "right"- то же слева

При использовании выравнивания left или right можно включить в тег img дополнительный параметр отступа вокруг изображения, чтоб картинка не прижималась вплотную к Вашему тексту. Параметр VSPACE="n" - создает отступ по вертикали, а HSPACE="n" - по горизонтали на n пиксел. Таким образом, правильно написанный тег картинки с обтекающим справа текстом будет выглядеть так:

<img src="lego.gif" align="left" width="96" height="90" vspace="10" hspace="35" alt="Новый пример" border="1"> Text.

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