iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 1
0
自我挑戰組

我所知道的計算機 2019 What I know about computers系列 第 1

網頁應用簡介 Brief Intro to the Web App

  • 分享至 

  • xImage
  •  
  • English version included, please scroll down.

前言

最近在準備找工作,想藉鐵人賽的經驗整理一下自己對資訊領域的認識、上網路課程的筆記,或是面試用幾個小玩具的開發過程。因為我想準備的是網頁應用“全端” GIS 工程師的職位,因為每個人對全端的定義、了解程度不同,所以基本上... 我就是想到什麼就寫什麼,讀者群則是只有我(毆)。

讓我們先從簡單的生活問題開始:

中午吃什麼?

最近當我有這類需求,第一個想到的是上網。Google 搜尋關鍵字、找相關資訊以利決策。過程不外如下:

  1. 使用網路瀏覽器,打入關鍵字,搜尋。
  2. 找到看起來最像的幾篇資訊,看一看,做選擇。
  3. 透過 google map 的導航服務到達所在地。

p1

然而除了吃的,生活上、工作上幾乎所有解答都能在 Google 找到。而這三十天的系列文就是要試著瞭解這需求的到解決方案背後的技術原理。

網路、瀏覽器簡介

不知道大家有沒有在電腦教室老師上課時候在底下透過區域網路(LAN)玩遊戲的經驗?這個過程中背後的名詞可能有以太網路(有線網路)、交換器、IP、伺服器... 等等。

p2

  • 乙太網路: 有線的媒介如網路線,將電腦跟另一端連接。
  • 交換器: 類似物流的角色,讓各電腦送出的訊息可以送到指定地點。
  • IP: 類似你的地址,讓物流士知道要送哪。
  • 伺服器: 其中一台電腦教室的電腦,他的角色是讓其他台存取遊戲狀態如:所有玩家位置、減少A玩家血量等。

至於網際網路我們可以把它想像成非常多的電腦教室、手機透過有線、無線網路共同連結,透過各國電信業者、海底纜線與其他地區、國家建立連結,分享他們電腦儲存的資料。基本上任何電腦只要接上網際網路,全世界的人都有機會可以存取裡頭的資訊。 而Google就是把很多電腦接上網路,讓大家可以使用他們提供的服務。

Q: 這過程中有相當多的台灣廠商參與其中,你可以列出幾個來嗎?
範例: ASUS - 桌電、筆電、無線路由器

網路瀏覽器

就像我舉的第一個例子,現代人跟網際網路的互動多半源自網路瀏覽器。這個東西顧名思義就是讓你“瀏覽”網際網路裡面有什麼東西,常見的有 Google Chrome, Mozilla Firefox 。這個“器”跟我們在玩的遊戲、使用的文字處理器 word/excel 都是執行在作業系統 Windows/MacOSX 的一隻應用程式,只是它主要透過 HTTP 協定來存取檔案。

至於HTTP... 我們留待下期分曉。

明日預告: 簡單的網頁應用

  • 網頁三本柱 HTML CSS Javascripts
  • 做個小台灣地圖 @ codepen
  1. HTTP? Domain Name, DNS?, IP?
  2. HTML 地圖雛形
  3. CSS 調整外觀
  4. JS 增加互動效果

Prologue

Since I am praparing for job interview, I reckon it's good to write down what I know about IT, some notes about taking courses on the Internet and the process of developing some toy apps. I would like to get a position related to Web and GIS. Due to our understanding to IT is so different, I will try to make this series as readable as possible to people like me. Yes, Meeeee.

Let's get started from an everyday simple question:

What for lunch?

Everytime when I deal with this question, the first thing would be google some words, get related information, like below:

  1. open up an Internet browser, key in the words, hit search.
  2. pick the ones that look like yours, and make decision.
  3. use service provided by Google Map to get to the destination.

p1

Besides food/cafe, nearly everything can be found on Internet nowadays by simply "Google it". And this serie of 30 days articles is my try to write down my view of the technical, engineering facts behind this process.

Internet, browser brief introdution.

Have you ever tried to play games with your friends in an computer class while the teacher is giving lecture? Under the hood there are Ethernet, switch(not the one from Nintendo), IP, server and etc.

p2

  • Ethernet: wired media to connect your computer to the other end.
  • Switch: Similar to the role of logistics, receive and send you information
  • IP: an address to let the switch know where the information to send.
  • Server: The computer to serve information to others, like the posistions of each player, HP of others.

As for Internet, imagine tons of computer classrooms, cellphones connected together via wired, wireless medias to ISP, submarine cables to other countries and share information to each other. Anyone in the world can access any computer connected to the Internet in practice. Google is one of the company which connects many of their computers to the Internet and provide information to others.

Q: Can you list a few Taiwanese companies involved in the Internet?
Example: ASUS, for routers, computers

Internet Browser

Browser is the most ubiquitous way to access the Internet like the first example shown above. It's an application similar to any others for text processing, gaming running on your operating system Windows/MacOSX. It specialized in providing you the utilities to access files, medias on the Internet, through a protocol called HTTP.

And HTTP, ... We will leave it for tomorrow.

Preview of Tomorrow: A simple Web Application

  • 3 pillars of web app: HTML, CSS and Javascript
  • Build a simple Taiwan Web Map @ Codepen
  1. HTTP? Domain? DNS? IP?
  2. HTML, frame of the map
  3. CSS, beautify it
  4. JS, interactivity

下一篇
做一個簡單的地圖網頁(一) Build a simple web map part 1
系列文
我所知道的計算機 2019 What I know about computers6
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言