Maximum BOY

ระดับเนื้อหา : Beginner (ระดับต้น) & Intermediate (ระดับกลาง)

การใช้ CSS ในการกำหนด layout และตกแต่งเว็บไซต์แบบ Tableless ในบ้านเราถือว่ายังไม่แพร่หลายมากนัก ส่วนใหญ่ยังคงใช้คำสั่ง Table ในการกำหนด Layout ของเว็บ ถึงแม้จะนำ CSS มาใช้บ้างแต่ก็เป็นการผสมผสานกับการใช้ Table แต่ปัญหาที่ผมมาเมื่อครั้งยังใช้ table เป็นหลัก คือหากผมต้่องการปรับเปลี่ยน Layout หรือ หน้าตาเว็บโดยยังคงเนื้อหาเดิมไว้ ผมกลับต้องรื้อ layout ทั้งหมด และเมื่อเห็นหลายๆ เว็บของต่างประเทศที่นำ CSS มาใช้ในการทำเว็บและลองทำดูปัญหาที่เคยเจอก็หมดไป นอกจากข้อดีที่ว่าแล้ว CSS ยังมีข้อดีข้อเด่นอะไรอีกบ้าง เรามาลองดูกันครับ

จุดเ่่ด่น 5 ประการของ CSS ที่ Russ Weakley ผู้เขียนหนังสือ CSS in 10 Minute ซึ่งเป็นหนังสือเล่มแรกๆที่ผมซื้อมาเพื่อศึกษาการใช้ CSS ครับ

