Managing Persistent Data In Your Web Applications Using DOM Storage

The 90’s saw many inovations in the web, but not much changed in the way of client side storage. Javascript and cookies were the way to keep user data saved in the browser.

Recently various techniques for storing and retrieving data have emerged. There are so many different ways in fact that we need to answer some questions to determine the best solution for persisting data between requests.

We have to ask who needs the data ? How long does the data need to be persisted? And how large is the set of data?

Persistence Method	Who Needs the Data?	For How Long?	How Much Data?
Application	All users	Until the next application restart	Can be almost any size—it will only be stored once
Cookie	One user	As short as desired, or for months or even years if the user doesn’t delete their cookies	Minimal, simple data
Form Post	One user	For the next request (can be reused across many requests)	Virtually any size—the data is sent back and forth with every page
QueryString	One user or one group of users	For the next request (can be reused across many requests)	Minimal, simple data
Session	One user	As long as the user is active, plus a timeout period (typically 20 minutes)	Can be almost any size, but should be minimized since every user has their own separate session store
Cache	All users or a subset of users	As long or as short as needed	Can be used for large or small, simple or complex data
Context	One user	This request only	Can hold large objects, but typically does not since it is often used for every request
ViewState	One user	One Web form	Minimal; as with Form Post, this data is sent back and forth with every page
Config file	All users	Until the configuration file is updated	Can hold a lot of data; usually organized as many small strings or XML structures

Application

Let’s set the object use criteria by answering the state questions I asked earlier. Who needs this data? All users need access to it. How long does this data need to be persisted? It has to live forever, or for the life of the application. How large is this data? It can be almost any size—only one copy of the data will exist at any given time.

In classic ASP, the Application object provided a great place to store frequently used pieces of data that changed infrequently, such as the contents of menus or other reference data. While the Application object is still available as a data container in ASP.NET, other objects are generally better suited for the kinds of data that would have been stored in the Application collection of a classic ASP application.

Cookies

Cookies are handy when a particular user needs a specific piece of data, and it needs to be persisted for a variable period of time. It can be as brief as the life of the browser window, or as long as months or even years. As far as size goes, cookies are very small. Cookies can be as small as only a few bytes of data, and since they are passed with every browser request, their contents should be kept as small as possible.

Security NOTE : The best way to secure sensitive state that should not be viewed or modified by a hostile user is to store that state on the server. If sensitive data must be sent to the client, it should be encrypted beforehand, regardless of the storage mechanism employed.

Form Post / Hidden Form Field

Form data is needed by a particular user, and it must be persisted for any period from a single request to the life of the application. The data can be virtually any size; it’s sent back and forth over the network with each form post. This requires the data to be sent back and for to each other using Submit buttons, or saved on the client machine with cookies. This was a classic technique that is not recommended anymore.

QueryString

The data stored in the QueryString object is used by the individual user. Its lifetime can be as brief as a single request, or as long as the user continues to use the application (if architected appropriately). This data is typically less than 1KB. Data in a QueryString is passed in the URL and is visible to the user, so as you might guess, sensitive data or data that can be used to control the application should be encrypted when using this technique.

That said, the QueryString is a great way to send information between Web forms in ASP.NET. For example, if you have a DataGrid with a list of products, and a hyperlink in the grid that goes to a product detail page, it would be an ideal use of the QueryString to include the product ID in the QueryString of the link to the product details page (for example, productdetails.aspx?id=4). Another advantage of using QueryStrings is that the state of the page is contained in the URL. This means that a user can put a page in their Favorites folder in its generated form when it’s created with a QueryString. When they return to it as a favorite, it will be the same as when they actually made it a favorite. Obviously, this only works if the page doesn’t rely on any state outside the QueryString and nothing else changes.

Along with sensitive data, any variable that you don’t want the user to be able to manipulate should be avoided here (unless encryption is used to remove human-readability). Also, keep in mind that characters that are not valid in a URL must be encoded using Server.UrlEncode, as Figure 7 shows. When dealing with a single ASP.NET page, ViewState is a better choice than QueryString for maintaining state. For long-term data storage, Cookie, Session, or Cache are more appropriate data containers than QueryStrings.

Session

Session data is specific to a particular user. It lives for as long as the user continues to makes requests plus some period of time afterward (typically 20 minutes). The Session object can hold large or small amounts of data, but total storage should be kept minimal if the application is intended to scale to hundreds of users or more.

