Week 13
11/20

From Content Management Systems like WordPress, to CSS systems like Twitter’s Bootstrap, to web page applications, like Adobe to Artificial Intelligence, there are a lot of ways to build a website, The basis of most professional websites is a CMS. We will take a look at how a WordPress template pulls together different PHP modules into a single HTML page, and how the CSS controls the look of the site. Activity: Modify a WordPress template, using it as the basis for our own design. Activity: 15 minutes will be taken to complete on-line student evaluations. Activity: In-class final Workshop #3.

Homework

1) For class: Create a form to collect user information for your site. 2) Write up the web site you reviewed and hand that to the person whose site you reviewed and to me. Read: chapter 16. 3) For final: Use the feedback from the peer review to finish your website. Due: The following week.

Materials

Additional materials for this unit can be found by following these links:

• Forms
• Peer Review
• Homework

Goal

The goal of this unit is to:

• Be able to incorporate forms into the final website.
• Understand how to critically review web site design and execution.
• Have your web site reviewed by a peer.
• Critique and review a peer’s web site.
• Have me review your web site.

Outcomes

At the end of this unit, students will have:

• Learned how to construct forms in HTML.
• Activated forms on the server side using a PHP script.
• Implemented forms on their own website.
• To have been a user and test a peer’s web site
• Critiqued and reviewed that website.
• Had their web site critiqued and reviewed.
• Used the feedback to finish web site.

Step-by-Step

News and External Resources

Sources of information that will enrich your knowledge about web design and will help you to stay current:

1. Opera Developer Blog
2. Safari Developer Blog
3. Mozilla Hacs

There are, of course, many more resources but Safari, Firefox and Opera are the standards compliant browsers that have carried web forward. Microsoft is also becoming a player but all of you use Macs.

Talking Points

LYNDA.COM is available to all Newschool students by logging in, going to the library page, clicking on databases and search for lynda.com. You will have to sign up and activate an account but this will will give you access to both the video and the supplementary exercise files.

LYNDA.COM video Series: Validating and Processing Forms with JavaScript and PHP

Validating web forms is a critical skill for any web developer, ensuring that the data that’s submitted is complete, accurate, and not malicious before it’s sent off to the server. Join author Ray Villalobos in this course as he shows how to validate input from site visitors with HTML5, JavaScript, and jQuery and then process the data with PHP. Plus, learn how to email form data and save it in a MySQL database so that it’s ready for other applications.

Assignment Links

Links that I expect to be up and the end of the semester:

Example of landing page from a previous semester.

Week 2

1. Assignment 1 (5 pages marked up)
   

   Week 3

2. Index.html landing page— these links and a picture next to your name.
3. Worksheet: behind the scenes on creative process.
4. NY Times Wireframe
5. Portfolio Photoshop Comp
   

   Week 4

6. Portfolio exhibiting the CSS selections
   

   Week 5

7. Portfolio Photoshop comp to HTML/CSS.
   

   Week 6

8. Portfolio: rough, including SEO, Google Analytics and Styled Navigation
   

   Week 7

9. Midterm Quiz
10. Midterm: Portfolio (can be the same link as week 6)
    

    Week 8

11. Typography Poster
12. Final Worksheet with topic
    

    Week 9

13. Responsive Redesign of Portfolio
    

    Week 10

14. CSS3 Collateral ( and post the exercise you did in class)
    

    Week 11

15. CSS3 Animatics (and post the exercise you did in class)
    

    Week 12

16. Final: Rough
    

    Week 12

17. Multimedia Demonstration
    

    Week 13

18. Final: Modular Navigation
    

    Week 14

19. Final: User Testing
    

    Week 14

20. Final: Peer Review
    

    Week 14

21. Forms
    

    Week 15

22. WordPress CMS
    

    Week 15

23. Link to Final

    The final website sells something. It does not have to be lots of pages but the quality has to be ready for public scrutiny. It should have many of the topics we covered, like CSS3, Multimedia, PHP, forms media queries, etc.

Definitions

These are the terms that participants should be familiar with during this unit:

Peer review is an important life skill. Do it effectively and with tact, be positive and insightful and help the person see things about their site that they did not catch, from effective design and user experience point of view to mistakes or better solutions to implementing code.

Be Constructive and Instructive

