มีอะไรต้องเก็บงำไว้ facebook.com เขามีบริการ save link หรือ post ไว้กลับมาอ่านได้

save หรือ unsave ก็ทำได้
save หรือ unsave ก็ทำได้

เวลามีลิงค์ดี ๆ ที่อยาก save ไว้ หรือโพสต์ที่เพื่อนขาเดฟ
เข้ามาร่วมแลกเปลี่ยนเรียนรู้กันทางสายวิชาชีพ
ถ้าชอบก็จะจัดเก็บไว้ มี 2 วิธีที่ผมทำประจำ และด่วนด้วย
1. ปกติแล้วผมจะแชร์เข้า private message
อาจเป็นของตนเอง หรือของเพื่อนสนิทสักคน
หรืออีกบัญชีหนึ่งที่สมัครไว้ใช้งาน
ทำโดย กด share แล้วเลือกชื่อคนที่จะแชร์ไป ผมมักทำเมื่อใช้อุปกรณ์
ปล. มีครั้งหนึ่งแชร์พลาด ส่งไปให้ อ.เกียรติ เพราะลำดับในรายการเปลี่ยน human error เลย

เข้า activity log ดูรายการที่ save ไว้
เข้า activity log ดูรายการที่ save ไว้

Kawin กับ Sun ชวนแลกเปลี่ยนเรื่อง responsive กับ bootstrap
เก็บไว้ครับ  https://www.facebook.com/ajburin/posts/10154188440133895

2. การ save ด้วยคุณสมบัติของ facebook เหมาะกับบน PC
ทำโดย คลิ๊กสามเหลี่ยมที่มุมบนขวาของโพสต์แล้วเลือก save post
หลังจาก save ไว้แล้ว ถ้าอยากดูที่ save ไว้ ทำตามนี้
– เข้า profile ของเรา
– เลือก view activity log ที่อยู่บนภาพปก
– มีหัวข้อ Filters ทางเมนูซ้าย คลิ๊กคำว่า More ใต้ Comments
– ก็จะพบคำว่า Saved ซึ่งเป็นตัวเลือกที่ 26 ใต้หัวข้อ Filters
– จะพบโพสต์ที่ saved แยกตามเดือน ไม่เก็บไว้ก็เลือก Delete ได้

ท่านใดชอบเก็บอะไรในเฟสบุ๊คไว้อ่านภายหลัง
ก็จะได้ประโยชน์กับบริการตัวนี้ครับ

ความแตกต่างของ 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>

หาข้อมูลขนาดจอภาพที่ใช้กันอยู่ในปัจจุบัน

ความละเอียดของจอคอมพิวเตอร์
ความละเอียดของจอคอมพิวเตอร์

ในอดีต สมัยหนุ่ม นั่งดูความละเอียดของจอภาพ (Resolution)
ก็มีอยู่ไม่กี่แบบ ที่จำได้ก็มี 1024*768 กับ 800*600 และ 640*480
ส่วนจอ 1280*1024 สมัยนั้นไกลฝันมาก ได้แต่มอง ๆ
หลัง ๆ มาเค้าใช้จอกันหลายแบบ หัวหน้ายังชวนใช้ตระกูลไออยู่พักหนึ่ง
ต่อมาหัวหน้าและผองเพื่อน ก็เปลี่ยนเป็นตระกูลซัมกันหมดแล้ว

ข้อมูล resolution ของ gotoknow.org แสดงใน truehits.net
ข้อมูล resolution ของ gotoknow.org แสดงใน truehits.net

วันนี้ 5 มิ.ย.59 หาข้อมูลความละเอียดว่าชาวโลกเค้าไปถึงไหน
ก็เข้าไปดูระบบรายงานพบว่า ชาวบ้านชาวช่องเข้าใช้จอแบบไหน
เวลาออกแบบเว็บเพจทั้งความกว้าง และความสูง ก็จะได้เข้ากับเค้าได้
สถิติเดือนพฤษภาคม 2559 ของ gotoknow.org ใน truehits.net
ที่เก็บไว้นั้น น่าจะแสดงเพียง 60 แบบ เห็นข้อมูลแล้วก็ต้องพิจารณาตัวเลข
ผู้ออกแบบเว็บเพจจะออกแบบให้จอภาพเหมาะกับทั้ง 60 แบบ นั่นก็เกินไป
ที่สนใจมี 3 แบบ คือ
กว้าง 360*640 (Galaxy S5)
กว้าง 320*568 (iphone5)
กว้าง 375*667(iphone6)

ส่วนที่เกิน 375 หรือ 411*731(Nexus 5X)
หรืออย่าง ipad ที่กว้าง 768*1024 ผมจัดไปอยู่ในกลุ่ม desktop หมดครับ
http://www.truehits.net/module/stats.php?G_CODET=r0028004&t=2&y=2016&m=05&d=&code=4&Web=gotoknow.org
#webdeveloper #responsive #viewport #pagespeed

สมาร์ทโฟนของไมโครซอฟท์ อย่าง Lumia ไม่น่าจะตายได้ แต่ปี 2559 ก็ต้องออกตลาดไป

ที่มาของคำว่า Lumia ที่ชวนให้ชาวสเปนนึกถึง แสง และ สไตล์
ส่วนในฟินแลนด์ หมายถึง หิมะ
http://news.siamphone.com/news-06958.html

หลายปีก่อนหน้านี้ Nokia พ่ายแพ้ในตลาดโทรศัพท์ที่เปลี่ยนไปเป็นสมาร์ทโฟน
จนต้องขายกิจการ เพื่อพยุงกิจการให้อยู่ต่อไป
เมื่อ Microsoft ตกลงซื้อกิจการ Nokia มูลค่า 7.2 พันล้านเหรียญ เมื่อปี 2556
สถานการณ์ก็ไม่ได้ดีขึ้น ตามที่ Microsoft คาด
http://apptube.blogspot.com/2013/09/microsoft-nokia-72.html

ในสงครามสมาร์ทโฟน ไม่ได้โรยด้วยกลีบกุหลาบ
มีการเปลี่ยนชื่อจาก Nokia Lumia เป็น Microsoft Lumia
แต่ก็ไม่ทำให้ยอดขายเพิ่มขึ้น พบว่า พฤษภาคม 2559
วินโดวส์ โฟน มีส่วนแบ่งตลาดในตลาดโลกไม่ถึง 1 เปอร์เซ็นต์ และลดลงต่อเนื่อง
จึงมีนโยบาย (Policy) “ลดขนาดธุรกิจสมาร์ทโฟน” ด้วยการให้พนักงาน 1850 ตำแหน่งออกงาน
ส่วนใหญ่เป็นอดีตพนักงานของโนเกียในฟินแลนด์
http://www.manager.co.th/CyberBiz/ViewNews.aspx?NewsID=9590000052692

smartphone os in Q4 of 2015
smartphone os in Q4 of 2015

ข้อมูล Market Share ในไตรมาสที่ 4 ของปี 2015 โดยประมาณ
1. Android 80.7%
2. iOS 17.7%
3. Windows 1.1%
4. Blackberry 0.2%
5. Other 0.2%
http://www.macthai.com/2016/02/19/ios-android-market-share-q4-15-gartner/

คลิ๊ปลูกน้องไม่พอใจถูกหัวหน้า จึงเอาคืนโดยแกล้งกลับ

อุ้มหัวหน้า
อุ้มหัวหน้า

เกิดเป็นลูกน้อง ระวังใจตัวเองไว้หน่อย
พลาดพลั้งยั้งใจฆ่าหัวหน้าไป จะไม่คุ้มเอา
แต่ถ้าลูกน้องยึดหลัก “ฆ่าได้ หยามไม่ได้” .. ก็เหนื่อยนะ

คนขับรถธนาคารแค้นที่ผู้จัดการธนาคารจะไล่ออก
ทีแรกจะฆ่าด้วยซ้ำ แต่เปลี่ยนใจเป็นขโมยเงิน
หวังให้เค้าถูกย้าย หรือถูกไล่ออก ไม่ได้ประสงค์ต่อทรัพย์
ด้วยการเจาะตู้เซฟแบงค์กรุงเทพ
เป็นลูกจ้างชั่วคราว อายุ 36 ปี
https://www.youtube.com/watch?v=IjYc-Smet8E
คลิ๊ปนี้เค้าห้ามฝัง

