1. deblackboxing WordPress Communication, Culture and Technology (CCT)
Georgetown University
Spring 2018
deblackboxing
WordPress
** Change image to something better
Evan Barba
J.R. Osborn 1

2. the world is messy

3. What is Capture?
The conversion of human behavior and real-world data into machine input.
Sensor
Transducer
Encoder
Humans & World
Machines
& Computers
analog
digital
Usually the sensor and the transducer are one and the same, but not always.

4. we need to impose some structure

5. There are also more abstract data structures called “composite types” that help represent the real world Array Queue Stack String Tree Struct (record) Linked list
Packet

6. Packet/Datagram Fixed size Break apart data Independent pathways
Header:
Where to? (IP Address)
Where from? (IP Address)
Package Number (X of Y)
Fixed size
Break apart data
Independent pathways
May not arrive in order
Must be reassembled
Payload (data):
bytes
A very special data structure
Footer:
End of Packet
Checksum or other error correction protocol

7. DATA Packet

8. Why are packets important?
Packets are the way data is structured for transmission over the internet
1974 "A Protocol for Packet Network Intercommunication.” Vinton Cerf and Bob Kahn

9. What is the internet? It consists of: architecture a set of algorithms
a network that transmits data using packet switching
It consists of:
architecture
a set of algorithms
Also important packets don’t care what medium you send them over

10. The Internet Stack
Application Layer
TCP Layer
IP Layer
Physical Layer

11. Physical Layer
“The physical layer provides an electrical, mechanical, and procedural interface to the transmission medium. The shapes and properties of the electrical connectors, the frequencies to broadcast on, the modulation scheme to use, etc.” * As a network of networks, the internet is composed of many different types of physical networks and materials *

13. What is the internet? A network of networks… …that uses the standard
internet protocol suite (TCP/IP).

14. The Internet Stack
Application Layer
TCP Layer
IP Layer
Physical Layer

15. TCP/IP
“Internet protocol suite” TCP over IP Transmission Control Protocol (TCP) Internet Protocol (IP)

16. What is a protocol?
A set of procedures to be followed when communicating.
Algorithm

17. International Protocols
“The Office of the Chief of Protocol … extends the first hand that welcomes presidents, prime ministers, ruling monarchs, and other leaders to our country.”

18. What is a protocol?
A set of procedures to be followed when communicating.
Internet Protocol (IP):
A set of procedures for routing packets
Algorithm

20. Router
IP: A set of procedures for routing packets

21. IP Address Internet Protocol Version 4 (IPv4) 205 . 134 . 189 . 192
four bytes (four “octets” of bits)
32 bits total
232 = 4,294,967,296
The Internet Assigned Numbers Authority (IANA) manages the IP address space allocations globally and delegates five regional Internet registries (RIRs) to allocate IP address blocks to local Internet registries (Internet service providers) and other entities.

22. IP Address Internet Protocol Version 6 (IPv6)
2620 : 0107 : 00ff : abcd : efef : ffff : cd86 : bdc0
8 groups of 4 hexadecimal digits, each group represets 16 bits (two octets) so...
2128 = 340,282,366,920,938,463,463,374,607,431,768,211,456
An IPv6 address is represented as eight groups of four hexadecimal digits, each group representing 16 bits (two octets).
0:0:0:0:0:ffff:cd86:bdc0

23. What is a protocol?
A set of procedures to be followed when communicating.
Internet Protocol (IP):
A set of procedures for routing packets
Transmission Control Protocol (TCP)
A set of procedures for host to host communication
Algorithm

24. Why TCP/IP? Transmission Control Protocol (TCP):
Host-to-Host Protocol (device-to-device)
Verify arrival of packets with acknowledgement
Retransmits lost or damaged packets
Controls rate of data flow
Internet Protocol (IP)
Host addressing and identification (IP Address)
Packet routing
Vinton Cerf Robert Kahn

25. The Internet Stack
Application Layer
TCP Layer
IP Layer
Physical Layer

26. Application Layer
specifies the shared protocols and interface methods used by hosts in a communications network
Hypertext Transfer Protocol (HTTP)
File transfer: File Transfer Protocol (FTP)
Simple Mail Transfer Protocol (SMTP)

27. WORPRESS is one application that formats things according to HTTP

28. What is WordPress?
WordPress is an online, open source website creation tool written in PHP. But in non-geek speak, it's probably the easiest and most powerful blogging and website content management system (or CMS) in existence today.

