Lectures for Web Design
Summer 2014
Week 1
Week 2
Week 3
Week 4
Week 5
Week 6
Week 7
Week 8
View Page with Tabs | View Page without Tabs
Week 1 - 5/27-6/1
- Lec1 - Introduction | Web Basics
- Lec2 - Site Development Process
Week 1 - Lec1 - Introduction | Web Basics
Lectures
Topics:
- Course Overview (25:51) Course Goals, Approach, Gameplan: Schedule, Grading, Software, Tour of Course Website.
- Your Guide (6:12) Info about course designer and instructor.
- Web Basics (11:48) URLs, XHTML.
Demos
The expectation is not that you have listened to all these videos by the end of Week 1 and that you are able to do what is covered. This LyndaCampus course has been included in Week 1 since it covers in two hours how to create your first website using Dreamweaver CS6 and you may enjoy to have seen the whole process in Week 1.
Iin future weeks, specific topics mentioned here will be covered in much more depth.
- Creating a First Web Site with Dreamweaver CS6 with Paul Trani (LyndaCampus)
Files
Download: Handout
LyndaCampus:
- Creating a First Web Site with Dreamweaver CS6: Exercise Files and video: Using Exercise Files
Readings
Readings:
- XHTML Basics: W3Schools
Resources
- XHTML - (X)HTML Resources, Basics, Doctype, Encoding, Validation, View Source Code.
- HTML = HyperText Markup Language and XHTML = EXtensible HyperText Markup Language
|
|
Related
- LyndaCampus: Web Design Fundamentals.
- Other Courses: HTML / XHTML, Create Web Page.
- Web Design Fundamentals with James Williamson
- What is Web Design (3:41)
- Site Design (6:00)
- Information Architecture (4:18)
- Interactive Design (4:05)
- MLIS 550 Lecture: HTML/XHTML (18:02) Block and Inline Elements, Naming Elements, Hierarchy of Tags, Absolute vs. Relative Links (use index to navigate to topic of interest).
- Demo (using NotePad++): Create Web Page (9:54) shows you how to create a simple web page, using NotePad++ (a simpler tool than Dreamweaver, but it is free), and how to preview the local page in the Browser.
- Demo (using Filezilla): Upload Web Page (15:08) how to upload a web page to public_html folder on the server, set permissions, navigate to page in Browser, and refine site definition.
Week 1 - Lec2 - Site Development Process
Lectures
Topics:
- Intro (3:50)
- Web Design Intro (3:54) Narrative Structures, Site Planning.
- Web Design Basics (29:04) User Behavior, Design Basics, Home Page, Lack of Control, Navigation Basics.
- Dreamweaver Intro (2:26) Intro, Three Views, Layout Types, Formatting Preferences.
- Site Evaluation (4:36) Questions to Ask to Evaluate Site.
- Site Development Process (12:10) Conceptualization & Research, Content organization and Creation, Art Direction, Prototype Building, Testing.
- Group Competitive Site Analysis (7:00) whereRU requirements, Competitve Site Analysis to-dos.
- FTP & Permissions (4:44) Role of public_html, URL specification, Permissions, 755, Tips to avoid errors.
- Dreamweaver Site Managment Intro (4:42) Key steps to create a Site Definition in DW.
- LyndaCampus Demos Intro (2:54) Key steps in the LyndaCampus demos to be viewed.
Exercises: content covered will be used in ShortAssignment1, Ex1 and Group Competitive Site Analysis.
Demos
- Dreamweaver Video Demos: Intro, Page Properties, Tables, Define Site, Permissions.
- Creating a First Web Site with Dreamweaver CS6: Understanding Web Site Design, Creating Web Page.
- Dreamweaver CS6 Essential Training (LyndaCampus): Interface, Site Control, New Documents, Text, Table.
- Dreamweaver Intro, Tables, CSS, Define Site, Permissions
Videos Demos:
|
Dreamweaver CS6 Dreamweaver CS5.5
Dreamweaver CS5
|
- Creating a First Web Site with Dreamweaver CS6 with Paul Trani (LyndaCampus)
- Dreamweaver CS6 Essential Training with James Williamson (LyndaCampus)
Files
Download: Handout
LyndaCampus:
- Creating a First Web Site with Dreamweaver CS6: Exercise Files and video: Using Exercise Files
- Dreamweaver CS6 Essential Training: Exercise Files and video: Using Exercise Files
Readings
Readings:
Resources
- FTP - File Transfer Tools, File Permissions.
- FTP = File Transfer Protocol and Permissions
|
|
Related
- LyndaCampus: Basic Site Structure | Dreamweaver CS6 New Features.
- Web Design Fundamentals with James Williamson
- Basic Site Structure (5:29)
- Dreamweaver CS6 New Features with James Williamson
- Reviewing FTP enhancements (6:24)
- Applying multiple classes (5:51)
- Reviewing support for web fonts (11:59)
- Working with CSS3 transitions (8:39)
- Working with fluid grids (16:59)
Week 2 - 6/2 - 6/8
- Lec3 - Web Design Principles
- Lec4 - Cascading Style Sheets Basics
Week 2 - Lec3 - Web Design Princples
Lectures
Topics:
- Intro (3:22)
- Web Design Principles (27:42) Graphic Design, Grid System, Typography.
- LyndaCampus Demos Intro (0:40) Key steps in the LyndaCampus demos to be viewed.
- XHTML Basics (4:01) Hyperlinks and Images.
- Color & Image Formats (4:56)
- Check First (7:00) Easy Things to Check First When Troubleshooting Web Pages.
Exercises: content covered will be used in ShortAssignment1, Ex1, Ex2 and Group Website.
Demos
- Creating a First Web Site with Dreamweaver CS6: Adding Navigation and Pages, Testing and Uploading.
- Dreamweaver CS6 Essential Training (LyndaCampus): Images, Links.
- Typography for Web Designers (LyndaCampus): Shaping Page Using Typography, Visually Chunking Text, Maximizing Readability, Using Fonts to Communicate Meaning.
- Creating a First Web Site with Dreamweaver CS6 with Paul Trani (LyndaCampus)
- Dreamweaver CS6 Essential Training with James Williamson (LyndaCampus)
|
|
- Typography for Web Designers with Laura Franz (LyndaCampus)
Files
Download: Handout
LyndaCampus:
- Creating a First Web Site with Dreamweaver CS6: Exercise Files and video: Using Exercise Files
- Dreamweaver CS6 Essential Training: Exercise Files and video: Using Exercise Files
- Typography for Web Designers: Exercise Files and video: Using Exercise Files
Readings
Readings:
- Castro: Chapter 1, 2, 3, 6, 15, 16, 22 (note: link attached to chapter number for examples provided for each chapter)
- Dreamweaver Help: Create Blank Page | CSS Layout | Create CSS | CSS | Preview Pages | Setup Site | Cross Browser Check
Resources
- Design - Graphic Design, Typography, Web Design, Color Design.
- Test & Debug Web Pages
|
|
Related
- LyndaCampus: Principles of Interface Structure | Wireframing | Kuler & Color Themes.
- Other Courses: MLIS 550 - XHTML Recap.
- Interaction Design Fundamentals with David Hogue
- Principles of Interface Structure
- Gestalt Principles (5:00)
- Designing with Grids (4:18)
- Guiding visitors with sequence, steps, and structure (4:19)
- Navigation Best Practices
- Effective Navigation (8:37)
- How People Respond to Images and Media
- How people respond to color (5:14)
- How people respond to motion (6:03)
- Establishing visual hierarchy (1:49)
- Fireworks CS5: Rapid Prototyping with Jim Babbage
- Wireframing
- Understanding Wireframes (3:05)
- Planning a wireframe (2:50)
- Storyboarding
- Making a wireframe realistic (1:08)
- Using the Kuler panel for color choices (7:14)
- Illustrator for Web Design with Justin Seeley
- Creating Wireframes
- Planning your project (2:56)
- Using a grid system (5:09)
- Kuler Essential Training with Mordy Golding
- Creating Color Themes
- Creating theme from a color (2:12)
- Deconstructing Color Wheel (2:12)
- Understanding color rules (3:36)
- MLIS 550 Lecture: XHTML Elements Recap (9:42) Hierarchy of Tags, Block and Inline Elements - div, id, class.
Week 2 - Lec4 - Cascading Style Sheets Basics
Lectures
Topics:
- Intro (3:34)
- CSS 1 (12:20) Why, What, Where, Location of CSS Style Definition, Structure of CSS Formatting Rule.
- CSS 2 (11:44) Cascade, External & Internal Style Sheets, Selectors, Predesigned CSS Layouts in DW.
- Exercise 1 Overview (2:15) Key steps & tasks to be performed to create Ex1.
- CSS Navigation (7:34) How to Create Navigation Bar using Lists and CSS.
- HTML5 & CSS3 (10:40) Overview.
Exercises: content covered will be used in Ex1, Ex2 and Group Website.
Demos
- Exercise 1 Demo
- Creating a First Web Site with Dreamweaver CS6: Styling Content.
- Dreamweaver CS6 Essential Training (LyndaCampus): CSS, Coding.
- HTML5: Structure, Syntax, and Semantics (LyndaCampus): Basics, Structure, Grouping Content.
- Creating a First Web Site with Dreamweaver CS6 with Paul Trani (LyndaCampus)
- Dreamweaver CS6 Essential Training with James Williamson (LyndaCampus)
|
|
- HTML5: Structure, Syntax, and Semantics with James Williamson (LyndaCampus)
Files
Download: Handout | Step-by-Step
LyndaCampus:
- Creating a First Web Site with Dreamweaver CS6: Exercise Files and video: Using Exercise Files
- Dreamweaver CS6 Essential Training: Exercise Files and video: Using Exercise Files
- HTML5: Structure, Syntax, and Semantics: Exercise Files and video: Using Exercise Files
Readings
Readings:
- Castro: Chapter 7, 8, 9, 10, 11 (note: link attached to chapter number for examples provided for each chapter)
- Dreamweaver Help: Create Blank Page | CSS Layout | Create CSS | CSS | Cross Browser Check
- Knight Digital Media Center - Web Development Tutorials
- CSS (Recap)
- Web Design Templates
- Embed Media (optional)
- Embed Widget (optional)
Resources
- CSS - Cascading Style Sheet Resources.
- Advanced CSS - Inheritance, Specificity & Location Cascade, Constructing Complex Selectors, Box Model, Floating Element, Navigation.
- HTML5 & CSS3
- CSS = Cascading Style Sheet
|
|
SlideShare presentation by Russ Weakley |
|
|
Related
- LyndaCampus: CSS Fundamentals and Page Layouts.
- Other Courses: MLIS 550 - Test & Debug, CSS Cascade and Demos.
- CSS Fundamentals with James Williamson:
- Common CSS Concepts
- Working with fonts (4:53)
- Formatting text (8:02)
- What is the box model? (4:51)
- Margins and padding (4:21)
- Borders (4:09)
- Backgrounds (5:08)
- Color (5:52)
- Common units of measurement (7:39)
- Element positioning (7:05)
- Floats (4:49)
- Basic layout concepts (5:13)
- Media types and media queries (5:48)
- What is CSS3? (6:15)
- Vendor prefixes (4:49)
- What is a CSS Reset? (5:46)
- CSS Resources
- Using frameworks and grids (5:12)
- Popular frameworks (3:23)
- CSS: Page Layouts with James Williamson
- Enhancing Page Design (optional)
- Using borders to enhance design (13:59)
- Rounding corners (6:56)
- Adding drop shadows (10:35)
- Working with opacity (6:08)
- Utilizing the background property (15:05)
- MLIS 550 Lecture: Test & Debug (5:45) Easy Things to Check First.
- MLIS 550 Lecture: XHTML Elements Recap (9:42) Hierarchy of Tags, Block and Inline Elements - div, id, class.
- MLIS 550 Lecture: CSS (12:20) Why, What, Where, Location of CSS Style Definition, Structure of CSS Formatting Rule.
- Demo (using NotePad++): CSS Demo (14:30) Create hierarchy of DIVs and assigin IDs; Specify CSS in the head of web page; Explore CSS Reference; Comment out code to see effect of specific CSS code.
- MLIS 550 Lecture: CSS Cascade (26:16) Inheritance, Specificity & Location Cascade, Constructing Complex Selectors, Box Model, Floating Element, Absolutely Positioned Element.
- Demos (using NotePad++):
- Step 1 (4:47) Create external CSS file; Add CSS "Clean Slate" code and comment it out.
- Step 2 (1:50) Add Sidebar that floats on the right.
- Step 3 (2:16) Ensure footer has nothing floating to its left and right; Add Floating Image on the left.
- Step 4 (4:20) Embed YouTube Video / Screencast; Make CSS "Clean Code" active by removing to comments to see its effect.
Week 3 - 6/9 - 6/15
Week 3 - Lec5 -Design Principles, CSS & Image Editing
Lectures
Topics:
- Intro (2:36)
- Web Design Summary (5:06) User Behavior, Design Implications, Design Specifics, Web Design Matrix.
- Check First (7:00) Easy Things to Check First When Troubleshooting Web Pages.
- CSS Cascade (26:16) Inheritance, Specificity & Location Cascade, Constructing Complex Selectors, Box Model, Floating Element, Absolutely Positioned Element.
- HTML5 & CSS3 (10:40) Overview.
- Exercise 1 Reminders (3:16) Key Steps & Things to Remember
- Image Editing (10:28) Web Graphics, Intro to Fireworks.
- Fireworks (11:08) Toolbox, Image Size & Resolution, Image Preview, Demo Steps.
- Image Composition Principles (11:58) Readings, Rule of Thirds, Key Composition Principles.
Exercises: content covered will be used in Ex1, Ex2 and Group Website.
Demos
- HTML5: Structure, Syntax, and Semantics (LyndaCampus): Basics, Structure, Grouping Content.
- Fireworks - Video Demos: Resize Image & Export, Trace Image, Attach Text to Path, Animated GIF.
- Fireworks CS6 Essential Training (LyndaCampus): Interface, Files, Organizing Documents, Drawing, Objects.
- HTML5: Structure, Syntax, and Semantics with James Williamson (LyndaCampus)
- Fireworks Image Editing, Animated GIF
Videos Demos: |
|
- Fireworks CS6 Essential Training with Ray Villalobos (LyndaCampus)
Files
Download: Handout | Step-by-Step
LyndaCampus:
- HTML5: Structure, Syntax, and Semantics: Exercise Files and video: Using Exercise Files
- Fireworks CS6 Essential Training: Exercise Files and video: Using Exercise Files
Readings
Readings:
- Castro: Chapter 5 (note: link attached to chapter number for examples provided for each chapter)
- Fireworks Help: Workspace | Basics | Bitmaps | States (Animated GIF) | Animations | Image Preview
- Image Composition
- Composition Rules
- Composition Balance
- Flickr: Learn Composition By Example
- Digital Photography Tutorials
- 10-Pro-Photography-Tips
- Readings in eCollege
- Image Slideshows
- Slideshows
Resources
- Test & Debug - What to Check First when Debugging Web pages.
- CSS Recap - Box Model, Floating Element, AP Element, Inheritance, Specificity & Location Cascade.
- HTML5 & CSS3
- Slideshows - Create Slideshows using JavaScript and jQuery
- CSS = Cascading Style Sheet Recap and Test & Debug Web Pages
|
|
|
- Slideshows using JavaScript and jQuery
|
|
Related
Narrated Lectures:
- MLIS 555 Lecture: Color & Image Formats Recap (4:56) Color choices for small or large areas; GIF and JPEG image formats.
- MCIS 507 Lecture: Image Slideshows (9:15) XHTML & CSS Properties, jQuery, Slideshows: Galleria, Galleriffic, Supersized.
- Demos (using NotePad++):
- Galleria Slideshow | demo
- Customizing Galleria (8:40) What to customize.
- Beginner's Guide
- Galleriffic Slideshow| demo
- Customizing Galleriffic (8:44) What to customize.
- Supersized Slideshow| demo
- Customizing Supersized (6:34) What to customize.
Week 3 - Lec6 - Layout Design & Advanced CSS
Lectures
Topics:
- Intro (2:34)
- Competitive Site Analysis (6:32) Recap Key Steps and Requirements.
- AP Elements (17:40) DIVs and Linear "Natural Flow", Box Model, AP (Absolutely Positioned) Elements, DW Demo Steps.
- CSS Positioning & Clean Slate (4:46) Relative vs. Absolute Positioning, "Clean Slate" code.
- Web Design Templates (9:44) Types of Templates, Fixed or Liquid Three Columns Layouts, Sample Template with Image Rollovers.
- LyndaCampus Demos Intro (3:34) Flexible & Mobile Layout, Float, % and postion: relative; Media Query.
Exercises: content covered will be used in Ex1, Ex2 and Group Website.
Demos
- Dreamweaver Video Demos: Absolutely Positioned Elements.
- Dreamweaver Video Demos: Web Design Templates.
- Creating a First Web Site with Dreamweaver CS6: Styling Content.
- CSS: Page Layouts (LyndaCampus): Design Considerations, Layout Basics, Floats, Positioning Elements, Create Fixed / Flexible / Responsive Layouts.
- Dreamweaver Absolutely Positioned Elements = AP Elements
Videos Demos:
|
|
- Dreamweaver Web Design Templates - XHTML & CSS Templates
Videos Demos:
|
Resources |
- Creating a First Web Site with Dreamweaver CS6 with Paul Trani (LyndaCampus)
- CSS: Page Layouts with James Williamson (LyndaCampus)
Files
Download: Handout | Step-by-Step
LyndaCampus:
- Creating a First Web Site with Dreamweaver CS6: Exercise Files and video: Using Exercise Files
- CSS: Page Layouts: Exercise Files and video: Using Exercise Files
Readings
Readings:
- Castro: Chapter 7, 8, 9, 10, 11 (note: link attached to chapter number for examples provided for each chapter)
- Dreamweaver Help: Working with DIV tags | AP Element | Show / Hide Element
- Knight Digital Media Center - Web Development Tutorials
- CSS (Recap)
- Web Design Templates
- Embed Media (optional)
- Embed Widget (optional)
Resources
- Test & Debug - What to Check First when Debugging Web pages.
- CSS Recap - Box Model, Floating Element, AP Element, Inheritance, Specificity & Location Cascade.
- CSS = Cascading Style Sheet Recap and Test & Debug Web Pages
|
|
Related
- LyndaCampus: Wireframing | Kuler & Color Themes | Enhancing Page Design.
- Other Courses: MLIS 550 - Test & Debug, CSS Cascade and Demos.
- Fireworks CS5: Rapid Prototyping with Jim Babbage
- Wireframing
- Understanding Wireframes (3:05)
- Planning a wireframe (2:50)
- Storyboarding
- Making a wireframe realistic (1:08)
- Using the Kuler panel for color choices (7:14)
- Illustrator for Web Design with Justin Seeley
- Creating Wireframes
- Planning your project (2:56)
- Using a grid system (5:09)
- Kuler Essential Training with Mordy Golding
- Creating Color Themes
- Creating theme from a color (2:12)
- Deconstructing Color Wheel (2:12)
- Understanding color rules (3:36)
- CSS: Page Layouts with James Williamson
- Enhancing Page Design (optional)
- Using borders to enhance design (13:59)
- Rounding corners (6:56)
- Adding drop shadows (10:35)
- Working with opacity (6:08)
- Utilizing the background property (15:05)
- MLIS 550 Lecture: Test & Debug (5:45) Easy Things to Check First.
- MLIS 550 Lecture: CSS Cascade (26:16) Inheritance, Specificity & Location Cascade, Constructing Complex Selectors, Box Model, Floating Element, Absolutely Positioned Element.
- Demos (using NotePad++):
- Step 1 (4:47) Create external CSS file; Add CSS "Clean Slate" code and comment it out.
- Step 2 (1:50) Add Sidebar that floats on the right.
- Step 3 (2:16) Ensure footer has nothing floating to its left and right; Add Floating Image on the left.
- Step 4 (4:20) Embed YouTube Video / Screencast; Make CSS "Clean Code" active by removing to comments to see its effect.
Week 4 - 6/16 - 6/22
- Lec7 - Interaction Design
- Lec8 - Navgation Design
Week 4 - Lec7 - Interaction Design
Lectures
Topics:
- Intro (2:28)
- Interaction Design (6:19) Rollover & Image Map Interactivity.
- Dreamweaver Demo (2:46) Overview.
- Fireworks (2:41) Recap, Import Image, Text as Mask.
Exercises: content covered will be used in Ex2 and Group Website.
Demos
- Fireworks & Dreamweaver - Video Demos: Set Image Transparency, Text Mask Effect in FW; Create Rollovers & Imagemap in DW.
- Dreamweaver CS6 Essential Training (LyndaCampus): Interactivity.
- Fireworks CS6 Essential Training (LyndaCampus): Symbols, Sprites, CSS Integration, jQuery Mobile, Enhancing Fireworks.
- Dreamweaver Rollovers & Image Maps
Videos Demos:
|
|
- Dreamweaver CS6 Essential Training with James Williamson (LyndaCampus)
|
- Fireworks CS6 Essential Training with Ray Villalobos (LyndaCampus)
|
|
Files
Download: Handout | Step-by-Step
LyndaCampus:
- Dreamweaver CS6 Essential Training: Exercise Files and video: Using Exercise Files
- CSS: Page Layouts: Exercise Files and video: Using Exercise Files
- Fireworks CS6 Essential Training: Exercise Files and video: Using Exercise Files
Readings
Readings:
Week 4 - Lec8 - Navigation Design
Lectures
Topics:
- Intro (2:48)
- Interactivity Recap (4:16) Joint & Disjointed Rollovers.
- Navigation Design (2:54) Navigation Structures, Rollovers.
- Dreamweaver Demo (2:07) Overview.
- CSS Navigation (7:34) How to Create Navigation Structure using Lists and CSS.
- Exercise 2 Overview (6:40) Key steps & tasks to be performed to create Ex2.
Exercises: content covered will be used in Ex2 and Group Website.
Demos
- Exercise 2 Demo
- Dreamweaver & Fireworks - Video Demos: Navigation Design, Create Image Rollovers in DW, Create Images in FW.
- Site Navigation with CSS in Dreamweaver (LyndaCampus): Trends, Navigation Techniques, Horizontal / Vertical Navigation, Spry Navigation, Cutting-Edge Navigation.
- Dreamweaver & Fireworks Navigation Design
Videos Demos - CSS Navigation Using Lists:
Videos Demos:
|
|
- Site Navigation with CSS in Dreamweaver with Joseph Lowery (LyndaCampus)
Files
Download: Handout | Step-by-Step
LyndaCampus:
- Site Navigation with CSS in Dreamweaver: Exercise Files and video: Using Exercise Files
Readings
Readings:
- Dreamweaver Help: Rollover Image | Swap Image Behavior | Spry Menu Bar Widget | Spry JavaScript Framework
- Fireworks Help: Rulers, Guides & Grid | Apply Filters
Resources
|
Week 5 - 6/23-29
Week 5 - Lec9 - Dynamic Web | Programming Concepts
Lectures
Topics:
- Intro (2:56)
- Dynamic Web (7:40) JavaScript, PHP, MySQL, Apache.
- Programming (26:16) Basic Programming Concepts.
- Relational Database (21:25) Key Relational Database concepts.
- MySQL (6:00) MySQL Database and MySQL Workbench.
- PHP 1 (11:05) Introduction to PHP.
- PHP 2 (19:58) Variable Naming Rules, Strings, Arrays, Operators, IF test, FOR loop.
- Set Up PHP Testing Server (5:42) Create Site Definition in Dreamweaver to access whereRU server.
- PHP & MySQL Demo Overview (17:48) login.php, Connect to whereRU Database, Run Query & Process Results.
Exercises: content covered will be used in ShortAssignment2 and Group Website.
Demos
- PHP & MySQL Demo: Create Site Definition & Testing Server in DW to access whereRU server, PHP & MySQL Demo.
- PHP with MySQL Essential Training (LyndaCampus): First Steps, Data Types, Control Structures, Functions, Debugging, Web Pages, MySQL Basics.
- PHP & MySQL Connect to Database and Display Results
|
|
- PHP with MySQL Essential Training with Kevin Skoglund (LyndaCampus)
Files
Download: Handout | Step-by-Step files in Sakai > PHP Files > Get Started
LyndaCampus:
- PHP with MySQL Essential Training: Exercise Files and video: Using Exercise Files
Readings
Readings:
- Nixon:
- Preface
- Ch1: Introduction to Dynamic Web Content
- Ch3: Introduction to PHP
- Ch8: Introduction to MySQL (read 8.1, 8.2, 8.4.2 ; scan: 8.3.3, 8.3.4)
Resources
|
|
|
- MySQL Open-Source Relational Database and SQL = Structured Query Language
|
|
- PHP Server-side scripting language
|
|
Week 5 - Lec10 - Databases & Server Side Scripting (1)
Lectures
Topics:
- Intro (4:36)
- PHP & MySQL (18:20) Using PHP to connect to MySQL database and extract data.
- Short Assignment 2 Overview (15:18) Short Assignment 2 Overview and Tips, How to use CSS to control appearance of page.
- MySQL Query Tips (2:20) Useful MySQL queries, Short Assignment 2 Reminders & Tips.
- PHP & MySQL Files Overview (9:22) Browse pages for Gigapans, Photosynths, Videos, How to attach Hyperlink to Thumbnail, How to pass parameters via URL, How to create Individual Gigapan page.
Exercises: content covered will be used in ShortAssignment2 and Group Website.
Demos
- Review PHP & MySQL Files (7:04) Browse pages for Gigapans, Photosynths, Videos, How to attach Hyperlink to Thumbnail, How to pass parameters via URL, How to create Individual Gigapan page.
- PHP with MySQL Essential Training (LyndaCampus): First Steps, Data Types, Control Structures, Functions, Debugging, Web Pages, MySQL Basics.
- PHP with MySQL Essential Training with Kevin Skoglund (LyndaCampus)
Files
Download: Handout | Step-by-Step files in Sakai > PHP Files
LyndaCampus:
- PHP with MySQL Essential Training: Exercise Files and video: Using Exercise Files
Readings
Readings:
- Nixon: Ch 4-6 and 10
- Ch4: Expressions and Control Flow in PHP (read up to and including 4.4.4.)
- Ch5: PHP Functions and Objects (read up to and including 5.3.)
- Ch6: PHP Arrays (read up to and including 6.2.; remaining sections are there for reference)
- Ch10: Accessing MySQL Using PHP
- 10.1: how to access & display data in MySQL database using PHP.
Resources
- PHP & MySQL Server-side scripting language and how to connect to MySQL
|
|
- MySQL, PHP and CSS Dynamically Created Web Pages
|
|
Related
Other Courses:
- MLIS 550 Lecture: PHP & MySQL (18:20) Using PHP to connect to MySQL database and extract data.
- Demo: login_yourusername.php (4:58) How to specify MySQL username & password in PHP file; Upload to server and set permissions; Test in Browser and View Source to notice that the PHP code is not visible.
- Demo: Step 1 (4:46) require_once; Interpret error message; mysql_connect; mysql_select_db.
- Demo: Step 2 (3:14) Formulate SQL query, send to MySQL database and receive result table; Introduce intentional spelling mistake to practice how to troubleshoot; Test file in Browser.
- Demo: Step 3 (3:28) Use FOR loop to display result table; Use MySQL Workbench to make sure correct field names are used.
- Demo: Step 4 (4:16) Use mysql_fetch_row to make code more efficient; Use MySQL Workbench to determine the correct numerical index for specific fields in result table.
Week 6 - 6/30- 7/6
Week 6 - Lec11 - Databases & Server Side Scripting (2)
Lectures
Topics:
- Intro (2:00)
- PHP & MySQL Files Overview (13:25) HTML Forms, Dynamic Browse Page based on supplied parameters in URL, Dynamic Browse Page with Menus.
Exercises: content covered will be used in Group Website.
Demos
- Review PHP & MySQL Files (13:50) Dynamic Browse Page based on supplied parameters in URL, Dynamic Browse Page with Menus.
Files
Download: Handout | Step-by-Step files in Sakai > PHP Files
Resources
- MySQL, PHP and CSS Dynamically Created Web Pages
|
|
Related
Other Courses:
- MLIS 550 Lecture: PHP & MySQL Recap (12:52) Using PHP to connect to MySQL database and extract data.
- Demo: Step 10 (5:35) Discuss how to incorporate CSS & XHTML in PHP code; Show how to compute up-to-date average score for each tool by using SQL query that returns sum of scores for each tool; Show how to comment out code; Test PHP page on server.
Week 6 - Lec12 - Databases & Server Side Scripting (3)
Lectures
Topics:
- Intro (2:15)
- Big Picture for Group Project (3:22) Group Project Deliverables, Main Tasks for Group Project.
- Key MySQL & PHP Concepts for Group Project (10:16) Get & Display Data, $query, Parameters via URL, Thumbnails,
Embed Media, HTML in PHP, Browse, Individual Page, Troubleshooting Tips.
Files
Download: Handout | Step-by-Step files in Sakai > PHP Files
Week 7 - 7/7-13
Week 7 - Lec13 - Working on Projects | Responsive Design
Lectures
Topics:
- Intro (1:02)
- Working on Group Projects
- Responsive Design
Demos
- Responsive Design with Dreamweaver CS6 with Joseph Lowery (LyndaCampus)
|
|
Files
Download: N/A
LyndaCampus:
- Responsive Design with Dreamweaver CS6: Exercise Files and video: Using Exercise Files
Week 8 - 7/14-18
- Lec14 - Course Review | Project Criteria | Working on Projects
- Lec15 - Group Projects