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) ทำให้เว็บเราพร้อมที่จะเผยแพร่สู่ผู้ใช้

<

 

วิธีสร้างเว็บ Step 3 : การติดตั้งธีม (WordPress)

Share the joy
  •  
  •  
  •  
  •  
  •  

< ถัดไป: Step 4 ปรับแต่งไซต์ (Config Theme) >     จะดีขนาดไหน? ถ้าเว็บไซต์ของเรามีรูปแบหน้าตาที่สวยงาม ใช้งานง่าย ดูมีความน่าเชื่อถือ การเลือกธีม(Theme) ที่ถูกต้องเหมาสมนี่แหล่ะเป็นหัวใจสำคัญในการสร้างภาพลักษณ์ของธุรกิจเราเลยทีเดียว… และอีกประเด็นคือ การเลือกธีมที่ตรงกับความต้องการของเราให้ทางที่สุด จะช่วยประหยัดเวลาการปรับแต่ง ทั้งหน้าตา และ ฟังก์ชั่นอีกด้วย การจะหาธีมของ WordPress มีทั้งให้ดาวน์โหลดใช้แบบฟรีๆ และเสียเงิน… ในเบื้องต้นหากเราต้อการเพียงแค่ทดลองเพื่อการศึกษาอาจจะหาของฟรีมาใช้ก่อน แต่หากต้องการใช้กับเว็บไซต์ของเราจริงๆแล้ว ก็ซื้อของที่มีลิขสิทธิ์จะดีกว่า เพราะกว่าผู้พัฒนาจะนำมาขายได้แต่ละอัน จะต้องผ่านมาตฐานการตรวจสอบแล้วเท่านั้น จึงเชื่อได้ว่าธีมที่ซื้อมามีคุณภาพอย่างแน่นอน เมื่อเข้าไปที่ http://themeforest.net/ เราสามารถเลือกหมวดหมู่ให้ตรงกับประเภทที่เราต้องการ       วิธีการติดตั้งธีม WordPress   เมื่อเลือกธีมที่ต้องการ ทำการชำระเงินก็จะสามารถดาวน์โหลดไฟล์ธีม แตกไฟล์และอัพโหลดไปที่โฟลเดอร์ wp-content/themes เมื่ออัพโหลดเสร็จแล้ว ธีมจะประกฏที่ CMS ให้เราเลือกใช้     เพียงไม่กี่ขั้นตอนเราก็ได้ธีมสวยๆไว้ให้เราเลือกใช้งานแล้ว หากวันหนึ่งต้องการธีมใหม่อีกก็สามารถนำมา Install เพิ่มได้อีกเรื่อยๆ…

Details

วิธีสร้างเว็บ Step 2 : Install site (WordPress)

Share the joy
  •  
  •  
  •  
  •  
  •  

<ถัดไป: Step 3 การติดตั้งธีม (WordPress) > ขั้นตอนการ Install ระบบ Website เป็นการติดตั้ง CMS ของ WordPress ที่มาให้เราพร้อมทั้ง Front -end และ  Back-end ให้เราบริหารเว็บไซต์ได้สะดวกรวดเร็ว บางคนอาจเริ่มกังวลว่าการติดตั้งจะยุ่งยากซับซ้อน และจะกลัวทำผิดทำถูก ผมขอยืนยันว่ามันง่ายมากๆ เค้าพัฒนาให้ง่ายต่อผู้ใช้ไม่ต้องเข้าไปยุ่งกับโค๊ดหรือฐานข้อมูลอะไรทั้งสิ้น ขั้นตอนก็ลากๆ วางๆ นิดเดียวก็เสร็จแล้ว WordPress ทำให้เรื่องยุ่งยากจากการที่ต้องเขียนโปรแกรมสร้างเว็บไซต์ขึ้นมาสักหนึ่งเว็บต้องใช้เวลาและค่าใช้จ่ายเป็นจำนวนมากให้เสร็จได้ภาย 1 ชั่วโมง และจุดเด่นสำคัญคือเรื่อง Front-end และ Back-end ที่มีประสิทธิภาพ ดังนี้   Front-end Front-end คือ ส่วนการแสดงผลหน้าบ้านต่อผู้เข้ามาเยี่ยมชมเว็บไซต์ของเรา ส่วนนี้ WordPress ได้มีระบบการเพิ่มเทมเพล็ต(Template) เราสามารถเข้าไปหาเทมเพล็ตฟรีได้ หรือถ้าต้องการที่สวยและดีเราก็จะต้องเสียเงินซื้อที่ http://themeforest.net/ ซึ่งสามารถหมวดหมู่ที่ตรงกับเว็บไซต์ที่เราต้องการ     Back-end Back-end คือส่วนหลังบ้านไว้บริหารจัดการหน้าเว็บ ตรงนี้หล่ะที่เจ๋งมาก…

