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   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/DeveloperJan-12Percent Apache HTTP Server378,267, % Microsoft IIS (Internet Information Services) 84,288, % NGINX (Engine X - Russian) 56,087, % Google Web Server (GWS) 18,936, %

 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

Base URL Root folder for Siena’s apache server local/apache/public_html Thus, this URL Maps to this folder local/apache/public_html/dept/cs/

 When a URL points to a folder 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.

Virtual Servers Physical Server users/ebreimer/ users/djackson/ DNS Server (ns.hostmonster.com) breimer.net  /users/ebreimer djsmooth.org  /users/djackson Go to

 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.

 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 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.

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)

 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