ozinepank

Test plugin lightbok

noreply@blogger.com (ozinepank) — Fri, 05 Aug 2011 07:52:00 +0000

Tutorial Multitab jQuery มันเยอะจำไม่ได้ เขียนแนบลิงค์กันลืม

noreply@blogger.com (ozinepank) — Wed, 13 Jul 2011 04:31:00 +0000

:http://www.1stwebdesigner.com/css/36-eye-catching-jquery-navigation-menus/
:http://www.noupe.com/jquery/45-jquery-navigation-plugins-and-tutorials.html
:http://nettuts.s3.amazonaws.com/001_Tabbed/site/jQuery.html# {review final}
:http://d2o0t5hpnwv4c1.cloudfront.net/004_Moo/tutorial/demo/demo.html# {review final :effect}

The Google+ project ของเล่นใหม่ของพี่กูเกิล

noreply@blogger.com (ozinepank) — Fri, 01 Jul 2011 10:35:00 +0000

Open Content : Top UP javascript

noreply@blogger.com (ozinepank) — Thu, 16 Jun 2011 12:20:00 +0000

ถ้าใครเล่น Facebook แล้วดูรูปเพื่อนลำบ้าก ลำบาก ลองวิธีชมภาพแบบไม่ต้องคลิกดูรึยัง ดีจริงๆถึงแนะนำ :)

Credit:http://gettopup.com/

การใส่ TwitThis ลงในบล็อกเกอร์

noreply@blogger.com (ozinepank) — Fri, 20 May 2011 12:42:00 +0000

copy code: ลงไปวางหลังบรรทัด คำว่า post-footer-post-footer-line-2 ตามนี้

cradit : http://cranialsoup.blogspot.com/2009/01/add-twitthis-button-to-your-blogger.html

ต้อนรับ Account delicious.com ใหม่ของกระผม

noreply@blogger.com (ozinepank) — Sun, 10 Apr 2011 05:09:00 +0000

พอดีเป็นคนที่เล่นเน็ตทุกวันก็เลยเห็นข้อมูลดีๆมีเยอะแยะไปหมด ทั้งเว็บไซต์สวยๆเทคนิคดีๆในการออกแบบ งาน Art งาน Design , Menu Nav. บทความสุดเทห์ โอถ้าจะเล่าคงยาวไปครับ เอาเป็นว่าเจ้า Account delicious.com ที่ว่า เป็นการ Save URL ที่ต้องการ Copy ไว้เผื่อกันลืมครับ ผมเคยเขียนเรื่องการ Bookmark ไว้ครั้งหนึ่งแล้ว แต่มันข้อจำกัด คือ เมื่อผมเปลี่ยนเครื่อง Bookmark นั้นก็จะไม่มีเพราะ Browser เครื่องอื่นไม่ได้ Save ไว้ (กรรม ) วิธีที่ดีที่สุดก็คือ ต้องหาวิธีอื่นในการ Save Link ดีๆไว้โดยไม่พึ่งพิงจาก Browser และแล้วก็เจอทางออก ผมใช้
http://www.delicious.com/ozinepankแล้ว Work แจ่วดีครับ หากใครยังไม่ลองก็ไปหัดใช้ดู ด้านล่าง คือ ตัวอย่าง Feeds ข้อมูลที่ผมเก็บไว้กันลืม

มันยอดจริง Blogger Dynamic Views

noreply@blogger.com (ozinepank) — Tue, 05 Apr 2011 10:11:00 +0000

ขอบอกว่า มันยอดจริงๆครับ สำหรับเครื่องมือตัวนี้ มันตอบโจทย์ได้ดีมากๆหากคุณกำลังเขียนบล็อกด้วย Blogger ของ Google อยู่ Blogger Dynamic Views ผมได้ลองเห็นดูแล้ว มันยอดจริงๆครับ วิธีการใช้งาน เพียงแค่คุณพิมพ์คำว่า view/ แล้วต่อท้ายด้วย sidebar ,flipcard หรืออื่นอีกประมาณ สี่ห้าแบบให้เลือก

เริ่มจาก ใส่ URL ตัวเองก่อน ดังนี้ http://ozinepank.blogspot.com/ แล้วก็ตามหลังด้วย http://ozinepank.blogspot.com/view/sidebar

มันเหมาะมากมายกับคนที่เขียนบล็อกมีรูป เยอะๆเช่นบล็อกขายของ เอางี้ไปลองอ่านกันเอาเองแล้วกันนะครับ ลุยกันให้เต็มที่มีหลายแบบให้ลอง จัดไปโลด (รู้สึกผมไม่ได้อับบล็อกมานาน) ลองดูการแสดงผลของบล็อกผมในรูปแบบที่ต่างกันตามลิงค์ด้านล่าง
http://ozinepank.blogspot.com/view/sidebar
http://ozinepank.blogspot.com/view/flipcard
http://ozinepank.blogspot.com/view/mosaic
http://ozinepank.blogspot.com/view/snapshot
http://ozinepank.blogspot.com/view/timeslide

