Flotando elementos en CSS I

 IHabitualmente encontramos por internet soluciones malas a problemas frecuentes. En el ámbito de la maquetación obviamente no iba diferente. A veces no somos conscientes de que cualquier solución que funcione no tiene porque ser la correcta.

En este caso y aunque parezca algo descabellado siguen existiendo páginas web que utilizan tablas para maquetar. Aunque en una de las primeras entradas del blog ya explicaba el por qué no se deben usar tablas para maquetar sigo observando por el cibermundo que hay gente que no quiere cambiar su modo de programar.

En definitiva en este post voy a explica muy detalladamente cómo flotar elementos para conseguir varias columnas sin necesidad de andar haciendo tablas que enguarren todo el código.

Para empezar debemos distinguir entre elementos de bloque y elementos inline. El flujo de los elementos de bloque (<p>, <div>, ...) es de arriba a abajo. El flujo de los elementos inline, contenidos dentro siempre de elementos de bloque (<img>, <strong>, ...) es de derecha a izquierda y de arriba a abajo.

El problema, obviamente viene al querer alterar este flujo y sacar un elemento de él. Para ello utilizamos la etiqueta float.

Por ejemplo si tenemos dos <div> y queremos poner uno al lado de otro el código sería el siguiente:

<div id="d">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</div>
<div id="i">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

Al añadir el siguiente código css se consigue el efecto deseado.

#d{ float:right;}

Un gran tema con una pésima traducción: Placebo - Twenty Years

Breve introducción al CSS

CSS se ha convertido en el lenguaje más utilizado para maquetación de páginas web. Normalmente cuando te enfrentas por primera vez a un CSS te sorprende ver que existen varias maneras de hacer referencia a los elementos. En este post vamos a ver los diferentes tipos de etiquetas que, normalmente, te puedes encontrar en un fichero CSS.

Para empezar podemos encontrarnos una etiqueta HTML puesta dentro de nuestro fichero CSS, por ejemplo h2. Siempre que encontremos esto, en ese fichero CSS se habrá definido un estilo para todas las etiquetas h2 de nuestro fichero HTML en el que tengamos enlazado el CSS.

El siguiente caso más utilizado suele ser cuando referenciamos clases que hemos creado anteriormente. Cuando utilizamos el atributo class en HTML y queremos vincularle un estilo, en CSS deberemos poner delante del nombre de la clase un punto.

Por último también podemos encontrar algún identificador dentro del HTML. En este caso en CSS debemos poner una almohadilla (#) delante del nombre del identificador del elemento. Este caso es exactamente igual al anterior.

Debemos tener cuidado al usar los identificadores. DEBEN ser únicos por página HTML.

Validación de campos

La validación de los campos de un formulario es la tarea primordial que siempre debemos hacer cuándo nos dedicamos a la programación web. Todo lo que es susceptible de ser modificado por el usuario esta sujeto a muchos errores. De esta manera debemos asegurarnos que hacemos la validación tanto en el cliente (Javascript) como en el servidor (PHP).

La validación Javascript es fundamentalmente necesaria para evitarle al usuario el tener que esperar a que consultemos al servidor y devolvamos una respuesta. Cuántas veces nos ha molestado estar rellenando un formulario,  tras darle a enviar la página nos responde que las contraseñas que hemos introducido no son válidas y nos devuelve prácticamente el formulario vacío. Bien, si hacemos comprobaciones con Javascript muchas de estas situaciones se pueden evitar.

La validación PHP cobra mucha más trascendencia porque en el servidor es dónde se llevan a cabo las operaciones realmente delicadas. Por lo tanto y aunque desde estas líneas os pido que no os dejéis ninguna por hacer, si en alguna ocasión no podéis hacer una de las dos dejaros la del cliente.

Para empezar con la validación de campos tenemos que explicar qué funciones nos ofrece PHP para hacerla. En este caso empezaremos por la función isset.

if (isset($var)) {
echo "Esta variable está definida, así que se imprimirá";
}

Con la función isset podemos saber si una variable está definida o no. Por lo tanto si al recibir los parámetros podemos saber si han sido enviados o no.

Otra función que nos puede ayudar es empty que nos devolverá si una variable está vacía o tiene un valor.

if (empty ($var)){
echo "Esta variable está vacía así que se imprimirá";
}

Aunque para los que estamos acostumbrados a este tipo de comprobaciones, este post nos parece trivial, hay muchos programadores que no lo conocen o no lo usan.

Una cancioncilla para despedirme.