ตัวอย่าง CSS ใน HTML (Joom.htm)

CSS (Cascading Style Sheets) คือ ภาษาคอมพิวเตอร์สำหรับกำหนดรูปแบบในเอกสาร HTML หรือเรียกว่า สไตล์ชีต ที่ใช้กำหนดรูปแบบ (Layout) สีอักษร สีพื้น ตัวอักษร การจัดวาง ระยะห่าง เส้นขอบ เป็นต้น มีรูปแบบ Syntax เฉพาะตัว ได้รับการกำหนดมาตรฐานโดย W3C การใช้ CSS มี 3 แบบ คือ Inline, Internal และ External CSS

เรื่อง 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 และ การทำเมนู Responsive แบบ Top Nav หากจะทดสอบการปรับแต่ง css ทำได้ที่ w3schools.com

CSS คือ ภาษาคอมพิวเตอร์สำหรับกำหนดรูปแบบในเอกสาร HTML เรียกว่า สไตล์ชีต ที่ใช้กำหนดรูปแบบ สีอักษร สีพื้น ตัวอักษร การจัดวาง ระยะห่าง เส้นขอบ เป็นต้น มีรูปแบบ Syntax เฉพาะตัว ได้รับการกำหนดมาตรฐานโดย W3C การใช้ CSS มี 3 แบบ คือ Inline, Internal และ External CS จากตัวอย่างในรหัสต้นฉบับ แฟ้ม joom.htm ที่เป็นอัลบั้มแบบ static ถูกทำเครื่องหมายไว้ 6 จุด เพื่อใช้ชี้ให้เห็นในสิ่งที่น่าสนใจ ดังนี้ 1) แฟ้มเก็บ css ที่เก็บไว้ภายนอก แต่อยู่ในเครื่องบริการของตนเอง ทำให้เว็บเพจอื่นโหลดไปใช้ได้ นำเข้าได้ด้วย link tag 2) เขียน css ไว้ในเว็บเพจ และเรียกใช้ได้เฉพาะในเว็บเพจนั้น เขียนอยู่ใน style tag 3) ใน style tag สามารถกำหนด ขนาด media สำหรับเรียกใช้ css แต่ละชุดได้ เช่น mobile, desktop, notebook ก็จะแสดงผลแตกต่างกันไปตามขนาดหน้าจอ 4) มี css ที่ถูกพัฒนาให้ใช้ร่วมกับ Pure Javascript ที่ทำให้แสดงผลบนเว็บเพจแบบ dynamic และถูกใช้อย่างแพร่หลาย สามารถเรียกใช้ผ่านเครื่องบริการ CDN (Content Delivery Network) ได้ฟรี 5) การประกาศ css แบบ in-line ทำให้มีผลทันทีใน tag นั้น เช่น ประกาศบน div ใด ก็จะมีผลเฉพาะใน div นั้น หากอยู่นอกเหนือขอบเขต ก็จะไม่มีผล การประกาศใช้ที่จุดใด จึงต้องคำนึงถึงขอบเขตของการนำไปใช้ 6) การประกาศ css มักอยู่ในรูปของ class แล้ว tag ต่าง ๆ สามารถเรียกใช้ class ได้ และยังเรียกใช้หลาย class พร้อมกันได้ ซึ่งการตรวจสอบค่า css ในระหว่างแสดงผลบน browser เช่น chrome สามารถกด F12 แล้วใช้ Developer Tools เข้าไปตรวจสอบ หรือทดสอบแก้ไข แล้วการแสดงผลจะเปลี่ยนไปทันที ทำให้กลับไปแก้ไขโค้ดทำได้ง่ายขึ้น

จ๋อมเว็บเพจ (Joom webpage)

https://www.thaiall.com/java/indexo.html

โปรแกรมจัดการภาพเก่า และเล็ก แต่เจ๋ง

irfanview by Irfan Skiljan, Graduate of Vienna University
irfanview by Irfan Skiljan, Graduate of Vienna University

วันนี้ฤกษ์ดี (600716) หลังใช้โปรแกรม Irfanview
ดึงข้อมูล Miss Grand 2017
http://www.thaiall.com/actress/missgrand2017
ว่าสาวงามทั้ง 77 จังหวัด แต่ละจังหวัดมีภาพชื่ออะไร
เพื่อนำมาเตรียมข้อมูลในแบบ JSON สำหรับทำ PWA
ยิ่งเล่าก็ยิ่งเลยเถิด มาจับประเด็นที่ Irfanview กันดีกว่า
http://www.irfanview.com/

