- •4. Принципы разработки свободного и открытого по.
- •5. История развития Web технологий. Концепция sgml.
- •Internet это всемирная сеть разнородных компьютерных сетей, взаимодействующих по протоколу tcp/ip.
- •6. Понятие юзабилити. Критерии юзабилити.
- •7. Метод разработки User Centered Design.
- •10. Варианты использовании. User cases.
- •11. Прототипирование.
- •12. Выработка требований.
- •13. Модель требований.
- •16 Персоны
- •18. Глоссарий проекта. Метаданные.
- •19. Sgml, html друг ие языки описания пользовательских интерфейсов.
- •Типы документов
- •Независимость данных
- •1 (Роблемы расположения с floats обычно решаются использованием css свойства clear, которое позволяет вам "убрать" floated элементы с левой или правой или с обеих сторон.
19. Sgml, html друг ие языки описания пользовательских интерфейсов.
SGML (англ. Standard Generalized Markup Language — стандартный обобщённый язык разметки; произносится) — метаязык, на котором можно определять язык разметки для документов.
Под языком размегки понимают набор соглашений о разметке, применяемых для кодирования текстов. Язык разметки должен специфицировать, какая разметка допустима, какая разметка обязательна, как отличить разметку от текста и что разметка значит. SGML предоставляет решения для первых тре> задач, отдельная документация обычно необходима для последней. Особенности SGML
Три характеристики SGML отличают его от прочих языков разметки. 1.0писательная разметка.
Система с описательной разметкой использует коды разметки, которые просто предоставляют названия для категоризации частей документа. Коды разметки просто идентифицируют порцию документа и утверждают, что например "она является параграфом. С другой стороны, система с процедурно! разметкой определяет, какая обработка должна выполняться в конкретной точке документа: "передвинуть левую границу на 2мм левее, правую границу на 2мм правее" и т.п.
Типы документов
SGML вводит понятие типа документа, и, соответственно, определения типа документа (document type definition, DTD). Документы считаются типизированными, так же, как и другие обрабатываемые компьютерами объекты. Тип документа формально определяется его составными частями и их структурой.
Поскольку документы относятся к известным типам, можно использовать специальную программу, называемую анализатором (parser), для того, чтобы обработать документ, утверждающий, что он относится к конкретному типу, и проверить, действительно ли все элементы, требуемые для данногс типа документов, присутствуют и находятся в правильной последовательности.
Независимость данных
Основная цель проектирования SGML была в создании гарантий того, что документ, закодированный согласно его положениям, будет переносимым одной аппаратной и программной среды в другую без потери информации. Два его свойства, описанных выше, отвечают этому требованию на абстрактном уровне; третье свойство - на уровне строчек байтов (символов), которые составляют документ. SGML предоставляет обобщенный механиз\ строковой подстановки, то есть, простой машинно-независимый способ указания, что конкретная строка символов в документе в момент обработки документа должна заменяться на некоторую другую строку. Одно очевидное применение этому механизму - обеспечение единой терминологии; другое, более значительное,- противодействие известной неспособности разных компьютерных систем понимать наборы Символов друг друга. Строки, определяемые этим механизмом, называются сущностями (entities).
Язык форматирования Web-страниц HTML изначально вводился как приложение SGML. Позже HTML начал всячески расширяться с целью дать автор) больший контроль над внешним представлением информации. Новые элементы и атрибуты ориентировались на визуальное форматирование. Появились и стали активно использоваться средства, не входящие собственно в язык разметки; JavaScript, plugins, и прочее. Много появилось также элементов HTML, поддерживаемых только определенным браузером, или по-разному работающих в разных браузерах. Поэтому сейчас уже сложно утверждать, является ли HTML приложением SGML или нет. Очень немногие страницы создаются в соответствии со спецификациями на HTML и соответствующим] DTD.
Документ HTML состоит из раздела-шапки (<HEAD></HEAD>) и тела (<BODYx/BODY>). Название документа содержится в шапке (наряду с другой
информацией о документе), а содержимое документа находится в его теле/ body. Тело в этом примере состоит из одного параграфа, помеченного <Р>.
Язык пользовательских интерфейсов UIML
Задача языка UIML эффективно реализовать область интерфейса.
U1ML определяет следующее:
составные элементы пользовательского интерфейса;
каким образом будут представлены элементы пользовательского интерфейса (визуально/вербально/тактильно);
какого рода содержание будет использовано в пользовательском интерфейсе (текст, изображения, звуки и т.д.);
какова будет реакция элементов пользовательского интерфейса на действия пользователя;
каким образом будет производиться контроль событий пользовательского интерфейса (Java Swing classes или теги HTML);
с каким внешним API будет взаимодействовать пользовательский интерфейс. XAML
XAML (eXtemsible Application Markup Language) - язык интерфейсов платформы Windows Longhorn. MXML
MXML позволяет наглядно описать структуру пользовательского интерфейса, по которой он будет воссоздан клиентским приложением. ActionScript выполняет задачи контроллера (программная реакция на события в среде) и обеспечивает уровень модели приложения. MXML(FLEX) и XAML - современные языки описания пользовательских интерфейсов.
Оба языка имеют XML корни от SGML. Подход к описаю элементов пользовательского интерфейса очень схож между собой.
20
. Просмотр HTML документа. Клиент - сервер.
Технология взаимодействия, в которой одна программа запрашивает выполнение какой-либо совокупности действий ("запрашивает услугу"), а другая ее выполняет, называется технологией "клиент-сервер". Участники такого взаимодействия называются соответственно клиентом (client) и сервером (server). Достаточно часто клиентом (или сервером) называют компьютеры, на которых функционирует то или иное клиентское (или серверное) программное обеспечение.
Процессы, вовлеченые в проектирование и обслуживание Web-страниц:
-Некто (обычно, вы!) создает HTML в текстовом редакторе или IDE.
-Затем вы загружаете HTML на Web-сервер, например, Apache, и делаете его общедоступным по Интернет или интранет.
-Пользователь запрашивает вашу Web-страницу в браузере, например Firefox или Safari.
-Браузер пользователя выполняет запрос HTTP на ваш Web-сервер. В ответ получает HTML страницу.
-Браузер визуализирует страницу, полученную от сервера, в графическом и текстовом виде; пользователи просматривают и активируют Web-страницу.
)Просмотр HTML документа. Клиент - сервер.
Процессы, вовлечение в проектирование и обслуживание Web-
страниц:
-Некто (обычно, вы!) создает HTML в текстовом редакторе или IDE.
-Затем вы загружаете HTML на Web-сервер, например. Apache, и делаете его общедоступным по Интернет или ннтранет.
-Пользователь запрашивает вашу Web-страницу в браузере, например Firefox или Safari.
-Браузер пользователя выполняет запрос HTTP на ваш Web- сервер В ответ получает HTML страницу. -Браузер визуализирует страницу, полученную от сервера, в графическом и текстовом виде; пользователи просматривают и активируют Web-страницу. Веб-службы — это программы, доступ к которым осуществляется через Веб (то есть протокол HTTP), а обмен даннышГпроисходит в формате XML. В отличй^от обычных динамических библиотек, такой подход обладает родом плюсов:
Веб-служба находится на серверах компании, которая ее создала. Поэтому в любой момент пользователю доступна самая свежая версия данных и ему не приходится заботиться о зависимостях.
Инструменты для работы с HTTP и XML есть в любом современном языке программирования, поэтому веб-службы переходят в разряд платформонезависимых.
Asynchronous JavaScript and XML (Ajax) — подход к построению пользовательских интерфейсов веб-приложений, при котором вебстраница, не перезагружаясь, асинхронно загружает нужные пользователю данные.
Веб-синднкацня. Одновременная публикация одного и того же материала на различных страницах или веб-сайтах. Для этого используются веб-шшжи. также называемые RSS-потоками. содержащие заголовки материалов и ссылки на них. (например, последние сообщения форумов, и т. а). Для своего будущего проекта необходимо найти три, пять существующих аналогов и провести над ними работу .
Сохранить адрес сайта.
Сделать принтскрин сайта(рассмотреть в браузерах FF, Opera, IE).
*
Сделать субъективную, аргументированную оценку сайта по внешнему виду.
Описание вести по выявленным критериям, например, цветовая гамма, количество шрифтов, количество орфографических ошибок, композиция, единство оформление ссылок, художественный стиль. Сделать сводную ннфографнку.
4. Создать отчет.
21
Схемы позиционирования. Свойство display.
По своей сути идея позиционирования блоков в CSS довольно проста. После того как создан блок и заданы его свойства, необходимо определить его положение в окне браузера или на печатной странице.
В общем виде положение блока на странице будет зависеть от нескольких параметров. Ключевую роль здесь будет играть выбранная схема позиционирования, представляющая собой алгоритм, согласно которому определяется положение блоков на странице. Схемы позиционирования бываюз четырех видов.
Нормальный поток.
Относительное позиционирование.
Абсолютное позиционирование.
Плавающая блоковая модель.
В нормальном потоке положение элементов в коде полностью определяет внешний вид документа, так же как в HTML. Блоки, содержащиеся в нормальном потоке, принадлежат контексту форматирования, который может быть либо блоковым, либо строковым, но не тем и ни другим одновременно.
Относительно позиционированные элементы, размещаются на основе своей же позиции, обычный сдвиг относительно своего нормального расположения. Это похоже на то, как если бы вы добавили элементу внешние отступы с помощью свойства margin. Однако есть одно существенное различие: соседние элементы, в случае использования позиционирования, не учитывают этот сдвиг. Очень похоже на то, что вы добавили внешний отступ к элементу, но в то же время не повлияли на соседние элементы.
Абсолютное позиционирование удаляет элемент из общего потока документа, а затем ему назначается положение относительно контейнера. Что касается элементов вокруг, то в этом случае они просто игнорируют искомый, как будто ему установлено свойство display: none. Вы устанавливаете расположение элемента с абсолютным позиционированием, используя свойства top, left, right и bottom. Ключевой момент в абсолютном позиционировании - это понимание того, что является точкой отсчета. Если свойству top указано значение 20рх, то откуда их необходимо отсчитывать. Свойство display.
Свойство display задает тип объемлющего прямоугольника для данного элемента.
Значения этого свойства: <•
•block. При этом значении свойства элемент порождает главный структурный блок.
■inline. При этом значении свойства элемент порождает один или несколько строковых блоков.
•list-item. При этом значении свойства элемент (например, LI в HTML) порождает главный структурный блок и строковый блок элемента списка. Информацию о списках и примерах форматирования списков можно найти в разделе о списках.
•marker. При этом значении свойства генерируемое содержимое, располагающееся до или после блока, становится маркером. Данное значение должно использоваться только с псевдоэлементами :before и :after, прикрепленным к элементам структурного уровня. В остальных случаях данное значение интерпретируется как 'inline'. Дополнительную информацию можно найти в разделе о маркерах.
•попе. При этом значении свойства элемент не порождает ни одного блока в структуре форматирования (т.е. элемент никак не влияет на отображение документа). Потомки этого элемента тем более не будут порождать никаких блоков, даже если для их свойства 'display1 установлено другое значение. Обратите внимание, что в результате использования значения 'попе' не создается вообще никакого блока, в том числе и невидимого. В CSS имеются такие механизмы, которые позволяют элементам порождать в структуре форматирования определенные блоки, влияющие на форматирование, но при этом явно не отображаемые. Подробную информацию можно найти в разделе о видимости.
•run-in и compact. Эти значения свойства в зависимости от контекста создают структурный или строковый блок. Применение свойства к инициальному или компактному блоку осуществляется, исходя из его окончательного статуса (является ли он строковым или структурным блоком). Например, свойство 'white-space' применимо, только если блок становится структурным.
•table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell и table-caption При
этих значениях свойства элемент ведет себя как элемент таблицы.
Необходимо помнить, что хотя в качестве начального значения свойства 'display' используется значение 'inline', правила, содержащиеся в таблице стилей,
используемой агентом пользователя по умолчанию, могут переназначить его.
Примеры:
Далее представлено несколько примеров использования свойства 'display': Р { display: block } ЕМ { display: inline } LI { display: list-item [
IMG { display: none } /* He отображать графику *l
Конформные агенты пользователей, управляющие отображением HTML-документов, могут игнорировать свойство 'display'.
22
Блочные и строковые элементы. Свойство float. Свойство clear.
Все элементы (теги) можно разделить на две категории: Блочные и строковые. Блочные или боксовые элементы - это прямоугольные области на мониторе компьютера которым без труда можно присвоить определенное положение, размер, вложить в них другие блоки, определить расположение относительно друг друга. А строковые элементы располагаются в одну сроку, выравниваются по ей базовой линии и как правило служат для форматирования и редакции текста. К блочным (block) элементам относятся:
<div>, <dl>, <form>, <hl>- <h6>, <hr>, <noscript>, <ol>, <p> <pre> <table>, <ul>... К строчным (inline) элементам относятся:
<a>, <br>, <cite>, <code>, <em>, <img>, <input>, <label>, <select>, <span>, <strong>, <sub>, <sup>, <textarea>... Основные отличия от элементов строкового и блочного типа заключаются в том что:
Боксовые элементы могут содержать в себе другие элементы, как блочного, так и строкового типа. Строчные же элементы могут включать в себя только строчные элементы.
Боксовые элементы, по умолчанию, располагаются относительно друг друга вертикально, т.е. в начале и конце блока происходит "перенос строки", а строковые элементы располагаются горизонтально, перенос строки происходит только в том случае если это необходимо.
По умолчанию блочные элементы имеют ширину 100% и тем самым оставляют за собой все пространство по горизонтали, у строковых же элементов ширина определяется содержанием.
Обобщениями блочного и строкового элементов, с точки зрения стилей, являются элементы DIV и SPAN, соответственно. DIV играет роль универсального блока. Блочный элемент всегда отделен от прочих элементов страницы (контекста) пустой строкой. D1V не несет никакой смысловой нагрузки. Часто говорят, что DIV — это раздел страницы. Но на самом деле его применение имеет смысл только в контексте CSS. Никаких правил по умолчанию для отображения DIV не существует. Это просто новая строка текста.
DIV позволяет применить атрибуты стиля, связанные с границей блока и отступами блока от границ старшего элемента, а отступ от границы блока до границы вложенного элемента. Если текст будет просматриваться браузерами, не поддерживающими CSS, элемент D1V использовать не рекомендуется. В этом случае лучше применить параграф или другой подходящий по смыслу элемент разметки из стандартного набора HTML.
Элемент разметки SPAN — это обобщенный строковый элемент разметки, применение которого не приводит к образованию блока текста. Применение элемента SPAN ограничено браузерами, которые поддерживают CSS.
Свойство float позволяв разработчику включать подобные таблице столбцы в разметку HTML без использования таблиц. Если бы не свойство float, то схемы размещения CSS не были бы возможны, кроме использования абсолютного и относительного позиционирования — которые были бы неаккуратными и сделали бы схему разметки неудобной в сопровождении.
Свойство float в основном используется для обтекания текстом изображений, но также оно применяется и в качестве основы для создания разметок с несколькими колонками.
Всего есть 4 значения для свойства float. Left и right используются для соответствующих направлений. None (по умолчанию) - обеспечивает, что элемент не будет "плавать". И inherit, которое говорит, что поведение должно быть такое же, как и у родительского элемента. Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.