แอบดู ชาวบ้าน ว่าเขาใช้อะไร ทำเว็บ

เคยสงสัยกันไหมว่าเว็บนู่นเว็บนี่เขาใช้เทคโนโลยีอะไรกันในการสร้างเว็บ บางครั้งก็อยากทำได้แบบนี้บ้าง แต่ไม่รู้เขาใช้อะไรทำกัน วันนี้ขอเสนอวิธีง่ายๆ ในการดูหรือดมว่าเขาใช้อะไรทำเว็บกัน ด้วยซอฟต์แวร์ชื่อ Chrome Sniffer ซึ่งเป็นเอ็กซ์เทนชันสำหรับเว็บเบราว์เซอร์ โครม (Chrome) เท่านั้นนะครับ ใครยังไม่มีอาจดาวน์โหลดได้จาก http://www.google.com/chrome


ตัวอย่าง เว็บ การท่าเรือแห่งประเทศไทย http://www.port.co.th

เมื่อท่านติดตั้ง extension chrome sniffer แล้วเมื่อท่านเข้าเว็บใดๆก็ตาม ด้วย google chrome จะมีไอคอนปรากฏขวามือ ให้ท่านลองเอาเมาส์จิ้มๆ ก็จะบอกว่าเว็บใช้เทคโนโลยีไหนมาใช้งาน
เว็บการท่าเรือใช้ 3 ตัว และกำลัีงเพิ่มเทคโนโลยีใหม่ๆ
1.ใช้ google analytics เก็บสถิติ
2.ใช้จาวาสคริปต์ไลบรารี่ jquery และ jquery UI

ลองเอาไปเล่นดูครับ...

เว็บ thaimazda2.com

ใช้เพียบเลย
1.Prototype ไลบรารี่สคริป
2.Script.aculo ไลบรารี่สคริป
3.Jquery  ไลบรารี่จาวาสคริป
4.OpenX  จัดการโฆษณา
5.Piwik  ไม่ทราบ
6.SWFObject น่าจะเป็นแฟลช

ชื่อใดคือเทคโนโลยีใด ผมว่า copy ชื่อ paste ลง google search น่าจะได้ข้อมูลชัวร์สุด จัดไปครับอย่าช้า จะได้เอามาใช้กัน..

แถมการฝึกหมา http://www.expert2you.com/view_question2.php?q_id=16012

จัดอันดับ เว็บบราวเซอร์ ปี 2011

ส่วนตัวผมใช้ทั้ง 3 ตัว

ชอบความเรียบง่าย,ปลั๊กอิน,การพัฒนาที่กว้าง และ ความรวดเร็วในการโหลดภาพของ Google chrome

ชอบปลั๊กอิน และความรวดเร็ว ความง่าย ของ Firefox

ชอบความเข้ากันได้กับ web app ได้อย่างกว้างขวางของ Internet Explorer

^_^"

การสร้างมุมโค้งด้วย CSS3

เมื่อก่อนตอนอยากทำขอบโค้ง ๆ สวย ๆ ให้กรอบข้อความต้องก็ต้องทำโดยใช้ photoshop ทำเอา ซึ่งทำให้หน้าเว็บไซต์เราโหลดมากขึ้น เพราะมากชิ้นก็ใช้เวลาโหลดแต่ละชิ้น พอตอนมี CSS แล้วใช้แบบ div อะไรพวกนี้ก็ยังต้องเขียนโค้ด CSS สำหรับมุมโค้ง 4 ด้าน แล้วก็ต้องมาแก้ให้ใช้ได้ทุก Browser ซึ่งทำวิธีไหนก็เหนื่อยนั่นแหละ

พอดีไปเห็นขอบโค้ง ๆ ของชาวบ้านเขา แล้วก็แอบดูซอสโค้ดของเขาปรากฎว่าเขาไม่ได้ใช้รูปภาพทำ แต่เขาใช้ CSS ทำเอา เลยไปหาวิธีทำมาลองทำดูเองบ้าง แต่โค้ดนี้สามารถใช้ได้กับ Firefox,Chrome,Safari,Opera,ie9 ส่วน ie เวอร์ชั่นอื่น ๆ นั้นไม่สามารถใช้ได้

1.เริ่มด้วยสร้างขอบแบบธรรมดาขึ้นมาก่อนซึ่งจะใช้ความหนาเท่าไหร่ หรือขอบสีอะไรนั้นก็คิดขึ้นมาเองตามใจชอบได้เลย




2.เมื่อได้ขอบแล้วก็ให้ใส่เพิ่มโค้ดใน CSS แบบนี้

ซึ่งจะเห็นได้ว่ามันไม่เป็นโค้งเราต้องมาทำการใส่ prefix เพื่อให้ Browser รับรู้โค้ดที่เราเขียนโดย

-moz (เช่น -moz-border-radius) ทำให้โค้ดสามารถใช้งานได้ใน Firefox
-webkit (เช่น -webkit-border-radius) ทำให้โค้ดสามารถใช้งานได้ใน Safari และ Google Chrome

3.ใส่โค้ดดังกล่าวในข้อ 2 ลงใน CSS แบบนี้


-moz-border-radius:15px;
-webkit-border-radius:15px;

จะได้ผลลัพธ์ดังรูป



เมื่อเสร็จเราก็จะได้กรอบโค้งแบบที่ไม่ต้องใช้ photoshop ช่วย ลดเวลาไปได้เยอะ ถ้าอยากได้พื้นหลังแล้วให้ขอบโค้ง ๆ ก็สามารถทำได้เช่นกัน โดยกำหนดพื้นหลังเป็นสีที่เราต้องการ แล้วก็นำโค้ดขอบโค้งไปใส่

background:#D4F4AD;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;


ซึ่งจะได้ผลลัพธ์ตามรูป



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

-moz-border-radius-topleft:15px;
-moz-border-radius-bottomright:15px;
-moz-border-radius-topright:0;
-moz-border-radius-bottomleft:0;
-webkit-border-top-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
-webkit-border-top-right-radius:0;
-webkit-border-bottom-left-radius:0;


ได้ผลดังรูป



คราวนี้ลองมาทำเลียนแบบขอบโค้งในหน้าเว็บไซต์ Ofebia ดูบ้าง เอามาประยุกต์ดู ใช้ CSS หมดเลย ยกเว้นรูปภาพสัญลักษณ์

ของเดิม



ของใหม่ที่ใช้ Border Radius ทำเอา และประยุกต์อีกนิดหน่อย



ซึ่งจะเห็นได้ว่าคล้าย ๆ กัน ขาดเงาของพื้นหลัง ซึ่งคราวหน้าเราจะมาดูกันว่าใช้ CSS3 ทำเงาให้พื้นหลังได้ยังไง

แถมเว็บสร้างขอบมน online http://border-radius.com/

Credit : Ofebia