This document provides an overview of fundamentals of web development including HTML, CSS, JavaScript, and frameworks. It covers topics such as the importance of web development, differences between web designers and developers, front-end and back-end development, and introductions to HTML, CSS, JavaScript, jQuery, and advanced web development topics. The document aims to provide learners with knowledge to develop interactive websites using core web technologies.
With the commercialization of the web, web development has become one of the blooming industries. Learning web development enables you to create attractive websites using HTML, CSS, JQuery and JavaScript. Web development includes developing simple and complex web-based applications, electronic businesses and social networking sites. Being a web developer you can deliver applications as web services which is only available in desktop applications.
Web Development with HTML5, CSS3 & JavaScriptEdureka!
With the commercialization of the web, web development has become one of the blooming industries. Learning web development enables you to create attractive websites using HTML, CSS, JQuery and JavaScript. Web development includes developing simple and complex web-based applications, electronic businesses and social networking sites. Being a web developer you can deliver applications as web services which is only available in desktop applications.
With the commercialization of the web, web development has become one of the blooming industries. Learning web development enables you to create attractive websites using HTML, CSS, JQuery and JavaScript. Web development includes developing simple and complex web-based applications, electronic businesses and social networking sites. Being a web developer you can deliver applications as web services which is only available in desktop applications.
Web Development with HTML5, CSS3 & JavaScriptEdureka!
With the commercialization of the web, web development has become one of the blooming industries. Learning web development enables you to create attractive websites using HTML, CSS, JQuery and JavaScript. Web development includes developing simple and complex web-based applications, electronic businesses and social networking sites. Being a web developer you can deliver applications as web services which is only available in desktop applications.
Introduction in the JavaScript Programming language typically used in the front end of Web Applications. More information can be found at : https://www.spiraltrain.nl/course-javascript-programming/?lang=en
Introduction in the JavaScript Programming language typically used in the front end of Web Applications. More information can be found at : https://www.spiraltrain.nl/course-javascript-programming/?lang=en
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
Generating a custom Ruby SDK for your web service or Rails API using Smithyg2nightmarescribd
Have you ever wanted a Ruby client API to communicate with your web service? Smithy is a protocol-agnostic language for defining services and SDKs. Smithy Ruby is an implementation of Smithy that generates a Ruby SDK using a Smithy model. In this talk, we will explore Smithy and Smithy Ruby to learn how to generate custom feature-rich SDKs that can communicate with any web service, such as a Rails JSON API.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
2. pment
Objectives
At the end of this module, you will be able to:
Importance of Web Development
Web Designer Vs. Web Developer
Front-end and Back-end Web Development
HTML, CSS and JavaScript - An Overview
JavaScript Frameworks - jQuery and React.JS
Advanced Web Development Topics
3. Importance of Web Development
The Internet is ubiquitous
• Accessible through mobile and desktop
• Customers/users need to find you/your business
• Builds trust in your organization and improves your reputation
• Your website is your first round-the-clock sales person!
The Website
• Creates first impression of your business
• Create it to suit the needs of your target audience
• Reflects your expertise and reputation
• Can bring business from any part of the world!
• Call to Action – Encourage the users to give you business
You need Web Development skills to create a Website!
4. Web Designer Vs. Web Developer
A Web Designer
• Designs the look and feel of a website (creative side of website)
• Decides the layout, fonts, color, images and overall branding
• Creates the visual mock-up of the website
• Rarely does the development of a website!
• A Right-brained (Creative) Person
A Web Developer
• Brings the website mock-up to life on the Internet (development side of website)
• Develops the website and hosts on a web server
• Has Web Development Skills: HTML, CSS, JavaScript, React.js, Node.js
• A Left-brained (Logical) Person
Gain Web Development skills to become a Web Developer!
6. Front End and Back End Web Development
Front End Web Development
• Defined components on the page with HTML
• Make them look pleasing with CSS
• Enable interactivity with JavaScript
• Enhance productivity with use of frameworks
Back End Web Development
• Create the page components and content dynamically on the web server
• Send the HTML + CSS + JavaScript to web browser (used by a human user)
• Generate pages by programming in Java, JavaScript, PHP, Perl, Python, Ruby
• Aim to achieve fast response times to end users
Front End Web Development is the focus of this webinar!
7. HTML, CSS, and JavaScript – An Overview
HTML
• Hypertext Markup Language
• Structure of Page
JavaScript
• Interactivity with User
• Dynamic Updates in a Web Page
CSS
• Cascading Style Sheets
• Presentation/Styling
t
8. Hypertext - Origins
HyperText
• Text with references (hyperlinks) to other text
“Hyper” - meaning
• Greek Origin: “over”, “beyond”
First Idea
• Vannevar Bush, USA, in 1945
9. A Simple HTML5 Page
t
Save the following code in a test.html file
<!DOCTYPE html>
<html>
<head>
<title>This is My First Website </title>
</head>
<body>
<p>Welcome to HTML5, CSS3 and JavaScript!</p>
</body>
</html>
10. Hosting a Web Site
A Web Site
• Serves one or more HTML Pages
Default Page: index.html, index.php
Served / Hosted by a Web Server
• HTTP Web Server
https, apache2, Ngnix - Internet Information Server (Microsoft’s)
• Web Application Server
Visual Studio Code (Microsoft) , Sublime Text, Atom
Technologies
• HTML, HTTP, TCP/IP Protocols
• Operating Systems: Linux, Windows, MacOS
11. HTML Page
HTML (Web) Page / Document
• User Interface for the Web (site or application)
• A plain text file – human readable
• Transported on HTTP - HyperText Transfer Protocol
Page Types
• Static – ready-made pages with fixed page content
File Extension: .html, .htm
• Dynamic – generated on the fly with varying page content
Generated on the Web Server
Interspersed with JavaScript, PHP, JSP, ASP
File Extensions: .js, .php, .jsp, .asp, .aspx
12. CSS - Introduction
Cascading Style Sheet
• Describes the look and formatting of a page
• Used for Changing Presentation and Styling
• Can apply to a mark-up language
HTML, XHTML, XML, SVG
Separates Content from Presentation
Properties (Attributes) Styled
• Layout, Font (Typography), Color, Background
• Box Properties: Border, Margin, Padding
• Lists, Tables
.
13. CSS Syntax (Contd./-)
Style Selector
• The HTML elements to which the Style rule should be applied
• It is a match expression
• Specified as:
Element’s tag name
h1, p, label - case insensitive
Value of Element’s attribute
id, class - Case Sensitive
Element’s placement in the Document tree
Child element is nested within Parent
A Sibling element is at the same nesting level
14. CSS Syntax (Contd./-)
CSS Declaration Block
• List of Declarations
• Enclosed in curly braces { . . . }
• Declaration
property : value(s) ;
• property and value(s) are pre-defined
• Property name is unique
• Property value – Specified in multiple formats
keywords (words) or mnemonics (in combination with some symbols like: #, /)
numerical, hexadecimal, or a combination
some values may have units of measure
15. New CSS3 Selectors
Slide
15
New CSS3 Structural Pseudo-Class Selectors
• E:first-of-type – Selects the first element of type E for its parent
li:first-of-type { color: red; }
• E:last-of-type - Selects the last element of type E for its parent
li:last-of-type { color: yellow; }
• E:only-child - Selects if E is only the child of its parent
li:only-child { color: blue; }
• E:nth-child(n) - Selects nth child of the element E
li:nth-child(3) { color: yellow; }
• E:nth-last-child(n) - Selects nth last child of the element E
li:nth-last-child(2) { color: red; }
.
16. CSS3 – 2D Transforms
Slide
16
Transformation
• Change of position, shape and size of an element
CSS3 Transforms
• 2-D: Two Dimensions
• 3-D: Three Dimensions (not covered in this course)
Transform Operations
• move, scale, spin, stretch and turn elements
17. CSS3 – 2D Transforms (Contd./-)
Slide
17
Specified with transform attribute
• Translation – Movement along X-axis and Y-axis
transform: translate( 50px, 100px );
• Rotation – in clock-wise direction
transform: rotate( 5deg );
• Scaling – increase/decrease size along width and height
transform: scale( 2, 2 );
• Skewing – tilting (turning) in X-axis and Y-axis directions
transform: skew( 10deg, 5deg);
18. CSS3 Transitions
Slide
18
Changing from one style to another (on an event)
CSS property on which the transition effect has to take place
Time Duration over which transition has to take place (smoothly)
Specified in seconds (s) or milliseconds (ms)
p { width: 100px; }
p:hover { width: 200px; transition: width 2s; }
Transition starts on events
Events: hover, active, checked, focus, enabled, disabled
@media queries, and JavaScript
Specify multiple transitions sets with a comma
p { width: 200px; height: 100px; }
p:hover {
width: 400px; height: 200px;
transition: width 2s, height 5s; }
19. JavaScript – An Introduction
Slide
19
Mocha, later renamed as LiveScript - Developed by Netscape
Based on ECMAScript 5.1 (Ver. 6.0 is finalized in mid 2015)
LiveScript JavaScript (due to Java popularity)
Scripting Language for Web Browsers
• Dynamically Typed
• Interpreted by JavaScript Engine
Can not Do (for Security Reasons)
• Unlimited reading/writing of files from client machine’s file system
• Writing to the files on the Server
• Can not close a window that was not opened by it
• Can not read from a web page served by another web server
Microsoft’s version - JScript
20. Document Object Model (DOM) (Contd./-)
Slide
20
Structure and Style of a Page, Access / Update Content
DOM + JavaScript = Dynamic HTML (on client-side)
What JavaScript can do with DOM?
Change an HTML Element
Change an attribute of an HTML Element
Change the CSS style of an HTML Element
Remove an existing HTML element or its attributes
Add new a HTML Element or a new attribute to an Element
React to an event associated with an HTML Element
Create a new event listener and associate with an HTML Element
21. HTML DOM Methods
Slide
21
DOM Methods – Finding HTML Elements
• getElementById() Method
Gets the HTML Element with specified ID
• getElementsByClassName() Method
Gets the HTML Elements with specified class name
document.getElementsByClassName("middlePara")[0].innerHTML = "Welcome
to My Website!";
document.getElementsByClassName("middlePara")[1].innerHTML = "This is
HTML5, CSS3 and JavaScript presentation!";
• getElementsByTagName() method
Gets the HTML Elements with specified element tag
document.getElementsByTagName("p")[0].innerHTML = "Welcome to
My Website!";
document.getElementsByTagName("p")[1].innerHTML = "This is HTML5,
CSS3 and JavaScript presentation!";
22. jQuery - Introduction
Slide
22
For use in production (live / online) use of website
jQuery Core – a Cross-Platform JavaScript Library
• Simplifies client-side JavaScript scripting for a web page
• It is FREE and Open Source
• Used by about 6,000 most visited websites
• It uses the familiar HTML DOM model
Latest Versions
• Version 1.11.3 - has support for IE 6/7/8
• Version 2.1.4 - has NO support for IE 6/7/8
• Development Version
For use during development of the website
• Minified Version
23. jQuery - Introduction
Slide
23
• Supports JSON Parsing and Ajax (Asynchronous JavaScript + XML)
Why use jQuery?
• JavaScript Framework
• Separates HTML and JavaScript in a web page
• Eliminates cross-browser incompatibilities
• Simple/Short, Clean and Easy to read, write and understand
What jQuery can do?
• Can Select Elements
Has Selectors are similar to CSS Selectors
• Can Manipulate the Selected Elements
• Can Modify the Style of the Selected Elements
• Supports Events, Effects and Animations
24. jQuery Basics
Download the latest version
• From jquery.com website
Reference it in HTML file
• Host it on your Web Server and Use it with <script> tag
<script src="jquery-2.1.3.js"></script>
• Point to a Public Web Server and Use it with <script> tag
Google CDN Server (recommended) CDN – Content Delivery Network
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
Microsoft CDN Server
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js">
</script>
MaxCDN CDN Server (moved from MediaTemple, before that Amazon)
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
• Do not put the jQuery code in the <script> tag that loads jQuery library
25. Advanced Web Programming Topics
Slide
25
HTML Canvas, WebGL, SVG
HTML5 Geolocation API
HTML5 Drag and Drop API
HTML5 Web Storage API
HTML5 Web Workers
HTML5 Server-sent Events