Upgrading Legacy Web Forms with my Content Display Wizard plugin.

Here is an example of how  my plugin makes it easy for the user to navigate and successfully submit the data. And for us weary developers, the best part is the AUTOMATION. My plugin will provide content navigation, client side validation and handle the submission of the data via ajax to my api.

At Skagit Valley College, I plug my wizard into a legacy form and it’s transformed into a slick responsive paperless web application for data collection. There was an old  Hall of Fame nomination form that had been moved into the cms of our new responsive version of the SVC site…

 

After simply including my Content Display Wizard Plugin, its now a slick paperless web application for data collection. Go check it out, go through the form to view the summary and I’m sure you will love the user experience.

Dee Dubs Has A Solution To Intellectual Property Protection

 

The Distortion of Sharing

In the physical world, if you wanted to come over and listen to music  with me, you don’t have to buy a copy of the music.In fact, I could even give you the cds and movies that I bought, and you could take them home and use them whenever you want. But then, I wouldn’t have it. And that is where the term sharing has become distorted.  If I give the media to you, but I still have a copy that  moves beyond sharing to piracy. This has a huge impact in economics as well, according to the Recording Industry Association of America, with the music industry losing half of its profits in just one year. The two-chamber or “bicameral” setup of Congress operating on a standard envisioned in 1787,  is currently debating on this topic and how to combat this problem of online piracy and intellectual property theft. They have drafted a bill with  two sections: “Combating Online Piracy” and “Additional Enhancements to Combat Intellectual Property Theft.” The “Stop Online Piracy Act” (SOPA)  is still being debated in the House, with what seems like a large battle ahead of them.  This bill, as currently written, would give the U.S. Attorney General the power of disabling the  DNS (domain name server) records that point to suspect or illegal sites. A large number of security experts believe that the bill could disrupt the underlying architecture of the Internet. The Protect  Intellectual Property Act (PIPA).is SOPA’s Senate companion bill that is still in debate  in the chamber. is intended to combat “rogue” websites operated oversea but offers a wide spread power that will  affect people worldwide. This bill  has drawn so much opposition that most senators have withdrawn support and news sources such as Techspot.com are reporting that PIPPA has collapsed. I am opposed to the bills as written right now due to the ambiguity of the power and its usage. The adverse effects on the backbones of the Internet architecture are also a major concern. I believe the bills need re working and also software developers need to get more innovative when it comes to intellectual property rights and security. Come on application developers and investors, all these apps for whip noises and beer mugs when we need a good way to secure movies music and videos.

DeeDubs Has A Solution For Net Neutrality

Donald Denney
CS 101 Essay 2
3/18/2012

According to research I read at the New York Times, Net Neutrality is a way of classifying Internet access and the  web in its current state. They say that the entire Internet must  available to anyone with the desire to access it, on an equal basis. This is currently a hot topic in the media because of the legal battle between citizens and the large corporations backed by billions of dollars. The government is forced to deal with large corporations  who are spending hundreds of millions of dollars lobbying Congress to get rid of net neutrality. One problem lies with the type of information that is available. There is always a certain age for this movie or that game. Its a way of feeling that we are helping people who can’t use their own judgement about what information to access. With identity theft, child porn and sexual predators rampant, the way the Internet is presented to an end user must be monitored and distributed to the user as seen fit by some kind of standards. Opposition say  to leave it to the family to monitor and secure their families internet access, but much like guns, booze, drugs and porn, there must be some kind of organized prevention continuously looking after the greater good. Perhaps new standards of surfing the web with credentials of some kind to verify age and identity could be a valuable tool for law enforcement, parents and educators. On the other hand, Net Neutrality is essential when it comes to large corporations limiting the flow of data, and access speeds of all sites but their own, for power and profit. An article on Free Press.com can be summarized by saying that reliable and high speed access to  the free internet is the only way for developers all over the world to continue to contribute to new technology , software, and applications .  The consequences of losing Net Neutrality would be devastating.Large corporations would take over, choices would be eliminated and life would be driven by decisions made in a corporate boardroom. We must continue to fight for and support the Internet Freedom Preservation Act of 2009 to  safeguard the future of the open Internet and protect Internet users from discrimination online.

Technical Instructions: How to use my Form Content Display Wizard

So, to use my plugin to any form or content,

Separate content chunks:
Wrap the content in div containers with unique ids begining with “step_xxx”  where xxx should be a detailed way to identify the content such as “step_intro” and  “step_personal_info”

If the path is non branching, the plugin will create buttons for “back” and “next” named “stepDownButton” and “stepUpButton” . It will look for the second to last step and put a submit, and the last step is the confirmation. To create a custom path, branch, or skip a step, just create a button named “stepDownButton” and “stepUpButton” . Give the button an onclick of stepUp(‘stepname’) or stepDown(‘stepname’) to make the button skip to a certain step.

