HTML
Color Scheme Designer
February 19, 2009 - 11:50pm | by poakpongพอดีมีคนถาม Hex color ค่าสี สำหรับเอาไปใช้งานในเว็บไซต์ เลยลองๆ หาดูก็มีหลายเว็บที่ให้บริการ และบางเว็บก็มีบริการให้ดาวน์โหลดโปรแกรมมาใช้ในเครื่องได้ด้วย (แต่ต้องจ่ายเงินซื้อ)
ลองดูตามนี้ครับ
- www.colorschemedesigner.com
- www.colorschemer.com
- www.colorcombos.com
- beta.dailycolorscheme.com
- kuler.adobe.com
Move to FCKeditor
September 20, 2008 - 12:38am | by poakpongได้ยินชื่อของ FCKeditor เมื่อไม่นานมานี้ หลังจากได้ลองเล่นและหาข้อมูลเกี่ยวกับ drupal โดยก่อนหน้านี้ใช้งาน HTML text editor ที่ชื่อว่า TinyMCE ซึ่งทำงานคล้ายกัน แต่ FCKeditor เหมือนจะจัดการไฟล์อัพโหลดได้ง่ายกว่า
หน้าตาของ FCKeditor แบบ full function
หน้าตาของ TinyMCE แบบ full function
FCKeditor คือชุดโค้ดที่ช่วยให้เราพิมพ์ข้อความในช่อง <textarea> แบบ WYSIWYG คือ แสดงผลได้อย่างที่เราต้องการ โดยไม่จำเป็นต้องรู้ภาษา HTML เลยก็ได้ ที่กล่าวว่าจัดการไฟล์ได้ง่ายกว่า TinyMCE เพราะ FCKeditor ว่ามีระบบ upload, browse มาให้พร้อม ส่วน TinyMCE จะต้องเอาตัวใช้ตัวช่วยคือ MCImageManager และ MCFileManager ซึ่งทั้งสองอันไม่ฟรี (TinyMCE และ FCKeditor เป็นโอเพ่นซอร์ซ)
แถบเครื่องมือ Upload ใน FCKeditor
ผมได้ทดลองเอา FCKeditor ตามติดตั้งใน poakpong.com แทน TinyMCE ที่ใช้อยู่ก่อน โดยวิธีการติดตั้งก็อ่านได้จากเว็บไซต์ http://docs.fckeditor.net มีบอกไว้ละเอียดพอสมควร หรือจะอ่านจาก clinicaestet.ro/FCKeditor/_docs ก็ได้ (เหมือนจะอ่านง่ายกว่า)
สิ่งที่ผมปรับแต่งใช้เอง เช่น
- ลดจำนวน Toolbar ให้เหลือเฉพาะที่ใช้งานประจำ (รายละเอียด Configuration/Toolbar)
- ปรับขนาดช่อง <textarea> ให้พอดีกับเวลาแสดงผลหน้าเว็บ (ดัดแปลงจากกระทู้นี้ .. FCKeditor .. Toolbox textarea)
- ปิดฟังก์ชั่น browse server ให้เหลือแต่ upload อย่างเดียว เพื่อความรวดเร็ว (รายละเอียด Configuration/Built in File Browser และ ImageUpload)
ปรับแต่งแล้วจะได้หน้าตาประมาณนี้ :P
ปล. ไฟล์ทั้งหมดของ FCKeditor มีขนาดใหญ่กว่า TinyMCE สองเท่า แต่รู้สึกว่า FCKeditor จะโหลดได้เร็วกว่า
How to XHTML 1.0
September 13, 2007 - 10:34am | by poakpongหลักการทำงานของไฟล์ XHTML 1.0
• มีการกำหนด DOCTYPE ที่เหมาะสมกับเอกสาร แบ่งเป็นแบบเข้มงวด, แบบยืดหยุ่น, และแบบเฟรม
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
• มีการใช้ <tag></tag> ที่มีการจัดวางตำแหน่งที่ถูกต้อง
<p>here is an emphasized <em>paragraph</em>.</p>
• ต้องใช้ตัวหนังสือแบบเล็กเสมอ
<p></p>
• จะต้องมี <tag> ปิดเสมอ
<p>here is a paragraph.</p> <p>here is another paragraph.</p>
<br />
<hr />
• ค่าของ attribute ต่างๆ ใน <tag> จะต้องอยู่ในเครื่องหมายคำพูด "..."
<td rowspan="3"></td>
• จะต้องใช้คำขยาย attribute แบบเต็ม ไม่ให้ใช้แบบย่อ
<dl compact="compact"></dl>
<option selected="selected"></option>
<input type="radio" checked="checked" />
• ให้ใช้ attributes ชนิด id แทน name
<a href="#foo">...</a>
<a id="foo" name="foo">...</a>
Javascript HTML WYSIWYG editor
November 1, 2006 - 10:58pm | by poakpongก่อนหน้านี้เคยได้เอาโค้ด javascript ที่เป็นช่องสำหรับพิมพ์ข้อความ "JS-RichEdit" มาใช้อยู่ก่อนหน้านี้ แต่ด้วยความไม่พอใจในสิ่งที่มี อิอิ... ก็ได้ค้นหามาเรื่อยๆ ล่าสุดเจอโค้ด javascript ที่ทำงานงานได้มากกว่าเดิม "TinyMCE" ซึ่งเป็น open source ที่ถูกนำไปใช้ในโปรแกรมเว็บแอพริเคชั่น wordpress.org
โดยตัว TinyMCE นี้มีให้เราเลือกใช้อยู่ 4 ขนาด (นับจากเครื่องมือ) เช่น Word Style, Simple Style ฯลฯ
แต่ตอนนี้กำลังนำมาปรับใช้ กับเว็บต่างๆที่ดูอยู่ ดูสิว่ามันจะใช้ได้ขนาดไหน (^_^!)
......
หน้าตาของ JS-RichEdit
หน้าตา TinyMCE
มาทำเว็บไซต์ส่วนตัวเล่นๆ กันดีกว่า
January 18, 2006 - 3:13am | by poakpongก่อนหน้านี้การทำเว็บไซต์ส่วนตัวหลายคนอาจมองว่าเป็นเรื่องยาก แต่ในปัจจุบัน หลังจากที่ได้ก้าวผ่านช่วงเวลา Web 1.0 มาแล้ว ตอนนี้เค้าเล่าลือกันว่าพวกเราชาว Cyber นี้กำลังอยู่ในยุค Web 2.0 (** หมายเหตุ ดูตารางความแตกต่างระหว่าง Web 1.0 และ Web 2.0 ได้ในตอนท้าย **)
ในปัจจุบันการทำเว็บไซต์ เข้ามาใกล้ตัวเรามากขึ้นเรื่อยๆ โดยบางเว็บได้เปิดให้บริการ bloging (เว็บ blog) ที่สมาชิกสามารถเข้ามาเขียนข้อความ ปรับแต่งรูปแบบให้เป็นของตัวเอง (ได้นิดหน่อย) แล้วนำไปโชว์ให้กับเพื่อนๆ ได้อ่าน แลกเปลี่ยนความคิดเห็นกัน
ซึ่งสำหรับบางคนแค่ bloging ยังไม่พอเพื่อรอบรับความต้องการมากพอ ก็ต้องขยับขยาย เปลี่ยนรูปแบบเว็บส่วนตัวกันไป โดยเริ่มต้นจาก Free Host ที่เราสามารถนำไฟล์ html ของเรา ที่ทำเอาไว้ อัพโหลดขึ้นไปแสดงในเว็บไซต์ที่มีบริการไว้ได้เลย - ยกตัวอย่างเช่น www.geocities.com สำหรับผู้ที่มี email ของ yahoo อยู่แล้วสามารถเปิดใช้บริการได้ทันที - หรือ Free Host อื่น (เช่น Thai.net, Sanook.to ฯลฯ หาเพิ่มเติมได้จากเว็บรวมลิงก์ทั่วไป)
แต่ด้วยข้อจำกัดของ Free Host ในบางครั้ง ก็ยังไม่ตอบสนองความต้องการอยู่ดี ไม่ว่าจะเป็นการสนทนาผ่านเว็บ การเก็บข้อมูลสมาชิก หรือการติดต่อกันในรูปแบบอื่นๆ ทำให้มีบริการ Free Webboard, Free Guestbook ออกมาให้บริการมากมาย
จนในที่สุดด้วยการที่ต้องการให้ทุกส่วนของเว็บไซต์ให้เป็นอันหนึ่งอันเดียวกันทุกหน้า (ก่อนหน้านี้อาจจะใช้ Free Host ของที่หนึ่ง และ Free Webboard ของอีกที่หนึ่ง) เลยทำให้ต้องถึงขึ้นเสียเงินสำหรับเช่า Web Hosting เพื่อจัดทำเว็บในสไตล์ของตนเองในที่สุด
...
สำหรับ Technic ในการสร้าง โฮมเพจด้วยตัวเองโดยใช้ html สามารถดาวน์โหลดไฟล์ EasyHTML.pdf (Acrobat file) นี้ไปลองอ่านเพื่อเป็นพื้นฐานดูครับ - หรือจะลองหาอ่านจากเว็บทั่วไปก็มีให้เลือกเยอะ
...
หลังจากทำเว็บไซต์ได้จาก html แล้วคราวนี้ก็ต้องมาทำด้วย script อื่นๆ ไม่ว่าจะเป็น javascript, php, asp หรืออื่นๆ ตามแต่จะเลือกหามาใช้งาน การใช้งาน php จะต้องมีความรู้ด้านภาษาของคอมพิวเตอร์บ้าง (สักนิดนึงเพื่อทำความเข้าใจ - แต่ถ้าไม่เป็นเลยก็ฝึกกันได้) โดยในเว็บ poakpong.com นี้ใช้ php script + html ในการแสดงผล - สำหรับคำสั่ง php สามารถดาวน์โหลดได้จากที่นี่ เริ่มต้นสร้างเว็บด้วย PHP (PHP_editor.pdf)
สำหรับผู้ที่สนใจจะทำเว็บไซต์ด้วย PHP + html จะต้องมี Web Hosting ที่รองรับด้วยเช่นกัน (บาง Web Hosting ไม่สนับสนุน PHP) และหากต้องการทดสอบระบบ Web Server ภายในเครื่องของเราเอง ก็สามารถหามาติดตั้งและใช้งานได้ - สำหรับ Windows PC (จะต้องเป็น Windows 2000/XP ขึ้นไป) สามารถหาข้อมูลเพิ่มเติมได้จาก Apache Setup, การติดตั้ง PHP Interpreter, การติดตั้ง MySQL Database Server, ติดตั้ง phpMyAdmin - สำหรับ Macintosh (Mac OS X 10.3 ขึ้นไป) สามารถหาข้อมูลได้จาก ติดตั้ง Apache Web Server, PHP และ MySQL ง่ายๆ สำหรับ Mac OS X Panther (freemac.net)
หลังจากติดตั้งเสร็จแล้วก็สามารถลงมือเอา script ที่เขียนมาทดสอบกันได้เลยครับ :p -- หากคุณใช้เพียงแค่ html ในการสร้างเว็บไซต์ ก็ไม่จำเป็นต้องติดตั้ง Apache Server, PHP, MySQL, phpMyAdmin ที่กล่าวมาข้างต้น
...
อ่านแล้วอาจจะดูงงๆ แต่ก็ต้องค่อยๆ ทำความเข้าใจนะครับ หาจับจุด จับประเด็นได้ ก็จะสามารถสร้างเว็บไซต์ได้ถูกใจของคุณแน่นอน ;)
สรุป
• หากคุณ ต้องการมีเว็บไซต์ส่วนตัวแบบเบสิก สามารถใช้บริการของ Free Host และใช้เพียงคำสั่ง HTML ก็สามารถตอบสนองได้แล้ว (เครื่องมือสำหรับช่วยในการสร้างเว็บไซต์ - ใน Windows PC สามารถหาได้จาก Thaiware.com - Web Authoring และสำหรับ Mac OS หาได้จาก Macupdate.com - Search : html)
• แต่ถ้าหากคุณต้องการมีเว็บไซต์ที่สามารถเพิ่มลูกเล่น การติดต่อกันผ่านเว็บไซต์ ฐานข้อมูล จำเป็นต้องใช้ Web Hosting ที่ให้บริการ Apeche, PHP, MySQL ฯลฯ เพื่อที่จะตอบสนองความต้องการได้เต็มที่
...
links น่าสนใจ
• Rapid CSS Editor 2005 (Windows PC)
• Macromedia Dreamweaver (ทั้ง Mac OS และ Windows PC)
• NetStudio 2000 (Windows PC)
• HTML Compress (Windows PC)
• RapidWeaver 3.2.1 (Mac OS)
• NVU 1.0 (ทั้ง Mac OS และ Windows PC)
...
ภาคผนวก
| Web 1.0 | Web 2.0 | |
| DoubleClick | --> | Google AdSense |
| Ofoto | --> | Flickr |
| Akamai | --> | BitTorrent |
| mp3.com | --> | Napster |
| Britannica Online | --> | Wikipedia |
| personal websites | --> | blogging |
| evite | --> | upcoming.org and EVDB |
| domain name speculation | --> | search engine optimization |
| page views | --> | cost per click |
| screen scraping | --> | web services |
| publishing | --> | participation |
| content management systems | --> | wikis |
| directories (taxonomy) | --> | tagging ("folksonomy") |
| stickiness | --> | syndication |
