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

ปรับปรุง : 2559-07-12 (ปรับ css)

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

รูปแบบ web 2.0

รูปแบบของเว็บ 2.0 (webdesignfromscratch.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) : youtube.com ซีกขวามักเป็นของผู้สนับสนุน
6. เมนูบาร์ที่ทั้งคิง และควีน (Simple nav) : truelife.com มี top menu ได้น่าคลิ๊ปมาก
7. โลโก้บึก ๆ (Bold logos) : komchadluek.net มีโลโก้ของหนังสือพิมพ์เด่นชัด
8. ที่ใหญ่ก็ให้ใหญ่ (Bigger text) : wikipedia.org ตรงไหนเน้น ก็จะใหญ่กว่าเพื่อน ๆ
9. บทแนะ ส่วนนำต้องใหญ่กว่า (Bold text introductions) : bbk.co.uk ก่อนเข้ารายละเอียด ก็จะโปรยด้วยส่วนนำที่น่าสนใจ
10. สีต้องแข็งโป๊ก (Strong colours) : zdnet.com ใช้แดงกับน้ำเงิน
11. ยกพื้น (Rich surfaces) : kapook.com มีการยกพื้นหลายระดับ
12. ใช้สีไล่ระดับ (Gradients) : manager.co.th ไล่สีในส่วนของ header
13. สะท้อน (Reflections) : hunsa.com สะท้อนตัวอักษร ซึ่งเห็นน้อยลงแล้ว
14. สัญลักษณ์น่ารัก (Cute icons)
: yahoo.com มีรูปแทนความหมายที่ทำให้รู้สึกมีชีวิตชีวา
15. ดาวกระพริบ (Star flashes) : teenee.com มีหัวใจ กับ new ที่เคลื่อนไหวสะดุดตา

แนะนำเว็บ (Web Guide) เกี่ยวกับ Web 2.0
+ http://en.wikipedia.org
+ http://www.w3.org
+ http://www.web2summit.com
+ http://www.paulgraham.com
+ http://www.zdnet.com
+ http://www.wired.com
+ http://www.digital-web.com
+ http://en.wikipedia.org (สมมาตร)
+ http://www.oreillynet.com
+ http://tools.pingdom.com (Load time checker)

Smartphone Online Simulator Service
+ mobiletest.me
+ responsivepx.com
+ quirktools.com
+ responsivetest.net
+ ipadpeek.com

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

ปัจจุบัน กระแส 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
Thaiall-Blog sites : General Content + Blog ACLA + Lampang.net + Edu News + Nation.ac.th [Power by Wordpress]

ความต่างของ
id & class

addthis.com
ช่วยแชร์เว็บเพจ

สถิติ Blog rank
ใน truehits.net

ถึงยุคของ
responsive

ขนาดจอภาพ
ข้อมูลจาก truehits.net

Hiren บน USB

การเขียนเอกสารอ้างอิง

การเขียน X-Bar
ใน word

เกณฑ์ประเมิน
ความพึงพอใจ

ระบบและกลไก

รวมรายชื่องานวิจัย
ด้านการขายออนไลน์

หกสิบคาถาชีวิต
วิกรม กรมดิษฐ์

แต่ละรุ่นของ thaiall.com webpage เลขรุ่นของแต่ละเว็บเพจ จะอยู่ใน html script บรรทัดที่ 21 เพื่อให้ระบบอ่านไปทำรายการใน http://www.thaiall.com/update1.htm
รุ่น 4.0 - ใช้ header ป้ายน้ำเงิน เมนูบาร์ 6 ตัวเลือก Contents, KM, Articles, Members, Sponsors, About us และมี goo.gl เป็น short url อยู่ใต้ menu bar ด้านขวา และใช้ fieldset เป็นตัวหลักในการแสดงกล่องข้อความ และในส่วนของ footer ใช้ข้อความของ Albert Einstein มีตัวเลือก 5 หลัก และ 5 แถว
รุ่น 5.0 - ทดสอบกับ https://developers.google.com/speed/pagespeed แก้ปัญหา legible font sizes ปรับการกำหนด css ให้ถูกต้องไม่ตกกรอบ
รุ่น 6.0 - พัฒนาที่สำคัญ 2 เรื่องคือ แยก CSS ออกไปเป็น rsp6.css และเพิ่ม TOP Navigator แบบ Responsive

ปรับเว็บเพจให้รองรับ 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 ก็ไม่ต้องสนใจปัญหาเหล่านั้น เพราะเราไปทำอะไรที่นั่นไม่ได้
+ บริการ Pagespeed insights (UE=User Experience SP=Speed)
+ ทดสอบเว็บเพจ index_no_include.htm ได้ UE73/100 SP91/100
+ ทดสอบเว็บเพจ web2/index.html ได้ UE90/100 SP83/100
+ ทดสอบเว็บเพจ web2/index52.htm ได้ UE100/100 SP99/100

การกำหนด 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;}}
+ ทดสอบเว็บเพจ web2/viewport_inout.htm

เตือนเรื่อง 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 ได้อย่างเต็มที่ มีตัวอย่างที่ css_sample.htm และ การทำเมนู Responsive แบบ Top Nav หากจะทดสอบการปรับแต่ง css ทำได้ที่ w3schools.com

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.

"Imagination is more important than knowledge" - Albert Einstein

http://goo.gl/72BPC