CHAPTER 3

Web Literacy

You are a creator for the web, and your creative participation helps the web grow and become more advanced. In fact, your participation is exponentially increasing the Internet at a rate of over 40 percent per year. As more users create and more devices come online, the Internet has expanded from the browser and the World Wide Web to the “things” such as phones, wearables, and household items—basically anything with an Internet connection. The content you create is part of the future web, an immense database of everything we are all working on. It’s estimated that, by 2020, the web will be 44 zettabytes (44 trillion gigabytes) big.¹

This chapter advances the creative explorations you have initiated and teaches you how to understand the overwhelming amount of information that affects your use and your participation. We think the savvy user should have a working knowledge of how the web works and why. Understanding the basic functions of the systems of participation will help you speak the language and create on a higher cognitive level, enabling you to become a leader in the digital environment and make higher-quality work.

People often think that literacy means comprehending and reading information. Literacy means to read and write. This chapter will focus first on comprehension and reading of technical information and code, and then we will focus on how you can learn to write and create material. The first part of this chapter will focus on technical terms and general information about the web, file structure, information pathways, web language, data, and the physical technology of the online world. We will not overburden you, but we will encourage you to appreciate the technologies and science that most users take for granted every minute they are using the web. You will become far savvier by understanding the structures that make the web work. First, we offer a short history of the web itself and then delve further into the technical structure of the user environment. We will do our best for this not to overwhelm, but to inform.

This chapter will fill you up with knowledge of the web from head to foot. Or maybe we should say from “header to footer”! You use the web every day and interact with it on a consistent basis, but do you know how it works? This chapter will start from the first visuals that appear when you open your browser to the very wires that carry blips of light across the oceans.

Figure 3.1

Empty monitor.

When you first open a new webpage template, it usually comes blank, with the boxes prepared and floating in space (in web terms, these are cascading style sheets (CSS)), and you have to fill the blocks with your specific information. By the end of this chapter, you’ll know why the web works and why you can use it so freely and easily. The adage goes that you do not need to be a mechanic to drive a car—but it helps!

Welcome to the web!

It’s not your fault you take the web for granted—it’s because it works really well. But when you find out how it works, you’ll be astounded. There was once a time, not long ago, that the entire World Wide Web ran off one computer in Tim Berners-Lee’s office at CERN, in France. Within 30 years, it has grown to encompass the entire globe and functions as an everyday part of the lives of nearly 3 billion people.

When you get home and you turn on your computer, it runs on a micro version of the web itself. Your computer is a machine that processes data using dozens of microchips, a processor, and a hard drive. It runs on an operating system written in a code language that you cannot see, and you can interact with the machine through a graphic user interface. The language creates the visuals so that you can operate the system without needing to know code. Similarly, the web browser does this for the online languages that take hypertext and hypermedia (text and media that can be conformed to the user’s screen) and mark them up to a visual representation. The browser takes the code of HTML and makes it visual.

Figure 3.2

Do not turn off—Tim Berners-Lee computer.

Source: Wikimedia Commons

The browser is one of the few devices that properly reads HTML and makes it usable and interactive and it makes the World Wide Web work. Berners-Lee made the first browser on that very computer that ran the web, and it was called the Nexus browser. The downside was that the Nexus browser was pretty clunky and required technical knowledge of online media to navigate it. At age 22, the tech-savvy Marc Andreesen dreamed of improving the experience of the web and co-authored the first usable web browser, called Mosaic. He later co-founded Netscape, the earliest mainstream usable browser. However, because the browser works inside an operating system, Netscape had to get along with the companies that supported its software. Netscape’s steepest competition was Microsoft, the largest operating system company in the world at the time. Microsoft retaliated by creating its own browser in 1994, Internet Explorer, and packaged it with the operating system. The competition Netscape faced nearly shut it down.

Now, you have a choice of browsers, such as Chrome, Firefox, Internet Explorer, Safari, Opera, and several more, depending on how technically interested you are. Each of them does virtually the same processing of HTML code to create images and text that are easily readable.

HOW DO WEBPAGES APPEAR ON MY COMPUTER?

Internet Protocol

When you type in a web address, it seems as if the website appears nearly instantly, especially if you’ve been there before. It works just like dragging and dropping files from your USB drive to a computer. Let’s start at the top—the web address itself. The web address is called a uniform resource locator, or URL. (No one ever says “uniform resource locator” out loud; it would be heard as “earl.”) The URL is also called a domain name, or a mask, because it masks the actual address of the URL—the Internet Protocol (IP) address. The Internet Protocol address is the location of the files that hold the website you want to visit. Every node and port and drive (and your phone) has a unique IP address that tells the Internet where data are located. For example, ask a site such as Ask Google what your IP is, and it will let you know. At the time of writing, Google’s IP address was http://173.194.121.48/. Thankfully, we use domain names so that we don’t have to write the IP address each time to visit a site.

Domain Names

That leads us to wonder where domain names come from. When the web was first born, domains were chaotic and unorganized, in dozens of languages. In 1998, a non-profit organization created the Internet Corporation for Assigned Names and Numbers, also known as ICANN. This company organized and standardized the system so that users who made websites could potentially rent any domain and extension available. For example, you can have a domain name with .com for commercial, but a separate domain with .org for organization. Although ICANN distributes and organizes the domain names, it doesn’t police the content on any given site. This means that you really can put whatever content you’d like on your page, regardless of extension.

To understand the ICANN system better, think of it in terms of your phone number. Did you ever consider who owns your number? You own your number, as long as you continue to pay your phone bill, and, if you stop, they’ll take that number away from you and reassign it. It’s the same for domain names—very few sites actually own their domain name. ICANN allows resellers such as GoDaddy or Namecheap to rent the domain names, to decentralize the system and allow competition on pricing. Domains are fairly affordable to rent, and you should have your name. As a personal brand, it is important to own your name, so that you can connect it to the URLs of your social media and make it easy for people to find your website. It’s also important to put on your résumé or your business cards.

Hypertext Transfer

