วิธีการตั้งค่า CNAME และ TXT เพื่อ Verification กับ Google Site

Google Site เป็บบริการหนึ่งของ Google ซึ่งให้เราสร้างเว็บไซต์ได้อย่างง่ายๆ เหมาะสำหรับการงานที่ต้องการความรวดเร็วในการสร้าง และสามารถประสานกับเครื่องมือต่างๆของ Google ได้มากมาย เช่น จะสร้างแบบฟอร์มรับสมัครเข้าร่วมโครงการ, ทำรายงานผู้ที่ชำระเงินแล้ว, ผนวกกับ Google Map เพื่อแสดงตำแหน่งที่จัดงาน และสถานที่ท่องเที่ยว หรือ อื่นๆอีกมากมาย (วิธีการสร้าง จะกล่าวในบทความต่อๆไป)  ในบทความนี้ เป็นการสร้าง เว็บไซต์ของงาน ประชุมสภาข้าราชการ พนักงานและลูกจ้างแห่งประเทศ (ปขมท) ๒๕๕๗ และเน้นที่ การเชื่อม Domain Name ของมหาวิทยาลัย ซึ่งใช้ Bind DNS เข้ากับ Google Site โดย Google Site ที่แสดงในตัวอย่าง สร้างที่ https://sites.google.com/site/cuast57/ ซึ่ง ชื่อจะจำได้ยาก จึงขอใช้ Domain Name สั้นๆชื่อ cuast57.psu.ac.th วิธีการมีดังนี้ 1. ไปที่ Setting > Manage Site 2. คลิกที่ Web Address แล้วใส่ cuast57.psu.ac.th จากนั้นคลิกปุ่ม Add 3. จะขึ้น error ด้านบน “You have not verfified domain ownership with Google. please follow these instructions” ให้คลิกที่ “these instructions”  4. เลื่อนลงไปล่าสุดของหน้าจอ คลิกที่ “Webmaster Tools home page” (สมมุติว่าท่านเคยใช้งาน Google Webmaster Tools อยู่แล้ว) 5. คลิกที่ Add A Site ให้ใส่ Domain Name ที่ต้องการ ในที่นี้คือ cuast57.psu.ac.th แล้วคลิก Continue 6. คลิกที่ Alternate Methods > Domain name provider แล้วเลือก อันล่างสุด คือ other เพราะ Google Site ไม่เปิดให้เรา Upload File ขึ้นไป, ไม่สามารถแก้ไข Header หรืออะไรทำนองนั้นได้ จึงต้องใช้วิธีการนี้ ซึ่งจะต้องอธิบายตรงนี้เพื่อความเข้าใจ  ในการที่เราคุม Domain Name แต่ใช้ Google Site นั้น สิ่งที่ต้องทำคือ สร้าง CNAME ไปยัง Google Site และ ทำการ Verification 6.1 สร้าง CNAME ไปยัง ghs.googlehosted.com. เพื่อบอกว่า cuast57.psu.ac.th จะใช้บริการของ Google Site 6.2 ต้องทำการ Verification โดยสามารถทำได้ 2 วิธีคือ 1) ถ้าเราได้ Delegate Zone มา ก็จะสามารถใส่ TXT Record ลงไปได้ โดยใช้ค่าดังภาพ  2) แต่ถ้าเราไม่ได้ Delegate Zone ก็จะต้องสร้าง CNAME ให้คลิกที่ “Add a CNAME record” ดังภาพ ให้เลือกวิธีการเอา แต่ในตัวอย่างนี้ เลือกวิธีการ 2) เพราะไม่ Delegate Zone มา และไปทำข้อ 7. ก่อน แล้วจึงกลับมาคลิกปุ่ม Verify

Read More »

Short Note on Workshop “Web Application Development Workflow”

