HTML5-Structure-Selectors

โครงสร้าง Html5

ทริคเล็กๆน้อยๆครับ จากประสบการณ์ทำงานในช่วง 2 ปีที่ผ่านมา ลงลึกเจาะลายละเอียด เก็บเล็กผสมน้อย ลืมบ้าง จำได้บ้าง (ขอบพระคุณ Google) กว่าจะรู้ว่่า ไอ้ที่ทำแบบนี้เขาเรียกว่าอะไร ก็อ๋ออ ในทันที

web standard เป็นการทำเว็บตามมาตรฐานกลางตามเงือนไขของ W3C จริงๆเราจะทำพิสดารแบบไหนก็ได้นะ แค่ให้แสดงผลออกมาไม่แหกแค่นั้นเอง (ย้อนไปก่อนหน้านั้นคือทำแบบพิสดารมาตลอด ฮ่าๆ) ขอแค่ได้เริ่ม หลังจากนั้นก็ไปต่อได้หมดแหละ อยู่ที่ไปได้เร็ว หรือช้า แค่นั้นเอง (ประยุกต์)

เมื่อเข้าสู่ Html5 แรกๆก็ตกใจเป็นอีกระดับของภาษา html หรอ? ยากแน่ๆ พอได้ทำแค่นั้นแหละ… เริ่มจาก div class=”header” , div id=”main” ,div กันไปบลาๆ ซึ่งปัจจุบันเว็บทุกเว็บ div เหมือนกันหมด มี header,menu,main,container,content,footer ฯลฯ ต่อไปไม่ต้อง div แล้ว ใช้ header ตรงตัวไปเลย มันแค่นั้นจริงๆนะ แล้วก็ใช้ css ควบคุมเหมือนเดิม ง่ายดี แต่จริงๆแล้วที่บอกว่า ตัว standard html5 ยังมี bug อยู่ เวลาใช้ก็เลือกเอามาใช้แค่ feature ที่ไม่เป็นอะไร bug ที่ว่าคือ browser หรือเปล่า ความสามารถในการแสดงผล ซึ่งก็รู้ๆกันดีว่า browser ตัวไหน? ฮ่าๆ

1.W3C content-type
เป็นการวิเคราะห์ตัวโครงสร้างของ Structure Html5 ผมชอบตัวนี้มาก รู้สึกท้าทายดี ว่าที่เรา div กันมา มันจะจัดหมวดหมุ่ content ของเราได้ถูกต้องตามชนิดของกลุ่มหรือเปล่า เป็นประโยชน์ต่อการออกแบบมาก

รูปดีไซน์ก่อนทำเป็น Html
รูปดีไซน์ก่อนทำเป็น Html

Continue reading HTML5-Structure-Selectors

iDeasForLife

สาส์นจาก Dalai Lama – ข้อแนะนำในการดำเนินชีวิต

นั่งๆทำงานอยู่ เกิดอาการแบบปลงๆกับชีวิต โยนงานมา ก็ไม่รู้จะโยนให้ใครอีก สรุปแล้วก็ผิดที่เราแหละไม่ตั้งใจทำงาน ฝีมือยังไม่ดีพอ ไม่สนุกกับงาน อดทนไม่พอ นั่งทำเอนิเมชั่นทวีนต่อไปละกัน โลกเขาไป 2-3 divice แม่งก็นั่งทำทวีนไปอย่างนั้นแหละ ทนได้ก็ทน ทนไม่ได้ก็ลาออกไป…..เด๋วนะ ไม่ใช่แล้วล่ะ 5555+ ช่วงนี้เป็นช่วงแบบ ไม่ค่อยมี official website เข้ามาให้ทำ มีแต่พวก ADS แบนเนอร์ Flash เอนิเมชั่น ร้องยี้กันเป็นแถบโยนกันไปมา 555+
ขณะนอนเล่นมือถืออยู่คืนนึง ไปเจอเว็บนี้เข้า “แง่คิดชีวิตงาม” อ่านๆไปมีหลายเรื่องทีเดียวให้ความรู้ และเรียกความรู้สึกเราออกมาได้ ซึ้งหลายเรื่องเหมือนกัน นึกถึงสมัยก่อนยุค Hotmail จะมีเรื่องเล่าเรื่องน่าสนใจจาก Forward Mail มาให้อ่านทุกเช้า เวลามาทำงานมักจะเช็คเมล์อ่านเมล์พวกนี้แหละ ก่อนทำงาน ประมาน 15-20 นาที (Forward Mail เมล์โป๊ อ่านทั้งวัน 5555+) อ่านไปเจอสาส์นจากองค์ ดะไล ลามะ คือ 19. ข้อเนี่ย ถ้าทำได้ทุกข้อ คงจะเป็นคนดีมากอ่ะ สำหรับผมนะ จะพยายามทำให้ได้ทุกข้อเลยละครับ (♪เป็นคนดี แล้วมันไม่มีใคร อยากจะเลว อยากเลวให้มันรู้ไป เผื่อมีใครซักคนต้องการก็พอ ♫) 5555555+ พี่เบิร์ดได้กล่าวเอาไว้ครับ

พระโขนงบอยแบนด์
Continue reading iDeasForLife

CleanCode-Css

การเขียน Code HTML แบบสะอาดลดความซับซ้อนของ tag div

เชื่อว่าตอนเริ่มต้นเขียน style sheet css ก็จะเริ่มจาก div มันไปซะทุกอย่าง แต่เมื่อพอเขียนไปนานๆ ก็จะเริ่มรู้สึกละว่าใช้มันมากเกินไป มันก็มีวิธิ ที่ลดการใช้แท็ก div ลงเพื่อการทำงานโปรเจคที่ใหญ่ๆ มีจำนวนหลายๆเพจ และทำร่วมกันหลายๆคน บางครั้งการทำงานอาจจะมี designer css ต้องทำงานร่วมกันตัดเว็บมากกว่า 2 คน เพื่อประโยชน์ต่อตนเองและเพื่อนร่วมงานและเป็นไปตามทิศทางเว็บไซต์แบบใหม่ที่จะมาในอนาคต

1.ลดแท็ก div ที่ไม่จำเป็น

หลายครั้งที่เราสร้าง div เพื่อมาครอบ form หรือ ul เพิ่อสร้างคุม layout ไม่ปล่อยให้มันลอย แต่เราสามารถ แทรกชื่อคลาส หรือไอดี เ้ข้าใส่เข้าไปได้เลย ดังรูปตัวอย่าง

Continue reading CleanCode-Css

OnSiteSEO

ข้อห้ามและข้อควรระวังในการเขียน XHTML และ CSS

มีโอกาสได้อ่านกฏเหล็กและมาตรฐานการ penalize (ลงโทษ) และ banned (ไม่เข้ามาเก็บเว็บเราเข้าในผล search เลย) ของ google หลายๆข้อ มันเป็นสิ่งที่หลายคนไม่รู้ และใช้กันบ่อยมาก เลยอยากจะเผยแพร่ต่อ ดังนี้

1. หลีกเลี่ยงการใช้ Header Element แล้วซ่อน text ไว้ เช่น

<h1><span>header 1</span></h1>

แล้วใน CSS ใช้ property display:none, visiblity: hidden หรือ text-indent: -9999px; เพื่อซ่อน text ใต้ span ไม่ให้เห็น
ถ้าต้องการที่จะแสดง h1 เป็นรูป ให้ใช้รูปตรงๆไปเลย แล้วใส่ keyword ของรูปเหล่านั้นเป็น alt ของรูปแทน [ข้อนี้ อ้างอิงจาก Matt cutts เป็น software engineer ของ Google]

<h1><img src=”../images/xx.jpg” alt=”header1″></h1>

ที่เป็นเช่นนี้ก็เพราะว่า การที่เราสั่ง hidden text ใดๆ ไม่ว่าจะใน HTML หรือ CSS นั้น google จะมองเป็นการ “ปกปิด” หรือซ่อน keyword ที่ต้องการ ซึ่งเป็นวิธี black hat วิธีหนึ่ง สำหรับดัน SEO ให้สูงขึ้นนั่นเอง
Continue reading OnSiteSEO

Set popup window to center with CSS

Set popup window to center with CSS

การจัดการ popup ให้อยู่ center ของ Browser windows

ค้นหาจาก stackoverflow หลังจากคุ่นคิดว่าจะใช้ jQuery ดีไหม
วิธีง่ายๆ ที่ไม่ต้องใช้ jQuery มาช่วยบังคับ คือ class=”ชื่อคลาส” ที่จะทำให้อยู่กึ่งกลางจอตลอด กำหนด position:fixed; left:50%; top:50%; แล้ว กำหนดค่า margin ติดลบคืนกลับให้ค่าด้านซ้าย และด้านบน ด้วยการลบความสูงของ class=”ชื่อคลาส” หาร2 เช่น สูง 500px ก็ margin-top:-250px; ง่ายๆเลย คิดอยู่ตั้งนาน – -*