กระดาษอิเลคโทรนิค

ITRI: Industrial Technology Research Institute หรือ สถาบันวิจัยเทคโนโลยีเกี่ยวกับอุตสาหกรรม ในไต้หวันได้พัฒนาเทคโนโลยีกระดาษอิเล็กทรอนิกส์ที่สามารถใช้ซ้ำ (Resuable e-paper) ได้ ซึ่งมันอาจเปลี่ยนโฉมหน้าอุตสาหกรรมสิ่งพิมพ์ไปเลยทีเดียว

ก่อนอื่นต้องทำความเข้าใจให้ตรงกันก่อน เทคโนโลยีกระดาษอิเล็กทรอนิกส์จะไม่เหมือนกับแอพพลิเคชันอย่าง หนังสืออิเล็กทรอนิกส์ (e-book) และแท็บเล็ต (tablet) ที่วางขายอยู่ในท้องตลาดขณะนี้ โดยกระดาษอิเล็กทรอนิกส์ของ ITRI เมื่อพิมพ์ (บันทึก) ข้อมูลลงไปบนตัวมันแล้วจะไม่มีการใช้พลังงานไฟฟ้าใดๆ เหมือนอุปกรณ์ข้างต้น เนื่องจากทั้งเนื้อทั้งตัวมันจะมีคุณสมบัติคล้ายกระดาษแผ่นหนึ่ง เพียงแต่วัสดุทีใช้ทำไม่ใช่ สามารถพิมพ์ หรือบันทึกข้อมูลด้วยเครื่องพิมพ์พิเศษ ไม่ใช่เครื่องพิมพ์ทั่วไป

สำหรับกระดาษอิเล็กทรอนิกส์ที่ได้มีการพัฒนาขึ้นมานี้มีชื่อว่า i2R e-paper ซึ่งกลไกการพิมพ์ หรือบันทึกข้อมูลลงบนหน้ากระดาษฯ จะอาศัยแค่ความร้อน เพื่อบันทึกภาพที่ต้องการลงบนแผ่นทีมีคุณสมบัติคล้ายจอ LCD แต่มีความยืดหยุ่น และบางจนม้วนได้ อย่างไรก็ดี i2R e-paper สามารถทำงานร่วมกับหน่วยความจำได้ด้วย เช่น ในกรณีที่ต้องการทำป้ายที่สามารถโปรแกรมให้เปลี่ยนภาพที่แสดงเมื่อถึงเวลาที่กำหนด

ด้วยคุณสมบัติการทำงานของกระดาษอิเล็กทรอนิกส์ที่สามารถแสดงผลได้ โดยไม่ต้องใช้พลังงานไฟฟ้า อีกทั้งยังสามารถลบ เพื่อแก้ไขข้อมูลใหม่ซ้ำได้ ไม่เหมือนกระดาษที่พิมพ์แล้วไม่สามารถลบโดยใช้เครื่องที่มีลักษณะการทำงานคล้ายแฟกซ์ (ป้อน e-paper เข้าไป มันก็จะลบข้อมูลออกไปหมดเหมือนเป็นแผ่นใหม่) เพื่อนำกลับมาพิมพ์ซ้ำได้ i2R e-Paper จึงเหมาะกับการทำเป็นป้ายกระดาษที่ใช้ติดตามร้าน เพื่อลดการใช้กระดาษจริงที่ต้องมีการตัดไม้ทำลายป่า ซึ่งเจ้ากระดาษอิเล็กทรอนิกส์นี้สามารถลบและบันทึกข้อมูลเข้าไปใหม่ได้ถึง 260 ครั้ง หรือลดการทำลายต้นไม้ได้ 1 - 2 ต้นต่อแผ่น ทีมวิจัยคาดว่าจะสามารถเพิ่มจำนวนครั้งเป็น 500 ครั้ง (1 แผ่นแทนกระดาษได้มากกว่า 1 รีม) ภายในปีสองปีข้างหน้า

