meddlesome's blog » Development http://meddlesome.in.th Technology, Development, Graphic Design, Digital Marketing, Usability Blogs Sat, 15 May 2010 18:32:36 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 สคริปสำหรับคนตาม @guykawasaki http://meddlesome.in.th/2010/05/16/%e0%b8%aa%e0%b8%84%e0%b8%a3%e0%b8%b4%e0%b8%9b%e0%b8%aa%e0%b8%b3%e0%b8%ab%e0%b8%a3%e0%b8%b1%e0%b8%9a%e0%b8%84%e0%b8%99%e0%b8%95%e0%b8%b2%e0%b8%a1-guykawasaki/ http://meddlesome.in.th/2010/05/16/%e0%b8%aa%e0%b8%84%e0%b8%a3%e0%b8%b4%e0%b8%9b%e0%b8%aa%e0%b8%b3%e0%b8%ab%e0%b8%a3%e0%b8%b1%e0%b8%9a%e0%b8%84%e0%b8%99%e0%b8%95%e0%b8%b2%e0%b8%a1-guykawasaki/#comments Sat, 15 May 2010 18:28:59 +0000 meddlesome http://meddlesome.in.th/?p=219 Related posts:
  1. Auto Redirect Script for Thai Image Hosting

]]>

Guy Kawasaki เป็นอดีตนักการตลาดของ Apple ที่นำวิธีการสร้าง”สาวก”เพื่อช่วยการตลาดในยุค Apple ตกต่ำ ซึ่งก็ได้ผลอย่างดี ตอนนี้เขาได้ลงทุนใน Startup หลายๆเจ้า เช่น cotweet, alltop

ตัวเขาเองก็ใช้ Twitter ในการแชร์เรื่องราวเจ๋งๆที่อยู่บนอินเตอร์เน็ตผ่าน @guykawasaki (แต่ที่จริงก็เป็นอีกวิธีการหนึ่งในการดึง traffic/โปรโมท alltop ไปในตัว) ซึ่งผมก็รำคาญเนื่องจากอยากไปอ่านที่ต้นทางมากกว่า เพราะใน alltop มักจะย่อเนื้อหามา

จึงทำ Greasemonkey Script สำหรับ redirect ไปเนื้อหาจริง สำหรับผู้ใช้ Firefox Download ที่

alltop redirect
Download : http://userscripts.org/scripts/show/76447

Related posts:

  1. Auto Redirect Script for Thai Image Hosting


]]> http://meddlesome.in.th/2010/05/16/%e0%b8%aa%e0%b8%84%e0%b8%a3%e0%b8%b4%e0%b8%9b%e0%b8%aa%e0%b8%b3%e0%b8%ab%e0%b8%a3%e0%b8%b1%e0%b8%9a%e0%b8%84%e0%b8%99%e0%b8%95%e0%b8%b2%e0%b8%a1-guykawasaki/feed/ 0 ปรับแต่ง Wordpress ให้เหมาะสมกับ Facebook Share http://meddlesome.in.th/2010/05/13/%e0%b8%9b%e0%b8%a3%e0%b8%b1%e0%b8%9a%e0%b9%81%e0%b8%95%e0%b9%88%e0%b8%87-wordpress-%e0%b9%83%e0%b8%ab%e0%b9%89%e0%b9%80%e0%b8%ab%e0%b8%a1%e0%b8%b2%e0%b8%b0%e0%b8%aa%e0%b8%a1%e0%b8%81%e0%b8%b1%e0%b8%9a/ http://meddlesome.in.th/2010/05/13/%e0%b8%9b%e0%b8%a3%e0%b8%b1%e0%b8%9a%e0%b9%81%e0%b8%95%e0%b9%88%e0%b8%87-wordpress-%e0%b9%83%e0%b8%ab%e0%b9%89%e0%b9%80%e0%b8%ab%e0%b8%a1%e0%b8%b2%e0%b8%b0%e0%b8%aa%e0%b8%a1%e0%b8%81%e0%b8%b1%e0%b8%9a/#comments Thu, 13 May 2010 08:58:38 +0000 meddlesome http://meddlesome.in.th/?p=198 Related posts:
  1. สวัสดีชาวโลก

]]>

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

ดังตัวอย่างข้างบน ถ้าทำการแชร์ลิงค์ที่เป็นวีดีโอ เช่น youtube เวลาขึ้นบน Wall จะแสดง Title, Description, Thumbnail Image จากเว็บโดยอัตโนมัติ แต่ปัญหาที่เกิดขึ้นคือ Web Developer จะมีทางบังคับ content ที่จะโชว์บน Facebook ได้รึเปล่า

คำตอบคือได้ครับ เพราะ Facebook ได้มีเอกสารออกมาในการปรับแต่งให้เหมาะสม โดยมีลำดับขั้นในการดึง content เป็น

  • ค่าที่กำหนดใน <title>,<meta>,<link>
  • เนื้อหา ใน <body> เช่น รูป <img>, รายละเอียด = <p>,<span>

โดยที่รองรับการดึง content ประเภท multimedia (audio,flash video ได้ด้วย)

จุดหลักสำคัญคือ <meta>
ดังตัวอย่างข้างบน

<title>@meddlesome blog"</title>
<meta name="title" content="@meddlesome blog" />
<meta name="description" content="Technology, Development, Graphic Design, Digital Marketing, Usability Blogs" />

การกำหนดรูป thumbnail ก็สามารถกำหนดได้จาก <link rel=”image_src” href=”thumbnail_image” / >

ใน Wordpress การแก้ให้แก้ผ่าน header.php ใน theme ชุดนั่นๆที่ใช้อยู่ เช่น

<link rel=”img_src” href=”<?php echo get_post_meta($post->ID, “img_src”, true); ?>” />

ใน Wordpress มี Plugins ที่ง่ายสำหรับการกำหนด metadata เนื่องจาก <meta name=”description”> เดิมของ Wordpress ได้ใส่รายละเอียดของ Blog ที่กรอกในหน้า General ซึ่งจะเหมือนๆกันทุกหน้า วิธีง่ายๆโดยใช้ Plugins ชื่อ Headspace หรือ All in One SEO ช่วยจะประหยัดเวลาได้มาก เพราะจะมีการ optimized เกี่ยวกับ meta tag โดยอัตโนมัติ

รายละเอียดเพิ่มเติม : Facebook Share/Specifying Meta Tags in Facebook Developer wikis

Related posts:

  1. สวัสดีชาวโลก


]]> http://meddlesome.in.th/2010/05/13/%e0%b8%9b%e0%b8%a3%e0%b8%b1%e0%b8%9a%e0%b9%81%e0%b8%95%e0%b9%88%e0%b8%87-wordpress-%e0%b9%83%e0%b8%ab%e0%b9%89%e0%b9%80%e0%b8%ab%e0%b8%a1%e0%b8%b2%e0%b8%b0%e0%b8%aa%e0%b8%a1%e0%b8%81%e0%b8%b1%e0%b8%9a/feed/ 0 Auto Redirect Script for Thai Image Hosting http://meddlesome.in.th/2010/05/13/redirect-thai-image-hosting/ http://meddlesome.in.th/2010/05/13/redirect-thai-image-hosting/#comments Thu, 13 May 2010 07:09:22 +0000 meddlesome http://meddlesome.in.th/?p=190 Related posts:
  1. สคริปสำหรับคนตาม @guykawasaki

]]>

ตอนนี้มีเว็บอัฟไฟล์/อัฟรูปขึ้นมาหลายเว็บ ผุดเหมือนกับดอกเห็ดทั่วไป แต่สิ่งที่แลกกลับมาคือผู้เข้าไปโหลดหรือดูไฟล์ต้องทนดูโฆษณาน่าเบื่อ ดังเช่นตัวอย่าง

แรกสุดกำเนิดของสคริปนี้เพราะเว็บ mwake.com ได้ทำการ automatic redirect ไปหน้าเว็บของตัวเอง เพื่อปั่น rank จึงทำให้ผมนั่งทำ Greasemonkey Script ตัวนึงที่ไว้ Redirect ไปยังรูปจริงๆที่ ในชื่อ disabled_mwake_redir สุดท้ายแล้วเว็บอัฟรูปไม่ได้มีเว็บเดียว เลยจัดการเขียนให้ใช้กับเว็บอื่นๆได้ ไปๆมาๆ ก็ครอบคลุมเว็บไป 66 เว็บที่ใช้กันทั่วไป ซึ่งก็เป็นที่น่าพอใจ เพราะการใช้ Adblock Plus ก็ต้องมานั่ง Block กันเองอีก

เป็นเหตุให้ผมได้ลองเขียน greasemonkey จนติด แถมยังทำให้ฝึกเขียน javascript บ่อยๆด้วย สำหรับผู้ใช้ Firefox ดาวน์โหลดที่

AIO_Auto Redirect Script for Thai Image Hosting
Download : http://userscripts.org/scripts/show/38647

และสำหรับผู้ใช้ Chrome ตอนนี้ @dominixz ได้ทำการ port ให้ใช้กับ Chrome ได้แล้ว ดาวน์โหลดที่

Auto Redirect Script for Thai Image Hosting
Download : http://bit.ly/dD8dmh

ปล.ถ้าต้องการอัฟเดทเว็บ ให้ไปแจ้งใน http://userscripts.org/scripts/discuss/38647

Related posts:

  1. สคริปสำหรับคนตาม @guykawasaki


]]> http://meddlesome.in.th/2010/05/13/redirect-thai-image-hosting/feed/ 0 สรุปงาน : Adobe CS4 Web 2.0 Design Workflow http://meddlesome.in.th/2009/11/29/%e0%b8%aa%e0%b8%a3%e0%b8%b8%e0%b8%9b%e0%b8%87%e0%b8%b2%e0%b8%99-adobe-cs4-web-2-0-design-workflow/ http://meddlesome.in.th/2009/11/29/%e0%b8%aa%e0%b8%a3%e0%b8%b8%e0%b8%9b%e0%b8%87%e0%b8%b2%e0%b8%99-adobe-cs4-web-2-0-design-workflow/#comments Sat, 28 Nov 2009 18:20:54 +0000 meddlesome http://meddlesome.in.th/?p=172 No related posts.]]>

Adobe CS4 Web 2.0 Design Workflow

Adobe CS4 Web 2.0 Design Workflow

เนื่องจากว่าได้ทราบลิงค์งานนี้ Adobe CS4 Web 2.0 Design Workflow จาก twitter และด้วยความที่งานของผมก็เกี่ยวข้องกับการออกแบบ ก็เลยอยากไปดู workflow ว่าคนอื่นเขามีเทคนิคอะไรเพิ่มเติมรึเปล่า ก็เลยเข้าไปนั่งฟังด้วยครับ

งานนี้จัดขึ้นที่ หอศิลป์กรุงเทพมหานคร โดย Thai Adobe Flex User Group ผู้บรรยาย : Jedt Sitthidumrong

เนื้อหาหลักๆคือแนะนำ Workflow ในการออกแบบเว็บไซต์ที่ถูกต้องเพื่อความรวดเร็ว และลดขั้นตอนยุ่งยากในการทำงานในฝั่งการออกแบบ โดยใช้ Software หลักๆคือ

โดยใช้ Fireworks ในฝั่งการออกแบบ mockup และใช้ dreamweaver/firebug ในฝั่ง coding/debugging

