แนะนำเครื่องมือออกแบบ จัดแต่ง รูปภาพ สำหรับทำเว็บไซต์ที่ชื่อว่า Photoshop

แนะนำเครื่องมือออกแบบ จัดแต่ง รูปภาพ สำหรับทำเว็บไซต์ที่ชื่อว่า Photoshop

โปรแกรม Photoshop เป็นโปรแกรมแต่งรูปภาพที่หลาย ๆ คนรู้จักกันดี นั่นก็เพราะโปรแกรม Photoshop เป็นโปรแกรมแต่งภาพที่ได้รับความนิยมมากในขณะนี้ งานหลาย ๆ อย่างใช้ Photoshop ในการสร้าง เพราะโปรแกรมมีคุณสมบัติหลาย ๆ อย่าง


โปรแกรม Photoshop เป็นโปรแกรมสร้างและแก้ไขรูปภาพอย่างมืออาชีพ

โปรแกรม Photoshop เป็นโปรแกรมที่มีเครื่องมือมากมายเพื่อสนับสนุนการสร้างงานประเภทสิ่งพิมพ์ งานวิดีทัศน์ งานนำเสนอ งานมัลติมีเดีย ตลอดจนงานออกแบบและพัฒนาเว็บไซต์

โปรแกรม Photoshop มีประสิทธิภาพและยืดหยุ่นสูง

โปรแกรม Photoshop ปรับแต่งตามต้องการได้อย่างเป็นอิสระ


ดูรายละเอียดอื่น ๆ ได้ที่ http://www.adobe.com/products/photoshop.html

yengo หรือ buzzcity

รู้จักกับเครื่องมือทำเว็บไซต์ที่ชื่อว่า Dreamweaver กันครับ

รู้จักกับเครื่องมือทำเว็บไซต์ที่ชื่อว่า Dreamweaver กันครับ

มาทำความรู้จักกับ Dreamweaver กันครับ ว่ามันคืออะไร

อะโดบี ดรีมวีฟเวอร์ (Adobe Dreamweaver) หรือชื่อเดิมคือ แมโครมีเดีย ดรีมวีฟเวอร์ (Macromedia Dreamweaver) เป็นโปรแกรมสำหรับไว้สร้างและออกแบบเว็บไซต์ พัฒนาโดยบริษัทแมโครมีเดีย (ปัจจุบันควบกิจการรวมกับบริษัท อะโดบีซิสเต็มส์) สำหรับการออกแบบเว็บไซต์ในรูปแบบ WYSIWYG

ประวัติ ของโปรแกรม

In October 1996, Macromedia decided to create a new web page editing tool. Kevin Lynch led the effort, spending several months assembling a small team and talking with web designers about the challenges they faced building web sites with the current set of tools. Based on this customer insight, Kevin wrote a document called the "19 Dreams," a collection of stories about what an ideal web editing tool would do. These dreams served as the vision for the tool, and the project was subsequently codenamed "Dreamweaver

yengo หรือ buzzcity

รู้จักกับ Bootstrap ว่ามันคืออะไร

รู้จักกับ Bootstrap ว่ามันคืออะไร

บทความนี้เรามาแนะนำ Bootstrap กันครับ ซึ่ง Bootstrap ก็คือ framework ที่ช่วยทำให้เว็บของเราสวยงามยิ่งขึ้น



มาทำความรู้จักกับ Bootstrap กันแบบคร่าว ๆ กันครับ ตามด้านล่าง

Designed for everyone, everywhere.

Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.

จากข้อความด้านบน จะได้ว่า Bootstrap ถูกออกแบบมาสำหรับเว็บไซต์ทุก ๆ ประเภท ทุก ๆ ที่ก็คือสามารถแสดงผลได้ทุก ๆ ที่ไม่ว่าจะเป็น Desktop, tablet, mobile หรืออื่น ๆ 

Bootstrap มีลักษณะเป็น font-end web development สามารถทำให้เราสร้างเว็บไซต์ได้เร็ว และง่าย

ดูรายละเอียดอื่น ๆ ได้ที่ http://getbootstrap.com/

yengo หรือ buzzcity

Sidr jQuery plugin สำหรับสร้างเมนูด้านข้าง

Sidr jQuery plugin สำหรับสร้างเมนูด้านข้าง

บทความนี้เราขอแนะนำ jQuery plugin ที่ชื่อว่า sidr ซึ่งมีไว้สำหรับทำเมนูด้านข้าง ด้านล่าง หรือด้านบนก็ได้



รายละเอียด

You will be able to create multiple sidrs on both sides of your web to make responsives menus (or not, it works perfectly on desktop too).

Fill the sidrs normally, with existent content, remote content,... or what you want.

yengo หรือ buzzcity

