desenvolvimento de Software III

Prévia do material em texto

56
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Unidade III
Unidade III
Esta unidade tem como finalidade apresentar conceitos de depuração de código, melhora na 
perfomance de páginas web, desenvolvimento de páginas com qualidade utilizando conceitos de Ajax e 
User Controls, bem como validação de dados.
Melhorar uma página web requer análise e principalmente um completo teste de toda a arquitetura 
web, sendo assim, é necessário ter uma visão de possíveis falhas e melhorias.
5 Uso de Trace e debUg em aplicações .NeT
Nos tempos atuais, aplicações web devem atingir a excelência desde sua análise, construção e, 
principalmente, execução de testes e captura de suas evidências. Para que todo esse ciclo ocorra com 
perfeição, é preciso efetuar principalmente todo o teste em aplicação web com extrema habilidade de 
detectar onde e como poderá surgir um erro.
Para isso o principal objeto do Testing (testando) e do Debugging (depurando) de uma aplicação 
web é garantir todo o ciclo de desenvolvimento para o cliente final, ou seja, testar e depurar toda a 
aplicação de modo que não seja encontrada nenhuma falha. Contudo, esse processo não é uma tarefa 
tão simples, pois depende de uma boa análise e, principalmente, da construção de um bom roteiro 
de testes, que apresente passo a passo a execução de uma funcionalidade contida dentro de uma 
aplicação web.
Tracing se dá por uma execução de processo que consiste em coletar informações de uma aplicação 
web em tempo de execução. Para que esse processo aconteça com excelência, podemos analisar dois 
métodos:
•	 System.Web.TraceContext: a classe possibilita efetuar a captura e verificação de informações 
da execução de uma aplicação web e de mensagens de Trace, na própria página aspx, bem como 
efetuar visualização no Trace Viewer, ou seja, gerar um arquivo do tipo axd (trace.axd) alocado 
em memória.
•	 System.Diagnostics.Trace e System.Diagnostics.Debug: mensagens direcionadas por essa 
classe são apresentadas por definição padrão na janela output do Visual Studio .net, mas pode‑se 
trabalhar com outros recursos de apresentação de mensagens, como usar a classe TraceListerner 
para enviar mensagens para determinados tipos de saída, tais como EventLog, do Windows, 
apresentando como arquivo de texto.
57
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Desenvolvimento De software para internet
 observação
A utilização de debug em aplicações web simplifica o 
entendimento para a correção de erros encontrados na aplicação. 
Essa prática é muito comum não somente para identificação de 
erros, como também para entendimento do fluxo de navegação das 
camadas contidas na aplicação.
A classe TraceContext é responsável pela gestão e exibição de todas as informações apresentadas 
com o Trace da execução da aplicação web. Todo o processo é acessado por meio do objeto Trace 
encapsulado na página aspx. A habilitação do Trace pode acontecer por intermédio da página aspx, 
na diretiva Page, ou através do arquivo web.config, acoplado na aplicação web. A classe TraceContex 
disponibiliza alguns métodos de trabalho, como:
•	 IsEnable:	possibilita	informar	que	o	Trace	está	habilitado	na	aplicação	web;
•	 TraceMode:	apresenta	dentro	da	aplicação	em	qual	ordem	as	mensagens	serão	exibidas,	como:	
SortByCategory e SortByTime;
•	 Warn:	apresenta	mensagens	de	maneira	personalizada	em	vermelho;
•	 Write:	apresenta	mensagens,	porém	não	com	o	destaque	em	vermelho.
Trabalhando com definição padrão, o Trace, por sua vez, não vem habilitado nas aplicações web. 
Assim, para que possam ser exibidas as informações de Trace no rodapé da página aspx, deverá ser 
adicionada na página a instrução Trace = “true”, lembrando que esta será inserida na diretiva Page da 
página aspx.
 lembrete
A utilização do Trace na diretiva Page da página aspx sobrescreve todas 
as configurações de Trace realizadas no arquivo web.config.
Efetuando a implementação na página aspx, teremos o seguinte resultado:
58
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Unidade III
 <%@ Page Language=”C#” .... Trace = “True”%>
Figura 53– Método sprExibirTrace (elaborada pelo autor)
 observação
