ใช้ word เขียนเว็บเพจก็ได้เหรอ

firebase storage
firebase storage

คำถาม เราใช้ MS Word เขียนเว็บเพจได้หรือไม่
คำตอบ ได้

วิธีการ
1. ใช้ MS Word เขียนสิ่งที่ต้องการ
2. save as แล้วเลือก type เป็น webpage หรือ webpage, filtered
จะได้แฟ้มที่มีนามสกุลเป็น .htm หรือ .html แล้วได้ folder
3. เปิดแฟ้ม .htm หรือ .html ด้วย browser ที่ชอบ
4. upload ไปเผยแพร่ใน web server

 

 

บรรทัดที่น่าสนใจในแฟ้ม .html
บรรทัดที่ 12 จะอ้างอิงแฟ้ม filelist.xml ที่อยู่ใน folder ก็จะมี 3 แฟ้ม
คือ

<o:File HRef=”themedata.thmx”/>
<o:File HRef=”colorschememapping.xml”/>
<o:File HRef=”filelist.xml”/>

บรรทัด 32 เรียกแฟ้ม themedata.thmx
บรรทัด 33 เรียกแฟ้ม colorschememapping.xml
บรรทัด 437 body จะเรียกใช้ class
ชื่อ @page WordSection1 และ p.MsoNormal

ตัวอย่างแฟ้ม
1. แบบ webpage
https://www.facebook.com/groups/thaiebook/718574678293353/
2. แบบ webpage, filtered
https://www.facebook.com/groups/thaiebook/718574584960029/
3. แชร์ตัวอย่าง webpage ผ่าน firebase.com เก็บใน storage
https://firebasestorage.googleapis.com/v0/b/helloworld-38434.appspot.com/o/Test20Bold_webpage2010.htm?alt=media&token=be60861d-e957-47ea-bc1a-645db57c3026
ถ้าต้องการใช้ firebase แบบ hosting
1. ต้องสร้าง project
2. ดำเนินการจัดทำเว็บเพจ และแฟ้มที่เกี่ยวข้อง
3. มีวิธีการที่
http://www.thaiall.com/blog/burin/7733/
4. มีตัวอย่างที่
https://missgrand2016th.firebaseapp.com/

เพื่อนปรึกษาว่า รับแฟ้ม excel มา แล้วเปิดไม่ได้

01_got_mail1. วันหนึ่ง เพื่อนชื่อนางลำ รับอีเมลจาก เพื่อนชื่อนายบาง
ในอีเมลมีแฟ้มอยู่ 6 แฟ้ม คือ

allsheet.xls
filelist.xml
sheet001.htm
sheet002.htm
stylesheet.css
tabstrip.htm

แล้วนางลำก็ forward mail ถามผมว่าเปิดอย่างไร
พยายามเปิดแล้วก็ไม่ได้
เพราะแฟ้มที่ได้รับมาเป็น excel ก็ใช้ excel รุ่นใหม่แล้ว
นามสกุลก็ชัดเจนว่าเป็น .xls จะเป็นอื่นไปไม่ได้

02_format_missing

2. เมื่อเพื่อนชื่อลำสอบถามจากเพื่อนชื่อนายบาง ว่าเปิดไม่ได้สงสัยแฟ้มเสีย
เพื่อนชื่อนายบางก็ส่งแฟ้มกลับมาให้อีกรอบ และเปิดไม่ได้เหมือนเดิม
กรณีแฟ้มเสียจึงไม่น่าจะเป็นไปได้ เพราะส่งอีเมลมาให้ถึง 2 รอบ

03_miss_file

04_file_structure

3. ผมลองเปิดดู ก็พบกับข้อความว่า
รูปแบบไฟล์และนามสกุลของ ‘allsheet.xls’ ไม่ตรงกัน
ไฟล์อาจเสียหายหรือไม่ปลอดภัย
อย่าเปิดไฟล์ดังกล่าวถ้าคุณไม่เชื่อถือในแหล่งที่มา
คุณต้องการเปิดไฟล์นี้หรือไม่

08_savexls