การทะเลาะกับหัวหน้าก็มีเยอะนะครับ
เช่น
พ.ค.59 ในสถาบันการศึกษา ระดับอุดมศึกษา
ที่ ดอกเตอร์ 3 คนฆ่ากันตาย
เค้าก็ว่าเป็นปัญหาจากธรรมาภิบาล
กรณีนี้ก็คงเป็นธรรมาภิบาลเหมือนกัน
http://www.matichon.co.th/news/142126
ก.ย.55 หนุ่มโรงงานยิงหัวหน้าหมดโม่
ก็เพราะแค้นที่ถูกด่าเรื่องงานอย่างรุนแรง
http://www.thairath.co.th/content/293746
พ.ย.57 ภาโรงแค้นถูก ผอ.โรงเรียน ดุด่าเป็นประจำ
คว้าปืน ยิ่งต่อหน้าเพื่อนครูกลางวงเหล้า
http://hilight.kapook.com/view/111970
ธ.ค.58 ผู้พิพากษาสมทบหญิง และนักธุรกิจอหังสาริมทรัพย์ และอีกหลายอย่าง
ถูก 5 ลูกน้องอุ้มฆ่า แล้วไปทิ้งในอ่างเก็บน้ำ แต่รอดมาได้
เพราะจับได้ว่าลูกน้องทุจริต ปลอมเอกสารที่ดินมูลค่า 200 ล้าน แล้วจะฟ้อง

ถ้าไม่ชอบหัวหน้าเค้าทำกันยังไงบ้างนะ
อาทิ สั่งอย่างทำอย่าง ไม่ทำงานที่รับปาก ปล่อยเกียร์ว่าง เขี่ยงานส่งไปเลย
หยุดงานบ่อย มางานสาย พักเที่ยงนาน กลับบ้านก่อนเวลา รวมตัวกันออกมาถือป้ายประท้วง
รวมหัวกันนินทาหัวหน้าในห้องน้ำ ซื้อขนมที่หัวหน้าไม่ชอบไปฝาก

แต่ถึงขนาดเจาะเซฟหัวหน้า  หมดโม่ หรืออุ้มทิ้งน้ำ ก็ไม่ควรทำนะครับ

โลกสวยงาม จะเห็นบางด้านที่มืดมน โลกไม่สวยก็จะเห็นว่ามืดไปซะทุกด้าน

beautiful world
beautiful world

25 พ.ค.59 เห็นอาจารย์ใหญ่แชร์เรื่องนี้เข้ามาในกลุ่ม
เป็นประเด็นเผ็ดร้อนว่าวงการอุดมศึกษามีด้านมืด
จากหัวข้อบทความใน posttoday.com มี 3 ด้าน
1. แย่งชิงผลประโยชน์
2. เล่นพวกพ้อง
3. สองมาตรฐาน
พอเห็นหัวข้อผมก็รู้สึกสนใจขึ้นมาเลย
ทำให้นึกถึงคำว่า “โลกนี้สวยงาม (beautiful world)
โลกคงสวยงามถ้าโลกนี้มืดเฉพาะอุดมศึกษา และปัญหานี้มีเฉพาะอุดมศึกษา

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

หลักธรรมมาภิบาล (Good governance) เป็นแนวทางในการบริหารจัดการที่ดี
ผู้บริหารสถาบัน/คณะวิชา/หน่วยงานยึดเป็นแนวปฏิบัติก็เชื่อได้ว่าจะมีการพัฒนาคุณภาพและประสิทธิภาพการบริหารจัดการการศึกษาที่ดี
ซึ่งเป็นการปกป้องผลประโยชน์ของผู้มีส่วนได้ส่วนเสียด้านคุณภาพทางวิชาการและเปิดโอกาสให้ทุกฝ่ายที่เกี่ยวข้องมีส่วนร่วมอย่างเสมอภาค

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

1. หลักประสิทธิผล (Effectiveness)
2. หลักประสิทธิภาพ (Efficiency)
3. หลักการตอบสนอง (Responsiveness)
4. หลักภาระรับผิดชอบ (Accountability)
5. หลักความโปร่งใส (Transparency)
6. หลักการมีส่วนร่วม (Participation)
7. หลักการกระจายอำนาจ (Decentralization)
8. หลักนิติธรรม (Rule of Law)
9. หลักความเสมอภาค (Equity)
10. หลักมุ่งเน้นฉันทามติ (Consensus Oriented)

http://thaiall.blogspot.com/2014/07/blog-post_20.html
อันที่จริงผมว่าโลกนี้ก็ยังสวยงามอยู่นะครับ
แต่ถ้าจะให้มองว่าโลกนี้มีที่มืดอยู่แค่กลุ่มคนกลุ่มนั้น
ก็ทำใจลำบากหน่อย น่าจะมีกันทุกกลุ่ม ทุกประเภทองค์กรกันเลยรึเปล่า
เพราะเห็นในข่าวว่าเรามีปัญหา 3 ด้านนี้ตลอด
1. แย่งชิงผลประโยชน์ (advantage)
พอเป็นผลประโยชน์ก็ต้องแย่งกันสิครับ
ผลประโยชน์ไม่เข้าใครออกใคร
ดร.อาทิตย์ พึ่งบอกว่า ตำแหน่งอย่างว่าซื้อกันเป็นล้าน
หรือเขาหัวโล้นที่น่านก็เป็นเรื่องของผลประโยชน์ของคนที่นั่น
หรือข่าวทุจริตอื่น ๆ ก็เป็นเรื่องผลประโยชน์ทั้งนั้น
ทีวีดิจิตอล ไม่จ่ายงวด 3 ที่เหลือเค้าจ่ายกัน
ก็เป็นเรื่องผลประโยชน์ จากเค้กก้อนเล็ก ๆ ก้อนหนึ่ง
2. เล่นพวกพ้อง (partisan)
ที่นิคมอุตสาหกรรม รับคนไปทำงาน
บางบริษัทมีคนหมู่บ้านนั้น ทั้งหมู่บ้านเพราะ HR ชวนมา
บางบริษัทรับเฉพาะมหาวิทยาลัย X เพราะ HR ชวนมา
ผมไปซื้ออาหารเจ ขนาดชวนรับพระ ยังให้แบ่งพวกเลย
ดูกีฬา ยังแบ่งข้างเชียร์ ไม่รู้จักสักคน ก็ยังอุตสาห์เลือกพวกจนได้
3. สองมาตรฐาน (double standard)
สอบโควต้า รับเด็กในเขต รู้ไหมลูกใคร
มาตรฐานหนึ่งสำหรับคนกลุ่มหนึ่ง
อีกมาตรฐานสำหรับคนนอกกลุ่ม เป็นเรื่องปกติไปแล้ว
ถ้าเป็นคนของเรา เราจะปฏิบัติกับเค้าอย่างหนึ่ง
ถ้าเป็นคนของคนอื่น เราจะปฏิบัติกับเค้าอีกอย่างหนึ่ง
เป็นมาตรฐานที่แบ่งแยกตามผลประโยชน์ทั้งนั้น

สรุปว่า .. ผมก็แค่แลกเปลี่ยนความคิดความเห็น
เพราะรู้ว่าเป็นปัญหาที่เป็นธรรมชาติ และอาจารย์ท่านก็หยิบมาพูด
เพื่อที่จะแก้ไขให้ดีขึ้น
เข้าใจ และเห็นด้วย
http://www.posttoday.com/analysis/interview/433596

ข้อมูลโรงเรียนทั่วประเทศที่ได้จาก Open Government Data ของรัฐบาลไทย

ข้อมูลโรงเรียนในประเทศไทยมีอีเมลไม่ถึงครึ่ง
ข้อมูลโรงเรียนในประเทศไทยมีอีเมลไม่ถึงครึ่ง

