ScreenReader Coding Workshop

Topics covered

General Intro

WiFi Access: (username) guest1 (password) asreasez Helpers: Claire, Atul and Taeyoon

Today we are going to have a whirl-wind introduction to some concepts in coding and use a screen-reader compatible text editor to try out some code examples.

We will then follow-up with a discussion of the tools and techniques used here to teach and learn coding with limited vision or blindness. Basically, we are trying to learn how to do it better at the Processing. As some of you may know, processing is not an accessible language by any means.

Let's begin by introducing ourselves

Introduction to Algorithms

Algorithms are just a set of instructions to complete a task. Computers need to be told exactly what to do before they can do anything (computers are not all that smart).

Activity:

Think about all the steps that it takes for you to tie your shoes (take a few minutes and share the steps with the group...I will try to tie my show based on your instructions).

The same way we perform a number of small discrete tasks in order to accomplish a an operation like tying our shoes, so do computers. Algorithms start with some input data, they do some calculations and stop when the answer is found. An example is the google maps applications. It starts with your location and your desired destination and calculates the best route to get there, taking into account many different factors. Algorithms are used a lot in code and programmers work tirelessly to find the most efficient way of performing tasks.

Symbols and Syntax

Punctuation

Important punctuation symbols

  1. In HTML,"< >" angled brackets or tags contain element types. For example, header level one or h1 tags are opened using <"element type" > and closed using < /"element type" >
  2. In javascript, "{}" curly braces are like a fence that protects the statements that live inside.
  3. In javascript, "()" left paren, right paren - parentheses contain parameters for the statements.
    4. The above mentioned punctuations require left and right symbols to be complete. Forgetting the right or "closing" symbol is one of the most common mistakes that coders make and the # cause of headaches in the United States.
  4. "," commas separate numbers from each other.
  5. ";" semi-colons separate parts of code that need to be identified as complete orders or "thoughts". Like a period in written human language

Activity:

 Tactile code examples

HTML

HTML Elements/Tags

  1. Again,angled brackets ("< >") contain element types or tags in HTML and they should always start with <"element type">, followed by your content and end with <"forward slash element type">
  2. The head tag can contain the document's style, title, meta information and links to accompanying information (separate code folders or libraries). Head tags are written as <"head"> your content <"forward slash head">
  3. The body tag defines the document's body. The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. It is written as <"body" > and closed using < forward slash body >
  4. The content of a heading level one or h1 is contained in <"h1" > and closed using < forward slash "h1" > whatever you write in between is displayed on the screen and read by your screen reader as a higher order heading
  5. The content of a heading level two to six or h2-h6 is displayed on the screen in descending size and read by your screen reader in descending order
  6. The <"div"> tag defines a division or a section in an HTML document. The <"div">tag is used to group block-elements to format them with CSS.
  7. The <"p"> tag allows you to insert a paragraph of text into a page. It is written as < p>your content< forward slash p>" (without spaces)
  8. The <"text"> tag allows you to insert a text into a page without the spacing between as in the paragraph tag. It is written as "< text>your content< /text>" (without spaces)
  9. links on a page are produced using the <"a"> tag. They are written as "< a "space" href="your link in quotations"> text to be displayed< /a>" (without spaces)
  10. The <"button"> tag defines a clickable button. Inside a <"button"> element you can put content, like text or images.
  11. The <"nav"> tag defines a set of navigation links.The <"nav"> element is intended only for major block of navigation links. Screen readers, can use this element to determine whether to omit the initial rendering of this content.
  12. The <"form"> tag is used to create an HTML form for user input. The <"form"> element can contain one or more of the following form elements: <"input"> <"textarea"> <"button"> <"select"> <"option"> <"optgroup"> <"fieldset"> <"label">
Find a complete list of HTML tags

Activities:
  1. go to the file ope in the application Notepad++ and run it by using the keyboard short cut "ctrl+alt+shift+r"
  2. copy the html at the link provided below, open in Notepad++ and edit the elements. link to code example

    3. Variables

    What happens when we want to interact with a website? We need Javascript! Javascript is the most popular coding language in the world. We use it to change HTML element content (innerHTML), attributes as well as collect, manipulate and validate data.

    Variables are simply placeholders for data and meant to change with our interactions and other variables. Variables are like a big bucket with a name on it. You can put anything you want in that bucket, but the name stays the same. In this way, we change the value of the variable but not the name of it.

    In Javascript, we first declare our variable name and its original value. We write var name; We then initialize it by giving it a value. We write var name=any number, or string of text in qutations; After you delare and initialize your variable, you can call upon it a number of times and reassign its value. In our First example, we will have a counter variable that starts at zero, but adds 1 everytime a button is pressed. Global Variables − A global variable has global scope which means it can be defined anywhere in your JavaScript code. Local Variables − A local variable will be visible only within a function where it is defined. Function parameters are always local to that function.

    Functions

    Like when we had to perform several sub tasks in order to tie our shoes, a function is a "subprogram" that can be called by code. Like the whole program itself, a function is composed of a sequence of statements. Values can be passed to a function, and the function will return a value.

    Procedures and Generalizations

    Operators can be very useful for coding complex behaviors. Common relational and operators include:

    Relational: Assignment:

    Activity:

     lesson and activity adapted from Taeyoon Choi

    The goal of generalizations is to make a solution for one problem usable for a larger class of related problems. This is the ultimate in code reuse: build it once and use it over and over again. As long as the generalization is done correctly, there is no danger of it failing, though there is always the possibility of not taking it far enough.

    Activity:

     Example2

    Discussion