Details

วิธีสร้างเว็บ Step 1 : Domain and Hosting

Share the joy
  •  
  •  
  •  
  •  
  •  

<ถัดไป: Step 2 Install site (WordPress) > อธิบายให้เข้าใจสั้นๆ ชื่อโดเมน(Domain) คือชื่อเว็บไซต์ ส่วนโฮสติ้ง(Hosting) ก็คือพื้นที่เก็บเว็บไซต์ นั่นเอง 2 ส่วนนี้เราจะต้องเสียเงินไปเช่ากับทางผู้ให้บริการ ซึ่งผู้ให้บริการเช่าโฮสติ้ง ก็จะมีบริกาการให้เช่าโดเมนอยู่แล้วคุณจะได้ให้เค้าจัดการเบ็ดเสร็จ เพราะมันจะต้องจัดการเชื่อมต่อกับโดเมนกับโฮสติ้ง ตรงนี้คุณก็ให้เค้าจัดการได้เลย ซึ่งไม่ทำให้คุณสับสนเมื่อต้องจัดการในภายหลังด้วย     Domain (ชื่อโดเมน) เปรียบเหมือนกับชื่อบ้านของเรา คุณสามารถที่จะตั้งชื่อหมู หมา กา ไก่ ได้เลยตามสบาย แต่ต้องไม่ซ้ำกับชื่อที่เค้ามีแล้ว ถึงตอนนี้บางคนอาจจะเริ่มนึกชื่อโดเมนอยู่ในใจเท่ๆอยู่แล้วใช่ไหมล่ะ แต่ผมอยากให้ก่อนคิดชื่ออยากให้ตระหนักถึงวิธีตั้งชื่อดังนี้ วิธีตั้งชื่อโดเมน จำง่าย – สังเกตุดูชื่อเว็บไซต์ดังๆ เช่น kapook, sanook, pantip เค้าใช้ชื่อที่ง่ายต่อการจดจำ ง่ายต่อการพิมพ์ชื่อเว็บไซต์เข้ามา Keyword – การใส่คีย์เวิดในชื่อโดเมนจะต้องเริ่มจากการวิเคราะห์คีย์เวิร์ดที่มีมูลค่าทางการตลาดมาแล้ว เราจึงจับเอาคีย์เวิร์ดมาใส่ในชื่อโดเมน เช่น ibakedhomemadebakery.blogspot.com/ www.homemadekitchen.com/ จากตัวอย่างเป็นการใส่คีย์เวิร์ดคำว่า homemade ใส่ในชื่อโดเมน ฉะนั้นตามเหตุผลด้านบน เราก็ควรตั้งชื่อให้มีประโยชน์ต่อผู้ใช้…

Details

วิธีสร้างเว็บ รูปแบบใหม่ใน 5 ขั้นตอน

Share the joy
  •  
  •  
  •  
  •  
  •  

