Web Development

Web Glossary

Web Page

A web page is a single (“static”) HTML page.

Website
Web site

A website is a set of interlinked HTML pages. Also used to refer to a web page.

Web Application

A web application is a software application running on a server which returns responses to specific requests and may interact with a database, email services, etc.

  • Like all systems, a web application works with variable data inputs and outputs.
Web Hosting Service

A web hosting service offers virtual or physical server resource space for a web page, web site, or web application.

  • Shared, Dedicated, Virtual Private, Cloud (Virtual Instance)
  • Managed (24/7 Supported // n hours a month), Unmanaged (file a support request and wait)
MAC address

A MAC (Media Access Control) address is a 48-bit identifier.

  • NIC cards have a MAC address.
  • Wireless cards a MAC address.
  • Many Wireless Access Points (AP) MAY all have the same text SSID but different MAC addresses (e.g. for wireless mesh networking or WDS)
  • DHCP IP address leases are tied to a MAC address.
  • A MAC address identifies a node to the nearest packet routing link segment (e.g. AP, Switch, Hub, Bridge).
  • Some IPv6 addresses contain the link Mac address.
  • UUID version 1 128-bit identifiers contain a link MAC address and the date/time. (Python import uuid; print(uuid.uuid1()))
ARP

Address Resolution Protocol

TCP

Transmission Control Protocol

IP

Internet Protocol

IP Address

A IP identifier number identifying a particular network entity (e.g. 127.0.0.1)

  • We are running out of 32-bit IPv4 addresses (127.0.0.1), and are now moving toward 128-bit IPv6 addresses ( 0000:0000:0000:0000:0000:0000:0000:0001, ::1)
  • Certain IP addresses are locally-routable (e.g. 192.168.0.1 within a home LAN) while others are globally-routable (e.g. 8.8.8.8)
IPv4

IPv4 (IP version 4) is a web standard protocol defined by IETF.

IPv4 Address

IPv4 addresses are 32-bit IP Address identifiers.

## Local IPv4 Addresses
127.0.0.1
10.0.0.0/8
172.16.0.0/12
192.168.0.0/16

## Global IPv4 Addresses
8.8.8.8
IPv6

IPv6 (IP version 6) is a web standard protocol defined by IETF.

IPv6 Address

IPv6 addresses are 128-bit IP Address identifiers.

IPv6 Address Examples:

## Local IPv4 Addresses
0000:0000:0000:0000:0000:0000:0000:0001  == ::1  # 127.0.0.1
0001:0000:0000:0000:0000:0000:0000:0001  == 1::1

::/128          # unspecified           (~IPv4 0.0.0.0/32)
::1/128         # localhost             (~IPv4 127.0.0.0/24)
::/0            # unicast default route (~IPv4 0.0.0.0/0)
::ffff:0:0/96   # IPv6-mapped IPv4
::96            # IPV4 compatible IPv6 addresses (deprecated)
2002::/16       # 6to4
2001::/32       # teredo
fc00::/7        # unique local address
fe80::/10 #MAC  # link-local address    (~IPv4 169.254.0.0/16)
fec0::/10       # site-local address (deprecated)
3ffe::/16       # 6bone (returned)

## Global IPv6 Addresses
                                                 # 8.8.8.8
DHCP

DHCP (Dynamic Host Configuration Protocol) is a standard for acquiring an IP address, DNS, and NTP settings.

Domain Name

A human-readable textual name for a network entity (e.g. example.org)

DNS

Domain Name System. Converts a domain name (e.g. localhost or wrdrd.github.io) into an IP address (e.g. 127.0.0.1 (IPv4) or ::1 (IPv6)).

  • Initial DNS hosting costs are often covered by Web Hosts.
  • There are DNS record types for different types of services.
  • Surfing to a website in a browser may utilize A, AAAA, and/or CNAME records to lookup the IP address of the web server (or least busy load balancer).
  • Sending an email utilizes an MX record to lookup the IP address and sender information for the mail host.
  • Updates to DNS settings can take as long as 86400 seconds (one day) to propagate, depending upon the DNS TTL.
URL

A URL (Uniform Resource Locator) is a string of characters that identify a resource location.

Where host is an IP address, hostname, or domain name, a URL is of the form:

scheme://host:port/p/a/t/h

https://wrdrd.github.io/docs/   # https, wrdrd.github.io, port 443, /docs/
  • With an http scheme, the default port is 80.
  • With an https scheme, the default port is 443.
URI

A URI (Uniform Resource Identifier) is a string of characters that identify a resource.

scheme://host:port/p/a/t/h?query#fragment

https://wrdrd.github.io/docs/#wrdrd
URN

A URN (Uniform Resource Name) is a string of characters that identify a named resource in a namespace.

urn:namespace:key

urn:isbn:0-486-27557-4
urn:uuid:6e8bc430-9c3a-11d9-9669-0800200c9a66
Magnet URI

A Magnet URI is a URN containing an key to retrieve from a network (such as a DHT).

  • Web browsers can be configured to open Magnet URIs with other programs.
UUID

A UUID (Universally Unique Identifier) is a 128- bit identifier for a resource.

IETF RFC 4122 defines 5 different algorithms for generating UUID:

  • UUID 1

    A UUID 1 identifier contains a mac address and a datetime with 100- nano-second resolution.

  • UUID 2

    A UUID 2 identifier contains a mac address and a POSIX UID or GID.

  • UUID 3

    A UUID 3 identifier contains an MD5 hash of a URI, URN, or URL.

  • UUID 4

    A UUID 4 identifier contains a random identifier as determined by the configured source of random.

  • UUID 5

    A UUID 5 identifier contains an SHA-1 hash of a URI, URN, or URL.

Web Browser

A software program which visually renders resources identified by a URL and interprets scripts.

Examples: Internet Explorer, Mozilla Firefox, Google Chrome

  • All web browsers support HTML over HTTP.
  • Many web browsers support HTTPS and/or HTTP STS.
  • Some web browsers support WebSocket.
  • Some web browsers support WebRTC.
  • Many web browsers support image formats like GIF, JPEG, PNG, and SVG Scalable Vector Graphics.
  • Many web browsers support JavaScript scripts.
  • All web browsers work with a DOM (Document Object Model) which is parsed from HTTP and transformed by JavaScript.
  • A number of example web browser extensions: Browser Extensions
DOM

Document Object Model. Can be thought of as a layout outline of the objects in a particular document (e.g. text, shapes, images, videos).

Different web browsers interpret the DOM differently, depending on Web Standards and individual implementations.

Web Standard

An agreed-upon standard specification for web things like data interchange, structure, and presentation.

Open Web Standards
Open Web Standards are Open Source Web Standards (e.g. HTTP, HTML, XHTML, HTML5, CSS, JavaScript, SVG, RDF)

Web Content

Media Resources: Copy, Text, Photos, Images, Videos (things with HTTP URLs)

See Web Standards, Art & Design

Web Design

CSS

CSS (Cascading Style Sheets) define the presentational aspects of HTML and a number of mobile and desktop web framworks.

  • CSS is designed to ensure separation of data and presentation. With javascript, the separation is then data, code, and presentation.

Web Layout

A web layout is a box-model composition of DOM objects, their styles, and their behaviors at various screen sizes and resolutions.

Different browsers implement the DOM, HTML, CSS, and JavaScript differently. It is necessary to test a web layout in the browsers which are utilized by the target audience.

In general, a simpler page renders faster and more consistently.

Some users may be browsing without Javascript (either because their very classic web browser doesn’t support it, or, optionally, because of security concerns introduced by active page scripts). Because of this, it’s usually best to not rely upon Javascript for page layout and instead work with pure-CSS implementations.

CSS framework developers specialize in developing CSS grids and layouts which work across browsers, devices, and various screen sizes.

Image Based Layouts

At first glance, it may seem that an image-based layout with fixed dimensions (as might be developed in a traditional graphic design program) would be simpler and easier; however:

  • an 800px wide image layout is hardly usable on a mobile device
  • search engines and screen readers are unable to read text embedded within images; necessitating alt= attributes on <img> tags and title= attributes on <a> tags
  • when scaled (by zooming in), raster images like JPEG, PNG, and GIF look blocky and pixelated

Practically, it is not possible to develop a responsive web layout which supports diverse screen sizes and resolutions with traditional graphic design tools. It is far more consistent and reproducible to start with an HTML web page and a CSS framework and then develop a template from there.

Screen Captures

There are many tools and services for collecting screen captures (or screen shots) of web layouts.

Features to look for:

  • Capturing the visible area of the page
  • Capturing the whole page
  • Setting the browser resolution

Ways to collect screen captures and movies at various points in a testing workflow:

See: Video Production

Web Development Checklist

A checklist for building a modern website with structured data; for search, social web, sharing.

See also: http://webdevchecklist.com/

  • [ ] Pick a CSS framework
  • [ ] Create page layout template
    • [ ] Create or acquire static template
      • Helps if it already includes a CSS framework
    • [ ] Create or acquire dynamic template
  • [ ] Create static HTML page from layout template
  • [ ] Port content from existing site
    • [ ] Add HTML formatting
    • [ ] Add CSS #id deep link anchors and classes
  • [ ] Add structured data markup to page
  • [ ] Section: Navbar
    • [ ] Choose top-level links
    • [ ] Indicate current location
  • [ ] Section: Above the fold
    • schema:ImageObject
    • schema:VideoObject
    • schema:MusicVideoObject
    • Text
    • HTML/CSS/JS
  • [ ] Add an <h1> tag with a page title
  • [ ] Section: About
    • [ ] Add textual description
    • [ ] Organization (schema:Organization)
    • [ ] Business (schema:Organization > schema:LocalBusiness > {...})
  • [ ] Section: Products / Services
    • [ ] Acquire product/menu/service offering information
      • [ ] Products (schema:Product, schema:ProductModel)
      • [ ] Services (schema:Service < schema:Intangible)
    • [ ] Format product/menu/service offering information as HTML + RDFa
  • [ ] Section: Media / In the news
    • [ ] Research media profile
      • [ ] Articles schema:Article > schema:NewsArticle
    • [ ] Acquire news media assets
      • [ ] Media Objects (schema:MediaObject)
  • [ ] Section: Contact
    • [ ] Email
    • [ ] Name, Address, Telephone (schema:LocalBusiness > schema:Organization > schema:Place)
    • [ ] Locations (schema:LocalBusiness)
      • [ ] Embed map thumbnail/widget
      • [ ] Link to Directions
    • schema:Organization
      • name
      • url
      • address <schema:PostalAddress>
      • hasMap (map) URL
      • Directions
      • telephone
      • faxNumber
      • email
      • description
      • logo
      • image
      • sameAs (~= URL)
      • legalName
      • founder
      • foundingDate
      • taxID (TIN)
      • memberOf
    • schema:LocalBusiness < schema:Organization
      • name
      • url
      • address <schema:PostalAddress>
      • hasMap (map) URL
      • Directions
      • telephone
      • faxNumber
      • email
      • image (s)
      • branchOf <schema:Organization>
      • openingHours
      • currenciesAccepted
      • paymentAccepted
      • priceRange
      • schema:FoodEstablishment < schema:LocalBusiness
        • acceptsReservations Yes/No/URL
        • menu text/URL
        • servesCuisine text
    • [ ] Social Media
      • [ ] Google+
      • [ ] Twitter
      • [ ] Facebook
      • [ ] LinkedIn
      • [ ] [...]
  • [ ] Section: Footer
    • [ ] Copyleft: &copy; <year> <business name>
    • [ ] <location>
    • [ ] Feedback
    • [ ] Terms
    • [ ] Privacy
  • [ ] Section: Post-load JS scripts

Hosting / DNS

DNS Configuration

DNS Domain Name Information (A, AAAA, CNAME, TXT, MX, SRV)

DOMAIN="<domainname>"
IP=$(nslookup $DOMAIN)
  • Date of Registration / Expiration

  • Registrant (Name, Address, Email)

    • Privacy / WhoisGuard
  • DNS Registration Service Provider

  • Linux/OSX DNS Commands:

    nslookup DOMAIN
    dig $DOMAIN
    dig +qr any $DOMAIN
    dig -t mx $DOMAIN
    whois $DOMAIN
    whois $DOMAIN | egrep 'Registrar|Date|Domain Status|Registrant|Admin'
    
  • Online Whois Tools

See: wrdrd.tools.domain

Web Hosting

Web Hosting Information

See: Information Systems > Clouds

WebSec

WebSec (web security) is Information Security for web applications.

Security at W3C :

HTTPS

See:

HTTP STS

HTTP STS (HTTP Strict Transport Security) is a standardized extension for notifying browsers that all requests should be made over HTTPS indefinitely or for a specified time period.

See also:

ACME Protocol

Letsencrypt

  • “A free, automated, and open certificate authority.”

  • Certs are valid for 90 days

  • Use the staging server to avoid the certificate roll rate limit

  • There are many ACME clients (that work with letsencrypt):

    https://letsencrypt.org/docs/client-options/

    • Certbot is an official, packaged Python client.

Web Development Requirements

User Stories

User Stories are an Agile technique for capturing structured requires on cards (or as issues in e.g. GitHub).

  • User Stories are, in general, less complex than Use Cases which are often more highly specified (in terms of e.g. UML diagrams).
  • User Stories can be grouped in epics. An epic story is a long and arduous journey; often with multiple parts.
  • User Stories can be estimated and assigned arbitrary but relatively relevant point values with e.g. Planning Poker and/or a Kanban web application.

See also: