ข้อมูลองค์ความรู้โดย
อารยา คงกะแดะ
ตำแหน่ง เจ้าหน้าที่ประสานงาน

ความรู้เบื้องต้น Web Design

ประเภททางด้าน IT หลัก :   Development & Integration
ประเภททางด้าน IT ย่อย :   Web Design
  ลงข้อมูลเมื่อ 10:07:24 13/07/2010
  Page View (3084) แบ่งปัน

Web Design คือการออกแบบเว็บไซต์ ซึ่งสำคัญมากๆ ในหลายๆบริษัทที่ทำธุรกิจทางด้านนี้โดยตรง จะต้องมีพนักงานที่ทำหน้าที่ Web Design อย่างเดียวเท่านั้น บางทีก็รวมคนเขียน Code HTML ไปด้วยและคนทำ Graphic ไปด้วย แต่บางทีก็มองว่า Design อย่างเดียวเพียงแค่ร่างๆออกมาเท่านั้น เพราะการเขียน Code HTML นั้นไม่ใช่ปัญหา ในที่นี้เราจะรวมเอาทั้ง Design + Graphic ไปด้วย โดยเราจะบอกแนวให้เป็น Step สำหรับ Web Design 

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

[font color=blue]1. ออกแบบเว็บไซต์[/font] 
[dd]Step ของเราอาจจะงงๆสักหน่อย แต่รวมก็อยู่ในประมาณนี้ ขั้นแรกต้องเริ่มจากการออกแบบก่อน อาจจะออกแบบโดยการร่างใส่เศษกระดาษ หรือเปิด Tool อย่าง Frontpage มาเขียนเลยก็ได้เหมือนกัน ส่วนใหญ่หัวการออกแบบนี่สอนกันยากครับ บางคนก็เริ่มจากการเข้าเว็บไซต์จำนวนมาก ดูการออกแบบ ดูรูปแบบการจัดวาง และก็เกิดไอเดียขึ้นก็มี อันนี้ต้องเริ่มจากการออกแบบและให้เพื่อนๆดูกันก่อนก็ได้เหมือนกันว่าเป็นอย่างไร ต้องเป็นผู้ที่ยอมฟังคำวิจารย์ครับดีไหม ต้องปรับอะไรอย่างไร ก็จะเริ่มดีขึ้น ผมทำเว็บมาร่วม 3 ปีก็เห็นพัฒนาการของตนเองจากไม่ได้เรื่องจนใช้ได้สักหน่อย (ไม่รู้ใช้ได้หรือเปล่า ลองวิจารย์กันมาดู) 

[font color=blue]2. ฝึกกราฟฟิก[/font] 
[dd]เมื่อเราทำการออกแบบหน้าตาของเว็บเราเสร็จ ในการออกแบบนั้นก็จะมีกราฟฟิกที่อยู่ในเว็บเช่น Logo และอื่นๆ ก็มาสู่ขั้นตอนการทำกราฟฟิก สำหรับท่านที่ทำหน้าที่ออกแบบอย่างเดียวก็ต้องคุยกับคนทำกราฟฟิกว่าสิ่งที่ออกแบบนี้ทำได้ไหมอย่างไรต้องปรับอะไรบ้าง ซึ่งต้องค่อนข้างทำงานเป็นทีมและคุยกันตลอดว่าจะไปอย่างไร ส่วนท่านที่ทำเองก็ต้องศึกษาครับ หลายคนฝึกมานานสะสม 


Tool ที่ใช้สำหรับกราฟฟิก[/b] 
Adobe Photoshop ,Macromedia Firework : สำหรับ Photoshop Version นั้นก็แล้วแต่ครับอาจจะ 5.0 ,5.5 หรือตอนนี้ก็ 6.0 ใช้สำหรับตกแต่งรูปภาพ เช่น ทำภาพบร่อ ,ภาพซ้อน ฯลฯ โดยทั่วไปจะเกี่ยวกับการตกแต่งภาพที่มีอยู่แล้ว 
[li]Adobe illustrator : ก็มี Version 8 ,9 ซึ่งใช้สำหรับวาดภาพ หรือบางคนก็อาจจะใช้ Macromedia Flash วาด 
Macromedia Flash : สำหรับทำ Movie เป็นกราฟฟิกที่กำลังดังในตอนนี้เพราะสามารถทำภาพกราฟฟิกได้ไหลลื่นมาก มีเครื่องมือในการช่วยให้ภาพสวยงามและเทคนิคหลายอย่าง และที่สำคัญขนาดของ File ไม่ใหญ่ถ้าเทียบกับภาพที่เป็น Gif Animation 

