Coding for Non Coders Series

What is Coding Anyway? Coding for Non Coders.

If you’re like me, you’ve been hearing alot about “coding” in the news; the importance of coding, changing our educational system to include coding, etc. I’ve been involved with several businesses over the years that have involved web sites, blogs and even some sophisticated customized software. I’m often hearing things like “that will involve significant coding” or “that won’t be cheap because there’s a lot of coding needed to make that change”.
WhatisCoding
But to tell you the truth, I have no idea what coding really is. Mark, on the other hand, has a Masters Degree in Computer Science and has been designing and programming (is that the same thing as coding? I have no clue.) systems for over 30 years. I figured that Mark would be the right guy to orient me on the topic of coding.

So I decided to cajole Mark into helping me understand what coding is and we decided to develop a series on the fundamental concepts of coding for non coders. I’m not looking to become a professional coder or grind out my own html page but I do want to know the basic concepts so that I can better deal with my contractors, etc.

So, if you’re ready Mark, here we go:

I guess to start with, what the heck is coding anyway?

——————————————————

Coding and Creating Software for Non-Coders

In the last post, David asked “What the Heck is Coding Anyway”? To try to answer that question, we’re going to present a series of posts discussing some of the concepts behind coding and creating software for non coders.

Code is a set of instructions that directs a computer (desktop, smartphone, tablet, etc.) to perform specific operations. The complete set of code instructions is called software. Examples of software include Word on your desktop, Angry Birds on your phone, and Gmail in your browser.

YodaCode
Let’s take a quick look at how software works. At a basic level, software:
1. takes input via keyboard, mouse, touch screen, voice or other means,
2. processes it,
3. and produces output such as a document, a gaming experience, or a page of search results.
4. Sometimes it stores information in a database for subsequent retrieval.

For example, Microsoft Word processes the text and commands that you’ve inputted to produce a nicely formatted document. The Angry Birds game on your smartphone processes the swipes you’ve inputted on your phone to produce a fast moving series of frames on your screen. The Google search engine on the Web takes the search terms you’ve inputted to produce a list of web pages that meet your criteria.

To create software, the following steps are involved:
1. Analyze the task that needs to be accomplished
2. Design a solution which performs the task
3. Write the code that implements the designed solution
4. Test the code
5. Implement the code so people can use it

As you can see, coding is one of the primary tasks involved in creating software. In the next post, we’ll get down and dirty by looking at some of the code that powers our site, Brevedy.Com

——————————————————

Understanding The Hardware and Software Jungle for Non-Coders

In our last post we pointed out that:

“Code is a set of instructions that directs a computer (desktop, smartphone, tablet, etc.) to perform specific operations. The complete set of code instructions is called software. Examples of software include Word on your desktop, Angry Birds on your phone, and Gmail in your browser.”
jungle-250
Before we get down and dirty with some code, let’s take a look at the Hardware and Software Jungle. Hardware can be categorized by power, interfaces and portability.

Servers – high power, computer to computer, not portable, centrally accessible for sharing data and software
Desktops – high power, hi-res screens, big keyboards, mice, not portable
Laptops – medium power, mid-res screens, keyboards, touchpads, portable
Tablets – low power, mid-res touch screens, portable
Smartphones – low power, low-res touch screens, highly portable
Wearables – low power, sensor based, wearable
Devices – low power, sensor based, computer to computer (e.g. internet connected thermostats)

Software can be categorized by what type of hardware it runs on and the type of task it performs.

Operating Systems like Windows, Linux, iOS and Android for powering the hardware on which they run
Server Software like MySQL, Apache and PHP for sharing applications and data
Desktop/Laptop Programs like Firefox, Word and Photoshop for browsing, productivity and creative applications
Web Apps like Online Banking, Gmail and Google run in a Browser like Firefox for business and personal productivity
Tablet and Smartphone Apps like Safari, Angry Birds and Kindle for browsing, gaming, reading and viewing
Device Drivers that power hardware devices such as mice, keyboards and scanners

Now that we’ve toured the hardware and software jungle, our next installment will focus on the languages used to code the various categories of software described above.

——————————————————

Programming Languages for Non-Coders

In our post, Coding and Creating Software for Non-Coders, we pointed out that:

