МИРОВЫЕ ИНФОРМАЦИОННЫЕ РЕСУРСЫ 1. XHTML и HTML 5 2. Редакторы web- документов 3. Flash-технология. - презентация

1 МИРОВЫЕ ИНФОРМАЦИОННЫЕ РЕСУРСЫ 1. XHTML и HTML 5 2. Редакторы web- документов 3. Flash-технология

2 XHTML

3 XHTML (англ. Extensible Hypertext Markup Language расширяемый язык разметки гипертекста) семейство языков разметки веб-страниц на основе XML, повторяющих и расширяющих возможности HTML 4. Спецификации XHTML 1.0 и XHTML 1.1 являются рекомендациями консорциума Всемирной паутины. Главное отличие XHTML от HTML заключается в обработке документа. Документы XHTML обрабатываются своим модулем (парсером) аналогично документам XML. В процессе этой обработки ошибки, допущенные разработчиками, не исправляются.

4 Браузер выбирает парсер для обработки документа на основании заголовка content- type, полученного от сервера: HTML – text/html XHTML – application/xhtml+xml Для локального просмотра на клиенте выбор основывается на расширении файла. В Internet Explorer вплоть до 8-й версии парсер обработки XHTML-документов отсутствует.

5 Различия между XHTML и HTML Все элементы должны быть закрыты. Теги, которые не имеют закрывающего тега (например, или ) должны иметь на конце / (например, ). Булевы атрибуты записываются в развёрнутой форме. Например, следует писать или. Имена тегов и атрибутов должны быть записаны строчными буквами (например, вместо ).

6 Различия между XHTML и HTML XHTML гораздо строже относится к ошибкам в коде; < и & везде, даже в URL, должны замещаться < и & соответственно. По рекомендации W3C браузеры, встретив ошибку в XHTML, должны сообщить о ней и не обрабатывать документ. Для HTML браузеры должны были попытаться понять, что хотел сказать автор. Кодировкой по умолчанию является UTF-8 (в отличие от HTML, где кодировкой по умолчанию является ISO ).

7 Для XHTML страниц рекомендуется задавать MIME*-тип application/xhtml+xml, но это не является обязательным, более того браузер Internet Explorer 8 и младшие версии, не смогут обрабатывать страницу, поэтому с XHTML 1.0 традиционно используется MIME- тип для HTML text/html. _____________ * MIME определяет механизмы для передачи по Интернету разного рода информации (в частности, с помощью электронной почты), а именно: текст на языках, для которых используются кодировки, отличные от ASCII, и нетекстовый контент, такой как картинки, музыка, фильмы и программы.

8 Существует три типа документов XHTML: strict, transitional и frameset. Наиболее употребительной и универсальной из версий XHTML является переходная (англ. transitional), поскольку она позволяет использовать iframe (включение содержимого одной веб-страницы в другую) и атрибут target у ссылок (для указания того, например, что ссылке необходимо открываться в новом окне). Фреймовая версия (англ. frameset) представляет собой расширенный вариант transitional и добавляет к нему, как следует из названия, возможность установки frameset вместо body. DTD строгой версии XHTML (англ. strict) не содержит многих тегов и атрибутов, описанных в DTD transitional, и признанных устаревшими.

9

10 Интернет постоянно развивается. Просто новые и инновационные веб- сайты рождаются каждый день, раздвигая рамки HTML во всех направлениях. Спецификации HTML 4 уже с добрый десяток лет, и создатели сайтов в поисках возможностей дать пользователям больше функциональности скованы ограничениями языка и существующих браузеров. Чтобы предоставить авторам более гибкий и способный к взаимодействию с внешними компонентами язык, в HTML 5 добавлено много новых и расширен ряд существующих возможностей: элементы управления на формах, программные интерфейсы (API), мультимедийные функции, структура и семантика языка. Работа над HTML 5 началась в 2004 г. и сейчас ведётся совместно W3C HTML WG (W3C HTML Working Group) и WHATWG (Web Hypertext Application Technology Working Group). Многие ключевые игроки рынка участвуют в работе: как представители производителей самых распространённых браузеров (Apple, Mozilla, Opera и Microsoft), так и ряд организаций и лиц самого широкого круга интересов. Работа над спецификацией HTML 5 всё ещё ведётся и пока далека от завершения. Поэтому любые особенности языка, о которых пойдет речь далее, могут быть изменены в будущем.