มาดู Bootbox.js Jquery Plugins เอาไว้ alert, confirm and flexible dialogs for Twitter's Bootstrap framework

มาดู Bootbox.js Jquery Plugins เอาไว้ alert, confirm and flexible dialogs for Twitter's Bootstrap framework

มาดู Jquery Plugins ที่ชื่อว่า Bootbox กันครับ ซึ่งเอาไว้สำหรับ การ alert confirm dialog ที่สามารถเชื่อมกับ Bootstrap 

สามารถดูและรันตัวอย่างกันได้ที่เว็บ

yengo หรือ buzzcity

เครื่องมือสร้าง sitemap ออนไลน์ฟรี

เครื่องมือสร้าง sitemap ออนไลน์ฟรี

บทความนี้เรามารู้จักกับเว็บไซต์ที่ให้บริการสร้าง sitemap ออนไลน์ฟรีกันครับ ซึ่งเว็บที่เราจะแนะนำก็คือเว็บ


ซึ่งเว็บนี้ให้บริการสร้าง sitemap กันฟรี ๆ ครับซึ่งวิธีทำ เค้าก็ได้อธิบายไว้ในเว็บไซต์ ตามนี้ครับ

Enter your full website URL and some optional parameters in the form below.
Press 'Start' button and wait until the site is completely crawled.
You will be redirected to the generated sitemap details page, including number of pages, broken links list, XML file content and link to a sitemap file. Download the sitemap file using that link and put it into the domain root folder of your site.
Go to your Google Webmaster account and add your sitemap URL.

 แต่การจะใช้ฟรีนั้นก็มีข้อจำกัดครับ ซึ่งในเว็บก็ได้บอกไว้ Maximum 500 pages will be indexed in sitemap ก็คือสามารถทำ sitemap ได้สูงสุด 500 page ครับ

yengo หรือ buzzcity

สร้างเมนูด้วยโปรแกรม Xara Menu Maker

สร้างเมนูด้วยโปรแกรม Xara Menu Maker




Xara Menu Maker

โปรแกรม Xara Menu Maker เป็นโปรแกรมหนึ่งที่ได้รับความนิยมในการนำมาทำเป็นเมนู เนื่องจากมีการใช้งานง่าย สามารถปรับแต่งได้หลายแบบ มี template สวย ๆ ให้เลือกใช้หลายแบบ สามารถทำเมนูเป็นแบบแนวนอน หรือแบบแนวตั้งได้

Xara Menu Maker

Xara Menu Maker is one of the fastest and easiest ways to creating bitchin' web-menus with no sweat at all. The software comes at the price of $24.99 and is developed by Xara Ltd. The 15 days trial period allows you to test the software, but with some restrictions (only one design page out of 41 is available).

yengo หรือ buzzcity

ทำรูปสไลด์ด้วย javascript-image-slider

ทำรูปสไลด์ด้วย javascript-image-slider

มาทำรูปสไลด์ด้วย Javascript image slider กันครับ

คุณสมบัติต่าง ๆ

    Pure Javascript ( non jQuery, non flash ) 
    Lightweight (16kb) 
    HTML captions 
    17 transition effects, customizable 
    Easy to tweak through Javascript option variable and CSS 
    Support linking images 
    Slider starts on DOM ready (DOMContentLoaded) instead of the delayed window.onload (new in v2013.11.22) 
    Can set starting slide (by any index number, or random/shuffle) (new in v2013.11.22)
    Supported by all major browsers
    IE 7.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Netscape 7.0+ 
    Create/update image slider dynamically 
    Price: Free (or $20 if advanced features are used, see below)

Easiest Way to Use the Image Slider (วิธีการใช้ Image Slider)


Download the demos, copy the demo's code and paste it into your page. When you see it is working, you can start customizing it to your own style by tweaking the HTML, CSS code, or changing the options in the JavaScript file(js-image-slider.js).

The source code in the download package includes: HTML (demo1-8.html), CSS (js-image-slider.css), and Javascript (js-image-slider.js).


วิธีการใช้ง่าย ๆ ก็คือ ก่อนอื่นต้อง Download ไฟล์ Demo ทางเว็บไซต์มาก่อน จากนั้นก็นำโค้ดไปวางในเพจ ลองทดสอบดู ถ้าใช้ได้แล้วก็ลอง ๆ ปรับ ๆ โค้ดดู ซึ่งโค้ดดูไม่ยาก ในไฟล์ Demo ที่โหลดไปก็จะมีไฟล์ HTML CSS แล้วก็ Javascript

ดูรายละเอียดและดาวน์โหลดได้ที่ http://www.menucool.com/javascript-image-slider

yengo หรือ buzzcity

Captcha คืออะไร

Captcha คืออะไร

เรามาทำความรู้จักกับ Captcha กันครับ ว่ามันคืออะไร

CAPTCHA (an acronym for "Completely Automated Public Turing test to tell Computers and Humans Apart")

จากคำพูดที่ว่า 

CAPTCHA: Telling Humans and Computers Apart Automatically


จะเห็นว่า Captcha นั้นเป็นส่วนที่จะทำให้รู้ว่าเป็นคนหรือ Computer

เป็นคนหรือ Computer คืออะไร ??? 
จากการท่องเว็บมามากมาย เราจะเห็นว่า เว็บหลาย ๆ เว็บมีช่องให้กรอกข้อความ แสดงความคิดเห็น ช่องใส่ข้อมูล หรืออื่น ๆ ซึ่งช่องนั้นมีไว้ให้คนเข้าเยี่ยมชมกรอก แต่ก็มีโปรแกรมที่มีคุณสมบัติกรอกข้อความตามเว็บต่าง ๆ อัติโนมัติ ซึ่งส่วนมากอาจจะเอาไว้ขายของ โฆษณา หรืออื่น ๆ ก็ตามแต่ ทำให้สะดวก รวดเร็ว ดังนั้น เจ้าของเว็บหลาย ๆ แห่ง ไม่ต้องการให้มีการโฆษณา หรือกรอกข้อความเรื่อย ๆ จึงใส่ Captcha ไว้ในเว็บ ซึ่งจะช่วยป้องกัน และยืนยันตัวว่าเราเป็นคนหรือ Computer นั่นเอง

เรามาดูตัวอย่างหน้าตาของ Captcha กันครับ ตามรูปด้านล่าง


หรือรูปแบบอื่น ๆ 



yengo หรือ buzzcity

รู้จักกับ CKEditor ซึ่งเป็น text editor ส่วนเสริมสำหรับเพิ่มในเว็บไซต์

CKEditor คืออะไร

CKEditor ก็คือ text editor ที่ใช้สำหรับเว็บ ซึ่ง CKEditor เป็น editor ที่มีลักษณะแบบ WYSIWYG(What You See Is What You Get) นั่นคือแท็กที่เราแก้ไข ก็ดูเหมือนกับการแสดงผลที่แท้จริง
CKEditor เป็น open source

เวลาเราทำเว็บไซต์ขึ้นมา บางครั้ง ก็ต้องมีการให้ User แสดงความคิดเห็น ตามโพสต่าง ๆ แต่การแสดงความคิดเห็นนั้น บางที User ก็ต้องการใส่รูปภาพ ใส่ลิ้งค์ ใส่ลักษณะตัวอักษร แต่จะให้ User มานั่งเขียนโค้ด HTML นั้น เป็นไปได้ยาก เพราะ User บางคนไม่รู้ภาษา HTML ดังนั้น CKEditor ช่วยคุณได้

CKEditor ถูกออกแบบมาให้มีลักษณะคล้าย ๆ กับ Microsoft World ซึ่งคนส่วนมากคุ้นเคยกันดี ดังนั้น CKEditor จึงเป็นทางเลือกที่ดีสำหรับคุณ ลองใช้กันดูครับ

What is CKEditor?

CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It's a WYSIWYG editor that brings common word processor features directly to your web pages. Enhance your website experience with our community maintained editor.

ดู Demo ได้ที่ http://ckeditor.com/demo
ดูรายละเอียดอื่น ๆ ที่ http://ckeditor.com/

yengo หรือ buzzcity

รู้จักกับ GWT


รู้จักกับ GWT

GWT ย่อมาจาก Google Web Toolkit
GWT เป็น open source
GWT เป็นเครื่องมือ ที่นักพัฒนาเขียนโดย java และจะมี compiles แปลงไปเป็น javascript

Google Web Toolkit 

Google Web Toolkit คือ เฟรมเวิร์ค (Framework) ที่ช่วยให้การสร้าง RIAs สามารถทำได้ง่ายขึ้น สำหรับนักพัฒนาด้วยภาษาจาวา GWT มันเป็นการเขียน AJAX ด้วยภาษา Java แล้วตัว GWT SDK จะ compile ไปเป็น html, javascript ให้เอง

Components

GWT Java-to-JavaScript Compiler
GWT Development Mode
JRE emulation library
GWT Web UI class library

GWT

GWT (pronounced 'gwit') is the official open source project for GWT releases 2.5 and onwards. This site houses links to the documentation, source code repository, issues list and information related to GWT roadmap and release. It is intended for developers interested in contributing to GWT, and for keeping people informed on new and upcoming changes to GWT, GWT related events and other news.

ดูเพิ่มเติมได้ที่ http://www.gwtproject.org/

yengo หรือ buzzcity