Flaps The technology and its variations across browsers.

Slides:



Advertisements
Similar presentations
Presented By: Brent Strange Browser Compatibility Testing Risk Analysis Learn the art of trimming browsers from a browser compatibility test list by knowing.
Advertisements

HTML5 Overview HOANGPT2. 1. General 2. New Elements List 3.
HTML5, OVERVIEW AND NEW FEATURES PowerPoint by Mason O’Mara.
Iframes & Images Using HTML.
Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.
HTML5 Haptics Standardization
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 4: Web Browsing.
Tel: WEB DESIGN o Site Design o Site Build o XHTML o CSS o W3C Standards GRAPHIC DESIGN o Corporate Identity o Brochures.
UFCEKG-20-2 Data, Schemas & Applications Lecture 6 The Web of Data, API’s & PHP.
HTML 5. What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in The web has changed.
Lesson 4: Web Browsing.
© Nova / Grassioulet 5-6 mai 2002 TECFA staf2x S V G glossary Scalable Vector Graphics.
HTML 5 Tutorial Chapter 1 Introduction. What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML.
Web Platform Trident Browser Internet Explorer.
Introduction to SVG & Batik Presented by Shang-Ming Huang.
ADOBE DREAMWEAVER CS4 Creative Suite Dr. Joseph Otto Professor, Information Systems, California State University, Los Angeles.
The Team Team consisted of 5 members. Max Annear – Henderson Conrad Orange Mike Debney Anton Slooten Luke Stanford.
SVG Scalable Vector Graphics. What is SVG? SVG stands for Scalable Vector Graphics SVG is used to define vector-based graphics for the Web SVG defines.
Lecture 18. HTML5 and JavaScript Instructor: Jie Yang Department of Computer Science University of Massachusetts Lowell Exploring the Internet,
MWD1001 – Website Production Web Browsers Week 11.
W3C Activities HTML: is the lingua franca for publishing on the Web XHTML: an XML application with a clean migration path from HTML 4.01 CSS: Style sheets.
GeoSVG: A Web-based Interactive Plane Geometry System for Mathematics Education Xun Lai and Paul S. Wang Department of Computer Science Institute for Computational.
Web Design Practices Browsers and Displays. Key Concept Web browsers are HTML and CSS renders. How your page looks depends on which browser you use. How.
© 2010 UEI, Inc. All Rights Reserved UEIPAC HMI.
INTRODUCTION TO CLIENT-SIDE WEB PROGRAMMING ACM 511 ACM 262 Course Notes.
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.
HTML Essentials Frames and Frame Tags. Introduction A frame used to be an effective design tool Utilized space effectively by subdividing screen One idea:
Web 2.0: Concepts and Applications 11 The Web Becomes 2.0.
Mobile App Support Jacob Poirier Geri Hengesbach Andrea Menke Erin Rossell.
AJAX By Steven Hernandez Research Analyst NIATEC.
Web Browsers And Mobile Web Browsers. Guiding Questions What is a mobile Web browser? Why do Web pages look differently on different Web browsers? What.
INTRODUCTION TO HTML5 Styling with CSS3. Round Border Corners  You can modify any element that supports the border property and render rounded borders.
DHTML Positioning and Layout. What is DHTML? HTML and xHTML CSS JavaScript or VBScript.
School of Computer Science & Information Technology G6DPMM - Lecture 17 Scaleable Vector Graphics.
TM Lee and F. Vina Zerlina.  Prevent coronary heart disease  Choose the “right” food  Plan daily meals  Dust and Magnet  Target recommended nutrition.
Ajax. –Asynchronous JavaScript and XML –Umbrella term for technologies that often: Use client-side scripting for layout and formatting Use less than full.
Adobe Certified Associate Objectives 6 Evaluating and Maintaining a site.
Chapter 16 The World Wide Web Chapter Goals Compare and contrast the Internet and the World Wide Web Describe general Web processing Write basic.
COINS OA W3C Tim Armitage. Microsoft Internet Explorer IE6 August 2001 IE7 October 2006 (XP+) IE8 March 2009 (XP+) IE9 March 2011 (Vista+) IE10 September.
Building great standards based websites for the big wide world with ASP.NET 4 Tatham Oddie Senior Consultant Readify ASP.NET Damian Edwards.
XHTML By Trevor Adams. Topics Covered XHTML eXtensible HyperText Mark-up Language The beginning – HTML Web Standards Concept and syntax Elements (tags)
Web Design (1) Terminology. Coding ‘languages’ (1) HTML - Hypertext Markup Language - describes the content of a web page CSS - Cascading Style Sheets.
Development Process Agile/XP Planning + Issue Tracking Google Code provided efficient + effective project management Bug and defect reports Project planning.
1 Scalable Vector Graphics (SVG). 2 SVG SVG is an application language of XML. “SVG is a language for describing two- dimensional graphics in XML. SVG.
Ajax. –Asynchronous JavaScript and XML –Umbrella term for technologies that often: Use client-side scripting for layout and formatting Use less than full.
1 3 Computing System Fundamentals 3.4 Networked Computer Systems.
Browser Bugs & Validation SIPB Introduction to Web Design Wednesday, January 20th Jonté Craighead & Cathy Zhang.
‘‘BROWSER WARS’’ Written by: Oliver from Zeta.net Presented by: Olivia Chung ENGL 393.
Browser Wars By: Jesse Arredondo
Web 2.0: Concepts and Applications 11 The Web Becomes 2.0.
Browser Compatibility Testing, using different browsers Conditional Statements.
Internet Searching the World Wide Web. The Internet and the World Wide Web The Internet is a worldwide collection of networks that allows people to communicate.
Creating Image Based Rollovers with CSS Mike Takahashi Office of Instructional Development.
SVG technology SVG technology is what we want? is what we want? Jaehoon Woo KNU Real-Time Systems Lab. KNU Real-Time Systems Lab.
Part – 3 : HTML 5 SVG Tag. † SVG stands for Scalable Vector Graphics. † SVG is used to define vector-based graphics for the Web. † SVG defines the graphics.
Dr. Cyrus ED 217 Jacob Camacho.  A user friendly tool.  Can be accessed at campus.uogdistance.com  Easily accessible, useful in posting blogs, assignments,
XHTML. What Is XHTML? XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to HTML XHTML is stricter than HTML XHTML is HTML.
SVG & DOM Manipulation via Javascript
Lesson 4: Web Browsing.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
HTML 5 Tag By: Raul, Cordero.
HTML 5 Tutorial Chapter 1 Introduction.
PRESENTATION 1.0 BY – SAFEEBOOK Web browsers.
.NET and .NET Core 7. XAML Pan Wuming 2017.
Unlocking information through data visualisation - Some case studies in using SVG Alistair Calder (& Alan Smith) Office for National Statistics United.
HTML5 Level I Session I Chapter 1 - Introduction to Web Development
Browser Engine How it works…..
Why use Web Standards?.
Lesson 4: Web Browsing.
Presentation transcript:

