Week 3
11-03-2015
Goal: Learn some basic html
- Review progress on img/Persona.jpg (due 11-05-2015 by 5pm)
- Discuss wireframes
- Kirk's sample from in class
- Create an IMS222 folder at: https://www.users.miamioh.edu/UniqueID/
- Create an img folder at: https://www.users.miamioh.edu/UniqueID/IMS222/
- You just made a web page (kindof)
- 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
- avoid using spaces in file names and folders
- create a LearningHTML.htm in your UDS ( https://kirkhopkins.com/IMS/IMS222/LearningHTML.htm )
- navigate to the page using a web browser
- 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
- edit the test page to say hello world
- 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)
- dead link checker
- cookie crumbs (site navigation displayed)
- "Home" link - site wide or sublevel (i.e. a department page)
- Web forms, we won't cover these other than to know that they exist
- code formatting and indenting
- Redirects (two styles)
- Section 508 Compliance
- Complementary Color Schemes TigerColor.com - Paletton.com
- 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
- border-radius.com
- margin->border->padding->text<-padding<-border-<-margin
- Things to avoid (i.e. Kirk Pet Peeves, aka KPPs, aka do these things if you want a lower grade)
- "Click Here", this isn't the 90's anymore
- having underlined style links with spaces at the beginning or end of the link (underlining spaces looks silly)
- email addresses - always create a mailto link when displaying an email address - like this: hopkinks@miamioh.edu
- links that open improperly - if the link takes the user away from your site or menu system you need to use a target="_blank" to open the link in a new tab/window (governed by the user's browser)
Images, Audio, and Video
- broken images - bad, bad, bad
- animated GIF's
- automatically playing audio/video on page load
- stretched photos
- images without an "alt" tag
- videos without closed-captions
- background images - be careful, it's easy to mess up a page with them
- images that are huge and can take a while for the page to load, a general rule of thumb can be that images should be smaller than 1024 wide and less than .5MB
- other people's images - don't use their's, use your own - this includes glyphicons - don't use "free" ones either - make your own - with the exception of facebook, linked in, and twitter type icons
Aesthetics
- marquee (sliding text or pictures) - don't use it
- blink - don't use it
- seizure causing image/background changes - don't do it
- designs and/or images that don't scale (i.e. not responsive)
- designs that are too busy
- designs that change on the website (i.e. different from one page to another)
- eligible text (usually on a background that makes it difficult to read)
- using someone elses graphics, color schemes, and styles (with little to no changes)
More Technical
- flash (doesn't work on iOS, thankfully)
- bad grammar
- poor spelling
- inappropriate amount of content
- pop-ups - they are annoying and often blocked by the browser
- underlining - don't use underlines unless it is part of a link
- don't use images and pdf's in place of a web page; saving a resume as an image or pdf and including it on a web page does NOT count as a web page, build the page as HTML
- web version for a pdf - indicate pdf documents with "pdf" - web content and pdf content (not necessarily styling) should match
- inconsistency - grrrr - be consistent with your whole web site (menu system, color scheme and styling)
- poor communication - the user doesn't have you there to explain things, your pages need to explain things on their own
- messy mark-up/code - your HTML and CSS should follow a pattern with indenting and be the same throughout your site; random spaces and tags with typo's also drive me crazy
- unnecessary HTML and CSS - including things that are not used just makes your site more difficult to maintain
- font tags - use CSS instead
- bad semantics - don't go from h1 to h3 without an h2 between them
- testing - view your pages with multiple browsers, at different sizes, and have a peer/friend look at it to see what they think, your pages need to function properly everywhere for everyone
Don't do these things
Links
- UDS (Universal Disk Space) nuance
- UDS...save pictures on desktop, then move them to web space
- Tools
- Google search
- Google analytics
On Your Own 3
Why is the web awesome? (watch this video)
History of the internet (watch this video)
How the internet works (watch this video)
How the web works (watch this video)
Overview of HTML (watch this video)
Text Editors
Now, it's time to dive in and actually make something.
To do the next step, you'll need a text editor. Here are some that you might want to check out:
- TextWrangler (Mac)
- TextMate (Mac)
- Coda (Mac)
- Diet Coda (iOS)
- Notepad++ (Win)
All in all, what you want in this software is something that works for you and colors the code so you know if you're running astray. If any of you have done some of this stuff and want to share your favorite software with the class.<\p>
NOTE: DO NOT USE DREAMWEAVER. You'll notice I made that all in caps and in bold. If I could make it blink and in red, I would. Never, ever, ever, ever use Dreamweaver until you know what you're doing; and by then you won't want to use it. It's garbage software that mucks up the code and will cause loads of problems for you later. Sure, you can probably use it and I won't notice, but trust me, it's nothing but trouble.
Getting started publishing web pages (Kirk uses TextWrangler and spaces (not tabs) for indenting) (watch this video)
Download the finished project shown above, as a zip file, if you like
Recipe.htm (due 11-12-2015 by 5pm)
Create a simple HTML page that's a recipe. It needs to have a headline (h1), a subhead (h2), an introduction paragraph or two (p), a list of ingredients (ul) and a list of steps (ol). Save it to https://www.users.miamioh.edu/UniqueID/IMS222/Recipe.htm.