Using the Session object is easy and its syntax is identical to classic ASP. However, the Session object is one of the less efficient ways of storing user data, since it is held in memory for some time even after the user has stopped using the application. This can have serious effects on scalability for a very busy site.

For small amounts of data, the Session object can be a perfectly valid place to store user-specific data that needs to persist only for the duration of the user’s current session.

This sounds like the way to go for my progress reporting application. So, lets dive into a demo and see how we can save some data in session object.

Here is some sample session variable code: Methods

Create session variable and set it:

Session(“varName”) = varValue

Get on page:

newVar = Sesssion(“varName”)

Clear session variable:

Session(“varName”) = “” OR

Session.Contents.Remove(“varName”)

Clear out session when done:

Session.Contents.RemoveAll() OR

Session.Abandon

I would combine the two to ensure that pesky session data is gone.My logout script is :

Session.Contents.RemoveAll()
Session.Abandon
Response.Redirect(“default.asp”)

The session object has the onStart and OnEnd events and the SessionID and Timeout properties

A session ends if a user has not requested or refreshed a page in the application for a specified period. By default, this is 20 minutes. They could need longer for filling out these forms.

If you want to set a timeout interval that is shorter or longer than the default, use the Timeoutproperty.

Session.Timeout=5 gives the session 5 minutes of inactivity. I think you would want a few hours at least.

Here is the best resources for asp dev http://www.w3schools.com/asp/asp_sessions.asp

http://www.tizag.com/aspTutorial/aspSession.php

This is a summary of a microsoft developer network article. that was updated in 2005.

Now lets get into the new technology

Here is my personal test file http://itwebdev.mv.skagit.edu/don/stuff/dom%20storage/domstorage.html

DOM storage, also called Web Storage is comprable to cookies. However, web storage offers more control of how the information is stored and accesed by each window.

This technique also offers a lot more storage space, and quite different functionality than cookies.

The web storage scripting objects have been drafted into the HTML 5 working draft specifications, and have gathered major vendor support.

window.sessionStorage
Session storage is designed for scenarios where the user is carrying out a single transaction. The sessionStorage attribute of the window object maintains key/value pairs for all pages loaded during the lifetime of a single tab (for the duration of the top-level browsing context). For example, a page might have a check box that the user selects to indicate that he wants insurance. A later page could then check, from script, whether the user had selected the check box.

The Storage object supports expando properties (‘insurance’ in the preceding example). If the property name does not exist, a key/value pair is automatically created to hold it. Note that key/value pairs are always stored as strings. Different data types such as numbers, Boolean values, and structured data must be converted to strings before persisting to a storage area.

After a value has been saved to sessionStorage, it can be retrieved by script running in another page in the same context. When another document is loaded,sessionStorage is initialized from memory for same-origin URLs

Note Although it is allowed by the HTML5 (Working Draft), Internet Explorer 8 does not resume sessionStorage after browser crash recovery.

window.localStorage

The local storage mechanism spans multiple windows and persists beyond the current session. The localStorage attribute provides persistent storage areas for domains. It allows Web applications to store nearly 10 MB of user data, such as entire documents or a user’s mailbox, on the client for performance reasons.

here is the msdn article that this blog post sumarrizes http://msdn.microsoft.com/en-us/library/cc197062(v=vs.85).aspx

Video aspect ratio standard sizes

Here is my post on the charts and information regarding video production and graphics sizes.

stuff to go through

