Welcome to the Web Welcome to the Web Technologies DiplomaTechnologies Diploma

Julian HoldenJulian Holden

This MorningThis Morning

Welcome to Richmond Business SchoolWelcome to Richmond Business School IntroductionsIntroductions The Internet and the World Wide WebThe Internet and the World Wide Web An Introduction to the Web Technologies An Introduction to the Web Technologies

DiplomaDiploma

Richmond Business SchoolRichmond Business School

Fire EscapesFire Escapes ToiletsToilets CoffeeCoffee

……and other vital informationand other vital information

IntroductionsIntroductions

I’m Julian – Tell me about yourselfI’m Julian – Tell me about yourself Your name?Your name? Are you usually a PC or a Mac userAre you usually a PC or a Mac user If you have any previous experience in web If you have any previous experience in web

design?design? What do you hope to get from this course?What do you hope to get from this course? Anything you need to make things easier for Anything you need to make things easier for

you?you?

PracticalitiesPracticalities Do your best to attend all the sessions and try to Do your best to attend all the sessions and try to

let your tutor know if you won’t be cominglet your tutor know if you won’t be coming You can take your student registration to the You can take your student registration to the

LRC and register as a library borrower.LRC and register as a library borrower. There are computers you can use in the LRCThere are computers you can use in the LRC To save paper we do not automatically print To save paper we do not automatically print

handouts for each student. All of my handouts handouts for each student. All of my handouts (and other useful stuff) will be on the web at (and other useful stuff) will be on the web at www.colza.co.uk/webtech. If you want a printed www.colza.co.uk/webtech. If you want a printed copy you can print these to the class printer.copy you can print these to the class printer.

If you have any problems or questions between If you have any problems or questions between sessions you can email me at: sessions you can email me at: julian.holden@racc.ac.ukjulian.holden@racc.ac.uk

An Introduction to the An Introduction to the World Wide WebWorld Wide Web

The World Wide WebThe World Wide Web - Group Exercise - Group Exercise

What is it?What is it? What does it do?What does it do? How do we use it?How do we use it? What do we use it for?What do we use it for? How does it work?How does it work?

The Internet and the World Wide WebThe Internet and the World Wide Web

This section will…This section will…

Explain what Explain what The InternetThe Internet is and explore is and explore how it came abouthow it came about

Discuss the part that is best-known – The Discuss the part that is best-known – The World Wide WebWorld Wide Web

We know what we do…We know what we do…

…but how do these work?

Let’s Go Back in TimeLet’s Go Back in Time

Before the 1980’s very few computers Before the 1980’s very few computers were only used by one person.were only used by one person.

Computers were large, expensive and Computers were large, expensive and locked away in secure locked away in secure computer centrescomputer centres

Users had Users had TerminalsTerminals, a simple screen and , a simple screen and keyboard, to instruct the computer keyboard, to instruct the computer

All the running of programs and storage of All the running of programs and storage of data was managed by the computer and data was managed by the computer and controlled by IT staffcontrolled by IT staff

In 1982 something happened…In 1982 something happened…

IBM (then the world’s largest computer IBM (then the world’s largest computer company) brought out a computer for company) brought out a computer for individuals. The IBM Personal Computer.individuals. The IBM Personal Computer.

Users nowUsers now Could run their own programsCould run their own programs Became responsible for their own informationBecame responsible for their own information

Was this a good or a bad thing?Was this a good or a bad thing?

It was both good and badIt was both good and bad

Individuals could control when programs Individuals could control when programs were run and a new wave of programs like were run and a new wave of programs like word processors and spreadsheets made word processors and spreadsheets made people more productive than ever beforepeople more productive than ever before

But…But… They needed to make sure their own They needed to make sure their own

information was safe from lossinformation was safe from loss ‘‘Data Islands’ were createdData Islands’ were created And how should they print?And how should they print?

A Local Area Network (LAN)A Local Area Network (LAN)(lots of bits of cable)(lots of bits of cable)

Users continued to have independent computers but…

•Shared files could be stored on the server (no more data islands)

•Shared programs could be stored on the server (easier to support)

•Expensive hardware could be shared (we don’t have to give everyone a printer)

Larger NetworksLarger Networks

Imagine if RACC, RuTC and West Imagine if RACC, RuTC and West Thames colleges formed an alliance.Thames colleges formed an alliance.

