1. Migrate GeoSVG to Firefox 2. GDrawing Xun Lai October, 2005.

Slides:



Advertisements
Similar presentations
Creating Accessible PDF Documents Dick Hemenway CMAC Accessibility Committee.
Advertisements

Chapter 3 – Web Design Tables & Page Layout
© 2010 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.
Firefox Addon development tutorial 谢烜
GeoSVG and GeoSite - a Web-based system for manipulative and education page authoring Xun Lai Feb. 15 th, 2006.
GeoSite and GeoSVG. GeoSVG: A Dynamic Geometry Authoring Tool Written in SVG and Javascript Providing most of the capabilities of a traditional Dynamic.
A Guide to Oracle9i1 Introduction To Forms Builder Chapter 5.
Microsoft Office Illustrated Using Advanced Features.
Web Development Using ASP.NET CA – 240 Kashif Jalal Welcome to week – 3-1 of…
Mozilla Technologies Sept. 30, History of Mozilla Mosaic -> Netscape 1.0 -> Netscape 5.0 Netscape 5.0 was announced to be an Open Source project.
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
GeoSVG: A Web-based Interactive Plane Geometry System for Mathematics Education Xun Lai and Paul S. Wang Department of Computer Science Institute for Computational.
Printing and Page Formatting ITSW 1401, Intro to Word Processing Instructor: Glenda H. Easter.
Paul Trani Adobe Certified Instructor/Expert Resources:
XML User Interface Language (XUL) Karl Strength April 16, 2006.
1 ADVANCED MICROSOFT WORD Lesson 15 – Creating Forms and Working with Web Documents Microsoft Office 2003: Advanced.
 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.
HTML 5 New Standardization of HTML. I NTRODUCTION HTML5 is The New HTML Standard, New Elements New Attributes Full CSS3 Support Video and Audio 2D/3D.
Adobe Dreamweaver CS3 Revealed CHAPTER ONE: GETTING STARTED WITH DREAMWEAVER.
4.1 JavaScript Introduction
Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
JavaScript: Control Structures September 27, 2005 Slides modified from Internet & World Wide Web: How to Program (3rd) edition. By Deitel, Deitel,
Chapter 3 Dreamweaver: Part I The Web Warrior Guide to Web Design Technologies.
© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.
INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.
McGraw-Hill/Irwin © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Dynamic Action with Macromedia Dreamweaver MX Barry Sosinsky Valda Hilley.
LATTICE TECHNOLOGY, INC. For Version 3.0 and later iXVL Publisher Tutorial For Version 3.0 and later.
Selenium Web Test Tool Training Using Ruby Language Discover the automating power of Selenium Kavin School Kavin School Presents: Presented by: Kangeyan.
Tutorial 1 Getting Started with Adobe Dreamweaver CS3
University of Sunderland CDM105 Session 5 Web Authoring Tools The past and present A history of web authoring tools and an overview of Macromedia Dreamweaver.
1 Macromedia Dreamweaver Outline Introduction Macromedia Dreamweaver Text Styles Images and Links Symbols and Lines Tables Forms Scripting in Dreamweaver.
CSS Class 7 Add JavaScript to your page Add event handlers Validate a form Open a new window Hide and show elements Swap images Debug JavaScript.
Intro to Dreamweaver Web Design Section 7-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.
9 Chapter Nine Compiled Web Server Programs. 9 Chapter Objectives Learn about Common Gateway Interface (CGI) Create CGI programs that generate dynamic.
School of Computer Science & Information Technology G6DPMM - Lecture 17 Scaleable Vector Graphics.
Dreamweaver Chapter 1 Mr. Ursone Document Window.
Session 1 SESSION 1 Working with Dreamweaver 8.0.
Lesson 12: Working with Code-editing Features Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver.
INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012.
1 After completing this lesson, you will be able to: Start Word. Explore the Word window. Enter text in a document. Save a document. Close a document and.
In the next step you will enter some data records into the table. This can be done easily using the ‘Data Browser’. The data browser can be accessed via.
Towards Industrial Strength Web Applications Brian Becker, Dyalog LTD. APL Tools Group.
XP New Perspectives on Microsoft Office FrontPage 2003 Tutorial 1 1 Microsoft Office FrontPage 2003 Tutorial 1 – Creating a Web Site.
 Whether using paper forms or forms on the web, forms are used for gathering information. User enter information into designated areas, or fields. Forms.