และมีอีกมากมายที่ไม่ได้พูดถึง เช่น Plug-in ของ Photoshop อย่าง EyeCandy ทีรู้จักกันดี ส่วนใหญ่ก็แล้วแต่ละคนว่าถนัดแบบไหน โดยส่วนตัวผมไม่ค่อยถนัดอะไรเลยรู้นิดๆหน่อยๆสำหรับแต่ละอย่างนะ แต่ก็ไม่ได้รู้น้อยจนหน้าเกียจ หรือมากจน Profressional 

[font color=blue]3. สร้าง Code HTML[/font] 
[dd]ขั้นตอนนี้ก็สำคัญ Code HTML จะใช้รีนบน Browser โดยเป็นนามสกุลเช่น .html .htm .shtml โดยก็คล้ายๆกันในหลายๆอย่าง จะแตกต่างตรงที่ .shtml ทำให้สามารถใช้ Server Side Include (SSI) ได้ 

[font color=blue]Server Side Include (SSI)[/font] 
เป็นคุณสมบัติที่ผมมองว่ามหัศจรรย์ และดีมาก เช่น เมนูด้านข้างของเว็บท่านจะเหมือนกันในทุกๆหน้า แทนที่ท่านจะเขียน Code สำหรับเมนูนั้นในทุกๆหน้า ก็ทำการ Copy ในส่วน Code ตรงนั้นไว้ใน file เช่น menu.inc และทำการแทรกคำสั่ง  เป็นต้นก็จะดึง Code ที่อยู่ใน File menu.inc มาให้และถ้าทำอย่างนี้เวลาท่านแก้ไขอะไรก็แก้เพียงแค่ file menu.inc เท่านั้น อีกนิดไม่จำเป็นต้องเป็น .inc ก็ได้นะครับจะ dot อะไรก็ได้แล้วแต่ 
อีกอันสำหรับ SSI ที่น่าสนใจคือการแอบสั่งให้ CGI ทำงานโดยการใช้คำสั่งดังต่อไปนี้  ก็จะทำให้ส่วนของ Code ที่นำคำสั่งดังกล่าวไปใส่จะแสดงผลในส่วนของ CGI คงไม่งง


[font color=blue]Tool ที่ใช้สำหรับการเขียน Code HTML[/font] 
Microsoft Frontpage 98/2000 : การทำงานจะง่ายมากเหมือนเพียงคุณต้องการให้มีอะไรบนเว็บก็พิมพ์ลงไป มีส่วนของเครื่องมือให้คุณสามารถสร้าง Code HTML ต่างๆโดยไม่ต้องมาเขียน Code เอง 
Macromedia Dreamweaver : อันนี้จะง่ายเหมือนกัน แล้วแต่ชอบอันนี้จะคล้าย Word คือมีหน้ากระดาษเปล่าๆให้คุณ แต่นั้นคือหน้าเว็บและอยากใส่อะไรก็ใส่กัน แต่จะมีคุณสมบัติในการสร้าง Java Script และเทคนิคมากมายในนี้ 

โดยทั่วไป 2 Tool ที่ยกให้นั้นจะเหมือนๆกันในหลายๆด้าน ก็อย่างเคยก็แล้วแต่ถนัด ถนัดแบบไหนก็ใช้แบบนั้น โดยส่วนใหญ่ Macromedia Dreamweaver จะอิงไปทาง Netscape มากกว่า IE แต่ Microsoft Frontpage คงเดาง่ายว่าจะอิงไปทางไหน ปกติโดยส่วนตัวผมเขียนให้สำหรับคนใช้ IE นะแต่ผมมักเขียนเองมากกกว่าไม่ค่อยได้ใช้ Tool นอกจากจำเป็นเช่น สร้าง Java Script หรือบางอย่างที่ขี้เกียจทำ 

ที่มา : http://www.twebmaster.com



องค์ความรู้ที่มีผู้อ่านมากสุด
เครือข่ายบริเวณกว้าง (Wide Area Network)
ตรงกันข้ามกับ LAN เครือข่ายบริเวณกว้างหรือ WAN เป็นเครือข่ายที่ครอบคลุมพื้นที่บริเวณกว้าง หรืออาจจะครอบคลุมทั่วโลกก็ได้ ตัวอย่างเช่น เครือข่ายอินเตอร์เน็ตที่เรารู้จักกันดี WAN จะใช้การเชื่อมต่อระหว่าง LAN ที่อยู่ห่างไกลกัน เช่น การเชื่อมต่อเครือข่ายของสำนักงานย่อยที่อยู่ห่างไกลกัน ซึ่ง LAN เป็นเทคโนโลยีสำหรับการเชื่อมต่อเครือข่ายภายในองคาร หรือพื้นที่ที่มีรัศมีประมาณ 2-3 กิโลเมตร ส่วน WAN

