|

Floatutorial

ByLuis

Un impresionante tutorial que nos va enseñando paso a paso como posicionar elementos HTML con float y clear. Nos enseña con ejemplos:

  • Información general, definición de conceptos, explicación de float y clear.
  • Posicionamiento de una imagen a la derecha, añadiéndole márgenes y bordes.
  • Posicionamiento de la imagen y su pie de foto, aplicando bordes.
  • Crear thumbnails.
  • Usar listas de elementos para crear botones “Anterior” – “Siguiente”.
  • Usar listas de elementos para crear pestañas.
  • Crear efecto de letra inicial de párrafo de tamaño superior al resto.
  • Estilo de dos columnas.
  • Estilo de tres columnas.

Floatutorial

Vía / Dzone

Similar Posts

|

Javascript orientado a objetos

ByLuis

Interesante tutorial que nos indica cómo usar los objetos en Javascript, ya sean los objetos predefinidos, el uso del operador new, objetos literales, su declaración, la encapsulación, la herencia, la propiedad prototype para añadir métodos y atributos a un objeto, poliformismo, … explicado con ejemplos y muy útil para aquellos que empiezan y para aquellos que quieran mejorar su código (que a todos nos viene bien).
Object-Oriented Javascript
Vía / Digg

Precarga de imágenes mediante CSS

ByLuis

Acabo de ver un método bastante curioso para precargar imágenes en la página mediante CSS. Se trata de crearnos un estilo para una capa que tenga varias líneas de background y que no se muestre, así se cargan todas las imágenes durante la carga de la página y luego las podemos usar para otras cosas como rollovers.

 #preloadedImages {
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}

Luego tendremos que definirnos una capa de la siguiente manera:

<div id="preloadedImages"></div>

A Simple CSS Image preloading technique

|

Composite Pattern en PHP 5

ByLuis

Aunque a la gente que trabajamos con Java este concepto nos es muy conocido, ha sido en PHP5 cuando han sacado los composite patterns para usar esta funcionalidad, la cual nos puede dar mucho juego.
Una composite pattern ofrece una sencilla interfaz que permite a los programadores de clientes trabajar con un componente o un conjunto de componentes de forma intercambiable. De hecho, según el código no se debe saber si se trata de un componente o de un conjunto de ellos.
Para ello se define una clase como abstracta y los métodos que la componen también. Luego habrá que crear otras clases que se extiendan de esta primera para poder tratar los diferentes tipos.
Un buen inicio para aprender a usar está técnica, que es sencilla aunque no lo parezca.
Introducing the Composite Pattern in PHP 5 – Introducing the basics of the composite pattern
Vía / PHPDeveloper.org

Laboratorio: detectar parametros de la URL en Javascript

ByLuis

Algo bastante sencillo y que puede sernos útil es detectar los parámetros que se envían por URL para así modificar el comportamiento de nuestro Javascript, por ejemplo si se envía un parámetro o tiene cierto valor, se podría cargar un objeto o implementar una función.

El script sería el siguiente:

// Obtenemos la URL
var url = document.location.href;
// Nos quedamos con los parámetros
url = url.substring(url.lastIndexOf('?')+1);
// Dividimos los distintos parámetros
url = url.split('&');
// Almacenamos los parámetros en un array(param => valor)
var res = new Array();
for(var i=0; i

Si nuestra URL es amigable, no hay parámetros sino que se indican en la propia URL (http://servidor/metodo/accion/parametro/parametro), deberíamos hacer algo así:


//Obtenemos la Query String (URL - host)
var url = document.location.href;
url = url.substring(url.lastIndexOf(document.location.host)+1);
// Separamos mediante la barra (/)
var res = url.split('/');

Como se puede apreciar es muy sencillo, pero nos puede ser muy útil, sobre todo si queremos ganar en rendimiento y no cargar todo el js, que a veces no está muy optimizado y en todas las páginas se carga cuando a veces no sería necesario.

Laboratorio: teclado para pantalla táctil de Iphone o Ipod

ByLuis

Algo de lo que más me gusta del Iphone o el Ipod Touch es el teclado que tiene, el cual muestra la tecla que pulsas por encima de tu dedo. Los que tenemos los dedos un poco grandes y somos un poco patosos, en las pantallas táctiles, a no ser que el teclado que ofrecen sea muy grande, hay veces que no vemos muy bien que tecla estamos pulsando. La gente de Apple nos ha quitado esta duda de un plumazo, resaltar y mostrar por encima de tu dedo la tecla que se pulsa.

ipod.png

Si tenemos que hacer una aplicación web que se vaya a usar en pantallas táctiles, este truco puede seros muy útil. Se trata únicamente de cambiar los estilos a los enlaces cuando están activos (a:active), haciendo que el tamaño de la letra sea más grande, y la caja que ocupa sea más grande y se desplace hacia arriba.

Si tenemos un teclado de la siguiente manera:

<ul>
<li><a href="#ndo">º</a></li>
<li><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li>
...
</ul>

Lo que tendremos que hacer es darle a los li el estilo de bloque y float a la izquierda y los enlaces cuando esten activos cambiarles el estilo, así la tecla flotará sobre las otras:

ul {
clear: both;
}
li {
margin: 5px;
display: block;
width: 50px;
height: 50px;
float: left;
background: #008585;
text-align: center;
vertical-align: middle;
}
a {
background: #008585;
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
font-family: Verdana;
font-size: 175%;
}
a:active {
display: block;
background: #E1E8CD;
color: #008585;
width: 100px;
height: 150px;
position: relative;
top: -100px;
left: -25px;
font-size: 275%;
}

Quien lo quiera probar en la Ipod o Iphone no le va a funcionar, ¿por?, pues no lo sé, quizas el Safari que lleva tiene alguna limitación, o simplemente en Safari no funciona, no lo sé, lo he probado en Firefox nada más.

Ejemplo