Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
17 views

LASICT Programming Q4 w504.25

The document discusses using CSS3 to create scalable graphics and animated user interfaces. It covers topics like scalable vector graphics, drawing graphics with HTML5 canvas, using JavaScript and CSS for animations, 2D and 3D transitions with CSS, and styling HTML text and box properties.

Uploaded by

Godfrye Blando Wenceslao
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

LASICT Programming Q4 w504.25

The document discusses using CSS3 to create scalable graphics and animated user interfaces. It covers topics like scalable vector graphics, drawing graphics with HTML5 canvas, using JavaScript and CSS for animations, 2D and 3D transitions with CSS, and styling HTML text and box properties.

Uploaded by

Godfrye Blando Wenceslao
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

GRADE

11
ICT-PROGRAMMING.NET
FOURTH-QUARTER, WEEK 5

Name: _________________________________________________________________________________________________
Grade & Section: ______________________________________________________________________________________
Important Reminders: Read and follow directions. Do not put unnecessary markings on this material.
Always follow the standard health protocols.

LEARNING ACTIVITY SHEET NO.5


Performing Programming in HTML5 with JavaScript
and CSS3

Let’s Explore!
Using CSS3 to create scalable graphics and
animated user interface
In this Activity, we will practice the step-by-step how to animate an SVG
(Scalable Vector Graphic) icon using CSS. This lesson will give you valuable insight
into using SVG as your preferred graphic format. Also, you can improve the UI and
UX of your web applications by incorporating subtle animations into your SVG's.
With a little CSS and JavaScript, you can apply cool animations and effects to your
front end without requiring the user to install bulky plugins.

Learn from here!

Scalable Vector Graphics and its uses - SVG stands for scalable vector graphics,
and it is a file format that allows you to display vector images on your website. This
means that you can scale an SVG image up and down as needed without losing any
quality, making it an excellent choice for responsive web design. (Circle 2017)
Drawing Complex graphics on HTML5 Canvas element- <canvas> is an HTML
element which can be used to draw graphics via scripting (usually JavaScript). This
can, for instance, be used to draw graphs, combine photos, or create simple (and not
so simple) animations. Canvas has several methods for drawing paths, boxes, circles,
text, and adding images. (Mozilla and individual contributors n.d.) (Refsnes Data
2021)

1
Writing and Using JavaScript code - When you see JavaScript code on the Web,
you will sometimes see some JavaScript code between the <head></head> tags. Or
you may see it in the <body></body> tags (or even in both places). To separate
JavaScript code from HTML code, you need to enclose it within a set of
<script></script> tags. The opening <script> tag has one required attribute and one
optional attribute. The required attribute is the type attribute, while the optional
attribute is src (which allows you to point to an external script file, covered later in
this answer). The value of the type of attribute is set to text/javascript, as shown
below. (Computer Hope 2021)

<script type="text/javascript">
Your JavaScript code goes here.
</script>

Application of CSS transitions- CSS transitions provide a way to control animation


speed when changing CSS properties. Instead of having property changes take effect
immediately, you can cause the changes in a property to take place over some time.
For example, if you change the color of an element from white to black, usually the
change is instantaneous. With CSS transitions enabled, changes occur at time
intervals that follow an acceleration curve, all of which can be customized. (Mozilla
and individual contributors n.d.)
2D transitions - CSS3 2D transform gives you more freedom to decorate and
animate HTML components. You have even more features to decorate text and more
animation options for decorating div elements. CSS3 2D transform contains some
basic functions like below:

• translate()
• rotate()
• scale()
• skew()
• matrix()
3D transitions – The main part of the 3D Transform using CSS is the perspective.
To activate a 3D space to make the 3D transformation, you need to active it. This
activation can be done in two ways as follows:
transform: perspective(500px);
or
perspective: 500px;
3D transform includes Z-axis transformation of the HTML elements.

• translate3d(<translation-value>, <translation-value>, <length>)


• translateZ(<length>)
• scale3d(<number>, <number>, <number>)
• scaleZ(<number>)
• rotate3d(<number>, <number>, <number>, <angle>)
• rotateX(<angle>), rotateY(<angle>) and rotateZ(<angle>)