ผมชวนเพื่อนๆ CoP PSU IT ซึ่งเป็นรุ่นน้องชื่อคุณราชศักดิ์ บูรณะพาณิชย์กิจ และพัฒนาวดี ศิวติณฑุโก อยู่ที่คณะวิศวกรรมศาสตร์ มาจัด Workshop ใช้เวลา 1 วัน เรื่อง Web Application Development Workflow วิทยากรเตรียม slide ที่นี้ครับ http://bratchasak.github.io/slide/ คร่าวๆ คือ แนะว่า Web Application Development Workflow คืออะไร อธิบายว่าขั้นตอนของการพัฒนาและเครื่องมือที่ใช้ในการทำงาน ก็คือ Chrome Browser และ Sublime Text และติดตั้งโปรแกรม Git ใช้งานแบบ command line และ github for Windows แบบ GUI และสมัครบริการที่จำเป็นต้องใช้ก็คือ GitHub web เครื่องมือทั้งหมดนี้ก็จะสร้างระบบ Version control สำหรับการพัฒนาด้วย Git ได้แล้ว การเตรียมเครื่องมือสำหรับทำงาน 1.เกี่ยวกับ Chrome Browser (google chrome) ต้องลงชื่อเข้าใช้ google เพื่อทำงานได้ครบทุก Feature เข้าเว็บหน้านี้ https://www.google.com/intl/th/chrome/browser/ จะเห็นตัวอย่างชัดๆในการตรวจสอบด้วย Developper Tools เปิดหน้าต่าง Developper Tool ด้วย Ctrl+Shift+i คลิกเลือกไอคอน แว่นขยาย เพื่อส่องดูโค้ดได้ นอกจากนี้ก็มีแท็บน่าสนใจคือ แท็บ Console สำหรับ debug และ แท็บ Network สำหรับดู latency load time เปิดดูการทำงาน เมนูที่ใช้ใน workshop คือ คลิกปุ่มกำหนดค่าและควบคุม (มุมบนขวา) > เครื่องมือ > ตัวจัดการงาน ติดตั้งส่วนขยาย LiveReload www.google.com > search คำว่า livereload > เลือก Chrome Web Store – LiveReload คลิกปุ่มกำหนดค่าและควบคุม (มุมบนขวา) > เครื่องมือ > ส่วนขยาย > เลือกตัวเลือก อนุญาตให้เข้าถึงไฟล์ URL 2. ติดตั้งโปรแกรม Sublime Text 3 for Windows www.google.com > search คำว่า sublime เลือกเวอร์ชั่นให้ตรงกับ Windows OS ที่ใช้ ตาม slide หน้านี้ http://bratchasak.github.io/slide/#sublimetext_package ติดตั้ง package เพิ่มลงใน Sublime กดแป้น Ctrl+Shift+p > search คำว่า package > เลือก Package Control: Install Package > search คำว่า emmet > คลิกเลือก emmet > search คำว่า livereload > คลิกเลือก LiveReload > search คำว่า syntax คลิกเลือก Syntax Manager ต่อมา วิทยากรอธิบาย Software configuration management ว่ามี 3 model คือ Local data model, Client-server model และ Distributed

Read More »

แนวทางการแก้ปัญหาความขัดแย้ง (Conflict) ระหว่างปลั๊กอิน JS