4. ก็ต้องเลือก “ใช่” เข้าสู่ขั้นต่อไป
แต่กลับพบข้อความว่า มีปัญหาเกิดขึ้นระหว่างการโหลดในส่วนต่อไปนี้
แสดงว่าเปิดแฟ้ม .xls จะไปเรียกแฟ้มอื่นมาทำงานด้วย
อยู่ใน allsheet.files\sheet001.htm
และ allsheet.files\sheet002.htm

05_change_extension

5. ทำการสร้าง folder ชื่อ allsheet.files
ในห้องเดียวกับที่เก็บแฟ้ม allsheet.xls
แล้วย้าย 5 แฟ้มเข้าไป ยกเว้นแฟ้ม allsheet.xls เข้าห้องที่สร้างขึ้น

06_open_by_chrome

07_open_by_excel

6. เปิด allsheet.xls ก็พบว่ามีข้อมูลที่ต้องการ
09_sheet1

10_sheet2

[Download]
สำหรับผู้ที่ต้องการทดสอบ
ผมมีแฟ้มภาพ และแฟ้ม allsheet.xls ให้นำไปลองจัดโครงสร้างเอง
สามารถดาวน์โหลดได้ที่
https://www.facebook.com/groups/thaiebook/664429603707861/

[Looking back]
แต่เมื่อคิดย้อนกลับ ว่า [เพื่อนชื่อนางบาง] สร้างแฟ้ม allsheet.xls ขึ้นมาได้อย่างไร
ผมจึงได้ทดสอบสร้างข้อมูลขึ้นมา 2 sheets
แล้ว save as แล้วเปลี่ยนประเภทเป็น Web Page (*.htm;*.html)
แต่บังคับชื่อแฟ้มและ extension ด้วยการพิมพ์ว่า “allsheet.xls”
จากนั้นเพื่อนชื่อนายบาง ก็ส่งอีเมลเป็นแฟ้มทั้งหมดให้นางลำ
โดยส่งแฟ้ม allsheet.xls พร้อมกับแฟ้มทั้งหมดในห้อง allsheet.files

จึงเป็นที่มาที่ทำให้ได้จัดโครงสร้างของแฟ้มแบบย้อนกลับ
เพื่อจะได้เปิดแฟ้ม allsheet.xls ตามประสงค์ของเพื่อนชื่อนางลำ
ซึ่งผลที่ได้คือเลือกเปิดแฟ้มนี้ได้ทั้งโปรแกรม excel และ chrome

font-face คือ การกำหนดการเรียกใช้ฟอนต์บน CSS ที่เพิ่มช่องทางได้หลากหลาย

ต้องการผลแบบนี้ จะเขียน code อย่างไร
ต้องการผลแบบนี้ จะเขียน code อย่างไร เพราะ world เล็กไปหน่อย

เคยได้คุยกับนักศึกษาเรื่องการกำหนด font แล้วมีการทดสอบสร้างแฟ้ม .htm
ด้วย Word 2010 โดย save as แบบ Web Page, Filtered
ซึ่งปกติการใช้ font ในการเขียนเว็บเพจ มักเรียกใช้ font ที่ติดตั้งบนเครื่อง client
แต่ใน CSS (Cascading Style Sheets) เราสามารถเรียกใช้ font บน Web server
ได้มีการเพิ่ม @font-face เข้าไปใน specification ของ CSS3
โดยการอ้างอิง Font file สามารถทำได้หลากหลายผ่าน src: url();

ผลการทดสอบใช้กับ Firefox และ Chrome รุ่นใหม่แล้วโอเค
แต่ IE 11 ใช้คุณสมบัตินี้ได้ แต่มีปัญหากับ .otf ส่วน .ttf โอเค

 

ต.ย. 1
<html><head><title>my font</title><style>
<!–
@font-face{font-family:”WisdomScript”; src: url(‘Wisdom-Script.otf’);}
–>
</style></head><body>
<div style=’font-size:70pt;font-family:”WisdomScript”;’>
Hello world
</div>
</body></html>

ต.ย. 2
<html><head><style>
<!–
@font-face{font-family:”WisdomScript”; src: url(‘Wisdom-Script.otf’);}
body{font-family:”WisdomScript”;}
–>
</style></head><body>
Hello world
</body></html>
ต.ย. 3
<html><head><style>
<!–
@font-face{font-family:”WisdomScript”; src: url(‘Wisdom-Script.otf’);}
@font-face{font-family:”AlexBrush”; src: url(‘AlexBrush-Regular.ttf’);}
body{font-size:72pt;font-family:”arial”;}
–>
</style></head><body>
say “<span style=’font-family:”WisdomScript”;’>Hello</span>
<span style=’font-family:”AlexBrush”;’>world</span>”
</body></html>

