2017

Apostila da Disciplina de
Introdução a
Programação Web

Ementa da Disciplina:
1.HTML 5. 2. CSS 3. 3. JavaScript. 4. Jquery.

Autor: Professor Esp. (Mestrando) Danilo

Sartorelli Barbato
 Desenvolvimento Front-End: HTML5, CSS3, JavaScript e jQuery

Danilo Sartorelli Barbato

Resumo

As tecnologias para desenvolvimento de aplicações web tiveram significativo

crescimento, nos últimos anos, com o surgimento de novas ferramentas,
padrões e funcionalidades (principalmente as grandes bases em HTML5,
CSS3, JavaScript e jQuery na parte de Front-End) o que, consequentemente,
trouxe o aumento de sua complexidade. Diante a esse fato, esta documentação
define e explica conceitos básicos de linguagem de marcação estrutural,
estilização, linguagem de programação de alto nível e especificidades de
biblioteca, além de padrões web para que seja possível compreender os
fundamentos do desenvolvimento web.

Palavras-chave

Tecnologia; Padrões-Web; Aplicações; Desenvolvimento; Front-End.

Introdução

O desenvolvimento de aplicações para a internet baseia-se em diversas

diretrizes do W3C (Consórcio da World Wide Web), criado por Tim Berners-
Lee, que define padrões, protocolos e melhores práticas para estas aplicações.

Este desenvolvimento pode ser dividido em duas etapas: o design, que irá
considerar a arquitetura, usabilidade, acessibilidade e desenho da aplicação; e
o desenvolvimento da aplicação propriamente dita, que, por sua vez, é dividido
em Front-End e Back-End, sendo o primeiro responsável pela entrega da
informação, coleta de entradas e dados do usuário, e tratamento para entrega
em formato específico ao sistema do Back-End, que pode retornar respostas e
dados que retroalimentam as informações.
Dessa forma, podemos dizer que o papel do desenvolvedor de Front-End é
trabalhar junto com a equipe de design e Back-End a fim de produzir códigos
leves e compatíveis com os padrões da Web em seus diversos navegadores,
tamanhos de tela e resoluções, além de se preocupar com performance e
técnicas de SEO, sistema de otimização para mecanismos de busca.

Apesar do desenvolvimento web ter sido iniciado com o intuito de entregar

conteúdos e informações, hoje é utilizado para criação de aplicações web, e
serve para entregar informações para computadores, tablets, smartphones e
televisões, recolher entradas de usuários, tocar mídias, integrar com outras
aplicações e até mesmo ser compilado como aplicação nativa para diversos
aparelhos e sistemas operacionais.

Há muita procura e oferta de informações por essas tecnologias, isso ocorre

devido a sua grande versatilidade, do crescimento em seu uso e por seu
aumento de potencial, tornando-se difícil identificar os conteúdos úteis de
acordo com a necessidade e nível de conhecimento.

Vamos, então, conhecer os conceitos básicos dessas tecnologias de forma a

gerar a compreensão geral, e permitir a busca e aprofundamento nos tópicos
de interesse.

1. DESENVOLVIMENTO FRONT-END:

1.1 HTML5

O HTML5 é a quinta versão do Hypertext Markup Language. Lançada em 2014,

a versão pode ser definida como uma linguagem de marcação para criação de
páginas Web, de forma que conteúdos criados seguindo o padrão HTML
podem ser interpretados e renderizados por navegadores (MAZZA, 2014).
Apesar das primeiras versões da linguagem permitirem maior flexibilidade para
escrita e interpretação das regras, houve uma maior rigidez na aplicação da
sintaxe para as versões modernas, isso devido ao crescente aumento de
elementos e ferramentas que a utilizam.
Os documentos HTML podem ser salvos com as extensões .htm ou .html,
sendo o último os mais comuns, entretanto, também podem ser entregues ao
navegador como resultados de processamentos de linguagens de
programação, como por exemplo PHP, Python, Ruby, dentre outras. Através
desse processamento que grande parte dos sites não exibem a extensão do
arquivo, entregando o documento final ao usuário com base em modelos HTML
e dados dinâmicos, que permite a busca em bancos de dados.
Independentemente da forma que foi gerado, todo documento HTML5 precisa
ser constituído da declaração de tipo e de marcadores. A declaração para esta
versão é a mais curta e simples, sendo necessário iniciar o documento com:
<!DOCTYPE html> , não sendo necessário indicar número de versão ou url de
padrão a ser seguido.
Marcadores, ou 'tags' em inglês, são os elementos principais da linguagem
HTML. Eles contêm abertura e fechamento, com exceção dos elementos com
'self closure', ou seja, aqueles que possuem autoclausura, sendo abertos e
fechados no próprio marcador.
Estritamente falando, o uso do termo elemento não se refere ao marcador em
si, mas sim ao seu bloco, ou seja, abertura, atributos, conteúdo e fechamento.
Esta definição, porém, não é seguida de forma rígida nos textos, artigos e
livros.
O formato padrão dos marcadores é constituído por:
<marcador>conteúdo</marcador>. Ou seja, nome do marcador entre os
caracteres '<' e '>' para abertura e os mesmos elementos com adição da barra
invertida antes do nome do marcador para o fechamento. Sendo assim, um
parágrafo que possui o marcador 'p' com o conteúdo: 'Este é o conteúdo do
parágrafo', pode ser escrito da seguinte forma: <p>Este é o conteúdo do
parágrafo</p>.
De forma contrária, a tag com self closure terá o padrão <marcador />, com
apenas um elemento que abre e fecha o marcador, também entre os
caracteres '<' e '>', porém com adição barra invertida antes do caractere final.
Um exemplo prático é a quebra de linha do marcador BR, que pode ser escrito
como <BR />. Há a possível omissão da barra invertida para versões anteriores
e flexíveis da linguagem de marcação.
1.1.1 Estrutura Básica

Após a definição do 'doctype', que define o arquivo como documento que