และแหล่งข้อมูลอ่านได้จากตรงนี้ครับ
http://www.google.com/support/blogger/bin/answer.py?hlrm=th&answer=1229061&ctx=go

tumplr blog

noreply@blogger.com (ozinepank) — Sat, 05 Feb 2011 11:57:00 +0000

Web Gallery , Web CSS

noreply@blogger.com (ozinepank) — Fri, 04 Feb 2011 12:23:00 +0000

Visits:http://www.cssdesignawards.com/

Visits:http://www.thecssawards.com/css-websites.php

45-hilarious-and-artistic งานวาดภาพสวยๆครับ

noreply@blogger.com (ozinepank) — Mon, 31 Jan 2011 08:28:00 +0000

พอดีได้รับเมลมาอีกทีหลังจากที่ผมไป Subsribe เว็บเค้ามาข้อมูลก็วิ่งมาแบบสบายๆนอนอยู่ก็มีข้อมูลดีส่งมาให้

ดูข้อมูลต้นฉบับได้ที่นี้ครับ :http://www.tripwiremagazine.com/2011/01/45-hilarious-and-artistic-examples-of-caricature-art.html

Test lightbox image on blog :)

noreply@blogger.com (ozinepank) — Sun, 30 Jan 2011 13:09:00 +0000

I'm test lightbox image Thank you credit :http://www.bloggerplugins.org/2009/08/light-box-image-viewer-for-blogger.html

บันทึกช่วยจำ ตอน ตอบคำถามตัวเองก่อนเป็น Freelance

noreply@blogger.com (ozinepank) — Tue, 25 Jan 2011 10:35:00 +0000

ลองผิดลองถูกมาเป็นปีๆกับเรื่องเว็บไซต์ ทั้งทางเน็ตและก็หนังสือมากมายที่ซื้อมาอ่านก็หมดไปหลายพันเลยที่เดียว ทั้ง CSS , Joomla! สำหรับหนังสือจูมล่านี้สองเล่มเข้าไปแล้ว แต่เอาเข้าจริงกลับไม่ได้อ่านจบแม้แต่เล่มเดียว และก็ยังดูเรื่องของ Wordpress อยู่เนืองๆจากเว็บพี่ๆที่รู้จักกันทางทวีตเตอร์บ้าง เฟสบุ๊คบ้าง แต่ก็ยังไม่ได้ดั่งใจอยู่หลายเรื่อง เช่น หนังสือที่ซื้อมายังอ่านไม่จบซักก่ะเล่มเดียว เพราะนิสัยชอบอ่านข้ามตอน คือ ผมดันไปอ่านตอนท้ายๆเล่มว่ามันเป็นยังไงตอบโจทย์ตัวเองได้แค่ไหน ถูกใจเรารึเปล่า โดยลืมมองเรื่องของโครงสร้างพื้นฐานที่ควรจะเป็นจาก 0 ไป 1 ไป 2 ไป 3 นี่ก็เป็นเหตุผลหนึ่งที่ไม่ไปไหนซักที เพราะนิสัยมักง่ายนี่แหล่ะครับจึงเกิดปัญหาตามมาหลายประการ จนเกิดคำถามว่าตัวเองทำอะไรอยู่ตอนนี้

1.ตัวเองไม่เข้าใจโครงสร้างของ เว็บ ( CSS , HTML , PHP , XHTML )

เมื่อเราคิดว่าจะรับงานเขียนเว็บจริงๆ ก่อนอื่นต้องสำรวจตัวเองก่อนว่าเมื่อเอาเข้าจริงๆแล้วเป็นงานแค่ไหน นี่แหละเป็นปัญหาใหญ่เลยซึ่งตัวเองยังไม่ได้ลองลงสนามจริงๆหรือว่าแก่กล้าอาคมหนังเหนียว ฟันแทงไม่เข้า กล้าชนกับลูกค้า (ทวงหนี้หรือโดนทวงงาน) มีวิชาพอจะสู้กับ Freelance ในท้องตลาดได้ ซึ้งปัจจุบันแล้วเว็บเป็นเรื่องที่ง่ายขึ้นทุกวัน เรื่องหั่นราคา คือ กลยุทธเด็ดที่ทำให้เราไส้แห้งไปตามๆกัน บังเอินผมได้ตามอ่านหลายๆบทความซึ่งถือว่าเป็นหนังสือกลยุทธการรับงานเขียนเว็บที่ดีเลยทีเดียว เอาหล่ะกลับมาพูดเรื่อง ตัวโครงสร้างเว็บกันต่อดีกว่า แยกหมวดแบบไทยๆเลยแล้วกัน

