550 InfoTech Course Site

Week 1 - Introduction | Multimedia Basics

Topics:

Demos:

  • Google Spreadsheet (4:30) Google Drive and how to add link in a Google Spreadsheet and set sharing settings.

Download: Handout | Step-by-Step

Multimedia Basics - Images | Audio | Video

  • Search for “Free Image Format Converter”"
  • Google
  • Format Converters
  • Zamzar (need to provide email address)
  • Search for “Free Image Editor”:
  • Google
  • Image Editors
  • pixlr- version E: free Browser based image editor (will use in class)
  • Gimp
  • Search for “Free Audio Format Converter”:
  • Google
  • Format Converters
  • Zamzar (need to provide email address)
  • Search for “Free Video Format Converter”:
  • Google
  • Video Converters
  • Zamzar (need to provide email address)

Web Services - Screencasting | Surveys | Google Services

  • Screencasting
  • Survey
  • Search for “Free Survey Tool”
  • Google

Back to Top

Week 2 - Internet and the World Wide Web (1)

Topics:

  • Intro (4:50)
  • HTML (1) (10:48) URL Basics (Absolute vs. Relative Links), HTML Basics, Block and Inline Elements.
  • HTML (2) (13:30) Big Picture, Key Rules, HTML5, Doctype, Encoding, Links, Images, Tables.
  • HTML5 (6:58) Overview of key new features in HTML5.
  • Visual Studio Code Editor (5:32) How to install Visual Studio Editor and key features.
  • Your Server Account  (3:20) How to activate your server account to upload and host your web pages and files.
  • FTP & Permissions  (4:06) File Transfer Protocol to Upload / Download Files, Permissions for Types of Users & Access.
  • Filezilla & Demo (7:35): Download Filezilla Client, Key Interface Screens, Create Site Definition, Customize Local and Remote Views.

Demos:

  • Web Page Demo (1a) (1:20): View Page Source.
  • Web Page Demo (1b) (10:29): Create Simple Web Page using Visual Studio Code.
  • Web Page Demo (1c) (1:20): Useful Tips.
  • Web Page Demo (2) (7:15): Upload to Server, Set Permissions, View in Browser, Role of public_html folder.
  • Ex1 Demos
  • Overview (5:12)
  • Step 1 (6:12): Download startPage.html from Step-by-Step files in Week 2, Save As to create "ex1_page1.html",
    Copy " Paste CSS code, Upload to server, Test in Browser, View Page Source.
  • Step 2 (3:25) Create table, Apply CSS rules for table properties, Add placeholder text.
  • Step 3 (2:20) Add rows in table using Copy " Paste and then customize.
  • Step 4 (2:48) Add heading and paragraph elements.
  • Step 5 (3:39) Insert image and have text flow around it.
  • Step 6 (3:33) Create navigation structure using relative hyperlinks.
  • Step 7 (1:50) Create "you are here" indicator using span element and CSS class.
  • Validate (2:00) How to validate a web page and interpret error messages.

Download: Handout | Step-by-Step

  • 6 Styles (will use CSS to style elements)
 
 
  • PC
  • Chrome: CTRL + U
    or Right-Click and select "View page source."
  • Firefox: CTRL + U
    or Firefox > Web Developer > Page Source
  • Edge: CTRL + U
    or Right-Click and select "View Source."
  • Mac
  • Chrome: Command + Alt + U
    Option + Command + U
    or Right-Click and select "View Page Source."
  • Firefox: Command + U
    or Right-Click and select "Page Source."
  • Safari: Option+Command+U
    or Right-Click and select "Show Page Source."
  • FTP = File Transfer Protocol   and   Permissions
  • Permissions
  • Types of Permissions
  • Read : for being able to read the file/directory
  • Write : for being able to write in the file/directory
  • Execute : for being able to access the file/directory
  • Who are Permissions set for?
  • Owner : you
  • Group : group you belong to
  • Others : the rest of the world

Back to Top

Week 3 - Internet and the World Wide Web (2) | Cascading Style Sheets (1)

Topics:

  • Intro (2:15)
  • HTML Elements (9:00) Hierarchy of Tags, Block and Inline Elements - div, id, class.
  • CSS (12:20) Why, What, Where, Location of CSS Style Definition, Structure of CSS Formatting Rule.

