The Developer's Conference (TDC) 2013 - Florianópolis: HTML5 + CSS3 em múltiplos browsers, em múltiplas plataformas e em múltiplos dispositivos

1,277 views
1,212 views

Published on

Eu apresentei a minha palestra sobre desenvolvimento Web com HTML5 e CSS3 voltado para múltiplos browsers, em múltiplas plataformas e em múltiplos dispositivos no dia 26 de maio de 2013, das 11h10 às 12h. A palestra foi apresentada no auditório Stadium e foi gravada para ser disponibilizada depois. Na palestra, eu apresentei alguns novos elementos do HTML5 que permitem desenvolver páginas Web mais semânticas, como: header, footor, article, section, nav e aside. Depois, eu apresentei alguns recursos de módulos das especificações que constituem a CSS3, como os novos seletores, arredondamento de bordas com a propriedade border-radius, gradientes de cores lineares com a função linear-gradient e radial com a função radial-gradient, sombras em textos com a propriedade text-shadow e em caixas com a propriedade box-shadow, efeitos de transição em algumas propriedades com a propriedade transition.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,277
On SlideShare
0
From Embeds
0
Number of Embeds
726
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The Developer's Conference (TDC) 2013 - Florianópolis: HTML5 + CSS3 em múltiplos browsers, em múltiplas plataformas e em múltiplos dispositivos

  1. 1. Globalcode – Open4educationem múltiplos browsers,em múltiplas plataformase em múltiplos dispositivosRogério Moraes de CarvalhoVITA Informática@rogeriomrogeriomc.wordpress.com
  2. 2. Globalcode – Open4educationAgendaHTML5 (alguns recursos)Demo - HTML5CSS3 (alguns recursos)Demo - CSS3Suporte múltiploDemo - Suporte múltiplo
  3. 3. Globalcode – Open4educationHTML5 (alguns recursos)Uma Web mais semânticaElemento headerInformações introdutórias oude navegação numa página ounum artigoElemento footerInformações finais numapágina ou num artigoElemento articleComposição autônoma
  4. 4. Globalcode – Open4educationHTML5 (alguns recursos)Uma Web mais semânticaElemento sectionSeção genérica de umdocumento ou aplicaçãoElemento navSeção da página com linkspara navegaçãoElemento asideSeção separada do conteúdo(comum em barras laterais)
  5. 5. Globalcode – Open4educationDemo - HTML5
  6. 6. Globalcode – Open4educationCSS3 (alguns recursos)Formatação mais poderosaSeletor E:firstchild (CSS2)De um elemento E, primeirofilho do seu elemento paiSeletor E:lastchild (CSS3)De um elemento E, último filhodo seu elemento paiSeletor E:nth-child(n) (CSS3)De um elemento E, enésimofilho do seu elemento pai
  7. 7. Globalcode – Open4educationCSS3 (alguns recursos)Formatação mais poderosaSeletor E:nth-last-child(n)(CSS3)De um elemento E, o enésimofilho do seu elemento pai,contando a partir do últimoSeletor E:checked (CSS3)Um elemento E da interfacecom o usuário que estáchecadoExemplo: checkbox ou radio-button
  8. 8. Globalcode – Open4educationCSS3 (alguns recursos)Formatação mais poderosaSeletor E F (CSS1)Um elemento F descendentede um elemento ESeletor E > F (CSS2)Um elemento F filho de umelemento ESeletor E + F (CSS2)Um elemento F imediatamenteprecedido por um elemento E
  9. 9. Globalcode – Open4educationCSS3 (alguns recursos)Formatação mais poderosaSeletor E ~ F (CSS3)Um elemento F precedido porum elemento ESeletor E :: before (CSS2)Conteúdo gerado antes doelemento ESeletor E :: after (CSS2)Conteúdo gerado depois doelemento E
  10. 10. Globalcode – Open4educationCSS3 (alguns recursos)Formatação mais poderosaPropriedade border-radius(CSS3)Arredondamento de bordasFunção linear-gradient (CSS3)Gradiente linear de coresFunção radial-gradient (CSS3)Gradiente radial de cores
  11. 11. Globalcode – Open4educationCSS3 (alguns recursos)Formatação mais poderosaPropriedade text-shadow(CSS3)Sombra num textoPropriedade box-shadow(CSS3)Sombra numa caixaPropriedade transition (CSS3)Efeito de transição em algumaspropriedades
  12. 12. Globalcode – Open4educationDemo - CSS3
  13. 13. Globalcode – Open4educationSuporte múltiploMúltiplos browsersGoogle ChromeMicrosoft Internet ExplorerMozilla FirefoxApple SafariOpera
  14. 14. Globalcode – Open4educationSuporte múltiploMúltiplas plataformas (desktop e móveis)Windows AndroidMac OS XLinuxChrome OS BackBerry OSFirefox OS
  15. 15. Globalcode – Open4educationSuporte múltiploMúltiplos dispositivosDesktops SmartphonesNotebooks TabletsNetbooks PhabletsUltrabooksChromebooks
  16. 16. Globalcode – Open4educationDemo - Suporte múltiplo
  17. 17. Globalcode – Open4educationDocumentaçãoHTML5 Specificationhttp://www.w3.org/TR/html5/CSS3 (por estabilidade das especificações)http://www.w3.org/TR/CSS/

×