Calendar

Mon 12/5/2011 – Final Exam Period (8-10 am)

8-10 minute presentations on your Final Project. Due at end of period: folder or zip file with your name (brysonpayne.zip) containing 1) Your 10-slide presentation on the technology you researched and implemented in your Final Project, 2) All source code files required to demonstrate server-side and client-side interaction in your selected technology, and 3) Database export files to recreate any database tables used in your demonstration.

Mon 11/28/2011

Email to PHP continued and beyond!– plus one extra tech trick of your choice: user directories OR AND cron jobs to email (and SMS/text message) … Follow this link to get the source code and see the Extra Credit opportunity: http://brysonpayne.com/teaching/csci3000/calendar/php-email-sms
Okay, with the full Thanksgiving break to tinker, I’ve built out the version 1 of the bodyreminder.com site using the tools from this semester – including the user directories (visit bodyreminder.com/Bryson to see a demo – then go to the main bodyreminder.com site and add your own task and username and look yourself up at bodyreminder.com/username) . Notice we’ve now added SMS (text) messaging (see a list of email-to-sms addresses here) to AND from the site (uses Google Voice for free SMS instead of an SMS Gateway – see how here), and under user profiles you can see the shell of the Cron job setup (we’ll go over in class – very similar to email forwarding script setup).
Great closeout to a great semester. Can’t wait to see your projects next week…

Mon 11/21/2011

Email to PHP – One of the coolest apps we’ve written this semester. See it in action here: http://brysonpayne.com/apps/email_handler/emailme.php
And get the source code for the two files (and SQL table) here: http://brysonpayne.com/apps/email_handler/emailer.zip
Credits: Thanks to the tutorial here and the CSS from here

Fri 11/18/2011

Closing out Cache Manifests for Offline Apps – change needed on your HostGator/Web Server MIME Types: http://dev.w3.org/html5/spec/offline.html#manifests ; AJAX Grid with jQuery: /apps/ajaxgrid ; Final two classes plan;
Lab 13: Offline Mobile App (due 11/28) – implement an offline app using the demo from class, including the cache.manifest (and setting the MIME type correctly on your server) so that one of your apps from this semester is playable offline.

Wed 11/16/2011

Offline Apps for Mobile Devices: Programming HTML5 apps for offline use (i.e. add them to your “home screen” on a phone or mobile device, and play them even when you’re offline) – http://sixrevisions.com/web-development/html5-iphone-app/ – example from class: /apps/apps_offline

Mon 11/14/2011

Facebook API Lab [optional] – create a facebook app as Lab 12 in your portfolio, add a “like” box to a page in your site (can be your portfolio), and make sure sizing is appropriate, etc. for playing the app via apps.facebook.com/yourApp.

Fri 11/11/11 🙂

Facebook API cont. – the Graph API & specialized APIs: Ads, Credits, Chat APIs; PHP and JavaScript SDKs. See an app demo with a Like box at http://brysonpayne.com/teaching/csci3000/portfolio/angryatbirds-facebook-game/ and click here to post to your wall from my app: https://www.facebook.com/dialog/feed?app_id=204309539625286&redirect_uri=http://apps.facebook.com/angryatbirds/

Wed 11/9/2011

Facebook API intro – developing Facebook Apps;

Mon 11/7/2011

Google Maps + AJAX + PHP/MySQL: files from class – /apps/proj7/Files-Nov-7-2011.zip, showmarkers Demo [/apps/proj7/showmarkers.php] and source code [/apps/proj7/showmarkers.phps – modify the mysql_select_db statement in line 6 to link to your database]
Project 7 (Due Mon 11/14/2011) – Google Maps AJAX App: Using the files we built in class for the Google Maps with Set Marker and Save Marker buttons, build a functional app like the demo at /apps/proj7/proj7_styled.html that 1) Allows a user to enter an address to look up using the Geocoder API (25 pts); 2) Allows users to set an infoWindow at the place marker for that address (25 pts); 3) Allows users to save the marker to a database using an AJAX call (i.e. without leaving the page – allows the user to mark multiple locations in a single session) (25 pts); and 4) Allow the user to view all saved markers from your database on a map page like the one at /apps/proj7/showmarkers.php  (25 pts). CSS Styling is optional, and worth +10 pts extra credit.

Fri 11/4/2011

Google Maps API review; Proj 7 – building a Google Maps App;

Wed 11/2/2011

No class meeting – work on Lab 10, Lab 11

Mon 10/31/2011

