ไปตะลุยงาน WordPress Dev Night ครั้งที่ 3

งาน WordPress dev night ครั้งที่ 3 อีกแล้วครับเพราะว่างานพวกนี้ ถ้าเราไม่ไปเราจะไม่ได้ของกลับมา ไม่ใช่ของแจกนะ -__ – ของที่ว่าเนี้ยคือความรู้ใหม่ๆ หลายๆอย่างนั้นแทบเรียกได้ว่าเปิดหูเปิดตาเสมอ และที่สำคัญที่สุดคือ ได้ไฟในการทำอะไรซักอย่างกลับมา อยากลอง อยากเล่น อยากใช้มันบ้าง มันจะทำเงินให้เราไหม หรือว่ามันจะช่วยให้เราจัดการงานของเราได้อย่างไร วันละ หัวเรื่องวันนี้ดูก็รู้คงหนีไม่พ้นเรื่อง WordPress อย่างแน่นอน แต่เดี๋ยวก่อน … มันไม่ได้น่าเบื่อหรอก เพราะเราทุกคนคงยังไม่รู้อีกเยอะเยะว่า ใครหลายคนหาเงินจากมันได้เป็น ล้านบาท !!!!!!!

ถึงงาน WordPress Dev Night

งานเริ่มตั้งแต่ 6 โมงเย็นครับซึ่งผมไปสาย ( อีกแล้ว -_- ) ผมไปถึงประมาณ 6:45 น. ก็ไปถึงชิลๆ งานใกล้จะเริ่มเต็มที ซึ่งที่จัดงานครั้งนี้คือ Pronto Marketing ซึ่งใกล้ๆกับที่ทำงานผม สบายไป ฮ่าๆ ซึ่งต้องขอบคุณ Pronto Marketing กับของกินที่ทำให้ผมรู้สึกดีมากๆ ขอบกินอร่อยทุกอย่างจริงๆ เน้นย้ำ แต่บทความนี้เกี่ยวกับ wordpress งั้นเราไปกันต่อเลย จริงๆ ก็เจอคนที่รู้จักทักทายกัน คนใหม่ๆก็เข้ามาร่วมวงด้วยเฮฮากันไป ได้แลกเปลี่ยนความรู้กันนิดหน่อย งานก็เริ่มขึ้นครับ …

food

Section 1 WordPress Developer Resource โดย Rabbitinblack

มีการบอกถึงว่า ถ้าเราอยากจะเรียนรู้มันแหละ อยากจะลองของกับมันแล้วเราก็ต้องรู้ว่าเราจะเริ่มต้นกับมันอย่างไร อะไรที่เราต้องเรียนรู้ พื้นฐาน ซึ่งสิ่งที่เราต้องรู้เมื่อเราจะใช้เจ้า wordpress ก็มีดังนี้ครับ

  • HTML5
  • CSS ( Cascading Style Sheets )
  • PHP
  • jQuery

แล้วเมื่อเราต้องรู้แล้วเราต้องการ  skill อะไร เราจะฝึกฝนมันได้ที่ไหน ก็มีการแจกเว็บที่ใช้การเรียนรู้มาอย่างเต็มที่ดังนี้เลย ( บอกตรงๆว่าถ้าคุณเรียนหมดทุกเว็บรับรอง เมพ ! )

  • www.w3school.com
  • http://www.codeschool.com/ ( ตัวนี้มีทั้งฟรีและไม่ฟรีจ้า )

เครื่องมือสำหรับ CSS ที่ทำให้เราขึ้นต้นได้เร็วและไม่ต้องเสียเวลานั่งปวดหัวกับพวกเรื่องจุกจิกเช่น Browser แสดงผลไม่เหมือนกัน

  • normalize.css ตัวนี้เป็นตัวพัฒนามาจาก reset.css อีกทีทำให้ทุก  Browser แสดงผลเริ่มต้นเหมือนกันหมด
  • foundation css ตัวนี้เป็น CSS Framework เกี่ยวกับเรื่องการจัด Layout ซึ่ง support หลายๆความละเอียดหน้าจอหรือที่เราเรียกว่า responsive สำหรับคนที่เริ่มต้นสร้างเว็บอันนี้ก็ใช้ได้นะไม่ใช่จะใช้กับ wordpress อย่างเดียว
  • bootstrap ตัวนี้มาแรงไม่แพ้กันเลยในเรื่องทำเว็บ responsive design เหมือนตัวบน แต่วิทยากรบอกว่าตัวบนมันทำได้เยอะกว่า แต่ก็แล้วแต่คนถนัดอย่างคิดมาก

