A Few Project Examples

Search Auto Suggestion

Overview: Auto suggestion as the user types one-character-at-time is awesome and done in light speed. Useful and fast is a sweet combination to website navigation. Input gets immediate results, and thankfully is 100% correct, ready for their selection.

Technically: Behind the scenes is a speedy over-the-web message sent to find matches to the input text. This is a self populating ajax asynchronous event resulting in a SQL call to the backend database, which occurs with every single typed character. Optionally, the event can be pre populated with an SQL select to put the list into the html document, such as pre-populated list specific to this city for example. Users love this big time. Tools used include: JQuery UI, Javascript, CSS, HTML5, and MySQL.

Pick a Disney Destination

Cast Your Vote Tool

Overview: People love to cast their vote! Let your community voice their opinion and vote for products, articles, or any item's quality or worth. All business should value feedback, plus it lets users feel part of the product or item being endorsed. This builds brand loyalty.

Technically: Each vote taken needs to get stored, and results tabulated. The vote submitted starts a over-the-web message sent (asynchronous ajax event) to the server-side receiving host function. In the end, there is an update to the database table setup to hold the results. This example is using server-side coldfusion and mysql database.

South Beach Marriott

161 Ocean Drive
Miami Beach Florida
305-536-7700
More: marriott.com
Rating: 4.40 Excellent

Button Group Example

Overview: Quick access to accurate information is the goal. Horizontal button groups are very useful to provide menu listings with headings and sub-links lists below. Users can find what they are looking for, without a large amount of viewport space.

Technically: HTML5, Jquery, and CSS provide the perfect industry wide selected solution. Fast implementation via Bootstrap is a big plus.

Progress Bar

Overview: A useful aid to users is showing the progress of save-to-file downloads or uploading of image or video files. Showing the status of downloads or uploads reduces users dissatisfaction while waiting for a few seconds for the process to complete and encourages repeat usage.

Technically: Jquery, CSS, and HTML5 work together, but Jquery event handling does the core task with timing and display.

0%

Status: waiting

Navigational Pagination Example

Overview: Multiple page articles, menus, are all connected together to ease user navigation. Every single page can have a different localized menu list if desired, rather than repeating it in mass. The menus group related information by location, activity, age focus, etc.

Technically: Twitter Bootstrap provides a nice framework to get this done efficiently, augmented by HTML5, CSS, Javascript, and Jquery.

Drop List Navigation

Overview: Mixing in well designed navigational pieces that are targeted to the page shown are hugely helpful to keep users happy and enjoying your website. Happy users can find info quickly. The dropdown style menu finder can use headers inside the dropdown menu, plus sub header target pages. Grouping info helps people understand what they are looking at and results in higher website retention.

Technically: A front-end framework such as bootstrap saves money by delivering quick coding to put this together. Each menu can be dynamically created based upon things like the cityid, classid, and activityid for example.

Count Occurrences

Overview: There are times when authors, writers, and search engine optimization specialists want to know the number of occurrences of important words. Key word density can be calculated and listed for analysis.

Technically: This sample uses javascript and regular expressions to handle the calculations behind the scenes.

Word to check:
0

Status: waiting

Randomize Sentences

Overview: Some situations require the ability to randomize a list of items. For instance, to randomize test questions delivered to students, so students sitting next to each other cannot easily be tempted to look at another's answer.

Technically: Javascipt and Regular Expressions are the key tools to make this happen. Changes can be made to match specific business needs.

Status: waiting

Automatic Sentence Cleanse

Overview: Text input can be automatically cleaned up in all sorts of ways, for example, making sure the first character is capitalized for all sentences. Input users do not have to worry about sentence starting capitalization at all. Other cleanse options can be added such as: no repeated words, duplicate spaces, double periods, special word replacements, automatic capitalization for all key words, auto-linking to internal webpages, spell checking, and more.

Technically: A series of regular expressions will handle a myriad of auto correction situations with text of any size input.

Status: waiting

Word Count

Overview: Word counting is helpful to limit text size on input forms and to protect against spam text. Often contests and other written form submissions to have minimum and maximum limits. This examples clearly shows the user the current word count as input is typed.

Technically: Jquery is the solution of choice for selecting text, passing the information off to a javascript function, and the results get repopulated by the jquery code library.

0

Status: waiting

Word Count Maximum 100

Cleanup Address

Overview: It is important to store all address information in a consistent format in your business database. If not, searching results will have mistakes and missed records.

