CSE3150 – Front-end Full Stack Development

Department of Computer Science Engineering

School of Engineering
https://www.jile.io/agile-basics/scrum-basics

https://www.javatpoint.com/devops-architecture

CSE-367 Data Visualization 2

Module I - Syllabus

[4 Sessions]
Introduction to Agile Methodology; Scrum Fundamentals; Scrum Roles,
Artifacts and Rituals; DevOps – Architecture, Lifecycle, Workflow &
Principles; DevOps Tools Overview – Jenkins, Docker, Kubernetes.
Review of GIT source control. HTML5 – Syntax, Attributes, Events, Web
Forms 2.0, Web Storage, Canvas, Web Sockets; CSS3 – Colors,
Gradients, Text, Transform

Assignment: Develop a website for managing HR policies of a

department.
Introduction to Agile Methodology:

• Agile is a project management approach that emphasizes

collaboration, flexibility, and customer satisfaction. It values
delivering a working product incrementally and embracing
change.
Pros and Cons of Agile Methodology
Pros of Agile Methodology:
• Flexibility: Agile methodology allows teams to respond to changing
requirements, customer needs, and market conditions, which is crucial
in today's fast-paced business environment.
• Collaboration: Agile encourages close collaboration between
customers, stakeholders, and team members, which leads to better
communication and decision-making.
• Customer satisfaction: Agile prioritizes delivering working software
that meets the customer's needs, which leads to higher customer
satisfaction.
• Continuous improvement: Agile promotes continuous improvement by
encouraging the team to reflect on their process and make changes
that lead to better results.
• Faster delivery: Agile emphasizes delivering working software quickly,
which allows organizations to get to market faster and respond to
changes more quickly.
Pros and Cons of Agile Methodology
Cons of Agile Methodology:
• Implementation challenges: Implementing an Agile methodology can
be challenging, particularly for organizations with existing processes
and hierarchies.
• Lack of structure: The lack of structure and flexibility provided by Agile
methodology can be confusing for some team members, leading to
confusion and inefficiency.
• Difficulty with longer-term planning: Agile focuses on delivering value
incrementally, which can make it difficult to plan for longer-term
initiatives.
• Requires a dedicated team: Agile methodology requires a dedicated
team with the skills, knowledge, and mindset to be successful.
• Can lead to scope creep: The focus on delivering value incrementally
can lead to scope creep and an increase in scope, which can lead to
delays and increased costs.
Scrum
Scrum is an Agile framework for managing and completing complex
projects.
It involves a self-organizing and cross-functional team that works to
deliver a usable product incrementally.

.
"Scrum is an agile process that allows us to focus on delivering the highest business
value in the shortest time."
- Mike Cohn, Mountain Goat Software
Scrum ORIGIN
Origins in Software Development: Scrum was originally developed in the
1990s by a team of software developers who were seeking a better way
to manage complex software projects.
Adoption Beyond Software Development: Over time, Scrum has gained
widespread popularity and has been adopted in many other industries
and domains, including healthcare, finance, education, and government.
Today, Scrum is considered one of the most widely used Agile
methodologies and is recognized as a standard for delivering value in an
iterative and collaborative manner.
Scrum FUNDAMENTALS
1. Empirical Process Control: Scrum is based on the principle of
empirical process control, which means that it relies on
experience and experimentation to continuously improve the
process.
2. Cross-functional Teams: Scrum teams are cross-functional,
meaning they consist of individuals with a range of skills and
expertise.
3. Sprint: A sprint is a time-boxed period, usually one to four
weeks, during which the team works on completing a set of
tasks.
4. Incremental Delivery: Scrum allows for the delivery of a usable
product increment at the end of each sprint.
5. Transparency: Scrum emphasizes transparency in all aspects of
the process, from the work being done by the team to the
progress being made.
Scrum Methodology

Scrum is simple light weighted agile project management methodology

