ปรับปรุง : 2567-11-03 (ปรับ pagespeed)

compare web 2.0 และ 1.0

รูปแบบเว็บเพจต้นแบบ

รูปแบบเว็บเพจต้นแบบ หรือ ร่างโฮมเพจ หรือ เทมเพจ คือ เว็บเพจต้นแบบที่ถูกออกแบบทั้งโครงสร้างและระบบ ซึ่งมีหลายระบบให้เลือกใช้ เช่น เวิร์ดเพรส หรือ หลักการของเว็บ 2.0 คือ รูปแบบของเว็บไซต์รุ่นที่สอง ที่เน้นการนำเข้าเนื้อหาจากผู้เขียนที่หลากหลาย นำไปแสดงในเว็บไซต์ได้มากมาย เกิดเครือข่ายสังคม มีรูปแบบที่ดูง่ายน่าตื่นตาตื่นใจ

SEO | Responsive | Bootstrap | Full01 | index100* | คำสำคัญ (Key)

1. รุ่นของเว็บ: 1.0, 2.0, 3.0

Web 1.0 (อดีต)
เนื้อหาอาจเกิดจากผู้เขียนคนเดียว หรือรวมกลุ่มกันสร้างแหล่งเผยแพร่ (Content owner) ให้ข้อมูล แล้วผู้อ่านจะได้รับข้อมูลข่าวสารจากเจ้าของข้อมูลโดยตรง เช่น อโดบี้ให้ข้อมูลเรื่องกราฟิก ไมโครซอฟท์ให้ข้อมูลเรื่องระบบปฏิบัติการ และซีเอ็นเอ็นให้ข้อมูลเรื่องข่าวสารบ้านเมือง
Web 2.0 (ปัจจุบัน)
เนื้อหามาจากทั่วสารทิศและอาจแตกได้เป็น เนื้อหาขนาดเล็ก (Micro content) ที่กระจายอยู่ตามที่ต่าง ๆ มารวมกันในรูปแบบใหม่ เสมือนเครือข่ายของข้อมูลข่าวสาร
ความหมายของ Web 2.0
เว็บ 2.0 คือ รูปแบบของเว็บไซต์รุ่นที่สอง ที่เน้นการนำเข้าเนื้อหาจากผู้เขียนที่หลากหลาย นำไปแสดงในเว็บไซต์ได้มากมาย เกิดเครือข่ายสังคม มีรูปแบบที่ดูง่ายน่าตื่นตาตื่นใจ
เว็บ 2.0 คือ การเปลี่ยนสภาพของเว็บไซต์ จากแค่ผลรวมของเว็บไซต์หลายแหล่ง มาเป็นโครงสร้างพื้นฐานทางคอมพิวเตอร์ที่ให้บริการซอฟต์แวร์ผ่านเว็บให้กับผู้ใช้ ผู้ที่เห็นด้วยกับแนวคิดนี้คาดว่าบริการต่าง ๆ บนเว็บ 2.0 จะมาแทนที่ซอฟต์แวร์แบบดั้งเดิม
เทมเพจ (Template)
เทมเพจ คือ เว็บเพจต้นแบบที่ถูกออกแบบทั้งโครงสร้าง ภาพ และเนื้อหา มักประกอบด้วยแฟ้มภาพ ตัวอย่างเนื้อหา และรหัสภาษาเอชทีเอ็มแอลที่สามารถนำไปแก้ไขได้ บางครั้งจะมีแฟ้ม .psd ซึ่งมีภาพต้นฉบับให้สามารถแก้ไขได้ด้วยโปรแกรม Photoshop, Imageready หรือ Firework

promoterank 100 * 67

web2 100 * 100

2. แนะนำ 15 รูปแบบ web 2.0

♥ แนะนำ 15 รูปแบบ web 2.0

Simplicity, Central layout, Fewer columns, Separate top section, Solid areas of screen real-estate, Simple nav, Bold logos, Bigger text, Bold text introductions, Strong colours, Rich surfaces, Gradients, Reflections, Cute icons, Star flashes

