บริการพื้นที่สร้างโฮมเพจสำหรับนักเรียน

#บริการพื้นที่สร้างโฮมเพจสำหรับนักเรียน

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

ในอดีตนักเรียน นักศึกษา
มีโฮมเพจเป็นของตนเองได้โดยง่าย
มีได้คนละหลายไซต์ในหลายระบบ
เพื่อนำเสนอเนื้อหาที่ตนเองสนใจ
ด้วยการโค้ดดิ้งภาษา Html
เพื่อสร้างสื่อนำเสนอผลงานอย่างเป็นระบบ
เผยแพร่ให้เพื่อน ครู และแลกเปลี่ยนกัน

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

Thainame.net

#เล่าสู่กันฟัง 63-061 เล่าในรูปแบบภาษา Markdown

เชื่อว่าหลังปี ค.ศ. 2020 โลกแห่งการบอกเล่าเรื่องราว (Story Telling) อย่างมีรูปแบบ (Formatting) มีแนวโน้มใช้ภาษา Markdown กันมากขึ้น เพราะเขียนเล่าเรื่องได้ง่าย (Lightweight Format) นำไปใช้ต่อได้หลากหลายรูปแบบ พบการใช้งานใน github.com และ facebook.com และ wordpress.com มีรูปแบบพื้นฐานให้ใช้งาน สำหรับแปลงเป็นภาษาเอชทีเอ็มแอลได้ทันที อาทิ กำหนดส่วนหัวหลายระดับ เขียนลำดับข้อมูล ลำดับหัวข้อ ทำย่อหน้าได้ อ้างอิงคำพูด (Block Quote) เป็นต้น

ผลจากวิกฤตไวรัสโควิด-19 ทำให้พฤติกรรมการทำงาน การเรียน การใช้ชีวิต เปลี่ยนไปเป็น Work From Home (WFH) หรือ Learn From Home (LFH) กันมากขึ้น การบอกเล่าผ่านการเขียน (Writing) จึงเป็นสิ่งที่หลีกเลี่ยงได้ยากขึ้น และน่าจะมีแนวโน้มสื่อสารผ่านการเขียนเพิ่มขึ้น การเขียนที่มีรูปแบบ (Format) ย่อมสื่อสารเนื้อหา (Content) ให้เข้าใจได้ง่ายกว่าการเขียนที่ไม่มีรูปแบบ (No format) และนำไปแปลงร่างเป็นรูปแบบอื่นได้ยากกว่า (Transform)

รูปแบบ Markdown สามารถแปลงไปเป็นเว็บเพจให้เข้าใจได้ง่าย (Webpage .html) ผ่าน Parsedown.php หรือแปลงไปเป็น PDF หรือ Powerpoint สำหรับการใช้เป็นสื่อการเรียนการสอน ด้วยโปรแกรมช่วยแปลง (Converter) คือ โปรแกรม Marp หรือ Pandoc ที่ทำให้การแปลงร่างจากเนื้อหาภาษา Markdown ไปเป็น PPTX เพื่อใช้สื่อนำเสนอในห้องเรียนทำได้อย่างรวดเร็ว โดยโฮมเพจหน้านี้ ผมได้รวบรวมหัวข้อที่น่าสนใจ และนำเสนอผ่าน Webpage แล้วเป้าหมายต่อไปคือการแปลงร่างเป็น Powerpoint ซึ่งจะพบร่องรอยผลงานมาให้ดาวน์โหลดส่วนหนึ่ง

#Android Studio ตอนที่ 8 การใส่ภาพและคำสั่ง HTML ใน TextView ต่างกันทั้ง Java, Layout และ String

#Android Studio ตอนที่ 8 การใส่ภาพและคำสั่ง HTML ใน TextView
ต่างกันทั้ง Java, Layout และ String

