Web Programming Step by Step, 2nd Edition

Lecture 28: What's Next?

Reading: none

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

Congratulations!

• You now know more than the average web developer. (Really!)
• You know an introductory amount about many topics/languages
• You're capable of teaching yourself more...

Learn more about HTML5

• semantic tags: nav, aside, header, footer, section, aside, article
• Forms 2.0: sliders, search bars, color/number/email/url/date/time, placeholders, ...
  
• audio and video tags for embedding multimedia

  <video src="video.ogv" width="425" height="350"></video>
  

  
• canvas tag for drawing 2D shapes in HTML/JS (like DrawingPanel) (ref 1, 2, 3)
  

Learn more about HTML5, continued

• semantic web / microdata attributes: rel="...", itemscope, itemtype, itemprop
  
• accessibility features ("ARIA")
• embedding of rich XML-like formats such as SVG vector graphics
• other stuff: offline apps, geolocation, cross-document messaging, MIME type registration, history management, ...

Learn more about CSS3

• new selectors: nth-child, inline-block, :not, +
• ability to embed fonts in a page (yay)
• easy built-in support for multi-column layouts
  
• transparency/opacity, color gradients, shadows
• rounded corners/borders
• animations and transitions (like Scriptaculous)
• affine transformations (scaling, rotation, perspective)

Learn more about JavaScript

• JavaScript objects/OOP; JS form validation; more JS syntax
• JS libraries such as jQuery or Yahoo! UI (YUI)
• JS site frameworks such as Backbone.js or Twitter Bootstrap
• Yahoo! web developer videos featuring Douglas Crockford
• JS on the server, such as Node.js

Learn more about other topics

• Web design and usability
• PHP objects/OOP
• PHP web frameworks such as Zend, CakePHP
• Supplemental book chapters on Taking a web site "live", Database Design, IE Hacks
• Macromedia Flash: tutorial 1, tutorial 2, tutorial 3
• server-side web programming in Java
  • JSP / servlets (#1, #2), applets (#1, #2)

Courses to take

• CSE 143 - learn more about structuring data and algorithms (if you haven't taken it yet!)
• INFO 343 / 344 / 340 - web design, web tools/development, databases
• ENTRE 475/476 - business aspects of web development
• CSE 403 - software engineering (large software projects)
• CSE 490H - distributed systems
• CSE 498/499 - senior capstones and project courses

Revisiting past homework assignments

• come up with your own web project and build it (anything!)
• create a personal web site with info about you, your resume, etc.
• try writing extensions to the assignments from this course:
  • HW1-3: Pick other web sites and try to mimic them
  • HW4: implement persistent dating data, uploading of images, a login system, cookies/localStorage
  • HW5: add use Scriptaculous/jQuery to add effects; save to-do items using Ajax
  • HW6: implement the real 6 degrees of Kevin Bacon as seen at oracleofbacon
  • HW7: write code to read/write ASCII art to the server using Ajax
  • HW8: use Scriptaculous/jQuery to add effects and animate the tiles
  • HW9: write the PHP that reads names.txt and feeds XML/JSON to client
• make your assignments compatible w/ IE, Opera, Safari, etc.
• go back and look at the "extra session" notes

Sharing your work with others

• show off your awesome programs to your friends!
• put your web dev skillz (and links to your programs) on your resume!
• set up your UW web space
• your UW web site will be at http://students.washington.edu/YOUR_UWNETID
• Suggestion: put this line at the top of your PHP code:

  <?php
  error_reporting(E_ALL);   # makes UW server show error messages
  ...
  

Protecting web resources

• Please don't post your HW solutions on the web unprotected!
  (we want to be able to assign some of these programs again)
• posting resources with a shared password:
  • create files named .htaccess and .htpasswd with proper contents and put them in your HW root folder on UW
  • doesn't require a UW NetID
  • can give password to friends / family / employers

Example htaccess, htpasswd files

.htaccess :

AuthUserFile full/path/to/.htpasswd
AuthName "Restricted Access"
AuthType Basic
require user username

.htpasswd :

username:encryptedPassword

• place these files in the top folder of the content you want to protect
• htpasswd generator (gives you the text to copy-paste into your .htpasswd file)
• or from *nix terminal: htpasswd -c .htpasswd username

Getting Ajax to work

• Ajax (XMLHttpRequest, Ajax.Request) can only connect to the same server as where your .html and .js files are located
• If you put your work up on UW, your Ajax code will be unable to reach Webster!
• Solution: Put proxy.php in the same folder as your UW code, and change any Ajax URLs
  • from: http://webster.cs.washington.edu/dir/file.ext
  • to: proxy.php?url=http://webster.cs.washington.edu/dir/file.ext
  • if URL has parameters, encode the query string with JS escape function

MySQL on UW

• How to use MySQL on UW
• download our databases: simpsons.sql, world.sql, imdb_small.sql, imdb.sql
• importing a database into MySQL from a file:
  • upload one of the above .sql files to your UW space
  • open an SSH terminal window on UW server and type:

  mysql -u username -p databaseName < filename.sql
  

• exporting a database from MySQL to a .sql file:

  mysqldump -u username -p databaseName > filename.sql
  

Setting up your own web server

• why?
  • test your web apps locally without needing to upload them to Dante
  • host your own projects from your house and connect to them
  • other useful services: SSH, VNC, SMB (Samba), CVS, ...
• how?
  • Linux: Linux (LAMP) server tutorial
  • Windows: XAMPP server software download
  • getting the helpful orange PHP error messages: Xdebug

Taking a web site "live"

• buy your own domain name (e.g. martystepp.com): DreamHost
• learn about (stalk) your users with Google Analytics
  
• improve your page / improve PageRank: SEO, meta tags
• make a few bucks with ads: Google AdSense
• get the word out: Google AdWords, Webmaster Tools