From the folder to the browser

DHUM / DATA 70600 ยท Class 5

Markup in an HTML file

  • An HTML file is text with a label around each part
  • Heading, paragraph, quotation, link
  • How each kind looks is in the stylesheet
  • Screen readers, search engines, and the agent read the labels
in the file<h1>Jane Doe</h1><p>I study housing records.</p><blockquote>Rent was due...</blockquote><a href="cv.pdf">My CV</a>Jane DoeI study housing records.Rent was due...My CVlabels say what each part isthe browser decides how each kind looks

The file and the live page

  • The browser builds a live copy of the page in memory, called the DOM
  • Scripts change the live copy
  • The file stays the same, so a reload clears a filter
index.htmlon the diskreadthe live page in memory (the DOM)pageheadermainh1plistfiltered by a scriptscript.jschanges the live pagea reload throws the live page away and builds it again from the file

One page, many requests

  • A page usually takes dozens of requests
  • Some go to other companies' servers
localhost:8000one pagemany requeststhis siteindex.htmlstyles.cssscript.jsphoto.jpga font servicethe typefaceNYC Open Datathe 311 rowsan analytics servicea record of the visit

The server and the visitor's computer

  • Everything after the files arrive happens on the visitor's computer
  • The server never sees which filter someone picked
the serverthe folderfiles, as savedstores the filessends them when askedfilesthe visitor's computerbuilds the pageruns the scriptskeeps anything saved in the browser

A page from the disk and from a server

  • Browsers restrict pages opened straight from the disk
  • They usually can't load their own data
  • With a local server, the page acts as it will on the web
opened straight from the diskfile:///Users/you/site/index.htmldata blockedpage is emptysent by a local serverhttp://localhost:8000data loads

Static and dynamic sites

  • Many DH projects are static on purpose
  • They need little upkeep for years
  • GitHub Pages hosts static sites
staticthe folderthe same filesthe same filesthe same filesevery visitor gets the same filescheap to host, easy to archivedynamicdatabasea programbuilds pagespage for Apage for Bpage for Ceach page is built when askeda library catalog, a shop, a login

Screenshots and page structure

  • The agent can take a screenshot
  • Or it can read the page's structure, from the markup
  • Ask it to check both
localhost:8000Jane DoeContacta screenshota picture of the pagelayout, color, overlap,text cut offthe structureheading "Jane Doe"paragraphbutton "Contact"what each part is,links and buttons, labels

A local address and a public address

  • If someone else types localhost, they reach their own computer
on this computer onlyhttp://plain connectionlocalhostthis computer:8000which program/about.htmlwhich filefor anyonehttps://secure connectionjdoe.github.ioyour GitHub name/my-sitethe repository/about.htmlwhich file

Putting the site online

GitHub Pages

  • GitHub keeps a copy of the folder, called a repository
  • Pages sends those files to visitors
  • It only sends files, so it hosts static sites
  • Sending saved versions to GitHub is a push
  • You sign in to GitHub yourself
your folderfiles and historysendGitHuba copy: the repositoryPagesserveshttps://jdoe.github.io/my-siteyour site, for anyoneupdates a minute or twoafter each new send

Making the site public

Anyone can open it

Search engines and archives can copy it.

Everything in the folder goes up

Drafts, notes, old files.

The repository is usually public

Every file and every saved version.

Images and texts need permission

Your own, permitted, or openly licensed.

Homework

  • Make a GitHub account if you don't have one
  • Look through your site's folder for anything you wouldn't publish
  • Have the agent publish the site with GitHub Pages