Google Maps API intro – see Map1.html to Map4.html here;
Lab 11 – Google Maps (Due Mon 11/7): Work through the four demos from class, and modify the InfoWindow popup from the campus Marker to share some info about North Georgia; Post the GeoCoder sample from Map4.html to your Portfolio as Lab 11 with the enhanced NorthGeorgia Marker/InfoWindow, along with any extras you’d like to try/show off.

Fri 10/28/2011

Final Project signup – implement a solution with server-side and client-side functionality, present a 10-slide overview of the technology and what you did;  Lab 10 in-class: HTML5 Quiz amped up; Final project list/spreadsheet
Lab 10: Quiz Me Up (Due Mon 11/7)- Modify the Ch 6 HTML5 Quiz game to the following levels (sample from class): 70 – make it 7 questions, functional on mobile, disappear questions when video plays at win; 80 – add three more modifications (colors, style, scoring, anything decent – describe below the game); 90 – add Play Again without reloading the page; 100 – add the ability to choose the number of questions (2-20) and play – one hint, it wouldn’t hurt to add five more countries/capitals to get 20 “random” pairs without locking the system up…

Wed 10/26/2011

Study abroad opportunities in CS – guest speaker [Dr. Payne presenting at conference]

Mon 10/24/2011

Graded exams back + exam Q/A; Project 6 Q/A; Final Project Discussion – Service Learning vs. Research projects; Start Ch. 6 HTML5 Quiz
HTML5 Video tag: http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#video

Fri 10/21/2011

EXAM – exam study sheet allowed, no other books, notes, or Internet use allowed.

Wed 10/19/2011

No class meeting – Dr. Payne at EDUCAUSE conference

Mon 10/17/2011

Lab 9 Due, Exam Review, Final Project Discussion – Service Learning vs. Research project

Fri 10/14/2011

Lab 8 Due, Storing High Scores from a Game with PHP/MySQL/JavaScript, Exam Study Guide: ExamStudyGuide CSCI 3000 Fall 2011
Project 6 Assigned (due 10/21) – Memory Game Deluxe – Modify the Memory Game to save & display high scores (here’s the shell source code we designed together in class: http://brysonpayne.com/apps/project6/ – includes the playable app), with three additional changes: 1) either disable the submit button until all matches have been made OR check when the user submits to make sure all matches have been made so that users cannot easily cheat their way into making high scores, and 2) either disable the user from editing the matches and elapsed time fields OR overwrite those two fields with the true values when the user clicks the submit button (and before the form is submitted), for the same reason. Not all players are cheaters, but if you don’t make it hard to cheat, you’re inviting it… 3) Finally, either include the high score processing and showing in the main game file (mix PHP with HTML5) OR add a link from the highscores.php file to play the game again. I look forward to spending time playing your game – make sure you have at least 5 high scores submitted.

Wed 10/12/2011

Proj 5 due; PHP/MySQL review, Memory Game continued – Source Code for Memory_Lab9 we began together
Lab 9 (due 10/17) – Memory Your Way – Make at least five modifications to the Memory game, one of which MUST be resizing the canvas to 760 in width and sizing 10 cards for the new, narrower canvas. Note how you modified the program below the form in a DIV with id=”scores” – hint, we’ll be using this in Project 6.

Mon 10/10/2011

Ch5. HTML5 – Memory/Concentration game; timing events using Date; drawing text; drawing polygons on the canvas;
Lab 8 (due 10/14) – Getting ready to keep high scores… – Create a database table in your _test database called hi_scores that has four fields: score_id, score_date, score, and initials (three characters only). Insert a few values/scores into the table, then modify the userlist.php from Wed 10/5 (below) to create a showhiscores.php, link this to your portfolio as Lab 8.

Fri 10/7/2011

NO CLASS MEETING – FALL BREAK;

Wed 10/5/2011

Lab 7 due; Listing database results in PHP – PHP/MySQL from the ground up – userlist.php (source); Inserting revisited (http://brysonpayne.com/samples/validate/validate.class.phps source code)

Mon 10/3/2011

PHP/MySQL – Listing database results in PHP, Inserting into a database, validating form input for database use
Project 5 (due 10/12) – PHP Database Registration system – Create a “validate2” (or “project5”) folder in your apps folder, and modify the “validate” source code from the AJAX PHP book to insert users into your database, including all fields; to do this, you must 1) modify your “users” table to accept all relevant fields and 2) modify the validate.class.php file to insert all values if the input is valid; add a “listusers.php” file that lists all users, and link to this file from the allok.php file. Link to the “validate2” or “project5” folder from your portfolio.

Fri 9/30/2011