that enables product teams to build products incrementally in an iterative
fashion through effective team collaboration.
Scrum forms the base for many of the other frameworks and hence it is
important for an agile practitioner to understand this methodology.
Scrum Methodology
The Scrum Methodology is defined by:
Scrum Roles
Scrum Events
Scrum Artifacts
Scrum Values
Scrum Methodology
What are Scrum Roles?
The scrum team is made up of three roles:
1. A Product Owner
2. A Scrum Master
3. The Development Team.
What are Scrum Roles?
1. Product Owner:
A Product Owner in a scrum team decides what needs to be built.
Unlike traditional delivery, this person is a part of the team that delivers the
product.
Following are the key responsibilities of the Product Owner:
•Creates the vision
•Represents business, and is responsible for the ROI
•Cascades the vision to the teams
•Owns the backlog of features
•Prioritizes features by market value
•Is empowered to take decisions
•Negotiates with the team and business to deliver the right product at the
right time
What are Scrum Roles?
2. Scrum Master:
The Scrum Master's major responsibility is to ensure that scrum is
understood and practiced by every team member in the true spirit.
Following are the key responsibilities of the Scrum Master :
•Is a servant leader - mentors and coaches the teams on scrum theory and
practices, guides them on how they need to adapt to those, thereby realizing
the benefits of scrum both at team level and organization level.
•Helps remove obstacles/impediments - supports the Development teams in
removing the impediments by reaching out to the right people, thereby
ensuring a smooth development progress without disrupting the team.
•Facilitates collaboration - enables interactions within the team as well as
between the team and the Product Owner.
•Teaches scrum - to the team.
•Protects the teams - from external disruptions such as changes to stories in
the current sprint.
•Is a change agent - in growing the organization to deliver early and often,
and removing waste.
What are Scrum Roles?
3. The Development team:
The Development team in scrum is the team that has all the skills necessary to
execute the backlog items.
The following are the special characteristics of 'The Development team':
•Self-organizing - the Development team will be a self-managing group, who
will decide on the tasks that they will work on incrementally.
•Empowered - the team should commit to work, determine 'HOW' to deliver
and decide on 'HOW MUCH' to deliver in one iteration.
•Cross-functional - the team does not segregate members as agile developers,
testers or analysts and each member has the necessary skills to deliver the
product increment.
•Small-sized - the Development team should ideally have 5 to 9 team
members with skills sufficient to deliver the committed work
•Co-located - the agile team is typically co-located to ensure effective
collaboration.
•Committed - since the team is empowered to take decisions on the scope of
work in a sprint, they are committed to delivery, should be transparent on the
progress, and highlight the impediments early on.
•Dedicated - this team is focused and is 100% dedicated to product delivery.
What are Scrum Artifacts?
Scrum is an Agile framework for managing software development
projects. It involves a set of practices and principles designed to
help teams deliver high-quality products in a fast and efficient
manner.
The following are the three main artifacts in Scrum:
1. Product Backlog
2. Sprint Backlog
3. Increment:
Scrum Artifacts
1.Product backlog
A product backlog is a dynamic list of functionalities the product
might include, such that it provides value to users.
These are a few unique characteristics of a product backlog:
•It is dynamic in nature as it evolves based on changing market
needs
•Lists all the features and capabilities that will be taken up in
iteration and delivered as a product increment
•It is refined on a continuous basis. The Product Owner and
Development team collaborate and update the details, estimate,
and prioritize based on business value and size
Scrum Artifacts
2. Sprint backlog:
Sprint backlog is a subset of the entire product backlog that the
scrum team plans to implement in one iteration or sprint.
Sprint backlog has:
•Subset of product backlog items that the teams commit to
implement in one sprint
•Items broken into smaller pieces of work as tasks
•A focus on 'HOW' the team does the work and delivers the value
in one sprint
•A story or task board that is used by the teams to view backlog
and what the individuals sign up for work after backlog
prioritization
•Provision for the Development teams to track the sprint progress
and check their alignment with sprint goals
Scrum Artifacts
3. Increment:
An increment is the work delivered at the end of every sprint.
Typically, after every iteration there will be a Product Increment
(PI) that delivers value and the final product will be a working
software.
This increment is a sum of all the capabilities that were delivered
in the previous sprints as a part of the PI. At the end of every
sprint, the Product Owner decides whether to release the working
product increment or wait until the next release.
Scrum
Scrum events and rituals
In Scrum, events and rituals refer to specific activities that are
performed regularly to help the team manage the development
process and improve the product. However, there is a difference
between events and rituals in Scrum:
Events: Events are time-boxed activities with specific agendas and
outcomes that must be achieved within the time frame. There are
four main events in Scrum: Sprint, Sprint Planning, Daily Scrum,
and Sprint Review.
Rituals: Rituals are repeated activities that are performed regularly
to reinforce the principles and values of Scrum. Rituals are less
formal and less time-boxed than events and do not have specific
agendas or outcomes. Examples of Scrum rituals include the
product backlog refinement, sprint retrospectives, and product
demos.
 SRUM Rituals

Scrum rituals are regular activities that help reinforce the principles
and values of
Scrum and improve the development process.
Some of the main Scrum rituals:
Sprint Planning: The team meets to plan the upcoming sprint,
review the product backlog, and determine which items can be
completed during the sprint. This is a collaborative effort between
the development team and the product owner.
Daily Scrum: Also known as the "stand-up," this is a daily meeting
where the development team members share updates on their
progress and discuss any obstacles they may be facing. The purpose
of the Daily Scrum is to increase transparency and accountability
within the team.
 SRUM Rituals

Sprint Review: The team meets to review the work completed

