Internet Explorer критикуется за недостаточную поддержку веб-стандартов, устанавливаемых W3C. Это означает, что браузер отображает не то, что должен отобразить согласно стандарту W3C и поэтому может создавать проблемы веб-мастерам.
Также в тесте Acid3, созданном Web Standards Project, IE 8 набирал всего 20 баллов из возможных 100, в то время, как последние стабильные версии его основных конкурентов набирали от 94 баллов до максимума.
Mozilla Firefox– свободно распространяемый браузер, первая версия которого была
выпущена 9 ноября 2004 года.
После закрытия Netscape Communications проект Mozilla достался созданной тогда
Mozilla Foundation, соответственно Firefox является экспериментальным вариантом реализации исходников Netscape Navigator .
Долгое время был вторым по популярности браузером в мире, но сильно просел после появления Google Chrome.
Рыночная доля на январь 2014 года – около 20%.
В браузере используется свободный портируемый движок Gecko, созданный с учётом поддержки открытых стандартов.
В браузере изначально предлагались:
• вкладочный интерфейс,
• проверка орфографии,
• «живой» поиск по мере набора,
• менеджер закачек.
• система расширений.
Долгое время основной проблемой браузера было крайне неэффективна работа с оперативной памятью, однако на данный момент проблема решена.
Opera – веб-браузер и программный пакет для работы в интернете. Появился в 1994 году, стабильные версии – с 1995 года.
Рыночная доля составляет порядка 1%.
В России процент пользователей браузера гораздо выше. В 2012 году Опера занимала
первое место по популярности с 32% (с учетом Opera Mini).
Браузер был написан на языке программирования C++(движок Presto), обладал высокой скоростью работы (особенно обработка JavaScript) и наиболее точно поддерживал все основные веб-технологии.
Отличительными особенностями Operaдолгое время являлись:
• многостраничный интерфейс (была предложена система вкладок);
• возможность масштабирования отображаемых документов целиком;
• жесты мышью;
• поддержка виджетов и расширений;
• технология «Opera Turbo».
В начале 2013 года разработчики заявили о переводе Opera на движки WebKit в оболочке Chromium, имеющие открытый исходный код. Это значительно снизило популярность браузера у пользователей.
Google Chrome – браузер, созданный вкомпании Google
Первая стабильная версия для Windows вышла 11 декабря 2008 года и была
основана несколькими сотрудниками Mozilla FireFox.
Доля – 41% (1-е место на январь 2014 года)
В основе лежит движок Webkit (с апреля 2013 – Blink) для рендеринга веб-страниц и движок V8 для обработки JavaScript.
Изначально основной задачей создания браузера была максимальная интеграция со всеми сервисами Google.
Основные особенности:
• периодически загружает обновления из двух чёрных списков и предупреждает пользователя, когда тот пытается посетить вредоносный сайт;
• создаёт для каждой вкладки/дополнения отдельный процесс, чтобы очень сильно увеличивает стабильность;
• браузер поддерживает режим инкогнито (страницы, не появятся в истории браузера или истории поиска).
• поддерживает «омнибокс» - совмещенную строку адреса и поиска.
• Включает синхронизацию всего окружения браузера на основе пользовательского аккаунта в Google.
№12 Общая информация и краткая история веб-поиска
Поисковая система – программно-аппаратный комплекс с веб-интерфейсом, предоставляющий возможность поиска информации, которая размещается во всемирной паутине.
Основной программной частью поисковой системы является поисковая машина (поисковый движок) — комплекс программ, обеспечивающий полную функциональность
поисковой системы и обычно являющийся коммерческой тайной компании-разработчика поисковой системы.
Поисковые системы обычно состоят из 4-х компонент:
1. Поисковый агент, который перемещается по сети и собирает информацию.
2. База данных, которая содержит всю информацию, собираемую пауками.
3. Поисковая машина, реализующая алгоритм поиска заданной информации и выдачу результата.
4. Внешний интерфейс, который используются для взаимодействия между поисковой машиной и пользователем.
Самый первый поисковый инструмент интернета назывался Archie (название произошло от искаженного слова archive).
Он был создан в 1990 году Аланом Эмтаджем, студентом Монреальского Университета.
Программа скачивала списки файлов, расположенные на публичных анонимных FTP-сайтах, создавая базы данных имен файлов, по которым можно было производить поиск.
В 1993 студент Мэтью Грей разработал первого робота, который индексировал страницы интернета – WWW Wanderer.
Первоначально программа позволяла пересчитывать веб-сервера, измеряя масштабы веб-паутины.
Wanderer запускали ежемесячно в 1993-1995 гг.
Позже Wanderer был использован для получения адресов ресурсов при формировании первой базы данных веба, который был назван Wandex (по мотивам «index»).
В 1993 году шесть студентов Стэнфорда представили Excite.
Программа использовала статистический анализ слов в тексте, чтобы облегчить процесс поиска. В течение года Excite был усовершенствован и вышел онлайн в декабре 1995 года.
В 1999 году два аспиранта Стэнфордского университета, Сергей Брин и Ларри Пейджпришли к руководству Excite и предложили купить разработанный ими поисковик
Google за $1 млн, но получили отказ.
Это решение впоследствии называли одной из крупнейших ошибок, которые когда либо были сделаны в цифровой индустрии.
Google был запущен в 1997 году Сергеем Брином и Лари Пей-джем как часть исследовательского проекта Стэнфордского университета. При ранжировании результатов запроса Google учитывает количество внешних ссылок на ресурс, или цитируемость.
В сентябре 1997 года была официально анонсирована поисковая система Yandex, являющаяся самой популярной в русскоязычном вебе.
№15 Google: история, основные особенности.
Поисковая система Google была создана в результате реализации учебного проекта аспирантов Стэнфордского университета Ларри Пейджа и Сергея Брина.
В 1996 году они работали над поисковой системой BackRub, астраницы интернета поисковый робот BackRub начал индексировать в марте 1996 года.
Для преобразования собранных данных в уровень важности данной веб-страницы, Брин и Пейдж разработали алгоритм PageRank.
Он стал основной и наиболее эффективной особенностью системы поиска.
В 1998 году на основе BackRub была создана система Google.
Особенноси
1) Google'овский паук называется Googlebot. Через файл robots.txt можно запретить роботу Googlebot индексацию каких-либо из ваших страниц.
2) Объем проиндексированных документов у Google огромен, и вносить дополнительные изменения в ход индексации паука Google очень сложно. Поэтому нередко Googlebot быстрее сам находит ваш сайт, чем получает информацию из формы AddURL.
3) Технология PageRank основывается на количестве и "качестве" внешних ссылок на ваш сайт. Именно от нее в первую очередь зависит релевантность вашей страницы и, соответственно, положение вашей страницы в результатах поиска.
№16 Яндекс: история, основные особенности.
История Яндекса началась в конце 80-х — с разработки поисковых технологий в компании «Аркадия», которая затем вошла в состав CompTek. Разработчики создали несколько поисковых программ, в том числе Международный классификатор изобретений и поиск по Библии, который учитывал морфологию русского языка. Технология поиска получила название «Яndex».
Официальный день рождения поисковой системы Yandex.Ru – 23 сентября 1997. В этот день система была анонсирована на выставке Softool в Москве. Яндекс образца 1997 года учитывал морфологию русского языка, расстояние между словами и умел ранжировать документы в соответствии с их релевантностью заданному запросу.
Основными отличительными чертами Yandex.ru :
1. Проверка уникальности документов (исключение копий в разных
кодировках).
2. Учёт морфологии русского языка (в том числе и поиск по точной
словоформе).
3. Поиск с учётом расстояния (в том числе в пределах абзаца, точное
словосочетание).
4. Тщательно разработанный алгоритм оценки релевантности,
учитывающий не только количество слов запроса, найденных в
тексте, но и «контрастность» слова (его относительную частоту для
документа), расстояние между словами и положение слова.
Уделяет особое внимание тематическим ссылкам (нетематические внешние ссылки также имеют эффект, но в меньшей степени, чем у других поисковых систем). Индексация проходит медленнее, чем у Google, однако так же в приемлемые сроки. Понижает в рейтинге или исключает из индекса сайты, занимающиеся нетематическим ссылкообменом
Еще одна особенность Яндекс – различные результаты поиска в зависимости от регистра ключевых слов (т.е. «Слово» и «слово» дают разные результаты поиска).
№17 HTML: Общие сведения и история языка разметки.
В 1989 году в Европе, в стенах Европейского совета по ядерным исследованиям (CERN) родилась концепция Всемирной паутины.
Её предложил знаменитый британский учёный Тим Бернерс-Ли, он же в течение двух лет разработал протокол HTTP, язык HTML и идентификаторы URI (Uniform Resource Identifier).
HTML – «язык машин».
HTML является теговым языком, фактически - приложением SGML (стандартного обобщённого языка разметки).
Изначально SGML был разработан для совместного использования машинно-читаемых документов в крупных информационно-наполненных проектах.
Версии HTML:
HTML 1.0 — официально не существует;
HTML 2.0 — сентябрь 1995 года;
HTML 3.2 — январь 1997 года;
HTML 4.0 —декабрь 1997 года;
HTML 4.01 — декабрь 1999 года;
ISO HTML (HTML 4.01 Strict) — май 2000 года;
HTML 5 — в разработке (план — 2014 год).
При разработке различных компонентов технологии
(HTTP, HTML, URL и других) предполагалось, что
квалификация авторов информационных ресурсов и их
оснащенность средствами вычислительной техники
будут минимальными.
HTML (HyperText Markup Language)
• это не язык программирования, а язык разметки текста в виде структуры тегов;
• определяет содержание и структуру страницы, но не внешний вид; для внешнего вида есть CSS (Cascading Style Sheets);
• элементы языка имеют структуру дерева (вложенные элементы, уровень вложенности не ограничен);
• пробелы либо игнорируются, либо заменяются одним пробелом;
• узлы дерева представляют собой либо текст (содержание), либо «структурные элементы», маркируемые «тегами» и имеющие «атрибуты».
№18 HTML: Структура документа и основные разделы.
Любой гипертекстовый HTML-документ состоит из следующих
обязательных частей:
1. Версия HTML-документа (DOCTYPE);
2. Обозначение языка документа (HTML);
3. Заголовок документа (HEAD);
4. Тела документа (BODY).
Элемент <!DOCTYPE>
Предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу
Раздел <html></html>
Данный элемент является корневым – между его начальным и конечным тегам должна находиться вся веб-страница.
Основное назначение этого элемента – вложение элементовhead, body, frameset и других, определяющих общую структуру веб-страницы.
Конечным тегом </html> заканчиваются все документы.
Раздел <head></head>
Область заголовка веб-страницы, ее первая часть, служит только для формирования общей структуры документа.
Этот элемент может иметь атрибуты lang и dir, долженвключать элемент title и допускает вложение элементовbase, meta, link, object, script, style.
Раздел <body></body>
Данный элемент заключает в себе гипертекст, который определяет собственно содержание веб-страницы.
Внутри элемента body можно использовать все элементы, предназначенные для дизайна веб-страницы.
Внутри начального тега элемента body можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком.
№19 HTML: Особенности и свойства разделов документа
<title></title>
Элемент для размещения заголовка веб-страницы. Строка текста, расположенная внутри этого элемента, отображается не в документе, а в заголовке окна браузера.
Эта строка часто используется при организации поиска. Поэтому эта строка должна, не будучи слишком длинной, достаточно точно отражать суть документа.
<style></style>
Описание стиля элементов веб-страницы.
Необходимо отметить, что для каждого элемента существует стилевое оформление по умолчанию
Поэтому употребление элемента style не обязательно, но желательно.
<link>
Элемент описывает взаимосвязь документа с другими документами на сайте, указывая его место в иерархической структуре сайта.
Элемент не имеет конечного тега.
В заголовке может содержаться несколько элементов link.
<meta>
Этот элемент содержит служебную информацию, которая не отражается при просмотре веб-страницы. Внутри него нет текста, который бы отображался на странице.
Каждый элемент meta содержит два основных атрибута:
1) name или http-equiv (категория параметра);
2) content (содержание параметра).
Атрибут name используется для получения дополнительной информации о веб-страницах и их упорядочения.
Этот атрибут часто заменяют атрибутом http-equiv.
Он используется для создания дополнительных полей при выполнении запроса.
align – выравнивает изображение к одной из сторон документа (left, right, center; bottom, top, middle)
border – устанавливает толщину рамки;
vspace – устанавливает поля сверху и снизу;
hspace – устанавливает поля с боков;
name – имя изображения для доступа из Java-сценариев;
alt – определяет текст, отображаемый браузером на месте изображения, если невозможно загрузить файл.
Тег <hr> рисует горизонтальную линию, которая по своему виду зависит от используемых параметров.
Является блочным элементом, начинается с новой строки, все последующие элементы отображаются на следующей строке.
Параметры
size – устанавливает толщину линии;
width – устанавливает ширину линии;
noshade – создает линию без тени;
color – задает цвет линии
Гиперссылки
Тег <a> является одним из самых важных в HTML разметке и выполняет две основные функции:
Создает гиперссылку (атрибут href), которая указывает на другой документ.
Создает якорь (атрибут name), на который могут ссылаться другие документы.
Параметры
href – указывает URL, на который указывает ссылка; вариант <a href="mailto: EMAIL"></a> создает ссылку для написания письма по указанному
адресу.
target – указывает, в каком окне открывать ссылку, значения:
_blank – открытие документа в новом окне;
_parent – открытие документа в родительском фрейме;
_self – открытие документа в текущем фрейме;
_top – открытие документа в текущем окне
name – отмечает метку для ссылок на странице; в дальнейшем можно будет перейти на нее с текущей страницы (<a name=’link’> </a>) или с другого адреса (<a href=’URL#link’></a>)
title – название элемента (во всплывающей подсказке).
№21 HTML: Форматирование текста и списки.
<p></p> – создает новый параграф. Каждый абзац текста должен быть заключен в свою пару тегов <p></p>.
Параметр align задает выравнивание относительно одной из сторон документа, значения: left, right, justifyили center .
<br> – добавляет перевод строки
<nobr> – запрещает перевод строки
<wbr> – указывает, где разбивать строку для переноса
При изменении ширины окна текст будет переноситься в тех местах, где указан тег <wbr>, и не будет – где указан <nobr>.
<h1></h1> … <h6></h6> - шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка.
Тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> - заголовок шестого уровня и является наименее значительным.
<cite></cite> – выделение цитат курсивом
<em></em> – наклонный текст, воспринимается поисковыми роботами как обычное выделение
<strong></strong> – жирный текст, воспринимается поисковыми роботами, как особо сильное выделение
Тег <q> предназначен для выделения цитат в тексте. Содержимое тега отображается браузером в кавычках.
Тег <pre> определяет блок предварительно форматированного текста. Такой текст отображается со всем форматированием, которое зафиксировано в HTML-файле.
Тег <div> является блочным элементом и предназначен для выделения фрагмента с целью изменения вида содержимого.
Часто стиль выделяется во внешнюю таблицу стилей, а для тега добавляется атрибут class или id с именем селектора
Тег <span> предназначен для выделения строчных элементов.
В отличие от блочных элементов, с помощью тега <span> можно выделить информацию внутри других тегов и установить для нее свой стиль – прямо на месте или с помощью ссылок на внешнюю стилевую таблицу.
Тег <ol> (ordered list) задает нумерованный список. Каждый элемент списка должен начинаться с тега <li>.
Параметры:
type – устанавливает вид маркера списка.
• A/а – буквы (заглавные или строчные);
• I/i – римские цифры;
• 1 – арабские цифры.
reversed – нумерация элементов по убыванию.
start – с чего начинать нумерацию
Тег <ul> (unordered list) задает ненумерованный список. Каждый элемент списка должен начинаться с тега <li>.
Параметры:
type – устанавливает вид маркера:
square – квадрат;
round – окружность;
disk – круг (по умолчанию).
№22 HTML: Таблицы
<table></table> - создает таблицу, служит контейнером для
элементов, определяющих содержимое таблицы
Параметры:
align – определяет выравнивание таблицы.
background – задает фоновый рисунок.
bgcolor – цвет фона таблицы.
border – задает толщину рамки таблицы;
cellspacing – задает расстояние между ячейками;
cellpadding – задает расстояние между содержимым ячейки и ее рамкой;
width – устанавливает ширину таблицы в пикселах или процентах;
height – устанавливает высоту таблицы в пикселах или процентах от высоты документа
Тег <tr> </tr> является контейнером для строки таблицы.
Каждая ячейка в пределах такой строки может задаваться с помощью тега <th> или <td>.
Параметры:
align определяет выравнивание содержимого ячеек по горизонтали.
bgcolor – цвет фона ячеек.
bordercolor – цвет рамки.
valign – выравнивание содержимого ячеек по вертикали
Тег <tr> не должен содержать контента, он может быть только контейнером для тегов ячеек
<td></td> – определяет отдельную ячейку в таблице.
Параметры:
align –выравнивание ячеек в таблице (left, center ,right);
colspan – указывает количество столбцов, которое объединено в одной ячейке;
rowspan – указывает количество строк, которое объединено в одной ячейке;
width – устанавливает ширину ячейки (px или %) от ширины таблицы;
height – устанавливает высоту ячейки (px или %) от высоты таблицы.
Тег <th> </th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная.
Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру.
Все параметры аналогичны параметрам простой ячейки.
Тег <caption></caption> предназначен для создания заголовка к таблице и может размещаться только внутри контейнера <table> сразу после открывающего тега.
Такой заголовок представляет собой текст, отображаемый перед таблицей и описывающий ее содержание. Индексируется поисковиками!
№23 СSS: общие сведения
CSS (Cascading Style Sheets) – это язык стилей, определяющий отображение HTML-документов. CSS работает с шрифтами, цветом, полями, высотой, шириной, фоном, позиционированием элементов.
HTML – разметка и структурирования содержимого.
CSS – используется для форматирования и оформления.
Основные преимущества:
• управление отображением множества документов с помощью единой таблицы стилей;
• эффективный контроль над внешним видом страниц;
• различные представления для разных носителей информации (экран, печать).
Таблица стилей состоит из набора правил.
Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделённых запятыми, и блока определений.
Блок определений обрамляется фигурными скобками, состоит из набора свойств и их значений.
Методы определения таблицы стилей:
1. Встраивание (inline) - используется атрибут styleдля HTML- тегов в разделе <body>.
2. Вложение (embeding) - информация о стиле указывается в элементе STYLE раздела <head>.
3. Связывание (linking) - таблица стилей, размещенная во внешнем файле.
№24 СSS: основы синтаксиса.
По сути, CSS-документ – это просто набор стилей, свойств, которые являются характеристиками отдельных стилей и их значений.
Недаром CSS расшифровывается как каскадные ТАБЛИЦЫ стилей т.к. данные здесь располагаются в виде, который можно свести в таблицу.
Выглядит это примерно так:
Элемент, который нужно оформить (селектор) {
Свойство1 : значение1;
Свойство2 : значение2;
Селектор – определяемый элемент
Свойство – изменяемый атрибут
Значение – присваиваемое атрибуту значение
№ 25 СSS: цвет и фон
название цвета (red, green, white...)
• #00cc00 - шестнадцатиричное представление
• #0c0 - сокращенное шестнадцатиричное представление
Все структурные элементы в представлении логики CSS является блоками, то есть каждый HTML-элемент окружён блоком.
Свойства блока настраиваются с помощью CSS-свойств.
В соответствии с блочном моделью контент окружен
1. полем (padding); внутри
2. рамкой (border);
3. отступом (margin).снаружи
Поля (padding) задают внутреннее расстояние между рамкой и содержимым элемента.
Поля могут задаваться как отдельно для каждой из сторон (padding-top, padding-right, padding-bottom, padding-left), так и общим единым свойством padding
Отступы (margin) устанавливают расстояния от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента
Рамка (border) – обрамляет элемент и может служить как для отделения двух объектов, так и в качестве декоративного элемента.
Cвойства:
border-width – толщина рамки, значения thin, medium и thick, или числовое значение в пикселах;
Если рамка не задана, то скругление также происходит и с фоном
Разрешается использовать одно, два, три или четыре значения
1 Одно значение для всех четырех углов.
2 Первое значение — для верхнего левого и нижнего правого угла, второе значение — верхнего правого и нижнего левого уголка.
3 Первое значение — для верхнего левого уголка, второе —для верхнего правого + нижнего левого, а третье —для нижнего правого угла.
4 По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого угла.
№ 29 СSS: позиционирование элементов.
Основной принцип позиционирования в CSS заключается в том, что любой элемент может быть расположен где угодно.
Позиционирование в CSS – это намного проще, чем использовать таблицы, прозрачные изображения или какие-то другие подходы.
Различают такие способы позиционирования в CSS в зависимости от значения свойства position:
• static – значение по умолчанию;
• relative – относительное позиционирование;
• absolute – абсолютное позиционирование;
• fixed – позиционирование относительно окна браузера.
position: absolute
Элемент, размещенный абсолютным способом, не получает никакого пространства к документе, то есть после позиционирования он не оставляет после себя пустое пространство.
Фактически, элементы с абсолютным позиционированием как бы вырваны из структуры страницы. На элемент с таким типом позиционирования не влияют другие элементы, и он также не влияет на них.
Для абсолютного позиционирования свойства left, right, top и bottom задают отступы со всех сторон.
CSS также поддерживает многослойность.
Порядок перекрытия элементов друг другом реализуется с помощью свойства «z-index».
Элемент с большим значением этого свойства перекрывает элемент с меньшим номером.
position: relative
Позиция элемента, размещаемого относительно, рассчитывается относительно его оригинальной позиции в документе.
Задание параметров left, right, top и bottom указывает на отступы от соседнего (предыдущего) элемента.
Особенности:
1. Относительное позиционирование также допускает использование z-index, чаще всего – при сочетании абсолютно и относительно расположенных элементов.
2. Все дочерние элементы относительно позиционированного элемента могут быть позиционированы абсолютно.
№30 Растровая и векторная графика.
Растровое изображение представляет собой матрицу пикселей (элементарных точек), каждый из которых имеет свой цвет.
Данный тип изображений является наиболее популярным и используется повсеместно для представления данных фотографического качества.
Векторное изображение хранит информацию об изображении в виде набора графических примитивов (линии, точки, кривые, окружности, многоугольники).
В компьютерной среде векторная картинка может быть отображена (на мониторе, принтере) лишь при помощи преобразования в растровое изображение.
№31 Основные характеристики растровой графики.
Основные достоинства растровой графики:
1. Простота отображения, считывания и фиксации (монитор, принтер, сканер, фотоаппарат). Вся обработка выполняется «пиксель в пиксель».
2. Распространенность, простота использования, создания и обработки.
3. Представление картинок любой степени сложности.
4. Высокая скорость отображения (использование в маломощных или встроенных системах).
Недостатки растровой графики:
1. Большой размер файла, который не зависит от смысловой сложности изображения.
Разрешение – произведение ширины картинки на высоту.
Задается в виде пары «ширина-высота» или общим числом пикселей (мега-, гигапиксели).
При печати – чем выше разрешение, тем больше точек на той же площади и тем выше детализация изображения.
Большинство форматов графических файлов хранят данные о разрешении в dpi (dots per inch, точек на дюйм).
Цветовая модель – способ представления цвета.
RGB (Red, Green, Blue) – аддитивная цветовая модель, которая описывает смешения цветовых компонент для получения цвета.
CMYK (Cyan, Magenta, Yellow , Keycolor) – субтрактивная схема формирования цвета, обладает сравнительно (с RGB) небольшим цветовым охватом
YCbCr (YUV) — цвет представляется как 3 компоненты: яркость (Y) и две цветоразностных (U и V).
Яркостная компонента содержит изображение в оттенках серого, а оставшиеся две компоненты содержат информацию для восстановления требуемого цвета.
Глубина цвета – количество используемых цветов.
Если N – количество цветов, а M – глубина цвета, то они
связаны между собой зависимостью N = 2м
№32 Основные растровые форматы и их назначение.
Все растровые форматы хранятся в сжатом виде.
Сжатие обеспечивает уменьшение объема, занимаемого файлами на носителях информации, а также уменьшении трафика при передаче данных (что важно с точки зрения использования формата в интернете) .
Сжатие может быть выполнено
• без потерь (BMP, GIF, PNG);
• с потерями (JPEG).
BMP (BitmapPicture) – наиболее простой формат
хранения растровых изображений. Его поддержка
интегрирована во все операционные системы.
RLE (Run-Lengthen Сoding, кодирование повторов) –
простейший алгоритм сжатия данных, который оперирует
JPEG (Joint Photographic Experts Group) – наиболее
популярный современный графический формат,
применяемый для хранения изображений.
№33 GIF: описание, назначение и основные особенности
GIF (Graphics Interchange Format) – распространенный формат графических изображений. Способен хранить сжатые данные без потери качества в формате не более 256 цветов.
• Формат GIF был разработан в 1987 году (GIF87a) фирмой CompuServe специально для передачи растровых изображений по сетям.
• В 1989-м формат был модифицирован (GIF89a), были добавлены поддержка прозрачности и анимации.
• GIF использует LZW-компрессию, что позволяет сжимать файлы, в которых много однородных областей (схемы, чертежи).
Изображение в формате GIF хранится построчно, файл также включает палитру с индексированными цветами. Один из цветов в палитре может быть «прозрачным». В этом случае в программах, которые поддерживают прозрачность GIF (прежде всего, браузеры) сквозь пиксели, окрашенные «прозрачным» цветом виден фон. Полупрозрачность пикселей (технология альфа-канала) не поддерживается.
Формат GIF поддерживает анимационные изображения. Каждый анимированный файл содержит серию из нескольких кадров, а также информацию о том, сколько времени каждый кадр должен быть показан на экране.
№34 PNG: описание, назначение и основные особенности.
PNG (portable network graphics) – растровый формат хранения графической информации, использующий сжатие без потерь по алгоритму Deflate.
• Разработка формата была начата в 1996 году как замена проприетарному и более простому формату GIF. Окончательный стандарт принят в 2004.
• Изначально предназначался для использования в интернете и хранения бизнес-графики.
• В формате реализован алгоритм сжатия растровых изображений без потерь DEFLATE.
PNG поддерживает три основных типа изображений:
1. Полноцветное изображение.
2. Полутоновое изображение.
3. Цветное индексированное изображение (палитра).
Основные преимущества:
1. Неограниченное количество цветов (зависит от типа представления изображения).
2. Поддержка альфа-канала (для полноцветных и одноканальных изображений)
3. Возможность гамма-коррекции (для сохранения кросплатформенной идентичности цвета).
4. Двумерная чересстрочная развёртка (может быть использована при отображении файла.)
5. Поддержка дополнительных расширений(например, анимации).
Формат PNG обладает более высокой степенью сжатия для файлов с большим количеством цветов, чем GIF, разница составляет до 25 %.
Различные реализации алгоритма Deflate дают разную степень сжатия. Встроенная поддержка анимации отсутствует, этот недостаток исправляется форматом MNG, который появился в 1999 г., но распространения не получил.
№35 JPEG: описание, назначение и основные особенности.
JPEG (Joint Photographic Experts Group) – наиболее популярный современный графический формат, применяемый для хранения изображений. Алгоритм JPEG позволяет сжимать изображение с потерями и без потерь (режим lossless JPEG).
JPEG подходит для сжатия фотографий и изображений с плавными переходами яркости и цвета.
JPEG не подходит для чертежей и графики с резкими контрастными переходами (появляются артефакты).
Нельзя применять при многоступенчатой обработке.
Основная сфера применения – цифровая фотография, передача изображений и интернет.
При сжатии изображение преобразуется из цветового пространства RGB в YCbCr (YUV).
Далее для каналов изображения Cb и Cr выполняется «прореживание», которое заключается в том, что каждому блоку из 4 пикселов (2х2) яркостного канала Y ставятся в соответствие усреднённые значения Cb и Cr.
Далее компоненты Y, Cb и Cr разбиваются на блоки 8х8 пикселов. Каждый такой блок подвергается дискретному косинусному преобразованию (ДКП).
Полученные коэффициенты ДКП квантуются (используются разные матрицы квантования для Y, Cb и Cr) и упаковываются с использованием кодов Хаффмана.
При сохранении изображения в JPEG-файле указывается параметр качества, задаваемый в некоторых условных единицах, например, от 1 до 100 (или от 1 до 12).
Даже при использовании наивысшего качества (матрице квантования состоит из одних единиц) восстановленное изображение не будет в точности совпадать с исходным.
№36 Основные векторные графические форматы
EPS (Encapsulated PostScript) – расширение формата PostScript, позволяющее использовать его как графический.
Формат EPS был создан компанией Adobe на основе языка PostScript и послужил базой для создания ранних версий формата Adobe Illustrator.
SVG (Scalable Vector Graphics) – язык разметки масштабируемой векторной графики, входящий в подмножество расширяемого языка разметки XML.
Предназначен для описания двумерной векторной графики в формате XML, поддерживает анимацию, является открытым стандартом.
PDF (Portable Document Format ) – разработан фирмой Adobe в 1993 г. как независимый от платформы формат для создания электронной документации, презентаций, передачи верстки и графики через сети.
DJVU – разработан фирмой AT&T (США) для размещения в интернете отсканированных изображений (книги, рукописи, географические карты и многое другое).
№37 SVG: описание, назначение и основные особенности.
SVG (Scalable Vector Graphics) – язык разметки масштабируемой векторной графики, входящий в подмножество расширяемого языка разметки XML.
Предназначен для описания двумерной векторной графики в формате XML, поддерживает анимацию, является открытым стандартом.
Фактически, это обыкновенный текстовый файл формата XML, содержащий описание всех элементов, из которых состоит картинка.
Основные особенности:
• с помощью путей позволяет задать любую фигуру одной строкой, которая описывает путь от начальной точки до конечной через любые промежуточные;
• базовые теги для описания основных геометрических фигур (прямоугольники, окружности и другие);
• свойства, которые применяются к фигурам (прозрачность, заливка);
• на каждый отдельный элемент и на целое изображение можно повесить обработчик событий (пользователь может управлять рисунком).
Основные преимущества:
1. Текстовый формат (можно редактировать при помощи любых текстовых редакторов).
2. SVG-файлы меньше по размеру, чем сравнимые по качеству изображения в форматах JPEG или GIF, а также хорошо поддаются сжатию.
3. К элементам SVG-документа можно применять фильтры для создания эффектов (размытие, выдавливание, трансформация).
4. Возможность вставлять элементы с изображениями в форматах PNG, GIF или JPG.
5. Текст является текстом, его можно копировать, он индексируется поисковыми машинами.
6. Применение скриптов и анимации в SVG позволяет создавать интерактивную графику. Также реализована событийная модель.
7. Открытость стандарта.
8. Простая интеграция с HTML. Внешний SVG подключаются через тег <object>.
9. Совместимость с CSS. Отображением SVG-элементов можно управлять с помощью таблицы стилей CSS 2.0.
10. Интернационализация (поддержка Юникода).
№38 PDF и DJVU: описание, назначение и основные особенности.
PDF (Portable Document Format ) – разработан фирмой Adobe в 1993 г. как независимый от платформы формат для создания электронной документации, презентаций, передачи верстки и графики через сети.
C 2008 года PDF является открытым стандартом ISO.
PDF-файл является комбинацией текста с растровой и векторной графикой. Объём двух одинаково выглядящих на экране PDF-документов могут значительно отличаться.
Основные преимущества современной версии:
1. Кроссплатформенный стандарт. Документ выглядит точно таким же, каким он был создан вне зависимости от исходной платформы.
2. Компактность. PDF поддерживает большое количество алгоритмов компрессии данных.
3. Мультимедийность. PDF-файлы могут содержать как видео- и/или звуковые ролики, так и гипертекстовые элементы и превью страниц.
4. Безопасность. При необходимости, файл может быть открыт только после ввода пароля. Также возможно запретить изменение файла и/или его печать.
Основные недостатки:
1. PDF пытается стать всеохватывающим стандартом, что не позволяет ему быть настолько эффективным, как специализированные решения. Его можно использовать в интернете, но HTML-файлы более эффективны. Можно использовать для обмена графикой, но большинство препресс-приложений используют форматы EPS и TIFF.
2. PDF нацелен прежде всего на визуализацию документов. Он не сохраняет их логическую структуру.
3. PDF-файлы сложно редактировать. Небольшие изменения могут быть внесены, но сложно добавлять блоки текста или изображения.
Международная Организация по Стандартам (ISO) утвердила формат PDF (Portable Document Format) версии 1.7 в качестве международного стандарта ISO 32000-1. Голосование по принятию PDF в качестве ISO стандарта состоялось в декабре 2007 года.
DJVU – разработан фирмой AT&T (США) для размещения в интернете отсканированных изображений (книги, рукописи, географические карты и многое другое).
Основная особенность - чрезвычайная компактность при хранении изображений в высоком разрешении (300 DPI и выше).
Типичные значения результатов сжатия:
• 40-70 Кбайт для типичной полноцветной журнальной страницы (тогда как в JPEG - около 500 Кб);
Алгоритмы распаковки позволяют показать часть изображения, не разворачивая всю картинку в оперативной памяти, а также легко масштабировать изображение.
Инкрементальное восстановление изображения – при просмотре через Интернет вначале выводится только текст, затем фон в низком разрешении и только потом фон в высоком разрешении. Это позволяет быстро оценить документ, не скачивая его полностью.
Функция отдельного просмотра фона использует алгоритм «маскировки», который восстанавливает те части фона, которые были закрыты текстом.
№39 Анимация в веб: GIF-анимация
Наиболее простой анимацией для веба является анимированный GIF-файл.
особенности
1. Процедура размещения GIF-анимации в вебе ничем не отличается от размещения обычного изображения.
2. Не требуется никаких дополнительных плагинов или надстроек для просмотра.
3. За счет сжатия при создании GIF-анимации в итоге получается файл достаточно небольшого объема.
4. После однократной загрузки анимация помещается в кэш (как и все изображения). Повторного обращения к серверу при повторном проигрывании не требуется.
Методика подготовки динамических иллюстраций
1. Выбирается базовое статическое изображение и/или сюжет анимации (для этого может использоваться поиск изображений в интернете).
2. Разрабатывается сценарий анимации и последовательность отдельных кадров (мин 3-5), для чего можно использовать свободно распространяемую программу PhotoFiltre, стандартный графический редактор Paint.NET или любая графическая программа.
3. С помощью специальной программы последовательность кадров объединяется в единое динамическое изображение. Для этого может использоваться свободно распространяемая
программа MP GIF Animator или аналогичная.
4.Полученная анимация оптимизируется (в том числе минимизируется по объему) путем подбора наилучшего сочетания параметров и доработки отдельных кадров.
№40 Анимация в веб: технология Flash.
Adobe Flash (Macromedia Flash) – мультимедийная платформа компании Adobe для создания веб-приложений или мультимедийных презентаций.
Широко используется для создания рекламных баннеров, анимации, игр, а также воспроизведения на веб-страницах видео- и аудиозаписей.
Adobe Flash позволяет работать с векторной, растровой и трехмерной графикой (с ограничениями), а также поддерживает потоковую трансляцию аудио и видео.
Технологически Flash Player представляет собой виртуальную машину, на которой выполняется загруженный код flash-программы.
Это позволяет делать исполняемый код одинаковым для разных устройств и платформ.
Стандартным расширением для скомпилированных flash-файлов является .SWF (Shockwave Flash).
Видеоролики в формате Flash представляют собой файлы с расширением FLV, при этом Flash используется только как контейнер для видеозаписи.
В основе анимации лежит векторный морфинг, то есть плавное «перетекание» одного ключевого кадра в другой. Это позволяет создавать сложные сцены, задавая лишь базовые ключевые кадры.
Основные преимущества:
1. Простота и достаточно низкий уровень вхождения.
2. Мощнейшая среда разработки.
3. Большой набор библиотек и движков.
4. Встроенный язык программирования ActionScript.
5. Поддержка аппаратного ускорения (но не на всех платформах).
6. Интерактивность.
Основные недостатки:
1. Чрезмерная нагрузка на центральный процессор, связанная с неэффективностью виртуальной машины Flash Player .
2. Недостаточный контроль ошибок, что приводит к частым отказам как самих приложений, так и всего браузера.
3. Текстовая информация внутри Flash-анимации не индексируется полностью.
4. Проблемы с безопасностью.
№41 Интернет-видео: история, основные ресурсы, будущее.
Проект был основан в феврале 2005 года тремя бывшими работниками PayPal в Сан-Бруно, Калифорния.
В основе лежит технология Flash Video (flv), позволяющая получить относительно хорошее качество записи при небольшом объёме передаваемых данных.
Проект стал хорошим средством развлечения и опередил по популярности социальную сеть MySpace.
В ноябре 2006 года была завершена покупка YouTube компанией Google за $ 1,65 млрд.
YouTube начинался как сайт видео знакомств под названием "Настройтесь на союз". Идея возникла под влиянием популярнейшего HotorNot.
Но потом концепцию решили поменять, дабы не проиграть конкуренцию изначально.
YouTube это:
Социальная составляющая - отзывы, комментарии, каналы и подписки (в том числе и платные с 2014 года).
Революция в шоу-бизнесе и способах распространения контента
Крупнейшая рекламная площадка
№42. Веб 1.0: основные особенности.
Веб 1.0 – интернет-среда до 2000 года (до глобального кризиса доткомов).
Фактически, на этом этапе веб – всего лишь только «супербиблиотека» со специально подготовленным контентом.
Пользователи выступают только потребителями контента, типичный сайт – «только для чтения». Эпоха домашних страниц, гостевых книг и форумов.
Типичные особенности сайтов веб 1.0:
1. Ручное обновление информации, полная статичность страниц, их явная обособленность
друг от друга.
2. Повсеместное, часто полностью необоснованное использование фреймов.
3. Интерактивность – почти отсутствует, только в гостевых книгах, форумах и чатах.
Типичные особенности сайтов веб 1.0:
4. «Любительское» отношение к дизайну, ориентированность дизайна на конкретное разрешение экрана, избыточное использование анимации, злоупотребление JavaScript'ом.
5. Проблемы с кодировками в Рунете.
6. Полное пренебрежение применением CSS, неправильная теговая разметка.
7. Частичная поддержка браузеров, ориентированность на какой-то один браузер
Во многом недостатки сайтов веб 1.0 обуславливались очень медленным интернет-подключением у подавляющего большинства пользователей.
Также важной причиной можно назвать общую компьютерную неграмотность создателей домашних страниц и гостевых книг.
№43 Веб 2.0: основные особенности.
Веб 2.0 – эпоха развития интернет-среды, главной характеристикой которой является интенсивное вовлечение конечного пользователя в совершенствование и наполнение сайтов.
Веб 2.0 не является технологией или каким-то особым стилем дизайна, фактически – это лишь подход к организации, реализации и поддержке сайтов.
Девиз веб 2.0 – «пользователи для пользователей».
Основные тренды веб 2.0
• блоги и площадки для них;
• хранилища изображений и мультимедиа;
• социальные сети;
• вики-движки;
• веб-службы;
• геосервисы;
• подкасты;
• метки как способ структурирования информации.
№ 44 Веб 2.0: основные технологии
Блог (WebLog) – веб-сайт, основным содержимым которого являются регулярно добавляемые записи, содержащие текст, изображения или мультимедиа.
Все записи располагаются строго в хронологическом порядке. Для блогов характерна возможность публикации комментариев посетителями.
Хранилище мультимедиа – сервис для хранения и дальнейшего использования и обменами пользователями цифровых фотографий, аудио- и видеороликов.
Социальная сеть – интерактивный веб-сайт, контент которого наполняется самими участниками сети, которые объединены общим интересом .
Вики – веб-сайт, структуру и содержимое которого пользователи могут самостоятельно изменять с помощью встроенных в сайт инструментов.
На базе этой технологии построена Википедия и другие аналогичные проекты.
Геосервисы - службы, основанные на использовании картографических данных для разных целей.
Являются ярким примером «смешанных» веб-служб, которые полностью или частично использует в качестве источников информации другие сервисы, предоставляя пользователю новую функциональность.
Подкасты – звуковые или видео передачи в вебе. Обычно они имеют определенную тематику и периодичность новых выпусков.
Для прослушивания (просмотра) подкастов создано множество программ, которые следят за обновлениями и автоматически загружают обновления.
RSS – семейство XML-форматов, предназначенных для описания лент новостей, анонсов, обновлений блогов.
Информация в формате RSS может быть собрана из различных источников, обработана и представлена пользователю в виде ленты.
BitTorrent – пиринговый (одноранговый) сетевой протокол для кооперативного обмена файлами через интернет.
Метки (теги) – ключевые слова, описывающие рассматриваемый объект, либо относящие его к какой-либо категории.
№45 Веб 3.0: семантическая паутина
Семанти́ческая паути́на (англ. Semantic Web) — это направление развития Всемирной паутины, целью которого является представление информации в виде, пригодном для машинной обработки.
Одной из трактовок термина Web 3.0 является соотнесение его с семантической паутиной. Главная мысль этой концепции базируется на внедрении метаязыка, описывающего содержание сайтов для организации автоматического обмена между серверами. Описательные механизмы семантической паутины действительно разработаны (RDF, DAML, OIL, OWL), однако на этапе обработки и вывода информации появляется ряд проблем:
-появляется необходимость дополнительных затрат для создания семантической версии каждого сайта, что делает технологию значительно менее доступной;
-отсутствие гарантии адекватного описания веб-мастерами собственных ресурсов (аналогично с историей использования тега «keywords»);
-невозможность принятия единого формата описания свойств ресурсов в условиях существующей конкуренции из-за корпоративно-рекламной политики создателей ресурса и наличия широкого поля для манипуляций описательными механизмами.
В обычной Паутине, основанной на HTML-страницах, информация заложена в тексте страниц и извлекается человеком с помощью браузера. Семантическая же паутина предполагает запись информации в виде семантической сети с помощью онтологий. Таким образом программа-клиент может непосредственно извлекать из паутины факты и делать из них логические заключения. Семантическая паутина работает параллельно с обычной Паутиной и на её основе, используя протокол HTTP и идентификаторы ресурсов URI.
Семантическая паутина — это надстройка над существующей Всемирной паутиной, задачей которой является делать размещённую в ней информацию более понятной для компьютеров. Машинная обработка возможна в семантической паутине благодаря ее двум важнейшим характеристикам.
- Повсеместному использованию унифицированных идентификаторов ресурсов (URI), широко известных как адреса. Традиционно в Интернете эти идентификаторы используются для установки ссылок на адресуемый объект (например, веб-страницу, файл или ящик электронной почты). В семантической паутине URI используются также для именования объектов, то есть каждый URI однозначно называет некоторый объект. Свои URI в семантической паутине есть не только у страниц, но и у объектов реального мира (людей, городов, художественных произведений и так далее), и даже у абстрактных понятий (например, у свойств «имя», «должность», «цвет»). Поскольку URI глобально уникальны, они позволяют называть одни и те же предметы в разных местах в семантической паутине. При этом URI протокола HTTP (то есть начинающиеся с http://) можно одновременно использовать как адреса документов, содержащих машино-читаемые описания этих предметов[5].
- Использованию семантических сетей и онтологий. Современные методы автоматической обработки данных, доступных в Интернете, как правило, основаны на частотном и лексическом анализе текстового содержимого, которое прежде всего предназначено для восприятия человеком. В семантической паутине вместо этого используется стандарт RDF, описывающий семантические сети (графы), в которых узлы и дуги имеют URI. Утверждения, кодируемые с помощью RDF, в дальнейшем можно интерпретировать с помощью онтологий, созданных по стандартам RDF Schema и OWL, чтобы получать из них логические заключения. В основе онтологий лежат математические формализмы, называемые дескрипционными логиками.
№45(а) Веб 3.0: семантическая паутина 2.0
Веб 3.0 – четкого определения нет.
С одной стороны – качественный контент и сервисы, которые создаются профессионалами на улучшенной технологической платформе веб 2.0.
С другой стороны – это семантическая паутина. Главная идея концепции – внедрении мета-языка, описывающего содержание сайтов для организации автоматического обмена между серверами.
В обычном вебе информация заложена в тексте страниц и используется человеком с помощью браузера.
Семантическая паутина предполагает запись информации в виде семантической сети с помощью набора описаний.
При этом программа-клиент может непосредственно извлекать из паутины факты и делать из них логические заключения.
Семантическая паутина работает параллельно с обычным вебом и на её основе, используя протокол HTTP и идентификаторы ресурсов URI.
Основные проблемы веб 3.0:
1. Дополнительные затраты для создания семантической версии каждого сайта. Фактически делаются версии для пользователей, и версия для других серверов.
2. Невозможность контроля достоверного описывания интернет-ресурсов (аналогично с историей «keywords» в HTML).
3. Отсутствие единого формата описания свойств ресурсов в условиях существующей конкуренции из-за корпоративно-рекламной политики ресурсов.
№46 Феномен социальных сетей.
Социальные сети сегодня – один из самых популярных способов развлечения и общения. Они быстрые, удобные и несложные в употреблении. С собеседником можно переписываться, говорить и даже видеть его. Социальные сети доступны всем и каждому в любое время суток. Необходимы лишь компьютер и подключение к Интернету.
Современная теория социальных сетей берёт своё начало с середины прошлого века. В 1951 году Рэй Соломонофф и Анатолий Рапопорт впервые заговорили о возможности этого явления. Продолжили эту идею в 1959-1968 годах венгерские математики Пол Эрдос и Альфред Реньи, написав восемь статей о принципах формирования социальных сетей. В конце концов, Дункан Уоттс и Стивен Строгач развили саму теорию. Термин "Социальная сеть" был введен в 1954 г. социологом из Манчестерской школы Джеймсом Барнсом.
Впервые социальная сеть предстала в виде электронной почты, осуществляющая общение между людьми. Это первый способ коммуникации посредством вычислительных сетей. Изначально, электронная почта была предназначена для обмена информацией между двумя персонами, но впоследствии, благодаря небольшому изменению (списки рассылки), и целые группы людей смогли общаться между собой.
Следующим этапом в развитии стали телеконференции или группы новостей. По сравнению с прошлой версией, эта позволяла сохранять сообщения, которые впоследствии были доступны к просмотру каждого участника конференции. Также появилась возможность различной группировки сообщений.
Телекоммуникации продолжали эволюционировать, и всё больше людей стало постоянно работать в Интернете. В результате этого возник сервис общения в режиме настоящего времени – пользователь получал сообщение от собеседника через несколько секунд после отправления. Такой сервис получил название Internet Relation Chat (IRC), что в дословном переводе означает «родственное общение через Интернет». Внутри IRC общение осуществляется при помощи специальных узлов – каналов, объединённых между собой тематикой.
Перед разработчиками социальной сети цель свободного, непринуждённого общения не стояла. Они лишь пытались облегчить информирование, коммуникацию и решение проблем фирм, компаний и просто работающих людей. Но ввиду появления в Сети индивидуальных пользователей, понижения цен на телекоммуникации и оборудование, общение стало носить более неофициальный характер, и начали появляться сообщества людей со схожими интересами и взглядами. Разговоры стали как общественными, так и приватными.
Ввиду стремительного развития, у социальных сетей появились свои специализированные особенности:
Ник-нейм (англ. nickname – прозвище, кличка) – формальное имя для идентефикации личности.
Смайлы (англ. smile – улыбка) – «рожицы», позволяющие отобразить эмоции в текстовом сообщении.
