Javascript Etude number 3

If we have time today, I’d like to talk us all through a quick little exercise in javascript.

I’d like to invite you all to consider the Yahoo Pipe that aggregates our course, and how we could be including that in a web page.

Assessment #3 – Final Web Project

by kerry seed licensed under CC BY-NC-ND 2.0

Let’s take a moment to refresh ourselves from the course outline:

Example mashups – part I

first, make up a "centre" for each income bin

by vingt deux, licensed under CC BY-NC-ND 2.0

I’ve had a number of questions about how to get some different types of data mashed up, and for some worked examples. Good! We didn’t have as much time as I was hoping to cover that, so I’ll whack it in this blog post so that those of you going down a mashup path have  some better examples. This isn’t a comprehensive overview, since we’ve already had one of those, but simple and detailed worked examples of what to do. I’ll show some of the false starts that I might make in a mashup project, as well as the successes.

Get me out of here!

How to back up or migrate your blog.

The internet is not safe. If you have your data on a webhost, anywhere, it’s probably not safe. If you have a security specialist on your team (and none of us here do), then maybe it’s somewhat safe from malicious attacks, but even then, it’s still vulnerable to plain old hardware failure and general cockups. And the most vulnerable data of all is the data that is hosted on bottom-end hosts like Dreamhost where potentially hundreds of other people are sharing disk space and server resources with you, and as with everywhere on the internet, a sizable proportion of them are guaranteed to be some combination of incompetent and malicious. It’s only a matter of time before one of them accidentally or deliberately brings the server down, accidentally corrupts your files, or breaks in to your filespace and uses it to subsidise their pornography business. It’s happened to me, more than once. Moreover, as I’ve said before, if you are using FTP instead of SFTP, it means that you don’t really care about your data anyway, and pretty much anyone with enough dedication can come along and steal your password and make free with your files if they try hard enough.

WordPress in miniature.

Here’s a handy tool for y’all. WordPress. It’s probably one of the most common CMSs (Content Management Systems) in existence. It’s written in PHP and the MySQL dialect of SQL, two languages that I do not intend to cover in this course.  The beauty of WordPress, as opposed to systems like Ruby on Rails, Joomla or Django, is that you can do a lot of stuff without having to touch the PHP/SQL stuff. I might argue that the beauty of Django or Rails is that it makes the code so simple that you don’t mind messing with it. But that is definitely digressing. You might want to give those frameworks a look if you are going further later on.

The distinction with all these systems, the thing that makes them different from the javascript-based code we’ve been developing so far, is that javascript runs (typically) in the browser, on the computer of the user who visits your page. PHP and SQL though are executed on a the server. This is why UTS pays Dreamhost money for the usage of their machines.

But one step at a time. WordPress is a great way of seeing how all this website stuff works… let’s take it from where we left off last time, installing stuff from the dreamhost control panel.

a 30 second introduction to agile modelling.

Your assessment requires you to submit a diagram of your final project’s navigation flow.

“That’s all well and good,” you might well say, “but what bloody kind of diagram?” Or possibly, “Why?”

I hope, at least, that you’ll ask that, since if you were to be asking a different question, this post would not be providing the answers.

Straight up, for this stage of the project, before development starts, you are essentially the client. Later you will become the consultant, but that’s after semester break. The purpose of diagrams for you as the client, is to clarify your ideas for the site you are about to build – to nail the user experience of the site and the information architecture of your project.

The classic way of starting that process is simply to draw a diagram of the different pages in your hypothetical site, e.g.:

One of several classic site diagrams posted by Jason Withrow, from his (recommended) post Site Diagrams: Mapping an Information Space

That’s fine for assessment if you feel it helps you get a grip on what you’re doing. However, there are other options out there that I suspect are more useful for the projects at hand, and which are closer to real world best-practice. The key point is that in the real world design is ideally not a one-step process, but a cycle that repeats.

A quick look behind the curtain

So, we’re going to dive into dreamhost, which is the essentially arbitrary webhost we chose for this project.

You will each have been given, soon enough, a dizzying number of “FTP usernames”, “shell useranmes”, “MySQL usernames” and “Account usernames”. It’s annoying how many usernames we had to dole out. But don’t panic if you don’t know what they all mean. The key one to remember is your Account username. If you keep that one, you can log in an out of the control panel (which is here: https://panel.dreamhost.com/) and from there you can create and change all types of other users… most importantly SFTP users, which are the usernames that actually do all the work (the ones you use to upload files, for example). You can also do other fun stuff like managing the sites you are hosting and the databases you ahve and all kinds of stuff like that. So keep the account username and password, and then you can use it to reset all the other ones.

The web as a social landscape

The web was not always the interactive, social place that it has become. While broad, social interactivity is getting closer to ubiquitous, (I know you’re all on facebook, for example) the implications of this all are still not obvious. But we are at a juncture where it’s still possible to pick out particularly interactive flagship interactive sites from a background of older, less interactive ones. Here’s a fragment of a list…

Assessment #2 – Project proposal

As per our last lecture, I’m putting the assessment up. If you have comments that might be of relevance to the rest of the class feel free to post them here!

From our esteemed course guide.:

Task: Students must produce a proposal for their web project incorporating the following components:

1. A 1,000 word synopsis outlining what the student is planning to develop within this subject for their website project, which includes a clear description of the underlying motivation of the piece, the intended user experience, and the intended target audience.
2. A navigational diagram or flowchart, which clearly demonstrates the navigational pathways of the project.

Assessment criteria:

1. Demonstration engagement with the subject of emerging cultural practices within internet spaces
2. Demonstration of ability to develop an idea into a concept and project plan
3. Demonstration of the ability to plan and organise work schedule.

Tying things together

I’ve put the content of the evolving working page that we have made online as netcultures-html, and you can dive in to any given version and copy-and-paste it in to your webpage – e.g. this one.

The key Javascript lessons in this class are

1. Basic Javascript rules
2. Javascript functions
3. jQuery events