during the sprint and demonstrate the product increments to
stakeholders. This is an opportunity for the team to receive
feedback and make improvements for the next sprint.
Sprint Retrospective: The team meets to reflect on the past sprint
and identify ways to improve the development process for the next
sprint. The Sprint Retrospective is an opportunity for the team to
continuously improve and adapt to changing circumstances.
Product Backlog Refinement: The product backlog is regularly
reviewed and updated to ensure that it accurately reflects the
priorities and goals of the project. This helps to ensure that the
team is focused on delivering the most valuable features and
functionality to the customer.
 Benefits of Scrum methodology:

•Quick scrum deliverables

•Easy to groom
•Thrift usage
•Easy to cope
•Lightweight process
•Manageable units
•Versatile
•Direct and clear
What is DevOps?

The DevOps is a combination of two words, one is software Development, and

second is Operations. This allows a single team to handle the entire application
lifecycle, from development to testing, deployment, and operations. DevOps helps
you to reduce the disconnection between software developers, quality assurance
(QA) engineers and system administrators.

Various DevOps tools

such as Git, Ansible,
Docker, Puppet, Jenkins,
Chef, Nagios,
and Kubernetes.
DevOps Architecture

The operation consists of the administrative processes, services, and support for
the software. When both the development and operations are combined with
collaborating, then the DevOps architecture is the solution to fix the gap between
deployment and operation terms; therefore, delivery can be faster.
DevOps Architecture

The various components that are used in the DevOps architecture:

DevOps Architecture

The various components that are used in the DevOps architecture:

• Build: Cloud and shared resources are used to control resource usage.
• Code: Good practices like Git make code use, tracking, and reusability
easier.
• Test: Automated testing saves time and prepares the app for production.
• Plan: Agile methodology helps plan development and improve
productivity.
• Monitor: Continuous monitoring reduces risk of failure and tracks app
health.
• Deploy: Automated deployment captures insights and optimizes
performance.
• Operate: DevOps collaborates throughout the service lifecycle.
• Release: Deployment to production is done manually to minimize
impact.
DevOps Lifecycle

DevOps defines an agile relationship between operations and

Development. It is a process that is practiced by the development
team and operational engineers together from beginning to the final
stage of the product
DevOps Lifecycle

• The DevOps lifecycle consists of seven phases: Continuous Development,

Continuous Integration, Continuous Testing, Continuous Monitoring, Continuous
Feedback, Continuous Deployment, and Continuous Operations. Each phase plays
a crucial role in the software development process and contributes to the overall
efficiency and effectiveness of the DevOps approach.
• Continuous Development involves planning and coding the software, where the
vision of the project is decided and the developers begin coding the application.
• Continuous Integration is the heart of the DevOps lifecycle and involves
committing changes to the source code frequently and building the code, including
unit testing, integration testing, code review, and packaging.
• Continuous Testing involves constantly testing the developed software for bugs
using automation testing tools such as TestNG, JUnit, and Selenium.
DevOps Lifecycle contd..

• Continuous Monitoring involves monitoring the operational factors of the DevOps

process and recording important information about the use of the software.
• Continuous Feedback involves analyzing the results from the operations of the
software to continuously improve the application development. Continuous
Deployment involves deploying the code to the production servers and ensuring
that the code is correctly used on all servers. Configuration management tools play
a crucial role in executing tasks frequently and quickly in this phase.
• Continuous Operations are based on continuity with complete automation of the
release process and allow organizations to accelerate the overall time to market.
With DevOps, the software product becomes more efficient and increases the
overall count of interested customers.
DevOps Workflow

• DevOps workflow provides a visual overview of the sequence in which input is

provided. Also, it tells about which one action is performed, and output is
generated for an operations process
• DevOps workflow allows the ability to separate and arrange the jobs which are top
requested by the users. Also, it gives the ability to mirror their ideal process in the
configuration jobs.
DevOps Principles
The main principles of DevOps are Continuous delivery, automation, and fast reaction to the
feedback.
• End to End Responsibility: DevOps team need to provide performance support until they
become the end of life. It enhances the responsibility and the quality of the products
engineered.
• Continuous Improvement: DevOps culture focuses on continuous improvement to minimize
waste. It continuously speeds up the growth of products or services offered.
• Automate Everything: Automation is an essential principle of the DevOps process. This is for
software development and also for the entire infrastructure landscape.
• Custom Centric Action: DevOps team must take customer-centric for that they should
continuously invest in products and services.
• Monitor and test everything: The DevOps team needs to have robust monitoring and testing
procedures.
• Work as one team: In the DevOps culture role of the designers, developers, and testers are
already defined. All they needed to do is work as one team with complete collaboration.
• These principles are achieved through several DevOps practices, which include frequent
deployments, QA automation, continuous delivery, validating ideas as early as possible, and
in-team collaboration.
DevOps Tools
Docker
• Docker is a high-end DevOps tool that allows building, ship, and run
distributed applications on multiple systems. It also helps to assemble the
apps quickly from the components, and it is typically suitable for container
management.
Features
• It configures the system more comfortable and faster.
• It increases productivity.
• It provides containers that are used to run the application in an isolated
environment.
• It routes the incoming request for published ports on available nodes to an
active container. This feature enables the connection even if there is no task
running on the node.
• It allows saving secrets into the swarm itself.
DevOps Tools
Jenkins
Jenkins is a DevOps tool for monitoring the execution of repeated tasks. Jenkins is a
software that allows continuous integration. Jenkins will be installed on a server
where the central build will take place. It helps to integrate project changes more
efficiently by finding the issues quickly