Now that you’ve typed in the web address and clicked enter, an interesting and phenomenal technological feat occurs—the transfer of the hypertext from the host hard drive to your browser. To pull information across the Internet, we have to request the data from another drive. The term pull is very important, because we are nearly always pulling the data across the web by request; the web rarely pushes data to you (the exception is apps on your device). We make a request to the host hard drive by typing in the domain web address; it sees the IP address and uses the hypertext transfer protocol, or http, to start the process. See, those little letters at the beginning of the domain mean something.

When the hypertext transfer protocol is activated, it sends the request to the computer that is holding the data of the website, usually housed in something called a root directory. (You can call a directory a folder.) That directory is probably on a hard drive in a server farm somewhere on the Earth. When you host a website, it means you are renting hard-drive space on a drive somewhere in a stable environment. Web-server farms are usually housed in a large, cooled room underground, far from geographic fault lines. Just as your computer gets heated up when you are using it, so do thousands of hard drives running simultaneously.

Figure 3.3

Server farm.

Source: Wikimedia Commons

When the request reaches the root directory, it asks for the files to be transferred to your computer’s browser and, in order to speed that process up, separates the files into packets of data that reassemble in your computer. The files, the pictures, and the website style all travel for possibly thousands of miles in less than 1 second, to get to you so you can enjoy your cat pictures. Once the website reaches your browser, it actually downloads the site onto your computer in something called a cache, a small folder on your machine that keeps the website’s visual information in case you revisit the site. Because hypertext is a code language, the files are normally pretty small and reside on your machine for weeks or months to assist in speedier web-page loading.

Web Languages

Hypertext markup language (HTML) may be one of dozens of web languages, but it is the language that makes up the World Wide Web. It’s the language we recommend you learn in order to better understand how to create a nice website. HTML is a master language that allows the user to see websites as images and text without the code. For information to be laid out properly on a site, HTML is assisted by CSSs. If you want your site to react to the mouse on the screen or move images automatically, Javascript and jQuery assist HTML. If the site is built with a database or is far too large for the entire site to be sent by packets, sometimes the website’s files stay on the host computer while you browse them, and the language for this is called PHP.

Digital media started in a very simple language that eventually evolved into all of our visual languages. Binary language is the original digital media language, as it allowed for the processing of a lot of information, compressed into simple data. In binary, there are only two pieces to process: a 1 or a 0. It’s either on or off; true or false; yes or no; in or out. This original language actually dates back to Gottfried Leibniz, in 1679, originally in the context of quantifying religious information. In the hundreds of years since, binary has been used in analog form in several variations, from Braille language to Morse code. Computer scientists in the early 1970s realized that binary could be utilized as a batch processing system to universalize computer data and they called this the American Standard Code for Information Interchange, or ASCII.

Figure 3.4

I/O power button.

What binary taught Tim Berners-Lee was that computer languages work best with tags and binary-style switches, and, following the model of programming, HTML followed suit. Using tags enclosed in brackets, HTML is able to communicate a visual output to a browser. For example, to speak in HTML, you would enclose the words in brackets, like this (see Figure 3.5):

<p>HTML is a visual language that displays text and images through browser interpretation. It displays markups like <strong>bold</strong> or <em>italics</em> through the tags that turn on and off.</p>

The tags for each different language use a binary-like system. For HTML, a bracket system such as <tag> turns on the effect, and </tag> turns off the effect. In different languages, different brackets may be used. CSS uses curly brackets, { }, to identify style, and we will delve far deeper into code concepts in the following sections. We feel that your understanding of code will make you a savvier participant in the online environment.

Figure 3.5

Monitor with text: HTML is a visual language that displays text and images through browser interpretation. It displays markups like bold or italics through the tags that turn on and off.

DATA WE SEE AND DATA WE DON’T

Inside the visual languages of HTML, CSS, Javascript, and dozens more, there are parts of the code that remain invisible to the viewer on the web browser or screen. This is called metadata. Quite possibly the most important part of categorizing and quantifying digital media, metadata represents all technical data and contains additional code information. Every time you create digital media, metadata is inherently involved. If you start a Microsoft Word document, the metadata includes information about the computer it was created on, the owner of the machine (if you’ve registered your machine), the date of creation, how many words and characters have been used, and how much space the information occupies.

Metadata helps us categorize the media we create as well. When we write a webpage, we can add lines of metadata in the header of the file that the user cannot see. The goal is to have your media communicate with other technologies and organizational systems. You can see metadata occasionally, when you post a link on Facebook or other social media, and the description of the site automatically appears in the box beneath the link. If the website’s creator doesn’t include metadata, the site automatically uses the web content to fill the description. We highly recommend you add metadata descriptions and keywords to your sites and we will go into this in more depth in our section on “Understanding Hypertext and a Lesson on Web Code.”

FILES ON THE WEB

As well as visual web code, files are transferred across the Internet into your browser and shown as images, sound, video, or interactive experiences. Files are usually included as linked objects that are also stored in subdirectories of a site’s root folder. Directories such as “Images” or “Videos” are kept inside the root directory to create a more organized system for the web designer, but, in truth, the web browser doesn’t really care where files are kept. As long as a file is requested properly, it can be stored anywhere.

But what are files on the web? As digital media don’t have a physical counterpart, files are accumulations of various amounts of code. We often take files for granted, because they nearly always function properly. Let’s say you want to post one of your Instagram photos on your website for someone to see. Well, you would take the file from your phone, upload it to your website directory, and then link to the image in your HTML code. (The code tag would look something like this: <img src=″instagram.jpg″>.) Have you ever considered how the digital photograph actually works?