<introduction>
อารัมภบท
การทำให้ตัวอักษรหนา หรือ Bold ใน TextView มีเงื่อนไขต่างกันทั้งใน Java, Layout และ String ในตอนนี้จะเน้นว่าทำอย่างไรให้แสดงผลได้ ไม่อธิบายส่วนของปัญหา เพราะการใส่ Html Tag ใน TextView ไม่เหมือนการเขียนเว็บเพจด้วยภาษา HTML พบว่า มีข้อจำกัดมาก ถามกันเยอะใน stackoverflow.com ไปอ่านใน guide ของ android.com พบว่า Supported HTML elements include:

  • <b> for bold text.
  • <i> for italic text.
  • <u> for underline text.

อันที่จริงยังมี Tag ที่ได้รับการสนับสนุนมากกว่านี้ ถ้าอ่านเพิ่มเติมที่ abhiandroid.com และ grokkingandroid.com หากจะให้สรุปก็คงเห็นพ้องกับ Developer หลายท่านว่าการใช้ Html บน Android Studio มี 2 คลาสที่รองรับคือ TextView กับ WebView ถ้าให้ดีควรเลือกใช้ WebView เพราะ TextView สนับสนุนการใช้ HTML น้อยกว่า โดยเฉพาะการใส่ Image ที่ต้องสร้าง Class ImageGetter มาช่วย

แต่ TextView เป็น Class ที่นิยมใช้งานกัน การพยายามใส่ Image และ HTML ลงไปก็น่าจะมาถูกทาง เพียงแต่ Android Studio มี Class อื่นที่สนับสนุนงานด้าน HTML มากกว่า หากใช้งาน HTML จริงจัง คงต้องไปใช้ WebView แต่ถ้างานเล็ก ๆ จะใช้ TextView ก็น่าจะพอรับมือไหว ตัวอย่างในตอนนี้จึงมุ่งมั่นจะใช้ TextView เพื่อแสดง image และ HTML Tag แล้วลองติดตามดูครับ งานนี้ Activity Template เริ่มต้นผมเลือกใช้ คือ Basic Activity

สรุปกระบวนการได้ .. ขั้นตอน ประกอบด้วย 1) ทำความเข้าใจ Project ที่นำมาพัฒนาต่อ 2) ทดลองใส่ Tag:img ใน strings.xml 3) สร้างคลาส ImageGetter เพื่อให้แสดงภาพ ตาม Tag:img 4) สร้าง layout ใหม่ และ string ที่มี HTML tag หลายตัว 5) ทำให้ปุ่มสั่งเปิด Layout ใหม่ได้ และ Tag:img ทำงานได้ 
</introduction>

กำลังเล่าเรื่อง การใช้โปรแกรม Android Studio สู่เพื่อนนักพัฒนา ผ่าน Blog

<process>
1. ทำความเข้าใจ Project ที่นำมาพัฒนาต่อ
สร้าง New Project แบบ Basic Activity ชื่อ imageintextview
จะมีปุ่มที่เป็น FloatingActionButton ใน activity_main.xml
ตามที่เล่าใน ตอนที่ 7 : ข้อ 6 กับข้อ 7 ต่อไปปุ่มนี้ก็จะเป็นปุ่มเปลี่ยนบทความให้กับ App
ให้มองหา app:srcCompat=”@android:drawable/ic_dialog_email”
เปลี่ยนเป็น app:srcCompat=”@android:drawable/ic_media_play”

ส่วนปุ่มนี้จะไปเปิด layout ตัวใด ให้ขึ้นมาแสดงผล
ยังไม่ได้ปรับใน MainActivity.java รอไปทีละขั้น เพราะยังไม่ถึงเวลาของขั้นนี้
แต่เห็นว่า ตอนนี้มี <include layout=”@layout/content_main” />
อยู่ใน activity_main.xml ซึ่งจะเรียก content_main.xml เมื่อเริ่มต้นอยู่แล้ว

2. ทดลองใส่ Tag:img ใน strings.xml
2.1 เริ่มต้นจากการไปหาภาพตัวอย่างมา 5 ภาพ
แล้วใส่ภาพที่หาได้ เข้าไปใน drawable หามา 5 ภาพ คือ lp01.jpg ถึง lp05.jpg
เรื่องนี้เล่าใน ตอนที่ 6 ข้อ 1 มีแบบผ่าน Windows Explorer และผ่าน Android Studio

