SlideShare une entreprise Scribd logo
1  sur  28
Web Authoring

          Topic 26 –
Browser Compatibility & Security
Objectives
Students should able to:
1. Describe the necessity of performing a
    browser compatibility test.

2. Follow procedures to ensure the browser
    compatibility of websites.
Browser Compatibility
Browser testing is necessary because
different web browsers render HTML and
CSS code differently.
If you’ve tried using different Web browsers
to surf online, you’ve probably noticed that
the same sites look a little different
depending on which browser you’re using.
Browser Compatibility
That is because page display varies
according to browser compatibility.

Browser compatibility is the ability of the
Web browser to properly interpret the
hypertext markup language (HTML) that
renders Web pages.
Browser Compatibility
Most sites are designed to look correct in
Microsoft’s Internet Explorer, because it is
believed to be the most ubiquitous
browser.
However, if you are a Web designer, your
task is to code a site for maximum
browser compatibility so that the pages
look correct in other popular browsers
such as FireFox, Safari, Google Chrome,
etc.
Browser Compatibility
Browser compatibility creates potential
headaches for webmasters.
As newer popular scripting languages
create flashy Web pages, older browsers
may not understand the new code.
For security reasons, many people disable
scripting languages in their Web browsers,
reducing browser compatibility.
Browser Compatibility
Aside from the difference in browsers,
another factor that plays into browser
compatibility is whether the surfer is using
a standard PC and Windows, Linux, or a
Mac computer.
The same browser will render the pages a
little differently from each of these
platforms.
Browser Compatibility
Why browser testing is important?
A web browser is a program that renders
HTML, CSS and Javascript files according
to a set of rules built into the application.
Although web browser manufacturers use
the recommended guidelines of the World
Wide Web Consortium’s specifications for
HTML and CSS, they can interpret these
rules as required for their own purposes.
Browser Compatibility
Are web pages required to look the same
in all browsers?
 In the case of technical
 considerations, you must determine
 whether you could achieve your goal of
 making a web page look the same. For
 example, the earliest browsers, such as
 Internet Explorer 3 or Netscape 3, do not
 support cascading style sheets.
Browser Compatibility
Are web pages required to look the same
in all browsers?
 In the case of time/budget considerations,
 you might find technical solutions to make
 your pages look the same, but if it takes
 you more time than you have allotted to
 identify and fix the problem you should
 determine whether the solution is worth
 it.
Browser Compatibility
Attempting to make web pages look the
same in multiple browsers is not as
important due to several reasons:
- People browse the web in different ways.
- Monitor resolution. A website on a 17-
inch monitor never looks the same as on a
27-inch monitor.
Browser Compatibility
- Text resizing. Users can override the
page layout by increasing or decreasing
text size.
- Mobile devices, which represent a
growing proportion of web browsers.
- Client expectations, as clients are quite
often less technically oriented than the
web designer.
Browser Compatibility
Choose the level browser of browser
support you want
The level of browser use partially accounts
for your decision to support it. The choice
of which browsers to support becomes
more difficult with more recent browsers.
Browser Compatibility
Browser Statistics
Locating an accurate number of the web
browsers currently in use today is difficult.
Individual websites can gather accurate
information on their user’s browser
version. Visit to some of the sites listed
below for an accurate estimate.
  www.statowl.com

 www.w3schools.com/browsers/browsers_stats.asp
Browser Compatibility
Tools to identify browser problems
The first step in testing your page design is
to view it in the desired browser.

However, this is not always easy, for
various reasons.
Browser Compatibility
 • You might not have access to the
browser, which is a common problem
when testing for cross-browser
compatibility. Cross-browser refers to the
ability for a website to support all the web
browsers.
Browser Compatibility
• Different windows operating system
might not allow multiple versions of
Internet Explorer to be installed on the
same system.
A common solution is to have access to a
separate computer.
Many web designers invest in an
inexpensive computer mainly used for
testing.
Browser Compatibility
However, this option may not be practical
for several reasons:
  • Inefficiency. There might be a time lag
 involved in continuously changing
 computers.

  • The debugging process involves
