JavaScript

เมื่อโปรแกรมเมอร์อารมณ์ติส ก็แนวๆ นี้แหละ

by

จาก http://bit.ly/fCTsuB “แอบชอบหนุ่มโปรแกรมเมอร์ จะแอบบอกความในใจด้วยโค๊ดแบบไหนได้มั่งอ่า”

ก็เลยเขียนเล่นๆ ช่วงที่เซงๆ กับเรื่องบางเรื่อง


World = {
    'CreateMe'  : function (n) {
        World.me = n;
        World.HaveSomeThingToTellYou = function () {
            if(World.you != null)
                return true;
            alert('Single');
            return false;
        }
        return World;
    },
    'CreateYou'  : function (n) {
        World.you = n;
        World.Love = function (u) {
            alert(World.me + " love " + u.you + ".");
        }
        return World;
    }
};

i = World.CreateMe('Me');
u = World.CreateYou('You');

if(i.HaveSomeThingToTellYou())
i.Love(u);

ร่วมด้วยช่วยกัน Say No To IE 6! สำหรับเว็บที่ใช้ jQuery (และพวก Prototype JavaScript ตัวอื่น ๆ ด้วย)

by

จาก entry หมดเวลา Internet Explorer 6 แล้ว เลิกใช้มันได้แล้ว !!! และจาก Campaign “Say No To IE 6!” จากเว็บ SaveTheDevelopers.org นั้นเค้าให้เอา code ด้านล่างนี้ไปใส่

<script src="http://www.savethedevelopers.org/say.no.to.ie.6.js"></script>

แต่ถ้าเว็บใครใช้ jQuery นี่อาจจะไม่ได้ แบบ Theme K2 ของผม วิธีอีกแบบที่สามารถทำได้ และทำงานร่วมกับ jQuery ได้ก็คือใช้ CSS – Conditional comments นั้นเอง โดยกำหนดไว้ว่าถ้า IE ที่ version น้อยกว่า 7 ให้โชว์ตัว popDown นี้ขึ้นมาครับผม

<!--[if lt IE 7]>
<script type="text/javascript" src="path/to/savethedevelopers.js"></script>
< ![endif]-->

เสร็จแล้วในไฟล์ savethedevelopers.js ก็ปรับแก้เป็นแบบนี้ครับ

jQuery(document).ready(function(){
var now = new Date();
var time = now.getTime();
var div = document.createElement('a');
var id = 'saynotoie6_div_' + time;
div.setAttribute('id',id);
div.setAttribute('href','http://www.savethedevelopers.org/');
div.setAttribute('target','_blank');
div.style.display = 'block';
div.style.color = '#1d1d1d';
div.style.textAlign = 'left';
div.style.fontFamily = 'Arial';
div.style.fontSize = '11px';
div.style.background = 'url(https://webhost.domain/path/to/savethedevelopers/PopDown.gif)';
div.style.padding = '0';
div.style.position = 'absolute';
div.style.top = '0';
div.style.right = '40px';
div.style.zIndex = '999999';
div.style.width = '330px';
div.style.height = '63px';
div.style.marginTop = '-80px';
div.style.filter = 'alpha(opacity=95)';
document.body.appendChild(div);

var animate = function(){
var myDiv = document.getElementById(id);
var value = parseInt(myDiv.style.marginTop)
myDiv.style.marginTop = value + 1 + 'px';
if(parseInt(myDiv.style.marginTop) < -1){
            var timer = setTimeout(animate,30 * 80/Math.abs(value) * .27);
        }else{
            var timer = setTimeout(hide,25000);
        }
    }

    var hide = function(){
        var myDiv = document.getElementById(id);
        var value = parseInt(myDiv.style.marginTop)
        myDiv.style.marginTop = value - 1 + 'px';
        if(parseInt(myDiv.style.marginTop) > -80){
var timer = setTimeout(hide,1.4 * 80/Math.abs(value) * 3.70);
}
}

setTimeout(animate,1000);
});

ลองเทียบกับของเก่าเค้าก็ได้นะครับ อันนี้ผมปรับให้โชว์ไว้สัก 25 วินาทีครับผม ส่วนถ้าเอาไปใช้กับ mootools หรือตัวอื่น ๆ ก็เปลี่ยนการ windows.onload เป็นแบบอื่น แทนการใช้ jQuery(document).ready(); ครับ

เรามาร่วมด้วยช่วยกันประกาศครับผม เอาพวกไม่ได้มาตรฐานออกไปจากสังคมสักทีนึงครับผม

แก้ปัญหาจุกจิกหลาย ๆ อย่างใน IE 5/6 ด้วย IE7 { css2: auto; }

by

