Class 3

11-06-2014

Goal: Learn some basic html

• Review results of Assignment Create a Persona for the Recipe Site
• Discuss wireframes
• Upload Assignment Create a Persona for the Recipe Site to https://www.users.miamioh.edu/UniqueID/IMS222/img/Persona.jpg
• 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. navigate to the page using a web browser
  4. 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
  5. edit the test page to say hello world
  6. 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
     • 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)
  7. dead link checker
  8. cookie crumbs (site navigation displayed)
  9. "Home" link - site wide or sublevel (i.e. a department page)
  10. Web forms, we won't cover these other than to know that they exist
  11. code formatting and indenting
  12. Redirects (two styles)
      • line in www.htaccess file: redirectMatch 301 (?i)^/hopkinks/201510_IMS222/OldPage(.*)$ http://www.apple.com Try it
      • replace old page: MovedFrom page will go to MovedHere
  13. Section 508 Compliance
  14. Complementary Color Schemes TigerColor.com - Paletton.com
  15. 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
  16. border-radius.com
  17. margin->border->padding->text<-padding<-border-<-margin
      Things to avoid/other nuances
      • "Click Here" if you want your web page to still be in the 90's
      • marquee (sliding text or pictures)
      • blink
      • animated GIF's
      • flash (doesn't work on iOS, thankfully)
      • automatically playing audio/video on page load
      • stretched photos
      • designs that don't scale (i.e. not responsive)
      • designs that are too busy
      • UDS...save pictures on desktop, then move them to web space
      Tools
      • Google search box
      • Google analytics