how it works - joomladay uk 2014
DESCRIPTION
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, Peter explains common concepts like Operating System, Internet, Server, Website, Object Oriented Programming, Joomla in plain English. In this keynote for Joomladay UK 2014 Peter explains the following subjects: Computer Operating System Local Area Network (LAN) Internet (Wide Area Network (WAN)) Server Email WWW Website & PHP/MySQL Object Oriented Programming (OOP) JoomlaTRANSCRIPT
Joomladay UK 2014Joomladay UK 2014
How IT works
by Peter Martin www.db8.nl / @pe7er
1
Joomladay UK 2014Joomladay UK 2014
Joomladay UK 2014Joomladay UK 2014
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
Joomladay UK 2014Joomladay UK 2014
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
Joomladay UK 2014Joomladay UK 2014
● +- 1975 – UNIX● Mainframe computer
– Multi-tasking
– Multi-user
– Safety & stability
● 1991 – Linux● PC, servers,
embedded
● Command Line & GUI
*nix
Joomladay UK 2014Joomladay UK 2014
● +- 1981 – MSDOS● Command Line
● 1985 – WindowsGUI for MSDOS
● 1995 – Windows '95GUI with CMD prompt
Microsoft
Joomladay UK 2014Joomladay UK 2014
● +- 1984 – System 1● for Macintosh 128K
● 1999 – OSX● Unix-based Operating
System + Graphical User Interface
● Terminal (= programme to use Command Line)
Apple
Joomladay UK 2014Joomladay UK 2014
● 2003 by Google
● Open Source
● For Smart Phones
● Linux kernel !
Android
Joomladay UK 2014Joomladay UK 2014
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...
Joomladay UK 2014Joomladay UK 2014
4. Internet
Joomladay UK 2014Joomladay UK 2014
Definition 1
Internet = Network between connected local networks;
“Inter-network”
Internet
Joomladay UK 2014Joomladay UK 2014
Definition 2
Internet = Packet Switching on TCP/IP
TransmissionControlProtocol
InternetProtocol
Joomladay UK 2014Joomladay UK 2014
Packet Switching
● All transmitted data is divided into blocks, “packets”
● Those “packets” can travel using different routes
● The destination merges the packets
Sharing
Joomladay UK 2014Joomladay UK 2014
Internet Protocol
● Host addressing and identification“who is who”
● Packet routing“shortest route?”
Joomladay UK 2014Joomladay UK 2014
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)!
Joomladay UK 2014Joomladay UK 2014
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
Joomladay UK 2014Joomladay UK 2014
5. Server
Server
Joomladay UK 2014Joomladay UK 2014
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
Joomladay UK 2014Joomladay UK 2014
Logical ports
● Multi-user● Multi-tasking:
– ftp: 21
– SSH: 22
– SMTP: 25
– HTTP: 80
– POP3: 110
– IMAP: 143
Joomladay UK 2014Joomladay UK 2014
6. E-mail
Joomladay UK 2014Joomladay UK 2014
● 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
Joomladay UK 2014Joomladay UK 2014
Send E-mail
From: [email protected] To: [email protected] 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
Joomladay UK 2014Joomladay UK 2014
Receive E-mail
From: [email protected] To: [email protected] 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!
Joomladay UK 2014Joomladay UK 2014
Bounce Message
Undelivered 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<[email protected]>: 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; [email protected] Original-Recipient: rfc822; [email protected]: failedStatus: 5.0.0Remote-MTA: dns; microsoft.comDiagnostic-Code: smtp; 550 "Unknown User"
Joomladay UK 2014Joomladay UK 2014
7. WWW
Joomladay UK 2014Joomladay UK 2014
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
Joomladay UK 2014Joomladay UK 2014
“Surfing”
Browsing on the WWW:
YOU ARE NOT VISITING A WEBSITE
Joomladay UK 2014Joomladay UK 2014
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....
Joomladay UK 2014Joomladay UK 2014
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
Joomladay UK 2014Joomladay UK 2014
8. Website
Joomladay UK 2014Joomladay UK 2014
● Dedicated server● Shared hosting● VPS
Server types
Joomladay UK 2014Joomladay UK 2014
● Your own rack● Your own configuration● Expensive
Dedicated
Joomladay UK 2014Joomladay UK 2014
● Part of one rack● Share with 100 others● Same configuration● Neighbours:
– Hacked?
– Popular site?
Shared
Joomladay UK 2014Joomladay UK 2014
● Virtual Private Server● “Virtual machine”● Scalable● Your own configuration● Management
– by hosting company
– unmanaged = by yourself
VPS
Joomladay UK 2014Joomladay UK 2014
Static
● Static website– Just HTML text files
– CSS stylesheet
– Images
● Not interactive● Need FTP & local editor
Joomladay UK 2014Joomladay UK 2014
Dynamic
● PHP - Scripting language composes HTML● MySQL – Database stores all content
Joomladay UK 2014Joomladay UK 2014
9. OOP
Joomladay UK 2014Joomladay UK 2014
Objects
● Object Oriented Programming– Object = a “special” variable
some sort of container,contains variables & functions inside
Joomladay UK 2014Joomladay UK 2014
Objects
● Object– “Class” -> Blueprint
– “Blackbox”● Input & output● Inner-workings unknown● Documentation how to use object
– Reusable
Baking a cake
Joomladay UK 2014Joomladay UK 2014
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
Joomladay UK 2014Joomladay UK 2014
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!
Joomladay UK 2014Joomladay UK 2014
Object!
● The Mixer– Input: ingredients, “time”
– Output: cake dough
● Blackbox– Innerworkings unknown
– Mixer can be replaced by other object
● Reusable
Joomladay UK 2014Joomladay UK 2014
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
Joomladay UK 2014Joomladay UK 2014
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
Joomladay UK 2014Joomladay UK 2014
Create PDF
<?phprequire('fpdf.php');$pdf = new FPDF();
$pdf->AddPage();$pdf->SetFont('Arial','B',16);$pdf->Cell(40,10,'Hello Joomla!');
$pdf->Output();?>
Joomladay UK 2014Joomladay UK 2014
10. Joomla
Joomladay UK 2014Joomladay UK 2014
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
Joomladay UK 2014Joomladay UK 2014
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
Joomladay UK 2014Joomladay UK 2014
Project
Joomla is a project
“a community-based project with contributors from all over the world working in many different capacities”.
Joomladay UK 2014Joomladay UK 2014
“OS”
Joomla is “a sort of” Operating System,a layer between – Joomla's components & 3rd party components
– and the webserver
Joomladay UK 2014Joomladay UK 2014
Admin GUI
Joomla is a Graphical User Interface between– the website administrator
– and the database that stores all information.
Admin GUI → admin template
Joomladay UK 2014Joomladay UK 2014
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
Joomladay UK 2014Joomladay UK 2014
1.Computer
2.Operating System
3.Network
4.Internet
5.Server
Conclusion
6.Email
7.WWW
8.Website
9.OOP
10.Joomla
82
Joomladay UK 2014Joomladay UK 2014
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
Joomladay UK 2014Joomladay UK 2014
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), 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
Joomladay UK 2014Joomladay UK 2014
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
Joomladay UK 2014Joomladay UK 2014
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 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
Joomladay UK 2014Joomladay UK 2014
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 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
Joomladay UK 2014Joomladay UK 2014
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
Joomladay UK 2014Joomladay UK 2014
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 Família, 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