You now know that data is broken up into packets and travels across the web to be reassembled. This obviously cannot happen with physical media. If you tear up a photo you printed out and try to reassemble it as it was, it would be impossible. Digital media, whether in the form of images, video, sound, or text, are just lines of code. Your Instagram photo appears after you have pressed the shutter button on your camera phone, and the shutter behind your lens allows light to become digitized by the complementary metal-oxide semiconductor (CMOS) chip inside the camera. The CMOS chip converts the light waves into quantifiable electrons, and a digital file builds instantaneously. The file that is created inside your phone is called an exchangeable image file, or EXIF data. The EXIF contains all the technical digital information about the image, from the pixels to the location to the lines of code that recognize your face. You will understand far more about the data located inside the files after reading the section on “Data, the Cloud and Digital Files” in this chapter.

DATA TRAVELING AROUND THE WORLD: THE PHYSICAL PROPERTIES OF THE WEB

The Internet before the World Wide Web was built on centralized systems of many computers and user nodes that interacted with one another. Several major companies, scientific institutions, and universities worked together to create a large, interactive, connected digital environment. The downside was that it had difficulty expanding, because the original architecture of the web was built around huge, centralized computer systems. The World Wide Web helped bring the idea that each computer, connected through a transmission control protocol, or TCP, connected to an IP, can act as part of the connective web and increase the size, volume, and speed of the web. Every user connected to the World Wide Web is connected using a TCP/IP device, commonly called a modem. You either get the modem from your Internet service provider or you purchase one for home or business use. To connect your machines to the modem, you also most likely have a router that connects your computer to the modem with an Ethernet cable or by wireless signal, known as Wi-Fi.

DATA IN MANY FORMS

As you progress through this chapter, we want you to keep in mind that web literacy comes from a general understanding of the platforms you use and how you read the information and subsequently become empowered to participate and create new and digital media. In our hypermedia present, data can be an overused terminology that describes any type of digital media. Although this is true, data takes many forms, from code to statistics, to algorithms, to an aggregate of databases. We do our best to consider the many pitfalls in the misinterpretation of data use.

We recognize that “data” is a plural word, as datum is the singular, and we acknowledge this is a contentious issue in journalism and writing. When we refer to data, we may use either the singular or the plural, depending on the context of the information. Many outlets, from the Wall Street Journal to The Guardian, consider the term data to change between singular and plural, depending on what data qualifies.²

You most likely hear the term “big data” used quite often, as researchers and analysts attempt to interpret the massive amount of information created by users on a daily basis. In your efforts to be a savvy user of the web, we encourage you to think of data in the creation process and become responsible for how you share your data. While you read the following sections, we hope you keep the fact that the material you create online can be quantified in the back of your mind.

A savvy user of the web knows why and how to create new and digital media.

UNDERSTANDING HYPERTEXT AND A LESSON ON WEB CODE

The World Wide Web as we know it today is completely interactive, continually expanding, and progressively becoming more technical to operate from a code perspective. In its current iteration, the web has become so advanced that CMSs such as WordPress and Wix allow users to employ the platforms to create websites without concerning themselves with the code. As far as we see it, this is both good and bad.

It’s good because it allows unprecedented access to creating online content to more people every day. It’s bad because fewer people will be literate in the basic functions of the web, which could lead them to be taken advantage of by advertisers or service providers.

This section acts as a primer for you to understand the basic construct and operation of the hypertext languages and the code that operate the webpages and CMSs we all enjoy. This section is in no way comprehensive, as there are dozens, if not hundreds, of books and websites on the topic of learning to be literate and specialized in web code. Our intention, in this process, is to offer you some insight into the various ways the web is presented to you and how you can become a better, media-literate, participating creative.

WHY IS IT IMPORTANT TO UNDERSTAND WEB CODE?

This question is nearly the impetus for the writing of this book. When people hear the word “code,” they immediately recoil and sigh at the notion of writing strings of letters to make pictures. We find that most users are interested in code, but are highly intimidated. Marc Prensky, the author of the paper “Digital Natives, Digital Immigrants” (2001), explains that today’s youth culture is born digital and speaking “natively digital.”³ Prensky later corrected his essay when he realized that he may have called the digital generation too soon, as the youth today will be even more native, as they grow up with touch-screen devices. What Prensky has stayed consistent with, at every speaking event and paper he writes, is that the next language to be literate in is code.

There are different code languages everywhere you look—and we aren’t even making a reference to The Matrix. When you watch television, it is encoded to fit on your screen. When you look at an app on your phone, it is coded in a specific language. Video games are coded in an interactive code. When you visit webpages, they are coded in web code. We will attempt an overview of some of the languages that you interact with most often on your computer.

This book does not delve deep into programming languages such as Python or Ruby on Rails, but we highly recommend you learn these codes as well, because they create the backbone of the visual codes that make up websites and apps. Languages such as Python and Ruby on Rails simplify the C (all-purpose programming) language and allow users to learn and approach core code knowledge. They are object languages that we suggest you learn if you find yourself really interested in the web languages we’ll explain here. The web code languages we’ll talk about in this book will help you gain an understanding of, and literacy in, the creative features of website design.

“IT LOOKS LIKE AN ALIEN LANGUAGE!”

The first time we right click and hit view source on a website, our students and colleagues believe we’ve shown them text from Mars. In other words, it can feel so foreign that it may not even be from this planet. In this section, we’ll engineer several websites so that you can see what the code does on-screen and how you interact with it. We’ll then show you how to install your own site or write one from scratch, to present your work online.

As you know, the web is written in HTML, and the design of websites uses languages such as CSS and jQuery. There are two ways your browser sees a website: client-side code or server-side code. The reason the web is so fast is because your browser actually does most of the heavy lifting when displaying websites. When you click on a website link or type in the URL and hit enter, only the code and the link to the images are sent to your browser. Previously, you may have thought that all the files and images and colors are sent, but that isn’t the case. Not only would the downloading of an entire website slow the web down, but it would eat through data surprisingly quickly. All that is sent are the lines of code—which make up very small file sizes.

Figure 3.7

Website as visual.

Figure 3.8

The site in as source code.

The code is sent across the web, and your browser reads the code and displays the site. The code contains the elements of the site such as the construct, the shape, the references to the color, and, most importantly, the body content. All the larger files remain on the server of the host, and the browser links directly to them to view them. This is called client-side code, the client being you, the user.

