Intro to Web Technology

In Week 6 we will look at basic Web technologies as we work on our Community Project:

  • Client:
    • Browser on computers and mobile devices
    • Sends Request for a URL (Uniform Resource Locator – expects to get HTML back
    • Browsers all know how to read HTML
    • Executes Client-Side code: Many Websites rely on the Browser’s ability to execute JavaScript
  • Server:
    • Runs Web Server software (IIS on Windows, Apache, etc. that “Serves” up the Web pages
    • Sends Response as HTML to the Browser
    • Hosts and executes Server-side code modules
      • Code can be in PHP, Java, C# (ASP.NET), etc.
    • Hosts images and scripts for the site
      • May host HTML pages but the HTML Response could also be generated “on the fly” by the code
  • HTML
    • Hypertext Markup Language
    • Determines structure of the page layout
    • Basic structure of an HTML page
      • HTML <html></html> outer wrapper for the whole page
      • Head: contains metadata and title; note that the title appears on the tabs in browser <head><title>My Web Site</title></head>
      • Body: <body></body> precedes the closing </html> tag; contains the content for the page. Content within the body can be structured with other tags, like <h1> for header, <p> for paragraph.
      • Each tag has to have a matching closing tag
  • CSS
    • Cascading Style Sheet
    • Determines appearance of the page
    • Defines style attributes for specific tags or specific named items on a page or site
    • Can also define style for a class of items (more on this later…)
  • View Source/Developer’s Tools
    • Usually an option from the Browser’s shortcut menu: “View Source” or “View Page Source” allows you to see the actual HTML
    • Developer’s Tools: allows you to see much more of the structure of the site, including the CSS, scripts, etc. You can try out and preview some modifications here as well

Intro to Databases

In Week 5 as we start analysis and design for our group project, we touch on basic concepts for Databases

Domain Model: In Software Design, the Domain means the sphere of knowledge specific to the business for which the software is being developed. During design, we usually define a model that abstracts each relevant domain entity and its attributes. Example: to develop a system for managing classes and enrollment at a school, the domain model might include entities for Student, Course, Faculty, etc. The model would need to define the relationships as well

Relationships:

  • One to Many: Example: Course to Section – Each Course can have multiple Sections; a Section belongs to only one Course.
  • Many to Many: Example: Section to Student -Each Section can have many Students; each Student can enroll in many Sections
  • One to One: Example: Faculty to Salary. All columns pertain to just one Faculty member, but may be separated into two tables for security reasons. Or may be in one table with defined Views controlled by permissions

Database: a structured repository for persisting information (data!). In Web Development, the information a user enters into a form and submits is stored in a database if it will need to be retrieved at a later time.  Lists and Detail views of items on a Web Page are often populated by look-ups to the database.

  • Table: a set of data records for a single type of entity (a thing relevant to the domain being modeled) organized into rows and columns. Example: Student table would represent the Student entity within a domain model for a School system.
  • Row: stores one particular record in a table; example: each Student has her own row
  • Column: each column represents a single Attribute of the thing being represented in the table; e.g. FirstName, LastName, DateOfBirth
  • Primary Key: unique identifier for a row in a table; e.g., CourseID for the Course table
  • Foreign Key: a value in a table that links it to another table. Used in One-to-Many relationships, e.g., the Section table would have a CourseID column

SQL: Structured Query Language. Allow us to query the database to retrieve information and to modify the tables and their data using CRUD operations

CRUD: Commonly used acronym for Create-Read-Update-Delete; refers to the types of operations allowed against a database

Learn more about SQL and Try it Out at:  W3 Schools SQL Tutorial

More ways to control program flow

In Week Four we are looking at some more advanced concepts for controlling what happens in our video game projects:   

Messaging:  A type of communication within code or between different software components or even across systems. The sending code broadcasts a message; the receiving code is listening for that message and reacts based on the requirements. Publish/Subscribe represents a well-known Software Design Pattern that is implemented in different ways in different programming languages. In Scratch it is implemented by:

  • a Broadcast Event; within the event declare a name for the message; example: Broadcast GameOver
  • a Receive Event that is listening for the specific message and executes a script when that message is heard; example: when I receive GameOver show the end game background and play the victory tune.

Program Flow of Control

Our second and third weeks focus on flow of control within a program:

Algorithm: Logical step by step outline of the processes to be implemented to solve a problem. Includes decision points with branches defining what to do for each case. An algorithm is language-agnostic, i.e., it does not use syntax specific to a particular programming language. For all but the simplest programs, an algorithm is an essential part of the software development process

Flowchart: A diagram that is a graphical representation of a process. Each process step is represented by a rectangle; each decision is represented by a diamond with branches coming off for each choice. A flowchart may represent one part of a larger program, breaking it down into manageable components.

Scenario: Describes a particular set of events, data values, or user choices that direct a program to flow in a predicted direction. Each scenario will have an algorithm and possibly a flowchart to define what happens in that set of circumstances.

  • Use Case: A style of scenario definition that describes one specific way in which the users will interact with the software.
  • “Happy Day” Scenario: The user(s) and data behave in the way expected; no errors happen
  • Alternate Scenario: Something untoward may have happened; perhaps an error; or the user behaved unconventionally (submitted “bad” data, clicked buttons out of order….)

Flow of Control: the order in which the steps of a program are carried out as determined by control structures within a program. Control structures include loops, conditionals, function or procedure calls

  • Loop: a flow of control structure that causes code to be repeated a specified number of times or based on a condition (while or until some condition is true); a loop that runs “forever” is called an Endless Loop
  • Conditional: a flow of control structure that determines what code gets executed based on a decision. The conditional to be evaluated may use a combination of several Operators. For example: If (X > Y) Or (Y < 0) uses relational operators along with a logical operator. The exact syntax will vary with language. Order of evaluation is extremely important!
  • Operators:
    • Arithmetic: Addition, subtraction, multiplication, division, modulus (remainder after division); in Scratch these operators are represented by +, -, *, /, and mod
    • Logical: Not, And, Or, XOR (exclusive OR)
    • Relational: =, >, <,  >=, <=
    • Boolean: True or False. The conditional IF block will evaluate to a Boolean result
  • Event: a trigger that a program or component  is “listening” for so it can react
  • Stop or Start
  • Nested Control Structures: A control structure may have another control structure nested within it: nested IF’s, nested LOOPS, etc.  It’s a good idea to use a flow chart, or pseudo-code (plain English statements rather than programming syntax), or otherwise draw out or act out what will happen to make sure things go in the intended order

Variable: a named data element representing a piece of information to be remembered. A variable should have a meaningful name! In our video game we may want to define a variable named Score. The code may set the variable’s value based on some condition. For example: If the hero rescues the princess increase the Score by 1000;  if the hero falls into a fire pit decrease score by 50.

Intro to Programming and Scratch

In our first meeting we discussed a little history of computer programming and introduced Scratch:

Program: A set of computer code written to execute some useful feature, application, etc.

Programming Languages: A defined set of instructions that can be used to tell a computer what to do. Programmers write code by determining which instructions to put together in which order

  • Machine Language: Set of instructions composed of numerical “bits”, only ones or zeroes. A computer understands this natively, each processor family has its own set of instructions. They would look something like this: 00100001 11101011 01010101
  • Assembly Language: Also called Assembler Language. Low-level programming language; uses abbreviated words (Mnemonics), e.g. MOV, to represent instructions to the computer. Assembly instructions are translated by the Assembler into machine language
  • High Level Language: Each language has its own syntax, keywords, functions, etc. Uses natural language, such as English. Abstraction refers to the way in which these languages abstract details of what the machine needs to be told, so that a simple function call can actually represent many instructions behind the scenes

Compiler: Translates high-level languages to code that can be executed by the computer.  There are specific compilers for each language (Java, C#, COBOL, etc.). Compilers do a lot of the complex work behind the scenes of a program. Note: Some languages are Interpreted rather than Compiled; that is, the code is executed as it is being read

Debug: Figure out what is wrong with a computer program and fix it.  Specialized debugging tools are often part of a development environment and allow programmers to step through the code one line or block at a time and inspect the immediate results

IDE: Integrated Development Environment. An application that provides an interface and tools for programmers to create, execute, and debug code. Visual Studio, Scratch, Eclipse, NetBeans are all examples of powerful IDE’s

Loop: a code control structure that causes code to be repeated a specified number of times or based on a condition (while or until some condition is true); a loop that runs “forever” is called an Endless Loop

Event: a trigger that the program is “listening” for; code blocks can be “hooked” to events so they will execute when the event occurs. In Scratch, an event commonly used at the top of a script is the clicking of the green flag to start

Script: A set of computer instructions connected to run together to do something. In Scratch, we create scripts by connecting blocks

Scratch: a visual programming language developed at MIT enabling coders to drag and drop blocks of code to form scripts to control sprites on a “stage”

  • Sprite: an image, often like a cartoon character, to which scripts, costumes, and sounds can be attached to control its appearance, movement, and behavior
  • Backdrop: the scenery behind the Sprites within a Scratch project
  • Stage: the area on which the backdrops and sprites are drawn and move
  • X/Y Coordinates: define a point on the stage. X represents the point on the horizontal axis from -240 on the far left to +240 on the far right. Y represents the point on the vertical axis from +180 at the top to -180 at the bottom. The center of the stage is at 0,0.
  • Block: In Scratch, a block is a unit of code that can be added to a script to build a working program