เนื้อหาด้าน Adobe Fireworks CS4

  • ระวังการใช้ Stoke ในการออกแบบ mockup เพราะถ้าออกแบบผิดแล้วต้องการขยาย scale ที่ดูสวยงามในแต่ละ resolution จะแตกต่างกันโดยสิ้นเชิง
  • อย่าใช้ Adobe Illustrator ในการออกแบบโดยเด็ดขาด เนื่องจากปัญหาเรื่อง scaling และความไม่เท่ากันในหน่วย point/pixel (ลองจากทำ stoke แล้วยืดขยายดู)
  • สร้าง Master Page ใน Adobe Fireworks ทุกครั้งที่ทำงาน เพื่อลดความซ้ำซ้อนของ element หลักในหน้าเว็บ(หน้าอื่นๆก็จะ inherit จาก Master Page)
  • ฝัง Meta Data(Description, Tagging, Copyright, Author, etc.) ทุกครั้งเมื่อทำงาน เพื่อความสะดวกในการค้นหา ลดความซ้ำซ้อน
  • Stoke แบบ Hardline ขอบจะคมเต็ม pixel, Softline ขอบจะฟุ้ง(เกิดจากการทำ Anti Aliasing)
  • การทำ Roll-Over ให้ใช้การสร้าง State แล้วค่อยไปสร้าง Behavior (เทคนิคนี้เหมือนทำบน Dreamweaver แต่ส่วนตัวผมไม่แนะนำในการทำงานจริง เพราะ coding ที่ Adobe ใช้ปรับแต่งต่อยาก)
  • Graphic Library มีแถมมาให้ใน Adobe Fireworks ใช้งานได้เลยจาก common library
  • Adobe Fireworks CS4 มีฟังก์ชั่น “Export to Flex Skin” เพื่อเพิ่มความง่ายในการออกแบบ Flex Application โดยทำ template ในหน้าเดียว
  • ใช้ฟังก์ชั่น Align เพื่อจัดการเรื่องตำแหน่งและขนาดของ element ทั้งหมด(แนะนำเทคนิคนี้ เพราะง่ายมาก ไม่ต้องไปเล็ง)
  • ควรใช้การ Export to PDF เพื่อให้ลูกค้ารีวิว (เนื่องจาก pdf สามารถให้ลูกค้าวาด comment ในตัว viewer แล้วบันทึกส่งกลับมาพิจารณาต่อได้ (โปรแกรม Preview ในแมคใช้ฟังก์ชั่น Annotate)
  • สามารถสร้าง Popup menu โดยการใช้เทคนิค swap image ใน behavior อีกเช่นเคย

เนื้อหาด้าน Adobe Dreamweaver CS4

  • เวลาทำเว็บทุกครั้ง ต้องประกาศ tag <!DOCTYPE> ทุกครั้ง เพื่อบอก version ของ html และแนะนำให้ใช้ “XHTML”
  • ใช้ cmd+option+click เพื่อดูรายละเอียดของ element ต่างๆ (คล้ายๆ Firebug)
  • ลดขั้นตอนในการทำงานโดยการใช้การ Edit Original ที่ Fireworks แล้วกด Done เพื่อกลับมาแก้ที่ Dreamweaver ต่อได้(ลดขั้นตอนการทำงานข้ามโปรแกรมได้ดีมาก)
  • ใช้การ “Clocking” ไฟล์ เพื่อป้องกันการ Upload ไฟล์ขึ้นไปซ้อนทับกัน (แต่ผมแนะนำให้ใช้วิธีการทำ subversion เพื่อความคล่องตัวในการทำงาน)
  • ให้ลูกค้าใช้ Firefox ในการรีวิวงาน(เนื่องจากพัฒนาบน Firefox เป็นหลักเนื่องจากได้มาตรฐาน Web Standard) เมื่อทำใกล้เสร็จค่อยให้แก้ Bug ในส่วนของ Internet Explorer (เพราะ IE มันเรื่องมากในมาตรฐานเว็บ ลูกค้าบางคนยังใช้ IE6 ซึ่งจะ 10 ปีเข้าไปแล้ว)

CSS Design Workflow – การทำงานกับการออกแบบ Style Sheet ให้ออกแบบใน Firefox เป็นหลักแล้วค่อยทำ css hacking กับ IE6,7,8 แยกไฟล์กัน เพื่อลดความซ้ำซ้อน

  • Reset CSS
  • CSS Layout (IE6,IE7,IE8(แยกแต่ละไฟล์เพื่อทำ Hacking))
  • CSS Text (IE6,IE7,IE8(แยกแต่ละไฟล์เพื่อทำ Hacking))

จะว่าไปส่วนใหญ่ผมมักจะทำ mockup บน photoshop โดยอิงจาก 960.gs template เพื่อความสะดวกในการวาง grid เว็บ แล้วค่อยมา hardcode ใน TextMate (Dreamweaver จึงไม่ค่อยมีประโยชน์อะไรกับผมมากนัก) แต่หลังจากนี้คงจะลองเอา workflow นี้ไปทำงานดูครับ :)

No related posts.

]]> http://meddlesome.in.th/2009/11/29/%e0%b8%aa%e0%b8%a3%e0%b8%b8%e0%b8%9b%e0%b8%87%e0%b8%b2%e0%b8%99-adobe-cs4-web-2-0-design-workflow/feed/ 0