โดย... อารยา คงกะแดะ

ความแตกต่างระหว่างระบบ LAN และ WAN
Local Aria Network ซึ่งแปลได้ว่า ระบบเครือข่ายขนาดเล็ก ที่ต้องประกอบด้วย Server และ Client โดยจะต้องมีคอมพิวเตอร์ตั้งแต่ 2 เครื่องขึ้นไป

โดย... อารยา คงกะแดะ

The Digital Car ต้นแบบเสมือนแห่งอนาคต
ปัจจุบันมีการนำความรู้ทางคอมพิวเตอร์ มาจำลองแบบและการสร้างต้นแบบเสมือน ในการพัฒนาต้นแบบรถยนต์

โดย... อารยา คงกะแดะ

Network-Attached Storage(NAS) ในระบบเน็ตเวิร์กภายในองค์กร
ในปัจจุบันนอกจากไฟล์เอกสารที่มีแต่ข้อความแล้วยังมีไฟล์รูปภาพกราฟิก หรือแม้แต่ข้อมูลวิดีโอซึ่งต้องการใช้เนื้อที่ในการเก็บข้อมูลในฮาร์ดดิสก์จำนวนมาก วิธีแก้ทางหนึ่งก็คือการใช้ Network-Attached Storage(NAS) ในระบบเน็ตเวิร์กภายในองค์กร

โดย... อารยา คงกะแดะ

Grid Computing : เทคโนโลยี IT ของโลกอนาคต
Internet เป็นเทคโนโลยีที่เริ่มต้นจากการที่นักวิทยาศาสตร์ที่กระจายอยู่ตามมหาวิทยาลัยและสถาบันวิจัยทั่วโลกมีความจำเป็นต้องการแลกเปลี่ยนข้อมูล ข้อคิดเห็นและติดตามผลงานใหม่ๆให้ทันสมัย ทำให้ World Wide Web ถูกประดิษฐ์ขึ้น (ด้วยคนๆเดียวที่ชื่อ Sir Timothy J. Berners-Lee) มาเพื่อสนองความต้องการดังกล่าว และต่อมา สิ่งนี้ก็ถูกพัฒนาต่อเนื่องไปเป็น Internet ที่ถูกนำไปประยุกต์ใช้กับงานหลายๆด้าน ทั้งทางการศึกษา การพาณิชย์ บันเทิง อุตสาหกรรมและงานราชการ จนกลายมาเป็นสิ่งที่อำนวยความสะดวกแก่ชีวิตประจำวันอย่างที่ไม่มีใครคาดคิดมาก่อน อันเป็นตัวอย่างของ Technology Transfer จากงานวิจัยด้านวิทยาศาสตร์บริสุทธิ์ไปสู่การพัฒนาคุณภาพชีวิตของมนุษย์ที่เด่นชัดที่สุดชิ้นหนึ่ง

โดย... อารยา คงกะแดะ

วิวัฒนาการของระบบ SAN
ข้อมูลที่เพิ่มขึ้นและคาดการณ์ว่าจะเพิ่มปริมาณขึ้นอย่างมากมายในอนาคตก่อให้เกิดความต้องการพื้นที่ในการจัดเก็บข้อมูลที่เพิ่มขึ้นตามมา ดังนั้นเพื่อให้การบริหารจัดการข้อมูลเป็นไปอย่างมีประสิทธิภาพ

โดย... อารยา คงกะแดะ

Black - White อมตะคลาสสิกแห่งดีไซน์
ขาว-ดำ จะกลายเป็นความงามอมตะนิรันดร์กาลทันที หากศิลปินผู้สร้างงานศิลปะเสกสรรค์สร้างมันได้ดี! โลกกลมๆใบนี้มีงานศิลปะมากมายที่ศิลปิน บรรจงสร้างไว้ประดับโลก!! ผู้ประกอบการเอสเอ็มอีจำนวนไม่น้อย ล้วนเริ่มก่อร่างสร้างตัวด้วยเงินทุนน้อยนิด ดังนั้นการโฆษณาประชาสัมพันธ์ที่ใช้เงิน มากๆ ย่อมเป็นสิ่งพึงหลีกเลี่ยง(หากหลีกเลี่ยงได้)

โดย... อารยา คงกะแดะ

การจำแนกประเภทของเครือข่าย
ครือข่ายสามารถจำแนกออกได้หลายประเภทแล้วแต่เกณฑ์ที่ใช้ คล้ายกับการ จำแนกประเภทของรถยนต์ ถ้าใช้ขนาดเป็นเกณฑ์ ก็จะแบ่งได้เป็นรถยนต์ขนาดเล็ก รถสิบล้อ รถไฟ

โดย... อารยา คงกะแดะ