segue o padrão HTML5, é iniciada a sequência de marcadores que irão
estruturar o documento. O elemento inicial que irá conter os demais elementos
é o marcador HTML, que por sua vez, conterá os marcadores HEAD e BODY,
cabeçalho e corpo do documento.
O marcador HEAD, ou cabeçalho do documento, contém as metas informações
sobre o documento, como o marcador TITLE, de título da página, lido e exibido
pelos navegadores, além de outros elementos que irão apontar informações
como data, autor, frequência de atualização, descrição, que podem não ser
renderizados como conteúdo pelos navegadores, apesar de utilizados como o
'encoding', que aponta a forma de decodificação dos caracteres do documento.
Há também marcadores inseridos nessa área que servem para requisitar
outros arquivos ou inserir códigos e estilos diretamente na página.
O marcador BODY, ou corpo do documento, contém as informações de
conteúdo do documento, como parágrafos e imagens, porém essa área pode
conter também definições e chamadas de estilos e scripts, além de
comentários, que não serão renderizados como conteúdo pelo navegador.
Abaixo segue exemplo de estrutura básica de documento HTML conforme
padrões informados:
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset="utf-8" />
<title>Título da Página</title>
</head>
<body>
<h1>Cabeçalho da Página</h1>
<p>Parágrafo de texto da página.</p>
<p>Parágrafo de texto com este link a seguir: <a
href="/paginaASerCarregada.html>">texto clicável do link </a></p>
</body>
</html>
Este documento acima será identificado pelo navegador como HTML5, pela
definição de DOCTYPE e irá apresentar na aba superior o título ‘Título da
Página’.
A definição global do marcador HTML possui o atributo ‘lang’ que define a
linguagem utilizada no documento, o que auxilia para traduções, indexações e
leituras. Utilizamos, sempre, o valor ‘pt-br’ que indica a língua portuguesa
utilizada no Brasil.
Dentro da área de conteúdo, será apresentado o cabeçalho grande e abaixo
serão exibidos dois parágrafos, porém o segundo possui um hiperlink para
outra página.
O marcador ‘A’ é utilizado para a criação de links, o conteúdo entre suas tags
será exibido, e o endereço para carregamento da página está definido em um
ATRIBUTO do marcador.
Marcadores podem possuir múltiplos atributos, como de estilo (STYLE),
definição de identificador único (ID), nome de classe (CLASS) e atributos
específicos ao marcador. No caso do ‘A’, existe o atributo HREF, utilizado para
definir o destino do link.
Todos os conteúdos dentro dos marcadores serão tratados pelos navegadores
seguindo um formato de codificação de texto (W3SCHOOLS). Esta definição é
feita dentro do HEAD com o elemento ‘meta’ e atributo ‘charset’. O padrão é a
utilização de UTF-8 e este será o formato considerado caso esse elemento não
seja adicionado, porém para o tratamento de caracteres latinos, usa-se ISO-
8859-1, de forma que o elemento completo é escrito da seguinte forma: <meta
charset="ISO-8859-1">. No modelo acima descrito, seria utilizado o formato
padrão UTF-8.

1.1.2 Semântica

Novos elementos estruturais foram padronizados com o HTML5, como header,

nav, section, article, aside e footer, a serem inseridos dentro do marcador
BODY.
Segundo Mazza (2014), enquanto o marcador HEAD define o cabeçalho do
documento, com informações para o navegador e buscadores, o elemento
HEADER define o cabeçalho do conteúdo do portal, com o nome do site, por
exemplo, além de englobar a busca e navegação.
NAV, representa navegação, e será utilizado para englobar o bloco de itens de
navegação, que por boas práticas, terá cada menu e link criado como item de
lista (marcador
dor LI) em lista não ordenada (marcador UL) para facilitar a
navegação entre elementos e estilização.
A tag FOOTER define o rodapé do elemento, podendo conter textos de direitos
autorais, mapa do site, contato, logos e outras informações.
O elemento ARTICLE
E define uma área da página para composição de bloco,
como um formulário, post de fórum ou blog, comentários e outros. Já o
SECTION é utilizado para englobar uma seção, contendo, ou não, o FOOTER,
conteúdo ou até mesmo o HEADER. Por fim, ASIDE é utilizado para definir um
bloco de conteúdo à parte do principal, mas relativo aos conteúdos ao seu
redor, como por exemplo, um bloco de navegação ao lado do conteúdo
principal.

Fonte: W3Schools - HTML5 Semantic Elements

A figura apresentada exibi a estrutura bás
básica
ica com navegação horizontal (nav)
abaixo do cabeçalho do site (header), uma área de conteúdo formada por
seção (section) e artigo (article) e uma coluna lateral à direita (aside), com
elementos relativos ou navegação secundária. Abaixo de todo o conteúdo,
posiciona-se
se o rodapé (footer).

1.1.3 Cabeçalhos e Títulos

Conforme já apontado, o elemento semântico para definição de cabeçalhos e

títulos nos sites possui variações de tamanho de fonte e importância dentro do
site, que obedecem uma hierarquia de compos
composição
ição de elementos. O h1
representa o cabeçalho principal e em versões anteriores do HTML era definido
que poderia haver apenas um por página, sendo reservado normalmente para
o título do site, porém na última versão é aceito que esse elemento seja
repetido para título de seções importantes.
Dessa forma, os blocos e seções devem considerar a descida na hierarquia de
elementos para objetos dentro ou abaixo em sua estrutura. Como por exemplo,
uma seção de notícias que possui título da seção e lista de títulos das notícias
seria definida como título da seção em segundo peso, h2, e cada uma das
notícias da lista em terceiro peso, h3, demonstrando em seu código a
hierarquia a que pertencem, o que facilita a navegação em programas leitores
de tela.
Um dos principais atributos para os cabeçalhos é TITLE, que oferece uma
caixa de texto com seu conteúdo quando o usuário posiciona a seta do mouse
sobre o elemento e é lido como descrição em leitores de tela. Seu uso pode ser
feito como no exemplo a seguir: ‘<h2 title=”Lista de notícias sobre seção
Nome”>Notícias</h2>’.

1.1.4 Parágrafos

Um dos mais utilizados marcadores em páginas web é o de parágrafo,

