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

ปัญหาก็คือ zoom property ไม่สามารถใช้งานได้ใน Firefox ก็เลยต้องหาวิธีแก้ปัญหา ให้สามารถทำงานได้เหมือนกับ browser ตัวอื่น

CSS Zoom property จะสามารถทำงานได้ใน IE 5.5+ Opera Safari 4 และ Chrome เท่านั้น ส่วน Firefox ตั้งแต่เวอร์ชั่น 3.5 ขึ้นไปจะใช้ -moz-transform property แทน

มาดูตัวอย่างกันเลย

div.mytestzoom {
zoom: 1.2; /* all browsers */
-moz-transform: scale(1.2); /* Firefox */
}

ในระหว่างที่กำลังนั่งพัฒนาแพ็คเกจตัวใหม่ เพื่อให้ใช้งานได้ง่ายขึ้น และรองรับกับ Features ใหม่ ๆ ที่กำลังจะมาถึง ก็เลยคิดว่า หนึ่งในนั้นก็น่าจะเป็นเรื่องของการ clean up code ให้สะอาด เวลาโหลดหน้าเว็บไซต์แล้ว จะได้ไม่รอนานจนน่าเบื่อ เพราะเว็บไซต์มัวแต่โหลดสิ่งที่ไม่จำเป็นสำหรับการแสดงผลนั่นเอง

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

ปกติ TypoScript สำหรับการ Clean Up จะกำหนดที่ Setup

# ปิดการทำงานของ prolog
config.xmlprologue = none

# ปรับแต่ง RTE ให้ทำงานได้ดีขึ้น
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.remapTag >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.DIV.class >

# ลบแท็กที่ไม่จำเป็นสำหรับภาพ
styles.content.imgtext.caption.1.wrap = |
styles.content.imgtext.caption.1.spaceBefore = 0
styles.content.imgtext.caption.1.br = 0

# ลบ wrapper  ใน elements
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.encapsTagList = cite, div, p, pre, h1, h2, h3, h4, h5, h6

# ลบบางคลาสที่ไม่ใช้งาน
lib.stdheader.3 = LOAD_REGISTER
lib.stdheader.3.headerClass =
lib.stdheader.3.headerClass.noTrimWrap = |
lib.stdheader.stdWrap.dataWrap = |

# ลบคลาสแท็กที่ไม่จำเป็นใน Headings
lib.stdheader.stdWrap.dataWrap = |
lib.stdheader.10.1.fontTag =|
lib.stdheader.10.2.fontTag =|
lib.stdheader.10.3.fontTag =|
lib.stdheader.10.4.fontTag =|
lib.stdheader.10.5.fontTag =|

# ปิดการใช้งาน breaks
lib.stdheader.10.stdWrap.wrap = |

# ลบ clear.gif
tt_content.textpic.20.spaceBelowAbove = 0
tt_content.image.20.spaceBelowAbove = 0
tt_content.header.stdWrap.space = 0|0
tt_content.stdWrap.space = 0|0
tt_content.stdWrap.spaceBefore = 0
tt_content.stdWrap.spaceAfter = 0
lib.stdheader.stdWrap.space = 0|0
tt_content.textpic.20.noStretchAndMarginCells = 1
content.headerSpace = 0|0
content.space = 0|0
tt_content.image.20.noStretchAndMarginCells = 1

# ลบแท็กที่ไม่จำเป็นสำหรับเนื้อหา
tt_content.stdWrap.prefixComment >
tt_content.header.20.dataWrap >
tt_content.header.20.prefixComment >
tt_content.default.prefixComment >
tt_content.text.stdWrap.prefixComment >
tt_content.text.20.prefixComment >
tt_content.textpic.20.stdWrap.prefixComment >
tt_content.table.20.stdWrap.prefixComment >
tt_content.mailform.20.stdWrap.wrap >
tt_content.menu.20.stdWrap.prefixComment >
tt_content.image.20.stdWrap.prefixComment >
tt_content.list.20.stdWrap.prefixComment >

# ลบช่องว่างที่ไม่จำเป็น
styles.content.imgtext.colSpace = 0
styles.content.imgtext.rowSpace = 0
styles.content.imgtext.textMargin = 10

ลองดูนะค่ะ จะได้ทำให้เว็บไซต์ของเรา โหลดได้เร็วยิ่งขึ้นค่ะ

หลาย ๆ คนเวลาใส่ลิ้งก์อีเมล์ เพื่อสร้าง mailto: ให้กับ email ใน tt_news ใน RTE Content
แต่การแสดงผลพบว่าลิ้งก์อีเมล์เหล่านั้น ที่ให้คลิ๊กได้ เป็นเพียง plain text ธรรมดา
นั่นเป็นเพราะ tt_news ปิดฟังก์ชั่นการใช้งานส่วนนี้เอาไว้

