How IT works - Joomladay UK 2014

JJoooommllaaddaayy UUKK 22001144
How IT works
by Peter Martin
www.db8.nl / @pe7er
1

1.Computer
2.Operating System
3.Network
4.Internet
5.Server
How IT works
6.Email
7.WWW
8.Website
9.OOP
10.Joomla

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;

“Hardware”
Long Term Memory
ROM, Tape, Floppies,
Harddisk, SSD
INPUT
Switches,
keyboard,
mouse,
scanner,
joystick,
touch screen
OUTPUT
LEDs,
display,
monitor,
printer
Short Term Memory
RAM (Random-
Access Memory)
Central
Processing
Unit (CPU)

Operating System
Programme Programme Programme
Command line interface Graphical User Interface
Hardware
Programme
Operating System

● +- 1975 – UNIX
● Mainframe computer
– Multi-tasking
– Multi-user
– Safety & stability
*nix
● 1991 – Linux
● PC, servers,
embedded
● Command Line & GUI

● +- 1981 – MSDOS
● Command Line
Microsoft
● 1985 – Windows
GUI for MSDOS
● 1995 – Windows '95
GUI with CMD prompt

● +- 1984 – System 1
● for Macintosh 128K
Apple
● 1999 – OSX
● Unix-based Operating
System + Graphical
User Interface
● Terminal (=
programme to use
Command Line)

● 2003 by Google
● Open Source
● For Smart Phones
● Linux kernel !
Android

3. Network

Hello everyone!
I am new!
Connecting... 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
Let's use
Dynamic Host
Configuration Protocol
(DHCP)
Oops...
Internet Protocol
is next item...

4. Internet

Definition 1
Internet = Network between connected local networks;
“Inter-network”

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

Internet Protocol
● Host addressing and identification
“who is who”
● Packet routing
“shortest route?”

● Packets travel from router to router to router to
router to router to router to router to destination
● Quality Control?
Transmission Control Protocol (TCP)!
TCP
Here's a
packet Thanks,
I got it!
Here's the
next packet

DNS
What's DNS?
173.194.65.139
is your friend!

Google.com? DNS
173.194.65.139 !
Dear 173.194.65.139,
please give me index page

5. 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 don’t like our Operating System any more.
Please keep in mind that our next Windows version will be much better!
Sorry, but we don’t have a refund policy.
Yours sincerely,
Bill Gates
PS: I noticed that your website runs on Joomla. That’s 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

● 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
● Ingredients:
– 150 gr (caster / bastard / brown) sugar
– 150 gr (dairy) butter (room temperature!)
– 150 gr (patent) flower
– 3 eggs (room temperature)
– 1 sachet vanilla sugar ( = 8 gr)
– 2 gr salt
– 1/3 sachet baking powder ( = 5 gr)
– Juice from 1/2 lemon

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!
● The Mixer
– Input: ingredients, “time”
– Output: cake dough
● Blackbox
– Innerworkings unknown
– Mixer can be replaced by other object
● Reusable

Re-use Object
Nibble, nibble
little mouse,
Who's that nibbling
at my house
Daughter
asks daddy
for cake (= Object),
icing sugar, water &
candy
Peter
+ cake recipe
becomes object
Daddy,
I want to make a
Hansel & Gretel
house

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!!!

1.Computer
2.Operating System
3.Network
4.Internet
5.Server
Conclusion
6.Email
7.WWW
8.Website
9.OOP
10.Joomla

82
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_Machine_-_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 Kühn, 2003
http://commons.wikimedia.org/wiki/File:CD-R_Front.jpg
● Harddisk in USB external box, Vojtěch 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 Kühn, 2003
http://commons.wikimedia.org/wiki/File:CD-R_Front.jpg
● Harddisk in USB external box, Vojtěch 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_-_DSC001
23.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 Família, Barcelona 3, Sal34, 2011
http://commons.wikimedia.org/wiki/File:Fachada_del_Nacimiento_-_Templo_de_la_Sagrada_Fa
m%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

How IT works - Joomladay UK 2014

Recommended

Recommended

More Related Content

What's hot

What's hot (6)

Viewers also liked

Viewers also liked (6)

Similar to How IT works - Joomladay UK 2014

Similar to How IT works - Joomladay UK 2014 (20)

More from Peter Martin

More from Peter Martin (20)

Recently uploaded

Recently uploaded (20)

How IT works - Joomladay UK 2014