Файл: Лабораторных и практических занятий.docx

) и описывающих их таблиц стилей (CSS).

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

Целевая аудитория

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

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

Эргономичность

Web-дизайн должен быть эргономичным. Соблюдать контрастность текста к фону, использовать удобную навигацию, по возможности не изменять расположение навигационных элементов на разных страницах сайта. Грамотная навигация по сайту и соблюдение правила "трех кликов" (до любой информации на сайте пользователь должен добираться не более чем за три щелчка мыши) - эти требования web-дизайна следуют из элементарного уважения к посетителям сайта. Если разрабатываемый сайт имеет коммерческую или информационную направленность, лучше не экспериментировать с "нетрадиционной" навигацией по сайту ради того, чтобы "выделиться" в общей массе. Меню должно находиться там, где пользователь привык, где он ожидает его увидеть. На рисунке 1 стрелкой показано привычное направление следования взгляда посетителя сайта.

Рисунок 1.
Привычное и удобное для пользователя расположение компонентов страницы

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

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

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

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

Комфорт для глаз

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

Технологичность

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

Пример выбора критериев оценки сайта

Сайты, выполненные в форме «классического HTML», оценивают по формуле:

B = 2•(B1 + B2) + B3 + B4+ B5

Здесь:

B1 — дизайн (от 0 до 5 баллов);

B2 — HTML-кодирование (от 0 до 5 баллов);

B3 — содержание (от 0 до 5 баллов);

B4 — грамматика (от 0 до 5 баллов);

B5 — привлекательность (от 0 до 5 баллов).

Оценки B1— B4 определяются следующим образом. Проверяющий находит погрешности, допущенные при разработке сайта, и за каждую обнаруженную погрешность вычитает из максимального балла (5) оценки найденных погрешностей (см. в таблицах 1-4 ниже). Отрицательные итоговые оценки “округляются” до нуля.

Таблицы погрешностей

B1, Дизайн

Погрешность	Оценка
Фон, заданный картинкой, на котором текст не читается.	0.5
Цветовая палитра, утомляющая глаза.	0.5
Отсутствие выравнивания.	0.5
Движущиеся и мерцающие надписи.	0.5
Агрессивная GIF-анимация.	0.5
Звук и видео на страницах.	0.5
Сайт работает только в одном браузере.	0.5
Страницы не имеют геометрического “каркаса” (элементы распадаются на отдельные части, не образуя единого целого).	0.5
Отсутствие единого стиля оформления страниц.	0.1
Отсутствие заголовка сайта.	0.1
Фон, заданный картинкой, на котором “плитки” плохо стыкуются.	0.1
Слишком большое число цветов.	0.1
Обилие декоративных элементов, не несущих функциональной нагрузки.	0.1
Иллюстрации не вписываются в страницу, смотрятся как “заплаты”.	0.1
Отсутствие навигационных элементов или неудобная навигация.	0.1
Выделение стилем типичным для ссылок.	0.1
Многочисленные выделения одного и того же информационного элемента.	0.1
Слишком большие массивы выделений	0.1
Отсутствие анти-алиасинга или анти-алиасинг, не соответствующий фону страницы.	0.1
Отсутствие alt-надписей в информационных иллюстрациях.	0.1
Разрушение единого информационного элемента при изменении размера окна браузера (например, заголовка, навигационной панели, группы управляющих кнопок).	0.1
Постоянные элементы страниц (заголовки, меню, логотип…) плохо “держат” свое место на экране при переходах со страницы на страницу.	0.1
Горизонтальная протяжка в окне шириной 640.	0.1
Более двух разных шрифтов (гарнитур).	0.1
Прижатость элементов друг к другу.	0.1
Хвостатые ссылки.	0.1
Логотип не является ссылкой на Главную на вторых страницах.	0.1
Очень большие абзацы.	0.1
Работает ссылка на текущую страницу.	0.1
На страницах отсутствует информация об авторах с электронным почтовым адресом.	0.1
Электронные почтовые адреса, внешние ссылки не прописаны на страницах в явном виде.	0.1
Название окна не совпадает с заголовком страницы	0.1

B2, HTML-программирование

