How IT works - Joomladay UK 2014

Joomladay UK 2014Joomladay UK 2014

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

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 identification“who is who”

● Packet routing“shortest 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: [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


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!


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"


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


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

<?phprequire('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!!!

Conclusion


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), 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 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 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


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

How IT works - Joomladay UK 2014

Technology

serverjjoooommllaaddaayy

networkjjoooommllaaddaayy

emailjjoooommllaaddaayy

mail system

usecommand line

mail servers

dns mail

dear peter