ดาวน์โหลดฟอนต์นี้
ที่ https://github.com/codeforamerica/click_that_hood/blob/master/public/fonts/Wisdom-Script.otf
ที่ https://www.fontsquirrel.com/fonts/download/alex-brush
หรืออีกมากมาย
ที่ https://www.fontsquirrel.com/

เล่าสู่กันฟัง เหตุที่ต้องลง artisteer รุ่น 4 สำหรับนักเรียน

artisteer
artisteer
1 กรกฎาคม 2557 .. วันนี้เด็ก ม.3 โรงเรียนบุญวาทย์วิทยาลัย
บอกว่า
ต้องการเขียนเว็บเพจแบบที่โรงเรียนสอน เพราะปีนี้ครูสอนรุ่น 4
ปีที่แล้วผมลงรุ่น 3 ให้พี่เขา แต่น้องเขาบอกว่าปีนี้เป็นรุ่น 4
และรุ่น 4 ย่อมดีกว่ารุ่น 3
สรุปว่าก็ต้องไปหามาลงใน windows ให้ได้
แต่พบว่าเครื่องไม่มี framework 3.5 ซึ่งมีขนาดหลายใหญ่ถึง 197 MB
ผมเลือกแบบตัวเต็ม ไม่ได้เลือกตัว setup
เพราะเครื่องที่ download ไม่ใช่เครื่องที่ติดตั้งโปรแกรม
จึงต้อง download และติดตั้งคนละรอบเวลากัน
โปรแกรม artisteer ใช้เขียนเว็บเพจได้ดีมาก
ทั้งรุ่น standard : trail หรือ home and academic : trail
ต่างก็ปิด function save ไว้
สรุปได้ว่า ทำงานเสร็จแล้ว save ไว้แก้ทีหลังไม่ได้
แต่ export ผลงานแบบ html ไปใช้ได้
ผลงาน artisteer.net รุ่น 3 เรื่อง 9 รัชกาล
แนะนำโปรแกรม Artisteer 4.1.0 ใน Thaiseoboard.com
แต่ที่ 4shared มีไวรัสแถมมาด้วยที่ http://www.4shared.com/rar/3WiTjOM6/net_framework_35.htm
ส่วนการลง framework 3.5 ใน win 8
มีคำแนะนำที่ http://support.microsoft.com/kb/2785188/th โดยเข้า windows features
แล้วคลิ๊กเพิ่ม .NET Framework 3.5 ได้เลย แต่ต้อง online เข้า windows update ของ microsoft
มีขั้นตอนดังนี้
1. เข้า start metro โดยกดปุ่ม windows
2. พิมพ์ control panel ในช่อง search จะพบ control panel
3. หาคำว่า Program หรือ Program and Features แล้วคลิ๊ก
4. หาคำว่า Turn Windows features on or off แล้วคลิ๊ก
5. ไปทำ check box หน้า .NET Framework 3.5 (includes .NET 2.0 and 3.0)
จากนั้นก็เลือก Windows Update  แล้วรอนานมาก
โปรแกรม Artisteer 4.1.0 จำเป็นต้องใช้ Framework 3.5
แม้ในเครื่องที่ลง Windows 8 จะมี Framework 4.5 ก็ใช้ไม่ได้
เพราะโปรแกรมไม่รู้จัก จำเป็นต้องลง Framework 3.5
.NET framework 3.5
.NET framework 3.5
ตอนทำ p a t c h กับ g e n e r a t e ก็ได้ทำหลายรอบ ฟ้องเรื่อง admin
แล้วก็ลองในหลายวิธี รวมถึงการเปิดโปรแกรม Artisteer ขึ้นมา แล้วปิดไป
เพราะไม่พบปัญหาตอนที่ p a t c h  แต่พบตอน g e n e r a t e พบว่าไม่ผ่าน
สุดท้ายก็ผ่าน เพราะคำว่าหลายรอบนั่นหละครับ