วิธีการ active ตัว configure นั้นก็คือ
ไปที่ TypoScript Setup แล้วกำหนดค่าดังนี้  plugin.tt_news.general_stdWrap.parseFunc < tt_content.text.20.parseFunc

ฟังก์ชั่นการทำงานของ TYPO3 ถ้าลองศึกษาลงลึกแล้วจะพบว่ามากมายเลยทีเดียว โดยเฉพาะอย่างยิ่ง  typoscript ที่สามารถปรับให้ใช้งานได้ตามความต้องการได้หลากหลาย อย่างเช่น การ Render Text ให้เป็น Image ด้วย GIFBUILDER

ก่อนอื่นก็จะต้องติดตั้ง ImageMagick (Linux) หรือ GraphicMagic (Windows) เพื่อให้การทำงานครบถ้วนสมบูรณ์

วันนี้นำตัวอย่างการ Render ให้กับ Main Menu ใน IBSTV Package ซึ่งจะต้องปรับแต่ง typoscript ดังนี้

lib.mainmenu.wrap = |
lib.mainmenu.10 = HMENU
lib.mainmenu.10 {
 wrap = <div class="hlist"><ul id="nav">|</ul></div>
 maxItems = 10
 entryLevel = 0
 excludeUidList = 0
 1 = TMENU
 1 { 
 expAll=1
 accessKey = 0 
 NO = 1
 NO.ATagTitle.field = abstract // description // subtitle
 NO.allWrap = |
 NO.wrapItemAndSub = <li id="first">|</li> |*| <li >|</li> |*| <li id="last">|</li>
 NO.stdWrap.htmlSpecialChars = 0
 NO.linkWrap = |
 NO.ATagBeforeWrap = 1
 NO.stdWrap.cObject = COA
 NO.stdWrap.cObject { 
 1 = IMG_RESOURCE
 1 {
 file = GIFBUILDER
 file {
 XY = [10.w]+10,[10.h]+10
 backColor = #FFFF00
 transparentBackground = 1
 format = png
 10 = TEXT
 10 {
 text.field = title
 text.case = upper
 align = right 
 fontFile = fileadmin/ibstvpackage/fonts/tahomabd.ttf
 fontSize = 20
 fontColor = #222222
 fontWeight = 1
 angle = 90
 spacing = 0
 niceText = 0
 sharpen = 99
 antiAlias = 1
 offset = 0,10
 }
 }
 stdWrap {
 prepend = TEXT
 prepend {
 dataWrap = <img class="IbstvGMenu" src="
 }
 innerWrap.cObject = COA
 innerWrap.cObject {
 10 = TEXT
 10.value = | 
 }
 append = TEXT
 append {
 current = 1
 wrap = |" alt="IbstvGMenu"/>
 }
 }
 }
 } 
 ACT < .NO
 ACT = 1
 ACT.allWrap = |
 ACT.wrapItemAndSub = <li id="first" class="current">|</li> |*| <li class="current" >|</li> |*| <li id="last" class="current">|</li>
 ACT.doNotLinkIt = 0
 ACT.stdWrap.htmlSpecialChars = 0 
 }
}

ส่วนใน localconf.php ให้กำหนดค่าดังนี้

$TYPO3_CONF_VARS['GFX']['gdlib_png'] = '1';
$TYPO3_CONF_VARS['GFX']['gdlib_2'] = '1';

เพียงเท่านี้ก็ไม่ต้องไปตัดภาพให้เสียเวลาในการ Render Text เป็น Image

ระบบข่าวสาร (tt_news) ของ TYPO3 ที่ต้องยกนิ้ว แถมด้วย Like เยอะ ๆ ในตอนนี้ ที่อำนวยความสะดวกมากมายในการ publish ข่าวสาร ความรู้ต่าง ๆ ในองค์กร เป็น Extension ที่สามารถทำ SEO ได้ดีอีกตัวหนึ่งทีเดียว

นักพัฒนา TYPO3 บางท่าน อาจจะใช้อยู่ และบางท่านยังไม่เข้าใจหรือพบกับปัญหา หรือต้องการปรับแต่งให้ tt_news เป็นไปตามความต้องการมากขึ้น ก็สามารถฝากคำถาม หรือแนวทางการแก้ไขปัญหาได้โพสนี้ค่ะ

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

1. tt_news HTML Template ที่มีการ Customize ใส่ Class และตำแหน่งที่ต้องการเช่น

