Category Archives: Week 12

The Underlying Technology Communications

When we try to find a website, we typically do it in two ways, 1) type in the Universal Resources Locator in the toolbar directly, 2) go to google and search for the domain name (YouTube, Amazon, etc.)

Based on the readings and video introductions for this week, the two ways of opening webpages are essentially sending request to the server and then get feedback. The URLs are displayed in a hierarchical fashion. For instance, if I try to locate the official website of Amazon, “http” stands for the language used for computers to interpret and communicate, but I realized I did not have to specifically type that in to locate the correct website. That is because the browser makes assumptions based on the port number, which has its own assigned task and is associated with IP address and protocol type of communication. As we can see from the table below, port number 80 is in charge of the Hypertext Transfer Protocol in WWW. If we do not type in http://, the browser automatically assumes 80 as it is the standard port for HTTP, thus directs us to the correct page.

The DNS holds responsible for our request for a certain website. If we input “”, our computer communicates to the server asking the address of the website. If the server has not heard of this, it forwards the request to the domain name system“.com” asking for the server handling “”. Once the address is found, the data returns in the form of HTML code and our computer receives them and reassembles them, therefore appears the graphic interface of website or application on our screen. Because of the existence of DNS, although we do not always have to put in “http”, we do need to get the domain name right. No IP address of “” will be found because there is no amazon under the governance of “.gov”-unless they create one in the future.

HTML coding controls how a webpage appears to users, where the images are placed, how wide is the frame, etc. The text is contained as part of the coding, but other files like videos and images come with their own URLs. Every piece of information is transmitted through the internet in data packets, our computer reconstructs the information when they are received. In this fault-tolerable process, the packets do not have to follow the same path and arrive at the exact same time. But the images and videos are retrieved in a slower manner, especially when they contain larger bits of data and the network is congested. This explains why sometimes when we open a page, we can see the text but the images are still loading.

The layers of websites and its trend of “appification”

In this week’s reading, I’m more clear about the different layers enabling Internet work this way. The first underlying layer is about the basic infrastructure and information form, which are wires, cables, Wifi and binary sequence design. This architecture is the foundation of information transmission. The second layer above is about how to send specific information from one point to another. Here comes the TCP/IP protocol and router system. Every specific information could be broken down and transported in packets. Different from determining the information form in this previous layer, this layer secures information could be sent accurately. The third layer riding on it is about managing the sending and receiving process of web files, which is relied on HTTP, DNS and client-server system. And there are many additional measures to guarantee this layer work smoothly, such as SSL, TLS and search engine algorism. Search engine uses spider to collect information on websites and create a search index. Search rank algorism is very essential and varies from company to company. Google’s rank is based on how many websites are linked to that. For Baidu, the search rank is generally based on click rate, link number and overall reputation. But the controversial one in Baidu search principles is bidding rank, which received plenty of critiques for misleading consumers by ranking untrustworthy advertisement first. So how to find a reasonable and sustainable search rank model is still an crucial issue today.

Moreover, I found the debate of web and app on Pew Research is interesting. The web is actually undergoing “appification” now. HTML5 could create many interactive effects just like app. There are many accessible tools now for users who don’t know coding to make H5 interactive websites. But as far as I observe, those HTML5 interactive websites are still transmitted in apps by link for creative marketing, rather than serving as an aid for daily website viewing. I think the trend for apps to outpace websites is inevitable, because in this age of information explosion, we really need a filter for functional information, and apps can truly meet users’ needs in this sense. In my perspective, apps serve as a kind of beforehand filter and enhance the efficiency to access information. For example, if we need some recipes to cook for a party, the cooking app could directly recommend something suitable for you, and you can also view the comments below this recipe to decide whether you will use it. Yet the web is not so convenient in this case, it will take additional time for you to search one by one and you can’t see others’ feedbacks. However, I don’t think the apps can completely replace websites and they are mutual exclusive. I think the app and web debate is similar to the TV and mobile debate to a degree. The apps are isolated information island, and we can’t stay on the islands all the time. Technology methods we use are not simply a technological issue, but also have sociocultural meanings. TV can’t be replaced by mobile devise because it embrace the family culture and create an open space to communicate. Web is complimentary for the vertical needs in apps and serve more general functions and untargeted explorations.