Demos:

  • CSS Demo
  • CSS Demo Overview (1:32)
  • Step 1 (2:45) Create hierarchy of HTML5 elements and DIVs and assign IDs.
  • Step 2 (2:52) Specify CSS in the head of web page, Create CSS rules for id and class, Test in Browser, Modify CSS rule.
  • Step 3 (4:36) Create CSS rules for header and nav elements, Explore CSS Reference.
  • Step 4 (3:40) Create CSS rules for main and footer elements, Apply CSS rule for class .blueText to p element.

Download: Handout | Step-by-Step

 

Back to Top

Week 4 - Cascading Style Sheets (2) | Basic Web Design Principles | Testing & Debugging

Topics:

  • Intro (6:08)
  • CSS Cascade (17:40) Inheritance, Specificity & Location Cascade, Constructing Complex Selectors.
  • Box Model (4:08) Box Model: width, height, padding, border, margin, box-sizing, overflow.
  • Floating & Positioning Elements (7:22) Floating Element, Absolutely Positioned Element, CSS properties: float, clear, position, display.
  • CSS Reset (2:26) "Clean Slate" CSS, Make HTML5 Backwards Compatible, HTML5 shiv.
  • CSS3 (2:38) Overview of key new features in CSS3.
  • Web Design Principles (3:44)
  • Test & Debug (4:52) Easy Things to Check First.

Demos:

  • Exercise 2 Demos
  • Ex2 & Demo Overview (5:00) Ex2 Overview, Ex2 Demo Steps Overview.
  • Step 1 (5:52) Download files, Comment out CSS "Clean Slate" code,
    Move Internal CSS to External CSS file, Link to External CSS file, CSS Location Principle.
  • Step 2 (3:10) Create DIVs to control presentation, Create CSS rule for id, Change page title.
  • Step 3 (0:55) Create HTML5 structure to describe semantics.
  • Step 4 (3:37) Add Floating Sidebar, Create <aside> element.
  • Step 5 (4:30) Ensure footer has nothing floating to its left and right, Add Floating Image in main content.
  • Step 6 (3:18) Embed YouTube Video / Screencast.
  • Next Steps (4:15) Activate CSS Clean Slate code and its consequences, Move Shared CSS to External CSS,
    Role of Internal CSS, Upload to server and Test in Browser.
  • Google Analytics (LinkedIn Learning) (1:52) How to create Tracking Code for site and install on page
    (see also Google Analytics Essential Training (LinkedIn Learning) in Week 4 - Videos for more info).

Download: Handout | Step-by-Step

  • Advanced CSS  W3 Schools Resources
  • Basic Web Design Principles
  • Alignment
  • Don't Mix Alignment Styles – Simplicity and Left-Aligned
  • Create Sufficient Left Margin
  • Constrain Total Width of Page
  • Proximity
  • Related Things Close Together
  • Spatial Separation = Conceptual Separation
  • Repetition & Consistency
  • Navigation, Graphics Color Coding, Typeface
  • Creates Ease of Use
  • Contrast
  • Bigger, Bolder, Color, Spatial Distance
  • Guide the Eye
  • Web Design – Steve Krug’s Suggestions
  • Design for Scanning, not reading
  • Visual Hierarchy
  • Visual contrast - size, bold, color
  • Important things = Visually prominent
  • Break pages up into clearly defined areas
  • Related things = Spatially close, Nested
  • Don’t mix Alignment Styles left-aligned text
  • Avoid “visual noise"
  • Leverage Conventions
  • Clear what's clickable
  • Use underline and/or color coding
  • Make each click a “mindless” choice
  • Cut ½ of words, then cut ½.
  • Testing & Debugging
  • Debug: Easy Things to Check First
  • Be careful about typos and spelling matters.
  • Upload file in the correct location
  • Make sure spelling of URL = spelling of filename and use correct file extension.
  • Avoid spaces in file names.
  • HTML
  • Make sure to use correct element / tag names.
  • All elements should have opening and closing tags.
  • Check that elements are properly nested.
  • CSS
  • Use colon (:) to separate your properties from value (color: red;).
  • Complete each property-value pair with semicolon (;)
  • No spaces between number and their units (16px).
  • Still Stuck, then check for typos and easy stuff first :)
  • Testing Your Page
  • 1. Validate HTML and CSS.
  • 2. Open in Browser
  • 3. Formatting correct?
  • 4. Hyperlinks work & correct?
  • 5. CSS file referenced properly?
  • 6. All images appear?
    If not, check the easy stuff first, especially spelling of filenames and don’t use spaces in filenames and saved as GIF or JPEG.
  • 7. Upload files to server (and set permissions if needed).
  • 8. View pages in different browsers
  • 9. Still Stuck => check for typos and check easy stuff first :)

