งาน WordPress dev night ครั้งที่ 3 อีกแล้วครับเพราะว่างานพวกนี้ ถ้าเราไม่ไปเราจะไม่ได้ของกลับมา ไม่ใช่ของแจกนะ -__ – ของที่ว่าเนี้ยคือความรู้ใหม่ๆ หลายๆอย่างนั้นแทบเรียกได้ว่าเปิดหูเปิดตาเสมอ และที่สำคัญที่สุดคือ ได้ไฟในการทำอะไรซักอย่างกลับมา อยากลอง อยากเล่น อยากใช้มันบ้าง มันจะทำเงินให้เราไหม หรือว่ามันจะช่วยให้เราจัดการงานของเราได้อย่างไร วันละ หัวเรื่องวันนี้ดูก็รู้คงหนีไม่พ้นเรื่อง WordPress อย่างแน่นอน แต่เดี๋ยวก่อน … มันไม่ได้น่าเบื่อหรอก เพราะเราทุกคนคงยังไม่รู้อีกเยอะเยะว่า ใครหลายคนหาเงินจากมันได้เป็น ล้านบาท !!!!!!!
ถึงงาน WordPress Dev Night
งานเริ่มตั้งแต่ 6 โมงเย็นครับซึ่งผมไปสาย ( อีกแล้ว -_- ) ผมไปถึงประมาณ 6:45 น. ก็ไปถึงชิลๆ งานใกล้จะเริ่มเต็มที ซึ่งที่จัดงานครั้งนี้คือ Pronto Marketing ซึ่งใกล้ๆกับที่ทำงานผม สบายไป ฮ่าๆ ซึ่งต้องขอบคุณ Pronto Marketing กับของกินที่ทำให้ผมรู้สึกดีมากๆ ขอบกินอร่อยทุกอย่างจริงๆ เน้นย้ำ แต่บทความนี้เกี่ยวกับ wordpress งั้นเราไปกันต่อเลย จริงๆ ก็เจอคนที่รู้จักทักทายกัน คนใหม่ๆก็เข้ามาร่วมวงด้วยเฮฮากันไป ได้แลกเปลี่ยนความรู้กันนิดหน่อย งานก็เริ่มขึ้นครับ …
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 ไปก่อน
- selectors
- box model
- color
- basic user interface
- background and border
- value and unit
- muti-column layout
- transition
- 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 ) หากคนไหนไม่ได้กล่าวถึงรบกวนแจ้งผมด้วยนะครับ ขอบคุณครับผม
