Конспект лекции 2
Форматы представления данных. Кодировки файлов. Поиск по тексту с помощью регулярных выражений.
Форматы представления данных
- Редакторы документов и ассоциированные типы файлов: txt, doc (docx, odt), xls (xlsx, ods). PDF.
- Переходные форматы: csv, tsv, rtf.
- HTML-формат. Вики-формат. Markdown. XML-формат.
- Кодировки текста: Cyrillic Windows (1251), KOI8-R, Unicode (UTF-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):
1 Då då ADV AB _
2 var vara VERB VB.PRET.ACT Tense=Past|Voice=Act
3 han han PRON PN.UTR.SIN.DEF.NOM Case=Nom|Definite=Def|Gender=Com|Number=Sing
4 elva elva NUM RG.NOM Case=Nom|NumType=Card
5 år år NOUN NN.NEU.PLU.IND.NOM Case=Nom|Definite=Ind|Gender=Neut|Number=Plur
6 . . PUNCT DL.MAD _
- XML (BNC, НКРЯ):
```
To
illustrate
the
paradigm
,
reference
is
made
to ...
```
* 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-код можно сгенерировать, например, [здесь](http://qrcoder.ru/).
***
# Веб-дизайн. Bootstrap
Для создания веб-страницы рекомендуем использовать фреймворк [Bootstrap](http://getbootstrap.com/getting-started/).
* [Здесь](http://ktonanovenkogo.ru/html/bootstrap/setochnaya-sistema-bootstrap-3-primer-raboty-chast-2.html) подробно описано, как работает Bootstrap.
### Зачем Bootstrap?
* Набор шаблонов веб-страниц и JS-скриптов
* Позволяет с минимальными усилиями создать красивую веб-страницу
* Огромный набор готовых кнопочек, иконок, меню и проч.
* Адаптивность - размеры и расположение каждого элемента меняются в зависимости от разрешения экрана
### Устройство
* 12-колоночная сетка
* Ряд html-элементов (например, анонсы статей на главной странице), который вы захотите позиционировать в сетке, нужно будет окружить контейнером (например, заключить в теги `div`) и прописать для него класс `row` (выглядеть открывающий тег в этом случае будет как ``).
* Сами элементы внутри ряда вы сможете распределить по одной или сразу по нескольким типам сеток с помощью прописывания атрибута `class` со значением, например, `.col-xs-цифра`.
* `xs` - размер сетки, ориентированный на размер экрана. Есть 4 размера: `xs`, `sm`, `md`, `lg`. При размере сетки `xs` ваш сайт создается прежде всего для маленьких экранов мобильных устройств, при размере `lg` ваш сайт ориентирован на просмотр с ПК.
* Если вам нужно получить в результате три равные по размеру колонки, то нужно разделить 12 (размерность сетки в Bootstrap) на 3 (требуемое число колонок). Значит для каждого html-элемента внутри ряда нужно будет прописать одинаковые классы — `
`. Если нужны колонки не равной ширины, то нужно будет просто соблюсти условие, при котором цифры после `col-xs-` во всех трех классах в сумме должны составлять 12 (например, 2-4-6).
# Полезные ссылки
* [начальный курс HTML](http://htmldog.com/guides/html/beginner/)
* [начальный курс HTML на русском](http://www.site-do.ru/html/)
* [объяснение сеточной системы Bootstrap](http://ktonanovenkogo.ru/html/bootstrap/setochnaya-sistema-bootstrap-3-primer-raboty-chast-2.html)
### Видео о Bootstrap:
* [Анатомия Bootstrap 3 для начинающих. Урок ](https://www.youtube.com/watch?v=9N88P_CMQh0)
* [Уроки по Bootstrap 3](https://www.youtube.com/watch?v=AYkEfr-5b1o&list=PLypd1VrGv7FPokhw3f5pwBQTHsU9T2mBq)