DOCSLIB.ORG

Using SVG with CSS3 and HTML5 Vector Graphics for Web Design

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text

Load more

Using SVG with CSS3 & HTML5 VECTOR GRAPHICS FOR WEB DESIGN Amelia Bellamy-Royds, Kurt Cagle & Dudley Storey Using SVG with CSS3 and HTML5 Vector Graphics for Web Design Amelia Bellamy-Royds, Kurt Cagle, and Dudley Storey Beijing Boston Farnham Sebastopol Tokyo Using SVG with CSS3 and HTML5 by Amelia Bellamy-Royds, Kurt Cagle, and Dudley Storey Copyright © 2018 Amelia Bellamy-Royds, Kurt Cagle, Dudley Storey. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://oreilly.com/safari). For more information, contact our corporate/institutional sales department: 800-998-9938 or [email protected]. Editor: Meg Foley Indexer: Amelia Bellamy-Royds Production Editor: Kristen Brown Interior Designer: David Futato Copyeditor: Rachel Monaghan Cover Designer: Karen Montgomery Proofreader: James Fraleigh Illustrator: Rebecca Demarest November 2017: First Edition Revision History for the First Edition 2017-10-17: First Release 2018-03-09: Second Release See http://oreilly.com/catalog/errata.csp?isbn=9781491921975 for release details. The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. Using SVG with CSS3 and HTML5, the cover image, and related trade dress are trademarks of O’Reilly Media, Inc. While the publisher and the authors have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the authors disclaim all responsibility for errors or omissions, including without limitation responsibility for damages resulting from the use of or reliance on this work. Use of the information and instructions contained in this work is at your own risk. If any code samples or other technology this work contains or describes is sub‐ ject to open source licenses or the intellectual property rights of others, it is your responsibility to ensure that your use thereof complies with such licenses and/or rights. 978-1-491-92197-5 [LSI] Table of Contents Preface. xiii Part I. SVG on the Web 1. Graphics from Vectors. 3 Defining an SVG in Code 4 Simple Shapes 7 Standalone SVG 12 Style and Structure 17 Repetition Without Redundancy 21 Graduating to Gradients 25 Activating Animation 28 Talking with Text 33 The SVG Advantage 37 Summary: An Overview of SVG 39 2. The Big Picture. 41 SVG and the Web Platform 42 The Changing Web 43 Future Focus: A Crystal Ball 47 JavaScript in SVG 48 Embedding SVG in Web Pages 56 SVG as an HTML Image 56 Interactive Embedded SVG 60 Using SVG in HTML5 Documents 61 Using SVG with CSS3 70 iii CSS Versus SVG: Style Versus Graphics 71 Summary: SVG and the Web 72 3. A Sense of Style. 75 CSS in SVG 75 Style Declarations 76 Overriding Styles 80 Conditional Styles 84 SVG in CSS 87 Using SVG Images Within CSS 87 Making Every File Count 94 Using SVG Effects Within CSS 96 CSS Versus SVG 98 Styling Documents Versus Drawing Graphics 98 CSS as a Vector Graphics Language 99 Which to Choose? 103 Summary: Working with CSS 105 4. Tools of the Trade. 107 Ready-to-Use SVG 108 Click, Drag, Draw: Graphical SVG Editors 113 Adobe Illustrator 114 Adobe Photoshop 115 Sketch 116 Inkscape and Sodipodi 117 Draw SVG 119 Boxy SVG 120 Bringing SVG Alive: SVG in the Web Browser 121 Gecko for Firefox 122 WebKit for Safari and iOS Devices 122 Blink for Newer Versions of Chrome, Opera, and Android Devices 123 Presto for Older Opera Versions and Opera Mini 123 Trident for Internet Explorer and Other Windows Programs 124 EdgeHTML for Microsoft Edge and Windows 10+ Programs 125 Servo 125 Other Dynamic SVG Viewers 126 Markup Management: Code Editors 127 Atom Plus SVG Preview 127 iv | Table of Contents Brackets Plus SVG Preview 128 Oxygen XML SVG Editor 129 Online Live Code Sites 130 Ready-to-Use Code: JavaScript Libraries 131 Raphaël and Snap.svg 132 D3.js 132 GSAP 133 SVG.js 133 Processing and Packaging 133 Summary: Software and Sources to Make SVG Easier 135 Part II. Drawing with Markup 5. Building Blocks. 139 Drawing Lines, from Here to There 140 Future Focus: More Measurements and Calculations 148 It’s Hip to Be Square (or Rectangular) 149 Future Focus: Geometry as Style 154 Cutting Corners 155 CSS Versus SVG: Curved Corners 158 Circular Logic 160 CSS Versus SVG: Shapes in Stylesheets 165 Summary: Basic Shapes 167 6. Following Your Own Path. 169 Giving Directions: The d Attribute 170 Future Focus: Piecewise Paths 172 Straight Shooters: The move-to and line-to Commands 173 Finishing Touches: The close-path Command 176 Hole-y Orders and Fill Rules 178 Following the Grid: Horizontal and Vertical Lines 182 Crunching Characters 183 Short and Sweet Shapes: Polygons and Polylines 185 CSS Versus SVG: Polygon Points 186 Curve Balls: The Quadratic Bézier Command 188 Future Focus: Beyond Simple Coordinates 192 Smooth Operators: The Smooth Quadratic Command 193 CSS Versus SVG: Paths Beyond SVG 198 Wave Motion: The Cubic Bézier Commands 198 Future Focus: Closing Curves 203 Table of Contents | v Building the Arcs 203 Future Focus: New Directions in Path Commands 208 Summary: Custom Shapes 208 7. The Art of the Word. 211 When Text Isn’t Text 213 Working with Web Fonts 215 Typewriter Text 216 Future Focus: Positioning Text with CSS 219 Colorful Language 220 CSS Versus SVG: Filling and Stroking Non-SVG Text 221 Responsive Text Scaling 221 Anchors and Alignment 225 Switching Styles with <tspan> 232 Adjusting the Typewriter 234 Future Focus: Automatically Positioned Multiline SVG Text 237 Full-Control Characters 237 Twists and Turns: The <textPath> Element 240 Sliding Text Along a Path with startOffset 246 Future Focus: More Flexible Text Paths 249 Measuring the Message 250 Summary: Graphical Text Layout and Fonts 251 Part III. Putting Graphics in Their Place 8. Scaling Up. 255 Coordinated Efforts 256 Framing the View, with viewBox 260 Future Focus: Selective Scaling 268 Calibrating the Scales 268 Scaling to Fit 269 A Poor Fit (and How preserveAspectRatio Fixes It) 273 CSS Versus SVG: Scaling to Fit 279 Just-Right Sizing 280 Autosizing Embedded SVG 281 Resizing Inline SVG 284 Preserving Aspect Ratios, with CSS Padding 286 Future Focus: Aspect-Ratio Control in CSS 295 Summary: Defining Coordinate Systems 296 vi | Table of Contents 9. A New Point of View. 299 Alternate Takes, with the <view> Element 300 Rescaling on the Fly, with SVG View Fragments 306 Future Focus: Cropping Any Image in a URL 309 Interactive Views 310 Packaged Deals 313 Flat Pack Stacks 324 Summary: Cropping Embedded SVG Files 328 10. Seeing Double. 331 Reduce, Reuse, Recycle 332 Future Focus: The <use> Element Shadow DOM 337 Symbolic Usage 338 Future Focus: Pinpointing a Symbol 341 File Management 341 Future Focus: Enabling Cross-Origin SVG Assets 351 Picture Perfect: Raster Images in SVG 351 Smooth Scaling Photographs 355 Future Focus: Easier Embedded Content 360 Summary: Reusing Content 360 11. Transformative Changes. 363 A Simpler Scale 364 Unbalanced Scales 370 Reflecting on Transformations 374 Future Focus: Transforming the transform Attribute 377 New Origins 378 Future Focus: Transformations with Units 383 Turning Things Around 385 Future Focus: Rotation Units and Adaptable Origins 391 Skewed Perspective 393 Enter the Matrix 400 Summary: Coordinate System Transformations 404 Part IV. Artistic Touches 12. Filling Up to Full. 409 Coloring Between the Lines 410 The Rainbow Connection 410 Future Focus: Controlling Colors, Consistently 413 Table of Contents | vii Coordinating Colors 414 Variables for Every Property 420 Water Colors 423 Future Focus: Percentage Alpha 428 Filling with More Than Solid Colors 429 Future Focus: Serving Up New Paint 431 Fallbacks for Fills 433 Future Focus: New Fill Effects 434 Picturing Paint 435 Scaling Paint Servers 437 The Boundaries of the Box 439 Great Gradients 441 Shared Structures 441 Aligning Linear Gradients 444 Transforming Gradients 450 Radiating Radial Gradients 452 Switching Focus 455 CSS Versus SVG: CSS Gradients 457 Patterns of Possibility 461 All the Units to Use 462 Dividing the Box 464 Picture Perfect 467 Patterned Prints 470 Summary: The fill Property, Gradients, and Patterns 475 13. Drawing the Lines. 477 Different Strokes 478 A Simple Stroke to Start 478 Future Focus: Layered Lines 483 Making the Connection with Line Joins 483 Future Focus: New Line-Join Options 487 Capping It Off with Line Caps 488 Adjusting Stroke Appearance 492 Anti-Anti-Aliasing for Crisp Lines 492 Swapping Stroke and Fill 494 Future Focus: Controlling Stroke Position 496 Scaling Shapes Without Scaling Strokes 496 A Dashing Design 499 A Wide Array of Dashes (and Gaps Between Them) 499 Future Focus: Better References for Dash Lengths 503 Turning Dashes into Dots 504 viii | Table of Contents CSS Versus SVG: Dashed Borders Versus Dashed Strokes 505 More Pleasing Dash Patterns, Made with Math 506 Future Focus: Greater Control of Dash Position 509 Starting Mid-Stride 509 Painting Lines 515 Future Focus: Painting in a Stroke Bounding Box 520 Summary: Stroke Effects 521 14. Marking the Way. 523 Emphasizing Points 524 Scaling to Strokes 530 Orienting Arrows 535 Future Focus: Automatically Coordinating Markers with Their Shapes 539 Defining Dimensions 540 Future Focus: Expanded Marker Position Options 544 Summary: Line Markers 546 15. Less Is More. 547 Fading Away with the opacity Property 548 The Clean-Cut Clip 550 Future Focus: Clipping Paths Everywhere 552 Creating a Custom Clipping Path 552 Intersecting Shapes 555 Clipping a clipPath 561 Stretch-to-Fit Clipping Effects 564 Shorthand Shapes 569 CSS Versus SVG: clip Versus clip-path 572 Hiding Behind Masks 573 Future Focus: More Masks for More Content 576 Who Was That Masked Graphic? 577 Making a Stencil 583 Future Focus: Easier Image Masks 589 Summary: Clipping and Masking 593 16.
Recommended publications
  • HTML5 Favorite Twitter Searches App Browser-Based Mobile Apps with HTML5, CSS3, Javascript and Web Storage

    HTML5 Favorite Twitter Searches App Browser-Based Mobile Apps with HTML5, CSS3, Javascript and Web Storage

    Androidfp_19.fm Page 1 Friday, May 18, 2012 10:32 AM 19 HTML5 Favorite Twitter Searches App Browser-Based Mobile Apps with HTML5, CSS3, JavaScript and Web Storage Objectives In this chapter you’ll: ■ Implement a web-based version of the Favorite Twitter Searches app from Chapter 5. ■ Use HTML5 and CSS3 to implement the interface of a web app. ■ Use JavaScript to implement the logic of a web app. ■ Use HTML5’s Web Storage APIs to store key-value pairs of data that persist between executions of a web app. ■ Use a CSS reset to remove all browser specific HTML- element formatting before styling an HTML document’s elements. ■ Save a shortcut for a web app to your device’s home screen so you can easily launch a web app. = DRAFT: © Copyright 1992–2012 by Deitel & Associates, Inc. All Rights Reserved. Androidfp_19.fm Page 2 Friday, May 18, 2012 10:32 AM 2 Chapter 19 HTML5 Favorite Twitter Searches App 19.1 Introduction 19.5 Building the App 19.2 Test-Driving the Favorite Twitter 19.5.1 HTML5 Document Searches App 19.5.2 CSS 19.5.3 JavaScript 19.3 Technologies Overview Outline 19.6 Wrap-Up 19.1 Introduction The Favorite Twitter Searches app from Chapter 5 allowed users to save their favorite Twit- ter search strings with easy-to-remember, user-chosen, short tag names. Users could then conveniently follow tweets on their favorite topics. In this chapter, we reimplement the Fa- vorite Twitter Searches app as a web app, using HTML5, CSS3 and JavaScript.
  • DHTML Effects in HTML Generated from DITA

    DHTML Effects in HTML Generated from DITA

    DHTML Effects in HTML Generated from DITA XML to PDF by RenderX XEP XSL-FO Formatter, visit us at http://www.renderx.com/ 2 | OpenTopic | TOC Contents DHTML Effects in HTML Generated from DITA............................................................3 XML to PDF by RenderX XEP XSL-FO Formatter, visit us at http://www.renderx.com/ OpenTopic | DHTML Effects in HTML Generated from DITA | 3 DHTML Effects in HTML Generated from DITA This topic describes an approach to creating expanding text and other DHTML effects in HTML-based output generated from DITA content. It is common for Help systems to use layering techniques to limit the amount of information presented to the reader. The reader chooses to view the information by clicking on a link. Most layering techniques, including expanding text, dropdown text and popup text, are implemented using Dynamic HTML. Overview The DITA Open Toolkit HTML transformations do not provide for layering effects. However, some changes to the XSL-T files, and the use of outputclassmetadata in the DITA topic content, along with some judicious use of JavaScript and CSS, can deliver these layering effects. Authoring Example In the following example illustrating the technique, a note element is to output as dropdown text, where the note label is used to toggle the display of the note text. The note element is simply marked up with an outputclass distinct attribute value (in this case, hw_expansion). < note outputclass="hw_expansion" type="note">Text of the note</note> Without any modification, the DITA OT will transform the note element to a paragraph element with a CSS class of the outputclass value.
  • Introduction to Scalable Vector Graphics

    Introduction to Scalable Vector Graphics

    Introduction to Scalable Vector Graphics Presented by developerWorks, your source for great tutorials ibm.com/developerWorks Table of Contents If you're viewing this document online, you can click any of the topics below to link directly to that section. 1. Introduction.............................................................. 2 2. What is SVG?........................................................... 4 3. Basic shapes............................................................ 10 4. Definitions and groups................................................. 16 5. Painting .................................................................. 21 6. Coordinates and transformations.................................... 32 7. Paths ..................................................................... 38 8. Text ....................................................................... 46 9. Animation and interactivity............................................ 51 10. Summary............................................................... 55 Introduction to Scalable Vector Graphics Page 1 of 56 ibm.com/developerWorks Presented by developerWorks, your source for great tutorials Section 1. Introduction Should I take this tutorial? This tutorial assists developers who want to understand the concepts behind Scalable Vector Graphics (SVG) in order to build them, either as static documents, or as dynamically generated content. XML experience is not required, but a familiarity with at least one tagging language (such as HTML) will be useful. For basic XML
  • Copyrighted Material

    Copyrighted Material

    05_096970 ch01.qxp 4/20/07 11:27 PM Page 3 1 Introducing Cascading Style Sheets Cascading style sheets is a language intended to simplify website design and development. Put simply, CSS handles the look and feel of a web page. With CSS, you can control the color of text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what back- ground images or colors are used, as well as a variety of other visual effects. CSS was created in language that is easy to learn and understand, but it provides powerful control over the presentation of a document. Most commonly, CSS is combined with the markup languages HTML or XHTML. These markup languages contain the actual text you see in a web page — the hyperlinks, paragraphs, headings, lists, and tables — and are the glue of a web docu- ment. They contain the web page’s data, as well as the CSS document that contains information about what the web page should look like, and JavaScript, which is another language that pro- vides dynamic and interactive functionality. HTML and XHTML are very similar languages. In fact, for the majority of documents today, they are pretty much identical, although XHTML has some strict requirements about the type of syntax used. I discuss the differences between these two languages in detail in Chapter 2, and I also pro- vide a few simple examples of what each language looks like and how CSS comes together with the language to create a web page. In this chapter, however, I discuss the following: ❑ The W3C, an organization that plans and makes recommendations for how the web should functionCOPYRIGHTED and evolve MATERIAL ❑ How Internet documents work, where they come from, and how the browser displays them ❑ An abridged history of the Internet ❑ Why CSS was a desperately needed solution ❑ The advantages of using CSS 05_096970 ch01.qxp 4/20/07 11:27 PM Page 4 Part I: The Basics The next section takes a look at the independent organization that makes recommendations about how CSS, as well as a variety of other web-specific languages, should be used and implemented.
  • Novell SUSE Linux Package Description and Support Level Information for Contracted Customers and Partners

    Novell SUSE Linux Package Description and Support Level Information for Contracted Customers and Partners

    Novell SUSE Linux Package Description and Support Level Information for Contracted Customers and Partners Definitions and Support Level Descriptions ACC: Additional Customer Contract necessary L1: Installation and problem determination, which means technical support Configuration designed to provide compatibility information, installation assistance, usage support, on-going maintenance and basic troubleshooting. Level 1 Support is not intended to correct product defect errors. L2: Reproduction of problem isolation, which means technical support designed to Potential Issues duplicate customer problems, isolate problem area and provide resolution for problems not resolved by Level 1 Support. L3: Code Debugging and problem resolution, which means technical support designed Patch Provision to resolve complex problems by engaging engineering in resolution of product defects which have been identified by Level 2 Support. Servicelevel Package Short Name Package Description SLES10 SP3 s390x 844-ksc-pcf Korean 8x4x4 Johab Fonts L2 a2ps Converts ASCII Text into PostScript L2 aaa_base SUSE Linux Base Package L3 aaa_skel Skeleton for Default Users L3 aalib An ASCII Art Library L2 aalib-32bit An ASCII Art Library L2 aalib-devel Development Package for AAlib L2 aalib-devel-32bit Development Package for AAlib L2 acct User-Specific Process Accounting L3 acl Commands for Manipulating POSIX Access Control Lists L3 adaptec-firmware Firmware files for Adaptec SAS Cards (AIC94xx Series) L3 agfa-fonts Professional TrueType Fonts L2 aide Advanced Intrusion Detection Environment L2 alsa Advanced Linux Sound Architecture L3 alsa-32bit Advanced Linux Sound Architecture L3 alsa-devel Include Files and Libraries mandatory for Development. L2 alsa-docs Additional Package Documentation. L2 amanda Network Disk Archiver L2 amavisd-new High-Performance E-Mail Virus Scanner L3 amtu Abstract Machine Test Utility L2 ant A Java-Based Build Tool L3 anthy Kana-Kanji Conversion Engine L2 anthy-devel Include Files and Libraries mandatory for Development.
  • Protecting Browser State from Web Privacy Attacks

    Protecting Browser State from Web Privacy Attacks

    Protecting Browser State from Web Privacy Attacks Collin Jackson Andrew Bortz Stanford University Stanford University [email protected] [email protected] Dan Boneh John C Mitchell Stanford University Stanford University [email protected] [email protected] ABSTRACT malicious attackers is critical for privacy and security, yet Through a variety of means, including a range of browser this task often falls by the wayside in the push for function- cache methods and inspecting the color of a visited hyper- ality. link, client-side browser state can be exploited to track users An important browser design decision dating back to Net- against their wishes. This tracking is possible because per- scape Navigator 2.0 [10] is the \same-origin" principle, which sistent, client-side browser state is not properly partitioned prohibits web sites from different domains from interacting on per-site basis in current browsers. We address this prob- with another except in very limited ways. This principle lem by refining the general notion of a \same-origin" policy enables cookies and JavaScript from sites of varying trust- and implementing two browser extensions that enforce this worthiness to silently coexist on the user's browser without policy on the browser cache and visited links. interfering with each other. It is the failure to apply an ap- We also analyze various degrees of cooperation between propriate adaptation of the same-origin principle to all per- sites to track users, and show that even if long-term browser sistent browser state that is the source of the most alarming state is properly partitioned, it is still possible for sites to web privacy leaks.
  • Automated Cross-Browser Compatibility Testing

    Automated Cross-Browser Compatibility Testing

    Automated Cross-Browser Compatibility Testing ∗ Ali Mesbah Mukul R. Prasad Electrical and Computer Engineering Trusted Systems Innovation Group University of British Columbia Fujitsu Laboratories of America Vancouver, BC, Canada Sunnyvale, CA, USA [email protected] [email protected] ABSTRACT web browsers render web content somewhat differently [18, With the advent of Web 2.0 applications and new browsers, 24, 25, 26]. However, the scope and impact of this problem the cross-browser compatibility issue is becoming increas- has been rapidly growing due to two, fairly recent trends. ingly important. Although the problem is widely recognized First, modern, rich-content web applications have a heavy among web developers, no systematic approach to tackle client-side behavioral footprint, i.e., they are designed to ex- it exists today. None of the current tools, which provide ecute significant elements of their behavior exclusively on the screenshots or emulation environments, specifies any notion client-side, typically within the web browser. Further, tech- of cross-browser compatibility, much less check it automat- nologies such as Ajax [12], Flash, and event-handling for ically. In this paper, we pose the problem of cross-browser dynamic HTML, which support this thick-client behavior, compatibility testing of modern web applications as a `func- are the very aspects in which web browsers differ. tional consistency' check of web application behavior across Second, recent years have seen an explosion in the num- different web browsers and present an automated solution ber of available web browsers. There are nearly 100 different for it. Our approach consists of (1) automatically analyzing web browsers available today [31].
  • HTML, XHTML, and CSS: Comprehensive

    HTML, XHTML, and CSS: Comprehensive

    HTML 5 Creating an Image Map Objectives You will have mastered the material in this chapter when you can: • Defi ne terms relating to image • Create a home page mapping • Create a table, insert an image • List the differences between into a table, and use the usemap server-side and client-side image maps attribute to defi ne an image map • Name the two components of an • Insert special characters into image map and describe the steps to a Web page implement an image map • Use the <map> </map> tags to start • Distinguish between appropriate and and end a map inappropriate images for mapping • Use the <area> tag to indicate the • Sketch hotspots on an image shape, coordinates, and URL for a mapped area • Describe how the x- and y-coordinates relate to vertical and • Create an external style sheet for horizontal alignment styles used across the Web site • Open an image in Paint and use Paint to locate the image map coordinates Copyright 2010 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s). Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it. HTML 5 Creating an Image Map Introduction Many of the Web pages in Chapters 2 through 4 used the <img> tag to add images. In Chapter 3, an image also was used as a link back to the home page, by using the <a> </a> tags to defi ne the image as the clickable element for the link.
  • Document Object Model

    Document Object Model

    Document Object Model CITS3403: Agile Web Development Semester 1, 2021 Introduction • We’ve seen JavaScript core – provides a general scripting language – but why is it so useful for the web? • Client-side JavaScript adds collection of objects, methods and properties that allow scripts to interact with HTML documents dynamic documents client-side programming • This is done by bindings to the Document Object Model (DOM) – “The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.” – “The document can be further processed and the results of that processing can be incorporated back into the presented page.” • DOM specifications describe an abstract model of a document – API between HTML document and program – Interfaces describe methods and properties – Different languages will bind the interfaces to specific implementations – Data are represented as properties and operations as methods • https://www.w3schools.com/js/js_htmldom.asp The DOM Tree • DOM API describes a tree structure – reflects the hierarchy in the XTML document – example... <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> A simple document </title> </head> <body> <table> <tr> <th>Breakfast</th> <td>0</td> <td>1</td> </tr> <tr> <th>Lunch</th> <td>1</td> <td>0</td> </tr> </table> </body> </html> Execution Environment • The DOM tree also includes nodes for the execution environment in a browser • Window object represents the window displaying a document – All properties are visible to all scripts – Global variables are properties of the Window object • Document object represents the HTML document displayed – Accessed through document property of Window – Property arrays for forms, links, images, anchors, … • The Browser Object Model is sometimes used to refer to bindings to the browser, not specific to the current page (document) being rendered.
  • Amazon Silk Developer Guide Amazon Silk Developer Guide

    Amazon Silk Developer Guide Amazon Silk Developer Guide

    Amazon Silk Developer Guide Amazon Silk Developer Guide Amazon Silk: Developer Guide Copyright © 2015 Amazon Web Services, Inc. and/or its affiliates. All rights reserved. The following are trademarks of Amazon Web Services, Inc.: Amazon, Amazon Web Services Design, AWS, Amazon CloudFront, AWS CloudTrail, AWS CodeDeploy, Amazon Cognito, Amazon DevPay, DynamoDB, ElastiCache, Amazon EC2, Amazon Elastic Compute Cloud, Amazon Glacier, Amazon Kinesis, Kindle, Kindle Fire, AWS Marketplace Design, Mechanical Turk, Amazon Redshift, Amazon Route 53, Amazon S3, Amazon VPC, and Amazon WorkDocs. In addition, Amazon.com graphics, logos, page headers, button icons, scripts, and service names are trademarks, or trade dress of Amazon in the U.S. and/or other countries. Amazon©s trademarks and trade dress may not be used in connection with any product or service that is not Amazon©s, in any manner that is likely to cause confusion among customers, or in any manner that disparages or discredits Amazon. All other trademarks not owned by Amazon are the property of their respective owners, who may or may not be affiliated with, connected to, or sponsored by Amazon. AWS documentation posted on the Alpha server is for internal testing and review purposes only. It is not intended for external customers. Amazon Silk Developer Guide Table of Contents What Is Amazon Silk? .................................................................................................................... 1 Split Browser Architecture ......................................................................................................
  • The Artist Who Paints the in Its Sustainment, a Sudden and “Appropriation” As Body for Each Piece, Which Begins As Almost Frightening Phenomenon

    The Artist Who Paints the in Its Sustainment, a Sudden and “Appropriation” As Body for Each Piece, Which Begins As Almost Frightening Phenomenon

    INSIDE: Raleigh on Film; Bethune on Theatre; Seckel's "Cultural Scene; Steiner on "Images, Sounds, Words"; Lille on Michel Platnic; Platnic on Movement; Rena Tobey on Lilly Martin Spencer; Herman on The Soundtrack of My Life; New Art Books; Short Fiction & Poetry; Extensive Calendar of Cultural Events…and more! Vol. 31 No. 2 Fall 2014 (Sept/Oct/Nov) Michel Platnic: Let us Move Through Space By DAwn LiLLE UsUally I enter a gallery, walk honors from the Midrasha school of uses it as a start- through the first part of an exhibi- art and received a prize for excel- ing point. the first tion to get a general impression, lence in Photography. Prior to this, impression, that we then go back and look at each work due to his degree in electrical engi- are seeing some ver- separately. When a friend took me neering, he had worked in the tele- sion of the original to the Gordon Gallery in tel aviv to com field. But he also studied and painting, is quickly see the work of an emerging talent practiced martial arts, performance dissipated and it I continued this habit. But after a art and the mime techniques of eti- becomes something minute or two I realized something enne Decroix and Jacques lecoq. else. If one were unusual was happening. He admired the theater of ariane working only in enter the world of Michel Plat- Mnouchkine and read extensively. dance it might be nic, a French born artist who moved Platnic mixes painting, camera akin to using the to Israel in 1998, graduated with and video, via extensive use of famous romantic the human body, print of the four bal- to create “living lerinas as the basis paintings,” which, for a choreographic because of his at- work (which has, in tention to minute fact, been done).
  • Release 2.0.0 Florian Mounier

    Release 2.0.0 Florian Mounier

    pygal Documentation Release 2.0.0 Florian Mounier December 01, 2016 Contents 1 Sexy python charting 1 2 Simple python charting 3 3 Index 5 Python Module Index 105 i ii CHAPTER 1 Sexy python charting 1 pygal Documentation, Release 2.0.0 2 Chapter 1. Sexy python charting CHAPTER 2 Simple python charting pygal.Bar()(1,3,3,7)(1,6,6,4).render() 3 pygal Documentation, Release 2.0.0 4 Chapter 2. Simple python charting CHAPTER 3 Index 3.1 Documentation 3.1.1 First steps Caution: First you need to install pygal, see installing. When it’s done, you are ready to make your first chart: import pygal # First import pygal bar_chart= pygal.Bar() # Then create a bar graph object bar_chart.add('Fibonacci',[0,1,1,2,3,5,8, 13, 21, 34, 55]) # Add some values bar_chart.render_to_file('bar_chart.svg') # Save the svg to a file Now you should have a svg file called bar_chart.svg in your current directory. You can open it with various programs such as your web browser, inkscape or any svg compatible viewer. The resulting chart will be tho following: bar_chart= pygal.Bar() bar_chart.add('Fibonacci',[0,1,1,2,3,5,8, 13, 21, 34, 55]) bar_chart.render() Caution: pygal relies on svg css styling. This is sadly not fully supported by gnome librsvg and therefore can lead to black svg being displayed. This is not a bug in pygal. See this bugzilla search To make a multiple series graph just add another one: bar_chart= pygal.Bar() bar_chart.add('Fibonacci',[0,1,1,2,3,5,8, 13, 21, 34, 55]) bar_chart.add('Padovan',[1,1,1,2,2,3,4,5,7,9, 12]) bar_chart.render() If you want to stack