เว็บสองจุดศูนย์ (Web 2.0)



ปรับปรุง : 2559-06-12 (ปรับป้าย)

Web 2.0

เว็บ 1.0
มีผู้เขียนรวมกลุ่มกันไม่กี่คนสร้างเว็บเพจที่มีเนื้อหาให้ข้อมูลแก่ผู้อ่านจำนวนมาก ทำให้ผู้อ่านได้รับข้อมูลข่าวสารจากเว็บเพจของผู้เขียนโดยตรง เช่น อโดบี้ให้ข้อมูลเรื่องการออกแบบกราฟิก ไมโครซอฟท์ให้ข้อมูลเรื่องวินโดว์ และซีเอ็นเอ็นให้ข้อมูลเรื่องข่าวสารบ้านเมือง
เว็บ 2.0
มีภาพว่า เว็บข้อมูลข่าวสารถูกทำให้แตกออกเป็น เนื้อหาขนาดเล็ก (Microcontent) ที่กระจายอยู่ตามเว็บไซต์ต่าง ๆ แล้วเอกสารเว็บแบบใหม่ก็แปรรูปเป็นมารวมกัน เสมือนเครือข่ายของข้อมูลข่าวสาร
ความหมายของเว็บสองจุดศูนย์ (Web 2.0)
เว็บ 2.0 คือ รูปแบบของเว็บไซต์รุ่นที่สอง ที่เน้นการนำเข้าเนื้อหาจากผู้เขียนที่หลากหลาย นำไปแสดงในเว็บไซต์ได้มากมาย เกิดเครือข่ายสังคม ด้วยรูปแบบที่ดูง่าย และน่าตื่นตาตื่นใจ
เว็บ 2.0 คือ การเปลี่ยนสภาพของเว็บ จากแค่ผลรวมของเว็บไซต์หลายๆ แห่ง มาเป็นโครงสร้างพื้นฐานทางคอมพิวเตอร์ที่ให้บริการซอฟต์แวร์ผ่านเว็บให้กับผู้ใช้ ผู้ที่เห็นด้วยกับแนวคิดนี้คาดว่าบริการต่างๆ บนเว็บ 2.0 จะมาแทนที่ซอฟต์แวร์แบบดั้งเดิมหลายๆ ประเภท
สรุปรูปแบบเว็บ 2.0
มี 6 รูปแบบที่ครอบคลุมการออกแบบเว็บ 2.0
1. การเขียนที่อยู่ภายใต้สัญลักษณ์ (เข้ามาตรฐาน XML)
2. บริการในรูป Web services (การส่งผ่านข้อมูลออกไป)
3. ผสมผสานสร้างเนื้อหาใหม่ (เกี่ยวกับเมื่อไร อะไร ไม่ใช้ใคร หรือทำไม)
4. กำหนดแนวทางในประเด็นที่เกี่ยวข้องได้ฉับไว (ผู้อ่านเป็นผู้ควบคุม)
5. เพิ่มเติมข้อมูลกำกับได้ตลอดเวลา (ชุมชนสร้างสังคมข่าวสาร)
6. ยกระดับการพัฒนาโปรแกรม (แยกโครงสร้างและรูปแบบ)
ข้อมูลจาก digital-web.com

แนะนำ 15 รูปแบบของเว็บ 2.0 (!webdesignfromscratch.com)
- 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

เมนูของโฮมเพจ เปรียบเสมือน หน้าต่างของโฮมเพจ

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

ตัวอย่าง 1. hunsa.com : scoop ได้ใช้หัวข้อข่าวเป็น large icon 65*65 ที่ใหญ่ชัดเจน ภาพที่ใช้ประกอบประเด็นข่าวเป็นภาพถ่าย สรุปประเด็นให้อย่างง่าย กระชับ สะท้อนรายละเอียด

