Критерии оценки информационных интернет-ресурсов

Информационные ресурсы
Интернет-ресурсы
Всю информацию, все свои знания люди
постепенно переносят в интернет.
Благодаря принципу открытости, на котором
построен интернет, его ресурсы (от франц.
ressources – запасы, источники, средства)
постоянно обновляются и пополняются.
Информационные ресурсы в электронном виде
доступные через интернет называются
интернет-ресурсами.
Основные понятия
Веб-страница – совокупность информации,
передаваемой с помощью службы WWW и
отображаемой веб-клиентом (программой броузером).
Веб-сайт (англ. site) – набор из некоторого количества
вэб-страниц, связанных вместе единой темой, общим
оформлением и взаимными гипертекстовыми ссылками
(которые обычно физически хранятся на одном
компьютере – веб-узле).
Представление информации в
электронном виде
Виды электронной информации:
• текстовая;
• графическая;
• звуковая.
Типы электронной информации:
• статическая (неизменная);
• динамическая (изменяющаяся с течением времени);
• интерактивная (изменяющаяся при
взаимодействии).
Мультимедийная информация
Каждый из видов информации может
использоваться сам по себе, или
совместно с другими. Когда информация
одновременно представлена в
нескольких видах, то её называют
мультимедийной (от англ. multimedia –
многие средства).
Гипертекст
В гипертексте (от англ. hypertext – больше, чем текст)
делается попытка заменить линейное представление
материала, как это принято в обычных книгах,
нелинейным, более соответствующим процессу
мышления человека.
Основные принципы:
• свободное перемещение по тексту;
• необязательность сплошного чтения;
• использование перекрестных ссылок.
Идеология гипертекста подразумевает разделение
«содержания» и «представления» как двух
независимых аспектов информации.
Представление текстовой информации
Текстовые форматы позволяют представлять
алфавино-цифровую информацию.
Соответствие между символами текста и их
числовыми кодами задается кодовой таблицей
или кодировкой (англ. encoding).
Основные русскоязычные (Cyrillic) кодировки:
• Windows CP1251;
• KOI8-R;
• ISO8859-5;
• DOS.
Различия русскоязычных
кодировок
Пример текста, набранного в кодировке CP1251:
Текст сохранён в кодировке windows-1251.
Тот же текст при просмотре в кодировке KOI8-R:
рЕЙЯР ЯНУПЮМёМ Б ЙНДХПНБЙЕ windows-1251.
И в кодировке ISO8859-5:
вхъёт ёюхррэИэ т ъюфшрютъх windows-1251.
Размещение текстовой
информации в интернет
Для оформления документов, предназначенных
для размещения в интернете, используется
специальный язык, который называется HTML
(англ. HyperText Markup Language).
Документы HTML представляют собой обычные
ASCCI-файлы. Для их подготовки достаточно
простейшего текстового редактора (например,
Notepad).
Специализированные HTML-редакторы
Как правило используют технологию WYSIWYG (англ.
What You See Is What You Get – что видишь, то и
получаешь). К их достоинствам относятся:
• ускорение и упрощение процесса разработки;
• автоматизация многих рутинных операций;
• позволяют осуществлять быстрое макетирование;
• могут использоваться начинающими.
Недостатки:
• не создают «чистого» кода (добавляют «фирменные» или
избыточные элементы);
• могут автоматически изменять открываемый документ;
• полностью не избавляют от знания HTML, созданные в
них документы как правило требуют ручной доводки.
Некоторые современные
HTML-редакторы
• Macromedia Dreamweaver;
• Adobe GoLive;
• Microsoft FrontPage
Многие современные неспециализированные
программные продукты так же позволяют
сохранять документы в формате HTML.
Например Microsoft Word. Однако результат
как правило оставляет желать лучшего.
Представление графической
информации
В сети интернет используются следующие
основные графические форматы:
• GIF (Graphics Interchange Format);
• JPEG (Joint Photographic Expert Group);
• PNG (Portable Network Graphics).
Некоторые средства
подготовки графики
•
•
•
•
•
•
•
Adobe Photoshop;
Adobe ImageReady;
Macromedia Fireworks;
Adobe Illustrator;
Macromedia Freehand;
Corel Draw;
Xara X.
Интерактивные анимации
Flash – сложные мультимедийные
интерактивные иллюстрации,
интегрированные со звуковым
сопровождением.
VRML (Virtual Reality Modeling
Language) – средство описания сцен в
трехмерном виртуальном пространстве.
Основные звуковые форматы
•
•
•
•
WAV (англ. wave – волна);
MIDI (Musical Instrument Digital Interface);
MP3;
RealAudio.
Основные мультимедиа
форматы
•
•
•
•
AVI (Audio/Video Interleaved);
MOV (англ. movie – кино);
MPEG (Moving Picture Expert Group);
RealMedia.
Состав команды разработчиков
1.
2.
3.
4.
5.
6.
7.
Писатель.
Редактор.
Иллюстратор.
Дизайнер.
Верстальщик.
Веб-мастер.
Программист.
Организация файловой
структуры сайта
Правила назначения имен
файлов и папок сайта
• Cледует ограничиться цифрами и латинскими
буквами;
• Рекомендуется использовать только нижний
регистр;
• Имена должны быть короткими и интуитивно
понятными;
• Главная страница в большинстве случае
обязательно должна называться index.html
(index.htm).
Разметка документа в
формате HTML
Разметка осуществляется с помощью управляющих
конструкций, которые называются тегами (англ. tag –
ярлык, признак).
Каждый тег состоит из имени и необязательных
атрибутов.
Теги заключаются в угловые скобки < >. Содержимое
скобок никогда не выводится в окне броузера.
Контейнеры и автономные теги
Большинство тегов являются контейнерами (парными
тегами). У них имеется начальный (открывающий) и
конечный (закрывающий) теги.
<парный_тег>элемент документа</парный_тег>
Непарные теги используются для размещения отдельных
(автономных) элементов на странице.
<непарный_тег>
Атрибуты тегов
Атрибуты добавляются в тег для расширения или
модификации его действия.
<тег атрибут1=“значение” атрибут2=“значение”
атрибут3=“значение” ...>
Значения:
• могут быть чувствительны к регистру;
• имеют ограниченную длину в 1024 символа;
• должны заключаться в двойные или одинарные
кавычки (за исключением случаев, когда значение
состоит из одного слова или числа, только из букв (a-z),
цифр (0-9), и специальных символов (точка или дефис)).
Вложенные теги
В теги HTML могут помещаться другие HTMLтеги для осуществления воздействия нескольких
тегов на один элемент – вложение тегов.
<тег1>Пример использования
<тег2>вложенных</тег2> тегов.</тег1>
Теги не могут перекрываться! Неверно:
<тег1>Пример неверного использования
<тег2>вложенных</тег1> тегов.</тег2>
Информация, игнорируемая
броузерами
•
•
•
•
•
•
Разрывы строк;
Множественные пробелы;
Символы табуляции;
Множественные пустые теги абзаца;
Текст в комментариях (<!-- Комментарий -->);
Нераспознаваемые теги.
Рекомендации по стилю
написания HTML
• Следовать синтаксическим правилам
действующей спецификации W3C;
• Придерживаться соглашений по написанию кода,
для обеспечения удобства чтения кода документа;
• Избегать использования дополнительных и
избыточных тегов;
• Воздерживаться от использования
нерекомендованных тегов;
• Следить за длинной строк (рекомендуется 80
символов) для обеспечения удобства просмотра на
всех платформах.
Структура HTML-документа
Документ в формате HTML образуют три
основные части:
• строка, содержащая информацию о версии
HTML;
• заголовочная часть (определяется тегом
<head>);
• тело, непосредственно включающее
содержание документа (определяется тегом
<body> или <frameset>).
Пример простейшего
HTML-документа
<html>
<head>
<title>Простой документ</title>
</head>
<body text="#0000ff" bgcolor="#f0f0f0">
<h1>Пример простого документа</h1>
<hr>
<p>Проба пера.</p>
<p><img src="pict/book.gif" width="149" height="226"></p>
</body>
</html>
Результат отображения
документа в окне броузера
Задание цвета в HTML
Значения цвета задаются следующим образом:
#RRGGBB
где RR – шестнадцатеричное значение красной
компоненты цвета, GG – зеленой и BB – синей.
Все цвета веб-палитры (всего 216 цветов)
составлены из комбинаций следующих
шестнадцатеричных значений:
00, 33, 66, 99, СС, FF
Тег body
alink – задает цвет активной ссылки;
background – задает путь к графическому файлу,
который будет использован в качестве фона;
bgcolor – задает фоновый цвет документа;
link – задает цвет ссылок по-умолчанию;
text – задает цвет текста по-умолчанию;
vlink – задает цвет посещенных ссылок;
marginwidth, marginheight (только в Netscape,
leftmargin, topmargin для MSIE) – задает расстояние
в пикселах от левой и верхней границами окна
броузера соответственно и содержанием страницы.
Элементы уровня абзаца
<p> – обозначает место начала и окончания
абзаца.
<h1>…<h6> – обозначают заголовки
соответствующего уровня.
<div> – обозначает место начала и окончания
раздела в документе.
Все могут иметь атрибут align, задающий
выравнивание (значения left, right, center, justify).
<pre> – обозначает место начала и окончания.
<br> – добавляет переход на новую строку.
Тег a
Задает якорь, представляющий собой ссылку на другие
ресурсы или являющийся меткой внутри документа.
href – определяет адрес (URL) документа, на который
делается ссылка;
name – задает имя якоря;
title – задает название (описание) ссылки.
<a href=“link.html”>Ссылка</a>
<a href=“http://www.yandex.ru”>Ссылка</a>
<a name=“top”>Якорь</a>
<a href=“link.html#top”>Ссылка на якорь</a>
Тег img
src – обязательный атрибут указывает имя
графического файла;
width и height – определяют соответственно
ширину и высоту отображения в пикселах;
align – определяет способ выравнивания
изображения относительно текста;
alt – задает альтернативный текст;
border – задает толщину рамки (в пикселах) у
изображений, содержащихся в гиперссылках;
usemap – связывает навигационную карту с
изображением.