Arquivo da tag: HTML

AngularJS – Requisições Assíncronas (AJAX)

pic_angularEste post foi construído com base na documentação oficial: https://docs.angularjs.org/api/ng/service/$http.

A comunicação entre cliente e servidor no AngularJS é gerenciada pelo serviço $http.

Os métodos disponíveis para realizar requisições são:

  • $http.get
  • $http.head
  • $http.post
  • $http.put
  • $http.delete
  • $http.jsonp
  • $http.patch

Por padrão, estes métodos estão configurados com o Content-Type “application/json;charset=UTF-8”.

Vamos a um simples exemplo que obtém uma cidade a partir de um UF selecionado.


var myApp = angular.module("myApp", []);

myApp.controller("carregaCidade", ['$scope','$http', function ($scope, $http) {

	$scope.uf = "";
	$scope.cidades = [];
	$scope.buscarCidades = function () {

		var params = "?UF=" + $scope.uf;
		var $http.req = get("BuscarCidades.aspx" + params , dados);

		req.success(function (retornoServidor, status) {
			$scope.cidades = retornoServidor;
		});

		req.error(function (retornoServidor, status) {

	   });
	};
}]);
<body ng-app="myApp">
    <div ng-controller="carregaCidade">

		<select id="ddlUf" name="uf" ng-model="uf" ng-change="buscarCidades()">
			<option selected="selected" value="">Selecione</option>
			<option value="SP">SP</option>
			<option value="AC">AC</option>
			<!--...-->
			<option value="TO">TO</option>
		</select>

		<select id="ddlCidades" name="ddlCidades">
			<option value="">selecione...</option>
			<option ng-repeat="cidade in cidades" value="{{cidade.Id}}">{{cidade.Nome}}</option>
		</select>
	
  </div>
</body>	

Os eventos success e error tratam o resultado da operação.

É possível usar diretamente o serviço $http fazendo toda a configuração manualmente.

var req = $http({
   method: "GET",
   url: "BuscarCidades.apsx" + params
});

req.success(function (data, status, headers, config, statusText) {
	$scope.cidades = data;
   
});

req.error(function (data, status, headers, config, statusText) {
	console.log(status);
});

Os exemplos acima utilizaram o método de envio GET, passando dados diretamente pela URL. Para usar o método POST também é simples, bastando organizar os dados para envio no formato JSON.

var dados = JSON.stringify({ UF: $scope.uf });
 
var req = $http({
	url: "BuscarCidades.aspx",
	data: dados,
	method: "POST",
	headers: "Content-Type: application/json;charset=UTF-8"

});

Ou

var req = $http.post("BuscarCidades.aspx", dados);

É claro, que pensando no conceito de aplicações que usam a arquitetura REST, este tipo de requisições (busca de dados) deve ser sempre GET.

Introdução ao JSON – Javascript Object Notation

json160JSON é um formato para troca de dados baseado em estruturas de texto, o que lhe dá a característica de ser completamente independente de linguagem. É a mesma ideia do XML, só que mais simples e leve.

