Thu, Dec 02

Javascript and advanced topics

Today's objectives

An introductory look at more advanced web technologies - JavaScript, server-side programming, and content management systems.

  • Client-side scripting: JavaScript
  • jQuery
  • jQuery example
  • JavaScript tools
  • Server-side scripting: PHP
    • Basics of PHP
    • Includes
    • Variables
    • Storing data
  • Content management systems
  • CMS example
  • Presentation

Reading

About presentations.

Presentations

JavaScript

JavaScript

Presentation

A presentation about presentations

In-class presentation prep

In-class presentation prep

Agenda

Agenda

Resources

jQuery example - copy and paste into your editor and view in your browser.

jQuery lightbox example

Featherlight - a simple jQuery lightbox. https://noelboss.github.io/featherlight/. Make sure to understand where the files need to go, and how it links to your HTML in order to make it work.

Assignment


Assignment 9
Citizen science: Wireframe an App

Using Adobe XD (or Sketch or Figma), create a mockup of an application, as described below.

This application is designed to let users find and report an aquatic invasive species, the European Green Crab (Carcinus maenas). Learn more here: Aquatic invasive species

Start with some paper sketches and submit for a brief work-in-progress review next class. A series of screen-sized paper sketches, which you can shuffle as you move from screen to screen, is one option. As always, do some research as to similar apps early in the process.

As noted on the web page below, the app should allow users to:

  • Send a photograph (or more) of the invasive species.
  • Send the exact location.
  • Send any notes.
  • Allow submission anonymously or with contact info.

Make sure your wireframe is well-constructed, with buttons that work, etc. Function and flow is more important than detailed visual design. Make sure to test as you go. A major part of the wire-framing process is for the designer to understand and fix problems with the navigation and flow of the app. The intent of the app is to communicate the concept to non-designers.

You will need to make decisions about features, etc., as part of the process.

As this will be a phone app, choose a phone model/size an design to that. It does not need to be "responsive" in terms of working on different screen sizes or orientations. XD's preview on device function is good for testing.

You can use resources such as UI Kits for Adobe XD but also can create your own elements, or use screen captures of existing interface elements.

Due Wed, Dec 15, 6:00 PM. Send me a link using the XD "Share for Design Review" (or similar) option.

Samples

Simple JavaScript example

See the Pen JS Alert by Robert Currie (@rcurrie) on CodePen.

Better JavaScript example

See the Pen Less annoying JavaScript example by Robert Currie (@rcurrie) on CodePen.



Lightbox with Featherlight

See the Pen Simple lightbox with jQuery and featherlight by Robert Currie (@rcurrie) on CodePen.

Next steps in JavaScript

A complete look at JavaScript is well outside the scope of this class. If you are interested, JavaScript can be used on the client side - in the browser - or on the server side. Node.js is a widely-used server side language. You can also create desktop and mobile apps with it. In fact, the editor you have been using - Atom - is written primarily in JavaScript.

Need help?

Contact me - Slack is best.


Robert Currie
This page was last updated at 2021-12-16 08:06.