We might want to join our networks so we We might want to join our networks so we could share information.could share information.

We are going to need some more cable – We are going to need some more cable – are we going to dig up the streets?are we going to dig up the streets?

An internetworkAn internetwork(aka a WAN)(aka a WAN)

RACCRuTC

West Thames College

We call linked networks internetworks or internetsWhy don’t we link RACC & RutC directly?

Communications links leased from BT, Virgin Cable etc

Meanwhile in another continent…Meanwhile in another continent…

In the 1970’s and 1980’s the US In the 1970’s and 1980’s the US government were linking large computers government were linking large computers at defence research establishments, at defence research establishments, defence systems manufacturers and defence systems manufacturers and universities so they could work on joint universities so they could work on joint defence projectsdefence projects

They called this ARPAnetThey called this ARPAnet It was supposed to survive a nuclear warIt was supposed to survive a nuclear war How might it do this?How might it do this?

ARPAnetARPAnet

More and more companies and academic More and more companies and academic institutions joined ARPAnetinstitutions joined ARPAnet

ARPA moved onto a better (more secret) ARPA moved onto a better (more secret) network and ARPAnet became public network and ARPAnet became public propertyproperty

Non-defence companies were allowed to Non-defence companies were allowed to connect to it and commercial use connect to it and commercial use (previously banned) was permitted.(previously banned) was permitted.

Elsewhere in the WorldElsewhere in the World

Universities in the UK had joined together Universities in the UK had joined together using a similar network (JANet)using a similar network (JANet)

JANet joined to ARPAnet so US and UK JANet joined to ARPAnet so US and UK universities could share information.universities could share information.

Other countries did similar thingsOther countries did similar things Most are now all joined together into one Most are now all joined together into one

huge internetwork – huge internetwork – TThe he IInternetnternet Is this the web?Is this the web?

The World Wide WebThe World Wide Web

On the RACC network we have no problem On the RACC network we have no problem sharing Word and Excel files as everyone has sharing Word and Excel files as everyone has access to those programs – also via the access to those programs – also via the network.network.

If we partnered with another college that used If we partnered with another college that used different programs we might not be able to easily different programs we might not be able to easily share data.share data.

One solution to this is to create a type of One solution to this is to create a type of standardised document that can be used by standardised document that can be used by everyoneeveryone

The World Wide WebThe World Wide Web

Invented in 1990 at CERN to solve the Invented in 1990 at CERN to solve the problems of data exchange between problems of data exchange between thousands of scientists using different thousands of scientists using different programsprograms

Documents are stored on Documents are stored on web serversweb servers and and retrieved with retrieved with web browsersweb browsers

Commonly just called ‘The web’Commonly just called ‘The web’

The Internet and the World Wide The Internet and the World Wide WebWeb

The Internet is the ‘wiring’ that connects The Internet is the ‘wiring’ that connects separate private networksseparate private networks

The web is the collection of web servers and The web is the collection of web servers and web browsers. Messages between them travel web browsers. Messages between them travel across The Internet.across The Internet.

It’s possible to use web technologies without It’s possible to use web technologies without using The Internet. We call these using The Internet. We call these IntranetsIntranets

The Internet also carries other traffic including The Internet also carries other traffic including email, file transfer, and Internet telephonyemail, file transfer, and Internet telephony

Group ExerciseGroup Exercise

What advantages did the invention of the PC What advantages did the invention of the PC bring?bring?

What disadvantages did it bring? Think about What disadvantages did it bring? Think about social as well as technical issues here?social as well as technical issues here?

What can we do to resolve these problems?What can we do to resolve these problems? If we connect networks together what do we call If we connect networks together what do we call

the combined network?the combined network? How was ARPAnet superior to a simple internet?How was ARPAnet superior to a simple internet? What is the World Wide Web and how does it What is the World Wide Web and how does it

relate to The Internet?relate to The Internet?

Group Exercise Group Exercise

Who ‘owns’ The Internet?Who ‘owns’ The Internet? Who pays for The Internet?Who pays for The Internet? Whose laws apply to the InternetWhose laws apply to the Internet Who ‘polices’ the Internet?Who ‘polices’ the Internet?

CoffeeCoffee

An Introduction to the An Introduction to the Web Technologies Web Technologies

Diploma courseDiploma course

Some of the things you will cover Some of the things you will cover on this courseon this course