อ่านเรื่องน้อง ป.6 ใน Medium.com
น้อง Kittichai Mala-in FramyFollow เล่าในเวทีของตนที่ medium.com แชร์เรื่องตอนเรียนประถม ที่ โรงเรียนบ้านง่อนหนองพะเนาว์มิตรภาพที่ 126 สมัย ป.3 ทำ root Smartphone ของ True ผ่าน King Root พอขึ้น ป.4 กับ ป.5 สร้างเกมด้วย RPG Maker VX เดี๋ยวนี้ ป.6 สนใจ Dream Weaver CS5 กับ CSS ได้ความรู้เยอะเลยจาก Thaicreate
ประเด็นที่น่าสนใจ คือ "น้องเค้าไปแข่งมา 2 ปีติดต่อกัน แต่มีน้อง ป.4 กับ ป.5 ที่เก่งกว่าเค้า"

หัวข้อ (Topics)

♦ รูปแบบ Web 2.0 มี 15 ลักษณะ

♦ 5 ฟอนต์ที่น่าสนใจใน Web 2.0

♦ เปรียบเทียบยุค 1.0 กับ 2.0

การสร้างโปสเตอร์ 8 นิ้ว * 18 นิ้ว

3. รูปแบบ Web 2.0 มี 15 ลักษณะ

yahoo webp 30 / 10

140px*140px
+ Contrast
+ Sharp
Quality: 25

รูปแบบของเว็บ 2.0 (Web design from Scratch.com)
1. เรียบง่าย อย่าให้งง (Simplicity) : Google.com เรียบโล่ง ดูสะอาด
2. มีแม่แบบสำหรับทั้งไซต์ (Central layout) : Facebook.com ทั้งไซต์มีรูปแบบเดียวกัน
3. คอลัมน์สอง หรือสามพอแล้ว (Fewer columns) : Gmail.com มี 2 คอลัมน์เองครับ
4. หัวเป็นหัว ตัวต่างหาก (Separate top section) : Cnn.com หัวแดงมาเลย ที่เหลือขาว
5. พื้นที่ถูกจองของขาประจำ (Solid areas of screen real-estate) : Gotoknow.org พื้นที่สำหรับผู้สนับสนุน
6. เมนูบาร์ที่ทั้งคิง และควีน (Simple nav) : Adobe มี Top menu และ Submenu
7. โลโก้บึก ๆ (Bold logos) : เบียร์สิงห์ แบรนด์ต้องมาก่อน
8. ที่ใหญ่ก็ให้ใหญ่ (Bigger text) : Wikipedia.org ตรงไหนเน้น ก็จะใหญ่กว่าเพื่อน
9. บทแนะ ส่วนนำต้องใหญ่ (Bold text introductions) : Bbc.com ชวนอ่านก่อนคลิกเปิด
10. สีต้องแข็งโป๊ก (Strong colours) : Zdnet.com สีตัดกันชัดเจน
11. ยกพื้น (Rich surfaces) : Dashboard มีการยกพื้นหลายระดับ
12. ใช้สีไล่ระดับ (Gradients) : Manager.co.th ไล่สีในส่วนของ header
13. สะท้อน (Reflections) : Shadow menu เงาสะท้อน
14. สัญลักษณ์น่ารัก (Cute icons) : Yahoo.com มีรูปแทนความหมายที่ทำให้รู้สึกมีชีวิตชีวา
15. ดาวกระพริบ (Star flashes) : Teenee.com มีหัวใจ กับ new ที่เคลื่อนไหวสะดุดตา
สรุปรูปแบบเว็บ 2.0
มี 6 รูปแบบที่ครอบคลุมการออกแบบเว็บ 2.0
1. การเขียนที่อยู่ภายใต้สัญลักษณ์ (เข้ามาตรฐาน XML)
2. บริการในรูป Web services (การส่งผ่านข้อมูลออกไป)
3. ผสมผสานสร้างเนื้อหาใหม่ (เกี่ยวกับเมื่อไร อะไร ไม่ใช่ใคร หรือทำไม)
4. กำหนดแนวทางในประเด็นที่เกี่ยวข้องได้เร็ว (ผู้อ่านเป็นผู้ควบคุม)
5. เพิ่มเติมข้อมูลได้ตลอดเวลา (ชุมชนสร้างสังคมข่าวสาร)
6. ยกระดับการพัฒนาโปรแกรม (แยกโครงสร้าง และรูปแบบ)
☘ digital-web.com

"ไม่เริ่มต้นในวันนี้ จะไม่มีทางสำเร็จในวันพรุ่ง" โดย โยฮัน ว็อล์ฟกัง ฟ็อน เกอเทอ