Raiindear's Blog

Why CSS is better than HTML

raiindear — Thu, 17 Sep 2009 09:23:17 +0000

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

ข้อดีของ CSS ที่โดดเด่นเป็นอย่างแรกเลยคือ มีคุณสมบัติเพียบพร้อมมากกว่า html ซึ่งการเขียน CSS นั้น จะมีผลกับทั้งเอกสาร คือ กำหนดไว้แค่ที่เดียว แต่ใช้ได้ทั้งหมด ซึ่งทำให้เวลาแก้ไข สามารถ แก้ไขได้ง่ายไม่เหมือนกับ html ที่จะต้องมาตามนั่งแก้ tag ใหม่ทั้งหมดทั่วเอกสาร CSS ยังสามารถกำหนดแยกไฟล์ไว้ต่างหากจาก htmlได้อีกด้วย โดยที่ ถ้ามีไฟล์html สัก 10ไฟล์ ก็สามารถกำหนด CSS 1 ไฟล์ เพื่อใช้กับ html อีก 10 ไฟล์ได้หมด จะได้เป็น format เดียวกันและแก้ไขได้ง่าย ไม่ต้องนั่งแก้ tag ใหม่ทั้ง10 ไฟล์ แก้ที่ CSS อันเดียวก็เปลี่ยนได้หมดทุกไฟล์

ในที่นี้ เดี๋ยวเราจะยกตัวอย่าง การเขียนโค้ดสร้างเว็บไซต์ ทั้งในแบบเก่า และแบบใหม่ ให้ดู เพื่อให้เข้าใจมากขึ้น

การเขียนเว็บไซต์แบบเก่า ที่ไม่ได้ใช้ CSS

using HTML
Main Menu HTML CSS	การสร้าง layout แบบใช้table จ้า
Copyright © 2009 raiindear.wordpress.com

การเขียนเว็บไซต์แบบใหม่ ใช้CSS

CSSจ้า

การเขียน เว็บไซต์โดยใช้ CSS ง่ายกว่าเขียนโดยใช้ HTML ตั้งเยอะแหน่ะ

จะเห็นว่า การเขียนแบบ CSS จะกำหนด styleไว้แล้ว และไม่ต้องกำหนดใหม่ใน tag HTMLอีก ซึ่ง style ที่กำหนดใน CSS นั้น จะสามารถใช้ได้ครอบคลุมทั้งเอกสาร ต่างกับแบบเก่าที่จะต้องมากำหนดstyle ใหม่ทุกครั้ง

อันนี้เป็นแค่โค้ดตัวอย่างส่วนน้อยนิดนะคะ เพียงแค่ยกตัวอย่างให้เห็นความแตกต่างของการใช้ และไม่ใช่ CSS เท่านั้น

ลองศึกษาและเขียนดูนะคะ ง่ายกว่า HTML เยอะเลย เป็นกำลังใจให้ค่ะ สู้ๆ ^^

การเขียนเว็บไซต์แบบเก่า ไม่ได้ใช้ CSS

SEO ( search engine optimization )

raiindear — Sun, 13 Sep 2009 16:08:48 +0000

SEO ( search engine optimization ) คือ การเพิ่มประสิทธิภาพการค้าหา เป็นการจัดทำ ปรับปรุง หรือปรับแต่งหน้าเว็บไซต์เพื่อให้ติดอันดับต้น ๆ ในหน้าผลการค้นหาของเสิร์ชเอนจิน ซึ่งผ่านทางเป้าหมายของคำค้นหาที่ต้องการ ซึ่งเป็นส่วนหนึ่งของการทำการตลาดผ่านระบบค้นหา หรือ SEM ( search Engine Marketing )

เอสอีโอเป็นการเลือกทางเลือกที่ดีที่สุดในเสิร์จเอนจิน คือ การปรับปรุงเว็บไซต์ด้วยเทคนิคต่าง ๆ เพื่อให้ติดอันดับต้น ๆ ของเว็บเสิร์ชเอนจิน ด้วยคำสำคัญโดยเน้นให้ผลของคำค้นปรากฏอยู่ในส่วนของ Natural Search Result (Organic Search Result) หรือในส่วนของผลลัพธ์ทางด้านซ้ายมือของเว็บเสิร์ชเอนจิน เวลาที่คนเข้ามาค้นหาในเว็บเสิร์ชเอนจิน เช่นที่ Google (กูเกิล) Yahoo (ยาฮู) MSN (เอ็มเอสเอ็น) Bing (บิง) ด้วยคำสำคัญที่ต้องการค้นหาแล้ว จะปรากฏลิงก์ของเว็บไซต์ของเราเพื่อทำให้ติดอันดับต้น ๆ ในหน้าผลการค้นหา ซึ่งการทำ SEO นั้นจะประกอบไปด้วย การปรับปรุง-เพิ่มคำสำคัญ (คีย์เวิร์ด) ในหน้าเว็บไซต์ การปรับแต่งหน้าเว็บไซต์ให้มีขนาดเล็ก การใช้ meta tag และวิธีอื่น ๆ ควบคู่กันไป

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

จะเห็นได้ว่า SEO มีผลต่อธุรกิจในปัจจุบันเป็นอย่างมาก ลองคิดดูถ้าเราไม่ SEO หลายๆสิ่งคงไม่เป็นอย่างทุกวันนี้เเน่นอน

What is “API”

raiindear — Sat, 05 Sep 2009 14:38:32 +0000

API ย่อมาจาก Application Programming Interface มันคล้ายๆ กับ library (function/module/utility) ซึ่งเป็นส่วนที่ช่วยให้นักพัฒนา Application พัฒนางานของตนได้ง่ายขึ้น ไม่ต้องเขียนโค้ดใหม่ ให้ยุ่งยาก ซับซ้อน เช่น เราต้องการจะสร้าง application นึงขึ้นมา เราสามารถ นำ API มาใช้ ร่วมกับ Application ของเราเพื่อให้สะดวกและง่ายขึ้น เพราะ เพียงแค่รู้ว่า API นั้นๆ ใช้อย่างไร และ ทำงานอย่างไร เท่านั้น แค่นำมาใช้และให้มันทำงานร่วมกับ Application ของเราให้ได้ ก็เป็นพอ

ตัวอย่าง Website ที่ใช้ API เช่นพวก Social Network ทั้งหลายทั้งปวง

Amazon.com , eBay, Facebook (เป็น Social network ด้วย),Google Maps, Hi5 ..และ เว็บ อื่นๆ อีกมากมาย

ภาษา XML (Extensible Markup Language ) คืออะไร ?

raiindear — Sat, 29 Aug 2009 15:35:20 +0000

XML เป็นภาษาที่สำคัญมากๆในการทำ application ขึ้นมาอย่างนึงเราไปดูความเป็นมาเเละประโยชน์ของมันเลยดีกว่า

ใน ปัจจุบันคงไม่มีใครปฏิเสธได้ว่า การพัฒนาเว็บแอพพลิแคชันแบบ web base application ได้รับความนิยมอย่างยิ่ง โดยที่ภาษาที่เกียวกับการพัฒนาเว็บได้ถูกนำเสนอออกมามากมาย ได้แก่ ASP, Java, PHP หรือ CGI เป็นต้น ซึ่งแต่ละภาษาล้วนต่างมีข้อดีข้อเสียต่างกันไป โดยมุ่งรองรับความก้าวหน้าของ internet และ XML ก็เป็นอีกภาษาหนึ่งที่เกิดขึ้นมา เพื่อรองรับความก้าวหน้าของทางด้านเทคโนโลยีในปัจจุบันโดยที่ XML จะเป็นสือการในการสือสารของทุก แพลต์ฟอร์ม เพื่อให้ทุกภาษาสามารถ ติดต่อสือสารกันได้โดยไม่จำกัด เช่น ถ้าเราต้องการแลกเปลียนข้อมูลต่างภาษากันนั้น ถ้ามาจากเทคโนโลยีสายเดียวกัน ก็คงไม่มีปัญหาแต่อย่างได แต่ถ้ามาจากเทคโนโลยีที่แตกต่างกันแล้ว อาจจะไม่สามารถทำได้ ดังนั้น ภาษา XML จึงถูกออกแบบมาเพื่อรองรับการแลกเปลียนข้อมูลท่ามกลางมาตรฐานที่แตกต่างของ ภาษาต่างๆในปัจจุบัน

Webcream convert swing and awt to html

raiindear — Sun, 23 Aug 2009 16:08:42 +0000

วันนี้หนูเขียนเรื่อง GUI ของ Java ซึ่งปัจจุบันเป็นสิ่งที่จำเป็นมากๆ หลายๆคนคงเคยสงสัยว่า Java swing ที่เราเขียนเป็น desktop application เนี่ยสามารถขึ้นไปอยู่บนหน้าเวปได้รึป่าววันนี้มคำตอบเเล้วจ้า

WebCream คือเป็นตัวแปลง Java Swing หรือ AWT application ของเราให้เป็นภาษา HTML โดยใช้เทคนิคของ Ajax เข้ามาช่วยทำให้ดูแล้วเหมือน Client application ที่เราเขียนถูกรันอยู่บน browser โดยที่ไม่คิดว่ามันคือ web application เลย ซึ่งเจ้า WebCream จะแปลง GUI ทุกตัวที่สร้างโดยใช้ Java Swing หรือ AWT ให้เป็นภาษา HTML ทั้งหมด และ business logic ทั้งหมดที่เราเขียนไว้ก็ จะถูกแปลงให้สามารถทำงานอยู่บนเว็บได้ด้วยเช่นกัน ซึ่งคุณสมบัติเด่นๆของ WebCream มีดังนี้ครับ

เราไม่ต้องมีความรู้ HTML/CSS/DHTML/JavaScript ก็สามารถใช้ WebCream ได้
สนับสนุน HTML4.0, Cascading Style Sheets 2, DHTML, JavaScript1.2
ทำงานร่วมกันได้กับหลาย browser
ไม่ต้องติดตั้ง Java Plugin หรือ Java WebStart และเครื่อง client ที่จะรันก็ไม่ต้องรองรับ Java ด้วย
แสดงผล Java, Swing, Applet ในรูปแบบภาษา HTML
ยอมให้มีการปรับปรุงแต่งเติมเมื่อเราแปลงเป็น HTML แล้ว เช่น สี, ตัวอักษร
การใช้งานทรัพยากร thread และ memory ถูกปรับปรุงให้ดีขึ้น
มีการรองรับ JDK1.2, 1.3 และ 1.4
มีการรองรับ dynamic events และ listeners เช่น ActionListener, ItemListener
สามารถทำ Dynamic cluster ให้ JVM เพื่อประสิทธิภาพที่ดีขึ้น

AJAX

raiindear — Sun, 16 Aug 2009 15:30:26 +0000

Ajax (Asynchronous JavaScript and XML)

ความสามารถของ Ajax ที่น่าทึ่ง
-สามารถทำอะไรที่ html กับ server ทำไม่ได้
- ทำให้ html สดชื่นมีชีวิตเหมือนกับ window Application
- ช่วยให้programmer ทำงานง่ายขึ้น เพราะช่วยลดข้อจำกัด ในการแสดงผลข้อมูล (ดังข้อหนึ่ง)
- ช่วยให้การแสดงผลแบบ real time เป็นไปได้งดงามมากขึ้น

