Week 4

02-17-2016

Goal: Dive into more HTML

• Create https://www.users.miamioh.edu/UniqueID/IMS222/WebPage04.htm
• Review Persona.htm (due 02-25-2016 by 5pm)

• Discuss wireframes, mock-ups, and prototypes
• Kirk's sample from in class
• Discuss files, tips, and tricks
  1. avoid using spaces in file names and folders
  2. create a LearningHTML.htm in your UDS ( https://kirkhopkins.com/IMS/IMS222/LearningHTML.htm )
  3. General Editing & Testing Tips
     • (substitute ctrl for command if you're on a Windows machine)
     • command S to save a document
     • command R to reload the page
     • command F to find text on a page
     • command X to cut text
     • command C to copy text
     • command V to paste text
     • command A to select all
     • command + to zoom in (sometimes)
     • command - to zoom out (sometimes)
     • command Q to quit the application
     • command Z to undo the last action
     • command N to create a new document or tab
     • command T to create a new tab
     • command tab to flip through programs
     • command ~ to flip through windows in a web browser
     • command shift arrow keys to flip through tabs
     • command option U to see the source code
     • In a text editor, showing the line numbers is helpful
     • Using a text editor with color-coding is helpful
     • Using 'column mode' with your text editor will save you time
  4. edit the test page to say hello world
  5. html (Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages) – standard tags
     • bold
     • italic
     • breaks
     • paragraphs
     • table
       

       	Column 1	Column 2	Column 3
       Row 1	Data 1	Data 2	Data 3
       Row 2	Data 4	Data 5	Data 6
       Row 3	Data 7	Data 8	Data 9

     • ul & li's (un-numbered lists)
       List
       • Item 01
       • Item 02
       • Item 03
     • ol & li's (ordered (numbered) lists)
       List
       1. Item 01
       2. Item 02
       3. Item 03
     • href to another site target="_blank"
     • href to another page (same window)
     • anchor on the page (points to the bottom of the page)
     • images (gif, jpg, png)
       
     • 'relativity' with links (i.e. pictures) img/KSH_logo.png vs /img/KSH_logo.png vs. ../img/KSH_logo.png etc.
     • pdf's view a sample pdf
     • embedded video
       
     • embedded audio (no sample, never used it)
  6. dead link checker
  7. cookie crumbs (site navigation displayed)
  8. "Home" link - site wide or sublevel (i.e. a department page)
  9. Web forms, we won't cover these other than to know that they exist
  10. code formatting and indenting
  11. Redirects (two styles)
      • line in www.htaccess file: redirectMatch 301 (?i)^/hopkinks/201620_IMS222/OldPage(.*)$ http://www.apple.com Try it
      • replace old page: MovedFrom page will go to MovedHere
  12. Section 508 Compliance
  13. Complementary Color Schemes TigerColor.com - Paletton.com
  14. On a Mac, find the hex (hexidecimal) value of a color on the screen (like Classic Color Meter referenced in some of the videos)
      • Apps...Utilities...DigitalColor Meter
      • View...Display Values...as Hexidecimal
      • To copy the color value -> Shift Command C
      • Paste it in to your code
  15. border-radius.com
  16. margin->border->padding->text<-padding<-border-<-margin
  17. Kirk's Pet Peeves
  18. UDS (Universal Disk Space) nuance
      • UDS...save pictures on desktop, then move them to web space
      Tools
      • Google search
      • Google analytics

On Your Own 4