Конспект лекции 2

Форматы представления данных. Кодировки файлов. Поиск по тексту с помощью регулярных выражений.

Форматы представления данных

Редакторы документов и ассоциированные типы файлов: txt, doc (docx, odt), xls (xlsx, ods). PDF.
Переходные форматы: csv, tsv, rtf.
HTML-формат. Вики-формат. Markdown. XML-формат.
Кодировки текста: Cyrillic Windows (1251), KOI8-R, Unicode (UTF-8).

Кодирование

Кодировка ASCII
Таблицы символов 8-битные.
Юникод. Таблица символов Юникода
Разница в длине файлов.

Перекодировка с помощью продвинутых текстовых редакторов

Notepad++ и его аналоги (но не Блокнот!)
Помогает перезагрузить файл, если на экране кракозябры.
Сохранить файл в другой кодировке.
Поддерживает поиск и замену с использованием регулярных выражений, сортировки, показывает теги разных систем

Помимо текстовых редакторов, прочитать файл в одной кодировке и сохранить в другой могут команды Python и других языков программирования, а также bash-команды, запускаемые из командной строки.

HTML

aka HyperText Markup Language

Что это такое?

Язык разметки, который используется для создания веб-страниц
Задает структуру документа
Внешний вид зависит от браузера и в разных браузерах может отличаться

Как он устроен?

Структура задается при помощи тегов
Теги ограничены угловыми скобками: <вот так="">
Теги могут быть закрывающими и открывающими: <открывающий>, </закрывающий>
У тегов могут быть атрибуты
Нужно, чтобы теги не пересекались

Пример

<p align="left">Это пример абзаца с <b>жирным</b> и <i>курсивным</i> шрифтом.</p>

Этой строчке соответствует такой код:

<p align="left">Это пример абзаца с <b>жирным</b> и <i>курсивным</i> шрифтом.</p>

align - это атрибут тега p, у атрибутов есть значение, которое пишется через знак =.

Ещё пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <— тип документа

<html> <— начало страницы

<head> <— вводная часть (обычно служебная информация)

<title>Заголовок страницы</title>

</head> <— вводная часть закончилась

<body> <— основная часть документа

<h1>Заголовок текста</h1>

<p>Абзац,

<br> разбитый на две строки</p>

</body> <— основная часть закончилась

</html> <— конец страницы

Какие бывают HTML теги?

<html>, <head>, <body>, <title>
Заголовки разного уровня: <h1>, <h2>, <h3>, …
<p> - абзац, <br> - перенос строки
<i> - курсивный текст, <b> - полужирный текст
<img src=""> - картинка, <a href=""> - ссылка (в кавычках ссылка на файл или url)
списки - <ol>, <ul>, элементы списка <li>
таблицы: <table>, <tr>, <td>
структурные элементы <div>, <span>
комментарии -

Принцип вложенности парных (открывающих и закрывающих) тегов

Так правильно: Зачем Герасим <i><b>утопил</b> Муму<\i>?
Так неправильно: Зачем Герасим <b><i>утопил</b> Муму<\i>?
и так неправильно: Зачем <b>Герасим <i>утопил</b> Муму<\i>?

Что ещё?

Семантическая разметка: атрибуты class, id у структурных тегов
Отражение смысловой структуры документа, его составных частей
Целая идеология Semantic Web, направленная на создание машиночитаемых веб-страниц
Обширные и детально проработанные схемы разметки людей, адресов, телефонов, товаров, организаций, всего на свете

XML

aka eXtensible Markup Language

Что это такое?

Формат разметки и хранения структурированных данных
На самом деле не язык, а набор синтаксических правил, позволяющий создавать языки для хранения и структурирования разнообразных данных
Огромное множество языков основано на XML (например, TEI-формат хранения архивных документов или словарей)

Как он устроен?

Данные обрамляются тегами
Набор тегов для каждого языка свой (определяется пользователем или сообществом пользователей)
Устройство документа и набор тегов жестко подчиняются стандартам XML

Стандарты XML

У каждого тега должен быть закрывающий тег, тег может быть самозакрывающимся: <br />
Элементы внутри тегов не могут пересекаться, могут быть только вложены друг в друга
У всех атрибутов есть значения, которые обрамляются кавычками

