Caio Cesar Gomes
Digital Front End Engineer
RECURSOS
HTML 5
• Hypertext Markup Language
• 28 de Outubro de 2014 - se torna recomendação oficial do
W3C
• Traz uma semântica mel...
HTML 5 – Novos Elementos
• Elementos Semânticos: <header>, <footer>, <article>, e
<section>
• Atributos: number, date, tim...
HTML 5 – Novas API’s
• HTML Geolocation
• HTML Drag and Drop
• HTML Local Storage
• HTML Application Cache
• HTML Web Work...
CSS 3
• Cascading Style Sheets Level 3
• Ainda não é recomendação oficial da W3C
• Muitos módulos já são recomendações
• V...
CSS 3 - Módulos
• Seletores
• Backgrounds e Bordas
• Efeitos de Texto
• Transfomrações 2D/3D
• Animações
• Layout de Múlti...
CSS 3 - Compatibilidade
• Internet Explorer 7 e 8 – Muito pouco ou quase nenhum
suporte.
• Internet Explorer 9 – Suporta b...
CSS 3 - Prefixos
• Safari e Chrome: -webkit-
• Firefox: -moz-
• Internet Explorer: -ms-
• Opera: -o-
• Opera e o Internet ...
RECURSOS
HTML 5 - Figure
A tag <figure> indica um campo para imagem e a
<figcaption> uma legenda.
Exemplo:
<figure>
<img src="path/...
HTML 5 – E-mail
Para os campos de input, agora é possível colocar o tipo de
e-mail, que, inclusive permite ao próprio nave...
HTML 5 – Header e Footer
Foram implementadas as tags <header> e <footer> para
definir de forma semântica o cabeçalho e rod...
HTML 5 – Required
Para os campos de input pertencentes a um formulário,
agora é possível colocar o atributo required para ...
HTML 5 – Áudio
Foi implementada a tag <audio> para eliminar o uso de
objetos ou flash utilizados anteriormente.
Exemplo:
<...
HTML 5 – Vídeo
Foi implementada a tag <video> com o objetivo de eliminar
o uso de objetos e flash amplamente utilizados.
E...
HTML 5 - Range
Para os campos de input, agora é possível colocar o tipo de
range que cria um campo de seleção entre dois n...
HTML 5 – Output
A tag <output> foi criada representar o resultado de
cálculos matemáticos.
Exemplo:
<p>
10 + 5 = <output n...
CSS 3 – Media Queries
As regras de @media são utilizadas para especificar
determinados estilos para a resolução estipulada...
CSS 3 – Font Face
A regra @font-face permite incorporar as páginas fontes
que não são nativas dos sistemas operacionais.
E...
CSS 3 – Múltiplas Colunas
Utiliza as propriedades column-count, column-gap,
column-rule-style, column-rule-width, column-r...
CSS 3 – Múltiplas Colunas
A regra @font-face permite incorporar as páginas fontes
que não são nativas dos sistemas operaci...
CSS 3 – Border Radius
A propriedade border-radius é utilizada para arredondar os
cantos dos elementos e talvez uma das mai...
CSS 3 – Box Shadow
A propriedade box-shadow é utilizada para criar
sombreamento em elementos.
Exemplo:
div {
box-shadow: 1...
CSS 3 – Text Shadow
A propriedade text-shadow é utilizada criar o efeito de
sombreamento nos textos.
Exemplo:
h1 {
text-sh...
CSS 3 – Cores RGBA
Cores no formato RGBA permitem a definição de cores
utilizando a escala RGB adicionando o campo de Alph...
CSS 3 – Resize
A propriedade resize é utilizada para definir se determinado
elemento pode ser redimensionado.
Exemplo:
div...
CSS 3 – Word Wrap
A propriedade word-wrap é utilizada quando se tem frases
longas e é usada para definir se elas podem ser...
CSS 3 – Transition
A propriedade transition é utilizada para definir o tipo de
animação, o tempo e em que propriedades ela...
CSS 3 – Transition
s
CSS 3 – Transform
A propriedade transform é utilizada para definir o tipo de
transformação que alguns elementos podem ter,...
REFERÊNCIAS
Referências
• http://tableless.com.br/agora-sim-o-html5-se-tornou-oficialmente-uma-recomendacao/
• https://pt.wikipedia.or...
HTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizados
Próximos SlideShares
Carregando em…5
×

HTML5 e CSS3 - Recursos mais utilizados

360 visualizações

Publicada em

Apresentação feita para o Digital Thinking com enfoque nos novos recursos disponíveis através do HTML5 e CSS3

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

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

Nenhuma nota no slide
  • Web Worker: Serviços JavaScript que é executado sem interferir no processamento da página
    SSE (Server-Sent Events): Permite puxar atualizações do servidor, como, por exemplo, atualizações do facebook e twitter
  • HTML5 e CSS3 - Recursos mais utilizados

    1. 1. Caio Cesar Gomes Digital Front End Engineer RECURSOS
    2. 2. HTML 5 • Hypertext Markup Language • 28 de Outubro de 2014 - se torna recomendação oficial do W3C • Traz uma semântica melhor • Suporte a elementos como vídeo e áudio
    3. 3. HTML 5 – Novos Elementos • Elementos Semânticos: <header>, <footer>, <article>, e <section> • Atributos: number, date, time, calendar, e range • Elementos Gráficos: <svg> e <canvas> • Elementos Multimedia: <audio> e <video>
    4. 4. HTML 5 – Novas API’s • HTML Geolocation • HTML Drag and Drop • HTML Local Storage • HTML Application Cache • HTML Web Workers • HTML SSE
    5. 5. CSS 3 • Cascading Style Sheets Level 3 • Ainda não é recomendação oficial da W3C • Muitos módulos já são recomendações • Versão recomendada atualmente é CSS 2.1
    6. 6. CSS 3 - Módulos • Seletores • Backgrounds e Bordas • Efeitos de Texto • Transfomrações 2D/3D • Animações • Layout de Múltiplas Colunas • Interface de Usuário • Entre outros…
    7. 7. CSS 3 - Compatibilidade • Internet Explorer 7 e 8 – Muito pouco ou quase nenhum suporte. • Internet Explorer 9 – Suporta bem. • Firefox 3 – Suporta razoavelmente bem. • Firefox 4 – Suporta muito bem. • Safari, Chrome e Opera – Suportam muito bem.
    8. 8. CSS 3 - Prefixos • Safari e Chrome: -webkit- • Firefox: -moz- • Internet Explorer: -ms- • Opera: -o- • Opera e o Internet Explorer 9 não precisam dos prefixos.
    9. 9. RECURSOS
    10. 10. HTML 5 - Figure A tag <figure> indica um campo para imagem e a <figcaption> uma legenda. Exemplo: <figure> <img src="path/to/image" alt="Sobre a Imagem" /> <figcaption> <p>Isso é uma imagem de algo interessante. </p> </figcaption> </figure>
    11. 11. HTML 5 – E-mail Para os campos de input, agora é possível colocar o tipo de e-mail, que, inclusive permite ao próprio navegador fazer validação do campo. Exemplo: <input id="email" name="email" type="email" />
    12. 12. HTML 5 – Header e Footer Foram implementadas as tags <header> e <footer> para definir de forma semântica o cabeçalho e rodapé das páginas. Exemplo: <header>…</header> <footer>…</footer>
    13. 13. HTML 5 – Required Para os campos de input pertencentes a um formulário, agora é possível colocar o atributo required para que o campo seja validado antes do formulário ser submetido. Exemplo: <input id="email" name="email“ required type="email" />
    14. 14. HTML 5 – Áudio Foi implementada a tag <audio> para eliminar o uso de objetos ou flash utilizados anteriormente. Exemplo: <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
    15. 15. HTML 5 – Vídeo Foi implementada a tag <video> com o objetivo de eliminar o uso de objetos e flash amplamente utilizados. Exemplo: <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
    16. 16. HTML 5 - Range Para os campos de input, agora é possível colocar o tipo de range que cria um campo de seleção entre dois números. Exemplo: <input type="range" name="range" min="0" max="10" step="1" value="">
    17. 17. HTML 5 – Output A tag <output> foi criada representar o resultado de cálculos matemáticos. Exemplo: <p> 10 + 5 = <output name="sum"></output> </p>
    18. 18. CSS 3 – Media Queries As regras de @media são utilizadas para especificar determinados estilos para a resolução estipulada. Exemplo: @media screen and (min-width: 480px) { body { background-color: lightgreen; } }
    19. 19. CSS 3 – Font Face A regra @font-face permite incorporar as páginas fontes que não são nativas dos sistemas operacionais. Exemplo: @font-face { font-family: myFirstFont; src: url(sansation_light.woff); }
    20. 20. CSS 3 – Múltiplas Colunas Utiliza as propriedades column-count, column-gap, column-rule-style, column-rule-width, column-rule-color, column-rule, column-span, column-width para criar múltiplas colunas de conteúdo através do css. Exemplo: div { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; }
    21. 21. CSS 3 – Múltiplas Colunas A regra @font-face permite incorporar as páginas fontes que não são nativas dos sistemas operacionais. Exemplo: @font-face { font-family: myFirstFont; src: url(sansation_light.woff); }
    22. 22. CSS 3 – Border Radius A propriedade border-radius é utilizada para arredondar os cantos dos elementos e talvez uma das mais utilizadas do CSS 3. Exemplo: div { border: 2px solid; border-radius: 25px; }
    23. 23. CSS 3 – Box Shadow A propriedade box-shadow é utilizada para criar sombreamento em elementos. Exemplo: div { box-shadow: 10px 10px 5px #888888; }
    24. 24. CSS 3 – Text Shadow A propriedade text-shadow é utilizada criar o efeito de sombreamento nos textos. Exemplo: h1 { text-shadow: 2px 2px #ff0000; }
    25. 25. CSS 3 – Cores RGBA Cores no formato RGBA permitem a definição de cores utilizando a escala RGB adicionando o campo de Alpha para fornecer transparência através do CSS. Recurso suportado nos navegadores: IE9+, Firefox 3+, Chrome, Safari, e Opera 10+ Exemplo: #p1 {background-color: rgba(255, 0, 0, 0.3);}
    26. 26. CSS 3 – Resize A propriedade resize é utilizada para definir se determinado elemento pode ser redimensionado. Exemplo: div { resize: both; overflow: auto; }
    27. 27. CSS 3 – Word Wrap A propriedade word-wrap é utilizada quando se tem frases longas e é usada para definir se elas podem ser quebradas para a próxima linha. Exemplo: p.test { word-wrap: break-word; }
    28. 28. CSS 3 – Transition A propriedade transition é utilizada para definir o tipo de animação, o tempo e em que propriedades elas serão aplicadas. Exemplo: div { width: 100px; height: 100px; background: red; -webkit-transition: width 2s ease; /* Safari */ transition: width 2s ease; }
    29. 29. CSS 3 – Transition s
    30. 30. CSS 3 – Transform A propriedade transform é utilizada para definir o tipo de transformação que alguns elementos podem ter, como, por exemplo: blur, rotação, scale, outros. Exemplo: div { transform: rotate(7deg); }
    31. 31. REFERÊNCIAS
    32. 32. Referências • http://tableless.com.br/agora-sim-o-html5-se-tornou-oficialmente-uma-recomendacao/ • https://pt.wikipedia.org/wiki/HTML5 • https://pt.wikipedia.org/wiki/CSS3 • http://www.w3schools.com/css/css3_intro.asp • http://www.w3.org/TR/#tr_CSS • http://www.w3.org/TR/#tr_HTML • http://www.html5rocks.com/pt/tutorials/workers/basics/#toc-introduction-jsthreading • http://code.tutsplus.com/pt/tutorials/28-html5-features-tips-and-techniques-you-must-know--net- 13520 • http://thiagothamiel.com/2011/11/24/o-que-o-css3-tem-de-novo/ • http://www.devmedia.com.br/css3-utilizando-recursos-de-css-e-seletores-para-formatacao-de- conteudo-net-magazine-79/18796 • http://tableless.com.br/prefixos-dos-browsers-a-web-precisa-de-voce/ • http://thiagothamiel.com/2011/11/24/o-que-o-css3-tem-de-novo/ • http://www.the-art-of-web.com/css/css-animation/

    ×