“Code is a set of instructions that directs a computer (desktop, smartphone, tablet, etc.) to perform specific operations. The complete set of code instructions is called software. Examples of software include Word on your desktop, Angry Birds on your phone, and Gmail in your browser.”
ProgrammingLanguages
Code is written in a specific programming language with a specific syntax. Although there are many languages, most of them include similar structures such as::
– perform a specific operation; e.g. display the last name of a customer on the screen
– test a condition and perform an operation if it’s true; e.g. if the last name begins with ‘a’, display it on the screen
– loop through a set and perform an operation; e.g. for each customer in NY, display the last name on the screen

Let’s look at a few popular programming languages and where they are commonly used:
PHP – Web Apps like WordPress
JavaScript – the interactive parts of Web Apps
Java – Android Apps and Server Software like Gmail
C++ – Server Software like Apache and MySql
Objective C – iPhone and iPad Apps

In addition to programming languages, here are some non-programming languages worth noting
HTML – to create web pages and web apps that run in a browser
CSS – for describing the look of a web page in a browser
SQL – for managing data stored in a database

In our next segment we’ll take a look at WordPress and it’s different components which are written in PHP, HTML, CSS and SQL.

——————————————————

The Long, Short Journey of Opening a Web Page

In the previous posts we’ve seen that
– Software works by receiving input, processing it, and producing output
– Software can be categorized by the type of hardware it runs on and the tasks it performs
– Different programming languages are used for different coding tasks

Now, let’s put it all together by looking at what happens when you open the Brevedy website from your Windows PC.
HardwareSoftwareFlow

(a) Windows Operating System – Turning on your PC causes the Windows operating system, which is primarily written in C++, to start up.
(b) Browser Desktop Software – Clicking on the icon brings up your browser software (IE, Chrome, etc), which is primarily written in C++.
(c) Web App – Typing https://www.brevedy.com in the Browser address line directs the browser to route this request via the Internet to the Web App at the Brevedy server, which is physically located at our hosting provider.
(d) DNS Routing Software – The server address of the request is retrieved from a Domain Name Server (DNS) which run DNS Software, which is primarily written in C++.
(e) Linux Operating System – The request eventually reaches the Brevedy Server, which is running Linux, which is primarily written in C++.
(f) Apache Web Server – The request is processed on the Brevedy Server by Apache Web Server software, which is primarily written in C++.
(g) PHP Processor – Apache directs the request to the PHP Processor Software, which resides on the Linux server and is primarily written in C++. The PHP software processes a series of WordPress PHP pages which are written in PHP.
(h) MySQL Database Server – The WordPress PHP pages request data using SQL from a MySQL Database Server, which is written in C++.
(i) The WordPress PHP pages generate a complete Web Page containing HTML, CSS and Javascript. which is sent back to the PC.
The Browser software (b) on the PC formats the Web Page for you to read.

As you can see, much of the heavy lifting of Server Software is done in C++, while Web Apps such as WordPress, use languages like PHP, HTML, CSS, JavaScript and SQL Now that you have a general idea of how many steps are involved in opening a Web page, you can marvel at how fast that process is executed.

——————————————————

A Quick Explanation of HTML for Non-Coders

Two of the major innovations of the World Wide Web were:
1. Web pages could be requested from a web server anywhere in the world and displayed with “easy to use” software call a browser
2. These web pages usually contain hyperlinks which, when clicked, retrieve another web page from the same or a different web server
WhatIsHTMLAnyway
Web pages are coded using HTML, which stands for Hypertext Markup Language, the language used to markup plain text in order to control its look and behaviour when displayed in a browser. There are different versions of HTML, and our examples will use HTML 5.0 (the most current version as of May, 2014).

Hypertext is text that can be displayed by a web browser. Hypertext usually contains hyperlinks which, as explained above, are clickable links to other web pages.

Markup is the process of taking plain text and adding HTML elements to it through the use of tags so that it can be processed and displayed by a browser. Tags are usually enclosed in angle brackets <> and often contain a beginning tag and an end tag.

For example to display this sentence: Sometimes we want certain words to appear as bold.
we would code it as: Sometimes we want <strong>certain words</strong> to appear as bold.

Our purpose here is to give you a quick explanation of HTML for non-coders. If you want a great tutorial on HTML,
please visit this link for the w3schools.com tutorials.