ก.ต้องเข้าใจโครงสร้างเว็บที่ว่างเปล่าลอยๆอยู่อากาศมาร์คอัปที่เราจะเขียน

ผมลองหัดเขียน Themes เองแบบเอาดื้อๆเลยแกะโค้ด CSS เองแบบว่าลองวิชาตัวเอง แต่แล้วก็เจอปัญหาที่ว่า หน้าเว็บเพี้ยน!! Sidebar ผิดตำแหน่ง ไม่เข้าใจเทคนิคหลายประการ เช่น เมื่อเราเขียนโค้ด border คิดว่าโอเคแล้ว พอไปเปิดอีก Blowsers อื่นๆ เช่น IE เพี้ยน!! กระจาย Firefox ก็ดูได้ผ่านแบบหลวมๆกันไป เลยหันไปดูรายละเอียดจริงๆว่ามันเกิดอะไรขึ้นกับความเข้าใจที่ผ่านมา เราอ่อนหัดจริงๆเลยลองค้นหาในกูเกิลดูก็พบว่าเราต้องเขียน css reset อาการเพี้ยนแบบนี้ เพราะการแสดงผลแต่ละบราวเซอร์ไม่เหมือนกัน เพราะแต่ละ blowsers มีการตั้งค่า คิดค่าที่แตกต่างกันจึงแสดงผลออกมาไม่เหมือนกัน ซึ่งบทความนี้อธิบายและเห็นภาพได้ดีทีเดียว http://www.rockinroom.com/2009/05/08/css-reset-css/
ตัวอย่าง css reset