เจ้า IE7 { css2: auto; } นั้นตอนนี้เป็น version ที่ 0.9 (alpha) แล้ว และหยุดพัฒนาตั้งแต่ปี 2005/08/19 โดยหลัก ๆ ที่เอามาใช้เพราะนำมาแก้ไขปัญหา PNG alpha transparency ใน IE5/6 นั้นเอง และ JavaScript ตัวแก้ไขตัวนี้ก็ทำงานได้ดีตลอดมา ผมนำไปใช้กับ Siampod.com และได้ผลดีมาก ๆ แต่เว็บ blog ตัวเองก็ยังไม่ได้ใส่มัน -_-‘ เดี่ยวใส่วันสองวันนี้แหละ เริ่มวาง ๆ แล้ว ;)

IE7 is a JavaScript library to make IE behave like a standards-compliant browser. It fixes many CSS issues and makes transparent PNG work correctly under IE5 and IE6.

  • supports the following CSS selectors:
    • namespace|selector
    • parent > child
    • adjacent + sibling
    • adjacent ~ sibling
    • [attr], [attr="value"], [attr~="value"] etc
    • .multiple.classes (fixes bug)
    • :hover, :active, :focus (for all elements)
    • :first-child, :last-child, only-child, nth-child, nth-last-child
    • :check, :disabled, :enabled
    • :root, :empty, :contains(), :not()
    • :before/:after/content:
    • :lang()
  • works with both HTML and XML documents
  • supports imported style sheets
  • preserves the cascade of the style sheet
  • does not alter the document structure
  • does not repeatedly query the DOM tree using JavaScript
  • uses pure CSS to enforce style sheet rules
  • supports the W3C box model in both standards and quirks mode
  • supports fixed positioning (flicker free)
  • supports overflow:visible
  • supports min/max-width/height
  • fixes broken (X)HTML elements (abbr, object)
  • standardies forms behavior
  • supports PNG alpha transparency
  • lightweight script (22K)
  • completely modular (add/remove fixes)
  • works for Microsoft Internet Explorer 5+ (Windows only)

[Update 11/11/2007 1:38am]

นั่งแก้ มันทำไมใช้ไม่ได้ก็ไม่รู้ พอหา ๆ ใน Google เจอคนมีปัญหาแบบเดียวกัน แต่สรุปได้ว่า เพราะใช้ Themes K2 นี่เอง T_T คนใช้ IE 6 ก็เศร้ากันไปนะครับ อันนี้ช่วยไม่ได้ ฮา ….

เปิดตัว PodCastsGen WebBase Version 0.0.1 Alpha

by

Link@PodCastsGen WebBase Version 0.0.1 Alpha

เป็นโปรแกรมประยุกต์ ที่ทำงานบนได้บน Web Browser โดยใช้ความสามารถของภาษา PHP และ JavaScript แล้วทำการ Export หรือ Generate Code เป็น XML ซึ่งอยู่ใน specification ของ RSS Feed และตรงตาม specification ของ Podcasts ในระดับสากลด้วย

ขั้นตอนการทำงาน และการใช้งานไม่ยุ่งยากเนื่องจากในหลักการเอาข้อมูลที่ได้จาก form ในระบบ Input data dynamic หรือการใส่ข้อมูลเชิงยืดหยุ่นนั้นเอง กล่าวคือ ระบบจะมีข้อมูลพื้นฐานที่จำเป็นก่อน นั้นคือ รายละเอียดของ Podcasts ต่างๆ ไม่ว่าจะเป็น

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

การใส่ Episodes ในโปรแกรมประยุกต์นี้ จะเป็นไปในลักษณะของการใส่ที่อยู่ของไฟล์มีเดีย ซึ่งไฟล์มีเดียที่จะเอามาใส่นั้นควรมีลักษณ์สำคัญคือ

  • มีขนาดที่ไม่ใหญ่มาก (แนะนำไม่ควรเกิน 10MB ต่อความยาวในการออกอาหาศ 1ชม.)
  • ใช้นามสกุลไฟล์เป็น mp3, m4a, m4b, acc, aiff
  • ต้องมีที่อยู่จริงอยู่แล้วใน internet ซึ่งต้องทำการ upload จากเว็บใดเว็บหนึ่งก่อน ไม่ว่าจะใช้ที่ geocities หรือ thai.net ก็ได้

ซึ่งการใส่มีเดียในแต่ละส่วนนั้น จะใช้หลักการคล้ายๆ กับการใส่ Condition ใน SmartPlaylist ของ iTunes นั้นเอง ซึ่งจะสามารถใส่มีเดียได้ไม่เกิน 10 ไฟล์ และอนาคตจะพัฒนาให้สามารถใส่ได้ไม่จำกัด

เมื่อทำการ submit ตัว form ของโปรแกรมประยุกต์แล้ว ตัวระบบจะทำการสร้างโค็ด XML ออกมาโดยแสดงใน Web Browser ของท่าน โดยที่ทางผู้ใช้ต้องทำการ save โค็ดเหล่านั้นเอง ไม่ว่าจะด้วยวิธีใดก็ตาม ตัวอย่างเช่น

Internet Explorer

  • ใช้เมนู File ตามด้วยเมนู Save As
  • ที่ Dialog Save As ให้เลือก Save as type เป็น XML Files (*.xml)
  • ที่ File name ให้ใส่ของไฟล์ลงไป
  • เอาไฟล์ดังกล่าวไป upload ขึ้นที่เว็บที่เราต้องการ
  • ตัวอย่าง http://www.yourweb.com/podcasts/yournamepodcasts.xml

