Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.
-
Upload
bruce-lawson -
Category
Documents
-
view
214 -
download
0
Transcript of Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.
![Page 1: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/1.jpg)
1Website BasicsRay PankoITM 385 E-CommerceFall 2013
![Page 2: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/2.jpg)
2 Markup
now is the time for all good good peopleto come to the aid of their country
The quick fox jumpedover the dog
![Page 3: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/3.jpg)
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>
![Page 4: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/4.jpg)
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
![Page 5: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/5.jpg)
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
![Page 6: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/6.jpg)
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
![Page 7: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/7.jpg)
7 Hypertext Markup Language (HTML)
Browser renders multiple files as a complete page
![Page 8: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/8.jpg)
8 Hypertext
In traditional text, pages were organized serially
Indexes, references, tables of contents, etc. were non-serial, but jumps to pages were manual.
![Page 9: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/9.jpg)
9 Hypertext
Hypertext pages contain links to jump to other pages In the same website
In other websites
Website A Website B
![Page 10: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/10.jpg)
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
![Page 11: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/11.jpg)
11 Website
Collection of linked webpages
Under the control of a single administrator
Website A Website B
![Page 12: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/12.jpg)
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
…
![Page 13: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/13.jpg)
13 Basic Website Development
Create website on development PC
Upload to website server to host the website for public access
![Page 14: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/14.jpg)
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)
![Page 15: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/15.jpg)
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
![Page 16: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/16.jpg)
16 Group Development
When a dev checks out a webpage, it is locked so that others may not change it
Checkout
![Page 17: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/17.jpg)
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
![Page 18: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/18.jpg)
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
![Page 19: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/19.jpg)
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
![Page 20: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/20.jpg)
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
![Page 21: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/21.jpg)
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
![Page 22: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/22.jpg)
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]
![Page 23: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/23.jpg)
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
![Page 24: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/24.jpg)
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
![Page 25: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/25.jpg)
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
![Page 26: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/26.jpg)
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
![Page 27: Website Basics Ray Panko ITM 385 E-Commerce Fall 2013 1.](https://reader036.fdocuments.us/reader036/viewer/2022081520/5697bfaf1a28abf838c9d171/html5/thumbnails/27.jpg)
27 Pau
Questions?
Comments?
Cries of outrage?