Retomando el tutorial para cambiar el CSS dinámicamente, en el anterior capítulo vimos como cambiar el CSS por medio de JavaScript, ahora hablaremos de cómo cambiar el css dinámicamente utilizando PHP.
Por su parte PHP, al ser un lenguaje del lado servidor nos abre una gama más extensa de posibilidades a realizar, en el caso del ejemplo que acabamos de realizar con JavaScript, se puede adaptar y agregar la funcionalidad de guardar en una variable de sesión o en su defecto en una cookie, el fondo que eligió el usuario para así cada vez que este ingrese, el fondo sea justo el escogido.
El manejo de información obtenida mediante formularios se vuelve más sencillo con PHP, al contar con los métodos GET y POST podemos crear un formulario sencillo para que el cliente elija las características que más le agraden para el sitio.
Podemos crear un formulario en PHP que de la opción de elegir un color de fondo de una lista desplegable, o incluso podemos dar la opción para que el usuario ingrese el nombre del color de fondo que quiera, todo esto de la siguiente manera:
<html>
<head>
<title>Elegir color de fondo con PHP</title>
<?php
$fondo = $_GET['colorlista'];
$nombre = $_GET['nombrecolor'];
?>
<style>
body {
<?php
if (empty($nombre)) {
if (!empty($fondo)) { ?>
background: <?php echo $fondo ?>;
<?php
} else { ?>
background: LimeGreen ;
<?php } ?>
<?php
} else {
?>
background: <?php echo $nombre?>;
<?php
}
?>
}
</style>
</head>
<body>
<form action="#" method="GET">
<span>Selecciona un color de la lista: </span>
<select id=”colorlista” name="colorlista">
<option value="LimeGreen" <?php if($_GET['color']=="LimeGreen") echo "selected="selected""; ?> >Lima</option>
<option value="YellowGreen" <?php if($_GET['color']=="YellowGreen") echo "selected="selected""; ?> >Amarillo verdoso</option>
<option value="Crimson" <?php if($_GET['color']=="Crimson") echo "selected="selected""; ?> >Carmesí</option>
<option value="SteelBlue" <?php if($_GET['color']=="SteelBlue") echo "selected="selected""; ?> >Azul Acero</option>
</select>
<span>ó Escribe el nombre en inglés de un color:</span>
<input type="text" name="nombrecolor" /><br/>
<input name="cambiarfondo" type="submit" value="Cambiar el fondo!" />
</form>
</body>
</html>
Creamos un formulario con dos campos, un select box y un input text, donde utilizamos el método GET para obtener la información una vez enviada a través del botón “cambiarfondo”, una vez recibida creamos las condiciones para cambiar el fondo del sitio mediante CSS, imprimiendo el valor recibido dentro del atributo “background” del elemento “body”.
Al crear un código como el siguiente, podemos agregar una gran interactividad con el usuario, y podemos ampliar el dinamismo si aplicamos herramientas de AJAX para obtener una respuesta inmediata del servidor y no tener que esperar a que el visitante de click en el botón.
Esta misma metodología podemos aplicarla para realizar cambios dinámicos a todos los fondos de los diferentes elementos de nuestra página, podemos modificar los bordes, sombras e incluso animaciones gracias a las nuevas propiedades de CSS3.
Las posibilidades son muchas, es cuestión de invertir un poco de tiempo y aplicar nuestro ingenio para poder hacer maravillas. En el siguiente artículo de esta entrega veremos como podemos adaptar y jugar con el ambiente de nuestro sitio, basándonos en la hora en que nos visitan.
modificado el 17 junio, 2018 11:32
Ver comentarios (1)
Hola!!! =) me ayudarian con un tutorial o articulo para lograr lo siguiente
agregar la funcionalidad de guardar en una variable de sesión o en su defecto en una cookie, el fondo que eligió el usuario para así cada vez que este ingrese, el fondo sea justo el escogido.