Otro Chat, muy sencillo y adaptable a cualquier Sitio Web. Este Script PHP, de 456 bytes (456 bytes), sí, medio Kb. y un HTML de 2,54 Kb (2.605 bytes), icluidos CSS y JScript, es todo lo que se necesita; ni AJAX ni Librerías JS de 200 Kb… Así de simple!.
Aunque ya vamos por HTML 5, la versión anterior tiene aún vigencia, resiste bien…
Listado HTML 4.01 de elementos:
Hemos visto algunos Scripts para cambiar el fondo de un Sitio Web con efectos diversos. Ahora, toca lo del efecto de transición de una imagen a otra de forma progresiva, aumentando y disminuyendo la opacidad. El resultado es muy atractivo, y se consigue con muy pocos recursos, sin enormes Librerías JS, sólo con 1,90 KB (1.950 bytes). Veamos el Script:
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”es” lang=”es”>
<head>
<title>:: BG IMG BIG FADE ::</title>
<meta http-equiv=”Content-Type” Content=”text/html; charset=ISO-8859-1″>
<meta name=”copyright” content=”Copyright © 2011 ScriptShow, All Rights Reserved”>
<meta name=”author” content=”ScriptShow Web http://scriptshow.wordpress.com“>
<meta http-equiv=”imagetoolbar” content=”no”>
<style type=”text/css”>
body {
background:#000000;
}
#bgimg {
position:absolute;
position:fixed;
width:100%;
left:0px;
top:0px;
filter:alpha(Opacity=0);
-khtml-opacity:0;
-moz-opacity:0;
opacity:0;
z-index:1;
}
</style>
<script type=”text/javascript”>
// ===================================
// ScriptShow Web © 2000 – 2011
// http://scriptshow.wordpress.com
// ===================================
var imgnames=new Array(‘imgs/img_01.jpg’,'imgs/img_02.jpg’,'imgs/img_03.jpg’,'imgs/img_04.jpg’,'imgs/img_05.jpg’,'imgs/img_06.jpg’,'imgs/img_07.jpg’,'imgs/img_08.jpg’);
var c=0;
function slidebg(){
obj.src=imgnames[c];
if(c < imgnames.length-1){c++}
else
if(c == imgnames.length-1){c=0}
setTimeout(“fadeimg(0)”, 8000);
fadeimg(1);
}
function init(){
obj=document.all?document.all(“bgimg”):document.getElementById(“bgimg”);
slidebg();
}
var fade=0;
var opac=0;
var goIn=null;
function fadeimg(fade){
if(document.all)obj.filters.alpha.Opacity=opac;
if(!document.all)obj.style.MozOpacity=(opac/100)-0.001;
if(!document.all)obj.style.KHTMLOpacity=(opac/100)-0.001;
if(!document.all)obj.style.opacity=(opac/100)-0.001;
if(fade==1 && opac < 100){opac=opac+2} else{clearTimeout(goIn)}
if(fade==0 && opac > 000){opac=opac-2} else{clearTimeout(goIn)}
if(fade==0 && opac < 002){init()}
goIn=setTimeout(“fadeimg(‘”+fade+”‘)”, 10);
}
</script>
</head>
<body>
<img id=”bgimg” name=”bgimg” src=”imgs/img_01.jpg” border=”0″ alt=”" title=”" />
<script>
init();
</script>
</body>
</html>
Seguiremos haciendo experimentos sencillos, sin derrochar un solo Kb.
Scripts disponibles para descargar. Pulsa aquí
Si lo prefieres, envía un EMail a:
Siguiendo con el interesante tema de la imagen de fondo ajustada al tamaño de la ventana del Navegador, traemos aquí un sencillo pero potente Script que, con muy pocos Kb. (menos de 2,5Kb.), realiza unos efectos para presentar imágenes de fondo ajustadas sin perder la proporción original de la imagen. Ésto, se consigue con librerías JS de entre 100-200kb. muy conocidas; pero, se pueden conseguir resultados similares sin derrochar recursos innecesariamente. El desarrollo, creado desde cero, nada tiene que ver con esos framework, se basa en un sólo Script que ocupa un 1% del total.
En fin, vamos a lo práctico:
Scripts disponibles para descargar. Pulsa aquí
Si lo prefieres, envía un EMail a:
Queda abierto cualquier comentario, sugerencia, etc. relacionado con el tema.
Bueno, cansado de ver cientos de Scripts para ajustar un fondo ó imagen al tamaño de la ventana del navegador, decidí ponerme manos a la obra. Todos conocemos las enormes Librerías (100-200Kb.) para tal menester… Algunos sabemos que se pueden conseguir resultados más que aceptables con muy pocos recursos: 440 bytes (la mitad de 1Kb.). Pues sí, con 100 veces menos y un poco de dedicación, está demostrado aquí:
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta http-equiv=”imagetoolbar” content=”no” />
<title>Resize Fluid Image</title>
<style type=”text/css”>
body {
background: #000000;
margin: 0px;
padding: 0px;
overflow: hidden;
}
img {
width: 100%;
z-index: -2;
// (Quitar este comentario para mantener el tamaño de la imagen por defecto.) max-width: 100%;
}
</style>
</head>
<body>
<img src=”bg_img.jpg” />
</body>
</html>
Lo he simplificado al máximo para ver el efecto deseado; no obstante, se puede adaptar para diferentes propósitos: fondo de Web Site, tamaño de imagen según pantalla, etc. La imaginación es el único límite…
CMS son las siglas de (Content Management System) Sistema Administrador de Contenidos. Hay muchos CMS, para diversas aplicaciones. Algunas de las más populares son: Blogs, EComercios, Portales, etc. Elegir bien es tarea difícil, hay que dedicar el tiempo preciso para encontrar lo que mejor se ajusta a nuestro proyecto. Para empezar, podemos visitar algunos sitios relacionados:
También quiero destacar algunos proyectos sencillos, alternativos a los mencionados, muy interesantes… Los CMS sin Base de Datos, cumplen un papel fundamental a la hora de construir un Sitio Web dinámico, accesible, rápido, etc. En este sentido, hay opciones que han demostrado estar a la altura de los “grandes”. Ya hemos probado la eficacia y flexibilidad de estos “pequeños” Administradores de Contenidos. Veamos algunos elaces:
Esto es un experimento “FullSimple Background Image” adaptado a CMSimple 3.X Si interesa, lo trataremos como un pequeño proyecto.
PHP es un lenguaje interpretado muy flexible y utilizado para crear Webs interactivas. Es sabida su aplicación en: Blog, Libros de visita, Formularios, Listas de correo, Tiendas online …
Existen Scripts creados para infinidad de aplicaciones, no obstante, intentaremos aportar algo con un toque personal.
Algunas referencias obligadas:
Saludos,
parece despertar interés el tema de la Imagen a pantalla completa, redimensionada al tamaño de la ventana del Navegador. Hay Scripts para hacer esto posible, también con CSS Style; pero, es más sencillo y compatible hacerlo con HTML, simplemente. Veamos como:
<html>
<head>
</head>
<body bgcolor=”#FFFFFF” topmargin=”0″ leftmargin=”0″ rightmargin=”0″ bottommargin=”0″ scroll=”no”>
<img src=”imgbg.jpg” border=”0″ width=”100%” height=”100%”>
</body>
</html>
Es sorprendente, con menos de 0.5Kb. y HTML. A menudo, vemos como se utilizan inadecuadamente librerías JS (Framework) para conseguir efectos que son posibles con muy pocos recursos. Si el tiempo me lo permite, intentaré crear un Script compatible de (2-4 Kb), que cubra las espectativas actuales.
En fin, con un poco de imaginación ya tenemos la base de una Web personal, ¿única?…
Un apunte: para evitar las barras de scroll en algunos Navegadores actuales, se precisa CSS. Es evidente que la imagen se ajusta al espacio visible del Navegador, sin guardar la proporción original.
Se trata de una capa con efecto fade que permanece en primer plano sin afectarle la posición de las barras de scroll. Está realizada en CSS y JavaScript. Se han añadido unas expresiones para corregir algunos fallos en IE5x, IE6x, etc.
El código es:
<html>
<head>
<style type=”text/css”>
<!–
body {
background:#EFEFEF url(‘bg’) fixed;
}
#fixelem {
position:fixed;
_position:absolute;
_width:expression(eval(document.body.clientWidth)+0+’px’);
_height:expression(eval(document.body.clientHeight)+0+’px’);
_top:expression(eval(document.body.scrollTop)+0+’px’);
top:0;
left:0;
margin:0;
padding:0;
width:100%;
height:100%;
background:#707070;
overflow:hidden;
filter:alpha(opacity=0);-khtml-opacity:0;-moz-opacity:0;opacity:0;
}
//–>
</style>
<script language=”javascript” type=”text/javascript”>
<!– Copyleft 2006 – 2009, ScriptShow – scriptshow@hotmail.com –>
<!– Feel free to use if you leave this header intact! –>
<!–
step=2;
opac=0;
timer=null;
function ImgsFader(){
fadeEl=document.getElementById(“fixelem”);
opac+=step;
if(fadeEl.filters){
fadeEl.filters.alpha.opacity=opac;
}
else{
fadeEl.style.KHTMLOpacity=(opac/100)-0.001;
fadeEl.style.MozOpacity=(opac/100)-0.001;
fadeEl.style.opacity=(opac/100)-0.001;
}
if(opac==70){clearTimeout(timer)}
else{timer=setTimeout(“ImgsFader()”,10)}
}
//–>
</script>
</head>
<body onload=”ImgsFader()”>
<span id=”fixelem” onclick=”this.style.display=’none’”><center><h2>Este texto siempre estará en la parte superior de la página</h2><br><img src=”img.gif” width=”200″ height=”200″></center></span>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
</body>
</html>
Espero sea útil.
Curiosidades sobre el apasionante mundo de la Fotografía. Programas, aplicaciones, utilidades gratis para el tratamiento de imagénes.
Artweaver es uno de esos programas para tratamiento de imágenes que nada tiene que envidiar a otros de “renombre”. Es una potente herramienta que, cuando la pruebes, sabrás a qué me refiero…
Por ahora es gratuita y sin limitaciones.
Otro interesante programa para añadir efectos y mucho más. Se trata de PhotoScape un magnífico editor de fotos gratuito, con el que puedes hacer algunas sencillas tareas en pocos clicks. Muy intuitivo, en unos minutos obtendrás resultados sorprendentes; olvídate de pesados tutoriales, vé a lo práctico, pruébalo.
Algunos enlaces relacionados:
Y, algunos más…
