Skip to content

Tech Concepts, Smith, 9-27-2018

Published on

Warm-Up:

  • What are the benefits of everyone working in the same media for a project? What are the drawbacks?

PGCPS Gmail Login | Student SchoolMax Login

Objective:

  • Students will gain basic understanding of code to revise and complete artistic work. (Anchor Standard 3)

Today's Agenda

  1. Guided Instruction
    1. Warm-Up Review
    2. Homework Review
      1. Write out three ideas we can use for a PART 2 of our coding unit. Be as specific as possible. (Example: "Digital portfolio of art projects" is specific, "web page" is not.)
    3. Project: Policies & Procedures Review
      • If you scored higher than a 0, you have until September 29 (2 days from today) to resubmit for a higher grade.
      • As stated in the syllabus, Zeros earned for incomplete, late, and/or nonexistent work are not eligible for resubmission.
    4. Project 3: Coding, Continued
      1. ► 25% Project includes bug-free code created by the student, rather than copy/pasted from other sources.
      2. ►25% Project contains a minimum of 25 lines of code. [Class Choice]
      3. ►25% Project includes a BEGINNING, MIDDLE, and END. [Class Choice]
      4. ►25% Project is either a 1:30- 3:00 minute song (Sonic-Pi), A 2-5 page webcomic (html) or an animation. [Class Choice]
    5. Project 2: Coding
      1. Rubric
        • ► 25% Project includes bug-free code created by the student, rather than copy/pasted from other sources.
        • ►25% Project contains a minimum of 25 lines of code. [Class Choice]
        • ►25% Web page includes 100 NON-CODE words. [Class Choice, UPDATED 9-21]
        • ►25% Project contains characters. [Class Choice]
      2. Code Review:
        1. HTML (w3schools)
          1. "Tryit Editor"
        2. <!DOCTYPE html> (Everything that follows is a web page.)
        3. <html></html> (Everything between these is HTML code.)
        4. <head></head> (Everything between these is the Header.)
        5. <title></title> (Everything between these is the Title.)
        6. <body></body> (Everything between these is what can be seen in the website.)
          1. We also learned how to change colors using some older code. We will learn a new way today.
        7. <h1></h1> (Everything between these is LARGE, bold, and on its own line.)
          1. <h2></h2> (Same, but a bit smaller.)
        8. <p></p> (Everything between these is a single paragraph).
        9. <a href="http://fouloistech.info">Linked Text</a> (Add a link to another page.)
        10. <strong></strong> (Everything between these is bold.)
        11. <em></em> (Everything between these is italic.)
        12. <tagname style="property:value;">

          HOW TO CHANGE COLORS!

          1. color (text color)
          2. background-color
          3. border (outline color)
          1. <h1 style="border:2px solid Violet; background-color:yellow; color:white;">This should be painful to read.</h1>
        13. Saving work to share:
          1. Text editor (On PC, use Notepad)
          2. Name file with .html suffix, NOT .txt suffix.
        14. <img src="imagename.suffix"> (Add image to page)
          1. align="left/right/center" (text wrap)
          2. alt="image description"
          3. width="pixelnumber" (Could also use percent.)
          4. height="pixelnumber" (Could also use percent.)
          5. border="pixelnumber"
      3. Submitting work:
        1. Use Notepad (or other text editor) to save code as index.html
        2. Upload index.html file and any images to Google Classroom
        3. On Critique Day (Monday) I will have the pages set up for each of you to view and critique.
          1. This requires ADDITIONAL WORK on my part. Projects submitted late for ANY reason will not be available for Critique Day.
  2. Independent Work
    1. Homework & Journal Checks
    2. Project Pre-Production
      1. The rubric requires characters. Include them today.
    3. Project Production & Post-Production
      1. Dependant on project scope determined by student.
  3. HOMEWORK
    1. In your journal, draw 3 website layouts that you think would reach a balance between form and function. (Think about: colors, images, content, menus)