website basics ray panko itm 385 e-commerce fall 2013 1

1Website BasicsRay PankoITM 385 E-CommerceFall 2013

2 Markup

now is the time for all good good peopleto come to the aid of their country

The quick fox jumpedover the dog

3 Markup Languages

<Heading 1>Call to Action</Heading 1>

<p>Now is the time for <i>all</i> good people to come to the aid of their country.</p>

Tags<p> and </p>

<Heading 1> and </Heading 1><i> and </i>

4 Hypertext Markup Language (HTML)

<p>To see how, click <a href=“Explanation.html” >here</a></p>

<p><image src=/images/flower.jpg></p>

Link

PlaceholderTag for Graphic

5 Hypertext Markup Language (HTML)

.htm or .html file is text only

Contains formatting and layout tags (boldface, columns, etc.)

Tags can be placeholders for images, videos, etc.

All nontext material is contained in separate files that are downloaded individually

6 Hypertext Markup Language (HTML)

Example Webpage with three graphics and a

sound

One HTML file, which is downloaded first

Three graphics files and one sound files

Five files downloaded in all

7 Hypertext Markup Language (HTML)

Browser renders multiple files as a complete page

8 Hypertext

In traditional text, pages were organized serially

Indexes, references, tables of contents, etc. were non-serial, but jumps to pages were manual.

9 Hypertext

Hypertext pages contain links to jump to other pages In the same website

In other websites

Website A Website B

10 Hypertext

Conceived of by Dr. Vannevar Bush after World War II

Named hypertext by Ted Nelsen in the early 1960s

First computer hypertext system built by Dr. Doug Engelbart in 1964 at Stanford Research Institute

HTML and HTTP standards created by Tim Berners-Lee at CERN around 1991

11 Website

Collection of linked webpages

Under the control of a single administrator

Website A Website B

12 Website Development Tools

Professional website development programs Dreamweaver

Limited tools Cookie-cutter tools

Variations in cookie cutterness

Associated Tools Graphics, multimedia

Content management systems

…

13 Basic Website Development

Create website on development PC

Upload to website server to host the website for public access

14 Webserver Options

Organizationally owned

Owned by your organization

Operated by your organization

May be good option for a large organization

Webhosting service

Owned by a webhosting service (GoDaddy.com, etc.)

Operated by a hosting service

Good choice for SMEs (small and medium enterprise)

15 Server Farms

Companies likeAmazon.com have thousands of identical rack-mounted webservers

An individual webpage request is forwarded automagically to an individual server for response

This solution “scales”—can grow without exponentially increasing costs

16 Group Development

When a dev checks out a webpage, it is locked so that others may not change it

Checkout

17 Professional Development

Development Computer

Testing Server

Production Server

For website development and updating

For testing initial websites and every subsequent change

For giving service to visitors

18 Hypertext Transfer Protocol (HTTP)

Hypertext Markup Language (HTML) Standard for format of marked-up

files

Hypertext Transfer Protocol (HTTP) Standard for downloading files from

webservers

19 Hypertext Transfer Protocol (HTTP)

Standard for downloading files from webservers HTML files

Photographs

Videos

…

Download HTML file first so that the browser knows what file to get and where to put the representations on the page

20 HTTP Request/Response Cycle

Browser sends HTTP request message to the server Asks for a specific file

Webserver sends HTTP response message back Contains the requested file

Or contains an error message

One HTTP request/response cycle for each file downloaded

21 HTTP Request/Response Cycle

One HTTP request/response cycle for each file downloaded

Example: Webpage contains two graphic images Need three HTTP request/response

cycles

One to download the initial HTML file

Two more to download the individual graphic images

22 HTTP Request Message

Lines of text with carriage return/line feeds at the end GET /images/cutedog.jpg HTTP

1.1[CRLF]

Host: dogs.com[CRLF]

23 Recap

HTML Hypertext Markup Language

Format for the main file of a webpage

Text-only

Contains tags for formatting, layout, and anchors for information referred to in links

Contains links to other webpages

Each file in a webpage requires an HTTP request/response cycle

24 Website Development

Use development software such as Adobe Dreamweaver

Create website with many webpages on your own computer

Upload your webpages to a webserver to provide public access

25 Professional Development

Webserver Options Webserver owned by the enterprise

(UH)

Hosted servers like those at webhosting services (GoDaddy.com)

Multiple devs can work on a website simultaneously

Use a testing server to test every change before uploading it to the production site

26 Dreamweaver Professional website development tool

Fully functional, deeply discounted version available at the UH Bookstore Buying it alone is cheapest

In a package with Photoshop and other adobe tools, more expensive but a great deal

Available at the bookstore, but ask for the non-boxed version (far cheaper)

Version 6.0 is mandatory in the class

27 Pau

Questions?

Comments?

Cries of outrage?