Class: Entrepreneurial Journalism Technology Immersion, 3/21/11

From 6 to 7 pm this evening, I joined Selcen Onsan’s Tech Immersion class as a guest speaker. Tech Immersion is one of the five Entrepreneurial Journalism courses this spring. I want to write down a few thoughts on the session as a way of starting to iterate (and hopefully improve) my teaching methods. The notes we collaboratively generated on a Google Doc are at the bottom.

We spent the first 30 minutes or so discussing the distinction between scripting language, markup language, and otherwise, and common examples of each. They had prior, very basic introduction to HTML, CSS and PHP, but only a few people even attempted to explain to me what each was. On the subject of HTML, I stressed that it’s a markup language, not a programming or scripting language, that gives structure to content. My working metaphor is that, if the J-School building were a web page, without HTML or CSS all of the building materials would be in a pile of rubble. HTML gives the building structure and CSS gives the walls color, the rooms spacing, and other objects other stylistic elements. I’m finding it really useful to have visual metaphors people can relate to for communicating technical subjects.

On the subject of Javascript, I emphasized the fact it’s different from other scripting languages in that it executes client-side. This allows for a more rich, interactive web application experience because the user can experience dynamic elements on the page without refreshing. I also showed them GitHub’s implementation of push state and why Gawker’s new URLs are the suck. For PHP, I pitched simplicity in getting going and for Python, performance.

After we talked about languages, we spent the rest of the time on APIs, what they are, and why they’re important. I think this was more over their head. One metaphor I used, gross as it was, is that an API is the equivalent of emailing someone with a request for data, and then having that person reply to you with an Excel Spreadsheet. For the other person to understand your request, there has to be an established protocol for making it. Similarly, for you to understand the other person’s data, it has to be returned in a standard format. Abstraction and standards. We reviewed a few different popular websites with APIs, including Twitter and The Times. I also showed them how the J-School website uses the Vimeo API to load a channel of videos onto the homepage.

Preparation for the session was difficult for two reasons. First, I had little knowledge of what they had already covered in the course. Access to prior notes and a syllabus would’ve helped this. Second, there was/is a wide range of knowledge in the room. Some already knew everything I had to cover while others didn’t know anything, nor did they have a frame of reference for understanding. I think involving the people who already know things in the teaching process could make them more engaged in the class. Additionally, I could structure the lesson in such a manner that it had both higher- and lower-level takeaways.

It would nice to compile a few reference links on each topic.

Lastly, on next and all sessions I lead, I should take a picture of the participants.

Notes

HTML vs. CSS vs. Javascript vs. PHP vs. Python vs. Etc.

• HTML (Hypertext Markup Language) – gives structure to content on a page (not scripting) — Example: the basic framework of the building
• CSS (Cascading Style Sheets) – sets the design, the style book, the way the elements are displayed  Example: positioning of the rooms, color of the doors and walls
• Javascript – Scripting, action, making things happen, animation, follows commands (code that allows you to manipulate objects) – executes entirely within the browser
• PHP – Server-side scripting language. A lot easier to get your website up and running. Allows you to deploy code on a server, and have that code running right away.
• Python – Server-side programming language. Higher performance. Framework like Django. Also requires more setup. Less room for experimentation.

HTML 5: Allows you to change URL without reloading the page. (dynamic refreshing)

Terms and concepts you should be aware of

APIs (Application Programming Interfaces)

• Definition: a protocol that allows you to get data out of and push data back into a website. Allows two separate applications to connect with each other and share information.
• There is an established protocol of how the data is structured. When you made a request, you expect the response to come back in a certain format.
• Examples: Twitter, New York Times, Hunch (personal interest graph), Facebook, WordPress (XMLRPC)
• Most APIs are read/write.
• Popular with applications that deal with highly structured data.
• We’re in the information business – Stijn Debrouwere (How structured data relates to the news industry)
• Web 3.0 – Kate Ray (where the semantic web is at)

http://hackshackers.com/resources/hackshackers-survival-glossary/

Javascript, AJAX and jQuery

• jQuery – Tremendously popular Javascript library. Libraries abstract away the difficult part of making your Javascript work cross-browser and cross-platform.

Performance & monitoring

• Backend – How quickly the server returns a response to the request. The number of sites running on the server (if you’re on shared hosting) and plugins you have installed can affect this.
• Frontend – How quickly the page renders in the browser for the end user. The physical size of your web page, number of images and media files, Flash, and Javascript can all affect this.
• Tools:
  • Pingdom – Checks whether your website is up or down. Can monitor for a certain string on the response
  • New Relic – Server-side application monitoring.
  • BrowserMob – Test real browser load time from a variety of locations.

Version control

• Definition:
• Git – Distributed version control developed by Linus Torvald for the Linux project. A little more complex, but much better in many aspects. GitHub is a popular website for hosting Git repositories
• Subversion – Everyone checks out of a single master repository. WordPress.org uses this.

Redundant backup