Погрешность	Оценка
Отсутствие лесенки на теговом каркасе.	0.5
Нарушение правил читаемости (должно быть: название тегов — заглавными буквами, названия атрибутов и их значений — малыми).	0.5
Строки длиннее 80 символов.	0.5
Нарушение вложенности тегов, отсутствие обязательных закрывающих тегов, неверные названия тегов, атрибутов и их значений.	0.5
Лишние теги, фрагменты, которые можно исключить из программы без изменения внешнего вида документа и функционирования приложения.	0.5
Отсутствие тега TITLE.	0.5
Отсутствие одного из атрибутов bgcolor, text, link, alink, vlink в теге BODY.	0.5
Не указаны атрибуты width и height в теге IMG.	0.5
Не оптимизированная графика, неверные значения атрибутов width, height.	0.5
Суммарный “вес” страницы превышает 40 килобайт.	0.5
Отсутствие указаний alt="" во вспомогательной графике.	0.5
Теги Hn используются для выделений фрагментов обычного текста.	0.5
Программирование шрифта при помощи атрибута face тега FONT.	0.5
Неверный регистр в именах каталогов и файлов.	0.5
Использование JavaSctript и CSS-технологий.	0.5

B3, Содержание

Работа полностью забраковывается, если содержит:

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

Погрешность	Оценка
Неудачная структура сайта	0.5
Неудачный подбор материала	0.5
Авторский материал без ссылок на автора.	0.5
Содержание не соответствует теме сайта.	0.1
Слишком длинные ссылки, многословные невыразительные разделы меню.	0.1
Отсутствует раздел “ссылки”.	0.1
Погрешности стиля.	0.1

B4, Грамматика (B4)

Погрешность	Оценка
Точки в коротких заголовках (а длинных заголовков быть не должно).	1.0
Неверное употребление пробелов со знаками препинания.	1.0
Дефис вместо тире, дюймы вместо кавычек, буква N вместо знака номера.	1.0
Другие грамматические ошибки	0.1—1.0

B5, Привлекательность

Оценка B5 за привлекательность выставляется так:

5 — сайт производит отличное впечатление;

4 — хороший сайт;

3 — средний сайт;

2 — слабый сайт;

1 — очень слабый сайт.
Практическая часть

Задание.

Работая в мини-группах (по 2-3 человека) проанализируйте и оцените с использованием таблиц погрешностей и формулы для оценки веб-сайта предложенные преподавателем сайты. Представьте свою оценку и доказательства её объективности.
Список сайтов для анализа и оценки:

http://zimpk.ru/ - сайт ГБПОУ РО «ЗимПК»

http://konstpk.ru/ - сайт ГБПОУ РО «КонстПК»

http://avasilen.ru/index.html - личный сайт преподавателя

http://kpolyakov.spb.ru/ - сайт К.Полякова по информатике

http://sadovymir.ru/ - сайт для садоводов и дачников

Требования к оформлению отчета

Отчет о проделанной работе должен содержать:

• 
  название и цель работы;
  
• 
  URL-адреса оцениваемых сайтов;
  

• 
  заполненные таблицы погрешностей сайтов и расчёт оценки сайта;
  
• 
  -письменные ответы на контрольные вопросы
  

ЛАБОРАТОРНАЯ РАБОТА №2
СОЗДАНИЕ ЛОГОТИПА САЙТА В ГРАФИЧЕСКОМ РЕДАКТОРЕ

Цель: изучение общих подходов к созданию логотипа сайта, разработка логотипа к тематической веб-странице средствами программ Adobe Photoshop или CorelDraw.

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

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

Диалектика формы. Два основных требования к любому логотипу, определяющие его маркетинговый потенциал и художественную ценность, — это узнаваемость и оригинальность. Узнаваемость определяется простотой и внутренней логикой композиции. Оригинальность – это некоторая необычность и даже «неправильность». Они кажутся на первый взгляд трудно совместимыми. Но противоречие между ними, является диалектическим «двигателем» композиции.

Логотип производит впечатление только тогда, когда в нем есть форма «с секретом», носитель пусть небольшого, но парадокса — геометрического, топологического, семантического. Роль скрытого смысла может играть, например, контраст, многоаспектность которого распознается не сразу, а также имитация трехмерности или подразумеваемое движение.