Firefox

  • ใช้เมนู File ตามด้วยเมนู Save Page As
  • ที่ Dialog Save As ให้เลือก Save as type เป็น XML Document
  • ที่ File name ให้ใส่ของไฟล์ลงไป
  • เอาไฟล์ดังกล่าวไป upload ขึ้นที่เว็บที่เราต้องการ
  • ตัวอย่าง http://www.yourweb.com/podcasts/yournamepodcasts.xml

ก็เป็นอันเสร็จสิ้นวิธีการทำงาน โดยในอนาคตในขั้นตอนการจัดการไฟล์ ที่ Export ออกมาจะปรับเปลี่ยนเป็นการทำ Archive เป็น ZIP Files แทน เพื่อให้ขึ้น Dialog ให้ Download ได้เลย

และโครงการต่อไปเป็น PodCasts->Hub ที่กำลังร่างระบบอยู่ ซึ่งไม่รู้จะทำได้หรือเปล่า -_-" แต่ระบบน่ะไม่ยาก

วิธีการทำ podcast เผยแพร่

by

ผมได้ทำ podcast ของผมเองอยู่ที่ http://www.thaicyberpoint.com/podcasts ตอนนี้ผมทำ podcast ตัวแรกให้ลองฟังแล้วนะครับ ถ้ามีอะไรติชมก็บอกกันได้ครับ

ส่วนใครต้องการเอา podcast ตัวนี้ไปลองทำเองก็ง่ายมากครับ

สิ่งที่ต้องการก็มีพื้นที่เว็บใน internet ที่สนับสนุนการใช้ script PHP และพื้นที่สัก 10 – 20 MB ในการเก็บไฟล์เสียงครับ

แล้วก็หา script podcast จำพวก PHP มาลงครับ อย่างของผมก็ ลองโหลดไปแกะได้ที่นี่ครับ http://www.thaicyberpoint.com/podcasts/dircaster_v_04_podcastPHPScript.zip ทำการแตกไฟล์ zip แล้วก็ทำการปรับแก้เพียงเล็กน้อยครับ

—————————————–

// ขนาดมาที่สุดของการแสดง podcast ใน 1 ครั้ง

$maxFeed = 5;

// Title ของ Podcast ครับ

$titleTAG=”ThaiCyberPoint.com – PodCasts beta”;

// ที่อยู่ของ Podcast ครับ

$linkTAG=”http://www.thaicyberpoint.com/podcasts”;
// รายละเอียดของ Podcast ครับ ใส่เป็นภาษาไทยได้ ตอนนี้ผมปรับแต่งให้ลองรับภาษาไทยแล้วครับ
$descriptionTAG=”Public PodCast from ThaiCyberPoint.com”;
// ภาษาของ Podcast ครับ แนะนำให้ใช้ en-US ครับ
$languageTAG=”en-us”;
// คำแจ้งลิขสิทธิ์ของ Podcast ครับ
$copyrightTAG=”Creative Commons License”;
// อีเมลของ podcast ครับ
$webMasterTAG=”[email protected]”;
// ชื่อโปรแกรมที่เอามาทำ Podcast ไม่แนะนำให้ปรับเปลี่ยนครับ ถือเป็นมารยาท
$generatorTAG=”dirCast 0.4″;
// เวลาในการเข้าถึง หรือ timeout ครับ
$ttlTAG=60;

————————————-

แล้วก็ทำการ upload เข้าสู่ server ครับ ซึ่งมันเป็นไฟล์ index.php ครับ ก็เวลาเราให้ URL ก็ http://www.mysite.com/podcast/index.php หรือ http://www.mysite.com/podcast/ ก็ได้ครับ

แล้วจะเอาไฟล์เสียงขึ้นก็ทำการแก้ไข ID3 Tag ครับ แนะนำ Version 2.3 ครับ แล้วทำการ Upload ขึ้นไปที่เดียวกับไฟล์ index.php เมื่อกี้นี้ครับ ตัว script มันจะ detect เองจากไฟล์ว่า title, artist, album, year, comment, genre ว่ามีอะไรบ้างก็แนะนำให้ edit เอานะครับในไฟล์ สะดวกดีครับ

อนาคตเดี่ยวผมว่าจะ Podcast Portal ครับ ยังไงจะมาบอกอีกทีนะครับ สำหรับคนที่ไม่อยากทำ script เองครับ เพียงแต่หาพื้นที่เก็บไฟล์ก็พอน่ะครับ กำลังคิดโปรแกรมอยู่ครับ

ตัว script PHP ไม่สนับสนุนภาษาไทยในส่วนของ title, artist, album, year, comment, genre ใน ID3 Tag 2.3 นะครับ กำลังแก้ไขอยู่ครับ ตอนนี้ใช้แบบนี้ไปก่อนนะครับ