Muchas veces necesitamos modificar partes del core de Joomla, pero si modificamos directamente los archivos nos encontramos con el problema de que al actualizar a una nueva versión de Joomla perderemos los cambios. Pero hay una solución para esto, podemos modificar los archivos desde el template que estamos usando
Si queremos alinear texto al lado de una imagen con HTML y CSS muchas veces nos encontramos con el problema de que no queda alineado del modo que nos interesa, ya que por defecto se alinea abajo. La solución pasa por usar la regla de CSS «vertical-align«, que nos va a permitir que el texto se empiece a escribir en la parte de arriba de la imagen, desde el centro o en la parte inferior.
Por ejemplo:
Alineamos arriba
Alineamos en el centro
Alineamos abajo
Éste es el código CSS usado:
img.alineadoTextoImagenArriba{
vertical-align: text-top;
}
img.alineadoTextoImagenCentro{
vertical-align: middle;
/* Ojo vertical-align: text-middle no existe*/
}
img.alineadoTextoImagenAbajo{
vertical-align: text-bottom;
}
Si por ejemplo quisiéramos alinear el texto en la parte superior podríamos usar el siguiente código HTML:
<img class="alineadoTextoImagenArriba" src="https://ruvic.es/wp-content/uploads/cuboAzul.jpg"/>Mi texto alineado arriba
En uno de nuestros proyectos, la página Web www.movimientosdegenero.com, pensamos junto con la administradora del Blog la idea de una cabecera que cambiase aleatoriamente con cada cambio de página y que además fuese un proyecto participativo (base del 2.0). Lo que hicimos es que los visitantes pudieran enviar su foto y que ésta apareciese tanto en la cabecera de la Web como en una galería. Esta estrategia está acorde con el concepto de Neuromarketing que explicamos en una entrada anterior.
En lo que concierne a la parte técnica, la idea es cargar una imagen diferente cada vez que se llama al archivo PHP que carga el «header». Aunque la página donde lo hemos programado es un WordPress, se puede aplicar en cualquier proyecto Web con PHP. En nuestro caso pusimos el siguiente código en el archivo «header.php» del theme de WordPress:
$carpetaImagenes="rutaDelDirectorio"; //Guardamos todas las posibles cabeceras en el mismo directorio
$directorioImagenes=opendir($carpetaImagenes); //Abrimos el directorio
$cont=0; //Contador del número de imágenes
while ($imagen = readdir($directorioImagenes)) { //Recorremos todas las imagenes del directorio
if($imagen != '.' and $imagen!='..'){ //No tenemos en cuenta el directorio actual (.) y el directorio superior (.)
$imgDir[$cont]=$imagen; //Añadimos la imagen al array
$cont++; //Contamos una más
}
}
sort($imgDir); //Ordenamos el array (en nuestro caso lo necesitamos -> se puede borrar)
$ImgAzar=rand(0, $cont-1); //Elegimos un número aleatorio entre 0 y el número de imágenes (menos uno, que empezamos por cero)
Con el código anterior ya tenemos un array con todas las imágenes del directorio elegido y un número entero aleatorio.
Aunque cada uno lo podéis usar como creáis, en nuestro caso, hemos utilizado el siguiente código HTML para imprimir nuestra cabecera.:
<div style="background-image:url(rutaDelDirectorio/<?php echo $imgDir[$ImgAzar];?>);">
<h1 class="titulo_cabecera"> <?php bloginfo('name'); ?> </h1>
<small class="contador"><?php $ImgAzar++; echo "$ImgAzar/$cuantasImg";?></small>
</div>
Esperamos que la información os sea útil, para cualquier duda podéis preguntar en los comentarios.
En un mundo tan competitivo como el marketing en Internet, los pequeños detalles marcan la diferencia. En Ruvic, cuando nos enfrentamos al desarrollo de una nueva página Web, mantenemos un compromiso desde diferentes puntos de vista. Un diseño «bonito» sin más, no va a aumentar las ventas, necesitamos un trabajo mucho más profundo que la simple apariencia. Además del diseño, trabajamos: el SEO (resultados en buscadores como Google), el cumplimiento de los estándares, la usabilidad, los tiempos de carga, la seguridad, contenido de calidad … y lo que vamos a contar hoy: el factor psicológico.
Cuando visitamos una página Web, hay una serie de pequeños detalles que escapan a nuestra consciencia, que nos guían a actuar de una manera o de otra. ¿Por qué hay páginas que visitamos diariamente si sabemos que hay otras que son mejores? ¿Cómo consigue una página web destacar ante la competencia?
El neuromarketing es la linea de investigación que da respuesta a estas cuestiones. Consiste en una serie de tendencias basadas en el estudio del efecto de la publicidad en el cerebro, que analiza los factores que, sin darnos cuenta, quedan incorporados en nuestro subconsciente y orientan nuestras elecciones.
Aunque, en una tienda online es donde se pueden aplicar un mayor número de recomendaciones, en cualquier proyecto Web podemos seguir muchas de las directrices del siguiente decálogo: Leer más
© 2010 Ruvic Soluciones Informáticas