รายวิชา การออกแบบและพัฒนาเว็บไซต์

สมรรถนะรายวิชา

  • แสดงความรู้เกี่ยวกับการออกแบบและพัฒนา Web ด้วยโปรแกรมสำเร็จรูป
  • สร้าง Web Page
  • ทดสอบการใช้และการทำงานของ Web page

    • คำอธิบายรายวิชา

    ศึกษาและปฏิบัติเกี่ยวกับ Web Designing, Computer Graphics, Working with work area, Layers and tables, Incorporating Multimedia components, Dynamic Web Pages




    Unified Modeling Language
    (เป็นเครื่องมือที่มีความหลากหลายในการแสดงแบบซอฟต์แวร์ เป็นโมเดลมาตรฐานที่ใช้หลักการออกแบบ OOP)
    [Object / Sequence / Use case Diagram]

    1. Activity Diagram

    ใช้ส้าหรับอธิบายกระแสการไหล
    ของการทํางาน (workflow) และแสดงขั้นตอนการทํางานของระบบ แต่ละขั้นตอนการทํางาน เรียกว่า Activity Activity Diagram แสดงการไหลของระบบ ATM

    2. Class Diagram

    Class Diagram คือ แผนภาพที่
    ใช้แสดง Class และความสัมพันธ์
    ในแง่ต่างๆ ประกอบด้วย Class และ Relationship โดยสัญลักษณ์ที่ใช้ในการแสดง Class แทนด้วยสี่เหลี่ยม เขียนได้ 2 แบบ

    3. Collaboration Diagram

    Collaboration Diagram จะแสดงการติดต่อสื่อสารระหว่างออบเจ็กต์ต่างๆ และความสัมพันธ์ระหว่างที่แต่ละออบเจ็กต์ติดต่อสอสารกัน


    4. Component Diagram

    เป็น Static Diagram ที่ใช้
    จำลองลักษณะทางกายภาพของ
    Object-Oriented System มีความสัมพันธ์กับ Class Diagram
    ประกอบไปด้วย Class ตั้งแต่ 1 Class ขึ้นไป

    5. Deployment Diagram

    Deployment Diagram ใช้สำหรับแสดงสถาปัตยกรรมของระบบในลักษณะ Physical Architecture
    แสดงถึงคอมพิวเตอร์และอุปกรณ์ที่ต้องการใช้ในระบบ โดย 1 ลูกบาศก์จะแทน 1 โหนด

    6. Object Diagram

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

    7. Sequence Diagram

    Sequence Diagram จะแสดงการทํางานของออบเจ็กต์ต่างๆเมื่อเกิดการสงข่าวสารหรือ massage และเมื่อเกิดเหตุการณ์ต่างๆ โดยทิศทางของลูกศรจะเป็นการบ่งบอกถึงทิศทางการส่ง message ระหว่างออบเจ็กต์

    8. Use case Diagram

    คือ แผนภาพที่แสดงการทำงานของผู้ใช้ระบบ และความสัมพันธ์กับระบบย่อยภายในระบบใหญ่ ผู้ใช้ระบบ จะถูกกำหนดให้เป็น Actor และระบบย่อย คือ Use Case เพื่อเล่าเรื่องราวทั้งหมดของระบบว่าทำงานอะไรบ้าง



    TextEditor
    (คือ โปรแกรมที่ใช้สำหรับสร้างและแก้ไขข้อความในการสร้างเว็บเพจ เช่น ภาษา HTML, C+, Java, Py, Perl เป็นต้น ต้องมีเครื่องมือที่ใช้ในการเขียน และแก้ไขตัวอักษรซึ่งเป็นคำสั่งต่างๆ เป็นทั้งโปรแกรมสำเร็จรูปสำหรับติดตั้ง และโปรแกรมออนไลน์บนเว็บบราวเซอร์ เพื่อสร้างเว็บเพจที่คุณต้องการพัฒนา)
    [Sublime Text / Notepad++ / Atom / Emacs]

    1. Sublime Text

    โปรแกรม Sublime text ข้อดีคือ มีหน้าตาที่ดูง่าย และมี option ปรับแต่งได้หลายอย่าง รวมถึงยังมี Plug-ins และ add-on เพื่อให้เราทำงานได้ง่ายขึ้น

    2. Notepad++

    Notepad++ เน้นที่ความเรียบง่ายเป็นหลัก ไม่เน้นที่ลูกเล่นหรือ ความสวยงามแต่อย่างใด ข้อดี ไม่กินทรัพยากรเครื่อง เพราะโปรแกรมถูกสร้างมาให้รันน้อยมาก เหมาะกับผู้เริ่มต้นเขียน เนื่องจากไม่ยุ่งยาก

    3. Atom

    โปรแกรม Atom ตัวนี้พัฒนามาจากเว็บไซต์ชื่อดัง GitHub ที่ช่วยกันร่วมพัฒนาและเปิดให้ใช้งานได้ฟรี มีเครื่องมือให้ใช้งาน ค้นหา คัดลอก และ แสดงตัวอย่าง หลังจากเขียนเสร็จแล้วก็สามารถ Preview ดูตัวอย่างของโค้ดที่เขียนได้เลยทันที

    4. Emacs

    สำหรับคนที่ชอบใช้คอนโซล โปรแกรมนี้ออกแบบมาให้หน้าตาดูย้อยยุค แต่ประสิทธิภาพการทำงานสูง (แน่นอนว่าใช้ยาก) โดยที่เราสามารถเรียก Platefrome หรือ สคริปเริ่มต้นได้จากตัวโปรแกรมนี้ ข้อดี ประสิทธิภาพการทำงานสูง และปรับ Interface และ Workspace ได้



    Database
    (Database หรือ ฐานข้อมูล คือ กลุ่มของข้อมูลที่ถูกเก็บรวบรวมไว้ โดยมีความสัมพันธ์ซึ่งกันและกัน โดยไม่ได้บังคับว่าข้อมูลทั้งหมดนี้จะต้องเก็บไว้ในแฟ้มข้อมูลเดียวกันหรือแยกเก็บหลาย ๆ แฟ้มข้อมูล ระบบฐานข้อมูล (Database System) คือ ระบบที่รวบรวมข้อมูลต่าง ๆ ที่เกี่ยวข้องกันเข้าไว้ด้วยกันอย่างมีระบบมีความสัมพันธ์ระหว่างข้อมูลต่าง ๆ ที่ชัดเจน ในระบบฐานข้อมูลจะประกอบด้วยแฟ้มข้อมูลหลายแฟ้มที่มีข้อมูล เกี่ยวข้องสัมพันธ์กันเข้าไว้ด้วยกัน)
    [MySQL / SQL Server / SQLite / ORACLE]

    1. MySQL

    MySQL รองรับคำสั่ง SQL เป็นเครื่องมือสำหรับเก็บข้อมูล เช่น ทำงานร่วมกับเครื่องบริการเว็บ (Web Server) เพื่อให้บริการแก่ภาษาสคริปต์ที่ทำงานฝั่งเครื่องบริการ (Server-Side Script) เช่น ภาษา php ภาษา aps.net หรือภาษาเจเอสพี เป็นต้น หรือทำงานร่วมกับโปรแกรมประยุกต์ (Application Program) เช่น ภาษาวิชวลเบสิกดอทเน็ต ภาษาจาวา เป็นต้น และเป็นระบบฐานข้อมูลโอเพนทซอร์ท (Open Source)ที่ถูกนำไปใช้งานมากที่สุด

    2. SQL Server

    SQL Server หรือ Microsoft SQL Server คือระบบจัดการฐานข้อมูลเชิงสัมพันธ์ (relational database management system หรือ RDBMS) ผลิตโดยบริษัท Microsoft เป็นระบบฐานข้อมูลแบบ Client/Server และรันอยู่บน Window NT ซึ่งใช้ภาษา T-SQL ในการดึงเรียกข้อมูล ด้วยเหตุที่ข้อมูลส่วนใหญ่ทั่วโลกเก็บไว้ในเครื่องที่ใช้ Microsoft Windows เป็น Operating System จึงทำให้เป็นการง่ายต่อ Microsoft SQL ที่จะนำ ข้อมูลที่อยู่ในรูป Windows Based มาเก็บและประมวลผล

    3. SQLite

    SQLite คือ Library ที่มีขนาดเล็ก ทำหน้าที่จัดการ Database โดยใช้ SQL Syntax SQL เหมือนกับ MySQL มี Data Type ได้แก่ TEXT เหมือนกับ String , Integer เหมือนกับ Long และ Real SQLite เป็นโปรแกรมฐานข้อมูลที่มีขนาดเล็ก (ไม่ถึง 1MB) เก็บฐานข้อมูลเป็นไฟล์ เช่น oedb.db โดยไม่จำเป็นต้องมีเซิร์ฟเวอร์ ทำให้ถูกใช้ในหลายโปรแกรม หรือถูกติดตั้งลงไปในอุปกรณ์เคลื่อนที่ เช่น iPhone , Android และนำไปใช้งานบนซอฟต์แวร์ต่างๆ เช่น openelement

    4. ORACLE

    Oracle (ภาษาไทย อ่านว่า ออราเคิล) คือ Object – Relational Database Management System (ORDBMS) มีความสามารถทำงานได้ทั้งในรูปแบบ Rational และบางคุณสมบัติของ Object Oriented เป็นผลิตภัณฑ์จากบริษัทออราเคิล และยังเป็น RDBMS เชิงพาณิชย์ตัวแรกของโลก ออราเคิลเซิร์ฟเวอร์ มีความสามารถโดดเด่นในด้าน การจัดการฐานข้อมูล มีความน่าเชื่อถือสูง (reliable) ด้วยเทคโนโลยี Rollback Segment ซึ่งเป็นลิขสิทธิ์ของบริษัทออราเคิล



    CSS
    (CSS คือ ภาษาที่ใช้สำหรับตกแต่งเอกสาร HTML/XHTML ให้มีหน้าตา สีสัน ระยะห่าง พื้นหลัง เส้นขอบและอื่นๆ ตามที่ต้องการ CSS ย่อมาจาก Cascading Style Sheets มีลักษณะเป็นภาษาที่มีรูปแบบในการเขียน Syntax แบบเฉพาะและได้ถูกกำหนดมาตรฐานโดย W3C เป็นภาษาหนึ่งในการตกแต่งเว็บไซต์ ได้รับความนิยมอย่างแพร่หลาย)


    [CSS Tutorial / CSS Responsive / CSS Grid / CSS Examples / CSS References]

    CSS มีประโยชน์อย่างหลากหลาย ซึ่งได้แก่

    1. ช่วยให้เนื้อหาภายในเอกสาร HTML มีความเข้าใจได้ง่ายขึ้นและในการแก้ไขเอกสารก็สามารถทำได้ง่ายกว่าเดิม เพราะการใช้ CSS จะช่วยลดการใช้ภาษา HTML ลงได้ในระดับหนึ่ง และแยกระหว่างเนื้อหากับรูปแบบในการแสดงผลได้อย่างชัดเจน
    2. ทำให้สามารถดาวน์โหลดไฟล์ได้เร็ว เนื่องจาก code ในเอกสาร HTML ลดลง จึงทำให้ไฟล์มีขนาดเล็กลง
    3. สามารถกำหนดรูปแบบการแสดผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีการแสดงผลในเอกสารแบบเดียวทั้งหน้าหรือในทุกๆ หน้าได้ ช่วยลดเวลาในการปรับปรุงและทำให้การสร้างเอกสารบนเว็บมีความรวดเร็วยิ่งขึ้น นอกจากนี้ยังสามารถควบคุมการแสดงผล ให้คล้ายหรือเหมือนกันได้ในหลาย Web Browser
    4. ช่วยในการกำหนดการแสดงผลในรูปแบบที่มีความเหมาะกับสื่อต่างๆ ได้เป็นอย่างดี
    5. ทำให้เว็บไซต์มีความเป็นมาตรฐานมากขึ้นและมีความทันสมัย สามารถรองรับการใช้งานในอนาคตได้ดี