Session 1: Today I’ll be demonstrating the optional features of the Interactive Form Project. These include:
1. Hosting the project on a live production server accessible via a public domain and url.
2. Using the reCAPTCHA API to prevent non-human interactions.
3. Fine tuning the layout, design, and functionality of your form.
reCAPTCHA is a free service to protect your website from spam and abuse. reCAPTCHA uses an advanced risk analysis engine and adaptive CAPTCHAs to keep automated software from engaging in abusive activities on your site. It does this while letting your valid users pass through with ease. reCAPTCHA offers more than just spam protection. Every time our CAPTCHAs are solved, that human effort helps digitize text, annotate images, and build machine learning datasets. This in turn helps preserve books, improve maps, and solve hard AI problems.
Relevant links:
Fun with HTML5 Forms
85 amazing HTML5 examples
Session 2: Your project proposals are due today. Please post them as PDF file on Learn@UWStout. In addition we will be have feedback and critiques on your Interactive Form projects. Please be prepared to demonstrate your form in group critiques. Finally, we will look at the requirements for the Final Web Application Design Mockups Component.
Final Web Application (Component 2 – Design Mockups)
Due: Session 2, Week 11 (5% of final project grade)
Description:
Design three mockups of a single page for in-class critiques on session 2 of week 11. Mockups resemble the final web application’s interface and layout while wireframes are simplified boxes and text. Each mockup should include layout, color scheme, typesetting, graphics, and images. The mockups may differ from each other in the following ways: try different color schemes, select different typefaces and typesetting parameters, and experiment with the layout.
Requirements:
1. Design a minimum of three mockups for critique
2. Include distinct layout, color scheme, typesetting, graphics, and images for each mockup
3. Use Photoshop, Illustrator, or HTML/CSS to design the mockups
4. Render the mockups as either web graphics (PNG, PDF, GIF, JPEG) or HTML templates
6. Upload a the documents to Learn@UWStout before class on session 1 of week 12
Points Breakdown:
The mockups constitute 5% of the grade for the Final Web Application


Since we are mixed between starting our final Web App and finishing the form project I thought I’d post a little bit on both.
This first one looks at characteristics of successful websites.
http://www.successdesigns.net/articles/entry/characteristics-of-a-good-website
This link shows some simple CSS on input buttons and radio buttons.
http://thecodeplayer.com/walkthrough/custom-animated-checkbox-inputs-using-css-iconfonts
An in-depth look at Photoshop mock-ups and ways to do them.
http://line25.com/tutorials/create-a-clean-modern-website-design-in-photoshop
Hey everyone, check out this sweet example of impress.js:
http://kenzo.com/nofishnonothing/
Learn more about impress.js here: http://bartaz.github.io/impress.js/#/big
Also, a good website for interactive design inspiration:
http://www.awwwards.com/
http://www.patatap.com/
Check out this awesome resource –> http://webfieldmanual.com/
There are so many useful tips and tricks for web design!