Be positive, let your partner know what you liked. Praise, comment, and correct in that order. Make positive comments about the design, its execution and overall effectiveness of the site before explaining what does not meet expectations. Look at the code to see if it is properly annotated, well organized and valid. You will run their code through validator (and css validator. I expect that the site was already valid HTM and CSS. If not, it should be by the time you are finished.

Instruct if your partner needs to understand things that you are aware of and they are not. You can help them grow in the same way that you grew this semester. Sharing is caring, and it is always good to spread the love. You really know your stuff when you can teach it!

Critical Review Examples

If you are in need of an example please check out Web Standards Sherpa, a website dedicated to constructive criticism, to highlight standards compliant solution that solve real world problems. You can see articles that review the headlines of the New York Times and there are many others, including a critique of their own site.

The goal of WebStandardsSherpa.com is to provide web professionals the opportunity to receive feedback, glean advice and learn best practices from experts in the field to help improve the quality of their own work. It’s very instructive to see professional and pedagogically useful critique at work.

Reacting to Criticism

You do not have to incorporate your classmate’s suggestions. Trust your own judgement about your design, determine which issues are most important, though pay attention to comments if they are made by more than one peer, and get another opinion if you aren’t sure about something.

Forms are vital tools for collecting information from users, such as their name, email address, opinions, etc. A form will take input from the user and may store that data into a file, place an order, gather user statistics, register the person or subscribe them to a newsletter.

HTML

The form itself is created in HTML, and starts with the <form>element and ends when that element closes. All the form elements are within the form element, mostly consisting of various input elements.

The input element changes according to its attributes. If there are no attributes, it provides a one line text field:

HTML Code:

<form>
	<input>
</form>

Result:

Attributes

You add the type="text" or type="submit" attributes to the <input> tag to specify if it is text or a submit button. Add a name="name" attribute to reference the form element when it is sent. The size attribute sets the width, measured in blank spaces, and the number of characters can be limited using the maxlength="" attribute.

The submit button is created by using the input tag with a type attribute set to submit. The value="Send" attribute provides the text for the button, so the value send will label the submit button as “send”. Pressing the button engages the <form> action.

There has to be a mechanism for the form to send the information it collects. The <form> element contains a method attribute method="post" that is usually set to post. It can also be set to get, which appends the form information to the URL.

The <form> also has an action attribute action="url.php", which specifies the URL the data is sent to. In this example, it is set to use the email client with the “mailto:” command.

HTML Code:

<form method="post" action="mailto:name@address.com">
	Name: <input type="text" size="30" maxlength="60" name="name"> <br />
	<input type="submit" value="Send"> 
</form>

Result:

Filling out your name and sending it will open up your email client, and create an email addressed to name@address.com. and the body of the email contains whatever name you’ve entered. This paring up of the name of the form element with the information entered needs to happen for each form element that gets sent.

Radio Buttons

Of the different types of input, the type=radio allows for only one choice out of a number of options. This is accomplished by using the same name for each of the options, so that only one can be chosen. Each option has its own value however, which is sent when that option is selected.

HTML Code:

<input type="radio" name="color" value="red"> Red  
<input type="radio" name="color" value="green"> Green  
<input type="radio" name="color" value="blue"> Blue  

Result:

Check Boxes

Check boxes are similar to radio buttons but its possible to click on more than one option.

HTML Code:

<input type="checkbox" name="color" value="cyan"> C 
<input type="checkbox" name="color" value="magenta"> M 
<input type="checkbox" name="color" value="yellow"> Y 
<input type="checkbox" name="color" value="black"> K 

Result:

Drop Down Lists

Another way to present the choices is as a drop down menu, which are especially good when there are lots of options. The drop down list is created by the <select> with each choice enclosed by an option tag.

HTML Code:

<select name="shade">
<option>white</option> 
<option>light grey</option>
<option>grey</option>
<option>dark grey</option>
<option>black</option>
</select>

Result:

HTML Text Area

All of the input fields have been single lines up to this point. The textarea provides a larger area to enter text, specified in rows and columns. A row is one line of text high while column unit is a character wide. Another setting is the wrap, which can be either virtual, which wraps the words for the person entering the text, but the text is sent without returns, or, physical, where the text is sent wrapped, just as it appears in the text area. You can also turn text wrap off.

HTML Code:

<textarea rows="5" cols="80" wrap="physical" name="comments">
Enter Comments Here:
</textarea>

Result:

If you enter text and press the send button, you can see that the words are concatenated (meaning added together) with plus signs and because the wrap is physical, the return is represented by the code: %0D%0A.

PHP script

Thus far the actions for all of these examples has been the “mailto:” which sent the text to the email client. Sending an email with PHP is easy enough. All you need is the PHP mail() function:

mail("recipient@domain.com", "This is the message subject", "This is the message body");

It gets more complicated when you need to connect up and receive the information, to add security measures, verify the form entry, and so on. Most hosting services have an email script that you can use, and all you need to do is send the form to that script in the action="email-script.php" attribute.

Setting Up Your Form

There are a lot of PHP email scripts on the web, and Free Contact Form is one that is simple and easy to set up. It has all the parts you need. See the demo.

1. These instructions are for the first version of this script: Download the package.
2. installation.txt contains basic instructions:
3. METHOD 1 (Automated)
   1. Upload all files to your website.
   2. In your browser, open the file freecontactforminstall.php and install.
4. METHOD 2 (Manual)
   1. Create the file ‘freecontactformsettings.php’ using a code/plain text Editor.
   2. Insert the following code into this file :

      <?php
      
      $email_to = "youremailaddress@yourdomain.com"; // your email address
      $email_subject = "Contact Form Message"; // email subject line
      $thankyou = "thankyou.htm"; // thank you page
      
      // if you update the question on the form -
      // you need to update the questions answer below
      $antispam_answer = "25";
      ?>
      

   3. Enter your email address in place of youremailaddress@yourdomain.com
   4. Change the email subject (if you like)
   5. Change your thank you page reference (if you like)
   6. Save the file.
   7. Copy ALL files onto your website using an FTP program
5. Test it out. The thank you page has been redirected with the return button bringing you back here.

Alternatives

You need not develop your own php file if you use Form Spree. This allows you to go beyond the options provided for in the php script.

Setting it up is easy and free. Here’s how: You don’t even have to register.

1. Setup the HTML form

   Change your form’s action attribute to the action input given below. Replace “your@email.com” with your own email.

   <input type=”text” value=”http://formspree.io/your@email.com” />

2. Submit the form and confirm your email address.

   Go to your website and submit the form once. This will send you an email asking to confirm your email address, so that no one can start sending you spam from random websites.

3. All set, receive emails

   From now on, when someone submits that form, we’ll forward you the data as email.

HTML5 Forms

Before HTML5, forms had to be carefully vetted with JavaScript to make sure that the information the user input was fundamentally correct, like an email address actually had the form of an email address, and a URL actually had the form of a URL. With HTML5 greatly enhanced forms support, this can be taken care of by the browser. Though there are still some browser compatibility problems, the time is coming when form checking is built right in.