Bringing the power of SVG to a genome browser near you! Christopher T Lewis CMPT 856 – Presentation 1.
Mrs. Knopp Library Media Specialist.  The term wiki comes from the phrase Wiki- Wiki which is the Hawaiian word for quick.  A wiki is a website that.
1 ADVANCED MICROSOFT POWERPOINT Lesson 9 – Importing and Exporting Information Microsoft Office 2003: Advanced.
Updated on: September 4, 2010 CIS67 Foundations for Creating Web Pages Professor Al Fichera.
Mozilla. Why mozilla Main Components Browser features Loads very quickly Personal toolbar with your locations Can turn off pop-up windows good control.
Introduction Selenium IDE is a Firefox extension that allows you to record, edit, and debug tests for HTML Easy record and playback Intelligent field selection.
Page Designer Storyboard J. A. Fitzpatrick December 2004.
Web Technologies Lecture 2 HTML and CSS. HTML Hyper Text Markup Language – Describes web documents – Made up of nested HTML markup tags – Tags are the.
Key Applications Module Lesson 14 — Working with Tables Computer Literacy BASICS.
Unit 3: Text, Fields & Tables DT2510: Advanced CAD Methods.
Creating Web Pages with Links, Images, and Embedded Style Sheets
Word 2010 Edit Page Layout In this lesson, you will learn how to insert columns and page breaks. How to change the page orientation, paper size, page margins,
COMP 143 Web Development with Adobe Dreamweaver CC.
HTML 5 (Part 1) – Start from SCRATCH. HTML 5 – Start from SCRATCH.
Interstage BPM v11.2 1Copyright © 2010 FUJITSU LIMITED FORMS.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 1 Using HTML to Create Web Pages.
© 2016, Mike Murach & Associates, Inc.
Creating Web Pages and Graphics
Application with Cross-Platform GUI
Predefined Dialog Boxes
Tutorial 6 Creating Dynamic Pages
Web Development Using ASP .NET
Exercise 24 – Software Skills
Microsoft Office Illustrated Fundamentals
Key Applications Module Lesson 14 — Working with Tables
Presentation transcript:

1. Migrate GeoSVG to Firefox 2. GDrawing Xun Lai October, 2005

Adobe SVG support vs. Mozilla native SVG support There is no significant difference. Both follow the W3C specifications quite strictly. Status of Mozilla SVG support Differences found so far during migrating GeoSVG to Mozilla ASVMozilla createElement( … ) OKMust use createElementNS( …) setNodeValue( … ) OKMust use nodeValue = … Default width of characters are different Text following a path has some problem element has some problem with stroke-dasharray style has some problem

Advantages of Mozilla SVG Support over ASV Written once and work on Windows, Mac, and Linux No more inter-document communications problem SVG tags can be mixed with XUL and XHTML tags while embeding an SVG file via is still supported. XUL GUI widgets can be used to enhance an SVG application. Mozilla is making progress every day. –Mozilla native SVG support is by default turned on in Firefox 1.5 before which the support was immature. –Time is right for us: 1.5 Alpha 1(May 31,2005), Alpha 2(July 12), Beta 1(Sept. 8), Beta 2(now available), 1.5 Final(2005)

Difficulties Developing GUI Widgets under ASV GUI widgets needed in GeoSVG: button, input box, checkbox, select, menu, toolbar, (modal) dialog box, tabbed dialog box, and maybe more. It’s possible to develop all these widgets, but it’s time consuming and also bug-proned. When a GUI widget, especially for those complicated GUIs, is not well designed, the codes for GUI and codes for the real task cannot be decouple easily.

Difficulties Developing GUI Widgets under ASV (cont.) Need to implement: –Draw the outlook of each widget –Mechanism for how to layout widgets. –Simulate modal dialog box –Simulate onfocus event of many widgets. It becomes more complicated when dialog box presents –Unlike a real menu, a simulated menu cannot stretch outside the window an SVG resides in –Simulate a flashing cursor in a simulated input box –Capture keystroke for input box (Some browsers on some OS do not pass the keystroke to the Adobe SVG Viewer plugin)

Tradeoff Approach to Develop GeoSVG The GeoSVG authoring environment will be developed to only work under Firefox. –It will only use those SVG features that also work under ASV so that it’s possible to develop one version for ASV in the future if a full set of GUI widgets is ready for ASV Drawings (manipulatives) created by the authoring environment can work mostly under both Firefox and ASV. Drawings needing keystrokes are the exceptions.

The Partially Migrated GeoSVG The partially migrated GeoSVG using Firefox native SVG support, XUL and XBL –It looks like a standalone application. –The object property dialog box –The calculator to define relations among objects –XBL is very helpful for defining property dialog box for different objects. It simplifies a lot of codes.

GDrawing Library Terminology –Main Program: topic lesson editing page an assessment question editing page a bulletin board message composing page –Drawing Window: a pop-up window containing the GeoSVG authoring environment

GDrawing Library (cont.) Simple APIs: –GDrawing.newDrawing( id, parentId ) –GDrawing.editDrawing( id ) –GDrawing.removeDrawing( id ) –GDrawing.loadDrawing( id, parentId, str, width, height ) –GDrawing.changeDrawing( id, str, width, height ) –GDrawing.getDataStr( id ) –GDrawing.getWidth( id ) –GDrawing.getHeight( id )

GDrawing Library (cont.) Easy use for main program –no need to deal with something like inter-window communications, inter-document communications –If the main program has a pre-defined insertion point for a drawing, it doesn’t need to deal with createElement, appendChild. –If the insertion point such as a or element for a drawing is dynamically generated, the main program only needs to do createElement and appendChild operations for the insertion point element. –It’s the main program’s job to save the data string, width, height of the drawing back to the server.