Back to Top

Week 5 - Responsive Layouts and Front-End Frameworks (1)

Topics:

Demos:

  • Bootstrap 4 Demo (11:12) Create Responsive Web Page with up to 12 columns for xl display.

Download: Handout | Step-by-Step

  • Rows and Columns
  • .col-SIZE-SPAN - W3Schools
  • SIZE: extra | sm | md | lg | xl
  • SPAN: needs to add up to 12

  • 1 Column => SPAN = 12

    2 Column => SPAN = 6

    3 Column => SPAN = 4

    4 Column => SPAN = 3

    6 Column =>SPAN = 2

    12 Column => SPAN = 1

Back to Top

Week 6 - Responsive Layouts and Front-End Frameworks (2)

Topics:

Demos:

Download: Handout | Step-by-Step

Back to Top

Week 7 - Dynamic Web | Programming Concepts | Basics of Programming (1) (JavaScript)

Topics:

  • Intro (7:00)
  • Dynamic Web (5:50) JavaScript, PHP, MySQL, Apache.
  • Programming (7:20) Basic Programming Concepts.
  • JavaScript (20:24) Basic Elements, Document Object Model, Image Rollovers.

Demos:

  • JavaScript Demos
  • Hello World (4:46) Change Text and apply h2 tag; Add "+ Date()" to text being displayed; Add paragraph before and after where JavaScript is inserted
  • Detect Visitor's Browser: Examine JavaScript code to detect visitor's browser and display this information in the web page - part of JavaScript narrated lecture.
  • Image Rollover: how to create an image rollover effect using JavaScript - part of JavaScript narrated lecture.

Download: Handout | Step-by-Step

  • JavaScript - Basic Elements, Document Object Model

Back to Top

Week 8 - Basics of Programming (2) (JavaScript) | Web APIs | Browser Tools

Topics:

  • Intro (4:20)
  • JavaScript Objects & Arrays (13:40) - Object Literal, Difference between Objects and Arrays, Accessing Array, eachEach method, Scope of Global and Local Variables.
  • DOM Modification (6:50) - Add and Style Page Elements Dynamically.
  • Google Maps API (4:52) - Overview of Key Steps to Embed Google Map with Marker.

Demos:

  • JavaScript Demos
  • Modifying the DOM
  • Modify DOM - Overview (2:55) - Key steps.
  • Modify DOM - Step 1 (2:50) - Define objects, Create array.
  • Modify DOM - Step 2a (7:15) - Define function, createElement, string.toUpperCase(), createTextNode, appendChild, Where to insert node.
  • Modify DOM - Step 2b (7:28) - Test code, Chrome Developer Tools, console.log(); test insertionNode, order of code execution,
    call function AFTER html element loaded, Save and test, Update objects.
  • Modify DOM - Step 3 (8:14) - If test, insertBefore, Assign CSS, className, Change order of array to test code, Recap.
  • Google Map API (optional)
  • Google Maps API - Get Key (2:57) - Get API Key, Pricing, Create billing account (we will use free embed map feature).
  • Google Maps API - Step 1 (6:30) - Create map, Review code, Add secure API key, initMap function, callback=initMap, Change width & height of map.
  • Google Maps API - Step 2 (7:44) - Change map center, Add marker, Review code, Get geocode, Customize center and marker, Set zoom level.

Download: Handout | Step-by-Step

Back to Top

Week 9 - Basics of Programming (3) (JavaScript) | Forms in HTML: Form Input Validation

Topics:

