HTML

การปรับใช้ HTML Textbox ใน Drupal 7 ร่วมกับ WYSIWYG และ CKEditor จัดตำแหน่งย่อหน้า และปุ่มเลือกสีตัวอักษร

เป็นที่ทราบกันดีว่า โปรแกรม Drupal ตั้งแต่ในอดีต มาจนถึงเวอร์ชั่น 7 นั้นมีข้อจำกัดเรื่องกล่องข้อความ (เนื้อหา) Textbox ที่ไม่มีเครื่องมืออำนวยความสะดวกในการจัดการความสวยงามของเนื้อหา โดยค่าเริ่มต้นของ Drupal 7 ก็ยังคงเป็นกล่องว่างๆ พร้อมสำหรับพิมพ์ Plain Text เท่านั้น และหากต้องการปรับแต่งความสวยงามของเนื้อหา ผู้ใช้จำเป็นต้องมีความรู้เกี่ยวกับคำสั่ง HTML และ CSS พอสมควร

Color Scheme Designer

พอดีมีคนถาม Hex color ค่าสี สำหรับเอาไปใช้งานในเว็บไซต์ เลยลองๆ หาดูก็มีหลายเว็บที่ให้บริการ และบางเว็บก็มีบริการให้ดาวน์โหลดโปรแกรมมาใช้ในเครื่องได้ด้วย (แต่ต้องจ่ายเงินซื้อ)

Color Scheme

ลองดูตามนี้ครับ
- www.colorschemedesigner.com
- www.colorschemer.com
- www.colorcombos.com
- beta.dailycolorscheme.com
- kuler.adobe.com

Move to FCKeditor

ได้ยินชื่อของ FCKeditor เมื่อไม่นานมานี้ หลังจากได้ลองเล่นและหาข้อมูลเกี่ยวกับ drupal โดยก่อนหน้านี้ใช้งาน HTML text editor ที่ชื่อว่า TinyMCE ซึ่งทำงานคล้ายกัน แต่ FCKeditor เหมือนจะจัดการไฟล์อัพโหลดได้ง่ายกว่า

หน้าตาของ FCKeditor แบบ full function
FCKeditor

หน้าตาของ TinyMCE แบบ full function
tinymce

FCKeditor คือชุดโค้ดที่ช่วยให้เราพิมพ์ข้อความในช่อง <textarea> แบบ WYSIWYG คือ แสดงผลได้อย่างที่เราต้องการ โดยไม่จำเป็นต้องรู้ภาษา HTML เลยก็ได้ ที่กล่าวว่าจัดการไฟล์ได้ง่ายกว่า TinyMCE เพราะ FCKeditor ว่ามีระบบ upload, browse มาให้พร้อม ส่วน TinyMCE จะต้องเอาตัวใช้ตัวช่วยคือ MCImageManager และ MCFileManager ซึ่งทั้งสองอันไม่ฟรี (TinyMCE และ FCKeditor เป็นโอเพ่นซอร์ซ)

แถบเครื่องมือ Upload ใน FCKeditor
fckeditor upload

ผมได้ทดลองเอา 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
my fckeditor

ปล. ไฟล์ทั้งหมดของ FCKeditor มีขนาดใหญ่กว่า TinyMCE สองเท่า แต่รู้สึกว่า FCKeditor จะโหลดได้เร็วกว่า

How to XHTML 1.0

หลักการทำงานของไฟล์ 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> ปิดเสมอ

Javascript HTML WYSIWYG editor

ก่อนหน้านี้เคยได้เอาโค้ด javascript ที่เป็นช่องสำหรับพิมพ์ข้อความ "JS-RichEdit" มาใช้อยู่ก่อนหน้านี้ แต่ด้วยความไม่พอใจในสิ่งที่มี อิอิ... ก็ได้ค้นหามาเรื่อยๆ ล่าสุดเจอโค้ด javascript ที่ทำงานงานได้มากกว่าเดิม "TinyMCE" ซึ่งเป็น open source ที่ถูกนำไปใช้ในโปรแกรมเว็บแอพริเคชั่น wordpress.org

โดยตัว TinyMCE นี้มีให้เราเลือกใช้อยู่ 4 ขนาด (นับจากเครื่องมือ) เช่น Word Style, Simple Style ฯลฯ

แต่ตอนนี้กำลังนำมาปรับใช้ กับเว็บต่างๆที่ดูอยู่ ดูสิว่ามันจะใช้ได้ขนาดไหน (^_^!)

...... 

หน้าตาของ JS-RichEdit

หน้าตา TinyMCE

มาทำเว็บไซต์ส่วนตัวเล่นๆ กันดีกว่า

ก่อนหน้านี้การทำเว็บไซต์ส่วนตัวหลายคนอาจมองว่าเป็นเรื่องยาก แต่ในปัจจุบัน หลังจากที่ได้ก้าวผ่านช่วงเวลา Web 1.0 มาแล้ว ตอนนี้เค้าเล่าลือกันว่าพวกเราชาว Cyber นี้กำลังอยู่ในยุค Web 2.0 (** หมายเหตุ ดูตารางความแตกต่างระหว่าง Web 1.0 และ Web 2.0 ได้ในตอนท้าย **)

ในปัจจุบันการทำเว็บไซต์ เข้ามาใกล้ตัวเรามากขึ้นเรื่อยๆ โดยบางเว็บได้เปิดให้บริการ bloging (เว็บ blog) ที่สมาชิกสามารถเข้ามาเขียนข้อความ ปรับแต่งรูปแบบให้เป็นของตัวเอง (ได้นิดหน่อย) แล้วนำไปโชว์ให้กับเพื่อนๆ ได้อ่าน แลกเปลี่ยนความคิดเห็นกัน

Subscribe to RSS - HTML