Reference

Text editor's to edit your web pages
- BBedit replaced TextWrangler, which is the editor I used to create most of our course material (Mac)
- TextMate (Mac)
- Coda (Mac)
- Diet Coda (iOS)
- Notepad++ (Win)
Optional textbook: HTML and CSS: Design and Build Websites
CSS reference
HTML reference
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)
Web Server: BlueHost.com ($5.00 per month or less)
- BlueHost is suggested but not required
- Do NOT install WordPress
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 last year
- 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"

Miami web space info

Getting to your UDS web space on Miami's server

Once your web space is setup using NetDisk (login to myMiami to get to NetDisk), you can access it via your OS
- Click on the desktop (to bring Finder to the foreground)...Go...Connect to Server
- Then enter smb://it.muohio.edu/files/MyFiles/U/UNIQUEID where U is the first letter of your last name, then your UniqueID
- Mine is: smb://it.muohio.edu/files/MyFiles/H/HOPKINKS
- Download a tool called Map Network Drives from the Miami Utilities section of https://miamioh.teamdynamix.com/TDClient/Requests/ServiceDet?ID=9064
- Download and Install
- Double-click your new MapDrives icon on your desktop & enter your UniqueID and password
- wait (about 3 minutes or so)
- Use "Windows Explorer" or "File Explorer" to get to the M drive, your web files will be in Public.WWW
- If you are off campus, you'll need the Cisco AnyConnect VPN program which can be downloaded from http://www.miamioh.edu/software before you can use the MapDrives tool

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 Anna Jankovsky (201910), a previous student of mine. I would like to thank Anna for allowing me to use her design.