<div class="news-list-container">
	<!-- ###CONTENT### begin -->
		<!-- ###NEWS### begin -->
			<div class="news-list-item-accordion">
				<h2 class="acc_trigger">###NEWS_TITLE###</h2>
				<div class="acc_container">
					<div class="block">
						###NEWS_CONTENT###
					</div>
				</div>
			</div>
		<!-- ###NEWS### end-->
	<!-- ###CONTENT###  end -->
</div>

2. CSS สำหรับช่วยในการแสดงผล ดังนี้

  .news-list-container .news-list-item-job h2.acc_trigger p {
    padding:0;
	margin: 0 0 5px 0;
    font-size: 70%;
    font-weight: normal;
	background:none;
	color:#000;
  }
  .news-list-container .news-list-item-accordion h2.acc_trigger{
    text-decoration: none;
	color:#C30020;
    display: block;
	font-weight: bold;
	font-size: 1.4em;
	padding:0 0 0 15px;
	background:url("../../images/non-active.png") no-repeat left 5px transparent;
  }
  .news-list-container .news-list-item-accordion h2.acc_trigger:hover {
	padding:0 0 0 15px;
	background:url("../../images/active.png") no-repeat left 5px transparent;
  }
  .news-list-container .news-list-item-accordion h2.active{
	padding:0 0 0 15px;
	background:url("../../images/active.png") no-repeat left 5px transparent;
  }
  .news-list-container .news-list-item-accordion .acc_container {
    margin: 0 0 5px; padding: 0;
    overflow: hidden;
    clear: both;
  }
  .news-list-container .news-list-item-accordion .acc_container .block { padding: 20px; }
  .news-list-container .news-list-item-accordion  span.news-list-morelink {display:none;}
  .news-list-container .news-list-item-accordion {
	border-bottom: 1px black dotted;
	background: url("../../images/linksbg.gif") repeat-x left bottom white;
	margin:0 0 10px 0;
  }

3. JQuery ที่มีฟังก์ชั่นการทำงานของ Accordion ถ้าหากใช้ ibstv package
เราจะเตรียม t3jquery สำหรับ migrate ฟังก์ชั่นที่ต้องการใช้แล้วทำการ generate แบบไม่ต้องไปหา jquery ที่ไหนให้ยุ่งยาก
เวลาที่ merge การใช้งาน ตรง jQuery UI Widgets ก็ให้เลือก Accordion เข้าไปด้วย จากนั้นก็ทำการ create ไฟล์สำหรับใช้งาน

4. เรียกใช้งาน JQuery ผ่านทาง TYPO Script Setup ดังนี้

includeLibs.t3jquery = EXT:t3jquery/class.tx_t3jquery.php
page.1490 = COA
page.1490 {
  10 = USER
  10.userfunc = tx_t3jquery->addJS
  20 = USER
  20.userFunc = tx_t3jquery->addJS
  20.jsdata.cObject = COA
  20.jsdata.cObject {
    1 = TEXT
    1.value (
		jQuery('div.news-list-item-job> div.acc_container').hide();
		jQuery('div.news-list-item-job> h2').click(function() {
			jQuery(this).next('div').slideToggle('fast').siblings('div:visible').slideUp('fast');
		});
	)
  }
}

เห็นหรือเปล่าว่าไม่ยากเลย ถ้าเรารู้จักนำสิ่งที่มีอยู่มาใช้ให้เป็นประโยชน์
สามารถลดเวลาในการทำ ยังถูกอกถูกใจผู้ใช้งานอีกด้วย

เมื่อเรามองซอฟต์แวร์ที่ถูกพัฒนาโดย Microsoft ที่หลากหลายและพร้อมใช้งาน แต่หลาย ๆ ครั้งเราก็ไม่เลือก ก็เพราะบางครั้งการทำงานไม่ได้อำนวยความสะดวกเลย เกิดข้อผิดพลาดต่าง ๆ มากมาย ทำให้เสียเวลา เสียโอกาส และบางครั้งกระทบต่อธุรกิจด้วย

เมื่อธุรกิจขยายตัว เกิดคำถามมากมาย เกี่ยวกับแนวทางการพัฒนา จัดการข้อมูลต่าง ๆ ลูกค้า อาทิ รหัสผู้ใช้งาน รหัสผ่าน ที่อยู่ อีเมล์ เป็นต้น ได้ง่ายขึ้น โดยที่ข้อมูลเหล่านั้นมีความถูกต้อง การต่อขยายฟังก์ชั่นให้ครอบคลุมการให้บริการ และอื่น ๆ อีกมากมายซึ่ง Microsoft Software ไม่สามารถตอบสนองความต้องการได้ทั้งหมด

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

