Your SlideShare is downloading. ×
0
O próximo passo da WEB                 Emiliano Barreto                          @ebarreto                  emiliano@celul...
• Proposta de trabalhar com as mais atuais  tecnologias e softwares• Atuação na pesquisa e formação de  profissionais• Con...
Instrutores• CERTIFICADOS• COM EXPERIENCIA DE MERCADO• DIDÁTICOS E PRONTOS PARA TIRAR TODAS  AS DÚVIDAS• INSTRUTORES DA CE...
Diferenciais• Poucos alunos por turma• Ambiente pessoal e compromissado com o  aprendizado na prática• Aulas 100% práticas...
HTML 5 ....PORQUE, ONDE,   COMO E QUANDO ?
NEGÓCIOS ONLINEMUITAS EMPRESAS DESCOBRIRAM        QUE A INTERNET
Enxurradade informações e serviços
NOVAS DEMANDAS DE PROFISSINAIS
Novas oportunidades
Tudo tem que ser mais fácil
Tudo tem que ser mais fácil
PENSE MULTI
MULTI DEVICES
MULTI DEVICES
MULTI DEVICES
E quem vai acessar o seu site ?• Somente quem estiver no pc / windows  com internet explorer ????
Conheça o HTML 5
Apresentando        HTML 5.0É A MAIS NOVA ATUALIZAÇÃO DA        LINGUAGEM HTML
Porque aprender a desenvolver   utilizando HTML 5.0 ???
Alguns motivos• Mercado : falta de cases e profissionais  bons nacionais na área• Mais poder e recursos no HTML, CSS E  JA...
HTML5 ENGLOBA
Principais Características• Web Semântica: melhoria na estrutura  com novas tags• Mais poder com visual com CSS3• Recursos...
Estrutura do HTML 5<!DOCTYPE html><html lang=“en”><head><title></title><meta charset=“utf-8”></head><body></body></html>
Estrutura do HTML 5<header id="topo"> topo do site</header><nav id="menu"> menu do site</nav><section id="conteudo">area d...
Estrutura do HTML 5.0
Video Tag<video src=“videos/video.mp4” id”myVideo”  preload=“auto” type=“video/mp4”></video>
Border radius#box {-webkit-border-raduis:15px;Moz--border-raduis:15px;border-raduis:15px;
Transforms#box{    -webkit-transform:rotateY(360deg);    transform:rotateY(360deg);}
Border radius
Animações e transições     com CSS3
Animações com scroll
Scroll books
Transitions
Gráficos ricos e dinâmicosÁudio e VídeoCanvas gerando imagem3D com Web GLSVG gerando vetorCSS3 com efeitos e 3D/Perspectiva
Criando gráficosCanvas API
@Media
WEB APPS
GEO LOCATION
Já posso utilizaresses recursos ?
Sim, mais antes....Adequação e necessidade para cada projetoPolyfills – modernizr.comShimsGoogle html
Calma calma......Pode sim mais          antes....Adequação e necessidade para cada projetoPolyfills – modernizr.comShimsGo...
Calma calma......Pode sim mais          antes....Adequação e necessidade para cada projetoPolyfills – modernizr.comShimsGo...
Market Share dos navegadores Estatísticas por versões (maio de 2011)                                Dados de maio/11 – by ...
Market Share dos navegadores Estatísticas por versões (maio de 2012)                                Dados de maio/12 – by ...
Market Share dos navegadores   Quadro geral em 2012                    Dados de maio/12 – by netmarketingshare
Market share dos navegadores•   Ie 6•   Ie 8•   Firefox•   Chome•   safari
E o Flash morreu ?????
E o Flash morreu ?????
Faltam recursos e           implementações•   Acesso a Web Cam•   Falta de softwares fáceis•   Incompatibilidade de Navega...
Faltam elementos a serem            concluidos<device> - microfone e cameras           HTML5 – “FUTURO” PRÓXIMO DA WEB   F...
NOVAS DEMANDAS DE PROFISSINAIS
Novos horizontes e possibilidades
Você está pronto para o próximo passo ?
HTML5 e CSS 3O Próximo passo da WEB        Obrigado                      Emiliano Barreto                    emiliano@celu...
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Upcoming SlideShare
Loading in...5
×

Palestra html5 e CSS3

581

Published on