11 Структура В HTML5 появилась целая группа новых элементов, призванная упростить процесс структуризации страницы. На большинстве страниц, свёрстанных на HTML4, можно встретить одни и те же общие структурные блоки, например заголовки (headers), подвалы (footers) и столбцы (columns). Хорошим тоном сегодня считается описание их с помощью элементов div, с присвоением каждому определённого класса или идентификатора.

12 в HTML 4 На этой схеме представлена типичная структура страницы с 2-мя колонками, свёрстанная с использованием элементов div с атрибутами id или class. Она состоит из заголовка, подвала и полосы меню под заголовком. Блок с содержимым страницы образован текстом статьи и боковой панелью (sidebar) справа.

13 Такое большое количество элементов div продиктовано отсутствием в HTML4 тегов, необходимых для более предметного описания структурных блоков. Решение этой проблемы в HTML5 введены новые элементы для описания каждой части страницы.

14 В HTML5 теги div могут быть заменены на header, nav, section, article, aside и footer. в HTML 5

15 Разметка документа тогда примет следующий вид:

16 В использовании этих элементов есть несколько плюсов. При совместном использовании с заголовками (теги h1…h6), появляется возможность преодолеть ограничение всех предыдущих версий HTML не более 6 уровней вложенности. Спецификация HTML5 предлагает пошаговый алгоритм определения структуры документа, который принимает во внимание особенности иерархической организации новых элементов.

17 Например, для разметки следующей структуры использованы вложенные элементы section и h1: Level 1 Level 2 Level 3 Для лучшей совместимости с сегодняшними браузерами также возможно использование других тегов-заголовков (h2…h6) вместо h1.

18 Благодаря точному определению предназначения отдельных структурных блоков на странице появляется возможность упростить для пользователя задачу навигации по странице. Например, читатель получит возможность быстро пропустить блок с содержанием или перейти с одной статьи на другую, даже если автор не указал ссылку на неё. Разработчики тоже получат выгоду от этого нововведения: найти один div в общей массе документа куда сложнее, чем отыскать единственный специализированный элемент. Другими словами, разработчики выигрывают, получая более простой и понятный код.

19 Элемент header используется для обозначения шапки блока. Именно шапки, так как в ней может содержаться не только заголовок, но, например, информация о версии или подзаголовок. Первый взгляд на HTML 5 Автор Lachlan Hunt Полезные советы Пятая редакция

20 Элемент footer служит для разметки подвала определённого блока. Как правило, он содержит информацию об авторе, ссылки на материалы сходной тематики, правовую информацию и т.д. ©2007 vectora.ru

21 Элемент nav используется для обозначения блока с навигационными ссылками. Он может быть применён как для меню сайта, так и для содержания документа. Главная Продукция Услуги О нас

22 Тег aside должен использоваться для обозначения данных, имеющих косвенное отношение к основному контенту. Особо полезен может быть для обозначения боковых панелей. Архивы Сентябрь 2007 Август 2007 Июль 2007

23 Элемент section призван выделять некоторый раздел документа, например, часть статьи. Часть 141. Жак. 22 года Мне приснился кошмар. Сперва был плачущий волк. Потом девочка, превращающаяся в воздушный шар.…

24 Элемент article служит для выделения некоторой независимой части документа, например, новости, постинга в форуме или комментария в блоге. Comment #2 Написал Петя Иванов 9 декабря 2007 г. в 13:13 Отличная статья!