Features
• Jenkins increases the scale of automation.
• It can easily set up and configure via a web interface.
• It can distribute the tasks across multiple machines, thereby increasing
concurrency.
• It supports continuous integration and continuous delivery.
• It offers 400 plugins to support the building and testing any project virtually.
• It requires little maintenance and has a built-in GUI tool for easy updates.
DevOps Tools
Kubernetes
Kubernetes is a powerful and feature-rich platform for managing containerized applications

Features
• Container orchestration: Kubernetes provides a platform for
deploying, scaling, and managing containers, making it easier to
manage and scale applications.
• Self-healing: Kubernetes has built-in mechanisms for
automatically replacing failed containers, ensuring that
applications remain available and running even in the face of
failures.
• Automatic scaling: Kubernetes can automatically scale the
number of containers running based on demand, providing a
way to ensure that applications can handle increased traffic and
load.
• Load balancing: Kubernetes provides built-in load balancing
capabilities, making it easy to distribute incoming traffic across
multiple containers.
DevOps Tools
Kubernetes contd..
Kubernetes is a powerful and feature-rich platform for managing containerized applications

Features
• Configuration management: Kubernetes provides a way to manage the
configuration of containers, making it easier to deploy and manage
applications at scale.
• Secret and configuration management: Kubernetes provides a secure way to
manage secrets and configuration data, helping to ensure that sensitive
information is kept secure.
• Resource management: Kubernetes provides a way to manage the resources
required by containers, including CPU, memory, and storage. This helps to
ensure that applications get the resources they need to run effectively.
• Rollouts and rollbacks: Kubernetes provides a way to easily perform rolling
updates and rollbacks of applications, making it easier to manage the
deployment of updates.
• Batch processing: Kubernetes provides a platform for running batch
processing jobs, making it a great choice for organizations that need to
process large amounts of data.
• Service discovery: Kubernetes provides a way to discover and access services
running within the cluster, making it easier to build distributed applications.
What Is Source Control?

Source control, also known as version control, is a system for managing changes to a
codebase or other collection of files over time. It provides a way to track the history
of changes made to the code, making it easier to manage and collaborate on
software development projects.

Source Control vs. Version Control

These two terms are used interchangeably. However, source control is specific to
source code. Version control also covers large binary files and digital assets.
Source control
Features
• Source control systems typically include a number of key features that make them
an essential tool for software development. Some of the most common features
include:
• Versioning: Source control systems keep track of every change made to the
codebase, making it easy to see the history of changes over time and revert to
previous versions if necessary.
• Branching and Merging: Branching allows developers to create separate branches
of the codebase for different purposes, such as working on a new feature or fixing
a bug. Merging allows changes made in one branch to be incorporated into
another branch.
• Collaboration: Source control systems provide tools for collaboration, such as pull
requests and code review, that make it easier for multiple developers to work
together on the same codebase.

CSE-367 Data Visualization 39

• Conflict resolution: When multiple developers are working on the same codebase,
it's possible for conflicting changes to be made. Source control systems provide
tools to help resolve these conflicts and merge changes from multiple developers.
• Continuous integration and delivery: Source control systems are often integrated
with other tools for continuous integration and continuous delivery (CI/CD), which
automate the process of building, testing, and deploying code.
• Auditing: Source control systems provide a complete history of changes to the
codebase, making it easy to see who made changes and when. This can be useful
for auditing purposes, and can also help with debugging and troubleshooting.
• Security: Source control systems often provide security features, such as access
control, to ensure that only authorized users can make changes to the codebase.

CSE-367 Data Visualization 40

What Is Source Control Management?

• Source control management (SCM)

refers to tools that help you keep
track of your code with a complete
history of changes.

CSE-367 Data Visualization 41

List of Source Control Management Tools

Source control tools include:

• Git
• Helix Core
• Subversion
• ClearCase
• Team Foundation Server
• Mercurial

CSE-367 Data Visualization 42

Git
• Git is a popular open-source version control system
that allows multiple users to collaborate and manage
changes to software projects efficiently. It enables teams
to track changes and work together in real-time,
making it a crucial tool for DevOps. Git is known for its
speed and versatility, making it ideal for handling
projects of all sizes.
• It is a free open source tool.
• It allows distributed development.
• It supports the pull request.
• It enables a faster release cycle.
• Git is very scalable.
• It is very secure and completes the tasks very fast.
Review of GIT source control.

