sharepoint-html5-css3

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

Динамичная графика.

На стороне клиента стало значительно проще работать с графикой. В HTML5 присутствует тег canvas со специальным яваскриптовым API. Также в HTML5 официально включен тег svg – это уже векторная графика. Canvas и SVG — это две независимые технологии, не зависящие друг от друга, но при этом прекрасно дополняющие друг друга, хотя у них различное происхождение и природа.

Canvas это очень круто!

Canvas – это скорость – он быстр! Canvas – это понятность – он простой! Canvas – это интегрируемость –  его можно вставить в любое место страницы!
Canvas работает как растр, работает быстро и применим для рисования, например, диаграмм, рисования произвольных фигур, манипуляций с пикселями, в него можно вставлять изображения, градиенты и прочую красоту.

Элемент Canvas и SharePoint.

Нет нужды говорить о том, что роль пользовательского интерфейса велика, как важно, что бы с ним было удобно работать. Учеными замечено, что он оказывает влияние даже на чувства, эмоции, настроение пользователя. Возможно использовать HTML5 в SharePoint в CEWP (Content Editor Web Part – Редактор контента), Master Pages, Custom WebParts и т.д. Создайте новый JS файл и добавьте код.:

<canvas id="SharepointCanvas" width="800" height="600"></canvas>
<script type="text/javascript">
var SharepointCanvas=document.getElementById("SharepointCanvas");
var pcdsText=SharepointCanvas.getContext("2d");
// Задаем свойства стиля оформления.
pcdsText.fillStyle = '#00f';
pcdsText.strokeStyle = '#f00';
pcdsText.lineWidth = 4;
 
pcdsText.beginPath();
// Начинаем с верхней левой точки.
pcdsText.moveTo(0, 0); // задаем координаты (x,y) 
pcdsText.lineTo(150, 0);
pcdsText.lineTo(0, 75);
pcdsText.lineTo(0, 0);
 
// Готово! Теперь заполните фигуру, и начертите штрихи.
// Примечание: фигура будет невидимой, пока не будет вызван 
// любой из этих трех методов.
pcdsText.fill();
pcdsText.stroke();
pcdsText.closePath();
 
</script>
<canvas id="SharepointCanvas" width="800" height="600"></canvas>
<script type="text/javascript">
var SharepointCanvas=document.getElementById("SharepointCanvas");
var pcdsText=SharepointCanvas.getContext("2d");
// Задаем свойства стиля оформления.
pcdsText.fillStyle = '#00f';
pcdsText.strokeStyle = '#f00';
pcdsText.lineWidth = 4;

pcdsText.beginPath();
// Начинаем с верхней левой точки.
pcdsText.moveTo(0, 0); // задаем координаты (x,y) 
pcdsText.lineTo(150, 0);
pcdsText.lineTo(0, 75);
pcdsText.lineTo(0, 0);

// Готово! Теперь заполните фигуру, и начертите штрихи.
// Примечание: фигура будет невидимой, пока не будет вызван 
// любой из этих трех методов.
pcdsText.fill();
pcdsText.stroke();
pcdsText.closePath();

</script>

Поместите  js-файл в библиотекe документов SharePoint, создайте новую страницу  Content Editor Web Part, Content Link  прописываем полный путь к файлу JavaScript, жмем ОК, сохраняем страницу.

sharepoint

Могучие возможности других новых API.

  • API-интерфейс кеш-приложений для поддержки офлайновых Web-приложений.
  • API-интерфейс касающийся истории просмотров – доступ к ней и добавления страниц к ней.
  • API-интерфейс типа drag-and-drop для использования с атрибутом draggable.

    Об использовании этого интерфейса в SharePoint читайте в статье Андрея  Маркеева “Добавление HTML5-поддержки операций «drag and drop» в списки SharePoint”  http://msdn.microsoft.com/ru-ru/magazine/hh852596.aspx

  • API-интерфейс редактирования для использования с атрибутом contenteditable.
  • Хранилище на клиентской стороне с API-интерфейсами JavaScript для пар типа «ключ/значение», а также встроенные базы данных на основе SQL.
Интересная статья?  Подпишитесь на обновления блога и получите еще больше информации по RSS Vladimir Shurygin RSS  ,   RSS Vladimir Shurygin Email   или  twitter Vladimir Shurygin twitter !
Поделитесь с друзьями этой статьей в: