Everything You Always Wanted to Know About the Web . . . But Were Afraid to Ask.

Daigo Fujiwara

Information Graphic Artist,
The Boston Globe/Boston.com
daigo@daigofujiwara.com

Summary of this workshop

What is the difference between Web browsers, Web servers, and websites? What is HTML, CSS, JavaScript, Flash, FTP, XML, RSS, blogs, CMS, and SEO?

Daigo Fujiwara, Infographics Artist at The Boston Globe/Boston.com, will explain the basics of how the Internet works and common terms and jargon that is used when discussing the Internet. Attendees will create a simple HTML Web page using a simple text-editing software (such as TextEdit on Mac or NotePad on PC).

The class will include a Q&A session--please bring those questions you've been afraid to ask.

The web in a nutshell... (1/3)

Clients and Servers

The most common tool the people use on the web is a web browser (such as Internet Explorer, FireFox, Safari, or Chrome. see whatbrowser.org). Web browsers work by connecting over the Internet to a remote machine (web server, identified by Uniform Resource Locators - URL), requesting specific documents, downloads them and format them for you, so that you can see.

The web in a nutshell... (2/3)

The web in a nutshell... (3/3)

While web documents can conceivably be in any format, HTML (.html) is the most widely used document format on the web.

Other familiar file formats include .jpg, or .gif for images, .mp3 for music, or .pdf for downloadable documents.

What is HTML?

Hyper Text Markup Language, HTML, is the language that encodes "World Wide Web" documents. The basic syntax and semantics of HTML are defined by the HTML standard, which is maintained by a group called World Wide Web Consortium (W3C)

Every HTML element consists of a "tag" name, sometimes followed by an optional list of attributes, all placed between opening and closing brackets (< and >)

HTML is a text file, which you can view by selecting View Source in the browser.

What is HTML? (continued)

Example

So, for this example div is the "tag" name and class is attributes

Tip: While html is a static document, server side programing (such as php, asp etc. ) can write the html code on the fly. But the end results is the same, it is still an html document.

What is CSS?

Cascading Style Sheets set the rules for the HTML's display -- such as backgrounds, fonts, colors, etc

CSS can be embedded into html, or exist on a separate text file.

And it looks like this:

.headlineblue {
   color: blue;
   font-style: italic;
   font-size: 30px;
}

What is JavaScript?

Javascript is a programing language embedded directly into HTML documents, that is understood by the web browser. It allows executable content on the web pages (interactivity.)

Code looks like this: <input type="button" value="Click me!" onClick="alert('Here! See that? That's interactive.');">

Tip: Syntax: special characters such as ; ( ) { } . " : always means something. For example, ; always indicate that it is the end of statement. Be careful with single and double quotes.

What is Flash?

Adobe Flash is a multimedia creation (authoring) tool currently developed and distributed by Adobe Systems.

A "Flash movie" can display content (text) and shapes, simple animation, video, and sound. It is a tool that is also used to create Rich Internet Application (RIA).

You need to have Flash Player, a plug in for your browser, installed on your computer to view contents of flash.

Flash has its own programing language called ActionScript, which is similar to JavaScript.

What is FTP?

The language, (or protocol) used for web transaction is Hypertext Transfer Protocol, what you see in http://www.boston.com. The web servers are running as HTTP servers. Web browsers are, technically, HTTP clients.

In a same way, a server can be running File Transfer Protocol, FTP, and using a FTP client, you can access the server.

Typically, you use FTP to "put" files on the web server, so that the world can view what you wrote.

What is XML?

Extensible Markup Language, XML, is a meta-language that allows you to create and format your own document markups. XML is similar to HTML in that tag and attributes are contained between opening and closing brackets (< and >), but less forgiven (tags must be closed, attribute values must be in quotation marks, etc.)

But unlike HTML, there are no "correct" tags for an XML document, except those you define yourself.

What is XML?

Since you can define your own XML tags, it is very powerful for storing many data and still somewhat readable by human. Like:

<housemember> 
   <id>F000339</id> 
   <first_name>Barney</first_name> 
   <middle_name></middle_name> 
   <last_name>Frank</last_name> 
   <party>Dem</party> 
   <state>MA</state> 
   <seniority>30</seniority>
   <next_election>2010</next_election>
   <district>4</district>
   <missed_votes_pct>4.83</missed_votes_pct> 
   <votes_with_party_pct>96.96</votes_with_party_pct> 
</housemember>

But problem with XML is there is no use unless you program a interpreter yourself.

What is RSS?

A good example of useful XML is RSS.

RSS (Rich Site Summary, or Real Simple Syndication) is a widely used format for delivering regularly changing web content. Many news-related sites, blogs and other online publishers syndicate their content as an RSS Feed to whoever wants it.

Using RSS Feed Readers and News Aggregators, You can read, redistribute, organize, and sort/search many news source at once.

What are blogs?

Originally, a blog (came from the term "web log") is a type of website, usually maintained by an individual with regular entries or web journals. But the term has evolved into "how" to update the website, rather than "what".

Blog engines, or blog software, (such as WordPress, Movable Type, TypePad, or Blogger, to name a few) give writers easier and quicker way to update the websites over the web browser, therefore eliminating need to use FTP or web editing tools. Those software also helps each "blog posts" sorted by date, category or type, and automatically produce RSS for you.

What is CMS?

Content Management System is a software system which provides website authoring and administration tools designed to allow users to create and manage the site's content with relative ease.

Blog engines/softwares are a form of CMS.

Like blog engines, you can use CMS over the web browser, and at the end, it produces html files for a website.

What is SEO?

Search Engine Optimization is the process of improving ranking in search engine search results (like Google, Bing, Yahoo). Some tips:

Deconstructing a web page

As I said every webpage is just a text file. By reading the html source of the page, you can deconstruct any web sites. To view html source of web page:

Q & A

Exercise: creating html file

Resources

This slide can be found at: http://daigofujiwara.com/files/aaja10/