Designing solutions Through Programming

Section

• General

  • Announcements Forum
• 

  Open allClose all

  
• 

  Instructions: Clicking on the section name will show / hide the section.

  

• Setting up

  • Please read and follow the directions on our getting started wiki page. 

  • Click the box to the right if you have bookmarked the sites on the getting started page

  • Click the box to the right if you have registered for github

  • Click the box to the right if you have used a username on github that CANNOT IDENTIFY you

  • Click the box to the right if you have installed visual studio code on your school computer

  • Click the box to the right if you have  moved visual studio code to your applications folder

  • Click the box to the right if you have  created a programming folder (you can put the folder on your desktop or in your documents folder)

  • Click the box to the right if you understand you should never move or rename your programming folder

  • Click the box to the right if you have installed the visual code extension bracket pair colorizer  by CoenraadS

  • Click the box to the right if you have installed the visual studio extension sftp by liximomo

  • Click the box to the right if you have configured  the sftp extension and you can upload files to your internet site

  
• Local & remote hosts

  • Introduction

  • Any device that has established a connection to a network qualifies as a host^[2]

    • localhost and local host mean exactly the same thing. 
      
      
    • In computer networking, a localhost is a hostname that means this computer. ^[3].

    • A remote host is a computer which is accessed over a network. Remote hosts can be far away or very close. But they share a common characteristic of being accessed over a network.
      
      
    • A very common way to write a computer program is to write code on a local host, and then upload it to a remote host. Many development tools make uploading code to a remote host easy. 

    
    

  • External Resources

  • Wiki article URL
  • Assess your understanding

  • Click here to test your understanding of local and remote hosts Interactive Content
  
• Input - process - output

  • Introduction

  • This is the most basic idea in designing a program: There is input and the input is processed and then there is some sort of output. The output depends on what happens during processing.

    This diagram is used from Johnstone, D., Bonner, M., & Tate, M. (2004) "Bringing human information behaviour into information systems research: an application of systems modelling" Information Research, 9(4) paper 191, Available at http://InformationR.net/ir/9-4/paper191.html
    
    

  • External Resources

  • Wiki link URL
  • Assess your understanding

  • input process output Interactive Content
  
• HTML

  • Introduction

  • 
    

  • HTML (Hypertext Markup Language) is not a programming language. It is a markup language that tells web browsers how to structure the web pages you visit. It can be as complicated or as simple as the web developer wants it to be. HTML consists of a series of elements, which you use to enclose, wrap, or mark up different parts of content to make it appear or act in a certain way. The enclosing tags can make content into a hyperlink to connect to another page, italicize words, and so on. 
    
    

    For example, consider the following line of text:

    My cat is very grumpy

    If we wanted the text to stand by itself, we could specify that it is a paragraph by enclosing it in a paragraph  (<p>) element:

    <p>My cat is very grumpy</p>

    Note: Tags in HTML are case-insensitive. This means they can be written in uppercase or lowercase. For example, a <title> tag could be written as <title>, <TITLE>, <Title>, <TiTlE>, etc., and it will work. However, it is best practice to write all tags in lowercase for consistency, readability, and other reasons.

    
    

  • 
    

  • External Resources

  • This is a link to HTML elements: https://developer.mozilla.org/en-US/docs/Web/HTML/Element.

    You should understand the following elements:

    html - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html
    head - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head
    title - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title
    link - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
    body - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body
    h1 through h6 - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
    p - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
    div - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
    ol - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol
    li - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li

    ul - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
    a - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
    br - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br
    small - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small
    span - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
    img -https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

  • This resource is excellent to help you learn about HTML, forms, and CSS. You should use this resource as official-and-best information about HTML and forms.  https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
    

    Please READ this article and mark it completed (there's a checkbox to the right) when you are done reading.

  • Assess your understanding

  • HTML Part 1 Interactive Content
  • HTML Part 2 Interactive Content
  • HTML Part 3 Interactive Content
  • Using HTML Assignment
  
• Understanding forms

  • Your learning outcomes for this topic are: 

    1. You will understand the structure of an HTML form
    2. You will understand the required attributes of an HTML form
    3. You will understand what happens after a form has been submitted
    4. You will understand how forms pass data from one HTML page to another page.

  • The video below is part 1 to help you understand the basics of forms. Forms are how we gather user input. 

  • 
    

  • The video below is part 2 to help you understand the basics of forms. Forms are how we gather user input. 

  • 
    

  • Do I understand this? 

  • The basics of forms Interactive Content
  • The basics of forms: the name attribute Interactive Content
  • The basics of forms: processing input Interactive Content
  
• Input types and forms

  • Introduction

  • The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes (source). 
    

  • External Resources

  • This resource is excellent to help you learn about HTML, forms, and CSS. You should use this resource as official-and-best information about HTML and forms.  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
    

  • Assess your understanding

  • Form basics: input types Interactive Content
  • Understanding input types Assignment
  
• Frameworks & Bootstrap

  • Introduction

  • Bootstrap is a free collection of tools for creating a websites and web applications.

    It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

    Some reasons programmers prefer Bootstrap Framework

    • Easy to get started
    • Great grid system
    • Base styling for most HTML elements(Typography,Code,Tables,Forms,Buttons,Images,Icons)
    • Extensive list of components
    • Bundled Javascript plugins
    • Pre Styled Components

    Some of the components pre-styled are:

    • Dropdowns
    • Button Groups
    • Navigation Bar
    • Breadcrumbs
    • Labels & Badges
    • Alerts
    • Progress Bar

    
    

  • Resources

  • Assess your understanding