Practical ConceptsSoftware & Tools

Lab Zero

Outline

Practical Concepts Software & Tools

WinSCP Notepad++ GIMP InkScape Chrome

HTML5 Boilerplate

What is a web page?

Text document Formatted with HTML

Hypertext Markup Language Includes

external linked images style sheets (CSS), and ▪ Cascading Style Sheets

JavaScript code▪ Controls the action layer of a web page

What is a URL

Uniform Resource Locator

specifies where a web page is located on the WWW

http://www.siena.edu/academic/science/bio.html The protocol (http) The server (www) The main domain (siena) The top level domain (edu) The folder path (/academics/science/) The actual web page (bio.html)

File Extensions

By convention, “flat” web pages should have .html extension Microsoft used .htm because their OS

could only support 3 character extensions

Scripting languages generate “dynamic” web page .php – Use the PHP language .jsp – Java Server Pages .asp – Active Server Pages (Microsoft)

What is http?

Hypertext Transfer Protocol Set of rules that allow…

1. A web browser to request a web page2. A web server to respond, i.e., send

web page

Much information is exchanged during the request-respond process

What is a Web Browser?

A program installed on a computer or mobile device that can…1. make http requests2. receive web pages from a server3. interpret and render HTML and CSS

code4. process JavaScript code5. store browsing information▪ history, cookies, cache, etc.

What browser should I use? Over the years, browsers fall in and out of favor with

web developers. Microsoft’s Internet Explore - ugly history,

lots of bugs, did not follow recognized standards.▪ Most web professional only use it for cross-browser

testing. Firefox, Safari and Opera do a fine job

following W3C standards and fixing bugs. Chrome’s Object Inspector is beloved by web

professionals and it helps Google find bugs and exceptions.▪ Consequently, Chrome is outstanding at following

HTML5 standards.

What is the W3C?

World Wide Web Consortium Community of leading pioneers and

developers who establish world-wide standards for… HTML, CSS, JavaScript Web Graphic Formats Accessibility & Security

W3C is considered the authority of all things pertaining to the WWW.

What is Chrome’s Object Inspector?

Shows details of how web page elements are coded and rendered.

Shows us how the browser is interpreting our code. Helps Google debug their own browser Helps Web Developers debug their

pages and applications. Helps students understand HTML and

CSS

What is a Web Server

Daemon software that “serves up” web pages and applications. A Daemon is a constantly running

process 24/7 Specifically, a web server…

has web pages stored on the hard drive

Daemon responds to http requests and sends web pages over the Internet

stores information about requests▪ access logs, session data, etc.

Web Server Software

Vendor/Developer Jan-12 PercentApache HTTP Server 378,267,399 64.91%

Microsoft IIS (Internet Information Services) 84,288,985 14.46%

NGINX (Engine X - Russian) 56,087,776 9.63%

Google Web Server (GWS) 18,936,381 3.25%

Web Server Hardware

Web server software will run on almost any OS, even Windows and MacOS

But, a stable OS is preferred Linux - most popular web server OS.

Many servers run on rack-mounted multi-processor systems located in “server farms.” Lots of RAM is important

Setting-up your own server

1 hour of work, 8-12 hours of reading manuals…1. Computer (any will do)

2. Install a version of Linux (free) Ubuntu or Fedora are popular distributions

3. Install Apache HTTP Server (free)

4. Acquire a static or sticky IP address from Internet Service Provider (ISP)

5. Register a domain and specify your IP or ISP’s DNS server

6. Put your web pages in Apache’s public_html folder.

What is a public_html folder Also called the htdocs folder root content folder of a web server.

i.e., place where you put all your web pages Your IP address and domain name

“point” to this root folder. sub-folder are used to organize your web

pages. A URL can specify the folder path to a

particular web pagehttp://www.cnn.com/news/us/ny/albany/file.html

Mapping URLs to folders

Base URLhttp://www.siena.edu

Root folder for Siena’s apache serverlocal/apache/public_html

Thus, this URLhttp://www.siena.edu/dept/cs/

Maps to this folderlocal/apache/public_html/dept/cs/

index or default web page

When a URL points to a folderhttp://www.cnn.com/news/

most web servers will search the folder for a file named index or default. If found, the index web page is returned If not, the server will send back a folder

listing. You’ll see an example soon.

Mapping Domain to IP Addresses

goDaddy, Network Solutions, etc. are called registrars and are certified by ICANN Internet Corporation for Assigned Names and