Flaps The technology and its variations across browsers

Flaps XHTML Compliant CSS V2 Uniform elements Multilayer components JavaScript Dynamically updating elements Redrawing maps Placing data such as pictures Authenticating users Requesting Geo Data via XML-RPC SVG Rendering complex menus (To be done with Layering)

Flaps Google Maps API (javascript classes and object literals) GMap2(container) GEvent() GLatLang(x,y) GMapTypeControl() GMarker() Flickr API (XML-RPC Calls) flickr.photos.getWithGeoData flickr.photos.search

SVG Scalable Vector Graphics Defines geometric shapes directly on browser Included using,, or Namespace Browser Support Firefox (Gecko), Opera, Safari: Capable of rendering some with limited support Internet Explorer: Needs adobe viewer Thus, could not be used in Flaps effectively

XHTML, HTML DOM, CSS Internet Explorer: No XHTML Support, reads as HTML. No issue here (XHTML more restrictive-move to CSS). W3C API’s not fully implemented by browsers; some browsers have own extensions IE: Object.style.backgroundPosition. Alternative: CSS position, left, top, right Map Sizing Many other examples…

Resizing in Flaps function get_new_dims(){ if (navigator.appName=="Netscape") { width = window.innerWidth; height = window.innerHeight-80; //compensate for bottom stuff } else if (navigator.appName.indexOf("Microsoft")!=-1) { width = document.body.offsetWidth; height = document.body.offsetHeight; } if(isLoaded == true){ window.onresize = null; document.getElementById("map").style.height=height+'px'; window.onresize = get_new_dims; } Window.onresize=get_new_dims();

Effects Firefox Resizing of map done after releasing of browser window Safari Resizing of map done as window is resized Opera Same action as Firefox Internet Explorer Infinite loop – web browser becomes unstable

Flaps With limited developing resources, this is an example of a web application that would not work well across all browsers

Result Widely used applications mean user is locked into a browser No competition inhibits innovation Tabbed Browsing, Convenient Search, RSS, etc. Greater risk of attacks Recent.INI vulnerability of IE