และยังมีแบบว่าเป็นพวก Theme ที่ทำมาให้เราปรับแก้ไขได้ง่ายก็มีเหมือนกันแบบว่าเป็นตัวเริ่มต้นให้หมดแล้วเราแก้ไขแค่บางอย่างก็โอเค

  • http://themehybrid.com/
  • Gantry ไปลองอ่านดูในเว็บทำดีและง่ายต่อความเข้าใจลองดูๆครับ
  • default theme ก็แนะนำเพราะพี่เม่นบอกว่าเขาตั้งชื่อได้ดีและเขียนมาค่อนข้างมาตราฐานมากๆแล้ว

จะหาความรู้เรื่อง wordpress ได้ที่ไหนดีเขาก็มีแจกมาให้เราได้หาที่ไปดูว่าถ้าอยากจะรู้เรื่อง wordpress เนี้ยอะไร ยังไง อย่างไร เราควรจะเข้าไปดูเว็บเหล่านี้ครับ

  • smaching magazine section wordpress โดยเฉพาะมีให้คุณอ่านแบบจุใจ
  • http://wp.tutsplus.com/ แบบจัดเต็มกับ wordpress เหมือนกันเยอะมากกกกกกกก
  • http://www.wpbeginner.com/ แต่หลายๆคนบอกว่ามันก็ไม่ค่อยจะ beginner เท่าไร แต่ก็เอาไว้ดูได้ครับ
  • codex wordpress (codex.wordpress.org) สุดท้ายไปดูที่เว็บตัวแม่เลยดีกว่า ฮ่าๆ

ก็จบ section แรกโดยเวลาที่เหลือให้คนที่อยากแชร์ของมาแชร์กันซึ่งก็มีหลายๆคนแชร์ออกมา เจ๋งๆทั้งนั้นเอาล่ะไปดูกันเลย

  • wpmail.me เนื่องจาก plugin หรืออะไรใดๆของ wordpress มันทำเยอะมากจึงมีคนไอเดียดีมานั่งคัดของที่เจ๋งๆแล้วส่งมาบอกเราอาทิตย์ละ 1 ครั้งก็ดีเราจะได้ใช้ตัวอันที่มีคน prove มาให้แล้วว่าดี
  • wpvote.com ตัวต่อมาคล้ายๆตัวของบนแต่เป็นเรื่องที่ว่ามีคนมา vote ว่าอันไหนเจ๋งก็เป็นความเห็นของหลายๆคน
  • http://underscores.me/ เป็นเว็บที่ให้เราเอาชื่อ theme ไปหาแล้วจะได้โครงสร้างของ theme นั้นๆมาได้มาแต่โครงนะไม่ใช่พวกภาพอะไรมา แต่ผมก็ยังไม่เคยใช้นะไว้ใช้จะมาเขียนให้ดู
  • http://queryposts.com/ เป็นเหมือน codex แต่ว่ามีตัวอย่างให้ดูด้วยและก็เข้าใจง่ายกว่าลองดูๆ
  • gaaks.com เป็นแหล่ง theme เถื่อนที่ให้ลอง theme ที่เสียเงินเราจะได้รู้ว่าเขาทำอย่างไร สามารถดูได้ว่า theme นี้เขียนยังไง ตรงนี้เขียนอย่างไร
  • http://weblogtoolscollection.com/ ตัวนี้เป็นแหล่งรวม plugin ใหม่ๆออกถ้าหากคิดว่าน่าจะมีคนทำลองมาดูที่นี่ก่อนครับ
  • พี่เม่น แชร์ว่าตัว theme twenty twelve เป็นตัวอย่างที่ดีให้เป็นเคสให้ศึกษา เหมาะสำหรับหัดเดิน
  • http://delicious.com/iannnnn/wordpress ของพี่แอนจัดเต็ม 7 พันกว่า link เองนะตัวเธอว์
  • http://wptheming.com/options-framework-theme/ อันนี้เจ๋งเหมือนกันหากเราต้องการให้ theme ของเรานั้นมี option ให้แก้ไขนู้นนี่แบบง่ายๆให้เราทำการปรับในเว็บและสามารถทำให้ theme เรามีตัวเลือกหล่อๆได้ วิธีใช้มีคนเขียนไว้แล้วจ้าจัดเลยให้ไว http://onnsy.com/2012/08/option-framework-theme/