25 Видео и звук За последние годы аудио- и видеоконтент сильно упрочил свои позиции в Сети, и сайты вроде YouTube, Viddler, Revver, MySpace и дюжины прочих сделали публикацию видеороликов и звукового контента доступной каждому. Однако из-за отсутствия в HTML средств для внедрения и управления мультимедиа-контентом они используют Flash. Несмотря на то, что всё-таки существует возможность встроить видео и аудио при помощи различных плагинов (QuickTime, Windows Media и т.д.), Flash на текущий момент единственный плагин, установленный почти в каждом браузере и обеспечивающий кросс-браузерную (и кросс- платформенную - прим. пер.) платформу для воспроизведения медиа контента вместе с API (интерфейсом программирования приложений) для разработчиков.

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

27 Новые элементы video и audio серьёзно упрощают задачу. Большинство новых методов API общее для них, различия имеются только в той их части, что оперирует со специфичными для аудио или видео свойствами.

28 Самый простой способ внедрить видео на страницу использовать тег video и предоставить задачу отображения стандартного интерфейса управления браузеру. Атрибут controls (тип boolean - логический) используется для указания браузеру, нужно ли показывать элементы управления по умолчанию.

Download movie Необязательный атрибут poster может быть использован, чтобы указать, какое изображение должно отображаться вместо видео до того, как началось воспроизведение" title="

30 Так же просто и добавить звук на страницу, используя элемент audio. Большинство атрибутов у тегов video и audio общие, хотя по понятным причинам к audio неприменимы атрибуты width, height и poster. Download song

31 Спецификацией HTML 5 предусмотрен тег source для указания URL видео или звука в альтернативных форматах, чтобы браузер мог выбрать наиболее подходящий вариант для загрузки и воспроизведения. Атрибут media может быть использован для определения класса устройств, для которых предназначен данный файл. Атрибут type предназначен для указания типа мультимедиа-данных и используемых кодеков. Если используется элемент source, то атрибут src в родительских тегах audio или video должен быть опущен. В противном случае элементы source будут проигнорированы.

32 ">

33 Разработчики, которым необходим больший контроль над интерфейсом плеера, чтобы аккуратно встроить мультимедиа- контент в общую концепцию дизайна страницы, могут воспользоваться расширенным API, предоставляющим в распоряжение программиста несколько методов и событий для того, чтобы обеспечить возможность контроля над процессом воспроизведения. Из простейших методов стоит выделить play(), pause() и возможность изменения значения свойства currentTime для перемотки. Следующий пример демонстрирует их использование. var video = document.getElementById("video"); Play Pause Мы рассмотрели далеко не все методы и свойства API элементов audio и video, полную информацию можно получить, ознакомившись с черновой спецификацией.

34 Представление документа В отличие от предыдущих версий HTML и XHTML, определённых в терминах своего синтаксиса, HTML 5 описывается объектной моделью документа (DOM) внутренним иерархическим представлением браузеров, которое они используют для описания документа. К примеру, рассмотрим очень простой документ, состоящий из названия, заголовка и параграфа текста.

35 Дерево DOM включает в себя элемент title в head и элементы h1 и p в body. В этом случае дерево DOM будет выглядеть примерно так:

36 Преимущество определения HTML5 в терминах DOM заключается в том, что сам язык может определён вне зависимости от синтаксиса. В основном, существует два синтаксиса для описания HTML-документов: HTML- последовательность(serialisation), известный как HTML5 и XML- последовательность, известный как XHTML5.

37 An HTML Document Example This is an example HTML document. Как и в предыдущих версиях HTML, некоторые теги являются необязательными и "подставляются" автоматически. В XML-последовательности используется XML 1.0 и пространства имён, так же, как в XHTML 1.0

38 An HTML Document Example This is an example HTML document. Эти два примера эквивалентны, за исключением разного расположения пробелов и наличия атрибута xmlns.