A nomenclatura utilizada dentro do Trace pode ser de livre escrita 
para o desenvolvedor, porém, por questões de boas práticas, é importante 
sempre conduzir a escrita de maneira que possa sempre remeter ao que a 
funcionalidade deveria fazer e ser identificado na codificação.
Adicionando o método ao evento Load da página aspx, ou, por exemplo, a ação de um botão, tem‑se 
a seguinte saída:
Figura 54 – Painel de saída do Trace (elaborada pelo autor)
59
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Desenvolvimento De software para internet
Na codificação do arquivo web.config, pode‑se trabalhar com a tag <trace>, assim possibilitando a 
saída tanto na página aspx como no arquivo apartado, denominado de trace.axd, podendo até mesmo 
ser acessado na raiz da aplicação web.
 lembrete
O arquivo trace.axd não existe fisicamente, ou seja, seu consumo e 
construção são feitos em memória.
Detalhamos a seguir alguns atributos do elemento <trace>, como:
•	 Enabled: identifica dentro da aplicação web que o Trace está ativo, ou seja, todas as informações 
geradas no Trace serão visualizadas no Trace Viewer, também no arquivo trace.axd;
•	 Localonly: identifica que o Trace Viewer poderá ser visualizado somente por clientes locais, ou 
por qualquer outro cliente;
•	 PageOut: identifica que todas as informações geradas pelo Trace serão totalmente visualizadas 
na página aspx.
•	 RequestLimit: identifica e informa a quantidade de requisições que são efetuadas para serem 
alocadas no Trace;
•	 TraceMode: identifica a ordem das mensagens a serem apresentadas no Trace;
 saiba mais
