HTML, CSS e JavaScriptBREVE 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

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: orenatoaraujoj@gmail.com

Linkedin: https://br.linkedin.com/in/orenatoaraujo

Facebook: https://www.facebook.com/renato.araujo.jesus