Martin Irvine, Intro to the Web: Extensible Design Principles and “Appification”

Ron White, “How the World Wide Web Works.” From: How Computers Work. 9th ed. Que Publishing, 2007.

Janna Anderson, and Lee Rainie. “The Future of Apps and Web.” Pew Research Center’s Internet & American Life Project, March 23, 2012.

A case study of buying tickets on LiveNation

Jun Nie

My friend wanted to see a ballet performance on December in D.C. and she asked me to buy the tickets. The information I know was limited, and I am not familiar with any specific ticket platform of U.S. So I just type “Ballet in D.C” in the Google search box, and then a hyperlink of LiveNation appeared on the top of the searching results.
In the blink of my eye, my query was sent to Google’s web server, and the web server forwarded it to Google’s index servers. Based on the Google PageRank or other secret sauce, the index servers determined the results of my search, sending a query to Google’s doc servers and the web server which sent the result to me.

The texts, graphics, videos and sound files displayed in the page were stored on the server in the form of HTML text file. When my browser requested, the document was sent to my PC through the fastest routes by the server. In that page, the ballets of different theatre and different time are listed in sequence, and a prompt box of the pop-up page after a random click indicates that the ticket price can be changed in real time according to the demand. For a ticket website, the rapid updating of user interaction information is an important prerequisite for maintaining the normal operation. After entering a specific page, the simulation diagram of the theater space clearly distinguishes the positions that have been selected and still can be purchased through the color, and different prices of the corresponding seats can be synchronously displayed on the right side by clicking. Besides, some buttons used to filter the seat preferences greatly ease the users’ operation, user can increase or decrease the amount of tickets by clicking the button, and the price range is adjusted with the left and right sliding.

After selecting the seat, I clicked the “Next” button, and a feedback page said “We are securing your verified tickets” appears to make sure my action was valid. And then it jumped to the price details page, and a countdown about four minutes appeared in the upper right-hand corner. When the countdown is over, the previously paid page will fail and all operations have to be repeated, which is designed to ensure the fairness of the ticket and the security of the transaction.
According to the guidance of the web page process, the purchaser will fill a lot of information, such as the country, the ticket receiving methods, the email address and the payment ways. When all the required information is completed, pressing the button of “Place Order”, the ticket will be successfully purchased. Of course, the system will send a confirmation message to the purchaser’s mailbox, and the purchaser of selecting “Go mobile” will also get the process guide to view the electronic ticket.
In my first process of buying ticket, it had to return to the seat selection page because of my operation error (the countdown was over and the page was stuck). At that time, I found that the position checked before was in the gray state, which means that once the payment process is entered, the selected seat will be automatically locked in order to avoid the repeated operation of different clients and colliding with each other. When I finished the process successfully, I came back to check the seat table, the original page did not change. Only after refreshing the page, the position color I selected became gray, and the position where the operation had not completed changed back to the optional blue.
Through the real-time updating of the information, the ticket purchaser can easily obtain accurate ticket information and order the performance ticket immediately.

Martin Irvine, Intro to the Web: Extensible Design Principles and “Appification”
Ron White, “How the World Wide Web Works.” From: How Computers Work. 9th ed. Que Publishing, 2007.
Janna Anderson, and Lee Rainie. “The Future of Apps and Web.” Pew Research Center’s Internet & American Life Project, March 23, 2012.

Deblackboxing YouTube in IOS system

There are three types of mobile applications: native app, hybrid app and web app. The applications with an icon on mobile phone screen are native app, which are programmed by language requested by a certain system. Applications on iOS system are constructed by Objective-C or Swift language. Although the native apps on phones use different language with that of websites, both use same protocols to communicate with servers, including HTTP, IP and TCP. In this article, I will deblackbox YouTube native application in iOS system.

