โปรเจค

Topics for training : introduction to webmaster

Preparation to be webmaster
1. Preparation
- Accept something from someone
- Join Group and make friend
- Read news
- Have skill
- Check performance 
2. Domain : case godaddy.com
3. Hosting : case hypermart.net 
4. Web design - web2 + responsive
5. Web server
- Server-sided Script : php
- Client-sided Script : html js 
6. JavaScript 
7. CSS
8. AJAX 
9. image : jpg png gif
10. HTML *
11. Review : webpage by Ms Word *
#font = tlwgtypewriter

แนะนำบทเรียน
การเตรียมพร้อมเข้าสู่อาชีพใดก็ตาม สิ่งที่มักต้องมองหา คือ บุคคลต้นแบบ กลุ่มอาชีพที่เค้าแชร์กัน ข่าวสารในอาชีพ ทักษะที่จำเป็นต้องมี และเกณฑ์ประเมินที่น่าสนใจ เว็บมาสเตอร์ก็ต้องรู้จักคำว่า domain name ที่เป็นจุดเริ่มต้นของการสื่อสารในบทบาททางอาชีพ แล้วพูดถึงแหล่งทำมาหากินคือ hosting กับ ip address กลับมามองเว็บไซต์ในปัจจุบันพบว่ามีหลากหลายรูปแบบ มี design และเวทีที่แตกต่างกัน แล้วมองไปที่เครื่องบริการเว็บก็พบว่ารองรับภาษาที่ใช้พัฒนาแตกต่างกันไป ภาษาที่ถูกกล่าวถึงกันมากคือ javascript และ css ส่วน AJAX ก็เป็นพระเอกที่เว็บมาสเตอร์ต้องรู้จัก ความรู้เบื้องต้นก่อนลงมือเขียนเว็บเพจ คือ เรื่องภาพ อาจเป็นภาพถ่าย หรือการรีทัสภาพ แล้วต้องรู้จักภาษา HTML ที่เป็นพื้นฐานของการเขียนเว็บเพจ และการนำเสนอภาพ หากจะเริ่มต้นอย่างง่าย แนะนำว่า word เป็นโปรแกรมที่สามารถใช้สร้างเว็บเพจแบบเชื่อมโยงกันได้

Web server
1. Port 80
2. Appserv
3. Xampp *
4. Thaiabc
- Apache 80 
- MySQL 3128
- PHP 
- PHPMyAdmin
5. Free webhosting 
- case firebase, thainame.net/ntu, somee.com

แนะนำบทเรียน
เครื่องบริการเว็บ ก็จะมีพอร์ทมาตรฐานที่เปิดบริการคือ 80 สามารถใช้คำสั่ง netstat -na ตรวจสอบได้ว่า เครื่องของเราเปิดพอร์ทใดอยู่หรือไม่ โปรแกรมของคนไทยที่นำมาใช้สร้างเครื่องบริการเว็บไว้ใช้เองคือ appserv ช่วยจำลองเครื่องของเราเป็นเครื่องบริการได้โดยง่าย แต่ถ้าเป็นที่นิยมกันมากคือ xampp หลายองค์กรใช้โปรแกรมตัวนี้ให้บริการจริง ส่วน thaiabc เป็นโปรแกรมที่ผมสร้างขึ้นเพื่อการศึกษา จึงนำมาแชร์เป็นกรณีศึกษาได้ว่าจะสร้างโปรแกรมแบบ appserv หรือ xampp นั้นต้องทำอย่างไร ส่วนใครที่ตั้งใจเป็นเว็บมาสเตอร์ ก็ควรรู้จักโปรแกรมใน xampp และลง apache, mysql, php และ phpmyadmin ด้วยตนเอง แล้วทดสอบให้เพื่อนเรียกเว็บเพจที่เขียนขึ้นจากในเครื่องของเราได้

Responsive web design
1. Web 2.0 concept
2. Pagespeed
3. Browser with inspector *
4. CSS : case rsp61.css *
- External style sheet 
- Internal style sheet
- Inline style 
5. WordPress template : thaiall.com/blog

แนะนำบทเรียน
นิยาม เว็บ 2.0 คือ รูปแบบของเว็บไซต์รุ่นที่สอง ที่เน้นการนำเข้าเนื้อหาจากผู้เขียนที่หลากหลาย นำไปแสดงในเว็บไซต์ได้มากมาย เกิดเครือข่ายสังคม ด้วยรูปแบบที่ดูง่าย และน่าตื่นตาตื่นใจ การสร้างเว็บไซต์ แบบเว็บ 2.0 ให้ได้ตามนิยามไม่ใช่เรื่องง่าย เพราะต้องเขียนเพื่อให้บริการผู้คน หากจะให้บริการใครก็ต้องมาดูว่าเว็บไซต์ของเราพร้อมให้บริการใครหรือไม่ บริการตรวจสอบของ Pagespeed ใช้ประเมินเว็บเพจได้ละเอียด และแบ่งเป็น mobile กับ desktop อย่างชัดเจน แต่หากเว็บเพจที่เขียนขึ้นมีรายละเอียดที่เราต้องการตรวจสอบ การใช้ inspector ของ browser ก็สามารถทำให้งานยาก ๆ ง่ายขึ้นมาได้ทันที การออกแบบเว็บเพจมีเครื่องมือ หรือ code สำหรับกำหนด style ที่ชื่อว่า CSS ซึ่งเขียนขึ้นมาได้ 3 แบบ และอยากชวนมอง rsp61.css ของผม ที่ใช้กำหนดให้เว็บเพจเป็นแบบ responsive web design และชวนไปดูพลังของ wordpress ที่เปิดรับ template ได้หลากหลาย อาทิ thumbsup.in.th ก็ใช้ theme ที่น่าสนใจ และรองรับ responsive

