overview - wordpress.com · agenda overview web server install wordpresson web server html 5...
TRANSCRIPT
MR. NATTAVUT SRIWIBOON
Department of Computer Science, Faculty of Liberal Arts and Sciences,
Kalasin Rajabhat University
https://isan.msu.ac.th/sak/
AGENDA
Overview
Web Server
Install Wordpress on Web Server
HTML 5
Wordpress Wordpress
Overview, Control Menu, Show My Web Page
Themes, Menu, Page Link
Media, Link, Promote, Link to Social Media
Etc.
Workshop
2
WEB APPLICATIONS / WEB APPS
โปรแกรมที่ทํางานบนฝงเซิรฟเวอร เรยีกวา Web Server (Server Side)
เขาไปใชงานโปรแกรมโดยโปรแกรม Web Browser เชน Internet Explorer, Firefox, Chrome, Safari เรยีกวา Client Side
ฝง Client ไมตองติดตั้งโปรแกรมเพิ่มเติม สามารถเขาใชงานไดทันทโีดยพิมพ URL ฝง Client ไมตองติดตั้งโปรแกรมเพิ่มเติม สามารถเขาใชงานไดทันทโีดยพิมพ URL ของโปรแกรมนัน้ๆ เชน http://www.facebook.com
ขอมูลทุกอยางจะเก็บอยูท่ี Server Side เปนหลัก (Remote Storage)
เวลาใชตองตออนิเทอรเน็ต (สวนใหญ)
พัฒนาโดยใช HTML/CSS/JavaScript แตตองมีภาษา Script เขาชวยเชน PHP และ ASP (หรืออ่ืนๆ) 3
NATIVE APPLICATION
ติดตั้ง Program และใชงานในลักษณะ Standalone เชน MS Word
ตอง Load โปรแกรมมาติดตั้งท่ีเครือ่ง Smart ตอง Load โปรแกรมมาติดตั้งท่ีเครือ่ง Smart Phone ผาน Apps Store / Google Play
ทํางานไดเร็ว และเขียนโปรแกรมท่ีซับซอนได 4
การพัฒนา WEB APPLICATIONS
5
เราจะเรียนรูอะไรกันเกี่ยวกับ HTML5
HTML5 คืออะไร
มีอะไรใหมใน HTML5
แนวโนมการใชงานและกํารสนับสนุนมาตรฐาน HTML5 แนวโนมการใชงานและกํารสนับสนุนมาตรฐาน HTML5
การทดสอบการรองรับ HTML5 ดวยตัวคุณเอง
HTML5 กับอุปกรณ Mobile
6
HTML5 คืออะไร
HTML คืออะไร
ยอมาจาก “HyperText Markup Language”
ภาษาคอมพิวเตอรท่ีใชสั่งใหแสดง “ขอมูลหรือเนื้อหา” ภาษาคอมพิวเตอรท่ีใชสั่งใหแสดง “ขอมูลหรือเนื้อหา” (Content) บนหนาเว็บเพจ
ทุกหนาเวบ็เพจบนอินเทอรเน็ตจะตองมีภาษา HTML อยู
7
HTML5 คืออะไร
ภาษา HTML เวอรชั่นใหมลาสุด แตยังไมเปน Final Version
มีคุณสมบัติเพ่ิมข้ึนจาก HTML เดิม ทําใหเขียน HTML งายข้ึน
สนับสนุนการแสดงผลบนอุปกรณต่ํางๆ ไดเชน PC, Mac, iPhone, iPad, สนับสนุนการแสดงผลบนอุปกรณต่ํางๆ ไดเชน PC, Mac, iPhone, iPad, Android Phone หรือ Tablet เปนตน
เพ่ิมลูกเลนในการทํางาน เชน ทาํงานกบัระบบแผนที่, สรางภาพกราฟกโดยไมตองม ีFlash ฯลฯ
เนนการใชงานรวมกับ CSS (Cascading Style Sheets) และ JavaScript
ทํางานกับภาษาที่ใชพัฒนา Web Application เชน PHP หรือ ASP ไดอยางมีประสิทธิภาพเพ่ิมข้ึน
8
มาตรฐาน HTML5 จะจบลงท่ีใด
คําตอบ คอื “ยังไมรู”
แตอุปกรณ และ Browser ตางๆ ก็เร่ิมสนับสนุนกันไปแลว แมวามาตรฐาน HTML5 ยังไมลงตัว ก็ตาม ไปแลว แมวามาตรฐาน HTML5 ยังไมลงตัว ก็ตาม
ผูพัฒนาสามารถเริ่มศึกษาและพัฒนาได เพราะมีการรองรับเพ่ิมข้ึน
9
ขอดีของ HTML5
รองรับอุปกรณหลากหลายทั้ง Desktop PC, Mac และ Mobile เชน Smart Phone, Tablet
แสดงภาพ เสียง หรือกราฟกอนเิมชั่นต่ํางๆ โดยไมตองติดตั้งซอฟทแวรเพิ่มเติม
สามารถพัฒนาโปรแกรมไดเหมือนกับโปรแกรมทีใ่ชงานทั่วไป ไมใชเพียงแคสราง สามารถพัฒนาโปรแกรมไดเหมือนกับโปรแกรมทีใ่ชงานทั่วไป ไมใชเพียงแคสรางหนาเว็บเพจแสดงขอมูลอยางเดียว
เขียนโปรแกรมงายยิ่งขึ้น โดยเฉพาะบน Mobile ไมตองพัฒนาในลักษณะ Native Apps และไมตองนําโปรแกรมขึ้น App Store หรอื Google Play
เขียนโปรแกรมไดอยางมีประสทิธภิาพ เพราะรองรับการติดตอเพื่อเรยีกใชงานคุณสมบัติตางๆ ของอุปกรณโดยเฉพาะ Mobile ได เชนเรยีกใชงานระบบ GPS (แผนที่)
10
ขอจํากัดของ HTML5
แตละคุณสมบัติยังไมไดมีกํารสนับสนนุจากทุก Browser และอุปกรณ Mobile และอุปกรณ Mobile
ยังไมประกาศเปนมาตรฐานท่ีกาํหนดเสร็จส้ินแลว
การใชในรูปแบบ Offline (ไมไดตออินเทอรเน็ต) จะตองมีการเขียนโปรแกรมเพ่ิมเติม
11
HTML 5 TEMPLATE
http://html5up.net/
WEB APPLICATION WORK
http://isan.msu.ac.th
Web Server
<HTML><Body>
Web Content</Body></HTML>
13
WEB APPLICATION WORK
14
WORDPRESS AND WEB SERVER
1. แตกซปิไฟลต์ดิตั�งลงในไดเรคทอรทีี�ตอ้งการตดิตั�ง2. เปิดไฟลw์p-config-sample.php ดว้ยโปรแกรมแกไ้ขตวัอกัษรอยา่งเชน่ WordPad ดว้ยโปรแกรมแกไ้ขตวัอกัษรอยา่งเชน่ หรอืโปรแกรมอื�นที�คลา้ยกนัและใสข่อ้มูลการเชื�อมตอ่กบัฐานขอ้มูลของคณุ3. บนัทกึไฟลใ์นชื�อใหมว่า่ wp-config.php4. อพัโหลดทกุอยา่งขึ�นโฮสท์
15
WORDPRESS AND WEB SERVER
5. เปิดไฟล ์/wp-admin/install.php ในเบราเซอร์ของคณุ จะปรากฎตารางการตั�งคา่ที�ตอ้งการสาํหรบับล็อกของคณุ ถา้มีบางอยา่งผดิปกต ิใหท้าํการเชค็ไฟล ์wp-config.php อกีครั�งแลว้ลองใหม ่ถา้ยงัผดิพลาดอกี กรุณาไปที� ชุมชนชว่ยเหลือ พรอ้มครั�งแลว้ลองใหม ่ถา้ยงัผดิพลาดอกี กรุณาไปที� ชุมชนชว่ยเหลือ พรอ้มดว้ยขอ้มูลของการลม้เหลวที�คณุทราบมากที�สุด6. เก็บรหสัผา่น (password)ที�ระบบใหก้บัคณุ7. script ควรจะนาํคณุมายงัหนา้ เขา้สูร่ะบบ login page เขา้สูร่ะบบดว้ย username admin และรหสัผา่นที�ได ้ระหวา่งการตดิตั�ง ซึ�งคณุมาสามารถเปลี�ยนมนัภายหลงัไดท้ี�หนา้ Profile
16
WORDPRESS ONLINE
สรา้ง Web Side Online ดว้ย Wordpress
https://th.wordpress.com/
17
การสรา้ง PAGE ใหมแ่ละสรา้ง LINK MENU
18
THEMES
Download: https://th.wordpress.org/themes/
19
MAIN MENU
20
TITLE TEXT
21
HEADER IMAGE
22
MENU
การเพิ�มหนา้ใน Wordpress จะสรา้ง Menu ใหอ้ตัโนมตั ิ
23
MENU
สามารถประตาํแหน่งของ Menu ไดโ้ดยไปท ีปรบัแตง่ เมนู
POST
Post เนื�อหาจะแสดงในหนา้แรก
MOBILE MODE
HTML 5 Enable
26
WORDPRESS WIDGET
วดิเจต็ (WordPress Widget) คอือะไร
สว่นสาํคญัของ Wordpress ที�มือใหเ้ลือกใชเ้พื�อตกแตง่หนา้ Web Page ใหส้วยงาม เครื�องมือก็ตกแตง่หนา้ Web Page ใหส้วยงาม เครื�องมือก็อยา่งเชน่ Calendar
WORDPRESS WIDGET
โดยตาํแหน่งของการกาํหนด Widget เชน่
Header (สว่นหวั)
Sidebar (ดา้นขา้ง)Sidebar (ดา้นขา้ง)
Footer (ดา้นลา่ง)
FOOTER
29
MEDIA
Youtube VDO Example
30
MEDIA
การสรา้งหนา้ Download File เชน่เอกสาร
File ProgramUpload File ที� คลงัไฟลส์ื�อUpload File ที� คลงัไฟลส์ื�อ
แกไ้ข หวัขอ้ เพื�อแสดงในเนื�อหา
สรา้ง Link ไปที� Media โดย Click ที�เพิ�มสื�อ
GOOGLE MAP
32
GOOGLE MAP
33
GOOGLE MAP
34
35