Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ARTDM 171, Week 14: Forms

5,106 views

Published on

Published in: Design
  • Be the first to comment

  • Be the first to like this

ARTDM 171, Week 14: Forms

  1. 1. ARTDM 171, Week 14: Forms Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-171/
  2. 2. Forms
  3. 3. What is a Web form? • Any interaction where data is sent from the userʼs browser • Usually sent directly to the server • Not a standard document request or a “click” • Basis of complex interactivity on the Web • Allow you to ask your users questions and receive answers
  4. 4. What is a Web form? • Forms rely on scripts to process the answers to questions o Client-side: possible to use JavaScript to provide canned feedback to users o Server side: using CGI (common gateway interface) or a script embedded in a PHP or other dynamic page.  CGI scripts are using written in Perl. o AJAX: latest trend combines client-side w/ server-side to anticipate users behaviors
  5. 5. Forms on the Web • Common uses of forms on the Web: o Site search box o Newsletter subscription o Login o Feedback form / Contact form o Shopping order forms and payment
  6. 6. Web forms in action • Search: Google • AJAX: Google Maps Add Google search to your site use Google Custom Search
  7. 7. Web forms in action • Community and Art: Miranda July, Learning to Love You More • Experimental Art: Mouchette and Mouchette.net
  8. 8. Creating a Contact Form in Dreamweaver
  9. 9. Let's create a Contact Form • This form will send data in an email message to you. • Use the PHP script supplied to process the data • Fields used in the form o name: text field that captures the user's name o from: text field that captures the email address o subject: text field for the message subject o message: textarea field for the user's message o action: hidden field that validates sending the message o submit: button that submits the form
  10. 10. A Basic Form <form action="thankyou.php" method="post" name="contact"> <input type="text" value="" name="name" id="name" /> <input type="submit" value="Send" name="submit" id="submit" /> </form>
  11. 11. PayPal
  12. 12. Adding PayPal • PayPal Integration Center • Buy Now Buttons • Shopping Cart Example of a basic storefront using PayPal: Teas by Kathleen
  13. 13. Final Projects
  14. 14. Timeline March April May Last day of class 9 16 23 30 6* 13 20 27 4 11 18 25 Strategy Present final projects Research and discovery (two days) Design Interaction design Validation Visual design Site development Prototyping (Text-only HTML) Present revisions Layout and styling (CSS) User interface dev (images and backgrounds) Production
  15. 15. Homework due May 4 • Finish working on your Contact Form and add it to your final project site • Read Metacrap: Putting the torch to seven straw-men of the meta-utopia by Cory Doctorow • Read Chapter 5: Including Images and Media in the Dreamweaver textbook • Work on your final project. This week: Add images and backgrounds
  16. 16. Thank you

×