PHP & MySQL integration; Select statements in PHP/MySQL
Lab 7 (due 10/5) – Simple AJAX/PHP/MySQL – Download the book source code for chapter 4 in the AJAX PHP book; change the “config.php” file to point to your database name, user, and password; in phpMyAdmin, run the SQL code in script.sql to create a users table with several entries; upload the “validate” folder into your apps folder and test on your server by attempting to register one of the existing users – if successful, you should get the “user already exists” error in AJAX and go back to the form when you try to submit; if you use a new username, you should get the “Registration successful” page. Link this app to your Portfolio (you do not need to create an iframe page for this app, just link from your portfolio page).

Wed 9/28/2011

Proj 4 due, Lab 6 due; Intro to PHP & MySQL – Setting up MySQL for use with PHP: In your cPanel, go to MySQL Databases and create a database named “test” (it will append as username_test) and a username cs3000 with all permissions on that database. Back at the cPanel, go to phpMyAdmin to test your database, create a simple table (like the one in the book or the one on the w3schools.com MySQL intro pages), and run queries (SELECT statements) against that table.

Mon 9/26/2011

PHP Forms cont., Redux, retirement calculator continued, More Differences between PHP & JavaScript; PHP code from class: http://brysonpayne.com/samples/retirement%202011-09-26.zip

Fri 9/23/2011

Proj. 4 Q/A, Getting Started in PHP! – Server Interaction with Forms, Differences between PHP & JavaScript,
Lab 6: PHP Retirement Calculator (due Wed, 9/28) – Successfully upload, test, and modify the Retirement.php program we began in class in the following ways: Add a place for the user to enter their name and current age, and upon output of the retirement total, include the user’s name and the age they’ll be at their projected retirement. If the retirement amount is over $1M, let the user know they’ll be comfortable; if their retirement is under $500K, let them know their retirement could be tight; Create a page in your Portfolio with an iframe to your Retirement page, and link to it from your Portfolio page as Lab 6 or Retirement Calculator; upload the app to your apps folder, test, and start investing….

Wed 9/21/2011

Read the PHP Intro and PHP Syntax pages at http://www.w3schools.com/php/php_intro.asp, read the first half of Ch. 4 in the AJAX and PHP book (pp.113-134), go to the book web site and download the source code, upload the Ch. 4 source code to a folder on your site called “samples” – we’ll edit these in class further.

Mon 9/19/2011

Lab 5 due; Slingshot app cont – Mouse Events vs. Touch Events, and both together; iOS touch events (slingshot for the iPad/iPhone); TOUCH-MODIFIED CODE WE DID TOGETHER IN CLASS FOR PROJ4: http://brysonpayne.com/apps/AngryAtBirds/
Safari iOS event handling reference: http://developer.apple.com/library/IOS/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
Developing for Multi-touch web browsers: http://www.html5rocks.com/en/mobile/touch.html
Project 4 (Due Wed, 9/28) – modify the slingshot app to make it work with touch-capable browsers (allow the user to drag a finger to fire the slingshot – test by checking out one of the Library iPads if desired), and add the following features: 1) When the user hits the chicken (including the head), announce a “win”, if she misses, announce a “loss”; 2) After the user fires, allow them to “play again”; 3) [optional] For 20 points bonus credit, make the game a little more engaging by adding a 1-second pause after the user hits/misses that re-sets the screen to play a second shot (and a third, etc.) – add some number of points when the user hits, subtract a life when the user misses, until a real game is over. Cool?
4) Add a page to your portfolio, link to the page, upload the app, test, and enjoy.

Fri 9/16/2011

Proj. 3 due; Chapter 4 cont. – Slingshot app; Mouse Events in HTML5; Drawing line segments in the Canvas

Wed 9/14/2011

Proj. 3 Q/A; Tables & HTML5; Chapter 4 – Cannonball app; Object-oriented JavaScript (or “flashback to Java”); Rotations and Translations in HTML5 Canvas Apps;
Lab 5 (Due 9/19) – Cannonball 1.0… Modify the cannonball3.html file we worked on in class to make it more like a game: Have it knock the rectangle over (and for a bonus point, have the ball disappear after), add a Play Again button that re-initializes the game (reloads the page), change the text to be more gamer-friendly (change the velocity to a positive, etc.), and make any other modifications you’d like – describe them below the form, create a page in your portfolio, put the app in your apps directory, and link to the page from your portfolio.

Mon 9/12/2011

Lab 4 due; Collision Detection; Keyboard Events in HTML5 – source code for start of PaddleBall app from class: /apps/Project3/paddleball.html (use arrow keys to move the paddle)
Project 3 (Due 9/16): PaddleBall – Soup up the bouncing ball animation game to do the following: 1) Draw a paddle on the screen; 2) Move the paddle with the arrow keys; 3) Keep track of points (when the user bounces the object off the paddle) and lives (when the user misses the object and it hits the guarded border); 4) Place the app in a folder in your apps directory on your site; 5) Create a page under your portfolio and edit the HTML of that page to include your app via an iframe; 6) Link to your app from your Portfolio page.

Fri 9/9/2011

Project 2 due; FTP via FileZilla; Chapter 3 continued
Lab 4: Bouncing Ball (Due 9/12) – customize the animated ball from Chapter 3 in at least 3 ways; describe briefly what you did to customize the game in the HTML text below your animation & form; create a page under the Portfolio (parent) page in your WordPress site called either Lab4, Bouncing Ball, or similar; add an iframe to the page that displays your dice game in the WordPress page; Upload, Test, and Link to this page from your Portfolio page Lab listing.

Wed 9/7/2011

Lab 3 due, Project 2: Craps, Embedding apps with <iframe>, Chapter 3: Animation
Project 2 (Due 9/9): Craps for Cash – 1) Modify the craps game to keep track of two more variables: cash and number of bets – Start out with text below or beside the roll button that says “You have $100 after 0 bets.”, and after each winning or losing roll, update the cash and the number of rounds bet; 2) Place the craps game in a folder called craps in your apps directory on your site; 3) Create a page under your portfolio and edit the HTML of that page to include your craps app via an iframe; 4) Link to your app from your Portfolio page.

Mon 9/5/2011

NO CLASS MTG (Labor Day)

Fri 9/2/2011

Lab 2 due, Ch 2 – building a dice game, intro to FTP and iframes
Lab 3 (Due 9/7/2011): Dice Game – customize the dice game from Chapter 2 as discussed on p.63 of the HTML5 text, or in any creative way you see fit; describe briefly what you did to customize the game in the HTML text below your dice game canvas & form; create a page under the Portfolio (parent) page in your WordPress site called either Lab3 or DiceGame; add an iframe to the page that displays your dice game in the WordPress page; Upload, Test, and Link to this page from your Portfolio page Lab listing.

Wed 8/31/2011

NO CLASS MTG (Dr. Payne at conference): Project 1 due, Read Ch. 2,
Lab 2 (Due 9/2): Posting apps to your site – In your root directory of your web site (either through FTP or via HostGator’s file manager), create a folder called apps. Create a folder called lab2 inside apps, and place your BMI calculator we created in class (bmi.html), as well as one of the dice games from Ch2 into that folder. Go to your Portfolio page and create an entry in the Labs section for Lab 2, and add some text and a link to your BMI calculator (the link will be something like /apps/lab2/bmi.html) and the dice game file.

Mon 8/29/2011

Lab 1 due, Proj 1 Q/A, Chapter 1 HTML5, Begin Dice Game, Read Ch. 2, Posting Apps to Your Site.

Fri 8/26/2011

Project 1 (Due 8/31): Setting up a WordPress site via HostGator – 1) Set up a WordPress site at your domain name via HostGator; 2) Install a new template to match the style you want for your site; 3) Add two pages: Portfolio and About – in the Portfolio page, you’ll start your web programming portfolio – place a heading for Labs, a heading for Projects, and state briefly what lab1 and project 1 were; in the About, put some info about your site, and some info about yourself.

Wed 8/24/2011

Lab 1 (Due 8/29): Setting up your domain name and hosting – Come up with an appropriate or interesting domain name, purchase it (you can use any registrar, but I will provide all demos in class via GoDaddy), purchase a beginner hosting package for 6 months (you can use any hosting service that will get you through the semester, but I’ll demo and support HostGator). Point your new domain name’s DNS to your hosting account on HostGator. Email your site name to bpayne[at]northgeorgia.edu before 8:00 am Monday, 8/29.

Mon 8/22/2011

Added some finishing touches to the BMI calculator.
Overview of how the web works – setting up hosting and name servers, uploading files, a bit more coding in HTML5.

Fri 8/19/2011

Today we completed our first app, a BMI (body mass index) calculator in JavaScript and HTML, and saw how to register a domain name at GoDaddy.com.

Wed 8/17/2011

Today we presented an overview of the course, developed the course map that’s of most interest to all of you, and started our first app in HTML & JavaScript. Assignment: Order your HTML5 textbook and come up with a domain name.