Introducción
Los webmasters buscan constantemente formas de optimizar la forma en que se presenta el contenido en sus sitios. Con la llegada de términos como "above the fold", es muy importante proporcionar interfaces de usuario llamativas y funcionales.
En este tutorial, vamos a crear un control deslizante de contenido elegante para una tienda de informática, con la ayuda de jQuery y el complemento MopSlider. El control deslizante se generará con PHP y estamos utilizando un archivo txt sin formato como fuente de datos para las configuraciones del portátil. También estamos usando iconos de portátiles de tonev.deviantart.com.
Paso 1 - Fuente de datos
Al diseñar una nueva función, tiene muchas opciones sobre cómo almacenar los datos necesarios. A los efectos de este tutorial, estamos colocando todas las configuraciones de la computadora portátil en un solo archivo txt sin formato. Esta estrategia es perfecta para aplicaciones web simples de solo lectura, que funcionan con menos de 100 elementos.
Las ventajas sobre un almacenamiento de datos MySQL regular es que solo necesita un editor de texto para modificar los datos y agregar nuevos modelos, sin mencionar el mayor nivel de simplicidad en la implementación.
A continuación se muestra una estructura de muestra del archivo de texto.
db/slider.db.txt
Product Model | Product Description | Price | Path To Image | URL Second Product | Description | Price | Path To Image | URL Third Product | Description | Price | Path To Image | URL
Cada elemento ocupa su propia fila. El número de filas es el número de elementos en el control deslizante de contenido.
Hay varias columnas de datos, divididas por “|” . Estos son los modelos , descripción , precio , imagen del producto y una URL para más información. Puede modificar esta estructura agregando o eliminando columnas, pero recuerde aplicar los cambios al bucle demo.php , que veremos en un momento.
Este archivo se encuentra en la db carpeta. Para evitar que nuestra base de datos textual se escriba y se abra en un navegador web, tendremos que agregar un .htaccess especial. expediente. Esto lo ejecuta el servidor web Apache y las reglas que contiene se aplican al directorio actual.
db/.htaccess
# This will prevent opening the db dir in a browser deny from all # Will return a 403 error
Esta línea evita que el directorio y todos sus archivos se abran en un navegador web.
Ahora echemos un vistazo al XHTML.
Paso 2 - XHTML
El marcado de la página es bastante sencillo.
<div id="main"> <!-- The main container -->
<div class="titles"> <!-- Placeholder for the headings -->
<h1>Notebooks</h1>
<h2>Fresh on the market</h2>
</div>
<div class="container"> <!-- Styled and rounded -->
<div id="slider"> <!-- Contains the generated products -->
<?=$products?> <!-- PHP var that holds the products -->
</div>
<div class="clear"></div>
<!-- Clearing the floats, the old-fashioned way -->
</div>
</div> Es bastante autoexplicativo. Ahora pasemos a nuestro CSS.
Paso 3 - CSS
Es CSS lo que hizo posible escribir un XHTML tan limpio y simple como el anterior.
demostración.css
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
/* resetting some of the page elements */
margin:0px;
padding:0px;
}
body{
/* styling the body */
color:white;
font-size:13px;
background: url(img/bg.png);
font-family:Arial, Helvetica, sans-serif;
}
h1{
color:white;
font-size:28px;
font-weight:bold;
font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
}
h2{
font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
font-size:10px;
font-weight:normal;
letter-spacing:1px;
padding-left:2px;
text-transform:uppercase;
white-space:nowrap;
}
.clear{
/* Clear the floats */
clear:both;
}
#main{
/* The main container */
width:800px;
margin:0 auto;
}
.container,.titles{
/* These classes share some common rules */
color:white;
margin-top:30px;
width:100%;
/* Hiding everything that overflows off the sides */
overflow:hidden;
background:url(img/bg_dark.png) #28313b;
padding:20px 10px 10px;
/* CSS rounded corners */
-moz-border-radius:12px;
-khtml-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius:12px;
}
.titles{
width:140px;
padding:10px 15px;
height:55px;
}
.product{
/* The products class */
width:370px;
height:150px;
background:url(img/product_bg.png) repeat-x;
padding-top:10px;
-moz-border-radius:12px;
-khtml-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius:12px;
}
.product .pic{
/* The product image */
float:left;
width:128px;
height:128px;
padding:0 10px 5px;
margin-top:-15px;
}
.product .link,.product .price{
/* Common rules */
font-size:10px;
text-transform:uppercase;
padding:4px 0;
}
.product .price{
/* Custom rule */
color:#CCCCCC;
}
.product .title{
font-size:16px;
font-weight:bold;
}
a, a:visited {
/* Styling the hyperlink */
color:#00BBFF;
text-decoration:none;
outline:none;
}
a:hover{
/* The hover state */
text-decoration:underline;
} Procedamos con el siguiente paso.
Paso 4 - jQuery
Veamos qué hay en el script.js archivo.
secuencia de comandos.js
$(document).ready(function(){
/* After the page has finished loading */
$("#slider").mopSlider({
'w':800,
'h':150,
'sldW':500,
'btnW':200,
'itemMgn':20,
'indi':"Slide To View More",
'type':'tutorialzine', /* A custom theme */
'shuffle':0
});
}); Puedes verlo en línea 11 proporcionamos “tutorialzine como tema. ¿Lo que da? El complemento viene cargado con dos temas:papel y negro . Desafortunadamente, ninguno de ellos parece adecuado para el diseño de página actual. Es por eso que modifiqué un poco el complemento para habilitar este tema personalizado.
A diferencia de los incorporados, este oculta todos los gráficos, esquinas redondeadas y fondos para dejar solo la barra deslizante y el contenido. Esto nos permite personalizarlo de la manera que nos gusta e integrarlo en cualquier diseño de página, pero deberá recordar aplicarle el estilo adecuado.
En este caso, hemos diseñado el contenedor div que sostiene el control deslizante y funciona bien.
Pasemos al código PHP.
Paso 5 - PHP
PHP maneja la importante tarea de leer el slider.db.txt y rellenando el control deslizante div con productos. Esto sucede al principio de demo.php .
demo.php
$slides = file('db/slider.db.txt');
/* Read the file with file() - returns an array where */
/* every file row becomes a new array element */
$products='';
foreach($slides as $v)
{
$data = preg_split('/\s*\|\s*/',$v);
/* Split the file row by the vertical lines */
/* Using preg_split to remove unnecessary spaces and tabulations */
$products.='
<div class="product">
<div class="pic"><img src="'.$data[3].'" width="128" height="128" alt="'.htmlspecialchars($data[0]).'" /></div>
<div class="title">'.$data[0].'</div>
<div class="price">$'.$data[2].'</div>
<div class="description">'.$data[1].'</div>
<div class="link"><a href="'.$data[4].'" target="blank">Find out more</a></div>
<div class="clear"></div>
</div>';
/* $data becomes an array with the product's properties */
} Si tuviera que modificar slider.db.txt, tendría que cambiar el ciclo anterior para poder mostrar los datos donde sea necesario.
¡Con esto, nuestro control deslizante de contenido está completo!
Conclusión
Hoy creamos un control deslizante de contenido, que lo ayudará a optimizar el espacio real de su sitio web y será atractivo para sus visitantes.
Eres libre de modificar el código como mejor te parezca e integrarlo en tu sitio.