responsive – iT Blog

ปรับขนาดจอภาพรองรับ responsive web design

ทำให้ดีที่สุด เพื่อคะแนน performance / optimization หรือ user experience ที่ดีที่สุด จึงกลับไปดูหัวข้อ ขนาดจอภาพ (screen resolution) ที่ถูกบันทึกไว้ บนระบบ website tracker / counter / web stats / web analytics / usage statistics / hit stats พบว่า โลกเราเปลี่ยนไปจาก พ.ศ. 2541 อย่างมาก

ปัจจุบัน ขนาดจอภาพ ยอดนิยมเป็น 1366*768 หรือ 1920*1080 แม้จะคลาดเคลื่อนกันบ้าง แต่ห่างจากที่ผมมองไว้ ที่ 800*600 แบบไม่เห็นฝุ่น ดังนั้นการออกแบบ responsive web design แบบ fixed width เพื่อควมคุม layout ให้ผู้ใช้รู้สึกดี จึงต้องปรับชุด resolution ที่รองรับกันใหม่ แต่ปีนี้ผมยังไม่ย้ายออกจาก comfort zone ที่ width 728px นะครับ ปรับเฉพาะที่ต่ำกว่าขนาดนี้เท่านั้น

สิ่งสำคัญในการปรับเทมเพจรุ่นนี้ (9.2) คือ วิเคราะห์ front-end design อย่างละเอียด เพื่อให้ได้คะแนน 400 เต็ม จาก pagespeed insights ซึ่งปัญหาสุดท้ายที่กว่าจะแก้ได้ก็นาน คือ การยกเลิกการ load css ที่ต้นแฟ้ม แต่แยกประกาศ style ในแท็ก head เฉพาะส่วนที่จำเป็น แล้วส่วนที่เหลืออยู่ในแฟ้ม css ที่รองรับงาน responsive แยกออกเป็นแฟ้ม แล้วค่อยดึงมาใช้หลัง onload ที่เขียนโค้ดไว้หลังปิดแท็ก html และทำงานแบบ async=true

สิ่งที่แก้ไม่ได้ที่ทำให้คะแนน pagespeed ไม่เต็ม 100 มี 4 เรื่องที่แก้ไม่ได้ คือ 1) กูเกิ้ลแอด ที่เรียกโค้ดภายนอก 2) histats หรือ truehits ที่เรียกโค้ดภายนอก 3) การโหลด js และ css จาก cdn จำนวนมาก 4) ขนาด DOM ที่ใหญ่เกินไป เค้าแนะนำว่าไม่ควรเกิน 1500 nodes

ส่วนผลการตัดโค้ดที่ทำให้คะแนนลดออกไป จนทำให้เหลือเฉพาะเนื้อหาจะได้คะแนน 400 เต็ม อยู่ใน link ด้านล่างครับ สามารถนำ url ไปโยนใส่ pagespeed ดูได้ ส่วนโฮมเพจที่ใช้จริงอยู่ที่ หน้าแรก thaiall ซึ่งได้คะแนน mobile คือ 37,100,57,100 เพราะมีปัญหา ใน 4 เรื่องข้างต้น

https://thaiall.com/web2/file_pagespeed.php?file=web2main
https://thaiall.com/web2/file_pagespeed.php?file=web2main&fieldset=blank

นักศึกษาด้านไอทีอย่างน้อยต้องทำ responsive เป็น

ถือว่าเป็นสิ่งจำเป็น
ที่นักศึกษาต้องรู้ว่าตัวเองเป็นใคร
Who am i?
เพราะไม่ใช่นักเรียนที่จะไปเข้า #ค่ายค้นหาตัวตน
แล้วหาว่า ตนเหมาะกับอาชีพใด
ถ้าเป็นนักศึกษาก็แสดงว่าเลือกแล้ว
ไม่ใช่กำลังจะเลือก
ตอนนี้มาได้ครึ่งทางแล้วที่จะไปสู่อาชีพที่คาดหวัง
ทุกหลักสูตรมีวิชามากมายต้องเรียนเชื่อมต่อกันเป็น jigsaw
กว่าจะได้ภาพสวยผืนใหญ่ ใส่กรอบ โชว์
ก็ใช้เวลาหลายปี ระหว่างทางต้องทบทวนเป็นระยะ
ว่าทำอะไร เรียนอะไร รู้อะไรไปแล้วบ้าง
หัวข้อต้องรู้มีมากมาย
แต่อย่างน้อยต้องรู้ว่าเรา ทำอะไรเป็นบ้าง
ในสายไอทีก็มีเรื่องเว็บเพจ (webpage)
โดยสิ่งที่ควรรู้ คือ Responsive web design
เพราะแนวโน้มชาวโลกจะขยับไปหา mobile device
ดังนั้นหัวข้ออบรมความรู้เบื้องต้น
เสนอว่าให้นักศึกษาเขียนเว็บเพจด้วย html
จำนวน 3 หน้า ตัวตน ผลงาน และตนเอง
คือ index.html project.htm aboutme.htm
แต่แสดงผลได้ในอุปกรณ์ขนาดต่าง ๆ ได้เหมาะสม

ฝากไว้กับ firebase.com หรือ wordpress หรือ facebook ก็ได้

http://www.thaiall.com/webmaster/responsive

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

