Web Type: Getting Started

This course is purposely named with shortened, less precise versions the words “web” and “type” to broaden our perspective on our explorations.

Web could refer to websites, but also to the web infrastructure, to the technology and culture of the world wide web; the protocols that compose the fabric of our internet; the act of weaving a web.

Type could refer to typography — the arrangement of letterforms — but also typefaces themselves, the quality of letterforms; to type, the act of typing, or writing, or coding.

Both are fundamental for communication: one a medium for its distribution, the other its foundational visual form. As designers, it is essential that we can critically create work that thrives at their intersection.

And also maybe: 🦆 🐸 🐧🦎🦢

• This website is a work-in-progress
• The Demos repository will contain the code used in in-class demos

Github

GitHub is a web-based repository hosting service based on the Git version control and source code management system. GitHub allows individuals and teams of programmers to manage, share, store and make editable revisions to projects. We will be using Github’s code sharing and publishing service to store our class projects.

• A GitHub account and make a repository for this class.
  • This will become part of the url for where upload your projects
  • Avoid spaces in the repository name
• Review Git Version control or download GitHub Desktop Mac client

Github Desktop is a program that helps you keep track of changes in your code and upload them to your repository.

• See more on Github Guides

Text Editor

• Download Sublime Text / Atom / Visual Studio Code

Tutorials

• Free account at Codecademy

Browser

• Assignments will be evaluated in Chrome for its Inspector tools

Slack

• Join Slack

The Web

Web infrastructure

Tim Berners-Lee, a scientist at CERN, launched The World Wide Web Project in 1989. The project was initially created to streamline distribution of information among scientists around the world. Berners-Lee devised the system of hypertext (or links.) This first website was dedicated to host information about the World Wide Web itself.

The internet is a network of connected computers with the primary purpose to share information. It works as bunch of conversations between clients and servers.

• Web Client: Browser (Google Chrome, Firefox, Safari, etc..)
• Web Server: Internet-connected computers running server software, serving web documents as requested.

Despite popular depictions of the internet as a massless, nebulous entity, it requires a massive physical infrastructure powered by electrical energy, including data centers, servers, airconditioners, and cables.

• What’s Important About Underwater Internet Cables
• Map of the Internet

Web as medium

From the begining stage of the web, artists embraced the browser as a platform. It nodes of personal expression, or abstract painting. Artists could even used the infrastracture of the web itself.

It is in this spirit that we will engage in typographic explorations.

• Alexander R. Galloway: Jodi’s Infrastructure

Web languages

3 essential technologies (front-end web development) determines what we see and interact with on the web.

1. Content in HTML / .html
2. Form in CSS / .css
3. Behavior in Javascript / .js

Back-end technologies are used to compile several sources of the website together, whether through a database or static site generator. CMS (content management systems) like Wordpress are an example of systems that integrate all of this: how the information is collected, stored, and compiled into a website.

In our class, we will be focusing on frontend languages to develop the skills needed to shape text within the browser.