How IT works - Joomladay Germany 2014

Joomladay Deutschland 2014Joomladay Deutschland 2014

How IT works

Joomladay Germany 2014Joomladay Germany 2014

by Peter Martin www.db8.nl / @pe7er


1.Computer

2.Operating System

3.Network

4.Internet

5.Server

6.Email

7.WWW

8.Website

9.OOP

10.Joomla

How IT works


1. Computer


“Compute”


ENIAC


PDP-1


A computer is a general purpose machine that can be instructed to do a specific task

You want a typewriter? “Load” a typewriter programme;

Definition


IBM System/360


Apple ][


Commodore 64


IBM PC


Long Term MemoryROMTape, Floppies, Harddisk, SSD

INPUT Switches, keyboard, mouse, scanner, joystick, touch screen

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

● GUI

● 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


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


Internet = Network between connected local networks;

“Inter-network”

Definition 1


Internet


Internet = Packet Switching on TCP/IP

Definition 2

TransmissionControlProtocol

InternetProtocol


● All transmitted data is divided into blocks, “packets”

● Those “packets” can travel using different routes

● The destination merges the packets

Packet Switching


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


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

Send 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,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?

Receive E-mail


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<[email protected]>: host microsoft.com[134.170.188.221] said: 550 "Unknown User" (in reply to RCPT TO command)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"

Bounce Message


Sending: SMTP Receiving: POP3

or: IMAP

SMTP/POP/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

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

HTTP(S)


● Text file with markup● defines certain elements: pagetitle, paragraph,

heading etc..

HTML


● Created by your browser because it sees HTML hyperlink tag

Hyperlink


● 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


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

JavaScript


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


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

Dynamic


9. OOP


● Object Oriented Programming– 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

Objects


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

Baking a cake


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

Object!


● 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


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:

<?phprequire('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– “A foundation on which to build web applications”

Framework


● Joomla is a project– “a community-based project with contributors from

all over the world working in many different capacities”.

Project


● 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


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

Visitor's GUI


Conclusion


1.Computer

2.Operating System

3.Network

4.Internet

5.Server

6.Email

7.WWW

8.Website

9.OOP

10.Joomla

Conclusion


Presentation available at:http://www.db8.nl

Peter Martine-mail: info at db8.nlwebsite: www.db8.nl twitter: @pe7er

Questions?


Used PhotosTitle sheet:

● Steampunk Workshop Flat-Panel LCD Monitor - Jake von Slatthttp://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● 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 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● 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 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● The End Book, EWikist, 2010

http://commons.wikimedia.org/wiki/File:The_End_Book.png

Technology

How IT works - Joomladay Germany 2014