utilizando a letra P. Apesar de ser possível ter o texto renderizado apenas o
inserindo diretamente na página HTML é esta tag a que irá separar esse
conteúdo como um bloco de texto isolado e permitir seu posicionamento e
estilização via CSS. Há diversos atributos que podem ser inseridos para
ajustes de fonte diretamente no marcador, porém é indicado que sejam
utilizados apenas quando necessários, para que sejam feitos via CSS com
maior flexibilidade e reuso. O uso do elemento pode ser feito como: ‘<p> Texto
do parágrafo que irá aparecer na página </p>’.

1.1.5 Listas

Há dois tipos de listas: as ordenadas, OL (ordered list, em inglês); e as não

ordenadas, UL (unordered list, em inglês). A primeira pode ser considerada
como uma sequência e a segunda como um grupo de elementos. Apesar de
poder ser alterado via estilização, a tag OL exibirá para cada item o
posicionamento do elemento, sendo o padrão via números.
As listas são blocos que serão iniciadas por OL ou UL e para cada item listado
deve ser utilizado o marcador LI. Desta forma uma lista ordenada com três
elementos pode ser escrita como:
<ol type=”1”>
<li> primeiro </li>
<li> segundo </li>
<li> terceiro </li>
</ol>
A lista acima define uma lista de três itens que serão exibidos 1. Primeiro, 2.
Segundo e 3. Terceiro, um abaixo do outro caso não exista estilo que define
diferente. O atributo TYPE é utilizado para alterar o elemento ordenador da
lista, sendo o padrão numérico como acima exemplificado.
Outros tipos são A, a I e i, sendo que os dois primeiros utilizam caracteres do
alfabeto para ordenar e os outros dois utilizam numerais romanos. A caixa da
letra do tipo aponta se deve ser utilizado caixa alta ou baixa para esse
numerador. Assim, para três itens, o tipo A irá listar, A, B, C e sua sequência,
enquanto que o tipo i irá listar, i, ii, iii.
Listas não ordenadas são também utilizadas para a criação de menus de
navegação, por seu agrupamento e facilidade para estilização.

1.1.6 Links

Um dos principais fatores de sucesso para as páginas de internet foi sua

capacidade de conexão de elementos e outras páginas e mídias, com os
hiperlinks, hoje chamados apenas de links.
O marcador utilizado para iniciar um link é A, e o conteúdo entre os marcadores
será exibido na página além de, por padrão, informar ao navegador para alterar
a seta do mouse quando sobre esse elemento.
O elemento de link precisa ter um atributo que indique para onde encaminhará
ao ser clicado, sendo este o HREF. Outros atributos importantes para esse
marcador é o TARGET, que indicam o alvo de abertura com diversas opções,
sendo as duas principais: se o item deve ser carregado na própria página com
valor _self, ou se deve ser carregado em nova janela ou aba do navegador.
Dessa forma, um link com texto ‘ir ao google’ que direcione para o buscador
Google com abertura em nova aba do navegador pode ser escrito da seguinte
forma: ‘<a href=”http://www.google.com” target=”_blank”>ir ao google</a>’.
É uma boa prática que páginas externas sejam abertas em novas abas ou
janelas para que o usuário possa continuar navegando no site sem ser
obrigado a voltar à página anterior. Esse item pode ser tratado com aviso no
link indicando a saída do site atual.

1.1.7 URL absolutas e relativas

O exemplo de link de ‘http://www.google.com’, indica a url do buscador google,

que é chamada de url absoluta.
Segundo W3Schools, um endereço de internet é composto de protocolo de
acesso, por exemplo ‘HTTP’, nome do hospedeiro (host, que comumente
chama-se www), ‘www’, e domínio, ‘google.com’. Também poderíamos passar
caminhos, ‘/images’, parâmetros, ‘search?q=’, ou subdomínio (utilizado no lugar
o www antes do domínio), ‘images.google.com’.
Ao utilizarmos o endereço completo estamos garantindo o protocolo, host,
domínio além da página; porém não é necessário informar todos esses itens,
principalmente, quando consideramos navegação interna no mesmo site ou
com sites que respondem para mais de um endereço (sendo espelhamos ou
com domínios diferentes).
Sendo assim, também podemos referenciar os endereços de forma relativa, e
podemos escrevê-la em relação a três itens diferentes: relativa à posição atual,
relativa à raiz do domínio e relativa ao protocolo.
A url relativa à posição atual pode ser utilizada com o uso diretamente do nome
da página como ‘menu.html’ ou ‘./menu.html’, a url será requisitada no mesmo
domínio e diretório que a página com o objeto de link. É possível ainda definir
se deseja retornar ou avançar em caminhos, com uso de ‘../menu.html’ para
retornar um diretório e com uso de ‘/nome-do-diretório/menu.html’ ou até
mesmo uma junção deles como ‘../../imagens/menu.html’ para retornar dois
caminhos ou diretórios, e acessar menu.html em imagens.
De forma contrária, a url relativa à raiz do domínio utiliza de ‘/’ no início de seu
endereço, o que irá se referir ao primeiro nível do domínio, independentemente
de onde estiver a página atual, assim o link ‘/menu.html’ sempre será
encaminhado para o ‘menu.html’ no primeiro nível do domínio, também
chamado de raiz.
Por fim, a url relativa ao protocolo possuirá todos os demais itens da url
absoluta, porém iniciará com ‘//’ ou invés de ‘http://’, ‘https://’ ou outro protocolo
utilizado. Esse uso é feito para manter o mesmo protocolo da página atual para
acessar o link, ou seja, uma página que utilize protocolo HTTPS e que possua
um link para ‘//www.google.com’ irá encaminhar mantendo o protocolo para
‘https://www.google.com’.
Essas relações de referências de endereços são utilizadas não apenas para
links, mas também para endereços de imagens e outras mídias, assim como
para arquivos externos de css e javascript.

1.1.8 Imagens

Apesar do início das páginas de internet consistir apenas de texto, rapidamente

houve a inserção de imagens, mesmo que outras mídias só tenham
recentemente recebido tags específicas, a IMG foi introduzida em primeiras
versões do HTML, e essa tag possui autoclausura, não existindo um marcador
de fechamento.
Assim como o link, é necessário informar um atributo que indique o caminho da
imagem a ser exibida, e que será absoluto ou relativo, de forma que as
imagens de outros domínios possam serem exibidas, assim como arquivos que
estejam no mesmo nível da página. O atributo que indica os caminhos das
imagens é o SRC.
Um atributo muito importante para a acessibilidade é o ALT, que indica o texto
alternativo para ser exibido quando as imagens não forem carregadas, e como
a descrição do imagético para leitores de tela. Apesar de não ser obrigatório
seu uso, é altamente recomendado e um item de validação checado com alta
importância.
Dessa forma, para exibirmos uma imagem do domínio Lorem Pixel (site que
exibe imagens aleatórias para exemplos) podemos utilizar o elemento a seguir:
‘<img src=”http://lorempixel.com/400/200/” alt=”Imagem aleatória de Lorem
Pixel” />’. Conforme informado anteriormente, o fechamento da tag ocorre no
próprio elemento de abertura através de ‘/>’.
Diversos outros atributos podem, ou não, ser adicionados aos elementos de
imagens, principalmente os de tamanho, com WIDTH (largura) e HEIGHT
(altura), porém estes são indicados para quando o tamanho da imagem é
estrutural à página e não é possível utilizar estilização via CSS externa, como
no caso de e-mails.

1.1.9 Tabelas

O uso de tabelas é recomendado apenas para exibir conteúdo tabular, e não

para a construção da estrutura do site, algo que ocorreu no início do
desenvolvimento de páginas e ainda é o padrão para e-mails.
Tabelas possuem seus próprios marcadores, iniciando pela criação da tabela
com TABLE e com adição, entre suas tags de abertura e fechamento, dos
demais elementos da tabela.
Apesar de existirem diversos marcadores de tabela iremos apresentar apenas
os dois principais: TR e TD. A tag TR significa table row, ou seja, para cada
linha de tabela, deve-se abrir e fechar o marcador; enquanto que TD, table
data, ou os dados da tabela, existem um para cada célula e são contidos em
suas respectivas linhas.
O padrão a ser obedecido é que existirão, obrigatoriamente, o mesmo número
de células por linha, dessa forma, ao criar a primeira linha com duas células, a
segunda linha deverá ter duas células para o fechamento correto. Para efetuar
a mesclagem de células, fazendo com uma célula ocupe o espaço de duas ou
mais, existe a propriedade colspan, que inserida dentro da tag TD indica
quantas colunas essa célula deverá representar.

1.1.10 Formulários

Outra estrutura dos primórdios do HTML são os formulários, assim como

tabelas, há uma tag que abre e fecha englobando os demais elementos, neste
caso, utilizamos FORM.
Dentro dos formulários há diversas opções a serem utilizadas, porém as
principais são INPUT, com dados de entrada e LABEL, que irá nomear o
campo de entrada. Enquanto que a tag LABEL define um texto e possui
atributo FOR que indica para qual elemento ela se refere, a tag INPUT possui
diversos tipos em seu atributo TYPE.
O tipo principal é o TEXT, que permite que sejam inseridos dados
alfanuméricos, mas de suma importância é o tipo SUBMIT, obrigatório para que
os dados possam ser enviados, o texto do botão é inserido no atributo VALUE.
Novos tipos foram adicionados como PASSWORD para senhas (com exibição
de asterisco para não mostrar a senha digitada na tela), o EMAIL que irá
efetuar validação no envio (se existe ‘@’ e ‘.’ no campo digitado), além de
NUMBER e TEL que quando acessados de dispositivos móveis abrem o
teclado numérico para facilitar o preenchimento.
No elemento FORM há dois atributos importantes para o envio, a tag ACTION
que define a ação do formulário, normalmente indicando um link de uma página
que irá tratar os resultados do formulário. O endereço inserido pode ser relativo
ou absoluto.
O atributo METHOD indica como os dados serão enviados, com duas opções
GET e POST (W3C). Enquanto GET envia todos os dados do formulário de
forma visível como parâmetros na URL, o formato POST não exibe os dados e
envio de forma invisível ao usuário. Para dados de campo de busca e outros
que podem ser salvos para novo acesso posterior, é indicado o uso de GET,
porém para dados sensíveis como senhas e cartões é imprescindível o uso de
POST para não expor os usuários.
Para exemplificar, segue abaixo o código de formulário (FORM) que envia via
método (METHOD) POST com ACTION a página ‘form.php’. Ele contém três
campos de entrada (INPUT) e um botão de envio (INPUT de tipo SUBMIT).
<form action="/form.php" method="post">
<label for="nome">Nome</label>
<input type="text" name="nome">
<label for="email">Email</label>
<input type="email" name="email">
<label for="tel">Telefone</label>
<input type="tel" name="tel">
<input type="submit" value="Enviar">
</form>

1.1.11 Principais funcionalidades novas no HTML5

Além desses atributos de tipos de inputs, foram adicionados diversos outros no

HTML5, incluindo tags de formulários, de estrutura (algumas já citadas como
NAV e FOOTER) e de funcionalidades de mídia.
Dentre as principais temos: EMBED, AUDIO e VIDEO. Enquanto o primeiro é
uma tag que serve para incorporar na página aplicações não HTML, como
objetos em flash, as outras duas servem para trazer tocadores de áudio e vídeo
nativos ao navegador sem necessidade de aplicações externas.
Para o uso dos tocadores basta adicionar a fonte de mídia, com a tag SOURCE
que indicará o caminho em seu atributo SRC e tipo em TYPE. Para a exibição
de controles de volume, tempo e outros basta inserir a propriedade
CONTROLS em AUDIO ou VIDEO.
É necessário apontar que como não há uma padronização de formato de mídia
para áudio e vídeo entre os navegadores é indicado referenciar diferentes
formatos para que ocorra funcionamento correto nos principais navegadores.
Indicamos pelo menos o uso dos formatos ‘mp3’ e ‘ogg’ para áudio e ‘mp4’ e
‘ogg’ para vídeo.
Esta documentação cobre apenas uma parte das estruturas, marcadores e
atributos do HTML5, mas o suficiente para que seja possível criar um
documento estruturado para receber estilos e códigos, além da base para
compreender tutoriais mais profundos e avançados.

2. CSS

O HTML, por mais completo que seja com suas estilizações e funcionalidades
próprias não consegue implementar aplicações web modernas sozinho, sendo
necessário complemento de estilização do CSS e funcionalidades do
JavaScript, conforme apontado por SERRA (2011). Essa separação de funções
é fundamental para melhor organização, divisão de tarefas e reaproveitamento
de partes de código.
O CSS3 é a terceira versão do Cascading Style Sheets ou folha de estilos em
cascata, nome de uma linguagem utilizada para formatação de estilo de
documentos HTML.
A estilização funciona através de um seletor e as propriedades que serão
alteradas. Os seletores são os próprios marcadores HTML, seus atributos,
elementos genéricos como asterisco ‘*’, ou nome de classes de identidade dos
elementos definidos no HTML.
Dessa forma, para definir o tamanho de parágrafos em 20 pixels basta utilizar o
código: ‘p { font-size: 20px; }’. O seletor ‘p’ irá abranger todos os parágrafos do
documento e a propriedade ‘font-size’ define o tamanho de fonte. Note que ao
final de cada propriedade utilizamos um ponto e vírgula ‘;’ para as separar.
As classes são definidas através da propriedade CLASS no elemento HTML e
seus valores podem ser compartilhados por vários elementos na mesma
página. Ao contrário, as identidades, definidas por ID, são únicas por página.
Em CSS, os seletores são formados por ponto, ‘.’, antecedendo o nome da
classe sem espaços e ‘#’, antecedendo o nome da identidade. Assim o objeto
com classe ‘texto’ e identidade ‘único’ pode ser referenciado via CSS por ‘.
Texto’ para estilos gerais e ‘#unico’ para estilos que irão afetar apenas esse
objeto na página.

2.1. Aplicando CSS ao HTML

Há três formas diferentes de aplicar o código CSS ao HTML, sendo elas:

diretamente no elemento; embutido no documento HTML; ou em arquivo
externo.
Os estilos inline são os adicionados diretamente dos elementos através do
atributo style, nosso exemplo seria aplicado somente ao parágrafo em
específico da seguinte forma ‘<p style="font-size: 20px">texto</p>’.
Já os estilos embedados serão aplicados junto com o seletor para todos os
elementos aplicáveis através da tag STYLE, preferencialmente inserida dentro
do HEAD. O mesmo exemplo seria aplicado da seguinte forma ‘<style> p {font-
size: 20px;} </style>’.
Por fim, o método preferencial é o uso de estilo através do arquivo externo, de
forma que facilita a gestão e compartilhamento de estilo entre várias páginas.
Para tal é necessário criar um arquivo específico com extensão CSS onde
serão inseridos todos os estilos e a referência a este arquivo no documento
HTML, através do marcador LINK com atributos HREF e REL apontando o
caminho do arquivo e o tipo.
Dessa forma, o mesmo exemplo teria o código p {font-size: 20px;} dentro do
arquivo ‘estilo.css’ e o vínculo dentro de HEAD da seguinte forma ‘<link
rel="stylesheet" href="estilo.css">’.
Para facilitar a compreensão dos códigos haverá a utilização de comentários
que serão ignorados pelos navegadores. Para inserir comentários basta inserir
comentário entre “/*” “*/”, da seguinte forma>: “ /* comentário em css */ “.
2.2. Box Model

Os elementos HTML podem ser classificados em bloco e em linha, onde os

elementos em linha são adicionados lado a lado com quebra para a linha de
baixo quando acaba o espaço horizontal, e em bloco quando são adicionados
um sobre o outro. Os elementos de bloco também possuem propriedades do
chamado Box Model, ou modelo de caixa. Essas propriedades são bordas
(BORDER), margens (MARGIN), espaçamento (PADDING) e definição de
altura (HEIGHT) e largura (WIDTH).

Fonte: Autoria Própria - Box Model

Essas propriedades seguem a ordem da imagem acima, no qual o conteúdo

pode ter largura e altura definidos. A essas medidas serão adicionados os
espaçamentos do padding, posterior a ele teremos o tamanho da borda e por
último as margens.
Todas as propriedades poderão ser adicionadas aos quatro lados ou ao topo (-
top), direita (-right), abaixo (-bottom) ou esquerda (-left), por exemplo, ‘border-
right’, ‘padding-top’ ou ‘margin-bottom’. Essa ordem também é seguida para
definir os itens um a um na mesma propriedade geral, por exemplo: ‘padding:
10px 15px 10px 15px;’. Temos 10px acima e abaixo e 15px nas laterais, devido
às repetições podemos emitir as 3 e 4 posições, de forma a escrever apenas
‘padding: 10px 15px;’.
Apesar dos elementos de linha, como SPAN e A, não poderem alterar as
propriedades de box model por padrão, é possível alterar para visualização de
caixa com a propriedade DISPLAY, que além de poder esconder o objeto com
valor ‘NONE’, pode alterar para ‘BLOCK’ (bloco), ‘INLINE’ (linha) e ‘INLINE-
BLOCK’ (posicionamento como linha, lado a lado, mas com capacidade de
definir elementos do box model).
Esses itens de espaçamento e margem podem ser definidos em pixels ou em
porcentagem e auxiliam no posicionamento de elementos flutuantes. Os
objetos podem flutuar através da propriedade FLOAT, com valores RIGHT
(direita) e LEFT (esquerda), sendo que objetos serão alinhados ao lado de
objetos flutuantes, a menos que exista definição do contrário com a
propriedade CLEAR, que também pode definir RIGHT, LEFT ou BOTH (ambos
os lados).

2.3. Cores

As cores em CSS podem ser definidas por nomes (em inglês), como red, blue e
green para vermelho azul e verde, mas o uso principal é com o uso do padrão
hexadecimal antecedido de ‘#’. Esse padrão consiste de três blocos de 2
caracteres para cada cor, cada um com valores de 0 a F, com base em padrão
RGB (red, green, blue) com valores de 0 a 255 para cada cor e a combinação
dos valores dessas três cores forma a cor final.
Desta forma, a cor #FF0000 é equivalente a red, pois possui o máximo de
vermelho e o mínimo para verde e azul. Outro padrão utilizado é o RGBA, que
possui os três valores de cores escritos de 0 a 255 e um canal alpha, ou seja,
de transparência, de 0 a 1. O mesmo exemplo vermelho, mas com 50% de
transferência seria escrito como rgba (255, 0, 0, 0.5).

2.4. Unidades de medida

Os valores utilizados nestes exemplos foram escritos em pixels com px, porém
esse valor é fixo sem variações para tamanhos de tela ou resoluções
diferentes, o que pode atrapalhar a leitura e impedir o layout do site de se
adequar.
Há indicação da criação de fontes em formato relativo ao objeto pai através do
uso de EM, valor decimal onde 1 representa 100%, assim a fonte 1,25em é
25% maior do que fonte de seu objeto pai.
Com isso é possível ajustar todas as fontes do site para melhor leitura
alterando apenas a fonte da área de conteúdo ou de todo documento HTML.
Para larguras e posicionamentos flutuantes, a definição mais recomendada é a
de uso de porcentagem, escrita de 0 a 100 com o símbolo ‘%”. Assim, um
objeto com 50% de largura e margens direita e esquerda em 25% ficará
centralizado mesmo que seu objeto ou a tela sejam reajustados.

2.5. Backgrounds

Apesar do uso de fundos já serem antigos no CSS com cores sólidas ou até
mesmo imagens e seu dimensionamento e posicionamento, segundo Guerrero
e Macedo (2013), o CSS3 trouxe o uso de gradientes com a propriedade linear-
gradient; porém, assim como outras propriedades ainda não padronizadas
entre todos os navegadores, é necessário o uso de múltiplas propriedades para
que diversos navegadores possam renderizar de forma similar (MAZZA, 2014).
Há hoje bibliotecas que auxiliam nessa escrita, além de plugins para editores
de estilo e sites que geram online essas variações com base nos estilos
informados.

2.6. Media Queries

As media queries são uma recomendação W3C, desde 2012, e sua

compatibilidade com navegadores aumentou consideravelmente nos últimos
anos, tornando-se um padrão para todos os frameworks e sistemas modernos.
Há diversos parâmetros utilizados, porém os principais são ‘media’ com
definição de meio, sendo ‘screen’ para telas e ‘print’ para impressão e a
condição de tamanho de tela com min-width e max-width.
Com o passar dos anos tornou-se comum o uso de ‘mobile first’, um padrão de
desenvolvimento que prioriza o desenvolvimento inicial para telas pequenas
com as condições de largura de media queries para ajustes nos maiores
tamanhos até, por fim, ajuste para monitores grandes e televisões.
Devido à variedade de resoluções e tamanhos de tela de smartphones, tablets,
computadores e televisões, não há um padrão único de variações de media
queries, mas um framework muito utilizado na internet chamado Bootstrap,
criado inicialmente pela equipe do Twitter, realiza ajustes para as larguras de
380, 480, 760, 992 e 1200 pixels, ou seja, o site é desenvolvido para telas até
380, e depois ajustado a cada uma dessas quebras de tamanho. Com isso, as
exceções só são consideradas para dispositivos com telas maiores.
Além de media queries e fundos, o CSS3 trouxe também novos suportes e
efeitos como transformações, transições e animações, algumas com maior
abstração, permitindo a definição de um título para o conjunto de
transformações e chamada no objeto a esse nome, porém tratam-se de
conhecimentos mais avançados que serão buscados após compreensão dos
elementos básicos citados nessa documentação.

3. JavaScript

O JavaScript é uma linguagem de programação criada originalmente em 1995,

por Brendan Eich, e tornou-se padrão ECMA em 1997, sendo ECMAScript seu
nome oficial.
Em 2016, foi liberada a sua sétima versão, conhecida como ECMAScript 7, ou
ESCMAscript 2016, porém ainda não há suporte completo na maioria dos
navegadores. É importante apontar que JavaScript é completamente diferente
de Java, sendo este nome apenas uma jogada de marketing para aproveitar o
sucesso dessa outra linguagem (BALDUINO, 2014).
O JavaScript é uma linguagem orientada a objetos multiplataformas, pois além
de poder ser utilizada em aplicações web pelo usuário em seu navegador,
também pode ser utilizada em servidores, comunicando-se com bancos de
dados e arquivos de sistemas diretamente.
Como todas as linguagens de programação de alto nível, o script segue a
sintaxe básica constituindo um programa. Um programa de computador segue
um algoritmo, ou seja, uma lista de instruções a serem executadas pelo
computador.
Na sintaxe mais básica podemos apontar que suas sentenças são separadas
por ponto e vírgula ';' e consistem, ou não, de valores, operadores, expressões,
palavras-chave e comentários. Esses valores podem ser constantes ou
variáveis.
Com o JavaScript é possível alterar conteúdos, atributos, estilos, além de
esconder, exibir, e adicionar elementos à estrutura do HTML.
3.1. Aplicando JavaScript ao HTML

A aplicação do JavaScript no HTML pode ser feita através da inserção da tag

SCRIPT ou em arquivos externos com a chamada para o arquivo com ‘<script
src="script.js"></script>’, substituindo ‘script.js’ pelo nome do arquivo.
É altamente indicado manter o script separado da HTML, pois facilita a edição,
leitura, além de possibilitar o cacheamento desses arquivos estáticos de forma
mais agressiva do que para conteúdos dinâmicos, como o próprio documento
html.
Há diversas formas de exibição como retorno do JavaScript, ele pode alterar o
conteúdo de um elemento HTML com ‘innerHTML’, pode escrever no
documento HTML renderizado com ‘document.write()’, pode retornar caixas de
alerta com ‘window. alert()’ ou ainda retornar no console de erros do navegador
com ‘console.log()’, para auxiliar o desenvolvimento com a descoberta de erros.

