YAB (yet another blog) Site

SEO – Search Engine Optimization is one of the very important and most widely discussed process or technique. It is meant primarily to attract traffic from the Search Results on Search engines, without any payment or advertisement based relevance boosting involved. Apart from matching exact keywords, SEO, is governed by quite a number of factors including the following and each has unique weight-age and scoring pattern:

  • URL and Domain Architecture – friendly URLs containing keywords to the Page topic and searchable content
  • Structure of the Content – usage of right tags for titles, description, Structure, headers
  • Information Architecture (IA) – Usage of structured data to enhance listings
  • Speed, Authenticity and Authority of the Source
  • Mobile friendly – Responsive Design
  • Analytics – Page Engage factor, History, Shares
  • Personalized – Suitable for Country, Language or Locality
  • Sitemaps – create both HTML and XML versions of Sitemap. Makes it easier for Search engines to crawl the site

At my work, we use a home-grown framework based on Sitecore for Site, application building. In this platform it is ensured that implementation of SEO is embedded into its components, IA and Domain strategy so that all the future sites built on top of this framework reaps the benefit of SEO, by default. When the Sitecore UI Components are built, IA and Data design is to ensure the templates fields be mapped to fill content for the right tags. Content Authors need not worry about the UI representation but they focus on the Business Analysis and Keyword research primarily.

There are plenty of guides to say which meta tags to use for different purposes like, Title, is the most important tag and there are guidelines to check the quality of the content in terms of length, placements, relevant and non-duplicated keywords, etc. A well written tags are, to say SEO, is well-begun, and rest of the techniques ensure your pages get the right attraction on top of the table in the Search results from search engines.

URL strategy

In my application, there are quite a number of dynamic pages that are generated for products/items driven by Search (Coveo, in this case). In order to ensure these products are searchable, URL being friendly, containing Keywords on search, is very important. here’s an example of and Map Address.

When you examine these URLs reveals the structure and also keywords like “Gas Stations” and also the URL has location related details. When Search engine is returning the Gas Stations NEAR La Marque TX, this URL matches and tops the search results. Similarly, the URLs included on the Coveo Search index repository has clickableURI that are deep-linked to product directly. Deep linking to friendly URLs with product names instead of product id makes more practical sense.

SEO Periodic Table

Here’s  an interesting view of factors related to SEO, prepared by Agency, viz., Search Engine Land. (It reminds me back to my school days when I was forced to read the Periodic table !) However, this SEO periodic table is an interesting representation of various factors that could influence Search Engine Results Page (SERP) It provides SEO into two categories, On-the-page and Off-the-page factors. It also lists the interesting aspects of which feature attracts and which feature create negative scoring among major search engines including Google, Bing, and Yahoo.