When the site opens, the browser reads the site from top to bottom, reading and loading all the languages as it goes. At the top of the code, the browser sees <!DOCTYPE html> and prepares to display the document. As the browser reads down the code, it loads the <head>, which contains the <title> and all the design elements, metadata, description, and keywords, and preloads any necessary animation scripts such as jQuery. After the </head> is done, it loads the <body>, which primarily contains the <p>content</p> and the images and embedded material. After the </body> is done, the site knows it has finished loading when it reaches the “off button,” </html>.

Conceptualize this: Your browser is the website image; before reaching your browser, the website lives as code and files.

Server-side code is similar, but it leaves the majority of the files on the server and loads the site at the host. Your browser acts like a window to the website you are visiting, thereby speeding up your access to the content. This is the case with database web languages such as PHP, a hypertext preprocessing language. PHP is the language that WordPress uses and for a very good reason: quick customizability.

This Still Looks Alien

We know, but you’ll get there. Let’s break down some of the simpler languages first, before we get to WordPress, which is a preloaded script that you can install. Let’s start from the host. When you purchase a domain name, you’ll need to host your content and files. There are hundreds of places out there to host your site, such as Midphase.com, Lithium.com, Hostgator.com, Bluehost.com, among thousands. Some hosts offer a unique static IP address, and some use shared IP addresses that save you money. You should rent a host based on how much data you wish to store, how many people will visit your site, and if you’d like security installed in case you will be using your site to sell a product.

When you get your hosting up, you’ll need to set your domain name to point at the host by setting the DNS settings. This tells the domain to point to your directory. Your directory really only needs to contain one single file for your website to work: index.html.

The index.html file is your website. You should also have a folder called images, which, obviously, contains all the images on your site. It is really all you need to run a simple site. When you write in HTML, it defaults to the Internet’s default style of Times New Roman black text, blue hyperlinks, and purple visited links, sticking to the upper-left corner of the browser. To create layout, you need to incorporate some style. Style can be added directly to the HTML page to redefine elements of your code. You can add style to your page to increase the graphic options. To add style, you let the site know, in the head of the site, all the terms you’d like to redefine. For example, if you’d like the text to be blue, you would redefine the <p> tag.

If you are modifying the <p> tag in the head of your webpage in the <style type=″text/css″> section, it would look like this:

p {color:blue;}

If you are styling the <p> tag on a tag-by-tag basic (which is far more time consuming), it would look like this:

<p style=”font-color: blue”>

From then on, any time the <p> tag was used, it would show up as blue. You can redefine any tag on your site by adding style. You can even redefine the <body> tag, which would do a blanket change of everything in the body of the site. But style can do so much more than that. You can create layout, float information, change the margins, and create interactive elements. However, there’s a problem with style. It works really well if you only have one webpage, but what if you have dozens? Then you need to copy and paste all of your style onto each page to keep it consistent. That would work fine, until you need to make a small change such as a font size—you’ll have to change each and every page!

Or, you can create a CSS. CSS is a design language that redefines website elements and allows the user to have full creative control. The style sheet is created as one page, and then, on each of your webpages, you just have to tell it to find the style sheet in order to use its customization. In the head of your pages, you would include the line of code: <link rel=″stylesheet″ type=″text/css″ href=″mystyle.css″>.

This link leads the page to the style sheet that loads all the style for the site all at once. CSS is written in a slightly different language, but looks very similar to the HTML style. It uses different brackets and a specific grammar.

It looks like this:

thingtodefine {whatparttodefine: newdefinition;} p {color: blue;}

You can also add several customizations to the object you are redefining.

p {color: blue; font-size: 12px; font-family: sans-serif;}

From then on, all things tagged <p> would be in 12-point font and sans serif, such as Arial or Helvetica, and blue.

COLOR AND FURTHER CUSTOMIZATIONS

In our examples, we have been using the actual names of colors to customize our tags. You have access to more than 16 million colors to use on the web. To use color on your site, you have to refer to its specific hexadecimal color code. You may have seen these codes before, written like this: #141FC4—this is a royal blue. Hexadecimal color is a 24-bit color scheme using the primary colors as its base (each color is 8 bits). The darkness to lightness of the color ranges from 0 to F, or 16 increments. The first two digits correspond to red, the second two correspond to blue, and the third two correspond to green. So, if the hexadecimal number reads #00FF00, the color would be green. A lighter green would be #009900. All white is #FFFFFF, and all black is #000000.

There are only a little more than a dozen web-safe fonts to use. When a font shows up on your browser, it is because your computer already contains the font and displays it. The font itself is not carried from the host to your browser. The three families of fonts are serif fonts, such as Times New Roman; sans-serif fonts, such as Arial; and monospace fonts, such as Courier New.

Today, the web uses HTML5 and CSS3, which means you can integrate “web-kits” that allow for more fonts and color.

THE CPANEL AND INSTALLING WORDPRESS

A good web developer is an organized web developer. When you design your site, you should have a structure that you can remember in your head. The index.html file should be in your main directory and your style.css page. To create a set of clean URLs, you’ll need to create a new folder for each additional webpage and, in each folder, create an index.html file. This way, your URL structure shows the names of the folders, rather than the files.

https://github.com/h5bp/html5-boilerplate

versus

https://github.com/h5bp/html5-boilerplate.html

We recommend you become literate in the web languages of HTML and CSS, as this will greatly enhance your chances of being hired in a creative function, in no matter what industry you choose.

Regardless of how much you’d like to learn about web languages, one thing we insist you do is create your own website. If you need a site online and would like a pre-built website, you should install WordPress using the Softaculous software installer inside your cPanel. Open Softaculous, choose the directory you’d like to load your WordPress, add the site name and subtitle, and your credentials, and hit install. WordPress unpacks in your directory with all the file organization in place. As it runs on PHP, you’ll notice the index pages are still there, but they end in the extension .php.

