SlideShare una empresa de Scribd logo
1 de 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.

Más contenido relacionado

La actualidad más candente

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
 

La actualidad más candente (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
 

Destacado

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
 

Destacado (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
 

Similar a 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
 

Similar a 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...
 

Más 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
 

Más 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
 

Último

WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesZilliz
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 

Último (20)

WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector Databases
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 

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.