IS1500: Introduction to Web Development Essential Web Concepts Martin Schedlbauer, Ph.D. m.schedlbauer@neu.edu

Essential Web Concepts IS4300 What is the Web? The “web” is a combination of things: A collection of physical communication networks 4G, 802.11, T1, etc. A collection of application communication protocols HTTP, SMTP, FTP A collection of languages HTML, JavaScript, CSS, PHP, etc. IS1500 Essential Web Concepts

What is Web Development? Web development is the process of creating web sites and web applications using one or more programming languages. Web development involves client-side (browser-side) and/or server-side programming. IS1500 Essential Web Concepts

Essential Web Concepts What do I need to learn? That depends… For client-side programming, you’ll need to know at least HTML, CSS, and JavaScript For server-side programming, you’ll need to know one or more programming languages such as PHP, ASP.NET, Java, Deluge, Ruby, among many others. IS1500 Essential Web Concepts

Browsers and Web Servers The web is a simple client/server architecture where clients send requests for documents to servers generally using the HTTP protocol. request request Internet HTML Document HTML Document Computer with Browser Web Server IS1500 Essential Web Concepts

Essential Web Concepts Documents Browsers request documents from web servers. These documents are generally HTML documents but can also be PDF documents or images, videos, and audio files. The documents are either stored on the web server as a file or generated “on-the-fly” by a program running on the web server. IS1500 Essential Web Concepts

Essential Web Concepts Dynamic Documents Dynamic documents are generated when requested and include information retrieved from a database at the time of generation. This allows the HTML document (page) to have the latest information in it. The browser always receives an HTML document; it does not care that it is generated. IS1500 Essential Web Concepts

Generating Dynamic Pages Dynamic documents are generated through a program written in any one of these languages: PHP Java ASP.NET Deluge Ruby IS1500 Essential Web Concepts

Essential Web Concepts The URL The URL (Uniform Resource Locator) is a standard way of specifying documents on a web server. Examples: is1500.weebly.com/index.html www.google.com http://www.youtube.de IS1500 Essential Web Concepts

Essential Web Concepts Format of the URL The URL has a standard format, but some parts are optional and are “filled in” by the browser based on conventions: protocol://domainOrIPAddress:port/path/filename IS1500 Essential Web Concepts

Essential Web Concepts Protocols Indicates what protocol will be used to access the document. Some common protocols include HTTP (Hyper Text Transfer Protocol) for transferring web content and FTP (File Transfer Protocol) for transferring files over a remote connection. The protocol is followed by :// IS1500 Essential Web Concepts

Essential Web Concepts Supported Protocols While not all browsers support all protocols, they generally include: http and https file ftp news mailto The default protocol is http. IS1500 Essential Web Concepts

Essential Web Concepts Domain or IP Address The domain or IP address is the “address” of the web server on which the document is located. Specified generally as a domain name in the form: www.company.tld Example: www.yahoo.com IS1500 Essential Web Concepts

What’s with the www Prefix? The “www” prefix is actually only a convention. Most companies name the computer on which their web site is stored “www”, but they don’t have to. For example, our website is at: is1500.weebly.com IS1500 Essential Web Concepts

Essential Web Concepts What about other TLDs? There are many other top-level domains (TLDs) besides .com, such as: Countries: .de, .ch., .me, .tv Organizations: .mil, .gov, .edu, .org, .net Categories: .biz, .info IS1500 Essential Web Concepts

How do I get a domain name? You register your domain name through a domain registration service who will then register it with ICANN and add it to the Domain Naming Service (DNS) so that browsers can find it. Well known domain registration services: GoDaddy Yahoo Weebly IS1500 Essential Web Concepts

Domain Names and IP Addresses IS4300 Domain Names and IP Addresses The actual computers on the Internet are identified through a number rather than a domain name. DNS translates from a domain name to an IP address. IP Address are generally in the form: 192.168.0.12 10.31.103.201 IS1500 Essential Web Concepts

Essential Web Concepts The DNS Lookup IS1500 Essential Web Concepts

Finding Your Computer’s IP Address There are several ways you can find your computer’s IP address: Use Google: type in “what’s my ip” Go to a “shell” or “command line”; on Windows, run “cmd” and then use the command “ipconfig” IS1500 Essential Web Concepts

Essential Web Concepts Long URLs URLs can get pretty long when the file has a long name and is stored in a folder. They can be shorted by a URL shortener who stores the URL and then translates so the URL is easier to type, remember, and share. http://docs.oracle.com/cd/B19306_01/appdev.102/b14259/xdb01int.htm http://bit.ly/1rOA5vX IS1500 Essential Web Concepts

Essential Web Concepts URL Shorteners Some common URL shorteners include: bit.ly goo.gl http://en.wikipedia.org/wiki/URL_shortening IS1500 Essential Web Concepts

Essential Web Concepts HTTP Protocol User selects a document by specifying its URL Browser formulates an HTTP request for that document and sends it to the web server specified in the URL Server looks for the document or runs the program to generate the document Server sends document back to browser Browser renders (displays) document IS1500 Essential Web Concepts

Essential Web Concepts HTTP Request Sequence IS1500 Essential Web Concepts

Connecting to the Internet Computers connect to the Internet through a variety of networks: Mobile networks: 4G, 3G, etc. Telephone: ISDN, DSL Cable Wireless: WiFi 802.11 IS1500 Essential Web Concepts

Essential Web Concepts IS1500 Essential Web Concepts

Essential Web Concepts Developing for the Web You will need: Program to edit your HTML files Place to store HTML file and “publish” Register domain name of web site IS1500 Essential Web Concepts

Essential Web Concepts Our Stack I We will use: Weebly to edit HTML files in their “nice” and user-friendly editor that does not require knowledge of HTML Weebly to host our web site Weebly to provide domain name and registration Free Weebly account is limited to 10 pages and has some other limitations. IS1500 Essential Web Concepts

Essential Web Concepts Our Stack II We will also use: AwardSpace to edit files in their HTML editor AwardSpace to host our web site AwardSpace to provide TLD and registration This will be used when we want to build websites directly in HTML. IS1500 Essential Web Concepts

What about Search Engines? Search engines store “all” pages in a vast database and allow users to search the database to find what they are looking for. Some top search engines: Google Bing Yahoo DogPile IS1500 Essential Web Concepts

Summary, Review, & Questions… IS1500 Essential Web Concepts