Archive for the ‘ webdev ’ Category
ต่อจากโพส ใช้ฟอนต์ภาษาไทยสวยๆในเว็บด้วย CSS3 @font-face เห็นว่าหลายๆคนอาจจะมีปัญหาในการเลือกฟอนต์ที่นำไปใช้บนเว็บได้ ทั้งในเรื่องลิขสิทธิ์ของฟอนต์ รวมไปถึงการแปลงฟอนต์จากเว็บ Fontsquirrel ก็อาจจะมีปัญหาบ้าง เพราะตัวเครื่องมือที่ใช้ในการแปลงนั้นไม่มี Preset สำหรับแปลงฟอนต์ไทยไว้ให้ วันนี้เลยได้รวบรวม 13 ฟอนต์ฟรีมาตรฐาน จากสำนักงานส่งเสริมอุตสาหกรรมซอฟต์แวร์แห่งชาติ (SIPA) มาแปลงเป็นเว็บฟอนต์เพื่อให้ดาวน์โหลดไปใช้งานกันได้เลย วิธีการใช้งานก็แค่ดาวน์โหลดชุด Webfont ของฟอนต์ใดๆด้านล่าง และเมื่อแตกไฟล์ออกมาจะมีไฟล์ index.html ซึ่งภายในจะมีวิธีการติดตั้งฟอนต์ลงในเว็บไซต์ไว้เรียบร้อย ไฟล์ที่ให้ดาวน์โหลดนั้นเป็นชุดของไฟล์ฟอนต์ที่แปลงเป็น Webfont เรียบร้อยแล้ว สำหรับใช้งานในการทำเว็บไซต์เท่านั้น หากต้องการฟอนต์เพื่อติดตั้งลงในเครื่องคอมพิวเตอร์ สามารถดาวน์โหลดได้ที่เว็บ f0nt.com Related Entriesใช้ฟอนต์ภาษาไทยสวยๆในเว็บด้วย CSS3 @font-face[ READ MORE ]
นานมาแล้วที่เราชาวคนทำเว็บต้องทนใช้ฟอนต์ภาษาไทยในตระกูล Web Safe Font(MS Sans Serif, Tahoma, etc…) และถ้าอยากใช้ฟอนต์สวยๆก็ต้องจำใจทำตัวหนังสือให้เป็นรูปภาพ ซึ่งถึงจะใช้ได้แต่ก็มีข้อเสียมากมาย เช่น คอมพิวเตอร์อ่านไม่ออก ไม่รู้ว่าเป็นตัวหนังสือ ทำให้เว็บมีขนาดใหญ่ ใช้เวลาโหลดนานขึ้น ก๊อปปี้ตัวหนังสือไม่ได้ แก้ไขข้อความยาก ต้องเสียเวลาทำภาพใหม่ ฯลฯ แต่ข้อจำกัดเหล่านี้ก็กำลังจะหมดไป ด้วยคุณสมบัติใหม่ของ CSS3 @font-face ที่จะทำให้เราสามารถนำตัวฟอนต์สวยๆมาใส่ในเว็บไซต์ได้ และจะยังมคุณสมบัติเหมือนตัวหนังสือทั่วไปทุกประการ Related Entriesรวม 13 ฟอนต์ไทยแห่งชาติในรูปแบบ Webfont เพื่อใช้แสดงผลในเว็บไซต์[ READ MORE ]
นาฬิกาเข็มแสดงเวลาในหน่วยแมททริค เขียนด้วย CSS3 Transform และ Javascript อีกนิดหน่อย Mertic Time Clock Download (เฉพาะ Chrome, Firefox, Safari)[ READ MORE ]
สำหรับคนที่ทำเว็บและใช้เว็บก็คงจะคุ้นเคยกันดีกับหน้า sitemap ซึ่งโดยปกติก็จะเป็นหน้าที่รวบรวมลิงค์ไปยังทุกๆหน้ามาเรียงกันไว้อย่างมีระบบ สำหรับตัวเราเองเวลาทำเว็บแล้วก็จะทิ้งส่วนนี้ไว้เป็นส่วนสุดท้าย ซึ่งยอมรับเลยว่าบางครั้งไม่อยากทำเท่าไหร่ เพราะมันออกแนวน่าเบื่อและสำหรับหลายๆงานมันก็ไม่ได้อยู่ใน requirement ด้วยซ้ำ แต่ก็ต้องทำเพราะเป็นส่วนที่ควรจะทำ ซึ่งเวลาทำเข้าจริงๆแล้วก็ไม่พ้นต้องใช้ unordered list ไปเรื่อยๆ เหตุผลเพราะมันง่ายที่สุด แต่ผลลัพท์ที่ได้ออกมาก็ไม่ได้สวยงามเลยซักนิด วันนี้ก็เลยจะลองใช้ css เขียนดูบ้าง โดยอกแบบให้ใช้กับเว็บขนาดเล็กถึงกลาง กะว่าเขียนทิ้งไว้เลย งานไหนๆก็จะใช้ประมาณนี้ เปลี่ยนแค่สีอย่างเดียว พอลงมือทำโดยใช้ css2 แล้วก็พบว่ามันไม่พอที่จะทำรูปแบบโครงสร้างแบบ tree อย่างที่ตั้งใจไว้ เลยต้องตัดใจใช้ css3 ซึ่งส่วนที่สำคัญคือ pseudo-class selector แล้วก็จัดการกับ ie 6 ด้วย javascript hack นิดๆหน่อย ออกมาก็ได้หน้าตาประมาณนี้ โค้ทที่เขียนและรูปภาพที่ใช้ก็พยายามให้มีน้อยที่สุด ที่ไม่ชอบเลยคือ javascript hack แต่จริงๆแล้วเวลาใช้ก็ไม่ต้อง hack ก็ได้ เพราะถ้าไม่นับ ie6 แล้วก็ยังสามารถดู sitemap ในบราวเซอร์อื่นๆที่ไม่สนับสนุน css3 ได้ ได้อาจจะผิดเพี้ยนไปบ้างเท่านั้นเอง [ READ MORE ]
จากบล๊อคที่แล้ว ดึงข้อมูลจาก Google Analytic มาแสดงด้วย PHP ทำให้เกิดอยากเขียนสิ่งที่คนชอบให้เอามาไว้หน้าเว็บอีกอย่างหนึ่ง คือ Visible Stat หรือ Counter แบบเดิมๆที่เราเคยเห็นนั่นเอง ซึ่งโดยธรรมชาติของ google analytics นั้นเราไม่สามารถดึงจำนวนครั้งที่มีคนเข้าเว็บมาโชว์หน้าเว็บได้ แต่ด้วย Analytic Data Extract API ก็เลยทำให้มีวิธีดึงข้อมูลออกมาได้ เป็น counter แบบเชยๆที่คุ้นตาได้ ดังตัวอย่าง Related Entriesดึงข้อมูลจาก Google Analytic มาแสดงด้วย [ READ MORE ]
ปัญหามันเกิดจากบางครั้งเราทำเว็บให้คนที่ไม่ค่อยมีความรู้เรื่องคอม แล้วจะใช้ Google Analytic ในเว็บเขา ทีนี้ก็สมัคร Account ให้ เอาโค้ทมาใส่ให้ สอนให้ลอคอินเข้าไปดูสถิติในเว็บ google แต่ไม่นานก็จะเกิดงานเข้า เพราะเขาจำไม่ได้ว่าเข้าดูยังไง ภาษาอังกฤษใช้ไม่คล่อง ฯลฯ ก็เลยอยากจะเอาสถิติจาก GA มาไว้ในหน้าแรกของ backoffice เว็บเขาเลย จะได้ดูชัดๆ ง่ายๆ ก็เลยนั่งเขียน PHP class เพื่อติดต่อกับ Google Analytic Data Export API(จริงๆมันก็ยังอยู่ใน lab แต่พอใช้งานได้) และก็ใช้ Google Chart มาช่วยในการแสดงผล ได้ออกมา ดังนี้ Screenshot: Related Entriesแสดง Stat หน้าเว็บจาก Google Analytics[ READ MORE ]
ปรากฎการณ์ลึกลับที่เกิดขึ้นมากมายใน ie6 ทำให้คนทำเว็บอย่างเราๆต้องเสียเวลาไปมากในการมานั่งตามแก้ไข ซึ่งหนึ่งในปัญหาสำคัญที่เจอใน ie6 คือปัญหาที่เกี่ยวกับการใช้ float กรณีศึกษา “กล่องหล่น” ทดลองสร้างกล่อง 2 กล่อง กล่องละ 200px(รวมขอบแล้ว) อยู่ภายใต้กล่องขนาดใหญ่ขนาด 400px โดยให้ทั้งสองกล่อง float ไปทางซ้าย และกล่องแรกอยู่ห่างจากขอบด้านซ้าย 5 pixels เมื่อดูใน ie8(และบราวเซอร์อื่นๆ) จะได้ผลลัพท์ที่ถูกต้อง ดังนี้ แต่ถ้าดูใน ie6 หล่ะ? งานเข้าหล่ะสิ มันเกิดอะไรขึ้นเนี่ย กรอบขนาด 400 ใส่กล่องขนาด 200 สองชิ้น ก็รวมเป็น 400 พอดี แล้วทำไมมันตกลงมาได้ ???! ก่อนที่จะถอนหายใจเฮือกใหญ่แล้วเปลี่ยนใจกลับไปใช้ table ลองมาศึกษาปัญหาอย่างเป็นระบบ แล้วหาทางแก้ไขอย่างถูกต้อง(เท่าที่จะถูกได้ใน ie6) เพื่อชีวิตที่ดีกว่า[ READ MORE ]
จากคนเคยหากินกับ php มาเนิ่นนานจนจำไม่ได้แล้วว่าเริ่มเมื่อไหร่ แต่ด้วยความอยากรู้อยากเห็นเลยตั้งโจทย์กับตัวเองไว้ว่าโปรเจคส่วนตัวชิ้นต่อไปจะใช้ภาษาอื่นที่ไม่ใช่ php ซะบ้าง ก็เริ่มมองหาหลายๆตัวเลือก โดยพิจารณาจริงจังที่ python, ruby on rails และ java แล้วก็ลองศึกษาดูว่ามันยังไงกันบ้างนะ ลองอ่านลองเขียนอยู่นานสุดท้ายก็มาลงเอยที่ ruby on rails ด้วยเหตุผลหลายๆอย่างที่พอมาคิดๆดูก็ไม่ค่อยมีเหตุผลเท่าไหร่ แต่เอาหล่ะ rails ก็ rails[ READ MORE ]
จากโพสที่แล้ว php oop #1: panda class ว่าด้วยเรื่องการเขียน php oop แบบง่ายๆ แต่ดูไม่มีประโยชน์เท่าไหร่นัก เพราะถ้าดูดีๆมันก็ไม่ต่างจากเขียนฟังก์ชั่นเท่าไหร่ เลยมาว่าต่อถึงคุณสมบัติจริงๆของ object oriented บ้าง เริ่มต้นจากอย่างแรกก่อน คือคอนเซปต์การ encapsulation หรือขอเรียกง่ายๆว่า การห่อ ซึ่งก็เป็นเหมือนการซ่อนข้อมูลภายในคลาสไว้ไม่ให้สามารถเข้าถึงได้โดยตรงจากส่วนอื่นๆของโปรแกรม ลองดูโค้ทกันเลยน่าจะง่ายกว่านั่งอธิบายให้ยืดยาว class Panda{ private $name; function eat(){ echo "eating bamboo leaf"; } } ก็เล่นกันง่ายๆเลย คือเปลี่ยนตัวแปร name ให้เป็น private ซะ คราวนี้การเรียกถึงตัวแปรแบบตรงๆอย่างที่เห็นในตัวอย่างที่แล้วก็จะไม่สามารถทำได้อีกต่อไป แต่เมื่อต้องการเรียกใช้เราก็อาจจะเพิ่ม method เข้าไป เช่น function setName($pname){ $this->name=$pname; } function getName(){ return $this->name; } [ READ MORE ]
วิธีง่ายๆที่จะเปลี่ยนจากการเขียน html layout โดยใช้ตารางมาเป็น css/div layout สำหรับคนที่กำลังลังเลที่จะใช้ css แทนตารางแบบเดิมๆ ก่อนอื่นดูตารางก่อน โค้ทของตาราง This is Header Main Menu -Menu1 Content goes here! This is content! ดูแล้วก็ง่ายๆ ตามสไตล์ที่คุ้นเคย แต่ดูแล้วยุ่งยากใจพิลึก ทีนี้เราจะจับเจ้า layout ที่คุ้นเคยนี้แหละมาเขียนเป็น css[ READ MORE ]