Communication Culture and Technology CCT Georgetown University Spring

Communication, Culture and Technology (CCT) Georgetown University Spring 2018 deblackboxing Word. Press Evan Barba J. R. Osborn

the world is messy

What is Capture? The conversion of human behavior and real-world data into machine input. Humans & World analog Sensor Transducer Encoder Machines & Computers digital 0010 1100 0011 0101 1010 1110

we need to impose some structure

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

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

DATA Packet 000101010101010101011010101010101010101010 01100101010011010101011101010110101010101010101010 101101011110101011010101111111001010010111111110010111110101 1100101010010110100000001010010111 010101001010101001010101 111111000011100010111001010100010011 1010100010101

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

What is the internet? a network that transmits data using packet switching It consists of: • architecture • a set of algorithms

The Internet Stack Application Layer TCP Layer IP Layer Physical Layer

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 *

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

The Internet Stack Application Layer TCP Layer IP Layer Physical Layer

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

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

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

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

Router IP: A set of procedures for routing packets

IP Address Internet Protocol Version 4 (IPv 4) 205. 134. 189. 192 11001101. 10000110. 10111101. 11000000 four bytes (four “octets” of bits) 32 bits total 232 = 4, 294, 967, 296

IP Address Internet Protocol Version 6 (IPv 6) 2620 : 0107 : 00 ff : abcd : efef : ffff : cd 86 : bdc 0 8 groups of 4 hexadecimal digits, each group represets 16 bits (two octets) so. . . 2128 = 340, 282, 366, 920, 938, 463, 374, 607, 431, 768, 211, 456

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

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

The Internet Stack Application Layer TCP Layer IP Layer Physical Layer

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) • E-mail: Simple Mail Transfer Protocol (SMTP)

What is Word. Press? • Word. Press 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. – https: //ithemes. com/tutorials/what-is-wordpress/

Cheap abundant server space Community support Usergenerated content Standardization vs. Customization

What is Word. Press? • "Word. Press was born out of a desire for an elegant, well-architectured personal publishing system built on PHP and My. SQL and licensed under the GPL. It is the official successor of b 2/cafelog. Word. Press is fresh software, but its roots and development go back to 2001. 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. " – Word. Press About Page

PHP server CSS Sociotechnical. Content System HTML cellphone Network Browser My. SQL

Runs PHP server Accesses Generates CSS Runs Connects Sociotechnical. Content System Formats HTML Network cellphone Displays Connects Browser Stores/ Organizes My. SQL

PHP Accesses Generates CSS Sociotechnical System Formats HTML cellphone My. SQL

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

Your Browser Displays HTML <html> <head> <!--some header stuff--> </head> <body> <h 1> Header Text here </h 1> <div> <p> Paragraph text here</p> <h 2> Subheader text here </h 2> </div> <p>Another Paragraph here</p> </div> </body> </html>

Document Object Model (DOM) Nodes EE TR Elements

http: //www. w 3 schools. com/css/

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

CSS “rule-sets”

Document Object Model (DOM)

My. SQL • 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 (2 D 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”

Simple Table

Word. Press database

wp_posts table

A single post

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

See: : http: //html. net/tutorials/php/

<html> <head> <title>My first PHP page</title> </head> <body> <? php echo "<h 1>Hello World!</h 1>”; ? > </body> </html>

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

https: //yoast. com/wordpress-theme-anatomy/

<? 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 the landing page? T/F <h 1 class="page-title screen-reader-text"> <? php single_post_title(); ? > #execute the function and insert results </h 1> <? 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

Missing Piece? • Java. Script • 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. get. Element. By. Id("demo"). inner. HTML = "My First Java. Script"; </script>