2.2 ใส่ข้อมูลใน string.xml ประกอบด้วย ข้อความแบบหนา ข้อความธรรมดา และแท็กภาพ

<string name=”data1″>
<b>hello world!</b> Can you see me? <img src=”lp01″ />
</string>

ใน layout_main.xml ที่ Template เตรียมมาให้ใน Basic Activity นั้น
มองหา android:text=”Hello World!”
เปลี่ยนเป็น android:text=”@string/data1″
ถ้า run ตอนนี้
จะเห็นข้อความ Hello world! เป็นตัวหนา
ส่วนข้อความ Can you see me? เป็นตัวธรรมดา
แต่ภาพ lp01 ไม่เห็นว่ามีภาพนี้ออกมา
อธิบายในเบื้องต้น คือ TextView ไม่สนับสนุนการใส่ Tag:img แแบบนี้
ถ้าให้เห็นต้องทำขั้นต่อไป

 

3. สร้างคลาส ImageGetter เพื่อให้แสดงภาพ ตาม Tag:img
3.1 จะใช้งาน Tag:img ใน TextView ได้ต้องมีคลาส ImageGetter ใน MainActivity.java ก็เริ่มจากไปหาคัดลอกคลาสนี้มา แล้วเปลี่ยน packagename เป็น ของท่าน ของผมใช้ com.thaiall.www.imageintextview ใน code กำหนดขนาดภาพที่ผ่านคลาสนี้ให้กว้าง 48*2 และ 64*2 โดยตัวอย่างนี้มี 2 ส่วนคือ ส่วนของ import และส่วนของคลาส ให้สร้างไว้ภายใน class MainActivity
ปล. พอมี ImageGetter แล้ว ในหัวข้อ 3.4 จะเรียกใช้ผ่าน Html.fromHtml ()

import android.text.Html;
import android.os.Build;
import android.graphics.drawable.Drawable;

private class ImageGetter implements Html.ImageGetter {
public Drawable getDrawable(String source) {
int id;
id = getResources().getIdentifier(source, “drawable”, getPackageName());
if (id == 0) {
// the drawable resource wasn’t found in our package, maybe it is a stock android drawable?
id = getResources().getIdentifier(source, “drawable”, “com.thaiall.www.imageintextview“);
}
if (id == 0) {
// prevent a crash if the resource still can’t be found
return null;
}
else {
Drawable d;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { //>= API 21
d = getResources().getDrawable(id, getApplicationContext().getTheme());
} else {
d = getResources().getDrawable(id);
}
//d.setBounds(0,0,d.getIntrinsicWidth(),d.getIntrinsicHeight());
d.setBounds(0,0,48 * 2,64 * 2);
return d;
} } }

3.2 การทำให้มีข้อมูลปรากฎใน TextView ผ่าน MainActivity.java
เริ่มต้นจากตั้งชื่อให้ TextView ใน content_main.xml
โดยเพิ่มว่า android:id=”@+id/textView”

3.3 เปลี่ยน data1 และเพิ่ม data2
เพื่อแสดงเทคนิคการจัดการ Tag:img ว่า ใส่แบบ data2 แล้วไม่สำเร็จ
ต้องใส่ Tag:img แบบ data1 ใน strings.xml แล้วใช้ java ช่วยจัดการ

<string name=”data1″>data1 : ok imglp01 imglp02 imglp03</string>
<string name=”data2″>data2 : error <img src=’lp01′ /> <img src=”lp02″ /></string>

3.4 หลังเตรียมข้อมูลใน strings.xml ก็มาเตรียม code ที่จะจัดการกับ Tag:img
โดยเพิ่ม code ข้างล่างนี้ใน MainActivity.java เพื่อจัดการ content_main.xml

