แทรก JSP file แบบไหนดี

เพื่อให้เว็บไซต์มีรูปแบบที่สอดคล้องกันทุกหน้า ส่วนใหญ่จะใช้วิธีกำหนดบริเวณที่ต้องแสดงผลเหมือนๆกัน เช่น ด้านบนของหน้า (header) ด้านล่างของหน้า (footer) หรือแถบข้อความด้านข้าง (sidebar) เป็นต้น แยกออกไปยังไฟล์ต่างหาก แล้วสั่งให้รวมเมื่อมีการเรียกใช้ (include file นั่นเอง)

ในเจเอ็สพี (JSP: Java Server Page) ทำได้ 2 วิธีด้วยกัน โดยการแทรกแถ็ก (tag) เข้าไปตรงจุดที่ต้องการจะแสดงผล ดังนี้

  1. รวมในขณะคอมไพล์ (translation time): <%@include file=”ชื่อไฟล์” %>
  2. รวมในการเรียกใช้แต่ละครั้ง (request time): มีด้วยกัน 2 วิธีย่อย คือ <jsp:include page=”ชื่อไฟล์” /> หรือใช้ เจเอ็สทีแอลคอร์ (JSTL: JSP Standard Tag Library – Core) <c:import url=”ชื่อไฟล์” /> ข้อแตกต่างของ 2 วิธีนี้คือ การใช้เจเอ็สทีแอลจะเป็นวิธีเดียวที่สามารถแทรกไฟล์ที่ไม่ได้อยู่ในเซิร์ฟเวอร์เดียวกันได้

ไม่มีข้อจำกัดการตั้งนามสกุลของไฟล์ที่ใช้แทรก แต่เพื่อป้องกันการมองเห็นซอร์สโค้ด การตั้งให้เป็นนามสกุลเจเอ็สพี (.jsp) ก็จะปลอดภัยที่สุด ในกรณีทั่วไปการใช้แบบที่ 1 ก็เพียงพอแล้ว

ทีนี้ก็น่าจะพอเลือกได้แล้วว่าจะแทรกไฟล์แบบไหนดี

สแลช (Slash)

Advertisements

ออกแบบเว็บไซต์อย่างไรให้ C.R.A.P.

ux-crap

ได้มีโอกาสอบรมคอร์สยูเอ๊กซ์ (UX: User Experience) 1 ในเนื้อหาสำคัญก็คือแนวทางการออกแบบเว็บไซต์หรือแอ๊พบนมือถือ (Mobile App) ว่า ทำให้แครพ (C.R.A.P.) เข้าไว้!

C.R.A.P. ในที่นี้ไม่ได้หมายถึงห่วยหรือแย่ แต่เป็นตัวย่อของแนวทางการออกแบบ 4 ข้อ

  • C (Contrast) ใช้ความโดดเด่นเพื่อดึงดูดผู้ใช้ให้มองเห็นสิ่งที่เป็นเป้าหมายหลักของเรา เช่น สีที่เด่นกว่า ขนาดใหญ่กว่า วางในตำแหน่งที่ดีกว่า
  • R (Repetition) จัดระเบียบส่วนต่างๆให้เป็นไปในแนวทางเดียวกัน ดูแล้วจะมีความเป็นมืออาชีพมากขึ้น และทำให้ผู้ใช้เรียนรู้ได้เร็วขึ้นเพียงใช้งานหน้าแรก (homepage) และสามารถนำไปใช้งานหน้าเว็บอื่นๆได้ง่าย เช่น อินสตาแกรม (Instagram) วางชื่อแอ๊คเค้าท์ด้านบน วางรูปตรงกลาง วางคอมเม้นต์ (comment) ด้านล่าง เหมือนๆกันในทุกรูป
  • A (Alignment) การจัดวางองค์ประกอบต่างๆ มีการจัดวางชิดซ้าย ขวา บน ล่าง ไปในแนวทางเดียวกัน เพื่อเพิ่มความสะดวกในการใช้งาน เช่น ผลการค้นหาจากกูเกิ้ล (Google) ชิดซ้าย โฆษณาอยู่ด้านขวา
  • P (Proximity) การจัดวางองค์ประกอบเพื่อให้มองเห็นความเชื่อมโยงกันของเนื้อหาหรือจัดหมวดหมู่ เพื่อความเข้าใจที่ง่ายขึ้นของผู้ใช้ เช่น การวางรูปภาพกับคำอธิบาย ไม่ควรห่างกันจนเกินไป จนทำให้รู้สึกว่าไม่เกี่ยวข้องกัน หรือการจัดหมวดหมู่โดยใช้การเยื้องซ้ายหรือขวา ก็จะทำให้เห็นว่าหัวข้อใดอยู่ภายใต้หมวดหมู่ใด

