Reference

Breakout Session Template

Hi, I'm {name}
Here's my assignment/project
Things that challenged me were {...}
Suggestions for improvement by the reviewer
- Mechanics (review the source code looking at indenting and looking for potential mechanical problems)
- Content
- Spelling/Grammar
- Design
- Grade: ___% ( ___ out of 1)

CSS reference
HTML reference
Coolors Color Scheme generator
Palleton Color Design picker
Web Content Accessibility Guidelines 2.0 requirements
WAVE accessibility checker (Kirk uses this)
Other accessibility checking tools that Miami uses
- Colour Contrast Analyser
- WCAG Color Contrast Analyzer
- Penguinium
- Web Developer Toolbar
- Juicy Studio
- JAWS v.17 (Windows only)
- NVDA v.2016 (Windows only)
Section 508 Compliance
use a search engine (like Google) to find new code (i.e. HTML, CSS, and PHP)
css3gen.com/box-shadow
css3generator.com
color gradients
software to create your own repeating background ($37)
Create your own web font
Domain Name Registrar: Hover.com ($12.99 per year)
Optional textbook: HTML and CSS: Design and Build Websites
Responsive Design Samples/Test Pages
- Try Responsive Design
- Bubble Menu
- Dropdown menu with submenu
- "Respond" menu
- "Respond" menu with separate css file
- Separate header and footer
- Separate header and footer and a menu
- 3 column test page based on an IMS222 student from the past
- The Perfect Website
Web spell checker's
- http://typosaur.us/
- http://www.internetmarketingninjas.com/online-spell-checker.php
- https://www.w3.org/2002/01/spellchecker
Google Chrome extensions for reviewing pages
- spell checker - "Spell Check"
- accessibility checker - "WAVE"
- html checker - "HTML validator"
- remove css - "disable HTML"
- check links - "Check My Links"
- check links - "PageSpeed Insights (by Google)"
- page outline - "HTML5 Outliner (by Google)"
Photo editor
- Pixelmator (Mac) ($29.99)
- Affinity Photo (Mac) ($49.99)
- Affinity Photo (Win) ($49.99)
- Adobe Creative Cloud (Photoshop is the photo editor) (Mac or Win) ($9.99 to $82.98 per month - subscription model)
  - I'm not a huge Adobe fan because of their pricing model but I listed it here because many people think it's the standard
  - Affinity Photo is a very close competitor to Photoshop
  - Pixelmator has more limited features than Affinity Photo and Photoshop but is easier to use
Web photo editor
- https://www.fotor.com (free)
HTML 5 page outliner
Viewing source code in Safari
- Safari...Preferences...Advanced...CHECK in "Show Develop menu in menu bar"

Notes for setting up your Mac

Settings
- Trackpad - turn on everything, then turn off natural scrolling
- Desktop & Screen Saver - set these and hot corners
- Security & Privacy - Require password 5 seconds
- Dock - Smaller, Magnification, Double Click a Window's Title Bar to Minimize
- Keyboard - Shortcuts...App Shortcuts..."Flip Horizontal" & "Flip Vertical"
- Energy Saver
- Internet Accounts - Personal, Family, & Work
- MiamiOH (UniqueID@miamioh.edu)
  - Mail
  - Contacts
  - Calendars
  - Messages
- Personal (you can setup multiple accounts)
Remove icons from the dock
Add Applications Folder to the dock
Mac Mail - turn off drafts
Mail…Preferences…Accounts…Mailbox Behaviors…(uncheck) Drafts (for each account)
Software that you might want to use
- Affinity Photo
- Dropbox
- Google Chrome
- GrandPerspective
- HandBrake
- LibreOffice
- Pixelmator
- BBedit
- VLC
Shortcuts & related useability:
- Login to Dropbox
- Top menu: Add date to the clock
- Top menu: Add battery percentage
- Finder...Preferences...General...New Finder windows show: (top one for SSD)
- Finder...Preferences...Advanced...Show all filename extensions
- Servers - Finder...Go...smb://it.muohio.edu/files/MyFiles/H/hopkinks/Public.www
- Servers - Finder...Go...smb://it.muohio.edu/files/MuFiles/UIT/UIT
- Servers - Finder...Go...smb://it.muohio.edu/files/MuFiles/HDG/HDGS
- Servers - Finder...Go...smb://it.muohio.edu/files/MuFiles/WEB
- Servers - see email "Documentation for OSXFUSE and sshfs plus a key so you don't need to type a password"
- Mail - remove all of the top icons except for trash, reply, and reply all (adjust spacing), turn mail sounds off (preferences…General)
- TextWrangler - Text Colors (pink to something else)
- TextWrangler - Editor Defaults...Auto-expand tabs
- TextWrangler - Editor Defaults...Tabs width: 1
- TextWrangler - Application...Remember the 30 most recently used items
- Change .txt and .css files to open with TextWrangler -> right-click on a file...Get Info...Open with (& Change All)

The style for this class site is based on the final project of Olivia Bachmeier (Fall 2020), a previous student of mine. I would like to thank Olivia for allowing me to use her design.