SharePoint online diseñando sitios públicos con Office 365 | SolidQ Summit 2012

Diseñando Sitios Públicos con SharePoint
Online (Office 365)
José Quinto Zamora
CyB200005
SharePoint and Search Specialist
MCPD, MCITP en SharePoint 2010
jquinto@solidq.com
@jquintozamora

 Conocer plataforma Office 365
 Conocer ventajas y limitaciones de sitios públicos en SharePOint
Online
 Conocer diferencias entre sitios privados y públicos
 Aprender ciertos trucos y soluciones
Objectivos

 Introducción Office 365
 Diferencias entre Planes Email, Edu, P, K y E
 Introducción a SharePoint Online
 Sitios públicos en SharePoint Online
 Administración
 Diseñador de sitios públicos
 Funcionalidades, Gadgets, Personalización de estilo
 Trucos y Soluciones
 Preguntas
Agenda

Introducción a Office 365
Plataforma Office 365

 Planes para pequeñas empresas
Comparativa dePlanes (Correo Electrónico, P, Edu )
 Correo (25 Gb)
 Calendario y Contactos
 Antivirus y Antispam
 Soporte 24x7
 Integración con AD
 + 50.000 usuarios
3,57€*
(usuario/mes)
5,25€*
(usuario/mes)
 Correo (25 Gb)
 Office Web Apps
 Sitio Web
 Intranet (solamente 1)
 Antivirus y Antispam
 50 usuarios
Planes Live@Edu: http://bit.ly/O365LiveEdu
Todos los planes: http://bit.ly/TodosPlanesO365

 Planes para trabajadores remotos
Comparativa dePlanes (K)
 Office Web Apps (Edición)
 Correo (1 Gb)
 Sitio Público
 Intranet
 Office Web Apps (visualización)
3,57€*
(usuario/mes)
7,25€*
(usuario/mes)

 Planes para mediana y gran Empresa
Comparativa dePlanes (E )
 Office Web Apps (Edición)
 Correo (25 Gb)
 Intranet (hasta 300 sitios)
 Sitio Web
 Office Web Apps (visualización)
 IM, Conferencias
 Soporte 24x7
 Integración con AD
 Funcionalidades empresariales de voz (Licencia de Lync Server)
7,25€*
(usuario/mes)
12,50€*
(usuario/mes)
20,75€*
(usuario/mes)
 Office Professional Plus (5 dispositivos por usuario)
 Correo Avanzado (archivo personal + 25 GB, retención
legal,…)
 Forms, Access, Excel, & Visio Services

Introducción a SharePoint Online
Diseñando Sitios Públicos con SharePoint Online (Office 365)

 SharePoint en la nube!
 Intranet (Sitios Privados)
 Más de uno
 Uso de SPD
 SandBox solution
 Publishing Features
 Editar la master page
 Webparts
 MyProfile
 …
 Sitio Web Público
 Uno por cuenta de Office 365
 Branding Limitado
 No WebParts
 No SPD
 …
Introducción a SharePoint Online
Dos tipos desitio

Sitios Públicos en SharePoint Online

 Sitios de páginas estáticas con fines de promoción
 Pequeña Empresa, página de contacto, etc.
 Landing Page, útli para promocionar cierta sección o producto de forma aislada
 Todos los planes de Office 365 incluyen un Sitio Público
 Excepto Plan Correo Electrónico
 Planes P  Tienen un sitio ya creado en el sitio raiz del dominio
 Planes K y E  Permiten la posibilidad de crear el sitio público en una Col. de Sitios
 Son la evolución de Office Live Small Business
 Estilos predefinidos, interfaz de diseño para usuarios finales
Introducción

 Centro de Administración de SharePoint (Planes K y E)
 Administrar Colecciones de sitios
Administración

DEMO
Administración Sitios Web Públicos

Diseñador de sitios públicos

 Los sitios públicos de SP Online NO se personalizan de la misma forma que el resto de
sitios de SharePoint.
 Están alojados en SharePoint con una Master que NO SE PUEDE MODIFICAR.
 SharePoin Designer NO ESTÁ SOPORTADO para editar sitios web públicos.
 Para cambiar el diseño y estilos del sitio usar el DISEÑADOR DE SITIOS.
Diseñador de sitios

 Aplicaciones o complementos que se pueden añadir a los sitios públicos (mismo
concepto de WebParts)
 No se puede extender, ni podemos crear nuestros propios Gadgets.
Gadgets

 Personalización de estilo avanzada
 Hojas de estilo personalizadas. (CSS)
 Sobrescribimos la hoja de estilos
 Herramientas de desarrollo de