Your own webpage
1. Tools : editplus *
2. Web hosting : thainame.net/ntu
3. Practice : 
index.html aboutme.htm project.htm *

แนะนำบทเรียน
เครื่องมืออำนวยความสะดวกในการพัฒนาเว็บเพจมีมากมาย อาทิ dreamweaver หรือ frontpage หรือ notepad หรือ editplus หรือ word การจะเป็นผู้พัฒนาเว็บต้องลงมือปฏิบัติ และใช้ความรู้มาสร้างผลงานให้เป็นที่ประจักษ์ หากตั้งโจทย์ให้สร้างเว็บเพจ 3 หน้าที่เชื่อมโยงกัน แล้วจะทำอย่างไรให้มีผลงานไปอยู่ในอินเทอร์เน็ต และนำเสนอในเว็บโฮสติ้ง อาทิ thainame.net หรือ firebase.com หรือ somee.com หรือ github.io ที่ผู้เข้าถึงโฮมเพจของท่าน แล้วรู้สึกประทับใจ นับเป็นโจทย์ที่น่าสนใจ

Tools

ASP

JAVA

COBOL

JSP

MySQL

PASCAL

PERL

PHP

TURBO C

MS Access

VB.NET & VB

โครงการคลิ๊ปนักศึกษา

รวมคลิ๊ปนักศึกษา หัวข้อที่ 32 ใน /vdoteach/ .. ทุกภาคการศึกษา จะให้นักศึกษาเลือกเพื่อนที่สนิทรวมกลุ่มกัน 4 คนขึ้นไป ทำงานกลุ่มที่เรียกว่า โครงการ (Project) ซึ่งมีกิจกรรมหลายเรื่องต้องทำ เพื่อตอบวัตถุประสงค์หนึ่ง ทุกกิจกรรมย่อยก็จะมีคะแนนให้ การทำงานกลุ่มต้องมีหัวหน้า และผู้รับผิดชอบหลากหลาย แบ่งหน้าที่กันตาม organization chart มีการประชุมวางโครงเรื่อง กำหนดฉากเป็น story board แล้วทำ teaser ออกมาเรียกน้ำย่อย ประสานผู้เกี่ยวข้องมาเป็นแขกรับเชิญ มีการถ่ายทำด้วยกล้องดิจิทัล คิด technic คิด climax คิด drama ใส่เข้าไปในเรื่อง แล้วนำมาตัดต่อ ประเมินผลในกลุ่ม แล้วจัดทำ powerpoint และเรียบเรียงเป็นรายงาน และแนบซีดีส่ง ปิดท้ายด้วยการนำเสนอหน้าชั้นเรียน

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

โครงการผลิตรถยนต์ และการขาย

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

โครงการ รับน้องขึ้นดอย 2559

ประทับใจกิจกรรมรับน้องขึ้นดอย เมื่อ 30 ตุลาคม 2559

ได้ร่วมกิจกรรมกับนักศึกษา ชื่อ "ปั่นฝ้าย สายบุญ จุลกฐิน ถิ่นล้านนา" บนวัดพระนาคปรก หรือวัดสามัคคีบุญญาราม ลำปาง ที่ตั้งอยู่บนดอย แล้วเห็นภาพที่นักศึกษาแชร์มาในกลุ่มของมหาวิทยาลัย ชอบหลายภาพ จึงนำภาพมารวมกัน แล้วจัดเรียงตามเวลา ตามกิจกรรม เลือกที่ประทับใจ มาทำเป็นคลิ๊ปสไลด์โชว์ ด้วย app: viva video บน smartphone ตอนท้ายคลิ๊ปตั้งกล้องหน้ารถ แล้วถ่ายแบบ time elapse การเดินทางจากบนวันไปที่หลักกิโลยัก นำคลิ๊ปไปโพสต์ใน facebook แบบ public แล้วก็ embed มาวางไว้ในเว็บเพจ แชร์ให้เพื่อน ๆ ได้ชมกิจกรรมดี ๆ ของนักศึกษาต่อไป

หลังทำกิจกรรมนี้ ได้ให้งานน้องปี 1 เขียน blog ที่ l3nr.org โดยนำภาพจากอัลบั้มของเพื่อน ๆ มาประกอบการเขียน blog ทุกคนเล่าความประทับใจได้อย่างสนุก บางคนเลือกกิจกรรมรับน้อง การแสดงในคืนเฟรชชี่ไนท์ และมีหลายคนประทับใจกิจกรรมบนวัดดอย ที่ต้องเดินจากมหาวิทยาลัยไปขึ้นดอยเป็นระยะทางหลายกิโลเมตร ท่ามกลางฤดูฝน และปีนี้ก็เช่นกัน ฝนมาขณะเดินขึ้นดอย เปียกปอนกันไป

"Imagination is more important than knowledge" - Albert Einstein

Developed by Burin Rujjanapan Tel.081-992-7223
ปรับปรุง : 10 ธันวาคม 2561