39 Браузеры используют MIME-тип (MIME-type) для того, чтобы определить, какой синтаксис используется. Любой документ, чей тип определён как text/html должен удовлетворять требованиям HTML- последовательности, а документ, чей XML MIME-тип определён как application/xhtml+xml должен удовлетворять требованиям XML- последовательности. Авторы должны сделать взвешенный выбор того, какую последовательность применять. Конечное решение зависит от большого числа разных факторов, каждая из моделей имеет свои преимущества.

40 Новые API В дополнение к определению разметки HTML5 устанавливает скриптовый интерфейс прикладного программирования (API). Существующий интерфейс DOM расширен и фактически особенности зарегистрированы. Также существуют новые API, например: элемент сетка для непосредственного метода рисования в 2D, контроль над проигрыванием медиафайлов, который может использоваться, например, для синхронизации субтитров с видео хранение баз данных оффлайн[32] редактирование документаDrag-and-drop управление историей браузера тип MIME и регистрация обработчика протокола микроданные

41 Не все выше перечисленные технологии включены в спецификацию W3C HTML5, хотя они есть в спецификации WHATWG HTML.[33] Немного связанных технологий, которые не являются частью ни одной из спецификаций, следуют далее. W3C публикует спецификации для них отдельно: геолокация база данных SQL для Web, внутренняя база данных (больше не поддерживаемая)[34] индексированная база данных API, индексирование по типу ключ-значение (прежде - WebSimpleDB). Файл API, дескриптор обновления файлов и управления ими. Работа с системой. Этот API предназначен для того, чтобы обеспечить хранение информации со стороны клиента без управления базами данных. Запись в файл, использование API для записи в файл информации из приложения.

42 Редакторы Web-документов

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

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

45 Редакторы HTML-документов обычно принято разбивать на две группы. редакторы тегов; редакторы WYSIWYG (What You See Is What You Get что видишь, то и получаешь).

46 Редакторы тегов предоставляют возможность записывать коды непосредственно на языке HTML и имеют специальные дополнительные возможности для облегчения процесса включения тегов в создаваемый документ. Современные редакторы тегов имеют дополнительные инструменты для генерации элементов HTML. К ним относятся программы-мастера, шаблоны и иные средства, упрощающие работу с типичными HTML- элементами типа списков, таблиц, форм и фреймов. Некоторые редакторы проверяют синтаксис записи тегов, что позволяет быстрее находить ошибки форматирования HTML-документов. Примеры: HotDog Web Editor, Notepad++, Macromedia HomeSite.

47 Редакторы WYSIWYG позволяют изменять внешний вид и компоновку страницы визуально, не вдаваясь в подробности реализации в виде тегов. При этом результирующий HTML-код документа создается автоматически. При работе с этими редакторами разработчик может вообще не представлять правил записи тегов HTML и целиком положиться на возможности соответствующего редактора. С другой стороны такие редакторы могут не обеспечивать гибкости, свойственной работе на уровне тегов, и не обладают всеми возможностями разметки языка HTML. Типичные представители: Microsoft FrontPage, Macromedia Dreamweaver.

48 На современном этапе деление редакторов на две группы становится все более и более условным. Редакторы тегов все более приближаются по своим возможностям и удобству работы к редакторам WYSIWYG, а последние, в свою очередь, становятся все более мощными и гибкими, позволяя включать все более сложные элементы.

49 Блокнот Windows Эта программа относится к типу простых текстовых HTML-редакторов, применяемых для создания HTML-кода вручную. В Блокноте можно сохранять обычные текстовые файлы с расширением htm и html, но можно также сохранять файлы, которые содержат PHP-код. Эти файлы имеют расширение php. Для того, чтобы текст правильно интерпретировался Браузером компьютера в окне пользователя, надо не забыть его отделить тегами и. И надо знать все команды, теги, дескрипторы, чтобы создавать технически грамотные web-страницы.

50 Notepad++ многофункциональный блокнот

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

