ข้ามไปยังเนื้อหา
THE INTERNET MACHINE
The Internet
Machine
Module
01/04

THE VISIBLE WORLD

01FRONTEND

ทำไมเราถึงมองเห็นเว็บไซต์?

MODULE 01/04 · THE VISIBLE WORLD

ทำไมเราถึงมองเห็นเว็บไซต์?

FRONTEND

ทุกปุ่ม ทุกตัวอักษร และทุกสีที่คุณเห็นบนจอ ถูกประกอบขึ้นจากภาษาสามภาษาที่ทำงานคนละหน้าที่ เล่มนี้พาคุณแกะหน้าเว็บออกเป็นชิ้น แล้วประกอบกลับด้วยมือตัวเอง

อ่านจบแล้วคุณจะเข้าใจ

  • HTML, CSS และ JavaScript ทำหน้าที่ต่างกันอย่างไร
  • เบราว์เซอร์เปลี่ยนไฟล์ข้อความให้เป็นภาพบนจอได้อย่างไร
  • ทำไมหน้าเว็บเดียวกันจึงพอดีทั้งมือถือและจอใหญ่
  • หน้าเว็บ 'ฟัง' การกดของเราได้อย่างไร

โลกของเล่มนี้

โลกของรูปทรง สี และชิ้นส่วนบนหน้าจอ

เหมาะกับใคร

เริ่มได้เลยแม้ไม่เคยเห็นโค้ดมาก่อน

กำลังตรวจสิทธิ์

สารบัญ

7 บท

  1. 01หน้าเว็บสร้างจากวัตถุดิบสามอย่าง“ถ้าแกะหน้าเว็บออกมา ข้างในจะเจออะไร?”รู้จัก HTML ที่บอกว่าหน้าเว็บมีอะไร CSS ที่บอกว่าหน้าตาเป็นอย่างไร และ JavaScript ที่ทำให้หน้าเว็บตอบสนอง ผ่านการลงมือประกอบเว็บไซต์จริงหนึ่งหน้าห้องทดลอง 01: สนามทดลองหน้าเว็บอ่านฟรี · 18 นาที
  2. 02เบราว์เซอร์อ่านหน้าเว็บอย่างไร“ข้อความธรรมดาในไฟล์ กลายเป็นภาพบนจอได้อย่างไร?”ติดตามเส้นทางตั้งแต่ไฟล์ HTML มาถึงเครื่อง จนกลายเป็นต้นไม้ DOM และถูกวาดลงบนจอทีละพิกเซลกำลังตรวจสิทธิ์
  3. 03ทุกอย่างบนจอคือกล่อง“ทำไมนักออกแบบเว็บถึงมองทุกอย่างเป็นสี่เหลี่ยม?”Box Model ระยะขอบ ระยะใน และระบบจัดวาง Flexbox กับ Grid ที่ทำให้ชิ้นส่วนเรียงตัวอย่างมีระเบียบกำลังตรวจสิทธิ์
  4. 04จอเล็ก จอใหญ่ หน้าเว็บเดียว“หน้าเว็บรู้ได้อย่างไรว่าเรากำลังใช้มือถือ?”Responsive Design และ Media Query เทคนิคที่ทำให้หน้าเว็บเดียวพอดีกับทุกขนาดหน้าจอกำลังตรวจสิทธิ์
  5. 05หน้าเว็บที่ฟังเรา“เมื่อเรากดปุ่ม หน้าเว็บรู้ได้อย่างไร?”Event, DOM และ State กลไกที่ JavaScript ใช้รอฟังการกระทำของผู้ใช้แล้วเปลี่ยนหน้าจอตามกำลังตรวจสิทธิ์
  6. 06ตัวต่อของหน้าเว็บ“เว็บใหญ่ ๆ ที่มีเป็นพันหน้า สร้างให้เหมือนกันทุกหน้าได้อย่างไร?”แนวคิด Component และเหตุผลที่เครื่องมืออย่าง React ถูกสร้างขึ้นมากำลังตรวจสิทธิ์
  7. 07หน้าเว็บสำหรับทุกคน“คนที่มองไม่เห็นจอใช้เว็บไซต์ได้อย่างไร?”Accessibility และความเร็วของหน้าเว็บ สองเรื่องที่แยกเว็บที่ดีออกจากเว็บที่แค่สวยกำลังตรวจสิทธิ์