Palestra html5 e CSS3

806 views

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
806
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×