บทที่ 8 เลือกใช้สีสำหรับเว็บไซต์
- สีสันในเว็บเพจเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้
เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็นจากเว็บก็คือสี ซึ่งเป็นสิ่งกำหนดบรรยากาศ
และความรู้สึกโดยรวมของเว็บไซต์- เราสามารถใช้สีได้กับทุกองค์ประกอบ
ของเว็บเพจ ตั้งแต่รูปภาพ ตัวอักษร สีพื้นหลัง การใช้สีที่เหมาะสมจะช่วย
ในการสื่อความหมายของเนื้อหา
- การใช้สีพื้นใกล้เคียงกับสีตัวอักษร บางครั้งอาจสร้างความลำบากในการอ่าน
- การใช้สีที่มากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่านได้
- การใช้สีที่กลมกลืนกันช่วยให้เว็บไซต์น่าดูชมมากยิ่งขึ้น
ประโยชน์ของสีในเว็บไซต์
- สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจ
ที่ต้องการได้ เช่น ข้อมูลใหม่ หรือโปรโมชั่นพิเศษ
- สีช่วยเชื่องโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
- สีสามารถนำไปใช้ในการแบ่งบริเวณต่างๆออกจากกัน
- สีสามารถใช้ในการดึงดูดความสนใจของผู้อ่าน
- สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
- ช่วยสร้างระเบียบให้กับข้อความต่างๆ เช่น ใช้สีแยกระหว่างหัวเรื่องกับเนื้อเรื่อง
- สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ
ความรู้เบื้อต้นเกี่ยวกับสี
- มีสีขั้นต้น ( Primary color )
* สีแดง
* สีเหลือง
* สีน้ำเงิน
- สีขั้นที่ 2
- สีขั้นที่ 3
- สีขั้นที่ 4
-การผสมสี ( Color Mixing )
- การผสมสีแบบบวก ( Additive mixing ) จะเป็นรูปแบบการผสมของแสง
ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ
- การผสมสีแบบลบ ( Subtractive mixing ) การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสง
แต่เกี่ยวกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ
- การนำไปใช้งาน
* การผสมสีแบบบวก จะนำไปใช้ในสื่อใดๆที่ใช้แสดงออกมา เช่น จอโปรเจคเตอร์ ทีวี
* การผสมสีแบบลบ จะนำไปใช้ในสื่อที่เกี่ยวข้องกับการใช้วัตถุมีสี เช่น ภาพวาดของศิลปิน
วงล้อสี ( Color Wheel )
- เป็นรูปแบบหนึ่งในการจัดเรียงสีทั้งหมดในวงกลม และเป็นการจัดลำดับเฉดสีอย่างมีเหตุผล
* วงล้อสีแบบลบ ( Subtractive Color Wheel )
* วงล้อแบบบวก ( Additive Color Wheel )
* สีที่เป็นกลาง ( Neutral Colors )
- คือสีกลุ่มหนึ่งที่ไม่ได้ถูกบรรจุไว้ในวงล้อสี เพราะเป็นสีที่ไม่ได้รับอิทธิพลมาจากสีอื่น
ซึ่งก็คือ สีเทา , ขาว , ดำ สีอ่อน สีเข้ม และโทนสี ( Tint , Shade and Tone )
- ในการผสมสีกลางเข้าสีบริสุทธิ์ จะเกิดเป็นสีต่างๆจำนวนมากมาย
* สีบริสุทธิ์ผสมกับสีขาว จะได้เป็นสีอ่อน ( tint of the hue )
* สีบริสุทธิ์ผสมกับสีเทา จะได้เป็นโทนสีระดับต่างๆ ( tone of the hue )
* สีบริสุทธิ์ผสมกับสีดำ จะได้เป็นสีเข้ม ( Shade of the hue )
- สีอ่อน สีเข้ม และโทนสีมีประโยชน์อย่างมากในการจัดชุดของสี เพราะทำให้สีสีหนึ่งสามารถแสดงออกและให้ความรู้สึกได้หลายแบบยิ่งขึ้น
ความกลมกลืนของสี ( Color Harmony )
- ความเป็นระเบียบของสี ที่ทำให้ผู้ชมรู้สึกถึงสมดุลและความสวยงามในเวลาเดียวกัน
* การใช้สีที่จืดชืดเกินไป จะทำให้เกิดความรู้สึกที่น่าเบื่อ และไม่ดึงดูดความสนใจจากผู้ชม
* การใช้สีที่มากเกินไป ก็จะดูวุ่นวาย ขาดระเบียบ และอาจสร้างความสับสนให้กับผู้ชม
- เป้าหมายในเรื่องสี
- เป้าหมายในเรื่องสี
คือ การนำเสนอเว็บไซต์โดยใช้ชุดสีในรูปแบบที่เข้าใจได้ง่าย น่าสนใจ และสื่อความหมายได้ดี
รูปแบบชุดสีพื้นฐาน ( Simple Color Schemes )
-ชุดสีที่ถูกจัดกลุ่มอย่างเข้ากันด้วยรูปแบบต่างๆ
* ชุดสีร้อน ( Warm Color Scheme ) ประกอบด้วยสีม่วงแกมแดง , แดงแกมม่วง ,
แดง , ส้ม , เหลือง และเขียวอมเหลือง สีเหล่านี้สร้างความรู้สึกอบอุ่น สบาย
* ชุดสีเย็น ( Cool Color Scheme ) ประกอบด้วยสีม่วง , สีน้ำเงิน , สีน้ำเงินอ่อน , ฟ้า ,
น้ำเงินแกมเขียว และ สีเขียว ชุดสีเย็นหึความรู้สึกเย็นสบาย องค์ประกอบที่ใช้สีเย็นจะดูสุภาพ
* ชุดสีแบบเดียว ( Monochromatic Color scheme ) เป็นรูปแบบชุดสีที่ง่าย
คือมีค่าของสีบริสุทธิ์เพียงสีเดียว แต่เพิ่มความหลากหลายโดยการเพิ่มความเข้ม อ่อน ในระดับต่างๆ
ชุดสีแบบนี้ค่อนข้างจะมีความกลมกลืนเป็นหนึ่งเดียว แต่ในบางครั้งอาจทำให้ดูไม่มีชีวิตชีวา
เพราะขาดความหลากหลายของสี
* ชุดสีที่คล้ายคลึงกัน ( Analogous Color Scheme ) ประกอบด้วยสี 2 หรือ 3 สีที่อยู่ติดกันในวงล้อ
สามารถเพิ่มเป็น 4 หรือ 5 สีได้ แต่อาจส่งผลให้ขอบเขตของสีกว้างไป
* ชุดสีตรงข้าม ( Complementary Color Scheme ) คือ สีคู่ที่อยู่ตรงข้ามกันในวงล้อ
เมื่อนำสีทั้งสองมาใช้คู่กันจะทำให้สีทั้งสองมีความสว่างและสดใสมากขึ้น
* ชุดสีตรงข้ามข้างเคียง ( Split Complementary Color Scheme )
เป็นชุดสีที่เปลี่ยนแปลงมาจากชุดสีตรงข้าม ชุดสีแบบนี้มีความหลากหลายเพิ่มขึ้น
แต่จะมีผลให้ความสดใส ความสะดุดตา และความเข้ากันของสีลดลงด้วย
* ชุดสีตรงกันข้ามข้างเคียงทั้ง 2 ด้าน ( Double Split Complementary color Scheme )
ดัดแปลงมาจากชุดสีตรงกันข้ามเช่นกัน แต่สีตรงข้ามทั้ง 2 สีถูกแบ่งแยกเป็นสีด้านข้างทั้ง 2 ด้าน
ชุดสีแบบนี้มีความหลากหลายของสีที่มากขึ้น แต่จะมีความสดใสและความกลมกลืนของสีที่ลดลง
ผลทางจิตวิทยาที่มีต่อสี ( Color Psychology )
- มนุษย์เราตอบสนองต่อสีด้วยจิตใจ ไม่ใช่สมอง เช่นสีบางสีอาจทำให้รู้สึกสดชื่น แต่บางสีทำให้รู้สึกซึมเศร้าได้
- ดังนั้นหากเราเลือกสีอย่างรอบคอบ และความเข้าใจเกี่ยวกับจิตวิทยาของสีเบื้องต้นก็จะทำให้
เราเลือกใช้ชุดสีได้อย่างเหมาะสมกับอารมณ์ เนื้อหาของเว็บไซต์
สีกับอารมณ์ ความรู้สึก และความสัมพันธ์กับสิ่งต่างๆ
- สีแดง อันตราย
- สีน้ำเงิน เทคโนโลยี-
สีเขียว ธรรมชาติ
- สีเหลือง แสงอาทิตย์ , ฤดูร้อน
- สีส้ม กระตุ้นต่อมหิว เกี่ยวกับอาหาร
- สีน้ำตาล โลก พื้นดิน
- สีเทา บ่งบอกถึงความเรียบง่าย
- สีขาว ความเรียบง่าย สุภาพ
- สีดำ หดหู่ , เศร้า , ไว้อาลัย
ข้อคิดเกี่ยวกับการใช้สีในเว็บไซต์
- ใช้สีอย่างสม่ำเสมอ
- ใช้สีอย่างเหมาะสม
- ใช้สีเพื่อสื่อความหมาย
***************************************************************************************************************
บทที่ 9 ออกแบบกราฟฟิกสำหรับเว็บไซต์
- กราฟฟิกเป็นองค์ประกอบที่สำคัญอย่างหนึ่งของเว็บเพจ ช่วยสื่อความหมายสร้างความเข้าใจให้กับผุ้ใช้ รวมทั้งช่วยสร้างความสวยงามให้เว็บไซต์น่าดูยิ่งขึ้น
ปัญหาที่มักเกิดขึ้นกับการสร้างกราฟฟิกคือ การเลือกใช้รูปแบบกราฟฟิกที่ไม่เหมาะสมกับลักษณะของรูป โดยไม่รู้จักความแตกต่างของรูปแบบกราฟฟิก ส่งผลให้รูปที่ได้มีลักษณะไม่สมบูรณ์และมีไฟล์ใหญ่เกินความจำเป็น
รูปแบบกราฟฟิกสำหรับเว็บ ( GIF , JPG , และ PNG)
- GIF ย่อมาจาก Graphic Interchange Format
- ได้รับความนิยมในยุคแรก
- มีระบบเสียงแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุด 256 สี
- มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
- JPG ย่อมาจาก Joint Photographic Experts Group
- มีข้อมูลสีขนาด 24 บิต (True Color) สามารถแสดงสีได้ถึง 16.7 ล้านสี
- ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy)
- ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
- PNG ย่อมาจาก Portable Network Graphic
- สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16 บิต และ 24 บิต
- มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย (lossless)
- มีระบบการควบคุมแกมม่า (Gamma) และความโปร่งใส (Transparency) ในตัวเอง
ระบบการวัดขนาดของรูปภาพ
- รูปภาพใช้หน่วยวัดขนาดตามหน้าจอมอนิเตอร์ นั่นก็คือหน่วยพิกเซล ซึ่งจะมีประโยชน์ในการเปรียบเทียบขนาดของกราฟฟิกกับองค์ประกอบอื่นๆในหน้า เว็บ รวบถึงขนาดของหน้าต่างเบราเซอร์
- ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย pixel per inch (ppi)
- แต่ในทางการใช้งานจะนำหน่วย dot per inch (dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน ppi
- ความละเอียดของรูปภาพที่ใช้ในเว็บไซต์ควรมีความละเอียดแค่ 72 ppi ก็เพียงพอแล้ว
- ปัจจุบันมีโปรแกรมหลายประเภทที่นำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ
* Adobe Photoshop เป็นโปรแกรมที่ได้รับความนิยมตั้งแต่อดีตจนถึงปัจจุบัน
* Adobe ImangeReady ลักษณะหน้าตาและเครื่องมือคล้ายคลึงกับ Photoshop แต่จะถูกพัฒนาข้นเพื่องานกราฟฟิกโดยเฉพาะ เพิ่มความสามารถในการสร้าง animation ได้
* Firework มีคุณสมบัติในการตกแต่งตัวอักษรกราฟฟิกที่เห็นผลทันที การแสดงค่าของสีในระบบเลขฐานสิบหก การสร้างภาพเคลื่อนไหว การตัดแบ่งภาพให้มีขนาดเล็กๆสำหรับไฟล์ HTML
- ค่าพื้นฐานที่สามารถเลือกปรับได้คือ รูปแบบไฟล์ , ชุดสีที่ใช้ , จำนวนสี , ระดับความสูญเสีย , ความโปร่งใสและสีพื้นหลัง
กราฟฟิกรูปแบบ GIF
- มีไฟล์นามสกุลเป็น .gif
- ลักษณะเด่นของ GIF คือการไม่ขึ้นกับระบบปฏิบัติการใดๆ
- GIF เป็นกราฟฟิกประเภทเดียวที่ไม่สามารถนำไปใช้เบราเซอร์ทุกชนิด โดยไม่ต้องคำนึงถึงเวอร์ชันใดๆ
- GIF มีคุณสมบัติในการเคลื่อนไหว
- GIF มีระบบสีแบบ Index เก็บข้อมูลสีได้สูงสุด 8 bit
- คุณสมบัติ Interlacing คือการบันทึกไฟล์ GIF เป็น 4 ระดับ คือ ที่คุณภาพ 12.5% , 25% , 50% , 100% ตามลำดับ
* ข้อดี คือผู้ใช้เห็นภาพที่กำลังดาว์นโหลดอยู่มีความชัดเจนขึ้นเรื่อยๆ
* ข้อเสีย คือขนาดไฟล์จะเพิ่มขึ้นเล็กน้อย
- ระบบการบีบอัดข้อมูลของ GIF
* GIF มีการบีบอัดข้อมูลแบบไม่สูญเสีย (Lossiess) หมายความว่าจะไม่มีการสูญเสียข้อมูลภาพจากการบีบอัด
* GIF ใช้การบีบอัดที่เรียกว่า LZW (Lempei-Ziv-Weleh) ซึ่งเป็นแบบเดียวกับที่ใช้ในโปรแกรม Zip โดยใช้ประโยชน์จากการจากความซ้ำซ้อนของข้อมูล
- คุณสมบัติในการเคลื่อนไหว (Animated GIF)
* รูปที่ประกอบด้วยหลายๆเฟรมในรูปเดียวกัน เมื่อมีการแสดงผลจะเห็นรูปมีการเปลี่ยนแปลงตามเฟรมต่างๆที่มีอยู่อย่างต่อ เนื่อง
* ข้อดี ของ Animated GIF คือไม่ต้องอาศัย plug-in ใดๆเนื่องจากเบราเซอร์สนับสนุนคุณสมบัตินี้
- ข้อคิดในการใช้ Animated GIF
* ใช้ภาพเคลื่อนไหวในจุดที่ต้องการให้ผู้ชมสนใจมากที่สุด
* ไม่ควรใช้ภาพเคลื่อนไหวมากเกินไป จะทำให้ผู้ใช้สับสน
* ทำให้ภาพเคลื่อนไหวนั้นโหลดได้เร็ว
- เราสามารถใช้โปรแกรมสร้าง Animated GIF ได้หลายโปรแกรม เช่น ImageReady , Firework , GifBuilder เป็นต้น
- ค่าต่างๆที่สามารถกำหนดได้ในการออกแบบ Animeted GIF
* จำนวนรอบของการแสดงผล
* เวลาที่ใช้ในแต่ละเฟรม
* ชุดสีที่ใช้
* ความโปร่งใส
* ลักษณะการแสดงรูปเป็นลำดับขั้น (Interlacing)
การลดขนาดไฟล์ GIF
- จำกัดขนาดของกราฟฟิก
* พยายามลดขนาดรูปหรือกราฟฟิกให้เล็กไว้เสมอ
* ตัดเอาบางส่วนของรูปที่ไม่มีความจำเป็นออกไป
* ใช้กราฟฟิกขนาดเล็กหลายๆรูปรวมกัน แทนที่จะใช้กราฟฟิกขนาดใหญ่เพียงรูปเดียว
- ออกแบบโดยใช้สีพื้นๆเข้าไว้
* เลือกใช้สีพื้นๆที่ไม่ซับซ้อน แทนที่จะเป็นการไล่สีจากสีหนึ่งไปอีกสีหนึ่ง
* จำกัดปริมาณของส่วนที่มีลักษณะของรูปภาพหรือภาพ่ายในไฟล์ GIF
- ลดจำนวนสีที่ใช้ลง
* แม้ว่ากราฟฟิกรูปแบบ GIF มีระบบสี 8 บิต แต่เราไม่จำเป็นต้องใช้ทั้งหมดที่มีอยู่ก็ได้
- ออกแบบลวดลายตามแนวนอน
* รูปลักษณะเดียวกัน 2 รูป รูปที่มีลวดลายตามแนวนอนจะมีขนาดไฟล์เล็กกว่า
กราฟฟิกรูปแบบ JPEG
- มีนามสกุลเป็น .jpg หรือ .jpeg
- ใช้วิธีการบีบอัดข้อมูลแบบ JFIF (JPEG File interchange format)
- ไฟล์ประเภท JPEG ไม่ยึดติดกับระบบปฏิบัติการใดๆและสามารถใช้ได้กับเบราเซอร์ทั้ง Netscape และ IE version 2 เป็นต้นไป
- ใช้ระบบสีขนาด 24 บิต ซึ่งจะให้สีสมจริงมากถึง 16.7 ล้านสีส่งผลให้ได้รูปที่มีคุณภาพสูง
- ระบบการบีบอัดข้อมูลในไฟล์ JPEG
* เป็นการบีบอัดแบบ lossy คือสูญเสียรายละเอียดบางส่วนของภาพไป
* อาศัยประโยชน์จากการที่สายตาคนเราสามารถสังเกตเห็นการเปลี่ยนแปลงอย่างช้าๆ ในบริเวณกว้างๆได้ดีกว่าการเปลี่ยนแปลงในบริเวณแคบๆ
* ใช้วิธีเก็บข้อมูลความสัมพันธ์ของสีและความสว่างในรูปเหลี่ยมขนาด 8*8 พิกเซลให้อยู่ในรูปแผนภาพความถี่ โดยมีระบบ Discrete Cosine Transform(DCT) แบ่งแยกข้อมูลที่มีความถี่สูงและต่ำออกจากกัน จากนั้นข้อมูลบางส่วนในความถี่สูงจะถูกตัดไป จะมากหรือน้อยขึ้นอยู่กับระดับคุณภาพ
* ประสิทธิภาพจะขึ้นอยู่กับการรวมกลุ่มของรายละเอียดในรูป เช่น ท้องฟ้า ( ความถี่ข้อมูลต่ำ ) จะบีบอัดได้ดีกว่าใบไม้ใบหญ้า ( ความถี่ข้อมูลสูง )
* JPEG สามารถบีบอัดข้อมูลในอัตราสูงตั้งแต่ 10:1 จนถึง 20:1 โดยที่สายตามนุษย์ไม่อาจมองเห็นคุณภาพที่ลดลงแต่อย่างใด
- การขยายข้อมูลของ JPEG
* เนื่องจากข้อมูลถูกบีบอัดให้อยู่ในรูปของ DCT ดังนั้นเบราเซอร์ต้องทำการขยายข้อมูลก่อนแสดงผล ดังนั้นเบราเซอร์จะใช้เวลาในการแสดงผลรูป JPEG มากกว่า GIF
* เนื่องจากจำนวนบิตของสีไฟล์ JPEG เป็น 24 บิตเสมอจึงไม่สามารถลดขนาดไฟล์โดยการลดจำนวนบิตของสีลงได้
* การลดขนาดไฟล์ทำได้โดยการบีบอัดในอัตราที่สูง ทั้งนี้ก็ขึ้นอยู่กับคุณภาพที่ต้องการด้วย
คำแนะนำในกระบวนการออกแบบกราฟฟิกสำหรับเว็บ
- ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ (Web Palette)
- เลือกใช้รูปแบบกราฟฟิกที่เหมาะสม GIF หรือ JPEG
- ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย (Slices)
- สามารถปรับแต่งชิ้นส่วนของกราฟฟิกได้ตามความเหมาะสมของแต่ละบริเวณ
***************************************************************************************************************
บทที่ 10 จัดรูปแบบตัวอักษรสำหรับเว็บไซต์
ตัวอักษรมีความสำคัญในการสื่อข้อความถึงผู้ใช้
ตัวอักษรมีหลายชนิด แต่ละชนิดสื่อถึงอารมณ์ที่ต่างกันออกไป
ส่วนประกอบของตัวอักษร
point size ระดับความสูงทั้งหมดวัดจากสวนบนสุดถึงล่างสุดของตัวอักษร
ข้อควรระวังในการใช้ตัวอักษรในเว็บเพจ
ระบุชนิดตัวอักษรให้ครบคลุม
กำหนดลักษณะของตัวอักษรที่อยู่ในทุกช่อง ของตาราง
ระบุขนาดของตัวอักษร
ค่าความสุงจะมีผลต่อภาพรวมของตัวอักษรและความยากง่ายในการอ่าน
รูปเเบบตัวอักษรเเบ่งได้ 2 ประเภท
1 ตัวอัการที่มีขนาดสัมพันธ์กับรูปร่าง
2 ตัวอักษรที่มีขนาดคงที่
3 ตัวอักษรระเภท serif
4 ตัวอักษร sens serif
ความสะดวกในการอ่าน
1 หลีกเลี่ยงตัวอักษรที่เป็นตัวพิมพ์ใหญ่ทั้งหมด
2 การใช้ตัวอักษรพิมพ์เล็กทั้งหมดในประโยค สร้างความรู้สึกไม่เป็นทางการและแสดงถึงความสมบูรณ์ของเนื้อหา
3 การจัดข้อความในหน้าเว็บ
4 การจัดตำแหน่ง Alignment
5 การจัดข้อความในหน้าเว็บ
6 จัดแบบ justifyทำให้ช่องว่างในแต่ละคำแตกต่างไปในแต่ละบรรทัด ซึ่งอาจทำให้เกิดช่องว่างที่ไม่สวยได้
7 ความยาวของหน้าเว็บควรจัดเป็นแบบพารากราฟหรือตัดแบ่งเป็นหลายๆหน้า
8 ขนาดของตัวอักษร ใช้ตัวอักษรให้หลายขนาดเพื่อสร้าง ลำดับความสำคัญของข้อมูล
9 เน้นข้อความให้เด่นชัดเพื่อสร้างจุดดึงดูดสายตาของผู้เข้าชม
การใช้สีกับตัวอักษร ควรใช้สีข้อความให้สม่ำเสมอใช้สีที่แตกต่างกันในแต่ละข้อมูลและควรกำหนดสีลิงค์ให้เหมาะสม
การกำหนดขอบ Aliased มีลักษณะขอบเป็รอยหยักที่เกิดขึ้นบริเวณส่วนโค้งที่แสดงบนหน้าจอ
การกำหนดAnti-Aliased ใช้เทคนิคของโทนสีเข้าาช่วยด้วยการเพิ่มสีที่อยู่ระหว่างสีของตัวอักษร
***************************************************************************************************************
