Размышляйте и пробуйте: HTML5, CSS3 для SharePoint. часть 1.

Статья получилась объемная, пришлось разбить ее на 4 части.

Грядут перемены!

Не за горами 2014 год, когда будут утверждены cтандарты HTML5… Прошло  немало времени с момента принятия предыдущего стандарта – Википедия говорит что это произошло в  1997 году – за это время в интернете произошло много изменений.  Число людей, активно его использующих и проводящих в нем значительное время, колоссально возросло. А значит, возросла нагрузка на серверы.  Возникли веб-приложения, работающие целиком в браузере. Стала широко использоваться технология AJAX. Возникли социальные сети. Да и  сама компьютерная техника также сильно обновилась: появилась возможность аппаратного ускорения за счет ресурсов видео-карт, даже у небольшие нетбуков появились многоядерные процессоры.

На эти требования должна  ответить грядущая спецификация HTML5 – целое семейство веб-стандартов. Они несут в себе немалые  изменения и дают  совершенно новые возможности. Ключевые перемены затронули   семантику, веб-формы , графику, мультимедиа и javascript-API.

Microsoft SharePoint – в своем основном назначении – не может игнорировать функциональные возможности и  преимущества API-интерфейсов, предлагаемых спецификацией HTML5, а также все новое, предлагаемое спецификацией CSS3.  В использовании SharePoint очень гибкая система.

Семантика и разметка

• В HTML 5, есть только один тип документа. Она объявляется  в начале странице
  <!-- DOCTYPE HTML-->

  <!-- DOCTYPE HTML-->

  и говорит браузеру, что это HTML-документ.

• Изменилась сама разметка в HTML5, появились новые семантические элементы, которые упрощают и сам вид  документа и  взаимодействие разработчика и дизайнера.  Появились  новые семантические теги – header, footer, article и др.,  теги для разметки текста – mark, ruby, details. Кое-какие теги предыдущей спецификации признали устаревшими  и они были удалены, некоторые теги претерпели изменения. Благодаря этому разметка имеет чистый семантический  код, структура документа  более легкая и функциональная.
• Internet Explorer, версия которого меньше 9 не поддерживает новые элементы, представленные в HTML5, такие как header, article, footer, figure и т.д. Поэтому для таких браузеров надо использовать скрипт, который заставит IE понимать эти элементы.
  <!--[if lt IE 9]>
              <mce:script _mce_src="http://html5shim.googlecode.com/svn/trunk/html5.js"></mce:script>
      <![endif]-->

  <!--[if lt IE 9]>
  			<mce:script _mce_src="http://html5shim.googlecode.com/svn/trunk/html5.js"></mce:script>
  	<![endif]-->

• новые элементы разметки — инлайновые (inline), поэтому лучше сразу сделать их блочными. Для этого пишем в CSS следующее:
          header, nav, section, article, aside, footer {display:block}

  		header, nav, section, article, aside, footer {display:block}

  Теперь упомянутые элементы будут  вести себя как div’ы и далее их можно будет оформить, используя CSS.

• Разметка страницы в общем случае имеет вид:

 

• В HTML5 ее реализация будет выглядеть так:

1. тег header – оборачивает вступительные элементы, такие как название страницы или логотип, или в нем содержится заголовок  какой либо секции, таблицы, он может содержать форму поиска. Этот тег можно использовать несколько раз в документе, но если в вашемг header содержит только один заголовочный элемент, то этот тег здесь, скорее всего, не нужен. Итак, тег header  - это группа вводных или навигационных средств. Входящий в него элемент – тег hgroup - это набор заголовков h1-h6, представляющий заголовок секции, если он состоит из нескольких подзаголовков.
2. тег nav – это область основной навигации. Навигация размечена так же, как мы сделали бы это в HTML4 или XHTML с использованием неупорядоченного списка. Главное то, что этот список находится внутри  тега nav.

    

   

3. тег section – используется для обозначения раздела в документе. Он может содержать все виды разметки и несколько разделов могут быть вложенными друг в друга.
4. тег article – используется для отдельной записи или статьи на сайте.
5. тег aside – Определяет вторичный контент страницы.  В этом случае мы используем его для сайдбара.
6. тег footer – должен содержать дополнительную информацию, например, информация о том, кто это написал, информация об авторских правах, ссылки на соответствующие документы и так далее.

Возникает вопрос, можно ли использовать на практике HTML5, в частности использовать в SharePoint HTML5, раз его стандарт еще не утвержден? Ответ – да, конечно можно, использование в SharePoint HTML5 вполне правомерно.

​ ​