สร้าง UI หน้าเว็บแบบ Timeline ด้วย HTML+CSS

เนื่องจากระบบที่กำลังพัฒนาอยู่ มีความต้องการแสดงผลข้อมูลในรูปแบบ Timeline ดังรูป เมื่อลองหาแนวทางดูพบว่ามี how to ที่เว็บไซต์ https://www.w3schools.com/howto/howto_css_timeline.asp ลองนำมาประยุกต์ใช้ โดยปรับสี เพิ่มเงา และส่วนแสดงผลรูป และไอคอนเข้าไป โดยใช้ https://getbootstrap.com/ เวอร์ชัน 5 เพื่อช่วยในการจัดตำแหน่งเนื้อหาด้านใน ก็จะได้ CSS และ HTML สำหรับนำไปใช้ในเว็บไซต์ดังนี้ HTML โดยในตัวอย่างได้นำโครงสร้าง html page และ ส่วนแสดงอีโมไอคอนออกเพื่อให้อ่านง่าย เห็นโครงสร้าง html ของ timeline ชัดเจน และต้องมีรูปอยู่ที่โฟลเดอร์ images (ภาพประกอบเนื้อหาของท่านเอง) ก็จะได้หน้าเว็บใกล้เคียงความต้องการ ดังรูปตัวอย่างนะครับ สามารถนำไปปรับใช้ โดยการปรับแก้ css และเพิ่มเติมส่วนแสดงผลอื่นๆได้ตามต้องการ

วิธีสร้างตาราง HTML Table จาก CSV File

โจทย์คือ ต้องสร้างระบบ เพื่อให้ผู้ใช้ สร้าง โครงสร้างแบบฟอร์ม ด้วย Excel แล้วต้องแปลงให้เป็น Web Page ซึ่ง จะต้องการตกแต่งด้วย Bootstrap หน้าตาต้นแบบเป็นแบบนี้ (ในที่นี้ใช้ Google Sheets แต่ก็ทำวิธีการเดียวกันกับ MS Excel) ถ้า ใช้วิธี Save As เป็น HTML ตรง ๆ จะได้หน้าตาประมาณนี้ ซึ่งจะยุ่งยากมาก ในการจัดการ และการควบคุมการแสดงผล วิธีการคือ !!! 1 Save As เป็น CSV 2 เปิดเว็บhttp://www.convertcsv.com/csv-to-html.htm 3 แล้ว Upload ไฟล์ หรือจะ Copy Paste ก็ได้ 4 ก็จะได้ plain HTML 5 เอาไปประกอบกับ … Read more

ทบทวนที่เรียนจากติว PhoneGap ด้วย HTML5 & Jquery Mobile

ผมต้องออกตัวก่อนนะครับว่า ไม่ได้เก่งในการเขียน Mobile Apps. เลยสักนิด เพียงแต่ได้ไปเข้าเรียนมา 2 วัน ผมรู้สึกว่าเป็นศาสตร์ที่น่าลองทำดู และไม่ควรให้มันจางหายไปหลังจากเรียน เดี๋ยววิทยากรจะเสียใจ อิๆ ผมจึงบันทีกไว้แบบใครอ่านแล้วไม่ชอบก็อย่าถือสาผมนะครับ ลองทบทวนจากที่เรียนใน workshop ติว “แนะนำและสอนการพัฒนาเบื้องต้นเกี่ยวกับ Application บนมือถือด้วย PhoneGap โดยใช้ HTML5 & Jquery Mobile” สภาพแวดล้อม – เป็นการติดตั้งทดสอบบน Windows 8 (32 bit) บนเครื่องโน้ตบุ๊ค HP ProBook 6450b RAM 4 GB 1. download JRE http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html 32bit ได้ไฟล์สำหรับติดตั้ง jdk-7u25-windows-i586.exe (64bit ได้ไฟล์สำหรับติดตั้ง jdk-7u25-windows-x64.exe) รันไฟล์ดังกล่าวเพื่อติดตั้งลงในวินโดวส์ 2. download ADT http://developer.android.com/sdk/index.html 32bit … Read more