Information Technology is an integral part of our daily life. Have you ever wondered what happens under the hood when you visit a webpage? Or what OOP actually means?
In this presentation for Joomladay Germany 2014 in Cologne, Peter Martin explains common concepts like Operating System, Internet, Server, Website, Object Oriented Programming, Joomla in plain English.
Contents:
1. Computer
2. Operating System
3. Network
4. Internet
5. Server
6. Email
7. WWW
8. Website
9. OOP
10. Joomla
1. How IT works
JJoooommllaaddaayy JJoooommllaaddaayy DDeeuuttsscchhllaanndd GGeerrmmaannyy 22001144
by Peter Martin
www.db8.nl / @pe7er
2. 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
7. 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;
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
14. Operating System
Programme Programme Programme
Command line interface Graphical User Interface
Hardware
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
Programme
Operating System
19. ● +- 1984 – System 1
● for Macintosh 128K
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
● GUI
Apple
● 1999 – OSX
● Unix-based Operating
System + Graphical
User Interface
● Terminal (=
programme to use
Command Line)
25. Hello everyone! Connecting...
I am new!
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
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...
29. Definition 2
Internet = Packet Switching on TCP/IP
Transmission
Control
Protocol
Internet
Protocol
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
30. Packet Switching
● All transmitted data is divided into blocks,
“packets”
● Those “packets” can travel using different
routes
● The destination merges the packets
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
32. ● Host addressing and identification
“who is who”
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
● Packet routing
“shortest route?”
Internet Protocol
33. ● Packets travel from router to router to router to
router to router to router to router to destination
● Quality Control?
Transmission Control Protocol (TCP)!
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
TCP
Here's a
packet Thanks,
I got it!
Here's the
next packet
35. ● 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
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
DNS
38. JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
● 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
41. JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
● 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
42. 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
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
43. 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?
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
44. 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"
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
47. ● World Wide Web
= HyperText Transfer Protocol
≠ Internet !
– A collection of HTML documents
● HyperText Markup Language
– Text files with information linked to other text files
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
WWW
48. ● 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....
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
49. ● Text file with markup
● defines certain elements: pagetitle, paragraph,
heading etc..
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
HTML
50. Hyperlink
● Created by your browser
because it sees HTML hyperlink tag
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
51. ● Image is NOT embedded in HTML text file
● Reference to file on server
● Browser retrieves image and puts it in HTML on
screen
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
Image
52. ● Cascading Style Sheet
● Does the layout of the page
will layout HTML tags, and “defined name tags”
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
CSS
53. JavaScript
● Script that runs in visitor's browser
● Adds bit of interactivity
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
58. ● Virtual Private Server
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
● “Virtual machine”
● Scalable
● Your own configuration
● Management
– by hosting company
– unmanaged = by
yourself
VPS
62. ● 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
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
63. Baking a cake
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
● 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
64. Baking a cake
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
● 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!)
66. Object!
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
● 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
67. 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
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
69. JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
● 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
71. “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
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
CMS
72. ● Joomla is a framework
Framework
– “A foundation on which to build web applications”
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
74. ● Joomla is “a sort of” Operating System
a layer between the webserver
and Joomla/3rd party components
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
OS
75. ● 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
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
– Joomla 3.x: “ISIS”
Admin GUI
76. 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 !!!
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
79. Presentation available at:
http://www.db8.nl
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
Peter Martin
e-mail: info at db8.nl
website: www.db8.nl
twitter: @pe7er
Questions?
80. Used Photos
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
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
81. 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
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
82. Used Photos
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
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
83. Used Photos
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
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
84. Used Photos
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
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