Normalmente quando o Google decide fazer alguma coisa vale a pena ficar de olho:
http://blogoscoped.com/archive/2008-09-01-n47.html
http://www.google.com/chrome
terça-feira, 2 de setembro de 2008
quinta-feira, 31 de julho de 2008
Formulários HTML
Para enviar informações ao servidor na arquitetura WEB utilizamos a Requisição HTTP(HTTP Request), nesta podemos enviar informações através de cookies, na URL chamado querystring e internamente na requisição. Uma forma muito comum de enviar estas informações do cliente é utilizar o formulário HTML e seus elementos de formulário.
O formulário HTML é representado pelo elemento <form> e dois atributos são importantes de serem conhecidos por nós, o atributo method, que pode receber os valores get e post, e o atributo action que define a URL destino que os dados do formulário serão enviados para fazer a próxima requisição.
Veja uma exemplo no código 1:
<form method="post" action="formulario.asp" >
</form>
Código 1 - Exemplo da utilização do elemento <form>
O formulário define o método e o destino para onde os dados do formulário serão enviados, mas somente os valores dos elementos de formulários serão enviados. Então textos livres ou qualquer outro elemento que não seja de formulário, não serão enviados ao servidor. Ainda para que o elemento de formulário tenha seu valor enviado, deve ter definido o seu atributo name e o atribudo disabled não definido, ou seja, o elemento deve estar habilitado.
Para ver isto acontecendo, vamos criar outro HTML chamado formulario.htm e adicionar o código 2 como seu conteúdo:
<html>
<head>
<title>Formulario HTML</title>
</head>
<body>
<form method="post" action="formulario.htm">
<fieldset>
<legend>Informacoes do Usuario</legend>
Usuario: <input
type="text" name="usuario" /><br />
Senha: <input
type="password" name="senha" /><br />
<input
type="checkbox" id="usuarioAtivo" name="usuarioAtivo" value="1" /><label
for="usuarioAtivo">Usuario ativo</label>
</fieldset><br />
Nome: <input type="text" name="nome"
/><br/>
Sexo:
<input type="radio" name="sexo"
id="sexoMasculino" value="m" /><label for="sexoMasculino">Masculino</label>
<input type="radio" name="sexo"
id="sexoFeminino" value="f" /><label for="sexoFeminino">Feminino</label><br />
Estado Sudeste:
<select name="estado">
<option>Espirito
Santo</option>
<option>Minas
Gerais</option>
<option>Rio de
Janeiro</option>
<option>São
Paulo</option>
</select><br />
Cupom desconto: <input type="text"
name="cupomDesconto" readonly="readonly" value="12-34-56" /><br />
Observacoes:<br />
<textarea name="observacoes" cols="60"
rows="2"></textarea><br /><br />
Teste de campo desabilitado: <input
type="text" name="campoDesabilitado" disabled="disabled" value="Valor do campo
desabilitado" size="60" /><br />
Este é um campo oculto: <input
type="hidden" name="campoOculto" value="Valor do campo oculto" /><br />
<input type="submit" name="enviar"
value="Enviar" />
</form>
</body>
</html>
Código 2 - Código do formulário 1
No código 2 têm vários elementos de formulário, abaixo segue uma lista de todos os elementos de formulário do HTML 4.01 e está em negrito os elementos utilizado no código 2:
Vamos ver o que o HTML acima gera ao ser visualizado em um navegador:
Imagem 1 - Visualizando o formulário
Preencha os valores como na Imagem 2:
Imagem 2 - Preenchendo os valores
Clicando em enviar e analisando a requisição HTTP criada para este evento, por exemplo utilizando o firebug, teremos o resultado conforme Imagem 3 e Imagem 4:
Imagem 3 - Analisando a requisicao HTTP no Firebug
Imagem 4 - Parametros de post da requisicao HTTP
Alguns pontos importante de serem observados são:
Repare que para ter seus valores enviados os elementos devem ter seu atributo name definido. O atributo id pode ser definido, mas não influencia no envio de informações ao servidor, este atributo é utilizado para manipulação em cliente, seja por javascript ou por exemplo pelo elemento <label>
Referências:
http://developer.mozilla.org/en/docs/DOM:form
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40002357
http://developer.mozilla.org/en/docs/XUL:label
http://msdn.microsoft.com/en-us/library/ms535845(VS.85).aspx
O formulário HTML é representado pelo elemento <form> e dois atributos são importantes de serem conhecidos por nós, o atributo method, que pode receber os valores get e post, e o atributo action que define a URL destino que os dados do formulário serão enviados para fazer a próxima requisição.
Veja uma exemplo no código 1:
<form method="post" action="formulario.asp" >
</form>
Código 1 - Exemplo da utilização do elemento <form>
O formulário define o método e o destino para onde os dados do formulário serão enviados, mas somente os valores dos elementos de formulários serão enviados. Então textos livres ou qualquer outro elemento que não seja de formulário, não serão enviados ao servidor. Ainda para que o elemento de formulário tenha seu valor enviado, deve ter definido o seu atributo name e o atribudo disabled não definido, ou seja, o elemento deve estar habilitado.
Para ver isto acontecendo, vamos criar outro HTML chamado formulario.htm e adicionar o código 2 como seu conteúdo:
<html>
<head>
<title>Formulario HTML</title>
</head>
<body>
<form method="post" action="formulario.htm">
<fieldset>
<legend>Informacoes do Usuario</legend>
Usuario: <input
type="text" name="usuario" /><br />
Senha: <input
type="password" name="senha" /><br />
<input
type="checkbox" id="usuarioAtivo" name="usuarioAtivo" value="1" /><label
for="usuarioAtivo">Usuario ativo</label>
</fieldset><br />
Nome: <input type="text" name="nome"
/><br/>
Sexo:
<input type="radio" name="sexo"
id="sexoMasculino" value="m" /><label for="sexoMasculino">Masculino</label>
<input type="radio" name="sexo"
id="sexoFeminino" value="f" /><label for="sexoFeminino">Feminino</label><br />
Estado Sudeste:
<select name="estado">
<option>Espirito
Santo</option>
<option>Minas
Gerais</option>
<option>Rio de
Janeiro</option>
<option>São
Paulo</option>
</select><br />
Cupom desconto: <input type="text"
name="cupomDesconto" readonly="readonly" value="12-34-56" /><br />
Observacoes:<br />
<textarea name="observacoes" cols="60"
rows="2"></textarea><br /><br />
Teste de campo desabilitado: <input
type="text" name="campoDesabilitado" disabled="disabled" value="Valor do campo
desabilitado" size="60" /><br />
Este é um campo oculto: <input
type="hidden" name="campoOculto" value="Valor do campo oculto" /><br />
<input type="submit" name="enviar"
value="Enviar" />
</form>
</body>
</html>
Código 2 - Código do formulário 1
No código 2 têm vários elementos de formulário, abaixo segue uma lista de todos os elementos de formulário do HTML 4.01 e está em negrito os elementos utilizado no código 2:
- <input type="text"/>
Define uma caixa de texto para digitação do usuário - <input type="password"/>
Define uma caixa de texto para digitação do usuário, o texto digitado não aparecerá no navegador - <input type="radio"/>
Define uma opção para seleção - <select>
Monta uma lista de valores, para seleção de uma ou várias opções. - <input type="checkbox"/>
Controle que permite selecioná-lo, normalmente utilizado para confirmar uma opção - <textarea>
Permite a digitação de um texto que pode ter várias linhas. - <input type="file">
Permite o envio de um arquivo selecionado pelo usuário ao servidor. - <input type="hidden">
Permite o envio de um valor, que não é visível pelo usuário. - <input type="submit">
Botão que, quando clicado, faz o envio dos dados do formulário. - <input type="reset">
Botão que limpa os valores dos elementos de formulário para seus valores iniciais. - <input type="image">
Botão que é uma imagem, quando clicado, envia os dados do formulário. - <input type="button">
Botão que não envia os dados do formulário. Interessante para o uso com javascript.
Vamos ver o que o HTML acima gera ao ser visualizado em um navegador:
Imagem 1 - Visualizando o formulárioPreencha os valores como na Imagem 2:
Imagem 2 - Preenchendo os valoresClicando em enviar e analisando a requisição HTTP criada para este evento, por exemplo utilizando o firebug, teremos o resultado conforme Imagem 3 e Imagem 4:
Imagem 3 - Analisando a requisicao HTTP no Firebug
Imagem 4 - Parametros de post da requisicao HTTPAlguns pontos importante de serem observados são:
- Textos livres dentro de formulário não são enviados, somente elementos de formulário;
- Elementos de formulário em modo somente leitura, atributo readonly definido, tem seus valores enviados normalmente;
- Elementos de formulário em desabilitados, atributo disabled definido, não tem seus valores enviados;
- Campos ocultos tem seus valores enviados;
Repare que para ter seus valores enviados os elementos devem ter seu atributo name definido. O atributo id pode ser definido, mas não influencia no envio de informações ao servidor, este atributo é utilizado para manipulação em cliente, seja por javascript ou por exemplo pelo elemento <label>
Referências:
http://developer.mozilla.org/en/docs/DOM:form
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40002357
http://developer.mozilla.org/en/docs/XUL:label
http://msdn.microsoft.com/en-us/library/ms535845(VS.85).aspx
quarta-feira, 30 de julho de 2008
HTML - Experiência rica
O HTML pode ter imagens, textos e hiperlinks como já vimos, mas somente isso talvez não faria nossos documentos possibilitarem uma experiência totalmente rica.
Além de permitir a interligação de todos os documentos da WEB entre si, mostrar imagens e estruturar o HTML com grande liberdade, também é possível ver multimídias como animações, vídeo e áudio. Assim nossos documentos HTML além de poderem ter uma interface bonita, podem permitir uma ótima experiência e usabilidade para nossos usuários.
Antes de sair colocando um vídeo ou áudio para tocar em nossas páginas devemos lembrar que estes recursos, se tocados sem o consentimento do usuário, pode gerar bastante incômodo. Este tipo de recurso deve ser utilizado com cuidado, diversos sites que utilizam áudio, como por exemplo o YouTube, tocam seus vídeos quando o usuário os aciona e/ou sempre há a possibilidade de interromper ou parar.
O HTML possibilita a utilização de vídeo e áudio historicamente através de alguns elementos como <bgsound>, <a>, <embed>, <object>, como é possível ver neste link, mas cada solução tem sua limitação quanto a diferentes versões de navegadores e sistemas operacionais. Para uma solução que atenda diferentes sistemas operacionais e navegadores, é necessário usar javascript.
Hoje em dia é muito comum ouvirmos falar do Adobe Flash(o antigo Macromedia Flash, pois a Adobe comprou a Macromedia), veja um demonstração dos recursos neste flash da própria adobe. A Microsoft também têm um produto concorrente para o Adobe Flash, que é o Silverlight. Veja uma demonstração. Ambas empresas fornecem um produto que é o ambiente próprio para desenvolver suas animações, permitindo a utilização de scripts e linguagens de programação
O interessante que estas opções, principalmente o Flash, vêm se tornando tão comuns que vários navegadores já vêem com ele instalado. Ou seja, se atender TODOS os usuários que acessem o nosso site não for tão crítico para o negócio, é possível utilizar destes recursos sem receio de perder usuários.
Outra forma de desenvolver aplicações WEB hoje em dia é o chamado RIA(Rich Internet Application) ou Aplicação de Internet Rica, também utilizando em cliente Flash e Silverlight.
Referências:
http://developer.mozilla.org/en/docs/Using_the_Right_Markup_to_Invoke_Plugins
http://www.scriptwell.net/howtoplaysound.htm
http://silverlight.net/
http://www.adobe.com/products/flashplayer/
http://www.adobe.com/products/flex/
Além de permitir a interligação de todos os documentos da WEB entre si, mostrar imagens e estruturar o HTML com grande liberdade, também é possível ver multimídias como animações, vídeo e áudio. Assim nossos documentos HTML além de poderem ter uma interface bonita, podem permitir uma ótima experiência e usabilidade para nossos usuários.
Antes de sair colocando um vídeo ou áudio para tocar em nossas páginas devemos lembrar que estes recursos, se tocados sem o consentimento do usuário, pode gerar bastante incômodo. Este tipo de recurso deve ser utilizado com cuidado, diversos sites que utilizam áudio, como por exemplo o YouTube, tocam seus vídeos quando o usuário os aciona e/ou sempre há a possibilidade de interromper ou parar.
O HTML possibilita a utilização de vídeo e áudio historicamente através de alguns elementos como <bgsound>, <a>, <embed>, <object>, como é possível ver neste link, mas cada solução tem sua limitação quanto a diferentes versões de navegadores e sistemas operacionais. Para uma solução que atenda diferentes sistemas operacionais e navegadores, é necessário usar javascript.
Hoje em dia é muito comum ouvirmos falar do Adobe Flash(o antigo Macromedia Flash, pois a Adobe comprou a Macromedia), veja um demonstração dos recursos neste flash da própria adobe. A Microsoft também têm um produto concorrente para o Adobe Flash, que é o Silverlight. Veja uma demonstração. Ambas empresas fornecem um produto que é o ambiente próprio para desenvolver suas animações, permitindo a utilização de scripts e linguagens de programação
O interessante que estas opções, principalmente o Flash, vêm se tornando tão comuns que vários navegadores já vêem com ele instalado. Ou seja, se atender TODOS os usuários que acessem o nosso site não for tão crítico para o negócio, é possível utilizar destes recursos sem receio de perder usuários.
Outra forma de desenvolver aplicações WEB hoje em dia é o chamado RIA(Rich Internet Application) ou Aplicação de Internet Rica, também utilizando em cliente Flash e Silverlight.
Referências:
http://developer.mozilla.org/en/docs/Using_the_Right_Markup_to_Invoke_Plugins
http://www.scriptwell.net/howtoplaysound.htm
http://silverlight.net/
http://www.adobe.com/products/flashplayer/
http://www.adobe.com/products/flex/
Assinar:
Postagens (Atom)