Popular Post

Lecture

By : The Evilman


บทที่ 2

การพัฒนาเว็บไซต์
จัดระบบโครงสร้างข้อมูล(Information Architecture)
การจัดระบบโครงสร้างข้อมูลเป็นพื้นฐานในการออกแบบเว็บไซท์ที่ดี
ได้แก่ รูปแบบการนำเสนอ ระบบการทำงานแบบจำลอง ระบบเนวิเกชัน และอินเตอร์เฟสของเว็บดังนั้น
การจัดระบบโครงสร้างข้อมูลจึงเป็นสิ่งสำคัญที่เกี่ยวข้องอยู่ในกระบวนการออกแบบเว็บไซต์การจัดระบบโครงสร้างข้อมูล
คือการพิจารณาว่า เว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนด

เป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็นนำมาจัดกลุ่มให้เป็นระบบ

Phase 1 : สำรวจปัจจัยสำคัญ(Research)
1. รู้จักตัวเอง-กำหนดเป้าหมายและสำรวจความพร้อม
2. เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการการ
3. ศึกษาคู่แข่ง-สำรวจการแข่งขันและการเรียนรู้คู่แข่ง

Phase 2 : พัฒนาเนื้อหา(Site Content)
4. สร้างกลยุทธ์การออกแบบ
5. หาข้อสรุปขอบเขตเนื้อหา

Phase 3 : พัฒนาโครงสร้างเว็บไซท์(Site Structure)
6. จัดระบบข้อมูล
7. จัดทำโครงสร้างข้อมูล
8. พัฒนาระบบเนวิเกชัน

Phase 4 : ออกแบบและพัฒนาหน้าเว็บ(Visual Design)
9. ออกแบบลักษณะหน้าตาเว็บ
10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย

Phase 5 : พัฒนาและดำเนินการ (Production & Operation)
11. ลงมือพัฒนาเว็บ
12. เปิดเว็บไซท์
13. ดูแลและพัฒนาต่อเนื่อง



บทที่ 7

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

-ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บ
  1. เบราเซอร์ที่ใช้ ผู้ใช้แต่ละคนมีการใช้เบราเซอร์ที่แตกต่างกันที่มีให้ใช้งานอยู่มากหลาย
  2. ระบบปฏิบัติการของคอมพิวเตอร์ ระบบปฏิบัติการที่แตกต่างกันจะให้การแสดงผลเว็บที่ต่างกัน
  3. ความละเอียดของหน้าจอ ผู้ใช้แต่ละรายจะมีความละเอียดของหน้าจอและขนาดจอไม่เท่ากัน
  4. จำนวนจอสีที่ผู้ใช้สามารถแสดงได้ คุณภาพของจอที่สามารถแสดงสีแต่งต่างกัน
  5. ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้ บางครั้งหากเราใช้ฟอรนพิเศษเครื่องผู้ใช้อาจไม่มี
  6. ความเร็วในการเชื่อมต่ออินเตอร์เน็ต มีผลต่อการโหลดหน้าเว็บ
  7. ขนาดของหน้าต่างเบราเซอร์ แต่ละเบราเซอร์จะมีความกว้างไม่เท่ากัน
  8. ความสว่างและความต่างของโทนสี หน้าจอแต่ละแบบจะให้ความสว่างและโทนสีไม่เท่ากันอาจทำให้การแสดงผิดเพี้ยน


บทที่ 8

เลือกใช้สีสำหรับเว็บไซต์
การเลือกใช้สีสันในเว็บเพจเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็นจากเว็บก็คือสี ซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึกของเว็บไซต์
-ประโยชน์ของสีในเว็บไซต์
    สามารถชักนำสายตาอ่านในไปยังข้อมูลได้
    สามารถเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
    สามารถแยกส่วนต่างๆออกจากกันได้ง่าย
    สามารถดึงดูดความสนใจของผู้อ่าน
    ช่วยสร้างระเบียบให้คับข้อความต่างๆ
-แม่สีขึ้นต้นมี 3 สี
สีแดง
สีเหลือง
สีน้ำเงิน
-การผสมสี 
มี2 แบบ
  การผสมแบบบวก เป็นการผสมของแสง ไม่ใช่การผสมของสีวัตถุที่อยู่บนกระดาษ 
  การผสมแบบลบ   เป็นการผสมไม่เกี่ยวกับแสง แต่เกี่ยวกับการดูดกลืนและการสะท้อนของวัตถุ