making many small changes. It could
become tedious to change computers
after every change.
Browser Compatibility
Virtualization solutions for Windows
If a Windows computer is your primary
device and you need to test your designs
on a Mac, you will need a separate
computer.
You could have Windows 7 with a modern
browser as your primary system, and a
virtual machine that runs Windows XP
with Internet Explorer 6.
Browser Compatibility
Windows Virtual PC
Windows virtual PC is Microsoft’s native
virtualization tool that allows you to install
one or more virtual machines on your
system.
You need sufficient system resources, such
as hard-drive space and memory, to make
this a viable option.
Browser Compatibility
Browser compatibility applications
An alternative is to use a browser testing
application or service whose only job is to
test web pages. Although the details
differ, the basic concept is the same: to
provide “snapshots” of your web pages in
different browsers.
Browser Compatibility
Dreamweaver CS5
Dreamweaver CS5 has a new feature that
will help you track down the most
common bugs – and give you the fix for
them as well. It is called Check Browser
Compatibility and it is accessed through
the Check Page icon in the Standard
toolbar.
Browser Compatibility
Adobe BrowserLab
BrowserLab lets you preview your page in
a number of different browsers and
platforms, so you are not limited to Mac
or PC. The basic steps are to enter the URL
of the page you would like to preview to
generate a screenshot of the page. You
can then compare the screenshots if you
define multiple browsers.
Browser Compatibility
Microsoft SuperPreview
SuperPreview is a Windows platform that
only uses the browsers installed on a local
system, but it also has a network feature
similar to BrowserLab to let you view your
page using Safari on OS X.
SuperPreview will not solve the layout
issues, but it helps you to easily identify
them.
Web Application Security
Common vulnerabilities
Some of the vulnerabilities you'll be
looking for is:
By far the most popular: cross-site
scripting (XSS). XSS results from malicious
scripts being injected into a Web site.
Web Application Security
Common vulnerabilities
SQL injection is the second most popular
vulnerability, primarily because of the
growing dependence Web sites have on
databases.
Web Application Security
Common vulnerabilities
SQL injection is actually quite simple:
By finding a Web site that connects to a
database, malicious hackers execute an
SQL query in a place that the developer
never intended for the purpose of
bypassing authentication or manipulating
data.
Web Application Security
WebScarab
WebScarab is first and foremost a proxy
used to analyze browser requests and
server replies.
In addition to serving as a tool for packet
analysis, you can use it to "fuzz" sites,
looking for some of the same exploits as
mentioned.

Contenu connexe

Tendances

Responsive Web Design helps SEO Boost up by XHTMLChamps
Responsive Web Design helps SEO Boost up by XHTMLChampsResponsive Web Design helps SEO Boost up by XHTMLChamps
Responsive Web Design helps SEO Boost up by XHTMLChampsXHTML Champs
 
Web Application Development Process presented by @Cygnismedia
Web Application Development Process presented by @CygnismediaWeb Application Development Process presented by @Cygnismedia
Web Application Development Process presented by @CygnismediaClark Davidson
 
Common Mistakes Made By Web Developers
Common Mistakes Made By Web DevelopersCommon Mistakes Made By Web Developers
Common Mistakes Made By Web DevelopersBOSS Webtech
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen Derin Dolen
 
CSS With Feature Detection for Cross Browser Compatibility
CSS With Feature Detection for Cross Browser CompatibilityCSS With Feature Detection for Cross Browser Compatibility
CSS With Feature Detection for Cross Browser CompatibilitySarah Elson
 
Web Application Development Fundamentals
Web Application Development FundamentalsWeb Application Development Fundamentals
Web Application Development FundamentalsMohammed Makhlouf
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web DevelopmentRobert Nyman
 
WEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentWEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentRandy Connolly
 
Quick Web Accessibility - Sensory Therapy Gardens Manual
Quick Web Accessibility - Sensory Therapy Gardens ManualQuick Web Accessibility - Sensory Therapy Gardens Manual
Quick Web Accessibility - Sensory Therapy Gardens ManualKlausGroenholm
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web developmentMohammed Safwat
 
Best practices to optimize code and build robust and scalable web applications
Best practices to optimize code and build robust and scalable web applicationsBest practices to optimize code and build robust and scalable web applications
Best practices to optimize code and build robust and scalable web applicationsdheerajpiet
 
Responsive web design ppt
Responsive web design pptResponsive web design ppt
Responsive web design pptaccede16
 