Media function is the major function of YouTube app. People around the world, with the assistance of internet and phone, can watch or upload videos with this app. When a user wants to watch a specific video, the first step is to search it. The user can use keywords to search for this video by the search engine of YouTube. The search engine will match the keywords separately in different videos’ titles and return the videos at an order- from more matches to less matches. Other secret algorithm also decides this order, considering the popularities of a video and other elements that the users don’t know- the secrets for better search results. In this process, different servers are involved: YouTube server, its index servers and its video servers. After getting these results, the user can choose one to watch by “touching” the thumbnail image or the title of that video. When the user touches the top glass layer of a capacitive screen, the capacitance of that area increases so that the grids of wires and eletrodes can detect this change and translate this location to a certain request to servers. No matter the user touches the area of the image or the title, he will send a request to YouTube video server and it sends a signal to a computer acting as a multicast server, and then this server sends the video signal to the user by UDP. After watching this video, the user can log out the app or just close it.

The next time the user log in YouTube, he will find that the videos in recommendation pages are those related to what he watched these days. This is because the cookie stores the information every time the user searches and watches a video and use this information to recommend videos. The information in cookie can be shared by other applications and websites, which provides users with convenience because these applications can also use them to recommend the products or services users prefer. However, it also causes some security and privacy issue. The YouTube server itself also stores user information, including email address, password, payment method and some other personal information. In this way, the user can log in and make a purchase with convenience, although it also brings about privacy and security problems. In order to deal with these issue, Hypertext Transfer Protocol Secure (HTTPS) comes. In HTTPS, the communication protocol is encrypted using Transport Layer Security (TLS) or Secure Sockets Layer (SSL). The Apple company also has a range of APIs on its platforms to enable apps to employ secure network connections and to benefit from OS-level security policies.



Martin Irvine, Intro to the Web: Extensible Design Principles and “Appification”

Ron White, “How the World Wide Web Works.” From: How Computers Work. 9th ed. Que Publishing, 2007.

“What are the popular types and categories of apps,”

Sterile and Generative Systems

The introduction and first chapter of Jonathon Zittrain’s book, The Future of the Internet and How to Stop It, deal with questions of the design of the Internet as a sociotechnical system, particularly, as it has transitioned from a largely generative system to a sterile system. For Zittrain, a generative system describes a system which invites contribution, innovation, and involvement from the user, whereas a sterile system limits the role of the user to participate in pre-made processes with limited ability to be meaningfully involved with the process of creating in the application.

In some ways, the generative/sterile dichotomy harkens back to Donald Norman’s complaint about the misuse of the word “affordances” in design communities. In other words, the difference between a sterile system and a generative one has nothing to do with the technical capacities of the machine (i.e. its real affordances), but the perceived affordances, or even the affordances accessible to the user via the interface. Even in these introductory chapters, Zittrain provides a nuanced view of sterile and generative systems which is not entirely biased towards one or the other (although, based on the word choices, sterile and generative, I can guess where he ultimately would prefer to see the Internet go). However, Zittrain does not hesitate to point out that the generative design of the early Internet system, when maintained at nation wide scale, opens up opportunities for “bad code” to spread, identity theft to occur, and the general rise of malicious hacking.

Sterile systems, on the other hand, limit (although not totally stamp out) these pernicious practices. When the user makes less choices with software, they are less likely to engage with a “bad” software. And yet, even within the sterile system in which most of us operate, we are becoming increasingly aware that sterile systems are not utopian playgrounds, entirely safe for data. Zittrain wrote in 2009, so how could he foresee the Cambridge Analytica scandal? And while Facebook’s selling of data may not be entirely connected to its black-boxed sociotechnical practices, the public inability to understand the full implications of such practices certainly is.

In some ways, it seems that the logical end of Zittrain’s argument is a choice. Would you rather engage in a sociotechnical system which is more open for everybody, which simultaneously makes users more susceptible to malware as well as opportunities for innovation? Or, would you rather engage in a system to which innovation is closed off except for specialists, but also provides a different sort of safety against harmful software? It might be nice if even a significant portion of people would be inclined to the former, but I believe most would lean toward the latter.

Works cited:

Donald A. Norman, “Affordance, Conventions, and Design.” Interactions 6, no. 3 (May 1999): 38-43.

Jonathan Zittrain, The Future of the Internet–And How to Stop It. New Haven, CT: Yale University Press, 2009.