3.2. DOM-Document Object Model

O HTML DOM ou somente DOM (Document Object Model), é o modelo de

objetos do documento que oferece propriedade e método para manipulação
dos objetos pelo JavaScript. Nesse conceito, quando o documento HTML é
carregado, tudo se torna um objeto, seja o documento, elementos, atributos ou
textos.
O objeto do documento em si é o pai de todos os demais elementos, e através
dele é possível realizar a manipulação dos objetos. Ele está contigo dentro do
objeto 'window', então é possível acessá-lo com 'window.document'.
Importante ressaltar que, para alteração elementos do HTML é ideal aguardar
que estes já tenham sido carregados, portanto, existem diversos eventos que
permitem disparar os comandos apenas após carregado, como o
‘windows.onload’.

3.3 Sintaxe de Programação

Como toda linguagem de programação, o JavaScript possui uma sintaxe

própria.
Os tipos de itens mais básicos são numéricos (Number) e textuais (String), e as
funções dos operadores serão diferentes para cada um deles por sua natureza.
A declaração de variáveis é feita com uma chamada própria declarando ‘var
nomeVariavel;’, ainda é possível atribuir um valor a esse item com o sinal de
igual seguido de um valor válido, como, por exemplo: ‘var numero = 10;’. Os
títulos das variáveis são sensíveis a caixa alta e baixa, dessa forma
‘nomeVariavel’ é diferente de ‘nomevariavel’.
O valor da variável pode ser diretamente um objeto, sendo um dos principais
métodos o getElementById("nomeDaIdentidade"), no qual será retornado o
elemento cujo id é "nomeDaIdentidade". A partir dessa variável, é possível
chamar os métodos desse objeto sem ser necessário o capturar novamente a
cada manipulação.

3.4. Operadores

É possível utilizar operadores aritméticos sobre as variáveis, de forma que se

utiliza os sinais ‘+’, ‘-’, ‘*’ e ‘/’ para efetuar adição, subtração, multiplicação e
divisão entre dois itens. Os operadores ‘++’ e ‘--’ servem para incrementar e
decrementar a variável e não é necessário um outro objeto.
Dessa forma, utiliza-se ‘var x = 2; var y = x +2;’ e o valor de y será 4, para ‘var x
=2; x++;’ o valor de x será igual a 3.
Também existem operadores relativos, que utilizam os sinais ‘=’, ‘+=’, ‘-=’, ‘*=’ e
‘/=’, representando copiar o valor, adicionar o valor ao valor atual, diminuir o
valor do valor atual, multiplicar pelo valor e dividir o valor atual pelo elemento
seguinte. Esses operadores evitam a repetição da variação. Assim o que seria
representado por ‘x = x + y’, será escrito como ‘x+=y’.
As variáveis de texto, strings, também possuem operadores, utilizando ‘=’ para
substituir o valor atual ou ‘+=’ para concatenar o valor da string ao final da
variável atual.

3.5. Controle de fluxo

Todo algoritmo possui um fluxo de sequência, possuindo uma estrutura de

controle sequencial, no qual todas as linhas de códigos são lidas e executadas
em sequência, em uma estrutura de controle condicional, com blocos de código
sendo executados apenas caso uma ou mais condições sejam atendidas, e
estruturas de controle de repetição, onde um bloco de código será repetido
uma quantidade definida de vezes ou até que um condicional seja atendido.
Para o controle sequencial não é necessário inserir nenhum tipo de código ou
bloco, sendo o padrão. Porém existem elementos específicos para os outros
dois.
Para iniciar um bloco de controle condicional, o JavaScript oferece as
declarações IF (se, em português, cria a condição), ELSE IF (caso contrário
então, caso o condicional anterior não for atendido, verifica essa condição) e
ELSE (caso contrário, executa se todas as condições anteriores não forem
atendidas).
var x = 2;
if (x > 3) {
bloco de código 1
} else if (x == 2) {
bloco de código 2
} else {
bloco de código 3
}
No bloco de código acima, temos a definição da variável ‘x’ com o valor
numérico dois. Há um primeiro condicional que retorna falso, pois x não é maior
do que três. Sendo falso o primeiro condicional, o segundo será verificado, e
este retorna verdadeiro, pois a variável é igual a dois (note que o símbolo
comparativo é ‘==’). Como o segundo condicional é verdadeiro não há entrada
no bloco do ‘ELSE’, dessa forma, apenas o bloco de código 2 será executado.
Para estrutura de controle de repetição o JavaScript oferece diversas opções,
como o ‘for in’, o ‘do while’ ou o ‘for’ simples, que será explicado a seguir. Para
criar um laço de repetição com FOR são necessários três parâmetros, a
variável e seu valor, a condição que a variável seja testada, e o passo de
atualização realizado a cada ciclo do laço. Assim podemos declarar a variável
como ‘i = 0’, colocar como condição ‘i < 5’ e definir o passo como ‘i++’ o que irá
incrementar a variável em 1 a cada ciclo, conforme visto abaixo.
for (var i = 0; i < 5; i++) {
console.log(i);
}
O código acima irá realizar o laço de repetição cinco vezes, pois inicia em 0 e
irá aumentar em 1 a cada passo até se tornar 5, e retornar falso para a
condição. No bloco de código é definido que o valor da variável deve ser
entregue no console do navegador, então teremos como resultado os valores
0, 1, 2, 3 e 4.

4. jQuery

O jQuery é uma biblioteca JavaScript criada para simplificar a criação de scripts

