สอนสร้างเว็บ แก้ปัญหาระดับชาติ ใช้ display inline-block แล้วเกิดช่องว่าง

Share the joy
  •  
  •  
  •  
  •  
  •  

display:inline-block คืออะไร? คำสั่งความหมายดูแปลกๆ ไม่คุ้นตา คุ้นหู เหมือนพวก font-size,color,… สมรศรีเห็นผมนั่งพิมพ์ คงดูเหมือนคนบ้านั่งพิมพ์ภาษาต่างดาว ผมจะปล่อยให้น้องสมรผู้น่ารัก มองผมเป็นมนุษย์ต่างดาวบ้าบอไม่ได้ อืม… เอาไงดี…คิดคิดคิด เอาล่ะ…งั้นล้างสมองจัดการให้น้องสมรมาเป็นมนุษย์ต่างดาวเหมือนกรูแล้วกันวะ ฮ่าๆ display:inline-block เนี่ยะเป็นคำสั่ง CSS ไว้จัดเลย์เอาท์ หรือ อิลิเม้นท์ ให้อยู่บรรทัดเดียวกัน โดยสามารถกำหนดให้จัด ชิดซ้าย กึ่งกลาง ชิดขวา ได้อย่างง้ายดาย ตามรูป สมรศรี : แล้วไงคะพี่ แล้วชาติมันล่มจมตรงไหน ถึงต้องมาแก้ปัญหา ปัญหามันอยู่ตรงนี้ครับ เวลาเราสั่ง inline-block มันจะเกิดช่องว่างของแต่ละอิลิเมนท์ ทำให้ดีไซน์ที่วางไว้ไม่สวยงาม เราจึงต้องมาคืนความสุขให้กับประชาชน วิธีการก็แค่ใส่คอมเมนท์ไว้ตามช่องว่างแต่ละอิลิเมนท์ตามนี้ <ul> <li>content</li><!– –><li>content</li><!– –><li>content</li> </ul> สมรศรี : แค่นี้หรอคะ ผม : ครับ สมรศรี : ชาติเจริญขึ้นเยอะเลยเน๊อะ ผม…

Details
ประยุกต์ใช้ Transition

สอนสร้างเว็บ ประยุกต์ใช้งาน Transitions – CSS3

เช้าวันเสาร์อากาศแจ่มใส ผมหวังว่าการสอนทำเว็บในวันนี้คงจะราบรื่นไปด้วยดี

แต่…

น้องสมรศรีเดินมาด้วยท่าทางมีนๆ

ผมจึงทัก “เป็นไงบ้างครับน้องสมร ท่าทางดูไม่ดี มีอะไรให้ผมช่วยไหม”

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

อ่อ…เข้าใจล่ะ ไม่แปลกหรอกครับสำหรับคนที่ไม่เคยเขียนเว็บ หรือ CSS มาก่อน อาจจะประยุกต์ใช้คำสั่งต่างๆไม่เป็น เดี๋ยวผมจะยกตัวอย่างให้ดู และให้ลองทำตามดูสัก 2-3 ตัวอย่างตามนี้

การใช้ Transition ร่วมกับ

  • box-shadow
  • border
  • box-radius
  • top, bottom, left, right

พร้อมแล้วเรียนทำเว็บ ประยุกต์ใช้คำสั่ง Transition ตามคลิปเลยครับ

CSS3 Transition

สอนสร้างเว็บ Animation effect ด้วย CSS3 Transitions

Share the joy
  •  
  •  
  •  
  •  
  •  