import android.content.res.Resources;
import android.widget.TextView;
Resources res = getResources();
String mData1 = res.getString(R.string.data1);
String mData2 = res.getString(R.string.data2); // error here
String mData3 = “data 3 in java file : ok <img src=\”lp04\” /> <img src=lp05 />”;
for(int i=1;i<=3;i++) {
mData1 = mData1.replace(“imglp0” + i, “<img src=lp0″ + i + ” />”);
}
String[] mList ={mData1,mData2,mData3};
String mData = android.text.TextUtils.join(“<br/>”, mList);
TextView htmlTextView = (TextView)findViewById(R.id.textView);
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.N) {
htmlTextView.setText(Html.fromHtml(mData, Html.FROM_HTML_MODE_LEGACY, new ImageGetter(), null)); // for 24 api and more
} else {
htmlTextView.setText(Html.fromHtml(mData, new ImageGetter(),null)); // or for older api
}

https://gist.github.com/thaiall/9fcead1b4fb4baea6b0751957e5df56f

4. สร้าง layout ใหม่ และ string ที่มี HTML tag หลายตัว 
4.1 สร้าง layout_main.xml
แล้วลาก TextView มาวาง เหมือนใน ตอนที่ 7 ข้อ 4
แล้วเติม ScrollView คลุม TextView ตาม ตอนที่ 7 ข้อ 5 ด้วย
พบว่า id ของ TextView คือ android:id=”@+id/textView2″

4.2 เตรียม myArticle ใน strings.xml ที่มีข้อมูลครบถ้วน
จากการไปอ่านบทความของ grokkingandroid.com ทำให้รู้ว่าใน string ต้องใช้ Entity reference คือ &lt; ตอนปิด Tag ไม่จำเป็นต้องใช้ &gt; ก็ได้ หากส่งเข้า TextView ผ่านฟังก์ชัน setText() ในโปรแกรม Java อย่างที่ใช้คือ MainActivity.java

<string name=”myArticle”>
&lt;h1&gt;ไอทีในชีวิตประจำวัน #611 เมื่อเพื่อนขอใช้โทรศัพท์เข้าสื่อสังคม&lt;/h1&gt;&lt;br/&gt; อาจมีสักครั้งที่เพื่อนสนิท หัวหน้า กิ๊ก หรือแฟนขอยืมสมาร์ทโฟนของเรา …
</string>

https://gist.github.com/thaiall/b220a4cb2b8137f747648c56a5bd086d

 

5. ทำให้ปุ่มสั่งเปิด Layout ใหม่ได้ และ Tag:img ทำงานได้
การปรับเพิ่ม MainActivity.java สำหรับรองรับการสั่งเปิด layout_main.xml
เริ่มจากการเพิ่มคำสั่งใน Activity เมื่อคลิ๊กปุ่ม
โดยเพิ่มใน Block : onClick ของ fab.setOnClickListener(..)
เพื่อคุม FloatingActionButton
ทำตาม ตอนที่ 7 ข้อ 6 มีคำสั่งเพียงบรรทัดเดียวที่ต้องเพิ่ม

setContentView(R.layout.layout_main);

แล้วตามด้วยชุดคำสั่งที่ต้องเพิ่ม

Resources res = getResources();
// for layout_main.xml
String mArticle = res.getString(R.string.myArticle);
for(int i=1;i<=3;i++) {
mArticle = mArticle.replace(“imglp0” + i, “<img src=lp0″ + i + ” />”);
}
TextView htmlTextView2 = (TextView)findViewById(R.id.textView2);
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.N) {
htmlTextView2.setText(Html.fromHtml(mArticle, Html.FROM_HTML_MODE_LEGACY, new ImageGetter(), null)); // for 24 api and more
} else {
htmlTextView2.setText(Html.fromHtml(mArticle, new ImageGetter(),null)); // or for older api
}

 

 

 

https://gist.github.com/thaiall/1e23a3bcf79ee293b6b4baea14bcfd9a

</process>

<website_guide>
+ http://abhiandroid.com/ui/html
+ http://www.grokkingandroid.com/..html-fromhtml/ (webview better)
+ https://developer.android.com/../string-resource.html (&lt;)
+ https://stackoverflow.com/..strings-xml-in-android (spanned)
https://developer.android.com/studio/projects/templates.html
</website_guide>

