September 2008 Entries

Whoa. Through looking at my stats, I happened to find that .net Magazine published my article today. I wrote this article for the April 2008 magazine issue, and today they published it online. I’m very excited to not only find this out, but to also find it featured so prominently on the home page! Very, very cool. Give it a read?

Unrelated Note:
If you haven’t already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

Due next week: compare and contrast 2 applications (one being a desktop application, and the other being a web application), Today’s class is a PHP Introduction. PHP is a server-side scripting language for creating dynamic and interactive websites. Open source, free alternative to competitors like Microsoft’s ASP. Often used together with Apache web server (but is not limited to) on various operating systems. PHP Hypertext Preprocessor, original name was personal home page? Web server interprets PHP code, not visible on the client side. Supports database (like MySQL) and may contain text, html tags, and scripts. Can run on different platforms.

<?php is the opening tag and ends with ?>. Can be placed anywhere in the document. Must end with a semi-colon. Two basic statements to output text: echo (more common) and print. Comments: // (single line), and /* … */ (multi-line). In class exercise… (opening Dreamweaver).

Like JavaScript, PHP has variables for storing values, strings, arrays, numbers, function results… Unlike JavaScript, all variables start with a ($) dollar sign. Like JS, variables are alpha-numeric — it can start with a letter or underscore (but not a number). You can have mathematical or logical operators. Case-sensitive. Can use keywords (like return or var) but it’s recommended not to. Single or double quotes are okay, just be consistent. Strings (like in JS). The concatenation operator ( + ) in JS is different in PHP… In PHP it is ( . ) (So “Hello” . “World” instead of “Hello” + “World”). PHP also ignores white space. The strlen() function is used to find a length of a string (counts the number of characters) and can also be used in JS. Example: <?php echo strlen(“Hello world!”); ?> would output 12. Both PHP and JS start counting at 0. Getting string lenghts is often used in functions (for example: counting characters in a URL). The strpos() is used to find the position for a string or character within a string. If match is found, it will return the position of the first match. If it is not found, it will return FALSE. Operators are similar to JS, but not all. There is no ===. Just the two (because it doesn’t need to find the variable type). There is && which means and. || means or. ! means not. += (x+=y) Example: x=x+y.

<?php $myname = “Jina”; echo $myname; ?> will simply output “Jina”.

If else statements are same concept as in JS, but it uses elseif instead of else if. Switch statements concept is also the same, and is a quick way of doing the if else if statements. Break basically says “if this is true, don’t worry about the rest of this function”. While and for loops are similar as well.

Going over different statements (for, while, foreach, etc.). Will go over these in more detail next week. More than 700 built-in functions available. All start with the word “function()”. Name the function so it’s easier to understand what it does. Use curly braces like in JS. You can add parameter in between the parenthesis which is like a holder (like variables). Functions can be also used to return values. arrays can store one or more values in a single variable name. Each element in the array has it’s own ID so it can be easily accessed. Three types: numeric (automatically assign an ID or manually assign an ID), associative (ID key is associated with a value), multidimensional (each element in a multidimensional array can also be an array).

PHP forms use $_GET and $_POST. They can retrieve information very quickly. It’s good to do validation on both the client side and the server side. A database needs the server side to talk to the browser. Without it, it can’t. action=”index.php” means it’s running the code within that file (index.php). Null means there’s nothing there.

Also as homework, create a sticky form (which we just created). Make a list of all the pages that were in the Sitemap (done last week) in HTML. Instructor’s notes will be uploaded by tomorrow night in the directory.

Unrelated Note:
If you haven’t already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

Started class with a quiz and handing in homework… Usability on the cheap. Different techniques: formal usability inspection, consistency inspections, standards inspections, guideline reviews, pluralistic walkthroughs, cognitive walkthroughs, heuristic evaluation. Heuristics: rules of thumb or guidelines, what are good practices? Examples: links should be obvious. Text should be easy to read.