WordPress Basics
WordPress BasicsWordPress Basics
WordPress BasicsDoug Fisher
 
Web Development on Web Project Presentation
Web Development on Web Project PresentationWeb Development on Web Project Presentation
Web Development on Web Project PresentationMilind Gokhale
 
Web Development In 2018
Web Development In 2018Web Development In 2018
Web Development In 2018Traversy Media
 
WordPress and Accessibility
WordPress and AccessibilityWordPress and Accessibility
WordPress and AccessibilityJoseph Dolson
 
Introduction to Web Development
Introduction to Web DevelopmentIntroduction to Web Development
Introduction to Web DevelopmentParvez Mahbub
 
Fundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-DevelopersFundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-DevelopersLemi Orhan Ergin
 
Web Standards And Protocols
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And ProtocolsSteven Cahill
 

Tendances (20)

Responsive Web Design helps SEO Boost up by XHTMLChamps
Responsive Web Design helps SEO Boost up by XHTMLChampsResponsive Web Design helps SEO Boost up by XHTMLChamps
Responsive Web Design helps SEO Boost up by XHTMLChamps
 
Web Application Development Process presented by @Cygnismedia
Web Application Development Process presented by @CygnismediaWeb Application Development Process presented by @Cygnismedia
Web Application Development Process presented by @Cygnismedia
 
Common Mistakes Made By Web Developers
Common Mistakes Made By Web DevelopersCommon Mistakes Made By Web Developers
Common Mistakes Made By Web Developers
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen
 
CSS With Feature Detection for Cross Browser Compatibility
CSS With Feature Detection for Cross Browser CompatibilityCSS With Feature Detection for Cross Browser Compatibility
CSS With Feature Detection for Cross Browser Compatibility
 
Web Application Development Fundamentals
Web Application Development FundamentalsWeb Application Development Fundamentals
Web Application Development Fundamentals
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web Development
 
WEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentWEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web Development
 
Quick Web Accessibility - Sensory Therapy Gardens Manual
Quick Web Accessibility - Sensory Therapy Gardens ManualQuick Web Accessibility - Sensory Therapy Gardens Manual
Quick Web Accessibility - Sensory Therapy Gardens Manual
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
 
Best practices to optimize code and build robust and scalable web applications
Best practices to optimize code and build robust and scalable web applicationsBest practices to optimize code and build robust and scalable web applications
Best practices to optimize code and build robust and scalable web applications
 
Responsive web design ppt
Responsive web design pptResponsive web design ppt
Responsive web design ppt
 
WordPress Basics
WordPress BasicsWordPress Basics
WordPress Basics
 
Web Development on Web Project Presentation
Web Development on Web Project PresentationWeb Development on Web Project Presentation
Web Development on Web Project Presentation
 
Web Development In 2018
Web Development In 2018Web Development In 2018
Web Development In 2018
 
WordPress and Accessibility
WordPress and AccessibilityWordPress and Accessibility
WordPress and Accessibility
 
Introduction to Web Development
Introduction to Web DevelopmentIntroduction to Web Development
Introduction to Web Development
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Fundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-DevelopersFundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-Developers
 
Web Standards And Protocols
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And Protocols
 

En vedette

Web topic 29 w3 c page validation
Web topic 29  w3 c page validationWeb topic 29  w3 c page validation
Web topic 29 w3 c page validationCK Yang
 
Web topic 15 1 basic css layout
Web topic 15 1  basic css layoutWeb topic 15 1  basic css layout
Web topic 15 1 basic css layoutCK Yang
 
Web topic 32 validate web contents
Web topic 32  validate web contentsWeb topic 32  validate web contents
Web topic 32 validate web contentsCK Yang
 
Web topic 25 mobile optimized website
Web topic 25  mobile optimized websiteWeb topic 25  mobile optimized website
Web topic 25 mobile optimized websiteCK Yang
 
Web topic 30 ensure web contents meet
Web topic 30   ensure web contents meetWeb topic 30   ensure web contents meet
Web topic 30 ensure web contents meetCK Yang
 
Web topic 28. w3 c standards and guidelines
Web topic 28. w3 c standards and guidelinesWeb topic 28. w3 c standards and guidelines
Web topic 28. w3 c standards and guidelinesCK Yang
 