Para um aprofundamento de Trace, acesse:
MÉTODO TraceWrite (String, String). Microsoft Developer 
Network. 2015. Disponível em: <https://msdn.microsoft.com/pt‑br/pt/
library/247w289d%28v=vs.110%29.aspx>. Acesso em: 28 jul. 2015.
É muito importante reforçar que não se pode misturar o Page.Trace com a classe Trace, pois o 
Page.Trace devolve um objeto pertencente à classe TraceContext, enquanto a classe Trace devolve 
a classe System.Diagnostics. Vale ressaltar também a importância das configurações do projeto 
web, tais como Debug e Release, sendo que os dois, Release e Debug, são compilados, ou, caso 
a definição seja o modo Debug, somente são compilados caso a configuração do projeto esteja 
ajustada em modo Release.
60
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Unidade III
Todas as classes têm utilidade na identificação de falhas e nas suas correções, por exemplo, um 
código que efetua atualização de valores em um banco de dados pode validar quais foram os valores 
que trafegaram no Trace ou no Debug antes de atualizar o banco de dados.
Tratando de definição padrão, a saída dos métodos das classes de Trace são efetuadas por meio da 
janela de output do Visual Studio .NET, mas poderá ser utilizado também a coleção de Listerners para 
obterem‑se termos de outros tipos de saída. Podemos abordar alguns métodos de saída, tais como:
•	 Write: escreve no console uma informação;
•	 WriteLine: escreve no console uma informação, efetuando quebra de linha;
•	 WriteIf: escreve no console uma informação, partindo do pressuposto de que a condição 
apresentada deveráser verdadeira;
•	 WriteIfLine: escreve no console uma informação, partindo do pressuposto de que a condição 
apresentada deverá ser verdadeira, efetuando quebra de linha;
•	 Assert: valida a condição e escreve no console, caso a mesma seja falsa;
•	 Fail: escreve no console a mensagem de erro.
Figura 55 – Exemplo de aplicação de Trace
Trabalhando com a classe TraceListerners, vemos que ela é concebida por três implementações, 
que são:
•	 DefaultTraceListerner: apresenta todas as mensagens de saída na janela de output do Visual 
Studio .NET;
61
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Desenvolvimento De software para internet
•	 TextWriterTraceListerner: apresenta e escreve as mensagens encapsuladas em objeto Stream, 
podendo ser gravado, por exemplo, em um arquivo do tipo .txt (texto);
•	 EventLogTraceListerner: apresenta e escreve as mensagens a partir do Event Log do Windows.
5.1 criando User controls
Todos	os	 controles	 construídos	 têm	como	base	 a	 classe	 System.Web.UI.UserControl,	 tendo	 como	
estrutura:
Figura 56	–	Estrutura	da	classe	System.Web.UI.UserControl
Podemos efetuar a codificação do User Control partindo dos seguintes aspectos:
•	 User Controls: componentes aos quais podem ser adicionadas linguagens <tags> e controles 
web servers, podendo, assim, trabalhar individualmente ou até mesmo com a variedade de 
propriedades e métodos encapsulados;
•	 Custom Controls: classes que são derivativas de outras classes (Control ou WebControl).
Para adicionar um User Control, observe os seguintes passos:
1 – Com o projeto Web Form criado na Solution, clicar com o botão direito no nome do projeto, 
selecionar Add →	New	Item:
62
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Unidade III
Figura 57 – Adicionando Web User Control
2 – Será apresentada a janela com os Templates a serem escolhidos:
Figura 58 – Caixa de novo item
3 – Selecionar o item Web User Control, lembrando sempre de visualizar à esquerda a linguagem 
escolhida. Nesse exemplo, a linguagem escolhida é C#.
63
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Desenvolvimento De software para internet
Figura 59 – Selecionado Web User Control
Figura 60	–	Item	Web	User	Control	1	adicionado	na	Solution
4	–	Inserindo	o	código	no	Web	User	Control,	teremos:
64
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Unidade III
Figura 61 – Modo Código do Web User Control 1
Figura 62 – Modo Design do Web User Control 1
65
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Desenvolvimento De software para internet
5 – Dentro do evento “click incluir”, podemos codificar da seguinte maneira:
Figura 63	–	Codificação	do	evento	btnIncluir_Click
6 – Dentro do evento “click Excluir”, podemos codificar da seguinte maneira:
Figura 64	–	Codificação	do	evento	btnExcluir_Click
O Web User Control pode ser utilizado em qualquer página aspx, sendo implementado dentro da 
página aspx, com a seguinte chamada:
Figura 65	–	Implementação	do	Web	User	Control
6 Validação de dados
A validação de dados é um assunto muito interessante, no que se diz respeito à homologação de 
valores em aplicações web, como, por exemplo, a entrada de valores e informações, bem como dados 
que deverão ser consumidos em próximos passos por uma base de dados.
Trabalhar com o ASP.NET com modelos de validações de dados compostos que podem ser agregados em uma 
aplicação web pode, muitas vezes, ocasionar a efetuação do trabalho de maneira automatizada e transparente.
Para validação de dados, podemos utilizar:
•	 RequiredFieldValidator – que, muitas vezes, faz com que o controle associado de preenchimento 
se torne obrigatório e ainda verifica se o cliente informou ou selecionou algo. Exemplo: campos 
com informações obrigatórias;
•	 CompareValidator – efetua a comparação de valores fornecendo informações com outro 
dispositivo de controle ou até mesmo uma constante. Exemplo: validação de senha informada;
66
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Unidade III
•	 RangeValidator – efetua, muitas vezes, a validação de valores, informando e verificando se eles 
se encontram dentro de um intervalo de valores e condições aceitas pela aplicação web. Exemplo: 
efetuar validação de valores mínimos, máximos ou ambos;
•	 RegularExpressionValidator – efetua a verificação de dados de entrada, na qual se analisa, por meio de 
expressão regular, a sua construção através de máscaras de edição. Exemplo: validações de RG, CEP, CPF etc.;
•	 CustomValidator – possibilita ao programador codificar a sua própria estrutura de validação de dados;
•	 ValidationSummary – possibilita ao programador codificar a exibição de resumo de todas as 
validações efetuadas nas páginas aspx.
Figura 66 – Página indicando campos obrigatórios
Figura 67 – Trecho de código com RequiredFieldValidator
67
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Desenvolvimento De software para internet
6.1 aplicação de ajax em aplicações asp.NeT
Ajax nada mais é do que a abreviação de Asynchronous Javascript and XML, que pode ser considerada 
uma técnica relativamente antiga, mas que, de alguns anos para cá, vem se tornando um elemento 
surpresa para os programadores.
O Ajax tem como objetivo utilizar Javascript, XML e XMLHttpRequest de maneira que possam ser 
criadas páginas que executem de maneira rápida e precisa o código desenvolvido, sem precisar que as 
páginas efetuem cargas novamente, os famosos postbacks.
Podemos entender que o Ajax possibilita trabalhar com um comportamento assíncrono, ou 
seja, a aplicação consegue executar o código no servidor sem que a página permaneça “paralisada”, 
possibilitando, assim, que o cliente continue utilizando a aplicação web ao mesmo tempo em que toda 
a execução front é realizada.
http(s) transpot
browser client
server‑side systems
web and/or XML server
user interface
Ajax engine
datastores, backend 
processing, legacy systems
Ajax
web application model
XML data
JavaScript call
HTML+CSS data
http(s) transpot
browser client
server‑side systems
user interface
web server
datastores, backend 
processing, legacy systems
Classic 
web application model
Jesse James Garrett / adaptivepath.com
HTTP request
HTML+CSS data
HTTP request
Figura 68 – Modelo de estrutura Ajax
68
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Unidade III
<%@ Page Language=”VB”%> 
<!DOCTYPE html PUBLIC “‑//W3C//DTD XHTML 1.0 Transitional//EN” 
“http://www.w3.org/TR/xhtml1/DTD/xhtml1‑transitional.dtd”> 
 