หมายเหตุ 
ถ้าสนใจติดตามเนื้อหาในบล็อกนี้ สามารถ subscribe ด้วย email ที่อยู่ข้างขวา หรือ click here

การเปลี่ยนเว็บไซต์เป็นขาวดำ ต้องใช้วันที่ 14 ตุลาคม พ.ศ.2559

black and white css by filter
black and white css by filter

พบการแชร์ CSS code สำหรับเปลี่ยน webpage เพื่อไว้ทุกข์
ดังนั้นหากท่านใด ต้องการใส่ตัวกรองให้กับ webpage ให้เป็นสีขาวดำ
(if you want to use filter to change webpage for grayscale mode)
ทำได้โดยเพิ่ม code ของ CSS (Cascading Style Sheets) เข้าไปใน webpage
ซึ่งแต่ละ browser อาจยอมรับคำสั่งแตกต่างกันไป
ซึ่งคำสั่งสำคัญ คือ filter
มี source code ของ #blackandwhitecss ดังนี้

https://gist.github.com/thaiall/d4fea62b72d8ab026896d6142c0b4b6d

ความแตกต่างของ id และ class

CSS : Cascading Style Sheets กลายเป็นข้อควรรู้ที่จำเป็นสำหรับนักพัฒนาเว็บไซต์อย่างหลีกเลี่ยงไม่ได้
CSS : Cascading Style Sheets กลายเป็นข้อควรรู้ที่จำเป็นสำหรับนักพัฒนาเว็บไซต์อย่างหลีกเลี่ยงไม่ได้

วันนี้ 11 มิ.ย.59 ว่าจะจัดการเรื่อง float:left ใน web2 ให้เรียบร้อย แต่มาใช้เวลากับการนั่งทดสอบ Developer tools ของ chrome นานไปหน่อย ติดใจเลย
ทำให้ได้เรียนรู้ว่า chrome ช่วยให้การปรับแต่งเว็บไซต์ง่ายกว่าใช้ editor ธรรมดาอย่าง editplus มาก
http://www.thaiall.com/web2

เรื่อง CSS : Cascading Style Sheets กลายเป็นข้อควรรู้ที่จำเป็นสำหรับนักพัฒนาเว็บไซต์อย่างหลีกเลี่ยงไม่ได้ ปัจจุบัน CSS มีถึงรุ่น 3 แล้ว ในการใช้งานจริงมักสร้าง CSS แบบ External style sheet เพราะแฟ้มอื่นเรียกใช้ได้ ส่วน Internal style sheet ก็จะเรียกใช้ได้เฉพาะในแฟ้มนั้น ส่วน Inline style ก็จะพิมพ์คำว่า style ต่อท้าย tag นั้นไปเลย ซึ่งตัวแปรหลัก 2 แบบที่กำหนดเองใน CSS มี 2 แบบคือ id กับ class

การกำหนด และการเรียกใช้ต่างกันไป
ถ้าเป็น id จะขึ้นต้นด้วย # แต่เป็น class จะขึ้นต้นด้วย . ถ้าเรียกใช้ id จะใช้ properties name ว่า id ส่วนเรียกใช้ class จะใช้ properties name ว่า class

สิ่งที่แตกต่างกัน คือ id จะเรียกใช้ครั้งเดียว แต่ class เรียกใช้ได้หลายครั้ง ถ้าวางแผนอย่างใจเย็นก็จะใช้ประโยชน์จาก css ได้อย่างเต็มที่ มีตัวอย่างที่ css_sample.htm หากจะทดสอบการปรับแต่ง css ทำได้ที่ w3schools.com

 