การออกแบบโฮมเพจ (Homepage Design) จะต้องคำนึงถึงคำว่า เว็บ น่ะ รก เคยอ่านมาจาก faylicity.com เค้าให้ข้อคิดว่าเว็บเพจไม่คนมีอะไรบ้าง ทั้งหมด 18 ข้อ การมีสิ่งเหล่านั้นทำให้เว็บ ดู รก เลอะเทอะ และล้อกับคำว่า เว็บนรก หรือเว็บ-น่ะ-รก ข้อพิจารณามีดังนี้ 1) วูบวาบ 2) ไม่ชอบ new 3) เมายา 4) ป้ายโฆษณา 5) พี้นที่มีค่า 6) เบื้องหลังน่ารังเกียจ 7) ใช้สีไม่เป็น 8) ตัวเองเป็นใหญ่ 9) ตัวนับกินทราฟฟิก 10) ใหญ่ไม่แคร์ 11) ไม่มีคำอธิบายภาพ 12) ภาพแทนอักษร 13) วีนาทีละ KB 14) หมู หมา กา ไก่ 15) หน้ามารยาท 16) ขอโทษขอโพย 17) โรคจะไปไหนดี 18) ไม่มีรายละเอียดประกอบ link

ตัวอย่าง 2. Kapook.com
แสดงให้เห็นถึง การออกแบบ icon ที่ยกนูนขึ้นมา มีเงา ใช้สีโทนเดียว เรียบง่าย

ตัวอย่าง 3. Truelife.com
แสดงให้เห็นถึง การออกแบบ icons ได้สวยงาม ใช้สีหลากหลาย สะดุดตา

ตัวอย่าง 4. teenee.com
แสดงให้เห็นถึง การใช้ข้อความเป็นรายการให้เลือก

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

Web 1.0		Web 2.0
DoubleClick	- - >	Google AdSense ?
Ofoto ?	- - >	Flickr ?
Akamai ?	- - >	BitTorrent
mp3.com	- - >	Napster ?
Britannica Online ?	- - >	Wikipedia
personal websites	- - >	blogging
evite ?	- - >	upcoming.org (Event DB) ?
domain name speculation ?	- - >	search engine optimization
page views	- - >	cost per click
screen scraping ?	- - >	web services ?
publishing	- - >	participation
content management systems (CMS)	- - >	wikis
directories (taxonomy) ?	- - >	tagging (folksonomy) ?
stickiness	- - >	syndication ?

weBlog + บล็อก (Blog) คือ เว็บไซต์ประเภทหนึ่งที่ใช้สำหรับบันทึกบทความ คล้ายกับไดอารีของตนเองลงบนเว็บไซต์ ศัพท์เดิมคือ Web Log บางคนอ่านว่า We-Blog หรือ Web Log จนรวมคำเป็น บล็อก หรือ เว็บบล็อก ซึ่งเว็บบล็อกมีเนื้อหาหลายหลายไม่ว่าจะเป็นเรื่อราวทางการเมือง เศรษฐกิจ สังคม วัฒนธรรม กีฬา ภาพยนตร์ ดนตรี ธุรกิจ การศึกษา หรือเรื่องส่วนตัวที่ต้องการเปิดเผยแก่คนทั่วไปได้รับรู้ การสร้างเว็บบล็อกมีซอฟท์แวร์ช่วยในการบริหารจัดการ และมีเท็มเพลตให้เลือกหลากหลาย แล้วมีแนวโน้มจะเติมโตตลอดเวลาตามจำนวนผู้ใช้อินเทอร์เน็ตที่เพิ่มขึ้น [1]p.352

ปรับเว็บเพจให้รองรับ Pagespeed insightsของ google.com

