[Translation] how we do it: sharepoint.microsoft.com

This article is from the official blog of SharePoint product group, the original address is http://blogs.msdn.com/sharepoint/archive/2009/06/18/how-we-did-it-sharepoint-microsoft-com.aspx

 

We are happy to introduce and congratulate this article by Tony Tai (SharePoint product manager) and his team. They successfully published the SharePoint market site using SharePoint technology. this is a very cool project that builds the foundation for all feature site content. Through this project, we can now quickly manage and publish feature sites and content on the Internet. because Tim McDaniel and Celina baginski have made special contributions to the project, I would like to give them a special honor. well, I will not talk about it here. I hope you will like this article that has made outstanding contributions to the "how we did it" series.

 

Come on!

Dave PAE
SharePoint technical product manager

Bytes ---------------------------------------------------------------------------------------------------------------------------

Microsoft Office Sharepoint product group and advaiya, Inc. the company cooperated to recreate the sharepoint.microsoft.com site on the Sharepoint Server 2007 platform. microsoft chose advaiya, a consulting company located in Kirkland and Wa, to work with SharePoint because advaiya has a long history of working closely with many Microsoft teams. It has been working together to develop new strategies to develop new technologies, new Content and new solutions.

 

Target of site Reconstruction

====================

When the sharepoint.microsoft.com site project started, Microsoft and advaiya confirmed some goals:

• Introduce a new design to enhance user experience and demonstrate the independence of SharePoint and Microsoft office suites.
• Create an attractive environment and information structure to help SharePoint users find their desired information more easily.
• Streamline the existing release process so that the content authors at Microsoft can quickly publish new content and update existing content without the assistance of a third party.
• Provide dynamic and real-time content for users (customers, developers, end users) of different Microsoft Office Sharepoint.
• Microsoft Silverlight is used on the homepage and the entire site to demonstrate the excellent collaboration capability between Silverlight and Sharepoint.

To achieve these goals, advaiya has created several custom components and integrated them into the SharePoint platform. this article describes some key components and how they are created. It explains the basic design principles and theoretical basis behind each component.

 

New graphic interface design

====================

In order to create a new appearance and enhance the user experience, we have made a brand new design for the site. several designs were prototyped at the beginning of the project, and then in the design review session, they determined which design elements will be combined into the new site.

 

The new design represents a clear information level that allows users to easily locate information on the page. after the new design is approved, Microsoft SharePoint designer 2007, Microsoft Windows Live ID, Microsoft Expression blend 2, Microsoft Visual Studio 2008 tools are applied to implement the design within the SharePoint framework.

 

New Information Architecture

====================

After many years of updates, the previous Microsoft SharePoint site is rich in content, but it is increasingly difficult to increase and make it easier for different users to find relevant content. in order to make the information on the site easier to locate, some work sessions are carried out. In this process, the content is analyzed and a new information architecture is created. these sessions define information categorization-including how the content is classified, how it is stored, and how it is displayed. the detailed document captures all the decisions made in these work sessions. developers, content authors, and designers use these specification documents throughout the project.

 

Custom page layout and style sheet

==================

To allow content authors to quickly create and update site content, we use custom page la S and stacked Style Sheets (CSS) throughout the site ). related Technology page layout (figure 1) shows the out-of-the-box SharePoint publishing capability integrated with custom page layout and CSS. the content author does not need to spend time or effort formatting the content in the input field control, because the CSS embedded in the page layout will process formatting. this method saves time and ensures the consistency of the overall site appearance.

Chart 1. edit mode related techonolgies page

 

When creating a site, advaiya chooses to use as many out-of-the-box components as possible for the following reasons: saving development time and money and creating a simpler upgrade path, and minimize the cost and time spent on training content authors. we also use custom CSS styles to provide unique appearances for non-content parts of the site. the Quick Start Menu is an outstanding example.

Chart 2. Custom CSS style creates a unique branded Quick Start Menu

 