-วงล้อสี
  เป็นการจัดวางเฉดสีให้เป็นวงล้อง่ายต่อการนำไปใช้
  แบ่งเป็น2แบบ คือ
วงล้อแบบบวก
วงล้อแบบลบ
รูปแบบชุดสีสามารถจัดเป็นกลุ่มดังนี้
   1.ชุดสีร้อนประกอบไปด้วยสีม่วงแกมแดง แดงแกมม่วง แดง ส้ม เหลือง และเขียวอมเหลือ
    2.ชุดสีเย็น ประกอบด้วยสีม่วง น้ำเงิน น้ำเงินอ่อน ฟ้า น้ำเงินแกมเขียว และสีเขียว 
    3.ชุดสีแบบเดียว เป็นรูปแบบชุดสีที่ง่ายที่สุด คือมีค่าของสีบริสุทธิ์เพียงสีเดียว แต่งเพิ่มความหลากหลายโดยการเพื่มความเข็มอ่อนในระดับต่างๆ
    4.ชุดสีแบบสามเส้า เป็นชุดสีที่อยู่มีมุมของสามเหลื่ยมด่านเท่าทั้งสาม ซ้นเป็นสีที่มีระยะห่างในวงล้อสีเท่ากัน
    5.ชุดสีที่คล้ายคลึงกัน ประกอบด้วยสี 2 หรือ 3สีที่อยู่ติดกันในวงล้อ สามารถเพิ่มเป็น 4 หรือ5 สีก็ได้ แต่อาจส่งผลให้ขอบเขตของสีกว้างไป
    6.ชุดสีตรงข้าม คือสีคุ่ที่อยู่ตรงข้ามกันในว้อล้อ เมื่อนำสีทั้งสองมาใช้คู่กันจะทำให้สีทั้งสองมีความสว่างสดใส
    7.ชุดสีตรงข้ามข้างเคียง เป็นชุดสีที่เปลี่ยนแปลงมาจากชุดสีตรงข้าม ชุดสีแบบนี้มความสดใส สะดุดตา และเข้ากันของสีลดลงด้วย
    8.ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน ดัดแปลงมาจากชุดสีตรงข้างเช่นกัน แต่สีตรงข้างทั้ง 2 สีถูกแบ่งแยกเป็นสีด้านข้างทั้ง 2 ด้าน
      จะมีความสดใส แต่ความกลมกลืนของสีลดลง

สร้างนาฬิกาสีสันแบบเก๋ๆ ด้วย CSS & jQuery

By : The Evilman

สร้างนาฬิกาสีสันแบบเก๋ๆ ด้วย CSS & jQuery



วันนี้เป็นการสร้างนาฬิกาด้วย CSS และ jQuery โดยการใช้ css ในการจัดการสีและรูปแบบหนุมของรูปวงกลมที่ใช้ในการหมุนคล้ายกับเข็มนาฬิกาโดยเวลาที่กำหนอจะเป็นเวลาปัจุบันโดยกำหนดเป็น 24 ชั่วโมง โดยรูปแบบของหน้า index จะเป็นการใช้ XHTML เป็นมาร์กอัปโดยการใช้ Div และเรียกใช้งานเอาครับ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< - ชั้นแรก (สีเขียวในกรณีนี้) กำหนดแบบไดนามิก ->
<div class="green clock"</div>
< - วินาทีนาทีหรือชั่วโมง - - DIV นี้มีค่าการตรวจสอบของหน่วย>
<div class="display"></div>
< -! พื้นที่สีดำที่ซ่อนอยู่ภายใต้พื้นหลัง ->
<div class="front left"></div>
< - ส่วนด้านซ้ายของพื้นหลัง: ->
<div class="rotate left">
<div class="bg left"></div>
</div>
< - ส่วนขวาของพื้นหลัง: ->
<div class="rotate right">
<div class="bg right"></div>
</div>
</div>

อย่าลืมใส่โค้ดด้านล่างเพื่อเรียก css มาใช้งานนะครับ
1
2
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.tzineClock/jquery.tzineClock.css" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
    /* Simple page reset */
    margin:0;
    padding:0;
}
body{
    /* Setting default text color, background and a font stack */
    color:#dddddd;
    font-size:13px;
    background: #302b23;
    font-family:Arial, Helvetica, sans-serif;
}
#fancyClock{
    margin:40px auto;
    height:200px;
    border:1px solid #111111;
    width:600px;
}

