Web Development

Wikipedia: https://en.wikipedia.org/wiki/Web_development

Web Glossary

Web Page

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

Wikipedia: https://en.wikipedia.org/wiki/Web_page
Website
Web site

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

Wikipedia: https://en.wikipedia.org/wiki/Website
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.

Wikipedia: https://en.wikipedia.org/wiki/Web_application
Docs: Information Systems > Cloud Application Layers
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)

Wikipedia: https://en.wikipedia.org/wiki/Web_hosting_service
Docs: Clouds
Docs: Web Hosting
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()))

Wikipedia: https://en.wikipedia.org/wiki/MAC_address
ARP

Address Resolution Protocol

Wikipedia: https://en.wikipedia.org/wiki/Address_Resolution_Protocol
TCP

Transmission Control Protocol

Wikipedia: https://en.wikipedia.org/wiki/Transmission_Control_Protocol
IP

Internet Protocol

Wikipedia: https://en.wikipedia.org/wiki/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)

Wikipedia: https://en.wikipedia.org/wiki/IP_address
IPv4

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

Wikipedia: https://en.wikipedia.org/wiki/IPv4
Docs: IPv4 Address
IPv4 Address

IPv4 addresses are 32-bit IP Address identifiers.

Standard: https://tools.ietf.org/html/rfc1918
## 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.

Wikipedia: https://en.wikipedia.org/wiki/IPv6
IPv6 Address

IPv6 addresses are 128-bit IP Address identifiers.

Wikipedia: https://en.wikipedia.org/wiki/IPv6_address
Standard: https://tools.ietf.org/html/rfc4291
Docs: https://en.wikipedia.org/wiki/IPv6_address#IPv6_address_scopes
Docs:

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.

Wikipedia: https://en.wikipedia.org/wiki/Dynamic_Host_Configuration_Protocol
Domain Name

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

Wikipedia: https://en.wikipedia.org/wiki/Domain_name
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.

Wikipedia: https://en.wikipedia.org/wiki/Domain_Name_System
Docs: DNS Configuration
Docs: wrdrd.tools.domain
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.

Wikipedia: https://en.wikipedia.org/wiki/Uniform_resource_locator
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
Wikipedia: https://en.wikipedia.org/wiki/Uniform_resource_identifier
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
Wikipedia: https://en.wikipedia.org/wiki/Uniform_resource_name
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.

Wikipedia: https://en.wikipedia.org/wiki/Magnet_URI_scheme
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.

Wikipedia: https://en.wikipedia.org/wiki/Universally_unique_identifier
Standard: https://tools.ietf.org/html/rfc4122
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

Wikipedia: https://en.wikipedia.org/wiki/Web_browser
Docs: Tools > Browsers
Docs: WebSec
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.

Wikipedia: https://en.wikipedia.org/wiki/Document_Object_Model
Docs: Web Design
Web Standard

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

Wikipedia: https://en.wikipedia.org/wiki/Web_standards
Docs: Web Standards
Docs: Semantic Web Standards
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

Wikipedia: https://en.wikipedia.org/wiki/Web_design

CSS

Wikipedia: https://en.wikipedia.org/wiki/Cascading_Style_Sheets
Docs: 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

Bootstrap

Wikipedia: https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)
Homepage: https://getbootstrap.com/
Source: git https://github.com/twbs/bootstrap

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

Wikipedia: https://en.wikipedia.org/wiki/Domain_Name_System
Standards: https://en.wikipedia.org/wiki/Domain_Name_System#RFC_documents
Standards: https://en.wikipedia.org/wiki/List_of_DNS_record_types
Standards: https://en.wikipedia.org/wiki/Domain_Name_System_Security_Extensions

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

Wikipedia: https://en.wikipedia.org/wiki/Web_hosting_service

Web Hosting Information

See: Information Systems > Clouds

WebSec

WikipediaCategory: https://en.wikipedia.org/wiki/Category:Web_security_exploits
WikipediaCategory: https://en.wikipedia.org/wiki/Category:Internet_security

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

Security at W3C :

Responsible Disclosure

Wikipedia: https://en.wikipedia.org/wiki/Responsible_disclosure

Bug Bounty Program

Wikipedia: https://en.wikipedia.org/wiki/Bug_bounty_program

SANS/CIS Consensus Audit Guidelines:

Wikipedia: https://en.wikipedia.org/wiki/Consensus_audit_guidelines
Wikipedia: https://en.wikipedia.org/wiki/The_CIS_Critical_Security_Controls_for_Effective_Cyber_Defense
Wikipedia: https://en.wikipedia.org/wiki/CSC_Version_6.0

CWE

CWE (Common Weakness Enumeration)

Homepage: https://cwe.mitre.org/

OWASP

Homepage: https://www.owasp.org/

WebSec Forums

Internet Forums for WebSec (“Web Security”)

HTTP

WikipediaCategory: https://en.wikipedia.org/wiki/Category:Hypertext_Transfer_Protocol
WikipediaCategory: https://en.wikipedia.org/wiki/Category:Hypertext_Transfer_Protocol_headers

See:

HTTPS

Wikipedia: https://en.wikipedia.org/wiki/HTTPS

See:

HTTP STS

Wikipedia: https://en.wikipedia.org/wiki/HTTP_Strict_Transport_Security

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

Wikipedia: https://en.wikipedia.org/wiki/Automated_Certificate_Management_Environment
Src: https://github.com/ietf-wg-acme/acme/
Spec: https://tools.ietf.org/html/draft-ietf-acme-acme
Spec: https://ietf-wg-acme.github.io/acme/draft-ietf-acme-acme.html

Letsencrypt

Wikipedia: https://en.wikipedia.org/wiki/Let%27s_Encrypt
Homepage: https://letsencrypt.org/
Src: https://github.com/letsencrypt
Docs: https://letsencrypt.readthedocs.io/en/latest/
Docs: https://letsencrypt.readthedocs.io/en/latest/using.html#getting-certificates-and-choosing-plugins
Docs: https://letsencrypt.readthedocs.io/en/latest/using.html#third-party-plugins

  • “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

Wikipedia: https://en.wikipedia.org/wiki/User_story

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: