em múltiplos browsers,
em múltiplas plataformas
e em múltiplos dispositivos
Rogério Moraes de Carvalho
VITA Informática
@r...
Agenda
HTML5 (alguns recursos)
Demo - HTML5
CSS3 (alguns recursos)
Demo - CSS3
Suporte múltiplo
Demo - Suporte múltiplo
HTML5 (alguns recursos)
Uma Web mais semântica
Elemento header
Informações introdutórias ou
de navegação numa página ou
nu...
HTML5 (alguns recursos)
Uma Web mais semântica
Elemento section
Seção genérica de um
documento ou aplicação
Elemento nav
S...
Demo - HTML5
CSS3 (alguns recursos)
Formatação mais poderosa
Seletor E:firstchild (CSS2)
De um elemento E, primeiro
filho do seu elemen...
CSS3 (alguns recursos)
Formatação mais poderosa
Seletor E:nth-last-child(n)
(CSS3)
De um elemento E, o enésimo
filho do se...
CSS3 (alguns recursos)
Formatação mais poderosa
Seletor E F (CSS1)
Um elemento F descendente
de um elemento E
Seletor E > ...
CSS3 (alguns recursos)
Formatação mais poderosa
Seletor E ~ F (CSS3)
Um elemento F precedido por
um elemento E
Seletor E :...
CSS3 (alguns recursos)
Formatação mais poderosa
Propriedade border-radius
(CSS3)
Arredondamento de bordas
Função linear-gr...
CSS3 (alguns recursos)
Formatação mais poderosa
Propriedade text-shadow
(CSS3)
Sombra num texto
Propriedade box-shadow
(CS...
Demo - CSS3
Suporte múltiplo
Múltiplos browsers
Google Chrome
Microsoft Internet Explorer
Mozilla Firefox
Apple Safari
Opera
Suporte múltiplo
Múltiplas plataformas (desktop e móveis)
Windows Android
Mac OS X
Linux
Chrome OS BackBerry OS
Firefox OS
Suporte múltiplo
Múltiplos dispositivos
Desktops Smartphones
Notebooks Tablets
Netbooks Phablets
Ultrabooks
Chromebooks
Demo - Suporte múltiplo
Documentação
HTML5 Specification
http://www.w3.org/TR/html5/
CSS3 (por estabilidade das especificações)
http://www.w3.org/...
Próximos SlideShares
Carregando em…5
×

HTML5 + CSS3 em múltiplos browsers, em múltiplas plataformas e em múltiplos dispositivos

1.686 visualizações

Publicada em

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 18 de julho de 2013, das 21h30 às 22h30. A palestra foi apresentada no Cenário Pitágoras e foi transmitida ao vivo pela Internet, sendo que a gravação será disponibilizada posteriormente.
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, dentre outros recursos.

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.686
No SlideShare
0
A partir de incorporações
0
Número de incorporações
755
Ações
Compartilhamentos
0
Downloads
26
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

HTML5 + CSS3 em múltiplos browsers, em múltiplas plataformas e em múltiplos dispositivos

  1. 1. em múltiplos browsers, em múltiplas plataformas e em múltiplos dispositivos Rogério Moraes de Carvalho VITA Informática @rogeriom rogeriomc.wordpress.com
  2. 2. Agenda HTML5 (alguns recursos) Demo - HTML5 CSS3 (alguns recursos) Demo - CSS3 Suporte múltiplo Demo - Suporte múltiplo
  3. 3. HTML5 (alguns recursos) Uma Web mais semântica Elemento header Informações introdutórias ou de navegação numa página ou num artigo Elemento footer Informações finais numa página ou num artigo Elemento article Composição autônoma
  4. 4. HTML5 (alguns recursos) Uma Web mais semântica Elemento section Seção genérica de um documento ou aplicação Elemento nav Seção da página com links para navegação Elemento aside Seção separada do conteúdo (comum em barras laterais)
  5. 5. Demo - HTML5
  6. 6. CSS3 (alguns recursos) Formatação mais poderosa Seletor E:firstchild (CSS2) De um elemento E, primeiro filho do seu elemento pai Seletor E:lastchild (CSS3) De um elemento E, último filho do seu elemento pai Seletor E:nth-child(n) (CSS3) De um elemento E, enésimo filho do seu elemento pai
  7. 7. CSS3 (alguns recursos) Formatação mais poderosa Seletor E:nth-last-child(n) (CSS3) De um elemento E, o enésimo filho do seu elemento pai, contando a partir do último Seletor E:checked (CSS3) Um elemento E da interface com o usuário que está checado Exemplo: checkbox ou radio-button
  8. 8. CSS3 (alguns recursos) Formatação mais poderosa Seletor E F (CSS1) Um elemento F descendente de um elemento E Seletor E > F (CSS2) Um elemento F filho de um elemento E Seletor E + F (CSS2) Um elemento F imediatamente precedido por um elemento E
  9. 9. CSS3 (alguns recursos) Formatação mais poderosa Seletor E ~ F (CSS3) Um elemento F precedido por um elemento E Seletor E :: before (CSS2) Conteúdo gerado antes do elemento E Seletor E :: after (CSS2) Conteúdo gerado depois do elemento E
  10. 10. CSS3 (alguns recursos) Formatação mais poderosa Propriedade border-radius (CSS3) Arredondamento de bordas Função linear-gradient (CSS3) Gradiente linear de cores Função radial-gradient (CSS3) Gradiente radial de cores
  11. 11. CSS3 (alguns recursos) Formatação mais poderosa Propriedade text-shadow (CSS3) Sombra num texto Propriedade box-shadow (CSS3) Sombra numa caixa Propriedade transition (CSS3) Efeito de transição em algumas propriedades
  12. 12. Demo - CSS3
  13. 13. Suporte múltiplo Múltiplos browsers Google Chrome Microsoft Internet Explorer Mozilla Firefox Apple Safari Opera
  14. 14. Suporte múltiplo Múltiplas plataformas (desktop e móveis) Windows Android Mac OS X Linux Chrome OS BackBerry OS Firefox OS
  15. 15. Suporte múltiplo Múltiplos dispositivos Desktops Smartphones Notebooks Tablets Netbooks Phablets Ultrabooks Chromebooks
  16. 16. Demo - Suporte múltiplo
  17. 17. Documentação HTML5 Specification http://www.w3.org/TR/html5/ CSS3 (por estabilidade das especificações) http://www.w3.org/TR/CSS/

×