อย่างไรก็ตามการทดสอบโดยผู้ใช้งานตรงอย่างน้อย 1 คน ก็ยังดีกว่าการที่มโนภาพเอาเองว่าผู้ใช้ “น่าจะ” อยากได้ความสามารถนี้หรือนั้นจากเว็บไซต์ของเรา

รู้อย่างนี้แล้วมาทำเว็บหรือแอ๊พให้ “แครพ” กันเถอะ

สแลช (Slash)

ใช้บริการเว็บไหนเก็บซอร์สโค้ดส่วนตัวดี

31 ก.ค. 2558 เพิ่มเติมทางเลือกที่ 4 ซอร์สฟอร์จ ซึ่งปัจจุบันใช้เป็นที่เก็บโค้ดที่ทำส่วนตัวนอกเหนือจากโอเพ่นชิฟท์

เนื่องจากต้องการหาที่สำหรับเก็บซอร์สโค้ด (source code) ส่วนตัว เพื่อความสะดวกในการเข้าถึงจากหลายๆที่ และสามารถย้อนกลับไปดูประวัติการแก้ไขได้ จึงได้ทำการค้นหาเพื่อหาทางเลือก

ตอนนี้กิต (git) น่าจะเป็นคลังเก็บซอร์สโค้ด (VCS: Version Control System) ที่มาแรงที่สุด ด้วยความที่ระบบการจัดการเป็นแบบกระจายศูนย์ (distributed) ซึ่งยืดหยุ่นกว่าแบบเดิมๆ คือแบบรวมศูนย์อย่าง สับเวอร์ชั่น (subversion) หรือ ซีวีเอส (cvs) ที่เคยโด่งดังในอดีต เพราะเมื่อเครื่องศูนย์กลางเสียหาย สร้างใหม่ได้จากซอร์สโค้ดที่เก็บอยู่ และยังสามารถกระจายได้อย่างรวดเร็ว จึงเหมาะกับกลุ่มโอเพ่นซอร์ส (open source)

เมื่อเลือกจะใช้กิตเป็นคลังส่วนตัว (private repository) เท่าที่ค้นหามามีอยู่ 3 ทางเลือก

  1. กิตฮับ (github) ผู้โด่งดัง สมาชิกฟรีไม่สามารถสร้างคลังส่วนตัวได้ ต้องเสียเงินเท่านั้น
  2. บิตบั๊คเก้ต (bitbucket) สมาชิกฟรีสร้างคลังส่วนตัวได้ไม่จำกัดจำนวน แต่จำกัดคนใช้งานร่วมกันได้ 5 คนต่อ 1 คลัง
  3. ใช้บริการของโฮสติ้ง (hosting) หรือคลาวด์เซอร์วิส (cloud service) เช่น แอชเชอร์ (azure) ของไมโครซอฟต์ หรือ โอเพ่นชิฟท์ (openshift) ของเร้ดแฮต (redhat)
  4. ซอร์สฟอร์จ (sourceforge) สมาชิกสร้างได้ฟรีโดยเข้าไปที่โปรไฟล์ (Profile) และกดเพิ่มทูล (Add Tool) ในส่วนของทูลส่วนตัว (Personal Tools) จากนั้นเพิ่มกิต (Git)

เนื่องจากยังไม่ได้ทำงานร่วมกับใคร จึงใช้แบบที่ 3 โดยเลือกโอเพ่นชิฟท์ไปก่อน เพราะสะดวกที่สุด ใช้เพียงการสร้างเซเคียวเชลล์ เซอร์ติฟิเขต (secure shell certificate) และด้วยข้อดีของกิตจึงเอาไว้พุช (git push) ขึ้นบิตบั๊คเก้ตทีหลังก็ยังได้

เป็นความคิดเห็นส่วนตัวนะ หวังว่าไม่ได้ทำให้สาวกกิตฮับหรือบิตบั๊คเก้ตเคืองนะ ยังมีผู้ให้บริการอีกหลายค่ายที่ไม่ได้พูดถึงอีกเยอะเหมือนกัน

สแลช (slash)