Validação Mobile - Meu código com vários erros

Martinsrj · Abril 16, 2010

Olá pessoal, boa tarde!

Venho aqui solicita ajuda na validação do meu código para mobile.

Segue o código:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<title>Atualização de Chamado</title>

<style type="text/css">
label {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#000000;
}

input:focus, select:focus, textarea:focus {
	background:#DFDFFF;
	color:white; 
}

body { 
	margin:0; 
	padding:0; 
	background:#FFFFFF;  
} 

table.tabela {   
	/*width:200;
	text-align: center;   
	margin: 0 auto; */
}
</style>

<script type="text/javascript">
function addRowToTable()
{
  var tbl = document.getElementById('AtChamado');
  var lastRow = tbl.rows.length -1;
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);
  
  var cellRightSel = row.insertCell(0);
  var textTpDespesa = document.createTextNode("Tipo Despesa");
  var fontTpDespesa = document.createElement("label");
  var quebraTpDespesa = document.createElement('BR');
  var sel = document.createElement('select');
  var quebra = document.createElement('BR');
  sel.name = 'selRow' + iteration;
  sel.options[0] = new Option('... Selecione ...', '... Selecione ...');
  sel.options[1] = new Option('Kilometragem', 'Kilometragem');
  sel.options[2] = new Option('Taxi', 'Taxi');
  sel.options[3] = new Option('Onibus', 'Ônibus');
  sel.options[4] = new Option('Refeicao', 'Refeição');
  sel.options[5] = new Option('Outros', 'Outros');

  fontTpDespesa.appendChild(textTpDespesa); 
  cellRightSel.appendChild(fontTpDespesa); 
  cellRightSel.appendChild(quebraTpDespesa);
  
  cellRightSel.appendChild(sel);
  cellRightSel.appendChild(quebra);
  
  var textDesc = document.createTextNode("Descrição");
  var fontDesc = document.createElement("label");
  
  var quebraDesc = document.createElement('BR');
  var el = document.createElement('input');
  var quebra = document.createElement('BR');
  el.type = 'text';
  el.name = 'txtDescD' + iteration;
  el.id = 'txtDescD' + iteration;
  el.size = 10;
  
  el.onkeypress = keyPressTest;

  fontDesc.appendChild(textDesc); 
  cellRightSel.appendChild(fontDesc); 
  cellRightSel.appendChild(quebraDesc);
  cellRightSel.appendChild(el);
  cellRightSel.appendChild(quebra);

  var textValor = document.createTextNode("Valor");
  var fontValor = document.createElement("label");
  var quebraValor = document.createElement('BR');	
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'txtValorD' + iteration;
  el.id = 'txtValorD' + iteration;
  el.size = 10;  
  
  el.onkeypress = keyPressTest;

  fontValor.appendChild(textValor); 
  cellRightSel.appendChild(fontValor); 
  
  cellRightSel.appendChild(quebraValor);
  cellRightSel.appendChild(el);
   
}

function keyPressTest(e, obj)
{
  var validateChkb = document.getElementById('chkValidateOnKeyPress');
  if (validateChkb.checked) {
    var displayObj = document.getElementById('spanOutput');
    var key;
    if(window.event) {
      key = window.event.keyCode; 
    }
    else if(e.which) {
      key = e.which;
    }
    var objId;
    if (obj != null) {
      objId = obj.id;
    } else {
      objId = this.id;
    }
    displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);
  }
}
function removeRowFromTable()
{
  var tbl = document.getElementById('AtChamado');
  var lastRow = tbl.rows.length -1;
  if (lastRow > 13) tbl.deleteRow(lastRow - 1);
  
}

function verificaHP(obj) {  
	if (!document.layers) {  
	var txt = document.getElementById("somenteHP");  
		if (obj.value == "f_hp@ntl.com.br") {  
			txt.style.display = "inline";  
			txt.name = "optTipoChamado";  
			obj.name = "";  
		} 
		else {  
			txt.style.display = "none";  
			txt.name = "";  
			obj.name = "optTipoChamado";  
		}  
	} 
}		

</script>


</head>
<body>

