แจกโค้ดhi5 สกินhi5 ไว้แต่งhi5 ให้อินเทรนด์ก่อนใคร skin-hi5.blogspot.com body { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; background:#123 url("http://www.blogblog.com/dots_dark/bg_minidots.gif"); background-position: 50% 31px; text-align:center; font:x-small Verdana, Arial, Sans-serif; color:#3D81EE; font-size/* */:/**/small; font-size: /**/small; } /* Page Structure ----------------------------------------------- */ #header-wrapper { display: none; } #sidebar-wrapper { width:400px; float:left; font-size:85%; padding-bottom:20px; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #main-wrapper { width:450px; float:right; padding:100px 0 20px; font-size:85%; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text center breaking IE sidebar float */ } #sidebar { /* Title & Description ----------------------------------------------- */ .Header h1 { margin:0 0 .5em; line-height: 1.4em; font: normal bold 250% Helvetica,Arial,Sans-serif; color: #ffcc66; } .Header h1 a { color:#ffcc66; text-decoration:none; } .Header .description { margin:0 0 1.75em; color: #99cc77; font: normal normal 100% Helvetica, Arial, Sans-serif; } /* Links ----------------------------------------------- */ a:link { color:#ddaa77; } a:visited { color:#3D81EE; } a:hover { color:#3D81EE; } a img { border-width:0; } /* Posts ----------------------------------------------- */ h2.date-header { margin:0 0 .75em; padding-bottom:.35em; border-bottom:1px dotted #ffcc66; text-transform: lowercase; letter-spacing:.3em; color: #77bbcc; font: normal bold 100% Verdana, Sans-serif; } .post { margin:0 0 2.5em; } .post h3 { margin:.25em 0; line-height: 1.4em; font: normal bold 95% Verdana,Sans-serif; font-size: 130%; font-weight: bold; color:#99cc77; background:url("http://www1.blogblog.com/dots_dark/bg_post_title_left.gif") no-repeat left .25em; padding-top:0; padding-right:0; padding-bottom:1px; padding-left:45px; } .post h3 a { text-decoration:none; color: #99cc77; } .post h3 a:hover { color: #3D81EE; } .post .post-body { margin:0 0 .75em; line-height:1.6em; } .post-body blockquote { line-height:1.3em; } .post-footer { margin:0; } .uncustomized-post-template .post-footer { text-align: right; } .uncustomized-post-template .post-author, .uncustomized-post-template .post-timestamp { display: block; float: left; margin-right: 4px; text-align: left; } .post-author, .post-timestamp { color:#99cc77; } a.comment-link { /* IE5.0/Win doesn't apply padding to inline elements, so we hide these two declarations from it */ background/* */:/**/url("http://www.blogblog.com/dots_dark/icon_comment_left.gif") no-repeat left .25em; padding-left:15px; } html>body a.comment-link { /* Respecified, for IE5/Mac's benefit */ background:url("http://www.blogblog.com/dots_dark/icon_comment_left.gif") no-repeat left .25em; padding-left:15px; } .post img { margin-top:0; margin-right:0; margin-bottom:5px; margin-left:0; padding:4px; border:1px solid #ffcc66; } .feed-links { clear: both; line-height: 2.5em; } #blog-pager-newer-link { float: left; } #blog-pager-older-link { float: right; } #blog-pager { text-align: center; } /* Comments ----------------------------------------------- */ #comments { margin:0; } #comments h4 { margin:0 0 10px; border-top:1px dotted #ffcc66; padding-top:.5em; line-height: 1.4em; font: bold 110% Georgia,Serif; color:#9c7; } #comments-block { line-height:1.6em; } .comment-author { background:url("http://www.blogblog.com/dots_dark/icon_comment_left.gif") no-repeat 2px .35em; margin:.5em 0 0; padding-top:0; padding-right:0; padding-bottom:0; padding-left:20px; font-weight:bold; } .comment-body { margin:0; padding-top:0; padding-right:0; padding-bottom:0; padding-left:20px; } .comment-body p { margin:0 0 .5em; } .comment-footer { margin:0 0 .5em; padding-top:0; padding-right:0; padding-bottom:.75em; padding-left:20px; color:#996; } .comment-footer a:link { color:#996; } .deleted-comment { font-style:italic; color:gray; } /* More Sidebar Content ----------------------------------------------- */ .sidebar h2 { margin:2em 0 .75em; padding-bottom:.35em; border-bottom:1px dotted #ffcc66; line-height: 1.4em; font: normal bold 95% Verdana,Sans-serif; text-transform:lowercase; color:#77bbcc; } .sidebar p { margin:0 0 .75em; line-height:1.6em; } .sidebar ul { list-style:none; margin:.5em 0; padding:0 0px; } .sidebar .widget { margin: .5em 0 1em; padding: 0 0px; line-height: 1.5em; } .main .widget { padding-bottom: 1em; } .sidebar ul li { background:url("http://www1.blogblog.com/dots_dark/bullet.gif") no-repeat 3px .45em; margin:0; padding-top:0; padding-right:0; padding-bottom:5px; padding-left:15px; } .sidebar p { margin:0 0 .6em; } /* Profile ----------------------------------------------- */ .profile-datablock { margin: 0 0 1em; } .profile-img { float: left; margin-top: 0; margin-right: 8px; margin-bottom: 5px; margin-left: 0; border: 4px solid #345; } .profile-data { margin: 0; line-height: 1.5em; } .profile-textblock { clear: left; margin-left: 0; } /* Footer ----------------------------------------------- */ #footer { clear:both; padding:15px 0 0; } #footer p { margin:0; } /* Page structure tweaks for layout editor wireframe */ body#layout #sidebar, body#layout #main, body#layout #main-wrapper, body#layout #outer-wrapper, body#layout #sidebar-wrapper { padding: 0; } body#layout #sidebar-wrapper, body#layout #sidebar { padding: 0; width: 240px; } -->

วันจันทร์ที่ 22 มิถุนายน พ.ศ. 2552

สำเนาของ Web 2.0 คืออะไรกันนี่ ?



Web 2.0 คืออะไรกันนี่ ?







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


ถ้าเป็นสมัยเก่าหรือที่ผ่านมา หรือบางส่วนในปัจจุบัน ก็คงจะหมายถึงเว็บที่ ใช้ HTML เป็นหลักในการพัฒนา ซึ่งแทบจะไม่มีการอัพเดตข้อมูล และส่วนมากจะถูกสร้างขึ้นสมาจาก HTML การใช้ Internet โดยทั่วไปก็เพื่อ ส่ง Email, คุยกับเพื่อนด้วย Chat Room หรือ IM, Download โปรแกรมใหม่, Search หาข้อมูล, แลกเปลี่ยนความเห็นที่ Web Board, อ่านข่าว ฯลฯ ข้อมูลที่นำเสนอนั้นส่วนมากเกิดขึ้นจากหน่วยผู้ให้บริการเป็นผู้สร้าง Content ขึ้นมาเอง ซึ่งข้อเสียคือมันต้องใช้ทรัพยากรค่อนข้างมาก เสียงบประมาณในการหาข้อมูล ซึ่งต่อมาช่วงหลัง ๆ ก็มีการพัฒนาโดยให้เป็บเว็บที่มัน Dtnkmic มากขึ้น เพื่อการตอบโต้กัน หรือ มีระบบจัดเก็บเนื้อหาจากฐานข้อมูล


ส่วนเหตุผลที่มีแรงพลักดันให้เกิด web 2.0 ขึ้นมานั้น เกิดขึ้นมาจากความเปลี่ยนแปลงลักษณะการท่อง Internet วิถีการเข้าสังคม ต้องการรวมประชาคม หรือกลุ่มโดยแยกให้เห็นโดยชัดเจนนั่นเอง หรืออีกด้านก็คือความสามารถของ Internet ที่มีการพัฒนาศักยภาพด้านความเร็วที่สูงขึ้นกว่าเมื่อก่อนมาก คุณลกษณะของ web 2.0 นั้นถูกออกแบบขึ้นจากเทคนิคต่าง ๆ ที่พัฒนาขึ้นมาในยุค 1990 ส่วนรูปแบบใหม่ที่เกิดขึ้นเช่น blogs ,wikis , tags เป็นต้น


Web 2.0 กล่าวได้ว่าเป็น platform ที่อาศัยอุปกรณ์ที่อยู่ในระบบเครือข่ายเป็นส่วนช่วยในการทำงาน ทำให้การทำงาต่างๆไม่ต้องขึ้นกับคอมพิวเตอร์หรืออุปกรณ์คอมพิวเตอร์ของผู้ใช้ โปรแกรมนั้นได้ถูกนำขึ้นมาวางในเครือข่ายซึ่งทำให้ผู้ใช้สามารถเข้าถึงได้ทุกสถานที่ที่มีการเชื่อมต่อเครือข่าย


คุณสมบัติ
การให้ความสำคัญกับผู้เข้าชมเว็บไซต์ โดยที่ผู้เข้าชมเว็บไซต์จะมีส่วนร่วมต่อเว็บไซต์มากขึ้น ไม่ใช่แค่เข้ามาชมเว็บไซต์ที่เจ้าของเว็บจัดทำขึ้นเท่านั้น ผู้เข้าชมเว็บไซต์สามารถสร้าง content ของเว็บไซต์ขึ้นมาได้เองหรือสามารถ tag content ของเว็บไซต์ (คล้ายๆการกำหนด keyword ที่เกี่ยวข้องกับ content โดยผู้เข้าชมเว็บไซต์เป็นผู้กำหนดขึ้น) ตัวอย่างเช่น Digg, Flickr, Youtube , Wiki


Web 2.0 application จะมีคุณสมบัติที่เรียกว่า RIA (Rich Internet Application) นั่นคือ Web 2.0 application จะมี userinterface ที่ดียิ่งขึ้น เช่น คุณสมบัติ drag & drop ซึ่งเราใช้กับใน desktop application ทั่วๆไปก็สามารถใช้ได้บนเว็บเช่นกัน โดยเทคโนโลยีที่เกี่ยวข้องในการสร้าง RIA เช่น AJAX, Flash


คุณสมบัติที่เรียกว่า mash-up ก็เป็นส่วนสำคัญอีกส่วนนึงของ Web 2.0 application นั่นก็คือการที่เราสร้าง Web application ขึ้นมาสักตัวนึง แล้วเราสามารถเปิด service ของ Web application ให้คนอื่นๆสามารถมาใช้ได้ ยกตัวอย่างเช่น ผมสร้าง Web application เกี่ยวกับระบบการซื้อขายสิ้นค้า online ขึ้นมาโดยผมสามารถ mash-up ระบบของผมเข้ากับ Google maps ได้อย่างง่ายดายเพื่อที่จะทำ Web application ของผมนั่นมีความสามารถในการ ซื้อขายสินค้า online แล้วยังสามารถคำนวนระยะทางและเวลาในการขนส่งสินค้าไปให้ลูกค้า รวมทั้งสามารถพิมพ์แผนที่เส้นทางได้ โดยที่ปผมไม่ต้องสร้าง Application สำหรับสร้างแผนที่ขึ้นมาเองเลย โดยเทคโนโลยีที่เกี่ยวข้องคือ Feeds, RSS, SOA, Web services


วันอาทิตย์ที่ 21 มิถุนายน พ.ศ. 2552

Mapkang


ดู สถานที่ที่ฉันบันทึกไว้ ในแผนที่ขนาดใหญ่กว่า