- Web Page
A web page is a single (“static”) HTML page.
Sometimes, when people say web page they really mean the whole website (as composed by e.g. a web application backed by a database or a static page generator with support for managing collections of interlinked HTML pages (e.g. Sphinx, Tinkerer).
- 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.
- 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.
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.
Address Resolution Protocol
Transmission Control Protocol
- IP Address
A IP identifier number identifying a particular network entity (e.g.
Certain IP addresses are locally-routable (e.g.
192.168.0.1within a home LAN) while others are globally-routable (e.g.
- IPv4 Address
- 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 220.127.116.11
- Wikipedia: https://en.wikipedia.org/wiki/IPv6
- IPv6 Address
- Wikipedia: https://en.wikipedia.org/wiki/IPv6_addressStandard: https://tools.ietf.org/html/rfc4291Docs:
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 # 18.104.22.168
- Domain Name
A human-readable textual name for a network entity (e.g.
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
CNAMErecords to lookup the IP address of the web server (or least busy load balancer).
Sending an email utilizes an
MXrecord 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.
A URL (Uniform Resource Locator) is a string of characters that identify a resource location.
hostis 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/
A URI (Uniform Resource Identifier) is a string of characters that identify a resource.
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
Web browsers can be configured to open Magnet URIs with other programs.
A UUID (Universally Unique Identifier) is a 128- bit identifier for a resource.
- UUID 4
A UUID 4 identifier contains a random identifier as determined by the configured source of random.
- Web Browser
A software program which visually renders resources identified by a URL and interprets scripts.
Examples: Internet Explorer, Mozilla Firefox, Google Chrome
Some web browsers support WebSocket.
Some web browsers support WebRTC.
A number of example web browser extensions: Browser Extensions
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.Docs: Web Design
- Web Standard
An agreed-upon standard specification for web things like data interchange, structure, and presentation.
- Open Web Standards
Media Resources: Copy, Text, Photos, Images, Videos (things with HTTP URLs)
CSS (Cascading Style Sheets) define the presentational aspects of HTML and a number of mobile and desktop web framworks.
A web layout is a box-model composition of DOM objects, their styles, and their behaviors at various screen sizes and resolutions.
In general, a simpler page renders faster and more consistently.
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
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.
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:
Browser: Browser Extensions
Web Service: multi-platform browser testing grid services
Build Script: record the [X] buffer with the test sequence
See: Video Production
What is Bootstrap?
A responsive HTML and CSS (LESS, Sass SCSS (4.0)) Framework.
Bootstrap Web Site Styles / Themes / Templates
https://themes.getbootstrap.com/ (Updated, Free, Official)
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
[ ] Add an
<h1>tag with a page title
[ ] Section: About
[ ] Add textual description
[ ] Organization (
[ ] Business (
[ ] Section: Products / Services
[ ] Acquire product/menu/service offering information
[ ] Products (
[ ] Services (
[ ] Format product/menu/service offering information as HTML + RDFa
[ ] Section: Media / In the news
[ ] Research media profile
[ ] Articles
[ ] Acquire news media assets
[ ] Media Objects (
[ ] Section: Contact
[ ] Name, Address, Telephone (
[ ] Locations (
[ ] Embed map thumbnail/widget
[ ] Link to Directions
[ ] Social Media
[ ] Google+
[ ] […]
[ ] Section: Footer
[ ] Copyleft:
© <year> <business name>
[ ] <location>
[ ] Feedback
[ ] Terms
[ ] Privacy
[ ] Section: Post-load JS scripts
Hosting / DNS¶
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
WebSec (web security) is Information Security for web applications.
Security at W3C :
SANS/CIS Consensus Audit Guidelines:¶
“SANS Top 20”: https://www.sans.org/critical-security-controls/
“SANS Top 25”: https://cwe.mitre.org/top25/
CWE (Common Weakness Enumeration)
Internet Forums for WebSec (“Web Security”)
Responsible Disclosure / Vulnerability Disclosure
IRC, Slack, Mattermost
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.
ACME (Automated Certificate Management Environment) is a protocol for Web PKI with X.509 Certificates and HTTPS (TLS/SL).
ACME Spec Introduction: https://tools.ietf.org/html/draft-ietf-acme-acme#section-1
Letsencrypt implements the ACME spec.
“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):
Certbot is an official, packaged Python client.
Web Development Requirements¶
[ ] Web Hosting
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.