Slides sobre html, css e javascript

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. 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. 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. 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. WHATWG
 Web Hypertext Application
Technology Working Group –
WHATWG
 WHATWG x W3C
 WHATWG e W3C
 HTML5

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. Diferença de DTD de HTML e HTML5

8. HTML e HTML5 algumas tags
 <div></div>
 <p></p>
 <span></span>
 <canvas />
 <header></header>
 <nav></nav>
 <section></section>
 Entre outras.

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. HTML (exemplo de código)

11. CSS
 Cascading Style Sheet
 Linguagem de estilo da Web
 Porque se chama Cascading Style
Sheet?

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. 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. CSS (como adicionar no HTML)
 Existem 3 (três) formas:
 inline
 dentro da head
 arquivo externo

15. CSS (exemplo inline)

16. CSS (exemplo dentro da tag head)

17. CSS (exemplo de arquivo externo)

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. CSS (exemplo de código)

20. CSS (exemplo de código)

21. JavaScript
 Linguagem de script client-side
 Mas hoje em dia também do lado do
servidor (server-side) com NodeJS

22. JavaScript (criador)
 Brendan Eich

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. 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. 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. 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. 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. JavaScript (DOM)
 Através do JavaScript é possível
manipular os elementos HTML
 Criar eventos
 mouse, temporização, carregamento,
fechamento, etc.

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. Isso é tudo pessoal!

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. Dúvidas?

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