แนวทางที่หลาย ๆ ธุรกิจเลือกคือการใช้ PHP Framework ต่าง ๆ หรือบางธุรกิจก็จะใช้การสร้างขึ้นเอง เพื่อให้ใช้งานได้ง่าย แต่จะไม่ง่ายเมื่อต้องการต่อเติมส่วนขยายต่าง ๆ หรือการสร้าง Web Service เพื่อแลกเปลี่ยนข้อมูลกับธุรกิจอื่น ๆ ได้ ซึ่ง Web Service นี้เป็นหัวใจการทำงานแบบบูรณาการ เพราะบางครั้งเราไม่รู้ว่าผลลัพธ์ที่เราต้องการ จะต้องมีวิธีการสร้างแบบไหน แค่รู้ว่าเราต้องการข้อมูลแบบไหนเพื่อใช้สำหรับธุรกิจเรา ก็ทำให้เดินหน้าธุรกิจได้ อาทิ อัตราแลกเปลี่ยนเงินตรา ราคาทองคำ เป็นต้น

FLOW3 เป็นเว็บแอพพลิเคชั่นแพลทฟอร์ม คล้าย ๆ กับ spring ใน JAVA  รวมฟังก์ชั่นการทำงานต่าง ๆ เกี่ยวกับการบูรณาการได้ดีเยี่ยม รวมถึงการรวม web service ช่วยอำนวยความสะดวกให้นักพัฒนาเว็บไซต์สามารถมองหา solution ที่จะใช้กับธุรกิจต่าง ๆ ได้หลากหลาย และรวดเร็ว ถูกพัฒนาโดย ชุมชนนักพัฒนา TYPO3 ที่แข็งแกร่ง

FLOW3 Local Running First Installation

หากคุณกำลังปวดหัวกับข้อผิดพลาดของ TYPO3 Version 4.6 ที่ลองติดตั้งอยู่แล้วละก็

ขอให้ตั้งสติกันสักหน่อย ค่อย ๆ อ่านข้อผิดพลาดที่พบแล้วลองตรวจสอบเบื้องต้นก่อนว่า

1. เรากำลังติดตั้ง TYPO3 4.6 อยู่บน PHP เวอร์ชั่น 5.3 อยู่หรือเปล่า ถ้าไม่ใช่ ก็ควร Update นะค่ะ
2. ตรวจสอบที่ PHP.INI นะค่ะ ว่าเปิดการทำงานของ extension=php_openssl.dll หรือยัง ถ้ายังก็ไปเปิดการทำงานให้เรียบร้อย แล้ว restart apache อีกทีนึงค่ะ

เท่านี้ก็สามารถติดตั้งและทดสอบ TYPO3 4.6 ได้แล้วค่ะ

เพื่อให้ความรู้ถูกกระจายไปทุกรูขุมขนของเมืองไทย และหาใช้งานได้ง่าย ๆ  จากความตั้งใจในการแบ่งปันความรู้ดี ๆ เกี่ยวกับ TYPO3 ของไอบีเอสกรุงเทพ จึงได้ทำการพัฒนาแม่แบบสำหรับให้ดาวโหลดฟรีที่
http://www.ibs-webdevelopment.com/th/download/more-free-download-for-typo3-template.html
และวางแผนที่จะเพิ่มเติมให้หลากหลาย พร้อมกับแนวทางการพัฒนาต่าง ๆ ที่สามารถเรียนรู้ได้ในแต่ละแม่แบบ

มีความสุขในการเรียนรู้ค่ะ

หลาย ๆ คนอาจจะปวดหัวกับการแปลภาษาในระบบการจัดการเนื้อหา TYPO3 ที่บางหน้ามีการแปลภาษาแต่ไม่มีเนื้อหาในภาษานั้น ๆ ก็เลยอยากที่จะซ่อนหน้าที่ไม่มีภาษานั้น ๆ เอาไว้

ส่วนการจัดการของผู้ดูแลระบบ

• ให้เข้าไปที่ Edit Page Properties ค่ะ
• เลือกแถบการแสดงผลชื่อ Behaviour ค่ะ
• คุณจะเห็นโหมด Language Localization อยู่ ให้ทำเครื่องหมายที่หน้า Hide page if no translation for current language exists
• อย่าลืมบันทึกนะค่ะ จากนั้นเคลียร์แคช แล้วทำการ Refresh ที่หน้าเว็บเพื่อดูความแตกต่างค่ะ

ตัวอย่าง Interface