Posts Tagged ‘css’
box model คืออะไร
ข่าวโครมครามตามชื่อที่พึ่งออกมาตามชื่อว่้า google chrome นะครับของช่วงนี้ที่ google เองได้พัฒนา browser ออกมาเองเลย ทำให้เกิดเป้นข้อสงสัยกันเยอะมากว่า มันจะดีจิงเหรอ แล้ว google ทำออกมาเพื่อที่จะครองตลาดทั้งหมดหรือเปล่า เพราะใน ตลาด คอมพิวเตอร์เองแล้ว google เหลืออีกไม่กี่อย่างที่ยังไม่ครอบคลุมไปถึง เช่น Opetating System แล้ว ก็ สร้างเครื่องขึ้นมาใช้เอง
แต่คนที่มีเงินทุน การสร้างสรรค์สิ่งใหม่ๆ ขึ้นมาก็คงไม่แปลกอะไรนะครับแต่ครอบครองมากเกินไปก็ไม่ดีอีกเพราะมันผูกขาดเกินไป หุหุ
พูดกันยาวนะครับสำหรับเรื่องนี้ ผมก็ได้ลองใ้ช้แล้วแหละครับสำหรับ google chrome เป็นที่พอใจสำหรับผมนะครับ เพราะไม่ห่วงเรื่องการกิน ram เพราะ้เด่วนี้ก็ ram 2GB กันหมดแล้ว ไม่ได้เล่นเกมไป เปิด browser ไปซะหน่อย ขอให้มันใช้ได้อย่างใจพอแล้ว
จะว่าไป Browser เองก็เป็นปัญหาหลายอย่างให้คนทำ web application นะครับเพราะเนื่องจากใช้ engine ต่างๆกันทำให้เขียน application ขึ้นมาแล้วรันไม่ได้กับทุกๆ Browser หรือไม่ก็ต้อง บักกันตาเหลือกเลยทีเดียว Google Chrome ก็เหมือนกัน จากที่ผมใช้นะครับ เรื่องของการแสดงผลที่ เค้าทำเป็นการ์ตูนออกมาว่าได้ Test แล้วเป็นล้านๆหน้านั้น ก็ยังมีทะแม่งๆ อยู่นะครับ
วันนี้ก็เลยนะเสนอ อะไรที่เป็นมาตราฐานซะหน่อยครับ นั่นก็คือ Box Model ครับ
หลายๆ คนอาจจะไม่เคยได้ยินคำว่า Box Model เลยก็ได้นะครับ แต่จะว่าไปแล้ว Box Model นี้เป็นพื้นฐานของ CSS เลยก็ได้ซึ่งความจริงก็พอที่จะรู้ๆ กันอยู่แล้วแต่ไม่รู้ว่ามันคืออะไรนั่นเอง
Box Model เองเป็นหนึ่งบทของ W3 เลยนะครับ เป็นหลักการของ CSS http://www.w3.org/TR/CSS2/box.html

