The Internet
MachineModule
01/04
MachineModule
01/04
THE VISIBLE WORLD
01FRONTEND
ทำไมเราถึงมองเห็นเว็บไซต์?
MODULE 01/04 · THE VISIBLE WORLD
ทำไมเราถึงมองเห็นเว็บไซต์?
FRONTEND
ทุกปุ่ม ทุกตัวอักษร และทุกสีที่คุณเห็นบนจอ ถูกประกอบขึ้นจากภาษาสามภาษาที่ทำงานคนละหน้าที่ เล่มนี้พาคุณแกะหน้าเว็บออกเป็นชิ้น แล้วประกอบกลับด้วยมือตัวเอง
อ่านจบแล้วคุณจะเข้าใจ
- HTML, CSS และ JavaScript ทำหน้าที่ต่างกันอย่างไร
- เบราว์เซอร์เปลี่ยนไฟล์ข้อความให้เป็นภาพบนจอได้อย่างไร
- ทำไมหน้าเว็บเดียวกันจึงพอดีทั้งมือถือและจอใหญ่
- หน้าเว็บ 'ฟัง' การกดของเราได้อย่างไร
โลกของเล่มนี้
โลกของรูปทรง สี และชิ้นส่วนบนหน้าจอ
เหมาะกับใคร
เริ่มได้เลยแม้ไม่เคยเห็นโค้ดมาก่อน
กำลังตรวจสิทธิ์
สารบัญ
7 บท
- 01หน้าเว็บสร้างจากวัตถุดิบสามอย่าง“ถ้าแกะหน้าเว็บออกมา ข้างในจะเจออะไร?”รู้จัก HTML ที่บอกว่าหน้าเว็บมีอะไร CSS ที่บอกว่าหน้าตาเป็นอย่างไร และ JavaScript ที่ทำให้หน้าเว็บตอบสนอง ผ่านการลงมือประกอบเว็บไซต์จริงหนึ่งหน้าห้องทดลอง 01: สนามทดลองหน้าเว็บอ่านฟรี · 18 นาที
- 02เบราว์เซอร์อ่านหน้าเว็บอย่างไร“ข้อความธรรมดาในไฟล์ กลายเป็นภาพบนจอได้อย่างไร?”ติดตามเส้นทางตั้งแต่ไฟล์ HTML มาถึงเครื่อง จนกลายเป็นต้นไม้ DOM และถูกวาดลงบนจอทีละพิกเซลกำลังตรวจสิทธิ์
- 03ทุกอย่างบนจอคือกล่อง“ทำไมนักออกแบบเว็บถึงมองทุกอย่างเป็นสี่เหลี่ยม?”Box Model ระยะขอบ ระยะใน และระบบจัดวาง Flexbox กับ Grid ที่ทำให้ชิ้นส่วนเรียงตัวอย่างมีระเบียบกำลังตรวจสิทธิ์
- 04จอเล็ก จอใหญ่ หน้าเว็บเดียว“หน้าเว็บรู้ได้อย่างไรว่าเรากำลังใช้มือถือ?”Responsive Design และ Media Query เทคนิคที่ทำให้หน้าเว็บเดียวพอดีกับทุกขนาดหน้าจอกำลังตรวจสิทธิ์
- 05หน้าเว็บที่ฟังเรา“เมื่อเรากดปุ่ม หน้าเว็บรู้ได้อย่างไร?”Event, DOM และ State กลไกที่ JavaScript ใช้รอฟังการกระทำของผู้ใช้แล้วเปลี่ยนหน้าจอตามกำลังตรวจสิทธิ์
- 06ตัวต่อของหน้าเว็บ“เว็บใหญ่ ๆ ที่มีเป็นพันหน้า สร้างให้เหมือนกันทุกหน้าได้อย่างไร?”แนวคิด Component และเหตุผลที่เครื่องมืออย่าง React ถูกสร้างขึ้นมากำลังตรวจสิทธิ์
- 07หน้าเว็บสำหรับทุกคน“คนที่มองไม่เห็นจอใช้เว็บไซต์ได้อย่างไร?”Accessibility และความเร็วของหน้าเว็บ สองเรื่องที่แยกเว็บที่ดีออกจากเว็บที่แค่สวยกำลังตรวจสิทธิ์
เล่มอื่นในชุดเดียวกัน
- 02 · BACKENDThe Internet
MachineModule
02/04THE HIDDEN ENGINE
02BACKENDเมื่อเรากดปุ่ม ใครเป็นคนทำงาน?
- 03 · DATABASEThe Internet
MachineModule
03/04THE MEMORY VAULT
03DATABASEเว็บไซต์จำเราได้อย่างไร?
- 04 · WEBSITE ONLINEThe Internet
MachineModule
04/04THE CONNECTED PLANET
04WEBSITE ONLINEเว็บไซต์เดินทางจากคอมพิวเตอร์ไปหาคนทั้งโลกได้อย่างไร?