หน้าโครงการ หรือโปรเจค (Project)
เป็นการขายตัวเรา (ถ้ามี linkin จะดีมาก)
ที่ผ่านมาสวมบท "นักศึกษา" แล้วทำอะไรไปบ้าง
มีงานอะไรที่เราทำส่งอาจารย์แล้วประทับใจ
เทอมหนึ่งเรียน 6 วิชา ๆ ละ 1 งานก็ปีละ 12 งาน
เลือกนำมาแบ่งปัน เพราะนั่นสะท้อนให้เห็น skill 
เว็บเพจหน้านี้จะบ่งบอกอัตลักษณ์ของเรา
ผลงานต้องเป็นที่ประจักษ์ อยู่ในความทรงจำไม่ได้
แนะนำว่าผลงานทุกชิ้นให้เขียนเป็นบล็อก
จะทำเอง ร่วมกัน หรือฟังเขามาก็เขียนบล็อกได้
แต่ถ้านักศึกษาไอทีจะต้องมีโฮมเพจเป็นของตนเอง
แล้วเชื่อมทุกอย่างเข้ากับ social media + blog
เนื้อหาในหน้านี้ มีรายละเอียดผลงานที่ครบถ้วน
มีที่มา เนื้อหา สรุป และลิงค์ดาวน์โหลดจะดีมาก
ทั้งหมดในหน้านี้ก็จะสะท้อน skill เพื่อขายตัวเรา

หน้าเกี่ยวกับเรา (About me)
ความเป็นส่วนตัวสำคัญมาก 
แต่การอยู่ในสังคมก็ต้องลดความเป็นส่วนตัวลงบ้าง 
และไม่เปิดเผยอะไรที่ไม่มีวัตถุประสงค์ที่ชัดเจน 
เราต้องเป็นนักประชาสัมพันธ์ตนเองอย่างมีเป้าหมาย
นักศึกษาต้องบอกว่าตนเอง
มี skill อะไร
มี project อะไรผ่านมือมาบ้าง
มี avatar ให้ว่าที่นายจ้างไปติดตามที่ไหน
มี experience กับอะไรที่เป็นงานอดิเรก 
มี interested กับอะไรที่เป็นแผนในอนาคต
แต่ถ้าทำงานในองค์กรเมื่อใด ระดับความเป็นส่วนตัว
จะแปรผันตามนโยบายขององค์กรทันที

Unobtrusive Javascript เป็นพื้นฐานการออกแบบเว็บไซต์ยุคใหม่

Unobtrusive Javascript คือ หลักการที่จะแยก javascript ออกไปจาก html
เพื่อให้การพัฒนา Responsive web design ง่าย
สอดคล้องกับการแยก style ออกจาก html ไปไว้ใน CSS
ยุคต่อไปของการพัฒนาเว็บไซต์จะเป็น responsive web design
การแยก html ออกจาก script และ css เป็นหลักการพื้นฐานก่อนเริ่มออกแบบ
โดยยึดว่า basic design มองไม่ที่ mobile device ก่อน
คือการมองจาก screen ที่มีข้อจำกัดที่สุดก่อน
http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
Unobtrusive JavaScript
http://www.siamhtml.com/%E0%B8%AA%E0%B8%AD%E0%B8%99%E0%B8%82%E0%B8%B1%E0%B9%89%E0%B8%99%E0%B8%95%E0%B8%AD%E0%B8%99-%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%97%E0%B8%B3-responsive-web-design/
http://8columns.com/articles/50009/1387278156096
http://web.stoms.co.th/2013/10/15/responsive-web-design/
—
ตัวอย่างแฟ้ม x1.htm
เขียน html แบบฝัง javascript ลงไปใน html tag
<body>
<input type=”text” name=”s1″ onchange=”window.status=’hello’;return true;” />
</body>
—
ตัวอย่างแฟ้ม x2.htm
เขียน html แบบเรียกใช้ javascript จาก html tag ซึ่งผูกเชื่อมกันชัดเจน
<head>
<script>
function s2(){ window.status = “hello”; }
</script>
</head>
<body>
<input type=”text” name=”s2″ onchange=”s2()” />
</body>
—
ตัวอย่างแฟ้ม x3.htm
เขียน html กับ javascript แยกกันเด็ดขาด แต่ฝากไว้ในแฟ้ม html เท่านั้น
<head>
<script>
window.onload = function() {
document.getElementById(“s3”).onchange = s3;
function s3(){ window.status = “hello”; }
}
</script>
</head>
<body bgcolor=yellow>
<input type=”text” name=”s3″ id=”s3″ />
</body>
—
ตัวอย่างแฟ้ม x4.htm
ทั้ง html กับ javascript และ css ต่างคนต่างอยู่ ใช้ include เข้ามา
<head>
<link href=”x.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”x.js”></script>
</head>
<body>
<input type=”text” name=”s41″ id=”s41″ />
<input type=”text” id=”s42″ />
</body>
—
ตัวอย่างแฟ้ม x.js
window.onload = function() {
var s41 = document.getElementById(“s41”);
s41.onchange = function() {
window.status = “hello”;
};
document.getElementById(“s42”).onclick = s42;
function s42(){ alert(“hello”); }
};
—
ตัวอย่างแฟ้ม x.css
body {
background-color: #ffff00;
}