jueves, 17 de mayo de 2012

Sharepoint y HTML5


SharePoint and HTML5 por Fernando Hunth
clip_image001El propósito de esta serie de SharePoint y HTML5 no es desmembrar HTML5 sino para ver cómo podemos aplicarlo dentro de SharePoint. Cada artículo, presenta las investigaciones pertinentes y vínculos útiles a otros recursos relacionados para SharePoint y HTML5
clip_image003Introducción
Hay muchos recursos donde se puede obtener información acerca de la nueva versión de HTML, HTML5, en detalle. Puede encontrar varios recursos aquí:
Cuando se pregunta "Que es HTML5" se escuchan algunas respuestas como las siguientes:
"Se trata de la nueva web semántica."
"Es un reemplazo de Adobe Flash."
"Es un Nuevo lenguaje para aplicaciones mobile."
También se escuchan personas que mencionan los nuevos elementos estructurales, Client Storage, etc
HTML5 fue presentado por el WHATWG - Web Hypertext Application Technology Working Group y W3C World Wide Web Consortium. Diseñado para ayudar a los desarrolladores web y diseñadores, sin necesidad de añadir plugins para cosas como el vídeo, audio/mp3, la función de selección de fecha, marcador de posición en el cuadro de entrada, canvas, gráficos 2D/3D, base de datos SQL local , etc
Con todo lo que está disponible se puede empezar a escribir una web más lógica y semántica. Es nuestro trabajo utilizar esas herramientas de una manera inteligente a fin de crear contenidos de calidad y mejorar la forma de escribir y entender la web.
clip_image005Preguntas Básicas
Comencemos por preguntarnos algunas preguntas básicas
Que es <!DOCTYPE> ?
<!DOCTYPE> es una instrucción para que los navegadores sepan qué versión de HTML de la página está escrita , no tiene etiqueta de cierre ni es case sensitive.
<! DOCTYPE> debe ser lo primero en un documento HTML 5, antes de la etiqueta <html>. Al igual que en HTML 4.01, todo <! DOCTYPE> requiere una referencia a una definición de tipo de documento (DTD), ya que HTML 4.01 se basa en Standard Generalized Markup Language (SGML). HTML5 no está basado en SGML, y por lo tanto no requiere una referencia a una definición de tipo de documento (DTD).
clip_image007Elementos Markup
<article>
<aside>
<bdi>
<command>
<details>
<summary>
<figure>
<figcaption>
<footer>
<header>
<hgroup>
<mark>
<meter>
<nav>
<progress>
<ruby>
<rt>
<rp>
<section>
<time>
<wbr>
Elementos Media
<audio>
<video>
<source>
<embed>
<track>
<canvas>
Atributo de Input Type
tel
search
url
email
datetime
date
month
week
time
datetime-local
number
range
color
placeholder
Video y Audio
Video

1 <video width="800" height="600" controls="controls">
2 <source src="Satisfaction.mp4" type="video/mp4" />
3 <source src=" Satisfaction.ogg" type="video/ogg" />
4 </video>

Audio

1 <audio controls="controls">
2 <source src="Satisfaction.ogg" type="audio/ogg" />
3 <source src="Satisfaction.mp3" type="audio/mpeg" />
4 </audio>

Elemento Canvas
Se puede utilizar el elemento canvas para dibujar imágenes de gráficos en una página web mediante JavaScript / jQuery, como a continuación

1 <canvas id="SharepointCanvas" width="800" height="600"></canvas> <script type="text/javascript">
2 var SharepointCanvas=document.getElementById("SharepointCanvas");
3 var pcdsText=SharepointCanvas.getContext("2d");
4 pcdsText.fillStyle="#FF0000";
5 pcdsText.fillRect(0,0,150,75);
6 </script>

clip_image009Storage
localStorage
Si no estás usando HTML5, lo podes hacer con las cookies. Las cookies no son muy buenos para grandes cantidades de datos, ya que se pasan en todos los roundtrips, comprometiendo el rendimiento.
Ahora en HTML5, es posible almacenar grandes cantidades de datos sin afectar al rendimiento del sitio web y los datos se almacenan en diferentes áreas. Si necesitas para crear localstores sólo tenés que llamar a los objetos localStorage como a continuación.

1 <script type="text/javascript">
2 localStorage.name="Fernando Hunth";
3 document.write(localStorage.name);
4 </script>
5 <script type="text/javascript">
6 localStorage.address="Argentina";
7 document.write(localStorage.address);
8 </script>

El objeto sessionStorage guarda la información para tu actual sesión. La información es borrada cuando se cierra el browser.
Podes darle una Mirada a los elementos HTML5 y sus constantes cambios en http://dev.w3.org/html5/markup/elements.html
Arranquemos viendo algo con SharePoint y HTML5
Hay algunas maneras básicas de usar HTML5 en SharePoint.
  • CEWP
  • Master Pages
  • Custom WebParts
  • Etc
También hay cosas más avanzadas para su uso en SharePoint, pero vamos a verlo más adelante. En este capítulo vamos a cubrir cómo hacer uso de algunos de HTML5 con un CEWP
Content Editor Web Part - CEWP
Hay un ejemplo en vivo (Browsear con Chrome ) aqui que muestra un simple rectángulo rojo dibujado en un elemento CANVAS usando una SharePoint Content Editor Web Part.
clip_image011
Estos son los pasos para implementarlo en tu página Sharepoint:
Pasos
  • Crear un Nuevo archive.js y agregarle este código:

01 <canvas id="myCanvas" width="200" height="100" style="border-bottom: #c3c3c3 1px solid; border-left: #c3c3c3 1px solid; border-top: #c3c3c3 1px solid; border-right: #c3c3c3 1px solid">
02 </canvas>
03
04 <script type="text/javascript">
05
06 var c=document.getElementById("myCanvas");
07 var ctx=c.getContext("2d");
08 ctx.fillStyle="#FF0000";
09 ctx.fillRect(0,0,150,75);
10
11 </script>

  • Subir el archivo .js a una SharePoint Document Library
  • Crear una nueva página con una Content Editor Web Part
  • Editar la Content Editor Web Part
  • En el Content Link escribir el path al archivo javascript que subiste
  • Click OK
  • Guardar la pagina
  • Browsear con un browser que permita rendering HTML5 (por ejemplo Google Chrome)