Efecto 3D en imágenes con CSS
Román Cortés nos muestra un efecto 3D creado únicamente con CSS & HTML puro, o sea , nada de javascript ni flash.
Para la realización ha usado tres imágenes: dos se corresponden al fondo (paredes) y otra de sprites (3 sprites: uno con el lienzo, niño y perro, otro con las meninas, y el último con la monja y acompañante). El posicionamiento de los sprites se realiza mediante hover en un total de 80 anchors. El lateral derecho de la habitación se ensancha y contrae para mejorar el efecto 3D.
Link:
No hay palabras, aplausos para Román..!!
saludos
promero
Formularios HTML dividirlo por pasos, jQuery
Revisando un poco la red, buscaba algo que me dividiera un formulario HTML en etapas o paso con el menor esfuerzo posible.
En la web de anieto2k he encontrado la solución a las cual le aplique un par de cambios para hacer validaciones y ha quedado muy buena. Está se utiliza con jQuery.
Simplemente es una función que se encarga de convertir todos los formularios cuyo atributo class sea “dividirPasos”. Únicamente se encarga de cortar el formulario por elementos <fieldset /> e implementar validaciones para cada uno de los pasos.
La función "stepForm" agrega los botones “Volver” y “Seguir“, asociando al evento Onclick un función pasando como parámetro el paso actual.
Función que aplica los pasos y las validaciones:
<script type="text/javascript">
jQuery.extend({
stepForm: function(txtBack, txtNext, token){
var fieldsets = $((token || 'fieldset'), $("form.dividirPasos"));
var total = $(fieldsets).length;
$(fieldsets).each(function(x,el){
if (x > 0) {
$(el).hide();
$(el).append('<a onClick="validarEtapaVolver('+(x)+')" href="#">'+ (txtBack || 'Volver') +'</a>');
}
if ((x+1)< total) {
$(el).append('<a onClick="validarEtapaSiguiente('+(x)+')" href="#">'+ (txtNext || 'Seguir')+'</a>');
}
$(el).attr("id", "x_" + x);
});
}
});
function validarEtapaVolver(x){
var volver = false;
if(x == 0){
alert("VOLVER: Validar la etapa 0");
volver = true;
}
if(x == 1){
alert("VOLVER: Validar la etapa 1");
volver = true;
}
if(x == 2){
alert("VOLVER: Validar la etapa 2");
volver = true;
}
//SI TODO ES CORRECTO vuelvo una etapa
if(volver){
$("#x_" + (x-1)).show();
$("#x_" + (x)).hide();
}
}
function validarEtapaSiguiente(x){
var sigue = false;
if(x == 0){
alert("SIGUIENTE: Validar la etapa 0");
sigue = true;
}
if(x == 1){
alert("SIGUIENTE: Validar la etapa 1");
sigue= true;
}
if(x == 2){
alert("SIGUIENTE: Validar la etapa 2");
sigue = true;
}
//SI TODO ES CORRECTO voy a la siguiente etapa
if(sigue){
$("#x_" + (x+1)).show();
$("#x_" + (x)).hide();
}
}
//inicializador
$(document).ready(function() {
$.stepForm();
});
</script>
Formulario HTML con los <fieldset /> :
<form name="form" action="" method="post" class="dividirPasos">
<fieldset><!--paso 1-->
<legend>Datos de Usuario</legend>
<table>
<tr>
<td><label for="name">Nombre:</label></td>
<td><input name="nombre" id="name" value="" /></td>
</tr>
<tr>
<td><label for="surname">Apellidos:</label></td>
<td><input name="apellidos" id="surname" value="" /></td>
</tr>
<tr>
<td><label for="birthday">Fecha de Nacimiento:</label></td>
<td><input name="apellidos" id="surname" value="" /></td>
</tr>
<tr>
<td><label for="email">E-mail:</label></td>
<td><input name="email" id="email" value="" /></td>
</tr>
</table>
</fieldset>
<fieldset><!--paso 2-->
<legend>Otros Datos de Usuario</legend>
<table>
<tr>
<td><label for="text1">Que te gusta?:</label> </td>
<td>
<select   id="text1">
<option>gato</option>
<option>perro</option>
<option>chocolate</option>
<option>frutilla</option>
</select>
</td>
</tr>
<tr>
<td> <label for="text2">Tenes Hermanos: </label> </td>
<td> Si?<input type="checkbox" id="text2" /> </td>
</tr>
</table>
</fieldset>
<fieldset><!--paso 3-->
<legend>Último Paso </legend>
<label for="submit">Si estás seguro que completaste los datos de forma correcta, presiona el botón Enviar<br /></label>
<input   type="submit" id="submit" value="Enviar" /><br />
</fieldset>
</form>
Enlaces de interés:
Saludos
promero
Patrón de Diseño “Singleton” implementación PHP
El Patrón “Singleton” sirve para restringir la creación de instancias de un objeto, obligando que sólo se pueda crear una única instancia
Análisis del Patrón
- El constructor de la clase debe ser privado (private). No puede ser público (public), y tampoco podrÃa ser protegida (protected) porque sus hijos(subclases),en caso de herencia, podrÃan crear múltiples instancias.
- Para almacenar nuestra instancia debemos crear una propiedad estática privada.No puede ser protegida, ni pública.
- Hacemos un método de clase (método estático) para crear el punto global de acceso a nuestra única instancia. Este método debe retornar la instancia única.
Implementación:
<?php
class Singleton {
private static $instancia;
private $cont;
private function __construct() {
echo "Se ha creado una Instancia para la clase: " . __CLASS__ . "<br />";
$this->cont = 0;
}
public static function getInstance() {
if (! self::$instancia instanceof self) {
self::$instancia = new self ( );
} else {
echo "Existe una Instancia creada para " . __CLASS__ . "<br />";
}
return self::$instancia;
}
public function incrementar() {
return ++ $this->cont;
}
public function disminuir() {
return -- $this->cont;
}
public function getCont() {
return $this->cont;
}
}
?>
Prueba del Patrón:
<?php include 'Singleton.php'; //Creamos una Instancia, en caso que NO exista se crea. $instancia = Singleton::getInstance (); echo "Objeto: instancia (método incrementar): " . $instancia->incrementar () . "<br />"; echo "Objeto: instancia (método incrementar): " . $instancia->incrementar () . "<br />"; echo "Objeto: instancia (método incrementar): " . $instancia->incrementar () . "<br /><br />"; //Creamos una Instancia, en caso que exista retorna la referencia del objeto creado. $otraInstancia = Singleton::getInstance (); echo "Objeto: otraInstancia (método disminuir): " . $otraInstancia->disminuir () . "<br />"; echo "Objeto: otraInstancia (método incrementar): " . $otraInstancia->incrementar () . "<br /><br />"; //pedimos el valor del contador por medio de ambas instancias. echo "Objeto: instancia (método getCont): " . $instancia->getCont () . "<br />"; echo "Objeto: otraInstancia (método getCont): " . $otraInstancia->getCont () . "<br />"; ?>
Salida en el navegador:
Se ha creado una Instancia para la clase: Singleton Objeto: instancia (método incrementar): 1 Objeto: instancia (método incrementar): 2 Objeto: instancia (método incrementar): 3 Existe una Instancia creada para Singleton Objeto: otraInstancia (método disminuir): 2 Objeto: otraInstancia (método incrementar): 3 Objeto: instancia (método getCont): 3 Objeto: otraInstancia (método getCont): 3
Link de interés:
saludos
promero
