ภาพแสดงลำดับชั้น

เข้าใจโครงสร้าง Google Analytic แล้วจะใช้งานได้อย่างมีประโยชน์สูงสุด

Share the joy
  •  
  •  
  •  
  •  
  •  

ครั้งที่ผมเริ่มใช้งาน Google Analytic ครั้งแรก ผมก็ต้องพบกับความสับสนกับโครงสร้าง(hierarchical) Account ของมันมาก “ทำไมมันมีลำดับชั้นอะไรนักนักหนา ทำไมไม่ทำชั้นเดียวไปเลยดูง่ายดี ไม่ซับซ้อน” แต่พอได้มีโอกาสเข้ามาศึกษาจริงๆจังๆ จึงรู้ว่ามันดีต่อการบริหาร ในธุรกิจใหญ่ๆนั่นเอง ใครที่ยังไม่เคยเห็นลำดับขั้นจอง Google Analytic ก็ลองดูภาพด้านล่างครับว่างงแค่ไหน   เมื่อดูภาพจาก Google Analytic แล้ว เราจะมาทำแผนภาพแต่ละชั้นให้เข้าใจกันง่ายๆ โดยมีหลักการว่า แต่ละ Account มีได้หลาย Property แต่ละ property มีได้หลาย View   แล้วแต่ละชั้นมีความหมายอย่างไร? Account คือ ชั้นแรดสุดเลย แต่ละ Account จะหมายถึงการที่เราแยก Business ต่างๆของเรา เช่น เรามีธุรกิจขายเครื่องมือช่างก็แยก 1 account และธุรกิจรับสร้างบ้านก็แยกออกมาอีก 1 account   Property คือ ช่องทางจต่างๆของธุรกิจนั้น เช่น ธุรกิจขายเครื่องมือข่างมีหลายเว็บไซต์,…

Details
Adobe AN - import psd file

Adobe animate CC ฟีเจอร์ใหม่ Import ไฟล์ .psd – สร้าง HTML5 Animation

Share the joy
  •  
  •  
  •  
  •  
  •  

โปรแกรม Adobe Animate CC ที่ถูกพัฒนามาจาก Adobe Flash นอกจากที่จะเป็นเครื่องมือที่ทำให้เราสร้าง Animation HTML5 ได้ง่ายดายแล้ว ทางผู้พัฒนายังทยอยเพิ่ม Feature ใหม่ๆเพิ่มขึ้นเรื่อยๆ และ Feature ใหม่ที่ผมชอบมากคือ การ import ไฟล์ .psd เข้ามาทำงานได้เลยนี่แหล่ะ (เมื่อก่อนได้เฉพาะไฟล์ jpg, png) ซึ่งไม่ใช่แค่ import ธรรมดา มันยังแยก Layer ให้ตามไฟล์ .psd ที่เราทำด้วย   วิธี Import ไฟล์ .psd 1. ขั้นตอนแรกเริ่มจากการสร้าง Artwork ในโปรแกรม Photoshop – ตามรูปด้านล่างผมได้เตรียม Layer สำหรับการทำจวดวิ่งขึ้นท้องฟ้า โดยจะมี Background 1 layer และส่วนของจรวดผมจะสร้างโฟลเดอร์ขึ้นมาและเก็บ 2 layer คือ…

Details

ทดลองเรียน Adobe Animate CC (Basic)

Share the joy
  •  
  •  
  •  
  •  
  •  

สำหรับผู้ที่สนใจศึกษาการทำ HTML5 Animation ด้วยโปรแกรม Adobe Animate CC โดยที่ไม่ต้องเขียนโค๊ดใดๆ สามารถทดลองเรียน 4 บท 6 คลิปได้ที่นี่ บทที่ 1 : Introduction ความสามารถของโปรแกรม Adobe Animate CC Platform ที่โปรแกรมสามารถ Public ออกไปใช้ได้ สิ่งที่จะได้เรียนในคอร์สนี้ บทที่ 2 : Config stage รู้จักประเภทของไฟล์ที่ต้องการสร้าง การกำหนดขนาดพื้นที่ทำงาน เปลี่ยนสีพื้น บทที่ 3 : Create 3.1 : การ Import ภาพ และจัดเรียงเลเยอร์ 3.2 : การ Import โดยใช้ไฟล์ PSD บทที่ 4 : Animation 4.1…

Details

ผลภัพธ์ที่เจ็บปวดจากการไม่ทำ UX Testing

Share the joy
  •  
  •  
  •  
  •  
  •  