<html><head><style type=”text/css”>
#header {background:yellow;font-size:20px;}
.title-text {color:red;}
p.big { font-size:40px; }
span.small { font-size:10px; }
table, th, td { border: 1px solid black; }
.burin1 {color:red;border: 2px}
.burin2 {font-size:20px;float:left;}
.burin3 {color:blue;font-size:30px;float:left;}
</style><body id=”header” class=”title-text”>
<span style=”color:green;”>hello</span><p class=”big”>my</p>
<span class=”small”>friend</span><span class=”small”>is tom.</span>
<table class=”burin1″><tr><td>one</td></tr></table>
<table class=”burin2″><tr><td>two</td></tr></table>
<table class=”burin3″><tr><td>three</td></tr></table>
http://www.w3schools.com/css/css_table.asp
</body></html>

หลักของพาเรโต 80/20 มีตัวอย่างในหลายสาขาวิชา

output is hello world
output is hello world

The distribution is claimed to appear in several different aspects
relevant to entrepreneurs and business managers.
For example:
    80% of problems can be attributed to 20% of causes.
    80% of a company’s profits come from 20% of its customers
    80% of a company’s complaints come from 20% of its customers
    80% of a company’s profits come from 20% of the time its staff spend
    80% of a company’s sales come from 20% of its products
    80% of a company’s sales are made by 20% of its sales staff

http://c2.com/cgi/wiki?EightyTwentyRule

ตัวอย่างทางคอมพิวเตอร์ก็มี 4 ตัวอย่าง
1. Microsoft noted that by fixing the top 20% of the most-reported bugs, 80% of the related errors and crashes in a given system would be eliminated.
ไมโครซอฟต์บันทึกไว้ว่า การแก้ปัญหาที่เกิดขึ้นบ่อย 20% ที่รายงานมากที่สุด จะทำให้ปัญหาที่เกี่ยวข้องอีก 80% ถูกจัดการไปด้วย
2. In load testing, it is common practice to estimate that 80% of the traffic occurs during 20% of the time.
ในการทดสอบการโหลด พบว่า 80% ระหว่างการโหลดนั้น ทุ่มไปกับ 20% ที่เป็นเรื่องของเวลา
http://www.somkiat.cc/think-before-load-testing/
3. In software engineering, Lowell Arthur expressed a corollary principle: “20 percent of the code has 80 percent of the errors. Find them, fix them!”
โลเวล อาร์เธอร์ นำเสนอหลักการข้อพิสูจน์ว่า “20% ของโค้ด มีข้อผิดพลาดอยู่ 80% ค้นหาและแก้ไขซะ”
Lowell Arthur คือ ผู้สั่งการภารกิจ Apollo 13
https://en.wikipedia.org/wiki/Jim_Lovell (James Arthur “Jim” Lovell, Jr.)
4. Software frameworks have often been observed to make 80% of use cases easier to implement and 20% of use cases much more difficult to implement.
กรอบซอฟต์แวร์ถูกพบได้บ่อยว่าการทำโปรแกรมเพื่อใช้ที่ง่ายขึ้น 80% มาจากส่วนที่ยากขึ้น 20%
อ้างอิงจาก https://en.wikipedia.org/wiki/Pareto_principle

ตามคลิ๊ปอธิบายกฎนี้ว่า
อะไรก็ตามที่อยู่เต็ม 100%
80% จาก 100% จะถูกครอบครองโดย 20%
และอะไรก็ตามที่เหลือจาก 20% จะถูกครอบครองโดย 80%


