SharePoint 2010 HTML5 кодирование

В предыдущих статьях “Размышляйте и пробуйте: HTML5, CSS3 для SharePoint. часть 1-4″” было совершено путешествие в мир HTML5, этот краткий обзор дал возможность понять блистательные перспективы, которые открывают новые стандарты и даже вкратце было сказано о том, как использовать эти новые возможности, в том числе, как можно использовать HTML5 в SharePoint 2010.

Рассмотрим более подробно как в кодах взаимодействуют SharePoint и новая версия языка разметки гипертекста.

По умолчанию все мастер-страницы хранятся в папке masterpage, которая, в свою очередь, вложена в папку _catalogs, находящуюся в корневом каталоге веб-узла SharePoint. Открываем разработку сайтов в SharePoint 2010 в SharePoint Designer 2010 и в каталоге _catalogs / MasterPage делаем копию основной главной страницы - копию файла v4.master. Назовем ее, к примеру, v4-html5.master. Это стандартная процедура. Всегда следует создавать копию главной страницы, никогда не следует проводить изменения непосредственно в out of the box (OOTB) v4.master (мастер странице по умолчанию). Главные страницы, страницы с расширением .master, разрешается редактировать в SharePoint Designer, подобно обычным страницам контента.

Открываем ваш пользовательский Master Page в редакторе SPD (Microsoft Office SharePoint Designer— HTML-редактор в стиле WYSIWYG, заточенный под создание SharePoint) в режиме расширенного редактирования и находим строчку:
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```
Она, как правило, находится непосредственно перед тегом и она определяет тип документа как XHTML 1.0 Strict.

Заменим существующий DOCTYPE на доктайп HTML5:
```
<DOCTYPE HTML>
```
```
<DOCTYPE HTML>
```
При замене будьте внимательны, проверьте, что заменили весь тег: в редакторе он часто бывает поделен на две строки.
Видите, насколько упростилось определение доктайпа! Раньше - это определение типа документа было длинной строкой, теперь же оно занимает всего 15 символов!

Еще момент – определение кодировки символов также стало гораздо короче. Было:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

А теперь можно так:

<meta charset="utf-8">

<meta charset="utf-8">

Из тега html можно убрать xmlns. Было:

<html lang="" dir="" runat="server" xmlns:o="urn:schemas-microsoft-com:office:office" __expr-val-dir="ltr">

<html lang="" dir="" runat="server" xmlns:o="urn:schemas-microsoft-com:office:office" __expr-val-dir="ltr">

А теперь можно опустить XMLNS (это требовалось в XHTML, но излишне в HTML5). Теперь можно указывать так:

<html lang="" dir="" runat="server"  __expr-val-dir="ltr">

<html lang="" dir="" runat="server"  __expr-val-dir="ltr">

При указании ссылок на таблицу стилей вместо прежнего указания:

<link rel="stylesheet" type="text/css" href="file.css" />

<link rel="stylesheet" type="text/css" href="file.css" />

можно писать

<link rel="stylesheet" href="file.css" />

<link rel="stylesheet" href="file.css" />

Ссылки на JavaScript указывали раньше так :
```
<script type="text/javascript">
```
```
<script type="text/javascript">
```
Теперь достаточно написать:
```
<script>
```
```
<script>
```
Еще один момент. XHTML 1.0 Strict требовал наличие слеша (/) перед закрывающим тегом. Теперь его можно не ставить. Вот пример, как мы привычно записывали тег:
```
<meta http-equiv="Expires" content="0"/>
```
```
<meta http-equiv="Expires" content="0"/>
```
Теперь можно писать:
```
<meta http-equiv="Expires" content="0">
```
```
<meta http-equiv="Expires" content="0">
```

SharePoint Server 2010 поддерживает несколько популярных веб-браузеров. Однако в некоторых веб-браузерах функциональные возможности SharePoint Server 2010 могут отключаться, ограничиваться, или для их использования могут потребоваться дополнительные действия. В ряде случаев функции для не самых важных задач администрирования могут быть недоступными. Не подлежит сомнению, что SharePoint лучше всего работает в связке с родным браузером IE, последние версии которого очень близко подошли возможностям конкурентов. Но разброс версий этого браузера не мал, и в каждой из них содержатся свои уникальные ошибки, свои особенности при отображении страниц и т.д. За режим рендеринга отвечает, как и хочется сказать, могучий мета-тег X-UA-Compatible. Он находится внутри секции head. Его вид:
```
<meta http-equiv="X-UA-Compatible" content="IE=версия" />
```
```
<meta http-equiv="X-UA-Compatible" content="IE=версия" />
```
То есть, если в нем стоит тип значения IE=x, то x — это желаемая версия движка.
Если указано значение параметра “режим документа” для IE - “Edge” – это означает, что всегда используется последний доступный стандартный режим отображения независимо от !DOCTYPE. Для версии 8.0 это режим IE8, для версии 9.0 это режим IE9.
В нашем примере тег выглядит так:
```
<meta http-equiv="X-UA-Compatible" content="IE=8" />
```
```
<meta http-equiv="X-UA-Compatible" content="IE=8" />
```
Заменим тип значения либо на "IE = 9", либо на “IE=edge” или, еще лучше, на “IE=edge,chrome=1”. (Добавка chrome=1 позволяет пользователям IE, которые установили плагин Google Chrome Frame, использовать рендерер WebKit и JS-движок V8). Т.е. мы хотим, чтобы страницы отображались так, как это делает браузер IE9, или использовался последний доступный стандартный режим отображения. Главное, что браузер не использовал режим Quirks Mode, который может поломать разметку.
Заметьте, мета-тег X-UA-Compatible должен находиться в секции head, сразу после title. Ему не должно предшествовать никакие другие мета-тегов, ссылки на CSS и JS. В противном случае он игнорируется!
```
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
```
```
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
```
Добавляем также в секцию head ссылку на скрипт html5shim, обеспечивающий поддержку HTML5 старыми браузерами
```

