Desarrollo WEB.


Las practicas de programación orientadas a la web son muy cambiantes en el tiempo. Es necesario conocer e implementar tecnologías, conocer lenguajes,integrar comunidades,usar Ides, etc, recientes, para responder al mercado que se acerca.

miércoles, 20 de enero de 2010

Div con Esquinas redondeadas hechas con puro CSS

CSS es uno de los lenguajes mas usados en el desarrollo de paginas web dinamicas con estilos visuales atractivas, las Cascading Style Sheets (CSS) son archivos que contienen clases visuales para aplicar a componentes html.

Ejemplo

<style>
.texto{
  text-aling:center; /*texto centrado*/
  font-size:15px;/*tamaño del texto*/
  color:#000000;
  border-bottom:1px solid gray; 
  /*Borde inferior de grosor 1px solido y de color gris*/
}
</style> 
Ahora para aplicar este estilo a un elemento simplemente lo aplicamos en el atributo class del elemento. La mayor ventaja de usar CSS es que se puede reutilizar la clase en varios elementos html.

Ejemplo:

<div class="texto">
Este es un texto de prueba con un estilo visual aplicado.
</div>

Despues de esta breve introduccion ahora si vamos a ver tres ejemplos de Cajas (div) con bordes redondeados hechos solo con css y algunas imagenes en el caso del 3 ejemplo.

Publicado por a las: No hay comentarios:
Etiquetas: , , ,

martes, 19 de enero de 2010

Validacion de Formularios usando la Libreria Prototype

Este sencillo ejemplo de validacion de formularios con la libreria ajax llamada PROTOTYPE nos permite realizar una validacion de los campos de un formulario, en ocasiones es bueno y seguro para la aplicacion ya que se puede desde la capa de presentacion decirle al usuario cual es el dato requerido para cada campo en el formulario y asi evitar que los datos que lleguen a nuestra capa de controladores tengan que ser validados de nuevo.
<html>
<head>
<script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous/src/effects.js" type="text/javascript"></script>
<script type="text/javascript" src="fabtabulous.js"></script>
<script type="text/javascript" src="validation.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<h1>Formulario de Registro de Nuevo Usuario </h1>
<div id="mainmenu">
<div id="tab2"><ul id="taabs">
<a href="#standard">Nuevo Usuario </a>
<a href="#using-titles">Nueva Afiliacion </a>
<a href="#no-element-ids">Mas Informacion</a>
</ul><div>
<div class="bar">&nbsp;</div>
<div class="panel" id="standard">
<form id="test" action="registro.jsp" method="post">
<table width="405" border="0" align="center">
<tr>
<td width="399"><ul id="tabs1">

<a href="#standard1">Tu Cuenta</a>      

<a href="#using-titles1">Profesional</a>      

<a href="#no-element-ids1">Mas Informacion</a>      
</ul><div>
<div class="bar">&nbsp;</div>
<div class="panel" id="standard1">