de manipulação de DOM, executados no navegador dos usuários. Também
tem como objetivo auxiliar na compatibilidade entre navegadores diferentes,
integração com CSS3 e reaproveitamento de código através do uso de plugins
específicos, além do uso de plugins de terceiros compartilhados (BALDUINO,
2014).
O uso dessa biblioteca exige que o arquivo com seu código seja vinculado à
página com uso da tag SCRIPT dentro do HEAD. Isso pode ser feito através de
link externo, preferencialmente com uso de CDN de versão atualizada, que
pode ser encontrada no próprio site do jQuery (https://jquery.com) ou com link
relativo, caso baixe a biblioteca e faça upload em seu próprio servidor.

4.1. Função $

O elemento '$' é o método de chamada para criação de objeto jQuery, e a

sintaxe básica é '$("seletor"). método()', no qual o seletor pode ser chamado
como seletores de CSS, por exemplo, para buscar elemento com ID específico,
basta utilizar no CSS, é possível que ocorra seleção para diversos elementos
do DOM (GUERRERO; MACEDO, 2013).

4.2. Seletores

Existem muitos seletores que podem ser utilizados com jQuery, mas os
principais são por identidade “#id”, por classe “.classe”, o próprio marcador “p”
e por seletor genérico para todos os elementos “*”, com a soma de seletores,
apenas os separando por vírgula.
Listas completas de seletores serão encontradas em páginas de
documentação, e podem ser muito úteis, pois há seletores extremamente
específicos como ‘:odd’, ‘:even’, ‘:last’ e ‘:first’ que seguidos de um seletor de
marcador, capturam todos os elementos pares, ímpares, o último e o primeiro,
respectivamente. Dessa forma, ‘$(“p:last”)’ irá selecionar o último elemento de
parágrafo.

4.3. Manipulação, Efeitos e Animações

A biblioteca oferece diversas manipulações de elementos DOM como métodos

prontos disponíveis a serem chamados para qualquer objeto selecionado. Dois
exemplos são o de esconder e exibir, com ‘hide()’ e ‘show()’. Assim como a
simplificação de captura de clique com ‘click’, de forma que basta iniciar este
método e indicar uma função a ser executada após o clique, conforme o código
abaixo.
$("#botao").click(function() {
$(".texto").hide();
});
O bloco de código acima descreve uma função jQuery($), que seleciona o
objeto de identidade ‘botao’ e irá adicionar um evento que acompanhará caso
este seja clicado. Ao ser clicado, será iniciada a função que seleciona o objeto
de classe ‘texto’ e requisita que este seja escondido (hide).
Efeitos e animações também serão, ou não, atingidos com um simples método,
através de ‘fade’, ‘slide’, ‘animate’ e outros. O método animate, por exemplo, irá
apenas requisitar informações sobre a animação, como, por exemplo, que o
objeto que será movido para baixo em 20 pixels, como no código a seguir
‘$(".texto").animate({bottom: '20px'});’

4.4. Plugins e Bibliotecas

Mesmo que a biblioteca jQuery ofereça diversas funcionalidades por conta, ela
também é base para a criação de plugins de funcionalidades específicas. Uma
lista completa pode ser obtida no repositório de plugins do próprio jQuery pelo
site (https://plugins.jquery.com).
Algumas funcionalidades serão em formulários, outros, para facilitar a
comunicação com outros serviços e APIs, através de Ajax e serão escolhidos
de acordo com a necessidade de cada projeto. Para carrosséis de imagens e
texto, indicamos o plugin Slick.
O uso de plugins segue documentação própria, sendo necessário versão de
jQuery compatível com o plugin e requisição de javascript do plugin após a
biblioteca, e inserção de chamada de inicialização própria.

Considerações finais

Conforme observado através da leitura dessa documentação, é visto que as

ferramentas disponíveis ao desenvolvedor de Front-End são muitas, e seus
conceitos são de grande complexidade.
Embora HTML e CSS não sejam linguagens de programação, possuem sintaxe
e regras próprias que devem ser obedecidas para uma correta estruturação e
estilização da página, principalmente se considerarmos que as páginas podem
se adequar para dispositivos móveis.
O HTML5 trouxe novos marcadores como section, nav, header e footer, e
novas funcionalidades como tocadores de áudio e vídeo embutidos na própria
página sem necessidade de plugins externos (FLASH); enquanto que CSS3
trouxe novos seletores, animações, gradientes e efeitos. Porém, mesmo que já
lançados a alguns anos, ainda não existe compatibilidade completa nos
principais navegadores, e muitas propriedades precisam ser inseridas para a
mesma funcionalidade, para maior garantia de funcionamento.
O JavaScript e o jQuery teve seu uso aumentado nos últimos anos, e sua
linguagem foi melhorada continuamente com foco, não apenas em aplicações
web, mas também na compilação para aplicações nativas e integrações com
sistemas.
Dessa forma, essa documentação não cobriu os temas em profundidade, mas
espera ter entregue todos os conceitos básicos dessas ferramentas de forma
que seja possível maior compreensão e aprofundamento nos assuntos de
interesse sem grande dificuldade.

Referências

BALDUINO, Plínio. Dominando JavaScript com jQuery. Editora Casa do

Código, 2014.
GUERRERO, José Antonio Camacho;MACEDO, Alessandra Alaniz.
Explorando HTML5, CSS3 e JQueryMobile no Controle e Monitoramento
de Casas Inteligentes - Capítulo 2, ReasearchGate. Novembro de 2013.
Disponível em:
<https://www.researchgate.net/publication/282085536_Explorando_HTML5_CS
S3_and_JQuery_mobile_for_intelligent_home_control.> Acesso em: 10 maio
2017.

MAZZA, Lucas. HTML5 e CSS3 Domine a web do futuro. Editora Casa do

Código, 2014.

SERRA, Ricardo Jorge Maia e Serra. Interfaces tácteis baseadas em

HTML5/CSS3/JavaScript - Dissertação de Mestrado e Integrado em
Engenharia Informática e Computação da Faculdade de Engenharia da
Universidade do Porto, 2011. Disponível em: <https://repositorio-
aberto.up.pt/bitstream/10216/63293/1/000149242.pdf.> Acesso em: 12 maio
2017.

W3C. W3C - World Wide Web Consortium. Disponível em:

<https://www.w3.org/.> Acesso em 7 maio 2017.

W3SCHOOLS. W3Schools Online Web Tutorials. Tutoriais e Guia de

Referências de HTML, CSS, JavaScript, XML. Disponível em:
<https://www.w3schools.com/.> Acesso em: 7 maio 2017.