<form action="formNtl.html" method="get">
<table class="tabela" id="AtChamado" align="left">
  <tr>
    <td>
	<label class="label" for="optTipoChamado">Tipo do Chamado:</label><br />
	<select name="optTipoChamado" id="optTipoChamado" onchange="verificaHP(this)">
		<option value="">... Selecione ...</option>
		<option value="f_hp@ntl.com.br">HP</option>
		<option value="f_altiris@ntl.com.br">NTL</option>
	</select>	</td>
  </tr>
  <tr>
    <td>
	<label for="txtChamadoAltiris" class="label">Chamado Altiris:</label><br />
		<input class="input" type="text" title="" maxlength="" size="" name="txtChamadoAltiris" id="txtChamadoAltiris" value="" />	</td>
  </tr>
  <tr>
    <td>
	<label for="txtChamadoHP" class="label">Chamado HP:</label><br />
		<input class="input" type="text" title="" maxlength="" size="" name="txtChamadoHP" id="txtChamadoHP" value="" />	</td>
  </tr>
  <tr>
    <td>
	<label for="txtDescServico" class="label">Descrição do Serviço:</label><br />
	<textarea title="" name="txtDescServico" id="txtDescServico" rows="5" cols="25" class="input"></textarea>	</td>
  </tr>
  <tr id="somenteHP" style="display:none;">  
    <td>
	<label for="txtPNRemovido" class="label">PN Removido:</label><br />
	<input class="input" type="text" title="" maxlength="" size="" name="txtPNRemovido" id="txtPNRemovido" value="" />	
	<br />
	<label for="txtNSRemovido" class="label">N/S Removido</label><br />
		<input class="input" type="text" title="" maxlength="" size="" name="txtNSRemovido" id="txtNSRemovido" value="" />
	<br />
	<label for="txtPNInstalado" class="label">PN Instalado:</label><br />
		<input class="input" type="text" title="" maxlength="" size="" name="txtPNInstalado" id="txtPNInstalado" value="" />
	<br />
	<label for="txtNSInstalado" class="label">N/S Instalado</label><br />
		<input class="input" type="text" title="" maxlength="" size="" name="txtNSInstalado" id="txtNSInstalado" value="" />
	
	</td>
  </tr>
  <tr>
    <td>
	<label for="txtQAssRS" class="label">Quem assinou o RS</label><br />
		<input class="input" type="text" title="" maxlength="" size="" name="txtQAssRS" id="txtQAssRS" value="" />	</td>
  </tr>
  <tr>
    <td>
	<label for="txtRS" class="label">RS</label><br />
		<input class="input" type="text" title="" maxlength="" size="" name="txtRS" id="txtRS" value="" />	</td>
  </tr>
  <tr>
    <td>
	<label for="txtDtInicio" class="label">Data Inicio</label><br />
	<input class="input" type="text" title="" maxlength="" size="" name="txtDtInicio" id="txtDtInicio" value="" />	</td>
  </tr>
  <tr>
    <td>
	<label for="txtHrInicio" class="label">Hora Inicio</label><br />
	<input class="input" type="text" title="" maxlength="" size="" name="txtHrInicio" id="txtHrInicio" value="" />	</td>
  </tr>
  <tr>
    <td>
	<label for="txtDtTermino" class="label">Data Término</label><br />
	<input class="input" type="text" title="" maxlength="" size="" name="txtDtTermino" id="txtDtTermino" value="" />	</td>
  </tr>
  <tr>
    <td>
	<label for="txtDtTermino" class="label">Hora Término<br /></label>
	<input class="input" type="text" title="" maxlength="" size="" name="txtDtTermino" value="" />	</td>
  </tr>
  <tr>
    <td>
	<label class="label" id="txtReembolso"><b>Reembolso</b></label>	</td>
  </tr>
  <tr>
    <td>
    	<label for="optTpDesp" class="label">Tipo Despesa </label>
	<br />
	<select name="optTpDesp" id="optTpDesp">
		<option value="">... Selecione ...</option>
        <option value="Kilometragem">Kilometragem</option>
        <option value="Taxi">Taxi</option>
		<option value="Onibus">Ônibus</option>
        <option value="Refeicao">Refeição</option>
        <option value="Outros">Outros</option>
     </select><br />
	 
	 <label for="txtDesc" class="label" onKeyPress="keyPressTest(event, this);">Descrição</label><br />
	<input class="input" type="text" title="" maxlength="" size="10" onKeyPress="keyPressTest(event, this);" name="txtDesc" id="txtDesc" value="" /><br />
	
	<label for="txtValor" class="label" onKeyPress="keyPressTest(event, this);">Valor</label><br />
	<input class="input" type="text" title="" maxlength="" size="10" onKeyPress="keyPressTest(event, this);" name="txtValor" id="txtValor" value="" />
		
    </td>
  </tr>
  
  <tr>
    <td align="left">
	<input type="button" value="Inserir" onclick="addRowToTable();" />
    <input type="button" value="Remover" onclick="removeRowFromTable();" /><br />
	<input name="Enviar" type="submit" id="Enviar" value="Enviar" />	
	</td>
  </tr>
</table>

</form>


</body>
</html>

