Sábado, 20 de Setembro de 2008

Validação de campos de formulário com Javascript

Uma solução bastante simples e interessante para a validação de campos de formulários, utilizando javascript.

A mensagem não de erro, não abre-se num pop-up, mas sim ao lado do campo.

Para baixar o código javascript, clique aqui

Abaixo segue o código para ser inserido entre as tags <head>

<script type="text/javascript">
// Somente os dados dos campos deste formulário vai aqui.
// As rotinas/funções de uso geral estão no arquivo, que está separado.

function validateOnSubmit() {
var elem;
var errs=0;
// execute all element validations in reverse order, so focus gets
// set to the first one in error.
if (!validateTelnr (document.forms.demo.telnr, 'inf_telnr', true)) errs += 1;
if (!validateAge (document.forms.demo.age, 'inf_age', false)) errs += 1;
if (!validateEmail (document.forms.demo.email, 'inf_email', true)) errs += 1;
if (!validatePresent(document.forms.demo.from, 'inf_from')) errs += 1;

if (errs>1) alert('Campos Inválidos');
if (errs==1) alert('There is a field which needs correction before sending');

return (errs==0);
};
</script>

Agora, segue o código html, para ser inserido entre as tags <body>

<form name="demo" onsubmit="return validateOnSubmit()" action="#">
<div style="width: 100%">
<div style="width: 15%; float:left"><label for="from">Seu nome:</label></div>
<div style="float:left">
<input type="text" name="from" id="from" size="35" maxlength="50" onchange="validatePresent(this, 'inf_from');">
</div>
<div id="inf_from">*</div>
</div><br />

<div style="width: 100%">
<div style="width: 15%; float:left"><label for="email">Se e-mail:</label></div>
<div style="float:left">
<input type="text" name="email" id="email" size="35" maxlength="50" onchange="validateEmail(this, 'inf_email', true);">
</div>
<div id="inf_email">*</div>
<div><br />

<div style="width: 100%">
<div style="width: 15%; float:left"><label for="age">Sua idade (em anos):</label></div>
<div style="float:left">
<input type="text" name="age" id="age" size="35" maxlength="5" onchange="validateAge(this, 'inf_age', false);">
</div>
<div id="inf_age"> </div>
</div><br />

<!-- Obs.: O elemento para receber mensagens de erro deve conter alguns dados (para a maioria, se não todos os navegadores). 1 é suficiente. -->

<div style="width: 100%">
<div style="width: 15%; float:left"><label for="telnr">Seu telefone (fixo):</label></div>
<div style="float:left">
<input type="text" name="telnr" id="telnr" size="35" maxlength="25" onchange="validateTelnr(this, 'inf_telnr', true);">
</div>
<div id="inf_telnr">* Você pode usar espaços ou hífen!</div>
</div><br />

<div style="width: 100%">
<div> </div>
<div><input type="Submit" name="Submit" value=" Enviar "></div>
<div> </div>
</div>

</form>

Para ver o formulário em funcionamento, clique aqui.

É isso aí!

Abraços


fonte: http://www.xs4all.nl/~sbpoley/webmatters/formval.html

Marcadores:

postado por Milton Sylvio às 13:53 0 Comentários

Tirando o bug do .PNG no I.E. 6

Infelizmente o Internet Explorer 6 (e versões anteriores) não dá suporte ao tipo de arquivo de imagen PNG.

Para isso, é necessário colocar o seguinte hack (CSS - Alpha PNG support for IE):

Aviso, este código abaixo funciona apenas para visualização na tela. Quando este documento for impresso, o bug voltará.
O Hack Abaixo faz o código rodar apenas no IE. Sendo que os outros browsers como, Firefox, Opera e Safari já tem a transparencia de PNG nativo.