The homepage contains target audience content

======================

Another interesting requirement is to show the content prepared for a specific audience at the bottom of the homepage. when you click the tab on the left of the homepage, the related content can be displayed without refreshing the page. in addition, content authors need to be able to update content in Web Browsers without website coding skills.

Figure 3. Target audience content on the homepage

 

To meet this requirement, advaiya creates a custom content type and page layout to store information related to the audience content requirement and provides a user interface for content creation. based on the custom page layout, we have created a Publishing Page (publishing pages) related to each audience tab on the home page ). content is stored in the page layout, so that the author can easily write and update, track versions, and easily use the web content management approval function provided by Sharepoint. the content creator can create and edit the audience content without using the out-of-the-box Release Feature of SharePoint. only Authenticated Users have the permission to create, edit, and delete content on these pages, and the publishing and approval workflow ensures that only approved content can appear on the homepage.

Chart 4. content page for the developer audience in editing mode

 

In the homepage layout, a Web server control queries the page layout based on the audience content and returns the information stored in the field control on the page. we use the spquery object to execute this query. the smaller size of the query result set and the query is only for a list with only eight items, make this query method the best choice to meet this requirement. in addition, we use the page layout cache function to ensure that the query does not overload the server, and that the query is executed only once every three minutes.

 

After the Web Server Control obtains the data, it applies XSL to the XML returned by the query to convert the XML into the HTML required for rendering the content. this conversion process creates an option-based navigation menu and related content, but does not need to refresh the page.

 

The XSL applied to XML is stored in the XSL style sheet in the out-of-the-box style Library. this method allows the designer to update the appearance of this part of the homepage by modifying the XSL style sheet in the style Library, and reduces the need to recompile web server controls.

Chart 5. XSL style sheet that is stylized for targeted audience content (target audience content)

 

In the past, we planned to hide six pages containing the audience content for anonymous users. however, after the website is launched, microsoft realized that the links sent directly to these pages can provide additional value and reduce the need for users to click one of these tabs on the homepage. after finding this, we modified the layout of the audience content page to make it look like the home page and include the Silverlight hero bar (graphical menu) of the home page ).

Chart 6. Target audience content component (targeted audience content components)

 

Silverlight homepage heroes

============================

You may have seen a graphic menu, also known as hero bars ), in other websites-typically they are used to highlight and directly link to new or time-sensitive content. sometimes they are the top titles of new animations. one of the goals of this project is to create a Silverlight hero bar on the homepage. in addition to providing a good user experience and giving web site visitors a simple way to access important information, the content must be dynamic and easy to be maintained by Microsoft Content authors, the authors of these content do not have the development capability of Silverlight.

Chart 7. Silverlight homepage hero bar

 

To meet this requirement, advaiya created a Sharepoint list to store the data presented in the Silverlight hero bar. we have created three lists: MERs, events, and downloads. this method allows the content creator to create and update the content in the Silverlight hero bar by editing the list feature on the basic web page through Sharepoint, which they are familiar. content authors can select titles, descriptions, links, images, and background images (titles, descriptions, links, pictures, background images) displayed in the Silverlight hero bar ).

 

Chart 8. Data displayed in the events list in the hero bar on the Silverlight Homepage

 

When the website goes online, the Silverlight hero bar receives the source data as the initialization parameter. initialization parameters are generated by a Web Server Control in the query list. this method uses the advantages of the page output cache and limits the number of times the list is queried every three minutes.

 

We re-designed this component by calling the Windows Communication Foundation (WCF) Service to retrieve Sharepoint list information. by using this new method, we significantly reduce the size of the home page, regardless of whether your browser has enabled Silverlight. to ensure that the Web Front-end server is not overloaded by the list query action when each page is loaded, We cache the query results in the WCF Service. because the Web server control will no longer be used to provide initialization parameters, we can clear it.

 