หลังจากที่สมรศรีเข้าใจที่มาที่ไปของวิธีสร้างเว็บ Animation แล้ว เธอจึงตัดสินใจที่จะเริ่มต้นด้วยการใช้ CSS3 เนื่องจากคำสั่งที่ง่าย สั้น กระชับ เร้าใจ นี่แหล่ะ!! เหมาะกับเด็ก GEN Y อย่างน้องสมรศรีเป็นอย่างยิ่ง   “ลุยเลยค่าพี่ CSS3 นี่แหล่ะที่หนูต้องการ” เมื่อรู้ข้อดี ข้อเสีย สมรศรีจึงไม่ลังเลที่จะตัดสินใจ   “ได้เลยครับ ยังไงในระหว่างเรียนผมจะชี้ให้เห็นชัดๆอีกที” ผมย้ำอีกครั้งเพื่อความเข้าใจที่ชัดเจน   คุณสมบัติแรกของ CSS3 ในการทำ Animation ก็คือ “Transition” แปลเป็นไทยแบบลูกทุ่งคือ “การเปลี่ยนแปลง” เจ้า transition นี่แหล่ะพระเอกของเราที่จะทำให้คุณสมบัติธรรมดาอื่นๆ เช่น width, height, top, left,… สามารถที่จะเคลื่อนไหวได้   ตัวอย่างการใช้ transition .test{transition:width 2s;} ความหมายคือ การเปลี่ยนแปลงค่าความกว้าง ให้มีระยะเวลา 2 วิ เช่นเรากำนหดความกว้างให้ขยายจาก 100px…

Details

สอนสร้างเว็บ Animation ทางเลือก(CSS3 หรือ jQuery)

Share the joy
  •  
  •  
  •  
  •  
  •  

ในชั่วโมงสุดท้ายของคอสเรียนสร้างเว็บ HTML CSS สมรศรีรู้สึกตัวเองมีวิชากล้าแกร่ง บัดนี้หล่อนพร้อมที่จะออกลุยยุทธจักร นักสร้างเว็บแล้ว เธอจึงท่องไปในโลกอินเตอร์เน็ต ดูเว็บต่างๆของชาวโลก แต่แล้ว เธอก็ต้องหยุด… แม่เจ้า!!! แต่ละเว็บทำไมมัน Animation อลังการงานสร้างขนาดนี้ สมรไม่เคยรู้เลยว่าเค้าจะทำเว็บกันได้สุดยอดขนาดนี้ ใช่แล้วครับ สมรศรี โลกนี้ไม่มีสิ่งใดดีที่สุด มีแต่ดีกว่า ไม่เว้นไม่แต่โลกของการสร้างเว็บ คอร์สเรียนเขียนเว็บไซต์ด้วย HTML CSS นั้นน้องสมรได้เรียนพื้นฐานวิธีสร้างเว็บ ได้รู้โครงสร้าง ประกอบหน้าเว็บได้สวยงาม เท่านี้ก็เพียงพอต่อการทำเว็บออกสู่สายตาประชาชนแล้ว แต่ถ้าน้องสมรศรีต้องการความเร้าใจแล้วล่ะก็  ผมก็ขอเสนอการทำเว็บ Animation …แต่ก่อนคิดจะเริ่มทำผมก็ขออธิบายทำความเข้าใจกันสักนิด สูดหายใจลึกๆ … ต่อจากนี้คือประวัติศาสตร์ เริ่ม… ช่วงสมัยที่ Flash รุ่งเรื่อง ทุกเว็บต่างตกแต่ง Animation effect กันด้วยโปแกรม Adobe Flash ซึ่งเป็นเครื่องมือที่ถูกพัฒนามาช้านาน จึงทำให้ผู้ใช้งานทำ Animate นั้นเป็นเรื่องง่าย ไม่จำเป็นต้องรู้เรื่องโปรแกรมมิ่งมากนัก แต่เมื่อวันที่บร๊ะเจ้าจ๊อป (Steve Jobs)  มาพร้อมอาวุธคู่กาย(iPhone iPad iPod) ได้ลั่นว่าจาไว้ว่า “อาวุธของข้าไม่ Support…

Details

สอนทำเว็บ ทำแบบฟอร์ม Sumbit ข้อมูลง่ายๆ โดยใช้ฟรีเว็บเซอร์วิส

ณ สถานที่เรียน บรรยากาศสบายๆในบ่ายวันหนึ่ง

ลูกค้าผู้น่ารัก : พี่คะๆช่วยสอนวิธีทำแบบฟอร์ม และส่งข้อมูลไปเก็บ หน่อยสิคะ ไม่ยากใช่ไหมคะเห็นเขาทำกันนิดเดียวเอง