ITRI คาดว่า เทคโนโลยีนี้จะถูกนำไปใช้อย่างกว้างขวาง โดยเฉพาะหน้าร้านที่ต้องมีการเปลี่ยนป้ายกระดาษ และสถานที่สาธารณะต่างๆ อย่างไรก็ตาม ทีมวิจัยได้ทดลองใช้กับแอพพลิเคชันอื่นๆ ที่น่าสนใจด้วย เช่น การใช้งานเป็น e-wallpaper วอลล์เปเปอร์ที่เปลี่ยนลดลายได้หากเบื่อ หรือนาฬิกา e-paper ที่ใช้วงจรอิเล็กทรอนิกส์คอยรีเฟรชภาพในแต่ละวินาที หรือแม้แต่ e-ticket ที่สามารถนำไปใช้ซ้ำสำหรับอีเวนท์ต่างๆ ขณะนี้ทางสถาบันได้ร่วมมือกับบริษัทต่างๆ เพื่อทำเป็นผลิตภัณฑ์ที่จะวางจำหน่ายภายใน 2 ปีข้างหน้า โดย i2R e-Paper หนึ่งแผ่นต้นทุนอยู่ที่ประมาณ 2 เหรียญฯ (ประมาณ 60 บาท)

เว็บไซต์ในข่าว: reuters

Read More

Table of Contents รูปแบบใหม่บน blogger สวยงามและซ่อน/แสดงได้

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




โค้ดในการติดตั้งมี 2 รูปแบบให้เลือกดังนี้

แบบที่ 1 ตารางสารบัญแบบปกติที่มีการปรับแต่ง Style

ตัวอย่างตารางสารบัญบน blogger

http://www.xn--22cka7hxbpcb1g.cz.cc/p/table-of-contents.html

โค้ดสำหรับติดตั้ง

<link rel="stylesheet" href="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css" type="text/css" media="screen" />
<script style="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/daftarisiv2.js"></script>
<script src="http://ชื่อบล็อก.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

หรือใช้โค้ด

<link rel="stylesheet" href="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css" type="text/css" media="screen" />
<script style="text/javascript" src="http://hackublox.googlecode.com/files/daftarisiv2.js"></script>
<script src="http://ชื่อบล็อก.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

หรือใช้โค้ด

<style type="text/css">
.gfg-root {
  width : 100%;
  height : auto;
  position : relative;
  overflow : hidden;
  text-align : center;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  border: 1px solid #BCCDF0;
}
.gfg-title {
  font-size: 14px;
  font-weight : bold;
  color : #3366cc;
  background-color: #E5ECF9;
  line-height : 1.4em;
  overflow : hidden;
  white-space : nowrap;
}
.gfg-title a {
  color : #3366cc;
}
.gfg-subtitle {
  font-size: 12px;
  font-weight : bold;
  color : #3366cc;
  background-color: #E5ECF9;
  line-height : 1.4em;
  overflow : hidden;
  white-space : nowrap;
  margin-bottom : 5px;
}
.gfg-subtitle a {
  color : #3366cc;
}
.gfg-entry {
  background-color : white;
  width : 100%;
  height : 6.9em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 3px;
}
/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : auto;
  height : 100%;
  padding-left : 20px;
  padding-right : 5px;
}
.gfg-list {
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-bottom : 5px;
}
.gfg-listentry {
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  padding-left : 15px;
  padding-right : 5px;
  margin-left : 5px;
  margin-right : 5px;
}
.gfg-listentry-odd {
  background-color : #F6F6F6;
}
.gfg-listentry-even {
}
.gfg-listentry-highlight {
  background-image : url('garrow.gif');
  background-repeat: no-repeat;
  background-position : center left;
}
/*
* FeedControl customizations.
*/
.gfg-root .gfg-entry .gf-result .gf-title {
  font-size: 14px;
  line-height : 1.2em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  margin-bottom : 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
  height : 3.8em;
  color: #000000;
  margin-top : 3px;
}
/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/
.gfg-horizontal-container {
  position : relative;
}
.gfg-horizontal-root {
  height : 1.5em;
  _height : 100%;
  position : relative;
  white-space : nowrap;
  overflow : hidden;
  text-align : center;
  font-family: "Arial", sans-serif;
  font-size: 13px;
  border: 1px solid #AAAAAA;
  padding : 5px;
  margin-right : 80px;
}
.gfg-horizontal-root .gfg-title {
  font-weight : bold;
  background-color: #FFFFFF;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  float : left;
  padding-left : 10px;
  padding-right : 12px;
  border-right: 1px solid #AAAAAA;
}
.gfg-horizontal-root .gfg-title a {
  color : #444444;
  text-decoration : none;
}
.gfg-horizontal-root .gfg-entry {
  width : auto;
  height : 1.5em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 0px;
  margin-left : 0px;
  padding-left : 10px;
}
/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : 100%;
  height : 100%;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
}
.gfg-horizontal-root .gfg-list {
  display : none;
}
/*
* FeedControl customizations.
*/
.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
  display : none;
}
.gfg-horizontal-root .gfg-entry  .gf-result .gf-title {
  color: #0000cc;
  margin-right : 3px;
  float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
  float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
  display : block;
  color: #AAAAAA;
}
.gfg-branding {
  white-space : nowrap;
  overflow : hidden;
  text-align : left;
  position : absolute;
  right : 0px;
  top : 0px;
  width : 80px;
}
.gfg-collapse-open, .gfg-collapse-closed {
  background-repeat : no-repeat;
  background-position : center;
  cursor : pointer;
  float : right;
  width : 17px;
  height : 20px;
}
.gfg-collapse-open {
  background-image : url('arrow_open.gif');
}
.gfg-collapse-closed {
  background-image : url('arrow_close.gif');
}
.gfg-collapse-href {
  float : left;
}
.clearFloat {
  clear : both;
}
</style>
<script style="text/javascript" src="http://hackublox.googlecode.com/files/daftarisiv2.js"></script>
<script src="http://ชื่อบล็อก.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

