ค ำน ำ - arit.rmutp.ac.tharit.rmutp.ac.th/wp-content/uploads/2012/02/binder1.pdf ·...

59

Upload: lelien

Post on 29-Jun-2018

243 views

Category:

Documents


0 download

TRANSCRIPT

หลักสูตร HTML5 and CSS3 ก

ค ำน ำ

รายงานผลการด าเนินงานโครงการฝึกอบรมเทคโนโลยีสา รสนเทศเพ่ือการเรียนรู้ หลักสูตร HTML5 and CSS3 โดยส านักวิทยบริการและเทคโนโลยีสารสนเทศ จัดขึ้นมีวัตถุประสงค์เพ่ือให้บุคลากรสายสนับสนุน มีความรู้ ความสามารถเสริมให้แก่บุคลากรของมหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร ให้ทันต่อการเปลี่ยนแปลงของเทคโนโลยีสมัยใหม่ ได้อย่างดี โดยจัดขึ้นระหว่างวันที่ 26-30 มีนาคม 2555 ณ ศูนย์การเรียนรู้ด้วยตนเอง ชั้น 2 ส านักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร มีผู้เข้าอบรม 30 คน คิดเป็นร้อยละ 100 สิ้นค่าใช้จ่ายในการด าเนินงานรวมทั้งสิ้น 126,947 บาท

ผลการประเมินโครงการพบว่า ผู้เข้าร่วมอบรมตอบแบบประเมินผลจ านวน 22 คน คิดเป็นร้อยละ 100 มีความเห็นว่า มีความพึงพอใจในการอบรมครั้งนี้โดยรวมอยู่ในระดับมาก คือ 4.64 คิดเป็นร้อยละ 92.73 หลังจากอบรมผู้เข้าร่วมอบรมมีความรู้ ความเข้าใจในเรื่องที่อบรมเพ่ิมข้ึนมีค่าเฉลี่ย 4.73 คิดเป็นร้อยละ 94.55 และ ผู้เข้าร่วมอบรมสามารถน าความรู้ที่ได้รับจากการอบรมไปใช้ในการปฏิบัติงานได้อยู่ในระดับมาก มีค่าเฉลี่ย 4.50 คิดเป็นร้อยละ 90.00 จากการส ารวจความพึงพอใจของผู้เข้าร่วมอบรมในด้านประสิทธิภาพ อยู่ในระดับมาก มีค่าเฉลี่ย 4.61 หรือคิดเป็นร้อยละ 92.12 โดยผู้เข้ารับการอบรมสามารถน าความรู้การใช้ปฏิบัติงานได้จริง

ส านักวิทยบริการและเทคโนโลยีสารสนเทศ หวังเป็นอย่างยิ่งว่ารายงานฉบับนี้จะเป็นประโยชน์แก่ผู้มีส่วนเกี่ยวข้องต่อไป

ส านักวิทยบริการและเทคโนโลยีสารสนเทศ มีนาคม 2555

หลักสูตร HTML5 and CSS3 ข

สำรบัญ

หน้ำ

1. บทสรุปผู้บริหำร 1

2. แบบเสนอของบประมำณ 2

3. รำยงำนผลกำรด ำเนินงำน 9

4. กำรประเมินผลโครงกำรฝึกอบรม 10

5. ภำพกิจกรรมกำรฝึกอบรม 13

6. กำรน ำไปใช้ประโยชน์/แลกเปลี่ยนเรียนรู้ 15

7. รำยละเอียดทำงกำรเงิน 19

หลกัสูตร HTML5 and CSS3 1

การฝึกอบรมโครงการเทคโนโลยีสารสนเทศเพ่ือการเรียนรู้ ผลผลิตผู้ส าเร็จการศึกษาด้านวิทยาศาสตร์และเทคโนโลยี หลักสูตร HTML and CSS3 ส าหรับบุคลากรสายสนับสนุนของมหาวิทยาลัย จัดขึ้นระหว่างวันที่ 26 มีนาคม 2555 - 30 มีนาคม 2555 ณ ศูนย์การเรียนรู้ด้วยตนเอง ส านักวิทยบริการและเทคโนโลยีสารสนเทศ โดยมีวัตถุประสงค์เพ่ือพัฒนาทักษะ ความรู้ความสามารถเสริม ให้แก่บุคลากรของมหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร ให้ทันต่อการเปลี่ยนแปลงของเทคโนโลยี

การด าเนินงาน ได้รับงบประมาณ 126,947บาท มีผู้เข้าอบรมจ านวน 30 คน สิ้นค่าใช้จ่าย 126,947 บาท ประกอบด้วย

ค่าตอบแทน 84,000 บาท ค่าใช้สอย 30,000 บาท ค่าวัสดุ 12,947 บาท รวม 126,947 บาท จากการประเมินผลโครงการพบว่า ผู้เข้าอบรมมีความพึงพอใจในการอบรมครั้งนี้อยู่ในระดับมาก มีค่าเฉลี่ย 4.64 คิดเป็นร้อยละ 92.73 การประเมินวิทยากร ผู้เข้าอบรมมีความพอใจอยู่ในระดับมาก มีค่าเฉลี่ย 4.39 คิดเป็นร้อยละ 87.73 ด้านความรู้ความเข้าใจ หลังจากอบรมผู้เข้าร่วมอบรมมีความรู้ ความเข้าใจในเรื่องที่อบรมเพิ่มขึ้น มีค่า มาก โดยมีค่าเฉลี่ย 4.73 คิดเป็นร้อยละ 94.55 ด้านการน าความรู้ไปใช้ประโยชน์ ผู้เข้าอบรมสามารถน าความรู้ที่ได้รับจากการอบรมไปใช้ในการปฏิบัติงานได้อยู่ในระดับ มาก มีค่าเฉลี่ย 4.50 คิดเป็นร้อยละ 90.00 ด้านประสิทธิภาพจากการส ารวจความพึงพอใจของผู้เข้าร่วมอบรมในด้านประสิทธิภาพ อยู่ในระดับ มาก มีค่าเฉลี่ย 4.61 หรือคิดเป็นร้อยละ 92.12 ปัญหาอุปสรรค

1. มีบางหน่วยงานจัดอบรม วัน เวลา ตรงกัน จึงไม่สามารถเข้าอบรมได้ 2. ส่งรายชื่อมาแต่ไม่เข้าอบรม เนื่องจากมีงานด่วนที่ต้องท า 3. มีบางหน่วยงานส่งรายชื่อล่าช้า

ข้อเสนอแนะเพิ่มเติม

1. อยากให้ส านักวิทยบริการฯ จัดอบรมให้สายสนับสนุนด้วย ไม่ใช้จัดแต่สายวิชาการ 2. อยากให้ส านักวิทยบริการฯ จัดอบรมหลักสูตรอ่ืน ๆ ด้วย 3. ควรเพิ่มวิทยากรให้มากกว่านี้ เนื่องจากผู้เข้าอบรมมีจ านวนมาก 4. ควรท าความสะอาดเครื่องคอมพิวเตอร์และอุปกรณ์พ่วง

บทสรุปผู้บริหาร

หลกัสูตร HTML5 and CSS3 2

โครงการงบยุทธศาสตร์เงินงบประมาณประจ าปี 2555 ด้านวิทยาศาสตร์และเทคโนโลยี

หน่วยงาน ส านักวิทยบริการและเทคโนโลยีสารสนเทศ

ชื่อโครงการ โครงการฝึกอบรมเทคโนโลยีสารสนเทศเพ่ือการเรียนรู้ หลักสูตร HTML5 and CSS3

ลักษณะของโครงการ

( ) 1.1 การส่งเสริม ความตระหนัก ปลูกฝังจิตส านึก ( ) 1.2 การสืบสาน การพัฒนา การอนุรักษ์ ( / ) 1.3 การอบรม การประชุม การสัมมนา (ทางวิชาการ/เชิงปฏิบัติการ) ( ) 1.4 การฝึกศึกษา การศึกษาดูงาน ( ) 1.5 การจัดนิทรรศการ การจัดงาน ( ) 1.6 อ่ืน ๆ .............................................................................

ความสอดคล้องกับยุทธศาสตร์และกลยุทธ์ของมหาวิทยาลัย กลยุทธ์ที่ ( / ) 1.1 บูรณาการหลักสูตรแบบองค์รวม

( ) 1.2 สร้างความเข้มแข็งทางวิชาชีพเฉพาะทาง ( ) 1.3 บริหารจัดการเชิงรุก ( ) 1.4 พัฒนานักศึกษาและบัณฑิตให้เป็นทรัพยากรมนุษย์ที่มีคุณค่า และร่วมมือกับศิษย์เก่า ( / ) 1.5 พัฒนาศักยภาพของบุคลากรทางการศึกษาทุกระดับ ( ) 1.6 ให้บริการวิชาการแก่สังคม เพ่ือสร้างและพัฒนาอาชีพโดยยึดหลักเศรษฐกิจพอเพียง ( ) 1.7 สนับสนุนและสืบสานงานท านุบ ารุงศิลปวัฒนธรรม และรักษาสิ่งแวดล้อม ( ) 1.8 พัฒนางานวิจัย/นวัตกรรม/สิ่งประดิษฐ์ เชิงบูรณาการ เพ่ือประโยชน์เชิงพาณิชย์ ( ) 1.9 เผยแพร่และถ่ายทอดองค์ความรู้สู่ความเป็นเลิศ

ผู้รับผิดชอบโครงการ ส านักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีราชมงคล

พระนคร หัวหน้าโครงการ นางสาวเพชราภรณ์ เพ็ชรแก้ว รองผู้อ านวยการส านักวิทยบริการและเทคโนโลยีสารสนเทศ

หลกัสูตร HTML5 and CSS3 3

หลักการและเหตุผล

เทคโนโลยีในโลกปัจจุบันมีความก้าวหน้าไปอย่างรวดเร็ว โดยเฉพาะอย่างยิ่งในศาสตร์เรื่อ งคอมพิวเตอร์ ที่ในปัจจุบันนี้ได้กลายมาเป็นส่วนหนึ่งของการท างานในหลายสาขาวิชาชีพและเป็นองค์ประกอบในการด ารงชีวิตประจ าวัน การศึกษาหาความรู้ทางด้านคอมพิวเตอร์ในรูปแบบเดิมที่เน้นออกเป็น 2 ส่วนหลักคือความรู้ทางด้านฮาร์ดแวร์ และทางด้านซอฟต์แวร์ ที่แยกออกจากกันโดยสิ้นเชิง และระบบการเรียนรู้ด้วยตัวเองจากหนังสือต่างๆ ที่มีจ าหน่ายอยู่ในท้องตลาดอาจจะไม่เพียงพอ โดยเฉพาะกลุ่มบุคลากรซึ่งมีโอกาสได้ใช้งานคอมพิวเตอร์มากขึ้น แต่ยังขาดประสบการณ์ ทักษะ และความช านาญในการใช้งาน

ด้วยเหตุนี้ทางส านักวิทยบริการเทคโนโลยีสารสนเทศ จึงด าเนินการจัดโครงการอบรมเทคโนโลยีสารสนเทศเพ่ือการเรียนรู้ หลักสูตร HTML5 and CSS3 โดยจัดอบรมให้ความรู้ทางด้านคอมพิวเตอร์ทั้งทางซอฟต์แวร์และฮาร์ดแวร์ในลักษณะของการใช้งานเบื้องต้น และได้มีโอกาสฝึกใช้งานคอมพิวเตอร์ของบุคลากร รวมถึงท ากิจกรรมอ่ืนๆ เพ่ือน าความมรู้ที่ได้ไปใช้ประกอบทักษะในการปฏิบัติงานเพื่อให้เกิดประสิทธิภาพ วัตถุประสงค์

1. เพ่ือพัฒนาความรู้ ความสามารถ และทักษะของบุคลากรทางคอมพิวเตอร์ให้ทันต่อการเปลี่ยนแปลงของเทคโนโลยีซึ่งต้องมีความรู้ความสามารถได้ตามมาตรฐาน

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

3. เพ่ือสนับสนุนให้บุคลากรทุกคนแสดงความสามารถ และความคิดสร้างสรรค์ได้อย่างเต็มที่ กลุ่มเป้าหมาย ทั้งสิ้น 30 คน ประกอบด้วย

ผู้เข้าอบรม จ านวน 22 คน กรรมการ จ านวน 6 คน วิทยากร จ านวน 2 คน

สถานที่ด าเนินงาน ศูนย์ การ เรี ยนรู้ ด้ วยตน เอง เท เวศร์ ส านั กวิทยบริ การและ เทคโนโลยีส ารสนเทศ

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ระยะเวลาด าเนินงาน ระหว่างวันที่ 26-30 มีนาคม 2555

หลกัสูตร HTML5 and CSS3 4

ขั้นตอนการด าเนินงาน

กิจกรรม ปี 2555 ม.ค ก.พ มี.ค เม.ย พ.ค มิ.ย ก.ค ส.ค ก.ย

1. ประชุมวางแผน

2. จัดท าโครงการ

3. เสนอโครงการเพ่ือขออนุมัติ

4. ด าเนินโครงการ

5. ประเมินผลโครงการ

6. ติดตามการน าความรู้ไปใช้

ประโยชน์

