Category Archives: ออกแบบเว็บไซต์

เรื่องราวเกี่ยวกับการออกแบบเว็บไซต์ เทคนิค ปัญหาและการแก้บัญหาจากประสบการณ์การออกแบบเว็บไซต์

15 May

การทำตัวนับอายุโดยการใส่วันเกิดและเวลา ด้วย javascript

เป็นการใช้ js ในการนับอายุโดยใส่ข้อมูล วัน เดือน ปี และ เวลาที่เกิด ลงไป และทำการคํานวณ ว่ามีอายุกี่ปี กี่วัน  เผื่อมีประโยชน์เอาไว้ใส่เว็บครับ

04 Apr

การใช้ php ดึงราคาน้ำมันจาก webservice ของ ptt

ในการทำเว็บที่อยากให้มีการติดราคาน้ำมันในเว็บนั้นวิธีที่ง่ายๆที่สุดคือ การติดแบบ iframe แต่ก็จะประสบปัญหากับความไม่เข้ากันของ design  เว็บกับราคาน้ำมัน  จะเป็นการดีกว่าถ้าเราดึงข้อมูลแบบ web service มากรองเองและใส่ desing ที่เราต้องการเอง โดยใช้ CODE ไม่กี่บรรทัด

01 Apr

การทำ Sprite ด้วย CSS

การทำ Sprite คือการทำ Animation จากรูปภาพหลายๆภาพเล่นต่อกันเพื่อให้เกินเป็นภาพเคลื่อนไหว ลองนึกภาพฟิมล์ภาพยนต์สมัยก่อนน่าจะพอนึกภาพออกครับ ซึ่งปัจจุบัน css เองสามารถทำ Animation เรี่ยงรูปแบบนี้ได้เองโดยไม่ต้องพึ่ง javascript ก็ได้

21 Feb

การทำเว็บแบบ Single Page เบื้องต้น ด้วย Jquery (javascript)

บทความสอนการทำเมนูสำหรับเว็บ Single Page  หรือ One Page เมื่อกดที่เมนูแล้ว animation ไปตามเนื้อหาที่เรากำหนด เว็บแบบนี้เหมาะสำหรับทำเป็นเว็บส่วนบุคคล แสดงผลงานหรือประวัติส่วนบุคคลหรือเว็บที่มีข้อมูลไม่มาก

25 Dec

การใช js face detect vdo

เนื่องจากเป็น app อย่าง snapchat , SNOW ซึ่งเป็นการใส่ลูกเล่นให้กับวีดีโอที่เราถ่าย  จึงเกิดความสงสัยว่าเขามีหลักการหรือวิธีการอย่างไร ในบทความนี้จะเป็นการทำแบบเบื้องต้น โดยการใช้ javascript + html canvas ครับ

13 Dec

การทำเมาส์สกอร์ เอฟเฟค ให้กับเว็บด้วย javascript

ในปัจจุบันการทำเว็บให้สวยงามนั้นสิ่งที่ขาดไม่ได้คือ animation หรือ effect เล็กๆน้อยๆเพื่อทำให้เว็บดูลื่นไหล บทความนี้จะสอนการทำ effect ให้กับเนื้อหาตอนสกอร์เมาส์ให้เนื้อหามีการ fade เข้ามา โดยใช้ jquery ไม่กี่บรรทัดครับ

23 Nov

การแปลงรูปภาพข้อความเป็นข้อความที่แก้ไขได (OCR ) ด้วย js

การอ่านตัวอักษรจากรูปภาพด้วย javascript library ชื่อว่า Tesseractjs ซึ่งสามารถอ่านได้ถึง 60 ภาษา (ทางผู้พัฒนาเขาคุยมาอย่างนั้นแต่เรื่องความแม่นยำอันนี้ต้องดูเอาแต่ละภาษาครับ)

04 Nov

การทำ Responsive ให้กับ table ที่มีข้อมูลหลายคอลั่มน์ด้วย css

ในการทำเว็บไซต์ให้เป็น responsive นั้นอีกหนึ่งปัญหาที่ค่อนข้างลำบากคือการทำให้ table grid ที่มีข้อมูลค่อนข้างมากหลายคอลั่มน์ยาวเกินหน้าจอสำหรับโมบายหรือหน้าจอเล็กก็เลยลองหาวิธีไปเจอมาหนึ่งวิธีที่ค่อนข้างดี โดยใช้ css เท่านั้น

27 Aug

สร้างรูปภาพ 360 ใช้ในเว็บไซต์ด้วย three.js

บทความการทำรูป 360 องศาแบบ facebook หรือ google street view เพื่อเอามาใช้ในเว็บไซต์ของเรา เช่นเว็บโรงแรมที่ต้องการให้ลูกค้าเห็นห้องและสถานที่ เพื่อให้เว็บมีลูกเล่นที่หน้าสนใจ พร้อม source และวิธีการถ่ายภาพ

02 Aug

การทำ LOGO 3D ในเว็บไซต์ ด้วย three.js

การทำ 3d ในบทความนี้จะใช้ library  three.js ซึ่งเจะ render โดยใช้ css3 และ webgl  ( web gl เป็น 3d Graphic Library ที่ติดมากับเว็บ browser