โค้ดทั้ง 3 ชุดเป็นโค้ดเดียวกันต่างกันที่ Server ที่เก็บไฟล์เท่านั้น จะเลือกใช้แบบใดก็ได้  และไม่ว่าจะใช้โค้ดแบบใดคุณจะต้องเปลี่ยน http://ชื่อบล็อก.blogspot.com เป็นบล็อกของคุณเองด้วย




แบบที่ 2 เป็นตารางสารบัญแบบ Accordion

ตัวอย่างสารบัญของบทความแบบ Accordion

http://www.hackublog.com/2009/01/blog-post.html

โค้ดสำหรับติดตั้ง

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://ชื่อบล็อก.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

หรือใช้โค้ด

<style type="text/css">
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top,  #888,  #575757);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
color: #fef4e9;
border: 2px solid white !important;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
</style>
<script src="http://hackublog.googlecode.com/files/daftarisiv2-pack.js"></script>
<script src="http://ชื่อบล็อก.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://hackublog.googlecode.com/files/accordion-pack.js" type="text/javascript"></script>

การนำไปใช้ก็จะต้องเปลี่ยน  http://ชื่อบล็อก.blogspot.com เป็นชื่อบล็อกของคุณเช่นเดียวกับการใช้โค้ดแบบแรก



วิธีติดตั้งโค้ดใน Blogger
เมื่อเลือกได้แล้วว่าจะใช้โค้ดติดตั้งแบบใด ต่อไปคือการติดตั้งโค้ดบน Blogger

การติดตั้งโค้ดที่แนะนำคือ ให้สร้างบทความใหม่ หรือหน้าเว็บใหม่ขึ้นมา แล้ววางโค้ดใดโค้ดหนึ่งที่ได้เลือกไว้จากข้างต้นของและบันทึกบทความหรือหน้าเว็บ



หมายเหตุ
การวางสคริปต์ในบทความหรือในหน้าเว็บนั้นคุณจะต้องคลิกที่แถบแก้ไข HTML ก่อนที่จะวางสคริปต์
ส่วนการติดตั้งด้วยวิธีอื่น ๆ ก็ทำได้  เช่น การติดตั้งโดยใช้ HTML/จาวาสคริปต์ Gadget  หรือติดตั้งในแม่แบบ แต่จะทำให้ใช้เวลาในการโหลดหน้าแรกของบล็อกนานขึ้น ผมจึงไม่แนะนำครับ
Credit to http://www.abu-farhan.com  Credit แปลเป็นไทยให้กับ http://www.hackublog.com

 C

Read More