จากรูปนะครับจะเห็นได้ว่าเป็นโครงสร้างของ margin กับ padding นั่นเองซึ่งเป็น model ในการทำงานของ CSS ที่ Browser ทำงานเลยครับ จะทำให้รู้ว่า Content เอง อยู่ตรงใหน ถ้าเล่น google chrome เองแล้วก็จะเห็นว่า google chrome เอา box model มาทำงานด้วย
ถ้าเราเข้าไปที่เมนูควบคมบนขวามือ แล้วเข้าซอนโซน javascript
เราจะเห็น box model อยู่ กับการ process css มันก็จะบอก แต่ละ tag เลยว่า เนื้อที่เ่ท่าใหร่กว้างยาว ทำให้ประมวลผลได้อย่างถูกต้อง
ที่เขียนบทความนี้ขึ้นมาเพื่อที่จะบอกว่า ประเทศไทยควรจะเห็นแก่การสร้างมาตราฐานพวกนี้บ้างจะทำให้วงการ IT มีมาตราฐานมากขึ้นหน่อยเพราะหลายๆ เว็บในไทยเปิดได้แต่ IE พอเปิดด้วย Browser อื่นๆ แล้วไม่อยากจะมองเลยเละไปหมด ซึ่งในประเทศไทยเองคนที่ใช้ Browser อื่นๆ ก็มีมากพอสมควร แล้วยิ่ง Google เอง ออก Chrome ออกมาอีก ปัจจุบัน อะไรๆ ก็ต้องพึ่ง google หลายๆ อย่างทั้งค้นหาข้อมูล โปรโมทเว็บ ถ้าต่อไปบริการหลายๆ อย่างติดมากับ google chrome แล้วต้องใช้จิงๆ เราจะได้ดูเว็บเราสวยๆ ตรงตามที่เราต้องการ ใน google chrome ได้ไง อิอิ
ปล. ตั้งแต่เขียน เว็บมา IE มีปัญหาสุด
เทคนิคต่างๆ ที่ใช้ใน Web 2.0
เทคนิคต่างๆ ที่ใช้ใน Web 2.0
โครงสร้างพื้นฐานของเทคโนโลยี Web 2.0 เป็นโครงสร้างที่ซับซ้อน ซึ่งประกอบด้วย
เครื่องคอมพิวเตอร์แม่ข่าย (server) software content syndication messaging protocols standard-based browsers และ client applications ต่างๆ เทคนิคใหม่ๆ มากมายถูกสร้างขึ้น และหากเว็บไซต์ใช้เทคนิคต่างๆ เหล่านี้จะถูกเรียกได้ว่าเป็น เทคโนโลยี Web 2.0
เทคนิคเหล่านั้นประกอบด้วย
1. Rich Internet Application เช่น Ajax
2. CSS (Cascading Style Sheets)
3. XHTML หรือ Microformat
4. User interface languages จําพวก XUL (XML User Interface Language) และ SVG (Scalable Victor Graphics)
5. Flash Remoting
6. การเชื่อมโยงและการรวมข้อมูลผ่านทาง RSS และ Atom
7. URLs ที่เหมาะสมและมีความหมาย
8. Weblog หรือ blog
9. REST (Representational State Transfer) หรือ XML Web service APIs
10. Social networking หรือการมีเครือข่ายทางสังคมผ่านอินเทอร์เน็ต
เนื่องจากเนื้อหาที่เกี่ยวข้องมีเยอะมากมาย วันนี้เราจึงจะมารู้จักกับ Rich Internet Application กันก่อน
Rich Internet Application เช่น Ajax
Ajax ย่อมาจาก Asynchronous JavaScript And XML ซึ่งไม่ใช่ชื่อของการเขียนโปรแกรมหรือเป่นชื่อของภาษาที่ใช่ในการโปรแกรม
แต่เป็นชุดของเทคโนโลยีที่ทํางานร่วมกันแบบ Asynchronous คือ JavaScript และ XML มีหลักการทํางาน 2 ประเด็น คือ
การสร้างหน้าจอแบบบางส่วน (update) และการติดต่อสื่อสารกับเครื่องคอมพิวเตอร์แม่ข่าย (Server) โดยใช้หลักการ Asynchronous จึงทําให้ผู้ใช้ไม่ต้องหยุดการทํางาน เพื่อรอการประมวลผลจากเครื่องคอมพิวเตอร์แม่ข่าย รวมถึงการโหลดและการรีเฟรชหน้าจอของบราวเซอร์ทางฝั่งเครื่องคอมพิวเตอร์ลูกข่าย (Client)
การใช้ Ajax โดยการเพิ่มเลเยอร์ (Layer) ระหว่างบราวเซอร์ของเครื่องผู้ใช้ กับบราวเซอร์ของเครื่อง server ทําให้ผู้ใช้สามารถทํางานได้โดยไม่ต้องรอให้ Client ติดต่อไปยัง Server ดังนั้นผู้ใช้สามารถใช้งานแอพพลิเคชันได้อย่างมีประสิทธิภาพมากขึ้น
เทคโนโลยีต่างๆ ที่เป็นส่วนประกอบของ Ajax ซึ่งได้แก่
• HTML/XHTML เป?นภาษาในการจัดแสดงข?อมูล
• CSS เป็นรูปแบบการจัดแต่งXHTML
• Document Object Model (DOM) สําหรับdynamic display and interaction
• XML เป็นรูปแบบการแลกเปลี่ยนข้อมูล
• XSLT สําหรับแปลงXML เป็นXHTML
• XMLHTTPRequest สําหรับasynchronous data retrieval
• JavaScript เป็นภาษาในการใช้งาน Ajax engine
โดยส่วนประกอบจําเป็นขั้นพื้นฐานที่ขาดไม่ได้ใน Ajax ได้แก่ HTML/XHTML DOM และ JavaScript เพราะ XHTML จําเป็นสําหรับการแสดงข้อมูล ในขณะที่ DOM จําเป็นสําหรับการเปลี่ยนแปลงเฉพาะบางส่วนในหน้า XHTML โดยช่วยให้ไม่ต้องโหลดใหม่ทั้งหน้าและ JavaScript จําเป็นสําหรับการติดต่อกันระหว่าง client และ server และในจัดการ DOM
ปัจจุบันมีเว็บไซต์จํานวนมากที่ใช้เทคโนโลยี Ajax ในการปรับปรุงคุณภาพของเว็บไซต์ เพื่อตอบสนองความต้องการของผู้ใช้ได้อย่างมีประสิทธิภาพมากยิ่งขึ้นอาทิเช่น Google Suggest และA9.com เป็นต้น
SOURCE : http://www.e-bizthailand.com/node/286

