How IT works - Joomladay Germany 2014

How IT works
JJoooommllaaddaayy JJoooommllaaddaayy DDeeuuttsscchhllaanndd GGeerrmmaannyy 22001144
by Peter Martin
www.db8.nl / @pe7er

How IT works
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
1.Computer
2.Operating System
3.Network
4.Internet
5.Server
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

Apple ][

Commodore 64

IBM PC

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

2. Operating System

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

Command Line Interface

Graphical User Interface

● +- 1975 – UNIX
● Mainframe computer
– Multi-tasking
– Multi-user
– Safety & stability
*nix
● 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

● +- 1984 – System 1
● for Macintosh 128K
● GUI
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

Sneakernet

Networking

Ethernet

Hello everyone! Connecting...
I am new!
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

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

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

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

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

● Domain Name System Server ≈ Phone Book
– Browser: www.google.com
– Browser asks DNS for IP address
– DNS: www.google.com = 173.194.65.139
– Browser asks 173.194.65.139 to send the Google
Search page
DNS

5. Server

Server

● 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
Logical ports

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,
William
PS: I noticed that your website runs on Joomla. That’s awesome!
Did you know that Joomla also works on our products Windows + IIS + MSSQL?

Undelivered Mail Returned to Sender
Bounce Message
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" (in reply to
RCPT TO command)
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"

SMTP/POP/IMAP
Sending: SMTP Receiving: POP3
or: IMAP

7. WWW

● World Wide Web
= HyperText Transfer Protocol
≠ Internet !
– A collection of HTML documents
● HyperText Markup Language
– Text files with information linked to other text files
WWW

● Browsing on the WWW:
YOU ARE NOT VISITING A WEBSITE
● HTTP (port 80) – All traffic = plain text
HTTP(S)
● HTTPS (port 443) – All traffic via encrypted connection
– HTTPS does protect your data,
from and to a server
– Even HTTPS cannot protect your data
that is stored at unsafe server....

● Text file with markup
● defines certain elements: pagetitle, paragraph,
heading etc..
HTML

Hyperlink
● Created by your browser
because it sees HTML hyperlink tag

● Image is NOT embedded in HTML text file
● Reference to file on server
● Browser retrieves image and puts it in HTML on
screen
Image

● Cascading Style Sheet
● Does the layout of the page
will layout HTML tags, and “defined name tags”
CSS

JavaScript
● Script that runs in visitor's browser
● Adds bit of interactivity

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 website
– Just HTML text files
– CSS stylesheet
– Images
● Need FTP & local editor
Static

Dynamic
● PHP - Scripting language composes HTML
● MySQL – Database stores all content

9. OOP

● Object Oriented Programming
Objects
– Object = a variable, some sort of container
that can contain all kinds of
variables & functions inside
– Reusable → Blueprints (“Classes”) of other
developers
● Know how to use it (“how to call the object”)
● Don't know inner-workings

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
● Procedure
– 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!
● The Mixer
– Know:
● What variables to input: ingredients, mixing time
● What output to expect: cake dough
– Don't know:
● Inner-workings of mixer
– Mixer can be replaced by other object

Re-use
● My recipe → turn into OOP Blue Print
● Daughter wants "Hansel and Gretel" candy
house
– Ask daddy to for cake = Object
– Create glue with icing sugar & water
– Decorate cake with candy

Re-use

● Create a PDF?
– I don't know how.... but know
● how to download a PDF “Class”, eg www.fpdf.org,
● load that blueprint
● use to create a PDF:
<?php
require('fpdf.php');
$pdf = new FPDF();
$pdf->AddPage();
$pdf->SetFont('Arial','B',16);
$pdf->Cell(40,10,'Hello Joomla!');
$pdf->Output();
?>
Coding

10. Joomla

“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
CMS

● Joomla is a framework
Framework
– “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”.

● Joomla is “a sort of” Operating System
a layer between the webserver
and Joomla/3rd party components
OS

● Joomla is a Graphical User Interface between
– the administrator of a website
– and the database that stores all information.
● The Graphical User Interface for admins =
admin template
– Joomla 3.x: “ISIS”
Admin GUI

Visitor's GUI
● Joomla is a Graphical User Interface between
– the visitor of your website
– and the database that stores all information.
● The Graphical User Interface for vistors =
front-end template
– have a user friendly GUI !!!

Conclusion

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

Presentation available at:
http://www.db8.nl
Peter Martin
e-mail: info at db8.nl
website: www.db8.nl
twitter: @pe7er
Questions?

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_Machi
ne_-_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
● Apple II plus, Hellis, 2004
http://commons.wikimedia.org/wiki/File:Apple_II_plus.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

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
● IceStorm08, MamaGeek, 2007
http://en.wikipedia.org/wiki/File:IceStorm08.jpg
● US mail letterbox, Quadell, 2005
http://commons.wikimedia.org/wiki/File:US_mail_letterbox.jpg

Used Photos
7. WWW & HTML/CSS/JavaScript
● HypertextEditingSystemConsoleBrownUniv1969, Greg Lloyd, 1969
http://commons.wikimedia.org/wiki/File:HypertextEditingSystemConsoleBrownUniv19
69.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_S
agrada_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
● The End Book, EWikist, 2010
http://commons.wikimedia.org/wiki/File:The_End_Book.png

How IT works - Joomladay Germany 2014

Recommended

Recommended

More Related Content

Similar to How IT works - Joomladay Germany 2014

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

More from Peter Martin

More from Peter Martin (20)

Recently uploaded

Recently uploaded (20)

How IT works - Joomladay Germany 2014