Transcript Overview of Practical Concepts, Software & Tools

Lab Zero


Practical Concepts
Software & Tools
 WinSCP
 Notepad++
 GIMP
 InkScape
 Chrome

HTML5 Boilerplate


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
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)

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)
Hypertext Transfer Protocol
 Set of rules that allow…
1. A web browser to request a web page
2. A web server to respond, i.e., send web page
 Much information is exchanged during the
request-respond process

A program installed on a computer or mobile
device that can…
1. make http requests
2. receive web pages from a server
3. interpret and render HTML and CSS code
4. process JavaScript code
5. store browsing information
▪ history, cookies, cache, etc.

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.
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.

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

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.
Vendor/Developer
Apache HTTP Server
Microsoft IIS
(Internet Information Services)
NGINX
(Engine X - Russian)
Google Web Server
(GWS)
Jan-12
Percent
378,267,399 64.91%
84,288,985 14.46%
56,087,776
9.63%
18,936,381
3.25%


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
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.


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 page
http://www.cnn.com/news/us/ny/albany/file.html
Base URL
http://www.siena.edu
Root folder for Siena’s apache server
local/apache/public_html
Thus, this URL
http://www.siena.edu/dept/cs/
Maps to this folder
local/apache/public_html/dept/cs/

When a URL points to a folder
http://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.

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.


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 includes
1. Free domain
2. Proximity to Internet backbone
3. Managed services (updates, backups, etc.)
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.
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.
Go to www.djsmooth.org
Virtual Servers
users/ebreimer/
users/djackson/
Physical Server
66.555.44.3
DNS Server
(ns.hostmonster.com)
breimer.net 66.555.44.3 /users/ebreimer
djsmooth.org 66.555.44.3 /users/djackson

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 subfolders within your public_html.

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
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

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

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.

Web sites are edited collaboratively.

To change a web page, be sure to follow 6 steps
Download the file from the remote server
(check out file – like a book from a library)
1.

Why? If the remote file was changed, your local copy
is out of date.
Edit the downloaded copy locally
2.

Why? Visitors should not see your working edits
each time you save.
Save your file locally and proof read
3.

test by opening edited page locally in a web browser
Upload your file to the remote server (check it in)
4.

Otherwise the world cannot see it
Visit the URL of the uploaded file
5.

To make sure the server is sending it out properly
Refresh your browser…hit SHIFT-Reload
6.

Sometimes a browser will refresh the page from its own
local cache rather than the remote server (IE does this)

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)

Windows:
WinSCP, also supports SFTP

Mac:
FileZilla, supports SCP, FTP and SFTP

Editing digital photographs
 Adobe Photoshop ($540)
 GIMP (free)

Creating graphics (vector drawing tool)
 Adobe Fireworks – web graphics ($270)
 InkScape (free)

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