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

Video HTML

Ya publicamos un artículo sobre vídeo no hace mucho…

Ahora, nos basamos en un concepto puro HTML y CSS, sin Javascript ni librerías de terceros. Sí, es posible con una centésima parte de lo que ocupan estos scripts. En concreto, menos de 2Kb. toda la página. Es flexible y adaptable a cualquier proyecto Web. Compatible con los navegadores: IExplorer 8+, Opera 12+, Safari 5+, Firefox 30+, entre otros…

Puedes ver un ejemplo en: Vídeo Test

Video HTML

Video Background

Bien… Ya tenía ganas de hacer un experimento con Vídeo como fondo a pantalla completa. Se trata de un Sitio Web basado en Audio-Vídeo, con posibilidad de cambiar la pista que está reproduciéndose. El resultado es diferente a las playlist clásicas. Es simple, personalizable 100% – (el script ocupa sólo 5Kb. NO utiliza librerías de terceros). Compatible con los navegadores: IExplorer, Firefox, Safari, Opera, Chrome, etc.

Video Background

videobkg

Esta vez hemos utilizado vídeos de YouTube, pero podemos hacer un trabajo completo desde cero.
Seguiremos en este tema hasta que pierda interés. ¡Ahora está muy de “moda”!.

Video Background