วิลเฟรโด พาเรโต นักเศรษฐศาสตร์ชาวอิตาเลี่ยน
พูดถึงหลักของพาเรโต ตั้งแต่ค.ศ.1895
โดยอธิบายว่า “สิ่งที่สำคัญจะมีอยู่เป็นจำนวนที่น้อยกว่าสิ่งที่ไม่สำคัญ
หรือ “สิ่งที่มีประโยชน์จะมีอยู่เป็นจำนวนที่น้อยกว่าสิ่งที่ไม่มีประโยชน์
ในอัตราส่วน 20 ต่อ 80 หรือ ที่เรียกกันว่า กฎ 80/20
[ด้านเศรษฐศาสตร์]
การผลิตของมีตำหนิขึ้น 20% จะเป็นปัญหา 80% ของปัญหาทั้งหมด
เสื้อผ้า 100 ตัว จะใจประจำอยู่เพียง 20 ตัว
จับกลุ่มทำรายงาน 10 คน จะมีเพียง 2 – 3 คนที่เป็นแกนนำ
อ่านหนังสือ 100 หน้า จะมีเพียง 20 หน้าเท่านั้นที่ถูกนำมาออกข้อสอบ
คน 100 คนทำงาน มีเพียง 20 คนที่มุ่งมั่นทำงาน และเจริญก้าวหน้า
ร้านขายของชำมีสินค้านับ 100 รายการ แต่รายได้ 80% มาจากสินค้าเพียง 20%
ประเทศทุนนิยม คนรวย 20% สร้างรายได้ให้ประเทศเป็น 80% ของรายได้ทั้งประเทศ
มูลค่ารายจ่ายกว่า 80% มาจากรายการที่ใช้จ่ายเพียง 20% ของรายการทั้งหมด
อ้างอิงจาก http://www.oknation.net/blog/knowledge09/2009/08/15/entry-1

อ้างอิงเพิ่มเติม http://www.clairenewton.co.za/my-articles/paretos-principle-the-80-20-rule.html

ทดสอบการทำงานกับแฟ้มขนาด 1 ล้านไบท์

หน้าตาเว็บเพจที่ทดสอบ
หน้าตาเว็บเพจที่ทดสอบ

ได้มีการเขียนเว็บเพจ และใช้ java script มา 4 เว็บเพจ ทุกเว็บเพจมีขนาด 1 ล้านไบท์เท่ากัน
เพื่อทดสอบการใช้เวลา download ของ script แต่ละเว็บเพจ
ทดสอบใน firefox, chrome และ ie มีประเด็นที่สนใจดังนี้
1. เปิด และปิด script ในเว็บเพจ มีผลอย่างไร
2. การ refresh ของแต่ละ browser เมื่อใช้ no-cache แตกต่างกันหรือไม่

โดยใช้ javascript ในการประมวลผลเวลาของแต่ละหน้า ผลการทดสอบที่น่าสนใจ ดังนี้

การทดสอบที่ 1 พบว่า การส่งค่าผ่าน url จะทำให้ load เว็บเพจทั้งหน้าใหม่
เปิดเว็บเพจ http://www.thaiall.com/html/onemillion.htm ครั้งแรก
ใช้เวลาไป 6186 millseconds
เมื่อคลิ๊กลิงค์ Reload แบบส่ง get ใหม่ ใช้เวลาไป 9784 milliseconds
แต่ถ้า Refresh ผ่าน browser จะเรียก script เดิมจากใน cache ใช้เวลา 23 milliseconds

การทดสอบที่ 2 พบว่า การทำงานใน script เดียว ตั้งแต่ต้นถึงท้าย script จะใช้เวลาน้อยมาก
เปิดเว็บเพจ http://www.thaiall.com/html/onemillionv1.htm ครั้งแรก
ใช้เวลาไป 4 millseconds ซึ่งไม่ได้สะท้อนเวลาจริง
เมื่อเปลี่ยนเป็น Reload หรือ Refresh แบบใด ก็ใช้เวลาเท่าเดิม
เพราะทั้งเว็บเพจมีคำว่า script คำเดียว ทุกอย่างอยู่ใน script เดียว หรือ thread เดียว
ไม่มีการเปิดปิด tag script หลายครั้ง เป็นการทำงานใน thread เดียวกัน
จึงได้เวลาจากการประมวลผลตั้งแต่ต้น thread ถึงท้าย thread ไม่แตกต่างกันมากนัก