Web topic 14 cascading style sheets
Web topic 14  cascading style sheetsWeb topic 14  cascading style sheets
Web topic 14 cascading style sheetsCK Yang
 
Web topic 24 usage of web browser
Web topic 24  usage of web browserWeb topic 24  usage of web browser
Web topic 24 usage of web browserCK Yang
 
Web topic 29 w3 c page validation
Web topic 29  w3 c page validationWeb topic 29  w3 c page validation
Web topic 29 w3 c page validationCK Yang
 
Web topic 23 web accessibility
Web topic 23  web accessibilityWeb topic 23  web accessibility
Web topic 23 web accessibilityCK Yang
 
Web topic 31 setup remote site
Web topic 31  setup remote siteWeb topic 31  setup remote site
Web topic 31 setup remote siteCK Yang
 
Web topic 33 publish websites
Web topic 33  publish websitesWeb topic 33  publish websites
Web topic 33 publish websitesCK Yang
 
Web topic 27 class test
Web topic 27  class testWeb topic 27  class test
Web topic 27 class testCK Yang
 
Web topic 18 conflict resolution in css
Web topic 18  conflict resolution in cssWeb topic 18  conflict resolution in css
Web topic 18 conflict resolution in cssCK Yang
 
Web topic 20 1 html forms
Web topic 20 1  html formsWeb topic 20 1  html forms
Web topic 20 1 html formsCK Yang
 
Web topic 22 validation on web forms
Web topic 22  validation on web formsWeb topic 22  validation on web forms
Web topic 22 validation on web formsCK Yang
 
Web topic 17 font family in css
Web topic 17  font family in cssWeb topic 17  font family in css
Web topic 17 font family in cssCK Yang
 
Web topic 16 css workflow
Web topic 16  css workflowWeb topic 16  css workflow
Web topic 16 css workflowCK Yang
 
Web topic 21 pass info via javascript
Web topic 21  pass info via javascriptWeb topic 21  pass info via javascript
Web topic 21 pass info via javascriptCK Yang
 
Web topic 15 2 basic css layout
Web topic 15 2  basic css layoutWeb topic 15 2  basic css layout
Web topic 15 2 basic css layoutCK Yang
 

En vedette (20)

Web topic 29 w3 c page validation
Web topic 29  w3 c page validationWeb topic 29  w3 c page validation
Web topic 29 w3 c page validation
 
Web topic 15 1 basic css layout
Web topic 15 1  basic css layoutWeb topic 15 1  basic css layout
Web topic 15 1 basic css layout
 
Web topic 32 validate web contents
Web topic 32  validate web contentsWeb topic 32  validate web contents
Web topic 32 validate web contents
 
Web topic 25 mobile optimized website
Web topic 25  mobile optimized websiteWeb topic 25  mobile optimized website
Web topic 25 mobile optimized website
 
Web topic 30 ensure web contents meet
Web topic 30   ensure web contents meetWeb topic 30   ensure web contents meet
Web topic 30 ensure web contents meet
 
Web topic 28. w3 c standards and guidelines
Web topic 28. w3 c standards and guidelinesWeb topic 28. w3 c standards and guidelines
Web topic 28. w3 c standards and guidelines
 
Web topic 14 cascading style sheets
Web topic 14  cascading style sheetsWeb topic 14  cascading style sheets
Web topic 14 cascading style sheets
 
Web topic 24 usage of web browser
Web topic 24  usage of web browserWeb topic 24  usage of web browser
Web topic 24 usage of web browser
 
Web topic 29 w3 c page validation
Web topic 29  w3 c page validationWeb topic 29  w3 c page validation
Web topic 29 w3 c page validation
 
Web topic 23 web accessibility
Web topic 23  web accessibilityWeb topic 23  web accessibility
Web topic 23 web accessibility
 
Web topic 31 setup remote site
Web topic 31  setup remote siteWeb topic 31  setup remote site
Web topic 31 setup remote site
 
Web topic 33 publish websites
Web topic 33  publish websitesWeb topic 33  publish websites
Web topic 33 publish websites
 
Web topic 27 class test
Web topic 27  class testWeb topic 27  class test
Web topic 27 class test
 
Web topic 18 conflict resolution in css
Web topic 18  conflict resolution in cssWeb topic 18  conflict resolution in css
Web topic 18 conflict resolution in css
 