• Speed: Git is designed to be fast, even when working with large

projects or repositories. It uses a unique data structure called a
"packfile" to efficiently store and retrieve version control data.
• Easy Collaboration: Git allows multiple developers to work on the
same project simultaneously. When changes are made, Git
automatically tracks and merges them, making it easy for teams to
collaborate.
• Security: Git provides robust security features, including
cryptographic hashing and digital signatures to secure version
control data.
• Large Community: Git has a large and active community of
developers who contribute to the project and provide support.
Git is a powerful and flexible version control system that offers
many benefits for software development teams. Whether you are
working on a small open-source project or a large enterprise
software, Git is an excellent choice for managing source code and
collaborating with others.
Review of GIT source control.

• Git is a widely used open-source distributed version control

system that helps track changes made to software source
code. It was created by Linus Torvalds in 2005 and has since
become one of the most popular version control systems in
use today.
• Git offers a number of benefits over other version control
systems, including:
• Distributed Architecture: Git operates on a decentralized
model, which means that each developer has a full copy of
the repository on their local machine. This eliminates the
need for a central repository, making it easier to work on
projects in a distributed environment.
• Branching and Merging: Git allows developers to create
multiple branches of the same project, each of which can be
worked on independently. When the work in one branch is
completed, it can be easily merged back into the main
branch.
CSE-367 Data Visualization 46
CSE3150 – Front-end Full Stack Development

Department of Computer Science Engineering

School of Engineering
Module I - Syllabus

[4 Sessions]
Introduction to Agile Methodology; Scrum Fundamentals; Scrum
Roles, Artifacts and Rituals; DevOps – Architecture, Lifecycle,
Workflow & Principles; DevOps Tools Overview – Jenkins, Docker,
Kubernetes.
Review of GIT source control. HTML5 – Syntax, Attributes, Events,
Web Forms 2.0, Web Storage, Canvas, Web Sockets; CSS3 – Colors,
Gradients, Text, Transform

Assignment: Develop a website for managing HR policies of a

department.
HTML SEMANTIC
ELEMENTS
HTML5 Semantic Elements

Why are they needed?

One substantial problem with modern, pre-

HTML5 semantic markup:
most complex web sites are absolutely
packed solid with <div> elements.
Unfortunately, all these <div> elements can
make the resulting markup confusing and
hard to modify.
Developers typically try to bring some sense
and order to the <div> chaos by using id or
class names that provide some clue as to
their meaning.
1 10

Header and Footer

Most web site pages have a recognizable

header and footer section.
Typically the header contains
• the site logo
• title (and perhaps additional subtitles or
taglines)
• horizontal navigation links, and
• perhaps one or two horizontal banners.
1 10

Header and Footer

The typical footer contains less important

material, such as
• smaller text versions of the navigation,
• copyright notices,
• information about the site’s privacy policy,
and
• perhaps twitter feeds or links to other
social sites.
 Header and Footer

Both the HTML5 <header> and <footer>

element can be used not only for page
headers and footers, they can also be used
<header>
for header
<img and footeralt="logo"
src="logo.gif" elements/>within other
HTML5 containers,
<h1>Fundamentals of such
Web as <article> or
<section>.
Development</h1>
...
</header>
<article>
<header>
<h2>HTML5 Semantic Structure
Elements </h2>
<p>By <em>Randy Connolly</em></p>
<p><time>September 30,
2012</time></p>
</header>
...
</article>
2

Heading Groups

The <hgroup> element can be used to group

related headings together within one
container.

<header>
<hgroup>
<h1>Chapter Two: HTML 1</h1>
<h2>An Introduction</h2>
</hgroup>
</header>
<article>
<hgroup>
<h2>HTML5 Semantic Structure Elements </h2>
<h3>Overview</h3>
</hgroup>
</article>
3
Navigation

The <nav> element represents a section of a

page that contains links to other pages or to
other parts within the same page.
Like the other new HTML5 semantic
elements, the browser does not apply any
special presentation to the <nav> element.
The <nav> element was intended to be used
for major navigation blocks, presumably the
global and secondary navigation systems.
Navigation
<header>
<img src="logo.gif" alt="logo" />
<h1>Fundamentals of Web Development</h1>
<nav role="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="browse.html">Browse</a></li>
</ul>
</nav>
</header>
5 6

Articles and Sections

<article> <section>

The <article> element represents a section of

content that forms an independent part of a
document or site; for example, a magazine or
newspaper article, or a blog entry.
The <section> element represents a section
of a document, typically with a title or
heading.
Articles and Sections

According to the W3C, <section> is a much

broader element, while the <article> element
is to be used for blocks of content that could
potentially be read or consumed
independently of the other content on the
page.
Sections versus Divs
How to decide which to use

The WHATWG specification warns readers

