Unidade 4 - Bibliotecas

Prévia do material em texto

PADRÕES	WEB	
Pós-graduação	em	Desenvolvimento	de	Aplicações	Web	
Notas	de	aula	da	Unidade	IV		
Prof.	Marcos	Kutova	
©	PUC	Minas	Virtual.	Este	documento	é	de	autoria	e	de	propriedade	da	Pontifícia	Universidade		
Católica	de	Minas	Gerais	(PUC	Minas)	e	não	pode	ser	reproduzido	ou	utilizado	para		
qualquer	fim,	total	ou	parcialmente,	sem	a	devida	autorização	dessa	instituição.	
 
 
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
2 
1. WEB	DESIGN	RESPONSIVO	
• Em	materiais	impressos,	como	artigos	para	revistas	e	jornais,	temos	controle	sobre	todo	o	layout	das	
páginas.	Nas	páginas	da	Web,	porém,	não	temos	como	controlar	as	dimensões	da	tela,	pois	dependem	
do	dispositivo	de	cada	usuário.	
	
As	larguras	das	telas	podem	variar	de	3	a	mais	de	80	polegadas.	
• Web	Design	Responsivo	é	uma	forma	de	design	de	páginas	para	a	Web	que	considera	o	contexto	ou	
ambiente	em	que	as	páginas	serão	apresentadas,	inclusive	a	largura	das	telas	e	os	recursos	disponíveis	
em	cada	dispositivo.	
• Esse	termo,	Web	Design	Responsivo,	foi	criado	por	Ethan	Marcotte,	em	2010,	em	um	artigo	para	
o	site	A	List	Apart	(http://alistapart.com/article/responsive-web-design).		
• A	especificação	Media	Queries	(http://www.w3.org/TR/css3-mediaqueries/),	da	CSS3,	é	a	forma	mais	
básica	de	criação	de	designs	responsivos	(e	usada	por	Marcotte)	e,	geralmente,	é	baseada	na	largura	
da	janela	de	visualização	do	navegador.	
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
3 
2. ANÁLISE	DE	SITES	RESPONSIVOS	
• Uma	interessante	forma	de	aprendizado	sobre	web	design	responsivo	é	a	análise	de	sites	que	já	são	
responsivos.	
• Há	uma	boa	quantidade	de	exemplos	no	site	http://mediaqueri.es/.	
	
• É	importante	observar	que	alguns	sites	pela	web	são	realmente	responsivos.	Outros,	no	entanto,	
fazem	apenas	o	redirecionamento	para	um	segundo	conjunto	de	páginas	a	partir	da	detecção	da	user	
agent	string	no	navegador	do	usuário.	
• Por	meio	de	extensões	dos	navegadores	ou	por	ferramentas	online	como:	
• http://design.google.com/resizer/		
• http://responsivepx.com/	
• http://www.responsinator.com/	
• http://mattkersley.com/responsive/	
• http://quirktools.com/screenfly/	
	
• OBS:	O	site	responsive.is,	citado	na	videoaula,	foi	desativado.	
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
4 
3. JANELA	DE	VISUALIZAÇÃO	
• Janela	de	visualização	(viewport)	é	a	área	da	janela	do	navegador	destinada	à	apresentação	do	
conteúdo,	excluindo	as	barras	de	rolagem	e	os	menus	do	navegador.	
• Nos	computadores,	A	janela	de	visualização	pode	ser	aumentada	ou	diminuída	na	medida	em	que	
redimensionamos	a	janela	do	navegador,	isto	é,	a	janela	de	visualização	tem,	sempre,	quase	o	mesmo	
tamanho	da	janela	do	navegador.	
	
• Nos	smartphones,	a	janela	de	visualização	pode	ser	maior	ou	menor	do	que	a	janela	do	navegador.	
Isso	acontece	quando	a	quantidade	de	pixels	definida	para	a	janela	de	visualização	é	diferente	da	
quantidade	de	pixels	que	o	aparelho	possui.	
	
• Um	smartphone	pode	ter	uma	janela	de	320	pixels	físicos	de	largura,	mas	a	janela	de	visualização	
ter	1024	pixels	de	visualização	de	largura.	Isso	significa	que	será	necessário	usar	mecanismos	de	
rolagem	da	janela	de	visualização.	
 	
Janela 
redimensionada
para comportar 
o conteúdo
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
5 
• O	pixel	da	janela	de	visualização,	chamado	de	pixel	CSS	ou	pixel	de	referência,	significa	um	ponto	de	
um	determinado	tamanho,	que	não	depende	da	resolução	da	tela.	Esse	ponto	equivale	a	cerca	de	
1/96	de	polegada,	para	quem	está	a	um	braço	de	distância	da	tela.	Em	outras	palavras,	serve	apenas	
como	referência	para	o	tamanho	das	coisas.	
	
http://www.w3.org/TR/css3-values/	
• Geralmente,	os	navegadores	adotam	uma	determinada	largura	em	pixels	CSS	para	a	janela	de	
visualização.	Nesses	casos,	se	o	aparelho	possuir	mais	pixels	físicos,	ele	apenas	exibirá	as	informações	
com	melhor	qualidade	(definição).	
• A	relação	entre	os	pixels	físicos	por	polegada	(da	tela)	é	chamada	de	densidade	de	pixels.	
• Cada	navegador	define	uma	largura	inicial	baseada	em	pixels	de	referência:	
• Safari:		 980	pixels	de	referência	
• Opera:	 850	pixels	de	referência	
• Android:	 800	pixels	de	referência	
• Windows	Phone:		 1024	pixels	de	referência	
• É	possível	ajustar	essa	largura	inicial	(ex.:	para	320	pixels)	por	meio	do	elemento	<meta>	da	HTML.		
<meta name="viewport" content="width=320" /> 
• Também	é	possível	associar	a	janela	de	visualização	à	largura	do	dispositivo.	
<meta name="viewport" content="width=device-width" /> 
 	
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
6 
• ATENÇÃO:	Os	aparelhos	de	alta	definição	nem	sempre	adotam	uma	maior	quantidade	de	pixels	de	
referência,	mesmo	tendo	mais	pixels	físicos.	Por	exemplo,	o	iPhone	5	possui	750	pixels	físicos	de	
largura.	No	entanto,	ao	atribuirmos	o	valor	device-width	ao	atributo	width	da	janela	de	visualização,	
o	navegador	considerará	375	pixels	CSS,	um	pouco	a	mais	que	o	iPhone	3GS.	A	principal	diferença	será	
uma	melhor	definição	das	imagens	e	dos	textos.	Isso	acontece	para	que	ainda	seja	mantida	a	
legibilidade	das	informações	da	página.		
• Para	sabermos	que	valor	será	adotado	por	cada	smartphone,	precisamos	conhecer	a	razão	entre	os	
pixels	físicos	e	os	pixels	CSS,	mais	conhecida	como	CSS	pixel	ratio.		
	
• Outros	atributos	da	janela	de	visualização	(a	serem	inseridos	no	atributo	content:	
• height		 	 determina	a	altura	da	janela	de	visualização	em	pixels	(geralmente 
		 	 	 definida	automaticamente	em	função	da	largura).	
• initial-scale		 indica	o	nível	de	zoom	inicial	da	página	(geralmente	definido	para	um	valor	
		 	 	 que	comporte	toda	a	largura	especificada	com	o	atributo	width).	
• minimum-scale,	 especificam	os	valores	mínimo	e	máximo	do	nível	de	zoom.	
maximum-scale	
• user-scalable		 determina	se	o	usuário	pode	ou	não	realizar	um	zoom	na	janela	de	
		 	 	 visualização.	
• Também	é	possível	definir	todos	esses	atributos	da	janela	de	visualização	por	meio	da	regra	
@viewport	da	CSS,	de	acordo	com	a	especificação	CSS	Device	Adaptation	(https://www.w3.org/TR/css-
device-adapt-1/).	
320x480 px
CSS Pixel Ratio = 1
640x960 px
CSS Pixel Ratio = 2
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
7 
4. MEDIA	QUERIES	
• A	especificação	Media	Queries	(https://www.w3.org/TR/css3-mediaqueries/)	permite	que	
apresentação	da	página	seja	feita	de	acordo	com	as	características	da	janela	de	visualização.	
• Uma	media	query	é	uma	expressão	lógica	que	testa	o	tipo	de	mídia	(tela,	impressão,	...)	do	agente	do	
usuário	e,	opcionalmente,	de	uma	ou	mais	de	suas	características.	
• Essa	expressão	é	testada	por	meio	da	regra	@media:	
@media screen { /* apenas para exibição em tela */ 
 p { 
 color: #99F; 
 background-color: #CCC; 
 } 
} 
@media print { /* apenas para impressão */ 
 p { 
 color: #000; 
 background-color: #FFF; 
 } 
} 
• Além	da	definição	do	tipo	de	mídia,	é	possível	especificar	características	dessas	mídias:	
• width		 	 indica	a	largura	da	janela	de	visualização	
• height		 	 indica	a	altura	da	janela	de	visualização	
• device-width		 indica	a	largura	da	janela	do	dispositivo	
• device-height		 indica	a	altura	da	janela	do	dispositivo	
• orientation			 indica	se	o	modo	usado	para	navegação	é	retrato	ou	paisagem.	Os	valores		
		 	 	 são	portrait	e	landscape.	
• aspect-ratio		 indica	a	razão	entre	a	largura	e	a	altura	da	janela	de	visualização	
• monochrome		 	 indica	se	a	tela	ou	dispositivo	é	monocromático.	
• resolution		 	 indica	a	resolução	da	tela	em	pontos	por	polegada	ou	pontos	por		
		 	 	 centímetros.• Os	parâmetros	numéricos	dessa	lista	podem	ser	prefixados	com	min-	ou	max-	de	tal	forma	que	
possamos	criar	faixas	de	valores.		
• Os	parâmetros	também	podem	ser	combinados	por	meio	dos	operadores	and,		not	e	only.	
@media all and (min-width: 600px) { 
 ... 
} 
@media handheld and (max-width: 240px) { 
 ... 
} 
@media only all and (orientation: landscape) { 
 ... 
} 
 
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
8 
• É	recomendável	que	você	use	o	termo	only	nas	suas	cláusulas	@media,	pois	os	navegadores	que	ainda	
não	implementaram	a	especificação	media	queries	completa	ignoram	tudo	o	que	eles	não	conhecem.	
• É	importante	evitar	repetição	ou	sobreposição	de	regras.	Assim,	é	recomendável	adotar	uma	
abordagem	bottom-up	(do	dispositivo	mais	simples	para	o	mais	sofisticado)	conhecida	como	a	técnica	
das	melhorias	progressivas.	
/* definições de estilos gerais fora da regra @media */ 
... 
 
/* estilos adicionais para smartphones – inclui as regras gerais */ 
@media only all and (min-width:320px) { 
 ... 
}
	
	
/* estilos adicionais para tablets e computadores – inclui regras gerais e 
 as anteriores */	
@media only all and (min-width:640px) { 
 ... 
} 
• Também	é	possível	inserir	as	regras	media	por	meio	da	HTML.	
<link rel="stylesheet" type="text/css" href="base.css" /> 
<link rel="stylesheet" type="text/css" href="smartphone.css" 
 media="only all and (max-width:640px)" /> 
<link rel="stylesheet" type="text/css" href="computador.css" 
 media="only all and (min-width:641px)" /> 
 
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
9 
5. ESTRATÉGIAS	DE	ADAPTAÇÃO	
• A	adaptação	das	aplicações	web	para	dispositivos	portáteis	não	deve	ser	baseada	na	duplicação	das	
páginas:	uma	adequada	para	computadores	e	outra	adequada	para	smartphones	(e	outras	para	os	
futuros	dispositivos	que	vierem	ser	a	usados	para	navegação:	TVs,	relógios,	óculos,	...).	
• O	W3C	propôs	o	conceito	de	uma	Web	Única:	a	mesma	informação	e	os	mesmos	serviços	devem	estar	
disponíveis	aos	usuários	independentemente	do	dispositivo	de	acesso	que	eles	usem	(pelo	menos	
enquanto	isso	fizer	sentido)	
• Isso	não	significava	que	exatamente	a	mesma	informação,	com	exatamente	a	mesma	
representação,	deve	ser	adotada	em	todos	os	dispositivos.	
• http://www.w3.org/TR/mobile-bp/#OneWeb		
• Existem	três	técnicas	de	Web	Design	Responsivo:	layouts	fluidos,	detecção	de	recursos	do	navegador	e	
detecção	de	dispositivos.	
• O	uso	de	layouts	fluidos	é	a	técnica	mais	comum	de	Web	Design	Responsivo	e	se	baseia	na	
apresentação	das	informações	a	partir	da	largura	da	janela	de	visualização.	
• A	forma	mais	simples	de	criação	de	layouts	fluidos	é	por	meio	das	Media	Queries.	
• Os	frameworks	CSS,	como	o	Bootstrap,	oferecem	um	conjunto	de	regras	CSS	(e	algo	mais)	para	a	
criação	de	layouts	fluidos	com	bastante	facilidade.	
• A	abordagem	chamada	Melhorias	Progressivas	(Progressive	Enhancement)	recomenda	que	os	
designers	elaborem	primeiro	a	versão	para	dispositivos	mais	simples	e	que	façam	as	adaptações	
para	dispositivos	mais	complexos.	
• Por	dispositivos	mais	simples,	podemos	tanto	entender	aqueles	que	são	menores	(tela	menor,	
sem	teclado,	sem	mouse,	etc.)	quanto	aqueles	que	possuem	menos	recursos	(geolocalização,	
armazenamento	local,	navegador	antigo,	...).	
• A	alternativa	a	um	layout	fluido	é	o	layout	adaptativo,	em	que	os	elementos	(e	não	apenas	a	sua	
formatação)	são	determinados	a	partir	dos	recursos	e	das	características	dos	dispositivos.	
• A	criação	de	layouts	adaptativos	pode	ser	feita	por	meio	da	detecção	de	recursos	no	navegador	
ou	por	meio	da	detecção	de	dispositivos	feita	no	servidor.	
• A	detecção	de	recursos	geralmente	se	baseia	em	um	teste	de	uso	do	recurso	por	meio	de	JavaScript.	
• A	detecção	de	dispositivos,	no	servidor,	é	feita	por	meio	da	análise	da	User	Agent	String.	
• Essa	técnica	é	a	que	gera	as	menores	páginas	para	envio	aos	clientes,	pois	todo	o	trabalho	de	
adaptação	é	feito	no	servidor	(mas	aumenta	o	processamento	neste).	
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
10 
6. DETECÇÃO	DE	RECURSOS	
• A	detecção	de	recursos	é	apenas	o	teste	das	funcionalidades	que	o	navegador,	sistema	ou	dispositivo	
oferece.	Pode	ser	feita	por	meio	da	tentativa	de	uso	de	um	determinado	recurso.	
if( navigator.geolocation ) { 
 // usa a geolocalização 
} 
• Existem	bibliotecas,	como	a	Modernizr	(https://modernizr.com/),	que	já	realizam	todos	os	testes	
automaticamente,	dispensando	a	necessidade	do	desenvolver	criá-los	manualmente.	
• A	inclusão	da	biblioteca	pode	ser	feita	da	mesma	forma	que	um	arquivo	JavaScript	externo	qualquer.	
<script src="modernizr.min.js"></script> 
• O	teste	de	recursos	é	feito	por	meio	do	objeto	Modernizr.	
if( Modernizr.localstorage ) { 
 // usa o armazenamento local 
} 
else { 
 // não possui armazenamento local, usa um polyfill 
} 
• A	propriedade	localstorage	é	uma	das	diversas	testas	com	a	Modernizr.	A	lista	completa	pode	
ser	encontrada	na	seção	Features	detected	by	Modernizr	da	documentação	da	biblioteca	
(https://modernizr.com/docs).	
• O	teste	de	recursos	também	pode	ser	feito	por	meio	de	uma	classe	CSS.	A	Modernizr	insere	uma	
classe	com	o	nome	da	propriedade	para	cada	recurso	oferecido	pelo	navegador	e	com	o	mesmo	nome	
da	propriedade,	mas	precedido	por	no-	para	cada	recurso	não	oferecido.	
<html class="fontface borderradius canvas svg no-csstransforms 
 no-csstransitions ..."> 
 ... 
</html> 
• A	partir	daí,	a	formatação	dos	elementos	pode	ser	feito	por	meio	de	seletores	descendentes.	
HTML: <p id="coord">43W 19S</p> 
CSS: html.no-geolocation #coord { 
 display: none; 
 } 
• Os	recursos	que	não	estiverem	disponíveis	podem	ser	substituídos	por	funções	JavaScript	que	realizem	
a	mesma	funcionalidade.	Essas	funções	são	chamadas	de	polyfill	
(https://remysharp.com/2010/10/08/what-is-a-polyfill).	A	própria	biblioteca	Modernizr	oferece	um	
extenso	conjunto	de	polyfills.	
 	
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
11 
• A	inclusão	de	um	polyfill	em	uma	página	pode	ser	feita	com	a	própria	Modernizr,	por	meio	do	seu	
método	load().	
Modernizr.load({ 
 test: Modernizr.geolocation, 
 yep : 'geo.js', 
 nope: 'geo-polyfill.js' 
}); 
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
12 
7. DETECÇÃO	DE	DISPOSITIVOS	
• A	User	Agent	String,	é	uma	espécie	de	assinatura	de	cada	versão	de	cada	navegador	em	cada	
dispositivo,	que	faz	parte	do	protocolo	HTTP	
• Agente	do	usuário	(user	agent)	é	um	software	que	recupera,	analisa,	apresenta	e	facilita	a	
interação	do	usuário	com	o	conteúdo	web.	Agentes	do	usuário	tanto	podem	ser	os	navegadores	
como	qualquer	outra	aplicação	que	recupere	e	manipule	páginas	web.	
• Exemplo:	
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.77.4 (KHTML, like 
Gecko) Version/7.0.5 Safari/537.77.4 
• Navegador:		 	 	 Safari	7.0.5	compatível	com	a	versão	5.0	do	Mozilla	
• Sistema	Operacional:			 MAC	OS	X	10.9.4	
• Sistema	de	renderização:		 Apple	Web	Kit	
• Existem	milhares	de	user	agent	strings,	cada	uma	representa	um	contexto	específico	
(http://www.useragentstring.com/).	
• A	detecção	de	dispositivo	por	meio	da	user	agent	string	geralmente	é	feita	no	servidor.	Para	isso,	é	
feita	por	meio	de	alguma	linguagem	de	programação	do	lado	do	servidor	(ex.:	PHP).	
<?php 
 print( $_SERVER[ 'HTTP_USER_AGENT' ] ) 
?> 
• A	partir	do	momento	em	que	se	obtém,	no	servidor,	a	user	agent	string	do	navegador,	é	possível	fazer	
dois	tipos	de	testes:	
• Testar	se	existe	algum	termo	que	identifique	dispositivos	mobile:	mobile,	mobi,	iphone,	ipod,	
android,	blackberry,	entreoutros.	Isso,	entretanto,	apenas	nos	permite	descobrir	se	o	
aparelho	é	mobile	ou	não.	Além	disso,	pode	haver	alguns	falsos	diagnósticos.		
• Buscar	as	características	do	dispositivo	em	um	repositório	de	descrição	de	dispositivos	(Device	
Description	Repository	–	DDR).	Um	desses	repositórios	é	o	WURFL,	da	Scientia	Mobile	
(http://wurfl.sourceforge.net/).	
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
13 
8. ADAPTAÇÃO	DO	LADO	DO	SERVIDOR	
• Da	mesma	forma	que	a	biblioteca	Modernizr	oferece	um	apoio	à	detecção	de	recursos	no	navegador,	
o	script	MobileDetect	(http://mobiledetect.net/),	em	PHP,	apoia	a	detecção	de	recursos	por	meio	da	
user	agent	string.	
• Esse	script	já	foi	elaborado	dentro	de	uma	abordagem	chamada	RESS	que,	basicamente,	orienta	a	
combinação	entre	Web	Design	Responsivo	e	Adaptação	do	Lado	do	Servidor.	A	sigla	RESS	vem	de	
Responsive	Web	Design	with	Server	Side	Components.	
• Este	código	mostra	a	incorporação	da	detecção	de	dispositivos	em	um	script	PHP.	O	método	isMobile()	
indica	se	o	dispositivo	é	mobile	e	o	método	isTablet()	indica	se	o	dispositivo	é	um	tablet.	
require_once "Mobile_Detect.php"; 
$detect = new Mobile_Detect; 
// testa qualquer dispositivo mobile (smartphones e tablets) 
if ( $detect->isMobile() ) { 
 // código para dispositivos mobile 
} 
// testa qualquer tablete 
if ( $detect->isTablet() ) { 
 // código para tablets 
} 
• Existe	vários	outros	métodos	para	determinar	o	dispositivo	específico.	No	entanto,	é	importante	
considerar	que	a	análise	da	user	agent	string	não	é	100%	segura,	especialmente	porque	novos	
navegadores	ou	dispositivos	são	criados	a	cada	momento.	
isMobile() isTablet() isiPhone() 
isBlackBerry() isSamsung() isSamsungTablet() 
isiPad() isKindle() isiOS() 
isAndroidOS() isJava() isChrome() 
isFirefox() isSafari() etc. 
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
14 
9. BOOTSTRAP:	FORMATAÇÃO	
• O	Bootstrap	(http://getbootstrap.com/)	é	um	framework	composto	por	recursos	HTML,	CSS	e	
JavaScript	que	facilitam	a	criação	de	páginas	responsivas.	
• Uma	página	responsiva	é	uma	página	que	se	adapta	aos	diferentes	contextos	de	navegação.	
• O	Bootstrap	depende	da	biblioteca	JavaScript	jQuery	(http://jquery.com/),	que	será	apresentado	
na	disciplina	Tecnologias	Front-end.	jQuery	possui	uma	coleção	de	recursos	que	facilitam	a	
seleção	de	elementos,	manipulação	de	eventos,	requisições	assíncronas	e	muito	mais.	
• A	inserção	do	Bootstrap	em	um	página	pode	ser	feita	da	seguinte	forma	(considerando	a	eventual	
necessidade	de	atualização	das	versões	citadas	no	código).	
<!DOCTYPE html> 
<html lang="pt-br"> 
 <head> 
 <meta charset="utf-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
 <title>Bootstrap 101 Template</title> 
 <link href="css/bootstrap.min.css" rel="stylesheet"> 
 </head> 
 <body> 
 
 <!--Aqui entra o conteúdo da sua página --> 
 
 <script src="js/jquery.min.js"></script> 
 <script src="js/bootstrap.min.js"></script> 
 </body> 
</html> 
• Esse	código	é	uma	versão	resumida	do	esqueleto	básico	divulgado	no	site	do	Bootstrap	e	não	
oferece	suporte	a	versões	anteriores	à	10	do	Microsoft	Internet	Explorer.	
• Os	scripts	são	carregados	no	fim	da	página	para	se	garantir	que	todo	o	restante	dos	códigos	
HTML	e	CSS	já	terá	sido	carregado.	
• Esse	código	pressupõe	que	o	Bootstrap	e	o	jQuery	foram	baixados	e	são	usados	localmente.	
• O	Bootstrap	possui	um	conjunto	de	estilos	próprio,	incluindo	tipos,	tamanhos	e	estilos	de	fontes,	
alinhamentos,	espaçamentos,	cores,	etc.	Isso	facilita	a	criação	de	páginas,	já	assegurando	que	elas	
terão	uma	qualidade	estética	mínima.	Esses	estilos	já	estão	associados	aos	elementos	da	HTML	por	
meio	da	CSS	e,	portanto,	não	é	necessário	fazer	nada	para	aplicá-los.	
• No	entanto,	o	uso	do	framework	da	forma	básica,	isto	é,	sem	uma	configuração	personalizada,	
pode	levar	à	semelhança	de	um	site	com	os	demais	e	a	uma	certa	redução	da	diversidade.		
• O	Bootstrap	oferece,	no	entanto,	algumas	classes	para	uma	formatação	mais	personalizada	de	
parágrafos.	
• Parágrafos	com	a	classe	lead	são	apresentados	de	forma	destacada.	
<p class="lead">Parágrafo destacado</p> 
• O	alinhamento	em	parágrafos	pode	ser	feito	por	meio	das	classes	text-left,	text-center,	
text-right,	text-justify	e	text-nowrap.	
<p class="text-center">Parágrafo centralizado</p> 
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
15 
• A	transformação	do	texto	pode	ser	feita	por	meio	das	classes	text-lowercase,	text-uppercase	
e	text-capitalize.	
<p class="text-uppercase">Parágrafo somente em maiúsculas</p> 
• A	classe	blockquote-reverse	muda	o	alinhamento	do	blockquote	da	esquerda	para	a	direita.	
<blockquote class="blockquote-reverse">A Web não apenas conecta 
máquinas,<br/>ela conecta pessoas.<footer><cite>Berners-Lee, 
2008</cite></footer></blockquote> 
• As	listas	também	recebem	um	tratamento	especial	do	Bootstrap.	É	possível,	por	exemplo,	remover	os	
marcadores	de	uma	lista	atribuindo	a	ela	a	classe	list-unstyled	e	é	possível	dispor	os	elementos	
lado	a	lado	(ao	invés	de	um	por	linha)	usando	a	classe	list-inline.	
<ul class="list-inline"> 
 <li>...</li> 
</ul> 
• O	Bootstrap	também	oferece	formatação	predefinida	para	os	parágrafos	que	tenham	um	significado	
especial,	como	um	alerta,	uma	mensagem	de	erro,	uma	confirmação	de	operação	bem-sucedida	e	
outros	do	gênero.	Essa	formatação	é	atribuída	por	meio	das	seguintes	classes:	
<p class="text-muted">...</p> 
<p class="text-primary">...</p> 
<p class="text-success">...</p> 
<p class="text-info">...</p> 
<p class="text-warning">...</p> 
<p class="text-danger">...</p> 
• Enquanto	as	classes	acima	formatam	o	texto,	as	seguintes	classes	formatam	a	cor	de	fundo	do	
parágrafo:	
<p class="bg-primary">...</p> 
<p class="bg-success">...</p> 
<p class="bg-info">...</p> 
<p class="bg-warning">...</p> 
<p class="bg-danger">...</p> 
• Todas	essas	classes	possuem	uma	cor	predefinida	que,	eventualmente,	pode	não	se	adequar	à	
proposta	da	sua	aplicação	web.	Por	exemplo,	a	cor	primária	é	um	azul.	Mas	é	possível	alterar	não	só	
essas	cores,	como	também	todas	as	outras	predefinições	do	Bootstrap,	inclusive	as	fontes	usadas.	
• Para	isso,	é	importante	fazer	os	ajustes	de	configuração	na	página	do	Bootstrap	
(http://getbootstrap.com/customize/)	e,		em	seguida,	baixar	a	versão	personalizada.	
• Existem	muitas	outras	classes	CSS	do	Bootstrap	que	podem	nos	ajudar	a	formatar	melhor	a	nossa	
aplicação,	mas	analisar	cada	uma	ultrapassaria	o	escopo	deste	material.	Assim,	vale	a	pena	navegar	
pela	documentação	disponível	em	http://getbootstrap.com/css/.	
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
16 
10. BOOTSTRAP:	GRADES	
• Existem	duas	formas	de	criação	de	layouts	responsivos	no	Bootstrap,	ambos	baseados	nas	Media	
Queries.	
• Um	layout	fixo,	em	que,	para	cada	faixa	de	resolução,	nós	temos	uma	largura	pré-definida	para	o	
conteúdo	é	feita	por	meio	da	classe	container.	
• Na	resolução	extra-small	(<768px),	o	layout	passa	a	ser	fluido.	
• Um	layout	fluido,	que	se	ajusta	à	largura	do	navegador,	é	feito	por	meio	da	classe	contaneir-
fluid.	
<div class="container" style="background: #ccc"> 
 <h1>Hello, world!</h1> 
</div> 
• Resoluções	do	Bootstrap:	
• Extra-small	(.col-xs-)	 <768px	(12	colunas	de	largura	automática	e	ocupando	toda	a 
		 largura	da	janela)	
• Small	(.col-sm-)	 >=768px	(12	colunas	de	~62px,	container	de	largura	de	750px)	
• Medium	(.col-md-)	 >=992px	(12	colunas	de	~81px,	container	de	largura	de	970px)	
• Large	(.col-lg-)	 >=1200px	(12	colunas	de	~97px,	container	de	largura	de	1170px)	
<div class="container" id="colunas"> 
 <div class="row" > 
 <div class="col-sm-2 col-md-1">1</div><div class="col-sm-10 col-md-7">2</div> 
 <div class="col-sm-12 col-md-4">3</div> 
 </div> 
 <div class="row"> 
 <div class="col-md-8">4</div> 
 <div class="col-md-4">5</div> 
 </div> 
</div> 
• Para	ver	as	colunas	com	mais	clareza,	aplique	a	seguinte	formatação	a	esse	exemplo:	
#colunas > div > div { 
 background-color: lightgray; 
 border: thin solid black; 
} 
• O	exemplo	acima	cria	duas	linhas	e	insere,	na	primeira	linha,	três	elementos	de	1,	7	e	4	colunas	
de	largura,	respectivamente,	a	partir	da	resolução	média	(isto	é,	para	a	média	e	para	a	alta).	Na	
resolução	baixa	(small),	os	três	elementos	passam	a	ter	2,	10	e	12	colunas	de	largura,	ficando	os	
dois	primeiros	em	uma	linha	(total	de	12	colunas)	e	o	terceiro	em	uma	outra	linha.	Na	resolução	
muito	baixa	(extra-small),	cada	elemento	terá	12	colunas	de	largura	(ou	seja,	uma	linha),	pois	não	
houve	outra	especificação.		
• O	Boostrap	sempre	considera	que	a	formatação	vale	para	a	resolução	indicada	e	superiores.	
• Na	segunda	linha,	assim,	os	elementos	terão	largura	de	12	colunas	nas	resoluções	muito	baixa	e	
baixa	e	larguras	8	e	4	nas	resoluções	média	e	alta.	
• Cada	elemento	tem,	por	sua	vez,	suas	próprias	12	colunas.	Assim,	é	possível	colocar	um	ajuste	de	
grade	dentro	de	outro,	criando	algo	como	subcolunas.	
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
17 
11. BOOTSTRAP:	FORMULÁRIOS	
• A	formatação	de	formulários	também	é	feita	por	meio	de	algumas	simples	especificações	de	classe,	
como	mostra	o	exemplo	abaixo.	
• O	elemento	form	possui	um	atributo	role	com	o	valor	form.	Esse	é	um	atributo	de	acessibilidade	
da	especificação	ARIA,	que	significa	Accessible	Rich	Internet	Applications.	
<form role="form"> 
 <div class="form-group"> 
 <label for="nome">Nome</label> 
 <input type="nome" class="form-control" id="nome" 
 placeholder="Informe seu nome completo"> 
 </div> 
 <div class="form-group"> 
 <label for="email">Email</label> 
 <input type="email" class="form-control" id="email" placeholder="Informe 
seu email" /> 
 </div> 
 <div class="form-group"> 
 <button type="submit" class="btn btn-default">Cadastrar</button> 
 </div> 
</form> 
• Nesse	exemplo,	cada	par	de	rótulo	e	campo/controle	foi	inserido	dentro	de	um	elemento	div	da	
classe	form-group	(inclusive	o	botão).		
• Os	campos	textuais	(input,	textarea	e	select)	são	formatados	com	a	classe	form-control,	
que	estabelece	a	largura	de	100%	(do	componente	pai).	
• Este	é	o	formulário	que	dispõe	os	campos	verticalmente.	
• A	disposição	dos	campos	horizontalmente	é	feita	por	meio	da	atribuição	da	classe	form-inline	ao	
elemento	form.	
• É	possível	omitir	os	rótulos	dos	formulários	nos	navegadores	convencionais,	mantendo-os	apenas	nas	
páginas	dos	navegadores	acessíveis.	Para	isso,	basta	atribuir	a	classe	sr-only	a	cada	rótulo.	Nesses	
casos,	o	atributo	placeholder	deve	indicar	claramente	o	conteúdo	esperado	para	o	campo:	
<div class="form-group"> 
 <label for="email" class="sr-only">Email</label> 
 <input type="email" class="form-control" id="email" 
 placeholder="seu_email@seu_servidor.com"/> 
</div> 
• Podemos	manter	também	o	rótulo	junto	do	campo,	como	um	único	objeto	de	interface,	trocando	a	
classe	do	div	para	input-group	e	trocando	a	classe	do	rótulo	para	input-group-addon.	
<div class="input-group"> 
 <label for="email" class="input-group-addon">Email</label> 
 <input type="email" class="form-control" id="email" 
 placeholder="seu_email@seu_servidor.com"/> 
</div> 
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
18 
• Uma	outra	forma	de	apresentação	dos	campos	de	um	formulário	é	a	que	os	rótulos	ficam	na	mesma	
linha	dos	campos,	próximos	a	eles	(alinhados	pela	direita,	mas	não	chegam	a	encostar	nos	campos).	
Para	isso,	precisamos	dos	seguintes	ajustes:	
• O	formulário	deve	ser	da	classe	form-horizontal	para	que	rótulos	e	campos	fiquem	nas	
mesmas	linhas.	
• Os	rótulos	devem	ser	da	classe	control-label	para	que	fiquem	alinhados	horizontalmente	pela	
direita	e	verticalmente	com	o	campo.	Também	é	possível	indicar	quantas	colunas	os	rótulos	
ocuparão.	
• Os	campos	não	podem	ter	a	indicação	de	colunas	diretamente,	assim,	ficarão	dentro	de	
elementos	div	que	especificarão	a	largura.	
 <form role="form" class="form-horizontal"> 
 <div class="form-group"> 
 <label class="col-sm-2 control-label" for="nome">Nome</label> 
 <div class="col-sm-10"> 
 <input type="nome" class="form-control" id="nome" 
 placeholder="Informe seu nome completo"></div> 
 </div> 
 <div class="form-group"> 
 <label for="email" class="col-sm-2 control-label">Email</label> 
 <div class="col-sm-10"> 
 <input type="email" class="form-control" id="email" 
 placeholder="seu_email@seu_servidor.com" /></div> 
 </div> 
 <div class="input-group col-sm-10 col-sm-offset-2"> 
 <button type="submit" class="btn btn-primary">Cadastrar</button> 
 </div> 
 </form> 
• O	botão	foi	deslocado	duas	colunas	para	a	direita,	por	meio	da	inserção	da	classe	 
col-sm-offset-2.	
• O	botão	também	foi	classificado	como	primário,	tendo	sua	cor	alterada,	por	meio	da	classe		
btn-primary.	Várias	outras	configurações	de	botões	podem	ser	vistas	em:	
http://getbootstrap.com/css/#buttons.		
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
19 
12. BOOTSTRAP:	COMPONENTES	
• O	Bootstrap	oferece	um	conjunto	de	componentes	prontos	para	serem	usados	nas	páginas	web.	Esses	
componentes	implementam	os	principais	padrões	de	projeto	de	interface,	isto	é,	os	componentes	de	
interface	mais	comuns	em	projetos	diferentes.	
ÍCONES	
• Um	desses	componentes	é	o	Glyphicons:	um	conjunto	de	ícones	para	serem	usados	como	rótulos	de	
botões	ou	livremente	nas	páginas.	
<button type="button" class="btn btn-default" aria-label="Zoom"> 
 <span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span> 
</button> 
• Cada	ícone	deve	possuir	a	classe	genérica	glyphicon	e	a	classe	específica	que	indica	qual	ícone	
será	usado	(ex.:	glyphicon-zoom-in).		
• Os	atributos	aria-label	e	aria-hidden	são	usados	em	leitores	de	tela	e	outros	navegadores	
acessíveis.	O	atributo	aria-label	mostra	um	texto	alternativo	ao	ícone	e	o	atributo	aria-
hidden	indica	que	o	ícone	é	decorativo	e	não	deve	ser	interpretado.	
BARRA	DE	NAVEGAÇÃO	
• O	elemento	navbar	é	usado	para	criar	uma	barra	de	navegação.	O	conteúdo	ficará	dentro	de	um	div	
da	classe	container-fluid	para	melhor	organização	do	espaço.	
• Uma	barra	de	navegação	pode	ter	um	cabeçalho.	Nesse	cabeçalho	podemos	incluir,	por	exemplo,	
uma	logomarca	com	link	para	a	homepage.	O	cabeçalho	nada	mais	é	do	que	um	div	da	classe	
navbar-header	e	a	logomarca	pode	ser	um	texto	ou	uma	imagem	em	um	link	(ou	elemento	
span)	da	classe	navbar-brand.	
• Os	botões	são	botões	convencionais	aos	quais	acrescentamos	a	classe	navbar-btn.	
• Um	formulário	da	classe	navbar-form	pode	ser	acrescentado	à	barra	de	navegação.	
• O	alinhamento	de	um	componente	à	direita	é	feito	por	meio	da	classe	navbar-right.	
• Há	diversos	outros	recursos	de	barra	de	navegação	que	podem	ser	vistos	na	documentação.	
<nav class="navbar navbar-default"> 
 <div class="container-fluid"> 
 <div class="navbar-header"> 
 <a href="/" class="navbar-brand">PUC Minas</a> 
 </div> 
 <button type="button" class="btn btn-default navbar-btn">Seção 1</button> 
 <button type="button" class="btn btn-default navbar-btn">Seção 2</button> 
 <button type="button" class="btn btn-default navbar-btn">Seção 3</button> 
 <form class="navbar-form navbar-right" role="search"> 
 <div class="form-group"> 
 <input type="text" class="form-control" placeholder="Buscar"/> 
 </div><button type="submit" class="btn btn-default">Ok</button> 
 </form> 
 </div> 
</nav> 
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
20 
GRUPOS	DE	BOTÕES	
• Os	botões	podem	ser	agrupados	visualmente	por	meio	de	grupos	de	botões	(button	groups).	Um	
grupo	de	botões	é	apenas	um	elemento	div	da	classe	btn-group	e	com	o	papel	group.	Recomenda-
se	usar	o	atributo	aria-label	para	explicar	a	funcionalidade	do	grupo	em	navegadores	acessíveis.	
<div class="btn-group" role="group" aria-label="Botões de alinhamento"> 
 <button type="button" class="btn btn-default">Esquerdo</button> 
 <button type="button" class="btn btn-default">Centro</button> 
 <button type="button" class="btn btn-default">Direito</button> 
</div> 
• Os	grupos	de	botões	podem	ser	organizados	em	uma	barra	de	botões,	por	meio	de	um	div	da	
classe	btn-toolbar.	
• Um	grupo	de	botões	também	pode	ser	apresentado	na	forma	de	um	menu	de	opções.	Para	isso,	o	
grupo	deverá	contar	com:	
• Um	botão	normal	que	será	usado	como	menu.	
• Um	botão	da	classe	dropdown-toggle,	com	o	atributo	data-toggle	contendo	o	valor	dropdown	
e	tendo	como	rótulo	o	ícone	de	seta	para	baixo	(caret).	
• Uma	lista	não	ordenada	da	classe	dropdown-menu	contendo	links	para	as	outras	ações	do	botão.	
• Um	item	dessa	lista	com	o	papel	de	separator	e	da	classe	divider	cria	uma	divisão	visual	entre	
grupos	de	opções.	
<div class="btn-group"> 
 <button type="button" class="btn btn-primary">Opções</button> 
 <button type="button" class="btn btn-primary dropdown-toggle" 
 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 <span class="caret"></span> 
 <span class="sr-only">Lista de opções</span> 
 </button> 
 <ul class="dropdown-menu"> 
 <li><a href="#">Primeira ação</a></li> 
 <li><a href="#">Segunda ação</a></li> 
 <li><a href="#">Terceira ação</a></li> 
 <li role="separator" class="divider"></li> 
 <li><a href="#">Mais opções</a></li> 
 </ul> 
</div> 
BREADCRUMBS	
• Breadcrumbs	é	um	recurso	importante	para	permitir	que	o	usuário	se	localize	em	um	site.	Para	criar	
breadcrumbs,	basta	criar	uma	lista	ordenada	da	classe	breadcrumb.	A	referência	à	página	ativa	deve	
ser	um	item	de	lista	(que	não	seja	link)	da	classe	active.	
<ol class="breadcrumb"> 
 <li><a href="#">PUC Minas</a></li> 
 <li><a href="#">Cursos</a></li> 
 <li class="active">Desenvolvimento Web</li> 
</ol> 
 	
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
21 
JUMBOTRON	
• O	Jumbotron	é	uma	grande	caixa	usada	para	dar	destaque	em	alguma	informação	(ex.:	novos	
lançamentos	de	produtos	ou	serviços).	Nessa	caixa,	que	ocupa	toda	a	largura	da	janela,	as	fontes	do	
texto	são	bem	maiores.	
• Um	jumbotron	é	apenas	uma	seção	div	da	classe	jumbotron.	
<div class="jumbotron"> 
 <div class="container"> 
 ... 
 </div> 
</div> 
PAINÉIS	
• Um	painel	mais	convencional	pode	ser	criado	por	meio	de	um	div	da	classe	panel	e	formatado	por	
meio	das	classes	panel-default,	panel-primary,	panel-success,	panel-info,	panel-warning	e	
panel-danger	(aplicados	ao	mesmo	div).	
• O	painel	pode	ter	um	cabeçalho	(opcional),	que	é	um	div	da	classe	panel-heading	e	que	pode	conter	
um	elemento	de	título,	um	corpo,	que	é	um	div	da	classe	panel-body,	e	um	rodapé	(opcional),	que	é	
um	div	da	classe	panel-footer.	
<div class="row"> 
 <div class="col-sm-3"> 
 <div class="panel panel-primary"> 
 <div class="panel-heading"> 
 <h3>Servidor X3</h3> 
 </div> 
 <div class="panel-body"> 
 <ul> 
 <li>500 GB de armazenamento</li> 
 <li>2 TB de transferência</li> 
 </ul> 
 </div> 
 <div class="panel-footer"> 
 <p><strong>Preço:</strong> R$ 24,99 / mês</p> 
 </div> 
 </div> 
 </div> 
</div> 
• É	possível	organizar	os	painéis	em	abas	usando	o	componente	nav.	A	ativação/desativação	dos	painéis	
deve	ser	feita	por	meio	de	JavaScript.	O	componente	nav	garante	apenas	a	formatação	das	abas.	
<ul class="nav nav-tabs"> 
 <li role="presentation" class="active"><a href="#">Apresentação</a></li> 
 <li role="presentation"><a href="#">Características</a></li> 
 <li role="presentation"><a href="#">Pagamento</a></li> 
</ul> 
• Com	o	clique	nos	links	do	exemplo	acima,	precisaríamos	alterar	a	classe	ativa	(active).	
Precisaríamos	também	ter	três	painéis,	dos	quais	apenas	um	estaria	visível.	Ao	clicar	no	link,	o	
painel	selecionado	seria	tornado	visível	e	os	demais	invisíveis.	
 	
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
22 
THUMBNAIL	
• O	conteúdo	pode	estar	organizado	na	forma	de	uma	grade	de	imagens,	vídeos	ou	textos	por	meio	do	
componente	thumbnail.	Nesse	caso,	a	largura	dos	componentes	é	definida	através	do	sistema	de	
grade	do	Bootstrap.	
• O	conteúdo	do	thumbnail,	de	uma	forma	geral,	é	um	objeto	de	mídia.	Mas	podemos	incluir	uma	
legenda	usando	um	elemento	div	da	classe	caption,	como	mostra	este	exemplo:	
<div class="row"> 
 <div class="col-sm-6 col-md-4"> 
 <div class="thumbnail"> 
 <img src="http://images.samsung.com/is/image/samsung/br_UN65JS8500GXZD_034_ 
Front_silver_thumb" alt="TV"> 
 <div class="caption"> 
 <h3>65" SUHD 4K Flat Smart TV JS8500 Series 8</h3> 
 <p>Sua Smart TV vai possibilitar você baixar e acessar aplicativos e 
 assistir conteúdo de vídeos da internet em uma tela muito melhor.</p> 
 <p><a href="#" class="btn btn-default" role="button">Características</a> 
 <a href="#" class="btn btn-info" role="button">Comprar</a></p> 
 </div> 
 </div> 
 </div> 
</div> 
MEDIA	OBJECT	
• Uma	outra	forma	de	encaixar	fotos	com	texto,	da	mesma	forma	que	vemos	nos	comentários	no	
Facebook,	é	usar	o	componente	media	object.		Aqui	você	pode	observar	que	o	objeto	de	mídia	deve	
ser	da	classe	media-object,	que	o	texto	deve	ser	da	classe	media-body	e	que	o	título	deve	ser	da	
classe	media-heading.	
<div class="media"> 
 <div class="media-left"> 
 <a href="#"> <img class="media-object" src="..." alt="..."> </a> 
 </div> 
 <div class="media-body"> 
 <h4 class="media-heading">Media heading</h4> 
 ... 
 </div> 
</div> 
LISTAS	
• O	Bootstrap	também	nos	oferece	um	componente	de	lista,	em	que	os	itens	da	lista	são	conectados	
visualmente,	como	mostra	este	exemplo.	Para	isso,	basta	usar	as	classes	list-group	e		
list-group-item	nos	elementos	ul	ou	(ol)	e	li	respectivamente.	
<ul class="list-group"> 
 <li class="list-group-item">Cras justo odio</li> 
 <li class="list-group-item">Dapibus ac facilisis in</li> 
 <li class="list-group-item">Morbi leo risus</li> 
 <li class="list-group-item">Porta ac consectetur ac</li> 
 <li class="list-group-item">Vestibulum at eros</li> 
</ul> 
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
23 
BADGE	
• Outro	recurso	interessante	do	Bootstrap	e	que	pode	ser	usado	nas	listas	é	o	badge.	Basicamente,	o	
badge	é	um	indicador	numérico	associado	a	um	botão,	rótulo	ou	item	de	lista.	Esse	rótulo,	como	
apresentado	aqui,	é	muito	útil	para	ser	usado	como	contador	de	itens.	
<a href="#">Inbox <span class="badge">42</span></a> 
 
<button class="btn btn-primary" type="button"> 
 Mensagens <span class="badge">4</span> 
</button> 
BARRA	DE	PROGRESSÃO	
• A	barra	de	progressão	é	criada	por	meio	de	dois	elementos	div.	O	primeiro,	da	classe	progress,	cria	o	
fundo	da	barra.	O	segundo,	da	classe	progress-bar,	cria	o	preenchimento	da	barra.	O	tamanho	da	
barra	é	definido	por	esta	largura	em	porcentagem.		
<div class="progress"> 
 <div class="progress-bar" role="progressbar" aria-valuenow="60" 
 aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 
 60% 
 </div> 
</div> 
• Os	atributos	role	e	os	atributos	aria-valuenow,	aria-valuemin	e	aria-valuemaxsão	para	
garantir	a	acessibilidade	da	informação.	
ALERTA	
• O	alerta	é	uma	simples	caixa	de	informações,	mas	que,	mais	uma	vez,	garante	a	acessibilidade	da	
informação.	
• Os	alertas	também	podem	ser	de	diversos	tipos:	alert-success,	alert-info,	alert-warning	
e	alert-danger.	
<div class="alert alert-success" role="alert">...</div> 
<div class="alert alert-info" role="alert">...</div> 
<div class="alert alert-warning" role="alert">...</div> 
<div class="alert alert-danger" role="alert">...</div> 
• Um	recurso	bastante	interessante	dos	alertas	é	a	possibilidade	de	eles	serem	dispensados.	Basta	
acrescentar	a	classe	alert-dismissibile	e	um	botão.	A	partir	daí,	basta	clicar	no	botão	que	o	alerta	
some.	
<div class="alert alert-danger alert-dismissible" role="alert"> 
 <button type="button" class="close" data-dismiss="alert" 
 aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 <strong>Alerta!</strong> Aconteceu alguma coisa estranha! 
</div> 
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
24 
13. BOOTSTRAP:	JAVASCRIPT	
• A	seção	JavaScript	do	Bootstrap	mostra	mais	um	conjunto	de	componentes	construídos	a	partir	de	
extensões	ou	plug-ins	em	JavaScript.	
• Os	principais	desses	componentes	são:	
• Modal	–	janelas	modais	usadas	para	informações	ao	usuário,	para	pequenos	formulários	ou	
mesmo	para	apresentação	detalhada	de	fotos	e	vídeos.	Apesar	do	componente	ser	baseado	em	
JavaScript,	é	possível	criar	uma	janela	modal	escrevendo	apenas	código	HTML.		
• Dropdown	–	pode	ser	usado	tanto	na	barra	de	navegação	quanto	nos	botões.	Mais	uma	vez,	todo	
o	comportamento	é	definido	por	JavaScript,	mas	o	usuário	pode	usar	o	recurso	sem	precisar	
programar	qualquer	coisa.	
• Scrollspy	–	recurso	para	atualizar	uma	barra	de	navegação	a	partir	da	posição	do	conteúdo	da	
página.	Na	medida	em	que	fazemos	a	rolagem	do	conteúdo,	a	seção	que	está	sendo	apresentada	
é	destacada	na	barra	de	navegação.	Esse	recurso	é	particularmente	interessante	quando	temos	
páginas	muito	longas.	
• Affix	–	recurso	também	usado	para	acompanhar	a	navegação,	como	usado	no	menu	de	
navegação	na	lateral	direita	da	página	da	documentação	do	Bootstrap.	
• Tabs	–	permite	a	navegação	por	abas.	O	funcionamento	é	simples.	Temos	um	conjunto	de	painéis	
e	a	visibilidade	deles	é	controlada	por	meio	da	barra	de	abas.	Apenas	um	painel	deverá	ser	
apresentado	de	cada	vez	e	a	implementação	dessa	funcionalidade	de	pente	apenas	de	algumas	
poucas	linhas	em	JavaScript.		
• Tooltip	–	oferece	uma	forma	de	colocar	uma	pequena	dica	associada	a	um	elemento	da	página.	
• Popover	–	apresenta	um	balão	de	informações	para	informações	secundárias.	
• Alert	e	button	–	apesar	de	alertas	e	botões	poderem	ser	criados	pela	HTML,	eles	podem	ter	o	
comportamento	gerenciado	por	meio	de	JavaScript.	
• Collapsible	–	painéis	que	podem	ser	contraídos,	muitas	vezes	chamados	de	acordeões,	porque	
possuem	um	funcionamento	semelhante	ao	desses	instrumentos,	ou	seja,	enquanto	um	a	parte	
se	contrai	a	outra	se	expande.	
• Carrossel	–	permite	criar	um	slideshow.	Este	recurso	é	bastante	usado	em	lojas	virtuais	e	sites	
que	dependem	de	muitas	imagens.		
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
25 
14. OUTROS	FRAMEWORKS	
• Existem	muitas	alternativas	ao	Bootstrap.	No	entanto,	os	recursos	oferecidos	por	cada	um	são	
relativamente	semelhantes.	O	ideal	é	você	se	identificar	com	um	deles	e	adotá-lo	nos	seus	projetos.	
• É	importante	considerar	que	o	conhecimento	de	alguns	pode	ser	bastante	importante	para	quem	
desenvolve	sites	para	terceiros,	pois	o	framework	pode	ser	uma	exigência	do	cliente.	
• Os	principais	frameworks	responsivos	do	mercado,	além	do	Bootstrap,	são:	
• Foundation	-	http://foundation.zurb.com/	
• O	Foundation	é	um	framework	da	Zurb	que	apresenta	bastante	preocupação	com	a	
acessibilidade.	O	framework	gera	um	menor	overhead	de	código	e	possui	alguns	interessantes	
recursos	como	os	menus	laterais	(fora	do	espaço	da	tela),	as	tabelas	de	preço	e	as	validações	
de	formulário.	
• Sketelon	-	http://getskeleton.com/	
• A	principal	característica	do	Skeleton	é	ser	bastante	leve.	Ele	apenas	oferece	o	sistema	de	
grades,	alguma	formatação	padronizada	e	poucos	componentes.	Mas,	para	quem	precisa	
apenas	de	estilos,	é	suficiente.	
• Materialize	-	http://materializecss.com/	
• O	Materialize	é	um	framework	responsivo	baseado	em	Material	Design	–	uma	forma	de	
design	desenvolvida	pela	Google	baseada	no	conceito	de	cartões	(card)	e	nas	animações	e	
transições	entre	eles.	Esse	é	o	estilo	de	design	usado	nas	aplicações	do	Android.	
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
26 
15. JQUERY	
• Write	less,	do	more.	
• https://jquery.com/	
• jQuery	é	uma	biblioteca	JavaScript	que	oferece	recursos	para	as	tarefas	mais	comuns	(e	mais	
tediosas).	
• jQuery	simplifica	a	manipulação	de	elementos	do	documento,	o	gerenciamento	de	eventos,	as	
animações	e	as	interações	Ajax	para	o	desenvolvimento	rápido	de	aplicações	Web.	
• Vantagens:	
• Acelera	o	processo	de	desenvolvimento	
• Operações	que	exigiriam	vários	comandos	são	simplificadas	
• É	compatível	com	todos	os	navegadores	(http://docs.jquery.com/browser-support)	
• É	extensível	através	de	plug-ins	(http://plugins.jquery.com/)	
• Há	duas	formas	de	usar	jQuery	
• A	partir	de	uma	instalação	local	(http://jquery.com/download).	
• A	partir	do	CDN.	
<script src="https://code.jquery.com/jquery-2.2.3.min.js"> 
</script> 
• Ambas	as	formas	oferecem	uma	versão	normal	e	uma	versão	minificada.	
• 	jQuery	deve	esperar	toda	a	página	carregar	para	que	possa	acessar	os	seus	elementos.	Como	essa	é	
uma	operação	muito	frequente,	jQuery	oferece	uma	alternativa	ao	evento	load	do	objeto	window:	
$(document).ready(function() { 
 ... 
}); 
• A	função	anônima	será	executada	assim	que	o	documento	termine	de	ser	carregado.	Para	isso,	
essa	função	é	passada	para	o	método	ready()	do	objeto	document.	
• A	sintaxe	geral	das	instruções	jQuery	é:	
$(seletor).ação() 
• O	principal	recurso	de	jQuery	é	a	função	$()	que	permite	selecionar	elementos	usando	os	mesmos	
seletores	da	CSS.	Basicamente,	a	função	$()	funciona	da	mesma	forma	que	os	métodos	
document.querySelector()	e	document.querySelectorAll().		
• A	função	$()	retorna	um	único	elemento	quando	usamos	um	seletor	de	ID	e	retorna	um	vetor	de	
elementos	quando	usamos	um	nome	de	elemento	(tag	name)	ou	uma	classe.	
• $('section')	 Retorna	todos	os	elementos	section.	
• $('#meupara')	 Retorna	o	(único)	parágrafo	com	ID	meupara.	
• $('.listrado')	 Retorna	todos	os	elementos	da	classe	listrado.	
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
27 
• Quanto	a	função	$()	retorna	mais	de	um	elemento,	as	ações	serão	executadas	para	todos	eles	
automaticamente.	
• Uma	ação	pode	conter	apenas	um	conjunto	de	parâmetros	ou	pode	conter	uma	função	que	
executará	uma	ação	mais	complicada	como,	por	exemplo,	aplicar	uma	formatação	a	outro(s)	
elemento(s)	
$(document).ready(function(){ 
 $('#verde').click(function() { 
 $('.caixas').css('background-color', 'green'); 
 }); 
 $('#vermelho').click(function() { 
 $('.caixas').css('background-color', 'green'); 
 }); 
)}; 
 
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
28 
16. SELETORES	
• Os	seletores	que	podem	ser	usados	na	função	$()	são	os	mesmos	da	CSS	
(https://www.w3.org/TR/selectors/).	
• Os	principais	tipos	de	seletores	são:	
• * Seletor	universal	
• E	 Elemento	do	tipo	E		(obs.:	um	elemento	herda	a	formatação	dos 
		 ancestrais)	
• E, F, G Elementos	dos	tipos	E,	F	e	G	
• .c Elementos	da	classe	c	
• E.c Elementos	do	tipo	E	da	classe	C	
• #i Elementos	com	atributo	id	igual	a	i	
• E F ElementoF,	descendente	de	E	
• E > F Elemento	F,	filho	de	E	
• E + F Elemento	F,	imediatamente	precedido	de	E	
• E ~ F Elemento	F,	precedido	de	E	(isto	é,	irmão)	
• E:not(S) Elemento	E	que	não	seja	S	
• Seletores	de	atributos:	
• E[foo] Elemento	que	contenha	o	atributo	"foo"	
• E[foo="bar"] Elemento	com	o	atributo	"foo"	que	tenha	exatamente	o	valor	"bar"	
• E[foo~="bar"] Elemento	com	o	atributo	"foo"	que	tenha	o	valor	"bar"	em	uma	
		 lista	separada	por	espaços	
• E[foo^="bar"] Elemento	com	o	atributo	"foo"	que	comece	com	o	valor	"bar"	
• E[foo$="bar"] Elemento	com	o	atributo	"foo"	que	termina	com	o	valor	"bar"	
• E[foo*="bar"] Elemento	com	o	atributo	"foo"	com	valor	que	contenha	a		
		 substring	"bar"	
• E[foo|="pt"] Elemento	com	o	atributo	"foo"	contendo	uma	lista	de	valores	
		 separadas	por	hífen	que	comece	com	"pt"	
• Pseudo-classes:	
• :root Raiz	do	documento	(elemento	<html>)	
• E:nth-child(n) Elemento	E	que	é	o	n-ésimo	filho	de	seu	pai	
• E:nth-last-child(n) Elemento	E	que	é	o	n-ésimo	filho	de	seu	pai,	contando	da		
	 direita	para	a	esquerda	
• E:nth-of-type(n) Elemento	E	que	é	o	n-ésimo	irmão	do	seu	tipo	
• E:nth-last-of-type(n) Elemento	E	que	é	o	n-ésimo	irmão	do	seu	tipo,	contando	a		
	 partir	do	último	
• E:first-child Elemento	E	que	é	o	primeiro	filho	de	seu	pai	
• E:last-child Elemento	E	que	é	o	último	filho	do	seu	pai	
• E:first-of-type Elemento	E	que	é	o	primeiro	irmão	do	seu	tipo	
• E:last-of-type Elemento	E	que	é	o	último	irmão	do	seu	tipo	
• E:only-child Elemento	E	que	é	o	único	filho	do	seu	pai	
• E:only-of-type Elemento	E	que	é	o	único	filho	desse	tipo	do	seu	pai	
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
29 
• E:empty Elemento	E	que	não	tem	conteúdo	
• E:link Hiperlink	E	que	não	foi	visitado	
• E:visited Hiperlink	E	já	visitado	
• E:active Elemento	E	ativado	(clique)	pelo	usuário	
• E:hover Elemento	E	sob	o	mouse	
• E:focus Elemento	E	(link	ou	campo)	que	recebeu	o	foco	de	interação	
• E:target Elemento	E	usado	como	destino	de	um	link	
• E:lang(pt) Elemento	E	de	idioma	"pt"	
• E:enabled Elemento	E	ativo	
• E:disabled Elemento	E	inativo	
• E:checked Elemento	E	marcado	(campo	checkbox	ou	radiobutton)	
• A	jQuery	também	criou	alguns	seletores	especiais	para	determinados	elementos,	mas	que	quase	
todos	podem	também	ser	especificados	pelos	seletores	convencionais.	
• Seletores	de	formulário	
• :input Seleciona	todos	os	campos	de	formulário.	
• :text Seleciona	os	campos	do	tipo	text.	
• :password Seleciona	os	campos	do	tipo	password.	
• :radio Seleciona	os	campos	do	tipo	radio.	
• :checkbox Seleciona	os	campos	do	tipo	checkbox.	
• :file Seleciona	os	campos	do	tipo	file.	
• :image Seleciona	os	campos	do	tipo	image.	
• :button Seleciona	os	botões	(do	tipo	button).	
• :submit Seleciona	o	campo	do	tipo	submit.	
• :reset Seleciona	o	campo	do	tipo	reset.	
• Seletores	baseado	em	estados	
• :hidden Seleciona	os	campos	escondidos.	
• :visible Seleciona	os	campos	visíveis.	
• :enabled Seleciona	os	campos	habilitados.	
• :disabled Seleciona	os	campos	desabilitados.	
• :checked Seleciona	os	campos	marcados	(radio,	checkbox	e	option).	
• :selected Seleciona	os	campos	selecionados	(option)	
• :animated Seleciona	os	campos	que	estão	sendo	animados.	
• Seletores	baseado	em	conteúdo	
• :empty Seleciona	elementos	vazios	(input,	br,	hr,	img,	...).	
• :parent Seleciona	os	elementos	que	possuem	algum	conteúdo.	
• :has(E) Seleciona	os	elementos	que	possuem	um	descendente	E.	
• :contains(texto) Seleciona	os	elementos	que	possuem	o	conteúdo	texto,	mesmo	que	
		 entre	os	descendentes.	
• :header	 Seleciona	os	elementos	de	título	(h1,	h2,	...).	Não	inclui	o	elemento		
			 header.	
 
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
30 
• Seletores	baseados	no	índice	(ou	ordem)	
• :first Seleciona	o	elemento	de	índice	0.	
• :last Seleciona	o	elemento	de	maior	índice.	
• :odd Seleciona	os	elementos	de	índice	ímpar		(1,	3,	5,	...).	
• :even Seleciona	os	elementos	de	índice	par	(0,	2,	4,	...).	
• :eq(n) Seleciona	os	elementos	com	índice	n.	
• :lt(n) Seleciona	os	elementos	com	índice	menor	que	n.	
• :gt(n) Seleciona	os	elementos	com	índice	maior	que	n.	
• Nesses	seletores	que	usam	n,	é	possível	indicar	um	número	negativo,	que	significará	algo	
como	length-n.	Por	exemplo,	em	uma	lista	com	6	elementos	(índices	de	0	a	5),	o	valor	lt(-2)	
selecionará	todos	os	elementos	menores	que	3	(=	5-2).	
• Um	seletor	especial	é	o	this,	que	se	refere	ao	próprio	objeto.	Esse	seletor	é	importante	quando	
precisamos	de	alguma	operação	em	cascata:	
$('p').each(function(i) { 
 $(this).css('color', 'white'); 
 if (i % 2 == 0) 
 $(this).css('background-color', '#5cb85c'); 
 else 
 $(this).css('background-color', '#d9534f'); 
}); 
• Obs:	essa	não	é	a	melhor	forma	de	fazer	esse	tipo	de	formatação,	mas	por	meio	dos	seletores	
p:even	e	p:odd.	
• O	método	each()	permite	iterar	por	todos	os	valores	retornados	pelo	seletor,	aplicando,	a	cada	um	
deles,	a	função	especificada	como	parâmetro.	
• A	função	$()	retornará	qualquer	elemento	que	atenda	ao	seletor.	É	possível	estender	essa	seleção,	
manualmente,	por	meio	do	método	add().	
$('p').add('blockquote').css('background-color', 'yellow'); 
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
31 
17. MANIPULAÇÃO	DOS	ELEMENTOS	
• Com	jQuery,	podemos	atualizar	o	conteúdo	e	os	atributos	dos	elementos	da	página.	
• O	conteúdo	é	atualizado	por	meio	dos	métodos	html()	e	text().	A	diferença	básica	entre	eles	é	
que	o	método	text()	ignora	as	marcações.	Para	campos	de	formulário,	usamos	o	método	val().	
• html()	 Recupera	o	conteúdo	HTML	de	um	elemento.	
• html(valor)	 Define	o	conteúdo	HTML	de	um	elemento.	
• text()	 Recupera	o	conteúdo	textual	de	um	elemento	(ignorando	as	
		 marcações,	isto	é,	os	filhos).	
• text(valor)	 Define	o	conteúdo	textual	de	um	elemento.	Como	ignora	as 
		 marcações,	qualquer	tag	será	convertida	em	caracteres 
		 (ex.:	'<b>'	à	'&lt;b&gt;').	
• val()	 Retorna	o	valor	do	campo	de	formulário.	
• val(valor)	 Estabelece	o	valor	para	o	campo	de	formulário.	
HTML	
<p>Contador: <span id="contador">0</span></p> 
<button id="mais1">+1</button> 
JavaScript	
$('#mais1').click(function() { 
 var valor = parseInt($('#contador').text()); 
 $('#contador').text(valor + 1); 
}); 
• Nesse	ponto,	é	interessante	observar	que	a	função	$()	retorna	um	elemento	HTML.	Ela	pode	ser	
usada,	assim,	para	a	criação	de	novos	elementos:	
$('<p>Novo parágrafo</p>'); 
• Um	elemento	também	pode	ser	criado	por	meio	de	um	objeto	de	atributos,	sendo	que	as	
propriedades	html	e	text	desse	objeto	possuem	um	significado	especial.	
var img = $('<img />', { 
 src = 'foto.jpg', 
 id = 'foto', 
 alt = 'Foto das férias' 
 }); 
 
var para = $('p', { 
 id = 'p1', 
 html = 'meu novo parágrafo' 
 }); 
 
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
32 
• O	novo	elemento	pode	ser	adicionado	a	um	elemento	já	presente	no	documento	por	meio	dos	
métodos	abaixo:	
• prepend()	 Insere	conteúdo	como	o	primeiro	filho	do	elemento.	 	
• append()	 Insere	conteúdo	como	o	último	filho	do	elemento.	
• before()	 Insere	conteúdo	antes	do	elemento	(como	irmão).	
• after()	 Insere	conteúdo	após	o	elemento	(como	irmão).	
• prependTo()	 Insere	conteúdo	como	o	primeiro	filho	do	elemento	indicado.	
• appendTo()	 Insere	conteúdo	como	o	último	filho	do	elemento	indicado.	
• insertBefore()	 Insere	conteúdo	antes	do	elemento	indicado	(como	irmão).	
• insertAfter()	 Insere	conteúdo	após	o	elemento	indicado	(como	irmão)	
$('#div1').append( $('<p>Novo parágrafo</p>') ); 
• Os	atributos	podem	ser	recuperados	por	meio	do	atributo	attr().	Esse	método,	porém,	retorna	
undefined	se	o	atributo	não	existir.	Assim,o	método	prop()	deve	ser	usado	para	se	testar	
propriedades	como	checked,	selected,	disabled	e	selectedIndex.		
• attr(atrib)	 Recupera	o	atributo	atrib	um	elemento.	
• attr(atrib, valor)	 Define	o	valor	de	um	atributo	atrib.	
• attr(obj)	 Define	os	valores	dos	atributos	por	meio	de	um	objeto.	
• prop(prop)	 Recupera	a	propriedade	prop	um	elemento.	
• prop(prop, valor)	 Define	o	valor	de	uma	propriedade	prop.	
• prop(obj)	 Define	os	valores	das	propriedades	por	meio	de	um	objeto.	
$('#caixaSelecao').prop('selectedIndex', 3); 
• Uma	importante	diferença	entre	as	funções	attr()	e	prop()	é	que	attr()	retorna	as	informações	
do	documento	HTML	original,	isto	é,	independentemente	das	alterações	feitas	pelo	usuário.	
Obviamente,	isso	se	aplica	apenas	a	campos	e	outros	elementos	editáveis.		
• Em	outras	palavras,	o	documento	escrito	possui	atributos,	mas	quando	ele	é	renderizado	pelo	
navegador,	esses	atributos	são	transformados	em	propriedades.	Os	atributos	que	não	foram	
definidos	explicitamente	(lang,	title,	alt,	class,	...)	são	criados	(com	valores	vazios).	
• É	possível	sim	alterar	um	atributo,	considerando-se	que	a	alteração	seria	feita	no	documento.	
Isso	também	alterará	o	valor	da	propriedade.	
• É	possível	remover	elementos,	atributos	e	conteúdo	de	uma	página	HTML.	
• remove()	 Remove	o	elemento	selecionado.	
• empty()	 Remove	o	conteúdo	do	elemento	selecionado.	
• removeAttr(attr)	 Remove	um	atributo	do	elemento.	
• removeProp(prop)	 Remove	uma	propriedade	do	elemento.	
• Também	é	possível	fazer	uma	substituição	do	conteúdo	usando	os	métodos	replaceWith()	e	
replaceAll().	Eles	fazem	exatamente	a	mesma	coisa,	mas	invertem	a	perspectiva	de	quem	
substitui	o	quê.	
• replaceWith(conteúdo)	 Substitui	o	conteúdo	dos	elementos	selecionados,	pelo	conteúdo	
		 passado	como	parâmetro. 
• replaceAll(E)	 Aplica	o	conteúdo	do	elemento	selecionado	a	todos	que	satisfizerem	
		 o	seletor	E.	
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
33 
• Uma	outra	operação	sobre	o	conteúdo	que	pode	ser	feita	com	jQuery	é	o	envolvimento	ou	embrulho	
de	elementos.	Isso	é	particularmente	útil	quando	se	deseja	criar	uma	estrutura	específica	para	
formatação	ou	manipulação	por	CSS	sem	perder	a	qualidade	da	organização	semântica	do	
documento	original.	
• wrap(E)	 Cria	um	elemento	pai	E	para	cada	elemento	que	satisfaz	o	seletor.	
• wrapAll(E)	 Cria	um	elemento	pai	E	para	o	conjunto	de	elementos	que	satisfazem		
		 o	seletor.	Se	eles	estiverem	separados,	então	serão	movidos	dentro	
		 do	documento	para	ficarem	agrupados	(junto	com	o	primeiro).	
• wrapInner(E)	 Envolve	o	conteúdo	de	cada	elemento	que	satisfaça	ao	seletor	usando		
		 o	elemento	E.	
• unwrap()	 Remove	o	elemento	pai,	mantendo	os	elementos	selecionados	em		
		 seus	lugares.	
$('p:lang(en)').wrap('<div class="ingles" />'); 
• Há	métodos	específicos	para	definição,	inspeção	e	mudança	de	classes.	Apesar	de	vários	exemplos	
terem	usado	o	método	css(),	é	importante	considerar	que	a	inclusão	de	formatação	em	código	
JavaScript	não	é	recomendada.		
• É	também	importante	lembrar	que	o	W3C	fez	um	grande	esforço	para	separar	o	conteúdo	da	
formatação.	Assim,	não	faria	muito	sentido	colocar	essa	formatação,	agora,	no	código.	
• Assim,	recomenda-se	mudar	a	formatação	por	meio	dos	ajustes	feitos	nas	classes.	
• Esses	métodos	de	classes	são:	
• addClass()	 Adiciona	uma	classe	ao	elemento.	
• hasClass()	 Testa	se	o	elemento	possui	uma	determinada	classe.	
• removeClass()	 Remove	uma	classe	do	elemento.	
• toggleClass()	 Adiciona	a	classe	se	o	elemento	não	a	tiver	ou	retira	a	classe	se	o		
		 elemento	já	a	tiver.	
$('#switch').click(function(){ 
 $(this).toggleClasse('ativado'); 
}); 
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
34 
18. PROCESSAMENTO	
• A	função	$()	retorna	um	ou	mais	objetos	que	atendam	ao	critério	do	seletor.	Podemos,	em	seguida,	
executar	ações	nesses	objetos	como	a	formatação	por	meio	do	método	css()	ou	tratar	um	evento	
de	clique	por	meio	do	método	click().	
• Antes	da	aplicação	de	uma	ação,	porém,	é	possível	fazermos	uma	manipulação	do	conjunto	de	
objetos	retornados	pela	função.	Por	exemplo,	podemos	acrescentar	outros	objetos	ao	conjunto,	por	
meio	do	método	add().	Podemos	também	filtrar	o	conjunto	de	tal	forma	que	atenda	a	um	segundo	
seletor	por	meio	do	método	filter().	
$('tr').filter(':even').css('background-color', 'lightgrey'); 
• A	primeira	forma	de	processamento	do	conjunto	de	objetos	selecionados	é	a	aplicação	de	filtros,	
como	no	exemplo	acima.	Existem	vários	métodos	que	permitem	diferentes	formas	de	filtragem	dos	
objetos.	
• filter()	 Reduz	o	conjunto	para	aqueles	que	atendem	a	um	seletor	ou	passem	em		
		 uma	função	de	teste.	
• is()	 Testa	se	pelo	menos	um	objeto	atende	ao	seletor	e,	nesse	caso,	retorna	
		 verdadeiro.	Não	retorna	outro	conjunto.	
• not()	 Elimina	do	conjunto	os	elementos	que	se	enquadrem	no	segundo	seletor.	
• has()	 Reduz	o	conjunto	àquele	elementos	que	possuam	um	determinado	
		 descendente.	
• eq()	 Reduz	o	conjunto	para	apenas	um	elemento	do	índice	especificado.	
• first()	 Reduz	o	conjunto	ao	seu	primeiro	elemento.	
• last()	 Reduz	o	conjunto	ao	seu	último	elemento.	
• slice()	 Reduz	o	conjunto	a	um	subconjunto	especificado	por	uma	faixa	de	índices.	
• map()	 Transforma	o	conjunto	em	um	outro	objeto	contendo	novos	valores.	
// Retorna os ids dos elementos selecionados 
var listaIDs = $(':input').map(function() { 
 return $(this).attr('id'); 
}).get().join(); // obs.: o join() aqui é JavaScript simples e não jQuery 
• A	segunda	forma	de	processamento	do	conjunto	de	objetos	selecionados	é	a	filtragem	dos	
elementos	a	partir	da	sua	posição	na	árvore	do	documento.	
• parent()	 Retorna	os	pais	de	cada	elemento	selecionado,	opcionalmente	filtrados	por	
		 um	seletor. 
• parents()	 Retorna	todos	os	ancestrais	de	cada	elemento,	possivelmente	filtrados	por	
		 um	seletor. 
• parentsUntil()	 Retorna	os	ancestrais	de	um	elemento	até	que	o	elemento	especificado	seja	
		 encontrado	(esse	próprio	elemento	não	é	incluído	na	resposta). 
• closest()	 Para	cada	elemento	do	conjunto,	encontra	um	ancestral	que	atenda	ao		
		 seletor	(o	próprio	elemento	pode	ser	retornado	se	possível). 
• offsetParent()	 Retorna	o	ancestral	mais	próximo	que	tenha	sido	reposicionado	no	fluxo	
		 do	documento	(por	meio	da	propriedade	position	da	CSS). 
 
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
35 
• children()	 Retorna	os	filhos	de	cada	elemento,	opcionalmente	filtrados	por	um	seletor. 
• find()	 Retorna	os	descendentes	de	cada	elemento	que	atendam	a	um	seletor.		
		 É	semelhante	ao	children(),	mas	o	children()	retorna	apenas	os	filhos	
		 imediatos. 
• siblings()	 Retorna	os	irmãos	de	cada	elemento,	opcionalmente	filtrados	por	um	 	
		 seletor. 
• next()	 Retorna	o	próximo	irmão	(ou	o	próximo	irmão	que	atenda	a	um	seletor,	se 
		 especificado). 
• nextAll()	 Retorna	os	próximos	irmãos,	opcionalmente	filtrados	por	um	seletor. 
• nextUntil()	 Retorna	os	próximos	irmãos,	até	que	um	que	atenda	ao	seletor	seja	
		 encontrado	(esse	elemento	não	será	incluído). 
• prev()	 Retorna	o	irmão	imediatamente	anterior	(ou	o	irmão	anterior	que	atenda	a	
		 um	seletor,	se	especificado). 
• prevAll()	 Retorna	os	irmãos	anteriores,	opcionalmente	filtrados	por	um	seletor. 
• prevUntil()	 Retorna	os	irmãos	anteriores,	até	que	um	que	atenda	ao	seletor	seja	
		 encontrado	(esse	elemento	não	será	incluído). 
• A	terceira	forma	de	processamento	do	conjunto	de	objetos	selecionados	é	a	filtragem	dos	elementos	
a	partir	da	sua	posição	na	árvore	do	documento.	
• add()	 Adiciona	os	elementos	especificados	pelo	seletor	ao	conjunto	atual. 
• addBack()	 Adiciona	os	últimos	elementos	filtrados	ao	conjunto	original	de	elementos	
		 (Exemplo:	$('#p1').nextAll().addBack()). 
• contents()	 Retornatodos	os	filhos,	incluindo	os	nodos	texto	e	de	comentário.	Para	usar	
		 esse	método,	é	importante	entender	os	conceitos	de	nodeType,	nodeName	
		 e	nodeValue	da	árvore	do	DOM. 
• end()	 Encerra	a	operação	de	filtragem	e	retorna	ao	conjunto	anterior	de		
		 elementos. 
// Seleciona os parágrafos de duas classes 
$('p') 
 .find('.verde').css('background-color', 'green').end() 
 .find('.vermelho').css('background-color', 'red'); 
• Uma	observação	importante	sobre	esses	métodos	é	que,	a	cada	seleção	ou	aplicação	de	filtro,	o	
resultado	é	colocado	em	uma	pilha	de	conjuntos	resposta.	Os	métodos	são	aplicados	ao	conjunto	no	
topo	dessa	pilha.	O	que	o	método	end()	faz	na	verdade,	portanto,	é	retirar	o	último	conjunto	da	
pilha	e	retomar	o	anterior.	
• Alguns	métodos	especiais	auxiliam	a	trabalhar	com	o	conjunto	de	elementos	na	forma	de	um	vetor.	
• get()	 Retorna	um	vetor	com	os	elementos	selecionados	ou	apenas	um	se	um	
		 índice	for	especificado. 
• index()	 Retorna	a	posição	do	primeiro	elemento	do	conjunto	em	relação	a	seus	
		 irmão	no	documento.	Se	um	seletor	for	passado,	então	o	valor	de	retorno	
		 será	a	posição	desse	elemento	no	primeiro	conjunto	resposta. 
• toArray()	 Retorna	um	vetor	com	os	elementos	selecionados.	 
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
36 
19. EVENTOS	
• O	tratamento	de	eventos	em	jQuery	também	segue	a	mesma	lógica	do	tratamento	de	eventos	em	
JavaScript,	mas	há	uma	série	de	funções	que	facilitam	esse	trabalho.	
• O	evento	mais	simples	é	o	clique	do	mouse	que	pode	ser	capturado	pela	função	click().	
$(document).ready(function(){ 
 $('button').click(function(){ 
 alert('Olá mundo!'); 
 }); 
}); 
• A	função	especificada	como	parâmetro	do	método	click()	determina	o	comportamento	que	deve	
ser	executado	quando	esse	evento	for	disparado.	
• O	clique	de	um	mouse	é	um	dos	eventos	mais	comuns	em	uma	página	web.	Assim,	há	um	método	
especial	para	tratá-lo:	click().	Outros	eventos	que	possuem	métodos	dedicados	são	listados	a	
seguir.	
• Eventos	de	mouse	
• click()	 Clique	do	mouse	sobre	o	elemento.	
• dblclick()	 Duplo	clique	do	mouse	sobre	o	elemento.	
• mousedown()	 Botão	do	mouse	é	pressionado	sobre	o	elemento.	
• mouseup()	 Botão	do	mouse	é	solto	sobre	o	elemento.	
• mouseover()	 Cursor	do	mouse	entra	na	área	do	elemento,	excluindo	a	área	dos	
		 descendentes.	
• mouseenter()	 Cursor	do	mouse	entra	na	área	do	elemento,	incluindo	a	área	dos	
		 descendentes.	
• mouseout()	 Cursor	do	mouse	sai	da	área	do	elemento,	inclusive	quando	indo	para		
		 a	área	dos	descendentes.	
• mouseleave()	 Cursor	do	mouse	sai	da	área	do	elemento,	independentemente	da		
		 área	dos	descendentes.	
• mousemove()	 Cursor	do	mouse	se	move	sobre	o	elemento.	
• hover(fn1,fn2)	 Combinação	dos	eventos	mousenter	e	mouseleave.	
• contextmenu()	 Clique	com	o	botão	direito	do	mouse.	
• Eventos	de	teclado	
• keypress()	 Tecla	do	teclado	foi	pressionada	e	solta	com	o	elemento	em	foco.	
• keydown()	 Tecla	do	teclado	foi	pressionada	com	o	elemento	em	foco.	Inclui	
		 teclas	como	Shift,	Esc	e	Control.	
• keyup()	 Tecla	do	teclado	foi	solta	com	o	elemento	em	foco.	
 
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
37 
• Eventos	de	formulário	
• focus()	 O	campo	do	formulário	(ou	link)	recebeu	o	foco.	
• blur()	 O	campo	do	formulário	(ou	link)	perdeu	o	foco.	
• focusin()	 O	elemento	ou	algum	descendente	dele	recebeu	o	foco.	
• focusout()	 O	elemento	ou	algum	descendente	dele	perdeu	o	foco.	
• change()	 O	valor	do	campo	input,	textarea	ou	select	foi	alterado..	
• select()	 O	usuário	fez	alguma	seleção	de	texto	em	um	campo	input	do	tipo	
		 texto	ou	em	um	campo	textarea.	
• submit()	 O	usuário	tentou	enviar	o	formulário.	
• Eventos	de	janela	
• resize()	 A	janela	do	navegador	foi	redimensionada.	
• scroll()	 A	janela	do	navegador	ou	algum	elemento	com	a	propriedade	
		 overflow	definida	para	scroll,	foi	rolado.	
• Eventos	de	documento	
• load()	 O	documento	HTML	(ou	outro	recurso	específico)	foi	carregado.	
• ready()	 Toda	a	página	foi	carregada	(HTML	e	recursos).	
• unload()	 O	usuário	saiu	da	página	(navegando	outra	página	ou,	em	alguns	
		 navegadores,	fechando	a	janela).	
• Existem	outra	forma	de	criação	de	um	manipulador	de	evento.	Ao	invés	do	método	click(),	por	
exemplo,	poderíamos	ter	usado	o	métodos	on().	
$('button').click( funcaoClique ); 
$('button').on('click', funcaoClique); 
• O	método	on()	permite	a	associação	de	um	evento	a	um	elemento.	De	forma	análoga,	o	método	
off()	cancela	o	vínculo	de	um	evento	a	um	elemento.	
$('button').off('click'); 
• A	chamada	do	método	off()	sem	nenhum	parâmetro	cancela	todos	os	eventos	de	um	determinado	
elemento.	
• O	método	one()	permite	também	a	criação	de	um	manipulador	de	eventos,	mas	que	só	será	
executado	uma	vez.	É	como	se	o	método	off()	fosse	chamado	logo	após	a	execução	do	evento.	
• O	método	trigger()	permite	disparar	manualmente	um	evento.	
$('button').click(function(){ 
 alert('botão foi clicado'); 
}); 
$('button').trigger('click'); 
 
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
38 
• O	método	trigger()	pode	conter	um	segundo	parâmetro	que	é	um	vetor	de	informações	para	
serem	usadas	no	manipulador	de	eventos.	Esses	valores	serão	recebidos	como	parâmetros	adicionais	
da	função	que	tratará	os	eventos.	
$('div').on('click', function( evento, param1, param2 ) { 
 alert( param1 + '\n' + param2 ); 
}); 
$('div').trigger('click', ['Olá', 'Mundo'] ); 
• Por	meio	dos	métodos	on()	e	trigger()	é	possível	criarmos	eventos	personalizados.	
$('#login').on('logado', function(e) { 
 $(this).html('Usuário: '+e.usuario+'<br/>Senha: '+e.senha); 
}) 
$('botao').click(function(){ 
 $('#login').trigger({ 
 type: 'logado', 
 usuario:'Marcos', 
 senha: 'Secreto' 
 }); 
}); 
• O	parâmetro	também	poderia	ser	passado	como	um	objeto	do	tipo	Event.	
var evento = jQuery.Event('logado'); 
evento.usuario = 'Marcos'; 
evento.senha = 'Secreto'; 
$('#login').trigger(evento); 
• O	objeto	jQuery.event	possui	um	extenso	conjunto	de	métodos	e	propriedades,	em	grande	parte	
herdados	da	JavaScript.	Alguns	deles	são:	
• type Tipo	de	evento.	
• target Elemento	registrado	para	o	evento	ou	um	descendente	dele.	
• currentTarget Elemento	equivalente	a	this.	
• relatedTarget Elemento	em	que	o	mouse	entrou	no	evento	mouseout	e	elemento	
		 que	o	mouse	deixou	no	evento	mouseover.	
• delegateTarget Elemento	que	receberá	o	evento	delegado	por	seu	ancestral	(indicado		
		 no	método	on()).	
• result O	valor	retornado	pelo	manipulador	do	evento.	
• data Objeto	opcional	de	dados	passado	pelo	método	do	evento	(ex:	on()).	
• timeStamp Marca	do	tempo,	em	milissegundos,	que	o	evento	foi	disparado.	
• which Em	eventos	de	mouse,	indica	qual	botão	foi	pressionado	
		 (1	=	esquerdo,	2	=	meio,	3	=	direito).	Em	eventos	de	teclado,	indica	
		 qual	tecla	foi	pressionada.	
• metaKey Indica	se	a	tecla	Command	no	Mac	ou	Windows	no	Windows	estavam	
		 pressionadas.	
• pageX Indica	a	coordenada	X	do	mouse	em	relação	à	margem	do	documento.	
• pageY Indica	a	coordenada	Y	do	mouse	em	relação	à	margem	do	documento.	
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
39 
• preventDefault() Impede	que	o	comportamento	padrão	seja	executado.	
• isPreventDefault() Testa	se	o	método	acima	foi	executado.	
• stopPropagation() Evita	que	os	elementos	ancestrais	executem	o	evento.	
• isPropagationStopped() Testa	se	o	método	acima	foi	executado.	
• stopImmediatePropagation() Evita	que	os	elementos	ancestrais	executem	o	evento	e		
		 e	também	que	os	outros	manipuladores	de	evento	deste	
		 elemento	sejam	executados.	
• isImmediatePropagationStopped() Testa	se	o	método	acima	foi	executado.	
Padrões Web - Unidade IV 
Prof. Marcos KutovaCurso de especialização a distância em Desenvolvimento de Aplicações Web 
 
40 
20. FORMATAÇÃO	
• Da	mesma	forma	que	oferece	uma	série	de	elementos	para	manipulação	da	estrutura	e	do	conteúdo	
do	documento,	jQuery	oferece	uma	série	de	métodos	aceleradores	do	trabalho	com	formatação.		
• O	principal	desses	métodos	é	o	css(),	que	permite	recuperar	ou	definir	um	propriedade	(ou	um	
conjunto	de	propriedades)	para	os	elementos	selecionados.	
var cor = $('#caixa').css('background-color'); 
$('#caixa').css('background-color', 'yellow'); 
$('#caixa'.css({ 
 background-color: 'yellow', 
 border: 'thin solid black' 
}); 
• Considerando	o	potencial	de	jQuery	para	criação	de	animações	e	de	outros	efeitos,	há	métodos	que	
facilitam	a	inspeção	da	largura,	da	altura	e	da	posição	dos	objetos.	
• width()	 Recupera	a	largura	do	elemento	em	pixels	(somente	conteúdo).	
• width(valor)	 Define	a	largura	do	elemento	(somente	conteúdo).	
• innerWidth()		 Recupera	a	largura	do	elemento	(conteúdo	e	padding).	
• innerWidth(valor)	 Define	a	largura	do	elemento	(conteúdo	e	padding).	
• outerWidth(margem)	 Recupera	a	largura	do	elemento	(conteúdo,	padding	e	borda).	Se	o	
		 parâmetro	margem	for	true,	então	inclui	a	margem	externa	também.	
• outerWidth(valor)	 Define	a	largura	do	elemento	(conteúdo,	padding	e	borda).		
	
• height()	 Recupera	a	altura	do	elemento	(somente	conteúdo).	
• heigth(valor)	 Define	a	altura	do	elemento	(somente	conteúdo).	
• innerHeight()		 Recupera	a	altura	do	elemento	(conteúdo	e	padding).	
• innerHeight(valor)	 Define	a	altura	do	elemento	((conteúdo	e	padding).	
• outerHeigth(margem)	 Recupera	a	altura	do	elemento	(conteúdo,	padding	e	borda).	Se	o	
		 parâmetro	margem	for	true,	então	inclui	a	margem	externa	também.	
• outerHeigth(valor)	 Define	a	altura	do	elemento	(conteúdo,	padding	e	borda).		
	
• position()	 Retorna	as	distâncias	esquerda	(left)	e	superior	(top)	do	canto	
		 esquerdo	superior	do	elemento	pai.	
• offset()	 Retorna	as	distâncias	esquerda	(left)	e	superior	(top)	do	canto	
		 esquerdo	superior	do	documento.	
$('p').click(function(e){ 
 var posicao = $(this).offset(); 
 $('#coords').html('('+(posicao.left)+','+(posicao.top)+')'); 
}); 
 	
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
41 
• Quando	o	elemento	exigir	rolagem	vertical	ou	horizontal,	é	possível	detectar	a	posição	da	barra	de	
rolagem	por	meio	das	seguintes	propriedades	(que	também	podem	receber	valores	para	
reposicionamento).	
• scrollLeft()	 Retorna	a	posição	da	barra	de	rolagem	horizontal	do	elemento.	
• scrollTop()	 Retorna	a	posição	da	barra	de	rolagem	vertical.	
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
42 
21. ANIMAÇÕES	
• jQuery	oferece	algumas	animações	simples,	mas	que	são	suficientes	para	a	maioria	das	operações	de	
interface.	Basicamente	essas	animações	são	usadas	para	esconder	ou	mostrar	os	objetos.	
• hide() Esconde	os	elementos	selecionados.	
• show()	 Mostra	os	elementos	selecionados.	
• toggle()	 Altera	a	visibilidade	dos	elementos	selecionados.	
• As	operações	de	esconder	e	mostrar	são	baseadas	nas	propriedades	de	opacidade,	de	largura	e	de	
altura	da	CSS.	Quando	a	animação	de	esconder	é	concluída,	a	propriedade	display	é	ajustada	para	
none.	De	forma	análoga,	tão	logo	o	objeto	começa	a	ser	mostrado,	essa	propriedade	é	restaurada.	
• A	biblioteca	jQuery	armazena	o	valor	anterior	da	propriedade	display	(block,	inline,	...)	do	
elemento	a	ser	escondido,	para	restaurá-la	na	hora	de	mostrá-lo	novamente.	
• Esses	métodos	podem	receber	dois	ou	três	parâmetros	para	controlar	a	operação.		
• O	primeiro	parâmetro	é	a	duração	da	animação	em	milissegundos.	Também	é	possível	especificar	
apenas	os	valores	fast	(200	milissegundos)	e	slow	(600	milissegundos).	
• O	último	parâmetro	é	uma	função	que	será	chamada	quando	a	animação	concluir	(2º	parâmetro	
se	apenas	2	forem	passados	e	3º	parâmetro	se	3	forem	passados).	É	importante	lembrar	que	a	
animação	toma	um	tempo,	mas	que	o	código	não	fica	bloqueado.	Assim,	uma	ação	necessária	
após	a	animação	deve	ser	chamada	por	meio	de	uma	função	callback.	
• O	parâmetro	do	meio	(quando	forem	3),	chamado	easing,	controla	a	aceleração	da	animação.	O	
valor	linear	indica	que	a	animação	deve	ter	velocidade	constante.	O	valor	swing	indica	um	
início	lento,	um	desenvolvimento	rápido	e	um	término	novamente	lento.	
• Ainda	é	possível	especificarmos	um	único	parâmetro	que	seria	um	objeto	com	uma	grande	
variedade	de	parâmetros	de	animação,	mas	que	ultrapassa	o	escopo	deste	curso.	
$('#btn').click(function() { 
 $('#imagem').hide('slow', function() { 
 alert('Animação completa!'); 
 }); 
}); 
• Os	métodos	acima	alteram	não	só	a	opacidade	dos	elementos,	mas	também	suas	larguras	e	alturas.	
Há	um	outro	conjunto	de	métodos	que	altera	apenas	a	opacidade	dos	elementos.	Quando	a	
opacidade	chega	a	0%	(ao	esconder	o	elemento),	a	propriedade	display	é	alterada	para	none.	
• fadeOut()	 Torna	os	elementos	selecionados	transparentes.	
• fadeIn()	 Torna	os	elementos	selecionados	opacos.	
• fadeToggle()	 Inverte	a	transparência/opacidade	dos	elementos	selecionados.	
• fadeTo()	 Ajusta	a	opacidade	dos	elementos	selecionados	para	um	determinado		
		 percentual.	
 
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
43 
• Esses	métodos	possuem	os	mesmos	parâmetros	dos	métodos	anteriores.	Apenas	o	método	fadeTo()	
possui	um	novo	segundo	parâmetro	(o	easing	passa	a	ser	o	terceiro	e	a	função	de	callback	passa	a	
ser	o	quarto)	que	indica	o	percentual	de	opacidade.	Se	a	opacidade	não	chegar	a	0%,	então	a	
propriedade	display	é	mantida	como	estava.	
$('#btn').click(function() { 
 $('#div1').fadeTo('slow', 0.33); 
}); 
• Há	também	um	conjunto	de	métodos	que	escondem	e	mostram	os	elementos	a	partir	do	ajuste	da	
altura	(mantendo	a	opacidade).	
• slideUp()	 Reduz	a	altura	dos	elementos	até	escondê-los.	
• slideDown()	 Restaura	a	altura	original	dos	elementos.	
• slideToggle()	 Mostra	ou	esconde	os	elementos	por	meio	do	ajuste	de	altura.	
$('#btn').click(function() { 
 $('#div1').slideUp('slow'); 
}); 
• Finalmente,	existe	a	possibilidade	de	criarmos	animações	personalizadas	por	meio	do	método	
animate().	Esse	método	recebe	um	conjunto	de	propriedades	CSS	que	serão	alteradas	por	meio	de	
uma	animação.	Essas	propriedades	devem	ser	informadas	no	primeiro	parâmetro	do	método,	sendo	
que	os	demais	parâmetros	funcionam	como	nos	demais	métodos.	
• As	mais	diversas	propriedades	numéricas	podem	ser	usadas	na	animação.	
$('#btn').click(function() { 
 $('#div1').animate({ 
 width: '70%', 
 opacity: 0.4, 
 marginLeft: '3em', 
 fontSize: '15pt', 
 borderWidth: '5px' 
 }, 5000 ); 
}); 
• Ainda	há	algumas	operações	especiais	que	podem	ser	realizadas	em	animações.	Essas	operações	
consideram	que	várias	animações	podem	ser	planejadas	em	cascata,	da	seguinte	forma:	
$('#div1').slideUp(1000).fadeIn(1000).hide(1000); 
• Os	métodos	são:	
• delay()	 Estabelece	uma	pausa	no	intervalo	entre	duas	animações.	
• stop()	 Interrompe	a	animação	que	estiver	rodando	e	passa	à	próxima	da	fila.	
• finish()	 Interrompe	todas	as	animações	e	aplica	a	formatação	final.	 	
$( '#btnAvancar' ).click(function() { 
 $( '#div1' ).animate({ left: '+=100px' }, 2000 ); 
}); 
$( "#btnParar" ).click(function() { 
 $( '#div1' ).stop(); 
}); 
Padrões Web - Unidade IV 
Prof. Marcos Kutova 
Curso de especialização a distância em Desenvolvimento de Aplicações Web 
 
44 
22. AJAX	
• As	requisições	assíncronas	com	jQuery	são	bem	mais	fáceis	do	que	com	JavaScript	puro.	
• O	método	get(),	por	exemplo,	pode	receber	quatro	parâmetros:	
• URL	do	recurso	
• Dados	passados	como	parâmetros	no	formato	de	uma	string	ou	de	um	objeto.	
• Função	callback	de	sucesso	(que	recebe	os	dados	da	resposta	como	parâmetro)	
• Tipo	de	dados	da	resposta	(opcional	e	inferido