Skip to main content

NETWORK BASICS

Network A system of interconnected computers and computerized peripherals such as printers is called computer network. This interconnection among computers facilitates information sharing among them. Computers may connect to each other by either wired or wireless media. A computer network consists of a collection of computers, printers and other equipment that is connected together so that they can communicate with each other.  


Network application
A Network application is any application running on one host and provides a communication to another application running on a different host, the application may use an existing application layer protocols such as: HTTP(e.g. the Browser and web server), SMTP(e.g. the email-client). And may be the application does not use any existing protocols and depends on the socket programming to communicate to another application. So the web application is a type of the network applications. 
There are lots of advantages from build up a network, but the th…

Managing the Graphical Interface by Using CSS

Managing the Graphical Interface with CSS
Managing the Graphical Interface with CSS

New properties in CSS3 provide an easy means to a more graphical and appealing user interface for Web sites and applications.
CSS3 enables you to create stunning graphical elements for Web sites and applications, which ratchet up the satisfaction of the user experience. You can create graphics effects such as rounded corners and drop shadows, and apply 2D and 3D transformations like rotations and scaling. Transitions and animations, performed completely with HTML and CSS3, bring life to otherwise static images, boxes, and text. In addition, many of the same CSS3 properties apply to canvas figures, and SVG comes with a comprehensive set of filters that produce similar effects as CSS3 properties.

Creating Graphics Effects

CSS3 provides the border-radius property to create rounded corners, the box-shadow property for drop-shadows, the opacity property for transparency effects, and linear-gradient and radial-gradient properties for background gradients.

CSS3 enables you to easily apply several new graphics effects to HTML elements, making the user interface more appealing. Some of the new graphics effects include rounded corners, drop-shadows, transparency, and background gradients. You can even apply some of these properties, like shadows, to text. 

CREATING ROUNDED CORNERS 

You use the CSS3 border-radius property to create rounded corners around layout elements, like headers, footers, sidebars, graphics boxes, and outlines around images. borderradius is a length, which is usually expressed in pixels or ems but can be a percentage. The length is the radius of the circle that defines the “roundedness” of each box corner. The lower the number, the less rounded the corner. Some browsers have problems rendering the percentage properly, so use a pixel or em length whenever possible. To create a box with a rounded border, the CSS code and markup might look like this:

<!doctype html> <html> <head>  <meta charset="utf-8" /> <title>Rounded Corners</title> <style type="text/css"> div {  padding: 40px 40px;   background: dodgerblue;  width: 400px;  color: #fff;  font-family: sans-serif;  font-size: xx-large;  border-radius: 25px;  margin-left: auto;  margin-right: auto;  margin-top: 100px; } </style> </head>
<body>  <div>A box with rounded corners</div> </body> </html>

The Microsoft “Hands-on: border-radius” Web page at http://ie.microsoft.com/testdrive/ Graphics/hands-on-css3/hands-on_border-radius.htm lets you see how changes made to the border-radius length affect a box’s corners.

CREATING SHADOWS 

CSS3 introduces the box-shadow property to create drop shadows around layout elements. A drop shadow is a visual effect in which an object is repeated behind and slightly below itself to create the illusion that the object floats over its background.
The CSS syntax for creating a shadow is: box-shadow: h-shadow v-shadow blur spread color inset; The h-shadow and v-shadow attributes indicate the horizontal and vertical position of the shadow in relation to the box. Both of these attributes are required. The h-shadow value defines the horizontal offset of the shadow. A positive value offsets the shadow to the right of the element, and a negative value to the left. The v-shadow value defines the vertical offset of the shadow. A positive value offsets the shadow from the bottom of the element, and a negative value from the top. The remaining attributes are optional. The blur attribute, in pixels, indicates the amount of blur applied to the shadow. The spread attribute indicates the size of the shadow, color specifies the color of the drop shadow, and inset moves the shadow from the outside to the inside of the box. Figure 7-3 shows an example of the rounded-corners box with a drop shadow. The shadow was created from these values, which specify the horizontal and vertical shadow position, the amount of blur, and the color of the shadow: box-shadow: 10px 10px 5px #808080;
CSS3 also provides the text-shadow property to apply shadowing to text. The attributes are the same as the box-shadow property, except that spread and inset are not included.

CREATE A BOX WITH ROUNDED CORNERS AND A SHADOW GET READY. 

To create a box with rounded corners and a shadow, perform the following steps: 1. In an editing or app development tool, create an HTML document that includes the following content:
<!doctype html> <html> <head>  <meta charset="utf-8" />  <title>Rounded Corners</title> <style type="text/css"> div {  border: 3px solid #000;  background-color: #000;  padding: 1em;  width: 300px;  border-radius: 8px;  margin-left: auto;  margin-right: auto;  margin-top: 100px;  color: #fff;  font-family: sans-serif;  font-size: large;  text-align: center; } </style> </head><body>  <div>A box example</div> </body> </html> 2. Save the file as L7-box-exercise.html. View the file in a Web browser, which should look similar to Figure 7-4.

APPLYING TRANSPARENCY 

An opaque item does not let light pass through, whereas you can see through a transparent item. Even though the terms are opposite, by reducing the opacity of an item or increasing its transparency, you eventually reach the same point. Figure 7-6 shows the effect of transparency (or reduced opacity) on an image. The original image is on the left; the image with a 50% transparency applied is on the right.

The syntax for applying a transparency to an image or other element is: opacity: value The value is a floating-point value between 0.0 (100%  transparent) and 1.0 (100% opaque). To apply a 45% transparency, for example, you would use the value 0.55 (1.0 – 0.45). 

ADD TRANSPARENCY TO A BOX GET READY.

 To add transparency to a box, perform the following steps: 1. Open L7-box-exercise.html in an editing or app development tool, if it isn’t already open. 2. Add the following line to the style element: opacity: 0.6; 3. Save the file as L7-tranparency-exercise.html and view the results in a Web browser. The box should resemble Figure 7-7.
4. Leave the file, editing tool, and Web browser open if you complete the next exercise during this session.
APPLYING BACKGROUND GRADIENTS A gradient is a smooth change of colors, either within the same hue, such as from dark green to light green, or starting with one color and ending with a different color, such as starting with blue and ending with yellow. Developers commonly use gradients for subtle shading within backgrounds, buttons, and more. The different types, or methods, of CSS3 gradients are:
• linear-gradient: Creates a gradient from top to bottom or vice versa, or from corner to corner 
• radial-gradient: Creates a gradient that radiates out from a central point 
• repeating-linear-gradient: Creates a repeating linear gradient, which results in straight bands of gradient color 
• repeating-radial-gradient: Creates a repeating radial gradient, which results in circular bands of gradient color
To apply a gradient to an HTML image, use the background property with one of the g radient methods listed above, along with the parameters specific to each method. The possible values for the methods are listed on the W3C “CSS Image Values and Replaced Content Module Level 3” Web page at http://dev.w3.org/csswg/css3-images/ #repeating-gradients. A linear gradient is a horizontal, vertical, or diagonal gradient. To create a linear gradient from black to white, use the following CSS code: background: linear-gradient(black, white); The default gradient goes from top to bottom. You can insert “top,” “bottom,” “right,” or “left” as the first value to control the direction of the gradient. Figure 7-8 shows the black-towhite gradient that spans from top to bottom.
A diagonal gradient is a type of linear gradient that extends from one corner of a container diagonally to another corner. The code for a diagonal gradient that starts in the lower-left corner and extends to the upper-right corner of a container is: background: linear-gradient(45deg, white, black); CSS3 gradients also support color interpolation in the alpha color space, which is part of the red blue green alpha (RGBA) color model, to produce smoother color transitions in gradients. (You’ve probably seen some gradients where you can readily see the transition from one shade to the next—they look like thin bands of color. Color interpolation in the alpha color space eliminates the “bandy” look.) You can specify multiple color stops, with an RGBA color and position for each one. The following is an example of the use of rgba colors: linear-gradient(to right, rgba(255,255,255,0) Radial gradients start from a central point and radiate color out to the edges of a container. The values for radials differ slightly from linear gradients. The general syntax for radial  gradients is: radial-gradient(position,size and shape,color stops); Let’s look at an example of a radial gradient that begins with light blue (indicated by the 
 hexidecimal code #99CCFF) at the center and changes to a darker blue (indicated by #3D5266) at the edges. The code might look like the following, which renders in a browser as shown in Figure 7-9. radial-gradient(50% 50%, 70% 70%, #99CCFF, #3D5266);

The first set of percentages (50% 50%) defines the horizontal and vertical center values. In this case, the gradient starts in the center of the element. The second set of percentages (70% 70%) specifies the size and shape of the gradient. Because a radial gradient resembles an ellipse, the percentages refer to radii. The hexadecimal codes in the example are the color stops; the first color stop is the starting point and the second color stop is the ending point. 

You might see the background-image property in some sources; it works the same as the shorthand background property.

APPLY A BACKGROUND GRADIENT TO A BOX GET READY.

To apply a background gradient to a box, perform the following steps: 1. Open L7-tranparency-exercise.html in an editing or app development tool, if it isn’t already open. 2. Add the following lines to the style element: background: linear-gradient(black,white); background: -ms-linear-gradient(black,white); background: -moz-linear-gradient(black,white); background: -o-linear-gradient(black,white); background: -webkit-linear-gradient(black,white);

Notice the use of vendor prefixes in this code. By including all of the major vendor prefixes, your HTML document is more likely to be rendered properly by the largest number of users. As a reminder from Lesson 5, however, including all four vendor prefixes in your code doesn’t guarantee the CSS3 feature will work within all of the browsers. A browser that doesn’t support a certain feature will not display the feature properly, even with a vendor prefix. Some browsers offer partial support for a feature, which can produce mixed results. During the transition to CSS3, you should test your code in all of the major browsers before using a certain feature in HTML/CSS documents that will be displayed to a wide audience.

4. Remove the border (not border radius), opacity, and box shadow lines from the CSS.

5. Save the file as L7-gradient-exercise.html and view the file in various Web browsers. Do all of the browsers display the gradient? The box should resemble Figure 7-10 in any browser that supports linear gradients.

6. Close the file and the Web browsers but leave the editing tool open if you plan to complete the next exercise during this session.

Understanding Typography and the Web Open Font Format

Web developers are beginning to use the Web Open Font Format (WOFF) as a way to enhance UIs with just about any font available or custom-created fonts. The flexibility to use any font is a big change from the pre-WOFF restrictions on font usage in HTML documents.

Typography is the art of arranging type, historically in printed matter, and fonts play a prominent role in typography. You use CSS font-related properties such as font-family, font-size, font-style, font-variant, and font-weight to style HTML documents. For years, Web and application developers have been limited to a set of standard fonts that are considered Web safe, which means they are typically located on a user’s computer and therefore render consistently in the majority of browsers. 

Web-safe fonts don’t work in every situation. For example, many companies use particular fonts as part of their brand identity, which aren’t often part of the Web-safe font set. Designers and developers strive to make sites look interesting, more appealing, and unique, which can’t always be accomplished with Web-safe fonts.

To use a non-standard font in a heading, title, or block of text, developers have had to create the content in a page layout or graphics program, save it as an image, and then use the <img> tag in an HTML document. This method has several drawbacks:
• It’s time-consuming.
• It interferes with accessibility page readers; images of text cannot be read aloud. 
• It reduces the effectiveness of search engine optimization (SEO) because search engines look for text, not images of text. Developers have also used embedded fonts, which are font sets loaded on their servers. The designer inserts a link to the font set within an HTML document or CSS file, which helps the browser render the font properly. Although embedded fonts are still widely used, a new and better technique for handling non-standard fonts is WOFF. The Web Open Font Format (WOFF) is a means of bringing better typography to the Web. WOFF allows Web developers to use custom fonts—pretty much any font—instead of being limited to the standard Web fonts. WOFF files are compressed True Type, Open-type, or Open Font Format fonts that contain additional metadata. To use WOFF, you can host fonts on your server or use a Web font service. Free fonts are available from a variety of sources like font-squirrel and the Open Font Library. Font  services include Font-font and Font-shop, among others. They require a paid subscription, which gives you full rights to use the font on your Web site as long as the subscription is current. To use a WOFF font from a font vendor’s site, for example, include the @font-face rule in the CSS file, similar to the following: <style> @font-face { font-family: "font-family-name"; src: url("http://website/fonts/fontfile")  } </style>
Some WOFF fonts work better than others depending on the browser in which they’re being viewed. For example, where one Web browser might render the font perfectly, another browser might display the font bit-mapped or with inappropriate boldface. Before purchasing a WOFF font or font package, be sure to research the font on the Web to find out if other developers have had any problems using it. Some font vendors provide a way for you to preview fonts in all of the major browsers before purchase.


Applying 2D and 3D Transformations


In HTML5/CSS3, a transform is an effect that lets you change the size, shape, and position of an element. Transformations are either 2D or 3D, and include translating (moving), s caling, rotating, skewing (stretching), and spinning elements. You use the CSS transform property to specify different kinds of transformations made to HTML elements. The transform property uses several methods for 2D and 3D transformations, as listed in Table 7-1.

Now that you understand the essence of 2D and 3D transformations, let’s look at some  specific examples.

2D TRANSLATION To translate an element means to move it, without rotating, skewing, or otherwise turning the image. To move an element, you use the translate() method in CSS and provide x- and y-axis values to position the element relative to its original or default position. The x-axis value specifies the left position of the element, and the y-axis value specifies the top position. For example, the following code moves the element 100 pixels from the left and 50 pixels from the top:

2D SCALING To scale an element is to increase or decrease its size. To grow or shrink an element dynamically, you use the scale() method in CSS and provide x-axis (width) and y-axis (height) values. For example, the following code increases the width of the element two times its original size, and increases the height four times its original size: 

TRANSLATE AND SCALE A 2D SHAPE GET READY.

To translate and scale a 2D shape, perform the following steps: 1. In an editing or app development tool, create an HTML document that includes the following content:
<!doctype html> <html> <head>    <meta charset="utf-8" />    <title></title> <style type="text/css"> div { padding: 20px 20px; background: tomato; width: 150px; height: 75px; color: #fff; font-family: sans-serif; font-size: x-large; } </style> </head>
<body> <div>This element can move</div> </body> 2. Save the file as L7-translate-exercise.html and view it in at least two different Web browsers. The box should appear in the upper-left corner of the browser windows. 3. Add the following lines to the style element: transform: translate(200px,100px); -ms-transform: translate(200px,100px); -moz-transform: translate(200px,100px); -o-transform: translate(200px,100px); -webkit-transform: translate(200px,100px); 4. Save the file and view it in the same Web browsers. The box should have moved down and to the right. 5. To scale the box so that it’s twice as wide and twice as tall as the original box, add scale(2,2) to the transform lines, as follows:
transform: translate(200px,100px) scale(2,2); -ms-transform: translate(200px,100px) scale(2,2); -moz-transform: translate(200px,100px) scale(2,2); -o-transform: translate(200px,100px) scale(2,2); -webkit-transform: translate(200px,100px) scale(2,2); 6. Change the div text to read This element can scale. 7. Save the file as L7-scale-exercise.html and view it in the Web browsers. The display should look similar to Figure 7-13.
8. Close the file but leave the editing tool and Web browsers open if you plan to
 complete the next exercise during this session.

2D AND 3D ROTATION 

To rotate an element turns it clockwise by a specified number of degrees. To rotate an e lement, you use the rotate() method in CSS and specify the degrees of rotation. For example, the following code rotates an element by 30 degrees in the 2D plane: transform: rotate(30deg);
3D rotation uses the rotateX() and rotateY() methods. With rotateX(), the element rotates around its x-axis, and rotateY() rotates the element around its y-axis. The following code rotates an element 180 degrees. If the element contains text, the text would appear upside down after the rotation, as shown in Figure 7-15. Remember, to see the 3D effect occurring requires JavaScript or some other form of scripting; what you see in Figure 7-15 is the end result of the rotation. 

2D AND 3D SKEWING 

To skew an element is to stretch it in one or more directions. To skew an element using CSS, you use the skew() method and provide x-axis and y-axis values, in degrees, to create an angular shape. For example, the following code turns an element 20 degrees around the x-axis and 30 degrees around the y-axis: transform: skew(20deg,30deg);

3D skewing uses the skewX() and skewY() methods to skew an element around its x-axis and y-axis, respectively. As an example, the following code skews an element 45 degrees, as shown in Figure 7-18. transform: skewX(45deg);

ROTATE AND SKEW A 2D SHAPE GET READY. 

To rotate and skew a 2D shape, perform the following steps: 1. Open L7-scale-exercise.html in an editing or app development tool, if it isn’t already open. 2. Modify the transform lines to replace scale with a 30-degree rotation, as follows: transform: translate(200px,100px) rotate(30deg); -ms-transform: translate(200px,100px) rotate(30deg); -moz-transform: translate(200px,100px) rotate(30deg); -o-transform: translate(200px,100px) rotate(30deg); -webkit-transform: translate(200px,100px) rotate(30deg); 3. Change the div text to read This element is rotated. 4. Save the file as L7-rotate-exercise.html and view the file in the Web browsers. Are the box and text rotated as shown in Figure 7-19? 5. To skew the box by 45 degrees, replace rotate with skew in the transform lines, as follows:
transform: translate(200px,100px) skew(45deg); -ms-transform: translate(200px,100px) skew(45deg); -moz-transform: translate(200px,100px) skew(45deg); -o-transform: translate(200px,100px) skew(45deg); -webkit-transform: translate(200px,100px) skew(45deg); 6. Change the div text to read This element is skewed. 7. Save the file as L7-skew-exercise.html and view it in the Web browsers. The display should look similar to Figure 7-20. 8. Close the file but leave the editing tool and Web browsers open if you plan to
 complete the next exercise during this session.

UNDERSTANDING 3D PERSPECTIVE, TRANSITIONS, AND ANIMATIONS 

Perspective, in terms of drawings and illustrations, is the convergence of lines that give the illusion of depth. The CSS3 3D perspective property defines how a browser renders the depth of a 3D transformed element. The perspective property takes on a number value: lower values (in the range of 1 to 1000) create a more pronounced effect than higher values. Another important thing to remember is that perspective applies only to 3D transformed elements. The general syntax for perspective is: perspective: number; An example of perspective with a 3D rotation applied is: perspective: 600; margin: 100px 0 0 50px; transform: rotate3d(0, 1, 1, 45deg); The following is a complete markup example for perspective and is shown in Figure 7-21 using a webkit-supported browser. <!doctype html> <html> <head> <style type="text/css"> div { padding: 40px 40px; background: #B8860B; width: 150px;color: #fff; font-family: sans-serif; font-size: xx-large; } div#div2 { margin: 100px; perspective: 600; margin: 100px 0 0 50px; -ms-perspective: 600; margin: 100px 0 0 50px; -moz-perspective: 600; margin: 100px 0 0 50px; -o-perspective: 600; margin: 100px 0 0 50px; -webkit-perspective: 600; margin: 100px 0 0 50px;
transform: rotate3d(0, 1, 1, 45deg); -ms-transform: rotate3d(0, 1, 1, 45deg); -moz-transform: rotate3d(0, 1, 1, 45deg); -o-transform: rotate3d(0, 1, 1, 45deg); -webkit-transform: rotate3d(0, 1, 1, 45deg); } </style> </head>
<body>  <div>Original element</div>  <div id="div2">Transformed element</div> </body> </html>

Now let’s focus on transitions and animation. A transition is a change from one thing to another; in CSS, a transition is the change in an element from one style to another. You can think of a gradient as a type of transition in that the background color of a container changes from one color to another. However, a gradient is itself a static thing—it’s either present or not. In CSS3, the action of a transition is visible. The changes render onscreen in an animated fashion as if powered by a script, but no scripts are involved. You use the transition property to create a CSS3 transition. At a minimum, you must specify the CSS property to be acted upon during the transition. This can be an element’s position, size, color, background color, letter spacing, rotation, and so on. Most transitions also specify the length (duration) of the transition. If the duration value is not set, the default is 0. You specify CSS3 transitions using the properties described in Table 7-2.

The following is an example of a simple transition that displays text in a box. When a user hovers the mouse pointer over the box, the text changes. Figure 7-22 shows the before and after boxes. <style type="text/css"> #wrapper { transition-property: opacity; transition-duration: 3s; transition-delay: 1s; transition-timing-function: linear; } #wrapper #before, #wrapper:hover #after {   opacity: 1; } #wrapper:hover #before, #wrapper #after {   opacity: 0; } </style> </head>
<body> <div id="wrapper">  <div id="before">Now you see me</div>  <div id="after">Now you don't</div> </div> </body>

CREATE A TRANSITION USING CSS GET READY. 

To create a transition using CSS, perform the following steps: 1. In an editing or app development tool, create an HTML document that includes the following content:
<!doctype html> <html> <head>    <meta charset="utf-8" />    <title>Transition and Opacity Example</title> <style type="text/css"> #wrapper { padding: 40px 40px; background: dodgerblue; width: 200px; font-family: sans-serif; font-size: xx-large; margin-left: auto; margin-right: auto; margin-top: 100px; color: #fff; }
#wrapper #front, #wrapper:hover #back { opacity:1; -ms-opacity: 1; -moz-opacity: 1; -o-opacity: 1; -webkit-opacity: 1;
transition-property: opacity; -ms-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; -webkit-transition-property: opacity;
transition-duration: 1s; -ms-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; -webkit-transition-duration: 1s;
transition-timing-function: linear; -ms-transition-timing-function: linear; -moz-transition-timing-function: linear; -o-transition-timing-function: linear; -webkit-transition-timing-function: linear; }
#wrapper:hover #front, #wrapper #back { opacity: 0; -ms-opacity: 0; -moz-opacity: 0;
-o-opacity: 0; -webkit-opacity: 0; } </style> </head>
<body> <div id="wrapper">  <div id="front">Knock knock</div>  <div id="back">Who's there?</div> </div>
</body> </html>
2. Save the file as L7-transition-exercise.html. Open the file in each of the major Web browsers. Hover your mouse pointer over the box in each browser.3. To add a delay, enter the following after the transition-duration property lines:
transition-delay: 1s; -ms-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; -webkit-transition-delay: 1s;
4. Save the file as L7-transition-delay-exercise.html. Open the file in each Web
 browser and hover your mouse pointer over the box. Do you notice the delay? 5. Close the file but leave the editing tool and Web browser open if you plan to complete the next exercise during this session.

An animation is the display of a sequence of static images at a fast enough speed to create the illusion of movement. Like transitions, animations affect CSS properties and transformations, and you can also specify timings. One difference is that animations use key-frames, a construct that enables you to change values anywhere within the animation. You can also pause, resume, and reverse animations. To create an animation, you begin by specifying a CSS style within the @key-frames rule. For example, a rule for a fade-out might look like the following:
@key-frames fade-out { from { opacity: 1; } to { opacity: 0; } }
Then you specify the animation’s properties. Many of the properties used in animations are similar to transitions. The animation properties are described in Table 7-3.

The following is a snippet of code that configures animation properties for a fade-out: div { animation-duration: 3s; animation-delay: 0s; animation-timing-function: ease; } div:hover { animation-name: fade-out; }
This fade-out starts immediately when the user hovers the mouse pointer over a div element, lasts for three seconds, and uses and ease timing function. 

CREATE AN ANIMATION USING CSS GET READY. 

To create an animation using CSS, perform the following steps: 1. In an editing or app development tool, create an HTML document that includes the following content:
<style type="text/css"> div { width: 200px; height: 200px; background: lime-green; animation: a1 3s; }
@key-frames a1 { from {background: lime-green;} to {background: dodgerblue;} } </style> </head>
<body> <div></div> </body> 2. Save the file as L7-animation-exercise.html. Open the file in each of the major Web browsers. The animation consists of a rectangular box that cycles from green to blue and back to green. Did the animation occur in all of the Web browsers? Make a note of which Web browsers support animation. 3. Replace the animation line in the CSS div section with the following: animation-name: a1; animation-duration: 4s; animation-delay: 2s; 4. Save the file as L7-animation-mod-exercise.html. Open the file in the Web browsers in which the animation occurred originally. Do you notice the delay? 5. Close the file but leave the editing tool and Web browser open if you plan to complete the next excercise during this session
Applying SVG Filter Effects

SVG filters are a way to style SVG graphics. The long list of filters range from the feBlend filter, which combines images, to feOffset, which moves an image relative to its current position, to several filters that affect the way lighting is calculated in a figure.

Lesson 2 introduced you to SVG, or Scalable Vector Graphics, a language for describing 2D graphics in Extensible Markup Language (XML). You saw a few examples of how to create simple vector images using SVG, and learned that they render well whether viewed on large or small screens. 

This section takes a look at filter effects you can apply to SVG graphics. An SVG filter is a set of operations that use CSS to style or otherwise modify an SVG graphic. The enhanced graphic is displayed in a browser while the original graphic is left alone. The filters available in SVG are: • feBlend
• feColorMatrix
• feComponentTransfer 
• feComposite 
• feConvolveMatrix 
• feDiffuseLighting 
• feDisplacementMap 
• feFlood 
• feGaussianBlur 
• feImage 
• feMerge 
• feMorphology 
• feOffset
• feTile 
• feTurbulence 
• feDistantLight 
• fePointLight 
• feSpecularLighting 
• feSpotLight 

Many of the filter names are fairly intuitive. For example, the feBlend filter combines images, feColorMatrix filters for color transformations, feOffset moves an image relative to its current position, and the last four in the list filter for lighting. 

You use the filter element to define SVG filters; you must include the id attribute to name the filter. For example, the following code is an example feGaussianBlur filter, the results of which are shown in Figure 7-24:

<body> <svg>  <defs>    <filter id="a1" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="20" />    </filter>  </defs>  <rect width="150" height="150" stroke="plum"    stroke-width="3" fill="plum" filter="url(#a1)" /> </svg> </body>
The id attribute within the filter element specifies the filter name. The feGaussianBlur element specifies the blur effect. Within this element are in="Source-graphic", which indicates the entire element will be blurred, and the stdDeviation attribute, which specifies the amount of the blur. The rectangle being created is linked to the filter through the filter="url(#a1)" attribute in the rect element. In another example, the following feOffset filter creates a drop shadow under a rectangle. A shadow fits the “action” of the offset filter because a shadow is merely a box that has been moved down and to the right of the source image. The dx and dy attributes specify the amount to move the image along the x-axis and y-axis, respectively. <body> <svg>  <defs>    <filter id="i1" x="0" y="0">    <feOffset dx="5" dy="5" />    </filter>  </defs>  <rect width="150" height="150" fill="grey"   filter="url(#i1)" />  <rect width="150" height="150" fill="plum" /> </svg> </body>

APPLY AN OFFSET AND GAUSSIAN BLUR TO AN SVG DRAWING GET READY.

To apply an offset and Gaussian blur to an SVG drawing, perform the following steps: 1. In an editing or app development tool, create an HTML document with the following content:
<!doctype html> <html> <head>    <meta charset="utf-8" />    <title>SVG Offset and Gaussian Blur Example</title> </head> </style>
<body> <svg>  <defs>    <filter id="i1" x="0" y="0">    <feOffset dx="5" dy="5" />    </filter>  </defs>  <rect width="150" height="150" fill="grey"   filter="url(#i1)" />  <rect width="150" height="150" fill="springgreen"  /> </svg> </body> </html>
2. Save the file as L7-SVGoffset-exercise.html. Open the file in all of the major Web browsers. The results should look similar to Figure 7-26. Did the image render with an offset in all of the Web browsers? Make a note of which Web browsers support the offset.
3. Add the following line in the filter element to apply the Gaussian blur filter: <feGaussianBlur stdDeviation="5" /> 4. Save the file as L7-SVGgblur-exercise.html and view it in the Web browsers that support the SVG offset feature. The results should look like Figure 7-27.  
5. Close the file but leave the editing tool and Web browser open if you plan to
 complete the next exercise during this session.

Using Canvas to Enhance the GUI

In addition to SVG, you learned about the canvas element in Lesson 2. You can use canvas to draw pixel-based shapes. Although the canvas element accepts only two attributes—height and width—you can use most CSS properties to style the canvas element, adding color, gradients, pattern fills, transformation, animation, and much more. This section walks you through some of the stylistic effects you can apply to canvas drawings to enhance the graphical use interface (GUI).
The following code creates a basic canvas box: <script>   function f1() { var canvas = document.getElementById("smlRectangle"); context = canvas.getContext("2d"); context.fillStyle = "blue"; context.fillRect(10, 20, 200, 100);   }  </script>
<body onload = "f1();"> <canvas id="smlRectangle" height='300' width='500'> </canvas> </body>
This sample already uses the fillStyle attribute for the getContext("2d") object. Let’s change the color to apply a gradient with coral as the start color and khaki as the end color. Replace the fillStyle line with the following, which render as shown in Figure 7-28: var grd=context.createLinearGradient(0,0,150,0); grd.addColorStop(0.3,"coral"); grd.addColorStop(0.7,"khaki"); context.fillStyle=grd;To rotate the canvas, you use the formula degrees*Math.PI/180. You must also add the rotation before the rectangle is generated. So, to rotate our canvas 20 degrees, add the following line before the context-fillRect line: context.rotate(20*Math. PI/180); The result is shown in Figure 7-29. You can also translate (move), scale, and skew the object similar to transforming HTML elements.Finally, let’s see how to generate text by using canvas (see Figure 7-30). You use the fill-text and font methods: <body> <canvas id="my-text" width="400" height="250" style="border:3px solid #0000FF;"> </canvas>
<script type="text/javascript">    var canvas = document.getElementById("myText");    context = canvas.getContext("2d");    context.font = "30px Arial";    context.fillText("Canvas-generated text", 40, 120); </script> </body>

ENHANCE A CANVAS OBJECT GET READY.

To enhance a canvas object, perform the following steps: 1. In an editing or app development tool, create an HTML document that includes the following content:
<!doctype html> <html> <head>    <meta charset="utf-8" />    <title>Canvas Exercise</title> <script>   function f1() { var canvas = document.getElementById("smlRectangle"); context = canvas.getContext("2d"); context.fillStyle = "coral"; context.fillRect(10, 20, 200, 100);   }  </script>  </head> <body onload = "f1();"> <canvas id="smlRectangle" height='300' width='500'> </canvas> </body> </html> 
2. Save the file as L7-canvas-exercise.html. Open the file in a Web browser to verify that you see a coral-colored rectangle. 
3. Replace the solid color with a gradient that starts with light blue and ends with dark blue. To do so, replace the current fillStyle line with the following:
var grd = context.createLinearGradient(0, 0, 150, 0); grd.addColorStop(0.3, "lightblue"); grd.addColorStop(0.7, "darkblue"); context.fillStyle = grd;
4. Scale the rectangle so that it’s five times as wide and five times as tall as the original rectangle. To do so, add the following after the new fillStyle line:
context.scale(5,5); 5. Save the file again and view it in a Web browser. 

Comments

Popular posts from this blog

What if Analysis

What-If Analysis What-If Analysis in Excel allows you to try out different values (scenarios) for formulas. The following example helps you master what-if analysis quickly and easily.  Use scenarios to consider many different variables  A scenario is a set of values that Excel saves and can substitute automatically in cells on a worksheet. You can create and save different groups of values on a worksheet and then switch to any of these new scenarios to view different results. 
Create Different Scenarios 
Note: You can simply type in a different revenue and Cost into cell B2 and B3 respectively to see the corresponding result of a scenario in cell B4. However, what-if analysis enables you to easily compare the results of different scenarios.  
I. On the Data tab, click What-If Analysis and select Scenario Manager from the list. The Scenario Manager Dialog box appears  II. Add a scenario by clicking on Add.  III. Type a name (e.g. “First Case”), select cell B2 and B3 (represents “Revenue” and “…

PROFESSIONAL ENGLISH

Asking For and Giving Opinions on Likes and Dislikes

Words Meaning Sample Sentence Opinion A statement or judgment formed about some matter. Bhoomika gave her final opinion on the company’s matter. Dialogue A conversation between two or more people. Her dialogue stated her opinion about the company’s matter. Expression The action of making known one’s thought or feelings. Her expression was sad at the meeting. Frank An open, honest, and direct speech or writing Bhoomika is very frank with her friends. Recover Return to normal state of health, mind or strength. The company’s economic crisis will be recovered soon. Turmoil A state of great disturbance. The company is facing financial turmoil. Economics The branch of knowledge concerned with the production, consumption, and transfer of wealth. Bhoomika studied Economics at the State University. Betrayed Expose to danger by treacherously giving information to an enemy.

DAILY LIFE VOCABULARY

Apology Etiquette and Office Vocabulary 

Chapter Vocabulary

Word Meaning Sample Sentence Stressed A state of any mental or emotional tension. Ram seems much stressed after his poor exam. Launch An act of instance of starting something. The government launched a new scheme for the poor people. Error A mistake Ravi found a grammatical error in his new grammar book. Scold Blaming someone for any wrong doing Bhuvan scolded his employees for their poor performance. Accuse Claiming that someone has done something wrong. Bharati accuses her friend Chaya for stealing her necklace. Fair Good and honest Ravi got promoted for doing a fair job. Ashamed Embarrassed or guilty because of one’s action. <