หลักการทำงานของมัน
Ajax จะมี Ajax Engine ซึ่งมันจะเข้าคั่นตรงกลางระหว่าง server กับ htmlทำให้ การแสดงผลเป็นไปได้ดีขึ้น เช่น ต้องการให้บางส่วนใน หน้านั้นๆ อัพเดตทุกๆ 5 นาที ก็จัดการให้ ajax เข้าไปทำงานตรงนั้น คือ เจ้ากี้เจ้าการให้แค่ตรงส่วนนั้น คอย อัพเดตข้อมูลใหม่ๆ ทุก ๆ 5 นาที โดยที่ไม่ต้องกด refresh ทุกๆครั้ง (ไม่ต้องอัพเดตทั้ง เพจ นั่นเอง…)

นับว่า เทคโนโลยี Ajax เป็นสุดยอดอันนึงเลยทีเดียว ลองใช้กันดูนะคะ ^_________________^

How to be a good Project Manager^@^

raiindear — Sun, 09 Aug 2009 16:03:00 +0000

Is project management an art or a science? How do I deal with problem employees? How can I improve employee morale and boost productivity? What skills can I develop that will ensure that my projects will run smoothly and to a successful finish. A lot of question that want the answer!!!!!!!

Now … I have answer for you ^^ just read it until the end….

Being a Project Manager, I have found, calls upon 5 different sets of skills:

1. Organizational skills

2. Communication skills

3. Problem-solving skills

4. Leadership skills

5. Team-building skills

Organizational skills

Do you consider yourself an organized person who can generate and keep track of multiple documents? If so, you already have one of the most important skills needed as a Project Manager. On the job, I was called upon to keep track of requirements and design documents, contracts, schedules, personnel records, project reports, communication (email) records, hiring history, meetings and status reports. Luckily for me, I have always been a meticulous record-keeper (since I don’t trust my memory ), and this saved me from being overwhelmed.

Communication skills

This does not refer to just giving presentations, but to various forms of written and oral communication. A Project Manager is expected to produce high-quality project planning and design documents, and send out meeting agendas, updates, status reports and courteous and effective email. A good manager, I observed from my peers, is able to get his/her ideas across clearly and in a non-confrontational manner, without seeming to impose views on subordinates. This is a skill I am still learning. Good negotiation skills also fall into this category.

Problem-solving skills

A good manager has the knack of seeing the big picture for any problem, while others may miss the forest for the trees. I was frequently called upon to analyze a problem, research and compile a list of alternative solutions, determine the best course of action and get it implemented by my team. The trick is to never lose sight of the big picture – the overall problem we are trying to solve.

Leadership skills

This one is not easy. It is tricky to get your team to go with your idea without making them feel that the idea is being thrust on them. The team looks to the Project Manager to provide direction and vision. To be able to do that, I had to work constantly towards enhancing my knowledge – breadth of knowledge is very important, but depth is important too – superficial knowledge fools noone. A manager must earn the respect of his/her team, and the best way to do that is to lead by example.

Team-building skills

This is an often-neglected area, forgotten in all the excitement of project deadlines. But the effort spent motivating a team to perform to the best of its ability is worth its weight in gold. Four easy points to remember are: reward achievements, provide feedback, recognize strengths and provide challenges.

Instead of talking in generalities, let us follow the lifecycle of a project step by step, and see how these skills come into play. A Project Manager is involved in all of the following 5 phases of a project.

That‘s why WE HAVE TO LEARN IT… We will be the good project manager ja… yah (^^)

JavaScript คืออะไร ?

raiindear — Sun, 02 Aug 2009 15:49:59 +0000

JavaScript นั้นไม่ใช่ Java ไม่ใช่ HTML เเต่ JavaScript เป็นภาษาสคริปต์เชิงวัตถุ หรือเรียกว่า อ็อบเจ็กโอเรียลเต็ด (Object Oriented Programming) ที่มีเป้าหมายในการ ออกแบบและพัฒนาโปรแกรมในระบบอินเทอร์เน็ต สำหรับผู้เขียนด้วยภาษา HTML สามารถทำงานข้ามแพลตฟอร์มได้ โดยทำงานร่วมกับ ภาษา HTML และภาษา Java ได้ทั้งทางฝั่งไคลเอนต์ (Client) และ ทางฝั่งเซิร์ฟเวอร์ (Server)

