Software: Web Development, Collaboration, Productivity

Web Development & Web Basics


"Explainers" about the development of static websites, interactive websites, web-applications:


Links to and brief descriptions of pages which give high-level overviews of Web basics.


HTML

http://designshack.net/articles/html/what-is-html-back-to-basics/ A good extremely broad, high level, conceptual take on HTML. Discusses the basics of tags and attributes as well, but primarily gives you the concept of what HTML is and how it connects to CSS and Javascript.

http://designshack.net/?p=25480 A more in-depth look at how an HTML document is structured. This will tell you most of what you need to know to construct a basic HTML web page. (Designshack appears to be a really good resource for this stuff).

The HTML Document Object Model

http://www.w3schools.com/js/js_htmldom.asp This page provides a concise overview of the Document Object Model (DOM), which is a tree of objects created when a page loads, allowing Javascript to access and modify all of the elements of a page.

CSS

http://designshack.net/articles/css/what-is-css-back-to-basics/ A high level overview of CSS and what it is, with a brief introduction to selectors and properties, from the same series as the HTML overview above. Reading the HTML article first is recommended 

http://designshack.net/articles/css/css-selectors-just-the-tricky-bits/ A deeper dive into selectors, including how to select child and sibling elements, the universal selector, and selecting attributes. The bottom of the article links to some even more complicated and confusing selectors, but this is probably as far as you need to go to understand and read most CSS

http://css-tricks.com/pseudo-class-selectors/ This article is an in-depth look at CSS pseudo-selectors. if you see something like a:hover in a CSS selector, this is where you need to look. It assumes significant knowledge of CSS on the part of the reader, so it's probably best to have read and understood the designshack articles above first. I will be looking for a more beginner-friendly article (email me if you know of one).

http://www.w3schools.com/css/css_boxmodel.asp A basic introduction to the CSS box model. 

Javascript


https://developer.mozilla.org/en-US/docs/JavaScript/Guide/JavaScript_Overview Recommended for people who know at least one other programming language, this page will give you a fairly concise overview of what Javascript is and what sorts of capabilities and functionalities it has.

http://javascript.about.com/od/reference/p/javascript.htm - This page is an extremely high level overview of what javascript is, and what its capabilities are. It's so high level, I'm not actually sure it's useful -- there definitely isn't any actual code, and relatively little diving in to specific functionalities or capabilities of JS.

http://www.w3schools.com/js/js_obj_intro.asp - This page contains important syntax for Objects in javascript -- primarily how to access the functions and methods associated with them. Since javascript uses a tree of Objects to access and modify HTML elements, this is very important.

http://www.w3schools.com/js/js_examples.asp This page provides links to a ton of ready made simple example javascript files. It shows you the source code and the result of that code side by side in different windows. Even better, you can modify the source code and update the result window to see how modifying the javascript changes the output. I think this is probably useful if you want to quickly learn about/experiment with a specific functionality.

JSON - Wikipedia, the free encyclopedia This Wikipedia article describes the basics of JSON (with examples!), a platform independent (though derived from JavaScript), widely used data structure format. It is designed to be both machine parseable and human readable.

Prototype

Prototype is a Javascript framework for simplifying code and extending the DOM. It is designed to take some of the fuss out of JS programming by handling all kinds of functions for you. There are other libraries which serve similar purposes,  like jQuery. We focus on Prototype because it's used by Qualtrics, but for wider internet applications, the consensus seems to be jQuery.

The best place to learn about prototype, at least right now, seems to be http://prototypejs.org/ (recommended only for people fairly familiar with JS).

http://www.tutorialspoint.com/prototype/index.htm has a basic rundown of what functionalities prototype provides, and might be a decent resource for trying to find out how to do a specific thing (like select and return all elements of a certain class in a doc).

http://www.webmonkey.com/2010/02/get_started_with_prototype/ A tutorial which walks you through an example of using prototype. Really designed for people who want to  delve into and learn it rather than simply understand how to read it.


Code Creation, Editing and Management


Straightforward screencasting software

Screenflow, Snagit.
Jing, Camtasia, Screen-o-Matic (web/browser based, free)

Screencasting lets you record videos of your screen along with audio of any data extraction, programming features, or even explanation of experimental design. It's extremely useful for teaching people new skills or explaining concepts as they can then revisit the video at their own pace, while trying to reproduce what you did – which they can see *exactly* from the video. Also, it saves a lot of time in teaching the skills to new people.

Software relevant to Research


Knowledge Management

Conducting Online Learning Research & Experimental Psychology

Qualtrics. Most survey software is easy to use but not very powerful. I've found qualtrics to be a complete game changer. There isn't a single experiment I've tried to run that I wasn't able to program in qualtrics. I use it instead of professional software suites like E-prime and Matlab's psych toolbox. You can customize the underlying html code and their customer service has given me many add-ons and even novel code.

PACO is an interesting mobile app (currently in invitation-only beta on Android), which has been used both inside and outside of Google for research using "Experiential Sampling" techniques.


Skilled Online Search



Personal Knowledge Management

Most of us probably don't even realize this is a specific concept – Personal knowledge management (Wikipedia).

Papers by Mekentosj & Springer
Wiki software
Question & Answer software that can be personalized: Article: 5 Free Solutions To Create A Question-Answer Website
Google Chrome's bookmark system (when used effectively)
Repurposing of Google Custom Search
Repurposing of Google Search
Evernote: Any word document, project notes, stimulus materials, directions, files – any text whatsoever that you'll ever have to retrieve – can be stored in Evernote. Since it's searchable you don't need to organize note documents as much into files and folders as they can be easily found again.


Software helpful for Individuals, Research Labs, Startups

Many of the challenges (e.g. productivity, collaboration, building websites) faced in managing a cognitive science or online learning research lab are analogous to those faced by startups or small businesses, and so there are software solutions and knowledge resources that are helpful for both of these very different kinds of organizations.

Building websites

Google Sites
Squarespace
Weebly
Dreamweaver
Twitter Bootstrap

Information storage & retrieval, collaboration, productivity


Productivity

Gmail, Google Calendar. 
Rescue Time [Web and Desktop based software that automatically tracks time, allow logging of hours, gives option to "focus" and block sites for specified time periods. Has Team and Group options with Manager features as well. Works with Google Apps]
Boomerang: This is a plug-in for Firefox and Chrome that lets you schedule emails to be sent at a later time, or reminds you if someone hasn't responded to you. It's great for email reminders (to yourself or multiple people) but now only a certain number are free every month.
Mozy [Automatic backup solution]

Collaboration




Software Development & Programming

Google Apps Script
Google Web Toolkit — Google Developers
Sublime Text [An editor for writing programs and code]
GitHub [Github is a website (and has a desktop application) that many programmers use to share, edit code, and "track changes" or have version control]
Phabricator [Phabricator helps programmers look at and review each other's code] 
PACO: Experience Sampling Experiences; On Building a Mobile Research Platform for Behavioral Science | Argonne National Laboratory

Learning programming skills