Apresentação sobre HTML5 e CSS3 realizada em julho de 2012 por Emiliano Barreto , no auditório da CELULA CURSOS em São Paulo

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
581
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
28
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Palestra html5 e CSS3"

  1. 1. O próximo passo da WEB Emiliano Barreto @ebarreto emiliano@celula.cc
  2. 2. • Proposta de trabalhar com as mais atuais tecnologias e softwares• Atuação na pesquisa e formação de profissionais• Consultoria e desenvolvimento• Forte preocupação com a formação• e carreira do aluno
  3. 3. Instrutores• CERTIFICADOS• COM EXPERIENCIA DE MERCADO• DIDÁTICOS E PRONTOS PARA TIRAR TODAS AS DÚVIDAS• INSTRUTORES DA CELULA ATUAM DIARIAMENTE COM AS MATERIAS QUE MINISTRAM AULA E SÃO ESPECIALISTAS NO QUE FAZEM
  4. 4. Diferenciais• Poucos alunos por turma• Ambiente pessoal e compromissado com o aprendizado na prática• Aulas 100% práticas• Estrutura enxuta = valores mais acessíveis
  5. 5. HTML 5 ....PORQUE, ONDE, COMO E QUANDO ?
  6. 6. NEGÓCIOS ONLINEMUITAS EMPRESAS DESCOBRIRAM QUE A INTERNET
  7. 7. Enxurradade informações e serviços
  8. 8. NOVAS DEMANDAS DE PROFISSINAIS
  9. 9. Novas oportunidades
  10. 10. Tudo tem que ser mais fácil
  11. 11. Tudo tem que ser mais fácil
  12. 12. PENSE MULTI
  13. 13. MULTI DEVICES
  14. 14. MULTI DEVICES
  15. 15. MULTI DEVICES
  16. 16. E quem vai acessar o seu site ?• Somente quem estiver no pc / windows com internet explorer ????
  17. 17. Conheça o HTML 5
  18. 18. Apresentando HTML 5.0É A MAIS NOVA ATUALIZAÇÃO DA LINGUAGEM HTML
  19. 19. Porque aprender a desenvolver utilizando HTML 5.0 ???
  20. 20. Alguns motivos• Mercado : falta de cases e profissionais bons nacionais na área• Mais poder e recursos no HTML, CSS E JAVASCRIPT• Conteúdo acessível de vários dispositivos e plataformas
  21. 21. HTML5 ENGLOBA
  22. 22. Principais Características• Web Semântica: melhoria na estrutura com novas tags• Mais poder com visual com CSS3• Recursos multimídia com Vídeo e Áudio• Gráficos ricos e dinâmicos(SVG / Canvas)• Web Apps – Web Storage, indexDB etc• GeoLocation• Gráficos 3D ( Web GL)
  23. 23. Estrutura do HTML 5<!DOCTYPE html><html lang=“en”><head><title></title><meta charset=“utf-8”></head><body></body></html>
  24. 24. Estrutura do HTML 5<header id="topo"> topo do site</header><nav id="menu"> menu do site</nav><section id="conteudo">area de conteúdo do site</section><footer id="rodape"> rodapé </footer>
  25. 25. Estrutura do HTML 5.0
  26. 26. Video Tag<video src=“videos/video.mp4” id”myVideo” preload=“auto” type=“video/mp4”></video>
  27. 27. Border radius#box {-webkit-border-raduis:15px;Moz--border-raduis:15px;border-raduis:15px;
  28. 28. Transforms#box{ -webkit-transform:rotateY(360deg); transform:rotateY(360deg);}
  29. 29. Border radius
  30. 30. Animações e transições com CSS3
  31. 31. Animações com scroll
  32. 32. Scroll books
  33. 33. Transitions
  34. 34. Gráficos ricos e dinâmicosÁudio e VídeoCanvas gerando imagem3D com Web GLSVG gerando vetorCSS3 com efeitos e 3D/Perspectiva
  35. 35. Criando gráficosCanvas API
  36. 36. @Media
  37. 37. WEB APPS
  38. 38. GEO LOCATION
  39. 39. Já posso utilizaresses recursos ?
  40. 40. Sim, mais antes....Adequação e necessidade para cada projetoPolyfills – modernizr.comShimsGoogle html
  41. 41. Calma calma......Pode sim mais antes....Adequação e necessidade para cada projetoPolyfills – modernizr.comShimsGoogle html
  42. 42. Calma calma......Pode sim mais antes....Adequação e necessidade para cada projetoPolyfills – modernizr.comShimsGoogle html
  43. 43. Market Share dos navegadores Estatísticas por versões (maio de 2011) Dados de maio/11 – by netmarketingshare
  44. 44. Market Share dos navegadores Estatísticas por versões (maio de 2012) Dados de maio/12 – by netmarketingshare
  45. 45. Market Share dos navegadores Quadro geral em 2012 Dados de maio/12 – by netmarketingshare
  46. 46. Market share dos navegadores• Ie 6• Ie 8• Firefox• Chome• safari
  47. 47. E o Flash morreu ?????
  48. 48. E o Flash morreu ?????
  49. 49. Faltam recursos e implementações• Acesso a Web Cam• Falta de softwares fáceis• Incompatibilidade de Navegadores• Recomendação do W3C
  50. 50. Faltam elementos a serem concluidos<device> - microfone e cameras HTML5 – “FUTURO” PRÓXIMO DA WEB FLASH – PRESENTE (99% das plataformas fixas rodam flash)
  51. 51. NOVAS DEMANDAS DE PROFISSINAIS
  52. 52. Novos horizontes e possibilidades
  53. 53. Você está pronto para o próximo passo ?
  54. 54. HTML5 e CSS 3O Próximo passo da WEB Obrigado Emiliano Barreto emiliano@celula.cc @ebarreto
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×