Upload
orenatoaraujo
View
330
Download
0
Embed Size (px)
Citation preview
HTML, CSS e JavaScriptBREVE INTRODUÇÃO
Nome: Renato Araujo
E-mail: [email protected]
Linkedin: https://br.linkedin.com/in/orenatoaraujo
Facebook: https://www.facebook.com/renato.araujo.jesus
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?
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.
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
WHATWG
Web Hypertext Application
Technology Working Group –
WHATWG
WHATWG x W3C
WHATWG e W3C
HTML5
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)
Diferença de DTD de HTML e HTML5
HTML e HTML5 algumas tags
<div></div>
<p></p>
<span></span>
<canvas />
<header></header>
<nav></nav>
<section></section>
Entre outras.
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/
HTML (exemplo de código)
CSS
Cascading Style Sheet
Linguagem de estilo da Web
Porque se chama Cascading Style
Sheet?
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.)
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)
CSS (como adicionar no HTML)
Existem 3 (três) formas:
inline
dentro da head
arquivo externo
CSS (exemplo inline)
CSS (exemplo dentro da tag head)
CSS (exemplo de arquivo externo)
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
CSS (exemplo de código)
CSS (exemplo de código)
JavaScript
Linguagem de script client-side
Mas hoje em dia também do lado do
servidor (server-side) com NodeJS
JavaScript (criador)
Brendan Eich
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
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)
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
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)
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
JavaScript (DOM)
Através do JavaScript é possível
manipular os elementos HTML
Criar eventos
mouse, temporização, carregamento,
fechamento, etc.
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
Isso é tudo pessoal!
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
Dúvidas?
Contatos
Nome: Renato Araujo
E-mail: [email protected]
Linkedin: https://br.linkedin.com/in/orenatoaraujo
Facebook: https://www.facebook.com/renato.araujo.jesus