| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

View
 

Requirement-SY10-11

This version was saved 12 years, 5 months ago View current version     Page history
Saved by Dave Q
on October 8, 2011 at 2:17:59 pm
 

Look at our student's AWESOME works here >>

 

 

  Due Date Topic Assignment (to be done before class starts on due date listed at left)
1  
Intro to WEBDEVT
  1. Buy your Domain Name (yourname.com) - http://www.godaddy.com ~P500
  2. Buy Web hosting - http://www.philhosting.net ~P100/month 
  3. (1.1) Google Logo Balls http://rawkes.com/experiments/google-bouncing-balls-canvas/ Fork this to write your name. Always link back (attribute) your sources.

 

That's it for now. Enjoy and sleep well. You will need it :)

1.2   
Google Apps  (1.2) Setup your email mail.yourdomain.com at Google Apps Standard (http://www.google.com/apps/intl/en/group/index.html
2  
 JQuery/PHP 
  1. WOW Philippines Project http://demo.tutorialzine.com/2010/02/photo-shoot-css-jquery/demo.html 
    Fork this demo to show the beauty of the Philippines' 7,107 islands.
  2. Provide at least 4 photos and credit where you got your photos (you can use creative common photos or use your own).
  3. Link back to this demo http://demo.tutorialzine.com/2010/02/photo-shoot-css-jquery/demo.html
  4. Post on Facebook and tag your friends. 
2.2   JQuery/PHP
  1. Download animated-background-image.zip 
  2. Set this up on your website and make something nice with it.  
2.3   JQuery/PHP
  1. Download three.js.-random-particles-demo.zip
  2. Set this up on your website and make something nice with it.  
3  
Propaganda 
  1. Make 2 Reaction Blogs for the 2 videos (Revolution OS & History of the Internet
  2. Link your blog entries to your website.  
4 Sept 30 Class Exercises with Codecademy
  1. Go to http://www.codecademy.com 
  2. Go through the whole 16 lessons. 
  3. Sign up using Facebook.  
  4. Tag the Facebook WEBDEVT group & tag me when you finish.
4.2 Oct 7
PHP 

http://www.w3schools.com/php/php_forms.asp

  1. Create a registration form and output it on screen like the example above.
    • First Name 
    • Last Name
    • Street
    • City
    • Province (Make this a Drop down. Get a list of provinces on the Web.) 
    • ZIP
    • Telephone
    • Email 
Oct 13
PHP 

http://onlamp.com/pub/a/php/2004/04/22/php_css_forms.html

1. Create a beautiful registration form and output it on screen like the example above with Validations.
    • First Name
    • Last Name
    • Street
    • City
    • Province (Make this a Drop down. Get a list of provinces on the Web.)  
    • ZIP
    • Telephone
    • Email

2. Send an email to the specified email address. (Research on PHP email.)

BONUS: Write these to a MySQL Database. 

BONUS BONUS: Make an AJAX Validation for a unique username. 

6 Oct 13 Propaganda
  1. Make a Reaction Blog for the movie Pirates of the Silicon Valley as a tribute to a fellow world changer, Steve Jobs.
  2. Link your blog entry to your website.

 
  Propaganda
  1. Watch 7 Must See Web Design Videos and Presentations http://www.noupe.com/design/7-must-see-web-design-videos-and-presentations.html  
  2. I want to see 7 blog entries with 100 words each as a reaction to what you watched on the 7 videos. 
  3. Put a link to your blog on your website.   
       
 
 
 
 
7
 
PHP/MySQL 
  1. Make this tutorial Basic Blog using HTML/CSS-PHP-MySQL http://www.devshed.com/c/a/MySQL/Creating-a-Login-Script-for-a-PHPMySQL-Blogging-System/ work in your website.  
  2. Create a user: csb & password: csb  so I can login and check. 
  3. Will check this by June 16, 2011.  
x  
PHP/MySQL 
  1. Create a CRUD (Create Retrieve Update Delete) for the table user in item #5 above. 
  2. Make sure this is secure and login is required. 
  3. Logged in user should be able to :
    • Add a new record (Create) 
    • See a list of records (Retrieve)
    • Update an existing record (Update) 
    • Delete a record (Delete)  
  4. Use the same user: csb & password: csb  so I can login and check. 
  5. There are various PHP CRUD implementations online. Use whatever your heart  desires. 
8

 

PHP/MySQL/CSS 
  1. Use this Wufoo form http://wufoo.com/gallery/templates/online-orders/tshirt-order-form/ to start your Tees business. 
  2. Store the orders in a MySQL table. 
  3. Create another orders.php page to list all orders. Provide the link.
9  
PHP/MySQL/JQuery 
  1. JQuery Validation with PHP http://yensdesign.com/2009/01/how-validate-forms-both-sides-using-php-jquery/
  2. Integrate this with your user database (Assignment #5)
  3. Send an email to the user & yourself.
  4. Link to the tutorial and acknowledge the source.
10  
PHP/JQuery
  1. Survey the Campus Idol by building a Web Poll program with PHP http://net.tutsplus.com/tutorials/php/creating-a-web-poll-with-php/
  2. Get at least 20 votes from friends by sharing this on Facebook. 
  3. Attribute the tutorial with a link back to NetTuts. 
       
 
 
PHP/JQuery
  1. Setup and install Google Analytics in all the pages of your website. http://www.webresourcesdepot.com/feedcount-like-google-analytics-counter/
  2. Show it using this widget. Install this on all your website pages  
11   
Propaganda
  1. Watch the documentary entitled Revolution OS http://video.google.com/videoplay?docid=7707585592627775409  
  2. Discuss at least 3 things you picked up from the movie Revolution OS. It should be at least 400 words this time. 
  3. Tag your friends on the social media.
12  
JQuery 
  1. Make a photo album of your life. Put your photos here like this http://tympanus.net/codrops/2010/09/28/polaroid-photobar-gallery/  
  2. Don't copy the wood image. Put your own background image. 
  3. Tag your friends. Link back to the demo and attribute them. Enjoy! 

BONUS: Super extra points for those who can pull your Facebook photo albums from the Facebook Social Graph.

13  
PHP/MySQL  
  1. Put your own Contact page. Send an email back to the user saying 'Thank you'. That's it. 
  2. No form validation. No grade. Javascript validation + PHP Form validation. 
14  
PHP/MySQL 
  1. Do your own event and build an event registration page.
  2. Invite your friends.
  3. Save the fields on a MySQL table.
  4. Create a guests.php page to list all those who registered. Show the total number of guests. Provide the link.
  5. No form validation. No grade. Javascript validation + PHP Form validation. 
15
 
Propaganda
  1. Watch the Front End Design Conference '09 http://css-tricks.com/front-end-design-conference-09-wrap-up/ 
  2. I want to see 7 blog entries with 100 words each as a reaction to what you watched on the 7 videos. 
  3. Put a link to your blog on your website.     
16  
PHP/MySQL

Build a Complete Blog system based on Assignment #5.

  1. Use the Username Check http://papermashup.com/demos/check-username/ to validate usernames in the user table.
  2. Validate all fields using http://yensdesign.com/2009/01/how-validate-forms-both-sides-using-php-jquery/ 
  3. I should be able to post a blog entry and save it to the blog table.
  4. Show the blog entries in descending order.
  5. Use the mail() function to
    1. make Forget password send an email to the user,
    2. email the user when newly registered,
    3. email the user when change password, 
  6. Add a comments table and users should be able to comment on a post.  
17  
WEBDEVT Take Home MidTerms - Halfway Through 

Build a beautiful Folio Website www.yourdomain.com. It should have the following sections: 

  1. Frontpage (yourdomain.com/index.html) with Wow! JQuery Awesome effects - 10 pts
  2. Showcase page of your projects (yourdomain.com/folio) - 10 pts
  3. About page (about you, sino pa ba?) with Google Maps to your house (yourdomain.com/about)- 10 pts 
  4. Photo Gallery - Assignment #12 (yourdomain.com/gallery)- 5 pts  
  5. Contact me form ala www.Formspring.me (yourdomain.com/contact)- 15 pts
    -A form that consists of Name, Email, Question.
    -It should send an email reply to the site visitor.
    -Save data to a MySQL table. Table name: feedback, Fields are id, Name, Email, Question, Answer, Date Asked, Date Answered
    -Make a CRUD for your table to input your answer.
    -List all questions and answers www.yourdomain.com/contact/responses.php (even if answers are blank). Something like this http://www.formspring.me/LilTwist
  6. Ask your friends to ask a question. Minimum of 3 questions with answers. 

 

All forms should use validation.js and PHP validation.

 

Enjoy! 

 

Bonus:

1. http://anantgarg.com/2009/05/13/gmail-facebook-style-jquery-chat/ - 10 pts 

2. Facebook integration like writing to your Facebook wall. - 10 pts

3. Use www.fontsquirrel.com for your @font-face

 

Let's get this party started! 

18  
Information Architecture 

Build a wireframe fan site of your favorite band or musician using www.gomockingbird.com. It should have a wireframe of the following pages: 

  1. Homepage
  2. About the band 
  3. Discography 
  4. Music Videos 
  5. Booking & Inquiries

 

We will discuss this in class. 

19  
 
  1. Create a Gallery of your friends and their Tweets based on this JQuery tutorial http://addyosmani.com/blog/jquery-roundrr/ 
  2. You cannot reuse the images used in the example. It has to be brand new images. 

BONUS: Super extra points for those who can pull your Facebook photo albums from the Facebook Social Graph. 

20  
 
  1. Create a web page of your favorite poem or song using @font-face & www.fontsquirrel.com
  2. Put a background music on your web page. Link back to the source of your poem/song & mp3 links.
 
 
 
  1. Setup the PayPal IPN using this tutorial http://net.tutsplus.com/tutorials/php/using-paypals-instant-payment-notification-with-php/
  2. Prepare to discuss this in class. 
22 
 
Project  
  1. Redesign the user interface of www.sec.gov.ph using www.gomockingbird.com 
  2. Re-engineer the registration process to simplify and be able to register under 15 minutes. Remove unnecessary steps.
  3. Present this in class.
23

 

Project  

Based on Assignment #18 (Wireframe design) - create the Fan site of your favorite musician or artist using HTML/CSS including the ff pages: 

  1. Homepage
  2. About the band 
  3. Discography 
  4. Music Videos 
  5. Booking & Inquiries 

 

Note: Make sure to link back and acknowledge your sources (photos, mp3, etc.) 

24   
WordPress 
  1. Setup WordPress
  2. Setup any WordPress Theme 
  3. Setup the Google Analytics (WordPress Plugin)
  4. Setup the Google Sitemaps (WordPress Plugin)

 

 25
 
Google Charts 
  1. Make a pie chart of your budget or time usage (or what you will never do).
  2. Using the Google Charts API http://code.google.com/apis/chart/ 

 

 

 
 
Facebook API

Do something amazing with the Facebook API http://developers.facebook.com/tools/console/  

 

like this: Facebook API http://net.tutsplus.com/tutorials/php/how-to-authenticate-your-users-with-facebook-connect/

 

27   
 

Get this to work on your website http://anantgarg.com/2009/05/13/gmail-facebook-style-jquery-chat/

 

28   
Google Maps KML 

Create a Google Maps of Philippine Tourist Spots in tribute to Pilipinas Kay Ganda. A sample peg is the tourist site of Costa Rica http://maps.google.com/maps/ms?ie=UTF8&oe=UTF8&msa=0&msid=104039822954852108123.00000111c5153028120cb&z=8

 

Choose your favorite destinations here http://www.lonelyplanet.com/philippines 

 

Bonus: Link the Wow Philippines project (Assignment #2). What would be ideal is to take snapshots of the tourist destinations via your JQuery app. Awesome!

     
       
  YOUR FINAL EXAM #1  

Objective: Make A Web Application that will CHANGE the WORLD. 

 

Get inspired here : http://www.techcrunch.comhttp://news.cnet.com/8301-13772_3-20001798-52.htmlhttp://www.ysei.org/?q=node/18http://data.worldbank.org/

 

What you need to do?

 

  1. Blog in detail on what your Web Application does. Answer the question "Why this web application will change the world?" 
  2. Submit existing competitors and explain why your application is different.
  3. Submit a detailed wireframe of each step. 
  4. Make 1 web design mock-up. 
 

PASS or FAIL based on a panel of judges (Sir Lawrence, Sir Paul & Sir Ben Uy). We will not have time to have a panel for this so I, David Quitoriano, will be the judge, jury and executioner :) 

Criteria will

40% Product concept

20% Originality 

10% Commercial viability 

30% User Interface Design  

TOTAL of 100 Points 

  AND FINAL EXAM #2  

UPDATE Your Folio with everything you learned! I need to see an updated website for you to have a grade. (20 Points) 

 



Comments (0)

You don't have permission to comment on this page.