Let's get familiar with W3Schools.com, a common reference for beginners in web programming. For this exercise, don't worry if the code is a bit confusing. In fact, if you aren't a bit confused at times, you probably aren't on the path to learning. We just want to experience how to use a reference like this one to learn new things.

1. Go to this link for basic HTML on W3Schools. Get familiar with how it provides information and examples.

2. Click the Try it Yourself button. Edit the example code and click Run. You will find many examples like this on the internet as you learn to program for the Web. Most references provide code examples you can use, and sometimes they provide interactive testing like W3Schools.

3. Next, search 'html bold' on Google, as if you wanted to know how to create bold text in a web page. You will likely see a search result from W3Schools titled "HTML b tag". Click that link. Review the explanation and the Try it Yourself example.

4. Now, find how to create a clickable link in a web page. Hint: include "html" plus something else in your Google search. Getting the keywords right in a search will go a long way.

5. Do you know how to create a link in HTML now? Share with classmates what you found and how you found it.

There is a lot of help for programming available on the Internet. With practice you will learn how to search and filter results to get the answers you need quickly.

Self-learning is a required skill in the 21st century.

Let's make a website:

1) Go to Codepen.io and log-in. Make an account if you haven't yet.

2) Now go to this link to see the framework of a basic website.

3) Click the Fork button in the upper right to make yourself a copy of the website.

4) Follow the instructions of your instructor to add your name, a paragraph, a hyperlink, and an image.

5) Congratulations! You made your first website!

For Loops are used to execute the same code a certain number of times. They are a great way to cut down on the amount of code you need to type.

Syntax

for (initialization; condition; final expression) {
        statements to execute
        }

An initialization is used to create a variable with a value before the loop starts.

A condition is an expression to check before each loop. If the condition is true, the statements inside the For Loop are executed. If the condition is false, the loop will end and the program will move to the first line of code after the For Loop.

The final expression is used to increment the counter variable created in the initialization.

Example

for (var i = 0; i < 10; i++) {
        var enemy = enemyGroup.create(i * 200 + 100, 0, 'enemy');

    }

Example Explanation

This code is used to add 10 enemies to a game with a loop. The first thing that happens is the variable i is initialized with a value of 0 (var i = 0).

Next, the condition i < 10 is evaluated. Since i = 0, the condition evaluates to true (since 0 is less than 10). Since the condition evaluated to true, the var enemy = enemyGroup.create(i * 200 + 100, 0, 'enemy'); line of code will execute to create the first enemy.

Before starting the loop over again, you need to increment the variable. i++ will add 1 to the value of i giving it a new value of 1.

This loop will continue to run until the condition i < 10 evaluates to false. This would happen when i has a value of 10. The condition was set at i < 10 since we knew we wanted to create exactly 10 enemies.

We could have added 10 enemies to the game without using a loop in only 10 lines of code, but we accomplished the same thing without as much code. 10 lines of code may not seem like much, but imagine that we want to add 100 enemies. Setting the properties (velocity, bounce, animation) of the enemies would be extra code to do each of those 100 times.

More Information about For Loops

Information about While Loops - these loops execute code while a condition is true

Standard Deliverable ✓

1. Read this article on conducting user interviews.

2. Create a CodePen to summarize the article. Click the button below to get a starting template.

3. Read this blog post on UX research. You will notice that contextual inquiries and surveys are two additional techniques to conduct user research. Include summaries of these two techniques in your CodePen. Similarly, add a summary of competitive analysis, another important research activity.

4. Discuss these techniques and why they are important for developing solutions for people.

Advanced ✓+

Follow any link found in the blog post on UX research to more in-depth material. Include a summary of what you found in your CodePen.

For this exercise you want to investigate people’s use of messaging apps, whether email, texting, Google Hangouts etc. Imagine you are an entrepreneur that is beginning to work on a new messaging app. For each interviewee ask questions that will help you understand the following.

• What problems does mobile messaging solve for them?

• What frustrations do they have with messaging?

