2 лабработы.Основы гипертекстового представления интернет-контента

«Программная инженерия»

СОДЕРЖАНИЕ

Введение............................................................................................................... 4

1 Лабораторная работа № 1 «Введение в язык HTML. Создание простой

веб-страницы» .................................................................................................. 5

2 Лабораторная работа № 2 «Анимации»....................................................... 13

3 Рекомендуемая литература............................................................................ 18

Приложение А Требования к оформлению документа ................................. 19

Приложение Б Требования к оформлению CSS

1 ЛАБОРАТОРНАЯ РАБОТА № 1

«ВВЕДЕНИЕ В ЯЗЫК HTML. СОЗДАНИЕ ПРОСТОЙ

ВЕБ-СТРАНИЦЫ»

Цель работы: изучение семантических особенностей элементов

языка HTML и получение навыков семантической разметки.

Задание

1. Согласно варианту задания разметить представленный текст с помощью HTML-элементов. Описать в комментариях.

2. Провести тестирование кода используя ресурс

https://validator.w3.org/. Исправить полученные ошибки.

7

Варианты

Вариант 1

Как же эффективно привнести технологии в такой рабочий процесс?

Есть один простой способ – вспомнить о Wolfram|Alpha. Если ввести 2+2,

то Wolfram|Alpha, точно так же, как и Mathematica, выдаст в ответе 4.

Но если ввести, скажем, «new york», «2.3363636» или «cos(x) log(x)», то простого ответа, который можно посчитать, не будет. Вместо него

Wolfram|Alpha сгенерирует отчет, содержащий набор «интересных фактов»

касательно введенных вами данных.

Вариант 2

Бесчисленное множество статей по чистой математике начинаются со

слов: «Положим, что F – поле с такими-то и такими-то свойствами». Поэтому нам нужно иметь возможность вводить нечто подобное, чтобы потом

система автоматически выдавала нам теоремы и факты о поле F, в сущности,

самостоятельно создавая полноценную статью, посвященную полю F.

Вариант 3

Компьютеры и люди

Но в современном мире Wolfram Language также имеется свободная

форма ввода на естественном языке. Ключевой момент здесь заключается

в том, что, используя её, можно эффективно использовать все многообразие

удобных (хотя и некрасивых) вариантов записи, которые понимают и используют только настоящие математики. Например, «L2» может в соответствующем контексте интерпретироваться как «Лебегово пространство второй степени». Система распознавания естественного языка позаботится

о том, чтобы разрешить неоднозначность трактовки такого запроса и найдёт

каноническую символьную форму для него.

8

Вариант 4

Спецслужбы нанимают на работу много математиков, но потенциальные сотрудники должны понимать, что их работа будет заключаться в «подглядывании» за всеми, утверждает Том Лейнстер.

За последние 10 месяцев крупный международный скандал охватил

некоторых крупнейших в мире работодателей. Эти организации обвиняют

в нарушении закона в промышленных масштабах, что в настоящее время

является предметом широкого возмущения. Каким образом отреагировало

сообщество математиков? Во многом они игнорируют данный факт.

Вариант 5

Этапы отрисовки любой страницы:

 подготовка к запросу на сервер;

 запрос данных с сервера;

 шаблонизация;

 обновление DOM.

 «Ок, теперь у нас есть метрики, мы можем отправить их на сервер», –

говорим мы.

 «Что же дальше?» – вопрошаете вы.

 «А давай построим график!» – отвечаем мы.

 «А что будем считать?» – уточняете вы.

Вариант 6

В случае ускорения или замедления медиана, конечно, изменится. Но

она не может рассказать, сколько пользователей ускорилось, а сколько замедлилось. APDEX – метрика, которая сразу говорит: хорошо или плохо. Метрика работает очень просто. Мы выбираем временной интервал [0; t], такой,

что если время показа страницы попало в него, то пользователь счастлив.

9

Вариант 7

Сейчас модуль обновления сам логирует все свои стадии, и можно

легко понять причину замедления: медленнее стал отвечать сервер либо

слишком долго выполняется JavaScript. Выглядит это примерно так:

this.timings['look-ma-im-start'] = Date.now(); this.timings['look-ma-finish'] = Date.now();

Вариант 8

Для окончательного выбора библиотеки нам нужно сравнить:

Библиотека | IE 9 | Opera 12

---------- | ---- | --------

vcdiff | 8 | 5

google diff | 1363 | 76

Вариант 9

То есть это обычный массив из объектов. Каждый объект – отдельный

ресурс. У каждого объекта есть три свойства. k – названия ключа

в localStorage для этого ресурса. p – патч для ресурса, который сгенерировал

vcdiff. s – чексумма для ресурса актуальной версии, чтобы потом можно

было проверить правильность наложения патча на клиенте. Чексумма вычисляется по алгоритму Флетчера.

Вариант 10

Фактически мы экономим 80-90% трафика. Размер загружаемой статистики в байтах:

Релиз | С патчем | Без патча

7.7.20 | 397 | 174 549

7.7.21 | 383 | 53 995

7.7.22 | 483 | 3 995

10

Вариант 11

Автор: @doochik С++-разработчик. Электронная почта:

(doochik@yandex-team.ru). Компания: Яндекс.

Вариант 12

Берем еще один интервал, (t; 4t] (в четыре раза больше первого), и считаем, что если страница показана за это время, то пользователь в целом удовлетворен скоростью работы, но уже не настолько счастлив. И применяем

формулу: (кол-во счастливых пользователей + кол-во удовлетворенных / 2) /

(общее кол-во). Получается значение от нуля до единицы, которое, видимо,

лучше всего показывает, хорошо или плохо работает почта