Internet Explorer y Firefox
 IE Developer Toolbar (F12)
 Comprueba el impacto de los
cambios en el CSS en tiempo real
Personalización deestilo
http://eslindustriesdemo.sharepoint.com

 La master page es mucho más sencilla: 93 líneas vs. >600 líneas
 El código HTML es mucho más simple
 La mayoría de las clases son diferentes así que no es posible reutilizar
el branding tradicional de SharePoint
 En lugar de clases .s4-XYZ verás .MS_ y .MSC_
 Guía CSS para diseño de Office Live Websites CSS:
Personalización deestilo. Usando CSS Personalizado
http://coderightdesign.com/Documents/CSS_Guide_OLSB.pdf

Trucos y Soluciones
Developer Mode = ON

 Añadir Scripts con HTML vs PayPal Control
 Añadir un vídeo de YouTube vs Alojado en SP Online
 Añadir etiquetas de Redes Sociales
 Añadir Dirección de e-Mail Ofuscada
 Redirección de Página
 Menú desplegable con JQuery
Trucos y soluciones
http://www.solutionsforoffice365.com/Pages/solutions.aspx

 HTML Gadget
 Pone un Iframe
 MAL si queremos interactuar con el DOM existente
 PayPal GadGet
 Pone un DIV
 BIEN para interactuar con DOM existente
Añadir Scripts con HTMLvs PayPal Control

DEMO
Demo HTML vs PayPal Control

 Gadget de Video
 ¿Cómo insertar un vídeo alojado en SharePoint?
 Con HTML o PayPal Gadget
Añadir un vídeo de YouTuve vs Alojado enSP Online
<object id="player" width="320" height="240" classid="CLSID:6BF52A52-394A-11d3-
B153-00C04F79FAA6">
<param name="url" value="../Documents/HdV.wmv">
<param name="autoStart" value="true">
</object>

 Facebook
 https://developers.facebook.com/docs/reference/plugins/like
 Twitter
 https://twitter.com/about/resources/buttons#tweet
 Añadir con HTML
o PayPal Gadget
Añadir etiquetas deRedes Sociales

DEMO
Añadiendo etiquetas sociales

 Evitar spam
 Introducir con HTML Gadget
Añadir Dirección dee-Mail Ofuscada
<script type="text/javascript">
document.write('<a
href="mailto:jquinto@solidq.com">jquinto@solidq.com</a>')
</script>
setTimeout('HtmlControlJS.loadFramex28x27ctl00_IWS_WH_CPH_Content_HtmlControl
1x27, x27x5cx3cSCRIPT
TYPEx5cx3dx5cx22textx5cx2fjavascriptx5cx22x5cx3ex5cx0dx5cx0adocument.writex5cx28x5cx
27x5cx3ca stylex5cx3dx5cx22font-sizex5cx3a12ptx5cx3bx5cx22
hrefx5cx3dx5cx22mailtox5cx3ajquintox5cx26x5cx2364x5cx3bsolidq.comx5cx22x5cx3ejquinto
x5cx26x5cx2364x5cx3bsolidq.comx5cx3cx5cx2fax5cx3ex5cx27x5cx29x5cx0dx5cx0ax5cx3cx5
cx2fSCRIPTx5cx3ex27,3082, x2714.0.9057.2036x27x29x3b', 0);
</script>

DEMO
Ofuscar correo electrónico

 A veces tenemos página principal (sección de menú) que no queremos
que tenga contenido, sino que redirija a una subpágina.
 Introducir con PayPal Gadget
 Ya que accede a document.location.href
Redirección de página
<form action="">
<input type="image" style="display:none !important;" />
var pagina = 'http://www.dominio.es/Pages/PaginaDestino';
document.location.href=pagina;
</script>
</form>

 www.gumalba.es
Menú desplegable con JQuery

DEMO
Menú desplegable con JQuery

 Finalidad
 Página de contacto para PYME
 Página de campañas de ciertos producto o marca
 Bajo Coste
 Con cualquier Plan de O365 (excepto solo Mail)
 Te olvidas de la infraestructura
 Personalización de estilo poco costosa
 Fácil para Gestor de Contenido
 Interfaz fácil para el usuario
Conclusiones

Si quieres disfrutar de las mejores sesiones de
nuestros mentores de España y Latino América,
ésta es tu oportunidad.
http://summit.solidq.com/madrid/
Síguenos:

SharePoint online diseñando sitios públicos con Office 365 | SolidQ Summit 2012

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (6)

Mais de SolidQ

Mais de SolidQ (20)

Último

Último (12)

SharePoint online diseñando sitios públicos con Office 365 | SolidQ Summit 2012