that the <section> element is not a generic
container element. HTML already has the
<div> element for such uses.
When an element is needed only for styling
purposes or as a convenience for scripting, it
makes sense to use the <div> element
instead.
Another way to help you decide whether or
not to use the <section> element is to ask
yourself if it is appropriate for the element's
contents to be listed explicitly in the
document's outline.
<!DOCTYPE html>
<html>
<body>
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our
planet's natural environment, and build a future in which
humans live in harmony with nature.</p>
</article>

</body>
</html>
7 8

Figure and Figure Captions

<figure> <figcaption>

The W3C Recommendation indicates that the

<figure> element can be used not just for
images but for any type of essential content
that could be moved to a different location in
the page or document and the rest of the
document would still make sense.
Figure and Figure Captions
Note however …

The <figure> element should not be used to

wrap every image.
For instance, it makes no sense to wrap the
site logo or non-essential images such as
banner ads and graphical embellishments
within <figure> elements.
Instead, only use the <figure> element for
circumstances where the image (or other
content) has a caption and where the figure
is essential to the content but its position on
the page is relatively unimportant.
9

Aside

The <aside> element is similar to the <figure>

element in that it is used for marking up content
that is separate from the main content on the
page.
But while the <figure> element was used to
indicate important information whose location on
the page is somewhat unimportant, the <aside>
element “represents a section of a page that
consists of content that is tangentially related to
the content around the aside element.”
The <aside> element could thus be used for
sidebars, pull quotes, groups of advertising
images, or any other grouping of non-essential
elements.
Event Attributes

HTML has the ability to let events trigger actions in a browser, like starting a JavaScript when a user
clicks on an element .
Attribute Description
onafterprint Script to be run after the document is printed
onbeforeprint Script to be run before the document is printed
onbeforeunloa Script to be run when the document is about to be unloaded
d
onerror Script to be run when an error occurs
onhashchange Script to be run when there has been changes to the anchor part of the
a URL
onload Fires after the page is finished loading
onmessage Script to be run when the message is triggered
onoffline Script to be run when the browser starts to work offline
ononline Script to be run when the browser starts to work online
onpagehide Script to be run when a user navigates away from a page
onpageshow Script to be run when a user navigates to a page
onpopstate Script to be run when the window's history changes
onresize Fires when the browser window is resized
onstorage Script to be run when a Web Storage area is updated
onunload Fires once a page has unloaded (or the browser window has been
closed)
Attribute Description

onafterprint Script to be run after the document is printed

onbeforeprint Script to be run before the document is printed

onbeforeunload Script to be run when the document is about to be unloaded

onerror Script to be run when an error occurs

onhashchange Script to be run when there has been changes to the anchor part of the a URL

onload Fires after the page is finished loading

onmessage Script to be run when the message is triggered

onoffline Script to be run when the browser starts to work offline

ononline Script to be run when the browser starts to work online

onpagehide Script to be run when a user navigates away from a page

onpageshow Script to be run when a user navigates to a page

onpopstate Script to be run when the window's history changes

onresize Fires when the browser window is resized

onstorage Script to be run when a Web Storage area is updated

onunload Fires once a page has unloaded (or the browser window has been closed)
Try to resize the browser window.

<!DOCTYPE html>

<html>

<body onresize="myFunction()">

<p>Try to resize the browser window.</p>

<script>

function myFunction() {

alert("You have changed the size of the browser window!");

</script>

</body>

</html>

22
HTML Canvas

•HTML canvas is an HTML element that provides a drawing surface for

creating graphics and animations with JavaScript.
•Canvas elements have attributes such as width and height that define the
size of the drawing area.
•The Canvas API provides a set of methods and properties for drawing
shapes, text, and images on the canvas, as well as manipulating colors,
gradients, and patterns.
•Canvas can be used to create a wide range of visual content, such as charts,
graphs, diagrams, animations, games, and more.
•Canvas is highly customizable with CSS styles that control the appearance of
the canvas element and its contents.
HTML Canvas (contd..)
• Canvas supports interactivity and animation, allowing you to create dynamic, user-
driven content that responds to user input.
• Canvas can be integrated with other web technologies, such as HTML, CSS, and
JavaScript, to create sophisticated web applications.
• Canvas is supported by most modern web browsers, including Chrome, Firefox,
Safari, and Edge.
• Canvas requires some programming knowledge, as you need to write JavaScript
code to create and manipulate graphics on the canvas.
• There are also many libraries and frameworks available that can help you create
more complex and advanced canvas projects, such as Three.js, D3.js, and p5.js.

CSE-367 Data Visualization 24

Example

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 100);
</script>

</body>
</html>

25
WebSockets

WebSockets is a next-generation
bidirectional communication technology for
web applications which operates over a
single socket and is exposed via a JavaScript
interface in HTML 5 compliant browsers.
Once you get a Web Socket connection with
the web server, you can send data from
browser to server by calling a send() method,
and receive data from server to browser by
an onmessage event handler.

27
WebSockets

Following is the API which creates a new