ผม : เอ่อ……

ถ้ามองในแง่ของผู้ใช้ที่ไม่เคยทำเว็บอาจจะดูเหมือนไม่ค่อยมีอะไรซับซ้อน แต่ที่ผมอ้ำอึ้งอยู่ก็เพราะจริงๆแล้วมันไม่ง่ายขนาดนั้นครับ มันต้องใช้องค์ความรู้ในหลากหลายด้าน คือ เขียน HTML, จำลองเครื่องเซิฟเวอร์, PHP Programing, Database

อ่าาาาา เป็นไงล่ะ เริ่มเชื่อผมหรือยังว่ามันไม่ง่าย

โดยผมจะจำลองการทำงานแต่ละส่วนตามแผนภาพด้านล่างนี้ครับ

นี่การทำงานของการ Submit นะครับยังไม่ได้ทำการดึงออกมาเป็นรายงาน

ลูกค้าผู้น่ารัก : งั้นไม่ทำกะได้ค่ะ เช๊อะ งอลลลล

ดะ ดะ เดี๋ยววววก่อน ผมมีความมหัสจรรย์ของโลกมานำเสนอ มันคือระบบเว็บเซอร์วิส ที่จะให้คุณทำการเก็บข้อมูลจากฟอร์มอย่างง่ายดาย เว็บที่ว่าคือ jotform.com 

jotform.com
jotform.com

คลิปสอนการใช้งาน jotform.com

แนะนำหนังสือน่าอ่าน หนังยาง ล้างใจ

Share the joy
  •  
  •  
  •  
  •  
  •  

ช่วงนี้เดินไปร้านหนังสือผมเชื่อว่าทุกคนจะสะดุดตากับหนังสือประหลาดๆอยู่เล่มนึงที่วางติดอันดับหนังสือขายดี มันก็เป็นหนังสือ Handbook ธรรมดานี่แหล่ะครับ แต่ที่ต้องสะดุดก็เพราะมีหนังยางคล้ายริสแบนด์แต่บางกว่าแถมมาด้วย และหนังสือก็ชื่อ หนังยาง ล้างใจ บ้าาาาาไปแล้ว!!!! นี่มันไสยศาสตร์ชัดๆ ถึงจะสดุดตายังไงผมก็ไม่ได้จะใส่ใจจะหยิบขึ้นมาอ่านแต่อย่างใด ในใจคิดว่า ติดอันดับได้เพราะการตลาดละมั๊ง ใส่หนังยางมาหลอกคนงมงายล่ะสิ เนื้อหาคงไม่มีอะไรมากไปกว่าคิดบวกหลอก สร้างจุดขายมาหลอกเอาตังค์กูแน่ๆ ไปร้านหนังสือทีไรผมก็เดินผ่านไปหยิบเล่มอื่นมาอ่าน  และส่ายหัวกับความไร้สาระ จนวันนึง วันที่เกิดความยุ่งยากในชีวิตของผม วันที่ผมอยากจะสละเรือและว่ายน้ำกลับเข้าฝั่ง ผมต้องทำอะไรสักอย่างก่อนที่ลมปราณจะแตกซ่าน ปิ๊งป่อง ใช่แล้ว หนังสือเล่มนั้น หนังยาง ล้างซวย!!!  ฮ่าๆผมตั้งชื่อให้หนังสือเขาใหม่ และแล้วผมก็โดนไสยศาสตร์จากหนังยางเส้นนั้นอย่างจัง ตัวผมเริ่มชา ควบคุมขาตัวเองไม่ได้ รู้ตัวอีกที่ผมก็เสียเงินซื้อหนังสือกลับมาซะแล้ว เมื่ออ่านจบแล้ว ชีวิตผมจะหมดซวยไปเลยหรือไม่??? ต่อจากนี้ชีวิตผมของมีแต่แสงสว่าง โชติช่วงชัตวาลสินะ แหม… มันไม่ใช่บะหมี่กึ่งสำเร็จรูป กินปุ๊บ อิ่มปั๊บ มันเป็นหนังสือที่สอนให้คุณปรับทรรศนะคติครับ เหมือนที่คนสำเร็จเขาทำกัน แน่นอนมันไม่ได้รวยทันที เหมือนฉีกซอง แต่ชีวิตที่ดี เริ่มต้นทันที่ ที่คุณลงมือทำ หนังยาง จะเป็นสิ่งย้ำเตือนให้คุณ ไม่ละเลยกับทรรศนะคติดีๆ แต่โลกความจริงไม่ได้สวยอย่างที่คิด จึงต้องมีเครื่องมือเข้ามาช่วย และกระตุ้นความคิด เช่น รูปของคนที่คุณรัก ให้รู้ว่าคุณทำเพื่อใคร เป้าหมายที่ชัดเจน คำอธิฐานต่อจักรวาล ใจเขาใจเรา และใจคนอื่น ส่งกระจก แต่ไม่ชโงกดูเงา…