Web topic 20 1 html forms
Web topic 20 1  html formsWeb topic 20 1  html forms
Web topic 20 1 html forms
 
Web topic 22 validation on web forms
Web topic 22  validation on web formsWeb topic 22  validation on web forms
Web topic 22 validation on web forms
 
Web topic 17 font family in css
Web topic 17  font family in cssWeb topic 17  font family in css
Web topic 17 font family in css
 
Web topic 16 css workflow
Web topic 16  css workflowWeb topic 16  css workflow
Web topic 16 css workflow
 
Web topic 21 pass info via javascript
Web topic 21  pass info via javascriptWeb topic 21  pass info via javascript
Web topic 21 pass info via javascript
 
Web topic 15 2 basic css layout
Web topic 15 2  basic css layoutWeb topic 15 2  basic css layout
Web topic 15 2 basic css layout
 

Similaire à Web topic 26 browser compatibilty and security

CBT_Guidelines
CBT_GuidelinesCBT_Guidelines
CBT_GuidelinesZakia Taqi
 
Major Cross Browser Compatibility issues faced by the Developers
Major Cross Browser Compatibility issues faced by the DevelopersMajor Cross Browser Compatibility issues faced by the Developers
Major Cross Browser Compatibility issues faced by the DeveloperspCloudy
 
Fundamentals of Web
Fundamentals of WebFundamentals of Web
Fundamentals of WebSabir Haque
 
Would You Consider Internet Explorer for Your Website Design?
Would You Consider Internet Explorer for Your Website Design?Would You Consider Internet Explorer for Your Website Design?
Would You Consider Internet Explorer for Your Website Design?Pattronize InfoTech
 
Mastering Mobile Web with 8 Key Rules
Mastering Mobile Web with 8 Key RulesMastering Mobile Web with 8 Key Rules
Mastering Mobile Web with 8 Key RulesMobile Labs
 
EXPERTALKS: Sep 2013 - Responsive Web Design
EXPERTALKS: Sep 2013 - Responsive Web DesignEXPERTALKS: Sep 2013 - Responsive Web Design
EXPERTALKS: Sep 2013 - Responsive Web DesignEXPERTALKS
 
WEB_Seminar_by_Prashant_Walke
WEB_Seminar_by_Prashant_WalkeWEB_Seminar_by_Prashant_Walke
WEB_Seminar_by_Prashant_WalkePrashant Walke
 
Liquidizer.js: A Responsive Web Design Algorithm
Liquidizer.js: A Responsive Web Design AlgorithmLiquidizer.js: A Responsive Web Design Algorithm
Liquidizer.js: A Responsive Web Design Algorithmtheijes
 
Tech Stack & Web App Development For Startups
Tech Stack & Web App Development For StartupsTech Stack & Web App Development For Startups
Tech Stack & Web App Development For StartupsZimbleCode
 
#1NLab15: Soundcheck – How Modern Browsers Are Changing the Web
#1NLab15: Soundcheck – How Modern Browsers Are Changing the Web#1NLab15: Soundcheck – How Modern Browsers Are Changing the Web
#1NLab15: Soundcheck – How Modern Browsers Are Changing the WebOne North
 
BarkleyREI & Hannon Hill Webinar - Responsive Web Design
BarkleyREI & Hannon Hill Webinar - Responsive Web DesignBarkleyREI & Hannon Hill Webinar - Responsive Web Design
BarkleyREI & Hannon Hill Webinar - Responsive Web Designhannonhill
 
Online fast food django.docx
Online fast food django.docxOnline fast food django.docx
Online fast food django.docxvidhi184862
 
How to do better Quality Assurance for Cross-Browser Testing
How to do better Quality Assurance for Cross-Browser TestingHow to do better Quality Assurance for Cross-Browser Testing
How to do better Quality Assurance for Cross-Browser TestingBOSS Webtech
 
Proven ways to improve your website performance optimizing front end and back...
Proven ways to improve your website performance optimizing front end and back...Proven ways to improve your website performance optimizing front end and back...
Proven ways to improve your website performance optimizing front end and back...Katy Slemon
 

Similaire à Web topic 26 browser compatibilty and security (20)

CBT_Guidelines
CBT_GuidelinesCBT_Guidelines
CBT_Guidelines
 
