html, css e java script - renato araujo

274 visualizações

Publicada em

Slides sobre html, css e javascript

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

  • Seja a primeira pessoa a gostar disto

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

Nenhuma nota no slide

html, css e java script - renato araujo

  1. 1. HTML, CSS e JavaScript BREVE INTRODUÇÃO Nome: Renato Araujo E-mail: orenatoaraujoj@gmail.com Linkedin: https://br.linkedin.com/in/orenatoaraujo Facebook: https://www.facebook.com/renato.araujo.jesus
  2. 2. HTML  A principal linguagem para criação de páginas Web  Sigla do inglês: HyperText Markup Language  O que é uma linguagem de marcação de texto?
  3. 3. HTML (criador)  Tim Berners-Lee  Criou a linguagem com o objetivo de poder se comunicar e compartilhar informações com outros pesquisadores  É usada até hoje para compartilhas informações e etc.
  4. 4. HTML (evolução)  A primeira versão oficial foi lançada em 1993 sendo padronizada pelo IETF  Foi mantida pelo CERN e IETF até 1995  Em 1995 é criado o World Wide Web Consortium (W3C) para controlar os padrões web  Em 2001 é lançado a primeira versão do XHTML
  5. 5. WHATWG  Web Hypertext Application Technology Working Group – WHATWG  WHATWG x W3C  WHATWG e W3C  HTML5
  6. 6. HTML5  Revolucionou a Web porque?  Novas tags  Melhorou ainda mais a semântica  Exemplo resultado do Google  Menos código para DTD (ver próximo slide)
  7. 7. Diferença de DTD de HTML e HTML5
  8. 8. HTML e HTML5 algumas tags  <div></div>  <p></p>  <span></span>  <canvas />  <header></header>  <nav></nav>  <section></section>  Entre outras.
  9. 9. HTML boas práticas  Verificar sempre se o elemento ou atributo usado está obsoleto para a versão atual  Verificar o contexto em que a tag esta  Verificar sempre a sintaxe e a semântica  https://validator.w3.org/
  10. 10. HTML (exemplo de código)
  11. 11. CSS  Cascading Style Sheet  Linguagem de estilo da Web  Porque se chama Cascading Style Sheet?
  12. 12. CSS (evolução)  Foi idealizado em 1995  Primeira versão lançada em 1996 já pela W3C  CSS1 (básico)  CSS2 (pseudo-elementos e Pseudo- classes)  CSS3 (media queries, animações, transições e transformações e etc.)
  13. 13. CSS (como escrever)  Regra CSS  seletor {propriedade: valor}  Seletor (elemento, classe ou id)  Propriedade (atributo: margin, padding, etc)  Valor (característica especifica: fonte do tipo Arial, largura de 10 pixel)
  14. 14. CSS (como adicionar no HTML)  Existem 3 (três) formas:  inline  dentro da head  arquivo externo
  15. 15. CSS (exemplo inline)
  16. 16. CSS (exemplo dentro da tag head)
  17. 17. CSS (exemplo de arquivo externo)
  18. 18. CSS (boa práticas)  Evite usar a CSS dentro da tag head e inline  Prefira o arquivo externo  Entenda para que serve a propriedade  Entenda a precedência dos seletores
  19. 19. CSS (exemplo de código)
  20. 20. CSS (exemplo de código)
  21. 21. JavaScript  Linguagem de script client-side  Mas hoje em dia também do lado do servidor (server-side) com NodeJS
  22. 22. JavaScript (criador)  Brendan Eich
  23. 23. JavaScript (confusão com Java)  JavaScript não é Java  O nome se deu pelo fato da Sun ajudar a Netscape em alguns detalhes da liguagem  Que no fim foi apenas uma jogada de marketing entre a união da Sun e Netscape
  24. 24. JavaScript (padronização)  JavaScript é padronizado pela Ecma International sob o nome de ECMAScript desde 1996  Especificação do JavaScript é o ECMA-262 (http://www.ecma- international.org/publications/files/EC MA-ST/Ecma-262.pdf)
  25. 25. JavaScript (uso e aplicação)  Antigamento o JavaScript era usado apenas para válidar formulário e trocar imagens quando colocava e tirava o mouse de cima (hover)  Hoje em dia o JavaScript é usado para criar uma web mais rica e responsiva
  26. 26. JavaScript (características e dificuldades)  Tipo dinâmico (loser type)  Funções de primeira classe (First-class Function)  Funções aninhadas (Nested Functions)  Fechamentos (Closure)  Funções de Retorno (callback)  Escopo da variável e escopo léxico  Baseada em protótipo (prototype)
  27. 27. JavaScript (características e dificuldades)  Baseada em objetos e não orientada a objetos  Mas é possível simular características OO, como: encapsulamento, herança, interface e design patterns
  28. 28. JavaScript (DOM)  Através do JavaScript é possível manipular os elementos HTML  Criar eventos  mouse, temporização, carregamento, fechamento, etc.
  29. 29. JavaScript (AJAX)  Asynchronous JavaScript e XML  Uso do XMLHttpRequest  Faz requisições sem a necessidade de atualizar a página  Pode enviar e receber informações no formatos: JSON, XML, HTML e TEXT
  30. 30. Isso é tudo pessoal!
  31. 31. Sites para aprender  http://tableless.com.br/  https://css-tricks.com/  https://developer.mozilla.org/pt-BR/  http://www.w3.org/  http://www.smashingmagazine.com/  http://www.maujor.com/index.php
  32. 32. Dúvidas?
  33. 33. Contatos  Nome: Renato Araujo  E-mail: orenatoaraujoj@gmail.com  Linkedin: https://br.linkedin.com/in/orenatoaraujo  Facebook: https://www.facebook.com/renato.araujo.jesus

×