สร้าง playlist ในเว็บด้วย Open Source Web Music Player With Playlist Support

By : The Evilman

สร้าง playlist ในเว็บด้วย Open Source Web Music Player With Playlist Support

บทความแรกเราจะเขียนเกี่ยวกับการนำสิ่งต่าง ๆ ที่มีอยู่แล้วมาใช้ ถ้าหากอะไรที่เค้ามีมาให้อยู่แล้วจะทำเองให้มันเมื่อยมือทำซากอะไรก็ไม่รู้นะครับคนเรา อืมเริ่มกันเลย...

ไปที่เว็บ http://scmplayer.net/ หลังจากนั้นเลื่อนลงมาด้านล่างจะเจอกล่องเครื่องมือตัวนึง สำหรับใครที่รู้แนวแล้วก็จะไปได้เลยตามที่ท่านคิดนั่นแหละครับ




แท็บที่ 1 : Choose Skin เป็นการเลือก skin หรือ สีให้เข้ากับเว็บของเราเลยนะครับใครชอบแบบไหนเลือกเลยแล้วกัน




05112011-2.jpg

แท็บที่ 2 : Edit Playlist นำเพลงมาใส่ได้เลยครับ ไม่ว่าจะเป็นจาก youtube หรือ ไฟล์ mp3 หรือ ไฟล์เพลงนามสกุลอื่น ๆ จากที่อื่น(ดูดี ๆ นะครับ เพราะว่าช่องแรกให้เราใส่ชื่อเพลง ส่วนช่องที่สองให้ใส่ url ของเพลง ตามรูปด้านบนเลย




05112011-3.jpg

แท็บที่ 3 : Configure Settings กำหนดตัวเลือกอื่น ๆ เลยครับ เช่น เปิดมาจะให้เล่นเพลงเลยหรือไม่ มีการเล่นเพลงซ้ำหรือเปล่า หลังจากนั้นก็กดที่ Done บริเวณล่างขวาครับผม


05112011-4.jpg

หลังจากนั้นทางเว็บไซต์ก็จะให้โค้ดเรามาสามารถนำไปติดหน้าเว็บหรือที่อื่น ๆ ได้ตามต้องการครับ

Credit http://thaiwebsource.blogspot.com/2011/11/playlist-open-source-web-music-player.html

การออกแบบเว็บเพจให้พอดีหน้าจอ

By : The Evilman
การออกแบบเว็บเพจให้พอดีหน้าจอ
:: วิธีการ และ แนวคิด ::
ให้คุณใช้ตารางในการออกแบบเพจนั้น ๆ โดยให้ตารางนั้นครอบคลุมรายละเอียดทั้งหมดของเว็บเพจคุณในช่วงนั้น ๆ โดยให้เรากำหนดตารางเป็นเปอร์เซ็น (%) แทนการกำหนดเป็นพิกเซล (pixel) ดังรูป

โดยเรากำหนดที่ ความกว้าง (Width) ของตารางไว้เป็น 100 % เพราะการกำหนดเป็น percent นี้จะมีการยืดหยุ่นไปกับขนาดของจอภาพของผู้รับชมแต่ละราย ไม่เหมือนกับการที่เรากำหนดเป็นพิกเซล (pixel) ซึ่งการกำหนดแบบพิกเซลนั้นจะเป็นการกำหนดที่ตายตัวเกินไป
และการออกแบบเพจ ๆ หนึ่ง ไม่ควรใช้ตารางเดียวในการครอบคลุมทุก ๆ เนื้อหาทั้งหมด เพราะเว็บเพจจะมีการ Download ช้าเกินไป โดนเฉพาะเว็บเพจที่มีข้อมูลปริมาณมาก ๆ
ดังนั้น.. เราจึงควรแบ่งช่วงหน้าจอออกเป็นส่วน ๆ ตามแนวยาว แล้วค่อยทำการใช้ตารางออกแบบ(Layout) ต่อไป

PHOTO

By : The Evilman
_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________


_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________



- Copyright © EvilMan - DatA Evilman - Powered by Blogger - Designed by Johanes Djogan -