Blog posts from Oshyn, Inc

Using Sitecore WebControl to Customize Google Calendar Reminder Button

The Oshyn Team — Wed, 25 Jan 2012 20:09:59 +0000

WebControls allow the creation of reusable atomic components that fits well with the needs of semi-static HTML components. For this example of how to use WebControls in semi-static HTML components, we have created a Google Calendar Reminder button that can easily be reused/expanded. The code is a basic Sitecore WebControl with some custom parameters for setting the start/end times, location, details, title and item of the event.

Here is the code:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Sitecore.Web.UI;

using System.ComponentModel;

using System.Collections.Specialized;

using Sitecore.Data.Items;

using Sitecore.Data.Fields;

using Sitecore.Diagnostics;

using Sitecore.Data;

namespace Oshyn.Sitecore.WebControls

{

public class GoogleCalendarReminder : WebControl

{

private readonly string googleCalendarReminderHtml = "";

private readonly string googleCalendarButton = "http://www.google.com/calendar/images/ext/gc_button2.gif";

private string startDateTime = string.Empty;

private string endDateTime = string.Empty;

private string title = string.Empty;

private string location = string.Empty;

private string details = string.Empty;

private string itemId = string.Empty;

[Category("Method"), Description("Start DateTime for the Event")]

public String StartDateTime

{

get { return startDateTime; }

set { startDateTime = value; }

}

[Category("Method"), Description("End DateTime for the Event")]

public String EndDateTime

{

get { return endDateTime; }

set { endDateTime = value; }

}

[Category("Method"), Description("Title for the Event")]

public String Title

{

get { return title; }

set { title = value; }

}

[Category("Method"), Description("Location for the Event")]

public String Location

{

get { return location; }

set { location = value; }

}

[Category("Method"), Description("Details of the Event")]

public String Details

{

get { return details; }

set { details = value; }

}

[Category("Method"), Description("Item Id of the Event")]

public String ItemId

{

get { return itemId; }

set { itemId = value; }

}

protected override void DoRender(System.Web.UI.HtmlTextWriter output)

{

NameValueCollection googleCalendarParams = new NameValueCollection();

if (string.IsNullOrEmpty(startDateTime)) //required value

return;

if (string.IsNullOrEmpty(endDateTime)) //required value

return;

if (string.IsNullOrEmpty(title)) //required value

return;

try

{

Item cEvent = GetItem();

if (!string.IsNullOrEmpty(itemId) && global::Sitecore.Data.ID.IsID(itemId))

cEvent = Sitecore.Context.Database.GetItem(new ID(itemId));

DateField start = cEvent.Fields[startDateTime];

DateField end = cEvent.Fields[endDateTime];

string gLocation = cEvent[location];

string gDetails = cEvent[details];

googleCalendarParams.Add("dates", string.Format("{0:yyyyMMdd'T'HHmmss'Z'}/{1:yyyyMMdd'T'HHmmss'Z'}", start.DateTime.ToUniversalTime(), end.DateTime.ToUniversalTime()));

googleCalendarParams.Add("action", "TEMPLATE");

googleCalendarParams.Add("text", HttpUtility.HtmlEncode(cEvent[title]));

googleCalendarParams.Add("sprop", Context.Request.Url.Host);

if (!string.IsNullOrEmpty(gDetails))

googleCalendarParams.Add("details", HttpUtility.HtmlEncode(gDetails));

if (!string.IsNullOrEmpty(gLocation))

googleCalendarParams.Add("location", HttpUtility.HtmlEncode(gLocation));

var response = string.Format(googleCalendarReminderHtml, ToQueryString(googleCalendarParams), googleCalendarButton);

output.Write(response);

}

catch (Exception ex)

{

Log.Error("Error on Google Calendar Reminder, method: DoRemder", ex, this);

}

// code from http://stackoverflow.com/questions/829080/how-to-build-a-query-string-for-a-url-in-c

private string ToQueryString(NameValueCollection nvc)

{

return "?" + string.Join("&", Array.ConvertAll(nvc.AllKeys, key => string.Format("{0}={1}", HttpUtility.UrlEncode(key), HttpUtility.UrlEncode(nvc[key]))));

}

To use this code, add the registration section in your aspx/ascx file and then set the control with the necessary parameters for it to display the button. Once that is done, it will look something like this:

<%@ register tagprefix="gcal" namespace="Oshyn.Sitecore.WebControls" assembly="Oshyn.Sitecore">

"Description" location="Location" title="Title" enddatetime="End Date" startdatetime="Start Date" itemid="{2A37207A-E546-4016-9ED5-1250B199C6DC}" runat="server">

For simple, semi-static HTML integrations, it is a good idea to use WebControls which give you the ability to be reuse them in multiple locations. To check out how to build more controls, check out these links:

- Sitecore Introduction (3 parts serie): http://sdn.sitecore.net/Articles/Web%20Controls/Building%20Web%20Controls%20-%20Part%201.aspx

- Stackoverflow : http://stackoverflow.com/questions/7070006/where-can-sitecore-webcontrol-examples-be-found

- Google Calendar Reminder Button: http://www.google.com/googlecalendar/event_publisher_guide_detail.html

Websites on Smartphones, iPad & Tablets – Using Touch Events for Image Scrolling on your site

The Oshyn Team — Tue, 17 Jan 2012 12:07:11 +0000

A requirement for every website is an easy and intuitive way for users to browse and navigate around a website. This requirement is also true when the user navigates in a mobile device, like a smart phone or tablet. Features like using a finger to swipe the content or using multi-touch gestures to zoom or rotate the content should be available on your site. These gestures can be modified to perform any different actions in a website.In this article we will overwrite the default behavior for the pinch gesture to execute a “go back” function in an image gallery.

Gesture Events

Gesture events are events that are triggered during a multi-touch sequence, typically pinching and rotating gestures. Gesture events contain scaling and rotation information, allowing gestures to be combined.

Apple supports gestures that are multi-touch events such as “pinching” and “rotating”:

gesturestart - triggered when initiating a multi-touch event
gesturechange - triggered when multiple touches move
gestureend - triggered when a multi-touch event ends

The event object for gesture events looks very different. It contains scale and rotation values and no touch objects. The event object has the properties:

event.scale – a value of 1 when there’s no scaling, less than 1 when zooming out (such as making our div smaller), and greater than 1 when zooming in.
event.rotate- the rotation angle in degrees.

Note: The default behavior of Safari on iOS can interfere with your application’s custom multi-touch and gesture input. You can disable the default browser behavior by sending the preventDefault message to the event object.

For more information on how to do this, visit this link

Example:

document.addEventListener('gesturechange', function(event) {

event.preventDefault();

console.log("Scale: " + event.scale + ", Rotation: " + event.rotation);

}, false);

Event Table

	GESTURESTART	GESTUREMOVE	GESTUREEND
Android	n	n	n
iPhone	y	y	y
has event.touches	n	n	n
(iPhone) has event.scale and event.rotation	y	y	y
(iPhone) touch in event.touches	-	-	-
(iPhone) touch in event.changedTouches	-	-	-

The code

To implement these functions we are going to use jQuery

First, we would need to include the jQuery library:

<html lang="es">

<head>

<script src="js/jquery.min.js" type="text/javascript">script>


 
head>

<body>
 
body>

html>

After that we will need to add the HTML structure:

<html lang="es">

<head>

<script src="js/jquery.min.js" type="text/javascript">script>


 
head>

<body>
<div style="width: 500px; margin: 0pt auto;">
        <div>
             <h1>click on an imageh1>

        div>

        <div id="demos" class="content">
        <div class="pics" id="slideshow">
 
        <a href="#overlay01" ><img  alt="" src="Images/logo001.png" />a>

        <a href="#overlay02" ><img  alt="" src="Images/logo002.png" />a>

        <a href="#overlay03" ><img  alt="" src="Images/logo003.png" />a>

        div>

        div>

    div>

      
      <div class="overlays" style="width: 500px; margin: 0pt auto;">
      <div class="item" id="overlay01" >
        
             <img alt="" src="Images/logo001.png" />
             <p class="text">
             pinch to close pinch to close pinch to close pinch to close
             p>

        
      div>

             
      <div class="item" id="overlay02" >
        
             <img alt="" src="Images/logo002.png" />
             <p class="text">
             pinch to close pinch to close pinch to close pinch to close
             p>

      
      div>

             
      <div class="item" id="overlay03" >
             <img alt="" src="Images/logo003.png" />
             <p class="text">
             pinch to close pinch to close pinch to close pinch to close
             p>

        
     div>

   div>

body>html>

In the body structure we have a div with the class “pics” which holds the a set of images and a div with the class “overlays” which holds the overlay elements that are going to be shown when an image is clicked

Now we have to define the JavaScript code:

The JavaScript code will:

Set up the click event for each image, with this code we are showing the corresponding overlay when the image is clicked:

$(".pics a").each(function(){

$(this).click(function(){

var overlay = $(this).attr('href');

$(overlay).show();

});

Set up the event listener for each overlay, when zoom event is detected in an item overlay, we capture it and we change the default behavior with our custom functions:

$('.item').each(function(){

$(this).bind('gesturestart',function(){gestureStart(event);});

$(this).bind('gesturechange',function(){closeGesture(event);});

$(this).bind('gestureend',function(){gestureEnd(event);});

});

Define our custom functions that are going to be executed in each step of the zoom events:

function gestureStart( e ) {

e.preventDefault();

}

function closeGesture( e ) {

e.preventDefault();

$('.item').hide();

}

function gestureEnd( e ) {

}

NOTE: that when the gesture starts we execute e.preventDefault(); this is done to prevent the default behavior of the browser (zoom in/out)

Check out the demo on your ipad/iphone here
Using this method, we can detect the zoom in/out of an element of the web page and execute a custom code.

Original post.

Making Your Content Consumable on Mobile Devices

The Oshyn Team — Tue, 03 Jan 2012 22:59:02 +0000

How many times have you walked into a waiting room and whipped out your smartphone to kill the time until your name is called? Or maybe you’ve gotten into a crowded elevator and your fellow travelers are all engrossed in their mobile devices – emailing, texting, checking sports scores, playing games, etc. While smartphones have all but changed the way we kill time, these situations are just the scenarios users will find themselves in when they find your mobile content.

In January of 2011, users spent an average of 422 minutes browsing the web on their mobile devices each month¹. Most people who spend time browsing the web on a mobile device do so because they’re on a break from something else or they need something right now. Either way, they’re likely to have a limited amount of time to find and consume your content. Keeping that in mind, there are things you can do to ensure your content is easily consumable by mobile users.

What do you have to offer that people need “right now”? Mobile users are more likely to have content in mind when they pick up their mobile device; they want to check their account balance, they want to purchase something, they want to research something quickly, or they want something to entertain them. Now think about everything you have on your site – how much of it is relevant to a mobile user? If you’ve got a lot of content that is better served on a full-size screen or can’t be viewed on a non-flash supported device, that content is probably better off being left out of the mobile site. Content that isn’t essential should be reconsidered when filtering content to your mobile site. Sift through your analytics to see what content is most viewed by visitors to your full site to determine what would be ideal to include in your mobile version.

Keep it simple.

Along with sorting through your content to filter what a mobile user is likely to need, try to keep the mobile content brief. Not only are most mobile users usually in between other tasks, but they’re trying to read your content on a small screen. If the content is long, they’re not going to stick around to scroll through long pages of text.

Surface your content.

Websites are filled with functionality that isn’t necessarily mobile friendly (think, hover states and deep layers of categorization). People looking for content on your mobile site can’t hover and they don’t want to sort through layer upon layer of categorization to find the information they’re looking for. Keep your categories simple and make sure that content is organized clearly to keep clicks to a minimum.

Only include essential images.

Many users will be accessing your content in places where they don’t have access to a wireless connection, which makes loading images a longer process than some users may be willing to wait through. You don’t want to serve the same images on your mobile site as you do on your full site, they’re probably going to be far bigger than you really need on a mobile device. However, if images are critical to the user experience, include them, but make sure they’re optimized for mobile devices and they’re used only where necessary.

Finally, have a way out.

There will always be someone out there who wants access to your full site, even if they know that they’re going to have to pinch, zoom, scroll, etc. Chances are, these users know what they want to gain from your site and, if they can’t get to it on their mobile device, they may leave and go somewhere else to find the content they’re looking for.

REFERENCES

https://www.wirelessintelligence.com/analysis/2011/03/smartphone-users-spending-more-face-time-on-apps-than-voice-calls-or-web-browsing/

Original post can be found here.

CSS3 Best Practices

The Oshyn Team — Thu, 29 Dec 2011 22:57:12 +0000

Always keep in mind that CSS3 is by no means supported by all browsers, every browser has different support for each CSS3 element and we need to be very careful when using these new features.

Introduction

The first thing you need to do when using a CSS3 property is do a little research. You will always find some resource online that tells you what you need to know about browser support for any CSS3 property, so be sure to Google it FIRST.

Secondly, do not get carried away with all the great stuff that you can achieve using CSS3. We are not trying to replace great designs and coding. We want to try to achieve the perfect cross-browser markup and styling.

Right now I like to think of CSS3 as “enhancements” for your website’s look. The most important thing on your site is functionality and accessibility. Never sacrifice any of these two for a “nicer” look. You need to keep in mind that everything should be fully functional if you remove all your CSS3 and your site should still look good.

Fallback

One of the most important best practices when using CSS3 is to provide fallback options every time it’s possible. You will find the ability to do this when using backgrounds or fonts, among other things.

Animations

I do not recommend using animations quite yet, but if you totally want to use them, make sure that your element will look just fine without the animation, because it is very likely that it won’t work.

Code Maintenance

We need to think on the future when coding CSS3. To achieve a certain cross-browser property you will need to add some vendor-specific code. I recommend adding comments or creating a file where you keep track of these lines of code. This way you will be able to remove them when supported on all browsers. I don’t know when, but I really hope a standard gets out for all browsers soon.

Fonts

@Font-face property is one of the more supported elements and you can achieve a cross-browser behavior, this is why a lot of programmers are using @font-face. We need to be sure that the declared fonts are totally legible on our websites. And one more thing, always declare a fallback font that approximately matches your font in size. Click here to read my post about how to make your @font-face compatible across multiple browsers (link to post).

Conclusion

CSS3 is not quite complete yet, so be very careful when using CSS3 properties. And most important of all, test your styles on all major browsers (Internet Explorer, Safari, Chrome, Firefox, Opera) before permanently applying them to your website. A good rule of thumb is: the more versions, the better.

Original post can be found here.

HTML5 Video Browser Compatibility

The Oshyn Team — Tue, 27 Dec 2011 22:53:54 +0000

Most of modern versions of web browsers support HTML5 video feature. However, at the moment the main issue is the lack of agreement especially with video codecs and different type of formats.

The following table explains which formats are supported:

Table extracted from: http://www.808.dk/?code-html-5-video

You can also check which video formats are supported in different browsers in the following link:
http://en.wikipedia.org/wiki/HTML5_video

Fallback if video is not supported

There are many things that you can do if your browser doesn’t support your current video format, here are some fallback options:

Place a Text or Html

"video.mp4" poster="video.jpg" controls>


You browser does not support video feature

"video.mp4" poster="video.jpg" controls>


"img/video_not_supported.png"/>

Provide Multiple Sources

You can have different types of video formats so if the browser doesn’t recognize the first source it will skip to the next one until it finds a source it can play.

"video.jpg" controls>


        'video.webm' type='video/webm'>

        'video.ogv' type='video/ogg'>

        'video.mp4' type='video/mp4'>

        This is fallback content

Flash Fallback for Older Browsers

We can also embed a flash player inside de element to bring support to older browsers.

"video.jpg" width="800" height="400">


  "video.mp4" type="video/mp4">

  "video.webm" type="video/webm">

  "application/x-shockwave-flash" data="flash_player.swf"

width="800" height="400">
    "allowfullscreen" value="true">

    "allowscriptaccess" value="always">

    "flashvars" value="file=video.mp4">

Checking if your browser supports video element

If you need to check which HTML5 features are available to your browser including element you can test it on this site:
http://html5test.com

Original post can be found here.

IE Fallback Strategy Using Google HTML5Shiv

The Oshyn Team — Thu, 22 Dec 2011 01:17:02 +0000

When you start building your website using HTML5 markup you will be surprised at the amount of issues you experience, especially with older versions of Internet Explorer.

Older versions of Internet Explorer (IE 6,7 or 8) don’t have the support needed for the new HTML5 structural elements such as: header, footer, section, aside, article, etc .

These browsers don’t understand those elements so when they render a page that is built in HTML5 they will omit them, thus-creating layout and styling issues.

There are many JavaScript workarounds that allow your older IE to understand the new semantic elements. In my research I found one that is very useful:

HTML5shiv

How to use it:
- Go to http://code.google.com/p/html5shiv/ to find the latest release

- Include the following script before in the tag like this:

- Now it is ready to use. You must have JavaScript enabled in your browser or it will not work.

Issues when appending content
Keep in mind that your page can break if you append content using innerHTML like this:

var x = document.createElement("div");

x.innerHTML =

"content here
"

;

document.body.appendChild(s);

You can fix this with jQuery using a second parameter as false in this function:

1	`$("div").append(innerShiv("content here ",` `false`

Making “@font-face” Cross Browser Compatible

The Oshyn Team — Mon, 19 Dec 2011 01:15:32 +0000

@Font-face is a CSS3 property that allows you to embed any font and use it on your website. It was actually introduced with CSS2, but only supported by Internet Explorer with EOT (Embedded Open Type) font files.

Nowadays “@font-face” can be used on all major browsers, but you will need to follow this easy process.

Support

Process

One thing you must keep in mind before following this process is that many fonts are licensed, and you must buy them to obtain the rights to use them. Please do not use a licensed font if you haven’t purchased it.

You can find hundreds of downloadable free fonts on the web to use on your website.

First, you need to convert your font file and generate files with all the different extensions. For this you can use several tools; in this particular example we will use a tool provided here:

http://www.fontsquirrel.com/fontface/generator

Click on “Add Fonts”

Browse for the font file on your file system

Once your font completes the upload, click the “Download Your Kit” button.

Extract the file contents to any folder you want. You should have the following files:

Now you need to declare the font on your project’s CSS. Open the stylesheet.css file with any editor. You will see that all the required styles are provided. Copy those styles to your project’s CSS.

Copy all the font files generated (.eot, .woff, .ttf, .svg) to whatever directory you want on your project and make sure that the paths to the font files are correct.

Once you’ve done this, you’re ready to use your new font cross-browser. Just use any CSS selector and apply the “font-family” property. Use the exact same name as the declaration.

It is also a good idea to provide fall back content in case the browser does not support this property. In this particular case we have 3 fallback options: the first is “Helvetica”, the second “Arial”, and the third is “sans-serif”.

Conclusion

The desired cross-browser @font-face CAN be achieved! It will require some effort, but it’s totally worth it and you’ll be very happy with the results.

My only recommendation is to be sure that the font you picked is 100% readable, and that you won’t harm the user’s experience.

Enjoy!

Original post can be found here.

Agile Project Management Using JIRA and Greenhopper

The Oshyn Team — Thu, 15 Dec 2011 01:13:54 +0000

If you have never heard of JIRA, JIRA is an issue and project-tracking tool for software development. GreenHopper is an Agile extension that you can add to JIRA.

At Oshyn, we see a lot of benefits in using GreenHopper, which is why it is our preferred Agile software development tool. While we also use it for non-Scrum projects, this post focuses on how we use this powerful and ever-evolving tool to manage our Scrum projects.

Project Setup

So how do you get started? Start by creating a new project: set project name, permissions, notifications, workflow, etc. Now set project components (e.g. Business Analysis, Information Architecture, Visual Design, Front-End Development, Back-End Development and Project Development). While on the same screen, set your project Versions as well. For example: Sprint 1 = Discovery, Sprint 2 = Design, Sprint 3 = Build and so on.

Project Setup Screen

Product Backlog

Now that your basic project settings are done you can start creating project backlog tasks, or alternatively import them to your Planning Board.

When creating project tasks try to use Epics, Stories and sub-tasks. NOTE: Epics are large user stories that can be dissected into several smaller user stories. Use them if your project has complex functionality that is yet to be defined in more detail.

Sprint Planning

Start you sprint planning by going to the Planning Board (unassigned tasks) and try to identify what can and can’t be completed during your first Sprint. You can use drag and drop to assign your product backlog tasks to corresponding Sprints.

When planning your Sprints be realistic and try to think of best and worst case scenarios. Also, keep in mind that some requirements might not be fully documented, so Sprint 1 will probably have a lot of unknowns. There is also a good chance that some of your estimates will be wrong, but that’s ok, you will get better with subsequent Sprints.

The following examples show Sprint 3 (Build Phase):

Please note: if this was a real project you would obviously have more tasks, your task descriptions would be more informative and you would also have more than one assignee.

Planning board

Task Board

By this stage most of your initial setup should be done and you can shift your focus from setup to controlling and monitoring. This is where GreenHopper’s Task and Chat Boards will come into play, allowing you to monitor individual tasks, dependencies and overall progress. Having this visibility will make your job a lot easier and it will also make your team more productive. If your team hates some of those annoying interruptions (e.g. “What are you working on”, how are you progressing”, or “what are you working on next”) you will love GreenHopper, because all that good information is available in JIRA. Task board clearly displays Sprint tasks, status, remaining hours, team members/resource and next to-dos.

Task Board

Chart Board

Chart Board provides a graphical representation of the progress of your current Sprint. Being able to see: team effort, guideline, trends and required daily burndown rate helps us monitor our Sprint more effectively.

Chart Board

Release Board

The Released Board is another useful feature, giving you a high level view of previous/released Sprints, so if you need a quick overview of what you’ve completed so far (e.g. Sprint 1, 2 and 3) and what is still outstanding (e.g. Spring 4,5 and 6) this is good place to start.

Release Board

Setting up Search Queries

Issue Navigator allows you to see all issues/tasks in the system. Start by creating custom search filters (using simple or advance view) which allow you to display search results by component/version, issue type, status, priorities etc… For example, you might only want to see high priority tasks in Sprint 3 that are still outstanding. Creating and saving multiple filters will allow you to quickly find issues or tasks, and they will also make your project dashboard a lot more useful and informative. NOTE: A lot of Project Dashboard Gadgets are powered by your saved search queries.

Issue Navigator

Project Dashboard

My next step is usually to set up a Project Dashboard. You can go crazy and create as many gadgets as you’d like, but I usually try to keep my dashboard relatively clean with 4-6 gadgets; I usually use the following gadgets:

Agile – basic Sprint information and Burndown chart
Days remaining – countdown of days remaining
Project progress – progress bar (to-do, in progress and done)
Issues/tasks statistics – grouped by resource
Group time sheet – hours logged (per team member)

NOTE: When deciding on gadgets think about your Audience (Business Team, Developers, Stakeholders etc…).

Project Dashboard

JIRA also has a number of useful reports that you can use to stay on top of your project. For example, you can use Project Pivot and Timesheet reports to extract data on actual hours.

Project Reports

I should also point out that JIRA has some nice alerts, instantly notifying you of any updates (e.g. new comment or status update). This is especially useful when dealing with risks, critical path items and dependencies.

To sum it all up, JIRA Greenhopper is a great tool for managing scrum projects, but like any other tool you will need to be diligent in keeping it up to date.

Original post can be found here.

The Mobile Decision – Native App vs Mobile Optimized Website

The Oshyn Team — Mon, 12 Dec 2011 01:12:11 +0000

Nearly everyone with a smartphone has at least a handful of apps and sites they love and use or visit every day. With over 82.2 million smartphone owners in the US alone¹, many businesses are planning their mobile strategy and trying to determine whether that strategy should include a native app or a mobile website.

There are many things to consider when deciding between a native app and a mobile website. Each offers benefits and disadvantages, so it’s important to incorporate the following considerations into your decision:

Who are you targeting?
Is your goal to keep your brand top-of-mind with existing consumers or do you want to reach a broader audience? If you already have a fanbase or large foundation of existing customers, a native app would keep you at the forefront of their minds when they’re ready to purchase or consume content. However, if your goal is to broaden your audience, a mobile website with a strong SEO strategy may be more beneficial.

Your Content
What are you offering to your potential mobile customers? The most popular downloaded apps are typically games, weather, social networking, maps/navigation, and music – apps that have content users crave on a regular basis.

Additionally, people are becoming increasingly hesitant to take up precious space on their mobile devices unless they’re certain the app will be something they’ll use on a regular basis. If you update your content regularly (hourly, daily), an app would provide your potential users with easy access to your information above the competitors. However, if your content is updated less frequently (monthly, bi-monthly, or less), a native app would have a much higher likelihood of getting erased from the user’s phone and forgotten.

The Smartphone Market and Cost
While Apple dominates the app market with over 500,000 apps in their store² (as opposed to Android’s 200,000³), they don’t dominate the smartphone market.

Smartphone Marketshare by Operating System as of 2011 – Q1⁴
Android – 36.0%
Nokia/Symbian – 27.4%
Apple/iOs – 16.8%
Blackberry – 12.9%
Microsoft – 3.6%
Other – 3.3%

This means that, though Apple has the largest app store, if you want to target more users, your mobile app will have to be developed for multiple devices. Since native app development is so unique from platform to platform, each app needs to be built from the ground up for their respective operating system. On the flipside, developing a mobile website can be significantly less expensive in development costs because it can be optimized to work across multiple platforms.

User Experience
While there are ways to simulate the native app experience with a mobile website (check out Oshyn’s Work page on your mobile device), HTML5 doesn’t quite offer the same UX that smartphone users have come to expect. However, there are ways to optimize the mobile experience using HTML5 and mobile browser detection to serve a high-end mobile site to more modern smartphones and a more simplified version to older smartphones.

With the mobile web projected to surpass desktop usage by 2015⁵, it’s hard to ignore the need for your business to have a mobile presence. Incorporating a native app or mobile website into your overall digital strategy will become increasingly important over the next few years as the market continues to develop.

*****
REFERENCES

¹http://www.comscore.com

² http://www.apple.com

³https://market.android.com

⁴http://www.gartner.com

⁵ http://mashable.com

Original post can be found here.

Content in OpenText Delivery Server & Moderation in Management Server

The Oshyn Team — Thu, 08 Dec 2011 01:10:56 +0000

Building User Generated Content in OT Web Solutions Delivery Server is fairly easy using dynaments. However, if you’d like that content to be moderated by Editors, it’s much more tricky. This requires the content to be submitted on the external website (Delivery Server), travel back to the Management Server for workflow, editing and moderation, then published back out to Delivery Server. This post shows an example of this pattern.

Our client needed to provide a group of content generators the ability to upload their content into the CMS for an editorial review and approval process through controlled workflows.

Each of these users has their own page in the site where they provide their content to viewers.

The issue, however, was that this small group of individuals could not be given access to the CMS for various reasons:

It would require CMS training
It might require a new license with an increased number of editorial acces (Smart Edit users )
Policy restrictions put in place by the client did not allow everyone to have access to the CMS.

Our purposed solution allows this group of users to upload files on their respective pages yet still following the regular CMS workflow approval process.

Our Solution

The content generators were given access to a specific section of the site. This area is restricted to individuals of this particular group using an LS constraint.

The login page:

Figure 1: Portal Login

Once inside, they are presented with a simple interface that allows them to edit properties of the file:

Figure 2: Main editing interface

They can select a file to upload, select the date (defaults as ‘today’), and edit the document title and description. Upon submitting the form the user is prompted to confirm the upload by an overlay:

Figure 3: Confirm upload overlay

The editor can chose to edit the parameters if desired. Once they confirm the upload, they’ll be presented with the following page:

Figure 4: Upload success page

Here they’ll be given the following information/options:

Direct URL of where their file will be when the workflow approval process is completed and the page is published
Link to upload another presentation
Link to their page (User ID attribute is linked to page through CMS / dynaments interaction)
Option to logout

The user’s uploaded document goes through the assigned workflow approval process and review and eventually gets published to the live site.

Technical Overview

Here is a rough diagram of what happens when the editor uploads the file:

Figure 5: Rough Tech Diagram of the Solution

The file goes through a dynament which forwards the packet data directly to a Web Service server that handles all requests (to remove load from the Delivery Servers).

The Services box will do two things:

First, it will send the file information through WebDav so the file is created in the CMS server under a specific asset manager folder.
Second, after the file is created, it will update the user’s page and submit it to the workflow process.

If the page is approved, it will be published to Delivery Server and the document will be published to the web servers.

The Result

As part of the workflow process, once approved, the user who uploaded the file will receive a confirmation message and their page will be published with the updated document links:

Figure 6: Presentation User Page