• สามารถควบคุม Typography ได้ดีกว่า นั่นก็หมายความว่า การใช้ CSS ทำให้คุณกำหนดรูปแบบการแสดงผลของ Font จากไฟล์ CSS ได้ดีขึ้นเพราะหากเว็บของคุณมีรูปแบบของ fontที่เหมือนกันในทุกเว็บเพจ คุณก็กำหนดรูปแบบการแสดงผลของ Font ทั้งหมดไว้ในไฟล์ CSS และเรียกใช้มันแทนการเขียน Tag ในแต่ละเว็บเพจ
• ขนาดของไฟล์เล็กลง เพราะเมื่อคุณใช้ CSS ในการกำหนดรูปแบบหน้าตาของเว็บ จากเดิมที่ใส่ tags อย่าง <font size=”+2″ , style=….color…> ,หรือ <table align=”center” bgcolor=”…”……. > ,ฯลฯ เต็มไปหมดในเอกสาร HTML คุณก็สามารถกำหนดรูปแบบการแสดงผลไว้ไฟล์ CSS ต่างหาก ซึ่งก็จะทำให้ ขนาดไฟล์ HTML เล็กลง
• ปรับเปลี่ยนง่าย เมื่อคุณกำหนดรูปแบบการแสดงผลของเว็บเพจ ไว้ในไฟล์ CSS คุณก็สามารถแก้ไขรูปแบบการแสดงผลได้จาก ไฟล์ CSS แทนที่จะแก้ไขในเอกสาร HTML หลายๆหน้าเหมือนการใช้ Table
• กำหนดรูปแบบการแสดงผลของสื่อหลากชนิด ด้วยการใช้ CSS คุณสามารถกำหนดให้การแสดงผลของเว็บแสดงออกมาในรูปแบบที่เหมาะกับสื่อชนิดต่างๆไม่ว่าจะเป็น ให้เว็บเพจหนึ่งหน้าแสดงผลที่ Browserในรูปแบบเว็บเพจบนหน้าจอแต่แสดงผลใน Mobile Device อีกแบบหนึ่งเพืื่อให้เหมาะสมหน้าจอบน PDA ที่เล็กกว่าได้ ฯลฯ โดยที่ยังคงเนื้อหาเช่นเดิม
• เพิ่ม Accessibility ให้เว็บ Accessibility หรือการเข้าถึงข้อมูลเว็บนั้นเรามักจะนึกถึงการเข้าถึงข้อมูลเว็บของผู้มีปัญหาทางผิดปกติทางร่างกายเช่น คนตาบอด ผู้พิการอื่นๆ ฯลฯ ซึ่งคนเหล่านี้จะใช้ Software ช่วยเหลือเช่น Screen Readers(สามารถดาวน์โหลด trial screen readers software ได้ที่ http://www.freedomscientific.com/fs_downloads/jaws.asp เมื่อinstall แล้ว ให้ลองหลับตาหรือปิดมอนิเตอร์ เพื่อให้ Software อ่านให้เว็บให้เราฟัง) หลายจุดในเว็บเพจที่มีการใช้ Table ซ้อน Table อาจจะทำให้ Screen Readers อ่านข้อความผิดพลาดได้ แต่หากใช้ CSS เป็นตัวกำหนดรูปแบบ และ กำหนดเนื้อหาตัวหนังสือใน HTML เมื่อถอดตัว CSS ออกจาก HTML เอกสารก็จะแสดงผลไม่ต่างกับ Microsoft Word ที่อ่านง่ายขึ้น ทำให้การอ่านผลของ Screen Readers อ่านตัวหนังสือได้ถูกต้องยิ่งขึ้นหากคุณอยากรู้ว่าเมื่อถอด CSS ออกแล้วเป็นอย่างไร ทำได้โดยหากคุณใช้ Firefox(download) ไปที่ Toolbar เลือก View > Page Style >No Style สำหรับ IE 7 ทำได้เพียง Ignore Font size ,color และ font style เท่านั้น จึงขอแนะนำให้ใช้ Firefox ดีกว่า

  สำหรับเว็บที่ใช้ Table ให้เข้าไปที่เว็บไซต์ที่ผมเคยทำไว้่คือ www.thinkandclick.com/old_index.html ครับ

นอกเหนือไปจาก ข้อดีของ CSS ที่กล่าวมาแล้วการนำ CSS ยังมีผลต่อการทำ Search Engine Optimazation ในเว็บไซต์ของคุณอีกด้วย ซึ่งคุณหาอ่านได้จากเรื่อง Cascading Style Sheets และ SEO ตอนที่ 1 และ ตอนที่ 2 จาก emarketeer.in.th

Tags: css, cascading style sheet, seo, css in 10 minutes, Russ Weakley, screen readers, สร้างเว็บ, เว็บไซต์

[#2: Edit Options>MightyAdsense>Adsense Code]

หากคุณลองค้นหาเว็บไซต์ที่อยู่ใน Industry หรือ เว็บไซต์ที่มีกลุ่มเป้าหมายเดียวกับเว็บไซต์ของคุณ จะเห็นว่าส่วนใหญ่แล้ว โครงสร้างและเนื้อหาในเว็บไซต์ไม่ได้แตกต่างกันนัก โดยเฉพาะอย่างยิ่งเว็บไซต์ที่เป็น Corporate Website แล้ว แนวทางในการนำเสนอข้อมูลในเว็บก็หาความแตกต่างได้ยาก

จากประสบการณ์ที่ได้ผ่านเว็บไซต์ประเภท Corporate Website มาก็หลาย Website ทำให้ผมหวลคิดถึงวิธีที่ใช้ในการสร้างเว็บไซต์ในอดีต หลายๆครั้งผมมักจะใช้ website ของคู่แข่งในการเป็น Benchmark หรือตัวเปรียบเทียบผสมผสานกับการระดมความคิดจากเจ้าของ Content อย่างเช่นถ้าเจ้าของ content เป็นฝ่ายดูแลผลิตภัณฑ์ ทางผู้ดูแลผลิตภัณฑ์ก็จะนำข้อมูลสินค้าออกมานำเสนออย่างที่ผู้ดูแลต้องการ หรือ ผู้บริหารระดับสูงอยากนำข้อมูลสำคัญที่ผู้ชมเว็บควรรู้ก็จะนำเสนอออกมาอย่างตรงไปตรงมา จนบางครั้งละเลย ความต้องการที่แท้จริงของผู้ชมเว็บไซต์ ซึ่งการสร้างเว็บไซต์โดยวิธีนี้ ผมขอเรียกมันว่า การสร้างเว็บไซต์แบบ Inside-Out ซึ่งเป็นการสร้างเว็บไซต์โดยผ่านความคิดของกลุ่มผู้พัฒนาเว็บไซต์ ซึ่งผลที่ได้นั้น เมื่อผู้ชมเข้าเว็บไซต์แล้วกับไม่ได้ทำให้ผู้ชมติดตามเว็บไซต์ต่อหรืออ่านหน้าเว็บเพียงผ่านไป เหตุผลก็เพราะ สิ่งที่เรานำเสนอนั้นจริง ๆ แล้วถูกใจเรา แต่ไม่ได้ถูกใจผู้ชมเสมอไป

ดังนั้น การพัฒนาเว็บไซต์ด้วยวิธีกลับกันจึงเกิดขึ้นซึ่งผมขอมันเรียกว่า ” การสร้างเว็บไซต์แบบ Outside-In “ การสร้างเว็บไซต์แบบนี้เป็นการมุ่งสร้างแรงดึงดูดให้กับเว็บไซต์ และทำให้ผู้ชมอยู่กับเว็บไซต์เรานานขึ้น แต่การที่จะทำให้เกิดจุดนั้นได้ เราจะต้องเปลี่ยนวิธีคิดใหม่ ด้วยการตั้งคำถามว่า หากคุณเป็นกลุ่มเป้าหมาย คุณอยากรู้อะไร อยากได้อะไรจากเว็บไซต์ของเรา

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

Tags: website, website development, corporate website, web design, สร้างเว็บไซต์

[#3: Edit Options>MightyAdsense>Adsense Code]

วันนี้เป็นครั้งแรกที่ผมได้นั่งคุยกับอดีต CMS Developer ซึ่งเข้ามาเป็นพนง. ใหม่ในบริษัท เขาได้ทำการวิเคราะห์ website ของบริษัทที่ผมทำงานอยู่ปัจจุบัน ซึ่งสิ่งที่เขาวิเคราะห์ส่วนใหญ่ก็ตรงกับที่ผมได้เคยทำไว้ มีอยู่ข้อหนึ่งที่ผมและทีมไม่เคยนึกมาก่อนคือเรื่องการออกเสียง Domain Name

หลายบริษัทที่กำลังบุกตลาดต่างประเทศ มักจะจดชื่อบริษัทหรือชื่อสินค้าที่เป็นภาษาไทยเป็น Domain Name เช่น Bumrungrad.com เป็นของรพ.บำรุงราษฎร์ ซึ่งเป็นเว็บที่เขาทำให้ในส่วนของ International, mahaphant.com เป็นของกลุ่มบริษัทมหพันธ์ เจ้าของสินค้าห้าห่วงและไม้เฌอร่า หรือ ถ้าสมมติ sanook จะ go inter กับเขาบ้างแต่ยังใช้ Domain Name เดิมคือ sanook สิ่งที่จะทำให้กลุ่มเป้าหมายต่างชาติอาจฉงน เมื่อเจอกับชื่อเว็บเหล่านี้ได้แก่ การออกเสียงที่อาจจะไม่ตรงกับที่เจ้าของ domain name อยากให้ออกเสียง

อย่างคุณฝรั่งพนักงานใหม่นี้ ทีแรกแกออกเสียง bumrungrad เป็น บำ-รุง-แรด (ขออภัยครับถ้าออกเสียงหยาบ) หรือ mahaphant แรกๆแกก็อ่าน มะ-หะ-แฟน ไม่ยักรู้ว่าคุณฝรั่งมีแฟนอยู่แถวๆที่เราคุยกันหรีอไงก็ไม่ทราบ แต่สำหรับตัวอักษร PH ในภาษาอังกฤษจะออกเสียงเทียบได้กับตัว ฟ.ฟันของไทยเรา ไม่เชื่อคุณก็อ่านคำนี้ดูซิ “Elephant”, “Philosophy”

วิธีแก้ของคุณฝรั่งคนนี้ก็คือ ใส่คำอ่านเข้าไป และใส่ความหมายของคำนั่นเข้าไปด้วยทำให้ domain name ดูมีความหมายมากขึ้น ซึ่งสามารถเข้าไปดูได้ที่หน้า About US ของ bumrungrad.com ก็จะเห็นประโยค

” What does ‘Bumrungrad’ mean? This Thai word - pronounced Bahm-roong-RAHT - means “care for the people” 

เห็นมั้ยล่ะครับว่า การใส่วิธีการออกเสียง หรือที่เรียกว่า ” Pronunciation ” เข้าไปทำให้ Domain Name ดูมีความหมายลึกซึ่งและสื่อถึง Brand แค่ไหน

Tags: domain name, pronunciation, mahaphant, burungrad, emarketing, e-marketing, website usability

ธวัชชัย ศรีสุเทพ เอ่ยถึงชื่อนี้ไม่แน่ใจนักว่านักออกแบบเว็บรุ่นใหม่ๆจะรู้จักมั้ย เมื่อครั้งที่ผมเริ่มหัดใช้ Dreamweaver ออกแบบเว็บ ก็อาศัยหนังสือ “คัมภีร์ web design “ ของนักเขียนท่านนี้เป็นหนึ่งในตำรา web design หลาย ๆเล่มที่มีอยู่ แต่ที่สำคัญคือเป็นหนังสือด้านการออกแบบเว็บภาษาไทยที่เมื่อหลายปีก่อนหาได้ยากยิ่ง เพราะหนังสือเรื่องสอนทำเว็บส่วนใหญ่จะออกไปทางวิธีใช้โปรแกรมซะมากกว่า แม้ปัจจุบันเอง ผมยังใช้เล่มนี้ประกอบในการทำงานหลายๆครั้ง

ผมติดตามงานเขียนของคุณธวัชชัย ทุกเล่ม ถึงปัจจุบันก็มีอยู่ 6 เล่มรวมเล่มที่ผมกำลังจะเขียนถึงด้วย ถ้าอยากทราบว่า ผลงานของนักเขียนท่านนี้มีอะไรบ้างก็เข้าไปที่เว็บไซต์ www.markmyweb.com ซึ่งมีบอกว่าทั้ง 6 เล่ม มีอะไรบ้าง

ในการออกแบบเว็บนั้น ปัญหาอันหนึ่งที่ผมเจอคือ จะเลือกสีใดใส่ลงไปในเว็บเพื่อให้เว็บไซต์ที่ออกแบบมานั้นดูดี สีไม่เปรอะ เพราะสีสันในเว็บเป็นปัจจัยหนึ่งในการสะท้อนให้เห็นบุคคลิกของเว็บ สมมติถ้าคุณอยากให้เว็บของคุณดูแล้วแสดงถึงความมั่นคง น่าเชื่อถือ แต่สีที่ใช้กลับเป็นสีจัดจ้าน หรือ หวานแหวว จนผู้ชมคิดว่าฉันกำลังดูเว็บไซต์การ์ตูนหรืออะไรกันแน่ คงทำให้ผิดความมุ่งหมายของคุณแน่ ๆ ดังนั้น การเลือกใช้สีจึงมีส่วนช่วยให้ผู้ชมเว็บรู้สึกมีอารมณ์ร่วมกับสิ่งที่ Designer ได้ออกแบบให้เราดู แต่แน่ล่ะ ในการออกแบบหน้าเว็บ ใช่ว่าผมจะนึกออกเสมอไปว่าจะใช้สีไหนให้เหมาะ และเมื่อได้มาเจอ หนังสือ Creative Color Schemes ชุดสีโดนใจ ของคุณธวัชชัย ก็เลยได้คำตอบที่ผมกำลังหาอยู่ตลอดเวลา เพราะหนังสือที่มีอยู่ตามร้านหนังสือมักจะเป็นหนังสือต่างประเทศ ซึ่งราคาก็ค่อนข้างสูง

ในเล่ม ผู้เขียนให้คำแนะนำเรื่องการใช้สีทั้งกับงานพิมพ์และงานออกแบบเว็บ คุณจะได้รู้ว่าหากคุณอยากออกแบบเว็บหรืองานพิมพ์ให้ออกไปในอารมณ์แบบเยือกเย็น หรือสะท้อนบุคลิกเรียบหรู น่าจะเลือกสีแบบไหน สำหรับนักออกแบบหน้าใหม่น่าจะลองใช้เล่มนี้เป็นคู่มือเพื่อพัฒนาฝีมือในอนาคต นี่ว่าจะให้ Art Designer ที Office ไปซื้ออ่านเหมือนกัน

Tags: ธวัชชัย ศรีสุเทพ, creative color schemes, Web Design, ชุดสี, เว็บ

Wordpress ตั้งแต่เวอร์ชั่น 1.5 ขึ้นไปมีfeature ที่ช่วยให้แต่งแต้มสีสัน post ของเราด้วย Emoticons หรือ อีกนัยหนึ่งคือ เครื่องหมายแสดงอารมณ์ เช่น หากเราต้องการแสดง อารมณ์ยิ้ม==>  แบบนี้ เราก็สามารถพิมพ์  ” “  ได้เลย Script ของ Wordpress มันจะแปลง text ให้เป็น icon แสดงอารมณ์ให้เราทันที

แต่การที่จะให้มันแสดง Emoticons โดยอัตโนมัติเราต้องไปกำหนดให้ใช้ feature นี้ก่อนโดย (more…)