ARTDM 171, Week 14: Forms

5,032 views
4,969 views

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
5,032
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
















  • 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

    ×