<fieldset>
<legend>Datos para la Cuenta Nueva </legend>
<div class="form-row">
<div class="field-label">
<label for="nombre">Nombre Completo </label>
:</div>
<div class="field-widget"><input name="nombre" class="required" id="nombre" title="Ingrese su Nombre Completo" size="30" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="field1">Apellidos</label>
:</div>
<div class="field-widget"><input name="apellidos" class="required" id="apellidos" title="Enter your name" size="40" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="documento">Documento de Identidad </label>
:</div>
<div class="field-widget"><input name="cedula" class="validate-number" id="cedula" title="Ingrese su Nombre Completo" size="20" />
No de Cedula</div>
</div><div class="form-row">
<div class="field-label">
<label for="field1">Nombre de Usuario</label>
:</div>
<div class="field-widget"><input name="user" class="required" id="user" title="Enter your name" size="30" />
</div>
</div>
<div class="form-row">
<div class="field-label"><label for="pass">Password</label>:</div>
<div class="field-widget"><input type="password" name="pass" id="pass" class="required validate-password" title="Ingrese un password con mas de 6 caracteres" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="password">Confirmar Password</label>:</div>
<div class="field-widget"><input type="password" name="password" id="password" class="required validate-password-confirm" title="Ingrese el password de confirmacion" />
</div>
</div>
<p><a href="#" onClick="$('email-signup').toggle(); return false">Ingrese Su Correo Electronico!</a></p>
<div id="email-signup" class="form-row" style="display:none;">
<div class="field-label"><label for="email">Email</label>:</div>
<div class="field-widget"><input name="email" id="email" class="required validate-email" title="Opcional: Ingrese su Correo Electronico" size="50"/></div>
</div>
</fieldset>
</div>
<div class="panel" id="using-titles1">
<fieldset>
<legend>Informacion Profesional del Usuario </legend>
<div class="form-row">
<div class="field-label">
<label for="field1-t2">Empresa</label>:</div>
<div class="field-widget"><input name="empresa" class="required" id="empresa" title="Enter your name. This is a required field" size="50" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="field3-t2">Profesion</label>:</div>
<div class="field-widget"><input name="profesion" class="required" id="profesion"  title="Enter your employee number, please use only alphanumeric characters" size="40" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="field4-t2">Cargo Actual  </label>
:</div>
<div class="field-widget"><input name="cargoactual" class="required" id="cargoactual"  title="Optional: Enter your age, please use only numbers" size="40" /> 
(opcional)</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="field5-t2">Tiempo de Labores Profesionales  </label>
:</div>
<div class="field-widget"><input name="tlabores" class="validate-number" id="tlabores"  title="Optional: Enter a dollar amount for donation" size="10" /> 
(Anos)</div>
</div>
</fieldset>
<div align="center"><br>
<input name="evento" type="submit" class="boton" id="evento" value="Enviar" /> 
<input name="evento" type="button" class="boton" id="evento" onClick="valid.reset(); return false" value="Limpiar" />
</div>
</div>
<div class="panel" id="no-element-ids1">
<fieldset>
<legend>Registrar Otros Servicios </legend>
<div class="form-row">
<div class="field-label">
<label for="field5-t2">Informacion del Sistema   </label>
:</div>
<div>
<p align="justify" >Por favor ingresa los datos generales y tambien los datos laborales, luego si envia el formulario. Para Solicitar tus datos personales llena el formulario para Forzar el Password. Estos datos seran consultados y validados por el sistema y le seran arrojados los valores de la consulta en el email que se regsitro para la cuenta de usuario.</p>
<p>El Olvido de Password acarrea grandes problemas de inseguridad por favor sea prudente a la hora de almacenar sus password en lugares de recordatorio facil. </p>
</div>
</div>
</fieldset>
</div>
</div> </td>
</tr>
</table>     <script type="text/javascript">
function formCallback(result, form) {
window.status = "valiation callback for form '" + form.id + "': result = " + result;
}

var valid = new Validation('test', {immediate : true, onFormValidate : formCallback});
Validation.addAllThese([

['validate-password-confirm', 'La Confirmacion del Password es Invalida. Por favor intentelo nuevamente', {
equalToField : 'pass'
}]
]);
</script></form>
</p></div>
<div class="panel" id="using-titles">
<form id="afiliacion" action="afiliacion.jsp" method="post">
<table width="405" border="0" align="center">
<tr><td><table width="396" border="0" align="center">
<tr>
<td class="field-label">Fecha de Afiliacion:</td>
</tr>
</table></td></tr>
<tr>
<td width="399"><ul id="tabs2">

<a href="#standard2">Identificacion</a>      

<a href="#using-titles2">Domicilio</a>      

<a href="#inforeferido2">Referido</a>
<a href="#no-element-ids2">Mas Informacion</a>      
</ul><div>
<div class="bar">&nbsp;</div>
<div class="panel" id="standard2">

