We will finish the class this semester by learning a little bit about the Google App Engine. The app engine is a hosting service provided by Google. You write web applications using Java or Python in your local machine and then copy them over to google for hosting. An important advantage of this method is that Google will take care of scaling up your application so that, whether you have 10 or 10 million users, you don't have to do anything differently. This is also useful if your site ever appears on one of the popular new aggregators (digg.com).
To get started you should watch the video below by Wednesday, April 15:
The next lecture is a quick overview of REST (Representation State Transfer) which is a simple way to structure APIs for your web services. Here are the slides for the REST talk. This is just a quick introduction. If you want to delve deeper into the philosophy of REST, I highly recommend you read RESTful web services.
In the video I also talk about JSONP which doesn't really have anything to do with REST but it kinda fits in with the delicious examples I use.
You have to watch this video by Wednesday, April 8. Also, I remind you that there is no class on Monday, April 6.
Our next lecture is on gears: a plugin that, once installed, lets your JavaScript do things in the browser that it could before like saving data on the user's harddrive and running multiple threads. You will need to have watched the lecture below by Wednesday, April 1.
You will need to install the gears plugin on your firefox browswers. Since our labs use iceweasel, you will need to make a few changes before you can install gears, namely, change the icewasel to user-agent to firefox. Just follow these steps (which I got from here):
Point your iceweasel to “about:config”.
Find a key called “general.useragent.extra.firefox” and edit to “Firefox/3.0.5”
This week you will be learning to use the google Ajax APIs. These are a bunch of services provided by google which you can access by writing JavaScript code. First, you will visit the Google Ajax APIs homepage which links to their seven APIS. Start by looking at the visualization API which is the one we will be working with first. Click thru to their "documentation" tab and read all the documentation there.
Rather than listening to me talk about their product, I thought you might prefer to get the full story from the googlers themselves. So, for Wednesday, 25 March you should have watched the following video:
I also recommend the Google Ajax APIs playground as an excellent tool for learning how to use these APIs. Notice that it lets you change the code right there on the browser and immediately see the result of your code changes.
In our next lecture we are going to learn how to draw graphics on the browser. The lecture below gives you a quick introduction to the basics of Scalable Vector Graphics and the Canvas HTML element. You must have watched this lecture by Wednesday, 18 March before class. Also, make sure you visit the slides for this lecture and try out the examples (note that they only work on firefox).
Our next lectures finish talking about JavaScript in the browser and also cover the jQuery library. This is a JavaScript library which includes many utility functions that make it much easier to develop web applications. The videos you must watch by Monday, 2 March @9am are shown below (remember to click on the "view fullscreen" icon to get all the bits). You will also need to read over the documentation and tutorials on the jQuery website. Also, here are the lecture slides.
The next lecture starts our coverage of JavaScript and DOM integration. You will learn most of the important function calls that you can make from JavaScript in order to modify the HTML document that is being display, or modify the browser window, or get information about the browser the user is using.
You must watch the lecture below by Monday, February 23. I also recommend you read about the Document Object Model and this DHTML tutorial. DHTML stands for Dynamic HTML and simply means JavaScript + HTML + CSS, or, using JavaScript to dynamically change your HTML and CSS.
In this lecture we delve into the more advanced topics of arrays, objects, inheritance, and closures. These are advanced programming topics which, nonetheless, are central to the development of web applications. That is, you will need to understand these ideas if you are to become a good web apps developer. I also note that Java, C++, and C# do not have closures or implement prototype inheritance like JavaScript. Thus, these topics are probably new to you.
This week's lecture is broken up the two videos below, which you must watch by Monday, Feb. 16
Also as before, I also recommend you listen to Douglas Crockford himself. He is especially good in these Advanced JavaScript lectures. They are a good supplement to my lectures, especially if you want to really understand how the JavaScript interpreter works.
We will now learn to program in JavaScript. We will first learn all about the JavaScript programming language, in the next few lectures. Later on we will see how JavaScript can be used to manipulate XHTML documents (the DOM).
Most people "learn" JavaScript when they want to do some small animation in their website; they google for some JavaScript code and cut-and-paste something that they torture into fitting their needs. This works, it fixes your immediate problem, but it does not teach you JavaScript. The process eventually leads to a Frankenstein website with cobbled together pieces that is impossible to maintain. Of course, by then the original author has moved on to a higher-paying job elsewhere.
I do not want you to learn JavaScript this way. I think it is important to understand that JavaScript is a full-fledged complex object-oriented programming language. You should learn to use JavaScript wisely. JavaScript is poised to become the next major programming language: most new applications will be implemented in JavaScript. The language is no longer just for making simple animations, it is fast becoming and application development language (for example, see google docs).
The lectures you must watch by February 11 are below. The first one goes over the basic primitives of JavaScript. It is good for people who have very little or no programming experience. Also note that this video in in HD with a resolution of 1280x720. If you watch it embedded in the box below you are only getting a resolution of 640x360. To watch these lectures in their full resolution you must click on the "view in full screen mode" icon on the bottom right of the video.
In the second lecture I just write a couple of short programs in JavaScript. It is an example of how to use your editor and firebug to write, test, and debug JavaScript programs.
You also need to go over this JavaScript tutorial or, even better, buy and read JavaScript: The Good Parts, by Douglas Crockford. That book is the best guide I have found to the JavaScript language, even if I don't see the value added by parsing diagrams he often adds. It does cover all the "good parts" of JavaScript and tells you which features of the language are best avoided. Unfortunatly, that book does not say anything about the DOM so it is not enough. You will also need a good reference book like JavaScript: The Definitive Guide. My lectures are based on both of these books.
Finally, if you are tired of listening to me, and I don't blame you, may I recommend you instead listen to Crockford himself. Douglas Crockford is a JavaScript Architect (that is his official title) at Yahoo!. He is the Yoda of JavaScript, teaching all the young JavaScript jedi the true ways of prototype programming. He has a series of lectures were he introduces JavaScript and later explains some of the most advanced ideas, like closures and prototype inheritance. I really enjoyed watching these. However, these lectures are targeted to an audience of experienced software developers, so he does not go into a lot of details. Still, they are worth watching just for the gossip bits he throws in. His introduction to JavaScript lecture is divided into four parts:
The required lecture for this week is Wednesday's guest lecture by Jason Beaird. However, I also found the video below which is a presentation by Steve Krug author of the excellent Don't Make Me Think.
The video emphasizes how you should always do user testing. This applies equally to web design and to web application development. You can either convince yourself that you know how your users will use your website (you are deluding yourself), or you can bring a few of your friends over and watch them as use your website/application. Your friends will always do some things that you did not expect. Always test!
Next week we will have a guest lecture by Jason Beaird, author of The Principles of Beautiful Web Design. The lecture will be on Wednesday, February 4 in room 2A27 at 9am. Attendance is mandatory. You will be applying the basic design principles that Jason covers to your first homework. Also, this lecture is open to the public so feel free to spread the word and invite friends who are interested in web design.
Also, don't forget that the CSS lecture has been posted and there will be a quiz on it this Monday. See you there!
This lecture provides an in-depth introduction to the topic of Cascading Style Sheets (CSS). CSS is how we tell the browser how the page should look like. That is, CSS describes the layout (look) of a page. There is a long design literature on proper typesetting and poster layout techniques. Since this class is not about design we will not cover these topics in depth. However, it is very important that you understand how style sheets work and what they let you do. Your JavaScript will often manipulate style sheet attributes and CSS selectors are heavily used by many JavaScript libraries, such as jQuery.
With this one, as with all my upcoming videos, you can download a higher resolution .ogv version here using the username and password I gave out in class. You can use vlc to view .ogv files.
Of course, the video only covers the highlights of XHTML. You will
also need to do some background reading. You should go over the HTML tutorial and
the XHTML
tutorial over at w3schools.com and make sure you
understand everything there. If you, like me, prefer hardcopy then I
recommend HTML &
XHTML: The Definitive Guide as a good reference. Once you have a
firm grounding on the basics you can use gotapi.com to refresh your memory about
the specific usage of particular tags. The quiz covering this material
will be on January 26.
With this one, as with all my upcoming videos, you can download a higher resolution .ogv version here using the username and password I gave out in class. You can use vlc to view .ogv files.
You also have to read the wikipedia
entry for HTTP and go over the list of
status codes, the list of HTTP
headers, and the list of
Internet media types (which we used to call MIME types). You need
to acquire a solid understanding of how HTTP works.Knowledge of HTTP
will not only help you when developing webapps, but it is also the
foundation of RESTful web services, which we will hopefully be
covering later in the semester. The above lecture and readings are
due on January 21. There will be a quiz on that day covering
this material.
If you want to learn a bit more about packets move around the
Internet, and how to sniff them, I recommend watching Episode
406 of Hak.5 as well as Episode 408. It's
a fun show and you'll also see how to use wireshark, which we use in
CSCE 416. We don't cover networks in much detail in this class, you
will learn about networks in 416. For this class you only need to be
aware of IP numbers, hostnames, DNS, and NAT.
To learn more about the first few days of the web, watch the video
of Tim Berner-Lee, inventor of the web. He describes the early days of
the web as well as his vision for the future semantic web. After the
talk he answers questions about the early days and the other people
involved. Tim is always fun to watch and one always learns something
new. I guarantee that, if you are paying attention, your mind will
explode several times during the talk.
You’ve probably heard that Apple recently released the iPad. The absence of
Flash Player on the device seems to have awakened the HTML5 vs. Flash
debate. A...
Paul Irish and Jonathan Neal have created a fun example of various CSS
tweaks that you can make, and see the results instantly. CSS3, Please! lets
you play...
I find it difficult to believe, but the reports keep pouring in via Twitter
and email: *many candidates who show up for programming job interviews can't
...
[image: SXSW 2010 newbie new noob]Navigating SXSW is overwhelming to say the
least! To help you out ReadWriteWeb has been breaking the events, panels and ...
Also as before, I also recommend you listen to Douglas Crockford himself. He is especially good in these Advanced JavaScript lectures. They are a good supplement to my lectures, especially if you want to really understand how the JavaScript interpreter works.
Posts