```
```

```
Теперь вы можете начать использовать элементы HTML5, такие как header, footer, nav, section и также можете начать использовать мультимедийные элементы, такие как canvas, audio и video.
Ну и, разумеется, можно использовать CSS3 для оформления стилей всех элементов управления, которые загружаются на главной странице. Из предыдущего обзора известно, что множество функций мы можем использовать для оформления, что многое из нужного функционала может быть реализовано исключительно с помощью чистого CSS3, что с его использованием потенциал верстки растет экспоненциально!
Вот, к примеру скругление уголков у поиска - элемента управления страницы:
```
.s4-search input {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    }
.srch-gosearchimg {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    }
```
```
.s4-search input {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	}
.srch-gosearchimg {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	}
```
Или панели быстрого запуска на странице придать вид – скругленные углы и тень:
```
.s4-ca {
    margin-left: 165px;
}
body #s4-leftpanel-content {
    border-radius: 10px;
    box-shadow: 8px 8px 5px #888;
}
```
```
.s4-ca {
	margin-left: 165px;
}
body #s4-leftpanel-content {
	border-radius: 10px;
	box-shadow: 8px 8px 5px #888;
}
```
Это примеры простых изменений с CSS3, с помощью которых можно улучшить свой сайт SharePoint. Можно, например, изменить цвет выделяемого текста, можно попробовать добавить тень к тексту (должно работать во всех браузерах и IE10), использовать для фона - градиенты (IE не поддерживает).
Еще пример – скруглим углы картинки:

И стандартный внешний вид сайта преображается таким образом:

Надеюсь, что это небольшое путешествие в мир кодирования SharePoint 2010 HTML5 окажется полезным.

Практикум – кодирование SharePoint 2010 и HTML5

Читайте также:

2 комментариев

Комментарии

Рубрики

Свежие записи