TechnologiesTechnologies

XHTMLXHTML CSSCSS PHPPHP MySQLMySQL

SoftwareSoftware

Web BrowsersWeb Browsers Web ServersWeb Servers DreamweaverDreamweaver FlashFlash PhotoshopPhotoshop

DesignDesignstandardsstandards

Legal IssuesLegal Issues

CopyrightCopyright

Domain namesDomain names

Web HostingWeb Hosting

CostingsCostings

Web MarketingWeb Marketing

Search Engine Search Engine OptimisationOptimisation

Research and Research and planning skillsplanning skills

Times and PlacesTimes and Places

Sat Mornings Sat Mornings

9:30 – 12:009:30 – 12:00

Week 1 – Site Planning Week 1 – Site Planning Week 2 – DreamweaverWeek 2 – Dreamweaver

Weds EveningsWeds Evenings PhotoshopPhotoshop FlashFlash

Sat Afternoons Sat Afternoons

12:30 – 3:0012:30 – 3:00

Week 1 – XHTML/CSS Week 1 – XHTML/CSS Week 2 – DreamweaverWeek 2 – Dreamweaver

Module 1 – Site PlanningModule 1 – Site Planning

Web Servers and Web BrowsersWeb Servers and Web Browsers Planning a WebsitePlanning a Website Registering a Domain nameRegistering a Domain name Web HostingWeb Hosting Content managementContent management Costing a web siteCosting a web site Web MarketingWeb Marketing Search Engine OptimisationSearch Engine Optimisation

Module 2 – XHTML/CSSModule 2 – XHTML/CSS

The most important skills in web designThe most important skills in web design XHTML files describe the content of a web pageXHTML files describe the content of a web page CSS files describe the appearance of a web CSS files describe the appearance of a web

pagepage While both XHTML and CSS files can be created While both XHTML and CSS files can be created

automatically by programs such as automatically by programs such as Dreamweaver a good knowledge of these is Dreamweaver a good knowledge of these is essential for anyone seeking web masteryessential for anyone seeking web mastery

Module 3/4 – Adobe DreamweaverModule 3/4 – Adobe Dreamweaver

Dreamweaver is the market leading web Dreamweaver is the market leading web development environmentdevelopment environment

In the first few weeks we will use Dreamweaver In the first few weeks we will use Dreamweaver to create static web pages.to create static web pages.

In the second part of the course Dreamweaver In the second part of the course Dreamweaver will be used to introduce the use of the PHP will be used to introduce the use of the PHP programming language and the MySQL programming language and the MySQL database to create dynamic web pages.database to create dynamic web pages.

Dreamweaver can automatically create XHTML Dreamweaver can automatically create XHTML and CSS code. We will compare this to the and CSS code. We will compare this to the manually written codemanually written code

Module 5 – Adobe PhotoshopModule 5 – Adobe Photoshop

Most web pages contain photographs or other Most web pages contain photographs or other imagesimages

Many web pages contain custom buttons or Many web pages contain custom buttons or other graphics used to give a particular other graphics used to give a particular appearance to the page.appearance to the page.

Both the preparation of photographs and the Both the preparation of photographs and the production of web graphics are undertaken with production of web graphics are undertaken with a graphic editing programa graphic editing program

Adobe Photoshop is the market leader in this Adobe Photoshop is the market leader in this fieldfield

Module 6 – Adobe FlashModule 6 – Adobe Flash

Flash is the market leading product for the Flash is the market leading product for the production of animated graphics for use on production of animated graphics for use on the webthe web

This module will cover the creation of This module will cover the creation of animations and the use of Flash to create animations and the use of Flash to create user interfacesuser interfaces

AssessmentsAssessments The course is mainly assessed by the production The course is mainly assessed by the production

of practical work.of practical work. The Site Planning module gets you to plan a site The Site Planning module gets you to plan a site

over several short written answers.over several short written answers. As you are not expected to own personal copies As you are not expected to own personal copies

of Dreamweaver, Flash and Photoshop time will of Dreamweaver, Flash and Photoshop time will provided during the classroom sessions for you provided during the classroom sessions for you to undertake practical work. The LRC also has to undertake practical work. The LRC also has computers available with this softwarecomputers available with this software

Please bring in a USB pen drive. This will allow Please bring in a USB pen drive. This will allow you to take work home.you to take work home.

Any QuestionsAny Questions