ปัจจุบันมีปลั๊กอิน (Plug-in)  จาวาสคริปมากมาย ที่ช่วยให้การพัฒนาเว็บแอพพลิเคชั่นเป็นไปอย่างสะดวกรวดเร็วและง่ายดาย สามารถสร้างลูกเล่นและความสามารถต่างๆ โดยที่ไม่จำเป็นต้องลงแรงเขียนโค้ด ทำให้ประหยัดเวลาการทำงานได้อย่างมาก เฟรมเวิร์ก (Framework) จาวาสคริปที่ได้รับความนิยมอันดับหนึ่งอย่าง Jquery ที่มีปลั๊กอินให้เลือกใช้อย่างมากมายที่เป็นนิยมกันมากและถูกใช้เฟรมเวิร์กพื้นฐานในการพัฒนาเว็บแอพพลิเคชั่นเป็นส่วนใหญ่ แต่หากเรามีความจำเป็นต้องใช้ร่วมกับเฟรมเวิร์กตัวอื่นๆ อาจทำให้เกิดปัญหาความขัดแย้งการทำงาน (Conflict) ระหว่างเฟรมเวิร์กหรือปลั๊กอินได้ สาเหตุหลักที่ทำให้เกิดความขัดแย้งคือ การที่ชื่อตัวแปรหรือฟังก์ชัน ในโค้ดโปรแกรมระหว่างปลั๊กอินซ้ำและเหมือนกัน ทำให้โปรแกรมเกิดความสับสนและทำให้ปลั๊กอินไม่ทำงาน วิธีการแก้ไขคือเข้าไปไล่โค้คเพื่อเปลี่ยนชื่อตัวแปรใหม่ หรือเลือกใช้ปลั๊กอินตัวใดตัวหนึ่งเท่าที่จำเป็นที่สุด หากมีความจำเป็นต้องใช้เฟรมเวิร์กหรือปลั๊กอินจากหลายๆ ค่ายอย่างหลีกเลี่ยงไม่ได้แล้วจริงๆ ผมก็ลองค้นหาวิธีการที่เป็นสูตรสำเร็จแล้วไม่พบว่ามีวิธีการที่ใช้ได้อย่างชัดเจน หากผู้อ่านท่านทราบวิธีการที่ดีกว่านี้ก็แลกเปลี่ยนกันได้ครับ ซึ่งจากประสบการณ์ที่ใช้อยู่ก็มีวิธีการเบื้องต้นที่ได้กล่าวไปแล้วและมีอีกวิธีการเลือกหนึ่งคือ การคัดกรองให้ใช้น้อยที่สุด (Customize) โดยก่อนที่จะดาวน์โหลดปลั๊กอินมาใช้ ซึ่งปลั๊กอินส่วนใหญ่จะมีเมนุที่ชื่อ JavaScript components ให้เลือก เทคนิคก็คือเลือกเอาออกให้หมด แล้วคลิกเลือกเฉพาะเท่าที่จำเป็นต้องใช้เท่านั้น ซึ่งเราจะทราบได้โดยการนั่งไล่ชื่อ JavaScript components ระหว่างทั้งสองเฟรมเวิร์กโดยให้ยึดเฟรมเวิร์กตัวใดตัวหนึ่งไว้เป็นตัวทำงานหลัก ยกตัวอย่างที่ผมเคยใช้คือ Jquery Easy UI กับ  Bootstrap ผมจะยึด Jquery Easy UI เป็นตัวทำงานหลัก และปิดการทำงาน JavaScript components ของ Bootstrap  จากหน้าลิงค์นี้ (Customize and download) โดยเอาออกทุกตัวและเลือกกลับเข้าไปใหม่ที่คิดว่าจะทำไม่ให้เกิด Conflict (จุดสังเกตคือชื่อฟังก์ชัน) หวังว่าเทคนิคเล็กๆ น้อยๆ จะช่วยแก้ไขปัญหาการ Conflict ให้กับเหล่า web dev ได้บ้างนะครับ สวัสดี ^^

Read More »

แนวโน้มในการพัฒนาเว็บแอพพลิเคชั่นในปี 2014

จากบทสัมภาษณ์ Wyke-Smith ซีอีโอของ @BublishMe ได้กล่าวถึงแนวโน้มในการพัฒนาและการออกแบบเว็บแอพพลิเคชั่นในปี 2014 ไว้ดังนี้ :- การเชื่อมโยงและแลกเปลี่ยนข้อมูลระหว่างเว็บแอพพลิเคชั่น จะติดต่อสื่อสารกับแบบสองทาง (two-way binding) กันมากขั้น แนวโน้มการพัฒนา ที่จะช่วยให้เราประหยัดทั้งเวลาและเงินในกระเป๋า เฟรมเวิร์กที่ใช้พัฒนาบนส่วนการทำงานของเบื้องหน้าโปรแกรม (Front-End) ที่นิยมใช้กันได้แก่ NodeJS. AngularJS, Ember และ Backbone ฐานข้อมูลแบบ JSON จะได้รับความนิยมมากขึ้น เป็นการย้ายฐานข้อมูลแบบ SQL ไปเป็นในรูปแบบของ JSON ส่วนกลางการทำงานของโปรแกรม (Middleware) จะใช้ JavaScript การใช้ประโยชน์ของแฟรมเวิร์ก Angular จะเป็นทั้งการพัฒนาและการออกแบบเว็บ บทบาทหน้าที่ความรับผิดชอบและทักษะความรู้ความสามารถของนักพัฒนาเว็บกับนักออกแบบเว็บไซต์จะเหมือนกัน สามารถอ่านรายละเอียดแต่ละเทคโนโลยีจากแหล่งที่มาครับ Cr: Web Professional Trends 2014

Read More »