/* CSS RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; outline: 0; font-size: 100%; font-family: Thonburi, “Lucida Grande”, Arial, Tahoma, Sans-Serif; vertical-align: baseline;}
:focus {outline: 0;}
body {line-height: 1; color: black; background: white;}
ol, ul {list-style: none;}
table {border-collapse: separate;}

caption, th, td {font-weight: normal;}
blockquote:before, blockquote:after,
q:before, q:after {content: “”;}
blockquote, q {quotes: “” “”;}
body,p,td,th,ul,li{ color: #000; font-family: “Lucida Grande”, Arial, Tahoma; font-size: 12px; line-height: 15px; padding: 0; margin:0; }
.clearspace {clear:both; height:0px; padding:0px; margin:0px; width:0px;}
a { color: #888888; text-decoration: none; }
a:hover { color: #333; }
a:active { color: #333; }

Credit:http://www.rockinroom.com/

ข.ขาดการวางแผนงานและจัดอันดับความสำคัญของตัวเอง

บอกได้เลยว่าคนที่เล่นเน็ตส่วนมากติด Facebook นี้ก็เป็นอีกปัญหาของผมเช่นกัน แต่ก่อนนั้นติด Twiiter ทวีตทุกวันดู Timeline จนตาลาย ตอนนี้ไม่ค่อยได้ทวีตแค่ดูข่าวตอนเช้าๆและก็อัพเดตเล็กน้อยๆ แต่ดันมาติดเฟสบุ๊ค อาจเป็นเพราะเพิ่งได้เล่นจริงๆจังๆมาไม่นานเลยติด คิดว่าไม่นานก็คงเพลาๆลง จึงเป็นเหตุให้แผนงานที่วางไว้ช้ามากเกินผิดปกติ ถ้าเป็นบริษัทถ้าส่งงานช้าเค้าคงไล่ออกไปนานแล้ว!! แต่นี่เป็นการฝึกตัวเองงานยังไม่มีเลยไม่มีปัญหาอะไร แต่ถ้าคำนวณค่าใช้ง่ายในการเสียค่าเน็ตทุกๆเดือนแล้วถือว่าขาดทุน เพราะมัน คือ ต้นทุน น่ะครับ เลยคิดว่าต้องทำตารางปฎิทินวางแผนงานตัวเองซ่ะแล้ว ว่าวันที่ทำอะไร ควรเขียนอะไร หาข้อมูลกับเว็บไหน ฯ เพราะจะเป็นการสร้างนิสัยและบังคับตัวเองไปในตัว (ซึ่งมีบทความคล้ายๆกันที่เขียนเกี่ยวกับการทำงานเป็น Freelance ของบล็อก @ipattt อ่านได้ที่นี้ครับ :Freelance และเทคนิคการทวงเงิน ซึ่งผมก็ได้แรงบันดาลใจจากบทความนี้ จึงหันมามองการทำงานของตัวเองมากขึ้น)

ตัวอย่างปฎิทินแผนงาน

มีต่อภาคต่อไป :) หากใครมีคำแนะนำดีๆคอมเม้นฝากไว้ แชร์ๆกันก็ยินดีน่ะครับ

ผลสำรวจ Blogspot,Wordpress,Joomla ใน Google trends

noreply@blogger.com (ozinepank) — Sun, 23 Jan 2011 12:27:00 +0000

ผมได้ทดลองสำรวจความสนใจของผู้คนที่เกี่ยวกับเว็บไซต์ต่างๆ โดยผมจับมาอยู่สามตัว คือ blogsot , Wordpress , Joomla ตารางเปรียบเทียบด้านบนเป็นผลสำรวจในไทยตั้งแต่ปี 2004- 2010

: blogspot ----------------------- : wordpress ------------------------ : Joomla --------------------------

blogspot 0.36 % wordpress 0.46 % Joomla 1% ในการค้นหาผ่านระบบเซิร์สของกูเกิล โดยใช้ Joomla ในการจัดอันดับ (Rank by Joomla ) ที่ผมลองดูสำรวจนี้เพราะว่าจะได้ดูแนวโน้มการทำโปรเจ็คที่วางไว้ ว่าถ้าจะทำอะไรซักอย่างที่เกี่ยวกับบล็อกของกูเกิล(Blogspot) นั้น มีทิศทางเป็นอย่างไร เท่าที่ผมทราบมามีคนกลุ่มแรก คือ นักพัฒนาซอร์ฟแวร์ต่างๆในไทยใช้บล็อกของกูเกิลเป็นตั้งแต่ปี 2004 เลยน่ะครับ แต่คงอยู่ในวงที่แคบเกิน สังเกตได้จากกราฟสีน้ำเงินเริ่มมีแนวโน้มการค้นหามากขึ้นในปี 2007 และมีแนวโน้มผู้คนหันมาเขียนบล็อกมากขึ้นเลยเห็นเป็นดังภาพ คือ การค้นหาคำว่า blogspot มีมากขึ้นเรื่อยๆ

หากท่านใดมีข้อมูลที่ละเอียดกว่าช่วยแย้งผมด้วยน่ะครับ ลองตรวจสอบข้อมูลได้ที่ลิงค์นี้ครับ :
http://www.google.com/trends?q=blogspot,+wordpress,joomla&ctab=0&geo=th&geor=all&date=all&sort=2

ทดลองปักหมุดแผนที่ด้วย Google Map

noreply@blogger.com (ozinepank) — Fri, 21 Jan 2011 07:49:00 +0000

ดู ร้านกาแฟอินทนิล เทพารักษ์ ปั้มบางจาก กม.9 ในแผนที่ขนาดใหญ่กว่า

เทคนิคนี้ผมค้นหาในกูเกิล เจออยู่บล็อกหนึ่งเขียนบอกไว้เนื้อหามีประโยชน์มากสำหรับคนที่กำลังาข้อมูลการใช้งาน google Map เพื่อมาลงใช้งานในบล็อกหรือBlogspot (ผมค้นหาคำว่า How to Use Google Map on blogspot ดูแต่แล้วก็ยังไม่มีเว็บไหนอธิบายได้ข้าใจ)

วิธีดูแผนที่ง่ายๆเลยลองใช้เมาส์ดับเบิ้ลคลิกที่ตำแหน่งที่ปักหมุด ดับเบิ้ลคลิกไปจนเห็นรายละเอียดครบครับและใช้เครื่องหมาย + ที่มุมซายของแผนที่ช่วย แค่นี้ก็เป็นอันเรียบร้อยครับ

วิธีการติดตั้ง google Map ผมขอแนะนำลองไปอ่านที่นี้ครับ

: http://introduction-blogger.blogspot.com/2010/11/blogblogspot.html

เขียนบทความให้มีสีสันด้วย css

noreply@blogger.com (ozinepank) — Tue, 18 Jan 2011 12:26:00 +0000

Div content here
You can create

Test ลองใส่ขอบ border : 3px solid #EEE;

Hello every body .......................

Div content here :)

ลองเล่นกันดูครับ สังเกตว่าผมจะประกาศ style เข้าไปใน html โดยตรงเลยวิธีนี้เหมาะกับการเขียนบทความที่ต้องการเน้นเนื้อหา หรือบทความนั้นมีความสำคัญ แต่ก็ขึ้นกับคนชอบหรือวิธีการของแต่ละคนจะประยุกค์ใช้ยังไงครับ :)

วีดีโอแนะนำการติดตั้งจูมล่าแบบ : Localhost

noreply@blogger.com (ozinepank) — Sun, 16 Jan 2011 06:24:00 +0000

วีดีโดนี้ผมตั้งใจทำขึ้นดพื่อทดสอบและปรับแต่งหรือสอดแทรกไอเดียว่าควรจะสื่ออะไรลงไปในวีดีโอเป็นการซ้อมมือไปในตัวก่อนที่จะทำโปรเจ็คที่วางเอาไว้ จนมีคนชอบและ Subscribeใน Youtube และก็ได้เป็นเพื่อนกับ
Jooml! office Chanelและก็ยังมี Joomla Art ด้วย

ผมก็แปลกใจอยู่เหมือนกัน :) อยากดูคลิกตามลิงค์นี้ครับ http://www.youtube.com/user/kentarosun

การใช้ label ใน HTML

noreply@blogger.com (ozinepank) — Fri, 14 Jan 2011 18:14:00 +0000

นี้ก็เป็นโค้ดที่มีประโยชน์อีกอัน

ที่จริงเอาไว้ไปประยุกต์ต่อยอดได้หลายอย่าง เอาแปะไว้กันลืม :) วันหลังจะเขียนเนื้อหาที่ครอบคุมกว่านี้หน่อย รวบรวมอยู่ครับ :)

Dropdowns categories โดยใช้ optgrop ใน HTML

noreply@blogger.com (ozinepank) — Thu, 13 Jan 2011 18:30:00 +0000

การแสดงเป็นดังภาพด้านล่าง

จริงๆผมเขียนไว้เผื่อกันลืมและก็เอาไว้ต่อยอดในการใช้งานอย่างอื่นครับ Dropdowns เหมาะกับการใช้งานเลือกประเภทและหมวดหมู่น่าจะเป็นการดีหากได้นำไปใช้อย่างเหมาะสมกับเว็บที่ต้องการประหยัดพื้นที่ Sidebar หากท่านใดมีคำแนะนำดีๆก็ยินดีเป็นอย่างยิ่งเลยครับ (ผมจะใช้ <> แต่มันไม่แสดงผล ผมเลยใช้ [optgroup ] แทนครับมีใครพิมีคำแนะนำทริปการเขียนโค้ด ยินดีรับฟังน่ะครับ แฮะๆ)
credit : http://net.tutsplus.com/tutorials/html-css-techniques/the-10-html-tags-beginners-arent-using/

ทดลองเขียนโค้ด html css ด้วย syntaxhighlighter

noreply@blogger.com (ozinepank) — Tue, 04 Jan 2011 17:49:00 +0000

ช่วงนี้รู้สึกขยันอยากเขียนโค้ดขึ้นมาทุกวัน ผมก็เลยเพิ่มโค้ด syntaxhighlighter เพื่อช่วยให้ผม highligh โค้ดงามๆหน่อย จากนี้ก็คงจะหนักไปทางเขียนโค้ดเป็นหลักและก็ดูเรื่อง UI ประมาณว่า User Interface ผู้ใช้เปิดเว็บแล้วรู้สึกใช้ง่าย ไม่ต้องมีโน้น นี้ นั้น ให้ลายตา (คุณรู้สึกเหมือนผมไม..ว่าเราตาลายกับหลายๆเว็บ อิอิ ) ในเรื่องอื่นๆก็ยังคงติดตามอยู่เนือง อาทิ เช่น Joomla! , Wordpress บทนี้แค่หอมปากหอมคอไปก่อนครับ อ่อ!! ลืมบอกไปผมศึกษาเรื่องเขียนเว็บมาเป็นแรมปีจากนี้ไปคง เริ่มจริงจังมากขึ้น อาจจะเขียนเรื่องเฮฮาปาร์ตี้น้อยลงน่ะครับ (ก็ลงทุนซื้อหนังสือมาอ่านตั้งหลายเล่มอ่านยังไม่จบซักก่ะเล่มก็เลยลุยยาวหน่อย ลั้นลาน้อยลงครับ )

ไม่พลาดข่าวสารกับเทคนิค Bookmark (บุ๊คมาร์ค)

noreply@blogger.com (ozinepank) — Mon, 06 Dec 2010 10:52:00 +0000

ผมคงไม่อธิบายยาวมากนักกับ ความหมายของคำว่า บุ๊คมาร์ค เพราะคิดว่าน่าจะพอเข้าใจกันบ้างไม่มากก็น้อย ผมขอแนะนำเทคนิคการรับข่าวสารข้อมูลทางอินเทอร์เน็ตในแบบของผมมาฝากแล้วกันเผื่อมีประโยชน์ หากใครเป็น Social Network มีเพื่อนเยอะ ชอบ Chat หรือชอบตามข่าว ผมใช้วิธีประมาณ นี้
การ บุ๊คมาร์คใน Chrome blowser เมื่อเราอยากติดตามข่าวสาร ความเคลื่อนไหวของเว็บที่เราสนใจหรือชื่นชอบ ก็แค่เข้าเว็บนั้นแล้ว คลิก คำว่า บุ๊คมาร์ค ตรงมุมขาวมือของช่องค้นหา

เช่น จะตามข่าวจากหน้า facebook page ของเว็บ JoomlaArt ผมก็แค่ บุ๊คมาร์คเก็บไว้ แค่นี้ก็ไม่ต้องพิมพ์หาให้ยุ่งยาก

ภาพการ Bookmark บน Chrome blowser

การบุ๊คมาร์ค Firefox blowser ทำเหมือนขั้นตอนของ Chrome blowser ทุกอย่างครับ

ภาพการ Bookmark บน Firefox Blowser

การบุ๊คมาร์ค RockMelt blowser อันนี้ง่ายสุด ผมขอแนะการรับข่าวสารแบบ Feeds ดีกว่าครับ

ทำเหมือนเดิม คือ เจอเว็บที่ชอบแล้ว คลิก คำว่า Feeds มุมล่างสุดของ widgets ของ RockMelt blowser ครับ ดังภาพ

แค่นี้คุณก็เป็นคนไม่ตกข่าวสารกับเว็บที่คุณชื่นชอบแน่นอนครับ หากใคมีเทคนิคที่ดีกว่านี้ก็แนะนำกันได้นะครับ...

5 web Design ที่ผมใช้เป็นกรณีศึกษา เรื่อง การใช้ สี

noreply@blogger.com (ozinepank) — Sun, 05 Dec 2010 11:33:00 +0000

เว็บที่นำมาเป็นตัวอย่างนี้ ผมเน้น Web ที่ออกแนวโทนสีดำเป็นหลัก ดูการใช้ สีของ Themes และ Fonts

ภาพทั้งหมดอ้างอิงมาจากเว็บ : www.tripwiremagazine.com

บันทึกการเริ่มต้น สู่งาน Design "ว่าด้วยเรื่องของ สี"

noreply@blogger.com (ozinepank) — Sat, 04 Dec 2010 12:19:00 +0000

HOW TO DESIGN ?
HOW TO WEB DESIGN ?
HOW TO CREATE ?
HOW TO DESIGN TEMPLATE ?
? HOW ? DESIGN ? ? DESIGN?
ผมเป็นคนที่สนใจเรื่องศิลปะมาตั้งแต่เด็กๆ ชอบภาพสวยๆ ชอบดูรูปวาด และเกิดความสงสัยในใจตลอด ว่า ถ้ามีจินตนาการแล้วจะสื่ออกมาให้เป็นดังที่คิดไว้ในหัวมันต้องอาศัยอะไรบ้าง ฝีมือและทักษะ พอโตขึ้นก็หันไปสนใจทางด้าน Web Design และ Art Design ผมเลยลองหาข้อมูล เรื่องของ สี เพื่อเป็นแนวทาง พอดีก็แอบไปอ่านบล็อกของ @iMenn มาบ่อยๆ เลยคิดว่าเราน่าจะจริงจังกับชีวิตกับแนวทางที่ฝันไว้ เลยเริ่มเรียนรู้เรื่องสีก่อนน่าจะดี จากเว็บนี้แล้วกัน

เว็บที่ผมเริ่มทำความเข้าใจเรื่องของ สี http://kuler.adobe.com

ผมยังอธิบายอะไรไม่ได้มากมายหรอกน่ะครับ แต่ผมลองเล่นแล้วเอามาปรับกับการใช้ได้ดี
แต่สิ่งที่กำลังทำ คือ การกลับไปอ่านทบทวนบทความเก่าๆที่พี่เม่น เคยแนะนำไว้ (น่าจะปีหนึ่งแล้ว) เรื่อง "อยากมีเว็บเป็นของตนเอง เริ่มต้นอย่างไรดี?" แล้วยังมี @Mokin27 ได้แนะนำเรื่องของการเป็น Designer ไว้อย่างน่าสนใจ ผมเลยยืมมาแปะไว้เผื่อเกิดประโยชน์กับท่านอื่น

@MoKin27 แนะนำว่า "อยากจะเก่งอยากจะเป็น Designer ทางคุณ Evan Skuthorpe แห่งเว็บ http://designm.ag
เขาฝากมาบอกว่าคุณต้องมีคุณสมบัติดังนี้ครับ

10 Keys to Growth as a Designer :
1. Solid Foundation of Knowledge
2. Tools for Learning
3. Priority on Learning and Development
4. Feedback from Clients
5. Constructive Criticism
6. Effective Sources of Inspiration
7. Experimentation on Your Own
8. Mentors to Follow
9. Taking Risks
10. Focus on Improvement Rather Than Perfection
อ่านหลายล่ะเอียดได้ที่ด้านในเลยครับ http://designm.ag/freelance/keys-to-growth/ "

จากที่ได้ลองผิดลองถูกมาเยอะ นี้ถือว่าเป็นก้าวแรกของผมก็ว่าได้ หากท่านใดแวะมาเจออยากแนะนำเว็บเกี่ยวกับงาน Design ดีๆ ฝากลิงค์หรือคอมเม้นฝากไว้ ผมจะยินดีเป็นอย่างยิ่งเลยครับ :D

วิธีใช้งาน Widgets Twitter Display สำหรับ Blogger

noreply@blogger.com (ozinepank) — Sun, 21 Nov 2010 11:39:00 +0000

Wedget Twitter เป็นเครื่องมืออัปเดตข้อมูลแบบ Realtime ของ Twitter ผู้ที่เล่นทวิตเตอร์ สามารถนำ Widgets ตัวนี้มาลงในบล็อกหรือเว็บไซต์ของตัวเองได้ง่ายๆ เพียงไม่กี่ขั้นตอน
อธิบายขั้นตอนการตั้งค่า Widgets ได้ดังนี้
-เข้าเว็บ http://twitter.com/widgets
เลือกไปที่ My Website หน้านี้จะมีหลายหมวดให้ปรับแต่งน่ะครับ ผมขอแนะนำแค่วิธีเดียว โดยให้เลือกไปที่
Profile Widgets Display your most recent Twitter updates on any webpage. จากนั้นจะเห็นคำว่า Customize Your Profile Widgets ตรง Settings User Name ให้เราใส่ ชื่อของเราที่ใช้เล่นทวิตเตอร์ เช่น User Name : Ozinepank (ชื่อ Account Twiiter ของกระผมเอง) จากนั้นคลิกตรง Test Settings อยู่ตงมุมด้านล่างซ้ายมือของหน้าเว็บ ในส่วนของเมนูอื่นๆก็สามารถปรับแต่งหน้า Widgets ได้รายการเมนูปรับแต่งมีดังนี้

1.Settings : User Name ตรงนี้สำหรับใส่ Account Twiiter

2.Preformance : เป็นการปรับแบบละเอียด มีทั้งการปรับให้แสดงกี่ทวิต เช่น ต้องการแสดง 10 ทวีต ก็ปรับตรง Number of Tweets เป็น 10
3.Apprearance : เป็นการปรับสีของ Widgets เช่น สีตัวอักษร สีของลิงค์ สีของ Background
4.Dimensions : เป็นการปรับขนาดของ Zise Widgets ที่จะให้แสดง เช่น 250x300
หลังจากปรับแต่งได้แล้วให้เรา คลิกตรง Finish & Grab code จะได้เป็น Code มาให้เรา Copy code ทั้งหมดมาวางในบล็อกเรา สำหรับบล็อกเกอร์แนะนำให้วางตรง Sidebar โดยเข้าไปเลือกออกแบบ เลือก เพิ่ม Gadget เลือกลักษณะเป็น HTML/จาวาสคริปต์ วาง Code ที่เรา Copy มาจากนั้นบันทึก แค่นี้ก็เสร็จแล้วครับ ลักษณะที่แสดงจะเป็นแบบนี้

Game in HTML5 (Agent 008 Pool game)

noreply@blogger.com (ozinepank) — Fri, 19 Nov 2010 17:13:00 +0000

HTML5 : Agent 008 Pool game in HTML5 ผมเป็นคนที่ไม่ค่อยเล่นเกมแต่ด้วยความสงสัย ว่า เกมที่เราเล่นๆกันทั่วไปใช้เทคโนโลยีอะไร ทำไมถึงได้ตอบสนองการเคลื่อนไหวของผู้เล่นจนหน้าทึ่ง จนผมได้ไปเจอเกมตัวหนึ่งซึ้งน่าสนใจมาก ดูแล้วพัฒนามาจาก HTML5 จากค่าย Pixel Lab เลยอยากเอามาให้ลองเล่นกันดู

สามารถทดลองเล่นได้ที่เว็บไซต์ : http://agent8ball.com/
ผมทดลองเล่นกับ Firefox 4 beta 7 , Chrome 9 , IE9 การแสดงผลและการตอบสนองของการเคลื่อนไหวสมจริงดี เล่นแล้วรู้สึกอย่างไรกับเกมนี้ อย่าลืมฝากคอมเม้นไว้ให้ฟังกันหน่อยน่ะครับ :)

ขั้นตอนการการเตรียมเครื่องเพื่อการติดตั้งจูมล่า (Localhost Installation)

noreply@blogger.com (ozinepank) — Fri, 19 Nov 2010 06:07:00 +0000

การติดตั้งจูมล่าแบบโลคอล บนเครื่องคอมพิวเตอร์ของเรา จะต้องติดตั้งโปรแกรมสำหรับประมวลผลพวกภาษาสคริปต์ PHP MySQL เพื่อจำลองเครื่องเราให้กลายเป็น"เว็บซอรืฟเวอร์"เสียก่อน ให้เราไปที่เว็บwww.appservnetwork.netเพื่อทำการดาวน์โหลด Download AppServ (ความต้องการเบื้องต้นของคอมพิวเตอร์จำเป็นต้องมี 1.Apache 2.PHP 3.MySQLซึ่งโปรแกรมข้างต้นที่กล่าวมารวมอยู่ในแพ็กเก็จของ AppServทั้งหมดแล้ว)เมื่อทำการดาวน์โหลดจะเห็น Pop up ให้ Save File เมื่อเสร็จแล้วก็จะได้ไฟล์ในการติดตั้งได้เลย ข้อเพิ่มเติมรายละเอียดนิดหน่อย สำหรับการติดตั้งอาจเกิดข้อขัดข้องได้หากผู้ใช้ได้ใช้ Anti virus บางตัวเพราะมีประสบการณ์กับตัวเองมาแล้วครับ เช่น Nod32,AVG หรือซอร์ฟแวร์จำพวกป้องกัน Auto run ต่างๆถ้าหากเจอปัญหาในการติดตั้งลองปิดการสแกนดูหากติดตั้งแสดงว่าเป็นเพราะ Anti virus แนะนำลองใช้ตัวอื่นดู Freeware ก็ได้ครับ มาดูขั้นตอนการติดตั้งกันเลย

ขั้นตอนการติดตั้งโปรแกรม AppServ มีดังนี้

1). ดับเบิ้ลคลิก ลงบนไฟล์ appserv-win32-2.5.x.exe ที่ได้ดาวน์โหลดมา(สำหรับตัว x เป็นเวอร์ชั่นครับตัวอย่างนี้ เวอร์ชั่น appserv 2.5.10) ก็จะเริ่มเข้าสู่การติดตั้ง โดยหน้าต่างจะเห็นดังภาพที่ 1 ให้กดปุ่ม Next

2.) คลิก I Agree เพื่อยอมรับเกี่ยวกับลิขสิทธิ์ในการใช้งานดังภาพที่ 2

3.) คลิก Next เพื่อติดตั้งลงบนไดร์ C:/AppServ 4.)จะเห็นหน้าต่างถามให้เราเลือกโปรแกรมใช้งานต่างๆในแพ็จเก็จ Appserv ให้เราเลือกติดตั้งทั้งหมดเพราะเราจะต้องใช้ทุกโปรแกรม โปรแกรมมีดังนี้
AppServ HTTP Server,MySQL Database,PHP Hypertext Preprocessor และ phpMyAdmin จากนั้นคลิก Next

5.) ในช่อง Server Name ให้ใส่คำว่า Localhost ส่วนช่อง Administrator's Email Address: ใส่อีเมล์ที่จริงหรือไม่มีอยู่จริงก็ได้ครับ นอกนั้นก็ไม่ต้องเปลี่ยนแปลงค่าอะไร จากนั้นคลิกปุ่ม Next
6.) หน้าต่างกำหนดการใช้งาน MySQL วึ่งเป็นการกำหนดรหัสผ่านของดูแลระบบหรือ Root ให้เรากรอกรหัสเข้าไปตรงช่อง Enter root pasword และก็ใส่รหัสเดียวกันในช่อง Re-enter Password ส่วนในช่อง Charactoer Set and Collation ให้เลือกเป็น UTF-8 Unicode (ดูข้อมูลอย่างระเอียด)ส่วนช่องอื่นๆให้ปล่อยว่างไว้ เมื่อเสร็จแล้วก็คลิกปุ่ม Install

7.)ขั้นตอนการติดตั้งไฟล์ต่างๆลงบนคอมพิวเตอร์เริ่มดำเนินการ ถึงตอนนี้แล้วรอจนกว่าการติดตั้งจะเสร็จสิ้นลงครับ
8.)เมื่อมาถึงขั้นตอนนี้แล้วการติดตั้งโปรแกรม Appserv ก็เป็นอันเสร็จแล้ว ให้เราคลิกปุ่ม Finish เลยเพื่อให้โปรแกรมเริ่มทำงาน ไม่ต้อง Restart คอมฯเราก็ได้ หากไม่ติดขัดอะไรก็จะเป็นไปตามที่บอกมาทั้งหมด แต่เราขั้นตอนการสร้างฐานข้อมูลน่ะครับ อยากรู้ว่าโปรแกรมที่เราติดตั้งใช้งานได้หรืไม่ก็ลอง Coppy Address:http:localhost ไปวางใน Browser IE หรือ Firefox ดูครับแต่ผมขอแนะนำ Google Chrome เล่นง่ายดี ถ้าง่ายๆผมก็มีวิธีทดสอบหลังจากติดตั้งทุกอย่างเสร็จแล้วให้คลิกตรงปุ่ม Test