• What apps do they use and why not others?

• What are the main reasons for messaging people?

Standard Deliverable ✓

1. Create an interview script with at least four questions to guide you in an interview. Use this template to get started with your interview script.

2. Interview four people (two in class and two outside of class) about their mobile/online messaging preferences.

3. Summarize your findings for each question in the space provided in the document.

Advanced ✓+

Based on your findings, briefly describe an improvement that could be made to a particular product (e.g. email, texting, or instagram etc.), or describe a concept for a completely new product. (This would be a hypothesis!) Include your concept at the end of your interview script document.

This is an on-ramp to learning core concepts in Informatics and developing for the web.

• Web Programming (HTML, CSS, Javascript)

• User and Product Research (Interviews, Personas, Competitive Analysis)

• Interaction Design (Interface Sketching, Interaction Storyboards, Prototyping)

• Data (Spreadsheets, Data Types, Basic Charts)

You will need to learn how to search for answers, try things yourself, and develop unique solutions ... all while collaborating with others.

Authors

• Justin Smith, Pike High School

• Jim Lyst, Indiana University School of Informatics and Computing at IUPUI

• Michael Frontz, Indiana University School of Informatics and Computing at IUPUI

Copyright © 2017 Justin Smith, Pike High School; Jim Lyst and Michael Frontz, Indiana University School of Informatics and Computing at IUPUI

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. You are free to use, share, or adapt this material for noncommerical purposes as long as you provide proper attribution and distribute any copies or adaptations under this same license.

What is Javascript?

-Javascript is a dynamic, object based programming language -Works with your HTML and CSS -Used to make websites interactive and also used in video games

Variables

• Variables are names that are associated with a value and that value can change.

• In JS, you can use variables to hold the values of text/string, numbers, or objects.

• A variable is used to store information for later use, similar to storing values for x and y in algebra.

• Start by declaring the variable in your JS code like this:

Variable Naming Rules

The key to using variables it to give them a meaningful name, so that it is easy to understand in your code.

Rules:

1. Must begin with a letter

2. Names are case sensitive (Ex: FirstName does not equal firstName)

3. No spaces in the name - if using multiple words just put them together

4. Start with a lowercase letter and capitalize the first letter of any other words used in the name (Ex: firstName, lastName)

5. Make sure the name is meaningful (Ex: firstName means more than x or y)

Additional HTML Elements

Input - gives the user a textbox to type into

<input id="inputName" placeholder="What you want the text on the input to be goes here"></input>

Button - used to allow the user to make something happen

<button onclick='functionName();'>Text on the Button Goes Here</button>

functionName() will connect to a function that is in the Javascript.

Functions in JS

Functions are blocks of code designed to perform a specific task.

Functions are executed when something calls it (clicking a button, clicking a hyperlink, hovering, etc.)

For example, if you are on Amazon placing an order, when you click Submit your order is processed. Clicking the Submit button would call a function that would process your order (charge your credit card, ship the order, etc.).

Function Syntax

Assignment

Standard Deliverable

1) Use the Codepen we created together as a starting point. If you don’t have that, you can click here.

2) Add or change the following things about your website:

a. Add a 3rd Input to your HTML to collect some other type of info about the user (age, date of birth, favorite food, etc.)

b. Add a Variable to your JS to store that 3rd input

c. Add a line of code to your displayMessage function that will pull the user’s response into the JS

d. Update the welcome message to include that new piece of information about the user. 

3) Make sure you test your website to make sure it looks and works like you want it to. Double-check that your welcome message displays with good punctuation, spelling, and spacing.

4) You can submit a link to your codepen. Be sure to save your work occasionally!!

Additional Activity

Print this document and follow the instructions.

With what you know so far, you are limited on customizing your website. What if you wanted each paragraph to look different??

Class vs. ID

Class - use for multiple elements that you want to have the exact same format

<p class=”paragraphs”>Paragraph 1</p>
<p class=”paragraphs”>Paragraph 2</p>

ID - use for one element that you want to have a special format