Важное понятие «скрытого смысла» стоит пояснить на паре примеров. Логотип на рис. 1а пользуется очень распространенным приемом «доказательства от противного»: форма пустот и вырезов в главной фигуре подразумевает наличие некоей другой фигуры — «пуансона», по форме которого были проделаны эти вырезы и в котором к тому же угадывается намек на очертания буквы «Q» (заглавной буквы названия компании). Фигура эта задает нам задачку, пусть и очень несложную, и интеллектуальное удовлетворение от ее решения составляет значительную часть эстетического удовлетворения от самого логотипа.



Рисунок 1а Рисунок 1б

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

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

Символ и слово. Композиционно большинство логотипов состоят из двух частей: графического знака и подписи (обычно названия компании). Из двух стандартных вариантов расположения — текст под графикой (рис. 2а) и текст справа от графики (2б) — сейчас популярнее второй, подчеркнуто асимметричный, более контрастный и динамичный. У этих двух основных схем есть множество вариаций, в которых текст так или иначе «прорастает» в графику, образуя с ней единое целое.



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

Многие логотипы, созданные десятилетия назад, зачастую вообще не содержат текста. В те времена логотипы встречались значительно реже, поэтому, скажем, фирма Mercedes Benz могла рассчитывать, что ее простейшая, с минимумом «скрытого смысла» трехлучевая звездочка, вписанная в круг (рис.  3а), будет эффективно работать на образ компании без лишних напоминаний о том, кому именно принадлежит этот знак. К сожалению, запас простых геометрических форм и их комбинаций, пригодных на роль символа, не бесконечен. Поэтому в последнее время ощутимой стала противоположная тенденция — текстовые логотипы без какой бы то ни было графики. Так, логотип Microsoft (рис.  3б) состоит лишь из названия, набранного специально приспособленным для этой цели шрифтом с единственным украшением — маленьким треугольным вырезом в букве «о» (в малых кеглях этот вырез незаметен и логотип опознается исключительно по шрифту).



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

Абстрактность для логотипа обязательна, но она не должна заключаться в ограниченности использования только геометрических фигур. Приметой современности стали логотипы, отбрасывающие принципы прямолинейности и геометрической простоты и стремящиеся вместо этого к простоте психологической. Так, логотип фирмы Lucent Technologies (рис. 4а) представляет собой, несмотря на всю натуралистическую экспрессию и далекую от идеального круга форму «мазка кистью», не менее абстрактную реализацию идеи круга, чем самый что ни на есть математически правильный круг.



Рисунок 4а Рисунок 4б

Менее удачный пример — лепестки цветка на официальной эмблеме Олимпиады в Нагано (рис. 4б), в которой представлена не абстракция цветка, а лишь в какой–то мере стилизованное его изображение. Аморфность формы ни в коем случае не должна распространяться на текстурный аспект графики: если геометрически более простые формы допускают использование двух и более цветов, то аморфные объекты обязаны компенсировать сложность очертаний строгой одноцветностью, а нелинейность их контура не должна сочетаться с какой бы то ни было размытостью или неоднородностями внутри поверхности. С этой точки зрения серые тени под разноцветными лепестками в эмблеме Нагано ведут к еще большему «дребезжанию» композиции, делая ее едва ли пригодной на роль логотипа.

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



Рисунок 5

Одно из самых употребительных шрифтовых решений в современных логотипах – пара начертаний обычной и повышенной насыщенности одного рубленого шрифта.

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

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

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

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

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

Текстура. В логотипах недопустимы ни фотографика, ни какие бы то ни было материальные текстуры, ни «скульптурная» трехмерность Сложные текстуры с трудом воспроизводимы на бумаге и не выдерживают цветовой редукции. Кроме того, в них отсутствует элемент рукотворности, который способен создать в логотипе «скрытый смысл», доступный опять–таки только разумному взгляду. Тк, «небо с облаками» может служить фоном, для страницы сайта или её части, но недопустимо использовать его в логотипе.