Major Cross Browser Compatibility issues faced by the Developers
Major Cross Browser Compatibility issues faced by the DevelopersMajor Cross Browser Compatibility issues faced by the Developers
Major Cross Browser Compatibility issues faced by the Developers
 
Fundamentals of Web
Fundamentals of WebFundamentals of Web
Fundamentals of Web
 
Would You Consider Internet Explorer for Your Website Design?
Would You Consider Internet Explorer for Your Website Design?Would You Consider Internet Explorer for Your Website Design?
Would You Consider Internet Explorer for Your Website Design?
 
8 web design facts that we know
8 web design facts that we know8 web design facts that we know
8 web design facts that we know
 
Mastering Mobile Web with 8 Key Rules
Mastering Mobile Web with 8 Key RulesMastering Mobile Web with 8 Key Rules
Mastering Mobile Web with 8 Key Rules
 
EXPERTALKS: Sep 2013 - Responsive Web Design
EXPERTALKS: Sep 2013 - Responsive Web DesignEXPERTALKS: Sep 2013 - Responsive Web Design
EXPERTALKS: Sep 2013 - Responsive Web Design
 
WEB_Seminar_by_Prashant_Walke
WEB_Seminar_by_Prashant_WalkeWEB_Seminar_by_Prashant_Walke
WEB_Seminar_by_Prashant_Walke
 
Web engineering lecture 5
Web engineering lecture 5Web engineering lecture 5
Web engineering lecture 5
 
WEB BROWSER
WEB BROWSERWEB BROWSER
WEB BROWSER
 
Liquidizer.js: A Responsive Web Design Algorithm
Liquidizer.js: A Responsive Web Design AlgorithmLiquidizer.js: A Responsive Web Design Algorithm
Liquidizer.js: A Responsive Web Design Algorithm
 
Tech Stack & Web App Development For Startups
Tech Stack & Web App Development For StartupsTech Stack & Web App Development For Startups
Tech Stack & Web App Development For Startups
 
Soodam
SoodamSoodam
Soodam
 
#1NLab15: Soundcheck – How Modern Browsers Are Changing the Web
#1NLab15: Soundcheck – How Modern Browsers Are Changing the Web#1NLab15: Soundcheck – How Modern Browsers Are Changing the Web
#1NLab15: Soundcheck – How Modern Browsers Are Changing the Web
 
BarkleyREI & Hannon Hill Webinar - Responsive Web Design
BarkleyREI & Hannon Hill Webinar - Responsive Web DesignBarkleyREI & Hannon Hill Webinar - Responsive Web Design
BarkleyREI & Hannon Hill Webinar - Responsive Web Design
 
Online fast food django.docx
Online fast food django.docxOnline fast food django.docx
Online fast food django.docx
 
Web dev
Web devWeb dev
Web dev
 
Web development
Web developmentWeb development
Web development
 
How to do better Quality Assurance for Cross-Browser Testing
How to do better Quality Assurance for Cross-Browser TestingHow to do better Quality Assurance for Cross-Browser Testing
How to do better Quality Assurance for Cross-Browser Testing
 
Proven ways to improve your website performance optimizing front end and back...
Proven ways to improve your website performance optimizing front end and back...Proven ways to improve your website performance optimizing front end and back...
Proven ways to improve your website performance optimizing front end and back...
 

Plus de CK Yang

Web topic 20 2 html forms
Web topic 20 2  html formsWeb topic 20 2  html forms
Web topic 20 2 html formsCK Yang
 
Web topic 13 html validation tools
Web topic 13  html validation toolsWeb topic 13  html validation tools
Web topic 13 html validation toolsCK Yang
 
Web topic 12 tables in html
Web topic 12  tables in htmlWeb topic 12  tables in html
Web topic 12 tables in htmlCK Yang
 
Web topic 11 importance of html validation
Web topic 11  importance of html validationWeb topic 11  importance of html validation
Web topic 11 importance of html validationCK Yang
 
Web topic 10 2 web design basics
Web topic 10 2  web design basicsWeb topic 10 2  web design basics
Web topic 10 2 web design basicsCK Yang
 
Web topic 9 navigation and link
Web topic 9  navigation and linkWeb topic 9  navigation and link
Web topic 9 navigation and linkCK Yang
 