Table of contents
The plugin will use the first element inside the step as description for the table of contents. You can use the attribute stepdesc on the step_xxx element as a custom title for the toc. The toc will be appended to the first step unless you make a custom toc using a container with id of “tableofcontents”. This can be disabled by …..

Form elements and Validation
To provide “empty field” validation to form elements in a step, just add the class “required” to the element. Place the class “email” to validate an email address on one input element. You can add class “match” to two elements in a step and they will have to match each other. Give the elements a unique ID and a good name attribute, and the plugin will create placeholders for the text input elements from the name.
NOTE: it seems like the name attribute is the perfect place to put a readable descriptive title that could be used in creating the labels, and for  summary display. NOTE: it seems like moving to the new html5 text inputs for validation such as email tel, then if input type = email, wouldn’t need a class selector.Just a thought for moving forward with

Data summary
In the second to last step, the plugin will set the the “NEXT” button onclick to stepUp(‘submit’);  The plugin will add a summary of the data the user entered so they may go back and make any changes. You may choose a custom display of the summary by putting an element with id “formsummaryarea” into this step. The plugin will omit any empty or hidden fields from the summary, and you can put class “nosummary” to omit any other items from the summary.

Submit and final confirm
In the final step, you should place your  final confirmation text there. This will tell the user the results of their data submit, success or error.  When user is ready, the script will submit the form data, and move to the final confirmation.

 

 

Themeing the elements

To theme the elements, just add classes to items in the ui view using jquery :

This will add a Panel effect to the divs—
$(‘div[id^=”step_”]’).addClass(“softblackgradient blackbottomrightboxshadow mediumallaroundpadding”);

The buttons wont work to style this way cause they aren’t in dom yet. To theme the buttons, you need to  set these global variables before you call to include the plugin.:

I feel that the “Begin”  button should look very different from the Next and Back buttons:
beginbuttonclass = “button roundedcorners success mediumallaroundpadding”

Here is to style the step up and step down buttons:
stepupbuttonclass=”button oval success smallallaroundpadding”
stepdownbuttonclass=”button oval alert smallallaroundpadding”

The “Submit” button needs to also look very different from the step up and down buttons.
style it like this: submitbuttonclass=”button roundedcorners mediumallaroundpadding success”

 

If you have put in custom buttons to go to non linear paths, make sure to still give the the names of stepUpButton and stepDownButton. Then you can select and style them as well using the jquery selector.

Theres tableofcontents to layout the toc, and  highlightstep to control the highlighted step. This is proving very difficult to get out of the plugin, since the toc relies on the scripts. There are classes yellowhighlight, and  mediumtext that will need to be declared in the ui view that is using the plugin.

Web Form Security Practices

We have had a lot of attacks to our web forms here at SVC. I am the paperless applications developer, so the task of keeping them safe and secure falls into my daily operations. An un secure form can let an attacker do many things to ruin someones day, such as sending unsolicited emails to all the staff and students. Some of the common practices to keep the “bots” from breaking into a web form are:

CAPTCHA
This technique provides the user with a series of image “keys”  that they must “unlock” before they can submit the web form. This is a  good way to slow down the bots, but since they don’t get tired, and can hammer away at the form many times each second, they can eventually bypass this technique. Another problem with captcha, and a very important one, is regarding the user experience. Some captchas are impossible to read, and take several tries for a normal user to get correct. This can really damper the user experience and create a situation where the user will just leave instead of taking the time to keep trying to unlock the captcha keys. As stated by the w3, “This type of visual and textual verification comes at a huge price to users who are blind, visually impaired or dyslexic. Naturally, this image has no text equivalent accompanying it, as that would make it a giveaway to computerized systems. In many cases, these systems make it impossible for users with certain disabilities to create accounts, write comments, or make purchases on these sites, that is, CAPTCHAs fail to properly recognize users with disabilities as human.”

So, what else can I do to help keep the bots from submitting forms?

1: Try to make sure that the form is submitted from the form page, because the bots usually submit directly to the form action. Put some kind of trigger in the form submit actions that look for a referring address or a session variable.

In classic ASP we have the Request.ServerVariables collection that can get some important information, and if the form data has not come from the form page, we know its a bot, and can secretly send a security alert to the admin, while not letting the bot know its been busted.

Request.ServerVariables("URL"), SCRIPT_NAME, and PATH_INFO

should all contain the form’s address, and should show that the form was submitted from the proper location.

Request.ServerVariables("SERVER_NAME")

should be checked for the proper domain, indicating whether the form was properly posted from my server. I could create an include to be used before each form submission to check for coming from my server.

These could be put into hidden fields and submitted with the form, then checked for validity before processing and submitting the form. Also a session variable might be a good way to track these from form submit to data capture.

In the form capture logic, we could look for Request.ServerVariables(“HTTP_REFERER”) to ensure that the data has come from our form page.

So, lets try some of this junk and see if it helps out.
First, lets set a session of “formuser” with a value of Request.ServerVariables(“URL”) when the user accesses the form, and then check for that session in the form submit logic. If there is no session, then this data did not come from our form.