Demos:

  • Ex4 Demo
  • Ex4 Demo Overview (7:42) Ex4 Overview and Key Steps.
  • Step 1 (5:40) How to create image rollovers, Discuss Bootstrap Collapsible Navigation with Dropdowns for "Info Tech" requirement.
  • Step 2a (5:18) Review Form code and use Bootstrap Form Styles, Create State input and use pattern & title attributes for validation.
  • Step 2b (3:55) Review Radio Button code and use Bootstrap Form Styles, Create Radio Button and Checkbox inputs, Importance of name attribute, Next Steps.
  • Step 3a (3:00) Begin design of modifyDOM function, Create onclick for radio buttons.
  • Step 3b (3:00) Refine modifyDOM function by adding elements to DOM below radio buttons.
  • Step 3c (2:30) Add id and Bootstrap Form and CSS classes to element be shown below radio buttons.
  • Step 3d (3:50) Test if infoNode exists, Modify modifyDOM function so that only one element added to DOM below radio buttons, Test and Debug code.
  • Step 3e (6:25) Create textToDisplay function, Use if / else if control structure to return text related to selected radio button, Test and Debug code.
  • Step 4 (5:28) Use JavaScript to validate checkboxes, Create checkboxesSelected function, Create validate function that calls checkboxesSelected, Use onsubmit to call validate to make at least one checkbox is selected, Next Steps.

Download: Handout | Step-by-Step

Back to Top

Week 10 - Databases (1)

Topics:

Demos:

Download: Handout | Step-by-Step

  • MySQL   Open-Source Relational Database   and   SQL = Structured Query Language
  • Relational Database
  • Terminology
  • Record = a collection of related fields
  • Table = a collection of related records
  • Each record is one row in the table
  • Each field is one column in the table
  • Database = a collection of tables
  • Primary Key = field that uniquely identifies a record
  • Database Normalization

Back to Top

Week 11 - Databases (2) | Server Side Scripting (1)

Topics:

  • Intro (2:36)
  • PHP 1 (8:46) Introduction to PHP.
  • PHP 2 (19:58) Variable Naming Rules, Strings, Arrays, Operators, IF test, FOR loop.
  • PHP & MySQL (9:20) Using PHP to connect to MySQL database and retrieve & display data.
  • Credentials Management (1:07) Username and password credentials for MySQL Workbench, FTP, PHP.

Demos:

  • PHP Demos
  • Download PHP step-by-step files (2:58) How to download PHP step-by-step files by selecting .txt file and then saving it as a .php to the local computer.
  • login_yourname.php (2:45) How to specify MySQL hostname, database, username & password in PHP login file; Upload to server and set permissions;
    Test in Browser and View Source to notice that the PHP code is not visible.
  • Step 1 (3:14) require_once; Interpret error message; mysqli_connect; mysqli_select_db.
  • Step 2 (2:35) Formulate SQL query, send to MySQL database and receive result table;
    Introduce intentional spelling mistake to practice how to troubleshoot; Test file in Browser.
  • Step 3 (4:50) Use FOR loop and mysqli_fetch_row to display result table;
    Use MySQL Workbench to determine the correct numercial index for specific fields in result table.

Download: Handout | Step-by-Step

  • PHP     Server-side scripting language

Back to Top

Week 12 - Databases (3) | Server Side Scripting (2)

Topics:

Demos:

  • Exercise 5 Demos
  • Ex5 & Demo Overview (17:34) Ex5 Overview, Ex5 Demo Steps Overview.
  • Steps 0 - 3: (covered in Week 11 Demos) Download PHP files, login.php, connect to MySQL database, create query, display table contents.
  • Step 4 (3:25) Create Form page with two sets of 5 radio buttons; Validate form using HTML5.
  • Step 5 (2:38) Display $_POST contents in PHP page.
  • Step 6 (2:25) Create 'tools' table using MySQL Workbench.
  • Step 7 (5:15) Cleanse form data and then store in 'tools' table; Use MySQL Workbench to check successful insertion.
  • Step 8 (1:40) Create query and Display contents in 'tools' table.
  • Step 9 (4:32) Create query to display summary information; Use CSS and Bootstrap to style summary information.
  • Next Steps (8:04) Extending form and PHP page to collect and display data for 10 tools; CSS bounding box and Bootstrap Table.

