SlideShare uma empresa Scribd logo
1 de 22
Crossbrowsing Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br
O que é? ,[object Object],[object Object]
Exemplos ,[object Object],[object Object],[object Object],[object Object]
Exemplos ,[object Object],[object Object],[object Object]
Marketshare atual dos navegadores Fonte: www.W3Schools.com/browsers | 10/4/2007 - 15h
Porque se preocupar com o crossbrowsing Fonte: www.css3.info/kill-ie6-to-let-css3-live  12/7/2007 18h
Como testar seu site em diversos navegadores  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Praticando... Crossbrowsing
Qual a jeito certo para começar
Ferramentas interessantes ,[object Object],[object Object],[object Object],[object Object]
Box model ,[object Object],Fonte:  http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug#_note-2  | 10/4/2007 – 17h
CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML 5 ,[object Object],[object Object],[object Object],[object Object]
Como diferenciar: Javascript.. ,[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],Como diferenciar: Hacks <style type=&quot;text/css&quot;> html > body { background: red;  } body { background: yellow;  } </style> ,[object Object],[object Object],[object Object]
Como diferenciar:  Conditional Comments – o segredo! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Na prática ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Estilos especiais ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Conclusões Crossbrowsing
Livros recomendados ,[object Object],[object Object],[object Object]
Livros recomendados ,[object Object],[object Object],[object Object]
Crossbrowsing Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br

Mais conteúdo relacionado

Mais procurados

Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignGustavo Zimmermann
 
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignGustavo Zimmermann
 
Css grid layout x flex layout x bootstrap
Css   grid layout x flex layout x bootstrapCss   grid layout x flex layout x bootstrap
Css grid layout x flex layout x bootstrapGustavo Lopes
 
Mini-Curso sobre Bootstrap 3
Mini-Curso sobre Bootstrap 3Mini-Curso sobre Bootstrap 3
Mini-Curso sobre Bootstrap 3Diego Doná
 
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!Thiago Nascimento Oliveira
 
Sistema gerenciador de conteúdo
Sistema gerenciador de conteúdoSistema gerenciador de conteúdo
Sistema gerenciador de conteúdoBreno Vitorino
 
Desenvolvimento Ágil com Twitter Bootstrap
Desenvolvimento Ágil com Twitter BootstrapDesenvolvimento Ágil com Twitter Bootstrap
Desenvolvimento Ágil com Twitter BootstrapFlavio Souza
 
Usando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter BootstrapUsando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter BootstrapFlavio Souza
 
PHP - Aula 02 - O que é o PHP?
PHP - Aula 02 - O que é o PHP?PHP - Aula 02 - O que é o PHP?
PHP - Aula 02 - O que é o PHP?Welington Sampaio
 
A utilização do Bootstrap Para a Otimização de Páginas
A utilização do Bootstrap Para a Otimização de PáginasA utilização do Bootstrap Para a Otimização de Páginas
A utilização do Bootstrap Para a Otimização de PáginasRamon Sousa
 
Utilizando Polymer em aplicações móveis
Utilizando Polymer em aplicações móveisUtilizando Polymer em aplicações móveis
Utilizando Polymer em aplicações móveisStefan Horochovec
 
Desmistificando Progressive Web Apps - PWA
Desmistificando Progressive Web Apps - PWADesmistificando Progressive Web Apps - PWA
Desmistificando Progressive Web Apps - PWAStefan Horochovec
 

Mais procurados (20)

Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX Design
 
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
 
Css grid layout x flex layout x bootstrap
Css   grid layout x flex layout x bootstrapCss   grid layout x flex layout x bootstrap
Css grid layout x flex layout x bootstrap
 
web2.0.ppt
web2.0.pptweb2.0.ppt
web2.0.ppt
 
Mini-Curso sobre Bootstrap 3
Mini-Curso sobre Bootstrap 3Mini-Curso sobre Bootstrap 3
Mini-Curso sobre Bootstrap 3
 
Bootstrap 4
Bootstrap 4Bootstrap 4
Bootstrap 4
 
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
 
