10 Oct 2013

Alinear el texto con imágenes en CSS: arriba, en el medio o abajo

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:

Cubo AzulAlineamos arriba

Cubo AzulAlineamos en el centro

Cubo AzulAlineamos abajo

 

Éste es el código CSS usado:

Selec All Code:
1
2
3
4
5
6
7
8
9
10
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 quisieramos alinear el texto en la parte superior podríamos usar el siguiente código HTML:

Selec All Code:
1
<img class="alineadoTextoImagenArriba" src="http://ruvic.es/wp-content/uploads/cuboAzul.jpg"/>Mi texto alineado arriba
Comparte
09 Oct 2011

Cabecera aleatoria en WordPress

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:

Selec All Code:
1
2
3
4
5
6
7
8
9
10
11
$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.:

Selec All Code:
1
2
3
4
<div style="background-image:url(rutaDelDirectorio/<?php echo $imgDir[$ImgAzar];?>);"> <!--Imagen aleatoria-->
  <h1 class="titulo_cabecera"> <?php bloginfo('name'); ?> </h1>  <!--Título de la página (esto solo en Wordpress)-->
  <small class="contador"><?php $ImgAzar++; echo "$ImgAzar/$cuantasImg";?></small> <!--Número de la imagen seleccionada-->
</div>

Esperamos que la información os sea útil, para cualquier duda podéis preguntar en los comentarios.

Comparte
13 Ago 2011

Instalar phpScheduleIt

Como ya os contamos en el post anterior, phpScheduleIt es una aplicación Web libre para la gestión de reservas de usuarios, en este post os vamos a explicar todo lo necesario para instalarlo.

1. Requisitos

  • PHP 4.3.0 o superior
  • Base de Datos soportada por PEAR (MySQL es lo más recomendable)

2. Descargar la aplicación

Para instalar la aplicación, lo que primero que tenemos que hacer es descargar el programa. Vamos a www.php.brickhost.com y lo descargamos, al ser una aplicación Web no hay versiones para cada sistema operativo. Una vez descargado el programa, creamos una carpeta llamada phpscheduleit y descomprimimos la aplicación dentro de esa carpeta. Después, copiamos la carpeta phpScheduleIt en la carpeta donde tengamos nuestro servidor:

  • Si estamos en Linux: normalmente /var/www/html/
  • Si estamos en Windows y usamos XAMPP: normalmente c:\xampp
  • Si estamos usando un Hosting: lo subimos a la raíz del hosting Leer más
Comparte
04 Ago 2011

phpScheduleIt. Sistema de reserva de recursos

Captura de pantalla de phpScheduleItDespués de algunos meses de trabajo, ya tenemos en fase de pruebas Beta un nuevo proyecto en la Facultad de Ciencias de la Universidad de Granada. Consiste en un sistema de Reserva de Aulas, donde los usuarios (profesorado, PAS …) pueden hacer peticiones de reserva de un espacio de la Facultad y los Administradores las validan, editan o revocan. Para conseguir todo esto estamos adaptando la aplicación web de Software Libre: phpScheduleIt.
En este primer artículo os vamos a explicar qué es phpScheduleIt y para qué se usa. En siguientes artículos os enseñaremos como instalar esta aplicación Web en diferentes entornos y sistemas operativos. Más adelante, escribiremos una serie de artículos donde nos adentremos en el uso, gestión y programación de la herramienta.

¿Qué es phpScheduleIt?

phpScheduleIt es una aplicación Web construida en  PHP y HTML con algunas partes concretas en JavaScript. Pero lo que es más importante … ¡¡es Software Libre!!, lo que nos permite poder programar nuevas utilidades sin ningún problema. Además está realmente bien construida, siguiendo una orientación a objetos muy formal, de manera que podemos adaptar la aplicación a nuestras necesidades si tenemos ganas de programar. De todos modos, la aplicación permite cambiar muchas opciones desde su menú, sin que tengamos que escribir ni una linea de código. Leer más

Comparte

© 2010 Ruvic Soluciones Informáticas

Subir