<fieldset>
<legend>Datos para la Afiliacion </legend>
<div class="form-row">
<div class="field-label">
<label for="nombre">Id de Usuario </label>
:</div>
<div class="field-widget"><input name="id" class="required" id="id" title="Ingrese El Id de Usuario" size="10" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="nombre">Nombre Completo </label>
:</div>
<div class="field-widget"><input name="nombre" class="required" id="nombre" size="30" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="field1">Apellidos</label>
:</div>
<div class="field-widget"><input name="apellidos" class="required" id="apellidos" size="40" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="documento">Sexo </label>
:</div>
<div class="field-widget"><input type="radio" name="sexo" id="sexo" value="M" />
Masculino<br />
<input type="radio" name="sexo" id="sexo" value="F" class="validate-one-required" />
Femenino</div>
</div><div class="form-row">
<div class="field-label">
<label for="documento">Tipo de Documento  </label>
:</div>
<div class="field-widget">
<select name="tipodocumento" class="required" id="tipodocumento">
<option>Seleccione..</option>
<option value="1">Cedula</option>
<option value="2">C. Extranjeria</option>
</select>       
Tipo de Documento </div>
</div><div class="form-row">
<div class="field-label">
<label for="documento">No de Documento </label>
:</div>
<div class="field-widget"><input name="nodocumento" class="required validate-number" id="nodocumento" title="Ingrese el numero del documento" size="20" />
No del Documento </div>
</div><div class="form-row">
<div class="field-label">
<label for="field1">Telefono</label>
Fijo:</div>
<div class="field-widget"><input name="telfijo" class="required validate-number" id="telfijo" title="Ingrese un Telefono Fijo" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="pass">Telefono Celular </label>
:</div>
<div class="field-widget"><input name="telcel" id="telcel" class="required validate-number" title="Ingrese un Numero Celular" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="password">Profesion</label>
:</div>
<div class="field-widget"><input name="profesion" class="required" id="profesion" title="Ingrese su Profesion" size="50" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="password">Web</label>
:</div>
<div class="field-widget"><input name="web" class="required validate-url" id="web" title="Ingrese el password de confirmacion" size="40" />
</div>
</div>
<p><a href="#" onClick="$('email-signup').toggle(); return false">Ingrese Su Correo Electronico!</a></p>
<div id="email-signup" class="form-row" style="display:none;">
<div class="field-label"><label for="email">Email</label>:</div>
<div class="field-widget"><input name="email" id="email" class="required validate-email" title="Opcional: Ingrese su Correo Electronico" size="50"/></div>
</div>
</fieldset>
</div>
<div class="panel" id="using-titles2">
<fieldset>
<legend>Informacion de Domicilio a Efecto de Notificaciones </legend>
<div class="form-row">
<div class="field-label">
<label for="field1-t2">Ciudad</label>
:</div>
<div class="field-widget"><input name="ciudad" class="required" id="ciudad" title="Enter your name. This is a required field" size="40" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="field3-t2">Barrio</label>
:</div>
<div class="field-widget"><input name="barrio" class="required" id="barrio"  title="Ingrese el Nombre del Barrio de Residencia" size="40" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="field4-t2">Telefono  </label>
:</div>
<div class="field-widget"><input name="telefono" class="required validate-number" id="telefono"  title="Ingrese un Numero de Telefono de Domicilio" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="field4-t2">Entidad  </label>
:</div>
<div class="field-widget"><input name="entidad" class="required" id="entidad"  title="Ingrese el nombre de la Entidad" size="40" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="field4-t2">Direccion  </label>
:</div>
<div class="field-widget"><input name="direccion" class="required" id="direccion"  title="Ingrese una Direccion Valida de Ubicacion" size="40" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="field5-t2">Oficina  </label>
:</div>
<div class="field-widget"><input name="oficina" class="required" id="oficina"  title="Ingrese un identificador de Oficina" size="30" />
</div>
</div>
</fieldset>

</div>
<div class="panel" id="inforeferido2">
<fieldset>
<legend>Informacion del Referido  </legend>
<div class="form-row">
<div class="field-label">
<label for="field1-t2">No Documento </label>
:</div>
<div class="field-widget"><input name="nodocrefe" class="required validate-number" id="nodocrefe" title="No del Documento de quien lo refirio" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="field1-t2">Nombre </label>
:</div>
<div class="field-widget"><input name="nombrerefe" class="required" id="nombrerefe" title="Ingrese el Nombre de Quien lo Refirio" size="40" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="field1-t2">Apellidos</label>
:</div>
<div class="field-widget"><input name="apellidosrefe" class="required" id="apellidosrefe" title="Ingrese el Apellido de quien lo Refirio" size="50" />
</div>
</div><div align="center"><br>
<input name="evento" type="submit" class="boton" id="evento" value="Enviar" /> 
<input name="evento" type="button" class="boton" id="evento" onClick="valid.reset(); return false" value="Limpiar" />
</div>
</fieldset>
</div><div class="panel" id="no-element-ids2">
<fieldset>
<legend>Informacion para el Afiliado  </legend>
<div class="form-row">
<div class="field-label">
<label for="field5-t2">Informacion del Sistema   </label>
:</div>
<div>
<p align="justify" >Por favor ingresa todos los datos en el formularios de afiliacion. un administrador aprobara la afiliacion y te enviara el codigo unico de usuario al email registrado.</p>
<p>El Olvido de Password acarrea grandes problemas de inseguridad por favor sea prudente a la hora de almacenar sus password en lugares de recordatorio facil. </p>
</div>
</div>
</fieldset>
</div>
</div> </td>
</tr>
</table>     <script type="text/javascript">
function formCallback(result, form) {
window.status = "valiation callback for form '" + form.id + "': result = " + result;
}