Sistema gerenciador de conteúdo
Sistema gerenciador de conteúdoSistema gerenciador de conteúdo
Sistema gerenciador de conteúdo
 
Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)
 
Introdução ao PHP
Introdução ao PHPIntrodução ao PHP
Introdução ao PHP
 
Desenvolvimento Ágil com Twitter Bootstrap
Desenvolvimento Ágil com Twitter BootstrapDesenvolvimento Ágil com Twitter Bootstrap
Desenvolvimento Ágil com Twitter Bootstrap
 
Usando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter BootstrapUsando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter Bootstrap
 
PHP - Aula 02 - O que é o PHP?
PHP - Aula 02 - O que é o PHP?PHP - Aula 02 - O que é o PHP?
PHP - Aula 02 - O que é o PHP?
 
A utilização do Bootstrap Para a Otimização de Páginas
A utilização do Bootstrap Para a Otimização de PáginasA utilização do Bootstrap Para a Otimização de Páginas
A utilização do Bootstrap Para a Otimização de Páginas
 
It's Javascript Time
It's Javascript TimeIt's Javascript Time
It's Javascript Time
 
Ppt Flex Mania
Ppt Flex ManiaPpt Flex Mania
Ppt Flex Mania
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
Aplicacoes responsivas
Aplicacoes responsivasAplicacoes responsivas
Aplicacoes responsivas
 
Utilizando Polymer em aplicações móveis
Utilizando Polymer em aplicações móveisUtilizando Polymer em aplicações móveis
Utilizando Polymer em aplicações móveis
 
Desmistificando Progressive Web Apps - PWA
Desmistificando Progressive Web Apps - PWADesmistificando Progressive Web Apps - PWA
Desmistificando Progressive Web Apps - PWA
 

Destaque

Approaches to online collaboration
Approaches to online collaborationApproaches to online collaboration
Approaches to online collaborationKate Carruthers
 
Time-A Reflection
Time-A ReflectionTime-A Reflection
Time-A Reflectionjdmcd
 
Ops Fup Sample
Ops Fup SampleOps Fup Sample
Ops Fup Samplekholle
 
Otamanhodaspessoas Melodyoflove
Otamanhodaspessoas MelodyofloveOtamanhodaspessoas Melodyoflove
Otamanhodaspessoas MelodyofloveZélia Cordeiro
 
Trabajo De Computo
Trabajo De ComputoTrabajo De Computo
Trabajo De Computoguest3f1015
 
Taking disruption for granted
Taking disruption for grantedTaking disruption for granted
Taking disruption for grantedKate Carruthers
 

Destaque (6)

Approaches to online collaboration
Approaches to online collaborationApproaches to online collaboration
Approaches to online collaboration
 
Time-A Reflection
Time-A ReflectionTime-A Reflection
Time-A Reflection
 
Ops Fup Sample
Ops Fup SampleOps Fup Sample
Ops Fup Sample
 
Otamanhodaspessoas Melodyoflove
Otamanhodaspessoas MelodyofloveOtamanhodaspessoas Melodyoflove
Otamanhodaspessoas Melodyoflove
 
Trabajo De Computo
Trabajo De ComputoTrabajo De Computo
Trabajo De Computo
 
Taking disruption for granted
Taking disruption for grantedTaking disruption for granted
Taking disruption for granted
 

Semelhante a Palestra / SDD / Crossbrowsing

Workshop Ferramentas 2.0para Ideias 2.0
Workshop Ferramentas 2.0para Ideias 2.0 Workshop Ferramentas 2.0para Ideias 2.0
Workshop Ferramentas 2.0para Ideias 2.0 Serpentina
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aulaclodiney cruz
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sitesthiagolima
 
Tutorial sobre Bootstrap
Tutorial sobre BootstrapTutorial sobre Bootstrap
Tutorial sobre BootstrapIvo Calado
 
Workshop o ABC da Web 2.0 para PME
Workshop o ABC da Web 2.0 para PMEWorkshop o ABC da Web 2.0 para PME
Workshop o ABC da Web 2.0 para PMESerpentina
 