กุญแจสำคัญของ JavaScript

ถ้าเป็นไปได้ไม่ควรใช้ JavaScript เพราะเป็นการทำงานทางฝั่ง Client ควรเลือกใช้ Script ที่ทำงานทางฝั่ง Server จะดีกว่า
จัดเตรียมข้อมูลที่มีความหมายเหมือนกับ การใช้ JavaScript ไว้ในส่วนของ
อย่าเขียน JavaScript ที่รับ Input จาก Mouse ได้เพียงอย่างเดียว ควรเพิ่มฟังก์ชันการรับ Input จาก Keyboard ด้วย
อย่าเขียน JavaScript ให้มีการ Redirect
หากมีการสร้าง Link ด้วย JavaScript ให้เพิ่มชื่อ URL จริงของ link ที่สร้างด้วย ตัวอย่าง
หลีกเลี่ยงการสร้าง Popup Windows
จ้งเตือนผู้ใช้ล่วงหน้าก่อนจะเปิด Windows ใหม่
ห้ระวังการเปลี่ยนตำแหน่งโฟกัสของ Object ต่างๆ

สำหรับตัวเเปรใน javascript นั้น ตัวแปรก็คือ ชื่อที่เรากำหนดขึ้นมาสำหรับเก็บค่า อย่างเช่น เราอาจกำหนดตัวแปรชื่อว่า imageName เพื่อไปเก็บชื่อไฟล์ภาพๆหนึ่ง หรือ อาจกำหนดให้ amount ไปเก็บจำนวนเต็ม เป็นต้น การตั้งชื่อตัวแปร ชื่อของตัวแปรใน JavaScript สามารถขึ้นต้นด้วยตัวอักษรใหญ่ A-Z ตัวอักษรเล็ก (a-z) และ เครื่องหมาย _ ตามด้วย ตัวอักษร ตัวเลข หรือ เครื่องหมาย _ ก็ได้ ตัวอย่างชื่อตัวแปรที่ถูกต้อง ข้อควรจำ ชื่อตัวแปรใน JavaScript จะเข้มงวดในการใช้ตัวอักษรใหญ่หรือเล็กด้วย(case sensitive) เช่น Sum SUM sum จะถือว่าไม่เป็นตัวแปรเดียวกันนะ ชนิดของตัวแแปร สิ่งที่ต่างจาก Java และ ภาษาบางภาษาคือ ผู้ใช้ภาษา JavaScript ไม่จำเป็นต้องกำหนดชนิดของตัวแปร ชึ่ง JavaScript จะสามารถรู้ได้เองว่า ในการนำตัวแปรไปใช้นั้น คุณต้องการให้มันเป็นตัวแปรชนิดไหน เช่นถ้าผมกำหนด ให้ตัวแปร Ahha มีค่าเป็น 1 ตัวแปร Ahha อาจจะให้ค่าเป็น True ได้ ถ้าคุณใช้มันไปในทางตรรก หรืออาจจะเป็น 1.00 ก็ได้ คุณสามารถใช้ตัวแปรได้อย่างอิสระ เพราะไม่มีข้อจำกัดในด้านชนิดตัวแปร และในอีกแง่หนึง คุณต้องจำได้ว่า ตัวแปรของคุณจะเป็นชนิดไหนในแต่ละขั้นตอนของการคำนวน JavaScript สนับสนุนการใช้ตัวแปรเก็บค่าข้อมูล 4 ชนิดคือ Integer,Float ,Boolean ,and String<br />

Microsoft® Office 2010

raiindear — Thu, 16 Jul 2009 15:45:54 +0000