การใช้ like box ใน webpage มีหลายแบบ

likebox plugin for webpage
likebox plugin for webpage

เล่าสู่กันฟัง
วันนี้ปรับ option ของ facebook plugin
ตามที่เพื่อนร้องขอมาว่า อยากเพิ่มช่อง streaming อีกหน่อย
ก็พบว่าตัวแปร height กับ show friends’ faces
ขัดกันอยู่ อยู่รวมกันดี ๆ ไม่ได้
ถ้าแสดงหน้าเพื่อนก็จะกำหนดความสูงได้ไม่เกิน 556 px
สรุปว่าในเว็บไซต์หนึ่งขยายความสูงอีกหน่อย แลกกับเอาหน้าเพื่อนออก
ผมว่า work อยู่นะ

การใช้ like box ใน webpage มีหลายแบบ
การใช้ like box แบบไม่แสดงภาพหน้าเพื่อน จะกำหนด height ได้มากกว่า 556 px เป็นค่าที่อธิบายประกอบตัวแปร height ค่า default ใช้ plugin แบบ HTML 5 : div โดยเรียกใช้ script ที่ส่วนหัวก่อน แล้วค่อยใช้ div อีกส่วนสำหรับกำหนดตำแหน่งที่แสดงผล
การใช้ like box แบบแสดงหน้าเพื่อน จะจำกัดความสูงของ post ที่ถูก streaming เข้ามา โดยกำหนดความสูงได้ไม่เกิน 556 px ส่วนความกว้างสามารถกำหนดได้ไม่น้อยกว่า 292 ซึ่งมากกว่านี้ได้

http://www.thaiall.com/facebook

สร้างโฮมเพจของนักเรียนมัธยมต้นด้วย artisteer.net

9 kings = 9 รัชกาล
9 kings = 9 รัชกาล

http://www.thainame.net/home/king/

สมัยมีบริการอินเทอร์เน็ต คนรุ่นใหม่สมัยนั้น
ก็จะใช้ geocities.com เป็นแหล่งเผยแพร่
แต่จำได้ว่าต่อมาผมใช้ hypermart.net แล้วก็เป็นสาวก
ของเขาจนทุกวันนี้ ส่วน geocities.com ก็ปิดบริการไป
เหมือนแหล่งบริการอื่น ๆ นับร้อย ที่หายไปเกือบทั้งหมด
มีรายหนึ่งคือ thai.net ที่เคยแนะนำใคร ๆ ว่าสุดยอด
แต่ท้ายที่สุดก็ปิดบริการไปอย่างน่าเสียดาย

ปัจจุบันครูโรงเรียนประถม และมัธยมหลายแห่งสอนเขียนเว็บเพจ
ถ้าเป็นมัธยมต้นก็จะใช้เครื่องมือเขียนเว็บ
ถ้าเป็นมัธยมปลายก็จะสอนเขียน HTML หรือ PHP หรือ C หรือ JAVA

วันนี้เป็นเรื่องของเด็ก ม.ต้น คนหนึ่ง
ที่จัดทำ “โฮมเพจ 9 รัชกาล
เป็นนักเรียน ม.3 เทอม 1 ที่จัดทำด้วยโปรแกรม Artisteer.net
แล้ว export เป็น html ได้แฟ้มหลาย ๆ แฟ้มที่เปิดผ่าน ie ได้เลย

แล้วผมก็ใช้งานระบบ free hosting ของ thainame.net
โดย upload แฟ้มทั้งหมดเข้าห้องที่สร้างขึ้นผ่าน file manager
พบผลการอัพโหลดที่
http://www.thainame.net/home/king/

http://artisteer.net/

บริการวิชาการ การเขียนเว็บเพจเบื้องต้น ที่ มจร.

mcu lampang
mcu lampang