To code the preceding line the following HTML was used:
please visit <a href=”http://www.w3schools.com/html”>this link</a> for the w3schools.com tutorials.

In the next installment, we will take a look as CSS, another language, which gives us more control of how web pages are displayed in the browser.

——————————————————

A Quick Look at CSS for Non-Coders

In our last post we gave a A Quick Explanation of HTML for Non-Coders. To understand how CSS (Cascading Style Sheets) complements HTML, let’s take a look at HTML’s history.

1. The first draft of HTML was released in June 1993.

2. HTML 2.0 was published in November 1995.

The earlier releases of HTML intended to define the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
CSSImage
3. HTML 3.2 was released in January 1997> This release included many features invented by Netscape like <font> and color attributes which defined how the document would look.

These additions became a nightmare for web developers because large web sites, where fonts and color information were added to every single page, became a long and expensive process to maintain.

4. HTML 4.0 was released in December 1997.

CSS (Cascading Style Sheets) were added in HTML 4.0, so that the formatting options of an HTML document could be separated from the HTML, making it easier to maintain.

Without CSS: this is how you make
<font size=4><strong>words big and bold</font></strong>

With CSS; this is how you make

.BigandBold {
font-size: 120%;
font-weight: bold;
}

<span class=”BigandBold”>words big and bold</span>

In this simple example, it’s easy to do it in HTML. However, if we wanted to apply more complex formatting, to a bigger page, CSS would win out.

You can also move the CSS coding to its own file so that you can separate the HTML, which specifies the content of the page, from the CSS, which defines the formatting.

That’s our quick look at CSS for non-coders. If you want a good tutorial on CSS, visit this link for the w3schools.com tutorials.

——————————————————

PHP for Non-Coders

As you might recall from our previous posts in this series, PHP:
– is in the category of Server Software
– is primarily used to create Web Apps
– is the software that powers WordPress, the leading blogging software
PHPLogo
Let’s go a little deeper to gain a little better understanding of PHP for Non Coders.

PHP code is often mixed with HTML code and is usually processed by PHP Server Software which executes the code. After the PHP code is executed, the PHP server sends the resulting output to the requesting Web Browser.

In the programming world, it has been a tradition that the first introductory program displays the words “Hello World” on the screen.
In PHP you would create a file called something like Hello.php containing the following code:

<html>
<? echo “Hello world!”; ?>
</html>

If you accessed the Hello.php file in your browser the following would be displayed
“Hello World” would appear on the page.

The <html> and </html> are HTML tags that are used at the beginning and end of every HTML page.

The <? … ?> brackets in the code instructs the PHP Software to process the instructions within the brackets.
The echo command tells the PHP software to include the contents within the quotes, in our case “Hello World”, in the HTML page sent to the requesting browser.

Now let’s go a drop farther. This program:


<html>
<? for ($i = 1; $i < 4; $i++) { echo "Hello World being printed $i time(s) <br>"; } ?> </html>

Will display the following web page:

Hello World being printed 1 time(s)
Hello World being printed 2 time(s)
Hello World being printed 3 time(s)

We introduced the The <? … ?> brackets above which tells the PHP Software to interpret the PHP code within the brackets.

In this example we have introduced two new programming concepts
– the $i variable
– the for command

In our program, $i is called a variable because it will contain varying data values at different points in the execution of the program.

The for ($i = 1; $i < 4; $i++) command is called a loop, and it tells the PHP software to loop a certain number of times and execute the series of commands that follow.

In our example, a single command { echo “Hello World being printed $i time(s) <br>”; } will be executed a certain number of times.

Specifically our for command instructs the PHP software

$i = 1; create a variable name $1 and give it an initial value of 1
$i < 4; execute the commands that follow as long as the value of $i is less than 4
$i++ after you execute the commands, increment (add 1) to the value of $i

So the first time the command { echo “Hello World being printed $i time(s) <br>”; }
is executed, it would have the value of 1. The second time it would have the value of 2. And the third time it would have the value of 3.
After the echo command is executed with $i having the value of 3 it would be incremented to 4 and the $i < 4; would instruct the PHP software to stop processing the loop.

After an exercise like this, most programmers take a coffee break. So go ahead and when you come back you can take a look at one of the previous articles in our Coding for Non-Coders Series.

Posted in Coding