THE INTERNET & WORLD WIDE WEB — A BRIEF HISTORY

12  Download (0)

Full text

(1)

THE INTERNET &

WORLD WIDE WEB — A BRIEF HISTORY

Sputnik launched by the Soviet Union

Shocked the world! Especially the USA, who was thinking about satellites, just not quite there.

ARPA (the Advanced Research Projects Agency)

• The US Department of Defense created ARPA (now DARPA) to research/develop technology beyond current identified needs.

• Their most famous project was THE INTERNET.

The Internet

• ARPA sponsored/researched “internetting” to link research institutions’ computers.

• Four original host: UCLA, Stanford, UC Berkley, U of Utah

• Packets — data requests being split up in to small chunks which can be processed quickly without blocking communication from other parties.

• Everything is text-based at this point.

TCP/IP (Transmission Control Program/Internet Protocol)

• A new standard masking the differences between existing network protocols (which had become a problem).

• The traffic cop/rules of the digital road for transmitting packets of data.

• Easily joined all networks together.

1957

1960’s

1974

(2)

The World Wide Web Developed

• Tim Burners Lee created an information management system where text could contain links and references to other works.

• Created a server for the hypertext docs. and a program for reading them calling it the World Wide Web.

• Released the source code to the public so anyone could build upon it.

The First Browser, Mosaic, is Released

• A browser reads HTML code and displays it in human-readable way

• Now the web is more publicly-accessible.

World Wide Web Consortium (W3C)

• Tim Burners Lee founded the W3C

• W3C Vision: to standardize the protocols and technologies used to build the web for maximum global accessibility.

• They produce a set of recommendations, not rules, but guidelines that we call Web Base Standards

• The Web Standards Project was created to promote W3C Recommendations

Blogging and Social Networks Become Popular

The iPhone

• Steve Jobs develops the iPhone, unleashing a mobile revolution

1990

1993

1994

2002

2007

(3)

THE INTERNET V. THE WEB

The Internet

The World-Wide Web

Email

IM

P2P Chat

FTP

VOIP

(4)

2 TYPES OF DESIGN/DEVELOPMENT

Client Side

Runs in the browser

Examples: HTML CSS Javascript

Server Side

Runs on the server only

Examples: PHP ASP JAVA

PHP

P

HP

Front-End Design/

Development Back-End Development

(5)

THE BROWSER

• Software developed to present data/content sent from a server in visual manner through a Graphical User Interface

(GUI)

• Browsers follow W3C standards but vary to some degree in default presentations and vary more so in support for advanced features of CSS.

• Opera, Chrome, Safari and Firefox perform the best. Internet

Explorer historically lags behind.

(6)

THE LANGUAGE OF WEB:

HTML

HTML (Hyper Text Markup Language)

• HTML was developed to allow common formatting of text documents for exchange of scientific/research information.

• HTML is simply a way of marking up the content of a page to show what the content is—a header, a paragraph, a list, a link, etc. HTML is used to markup the structure of the document.

CSS • Cascading Style Sheets (CSS) is a separate markup language.

• CSS shows how the HTML content should be displayed — whether the header should be displayed green and large or red and small, whether the links are displayed pink or highlighted or underlined, whether the paragraphs are displayed in the top left or the bottom right, etc.

The separation of content and appearance into HTML and CSS is referred to as Standards-Based Design.

The World Wide Web Consortium (W3C) is the governing body that controls and sets the standards/rules of HTML and CSS.

HTML + CSS = STANDARDS-BASED DESIGN

structure/

content appearance/

presentation

The “What”

The “How”

(7)

WHY WEB STANDARDS?

The World Wide Web Consortium (W3C) produce a set of recommendations, not rules, but guidelines called Web Base Standards.

1. EFFICIENCY OF CODE

• You can separate your HTML content from your stylistic CSS and behavioral Javascript • Allows file sizes to be small

• Code can be written once and reused wherever needed