งบประมาณ 126,947 บาท (หนึ่งแสนสองหม่ืนหกพันเก้าร้อยสี่สิบเจ็ดบาทถ้วน) เบิกจ่ายจากเงินงบประมาณ ผลผลิต ผู้ส าเร็จการศึกษาด้านวิทยาศาสตร์และเทคโนโลยี งบรายจ่ายอื่น ค่าใช้จ่ายพัฒนาคุณภาพการศึกษา โครงการการพัฒนาการจัดการศึกษาตามยุทธศาสตร์การพัฒนามหาวิทยาลัย โครงการฝึกอบรมเทคโนโลยีสารสนเทศเพ่ือการเรียนรู้

1. ค่าตอบแทน 84,000 บาท

ค่าตอบแทนวิทยากรภายนอก ( 7 ชม. x 5 วัน x 1,200 บาท x 2 คน)

2. ค่าใช้สอย 30,000 บาท (ผู้เข้าอบรมและคณะกรรมการด าเนินงาน จ านวน 30 คน)

- ค่าอาหารว่าง (10 มื้อ x 30 คน x 25 บาท) 7,500 บาท - ค่าอาหารกลางวัน (5 มื้อ x 30 คน x 150 บาท) 22,500 บาท

3. ค่าวัสดุ 12,947 บาท

รวมทั้งสิ้น 126,947 บาท (หนึ่งแสนสองหม่ืนหกพันเก้าร้อยส่ีสิบเจ็ดบาทถ้วน)

หมายเหตุ ขอถัวเฉลี่ยจ่ายค่าใช้จ่ายทุกรายการและจ านวนคนโดยเบิกจ่ายตามวงเงินที่ได้รับอนุมัติ

หลกัสูตร HTML5 and CSS3 5

รายละเอียดหลักสูตรการฝึกอบรม

เป็นหลักสูตรการพัฒนาระบบเทคโนโลยีสารสนเทศเพ่ือการเรียนรู้ หลักสูตร HTML5 and CSS3 เนื้อหาหลักสูตรประกอบด้วย

วันจันทร์ที่ 26 มีนาคม 2555 Module 1 : Getting Started

- Anatomy of HTML5 document - HTML terminology and concepts - What’s new in HTML5 - Web browser support

Module 2 : Using HTML5 Tag - Global Attributes - Content model categories - Document metadata and scripting elements

วันอังคารที่ 27 มีนาคม 2555

Module 2 : Using HTML5 Tag - Document sectioning elements - Content grouping elements - Text-Level semantic elements - Tabular data elements - From elements - Embedded content elements - Interactive elements

วันพุธ ที่ 28 มีนาคม 2555 Module 3 : HTML5 Semantics

- HTML5 outline - Creating an outline using sectioning content - Headers and footers - Viewing HTML5 outlines

Module 4 : Form Mastery - Form markup - Gathering input - Validating and submitting forms

หลกัสูตร HTML5 and CSS3 6

วันพฤหัสบด ีที่ 29 มีนาคม 2555 Module 4 : Form Mastery

- Other common input element attributes - Other form controls - Adding structure with filed set and labels - Form usability

Module 5 : Multimedia - Image maps - Embedding HTML - Video - Audio

วันศุกร์ที่ 30 มีนาคม 2555 Module 6 : CSS3

- CSS3 Module - Using CSS - Background or borders - Color

Module 7 : Using Interactive and HTML5 APls - Using JavaScript - Building a custom video controller - Scripted 2D Canvas API - Drag-and-drop operations

หลกัสูตร HTML5 and CSS3 7

ก าหนดการอบรม HTML5 and CSS3

26 มีนาคม 2555 เนื้อหา 8.30 – 10.30 Module 1 : Getting Started

Anatomy of HTML5 document HTML terminology and concepts

10.30– 12.00 What’s new in HTML5 Web browser support

12.00 – 13.00 พักรับประทานอาหารกลางวัน 13.0 – 14.30 Module 2 : Using HTML5 Tag

Global Attributes Content model categories

14.30 – 16.30 Document metadata and scripting elements

27 มีนาคม 2555 เนื้อหา 8.30 – 10.30 Module 2 : Using HTML5 Tag

Document sectioning elements Content grouping elements

10.30 – 12.00 Text-Level semantic elements 12.00 – 13.00 พักรับประทานอาหารกลางวัน 13.00 - 14.30 Tabular data elements

From elements 14.30 – 16.30 Embedded content elements

Interactive elements 28 มีนาคม 2555 เนื้อหา

8.30 – 10.30 Module 3 : HTML5 Semantics HTML5 outline Creating an outline using sectioning content

10.30 – 12.00 Headers and footers Viewing HTML5 outlines

12.00 – 13.00 พักรับประทานอาหารกลางวัน 13.00 – 14.30 Module 4 : Form Mastery

Form markup Gathering input

14.30 - 16.30 Validating and submitting forms

หลกัสูตร HTML5 and CSS3 8

29 มีนาคม 2555 เนื้อหา 8.31 – 10.30 Module 4 : Form Mastery

Other common input element attributes Other form controls

10.30– 12.00 Adding structure with filed set and labels Form usability

12.00 – 13.00 พักรับประทานอาหารกลางวัน 13.00 – 14.30 Module 5 : Multimedia

Image maps Embedding HTML

14.30 – 16.30 Video Audio

30 มีนาคม 2555 เนื้อหา 8.30 – 10.30 Module 6 : CSS3

CSS3 Module Using CSS

10.31 – 12.00 Background or borders Color

12.00 – 13.00 พักรับประทานอาหารกลางวัน 13.00 - 14.30 Module 7 : Using Interactive and HTML5 APls

Using JavaScript Building a custom video controller

14.31 – 16.30 Scripted 2D Canvas API Drag-and-drop operations

การประเมินผลโครงการ

1. การสังเกตุการณ์การมีส่วนร่วม 2. ท าแบบประเมินผลโครงการเมื่อเสร็จสิ้นโครงการ 3. ตัวชี้วัดด้านปริมาณ จ านวนผู้เข้าอบรมไม่น้อยกว่าร้อยละ 80 ของเป้าหมาย 4. ตัวชี้วัดด้านคุณภาพ ผู้เข้ารับการฝึกอบรมมีความพึงพอใจในการฝึกอบรมโดยร่วมไม่ต่ ากว่า

3.50 5. ตัวชี้วัดด้านเวลา การอบรมเสร็จสิ้นภายในเวลาที่ก าหนด

ผลที่คาดว่าจะได้รับ

1. บุคลากรสามารถพัฒนาระบบงานของหน่วยงานได้อย่างมีประสิทธิภาพ 2. เสริมสร้างสมรรถนะของมหาวิทยาลัยด้านเทคโนโลยีสารสนเทศ 3. เกิดบรรยากาศการแลกเปลี่ยนเรียนรู้ในองค์กรเพ่ือพัฒนาสู่องค์กรแห่งการเรียนรู้

หลกัสูตร HTML5 and CSS3 9

โครงการฝึกอบรมเทคโนโลยีสารสนเทศเพ่ือการเรียนรู้ ผลผลิต ผู้ส าเร็จการศึกษาด้านวิทยาศาสตร์และเทคโนโลยี งบรายจ่ายอื่น ค่าใช้จ่ายพัฒนาคุณภาพการศึกษา โครงการการพัฒนาการจัดการศึกษาตามยุทธศาสตร์การพัฒนามหาวิทยาลัย หลักสูตร HTML5 and CSS3 ระหว่าง วันที่ 26-30 มีนาคม 2555 ณ ศูนย์การเรียนรู้ด้วยตนเอง ส านักวิทยบริการและเทคโนโลยีสารสนเทศ ศูนย์เทเวศร์ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

1. ผลการด าเนินงานด้านการจดัการในภาพรวม 1.1 ในการอบรมกลุ่มเป้าหมายผู้เข้าร่วมโครงการประกอบด้วยบุคลากรสายสนับสนุน

ทุกหน่วยงานของมหาวิทยาลัย จ านวน 30 คน

1.2 งบประมาณท่ีได้รับ 126,947 บาท เป็นเงินค่าใช้จ่ายในการด าเนินงานจริง 126,947 บาท ประกอบด้วย

ค่าตอบแทน 84,000 บาท ค่าใช้สอย 30,000 บาท ค่าวัสดุ 12,947 บาท รวม 126,947 บาท

1.3 จากการส ารวจความพึงพอใจของผู้เข้าร่วมอบรมในภาพรวม มีค่าเฉลี่ยอยู่ในระดับ มาก มีค่าเฉลี่ย 4.64 คิดเป็นร้อยละ 92.73 จากผู้ตอบแบบสอบถาม 22 คน

2. ผลการประเมินความรู้ตนเองด้านวิทยากร ด้านความรู้ความเข้าใจ ด้านการน า

ความรู้ไปใช้ประโยชน์ และด้านประสิทธิภาพ 2.1 ด้านวิทยากร จากการส ารวจความพึงพอใจของผู้เข้าร่วมอบรมในด้านวิทยากรอยู่ใน ระดับ มาก มีค่าเฉลี่ย 4.39 คิดเป็นร้อยละ 87.73 2.2 ด้านความรู้ความเข้าใจ หลังจากอบรม ผู้เข้าร่วมอบรมมีความรู้ความเข้าใจในเรื่องท่ี อบรม เพิ่มข้ึน อยู่ในระดับ มาก มีค่าเฉลี่ย 4.73 คิดเป็นร้อยละ 94.55 2.3 ด้านการน าความรู้ไปใช้ประโยชน์ ผู้เข้าร่วมอบรม สามารถน าความรู้ที่ได้จากการ อบรมไปใช้ในการปฏิบัติงานได้ อยู่ในระดับ มาก มีค่าเฉลี่ย 4.44 คิดเป็นร้อยละ 88.79 2.4 ด้านประสิทธิภาพ จากการส ารวจความพึงพอใจของผู้เข้าร่วมอบรมในด้านประสิทธิภาพ อยู่ในระดับ มาก มีค่าเฉลี่ย 4.61 หรือคิดเป็นร้อยละ 92.12

รายงานผลการด าเนินงาน โครงการฝึกอบรมเทคโนโลยีสารสนเทศเพื่อการเรียนรู้ ประจ าปี 2555

หลักสูตร HTML5 and CSS3

หลกัสูตร HTML5 and CSS3 10

ประชากร ประชากรที่ใช้ในการประเมินผลโครงการเทคโนโลยีสรสนเทศเพ่ือการเรียนรู้ หลักสูตร HTML5

and CSS3 ระหว่างวันที่ 26-30 มีนาคม 2555 ณ ศูนย์การเรียนรู้ด้วนตนเอง ส านักวิทยบริการและเทคโนโลยีสารสนเทศ ผู้เข้าอบรมประกอบด้วยบุคลากรสายสนับสนุนทุกหน่วยงาน จ านวน 30 คน กลุ่มตัวอย่าง ที่ใช้ในการประเมินผลโครงการ คือ บุคลากรสายสนับสนุนทุกหน่วยงานของมหาวิทยาลัย จ านวน 30 คน คิดเปน็ร้อยละ 100 ของผู้เข้าอบรม เครื่องมือที่ใช้ในการเก็บรวบรวมข้อมูล มี 1 ฉบับได้แก่ แบบประเมินตนเองโครงการเพ่ือการส่งเอกสารทางการเงิน ลักษณะแบบสอบถามเป็นแบบมาตราส่วนประมาณค่า 5 ระดับ (Rating Scale) คือ มากที่สุด มาก ปานกลาง น้อย และน้อยที่สุด แบ่งเป็น 3 ตอนคือ ตอนที่ 1 ข้อมูลส่วนบุคคล ตอนที่ 2 ความคิดเห็นด้านการอบรม ตอนที่ 3 ข้อเสนอแนะเพ่ิมเติม

แบบสรุปผลการประเมินผลโครงการอบรม หลักสูตร HTML5 and CSS3 จ านวนผู้ตอบแบบสอบถามทั้งหมด 22 คน

ตารางท่ี 1 ข้อมูลส่วนบุคคล

ข้อมูลส่วนบุคคล จ านวน ร้อยละ เพศ ชาย 14 63.64% หญิง 8 36.36%

การประเมินผลโครงการฝึกอบรม เทคโนโลยีสารสนเทศเพื่อการเรียนรู้ ประจ าปี 2555

หลักสูตร HTML5 and CSS3

หลกัสูตร HTML5 and CSS3 11

ตารางท่ี 2 การประเมินตนเองของผู้รับการอบรมต่อความคิดเห็นด้านการอบรม เกณฑ์การให้คะแนนระดับความคิดเห็น ค่าเฉลี่ย 4.50-5.00 หมายถึง มีความพึงพอใจมากท่ีสุด ค่าเฉลี่ย 3.50-4.49 หมายถึง มีความพึงพอใจมาก ค่าเฉลี่ย 2.50-3.49 หมายถึง มีความพึงพอใจปานกลาง ค่าเฉลี่ย 1.50-2.49 หมายถึง มีความพึงพอใจน้อย ปค่าเฉลี่ย 0.50-1.49 หมายถึง มีความพึงพอใจน้อยที่สุด

ประเด็นความคดิเห็น

ระดับความพึงพอใจ / ความรู้ความเขา้ใจ / การน าความรู้ไปใช้ประโยชน์ มากที่สุด

(ร้อยละ)

มาก

(ร้อยละ)

ปานกลาง

(ร้อยละ)

น้อย

(ร้อยละ)

น้อยที่สุด

(ร้อยละ)

ค่าเฉลี่ย

(ร้อยละ) ระดับ

ด้านวิทยากร

1. การเตรียมตัวและความพร้อมของวิทยากร

8.00 (36.36%) 14.00 (63.64%) 0.00 (0.00%) 0.00 (0.00%) 0.00 (0.00%) 4.36 (87.27%) มาก

