Internet rakenduste architektuur ja realiseerimine Õppejõud Larissa Joonas 2012 Время и место Понедельник, 2-3 пара, 28 и 37 кабинет Материалы — на сайте колледжа [email protected] Краткое описание курса Основные понятия WWW SGML, HTML, XHTML СSS Объектная модель браузера и совместимость Юзабилити JavaScript Модель клиент-сервер Основы CGI Работа с языком PERL Основные технологии развития и продвижения сайтов Оценка за курс Выполнение работ в течение семестра 4 работы на оценку – экзаменационная оценка Экзаменационный тест История Интернет Первый сервер ARPANET - 2 сентября 1969 года в Калифорнийском университете в ЛосАнджелесе. Компьютер Honeywell DP-516, 24 Кб оперативной памяти. 29 октября 1969 года первый обмен между двумя узлами сети ARPANET - день рождения Интернет. 1971 год – первая программа для отправки электронной почты по сети. История Интернет (2) 1973 год — подключение через трансатлантический телефонный кабель Великобритании и Норвегии 1 января 1983 года сеть ARPANET перешла с протокола NCP на TCP/IP. Термин «Интернет» закрепился за сетью ARPANET. В 1984 году была разработана система доменных имён (англ. Domain Name System, DNS). История Интернет (3) 1988 год -- протокол Internet Relay Chat (IRC) 1989 году в Европейском совете по ядерным исследованиям (CERN) родилась концепция Всемирной паутины. Автор - Тим БернерсЛи, он же в течение двух лет разработал протокол HTTP, язык HTML и идентификаторы URI. (Слово гипертекст для описания системы непоследовательных ссылок внутри текста создано в середине 1960-х Тедом Нельсоном) Gopher Gopher — сетевой протокол распределённого поиска и передачи документов, который был широко распространён в Интернете до 1993 года. Протокол предназначался для предоставления доступа к документам в Интернет, но имел меньше возможностей, чем HTTP, и впоследствии был полностью вытеснен им. Протокол основан на клиент-серверной технологии, за ним закреплён 70 порт TCP. Gopher-proxy http://gopherproxy.meulie.net/ Адресация URL protocol://hostname:port/path/filename более точно называть Web-адрес URI (Uniform Resource Identifier - Единообразный идентификатор ресурса). Браузеры Первым популярным браузером с графическим интерфейсом был NCSA Mosaic, затем – Netscape Navigator. 1996 год -- Windows 95 OSR2+ Internet Explorer 3.0. Война браузеров Internet Explorer занял более 95 % рынка. Firefox разработан по следам Netscape Машина времени http://www.archive.org/web/web.php Война браузеров Война форматов W3C HTML 4.0 Разделение контента и представления СSS Usability Российский рынок браузеров Мировой рынок браузеров Общий тест на производительность Языки разметки W3C.org XML (eXtensible Markup Language - Расширяемый язык разметки) для генерации графики Web (VML - Vector Markup Language) для вывода математических выражений (MathML Mathematical Markup Language), для создания интерактивных аудио/видео представлений (SMIL - Synchronized Multimedia Integration Language), для распознавания цифровой подписи (InkML - Ink Markup Language) и другие. XHTML (eXtensible HyperText Markup Language Расширяемый язык разметки гипертекста) 1.1 –> XHTML 2.0. Развитие языков разметки Проверка совместимости со стандартами http://validator.w3.org/. Открытые стандарты обработки документов. SGML и XML Проблемы с обработкой документов: множество различных закрытых несовместимых форматов постоянная смена форматов и приложений трудности автоматической генерации и обработки документов непереносимость документов Что такое SGML? международный стандарт разметки документов (ISO 8879:1986) метаязык для создания языков разметки приложений SGML (например, HTML) документы хранятся в текстовом виде документы состоят из текста и элементов разметки структура документа строго определена Что можно в SGML? один источник - много выходных форматов Web, связанные документы управление документами, версии, контекстный поиск управление данными Отличия SGML разделение информации и представления типизированные документы выявление структуры информации управление данными связывание документов Информация и представление описательная разметка вместо процедурной Типизированные документы DTD DTD (англ. Document Type Definition определение типа документа) Язык схем DTD (DTD schema language) — искусственный язык, который используется для записи фактических синтаксических правил метаязыков разметки текста SGML и XML. Сейчас идёт отказ от использования DTD в XML-технологии. На смену DTD пришёл стандарт консорциума W3C XML Schema. Структура информации структурные элементы обработка текста в контексте структуры Пример: Книга Глава Раздел параграф таблица Управление данными смысловые выделения обработка текста в контексте содержания Пример: Техническое задание Задачи разработки Раздел Тех. требования Раздел Связывание документов - гарантия целостности - двусторонние связи - связи «один-ко-многим» и «многие-комногим» - связи с произвольными точками документа Пример: «ссылка на 3-ю главу 4-й части Руководства Администратора» SGML и другие HTML уклон в сторону представления размытость стандарта нет возможностей расширения MS Word закрытый слабые средства автоматизации нет смысловой и структурной разметки TeX сложный, низкоуровневый плохо экспортируется в Word Создание документа SGML-редакторы ArborText ADEPT*Editor, SoftQuad Author/Editor, Xemacs+psgml, Corel WordPerfect/SGML SGML-процессоры SP, CoST, Jade, OmniMark, Balise,... Стили DSSSL (Jade), XSL, CSS,... Выходные форматы HTML, RTF, TeX, PostScript, PDF и т.д. Пример документа Групповая работа над документами Внешние объекты (документы, рисунки...) Параллельная работа Библиотека иллюстраций Пакетная обработка (сборка документа) Поиск в документах – Текстовые файлы – Полнотекстовый поиск – Поиск в контексте (структурном и смысловом) glimpse, CGI, Web XML – SGML, ориентированный на Web – Упрощенный синтаксис – Не обязательно наличие DTD – Простые анализаторы Кодировка документа ASCII - 128 символов Charset 1-байтовые и 2-байтовые кодировки ISO-8859-1 – "Latin-1" UNICODE – UTF-8 <META http-equiv="Content-Type" content="text/html" charset="EUC-JP"> Мнемоники или подстановки HTML entities Цифровые мнемоники (десятеричные или шестнадцатеричные). Мнемоники из символьных элементов. " &lt; " - знак < " &gt; " - знак > " &amp; " - знак & &#229; (10-ная) представляет Ангстрем; &#xE5; (16-ная) та же самая буква HTML5 включает в себя HTML 4 и JavaScript <video>, <audio>, <canvas>. <nav>, <footer> API и DOM являются фундаментальными частями спецификации HTML5 Спецификация HTML5 была принята рабочей группой W3C в 2008 году Отброшены устревшие теги http://wdh.suncloud.ru/deprecat.htm Новое в НТМL5 элемент сетка для непосредственного метода рисования в 2D. контроль над проигрыванием медиафайлов, который может использоваться, например, для синхронизации субтитров с видео хранение баз данных оффлайн редактирование документа Drag-and-drop управление историей браузера тип MIME и регистрация обработчика протокола Отличия от HTML4.01 и XHTML1.x Новые элементы: article, aside, audio, bdo, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr Новые типы средств управления за формой: dates and times, email, url, search, number, range, tel, color[44] Новые атрибуты: charset (в meta), async (в script) Глобальные атрибуты, которые могут быть применены ко всем элементам: id, tabindex, hidden, data Элементы, которые будут исключены: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt Общие сведения о HTML Тэги (tags) <TAG1> <TAG2>…</TAG2> <TAG3 ATTR1=“value1” ATTR2=“value2” ATTR3=“value3”…> Простой документ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><HTML> <HEAD> <TITLE> …</TITLE> </HEAD> <BODY> … </BODY> </HTML> Doctype HTML 4.01 Strict/Строгое ОТД <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional/Переходное ОТД <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 Frameset/Набор Фрэймов ОТД <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Комментарии <!- - comment - -> Представление цветов RGB “red”,”magenta”,”lime”,”cyan”,”silver”,”black”… “#FFEDD9” Типы тэгов Inline Block Replaced Физическое форматирование Логическое форматирование Графические форматы *.jpg *.gif *.png Активные изображения Активные изображения ( image maps ) http://www.jsworkshop.com/js3e/list13-1.html Заголовок документа - единственный титул документа (TITLE); - метаописатели документа (META); - базовый URI внешних ссылок (BASE); - ссылки на другие документы (LINK); - внутренние таблицы стилей (STYLE); - сценарии клиента (SCRIPT). Метаописатели документа Синтаксис: <META> (содержимого и конечного тега нет) Атрибуты: lang, dir (для атрибута content) httpequiv = NAME (заголовок сообщения HTTP) name = NAME (название свойства) content = CDATA (значение свойства) scheme = CDATA (имя схемы, интерпретирующей значение свойства) Метаописатели документа (2) <META name="Author" lang="en" content="Yury S. Lukach"> <META name="Description" content="Web Developer's Handbook. HTML Reference."> <META name="Keywords" content="Web development, HTML reference"> Метаописатели документа (3) <META name="robots" content="noindex,follow"> index эта страница должна быть индексирована noindex эта страница не должна быть индексирована follow прослеживать гиперссылки на странице nofollow не прослеживать гиперссылки на странице all = index, follow (принято по умолчанию) none = noindex, nofollow Атрибут http-equiv кодировка символов документа <META http-equiv="Content-Type" content="text/html; charset=windows-1251"> язык таблиц стилей, принятый по умолчанию: <META http-equiv="Content-Style-Type" content="text/css"> язык программирования сценариев, принятый по умолчанию: <META http-equiv="Content-Script-Type" content="text/javascript"> задает дату и время истечения срока действия документа: полезен для того, чтобы заставить обозреватель загрузить документ не из кэш-памяти, а с сервера; <META http-equiv="Expires" content="Sun, 7 May 2000 12:04:32 GMT"> указывает серверу, что через 10 секунд после завершения загрузки текущего документа нужно загрузить вместо него другой <META http-equiv="Refresh" content="10; URL=http://www.newserver.com/newpage.htm"> Википедия Www.intuit.ru http://ironner.ru/analytics/browsers_review