52 Основные особенности Notepad++ : подсветка текста и возможность сворачивания блоков, согласно синтаксису языка программирования настраиваемый пользователем режим подсветки синтаксиса авто-завершение набираемого слова одновременная работа с множеством документов одновременный просмотр нескольких документов поддержка регулярных выражений поиска / замены

53 Основные особенности Notepad++ : полная поддержка перетягивания фрагментов текста динамическое изменение окон просмотра автоматическое определение состояния файла изменение масштаба поддержка большого количества языков заметки выделение скобок при редактировании текста запись макроса и его выполнение

54 Macromedia HomeSite

55 Macromedia распространенным средством редактирования HTML- документов среди пользователей, предпочитающих кодировать страницы вручную. Вместе с тем, HomeSite позволяет значительно ускорить сам процесс создания и облегчить работу разработчика.

56 Macromedia HomeSite обеспечивают удобную подсветку синтаксиса не только HTML-страниц, но и файлов PHP, Perl, ASP, MySQL и других популярных средств разработки. Если не устраивает текущая цветовая схема подсветки синтаксиса, то можно отредактировать существующую, или даже создать собственную схему оформления документов. HomeSite имеет мощную справочную систему, содержащую кроме описания возможностей программы спецификации языка HTML, справочник тегов и включающая удобные всплывающие подсказки по текущему дескриптору - для их вызова достаточно нажать F2, и пользователю демонстрируются все возможные атрибуты для данного тега.

57 Для ускорения доступа к часто используемым группам тегов в верхнем правом углу имеются несколько панелей, вид и расположение которых к тому же можно изменять. Панель разделена на несколько вкладок, на каждой из которых представлены теги, относящиеся к одной группе. Например, вкладка Fonts содержит кнопки для быстрого увеличения размера шрифта, смены его начертания, местоположения относительно строки и для вставки заголовков трех уровней. Альтернативным способом ввода вручную всех атрибутов тега является, так называемый, Tag Editor - редактор тегов, с помощью которого можно существенно облегчить процесс присвоения значений различным атрибутам. Наличие средств для создания и конфигурирования таблиц и фреймов - Table Wizard и Frame Wizard, позволяющих существенно облегчить жизнь разработчику при создании таблиц и фреймов сложной структуры.

58 Содержит встроенный модуль проверки орфографии, проверяющий не только корректность использованных дескрипторов, но и непосредственно правильность самого текста, а также редактор файлов CSS - каскадных листов стилей под названием TopStyle. Для повышения скорости создания документов можно воспользоваться клавиатурными сокращениями - HomeSite предоставляет обширное поле деятельности для любителей клавиатуры. Например, тегу соответствует комбинация клавиш Ctrl+Break. Впрочем, пользователь волен назначить практически любой команде удобное ему сочетание клавиш. Плюсы. К достоинствам программы можно отнести функциональность, универсальность, поддержку различных языков программирования, понятный интерфейс, широкие возможности и мощную справочную систему. Минусы. Отсутствие поддержки русского языка, высокая цена, необходимо хотя бы поверхностное знание языка HTML для создания страничек, высокая цена программы. Резюмируя вышесказанное, можно порекомендовать Macromedia HomeSite для пользователей средней и высокой квалификации, которые не ограничиваются возможностями языка HTML при создании веб-документов.

59 Плюсы. К достоинствам программы можно отнести функциональность, универсальность, поддержку различных языков программирования, понятный интерфейс, широкие возможности и мощную справочную систему. Минусы. Отсутствие поддержки русского языка, высокая цена, необходимо хотя бы поверхностное знание языка HTML для создания страничек, высокая цена программы. Можно порекомендовать Macromedia HomeSite для пользователей средней и высокой квалификации, которые не ограничиваются возможностями языка HTML при создании веб-документов.

60 PHP Designer 2008

61 Редакторы Web документов Macromedia HomeSite

62 Microsoft FrontPage

63 Macromedia Dreamweaver