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)

•TheUSDepartmentofDefensecreatedARPA(nowDARPA)toresearch/develop

technology beyond current identified needs.

•TheirmostfamousprojectwasTHEINTERNET.

TheInternet

•ARPAsponsored/researched“internetting”tolinkresearchinstitutions’computers.

•Fouroriginalhost:UCLA,Stanford,UCBerkley,UofUtah

•Packets—datarequestsbeingsplitupintosmallchunkswhichcanbe

processedquicklywithoutblockingcommunicationfromotherparties.

•Everythingistext-basedatthispoint.

TCP/IP(TransmissionControlProgram/InternetProtocol)

•Anewstandardmaskingthedifferencesbetweenexistingnetworkprotocols

(whichhadbecomeaproblem).

•Thetrafficcop/rulesofthedigitalroadfortransmittingpacketsofdata.

•Easilyjoinedallnetworkstogether.

1957

1960’s

1974

—1971:emaildeveloped

—late70s:emoticons

 developed:)

(2)

TheWorldWideWebDeveloped

•TimBurnersLeecreatedaninformationmanagementsystem

wheretextcouldcontainlinksandreferencestootherworks.

•Createdaserverforthehypertextdocs.andaprogramfor

readingthemcallingittheWorldWideWeb.

•Releasedthesourcecodetothepublicsoanyonecouldbuild

upon it.

•Mosaicreleased,beginningtheBrowserWars.

•Focusedonimplementingnewfeaturesratherthanonfixing

problemswithfeaturestheyalreadysupported.

•Lotsofincompatibility=developersnightmare.

WorldWideWebConsortium(W3C)

•TimBurnersLeefoundedtheW3C

•W3CVision:tostandardizetheprotocolsandtechnologies

usedtobuildthewebformaximumglobalaccessibility.

•Theyproduceasetofrecommendations,notrules,but

guidelines that we call Web Base Standards

•TheWebStandardsProjectwascreatedtopromoteW3C

Recommendations

1990

1993

1994

—1984:DomainNameSystem

introduced.Firstregistered

domain:symbolics.com

—1994:Firstbanneradsappear

(Zima);Firstinternetradio

stations;PizzaHutinternet

ordering;AOL,Prodigy,

Compuserveprovideinternet

access.

—1997+:Streamingmedia,

Java,rapiddevelopmentof

interactive technologies

—1990:300,000hosts

—1989:Firstcommercialemail

service

(3)

CurrentandFuture

•Expanded3Dcapabilities

•ForceFeedback

•Smell

•Improveaccessibilityfordisabled.

•StreamingcontentforinternetTV,etc

•RSS(livesharingofcontentfromothersites)

•Podcasts

•VOIP/InternetPhone

•MicroBlogs

•Mobileapps

•HTML5/CSS3

2000

THE FUTURE

1994

—2002+:Blogging,Social

Networks,BroadbandDSL/

Cablebecomesmorepopular/

available.

—2005:353,284,187host.80

millionsites

ADDITIONAL RESOURCE LINKS:

OperaWebCurriculum:HistoryoftheInternetandtheWeb

(4)

internet vs www

internet

TheInternetisamassivenetworkofnetworks,anetworking

infrastructure.Itconnectsmillionsofcomputerstogether

globally,forminganetworkinwhichanycomputercan

communicatewithanyothercomputeraslongastheyare

bothconnectedtotheInternet.Informationthattravelsover

theInternetdoessoviaavarietyoflanguagesknownas

protocols.

•Asystemofcomputers,servers,routersandcablesthat

connectthem.

 •Informationistransferredinpacketsofinformationthatis

passedtotheappropriateTCP/IPaddress.

 •TheInternetisglobal,publiclyaccessibleandphysical.Non- global,privatenetworksareIntranetsorExtranets.

www

 TheWorldWideWeb,orsimplyWeb,isawayofaccessing

informationoverthemediumoftheInternet.Itisan

information-sharingmodelthatisbuiltontopoftheInternet.

Webservices,whichuseHTTPtoallowapplicationsto

communicateinordertoexchangebusinesslogic,usethe

Webtoshareinformation.TheWebalsoutilizesbrowsers,

suchasInternetExplorerorFirefox,toaccessWebdocuments

calledWebpagesthatarelinkedtoeachotherviahyperlinks.

 •Avirtualspaceforstoring,representinginformationacross

theinternetusinghypertextaddresses/URL(universal

resource locator).

 •URLsarehypertextlinks—HTTP(hypertexttransfer

protocol)—thatcanbesearchedandorganizedbya

browser.

 •DataisgenerallydisplayedusingHTML(HyperTextMarkup

Language)andviewedinabrowser.

(5)

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

(6)

the browser

•Softwaredevelopedtopresentdata/contentsentfroma

serverinvisualmannerthroughaGraphical User Interface

(GUI)

 •BrowsersfollowW3Cstandardsbutvarytosomedegree

indefaultpresentationsandvarymoresoinsupportfor

advancedfeaturesofCSS.

 •TheWeb Standards Project (WaSP) created a test, called theAcidTest,tohelpbrowsermanufacturersgaugethe

complianceofthesoftwaretothelateststandards.

 •Opera,Chrome,SafariandFirefoxperformthebest.Internet

Explorerhistoricallylagsbehind.

(7)

the language of web:

html

html (hyper text markup language)

•HTMLwasdevelopedtoallowcommonformattingoftext

documentsforexchangeofscientific/researchinformation.

 •HTMLissimplyawayofmarkingupthecontentofapageto

show what the content is—a header, a paragraph, a list, a link,

etc.HTMLisusedtomarkupthe structure ofthedocument.

Css

 •Cascading Style Sheets (CSS)isaseparatemarkup

language.

 •CSSshows how theHTMLcontentshouldbe displayed — whether the header should be displayed green and large

orredandsmall,whetherthelinksaredisplayedpinkor

highlighted or underlined, whether the paragraphs are

displayedinthetopleftorthebottomright,etc.

TheseparationofcontentandappearanceintoHTMLandCSSis

referredtoasStandards-Based Design.

TheWorldWideWebConsortium(W3C)isthegoverningbody

thatcontrolsandsetsthestandards/rulesofHTMLandCSS.

html + Css = standards-based design

structure/

content appearance/

presentation

The “What”

The “How”

(8)

why web standards?

TheWorldWideWebConsortium(W3C)produceasetofrecommendations,not

rules, but guidelines called Web Base Standards.

1. effiCienCy of Code

•YoucanseparateyourHTMLcontentfromyourstylisticCSSandbehavioralJavascript

 •Allowsfilesizestobesmall

 •Codecanbewrittenonceandreusedwhereverneeded

2. ease of maintenanCe

 •Makechangeonceanditwillpropagatethroughentirewebsite.

 •Savesusfromchangingeachindividualinstance.

3. aCCessibility

 •Allowswebsitetobeaccessibletoanyone,includespeoplewithdisabilities(visualor

motorimpairments)

4. deviCe Compatibility

 •Insuresyoursitewillworkacrossbrowsersanddevices

5. web Crawlers/searCh engines

 •SEO(searchengineoptimization)

 •Makesyoursitemuchmorevisibletoweb-crawlers

Why does it matter

how I write my code?

(9)

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

(10)

two main tags:

•AnHTMLdocumentisdividedintotwomaintags—theheadandthebody.

•Theheadisinvisibleinthebrowser.

•Thebodycontainsallthecontent.

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.

(11)

Css

 •CSSrulesselectHTMLcodeorattributestoaffectand

arewrittenusingadifferentsyntax.

•OneCSSfilewillaffectthewholesite(severalHTMLpages).

 •Eachruleismadeupoftheselectorandthedeclaration.

 •Thedeclarationcontainsaseriesofpropertiesandvalues

separated by a colon.

Css rule

(the whole thing)

(12)

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.

Figure

Updating...

References

Related subjects :