Responsive Image: Experimenting With Context-Aware Image Sizing

An alternative approach to fluid images by Filament Group. This technique allows designers to create responsive layouts that serve different image sizes at different resolutions. Effectively, it allows designers to create mobile-optimized images for smaller screens, and then serve higher-resolution versions to larger screens. Filament Group has developed this technique that uses .htaccess files and JavaScript to serve up different sized images based on the screen width. An alternative solution is to use tools like TinySrc which allows you to merely prefix all large images in your source code with a TinySrc URL, and the tool does the rest.

Detectar la rotacion de una web en soporte móvil con javascript

El JS detecta si el dispositivo móvil (iOS o Android) está en vertical u horizontal, asignando un comportamiento dependiendo de la disposición del mismo. El código es el siguiente:

Para la página vertical:

<script type="text/javascript">
detectOrientation();
window.onorientationchange = detectOrientation;
function detectOrientation(){
if(typeof window.onorientationchange != 'undefined'){
if ( orientation == 0 ) {
//Do Something In Portrait Mode
}
else if ( orientation == 90 ) {
window.location.replace ("http://pruebas.unidadeditorial.com/prototipos/maite/mundomovil/horizontal.html")
}
else if ( orientation == -90 ) {
window.location.replace ("http://pruebas.unidadeditorial.com/prototipos/maite/mundomovil/horizontal.html")
}
else if ( orientation == 180 ) {
//Do Something In Landscape Mode
}
}
}
</script>

Y para la horizontal:

<script type="text/javascript">

function detectOrientation(){
if(typeof window.onorientationchange != 'undefined'){
if ( orientation == 0 ) {
window.location.replace ("http://pruebas.unidadeditorial.com/prototipos/maite/mundomovil/vertical.html")
}
else if ( orientation == 90 ) {
}
else if ( orientation == -90 ) {
}
else if ( orientation == 180 ) {
window.location.replace ("http://pruebas.unidadeditorial.com/prototipos/maite/mundomovil/vertical.html")
}
}
}
window.onorientationchange = detectOrientation;
</script>

Equivalente de Firebug para Internet Explorer

Puedes incluir un javascript en el de la página:


O Download Firebug Lite and include the following code at the top of the of your page:

Fuente: getfirebug.com

Efecto Lightbox con css + javascript

Lightbox es un script desarrollado con javascript que nos permite abrir ventanas emergentes con más estilo que las habituales popup. Como esta librería existen muchísimas mas, como por ejemplo la lightview.
Bueno pero este no es el punto principal, vía unijimpe me encuentro con la posibilidad de nosotros poder "desarrollar" nuestra propia lightbox. Porque por medio de css más un simple mostrar y ocultar divs podemos hacer el efecto para que se abra una ventana emergente. Obviamente este código no cuenta con algunos efectos que tienen la ya nombrar lightbox, pero nos puede servir para nosotros darle el estilo que queramos a la popup que se abra.

Ahora vamos a ver el código para generar nuestra lightbox:
1 - Creamos un nuevo documento html, e insertamos estas divs.

PLAIN TEXT

• id="over" class="overbox">Contenido Lightbox
• id="fade" class="fadebox">

2 - Esta paso es uno si no el mas importante de todos, vamos aplicar el estilo css a las divs que creamos en el paso anterior.

PLAIN TEXT

• .fadebox
• display: none;
• display: none;
• position: absolute;
• top: 0%;
• left: 0%;
• width: 100%;
• height: 100%;
• background-color: black;
• z-index:1001;
• -moz-opacity: 0.8;
• opacity:.80;
• filter: alpha(opacity=80);
• {

• display: none;
• position: absolute;
• top: 25%;
• left: 25%;
• width: 50%;
• height: 50%;
• z-index:1002;
• overflow: auto;
• }

Ahora lo que tenemos que hacer es crear los 2 botones para mostrar y otro para ocultar la ventana. Para esto vamos a colocar el sitio código html y también crear dos funciones javascript para que ejecuten la acción de mostrar/ocultar.

PLAIN TEXT

• href="javascript:showLightbox();">Show LightBox
• href="javascript:hideLightbox();">HideLightBox

PLAIN TEXT

function showLightbox()¡

• document.getElementById('over').style.display='block';
• document.getElementById('fade').style.display='block';
• }

function hideLightbox() {

• document.getElementById('over').style.display='none';
• document.getElementById('fade').style.display='none';
• }

document.getElementById('fade').style.display='block';
}
function hideLightbox (){
  document.getElementById('over').style.display='none';
  document.getElementById('fade').style.display='none';

}

Luego de que juntemos todo este código en nuestro archivo html nos tendría que quedar algo como este demo.

• Autor: Efecto Lightbox con CSS(unijimpe.net)
• Demo Online Efecto Lightbox con CSS
• Descargar codigo de fuente