Details

การทำการตลาดออนไลน์ ด้วย content ระหว่าง SEO กับ Social

Share the joy
  •  
  •  
  •  
  •  
  •  

ผมเป็นคนหนึ่่งที่เห็นคนอื่นเขาประสบความสำเร็จจาก Internet marketing ไม่ว่าเห็นรายได้จากเพื่อนๆที่บางคนมีรายได้กันเดือนเป็นแสนจากการทำการตลาดออนไลน์ทางเดียวเท่านั้น จึงเกิดความสนใจปนอิจฉาทั้งๆที่ตัวเองก็อยู่ในวงการออนไลน์มาตั้งนานแต่ไม่เคยคิดทำอะไรเป็นชิ้นเป็นอันกับเขาบ้างเลย จึงเป็นเหตุให้ต้องศึกษาค้นคว้าเริ่มจากมองหาสินค้า หรือบริการอะไรดี ที่เป็นจุดเด่นจของเราและเราสามารถจะนำมาทำตลาดออนไลน์ คิดไปคิดมาอยู่หลายรอบ ก็บรรเจิดออกมาอยู่ 2-3 อย่าง ต่อไปก็ดูว่าจะทำตลาดยังไงดี จากโจทย์ที่มองการตลาดออนไลน์เพียงอย่างเดียว(เหมือนจะน้อย) แต่เอาเข้าจริง เห็นบางคนขายใน IG บางคนทำเพจ Facebook แถมลงแบนเนอร์ Facebook อีก บางคนก็ทำเว็บบล็อค อืมมม เริ่มเยอะ เอาไงดีวะ ผมจึงคิดว่าจะทำอย่างเดียวได้ไหมที่มันจะทำให้ลูกค้าเราเห็นเราได้เยอะที่สุด เช่นทำเพจ Facebook แล้วเซิชเอ็นจิ้น (SEO) มันจะติดด้วยไหมเราจะได้โพสที่ Facebook ที่เดียว ผลปรากฏว่าไม่เวิคครับ Google Search มันไม่สามารจะไปหาข้อมูลอะไรที่เราโพสใน Facebook ได้นะครับ ผมจึงต้องศึกษาไปว่า Facebook กับทำเว็บ blog content marketing นี่มันต่างกันยังไง และจะใช้กับบริการของเรายังไงดี ข้อแตกต่างการตลาดระหว่าง SEO กับ Social ความแตกต่างด้านแพลตฟอร์ม Social  จะอยู่ในรูปแบบของกิจกรรม ที่เกิดในช่วงระยะเวลาหนึ่ง…

Details

แนะนำหนังสือน่าอ่าน ทำน้อย ให้ได้มาก

Share the joy
  •  
  •  
  •  
  •  
  •  

