introducao a programacao web

Prévia do material em texto

Apostila da Disciplina de 
Introdução a 
Programação Web 
 
 
Ementa da Disciplina: 
1.HTML 5. 2. CSS 3. 3. JavaScript. 4. Jquery. 
 
 
 
 
 
 
 
 
 
 
 
2017 
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çõese 
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 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 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 
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 
A figura apresentada exibi a estrutura bás
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 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
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 
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. 
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 
 
Fonte: W3Schools - HTML5 Semantic Elements 
A figura apresentada exibi a estrutura básica 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,
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 composiçã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 
dor LI) em lista não ordenada (marcador UL) para facilitar a 
A tag FOOTER define o rodapé do elemento, podendo conter textos de direitos 
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, 
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 
 
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, 
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 
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êselementos 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 
atributoFOR 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 
caixacom 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 deitens 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, sendonecessá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.