Note: rotate3d(1,0,0,30deg) is equal to rotateX(30deg), rotate3d(0,1,0,30deg) is equal to


rotateY(30deg) and rotate3d(0,0,1,30deg) is equal to rotateZ(30deg). (Rahman 2013)

2
Using CSS key-frames - The @keyframes CSS at-rule controls the intermediate steps
in a CSS animation sequence by defining styles for keyframes (or waypoints) along
the animation sequence. This gives more control over the intermediate steps of the
animation sequence than transitions. (Mozilla and individual contributors n.d.)
Implementation of Complex animations - With CSS animation, elements can be
shifted, rotated, slanted, squashed, spun, and stretched on the page. They can be
bounced across the page and interact with each other in all sorts of interesting ways.
(Fitzgerald n.d.)

Styling HTML text properties

Property Description Values


color Sets the color of a text RGB, hex, keyword
line-height Sets the distance between lines normal, number, length, %
letter- Increase or decrease the space
normal, length
spacing between characters
text-align Aligns the text in an element left, right, center, justify
text- none, underline, overline,
Adds decoration to text
decoration line-through
Indents the first line of text in an
text-indent length, %
element
text- none, capitalize, uppercase,
Controls the letters in an element
transform lowercase
(CSS Basic Properties n.d.)
Styling HTML box properties - Most HTML elements are containers. Consider some
of the HTML elements we've used so far: body, p, h1, h2, div, ul, ol, li, table, th, td.
Each of these is a container or box. Each box has three layers that surround its
content. The layers are, in order from inside to outside: (University of Washington
n.d.)
• Padding
• Border
• Margin

LEARNING COMPETENCY WITH CODE


LO 5. Use CSS3 to create scalable graphics and animated
user interface
TLE_ICTP.NET11-12PPHJC-IVd-h-33

K: The learners demonstrate an understanding of the principles and concepts in


performing programming in HTML5 with JavaScript and CSS3

S: The learners independently demonstrate the programming in HTML5 with


JavaScript and CSS3

3
Let’s engage and work!
Practice 1- Using Scalable Vector Graphics to add interactive graphics to an
application
SVG is a platform for two-dimensional graphics. It has two parts: an XML-based file
format and a programming API for graphical applications. Key features include
shapes, text, and embedded raster graphics, with many different painting styles. It
supports scripting through languages such as ECMAScript and has comprehensive
support for animation.
As a simple practice of an SVG image file, here is a circle with a gradient to give it a
3D appearance, Open your HTML editor and have a try on these codes. (W3c 2016)

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"


viewBox="0 0 100 100">

<defs>
<radialGradient id="rg" cx="100" cy="100" fx="80" fy="80"
gradientUnits="userSpaceOnUse">
<stop offset="5%" stop-color="lightskyblue" />
<stop offset="100%" stop-color="darkblue" />
</radialGradient>
</defs>

<circle id="circle_1" cx="100" cy="100" r="95" fill="url(#rg)"/>

</svg>

(Desktop/PC /Laptop View of code(a) and run program(b) )

(Luna, 2021)

4
Practice 2 - Using HTML 5 to Create Scalable Vector Graphics Files

SVG has six basic shapes.

• circle - defined as x and y point of the center (cx,cy) and the radius (cr)
• ellipse - similar to circle, but has two radius (rx,ry)
• line - defined as 4 numbers (coordinates for start and endpoints of the line)
plus a stroke color
• polygon - A polygon is effectively a series of points with lines joining them.
The last point is joined to the first point.
• polyline - similar to polygon, but the last point doesn't join the first.
• rect - A rectangle with a minimum of width and height and optional x,y, and
a radius (rx) to define a rounded rectangle.

There are additional attributes within most of these basic shapes, color being the
most common one and stroke being another. (O'Nolan n.d.)

A. Practice the image below that shows 5 shapes. From left to right, top to bottom
they are <circle>, <ellipse>, <polygon>, <polyline>, <rect>.

(Luna, 2021)

1. <svg>
2. <circle cx='50' cy='50' r='40'/>
3. <ellipse cx='180' cy='50' rx='80' ry='40' />
4. <polygon points='10,100 80,115 50,145 20,120' fill='none'
stroke='black'/>
5. <polyline points='110,100 180,115 150,145 120,120' fill='none'
stroke='black' />
6. <rect x='190' y='100' width='70' height='50'/>
7. </svg>

B. The <line> has 4 numbers (x1,y1,x2,y2) plus a stroke color.

1. <svg>
2. <line x1='10' y1='5' x2='125' y2='90' stroke='black' />
3. </svg>

5
Practice 3 - Applying CSS transitions to elements on an HTML5 page, and
write JavaScript code to detect when a transition has occurred

To create a transition effect, you must specify two things:

1. the CSS property you want to add an effect to


2. the duration of the effect

Note: If the duration part is not specified, the transition will have no effect,
because the default value is 0. (w3schools n.d.)

Example A. Shows a 100px * 100px red <div> element. The <div> element has also
specified a transition effect for the width property, with a duration of 2 seconds:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}

div:hover {
width: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>
<div></div>

</body>
</html>

Running program (Luna, 2021)

6
Example B. Adds a transition effect for both the width and height property, with a
duration of 2 seconds for program
Running the width and 4 seconds for the height:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 4s;
}

div:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

</body>
</html>

Running program (Luna, 2021)

7
Practice 4 - Implementing complex animations by using CSS key-frames and
JavaScript code

• An animation lets an element gradually change from one style to another.


• You can change as many CSS properties you want, as many times as you
want.
• To use CSS animation, you must first specify some keyframes for the
animation.
• Keyframes hold what styles the element will have at certain times.

When you specify CSS styles inside the @keyframes rule, the animation will
gradually change from the current style to the new style at certain times. (w3schools
n.d.)

To get an animation to work, you must bind the animation to an element.

Example A. will change the background-color of the <div> element when the
animation is 25% complete, 50% complete, and again when the animation is 100%
complete:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original


style.</p>

</body>
</html>

8
Example B. will change both the background-color and the position of the <div>
element when the animation is 25% complete, 50% complete, and again when the
animation is 100% complete:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
}

@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original


style.</p>

</body>
</html>

Note: The animation-duration property defines how long an animation should take to
complete. If the animation-duration property is not specified, no animation will occur,
because the default value is 0s (0 seconds).

9
Let’s apply now!

WRITTEN WORKS
General Instruction: Write your answer on a separate sheet of paper.

1. Describe different types of 2D and 3D transitions available with CSS3.


2. Discuss drawing complex graphics on an HTML5 Canvas element by using
JavaScript code.

PERFORMANCE TASK
General Instruction:
• Provide the missing code and execute the program on your text editor,
• Include your name and date of submission on the footer,
• Submit the screenshot of the complete code and running program.

3. Add a 2-second transition effect for width changes of the <div> element.

<style>
div {
width: 100px;
height: 100px;
background: red;
: ;
}

div:hover {
width: 300px;
}
</style>

<body>
<div>This is a div</div>
</body>

4. Add a 2-second animation for the <div> element, which changes the color from
red to blue. Call the animation "example".

10
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: ;
: 2s;
}

@keyframes example {
from { : red;}
to { : blue;}
}
</style>

<body>
<div>This is a div</div>
</body>

5. Add the following 5 steps to the animation "example" (using 0%, 25%, 50%, 75%,
and 100%):

1. 0% - Set left position to "0px", top position to: "0px"


2. 25% - Set left position to "0px", top position to: "200px"
3. 50% - Set left position to "200px", top position to: "200px"
4. 75% - Set left position to "200px", top position to: "0px"
5. 100% - Set left position to "0px", top position to: "0px"

<style>
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% { ;}
25% { ;}
50% { ;}
75% { ;}
100% { ;}
}
</style>
<body>
<div>This is a div</div>
</body>

11
RUBRIC FOR SCORING (IF NECESSARY):
Program (Excellent - 5) (Good-4) (Fair-3) (Poor- 2)
(20 pts)
Program The program The program The program The program
execution executes runs correctly runs with a does not
correctly with with syntax or minor (easily execute
no syntax or runtime errors fixed error)
runtime errors
Correct The program Output has Output has Output is
output displays minor errors multiple incorrect
correct output errors
with no errors
Design of Program The program The program Output is
output displays more displays does not poorly
than expected minimally display the designed
desired output required
output
Design of logic The program The program The program Program is
is logically has slight logic has significant incorrect
well designed errors that do logic errors
not
significantly
affect the
results