<p id=”p1”>Paragraph 1</p>

Syntax

Resources

Classes on W3Schools

IDs on W3Schools

Assignment

Here is a codepen file that has been started for you with information about how to make good decisions with your smart phone. Click the Fork button at the top to be able to edit it. Leave the file name alone (“Classes and IDs Assignment - Smart Phone Safety Website”).

Standard Deliverable

1) Add one more smart phone tip to the bulleted list (this will make 5 total)

2) Add a relevant image from the internet to the HTML

3) Use a Class to format the font-family and color of all of the bulleted items (Reminder: this requires a change in your HTML for each bulleted item)

4) Use an ID to format the font-size and background-color of ONLY the bullet point you added (Note: it is possible to have a Class and ID for the same HTML element - <p id=”id-name” class=”class-name”>)

Advanced Deliverable

1) Add a hyperlink to the source of the image OR make your image a clickable link

2) Apply a ‘gradient background’ to your page. Investigate the syntax at W3Schools. (Hint: if you want to style an entire page, you can add the formatting to the <html> tag in your CSS)

Code Review Exercises:

1) IDs - Seasonal IDs

2) Classes - Apples and Bananas Classes

3) Extra Lessons and Challenges

An object is a collection of related data and/or functionality. This usually consists of several variables and functions, called properties and methods when they are inside objects.

Properties are the values associated with an object. They can usually be modified, added, and deleted.

Methods are the actions that can be performed on objects. They are properties containing a function definition.

Car Object Example

This would all work the same in a video game. In a video game, you might have a character object. You can create as many versions of that character object as you need.

Properties of the character object could be hair style, skin color, clothing, eye color, weapon, special move, etc. Each of those properties would have a value:

character1.clothing = "red_flame_dress"
character1.weapon = "fireball"
character1.eyeColor = "blue"

This could all be combined in code like this:

var character1 = {clothing:"red_flame_dress", weapon:"fireball", eyeColor:"blue"};

The character would also have methods associated with it. The character could do things like walk, run, use their weapon, etc. It would look like this:

character1.run();
character1.throwFire();

So far, we've only focused on content for a webpage using HTML. What else might you want to change about this webpage about Smart Phone Safety to make it more engaging or attractive?

CSS Syntax - used for design of a website

Common CSS Properties

-color (text color)

-font-family

-background-color (color behind text)

-text-align (center, left, right)

-font-size (measured in pixels abbreviated as px)

-margin (in pixels)

-height (in pixels)

-width (in pixels)

CSS on W3 Schools

CSS Colors (These 3 options would allow be the color Red)

1) Use an exact color name:

color: red;

2) Using an RGB value:

color: rgb(255, 0, 0);

3) Using a hex value:

color: #ff0000;

This allows you to customize the colors you use to make your website more dynamic!

Color List

HTML Color Codes

Adding Comments to Your Code

HTML:

<!-- Write your comments here -->

CSS:

/* Write your comments here */

Why would adding comments to your code be important?

Note: Shortcut to comment out your code: Select the text, Hold Ctrl Key, click the ? Key

Assignment

Standard Deliverable

Open up your “History of Computers” codepen. Click the Fork button to start a new codepen file. Rename it to “Updated History of Computers”.

Required Elements

1)Add design for each part of your website.

2)You can change the font-family, font-size, color, background-color, or anything else that you want to change.

3)Add comments to your CSS for each thing you change. You can do it like this:

Advanced Deliverable

Complete the following by searching the reference material on http://W3schools.com or another site.

1)Add a border of your choice to one of the elements on your page.

2)Change the margin for one of the elements on your page.

3)Add comments to your code for these changes.

Code Review Exercises:

1) CSS Basics - Colorful Creature

2) Font Families - Fancy Font Families

3) Font Sizes - Great Big Font Sizes

Most web pages and apps have multiple screen views. For this exercise we want to look at two ways to demonstrate concepts having multiple screen views.

• Interaction storyboards link a few sketches together visually to explain how people will interact with the product.