Technically: By scrubbing all address input fields prior to insert into the backend sql database, the data is always in the same format for improved search accuracy and readability. This tool deals with title case capitalization, repetitive extra spaces, bad input characters, and all sorts of abbreviations like: cir, ave, e, ne, se, sw, trl, dr, and many more. Regular expressions are the tools of choice to use inside a javascript function, that is where the magic occurs.

Address Input:

Status: waiting

Wide List Navigation

Overview: On pages that are primarily about a subject or is an introduction to a series of concepts, this is a good tool of choice. It is another display style useful as a navigational aid, with descriptive text to help users make the right selection. List groups are a flexible component for displaying not only simple lists of elements, but complex ones with custom content.

Technically: All of the tools needed to make this happen are part of the open and free code of the web. Any of the core front-end frameworks do a similar job, and it is perfect for the HTML5, CSS, Bootstrap, and Jquery mix.

Dynamic Vacation Planning Carousel

Overview: The benefits of engaging content adds up to higher quality of user satisfaction. Being able to quickly flip through more content without a submit to a new page is terrific.

Technically: Taking advantage of grid frameworks works, so all is web responsive to whatever device the users is using. In this situation the bootstrap grid row holds all in one, then divided by another grid row inside. It means there are squares of information that spread-out on a pc-monitor and stack as the device size decreases.

Login to Secured Webpage

Overview: Certain pages require the user to identify themselves prior to seeing the content. This is true for subscription paid content, private messages, account balances, etc. Loading a modal window when needed is a technique for interface elements which are not necessary until the time needed on the page.

Technically: Bootstrap modal windows are better than creating new windows in javascript because everything is displayed in the same window using HTML markup loaded when needed from another page source. This is better than hidden content as the page loads faster and does not preload the duplicate content on all pages, which is better for search engine optimization. Upon submission, an ajax asynchronous event SQL call to the backend database will validate the user, and route the user as appropriately.

Newsletter Sign-up

Overview: Validating email addresses is important, as users will make errors and we do not want errors put into the database. Sending email to invalid addresses negatively affects your email marketing campaign. Emails sent are monitored by Gmail, Yahoo, and other ISPs, and sending invalid emails can lower your quality rating. The lower your quality rating, the more of your email marketing campaign which will not-get to the target's inbox, and not get filtered out as junk mail. Additionally, a response email will validate the email address again, to ensure that it is a genuine interested customer lead.

Technically: Regular expressions can handle the validation of input email as part of a javascript function. It will make sure the prefix, @ at-sign, and suffix are acceptable. The response email will ensure the mailbox is genuine, and the users has accepted your offer to sign-up for newsletter communication going forward.

Menu Panel Slider

Overview: There are many situations when it is excellent to show on demand side content. The side content will show on events in situations such as menus, notifications, or display user profile information. Quick access to content is the key, without a submit to a new page. This gives the user options while avoiding a page refresh. Using a panel to slide in from the left or right works well and is a sensible solution that users enjoy.

Technically: Moving the panel in from the right is good so you don't need to worry about users not being able to see your important content. This technique is quick to implement and can be easily animated using CSS3 transitions. This is an example of simple page entry with a horizontal sliding panel on the far right. The final magic of the slide happens with jQuery, plus you can do the same thing on the left if that is better for your particular situation.

Change Links to Text

Overview: Comments submitted by your user community often will contain links within the text, and some those links can be to undesirable websites. Because spam links are so often received, removing the links is a decision that most want for input comment text. Scrubbing the text prior to posting for links, misspelling, and bad words is advisable in many situation. This examples shows the removal of the links, while leaving the anchor text words displayed.

Technically: Regular expressions work well for link removal and word replacements.

There is a primetime kayak rental place at mile marker 104. That is Blackwater Sound and next to the Caribbean Restaurant, just south of JJ's Big Chill Restaurant. Do checkout the coolest Shopping area in the Florida Keys. For sure, everyone will want to take a photograph there.

Status: waiting

Add Links to Text

Overview: Automatically adding internal links to text posted on your website saves a lot of time. The process of typing in hyper links is too time consuming and error prone by hand. Writers can just write-up content and links will be added based upon pre-populated database tables which hold items like article titles and filenames for example.

Technically: Each time an article gets submitted for posting, this regular expression looping function is set to run. Those key-words, titles, or phrases will get auto-linked for display on the customer facing websites.

The Old Key West Resort was great. It was a special trip and we sure loved the Magic Kingdom Tours. Free transportation was sweet and we would jump on at the Boardwalk Bus Depot just a short walk from the hotel room.

Status: waiting