<script runat=”server”> 
 Protected Void GridView1_PageIndexChanging(ByVal sender As Object, 
ByVal e As System.Web.UI.WebControls.GridViewPageEventArgs) 
{ 
    ‘Este código inclui um delay de 3 segundos para poder exemplificar 
o controle do Atlas funcionando 
 System.Threading.Thread.Sleep(3000) 
 } 
</script> 
 
<html xmlns=”http://www.w3.org/1999/xhtml” > 
 <head runat=”server”> 
 <title>Exemplo UNIP</title> 
 </head> 
 <body> 
 <form id=”form1” runat=”server”> 
 <div><asp:ScriptManager ID=”ScriptManager1” runat=”server”></
asp:ScriptManager> 
 </div> 
 <asp:UpdatePanel ID=”UpdatePanel1” runat=”server”> 
 
 <ContentTemplate> 
 <asp:GridView ID=”GridView1” runat=”server” 
AllowPaging=”True” AutoGenerateColumns=”False” 
 CellPadding=”4” DataSourceID=”AccessDataSource1” 
ForeColor=”#333333” GridLines=”None” 
 OnPageIndexChanging=”GridView1_PageIndexChanging” 
PageSize=”4”> 
 <FooterStyle BackColor=”#990000” Font‑Bold=”True” 
ForeColor=”White” > 
 
 <Columns> 
 <asp:BoundField DataField=”FirstName” 
HeaderText=”FirstName” SortExpression=”FirstName” /> 
 <asp:BoundField DataField=”LastName” 
HeaderText=”LastName” SortExpression=”LastName” /> 
 </Columns> 
 
 <RowStyle BackColor=”#FFFBD6” ForeColor=”#333333” /> 
 
 <SelectedRowStyle BackColor=”#FFCC66” Font‑Bold=”True” 
ForeColor=”Navy”/> 
 
 <PagerStyle BackColor=”#FFCC66” ForeColor=”#333333” 
HorizontalAlign=”Center” /> 
 
 <HeaderStyle BackColor=”#990000” Font‑Bold=”True” 
ForeColor=”White” /> 
 
 <AlternatingRowStyle BackColor=”White” /> 
69
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Desenvolvimento De software para internet
 </asp:GridView> 
 
 <asp:AccessDataSource ID=”AccessDataSource1” runat=”server” 
DataFile=”~/App_Data/Northwind.mdb” 
 SelectCommand=”SELECT FirstName, LastName FROM Employees 
ORDER BY LastName”></asp:AccessDataSource> 
 
 </ContentTemplate> 
 </asp:UpdatePanel> 
 
 <asp:UpdateProgress ID=”UpdateProgress1” runat=”server” Associ
atedUpdatePanelID=”UpdatePanel1”> 
 <ProgressTemplate> 
 Carregando ..... 
 </ProgressTemplate> 
 </asp:UpdateProgress> 
 </form> 
 </body> 
</TML>
Figura 69 – Exemplo Ajax
<?xml version=”1.0”?> 
<configuration>  
<configSections>  
<sectionGroup name=”system.web.extensions” type=”System.Web.
configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, 
Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad36
4e35”> 
<sectionGroup name=”scripting” type=”System.Web.configuration.
ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, 
Culture=neutral, PublicKeyToken=31bf3856ad364e35”> 
<section name=”scriptResourceHandler” 
type=”System.Web.configuration.ScriptingScriptResourceHandlerSection, 
System.Web.Extensions, 
Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad36
4e35” requirePermission=”false” 
allowDefinition=”MachineToApplication”/>  
<sectionGroup name=”webServices” type=”System.Web.configuration.
ScriptingWebServicesSectionGroup, 
 System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, Public
KeyToken=31bf3856ad364e35”> 
<section name=”jsonSerialization” type=”System.Web.configuration.
ScriptingJsonSerializationSection, 
 System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, Public
KeyToken=31bf3856ad364e35” 
 requirePermission=”false” allowDefinition=”Everywhere” />  
<section name=”profileService” type=”System.Web.configuration.
ScriptingProfileServiceSection, 
 System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, Public
KeyToken=31bf3856ad364e35” 
 requirePermission=”false” allowDefinition=”MachineToApplication” />  
<section name=”authenticationService” 
 type=”System.Web.configuration.ScriptingAuthenticationServiceSection, 
System.Web.Extensions,
70
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Unidade III
 Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad36
4e35” requirePermission=”false” 
 allowDefinition=”MachineToApplication” />  
</sectionGroup> 
</sectionGroup> 
</sectionGroup> 
</configSections>  
<system.web> 
<pages> 
<controls> 
<add tagPrefix=”asp” namespace=”System.Web.UI” assembly=”System.Web.
Extensions, Version=1.0.61025.0, 
 Culture=neutral, PublicKeyToken=31bf3856ad364e35”/> 
</controls> 
</pages> 
<compilation debug=”false”> 
<assemblies> 
<add assembly=”System.Web.Extensions, Version=1.0.61025.0, 
Culture=neutral, PublicKeyToken=31bf3856ad364e35”/> 
</assemblies> 
</compilation> 
<httpHandlers> 
<remove verb=”*” path=”*.asmx”/> 
<add verb=”*” path=”*.asmx” validate=”false” type=”System.Web.Script.
Services.ScriptHandlerFactory, 
 System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, Public
KeyToken=31bf3856ad364e35”/> 
<add verb=”*” path=”*_AppService.axd” validate=”false” 
 type=”System.Web.Script.Services.ScriptHandlerFactory, System.Web.
Extensions, Version=1.0.61025.0, 
 Culture=neutral, PublicKeyToken=31bf3856ad364e35”/> 
<add verb=”GET,HEAD” path=”ScriptResource.axd” type=”System.Web.
Handlers.ScriptResourceHandler, 
 System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, Public
KeyToken=31bf3856ad364e35” 
 validate=”false”/> 
</httpHandlers> 
<httpModules> 
<add name=”ScriptModule” type=”System.Web.Handlers.ScriptModule, 
System.Web.Extensions, 
 Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad36