De-black boxing Youtube streaming function via web technology


The modern mobile application architecture consists of three parts: the client-side, the server-side, and the database. The client-side is the interface or the application logic of a device. The server-side is a computer that stores web pages, sites, and applications. When a client device wants to retrieve a web page, a copy of the web page is downloaded from the server to the client machine and displayed on the user’s browser. The database is a unique management data resource system in the computer application system. Data can take many forms, such as text, digital, symbols, graphics, images, and sounds.

How is the web technology working when we watch streaming videos on YouTube? When we click on the video, the computer will immediately transmit the signal into digital information and download and decodes a small portion of the media file in real-time. When displaying on the interface, the computer will divide the whole video into millions of frames. Interframe compression records the amount of change between each frame and display those pixels that change from one scene to the other. As we all know, as long as the switching time between two frames is longer than 1/24 second, human eyes cannot discover change, which means frames will look like continuous video.

As the picture above shows, the progress bar has different colors. The red color indicates the part that you have already watched. The white color means that part is fully loaded so you can watch it without getting stuck. If you have an unusually fast Internet connection, the files may be fully downloaded before you can finish watching or listening, which is why even if the Internet is cut off, the stream continues for a while.

Every day there are millions of videos uploaded on YouTube. To provide as many videos as possible and guarantee the video update rate, YouTube needs to build a vast database to store all the videos


However, as Mr. Berners-Lee has said in The New York Times, web technology is being abused. The Internet is becoming a tool for political manipulation and privacy invasion. There is still a long way to go before we can reasonably use the Internet.


Martin Irvine, Intro to the Web: Extensible Design Principles and “Appification”

Ron White, “How the World Wide Web Works.” From: How Computers Work. 9th ed. Que Publishing, 2007.

Web Design Application and User Information Security

Xueying Duan

The Internet designs aiming at creating a bigger platform to cover unlimited servers and clients into an integrated system. We discussed several methods in optimizing internet transforming methods before including breaking information down into different layers. The term layer is used in new media forms and is gradually introduced into the internet design area. When discussing a streaming work or any interaction medium on the internet, we see different components of it. There’s audio track, image track, lines track and various meta elements like sound effect, timbre, pixel and color data, the transformation from natural signal to electric signal and back to natural signal (like the presentation of sound, word, video and so on). The same is applied in the internet design thinking process. We started talking about modules and modular design principle from the very beginning of the class. Until now, we can still see its popularity in every field of application. Internet is a mixture of all kinds of medium genres, and the decomposition of each single piece combines together to form what we now see a complicated and sophisticate internet “network”.

Hypertext and hypermedia is a frequent word using to describe how internet connect individual address and device together. I see the concept of HTML, CSS, Javascript in building a webpage and learn a little bit from my friends who is studying web development this semester. Hypertext is the basic standard for document designed to be displayed in a website browser, shows the interaction with various media form on a single page and enable people to view external files that were encoded ahead as a specific navigation mark at this page. When using an HTML-coding online editor like Glitch, I see that people can choose what types of devices they’re going to display on (like MacBook, iPad, different version of iPhone and other media players) in order to adapt to the size, resolution and viewing habit, etc. However, I also noticed that there’re several web design software like Adobe Dreamweaver and Adobe Xd. The first one is a common tool for both amateur and professional web designers to present a website with the advantage of visualization at the same time of coding. The second one is mostly used to design for mobile apps. For most people who do not have a professional practice with coding, these software allow everyone to design a website simply by pulling in and arranging images and paragraphs. However, when delving deeper in the Adobe Dw, I find that there are also boxes supported to insert many types of web design languages like C#, CSS, HTML, Java, JavaScript, and many others, and the syntax highlighting function in it helps with the recognization of different functional sentences. Even in WordPress, we can choose whether to show me the visual view or text view that has a different concentration on whether visualize the final presentation or the raw code. Other than traditional coding platforms that request people to focus on the code all the time, this kind of preview software help us better follow the output of our thoughts and shows a visualized page. Back to the previous topic, every software we use that seems to reduce its entry barrier for actually still follow that basic internet design principles rather in a more secret layer.

