Content for SEO

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

การทำเนื้อหาให้ถูกใจผู้ใช้ด้วยการให้เนื้อหาที่ครบถ้วนตาม 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 จะเข้าไปอ่านข้อมูลของเรา และวิเคราะห์ออกมาว่าหน้าเว็บเราจัดอยู่ในประเภทอะไร มีสินค้าชื่ออะไร ยี่ห้ออะไร ราคาเท่าไหร่ ……

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

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

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

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

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

แต่…

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

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

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

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

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

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

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

CSS3 Transition

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

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

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

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

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

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

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

ผม : เอ่อ……

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

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

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

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

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

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

jotform.com
jotform.com

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

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

เราจะเรียนวิธีสร้างเว็บแบบง่ายๆและฟรี ด้วย 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 ตามหมวดหมู่ให้เลือกใช้ สามารถเลือกเข้าไปดีไซน์ได้ทีทั้ง…

สอน HTML5 for mobile : jQuery mobile อีเวนท์ Swipe

การเขียน web HTML นั้นโดยเว็บปกติก็สามารถจะเขียนเพื่อให้ใช้งานบน Tablet หรือ Mobile ได้อยู่แล้ว โดยเปลี่ยนจากการใช้เมาส์เป็นการใช้นิ้วมือนั่นเอง แต่ใน Mobile เองก็มีอีเวนท์ touch ที่เพิ่มขึ้นมาอีกเช่น การ Tab, hold, Swipe ซึ่งทำให้เราเขียน HTML สั่งงานอีเวนท์เหล่านี้ได้เช่นกัน

ในที่นี้เราจะสอนการเขียน jQuery mobile ใช้อีเวนท์ Swipe คือการที่เราใช้นิ้วปัดไปที่หน้าจอ Mobile ทัั้งซ้่ายและขวา

Swipe ทางซ้าย

$(“p”).on(“swipeleft”,function(){
alert(“You swiped left!”);
});

Swipe ทางขวา

$(“p”).on(“swiperight”,function(){
alert(“You swiped right!”);
});

ทั้งสองอีเวนท์นี้จะเกิดขึ้นเมื่อลากทางซ้ายหรือขวาบนอีลิเมนท์ที่กำหนดมากกว่า 30px

ตัวอย่างการใช้อีเวนท์ swipe

ตัวอย่างใช้ Swipe เปิด ซ่อน เมนูด้านข้าง

สอน jQuery ตัวอย่างทำแปลงร่างรูปตามตำแหน่งเมาส์ (ประยุคใช้อีเวนท์ mousemove)

จากรูปเราจะทำ interactive เมื่อเมาส์เคลื่อนที่อยู่บนรูปมือถือ โดยให้อีกรูปแสดงตามการเคลื่อนไหวของเมาส์(โดยใช้อีเวนท์ jQuery mousemove) เมื่อเมาส์ออกจากรูปจะคำนวนว่าตำแหน่งเมาส์อยู่ที่รูปเกิน 50% หรือไม่ ถ้าเกินให้อีกรูปแสดงแทนเต็มพื้นที่ไปเลย ตามตัวอย่าง โดยวิธีการวางโครงสร้าง HTML และกำหนด CSS คือ รูปหลักเซตเป็น CSS background (คลาส wrap) ใส่ความกว้างและสูงตามรูป ใน div คลาส wrap จะมีอีก div (จะกำหนดขนาดยืดหดที่ div นี้)โดยมีรูปอีกรูปวางอยู่ด้านใน div นี้อีกครั้ง โดย div ที่อยู่ใน .wrap กำหนด overflow:hidden เพื่อให้ซ่อนรูปที่อยู่ใน div นี้ โค๊ดที่ได้จึงเป็นดังนี้ <style> .wrap{ width:600px; height: 286px; background: url(“iphone-w.png”); margin: 70px auto;} .wrap >…

HTML Test speed code ทดสอบความเร็วโค๊ดที่เขียน

คนส่วนมากเวลาเขียนโค๊ดเสร็จ ทดสอบทุกบาวเซอร์ ทุกอุปรกรณ์ แสดงผลออกมาได้ถูกต้องสวยงามแล้ว แต่มักจะมองข้ามการทดสอบความเร็วในการโหลดหน้าเว็บของเรา ซึ่งเป็นส่วนสำคัญของเว็บไซต์กับผู้ใช้ถ้าโหลดนานผู้ใช้ก็อาจจะปิดเว็บเราแล้วหนีไปเปิดเว็บอื่นเลยก็ได้ ทำให้เสียโอกาสอย่างมากสำหรับเว็บไซต์ E-commerce หรือเว็บเซอร์วิสอื่นๆ

จริงๆเป็นความฝังใจที่ผมไปตกสัมภาษกับบริษัทฝรั่งบริษัทนึง ทำได้ทุกอย่างแต่ดันไม่เคย Test speed และ Optimize กับเว็บที่ตัวเองเขียนขึ้นมาเลยว่ามี Performace อย่างไร

สิ่งที่จะต้องทดสอบมีอะไรบ้าง

  • HTML
  • CSS
  • Image
  • JavaScript
  • Font

ส่วนเครื่องมือที่ใช้ทดสอบนั้นอยู่ในบราวเซอร์ Chrome  อยู่แล้วครับเข้่าที่เมนู Tool > Developer tool (Ctrl+Shift+I)
คลิกแทป Network กดปุ่ม reload เพื่อดูผลทดสอบ

HTML speed test
HTML speed test