WordPress is a CMS that uses your Apache installer to load the site into your directory all at once. WordPress is the most widely used website creator, praised for its ease of use and customizability. It installs as a PHP script that includes the visual side for visitors and the administration side to add content. WordPress runs on themes that include all the design elements for layout and presentation. You can re-theme your site whenever you like, and we encourage you to try out various themes until you find one that suits your specific style.

WORDPRESS BASICS

WordPress was originally designed as a blogging platform but offers users the capability of creating either a webpage or a blog, or a combination of both. We’ll go over the first few steps to customize your WordPress so you can get a site up and running.

To sign into your WordPress, you just have to add /wp-admin to the end of your URL. Once logged in, you will be at your dashboard, the main site of the CMS. WordPress comes pre-installed with a page, a post, and a comment. (You can delete these.) You should create a home page by clicking Pages > Add New and give it a title such as Home or Welcome. You should create one blog post, with an image, to get the hang of the design capabilities. Before we go any further, you should re-theme your site.

Themes

WordPress comes preloaded with the theme of the year. You should change it to something you like. Go to Appearance > Themes and locate a new one. You can go directly to the source of WordPress themes at wordpress.org/themes. When you install a theme, it comes with all of its design elements and runs your site out of the theme folder nestled deep in your cPanel directory. Nearly every theme comes with documentation (the manual) on how to operate the theme properly.

Permalinks

Because WordPress is PHP-based, the URLs will have a PHP structure. Posts and pages will be presented as part of the database. It will look something like this: http://newanddigital.com/?page_id=13. Those PHP URLs do not allow good search results by Google, so you should change the URLs to words. Go to Settings > Permalinks and change the links to “Post name.” It should then look like this: http://newanddigital.com/book

Landing Page

When people reach your site, an introductory page that lets the visitor know who you are and what your site is about should welcome them. Go to Settings > Reading and change the settings so that Front page displays a static page and set it to your Welcome page. In that same place, you would set your blog to be displayed on a specific page.

Comments

WordPress leaves comments active on every page and post you create. The nature of the web is to inspire conversation, and, as WordPress is open source, commenting is encouraged. If you’d like to turn off the settings, you can turn them off right away by going to Settings > Discussion and unclicking all the default article settings that allow visitors to comment on your new posts and pages. You can also turn them off on a page and post basis by clicking Screen options at the top of the page you are editing, turning on the viewer for comments and discussion, scrolling down, and turning off the comments and pingbacks.

Media Management

Use the media library to load all your images and files. You can access the media library on each page or by using the library. This is where you’ll keep photos, videos, and MP3s.

WORDPRESS ATTRIBUTES

The WordPress CMS is an extremely versatile system, and we recommend you take your time picking a theme and customizing the style. Visit your site on multiple browsers and portable devices, to make sure your site is compatible with various screens.

HTML5

HTML5 is the current iteration of the main web language. HTML5 is the first update of the language since 1997 and adds new tags and compatibility across multiple devices. This version includes new syntax that makes websites more responsive. Using video and audio is far easier with tags such as <video> and <audio>, and it now includes scalable vector graphics. Previous to this version, only text and ASCII graphics were scalable; now, designers can add images and new fonts that scale.

What we find really exciting about HTML5 is that it integrates JavaScript languages seamlessly into the code. You can utilize jQuery, the code that helps animate sliders, buttons, gradients, and scrolls (to name a few), inside HTML5’s code. The hope in the future is that jQuery and HTML5 will be both a “back-end” programming language, like Python, as well as the “frontend” design of the website.

Additional Benefits of HTML5

Writing sites in HTML5 allows for a much higher level of flexibility across platforms. You can write floating objects into your site to create sections that appear to move separately from your site itself when seen on different screens. These pieces of code are called divs, and they can each have their own style. This even relates to how many widgets and plug-ins work along with your WordPress site.

As a code language that incorporates object-based programming, HTML5 can integrate application programming interfaces. It seamlessly allows social media sites to integrate feeds into your site or allows you to control aspects of your browser. For example, the Chrome browser is written in HTML5 and allows for projects called Chrome Experiments, which allow coders to manipulate the way the browser operates.