โหยแค่ Section แรกแจกของอย่างเยอะ ผมคงต้องขอตัวไปเขียนต่อตอนหน้าดีกว่าเพราะว่าเวลาหมดวันนี้ฮ่าๆ

Section 2 ตัดโครง html @pornantha (thaicss.com)

HTML5 & CSS3 เนื่องจากวิทยากร หงุดหงิดเรื่อง theme ที่บางคนเขียนห่วยจึงอยากทำเองและอธิบายเองเลย วิทยากรได้เล็งเห็นว่าคนเรามีปัญหาใหญ่มากๆเรื่อง พื้นฐาน เราไม่เคยรู้อะไรจริงๆเลย แค่ไปหาคำตอบในเน็ตหรือว่าดูจากฝรั่งมา ไม่เคยตั้งใจหาคำตอบว่าอันนี้คืออะไร อันนั้นคืออะไร ทำไมต้องเขียนอย่างนี้ ถ้าใช้ความสามารถอย่างนู้นได้หรือไม่ และวิทยากรก็เลยทำเว็บเขียนอธิบายเองเลยซึ่งเราคงรู้จักกันดีนั่นคือ www.thaicss.com

CSS

วิทยากรได้บอกว่า element ใหม่ๆของ html5 ที่เอามาใช้กับ wordpress theme และผสานกับ css3 สามารถช่วยเหลือเรื่อง seo ได้ดียิ่งขึ้น และยังคงเน้นย้ำว่าเราควรจะเข้าใจและจัดหมวดหมู่ของ tag ต่างๆที่เราใช้เร่ิมมีแผนภาพที่เขาได้ทำมาให้ดู ซึ่งดีมากและไว้ผมหามาได้จะมา update ให้อีกทีนะครับ ตอนนี้เอาแค่ text ไปก่อน

  1. selectors
  2. box model
  3. color
  4. basic user interface
  5. background and border
  6. value and unit
  7. muti-column layout
  8. transition
  9. animation

โดยวิทยากรได้ถามผู้ฟังว่า ID, Class ต่างกันอย่างไร ซึ่งคำถามนี้หลายๆคนก็พอตอบได้อยู่แล้ว และถามว่าเรารู้หรือไม่ว่าการที่เราเขียน a :hover อย่างนี้เป็น pseudo-class ถามว่าทำไมเราต้องเรียนรู้เรื่องพวกนี้ด้วย เพราะเราจะได้ใช้พวก property ต่างๆกับสิ่งที่เรา select มาอย่างถูกต้อง การตั้งชื่อของ id  html5 สามารถได้ทำได้โดย ขึ้นด้วยอะไรก็ได้ยกเว้น spacebar ตอนนี้เราอยู่ในยุค Floating Layout มันอยู่ในเรื่อง Box model (ดูในภาพนะจ๊ะ แต่ตอนนี้ยังไม่มี T^T )

โดยให้เราเรียนรู้เบื้องต้นแค่เรืื่อง selector, boxmodel , Basic User Interface ก่อนก็น่าจะเพียงพอแล้วในเบื้องต้น หากเราอยากรู้ว่า CSS3 ตัวไหนที่เขาประกาศออกมาแล้ว browser ใหม่ๆรับได้ให้ไปดูที่เว็บ w3c.org/tr/css  ซึ่ง CSS3 กับ CSS2 จะแตกกันที่ว่า 2 นั้นเขาจะทำทุกอย่างให้เสร็จก่อนแล้วค่อยประกาศออกมาให้ใช้ แต่ 3 นั้นคือทำเสร็จอันไหนก็ประกาศออกมาให้เลย และก็ยังคงพูดถึงเรื่องเดิมคือ พื้นฐานสำคัญเรียนรู้ให้ครบซะ !!!!!