วันนี้ผมมีประสบการณ์จริงจากการทำงาน ที่ทำให้ผมและคนในทีมได้ตระหนักถึงความสำคัญของการทำ Testing ทั้ง UX testing, User journey ของผู้ใช้งานจริง มากกว่าการคำนึงถึงความคิดของตัวเอง หรือคนในทีมเป็นหลัก   เริ่มจากการรับโจทย์ เมื่อถึงเวลาเริ่มต้นโปรเจค AE ผู้ได้รับสารจากลูกค้า ก็เริ่มบรรยายสิ่งถึงสิ่งที่ลูกค้าต้องการ บลา บลา บลา… โดยสรุปแล้วโปรเจคนี้สิ่งที่ต้องทำคือ   “แคมเปญขายสินค้าชิ้นหนึ่ง โดยให้คนมาลงทะเบียนข้อมูลส่วนตัว พร้อมอัพโหลดหน้าตัวเองมาด้วย รับฟรี! ส่วนลด 30%”   เมื่อได้รับโจทย์หรือสิ่งที่เราจะทำ สิ่งที่แรกที่คนในทีมจะต้องสงสัยเลยคือ แคมเปญที่จะทำนี้มันเวิคหรือไม่ จะมีคนเข้ามาเล่นสักกี่คน เพราะถ้าทำแล้วไม่เวิคจะทำไปทำไม เสียเงิน เสียเวลาปล่าวๆ คำตอบจากคนในทีม นาย ก : เฮ่ยเล่นดิ ลดตั้ง 30%  เยอะนะเว้ยไม่เล่นได้ไง นาง ข : ไม่มีใครเล่นหรอก ให้อัพโหลดหน้าตัวเองด้วย แล้วจะเอาหน้าไปทำอะไร เป็นสิ่งที่ดีเมื่อมีการโต้เถียงกันด้วยเหตุผล เพื่อนำมาวิเคราะห์ปรับปรุง แต่ผลสุดท้ายก็ต้องจบการประชุมด้วยการต้องทำเมื่อ AE บอกว่า…

Details
Content for SEO

วิธีทำ SEO ด้วยเรียนรู้การเขียนคอนเทนท์ถูกใจ Google และผู้อ่าน จาก Schema.org

Share the joy
  •  
  •  
  •  
  •  
  •  

การทำเนื้อหาให้ถูกใจผู้ใช้ด้วยการให้เนื้อหาที่ครบถ้วนตาม Schema.org แนะนำ เป็นวิธีทำ SEO ที่ได้ผลที่สุด พูดถึง Schema.org หลายคนคงยังไม่เข้าใจว่ามันคืออะไร เอาเป็นว่าผมอธิบายสั้นๆมันก่อนละกันเพราะเดี๋ยวถ้าไม่เข้าใจแล้วอ่านไปเรื่อยๆ จะพาลงงซะปล่าวๆ Schema เป็นคำที่มีความหมายให้เราไปแทรกลงแท็ก HTML พวก div, h1, span,… เช่น <span itemprop=”name”>Source supporter</span>     แล้วทำไมต้องใส่ Schema ลงไปด้วยล่ะ ??? ต้องบอกก่อนว่าคำต่างๆที่ Schema สร้างขึ้นมา ไม่ใช่เกิดจาก ตาสี กับ ตาสา คิดกันขึ้นมาเอง แต่เกิดจาก Google, Microsoft, Yahoo and Yandex เค้าสนับสนุนให้มันเกิดขึ้นมา เพราะฉะนั้นมันมีเหตุผลบางอย่างที่เค้าต้องสร้างมันขึ้นมาสิ เหตุผลก็คือ การที่เราสร้างหน้าเว็บขึ้นมามีการเขียนโครงสร้าง HTML มากมายก่ายกอง มันยากต่อ Search engine จะเข้าไปอ่านข้อมูลของเรา และวิเคราะห์ออกมาว่าหน้าเว็บเราจัดอยู่ในประเภทอะไร มีสินค้าชื่ออะไร ยี่ห้ออะไร ราคาเท่าไหร่ ……

Details
Hit Object

วิธีสร้างเกมลาก-วางที่ถูกต้อง

Share the joy
  •  
  •  
  •  
  •  
  •  