2. สามารถอธบิายเนื้อหาได้ชัดเจนและตรงประเด็น

4.00 (18.18%) 18.00 (81.82%) 0.00 (0.00%) 0.00 (0.00%) 0.00 (0.00%) 4.18 (83.64%) มาก

3. ใช้ภาษาที่เหมาะสม เขา้ใจง่าย

9.00 (40.91%) 13.00 (59.09%) 0.00 (0.00%) 0.00 (0.00%) 0.00 (0.00%) 4.41 (88.18%) มาก

4. สามารถตอบค าถามได้ตรงประเด็น

10.00 (45.45%) 12.00 (54.55%) 0.00 (0.00%) 0.00 (0.00%) 0.00 (0.00%) 4.45 (89.09%) มาก

5. วิทยากรมีจ านวนเพียงพอเหมาะสม

10.00 (45.45%) 11.00 (50.00%) 1.00 (4.55%) 0.00 (0.00%) 0.00 (0.00%) 4.41 (88.18%) มาก

6. เอกสารประกอบการบรรยายเหมาะสม

12.00 (54.55%) 9.00 (40.91%) 1.00 (4.55%) 0.00 (0.00%) 0.00 (0.00%) 4.50 (90.00%) มากที่สุด

Total

4.39 (87.73%) มาก ด้านความรู้ความเขา้ใจ

1. ความรู้ ความเขา้ใจในเรื่องนี้ก่อนการอบรม

1.00 (4.55%) 5.00 (22.73%) 1.00 (4.55%) 2.00 (9.09%) 13.00 (59.09%) 2.05 (40.91%) น้อย

2. ความรู้ ความเขา้ใจในเรื่องนี้หลังการอบรม

16.00 (72.73%) 6.00 (27.27%) 0.00 (0.00%) 0.00 (0.00%) 0.00 (0.00%) 4.73 (94.55%) มากที่สุด

Total

3.39 (67.73%) ปานกลาง

ด้านการน าความรู้ไปใช้ประโยชน์ 1. น าความรู้ที่ได้รับไปใช้ในการปฏิบัติงานได ้

7.00 (31.82%) 15.00 (68.18%) 0.00 (0.00%) 0.00 (0.00%) 0.00 (0.00%) 4.32 (86.36%) มาก

2. สามารถให้ค าปรึกษา แนะน าแก่เพื่อนร่วมงานได ้

11.00 (50.00%) 11.00 (50.00%) 0.00 (0.00%) 0.00 (0.00%) 0.00 (0.00%) 4.50 (90.00%) มากที่สุด

3. มีความมั่นใจการน าความรู้ที่ได้ไปใช้ประโยชน์

11.00 (50.00%) 11.00 (50.00%) 0.00 (0.00%) 0.00 (0.00%) 0.00 (0.00%) 4.50 (90.00%) มากที่สุด

Total

4.44 (88.79%) มาก ด้านประสิทธิภาพ

1. การให้บริการของเจ้าหน้าทีัั 15.00 (68.18%) 7.00 (31.82%) 0.00 (0.00%) 0.00 (0.00%) 0.00 (0.00%) 4.68 (93.64%)

มากที่สุด

2. การประสานงาน อ านวย 16.00 (72.73%) 6.00 (27.27%) 0.00 (0.00%) 0.00 (0.00%) 0.00 (0.00%) 4.73 (94.55%) มาก

หลกัสูตร HTML5 and CSS3 12

ความสะดวกของเจ้าหนา้ที ่ ที่สุด 3. สถานที่สะอาดและมีความเหมาะสม

13.00 (59.09%) 9.00 (40.91%) 0.00 (0.00%) 0.00 (0.00%) 0.00 (0.00%) 4.59 (91.82%) มากที่สุด

4. วัสดุ / อปุกรณ์ในการฝึก มีความเหมาะสม

11.00 (50.00%) 11.00 (50.00%) 0.00 (0.00%) 0.00 (0.00%) 0.00 (0.00%) 4.50 (90.00%) มากที่สุด

5. ระยะเวลาในการอบรม/สัมมนามีความเหมาะสม

12.00 (54.55%) 9.00 (40.91%) 1.00 (4.55%) 0.00 (0.00%) 0.00 (0.00%) 4.50 (90.00%) มากที่สุด

6. ท่านมีความพึงพอใจในการอบรมครั้งนี้

14.00 (63.64%) 8.00 (36.36%) 0.00 (0.00%) 0.00 (0.00%) 0.00 (0.00%) 4.64 (92.73%) มากที่สุด

Total

4.61 (92.12%) มากที่สุด

หลกัสูตร HTML5 and CSS3 13

ประมวลภาพกิจกรรม

หลกัสูตร HTML5 and CSS3 14

หลกัสูตร HTML5 and CSS3 15

HTML5 เรียกได้ว่าเป็นการรวมตัวกันระหว่าง HTML+CSS+JS

เนื่องจากเทรนด์ของการท าเว็บในยุคนี้และ พ.ศ. หน้า นอกจากจะต้องสวยงามตามครรลองเมื่อแสดงผลในจอคอมพิวเตอร์และโน้ตบุ๊กขนาด ต่างๆ แล้ว จะต้องรองรับการแสดงผลที่สวยงามบนทุก platform ที่จะเกิดข้ึนได้ในอนาคตที่ไม่จ าเป็นจะต้องเป็นอุปกรณ์หน้าจอสี่เหลี่ยมก็ ยังได้ แต่ถ้าจะยกตัวอย่างที่เข้าใจง่ายก็คือเวลาเปิดเว็บบน iPad, Galaxy Tab จะต้องแสดงผลได้ถูกต้องตามมาตรฐาน

แต่เนื่องจากเทคนิคในการออกแบบเว็บไซต์เพ่ือให้มีลูกเล่นหรูหราเฟ้ียว ฟ้าวนั้น หลายๆ คนก็ยังนิยมใช้แฟลชในการออกแบบเว็บอยู่ ซึ่งแน่นอน…มาเปิดบน iPad ก็แสดงผลไม่ได้

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

ความสามารถใหม่ใน HTML5

