Pro SharePoint 2013 Branding and Responsive Web Development

566 Pages·2013·16.166 MB·English

by  Eric Overfield, Rita Zhang, Oscar Medina, Kanwal Khipple (auth.)

For your convenience Apress has placed some of the front
matter material after the index. Please use the Bookmarks
and Contents at a Glance links to access them.
Contents at a Glance
About the Authors ��������������������������������������������������������������������������������������������������������������xix
About the Contributing Author �������������������������������������������������������������������������������������������xxi
About the Technical Reviewer �����������������������������������������������������������������������������������������xxiii
Acknowledgments ������������������������������������������������������������������������������������������������������������xxv
Foreword ������������������������������������������������������������������������������������������������������������������������xxvii
Introduction ���������������������������������������������������������������������������������������������������������������������xxix
■ Chapter 1: What’s New in SharePoint 2013 Web Content Management ����������������������������1
■ Chapter 2: Responsive Web Design and Development with HTML5 ���������������������������������17
■ Chapter 3: Designing a Responsive Web Site ������������������������������������������������������������������47
■ Chapter 4: Building a SharePoint HTML Master Page ������������������������������������������������������75
■ Chapter 5: Making Your Master Page Responsive ���������������������������������������������������������119
■ Chapter 6: Building Site Structure and Navigation ��������������������������������������������������������169
■ Chapter 7: Building Page Layouts and Publishing Pages ����������������������������������������������227
■ Chapter 8: Publish Cross-Site Content with Catalogs ���������������������������������������������������285
■ Chapter 9: Integrating Search-Driven Content ��������������������������������������������������������������321
■ Chapter 10: Building Rich Interactive Forms�����������������������������������������������������������������379
■ Chapter 11: Uploading and Working with Files �������������������������������������������������������������397
■ Chapter 12: Integrating Location-Based Features ���������������������������������������������������������421
v
■ Contents at a GlanCe
■ Chapter 13: Integrating Feeds and Social Media �����������������������������������������������������������469
■ Chapter 14: Supporting Multilingual Web Sites �������������������������������������������������������������493
■ Appendix A: Configuring a Development Environment ��������������������������������������������������521
Index ���������������������������������������������������������������������������������������������������������������������������������533
vi
Introduction
Microsoft SharePoint has come a long way since its original roots as a document management system in 2001. With the
release of SharePoint 2007, Microsoft merged in the capabilities of the Microsoft Content Management Server 2002, and
the potential to deploy SharePoint for web content management was born. Since that time, thousands of companies
have built web sites using SharePoint 2007 and 2010.
With the release of SharePoint 2013, Microsoft has continued to evolve the web content management capabilities
of SharePoint, making it one of the most mature, stable, scalable, and feature-rich platforms available for deploying
and managing business web sites. One of the most exciting new capabilities is support for HTML5, opening up the
potential to build cutting-edge web sites that provide the best user experience on the latest smart phones, tablets,
and desktop browsers.
About This Book
This book aims to share with you how to leverage the power of two powerful technologies, HTML5 and SharePoint
2013, to build modern business web sites. Through the book we combine these technologies with a web design and
development methodology referred to as “responsive web design” that allows a single web site to respond to differences
in screen characteristics and browser capabilities.
The Need for Responsive Web Sites
The number of types of devices and browsers people are using to access the Internet just keeps growing. In addition
to the rapid emergence of smart phones and tablets, web sites and applications are now being accessed from gaming
consoles, televisions, ereaders, and more. You can even buy refrigerators today that can browse the web. These days,
the browsers on these devices rival and sometimes even surpass the capabilities of desktop browsers; however it wasn't
always this way.
The browsers embedded in the early generation mobile phones required simpler technologies. Wireless
Application Protocol (WAP) was designed to allow mobile phones to access the Internet over high-latency,
low-bandwidth mobile connections, and the browsers included in these devices were designed to display an
alternative markup language called Wireless Markup Language (WML). Web sites rendered using WML used only
basic text-based navigation and content. Organizations that wanted to support mobile devices were required to create
an alternative web site using WML, and a precedent was born for the mobile-specific web site.
As mobile networks became faster and more reliable, and the browsers in the emerging generation of smart
phones became closer in parity to desktop browsers, users abandoned the low-fidelity mobile web sites, and switched
to viewing the full HTML versions of organization web sites. At the time, most business web sites were being designed
to meet the lowest common denominator of desktops and network speeds. Typically, this was a fairly low-resolution
monitor (often 800 × 600 pixels), and dial-up Internet connections or low-bandwidth broadband provided by
early DSL and cable Internet providers. As broadband became more prevalent and desktop monitors increased in
resolution, web sites evolved to the use of advanced plug-ins such as Flash for rich media, and the use of heavier
graphics; mobile browsers again struggled to keep up.
xxix
■ IntroduCtIon
The immense popularity of the Apple iPhone became the tipping point for many organizations in recognizing
the need to provide a user experience tailored to the needs of mobile devices again. Some organizations started
producing native applications to complement their web sites, and other organizations developed special versions of
their web sites for specific smart phones (and later tablets like the iPad) by using a technique called “device detection”
and redirecting users to web pages specifically designed for the devices' specific resolution and capabilities.
■ Note In 2013 the most common desktop resolution is 1024 × 768 pixels or higher, whereas the most popular mobile
devices such as tablets have a resolution in excess of 2048 pixels across. expect resolutions to only increase.
Today, however, increasingly we have a problem. Mobile devices are set to exceed the number of desktops
accessing the Internet in 2013. As the variety of mobile devices that access the Internet increases, the ability to create
a separate web site specific to each device becomes impossible. We need a better way! Responsive web design utilizes
new capabilities of HTML5, notably improvements in CSS3 to create web sites that use fluid layouts to adapt to the
capabilities of a specific browser or device. In a nutshell, a single web site can now provide a user experience tailored to
the specific resolution and capabilities of their device without the need to produce specific page layouts for each device.
The Importance of HTML5
HTML5 is not a single technology or specification, but rather a loose marketing term for a broad collection of open
(and not so “open”) standards promoted and managed by a collection of standards bodies like the W3C and specific
browser vendors. It encompasses changes to the next generation of HTML markup, enhancements to CSS, and new
JavaScript APIs designed to enable a new generation of rich web sites and applications.
HTML5 is now widely supported by the world's leading technology vendors including Apple, Google, and
Microsoft and the leading browsers including Firefox, Internet Explorer, Safari, Opera, and Chrome. Probably one of
the most dramatic recent developments has been the wholehearted pivot by Microsoft to embrace the open standards
of HTML5 for the next generation Internet Explorer 10, but to also place it front and center as the technology for
developing the next generation of Windows 8 UI applications. Upon release IE 10 will be the most HTML5-compliant
browser, and will no doubt continue to fuel competition across browser implementations. Although many of the
HTML5 standards might not be finalized for many years, this kind of innovation and the industry investment being
made is being driven by a number of important factors.
As an industry there is fervent recognition that web sites and applications need to work well, today and
tomorrow, across the rapidly evolving capabilities of next-generation mobile devices and web-enabled consoles and
appliances. Techniques such as the use of plug-ins like Adobe Flash and Microsoft Silverlight to support rich media
and content presentation are not well supported on many of those devices. The refusal by Apple to support Adobe
Flash, and the subsequent announcement by Adobe that they were abandoning a Flash Mobile runtime have clearly
demonstrated the need for native browser capabilities to support enhanced capabilities that work, and perform well,
across many platforms and computing architectures.
And no less important, organizations are looking to reduce the cost of developing and supporting web sites and
applications. They are less supportive of vendor-specific tools and technologies, and the associated human resource
costs of staffing the specialized skills required to leverage them. A significant advantage of HTML5 is the potential
for ubiquitous access to sites and applications from anywhere, developing using standards-based technologies that
are relatively simple and easy to learn. Increasingly, JavaScript will become the de facto programming language for
developing the presentation layer of distributed applications. We are all JavaScript programmers now!
■ Note You can learn more about responsive web design, and details regarding how specific htMl5 capabilities
support it by reading Chapter 2.
xxx
■ IntroduCtIon
Why SharePoint 2013?
Microsoft SharePoint 2013 includes new features and capabilities to support many of the principles discussed in the
last section, most important, better support for HTML5. It also includes significant enhancements to the Client Object
Model, the programming API for accessing SharePoint from remote applications including in-browser with JavaScript
and Ajax. This makes SharePoint a powerful platform for supporting rich and peformant web sites and applications
without the need to program custom web services necessary to support client-side programming.
In addition to supporting the latest browser capabilities, business web sites also require a powerful server
platform offering web content authoring and publishing, search, metadata, and rich media storage and streaming
to satisfy business requirements. SharePoint 2013 includes significant improvements in capabilities that directly
support the needs of leading-edge web sites including powerful improvements like continuous search crawling,
improvements to the search keyword query language, metadata-driven site navigation, and more.
■ Note You can learn about all the new improvements provided by sharePoint 2013 for web content
management in Chapter 1.
Who Should Read This Book?
Over recent years, many traditional roles in information technology have become diffused by the “Do more with
less” mantra being exercised today by organizations to remain competitive. Information technology professionals are
frequently challenged with “stretch” assignments that challenge many of the traditional specializations such as project
manager, designer, developer, and administrator.
• Are you a project manager responsible for managing the development of a business web
site? This book will provide you with a step-by-step example of the typical activities and tasks
involved in planning the development of a business web site with SharePoint 2013.
• Are you a web solution architect responsible for evaluating the ability of SharePoint 2013 to
support the business requirements for a new business web site? This book will provide you
with an overview of all the new changes in web content management in SharePoint 2013, and
examples of how to use many of the most important new features.
• Are you a web designer responsible for designing a web site that will be deployed on
SharePoint 2013? This book will show you how to import your web templates into SharePoint,
how to take advantage of SharePoint metadata navigation, and how SharePoint can support
responsive web designs using device detection.
• Are you a web developer who needs to add interactive elements to the web site that integrate
with capabilities provided by SharePoint? This book provides examples of programming
the SharePoint 2013 client object model providing a rich JavaScript API for accessing the
advanced search, metadata, and other capabilities.
This book is primarily targeted for web designers and developers who are involved in building business web sites
using SharePoint 2013 or SharePoint Online. However, for everyone, by choice or by circumstance, who is involved
in the planning, architecture, design, development or deployment of a business web site using SharePoint 2013, this
book is for you!
xxxi
■ IntroduCtIon
What You Need To Know
We have tried to make this book as relevant and useful to as wide an audience as possible. Through the book we
provide step-by-step tutorials and samples of how to accomplish the tasks involved in building the web site that evolves
through each chapter.
However, we cover some advanced topics in web design and development using leading-edge tools and
technologies. To get the most of the topics covered, we recommend the following:
• An understanding of the basic technologies supporting the world wide web including HTTP
and HTTPS, domain names and uniform resource locators (URLs), and the basics of how
browsers interact with web servers over the Internet.
• Most important, successfully branding SharePoint requires good familiarity with HTML and
CSS. It is also recommended that you have familiarity with programming in JavaScript as well
as a working knowledge of jQuery. If you are looking to improve your general HTML and CSS
skills we recommend any of the following resources:
www.pluralsight.com
www.lynda.com
www.codecademy.com
www.teamtreehouse.com
• An understanding of the features and capabilities of Microsoft SharePoint. Some hands-on
experience using SharePoint sites, pages, lists, and libraries is also recommended.
Whatever your current level of experience, we are confident you will learn some valuable new skills and expertise
by the time you are finished with this book.
How This Book Is Organized
The chapters in this book are divided into topics that can be read in any order, however, they have been ordered to
follow a logical step-by-step process that incrementally builds an interactive and responsive website using
SharePoint 2013.
Chapters 1 and 2 provide a brief introduction to the goals of the book, essential features of SharePoint 2013
for web content management, and a primer on HTML5 and responsive web design. Chapters 3 through 14 then
demonstrate a typical web site development process while we incrementally build a sample web site.
Chapter 1: What’s New in SharePoint 2013 Web Content Management
SharePoint 2013 introduces an exciting collection of new features and capabilities related to web content management.
In this chapter we provide an overview of the new capabilities and how they improve on the web content management
features carried forward from previous SharePoint releases. We also provide you a reference to how we use these
features in subsequent chapters to build our example web site.
Chapter 2: Responsive Web Design and Development with HTML5
Responsive web design is a methodology, supported by new capabilities provided by HTML5 (primarily CSS3) that
will enable the next generation of web sites to provide the best user experience across a wide variety of devices and
browsers. In this chapter we introduce the reader to the fundamentals of HTML5, CSS3, and many of the new JavaScript
APIs, and explain how these new features support designing and developing more responsive web sites.
xxxii
■ IntroduCtIon
Chapter 3: Designing a Responsive Web Site
Traditional web site analysis and design often followed a waterfall approach that focused on the design of static
representations of web site pages. Responsive web design requires a new approach that recognizes that the
traditional “pixel-perfect” web page has become much more difficult to achieve with the ever growing number of
Internet-connected devices and their physical dimensions. Consider the different physical screen sizes and resolutions
between smart phones, tablets, and different desktop monitor sizes. Tradition web page design might be replaced
with a combination of multiple targeted web page dimensions and fluid layouts to match different device resolutions
and orientations. In this chapter we demonstrate how to use wireframes and storyboards to demonstrate transitions
between responsive layouts to communicate effectively with clients and web site stakeholders.
Chapter 4: Building a SharePoint HTML Master Page
SharePoint 2013 makes it easy for web designers without explicit knowledge of ASP.NET and SharePoint master pages
to convert standard HTML web templates to SharePoint master pages using the new Design Manager. In this chapter,
we demonstrate how to convert the HTML web site design template produced in Chapter 3 into a SharePoint-enabled
master page using the new SharePoint 2013 Design Manager.
Chapter 5: Making Your Master Page Responsive
A “responsive” web design allows a single web site to dynamically present the best user experience for a variety
of devices, browsers, screen resolutions, and orientations primarily using capabilities found in CSS3. This chapter
demonstrates how to update an HTML master page that includes responsive web design principles by utilizing a
responsive framework. We also see how we can further control our designs across different devices with CSS3 media
queries as well as take a look at a new feature of SharePoint 2013, device channels.
Chapter 6: Building Site Structure and Navigation
Good navigation is one of the most important design elements of a web site contributing to a positive user experience.
SharePoint 2013 has dramatically improved the ability to create dynamic navigation paths and site maps using the
Managed Metadata Service. This new capability also provides improved human-friendly URLs that have long been
the bane of SharePoint web sites. This chapter shows the reader how to design site structures and navigation with new
features provided by SharePoint 2013 including Managed Metadata navigation. We also compare different types of
navigation and multiple strategies when including them in a responsive site design.
Chapter 7: Building Page Layouts and Publishing Pages
Web pages created using the web content management publishing features of SharePoint are referred to as publishing
pages, and they inherit layout and behavior from a page layout. Custom page layouts can be extended with custom
content types to provide additional metadata as well as to provide a more consistent authoring experience. Most web
sites will have a collection of page layouts for presenting different kinds of content such as a product catalog, or product
details. Page layouts with custom content types are essential to allowing users to author content while controlling
presentation. In this chapter we design and create a collection of page layouts required to support our example site
along with a series of custom content types that are used throughout the example site.
xxxiii
■ IntroduCtIon
Chapter 8: Publishing Cross-Site Content with Catalogs
To make it easier to share and publish content across multiple web sites, SharePoint 2013 introduces a new capability
for cross-site publishing using catalogs. Catalogs are exposed through the search capabilities of SharePoint to allow
content to be easily reused across multiple web sites such as your organization's extranet, intranet, and business
web sites. In this chapter we demonstrate how to create a web site that exposes two catalogs, one of which integrates
managed metadata navigation and the other which does not. These catalogs are used for content reusability, which can
be surfaced through sites throughout a SharePoint farm.
Chapter 9: Integrating Search-Driven Content
One of the most powerful capabilities of SharePoint is “Search.” The Search service in SharePoint is designed to scale
to millions of content items and return search results with subsecond response times. One of the most common
requirements for business web sites is to aggregate and display content such as news and events, recent updates, or
popular content. In this chapter, we use the new Content Search web part to easily perform content aggregation and
rollups for our example site, and show how to customize the presentation of the information.
Chapter 10: Building Rich Interactive Forms
Just about every web site occasionally needs to connect information from users including surveys, feedback,
comments, or registration forms. HTML5 and jQuery provide the ability to provide rich interactive forms that support
validation and error handling without requiring postbacks to the server. Although there are multiple methods to
create forms in SharePoint 2013, in this chapter we implement a user event registration system using HTML5, jQuery,
Bootstrap, and the new REST API.
Chapter 11: Uploading and Working with Files
Occasionally web sites need to provide users with the ability to upload files. Traditionally, HTTP and HTML have
provided very limited support for accessing files on a client device. Uploading multiple files, particularly large files,
typically required the use of a browser plug-in, Adobe Flash, or Microsoft Silverlight. In this chapter we show the reader
how to combine the features of HTML5 and the SharePoint 2013 client object model to support advanced scenarios for
working with files.
Chapter 12: Integrating Location-Based Features
One of the exciting features of the rapid adoption of advanced smart phones and tablet devices is the opportunity
provided by GPS capabilities to support location-based features in your web sites or web applications. This chapter
demonstrates how to utilize the new SharePoint Location metadata field and the HTML5 Geo-Location API to integrate
maps and location-based features into the site.
Chapter 13: Integrating Feeds and Social Media
Many businesses are recognizing that the corporate web site needs to be an integrated component of their social
marketing strategies, pushing and pulling information from the web site across social media channels like Facebook,
LinkedIn, Twitter, and others. This chapter shows how to integrate remote feeds and social media features
in your web site.
xxxiv