เว็บคืออะไร?

ทุกวันคุณเปิดหน้าเว็บเป็นสิบๆ หน้า — portfolio site, แรงบันดาลใจด้านดีไซน์, documentation, social feed แต่จริงๆ แล้วเกิดอะไรขึ้นหลังการคลิกนั้น? การเข้าใจเรื่องนี้จะทำให้คุณเป็น designer ที่ดีขึ้น เพราะคุณจะรู้ ว่าทำไม เว็บถึงถูกสร้างมาแบบนั้น

Browser

Browser (Chrome, Safari, Firefox, Edge) คือโปรแกรมที่มีหน้าที่เดียวคืออ่านไฟล์แล้ววาดออกมาบนหน้าจอ Browser อ่านไฟล์ข้อความชนิดพิเศษ — ไฟล์ HTML — แล้วแปลงเป็นหน้าเว็บที่คุณมองเห็น

ลองนึกถึง browser เหมือน PDF reader PDF reader รับไฟล์ .pdf แล้ว render เป็น document ที่จัดรูปแบบแล้ว Browser รับไฟล์ .html แล้ว render เป็นหน้าเว็บ Browser คือ renderer ที่ทรงพลังมากเท่านั้นเอง

Server

แล้วไฟล์ HTML เหล่านั้นอยู่ที่ไหน? บน server — คอมพิวเตอร์ที่เปิดตลอดเวลา เชื่อมต่ออินเทอร์เน็ตตลอดเวลา และมีหน้าที่เดียวคือส่งไฟล์ออกไปเมื่อมีการร้องขอ

เมื่อคุณพิมพ์ที่อยู่เว็บแล้วกด Enter browser ของคุณจะส่งคำร้องขอ: “ขอไฟล์สำหรับที่อยู่นี้ด้วย” Server หาไฟล์ที่ถูกต้องแล้วส่งกลับมา Browser รับไฟล์แล้ว render หน้า ทั้งหมดนี้ใช้เวลาน้อยกว่าหนึ่งวินาที

ลองนึก server เหมือน design asset library บน cloud ไฟล์ Figma ของคุณลิงก์ไปยังไฟล์ component ที่แชร์กันซึ่ง host ไว้ที่ศูนย์กลาง เมื่อคุณเปิดไฟล์ Figma จะ fetch asset เหล่านั้น Server ทำงานแบบเดียวกัน — เป็นที่เก็บไฟล์กลางที่ browser ของคุณสามารถ fetch ได้

URL — ที่อยู่ของไฟล์

URL (Uniform Resource Locator) คือที่อยู่ บอก browser ของคุณว่าจะหาไฟล์ได้ที่ไหนกันแน่

flowchart LR
  URL["https://example.com/about/team.html"]
  URL --> Protocol["protocol: https://"]
  URL --> Domain["domain: example.com"]
  URL --> Path["path to the file: /about/team.html"]

The parts of a URL

Protocol (https://) — “ภาษา” ที่ browser และ server ใช้คุยกัน ตัว s หมายถึงการเชื่อมต่อที่เข้ารหัสแล้ว (ปลอดภัย)
Domain (example.com) — ชื่อของ server เหมือนที่อยู่บ้าน
Path (/about/team.html) — ไฟล์เฉพาะบน server นั้น เหมือนหมายเลขห้อง

Link — วิธีที่หน้าเว็บเชื่อมกัน

Link (<a> ใน HTML) คือ element ที่เมื่อคลิกแล้วจะบอก browser ให้ไป fetch URL อื่น นั่นคือทั้งหมดของเว็บ: ไฟล์ที่ชี้ไปยังไฟล์อื่น คำว่า “web” ใน World Wide Web หมายถึงเครือข่ายของลิงก์ที่เชื่อมต่อกันนี้

<p>This is a paragraph with a <a href="https://www.example.com">link to another page</a>.</p>
<p>Links are what connects all web pages together.</p>

ลอง hover ลิงก์ใน preview สังเกตว่า cursor เปลี่ยนไป นั่นคือ browser บอกคุณว่า “การคลิกที่นี่จะพาคุณไปที่อื่น” พฤติกรรมนี้ built-in อยู่ใน element <a> — คุณไม่ต้องเขียนโค้ดเองเลย

ข้อผิดพลาดที่นักออกแบบเจอบ่อย

ลืมว่า domain ต้องซื้อและต่ออายุทุกปี ไม่ใช่ของที่ได้มาตลอดชีวิต
คิดว่า URL path ไม่มีผลต่อการแชร์หรือ SEO
ลืมว่า server อาจ down หรือช้าได้ ไม่ใช่ทำงานตลอดเวลาแบบสมบูรณ์แบบ

มุมมองของ developer

👨‍💻 สิ่งที่ developer เห็นจริง ๆ

Designer เห็นแค่ “หน้าเว็บ” หนึ่งหน้า แต่ developer ต้องคิดถึง request/response, DNS lookup, ค่า hosting และ uptime ของ server ด้วย

💡 ตัวอย่างจากของจริง

Vercel และ Netlify คือ “server” ยุคใหม่ที่ deploy ไฟล์ให้อัตโนมัติทุกครั้งที่ push code Notion ตั้งค่า URL path ให้มีความหมายสำหรับทุกหน้า เพื่อให้แชร์ลิงก์ได้ง่าย