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.

Métodos mágicos II – PHP 5 Orientado a objetos

En esta segunda entrega de los métodos mágicos de PHP os voy a comentar dos nuevos métodos que se han agregado a la versión 5 de PHP para trabajar con clases.

Los métodos de los que os voy a hablar son el __clone(), un método que sería el equivalente al constructor de copia de la Programación orientada a objetos de toda la vida, y el __get() y __set().

Empecemos por el __clone(). Este método realiza las funciones del constructor de copia de toda la vida. Hace una copia exacta del objeto. Si nuestro objeto tiene referencias a otros objetos también los copia.

Por otro lado, todos los que hemos programado orientado a objetos tenemos claro el tema del ámbito de los atributos y métodos. Sabemos que si el atributo es privado sólo se puede acceder a él desde dentro de la clase y desde fuera solo se puede acceder a su información a través de los métodos accesores y selectores (get y set).

Los métodos __get() y __set() nos lo ponen bien fácil. Si no existieran estos métodos genéricos, deberíamos definir un get y un set para cada uno de los atributos.

Aquí tenéis un ejemplo de como se programarían estos métodos:

class Rectangulo{
	private $ancho;
	private $alto;

	function __clone(){
		$this->ancho = clone $this->ancho;
		$this->alto = clone $this->alto;
	}

	function __get($value){
		return $this->$value;
	}

	function __set($value, $param){
		if(is_numeric($param)){
			$this->$value = $param;
		}
	}
}

Escuchando... Rod Stewart and the faces -- Maggie May
[kml_flashembed movie="http://www.youtube.com/v/xikQ0c5KdZE" width="425" height="350" wmode="transparent" /]

Métodos mágicos I - PHP 5 Orientado a objetos

Hola amigos ya estoy por aquí de nuevo. En esta ocasión y dado que estoy metido en unos asuntos en este momento que tratan sobre la programación orientada a objetos en php, os voy a comentar una serie de métodos llamados mágicos que se han introducido en la versión 5 de php.

A partir de la versión 5 de php se han introducido mejoras que facilitan la encapsulación de los objetos y así lo aproximan más a la POO.

Lo primero que cabe destacar es que tanto los métodos como los atributos pueden ser de tres tipos.

private: Sólo son accesibles los métodos de la clase.

protected: Sólo son accesibles desde los métodos de la clase y de clases derivadas.

public: Se pueden acceder a ellos desde fuera de los métodos de la clase.

El primer método "mágico" que voy a explicar es el constructor. En php 4 por convención se solía usar como constructor un método que tenía el mismo nombre que la clase. PHP 5 nos introduce el método __construct(), aquí tenéis un ejemplo.

<?php
	class Rectangulo{
		private $ancho;
		private $largo;
		function __construct($pAncho, $pLargo){
			$this->ancho = $pAncho;
			$this->largo = $pLargo;
		}
	}
?>

El siguiente método que voy a explicar es __toString(). Gracias a este método podemos sacar por pantalla un objeto como si fuera un string.

Vamos a ver un ejemplo.

function __toString(){
        	$retorno = 'Las dimensiones del rectángulo son:
			('.$this->ancho.' x '.$this->largo.')<br />';
        	$retorno.= 'El &Aacute;rea es: '. $this->ancho * $this->largo;
        	return $retorno;
		}

La llamada a estos métodos sería:

$rect = new Rectangulo (10,10);
echo $rect;

Escuchando ... Colorblind -- Counting Crows
[kml_flashembed movie="http://www.youtube.com/v/y0s7ycdUcHk" width="425" height="350" wmode="transparent" /]

¿Cómo actualizar una página al cambiar el valor de un combo box? (Ajax)

Hola amigos, en esta ocasión voy a explicar algo que existe en casi todas las páginas, pero en este caso yo lo he aplicado con AJAX y JQUERY.