Heuristic Evaluation is a usability engineering method for finding the usability problems in a user interface design so that they can be attended to as part of an iterative design process. Heuristic evaluation involves having a small set of evaluators examine the interface and judge its compliance with recognized usability principles (the “heuristics”).

—Nielsen and Molich, 1990; Nielsen 1994

Have multiple people look for issues to catch as many as possible. Brief introduction to Jacob Neilsen’s work, and his mind-changing, and somewhat controversial ideas. His Usability Heuristics:

1. Visibility of system status: keep users informed about what is going on, appropriate feedback.
2. Match between system and real world: speak the user’s language, use familiar, real-world conventions, natural logical order.
3. User control and freedom: let users back out, exit (support undo and redo).
4. Consistency and standards: use standard conventions and language to help users know what to do.
5. Error Prevention: better than a good error message is preventing that error in the first place.
6. Recognition rather than recall: make objects, actions, and options visible. Avoid mystery meat navigation.
7. Flexibility and efficiency of use: accelerators (keyboard shortcuts) speed up the interaction for the expert user, allow users to tailor frequent actions.
8. Aesthetic and minimalist design: avoid irrelevant or rarely needed information, keep things focused.
9. Help users recognize, diagnose, and recover from errors: errors should be in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
10. Help and Documentation: even if it’s better for a system to be used without documentation, it may be necessary to provide help and documentation. Make it easy to search, focused to the use’s task, don’t be too large.

Exercise: heuristic evaluation of petrosains.com.my. Assignment: do a heuristic evaluation of whitehouse.gov. Organize your report by the 10 heuristics. Use example from appendix in textbook, page 444, and do a professional report. Also do reading assignments.

Unrelated Note:
If you haven’t already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