XML + HTML = XHTML

XHTML ― язык, основанный на тегах HTML и правилах XML

отличия от HTML:

<br> –> <br />
<font size=3> –> <font size="3">
<B> –> <b>

Форматы хранения лингвистических корпусов (в примерах)

горизонтальный (корпус LOB): all_ABN the_ATI girls_NNS love_VB a_AT scholar_NNS ._.

вертикальный (корпуса Universal Dependencies):

  Då      då     ADV      AB                    _   
  var     vara   VERB     VB.PRET.ACT           Tense=Past|Voice=Act   
  han     han    PRON     PN.UTR.SIN.DEF.NOM    Case=Nom|Definite=Def|Gender=Com|Number=Sing   
  elva    elva   NUM      RG.NOM                Case=Nom|NumType=Card   
  år      år     NOUN     NN.NEU.PLU.IND.NOM    Case=Nom|Definite=Ind|Gender=Neut|Number=Plur   
  .       .      PUNCT    DL.MAD                _   

XML (BNC, НКРЯ):

<s n="12"><w type="TO0" lemma="to">To </w>
           <w type="VVI" lemma="illustrate">illustrate </w>
           <w type="AT0" lemma="the">the </w>
           <w type="NN1" lemma="paradigm"> paradigm</w>
           <c type="PUN"> , </c>
           <w type="NN1" lemma="reference"> reference </w>
           <w type="VBZ" lemma="be"> is </w>
           <w type="VVN" lemma="make"> made </w>
           <w type="PRP" lemma="to"> to </w>...

JSON (Бесермянский корпус):

...
{
  "text": "tačʼe taos.",
  "words": [
    {
      "wf": "tačʼe",
      "wtype": "word",
      "off_start": 7,
      "off_end": 12,
      "next_word": 4,
      "sentence_index": 2,
      "ana": [
        {
          "lex": "tačʼe",
          "gr.pos": "PRO",
          "gr.number": "sg",
          "gr.case": "nom",
          "parts": "tačʼe",
          "gloss": "STEM",
          "gloss_index": "STEM{tačʼe}-",
          "trans_ru": "такой"
        }
      ]
    },
...  

ProtoBuf (Google serialization data) и мн. др.

QR-код

Графическое представление URL-ссылок. Защищая проект в виде постера, вы можете поместить на постер QR-код с адресом вашего сайта на github.io. QR-код можно сгенерировать, например, здесь.

Веб-дизайн. Bootstrap

Для создания веб-страницы рекомендуем использовать фреймворк Bootstrap.

Здесь подробно описано, как работает Bootstrap.

Зачем Bootstrap?

Набор шаблонов веб-страниц и JS-скриптов
Позволяет с минимальными усилиями создать красивую веб-страницу
Огромный набор готовых кнопочек, иконок, меню и проч.
Адаптивность - размеры и расположение каждого элемента меняются в зависимости от разрешения экрана

Устройство

12-колоночная сетка
Ряд html-элементов (например, анонсы статей на главной странице), который вы захотите позиционировать в сетке, нужно будет окружить контейнером (например, заключить в теги div) и прописать для него класс row (выглядеть открывающий тег в этом случае будет как <div class="row">).
Сами элементы внутри ряда вы сможете распределить по одной или сразу по нескольким типам сеток с помощью прописывания атрибута class со значением, например, .col-xs-цифра.
xs - размер сетки, ориентированный на размер экрана. Есть 4 размера: xs, sm, md, lg. При размере сетки xs ваш сайт создается прежде всего для маленьких экранов мобильных устройств, при размере lg ваш сайт ориентирован на просмотр с ПК.
Если вам нужно получить в результате три равные по размеру колонки, то нужно разделить 12 (размерность сетки в Bootstrap) на 3 (требуемое число колонок). Значит для каждого html-элемента внутри ряда нужно будет прописать одинаковые классы — <div class="col-xs-4">. Если нужны колонки не равной ширины, то нужно будет просто соблюсти условие, при котором цифры после col-xs- во всех трех классах в сумме должны составлять 12 (например, 2-4-6).

lingdata2020

Конспект лекции 2

Форматы представления данных. Кодировки файлов. Поиск по тексту с помощью регулярных выражений.