Visão Geral do HTML5 e do Internet Explorer 9
Visão Geral do HTML5 e do Internet Explorer 9Visão Geral do HTML5 e do Internet Explorer 9
Visão Geral do HTML5 e do Internet Explorer 9Rodrigo Kono
 
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúClécio Bachini
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal Clécio Bachini
 
HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012Fábio Flatschart
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBFábio Flatschart
 
Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Rodrigo Urubatan
 
Javascript State of the Union 2015
Javascript State of the Union 2015Javascript State of the Union 2015
Javascript State of the Union 2015Huge
 
Html5 pt - Offline Apps
Html5 pt - Offline AppsHtml5 pt - Offline Apps
Html5 pt - Offline AppsByclosure
 
EDTED SP - HTML 5 e CSS 3 - Junho de 2011
EDTED SP - HTML 5 e CSS 3 - Junho de 2011EDTED SP - HTML 5 e CSS 3 - Junho de 2011
EDTED SP - HTML 5 e CSS 3 - Junho de 2011Leonardo Balter
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaDiego Cavalca
 
Raymundo ferreira desenvolvendo apps com html e java script no windows phon...
Raymundo ferreira   desenvolvendo apps com html e java script no windows phon...Raymundo ferreira   desenvolvendo apps com html e java script no windows phon...
Raymundo ferreira desenvolvendo apps com html e java script no windows phon...INdT
 
O que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seoO que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seointrofini
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxLuiz Antonio
 

Semelhante a Palestra / SDD / Crossbrowsing (20)

Html5
Html5Html5
Html5
 
Workshop Ferramentas 2.0para Ideias 2.0
Workshop Ferramentas 2.0para Ideias 2.0 Workshop Ferramentas 2.0para Ideias 2.0
Workshop Ferramentas 2.0para Ideias 2.0
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aula
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Tutorial sobre Bootstrap
Tutorial sobre BootstrapTutorial sobre Bootstrap
Tutorial sobre Bootstrap
 
HTML 5 e Open Web Platform
HTML 5 e Open Web PlatformHTML 5 e Open Web Platform
HTML 5 e Open Web Platform
 
Workshop o ABC da Web 2.0 para PME
Workshop o ABC da Web 2.0 para PMEWorkshop o ABC da Web 2.0 para PME
Workshop o ABC da Web 2.0 para PME
 
Visão Geral do HTML5 e do Internet Explorer 9
Visão Geral do HTML5 e do Internet Explorer 9Visão Geral do HTML5 e do Internet Explorer 9
Visão Geral do HTML5 e do Internet Explorer 9
 
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - Jaú
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
 
HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
 
Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_
 
Javascript State of the Union 2015
Javascript State of the Union 2015Javascript State of the Union 2015
Javascript State of the Union 2015
 
Html5 pt - Offline Apps
Html5 pt - Offline AppsHtml5 pt - Offline Apps
Html5 pt - Offline Apps
 
EDTED SP - HTML 5 e CSS 3 - Junho de 2011
EDTED SP - HTML 5 e CSS 3 - Junho de 2011EDTED SP - HTML 5 e CSS 3 - Junho de 2011
EDTED SP - HTML 5 e CSS 3 - Junho de 2011
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
 
Raymundo ferreira desenvolvendo apps com html e java script no windows phon...
Raymundo ferreira   desenvolvendo apps com html e java script no windows phon...Raymundo ferreira   desenvolvendo apps com html e java script no windows phon...
Raymundo ferreira desenvolvendo apps com html e java script no windows phon...
 
O que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seoO que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seo
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 

Último

Certificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdfCertificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdfLarissa Souza
 
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdf
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdfConcurso Caixa TI - Imersão Final - Rogério Araújo.pdf
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdfGuilhermeRodrigues896381
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Dirceu Resende
 
Apresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdfApresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdfCarlos Gomes
 
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)Alessandro Almeida
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfRodolpho Concurde
 

Último (6)

Certificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdfCertificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdf
 
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdf
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdfConcurso Caixa TI - Imersão Final - Rogério Araújo.pdf
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdf
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 
Apresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdfApresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdf
 
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
 

Palestra / SDD / Crossbrowsing