INTRODUCING THE NAVBAR

INTRODUCING THE NAVBAR

One of the most challenging aspects of creating web apps is the fact that you're creating an application that an extremely large number of users will access, but you won't be providing them with a user manual. As a result, it's key to ensure your site is intuitive and easy to use. One great way to ensure that is to have a consistent structure throughout your site, and use conventions, such as having site navigation at the top of your site. This is where the navbar comes into play. The navbar is a Bootstrap component and is designed to provide navigation for the user. It's most commonly placed at the top of a page.

CREATING AND CONFIGURING THE NAVBAR

Getting started with the navbar

To start creating your own navbar, add an HTML5 nav element to your page, and add the navbar class to it. Alternatively, you could use a div or span element, however, best practice is to add the role='navigation'element for accessibility.

Next, adding the navbar-default class will enable the default color scheme for navbars; navbar-inverse will use the reverse color scheme.

Finally, content, like content for your page, is placed into one of two containers: container, for a fixed-widthcontainer, or container-fluid, which will take up the entire width of the page.

-- code

Positioning the navbar

You have three options when placing the navbar on your page.

The first option is to have it appear at the top of the page as a normal element, scrolling, and disappearing off the top of the browser window, along with the rest of the content. This is achieved by adding the navbar-static-top class.

-- code

The second option is affix it to the top of the page, so it will not disappear when the user scrolls, but rather stay in place. This is achieved by adding the navbar-fixed-top class.

Finally, you can have the navbar use the same behavior on the bottom of the page with navbar-fixed-bottom.

If you are using either fixed option, you are required to add padding to the top (for navbar-fixed-top), or bottom (for navbar-fixed-bottom) to the body element. If you forget to add this in, the navbar will overlap the content on the page. If you see the sample above, you'll notice the navbar is above the content, and the content starts with "Lorem ipsum dolor sit amet..." The image below shows the result of adding fixed, but not adding in the padding.

The proper HTML and CSS for a navbar-fixed-top is displayed below, with the padding. Remember that the padding must be set after the Bootstrap.min.css file is applied if you are using a seperate external stylesheet.

-- code

Bootstrap Visibility

BOOTSTRAP AND VISIBILITY

Bootstrap offers you the ability to show or hide content based on both screen size and printing state. The syntax is, as with much of Bootstrap, option-screen.

The two options are either hidden or visible. Both of the options will change the default for all other screen sizes and print. In other words, hidden-sm will make the content hidden for small screens, but visible on all others; visible-sm will make the content visible on small screens, but visible on all others.

One thing to note about visible-print. visible-print, while perfect for a demonstration, as you saw in the video, does have a couple of issues. First, it is deprecated, meaning it will eventually be removed from Boostrap. Second, while it will be visible only when printing, all other content currently being displayed on the page will also be visible. If you want something to be hidden when printing, use hidden-print.

visible summary

Class	Extra small	Small	Medium	Large
visible-xs	Displayed
visible-sm		Displayed
visible-md			Displayed
visible-lg				Displayed

hidden summary

Class	Extra small	Small	Medium	Large
hidden-xs		Displayed	Displayed	Displayed
hidden-sm	Displayed		Displayed	Displayed
hidden-md	Displayed	Displayed		Displayed
hidden-lg	Displayed	Displayed	Displayed

BOOTSTRAP : Mobile First

MOBILE FIRST

When designing pages, it's generally a best practice to design for the mobile, or smallest, device first. It's easier to scale content to a larger size, than it is to shrink the content. The process of designing for mobile devices first is called, creatively, mobile first.

Bootstrap is built with mobile-first in mind. When you use the different commands to control the size and placement of the items being displayed on your grid, it works best when you have the mobile layout defined, and then you use the different push and pull commands to control content placement on larger sizes.

Imagine the following scenario. Let's imagine we have two pieces of information, or images, that we need to display to the user. Without focusing on the actual content, the scenario is this: I have content that I want to be on the left side for medium and large screens in Bootstrap terms (large screens), but on the bottom for extra-small and small screens (small screens). I also have content that I want to be on the right side for large screens, but on the top for small screens.

I'm going to represent this with text named DETAILS and LOGO, respectively.

Medium & large displays
DETAILS	LOGO

For smaller screens, the desired display is to have the LOGO on the top, and DETAILS on the bottom.

Extra-small & small displays
LOGO
DETAILS

Let's start by building for the larger screens (medium and large). We can of course do this by just using the md abbreviation.

1. <div class='row'>
2.    <div class='col-md-6'>DETAILS</div>
3.    <div class='col-md-6'>LOGO</div>
4. </div>

Now let's add the code for the smaller screens. We can do this by using the xs abbreviation.

