Branding en SharePoint 2010. Trucos y Buenas Prácticas | SolidQ Summit 2012
Branding en Sharepoint 2010
35
-
Upload
daniel-laco -
Category
Technology
-
view
1.345 -
download
3
description
Webcast realizado para el MUG (Grupo de Usuarios de Microsoft, Buenos Aires, Argentina) La temática giró alrededor del diseño y configuración de soluciones de Sharepoint.
Transcript of Branding en Sharepoint 2010
Branding en Sharepoint 2010
Daniel Laco Director Ejecutivo
daniellvemncomar
Agenda Branding
Queacute caminos tengo
Herramientas
Tips amp Tricks
httpspbuzzitsptopsites
httpspbuzzitbsdesigns
De que se trata Arquitectura de la Informacioacuten
Disentildeo
Esquemas (Wireframes)
Branding
Page Layouts
Master Pages
HTML CSS JavaScript
Conocimientos Necesariosbull SharePoint 2010
Entender Master Pages Page Layouts etc
bull Conocimientos de Disentildeo Web
HTML CSS JavaScript XSLT Silverlight y cualquier tecnolgoacutea de cliente que se pueda
utilizar
bull Entender ASPNET es un plus
bull Manipulacioacuten de imaacutegenes (Expression Photoshop Fireworks etc)
Herramientas de Personalizacioacuten
Logo del Sitio Formato WebParts
Cambio de Colores Backgrounds Fonts Editar archivo CSS
Cambiar Page Layout y Contenido Editar Master Pages Editar Page Templates (solo SharePoint Server)
Compartir personalizacioacuten con Otros Build Themes y Definiciones de Sitios (Site Definitions)
faacutecil
Browser
SharePoint
Designer
SPD +
Visual Studio
com
ple
jo
Que caminos tengo
bull Master Pages
bull Page Layouts
bull CSS Personalizadas
Por Sharepoint (en el Server)
bull HTML
bull CSS
bull JavaScript Por HMTL
bull XLST
bull WebParts
bull ClientOM
bull Ribbon
Por Caracteriacutesticas de Sharepoint
Master Pages + Page Layouts
Master Page
Master Page
Page Layout
Master Pages
bull Team site master page
bull User content pages (listscontent pagesetc)
bull _layouts pages (site settings etc) v4master
bull Para apps tipo Search o Office Web Applications
bull Si no necesita Site Navigation Ribbon
bull Si se necesita espacio minimalmaster
bull Para paginas de Errores o de Login simplemaster
bull Muestra el sitio con interfaces Legacy
bull Sin Ribbon ni fluidez defaultmaster
httpstartermasterpagescodeplexcom
Content Placeholders
ltaspContentPlaceholder ID=PlaceHolderLeftNavBargt runat=server gt
Content Placeholder Description
PlaceHolderAdditionalPageHead Used to add extra components such as JavaScript Jscript and
Cascading Style Sheets in the head section of the page
PlaceHolderBodyAreaClass The class of the body area This placeholder is no longer used in
SharePoint 2010
PlaceHolderBodyLeftBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderBodyRightMargin This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderCalendarNavigator The date picker used when a calendar is visible on the page
PlaceHolderFormDigest The container where the page form digest control is stored
PlaceHolderGlobalNavigation The global navigation breadcrumb control on the page
PlaceHolderGlobalNavigationSiteMap The list of sub-sites and sibling sites in the global navigation on the
page
PlaceHolderHorizontalNav The navigation menu that is inside the top navigation bar
PlaceHolderLeftActions The additional objects above the Quick Launch bar
PlaceHolderLeftNavBar The Quick Launch navigation bar
PlaceHolderLeftNavBarBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderLeftNavBarDataSource The placement of the data source used to populate the left navigation
bar
PlaceHolderLeftNavBarTop The top section of the left navigation bar
PlaceHolderMain The main content of the page
PlaceHolderMiniConsole This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderNavSpacer This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderPageDescription Description of the current page
PlaceHolderPageImage This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderPageTitle The title of the site
PlaceHolderPageTitleInTitleArea The title of the page which appears in the title area on the page
PlaceHolderQuickLaunchTop The top of the Quick Launch menu
PlaceHolderQuickLaunchBottom The bottom of the Quick Launch menu
PlaceHolderSearchArea The section of the page for the search box and controls
PlaceHolderSiteName The name of the site where the current page resides
SPNavigation Used for additional page editing controls
PlaceHolderTitleAreaClass The class for the title area This control is now in the head tag and no
longer used in SharePoint 2010
PlaceHolderTitleAreaSeparator This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTitleBreadcrumb The breadcrumb text for the breadcrumb control
PlaceHolderTitleLeftBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTitleRightMargin This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTopNavBar The container used to hold the top navigation bar
PlaceHolderUtilityContent The additional content at the bottom of the page outside the form tag
Content Placeholders
httpspbuzzitsp2010dcph
CSS - SharePoint OOB (Out of the Box)
bull Los links CSS de SharePoint son colocados en cada paacutegina bull No se pueden remover completamente todos los links a CSS
bull Diferentes tipos de selectores bull Element (ej h1 h1extra)
bull Class (eg brand - ltdiv class=ldquobrandrdquogt
bull Id (ej logo - ltdiv id=ldquologordquogt
bull El mismo selector puede ser ldquosobreescritordquo en un archivo css
bull Recomentable ldquosobreescribirrdquo los estilos OOB de Sharepoint en un archivo propio
bull Muchas de las caracteriacutesticas OOB requieren todos los atributos desde los selectores OOB
CSS - Agregando estilos personalizados
bull Use el control CssRegistration bull Permite a los disentildeadores controlar el orden en que se carga el CSS
bull Provee el control sobre la cascada
bull $SPUrl~sitecollection reemplaza con el URL correcto en runtime
ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgt after=corev4css gt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgtgt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderblueyondercssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgtgt
CSS ndashSharePoint UI
bull CSS es uacutetil para ocultar UI de SharePoint
bull PublishingWebControlsEditModePanel puede ser usado para efectos similares bull Oculta el contenido cuando la paacutegina no estaacute en Modo Edicioacuten
ltstyle type=textcssgt
body s4-ribbonrow
display none
ltstylegt
Temas
12 colores 2 Fonts
Controla el look and feel del sitio
Usa Temas de Office (thmx)
Se pueden crear temas via PowerPoint
Que podemos hacer por HTML
bull HTML Element markup language (html)
bull Javascript programming language
bull jQuery and other libraries housed in JS files bull Cascading Style Sheets (css)
JavaScript en SharePoint 2010
3 formas de referenciar jQuery y otras libreriasJS en SharePoint
Accediendo a ltbody onload=ldquofuncion()rdquogt
_spBodyOnLoadFunctionNamespush(ldquofuncion)
Fluent UI ndash Server Ribbon
Fluent UI ndash Dialogos Status Bar y Notification Area SPUIModalDialog
SPUINotify
SPUIStatus
Status
Bar
Notification
ECMAScript OM Clientsvc
Using the JavaScript Client Object Model
Server OM
Content
database
Proxy
JavaScriptControls and Logic
XML Request
JSON Response Browser
SharePoint Server
Odata Services
Odata para Listas
Requests go to ListDatasvc
Sintaacutexis del Request
_vti_binListDatasvcEntity[(identifier)][Property]
Ejemplo
_vit_binListDatasvcProjects(4)BudgetHours
Obtiene la columna llamada BudgetHours en el item con el id ldquo4rdquo en la lista
de Proyectos
Tips amp Tricks Avanzados
Temas de Rendimiento
bull Reducir el peso de la paacutegina
Teacutecnicas
bull Output Caching
bull Blob Caching
bull CSS Sprites
bull Consolidar archivos JS y CSS
bull Cache JS CSS e imaacutegenes en el
browser
bull Minificar JS y CSS
bull Acceso Anoacutenimo para CSS JS e
imaacutegenes
Herramientas
bull Yslow
bull Fiddler
bull Wireshark
Tips amp Tricks Avanzados
Remover contenido de los resultados de buacutesqueda
ltdiv class=ldquofooter noindexrdquogt
lt--- footer content ---gt
ltdivgt
Contenido controlado por Seguridad
ltSharepointSPSecurityTrimmedControl runat=server Permissions=ManageWebgt
lt--- contenido ---gt
ltSharepointSPSecurityTrimmedControlgt
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
Agenda Branding
Queacute caminos tengo
Herramientas
Tips amp Tricks
httpspbuzzitsptopsites
httpspbuzzitbsdesigns
De que se trata Arquitectura de la Informacioacuten
Disentildeo
Esquemas (Wireframes)
Branding
Page Layouts
Master Pages
HTML CSS JavaScript
Conocimientos Necesariosbull SharePoint 2010
Entender Master Pages Page Layouts etc
bull Conocimientos de Disentildeo Web
HTML CSS JavaScript XSLT Silverlight y cualquier tecnolgoacutea de cliente que se pueda
utilizar
bull Entender ASPNET es un plus
bull Manipulacioacuten de imaacutegenes (Expression Photoshop Fireworks etc)
Herramientas de Personalizacioacuten
Logo del Sitio Formato WebParts
Cambio de Colores Backgrounds Fonts Editar archivo CSS
Cambiar Page Layout y Contenido Editar Master Pages Editar Page Templates (solo SharePoint Server)
Compartir personalizacioacuten con Otros Build Themes y Definiciones de Sitios (Site Definitions)
faacutecil
Browser
SharePoint
Designer
SPD +
Visual Studio
com
ple
jo
Que caminos tengo
bull Master Pages
bull Page Layouts
bull CSS Personalizadas
Por Sharepoint (en el Server)
bull HTML
bull CSS
bull JavaScript Por HMTL
bull XLST
bull WebParts
bull ClientOM
bull Ribbon
Por Caracteriacutesticas de Sharepoint
Master Pages + Page Layouts
Master Page
Master Page
Page Layout
Master Pages
bull Team site master page
bull User content pages (listscontent pagesetc)
bull _layouts pages (site settings etc) v4master
bull Para apps tipo Search o Office Web Applications
bull Si no necesita Site Navigation Ribbon
bull Si se necesita espacio minimalmaster
bull Para paginas de Errores o de Login simplemaster
bull Muestra el sitio con interfaces Legacy
bull Sin Ribbon ni fluidez defaultmaster
httpstartermasterpagescodeplexcom
Content Placeholders
ltaspContentPlaceholder ID=PlaceHolderLeftNavBargt runat=server gt
Content Placeholder Description
PlaceHolderAdditionalPageHead Used to add extra components such as JavaScript Jscript and
Cascading Style Sheets in the head section of the page
PlaceHolderBodyAreaClass The class of the body area This placeholder is no longer used in
SharePoint 2010
PlaceHolderBodyLeftBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderBodyRightMargin This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderCalendarNavigator The date picker used when a calendar is visible on the page
PlaceHolderFormDigest The container where the page form digest control is stored
PlaceHolderGlobalNavigation The global navigation breadcrumb control on the page
PlaceHolderGlobalNavigationSiteMap The list of sub-sites and sibling sites in the global navigation on the
page
PlaceHolderHorizontalNav The navigation menu that is inside the top navigation bar
PlaceHolderLeftActions The additional objects above the Quick Launch bar
PlaceHolderLeftNavBar The Quick Launch navigation bar
PlaceHolderLeftNavBarBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderLeftNavBarDataSource The placement of the data source used to populate the left navigation
bar
PlaceHolderLeftNavBarTop The top section of the left navigation bar
PlaceHolderMain The main content of the page
PlaceHolderMiniConsole This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderNavSpacer This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderPageDescription Description of the current page
PlaceHolderPageImage This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderPageTitle The title of the site
PlaceHolderPageTitleInTitleArea The title of the page which appears in the title area on the page
PlaceHolderQuickLaunchTop The top of the Quick Launch menu
PlaceHolderQuickLaunchBottom The bottom of the Quick Launch menu
PlaceHolderSearchArea The section of the page for the search box and controls
PlaceHolderSiteName The name of the site where the current page resides
SPNavigation Used for additional page editing controls
PlaceHolderTitleAreaClass The class for the title area This control is now in the head tag and no
longer used in SharePoint 2010
PlaceHolderTitleAreaSeparator This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTitleBreadcrumb The breadcrumb text for the breadcrumb control
PlaceHolderTitleLeftBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTitleRightMargin This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTopNavBar The container used to hold the top navigation bar
PlaceHolderUtilityContent The additional content at the bottom of the page outside the form tag
Content Placeholders
httpspbuzzitsp2010dcph
CSS - SharePoint OOB (Out of the Box)
bull Los links CSS de SharePoint son colocados en cada paacutegina bull No se pueden remover completamente todos los links a CSS
bull Diferentes tipos de selectores bull Element (ej h1 h1extra)
bull Class (eg brand - ltdiv class=ldquobrandrdquogt
bull Id (ej logo - ltdiv id=ldquologordquogt
bull El mismo selector puede ser ldquosobreescritordquo en un archivo css
bull Recomentable ldquosobreescribirrdquo los estilos OOB de Sharepoint en un archivo propio
bull Muchas de las caracteriacutesticas OOB requieren todos los atributos desde los selectores OOB
CSS - Agregando estilos personalizados
bull Use el control CssRegistration bull Permite a los disentildeadores controlar el orden en que se carga el CSS
bull Provee el control sobre la cascada
bull $SPUrl~sitecollection reemplaza con el URL correcto en runtime
ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgt after=corev4css gt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgtgt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderblueyondercssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgtgt
CSS ndashSharePoint UI
bull CSS es uacutetil para ocultar UI de SharePoint
bull PublishingWebControlsEditModePanel puede ser usado para efectos similares bull Oculta el contenido cuando la paacutegina no estaacute en Modo Edicioacuten
ltstyle type=textcssgt
body s4-ribbonrow
display none
ltstylegt
Temas
12 colores 2 Fonts
Controla el look and feel del sitio
Usa Temas de Office (thmx)
Se pueden crear temas via PowerPoint
Que podemos hacer por HTML
bull HTML Element markup language (html)
bull Javascript programming language
bull jQuery and other libraries housed in JS files bull Cascading Style Sheets (css)
JavaScript en SharePoint 2010
3 formas de referenciar jQuery y otras libreriasJS en SharePoint
Accediendo a ltbody onload=ldquofuncion()rdquogt
_spBodyOnLoadFunctionNamespush(ldquofuncion)
Fluent UI ndash Server Ribbon
Fluent UI ndash Dialogos Status Bar y Notification Area SPUIModalDialog
SPUINotify
SPUIStatus
Status
Bar
Notification
ECMAScript OM Clientsvc
Using the JavaScript Client Object Model
Server OM
Content
database
Proxy
JavaScriptControls and Logic
XML Request
JSON Response Browser
SharePoint Server
Odata Services
Odata para Listas
Requests go to ListDatasvc
Sintaacutexis del Request
_vti_binListDatasvcEntity[(identifier)][Property]
Ejemplo
_vit_binListDatasvcProjects(4)BudgetHours
Obtiene la columna llamada BudgetHours en el item con el id ldquo4rdquo en la lista
de Proyectos
Tips amp Tricks Avanzados
Temas de Rendimiento
bull Reducir el peso de la paacutegina
Teacutecnicas
bull Output Caching
bull Blob Caching
bull CSS Sprites
bull Consolidar archivos JS y CSS
bull Cache JS CSS e imaacutegenes en el
browser
bull Minificar JS y CSS
bull Acceso Anoacutenimo para CSS JS e
imaacutegenes
Herramientas
bull Yslow
bull Fiddler
bull Wireshark
Tips amp Tricks Avanzados
Remover contenido de los resultados de buacutesqueda
ltdiv class=ldquofooter noindexrdquogt
lt--- footer content ---gt
ltdivgt
Contenido controlado por Seguridad
ltSharepointSPSecurityTrimmedControl runat=server Permissions=ManageWebgt
lt--- contenido ---gt
ltSharepointSPSecurityTrimmedControlgt
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
httpspbuzzitsptopsites
httpspbuzzitbsdesigns
De que se trata Arquitectura de la Informacioacuten
Disentildeo
Esquemas (Wireframes)
Branding
Page Layouts
Master Pages
HTML CSS JavaScript
Conocimientos Necesariosbull SharePoint 2010
Entender Master Pages Page Layouts etc
bull Conocimientos de Disentildeo Web
HTML CSS JavaScript XSLT Silverlight y cualquier tecnolgoacutea de cliente que se pueda
utilizar
bull Entender ASPNET es un plus
bull Manipulacioacuten de imaacutegenes (Expression Photoshop Fireworks etc)
Herramientas de Personalizacioacuten
Logo del Sitio Formato WebParts
Cambio de Colores Backgrounds Fonts Editar archivo CSS
Cambiar Page Layout y Contenido Editar Master Pages Editar Page Templates (solo SharePoint Server)
Compartir personalizacioacuten con Otros Build Themes y Definiciones de Sitios (Site Definitions)
faacutecil
Browser
SharePoint
Designer
SPD +
Visual Studio
com
ple
jo
Que caminos tengo
bull Master Pages
bull Page Layouts
bull CSS Personalizadas
Por Sharepoint (en el Server)
bull HTML
bull CSS
bull JavaScript Por HMTL
bull XLST
bull WebParts
bull ClientOM
bull Ribbon
Por Caracteriacutesticas de Sharepoint
Master Pages + Page Layouts
Master Page
Master Page
Page Layout
Master Pages
bull Team site master page
bull User content pages (listscontent pagesetc)
bull _layouts pages (site settings etc) v4master
bull Para apps tipo Search o Office Web Applications
bull Si no necesita Site Navigation Ribbon
bull Si se necesita espacio minimalmaster
bull Para paginas de Errores o de Login simplemaster
bull Muestra el sitio con interfaces Legacy
bull Sin Ribbon ni fluidez defaultmaster
httpstartermasterpagescodeplexcom
Content Placeholders
ltaspContentPlaceholder ID=PlaceHolderLeftNavBargt runat=server gt
Content Placeholder Description
PlaceHolderAdditionalPageHead Used to add extra components such as JavaScript Jscript and
Cascading Style Sheets in the head section of the page
PlaceHolderBodyAreaClass The class of the body area This placeholder is no longer used in
SharePoint 2010
PlaceHolderBodyLeftBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderBodyRightMargin This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderCalendarNavigator The date picker used when a calendar is visible on the page
PlaceHolderFormDigest The container where the page form digest control is stored
PlaceHolderGlobalNavigation The global navigation breadcrumb control on the page
PlaceHolderGlobalNavigationSiteMap The list of sub-sites and sibling sites in the global navigation on the
page
PlaceHolderHorizontalNav The navigation menu that is inside the top navigation bar
PlaceHolderLeftActions The additional objects above the Quick Launch bar
PlaceHolderLeftNavBar The Quick Launch navigation bar
PlaceHolderLeftNavBarBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderLeftNavBarDataSource The placement of the data source used to populate the left navigation
bar
PlaceHolderLeftNavBarTop The top section of the left navigation bar
PlaceHolderMain The main content of the page
PlaceHolderMiniConsole This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderNavSpacer This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderPageDescription Description of the current page
PlaceHolderPageImage This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderPageTitle The title of the site
PlaceHolderPageTitleInTitleArea The title of the page which appears in the title area on the page
PlaceHolderQuickLaunchTop The top of the Quick Launch menu
PlaceHolderQuickLaunchBottom The bottom of the Quick Launch menu
PlaceHolderSearchArea The section of the page for the search box and controls
PlaceHolderSiteName The name of the site where the current page resides
SPNavigation Used for additional page editing controls
PlaceHolderTitleAreaClass The class for the title area This control is now in the head tag and no
longer used in SharePoint 2010
PlaceHolderTitleAreaSeparator This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTitleBreadcrumb The breadcrumb text for the breadcrumb control
PlaceHolderTitleLeftBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTitleRightMargin This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTopNavBar The container used to hold the top navigation bar
PlaceHolderUtilityContent The additional content at the bottom of the page outside the form tag
Content Placeholders
httpspbuzzitsp2010dcph
CSS - SharePoint OOB (Out of the Box)
bull Los links CSS de SharePoint son colocados en cada paacutegina bull No se pueden remover completamente todos los links a CSS
bull Diferentes tipos de selectores bull Element (ej h1 h1extra)
bull Class (eg brand - ltdiv class=ldquobrandrdquogt
bull Id (ej logo - ltdiv id=ldquologordquogt
bull El mismo selector puede ser ldquosobreescritordquo en un archivo css
bull Recomentable ldquosobreescribirrdquo los estilos OOB de Sharepoint en un archivo propio
bull Muchas de las caracteriacutesticas OOB requieren todos los atributos desde los selectores OOB
CSS - Agregando estilos personalizados
bull Use el control CssRegistration bull Permite a los disentildeadores controlar el orden en que se carga el CSS
bull Provee el control sobre la cascada
bull $SPUrl~sitecollection reemplaza con el URL correcto en runtime
ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgt after=corev4css gt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgtgt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderblueyondercssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgtgt
CSS ndashSharePoint UI
bull CSS es uacutetil para ocultar UI de SharePoint
bull PublishingWebControlsEditModePanel puede ser usado para efectos similares bull Oculta el contenido cuando la paacutegina no estaacute en Modo Edicioacuten
ltstyle type=textcssgt
body s4-ribbonrow
display none
ltstylegt
Temas
12 colores 2 Fonts
Controla el look and feel del sitio
Usa Temas de Office (thmx)
Se pueden crear temas via PowerPoint
Que podemos hacer por HTML
bull HTML Element markup language (html)
bull Javascript programming language
bull jQuery and other libraries housed in JS files bull Cascading Style Sheets (css)
JavaScript en SharePoint 2010
3 formas de referenciar jQuery y otras libreriasJS en SharePoint
Accediendo a ltbody onload=ldquofuncion()rdquogt
_spBodyOnLoadFunctionNamespush(ldquofuncion)
Fluent UI ndash Server Ribbon
Fluent UI ndash Dialogos Status Bar y Notification Area SPUIModalDialog
SPUINotify
SPUIStatus
Status
Bar
Notification
ECMAScript OM Clientsvc
Using the JavaScript Client Object Model
Server OM
Content
database
Proxy
JavaScriptControls and Logic
XML Request
JSON Response Browser
SharePoint Server
Odata Services
Odata para Listas
Requests go to ListDatasvc
Sintaacutexis del Request
_vti_binListDatasvcEntity[(identifier)][Property]
Ejemplo
_vit_binListDatasvcProjects(4)BudgetHours
Obtiene la columna llamada BudgetHours en el item con el id ldquo4rdquo en la lista
de Proyectos
Tips amp Tricks Avanzados
Temas de Rendimiento
bull Reducir el peso de la paacutegina
Teacutecnicas
bull Output Caching
bull Blob Caching
bull CSS Sprites
bull Consolidar archivos JS y CSS
bull Cache JS CSS e imaacutegenes en el
browser
bull Minificar JS y CSS
bull Acceso Anoacutenimo para CSS JS e
imaacutegenes
Herramientas
bull Yslow
bull Fiddler
bull Wireshark
Tips amp Tricks Avanzados
Remover contenido de los resultados de buacutesqueda
ltdiv class=ldquofooter noindexrdquogt
lt--- footer content ---gt
ltdivgt
Contenido controlado por Seguridad
ltSharepointSPSecurityTrimmedControl runat=server Permissions=ManageWebgt
lt--- contenido ---gt
ltSharepointSPSecurityTrimmedControlgt
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
De que se trata Arquitectura de la Informacioacuten
Disentildeo
Esquemas (Wireframes)
Branding
Page Layouts
Master Pages
HTML CSS JavaScript
Conocimientos Necesariosbull SharePoint 2010
Entender Master Pages Page Layouts etc
bull Conocimientos de Disentildeo Web
HTML CSS JavaScript XSLT Silverlight y cualquier tecnolgoacutea de cliente que se pueda
utilizar
bull Entender ASPNET es un plus
bull Manipulacioacuten de imaacutegenes (Expression Photoshop Fireworks etc)
Herramientas de Personalizacioacuten
Logo del Sitio Formato WebParts
Cambio de Colores Backgrounds Fonts Editar archivo CSS
Cambiar Page Layout y Contenido Editar Master Pages Editar Page Templates (solo SharePoint Server)
Compartir personalizacioacuten con Otros Build Themes y Definiciones de Sitios (Site Definitions)
faacutecil
Browser
SharePoint
Designer
SPD +
Visual Studio
com
ple
jo
Que caminos tengo
bull Master Pages
bull Page Layouts
bull CSS Personalizadas
Por Sharepoint (en el Server)
bull HTML
bull CSS
bull JavaScript Por HMTL
bull XLST
bull WebParts
bull ClientOM
bull Ribbon
Por Caracteriacutesticas de Sharepoint
Master Pages + Page Layouts
Master Page
Master Page
Page Layout
Master Pages
bull Team site master page
bull User content pages (listscontent pagesetc)
bull _layouts pages (site settings etc) v4master
bull Para apps tipo Search o Office Web Applications
bull Si no necesita Site Navigation Ribbon
bull Si se necesita espacio minimalmaster
bull Para paginas de Errores o de Login simplemaster
bull Muestra el sitio con interfaces Legacy
bull Sin Ribbon ni fluidez defaultmaster
httpstartermasterpagescodeplexcom
Content Placeholders
ltaspContentPlaceholder ID=PlaceHolderLeftNavBargt runat=server gt
Content Placeholder Description
PlaceHolderAdditionalPageHead Used to add extra components such as JavaScript Jscript and
Cascading Style Sheets in the head section of the page
PlaceHolderBodyAreaClass The class of the body area This placeholder is no longer used in
SharePoint 2010
PlaceHolderBodyLeftBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderBodyRightMargin This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderCalendarNavigator The date picker used when a calendar is visible on the page
PlaceHolderFormDigest The container where the page form digest control is stored
PlaceHolderGlobalNavigation The global navigation breadcrumb control on the page
PlaceHolderGlobalNavigationSiteMap The list of sub-sites and sibling sites in the global navigation on the
page
PlaceHolderHorizontalNav The navigation menu that is inside the top navigation bar
PlaceHolderLeftActions The additional objects above the Quick Launch bar
PlaceHolderLeftNavBar The Quick Launch navigation bar
PlaceHolderLeftNavBarBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderLeftNavBarDataSource The placement of the data source used to populate the left navigation
bar
PlaceHolderLeftNavBarTop The top section of the left navigation bar
PlaceHolderMain The main content of the page
PlaceHolderMiniConsole This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderNavSpacer This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderPageDescription Description of the current page
PlaceHolderPageImage This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderPageTitle The title of the site
PlaceHolderPageTitleInTitleArea The title of the page which appears in the title area on the page
PlaceHolderQuickLaunchTop The top of the Quick Launch menu
PlaceHolderQuickLaunchBottom The bottom of the Quick Launch menu
PlaceHolderSearchArea The section of the page for the search box and controls
PlaceHolderSiteName The name of the site where the current page resides
SPNavigation Used for additional page editing controls
PlaceHolderTitleAreaClass The class for the title area This control is now in the head tag and no
longer used in SharePoint 2010
PlaceHolderTitleAreaSeparator This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTitleBreadcrumb The breadcrumb text for the breadcrumb control
PlaceHolderTitleLeftBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTitleRightMargin This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTopNavBar The container used to hold the top navigation bar
PlaceHolderUtilityContent The additional content at the bottom of the page outside the form tag
Content Placeholders
httpspbuzzitsp2010dcph
CSS - SharePoint OOB (Out of the Box)
bull Los links CSS de SharePoint son colocados en cada paacutegina bull No se pueden remover completamente todos los links a CSS
bull Diferentes tipos de selectores bull Element (ej h1 h1extra)
bull Class (eg brand - ltdiv class=ldquobrandrdquogt
bull Id (ej logo - ltdiv id=ldquologordquogt
bull El mismo selector puede ser ldquosobreescritordquo en un archivo css
bull Recomentable ldquosobreescribirrdquo los estilos OOB de Sharepoint en un archivo propio
bull Muchas de las caracteriacutesticas OOB requieren todos los atributos desde los selectores OOB
CSS - Agregando estilos personalizados
bull Use el control CssRegistration bull Permite a los disentildeadores controlar el orden en que se carga el CSS
bull Provee el control sobre la cascada
bull $SPUrl~sitecollection reemplaza con el URL correcto en runtime
ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgt after=corev4css gt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgtgt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderblueyondercssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgtgt
CSS ndashSharePoint UI
bull CSS es uacutetil para ocultar UI de SharePoint
bull PublishingWebControlsEditModePanel puede ser usado para efectos similares bull Oculta el contenido cuando la paacutegina no estaacute en Modo Edicioacuten
ltstyle type=textcssgt
body s4-ribbonrow
display none
ltstylegt
Temas
12 colores 2 Fonts
Controla el look and feel del sitio
Usa Temas de Office (thmx)
Se pueden crear temas via PowerPoint
Que podemos hacer por HTML
bull HTML Element markup language (html)
bull Javascript programming language
bull jQuery and other libraries housed in JS files bull Cascading Style Sheets (css)
JavaScript en SharePoint 2010
3 formas de referenciar jQuery y otras libreriasJS en SharePoint
Accediendo a ltbody onload=ldquofuncion()rdquogt
_spBodyOnLoadFunctionNamespush(ldquofuncion)
Fluent UI ndash Server Ribbon
Fluent UI ndash Dialogos Status Bar y Notification Area SPUIModalDialog
SPUINotify
SPUIStatus
Status
Bar
Notification
ECMAScript OM Clientsvc
Using the JavaScript Client Object Model
Server OM
Content
database
Proxy
JavaScriptControls and Logic
XML Request
JSON Response Browser
SharePoint Server
Odata Services
Odata para Listas
Requests go to ListDatasvc
Sintaacutexis del Request
_vti_binListDatasvcEntity[(identifier)][Property]
Ejemplo
_vit_binListDatasvcProjects(4)BudgetHours
Obtiene la columna llamada BudgetHours en el item con el id ldquo4rdquo en la lista
de Proyectos
Tips amp Tricks Avanzados
Temas de Rendimiento
bull Reducir el peso de la paacutegina
Teacutecnicas
bull Output Caching
bull Blob Caching
bull CSS Sprites
bull Consolidar archivos JS y CSS
bull Cache JS CSS e imaacutegenes en el
browser
bull Minificar JS y CSS
bull Acceso Anoacutenimo para CSS JS e
imaacutegenes
Herramientas
bull Yslow
bull Fiddler
bull Wireshark
Tips amp Tricks Avanzados
Remover contenido de los resultados de buacutesqueda
ltdiv class=ldquofooter noindexrdquogt
lt--- footer content ---gt
ltdivgt
Contenido controlado por Seguridad
ltSharepointSPSecurityTrimmedControl runat=server Permissions=ManageWebgt
lt--- contenido ---gt
ltSharepointSPSecurityTrimmedControlgt
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
Conocimientos Necesariosbull SharePoint 2010
Entender Master Pages Page Layouts etc
bull Conocimientos de Disentildeo Web
HTML CSS JavaScript XSLT Silverlight y cualquier tecnolgoacutea de cliente que se pueda
utilizar
bull Entender ASPNET es un plus
bull Manipulacioacuten de imaacutegenes (Expression Photoshop Fireworks etc)
Herramientas de Personalizacioacuten
Logo del Sitio Formato WebParts
Cambio de Colores Backgrounds Fonts Editar archivo CSS
Cambiar Page Layout y Contenido Editar Master Pages Editar Page Templates (solo SharePoint Server)
Compartir personalizacioacuten con Otros Build Themes y Definiciones de Sitios (Site Definitions)
faacutecil
Browser
SharePoint
Designer
SPD +
Visual Studio
com
ple
jo
Que caminos tengo
bull Master Pages
bull Page Layouts
bull CSS Personalizadas
Por Sharepoint (en el Server)
bull HTML
bull CSS
bull JavaScript Por HMTL
bull XLST
bull WebParts
bull ClientOM
bull Ribbon
Por Caracteriacutesticas de Sharepoint
Master Pages + Page Layouts
Master Page
Master Page
Page Layout
Master Pages
bull Team site master page
bull User content pages (listscontent pagesetc)
bull _layouts pages (site settings etc) v4master
bull Para apps tipo Search o Office Web Applications
bull Si no necesita Site Navigation Ribbon
bull Si se necesita espacio minimalmaster
bull Para paginas de Errores o de Login simplemaster
bull Muestra el sitio con interfaces Legacy
bull Sin Ribbon ni fluidez defaultmaster
httpstartermasterpagescodeplexcom
Content Placeholders
ltaspContentPlaceholder ID=PlaceHolderLeftNavBargt runat=server gt
Content Placeholder Description
PlaceHolderAdditionalPageHead Used to add extra components such as JavaScript Jscript and
Cascading Style Sheets in the head section of the page
PlaceHolderBodyAreaClass The class of the body area This placeholder is no longer used in
SharePoint 2010
PlaceHolderBodyLeftBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderBodyRightMargin This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderCalendarNavigator The date picker used when a calendar is visible on the page
PlaceHolderFormDigest The container where the page form digest control is stored
PlaceHolderGlobalNavigation The global navigation breadcrumb control on the page
PlaceHolderGlobalNavigationSiteMap The list of sub-sites and sibling sites in the global navigation on the
page
PlaceHolderHorizontalNav The navigation menu that is inside the top navigation bar
PlaceHolderLeftActions The additional objects above the Quick Launch bar
PlaceHolderLeftNavBar The Quick Launch navigation bar
PlaceHolderLeftNavBarBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderLeftNavBarDataSource The placement of the data source used to populate the left navigation
bar
PlaceHolderLeftNavBarTop The top section of the left navigation bar
PlaceHolderMain The main content of the page
PlaceHolderMiniConsole This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderNavSpacer This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderPageDescription Description of the current page
PlaceHolderPageImage This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderPageTitle The title of the site
PlaceHolderPageTitleInTitleArea The title of the page which appears in the title area on the page
PlaceHolderQuickLaunchTop The top of the Quick Launch menu
PlaceHolderQuickLaunchBottom The bottom of the Quick Launch menu
PlaceHolderSearchArea The section of the page for the search box and controls
PlaceHolderSiteName The name of the site where the current page resides
SPNavigation Used for additional page editing controls
PlaceHolderTitleAreaClass The class for the title area This control is now in the head tag and no
longer used in SharePoint 2010
PlaceHolderTitleAreaSeparator This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTitleBreadcrumb The breadcrumb text for the breadcrumb control
PlaceHolderTitleLeftBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTitleRightMargin This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTopNavBar The container used to hold the top navigation bar
PlaceHolderUtilityContent The additional content at the bottom of the page outside the form tag
Content Placeholders
httpspbuzzitsp2010dcph
CSS - SharePoint OOB (Out of the Box)
bull Los links CSS de SharePoint son colocados en cada paacutegina bull No se pueden remover completamente todos los links a CSS
bull Diferentes tipos de selectores bull Element (ej h1 h1extra)
bull Class (eg brand - ltdiv class=ldquobrandrdquogt
bull Id (ej logo - ltdiv id=ldquologordquogt
bull El mismo selector puede ser ldquosobreescritordquo en un archivo css
bull Recomentable ldquosobreescribirrdquo los estilos OOB de Sharepoint en un archivo propio
bull Muchas de las caracteriacutesticas OOB requieren todos los atributos desde los selectores OOB
CSS - Agregando estilos personalizados
bull Use el control CssRegistration bull Permite a los disentildeadores controlar el orden en que se carga el CSS
bull Provee el control sobre la cascada
bull $SPUrl~sitecollection reemplaza con el URL correcto en runtime
ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgt after=corev4css gt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgtgt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderblueyondercssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgtgt
CSS ndashSharePoint UI
bull CSS es uacutetil para ocultar UI de SharePoint
bull PublishingWebControlsEditModePanel puede ser usado para efectos similares bull Oculta el contenido cuando la paacutegina no estaacute en Modo Edicioacuten
ltstyle type=textcssgt
body s4-ribbonrow
display none
ltstylegt
Temas
12 colores 2 Fonts
Controla el look and feel del sitio
Usa Temas de Office (thmx)
Se pueden crear temas via PowerPoint
Que podemos hacer por HTML
bull HTML Element markup language (html)
bull Javascript programming language
bull jQuery and other libraries housed in JS files bull Cascading Style Sheets (css)
JavaScript en SharePoint 2010
3 formas de referenciar jQuery y otras libreriasJS en SharePoint
Accediendo a ltbody onload=ldquofuncion()rdquogt
_spBodyOnLoadFunctionNamespush(ldquofuncion)
Fluent UI ndash Server Ribbon
Fluent UI ndash Dialogos Status Bar y Notification Area SPUIModalDialog
SPUINotify
SPUIStatus
Status
Bar
Notification
ECMAScript OM Clientsvc
Using the JavaScript Client Object Model
Server OM
Content
database
Proxy
JavaScriptControls and Logic
XML Request
JSON Response Browser
SharePoint Server
Odata Services
Odata para Listas
Requests go to ListDatasvc
Sintaacutexis del Request
_vti_binListDatasvcEntity[(identifier)][Property]
Ejemplo
_vit_binListDatasvcProjects(4)BudgetHours
Obtiene la columna llamada BudgetHours en el item con el id ldquo4rdquo en la lista
de Proyectos
Tips amp Tricks Avanzados
Temas de Rendimiento
bull Reducir el peso de la paacutegina
Teacutecnicas
bull Output Caching
bull Blob Caching
bull CSS Sprites
bull Consolidar archivos JS y CSS
bull Cache JS CSS e imaacutegenes en el
browser
bull Minificar JS y CSS
bull Acceso Anoacutenimo para CSS JS e
imaacutegenes
Herramientas
bull Yslow
bull Fiddler
bull Wireshark
Tips amp Tricks Avanzados
Remover contenido de los resultados de buacutesqueda
ltdiv class=ldquofooter noindexrdquogt
lt--- footer content ---gt
ltdivgt
Contenido controlado por Seguridad
ltSharepointSPSecurityTrimmedControl runat=server Permissions=ManageWebgt
lt--- contenido ---gt
ltSharepointSPSecurityTrimmedControlgt
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
Herramientas de Personalizacioacuten
Logo del Sitio Formato WebParts
Cambio de Colores Backgrounds Fonts Editar archivo CSS
Cambiar Page Layout y Contenido Editar Master Pages Editar Page Templates (solo SharePoint Server)
Compartir personalizacioacuten con Otros Build Themes y Definiciones de Sitios (Site Definitions)
faacutecil
Browser
SharePoint
Designer
SPD +
Visual Studio
com
ple
jo
Que caminos tengo
bull Master Pages
bull Page Layouts
bull CSS Personalizadas
Por Sharepoint (en el Server)
bull HTML
bull CSS
bull JavaScript Por HMTL
bull XLST
bull WebParts
bull ClientOM
bull Ribbon
Por Caracteriacutesticas de Sharepoint
Master Pages + Page Layouts
Master Page
Master Page
Page Layout
Master Pages
bull Team site master page
bull User content pages (listscontent pagesetc)
bull _layouts pages (site settings etc) v4master
bull Para apps tipo Search o Office Web Applications
bull Si no necesita Site Navigation Ribbon
bull Si se necesita espacio minimalmaster
bull Para paginas de Errores o de Login simplemaster
bull Muestra el sitio con interfaces Legacy
bull Sin Ribbon ni fluidez defaultmaster
httpstartermasterpagescodeplexcom
Content Placeholders
ltaspContentPlaceholder ID=PlaceHolderLeftNavBargt runat=server gt
Content Placeholder Description
PlaceHolderAdditionalPageHead Used to add extra components such as JavaScript Jscript and
Cascading Style Sheets in the head section of the page
PlaceHolderBodyAreaClass The class of the body area This placeholder is no longer used in
SharePoint 2010
PlaceHolderBodyLeftBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderBodyRightMargin This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderCalendarNavigator The date picker used when a calendar is visible on the page
PlaceHolderFormDigest The container where the page form digest control is stored
PlaceHolderGlobalNavigation The global navigation breadcrumb control on the page
PlaceHolderGlobalNavigationSiteMap The list of sub-sites and sibling sites in the global navigation on the
page
PlaceHolderHorizontalNav The navigation menu that is inside the top navigation bar
PlaceHolderLeftActions The additional objects above the Quick Launch bar
PlaceHolderLeftNavBar The Quick Launch navigation bar
PlaceHolderLeftNavBarBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderLeftNavBarDataSource The placement of the data source used to populate the left navigation
bar
PlaceHolderLeftNavBarTop The top section of the left navigation bar
PlaceHolderMain The main content of the page
PlaceHolderMiniConsole This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderNavSpacer This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderPageDescription Description of the current page
PlaceHolderPageImage This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderPageTitle The title of the site
PlaceHolderPageTitleInTitleArea The title of the page which appears in the title area on the page
PlaceHolderQuickLaunchTop The top of the Quick Launch menu
PlaceHolderQuickLaunchBottom The bottom of the Quick Launch menu
PlaceHolderSearchArea The section of the page for the search box and controls
PlaceHolderSiteName The name of the site where the current page resides
SPNavigation Used for additional page editing controls
PlaceHolderTitleAreaClass The class for the title area This control is now in the head tag and no
longer used in SharePoint 2010
PlaceHolderTitleAreaSeparator This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTitleBreadcrumb The breadcrumb text for the breadcrumb control
PlaceHolderTitleLeftBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTitleRightMargin This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTopNavBar The container used to hold the top navigation bar
PlaceHolderUtilityContent The additional content at the bottom of the page outside the form tag
Content Placeholders
httpspbuzzitsp2010dcph
CSS - SharePoint OOB (Out of the Box)
bull Los links CSS de SharePoint son colocados en cada paacutegina bull No se pueden remover completamente todos los links a CSS
bull Diferentes tipos de selectores bull Element (ej h1 h1extra)
bull Class (eg brand - ltdiv class=ldquobrandrdquogt
bull Id (ej logo - ltdiv id=ldquologordquogt
bull El mismo selector puede ser ldquosobreescritordquo en un archivo css
bull Recomentable ldquosobreescribirrdquo los estilos OOB de Sharepoint en un archivo propio
bull Muchas de las caracteriacutesticas OOB requieren todos los atributos desde los selectores OOB
CSS - Agregando estilos personalizados
bull Use el control CssRegistration bull Permite a los disentildeadores controlar el orden en que se carga el CSS
bull Provee el control sobre la cascada
bull $SPUrl~sitecollection reemplaza con el URL correcto en runtime
ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgt after=corev4css gt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgtgt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderblueyondercssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgtgt
CSS ndashSharePoint UI
bull CSS es uacutetil para ocultar UI de SharePoint
bull PublishingWebControlsEditModePanel puede ser usado para efectos similares bull Oculta el contenido cuando la paacutegina no estaacute en Modo Edicioacuten
ltstyle type=textcssgt
body s4-ribbonrow
display none
ltstylegt
Temas
12 colores 2 Fonts
Controla el look and feel del sitio
Usa Temas de Office (thmx)
Se pueden crear temas via PowerPoint
Que podemos hacer por HTML
bull HTML Element markup language (html)
bull Javascript programming language
bull jQuery and other libraries housed in JS files bull Cascading Style Sheets (css)
JavaScript en SharePoint 2010
3 formas de referenciar jQuery y otras libreriasJS en SharePoint
Accediendo a ltbody onload=ldquofuncion()rdquogt
_spBodyOnLoadFunctionNamespush(ldquofuncion)
Fluent UI ndash Server Ribbon
Fluent UI ndash Dialogos Status Bar y Notification Area SPUIModalDialog
SPUINotify
SPUIStatus
Status
Bar
Notification
ECMAScript OM Clientsvc
Using the JavaScript Client Object Model
Server OM
Content
database
Proxy
JavaScriptControls and Logic
XML Request
JSON Response Browser
SharePoint Server
Odata Services
Odata para Listas
Requests go to ListDatasvc
Sintaacutexis del Request
_vti_binListDatasvcEntity[(identifier)][Property]
Ejemplo
_vit_binListDatasvcProjects(4)BudgetHours
Obtiene la columna llamada BudgetHours en el item con el id ldquo4rdquo en la lista
de Proyectos
Tips amp Tricks Avanzados
Temas de Rendimiento
bull Reducir el peso de la paacutegina
Teacutecnicas
bull Output Caching
bull Blob Caching
bull CSS Sprites
bull Consolidar archivos JS y CSS
bull Cache JS CSS e imaacutegenes en el
browser
bull Minificar JS y CSS
bull Acceso Anoacutenimo para CSS JS e
imaacutegenes
Herramientas
bull Yslow
bull Fiddler
bull Wireshark
Tips amp Tricks Avanzados
Remover contenido de los resultados de buacutesqueda
ltdiv class=ldquofooter noindexrdquogt
lt--- footer content ---gt
ltdivgt
Contenido controlado por Seguridad
ltSharepointSPSecurityTrimmedControl runat=server Permissions=ManageWebgt
lt--- contenido ---gt
ltSharepointSPSecurityTrimmedControlgt
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
Que caminos tengo
bull Master Pages
bull Page Layouts
bull CSS Personalizadas
Por Sharepoint (en el Server)
bull HTML
bull CSS
bull JavaScript Por HMTL
bull XLST
bull WebParts
bull ClientOM
bull Ribbon
Por Caracteriacutesticas de Sharepoint
Master Pages + Page Layouts
Master Page
Master Page
Page Layout
Master Pages
bull Team site master page
bull User content pages (listscontent pagesetc)
bull _layouts pages (site settings etc) v4master
bull Para apps tipo Search o Office Web Applications
bull Si no necesita Site Navigation Ribbon
bull Si se necesita espacio minimalmaster
bull Para paginas de Errores o de Login simplemaster
bull Muestra el sitio con interfaces Legacy
bull Sin Ribbon ni fluidez defaultmaster
httpstartermasterpagescodeplexcom
Content Placeholders
ltaspContentPlaceholder ID=PlaceHolderLeftNavBargt runat=server gt
Content Placeholder Description
PlaceHolderAdditionalPageHead Used to add extra components such as JavaScript Jscript and
Cascading Style Sheets in the head section of the page
PlaceHolderBodyAreaClass The class of the body area This placeholder is no longer used in
SharePoint 2010
PlaceHolderBodyLeftBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderBodyRightMargin This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderCalendarNavigator The date picker used when a calendar is visible on the page
PlaceHolderFormDigest The container where the page form digest control is stored
PlaceHolderGlobalNavigation The global navigation breadcrumb control on the page
PlaceHolderGlobalNavigationSiteMap The list of sub-sites and sibling sites in the global navigation on the
page
PlaceHolderHorizontalNav The navigation menu that is inside the top navigation bar
PlaceHolderLeftActions The additional objects above the Quick Launch bar
PlaceHolderLeftNavBar The Quick Launch navigation bar
PlaceHolderLeftNavBarBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderLeftNavBarDataSource The placement of the data source used to populate the left navigation
bar
PlaceHolderLeftNavBarTop The top section of the left navigation bar
PlaceHolderMain The main content of the page
PlaceHolderMiniConsole This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderNavSpacer This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderPageDescription Description of the current page
PlaceHolderPageImage This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderPageTitle The title of the site
PlaceHolderPageTitleInTitleArea The title of the page which appears in the title area on the page
PlaceHolderQuickLaunchTop The top of the Quick Launch menu
PlaceHolderQuickLaunchBottom The bottom of the Quick Launch menu
PlaceHolderSearchArea The section of the page for the search box and controls
PlaceHolderSiteName The name of the site where the current page resides
SPNavigation Used for additional page editing controls
PlaceHolderTitleAreaClass The class for the title area This control is now in the head tag and no
longer used in SharePoint 2010
PlaceHolderTitleAreaSeparator This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTitleBreadcrumb The breadcrumb text for the breadcrumb control
PlaceHolderTitleLeftBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTitleRightMargin This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTopNavBar The container used to hold the top navigation bar
PlaceHolderUtilityContent The additional content at the bottom of the page outside the form tag
Content Placeholders
httpspbuzzitsp2010dcph
CSS - SharePoint OOB (Out of the Box)
bull Los links CSS de SharePoint son colocados en cada paacutegina bull No se pueden remover completamente todos los links a CSS
bull Diferentes tipos de selectores bull Element (ej h1 h1extra)
bull Class (eg brand - ltdiv class=ldquobrandrdquogt
bull Id (ej logo - ltdiv id=ldquologordquogt
bull El mismo selector puede ser ldquosobreescritordquo en un archivo css
bull Recomentable ldquosobreescribirrdquo los estilos OOB de Sharepoint en un archivo propio
bull Muchas de las caracteriacutesticas OOB requieren todos los atributos desde los selectores OOB
CSS - Agregando estilos personalizados
bull Use el control CssRegistration bull Permite a los disentildeadores controlar el orden en que se carga el CSS
bull Provee el control sobre la cascada
bull $SPUrl~sitecollection reemplaza con el URL correcto en runtime
ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgt after=corev4css gt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgtgt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderblueyondercssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgtgt
CSS ndashSharePoint UI
bull CSS es uacutetil para ocultar UI de SharePoint
bull PublishingWebControlsEditModePanel puede ser usado para efectos similares bull Oculta el contenido cuando la paacutegina no estaacute en Modo Edicioacuten
ltstyle type=textcssgt
body s4-ribbonrow
display none
ltstylegt
Temas
12 colores 2 Fonts
Controla el look and feel del sitio
Usa Temas de Office (thmx)
Se pueden crear temas via PowerPoint
Que podemos hacer por HTML
bull HTML Element markup language (html)
bull Javascript programming language
bull jQuery and other libraries housed in JS files bull Cascading Style Sheets (css)
JavaScript en SharePoint 2010
3 formas de referenciar jQuery y otras libreriasJS en SharePoint
Accediendo a ltbody onload=ldquofuncion()rdquogt
_spBodyOnLoadFunctionNamespush(ldquofuncion)
Fluent UI ndash Server Ribbon
Fluent UI ndash Dialogos Status Bar y Notification Area SPUIModalDialog
SPUINotify
SPUIStatus
Status
Bar
Notification
ECMAScript OM Clientsvc
Using the JavaScript Client Object Model
Server OM
Content
database
Proxy
JavaScriptControls and Logic
XML Request
JSON Response Browser
SharePoint Server
Odata Services
Odata para Listas
Requests go to ListDatasvc
Sintaacutexis del Request
_vti_binListDatasvcEntity[(identifier)][Property]
Ejemplo
_vit_binListDatasvcProjects(4)BudgetHours
Obtiene la columna llamada BudgetHours en el item con el id ldquo4rdquo en la lista
de Proyectos
Tips amp Tricks Avanzados
Temas de Rendimiento
bull Reducir el peso de la paacutegina
Teacutecnicas
bull Output Caching
bull Blob Caching
bull CSS Sprites
bull Consolidar archivos JS y CSS
bull Cache JS CSS e imaacutegenes en el
browser
bull Minificar JS y CSS
bull Acceso Anoacutenimo para CSS JS e
imaacutegenes
Herramientas
bull Yslow
bull Fiddler
bull Wireshark
Tips amp Tricks Avanzados
Remover contenido de los resultados de buacutesqueda
ltdiv class=ldquofooter noindexrdquogt
lt--- footer content ---gt
ltdivgt
Contenido controlado por Seguridad
ltSharepointSPSecurityTrimmedControl runat=server Permissions=ManageWebgt
lt--- contenido ---gt
ltSharepointSPSecurityTrimmedControlgt
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
Master Pages + Page Layouts
Master Page
Master Page
Page Layout
Master Pages
bull Team site master page
bull User content pages (listscontent pagesetc)
bull _layouts pages (site settings etc) v4master
bull Para apps tipo Search o Office Web Applications
bull Si no necesita Site Navigation Ribbon
bull Si se necesita espacio minimalmaster
bull Para paginas de Errores o de Login simplemaster
bull Muestra el sitio con interfaces Legacy
bull Sin Ribbon ni fluidez defaultmaster
httpstartermasterpagescodeplexcom
Content Placeholders
ltaspContentPlaceholder ID=PlaceHolderLeftNavBargt runat=server gt
Content Placeholder Description
PlaceHolderAdditionalPageHead Used to add extra components such as JavaScript Jscript and
Cascading Style Sheets in the head section of the page
PlaceHolderBodyAreaClass The class of the body area This placeholder is no longer used in
SharePoint 2010
PlaceHolderBodyLeftBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderBodyRightMargin This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderCalendarNavigator The date picker used when a calendar is visible on the page
PlaceHolderFormDigest The container where the page form digest control is stored
PlaceHolderGlobalNavigation The global navigation breadcrumb control on the page
PlaceHolderGlobalNavigationSiteMap The list of sub-sites and sibling sites in the global navigation on the
page
PlaceHolderHorizontalNav The navigation menu that is inside the top navigation bar
PlaceHolderLeftActions The additional objects above the Quick Launch bar
PlaceHolderLeftNavBar The Quick Launch navigation bar
PlaceHolderLeftNavBarBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderLeftNavBarDataSource The placement of the data source used to populate the left navigation
bar
PlaceHolderLeftNavBarTop The top section of the left navigation bar
PlaceHolderMain The main content of the page
PlaceHolderMiniConsole This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderNavSpacer This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderPageDescription Description of the current page
PlaceHolderPageImage This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderPageTitle The title of the site
PlaceHolderPageTitleInTitleArea The title of the page which appears in the title area on the page
PlaceHolderQuickLaunchTop The top of the Quick Launch menu
PlaceHolderQuickLaunchBottom The bottom of the Quick Launch menu
PlaceHolderSearchArea The section of the page for the search box and controls
PlaceHolderSiteName The name of the site where the current page resides
SPNavigation Used for additional page editing controls
PlaceHolderTitleAreaClass The class for the title area This control is now in the head tag and no
longer used in SharePoint 2010
PlaceHolderTitleAreaSeparator This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTitleBreadcrumb The breadcrumb text for the breadcrumb control
PlaceHolderTitleLeftBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTitleRightMargin This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTopNavBar The container used to hold the top navigation bar
PlaceHolderUtilityContent The additional content at the bottom of the page outside the form tag
Content Placeholders
httpspbuzzitsp2010dcph
CSS - SharePoint OOB (Out of the Box)
bull Los links CSS de SharePoint son colocados en cada paacutegina bull No se pueden remover completamente todos los links a CSS
bull Diferentes tipos de selectores bull Element (ej h1 h1extra)
bull Class (eg brand - ltdiv class=ldquobrandrdquogt
bull Id (ej logo - ltdiv id=ldquologordquogt
bull El mismo selector puede ser ldquosobreescritordquo en un archivo css
bull Recomentable ldquosobreescribirrdquo los estilos OOB de Sharepoint en un archivo propio
bull Muchas de las caracteriacutesticas OOB requieren todos los atributos desde los selectores OOB
CSS - Agregando estilos personalizados
bull Use el control CssRegistration bull Permite a los disentildeadores controlar el orden en que se carga el CSS
bull Provee el control sobre la cascada
bull $SPUrl~sitecollection reemplaza con el URL correcto en runtime
ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgt after=corev4css gt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgtgt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderblueyondercssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgtgt
CSS ndashSharePoint UI
bull CSS es uacutetil para ocultar UI de SharePoint
bull PublishingWebControlsEditModePanel puede ser usado para efectos similares bull Oculta el contenido cuando la paacutegina no estaacute en Modo Edicioacuten
ltstyle type=textcssgt
body s4-ribbonrow
display none
ltstylegt
Temas
12 colores 2 Fonts
Controla el look and feel del sitio
Usa Temas de Office (thmx)
Se pueden crear temas via PowerPoint
Que podemos hacer por HTML
bull HTML Element markup language (html)
bull Javascript programming language
bull jQuery and other libraries housed in JS files bull Cascading Style Sheets (css)
JavaScript en SharePoint 2010
3 formas de referenciar jQuery y otras libreriasJS en SharePoint
Accediendo a ltbody onload=ldquofuncion()rdquogt
_spBodyOnLoadFunctionNamespush(ldquofuncion)
Fluent UI ndash Server Ribbon
Fluent UI ndash Dialogos Status Bar y Notification Area SPUIModalDialog
SPUINotify
SPUIStatus
Status
Bar
Notification
ECMAScript OM Clientsvc
Using the JavaScript Client Object Model
Server OM
Content
database
Proxy
JavaScriptControls and Logic
XML Request
JSON Response Browser
SharePoint Server
Odata Services
Odata para Listas
Requests go to ListDatasvc
Sintaacutexis del Request
_vti_binListDatasvcEntity[(identifier)][Property]
Ejemplo
_vit_binListDatasvcProjects(4)BudgetHours
Obtiene la columna llamada BudgetHours en el item con el id ldquo4rdquo en la lista
de Proyectos
Tips amp Tricks Avanzados
Temas de Rendimiento
bull Reducir el peso de la paacutegina
Teacutecnicas
bull Output Caching
bull Blob Caching
bull CSS Sprites
bull Consolidar archivos JS y CSS
bull Cache JS CSS e imaacutegenes en el
browser
bull Minificar JS y CSS
bull Acceso Anoacutenimo para CSS JS e
imaacutegenes
Herramientas
bull Yslow
bull Fiddler
bull Wireshark
Tips amp Tricks Avanzados
Remover contenido de los resultados de buacutesqueda
ltdiv class=ldquofooter noindexrdquogt
lt--- footer content ---gt
ltdivgt
Contenido controlado por Seguridad
ltSharepointSPSecurityTrimmedControl runat=server Permissions=ManageWebgt
lt--- contenido ---gt
ltSharepointSPSecurityTrimmedControlgt
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
Master Page
Master Page
Page Layout
Master Pages
bull Team site master page
bull User content pages (listscontent pagesetc)
bull _layouts pages (site settings etc) v4master
bull Para apps tipo Search o Office Web Applications
bull Si no necesita Site Navigation Ribbon
bull Si se necesita espacio minimalmaster
bull Para paginas de Errores o de Login simplemaster
bull Muestra el sitio con interfaces Legacy
bull Sin Ribbon ni fluidez defaultmaster
httpstartermasterpagescodeplexcom
Content Placeholders
ltaspContentPlaceholder ID=PlaceHolderLeftNavBargt runat=server gt
Content Placeholder Description
PlaceHolderAdditionalPageHead Used to add extra components such as JavaScript Jscript and
Cascading Style Sheets in the head section of the page
PlaceHolderBodyAreaClass The class of the body area This placeholder is no longer used in
SharePoint 2010
PlaceHolderBodyLeftBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderBodyRightMargin This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderCalendarNavigator The date picker used when a calendar is visible on the page
PlaceHolderFormDigest The container where the page form digest control is stored
PlaceHolderGlobalNavigation The global navigation breadcrumb control on the page
PlaceHolderGlobalNavigationSiteMap The list of sub-sites and sibling sites in the global navigation on the
page
PlaceHolderHorizontalNav The navigation menu that is inside the top navigation bar
PlaceHolderLeftActions The additional objects above the Quick Launch bar
PlaceHolderLeftNavBar The Quick Launch navigation bar
PlaceHolderLeftNavBarBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderLeftNavBarDataSource The placement of the data source used to populate the left navigation
bar
PlaceHolderLeftNavBarTop The top section of the left navigation bar
PlaceHolderMain The main content of the page
PlaceHolderMiniConsole This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderNavSpacer This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderPageDescription Description of the current page
PlaceHolderPageImage This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderPageTitle The title of the site
PlaceHolderPageTitleInTitleArea The title of the page which appears in the title area on the page
PlaceHolderQuickLaunchTop The top of the Quick Launch menu
PlaceHolderQuickLaunchBottom The bottom of the Quick Launch menu
PlaceHolderSearchArea The section of the page for the search box and controls
PlaceHolderSiteName The name of the site where the current page resides
SPNavigation Used for additional page editing controls
PlaceHolderTitleAreaClass The class for the title area This control is now in the head tag and no
longer used in SharePoint 2010
PlaceHolderTitleAreaSeparator This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTitleBreadcrumb The breadcrumb text for the breadcrumb control
PlaceHolderTitleLeftBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTitleRightMargin This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTopNavBar The container used to hold the top navigation bar
PlaceHolderUtilityContent The additional content at the bottom of the page outside the form tag
Content Placeholders
httpspbuzzitsp2010dcph
CSS - SharePoint OOB (Out of the Box)
bull Los links CSS de SharePoint son colocados en cada paacutegina bull No se pueden remover completamente todos los links a CSS
bull Diferentes tipos de selectores bull Element (ej h1 h1extra)
bull Class (eg brand - ltdiv class=ldquobrandrdquogt
bull Id (ej logo - ltdiv id=ldquologordquogt
bull El mismo selector puede ser ldquosobreescritordquo en un archivo css
bull Recomentable ldquosobreescribirrdquo los estilos OOB de Sharepoint en un archivo propio
bull Muchas de las caracteriacutesticas OOB requieren todos los atributos desde los selectores OOB
CSS - Agregando estilos personalizados
bull Use el control CssRegistration bull Permite a los disentildeadores controlar el orden en que se carga el CSS
bull Provee el control sobre la cascada
bull $SPUrl~sitecollection reemplaza con el URL correcto en runtime
ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgt after=corev4css gt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgtgt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderblueyondercssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgtgt
CSS ndashSharePoint UI
bull CSS es uacutetil para ocultar UI de SharePoint
bull PublishingWebControlsEditModePanel puede ser usado para efectos similares bull Oculta el contenido cuando la paacutegina no estaacute en Modo Edicioacuten
ltstyle type=textcssgt
body s4-ribbonrow
display none
ltstylegt
Temas
12 colores 2 Fonts
Controla el look and feel del sitio
Usa Temas de Office (thmx)
Se pueden crear temas via PowerPoint
Que podemos hacer por HTML
bull HTML Element markup language (html)
bull Javascript programming language
bull jQuery and other libraries housed in JS files bull Cascading Style Sheets (css)
JavaScript en SharePoint 2010
3 formas de referenciar jQuery y otras libreriasJS en SharePoint
Accediendo a ltbody onload=ldquofuncion()rdquogt
_spBodyOnLoadFunctionNamespush(ldquofuncion)
Fluent UI ndash Server Ribbon
Fluent UI ndash Dialogos Status Bar y Notification Area SPUIModalDialog
SPUINotify
SPUIStatus
Status
Bar
Notification
ECMAScript OM Clientsvc
Using the JavaScript Client Object Model
Server OM
Content
database
Proxy
JavaScriptControls and Logic
XML Request
JSON Response Browser
SharePoint Server
Odata Services
Odata para Listas
Requests go to ListDatasvc
Sintaacutexis del Request
_vti_binListDatasvcEntity[(identifier)][Property]
Ejemplo
_vit_binListDatasvcProjects(4)BudgetHours
Obtiene la columna llamada BudgetHours en el item con el id ldquo4rdquo en la lista
de Proyectos
Tips amp Tricks Avanzados
Temas de Rendimiento
bull Reducir el peso de la paacutegina
Teacutecnicas
bull Output Caching
bull Blob Caching
bull CSS Sprites
bull Consolidar archivos JS y CSS
bull Cache JS CSS e imaacutegenes en el
browser
bull Minificar JS y CSS
bull Acceso Anoacutenimo para CSS JS e
imaacutegenes
Herramientas
bull Yslow
bull Fiddler
bull Wireshark
Tips amp Tricks Avanzados
Remover contenido de los resultados de buacutesqueda
ltdiv class=ldquofooter noindexrdquogt
lt--- footer content ---gt
ltdivgt
Contenido controlado por Seguridad
ltSharepointSPSecurityTrimmedControl runat=server Permissions=ManageWebgt
lt--- contenido ---gt
ltSharepointSPSecurityTrimmedControlgt
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
Master Pages
bull Team site master page
bull User content pages (listscontent pagesetc)
bull _layouts pages (site settings etc) v4master
bull Para apps tipo Search o Office Web Applications
bull Si no necesita Site Navigation Ribbon
bull Si se necesita espacio minimalmaster
bull Para paginas de Errores o de Login simplemaster
bull Muestra el sitio con interfaces Legacy
bull Sin Ribbon ni fluidez defaultmaster
httpstartermasterpagescodeplexcom
Content Placeholders
ltaspContentPlaceholder ID=PlaceHolderLeftNavBargt runat=server gt
Content Placeholder Description
PlaceHolderAdditionalPageHead Used to add extra components such as JavaScript Jscript and
Cascading Style Sheets in the head section of the page
PlaceHolderBodyAreaClass The class of the body area This placeholder is no longer used in
SharePoint 2010
PlaceHolderBodyLeftBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderBodyRightMargin This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderCalendarNavigator The date picker used when a calendar is visible on the page
PlaceHolderFormDigest The container where the page form digest control is stored
PlaceHolderGlobalNavigation The global navigation breadcrumb control on the page
PlaceHolderGlobalNavigationSiteMap The list of sub-sites and sibling sites in the global navigation on the
page
PlaceHolderHorizontalNav The navigation menu that is inside the top navigation bar
PlaceHolderLeftActions The additional objects above the Quick Launch bar
PlaceHolderLeftNavBar The Quick Launch navigation bar
PlaceHolderLeftNavBarBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderLeftNavBarDataSource The placement of the data source used to populate the left navigation
bar
PlaceHolderLeftNavBarTop The top section of the left navigation bar
PlaceHolderMain The main content of the page
PlaceHolderMiniConsole This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderNavSpacer This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderPageDescription Description of the current page
PlaceHolderPageImage This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderPageTitle The title of the site
PlaceHolderPageTitleInTitleArea The title of the page which appears in the title area on the page
PlaceHolderQuickLaunchTop The top of the Quick Launch menu
PlaceHolderQuickLaunchBottom The bottom of the Quick Launch menu
PlaceHolderSearchArea The section of the page for the search box and controls
PlaceHolderSiteName The name of the site where the current page resides
SPNavigation Used for additional page editing controls
PlaceHolderTitleAreaClass The class for the title area This control is now in the head tag and no
longer used in SharePoint 2010
PlaceHolderTitleAreaSeparator This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTitleBreadcrumb The breadcrumb text for the breadcrumb control
PlaceHolderTitleLeftBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTitleRightMargin This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTopNavBar The container used to hold the top navigation bar
PlaceHolderUtilityContent The additional content at the bottom of the page outside the form tag
Content Placeholders
httpspbuzzitsp2010dcph
CSS - SharePoint OOB (Out of the Box)
bull Los links CSS de SharePoint son colocados en cada paacutegina bull No se pueden remover completamente todos los links a CSS
bull Diferentes tipos de selectores bull Element (ej h1 h1extra)
bull Class (eg brand - ltdiv class=ldquobrandrdquogt
bull Id (ej logo - ltdiv id=ldquologordquogt
bull El mismo selector puede ser ldquosobreescritordquo en un archivo css
bull Recomentable ldquosobreescribirrdquo los estilos OOB de Sharepoint en un archivo propio
bull Muchas de las caracteriacutesticas OOB requieren todos los atributos desde los selectores OOB
CSS - Agregando estilos personalizados
bull Use el control CssRegistration bull Permite a los disentildeadores controlar el orden en que se carga el CSS
bull Provee el control sobre la cascada
bull $SPUrl~sitecollection reemplaza con el URL correcto en runtime
ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgt after=corev4css gt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgtgt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderblueyondercssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgtgt
CSS ndashSharePoint UI
bull CSS es uacutetil para ocultar UI de SharePoint
bull PublishingWebControlsEditModePanel puede ser usado para efectos similares bull Oculta el contenido cuando la paacutegina no estaacute en Modo Edicioacuten
ltstyle type=textcssgt
body s4-ribbonrow
display none
ltstylegt
Temas
12 colores 2 Fonts
Controla el look and feel del sitio
Usa Temas de Office (thmx)
Se pueden crear temas via PowerPoint
Que podemos hacer por HTML
bull HTML Element markup language (html)
bull Javascript programming language
bull jQuery and other libraries housed in JS files bull Cascading Style Sheets (css)
JavaScript en SharePoint 2010
3 formas de referenciar jQuery y otras libreriasJS en SharePoint
Accediendo a ltbody onload=ldquofuncion()rdquogt
_spBodyOnLoadFunctionNamespush(ldquofuncion)
Fluent UI ndash Server Ribbon
Fluent UI ndash Dialogos Status Bar y Notification Area SPUIModalDialog
SPUINotify
SPUIStatus
Status
Bar
Notification
ECMAScript OM Clientsvc
Using the JavaScript Client Object Model
Server OM
Content
database
Proxy
JavaScriptControls and Logic
XML Request
JSON Response Browser
SharePoint Server
Odata Services
Odata para Listas
Requests go to ListDatasvc
Sintaacutexis del Request
_vti_binListDatasvcEntity[(identifier)][Property]
Ejemplo
_vit_binListDatasvcProjects(4)BudgetHours
Obtiene la columna llamada BudgetHours en el item con el id ldquo4rdquo en la lista
de Proyectos
Tips amp Tricks Avanzados
Temas de Rendimiento
bull Reducir el peso de la paacutegina
Teacutecnicas
bull Output Caching
bull Blob Caching
bull CSS Sprites
bull Consolidar archivos JS y CSS
bull Cache JS CSS e imaacutegenes en el
browser
bull Minificar JS y CSS
bull Acceso Anoacutenimo para CSS JS e
imaacutegenes
Herramientas
bull Yslow
bull Fiddler
bull Wireshark
Tips amp Tricks Avanzados
Remover contenido de los resultados de buacutesqueda
ltdiv class=ldquofooter noindexrdquogt
lt--- footer content ---gt
ltdivgt
Contenido controlado por Seguridad
ltSharepointSPSecurityTrimmedControl runat=server Permissions=ManageWebgt
lt--- contenido ---gt
ltSharepointSPSecurityTrimmedControlgt
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
Content Placeholders
ltaspContentPlaceholder ID=PlaceHolderLeftNavBargt runat=server gt
Content Placeholder Description
PlaceHolderAdditionalPageHead Used to add extra components such as JavaScript Jscript and
Cascading Style Sheets in the head section of the page
PlaceHolderBodyAreaClass The class of the body area This placeholder is no longer used in
SharePoint 2010
PlaceHolderBodyLeftBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderBodyRightMargin This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderCalendarNavigator The date picker used when a calendar is visible on the page
PlaceHolderFormDigest The container where the page form digest control is stored
PlaceHolderGlobalNavigation The global navigation breadcrumb control on the page
PlaceHolderGlobalNavigationSiteMap The list of sub-sites and sibling sites in the global navigation on the
page
PlaceHolderHorizontalNav The navigation menu that is inside the top navigation bar
PlaceHolderLeftActions The additional objects above the Quick Launch bar
PlaceHolderLeftNavBar The Quick Launch navigation bar
PlaceHolderLeftNavBarBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderLeftNavBarDataSource The placement of the data source used to populate the left navigation
bar
PlaceHolderLeftNavBarTop The top section of the left navigation bar
PlaceHolderMain The main content of the page
PlaceHolderMiniConsole This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderNavSpacer This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderPageDescription Description of the current page
PlaceHolderPageImage This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderPageTitle The title of the site
PlaceHolderPageTitleInTitleArea The title of the page which appears in the title area on the page
PlaceHolderQuickLaunchTop The top of the Quick Launch menu
PlaceHolderQuickLaunchBottom The bottom of the Quick Launch menu
PlaceHolderSearchArea The section of the page for the search box and controls
PlaceHolderSiteName The name of the site where the current page resides
SPNavigation Used for additional page editing controls
PlaceHolderTitleAreaClass The class for the title area This control is now in the head tag and no
longer used in SharePoint 2010
PlaceHolderTitleAreaSeparator This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTitleBreadcrumb The breadcrumb text for the breadcrumb control
PlaceHolderTitleLeftBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTitleRightMargin This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTopNavBar The container used to hold the top navigation bar
PlaceHolderUtilityContent The additional content at the bottom of the page outside the form tag
Content Placeholders
httpspbuzzitsp2010dcph
CSS - SharePoint OOB (Out of the Box)
bull Los links CSS de SharePoint son colocados en cada paacutegina bull No se pueden remover completamente todos los links a CSS
bull Diferentes tipos de selectores bull Element (ej h1 h1extra)
bull Class (eg brand - ltdiv class=ldquobrandrdquogt
bull Id (ej logo - ltdiv id=ldquologordquogt
bull El mismo selector puede ser ldquosobreescritordquo en un archivo css
bull Recomentable ldquosobreescribirrdquo los estilos OOB de Sharepoint en un archivo propio
bull Muchas de las caracteriacutesticas OOB requieren todos los atributos desde los selectores OOB
CSS - Agregando estilos personalizados
bull Use el control CssRegistration bull Permite a los disentildeadores controlar el orden en que se carga el CSS
bull Provee el control sobre la cascada
bull $SPUrl~sitecollection reemplaza con el URL correcto en runtime
ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgt after=corev4css gt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgtgt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderblueyondercssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgtgt
CSS ndashSharePoint UI
bull CSS es uacutetil para ocultar UI de SharePoint
bull PublishingWebControlsEditModePanel puede ser usado para efectos similares bull Oculta el contenido cuando la paacutegina no estaacute en Modo Edicioacuten
ltstyle type=textcssgt
body s4-ribbonrow
display none
ltstylegt
Temas
12 colores 2 Fonts
Controla el look and feel del sitio
Usa Temas de Office (thmx)
Se pueden crear temas via PowerPoint
Que podemos hacer por HTML
bull HTML Element markup language (html)
bull Javascript programming language
bull jQuery and other libraries housed in JS files bull Cascading Style Sheets (css)
JavaScript en SharePoint 2010
3 formas de referenciar jQuery y otras libreriasJS en SharePoint
Accediendo a ltbody onload=ldquofuncion()rdquogt
_spBodyOnLoadFunctionNamespush(ldquofuncion)
Fluent UI ndash Server Ribbon
Fluent UI ndash Dialogos Status Bar y Notification Area SPUIModalDialog
SPUINotify
SPUIStatus
Status
Bar
Notification
ECMAScript OM Clientsvc
Using the JavaScript Client Object Model
Server OM
Content
database
Proxy
JavaScriptControls and Logic
XML Request
JSON Response Browser
SharePoint Server
Odata Services
Odata para Listas
Requests go to ListDatasvc
Sintaacutexis del Request
_vti_binListDatasvcEntity[(identifier)][Property]
Ejemplo
_vit_binListDatasvcProjects(4)BudgetHours
Obtiene la columna llamada BudgetHours en el item con el id ldquo4rdquo en la lista
de Proyectos
Tips amp Tricks Avanzados
Temas de Rendimiento
bull Reducir el peso de la paacutegina
Teacutecnicas
bull Output Caching
bull Blob Caching
bull CSS Sprites
bull Consolidar archivos JS y CSS
bull Cache JS CSS e imaacutegenes en el
browser
bull Minificar JS y CSS
bull Acceso Anoacutenimo para CSS JS e
imaacutegenes
Herramientas
bull Yslow
bull Fiddler
bull Wireshark
Tips amp Tricks Avanzados
Remover contenido de los resultados de buacutesqueda
ltdiv class=ldquofooter noindexrdquogt
lt--- footer content ---gt
ltdivgt
Contenido controlado por Seguridad
ltSharepointSPSecurityTrimmedControl runat=server Permissions=ManageWebgt
lt--- contenido ---gt
ltSharepointSPSecurityTrimmedControlgt
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
Content Placeholder Description
PlaceHolderAdditionalPageHead Used to add extra components such as JavaScript Jscript and
Cascading Style Sheets in the head section of the page
PlaceHolderBodyAreaClass The class of the body area This placeholder is no longer used in
SharePoint 2010
PlaceHolderBodyLeftBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderBodyRightMargin This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderCalendarNavigator The date picker used when a calendar is visible on the page
PlaceHolderFormDigest The container where the page form digest control is stored
PlaceHolderGlobalNavigation The global navigation breadcrumb control on the page
PlaceHolderGlobalNavigationSiteMap The list of sub-sites and sibling sites in the global navigation on the
page
PlaceHolderHorizontalNav The navigation menu that is inside the top navigation bar
PlaceHolderLeftActions The additional objects above the Quick Launch bar
PlaceHolderLeftNavBar The Quick Launch navigation bar
PlaceHolderLeftNavBarBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderLeftNavBarDataSource The placement of the data source used to populate the left navigation
bar
PlaceHolderLeftNavBarTop The top section of the left navigation bar
PlaceHolderMain The main content of the page
PlaceHolderMiniConsole This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderNavSpacer This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderPageDescription Description of the current page
PlaceHolderPageImage This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderPageTitle The title of the site
PlaceHolderPageTitleInTitleArea The title of the page which appears in the title area on the page
PlaceHolderQuickLaunchTop The top of the Quick Launch menu
PlaceHolderQuickLaunchBottom The bottom of the Quick Launch menu
PlaceHolderSearchArea The section of the page for the search box and controls
PlaceHolderSiteName The name of the site where the current page resides
SPNavigation Used for additional page editing controls
PlaceHolderTitleAreaClass The class for the title area This control is now in the head tag and no
longer used in SharePoint 2010
PlaceHolderTitleAreaSeparator This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTitleBreadcrumb The breadcrumb text for the breadcrumb control
PlaceHolderTitleLeftBorder This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTitleRightMargin This placeholder does not appear as part of the interface but must be
present for backward compatibility
PlaceHolderTopNavBar The container used to hold the top navigation bar
PlaceHolderUtilityContent The additional content at the bottom of the page outside the form tag
Content Placeholders
httpspbuzzitsp2010dcph
CSS - SharePoint OOB (Out of the Box)
bull Los links CSS de SharePoint son colocados en cada paacutegina bull No se pueden remover completamente todos los links a CSS
bull Diferentes tipos de selectores bull Element (ej h1 h1extra)
bull Class (eg brand - ltdiv class=ldquobrandrdquogt
bull Id (ej logo - ltdiv id=ldquologordquogt
bull El mismo selector puede ser ldquosobreescritordquo en un archivo css
bull Recomentable ldquosobreescribirrdquo los estilos OOB de Sharepoint en un archivo propio
bull Muchas de las caracteriacutesticas OOB requieren todos los atributos desde los selectores OOB
CSS - Agregando estilos personalizados
bull Use el control CssRegistration bull Permite a los disentildeadores controlar el orden en que se carga el CSS
bull Provee el control sobre la cascada
bull $SPUrl~sitecollection reemplaza con el URL correcto en runtime
ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgt after=corev4css gt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgtgt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderblueyondercssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgtgt
CSS ndashSharePoint UI
bull CSS es uacutetil para ocultar UI de SharePoint
bull PublishingWebControlsEditModePanel puede ser usado para efectos similares bull Oculta el contenido cuando la paacutegina no estaacute en Modo Edicioacuten
ltstyle type=textcssgt
body s4-ribbonrow
display none
ltstylegt
Temas
12 colores 2 Fonts
Controla el look and feel del sitio
Usa Temas de Office (thmx)
Se pueden crear temas via PowerPoint
Que podemos hacer por HTML
bull HTML Element markup language (html)
bull Javascript programming language
bull jQuery and other libraries housed in JS files bull Cascading Style Sheets (css)
JavaScript en SharePoint 2010
3 formas de referenciar jQuery y otras libreriasJS en SharePoint
Accediendo a ltbody onload=ldquofuncion()rdquogt
_spBodyOnLoadFunctionNamespush(ldquofuncion)
Fluent UI ndash Server Ribbon
Fluent UI ndash Dialogos Status Bar y Notification Area SPUIModalDialog
SPUINotify
SPUIStatus
Status
Bar
Notification
ECMAScript OM Clientsvc
Using the JavaScript Client Object Model
Server OM
Content
database
Proxy
JavaScriptControls and Logic
XML Request
JSON Response Browser
SharePoint Server
Odata Services
Odata para Listas
Requests go to ListDatasvc
Sintaacutexis del Request
_vti_binListDatasvcEntity[(identifier)][Property]
Ejemplo
_vit_binListDatasvcProjects(4)BudgetHours
Obtiene la columna llamada BudgetHours en el item con el id ldquo4rdquo en la lista
de Proyectos
Tips amp Tricks Avanzados
Temas de Rendimiento
bull Reducir el peso de la paacutegina
Teacutecnicas
bull Output Caching
bull Blob Caching
bull CSS Sprites
bull Consolidar archivos JS y CSS
bull Cache JS CSS e imaacutegenes en el
browser
bull Minificar JS y CSS
bull Acceso Anoacutenimo para CSS JS e
imaacutegenes
Herramientas
bull Yslow
bull Fiddler
bull Wireshark
Tips amp Tricks Avanzados
Remover contenido de los resultados de buacutesqueda
ltdiv class=ldquofooter noindexrdquogt
lt--- footer content ---gt
ltdivgt
Contenido controlado por Seguridad
ltSharepointSPSecurityTrimmedControl runat=server Permissions=ManageWebgt
lt--- contenido ---gt
ltSharepointSPSecurityTrimmedControlgt
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
CSS - SharePoint OOB (Out of the Box)
bull Los links CSS de SharePoint son colocados en cada paacutegina bull No se pueden remover completamente todos los links a CSS
bull Diferentes tipos de selectores bull Element (ej h1 h1extra)
bull Class (eg brand - ltdiv class=ldquobrandrdquogt
bull Id (ej logo - ltdiv id=ldquologordquogt
bull El mismo selector puede ser ldquosobreescritordquo en un archivo css
bull Recomentable ldquosobreescribirrdquo los estilos OOB de Sharepoint en un archivo propio
bull Muchas de las caracteriacutesticas OOB requieren todos los atributos desde los selectores OOB
CSS - Agregando estilos personalizados
bull Use el control CssRegistration bull Permite a los disentildeadores controlar el orden en que se carga el CSS
bull Provee el control sobre la cascada
bull $SPUrl~sitecollection reemplaza con el URL correcto en runtime
ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgt after=corev4css gt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgtgt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderblueyondercssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgtgt
CSS ndashSharePoint UI
bull CSS es uacutetil para ocultar UI de SharePoint
bull PublishingWebControlsEditModePanel puede ser usado para efectos similares bull Oculta el contenido cuando la paacutegina no estaacute en Modo Edicioacuten
ltstyle type=textcssgt
body s4-ribbonrow
display none
ltstylegt
Temas
12 colores 2 Fonts
Controla el look and feel del sitio
Usa Temas de Office (thmx)
Se pueden crear temas via PowerPoint
Que podemos hacer por HTML
bull HTML Element markup language (html)
bull Javascript programming language
bull jQuery and other libraries housed in JS files bull Cascading Style Sheets (css)
JavaScript en SharePoint 2010
3 formas de referenciar jQuery y otras libreriasJS en SharePoint
Accediendo a ltbody onload=ldquofuncion()rdquogt
_spBodyOnLoadFunctionNamespush(ldquofuncion)
Fluent UI ndash Server Ribbon
Fluent UI ndash Dialogos Status Bar y Notification Area SPUIModalDialog
SPUINotify
SPUIStatus
Status
Bar
Notification
ECMAScript OM Clientsvc
Using the JavaScript Client Object Model
Server OM
Content
database
Proxy
JavaScriptControls and Logic
XML Request
JSON Response Browser
SharePoint Server
Odata Services
Odata para Listas
Requests go to ListDatasvc
Sintaacutexis del Request
_vti_binListDatasvcEntity[(identifier)][Property]
Ejemplo
_vit_binListDatasvcProjects(4)BudgetHours
Obtiene la columna llamada BudgetHours en el item con el id ldquo4rdquo en la lista
de Proyectos
Tips amp Tricks Avanzados
Temas de Rendimiento
bull Reducir el peso de la paacutegina
Teacutecnicas
bull Output Caching
bull Blob Caching
bull CSS Sprites
bull Consolidar archivos JS y CSS
bull Cache JS CSS e imaacutegenes en el
browser
bull Minificar JS y CSS
bull Acceso Anoacutenimo para CSS JS e
imaacutegenes
Herramientas
bull Yslow
bull Fiddler
bull Wireshark
Tips amp Tricks Avanzados
Remover contenido de los resultados de buacutesqueda
ltdiv class=ldquofooter noindexrdquogt
lt--- footer content ---gt
ltdivgt
Contenido controlado por Seguridad
ltSharepointSPSecurityTrimmedControl runat=server Permissions=ManageWebgt
lt--- contenido ---gt
ltSharepointSPSecurityTrimmedControlgt
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
CSS - Agregando estilos personalizados
bull Use el control CssRegistration bull Permite a los disentildeadores controlar el orden en que se carga el CSS
bull Provee el control sobre la cascada
bull $SPUrl~sitecollection reemplaza con el URL correcto en runtime
ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgt after=corev4css gt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderdefaultcssgtgt ltSharePointCssRegistration runat=Server name=lt $SPUrl~sitecollectionStyle Libraryblueyonderblueyondercssgt after=lt $SPUrl~sitecollectionStyle Libraryblueyonderlayoutcssgtgt
CSS ndashSharePoint UI
bull CSS es uacutetil para ocultar UI de SharePoint
bull PublishingWebControlsEditModePanel puede ser usado para efectos similares bull Oculta el contenido cuando la paacutegina no estaacute en Modo Edicioacuten
ltstyle type=textcssgt
body s4-ribbonrow
display none
ltstylegt
Temas
12 colores 2 Fonts
Controla el look and feel del sitio
Usa Temas de Office (thmx)
Se pueden crear temas via PowerPoint
Que podemos hacer por HTML
bull HTML Element markup language (html)
bull Javascript programming language
bull jQuery and other libraries housed in JS files bull Cascading Style Sheets (css)
JavaScript en SharePoint 2010
3 formas de referenciar jQuery y otras libreriasJS en SharePoint
Accediendo a ltbody onload=ldquofuncion()rdquogt
_spBodyOnLoadFunctionNamespush(ldquofuncion)
Fluent UI ndash Server Ribbon
Fluent UI ndash Dialogos Status Bar y Notification Area SPUIModalDialog
SPUINotify
SPUIStatus
Status
Bar
Notification
ECMAScript OM Clientsvc
Using the JavaScript Client Object Model
Server OM
Content
database
Proxy
JavaScriptControls and Logic
XML Request
JSON Response Browser
SharePoint Server
Odata Services
Odata para Listas
Requests go to ListDatasvc
Sintaacutexis del Request
_vti_binListDatasvcEntity[(identifier)][Property]
Ejemplo
_vit_binListDatasvcProjects(4)BudgetHours
Obtiene la columna llamada BudgetHours en el item con el id ldquo4rdquo en la lista
de Proyectos
Tips amp Tricks Avanzados
Temas de Rendimiento
bull Reducir el peso de la paacutegina
Teacutecnicas
bull Output Caching
bull Blob Caching
bull CSS Sprites
bull Consolidar archivos JS y CSS
bull Cache JS CSS e imaacutegenes en el
browser
bull Minificar JS y CSS
bull Acceso Anoacutenimo para CSS JS e
imaacutegenes
Herramientas
bull Yslow
bull Fiddler
bull Wireshark
Tips amp Tricks Avanzados
Remover contenido de los resultados de buacutesqueda
ltdiv class=ldquofooter noindexrdquogt
lt--- footer content ---gt
ltdivgt
Contenido controlado por Seguridad
ltSharepointSPSecurityTrimmedControl runat=server Permissions=ManageWebgt
lt--- contenido ---gt
ltSharepointSPSecurityTrimmedControlgt
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
CSS ndashSharePoint UI
bull CSS es uacutetil para ocultar UI de SharePoint
bull PublishingWebControlsEditModePanel puede ser usado para efectos similares bull Oculta el contenido cuando la paacutegina no estaacute en Modo Edicioacuten
ltstyle type=textcssgt
body s4-ribbonrow
display none
ltstylegt
Temas
12 colores 2 Fonts
Controla el look and feel del sitio
Usa Temas de Office (thmx)
Se pueden crear temas via PowerPoint
Que podemos hacer por HTML
bull HTML Element markup language (html)
bull Javascript programming language
bull jQuery and other libraries housed in JS files bull Cascading Style Sheets (css)
JavaScript en SharePoint 2010
3 formas de referenciar jQuery y otras libreriasJS en SharePoint
Accediendo a ltbody onload=ldquofuncion()rdquogt
_spBodyOnLoadFunctionNamespush(ldquofuncion)
Fluent UI ndash Server Ribbon
Fluent UI ndash Dialogos Status Bar y Notification Area SPUIModalDialog
SPUINotify
SPUIStatus
Status
Bar
Notification
ECMAScript OM Clientsvc
Using the JavaScript Client Object Model
Server OM
Content
database
Proxy
JavaScriptControls and Logic
XML Request
JSON Response Browser
SharePoint Server
Odata Services
Odata para Listas
Requests go to ListDatasvc
Sintaacutexis del Request
_vti_binListDatasvcEntity[(identifier)][Property]
Ejemplo
_vit_binListDatasvcProjects(4)BudgetHours
Obtiene la columna llamada BudgetHours en el item con el id ldquo4rdquo en la lista
de Proyectos
Tips amp Tricks Avanzados
Temas de Rendimiento
bull Reducir el peso de la paacutegina
Teacutecnicas
bull Output Caching
bull Blob Caching
bull CSS Sprites
bull Consolidar archivos JS y CSS
bull Cache JS CSS e imaacutegenes en el
browser
bull Minificar JS y CSS
bull Acceso Anoacutenimo para CSS JS e
imaacutegenes
Herramientas
bull Yslow
bull Fiddler
bull Wireshark
Tips amp Tricks Avanzados
Remover contenido de los resultados de buacutesqueda
ltdiv class=ldquofooter noindexrdquogt
lt--- footer content ---gt
ltdivgt
Contenido controlado por Seguridad
ltSharepointSPSecurityTrimmedControl runat=server Permissions=ManageWebgt
lt--- contenido ---gt
ltSharepointSPSecurityTrimmedControlgt
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
Temas
12 colores 2 Fonts
Controla el look and feel del sitio
Usa Temas de Office (thmx)
Se pueden crear temas via PowerPoint
Que podemos hacer por HTML
bull HTML Element markup language (html)
bull Javascript programming language
bull jQuery and other libraries housed in JS files bull Cascading Style Sheets (css)
JavaScript en SharePoint 2010
3 formas de referenciar jQuery y otras libreriasJS en SharePoint
Accediendo a ltbody onload=ldquofuncion()rdquogt
_spBodyOnLoadFunctionNamespush(ldquofuncion)
Fluent UI ndash Server Ribbon
Fluent UI ndash Dialogos Status Bar y Notification Area SPUIModalDialog
SPUINotify
SPUIStatus
Status
Bar
Notification
ECMAScript OM Clientsvc
Using the JavaScript Client Object Model
Server OM
Content
database
Proxy
JavaScriptControls and Logic
XML Request
JSON Response Browser
SharePoint Server
Odata Services
Odata para Listas
Requests go to ListDatasvc
Sintaacutexis del Request
_vti_binListDatasvcEntity[(identifier)][Property]
Ejemplo
_vit_binListDatasvcProjects(4)BudgetHours
Obtiene la columna llamada BudgetHours en el item con el id ldquo4rdquo en la lista
de Proyectos
Tips amp Tricks Avanzados
Temas de Rendimiento
bull Reducir el peso de la paacutegina
Teacutecnicas
bull Output Caching
bull Blob Caching
bull CSS Sprites
bull Consolidar archivos JS y CSS
bull Cache JS CSS e imaacutegenes en el
browser
bull Minificar JS y CSS
bull Acceso Anoacutenimo para CSS JS e
imaacutegenes
Herramientas
bull Yslow
bull Fiddler
bull Wireshark
Tips amp Tricks Avanzados
Remover contenido de los resultados de buacutesqueda
ltdiv class=ldquofooter noindexrdquogt
lt--- footer content ---gt
ltdivgt
Contenido controlado por Seguridad
ltSharepointSPSecurityTrimmedControl runat=server Permissions=ManageWebgt
lt--- contenido ---gt
ltSharepointSPSecurityTrimmedControlgt
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
Que podemos hacer por HTML
bull HTML Element markup language (html)
bull Javascript programming language
bull jQuery and other libraries housed in JS files bull Cascading Style Sheets (css)
JavaScript en SharePoint 2010
3 formas de referenciar jQuery y otras libreriasJS en SharePoint
Accediendo a ltbody onload=ldquofuncion()rdquogt
_spBodyOnLoadFunctionNamespush(ldquofuncion)
Fluent UI ndash Server Ribbon
Fluent UI ndash Dialogos Status Bar y Notification Area SPUIModalDialog
SPUINotify
SPUIStatus
Status
Bar
Notification
ECMAScript OM Clientsvc
Using the JavaScript Client Object Model
Server OM
Content
database
Proxy
JavaScriptControls and Logic
XML Request
JSON Response Browser
SharePoint Server
Odata Services
Odata para Listas
Requests go to ListDatasvc
Sintaacutexis del Request
_vti_binListDatasvcEntity[(identifier)][Property]
Ejemplo
_vit_binListDatasvcProjects(4)BudgetHours
Obtiene la columna llamada BudgetHours en el item con el id ldquo4rdquo en la lista
de Proyectos
Tips amp Tricks Avanzados
Temas de Rendimiento
bull Reducir el peso de la paacutegina
Teacutecnicas
bull Output Caching
bull Blob Caching
bull CSS Sprites
bull Consolidar archivos JS y CSS
bull Cache JS CSS e imaacutegenes en el
browser
bull Minificar JS y CSS
bull Acceso Anoacutenimo para CSS JS e
imaacutegenes
Herramientas
bull Yslow
bull Fiddler
bull Wireshark
Tips amp Tricks Avanzados
Remover contenido de los resultados de buacutesqueda
ltdiv class=ldquofooter noindexrdquogt
lt--- footer content ---gt
ltdivgt
Contenido controlado por Seguridad
ltSharepointSPSecurityTrimmedControl runat=server Permissions=ManageWebgt
lt--- contenido ---gt
ltSharepointSPSecurityTrimmedControlgt
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
JavaScript en SharePoint 2010
3 formas de referenciar jQuery y otras libreriasJS en SharePoint
Accediendo a ltbody onload=ldquofuncion()rdquogt
_spBodyOnLoadFunctionNamespush(ldquofuncion)
Fluent UI ndash Server Ribbon
Fluent UI ndash Dialogos Status Bar y Notification Area SPUIModalDialog
SPUINotify
SPUIStatus
Status
Bar
Notification
ECMAScript OM Clientsvc
Using the JavaScript Client Object Model
Server OM
Content
database
Proxy
JavaScriptControls and Logic
XML Request
JSON Response Browser
SharePoint Server
Odata Services
Odata para Listas
Requests go to ListDatasvc
Sintaacutexis del Request
_vti_binListDatasvcEntity[(identifier)][Property]
Ejemplo
_vit_binListDatasvcProjects(4)BudgetHours
Obtiene la columna llamada BudgetHours en el item con el id ldquo4rdquo en la lista
de Proyectos
Tips amp Tricks Avanzados
Temas de Rendimiento
bull Reducir el peso de la paacutegina
Teacutecnicas
bull Output Caching
bull Blob Caching
bull CSS Sprites
bull Consolidar archivos JS y CSS
bull Cache JS CSS e imaacutegenes en el
browser
bull Minificar JS y CSS
bull Acceso Anoacutenimo para CSS JS e
imaacutegenes
Herramientas
bull Yslow
bull Fiddler
bull Wireshark
Tips amp Tricks Avanzados
Remover contenido de los resultados de buacutesqueda
ltdiv class=ldquofooter noindexrdquogt
lt--- footer content ---gt
ltdivgt
Contenido controlado por Seguridad
ltSharepointSPSecurityTrimmedControl runat=server Permissions=ManageWebgt
lt--- contenido ---gt
ltSharepointSPSecurityTrimmedControlgt
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
Fluent UI ndash Server Ribbon
Fluent UI ndash Dialogos Status Bar y Notification Area SPUIModalDialog
SPUINotify
SPUIStatus
Status
Bar
Notification
ECMAScript OM Clientsvc
Using the JavaScript Client Object Model
Server OM
Content
database
Proxy
JavaScriptControls and Logic
XML Request
JSON Response Browser
SharePoint Server
Odata Services
Odata para Listas
Requests go to ListDatasvc
Sintaacutexis del Request
_vti_binListDatasvcEntity[(identifier)][Property]
Ejemplo
_vit_binListDatasvcProjects(4)BudgetHours
Obtiene la columna llamada BudgetHours en el item con el id ldquo4rdquo en la lista
de Proyectos
Tips amp Tricks Avanzados
Temas de Rendimiento
bull Reducir el peso de la paacutegina
Teacutecnicas
bull Output Caching
bull Blob Caching
bull CSS Sprites
bull Consolidar archivos JS y CSS
bull Cache JS CSS e imaacutegenes en el
browser
bull Minificar JS y CSS
bull Acceso Anoacutenimo para CSS JS e
imaacutegenes
Herramientas
bull Yslow
bull Fiddler
bull Wireshark
Tips amp Tricks Avanzados
Remover contenido de los resultados de buacutesqueda
ltdiv class=ldquofooter noindexrdquogt
lt--- footer content ---gt
ltdivgt
Contenido controlado por Seguridad
ltSharepointSPSecurityTrimmedControl runat=server Permissions=ManageWebgt
lt--- contenido ---gt
ltSharepointSPSecurityTrimmedControlgt
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
Fluent UI ndash Dialogos Status Bar y Notification Area SPUIModalDialog
SPUINotify
SPUIStatus
Status
Bar
Notification
ECMAScript OM Clientsvc
Using the JavaScript Client Object Model
Server OM
Content
database
Proxy
JavaScriptControls and Logic
XML Request
JSON Response Browser
SharePoint Server
Odata Services
Odata para Listas
Requests go to ListDatasvc
Sintaacutexis del Request
_vti_binListDatasvcEntity[(identifier)][Property]
Ejemplo
_vit_binListDatasvcProjects(4)BudgetHours
Obtiene la columna llamada BudgetHours en el item con el id ldquo4rdquo en la lista
de Proyectos
Tips amp Tricks Avanzados
Temas de Rendimiento
bull Reducir el peso de la paacutegina
Teacutecnicas
bull Output Caching
bull Blob Caching
bull CSS Sprites
bull Consolidar archivos JS y CSS
bull Cache JS CSS e imaacutegenes en el
browser
bull Minificar JS y CSS
bull Acceso Anoacutenimo para CSS JS e
imaacutegenes
Herramientas
bull Yslow
bull Fiddler
bull Wireshark
Tips amp Tricks Avanzados
Remover contenido de los resultados de buacutesqueda
ltdiv class=ldquofooter noindexrdquogt
lt--- footer content ---gt
ltdivgt
Contenido controlado por Seguridad
ltSharepointSPSecurityTrimmedControl runat=server Permissions=ManageWebgt
lt--- contenido ---gt
ltSharepointSPSecurityTrimmedControlgt
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
ECMAScript OM Clientsvc
Using the JavaScript Client Object Model
Server OM
Content
database
Proxy
JavaScriptControls and Logic
XML Request
JSON Response Browser
SharePoint Server
Odata Services
Odata para Listas
Requests go to ListDatasvc
Sintaacutexis del Request
_vti_binListDatasvcEntity[(identifier)][Property]
Ejemplo
_vit_binListDatasvcProjects(4)BudgetHours
Obtiene la columna llamada BudgetHours en el item con el id ldquo4rdquo en la lista
de Proyectos
Tips amp Tricks Avanzados
Temas de Rendimiento
bull Reducir el peso de la paacutegina
Teacutecnicas
bull Output Caching
bull Blob Caching
bull CSS Sprites
bull Consolidar archivos JS y CSS
bull Cache JS CSS e imaacutegenes en el
browser
bull Minificar JS y CSS
bull Acceso Anoacutenimo para CSS JS e
imaacutegenes
Herramientas
bull Yslow
bull Fiddler
bull Wireshark
Tips amp Tricks Avanzados
Remover contenido de los resultados de buacutesqueda
ltdiv class=ldquofooter noindexrdquogt
lt--- footer content ---gt
ltdivgt
Contenido controlado por Seguridad
ltSharepointSPSecurityTrimmedControl runat=server Permissions=ManageWebgt
lt--- contenido ---gt
ltSharepointSPSecurityTrimmedControlgt
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
Odata Services
Odata para Listas
Requests go to ListDatasvc
Sintaacutexis del Request
_vti_binListDatasvcEntity[(identifier)][Property]
Ejemplo
_vit_binListDatasvcProjects(4)BudgetHours
Obtiene la columna llamada BudgetHours en el item con el id ldquo4rdquo en la lista
de Proyectos
Tips amp Tricks Avanzados
Temas de Rendimiento
bull Reducir el peso de la paacutegina
Teacutecnicas
bull Output Caching
bull Blob Caching
bull CSS Sprites
bull Consolidar archivos JS y CSS
bull Cache JS CSS e imaacutegenes en el
browser
bull Minificar JS y CSS
bull Acceso Anoacutenimo para CSS JS e
imaacutegenes
Herramientas
bull Yslow
bull Fiddler
bull Wireshark
Tips amp Tricks Avanzados
Remover contenido de los resultados de buacutesqueda
ltdiv class=ldquofooter noindexrdquogt
lt--- footer content ---gt
ltdivgt
Contenido controlado por Seguridad
ltSharepointSPSecurityTrimmedControl runat=server Permissions=ManageWebgt
lt--- contenido ---gt
ltSharepointSPSecurityTrimmedControlgt
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
Tips amp Tricks Avanzados
Temas de Rendimiento
bull Reducir el peso de la paacutegina
Teacutecnicas
bull Output Caching
bull Blob Caching
bull CSS Sprites
bull Consolidar archivos JS y CSS
bull Cache JS CSS e imaacutegenes en el
browser
bull Minificar JS y CSS
bull Acceso Anoacutenimo para CSS JS e
imaacutegenes
Herramientas
bull Yslow
bull Fiddler
bull Wireshark
Tips amp Tricks Avanzados
Remover contenido de los resultados de buacutesqueda
ltdiv class=ldquofooter noindexrdquogt
lt--- footer content ---gt
ltdivgt
Contenido controlado por Seguridad
ltSharepointSPSecurityTrimmedControl runat=server Permissions=ManageWebgt
lt--- contenido ---gt
ltSharepointSPSecurityTrimmedControlgt
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
Tips amp Tricks Avanzados
Remover contenido de los resultados de buacutesqueda
ltdiv class=ldquofooter noindexrdquogt
lt--- footer content ---gt
ltdivgt
Contenido controlado por Seguridad
ltSharepointSPSecurityTrimmedControl runat=server Permissions=ManageWebgt
lt--- contenido ---gt
ltSharepointSPSecurityTrimmedControlgt
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
Que maacutes
bull Content Query Web Part
bull Data view web part en SharePoint Designer
bull XSLT templates
bull SPServices
bull httpspservicescodeplexcom
bull ClientOM
bull Social networks bull Facebook (httpcodegooglecompsharepoint-facebook-wall)
bull Twitter (httpcodegooglecompsharepoint-twitter)
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
En Resumen
SharePoint 2010 tiene un sistema de branding potente
Las Master Pages puede ser usadas para crear todo el look and feel que sea necesario
CSS puede ser usado para integrar con estilos (CSS) de Sharepoint existentes
Los Page Layouts permiten tener un control mas fino sobre las paacuteginas
No olvidar que esto es HTML (Mucho Jquery + CSS )
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
Preguntas
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
Muchas Gracias
Daniel Laco Director Ejecutivo
daniellvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
TE +54 11 4624-6012 (rot) email infovemncomar web httpwwwvemncomar