Microsoft® Office 2010 have more powerful and can give you the best work whether you are at work, home, school, on web browser, and on Smartphone. This version of the office gives you using enhanced tools, customizable templates, and photo editing capabilities. User can work with multiple people from different locations at the same time, can using new co-authoring capabilities. Let’s go to see the new feature in each application in Microsoft® Office 2010.

Microsoft® Word 2010
Microsoft® Excel® 2010
Microsoft® PowerPoint® 2010
Microsoft Outlook 2010
Microsoft® OneNote® 2010
Microsoft® Publisher 2010
Microsoft® Access® 2010
Microsoft® SharePoint Workspace 2010 (new name of Groove 2007)
Microsoft® InfoPath® 2010 I will give you the example of basic program.)

Today, I will show only standard program that is Word, Excel, and PowerPoint.

Microsoft Word 2010

It gives you the best of all word that is new features of it. For example, to create professional-quality documents, it can create and organize documents in less time. Work with multiple people because the file will store online. In addition, you can access to your file anywhere because it can store your document online and can access or edit from anywhere on web browser.

Microsoft Excel 2010

This version of excel makes it possible to analyze, manage, and share information in more ways than ever before. New data analysis and visualization tools help you track and highlight the important data. Work more easily with multiple people by editing Excel files on the web and work with important data on the Office Excel Mobile or Office Excel Web Application. That helps you accomplish your goals proficiency and flexibility.

Microsoft PowerPoint 2010

This power point delivers more new and exciting ways to create and share dynamic presentations. It improves audio and visual capabilities to help you tell a crisp, cinematic story as a powerful to watch. New tools are easy to use. Moreover, this version of PowerPoint can access in anywhere from your Smartphone or the web allow you simultaneously.

Search Engine

raiindear — Sun, 12 Jul 2009 12:46:41 +0000

เราลองมานึกดูว่า เว็บไซต์ต่างๆ ทั่วโลกมีมากมายเพียงใด หนึ่งล้านเว็บ พันล้านเว็บ หรือล้านล้านเว็บ คงเป็นการยากนะค่ะที่จะทราบได้ว่ามีเว็บอะไรบ้าง จำนวนเท่าใด และยิ่งยากไปกว่านั้นคือจะค้นหาเว็บที่เราต้องการได้อย่างไร และนั่นคือที่มาของ Search Engine เครื่องมือดีๆ ที่ช่วยในการค้นหาข้อมูลทางอินเตอร์เน็ต Search Engine เป็นเครื่องมือหรือโปรแกรมในการค้นหาเว็บต่างๆ โดยมีการเก็บ รายชื่อเว็บไซต์ และข้อมูลที่เกี่ยวข้องต่างๆ ของเว็บไซต์และนำมาจัดเก็บไว้ใน server เพื่อให้สามารถค้นหาและแสดงผลได้สะดวก และรวดเร็วมากยิ่งขึ้น ทั้งนี้ บาง search engine อาจไม่ได้มีการเก็บข้อมูลใน server ของตัวเอง แต่อาจอาศัยข้อมูลจากเจ้าของ server นั้นๆ ตัวอย่าง Search Engine ที่มีชื่อเสียงทั้งในประเทศไทยและต่างประเทศ เช่น sanook.com, siamguru.com, google.com, yahoo.com, msn.com, altavista.com, search.com เป็นต้น ประโยชน์ที่ได้รับจาก Search Engine

ค้นหาเว็บที่ต้องการได้สะดวก รวดเร็ว

สามารถค้นหาแบบเจาะลึกได้ ไม่ว่าจะเป็น รูปภาพ, ข่าว, MP3 และอื่นๆ อีกมากมาย

สามารถค้นหาจากเว็บไซต์เฉพาะทาง ที่มีการจัดทำไว้ เช่น download.com เว็บไซต์เกี่ยวกับข้อมูลและซอร์ฟแวร์ เป็นต้น

มีความหลากหลายในการค้นหาข้อมูล

รองรับการค้นหา ภาษาไทย