No site oficial (http://www.json.org/) o autor ainda afirma:

Para seres humanos, é fácil de ler e escrever.
Para máquinas, é fácil de interpretar e gerar.

A forma simples de representar dados no formato JSON tem difundido seu uso, e vem se tornando uma alternativa ao XML para implementações AJAX.

Em JSON podemos estruturar dados em (1) coleções de pares de nome e valor e também em (2) lista/array ordenadas de valores.

Os valores dos dados são representando em três formas: object, value e array, e ainda podem ser combinadas.

Object: é um conjunto de pares de nome/valores. A sintaxe de um object é


{ "nome da propriedade" : "valor da propriedade" }

O object começa com { e termina com }. E cada par de nome/valores é separado por ,(vírgula), sendo que os valores podem assumir diferente tipos de dados. Exemplo:


{“nome” : “Bill”, “idade” : 32, “salario”: 121232.67}

Array: é uma coleção de valores ordenados. A sintaxe de um array JSON é:


[ "valor1",  "valor2", "valor3" ]

O array começa com [ e termina com ], e cada parte  é separa por , (vírgula) e podem divergir o tipo de dados. Exemplo:


["Huguinho","Zezinho","Luizinho", 3]

Tanto a estrutura object como o array do JSON podem ser combinadas, formando diversas estruturas de dados.

Exemplo – Um array de objects:


[{ "nome" : "Huguinho", "idade" : 10 },
 { "nome" : "Zezinho", "idade" : 12 },
 { "nome" : "Luizinho", "idade" : 10 }]

Exemplo – Object contendo uma propriedade array:


{"tio" : "Pato Donald",
 "idade" : 40,
 "sobrinhos" :
        [{ "nome" : "Huguinho",     "idade" : 10 },
          { "nome" : "Zezinho", "idade" : 12 },
          { "nome" : "Luizinho", "idade" : 10 }]
}

JSON nasceu com um subconjunto da linguagem Javascript para representar objetos e atualmente qualquer linguagem de programação moderna tem suporte (via pacotes de terceiros) a esse formato de troca de informação.

Os sites jsonviewer.stack.hu e  jsonformatter.curiousconcept.com/ são bons lugares para validar a estrutura JSON

Num futuro post demonstrarei o uso do JSON com ASP.NET em chamada assíncronas.

Nomes de cores suportados por todos os navegadores

O W3Schools em seu site disponibiliza a relação de cores suportadas por todos os navegadores, juntamente com seus valores hexadecimais.

Disponível em http://www.w3schools.com/tags/ref_colornames.asp.

Para customizar cores e descobrir seu respectivo valor hexadecimal é possível usar o ColorPick do W3Schools (http://www.w3schools.com/tags/ref_colorpicker.asp).

Bom uso!!!

Elementos HTML/XHTML x DTDs

O site do W3Schools disponibilida uma tabela com os elementos HTML/XHTML suportados pelos atuais Doctype (DTD) existentes. Importante para construir documentos HTML/XHTML dentro dos padrões adotados.

Confira a tabela em: http://www.w3schools.com/tags/ref_html_dtd.asp

DataList com paginação

O controle DataList do ASP.NET é uma mão da roda para exibir listagem de dados usando um layout menos “tabular”. Infelizmente o DataList não possui de forma nativa (como no GridView, FormView e DetailsView) uma opção para definir páginas de dados (paginação). Mas isso não é problema, pois podemos implementar “na unha” esse recurso.

Vamos lá.

Neste exemplo usei a tabela Products do banco de dados de exemplo Northwind que acompanha o SQL Server Express 2008. E a paginação é de 10 registros por página.

A seguir segue o código de definição de um DataList para listagem de registros vindos da tabela Products. Observe que adicionei ao FooterTemplate dois LinkButton para representar a navegação da paginação.

&lt;asp:DataList ID=&quot;DataList1&quot; runat=&quot;server&quot;&gt;
    &lt;FooterTemplate&gt;
        [&lt;asp:LinkButton ID=&quot;lkbtnAnterior&quot; runat=&quot;server&quot; onclick=&quot;lkbtnAnterior_Click&quot;&gt;&amp;lt;&amp;lt; Anterior&lt;/asp:LinkButton&gt;]
        [&lt;asp:LinkButton ID=&quot;lkbtnProximo&quot; runat=&quot;server&quot;  onclick=&quot;lkbtnProximo_Click&quot;&gt;Próximo &amp;gt;&amp;gt;&lt;/asp:LinkButton&gt;]
    &lt;/FooterTemplate&gt;
    &lt;ItemTemplate&gt;
        ProductID: &lt;%#DataBinder.Eval(Container.DataItem, &quot;ProductID&quot;).ToString()%&gt;
        &lt;br /&gt;
        ProductName: &lt;%#DataBinder.Eval(Container.DataItem, &quot;ProductName&quot;).ToString()%&gt;
        &lt;br /&gt;
        UnitPrice: &lt;%#DataBinder.Eval(Container.DataItem, &quot;UnitPrice&quot;, &quot;{0:C}&quot;).ToString()%&gt;
        &lt;hr /&gt;
    &lt;/ItemTemplate&gt;
&lt;/asp:DataList&gt;

O código C# abaixo representa um método criado na página para tratar a listagem dos dados, inclusive por fazer a paginação. O código por ser adaptado para qualquer realidade.

protected void ListarDados(string tipo)
{
    int tamanhoPagina = 10;
    int registroInicio = 0;

    if (ViewState[&quot;registroInicio&quot;] != null)
        registroInicio = (int)ViewState[&quot;registroInicio&quot;];

    if (tipo == &quot;proximo&quot;)
        registroInicio += tamanhoPagina;
    else if (tipo == &quot;anterior&quot;)
        registroInicio -= tamanhoPagina;

    if (registroInicio &lt; 0)
        registroInicio = 0;

    SqlConnection con = new SqlConnection(@&quot;Data Source=localhostSQLEXPRESS;Initial Catalog=Northwind;Integrated Security=True&quot;);
    SqlCommand cmd = con.CreateCommand();
    cmd.CommandText = &quot;SELECT PRODUCTID, PRODUCTNAME, UNITPRICE FROM PRODUCTS &quot;;

    con.Open();

    SqlDataAdapter da = new SqlDataAdapter();
    da.SelectCommand = cmd;
    DataTable dt = new DataTable();

    //Preenchendo o DataTable com a quantidade de registro que se pretende mostrar.
    da.Fill(registroInicio, tamanhoPagina, dt);

    //Tratando o fim da navegação
    if (tipo == &quot;proximo&quot; &amp;&amp; dt.Rows.Count == 0 &amp;&amp; registroInicio &gt; 0)
    {
        registroInicio -= tamanhoPagina;
        da.Fill(registroInicio, tamanhoPagina, dt);
    }

    DataList1.DataSource = dt;
    DataList1.DataBind();
    con.Close();

    ViewState.Add(&quot;registroInicio&quot;, registroInicio);
}

O código abaixo implementa os botões de navegação.

protected void lkbtnAnterior_Click(object sender, EventArgs e)
{
    ListarDados(&quot;anterior&quot;);
}

protected void lkbtnProximo_Click(object sender, EventArgs e)
{
    ListarDados(&quot;proximo&quot;);
}

Para listar os dados e mostrar a primeira página, chame o método ListarDados sem informar as opções de navegação. Desta forma:


    ListarDados(&quot;&quot;);

Baixe aqui o exemplo.

Para deixar mais eficiente o recurso de paginação, recursos do próprio banco de dados como a funções TOP, FIRST, LAST e etc podem ser utilizados.

HTML – Hyper Text Markup Language

O que é X/HTML?

HTML é uma linguagem para escrever páginas web e significa Hyper Text Markup Language (Linguagem de Marcação de HiperTexto), foi desenvolvida por Tim Berners-Lee. HTML não é uma linguagem de programação, e sim uma linguagem de marcação, isto é, um conjunto de marcações (etiquetas/tags) para descrever as páginas HTML.

  • Hyper Text: Pode ser explicado como um conjunto de informações organizada em blocos de textos, imagens, sons e videos cujo acesso se dá através de referências específicas denominadas hiperlinks, ou simplesmente links;
  • Mark-up: As marcações que definem o conteúdo (blocos de textos, imagens, sons e videos) e sua disposição dentro de um documento HTML;
  • Language: Um conjunto de palavras reservadas e regras como usá-las.

Portanto, HTML é utilizado para apresentar conteúdo na Internet no formato “página Web”. O navegador Web (Browser) é capaz de interpretar/ler as tags HTML e desenhar o conteúdo. As tags informam ao browser a estrutura e o significado da página HTML, isto é, diz ao browser como apresentar o texto, qual é o título da página, qual formatação de fonte usar, cores de fundo, onde as imagens devem ser exibidas, etc.

A XHTML é um reformulação da linguagem HTML baseada na XML (Extensible Markup Language). Um documento XHTML possui alguns elementos novos, mas é praticamente igual a um documento HTML, pois ambas linguagens utilizam o mesmo o mesmo conjunto de elementos.

Cada navegador pode interpretar alguma característica do XHTML de forma diferente (o que gera grandes problemas). O W3C é a organização responsável por manter o padrão do XHTML entre os navegadores, tentando mininizar as divergências de interpretação do XHTML por cada navegador.

Normalmente uma página XHTML é hospedada em servidor e pode ser acessada por uma URL (endereço) mediante a solicitação de um navegador em um outro computador. O navegador cliente envia (através da Internet) uma solicitação de informações ao computador servidor. O servidor processa o pedido e retorna para o cliente (através da Internet) as informações de solicitação em formato XHTML, e é exibido o conteúdo. Os documentos XHTML ficam armazenados dentro de um aplicativo chamado de Servidor Web instalado num servidor.

Funcionamento do servidor Web

Funcionamento do servidor Web

Um documento XHTML nada mais é que um arquivo texto comum (ASCII). E pode ser escrito com o uso de um editor de textos comum (Edit, E , Norton Editor, Notepad, …) e tem a terminação .htm ou .html. Exemplo: http://www.meusite.com.br/listaprodutos.html.

Existem atualmente várias ferramentas/aplicativos que facilitam a produção de documentos, dentre eles podemos destacar os editores WYSIWYG (What you see is what you get): Dreamweaver, VisualStudio…

Como é uma Tag XHTML?

As tag XHTML são rótulo ou marcações que indicam ao navegador como o conteúdo deve ser apresentado. Diversas tag são disponibilizadas pela linguagem XHTML, e cada uma tem uma funcionalidade específica. As tags têm o mesmo formato: começam com um sinal de menor “<“ e acabam com um sinal de maior “>”, e normalmente vêm em pares, como <nometag> e </nometag> A primeira tag do par é de chamada tag de início, a segunda tag é a tag final. Observe que tag final existe o caractere / (barra), o que indica o fechamento da instrução.

Exemplos:

  • <b>Este texto será exibido em negrito</b>
  • <i>Este texto será exibido em itálico</i>
  • <h1>Este texto é um título</h1>

As tags podem ser aninhadas dentro de outras tags. Exemplo: <i><b>Texto</b></i>. Não é possível sair inventando suas próprias tags, pois elas devem ser compatíveis com a linguagem XHTML.

Além das tags de pares existem as tags órfãs, ou seja, não possui um par para fechá-la.

Exemplos:

  • <br />
  • <hr />

Algumas tags apresentam atributos, que são informações adicionais sobre as tags. Um exemplo é a tag para definição de hiperlinks, <a>…</a>, que possui o atributo href e tem como valor o endereço de destino, e o atributo target que mantém uma informação sobre a janela que abrirá a página referenciada no atributo href.

Exemplo: <a href=http://www.andremenegassi.wordpress.com>Clique aqui</a>

Todas tags e seus atributos devem SEMPRE  estar em caracteres minúsculo para a versão XHTML, a versão a HTML permite misturar caracteres minúsculos e maiúsculos.

Anatomia de um documento XHTML

Todo documento HTML deve possuir a seguinte anatomia:

<html>
<head>
<title>Minha primeira página</title>
</head>
<body>
Conteúdo da página

</body>
</html>

  • <html></html>: Marca o início e o final do documento XHTML;
  • <head></head>: É o cabeçalho do documento. As informações contidas aqui não serão exibidas na página após renderizada pelo navegador. Comumente usando para definir o título do documento e informações de metadados;
  • <title></title>: Sempre deve estar aninhada dentro das tags <head></head> e define o texto que será mostrado na barra de título do navegador;
  • <body></body>: É nesta área que o conteúdo do documento é definido.

Resultado após renderização pelo navegador:

Primeiras Tags

As tags abaixo devem ser usadas dentro dos pares de tags <body></body>:

  • <h[valor]> … </h[valor]>: Para demarcar títulos e subtítulos dentro do documento,  sendo que [valor] deve ser um valor entre 1(um) e 6(seis). À medida que o valor aumenta o texto diminui;
  • <br />: O texto em um documento HTML não faz quebras de linha automáticas. Essas devem ser inseridas utilizando-se tags <br />;
  • <p> … </p>: Estes pares de tag criam parágrafos no texto do corpo do documento, gerando uma quebra de linha com espaçamento maior que a da tag <br/>;
  • <b> … </b>: Coloca em negrito o texto entre as tags;
  • <i> … </i>: Coloca em itálico o texto entre as tags;
  • <u> … </u>: Sublinha o texto entre as tags;
  • <sub> … </sub>: Texto Subscrito;
  • <sup> … </sup>: Texto Sobrescrito.
  • <pre> … </pre>: Texto pré-formatado.
  • <blockquote> … </blockquote>: Citações no texto.
  • <address> … </addres>: Inforrmações de contato.

Conjunto de caracteres (charset)

Um conjunto de caracteres nada mais é que um repertório de caracteres suportados por um documento XHTML. O conjunto de caracteres padrão de documentos XHTML é o UNICODE, isto significa que navegadores comportam-se por padrão (internamente) com uso da codificação UNICODE.

A definição do conjuto de caracteres do site é importante para que não ocorra problemas de interpretação dos caracteres pelos navegadores, principalmente relacionados a visualização do site em outro país que utiliza uma tabela de caracteres diferentes.

O conjunto de caracteres mais completo é o UTF-8 (Unicode Transformation Format). Na sessão head do documento XHTML podemos definir qual conjunto de caracteres o navegador deverá utilizar ao interpretar o documento HTML.

Exemplo:

<head>
<title>Título</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
</head>

Veja mais detalhes sobre tabelas de conjuntos de caracteres em http://www.w3schools.com/tags/ref_charactersets.asp.

Entidades XHTML

Alguns caracteres são reservados do dicionário do XHTML. Por exemplo, você não pode usar os sinais < e > dentro do texto, pois o navegador pode se confundir com tags de marcação. Outra a situação é o uso de alguns caracteres especiais e caracteres com acentuação.

Para essa situação podemos substituir esses caracteres por entidades XHTML, que quando processadas pelo navegador represetam o caractere desejado:

Exemplo:

  • espaço: &nbsp;
  • <: &lt;
  • >: &gt;
  • ©: &copy;
  • ç: &ccedil;

Veja mais um monte de entidades em http://www.w3schools.com/tags/ref_entities.asp.

 

DOCTYPE

A declaração DOCTYPE indica qual versão do HTML ou XHTML o documento foi escrito, importante para que o navegador saiba como interpretar as tags contidas nele.  Ela deve ser a primeira instrução do documento  e não deve ser confundida com uma tag XHTML, pois a mesma é escrita com caracteres maiúsculos.

A declaração DOCTYPE deve sempre estar no formato <!DOCTYPE html [PUBLIC “fpi” “catálogo”]>, sendo fpi (Formal Public Identifiers) a versão do XHTML utilizada de acordo com o W3C, e catálogo a URL informando o endereço do local onde se encontra o arquivo de catálogo (DTD – Document Type Definition) com as regras de validação conforme a versão do informada no fpi.

Os DOCTYPES para a versão 4 do HTML e 1 do XHTML disponíveis nas recomendações do W3C são:

  • HTML 4.01 Strict
  • HTML 4.01 Transitional
  • HTML 4.01 Frameset
  • XHTML 1.0 Strict
  • XHTML 1.0 Transitional
  • XHTML 1.0 Frameset
  • XHTML 1.1

O DOCTYPE Strict é o mais rígido e permite um código mais limpo. Não são permitidos erros de estruturas e de apresentação, o uso de CSS também é obrigatório, e não são permitidos o uso de frames.

O DOCTYPE Transitional é mais flexível e deve ser usado para permitir uma navegação por browsers mais antigos ou que não suportam CSS por exemplo.  É também conhecido como DOCTYPE Loose (frouxo).

O DOCTYPE Frameset deverá ser usado para documentos que fizer o uso de frames.

Exemplo:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>….

O site do W3Schools disponibilida uma tabela com as tags XHTML suportadas pelos DOCTYPE citados. Importante para construir páginas Web dentro dos padrões adotados. Confira a tabela em: http://www.w3schools.com/tags/ref_html_dtd.asp ou http://www.w3.org/QA/2002/04/valid-dtd-list.html.

A declaração DOCTYPE para o HTML 5 está simplificada até seu lançamento oficial:

<!DOCTYPE html>
<html>
<html>
<head>….