Список использованных источников и литературы 1. Немцова Т. И., Назарова Ю. В. Компьютерная графика и web-дизайн. Практикум: учебное пособие/ под ред. Л. Г. Гагариной.- М. : Ид ФОРУМ: ИНФРА-М, с.: 2. Робин Ноблес, Керри - Лэй Греди. Эффективный Web- сайт. Учебное пособие. М,: Издательство ТРИУМФ, с.: ил. Цель занятия: 1) ознакомиться с понятием web -дизайна; 2) изучить основы планирования сайта;

Web - страница - это текстовый файл, содержащий текст, оформленный с помощью языка разметки HTML, а также ссылки на графические файлы (иллюстрации) и гипертекстовые ссылки на другие web-страницы сайта HTML. Hyper Text Markup Language (язык разметки гипертекста) - язык, используемый для создания документов в Интернете. Файлы, содержащие гипертекстовый код, имеют расширение.htm или.html.

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

Сайт (буквально «место, сегмент, часть в сети») совокупность электронных документов (файлов) частного лица или организации в компьютерной сети, объединённых под одним адресом.электронных документов файлов компьютерной сети адресом Гиперссылка - базовый функциональный элемент html-документа, представляющий собой реализацию динамической связи какого-либо объекта данной web- страницы с контекстным содержимым другого документа. Браузеры. Для просмотра html-документов необходимо специальное программное обеспечение, предназначенное для динамической обработки кода НТМL и отображения web-страниц. Такие программы называются браузерами.

Сервер - это компьютер с установленным на нем специальным программным обеспечением, имеющий собственное доменное имя. Работа системы «клиент-сервер». Функция браузера (программы- клиента) состоит в том, чтобы запросить у сервера определенную страницу, получить ее и отобразить на экране пользователя. Поиск запрашиваемой страницы осуществляется в определенной директории, которая отведена на серверном компьютере под данный сайт.

Чтобы информация безошибочно могла передаваться с одного компьютера на другой, необходимо наличие уникальных адресов, с помощью которых можно однозначно определить (идентифицировать) получателя информации. Универсальный указатель ресурса или URL (Universal Resource Locator) включает в себя: протокол доступа к документу, доменное имя или IP-адрес сервера, на котором находится документ, а также путь к файлу и имя файла: protocol://domain_name/path/file_name / site.server.com

Особенности проектирования сайтов. К особенностям проектирования сайтов можно отнести следующее: 1) избыток информации; 2) люди не читают web-страницы, а просматривают; 3) пользователи избегают медленно загружающихся сайтов; 4) люди плохо ориентируются в большом количестве информации; 5) ограниченность кратковременной памяти человека; 6) трудности чтения с экрана монитора.

Цель занятия: 1) изучить этапы разработки сайта и типовые виды сайтов; 2) познакомиться с принципами организации файловой структуры сайта Основные этапы разработки сайта 1) составление технического задания; 2) подготовка текстового содержания и иллюстраций; 3) разработка дизайна сайта; 4) кодирование и программирование; 5) тестирование сайта; 6) публикация и раскрутка сайта.

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

Структура страницы сайта Сверху находится шапка сайта, или header. Традиционно там располагается название сайта или картинка, а также какие-нибудь элементы навигации, например, ссылка На главную или Напишите нам. Обычно шапка это первое, что пользователи системы стремятся изменить в своем дизайне. Примеры нестандартных пользовательских шапок: Вторая традиционная часть страницы это подвал, или footer. Он расположен внизу страницы и обычно содержит сведения о создателе сайта, копирайт, год создания и т. д. Также часто в подвалах размещают счетчики статистики и рекламу. Стилистически подвал обычно перекликается с шапкой. Боковые колонки сайта обычно служат для меню, навигации, элементов поиска по сайту», опросов, рекламы и т. д. Такая колонка может располагаться либо справа или слева, либо с обеих сторон. Меню лучше всего располагать именно в боковых колонках или в строке под шапкой. Если вы его уберете в подвал, то часть пользователей может его просто не найти. Центральная колонка (или просто центр) отводится для основного содержимого сайта. Она самая широкая (2/3 экрана), чтобы было удобно просматривать и изучать информацию. В эту часть сайта нельзя добавлять яркие и пестрые подложки в таком случае глаза буду уставать, и изучать информацию будет просто некомфортно.

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

Регистрация в каталогах и поисковых системах. Размещение описания сайта в рассылках- обзорах Сети. Обмен ссылками с другими сайтами. Баннерная реклама. Написание собственных статей. Открытие собственной рассылки. Подбор ключевых слов Использование МЕТА-тегов

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

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

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

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

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

