Your SlideShare is downloading. ×
Branding sharepoint project
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Branding sharepoint project

3,114
views

Published on

2nd SPS Vietnam from Tuan Nguyen

2nd SPS Vietnam from Tuan Nguyen


1 Comment
3 Likes
Statistics
Notes
  • Nice presentation. Let me introduce you Bind Tuning http://bindtuning.com a tool that comes to revolutionize the way how SharePoint sites are branded, with a lot of themes that are fully customizable you can give to the sharepoint site a unique design in just a few clicks.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,114
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
136
Comments
1
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Themes are very useful and provide a more lightweight way to brand your SharePoint site. A theme can change the existing colors and images of a site, but not the layout of the elements in the site design.  A theme does not include any HTML or ASP.NET code, it is only a collection of image files and CSS files. The theme is applied on top of the site, replacing images and CSS styles in the site, essentially re-skinning the site. Themes can be used alone, or in conjunction with a custom master page.
  • Themes are very useful and provide a more lightweight way. A theme can change the existing colors and images of a site, but not the layout of the elements in the site design.  A theme does not include any HTML or ASP.NET code, it is only a collection of image files and CSS files. The theme is applied on top of the site, replacing images and CSS styles in the site, essentially re-skinning the site. Themes can be used alone, or in conjunction with a custom master page.Often a theme can handle your design changes for SharePoint. The web page layout for SharePoint uses the standard formula of header, main navigation across the top and a left navigation area. If your design includes the same layout, you may be able to create your design only with a theme. Themes can be used to alter a design to create different variations of a design for departments, divisions or regional sub sites.Themes affect all aspects of a site, including the application screens. 
  • If your design really deviates from the standard SharePoint look and feel, master pages are for you.  They allow for the most finite control over your page design.Multiple master pages can be created for various site needs, such as home splash screens, sub page designs, regional or divisional designs, etc.You can assign a master page to an entire site, or to a single page, and several options in between.  You have excellent control of where the master page is applied within your site.
  • When creating a brand for SharePoint, a key consideration is what pieces of SharePoint functionality will be supported by the design. A typical SharePoint page is made up of several controls and other pieces of functionality. Some of these functional controls are required in order for SharePoint to be used, but others are purely optional, based on your own project requirements.
  • Before starting any HTML web page, you first must decide which DOCTYPE will be used. A DOCTYPE is a piece of code that is declared at the top of a document that instructs browsers or other software to use a specific language to interpret the rest of the included code. If you haven’t heard of DOCTYPEs, you may be thinking that all browsers already understand HTML, so why the need to declare a DOCTYPE at the top? In fact, without any other intervention, an HTML page without a DOCTYPE is rendered by Internet Explorer in what’s known as Quirks mode. Quirks mode is similar to how IE 5.5 rendered pages, which can’t be a good thing; it was released ten years ago after all!
  • Transcript

    • 1. Sharepoint Branding
      "just not look like SharePoint!"
    • 2. Out line
      Definition of Branding
      Why Brand SharePoint?
      How Branding Works in SharePoint
      Design Considerations
      Creating Wireframes
      Tools of the Trade
      DOCTYPE! & SharePoint
      CSS in SharePoint
      Case Study
    • 3. Definition of Branding
      Branding is the act of creating a specific image or identity that people recognize in relation to a company or product.
    • 4. Definition of Branding
      When referring to websites, branding usually involves the COLORS, FONTS, LOGOS, and SUPPORTING GRAPHICS that make up the general look and feel of the site.
    • 5. Why Brand SharePoint?
      The most common reason is to make it unique.
      Making it “NOT look like SharePoint” is a basic request.
      For intranet site: A company might want to brand its intranet site to help convey to employees a sense of collaboration, teamwork, and even family.
      For internet site: A company want to communicate to this external audience information about your company, such as its services or products.
    • 6. Branding Is Just the Tip of the Iceberg
      Sharepoint Branding
      (LOOK & FEEL)
      Page Layout
      Navigation
      Site Templates
      Search Scope
      Site Definitions
      Custom Web Parts
    • 7.
    • 8. How Branding Works in SharePoint
    • 9. How Branding Works in SharePoint
      Themes
      In SharePoint 2007, themes were stored on the server in the SharePoint 12 folder, and consisted of XML, CSS, and images that were applied over the top of the default master page and CSS.
      In SharePoint 2010, themes are created with the Microsoft Office client software (2007 and above), using either Word or PowerPoint to create .THMXfiles that describe the 12 theme colors and two fonts available in the new SharePoint themes.
    • 10. Master page
      In SharePoint 2007: DEFAULT.MASTER and APPLICATION.MASTER.
      In SharePoint 2010:
      V4.MASTER: default master page that is used for many of the site templates
      NIGHTANDDAY.MASTER: This master page is accessible only in a SharePoint Server 2010
      MINIMAL.MASTER: This master page is used only on pages that have their own navigation or need extra space (such as dedicated application pages or the search center).
      How Branding Works in SharePoint
    • 11. How Branding Works in SharePoint
      Using a starter Master Page:
      Microsoft’s Starter master page: http://code.msdn.microsoft.com/odcSP14StarterMaster. This Starter master page was built for SharePoint Foundation 2010, SharePoint Server 2010.
      My own Starter master pages: (http://startermasterpages.codeplex.com)
      Heather's Base Master Page: http://www.heathersolomon.com/downloads/heathersbasemasterpage.zip
    • 12. Design Considerations
      Target Screen Resolution
      Table Layouts vs. Div Layouts
      Browser Versions
      Audience
    • 13. Forget IE6!
    • 14. Creating Wireframes
      Wireframes are skeletal page designs; they capture the layout and flow of a website without focusing on colors and graphics.
      SharePoint wireframing and prototyping: http://intranetfactory.com/site/sampleReport.doc
      Demo: http://intranetfactory.com/Viewer/site1459/default.aspx?NodeId=33129
      Resources for Visio : http://www.guuui.com/issues/01_06.php
    • 15. Creating Wireframes
    • 16. Creating Wireframes
    • 17. Tools of the Trade
    • 18. DOCTYPE! & SharePoint
      “Quirks mode” ??
      The following is a list of the most popular DOCTYPES in use today:
      HTML 4.01 Strict : Allows all HTML elements but does not allow deprecated elements such as the <font> tag.
      HTML 4.01 Transitional: Allows all HTML elements including deprecated elements.
      XHTML 1.0 Strict: Similar to HTML 4.01 Strict, but all tags must be well-formed XML. Deprecated elements are allowed but must also be well-formed XML
      XHTML 1.0 Transitional: Similar to HTML 4.01 Transitional, but all tags must be well-formed XML. Deprecated elements are allowed but must also be well-formed XML
      Does/Will SharePoint 2010 support HTML5?
    • 19. DOCTYPE! & SharePoint
      W3C HTML validator: http://validator.w3.org.
      With SharePoint 2007 & 2010, the resulting page will not properly validate as XHTML 1.0 compliant. This is because several legacy ASP.NET controls used in SharePoint 2010 do not produce valid XHTML code.
      Compatibility Mode in IE8
      this feature to help with the display of web pages that were coded to older versions of Internet Explorer.
      <meta http-equiv=”X-UA-Compatible” content=”IE=8” />
    • 20. CSS in SharePoint
      SharePoint 2007: you are probably familiar with core.css and its nearly 5,000 lines of CSS rules.
      SharePoint 2010: The default corev4.css: under 8,000 lines of code. And search.css: under 3,000 lines of code and wiki.css barely 50 lines of code
      Split into multiple files, only download what’s necessary for the page
      CUSTOM STYLE SHEETS
      <SharePoint:CssRegistration name=”/Style Library/customstyle.css” runat=”server”/>
      <SharePoint:CssRegistration name=”/Style Library/customstyle.css” After=”corev4.css”
      runat=”server”/> : SP2010
      <link media="all“ type="text/css" href="/_layouts/styles/customstyle.css" rel="stylesheet">
      CHEATSHEET
      CSS Reference Chart for SharePoint 2007 : http://www.heathersolomon.com/content/sp07cssreference.htm
      CSS SPRITES
    • 21. Case Study
    • 22. THANK YOU
      Contact me:
      tuan.nguyenminh@officience.com
      Or
      minhtuan2086@gmail.com