(Ref:  http://searchengineland.com/guide/seo)

 

Advertisements

Dusting the blog

Last few years, was very quite – No blogging. Its time to dust the blog. Looking back, the last 12 months is one good learning experience. To begin with, it was a good learning experience with Sitecore, Coveo 4 sitecore, Azure (IaaS), also was introduced to AngularJS. Above all, the new stint at Digital group proved a good learning experience.

Its time to roll up sleeves and do some keystrokes to (b)log them here ! Hope the momentum is sustained.

From time to time, the technology buzzwords and trends keeps changing. Early  last year, ‘Digital‘ buzzed more than any other, across the IT sector. As definition of Digital keeps evolving and maturing, Automation is very loud this time of the year, followed by AI in the same wave of trends. Blockchain is another key buzz I hear on the organization focus and also on technical forums and chat groups. I see the adoption cycle for Blockchain very similar to the adoption of Cloud few years back. Initial hesitations and speculations are always part of the early life cycle. I’m sure coming months would have more traction on the Distributed Public Ledger technology (Blockchain). Azure’s recent support for Ethereum Consortium Blockchain – Microsoft’s Blockchain as a Service (Baas) / Azure Blockchain Service is a welcome step forward for broader Blockchain adoption.

In the coming weeks, shall share more on the thoughts around the new buzzwords and Sitecore related learning.

Until then, Happy weekend.

Is Windows 8 UI, pretty new to you?

Are you finding difficulty in performing the ‘Shut Down‘ or ‘Restart’ or ‘Hibernate’ ?

  • To shut Windows 8 down, just move the mouse cursor to the bottom right corner of the screen, click the Settings icon; Get into the Power option
  • Or press Win+I – and you’ll see a power button. Click this and choose ‘Shut Down’ or ‘Restart’
  • Some of the tricks available in previous versions of Windows still apply. Press Ctrl+Alt+Del, for instance, click the power button in the bottom right-hand corner and you’ll be presented with the same ‘Shut Down‘ and ‘Restart‘ options
  • And if you’re on the desktop, press Alt+F4 and you’ll be able to choose ‘Shut Down‘, ‘Restart‘, ‘Sign Out‘ or ‘Switch User‘ options.

Tips n Tricks

Recently, I had to prepare few Tips n Tricks for an internal technical newsletter. Lemme keep posting these short write-ups.

 

Windows 8 – Tip #1 (03/12/2013)

Are you missing the Sweet Start Menu in Windows 8? And the App Shortcuts?
Here’s few easy shortcuts to replace Start Menu

  • Press Windows Key + Q: launches the App Search Screen. You’ll get to see all apps installed in the box. You can also search to filter in this list of apps
  • Another way is to Press CTRL+Tab in the Start screen to switch between Start Screen and All Apps Screen
  • Also, try the Win+X to open a small pop-up menu with key system administrative options

Windows 8 is not just about the Operating system. More than the OS, there comes a new Design language or paradigm that needs to be adhered while building the new breed of Windows 8 Applications. Whether Microsoft calls it Metro design or Modern App Design, the name doesn’t matter. However, the design paradigm for a Windows Store App is very strong and defined in its own way. As a reminder, the Windows 8 Store Applications are not just meant for Desktops any longer; also suitable for other form factors like a Tablet or a Surface or new class of touch and type laptops. They also have a very high potential to be migrated/ported to the smaller form factors siblings like a Mobile phone. It is imperative that a developer should keep these important aspects in mind before could design and develop a Windows Store App.

In this write-up, we try to cover the features of Windows Store App as a compilation and provide an overview, more as a teaser so that developers are encouraged to deep dive with the links provided against each of these design elements. Before we get into the individual aspects, there are few basic underlying design principles based on which each one of these aspects are built upon

  • Show pride in craftsmanship
  • Be fast and fluid
  • Do More with Less
  • Be authentically digital
  • Win as one

UI Layout

First and foremost, one striking similarities between all Windows Store app is the way UI for the application to look alike. We can take the cue from the way the start menu is organized. Look for the spacing on the sides. More space on the Left and ample space for the title and the main content is focused to the area where user has high visibility and focus. UI Layout style for windows store app has evolved from much Usability research and understanding patterns. Layouts are driven by the philosophy of “Showing pride in craftsmanship”.

The application supports different layouts like a landscape or portrait or snapped layout. A device can be rotated so that the view is changed from Landscpe to Portrait. The windows store application should support all these three layout models.

An application can be snapped to the Left (or right) side of the screen to enable multiple window view at the same time. The snapping enhances multi-tasking ability.

As mentioned earlier these application are tuned to be viewed across multiple form factors, so they need to be able to get resized according to the host screen size and also scalable to the pixel density offered. The images used in the application should be ensured to have good resolution when viewed in different formats or form factors.

Navigation framework

All Windows Store Apps has one Window (Of course no chrome, no close buttons, title bars or neither status bar) and takes up maximum space possible on the screen. However, the single window supports multiple views. The Windows Store apps supports multiple layouts and views to create a ‘Fast and fluid’ harmonious user experience across different form factors and devices. The navigation from one view to another should happen with no distraction.

The navigation framework in the application supports going back and forward. Each view would have a View header, Back Button (if not the first page), and the content view. The content view can be a Hub page or Content details page. Windows App store supports multiple templates to fill content. Read more about the templates here.

Care about the Edges

The System has special meaning for each of the corners in the display. For example, when the user hover on Lower left corner it takes them to start or previous app and top right corner brings in the Charm bar. Application we design should keep these special corners in mind so that these corners are preserved only for the system usage and no meaningful content or event is overlapped.

Effective use of App Bars

App Bar is the primary command interface. In the App Bar, navigation, special commands and tools to the application is displayed, typically. While it is tempting to add too many buttons into the App Bars, it is the time to revisit the basic design principles of windows store apps: “Do more with less”. Unlike a Desktop application, design philosophy of Windows store app is to provide less number of buttons and focus more on the content itself. Having said, App Bars are optional interface touch points for the application which can be effective in providing needed functionality. Also the App Bars do not clutter the UI and is invoked, only when it is required, through swiping of finger from the top or bottom of the screen, Right mouse click also invokes the App Bar. App bars are not the place for doing commands or events related to Contracts (we’ll find details later in this article about contracts) as Charms are the perfect place for them.

Live Tiles update

Gone are the days of static Icons. Tiles represents the applications in the Start screen. They are not just picture in different sizes (two size: Square and wide), they can have live updates from the application. The application can have Tile updated in the start screen even if the application is running in the background. Live Tiles are very useful to indicate notifications to the User even without entering or starting the application.

Some of the very useful implementation of Live Tiles includes a Mail application that gives the subject preview and a news app giving latest headlines. The User can disable the live updates for a tile, as a preference.

The Notifications on the live tiles can be text, images or just an app logo or could be notification badge (like the number in the Store Tile above). The Notifications on the live tile can be cycling (System can handle up to 5 notifications). Developer could also build a Secondary Tiles and that can work independent of the main tile.

Touch First

Windows 8 is all about Touch first interface and also animations that be both fast and fluid too. Touch interface brings in more ways in which user can interact with the application through gestures. One of the most touch-optimized feature is Semantic Zoom. It helps the user navigate large amount of content, through a pinch gesture, User can zoom-in and zoom-out of the content semantically. For instance, in the Zoomed-in can show the detailed contents and zoomed-out can show the overview categories.

Also, do not forget the good old Keyboard & Mouse, Windows 8 is still about desktop too. Applications should be able to still work in the same way where Touch is not available but mimic the events using Keyboard and mouse.

Event Model and App Life cycle

Windows run time or the system takes care of application life cycle management. So the User need not explicitly close or terminate the application. That also brings an interesting dimension to the application, always keep the state of the application saved internally. So that, when the application is moved from Suspended state back to active state, the User experience is improved with the state restored to the place it was before being suspended.

More about the guidelines on suspend and resume. When an application is started, instead of getting into the initial state, it is suggested to load from the state were the user has left, the previous time. This gives an impression to the end-user that, the application was always running in the backdrop. When the application loads, check for the saved application state and restore the state, wherever it could. Always handle the Suspend event to release heavy objects and resource handles and also use it to save the state of the application.

Contracts

Apps needs to talks to the other Apps and also to the system. In order to make this experience better, Windows 8 application paradigm introduces ‘Contracts’, it is the glue that bonds app with Windows 8 and other apps. Contracts is like an agreement between one or more apps. Contracts define the requirements that apps must need to interact. When two application that has implemented the same contracts, they can communicate through the contracts. For instance, when App 1 wants to search the content from Application 2, App 1 uses the search contract exposed by App 2. Contracts are different than the Extensions. Typically, Extensions is more an agreement between an App and the Windows system or may be customized and extended for other applications to use it further.

Some of the Contracts that is commonly shared across applications are

  • Search
  • Share
  • Play To
  • Device

Charms is the vertical bar that is invoked when the User hove on the Right Top Screen corner. Charm is the place where windows has hosted the popular contracts like Search, Share, Devices and Settings. The Contracts in the charm work in context of the application that’s loaded. When Application 1 is running the settings in the charm is in the context of the Application 1. Similarly, Search and Share are related to the App that’s running than the system itself.

In order to make a better App, the developer needs to expose right set of contracts (like Search, Share, Device, etc.). On the contrary, when search is not a key feature of the application, developer may refrain from adding the Search contract as part of the application. Because the implication is, when the other applications that intend to search ends up with a bad experience.

New devices and new horizons

While the applications work on the desktop, the Tablets and Mobile platform brings in other new opportunities to unleash. Mobility opens up new gadgets and techniques. While it comes to mobility, it is about building applications that can be used on the move not just for those devices which can be portable. In order to make that happen, the application could tap the potentials of devices and sensors that are available in Tablets:

  • Cameras, pictures/Music from external Storage devices
  • Proximity Sensors and Gestures
  • Geo Locations aware applications
  • Accelerometers

Above all, when we target the application to work across desktops too, we need to have alternative approaches to make these applications work gracefully in the laptops and desktops that do not have these features.

Accessibility, Globalization and Localization

Invariably, any application that is targeted for global consumption, needs to focus on accessibility features like Screen reading, keyboard accessibility, and visual accessibility (making screen elements bigger). Globalization and Location, like any other application is important to make a wider appeal cross different users.

This write-up is more an overview and trying to provide a teaser on various aspects of the design philosophy that needs to be kept in mind while coming up with Windows Store App. Further deep dive into links provided against each aspects would prove to be beneficial. In addition, Learn to build Windows Store apps is a good place to grab more details on Windows Store App design and development.

Happy Programming.

Reference

Learn to build Windows Store apps

Win8 Consumer preview

First reaction, MSFT didn’t pack anything new from the previous pre-beta version. Yes, ofcourse, the Beta Fish on the loading !
Used the usual tested route of installing Windows 8 on a Oracle virtual Box with 2GB ram to spare and VHD spacing 20GB. The installation and set up was a breeze.

The Zoom button on the bottom right portion to do context zooming and Charms when hover to bottom right is another addition. Initial 15-20 mins of play has not revealed any new feature. Will keep exploring more on the AppLocker and native-Hyper-V support.

In the previous write-up on LightSwitch, we discussed about how to build screens and navigations and build an application. Taking a step forward, using LightSwitch I want to build a web application which supports features like Authentication and Authorization out of box. What is the catch?! Yes, the catch is, still, ZERO CODE written! J.

A quick recap on creating a Web application using LightSwitch, your mandatory pre-requisite is Visual Studio LightSwitch 2011. First step, obviously, to create a new LightSwitch Application (C#) project.

From Now on to the basic entity model, I’m going to skip, (refer to my previous write-up for details). For the sake of simplicity, we’ll use the good old PUBS sample database for the demo purpose. We’ll play around entities like Authors & Titles.

Using Add screen wizards, let us add a new List Detail screen for entities, Authors & Titles. During the addition, let us also enable the dependency relationship details for AuthorsTitles & TitleAuthors to be included in the screen.

After necessary Screen designs, Get down to the properties page of LightSwitch Project to define key properties for Access Control, Application type Publish the application into a host environment.

The Publishing Wizard of LightSwitch can help in hosting the web application in a Windows Azure (Cloud) or host the application services on a separate IIS Server. For the sake of this demo, let us focus on hosting the app in IIS. Select the option for client & Application Server as in the setting below:

Before we hit on Publish button, we’ve one more step to complete, to set the access control. In the properties page, click on Access Control to set the type of Authentication

By default, the Authentication type is not enabled. The web application can either select Windows Authentication or use Forms based authentication. Let us select Forms authentication for this example and Windows Authentication works the same way, as usual.

LightSwitch has a built-in permission called Security Administration, and any user who receives this permission becomes a security administrator. The Security Administration permission allows the logged-on user to access the Security Administration screens in the running LightSwitch client application, which will show automatically for users who have been granted this privilege. If you are curious to know if LightSwitch do provide us with any default screen to manage User & Roles, please click on Screen Navigation to find a separate Menu group, ‘Administration’ with tasks Roles & User under them. This group of screens is visible only for those roles with ‘SecurityAdministration’ permission. When a user logs in with Security Administration privilege, the client application screen will have additional task menu on the left side.

We are almost done with other settings in the property page, we could go back to Application type property page and select the publish Wizard for finishing details on security settings. Publish step will build the LightSwitch application, bundle them with all required resources and then take us through a set of wizard screens to define properties to host the output files into the target environment.

Publish Wizard begins with Client configuration. We had earlier marked this as a Web Application and this choice is reflected in the Wizard.

Next step is to define the Application Server. Again, we opted to host this on an IIS Server; this option is reflected in the wizard. However, before we move on to next step, need to ensure that IIS server has LightSwitch pre-requisites installed on the application server. The LightSwitch server prerequisites are installed by using Web Platform Installer. You can download Web Platform Installer from the Microsoft Download Site. Once the pre-requisites on the IIS server are confirmed, the next step is to ‘Specify Publishing Reference’. The wizard can create an MSDeploy package or remotely deploy on IIS server directly

The next step is to define Database connection to the DB where Authentication information to be persisted. For this demo, I set it to a SQL DB where ASPNET user tables are created and stored.

During the Publishing wizard, in order for the LS app to work with access control, the wizard themselves provides an entry to create Application Administrator User at this time. And other users can be created through application User management screens.

Next step is to specify application Data Source connection strings in the ‘Other Connections’ page. The Wizard auto-populates the connection string based on the initial definition we provided during the Entity data source definition. Post this step, we have an optional step to specify Certificate for SSL (which are self-explanatory), final page in the wizard is the Publish Summary Page as below.

Once we click on the publish button, the MsDeploy package is remotely deployed into the IIS Server (Localhost in this case) under Default Web site\WebAppAuth Application. You’ll see the status update of ‘Published Successfully’ in the visual studio status bar, once it is published.

One point to note about authentication is, this works only on deployed environment and does not work during the Debug mode. So to test Authentication, you need to deploy them in the hosting environment.

Unlike the debug mode, when the application is launched from the hosted environment, the initial page is a Login Page. In the login page, use the ‘Admin’ user credential that was specified during the Publish Wizard. We could additionally see two more tasks on the left menu, viz., Roles, Users.

Till this point of time, we’ve not written a line of code, however, we’ve accomplished a Web application with a login page, Authentication and Authorization capability.

Securing Data on the Logic Tier

As we get to next stage, we might have functionality to enable or disable screens for certain role permissions alone.

The logic tier includes two major groups of components where you apply permissions checking: entities and queries.

Entities are the general mechanism for accessing and working with application data. There are four main actions you can carry out with entities: read, insert, update and delete. LightSwitch gives developers a hook-point to verify a user’s permissions as each action is carried out, and it also provides a simple API for checking if the current user has a specific permission defined in the application. The following code shows an example of the permissions check and the various gate methods the API provides to allow a developer to check permissions:

partial void Employee_CanUpdate

(ref bool result)

{

result = Application.Current.User.HasPermission

(Permissions.EmployeeUpdate);

}

partial void Employee_CanInsert…

partial void Employee_CanRead…

partial void Employee_CanDelete…

partial void SaveChanges_CanExecute…

A couple of things should be noted. First, these methods, with the exception of SaveChanges_CanExecute, are implemented on the entity set as a whole and not on the specific entity instances. Therefore, any checks performed can’t be related to data values on a specific entity instance. The SaveChanges_CanExecute method controls access to changes in the entire data source and therefore can’t contain entity- or entity-set-specific logic. Second, if the Employee_CanRead method returns false, the Employee_CanUpdate and Employee_CanDelete methods will not be called, as they would be implicitly false as well. A user is not allowed to update or delete an entity if she isn’t allowed to read it.

The “Can” methods are the basic way to do coarse-grained security. They support basic data access-control policies. However, they have some limitations. When more fine-grained control for reading data is needed, you can implement access-control logic on queries. To control the writing of data at a more granular level, you must do so in the Save Pipeline.

Queries are also secured on the logic tier. Each query has a method that allows you to control access. LightSwitch automatically generates three queries for each entity that exists: an All query to return all of the entity instances, and Single and SingleOrDefault queries to return one entity instance by key. Each of these built-in queries has a CanExecute method that can be used to implement access control:

partial void Employees_All_CanExecute(ref bool result)

{

result = Application.Current.User.HasPermission

(Permissions.QueryEmployees);

}

partial void Employees_Single_CanExecute…

partial void Employees_SingleOrDefault_CanExecute…

It’s important to note that LightSwitch queries are composable, meaning new queries can be based on an existing query. When applying access-control logic to queries, the permission requirements on the initial query serve as input to queries composed on that query. The Single and the SingleOrDefault queries are composed on the ‘All’ query, so securing the All query also secures these queries if no specific permissions are specified for the derived query. However, if you like, you can specify permissions on the derived query that are less restrictive than those on the composing query. Also, the CanRead method on the entity set will be applied before CanExecute for any queries of that type.

SignOut

You may also see the logged in user name on the bottom right corner of the screen. You’ll be curious to note that, there’s no Sign out option by default.

Indeed, it is little tricky to implement the Sign Out option. Since these buttons are on the Silverlight application pages, they need to rely on the server side of the application to perform ‘FormsAuthentication.SignOut()’ operation. This part is not straightforward. To accomplish a Sign-out functionality, create a Separate ASP.NET web project and name it as same project name as LightSwitch application, WebAppAuth. Add a Web Page, LogOut.aspx like the following:

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head runat=”server”>

<title></title>

</head>

<body>

<form id=”form1″ runat=”server”>

<div></div>

</form>

</body>

</html

And for the code-behind file:

namespace WebAppAuth

{

public partial class LogOutForm : System.Web.UI.Page

{

protected void Page_Load

(object sender, EventArgs e)

{

FormsAuthentication.SignOut();

Response.Redirect(“default.htm”);

}

}

}

Build this Web project and copy the LogOff.aspx from your ASPX project to the root location of your published LightSwitch app, right next to web.config and default.htm. And Copy the WebAppAuth.dll from the ASPX bin folder into the to the bin directory of your published LightSwitch app.

The next step is to wire up the ASPX page with the LightSwitch App. The easiest way, is to introduce a button on the LS App Screen and place the Button_Execute code

using Microsoft.LightSwitch.Threading;

using System.Windows.Browser;

partial void LogOut_Execute()

{

Dispatchers.Main.Invoke(() =>

{

HtmlPage.Window.Navigate(new Uri(“LogOff.aspx”, UriKind.Relative));

});

}

The above code needs reference to System.Windows.Browser assembly in the client. And after this wire-up, don’t forget to build your LS app and publish it to the remote host server.

This work around can be attached directly through the publishing process automatically by manually editing the WebAppAuth.lsproj file to manually include the Logoff pages automatically while you publish changes to your LS application. For steps to manually doing this, refer to this link.

Reference:

http://msdn.microsoft.com/en-us/magazine/hh456409.aspx

http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/35/Saving-Files-To-File-System-With-LightSwitch-Uploading-Files.aspx

http://lightswitchhelpwebsite.com/

%d bloggers like this: