Search Results

Search found 778 results on 32 pages for 'usability'.

Page 24/32 | < Previous Page | 20 21 22 23 24 25 26 27 28 29 30 31  | Next Page >

  • Using HTML 5 SessionState to save rendered Page Content

    - by Rick Strahl
    HTML 5 SessionState and LocalStorage are very useful and super easy to use to manage client side state. For building rich client side or SPA style applications it's a vital feature to be able to cache user data as well as HTML content in order to swap pages in and out of the browser's DOM. What might not be so obvious is that you can also use the sessionState and localStorage objects even in classic server rendered HTML applications to provide caching features between pages. These APIs have been around for a long time and are supported by most relatively modern browsers and even all the way back to IE8, so you can use them safely in your Web applications. SessionState and LocalStorage are easy The APIs that make up sessionState and localStorage are very simple. Both object feature the same API interface which  is a simple, string based key value store that has getItem, setItem, removeitem, clear and  key methods. The objects are also pseudo array objects and so can be iterated like an array with  a length property and you have array indexers to set and get values with. Basic usage  for storing and retrieval looks like this (using sessionStorage, but the syntax is the same for localStorage - just switch the objects):// set var lastAccess = new Date().getTime(); if (sessionStorage) sessionStorage.setItem("myapp_time", lastAccess.toString()); // retrieve in another page or on a refresh var time = null; if (sessionStorage) time = sessionStorage.getItem("myapp_time"); if (time) time = new Date(time * 1); else time = new Date(); sessionState stores data that is browser session specific and that has a liftetime of the active browser session or window. Shut down the browser or tab and the storage goes away. localStorage uses the same API interface, but the lifetime of the data is permanently stored in the browsers storage area until deleted via code or by clearing out browser cookies (not the cache). Both sessionStorage and localStorage space is limited. The spec is ambiguous about this - supposedly sessionStorage should allow for unlimited size, but it appears that most WebKit browsers support only 2.5mb for either object. This means you have to be careful what you store especially since other applications might be running on the same domain and also use the storage mechanisms. That said 2.5mb worth of character data is quite a bit and would go a long way. The easiest way to get a feel for how sessionState and localStorage work is to look at a simple example. You can go check out the following example online in Plunker: http://plnkr.co/edit/0ICotzkoPjHaWa70GlRZ?p=preview which looks like this: Plunker is an online HTML/JavaScript editor that lets you write and run Javascript code and similar to JsFiddle, but a bit cleaner to work in IMHO (thanks to John Papa for turning me on to it). The sample has two text boxes with counts that update session/local storage every time you click the related button. The counts are 'cached' in Session and Local storage. The point of these examples is that both counters survive full page reloads, and the LocalStorage counter survives a complete browser shutdown and restart. Go ahead and try it out by clicking the Reload button after updating both counters and then shutting down the browser completely and going back to the same URL (with the same browser). What you should see is that reloads leave both counters intact at the counted values, while a browser restart will leave only the local storage counter intact. The code to deal with the SessionStorage (and LocalStorage not shown here) in the example is isolated into a couple of wrapper methods to simplify the code: function getSessionCount() { var count = 0; if (sessionStorage) { var count = sessionStorage.getItem("ss_count"); count = !count ? 0 : count * 1; } $("#txtSession").val(count); return count; } function setSessionCount(count) { if (sessionStorage) sessionStorage.setItem("ss_count", count.toString()); } These two functions essentially load and store a session counter value. The two key methods used here are: sessionStorage.getItem(key); sessionStorage.setItem(key,stringVal); Note that the value given to setItem and return by getItem has to be a string. If you pass another type you get an error. Don't let that limit you though - you can easily enough store JSON data in a variable so it's quite possible to pass complex objects and store them into a single sessionStorage value:var user = { name: "Rick", id="ricks", level=8 } sessionStorage.setItem("app_user",JSON.stringify(user)); to retrieve it:var user = sessionStorage.getItem("app_user"); if (user) user = JSON.parse(user); Simple! If you're using the Chrome Developer Tools (F12) you can also check out the session and local storage state on the Resource tab:   You can also use this tool to refresh or remove entries from storage. What we just looked at is a purely client side implementation where a couple of counters are stored. For rich client centric AJAX applications sessionStorage and localStorage provide a very nice and simple API to store application state while the application is running. But you can also use these storage mechanisms to manage server centric HTML applications when you combine server rendering with some JavaScript to perform client side data caching. You can both store some state information and data on the client (ie. store a JSON object and carry it forth between server rendered HTML requests) or you can use it for good old HTTP based caching where some rendered HTML is saved and then restored later. Let's look at the latter with a real life example. Why do I need Client-side Page Caching for Server Rendered HTML? I don't know about you, but in a lot of my existing server driven applications I have lists that display a fair amount of data. Typically these lists contain links to then drill down into more specific data either for viewing or editing. You can then click on a link and go off to a detail page that provides more concise content. So far so good. But now you're done with the detail page and need to get back to the list, so you click on a 'bread crumbs trail' or an application level 'back to list' button and… …you end up back at the top of the list - the scroll position, the current selection in some cases even filters conditions - all gone with the wind. You've left behind the state of the list and are starting from scratch in your browsing of the list from the top. Not cool! Sound familiar? This a pretty common scenario with server rendered HTML content where it's so common to display lists to drill into, only to lose state in the process of returning back to the original list. Look at just about any traditional forums application, or even StackOverFlow to see what I mean here. Scroll down a bit to look at a post or entry, drill in then use the bread crumbs or tab to go back… In some cases returning to the top of a list is not a big deal. On StackOverFlow that sort of works because content is turning around so quickly you probably want to actually look at the top posts. Not always though - if you're browsing through a list of search topics you're interested in and drill in there's no way back to that position. Essentially anytime you're actively browsing the items in the list, that's when state becomes important and if it's not handled the user experience can be really disrupting. Content Caching If you're building client centric SPA style applications this is a fairly easy to solve problem - you tend to render the list once and then update the page content to overlay the detail content, only hiding the list temporarily until it's used again later. It's relatively easy to accomplish this simply by hiding content on the page and later making it visible again. But if you use server rendered content, hanging on to all the detail like filters, selections and scroll position is not quite as easy. Or is it??? This is where sessionStorage comes in handy. What if we just save the rendered content of a previous page, and then restore it when we return to this page based on a special flag that tells us to use the cached version? Let's see how we can do this. A real World Use Case Recently my local ISP asked me to help out with updating an ancient classifieds application. They had a very busy, local classifieds app that was originally an ASP classic application. The old app was - wait for it: frames based - and even though I lobbied against it, the decision was made to keep the frames based layout to allow rapid browsing of the hundreds of posts that are made on a daily basis. The primary reason they wanted this was precisely for the ability to quickly browse content item by item. While I personally hate working with Frames, I have to admit that the UI actually works well with the frames layout as long as you're running on a large desktop screen. You can check out the frames based desktop site here: http://classifieds.gorge.net/ However when I rebuilt the app I also added a secondary view that doesn't use frames. The main reason for this of course was for mobile displays which work horribly with frames. So there's a somewhat mobile friendly interface to the interface, which ditches the frames and uses some responsive design tweaking for mobile capable operation: http://classifeds.gorge.net/mobile  (or browse the base url with your browser width under 800px)   Here's what the mobile, non-frames view looks like:   As you can see this means that the list of classifieds posts now is a list and there's a separate page for drilling down into the item. And of course… originally we ran into that usability issue I mentioned earlier where the browse, view detail, go back to the list cycle resulted in lost list state. Originally in mobile mode you scrolled through the list, found an item to look at and drilled in to display the item detail. Then you clicked back to the list and BAM - you've lost your place. Because there are so many items added on a daily basis the full list is never fully loaded, but rather there's a "Load Additional Listings"  entry at the button. Not only did we originally lose our place when coming back to the list, but any 'additionally loaded' items are no longer there because the list was now rendering  as if it was the first page hit. The additional listings, and any filters, the selection of an item all were lost. Major Suckage! Using Client SessionStorage to cache Server Rendered Content To work around this problem I decided to cache the rendered page content from the list in SessionStorage. Anytime the list renders or is updated with Load Additional Listings, the page HTML is cached and stored in Session Storage. Any back links from the detail page or the login or write entry forms then point back to the list page with a back=true query string parameter. If the server side sees this parameter it doesn't render the part of the page that is cached. Instead the client side code retrieves the data from the sessionState cache and simply inserts it into the page. It sounds pretty simple, and the overall the process is really easy, but there are a few gotchas that I'll discuss in a minute. But first let's look at the implementation. Let's start with the server side here because that'll give a quick idea of the doc structure. As I mentioned the server renders data from an ASP.NET MVC view. On the list page when returning to the list page from the display page (or a host of other pages) looks like this: https://classifieds.gorge.net/list?back=True The query string value is a flag, that indicates whether the server should render the HTML. Here's what the top level MVC Razor view for the list page looks like:@model MessageListViewModel @{ ViewBag.Title = "Classified Listing"; bool isBack = !string.IsNullOrEmpty(Request.QueryString["back"]); } <form method="post" action="@Url.Action("list")"> <div id="SizingContainer"> @if (!isBack) { @Html.Partial("List_CommandBar_Partial", Model) <div id="PostItemContainer" class="scrollbox" xstyle="-webkit-overflow-scrolling: touch;"> @Html.Partial("List_Items_Partial", Model) @if (Model.RequireLoadEntry) { <div class="postitem loadpostitems" style="padding: 15px;"> <div id="LoadProgress" class="smallprogressright"></div> <div class="control-progress"> Load additional listings... </div> </div> } </div> } </div> </form> As you can see the query string triggers a conditional block that if set is simply not rendered. The content inside of #SizingContainer basically holds  the entire page's HTML sans the headers and scripts, but including the filter options and menu at the top. In this case this makes good sense - in other situations the fact that the menu or filter options might be dynamically updated might make you only cache the list rather than essentially the entire page. In this particular instance all of the content works and produces the proper result as both the list along with any filter conditions in the form inputs are restored. Ok, let's move on to the client. On the client there are two page level functions that deal with saving and restoring state. Like the counter example I showed earlier, I like to wrap the logic to save and restore values from sessionState into a separate function because they are almost always used in several places.page.saveData = function(id) { if (!sessionStorage) return; var data = { id: id, scroll: $("#PostItemContainer").scrollTop(), html: $("#SizingContainer").html() }; sessionStorage.setItem("list_html",JSON.stringify(data)); }; page.restoreData = function() { if (!sessionStorage) return; var data = sessionStorage.getItem("list_html"); if (!data) return null; return JSON.parse(data); }; The data that is saved is an object which contains an ID which is the selected element when the user clicks and a scroll position. These two values are used to reset the scroll position when the data is used from the cache. Finally the html from the #SizingContainer element is stored, which makes for the bulk of the document's HTML. In this application the HTML captured could be a substantial bit of data. If you recall, I mentioned that the server side code renders a small chunk of data initially and then gets more data if the user reads through the first 50 or so items. The rest of the items retrieved can be rather sizable. Other than the JSON deserialization that's Ok. Since I'm using SessionStorage the storage space has no immediate limits. Next is the core logic to handle saving and restoring the page state. At first though this would seem pretty simple, and in some cases it might be, but as the following code demonstrates there are a few gotchas to watch out for. Here's the relevant code I use to save and restore:$( function() { … var isBack = getUrlEncodedKey("back", location.href); if (isBack) { // remove the back key from URL setUrlEncodedKey("back", "", location.href); var data = page.restoreData(); // restore from sessionState if (!data) { // no data - force redisplay of the server side default list window.location = "list"; return; } $("#SizingContainer").html(data.html); var el = $(".postitem[data-id=" + data.id + "]"); $(".postitem").removeClass("highlight"); el.addClass("highlight"); $("#PostItemContainer").scrollTop(data.scroll); setTimeout(function() { el.removeClass("highlight"); }, 2500); } else if (window.noFrames) page.saveData(null); // save when page loads $("#SizingContainer").on("click", ".postitem", function() { var id = $(this).attr("data-id"); if (!id) return true; if (window.noFrames) page.saveData(id); var contentFrame = window.parent.frames["Content"]; if (contentFrame) contentFrame.location.href = "show/" + id; else window.location.href = "show/" + id; return false; }); … The code starts out by checking for the back query string flag which triggers restoring from the client cache. If cached the cached data structure is read from sessionStorage. It's important here to check if data was returned. If the user had back=true on the querystring but there is no cached data, he likely bookmarked this page or otherwise shut down the browser and came back to this URL. In that case the server didn't render any detail and we have no cached data, so all we can do is redirect to the original default list view using window.location. If we continued the page would render no data - so make sure to always check the cache retrieval result. Always! If there is data the it's loaded and the data.html data is restored back into the document by simply injecting the HTML back into the document's #SizingContainer element:$("#SizingContainer").html(data.html); It's that simple and it's quite quick even with a fully loaded list of additional items and on a phone. The actual HTML data is stored to the cache on every page load initially and then again when the user clicks on an element to navigate to a particular listing. The former ensures that the client cache always has something in it, and the latter updates with additional information for the selected element. For the click handling I use a data-id attribute on the list item (.postitem) in the list and retrieve the id from that. That id is then used to navigate to the actual entry as well as storing that Id value in the saved cached data. The id is used to reset the selection by searching for the data-id value in the restored elements. The overall process of this save/restore process is pretty straight forward and it doesn't require a bunch of code, yet it yields a huge improvement in the usability of the site on mobile devices (or anybody who uses the non-frames view). Some things to watch out for As easy as it conceptually seems to simply store and retrieve cached content, you have to be quite aware what type of content you are caching. The code above is all that's specific to cache/restore cycle and it works, but it took a few tweaks to the rest of the script code and server code to make it all work. There were a few gotchas that weren't immediately obvious. Here are a few things to pay attention to: Event Handling Logic Timing of manipulating DOM events Inline Script Code Bookmarking to the Cache Url when no cache exists Do you have inline script code in your HTML? That script code isn't going to run if you restore from cache and simply assign or it may not run at the time you think it would normally in the DOM rendering cycle. JavaScript Event Hookups The biggest issue I ran into with this approach almost immediately is that originally I had various static event handlers hooked up to various UI elements that are now cached. If you have an event handler like:$("#btnSearch").click( function() {…}); that works fine when the page loads with server rendered HTML, but that code breaks when you now load the HTML from cache. Why? Because the elements you're trying to hook those events to may not actually be there - yet. Luckily there's an easy workaround for this by using deferred events. With jQuery you can use the .on() event handler instead:$("#SelectionContainer").on("click","#btnSearch", function() {…}); which monitors a parent element for the events and checks for the inner selector elements to handle events on. This effectively defers to runtime event binding, so as more items are added to the document bindings still work. For any cached content use deferred events. Timing of manipulating DOM Elements Along the same lines make sure that your DOM manipulation code follows the code that loads the cached content into the page so that you don't manipulate DOM elements that don't exist just yet. Ideally you'll want to check for the condition to restore cached content towards the top of your script code, but that can be tricky if you have components or other logic that might not all run in a straight line. Inline Script Code Here's another small problem I ran into: I use a DateTime Picker widget I built a while back that relies on the jQuery date time picker. I also created a helper function that allows keyboard date navigation into it that uses JavaScript logic. Because MVC's limited 'object model' the only way to embed widget content into the page is through inline script. This code broken when I inserted the cached HTML into the page because the script code was not available when the component actually got injected into the page. As the last bullet - it's a matter of timing. There's no good work around for this - in my case I pulled out the jQuery date picker and relied on native <input type="date" /> logic instead - a better choice these days anyway, especially since this view is meant to be primarily to serve mobile devices which actually support date input through the browser (unlike desktop browsers of which only WebKit seems to support it). Bookmarking Cached Urls When you cache HTML content you have to make a decision whether you cache on the client and also not render that same content on the server. In the Classifieds app I didn't render server side content so if the user comes to the page with back=True and there is no cached content I have to a have a Plan B. Typically this happens when somebody ends up bookmarking the back URL. The easiest and safest solution for this scenario is to ALWAYS check the cache result to make sure it exists and if not have a safe URL to go back to - in this case to the plain uncached list URL which amounts to effectively redirecting. This seems really obvious in hindsight, but it's easy to overlook and not see a problem until much later, when it's not obvious at all why the page is not rendering anything. Don't use <body> to replace Content Since we're practically replacing all the HTML in the page it may seem tempting to simply replace the HTML content of the <body> tag. Don't. The body tag usually contains key things that should stay in the page and be there when it loads. Specifically script tags and elements and possibly other embedded content. It's best to create a top level DOM element specifically as a placeholder container for your cached content and wrap just around the actual content you want to replace. In the app above the #SizingContainer is that container. Other Approaches The approach I've used for this application is kind of specific to the existing server rendered application we're running and so it's just one approach you can take with caching. However for server rendered content caching this is a pattern I've used in a few apps to retrofit some client caching into list displays. In this application I took the path of least resistance to the existing server rendering logic. Here are a few other ways that come to mind: Using Partial HTML Rendering via AJAXInstead of rendering the page initially on the server, the page would load empty and the client would render the UI by retrieving the respective HTML and embedding it into the page from a Partial View. This effectively makes the initial rendering and the cached rendering logic identical and removes the server having to decide whether this request needs to be rendered or not (ie. not checking for a back=true switch). All the logic related to caching is made on the client in this case. Using JSON Data and Client RenderingThe hardcore client option is to do the whole UI SPA style and pull data from the server and then use client rendering or databinding to pull the data down and render using templates or client side databinding with knockout/angular et al. As with the Partial Rendering approach the advantage is that there's no difference in the logic between pulling the data from cache or rendering from scratch other than the initial check for the cache request. Of course if the app is a  full on SPA app, then caching may not be required even - the list could just stay in memory and be hidden and reactivated. I'm sure there are a number of other ways this can be handled as well especially using  AJAX. AJAX rendering might simplify the logic, but it also complicates search engine optimization since there's no content loaded initially. So there are always tradeoffs and it's important to look at all angles before deciding on any sort of caching solution in general. State of the Session SessionState and LocalStorage are easy to use in client code and can be integrated even with server centric applications to provide nice caching features of content and data. In this post I've shown a very specific scenario of storing HTML content for the purpose of remembering list view data and state and making the browsing experience for lists a bit more friendly, especially if there's dynamically loaded content involved. If you haven't played with sessionStorage or localStorage I encourage you to give it a try. There's a lot of cool stuff that you can do with this beyond the specific scenario I've covered here… Resources Overview of localStorage (also applies to sessionStorage) Web Storage Compatibility Modernizr Test Suite© Rick Strahl, West Wind Technologies, 2005-2013Posted in JavaScript  HTML5  ASP.NET  MVC   Tweet !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

    Read the article

  • Scrollbar problem with jquery ui dialog in Chrome and Safari

    - by alexis.kennedy
    I'm using the jquery ui dialog with modal=true. In Chrome and Safari, this disables scrolling via the scroll bar and cursor keys (scrolling with the mouse wheel and page up/down still works). This is a problem if the dialog is too tall to fit on one page - users on a laptop get frustrated. Someone raised this three months ago on the jquery bug tracker - http://dev.jqueryui.com/ticket/4671 - it doesn't look like fixing it is a priority. :) So does anyone (i) have a fix for this? (ii) have a suggested workaround that would give a decent usability experience? I'm experimenting with mouseover / scrollto on bits of the form, but it's not a great solution :( EDIT: props to Rowan Beentje (who's not on SO afaict) for finding a solution to this. jQueryUI prevents scrolling by capturing the mouseup / mousedown events. So this: $("dialogId").dialog({ open: function(event, ui) { window.setTimeout(function() { jQuery(document) .unbind('mousedown.dialog-overlay') .unbind('mouseup.dialog-overlay') ; }, 100); }, modal: true}); seems to fix it. Use at own risk, I don't know what other unmodal behaviour unbinding this stuff might allow.

    Read the article

  • Embedded pdf object steals focus and will not let it go

    - by Kristian Hebert
    Hi guys, I was given the task of adding some usability to one of our applications, ie. make sure that every controll has a shortcut key, and that they can be reached by "tabbing" through the page. The gui runs in a IE. control on a winform, and consists of asp.net pages, so basically it is just asp.net always running in internet explorer. My problem is that one of the pages has an embeded pdf in it, like so: <object tabindex="-1" height="273" width="663" visible="false" type="Application/pdf" data="showpdf.ashx#navpanes=0"></object> showpdf.ashx is an httphandler, that streams the pdf contents to the response. It does not handle focus in any way. Now when I run this page, the pdf application steals focus, no matter what I do to set it to another control. And when it takes focus, I cannot take it back with the keyboard. Only a mouseclick on the page will set it to another control. I have tried to set focus in code behind OnPreRender, or in jevescript, but no luck. It seems that the http handler always runs after all the other code, and it sets focus on the pdf object. Any thought would be greatly appreciated.

    Read the article

  • Is this an acceptable UI design decision?

    - by DVK
    OK, while I'm on record as stating that StackExchange UI is pretty much one of the best websites and overall GUIs that I have ever seen as far as usability goes, there's one particular aspect of the trilogy that bugs me. For an example, head on to http://meta.stackoverflow.com . Look at the banner on top (the one that says "reminder -- it's April Fool's Day depending on your time zone!"). Personally, I feel that this is a "make the user do the figuring out work" anti-pattern (whatever it's officially called) - namely, instead of making your app smart enough to only present a certain mode of operations in the conditions when that mode is appropriate, you simply turn on the mode full on and put an explanation to the user of why the mode is on when it should not be (in this particular example, the mode is of course displaying the unicorn gravatars starting with 00:00 in the first timezone, despite the fact that some users still live in March 31st). The Great Recalc was also handled the same way - instead of proactively telling the user "your rep was changed from X to Y" the same nearly invisible banner was displayed on meta. So, the questions are: Is there such an official anti-pattern, and if so,m what the heck do i call it? Do you have any other well-known examples of such design anti-pattern? How would you fix either the SO example I made or you your own example? Is there a pattern of fixing or must it be a case-by-case solution?

    Read the article

  • Development Environment in a VM against an isolated development/test network

    - by bart
    I currently work in an organization that forces all software development to be done inside a VM. This is for a variety of risk/governance/security/compliance reasons. The standard setup is something like: VMWare image given to devs with tools installed VM is customized to suit project/stream needs VM sits in a network & domain that is isolated from the live/production network SCM connectivity is only possible through dev/test network Email and office tools need to be on live network so this means having two separate desktops going at once Heavyweight dev tools in use on VMs so they are very resource hungry Some problems that people complain about are: Development environment runs slower than normal (host OS is windows XP so memory is limited) Switching between DEV machine and Email/Office machine is a pain, simple things like cut and paste are made harder. This is less efficient from a usability perspective. Mouse in particular doesn't seem to work properly using VMWare player or RDP. Need a separate login to Dev/Test network/domain Has anyone seen or worked in other (hopefully better) setups to this that have similar constraints (as mentioned at the top)? In particular are there viable options that would remove the need for running stuff in a VM altogether?

    Read the article

  • Flex HTMLLoader component not raising mouseDown events for all mouse clicks

    - by shane
    I have built a Air 2/Flex 4 kiosk application with Flash Builder 4. Currently I am implementing a touch screen browser to enable users to navigate company training videos. In an attempt to improve the usability of the website on the touchscreen I have placed the HTML component in an adaption of Doug McCune's DragScrollingCanvas (updated to use the flex 4 'Scroller' component) to allow users to scroll the webpage by dragging their finger across the screen. The mouseDown event is used to start scrolling the viewport. In addition the webpage was modified to disable text selection with the following css: html { -webkit-user-select: none; cursor: default; } The problem I face is that the HTMLLoader component only fires a mouseDown if a link/input/button on the webpage is clicked, not when the background or any text is clicked. In addition if I remove the custom css the mouseDown event will not fire when text is being selected, but will if previously highlighted text is clicked. As an alternative I also tried adding a group container with the same dimensions as the HTMLLoader to detect the mouseDown events (so that the group container and HTMLLoader have the same Dragable parent container) and was able to capture mouseDown events and scroll the viewport as expected. However as the mouse event is handled by the group container, I am now unable to navigate the webpage. Does anybody know why the HTMLLoader component is not raising mouseDown events for all mouse clicks?

    Read the article

  • Using Essential Use Cases to design a UI-centric Application

    - by Bruno Brant
    Hello all, I'm begging a new project (oh, how I love the fresh taste of a new project!) and we are just starting to design it. In short: The application is a UI that will enable users to model an execution flow (a Visio like drag & drop interface). So our greatest concern is usability and features that will help the users model fast and clearly the execution flow. Our established methodology makes extensive use of Use Cases in order to create a harmonious view of the application between the programmers and users. This is a business concern, really: I'd prefer to use an Agile Method with User Stories rather than User Cases, but we need to define a clear scope to sell the product to our clients. However, Use Cases have a number of flaws, most of which are related to the fact that they include technical details, like UI, etc, as can be seem here. But, since we can't use User Stories and a fully interactive design, I've decided that we compromise: I will be using Essential Use Cases in order to hide those details. Now I have another problem: it's essential (no pun intended) to have a clear description of UI interaction, so, how should I document it? In other words, how do I specify a application through the use of Essential Use Cases where the UI interaction is vital to it? I can see some alternatives: Abandon the use of Use Cases since they don't correctly represent the problem Do not include interface descriptions in the use case, but create another documentation (Story Boards) and link then to the Essential Use Cases Include UI interaction description to the Essential Use Cases, since they are part of the business rules in the perspective of the users and the application itself

    Read the article

  • ASP.NET MVC 1 and 2 on Mono 2.4 with Fluent NHibernate

    - by SztupY
    Hi! I'd like to create an application using ASP.NET MVC, that should run under mono 2.4 (compiling will be done on a Windows box). Has anyone getting luck with this? Here is what I've already tried: ASP.NET MVC on mono without any persistence model support, and using nhaml as the view engine S#aml architecture, which is a quite good framework imho, but it depends too much on stuff, that are not working good under mono (like windsor) The first part worked fine, I didn't encounter any major problems. But I couldn't get the second part working. It seems it's dependency on Castle.Windsor breaks the whole mono support (but there might be other parts too). Therefore I decided to create an alternative framework, that borrows some of the ideas of s#arp-architecture, but designed to be working under mono (and if I'm able to do this I'll release it for the community of course). The controller and view part is working fine (not much magic here though, they have been always working), but I have some questions before I start job on the persistence part: What NHibernate versions are working under mono? I've heard 1.2 is working fine. Does 2.0.1/2.1 beta work under mono? Does Fluent.NHibernate and NHibernate.Linq work under mono? (for the latter it seems it needs some dependcies that aren't avaialable in mono) Are there any good alternatives for persistence support to NHibernate under mono? Alternative questions: Are there any frameworks that have mono+persistence+asp.net mvc support already or am I the first one to think about this? If you have already done this: what are your opinions on stability/usability? Thanks for the answers EDIT: Updated the framework to support ASP.NET MVC 2: http://shaml.sztupy.hu/

    Read the article

  • What's are the best readings to start using WPF instead of WinForms?

    - by Ivan
    Keeping in mind what CannibalSmith once said - "All the answers are saying "WPF is different". That's a huge understatement. You not only have to learn lots of new stuff - you must forget everything you've learned from Forms. It's a completely new way of doing UI." .. and having many years of experience with visual Windows desktop applications development (VB6, Borland C++ Builder VCL, WinForms) (which is hard to forget), how do I quickly move to developing to say well-formed WPF applications with Visual Studio? I don't need boozy-woozy graphics to give my app look and feel of a Hollywood blockbuster or a million dollar pyjamas. I always loved tidiness of standard Windows common controls and UI design guidelines, end even more I enjoyed them under Vista Glass Aero Graphite sauce. I am perfectly satisfied with WinForms but I want to my applications to be built of the most efficient and up-to-date standard technologies and architectured according to the most efficient and flexible patterns of today and tomorrow, leveraging interface-based integration and functionality reuse and to take all advantages of modern hardware and APIs to maximize performance, usability, reliability, maintainability, extensibility, etc. I very much like the idea of separating view, logic and data, letting a view to take all advantages of the platform (may it run as a web browser applet on a thin client or as a desktop application on a PC with a latest GPU), letting logic be reused, parallelized and seamlessly evolve, storing data in a well structured format in a right place. But... while moving from VB6 to Borland C++ Builder was very easy (no books/tutorials needed to turn it on and start working) (assuming I already knew C++), moving from BCB to WinForms was the same seamless, it does not seem any obvious to me how to do with WPF. So how do I best convert myself from a WinForms developer into a right-way thinking and doing WPF developer?

    Read the article

  • SEM/SEO tasks doubts

    - by Josemalive
    Hello, Actually i think that i have an strong knowledge of SEO, but im having some doubts about the following: I will have to increase the position in Google of certain product pages of a company in the next months. I supposed that not only will be sufficient the following tasks: Improve usability of those pages. Change the pages title. Add meta description and keywords. Url's in a REST way. 301's http header to dont lose page rank for the new URLS Optimizing content for Google. Configure links of the website (follow and no follow attributes) Get more inbounds links (Link building tasks). Create RSS. Put main website in Twitter (using twitter feed) using the RSS. Put main website in Facebook. Create a Youtube channel. Invest in Adwords. Invest in other online advertising companies. Use sitemap.xml and Google Webmaster tools. Use Google Trends to analyze the volume of searches of certain keywords. Use Google Analytics to analyze weak points and good points of your site, and find new oportunities in keywords. Use tools to find new keywords related with your content. Do you have some internet links, or knowledge about all the tasks that a SEO Expert should do? Could you share some knowledge about what kind of business could be do with another companies (B2B) to increase the search engine position of those product pages. Do you know more tecniques about how to get more inbound links? (i only know the link interchange) Thanks in advance. Best Regards. Jose.

    Read the article

  • How to localize an app on Google App Engine?

    - by Petri Pennanen
    What options are there for localizing an app on Google App Engine? How do you do it using Webapp, Django, web2py or [insert framework here]. 1. Readable URLs and entity key names Readable URLs are good for usability and search engine optimization (Stack Overflow is a good example on how to do it). On Google App Engine, key based queries are recommended for performance reasons. It follows that it is good practice to use the entity key name in the URL, so that the entity can be fetched from the datastore as quickly as possible. Currently I use the function below to create key names: import re import unicodedata def urlify(unicode_string): """Translates latin1 unicode strings to url friendly ASCII. Converts accented latin1 characters to their non-accented ASCII counterparts, converts to lowercase, converts spaces to hyphens and removes all characters that are not alphanumeric ASCII. Arguments unicode_string: Unicode encoded string. Returns String consisting of alphanumeric (ASCII) characters and hyphens. """ str = unicodedata.normalize('NFKD', unicode_string).encode('ASCII', 'ignore') str = re.sub('[^\w\s-]', '', str).strip().lower() return re.sub('[-\s]+', '-', str) This works fine for English and Swedish, however it will fail for non-western scripts and remove letters from some western ones (like Norwegian and Danish with their œ and ø). Can anyone suggest a method that works with more languages? 2. Translating templates Does Django internationalization and localization work on Google App Engine? Are there any extra steps that must be performed? Is it possible to use Django i18n and l10n for Django templates while using Webapp? The Jinja2 template language provides integration with Babel. How well does this work, in your experience? What options are avilable for your chosen template language? 3. Translated datastore content When serving content from (or storing it to) the datastore: Is there a better way than getting the *accept_language* parameter from the HTTP request and matching this with a language property that you have set with each entity?

    Read the article

  • MSN Messenger API

    - by MarceloRamires
    back when I was not working with programming (using skills from courses and school) I started developing a simple program that is supposed to get the Artwork of the album to which the song you're currently listening in iTunes to and set it as you Display Picture in MSN Messenger (everything had to be open at the same time). I was so excited about it, made it as nicely as I could back then (now I consider it a design and usability complete fail), and it surprisingly worked. Now, a couple of versions ahead (MSN from 8.5 to 9.0, iTunes from 8 to 9, and windows from Vista to 7) I am getting some incompatibility issues. Where I work, I use Windows 7, Windows Live Messenger 2009 and iTunes 9 - it works just just like before, but at home I have the same exact setup, but something weird happens: When I open the program (having my itunes AND msn open) it doesn't use the active MSN instance, instead it opens a new one, and doesn't work even on this opened one. I've tried it with a couple of libraries: Interop.Messenger.dll - workis like described above Interop.MessengerAPI.dll - works like described above Interop.MessengerPrivate.dll - never worked MSNMessenger.dll - the one I used before - doesn't work anymore at all What could I do ? Info: Visual Studio 2008, .NET 3.5, C#, WinForms application. I'll watch this question and add any information if requested

    Read the article

  • Linux Lightweight Distro and X Windows for Development

    - by Fernando Barrocal
    Heyall... I want to build a lightweight linux configuration to use for development. The first idea is to use it inside a Virtual Machine under Windows, or old Laptops with 1Gb RAM top. Maybe even a distributable environment for developers. So the whole idea is to use a LAMP server, Java Application Server (Tomcat or Jetty) and X Windows (any Window manager, from FVWM to Enlightment), Eclipse, maybe jEdit and of course Firefox. Edit: I am changing this post to compile a possible list of distros and window managers that can be used to configure a real lightweight development environment. I am using as base personal experiences on this matter. Info about the distros can be easily found in their sites. So please, focus on personal use of those systems Distros Ubuntu / Xubuntu Pros: Personal Experience in old systems or low RAM environment - @Schroeder, @SCdF Several sugestions based on personal knowledge - @Kyle, @Peter Hoffmann Gentoo Pros: Not targeted to Desktop Users - @paan Don't come with a huge ammount of applications - @paan Slackware Pros: Suggested as best performance in a wise install/configuration - @Ryan Damn Small Linux Pros: Main focus is the lightweight factor - 50MB LiveCD - @Ryan Debian Pros: Very versatile, can be configured for both heavy and lightweight computers - @Ryan APT as package manager - @Kyle Based on compatibility and usability - @Kyle -- Fell Free to add Prós and Cons on this, so we can compile a good Reference. -- X Windows suggestion keep coming about XFCE. If others are to add here, open a session for it Like the distro one :)

    Read the article

  • Fixed mouse pointer with jQuery draggable

    - by MikeWyatt
    I'm building a little game in HTML5. The canvas element is a viewport into the game world. The user can move the viewport's position in the world by clicking and dragging with the mouse on a small icon. The problem is that the scrolling stops when the mouse pointer hits the edge of the screen. In all likelihood, that will limit scrolling in one of the directions severely, since the icon will be in one of the corners of the page. The only technical solution I can think of would be to somehow fix the mouse pointer's position on the icon and detect the relative movement each frame. Basically I would just reset the pointer position back to the center of the icon after each drag event. Unfortunately, I'm fairly positive that this is not possible. Playing with the user's pointer is a big no-no from a usability and security standpoint. So, is there any other way to do what I want? I'm primarily looking for technical ideas here, but suggestions for a more appropriate interface would also be welcome.

    Read the article

  • Handling conflicting priorities and expectations in project development

    - by jasonk
    There are any number of situations in the standard day where priority conflicts exist for projects. Management wants maximum productivity from employees. Marketing wants maximum salability and fast turnaround. Ownership wants maximum profit. Customers want usability and low cost. Regardless of the origin of the demands, time and money are always the limiting factor in business. Sometimes project elements have intrinsic or goodwill benefits for which there is not a hard, fast way to measure with monetary means (e.g. arguments for an attractive UI appeal vs. functional but plain). Other elements of software may have a method of providing “mental breaks” or motivating “cool factor” for developers that can get them back on track on other bigger, complex issues. While they may sidetrack the project short term they may have greater results long term through improved job satisfaction, etc. Continued training is a must, but working it in can setup back progress. What are your suggestions for setting priorities? How do you evaluate requests/demands on your projects? What are your suggestions for communicating and passing those on to your team in a way that they stay focused?

    Read the article

  • SEO on a Database Driven Website

    - by Ryan Giglio
    I have a question about a site I'm developing. It is a database driven directory site where people can make a profile and list themselves in one or many area codes and in one or many fields of work. When someone is looking for a person to hire, they enter one or more area codes to look in (or select them with checkboxes) and when the form submits, it saves these as a cookie so the site remembers what location you were searching in. You then narrow down your search by category and field (which are links) and get a listing of all the profiles that match your search. What I am concerned about is this: because a search engine can't type in or select area codes to search in, how is it going to find and index any of the profile pages? It doesn't allow the user to search for people without first selecting an area code, because there's no practical purpose to do so. There would also be no practical purpose from a user experience/usability standpoint of simply having a list of each area code as a link to the categories page, but as far as I know, isn't that the only way for search engines to see every person? How does a site like Facebook accomplish this? There isn't some sort of master directory with a link to ever single Facebook user's profile page, and yet they're often the #1 search result for a person's name.

    Read the article

  • What should a developer know before building a public web site?

    - by Joel Coehoorn
    What things should a programmer implementing the technical details of a web site address before making the site public? If Jeff Atwood can forget about HttpOnly cookies, sitemaps, and cross-site request forgeries all in the same site, what important thing could I be forgetting as well? I'm thinking about this from a web developer's perspective, such that someone else is creating the actual design and content for the site. So while usability and content may be more important than the platform, you the programmer have little say in that. What you do need to worry about is that your implementation of the platform is stable, performs well, is secure, and meets any other business goals (like not cost too much, take too long to build, and rank as well with Google as the content supports). Think of this from the perspective of a developer who's done some work for intranet-type applications in a fairly trusted environment, and is about to have his first shot and putting out a potentially popular site for the entire big bad world wide web. Also: I'm looking for something more specific than just a vague "web standards" response. I mean, HTML, JavaScript, and CSS over HTTP are pretty much a given, especially when I've already specified that you're a professional web developer. So going beyond that, Which standards? In what circumstances, and why? Provide a link to the standard's specification. This question is community wiki, so please feel free to edit that answer to add links to good articles that will help explain or teach each particular point.

    Read the article

  • Aggregating / Collecting AJAX requests

    - by Ganesh Shankar
    I have situation where a user can manipulate a large set of data (presented in a table) by using a bunch of filters represented as checkboxes. The page is AJAXed up so the user doesn't have to wait for a full page refresh every time they click a filter. The way it's currently implemented is by having an event handler watch all the checkboxes and request filtered data from the server when a click event is triggered. This works fine. However, there is a usability & performance issue with doing it this way. For example, if a user clicks 6 checkboxes, 6 AJAX requests are triggered and they all come back at various intervals causing the page to be updated 6 times. This will most probably annoy the user and seems rather inefficient. I want to put some kind of timeout on the event handler to do something like this: "Wait for 1 second and if there are no more filters clicked trigger the AJAX request". However, at the moment I've only been able to delay all 6 requests by 1 second. I'm not sure how to aggregate / collect the filter info into 1 AJAX request. Any suggestions would be greatly appreciated!

    Read the article

  • How to move list items from two lists (from different areas) to one specific list by clicking the li

    - by pschorr
    I've been having some issues setting up a list of items and moving them between each other. Is it possible to have multiple lists, with a link inside each item to move it to a specified list? i.e. List of actions with a plus next to the action, click the plus and move to a specified box? Furthermore, would it be possible to then load a lightbox (code would have to be inline I'd guess) from that page and move those names to the specific list as well? Example Images Thanks much! More broad view of my efforts so far... The initial issue being that I could not use listboxes due to their being rendered natively inside each individual browser. Through listboxes I was able to set this up, but with a trigger via the code below (found on stackoverflow). While it gave me partial functionality it did not get the target I was looking for. document.getElementById('moveTrigger').onclick = function() { var listTwo = document.getElementById('secondList'); var options = document.getElementById('firstList').getElementsByTagName('option'); while(options.length != 0) { listTwo.appendChild(options[0]); } } I then moved onto jqueryui's sortable and it's ability to connect multiple, and most important, style-able lists and to be dragged between each other. This works for the side by side tables, but it does not offer the usability I was looking for overall. So, I've come to where I'm unsure as to where to move forward. While I can get around PHP, I wouldn't know where to start with this one personally. I'm open to any and all options! Thanks much!

    Read the article

  • How can I add a portrait layout on top of a landscape Camera SurfaceView?

    - by user319919
    I need a Camera SurfaceView for my application. The camera should be set to fixed landscape view which is done by setting android:screenOrientation="landscape" for the activity in the AndroidManifest.xml. After doing some experiments and Google researches trying to use setRotation(int) inside the camera preview implementation, I came to the conclusion, that it is obviously the common practice to get a preview with correct behaviour. Now the camera preview itself looks fine for landscape orientation. But I need to have an overlay that holds a bunch of buttons. Due to usability the user interface should be in portrait view (or even better orientation aware). There seemed no other option to me, but to fix the activity screenOrientation, so that the camera preview looks normal (in portrait mode the whole view is streched and rotated to the left) Is there a workaround to get my buttons back to portrait orientation? Or another overall approach to deal with the camera view? Parameters.setRotation(int) obvisouly didnt work. I am quite new to the Android plattform programming. Of course I dont know much about the programming tricks and workarounds yet. I did a lot of research over the last two weeks, but couldnt find the right solution so far.

    Read the article

  • Password Confirmation Overlay

    - by Alasdair
    Hello, I'm creating a J2EE web application that uses jQuery and Ajax to help with some of the presentation for a user-friendly interface. I've done a lot of work ensuring security around persistant login cookies, and I've decided to request the password from any user that logged in using a persistant login cookie before being allowed to make any changes that could be malicious. This request would only happen once to confirm the user is who they say they are and will last throughout the session. At present, any requests that meet this criteria has their request information stored in session and then the user is forwarded to a page to confirm their password. Once confirmed, the user's original request is then performed and the requestion information removed from session. What I would like to do is avoid all this redirection and minimize what's held in session (even if it's just for a small time), thus improving usability and convenience for the user. I believe that a jQuery overlay could allow me to prompt the user for their password (if required) and then continue to submit the request if successful. I would of originally used ThickBox, but since that's now deprecated I don't see the benefit in implementing it in an application at this development stage. However, I have tried to create an overlay using jQuery but I've scrapped every attempt as I can't seem to make it all come together. My main problem is preventing the submission when the user incorrectly types a password or cancels the overlay. Desired Flow Persistant Login Sensitive Page Submit Password Confirmation Overlay [Continue Submit | (Cancel | Incorrect] I have already created JavaScript code to encrypt the password to be sent in a parameter, but all I need now is a method of controlling the overlay and how best to use Ajax for this purpose. Please ignore the fact that this is a J2EE web application when answering as it is irrelevant really. Thanks in advance, Alasdair

    Read the article

  • Sanitizing user input that will later be e-mailed - what should I be worried about?

    - by Kevin Burke
    I'm interning for an NGO in India (Seva Mandir, http://sevamandir.org) and trying to fix their broken "subscribe to newsletter" box. Because the staff isn't very sophisticated and our web host isn't great, I decided to send the relevant data to the publications person via mail() instead of storing it in a MySQL database. I know that it's best to treat user input as malicious, and I've searched the SO forums for posts relevant to escaping user data for sending in a mail message. I know the data should be escaped; what should I be worried about and what's the best way to sanitize the input before emailing it? Form flow: 1. User enters email on homepage and clicks Submit 2. User enters name, address, more information on second page (bad usability, I know, but my boss asked me to) and clicks "Submit" 3. Collect the data via $_POST and email it to the publications editor (and possibly send a confirmation to the subscriber). I am going to sanitize the email in step 2 and the other data in step 3. I appreciate your help, Kevin

    Read the article

  • Is this a good job description? What title would you give this position?

    - by Zack Peterson
    Department: Information Technology Reports To: Chief Information Officer Purpose: Company's ________________ is specifically engaged in the development of World Wide Web applications and distributed network applications. This person is concerned with all facets of the software development process and specializes in software product management. He or she contributes to projects in an application architect role and also performs individual programming tasks. Essential Duties & Responsibilities: This person is involved in all aspects of the software development process such as: Participation in software product definitions, including requirements analysis and specification Development and refinement of simulations or prototypes to confirm requirements Feasibility and cost-benefit analysis, including the choice of architecture and framework Application and database design Implementation (e.g. installation, configuration, customization, integration, data migration) Authoring of documentation needed by users and partners Testing, including defining/supporting acceptance testing and gathering feedback from pre-release testers Participation in software release and post-release activities, including support for product launch evangelism (e.g. developing demonstrations and/or samples) and subsequent product build/release cycles Maintenance Qualifications: Bachelor's degree in computer science or software engineering Several years of professional programming experience Proficiency in the general technology of the World Wide Web: Hypertext Transfer Protocol (HTTP) Hypertext Markup Language (HTML) JavaScript Cascading Style Sheets (CSS) Proficiency in the following principles, practices, and techniques: Accessibility Interoperability Usability Security (especially prevention of SQL injection and cross-site scripting (XSS) attacks) Object-oriented programming (e.g. encapsulation, inheritance, modularity, polymorphism, etc.) Relational database design (e.g. normalization, orthogonality) Search engine optimization (SEO) Asynchronous JavaScript and XML (AJAX) Proficiency in the following specific technologies utilized by Company: C# or Visual Basic .NET ADO.NET (including ADO.NET Entity Framework) ASP.NET (including ASP.NET MVC Framework) Windows Presentation Foundation (WPF) Language Integrated Query (LINQ) Extensible Application Markup Language (XAML) jQuery Transact-SQL (T-SQL) Microsoft Visual Studio Microsoft Internet Information Services (IIS) Microsoft SQL Server Adobe Photoshop

    Read the article

  • Where to post code for open source usage?

    - by Douglas
    I've been working for a few weeks now with the Google Maps API v3, and have done a good bit of development for the map I've been creating. Some of the things I've done have had to be done to add usability where there previously was not any, at least not that I could find online. Essentially, I made a list of what had to be done, searched all over the web for the ways to do what I needed, and found that some were not(at the time) possible(in the "grab an example off the web" sense). Thus, in my working on this map, I have created a number of very useful tools, which I would like to share with the development community. Is there anywhere I could use as a hub, apart from my portfolio ( http://dougglover.com ), to allow people to view and recycle my work? I know how hard it can be to need to do something, and be unable to find the solution elsewhere, and I don't think that if something has been done before, it should necessarily need to be written again and again. Hence open source code, right? Firstly, I was considering coming on here and asking a question, and then just answering it. Problem there is I assume that would just look like a big reputation grab. If not, please let me know and I'll go ahead and do that so people here can see it. Other suggestions appreciated. Some stuff I've made: A (new and improved) LatLng generator Works quicker, generates LatLng based on position of a draggable marker Allows searching for an address to place the marker on/near the desired location(much better than having to scroll to your location all the way from Siberia) Since it's a draggable marker, double-clicking zooms in, instead of creating a new LatLng marker like the one I was originally using The ability to create entirely custom "Smart Paths" Plot LatLng points on the map which connect to each other just like they do using the actual Google Maps Using Dijkstra's algorithm with Javascript, the routing is intelligent and always gives the shortest possible route, using the points provided Simple, easy to read multi-dimensional array system allows for easily adding new points to the grid Any suggestions, etc. appreciated.

    Read the article

  • Strange layout behaviour

    - by andrii
    I am a little bit confused. Here is an small web page. There are two main div-s: top and mainBlock. First contain image. The problem is that firebug shows that div#top's height is equal to 0 and because of that the next div mainBlock moves up. If I would delete this peace of code: div#logo{ float: left; } everything will start working fine and div#mainBlock will be below the div#top. Could you, please, explain me how it works and how to avoid this in proper way? Here is my code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Paralab - Website &amp; interface design, web apps development, usability</title> <style text="text/css"> html, body{ } div#logo{ float: left; } #top{ width: 100%; } #mainBlock{ width:100%; } </style> </head> <body> <div id="top"> <div id="logo"> <img alt="logo" src="img/logo.png" /> </div> </div> <div id="mainBlock"> Contact Us </div> </body> </html>

    Read the article

< Previous Page | 20 21 22 23 24 25 26 27 28 29 30 31  | Next Page >