Web Context

20.11.2017 ~ 01.12.2017

– Web Context Overview

  • In this project, you should create provocative web art which explores an issue or theme you care about. The artefact should be built using web technologies: HTML, CSS, JavaScript, Python, or other relevant tools. The artefact should take advantage of the context of the web by using techniques like interactive interfaces, personalisation, or connecting to other online content. It is expected your piece may be based on an adaptation of an existing example rather than creating one from scratch.


This project is Web Context. The project was attended by an external lecturer. The subject of this project is understanding web page and making web page based on user experience or interactive. It was about how to generate various interactions using Html, CSS, JavaScript, and Python on the web.


Week 1


On Monday, the first day tutor gave me an overview of the project. Tutor told you what I’ll be doing this week and next, as well as some sites I might need to reference or look at before I work.


On Tuesday, the class explained ‘Html5, CSS6, JavaScript’, which are the language to be used for this project. In addition to explain the language, tutor provided background information about the web like as history and types. First of all, tutor start to introduce us for web browser, including Internet Explorer, Chrome, Safari, Firefox, Opera, and various web specifications.

  • What is the World Wide Web (WWW)? It is a world-wide cobweb or cobweb-like network. It is a wide-area information service and software that makes it possible to find all kinds of information distributed on the Internet by a function called hypertext in a unified way. The World Wide Web, called the World Wide Web or Web, was proposed by Tim-Bernars-Lee of the European Joint Nuclear Research Institute (CERN) in Geneva, Switzerland, in 1989. The reason is that the web enables various expression methods in addition to texts, images, and voices, unlike the information transmission method by communication up to this time when text information was most.
  • What is HTTP (hypertext transfer protocol)? A communication protocol used to exchange hypertext documents on the Internet. Hypertext refers to a method in which texts and pictures are organically combined and linked with specific keywords in the middle of a document, so that different documents may appear as one document and are easy to refer to.
  • What is Hypertext Markup Language (Html)? It is a kind of basic programming language used to create web documents. It was developed for writing hypertext.
  • What is MySQL? It is an open source relational database management system managed and distributed by Oracle.


And what can JavaScript do in a web page? He also talked about a web page called ‘CodePen’. In fact, if you write the code of the web page you are envisioning, the site shows that this design will be roughly the same.

And when I am building or practicing a web page, I can copy the pre-created open source code, tear it apart, and customize it. When I changed this, when I touched it, I can learn how each web page changes.

In later classes, I learned only the basics of HTML, CSS, and Java script.


What we learn is


– <p> ~ content ~ </ p>

– How to add an image <img scr = source alt = “”> alt = Allows page accessors to know what an image is.

– footer (bottom)

– a = The URL link on the text is clicked so that it can be moved to that page.

– id message

You can create many containers using the – class concept because id is only allowed once.



– body {

background – color: # can contain hex code or RGB RGB (0,0,0);


– h1 {}

– font-size:;

– color:;

– font-family:;

The class invocation is. (Dot) container (ex)

You can specify a range of colors with – width. ex (% or pixel)

– margin-left: auto;

– margin-right: If you write auto, it is centered regardless of resolution.

– margin – top:;

– text-align:;


How to create interactive images with Java Script.

We use the most famous library in JavaScript, which is called Jquery.

– function main () {

console.log ();

– S (img) .attr (“src”, address) {}


On Wednesday, I made a Twitter bot using Python. I created an account for the bot and made the random text go up.

On Thursday, I can create a web game using HTML game development tools that tutor developed. This concludes the first week curriculum for ‘Web Context’.


Week 2


The second week was a time for personal task, and I can ask questions and getting feedback from tutors. In this project, I am planning to create an interactive gallery blog. I studied additional ‘HTML, CSS, Java Script’ by myself following examples. But I cannot understand full of functions and grammar for web languages. So, I only implemented a level of work that restructured the format of an existing website to my liking.


For me, this project has enabled me to understand various aspects of what we call the “web” every day. I think that’s significant because I has covered the minimum number of languages when I later worked on the web. In terms of material inquiry.

And by looking at the general history of the web, its components, and constructing it myself, it seems to be of great help in my future responsive work using my personal web page or web. It was a fun and useful project for me personally. I will continue to study the web more.


Thank you for reading my blog 🙂


The Glasgow school of Art

Interaction Design Year 2

YongWon Choi


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s