<ถัดไป: Step 1 Domain and Hosting > ทาง Source Supporter ได้เล็งเห็นถึงการใช้เวลาสร้างเว็บให้น้อยที่สุด เพื่อเจ้าของธุรกิจได้ใช้เวลาไปพัฒนาสินค้าและบริการ หรือการตลาดด้านอื่นๆได้เต็มที่ จึงหาวิธีสร้างเว็บรูปแบบใหม่จะทำให้เจ้าของธุกรกิจสามารถสร้างเว็บด้วยวิธีง่ายๆ โดยสามารถทำได้เอง แต่ยังคงคุณภาพสูง จึงได้สร้างวิธีโดยมีขั้นตอน 5 ขั้น ดังนี้     ง่ายขนาดนั้นเชียวรึ? อาจมีคนสงสัยว่าผมเขียน 5 ขั้นตอนให้ดูสั้นๆ แต่ใช้เวลาแต่ละขั้นนานเป็นชั่วโมงหรือปล่าว? ไม่เลยครับ แต่ละขั้นตอนจะใช้เวลาในการทำไม่เกิน 10 นาที ซึ่งจะเป็นการสอนสร้างเว็บแบบเนื้อๆ อธิบายอย่างกระชับได้ผลลัพภ์ที่รวดเร็ว โดยเครื่องมือที่ใช้จะเป็นระบบของ WordPress ที่มีผู้ใช้กันอย่างทั่วโลกตั้งแต่ผู้ที่ใช้ทำเว็บบล็อคส่วนตัว ถึงแบรนด์ดังระดับโลก จึงมั่นใจได้ในระบบความปลอดภัย และฟังก์ชั่นการที่เข้าใจและเรียนรู้ง่าย มีปลักอินส่วนเสริมมากมายที่ถูกพัฒนาให้ลองรับระบบของ WordPress         จริงๆแล้วความสามารถของระบบ WordPress นั้นมีมากมายมหาศาล สามารถปรับแต่งตั้งแต่รับพื้นฐานจนถึงระดับโปรแกรมมิ่ง ซึ่งก็ต้องใช้เวลาในการศึกษานานพอสมควร ผู้ที่ต้องการศึกษาในระดับลึกนี้ก็จะเหมาะกับผู้ที่เป็นนักพัฒนาเว็บไซต์ (Web developer) ซะมากกว่า ดังนั้นวิธีสร้างเว็บรูปแบบใหม่ของผมนี้จึงไม่ได้เป็นการพัฒนาอะไรขึ้นมาใหม่…

Details

วิธีสร้างเว็บ แต่ละประเภท

ในปัจจุบันสำหรับผู้ไม่มีความรู้ในการสร้างเว็บไซต์ แต่ต้องการสร้างเว็บไซต์เพื่อเป็นช่องทางในการนำเสนอสินค้า มักจะเข้ามาเซิชหาข้อมูลและผู้บริการจาก Google แล้วคุณรู้ไหม? ผลลัพภ์ที่คุณได้นั้นเป็นจำนวนล้านๆผลการค้นหา แล้วคุณจะเลือกจากอะไร?

 

 

ประเภทของวิธีสร้างเว็บ

ในบรรดาผลการค้นหาที่ได้อย่างมาหาศาลนั้นแต่ละผู้บริการมีความแตกต่างกันอย่างไร

 

