How IT works

by Peter Martin www.db8.nl / @pe7er

1.Computer

2.Operating System

3.Network

4.Internet

5.Server

How IT works

6.Email

7.WWW

8.Website

9.OOP

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

Long Term MemoryROM, Tape, Floppies, Harddisk, SSD

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

OUTPUTLEDs,display, monitor, printer

Short Term MemoryRAM (Random- Access Memory)

Hardware

Central Processing Unit (CPU)

2. Operating System

Operating System

Hardware

Programme

Operating System

ProgrammeProgramme Programme

Graphical User Interface Command line interface

Command Line Interface

Graphical User Interface

+- 1975 UNIX Mainframe computer

Multi-tasking Multi-user Safety & stability

1991 Linux PC, servers,

embedded

Command Line & GUI

*nix

+- 1981 MSDOS Command Line

1985 WindowsGUI for MSDOS

1995 Windows '95GUI with CMD prompt

Microsoft

+- 1984 System 1 for Macintosh 128K

1999 OSX Unix-based Operating

System + Graphical User Interface

Terminal (= programme to use Command Line)

Apple

2003 by Google Open Source For Smart Phones Linux kernel !

Android

3. Network

Sneakernet

Networking

Networking

Networking

Networking

Ethernet

Connecting...Hello everyone!

I am new!

Hello new one! I am 192.168.0.1

and your gateway to the outside world

From now on youare 192.168.0.42

You can look up IP addresses

of domain namesat DNS

with IP 8.8.8.8

Let's useDynamic Host

Configuration Protocol (DHCP)

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

TransmissionControlProtocol InternetProtocol

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 identificationwho is who

Packet routingshortest route?

TCP

Here's a packet Thanks,

I got it!Here's the next packet

Packets travel from router to router to router to router to router to router to router to destination

Quality Control? Transmission Control Protocol (TCP)!

DNS

What's DNS?

173.194.65.139 is your friend!

DNSGoogle.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 = 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

E-mail

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 MessageUndelivered Mail Returned to SenderThis 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: host microsoft.com[134.170.188.221] said: 550 "Unknown User"Reporting-MTA: dns; mail-out.s1.byte.nlX-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.comAction: failedStatus: 5.0.0Remote-MTA: dns; microsoft.comDiagnostic-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

Dedicated server Shared hosting VPS

Server types

Your own rack Your own configuration Expensive

Dedicated

Part of one rack Share with 100 others Same configuration Neighbours:

Hacked? Popular site?

Shared

Virtual Private Server Virtual machine Scalable Your own configuration Management

by hosting company unmanaged = by yourself

VPS

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

Nibble, nibble little mouse,

Who's that nibbling at my house

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

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

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 frameworkA CMS on which to build web applications

Joomla framework= Joomla without CMS

A foundation on which to build web applications

Project

Joomla is a projecta 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

1.Computer

2.Operating System

3.Network

4.Internet

5.Server

Conclusion

6.Email

7.WWW

8.Website

9.OOP

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 PhotosTitle sheet:

Steampunk Workshop Flat-Panel LCD Monitor - Jake von Slatthttp://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_Machine_-_GPN-2000-001881.jpg

Human computers - Dryden, NACA (NASA), 1949http://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 Photos3. 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 Photos3. 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 Photos5. 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 Photos7. 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

Slide 1Slide 2Slide 3Slide 4Slide 5Slide 6Slide 7Slide 8Slide 9Slide 10Slide 11Slide 12Slide 13Slide 14Slide 15Slide 16Slide 17Slide 18Slide 19Slide 20Slide 21Slide 22Slide 23Slide 24Slide 25Slide 26Slide 27Slide 28Slide 29Slide 30Slide 31Slide 32Slide 33Slide 34Slide 35Slide 36Slide 37Slide 38Slide 39Slide 40Slide 41Slide 42Slide 43Slide 44Slide 45Slide 46Slide 47Slide 48Slide 49Slide 50Slide 51Slide 52Slide 53Slide 54Slide 55Slide 56Slide 57Slide 58Slide 59Slide 60Slide 61Slide 62Slide 63Slide 64Slide 65Slide 66Slide 67Slide 68Slide 69Slide 70Slide 71Slide 72Slide 73Slide 74Slide 75Slide 76Slide 77Slide 78Slide 79Slide 80Slide 81Slide 82Slide 83Slide 84Slide 85Slide 86Slide 87Slide 88Slide 89Slide 90