CSE 154: Web Programming, Spring 2013

Week 10 (Fri 6/7)

This week we did not have an extra session.

Week 9 (Fri 5/31)

Today our TA Michael talked about the jQuery JavaScript library. We also talked briefly about the jQuery UI plugin.

• Slides - jQuery

Files:

• Megabat: html, css, js
• Vibe: html, js

Week 8 (Fri 5/24)

This week we talked about how to implement classes and objects in JavaScript.

• Slides: Object-Oriented JavaScript

Files:

• game.html, game.css, game.js, Sprite.js

Week 7 (Fri 5/17)

This week our TA Teun talked about how to implement classes and objects in PHP.

• Slides: Object-Oriented PHP
• PHP.net documentation: autoload, magic

Files:

• Nerd.php, liveExample.php, liveObject.php

Week 6 (Fri 5/10)

This week we talked about some SQL syntax not shown in lecture, specifically the syntax for inserting and removing rows and tables (modifying a database). We also talked about some concepts that go into database design, and looked at how to connect directly to the database using a terminal SSH program. You can also set up your own databases on your UW student web space if you are interested (see link below).

• Slides: Additional SQL syntax
• Web Programming Step by Step Appendix B: Database Design
• How to enable your UW student web space (more info)

Files:

• turnin.html , turnin-submit.php

Week 5 (Fri 5/3)

This week we talked about HTML5 forms and client-side validation.

For more information, try this site that gives lots of cool demos and the W3C page about input tag types.

The site caniuse.com shows you what HTML5 features you can use in various browsers. Generally you should avoid features that don't yet work in both Firefox and Chrome.

Files:

• recipe.html , recipe.css

Week 4 (Fri 4/26)

This week our TA Shiny talked about using a library named Twitter Bootstrap to efficiently make beautiful websites.

EXTRA CREDIT: Grandma's Pies...Bootstrapped!

• Slides
• Twitter Bootstrap site

• Potential Extra Credit/Late Days

  • Redesign hw1 (pie.html) for a more modernized (bootstrap) style.
  • See TMNT redesigned (linked below) for an example
  • Stay tuned for more details!

Files:

• Shiny's Blog (So Fresh and Clean)
• TMNT redesigned
• Sean's web design slides
• Bootswatch (Themes for Bootstrap)

Week 3 (Fri 4/19)

This week we talked about how to create HTML image maps (where different regions of the same image can link to different target pages). We also talked about how to alter the design of your site so that it will look great on mobile devices such as mobile phones and tablets.

• Slides: Image Maps
• Slides: Making a site look great on a mobile device

Files:

• obama.html - Obama Eyes
• marauder.html - Marauder's Map
• website-142.html - fake course web site for mobile

Week 2 (Fri 4/12)

This week we talked about how to embed multimedia content into a page, such as audio clips and videos. We also saw how to use custom fonts in a page and embed the font files on the web server. Lastly we used CSS transformations to animate content on a page.

• Notes: Embedding Multimedia, Fonts; CSS Transformations and Animations

Files:

• extra.html

Week 1 (Fri 4/5)

This week we did not have an extra session.