Para más de un proyecto hemos necesitado colocar una imagen de fondo (habitualmente administrable), que ocupase todo el espacio del navegador -sea cual fuere el ratio de ancho y alto del mismo-, por lo que compartimos con todos el código necesario para hacerlo (para el ejemplo hemos utilizado mootools 1.3.
El html:
<div id="fondo_pagina"><img id="imagen_fondo_pagina" title="Imagen ejemplo" src="foto.jpg" alt="Imagen ejemplo" /></div>
Nada que comentar, una capa al primer nivel del body y la imagen dentro, ambos con el id informado para poder hacer referencia desde el javascript.
El CSS:
body,html {padding:0px;margin:0px;}
#fondo_pagina img {position:fixed;top:0px;left:0px;bottom:0px;right:0px;z-index:-1;overflow:hidden;}Posicionamos la imagen con el tipo fixed en la posición inicial arriba a la izquierda ocupando el máximo del navegador. Finalmente vemos el código javascript que será el mayor responsable de todo:
window.addEvent('load', function() {
window.fireEvent('resize');
})
window.addEvent('resize', function() {
var espacio_navegador_vertical = $(document.body).getSize().y;
var espacio_navegador_horizontal = $(document.body).getSize().x
var anchura_imagen = $("imagen_fondo_pagina").getSize().x;
var altura_imagen = $("imagen_fondo_pagina").getSize().y;
// Resize de foto de fondo y/o cambio de aspect ratio
if (espacio_navegador_horizontal > anchura_imagen) {
$("imagen_fondo_pagina").setStyles({'width' : '100%', 'height' : 'auto', 'left':0});
}
if (espacio_navegador_vertical > altura_imagen) {
$("imagen_fondo_pagina").setStyles({'width' : 'auto', 'height' : '100%','top':0});
}
// Refrescamos los tamaños de la imagen
anchura_imagen = $("imagen_fondo_pagina").getSize().x;
altura_imagen = $("imagen_fondo_pagina").getSize().y;
// Centrado de imagen vertical
$("imagen_fondo_pagina").setStyle('top', -((altura_imagen-espacio_navegador_vertical)/2));
// Centrado de imagen horizontal
$("imagen_fondo_pagina").setStyle('left', -((anchura_imagen-espacio_navegador_horizontal)/2));
});Hemos incluido todo el código al controlar el evento de redimensionado de la pàgina, para cambiar el ratio de la imagen de fondo cuando el usuario redimensione el navegador. Para ser llamado al cargar la página, sólo tenemos que disparar el evento de redimensionado para que se se procese todo.
El funcionamiento del algoritmo es sencillo, primero comprobamos si el ancho de la pantalla es mayor que el ancho de la imagen. Si es así, redimensionamos la imagen para que sea tan ancha como la pantalla. Entonces pueden pasar dos cosas: que la imagen sea suficientemente alta para cubrir todo el alto del navegador o que no lo sea. Si no lo es, entonces ajustamos la imagen a la máxima altura del navegador (el ancho nos lo cubrirá seguro).
Después, lo único que nos queda por hacer es centrar la imagen en el navegador para que siempre se vea la parte central de la misma y no la parte superior izquierda.
Os podéis descargar el ejemplo aquí
Con la última actualización de PHP (5.3), se han añadido muchos cambios en las funciones y se han marcado como DEPRECATED algunas de ellas. Una de las funciones modificadas es eregi_replace, que -entre otras cosas- estábamos utilizando en una función que recorría un texto, buscando cadenas con URLs para sustituirlas por el html para hacer clicables dichas URLs.
La función era esta:
/**
* transforma un texto para añadirle los links
* @param string $txt texto a tratar
* @return string $result texto tratado
*/
public function setLinks($txt) {
$text = eregi_replace('(((f|ht){1}tp://)[-a-zA-Z0-9@:%_\+.~#?&//=]+)', '<a rel="external" href="\\1">\\1</a>', $txt);
$text = eregi_replace('([[:space:]()[{}])(www.[-a-zA-Z0-9@:%_\+.~#?&//=]+)', '\\1<a rel="external" href="http://\\2">\\2</a>', $text);
$text = eregi_replace('([_\.0-9a-z-]+@([0-9a-z][0-9a-z-]+\.)+[a-z]{2,3})', '<a rel="external" href="mailto:\\1">\\1</a>', $text);
return $text;
}En la documentación de PHP nos comunican que la versión que sustituye esta es preg_replace, que tiene una sintaxis parecida pero no idéntica. Para hacerla equivalente, tenemos que anidar entre ` (acentos) la expresión regular y usar los modificadores de mayúsculas/minúsculas al final, quedando así:
/**
* transforma un texto para añadirle los links
* @param string $txt texto a tratar
* @return string $result texto tratado
*/
public function setLinks($txt) {
$text = preg_replace('`(((f|ht){1}tp://)[-a-zA-Z0-9@:%_\+.~#?&//=]+)`i', '<a rel="external" href="\\1">\\1</a>', $txt);
$text = preg_replace('`([[:space:]()[{}])(www.[-a-zA-Z0-9@:%_\+.~#?&//=]+)`i', '\\1<a rel="external" href="http://\\2">\\2</a>', $text);
$text = preg_replace('`([_\.0-9a-z-]+@([0-9a-z][0-9a-z-]+\.)+[a-z]{2,3})`i', '<a rel="external" href="mailto:\\1">\\1</a>', $text);
return $text;
}
En ocasiones, nos podemos encontrar que un determinado diseño nos obliga a limitar el número de líneas que puede tener un texto. Esto es imposible de realizar del lado del servidor, con lo que hemos hecho un pequeño javascript que recorta el texto del elemento deseado en las líneas que queramos. El javascript es el siguiente:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| $$(".maxlines").each(function(element) {
var numLines = element.getProperty("rel").substring(element.getProperty("rel").indexOf('[')+1,element.getProperty("rel").indexOf(']'));
var htmlCode = $(element).get('html');
// determinamos altura una linea
$(element).set('html', '-');
var oneLineHeight = element.getStyle('height').toInt();
element.set('html', htmlCode);
// Si tenemos más lineas que las permitidas
if (element.getStyle('height').toInt() / oneLineHeight > numLines) {
point1 = 0;
point2 = Math.round(htmlCode.length/2);
point3 = htmlCode.length;
var i = 0;
// Recortamos texto hasta que coja
do{
var newHtml = htmlCode.substring(0, point2) + '...';
element.set('html', newHtml);
if((element.getStyle('height').toInt())/oneLineHeight > numLines){
point3 = point2;
}else{
point1 = point2;
}
point2 = Math.round((point3-point1)/2)+point1;
}while ((point3-point1)>1);
if((element.getStyle('height').toInt())/oneLineHeight > numLines){
element.set('html', htmlCode.substring(0, point3-1) + '...');
}
}
}); |
y en el html lo debemos usar así:
1
2
3
4
5
| <div class="maxlines">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</div> |
la capa del texto debe incluir el class=”maxlines” y la propiedad rel=”maxLines[]” donde la cifra entre corchetes es el número de líneas que se tienen que mostrar.
El funcionamiento básico del script es el siguiente:
- Coloca en la capa un sólo carácter.
- Calcula la altura de esta capa.
- Usando el algoritmo de divide y vencerás vamos reduciendo a mitades la cadena para encontrar rápidamente por donde partir el texto.
y listos… se acaba de maquetar añadiendo puntos suspensivos y listos.
Todo esto funciona conjuntamente con la versión 1.2.2 de Mootools
Para los que estamos acostumbrados a mootools, nos es habitual comprobar si un elemento (tag html con id) existe antes de lanzar los scripts, siempre lo hacemos de la misma manera:
1
| if ($("elemento")) { alert("adelaaaaaaaanteee"); } |
Pero si pasamos a jQuery, vemos que si lo hacemos así, la expresión siempre devolverá cierto. Ya que la función $(“”) en jQuery siempre devuelve un array de elementos. Sabiendo esto, lo que tenemos que comprobar para saber si un elemento existe, es comprobar la longitud del array que nos devuelve:
1
| if ($("elemento").length > 0) { alert("adelaaaaaanteee"); } |
Ya puestos, en dojo tendríamos que hacer esto:
1
| if (dojo.byId('elemento')) { alert("adelaaaaaanteee"); } |
BeArquitectes – Naulover
Justo con el estreno de nuestra web corporativa (www.iuttu.com). Estrenamos los dos últimos proyectos hechos para el tandem Paraphernalia-PuigdemontRoca: la web de la empresa de ropa Naulover y la web del equipo de arquitectos Be Arquitectos.
Ambas están realizadas con ayuda del framework de PHP de Zend y la mayor parte del contenido es administrable mediante un gestor de contenidos hecho a medida.
http://www.naulover.com
http://www.be-arquitectos.com