4e35”/> 
</httpModules> 
</system.web> 
</configuration> 
Figura 70 – Web.config da aplicação com Ajax
Para efetuar a configuração do Ajax dentro web.config deve‑se inserir dentro do laço ou da tag 
system.web:
71
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Desenvolvimento De software para internet
Figura 71 – Aplicação de Ajax no web.config
Exemplo de aplicação
Para que o exemplo de Hello Word seja construído com sucesso, devemos dividir o processo entre 
duas etapas:
•	 uma	parte	deverá	residir	no	lado	servidor,	ou	seja,	na	codificação	no	arquivo	.cs,	onde	será	
feita a execução e compilação do código, por exemplo, validar um cliente, localizar dados 
em uma base de dados, ou até mesmo o processamento de uma operação matemática 
mais complexa;
•	 outra	parte	deverá	permanecer	no	lado	cliente,	ou	seja,	codificação	Javascript,	que	irá	apresentar	
na página futuros alertas entre outros itens.
Iniciaremos	no	webform1.aspx.cs,	no	qual	deverá	ser	inserido	o	seguinte	trecho	de	código:
Figura 72 – Código dentro do arquivo .cs
Dentro	do	método	padrão	que	já	vem	incluído	na	classe,	o	Page_Load,	encarregado	de	efetuar	a	
transição de ações para a página, devemos inserir o seguinte código:
Figura 73	–	Método	Page_Load
Efetuando	 análise	 dessa	 estrutura,	 podemos	 considerar	 que	 o	 Page_Load	 adiciona	 de	 maneira	
automática todo o bloco de código Javascript em uma página aspx, para que ela possa identificar 
72
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Unidade III
possíveis chamadas Ajax. Entretanto, o mais importante é adicionar o parâmetro do typeof, que efetua 
a chamada da classe encapsulada na página solicitada.
No WebForm1 deverá ser adicionado o seguinte trecho de código:
Figura 74 – Codificação efetuada na página WebForm1
Dentro da tag <head></head> deverá ser informado o seguinte trecho de código:
Figura 75 – Codificação Ajax
73
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Desenvolvimento De software para internet
Figura 76 – Página em execução
Procure reproduzir esse processo em sua máquina a fim de praticar os conceitos vistos.
6.2 bootstrap
Bootstrap pode ser considerado um framework CSS que possibilita ao programador o desenvolvimento 
de uma aplicação web utilizando um universo de componentese funcionalidades disponibilizados, tais 
como: CSS, jQuery e HTML.
Ele foi desenvolvido pela equipe do Twitter, tomando como premissa padrões de desenvolvimento 
rápido, levando‑se em consideração código limpo, eficiência e eficácia em sua utilização. Ele é responsivo, 
ou seja, utiliza recursos de bootstrap. O cliente consegue visualizar todos os itens de maneira confortável 
em ambiente desktop e em dispositivos móveis.
 saiba mais
Para que o aluno possa conhecer muito mais sobre o bootstrap, 
indicamos:
CC BY. Bootstrap. [s.d.]. Disponível em: <http://twitter.github.com/
bootstrap/index.html>. Acesso em: 29 jul. 2015.
74
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Unidade III
Podemos ressaltar alguns itens de trabalho muito importantes com o bootstrap, como:
•	 Sistema de grid: ajuda o posicionamento dos elementos na página.
•	 Design responsivo: disponibiliza suporte a tamanhos de tela diversos (mobile, tablets etc.).
•	 Blocos de código: ajudam a inserção de blocos de código.
•	 Tabelas: são melhor modo de trabalhar com tabelas de maneira estilizada e amigável.
•	 Formulários: auxiliam a inserção de formulários com caixas de busca, checkboxes, selects etc. 
com estilos de validação dentre outros.
•	 Botões: existem diversos estilos de botões.
•	 Mini‑ícones: mini‑ícones para que o programador consiga trabalhar de maneira livre dentro de 
uma aplicação web.
•	 Componentes: há uma gama de componentes para dropdowns, labels, badges, tipografia, 
thumbnails, alerts, progress bars, dentre outros.
 lembrete
O bootstrap é compatível com HTML5 e CSS, sendo assim, se integra 
também a componentes atuais, tais como grid e textbox, além de permitir 
a criação de modais, barra de progresso, botões e formulários por meio 
da	 interface	 (UI).	 Trabalha	 também	 com	 as	mais	 avançadas	 técnicas	 de	
desenvolvimento para CSS.
bootstrap/ 
 +‑‑ css/ 
 ¦ +‑‑ bootstrap.css 
 ¦ +‑‑ bootstrap.min.css 
 ¦ +‑‑ bootstrap‑responsive 
 ¦ +‑‑ bootstrap‑responsive.min 
 +‑‑ js/ 
 ¦ +‑‑ bootstrap.js 
 ¦ +‑‑ bootstrap.min.js 
 +‑‑ img/ 
      +‑‑ glyphicons‑halflings.png 
      +‑‑ glyphicons‑halflings‑white.png 
Figura 77 – Estrutura do arquivo boostrap.css
75
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Desenvolvimento De software para internet
bootstrap/ 
 +‑‑ css/ 
 ¦ +‑‑ bootstrap.css 
 ¦ +‑‑ bootstrap.min.css 
 ¦ +‑‑ bootstrap‑responsive 
 ¦ +‑‑ bootstrap‑responsive.min 
 +‑‑ js/ 
 ¦ +‑‑ bootstrap.js 
 ¦ +‑‑ bootstrap.js 
 ¦ +‑‑ jquery‑1.9.1 
 ¦ +‑‑ jquery‑1.9.1.min 
 +‑‑ img/ 
      +‑‑ glyphicons‑halflings.png 
      +‑‑ glyphicons‑halflings‑white.png 
Figura 78 – Estrutura do arquivo boostrap
<!DOCTYPE html> 
<html> 
<head> 
<title>Usando Bootstrap – Desenvolvimento de Software para 
Internet</title> 
 
<!‑‑ Incluindo o CSS do Bootstrap ‑‑> 
<link href=”bootstrap/css/bootstrap.min.css” rel=”stylesheet” 
media=”screen” /> 
 
</head> 
<body> 
 
<!‑‑ Incluindo o jQuery que é requisito do JavaScript do Bootstrap 
localmente‑‑> 
<script src=”bootstrap/js/jquery‑1.9.1.min.js”></script> 
 
<!‑‑ Incluindo o JavaScript do Bootstrap ‑‑> 
<script src=”bootstrap/js/bootstrap.min.js”></script> 
 
</body> 
</html>
Figura 79 – Página HTML com aplicação do bootstrap
76
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Unidade III
<!DOCTYPE html> 
<html> 
<head> 
<title> Usando Bootstrap – Desenvolvimento de Software para 
Internet </title> 
<!‑‑ Incluindo o CSS do Bootstrap ‑‑> 
<link href=”bootstrap/css/bootstrap.min.css” rel=”stylesheet” 
media=”screen” /> 
</head> 
<body> 
<!‑‑ Incluindo o jQuery que são requisito do JavaScript no 
Bootstrap ‑‑> 
<script src=”bootstrap/js/jquery‑1.9.1.min.js”></script> 
<!‑‑ Incluindo o JavaScript do Bootstrap ‑‑> 
<script src=”bootstrap/js/bootstrap.min.js”></script> 
</body> 
<form class=”form‑horizontal”> 
 <div class=”control‑group”> 
 <label class=”control‑label” for=”inputEmail”>E‑mail</label> 
 <div class=”controls”> 
 <input id=”inputEmail” type=”text” placeholder=”Digite o 
e‑mail...” /> 
 </div> 
 </div> 
 <div class=”control‑group”> 
 <label class=”control‑label” for=”inputSenha”>Senha</label> 
 <div class=”controls”> 
 <input id=”inputSenha” type=”password” placeholder=”Digite a 
senha...” /> 
 </div> 
 </div> 
 <div class=”control‑group”> 
 <div class=”controls”> 
 <label class=”checkbox”><input type=”checkbox” /> Lembrar a 
minha senha</label> 
 <button class=”btn” type=”submit”>Acessar</button> 
 </div> 
 </div> 
</form> 
</html>
Figura 80 – Página HTML com aplicação do bootstrap
77
Re
vi
sã
o:
 G
io
va
nn
a 
/ R
os
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
06
/0
8/
20
15
Desenvolvimento De software para internet
Figura 81 – Página.aspx com aplicação do bootstrap
 resumo
Nessa unidade abordamos conceitos de validação de dados, incluindo 
toda a construção e aplicação de conceitos para validação de componentes, 
tais como textbox, buttons etc.
Também foram apresentados conceitos de Ajax que são de extrema 
importância e atualmente encarados como uma carta na manga dos 
desenvolvedores – um recurso que facilita toda a concepção de tráfego de 
informações e persistência de ações contidas na página .aspx.
Utilizando recursos de User Control, podemos construir persistências 
equivalentes a todas as páginas .aspx, ou seja, trabalhar com conceitos 
de reutilização de código, melhorando, assim, a eficiência do código e 
elevando o entendimento para futuras melhorias que serão efetuadas na 
aplicação web.
Abordamos, além disso, o conceito de Trace e Debug que, muitas 
vezes, para os desenvolvedores, são os remédios que solucionam todos 
os problemas na aplicação. Entender o que acontece em cada passo da 
execução, identificar falhas na aplicação e principalmente definir correções 
partem de ações realizadas por meio de Trace e Debug.
Muitas vezes o desenvolvedor não consegue identificar nem mesmo a 
regra de negócio inserida na aplicação web, porém apenas com a execução de 
Trace e de Debug é como se um teste de mesa fosse realizado, esclarecendo, 
assim, o entendimento de uma funcionalidade, a identificação de falhas e 
até mesmo de possíveis melhorias que deverão ser feitas na aplicação web.