WebSocket object.
var Socket = new WebSocket(url, [protocal] );
Here first argument, url, specifies the URL to
which to connect. The second attribute,
protocol is optional, and if present, specifies
a sub-protocol that the server must support
for the connection to be successful.

28
29
Transform Property

The transform property applies a 2D or 3D transformation to an

element.
Some common transform functions that can be used with the
transform property include:
rotate: Rotates the element by a specified angle.

scale: Scales the element by a specified factor.

skew: Skews the element by a specified angle.

translate: Moves the element by a specified distance.

30
The translate() Method

The translate() method moves an element from its current position:

<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: translate(50px,100px);
}
</style>
</head>
<body>
<h1>The translate() Method</h1>
<p>The translate() method moves an element from its current position:</p>

<div>
This div element is moved 50 pixels to the right, and 100 pixels down from its current position.
</div>

</body>
</html>

31
CSS Gradients
• CSS gradients let you display smooth transitions between two
or more specified colors.
• CSS defines three types of gradients:
• Linear Gradients (goes down/up/left/right/diagonally)
• Radial Gradients (defined by their center)
• Conic Gradients (rotated around a center point)

CSE-367 Data Visualization 32

CSS Linear Gradients
• To create a linear gradient you must
define at least two color stops. Color
stops are the colors you want to
render smooth transitions among. You
can also set a starting point and a
direction (or an angle) along with the
gradient effect.

CSE-367 Data Visualization 33

Direction - Top to Bottom (this is default)
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Top to Bottom</h1>

<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>

<div id="grad1"></div>

</body>
</html>

CSE-367 Data Visualization 34

 • <!DOCTYPE html>
• <html>
• <head>
• <style>
• #grad1 {
• height: 150px;
• width: 200px;
• background-color: red; /* For browsers that do
not support gradients */
• background-image: blue, yellow, green, red,
yellow);
• }
• </style>
• </head>
• <body>
• <h1>Radial Gradient - Evenly Spaced Color
Stops</h1>
• <div id="grad1"></div>
• </body>
• </html>

CSE-367 Data Visualization 35

• CSS Conic Gradients
• A conic gradient is a gradient with
color transitions rotated around a
center point.
• To create a conic gradient you must
define at least two colors.
• background-image:
• conic-gradient([from angle]
[at position,] color [degree], color [degree],
...);
CSE-367 Data Visualization 36
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• #grad1 {
• height: 200px;
• width: 200px;
• background-color: red; /* For browsers that do not
support gradients */
• background-image: conic-gradient(red, yellow,
green);
• }
• </style>
• </head>
• <body>

• <h1>Conic Gradient - Three Colors</h1>

• <div id="grad1"></div>

• </body>
• </html>

CSE-367 Data Visualization 37

WEB 2.0
Web Storage
• With web storage, web applications can store data locally within the
user's browser.
• Before HTML5, application data had to be stored in cookies,
included in every server request. Web storage is more secure, and
large amounts of data can be stored locally, without affecting
website performance.
• Unlike cookies, the storage limit is far larger (at least 5MB) and
information is never transferred to the server.
• Web storage is per origin (per domain and protocol). All pages, from
one origin, can store and access the same data

CSE-367 Data Visualization 39

HTML colors
• HTML colors are specified with
predefined color names, or with RGB,
HEX, HSL, RGBA, or HSLA values.
• HTML supports 140 standard color
names.

CSE-367 Data Visualization 40

INDEX
 Introduction
 web 1.0
 web 2.0.
 Comparison of Web1.0 and Web 2.0
 Web 2.0 Technologies
• <!DOCTYPE html>
• <html>
• <body>

• <h1 style="background-color:Tomato;">Tomato</h1>
• <h1 style="background-color:Orange;">Orange</h1>
• <h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
• <h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
• <h1 style="background-color:Gray;">Gray</h1>
• <h1 style="background-color:SlateBlue;">SlateBlue</h1>
• <h1 style="background-color:Violet;">Violet</h1>
• <h1 style="background-color:LightGray;">LightGray</h1>

• </body>
• </html>

CSE-367 Data Visualization 42

Color Values
• In HTML, colors can also be specified
using RGB values, HEX values, HSL
values, RGBA values, and HSLA
values.
• The three <div> elements have their
background color set with RGB, HEX,
and HSL values:

CSE-367 Data Visualization 43

<!DOCTYPE html>
<html>
<body>
<p>Same as color name "Tomato":</p>
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>
<p>Same as color name "Tomato", but 50% transparent:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71,
0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%,
0.5)</h1>
<p>In addition to the predefined color names, colors can be specified using
RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color
values.</p>
</body>
</html>

CSE-367 Data Visualization 44

 Evolution of WEB
