Author Archive

  • 08 Sep

    Posted by


    Category

    การจัดการภาพด้วย Crop and Square Thumbnails

    0

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

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

    หากคุณกำลังมองหาฟังก์ชั่นสำหรับการจัดการในลักษณะนี้อยู่ ให้เปิดเข้าไปที่ http://typo3.org/extensions/repository/ แล้วใช้คำว่า “crop” เพื่อค้นหา extension ที่มีชื่อว่า “Crop and Square Thumbnails” ดาวน์โหลดแล้วลองติดตั้งในเว็บไซต์ เพื่อทดสอบการทำงาน หากคุณต้องการข้อมูลเพิ่มเติมเกี่ยวกับการใช้งาน ก็สามารถอ่านได้ที่ http://typo3.org/documentation/document-library/extension-manuals/tkcropthumbs/1.2.4/view/1/1/

    สนุกกับการเรียนรู้แบบไม่มีขีดจำกัดกับไอบีเอสกรุงเทพนะค่ะ

  • 02 Sep

    Posted by


    Category

    แก้ปัญหา backend interface error

    4

    มือใหม่อาจจะข้องใจกับปัญหาที่เกิด และยังคงไม่เข้าใจว่าเกิดขึ้นได้อย่างไร เมื่อคุณเจอปัญหาดังภาพข้างล่างนี้

    ข้อผิดพลาดที่เกิดจาก typo3 backend

    วิธีแก้ปัญหาคือให้คุณเปิดการใช้งาน Compression ที่ .htaccess บรรทัดบนสุดของไฟล์ ดังนี้ค่ะ

    <FilesMatch “\.js\.gzip$”> AddType “text/javascript” .gzip
    </FilesMatch>
    <FilesMatch “\.css\.gzip$”> AddType “text/css” .gzip</FilesMatch>
    AddEncoding gzip .gzip

    ทำการบันทึกไฟล์และลองรีเฟรช (Ctrl+F5) อีกครั้งค่ะ ^^
    ทีนี้ก็สามารถทำงานกันได้แล้วค่ะ

    มีความสุขในการเรียนรู้ TYPO3 กับ ไอบีเอสกรุงเทพนะค่ะ

  • 26 Aug

    Posted by


    Category

    TYPO3 และการกำหนดค่า ไม่อนุญาตให้คลิ๊กขวาบนหน้าเว็บไซต์ (Simple Right Click Disable on TYPO3)

    0

    เพื่อเป็นการป้องกันข้อมูลบนหน้าเว็บและสร้างความรำคาญเล็กน้อยให้กับบรรดา “นักก๊อปปี้ข้อมูลหน้าเว็บไซต์คนอื่นแล้วนำมาวางเพื่อเป็นข้อมูลของตัวเอง” เราใช้ JavaScript โค้ดแบบไม่ซับซ้อนมาก ทำการกำหนดค่าให้อยู่ในส่วนของ header ซึ่งสามารถกำหนดได้ใน TYPO3 Template Setup ดูตัวอย่างด้านล่างนี้ค่ะ

    page.headerData.20110825 = TEXT
    page.headerData.20110825.value (
    <script language=JavaScript> var message=”Function Disabled!”; function clickIE4(){ if (event.button==2){ return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function(“return false”) </script>
    )

    ลองไปใช้กันดูค่ะ ;-)

    ไอบีเอสกรุงเทพ

  • 21 Aug

    Posted by


    Category

    การกำหนดชนิดของ HTML ใน TYPO3 (TYPO3 DocType)

    18

    การกำหนดชนิดของ HTML ใน TYPO3 สามารถทำได้หลากหลายและแตกต่างกันออกไปในแต่ละหน้า ด้วยการใช้ TYPO3 template setup อาทิ

    config.doctype = html5
    config.xhtmlDoctype = html5
    config.xmlprologue = none
    config.xhtml_cleaning = all

    เมื่อคุณดูโค้ดที่หน้าเว็บไซต์ จะเห็นการแสดงผลดังนี้

    <!DOCTYPE html>

    ชนิดของ HTML ที่สามารถกำหนดได้มีดังนี้

    html5 (HTML5 doctype)
    xhtml_trans (XHTML 1.0 Transitional doctype)
    xhtml_frames(XHTML 1.0 Frameset doctype)
    xhtml_strict (XHTML 1.0 Strict doctype)
    xhtml_basic (XHTML basic doctype)
    xhtml_11 (XHTML 1.1 doctype)
    xhtml_2 (XHTML 2 doctype)
    none (NO doctype at all)

    การเลือกใช้งานขึ้นอยู่กับความต้องการค่ะ

  • 04 Aug

    Posted by


    Category

    compression level ใน TYPO3 คืออะไร

    0

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

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

    Compression Level ใน TYPO3 คือ API สำหรับการบีบอัดข้อมูลทั้งส่วนที่เป็นด้านหน้าการแสดงผล และส่วนของผู้จัดการระบบ เพื่อช่วยให้ TYPO3 โหลดข้อมูลได้เร็วขึ้น

    การกำหนดค่าของ Compression มีดังนี้
    ขั้นแรกให้ไปเพิ่มการกำหนดค่าการทำงานใน localconf.php ที่อยู่ภายใต้โฟลเดอร์ typo3conf ด้วยสองบรรทัดข้างล่างนี้

    $TYPO3_CONF_VARS['BE']['compressionLevel'] = ’9′;
    $TYPO3_CONF_VARS['FE']['compressionLevel'] = ’7′;

    จากนั้นให้ไปเพิ่มค่าใน .htaccess ไฟล์เพื่อระบุให้กับ apache เข้าใจของค่าที่เรากำหนดนี้
    <FilesMatch “\.js\.gzip$”>
    AddType “text/javascript” .gzip
    </FilesMatch>
    <FilesMatch “\.css\.gzip$”>  AddType “text/css” .gzip
    </FilesMatch>
    AddEncoding gzip .gzip

    การที่คุณจะใช้งานระบบนี้ได้ ก็ต้องแน่ใจว่าเซิร์ฟเวอร์เปิดการใช้งาน gzip เรียบร้อยแล้วค่ะ

  • 02 Aug

    Posted by


    Category

    แพ็คเกจ TYPO3 ตัวใหม่ (ibstvbeta 4) ฝีมือคนไทย มีให้ดาวน์โหลดแล้วจ้า

    0

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

    แพ็คเกจทำเว็บไซต์แบบมืออาชีพด้วย IBSTV

    ตัวอย่างแพ็คเกจประกอบไปด้วยฟังก์ชั่นการทำงานสำคัญ ๆ ดังนี้

    • โครงสร้างแม่แบบด้วย typoscript
    • ใช้ templavoila สำหรับการสร้าง multi-layouts
    • CSS Framwork ด้วย YAML
    • สนับสนุน CSS3
    • HTML5 สำหรับการแสดงผลหน้าเว็บ
    • รองรับการทำงานของ SEO
    • และฟังก์ชั่นการทำงานอื่นๆ อีกมากมาย

    หากคุณคือคนหนึ่งที่สนใจในการใช้งาน TYPO3 อย่าพลาดในการดาวน์โหลดแพ็คเกจมาใช้กันนะค่ะ

    << ดาวน์โหลดแพ็คเกจใหม่ที่นี่ >>

  • 21 Jul

    Posted by


    Category

    ทั่ว ๆ ไปเกี่ยวกับแม่แบบ

    12

    การใช้งานโดยทั่วไปสำหรับการพัฒนา TYPO3 บางคนเลือกการพัฒนาโดยใช้ Templavoila ก็สามารถทดสอบด้วยการติดตั้งด้วย IBSTVBETA3 เพื่อดูโครงสร้างการทำงานและวิธีการ map แม่แบบง่าย ๆ ผ่านตัวอย่างที่มีอยู่ แต่ถ้าบางคนเลือกใช้ Autoparser ก็ให้ดาวน์โหลดตัวอย่างแพ็คเกจตัวอย่างมาลองติดตั้งเพื่อดูความแตกต่างในวิธีการใช้งานค่ะ

  • 13 Jul

    Posted by


    Category

    สร้าง sub menu ด้วย TypoScript

    3

    มือใหม่ที่กำลังสร้าง TYPO3 Template และ ต้องการสร้าง sub menu สำหรับอำนวยความสะดวกในการเข้าถึงหน้าเว็บย่อย ๆ ในเว็บไซต์ของเราอย่างเป็นระเบียบ ไอบีเอสกรุงเทพ มีตัวอย่างดี ๆ สำหรับการสร้าง submenu ด้วย TypoScript มาฝากกันค่ะ

    temp.submenu.20 = HMENU
    temp.submenu.20 {
    wrap = |
    entryLevel =0
    1 = TMENU
    1 {
    expAll = 0
    noBlur = 1
    wrap = |
    NO = 1
    NO.ATagTitle.field = subtitle
    NO.allWrap = |
    NO.wrapItemAndSub = |
    NO.stdWrap.htmlSpecialChars = 1
    NO.linkWrap = |
    NO.ATagBeforeWrap = 1
    ACT < .NO
    ACT = 1
    ACT.allWrap = |
    ACT.wrapItemAndSub = |
    ACT.doNotLinkIt = 1
    ACT.stdWrap.htmlSpecialChars = 1
    CUR < .NO
    CUR = 1
    CUR.allWrap = |
    CUR.wrapItemAndSub = |
    CUR.doNotLinkIt = 1
    CUR.stdWrap.htmlSpecialChars = 1
    IFSUB = 1
    IFSUB < .NO
    IFSUB.linkWrap = |
    }
    2 < .1
    2.wrap = <ul class=”level2″>|</ul>
    3 < .1
    3.wrap = <ul class=”level3″>|</ul>
    4 < .1
    4.wrap = <ul class=”level4″>|</ul>

    }
    temp.submenu.20.if.isTrue = 1

     

  • 09 Jul

    Posted by


    Category

    Ratings, Chgallery และ jQuery

    0

    สำหรับนักพัฒนาระบบ TYPO3 ที่กำลังมองหา solutions สำหรับการทำงานเกี่ยวกับภาพและการให้คะแนนโหวตสำหรับภาพนั้น ๆ แล้ว อาจจะต้องปวดหัวสักเล็กน้อยเมื่อต้องปรับเปลี่ยนการทำงานจาก prototype ให้เป็น jQuery

    ฟังก์ชั่นแนะนำสำหรับใช้งานร่วมกันก็มี ratings chgallery และ t3jquery ให้ทำการติดตั้งเอ็กเทนชั่นทั้งหมดในระบบและกำหนดค่าสำหรับการทำงานให้เรียบร้อยก่อนทำการปรับเปลี่ยนโค้ดการทำงานของ rating ดังต่อไปนี้

    function tx_ratings_submit(id, rating, ajaxData, check) {
    jQuery(‘#tx-ratings-display-’ + id).css(‘visibility’, ‘hidden’);
    jQuery(‘#tx-ratings-wait-’ + id).css(‘visibility’, ‘visible’);
    jQuery.ajax({
    type: ‘POST’,
    url: ‘index.php?eID=tx_ratings_ajax’, async: true,
    data: ‘ref=’ + id + ‘&rating=’ + rating + ‘&data=’ + ajaxData + ‘&check=’ + check,
    success: function() {                location.reload();        }
    });
    }

    เนื่องจากเวอร์ชั่นของ typo3 ปัจจุบันปรับระบบเป็นการใช้ caching เต็มรูปแบบทำให้เกิดปัญหากับ ajax ที่ไม่สามารถ reload ข้อมูลในขณะนั้นได้ จึงจะต้องทำการ reload หน้านั้นๆ ไป หลังจากที่ผู้ใช้ทำการโหวตนั่นเอง ดูตัวอย่างด้านล่าง

    ratings, chgallery, t3jquery

  • 05 Jul

    Posted by


    Category

    รู้ความต้องการระบบก่อนการติดตั้ง TYPO3

    3

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

    สำหรับนักพัฒนาเว็บไซต์ที่ต้องการพัฒนาเว็บไซต์ด้วย TYPO3 ก็จำเป็นจะต้องรู้ความต้องการของระบบ เพื่อให้สามารถทำงานได้อย่างราบรื่นนั่นเอง

    เรามาดูความต้องการของระบบที่ซอฟต์แวร์ตัวนี้ต้องการ ว่ามีอะไรบ้าง

    1. ระบบปฏิบัติการ จะเป็น ลีนุกส์ แม็ค  หรือวินโดวส์ ก็ได้ ตามแต่สะดวก สำหรับคนที่ใช้วินโดวส์ ก็ขอให้เลือก เวอร์ชั่นที่มากกว่า เอ็กซ์พี เนื่องจากเวอร์ชั่นนี้ทางผู้ผลิตเองจะเลิกสนับสนุนการทำงานแล้ว
    2. เว็บเซิร์ฟเวอร์ (Web Server) เช่น Apache แนะนำให้ใช้เวอร์ชั่นตั้งแต่ 2.x ขึ้นไป เนื่องจากมีฟังก์ชั่นการทำงานพี่เพียงพอต่อการรันเว็บไซต์
    3. ฐานข้อมูล (Database Server) ในที่นี้แนะนำเป็น MySQL เวอร์ชั่น 5.x ขึ้นไป
    4. ซอฟต์แวร์ตัวกลาง (Middleware) ก็แนะนำเป็น PHP version 5.3 ก็จะดีทีเดียว
    5. บราวเซอร์ (Browser) แนะนำเป็น Chrome หรือ Mozilla Firefox เนื่องจากฟังก์ชั่นเสิรม (Add On) สำหรับการพัฒนาเว็บไซต์เพียบ แถมยังใช้ได้ฟรีอีกด้วย
    6. ซอฟต์แวร์สำหรับการแก้ไขโค้ด (Editor) ก็ตามแต่สะดวก เช่น editpluse netbean, eclipse, หรือ notepad ++ ก็ได้

    หากคนที่เป็นมือใหม่จริง ๆ หรือน้องใหม่ที่พึ่งจบมาแล้วยังเก้ ๆ กัง ๆ ว่าทำไมเยอะแยะอย่างนี้ พอจะมีข้อไหนที่สามารถรวมกันแล้วติดตั้งครั้งเดียวได้เลยหรือเปล่า ก็มีซอฟต์แวร์ที่รวมข้อ 2 – 4 ไว้ด้วยกันอยู่คือ XAMPP อ่านคู่มือการติดตั้งก่อนนะ ถึงค่อยดาวน์โหลดแล้วติดตั้งลงในเครื่อง

    ส่วนการกำหนดค่าเพิ่มเติมให้กับ PHP (php.ini) มีดังนี้

    1. Memory limit สำหรับการใช้งานอย่างน้อย 128 เมกะไบต์
    2. Safe Mode สำหรับการใช้งานจะต้องถูกปิด (OFF)
    3. Execute time สำหรับการใช้งานอย่างน้อย 60 วินาที

    อย่าลืมรันเซอร์วิสของ Apache ทุกครั้งที่มีการปรับเปลี่ยนไฟล์ php.ini ถ้าบางคนไม่สามารรันเซอร์วิสของ Apache ได้ ก็ให้ปิดการทำงานของ MSN หรือ Skype ก่อน เนื่องจากซอฟต์แวร์ทั้งสองตัวนี้ ใช้การทำงานพอร์ตเดียวกับ Apache ค่ะ

    ขอให้มีความสุขในการเริ่มต้นนะค่ะ


Page 2 of 3«123»