การทดสอบที่ 3 พบว่า เป็นการทดสอบที่ยืนยันผลของการทดสอบที่ 1
เปิดเว็บเพจ http://www.thaiall.com/html/onemillionv2.htm ครั้งแรก
ใช้เวลาไป 6077 millseconds
ใช้เทคนิคว่า การเปิด tag script ต้นแฟ้ม และปิดทันที เพื่อบันทึกเวลาเริ่มต้น
แล้วเปิด tag script ท้ายแฟ้ม เพื่อประมวลเวลา และแสดงผล
จะแสดงเวลาที่ใช้ ในการ load เว็บเพจ ใกล้เคียงกับความเป็นจริง
คือ ใช้เวลาประมาณ 6 วินาที หรือ 6000 millisecond ต่อการ load หนึ่งครั้ง
แต่ถ้าโหลดจากใน cache ของ browser ก็จะใช้เวลาน้อยมาก คือ ไม่กี่ millisecond

การทดสอบที่ 4 พบว่า เป็นการทดสอบโดยเพิ่ม no-cache ที่ header
ว่า <meta http-equiv=”cache-control” content=”no-cache”>
เปิดเว็บเพจ http://www.thaiall.com/html/onemillionv3.htm ครั้งแรก
ใช้เวลาไป 9562 millseconds
ให้ผลเหมือนกับกรณีทดสอบที่ 1 เมื่อทดสอบบน firefox และ chrome
แต่บน ie (internet explorer) 11
การ refresh ของ browser ใช้เวลา 3776 milliseconds หรือประมาณนี้
สรุปว่า ie ยอมรับคุณสมบัติ no-cache ทำให้การ refresh จะ load ข้อมูลมาใหม่ทุกครั้ง
และการ force reload ด้วยการกด Ctrl-F5 สามารถใช้ได้กับทุก browser ที่ทดสอบ

สรุปว่า การเปิดปิด script หลายครั้ง มีผลแตกต่างกับการเปิดครั้งเดียว
การนำไปใช้ให้เกิดประโยชน์ ขึ้นอยู่กับการออกแบบเว็บเพจ
และคุณสมบัติ no-cache ก็ใช้ได้กับบาง browser เท่านั้น ไม่ควรไว้วางใจ
และการโหลดภาพไม่มีผลต่อเวลาในการโหลดเว็บเพจ เพราะแยกส่วนกันชัดเจน

เล่าสู่กันฟัง เหตุที่ต้องลง 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 พบว่าไม่ผ่าน
สุดท้ายก็ผ่าน เพราะคำว่าหลายรอบนั่นหละครับ

เรื่องดีดี แสดงไม่ดีกับ firefox กับ chrome

header & footer in xhtml
header & footer in xhtml

บ่นตามปาะสาคนที่เด็ก ๆ เรียกว่า “ลุง”
ผมเป็นพวกมีอดีต เห็นเรื่องดีดีทีไร .. แล้วอดกลุ่มใจไม่ได้
เพราะเตรียมสอนจาวาแก่นักศึกษา แล้วพบ tag <DD>
ที่เคยใช้สิบกว่าปีก่อนแล้ว ในเว็บเพจต่าง ๆ ที่ต้องจัดย่อหน้า
พบว่า browser : firefox กับ chrome
แสดงผลผิดเพี้ยนไป แต่ ie ก็ยัง ok
จะให้ดีก็ต้องตามแก้ ตามเวอร์ชัน ตามตามกันไป .. จนหมดแรง

มี HTML Tag จำนวนไม่น้อยที่หายไปกับกาลเวลา
ที่มาตรฐานใหม่ไม่รองรับ เช่น <DD>
ในภาษา PHP ก็เช่นฟังก์ชัน split ซึ่งการเลิกบริการอาจมีหลายคำ
เช่น DEPRECATED หรือ Not available

แล้วก็ต้องไล่ตามมาตรฐานกันเรื่อยไป
1.  HTML 3
2. HTML 4.01
3. XHTML
4. HTML 5

ที่หนักสุด คือ HTML 5 ที่บอกว่ามาแล้ว (นานแล้วด้วย)
แต่ยังไม่เป็นที่สิ้นสุด ไม่เป็นมาตรฐานเดียว กำลังพัฒนาอยู่
เห็นเขาเรียกว่า ยืดหยุ่น (Flexible)
เพียงแต่ code เก่า ๆ ของผมไม่ยืดตาม ก็เลยเห็นปัญหาเป็นประจำ