The World Wide Web is the key tool used by billions of people to distribute information, read
and create it, and connect with others over the internet. The web has evolved considerably over
time, and its contemporary uses are almost unrecognizable from its inception. The development
of the web is often classified into three stages: Web 1.0, Web 2.0, and Web 3.0.
Web 2.0 Technologies
Existing Technologies Web 1.0 Vs Web 2.0

 E-mail - Offline
 Static and Dynamic websites, Mp3.com --> Napster
 Forums
 I-Pad and I-books
 Blogs , Wikis Britannica Online --> Wikipedia
 RSS aggregators
 web conferencing
Personal websites --> blogging
 Instant messaging
 R3 Access
 Semantic web
 Quick Response Code
 Mobile Apps
 MOOCs, LMS, Reference Management
systems
 Web 2.0 Concepts

• Collaboration
• Sharing
• Ownership
• Creation
• Social Connection/Relationships
• Participation
• Decentralized
Access to I-books using i-pad or Rolltop
 Information Alert using Google Alert

Library and Information Centers are offering a variety of additional

services; among these are alert services which present requested information on
recent publications, renewals of books, new arrivals of books and so on. Google also
providing the online information alert service for their users.
 Access to I-books using Chrome

Applications are advanced websites that are similar to other types of programs that
install on computer. The main difference is that apps are accessed and used entirely
within the browser.

Extensions are custom features and functionality that can add to Google Chrome. Unlike
apps, they’re always available, no matter what website on.

Themes change the skin of the Google Chrome browser, to give it a bit more style and
flair. Choose from hundreds of eye-popping themes.
Web Applications in Chrome store
Carnatic Raga Software
Gmail Offline
 Wiki

• A wiki invites all users to edit any page or to create new

pages within the wiki Web site.
 Rich Site Summary

• RSS is a structured XML-based metadata schema used to distribute news items

through a web medium.
• RSS is a family of Web feed formats used to publish frequently updated
content .
Web Conferencing

• Web conferencing is used to

conduct live meetings, training, or
presentations via the Internet.
• Slide show presentations
• Live or Streaming video - where
full motion webcam.
• Meeting Recordings
 Content Management System
• A content management system (CMS) is a system used to
manage the content of a Web site.
• Content Management Systems:-
Compilation of Citation profile using
Google Scholar
 Smart Surveillance System
• As smart surveillance technology
becomes a critical component in
security infrastructures.

• This concept considers the example

of smart surveillance in an Library
security environment.
 Free Websites

• Geocities
• Google Pages
• Webs
• Weebly
• Webnode
• Wix
• Big Rock
• Yola and so on
FLICKR

• Flickr is an image
hosting and video
hosting website

• The best online

photo
management and
sharing
application in the
world.
Skype for Chat
YOU TUBE
• The mission of MIT is to
advance knowledge and
educate students in science,
technology, and other areas
of scholarship that will best
serve the nation.

• YouTube is a video-sharing
website on which users can
upload, share, and view
videos.
AMAZON
• Online shopping for
millions of new & used
books on thousands of
topics at everyday low
prices.
 Difference Between Web 1.0, Web 2.0
S. No. Web 1.0 Web 2.0 Web 3.0

1. Mostly Read-Only Wildly Read-Write Portable and Personal

2. Company Focus Community Focus Individual Focus

3. Home Pages Blogs / Wikis Live-streams / Waves

4. Owning Content Sharing Content Consolidating Content

5. WebForms Web Applications Smart Applications

6. Directories Tagging User behavior

7. Page Views Cost Per Click User Engagement

8. Banner Advertising Interactive Advertising Behavioral Advertising

9. Britannica Online Wikipedia The Semantic Web

10. HTML/Portals XML / RSS RDF / RDFS / OWL

S. No. Web 1.0
11. Data was not Focused.
12. Information sharing is the goal.
It connects information as its
13.
primary goal.
14. Static websites
15. A simpler, more passive web.
Web and File Servers, HTML, and
16. Portals are technologies
connected to Web 1.0.
Associated Technologies
•Web and File Servers
•Search Engines (including
AltaVista and Yahoo!)
17.
•E-mail accounts (Yahoo!,
Hotmail)
•Peer-to-Peer File Sharing
(Napster, BitTorrent) and others.
Web 2.0
Data of many was controlled by
some mediatory.
Interaction is the goal.
It aims to connect people.
Introduction of web applications
An enhanced social Web
AJAX, JavaScript, CSS, and HTML5
are examples of related
technology.
Associated Technologies
•Frameworks for Ajax and
JavaScript
•Microsoft.NET
•Blogs
•Wikis and others.
Web 3.0
Data was personalized and no use of
mediatory.
Immersion is the goal.
Focuses on relating knowledge.
Intelligent web-based functions and
apps
A semantic web exists.
Web 3.0 technologies include
blockchain, artificial intelligence, and
decentralized protocols.
Associated Technologies
•Searching Using Semantics
•Databases of Information
•Ontologies
•Intelligent Digital Personal Assistants
and others.
CSE-367 Data Visualization 91