เก็บรุ่นนี้ไว้ .. ตอนที่ทดสอบ Pagespeed กับคุณเอก
โดยผลการทดสอบเว็ฐเพจหน้านี้ ได้คะแนน 91/100 ในส่วนของ Speed แต่ส่วนของ User Experience ได้ 73/100 ตอนนั้น ก.ค.58 พบปัญหาสำคัญ 4 ข้อ คือ 1) ภาพที่เป็น .gif ไม่ได้ทำการ optimize ให้ขนาดแฟ้มลดลง แก้ไขได้ด้วยการสั่ง Decrease Color Depth 2) ภาพที่เป็น .jpg ไม่ได้ทำการลดขนาด ก็หาโปรแกรมลดความละเอียดลง ในเว็บไซต์ ไม่จำเป็นต้องละเอียดมากก็ได้ 3) เงื่อนไขของ Leverage browser caching ไม่รองรับภาพที่อยู่นอก folder 4) ถ้า include script จากภายนอก เช่น truehits.net หรือ google หรือ facebook ก็ไม่ต้องสนใจปัญหาเหล่านั้น เพราะเราไปทำอะไรที่นั่นไม่ได้

การกำหนด viewport ได้ออกแบบไว้ตาม code ข้างล่างนี้
.inViewport{width:320px;}
.outsideViewport{width:768px;}
@media only screen and (max-width:768px) {td{border-style:solid;}.outsideViewport{width:760px;}}
@media only screen and (min-width:321px) and (max-width:375px) {td{background-color:yellow;}}
@media only screen and (max-width:320px) {td{background-color:red;}}

เตือนเรื่อง Leverage browser caching #
คือ เว็บเพจคนใช้ image และ js ภายใน folder เพื่อให้ควบคุมได้
ถ้าไปเรียกมาจากข้างนอกก็จะเป็นเนื้อหาที่ควบคุมไม่ได้ทั้งคุณภาพและปริมาณ

ความแตกต่างของ id และ class

เรื่อง CSS : Cascading Style Sheets กลายเป็นข้อควรรู้ที่จำเป็นสำหรับนักพัฒนาเว็บไซต์อย่างหลีกเลี่ยงไม่ได้ ปัจจุบัน CSS มีถึงรุ่น 3 แล้ว ในการใช้งานจริงมักสร้าง CSS แบบ External style sheet เพราะแฟ้มอื่นเรียกใช้ได้ ส่วน Internal style sheet ก็จะเรียกใช้ได้เฉพาะในแฟ้มนั้น ส่วน Inline style ก็จะพิมพ์คำว่า style ต่อท้าย tag นั้นไปเลย ซึ่งตัวแปรหลัก 2 แบบที่กำหนดเองใน CSS มี 2 แบบคือ id กับ class
การกำหนด และการเรียกใช้ต่างกันไป ถ้าเป็น id จะขึ้นต้นด้วย # แต่เป็น class จะขึ้นต้นด้วย . ถ้าเรียกใช้ id จะใช้ properties name ว่า id ส่วนเรียกใช้ class จะใช้ properties name ว่า class
สิ่งที่แตกต่างกัน คือ id จะเรียกใช้ครั้งเดียว แต่ class เรียกใช้ได้หลายครั้ง ถ้าวางแผนอย่างใจเย็นก็จะใช้ประโยชน์จาก css ได้อย่างเต็มที่

style

#header {background:yellow;font-size:20px;} 
.title-text {color:red;} 
p.big { font-size:40px; }
span.small { font-size:10px; }
table, th, td { border: 1px solid black; }
.br1 {color:red;border: 2px} 
.br2 {font-size:20px;float:left;}
.br3 {color:blue;font-size:30px;float:left;}

body

<body id="header" class="title-text">
<span style="color:green;">hello</span>
<p class="big">my</p>
<span class="small">friend</span>
<span class="small">is tom.</span>
<table class="br1"><tr><td>one</td></tr></table>
<table class="br2"><tr><td>two</td></tr></table>
<table class="br3"><tr><td>three</td></tr></table>

บริการสร้าง block สำหรับ web 2.0 ที่ผมใช้รุ่น 3.1

เอกสารอ้างอิง [1] โอภาส เอี่ยมสิริวงศ์, "วิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ", บริษัท ซีเอ็ดยูเคชั่น จำกัด., กรุงเทพฯ, 2551.

http://goo.gl/72BPC