There have been hundreds of Chrome Experiments, and you can see them at chromeexperiments.com (http://chromeexperiments.com). There are HTML5 experiments that range from games to design to sound to interactive music videos. Our favorite project is The Arcade Fire’s “The Wilderness Downtown” music video. The music video integrates moving video, graphics, Google Maps, interactive writing features, and browser movement hacks (www.thewildernessdowntown.com/).

BECOMING LITERATE

Use these sites to learn more—they will enhance your skill set, make you more creative, and greatly improve your web experience:

•  Code Academy (http://codeacademy.com)

•  Code.org (http://code.org)

•  Udemy (http://udemy.com)

•  W3C Schools (http://w3cschools.com)

•  Code Schools (http://codeschools.com)

See also the Head First (Brain Friendly) HTML guides by O’Reilly Media.

Learning these languages empowers you to read and write and create and manage and lead!

DATA, THE CLOUD, AND DIGITAL FILES

In under a minute, you can take a picture on your camera phone, post it online, and have thousands of people download it. Every time you click the shutter on your camera phone, you are creating a media file nearly instantaneously. We take for granted the amazing number of technical processes that occur in that instant and the moments that follow, from acquisition through upload to download. This section will focus on the technical side of files, sharing, and the web.

CITIZEN JOURNALISM AND THE SHARING PUBLIC

On a chilly New York City Thursday afternoon in January, a ferry full of people traversing the Hudson saw quite possibly the most frightening thing anyone could witness: a plane crashing. Captain Chesley “Sully” Sullenberger, of US Airways Flight 1549, was landing his plane on the Hudson just 6 minutes after takeoff, because the plane had hit a flock of birds. One of the ferry passengers, named Janis Krums, had the foresight to take a picture of the plane now floating in the water, extending its rafts, and uploaded the image to Twitter using a service called Twitpic. While journalists were just learning about the crash, Krums had already shown thousands of people around the world that there were survivors and the plane was intact.

Aside from the ultimately incredible cultural shift that occurred within the field of journalism, what the world was introduced to was the extraordinary capability of technology and sharing media. According to Pew, 54 percent of adult users post a photo or a video that they created to the web.⁶ We have become accustomed to sharing, because it works really well and requires little-to-no effort from the user. But how does it work? How is the process so effective? Why should we think about it?

As savvy users of the web, we should be aware of what makes it work. It’s important, because the technology of shareable media is most likely to be used in every industry, and your grasp of the vernacular and technique will empower you to create quality content in a world of oversaturation. The audience prefers higher-quality content and will more likely share nicer material. The term citizen journalist is used pretty freely today to mean anyone with a smartphone, and a high-quality camera (which comes with a smartphone) can report information and inform an audience. This means the traditional tools of the trade are now accessible by anyone. This is a significant shift, because the tools of a serious trade such as journalism are technology based. We know this because we can say “citizen journalist,” but we cannot say “citizen surgeon.”

How Does it Work?

The lens on your smartphone is an active camera. It means that the image is processed in real time on the phone. Your phone’s screen acts as the viewfinder, showing you the computer processing the light in real time. As you are probably aware, a camera works by converting light, through a lens, into a range of quantitative depth, either by emulsion on film or by quantifying it through electronic data. In terms of digital photography, the image element after the lens exposes the chip to light, allowing each pixel to create a value of both color and light. The instant you press the shutter key, it records the data of each and every pixel and creates a file of all the information. In much the way that HTML cannot be read without a browser, an image needs a container.

An image captured by your phone is an EXIF. In order to be stored efficiently, it has to be compressed, and the most common compression is JPEG. The JPEG is an advanced technique of image compression that is significantly “lossless” and stores much of the original EXIF data in its file. Your smartphone didn’t just capture the value of light on a digital image chip: It captured your camera settings, such as the iris setting, the shutter speed, the time of day, the type of phone you have, and, most interestingly, your GPS location. JPEG keeps this data in an effort to be shared.

The compression that we will talk about is necessary to create shareable media. The web is still limited by broadband speed and data costs. Digital compression is the act of removing redundant data that are not visible to the human eye or audible to the human ear. There is a fair amount of image data that you cannot see, and compression removes and repackages it. Compression where you cannot tell if the image or sound has changed is called lossless compression. If it seems as if there are some quality differences, that is called lossy compression. The file types you use most often attempt to preserve the high quality of the original, while simultaneously reducing the file size.

The file types you most likely see consistently are .jpg, .png, .mpg, .mov, .avi, .gif, and .mp4. These are our commonest shareable file types, and that is because, in each case, they are digital data that have been compressed and placed in their container. It’s important to know this, because each file type has a function and a reason for use.

Pictures

JPEGs, TIFFs, and PNGs are image format containers. Each contains image data in various ways. As opposed to the RAW format, which comprises exactly the chip data, the JPEG, the TIFF, and the PNG are all files that have been affected by algorithmic quantizing. A RAW file can be huge, because it accounts for all the data from the chip, and each and every pixel is accounted for. Whereas a RAW image file may be about 40 megabytes, the same image compressed as a JPEG would be 3 or 4 megabytes. The reason the JPEG is commonest is because it uses an advanced algorithm called a discrete cosine transform that discards “extra” data and duplicates simple data. It’s not a perfect algorithm, and occasionally online images look blocky.⁷

TIFF and PNG are raster graphic image formats (meaning that they are made with pixels) that also compress image data in different ways. TIFF was created by Adobe in the early 1990s, and PNG is an advance of the GIF format. Both of these allow for something called an “alpha” channel. The TIFF and PNG contain an additional 8 bits of information for the sake of a transparency channel. This allows the graphics to be used on top of other images. The extra bits act as a faux layer to support the invisibility.

Sound

The commonest and most recognizable file type for sound is the MP3. What’s amazing about the MP3 is that it doesn’t exist as an audio format! The MP3 is actually part of the MPEG family, and it is one of the most lossy compressions that exist. The MP3 gets its name from being a MPEG-1 (or MPEG-2) Audio Layer 3. (MPEG-3 is an unused HDTV format.) This audio format was the commonest digital audio format of the early web, as the compression allowed users to download complete songs fairly quickly. The audio quality varied according to the bit rate used in the compression. The higher the bit rates per second, the higher the quality (as in 128 kilobits per second, or 192 kbps). Audio compression introduced new ways to compress files using bit rates. You can compress audio using a constant bit rate (CBR) or a variable bit rate (VBR). In CBR compression, you pick the bit rate, and the audio is compressed using that quality, regardless of what occurs in the file. If a piece of audio or music changes wildly in the track, with additional bass or tempo variations, quality will sometimes be lost. The VBR compression allows the compression software to adapt and vary, based on the changes in the file. VBR compression usually results in larger file sizes than CBR compression.

Musicians and sound artists require higher-quality audio, and the audio format that is the highest quality is the MPEG-4. The MP4 file type is for audio and video and, when it is used for audio, the file extension is sometimes seen as .m4a.

Video

Video files are the most complex file formats, requiring heavy processing power to compress the many images without losing too much quality. Video contains images in succession, linked sound, graphics, and metadata combined. Originally, video was compressed using a streaming CBR method as it was digitized from analog sources onto a storage system such as a hard drive. The downside of this was a high loss of video information, as well as something called video artifacting. When video was primarily interlaced for television broadcasts, the interlaced fields would complicate the digitizing process. In our present, the vast majority of video is progressive, or image sequenced. When video is captured, the succession of video and audio is captured onto a storage device such as an SD card. As soon as the record button stops the recording, the video file is created, and the compression process has already occurred. In order for video to fit onto anything, it needs to be compressed. Each camera and company has its own compression algorithm and file type, using various bit rates (for color depth) and resolutions.

A lot of data and math is required to understand how big a file size of video may be. You would have to consider the resolution (per frame), which is acquired by multiplying the height and the width of the pixels, the bit rate of the video, and how long the clip is. This information matters, because sometimes you will be told a camera offers high-quality video, but it contains a low bit rate, thereby reducing its quality. If you had a Vine video, at 600 {mult} 600 resolution, that lasted 6 seconds, you would find 360,000 pixels per frame of video. Multiply that by 30 frames per second, and you have 64.8 million pixels to compress. And if you imagine that as a low-quality Vine, imagine high-definition or 4K video streams and how their file sizes even manage to move around the web.

The iPhone video camera captures at 1080p HD, which is the same as video you watch on your big television screen. How does it fit all that video onto your phone? The bit rate is low, at only 17 mbps, in comparison with the 50 mbps of standard television. This allows for faster capture and smaller sizes. The file container from an iPhone is a .mov, which is QuickTime’s (Apple) native format. If you create video on a PC, often it will be a .avi. Neither .avi nor .mov are universal, and they both require plug-ins and software to operate on various machines. The web is attempting a universal video standard for HTML5, using MPEG-4 compression and leaving the files with an .mp4 extension.

CODECS

A codec is actually a software device that allows for data to be compressed and decompressed for viewing and use. There are hundreds of codecs for hundreds of uses, from web standards to broadcast settings to streaming configurations. When you are chosing a codec, the most important part of the choice would concern utility. If you happen to be editing a film to be seen on a large screen, you would want access to the highest-quality codec available—something like ProRes 422. If you are shooting for a YouTube video, you can use a highly efficient, lossless codec such as H.264 to create high-quality, small-file-size videos.

THE CLOUD

During the earliest days of machine computing, a man named Gordon Moore observed that transistor technology was increasing exponentially in both storage and physical size. He posited that computer speed and storage would double every 2 years. Moore’s Law, as it is known, was not only highly accurate, but continues to work, from our present into our future. Where Moore considered the doubling would be exponential every 2 years, it also compressed time itself exponentially, from 2 years, to 1 year, to months, weeks, days, minutes, and so on. In our data-heavy present, we are creating more than 2.5 exabytes (2.5 billion gigabytes) of data on a daily basis.¹⁰ We call this “big data.”

Data are made up of every bit of digital information that you have access to, utilize, create, and share. Our personal hard drives are limited in capacity, and so we are now utilizing the cloud far more often. The cloud is slang for cloud computing, a method of using computers tied together via the Internet, rather than through a local area network. As cloud computing has become streamlined, with high broadband speeds and very low risk of crash and server downtime, we have started to store our data in servers far from our personal computer.

This has allowed superior sharing efficiency and remote-access ability. Many businesses, such as IBM and Google, are reliant on the cloud to maintain daily operations. Access to data in the cloud is an incredible boon to network operations, and, without it, social media would not function well.

Big Data

In Everything is Miscellaneous,¹¹ David Weinberger explains about the overwhelming amount of data that is available online: “In a store, it’s easy to tell the labels from the goods they label, and in a library the books and their metadata are kept in separate rooms. But it’s not so clear online.” The analogy proposed is that, on the web, everything is searchable by all of its data. For his example, he uses Shakespeare. If you only remember a line from a Shakespeare play, you can type it into Google, and Google will return, not just the surrounding text, but the play in its entirety, all its editions, all the performances, the playbills, the characters, and the actors. Each and every word ever digitized constitutes the data of any given object.

The web is a huge archive of all material, converted to digital media, and it is up to the users to parse the information. It’s important for you, as a web user, to consider why data is made available and what you do to use it. For example, you can read data that is available to you on nearly everything. If you wanted to know how often a word is used in texts, you can use Google’s Ngram viewer¹² (n equals sample; gram means word). Google has archived enough available text to show you how prevalently terms, phrases, and words have been used since the year 1800. If you were to search the 2-gram phrase “new media” in the viewer, you would see a steady incline of the term since 1920, with a dip in the 1970s. This trend analysis can assist with research and applications to enhance your collective knowledge on a given subject. You can also use wildcards to show what words are used most often. For example, a search for “digital *” results in the most-used combinations where the word “digital” precedes another word. The top usage has been “digital computers,” but, in the recent past, that has been surpassed by “digital data” and “digital signal.”

Data is also available to you in ways that you may not realize. When we share web media on social media platforms, we usually copy and paste a link into the share area. Sometimes, the link is very large, spanning hundreds of characters. Each link refers to a file on a hard drive somewhere, and that means it is sometimes buried deep in a database or directory structure. To make links more efficient, URL shorteners can be used, such as TinyURL, Bit.ly, and Owl.ly. These are sites that have purchased the shortest domain name and extension available, and they place your link in their own folder to redirect to your original link. If you had a long link from the Ngram results and you wanted it shortened, you could paste the link in Bit.ly, and it would create a customizable link, such as bit.ly/ngramdigital. The bit link created a 19-character link out of a 471-character link. However, that is only half the story. On any shortened URL, you can gain access to the link’s statistics. Big data isn’t just about storing data: It’s about analyzing it. By adding a plus symbol (+) to the end of any shortened URL, you can see how many people have clicked on that link.

Figure 3.11

Ngram viewer 1: “new media.”

Source: https://books.google.com/ngrams

Figure 3.12

Ngram viewer 2: “digital *.”

Source: https://books.google.com/ngrams

Reading big data is big business. Since the beginning of online digital media, people have profited from data analysis. You do not have to be a statistics professional to read big data either: You just have to have a creative mind. Every time you visit a site and it downloads a cookie or a pixel onto your computer or you click a shortened URL, you are being tracked. As a result, users such as yourself can get a better feel for how well you are participating in the online environment. It’s like a huge, mechanical, peer-review system. Most users never take advantage of being able to read their analytics, because numbers sometimes seem overwhelming, but you should take advantage of the technology available to you.

How Long Do Data Exist?

Our digital present and the ever-expanding world of storage show us that anything that is made digital can last forever. Even apps such as Snapchat, which delete media soon after they are shared, are vulnerable to someone taking a screenshot of the image and keeping it. Once it is on the web, it is stored somewhere in the cloud. But the thing about data is that the volume keeps growing. This means that, the more data added, the bigger the cloud; the bigger the cloud, the less significant any single file is. You will learn later in the book how to keep data showing up in search engines, because, although something may be around forever, it doesn’t mean it is easily accessible forever.

It is possible to lose your own personal data very easily, and this is why many users have turned to the cloud for storage. If you delete something on your computer, it disappears for good—or so we think. In truth, when you delete something, it actually is not deleted right away. Your computer doesn’t delete files; it re-allocates the space for rewriting over the media. In theory, if you accidently delete something, you can retrieve it. It’s usually a costly experience, but it’s possible to bring it back.

Where Can I Store My Files?

The cloud has an abundance of “free storage” where you can store your digital files. Sites such as Picasa and Flickr host photos and videos, and Dropbox, Bitcasa, and Google Drive can host files. Each offer different services and rights concerning how your content is stored and for how long, and how the files are maintained. Dropbox and Flickr offer their users an allotted number of gigabytes to store their material for free, and they also offer a premium service that allows users to pay for more storage. Why do they have two options? Doesn’t storage always cost money? The answer is yes—storage always costs money. The reason Dropbox and Flickr offer free storage is because the average user will never come close to their upload limit, and the companies can still count the uploader as a user. If you are given 10 gigabytes for free from Dropbox, you may only upload 1 gigabyte over a few months, but Dropbox can still count you as one of their dedicated users. As we remind you, nothing is free.

Can I Track Data?

There are many free or low-cost data-tracking options online. One even comes with your cPanel when you host a site called Webalyzer. The most popular analyzer is Google Analytics. Google Analytics offers free tracking of your website, with accurate reporting of site visits using Google’s software and technology. You have to register your site with Google, and it will generate a short bit of JavaScript for you to paste into the bottom of your code on your site. (It’s on the bottom because, as you will remember, the site loads from top to bottom and will register a visit only after the page has fully loaded.) You can use the Google Analytics dashboard to track your visits and set goals. You can track nearly everything you upload online, and we recommend you do so.

THE INTERNET OF THINGS

We end this chapter with physical objects. To be a savvy user of new and digital media, you should be aware that the Internet is expanding outward and into machines connected to the cloud. Every time you use a device that requires an app on your phone or computer to operate it, you are using the web and the Internet on a physical object. The Nike Fuelband, the Nest Thermostat, and your Xbox One are all objects that require an app or the Internet in order to operate. As we use the web and the cloud, we have found convenience in our devices that can be tracked on a dashboard interface. The Fuelband doesn’t have an advanced screen or interface, and Nike’s app that accompanies it is actually the screen for the device. The Nest is really one of the best examples, because it is a thermostat you can control from work or on the go. Nest was purchased by Google, so that it could blend it into its architecture and utilize the technologies.

The web is still a browser-based experience, but many technologies are now using the browser as their screen. Rather than incorporate dated LED technology, why not connect the device via Wi-Fi or Bluetooth and use a display that is already available. The web offers endless options to customize, view, and optimize the experience of the physical object. The fact that this physical object requires the Web in order to operate means that, the savvier you become at using the web, the more likely you are to interact with future technology.

NOTES

1  EMC Digital Universe (2014). “Executive Summary: Data growth, business opportunities, and the IT imperatives.” Retrieved from www.emc.com/leadership/digital-universe/2014iview/executive-summary.htm (accessed May 4, 2015).

2  Rogers, S. (2012). “Data Are or Data Is?” Retrieved from www.theguardian.com/news/datablog/2010/jul/16/data-plural-singular (accessed May 4, 2015).

3  Presnsky, M. (2001). “Digital Natives, Digital Immigrants.” Retrieved from www.marcprensky.com/writing/Prensky%20-%20Digital%20Natives,%20Digital%20Immigrants%20-%20Part1.pdf (accessed May 4, 2015).

4  Apache.org main page (www.apache.org/).

5  GNU Operating System (www.gnu.org/copyleft/gpl.html).

6  Duggan, M. (2013). “Photo and Video Sharing Grow Online.” Retrieved from www.pewinternet.org/2013/10/28/photo-and-video-sharing-grow-online/ (accessed May 4, 2015).

7  Caplan, P. (2013). “What Is a JPEG? The invisible object you see everyday.” Retrieved from www.theatlantic.com/technology/archive/2013/09/what-is-a-jpeg-the-invisible-object-you-see-every-day/279954/ (accessed May 4, 2015).

8  The Museum of the Moving Image (2014). “The Reaction GIF: Moving image as gesture.” March 12—May 15. Retrieved from www.movingimage.us/exhibitions/2014/03/12/detail/the-reaction-gif-moving-image-as-gesture/ (accessed May 4, 2015).

9  Warzel, C. (2014). “This Is What Facebook Sees When it Scans Your Face.” Retrieved from www.buzzfeed.com/charliewarzel/this-is-what-facebook-sees-when-it-scans-your-face (accessed May 4, 2015).

10  Wall, M. (2014). “Big Data: Are you ready for blast-off?” Retrieved from www.bbc.com/news/business-26383058 (accessed May 4, 2015).

11  Weinberger, D. (2008). Everything Is Miscellaneous: The power of the new digital disorder. New York: Holt Paperbacks.

12  Michel, J.-B., Shen, Y.K., Aiden, A.P., Veres, A., Gray, M.K., The Google Books Team, Pickett, J.P., Hoiberg, D., Clancy, D., Norvig, P., Orwant, J, Pinker, S., Nowak, M.A., and Aiden, E.L. (2010). “Quantitative Analysis of Culture Using Millions of Digitized Books.” Science. Vol. 331 No. 6014, pp. 179–182. Retrieved from www.sciencemag.org/content/early/2010/12/15/science.1199644 (accessed May 4, 2015).

13  Paul, G. (2013). 1 minute of video is worth 1.8 million words: Misinformation or hyperbole? Retrieved from http://gary-paul.com/ (accessed May 11, 2015).