GD 66 Class 12 + 13

Class 12 Topics: Final Design Comps due, Take-Home Quiz 4, Responsive Forms

Class 13 Topics: Final Exam Review, Final Project Presentations, Resources, Testing, lab time.

Announcements

  • The Final Exam will be taken in class on Tuesday, May 26.
    Please note there is no makeup test for this exam.
  • Final Presentations will start at the beginning of class Tuesday, June 9. Please have your project uploaded to the class server before class. You must attend class and present your project in order to receive your grade.

Fall 2015

  • Please plan on taking Web Design 3 (GrDes 67) in Fall 2015. The class is on Thursday evening from 6:30pm – 9:30pm. I hope to see you there!
  • I recommend all designers take Motion Graphics (GrDes 71). I highly suggest taking the Monday evening class offered in Fall. (This is what Motion Graphics is.)
  • Encourage your fellow classmates to take Web 1 (GrDes 65) the first semester or second semester (at latest) so they have time to complete the 3 Web Design classes we offer. (GrDes 65, GrDes 66, GrDes 67)

Class 12


Take-Home Quiz 4

Please complete the take-home quiz before our next class on Tuesday, May 19.

Take Quiz 4


Due Dates

Tuesday, May 12: Final Design Comps due. Start HTML5/CSS
Tuesday, May 19: Keep working on HTML5/CSS
Tuesday, May 26: Integrate Responsive elements: Menu, Form, jQuery Slideshow
Tuesday, June 2: In-class lab time
Tuesday, June 9: Final Project Due

Upload your final project to your “lastname_firstname_final” folder on or before Tuesday, June 9.


HTML Forms Demo

Demo:
http://gd66.smcgrdes.com/html_demos/Responsive_Form/final_web/

Super Simple Responsive Forms Documentation:
http://www.siteart.co.uk/super-simple-responsive-forms

Download the starter files here:
http://gd66.smcgrdes.com/html_demos/html5-two-col-responsive-slide.zip

Step 1

Create the form

http://www.everythingaboutweb.com/basic-html-forms/

The form tag

  • action: This attribute defines the server-side script that will process the data after it has been submitted (see the “Submitting the data” section later on), for example validating the data or storing it in a database.
  • method: Defines how the data will be submitted to the server-side script— the two possible values are post and get.

The “post” method submits post data inside the header of the request that is sent to the server when the data is submitted. (Typically use this most of the time)

The “get” method” requests a representation of the specified resource. Note that GET should not be used for operations that cause side-effects, such as using it for taking actions in web applications. One reason for this is that GET may be used arbitrarily by robots or crawlers, which should not need to consider the side effects that a request should cause.

Add your form elements

Single line text inputs

The most common form element you’ll use is the humble single line text input:

The <input> element can take many different values for its type attribute, which can turn it into many different things; a value of text turns it into a single line text input.

The others are as follows:

  • name: This specifies the identifying name of the data entered into this form element after the form is submitted. It will be used during processing of the data, for example when inserting it into a database on the server.
  • value: Specifies a default value for the form element to contain once the form first loads in the browser. I have left mine blank, as I don’t want any default values in this case.

Add labels:


Step 2

Add structure


Step 3

Add checkbox and more structure

 


Step 4

Add CSS to style.css


Class 13


Final Exam Review

The questions below are taken from our Quizzes 1-4. There will be ten questions on the Final Exam. Please be prepared to answer any of the below questions.

  1. HTML code to insert an image into the body of an HTML page
  2. HTML code to add a link to text
  3. HTML code at add an email link to text
  4. Tags for inserting a paragraph, line breaks, unordered lists, ordered lists, bold text, italic text, headings.
  5. When designing for the Web, why is it important to know your target audience?
  6. What is a design brief?
  7. What is a site map?
  8. What is a persona?
  9. What is a competitive analysis?
  10. What is a wireframe?
  11. What are the three major CSS Selector types?
  12. What is the anatomy of a CSS rule?
  13. What are the three core ingredients to create a responsive design?
  14. To create a responsive web design, what change do you make to the font sizes?
  15. What code do you add to the CSS to create flexible images?
  16. To create a responsive web design, what change do you make to the width of the divs?
  17. What does “Mobile First” mean?
  18. To stack your divs on top of one another, what do you change the properties to in the CSS?
  19. Name four of the six text properties outlined in the class notes.
  20. To calculate the overall width of a box, including all padding, borders and margins, what formula would you use?
  21. Name 4 of the 5 link states when styling links.
  22. What are the four web font formats?
  23. What are the two major limitations of using any font on the web?
  24. HTML deals with structure, CSS deals with presentation, what does Javascript deal with?
  25. What is jQuery?

Final Project Presentations

Presentations are an opportunity to receive feedback from me and your peers. Be prepared to talk about your design process and what choices you’ve made with your design. Act like we’re the client and tell us things important when presenting to a client:

  • Prepare to speak for 5 minutes about your project.
  • Show us your final project website posted on the class server.
  • Who is the target audience? How does your design meet the needs of the target audience? In what way does your design appeal to this audience?
  • What are the needs of the client? Talk about the needs and objectives and how your design serves these needs.
  • In what way did you think about Mobile First? How did designing for the mobile user affect your design?
  • Talk about the specifics of your design: Why did you pick the color palette for the website? How did you organize the content and design the navigation?
  • Learning to talk about your designs is one of the most important skills to develop during your time in school! Be sure to stand up tall and speak loudly so we can hear you in the back of the room.

While critiquing your peers’ work remember to be respectful and constructive. We’re all here to learn so give thoughtful, useful feedback.


Resource: Restaurant Menus

How to Create An Online Menu Your Customers Will Love
http://restaurantengine.com/restaurant-online-menu/

Question About HTML for Restaurant Menus
http://webstandardssherpa.com/ask-the-sherpas/html-for-restaurant-menus


Testing website on mobile devices

Be sure to test your final project as soon as possible. I suggest testing it while you’re building the home page. To test it, upload the files to your student folder on our class server and view it in a browser on a mobile device (preferably a smartphone) in addition to a desktop or laptop computer.

 

Leave a comment