To adapt to browsers that do not support Silverlight, we use JavaScript to detect whether the browser supports Silverlight. if the browser does not support Silverlight, The Silverlight control will be hidden, and a non-Silverlight hero bar will be rendered in the browser.

Chart 10. Silverlight homepage hero bar component

 

Silverlight main menu navigation

========================

Another goal of the project is to use Silverlight as the main menu navigation ). the Silverlight main menu navigation control must be dynamic, allowing content authors to modify links in the navigation by using out-of-the-box features.

Chart 10. Silverlight main menu navigation

 

To meet this requirement, we have created a dynamic Silverlight main menu navigation control. the out-of-the-box site map of SharePoint provides a navigation node for Silverlight to form a menu. this method allows content authors to modify the main menu navigation of Silverlight by using the out-of-the-box navigation editing function of SharePoint. in Figure 11, you can see that only the sub-site points are displayed in the main menu navigation, and the publishing pages, search results, and homepage of the dynamic audience content are hidden.

Chart 11. Out-of-the-box navigation settings

 

To use the Silverlight hero bar, we combined the initialization parameters with a WCF Service to load data. We designed components to manipulate the loading process under different bandwidth and display conditions.

Chart 12. Silverlight main menu navigation component

 

Search Engine Optimization

==================

We have done some things to optimize the site's search engine for content. one of these optimizations includes adding two fields to each page layout. these field controls allow content authors to specify keywords and descriptive titles for each page on the site.

Figure 13. A filed control that is also described on the page by a keyword

 

Visitor tracking and business intelligence

====================

To provide the SharePoint product group with other business intelligence information about site visitors, advaiya works with the WebTrends team. webtrends provides an intelligent solution for analysis and market. first, we include a WebTrends JavaScript function in the master page to track the rendering of each single page. to track the frequency of viewing target audience content on the homepage, each time a user clicks one of the audience links, we call the WebTrends JavaScript function. this JavaScript function calls the WebTrends server and reports which selected video card is selected.

dcsMultiTrack('DCS.dcssip', 'sharepoint.microsoft.com', 'DCS.dcsuri', '/pages/highlight.aspx', 'WT.ti', 'Microsoft Office SharePoint Server – Connecting People, Process, and Information', 'WT.dl', '0');

Figure 14. Webtrends JavaScript function, tracking when a user clicks the highlighted tab on the home page.

 

We also strengthened the Silverlight hero bar on the homepage to track how site visitors interact with it. we used the same JavaScript function in hero bar to capture which primary video card was selected, and the sub-tab and download link were clicked by users.

 

Packaging and deployment

==================

To ensure that the site follows the best practices for deployment, all components used to support the site are packaged into the SharePoint solution package (. WSP file. when we open the site to the server farm in the pre-production environment and production environment, we run a batch processing file (including the stsadm command) to deploy this package, install and activate features, create a site set. finally, we migrated the content database from our content creation and testing environment to the pre-production environment and production environment, configured the site set administrator, and started anonymous access. we are successful and there is no problem with running.

 

Conclusion

====================

In just three months, we have completed understanding existing site content, creating new information classification and site design, developing components, migrating content, and performing performance tests, and deploy the site to the production environment. the construction on the SharePoint platform allows us to meet or surpass all engineering objectives in a short time. the product group has recognized the benefits of the improved content publishing model and the growth and improvement of the site every day.

 

Todd baginski-Senior Enterprise Solutions strategist, advaiya, Inc.

Pratyush Mishra-Enterprise Technology strategist, advaiya, Inc.

Jomit vagh1.-Principal, office platform and live services, advaiya, Inc.

Vivek Soni-Senior Associate, advaiya, Inc.

Marshal Hagen-Software developer, advaiya, Inc.

Meeta choupa-Consultant, advaiya, Inc.

Ritu Mathur-Associate, advaiya, Inc.

Raquel Mayer-Art Director, advaiya, Inc.

 

Published Thursday, June 18,200 9