อ่านพบจาก techtalkthai.com ว่าเว็บไซต์ Data.go.th
ที่เป็นเว็บไซต์ให้บริการข้อมูล Open Government Data ของรัฐบาลไทย
มีข้อมูลมากมายที่มีการเผยแพร่
ทำให้เราได้อันดับที่ 42 ในปี 2015 Opden Data Index
จากที่เคยอยู่ในอันดับที่ 59 ในปี 2014
หนึ่งในข้อมูลที่เผยแพร่ พบว่ามีข้อมูลของโรงเรียนทั่วประเทศไทย
กว่า 46,259 แห่งโดยกระทรวงศึกษาธิการ
มีวัตถุประสงค์เพื่อให้ภาคธุรกิจได้นำข้อมูลเหล่านี้ไปประยุกต์ใช้สร้างสรรค์ให้เกิดการพัฒนา
ลองอ่านข้อมูลจาก excel พบ field น่าสนใจเยอะเลย
14 fields ได้แก่

1. SchoolID
2. SchoolName
3. SubDistrict
4. District
5. Province
6. PostCode
7. SchoolType
8. Department
9. Telephone
10. Fax
11. Website
12. Email
เห็น อ.ทรงเกียรติ นำ excel มาประมวลผล ในส่วนของ email
พบว่าโรงเรียนมากกว่า 10000 โรงเรียนใช้บริการของ hotmail.com
แต่มีเพียง 22223 จาก 46259 เท่านั้นที่มีอีเมลติดต่อโรงเรียน
หรือคิดเป็นร้อยละ 48.04 เท่านั้นที่มีอีเมล
https://www.facebook.com/photo.php?fbid=1192138350810557&set=a.111585805532489.13446.100000432096291
13. Latitude
14. Longitude

ในแฟ้ม excel ชื่อ ExportSchoolClickEdu_2.xlsx
ไม่มีการอธิบายข้อมูลมากนัก แต่คำอธิบายไปอยู่ใน json ที่ให้ download
เมื่อดาวน์โหลดออกมาผ่าน json_decode พบว่ามีข้อมูล 23 รายการดังภาพ
รอบต่อไปก็จะได้ใช้ข้อมูลจาก json ได้เลย รายละเอียดใน json มีดังนี้

AccessLevel = Public
AverageScore = 0
Category = การศึกษา
ContactEmail = in@ega.or.th
ContactName = สำนักงานรัฐบาลอิเล็กทรอนิกส์ (องค์การมหาชน)
CreateDate = 2559-05-23T00:00:00.000+07:00
DataDictionary =
DataSetItems = Array
Description = ข้อมูลพื้นฐานสถานศึกษา ปีการศึกษา 2558
Frequency = Quarterly
GeoCoverage = Thailand
Id = 8548e3ab-00bf-4eae-b29a-156a4aa52c0d
IsNationalStat =
Name = ข้อมูลพื้นฐานสถานศึกษา ปี 2558
OpennessScore = 2
PublishedDate = 2559-05-23T00:00:00.000+07:00
PublisherOrg = กระทรวงศึกษาธิการ
Status = Published
TempEndDate = 2558-12-31T00:00:00.000+07:00
TempStartDate = 2558-01-01T00:00:00.000+07:00
URL = https://data.go.th/DatasetDetail.aspx?id=8548e3ab-00bf-4eae-b29a-156a4aa52c0d
UpdateDate = 2559-05-23T13:52:15.297+07:00
VoteCount = 0

แข่ง Thailand CTF

ผู้ชนะแข่ง Thailand CTF 2015
ผู้ชนะแข่ง Thailand CTF 2015

http://pantip.com/topic/34453949
อ่านสนุกดีกับประสบการณ์แข่งเก็บธง (Capture The Flag)
ใน Thailand CTF
และต้องรักษาธงของตนเองไม่ให้ถูกเก็บไป
โดยโจทย์กำหนดให้ผู้แข่งมีหน้าที่แก้ปัญหา หรือแกะข้อมูลออกมา
แบ่งเป็นทีม ๆ ละไม่เกิน 3 คน มีสองรอบ คือ รอบออนไลน์ คัดให้เหลือ 8 ทีมสุดท้าย
แนวโจทย์คือ Reverse Engineering การถอดรหัส และเว็บไซต์
http://blog.cloudian.in.th/2015/10/12/thailand-ctf-story/
จัดโดย สพธอ. (สำนักงานพัฒนาธุรกรรมทางอิเล็กทรอนิกส์)
(ETDA : Electronic Tranactions Development Agency (Public Organization))

