18-week "Free" Ajax and Web 2.0 Programming (with Passion!) Online Course

 Sang Shin, sang.shin@sun.com, Sun Microsystems, www.javapassion.com/ajaxcodecamp
From July 14th, 2006:

 


Message to potential attendees to this course from Sang Shin


The 3rd session ended as of April 14th, 2008.  The 4th and the next session will start from July 30th, 2008. Just like other online courses I teach, this course is offered online only.   For those of you who are not sure what it's like to take this course online, please see What it's like to take Sang Shin's online course.  Just to set the expectation correctly, there is no real-time webcasting. 

 Please find the list of the graduates of the course

How to register for this course

We are going to use newly created Google alias (ajaxprogramming@googlegroups.com) as of Aug. 2007.  Please register yourself by sending a blank email to the following.

Basically, when you send a blank email to the above, you are subscribing our class forum. This forum can be used for posting questions/answers either by email or through the website.  Please use this forum for all class related communication (technical or non-technical).  It is strongly recommended you don't send an email directly to me. For further questions, please see course FAQ below.  Please see the FAQ before posting questions to the class alias or sending an email directly to me.

Topics and Schedule


In general, the contents (presentation, hands-on labs, and homework's) will be ready on the dates specified below.  Due to the fast pacing nature of the Ajax technology, the contents are constantly being changed and improved even after the dates specified.

Changes made to the 3rd session: New topics added - Mashup, Dojo Widgets, Echo2, Ajax security. 
    1. Ajax Basics & Development Tools (July 30th, 2008, Week #1)  (homework #1)
    2. JavaScript Basics and DOM APIs (to be determined, 2008, Week #2)  (homework #2)
    3. Web 2.0 Frameworks and Toolkits (to be determined, Week #3) - homework is optional
    4. Ajax Application Examples (to be determined, 2008, Week #4)  (homework #3)
    5. Dojo Toolkit Basics (to be determined, 2008, Week #5) (homework #4)
    6. Dojo Toolkit Wigets (to be determined, 2008, Week #6) (homework #5)
    7. Dojo Toolkit Advanced (to be determined, 2008, Week #7)  - there is no homework
    8. ProtoType (to be determined, 2008, Week #8)  (homework #6)
    9. JSON (to be determined, 2008, Week #9)  (homework #7)
    10. jMaki Basics (to be determined, 2008, Week #10) (homework #8)
    11. jMaki Eventt Model (to be determined) - there is no homework
    12. jMaki Mashup (to be determined, 2008, Week #11) - there is no homework
    13. jMaki Examples  (to be determined) - there is no homework
    14. Direct Web Remoting (DWR) (to be determined, Week #12)  (homework #9)
    15. Google Web Toolkit (to be determined, 2008, Week #13) (homework #10)
    16. JavaServer Faces (JSF) and Ajax Integration (to be determined, 2008, Week #14) - there is no homework
    17. Echo2 as Ajax-enabled Web App framework (to be determined, 2008, Week #15)  (homework #11)
    18. CSS (to be determined, 2008, Week #16)  (homework #12)
    19. Portlet/Portals and Ajax - (to be determined, 2008, Week #17)  - there is no homework
    20. JavaScript Best Practices (to be determined, 2008, Week #18 - end of the course) (homework #13)
  We came to the end of the course.  All homeworks are due by April 30th, 2008 Eastern Time.  For those of you who submitted all 13 mandatory homeworks (no homework on week #3, #11 #15, #18, and #19) , please send the following information to the homework alias (ajaxhomework@sun.com) by April 30th, 2008 using "2008 Spring Ajax Course" as Subject of the email (failing to do this will result not getting your certificate on time).  The information will be used to create your certificate.

    * <First-name Last Name>, Nationality or Country of Origin, <1 or 2 liner comment on this course>
    * Sang Shin, Korea, This course helped me greatly in understanding Ajax blah blah blah (See other examples in the graduate list)

The topics below might be included in the future offering of this course.
    1. Ajax security
    2. Phobos (Script-based MVC framework)
    3. DynaFaces
    4. Feeds (Blogging/RSS/Atom)
    5. ZK Framework
    6. Comet (Server side push)
    7. Dissecting the Java BluePrints Petstore 2.0 Reference Application
    8. Ajax Design Patterns and Best Practices

Ajax Basics & Development Tools 

In this session, you are going to learn basic concepts of Ajax such as how XMLHttpRequest JavaScript object is created and used by the browser for performing asynchronous communication with the backend server.  For the hands-on lab, you are also going to learn how to use a few debugging tools out there, especially FireBug debugger, for debugging client side JavaScript code.  You will also play around with various "ready to build and run" Ajax sample applications.

1. Presentation slides (1.5 hour)

2. Lab 1 (3 hours) and homework 
3. Resources
4. Public forums
                                                                                                                                               return to the topics

JavaScript Basics 


JavaScript is the glue that makes the whole Ajax operation possible.  And having good understanding on how JavaScript works is important for writing well-functioning Ajax applications.  You already got some exposure to JavaScript in the previous two sessions.  In this session, you will go over some basic syntax and features of JavaScript.  Later on, we will discuss the best practice guidelines in writing JavaScript code.

1. Pre-class reading material

2. Presentation slides (1.5 hour)

3. Lab 1 (2 hours) and homework
4. Resources
                                                                                                                                               return to the topics


Ajax Frameworks and Toolkits


The goal of this session is to let you get exposed to various Ajax frameworks and toolkits that are available as of today and let you have some sense of their capabilities so that you can make best judgment in terms of which one suites the need of your project in hand.

1. Pre-class reading materials

2. Presentation slides (1 hour)

3. Lab (2 hours) and homework
                                                                                                                                               return to the topics

Ajax Application Examples 


In this session, you are going to build and run several Ajax sample applications that are in the form of NetBeans projects.  This session does not have presentations.

1. Lab  (2 hours) and homework
                                                                                                                                               return to the topics

Dojo Toolkit Basics 


In this session, you are going to learn about the most popular client side JavaScript toolkit called Dojo toolkit. You are going to learn basic features of Dojo toolkit - remoting via dojo.io.bind() and event system via dojo.event.connect().  Since, Dojo 0.9 does not have the backward compatibility with Dojo 0.4.3, we are going to use Dojo 0.4.3 for this lab,

1. Presentation slides (2 hours)

2. Labs (2 hours) and homework
3. Resources
4. Public discussion forums
                                                                                                                                               return to the topics

Dojo Toolkit Widgets


In this session, you are going to learn basic concept of Dojo widgets, which are reusable UI components.

1. Presentation slides (2 hours)

2. Labs (2 hours) and homework
3. Resources

                                                                                                                                               return to the topics

Dojo Toolkit Advanced 


In this session, you are going to learn more advanced features of Dojo toolkit such as drag and drop feature.

1. Presentation slides (1 hour)


2. Labs (2 hours) and homework

This lab was developed by Steven Mitchell from Byteworks.



ProtoType


Prototype is another popular JavaScript library.  In fact, several other JavaScript libraries use Prototype underneath.  In this session, you are going to learn various utility functions.

1. Presentation slides (1 hour)

2. Lab - work in progress
3. Resources

                                                                                                                                               return to the topics

JSON 


JSON (JavaScript Object Notation) is a lightweight data-interchange format and used as a data-interchange format of choice for many Ajax applications.  In this session, you will learn basic concept of JSON and how to create and send JSON data.  The hands-on lab lets you learn how to use JSON over Dojo toolkit.

1. Presentation slides (1 hour)

2. Lab (1 hour) and homework
3. Resources
                                                                                                                                               return to the topics


jMaki Basics


jMaki is all about enabling Java developers to use JavaScript in their Java based applications as either a JSP tag library or a JSF component. jMaki uses the best parts of Java and the best parts of JavaScript to deliver a rich AJAX style widgets.  jMaki currently provides bootstrap widgets for many components from Dojo, Script.aculo.us, Yahoo UI Widgets, Spry, DHTML Goodies, and Google. jMaki provides a common interfaces to these widget libraries and allows you to use these libraries together in the same page.

1. Presentation slides (2 hours)

2. Labs (2 hours) - last updated (Oct. 2nd, 2006)
3. Resources
4. Public forum
                                                                                                                                               return to the topic

jMaki Event Model



1. Presentation slides (2 hours)

2. Labs (2 hours) - last updated (Oct. 2nd, 2006)
3. Resources


Mashup 


A mashup is a web application that combines data from more than one source into a single integrated tool; a typical example is the use of cartographic data from Google Maps to add location information to real-estate data from Craigslist, thereby creating a new and distinct web service that was not originally envisaged by either source.

Content used in mashups is typically sourced from a third party via a public interface or API, although some in the community believe that cases where private interfaces are used should not count as mashups. Other methods of sourcing content for mashups include Web feeds (e.g. RSS or Atom), web services and Screen scraping. Many people are experimenting with mashups using Amazon, eBay, Flickr, Google, Microsoft, and Yahoo APIs, which has led to the creation of the Mashup editor.  (quoted from wikipedia)

1. Presentation slides (1 hour)

2. Lab (1 hour) and homework
3. Resources
                                                                                                                                               return to the topics

jMaki Examples



1. Presentation slides (1 hour)

2. Lab (1 hour) and homework
3. Resources
                                                                                                                                               return to the topics


Direct Web Remoting (DWR) 


DWR allows JavaScript code in a browser to use Java methods running on a web server just as if they were in the browser through RMI like capability.  This is why it is called Direct Web Remoting.

1. Presentation slides (2 hours)

2. Lab (2 hours) and homework 
3. Resources
4. Discussion forums


                                                                                                                                               return to the topics

Google Web Toolkit (GWT) 


Google Web Toolkit (GWT) is definitely an interesting technology to explore for building Ajax applications especially for those who want to leverage their Java knowledge.  The current version of NetBeans GWT plug-in does not support "creating a WAR" feature yet.  That will be provided in the next version.

1. Presentation slides (2 hours) - last updated (Oct. 7th, 2006)


2. Lab (5 hours) and homework
3. Resources
4. Discussion forums

                                                                                                                                               return to the topics


JavaServer Faces (JSF) and Ajax Integration 


JavaServer Faces provides a component-model architecture through which you can build an Ajax application by drag-and-dropping Ajax-enabled JavaServer Faces components in an IDE such as Sun Java Studio Creator. 

1. Presentation slides - Best Practice Guidelines in using Ajax with JavaServer Faces (1 hour)


2. Lab2 (1 hour): Buidling applications using Blueprint Ajax JSF components
3. Resources
                                                                                                                                               return to the topics


Echo2 and Ajax


Most of the popular Web application frameworks such as Echo2 and Shale are adding Ajax support as part of the framework.  Even without built-in Ajax support, it is usually possible to add Ajax functionality to the existing applications with minimum effort.

1. Presentation slides - Shale Remoting (1 hour)

2. Lab
3. Resources
                                                                                                                                               return to the topics


CSS


Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.  It is one of the technologies you can leverage with to make your web application visually pleasant.  The presentation slides will give you quick introduction to CSS syntax.  The hands-on lab exercise will let you play around with CSS styles first.  It will also let you experience what could be possible with CSS styling.

1. Presentation slides (1 hour)

2. Lab
3. Resources

 
                                                                                                                                             return to the topics

Portlets/Portals and Ajax


1. Presentation slides (1 hour)

2. Lab 1 (Building Ajax-enabled Portlet using Existing Portal server)
3. Lab 2 (Portal server with Ajax support)
4. Resources


JavaScript Best Practices


1. Presentation slides (1 hour) - JavaScript best practices

2. Presentation slides (1 hour) - JavaScript by Douglas Crockford 3. Presentation slides (1 hour) - Advanced JavaScript by Douglas Crock

4. Presentation slides - How to write OO style JavaScript code using Dojo toolkit
5. Lab
6. Resources

                                                                                                                                               return to the topics

Ajax Security


1. Presentation slides (1 hour)

2. Lab
3. Resources

                                                                                                                                               return to the topics

Phobos (Server Side Scripting)


Phobos is a lightweight, scripting-friendly, web application environment running on the Java platform but allows you to develop your entire application using a scripting language.  You can therefore take advantage of the many benefits offered by scripting languages but still leverage the power of  the Java platform. By being scripting-friendly, Phobos provides a programming environment that fosters rapid development.

1. Presentation slides from JavaOne 2007

2. Presentation slides (1 hour)

3. Lab
4. Resources

18. DynaFaces (Week #18)


Dynamic Faces (called DynaFaces) provides an easier solution for developers to add Ajax functionality to their JSF based applications.

1. Presentation slide - Using DynaFaces

2. Labs (2 hours) - there is no homework!
3. Resources

                                                                                                                                               return to the topics

20. Dissecting the Java BluePrints Petstore 2.0 Reference Application


1. Presentation slides (1 hour)

2. Lab
3. Resources

                                                                                                                                               return to the topics

21. Ajax Design Patterns and Best Practices


1. Presentation slides (1 hour)

2. Lab
3. Resources
                                                                                                                                               return to the topics


22. ZK Framework ()


ZK is an open-source Ajax Web framework that enables rich user interface for Web applications with no JavaScript and little programming.

1. Presentation slides - Shale Remoting (1 hour)

2. Lab 1 (2 hours)
3. Resources

                                                                                                                                               return to the topics


Feeds (Blogging/RSS/Atom)


1. Presentation slides - Shale Remoting (1 hour)

2. Lab 1 (2 hours)
3. Resources

                                                                                                                                               return to the topics

Comet


1. Presentation slides - Shale Remoting (1 hour)

2. Lab 1 (2 hours)
3. Resources

                                                                                                                                               return to the topics