This is just a quick update regarding the new interview that SitePoint posted today in preparation for my upcoming speaking gig next week at Web Directions South in Sydney, Australia. I leave this Friday night, and I’m totally stoked (which is how I get any time I get to visit a new country (or new continent, for that matter). Hope you like the interview, and I look forward to seeing and meeting everyone that’s also going to Sydney!

Unrelated Note:
If you haven’t already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

Okay, of all the things I’ve posted that I want, this Robot Lamp Base at Urban Outfitters needs to be in my apartment NOW!!! Make that happen, okay? Thanks!

Unrelated Note:
If you haven’t already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

There are a ton of web site design and development galleries out there. Every once in a while, one comes along that actually catches my attention. The most recent of these is MinimalSites.com, a gallery that features beautiful, minimal web site design. There is a lot of inspiration here. Check it out for yourself.

Unrelated Note:
If you haven’t already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

Wow. The products on this site, Square Cat Habitat, are not only fun-looking for cats, but are stunning for me. These are something I’d actually be happy to have in my apartment (and I’m sure Zali would be happy, too). The products look very elegant and modern. I might end up putting down a lot of money at this site…

Unrelated Note:
If you haven’t already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

Excuse my mess of notes, I might have even typed some of this wrong. Just typing as fast as I can as she moves quickly. Today’s class will go over some JavaScript. Next week we’ll look at PHP. See new syllabus online. Will be quizzed. JavaScript isn’t Java. JavaScript has 2 versions, but we’ll be talking about client-side JavaScript, which means processing is done by the browser, not the server.

JavaScript can put dynamic text into an HTML page, react to events (button click, rollover, etc.), change the content of an HTML element, validate form data (but don’t count on it as the only validation), detect visitor’s browsers, get date/times, get localization, create cookies, etc.

• Use semi-colons at the end of statements for clarity.
• JS is case-sensitive; pay attn to case and spellings, or it can trip you up. var does not equal Var. Var wil not work like var.
• Variables have to be alpha-numeric or have an underscore.
• JS ignores white-space, like HTML.
• Single quotes vs. double quotes: you can use either, just be consistent.
• Naming functions/variables: you can have your own pattern in naming conventions; just be consistent.
• Variable names can’t begin with a number, but can be in the middle or end. Underscores are okay.

The DOM (document object model) can be manipulated with JavaScript.

A javascript statement is a command for the browser; tells the browser what to do. Statement block: the brackets and all in between {}

Variable — contemporary container to store a value. Local (inside a function) and global (at the top of the page). Global: var_x=4, then var_x=2 : 2 would override 4. Local: function cat() { var_x = 4 } only the cat function can use 4. Nothing else. It’s can help to put all the global variables at the top (organization tip). You can even just declare it, and not have to define a value for it. JS reads code from top to bottom, so order stuff in order of how it should be run. If x=2, and then further down x=4, whatever comes after that will read x as 4. Can’t change that unless you write a new function.

Operators: Something to affect the variable, whether you’re assigning it, adding to it, subtracting from it, etc. The (=) [assigning] in var_x=1 is the operator. A (+) [add, can also subtract, multiply, divide], (==) [is equal to], (===) [is equal to, and is an integer]. Structure works the same in PHP.

If/else statements and comparing things. If something happens, then do something else. The “Hi” popup will only happen if x does in fact equal 1. Else if: or if this happens, do this… If x equals 2, do this. Else: otherwise, do this…. If x does not equal 1 or 2, it does this.

(We’re opening up Dreamweaver, and giving it a try…

Formatting: it could go all on one line or indented; personal preference.

A String is text (paragraph, whatever). In quotations. Anything. document.write(“<h1>Hello</h1>”); NaN means “not a number. You can also round, max, and ciel (finding the top range of numbers) with Math: Math.round, Math.ciel, Math.average, etc.

POP QUIZ TIME!

Comments can be single-line (//) or multi-line (/* */). It’s nice to have JS begin with Author name, version, last updated, etc. Instantiating for loops.

Assignment for next week is to decide what your final project (web application) will be, and do a site map (flow diagram) for that project. At least 2 levels deep. Need at least 12 steps (tasks) (not to do one task, but various tasks; signing in, creating an account, etc.. A product catalog of some sort and login for the project is required. With a description of what your project is and what you expect users to do. (Show what happens if a path is successful (logging in) or if it fails (error page), etc. and all the pages planned for the web application).

Also, do assigned reading.

Unrelated Note:
If you haven’t already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

Teacher: Kathleen Watson, of Kats Vision. Instructor wants everyone to email her so she has our email addresses. Lots of collaborative projects. If class must be missed, email her. Create a folder with your name in the class server. Buy Usability for the Web, by Tom Brinck, Darren Gergle, and Scott D. Wood. “It’s dated, but the principles hold true”.

Assignments: Example of poor usability, resume (paper version & web site), heurisitc evaluation, phone prototype, phone testing, final project (“the biggie!” — weeks 5—15 — a web application designed from the ground up, with spec documentation which is enough to be handed over to an engineering team).

Optional Usability Workshops (supportive) are Every Friday, Building 180, room 545, 8:30-11:20am. (Now for class introductions)…

Small groups sharing their idea of what usability is. Textbook usability definitions. Qualities of Usability. What Usability involves, why it’s important. Design is everywhere. Take notice of things don’t get designed well How do you turn on the shower?. Which side of the car is the gas tank on? For homework, use BadDesign.com as a guide, and find something designed horribly, and how it could be fixed.

Listening to Talk of the Nation Science Friday clip about bad design/good design.

Unrelated Note:
If you haven’t already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

After my class, I have had JavaScript frameworks on the brain. Part of my homework assignment is to read up on a couple. I thought it might be kind of fun to see what the general public thought those two should be, since I know some JavaScript ninjas that have some strong opinions; whatever they may be, they will be far more educated than mine, considering I am a total scripting noob. So I used Twitter to poll my “followers”, just to get a quick grasp of what those opinions are:

“all right javascript folks: I have to read up on a couple js¹ libraries for class. I’ll let majority rule: which 2?”

—Source

After posting this, I definitely got what I asked for (strong opinions, that is). Besides the mini-debates going on regarding which frameworks and libraries were the “best” ones, I also got a surprising amount of negative feedback on using them in general². It reminds me of the very heated debates that go on about CSS frameworks.

Clarification: just as I would prefer to write my own CSS rather than use a pre-baked CSS framework, I also prefer the idea of learning to write my own JavaScript rather than rely on libraries that do the work for me. But that’s not something I can do in one week, and that’s not my homework assignment.

I value all of the opinions that were expressed, and I’ve taken all of the comments into consideration (even the ones that didn’t quite answer my question). Here are few of the various responses I received through Twitter:

“go Mootools for fastest processing and scalability. run the test: http://mootools.net/slickspeed”

—snoebiz

“Easily jQuery and Prototype – both are excellent, both are fundamentally different.”

—kylefox

“writing jQuery won’t help you learn JavaScript. Save that for after the semester. You should learn Prototype and YUI”

—ded

“i’m a fan of jquery, as it makes the connection with css,html (things i know) effortless”

—roxstyle

“jQuery is powerful and quick to learn. YUI has robust UI element and animations. Together they are a powerhouse.”

—jgillick

So which ones did I pick? I did say I would let majority rule. And if I went by the chart I have here (showing all the results gathered), it would look like jQuery (definitely the popular kid in school) and Prototype:

1. jQuery 45.45%
2. Prototype 18.18%
3. Mootools 16.36%
4. YUI 9.09%
5. Dojo 5.45%
6. APE 1.81%
7. Scriptaculous 1.81%
8. Sprout Core 1.81%

However, after I decided to talk to a guy I have worked closely with — a guy with a superhuman JavaScript brain (don’t tell him I said that) — I realized that it makes sense to pick a popular, easy one, and then pick one that was very different, to get a better range of what’s out there. It makes sense to me. So I’m going to read up on jQuery and Sprout Core. Thanks to everyone for the suggestions!

Footnotes

1. Corrected spelling. ↩
2. See Shaun Inman’s response, for one. ↩

Unrelated Note:
If you haven’t already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

Edit: Jeff Croft has written a post that is relevant to this topic. While here, I talk about which Frameworks I choose, his post would be the place to comment if you feel strongly against Frameworks in general.

So I was waived out of Typography class (bummer), and then waived out of Web Technology 1 class as well (HTML/CSS). So I’m sitting in Web Technology 2 class. I’m gonna live blog my classes. So here is Day 1.

Teacher: Julia Debari, of Avenue A | Razorfish.

Here come the First Day introductions. We have to answer how comfortable we are with JS, CSS, PHP, and MySQL. Today’s class is just a brief overview of technologies available, as well as going over what we’ll be doing/learning in class.

Final project is a working web application that uses a database and front end presentation layer. Midterm checkpoint. Along with that, we’ll have three mini projects: drop down navigation, template site, and e-commerce mini site. First part of class looks pretty basic. Setting up a web host (with PHP/MySQL, FTP capabilities, Apache, etc.), getting a text editor, brushing up on HTML/CSS. We’re debating web hosts and setting up accounts (unless we already have an account).

Overview of JavaScript libraries. We’re pulling up jQuery’s site, and looking at examples of what could be done using it. Now we’re discussing YUI, and looking at their examples. Now a discussion of AJAX.

Moving on to other technologies: Ruby on Rails, and the way Model View Controller (MVC) works, and what Agile Development means, and “scrum”.

Going back to JavaScript, we’re looking about JSON now. “name value pairs”. Now back to jQuery. Discussing compressed code vs. uncompressed, as well as obsfucation (not recommended for us). She’s throwing words around like constants and variables and functions and constructs and… well, I hope she starts at the beginning with all this stuff. :) She’s showing us jQuery UI. (Saved for later: jQuery for Designers. Chaining.

If we comment our code, we get extra credit.

Homework is to have web hosting set up (done) and read up on a couple libraries and get familiar with them.

Unrelated Note:
If you haven’t already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!