ใช่แล้วครับ… จากผลการค้นหาล้านๆนั้น ถ้าพิจรณาลงไปจริงๆแล้ว สามารถแบ่งวิธีการออกมาเป็น 3 ประเภทเท่านั้น แต่จะแตกต่างกันก็ตรงเทคนิคทางการตลาด ความเชี่ยวชาญ ราคา และฝีมือ ของแต่ละผู้บริการเท่านั้น ซึ่งทั้ง 3 วิธีก็มีข้อดีข้อเสียแตกต่างกัน ดังนี้

  1. เว็บสำเร็จรูป : มันก็เหมือนกับกินบะหมีกึ่งสำเร็จรูปหล่ะครับ รวดเร็ว ฉับไว จ่ายเงินปุ๊บได้เว็บปั๊บ ที่เป็นเช่นนั้นก็เพราะผู้บริการคำพัฒนาระบบ หน้าบ้าน หลังบ้าน เตรียมไว้ก่อนแล้ว แค่คุณเลือกธีม เปลี่ยนโลโก้ เปลี่ยนรูป ก็เรียบร้อย จุดเด่นของระบบแบบนี้ก็คือ สามารถทำราคาออกมาได้ถูกมากๆๆๆ 2,000 บาทก็มี (เมื่อเชื่อเซิชดูสิ) แต่ต้องเสียบริการแบบรายปี จะเพิ่มฟังก์ชั่นอะไรนิดหน่อยก็ต้องเสียเงินทุกๆปี
  2. รับสร้างเว็บ : บริการแบบนี้เหมือนกับร้านตัดเสื้อ (tailor made) คือรับคำสั่งสิ่งที่ลูกค้าต้องการ(requirement) ไม่ว่าต้องการเว็บไซต์พิศดาลขนาดไหน เค้าก็ทำให้ได้หมด ซึ่งราคาก็จะสูงกว่าแบบสำเร็จรูปแน่นอนแล้วแต่ฝีมือและความยากง่าย ข้อเสียของบริการแบบนี้ คือ คุณจะรู้ได้อย่างไรว่าฝีมือเค้าจะดีขนาดไหน และ บางคนจ่ายมัดจำแล้วไม่ได้งานก็มี
  3. สอนพัฒนาเว็บ : วิธีนี้คงเหมือนกรรมกร เอ้ย! วิศวกร ที่ต้องเริ่มศึกษาตั้งแต่การวางโครงสร้างพื้นฐาน รวมถึงเครื่องมือที่หลากหลาย เช่น HTML CSS jQuery PHP กว่าจะได้เว็บก็ต้องศึกษากันเป็นปีๆเลยทีเดียว วิธีนี้จึงเหมาะกับผู้ที่สนใจทำงานด้านนี้โดยตรงมากกว่า

วิธีสร้างเว็บ ด้วยวิธีลัด ทำ Responsive Bootstrap อย่างรวดเร็ว

Share the joy
  •  
  •  
  •  
  •  
  •  

บทความนี้จะมาสอน วิธีสร้างเว็บ ด้วยวิธีลัดทำหน้าเว็บได้อย่างรวดเร็ว… เนื่องจากครั้งหนึ่งวันที่ผมเคยเป็น Front-end Developer วันๆนึ่งหัวมุดพิมพ์โค๊ด HTML CSS มากกว่าพันบรรทัด เริ่มจากวางโครงสร้างโค๊ดให้เป็นไปตามที่ดีไซเนอร์ทำมา… แน่นอนครับชีวิตผมวนเวียนอย่างอย่างนี้ทุกวันซ้ำไปซ้ำมา ใช่ครับ แรกๆ มันสนุกมาก กับการได้บรรดาลดีไซเนอร์แห้งๆให้ออกมาเป็นเว็บไซต์ที่สวยงาม… แต่นานๆเข้าชีวิตก็เริ่มเหี่ยวเฉา การเขียนโค๊ดบ่อยๆ ก็เริ่ม เบื่อ เหนื่อย เมื่อย ล้า ชีวิตช่างเหมือนสาวโรงงานสิ้นดี ไม่สิ้นชีวิตผมต้องดิ้นรนต่อไป ผมเริ่มมองหา Tool อะไรซักอย่างที่จะช่วยประหยัดเวลาในการสร้างเลย์เอาท์แต่ละครั้ง ผมมีความเชื่อว่าต้องมีคนขี้เกียจเหมือนผมอีกหลายคน แล้วต้องมีคนหัวใสทำเครื่องมือออกมาขายคนขี้เกียจอย่างผมนี่แหล่ะ 555 แล้ววันหนึ่งขณะนั่งสไลด์ดูหน้า Facebook เพลินๆ ก็เจอโพสเครื่องมือการสร้างเลย์เอาท์ Responsive bootstrap ที่ชื่อ Pingendo พอเข้าไปดูรายละเอียดปั๊บ… มันใช่เลย! เครื่องมือจับลากวางดูง่ายๆ, มี component ของ Bootstrap มาให้แบบครบ,  สามารถทำเป็น Responsive ได้เลย, ลองดูโค๊ดที่ Generate ออกมาก็สวยงามเลยทีเดียว และที่ถูกใจสุดคือ มันฟรี!!!  …

Details