REFLECTION

With CSS and JS progress, implementing animations on websites has never


been easier. But how do we make sure that our CSS animations and transitions will
be meaningful to our users? That they will not be just some annoying “in-your-face”
eye candy? How can CSS animations enhance your user experience?

In the lesson, a quick reminder of CSS syntax to build transitions and


animations. With practical examples, show why certain animations work better than
others and how to find the best timing and duration to build UI animations that “feel
right”.

12
13
1. Written Works 1 – Key Points/Concept
• 2D Transforms allow elements rendered by CSS to be transformed in two-dimensional space.
• 3D Transforms extends CSS Transforms to allow elements rendered by CSS to be transformed
in three-dimensional space
• The 3D transform functions build on the 2D functions in a rather predictable way, mostly by adding
one or 2 new functions to each group that shouldn’t require explanation.
2. Written Works 2 – Key Points/Concept
• the Web was originally just text, which was very boring, so images were introduced — first via
the <img> element and later via CSS properties such as background-image, and SVG.
• While you could use CSS and JavaScript to animate (and otherwise manipulate) SVG vector images
— as they are represented by markup — there was still no way to do the same for bitmap images,
and the tools available were rather limited. The Web still had no way to effectively create
animations, games, 3D scenes, and other requirements commonly handled by lower-level
languages such as C++ or Java.
3. Performance Task 1- Transition : width 2s
4. Example; animation-duration : background-color : background-color
5.
• left:0px; top:0px
• left:0px; top:200px
• left:200px; top:200px
• left:200px; top:0px
• left:0px; top:0px
ANSWER KEY
REFERENCES FOR LEARNERS

Circle, Kayleigh. 2017. tbh. June 15. Accessed December 11, 2021.
https://blog.tbhcreative.com/2017/06/benefits-of-using-svg.html.
Computer Hope. 2021. Accessed December 11, 2021.
https://www.computerhope.com/issues/ch001344.htm.
n.d. CSS Basic Properties. Accessed December 11, 2021.
http://web.simmons.edu/~grabiner/comm244/weekthree/css-basic-
properties.html.
Fitzgerald, Anna. n.d. The Ultimate Guide to Animations in CSS. Accessed December
2021. https://blog.hubspot.com/website/css-animation.
Mozilla and individual contributors. n.d. Accessed December 11, 2021.
https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions.
—. n.d. Accessed 2021. https://developer.mozilla.org/en-
US/docs/Web/CSS/@keyframes.

—. n.d. MDN Web Docs. Accessed December 21, 2021.


https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial.

O'Nolan, Conor. n.d. Using HTML 5 to Create Scalable Vector Graphics Files. Accessed
December 11, 2021. https://study.com/academy/lesson/using-html-5-to-
create-scalable-vector-graphics-files.html.

Rahman, Syed Fazle. 2013. JavaScript Advanced CSS3 2D and 3D Transform


Techniques. January 16. Accessed December 11, 2021.
https://www.sitepoint.com/advanced-css3-2d-and-3d-transform-
techniques/.
Refsnes Data. 2021. w3schools. Accessed December 11, 2021.
https://www.w3schools.com/graphics/canvas_intro.asp.
Terry Ann Felka-Morris, Ed.D. 2016. Web Development and Design Foundations of
HTML 5, 8th edition. Hoboken: Pearson Education, Inc.
The University of Washington. n.d. Web Design & Development I. Accessed December
11, 2021.
https://www.washington.edu/accesscomputing/webd2/student/unit3/mod
ule4/lesson1.html.

W3c. 2016. WEB DESIGN AND APPLICATIONS. Accessed December 11, 2021.
https://www.w3.org/standards/webdesign/graphics.
w3schools. n.d. www.w3schools.com. Accessed December 11, 2021.
https://www.w3schools.com/css/css3_transitions.asp.
—. n.d. www.w3schools.com. Accessed December 11, 2021.
https://www.w3schools.com/css/css3_animations.asp.

14
Prepared By:
Nestor D. Luna
ICT-Programming.net
Isabel National Comprehensive School

15

You might also like