Thailand CTF 2015
แข่งทางเว็บไซต์ http://www.thailand-ctf.org
รอบคัดเลือก 5 – 6 กันยายน 2558
เพื่อคัดเลือกทีมผู้เข้ารอบ 8 ทีมสุดท้าย
แข่งขันในรอบชิงชนะเลิศ 5 – 6 ตุลาคม 2558
เพื่อหาทีมผู้ชนะเลิศ และเป็นตัวแทนประเทศไทย
ไปร่วมการแข่งขัน CTF บนเวทีระดับอาเซียน และระดับโลกต่อไป
http://www.it24hrs.com/2015/thailand-ctf-competition-2015/

8 ทีมสุดท้ายที่เข้ารอบ
1. ทีม Pwnladin
2. ทีม asdfghjkl
3. ทีม wizard_of_skn
4. ทีม Take_off_your_shoes
5. ทีม J0hnTh3Ripp3r
6. ทีม null
7. ทีม NyanHack
8. ทีม qwerty
https://www.techtalkthai.com/etda-announce-eight-final-team-thailand-ctf-competition-2015/

ถึงยุค responsive web design มาได้พักหนึ่งแล้ว

 

responsive web design
responsive web design

เดี๋ยวนี้ .. เขียนเว็บหนึ่งหน้า ต้องนั่งออกแบบกันหน่อยว่า
จะให้เข้ากับอุปกรณ์ใด ขนาดเท่าใด
สมัยก่อน คิดว่าจะให้เข้ากับจอขนาดเท่าใด
เช่น ใคร ๆ ก็ใช้จอใหญ่ ออกแบบให้มี 4 คอลัมก็จบ
ก็จะได้รูปแบบที่เหมาะสมกับจอขนาดใหญ่เท่านั้น
เมื่อเปลี่ยนจอภาพเป็นขนาดอื่น ก็จะไม่เปลี่ยนไปตามอุปกรณ์
เช่น ใช้สมาร์ทโฟน แต่แสดง 4 คอลัม เค้าก็จะเห็นได้ไม่หมด
หรือต้องคอยเลื่อน scroll bar ขยับไปมา ซึ่งไม่สะดวก

แต่เดี๋ยวนี้ ต้องคิดว่าจะให้เข้ากับจอขนาดเท่าใดบ้าง
โดยเขียนเว็บเพจ 1 หน้า แต่ปรับการแสดงผลอัตโนมัติ
ให้เหมาะสมกับแต่ละจอ
จอเล็กก็แสดง 1 คอลัม
จอกลางอย่างแท็บเล็กก็แสดง 2 คอลัม
จอคอมพิวเตอร์ตั้งโต๊ะก็แสดง 3 คอลัม
ส่งไปแสดงทางโปรเจคเตอร์ก็แสดง 4 คอลัม

พบฟังก์ชันใน css คือ @media ()
ใน () ห้ามมีเครื่องหมาย ; ต่อท้าย
ถ้ามีก็จะทำให้ responsive ไม่ทำงาน
แต่ ; ใช้กับการแบ่งระหว่าง properties อื่นใน css ได้
ยกเว้นอย่าใช้ ; ปิดท้ายค่าที่ส่งไปใน ()

ตัวอย่าง code

<html><head><style type=”text/css”>
.m_still, .m_hidden{width:728px;}
/* @media screen and (max-width:320px;) { */
@media screen and (max-width:320px) {
.m_still{visibility:visible;width:300px;}
.m_hidden{visibility:hidden;display:none;}
}</style></head><body>
<table class=”m_still” style=”background:yellow;”><tr><td>a</td></tr></table>
<table class=”m_hidden” style=”background:green;”><tr><td>b</td></tr></table>
</body></html>