Тем не менее, простые текстуры с геометрическими свойствами иногда допустимы. Так, в логотипе фирмы AT&T (рис. 6) с помощью плоскоцветных полосок передано ощущение выпуклости шара — иными словами, типично фотографическая текстура реализована совсем не фотографическими методами.



Рисунок 6

2. 
   Практическая часть
   

Задание:

1. 
   Рассмотрите логотипы, представленные в файле Приложение1.
   

Выберите три самых удачных по их соответствию к вышеописанным требованиям и три наиболее неудачных. Обоснуйте ваш выбор в содержании отчёта.

2. 
   Используя одну из программ Adobe Photoshop или CorelDraw создайте три разных логотипа для сайта образовательного учреждения (школа, детский сад или колледж, используя различные подходы:
   

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

Размер каждого логотипа 250×250, или 100×250, или 250×100 пикселей.

Сохраните все три логотипа с расширением .jpg в созданную папку Мои логотипы

ЛАБОРАТОРНАЯ РАБОТА №3
КЛАССИФИКАЦИЯ ПРЕДЛОЖЕННЫХ САЙТОВ ПО ИХ СТРУКТУРЕ
Задание 1. Найти в интернете информацию по одному сайту из классификации сайтов по их принадлежности.

1) Личные (персональные) сайты.

2) Сайты коммерческих организаций.

1) Сайты-визитки

2) Промо-сайты или сайты для бизнеса

3) Полноценные сайты электронной коммерции или интернет-магазины

3) Сайты некоммерческих организаций.
Задание 2. Найти в интернете информацию по одному сайту из классификации сайтов по назначению

1) Сайты, предоставляющие контент.

2) Сайты для онлайн-контактов и общения.

3) Сайты электронной коммерции.

4) Сайты, предоставляющие онлайн-сервисы.
Задание 3. Найти в интернете информацию по одному сайту из классификации неестественных сайтов.

Сайты, создаваемые для раскрутки других сайтов:

1) Дорвеи.

2) Каталоги.

3) Сателлиты.

Сайты, создаваемые теми, кто решил непосредственно с их помощью заполучить заработок в интернете:

4) MFA-сайты.

5) MFS-сайты.

ЛАБОРАТОРНО-ПРАКТИЧЕСКАЯ РАБОТА №4.

СОЗДАНИЕ WEB – СТРАНИЦЫ

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

1. 
   Теоретическая часть
   

Вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент называется меткой (по-английски — tag, читается "тэг"). Тег HTML состоит из следующих друг за другом в определенном порядке элементов:

• 
  левой угловой скобки < (такого же, как "меньше чем" символа)
  
• 
  необязательного слэша /, который означает, что тег является конечным тегом, закрывающим некоторую структуру. Таким образом в этом контексте Вы можете читать символ /, как конец имени тега, например TITLE или PRE
  
• 
  необязательных, если даже тег может иметь их, атрибутов. Тег может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например: ALIGN=CENTER
  
• 
  правой угловой скобки > (такой же, как символа "больше чем").
  

Примеры:

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

....Метка должна открывать HTML-документ. Аналогично, метка должна завершать HTML-документ.

.Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки .Все, что находится между метками , толкуется броузером как название документа, которое отображается в заголовке окна и печатается в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.

...

…

в пустую строку тэги заголовков различных

уровней (размеров).

Заголовок первого уровня

Заголовок второго уровня

Заголовок третьего уровня

Заголовок четвертого уровня

Заголовок пятого уровня

Заголовок шестого уровня

Сохранить изменения в блокноте. Активизировать браузер с открытым в нем предыдущим

вариантом страницы. Щелкнуть по кнопке Обновить. В процессе создания Web-страницы

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

7. В окне браузера отобразится обновленная Web-страница. Закончить работу с файлом.
Задание 3. Создание первого html-документа «9 мая день победы», работа со шрифтами, задание цвета и размера шрифта. освоение технологии работы
1. Загрузите Блокнот и создайте HTML-документ вида:







9 мая День Победы

9 мая


День Победы



9 мая


День Победы




Задание 2. Наберите с помощью программы «Блокнот» следующий программный код. Сохраните его и просмотрите результат в браузере.