Semantics: ฟีเจอร์นี้เปรียบเหมือนการหาจุดร่วมที่ดีไซน์เนอร์และโปรแกรมเมอร์จะท างาน ด้วยกันได้ราบรื่นขึ้น HTML5 จะสามารถตั้งชื่อ element ได้เลย (จากเดิมเราจะคุ้นว่าตรงนี้คือ div นะ ตรงนี้คือ span นะ แต่เราสามารถตั้งแท็ก <nav> หรือ <aside> อะไรแบบนี้ก็ได้ด้วย โดยการระบุชื่อ element นั้นจะท าให้ดีไซน์เนอร์สามารถเข้าใจได้ว่าโค้ดส่วนนี้เป็นโค้ดส่วนไหน (<header> <footer> <article>) นอกจากนี้การระบุชื่อของ <form> แบบเฉพาะเจาะจงในรูปของ <input type=”search”>, <input type=”text”>, <input type=”email”> ฯลฯ ยังมีประโยชน์ส าหรับผู้พิการทางสายตาด้วย (เวลาใช้เครื่องอ่านหนังสือแล้วเวลาเครื่องอ่านเจอ element ที่ตั้งชื่อว่า <input type=”email”> เครื่องก็จะบอกได้ทันทีว่าจากนี้ให้กรอกอีเมล อะไรแบบนี้เป็นต้น)

Offline & Storage: ก่อนหน้านี้ระบบเว็บจะมีแค่ cache หรือ cookie ที่เอาไว้เก็บค่าต่างๆ ของผู้ใช้ แต่ใน HTML5 เราจะสามารถเก็บเกมหรืออะไรก็ได้ตามที่พัฒนาก าหนดไว้ในเครื่องได้ทันทีโดย ไม่จ าเป็นต้องโหลดซ้ าอีก เช่นเกม Cut The Rope ที่เป็นพาร์ตเนอร์กับ Internet Explorer โปรโมตว่าเราสามารถเล่นเกมนี้บนเว็บได้ทันทีแบบไม่มีกระตุก และตัวเกมก็ท าจาก HTML5 ข้อดีของ Offline Storage ก็คือ เรายังสามารถใช้งานความสามารถของ Web App ได้ถึงแม้เราจะไม่ได้ต่ออินเทอร์เน็ตก็ตาม เช่น ใช้งาน Google Docs หรือ Gmail แบบ offline ได้ พอต่ออินเทอร์เน็ตปุ๊บก็ค่อยให้ระบบท าการ sync ข้อมูลกัน

หลักฐานการน าไปใช้ประโยชน์

หลกัสูตร HTML5 and CSS3 16

Device Access: ความสามารถต่างๆ ที่เคยย้ายจากคอมพิวเตอร์มาสู่หน้าจอมือถือหรือแท็บเล็ตให้เราแต่งภาพ, เล่นเกม หรือเฟซบุ๊กทวิตเตอร์กันสนุกสนาน อีกไม่นานเราก็จะสามารถท ามันได้บนอุปกรณ์ที่ไม่รู้ว่ามีอีกกี่ล้านชนิดที่จะ เกิดขึ้นหลังจากนี้ แถมไม่จ าเป็นจะต้องอยู่บนจอสี่เหลี่ยมอีกต่อไป ประตูกระจกอาจเป็น Display ที่สามารถรับค่า input และ output ไปเพ่ือท าอะไรสักอย่าง แม้กระทั่งฝารองนั่งชักโครกอาจจะมีระบบตรวจจับก้น ถ้าเจอปุ๊บให้ฉีดน้ าใส่ได้ทันทีอะไรแบบนี้ HTML5 ท าได ้

Connectivity: โดยปกติเราจะใช้ port 80 ในการเข้าชมเว็บไซต์อะไรก็ตาม แต่หลังจากนี้ด้วย HTML5 ที่รองรับการใช้ port สารพัดชนิด ก็จะท าให้เราสามารถใช้งานฟังก์ชั่นอ่ืนๆ เช่น แชต , เปิด ftp หรือโหลดบิตผ่านเบราเซอร์ก็มีโอกาสเป็นไปได้

Multimedia: สามารถชมภาพและเสียงหรือคลิปวิดีโอได้โดยไม่จ าเป็นจะต้องลง flash หรือส่วนเสริมอ่ืนๆ ให้ยุ่งยากวุ่นวายอีก YouTube ก็เป็นอีกเว็บที่ใช้ระบบ HTML5 จะเห็นว่าเดี๋ยวนี้ไม่จ าเป็นต้องโหลด flash เราก็ดูคลิปบน YouTube ได้ จะเห็นว่าแต่ก่อนถ้าเราต้องการจะฝังคลิปยูทูบในเว็บไซต์ของเรา จะต้องใช้แท็ก <embed> ตามด้วยโค้ดรุงรังต่างๆ นานา แต่ใน HTML5 นั้นจบได้ด้วยแท็ก <video> และ <audio> ในกรณีที่เป็นเสียง (ส่วนจะตั้งค่าคลิปให้กว้างยาวเท่าไหร่ก็ค่อยไปเขียน script คุมเอายังได้)

3D, Graphics & Effects: รองรับการแสดงผลแบบ 3D, การแสดงผลกราฟิกมีลูกเล่นได้มากขึ้น (วัตถุสามารถมีเงาได้, มีขอบมนได้, ไล่เฉดสีแบบ gradient ได้) สามารถแสดงผลเป็นคนสัตว์สิ่งของโดยโค้ดเพียวๆ ไม่ต้องพ่ึงรูปภาพใดๆ เลยก็ท าได้

Performance & Integration: ใช้ระบบที่ท าให้เราสามารถเปิดเว็บที่มี content หรือมีการเรียกข้อมูลมหาศาล แต่กลับเปิดเว็บได้รวดเร็วลื่น

CSS3: รองรับการตกแต่ง ดีไซน์ และแสดงผลเว็บไซต์ให้ตรงตามมาตรฐาน ที่เดี๋ยวจะกล่าวต่อไปว่ามีอะไรใหม่ไฉไลกว่าเดิม

หลกัสูตร HTML5 and CSS3 17

CSS3

ถ้าเปรียบการสร้างเว็บเป็นบ้าน HTML ก็คือบ้าน ส่วน HTML+CSS ก็คือบ้านที่ตกแต่งสวยงามตามภาพ ส่วน UX (User Experience) ก็คือการใช้ทักษะการออกแบบแอปพลิเคชั่นหรือเว็บไซต์ให้ใช้งานง่ายหรืออิงตาม พฤติกรรมการใช้งานของผู้ใช้อยู่แล้ว

ต านาน CSS จากอดีตสู่ปัจจุบัน

หลกัสูตร HTML5 and CSS3 18

ความสามารถใน CSS3

Round Corners: ท ามุมมนได้ Background Decoration: ใส่ background ที่ตั้งค่าได้สารพัด (จะให้เป็น image ก็ได้ จะใส่

หลาย image ก็ได้ จะใส่สี ใส่สีแบบไล่เฉด สั่ง tile background ได้) Colors: ตั้งค่าสีได้หลายโหมด จากเดิมเราจะต้องใช้สีในโหมด RGB หรือ Hex Color (ที่เป็นโค้ด

รหัส 6 ตัว #3b5998 ฯลฯ) ก็สามารถใช้สีในระบบอ่ืนได้ เช่น HSL (Hue, Saturation, Lightness) หรือจะใช้ระบบ HSLA หรือ RGBA (A คือ Alpla คือค่าความโปร่งใสของสี) ก็ได้

Text-Effects: ใส่เงา (text-shadow) หรือตั้งค่า text-overflow (มีตัวอักษรอะไรเกินกรอบที่ก าหนดไว้ ก็ตั้งค่าให้แสดงผลเป็นตัวอักษร “…” อะไรแบบนี้ก็ได้)

Attribute Matching: ตั้งค่า css อิงตาม element ที่มีลักษณะตามที่ก าหนดได้ เช่น ลิงก์ a ที่มีค าว่าแพนด้า ให้แสดงผลเป็นตัวอักษรขาวพื้นหลังด า

Transformation: การจับ, บิด, หมุน ตัวอักษร ภาพ หรืออะไรก็ตามโดยไม่เสียรูปเดิม Box Model: เนื่องจาก CSS3 ปรับปรุงการจัดระเบียบ การแสดงผล มองทุกวัตถุเป็น box ซึ่ง

ครอบคลุมและรองรับการใช้งานที่จะเกิดขึ้นมากข้ึน Webfont: รองรับการแสดงผลในฟอนต์ที่หลากหลายมากขึ้น ก็คือในหน้าเว็บ เราไม่จ าเป็น

จะต้องใช้ฟอนต์ธรรมดาสามัญอย่าง Tahoma, Arial, Thonburi บลาๆ แต่สามารถใช้ฟอนต์ที่สวยงามและหลากหลายได้ด้วยเทคนิค @font-face ซึ่งบริการเว็บฟอนต์ที่เป็นที่รู้จักกันก็คือ Google Webfont นั่นเอง

Animation: ตั้งค่าให้แสดงอนิเมชั่นจากรูปหนึ่งไปเป็นอีกรูปหนึ่ง (tween) อะไรแบบนี้ก็ได้

หลกัสูตร HTML5 and CSS3 19

หลักฐานทางการเงนิ

w uuiln?Jan21}Jd?u:19n1: drrinilru!3nr:uarrvraluladar:alrvrn u:. vr:vunl llr:.ob-bdb-ciood oio sol"t.<

fi ns oaao.ot",z U6ol iud \U ur,re.ruu bdddr=ioo ,uoei.:yd' 110LtnuL!uur]

6u! ridr!r u nr: n o.r na'i

nufi rirrininulinl:travnlnlula 641:aurrfl o'oln:,rnr:fl nou:rarrauurfirfionr:Gu!iva'flan5 HTML 5 and css : :vr,r'irrilld bb - mo ir-Jln bddd ru fludnr:riuuidruourorlvrrni riliniru!3nr:rrasrvnTula66r:a!n1r1 rfu fnd nr:flnor:ro-rnririldraiodlGelioarkir6lrorirh;ird'rgrfiotdFuriudl riluuir.r o.r,<oo !,r (yfi.iuaurafilraduarrr-ua'ioulryriru)tuav6uriuaot qjrlru uoo trrlr (unio ulryd.lu) ot'l lonar:1r:ar'rd'r1fi ruur:lruiald

6qiuurLrrdolr.J:oy:rluavrirrfr unr:riotrj

vl/

({rirunran:ror:rjfi ior: nr:.lr:vga)

{rirurunr:drriniyuuinr:uavuunluladar:auryrr

!t;,9

t . I tl(Trt,$r4 t/ t{f[ustETzX#f i: :

e,,4,,Er='' uuilnton?1il ;! ci

dru:rtnr: rilininulinr:ruavrynluTadar:ar"rra r.,r:.*:rr-,q': iu# "i"Jarr-*"".. oiJ-u",,"r"t. ,// | /fi r'fioaao'.ab/ 1{4 iufi U( nrnrlr-r:d loaaa

6or tooul"FIn:rnr:7lnou:rurnluladar:aurvrnrfi onr:riuuiua'nan5 HTML 5 and CSS 3

6u! a6nr:!6 (ilru:oloGnr:r6druryrnlula6ar:aulufir ruas nolna".r)

drurirrinilruuinr:*ayrvrnluladar:allyrFi riryuoo'olo:lnr:ilnol:uar:auryruyr'anr:rierui

vanan: HTML 5 and CSS 3 :cra'jr{i!fi bb - eno :rlrnl b<ca ru qldnr:Guu5d:unurol

rvrnfli cirrinivruuinr:$acrrnl.fladar:aunrn Iouriniiruern.rurj:ylrruil ro<aa {t:ruiirudut.tvl

nl t1Jn1uylFuu1nfl]t'r1,,'/n1tfl nul !n:nnt5n15 9l]u1n1tQo n1:fl nu'ln't! u115fl'160: n1:v,it!l.t1Jd

!1|1?'l1U1AU tn5.tn1: n0!:11tytn t! ta ual5autflf1ty,to n15H u1J:

n { t5 u! 1l't tv,/ o tu 5 ny{a 1:6u't

o. or.rrlfrIn:rnr:ilnol:ulynluladar:alnrfirfionr:6sui a-nan: HTML 5 and CSS 3

:g ?1n1!Yl bb - 6no lJlllnt.l

n11.l,)Lll.:1l obb,c(d6't !'lyl(r'tfi ruauaaruduranvVr.ruirioua'durSormrirl)

e'sb. oul3n1!nnar{ri?!lni{n'r: ij1l.Jru sno nl (firrlrou:l nruvn:: n1:[aciyurn:);,

nnt1utI0tlulj6t,m. 01.JtitM4 1.J1.:qntUfUl Y{an0 :1,U tlJ! U!t.lLlylOt0.iQ''lU O'll.J?1.1t{U ood,ooo lJ'tyl

, A .J J J-(u!r rrauv!':uft.r dnuury fl ru)

I'

tl

th^4 t t.ttrt " out,Y.i J,tV,nn " ")J

)or.,^.r10,,.,,,""")")..y!r,,n*,r./,i.r,t/,rl r^^ns."- liuu

11 Tnt s a^A cc\ s B.rrl{ lpi,9q7,nd1^Ju)1o i',o ftr cni u^r.t*:( ) it ff.,i..,. ;,<-t t:o r - j

I Tut q e.net C r/t*,-.,-L.) q]tirurunr:a'ru"niyolSnr:uavrynldadar:arrvro

o5n't:!n H1u:on1 Fil!n1:n3in 1J<

lil a LU'i fi'iai : t1.]lCUlJ tl

({riruaran:ror:diin: orpr:vna)

;- 'i,.: : :1

(-r'-1. /lJ tlI -t 4r). I.\r ,1,Fr,6t,1q,rrlU. fu n : r I M J ^rc eq rfdl

c-dr'N J l l

v ^-r l ))

1rt'Jo o.,, 5 g-

ol/.-:-& n'-'ss

Lt-, "L'l,r roorlrir;l

4n0,,,,

In:{nr:lurJyrsnrdniGulutJ:currurj::o'riJ zsss

druiuurnraniuacul nIuIa6

uriru.iru drrinivruuinr:uacrrnldadar:aurrn

doln:ur: in:lnr:ilnau:rrrniula0-ar:au,ylnrfi onr:liauiya'nan: HTML5 and CSS3

a'nsrurradn:.:nr:( ) t.t nrrri.rrail nlrrn:vydn lqnf,linrirfln( ) 1.2 nr:f,uar! nr:yiiqlur nr:ou:"nd( / ) t.3 nr:ou:rL nr:!:vrr nr:aulr (vrrlitrnr:,zri,:rJirihnr:)( ) 1.4 n1rflnfinur nr:finrgrolrr( ) t.l nr:d'nivr::nnr: nr:dnlrli' ) t r 6rr q

| ........... .. .........

nruaaondarriuqlonraniuavnaqudtoruvrilrsra'anaqlrrifi

( / ) t.t X:rurnr:raa'nan:urualr{':rl( ) 1.2 airlnrur{!ui{yr.risrfir,{rayirvrrl( ) 1.3 r3vr:l'nnr:ltl:n( )1.a fizuurrinFnuruavrirufirrlririh:rivrurn:lquriiiqrurir uaviuion"lfiuJrrir( / ) 1.5 rirulrri'ngnlyito{unalfl :ylr.r nr:fi nur n:cniu( ) t.6 'lfruinr:itrnr:uria-.:nl riiaairluavninrrro16 nadnra'nrn:ugiovrorfiu.r( ) 1.z afualuuavfruarurrldrurir:1fialirulo::l uac:hurf,.i[rndor]( ) t.s rirllr{ruida/ur"n n::l/duj:c6uii rt{u:rur nr: rfi o!:vlorrirtlrr nitd( ) t.9 riluur{iuavrirEryronorrintr{6'nrilriuraa

riiuftnsouln:rnr: zirriniys!inr:uaclynluladar:aunrn !vrirardurynlttla6:rrtl.lnavt531]n:

u'ryirln:lnr: urrarrryit:rn:ni rfitrufir:oi firir!:s nr:riru"nivru!3nr: Iav ry] nluladar :au rrn

rxn'ngn: HTML5 and CSS3

-

yannl:ua!tuqfla

rvnlula dlula nfln ofri nrrr rirrydrl! aeir.::r o 15': lnuravirvodrrOr'hlnrarrirSoraorfir rnoi filuin lfudld'nar u!r ri!.ir!virr oln r:rirruluuar s a r rri rrdr uay riluold :c nou1,!nr:rir:.riinrJ:cdril nr:dnurrrnllf,lrrd'run o!fir rnoflugtJuul r6:Lfiuiu

oonrilu 2 rirur,ta'n6onrrrinrrdrusriouri [ac11rrdruro.!,io{uri fittu noonorndl]Inut'ultlrac:c!!nr:rir.,uirirsreTrro.rornuf.!f,ooirl1 dio't,trjruo dluri'0.: n a r oarolv'lrjrfio.ryroln orovirvn {:Lqnar n:ii.:ilanral6'hi.rruno!fi?rnoi!r ndu uriu-{rrnU:ca! nr:ni yinuc uac

nrurirrrrphnr:l,ti.rruyad'ra u,l4irrl zirrinivrs!inr:rytnluladar:alrlrt 6l o'liunr:o'qln:n ni:ou:rJ

tvrnldadar:arrvrarfi anr:riouf ya-n6nt HTML5 and cSS3 loeto-nal::rbi'nluLiyrrrirl- t3 :nolvr-llnoivr".ryrr.:ror4drrrirracar5nurfhdnuruv,ualnr:1{lrurio.l6'l rrav16'ilanraff nldtrl

n a r fi r rn o it a r q n a r n : :r r fi lir fi n n : :r o'u 1 rd o rjr n r r rLrr ivrtl d'hJldl : g n o ! vr-n uclu n r :!n!fl .:11lt}lA t rnfl u:uavrdn'r11

ioqrJ:rarr{J-1. rn-onTruurnrrlf nrtrarlr:n lracy"nuvto.:uAar n:yrlnolfit tn oflrii'urjo nr:,..1 ,

rua u!uua.:ro'rLyrn ru ta6616'orinrufn'lrlaru:nldnr!!'rnrn.ru2. rfi orlrnru.i3rnnr:fl nol:uriiurJ:rrirulr:vwmunorLfi rrnaito,:rurivrrLrii'Eili

!u:uayl5n114U.l1Ju [avy]1]ar]u0qta!0^J .)J. ryioauua!! tl,tuna'1fl:ytnnu!!An.:n?'l!41:Jit0 [avn']'tuona:i!a::n lo0U1.ltn!yl

iirmu 22 n!<iuru 6 Ftu

il'ruru 2 A1)

nq'uulrulra tntrd'u go nu rJ:vnoudrtr

,Jt?14!t:J

?'!1U1nt

aoruytrn'rliurru

qurlnr:riuufdl sn!ro.r r rrfi i iirrinivrar3nr:Iac rynI!Ia 6ar:a!ryrnuvrir ura'urynlda6:rr:l.r nar:vun:

::ricrrarrirrfiltr.lru :cy'irriufi 26-30 ilnnrJ 2555

ua-nqn: HTML5 and CSS3

-

r\,'-')

v "^tunaunl:91'1tut.l.t1u

n0ntt t zsss

'l.4n. IJ.R I .u y{. a !.u n.n a.a n.u

r. l:vtllrruaru -

z. d'nrirln:':nliI

e. rr:oln:.:nr:tn'ataou:i6 I

+. rirridn:rnr: I

s. tJ:crillrJa1a:rnr: a -

o. fiqnrunr:drn'luflJl,ilil:vIaui -

I

ru::rrru t26,947 !1vt (vdluauaarvfiuvnriuuiriosdtur6ouryd,ru)

tindrunrnri!.rrl!:vlrru laH6n riair5nnr:finurdruinarflraniuavrflnlulad w:raiirt',durirl{o'rsl,rinrurnruarrnr:finur In:rnr:nr:r{ruurnr:d'onr:6nurnuqvrooraninr:ninrur

uvrinura'u In:lnr:fl nau:rilrnlr.iladar':aurvrnuyl'an1rGuui

1. nlnauuvtu 84,OOO ,ty'

rirnorirryuirurn:muuon (7tr.J.x5 il x 1,200 !1 x2nt,l)

z. aililaaa 30,000 ulvl({rdrou:lrravnruvn::rnr:n'rriulru l'rurr 30 al)- riroryr:'jrr (10 io x 30 n1,l x 25 !1r) 7,500 Atr,- n1o'r1r1:na1i?n (5 !o x 30 nu x 150 1Jly) 22,500 // 1J1yl

:. ririao 72,947 u'1yt /,:trtfod, 126,9 47 ulyt /rafi I uauaa lrlrfi uranfiuuiriotrd3u ri ouuriru)

14ltrs!r1E roo"?roeuiiluFi{{druyln:runr:Iaciirurunr.rlarurinijrsnur,rriufrlditoq:i6

i-

nahqn: HTML5 and CSS3

-

:'tga!tauo anantn"r:un0ullr

. riluva'nqn:nr:yriruur:vlumnluladar:aumnrfionr:riauf r,rd'n4n: HTML5 and css3

rioyrua'nan:l:c n oud'? u

iui'uvrifi 26 filna:l 2555

Modute 1 : Getting Started

- Anatomy of HTN,4L5 document

- HTML terminology and concepts

- What's new in HTML5

- Web browser support

Modul.e 2 : Using HTML5 Tag

- Global Attributes

- Content model categories

- Document metadata and scripting elements

riud'.rnr:fi 27 trlnau 2sss

Modul.e 2 : Using HTML5 Tag

- Document sectioning elements

- Content grouping elements

- Text-Level semantic elements

- Tabutar data elements

- From elements

- Embedded content elements

- lnteractive elements

iu4s d za fiurnr zss5

Module 3 : HTML5 Semantics

- HTML5 outtine

- Creating an outline using sectioning content- Headers and footers

- Viewing HTML5 outllnes

Modu(e 4: Form Mastery

- Form markup

- Gathering input

- VaLidating and submitting forms

F r'll

un-nqn: HTML5 and CSS3

'r"ulrqr.rau6 d zg filnau zsssModute 4: Form Mastery

- Other common input element attributes

- Other form controts

- Adding structure with fited set and Labels

- Form usabilit/

Modute 5 : Multimedia

- lmage maps

- Embedding HTML

- Video

- Audio

ilqnifi lo fiurnl 2555

Modute 6: C5S3

- CSS3 Modute

- Using CSS

- Background or borders

- Color

Modute 7 : Using Interactive and HTMLs APts

- Using JavaScript

- Building a custom video controlter

- Scripted 2D Canvas API

- Drag-and-dropoperations

t\r'./'1

va-n6n: HTML5 and CSS3

-

ri1i41.lon1:a!:rJ HTML5 and CSS3

26 filJ1nrr 2555

3.30- 10.30 Modute 1 : Getting Started

Anatomy of HTML5 document

HTML terminology and concepts ,s.

10.30- 12.00 What's new in HTML5

Web browser support

12.00 - 13.00 },in :"urJ :vv r uor ur r n a r.:ir.r

13.0 - 14.30 Vodute 2 : Using HTML5 Tag

GtobaI Attributes

Content modet categories

14.30 - 16.30 )ocument metadata and scriptlng elements

27 it:uTu 2555 tu0'r41

3.30 - 10.30 Modute 2 : Using HTML5 Tag

Document sectioning e[ements

Content grouping elements

10.30- 12.00 Text-LeveI semantic elements

12.00 - 13.00 |4 n:uu:vyt't1.,10'tv]tna1.!111

13.00 - 14.30 Tabutar data etements

From eLements

14.30- 16.30 Embedded content eLements

Interactlve etements

28 fiuin 2555z

lua]t1

3.30 - 10.30 Modute 3 : HTML5 Semantics

HTML5 outline

Creating an outline using sectioning content

10.30- 12.00 Headers and footers

Viewing HTML5 outlines

12.00 - 13.00 tna't.r?u

13.00 - 14.30 Module 4: Form Mastery

Form markup

Gathering input

14.30 - 16.30 VaLidatina and submittinq forms

i*

rn"nqn: HTML5 and CSS3

-

Other common input e[ement attributes

Other form contro[s

Adding structure with fiLed set and Labets

Form usability

na't':?u

3.00 - 14.30

lmage maps

Embedding HTML

Video

Audio

CSS3 Modute

Using CSS

0.31- 12.00 Background or borders

Cotor

:na1{'tu

3.00 - 14.30 7 : Using Interactive and HTML5 APLs

Using JavaScript

Buitding a custom video controller

4.31- 16.30 Scripted 2D Canvas API

Drag-and-drop operations

r4rl'teJluq : dTaunnr:otofin,: i![ 6u n1 n?1un4!1cdtJ

n'l: :crfiur{aTot{n1:

1. n1:a'itnnn't:ninliid?!d?!2. rirulurJ:yriunaln:rnr:rfi ora5nduln:lnr:g. ri'r6'r-nduGll fll 1i1uu{ir?i1o!:ilririo un.jrio aay 80 ra{ rilurll I, - :- -+. nhfrrlodruqrunl'r qluirilnr:finol:rinruvr-rvro'hhn1:fino!r nud.:dririrn.jr

3.50

5. n-rdin6'rurrar nlro!::lrain*un1tL'hrrarfi rirurn

vnh6n: HTML5 and CSS3

fr-

ruafinro'irorkiir1. !na1n:al.n:nyrTruur:vuu.lrlro.rvriru,rrtlld'odr.rfirJ:cirBnrtl

2. ra3!ai1ia!::n!vrol:ryrirtJra"udrurynluladar:aurlrn

3. liorr-r::srnrnnr:(anr duu6uriLr.lorrin:n'itoyizuurdorrin:uvirnr:Goui

n1l:1u{'luHa

:ru{r!Hant:n'r ri!,i1r.rn1rrmui'ru.:r!dnorult'ruruuacuarldtvrn [acd.i:r0,rr!of!,rl .a!!l tu uJ0 LnSlnl l [a'] ra:n

,/ v, /.-. //hA' "'fu:t-'al{0...................,.... .firauoln:.lnr.:

(rrrarrrrt:rn:ni rfi s:ur6'r)

Iarda....................... ....(............................ra'ryrirr,t rurru

{{dronran:ror:riir-n: or:lr:cna)

na"ngn: HTML5 and CSS3

St=

29-FEB-201 2 09143 P, 0l

r0nt61| 0!{nt{rltrff0 lX' OmCr ruptll4/to i l.|rl'ilnr 0o/l $0n ! o.|'lllil||n{ 4/lo Ed nmlfumh|.nl a0l1 nltnth'nhi|lt lo'd'

!!1.*t lnn rlrrn$rt nl0uil ltu.lll.rl( B.nll(!d t'ntkoh loS4o

lii^lil o! "'

ctn' l?i'r ot""xo

lurf,gaflnvq'rddil

,/ -Jr-Dn ldrollnl ?1|n / Date '.

rEsB {dtranrr drrininuuinr:un:rn*I*Ir0nr:s*rnn nrird z erge :

),n8a lrn11t4tll8ullltlllLnu3llri{rnrl:1.a1

rirr*n6*r'rar oo i1t

drr$ndotolnrol* ts intiolrlanr:drr:rtu - iunr:jurjrzrin - fl

!9nt:trur{tla g (serrer)-.--.-..--..-...---.

rmfilurd$ofla1 : ossz

!0|li80F118$!llB

.\(gliu'rl

'ln(utarrn:imoi lli:lt)

rirnrhu rnfir

lilrr-ufinem

lran:rfiaai*drDescrlptlon

tll{?}t hlt?o

Qudntlty

TlFrdo lBUnll P ce

tlilt?lJAmouft

tlt;

iil;

ft{'ll nnor4 rooo q"ossor

lrrrJdr urr zs rnr

hjrnarlrriuoin tr dtrrt

5 nriot

3 tnlaI ndor

+ ufilI rn

r ndor

l ndtl

: dru

I ulrt

r9t,00

140.fl)

8E0.m

?5.00

220.00

509.00

850.00

J1J.00

51.O0

2,475.00

1,120.00

2,640.00

t00.00

660.00

1,018.00

3,400.00

230.00

57-00

llrlirrnr$xnitil

1e,1oo.oo

847.OO

12,947,OO

:'lufianrusn::!nr:In:rnr:?lnau::rrrnlulaEar:aurvrnrrion'r:Guufd:cririj bddd

uan6n: HTML 5 and CSS 3

:cil'irriufi ub-sro fiurn! bddd r?a,t od.g|o - ob.6no u.

ru vlolau:unorfirrnoi rfr', drriniyuuinr:rlacrylnlula6ar:aurro

vl t0 - dna 9l'l l[1ru{a'1u!ago

14ul u t14n

[?41 od.mo -ob.6noU.

HlJ?Ufl1an5',tQ1:UlJ',tfl: 01:?1tyna ff ruranr:ailiniyauinr:

uavrrnl adar:auryrpl

b ururvirTu firritn:arn :ol{3irur u nr:drl"niviuuin r:uavurnlula6ar:arryrn

m !.6. doun;ur yrailo'u li:rarirrirfnrl{ri1r./? unr:

c urrqn"ryryr fi?5ol:riu rdrrarirduErar:rruri'rlldrurrg n r:u.a. iti rioriu e e J ^ .tu

r0'ryu'r11u:y1:.1'tuyt? LlJ

urrfrg'linri fir,rti'ln:arnv v ) - 'thtn1 !'tyt!ly"t:.11!y't[u

:ruiorirdrou:!1R:lnr:f,lnou:uryrnIulaEar:auryrnrdonr:r3uuirj:cil'rtl uaea

r4andnr HTML 5 and CSS 3

:cil'ir{iufl' bb-mo fiuln bddd [?a1 od.6no - ob.mo u.

ru #a.rou:lnoufi rrnai "fu u tirrinivruu3nr:uavrynlulaEaltaurvifl

yl go - 6nan1u14U.! a'tu!a{a

14111U [1,tn

[?A1oC.g1o-ob,g|oU.

n su su3lr r: o: fi o

o oror:tin:Fo dur.n 01n1:u

n ru ; rvr nlu1a s' n u n ::l n ra n ib rru!fi Irfim urumu:a r11y,{:a

drrind.:railitlrnr:ttac{ruyyrfi uu

d ulunrrurl udcrra un?t'rn't:finu't

rrutiui or-uqirurJ un?t'tn1:finu1

drriniyau3nr:LravryrnTuTadarraulya

u.a. ryis:rn:ni rfit:rui'.: :- oi deir !r u n r :dr fni y u13 nr :uavtlnluladarraurtn

6't uruluiu 14Lrufln rinitrnr:noufilnoi

ururjrllnri :"nuniuriura rinimnr:nolfirrmoi

ur Elrrrldn aw:ninTslurfio uhitrnr:norfi'llnai

oo urua nrf na:r:r:rni u"nitrnr:nolfi'lrsroi

6)6) ururLa':a::ri fiurinri fnimnr:nalfirrnoi

ob u.a. r-tqr.ra lorroirg fnitrnr:nolfi'lrnoi

.r lururtrlrTnd nrrfior fnimnr:nolfirrnoi

o< lrrurubnrr{ nr:ciou fni'urnrrnolfirlnoi

oa lrruuviru::d lln:anad u'nitrnr:nolfirrnoi

ob 1t'tu1,Lt15tj .i.utudlt5Ro u"nitrnr:nrorfirrnoi

os, !1uq:ql1o a:vufrr rinitrnr:no:Lfirrnoi

od uru!{na tucrjr

r.a. GrUqj l,unqnr'lnora

fnitrnr:nolfirrnoio6< fnimnr:nolfi':rsroi

bo tlruaro: r,i:li'uy:r In M11!:r41 :.1']lJt? hJ

bo ulunr:in innruislrj e v i ^ .i,t0114u'tytu:r41:n1Ut? !u

t9|o uruyr"al{rud rorourlil\lari tdlarirfiuiyrxrurJrhj

1u*riryiuRu

L,,-

t*tt.?f)."n..n./.. ..... Y..11..f ?ctgruar

r...b,,.fr . c.df.* N.....Y. ?- nov.,....,..,, -.*=*l;:.....,......... gruFu

{a$trtdhrnln1t

It

I

I

I

II

I

o-l r^^"rol",

. rcry x Ytrau xl-s-L1h --'<Joao I

bYo X ! o,q y}-S ulh' > /5, Ig ff , lau x l^\- urrl':, t-oo J

Y-:so)

nrt0#lu Ygsa

lu*rfrgiutiu-.--. v

rvil, 3.A.....aau... #..H. n .{ -,,.., n. ;..... h I :r J

l/,|!rirrrrillr",nriRu 6tnun,rrftlijd

, . lnr{r...)f:F,1!..n.H.h -f'f$ "itl*Ud 'f-

i'ur.,.........,..l?.*,Fi,- " fi. {a**'M.O..d',..'....+stta.',"..'.{.s.!.!'?.n'.""

IC/ "' .- \ L.-"

tLs/q,SO\-,^, Iirsrufi*,......;N.u.:':

r*qCar,€alD. fJ.nt ... . tff..S. eiQf" n"r., )i,. fi ?. sY.l..g-bln* ..ffig7f",.,....,....-.,...,...i-=-k;a-....{,{ruFr

n!n1t lmfru,?tt

fr v| ^r.,*lnnr?;i

| .5 Y , * e,q rl:sr, ulh :

| * S: x I a'< K r5o urh=

+S6- x lt\ L{ x l5-o urh =

Ylooo)

.IJL'

b00

0 e nv,)

n$0!Rs 9'Q r, vr

no. lllts Or! eaD

Irn!.D B!o- lly'i.hll 1 i.t. 2505D.r ct&n 1 Oct. 1962,tllarr!ri!

I r.i-.nn i.!F |r.{i

1.1\ rinnjt:irn'fl.|:c'ril Thai Nationar ID car.d(Vt ffiTlg*s45floozsssz6

--dl;.'rr*dF l|.d, Oel::gf :.tZaag

BORA-26-04

.3 t.Ds T tu( zt r.."t zn, f) f/-Ar \ / s-/ \r' v

irur.....'...."t

Yn lf

lfifurltnrrrilhunrrRu frnsmtfilid

1u*rfryfirriu" : -: --:--'--" " {.^^,, c (-c.

ttvil. 3.?.......1fnt * if.].fl #.'.,,..'n.r...t-r..j jq--g- r ( |

"/rnr{r...xr.,{-}..$-n.y-11..,......fji.n/-r.{-o-...."'....ql,,t* "r1...'!3'.1.,1":q-211.......-..,.....,..r.*.,...,....U1'1.i.tn.......,....'.,..{'*r{r."....4'li#..,.....',.

. tlaolot...*iY..."!i41... 4..... gu rru(-+..->- Y '1 c.t

-r lfrV{ tJ 6W C,4Yi lfcr|\.r.r. ,,t,,rr....r,..-..r.,. - - - . . . . . . . . . . , . /

P---<-"-"': '- " """"""""""""""""fi'tuFu

n8n1t {mnuf,r

t\h14 hffl ncf

([V $fu.xsovr trlLocrrrln)

'')

tf L,ooo1

nnr0s8u 4-L c,oc

lufifryfutlu

Llltrfi lrrnrlT unrrfiu ft nurntftlid

t*do1.........i.f:-.il:.'{$........{ru*r, lr,sr lt-;,"/n-i(....: .--'-!.'.....?.LL{r.i t}.......... ...J

,...... .-...*....-..firunu

N(omr\.rrr\r cY ljlr..k5e 4 X l)Loo u!v1 +7r

nnr0nRl 4t ooo

i, ou.nor.^t, t{fl riliniyru!inr: uav rrnllla 6ar:au ryrn

rr,triyora"urrnIuIa6:rtunan:yrn:AtallylL?e1l nl,lLu1,I1 oomoo

bdddL/n,".*,,Gol .uor0rytlnarn:rtluiyrurn:

riu! lrultns'er d'unirser

f,rfirillrd'ru In:lnrrol:l ya"n{n: HTML5 and CSS 3 o.rlrl o ro

dr uairriniv ur.ri n1i rla r lvlnhladal:au lyrn ! riyura-ur nIula d:rrrr na yr:vu n:1d'rirrauno"ofinol:dn:rnr:flnau:lrvrnluladar:arrynr,n'onr:Guui ila'nan5 HTML5 and css r rfioliunr:vrlorurn"nunrn,uownarn:lmimursi'uulnlulad:rrlnna :v!n: o.'rriu rirl-niyuuinr:uavrynIuIa6_allarvtn 6r?oriryvirr 6.:riJu{inrufnllalLr:nllihi urn:u::urult'n-!aiujrilnr:al:rln:rnr:flnor:rrvnluladar:aurmnrdonr:Geru! r,la-n4n: HTML5 and csss rcu.jr{ilrfi tou-o.o fiurnr rreaa!?41 d.6no-ob.sno lJ. ru ri'O.lOU:lnO:rfrf rnOi tiUrurit ura"u ry nIuIad:rtrLlnayi:vun: lylrni

to eiliniy uui nr: ua v ryinlula eJ'a1ta! n1fl

.r'^0.i t: uu!'t t1,[ 0 ylt,] u tta v fr o 15 fu 1

touao,:nrrluTu6o

({tirunran:rlr:dfir"n: ortrr:vna)

{o'rlr unr:ailiniruuinr:$a c ryr nIuIa dar.:au ura

rilinrruridrurunr:Iyr:. o tobat G(oo€( rio btrtbb-bsrc(ci

It:ar: o bbdo gic(oc(

'-'/ +ort-'--.t to

tt* '{l

fi as .,aa^.'v/ 94

\r/q,"-,*,, .".*rio'r tortryunarn:rfluiyenn:

tSuu 1t'tuu]5't tttfi:un

: J'd.:td$rdtu ln:lnr:ou:l a"nant HTML5 and CSS 3 dru.:u o !o

dr uzirriniv ulinr: rra vrvrnfuIa 6a1ra! 111fi uurilr erra-u rlrnlula6:rr:r{nayr:cun:1d'riruun,i'ofinou:dn:rnr:inor:rmnluladar:aurvrnrdonr:6uui ila'ndn: HTML5 and css a rfiortlrnr:riruurn'nun11rto.runarn:lvrirura'atvrnlulad:rr!{nayrrvr.iot ri'rriu riru-nivruuinr:ruacrynlulad-alsaurvlpr 6rr_or0rgviru drrtJu{inrufnrualLr:nlrriluiyurnr!::uru'lfn-!firdriunr:ou::LIn:rnr:ilnol:rrvrnluladar:arrv'qrdonr:liouf ua-n4n: HTML5 and css: :vy.jr.:iulr! bb-mo ilrlnrJ bddd!?ar d.mo-.,b.mo !. fi"l frorou:rnorLfi':rnoi ,u'u u airrinineJ!inr: uav rr nIula dar:a urvrn! r,t r i yr

eJ r #u t r nI !I a eJ' : r I rJ.: n a n : v u n : ryr n n i6rGuu:Lrrfi olr:rluavfi or:rur

rouanlnruriu6a

/(fidrusraor:rnr:Jir"n: orpr:vna)

fidrtlr u nr:a'rfni uuinr :$a c r nlula u'ar :au ryln

a'rfn':rufrdrur Einr:

Iv:. o bbato c(ooc( oio bstbb-b6.tc(cl

It:ar: o tobdo e.r,c(oc(

a'lin?yruuinr :ua vrunlula dar:aurnnrL y ri il u r a"u r'r1 nIuIa d :r r!,: n a yi : c ! n :Ala'llyll?fl: n5{lytll1 oomoo

:ru6o{rdrauruTn:rnr:ilnou:lrvrnlula6ar:auryrnrdanr:riuufiJr:iirfl uaea

uanAn: HTML 5 and CSS 3

:vr,l'ir.:iufi us fiurnl bddd r?a,t od.mo - 6b..no u.

or rio.rou:unoufirrnoi rYu u drrininuu3nr:ua:ryrnlula6al:duryrf,

vl l,0 - dnasirur,tilr aruiofio

141t1U ! 9l

l2al oC,g|o-ob.oo !.1.

nruluSur:q:fi0

o!0'li'l;uyi:nu o=ltT oro r:ti r"l

n rucrilnluladniln::laraor{

b uru!6 Iyrfi (nJt^ntYos^, .=A,6n rraijTu:a ryry,{ra "..,1 trl r M:r.l jlll:;*1i? [j

cilinrir raiui gr nr:*avrruuvrfi uu

!1onr fl r{vrra un?t'tfl1lfina,t ,J.17"'\-.rrersiud r'r''uqiorrJ un?g1n'ltnnu'l

, |'/drfniyruu3nr:uavruoluladar:auryn I

r.a. rnr:rn:ni rfir:urir :o': riiirur u n r:rir fnilr ul3 nr:

tuavrunl adarrauryn

st urerlu6u uurrrr.r u"nitrnr:nolfirrnoi ,4"2:rirotjrl:rnrj inroriur.fiura rinitrnr:no:rfirlnof I

urarrrrdn a:11:nirinurfio rhitr nr:no:rfirrnoi , .(. -:.-,/\

oo uruallnt{ naor:r:lni rinitr nr:nro:rfirrnoi .( a; rJl t i.^,J1u[aiat:ri sr'urind rinitrnr:norifirrnoi /ln-ro'

ob r.a. lqla Inro3ry riniunr:nolfitrnai4flr- -m lururtrrn"nd nrrfio fnisrnr:no!firrnoi ,,,?b,

o< lr.rrunitvrlr{ nr:vrioEl u"nirrnr:nolfirrnoi njr.*'. I

oa l!ruul,{ru::d run:aqari u"nigrnr:norJfirrnoi ,,.,^a t-Sou luruturirJ {1!UAU0ni rinitrnr:nrolfi.:rnoi

os't luluq:qyrd a:vu6'r rinitrnr:no:Lfirtoroi 1

l,\ ,frtu:Lrna tuvrjr

u.a. GrUnj ltnonr'lyrara

fnimnr:nolfirrnoioc( rinitrnr:norLfirrnoi Ir

bo u1ud1n: yl::.roiuy:tr i'r urir fi u3rar :.: r uvr-rhj {=-.--l -'\rFi ! \rn\i --

bo !run::in iooruinni rdrr.rrirfi uBrar:lruri'rhJ &r>fS".cr9|o !1uyr"flfirud rrrtourlnpari td'r urir fi u3yr :.r r r yr'rhj i6{r\->j

A ov 4 d:luiari[i]'rau: n5{fl 'uinau:!rvrnlulaEdl:durvrfl nlonr:riauiil:cdrfl uccc

ildndnr HTML 5 and CSS 3

, witcfi?1.!?U bE llu'lntl bddd l?a1 od.oo - ob.mo U.

'Z'fu a!0u:llRolry{?tno: gu b d'lufl?vttJUtnl:ttavt n tu lagd'ltdutytf,

1l !0 - dna9llttvun a1ull01,o

14 tJ't u t14 9t

l?41 oC.oo-ob.oo 'U.

6fuJUtt4'l:6tno

o!'a1015eJ?r5nn 0u1't') 0141: u itL /

n fur!rn1uTaE niln:r!616eri

b U1U5T] LflTI ./\, Qi,.i.l t1 \ I :.r r o,4': l &tu

m l]luinusd rry/i6 ,r v3s -.,-irI \ I (1rlh w: 0 1J i'u.;.t I t ,11( t"

dru"ndrrailimn'rlrac{1u v[fi du

u1unttufi toy$a 1.rfl1t1n'r tft n v1 d-t;7^rrlutiuri fi'uainni u n ?11 n'r: fl fllr1 ,,i1-rirrinivrsu3nrrtta*ynlulaEd']rauryr Fl

!.a. r?'J1J5'rnioi lrlg:uri': :0nfl 0''tu? un1:6't! n?ylil!: n1l ./^//7'L-

ttactvln u LaualSdutytfi

o uruluBu ultto{ un?tlnltnatJvntFt0S .4'2^urulrtrLn{ iflln:"uriun u n ? 11 n 1: a o:J'!,'/? tfl 0l

Ll'lul!'t':an a!!5fuy{9!u'tnn r.lfl'ltJl n15n 0!?{2 L0l0: \(rq:\oo !'lua:Inr naor:r:rni un?{'rn15no!v{?tq05 ?, l)i./J

o6) uluuana:tn n!'t:nu un?t'tnltno:Jv{?tn0: /.r:2<,t/

ob u.d. !q!a lnroiry 1..ln?11n1:no!vr?tuo5

"Lo6rl

-.!lt'tuttlnfino n{tnu !n?t1n't:noufl?tfl0t %,1-6d. 11 1 U fU $l'{.: fi n1:v1J0 u un?t1n15no!yr?t9r0:

.tQl-F r^

od ululnlfu:5o tuntanafu r.Jn?t1n15no!yt?tn0t xr..,ArqJ-

ob{r1.t'tutu101j .11!J!autn0 r.Jn?xln15n0!yt?tn0t

osy' !1Ua:U116 A5v(n? u n? !'r n't t n 0 tJ 1,{'t to 0 5 fr;r]1uu{na luv'lJ?

!.a. l3rgrf ltnqouh,iara

!n?t'rn't:n0!yi?tn0: ;$-fr---o6( fnitrnr:norfirrnof h'bo 'LlluA',tn: fl::.t01jr411

y y d a :,\,li't14u't'11lJ:vl't:.:'tuvt1 L1J

I6r?> to'-bo !1un:l1n oFrq'tu?9lrll

, v d a Jt,t0114Lt1vnJ5v'r:{lUvr? tlJ

t9|o uruvr"ayrYnni rotoully,ruariv v ) - Jq,

t0'l YU'lYlU:141 t 'l'l1l Yl? LIJ ;\{\J

:rufiorirrirou:!In:lnr:ilnou:lryrnluladar:auryrnrfionr:6uuid:viirt u<cc

vrdn6n: HTML 5 and CSS 3

bddd t?al od.mo - ob.6no U.

drrinireru3nr:uacr nlula6ar:auryn

:c14?1.1',lUyl bd llu'tn1l

t!tu l40.t0utuna!y{?tq0: 1Ju b

vl flo - ana9l1t[141J.! alu!0tJ0

14!1U tl4tltlAl od,oo-ob.oo U.

nsucuiur:o:fi0

o o 1 n't: u115 n fl ou?J1? 010'1: u erLnrusr nlula6nyn::!nrasri

b lJ'tuosr Lvtyi .1Ar,fr,."r?r:'r :#m urutfiu:a t'1114:a i/'',ui,i.ui*rr,,nfJJ ^rlrllcSI

drrinei.rrai:ritrnr:uac.rru ctfi uu

!1Un tfuPt t0vIa un?t'tn't5finu1 d .Tk----1.J',rU1:un n ua? 9Ir1-,1 rinitrnr:finur

ritiniuauSnr*ravr RTuIa661:au!yn

u.a. u,lr:rn:nj rfi,u:urir l:olfieiru,:onr:dljnilrulinr:n

/21-IaYly]n LulauatSautylfl

si uruloBu 14UtL9l.t u"nigrnr:nolfirrnoi .4, )-\ururjrlLnri :"nun:"urfiura fnigrnr:no:Lfirrnoi

C l"u-

rrurtrrin arLrg:nininrurfio fnitrnr:no!fi'lrstoi Lfrc!I.ltl6)0 IU1UA!Ln.IJ1] na5l:1:!nl !n?t'r fl ''t5n 0!y'/1 ln 0 5 {rf n ''f

r. lurunara::ri fiurind !nlg]n15n0!yi?tgto:tl.:r-rt(/

ob lr.a. lqla lotroitX !n?t1n1:n0:Jy{?tFl0:",$"

"r lururtrrdnd nrrfio rinitrnr:no:Lfirunoi -H.-od uranigrrr{ nr:cfiou fnitrnr:nolfirrnoi i{

nJ i '^'.>

oa lr.rruunru::d runrdqad lhitrnr:nolfi':rnoi q.nr>fulugu'rolj luualEdo fnimnr:noufirunoi I i.t u,/

o6d !1UA:Uyt6 a:yu6r rinitrnr:nolfirlnoi ifiiod ururrna tuvrjr

r.a. liryqj Isnandnnra

fnitrnr:nallfi?rsroi ;w.,-^oc( !n?t'r n1 :n0:.i'y{? tn0 : tr)bo !1ualn5 l,l:troulr:r v e ) - .:, c

|'0114!'t ytlJ: y't I {'t uyl? t! /*- "- It/i\i N.|i-bo urun::in innrlirini In 1v! 1vtlJ t lr'r: { 1!'!1? llJ .,trP,-'r019 Lr'rul1nyt9ltu to?,du.t!l.{!au rn 1r4!'t yllJ:v'15.:'tLJyt? LU 'fr"{,X-l

:ruio{rdrou:r1n:lnr:ilnou:nryrnlulaEar:aurvrnrfi onr:6uuirl:vdrfl u<ac

udnan: HTML 5 and CSS 3

te.t:31421{?Uyl bc( lluln! bddd l?a1 od.qlo - ob.oo U.

rlru iio{ourlnorJfr':rnai riu u drfnivrsuSnr:uacrytnlulada,t:dulytfi

vl to - 6na9t't u14u{ a1u!0{a

141.t'l u t14 tll?41 od.c|o-ob,oo 'll.

n JUfll1td:na!01015U1't:nO 0!11? 01n1:u ff'rt

n suyryrnluladnun:rr|f, 'ld n {

b lJlUfFl LY'{Yrl ,{n\Jlr^f.l^.;r &5n irlutnu:d rytli,{5a { I lrtyl'rr,r:J.),.r,,1., I 1.,, itd il Qllcrl

drrindlraiuisrnr:uac.iru crfi au

ulunlturi r{v*a un?11n1:nnu1 J. PTt -urutilri ol'uaiori 'unt11n1:finul ,1::14riT rinivruu3nr:ua;rynluladar:auryn

u.a. rnr:rn:ni rfir:uri: r o.r riiil u? o n15 a'1rini yr et ui n r: /2"--:-

llav ty] F1 Lu 16 uaT :au tyl fi

6't u1uLU5L/ lrurrnd rinitrnr:narLfirrnoi ,t j'2u1u!1fun{ inuniuriurn rinitrnr:norfirrnoi CW

urElttr?dn a:.J!:niilTru!1nn un?t1n't5n0:J ?tnol r.{,t;:1oo uruallntf nagr:r:rni fnitrnr:norLfi?rsroi S tfrr(

urulra{a::ri fiurind unlt'tnl5n0!1/?19t0: /xii-ttob l.r.d. !q:Ja Inro3ry un'rt'rn15n0!'y,t?tn0t .4'.

o5n-1

u'r utlJ?.inno n,:Lflo !n?t1n1tn0l.J1'{?Ino: 46-od uruniSr.:r{ nr:vriou un?11n1:n0!Yt?tFro5 f. i 'r-.2 :

r.rltJuyitu:td tw:anad fnitrnr:norLfirrnoi xr"rrfob J.1l'lutJu'r61j .r1'JU6!0n0 un?t'tn1lfiouYi?tn05 ,ft8/

oG'i ulua:uylo a:vtti'r u"nitrnr:nolfi':rnoi 4,^@d urullna tuctT:

l.a. iliqnj ltnqollnora

un?t't n't lno yl? tgt o: + rli

6'C\ !n?t'tfl1tno!'yi?tno: J-'t9o !1ua1nr n:lony:t v v i - .]N

L0'lv1t't yt1J:y15.r'rL1yr? LU

bo uran::€n innruiruil r e; a .irtn l 14!'tvrlJ:1r 15.t 11.111? LrJ q))-f,|"7

bb rrari'ayizuJ rororrlnlati la 114u1'r1lJ:141 :n1Uyll llj \{ a--(

:rado{rdrou:lIn:.rnr:fl nau:rrvrnlu1a6ar:aurvrnrdonr:6uufiJ::driJ ua<a

udnan: HTML 5 and CSS 3

tc 1'1.:?Uv1 d|o !!1R! bddd llal od.mo - 6b.$o U-

t!ru folauilnourfuroroi du u rirriniuuuinr:rracryrnlula6ar:aurfln

vl {a - ana9t'l u14u{ alg o?0

t4ll'l u [14 9t

l'lA1 od.oo-ob.glo U.

nrucui r:s:fio

o!0'li'15u1{tnu oLll't? 0101t u 0r/

n ruslrnlllaAnilnr::J rll6trli

b !1ufn LttYl li'hrn:'d.,<tc---*-'-<l

6n uruiflu:a Lyn{16 .r -J, ^ ,-\,!i ju.'{)h !J 4,. )t.,,;: I {ll CJ I

airrindr reili tnn r:ua c.rruyrcrfi eru

ulunt FI tovtta 1]n?t'tn1tflnlg't J'wuLJ'l0gl!n nua?olu un?t1n1tnnts'l

..'/''i7'-"

a'rrinifl uuinr:uacrylaTulaEiar:aur n

r.a. ryir:rn:ni rfir:ruir 50,itJ0't1l?un15a1!n? u!In15

ttavtllF] l1.l Lau a15a! rylfl

c.i u'lu LUou yljtro,] rinitrnr:norfirrnoi 4^d urslrlrlnd :"nrniuriura !n?1'tn't:no:Jlt?Lno: lr

!1utgT?an alJltflyi0lulfln !n?t'rn1tn0!fl?tero5

oo ulua]]Ln1! na51:15tJf_ !n'lt1n1:a0!1111910: t,l,aloo uruuara::d fiurinri !n?t1n15n0!vr?tfl05 /F,hsjal

ob !.a. uq:ra Inroiry !n?t'tn'15n0!y{?tnot .io6n

-1ulutlj?.iftno nnrflo un?11n't5na! ?tnot .i6---od ulufu5y'tif1 n153u0u !n?t'1fl't:no yt?[uot

6)d ulu!1!6u5t0 [Un:6nA !n?11nlln0!Yl?tq 0: w^*ttfob J.1J1gtJU',r61J .i',t'.]udu5nQ un?t1n1tn0:Jl,t?tno: (t.t voF !n?11n1:notT'/?tno: io.

ltl u!{na

u.a. u5tutu Itnoor'h,rnra

!n?t1n'tIno:.rt{?tFtoS

oc( !n?t1n'r:no!y{?tno: A'bo lrualn: n:lonr:r e e 4 ^ Jr,

t0114lJ11111:141:n1!yr? LU d<iJ;cbo urun::tn iqnrrinni v r 4 - .ir.

t0'txlt't'!1u:y15.r'ruyr? tu'@,,|tJi1

l]9t9 ulur"flfirld rnrsurhlati r r d - Jc,t0114U't 7t U:14',]:.111111? llj '"rl..J

:'tufionauvnrrlJnr:Iarlnr:ilnou:urnalula6ar:aurvrarfionr:rioufiJ:ciiliJ bddd

ildnonr HTML 5 and CSS 3

uu iurnu bddd !ia1 oc.o'o - ob.oo u.

su #orou:rnolrirrsroi fu u drr7niyruuBnr:uavruatulaEa,ridu!yr6

:cil'itiufi

yloir*r,tri.r a1u ota

l'tlJ1U n49l

[?41 od..no -ob.oolJ.

{rirunran:ror:dir"nr e.r:?1:yna {iirr.rr u nr:rilinir uuinr: v/

uavrmahladar:alryrn

b !rr,!rwu fir,rdln:arn

u.a. doaoiur na16u

:o':{rir!r unr:riru"niy u!3nr: --Z- -.----4-

m

ua v rr nIuIa u'a r :a u lyr n

ri'r urir rirl-n.: r ufr dt ! l u n r :dr rin d*u *-q r\rnr BUIU I na$Ol]l1tU t' 'J^r r r r4! l ytu:14't :,:1u yl? [! {1u I n I n'] s

nF-*2.--

d r.a. iri rioiiu ri'r raf r dui yr :r r l n'rhJ ;ur':o'ry'l:"orrj fir'rdln:arn rir rarir vr'liy r :.: r uri'rhj {

:'ru€onilvnt:!nr:In:lnr:iinoururvrnluTa6ar:auruRrfionr:rEuufiJ:lo'rfl u<cc

ilan{nr HTML 5 and CSS 3

:cv'irriufi uo fiurnu bddd [':41 od.6no - ob.oo u.

.lru ria.lou:rnorftr rnoi iu b d'run?vuu:nr:uact n tu [aEa1:dulvlfl

vl ?JA - 6na 9ll ttl,lu.la1u!a{o

t4lt'lu n49l

!?a1 od.oo -ob.sroLl.

i.t1,? u n 1a n:'tn 1: u u? n t n'rl?1:una u01u?un1:a'r!n'rru!5n'r: /

$auL n !u Laual:a!t116

b ururn'8'u firtiln:ara 50{l. 0'tu? u n15a1ufl1vlulJ 5fl11 --1. --.-'r---:.$a9n4n tutaualSa!tvlPl

m u.a. ooua:u'l v{aljiu y?14U1A1Un{lUrJ O1lt? U n1:a'lUflf(&nn t*

d ul{aflfutu] T{afo:J5tue u a - .it,o

ta'tuulyt!ty'F.t11rvl? !!t't1J't 2n15 F.--€--!.4. ltlt nolw tnlu!17tu51115.:'ruvl? t'lJ -?./U"u't.l6fli?:n1l

'1 u tnla'lfl Li'l141l1vt1l5U',t5'1',]Ltvt? LU f"'

r'rudonrusn::!nr:In:lnr:ilnou:urvrnIuIaEar:auruntfionr:rEuuftl:;drfl uace

andn: HTML 5 and CSS 3

:vra'irliufi bs't iulntl bddd r2a1 od.mo - ob.mo u.

ru viorou:laarfilsrai {u u drrininuuinr:uactilnluladalsautvlrl

11 fia - aqa n1tt14U.ta1u o1t0

14111U [149r

t?a'l od.mo -ob.ooll.

o qi;u':unran:ror:tiiin: or:lr:cna diirur unr:drfniruuinl:t/

tlLraJtvln tu Laual:a!tllfi

b !ru!nr'u frvrdln:arn :0i4011.11un'r:alun? u!ln1: -/ --7. _-.:r-,-=|tavt']1fi lu LaualSa!tvlri

m u.a.oaontul 1IAIA1] ra'rvrir dr rinl r u fiiirur u nr : rir rinf(&nv, t*

rlrl4rir!ryr fiigor:t'u r6'larjr fi u3v r:.rruYr"?l! d1 rlr ry n 1 : F--€--u.a.:"ti rioriu rnlu1l'tvtulv'lln'luvl? ilj ?./0,''

ur.:o"rXr:hri finriln:arnu v J - jq,

Ln'r14'll1vt1l:v 15 { 1llvl? tlj 0

r'rudon rnll!nr:In:lnr:f,lnoururvnlula6a'r:aurvrnuionr:riuui!:viirfl u<c<

ildnan: HTML 5 and CSS 3

tvvl?'l{?Uvl bd }lu'ln! bddd l2a1 od.(r|o - 6b.g|o L.

ru da.:ou:lnorfirroroi du u cirrinivuu3nr:uactvlnluTaEalraulvrfi

vl g0 - 6na 9r1t[14U{alull01t0

[?41 od.g|o -ob.ooLl,

o rJlJlUnlAn:'rQ'1:UU?Frt n',l5?1:vfla fl 01u?0n1:alun?vtu!:n1: /tlauty|n lu Laudl:a!Lytf1

b uruufldrr findln:arn :0iqlalu?un1'ra'r!n?vruuSn'r5,., o-t --'r7€

Itavt n !! laua1:autvr14

1.,1.d. oouo:u1 li{aliu 14?'l4U1A1Uni',tUfi 01lt?Un1:A'1Un &r* *1J1.1dfltufl'l 11450!:?'U t01vu'tvtlJ5v1t.l'tl.tvt? t1J 1,'11.1l fu n 1: F><--1.1.d.:tu Frol.ilJ li 1141t',t'!111514',]:

'1',t Llvl't L1J -,.D -.-

rrrd'ryrinri frntiln:arnv e ) ^ .ih,

ti1141.t11111 t1415.i',]1.,lyI1 !U M

:lsdonrucnrr nr:1o:rnr:ilnor:rrrnlu1aEar:aurvrnrfianr:r3ouj,il:siiri] uaaa

rad"n6n: tttti,tL 5 and CSS 3

' ea:!14?1.!?UVl bc( lJulnll bddd l2a'l od.mo - ob.$o U.

t&ru fia{ourrao:trfuroai i'u u drrinivruuin.rr!!ayrilnTu1aEd,ndurylfi

yl go - ana n1!tl1u.:a1u!010

1,1111 U [14 Sl

l?41 od.qlo -ob.ooV,

r.ttJ?unlaFt:1n1:u!?nt a't121:y0a u0'ru?un15a1un?yru!rn1:

Lravlvrn t! taualla!t fi

b rlruu rlr fir,rdln:arn l0.ir.r01LJ?unl:6't!n?'!1u!5n1t,4.- --.!- z-=-F<$avtytn t! !aua15a!tylf1

m u.a. douoiul xd'uiu y?'1,1u'la1unn1!al01u? un1ta1!fl Awr"" t-!rlq6'ruru1 fi3sol:.8'u lal ulyruSylt.r'llJyt? L!n"tl.tlfun'15

N_

d !.4. t?J1J nAtw l0'ly1J'tynJ:y'15.t'tuyt? !1J ry1l'){5tu?:0lu yll.'/u tntal?l L011rU1t11.J:y't :.:1lJ'11? t'lJ d

t'rs60nrucntr!nr:Ia:lnr:ilnau:urrnlu1a6ar:aurnorfionr:rierufrl:cdlij bddd

r4andq: HTML 5 and CSS 3

:vr.r'irliufi ro iurnl bddd !?a1 od.mo - ob.6no u.

ru #0.:ou:lnarfirrno{ fu u rirriniuauBnr:uacrrnlulaEalrdurufl

vl ia - a4a 911t[14U.tals!ato

14tJ',t U t14 tll?41 od.glo -6b,ooU.

o {tirErnran:ror:rilin: or:rr:vqla {drur un r:zirriniyr uli nr:

[avu nlulau'ar:altrurt

b uruur.it"g fiyrriln:a.rn :o 'r

qi3ir ur o n r :iir fnr-tr u ui n r: .---z-----4uacrvinluladar:a!rrn

m !.a. douoiur naniu ri'rr,lrireirrinmu{riru.: unr:rirfn hlnt" c-d urrqd'rurur fiigol:{u e e a - i' .-

r0'ryu'tyllJ lt4tt. uli? LU{ru-r rUnlt

r.a. itri rioril r 6'r r.rriu'uiur :o ru rihhj ryrr.:iryrinrl findln:arn ldryrir vr'ui r,l r :.: r r ri'rltj 7

w u1{YlRt,0ft?t1l

6l?utltnr: ;iru'niruuiny'rrnvrraluradar:aurvrn r,vr. ',,,:vunr

rr:.ob-bdb-ciooc(-od rio ssi.rcdru:ttnr: ;iru'ni u uui n r./rrn v

d nu .,aa^.^utlhH iufi n t({fliJo bdddrto{ 10t tl

rurnl{n1rrJnou5r]lylnLlladar:autln ua"nfln: HTML 5 and CSS 3

Itl(#truaran:ror:dir-n: orqar:vna)

{dru:ernr:airu"ninulinr:uavrynlda dar:ar.,rnrrr

6uu {tirlt anr: nor na-.r

dru;irl"nivurinr:uavrunrlula6alsaurvrpr rorinriurirolodo.l-ao.ruln:e nr:flnor:rtynluladar:alryn ydnan: HTML 5 and CSS 3 tollirJyr roardu oor.iilar,rwarunrr'hrirfiurfi /Lu;i':ro': ,4u*{':raf ,o'd rv55-0367 iirururir.r ob,G(d6.J r'ryl(vfi*an'uao'rlr"uuirfoue'fi ! 16o!rrdru) o-r ronar:hrirdryduruurrniori

ilG aurrrfi o}J:oyr:ruuavnhuilnr:rioI

J! I r\')

ra6ts6u aarlilnfirrars4/40 ?ou:1rri1R 'r 30/1 rlun 2ltuu:1!nitt,]an||?J.)n--]fi]J1fl Hnut,:n:fl ni.Jr?[{.l 1 0240

Iv:.zufind:023749380

SN. OFFICE SUPPLY4/40 Soi Ramkhamhaeng 30/1, Ramkhamhaeng Rd.,

Huamark Bangkapi, Bangkok 10240

Tel/Fax:023749380

'lr.rrirfi'lnr€ /'lud.,rlso I luu{aniTax Invoice / Delivery Order / Invoice

r nl:J:: ri sr"r fird un rfin-ax tD No. : 184425a789

dalName; drfnins$nrrsa:rnlr:lndnrrouvrn

fr otj,rAddress : lr,nirgrn-srnnfulodrrt:llnnrir;unr

399 o.6tlst! ulc.rcir:norlra

$nqan n{.lM .l 10300

ltaner:oonlfiutnl

drrur / Copy

.l ^,-- ^^^-tnl rvcS-uJo/No. :

?uylDate :

nr:atrirflronorr 8oc

uaiu ovo-R

orca Portabte Fite

cir:16'a arlnfnl:atrnrirl

Sticker Laser Lable

n*nrn tr,,ll6' nnoai zooc e-6550A

unrlir arl 2s unr

rJrnnrlcfuofarta d'r:r)

^lryvJ-- /.hX<l \./. I Jr A!/

-A\! q_ rl7 o A o.7 q4

"1 yD

5 nrios

3 noa

3 nsisl

a uria

g sfin

2 n6io.!

4 naio.l

z \1u

1 rfia

49s,00

440.O0

880.00

75.00

220.0O

509.00

850.00

115.00

57.00

2,475.00

1,320.00

2,640.00

300.00

660.00

1,018.00

3,400.00

230.00

57.00

TrJ:ni-rur6n6onio ur.nr raErSu asr{fitfiwera ryirulu

fiudriirllralri:"16rGOOOS SOTD AAE NO'T BET(JRNAAL€

nr:rir.rvriudrurino:nupnirioriold.riurilrnrlr,iariaulo!!rdrPAYMENT BY CHEQUE NOT VALID TILL CHEOUE HqS BEEN HONOBED.

{rilfi uira,r6old:'uirdrdllondo.rrirliotudrFeceived as per above in good ordsr and mnditjon

iluriT elr a e ua nlr.lla6 artll n oilf, su af,

lud'.rda .,undlrd'o{u 551Poeooo68

rulvr lq'tn 1no.: nd.: dlin.rruoinrru 6

iuii ts iurnr r.R.255s

6r hu ronr6u oovlflni'vryrnrl

nrrdviruldrnuon nr un;uor.rirn:d'r {nq

liryfioufi'rodrl (rlri) ri'rrun'udotjidr rirrinirir'LlSnrrmvtvrntulndntnutvrR lrvrt.r\tvunt

Inlvirun:d'ouJirifi nr:r riouhi.r u{'roqjfi ruaor1rldrdrlnrJ:vnrr

drd'l ,{rucu tTnlu1Jtflnc q1ltuNlloJ'tvr)

t.oo rriro inrllnxntviruu 9 nflnrr nulumronnrd'ruru 12,1oo.oo 12,100.00

. ' )" Jt('1siT sd! Lud.:t,ZZAPo31-1 1 12)

sllrlul.lllnou nnll{ 12,100.00

n'rB{aa,|lrllr 847.00

flDlt{u 12,947 .00

(n.rdo) {ru r:Jn{To (n.ria)

(ur.rnunnrni rinrur)

-),luYt_tnou_vi.f{._: ":, 1 -.t1. d.:no.:n1l lud.:i vn.:n1n:soniud?nrrr.rntqrcrir 1i'nr.trirrflunrrqnfio.ruf,.r

r .^ !.1z. {rrrdfr.rrir'trftiarlrlolfiuufrnSrunrrd.:aoltn:R.:lo.:'hinrrrnrrnmqiJd,ts, " -.)3. Hn1fl fl nlJfllt:fi .:to.:nTn tutuvl rdor{uriruun udc

rjlrraor:1fi:Ji.rrrafu'[uo-nrr]oBa: 0.2 ro{nnrdtirlrildi.nrou riun'qnrn{unruriruunqu6.:iunl

" r". .,1 ,."J{rr'ldrirt.no.r r rd.r'bi{ior uq n dl'o.raru firu

irr r{{dtiruun:r,ir'hio nr rr srrrfud.:ir.:d'u udo 4rld'nlnraiodolddudrd'rg.)(n.rn0) -- 4ttrdo

( (ill{qfinrt alrJ:;a.rri; )

ldruu;{y fnizrnr:rinqrirqrqm:

(nino)

i{nntu5a r4'rlo.r

{lrr

tq95

w uuiln1,an?1ildru:rtnr: rirrinirsuinr:uavrynluladar:aurra !T:. yirvufl: Iy:.ob-bdb-.<ooc(-od eio b.,rcrc(.t\fi no oaao.ob/ lJ 0 dl iufi glx fi1r1n! bddd6o': :trJ.irunr:.uoi'ndori

6EJu rftir!ranr:noloa".r

frru eilinivrulinr:*acrilnlu1adar:a!r fi ril,troro-nln:lnr:fi nol:rLlyrnIuIada,l:?i!ryrrl) - , -Jrflan1 :ulJt uanaq: HTML 5 and CSS 3 :vr.rirlilfr bb _ mo lurnl b<ec ru 4udnr:Gulf

drumuro.r rilr"ni utrinr:ttacr nldaEar:aunrfi 6{inruiirri]ud'0,:ldiao ur'orirr!rlrrri'rna'rr-&dluu rirfniuu15nr:'r dr:rsurnr:tor"116or"aqnr:L:vru'uuriru"nurunigluni,jrdr unr:yi"ao

11.P1. bdmd uavoliufrurihrfirLrfiu rja tori ri'lsiahf,

o. !14n ina tl,a vn?l!,i,]ril ui o'odo u,t' olfh nr:o'r ri ul rlb. :r u a v 16 uotoriao vr'ov;l-o nr!:r uac 16 uo ri.r uu!m. :lnlyllnUg0n:{4Oy1U............................

- a ! .e-<.'l.rr-l-ufrlv6o'lririuriniirulrnln:lnr:pj'lnrirr rfllriu rb,e<ol lrvr, a ) - vy )^(uunutJ!40{yiLJtn150ua?iu!iolJ,tytn?u)

a. rirulourarifrolnr:iaq nreflr a iuu. i6ovdo uor,rol^ad6'oldo louidf i6fi'o-n;fi"oinui6nnar:rnr nu:yil'oudru-n

urunig:run6,jrd'.:unrfl,r"an .pt.bdmd uavoriruri'hrfirLrfil da oa(o) rdorornrrriu.j- i r ' -fro'oiobirilu ooo,ooo ur slr :yriuuaitinlrunigrLuniirriranr:yr"an r{.Ft. bdmdrio ..t

,a 4j Js,0.:t5uu:J'tt},'to LU:ftyl0,t:fu,t0r.$ltl

o. o-ardor-aofl u:r n.t ob,c(d6,r uru (railraduaolfiu rfi'r iou f, d! rinllrvr firu )

Ioui6srna.i:ror fi'l iru roal5r oor4ilndnuaru

b. ntllnrini?niuvl"aq !:vnoudrub.o lrulrlrLnri inun:"urfilrab.b r.J'lu!!a,:ar:ri 6ur:"nri

b.m u1{d1?;ri riorir

l/il

({'tirunran:rrr:dir"n: orpr:vqa)

{iiru':unr:rirr.r"niuuuinr:tavrynlulaa-ar:auryrn

-.1h{x i'o.rroo",,{r

I,,4 Ir c q rqDd0 / illnul\flrc eJ{fi\ . rlarrn+r6q rJor

nrllic I, t 0r d:n r(uo I

flnnn'Jrl il,osic\*5rA-.-qA f, t{

tiuu e!rr:r;ri tii:r:ocr 6rrtnr:ntTlr

rii o'l'J : ;'r r1 lr :zura 1:i6

C>..^l-

^1

r.$-rstl

tqi:'i,/nr/z-i;4rr/V/>/"Y

!0dr5$ osdilf,fi.}rr{n10 s . omcE SUPPLY

4/4O i.t]l|il'ura 3Ol1 uln 2 n.l1rd1un| 4/4O Soi Ranl(henhs6ng 3O,/l Rsnkha.nhse( Road.

ulflrirnrnn $x!1rn!i nl{tntl Huamark Bdlgkati Bangkok. 1O24O

t'a^l.lo? i7. es t r./r' oP Bz. es.o

t,1uo !dgar1n1 ixi t o^t :

riar.r l"drnranr: drn-ninauinr:un:ryrallln6ar:srar r rrirfr z rage : 1

t,n'g tll'l'l?tls'18dl nl$tnlJ:1u!.{Fn t''.eJ raailurg*grrar : osaz

rilat-ufi

Item

:ran:r6oaR*a'rDescription

,irt':u ri':s

Quantlty'1F'rdox$,)tlUnit Prlce

l'1F1t?]lAmount

t

2

3

4

6

1

8

9

blld naaai zooc q<ssoe

01? 25 nl

l:f:rafn (: Cru)

I t nds.r

I' aoB

| , flao'l

|+ uf,n

|, uf,nI

| ' oluo

I o flno{

lz du|r ufin

495.00

440.00

880.00

75.00

220.00

[email protected]

E50.00

I15.00

57-W

2,475.m

1,320.00

2,640.00

300.00

660.00

1,018.00

3J0O.0O

230.00

51.N

n1l'{&n'llr{x

I 2,100.OO

a47.OO

I nfilrfiurooriutririoadRr.l6nuuriru I 12,947.OO

drnnadn:rnr go ir{drrladcrsural$ rs i$rdouLnr:dr::rt* - i'n

nrriurj::riu - n

uinr':trsYir$lns (setter)_----

rournoa'nrriu6o

o(0)11M4'JD

(nrrnrro:f,ntof 616:rra)

n-':ririr uitnlr a