svg-xml สุุดยอดการแสดงผลเว ็บกราฟ็ ก · the...
Post on 05-Jul-2020
1 Views
Preview:
TRANSCRIPT
SVG-XML SVG-XML สุดยอดการแสดงผลเวบ็กราฟกสุดยอดการแสดงผลเวบ็กราฟก
หวัขอการสัมมนาหวัขอการสัมมนา1. Introduction to SVG1. Introduction to SVG
วิวัฒนาการการแสดงผลบนเวบ็เพจวิวัฒนาการการแสดงผลบนเวบ็เพจการแสดงผล การแสดงผล SVG SVG บนเวบ็เพจบนเวบ็เพจเกีย่วกบั เกีย่วกบั SVG SVG
2. Flash and SVG comparison2. Flash and SVG comparison3. SVG application and examples3. SVG application and examples4. SVG for beginner4. SVG for beginner
SVG content SVG content Coordinates SystemCoordinates SystemDocument StructureDocument StructureBasic shapesBasic shapesTextTextAnimationAnimation
5. Summary and Introduction to SVG community web page5. Summary and Introduction to SVG community web page
SVG-XML SVG-XML สุดยอดการแสดงผลเวบ็กราฟกสุดยอดการแสดงผลเวบ็กราฟก
Introduction to SVGIntroduction to SVG
นายมนตศักดิ์ โซเจรญิธรรมนายมนตศักดิ์ โซเจรญิธรรม
ฝายวิจัยและพัฒนาเทคโนโลยคีอมพิวเตอรเพื่อการคํานวณศูนยเทคโนโลยอีิเล็กทรอนิกสและคอมพิวเตอรแหงชาติสํานักงานพัฒนาวิทยาศาสตรและเทคโนโลยแีหงชาติ
หวัขอการนาํเสนอ หวัขอการนาํเสนอ
● วิวัฒนาการการแสดงผลบนเว็บเพจวิวัฒนาการการแสดงผลบนเว็บเพจ● การแสดงผล การแสดงผล SVG SVG บนเว็บเพจบนเว็บเพจ● เกีย่วกบั เกีย่วกบั SVG SVG ● เปรียบเทียบความสามารถระหวางไฟล เปรียบเทียบความสามารถระหวางไฟล SWF (Flash) SWF (Flash) และ และ SVGSVG● ตอบขอซักถามตอบขอซักถาม
Tim Berners-Lee, W3C Director and inventor of the World Wide Web (1989)
The The World Wide Web ConsortiumWorld Wide Web Consortium (W3C) is an international consortium (W3C) is an international consortium where Member organizations, a full-time staff, and the public work where Member organizations, a full-time staff, and the public work together to develop Web standards. W3C's mission is:together to develop Web standards. W3C's mission is:
To lead the World Wide Web to its full potential by developing To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web.protocols and guidelines that ensure long-term growth for the Web.
ววิฒันาการการแสดงผลบนเวบ็เพจววิฒันาการการแสดงผลบนเวบ็เพจ > > About W3CAbout W3C
W3C Develops Web Standards and GuidelinesW3C Develops Web Standards and Guidelines
แหลงขอมูลอางอิง: http://www.w3.org/Consortium/
ปจจุบนั ปจจุบนั W3C W3C มีสมาชกิกวา มีสมาชกิกวา 350 350 ราย เชน ราย เชน Adobe Systems Inc., Apple Computer, Inc. ,America Online, Inc. Adobe Systems Inc., Apple Computer, Inc. ,America Online, Inc.
(AOL) , Cisco Systems , IBM Corporation Macromedia ,Google, Inc. , (AOL) , Cisco Systems , IBM Corporation Macromedia ,Google, Inc. , Microsoft Corporation ,Nokia ,Oracle Corporation ,Yahoo!, Inc.,Sun Microsoft Corporation ,Nokia ,Oracle Corporation ,Yahoo!, Inc.,Sun Microsystems, Inc.Microsystems, Inc.
ตวัอยางมาตรฐานทีอ่อกโดยตวัอยางมาตรฐานทีอ่อกโดย W3CW3C- CSS (- CSS (Cascading Style SheetsCascading Style Sheets))- HTML (- HTML (HyperText Markup LanguageHyperText Markup Language))- DOM (Document Object Model)- DOM (Document Object Model)- HTTP (- HTTP (Hypertext Transfer Protocol)Hypertext Transfer Protocol)- PNG (Portable Network Graphics)- PNG (Portable Network Graphics)- XML (- XML (Extensible Markup LanguageExtensible Markup Language))- - Web ServicesWeb Services- SVG (Scalable Vector Graphics) - SVG (Scalable Vector Graphics)
แหลงขอมูลอางอิง: http://www.w3.org/Consortium/Prospectus/Joining
ววิฒันาการการแสดงผลบนเวบ็เพจววิฒันาการการแสดงผลบนเวบ็เพจ > > About W3CAbout W3C (2) (2)
<HTML><HTML><HEAD><HEAD>
<TITLE> SVG <TITLE> SVG ทีร่กัทีร่กั... </TITLE>... </TITLE></HEAD></HEAD><BODY><BODY>
<CENTER><H2><CENTER><H2>เมือ่ไหรราคาน้ํามนัจะลดเมือ่ไหรราคาน้ํามนัจะลด</H2></CENTER></H2></CENTER></BODY></BODY>
</HTML></HTML>
ววิฒันาการการแสดงผลบนเวบ็เพจววิฒันาการการแสดงผลบนเวบ็เพจ > > HTML (1)HTML (1)
<HTML><HTML><HEAD><HEAD>
<TITLE> SVG <TITLE> SVG ทีร่กัทีร่กั... </TITLE>... </TITLE></HEAD></HEAD><BODY><BODY>
<CENTER><H2><CENTER><H2>เมือ่ไหรราคาน้ํามนัจะลดเมือ่ไหรราคาน้ํามนัจะลด</H2></CENTER></H2></CENTER><TABLE BORDER='1'><TABLE BORDER='1'>
<TR align='center'><TR align='center'><TD><TD>ชื่อชื่อ</TD></TD><TD><TD>นามสกลุนามสกลุ</TD></TD>
</TR></TR><TR><TR>
<TD><TD>นายดีเซลนายดีเซล</TD></TD><TD><TD>ราคาถูกราคาถูก</TD></TD>
</TR></TR></TABLE></TABLE>
</BODY></BODY></HTML></HTML>
ววิฒันาการการแสดงผลบนเวบ็เพจววิฒันาการการแสดงผลบนเวบ็เพจ > > HTML (2)HTML (2)
<HTML><HTML><HEAD><HEAD>
<TITLE> SVG <TITLE> SVG ทีร่กัทีร่กั... </TITLE>... </TITLE></HEAD></HEAD><BODY><BODY>
<CENTER><H2><CENTER><H2>เมือ่ไหรราคาน้ํามนัจะลดเมือ่ไหรราคาน้ํามนัจะลด</H2></CENTER></H2></CENTER><TABLE BORDER='1'><TABLE BORDER='1'>
<TR align='center'><TR align='center'><TD><TD>ชื่อชื่อ</TD></TD><TD><TD>นามสกลุนามสกลุ</TD></TD>
</TR></TR><TR><TR>
<TD><TD>นายดีเซลนายดีเซล</TD></TD><TD><TD>ราคาถูกราคาถูก</TD></TD>
</TR></TR></TABLE></TABLE><BR><BR><IMG SRC="model_9.jpg" BORDER=2><IMG SRC="model_9.jpg" BORDER=2>
</BODY></BODY></HTML></HTML>
ววิฒันาการการแสดงผลบนเวบ็เพจววิฒันาการการแสดงผลบนเวบ็เพจ > > HTML (3)HTML (3)
<HTML><HTML><HEAD><HEAD>
<TITLE> SVG <TITLE> SVG ที่รักที่รัก... </TITLE>... </TITLE><SCRIPT LANGUAGE="JavaScript"><SCRIPT LANGUAGE="JavaScript">
function Hello(){function Hello(){ alert('...I love SVG...')alert('...I love SVG...') }}</SCRIPT></SCRIPT>
</HEAD></HEAD><BODY><BODY>
<CENTER><H2><CENTER><H2>เมือ่ไหรราคาน้ํามนัจะลดเมือ่ไหรราคาน้ํามนัจะลด</H2></CENTER></H2></CENTER><TABLE BORDER='1'><TABLE BORDER='1'>
<TR align='center'><TR align='center'><TD><TD>ชื่อชื่อ</TD><TD></TD><TD>นามสกุลนามสกุล</TD></TD>
</TR></TR><TR><TR>
<TD><TD>นายดีเซลนายดีเซล</TD><TD></TD><TD>ราคาถูกราคาถูก</TD></TD></TR></TR>
</TABLE></TABLE><BR><BR><IMG SRC="model_9.jpg" BORDER=2<IMG SRC="model_9.jpg" BORDER=2 onclick='Hello()'onclick='Hello()'>>
</BODY></BODY></HTML></HTML>
Example
ววิฒันาการการแสดงผลบนเวบ็เพจววิฒันาการการแสดงผลบนเวบ็เพจ > > HTML+JavaScriptHTML+JavaScript
การที่เว็บเบราเซอรจะเขาใจไฟล การที่เว็บเบราเซอรจะเขาใจไฟล SVG SVG ไดนั้นตองการไดนั้นตองการโปรแกรมเสริมชนิดหนึ่งที่เรียกวา โปรแกรมเสริมชนิดหนึ่งที่เรียกวา pluginplugin
เว็บเบราเซอร SVG Viewer
+
การแสดงผล การแสดงผล SVG SVG บนเวบ็เพจ บนเวบ็เพจ > > plugin SVGplugin SVG
Example
ในกรณขีอง ในกรณขีอง SVG SVG จะเรียกวา จะเรียกวา plugin plugin ดังกลาววา โปรแกรม ดังกลาววา โปรแกรม SVG Viewer SVG Viewer สามารถดาวนโหลดไดที่ สามารถดาวนโหลดไดที่ www.adobe.com/svg/installwww.adobe.com/svg/install
File: cir.svgFile: cir.svg
<svg width="500" height="500" viewBox="0 0 500 500"<svg width="500" height="500" viewBox="0 0 500 500" xmlns="xmlns="http://www.w3.org/2000/svghttp://www.w3.org/2000/svg" "
xmlns:xlink="http://www.w3.org/1999/xlink">xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="250" cy="250" r="100" fill="blue" /><circle cx="250" cy="250" r="100" fill="blue" /><rect x="0" y="0" width="500" height="500" fill="none" stroke="blue" <rect x="0" y="0" width="500" height="500" fill="none" stroke="blue" stroke-width="2" />stroke-width="2" />
</svg></svg>
การแสดงผล การแสดงผล SVG SVG บนเวบ็เพจ บนเวบ็เพจ > > file SVG (1)file SVG (1)
<HTML><HTML><HEAD><HEAD>
<TITLE> SVG <TITLE> SVG ที่รักที่รัก... </TITLE>... </TITLE></HEAD></HEAD><BODY><BODY>
<TABLE BORDER='1'><TABLE BORDER='1'><TR align='center'><TD><TR align='center'><TD>ชื่อชื่อ</TD><TD></TD><TD>นามสกลุนามสกลุ</TD></TR></TD></TR><TR><TD><TR><TD>นายดีเซลนายดีเซล</TD><TD></TD><TD>ราคาถกูราคาถกู</TD></TR></TD></TR>
</TABLE></TABLE><embed width="500" height="500" src="cir.svg" name="svgmap"<embed width="500" height="500" src="cir.svg" name="svgmap"
type="image/svg+xml">type="image/svg+xml"></BODY></BODY>
</HTML></HTML>
Example
การแสดงผล การแสดงผล SVG SVG บนเวบ็เพจ บนเวบ็เพจ > > file svg (2)file svg (2)
แหลงขอมูลเพิม่เตมิ: http://www.w3.org/Graphics/SVG/About
SVG ยอมาจาก Scalable Vector Graphics คือการนําเสนอขอมลูประเภทกราฟกดวยเวกเตอรทีป่รบัเปลี่ยนยอ ขยายไดโดยไมสูญเสียความคมชดั (Scalable)
เกี่ยวกับ เกี่ยวกับ SVG > SVG > ความหมายของ ความหมายของ SVGSVG
SVG สรางขึ้นโดยอาศัยเทคโนโลยีฐานหลายอยางทีป่ระสบความสําเรจ็แลว เชน - โครงสรางเอกสารแบบเดียวกบั XML เพื่อใชแทนขอมลูกราฟกประเภทเวกเตอร - อาศัย JPEG และ PNG สําหรบักรณตีองการแสดงผลขอมลูทีเ่ปนภาพ - DOM สําหรบัการทํางานควบคุม SVG ดวยภาษาสครปิตและความสามารถเชงิโตตอบ - CSS ใชเพื่อกําหนดรปูแบบในการแสดงผล - SMIL (Synchronized Multimedia Integration Language) สําหรบัการแสดงภาพเคลื่อนไหว
องคกร (บรษิัท) ทีร่วมพัฒนามาตรฐาน SVG เชน Adobe, Agfa, Apple, Canon, Corel, Ericsson, HP, IBM, Kodak, Macromedia, Microsoft, Nokia, Sharp and Sun Microsystems
SVG ประกอบดวย 2 สวน คือ 1. สวนของไฟลขอมลู ซึ่งเปน XML-based ใชแทนขอมลูกราฟก 2 มติิ 2. programming API สําหรบัการเขียนโปรแกรมดานกราฟก
Applications of SVG in industry● Mobile● Print● Web Applications● Design and Interchange● GIS and Mapping● Embedded Systems
เกี่ยวกับ เกี่ยวกับ SVG > SVG > Application of SVG (1)Application of SVG (1)
Mobile- ในป 2001 SVG ไดรบัเลือกจากกลุมอตุสาหกรรมโทรศัพทมอืถือใหเปนรปูแบบพื้นฐานทีจ่ะ
ใชนําเสนอขอมลูกราฟกบนโทรศัพทมอืถือ มาตรฐานดังกลาวเรยีกวา SVG Tiny and SVG Basic อางองิ: http://www.w3.org/TR/SVGMobile/ - 3rd Generation Partnership Project (3GPP, http://www.3gpp.org/) ไดกําหนดให SVG เปนรปูแบบขอมลูทีใ่ชนําเสนอขอมลูกราฟกสําหรบัโทรศัพทมอืถือในรุนหนาและรวมทัง้การนําเสนอ MMS ดวย อางองิ: http://www.3gpp.org/ftp/specs/html%2Dinfo/26140%2Dcrs.htm
เกี่ยวกับ เกี่ยวกับ SVG > SVG > Application of SVG (2)Application of SVG (2)
Print- SVG รองรบัขอมลูกราฟกหลายรปูแบบและรองรบัตัวอกัษรไดหลายภาษา- SVG ไมมขีอจํากดัดานความละเอยีดของขอมลูกราฟก- กลุมบรษิัทดานงานพิมพไดรวมกนัพัฒนามาตรฐานทีเ่รยีกวา SVGPrint
อางองิ: http://www.w3.org/TR/SVGPrint/
Applications of SVG in industryApplications of SVG in industry
Web Applications- SVG รองรบัภาษาสครปิตบนเว็บเบราเซอรและ event ทําใหเว็บโปรแกรมเมอรสามารถสราง
แอพพลิเคชัน่ดานกราฟก รวมถึงสวนตอประสานกราฟกกบัผูใช (GUI) ได - SVG เปนมาตรฐานเปด ดังนั้นผูพัฒนาไมตองถูกผกูมดักบัเครือ่งมอืหรอืผูขายรายใดรายหนึ่งโดยเฉพาะ
เกี่ยวกับ เกี่ยวกับ SVG > SVG > Application of SVG (3)Application of SVG (3)
GIS and Mapping- SVG อนุญาตใหปรบักําหนดคุณสมบตัิเพิ่มเติมใหเหมาะสมกบัขอมลูกราฟกทีม่คีวามหมาย
เชงิภูมศิาสตร เชน ทะเลสาป ถนน แมน้ํา ฯลฯ- โปรแกรมสามารถเขากระทําประมวลผลโดยเขาใจความหมายของกราฟกนั้นในเชิงภูมศิาสตร
ไดดวย- สามารถเชือ่มตอกบั GML ไดงาย
Design and Interchange - SVG นั้นเปน XML ดังนั้นจงึทําใหผูใชสามารถเพิ่มคําอธิบายขอมลู (Metadata) เขาไปภายในเอกสาร SVG ไดโดยไมทําใหการแสดงผลกราฟกเสียไป - โปรแกรมดานออกแบบกราฟกจํานวนมาก สนับสนุนการ import/export ดังนั้น SVG สามารถใชเปนรปูแบบกลางในการแลกเปลี่ยนขอมลูได
Embedded Systems- Embedded systems มทีรพัยากรนอย (CPU, RAM, Storage, etc.)
- ผูพัฒนาสามารถใชมาตรฐานของ SVG mobile มาพัฒนาสวนตอประสานกราฟกกบัผูใชสําหรบั Embedded systems ได
เกี่ยวกับ เกี่ยวกับ SVG > SVG > Application of SVG (4)Application of SVG (4)
เปรยีบเทียบความสามารถระหวางไฟล เปรยีบเทียบความสามารถระหวางไฟล SWF (Flash) SWF (Flash) และ และ SVG (1)SVG (1)
- SWF (ออกเสียงวา “Swiff”) เปนไฟลรปูแบบหนึ่ง (เกบ็ในรปูแบบของ binary)ใชเผยแพรขอมลูเวกเตอรกราฟกและภาพเคลื่อนไหวผานเครอืขายอนิเทอรเน็ตไปยัง Macromedia Flash Player
- SWF ไมไดถูกออกแบบมาสําหรบัแลกเปลี่ยนระหวางโปรแกรมประเภท Graphics Editors แตเพื่อจดุประสงคการนําเสนองานกราฟกเปนหลัก
- ในขณะทํางานจะเปนไฟลรปูแบบ FLA ซึ่งสามารถปรบัปรงุแกไขได- Macromedia Flash เปนโปรแกรมทีใ่ชสําหรบัสราง ออกแบบ ตลอดจนเอือ้อํานวยการเขียน
Action Script เพื่อเพิ่มความสามารถในการโตตอบ- ทัง้ SWF, FLA และ Macromedia Flash MX ถูกออกแบบและเปนลิขสิทธิ์ของบรษิัท
Macromedia, Inc.
FLA
SWF
Macromedia Flash
- SVG เปนไฟลรปูแบบหนึ่งเชนกนั แตเปน text-based (XML)- สามารถใชงานไดทัง้แลกเปลี่ยนเพื่อการนําไปปรบัปรงุแกไข หรอืเพื่อการนําเสนอ- ผูออกแบบคือ W3C และเปนมาตรฐานเปดทีท่กุคนสามารถนําไปใชประโยชนไดโดยไมมเีงื่อนไข- เครือ่งมอืในการสรางและแกไข graphics ในรปูแบบของ SVG สามารถหาใชไดฟร ี(ลักษณะ
การใชงานคลาย Adobe Illustrator)- การทํางานในสวนโตตอบกบัผูใช บนเว็บเบราเซอรตองอาศัยการเขียนโปรแกรมเพิ่มเติม คือ
JavaScript หรอื Java- ในมมุมองของผูใชปลายทาง ไฟล SVG และ SWF ตางกส็ามารถรองรบัความตองการไดไม
แตกตางกนั- ในฐานะนักพัฒนา การใช SWF หรอื SVG ความยากงายขึ้นกบัความถนัดของแตละบคุคล- SVG เปนมาตรฐานเปด พัฒนาจากฐานของภาษา XML ดังนั้นผูทีเ่รยีนรู SVG จะเขาใจถึง
การทํางานของ DOM (Document Object Model) และ XML (Extensible Markup Language)ไปดวย ซึ่งความรูนี้สามารถนําไปประยุกตใชกบังานอืน่ๆอกีมากทีอ่าศัยความสามารถของภาษา XML เชน Web Services หรอื ภาษาอืน่ทีม่พีื้นฐานจาก XML
เปรยีบเทียบความสามารถระหวางไฟล เปรยีบเทียบความสามารถระหวางไฟล SWF (Flash) SWF (Flash) และ และ SVG (2)SVG (2)
SVG-XML SVG-XML สุดยอดการแสดงผลเวบ็กราฟกสุดยอดการแสดงผลเวบ็กราฟก
บทสรุปบทสรุป
จบการนาํเสนอชวงแรกจบการนาํเสนอชวงแรก
ตอบขอซักถามตอบขอซักถาม
XML
SVG GraphicsDatabase
ConverterSoftware
Inkscape/Sodipodi
Server side programming
Animation Interactive Static graphic
JavaScript
DOM, Dynamic Attribute
สรปุ สรปุ (1)(1)
SVG community web page
Proprietary software
TextDatabase
FLA
SWF
GraphicsDatabase
Macromedia Flash
Server Side programming(PHP)
Animation/Video/Movie Interactive/GUI
Embedded Action Script
สรปุ สรปุ (2)(2)
TextDatabase
ควรใช ควรใช SVG SVG หรอื หรอื SWFSWF
- - เนคเทคนําเสนอ เนคเทคนําเสนอ SVG SVG เพื่อใหขอมูล และเสนอเปนเทคโนโลยีทางเลอืกหนึ่งเพื่อใหขอมูล และเสนอเปนเทคโนโลยีทางเลอืกหนึ่งเทานั้น เทานั้น
- - กระบวนการทาํงานในสวนอืน่ๆที่อยูบนฐานของ กระบวนการทาํงานในสวนอืน่ๆที่อยูบนฐานของ XML XML หากมกีารแสดงผลหากมกีารแสดงผลที่เปนกราฟก และใช ที่เปนกราฟก และใช SVG SVG ในการแสดงผล กจ็ะสามารถทาํไดโดยใชเครือ่งมือ ในการแสดงผล กจ็ะสามารถทาํไดโดยใชเครือ่งมือ (XML processing and editing tool) (XML processing and editing tool) ชุดเดมิชุดเดมิ
- - อยางไรกต็าม อยางไรกต็าม SVG SVG สอดคลองกบัเทคโนโลยี สอดคลองกบัเทคโนโลยี XML XML ซึง่จะเปนมาตรฐานกลางซึง่จะเปนมาตรฐานกลางในการแลกเปลีย่นและสงผานขอมูลในอนาคต ในการแลกเปลีย่นและสงผานขอมูลในอนาคต
- SVG - SVG จะเหมาะสมกบังานดานนั้นๆหรอืไม ผูใชหรอืผูพัฒนางานนั้นควรเปนจะเหมาะสมกบังานดานนั้นๆหรอืไม ผูใชหรอืผูพัฒนางานนั้นควรเปนผูตัดสินในขั้นสุดทายผูตัดสินในขั้นสุดทาย
- SVG - SVG ออกแบบโดย ออกแบบโดย W3CW3C
NECTEC building internet map (SVG)
NECTEC building internet map (SWF)
SVG Training CourseSVG Training Course
หัวขอที่จะมกีารอบรม (ราง) - โครงสรางของไฟล SVG - การแปลงขอมลูแผนทีเ่ปนไฟล SVG และเรยีกใชผานอนิเทอรเน็ต - การเขียนโปรแกรมภาษา JavaScript เขาควบคุมการแสดงผล SVG แบบ Interactive - การแสดงขอมลูอรรถาธิบายรวมกบั SVG แบบ Interactive โดยดึงจากฐานขอมลู - การใช SVG Authoring Tool เบือ้งตน
ความรูพืน้ฐานที่จาํเปนตองมกีอนเขาอบรม - มคีวามรูภาษา JavaScript อยางดี - มคีวามรูเรือ่งภาษา HTML และ XML เบือ้งตน - มคีวามรูภาษา Perl หรอื PHP หรอื ASP - เขาใจการทํางานของภาษา SQL และมคีวามรูเรือ่งฐานขอมลู - เขาใจการทํางานของโปรแกรมประเภท Web Server
ระยะเวลาการอบรม 3 วัน
คําถามคําถาม
ตอบขอซักถามตอบขอซักถาม
top related