We start by pushing the left side content (Don't highlight this) data 12 columns to the right, which should cause it to automatically move to the next row. Remember this is the default behavior with Bootstrap grids; if something goes beyond column 12, it is automatically moved to the next row.

We then pull the right side content to the left 6 columns. This will bring it back to the beginning.

We'll finish everything by sizing each piece of content to take up 12 columns.

1. <div class='row'>
2.    <div class='col-md-6   col-xs-push-12   col-xs-12'>DETAILS</div>
3.    <div class='col-md-6   col-xs-pull-6        col-xs-12'>LOGO</div>
4. </div>

The result is not going to be what we want.

Extra-small & small displays
D
O

The first row, or DETAILS, will be wrong because we told Bootstrap to move it to the right 12 columns. While Bootstrap normally moves content to the next row in scenarios where the size is greater than 12 columns, it keeps it on the same row when using push, pushing it all the way off the screen.

Towards that end, with the second row, or LOGO, we pulled the data to the left 6 columns. Bootstrap will try to honor that request by again keeping it on the same row, and pulling it to the left 6 columns. The result is, again, that the content will be off the screen.

Let's start this over again, focusing on mobile first. We know we want LOGO to be on the top, and DETAILS on the bottom. Let's build that part first, or "mobile first".

1. <div class='row'>
2.    <div class='col-xs-12'>LOGO</div>
3.    <div class='col-xs-12'>DETAILS</div>
4. </div>

While I put the column in the same row, I told each piece of content to be 12 columns. Bootstrap will handle this by putting the content on different rows.

Extra-small & small displays
LOGO
DETAILS

Now let's turn our attention to the larger screens. We want DETAILS to be on the left, taking up 6 columns, and LOGO on the right, taking up 6 columns. What's great is it makes both thinking about this, and explaining it, much simpler.

We start by sizing LOGO and DETAILS for larger screens.

1. <div class='row'>
2.    <div class='col-xs-12  col-md-6'>LOGO</div>
3.    <div class='col-xs-12  col-md-6'>DETAILS</div>
4. </div>

The output will be as follows:

Medium & large displays
LOGO	DETAILS

We want the display to have LOGO on the right, and DETAILS on the left. So we need to push LOGO over 6, and pull DETAILS over 6. Let's add that in.

1. <div class='row'>
2.    <div class='col-xs-12  col-md-6  col-md-push-6'>LOGO</div>
3.    <div class='col-xs-12  col-md-6  col-md-pull-6'>DETAILS</div>
4. </div>

And the final result will be exactly what we wanted it to be. DETAILS on the left, LOGO on the right for larger displays.

Medium & large displays
DETAILS	LOGO

For smaller screens, the desired display is to have the LOGO on the top, and DETAILS on the bottom.

Extra-small & small displays
LOGO
DETAILS

In the end, mobile first design not only worked out the way we wanted it to, but it wound up being much easier to plan as well. We sized everything for our small screens, and then just moved things around, relatively simply, for large screens. When designing with Bootstrap, you want to use mobile first.

BOOTSTRAP : CONTROLLING PLACEMENT

CONTROLLING PLACEMENT

The ability to resize content based on screen size is extremely powerful. It allows you to ensure that the most relevant information is readily available to the user on a page, regardless of the size of device.

But there's more to optimizing display for different device types than just changing the size. Sometimes you need to move content higher up on the page, such as a product name, or a "Buy it now!" button. In other scenarios, you need to push content down, such as detailed information, which isn't necessarily as important to someone just browsing your page. In fact, you might even need to just hide it all together.

Bootstrap offers you complete control over the size, and placement, of content, across all devices.

You can use three main options for controlling placement in Bootstrap. Each option has a syntax similar to sizing content. You'll start with col, followed by the abbreviation for the screen-size, followed by the option, and then the number of columns. For example, you can move content to the right 6 columns on extra small screens by using col-xs-push-6. Here are the options available to you:

• offset
• Offset will instruct Bootstrap to skip the specified number of columns before placing content. With offset, the skipped columns will be left blank.
• push
• Push will instruct Bootstrap to move content to the right a specified number of columns. With push, the columns that were left blank can be used by pulling content to the left.
• pull
• Pull will instruct Bootstrap to move content to the left a specified number of columns. With pull, the columns that were left blank can be used by pushing content to the right.

Pattern 4 : Web Development Best Practices

• Stateless web servers behind a smart load balancer.
• Avoid session state (or if you can’t avoid it, use distributed cache rather than a database).
• Use a CDN to edge-cache static file assets (images and scripts).
• Use .NET 4.5’s async support to avoid blocking calls.

AVOID SESSION STATE

It's often not practical in a real-world cloud app to avoid storing some form of state for a user session, but some approaches impact performance and scalability more than others. If you have to store state, the best solution is to keep the amount of state small and store it in cookies. If that isn't feasible, the next best solution is to use ASP.NET session state with a provider for distributed, in-memory cache. (See “ASP.NET session state using a cache provider,” in the upcoming Module 12, “Distributed Caching.”) The worst solution from a performance and scalability standpoint is to use a database-backed session state provider.

RULE-BASED ACTIVATION

RULE-BASED ACTIVATION

Mail apps become available to users based on rules. The rules are defined in the manifest, and are checked when the item is opened. If the conditions in the rules are met, the app will be activated and become available for use.

The rule system is extremely rich. You can create multiple rules, and combine the rules with standard AND and OR operators to ensure your app only activates when necessary.

ACTIVATION RULE TYPES

Rule type	Notes
ItemIs	A rule that checks if the item type is a message or an appointment.
ItemHasRegularExpressionMatch	Allows you to define a regular expression (sometimes known as Perl Regular Expressions) to detect text inside of an email. You could use this to detect product codes or stock keeping units (SKU) to provide a link to information about that product.
ItemHasKnownEntity	A rule that looks for known entities such as addresses or dates. (See below for additional information
RuleCollection	A rule composed of multiple rules that are combined using AND or OR

WELL-KNOWN ENTITIES

Outlook is aware of several types of entities. An entity is a pattern of text that usually indicates a component such as street address or URL. When an entity is extracted, you can use the JavaScript API to obtain additonal information about the entity. For example, you can access the start and end time indicated by the text for a meeting suggestion. The table below demonstrates several of the entities available.

Entity type	Description	Example
Address	United States street address	1 Microsoft Way, Redmond, WA 07722
EmailAddress	Email address	charrison@adventure-works.com
MeetingSuggestion	Text that often indicates a time, place, or other prompt for connecting with another person	Let's talk about this tomorrow morning
Contact	Name combined with additional information	Christopher Harrison 206-555-1212
Phone Number	United States telephone number	206-555-1212
TaskSuggestion	Text that is often used to request the recipient of an email perform a task	Can you run the report for me?
Url	Address to a web or network location	http://www.adventure-works.com

VISUAL STUDIO STRUCTURE - OUTLOOK APP

VISUAL STUDIO STRUCTURE

The Visual Studio template for creating Apps for Outlook will create two projects.

The first project will be the container for your manifest file. The manifest is an XML document that describes the what is contained inside of the app, the rules about when the app should become available to the user, and the permissions required by the app.

The second project web project, which hosts the code you'll create for your app. This is the container for your code. The default app will contain several JavaScript libraries, including jQuery and the JavaScript API for Office. The JavaScript API for Office includes all of the objects, methods, properties and events you'll need to access the different components of Office to create your app. The web project has the following folder structure.

The Visual Studio template for creating Apps for Outlook will create two projects.

The first project will be the container for your manifest file. The manifest is an XML document that describes the what is contained inside of the app, the rules about when the app should become available to the user, and the permissions required by the app.

The second project web project, which hosts the code you'll create for your app. This is the container for your code. The default app will contain several JavaScript libraries, including jQuery and the JavaScript API for Office. The JavaScript API for Office includes all of the objects, methods, properties and events you'll need to access the different components of Office to create your app. The web project has the following folder structure.

Folder	Description
Scripts	Contains global JavaScript libraries, including jQuery and JavaScript API for Office
Images	Global images
Content	Global CSS files
AppRead	If creating an app for reading messages or appointments, this folder contains the HTML, JavaScript and CSS for all pages to be displayed when this app is in use.
AppWrite	If creating an app for writing (or composing) messages or appointments, this folder contains the HTML, JavaScript and CSS for all pages to be displayed when this app is in use.

The AppRead or AppWrite folder will contain a subfolder named Home. The Home folder is designed to contain the starting HTML file for your app, which is typically named Home.html. You can rename this folder if you wish, but you need to update the manifest. The manifest will contain the path to the starting folder and HTML file. However, it is generally best to stick with the convention supplied by Visual Studio and useHome/Home.html as the starting point.

INTRODUCING APPS FOR OUTLOOK

Microsoft Outlook is the most popular personal information management (PIM) and email client in use. It offers the ability to connect to most email servers, including any system that uses Exchange ActiveSync. Mail Apps allow you to write your code once, and have it run anywhere Outlook runs. This includes the desktop version of Outlook, as well as Outlook Web Access (OWA) and Oiffce mobile clients. Apps also run in a sandbox, isolated from the Outlook process. They also run with a three-tier permission model; the app must be trusted by the user, must have the permissions necessary to perform the operations it wishes to perform, as well as the user having the appropriate permissions.

You can create four different types of Apps for Outlook. You can create apps that will work for reading mail messages or appointments, or creating mail messages or appointments. When creating apps for reading messages or appointments, you can choose when the app will become available to the user. If, for example, the app is built to interact with addresses it sees in messages, you can configure the app to look for, and only activate it when an address is detected in the message.

One key thing to remember about Apps for Outlook, which is true across all Apps for Office, is the fact that your code will run in a protected sandbox. This ensures the security of Office, as your app won't have direct access to the Office or Outlook process. In addition, that sandbox will run the HTML, JavaScript and CSS code you need to present the to the user the experience you desire.

INTRODUCING APPS FOR OFFICE

INTRODUCING APPS FOR OFFICE

Office 2013, and Office 365, introduce a new app model that allows you to build, deploy and monetize apps that extend the capabilities of Office. This new app model gives developers to use the same code base to extend the locally installed, mobile and cloud-based versions of the product. In addition, you can create apps using almost any web programming technology, including HTML, CSS and JavaScript.

By extending Office, you have the ability to introduce your custom functionality and capabilities into the products your users are already using. Also, because this capability is based on common web technologies, you can use the same skills you've learned building web pages and apply them to your apps.