Fullsize(1)  Fullsize(2)  Fullsize(3)

แต่เขามีเวอร์ชันฟรีให้โหลดด้วยนะ (มี element น้อยกว่า) เชิญ โหลดโล้ดดดดดดด ]]> http://iblog.in.th/uncategorized/futurico-ui-pro/feed/ 0 http://iblog.in.th/css/responsive-web-design/ http://iblog.in.th/css/responsive-web-design/#comments Sun, 06 May 2012 08:28:06 +0000 golfiti http://iblog.in.th/?p=338 Responsive คืออะไร ?

ถ้าแปลเป็นไทยแบบตรงๆเลยก็แปลว่า “ตอบสนอง” ถ้าจะขยายความอีกนิดในด้าน Web Design ก็จะหมายถึงการที่ทำให้เว็บเรารองรับกับขนาดหน้าจอในหลายๆ ขนาด ipad เอย iphone เอย หรือแม้กระทั่งหน้าจอคอมพิวเตอร์ ที่มีหลากหลายขนาดหน้าจอกันไป เพราะตลาดมือถือ แทบเล็ตเติบโตแบบก้าวกระโดดในบ้านเราอย่างมากในช่วง สามสี่ปีมานี้ จึงมีขนาดหน้าจอหลาย ๆ ใช้งานเว็บเราอยู่ ในฐานะ Web Designer ก็ควรคำนึงถึงเรื่องขนาดหน้าจอกับรูปแบบเว็บของเรา เพื่อให้แสดงผลได้อย่างถูกต้องสวยงามด้วย

การทำงงาน
หน้าเว็บแบบ responsive จะย่อขนาดหรือ เปลี่ยนรูปแบบให้พอดีกับขนาดหน้าจอ

ข้อดีของ Responsive
ไม่ต้องมีเว็บสำหรับมือถือ เขียนเพียงเว็บเดียว ก็สามารถแสดงผลได้อย่างสวยงามในทุกอุปกรณ์

ตัวอย่างเว็บ ]]> http://iblog.in.th/css/responsive-web-design/feed/ 0 http://iblog.in.th/jquery/custom-rightclick-menu/ http://iblog.in.th/jquery/custom-rightclick-menu/#comments Fri, 04 May 2012 14:27:36 +0000 golfiti http://iblog.in.th/?p=247 เบื่อเมนูคลิ๊กขวาในเว็บแบบเดิมๆ ใช่ไหมเรามากำหนดเมนูคลิ๊กขวาในเว็บของเราให้แปลกแหวกแนวด้วย jquery สวยงามไม่เหมือนเว็บไหน ๆ
เรามเริ่มทำกันเลย

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.contextmenu.js"></script>

    <script>
      $(function() {
        $('#mythingy').contextPopup({
          title: 'My Popup Menu',
          items: [
            {label:'Some Item',     icon:'icons/shopping-basket.png',             action:function() { alert('clicked 1') } },
            {label:'Another Thing', icon:'icons/receipt-text.png',                action:function() { alert('clicked 2') } },
            {label:'Blah Blah',     icon:'icons/book-open-list.png',              action:function() { alert('clicked 3') } },
            null, // divider
            {label:'Sheep',         icon:'icons/application-monitor.png',         action:function() { alert('clicked 4') } },
            {label:'Cheese',        icon:'icons/bin-metal.png',                   action:function() { alert('clicked 5') } },
            {label:'Bacon',         icon:'icons/magnifier-zoom-actual-equal.png', action:function() { alert('clicked 6') } },
            null, // divider
            {label:'Onwards',       icon:'icons/application-table.png',           action:function() { alert('clicked 7') } },
            {label:'Flutters',      icon:'icons/cassette.png',                    action:function() { alert('clicked 8') } }
          ]
        });
      });
    </script>

<link rel="stylesheet" href="<a href="http://joewalnes.github.com/jquery-simple-context-menu/jquery.contextmenu.css" target="_blank">jquery.contextmenu.css</a>">

<div id="mythingy" style="width: 500px; height: 500px; margin: 10px; border: 2px dashed #666666; padding: 6px;">right click in this box to show custom context menu</div>

โดย MacBook Pro 15.4″ จะลดไปประมาณ 9,xxx กว่าบาท เมื่อผ่านสามเดือนไปแล้วหลังจากการวางจำหน่าย (ส่วนลดนี้ซื้อ iPhone ได้เครื่องหนึ่งเลย)
ส่วนสินค้าที่ฮิตในบ้านเราอย่าง iPhone ในช่วงแรกให้ซื้อในวันที่ 11  จากวันวางจำหน่ายจะลดไป 11$ (ประมาณ 340 บาท) เฉลี่ยแล้วลดวันละดอลเลยนะเนี่ย แต่ถ้ารอสองเดือนละก็ลด 31$ (ประมาณ 950 บาท)

การซื้อสินค้าการเทคโนโลยีคิดซะว่า ซื้อก่อนก็ได้ใช้ก่อน ถ้ารอราคาตกก็จะมีสินค้าตัวใหม่ก็เข้ามาแทน และความค้มค่าอยู่ที่การใช้งาน

ที่มา http://dealnews.com ]]> http://iblog.in.th/news/apple-discount/feed/ 0 http://iblog.in.th/uncategorized/thaibook/ http://iblog.in.th/uncategorized/thaibook/#comments Thu, 03 May 2012 12:15:31 +0000 golfiti http://iblog.in.th/?p=200 คุณเคยเห็นหนังสือพวกนี้หรือไม่ ?
เหล่านี้คือหนังสือแบบเรียนภาษาไทยที่ใช้ระหว่างปี พ.ศ. 2521 – พ.ศ. 2537 (บ่งบอกอายุเลย)
ปฏิเสธไม่ได้ว่าอ่านหนังสือภาษาไทยออกก็เพราะหนังสือพวกนี้ ปัจจุบันอาจจเปลี่ยนไปแล้วแต่ก็ยังมีคนสแกนมาในรูปแบบดิจิตอล
ให้เราและเด็กรุ่นหลังๆได้ดูกัน

a#testbutton, a#testbutton:visited {
display:block;
background: url(http://darrenhoyt.com/imagedump/simple_button.png) repeat-x;
width: 200px;
padding:10px 0;
text-align:center;
border:1px solid #608925;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
font-weight:bold;
text-transform:uppercase;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color:#FFF;
text-decoration: none;
opacity:.85;
}

a#testbutton:hover {
border-color:#49671d;
}

a#testbutton:active {
background-position:  0 -200px;
padding:11px 0 9px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}

HTML Code

<a id="testbutton">Find Out More</a>

Javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://darrenhoyt.com/demo/fadenav/fade.js"></script>

 

Live Preview