all about the jQuery collection object. $("#about")this lets us dominate the dom so easily. any id on the page can be quickly and easily accessed and manipulated. to change a text box with id of “name” back ground color in your forms for an alert of missing info, $(“#name”).css(“background-color”,”red”);// access textbox id of “name” and change bg color to red and you can chain these together to dominate… $( this ).html(“Tap To Launch”).css(“font-size”, “x-large”).css(“font-family”, “fantasy”).attr(“alt”, “my alt text”) val is awesome.. get the value of a text field (and perhaps even more, got to check.) with $(“#name”).val() set the old getelementbyid….value=”my value” with $(“#name”).val(“my value”); add event to any element via id

$('#target').click(function() {
  alert('Handler for .click() called.');
});

here is a better way .. you can access the event vars e like flash as3

 $("#btnSave").click(function(e){         e.preventDefault();         alert("btnSave is clicked");         return false;         });

JQuery provides several ways of adding elements dynamically into an already existing element. Some methods are: before(), insertBefore() after(), insertAfter(), append, appendTo, prepend, prependTo and so on. f you want to change the current active page with JavaScript, you can use the changePage method. There are a lot of methods and properties that you can set when changing pages, but here are two simple examples:

 //transition to the "about us" page with a slideup transition

 $.mobile.changePage( "about/us.html",

{ transition: "slideup"} );

//transition to the "search results" page, using data from a form with an ID of "search""

$.mobile.changePage( "searchresults.php", { type: "post", data: $("form#search").serialize() });

Heres a simple click called to div…Jquery is cool because you can put an event on any element with an id from static items that are not usually interactive like div , spans to standard active hot spots like buttons and links. function myAlertFunction( message ){ alert( message); } here is how you would call scripts after page loaded in jquery. $(document).ready(function(){ $(‘div’).click(function(){ myAlertFunction(‘ This is a div’); }) }); here is how you do it in jquery mobile, becuase pages are stored inthe dom of one html page.

$( document ).delegate("#aboutPage", "pageinit", function() { alert('A page with an ID of "aboutPage" was just created by jQuery Mobile!'); });

you delelegate what page the scripts will be attached to via the id.

for linking web pages and changing page via script , in your function use the .attr() to add href, alt, titles – for those great tool tips. $( this ).attr(“href” , “http://celc.dwdenney.com/daycarerecordsforms.html”); this seems like good for image slide show, can read files from folder into array, then change src via timed intervals, use css animation to tint color fade in or opacity fades or some slide trannys

$("img").attr({   src: "/images/hat.gif",   title: "jQuery",   alt: "jQuery Logo" }); $("div").text($("img").attr("alt"));

this is a sweet way to transition an element.

Here is a good one for sending texts from your apps.< form name=”send_login_id_form” id=”send_login_id_form” method=”GET” action=”assets/devcloud_logic.php” data-ajax=”false”>< select name=”carrier” id=”carrier”>< option value=”verizon”>Verizon</option>< option value=”tmobile”>T-Mobile</option>< option value=”sprint”>Sprint</option>< option value=”att”>AT&T</option>< option value=”virgin”>Virgin Mobile</option>< /select>< label for=”to”>To:</label><input name=”to” type=”text” id=”to” size=”30″ />< label for=”message”>Message:</label><textarea name=”message” cols=”40″ rows=”5″ id=”message”></textarea>< input type=”submit” name=”submit” id=”submit_button” value=”Submit” />< input type=”hidden” id=”action” name=”action” value=”Submit message and phone number to recieve text pass code” />< /form>

fujitsu seems to have some good biometric authentication devices

Users: Device Authentication Better than Passwords

A new study indicates that most users would prefer to have their devices authenticated rather than deal with the complications of passwords.

By Larry Barrett | September 15, 2009 Share
The latest data protection and information security survey conducted by the independent Ponemon Institute suggests that consumers would be willing to let Big Brother encroach a bit on their individual computing devices in exchange for more online security and lot less memorization of pesky user names and passwords.

Of the 551 participants who responded the Traverse City, Mich.-based researcher’s online survey, 70 percent said they’d be willing to have their computers authenticated by an online merchant before purchases are completed and 75 percent of those surveyed said that computer authentication is preferred because it’s more convenient than remembering passwords or answering pre-selected questions.

According to a 2007 password study by Microsoft, the average person has 6.5 Web passwords, each of which is shared across almost four different Web site. The study also found that each user has about 25 accounts that require passwords and he or she types an average of eight passwords a day.

If this particular study and it’s relatively small sample size is indicative of how the majority of consumers feel, so-called device fingerprinting software and technology developed by the likes of Los Altos, Calif.-based ThreatMetrix will soon find a much larger market with e-tailers, online payment processors and even social networking and e-dating sites.

“Actually, I did find the responses a little surprising,” said Larry Ponemon, chairman and founder of the Ponemon Institute. “The responses were overwhelmingly positive and it’s clear people are becoming more comfortable with technology that can authenticate their machines.”

The idea of allowing a third-party Web site to use a software that would then report back the IP address, browser and physical location of a PC or mobile device still strikes some as an invasion of privacy. However, the notion of divulging personal information such as a mother’s maiden name or the last four numbers of a social security number apparently bothers Internet users even more.

In 2008, the Georgia Tech Information Security Center estimated that as many as 15 percent of personal computers were part of a botnet, up from 10 percent in 2007. E-commerce sites, dating sites such as eHarmony and Match.com as well as banks and payment processing centers are increasingly looking at device authentication technology as yet another tool in their ongoing war with hackers, spammers and other garden-variety malfeasants.

“The thing I’ve learned over a number of years is that timing is everything,” said Tom Grubb, vice president of marketing at ThreatMetrix. “I really feel like it’s the right time for this technology. It can help you identify who is a good guy and who is a bad guy without invading anyone’s privacy. The bad guys know that they have to try to act like a good guy and that leaves a trail that we recognize to help protect your network.”

In its report, the Ponemon Institute also found that 78 percent of users think online merchants, banks and social networks should use technology, such as a cookie or other invisible software, to protect consumers’ identities. Only 21 percent of those surveyed want online vendors to require more personal data from the consumers themselves.

According to CyberSource, 7 percent of e-tailers with more than $25 million in annual sales are using device fingerprinting software and another 47 percent said they plan to implement it by year’s end.

“What they’ve come to realize is that previous methods for authenticating credit card transactions and IDs are failing,” said Alisdair Faulkner, vice president of product development at ThreatMetrix. “This technology identifies the device and gives you another tool to use with other security technologies and processes to secure all these transactions.”

Article courtesy of InternetNews.com.

Cloud-aware Network Management Real-life case studies on how large enterprises moved away from traditional legacy tools to ManageEngine OpManager Enterprise Edition for cloud-aware network management experience. Click here to download the white paper.

Google Web Fonts

An exciting addition to web development arsenal is the Google Web Fonts api. The problem with fonts onthe web was that many computers dont have the same fonts, as they vary from system to system. http://www.google.com/webfonts

Elaborate on this, do some demos and release the post.

They say to start by choosing some fonts to add to a collection, then you dl the files.

The interface for choosing fonts is great. you can sort and filter the fonts depending on what you need for your project.Then you add them to a collection with the touch of a button.

Serifs, the tiny decorations on the tips of the letters, usually dont work well on screens, so they dont get used on webpages as often as sans. I am going to build a collection of serif fonts that look good onthe screen, so I can use them on some pages.

Well after i finished building a collection, they say that using too many will impact page load times. You should only choose the one or two you want for your web page.There is a cool web page load time meter that will show you if you have chosen too many fonts.So, I uncheck ed the boxes until i was left with my favorite two fonts, and they don’t have a huge impact on load time.

Then, just add this link to your document <link href=’http://fonts.googleapis.com/css?family=Metamorphous|Cagliostro’ rel=’stylesheet’ type=’text/css’>

Lastly, just add the font to a style statement like this example:

Example:

h1 { font-family: ‘Metamorphous’, Arial, serif; font-weight: 400; }

Add closed caption, subtitles and transcripts to youtube videos

I need to add some captioning to some videos. Here is the beef, from the docs at the tube.

A caption file contains both the text and information about when each line of text should be displayed.

A transcript file, on the other hand, just contains the text of what was said in the video. If the video’s in English, Spanish, Japanese or Korean, YouTube can use speech processing algorithms to determine when the words in a transcript should be displayed

In order to download auto-captions for a video, you must be the video owner. If this is true:

An .sbv file is just a text file with timecode information. You can use it in a caption tool, or you can open it with a regular text editor.

Sign into your account
On the Captions and Subtitles pane, look for the track called English: Machine Transcription. Click the Download button next to that track.
YouTube will then save a file called captions.sbv to your desktop.

To add captions or subtitles to one of your videos, you’ll need to have transcript or caption files with the captions/subtitles in them. A transcript file must be saved as a plain text file without any special characters like smartquotes or emdashes.

YouTube uses experimental speech recognition technology to provide automatic timing for your English transcript. Automatic timing creates a caption file that you can download. Short videos with good sound quality and clear spoken English synchronize best.

Here are some other things you can do to help get the best automatic timing results for your transcripts:

Identify long pauses (3 seconds or longer) or music in the transcript with a double line break.
Use double line breaks anytime you want to force a caption break.

Here are some common captioning practice that help readability:

Descriptions inside square brackets like [music] or [laughter] can help people with hearing disabilities to understand what is happening in your video.
You can also add tags like >> at the beginning of a new line to identify speakers or change of speaker.
Once you have the files, log into your YouTube account to upload them and:
1. Mouse over your username located in the upper right corner of every page.
2. Click Video Manager. You will then be directed to a page showing your uploaded videos.
3. Find the video to which you’d like to add captions/subtitles and click the down arrow located to the right of the Edit and Insight buttons. Select the Captions and Subtitles button from the drop down menu.
4. Click the Add New Captions or Transcript button on the right hand side of the page. You will be prompted to Browse for a file to upload.
5. Select a caption/subtitle or transcript file to upload. If you are uploading a transcript (no timecodes), select Transcript file, otherwise, select Caption file.
6. Select the appropriate language. If you wish, you can also enter a track name.
7. Click the Upload File button.

Creating a single-use required response interactive form

: Vote Registration Prompt

I need to make a 1 time use required interactive prompt. part of web assistant duties state compliance issue.

This will require..

content container.

Place the content into a div container. Give it a unique id, and set it’s display:none.

<div id=”myprompt” style=”display:none” >Here is my exciting and important content. It needs your response.This will interrupt your user flow until you respond.</div>

This is in mysvc.asp

external styling.

I make a custom style for the div container give it a good location, and to make it look important. Style the top, left, width, height, borders text and background to match the theme.

This is a style defined in mysvcdb.css as promptstyle.

interactive response form.

This is the content for the prompt. It is a question that needs a response, the best use for a web form, no? Make a standard web form for now. In the content container in mysvc.asp

Asp form capture logic.

This will be the logic to capture the user response to the form. you can use your flavor of server side languages. Im using classic asp here. Benjy whipped this up and i made a few changes

The file is votereg.asp

Javascript Logic

to Show and hide the content based on the user interaction.

Storage of user interaction results

So no repeat. Could use user request.cookie…dom storage … User preference database storage.

Logic to check user compliance to requirements at login.

check cookie or db storage for compliance.

Changing an objects class to create functionality and cool effects

There are some great uses for changing an objects class via script. One of them is form elements. To create a better user experience, and guide them through the form, we can change the elements based on classes to show, hide and highlight the path way for the user.

To add a class to an element:

document.getElementById("MyElement").className += " MyClass";

To remove a class from an element:

document.getElementById("MyElement").className =    document.getElementById("MyElement").className.replace       ( /(?:^|s)MyClass(?!S)/g , '' ) /* code wrapped for readability - above is all one statement */

To do that in an onclick event:

<script type="text/javascript">     function changeClass()     {         // code examples from above     } </script> ... <button onclick="changeClass()">My Button</button>

Better yet, use a framework (in this example jQuery) which allows you to do the following:

$j('#MyElement').addClass('MyClass'); $j('#MyElement').removeClass('MyClass'); $j('#MyElement').toggleClass('MyClass');

And also:

<script type="text/javascript">     function changeClass()     {         // code examples from above     }     $j(':button:contains(My Button)').click(changeClass); </script> ... <button>My Button</button>

working with checkboxes and radio buttons

Here is a good way to get the info from checkboxes. make sure to give them all the same name, just different values. Then wrap the checkboxes in a div container with an id.In this case #c_b is a div wrapped around the checkboxes and #t is the id of a text box im using to display the results.

After you have these values, of what boxes are checked, we can save the state of the checked boxes using cookies, so that the user will not have to check the boxes again when they use them…

[code]

…
$(‘#t’).val(allVals);
setCookie(“responsible_parties_choice”,allVals,”30″);
…

[/code]

To read the cookie and set the checkboxes use the code…
[code]
// look for checked box choices in cookie, then re check them
var thecheckedchoices = getCookie(“responsible_parties_choice”).split(‘,’);

for (choice in thecheckedchoices) {
//console.log(“im in there with the cookie data of ..” + thecheckedchoices[choice]);
$(“input:checkbox[value=” + thecheckedchoices[choice] + “]”).prop(‘checked’, true);
}
[/code]

Radio Buttons can be extremely tricky. First thing to remember is to group them using a “name” attribute.

Then they can be selected and manipulated as a group.

$("input[type='radio'][name='commencementattendanceoption']").on("change", function(){
alert($( this ).val())
});

Now I need to validate that one of them has been chosen.This will require some serious stuff. I need an include to validate things, to work with my content display system.

A good way to get a comma-separated list of checkbox IDs:

$( ":checkbox" )

.map(function() {

return this.id;

})

.get()

.join();

The result of this call is the string, "two,four,six,eight".

Timed Text XML File Template

Here is a file template for creating closed captioning / subtitles for flash video.