ว่ากันต่อเรื่อง HTML5

ต่างจาก xHTML มาก xHTML เราใช้ในการแบ่ง section แต่ HTML5 div อยู่ในหมวดเบ็ดเตล็ดมีทั้งหมด 14 หมวดหมู่ สิ่งสำคัญคือ section ของ html5 หมายถึงอะไร ? การแบ่ง section อย่างชัดเจน อย่าใช้ tag section ไปแบ่งหน้าเว็บ สำหรับ  html5 section tag มันจะแบ่ง section ใน  tag article อีกที header ก็เป็น head ของ article

HTML5 โดย @pornantha

aside ไว้บ้างเนื้อหาข้างเคียงไว้ข้างๆ  footer ส่วนไว้ขยาย doc,aritcle เช่น โพสเมื่อไร ใครโพส โพสกี่อัน ทำไมเราต้องคำนึงถึงการใช้ tag ให้ถูกต้องเพราะว่ามันเกี่ยวข้องอย่างจริงจังกับ SEO

Text-level-sematic ลืมให้หมดพวก html 4

b = keyword สำคัญของหน้าเว็บนั้นๆ

i = เนื้อหาที่แตกต่างจาก paraghraph ที่กำลังพูดถึง

u = ใช้แก้ไขคำที่ไม่ถูกต้องตามหลัก

small = บอกความหมายข้างเคียง

อย่าใช้พวกนี้ผิดจุดประสงค์ กฎของ html5 ห้ามมี element เปล่าเว้นเสียแต่ว่าจะใช้ในการทำพวก JS โพสวันที่เอา time tag ไปครอบ วิธีการจำให้เราจำตามหมวดหมู่ของมัน เราจะได้รู้ว่าอะไรจะสามารถใช้ property ของมันได้อย่างเต็มที่  HTML5 เอา a ไปครอบ div ครอบอะไรก็ได้

ลำดับความสำคัญของ selector ให้คะแนน ไม่เหมือนกันเช่น id 100 แต้ม เหมือนที่พี่เม่นเคยเขียนเรื่องใครเจาะจงกว่าคนนั้นได้ไป สามารถไปดูได้ครับที่

หรือดูนี่เลย

ปล. หากต้องการอ่านเพิ่มเติมยังไม่จุใจมีน้องๆ และเพื่อนๆได้เขียนเกี่ยวกับงานครั้งนี้หลายคนแล้วครับตามไปอ่านกันได้เลยตามนี้

  • http://www.designil.com/wp-wordpress-dev-night-3.html@woraperth
  • nicha.in.th ของเพื่อนปุ้ม @kupoom
  • http://ponear.in.th/archives/190 คนนี้โหดมากเขียนสดจากในงานเลยน้องเปียโน @spacebra
  • ขอบคุณรูปจากพี่ @iPattt
  • ขอบคุณ tigeridea สำหรับเป็นตัวตั้งตัวตีกับงานนี้ครับ
  • ขอบคุณสถานที่ดีๆและอาหารอร่อยจาก pronto marketing ครับ
  • ขอบคุณวิทยากรทุกท่านจริงๆ ไม่ว่าจะเป็น @iannnnn,@imenn,@pornantha,@rabbitinblack,@prontophelps ( Alex ) & @prontocony ( Cony ) หากคนไหนไม่ได้กล่าวถึงรบกวนแจ้งผมด้วยนะครับ ขอบคุณครับผม
Loading

เป็นโปรแกรมเมอร์ที่ตามหาคุณค่าของชีวิตและความฝันในวัยเด็ก ชอบเล่นเกม เรียนรู้ทุกอย่าง ชอบเจอคนใหม่ๆ งานสังคมทุกชนิด ออกกำลังกายในวันว่าง อ่านหนังสือ มีเว็บรีวิวหนังสือด้วย www.readraide.in.th