Web topic 8 listings in html
Web topic 8  listings in htmlWeb topic 8  listings in html
Web topic 8 listings in htmlCK Yang
 
Web topic 7 html tags for links
Web topic 7  html tags for linksWeb topic 7  html tags for links
Web topic 7 html tags for linksCK Yang
 
Web topic 5 text formatting
Web topic 5  text formattingWeb topic 5  text formatting
Web topic 5 text formattingCK Yang
 
Web topic 4 style in html
Web topic 4  style in htmlWeb topic 4  style in html
Web topic 4 style in htmlCK Yang
 

Plus de CK Yang (10)

Web topic 20 2 html forms
Web topic 20 2  html formsWeb topic 20 2  html forms
Web topic 20 2 html forms
 
Web topic 13 html validation tools
Web topic 13  html validation toolsWeb topic 13  html validation tools
Web topic 13 html validation tools
 
Web topic 12 tables in html
Web topic 12  tables in htmlWeb topic 12  tables in html
Web topic 12 tables in html
 
Web topic 11 importance of html validation
Web topic 11  importance of html validationWeb topic 11  importance of html validation
Web topic 11 importance of html validation
 
Web topic 10 2 web design basics
Web topic 10 2  web design basicsWeb topic 10 2  web design basics
Web topic 10 2 web design basics
 
Web topic 9 navigation and link
Web topic 9  navigation and linkWeb topic 9  navigation and link
Web topic 9 navigation and link
 
Web topic 8 listings in html
Web topic 8  listings in htmlWeb topic 8  listings in html
Web topic 8 listings in html
 
Web topic 7 html tags for links
Web topic 7  html tags for linksWeb topic 7  html tags for links
Web topic 7 html tags for links
 
Web topic 5 text formatting
Web topic 5  text formattingWeb topic 5  text formatting
Web topic 5 text formatting
 
Web topic 4 style in html
Web topic 4  style in htmlWeb topic 4  style in html
Web topic 4 style in html
 

Dernier

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...apidays
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Bhuvaneswari Subramani
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...apidays
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsNanddeep Nachan
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...apidays
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxRustici Software
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistandanishmna97
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Zilliz
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesrafiqahmad00786416
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Zilliz
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfOrbitshub
 

Dernier (20)

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 