Moreover, many websites introduce cookies to store and control user’s personal information including account and password, encrypted bank account number, viewing frequency and habit and so on. Each website creates your personal computer a unique code that links your device with its database. Many searching engine integrate those document to create a whole personal profile that have more your information in it in order to present the users with better service and customized content. In that case, we consumers are actually the most important “product”. Those who hold more information of consumers can actually stand out from its competitors for better targeting the consumers and hold an advantage for other advertisers to customize their content to us. “Selling” users’ information nowadays is more common for companies out of the restriction for user privacy. It, on the other hand, helps us with the decision-making process and on the other hand, has seduced us to jump into the companies’ plot.


Martin Irvine, Intro to the Web: Extensible Design Principles and “Appification”

Ron White, “How the World Wide Web Works.” From: How Computers Work. 9th ed. Que Publishing, 2007.

World Wide Web Timeline (Pew Research Internet Project)

The W3C: World Wide Web Consortium: Overview of Mission and Standards from the international organization that manages development of services and extensions to Web architecture.

Spotify: From Web Page to App (Sorry I did the week12 reading and question)

  • How does Spotify play music?

Spotify is an online audio streaming platform. It is synced to the Spotify Cloud Server, meaning that the information is sent from the cloud. According to White, “streaming enables PC to play the file as soon as the first bytes arrive, instead of forcing the PC to wait for an entire multimedia file to finish downloading”. Spotify plays music directly from the server to device. I notice that when I click the music, there is a one to two second buffer time until the music plays. What happens is that when I select a song, the “conversation”, carried by “metafile”, between the computer and the Spotify server instructs my computer how to play the song. Spotify contacts its server providing the sound file and information about the internet connection. The server will choose the suitable quality of audio file based on the speed of the internet. It sends higher-quality sound if fast internet connection, while it sends a lower-quality link if slow internet connection. The files are transmitted as series of packets. Just like how the information transmitting process work, when the packets arrive at the computer, the system decodes and sends the result to a buffer. When it is filled up, the files are turned into music.  Like mp3, Spotify has its own audio format, named Ogg Vorbis. “On mobile user can choose what bit rate to stream, in increments up to 320kbps, which is handy especially if you’re worried about using up too much mobile data. Desktop playback is at 160kbps or 320kbps for premium users” (cnet).

  • Spotify Cache

Spotify also uses cache to store music in the  hard drive, which enables us to store temporary music for streaming. “When you press play, you hear the music immediately with few interruptions” (Spotify). But we cannot listen to the cache loaded music offline. If I want to clear my cache, Spotify allows me to clear my cache without deleting those songs that are downloaded.  Is it because cache is in RAM, which is a temporary memory not stored in the hard ware of the device, while downloaded musics are stored physically in the device? (I am not sure how it works)

  • Spotify Connect

Spotify can be accessed via desktop software, app on mobile and tablet and web player. Spotify Connect works over Wi-fi. “It seeks out compatible devices that are connected to the same wi-fi network and links them together to wirelessly to stream music.” After logging into Spotify, we can listen to music via multiple devices (Spotify premium only) , such as smartphone, PC and home audio systems. We can also switch between compatible devices without pausing the music. For example, if I am playing music on Spotify desktop, I can use my Spotify mobile app to control the progress bar on my desktop. I can also “mute” the desktop player and let my mobile phone play the rest of the song. All I need to do is to choose the device at the bottom of the screen. Spotify Connect works better than the Bluetooth pair up, because the delay in between the swapping of device is so tiny that we cannot actually discern it. What is more, when I switch between devices, the volume is automatically adjusted.(what appears on my desktop player)

(what appears on my mobile app player)

  • Something interesting I found about the webpage version of Spotify:

When I type something in the searching bar, the URL on top of the screen changes. I typed “Shawn”, it appears after “search/” . Then the songs related to Shawn Mendes pop up. But I am not sure what “open” stands for. Also, each song and artist has their own link. For example, when I copy the link of a song, artist as well as the album into word document, they appear like this: (song’s link) (artist’s link) (album’s link)

However, I cannot find any information about them by simply reading the link.