Цель занятия: 1)познакомиться с основными принципами построения композиции; Композиция - сочетание различных частей в одно целое в соответствии с определенной идеей При создании композиции необходимо определить: смысловой центр (основная идея произведения) ; изобразительный центр (точка внимания); логику композиции (порядок рассмотрения и восприятия композиции).

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

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

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

Цель занятия: l) познакомиться со шрифтовым дизайном; 2) узнать правила подбора шрифтов; Ни одна работа не обходится без шрифтовых заголовков, логотипов, надписей и это самая ответственная часть любого проекта. Большинство современных профессиональных шрифтов,созданных лучшими художниками на основе вековых традиций,могут подходить или не подходить к конкретному случаю. Поэтом у подбор оптимального шрифта и подгонка его по месту - не только важная часть любого проекта, но и хорошее упражнение для развития дизайнерского вкуса и чувства формы. Главное правило подбора шрифтов для дизайнерского проекта заключается в том, что композиция должна содержать минимальное количество шрифтов. Шрифты должны быть резко различными, контрастирующими и тем самым поддерживающим и друг друга.

Мультимедиа контент - информация, которая передается одновременно в разных формах: звук, анимированная компьютерная графика, видеоряд. Примеры такого контента - кино, презентации, компьютерные игры, мультимедийные Интернет-ресурсы. Основные составляющие:

Ø Текст (txt,doc)

Ø Аудио (mp3,wav)

Ø Изображения (jpg,png)

Ø Анимация (gif)

Ø Видео (mp4,mov)

Ø Интерактивность - участие пользователя в процессе

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

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

Ø RSS - формат, который позволяет легко транслировать контент и подписываться на него в интернете

Ø MP3 - формат аудиофайлов

Ø iPod - медиапроигрыватель от компании Apple.

Адам Карри - бывший виджей MTV, создал первый в мире подкаст Daily Source Code. Первый выпуск он записал у себя в машине, по дороге из Бельгии в Голландию. Само слово «подкаст» появилось от сочетания слов «iPod» и «broadcasting».

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

Скринкастинг - тип подкастинга, позволяющий передавать для широкой аудитории видеопоток с записью происходящего на компьютере пользователя.

Для создания скринкастов используют не web- или видеокамеры, а специальное ПО.

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

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

1) Службаэлектронных писем (mail.ru, Outlook, Gmail…)

2) Сервис видео- и аудиоконференций (Skype, ISQ…)

3) Система управления базами данных (MSAccess, 1C, FoxPro…)

4) Поисковая система (Яндекс, Google, Спутник…)

5) Видеохостинг (YouTube, Twitch…)

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

Мета-информация

Мета-информация - это информация о свойствах документа (страницы сайта) предназначенная для поисковых систем и используемая ими при индексации данной страницы.

Каталогизация

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

библиографическая обработка;

ввод данных или тиражирование каталожных карточек;

работа с каталогами: организация, ведение и редактирование каталогов.

Программы каталогизаторы

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

Тиражирование мультимедиа контента

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

Облачное хранилище данных

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

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

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

Что такое Embed

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

Функция Embed сервиса Storymap от Knight Lab

Благодаря embed, вы можете разместить у себя на странице:

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

Что такое Iframe

Если не вдаваться в технические подробности, для пользователя разницы между Iframe и embed нет. Она исключительно формальная: при помощи Iframe размещается html-конент (например, содержание другой веб-страницы), а embed встраивает внешнее веб-приложение. Поэтому в зависимости от особенностей контента для размещения веб-сервис может предложить вам код либо Iframe, либо embed. Слово embed стало нарицательным для любого встраиваемого контента - неважно, идет ли речь об embed, iframe, либо о других способах.

Как вставить Embed или Iframe в веб-страницу?

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

Переключение между режимами создания сообщений в популярных CMS

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

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

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

Наконец, есть сервисы — например, wiki-модули некоторых CMS, которые не предусматривают использование embed в принципе. Понять это можно по отсутствию переключения на html и соответствующих кнопок в панели визуального редактора.

Embed и копирайт

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

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

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

Окно для встраивания поста из Facebook

Таким образом, знание о том, что такое embed, очень важно для любого журналиста или блогера, потому как существенно расширяет его возможности.

Недостатки Embed

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

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

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

В-третьих, встроенный контент может быть заблокирован и на уровне пользовательского устройства — например, на отображении некоторых элементов сказывается использование в браузере плагинов Ad Block или выключенные Flash Player или Java Script. Не всегда гармонично смотрятся некоторые embed-элементы также на экранах мобильных устройств.

Самый простой вариант