จากที่ผมทำงานทางด้านเทคนิค(ทำเว็บ)ในระดับปฏิบัติการมาตลอด 12 ปี จนปัจจุบันได้มีโอกาสมาทำงานในส่วน Management ในช่วง 2 เดือนแรกที่เริ่มต้นผมเครียดมากอยากจะกระโดดกลับไปนั่งทำงาน(เขียนโปรแกรม)ตามเดิม ถึงขนาดต้องขอร้องหัวหน้าให้หาคนมาแทน ซึ่งลักษณะนิสัย และความรับผิดชอบนั้นช่างต่างกันมาก ผมพอสรุปข้อดีการทำงานในระดับปฏิบัติการ ดังนี้ รับผิดชอบในงานๆเดียว เฉพาะในส่วนที่ตัวเองรับผิดชอบเท่านั้น เช่นผมทำเว็บไซต์ก็เขียนไปเลยเว็บไซต์เดียว อู้งานเนี่ยนๆ เจ้านายไม่ค่อยรู้ ไม่ต้องแก้ปัญหา ถ้าติดปัญหาอะไรก็โยนไปที่หัวหน้า รู้เฉพาะอย่างก็ได้ไม่ต้องรู้เยอะ ลักษะนิสัยข้างต้นช่างเหมาะกับผมจริงๆเพราะผมอยู่กับมันมาสิบกว่าปี แต่ด้วยความที่หาคนมาแทนผมไม่ได้ ผมจึงยังต้องอดทนทำต่อไป ซึ่งลักษณะนิสัยของคน Management นั้นต้องมีความรับผิดชอบสูงมาก ต้องแก้ปัญหาต่างๆนาๆ หลายด้าน และด้วยบริษัทที่ผมทำระบบก็ยังไม่ดีนัก ทำให้ความรับผิดชอบก็มากขึ้นเข้าไปอีก วันๆนึงผมเขียนสิ่งที่ผมต้องทำ 1-2 หน้า A4 ถึงขนาดจิตหลอน มีผลกระทบต่อสุขภาพ ทำให้ผมต้องขวนขวายหาวิธีการลดความเครียด และจัดการกับงาน และผมก็เจอหนังสือ “ทำน้อย ให้ได้มาก” โอววว สวรรค์มาโปรด ถ้าคุณเป็นเหมือนผม ผมอยากให้คุณลองไปยืนอ่านสัก 10 หน้าแรกครับ Key massage มันอยู่แค่นั้นแหล่ะ ผมขอสรุปสิ่งที่ผมได้ ดังนี้ เขียนเป้าหมายระยะยาวของคุณออกมาก และระบุเป้าหมายที่ต้องการที่สุด…

Details

วิธีสร้างเว็บไซต์ ไม่ต้องเขียนโปรแกรมด้วย wix

Share the joy
  •  
  •  
  •  
  •  
  •  

เราจะเรียนวิธีสร้างเว็บแบบง่ายๆและฟรี ด้วย Wix เป็น web service (http://www.wix.com/) ให้เราสร้างเว็บไซต์แบบ Drag and Drop คือลากวางเซตนู่นนี่นิดหน่อยไม่ยุ่งยาก (ใครกะหายในการเขียนโปรแกรมก็ข้าม Service ตัวนี้ได้เลยครับ) เนื่องจากเน้นความง่ายแต่ก็มีฟังก์ชั่นที่ให้เลือกใช้งานได้อย่างครบ เพราะ Service ได้พัฒนามานาน และฝรั่งเขาใช้กันนานแล้วครับ ซึ่งเมื่อก่อนอยู่ในรูปแบบของ Web flash แต่พอเทคโนโลยีเปลี่ยนไป Flash มีได้เป็นที่นิยมในการทำเว็บไซต์อีกต่อไป จึงปรับเปลี่ยนมาเป็น HTML5 ข้อดีของ Wix สร้างเว็บไซต์ได้อย่างรวดเร็ว เหมาะสำหรับธุรกิจขนาดเล็ก มีเทมเพลต แบ่งเป็นหมดหมู่ ให้เลือกใช้ ฟรีด้วย (ตอนนี้) สามารถใช้โดเมนเป็นชื่อของตัวเอง (เสียตังค์) สามารถทำเว็บ Mobile version มีระบบ E-commerce มี plugin social ต่างๆ และอื่นๆอีกมากมาย เข้าไปดูได้ที่ หน้า Fearture   มี Template ตามหมวดหมู่ให้เลือกใช้ สามารถเลือกเข้าไปดีไซน์ได้ทีทั้ง…

Details