ผศ.บุรินทร์ รุจจนพันธุ์ และ อ.เกศริน อินเพลา คณะวิทยาศาสตร์สุขภาพและเทคโนโลยี จัดโครงการอบรม “การเขียนเว็บเพจเบื้องต้น” เพื่อบริการวิชาการแก่ชุมชน ทั้งนี้มีหน่วยงานที่มีความต้องการให้คณะจัดฝึกอบรม คือ มหาวิทยาลัยมหาจุฬาลงกรณราชวิทยาลัย วิทยาเขตแพร่ ห้องเรียนบุญวาทย์วิหาร โดยการบริการครั้งนี้ได้ใช้องค์ความรู้ในสาขาวิชาวิทยาการคอมพิวเตอร์ด้านการเขียนเว็บเพจเบื้องต้น ซึ่งเป็นสิ่งที่มหาวิทยาลัยมหาจุฬาลงกรณราชวิทยาลัยใช้เป็นเครื่องมือในการสื่อสารกับโลกภายนอกอยู่ตลอดเวลา และมหาวิทยาลัยโยนกได้ดำเนินการบริการวิชาการแก่ชุมชนในรูปแบบที่หลากหลายมาเป็นเวลากว่า ๒๓ ปี
โดยโครงการอบรม การเขียนเว็บเพจเบื้องต้น มีเนื้อหาการบรรยายเกี่ยวกับ การพัฒนาเว็บไซต์ โฮมเพจ โดเมนเนม และเว็บเพจ เป็นต้น
มีขั้นตอนการดำเนินงานทั้งหมด ๕ ขั้นตอน ดังนี้ ๑) ติดต่อและประสานงานกลุ่มเป้าหมาย ๒) กำหนดเนื้อหา และรายละเอียดของหัวข้อบรรยายที่ผู้เข้ารับอบรมควรรู้ ๓) จัดกิจกรรมบริการวิชาการในชุมชน ๔) ประเมินผลความพึงพอใจของผู้เข้าอบรม ๕) จัดทำรายงานสรุปผลโครงการ
ซึ่งโครงการนี้พบว่าบรรลุตามตัวบ่งชี้ คือ มีความพึงพอใจต่อโครงการ ๔.๒๖ จากคะแนน ๕ ระดับ ซึ่งเป็นระดับมากที่สุด ค่าความคลาดเคลื่อน ๐.๗๒ ซึ่งค่าความพึงพอใจไม่ต่ำกว่าที่ตั้งไว้ในตัวบ่งชี้ ดังนั้นโครงการนี้จึงบรรลุตามตัวบ่งชี้

http://www.facebook.com/media/set/?set=a.115963435181311.19375.115935711850750

ใช้ ckeditor แทน fckeditor

ckeditor for webpage editor
ckeditor for webpage editor

8 ก.ค.54 ต้องการใช้ text editor เป็น plug-in ของ textarea จึง download script จาก http://ckeditor.com/download
ได้รุ่น CKEditor 3.6.1, released on 16 June 2011 เมื่อคลาย zip ลงที่ root ก็ได้ห้อง /ckeditor แล้วเขียน code test.htm มีรายละเอียดว่า

<head><script type=”text/javascript” src=”ckeditor/ckeditor.js”></script></head>
<body><form action=”xxx.php” method=”post”>
<textarea cols=”80″ id=”editor1″ name=”editor1″ rows=”10″></textarea>
<script type=”text/javascript”>
//<![CDATA[
CKEDITOR.replace( ‘editor1’,    {fullPage : true,   extraPlugins : ‘docprops’   });
//]]>
</script>
<p><input type=”submit” value=”Submit” /></p>
</form>
</body></html>

แต่ toolbar ที่ได้เป็นแบบ full option จึงกำหนดรูปแบบในแฟ้ม config.js

config.toolbar =
[
[ ‘Source’, ‘-‘, ‘Bold’, ‘Italic’, syntaxhighlight’ ]
];

ซึ่งมีรายละเอียดศึกษาเกี่ยวกับ config ได้ที่
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html

fb comment แบบมีปัญหา

facebook comments
facebook comments

22 พ.ค.54 หลายเดือนก่อน ผมเคยใช้ comment ของ facebook.com ในเว็บ gallery ขององค์กร มาวันนี้พบเทคนิคคล้ายกัน แต่มีปัญหาในการเลือกแสดงผล .. ต่อไปคงต้องระวังการใช้ระบบ comment ของ facebook.com ที่จะนำไปใช้ในเว็บขององค์กรใดใด เพื่อรับข้อเสนอแนะ แล้วนำไปปรับปรุงแก้ไขตามเนื้อหานั้น
<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script>
<fb:comments href=”http://www.facebook.com/xxxx”
num_posts=”5″ width=”792″>
</fb:comments>