\*/
* html img/**/ {
filter:expression(
this.alphaxLoaded ? "" :
(
this.src.substr(this.src.length-4)==".png"
?
(
(!this.complete)
? "" :
this.runtimeStyle.filter=
("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.src+"')")+
(this.onbeforeprint="this.runtimeStyle.filter='';this.src='"+this.src+"'").substr(0,0)+
String(this.alphaxLoaded=true).substr(0,0)+
(this.src="blank.png").substr(0,0)
)
:
this.runtimeStyle.filter=""
)
);
}
html, body {
color:#000;
background:#333333;
}

Abraços,

postado por Milton Sylvio às 10:36 0 Comentários

Sexta-feira, 19 de Setembro de 2008

Posicionando imagens ao lado de textos (os editores chamam-a de "olho") usando a técnica de "listas de definição"

Uma dúvida que eu tinha: Como deixar deixar imagens ao lado de textos, sem usar tabelas?

Para resolver esse problema utilizei a técnica de "lista de definição", no qual usa-se as tags <dt>, <dl> e <dd> com o auxilio de CSS.

A tag dl vem do inglês definition list e significa lista de definição.

A tag dt vem do inglês definition term e significa termo de definição.

A tag dd vem do inglês definition description e significa descrição de definição.

O uso combinado dessas tags permite obter resultados similares ao das tags ul e li de listas exceto pelo marcador.

Como exemplo, utilizarei o seguinte código:

<dl class="destacar">
<dt> <img src="http://www.miltonsylvio.com/img/mr-been.gif" width="96" height="96" />Titulo do Texto</dt>
<dd> Ne vero ex hac nostra decem dierum subtractione, alicui, quod ad annuas vel menstruas praestationes pertinet, praeiudicium fiat, partes iudicum erunt in controversis, ...</dd>
</dl>

Agora o código CSS:

dl.destacar {
margin: 15px 0;
padding: 15px;
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
}

dl.destacar dt img {
float: left;
margin: 0 10px 0 0;
padding: 0 3px 3px 0;
}

dl.destacar dd {
margin-left: 110px;
font-size: 90%;
line-heigh:1.5em;
color:#666;
}

dl.destacar:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

dl.destacar dt {
margin: 0 0 .5em 0;
font-famlily: Georgia, Times, Times New Roman;
font-size: 140%;
color: #1f328b;
}

Abaixo, o resultado:


Titulo do Texto

Ne vero ex hac nostra decem dierum subtractione, alicui, quod ad annuas vel menstruas praestationes pertinet, praeiudicium fiat, partes iudicum erunt in controversis, ...



É isso aí!

Marcadores:

postado por Milton Sylvio às 16:47 0 Comentários

Terça-feira, 25 de Março de 2008

Atendimento Precário

Conversando com o professor Rômulo, da faculdade, vimos o quanto o atendimento de agência digital anda devendo a seus clientes ou futuros (ou ex-futuros) clientes. Para que a nossa teoria fosse colocada em prática, mandei alguns e-mails dizendo que necessitava do desenvolvimento de uma intranet para a empresa que trabalho.

Bingo, nossa teoria estava certa, de 10 e-mails enviados, apenas 2 retornaram o meu contato!

Com a modernização, tecnologias surgindo a toda hora e sistematização, as agências (isso inlcui as digitais, de publicidade, design, etc...) não tem mais aquele atendimento de antigamente, onde o cliente era tratado como a coisa mais importante da empresa (e deveria continuar sendo, pois são eles que nos pagam) . Hoje, por exemplo, quando você liga para o atendimento de um banco, você só houve a gravação falando!

E o mal atendimento não é só mais no pós, está acontecendo também no pré-atendimento, onde propostas de serviços são enviadas por e-mail ou por fax, contratos, etc... Tudo pela economia!

Será que não seria interessante em economizar em outras coisas, e investir e priorizar no atedimento diferenciado para cada cliente?

Será que os gerentes, diretores da parte de atendimento já se colocaram na posição de cliente?

É, acho que evoluir sim, mas preservar aquilo que é nosso pilar de existência é mais importante! É hora de tratarmos os clientes como alguém da nossa família, alguém que queremos bem, alguém no qual a felicidade dele estará acima de tudo!

Abraços!

postado por Milton Sylvio às 13:10 1 Comentários