Web topic 26 browser compatibilty and security

  • 1. Web Authoring Topic 26 – Browser Compatibility & Security
  • 2. Objectives Students should able to: 1. Describe the necessity of performing a browser compatibility test. 2. Follow procedures to ensure the browser compatibility of websites.
  • 3. Browser Compatibility Browser testing is necessary because different web browsers render HTML and CSS code differently. If you’ve tried using different Web browsers to surf online, you’ve probably noticed that the same sites look a little different depending on which browser you’re using.
  • 4. Browser Compatibility That is because page display varies according to browser compatibility. Browser compatibility is the ability of the Web browser to properly interpret the hypertext markup language (HTML) that renders Web pages.
  • 5. Browser Compatibility Most sites are designed to look correct in Microsoft’s Internet Explorer, because it is believed to be the most ubiquitous browser. However, if you are a Web designer, your task is to code a site for maximum browser compatibility so that the pages look correct in other popular browsers such as FireFox, Safari, Google Chrome, etc.
  • 6. Browser Compatibility Browser compatibility creates potential headaches for webmasters. As newer popular scripting languages create flashy Web pages, older browsers may not understand the new code. For security reasons, many people disable scripting languages in their Web browsers, reducing browser compatibility.
  • 7. Browser Compatibility Aside from the difference in browsers, another factor that plays into browser compatibility is whether the surfer is using a standard PC and Windows, Linux, or a Mac computer. The same browser will render the pages a little differently from each of these platforms.
  • 8. Browser Compatibility Why browser testing is important? A web browser is a program that renders HTML, CSS and Javascript files according to a set of rules built into the application. Although web browser manufacturers use the recommended guidelines of the World Wide Web Consortium’s specifications for HTML and CSS, they can interpret these rules as required for their own purposes.
  • 9. Browser Compatibility Are web pages required to look the same in all browsers? In the case of technical considerations, you must determine whether you could achieve your goal of making a web page look the same. For example, the earliest browsers, such as Internet Explorer 3 or Netscape 3, do not support cascading style sheets.
  • 10. Browser Compatibility Are web pages required to look the same in all browsers? In the case of time/budget considerations, you might find technical solutions to make your pages look the same, but if it takes you more time than you have allotted to identify and fix the problem you should determine whether the solution is worth it.
  • 11. Browser Compatibility Attempting to make web pages look the same in multiple browsers is not as important due to several reasons: - People browse the web in different ways. - Monitor resolution. A website on a 17- inch monitor never looks the same as on a 27-inch monitor.
  • 12. Browser Compatibility - Text resizing. Users can override the page layout by increasing or decreasing text size. - Mobile devices, which represent a growing proportion of web browsers. - Client expectations, as clients are quite often less technically oriented than the web designer.
  • 13. Browser Compatibility Choose the level browser of browser support you want The level of browser use partially accounts for your decision to support it. The choice of which browsers to support becomes more difficult with more recent browsers.
  • 14. Browser Compatibility Browser Statistics Locating an accurate number of the web browsers currently in use today is difficult. Individual websites can gather accurate information on their user’s browser version. Visit to some of the sites listed below for an accurate estimate. www.statowl.com www.w3schools.com/browsers/browsers_stats.asp
  • 15. Browser Compatibility Tools to identify browser problems The first step in testing your page design is to view it in the desired browser. However, this is not always easy, for various reasons.
  • 16. Browser Compatibility • You might not have access to the browser, which is a common problem when testing for cross-browser compatibility. Cross-browser refers to the ability for a website to support all the web browsers.
  • 17. Browser Compatibility • Different windows operating system might not allow multiple versions of Internet Explorer to be installed on the same system. A common solution is to have access to a separate computer. Many web designers invest in an inexpensive computer mainly used for testing.
  • 18. Browser Compatibility However, this option may not be practical for several reasons: • Inefficiency. There might be a time lag involved in continuously changing computers. • The debugging process involves making many small changes. It could become tedious to change computers after every change.
  • 19. Browser Compatibility Virtualization solutions for Windows If a Windows computer is your primary device and you need to test your designs on a Mac, you will need a separate computer. You could have Windows 7 with a modern browser as your primary system, and a virtual machine that runs Windows XP with Internet Explorer 6.
  • 20. Browser Compatibility Windows Virtual PC Windows virtual PC is Microsoft’s native virtualization tool that allows you to install one or more virtual machines on your system. You need sufficient system resources, such as hard-drive space and memory, to make this a viable option.
  • 21. Browser Compatibility Browser compatibility applications An alternative is to use a browser testing application or service whose only job is to test web pages. Although the details differ, the basic concept is the same: to provide “snapshots” of your web pages in different browsers.
  • 22. Browser Compatibility Dreamweaver CS5 Dreamweaver CS5 has a new feature that will help you track down the most common bugs – and give you the fix for them as well. It is called Check Browser Compatibility and it is accessed through the Check Page icon in the Standard toolbar.
  • 23. Browser Compatibility Adobe BrowserLab BrowserLab lets you preview your page in a number of different browsers and platforms, so you are not limited to Mac or PC. The basic steps are to enter the URL of the page you would like to preview to generate a screenshot of the page. You can then compare the screenshots if you define multiple browsers.
  • 24. Browser Compatibility Microsoft SuperPreview SuperPreview is a Windows platform that only uses the browsers installed on a local system, but it also has a network feature similar to BrowserLab to let you view your page using Safari on OS X. SuperPreview will not solve the layout issues, but it helps you to easily identify them.
  • 25. Web Application Security Common vulnerabilities Some of the vulnerabilities you'll be looking for is: By far the most popular: cross-site scripting (XSS). XSS results from malicious scripts being injected into a Web site.
  • 26. Web Application Security Common vulnerabilities SQL injection is the second most popular vulnerability, primarily because of the growing dependence Web sites have on databases.
  • 27. Web Application Security Common vulnerabilities SQL injection is actually quite simple: By finding a Web site that connects to a database, malicious hackers execute an SQL query in a place that the developer never intended for the purpose of bypassing authentication or manipulating data.
  • 28. Web Application Security WebScarab WebScarab is first and foremost a proxy used to analyze browser requests and server replies. In addition to serving as a tool for packet analysis, you can use it to "fuzz" sites, looking for some of the same exploits as mentioned.