Martinsrj · Abril 17, 2010

Segue o link pra vcs visualizarem a funcionalidade do formulario e tb de porque de tantos erros no meu código:

http://martinsrj.com/teste/index1.php

Abraços.

Paulo de Tarso F. M. · Abril 17, 2010

Meu caro Martinsrj, você já sabe quais são os erros, então lhe basta corrigí-los... http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif Ou você está com dúvidas justamente em relação aos erros apresentados?

Outra pergunta, você validou com o validador correto? Pois temos dois:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Validador de páginas "normais" - http://validator.w3.org/

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Validador de páginas mobile - http://validator.w3.org/mobile/

Martinsrj · Abril 17, 2010

Exato amigo, validei no de mobile: http://validator.w3.org/mobile/

Estou com dúvidas são nos erros apresentados.

Veja a minha pagina: http://martinsrj.com/teste/index1.php

Paulo de Tarso F. M. · Abril 17, 2010

Então tá, como diria Jack - O Estripador, vamos por partes... :P

Primeira coisa, para quem está chegando agora, para facilitar, esse é o link que vai direto para o resultado da validação do código da página:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://validator.w3.org/mobile/check?task=20100417171149383&docAddr=http%3A%2F%2Fmartinsrj.com%2Fteste%2Findex1.php

Agora vamos avaliar alguns erros:

1) The document is not valid UTF-8:

Opte por trabalhar com o charset UTF-8 ao invés do ISO-8859-1.

2) The document is served without caching information ("Expires" or "Cache-Control" header):

Utilize a meta tag "Expires". A data de expiração deve ser sempre uma data futura. Para que isso ocorra de maneira dinâmica, com o próprio PHP você gera essa data. Um exemplo de como ela ficará:

<meta http-equiv="Expires" content="Tue, 20 Apr 2010 17:15:25 GMT" />

Um exemplo de como fazer com o PHP:

<?php


	/* Controle do cache */
	$expire = gmdate("D, d M Y H:i:s", time() + (60 * 60 * 24 * 3)) . " GMT";

	header("Cache-Control: must-revalidate");
	header("Expires: " . $expire);


	/* Charset */
	header("Content-Type: text/html; charset=UTF-8");


	echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";

?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<meta http-equiv="Expires" content="<?php echo $expire; ?>" />

Esse trecho acima você pode colocar em todas as suas páginas.

Bom, somente com essas alterações que citei já vai mudar alguma coisa. Há outros avisos que são consequência de outros problemas, então, quando se corrige os primeiros, esses acabam sendo resolvidos automaticamente.

Além disso, não utilize tabelas. Um dos itens que apontam isso está na lista do validador: A Table element exists. Se você quer validar suas páginas, terá que alterar. E ponto final. http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif

Outra coisa que observei que utiliza e que também é apontado no validador: uso de script (JavaScript). Dispositivos móveis não são como Desktops ou qualquer outro dispositivo maior... Pense no seguinte, enquanto navegamos em casa, recursos de interatividade como arrastar e soltar, criar campos dinamicamente em formulários, entre outros, tudo isso é muito bacana quando temos um mouse, uma tela maior. Agora, em um celular, por exemplo, a situação é completamente diferente. Não tem jeito, tudo é muito mais limitado. E o uso de scripts para tornar a página mais interativa pode dar certo apenas em resoluções de tela maiores, mas não em celulares. Reveja o uso de scripts.

Enfim, ali há muitos outros erros, mas não poderei tratar todos, por questões de tempo... Agora é com você. Se quiser utilizar um modelo de página validada para mobile, acesse este site:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://wap.donavilma.com.br

Quando valido as páginas, ainda aparecem alguns alertas, mas não erros. Algumas coisas apontadas pelo validador realmente nem sei como resolver, mas isso não implica em nada.

Bom, é isso. Espero que isso que postei acima possa te orientar e lhe auxiliar no processo de desenvolvimento de páginas de acordo com os padrões para dispositivos móveis.

Abraço!

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Martinsrj · Abril 17, 2010

Valeu Paulo, realmente trouxe uma luz sobre a criação de site para mobile. Realmente eu não tenho nenhuma noção na parte de desenvolvimento para mobile. Irei agora realizar o teste e posto de como ficou.

Abraço.

Entrar

Arquivado

Validação Mobile - Meu código com vários erros

Recommended Posts

Martinsrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Martinsrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Paulo de Tarso F. M. 24

Compartilhar este post

Link para o post

Compartilhar em outros sites

Martinsrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Paulo de Tarso F. M. 24

Compartilhar este post

Link para o post

Compartilhar em outros sites

Martinsrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante