สร้าง Metro Icons ง่ายๆ ด้วย Syncfusion's Metro Studio

Syncfusion's Metro Studio 2 เป็นเครื่องมือในการสร้าง Icons แบบ Metro Style ซึ่งถูกใช้อยู่บน Windows 8 เท่าที่ผมลองใช้งานดูแล้ว ใช้งานง่ายมากๆเลยครับ ไม่จำเป็นต้องมีทักษะในด้านของการออกแบบก็ได้  เพียงแค่คลิ๊ก ลาก วาง และก็เซ็ตค่านิดหน่อย ก็ได้ Icons สวยๆ แนว Metro มาใช้กันแล้วครับ ลองมาดูหน้าจอการใช้งานขอ ง Metro Studio กันนะครับ

ในความคิดของผมคิดว่า Metro Studio ทำหน้าจอการใช้งานออกมาสวยมากครับ  โดยจะเห็นว่ามี Collections ซึ่งแบ่งออกเป็นหมวดหมู่ชัดเจนทำให้ผู้ใช้สามารถหา Icon ที่ต้องการง่าย รวมถึงการใช้งานที่ไม่ซับซ้อน

ที่นี้เราลองมาดูข้อดีอื่นๆของโปรแกรมนี้กันนะครับ

- มีการรวม Collections ของ Icons ที่เป็นแนว Metro ไว้ให้ใช้งานยู่แล้ว โดยมีให้เลือกถึง 1,700 แบบเลยนะครับ (สามารถเสียเงิน Upgrade เพิ่ม Collection ได้นะครับ)

- สามารถ Generate Code ออกมาเป็น XAML หรือ WinRTAppbar ได้เลยนะครับ

- สามารถสร้าง Project ได้ ซึ่งมีข้อดีคือเราสามารถกลับมาแก้ไข Icon ที่เราเคยทำไว้เลย หรือสามารถสร้าง Icon หลายๆรูปแล้ว Export ออกมาทีเดียวได้

- สามารถสร้าง CSS Sprite ได้เลย เพียงแค่ลาก วาง จากนั้นระบบจะทำการสร้าง HTML และ CSS ให้อัตโนมัติ

ที่มาของข้อมูล

Syncfusion

Syncfusion Metro Studio

Google Web Designer เครื่องมือออกแบบเว็บไซต์จาก Google

วันนี้จะมาแนะนำเครื่องมือออกแบบเว็บไซต์ตัวนึงซึ่งมีชื่อว่า "Google Web Designer" ซึ่งถูกพัฒนาและออกแบบโดย Google ข้อดีของ Tools ตัวนี้คือเราสามารถพัฒนาเว็บไซต์รวมถึง Content ต่างๆ ด้วย HTML5 ช่วยให้เราสามารถพัฒนาเว็บไซต์ได้ง่ายมาก ที่นี้ลองมาดูข้อดีของ Google Web Designer กันนะครับ อย่างแรก คือ สามารถรองรับการทำงานทุก Platform ไม่ว่าจะเป็น Desktop, Tablet หรือ Mobile รวมถึงใช้เทคโนโลยี HTML5 และ CSS3

ต่อมาลองมาดูกันนะครับว่า่ Google Web Designer มี Feature อะไีรให้เราใช้กันบ้าง ผมจะขอแนะนำ Feature เด่นๆที่คิดว่าน่าสนใจให้ลองอ่านนะครับ

อย่างแรกเลยก็คือ Two animation modes เค้าบอกว่าช่วยให้เราสามารถสร้าง Animation แบบ 2D ได้เลย โดยการทำงานจะแยกเป็น Layer โดยแต่ละ Layer สามารถจัดการ Frame ควบคุมการเคลื่อนไหวต่างๆได้

Full 3D authoring environment อันนี้เป็นข้อที่ผมชอบมากๆเลยนะครับ คือ เราสามารถสร้าง Content ให้แสดงผลในรูปแบบ 3D ซึ่งถูกสร้างขึ้นโดยใช้ความสามารถของ CSS3 โดยเราสามารถปรับแต่ง 3D Object ของเราโดยปรับหมุนตามแกน X , Y

Illustration tools เราสามารถสร้างภาพ Vector หรือทำภาพ Art Work ต่างๆ ได้ทันที เพราะ Google Web Designer มีการ illustration tools เข้าไว้ในระบบด้วย

Easy ad workflow ช่วยให้เราออกแบบและสร้างโฆษณาที่สามารถรองรับการทำงานทุก Platform โดยไม่ต้องเขียน Code

เท่าที่ลองใช้ดู Google Web Designer ก็ถือว่าเป็น Tools อีกตัวที่สามารถใช้งานได้ง่ายและสะดวกมาก  สามารถดาวน์โหลดและติดตั้งได้ที่ https://www.google.com/webdesigner ครับ

การใช้งาน Google Webmaster Tool & XML-Sitemap

ในบทความนี้จะเป็นการแนะนำเกียวกับการทำ SEO โดยการเพิ่ม Website และ Sitemap ให้กับเว็บไซต์ของเีรา

เริ่มต้นจะทำการ เพิ่ม Website โดยใช้  Google Webmaster Tools เพื่อเป็นตัวจัดการ เมื่อเข้ามาหน้าแรกจะแสดงหน้าจอ ดังนี้

จากนั้นใ้ห้กดที่ปุ่ม "ADD A SITE"  จะแสดง Dialog ขึ้นมาให้เรากรอก URL ดังรูป

เมื่อใส่ URL แล้วกด "Continue" ระบบจะ Redirect ไปที่หน้า Verify Account เพื่อให้เรายืนยันกับทาง Google ว่าเราเป็นเจ้าของเว็บไซต์ตัวจริงหรือไม่ ดังรูป

การ Verify สามารถทำได้หลายวิธี เช่น
- HTML file upload หมายถึง Verify ผ่านการ Upload HTML
- HTML tag หมายถึง Verify ผ่านการใส่ Mata Tag
- Domain name provider หมายถึง Verify ผ่านผู้ให้บริการจดโดเมน เช่น GoDaddy.com , domainmonster.com
- Google Analytics หมายถึง Verify ผ่าน Google Analytics ID
- Google Tag Manager หมายถึง ยืนยันผ่าน Google Tag Manage ID

วิธีที่ง่ายและนิยมที่สุด คือ HTML file upload ในตัวอย่างนี้เราจะทำการ Verify ด้วยวิธีนี้กันนะครับ
1.วิธีทำคือให้ดาวน์โหลด HTML verification file จากข้อ 1
2.Upload ไปยังเว็บไซต์ของเรา
3.ลองกดที่ URL ข้อ 3 ถ้าลิงค์สามารถใช้งานได้ แสดงว่า Upload ไฟล์เรียบร้ิอย

4. กดปุ่ม Verify ก็จะเสร็จการเพิ่มไซต์ให้กับ Webmaster Tools

จากนั้นเมื่อกดลิงค์ Continue จะ Redirect ไปที่หน้า Dashboard สำหรับจัดการไซต์ที่สร้าง

ขั้นตอนต่อไปที่ต้องทำคือการเพิ่ม Sitemap ให้กับเว็บไซต์ของเรา โดยให้กดที่ Tab Sitemaps จะแสดงหน้าจอ ดังนี้

เริ่มแรกต้องไปสร้าง xml-sitemap ก่อน เพื่อที่จะ Upload ไปยัง Webmaster Tools สามารถสร้างได้โดยเข้าไปที่ http://www.xml-sitemaps.com/ โดยมีหน้าจอ ดังนี้

ให้ใส่ URL แล้วกด Start เพื่อเริ่มสร้าง xml-sitemap ดัวรูป

เมื่อเสร็จแล้วให้ดาวน์โหลด sitemap โดยเลือกแบบ un-compressed XML Sitemap แล้ว Upload ลงเว็บไซต์ โดยให้ใส่ไว้ที่ Root  ดังรูป

จากนั้นกลับมาที่หน้า Sitemap ที่ Webmaster Tools ให้กดปุ่ม "ADD/TEST SITEMAP"  จะแสดง Dialog ให้ใส่ชื่อ Sitemap ที่ Upload ลงเว็บไซต์ จากนั้นกดปุ่ม "Submit Sitemap" ดังรูป

เท่านี้ก็เสร็จกระบวนการทำ Sitemap เรียบร้อยครับ

วิธีการเพิ่ม xml-sitemap ให้กับ Blogger

เริ่มแรกให้เค้ามาที่หน้า Dashboard ของเราก่อนนะครับ

จากนั้นให้เลือกที่เมนู Setting >> Search preferences

ไปที่ Tab Crawlers and indexing เลือก Enable custom robots.txt content เป็น Yes แล้วใส่คำสั่งดังนี้

# Blogger Sitemap generated on 2013.08.07
User-agent: *
Disallow: /search
Allow: /
Sitemap: YOUR_BLOG_URL/atom.xml?redirect=false&start-index=1&max-results=500

ในตัวอย่างทดลองใส่เป็น URL Blog ของผมดังนี้

# Blogger Sitemap generated on 2013.08.07
User-agent: *
Disallow: /search
Allow: /
Sitemap: http://joycerookie.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500

เท่ากับนี้ก็สามารถทำ xml-sitemap เสร็จเรียบร้อยครับ

View response data wih IE Develper Tools

IE Developer Tools เป็นอีกหนึ่งเครื่องมือที่ผมชอบใช้ในการทำงานมาก ไม่ว่าจะเป็นการดูข้อมูล HTML , CSS และ Scripe ต่างๆ รวมทั้งยังสามารถ Debug Scripts เพื่อตรวจสอบการทำงานของ Javascript ได้อีกด้วย


อีกฟังก์ชั่นของ IE  Deveper Tools ที่ผมใช้บ่อยๆ คือ Network ซึ่งใช้สำหรับดูข้อมูล Request ต่างๆ โดยใช้การ Capture Network ที่เกิดจากการทำงานได้ รวมถึงสามารถเข้าไปดูรายละเอียดข้อมูลได้ ดังนี้

- Request headers
- Request body
- Response headers
- Response body
- Cookies
- Initiator
- Timings

ลองมาดูวิธีการใช้งาน Network ของ IE Developer Tools กันนะครับ



สร้างโปรเจค MVC ขึ้นมา จากนั้นให้สร้าง Class Country ซึ่งประกอบด้วยฟิลด์ ID , Name , AbbName

ในตัวอย่างนี้ผมจะทำการดึงข้อมูล Country โดยใช้ Ajax Request ไปเรียก Action GetCountry
แลว Response ข้อมูลออกมาเป็น JsonResult แสดงที่หน้าจอ

สร้าง GetCountry Action ที่ Controller

สร้างหน้าจอประกอบด้วย button id="btnGetCountry" และ DIV id="countrylist" เพื่อแสดงข้อมูล Country

เขียน Scripts ไปเรียก Action GetCountry

จากนั้นให้ Run ระบบจะแสดงหน้าจอ ดังนี้

กด F12 เพื่อเปิด IE Developer Tools ขึ้นมาจะแสดง Panel  ดังรูป

กดที่ Tab Network แล้วกด Start Capturing

จากนั้น เริ่มทดสอบโดยการกดปุ่ม Get เพื่อดึงข้อมูลประเทศ จะเห็นว่า IE Developer Tools จะทำงานโดยจับ Request ที่ส่งไป ในรูปจะเห็นว่ามีการเกิด Request /Home/GetCountry ซึ่งมาจาก Controller Home > Action GetCountry

เราสามารถดูรายละเอียดข้อมูลได้โดยคบิ๊กเข้าไปที่ข้อมูลแถวนั้น หรือกดที่ "Go to detailed view" ก็ได้ ก็จะสามารถดูรายละเอียดข้อมูลได้