ARTDM 171, Week 13: Forms

788 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
788
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

ARTDM 171, Week 13: Forms

  1. 1. ARTDM 171, Week 13: Forms <ul><li>Gilbert Guerrero </li></ul><ul><li>[email_address] </li></ul><ul><li>gilbertguerrero.com/blog/artdm-171/ </li></ul>
  2. 2. Forms
  3. 3. What is a Web form? <ul><li>Basis of complex interactivity on the Web </li></ul><ul><li>Allow you to ask your users questions and receive answers </li></ul><ul><li>Any interaction where data is sent from the user’s browser, usually directly to the server, other than a click (which is a standard document request) </li></ul>
  4. 4. What is a Web form? <ul><li>Forms rely on scripts to process the answers to questions </li></ul><ul><ul><li>Client-side: possible to use JavaScript to provide canned feedback to users </li></ul></ul><ul><ul><li>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. </li></ul></ul><ul><ul><li>AJAX: latest trend combines client-side w/ server-side to anticipate users behaviors </li></ul></ul>
  5. 5. Forms on the Web <ul><li>Common uses of forms on the Web: </li></ul><ul><ul><li>Site search box </li></ul></ul><ul><ul><li>Newsletter subscription </li></ul></ul><ul><ul><li>Login </li></ul></ul><ul><ul><li>Feedback form / Contact form </li></ul></ul><ul><ul><li>Shopping order forms and payment </li></ul></ul>
  6. 6. Web forms in action <ul><li>Search: Google </li></ul><ul><li>AJAX: Google Maps </li></ul><ul><li>Add Google search to your site use Google Custom Search </li></ul>
  7. 7. Web forms in action <ul><li>Community and Art: Miranda July, Learning to Love You More </li></ul><ul><li>Experimental Art: Mouchette and Mouchette.net </li></ul>
  8. 8. Creating a Contact Form in Dreamweaver
  9. 9. Let's create a Contact Form <ul><li>This form will send data in an email message to you. </li></ul><ul><li>Use the PHP script supplied to process the data </li></ul><ul><li>Fields used in the form </li></ul><ul><ul><li>name: text field that captures the user's name </li></ul></ul><ul><ul><li>from: text field that captures the email address </li></ul></ul><ul><ul><li>subject: text field for the message subject </li></ul></ul><ul><ul><li>message: textarea field for the user's message </li></ul></ul><ul><ul><li>action: hidden field that validates sending the message </li></ul></ul><ul><ul><li>submit: button that submits the form </li></ul></ul>
  10. 10. A Basic Form <ul><li>< form action=&quot;thankyou.php&quot; method=&quot;post&quot; name=&quot;contact&quot;> </li></ul><ul><li><input type=&quot;text&quot; value=&quot;&quot; name=&quot;name&quot; id=&quot;name&quot; /> </li></ul><ul><li><input type=&quot;submit&quot; value=&quot;Send&quot; name=&quot;submit&quot; id=&quot;submit&quot; /> </form> </li></ul>
  11. 11. PayPal
  12. 12. Adding PayPal <ul><li>PayPal Integration Center </li></ul><ul><li>Buy Now Buttons </li></ul><ul><li>Shopping Cart </li></ul><ul><li>Example of a basic storefront using PayPal: Teas by Kathleen </li></ul>
  13. 13. Final Projects
  14. 14. Timeline December 1 8 15 24 17 10 3 27 20 13 6 29 November October Last day of class Present revisions Present final projects (two days) Page production (add content and images) Site development (html coding) Design Strategy Usability Testing
  15. 15. Homework due Nov 17 <ul><li>Read the chapter on Media </li></ul><ul><li>Complete your contact form </li></ul><ul><ul><li>Must include the header and footer from your website </li></ul></ul><ul><li>Next week: Inserting Multimedia </li></ul>
  16. 16. Thank you

×