Numbers▪ manages Domain Name Services (DNS) for

top level domains (.com, .org, .net, etc.) A registrar coordinates with ICANN and

adds your domain and your server’s IP address to an appropriate DNS server database.

How DNS works

Hosting Service vs. Server Setup

ISP – Internet Service Provider (e.g., Time Warner) Host - Web Hosting Service (e.g., hostmonster)

Many ISPs charge a premium fee for a static/sticky IP and limit “upstream” bandwidth. Often only available for business-class ($$$) service.

A Host is much cheaper and often includes1. Free domain2. Proximity to Internet backbone3. Managed services (updates, backups, etc.)

Why is Web Hosting so cheap?

Example 3000 users can have virtual

servers on one “rack” (e.g., 24 cores and 48GB of shared ram - $12,000 of hardware). $4 of hardware per user▪ Cloud computing leverages the economy

of scale Most customers have low traffic

websites and your busy website can seize all the resources.

Why Hosting Service is cheap?

Example – Part 2

Many customers share a single IP address.

Web hosting provider operates a DNS server that can map millions of domains to millions of virtual servers without using many IP addresses.

Sharing IP addresses

Virtual Servers

Physical Server

66.555.44.3

users/ebreimer/

users/djackson/

DNS Server(ns.hostmonster.com)breimer.net 66.555.44.3 /users/ebreimer

djsmooth.org 66.555.44.3 /users/djackson

Go to www.djsmooth.org

Sharing IP Addresses

Instead of providing the IP address of your physical web server, you provide the domain name of our host’s DNS server. Typically, ns.hostname.com

You must tell your host the domain that you registered, so they can map it to your public_html folder

You can also map additional domains to sub-folders within your public_html.

How to put file on a remote server?

Web Hosting companies will provide you with a login account.

Upload web pages to virtual server’s public_html folder using SCP, FTP or SFTP. FTP - File Transfer Protocol SFTP – Secure FTP SCP – Secure Copy

Uploading vs Downloading

Don’t take these terms for granted…in this class they have precise definitions.

Upload - copy a file from your local computer up to the server. Think of the server as being up in “the cloud.”

Download – copy file from server down to your local computer

Pros and Cons of Hosting?

PROS

Control panel is easy to use for the novice

Scripts and tools for common management tasks

Security-conscious configuration

CONS

You do not have true root access, i.e., not in full control

Remote access can be slow

Service can be terminated if you run insecure scripts

Local vs Remote file access Remote access means you must download files using

SFTP, SCP, etc. and save them locally before editing.

Local access refers to a “drive” that you can directly read/write without downloading files. Local hard drive or mapped network drive

Important Details if you are running a web server on your PC/Mac, all

your web pages are stored locally

Even though a mapped drive may be on a remote file server, it is considered local because the OS can directly read/write without copying files.

Download Edit Save Upload Visit Refresh

Web sites are edited collaboratively.

To change a web page, be sure to follow 6 steps

1. Download the file from the remote server (check out file – like a book from a library)

Why? If the remote file was changed, your local copy is out of date.

2. Edit the downloaded copy locally Why? Visitors should not see your working edits

each time you save.

Download Edit Save Upload Visit Refresh

3. Save your file locally and proof read test by opening edited page locally in a web browser

4. Upload your file to the remote server (check it in) Otherwise the world cannot see it

5. Visit the URL of the uploaded file To make sure the server is sending it out properly

6. Refresh your browser…hit SHIFT-Reload Sometimes a browser will refresh the page from its own

local cache rather than the remote server (IE does this)

Editing HTML files

Any text editor will do… Windows: Notepad++ Mac: TextWrangler

WYSIWYG (What You See Is What You Get) i.e., Design View Adobe Dreamweaver ($350) Kompozer (free) Amaya (free)

Managing Remote Folders

Windows: WinSCP, also supports SFTP

Mac: FileZilla, supports SCP, FTP and

SFTP

Editing Images and Graphics

Editing digital photographs Adobe Photoshop ($540) GIMP (free)

Creating graphics (vector drawing tool) Adobe Fireworks – web graphics ($270) InkScape (free)

HTML5 getting started

HTML5 Latest revision to the HTML standard. Not yet supported by all web browsers▪ Especially on mobile devices

HTML5 Boilerplate starter template includes versatile CSS and

JavaScript allows your web page to be rendered by ▪ light-weight mobile browsers,▪ old (out-of-date) browsers, and▪ Internet Explorer