Web and Mobile Systems - Summary

Tools and Resources

Code Editor

• Visual Studio Code
• SFTP Plugin for Visual Studio Code

Tools

• FileZilla
• Google Chrome

References

• W3Schools: HTML Elements List
• W3Schools: CSS Rules List
• W3Schools: PHP
• W3Schools: SQL
• Bootstrap 4

---

May 14: Web Publishing

Concept

• Interactivity, Digital Publishing, and the Web
• Briefly on Usability
• Web Development: HTML and CSS
• Web Development: Box Model, <div> and CSS Reset
• Web Development: Image, Type, and Multimedia
• Week 1 Slides

Screencasts

• Installing SFTP plugin
• Setting up my workspace via SFTP
• Building my very first website
• Creating a more complex website layout
• Extending the layout with external solutions

Sample

• Exercise Archive

---

May 16: Web Frameworks and Modular Design

Concepts

• Beyond HTML and CSS
• Video: What Most Schools Don't Teach
• Article: Sketching in Code: the Magic of Prototyping
• Web Development: CSS3 and Responsive Design
• Web Development: Accessibility, SEO, and Multipage
• Web Development: Website Modularization with PHP
• Week 2 Slides

Screencasts

• Bootstrap, Content Population, and Responsive Layout
• Custom CSS, Google Fonts, Font Awesome
• PHP Modularization, Bootstrap Components, Page Generation
• Exercise Archive

---

May 21: Server-side Technologies

Concepts

• W3Schools: PHP 7 Tutorial
• W3Schools: SQL Tutorial
• PHP Form Handling
• PHP Connect to MySQL
• PHP Select Data From MySQL
• PHP Insert Data Into MySQL
• Codecademy: Excel to SQL: Why You Should Make the Switch
• Week 3 Slides

Screencasts

• Exercise Archive
• Bootstrap and PHP SELECT
• URL Parameter and SQL WHERE
• Form and SQL INESRT

---

May 23: Studio Time / Adhoc Troubleshooting

Assistance available in lab or via Slack

---

May 28: JavaScript and Web Applications

Concepts

• Review: HTML and CSS
• Introduction to JavaScript
• Web Development: jQuery Essentials
• Web Development: Universal Design, Accessibility, and jQuery Plugins
• Week 5 Slides

Screencasts

• Exercise Archive
• HTML Population
• Interactivity with jQuery
• jQuery Plugins for Photo Gallery

---

May 30: Application Programming Interface

Concept

• Web 2.0 and Mashup Applications
• Web Development: Web API, XML and JSON
• Element of Programming
• Week 6 Slides

Screencasts

• Exercise Archive
• Bootstrap Setup
• Google Maps, Flickr, and Isotope
• Clean up and Twilio

---

June 4: Information Visualization and Vector Graphics

Concepts

• W3Schools: SVG Tutorial
• Review: Web Development: Image, Type, and Multimedia
• Chart.js Samples
• Showcase: A visual introduction to machine learning
• Week 7 Slides

Screencasts

• Exercise Archive
• Bootstrap and SVG
• ChartJS

---

June 6: Studio Time / Adhoc Troubleshooting

Assistance available in lab or via Slack

---

June 11: Open-source, Collaboration, and Versioning

Concepts

• GNU Public License
• Open Source Initiative
• Creative Commons
• Github Pages
• Week 9 Slides

---

June 13: Data Mining and Automation

Concepts

• Google Puppeteer
• Regular Expression
• RegExr
• Puppeteer Examples
• Week 10 Slides

---

June 18, 20 and 25: Studio Time / Adhoc Troubleshooting

Assistance available in lab or via Slack