29. Cheap abundant server space User-generated content
Community
support
Standardization vs.
Customization

30. What is WordPress?
"WordPress was born out of a desire for an elegant, well-architectured personal publishing system built on PHP and MySQL and licensed under the GPL. It is the official successor of b2/cafelog. WordPress is fresh software, but its roots and development go back to It is a mature and stable product. We hope by focusing on web standards and user experience we can create a tool different from anything else out there."
WordPress About Page

32. Sociotechnical System
PHP
server
CSS
Content
HTML
Systems approach define the boxes, define the arrowst
Driverless car
cellphone
Network
MySQL
Browser

33. Sociotechnical System
PHP
Runs
server
Accesses
CSS
Runs
Generates
Connects
Formats
Content
HTML
Systems approach define the boxes, define the arrowst
Driverless car
cellphone
Network
Stores/
Organizes
Displays
Connects
MySQL
Browser

34. Sociotechnical System
PHP
Accesses
CSS
Generates
Formats
HTML
Systems approach define the boxes, define the arrowst
Driverless car
cellphone
MySQL

35. What happens when you navigate to a WordPress webpage?
WordPress reads all the necessary PHP files starting with index.php
WordPress executes the PHP code and retrieves the requested content from the database
WordPress combines all this data and formats it (using CSS) into an HTML document
WordPress serves the formatted document to the client

36. Your Browser Displays HTML
<head>
<!--some header stuff-->
</head>
<body>
<h1> Header Text here </h1>
<div>
<p> Paragraph text here</p>
<h2> Subheader text here </h2>
</div>
<p>Another Paragraph here</p>
</body>
</html>

37. Document Object Model (DOM)
Nodes
TREE
This is the same page depicted as a tree, this tree is the DOM, each box is called a node, and each nodetype is called an “element”
Elements

39. Cascading Style Sheets (CSS)
CSS is a stylesheet language that describes the presentation of an HTML document.
CSS describes how elements must be rendered on screen, on paper, or in other media.
CSS can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files

40. CSS “rule-sets”

41. Document Object Model (DOM)
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

42. MySQL What is a database?
A computer application that stores data and has methods for accessing, managing, searching, and replicating that data
Data is stored in “tables” that have rows and columns like a spreadsheet (2D array or matrix)
data from one table is related to other tables through “keys” which are columns that appear in multiple tables this is why databases are referred to as “relational”

43. Simple Table

44. WordPress database
Let’s take a closer look at wp_posts

45. wp_posts table
Here is where the actual data is

46. A single post A

47. PHP Scripting language that runs on the server
When your browser asks for a .php page the server locates the page, reads the html and executes the php commands inside the html

48. See:: http://html.net/tutorials/php/
We used to just write HTML by hand
See::

49. <title>My first PHP page</title> </head>
<html>
<head>
<title>My first PHP page</title>
</head>
<body>
<?php
echo "<h1>Hello World!</h1>”;
?>
</body>
</html>
THIS IS WHAT IT LOOKS LIKE ON the server, you see the php in there?

50. <html>
<head>
<title>My first PHP page</title>
</head>
<body>
<?php
echo date("r");
?>
</body>
</html>

51. https://yoast.com/wordpress-theme-anatomy/
Wordpress sites are constructed on the fly from a collection of php files

52. <div id="primary" class="content-area">
<?php get_header(); ?> #go find and read the header.php page and insert it here
<div id="primary" class="content-area">
<?php if ( have_posts() ) : ?> #execute the “have_posts() function (TRUE/FALSE)
<?php if ( is_home() && ! is_front_page() ) : ?> # is this the landing page? T/F
<h1 class="page-title screen-reader-text">
<?php single_post_title(); ?> #execute the function and insert results
</h1>
<?php endif; ?>
// Start the loop. #the main wordpress loop
#While there are posts insert the post and go back to the top of the loop.
<?php while ( have_posts() ) : the_post();
// End the loop.
endwhile;
endif; ?>
</div><!-- .content-area -->
<?php get_sidebar(); ?> #go find and read the sidebar.php page and insert it here
<?php get_footer(); ?> #go find and read the footer.php page and insert it here
Twentysixteen index.php

54. Missing Piece? JavaScript
Most popular programming language in the world!
placed in the <body> and the <head> sections of an HTML page (just like php)
to create dynamic and interactive content
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>