var valid = new Validation('afiliacion', {immediate : true, onFormValidate : formCallback});
</script></form>


</p></div>
<div class="panel" id="no-element-ids">
<form id="test3" action="#" method="get">
<fieldset>
<legend>Mensaje</legend>
<div class="form-row">
<div class="field-label">
<label for="field5-t2">Informacion del Sistema   </label>
:</div>
<div>
<p align="justify" class="required">Para Solicitar tus datos personales llena el formulario para Forzar el Password. Estos datos seran consultados y validados por el sistema y le seran arrojados los valores de la consulta en el email que se regitro para la cuetna de usuario.</p>
<p>El Olvido de Password acarrea grandes problemas de inseguridad por favor sea prudente a la hora de almacenar sus password en lugares de recordatorio facil. </p>
</div>
</div>
</fieldset><br>
</form>
</div>
</div></div>
</div></div>

<script type="text/javascript">
new Fabtabs('taabs');
new Fabtabs('tabs1');
new Fabtabs('tabs2');
</script>
</body>
</html>

Ver Ejemplo en Linea.

Publicado por a las: No hay comentarios:
Etiquetas: , , ,

Mostrar y Ocultar elementos HTML en una JSP con JQuery

Ahora y Desde hace mucho, Mediante la libreria jquery podemos realizar efectos especiales en los componentes html (input,select,checkbox,etc) de nuestras jsp, este es un ejemplo basico para ocultar y mostrar un campo de texto al seleccionar una casilla de verificacion.

<html>
<head>
<title>Mostrar Ocultar</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script> 
<script> 
     $(document).ready(function(){
     $("#mayoria_edad").click(function(evento){
        if ($("#mayoria_edad").attr("checked")){
       $("#formulariomayores").css("display", "block");
       }else{
       $("#formulariomayores").css("display", "none");
     }
});
});
</script>
</head>

<body>

<form>
Nombre: <input type="text" name="nombre">
<br>
<input type="checkbox" name="mayor_edad" value="1" id="mayoria_edad"> Soy mayor de Edad
<br>
<div id="formulariomayores" style="display: none;">
Solo mayores de Edad: <input type="text" name="mayores_edad">
</div>
</form>
</body>
</html>
Informacion de Ayuda.
Publicado por a las: No hay comentarios:
Etiquetas: , , , , , ,

viernes, 15 de enero de 2010

Efectos Sobre Etiquetas DIV usando Mootols y su funcion FxTween

Mootools es una libreria ajax que nos permite realizar una gran variedad de efectos especiales sobre componentes html como div, span, a, etc.
En esta ocasion vamos a ver la utilidad de la funcion Fx.Tween y para ello vamos a ver dos pequeños ejemplos. El primero consite en aplicar transparencia en capas a una div, el segundo consiste en cambiar el color de fondo de una div al dar click sobre un enlace.
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Cambiar Fondo DIV</title>
<script src="libreria/mootools-1.js" type="text/javascript"></script>
<script>
function CambiarColorDiv(){
efecto = new Fx.Tween("micapa1");
efecto.start("background-color", "#ffffff");
efecto.start("color", "#ffffff");

efectoColorTexto = new Fx.Tween("micapa2", {
property: 'background-color',
duration: 'long',
fps: 200
});
efectoColorTexto.start("#ff8800"); 
};
</script>
</head><body>
<div id="micapa1" style="padding: 5px; background-color: rgb(120, 166, 0); width: 160px; font-size:11px; color:#FFFFFF;">
cambiando el color de una div usando librerias javascript MOOTOLS y la Super funcion Fx.Tween
</div>
<div id="micapa2" style="padding: 5px; background-color: rgb(120, 166, 0); width: 160px; font-size:11px; color:#FFFFFF;">
cambiando el color de una div usando librerias javascript MOOTOLS y la Super funcion Fx.Tween
</div>

<a onClick="CambiarColorDiv();">Click Aca para Cambiar el Fondo de la Div</a>
</body></html>



Publicado por a las: No hay comentarios:
Etiquetas: , , , , ,
Suscribirse a: Entradas (Atom)