http://www.poakpong.com en http://feedproxy.google.com/~r/poakpong/~3/ureSHVDBsIg/1687 <!-- google_ad_section_start --><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"><p>สำหรับค่า Property ของการเขียน CSS นั้นมากมายหลากหลาย ซึ่งผู้ที่สนใจสามารถหาอ่านได้ทั่วไป แต่ส่วนตัวที่ใช้งานบ่อยๆ จะประกอบด้วย</p> <ul><li> <strong>font-size</strong> = ขนาดตัวอักษร</li> <li> <strong>color</strong> = สีตัวอักษร</li> <li> <strong>background</strong> = พื้นหลัง</li> <li> <strong>float</strong> = การไหลต่อกัน</li> <li> <strong>overflow</strong> = การครอบทั้งหมด</li> <li> <strong>width</strong> = ความกว้าง</li> <li> <strong>height</strong> = ความสูง</li> <li> <strong>margin</strong> = ระยะห่างจากขอบไปทางด้านนอก</li> <li> <strong>padding</strong> = ระยะห่างจากขอบถึงเนื้อหาด้านใน</li> </ul><!--break--><h2> ตัวอย่างการใช้งาน Property "float"</h2> <p><strong>โค้ด HTML + CSS : ไหลตามกันไปทางซ้ายทั้งหมด</strong></p> <p class="rteindent1"><strong><span style="color:#0000ff;">&lt;div id="left-only"&gt;</span><br /><span style="color:#ff0000;">  &lt;div class="left-one"&gt;</span><br />     &lt;p&gt;</strong>← box one<strong>&lt;/p&gt;<br /><span style="color:#ff0000;">  &lt;/div&gt;</span><br /><span style="color:#008000;">  &lt;div class="left-two"&gt;</span><br />     &lt;p&gt;</strong>← box two<strong>&lt;/p&gt;<br /><span style="color:#008000;">  &lt;/div&gt;</span><br /><span style="color:#8b4513;">  &lt;div class="left-three"&gt;</span><br />     &lt;p&gt;</strong>← box three<strong>&lt;/p&gt;<br /><span style="color:#8b4513;">  &lt;/div&gt;</span><br /><span style="color:#0000ff;">&lt;/div&gt;</span></strong></p> <p class="rteindent1"><span style="color:#0000ff;"><strong>#left-only</strong></span><span style="color:#ff0000;"><strong> .left-one,</strong></span><br /><span style="color:#0000ff;"><strong>#left-only</strong></span><span style="color:#ff0000;"><strong> </strong></span><span style="color:#008000;"><strong>.left-two,</strong></span><br /><span style="color:#0000ff;"><strong>#left-only</strong></span><span style="color:#ff0000;"><strong> </strong></span><span style="color:#8b4513;"><strong>.left-three</strong></span><span style="color:#ff0000;"><strong> </strong></span><strong>{<br />   float: left;</strong><br /><strong>  padding: 2em;<br /> }</strong></p> <p>การแสดงผล</p> <div id="left-only"> <div class="left-one"> <p>← box one</p> </div> <div class="left-two"> <p>← box two</p> </div> <div class="left-three"> <p>← box three</p> </div> </div> <style type="text/css"> <!--/*--><![CDATA[/* ><!--*/ #left-only .left-one, #left-only .left-two, #left-only .left-three { float: left; border: 1px solid #999; padding: 2em; } /*--><!]]>*/ </style><p style="clear:both;"> </p> <p><strong>โค้ด HTML + CSS : ไหลไปทางซ้าย และ ไหลไปทางขวา อย่างละอัน</strong></p> <p class="rteindent1"><strong><span style="color:#a52a2a;">&lt;div id="overall-box"&gt;</span><br /><span style="color:#800080;">  &lt;div class="left-one"&gt;</span><br />     &lt;p&gt;</strong>← left box<strong>&lt;/p&gt;<br /><span style="color:#800080;">  &lt;/div&gt;</span><br /><span style="color:#ff0000;">  &lt;div class="right-one"&gt;</span><br />     &lt;p&gt;</strong>right box →<strong>&lt;/p&gt;<br /><span style="color:#ff0000;">  &lt;/div&gt;</span><br /><span style="color:#a52a2a;">&lt;/div&gt;</span></strong></p> <p class="rteindent1"><strong><span style="color:#a52a2a;">#overall-box</span><span style="color:#800080;"> .left-one </span>{<br />   float: left;<br />   padding: 2em;<br /> }<br /><span style="color:#a52a2a;">#overall-box</span><span style="color:#ff0000;"> .right-one </span>{<br />   float: right;<br />   padding: 2em;<br /> }</strong></p> <p><strong>การแสดงผล</strong></p> <div id="overall-box"> <div class="left-one"> <p>← left box</p> </div> <div class="right-one"> <p>right box →</p> </div> </div> <style type="text/css"> <!--/*--><![CDATA[/* ><!--*/ #overall-box .left-one { float: left; border: 1px solid #999; padding: 2em; } #overall-box .right-one { float: right; border: 1px solid #999; padding: 2em; } /*--><!]]>*/ </style><p style="clear:both;"> </p> <p> </p> <p><img alt="Original picture from duvien.com/blog/duviencom-site-redesigned" src="https://lh5.googleusercontent.com/-1pJgrS3c8wY/T7_RDNAJvEI/AAAAAAAACAA/TKLIcwRbrtM/s300/duvien-css.png" style="width: 300px; height: 136px;" /></p> </div></div></div><div class="field field-name-taxonomy-vocabulary-1 field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/tag/stuff">Stuff</a></div></div></div><div class="field field-name-taxonomy-vocabulary-6 field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/tag/css">CSS</a></div><div class="field-item odd"><a href="/tag/%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99-css">เขียน CSS</a></div></div></div><!-- google_ad_section_end --><img src="http://feeds.feedburner.com/~r/poakpong/~4/ureSHVDBsIg" height="1" width="1"/> Fri, 25 May 2012 18:56:49 +0000 poakpong 1687 at http://www.poakpong.com http://www.poakpong.com/node/1687#comments http://www.poakpong.com/node/1687 http://feedproxy.google.com/~r/poakpong/~3/6RmIY0TOAOw/1686 <!-- google_ad_section_start --><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"><h2> การซ้ำของ CSS</h2> <p>การเขียน CSS ในหลายครั้งเมื่อเราได้เขียนมาได้ระยะหนึ่ง เราอาจเผลอเขียนคุณสมบัติ Property ของ CSS ซ้ำซ้อนใน CSS ชุดเดียวกัน</p> <p>ซึ่งการทำงานของ CSS นั้น <strong>จะเลือกใช้ Property ตัวที่ประกาศล่าสุด</strong>มาใช้งาน เช่น</p> <p class="rteindent1"><strong>h3 {<br /><span style="color:#ff0000;">  color: #ff000;<br />   text-align: left;<br />   font-size: 1.5em;</span><br /> }</strong></p> <p class="rteindent1"><strong>h3 {<br /><span style="color:#0000cd;">  text-align: right;<br />   font-size: 1.25em;</span><br /> }</strong></p> <!--break--><p>จาก Property ทั้ง 2 ชุดข้างต้น เบราว์เซอร์ที่เราใช้จะยุบรวมเป็น</p> <p class="rteindent1"><strong>h3 {<br /><span style="color:#ff0000;">  color: #ff0000;</span><br /><span style="color:#0000cd;">  text-align: right;<br />   font-size: 1.25em;</span><br /> }</strong></p> <h2> ลำดับความสำคัญของ CSS</h2> <p>หากมีการเขียน CSS อยู่ในหลายส่วน การเลือกใช้โค้ด CSS จะเรียงลำดับความสำคัญด้งนี้</p> <ol><li> ตัวเลือกพื้นฐานของเบราว์เซอร์</li> <li> External style sheet ไฟล์ CSS จากภายนอก</li> <li> Internal style sheet (ที่อยู่ในส่วน head ของ HTML)</li> <li> Inline style (CSS ที่แทรกอยู่ในโค้ด HTML)</li> </ol><p>โดยเรียงดังนี้ 1 =&gt; 2 =&gt; 3 =&gt; 4 โดย <strong>CSS ที่อยู่ใกล้กับเนื้อหา HTML มากที่สุด จะมีความสำคัญมากที่สุด</strong></p> <h2> การเกาะเกี่ยวของ Selector, ID และ Class</h2> <p>ในกรณีที่มี Selector, ID หรือ Class ที่ซ้ำกัน เราจะต้องใช้ลำดับการเกาะเกี่ยวของ Selector ในการระบุคุณสมบัติ ตัวอย่าง เราต้องการสร้างความแตกต่างให้กับ P ทั้งสองกล่อง</p> <p class="rteindent1"><strong>&lt;div class="first-box"&gt;<br />   &lt;p&gt;<span style="color:#a52a2a;">message in first box</span>&lt;/p&gt;<br /> &lt;/div&gt;<br /> &lt;div class="second-box"&gt;<br />   &lt;p&gt;<span style="color:#a52a2a;">message in second box</span>&lt;/p&gt;<br /> &lt;/div&gt;</strong></p> <p>เราสามารถกำหนดค่า Property ของ CSS ของ P ในกล่องแรก และ กล่องที่สอง ให้แตกต่างกันได้ดังนี้</p> <p class="rteindent1"><strong>.first-box p { font-size: 1em; }</strong></p> <p>และ</p> <p class="rteindent1"><strong>.second-box p { font-size: 1.5em; text-align: right; }</strong></p> <h2> ความเจาะจงของ Selector</h2> <p>ตัวอย่างโค้ด HTML</p> <p class="rteindent1"><strong><span style="color:#0000cd;">&lt;div id="main-content"&gt;</span><br />   &lt;div class="content"&gt;<br />     <span style="color:#ff0000;">&lt;p&gt;</span>message in main content<span style="color:#ff0000;">&lt;/p&gt;</span><br />   &lt;/div&gt;<br /><span style="color:#0000cd;">&lt;/div&gt;</span></strong></p> <p>และไฟล์ CSS ประกอบด้วย</p> <p class="rteindent1"><strong><span style="color:#0000cd;">#main-content { font-size: 1em; }</span><br /><span style="color:#ff0000;">p { font-size: 1.25em; }</span></strong></p> <p>จากตัวอย่างข้างต้น CSS ระหว่าง #main-content และ p <strong>เบราว์เซอร์จะเรียก Property ของ p มาแสดงผล</strong> เพราะอยู่ใกล้กับเนื้อหา HTML มากที่สุด โดยละเว้น Property ของ #main-content</p> <h2> การจับกลุ่มของ Selector, ID และ Class</h2> <p>ในหลายครั้งที่ Selector หลายตัว มีค่า Property เหมือนกัน <strong>เราสามารถเขียนคำสั่ง CSS แบบรวมกลุ่มได้ โดยใช้เครื่องหมายคอมม่า , คั่นระหว่าง Selector</strong> เช่น</p> <p class="rteindent1"><strong>h1, h2, h3, .center {<br />   text-align: center;<br /> }</strong></p> <p> </p> <p><img alt="Basic CSS by Poakpong // Picture from admn.net/book/method/download.html" src="https://lh6.googleusercontent.com/-ZOqzV9eIJUQ/T7_E1GJmYnI/AAAAAAAAB_w/tTjDLwC3iUs/s300/css_rule_icon.gif" style="width: 300px; height: 238px;" /></p> </div></div></div><div class="field field-name-taxonomy-vocabulary-1 field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/tag/stuff">Stuff</a></div></div></div><div class="field field-name-taxonomy-vocabulary-6 field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/tag/css">CSS</a></div><div class="field-item odd"><a href="/tag/%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99-css">เขียน CSS</a></div></div></div><!-- google_ad_section_end --><img src="http://feeds.feedburner.com/~r/poakpong/~4/6RmIY0TOAOw" height="1" width="1"/> Fri, 25 May 2012 17:47:50 +0000 poakpong 1686 at http://www.poakpong.com http://www.poakpong.com/node/1686#comments http://www.poakpong.com/node/1686 http://feedproxy.google.com/~r/poakpong/~3/hVM1Hr661is/1685 <!-- google_ad_section_start --><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"><p>ในการเริ่มต้นเขียน CSS จะต้องทำความเข้าใจกับ Syntax พื้นฐานของ CSS เสียก่อน</p> <p><img alt="CSS Cyntax and Selector" src="https://lh4.googleusercontent.com/-czhnvUw2uUA/T7-oK55F4gI/AAAAAAAAB_g/kUxcqCj_mwE/s569/selector.gif" style="width: 569px; height: 119px;" /><br /><span style="color:#808080;"><em>รูปตัวอย่างจาก w3schools.com/css/css_syntax.asp</em></span></p> <p>จากตัวอย่างรูปภาพด้านบน ประกอบด้วย</p> <ul><li> <span style="color:#ff0000;"><strong>Selector</strong></span> = Tag ต่างๆ จากโค้ด HTML เพื่อใช้อ้างอิงว่าจะกำหนด CSS กับส่วนไหน เช่น &lt;h1&gt; &lt;p&gt; หรือ &lt;div&gt; เป็นต้น</li> <li> <span style="color:#b22222;"><strong>Declaration</strong></span> = ชุดคำสั่งทั้งหมด ที่มีผลกับ Selector ที่กำหนด โดยจะอยู่ในปีกกา { และ }</li> <li> <span style="color:#800000;"><strong>Property</strong></span> = คุณสมบัติ หากมีหลายตัวใช้เครื่องหมาย (semicolon) ; คั่นแต่ละคุณสมบัติ</li> <li> <span style="color:#8b4513;"><strong>Value</strong></span> = กำหนดค่าต่างๆ ในแต่ละคุณสมบัติ</li> </ul><!--break--><p>วิธีการเขียน Syntax ของ CSS จะไม่นับการปัดบรรทัด หรือการเคาะวรรค สามารถเขียนติดกันในบรรทัดเดียวกัน หรือเขียนแบบปัดบรรทัดก็สามารถใช้งานได้เหมือนกัน เช่น</p> <p class="rteindent1"><strong>p {color:red;text-align:center;}</strong></p> <p>หรือ</p> <p class="rteindent1"><strong>p {<br />   color: red;<br />   text-align: center;<br /> }</strong></p> <p>การเขียนคอมเม้น หรือคำอธิบาย โดยเบราว์เซอร์จะไม่เอาข้อมูลในคอมเม้นนี้ไปแสดงผล โดยจะต้องอยู่ระหว่าง /* และ */ เช่น</p> <p class="rteindent1"><strong><span style="color:#ff0000;">/* comment for p selector */</span><br /> p {color:red;text-align:center;}</strong></p> <p>นอกจาก Selector จาก HTML นั้น ยังมีการกำหนด ID และ Class ได้อีกด้วย</p> <ul><li> <span style="color:#000080;"><strong>ID</strong></span> = กำหนด ID ให้กับ Selector โดยเงื่อนไขของ ID คือ จะมีการใช้งาน ID นี้เพียงครั้งเดียวในหน้าเว็บเพจนี้ เช่น &lt;h1 id="site-logo"&gt; เป็นต้น</li> <li> <span style="color:#800080;"><strong>Class</strong></span> = กำหนด Class ให้กับ Selector โดยเงื่อนไขของ Class คือ สามารถใช้งานซ้ำได้หลายๆ ครั้งในหน้าเว็บเพจเดียวกัน เช่น &lt;p class="center"&gt; เป็นต้น</li> </ul><p>วิธีการเขียน CSS จะใช้เครื่องหมาย # เป็นตัวอ้างอิงกับ ID และใช้จุด . เป็นตัวอ้างอิงกับ Class เช่น</p> <p class="rteindent1"><strong>#site-logo { font-size:2em; }</strong></p> <p>และ</p> <p class="rteindent1"><strong>.center { text-align:center; }</strong></p> <p>ทั้งนี้เราสามารถกำหนด Selector แบบเจาะจงโดยใช้แท็ก HTML ร่วมกับ ID หรือ Class เช่น</p> <p class="rteindent1"><strong>h1#site-logo { font-weight:bold; } <span style="color:#ff0000;">/* do not space between h1 and #site-logo */</span></strong></p> <p>หรือ</p> <p class="rteindent1"><strong>p.center { text-align:center; } <span style="color:#ff0000;">/* do not space between p and .center */</span></strong></p> </div></div></div><div class="field field-name-taxonomy-vocabulary-1 field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/tag/stuff">Stuff</a></div></div></div><div class="field field-name-taxonomy-vocabulary-6 field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/tag/css">CSS</a></div><div class="field-item odd"><a href="/tag/%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99-css">เขียน CSS</a></div></div></div><!-- google_ad_section_end --><img src="http://feeds.feedburner.com/~r/poakpong/~4/hVM1Hr661is" height="1" width="1"/> Fri, 25 May 2012 16:19:13 +0000 poakpong 1685 at http://www.poakpong.com http://www.poakpong.com/node/1685#comments http://www.poakpong.com/node/1685 http://feedproxy.google.com/~r/poakpong/~3/QD1eMY8qeB8/1684 <!-- google_ad_section_start --><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"><p>เราเก็บบันทึกเรื่องราวต่างๆ ไว้ที่ไหนกันบ้าง คำถามนี้ ถ้าย้อนไปสัก 10 ปี ที่แล้ว อาจจะได้คำตอบจากหลายคนว่าเขียนใส่สมุดไดอะรี่</p> <p>หรือถ้ายุคเห่ออินเตอร์เนตใหม่ๆ ก็อาจจะได้คำตอบว่า เว็บไดอะรี่</p> <p>หรือในยุคเริ่มต้นของเว็บ 2.0 สัก 4-5 ปีก่อน ก็อาจจะได้คำตอบว่า เขียนใส่บล็อก ทั้งแบบโฮสเองและแบบที่ใช้บริการตามเว็บใหญ่</p> <p>แล้วถ้าเอาให้มันใกล้เวลาปัจจุบันมากขึ้นอีก หลายคนก็เลือกใช้ social network ในการบันทึกเรื่องราวต่างๆ ซึ่งเท่าที่ลองนึกดู เว็บไซต์ที่เข้าข่ายน่าจะเป็น hi5, myspace ส่วน facebook, twitter นี่มาทีหลัง แต่ก็แรงที่สุดในช่วงเวลานี้ (พ.ค. 2012)</p> <!--break--><p>social network เข้ามามีบทบาทอย่างมาก เป็นพื้นที่เก็บบันทึกความทรงจำ บันทึกเรื่องราวหลายๆ อย่าง ทั้งกิจกรรม รูปภาพ รวมทั้ง "เพื่อน" ไม่ว่าจะไกลแค่ไหน สนิทแค่ไหน หรือว่าเพิ่งรู้จักกัน มันก็รวมอยู่ในนั้นหมด</p> <p>ความที่ social network มันตอบสนองการใช้งานประจำวันเป็นอย่างยิ่ง ทั้งความสะดวก ความง่าย การใช้งานได้กับหลายอุปกรณ์พกพาทั้งหลาย โดยเฉพาะมือถือ (ปัจจุบัน ถ้าคิดจะทำ social media ต้องมองเรื่องการใช้งานผ่าน mobile ด้วยเสมอ)</p> <p>หลายคนถึงกับเปลี่ยนที่ทางในการเขียนบักทึก จากเว็บไดอะรี่ เว็บบล็อก เปลี่ยนมาใช้พื้นที่ใน social media แทน ซึ่งก็อาจจะด้วยจากหลายสาเหตุ เกินกว่าจะคาดเดา</p> <p>แต่พื้นที่เก็บความทรงจำสมัยใหม่ มันออกจะดูฉาบฉวย มาเร็ว-ไปเร็ว เป็น current มาก และก็ out เร็วมากเช่นกัน</p> <p>แม้ว่าบริการอย่าง facebook จะพยายามปรับตัวให้สามารถขุดเรื่องเก่าของเราออกมาได้ ด้วยบริการอย่าง timeline แต่ก็ยังไม่สะดวกเท่าไรนัก</p> <p>แล้วถ้าเกิดวันหนึ่งเว็บไซต์ที่เราใช้งานอยู่ทุกเมื่อเชื่อวัน เกิดลบข้อมูลของเราทิ้งทั้งหมด เพื่อปรับเปลี่ยนบริการหรือเลิกกิจการ หรือแม้กระทั่งไม่ยอมให้เราคัดลอกข้อมูลออกมา ซึ่งด้วยที่ว่ามันมีปริมาณข้อมูลจำนวนมาก จะใช้วิธีค่อยๆทำก็คงจะไม่ไหว เราจะมีวิธีการรับมือกันอย่างไร ?</p> <p><img alt="" src="https://lh4.googleusercontent.com/-rDl8daao_VU/T7ySZ2nEsiI/AAAAAAAAB_Q/h_LPRNCw2e0/s500/2222.jpg" style="width: 500px; height: 361px;" /></p> </div></div></div><div class="field field-name-taxonomy-vocabulary-1 field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/tag/life">Life</a></div></div></div><div class="field field-name-taxonomy-vocabulary-6 field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/tag/history">History</a></div><div class="field-item odd"><a href="/tag/memory">Memory</a></div><div class="field-item even"><a href="/tag/archives">Archives</a></div><div class="field-item odd"><a href="/tag/diary">Diary</a></div><div class="field-item even"><a href="/tag/social-media">Social Media</a></div></div></div><!-- google_ad_section_end --><img src="http://feeds.feedburner.com/~r/poakpong/~4/QD1eMY8qeB8" height="1" width="1"/> Wed, 23 May 2012 07:37:43 +0000 poakpong 1684 at http://www.poakpong.com http://www.poakpong.com/node/1684#comments http://www.poakpong.com/node/1684 http://feedproxy.google.com/~r/poakpong/~3/SQljX2tcXj8/1683 <!-- google_ad_section_start --><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"><p>เมื่อต้นเดือนพฤษภาคม 2012 ที่ผ่านมา <strong>Samsung</strong> ได้เปิดตัวมือถือตระกูล Galaxy S รุ่นใหม่ <strong>Samsung Galaxy S III</strong> มือถือรุ่นท็อป ที่จะมีกำหนดวางจำหน่ายเร็วๆ นี้ และโดยก่อนหน้านี้ทางผู้ผลิตมือถือค่าย <strong>HTC</strong> ก็ปล่อยตัวมือถือตัวแรง <strong>HTC One X</strong> ออกมาก่อนหน้านี้เช่นกัน</p> <p>เมื่อถึงตอนนี้หลายคนที่อยากเปลี่ยนโทรศัพท์มือถือเครื่องใหม่ อาจจะกำลังลังเลว่าจะเลือกมือถือจากค่ายไหนดี ระหว่าง <strong>Samsung Galaxy S III</strong> หรือ <strong>HTC One X</strong></p> <h1> ตารางเปรียบเทียบ Samsung Galaxy S III กับ HTC One X</h1> <p class="rtecenter"><img alt="Samsung Galaxy S III vs HTC One X" src="https://lh5.googleusercontent.com/-zFLjV5q-VmE/T7n_8Xa6WhI/AAAAAAAAB_A/351ERxhaINc/s400/samsung-galaxy-s-iii-vs-htc-one-x.jpg" style="width: 400px; height: 280px;" /></p> <!--break--><table border="1" cellpadding="1" cellspacing="1" style="width: 100%;"><thead><tr><th scope="col"> คุณสมบัติ</th> <th scope="col"> Samsung Galaxy S III</th> <th scope="col"> HTC One X</th> </tr></thead><tbody><tr><td> ผู้ผลิต</td> <td> Samsung</td> <td> HTC</td> </tr><tr><td> วันจำหน่าย (ไทย)</td> <td> มิถุนายน 2012</td> <td> เมษายน 2012</td> </tr><tr><td> ซีพียู</td> <td> Quad-core 1.4 GHz Cortex-A9</td> <td> Quad-core 1.5 GHz Snapdragon S4</td> </tr><tr><td> ชิพเซ็ต</td> <td> Exynos 4212 Quad</td> <td> Nvidia Tegra 3</td> </tr><tr><td> หน่วยความจำในเครื่อง</td> <td> 16 GB</td> <td> 32 GB</td> </tr><tr><td> ช่องเสียบ microSD</td> <td> รองรับสูงสุด 64 GB</td> <td> -</td> </tr><tr><td> แรม</td> <td> 1 GB</td> <td> 1 GB</td> </tr><tr><td> ชนิดหน้าจอ</td> <td> Super AMOLED</td> <td> Super IPS LCD2</td> </tr><tr><td> ขนาดหน้าจอ</td> <td> 4.8 นิ้ว</td> <td> 4.7 นิ้ว</td> </tr><tr><td> ความละเอียดจอภาพ</td> <td> 720 x 1280 พิกเซล</td> <td> 720 x 1280 พิกเซล</td> </tr><tr><td> การป้องกันรอยขีดข่วน</td> <td> Gorilla Glass 2</td> <td> Gorilla Glass</td> </tr><tr><td> ระบบปฏิบัติการ</td> <td> Android ICS 4.0.4 + TouchWiz Nature UX</td> <td> Android ICS 4.0 + HTC Sense UI 4</td> </tr><tr><td> ขนาด (สูง x กว้าง x หนา)</td> <td> 136.6 x 70.6 x 8.6 มม.</td> <td> 134.4 x 69.9 x 8.9 มม.</td> </tr><tr><td> NFC</td> <td> มี</td> <td> มี</td> </tr><tr><td> กล้อง</td> <td> 8 ล้าน, 3264 x 2448 พิกเซล</td> <td> 8 ล้าน, 3264 x 2448 พิกเซล</td> </tr><tr><td> คุณสมบัติกล้องถ่ายรูป</td> <td> F/2.6, ความเร็ว 3.3 ภาพ/วินาที</td> <td> F/2, ความเร็ว 4 ภาพ/วินาที</td> </tr><tr><td> รองรับการถ่ายวิดีโอ</td> <td> 1080p @ 30fps</td> <td> 1080p @ 30fps</td> </tr><tr><td> กล้องหน้า</td> <td> 1.9 ล้าน, ถ่ายวิดีโอ 720p @ 30fps</td> <td> 1.3 ล้าน, ถ่ายวิดีโอ 720p</td> </tr><tr><td> แบตเตอรี่</td> <td> Li-Ion 2100 mAh (ถอดเปลี่ยนได้)</td> <td> Li-Po 1800 mAh (เปลี่ยนไม่ได้)</td> </tr><tr><td> สีตัวเครื่อง</td> <td> น้ำเงินเข้ม / ขาว</td> <td> ขาว</td> </tr><tr><td> ราคาขาย</td> <td> 21,900 บาท</td> <td> 21,900 บาท</td> </tr></tbody></table><p>แล้วอย่างนี้เลือกยี่ห้อไหนดีล่ะ ?</p> </div></div></div><div class="field field-name-taxonomy-vocabulary-1 field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/tag/stuff">Stuff</a></div></div></div><div class="field field-name-taxonomy-vocabulary-6 field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/tag/compare">Compare</a></div><div class="field-item odd"><a href="/tag/samsung">Samsung</a></div><div class="field-item even"><a href="/tag/galaxy-s-iii">Galaxy S III</a></div><div class="field-item odd"><a href="/tag/htc">HTC</a></div><div class="field-item even"><a href="/tag/one-x">One X</a></div><div class="field-item odd"><a href="/tag/smart-phone">Smart Phone</a></div><div class="field-item even"><a href="/tag/android">Android</a></div><div class="field-item odd"><a href="/tag/ice-cream-sandwich">Ice Cream Sandwich</a></div><div class="field-item even"><a href="/tag/ics">ICS</a></div></div></div><!-- google_ad_section_end --><img src="http://feeds.feedburner.com/~r/poakpong/~4/SQljX2tcXj8" height="1" width="1"/> Mon, 21 May 2012 08:55:37 +0000 poakpong 1683 at http://www.poakpong.com http://www.poakpong.com/node/1683#comments http://www.poakpong.com/node/1683 http://feedproxy.google.com/~r/poakpong/~3/mhqWjnfZf5w/1682 <!-- google_ad_section_start --><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"><p>วันพฤหัสบดีที่ผ่านมา (17 พ.ค.) ไปร่วมกิจกรรม <strong>"พฤหัด (ThursDIY workshop)"</strong> จัดโดย เครือข่ายพลเมืองเน็ต และ โอเพ่นดรีม มาลงมือทำอะไรกัน ทุกวันพฤหัสที่ 1 ของเดือนกันดีกว่า โดยกิจกรรมครั้งแรกนี้เป็นการแนะนำเว็บแผนที่ <strong>OpenStreetMap</strong> ซึ่งเป็นบริการแผนที่ ที่เราสามารถมีส่วนร่วมในการเพิ่ม-แก้ไขข้อมูลให้สมบูรณ์</p> <p>หน้าตาของเว็บ <strong>OpenStreetMap</strong> (www.OpenStreetMap.org)</p> <p><img alt="OpenStreetMap" src="https://lh6.googleusercontent.com/-QNfIOEUYJxs/T7h_q7MKQuI/AAAAAAAAB-w/kvHn8bOC710/s640/osm-bangkok.jpg" style="width: 640px; height: 434px;" /></p> <!--break--><p>จากรูปด้านบน เป็นแผนที่โซนกรุงเทพฯ ถ้าสังเกตดีๆ ส่วนของเมนูด้านบนในแผนที่นั้นจะมีคำว่า <strong>"Edit"</strong> ซึ่งแปลว่าเราสามารถเข้าไปช่วยกันเพิ่ม-แก้ไขข้อมูล ให้ครบถ้วน-ถูกต้องให้กับแผนที่นี้ได้ เพียงแค่สมัครเป็นสมาชิก</p> <p>สำหรับกิจกรรม <strong>"พฤหัด (ThursDIY workshop)"</strong> ที่ผ่านมา มีการทดลองภาคสนามให้ทำการปักหมุด บันทึกสถานที่ ร้านค้าที่น่าสนใจในโซนสยามสแควร์ เป็นการทดสอบอุปกรณ์ต่างๆ ทั้งแอพในมือถือ Android และ iOS รวมทั้งเครื่องมือ "แผนที่กระดาษ" จาก walking papers ที่ช่วยอำนวยความสะดวกในการปักหมุดแบบ off-line</p> <p>ใครสนใจ อยากร่วมกิจกรรม สร้าง-เพิ่ม-แก้ไขข้อมูล ในแผนที่ สามารถสมัครสมาชิก และลงมือทำได้ทันทีในเว็บ www.OpenStreetMap.org/user/new ได้เลยจ้า</p> </div></div></div><div class="field field-name-taxonomy-vocabulary-1 field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/tag/stuff">Stuff</a></div></div></div><div class="field field-name-taxonomy-vocabulary-6 field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/tag/maps">Maps</a></div><div class="field-item odd"><a href="/tag/openstreetmap">OpenStreetMap</a></div><div class="field-item even"><a href="/tag/thursdiy">ThursDIY</a></div><div class="field-item odd"><a href="/tag/workshop">Workshop</a></div><div class="field-item even"><a href="/tag/thai-netizen-network">Thai Netizen Network</a></div><div class="field-item odd"><a href="/tag/opendream">Opendream</a></div></div></div><!-- google_ad_section_end --><img src="http://feeds.feedburner.com/~r/poakpong/~4/mhqWjnfZf5w" height="1" width="1"/> Sun, 20 May 2012 05:26:11 +0000 poakpong 1682 at http://www.poakpong.com http://www.poakpong.com/node/1682#comments http://www.poakpong.com/node/1682 http://feedproxy.google.com/~r/poakpong/~3/UNenHuWyoP0/1681 <!-- google_ad_section_start --><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"><p>การเพิ่มฟังก์ชั่นให้กับ Drupal เราสามารถเลือกใช้งาน Modules ต่างๆ ตามที่เราต้องการ เพื่อเอามาปรับเสริมใช้งานในเว็บไซต์ของเรา เช่น ตัวเก็บสถิติคนเข้าชมเว็บไซต์, ตัวช่วยในการสร้าง URL alias แบบอัตโนมัติ หรือแม้แต่ Views ในส่วนของการแสดงข้อมูล เป็นต้น</p> <p>การติดตั้ง Modules ทำได้ 2 วิธี คือ <strong>Upload</strong> และ <strong>Online</strong></p> <h2> วิธีติดตั้ง Modules แบบ Upload</h2> <p>เริ่มต้นด้วยการค้นหาและดาวน์โหลดไฟล์ .tar.gz หรือ .zip จากเว็บ Drupal.org หรือจากที่อื่นๆ นำมาขยายไฟล์ออก แล้วนำมา Upload ผ่านโปรแกรม FTP เข้าสู่เซิร์ฟเวอร์</p> <!--break--><h3> ค้นหา Modules ในเว็บไซต์ Drupal.org</h3> <p>ค้นหาตามหมวดหมู่ของ Modules หรือความนิยมของการใช้งาน จากเมนู Download &amp; Extend</p> <p><img alt="วิธีติดตั้ง Modules แบบ Upload" src="https://lh5.googleusercontent.com/-UiXoY2u-2Xg/T6PwfuWXnrI/AAAAAAAAB80/Do9Wlit_jeg/s640/Image1216877986.png" style="width: 620px; height: 458px; border: 1px solid rgb(153, 153, 153);" /></p> <p>หรือค้นหาจากช่อง Search druoal.org ด้านบน</p> <p><img alt="วิธีติดตั้ง Modules แบบ Upload" src="https://lh3.googleusercontent.com/-VpGpZLpwATk/T6PwfcveVnI/AAAAAAAAB8w/Bm5exePrL0c/s640/Image500539066.png" style="width: 620px; height: 217px; border: 1px solid rgb(153, 153, 153);" /></p> <p>เมื่อค้นหา Modules ที่ต้องการได้แล้ว ก็ดาวน์โหลดไฟล์ .tar.gz หรือ .zip เอามาใช้งาน เลือกเวอร์ชั่นที่ตรงกับ Drupal ที่เราใช้</p> <p><img alt="วิธีติดตั้ง modules แบบ upload" src="https://lh6.googleusercontent.com/-5NZEpJ2o-mQ/T6P9qtXsMXI/AAAAAAAAB9M/d3J1WUX5qcQ/s559/download-modules-drupal-org-3.jpg" style="width: 559px; height: 328px; border:1px solid #999;" /></p> <h3> อัพโหลดโฟลเดอร์ Modules เข้าใส่เซิร์ฟเวอร์</h3> <p>ขยายไฟล์ออก และนำเข้าเซิร์ฟเวอร์ ในโฟลเดอร์ <span style="color:#ff0000;">/sites/default/Modules</span> (หากยังไม่มีโฟลเดอร์นี้ให้ทำการสร้างขึ้นมา)</p> <p><img alt="วิธีติดตั้ง modules แบบ upload" src="https://lh4.googleusercontent.com/-6Jboofixbmw/T6P9qekHrgI/AAAAAAAAB9I/qO2ZYv2BZu0/s713/download-modules-drupal-org-4.jpg" style="width: 620px; height: 342px; border:1px solid #999;" /></p> <p>จากนั้นเปิดหน้า Modules ทำการ Enable เพื่อเรียกใช้งาน Modules ที่เราติดตั้งใหม่</p> <p><img alt="วิธีติดตั้ง modules แบบ upload" src="https://lh5.googleusercontent.com/-hKkukiQWn1w/T6P9rJyxoTI/AAAAAAAAB9Q/_g6gqEADX3k/s720/download-modules-drupal-org-5.jpg" style="width: 620px; height: 423px; border:1px solid #999;" /></p> <p>หลังจากนั้นก็เริ่มใช้งาน Modules ตามคำแนะนำในแต่ละ Modules</p> <p> </p> <h2> วิธีติดตั้ง Modules แบบ Online</h2> <p><span style="color:#ff0000;">ในวิธีนี้สามารถใช้ได้กับ Drupal เวอร์ชั่น 7 เท่านั้น</span></p> <p>เริ่มจากเปิดหน้าจัดการ Modules และคลิก <strong>+ Install new module</strong></p> <p><img alt="วิธีติดตั้ง Modules แบบ Install online" src="https://lh6.googleusercontent.com/-TcxJdKmK1gQ/T6QFV4Qyc5I/AAAAAAAAB90/5FFWi2XuLi0/s511/download-modules-drupal-org-6.jpg" style="width: 511px; height: 315px; border: 1px solid rgb(153, 153, 153);" /></p> <p>นำ URL ของไฟล์ Modules ที่เป็น .tar.gz หรือ .zip จากเซิร์ฟเวอร์ต้นทาง มาใส่ในช่อง Install from a URL</p> <p><img alt="วิธีติดตั้ง modules แบบ install online" src="https://lh5.googleusercontent.com/--EW2IoxB6q8/T6QFV_vFyzI/AAAAAAAAB9w/uZi7IP_RGZM/s724/download-modules-drupal-org-7.jpg" style="width: 620px; height: 252px; border: 1px solid rgb(153, 153, 153);" /></p> <p>เมื่อคลิก Install ระบบจะทำการโหลดไฟล์เข้ามาไว้ในเซิร์ฟเวอร์และคลายไฟล์แบบอัตโนมัติ โดยโฟลเดอร์ของ Modules จะถูกบันทึกอยู่ที่ <span style="color:#ff0000;">/sites/all/Modules</span> (ต่างจากวิธีติดตั้ง Modules แบบ Upload)</p> <p><img alt="วิธีติดตั้ง modules แบบ Online" src="https://lh6.googleusercontent.com/-xxPk_Bm9j0o/T6QFW7DmfkI/AAAAAAAAB98/eysh6YwvxD4/s772/download-modules-drupal-org-8.jpg" style="width: 620px; height: 109px; border: 1px solid rgb(153, 153, 153);" /></p> <p>เมื่อระบบทำการโหลดไฟล์เรียบร้อยแล้ว จะมีข้อความแจ้งสถานะพร้อมใช้งาน ให้เราคลิก <strong>Enable newly added Modules</strong> เพื่อสั่ง Enable เพื่อเริ่มใช้งาน</p> <p><img alt="วิธีติดตั้ง modules แบบ online" src="https://lh4.googleusercontent.com/-pCxFSuZmTHg/T6QFXLSfMeI/AAAAAAAAB-A/r_e8KHChRmc/s573/download-modules-drupal-org-9.jpg" style="width: 573px; height: 258px; border: 1px solid rgb(153, 153, 153);" /></p> <p>ทำเครื่องหมาย หน้าชื่อ Modules ที่เราต้องการใช้</p> <p><img alt="วิธีติดตั้ง modules แบบ online" src="https://lh5.googleusercontent.com/-IoxC2vBN7jw/T6QFV5Kda1I/AAAAAAAAB9s/im8xKjz980g/s494/download-modules-drupal-org-10.jpg" style="width: 494px; height: 452px; border: 1px solid rgb(153, 153, 153);" /></p> <p>จากนั้นก็ Save configuration และเริ่มใช้งานได้ตามคำแนะนำในแต่ละ Modules</p> </div></div></div><div class="field field-name-taxonomy-vocabulary-1 field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/tag/stuff">Stuff</a></div></div></div><div class="field field-name-taxonomy-vocabulary-6 field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/tag/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B9%83%E0%B8%8A%E0%B9%89-drupal">วิธีใช้ Drupal</a></div><div class="field-item odd"><a href="/tag/drupal">Drupal</a></div><div class="field-item even"><a href="/tag/how-to">How-To</a></div><div class="field-item odd"><a href="/tag/drupal-%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD">Drupal คู่มือ</a></div><div class="field-item even"><a href="/tag/%E0%B8%AA%E0%B8%AD%E0%B8%99%E0%B8%97%E0%B8%B3%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A">สอนทำเว็บ</a></div></div></div><!-- google_ad_section_end --><img src="http://feeds.feedburner.com/~r/poakpong/~4/UNenHuWyoP0" height="1" width="1"/> Fri, 04 May 2012 16:53:38 +0000 poakpong 1681 at http://www.poakpong.com http://www.poakpong.com/node/1681#comments http://www.poakpong.com/node/1681 http://feedproxy.google.com/~r/poakpong/~3/21UOFUDx96U/1680 <!-- google_ad_section_start --><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"><p><span style="color:#ff0000;">ออกตัวก่อนว่า สรุปการเรียนรู้พื้นฐาน CSS อันนี้ เป็นการประมวลจากประสบการณ์การทำงาน ซึ่งอาจไม่ตรงกับหลักการเรียน ผู้อ่านที่สนใจเรื่องการเขียน CSS ควรหาข้อมูลเพิ่มเติมประกอบการศึกษาด้วยตัวเองเพิ่มเติมด้วย</span></p> <p>CSS เป็นคำย่อมาจาก Cascading Style Sheets เป็นการเขียนชุดคำสั่งที่เกี่ยวกับการตกแต่งหน้าตาเว็บไซต์ โดยเป็นโค้ดส่วนที่แยกออกมาจากโค้ด HTML</p> <p>ในไอเดียของผมเอง มองว่า HTML เอาไว้ทำ Markup ของเนื้อหา จัดลำดับความสำคัญของข้อมูล ว่าตำแหน่งไหนเป็นข้อมูลสำคัญ ส่วนไหนเป็นหัวข้อหลัก พวกแท็ก &lt;h1&gt; &lt;p&gt; &lt;div&gt; โดยมุ่งเน้น "ให้เครื่องอ่าน" -- ส่วน CSS เป็นการจัดการกับสีสัน ตำแหน่งการจัดวาง มุ่งเน้น "ให้คนดู" เพื่อความสวยงาม</p> <p>การเขียน CSS ทำได้ใน 3 ลักษณะ</p> <ol><li> Inline คือการแทรกโค้ดคำสั่ง CSS เข้าไปในแท็ก HTML โดยตรง เช่น &lt;div <span style="color:#ff0000;">style="padding: 10px;"</span>&gt; เป็นต้น</li> <li> Internal เป็นการนำชุดคำสั่ง CSS ที่ใช้ทั้งหมด เอามารวมไว้ในส่วนของ &lt;head&gt; ของหน้าเพจนั้นๆ เพื่อสะดวกในการแก้ไข โดยจะมีการใช้ id และ class ในการอ้างอิงคำสั่ง (ดูภาพประกอบ 1)</li> <li> External เป็นการแยกเอาชุดคำสั่ง CSS ทั้งหมด ออกไปเป็นอีกไฟล์ .css ภายนอก แล้วทำการ link กลับมาที่ตัว HTML ด้วยคำสั่ง &lt;link&gt; (ดูภาพประกอบ 2)</li> </ol><p class="rtecenter"><span style="color:#ff0000;">ภาพประกอบ 1 การเขียน CSS แบบ Internal</span><br /><img alt="เขียน CSS แบบ Internal ใน &lt;head&gt;" src="https://lh6.googleusercontent.com/-dn13BSbkegc/T6OG0RUtjUI/AAAAAAAAB8c/7GgrAicC-zA/s558/basic-css-1.jpg" style="width: 558px; height: 287px; border:1px solid #999;" /></p> <p class="rtecenter"><span style="color:#ff0000;">ภาพประกอบ 2 การเขียน CSS แบบ External</span><br /><img alt="เขียน CSS แบบ External และ &lt;link&gt; ไฟล์ style.css เข้ามาแสดงผล" src="https://lh4.googleusercontent.com/-aKxSrSBhF1c/T6OG08mNYVI/AAAAAAAAB8g/5csgS4gPpss/s558/basic-css-2.jpg" style="width: 558px; height: 394px; border:1px solid #999;" /></p> </div></div></div><div class="field field-name-taxonomy-vocabulary-1 field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/tag/stuff">Stuff</a></div></div></div><div class="field field-name-taxonomy-vocabulary-6 field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/tag/css">CSS</a></div><div class="field-item odd"><a href="/tag/%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99-css">เขียน CSS</a></div></div></div><!-- google_ad_section_end --><img src="http://feeds.feedburner.com/~r/poakpong/~4/21UOFUDx96U" height="1" width="1"/> Fri, 04 May 2012 07:39:42 +0000 poakpong 1680 at http://www.poakpong.com http://www.poakpong.com/node/1680#comments http://www.poakpong.com/node/1680 http://feedproxy.google.com/~r/poakpong/~3/2n3NR1d5UVM/1679 <!-- google_ad_section_start --><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"><p>ในที่สุดสงครามให้บริการพื้นที่เก็บข้อมูลออนไลน์ก็ระอุถึงขีดสุด เมื่อยักษ์ใหญ่ของวงการ Cloud Computer ตื่นขึ้นแล้วลงมาเล่นในสมรภูมินี้อย่างเต็มตัว ใช่แล้วผมกำลังเขียนถึง Google ที่เพิ่งจะเปิดตัวบริการใหม่ (ที่ต่อยอดจากบริการเดิม) ในชื่อ <strong>Google Drive</strong> ซึ่งเป็นบริการเก็บข้อมูลออนไลน์ ที่สามารถเชื่อมโยงไปยังคอมพิวเตอร์ และอุปกรณ์ต่างๆ ของเราได้อย่างสะดวก</p> <p><img alt="วิธีใช้งาน Google Drive" src="https://lh6.googleusercontent.com/-qofTgVLZki8/T5d012gDMyI/AAAAAAAAB5w/5zFP1luuIGE/s127/Setup-Google-Drive-1.jpg" style="width: 127px; height: 127px;" /></p> <!--break--><p>ถ้าก่อนหน้านี้คุณเคยใช้ Google Docs ในการเก็บ-แก้ไข เอกสารออนไลน์ วันนี้มันได้กลายเป็น <strong>Google Drive</strong> ที่พร้อมจะเก็บไฟล์ทุกอย่างที่คุณมี โดยผ่านโปรแกรม <strong>Google Drive</strong> ในคอมพิวเตอร์ หรือจะอัพโหลดไฟล์ผ่านทางเว็บเบราเซอร์เหมือนที่ผ่านๆ มาก็ทำได้เช่นเดิม</p> <p>โดยการใช้งานเริ่มต้น <strong>Google Drive</strong> จะมีพื้นที่ให้ใช้งาน 5GB และสามารถซื้อพื้นที่เพิ่มเติมได้</p> <p>วิธีใช้งานโปรแกรม <strong>Google Drive</strong> ในคอมพิวเตอร์ ทำได้ไม่ยาก เริ่มต้นจากดาวน์โหลดตัวไฟล์ติดตั้ง มาจากเว็บ drive.google.com จากนั้นก็ทำการ install เหมือนโปรแกรมทั่วไปตามปกติ หลังจาก install เรียบร้อยโปรแกรมจะขึ้นหน้าต่าง ให้เราใส่ e-mail และรหัสผ่าน ของ Gmail ของเรา</p> <p><img alt="วิธีใช้งาน Google Drive" src="https://lh5.googleusercontent.com/-TIzS_Rga2ao/T5d04m8_d3I/AAAAAAAAB6Y/309A4f3zms4/s860/Setup-Google-Drive-2.jpg" style="width: 640px; height: 454px;" /></p> <p>เมื่อลงชื่อ log in เข้าใช้งาน <strong>Google Drive</strong> จะบอกว่า จะมีการสร้างโฟลเดอร์ในคอมพิวเตอร์ของเรา เพื่อที่จะเชื่อมข้อมูลในคอมพิวเตอร์กับในเว็บ โดยไฟล์ทั้งหมดใน <strong>Google Drive</strong> จะมาอยู่ในโฟลเดอร์ที่จะสร้างขึ้นอันนี้</p> <p><img alt="วิธีใช้งาน Google Drive" src="https://lh5.googleusercontent.com/-oopelse5ZKc/T5d02OQZ1bI/AAAAAAAAB50/Z0unYjJ-204/s508/Setup-Google-Drive-3.jpg" style="width: 508px; height: 365px;" /></p> <p>โดยปกติถ้าเรากดปุ่ม Start sync มันก็จะทำการดูดทุกอย่างใน Google Docs ของเรามาไว้ในโฟลเดอร์ที่จะสร้างขึ้นใหม่ (ค่าเริ่มต้นสำหรับ Windows 7 จะอยู่ที่ \Users\ชื่อผู้ใช้\Google Drive ส่วน Windows XP จะอยู่ที่ \My Documents\Google Drive) แต่ถ้าเราต้องการเปลี่ยนตำแหน่งโฟลเดอร์ ก็สามารถเลือก Advanced setup (ปุ่มด้านล่าง ซ้ายมือ) จากนั้นก็ทำการ Start sync ได้ทันที</p> <p><img alt="วิธีใช้งาน Google Drive" src="https://lh3.googleusercontent.com/-RhF30sKQuLE/T5d02jQhqdI/AAAAAAAAB54/RvsoyjZdvzA/s508/Setup-Google-Drive-4.jpg" style="width: 508px; height: 365px;" /></p> <p><img alt="วิธีใช้งาน Google Drive" src="https://lh6.googleusercontent.com/-EvOpeOxl3FQ/T5d03Qj1_eI/AAAAAAAAB6E/eUIntzKPP3M/s558/Setup-Google-Drive-5.jpg" style="width: 558px; height: 464px;" /></p> <p>เมื่อโปรแกรมทำการ Sync ข้อมูลเรียบร้อย โฟลเดอร์ <strong>Google Drive</strong> ในคอมพิวเตอร์ของเราจะปรากฎไฟล์เอกสาร เหมือนกับที่เราเก็บเอาไว้ใน Google Docs แต่มันไม่ใช่ไฟล์เอกสารจริงๆ หมายถึง ถ้าอยากจะเปิดดู-แก้ไข ไฟล์ที่อยูใน Google Docs ของเดิม ต้องคลิกที่ชื่อไฟล์นั้น แล้วโปรแกรมจะทำการเปิดเอกสารในเบราเซอร์เหมือนเราทำงานใน Google Docs แบบที่ผ่านๆมา</p> <p>ส่วนไฟล์ Multimedia อื่นๆ อันนี้เป็นการเก็บไฟล์จริงๆ เราสามารถเปิดดูด้วยโปรแกรมในคอมพิวเตอร์ของเราได้ทันที เช่น วิดีโอ เพลง รูปภาพ ทั้งนี้เราก็ยังสามารถเปิดดูไฟล์ทั้งหมดผ่าน <strong>Google Drive</strong> ในเบราเซอร์ได้ด้วย</p> <p>ตัวอย่าง เปิดดูรูปภาพ ที่ Sync จากคอมพิวเตอร์</p> <p><img alt="วิธีใช้งาน Google Drive" src="https://lh3.googleusercontent.com/-krwkPZKMZM4/T5d04LmXNfI/AAAAAAAAB6I/3NSotai57Uc/s720/Setup-Google-Drive-6.jpg" style="width: 640px; height: 545px;" /></p> <p>ปิดท้ายบล็อกนี้ด้วยวิดีโอแนะนำ <strong>Google Drive</strong></p> <p><iframe allowfullscreen="" frameborder="0" height="360" src="http://www.youtube.com/embed/wKJ9KzGQq0w?rel=0" width="640"></iframe></p> </div></div></div><div class="field field-name-taxonomy-vocabulary-1 field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/tag/stuff">Stuff</a></div></div></div><div class="field field-name-taxonomy-vocabulary-6 field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/tag/google-drive">Google Drive</a></div><div class="field-item odd"><a href="/tag/online-storage">Online Storage</a></div><div class="field-item even"><a href="/tag/cloud-computer">Cloud Computer</a></div></div></div><!-- google_ad_section_end --><img src="http://feeds.feedburner.com/~r/poakpong/~4/2n3NR1d5UVM" height="1" width="1"/> Tue, 24 Apr 2012 18:02:40 +0000 poakpong 1679 at http://www.poakpong.com http://www.poakpong.com/node/1679#comments http://www.poakpong.com/node/1679 http://feedproxy.google.com/~r/poakpong/~3/lgd7RvCwxRI/1678 <!-- google_ad_section_start --><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"><p><strong>Cascading Style Sheets</strong> หรือที่เราเรียกแบบย่อว่า <strong>CSS</strong> เป็นเครื่องมือสำคัญในการปรับแต่งเว็บไซต์ให้เป็นไปในรูปแบบต่างๆ เทคโนโลยีการจัดทำเว็บไซต์ในปัจจุบัน จะพยายามแยกโครงสร้างเนื้อหา <strong>HTML</strong> ออกจากสีสันหน้าตาของเว็บไซต์ <strong>CSS</strong> เพื่อให้ข้อมูลที่อยู่ภายในเว็บเป็นข้อมูลที่เราต้องการสื่อสาร</p> <p><img alt="CSS3" src="https://lh5.googleusercontent.com/-L4sSzBUrydk/T5UaOlXxTbI/AAAAAAAAB4o/mVp8Eb-Ikmo/s150/CSS3-LOGO.png" style="width: 150px; height: 150px;" /></p> <!--break--><p>เอกสารต่อไปนี้เป็นการรวมโพยคำสั่ง ที่ใช้งานของ CSS3 ซึ่งการใช้งาน CSS3 จะสมบูรณ์ต้องทำงานร่วมกับเบราว์เซอร์สมัยใหม่ เช่น Firefox, Chrome หรือ IE รุ่นใหม่ๆ</p> <p><embed height="500" src="http://dl.dropbox.com/u/485232/css3-cheat-sheet.pdf" width="640"></embed></p> </div></div></div><div class="field field-name-taxonomy-vocabulary-1 field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/tag/stuff">Stuff</a></div></div></div><div class="field field-name-taxonomy-vocabulary-6 field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/tag/css3">CSS3</a></div><div class="field-item odd"><a href="/tag/cheat-sheet">Cheat Sheet</a></div></div></div><!-- google_ad_section_end --><img src="http://feeds.feedburner.com/~r/poakpong/~4/lgd7RvCwxRI" height="1" width="1"/> Mon, 23 Apr 2012 09:02:45 +0000 poakpong 1678 at http://www.poakpong.com http://www.poakpong.com/node/1678#comments http://www.poakpong.com/node/1678