เกมการศึกษาส่วนใหญ่ไม่ว่าจะบน Tablet หรือจอ Touch screen มักจะมีการเล่นแบบลากวาง คือ ผู้เล่นลากวัตถุ ไปวางตามคำตอบให้ถูกต้อง ดังนั้นการเขียนเกมตรวจสอบการชนของวัตถุที่ดีจึงสามารถนำไปประยุกต์ได้กับหลายๆเกมทีเดียว   ในโปรแกรม Flash AS3 จะวิธีการตรวจสอบการชนอยู่ 2 แบบ แบบที่ 1 ตรวจสอบแบบ Object ชน Object แบบนี้จะตรวจสอบที่วัตถุ ชนกันแม่ปลิ่มๆ ก็ถือว่าชนแล้ว ตามภาพ โค๊ด if (object1.hitTestObject(objects2)) { // Do something }   แบบที่ 2 ตรวจสอบแบบ Object ชน จุด แบบชนจุด x,y การชนแบบนี้จะดีในกรณีที่ใช้ในเกมต่อจิ๊กซอ เราสามารถจุดชนเป็นจุด x y ตรงกลางภาพ เพราะฉะนั้นถ้าชนขอบๆไม่ถือว่าสำเร็จ ต้องชนจุดกลางภาพ โค๊ด if (object1.hitTestPoint(object2.x,object2.y)) { // Do something…

Details
Loop animation

Google Web Designer สอนทำอนิเมชั่นแบบวนลูป

Share the joy
  •  
  •  
  •  
  •  
  •  

ลองดูตัวอย่างการทำพื้นหลังให้เคลื่อนไหวแบบวนลูปไปเรื่อยๆ ตัวอย่างของผมคือผมทำให้พื้นหลังเป็นอวกาศให้เลื่อนวนไปเรื่อยๆ และมียานวางเฉยๆอยู่ตรงกลาง ดูแล้วเหมือนกับยานบินอยู่บนอวากาศนั่นเอง ขั้นตอนการทำ 1. เตรียมกราฟฟิคที่ใช้ทำพื้นหลังวนลูป ขั้นตอนนี้ถือว่าสำคัญทีเดียวเพราะถ้าเราทำกราฟฟิคไม่ดี การวนลูปจะไม่เนียน ผมเลือกใช้รูปอวกาศดำๆจุดๆ เมื่อได้รูปแล้วเราต้องเอารูปมา Copy แล้วต่อให้ติดกันสนิท เสร็จแล้วก็จะได้ Background ที่เราต่อกันยาวๆ เสร็จแล้วก็เซฟเก็บไว้เตรียมเอาไปทำ Animation ได้แล้วล่ะครับ   2. เริ่มสร้าง Animation เมื่อเปิดโปรแกรม Google Web Designer มันจะให้เรากำหนดขนาดของงาน ใครสร้างเป็นหน้าเว็บก็เลือก Others > HTML แต่ในกรณีนี้ผมทำกราฟฟิคเป็นขนาดแบนเนอร์ จึงเลือกเป็นสร้างแบบ Ads   3. import ไฟล์กราฟฟิคเข้ามาในงาน ผม Import รูปมา 2 รูปสำหรับเป็นพื้นหลังและจรวดที่วางไว้เฉยๆ   4. ทำการ Animate แบคกราวน์ 4.1 การกดเลือกแบคกราวน์ คลิกขวาที่ Keyframe ที่ต้องการเลือก Insert keyframe…

Details

Responsive web design – การดีไซน์เว็บ Responsive

Share the joy
  •  
  •  
  •  
  •  
  •  

ในหน้าที่ที่ผมเป็นคนดูแลโปรเจค เมื่อต้องเริ่มทำโปรเจค Web responsive ปัญหาแรกที่ต้องเจอ คือ ดีไซน์เนอร์เดินมาถามว่า “ผมต้อง Design Artwork สำหรับ Web responsive ที่ขนาดเท่าไหร่ครับพี่?”   คำถามง่ายๆแต่ทำเอาผมสตั้นไป 3 วิ… เออว่ะ ดีไซน์ที่เท่าไหร่ดีวะ   สาเหตุที่ต้องมานั่งขบคิดกับคำถามง่ายๆนี้ เพราะด้วยขนาดหน้าจอที่หลากหลายและการแสดงผลในหน้าจอ Ratina(ต้องใช้ภาพขนาด 2 เท่า) และก็ไม่มีหลักการอะไรตายตัว ขึ้นอยู่กับประสบการณ์และความพอใจแต่ละคน เพื่อไม่ให้เกิดความยุ่งยากในภายหลัง ผมจึงต้องจับตัวผู้เล่น(Designer, Programer) มานั่งคุยกัน     ผู้เล่นที่สำคัญคือ 3 คนนี้ที่ต้องมาสรุปทำความเข้าใจให้ตรงกัน (บางครั้งไม่จำเป็นต้องมี Project Manager ถ้า 2 คนคุยกันรู้เรื่อง)   หัวข้อในสิ่งที่เราต้องสรุปร่วมกันมีดังนี้   Desktop first หรือ Mobile first ดี?   แม้วว่าปัจจุบันเปอร์เซนต์ของคนใช้งานผ่าน Mobile…

Details

วิธีสร้างเว็บ Step 5 : Add content

Share the joy
  •  
  •  
  •  
  •  
  •  

เว็บที่สวยงามแต่ขาดเนื้อหา (Content) ก็เหมือนกับ”คนสวยแต่ไม่มีสมอง” โหว… เปรียบเทียบซะ   ดังนั้นขั้นตอนสุดท้ายของ การสร้างเว็บไซต์ง่ายๆ 5 ขั้นตอน ด้วย WordPress นี้จึงเป็นส่วนเติมเต็มความสมบูรณ์ของเว็บไซต์เรา โดยกล่าวถึงวิธีการสร้างเนื้อหาแต่ละประเภท การกำหนดเมนูหลักเมนูย่อย (Navigation) เพื่อให้ผู้ใช้เข้าถึงเนื้อหาได้อย่างสะดวก สำหรับเนื้อหาใน WordPress นั้นมี 2 ประเภทคือ Post กับ Page มีความแตกต่างกันดังนี้   Post คือ เนื้อหาประเภท Blog หรือ บทความ สามารถใส่บทความได้เรื่อยๆ บทความที่ถูกโพสลงล่าสุดจะดันบทความเก่าๆลงไป สามารถสร้างหมวดหมู่บทความได้   Page คือ หน้าเนื้อหาที่เราจะต้องกำหนดเพื่อให้แสดงบนเมนู อย่าคิดว่ามีรูปแบบเนื้อหาแค่ 2 แบบ แล้วเว็บเราจะน่าเบื่อหรือไม่ จริงแล้วรายละเอียดปลีกย่อยของการสร้างเนื้อหายังมีให้เล่นอีกมาก เช่น การทำ Slide, Gallery รุปภาพ, Gallery แบบคลิปวีดีโอ,… มีอีกมากมายเท่าที่เราเคยเห็นในเว็บไซต์อื่นๆนั่นแหล่ะ ซึ่งก็อยู่ที่ธีมของเราจะมีมาให้หรือไม่ หรืออาจจะต้องไปหาลง…

Details

วิธีสร้างเว็บ Step 4 : ปรับแต่งไซต์ (Config Theme)

<

 

การปรับแต่งเว็บไซต์ คือการปรับข้อมูล และหน้าตาต่างๆ เพื่อบ่งบอกความเป็นตัวตน ของเว็บไซต์เราเอง เช่น โลโก้, ชื่อเว็บไซต์, สโลแกน, ภาพหน้าเว็บ(Key visual)

นอกจากการใส่ข้อมูลดังกล่าวแล้ว เรายังสามารถปรับแต่งรูปแบของธีมให้เหมาะสมกับเว็บเราได้อีกด้วย เช่น พื้นหลัง, ตัวอักษร, รูปแบบแท็บบาร์ ทั้งนี้ขึ้นอยู่กับธีมที่เราเลือกใช้

 

วิธีการปรับแต่ง

ไปที่เมนู Appearance จะปรากฎเมนูย่อยออกมาให้เราเลือกปรับแต่งส่วนย่อยๆได้อีก ไม่ว่าการปรับวางฟังก์ชั่นต่างๆในหน้าไซต์(Customize) การใส่เมนูหลัก เมนูย่อย (Menu) การลงส่วนเสริมเพิ่มเติม (Plugin) และการปรับแต่งธีมแบบใส่โค๊ด (Editor)

 

 

 

สามารถปรับแต่งระบบลึกเพิ่มเติมได้อีกใน Setting

 

การปรับแต่งในขึ้นตอนนี้เป็นเพียงการใส่ข้อมูลในเบี้ยงต้นเพื่อให้หน้าตาเป็นคุณลักษณะของเว็บเรา ซึ่งขั้นต่อไปจะเป็นการใส่เนื้อหา(Content) ทำให้เว็บเราพร้อมที่จะเผยแพร่สู่ผู้ใช้

<