2. EASE OF MAINTENANCE

• Make change once and it will propagate through entire website.

• Saves us from changing each individual instance.

3. ACCESSIBILITY

• Allows website to be accessible to anyone, includes people with disabilities (visual or motor impairments)

4. DEVICE COMPATIBILITY

• Insures your site will work across browsers and devices

5. WEB CRAWLERS/SEARCH ENGINES

• SEO (search engine optimization)

• Makes your site much more visible to web-crawlers

Why does it matter

how I write my code?

(8)

getting to know html

you are here � 25

This is the closing tag that ends the heading;

in this case the </h1>

tag is ending an <h1>

heading. You know i t’s a closing tag because

it comes after the content, and it’s got

a “/” before the “h1”.

All closing tags hav e a

“/” in them.

The whole shebang is called an element. In this case we can call it the <h1> element. An element consists of the enclosing tags and the content in between.

Here’s the opening tag that begins the heading.

Tags dissected...

Okay, you’ve seen a bit of markup, so let’s zoom in and take a look at how tags really work...

<h1> Starbuzz Coffee Beverages </h1>

You usually put tags around some piece of content . Here we’re using tags to tell the browser that our content, “Starbuzz Coffee Beverages”, is a top level heading (that is, heading level one).

Tags consist of the tag name surrounded by angle brackets;

that is, the < and > charac ters.

To tell the browser about the structure of your page, use pairs of tags around your content.

Remember,

Element = Opening Tag + Content + Closing Tag

We call an opening tag and its closing tag

matching tags .

Element = Opening Tag + Content + Closing Tag

HTML

(9)

TWO MAIN TAGS:

• An HTML document is divided into two main tags—the head and the body.

• The head is invisible in the browser.

• The body contains all the content.

getting to know html

you are here � 23

Are we there yet?

You have an HTML file with markup – does that make a Web page? Almost.

You’ve already seen the <html>, <head>, <title>, and <body> tags, and we just need to add those to make this a first class HTML page...

Next add <head> and </head> tags. T he head contains information about your W eb

page, like its title. For now, think about i t this way: the head allows you t o tell the

browser things about the W eb page.

The body contains all the content and structure of your Web page – the parts of the Web page that you see in your browser.

<html>

<head>

<title>Starbuzz Coffee</title>

</head>

<body>

<h1>Starbuzz Coffee Beverages</h1>

<h2>House Blend, $1.49</h2>

<p>A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala.</p>

<h2>Mocha Cafe Latte, $2.35</h2>

<p>Espresso, steamed milk and chocolate syrup.</p>

<h2>Cappuccino, $1.89</h2>

<p>A mixture of espresso, steamed milk and foam.</p>

<h2>Chai Tea, $1.85</h2>

<p>A spicy drink made with black tea, spices, milk and honey.</p>

</body>

</html>

The head consists of the <head>

& </head> tags and everything in between.

The body consists of the <body>

& </body> tags and everything in between.

Keep your head and body separate when writing HTML.

First, surround your HTML with <html> &

</html> tags. This tells the browser the content

of the file is HTML.

Go ahead and put a title inside the head. The title usually appears at the top

of the browser window.

(10)

CSS

• CSS rules select HTML code or attributes to affect and are written using a different syntax.

• One CSS file will affect the whole site (several HTML pages).

• Each rule is made up of the selector and the declaration.

• The declaration contains a series of properties and values separated by a colon.

CSS Rule

(the whole thing)

(11)

How much code does a designer need to know?

It Depends...

Graphic Designer at a big wealthy ad agency

In-House Graphic Designer OR

Designer at a small agency or Non-Profit

OR

Freelance Web Designer

...

Might not code at all, but still needs to know how code affects design and what the developers will need

Codes the most. (Especially in a bad economy.) A freelancer usually needs to have the most coding skills of all.

(12)

Figure

Updating...

References

Related subjects :