จากการทดสอบ
กรณีที่ 1 ผมเข้า comment ในเว็บเพจหนึ่ง แล้วก็เห็นผลตามปกติ
กรณีที่ 2 มีเพื่อนเข้า comment ในเว็บเพจหนึ่ง ต่อจากผม ก็เห็นผลตามปกติ
กรณีที่ 3 เข้า fb ในฐานะเด็กผู้หญิง แต่ไม่เห็น comment ของเพื่อนในเว็บเพจเดิม
กรณีที่ 4 logout ออกจาก fb แล้วไม่เห็น comment ของใครเลย
สรุปว่า comment ที่มีใครก็ตามเข้าไปแสดงความเห็น จะไม่ถูกเห็น ถ้ายังไม่เป็นเพื่อนผู้แสดงความเห็น ซึ่งไม่ตรงกับวัตถุประสงค์ของระบบรับ comment โดยทั่วไป เพราะการแสดงความเห็นนั้นมีต่อเว็บเพจโดยตรง มิได้มีความสัมพันธ์ระหว่างเว็บเพจกับเพื่อน ที่ต้องใช้เป็นเงื่อนไขในการแสดง comment

แต่ปัญหานี้ ไม่พบใน fb_comments.htm แสดงว่าอยู่ที่เทคนิคการเรียกใช้ application ของ facebook.com ซึ่งสรุปว่าถ้าเรียกใช้ระบบ comment อย่างถูกต้องก็จะไม่พบปัญหาข้างต้น
http://www.thaiall.com/facebook/fb_comments.htm

การสร้างงานและส่งออกไปเป็นเว็บเพจด้วย fireworks CS4

firework
firework

18 ก.พ.54 มีเพื่อนชื่อ ธรณ. สร้างงานไว้ด้วย Adobe Fireworks CS4 และใช้พัฒนาควบคู่ไปกับ Adobe Dreamweaver CS4 ซึ่งมีแนวทางการนำมาแก้ไขปรับปรุง ทั้งเปลี่ยนสี เปลี่ยนภาพ แต่ใช้ theme เดิม ดังนี้
1. เปิดแฟ้มต้นฉบับและทำงานออกแบบให้แล้วเสร็จ ตัวอย่างนี้เป็นภาพขนาด 2000 * 1000 pixels และจะเก็บในสกุล .png ซึ่งเป็นรูปแบบของ fire works ซึ่งขั้นตอนแรกมีรายละเอียดในการออกแบบ และใช้งานมากมายตามความซับซ้อนของเนื้องาน
2. จัดเก็บอีกครั้งด้วยการ save as เป็นแบบ Flattened PNG กำหนดขนาดเป็น 50% ผลคือแฟ้มนี้มีเพื่อนส่งออกไม่สามารถแก้ไขรายละเอียดได้ง่ายเหมือนต้นฉบับ และขนาดภาพคือ 1000 * 500 pixels เพื่อนำไปเป็นเว็บเพจ ซึ่งวางแผนไว้ว่าเว็บเพจกว้าง 1000 pixels และภาพถูกตัดออกเป็นชิ้นให้ download ได้อย่างรวดเร็ว แทนการใช้ภาพใหญ่เพียงภาพเดียว
3. ใช้ select tool สร้างพื้นที่ที่ต้องการตัด แล้วเลือก edit, insert, rectangular slice ผลการ slice จะเกิดขึ้นผลการตัดภาพใน web layer สำหรับเทคนิคตัดภาพนี้คล้ายกับที่เคยพบในโปรแกรม imageready แต่ปัจจุบันถูกรวมเข้าเป็นส่วนหนึ่งของ photoshop ตั้งแต่รุ่น CS2 ไปแล้ว หากจะตัดภาพทำ gif animation ก็ใช้ photoshop ได้เลย
4. ขั้นสุดท้ายส่งงานออกไปใช้ด้วยการเลือก file, export เป็น HTML and images ก็จะได้แฟ้ม html พร้อมภาพอีกหลายภาพ ที่จะไปใช้งานใน dreamweaver หรือควบคุมด้วย php ใน editor ใด ๆ ต่อไป
+ http://www.thaiall.com/fireworks/