Download: Handout | Step-by-Step

  • Process of using MySQL with PHP:
  • Step 1: Connect to MySQL
    mysqli_connect
  • Step 2: Select database to use
    mysqli_select_db
  • Step 3: Create query string
    $query = "SELECT * FROM tablename";
  • Step 4: Perform query
    $result = mysqli_query($db_connect, $query);
  • Step 5: Retrieve results and output it to a web page
  • $rows = mysqli_num_rows($result);
  • $row = mysqli_fetch_row($result);
  • Repeat Steps 3 to 5 until all desired data retrieved.
  • CSS with PHP
  • Define CSS class in style tag inside of head tag (or external CSS file)
  • Need to escape \ the quotation marks used to refer to id or class names inside of PHP
    echo '<div class=\'resultStyle\'>';
  • Remember to have closing tag </div>
  • Troubleshooting Tips - watch out for:
  • Spelling Errors
  • Filename Errors
  • Missing Closing " or ) or }
  • Missing ;
  • Missing Permissions
  • Saved in Wrong Location on Server
  • Check Easy Things First

Back to Top

Week 13 - Recap of Key Concepts | Evaluating Software Systems and Tools

Topics:

  • Intro (1:25)
  • Recap of Key Concepts for HTML, CSS, Bootstrap, JavaScript, MySQL & PHP
  • HTML
  • HTML (2) (13:30) Big Picture, Key Rules, HTML5, Doctype, Encoding, Links, Images, Tables.
  • HTML Elements (9:00) Hierarchy of Tags, Block and Inline Elements - div, id, class.
  • CSS
  • CSS (12:20) Why, What, Where, Location of CSS Style Definition, Structure of CSS Formatting Rule.
  • CSS Cascade (17:40) Inheritance, Specificity & Location Cascade, Constructing Complex Selectors.
  • Box Model (4:08) Box Model: width, height, padding, border, margin, box-sizing, overflow.
  • Floating & Positioning Elements (7:22) Floating Element, Absolutely Positioned Element, CSS properties: float, clear, position, display.
  • CSS Reset (2:26) "Clean Slate" CSS, Make HTML5 Backwards Compatible, HTML5 shiv.
  • Bootstrap
  • Responsive Layouts   Bootstrap (1) (7:07) Bootstrap 4 Installation, Grid System, Container, Rows, Columns, 5 classes col-SIZE-SPAN,
    Bootstrap v4 vs v3.
  • Responsive Layouts   Bootstrap (2) (5:25) How SPAN is determined, Examples, Nesting Columns, Utility classes.
  • JavaScript
  • JavaScript (20:24) Basic Elements, Document Object Model, Image Rollovers.
  • JavaScript Objects & Arrays (13:40) - Object Literal, Difference between Objects and Arrays, Accessing Array, eachEach method,
    Scope of Global and Local Variables.
  • DOM Modification (6:50) - Add and Style Page Elements Dynamically.
  • Form Validation (8:45) HTML5 Form Validation, Using JavaScript to validate forms.
  • PHP & MySQL
  • PHP 2 (19:58) Variable Naming Rules, Strings, Arrays, Operators, IF test, FOR loop.
  • PHP & MySQL (9:20) Using PHP to connect to MySQL database and retrieve & display data.
  • Troubleshooting
  • Test & Debug (4:52) Easy Things to Check First.

Demos:

  • Optional Demos in Videos: Open-source Blogging and Content Management Systems (CMS).

Download: Handout | Step-by-Step

Optional:

Back to Top

Week 14 - How 550 connects to other MI courses | Working on Exercises & Project

Topics:

Demos:

  • Project Demos
  • Project (4:16) Key Steps.
  • Project Tour (10:42) Review of the key requirements.
  • Edit MySQL Data Table (1:36) How delete all rows in "tools" table so that when project goes "live",
    there is only "real" and no practice data in the "tools" table.

Download: Handout | Step-by-Step

  • Database Design and Management: 557
  • Web Programming: 559
  • Foundations of Data Science: 560
  • Problem Solving with Data: 562
  • Information Retrieval: 551
  • Information Visualization: 554
  • Multimedia Production: 555
  • Understanding Library Systems and Software Applications: 552
  • Digital Library Technology: 558

Back to Top

Week 15 - Course Review and Term Projects

Topics:

Download: Handout | Step-by-Step

Back to Top