¿En cuántas páginas habéis entrado y habéis visto un desplegable de estos (combo box) con una serie de valores y habéis seleccionado uno de ellos y la página automáticamente se ha recargado y os ha mostrado unos valores?

[caption id="attachment_154" align="aligncenter" width="315" caption="Un combo box "][/caption]

Como siempre que trabajamos con AJAX tendremos la siguiente estructura:

[caption id="attachment_156" align="aligncenter" width="475" caption="Diagrama de funcionamiento AJAX"][/caption]

El fichero HTML en el que vamos a añadir este combo tendría este código:

index.html

<html>
<head>
<script src='js/jquery.js' type='text/javascript'></script>
<script src='js/funciones.js' type='text/javascript'></script>
</head>
<body>
<select name = "seleccionar">
<option value ="1">1</option>
<option value ="2">2</option>
<option value ="3">3</option>
<option value ="4">4</option>
<option value ="5">5</option>
</select>
<div id = "contenido"></div>
 </body>
</html>

En el fichero Javascript:

funciones.js

$(document).ready(function () {

$('#limite').change(function(){
$.get("funcionesC.php",
{limite: $('#limite').val()
}, function(data){
$('#c').html(data);
});
});
});

Por último en el fichero PHP desde el que mediante el echo devolvemos el callback deberemos escribir lo siguiente:

funcionesC.php

$limite = $_GET['limite'];
echo $limite;

Por último, como siempre una canción para despedir el post.

Escuchando... I wanna be your boyfriend -- The Ramones

$_REQUEST, $_POST o $_GET

Hola amigos, tras un largo tiempo sin escribir me dispongo a compartir ciertas experiencias con vosotros.

En el mundo del envío y recepción de datos existen una serie de normas no escritas sobre qué método usar.

Para empezar haré una breve descripción sobre los métodos de envío y recepción de datos. Como bien sabréis necesitaremos un formulario HTML para enviar los datos. En la etiqueta <form> será dónde definiremos la propiedad method que podrá tener los siguientes valores:

• post: Envía ocultos los datos


• get: Envía los datos en la URL

Bien además de saber estas pequeñas diferencias es básico recordar que todo lo que hagamos en la red estará sujeto a posibles ataques, por lo tanto considero fundamental diferenciar en qué tipo de operaciones podemos usar get y post.

Post:

1. Para las operaciones de modificación de registros de una Base de datos (Insert, Delete y Update) .


2. Para formularios de Login.


3. etc.

Get:

1. Consultas  (Select)


2. etc.

Por otro lado tenemos la opción Request. Esta opción es sin duda la más interesante cuando tenemos que recojer datos de otras páginas en las que no sabemos cuál es el método de envío.

En definitiva Request no necesita saber de que manera se envian los datos. El hecho de usar Request puede provocar vulnerabilidades y fallos de seguridad.

A continuación os voy a poner un ejemplo de cada:

---

GET

formulario.html

<form action="procesar.php" method="get">
     <input name="variable" type="text"/>
     <input type="submit" value="enviar"/>
</form>

procesar.php

<?php
     $var = $_GET['variable1'];
     echo $var;
?>

POST

formulario.html

<form action="procesar.php" method="post">
     <input name="variable" type="text"/>
     <input type="submit" value="enviar"/>
</form>

procesar.php

<?php
     $var = $_POST['variable1'];
     echo $var;
?>

REQUEST

formulario.html

<form action="procesar.php" method="post">
     <input name="variable" type="text"/>
     <input type="submit" value="enviar"/>
</form>



<form action="procesar.php" method="get">
     <input name="variable" type="text"/>
     <input type="submit" value="enviar"/>
</form>

procesar.php

<?php
     $var = $_REQUEST['variable1'];
     echo $var;
?>

Escuchando...   Angelic Upstarts - Solidarity

[kml_flashembed movie="http://www.youtube.com/v/1rJfv0zVnwU" width="425" height="350" wmode="transparent" /]