Experiments

Aquí publicamos varios experimentos creados desde cero. No precisan librerías de terceros. El código y contenidos, ocupa entre 2 y 9 Kb. Funcionan en diversos dispositivos y navegadores. Veamos los ejemplos:

Demo – 1
Demo – 2
Demo – 3
Demo – 4

Continuará…

Anuncios
Experiments

Responsive Image

<!DOCTYPE html>

<html>
<head>
<title>Responsive Image</title>
<!–[if lt IE 9]>
<style type=”text/css”>* {zoom:1}</style>
<![endif]–>
<style type”text/css”>
#bg {
position:absolute;
position:fixed;
top:0px;
left:0px;
right:0px;
bottom:0px;
margin:0px;
min-width:100%;
width:auto !important;
width:100%;
min-height:100%;
height:auto !important;
height:100%;
z-index:-4;
}
</style>
</head>
<body>
<img id=”bg” src=”fondo.jpg” border=”0″ title=”” alt=””>
</body>
</html>

Es todo …
That’s all …

Responsive Image

Full Background Simple

Una opción muy simple con igual resultado que ofrecen las librerías, los framewoks, etc… Con unas pocas líneas de código javascript, se puede conseguir ajustar una imagen al tamaño de la pantalla perfectamente. Es compatible con IExplorer, Firefox, Safari, Chrome, Opera, otros dispositivos, etc. El ejemplo:

<!DOCTYPE html>
<html lang=”es-ES”>
<head>
<meta http-equiv=”Content-Type” Content=”text/html; charset=ISO-8859-1″>
<meta http-equiv=”imagetoolbar” content=”no”>
<title>Full Background Image | jScript</title>
<style type=”text/css”>
<!–
*{
margin:0px;
padding:0px;
color:#FFFFFF;
font-size:100%;
font-family:sans-serif;
vertical-align:baseline;
text-rendering:optimizeLegibility;
}
img{
border:0px none;
-ms-interpolation-mode:bicubic;
image-rendering:optimizeQuality;
}
#bg{
position:fixed;
left:0px;
top:0px;
z-index:-100;
}
.bgw{
width:100%;
}
.bgh{
height:100%;
}
h4{
font-size:40px;
}
//–>
</style>
<scr/ipt language=”javascript” type=”text/javascript”>
<!– Copyleft 2006 – 2016, ScriptShow – scriptshow@hotmail.com –>
<!– Feel free to use if you leave this header intact! –>
<!–
function init(){
e=document.getElementById(“bg”);
r=e.width / e.height;
w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

if ((w / h) < r){e.className=”bgh”;}
else {e.className=”bgw”;}
e.onload=function(){init();}
}

window.onload=function(){init();}
window.onresize=function(){init();}
//–>
</scr/ipt>
</head>
<body>
<img id=”bg” src=”back.jpg” alt=””>
<h4>Text</h4>
<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica. Pero un buen día, una pequeña línea de texto simulado, llamada Lorem Ipsum, decidió aventurarse y salir al vasto mundo de la gramática…</p>
<p>&nbsp;</p>
</body>
</html>

Full Background Simple

Diseño Responsable

Se habla en casi todos los ambientes relacionados con la Web de “Diseño Responsable”…
Hay bastantes frameworks que se encargan de generar código para realizar el trabajo.
La pregunta sería: ¿Es necesario todo ese despliegue para “nada”?.
La respuesta es: NO. Vamos a demostrarlo con un sencillo ejemplo:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Typecontent=”text/html; charset=iso-8859-1” />
<style type=”text/css“>
body {
margin: 0px;
text-align: center;
font: normal normal 1em/1em Helvetica, sans-serif;
}

@media all and (max-width: 640px) {
#wrap .bloq {
display: block !important;
width: auto !important;
}
}

#wrap .bloq {
display: inline-block;
height: 240px;
width: 240px;
margin: 20px;
background: #D0D0D0;
border: 1px solid #000000;
}
</style>
</head>
<body>
<div id=”wrap“>
<div class=”bloq“><b>[Texto | Imagen]</b></div>
<div class=”bloq“><b>[Texto | Imagen]</b></div>
<div class=”bloq“><b>[Texto | Imagen]</b></div>
<div class=”bloq“><b>[Texto | Imagen]</b></div>
</div>
</body>
</html>

Con menos de 1Kb. es suficiente para empezar. Seguiremos hablando de “Diseño Responsable”; con pocas palabras, y menos código.
¡Es todo, por ahora!.
Ah, redimensiona la ventana para ver el efecto.

Diseño Responsable

Full Screen CSS

Un ejemplo muy sencillo basado en CSS que hice para “Pantalla Completa” con texto en caption translúcido… Una imagen de fondo fija ajustada proporcionalmente al tamaño de la zona visible del navegador, y el texto, incluido en DIVs con fondo translúcido, queda en primer plano.

Veamos aquí el detalle. Pulsando la tecla de función [F 11] se amplía a pantalla completa.
Se puede ver el código fuente completo incluido en la página.

Full Screen CSS

Imagen ajustada con proporción

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. Pues sí, casi 100 veces menos y un poco de dedicación, está demostrado aquí:

<!DOCTYPE html>

<html>
<head>
<style type=”text/css”>
#bg {
position:absolute;
position:fixed;
top:0px;
left:0px;
right:0px;
bottom:0px;
margin:0px;
min-width:100%;
width:auto !important;
width:100%;
min-height:100%;
height:auto !important;
height:100%;
z-index:-100;
}
</style>
</head>
<body>
<img src=”fondo.jpg” id=”bg” alt=”” title=””>
</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. Ah, es compatible con varios disposivos y navegadores, incluido IExplorer.

Imagen ajustada con proporción

ScriptShow

Sitio Web con algunos experimentos y scripts propios, al margen de cualquier librería, framework, etc. Desarrollos útiles y sencillos, adaptables a cualquier Sitio sin complicaciones.

Website with some experiments and scripts themselves, independently of any library, framework, etc.. Develop useful and simple, adaptable to any site without complications.

ScriptShow WebSite

ScriptShow WebBlog

ScriptShow Descargas

ScriptShow Correo

ScriptShow