• Interactive prototypes provide a way to simulate physical interactions using sketches.

Standard Deliverables ✓

1. Sketch an interaction storyboard of a trivia app like the example above, but make it uniquely yours. You can use starting template, like , for sketching if you like.

2. Photograph your storyboard and save the file so that you can edit it with Google Drawing or a similar application.

3. Create individual image files for each or your sketched screen shots to build your interactive prototype. For example: , , .

4. Login to marvelapp.com and create an interactive prototype like the example above.

5. Create a document that has your photographed storyboard and a link to your interactive prototype on Marvelapp.

Advanced Deliverable ✓+

Create a second sketched interaction storyboard that is distinctly different from your first.

Personas summarize the goals, desires, and frustrations of users to guide the design of a product or service. Below are two videos explaining personas.

Personas are useful for ensuring that we design for the people we are trying to serve and keep them at the center of our design decisions.

Standard Deliverable ✓

For this exercise your interview findings will help you create two personas that describe two fictional (but realistic) users of a messaging app. Create personas that are loosely based on the people you interviewed. You may combine characteristics of two interviewees into one persona or any variation you think is appropriate. Use as a starting point, but feel free to customize it as you like. Remember to create two personas. They can be submitted in a single document.

You want your persona to be descriptive and to the point with elements like...

• A persona name and representation (character sketch)

• Demographic information like age, occupation etc.

• A list of frustrations and needs.

• A scenario that describes a success for the persona.

Advanced ✓+

Simply create a third persona as an advanced deliverable.

If...Else Statements are conditional statements that are used to perform different actions based on different conditions. Conditional statements allow a computer program to make decisions based on the given conditions.

Basic Syntax

Example:

Based on this code, if the score value is 10 (meaning the condition is True), "Great job!" will display. If the score is anything besides 10 (meaning the condition is False), "Better luck next time!" will display.

Else If Statements

When you need to have multiple conditions to check against, you can use an Else If statement. The syntax is a little different than a basic If...Else statement.

Example:

Based on the If Else statement above, if the value of energyLevel is greater than 99, the fullEnergyTank image will display and nothing else will happen. If energyLevel isn't greater than 99 (less than or equal to 99), it will check against the 2nd condition. If the value of energyLevel is greater than 20, the lowEnergyTank image will display and a message will display on the screen saying the energy tanks are low. If both of the conditions above were false, the emptyEnergyTank image will display, and the screen will display a Game Over message.

Sketching is a powerful activity for many reasons. It is a quick and inexpensive way to visualize ideas and discuss ideas with others. Sketches can easily be annotated or altered as needed, allowing for rapid experimentation.

We are going to practice sketching a few web interfaces. It is important to understand that you do not need to be an artist to sketch. It is not a competition on how pretty the sketch is, but on how well it explains an idea. While there are few, if any, particular rules on how to create interface sketches, here is a video on sketching the parts of interfaces to get you started.

Also, take a look at demonstrating the progressive building of a sketch.

Standard Deliverable ✓

Choose two web sites or mobile apps to sketch. Start with a rectangle to outline the screen and draw the basic structure of the site depicting the major elements of the page. Visually differentiate elements so that someone could tell the difference between things like the Title, Navigation, Headings, Paragraphs, Buttons, Images, Videos etc.

Take a photograph or scan of your sketches for submission.

Advanced ✓+

For Loops are used to execute the same code a certain number of times. They are a great way to cut down on the amount of code you need to type.

Syntax

for (initialization; condition; final expression) {
        statements to execute
        }

An initialization is used to create a variable with a value before the loop starts.

A condition is an expression to check before each loop. If the condition is true, the statements inside the For Loop are executed. If the condition is false, the loop will end and the program will move to the first line of code after the For Loop.

The final expression is used to increment the counter variable created in the initialization.

Example

for (var i = 0; i < 10; i++) {
        var enemy = enemyGroup.create(i * 200 + 100, 0, 'enemy');

    }

Example Explanation

This code is used to add 10 enemies to a game with a loop. The first thing that happens is the variable i is initialized with a value of 0 (var i = 0).

Next, the condition i < 10 is evaluated. Since i = 0, the condition evaluates to true (since 0 is less than 10). Since the condition evaluated to true, the var enemy = enemyGroup.create(i * 200 + 100, 0, 'enemy'); line of code will execute to create the first enemy.

Before starting the loop over again, you need to increment the variable. i++ will add 1 to the value of i giving it a new value of 1.

This loop will continue to run until the condition i < 10 evaluates to false. This would happen when i has a value of 10. The condition was set at i < 10 since we knew we wanted to create exactly 10 enemies.

We could have added 10 enemies to the game without using a loop in only 10 lines of code, but we accomplished the same thing without as much code. 10 lines of code may not seem like much, but imagine that we want to add 100 enemies. Setting the properties (velocity, bounce, animation) of the enemies would be extra code to do each of those 100 times.

More Information about For Loops

Information about While Loops - these loops execute code while a condition is true

HTML Syntax - used for elements of a website

Syntax is the grammatical rules and structural patterns governing the ordered use of appropriate words and symbols for issuing commands, writing code, etc., in a particular software application or programming language

To add a paragraph to a website you would type this:

Common HTML Tags

<h1>, <h2>, <h3>...<h6> - headings in different sizes (h1 is the largest)
<p> - paragraph
<img> - image
<div> - division of a page
<br> - line break
<a> - hyperlink

Complete list of tags

Setting up a Basic HTML Page

Assignment

Standard Deliverable:

What do you think has been the most important development in technology? Identify a technology that has been important, person or company that invented it, and why you think it’s important. Your paragraph should be 3-4 sentences. Also include your name. Create a basic webpage using HTML. Use http://codepen.io to create this page and submit a link to your ‘codepen’ for the assignment. Name your codepen file “History of Computers”

Required Elements:

1) A Large Heading for your technology (h1)

2) A Smaller Heading for name of inventor or company (h2)

3) A Smaller Heading for your name (h3)

4) A paragraph about why you think the technology is important (p)

Advanced Deliverable:

1) Add an image to your site using the <img> HTML element.

2) Add italics and bold to something on your website. (Hint: search emphasis for italics)

Use Google search and https://w3schools.com as a primary reference to complete this activity as needed.

Code Review Exercises:

1) HTML Basics - Write a Poem

2) Bold/Italics - You Can Learn Text Tags

3) Lists - Your Learning List

4) Images - A Picture-Perfect Trip

5) Links - Links You Love

Standard Deliverable ✓

1. Choose two web sites that you like.

2. Complete a basic analysis of each site. Use to document your findings.

3. Discuss your findings in class and determine common themes.

Advanced ✓+

Describe three possible improvements you would consider for one of your sites and why they would be important to people using it. These improvements could be many things. For example, an improvement could be a visual redesign of something on the page, a new feature altogether, or simply rearranging something on the site. Include your improvements in your document.

Interaction design (IxD), focuses on the way people interact with products and services. Interaction designers use many different techniques to understand the goals of people and how to provide effective ways for people to accomplish those goals with interactive services.

Standard Deliverable ✓

1. Read .

2. In small groups, choose an interactive product or service to analyze. For example, you could choose a popular website, an ATM, a particular video game console, a mobile app, a mobile phone OS, a thermostat etc.

3. Use the 5 dimensions of interaction design to deconstruct your chosen product. For each dimension, carefully determine how your product uses that dimension.

4. Outline your findings in a one-page document or single slide to share with the class.

5. Share with the class. Challenge each other on the completeness of your analyses. For example, if a product uses GPS, what interaction design dimension does it affect?

Advanced ✓+

Review the last section of the article with the heading "So what do interaction designers do?". Have each person search for a job position related to interaction design but not necessarily titled interaction designer. Add a brief description of each position your group found on a second page or slide. Consider using monster.com, indeed.com, glassdoor.com, or for your searches.