Pro SharePoint 2013 Branding and Responsive Web Development

By Eric Overfield , Rita Zhang , Oscar Medina , Kanwal Khipple

Pro SharePoint 2013 Branding and Responsive Web Development Cover Image

Pro SharePoint 2013 Branding and Responsive Web Development is a complete guide to planning, designing, and developing modern, responsive websites and applications using SharePoint 2013 and open standards like HTML5, CSS3 and JavaScript.


Full Description

  • ISBN13: 978-1-4302-5028-9
  • 580 Pages
  • User Level: Intermediate to Advanced
  • Publication Date: June 18, 2013
  • Available eBook Formats: EPUB, MOBI, PDF
  • Print Book Price: $49.99
  • eBook Price: $34.99
Buy eBook Buy Print Book Add to Wishlist

Related Titles

Full Description

Pro SharePoint 2013 Branding and Responsive Web Development is the definitive reference on the technologies, tools, and techniques needed for building responsive websites and applications with SharePoint 2013. The book focuses on solutions that provide the best browser experience for the myriad of devices, browsers, and screen orientations and resolutions.

Web technology has changed considerably in the past few years. Microsoft has embraced the new generation of open standards represented by HTML5 and JavaScript, and these changes are represented in a fundamental shift in how SharePoint 2013 supports web content management and publishing. Authors Eric Overfield, Oscar Medina, Kanwal Khipple, and Rita Zhang join forces to dive into the new features and capabilities provided by SharePoint 2013 and combine them with the latest techniques in responsive web design and development to demonstrate how to build modern and progressive websites and applications.

Pro SharePoint 2013 Branding and Responsive Web Development covers the following technologies:
  • SharePoint 2013 Server Edition
  • Office 365 SharePoint Online
  • Expression Blend 2013
  • Napa Tools for Office and SharePoint Development
  • Visual Studio 2012
  • HTML5 and CSS3
  • JavaScript, JQuery, JQuery UI, Modernizr, and the Bootstrap Framework
  • SharePoint 2013 Client Object Model

What you’ll learn

Through the context of building a complete website on SharePoint 2013 from start to finish, readers will learn how to combine SharePoint 2013 web content management features and capabilities with modern web design and development skills. The key topics to be covered include:
  • Design Manager – this new feature allows web designers and developers to build SharePoint branding templates using standard HTML and CSS and convert the templates to SharePoint master pages. This opens up branding to a wider audience of designers who struggled with having to understand the complexity of SharePoint and ASP.NET master pages.
  • Client Object Model – this feature is based on web service technologies for interacting with server-side data from client-side. This feature has been extended significantly to support the new SharePoint application model, which heavily emphasizes client-side development. This book will provide full coverage of utilizing these updated web service technologies and how they can be used to build interactive websites.
  • Device Channels – similar to the capabilities provided by HTML5 media queries, the new channels capability allows SharePoint to detect client devices and browsers to load the appropriate master page to provide a unique browser experience.
  • Variations and Translation Services – SharePoint 2013 continues to improve features and capabilities for building multi-lingual sites including new support for integration with professional translation service providers, or automated translation web services.
  • Term Set Navigation and SEO Improvements – SharePoint 2013 now provides native support for Search Engine Optimization requirements such as page meta fields, as well as a completely new approach to site navigation and human friendly URLs through the use of Managed Metadata navigation.

Who this book is for

Pro SharePoint 2013 Branding and Responsive Web Development is designed for web designers and developers who have existing knowledge of basic website design and development, including HTML, CSS, and JavaScript. This book builds upon that foundational knowledge to walk the reader through a complete project lifecycle for building a responsive website on SharePoint 2013.

Table of Contents

Table of Contents

  1. What’s New in SharePoint 2013 Web Content Management
  2. Responsive Web Design and Development with HTML5
  3. Gather Requirements and Wire frame for the Site
  4. Building a SharePoint HTML Master Page
  5. Using Device Channels to customize ClientUX
  6. Design Site Structure and Navigation with Managed Metadata
  7. Publish Cross-Site Content with Catalogs
  8. Design and Develop Page Layouts and Content Types
  9. Integrate Search-Driven Content
  10. Build Rich Interactive Forms
  11. Upload Documents and Files
  12. Integrate Location-Based Features
  13. Integrating Feeds and Social Media
  14. Supporting Multilingual Sites
  15. Appendix A: Setting up your Design and Development Environment
Source Code/Downloads

Downloads are available to accompany this book.

Your operating system can likely extract zipped downloads automatically, but you may require software such as WinZip for PC, or StuffIt on a Mac.

Errata

Please Login to submit errata.

On page 82:
This is not an error but I was unable to map the connection by using native Mac system. So I fixed it by using Transmit. Once the connection is made in Transmit you can put this connection as an external drive on your desktop and then create a new site in Dreamweaver pointing to this drive.

On page 112:

There is a small error in Listing 4-18; please see the Author's correction below:
Author Comment:

header #SearchBox .ms-srch-sb-border, header #SearchBox .ms-srch-sb-borderFocused {
background: #e5e5e5 none;
border: 1px #c2c2c2 solid;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius:5px;
height: 38px;
display: block;
}
header #SearchBox .ms-srch-sb-borderFocused {
border-color: #009899;
}
header #SearchBox .ms-srch-sb input[type=text]{
border: 0px;
width: 170px;
height: 28px;
padding: 5px 10px;
font-size: 16px;
line-height: 1em;
color: #333;
background: transparent none;
display: inline-block;
vertical-align: top;
}
.ms-srch-sb > .ms-srch-sb-navLink {
background: transparent none;
padding: 0px;
margin: 7px 10px 5px 0;
}
.ms-srch-sb > .ms-srch-sb-navLink img {
display: block;
}
.ms-srch-sb > .ms-srch-sb-searchLink {
height: 24px;
width: 22px;
display: inline-block;
margin: 0px;
padding: 7px 0px 5px;
vertical-align: top;
-webkit-transition: all 0s ease;
-moz-transition: all 0s ease;
-o-transition: all 0s ease;
transition: all 0s ease;
background: transparent url('../img/icon-search.png') no-repeat 0px 6px;
}
.ms-srch-sb > .ms-srch-sb-searchLink:hover {
background: transparent url('../img/icon-search.png') no-repeat 0px -70px;
}
.ms-srch-sb > .ms-srch-sb-searchLink img {
display: none;
}


What was changed is the following. The style header #SearchBox .ms-srch-sb input[type=text] has a new width of 170px instead of 200px. Then two additional styles were added.

.ms-srch-sb > .ms-srch-sb-navLink {
background: transparent none;
padding: 0px;
margin: 7px 10px 5px 0;
}
.ms-srch-sb > .ms-srch-sb-navLink img {
display: block;
}

On page 128:


Please see the author's correction to Listing 5-4 below:
Author Comment:


After <head>, the listing should start with:

<!--beginning
must have two - after <!

same with <!-- our framework

and

<!-- originally

On page 150:

Please see the author's note below re: Listing 5-22.
Author Comment:


Listing 5-22 is missing a final }

this should be on its own line all of the way to the left.