ประเด็นที่อยากพูดถึงวันนี้
1. โปรแกรม irfanview มีถึงรุ่น 4.44 ณ 16 กรกฎาคม 2560
แต่ผมยังใช้รุ่น 3.51 ตัวเล็กแค่ 635 KB เท่านั้น
Copyright (C) 1996-2001 by Irfan Skiljan, Graduate of Vienna University
2. การใช้โปรแกรมเพื่อเก็บชื่อภาพ และข้อมูลในภาพ
มีขั้นตอนคือ view ภาพก็จะเห็นข้อมูลในภาพ เช่น จังหวัด หรือ ชื่อนางสาว
แล้วกดปุ่ม F6 จะเข้า Rename แต่กดปุ่ม Ctrl-C เพื่อคัดลอกชื่อ
กดปุ่ม Alt-Tab กระโดดไป Editor
เพื่อวางข้อมูลด้วย Ctrl-V เป็นการวางชื่อแฟ้มที่ได้ในตำแหน่งที่เหมาะสม
แล้วพิมพ์ชื่อจังหวัดไปคู่กัน
3. ทำภาพ Transparent ก็ทำตอน Save as เลือก Transparent color
สกุล .gif แต่ภาพต้องมีจำนวนสีไม่มากตามคุณสมบัติของ .gif นะครับ
4. ทำแฟ้ม gallery อย่างรวดเร็ว ก็เลือก File, Thumbnails
จากนั้นเลือก File, Save selected thumbs as HTML file
5. ถ้ามีแฟ้มจำนวนมาก และต้องการ rename ให้ชื่อแฟ้มมีลำดับ
ก็ทำโดยเลือก File, Batch Conversion/Rename

ดาวน์โหลดภาพจาก FB ไปเก็บไว้ใน photos.google.com

pan cake
pan cake

เคยเห็นเพื่อนถ่ายภาพ และแบ่งปันภาพ ผ่านเครือข่ายสังคม
เป็นพฤติกรรมที่เกิดขึ้นหลายครั้ง จนผมเรียกว่าปรากฎการณ์
เท่าที่เห็นมา ภาพเหล่านั้นมีความสำคัญ
ด้วยเชื่อว่าภาพเหล่านั้นสำคัญ และไม่ต้องการให้หายไปในอนาคต
และต้องการสำเนาไว้นอกแหล่งเดิม และแบ่งปันเป็นสาธารณะ
จึงน่าจะคัดลอกมาเก็บไว้ แล้วไปแบ่งปันในสังคมอื่น หรือสื่ออื่น
อาจเปิดเป็น gallery ให้ใคร ๆ เข้าชมก็น่าสนใจ
จึงเสนอเพื่อนให้ดำเนินการดังนี้
1. ใน page กับ timeline ยกเว้น group นั้น
มีบริการ download album มาได้ทั้งอัลบั้ม
คือ คัดลอกภาพทั้ง album ออกมาเป็น .zip ได้
2. ภาพในแฟ้ม .zip จะเรียงลำดับตามตัวเลข
เริ่มต้นจาก 1 ไปเรื่อย ๆ เมื่อส่งภาพใหม่เพิ่มเข้าไปในอัลบั้ม
และดาวน์โหลดอัลบั้มใหม่ พบว่า ภาพใหม่จะมีเลขต่อท้ายภาพเดิม
หากในอัลบั้มมีภาพจำนวนมาก ก็ไม่ต้องเกรงว่าจะสับสนในภายหน้า
การเรียงภาพใหม่ต่อท้ายภาพเดิมทำให้ไม่สับสน
แต่วันที่ของภาพใน .zip จะเป็นวันที่ download ไม่มีวันที่ upload มาด้วย
3. มีบริการเก็บภาพโดยผู้ให้บริการรายอื่นอีกมากมาย
แต่ของ http://photos.google.com ซึ่งเป็นอีกบริการหนึ่งของ google
สามารถเชื่อมต่อกับ smartphone ช่วยให้เราสำรอง และแบ่งปันได้ง่าย
มีแอพทั้ง Google play บน Android และ App store บน iOS
เมื่อเก็บไว้แล้ว หากต้องการภาพไปใช้ก็มีบริการ Download Album โดยง่าย
จุดดีของแฟ้มภาพใน .zip ของ google คือ วันที่อัพโหลดยังอยู่
4. หลังเก็บใน photos แล้ว
ก็ยังนำภาพแชร์เป็น gallery ได้โดยง่ายเช่นเดียวกับบริการของค่ายอื่น
แต่ลิงค์จากการแชร์จะเป็น short url เมื่อแปลงเป็น full url แล้ว
ก็ยังไม่สามารถนำไปใช้ใน iframe หรือ frame ได้ ต้องเปิดเป็น top frame
5. เนื่องจากผมมีบัญชีของ gmail.com อยู่แล้ว ก็ใช้ซะเลย ไม่ได้ใช้ค่ายอื่น
เป็นการทบทวน และจัดระเบียนภาพใน FB ไปพร้อม ๆ กัน
เช่น
ภาพชุด “ประชุม 580914-15 ประชุมเหล้าบุหรี่ กทม.
https://goo.gl/photos/KacxawnuJdPrikhe8
ภาพชุด “NW
https://goo.gl/photos/oxJQX1CKuPKMxmhJ7

ก่อน และหลัง
ก่อน และหลัง

[นิยามศัพท์]
พฤติกรรม (Behavior) คือ การแสดงและกิริยาท่าทาง ที่เป็นการตอบสนอง
ของระบบหรือสิ่งมีชีวิตต่อสิ่งเร้าหรือการรับเข้าทั้งหลาย
ไม่ว่าจะเป็นภายในหรือภายนอก มีสติหรือไม่มีสติระลึก
ชัดเจนหรือแอบแฝง และโดยตั้งใจหรือไม่ได้ตั้งใจ [wiki]
ปรากฏการณ์ (Phenomenon) คือ สิ่งที่อุบัติขึ้น และปรากฏให้เห็น