How IT works

by Peter Martin
www.db8.nl / @pe7er

How IT works
1.Computer

6.Email

2.Operating System

7.WWW

3.Network

8.Website

4.Internet

9.OOP

5.Server

10.Joomla

1. Computer

Compute

ENIAC

PDP-1

Definition
A computer is a general purpose machine
that can be instructed
to do a specific task
You want a typewriter?
Load a typewriter programme;

IBM System/360

Altair 8800

Apple ][

Commodore 64

IBM PC

Hardware
INPUT
Switches,
keyboard,
mouse,
scanner,
joystick,
touch screen

Short Term Memory

RAM (RandomAccess Memory)

Central
Processing
Unit (CPU)

Long Term Memory

ROM, Tape, Floppies,
Harddisk, SSD

OUTPUT
LEDs,
display,
monitor,
printer

2. Operating System

Operating System

Programme

Programme

Command line interface

Programme

Programme

Graphical User Interface

Operating System
Hardware

Command Line Interface

Graphical User Interface

*nix

+- 1975 UNIX

Mainframe computer

Multi-tasking

Multi-user

Safety & stability

1991 Linux
PC, servers,
embedded
Command Line & GUI

Microsoft

+- 1981 MSDOS

Command Line

1985 Windows
GUI for MSDOS
1995 Windows '95
GUI with CMD prompt

Apple

+- 1984 System 1

for Macintosh 128K

1999 OSX
Unix-based Operating
System + Graphical
User Interface
Terminal (=
programme to use
Command Line)

Android

2003 by Google

Open Source

For Smart Phones

Linux kernel !

3. Network

Sneakernet

Networking

Networking

Networking

Networking

Ethernet

Hello everyone!
I am new!

Connecting...

Let's use
Dynamic Host
Configuration Protocol
(DHCP)

Hello new one!

I am 192.168.0.1
and your gateway
to the outside world

From now on you

are 192.168.0.42

You can look up

IP addresses
of domain names
at DNS
with IP 8.8.8.8

Oops...
Internet Protocol
is next item...

4. Internet

Definition 1
Internet = Network between connected local networks;

Inter-network

Internet

Definition 2
Internet = Packet Switching on TCP/IP

Transmission
Control
Protocol

Internet
Protocol

Packet Switching

All transmitted data is divided into blocks,

packets
Those packets can travel using different
routes
The destination merges the packets

Sharing

Internet Protocol

Host addressing and identification

who is who
Packet routing
shortest route?

TCP

Packets travel from router to router to router to

router to router to router to router to destination
Quality Control?
Transmission Control Protocol (TCP)!

Here's a
packet
Here's the
next packet

Thanks,
I got it!

DNS

What's DNS?

173.194.65.139
is your friend!

DNS

Google.com?

173.194.65.139 !

Dear 173.194.65.139,
please give me index page

5. Server

Server

Logical ports

Multi-user

Multi-tasking:

Front-door (visitors)

Electricity line

Water pipe

Sewer pipe

Telephone line

Cable television line

Internet connection line

Mailbox

Garbage can

Logical ports

Multi-user

Multi-tasking:

ftp: 21

SSH: 22

SMTP: 25

HTTP: 80

POP3: 110

IMAP: 143

6. E-mail

E-mail

E-mail = text file

E-mail Header: sender, IP address sender, receiver,
return address, message ID, all mail servers on route,
spam flags, etc.
Peter @ db8.nl

POP3 server (or IMAP) @db8.nl handles e-mail

Stores it in text file for Peter

Or replies with bounce message

Send E-mail
From: peter@db8.nl
To: bill.gates@microsoft.com
Message:
Dear Bill,
Almost 10 years I discovered Linux and now I am not fond
of Windows anymore. If I buy a PC for Linux, I still have to
pay license fees for Windows.
Could you please refund my money?
Kind regards,
Peter

Receive E-mail
From: bill.gates@microsoft.com
To: peter@db8.nl
Message:
Dear Peter,
How are you doing?
Sorry to hear that you dont like our Operating System any more.
Please keep in mind that our next Windows version will be much better!
Sorry, but we dont have a refund policy.
Yours sincerely,
Bill Gates
PS: I noticed that your website runs on Joomla. Thats awesome!
BTW: Joomla also works on our products Windows IIS + MSSQL!

Bounce Message
Undelivered Mail Returned to Sender
This is the mail system at host mail-out.microsoft.com. I'm sorry to have to inform you that your
message could not be delivered to one or more recipients. It's attached below.
For further assistance, please send mail to postmaster.
If you do so, please include this problem report. You can delete your own text from the attached
returned message.
The mail system
<bill.gates@microsoft.com>: host microsoft.com[134.170.188.221] said: 550 "Unknown User"
Reporting-MTA: dns; mail-out.s1.byte.nl
X-Postfix-Sender: rfc822;
Arrival-Date: Tue, 9 Sep 2014 11:09:20 +0200 (CEST)
Final-Recipient: rfc822; bill.gates@microsoft.com
Original-Recipient: rfc822; bill.gates@microsoft.com
Action: failed
Status: 5.0.0
Remote-MTA: dns; microsoft.com
Diagnostic-Code: smtp; 550 "Unknown User"

7. WWW

WWW

World Wide Web = HyperText Transfer Protocol

WWW Internet !

WWW = A collection of HTML documents

HyperText Markup Language

Text files with information linked to other text files

Surfing
Browsing on the WWW:

YOU ARE
NOT VISITING
A WEBSITE

HTTP(S)

HTTP (port 80) All traffic = plain text

HTTPS (port 443) All traffic via encrypted
connection

protects your data on route

No safeguard for data on unsafe server....

HTML

Text file with markup

Markup defines elements:
pagetitle, paragraph, heading,
hyperlink, image, CSS

Hyperlink = created by browser

Image = just reference, loaded by browser

CSS = layout definition interpreted by browser

8. Website

Server types

Dedicated server

Shared hosting

VPS

Dedicated

Your own rack

Your own configuration

Expensive

Shared

Part of one rack

Share with 100 others

Same configuration

Neighbours:

Hacked?

Popular site?

VPS

Virtual Private Server

Virtual machine

Scalable

Your own configuration

Management

by hosting company

unmanaged = by yourself

Static

Static website

Just HTML text files

CSS stylesheet

Images

Not interactive

Need FTP & local editor

Dynamic

PHP - Scripting language composes HTML

MySQL Database stores all content

9. OOP

Objects

Object Oriented Programming

Object = a special variable

some sort of container,
contains variables & functions inside

Objects

Object

Class -> Blueprint

Blackbox

Input & output

Inner-workings unknown
Documentation how to use object

Reusable

Baking a cake

Baking a cake

Ingredients:

150 gr superfine sugar

150 gr butter (room temperature!)

150 gr fine flour

3 eggs (room temperature!)

1 sachet vanilla sugar ( = 8 gr)

2 gr salt

Bit of baking powder ( = 5 gr)

Juice from 1/2 lemon

superfine sugar

Baking a cake

Recipe:

Pre-heat oven at 150 degrees Celsius

Grease the (cup) cake tin with butter, and put some flour over
it to prevent the cake sticking to the tin

Put butter + sugar + vanilla sugar + salt + lemon juice in a

bowl and mix into a smooth mass

While mixing fast, add the eggs one by one

While mixing slow, gently add the flour + backing powder and
mix into a smooth mass of dough

Put the dough into the (cup) cake tin

Put the tin in the oven for 55 minutes (do not open the 1st 30
minutes!)

Object!

Object!

Object: The Mixer

Input: ingredients, time

Output: cake dough

Blackbox

Innerworkings unknown

Mixer can be replaced by other object

Reusable

Re-use Object
Daughter
asks daddy
for cake (= Object),
icing sugar, water &
candy
Peter
+ cake recipe
becomes object

Daddy,
I want to make a
Hansel & Gretel
house
Nibble, nibble
little mouse,
Who's that nibbling
at my house

Re-use

OOP in coding

Create a PDF?

I don't know how.... but know how to

download a PDF Class, e.g. www.fpdf.org

load that PDF class

use that blueprint

Create PDF
<?php
require('fpdf.php');
$pdf = new FPDF();
$pdf->AddPage();
$pdf->SetFont('Arial','B',16);
$pdf->Cell(40,10,'Hello Joomla!');
$pdf->Output();
?>

10. Joomla

CMS
Joomla is an award-winning content
management system (CMS), which enables you
to build Web sites and powerful online
applications.
Many aspects, including its ease-of-use and
extensibility, have made Joomla the most popular
Web site software available.
Best of all, Joomla is an open source solution that
is freely available to everyone. www.joomla.org

Framework
Joomla is a framework
A CMS on which to build web applications

Joomla framework
= Joomla without CMS
A foundation on which to build web applications

Project
Joomla is a project
a community-based project with contributors from
all over the world working in many different
capacities.

OS
Joomla is a sort of Operating System,
a layer between

Joomla's components & 3rd party components

and the webserver

Admin GUI
Joomla is a Graphical User Interface between

the website administrator

and the database that stores all information.

Admin GUI admin template

Visitor's GUI
Joomla is a Graphical User Interface between

Website visitor

the database with articles

Visitor GUI front-end template + device

Please make it beautiful

and user friendly!!!

Conclusion

Conclusion
1.Computer

6.Email

2.Operating System

7.WWW

3.Network

8.Website

4.Internet

9.OOP

5.Server

10.Joomla

Questions?
Peter Martin
e-mail: info at db8.nl
website: www.db8.nl
twitter: @pe7er
Presentation: http://www.db8.nl
Review this presentation:
https://joind.in/talk/view/11651

Used Photos
Title sheet:

Steampunk Workshop Flat-Panel LCD Monitor - Jake von Slatt

http://steampunkworkshop.com/lcd.shtml
Map of Netherlands & Germany, Googlemaps
1. Computer

IBM Electronic Data Processing Machine - GPN-2000-001881, NASA, 1957

http://upload.wikimedia.org/wikipedia/commons/2/20/IBM_Electronic_Data_Processing_M
achine_-_GPN-2000-001881.jpg
Human computers - Dryden, NACA (NASA), 1949
http://en.wikipedia.org/wiki/File:Human_computers_-_Dryden.jpg
ENIAC (Electronic Numerical Integrator And Computer) in Philadelphia, Pennsylvania,
U.S. Army Photo, 1947 to 1955
http://en.wikipedia.org/wiki/File:Eniac.jpg

PDP-1, Matthew Hutchinson, 2006

http://en.wikipedia.org/wiki/File:PDP-1.jpg

DM IBM S360, Ben Franske, 2006

http://en.wikipedia.org/wiki/File:DM_IBM_S360.jpg

Used Photos

Commodore-64-Computer, Evan-Amos, 2011

http://en.wikipedia.org/wiki/File:Commodore-64-Computer.png

Tdkc60cassette, Stonda, 2005

http://en.wikipedia.org/wiki/File:Tdkc60cassette.jpg

Commodore-Datassette, Toni Saarikko, 2006

http://de.wikipedia.org/wiki/Datei:Commodore-Datassette.jpg

Ibm pc 5150, Ruben de Rijcke, 2010

http://en.wikipedia.org/wiki/File:Ibm_pc_5150.jpg
2. Operating System

C64c system, Bill Bertram, 2005

http://commons.wikimedia.org/wiki/File:C64c_system.jpg

Macintosh 128k transparency, Kevin chen, 2006

http://en.wikipedia.org/wiki/File:Macintosh_128k_transparency.png

Used Photos
3. Local Area Network (LAN)

Wm2005-hackday-guerilla-networking, Andrew Lih, 2005

http://commons.wikimedia.org/wiki/File:Wm2005-hackday-guerilla-networking.JPG

Floppy disk 2009 G1, George Chernilevsky, 2009

http://en.wikipedia.org/wiki/File:Floppy_disk_2009_G1.jpg

SanDisk Cruzer Micro, Evan-Amos, 2011

http://en.wikipedia.org/wiki/File:SanDisk_Cruzer_Micro.png

CD-R Front, Stefan Khn, 2003

http://commons.wikimedia.org/wiki/File:CD-R_Front.jpg

Harddisk in USB external box, Vojtch Brzek, 2011

http://commons.wikimedia.org/wiki/File:Harddisk_in_USB_external_box.jpg
4. Internet (Wide Area Network (WAN))

ARPANET as of Jun 30, 1982 - BBN map - DSC00123, BBN Technologies, Cambridge, Massachusetts,
2013
http://commons.wikimedia.org/wiki/File:ARPANET_as_of_Jun_30,_1982_-_BBN_map_-_DSC00123.JPG

Old Phonebooks at Salton Sea - Gentle, 2010

http://commons.wikimedia.org/wiki/File:Old_Phonebooks_at_Salton_Sea.jpg

Used Photos
3. Local Area Network (LAN)

Wm2005-hackday-guerilla-networking, Andrew Lih, 2005

http://commons.wikimedia.org/wiki/File:Wm2005-hackday-guerilla-networking.JPG

Floppy disk 2009 G1, George Chernilevsky, 2009

http://en.wikipedia.org/wiki/File:Floppy_disk_2009_G1.jpg

SanDisk Cruzer Micro, Evan-Amos, 2011

http://en.wikipedia.org/wiki/File:SanDisk_Cruzer_Micro.png

CD-R Front, Stefan Khn, 2003

http://commons.wikimedia.org/wiki/File:CD-R_Front.jpg

Harddisk in USB external box, Vojtch Brzek, 2011

http://commons.wikimedia.org/wiki/File:Harddisk_in_USB_external_box.jpg
4. Internet (Wide Area Network (WAN))

ARPANET as of Jun 30, 1982 - BBN map - DSC00123, BBN Technologies, Cambridge,
Massachusetts, 2013
http://commons.wikimedia.org/wiki/File:ARPANET_as_of_Jun_30,_1982_-_BBN_map__DSC00123.JPG

Used Photos
5. Server

Waiter pouring Zardetto sparkling Prosecco, Jeff Kubina, 2009

http://commons.wikimedia.org/wiki/File:Waiter_pouring_Zardetto_sparkling_Prosecco.jpg

Wikimedia Servers-0051 16, Helpameout, 2012

http://commons.wikimedia.org/wiki/File:Wikimedia_Servers-0051_16.jpg

Server Linux, Michael Jastremski, 2005

http://commons.wikimedia.org/wiki/File:Server_Linux.jpg

Wenskaart Buurman & Buurman Zo...nieuw huis?

http://www.buurmanenbuurman.eu/zonieuw-huis.html

Inside and Rear of Webserver, Rodzilla, 2005

http://en.wikipedia.org/wiki/File:Inside_and_Rear_of_Webserver.jpg
6. Email

Pigeon Messengers (Harper's Engraving), Harper's New Monthly Magazine, No. 275, April,
1873.
http://commons.wikimedia.org/wiki/File:Pigeon_Messengers_(Harper's_Engraving).png

Used Photos
7. WWW & HTML/CSS/JavaScript

HypertextEditingSystemConsoleBrownUniv1969, Greg Lloyd, 1969

http://commons.wikimedia.org/wiki/File:HypertextEditingSystemConsoleBrownUniv1969.jpg
8. Website & PHP/MySQL

Fachada del Nacimiento - Templo de la Sagrada Famlia, Barcelona 3, Sal34, 2011

http://commons.wikimedia.org/wiki/File:Fachada_del_Nacimiento__Templo_de_la_Sagrada_Fam%C3%ADlia,_Barcelona_3.jpg
9. Object Oriented Programming (OOP)

Lego Color Bricks, Alan Chia, 2007

http://commons.wikimedia.org/wiki/File:Lego_Color_Bricks.jpg
10. Joomla

tricorderunbox4, Bobbie Johnson, 2009

https://www.flickr.com/photos/bojo/4078685614/in/photostream/
Conclusion

EquinoxeJuniorHighPac-Man - Equinoxe, 2012

http://www.c64-wiki.com/index.php/File:EquinoxeJuniorHighPac-Man.png