En este pequeño artículo traigo dos add-ons: uno para Firefox y otro para Chrome, que permiten modificar el tamaño del navegador según una resolución escojida.

• Yet Another Window Resizer para Firefox
• Window Resizer para Chrome

En Firefox la suma de pixeles de sus barras (de título, direcciones, marcadores, pestañas y estado) lo hacen más estándar en tamaño por el área visible real de la página respecto a los demás navegadores. Recuerda que Chrome no tiene barra de título ni de navegación, lo que lo hace más pequeño y agranda considerablemente su área de página visible.

Yet Another Window Resize para Firefox conocido gracias a @roccons.

Veremos algunas funciones del PHP que nos permitirán trabajar en las condiciones del PHP, como en los bucles y la estructura if-else. No solo existen métodos con operadores lógicos, existen muchas funciones para trabajar de las cuales veremos algunas.

Funciones para condiciones

*Estas son solo algunas funciones para condiciones.

Recuerda: En la documentación oficial de PHP.net están disponibles todas las funciones y muy bien explicadas. Las funciones para condiciones no están en ninguna sección y se deben encontrar según el propósito que se desea lograr. Por ejemplo, para el manejo de variables o de cadenas.

Ejemplo de funciones en condiciones

Veremos un ejemplo para ver como se le da uso a algunas funciones para trabajar las condiciones dentro del lenguaje PHP.

Ejemplo PHP:

<?php
 
$cadena = "Lorem ipsum";

if(eregi('em',$cadena) && file_exists('../index.php')){

   echo "Bien!";
   // se imprime solo si 'em' está dentro de 'Lorem ipsum' y el archivo index.php existe

}else{

   echo "Mal =(";
   // se imprime solo si 'em' no se encuentra dentro de 'Lorem ipsum'
   // o si el archivo index.php no existe

}
 
?> 

Resultado PHP:

Bien!

Así, podemos saber qué elemento está muy pesado, qué podemos comprimir, cual es el archivo que nos retrasa, cual tiene una URL rota o simplemente darse cuenta del tiempo en que carga el sitio.

No te que los navegadores cachean archivos, por lo que si ya has visitado un sitio, su carga puede ser muy inferior a la del test.

DocumentoWeb tiene un tiempo de carga aproximado de 3.5 segundos (4.6 dice el test, pero abajo hay unas urls de la página web defecto del mi servidor).

Gracias a calizman por darme el dato :).

Artículos relacionados

• Optimizar tu sitio y acelerar la carga web

Constructor

El constructor de una clase tiene como principal objetivo el de inicializar el objeto al ser instanciado, colocando así sus atributos en los valores deseados.

El constructor es una función, y como tal puede o no recibir párametros.

En PHP un ejemplo de constructor de una clase seria el siguiente:

public function __construct() {

}

Notemos que la función esta denotada así: __construct(), dos underscore ( __ ) y la palabra construct.

Destructor

El destructor de una clase es muy similar a el constructor, la diferencia radica en que este es llamado cuando es destruido el objeto, en otras palabras eliminado de la memoria, claro es solo en teoria, su objetivo principal es devolver algún objeto o situación a su estado original, por ejemplo, cerrar conexiones con base de datos, o limpiar archivos temporales, o eliminar plantillas usadas, entre otras, ahora el concepto destructor no existe en PHP4 así que cuidado con eso.

El destructor no recibe parámetros.

Un ejemplo seria el siguiente:

public function __destruct() {
        
}

Posee una estructura igual al constructor pero con la palabra destruct, el destructor no funciona muy bien si se hereda esa clase, así que cuidado, dependiendo de lo que se haga sirve o no, y para saberlo se necesita experiencia.

Ejemplo:

Archivo: Estudiante.php

<?php

class Estudiante {//Inicio de la clase

    //Atributos
    private $id;
    private $nombre;

    //Funciones
    public function __construct() {
        $this->id=0;
        $this->nombre="Null";
        echo 'Construyendo <br/>';
        echo 'Nombre: '.$this->nombre.', ID: '.$this->id.'<br/>';
    }

    public function __destruct() {
        echo 'Destruyendo';
    }

}//Fin de la clase

?>

Archivo: index.php

<?php

include 'Estudiante.php';

$estudiante = new Estudiante();

?>

Salida:

Construyendo 
Nombre: Null, ID: 0
Destruyendo

Mejoremos el código, le colocaremos parámetros predefinidos al constructor:

Nuevo Archivo: Estudiante.php

<?php

class Estudiante {//Inicio de la clase

    //Atributos
    private $id;
    private $nombre;

    //Funciones
    public function __construct($id=0,$nombre="Null") {//Parametros predefinidos
        $this->id=$id;
        $this->nombre=$nombre;
        echo 'Construyendo <br/>';
        echo 'Nombre: '.$this->nombre.', ID: '.$this->id.'<br/>';
    }

    public function __destruct() {
        echo 'Destruyendo';
    }

}//Fin de la clase

?>

¿Para qué se usan estos parámetros?, bueno si al instanciar el objeto no se pasan datos por parámetros estos serán los valores que tomaran las variable.

Ejemplo:

Nuevo Archivo: index.php

<?php

include 'Estudiante.php';

$estudiante = new Estudiante(2,"Pedro");

?>

Salida:

Construyendo 
Nombre: Pedro, ID: 2
Destruyendo

Salida sin usar parámetros:

Construyendo 
Nombre: Null, ID: 0
Destruyendo

Recuerda hacer preguntas si tienes dudas en algo...

Veremos como utilizar funciones para determinar y usar las fechas y horas a nuestro favor con el lenguaje PHP.

La función por excelencia de las horas y fechas es date().

Función date()

La funcióne date()que se utiliza de la siguiente forma:

$fecha = date('d M Y');

Donde los carácteres incluidos dentro de las comillas de la función date() son reemplazados si existe un equivalente para dicho carácter. En la siguiente tabla [ver completa en PHP.net], se muestran las equivalencias de cada letra para utilizarlas dentro de esta función.

Más en función date() de PHP.net.

Veremos un simple ejemplo con caracteres que aparecen en la tabla superior. Recordemos que solo los que aparecen en la tabla oficial de PHP.net son los que se reemplazan en la sintaxis de date().

Ejemplo PHP:

 <?php

 $hoy = date('d M Y, H:i:s a');
 echo "Hoy es: ".$hoy;

 ?> 

Resultado PHP:

Hoy es: 19 Jul 2010, 12:01:46 pm

Caracteres como la coma, los espacios y dos puntos no son reemplazados por PHP.

Función time()

La función time() muestra los segundos que han transcurrido desde el primero de enero de 1970 (00:00 GMT). Con ella podemos calcular diferentes cosas, por ejemplo, cuantos segundos han transcurrido entre ayer y hoy, o menor aún, cuantas horas entre el mismo intervalo siempre y cuando le restemos o hagamos algún cálculo con el dato de time().

Ejemplo PHP:

<?php

$una_semana = 60 * 60 * 24 * 7 ;
// 60 segundos * 60 minutos * 24 horas * 7 días nos da los segundos transurridos
durante una semana.

$un_dia = 60 * 60 * 24 ;
// 60 segundos * 60 minutos * 24 horas nos da los segundos transurridos durante un día.

$la_semana_pasada = time() - $una_semana;
$la_semana_antepasada = time() - ($una_semana * 2);
$la_semana_siguiente = time() + $una_semana;
$en_ocho_dias = time() + $una_semana + $un_dia;
$en_diez_dias = time() + ($un_dia * 10);

// así podemos calcular diferentes tiempos en segundos

?>

Ahora, podemos utilizar nuestra función date() junto a time() para obtener fechas, de la siguiente forma:

echo date('d M Y',$en_diez_dias)."<br />";
echo date('d M Y',$la_semana_antepasada);

Resultado PHP:

29 Jul 2010
05 Jul 2010

Artículo relacionado:

Función PHP para calcular hace cuanto pasó aquello.

Me encantaría estar como mi logo, pero no tengo portátil =(.

Aprende a utilizar los bucles, otra estructura impresindible del lenguaje PHP para repetir bloques de código fuente.

Un Bucle, también llamados ciclos o loop es un un tipo de función/estructura en cualquier lenguaje de programación que permite repetir líneas de código determinadas veces por una condición dada.

Existen varios tipos de bucles, entre ellos encontramos:

• while
• do... while
• for
• foreach

Bucle while

El bucle while lo podemos utilizar generalmente combinado con matrices, en la que su condición asigna un valor para una variable que contendrá el elemento actual de la matriz, y en que cada recorrido este elemento cambiará y se detendrá hasta terminarse los elementos de la matriz.

Ejemplo PHP:

 <?php

 $matriz = array('uno','dos','tres','cuatro');

 while($ahora=current($matriz)){
 echo $ahora."<br />";
   next($matriz);
 }

 ?>
Al menos me ejecuto $i vez
 
"; // la condicion es falsa pero al menos me muestro una vez
	}
	while ($i == 10 );

	/*
		Uso de While:
			Se evalúa la condición al comienzo  para decir si se ejecuta
			otra vez el bucle o se termina su ejecución. 
	*/

	$j = 0;

	while ($j < 10):
			$j++;
			if ($j == 5):
				echo "<h2>Ya te salude $j veces creo que esto es un adios.</h2>";
				break; // salimos del bucle
			endif;
		echo "<p>Hola $j</p>";
	endwhile;
?>

Resultado PHP:

uno
dos
tres
cuatro

La variable $ahora contiene el elemento actual de la matriz, y next($matriz) indica que ahora se utilizará el elemento siguiente de la matriz para el nuevo rrecorrido.

Bucle for

El bucle for pemite hacer ciclos con números. En su condición, se debe seguir el orden de inicio, mientras y aumento. Generalmente se utiliza la variable $i para iniciar el bucle.

Ejemplo PHP:

 <?php
 for($i=0;$i<=20;$i=$i+2){
 echo $i."<br />";
 }
 ?> 

Resultado PHP:

0
2
4
6
8
10
12
14
16
18
20

Aquí se recorrerá el código entre paréntesis siempre y cuando se cumpla la condición de que la variable $i sea menor o igual a 20, en el que en cada recorrido se le suman 2. Esto quiere decir que se imprimirán todos los números pares desde 0 a 20.

Hay que tener cuidado en programar los bucles, porque a veces estos ciclos pueden ser infinitos y colapsan la carga de la página o el programa.

Aprenda a utilizar las arrays multidimensionales del lenguaje PHP, combinando diferentes tipos de arrays en una general.

Las arrays multidimensionales son nada más y nada menos que arrays dentro de arrays. Son el tipo de matrices en las cuales sus elementos deben ser llamados por dos o más corchetes dependiendo de cuantas matrices disponga el array, que pueden ser indexadas o asociativas.

Así, pueden recibir distintos nombres como arrays bidimensionales o tridimensionales.

Sintaxis de un array multidimensional

 array(
 'clave uno' => 'valor uno',
 "clave dos" => "valor dos",
 $elemento_tres => 'valor 3',
 'clave 4' => $valor_4
 ) 

Donde cada valor puede obtenerse mediante el nombre de la variable que contenga al array y la clave correspondiente.

 $nombre_del_array["valor dos"] 

Ejemplos de arrays multidimensionales

Aquí veremos un ejemplo para dejar más claro el uso de una matriz bidimensional, en el que se utiliza una matriz base y dos matrices anidadas dentro de ella.

Ejemplo PHP:

 <?php
 
 $fruta = array(
 'naranja' => array(
                   'propiedad' => 'jugosa',
                   'color' => 'naranja',
                   'sabor' => 'dulce'
                   ),
 'limón' => array(
                   'propiedad' => 'jugoso',
                   'color' => 'amarillo',
                   'sabor' => 'cítrico'
                   )
 );
 
 echo $fruta['limón']['color'];
 
 ?> 

Resultado PHP:

amarillo

Así podemos obtener "el color del limón", "la propiedad de la naranja", "el sabor del limón", etc.

Ahora veremos una matriz tridimensional, compuesta por matrices asociativas e indexadas.

Ejemplo PHP:

 <?php
 
 $marca = array(
 'software' => array(
                   'buscador' => array('Google','Yahoo','Baidu','Bing'),
                   'CMS' => array('Wordpress','Joomla','Blogger')
                   ),
 'hardware' => array(
                   'PC' => 'Mac',
                   'celular' => array('Black Berry','Iphone')
                   )
 );
 
 echo $marca['software']['buscador'][0];
 
 ?> 

Resultado PHP:

Google

Así podemos obtener el "software de buscador numero 1" (que sería el 0), "el hardware de celular numero 1 y 2", "el software de CMS 11, 2 y 3", etc.

Aprenda a utilizar las arrays asociativas del lenguaje PHP, asociando claves y valores para los diferentes elementos de un array.

Las arrays asociativas son el tipo de matrices en las cuales sus elementos se forman por pares de clave-valor, en el que la clave corresponde al nombre con el cual se accederá al elemento que no necesariamente debe ser un número y el valor al elemento en sí.

Así, podemos obtener un array en el que una clave se asocia a su valor.

Sintaxis de un array asociativa

La sintaxis de una matriz asociativa también se crea mediante la función array(), pero a diferencia de una array indexada, sus elementos separados por comas conformados por el par clave-valor, deben separarse por los carácteres "=>". Ejemplo:

 array(
 'clave uno' => 'valor uno',
 "clave dos" => "valor dos",
 $elemento_tres => 'valor 3',
 'clave 4' => $valor_4
 ) 

Donde cada valor puede obtenerse mediante el nombre de la variable que contenga al array y la clave correspondiente.

 $nombre_del_array["valor dos"] 

Ejemplo de array asociativa

Aquí veremos un ejemplo para dejar más claro el uso de una matriz asociativa.

Ejemplo PHP:

 <?php
 
 $mineral = array(
 'dorado' => 'Oro',
 'plateado' => 'Plata',
 'brillante' => 'Diamante',
 'negro' => 'Carbón'
 );
 echo $mineral['brillante'];
 
 ?> 

Resultado PHP:

Diamante

Así, podemos obtener y trabajar la nueva variable que se ha generado por el array, siempre y cuando la clave encerrada entre corchetes exista dentro del array.

Aprende a utilizar las arrays indexadas del lenguaje PHP, ordenando los elementos de un array mediante números.

Las arrays indexadas son el tipo de matrices que más se utilizan, en las cuales el valor del primer elemento equivale a cero, y los demás siempre aumentan en una unidad.

Así, podemos obtener un conjunto de elementos ordenados desde cero hasta un determinado valor, que dependerá del número de elementos que se dispongan en dicha matriz.

Sintaxis de un array indexada

La sintaxis de una matriz indexada se crea mediante la función array(), en la cual sus elementos deben separarse por comas (,) y pueden ser cadenas, números o variables siempre respetando la sintaxis básica de ellos. Un ejemplo de solo un array con sus respectivos elementos sería:

 array('elemento', "otro elemento", $elemento_tres, 'elemento 4') 

Donde el valor del primer elemento llamado 'elemento' es 0, el del segundo 'otro elemento' es 1, el de $elemento_tres es 2 y el de 'elemento 4' es 3.

Esto puede escribirse de la siguiente forma para ver la equivalencia entre los elementos y sus valores:

 array(
 0 => 'elemento',
 1 => "otro elemento",
 2 => $elemento_tres,
 3 => 'elemento 4'
 ) 

Así, podemos obtener un elemento de la matriz mediante la variable que contenga al array y el valor del elemento.

 $nombre_del_array[2] 

Ejemplo de array indexada

Una matriz que tenga, por ejemplo, 5 elementos, se ordenará desde 0 hasta 4. Lo veremos en el siguiente ejemplo en el que también se obtendrá un valor del array.

Ejemplo PHP:

 <?php
 
 $ciudad = array('Santiago', 'Madrid', 'New York', 'París', 'Berlín');
 echo $ciudad[3];
 // El número entre corchetes indica el número del elemento
 
 ?> 

Resultado PHP:

París

Así, podemos obtener y trabajar la nueva variable que se ha generado por el array, siempre y cuando el número entre corchetes esté dentro del rango de elementos disponibles.

Aprende a utilizar las arrays indexadas del lenguaje PHP, ordenando los elementos de un array mediante números.

Las arrays indexadas son el tipo de matrices que más se utilizan, en las cuales el valor del primer elemento equivale a cero, y los demás siempre aumentan en una unidad.

Así, podemos obtener un conjunto de elementos ordenados desde cero hasta un determinado valor, que dependerá del número de elementos que se dispongan en dicha matriz.

Sintaxis de un array indexada

La sintaxis de una matriz indexada se crea mediante la función array(), en la cual sus elementos deben separarse por comas (,) y pueden ser cadenas, números o variables siempre respetando la sintaxis básica de ellos. Un ejemplo de solo un array con sus respectivos elementos sería:

 array('elemento', "otro elemento", $elemento_tres, 'elemento 4') 

Donde el valor del primer elemento llamado 'elemento' es 0, el del segundo 'otro elemento' es 1, el de $elemento_tres es 2 y el de 'elemento 4' es 3.

Esto puede escribirse de la siguiente forma para ver la equivalencia entre los elementos y sus valores:

 array(
 0 => 'elemento',
 1 => "otro elemento",
 2 => $elemento_tres,
 3 => 'elemento 4'
 ) 

Así, podemos obtener un elemento de la matriz mediante la variable que contenga al array y el valor del elemento.

 $nombre_del_array[2] 

Ejemplo de array indexada

Una matriz que tenga, por ejemplo, 5 elementos, se ordenará desde 0 hasta 4. Lo veremos en el siguiente ejemplo en el que también se obtendrá un valor del array.

Ejemplo PHP:

 <?php
 
 $ciudad = array('Santiago', 'Madrid', 'New York', 'París', 'Berlín');
 echo $ciudad[3];
 // El número entre corchetes indica el número del elemento
 
 ?> 

Resultado PHP:

París

Así, podemos obtener y trabajar la nueva variable que se ha generado por el array, siempre y cuando el número entre corchetes esté dentro del rango de elementos disponibles.

Aprende a utilizar las arrays o matrices en PHP, una estructura impresindible para programar en PHP y otros lenguajes.

Un Array o Matriz (en español, también llamados 'tablas' o 'arreglos') es un tipo de estructura que almacena y ordena un conjunto de datos bajo un mismo nombre, al cual posteriormente en PHP se le darán diferentes usos para sus diferentes elementos.

Existen diferentes tipos de arrays que veremos en detalle: idexadas que son las más comunes, asociativas y multidimensionales.

• Arrays asociativas
• Arrays multidimensionales
• Arrays indexadas

Puede encontrar mucha más información para trabajar con funciones en sus arrays en la documentación oficial de PHP.net.

Hola me di cuenta que si creo una hoja de estilo dinámicamente en PHP y la pongo en firefiox no funciona :( y en internet explorer si.

Así llamo a la hoja de estilo:

<link href="Estilo.php?nombre=yo" type="text/css" rel="stylesheet" media="screen" />

Otra opcion fue llamar al .htaccess

Intente usar el archivo .htaccess para cambiar la extensión del archivo pero no funciono en firefox no se ve

// Llamamos la hoja de estilo

<link href="nombre_Estilo.css" type="text/css" rel="stylesheet" media="screen" />

 //Archivo .htaccess

RewriteRule (.*)_Estilo\.css$ Estilo.php?nombre=$1 [L]

AYUDA A MI =)

Nota mi hoja de estilo es compatible con todos los exploradores.

También pueden crear su propia hoja de estilo en php ya llamarla como yo la puse y van a ver el problema de firefox.

SI ALGUIEN PUEDE AYUDARME SE LOS AGREDECERIA.

Hola me di cuenta que si creo una hoja de estilo dinámicamente en PHP y la pongo en firefiox no funciona :( y en internet explorer si.

Así llamo a la hoja de estilo:

<link href="Estilo.php?nombre=yo" type="text/css" rel="stylesheet" media="screen" />

Otra opcion fue llamar al .htaccess

Intente usar el archivo .htaccess para cambiar la extensión del archivo pero no funciono en firefox no se ve

// Llamamos la hoja de estilo

<link href="nombre_Estilo.css" type="text/css" rel="stylesheet" media="screen" />

 //Archivo .htaccess

RewriteRule (.*)_Estilo\.css$ Estilo.php?nombre=$1 [L]

AYUDA A MI =)

Nota mi hoja de estilo es compatible con todos los exploradores.

También pueden crear su propia hoja de estilo en php ya llamarla como yo la puse y van a ver el problema de firefox.

SI ALGUIEN PUEDE AYUDARME SE LOS AGREDECERIA.

Se trata simplemente de aplicar un outline visible a todos los elementos del CSS, de la forma:

* { outline: 1px dotted #CCC; }

De esta manera se marcarán todos los elementos como divs, párrafos, listas, campos de formularios y todo lo que se tenga presente en el documento con una linea de tamaño 1 pixel con color hexadecimal #CCCCCC (gris claro) y que no se suma a los tamaños establecidos.

Así puedes observar qué elementos están desalineados o tienen menos separación que otros cuando pensabas que todo estaba perfectamente maquetado.

Aprende a utilizar la estructura if-else en PHP, quien nos permite determinar si se cumple (if) o no (else) una condición.

La famosa estructura de control if-else permite ejecutar trozos de código según la condición que se aplique (que incluye variables). La parte de if indica que la condición se cumple, y por lo tanto, su trozo de código se ejecuta. Por el otro lado, else indica que la condición no se cumple, y por ello su trozo de código se ejecuta.

Ninguna de estas dos estructuras pueden ocurrir al mismo tiempo y solo puede ocurrir una. Else puede no definirse, por lo tanto su valor correspondería a vacío.

Su sintaxis es particular: Seguido de if se escribe la condición entre paréntesis (( y )) y cada trozo de código de if y else se encierran entre llaves ({ y }) sin terminar la línea fuera de ellas con un punto y coma (;).

Ejemplo PHP:

 <?php
 if ( $alfa > $beta ) {
 echo "Correcto";
 } else {
 echo "Incorrecto";
 }
 ?> 

En este caso de condición numérica (porque una letra no puede ser menor o mayor a otra), se leería: Si la variable alfa es mayor a la variable beta, ocurrirá la impresión de la cadena 'Correcto', de lo contrario, ocurrirá la impresión de la cadena 'Incorrecto'.

Existen muchos tipos de funciones para crear condiciones como isset(), eregi() o file_exists().

Ahora veremos un ejemplo de comprobación de variable con la función isset(), en el que si la variable existiese, se ejecutará el código de if, si no, el de else.

Ejemplo PHP:

 <?php
 $lorem_ipsum = "Lorem ipsum dolor sit amet.";
 
 if ( isset($lorem_ipsum) ) {
 echo "La variable $lorem_ipsum si existe.";
 } else {
 echo "La variable $lorem_ipsum no existe.";
 }
 ?> 

Resultado PHP:

La variable $lorem_ipsum si existe.

Generalmente, esta función se utiliza para comprobar si los campos de formulario están definidos mediante la variable $_POST[] o $_GET[].

No hay duda de que sea difícil empezar algo desde cero. Quizás el tema del Diseño y el Desarrollo Web también está dentro del saco, pero solo leyendo, entendiendo, investigando y experimentando se aprende al igual que cualquier otro tema. Esa no es la razón de esta guía, pues eso es lo que tú por tu propia cuenta debes hacer. Nosotros podemos ofrecerte todo el material y ayuda que desees, pero sin tu parte, el tema no sería tan interesante como ya lo es.

El propósito es, que esta lectura sea lo primero que leas antes de lanzarte a la aventura. Vamos a empezar de lo más básico hasta irnos por las ramas.

1. Diseño Web

El diseño web agrupa diversas tecnologías y técnicas que deberemos dominar en el tiempo para crear páginas web, y con ellas, un sitio web. Estas no se aprenden de un día para otro, ni las encontrarás inmediatamente. Aunque todos los conceptos estén agrupados, algunos deben aprenderse antes que otros debido a su complejidad y jerarquía.

2. Sitio web

Es el conjunto de páginas web y archivos enlazados entre sí bajo un nombre de dominio como www.google.com o www.documentoweb.com. Cada sitio en Internet está alojado o hosteado en alguna computadora a la que llamamos el servidor o hosting.

3. Página Web

Es la principal forma que da vida a internet. Corresponde a una plana que contiene diversos elementos insertados, primordialmente:

• Información
• Enlaces

Solo he puesto dos, porque realmente solo esto es lo que se rescata para darle sentido a un sitio: La información porque sin ella no habría sentido en entrar a algún sitio (principio básico, y muchas veces se olvida de ello) y los enlaces porque sin ellos nos quedaríamos estancados en lo primero que vemos quitándonos la valiosa navegación.

De forma secundaria, podemos encontrar:

• Imágenes
• Vídeos
• Archivos
• Y todo tipo de formatos multimedia

Esto último también es importante ya que da el apoyo para lo primero. Ya sea visual, audiovisual o cualquier tipo de apoyo en otro formato como PDFs o animaciones Flash, nos sube de forma muy agradable la experiencia dentro de cualquier sitio. ¡Navegar solo con texto es aburrido no?

Detrás de una página web, existe toda una estructura y códigos (invisibles hasta ahora) a seguir para lograr mostrar todo lo mencionado y mucho más.

4. Estructura de una Página Web

Ya tenemos los conceptos básicos y necesarios, ahora veremos la parte más técnica como mencionamos en el punto 1 y al final del 3.

Una página web se crea con diversos códigos. El primero se llama HTML, el "esqueleto" de una página web. El segundo es el CSS, quien le da todo el estilo a este esqueleto.

4.1. HTML

El HTML es un lenguaje de marcas. Identifica cada elemento dentro de la página web con su significado. Para dar ejemplos concretos: marca qué parte del texto escrito es el título, cual parte es un párrafo, dónde estan los enlaces, cual es una lista de items, donde está una imagen o un formulario. Todos estos elementos y muchos más son parte del HTML, que se pueden escribir y configurar a nuestro antojo dentro de la página.

El lenguaje puede ser leído por cualquier medio, ya sean los distintos navegadores que existen en internet, el de tu teléfono móvil o algunos que ni siquiera se ven, como los lectores de pantalla, el mismísimo Google que recopila datos de las páginas o un futuro software o hardware. Por ello, es indispensable utilizar correctamente el lenguaje, utilizar cada cosa para lo que fue hecha y no para el uso que estimes conveniente, ya que en un futuro, ese código mal configurado acarreará consecuencias.

Hoy en día el HTML ha evolucionado. Ya hemos pasado la versión del HTML 4 y actualmente nos encontramos en la versión del XHTML 1.0 (podría decirse un HTML extendido) que es la que oficialmente se recomienda. En el futuro, el nuevo HTML será el HTML5 (o bien eso es lo que queremos) que está en fase experimental y tiene muchas cosas prometedoras (pero no nos saldremos de nuestras casillas).

4.2. CSS

El CSS es otro lenguaje y complementa al anterior, identifica los elementos del HTML para otorgarles una apariencia y así lograr una agradable presentación.

El llamado estilo CSS se crea en una Hoja de estilo, un documento independiente del documento HTML. Esta es una de las grandes ventajas, pues, al modificar tu hoja para cambiar alguna apariencia que ya no te ha gustado, esta se aplicará en todas las páginas que la tengan enlazada (y pueden ser millones).

Aunque los antiguos navegadores que aún se utilizan no respetan bien la sintaxis de nuestro código CSS, es indispensable para un diseñador dominar las técnicas para lograr buenos resultados y en todos los navegadores que el mundo utiliza.

En la actualidad nos encontramos con la versión CSS 2.1, aunque solo la llamamos CSS. Está en implementación el CSS3 que es bastante prometedor, pero aún no es soportado por todos los navegadores webs, así que nos quedaremos y bastará con el mencionado.

5. Ideologías y técnicas

Si bien luego de aprender estos dos maravillosos lenguajes complementarios, no basta para completar un sitio. Se necesitan ciertos conocimientos como base para empezar a trabajar con ellos, tales como:

• Accesibilidad
• Usabilidad
• Experiencia del usuario
• Cross-browser
• Web 2.0

5.1. Accesibilidad

Se refiere a que no se restrinja el acceso a un sitio web. Que cualquier persona incluso con discapacidades de cualquier tipo, pueda tener el acceso.

Este principio es usado por todo el mundo y la web no se queda afuera. Quizás has notado que en los costados de las escaleras hay subidas planas (sin escalones) con barandas, que en los baños hay uno mucho mas grande con barandas o que en el autobús siempre hay reservado un asiento para personas con discapacidades.

Ya sea por ceguera, daltonismo, discapacidades motrices, el dispositivo que se use o incluso la edad, nuestro deber como diseñador es que ninguna persona se quede afuera, que el diseño no sea débil y que sea útil para nuestros usuarios o clientes. Para ello el uso óptimo del XHTML y CSS es extremadamente esencial.

Un sitio debe poder utilizarse en las condiciones más extremas: como sin javascript, sin imagenes o incluso sin hoja de estilo.

5.2 Usabilidad

El uso óptimo de la navegación dentro del sitio, la facilidad con que se llega a alguna parte de él o lo resumido que están sus contenidos ofreciendo más, es parte de esta técnica llamada usabilidad, que no es más como la palabra lo dice.

Si nuestros visitantes pueden llegar a algún contenido de nuestro sitio con muy pocos clics, se dice que es usable. Si completaron un formulario sin complicaciones, también se dice que es usable. Si leyeron un texto en 5 segundos, se dice lo mismo. Si tuvieron que esperar una semana para recibir un "no" como respuesta, eso no sería nada de usable.

El término se relaciona mucho con la facilidad, la intuitividad y la efectividad. No aburrir a alguien dándole lo que quiere de una forma muy fácil y que no se necesite explicar es muy cómodo para el visitante, y también para tí.

5.3. Experiencia del usuario

Se relaciona mucho con la usabilidad. A medida que un visitante navega por tu sitio, reconoce y va aprendiendo como funciona.

Entregarle nuevas cosas cuando el hace clic sobre algo o invitarlo y conversar con el hará que su experiencia sea maravillosa, que se sienta como en casa desde la primera vez que entra en el sitio.

Cuando alguien abandona tu sitio, debe llevarse una muy buena impresión y saber bien qué te ofrecía aquel sitio, para contarle a sus amigos o sus colegas empresarios, que se yo.

5.4. Cross-browser

Ya nos topamos con este tema. Se refiere a diseñar para todos los navegadores sin exclusión de alguno.

Para lograrlo debemos dominar el CSS, saber los defectos de los navegadores, sobre el uso correcto de las tipografías o los formatos de imagen que son admitidos por ejemplo.

5.5. Web 2.0

Uno de los puntos más importantes es este. Si bien la web 2.0 no se puede definir específicamente se puede tratar. Me gusta explicarla como una ideología, ya que es un conjunto de ideas para sacarle provecho a las nuevas tecnologías web sobre nuestro sitio más el uso por sus usuarios.

En una Web 2.0 existe una multidirección de información. Si antes una persona o un grupo selecto de ellas administraba un sitio subiendo contenidos, hoy ocurre algo distinto: todas las personas forman la web.

Alguna vez dije que la web 2.0 fue causada por el campo de formulario, y sigo pensándolo. Un campo de formulario del HTML permite a una persona escribir, y ello conduce a usar sus escritos para formar un sitio web completo y dinámicamente, que crece con la comunidad de personas.

6. Más allá del diseño: el Desarrollo Web

Detrás del diseño y su estructura hay algo aún más importante: se trata del Desarrollo Web. 

Este término se emplea para el uso de las tecnologías del lado del servidor y del cliente que involucran algunos o muchos procesos a fin de realizar tareas para el usuario o simplemente mostrar información.

Por el lado del servidor se refiere a aquellos lenguajes que actúan y son interpretados desde la computadora (el servidor) y que arrojan un resultado para que sea leído por el navegador. Entre los más usados y en la mejor combinación está el PHP y el SQL.

Por el lado del cliente se refiere a aquellos que actúan en el navegador (el cliente) donde su interpretación depende totalmente de él (y de ningún estándar). Sin duda aquí entra aquí el JavaScript.

6.1. PHP

Es uno de los grandes lenguajes de programación. Se caracteriza por su dinamismo y flexibilidad.

PHP interpreta el código y entrega un resultado, por defecto en HTML. Se utiliza principalmente para captar y jugar con los datos dentro de una página en conjunto de una base de datos. Para explicarme mejor, podemos por ejemplo guardar los datos de un formulario de registro y posteriormente mostrarlos en una tabla del HTML en el orden y con los datos que quisiésemos, o guardar un comentario y mostrarlo si se cumple una fecha determinada. También validar un formulario si no se escribe un campo o mostrar resultados según la URL de la página.

En fin, podemos crear infinidades de cosas con el y cuando se domina, tenemos una gran herramienta de trabajo con la que sería innecesario crear tantas páginas en HTML cuando podemos hacerla con un poco de PHP.

PHP es algo mayor, no lo recomiendo para aprenderlo en conjunto del HTML y CSS. Primero se debería dominar muy bien ambos para lanzarse a este nuevo nivel. 

6.2. MySQL

MySQL es un gestor de bases de datos basado en el lenguaje SQL. Es una muy buena ayuda visual con toda su interfaz gráfica para entender como funciona y se estructuran todas las bases de datos.

En conjunto de PHP es tremendamente poderoso: nos entrega organización y mucha más flexibilidad en la obtención de datos por medio de ambos lenguajes.

El SQL un lenguaje muy simple comparado con PHP, y lo recomiendo enormemente trabajarlo en conjunto asi como se hace con el HTML y el CSS.

6.3. JavaScript

JavaScript nos permite controlar con dinamismo la experiencia dentro del sitio modificando o agregando elementos dentro del código HTML como efectos visuales o manipulación de los elementos.

El uso de JavaScript está presente en todos lados, siendo el AJAX su nueva implementación. Ajax nos permite manejar ciertas cosas dentro de una página web sin recargar la misma, siendo esto una muy buena experiencia para el visitante.

Existen muchas librerías que nos permiten usar JavaScript de forma muy fácil, y que se han dedicado para que los resultados sean los mismos en todos los navegadores (recordar javascript es interpretado con diferencias en cada navegador, pues no es un estándar).

Si utilizas JavaScript, asegúrate de que no sea intrusivo, es decir que aunque lo eliminemos, el sitio siga funcionando perfectamente [accesibilidad]. No todo en el mundo usa o tiene JavaScript.

7. ¿Quién está detrás de todo esto?

La organización que implementa el HTML, el CSS y otros lenguajes, es el consorcio de la red global mundial o W3C, quien pone todas las normas a seguir y es nuestra autoridad en la web. Ellos nos ofrecen materiales y herramientas que podemos usar para construir nuestros sitios.

La organización de PHP es otra, ubicada en PHP.net quien nos ofrece toda su documentación al igual que MySQL.

8. Software

Existe distinto software para crear todo lo mencionado. Pero, algunos crean demasiado, siendo que el aprendizaje no evolucione mucho que digamos.

• Procesadores de texto actuales además de permitirnos escribir y guardar archivos en muchos formatos, nos ayudan visualmente coloreando la sintaxis de los lenguajes. Tales como Notepad++ o alguno otro gratuito.
• Software de "Diseño Web" te permiten "diseñar" páginas web de forma automática, sin mucha interferencia tuya. He aquí un programa que a muchos les duele (incluyéndome): el llamado Dreamweaver. Si realmente deseas aprender, no lo utilices.
• Navegadores Web los necesitas todos ya que tus diseños deben visualizarse correctamente (no necesariamente igual, pero sin errores) en todos ellos [cross-browser]. Existe IETester para comprobar diseños en las distintas versiones de Internet Explorer.
• Programa de diseño gráfico como Photoshop o Gimp para crea gráficos o editar imágenes.
• Apache XAMPP server u otro para utilizar PHP y MySQL.

Y no necesitas nada más, a excepción de Google.

Aprenda el funcionamiento de los operadores lógicos en PHP con ejemplos y a utilizarlos a voluntad.

Los operadores lógicos, nos permiten trabajar en la condición de alguna estructura del PHP para hacerla más específica, siempre y cuando se traten dos o más condiciones. Se pueden incluir por ejemplo, en la estructura if-else o los bucles. Así, podemos ahorrar mucho código fuente.

A continuación, se muestra una tabla con el operador lógico junto a su funcionamiento.

Cada uno de estos operadores se deben incluir entre las dos condiciones tratadas, las cuales podrían contener un operador condicional.

Operador and ó &&

El operador and ó && indica que ambas condiciones siempre deben cumplirse para ejecutar verdadero, de lo contrario, se ejecutará falso. No importa si escribimos and ó && porque son exactamente lo mismo.

Ejemplo PHP:

 <?php
 $cadena1 = "Lorem ipsum";
 $cadena2 = 24;
 if( $cadena1 == "Lorem ipsum" && $cadena2 >= 12 ) {
 // Si la variable $cadena1 es identica a "Lorem ipsum" y $cadena2 es mayor o igual a 12 se ejecutará verdadero, es decir, el código de IF y no de ELSE.
 echo "Correcto";
 } else {
 echo "Todo mal";
 }
 ?> 

Resultado PHP:

Correcto

Operador or ó ||

El operador or ó || indica que si una o ambas condiciones se cumplen, se ejecutará verdadero, de lo contrario, se ejecutará falso.

Ejemplo PHP:

 <?php
 $cadena1 = "Lorem ipsum";
 $cadena2 = 6;
 if( $cadena1 == "Lorem ipsum" || $cadena2 > 12 ) {
 // Si la variable $cadena1 es identica a "Lorem ipsum" y/ó $cadena2 es mayor a 12 se ejecutará verdadero.
 echo "Correcto";
 } else {
 echo "Todo mal";
 }
 ?> 

Resultado PHP:

Correcto

Operador xor

El operador xor indica que se debe cumplirse solo una condición para que se ejecute verdadero, de lo contrario, se ejecutará falso.

Ejemplo PHP:

<?php
 $cadena1 = "Lorem ipsum";
 $cadena2 = 546;
 if( $cadena1 == "Lorem ipsum" xor $cadena2 < 123 ) {
 // Si la variable $cadena1 es identica a "Lorem ipsum" ó $cadena2 es menor a 123 se ejecutará verdadero.
 echo "Correcto";
 } else {
 echo "Todo mal";
 }
 ?>

Resultado PHP:

Correcto

Aprende el funcionamiento de los operadores condicionales del PHP con ejemplos para utilizarlos a voluntad.

Los operadores condicionales nos permiten trabajar en la condición de alguna estructura del PHP. Se pueden incluir por ejemplo, en la estructura if-else o los bucles para especificar como se debe cumplir dicha condición.

A continuación, se muestra una tabla con el operador condicional junto a su funcionamiento.

Estos operadores son fáciles de utilizar, pues sus funciones son de matemática simple. El operador == indica que dos variables son identicas, el != indica que son completamente contrarios. Por otro lado, el < indica menor que, <= menor o igual que, > mayor que y >= mayor o igual que. Veremos tan solo un ejemplo de este tipo para ver su funcionamiento.

Ejemplo PHP:

<?php

$cadena = 24;

if( $cadena <= 88 ) {
   // Si la variable $cadena es mayor o igual a 88 se ejecutará "verdadero"
   echo "Correcto";
} else {
   // Si la variable $cadena es menor a 88 se ejecutará "falso"
   echo "Todo mal";
}

 ?> 

Resultado PHP:

Correcto

Los operadores de asignación, al igual que los aritméticos en el PHP nos permiten trabajar matemáticamente con valores numéricos, y a diferencia de éste, también se puede trabajar con cadenas compuestas por cualquier carácter.

En este tipo de operaciones, a la variable que participa en la izquierda en dicha operación se le asigna el valor resultante.

A continuación, se muestra una tabla con el operador de asignación junto a su funcionamiento.

Operador de asignación básico

El primer operador =, lo hemos visto desde un principio, pues participa en la sintaxis básica y necesaria del lenguaje PHP.

Podemos asignar el valor de una variable a otra las veces que queramos.

Ejemplo PHP:

 <?php
 $cadena_uno = "Lorem Ipsum";
 $cadena_dos = $cadena_uno;
 $cadena_tres = $cadena_dos;
 echo $cadena_tres;
 ?> 

Resultado PHP:

Lorem Ipsum

En este ejemplo, el valor de la variable $cadena_uno ("Lorem Ipsum") se le asigna como valor a la variable $cadena_dos, y esta última le asigna su valor a la variable $cadena_tres, por lo que $cadena_tres ha heredado el valor de $cadena_uno.

Operadores de asignación aritméticos

En estos operadores híbridos (también un término mío), partes de asignación y parte aritmético, nos permiten hacer operaciones matemáticas mediante su particular sintaxis. En el ejemplo, utilizaremos una división por ser no-conmutativa (que importa el orden).

Ejemplo PHP:

 <?php
 $uno=27; 
 $dos=3; 
 $uno/=$dos; 
 echo $uno;
 ?> 

Resultado PHP:

9

En este ejemplo, la variable $uno que participa en la cuarta línea y que tiene como valor 27, se le asigna el valor obtenido de 27/3, y por ello la cadena resultante es 9.

Operador de asignación para concatenar

El operador .= es muy utilizado en los bucles, ya que permite concatenar (o unir) una cadena de carácteres. Por ahora, veremos solo como funciona.

Ejemplo PHP:

 <?php
 $cadena_uno = "Lorem ipsum"; 
 $cadena_dos = " dolor sit amet"; 
 $cadena_uno .= $cadena_dos; 
 echo $cadena_uno;
 ?> 

Resultado PHP:

Lorem ipsum dolor sit amet

Al igual que en los operadores anteriores, la variable $cadena_uno que participa en la cuarta línea y que tiene como valor Lorem Ipsum, se le asigna el valor obtenido de "Lorem Ipsum" concatenado a " dolor sit amet" (que es igual a "Lorem ipsum"." dolor sit amet"), y por ello la cadena resultante es "Lorem ipsum dolor sit amet".

Los operadores de asignación, al igual que los aritméticos en el PHP nos permiten trabajar matemáticamente con valores numéricos, y a diferencia de éste, también se puede trabajar con cadenas compuestas por cualquier carácter.

En este tipo de operaciones, a la variable que participa en la izquierda en dicha operación se le asigna el valor resultante.

A continuación, se muestra una tabla con el operador de asignación junto a su funcionamiento.

Operador de asignación básico

El primer operador =, lo hemos visto desde un principio, pues participa en la sintaxis básica y necesaria del lenguaje PHP.

Podemos asignar el valor de una variable a otra las veces que queramos.

Ejemplo PHP:

 <?php
 $cadena_uno = "Lorem Ipsum";
 $cadena_dos = $cadena_uno;
 $cadena_tres = $cadena_dos;
 echo $cadena_tres;
 ?> 

Resultado PHP:

Lorem Ipsum

En este ejemplo, el valor de la variable $cadena_uno ("Lorem Ipsum") se le asigna como valor a la variable $cadena_dos, y esta última le asigna su valor a la variable $cadena_tres, por lo que $cadena_tres ha heredado el valor de $cadena_uno.

Operadores de asignación aritméticos

En estos operadores híbridos (también un término mío), partes de asignación y parte aritmético, nos permiten hacer operaciones matemáticas mediante su particular sintaxis. En el ejemplo, utilizaremos una división por ser no-conmutativa (que importa el orden).

Ejemplo PHP:

 <?php
 $uno=27; 
 $dos=3; 
 $uno/=$dos; 
 echo $uno;
 ?> 

Resultado PHP:

9

En este ejemplo, la variable $uno que participa en la cuarta línea y que tiene como valor 27, se le asigna el valor obtenido de 27/3, y por ello la cadena resultante es 9.

Operador de asignación para concatenar

El operador .= es muy utilizado en los bucles, ya que permite concatenar (o unir) una cadena de carácteres. Por ahora, veremos solo como funciona.

Ejemplo PHP:

 <?php
 $cadena_uno = "Lorem ipsum"; 
 $cadena_dos = " dolor sit amet"; 
 $cadena_uno .= $cadena_dos; 
 echo $cadena_uno;
 ?> 

Resultado PHP:

Lorem ipsum dolor sit amet

Al igual que en los operadores anteriores, la variable $cadena_uno que participa en la cuarta línea y que tiene como valor Lorem Ipsum, se le asigna el valor obtenido de "Lorem Ipsum" concatenado a " dolor sit amet" (que es igual a "Lorem ipsum"." dolor sit amet"), y por ello la cadena resultante es "Lorem ipsum dolor sit amet".

Los operadores de asignación, al igual que los aritméticos en el PHP nos permiten trabajar matemáticamente con valores numéricos, y a diferencia de éste, también se puede trabajar con cadenas compuestas por cualquier carácter.

En este tipo de operaciones, a la variable que participa en la izquierda en dicha operación se le asigna el valor resultante.

A continuación, se muestra una tabla con el operador de asignación junto a su funcionamiento.

Operador de asignación básico

El primer operador =, lo hemos visto desde un principio, pues participa en la sintaxis básica y necesaria del lenguaje PHP.

Podemos asignar el valor de una variable a otra las veces que queramos.

Ejemplo PHP:

 <?php
 $cadena_uno = "Lorem Ipsum";
 $cadena_dos = $cadena_uno;
 $cadena_tres = $cadena_dos;
 echo $cadena_tres;
 ?> 

Resultado PHP:

Lorem Ipsum

En este ejemplo, el valor de la variable $cadena_uno ("Lorem Ipsum") se le asigna como valor a la variable $cadena_dos, y esta última le asigna su valor a la variable $cadena_tres, por lo que $cadena_tres ha heredado el valor de $cadena_uno.

Operadores de asignación aritméticos

En estos operadores híbridos (también un término mío), partes de asignación y parte aritmético, nos permiten hacer operaciones matemáticas mediante su particular sintaxis. En el ejemplo, utilizaremos una división por ser no-conmutativa (que importa el orden).

Ejemplo PHP:

 <?php
 $uno=27; 
 $dos=3; 
 $uno/=$dos; 
 echo $uno;
 ?> 

Resultado PHP:

9

En este ejemplo, la variable $uno que participa en la cuarta línea y que tiene como valor 27, se le asigna el valor obtenido de 27/3, y por ello la cadena resultante es 9.

Operador de asignación para concatenar

El operador .= es muy utilizado en los bucles, ya que permite concatenar (o unir) una cadena de carácteres. Por ahora, veremos solo como funciona.

Ejemplo PHP:

 <?php
 $cadena_uno = "Lorem ipsum"; 
 $cadena_dos = " dolor sit amet"; 
 $cadena_uno .= $cadena_dos; 
 echo $cadena_uno;
 ?> 

Resultado PHP:

Lorem ipsum dolor sit amet

Al igual que en los operadores anteriores, la variable $cadena_uno que participa en la cuarta línea y que tiene como valor Lorem Ipsum, se le asigna el valor obtenido de "Lorem Ipsum" concatenado a " dolor sit amet" (que es igual a "Lorem ipsum"." dolor sit amet"), y por ello la cadena resultante es "Lorem ipsum dolor sit amet".

Quizás este es un problema que nos ha causado un gran dolor de cabeza y por el cual muchos programadores (incluyéndome) ya han pasado o lo están haciendo. Se trata de la codificación de caracteres: cuando nos aparecen esos caracteres extraños y que no deberían estar ahí.

Primero que nada, hay que tener claro las diferencias de cada una de las codificaciones más utilizadas y que más acarrea a este problema.

¿UTF-8 o ISO-8859-1?

• La codificación UTF-8 corresponde a un juego de caracteres universales, contiene signos de la mayoría de los lenguajes del mundo.
• Por otro lado ISO-8859-1 maneja caracteres del lenguaje latino como el español, portugués, alemán, francés y otros.

Técnicamente cualquiera de las codificaciones nos sirve, ya que a nivel de nuestro uso en las páginas webs, al comparar una codificación con la otra en el tamaño de los bits que son transferidos, es demasiado inferior para decir cual es la mejor.

Preferentemente, yo elijo UTF-8 por seguir la línea y el posicionamiento que ha tomado esta codificación sobre la gran mayoría de sitios que existen. Esto ha acarreado otras cosas, por ejemplo, que existan sitios que al obtiener la información de tu sitio, surge el famoso problema al mostrarla por no ser compatibles con tu codificación.

La solución

La solución al problema radica al momento de guardar el archivo. Si en el <meta> del <head> especificas una codificación, esta debe coincidir con la cual codificas tu archivo.

Es muy simple, pero cuesta descifrarlo. Quizá con algo de experimentación te darás cuenta de que trata.

Solución a la codificación UTF-8

Metatag en la cabecera del HTML (entre <head> y </head>):

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Codificación al momento de guardar tu archivo: UTF-8.

Si existe la opción UTF-8 sin bom, úsala. En mi experiencia he tenido problemas sin esta opción con archivos PHP independientes que se conectan a través de la función include().

Solución a la codificación ISO-8859-1

Metatag en la cabecera del HTML (entre <head> y </head>):

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

Codificación al momento de guardar tu archivo: ANSI.

Aclaraciones

No es necesario utilizar las entidades HTML para lograr lo que se quiere a exepción de &gt;, &lt; y &quot; que pueden interferir en la sintaxis del mismo. Lo menciono porque algunos las utilizan convirtiendo todos sus textos para dar solución al problema erróneamente.

En conclusión: Asegura que la codificación del archivo guardado coincida con la especificada en el metatag. Puedes usar todos los acentos y caracteres extraños que quieras.

Estas condiciones valen para cualquier tipo documento.

Quizás este es un problema que nos ha causado un gran dolor de cabeza y por el cual muchos programadores (incluyéndome) ya han pasado o lo están haciendo. Se trata de la codificación de caracteres: cuando nos aparecen esos caracteres extraños y que no deberían estar ahí.

Primero que nada, hay que tener claro las diferencias de cada una de las codificaciones más utilizadas y que más acarrea a este problema.

¿UTF-8 o ISO-8859-1?

• La codificación UTF-8 corresponde a un juego de caracteres universales, contiene signos de la mayoría de los lenguajes del mundo.
• Por otro lado ISO-8859-1 maneja caracteres del lenguaje latino como el español, portugués, alemán, francés y otros.

Técnicamente cualquiera de las codificaciones nos sirve, ya que a nivel de nuestro uso en las páginas webs, al comparar una codificación con la otra en el tamaño de los bits que son transferidos, es demasiado inferior para decir cual es la mejor.

Preferentemente, yo elijo UTF-8 por seguir la línea y el posicionamiento que ha tomado esta codificación sobre la gran mayoría de sitios que existen. Esto ha acarreado otras cosas, por ejemplo, que existan sitios que al obtiener la información de tu sitio, surge el famoso problema al mostrarla por no ser compatibles con tu codificación.

La solución

La solución al problema radica al momento de guardar el archivo. Si en el <meta> del <head> especificas una codificación, esta debe coincidir con la cual codificas tu archivo.

Es muy simple, pero cuesta descifrarlo. Quizá con algo de experimentación te darás cuenta de que trata.

Solución a la codificación UTF-8

Metatag en la cabecera del HTML (entre <head> y </head>):

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Codificación al momento de guardar tu archivo: UTF-8.

Si existe la opción UTF-8 sin bom, úsala. En mi experiencia he tenido problemas sin esta opción con archivos PHP independientes que se conectan a través de la función include().

Solución a la codificación ISO-8859-1

Metatag en la cabecera del HTML (entre <head> y </head>):

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

Codificación al momento de guardar tu archivo: ANSI.

Aclaraciones

No es necesario utilizar las entidades HTML para lograr lo que se quiere a exepción de &gt;, &lt; y &quot; que pueden interferir en la sintaxis del mismo. Lo menciono porque algunos las utilizan convirtiendo todos sus textos para dar solución al problema erróneamente.

En conclusión: Asegura que la codificación del archivo guardado coincida con la especificada en el metatag. Puedes usar todos los acentos y caracteres extraños que quieras.

Estas condiciones valen para cualquier tipo documento.

Quizás este es un problema que nos ha causado un gran dolor de cabeza y por el cual muchos programadores (incluyéndome) ya han pasado o lo están haciendo. Se trata de la codificación de caracteres: cuando nos aparecen esos caracteres extraños y que no deberían estar ahí.

Primero que nada, hay que tener claro las diferencias de cada una de las codificaciones más utilizadas y que más acarrea a este problema.

¿UTF-8 o ISO-8859-1?

• La codificación UTF-8 corresponde a un juego de caracteres universales, contiene signos de la mayoría de los lenguajes del mundo.
• Por otro lado ISO-8859-1 maneja caracteres del lenguaje latino como el español, portugués, alemán, francés y otros.

Técnicamente cualquiera de las codificaciones nos sirve, ya que a nivel de nuestro uso en las páginas webs, al comparar una codificación con la otra en el tamaño de los bits que son transferidos, es demasiado inferior para decir cual es la mejor.

Preferentemente, yo elijo UTF-8 por seguir la línea y el posicionamiento que ha tomado esta codificación sobre la gran mayoría de sitios que existen. Esto ha acarreado otras cosas, por ejemplo, que existan sitios que al obtiener la información de tu sitio, surge el famoso problema al mostrarla por no ser compatibles con tu codificación.

La solución

La solución al problema radica al momento de guardar el archivo. Si en el <meta> del <head> especificas una codificación, esta debe coincidir con la cual codificas tu archivo.

Es muy simple, pero cuesta descifrarlo. Quizá con algo de experimentación te darás cuenta de que trata.

Solución a la codificación UTF-8

Metatag en la cabecera del HTML (entre <head> y </head>):

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Codificación al momento de guardar tu archivo: UTF-8.

Si existe la opción UTF-8 sin bom, úsala. En mi experiencia he tenido problemas sin esta opción con archivos PHP independientes que se conectan a través de la función include().

Solución a la codificación ISO-8859-1

Metatag en la cabecera del HTML (entre <head> y </head>):

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

Codificación al momento de guardar tu archivo: ANSI.

Aclaraciones

No es necesario utilizar las entidades HTML para lograr lo que se quiere a exepción de &gt;, &lt; y &quot; que pueden interferir en la sintaxis del mismo. Lo menciono porque algunos las utilizan convirtiendo todos sus textos para dar solución al problema erróneamente.

En conclusión: Asegura que la codificación del archivo guardado coincida con la especificada en el metatag. Puedes usar todos los acentos y caracteres extraños que quieras.

Estas condiciones valen para cualquier tipo documento.

Mugtug nos trae dos herramientas web gratuitas para editar imágenes y dibujar: Darkroom y Sketchpad. Ambos funcionando sobre el navegador con HTML5 y principalmente canvas.

• Darkroom podría asemejarse a Photoshop y Gimp, te permite abrir una imagen de tu computadora para luego jugar con ella: modificar niveles de colores, cortar, rotar, aplicar filtros y otros.
• Sketchpad podría asemejarse a Paint, aunque algo mejor. Puedes crear figuras geométricas, escribir, pintar, aplicar degradados, transparencias y más. 

Qué fácil, genial para momentos en que necesitemos hacer algo en una computadora ajena.

Ir a mugtug, darkroom o a sketchpad.

Dos interesantes e-book desarrollados bajo licencia creative commons que tratan sobre la ideología de la Web 2.0: se trata de Web 2.0 de la fundación orange y Planeta Web 2.0 de PlanetaWeb2.

Perfectos para entender cómo desarrollar proyectos que cumplan las ideas de esta interesante idea de la nueva web.

Adicionalmente puedes ver este mapa de la Web 2.0 si deseas saber más acerca de esto término tan usado en este tiempo con ejemplos claros de sitios que pueden caber dentro del saco.

Para descargar estos dos e-book:

• Planeta Web 2.0
• Web 2.0

¿Qué más claro que el siguiente video para entender de qué trata la Licencia Creative Commons?. Mejor que leer, una entretenida animación flash muy informativa e inspiradora de la licencia Creative Commons con ejemplos más que reales.

Video desde cyber.law.harvard.edu.

Aprenda el funcionamiento de los operadores aritméticos en PHP con ejemplos y a utilizarlos a voluntad.

Los operadores aritméticos en el PHP nos permiten trabajar matemáticamente con valores númericos. Así, mediante reglas básicas aritméticas y la sintaxis del PHP podemos usar y realizar cálculos a voluntad con los valores obtenidos, por ejemplo, para sacar porcentajes, el IVA de un producto, la edad de una persona, utilizar fechas, y todo lo que se nos ocurra.

A continuación, se muestra una tabla con el operador aritmético junto a su funcionamiento.

Operadores aritméticos básicos

Esta es una clasificación propia, ya que la suma, resta, multiplicación y división son parte de nuestro lenguaje matemático básico y cotidiano. Veremos un ejemplo de estos operadores para dejar constancia de como se utilizan.

Ejemplo PHP:

 <?php
 $calculo1=12/4; // 12/4=3
 $calculo2=3*2; // 3*2=6
 $calculo3=20%3; // 20/3=6, resto=2
 echo $calculo1+$calculo2-$calculo3;
 ?> 

Resultado PHP:

7

Operadores aritméticos interesantes

Esta también es una clasificación propia, pues yo nunca había visto semejante sintaxis. Ésta es muy simple, una trata de sumar una unidad al valor y la otra, restar una. Me refiero a la sintaxis de $numero++ y $numero-- respectivamente, en la que la primera es equivalente a $numero=$numero+1 y la siguiente a $numero=$numero-1.

Ejemplo PHP

 <?php
 $numero=24;
 $numero++; // 24+1=25
 $numero--; // 25-1=24
 $numero++; // 24+1=25
 $numero++; // 25+1=26
 echo $numero;
 ?> 

Resultado PHP:

26

Ejemplo con todos los operadores

Ahora veremos todos los operadores aritméticos en un solo ejemplo.

Cuando utilizamos varios operadores en una línea, estos se ejecutan en forma lineal sin respetar reglas de prioridad matemática, de izquierda a derecha. Si queremos lograr alguna prioridad de algún calculo, debemos asociarlo entre paréntesis.

Ejemplo PHP

 <?php
 $uno = 1;
 $dos = 10%8; // 10/8=1, en lo que el resto es 2
 $tres = 3;
 $cuatro = 4;
 $uno++; // la variable $uno ahora vale 2, ya que 1+1=2
 $dos--; // la variable $dos ahora vale 1, ya que 2-1=1
 $calculo = $tres*($cuatro/$uno)-$dos+$cuatro;
 // Esto resulta ser 3*(4/2)-1+4
 echo $calculo;
 ?> 

Resultado PHP

9

Aprenda el funcionamiento de los operadores aritméticos en PHP con ejemplos y a utilizarlos a voluntad.

Los operadores aritméticos en el PHP nos permiten trabajar matemáticamente con valores númericos. Así, mediante reglas básicas aritméticas y la sintaxis del PHP podemos usar y realizar cálculos a voluntad con los valores obtenidos, por ejemplo, para sacar porcentajes, el IVA de un producto, la edad de una persona, utilizar fechas, y todo lo que se nos ocurra.

A continuación, se muestra una tabla con el operador aritmético junto a su funcionamiento.

Operadores aritméticos básicos

Esta es una clasificación propia, ya que la suma, resta, multiplicación y división son parte de nuestro lenguaje matemático básico y cotidiano. Veremos un ejemplo de estos operadores para dejar constancia de como se utilizan.

Ejemplo PHP:

 <?php
 $calculo1=12/4; // 12/4=3
 $calculo2=3*2; // 3*2=6
 $calculo3=20%3; // 20/3=6, resto=2
 echo $calculo1+$calculo2-$calculo3;
 ?> 

Resultado PHP:

7

Operadores aritméticos interesantes

Esta también es una clasificación propia, pues yo nunca había visto semejante sintaxis. Ésta es muy simple, una trata de sumar una unidad al valor y la otra, restar una. Me refiero a la sintaxis de $numero++ y $numero-- respectivamente, en la que la primera es equivalente a $numero=$numero+1 y la siguiente a $numero=$numero-1.

Ejemplo PHP

 <?php
 $numero=24;
 $numero++; // 24+1=25
 $numero--; // 25-1=24
 $numero++; // 24+1=25
 $numero++; // 25+1=26
 echo $numero;
 ?> 

Resultado PHP:

26

Ejemplo con todos los operadores

Ahora veremos todos los operadores aritméticos en un solo ejemplo.

Cuando utilizamos varios operadores en una línea, estos se ejecutan en forma lineal sin respetar reglas de prioridad matemática, de izquierda a derecha. Si queremos lograr alguna prioridad de algún calculo, debemos asociarlo entre paréntesis.

Ejemplo PHP

 <?php
 $uno = 1;
 $dos = 10%8; // 10/8=1, en lo que el resto es 2
 $tres = 3;
 $cuatro = 4;
 $uno++; // la variable $uno ahora vale 2, ya que 1+1=2
 $dos--; // la variable $dos ahora vale 1, ya que 2-1=1
 $calculo = $tres*($cuatro/$uno)-$dos+$cuatro;
 // Esto resulta ser 3*(4/2)-1+4
 echo $calculo;
 ?> 

Resultado PHP

9

Este pequeño artículo presenta la guía de optimización para motores búsqueda creada por el mismísimo Google para principiantes en español y formato PDF encontrada en el Centro de Herramientas para Webmasters.

La guía está bastante simple pero muy bien explicada y detallada, tiene mucho contenido sobre cómo describir bien el sitio web en el código fuente HTML.

Contenido destacado de esta guía SEO:

• Mejorar la etiqueta <title>
• Mejorar las metaetiquetas
• Mejorar la URL de los contenidos de las páginas
• Mejorar la navegación
• Mejorar los enlaces dentro de los contenidos
• Formas de escribir los contenidos
• Usar las cabeceras de forma correcta
• Mejorar las etiquetas de las imágenes con el atributo alt
• Usar el nofollow
• Usar robots.txt
• Prácticas para promocionar el sitio
• Recursos SEO adicionales

Como ven, tiene bastante contenido, y muy bueno. Ir a la guía SEO de google.

Tabla de contenidos de los distintos operadores usados en PHP: aritméticos, de asginación, lógicos y operadores condicionales.

Los operadores en PHP, nos permiten trabajar con valores, ya sea comparando, diferenciando, sumando, restando, multiplicando y/o haciendo diferentes operaciones con cadenas numéricas o alfanuméricas.

Operadores aritméticos

Podemos ver en detalle cada operador aritmético.

Operadores de asignación

Podemos ver en detalle cada operador de asignación.

Operadores condicionales

Podemos ver en detalle cada operador condicional.

Operadores lógicos

Podemos ver en detalle cada operador lógico.

Transformar las URLs de un sitio web ya sea para mejorar el SEO de nuestra web o la simple apariencia de la URL es tan fácil de lograr y no todo el mundo lo hace. Es una muy buena ventaja que debe ser aprovechada y que puede ser combinada a la perfección con el lenguaje PHP más el simple HTML.

El archivo llamado .htaccess de Apache es el encargado de esta magnificencia. Aparte de lograr restringir el acceso a archivos específicos o redireccionar URLs, en este artículo sólo veremos lo relacionado al reescribimiento de las URLs.

El .htaccess contiene su propia sintaxis. A continuación en el primer ejemplo, las dos primeras líneas son para activar el "reescribimiento" de las URLs. Luego, está escrita una regla a respetar con expresiones regulares para guiar a las URLs donde nosotros queremos. 

Options +FollowSymLinks
RewriteEngine on

RewriteRule ^(.*)/$ pagina.php?miurl=$1 [L]

Con esta regla, a páginas como www.example.com/pagina.php?miurl=miperfil ahora se podrán acceder como www.example.com/miperfil/.

Options +FollowSymLinks
RewriteEngine on

RewriteRule ^(.*)-(.*)/$ pagina.php?categoria=$1&subcategoria=$2 [L]
RewriteRule ^pagina$ pagina.php [L]

Y con esta otra, a páginas como www.example.com/pagina.php?categoria=trabajos&subcategoria=PDFs ahora se podrán acceder como www.example.com/trabajos-PDFs/. Por otro lado, a www.example.com/pagina.php se puede acceder simplemente como www.example.com/pagina.

En conclusiones:

El lado izquierdo de la regla de reescribimiento (RewriteRule) indica la URL formada, y el derecho indica la URL original. Parte de la expresión regular como (.*) y $1 indican variables, por ello, las reglas que utilizen estas combinaciones servirán para todas las URLs que cumplan tal condición.

El uso de sesiones nos proporciona una forma fácil de guardar datos del usuario sin tener que recurrir a mysql o archivos de texto plano, claro está, de forma temporal. Con sesiones se puede realizar:

• Saber si un usuario a ingresado en el a través de login.
• Cambio de Hoja de estilos CSS por parte del usuario.
• Cualquier cosa que requiera una variable temporal en relación a la visita del usuario.

Las sesiones se crean de forma bastante sencilla:

<?php 
 session_start(); 
 ?>

A través de esto crearemos una sesión. OJO: Para poder usar la variables de sesión creadas hay que colocar esto al principio de nuestro script en PHP antes de cualquier sentencia HTML o generará un error.

Para definir una variable de sesión (que se guarda de manera temporal, usaremos lo siguiente:

<?php session_start()
if (isset ($_SESSION["variable"] {
	echo "Usted ha introducido la variable $_SESSION["variable"]
} else {
//Remitente de datos (Index.php)
<form action="capturador.php" method="POST">
<label for="variable">Introduzca la variable que quiere introducir a la sesión: </label>
<input type="text" id="variable">
</form>
?>

//Receptor de datos (capturador.php)
<?php 
session_start();
$_POST["nombre"] = $_SESSION["variable"];  ?>
<script type="text/javascript">
window.location="index.php"; 
</script>

Con ese script lo que realizamos es lo siguiente:

• Colocamos un IF en el index y si no existe damos un formulario para crearla.
• En el capturador recibimos los datos y definimos variable de sesión.
• Con el código javascript redireccionamos al index sin alterar el PHP.

Como ves es bastante sencillo, ahora solo nos falta borrar esa sesión:

<?php
 session_start();
session_destroy();
header("Location: index.php");
?>

Podríamos definir una variable de sesión para un estilo css, seleccionado mediante un form. 

En el siguiente tutorial sobre el uso de sesiones enseñaré a hacer con ellas un sistema para modificar páginas php con contraseña para mantener actualizado el sitio web sin MYSQL.

Aprenda a escapar caracteres con PHP, técnica usable para imprimir caracteres sin romper la sintaxis de su código fuente.

Ciertos carácteres en el PHP no son posibles imprimirlos y para ello existe la técnica llamada escape de carácteres o carácteres de escape.

Esta técnica o función se utiliza cuando no podemos incluir un caracter dentro de una cadena porque altera su sintaxis o para incluir una función extra dentro de ésta.

Por ejemplo, al insertar una comilla doble en una cadena encerrada entre comillas dobles crearía un error dentro de la línea de código, o un signo peso que se quiere imprimir y que no sea interpretado como una variable.

Las combinaciones a utilizar para lograr un escape de caracter se hacen junto al slash invertido (). A continuación se muestra una tabla con las combinaciones posibles.

Ejemplos de escape de caracteres

Si queremos incluir comillas dobles en una cadena encerrada entre comillas dobles, debemos usar un escape de caracter porque si se incluyera solo, la cadena terminaría y la sintaxis de la línea se perdería, provocando un error.

Ejemplo PHP:

 <?php
 echo "Lorem ipsum \"dolor sit\" amet.";
 ?> 

Resultado PHP:

Lorem ipsum "dolor sit" amet.

Lo mismo sucede con las comillas simples insertadas en una cadena encerrada entre comillas simples.

Ejemplo PHP:

 <?php
 echo 'Lorem ipsum \'dolor sit\' amet.';
 ?> 

Resultado PHP:

Lorem ipsum 'dolor sit' amet.

Si quisieramos imprimir un precio cuya cifra esté junto al signo pesos, debemos escapar este signo pues se tiende a leer como una variable.

Ejemplo PHP:

 <?php
 echo "El vestido me costo \$xxx";
 ?> 

Resultado PHP:

El vestido me costo $xxx

Otro ejemplo sería el siguiente, en el que incluimos un salto de línea en el código fuente del archivo para que no se nos vea todo amontonado.

Ejemplo PHP:

 <?php
 echo "<ul>\n<li>Una cosa</li>\n<li>Otra cosa</li>\n</ul>";
 ?> 

Resultado PHP:

• Una cosa
• Otra cosa

Resultado en el código fuente:

 <ul>
 <li>Una cosa</li>
 <li>Otra cosa</li>
 </ul> 

Aprenda a concatenar las cadenas imprimibles del PHP para diferenciar cadenas de variables y así obtener un código PHP impecable.

La concatenación es una regla de cualquier lenguaje de programación que permite diferenciar una cadena de una variable conservando su unión.

Esta técnica nos sirve en casos de que nuestra variable incluida dentro de una cadena de carácteres no se diferencie de ésta, cuando se incluye dentro de una cadena de carácteres encerrada entre comillas simples o en casos más particulares en que no se pueda imprimir una cadena.

El caracter para concatenar una cadena en PHP es el punto (.) y se utiliza entremedio de la cadena (que puede estar entre comillas) y la variable a concatenar.

Un ejemplo sin concatenación puede darnos un resultado óptimo:

Ejemplo PHP:

 <?php
 $numero = 4;
 echo "Yo tengo $numero casas.";
 ?> 

Resultado PHP:

Yo tengo 4 casas.

Pero si fuese una variable "confundida" entre el texto, no sería lo mismo porque identificaríamos a una variable que no existe y podría dar un resultado no esperado.

Ejemplo PHP:

 <?php
 $numero = 4;
 echo "Yo tengo $numero20 casas.";
 ?> 

Resultado PHP:

Yo tengo  casas.

De lo que queríamos obtener el siguiente resultado y no el anterior, pues la variable $numero20 no es la misma que $numero:

Yo tengo 420 casas.

Para obtener este resultado, debemos entrar a concatenar la cadena. Utilizamos el caracter punto dicho en parrafos anteriores para separar la cadena (que está entre comillas dobles) de la variable. En total necesitaremos dos.

Ejemplo PHP de concatenación:

 <?php
 $numero = 4;
 echo "Yo tengo ".$numero."20 casas.";
 ?> 

Resultado PHP:

Yo tengo 420 casas.

Otros ejemplos de concatenación

Si la variable está al principio o al final de la cadena, nos ahorraremos una concatenación. Ahora veremos otros ejemplos de concatenación para dar algunas ideas de lo que se puede lograr.

 echo $edad." años llevo en esta ciudad"; 

 echo 'Necesito llegar a '.$metros; 

 $frase_ahorro = "Estoy ahorrando ".$pesos." pesos hace ".$meses." meses para tener en total ".$dinero; 

El Sistema Hexadecimal es un sistema de numeración posicional de base 16 que procura hacernos más fácil la tarea a la hora de trabajar con códigos fuentes de programas, creación de colores y codificación de carácteres que usamos a diario en nuestra computadora.

En este artículo, trabajaremos sólo con los colores hexadecimales y aprenderemos a crearlos sin necesidad de utilizar un programa adicional.

De esta manera, podemos ahorrar mucho tiempo, sin mencionar que es algo entretenido.

Los colores hexadecimales

Los colores hexadecimales forman parte de nuestra vida informática por donde le miremos. Absolutamente todos los colores que vez en tu computadora, están basados o se pueden traducir a este sistema, y es muy fácil usarlo cuando ya se tiene dominado.

Composición de colores hexadecimales

Se dice que es un sistema de base 16 porque para su funcionamiento el sistema hexadecimal utiliza 16 caracteres no solo numéricos: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, y F. Las letras fueron agregadas en reemplazo de los números que siguen después del 9 para no crear confusión al combinarlos: 10=>A, 11=>B, 12=C, 13=>D, 14=>E y 15=>F.

Los colores hexadecimales constan de 6 caractares: los dos primeros indican el nivel de rojo, los dos siguientes el nivel de verde y los últimos dos el nivel de azul, identificados cada uno con su correspondientes carácteres en hexadecimal.

Así podemos hacer combinaciones de colores "rellenando cada nivel" con la cantidad de color que deseamos. Vea la siguiente ilustración para analizar los colores hexadecimales.

¿Y donde uso los colores hexadecimales?

En muchas partes. Por ejemplo: en las selecciones de colores de Photoshop o Gimp, en las hojas de estilo CSS, en el mismísimo Paint (abria que traducir cada nivel de hexadecimal a decimal con la calculadora en modo científico), en páginas webs que permiten modificar su apariencia, y en general, en casi todo software que tenga que ver con el color.

Esta misma web, contiene colores hexadecimales. Los enlaces son de color #008888.

Aprenda a utilizar correctamente las comillas dobles y simples en las cadenas de carácteres de sus líneas PHP.

El uso de las comillas dentro del código fuente PHP nos permite determinar una cadena de caracteres. Estas pueden variar según los caracteres que utilizamos dentro de ella o según el tipo total de caracteres que la conforman.

Existen 3 formas de utilizar las comillas: comillas dobles, comillas simples y sin comillas.

Comillas dobles

En una cadena compuesta por cualquier caracter encerrada entre comillas dobles podemos incluir comillas simples sin escaparlas, pero si se incluye una comilla doble, obligatoriamente se debe escapar este caracter. No hay necesidad de concatenar las variables.

Ejemplo PHP

 <?php
 $visitas = "400 visitas";
 echo "Bienvenido al restaurán "Lorem's ipsum". $visitas hoy.";
 ?> 

Resultado PHP:

Bienvenido al restaurán "Lorem's ipsum". 400 visitas hoy.

Comillas simples

En una cadena compuesta por cualquier caracter encerrada entre comillas simples podemos incluir comillas dobles sin escaparlas, pero si se incluye una comilla simple, obligatoriamente se debe escapar este caracter. En esta cadena las variables siempre deben concatenarse.

Ejemplo PHP:

 <?php
 $visitas = '400 visitas';
 echo 'Bienvenido al restaurán "Lorem's ipsum". '.$visitas.' hoy.';
 ?> 

Resultado PHP:

Bienvenido al restaurán "Lorem's ipsum". 400 visitas hoy.

Sin comillas

Una cadena no se encerrará necesariamente entre comillas dobles o simples, siempre y cuando contenga solo carácteres numéricos o se trate de una variable.

Ejemplo PHP:

 <?php
 $xyz = 400;
 $visitas = $xyz;
 echo $visitas.' visitas hoy.';
 ?> 

Resultado PHP:

400 visitas hoy.

Aprenda a utilizar correctamente las comillas dobles y simples en las cadenas de carácteres de sus líneas PHP.

El uso de las comillas dentro del código fuente PHP nos permite determinar una cadena de caracteres. Estas pueden variar según los caracteres que utilizamos dentro de ella o según el tipo total de caracteres que la conforman.

Existen 3 formas de utilizar las comillas: comillas dobles, comillas simples y sin comillas.

Comillas dobles

En una cadena compuesta por cualquier caracter encerrada entre comillas dobles podemos incluir comillas simples sin escaparlas, pero si se incluye una comilla doble, obligatoriamente se debe escapar este caracter. No hay necesidad de concatenar las variables.

Ejemplo PHP

 <?php
 $visitas = "400 visitas";
 echo "Bienvenido al restaurán "Lorem's ipsum". $visitas hoy.";
 ?> 

Resultado PHP:

Bienvenido al restaurán "Lorem's ipsum". 400 visitas hoy.

Comillas simples

En una cadena compuesta por cualquier caracter encerrada entre comillas simples podemos incluir comillas dobles sin escaparlas, pero si se incluye una comilla simple, obligatoriamente se debe escapar este caracter. En esta cadena las variables siempre deben concatenarse.

Ejemplo PHP:

 <?php
 $visitas = '400 visitas';
 echo 'Bienvenido al restaurán "Lorem's ipsum". '.$visitas.' hoy.';
 ?> 

Resultado PHP:

Bienvenido al restaurán "Lorem's ipsum". 400 visitas hoy.

Sin comillas

Una cadena no se encerrará necesariamente entre comillas dobles o simples, siempre y cuando contenga solo carácteres numéricos o se trate de una variable.

Ejemplo PHP:

 <?php
 $xyz = 400;
 $visitas = $xyz;
 echo $visitas.' visitas hoy.';
 ?> 

Resultado PHP:

400 visitas hoy.

Aprenda a utilizar correctamente las comillas dobles y simples en las cadenas de carácteres de sus líneas PHP.

El uso de las comillas dentro del código fuente PHP nos permite determinar una cadena de caracteres. Estas pueden variar según los caracteres que utilizamos dentro de ella o según el tipo total de caracteres que la conforman.

Existen 3 formas de utilizar las comillas: comillas dobles, comillas simples y sin comillas.

Comillas dobles

En una cadena compuesta por cualquier caracter encerrada entre comillas dobles podemos incluir comillas simples sin escaparlas, pero si se incluye una comilla doble, obligatoriamente se debe escapar este caracter. No hay necesidad de concatenar las variables.

Ejemplo PHP

 <?php
 $visitas = "400 visitas";
 echo "Bienvenido al restaurán "Lorem's ipsum". $visitas hoy.";
 ?> 

Resultado PHP:

Bienvenido al restaurán "Lorem's ipsum". 400 visitas hoy.

Comillas simples

En una cadena compuesta por cualquier caracter encerrada entre comillas simples podemos incluir comillas dobles sin escaparlas, pero si se incluye una comilla simple, obligatoriamente se debe escapar este caracter. En esta cadena las variables siempre deben concatenarse.

Ejemplo PHP:

 <?php
 $visitas = '400 visitas';
 echo 'Bienvenido al restaurán "Lorem's ipsum". '.$visitas.' hoy.';
 ?> 

Resultado PHP:

Bienvenido al restaurán "Lorem's ipsum". 400 visitas hoy.

Sin comillas

Una cadena no se encerrará necesariamente entre comillas dobles o simples, siempre y cuando contenga solo carácteres numéricos o se trate de una variable.

Ejemplo PHP:

 <?php
 $xyz = 400;
 $visitas = $xyz;
 echo $visitas.' visitas hoy.';
 ?> 

Resultado PHP:

400 visitas hoy.

Creando un sitio Web estándar ficticio con lenguaje XHTML 1.0 strict, CSS 2.1, PHP 5, Accesibilidad Web (WAI) AAA y Cross Browser (diseño para todos los navegadores).

Se trata de la creación de una Web con un código fuente semántico, totalmente accesible y visualmente correcta en todos los navegadores Webs (firefox, google chrome, opera, safari, internet explorer 6, 7 y 8). Incluyendo textos, imágenes creadas con Photoshop, fotografías retocadas, formularios, estilos CSS bien definidos, archivos independientes y algunas líneas de PHP.

Varias horas de trabajo comprimido en un video de 10 minutos.

Puedes ver el ejemplo del código o descargártelo si quieres analizarlo mejor. En incluidos/cabecera.php recuerden modificar la etiqueta <base> como se menciona dentro del código.

*** Rescatando contenidos de documentoweb (25 de julio de 2009).

Existen dos formas de comentar su código fuente PHP para informarse en el futuro de qué trata el código fuente.

Al igual que en cualquier otro lenguaje, ya sea de programación o de marcado como el XHTML, dispone de su propia forma para incluir comentarios informativos directamente en el código fuente.

Los comentarios son muy útiles a la hora de volver a leer nuestro código fuente, porque nos entrega y facilita nuestra propia información acerca del código que hemos creado.

Comentarios de una línea

El PHP nos entrega dos formas para incluir nuestros comentarios. La primera forma, es para comentar el código de forma simple y en una línea. Esta se puede incluir solo antes o después de terminar una línea de código para que no irrumpa en el código real.

Para comentar en un línea, se debe anteponer dos barras (//) al principio de la línea, la que se delimita por el salto de línea de la misma.

Ejemplo PHP:

<?php

// El siguiente código es para imprimir la frase "Hola mundo".
echo "Hola mundo";

?>

Comentarios de varias líneas

La segunda forma, es para incluir un comentario de varias líneas. Este es generalmente usado para mostrar códigos fuentes eliminados o textos largos de varias líneas.

Para comentar en varias líneas, se deben encerrar esta líneas por los carácteres "/*" al principio y "*/" al final.

Ejemplo PHP:

<?php

/* En el código:
echo "Hola mundo";
puedo cambiar la frase entre comillas por cualquier otra. */

echo "Hola mundo";

?>

En un procesador de textos, generalmente, los comentarios son presentados de color verde.

Resultados de los comentarios

No existe un resultado para el comentario, pues es solo visible en el código fuente. El comentario solo sirve para tu lectura o para alguien que tenga acceso a tu código PHP.

Las variables en el PHP son los elementos básicos y escenciales para trabajar cualquier código PHP.

Las variables, no solo en PHP sino que en cualquier otro lenguaje de programación, es el elemento más básico y escencial para crear un código y sacarle provecho. La función de una variable es almacenar valores, que pueden ser cualquier tipo de combinación entre letras, caracteres y/o números, los cuales estarán disponibles para usarlos con posterioridad.

Estructura de una variable

Una variable se forma por dos partes. La primera, es el nombre de la variable inventado por tí (sensible a minúculas y mayúsculas, sin caracteres extraños), a la que se le antepone el signo peso o dolar ($). Luego está el valor de la variable, encerrado entre comillas dobles o simples ("" o '').

Estas dos estructuras que conforman a la variable en sí deben estar separadas por el signo igual (=) que identifica la asignación del lado derecho al izquierdo y terminada en el último caracter por un punto y coma (;), como cualquier otra línea en el PHP que siempre debe cerrarse.

Ejemplo de una variable PHP:

$nombre_mio = "Secreto";

Ejemplo de uso de una variable PHP:

<?php

$nombre_mio = "Null";
echo "Mi nombre es $nombre_mio";

?>

Al ejecutar este ejemplo en el navegador mediante localhost como hemos dicho en páginas anteriores para que el servidor local interprete nuestro código PHP nos entregará un resultado.

Resultado del ejemplo:

Mi nombre es Secreto

Ejemplo de una variable numérica

Trabajar con números en PHP es de gran utilidad y podemos sacarle provecho a nuestras necesidades. Sumar, restar, dividir, multiplicar, sacar porcentajes y redondear números son algunas de las operaciones que podemos lograr con PHP [Véase operadores aritméticos]. Por ahora, veremos una suma.

Ejemplo PHP de suma de variables

<?php
 
 $numero_uno = 45;
 $numero_dos = 106;
 $suma_total = $numero_uno+$numero_dos;
 echo "La suma es  $suma_total";
 
 ?>

Lo que se propone en este ejemplo es sumar el valor numérico de la variable $numero_uno que es 45 con el de $numero_dos que es 106. El total de esta suma se almacena como valor de la variable $suma_total y esta es la que se imprime junto con un pequeño texto en la línea siguiente.

Resultado del ejemplo:

La suma es 151

Y así puedes jugar con cualquier variable en tus códigos PHP, ya sea de números o con letras. En el caso de las letras recuerda encerrarlas entre comillas dobles o simples [Véase uso de comillas].

Ya que el CSS3 sólo está disponible en algunos navegadores y la propiedad border-radius es parte de ella, no podemos utilizarla si queremos que nuestro sitio web se vea estupendo en todos los navegadores.

Es por ello que utilizamos técnicas CSS (versión 2.1) junto con alguna imagen para provocar el efecto de las esquinas redondeadas sin sufrir tanto.

Mi técnica se las mostraré a continuación más unos ejemplos bien completos y concretos donde podrán ver y analizar el código CSS.

Bien, yo utilizo una sola imagen, 6 divs del HTML y porsupuesto que CSS. Quizás sean demasiados divs, pero no encuentro otro método más simple, además, no interfiere en el funcionamiento. Lo bueno es que utilizo una sola imagen que contiene las cuatro esquinas juntas formando un circulo, la que en los primeros cuatro divs se posiciona con CSS sin repetirse en cada una de las esquinas. El quinto div cubre 1/2 de cada imagen con rellenos (padding) laterales de tamaño de la mitad de la imagen más un color de fondo, y el último cubre 1/2 de las partes de las imagenes restantes con un margen negativo superior e inferior con las mismas características del anterior.

Se puede interpretar de la siguiente forma:

En general, los últimos dos divs son los encargados de cubrir 3/4 de la imagen posicionada en cada esquina (contenida en los 4 divs anteriores).

Y así se puede crear el efecto de las esquinas redondeadas que funciona en todos los navegadores (hasta en IE 5.5) con ventajas de agregar bordes CSS, a partir de 6 divs, una sola imagen más un poco de estilo. Creo que es mejor esto en vez de usar 4 divs y una imagen para cada uno como he visto y experimentado en otros ejemplos: menos peticiones para el servidor, menor tiempo de carga.

Puedes ver una presentación que he creado con 4 tipos de cajas de esquinas redondeadas.

¿Como se escribe el PHP? Sigue los primeros pasos para aprender y usar el lenguaje con su correcta sintaxis.

El PHP se ejecuta siempre y cuando esta instalado el servidor local como lo hemos visto en como utilizar el PHP.

Sintaxis

La sintaxis del PHP es simple. Pero a media que vallamos avanzando en las diferentes funciones y ejemplos del PHP no hay que idearse que todo será fácil.

La siguiente estructura se debe incluir siempre en un código o "script PHP". Esta compuesta por un código de apertura y uno de cierre:

<?php
 
 ?>

Consideraciones para la sintaxis

• Cada línea de código PHP se debe escribir entre estas dos lineas que te he presentado.
• Cada línea siempre debe cerrarse con un punto y coma (;)
• El orden jerárquico de las líneas siempre influye en la siguiente, y nunca en la anterior.
• Los múltiples espacios y saltos de línea son comprimidos a uno.

El famoso "imprimir"

Imprimir en PHP significa presentar el resultado en el documento, es decir, por ejemplo, el código HTML que queremos mostrar en la página Web.

El código para imprimir un valor por excelencia en PHP es echo. No está categorizado como una función del PHP, más bien, es una sentencia del lenguaje.

Cada echo debe estar acompañado de la cadena a mostrar. En el siguiente ejemplo se debe encerrar entre comillas lo que se desea y cerrar con punto y coma al final de la línea como escribí en las consideraciones.

<?php
 
 echo "Hola mundo";
 
 ?>

Crear el archivo PHP

Pongamos en práctica el código anterior. Debes abrir tu procesador de texto, escribir o copiar (no es muy buena idea, trata siempre de escribir tú el código y aprenderás en poco tiempo) el código que he puesto más arriba o con alguna modificación, por ejemplo con un poco de HTML:

Ahora procedemos a guardar el documento con la extensión .php después del nombre del archivo a elección en la carpeta de destino. Si usas Apache XAMPP en Windows sería C: > XAMPP > htdocs.

Ahora procedemos a ejecutar el documento creado desde tu navegador con la dirección http://localhost/nombre_archivo.php.

El producto de este código será solo la parte de echo, ninguna otra más. Esta es una de las grandes características de un lenguaje de servidor como el PHP en que le mostrará al lector solo lo que nosotros queremos mostrale. Al generar dinámicamente una página Web por el servidor, el usuario no verá absolutamente nada del código PHP que has creado.

Deberías ver el código fuente de tu página generada dinámicamente desde el navegador para que compruebes lo dicho.

Si todo te ha resultado correctamente, te felicito, porque has credo tu primera página en PHP.

¿Como se escribe el PHP? Sigue los primeros pasos para aprender y usar el lenguaje con su correcta sintaxis.

El PHP se ejecuta siempre y cuando esta instalado el servidor local como lo hemos visto en como utilizar el PHP.

Sintaxis

La sintaxis del PHP es simple. Pero a media que vallamos avanzando en las diferentes funciones y ejemplos del PHP no hay que idearse que todo será fácil.

La siguiente estructura se debe incluir siempre en un código o "script PHP". Esta compuesta por un código de apertura y uno de cierre:

<?php
 
 ?>

Consideraciones para la sintaxis

• Cada línea de código PHP se debe escribir entre estas dos lineas que te he presentado.
• Cada línea siempre debe cerrarse con un punto y coma (;)
• El orden jerárquico de las líneas siempre influye en la siguiente, y nunca en la anterior.
• Los múltiples espacios y saltos de línea son comprimidos a uno.

El famoso "imprimir"

Imprimir en PHP significa presentar el resultado en el documento, es decir, por ejemplo, el código HTML que queremos mostrar en la página Web.

El código para imprimir un valor por excelencia en PHP es echo. No está categorizado como una función del PHP, más bien, es una sentencia del lenguaje.

Cada echo debe estar acompañado de la cadena a mostrar. En el siguiente ejemplo se debe encerrar entre comillas lo que se desea y cerrar con punto y coma al final de la línea como escribí en las consideraciones.

<?php
 
 echo "Hola mundo";
 
 ?>

Crear el archivo PHP

Pongamos en práctica el código anterior. Debes abrir tu procesador de texto, escribir o copiar (no es muy buena idea, trata siempre de escribir tú el código y aprenderás en poco tiempo) el código que he puesto más arriba o con alguna modificación, por ejemplo con un poco de HTML:

Ahora procedemos a guardar el documento con la extensión .php después del nombre del archivo a elección en la carpeta de destino. Si usas Apache XAMPP en Windows sería C: > XAMPP > htdocs.

Ahora procedemos a ejecutar el documento creado desde tu navegador con la dirección http://localhost/nombre_archivo.php.

El producto de este código será solo la parte de echo, ninguna otra más. Esta es una de las grandes características de un lenguaje de servidor como el PHP en que le mostrará al lector solo lo que nosotros queremos mostrale. Al generar dinámicamente una página Web por el servidor, el usuario no verá absolutamente nada del código PHP que has creado.

Deberías ver el código fuente de tu página generada dinámicamente desde el navegador para que compruebes lo dicho.

Si todo te ha resultado correctamente, te felicito, porque has credo tu primera página en PHP.

Notepad++ es un procesador de textos gratuito, que soporta muchos lenguajes de programación y se ejecuta en Windows.

Incorpora una interfaz muy clara y de diseño intuitivo, con soporte para abrir varios documentos al mismo tiempo, visualización en ventana doble que te permite editar dos documentos simultáneamente, código de colores para los comandos de cada lenguaje de programación, soporte para drag-and-drop y muchas otras funciones.

Notepad++ incluye además una utilidad de zoom y te permite usar marcadores para moverte mejor dentro de los larguísimos ficheros de código.

En definitiva, un editor similar al Bloc de Notas de Windows en tamaño y velocidad, pero con muchísimas más funcionalidades.

A continuación enumeraremos algunas características de Notepad++ :

• Sintaxis coloreada y envoltura de sintaxis
• WYSIWYG
• Sintaxis coloreada a elección del usuario
• Autocompletado
• Multi-Documento
• Multi-Vista
• Soporte para Buscar/Reemplazar expresiones regulares
• Soporte completo para Arrastrar y colocar
• Posición dinámica de las vistas
• Deteción automática del estado del documento
• Herramienta de Zoom
• Funcionamiento bajo entornos multilingües
• Puntos de marca
• Resaltado de paréntesis y sangría
• Grabación y reproducción de macros

Puedes descargarlo gratuitamente desde la Web de Notepad++.

Rescatando contenidos de documentoweb.

Veremos cómo utilizar el PHP: el procesador de textos y el servidor local así como las diferentes versiones del PHP.

El procesador de texto

Necesitas de un procesador de textos para escribir el código PHP en él y guardar los archivos con formato .php, como lo es el bloc de notas que viene instalado en Windows o alguno otro más completo como Notepad++ que incluye coloramiento del código y funcionalidaes de teclado y texto muy útiles para manejar mejor el código que crearemos.

El servidor local

Para que el PHP funcione, debes instalarlo en tu computadora como un servidor local. No te preocupes, es muy fácil. Existen organizaciones dedicadas a ello como Apache, quien ofrece de forma gratuita Apache XAMPP (multiplatarforma), un paquete de utilizades que entre ello incluye PHP y MySQL (que te servirá en el futuro).

Cuando tenemos instalado el servidor local, podemos acceder fácilmente al servidor local escribiendo localhost o http://localhost/ en el navegador, si funciona correctamente, podemos proceder a experimentar con nuestros propios códigos PHP.

Versiones del PHP

Actualmente se utiliza PHP 5.3.2, versiones similares a 5.x.x son suficientes para desarrollar scripts más una iterpretación correcta. Inferiores a 5, mejor actualizate, porque los desarrolladores de PHP cambian o descartan algunas funciones aconveniencia y perfeccionamiento del lenguaje.

Este tutorial de PHP estará conforme a las funciones y sintaxis de la versión mas actual. Se informará si las funciones pueden ser eliminadas en un futuro.

Veremos cómo utilizar el PHP: el procesador de textos y el servidor local así como las diferentes versiones del PHP.

El procesador de texto

Necesitas de un procesador de textos para escribir el código PHP en él y guardar los archivos con formato .php, como lo es el bloc de notas que viene instalado en Windows o alguno otro más completo como Notepad++ que incluye coloramiento del código y funcionalidaes de teclado y texto muy útiles para manejar mejor el código que crearemos.

El servidor local

Para que el PHP funcione, debes instalarlo en tu computadora como un servidor local. No te preocupes, es muy fácil. Existen organizaciones dedicadas a ello como Apache, quien ofrece de forma gratuita Apache XAMPP (multiplatarforma), un paquete de utilizades que entre ello incluye PHP y MySQL (que te servirá en el futuro).

Cuando tenemos instalado el servidor local, podemos acceder fácilmente al servidor local escribiendo localhost o http://localhost/ en el navegador, si funciona correctamente, podemos proceder a experimentar con nuestros propios códigos PHP.

Versiones del PHP

Actualmente se utiliza PHP 5.3.2, versiones similares a 5.x.x son suficientes para desarrollar scripts más una iterpretación correcta. Inferiores a 5, mejor actualizate, porque los desarrolladores de PHP cambian o descartan algunas funciones aconveniencia y perfeccionamiento del lenguaje.

Este tutorial de PHP estará conforme a las funciones y sintaxis de la versión mas actual. Se informará si las funciones pueden ser eliminadas en un futuro.

Acabo de probar cómo conectarme con twitter para twittear desde documentoweb los artículos que aquí se publican y nunca pensé que sería tan fácil, porque no necesita de ningún "add on" extra como la librería cURL del PHP activada.

Desde PHP lo podemos hacer de la siguiente forma con la API de Twitter, reemplazando los datos de la cuenta y el mensaje a twittear:

<?php

$twit=urlencode('tu nuevo estado en twitter');
$usuario = 'micuenta';
$password = 'miclave';

$salida = "POST http://168.143.171.84/statuses/update.json HTTP/1.1rn"
  ."Host: 168.143.171.84rn"
  ."Authorization: Basic ".base64_encode ("$usuario:$password")."rn"
  ."Content-type: application/x-www-form-urlencodedrn"
  ."Content-length: ".strlen ("status=$twit")."rn"
  ."Connection: Closernrn"
  ."status=$twit";
$fp = fsockopen ('168.143.171.84',80);
fwrite ($fp, $salida);
fclose ($fp);

?>

Así y desde ahora, cuando se publique un artículo como este mismo, también saldrá en el twitter de documentoweb con un enlace hacia acá.

Aprendido desde pratham.name.

Ya que el CSS3 sólo está disponible en algunos navegadores y la propiedad border-radius es parte de ella, no podemos utilizarla si queremos que nuestro sitio web se vea estupendo en todos los navegadores.

Es por ello que utilizamos técnicas CSS (versión 2.1) junto con alguna imagen para provocar el efecto de las esquinas redondeadas sin sufrir tanto.

Mi técnica se las mostraré a continuación más unos ejemplos bien completos y concretos donde podrán ver y analizar el código CSS.

Bien, yo utilizo una sola imagen, 6 divs del HTML y porsupuesto que CSS. Quizás sean demasiados divs, pero no encuentro otro método más simple, además, no interfiere en el funcionamiento. Lo bueno es que utilizo una sola imagen que contiene las cuatro esquinas juntas formando un circulo, la que en los primeros cuatro divs se posiciona con CSS sin repetirse en cada una de las esquinas. El quinto div cubre 1/2 de cada imagen con rellenos (padding) laterales de tamaño de la mitad de la imagen más un color de fondo, y el último cubre 1/2 de las partes de las imagenes restantes con un margen negativo superior e inferior con las mismas características del anterior.

Se puede interpretar de la siguiente forma:

En general, los últimos dos divs son los encargados de cubrir 3/4 de la imagen posicionada en cada esquina (contenida en los 4 divs anteriores).

Y así se puede crear el efecto de las esquinas redondeadas que funciona en todos los navegadores (hasta en IE 5.5) con ventajas de agregar bordes CSS, a partir de 6 divs, una sola imagen más un poco de estilo. Creo que es mejor esto en vez de usar 4 divs y una imagen para cada uno como he visto y experimentado en otros ejemplos: menos peticiones para el servidor, menor tiempo de carga.

Puedes ver una presentación que he creado con 4 tipos de cajas de esquinas redondeadas.

Muy útil para conservar una página en un solo archivo sin perder imágenes o estilos que generalmente suelen omitirse al guardar una página y que molesta con tantos archivos por separado.

Ir a PDFcrowd.com.

Llevo muchos años combatiendo la inmoralidad de las técnicas del SPAM con varios métodos y el que te presentaré a continuación es el más efectivo que he creado.

La efectividad de este captcha se basa en el giro de las letras o números más la dirección en que indica una flecha.

El hecho de que haya que introducir un código ya evita gran parte de los robot de SPAM, pero en el otro porcentaje se utilizan técnicas de un nivel superior, como un software OCR (pueden reconocer carácteres a partir de las imágenes). Contra estos, ya es más difícil vencerlos, pues pensábamos que sólo el ojo humano podía reescribir el texto de una imagen, entonces, necesitamos introducir otro elemento que no tienen los robots: la capacidad de razonar.

Es justamente lo que hace este y otros buenos captchas: Te induce a pensar y escribir.

Creo que un poco más fácil de descifrar que los que tienen letras muy distorsionadas como en los ejemplos de la imagen.

Integrar el captcha en el código PHP

El código PHP está creado con la librería GD del mismo PHP (si ya tienes instalado PHP, no necesitas instalar nada adicional).

Primero, necesitamos el código que crea la imagen independiente con caracteres aleatorios (cada carácter, es una imagen) en posiciones especificas:

<?php

// cabecera
header("Content-type: image/png");

// crear la imagen (anchura,altura)
$img=imageCreate(100,60);

// colores
$blanco=imagecolorallocate($img,255,255,255);
$negro=imagecolorallocate($img,0,0,0);

// variables obtenidas por GET

$sentido=rand(1,2);

$tcaptcha=$_GET['captcha'];
$tcaptcha=base64_decode($tcaptcha);
$tcaptcha=substr($tcaptcha,1,-1);
$tcaptcha=base64_decode($tcaptcha);

$caracter1=substr($tcaptcha,0,1);
$caracter2=substr($tcaptcha,1,1);
$caracter3=substr($tcaptcha,2,1);
$caracter4=substr($tcaptcha,3,1);
$caracter5=substr($tcaptcha,4,1);


if($sentido==1){
// flecha
$string=imagecopy($img,imagecreatefrompng('flecha1.png'),31,26,0,0,40,30);

// caracteres
$string=imagecopy($img,imagerotate(imagecreatefrompng("caracteres_0/$caracter1.png"),90,$blanco,0),3,36,0,0,22,22);
$string=imagecopy($img,imagerotate(imagecreatefrompng("caracteres_45/$caracter2.png"),0,$blanco,0),13,12,0,0,22,22);
$string=imagecopy($img,imagerotate(imagecreatefrompng("caracteres_0/$caracter3.png"),0,$blanco,0),39,0,0,0,22,22);
$string=imagecopy($img,imagerotate(imagecreatefrompng("caracteres_45/$caracter4.png"),270,$blanco,0),65,12,0,0,22,22);
$string=imagecopy($img,imagerotate(imagecreatefrompng("caracteres_0/$caracter5.png"),270,$blanco,0),75,36,0,0,22,22);
}
if($sentido==2){
// flecha
$string=imagecopy($img,imagecreatefrompng("flecha2.png"),31,6,0,0,40,30);

// caracteres
$string=imagecopy($img,imagerotate(imagecreatefrompng("caracteres_0/$caracter1.png"),270,$blanco,0),8,6,0,0,22,22);
$string=imagecopy($img,imagerotate(imagecreatefrompng("caracteres_45/$caracter2.png"),270,$blanco,0),14,31,0,0,22,22);
$string=imagecopy($img,imagerotate(imagecreatefrompng("caracteres_0/$caracter3.png"),0,$blanco,0),39,36,0,2,22,20);
$string=imagecopy($img,imagerotate(imagecreatefrompng("caracteres_45/$caracter4.png"),0,$blanco,0),64,31,0,0,22,22);
$string=imagecopy($img,imagerotate(imagecreatefrompng("caracteres_0/$caracter5.png"),90,$blanco,0),70,6,0,0,22,22);

}


// mostrar la imagen
echo imagegif($img);

// destruir la imagen
imagedestroy($img);
?>

(libreria-captcha/imagen.php)

Luego, el archivo donde vamos a generar la clave aleatoria y que incluirá el código anterior, es decir, donde se encontrarán todas las variables que necesitemos:

<?php

$abcnumeros=array(0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z");

$caracter1=$abcnumeros[rand(0,35)];
$caracter2=$abcnumeros[rand(0,35)];
$caracter3=$abcnumeros[rand(0,35)];
$caracter4=$abcnumeros[rand(0,35)];
$caracter5=$abcnumeros[rand(0,35)];

$captcha=$caracter1.$caracter2.$caracter3.$caracter4.$caracter5;

// codificacion propia
$captcha_cod=base64_encode($captcha);
$captcha_cod="a".$captcha_cod."E";
$captcha_cod=str_replace("=","",$captcha_cod);
$captcha_cod=base64_encode($captcha_cod);

$tu_captcha=md5(strtolower($_POST['tu_captcha']));
$mi_captcha=$_POST['mi_captcha'];

// variables con HTML
$img_captcha='<label for="captcha"><img src="libreria-captcha/imagen.php?captcha='.$captcha_cod.'" alt="Captcha" title="El código de verificación o captcha permite verificar si eres un humano o una máquina de SPAM" /></label>';
$input_captcha='<input type="text" name="tu_captcha" id="captcha" size="10" /><input type="hidden" name="mi_captcha" value="'.md5($captcha).'" />';

?>

(libreria-captcha/variables.php)

Por último, en el formulario HTML de una página cualquiera, donde queremos integrar el captcha necesitamos incluir a las variables (variables.php) e imprimir la varible que contiene el html de la imagen ($img_captcha) y la que tiene el campo donde se debe ingresar el capcha ($input_captcha).

<?php

include('libreria-captcha/variables.php');

echo "<p>".$img_captcha."</p>";
echo "<p>".$input_captcha."</p>";

?>

Luego, solo faltaría tu código, en el cual puedes verificar si el código de verificación está correctamente escrito o no de la siguiente forma:

<?php

if($mi_captcha==$tu_captcha){
        // Aquí incluyes tu código si es que el captcha se pasa exitosamente. 
}else{
        // Aquí incluyes tu código si es que el captcha NO se pasa exitosamente.
}

?>

Las variables son enviadas por 2 medios codificados: md5 y uno creado por mi que usa base 64.

Vea el captcha en funcionamiento.

• Descarga el código, dentro del comprimido hay un ejemplo de uso.
• Ejemplo de demostración del captcha.

Llevo muchos años combatiendo la inmoralidad de las técnicas del SPAM con varios métodos y el que te presentaré a continuación es el más efectivo que he creado.

La efectividad de este captcha se basa en el giro de las letras o números más la dirección en que indica una flecha.

El hecho de que haya que introducir un código ya evita gran parte de los robot de SPAM, pero en el otro porcentaje se utilizan técnicas de un nivel superior, como un software OCR (pueden reconocer carácteres a partir de las imágenes). Contra estos, ya es más difícil vencerlos, pues pensábamos que sólo el ojo humano podía reescribir el texto de una imagen, entonces, necesitamos introducir otro elemento que no tienen los robots: la capacidad de razonar.

Es justamente lo que hace este y otros buenos captchas: Te induce a pensar y escribir.

Creo que un poco más fácil de descifrar que los que tienen letras muy distorsionadas como en los ejemplos de la imagen.

Integrar el captcha en el código PHP

El código PHP está creado con la librería GD del mismo PHP (si ya tienes instalado PHP, no necesitas instalar nada adicional).

Primero, necesitamos el código que crea la imagen independiente con caracteres aleatorios (cada carácter, es una imagen) en posiciones especificas:

<?php

// cabecera
header("Content-type: image/png");

// crear la imagen (anchura,altura)
$img=imageCreate(100,60);

// colores
$blanco=imagecolorallocate($img,255,255,255);
$negro=imagecolorallocate($img,0,0,0);

// variables obtenidas por GET

$sentido=rand(1,2);

$tcaptcha=$_GET['captcha'];
$tcaptcha=base64_decode($tcaptcha);
$tcaptcha=substr($tcaptcha,1,-1);
$tcaptcha=base64_decode($tcaptcha);

$caracter1=substr($tcaptcha,0,1);
$caracter2=substr($tcaptcha,1,1);
$caracter3=substr($tcaptcha,2,1);
$caracter4=substr($tcaptcha,3,1);
$caracter5=substr($tcaptcha,4,1);


if($sentido==1){
// flecha
$string=imagecopy($img,imagecreatefrompng('flecha1.png'),31,26,0,0,40,30);

// caracteres
$string=imagecopy($img,imagerotate(imagecreatefrompng("caracteres_0/$caracter1.png"),90,$blanco,0),3,36,0,0,22,22);
$string=imagecopy($img,imagerotate(imagecreatefrompng("caracteres_45/$caracter2.png"),0,$blanco,0),13,12,0,0,22,22);
$string=imagecopy($img,imagerotate(imagecreatefrompng("caracteres_0/$caracter3.png"),0,$blanco,0),39,0,0,0,22,22);
$string=imagecopy($img,imagerotate(imagecreatefrompng("caracteres_45/$caracter4.png"),270,$blanco,0),65,12,0,0,22,22);
$string=imagecopy($img,imagerotate(imagecreatefrompng("caracteres_0/$caracter5.png"),270,$blanco,0),75,36,0,0,22,22);
}
if($sentido==2){
// flecha
$string=imagecopy($img,imagecreatefrompng("flecha2.png"),31,6,0,0,40,30);

// caracteres
$string=imagecopy($img,imagerotate(imagecreatefrompng("caracteres_0/$caracter1.png"),270,$blanco,0),8,6,0,0,22,22);
$string=imagecopy($img,imagerotate(imagecreatefrompng("caracteres_45/$caracter2.png"),270,$blanco,0),14,31,0,0,22,22);
$string=imagecopy($img,imagerotate(imagecreatefrompng("caracteres_0/$caracter3.png"),0,$blanco,0),39,36,0,2,22,20);
$string=imagecopy($img,imagerotate(imagecreatefrompng("caracteres_45/$caracter4.png"),0,$blanco,0),64,31,0,0,22,22);
$string=imagecopy($img,imagerotate(imagecreatefrompng("caracteres_0/$caracter5.png"),90,$blanco,0),70,6,0,0,22,22);

}


// mostrar la imagen
echo imagegif($img);

// destruir la imagen
imagedestroy($img);
?>

(libreria-captcha/imagen.php)

Luego, el archivo donde vamos a generar la clave aleatoria y que incluirá el código anterior, es decir, donde se encontrarán todas las variables que necesitemos:

<?php

$abcnumeros=array(0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z");

$caracter1=$abcnumeros[rand(0,35)];
$caracter2=$abcnumeros[rand(0,35)];
$caracter3=$abcnumeros[rand(0,35)];
$caracter4=$abcnumeros[rand(0,35)];
$caracter5=$abcnumeros[rand(0,35)];

$captcha=$caracter1.$caracter2.$caracter3.$caracter4.$caracter5;

// codificacion propia
$captcha_cod=base64_encode($captcha);
$captcha_cod="a".$captcha_cod."E";
$captcha_cod=str_replace("=","",$captcha_cod);
$captcha_cod=base64_encode($captcha_cod);

$tu_captcha=md5(strtolower($_POST['tu_captcha']));
$mi_captcha=$_POST['mi_captcha'];

// variables con HTML
$img_captcha='<label for="captcha"><img src="libreria-captcha/imagen.php?captcha='.$captcha_cod.'" alt="Captcha" title="El código de verificación o captcha permite verificar si eres un humano o una máquina de SPAM" /></label>';
$input_captcha='<input type="text" name="tu_captcha" id="captcha" size="10" /><input type="hidden" name="mi_captcha" value="'.md5($captcha).'" />';

?>

(libreria-captcha/variables.php)

Por último, en el formulario HTML de una página cualquiera, donde queremos integrar el captcha necesitamos incluir a las variables (variables.php) e imprimir la varible que contiene el html de la imagen ($img_captcha) y la que tiene el campo donde se debe ingresar el capcha ($input_captcha).

<?php

include('libreria-captcha/variables.php');

echo "<p>".$img_captcha."</p>";
echo "<p>".$input_captcha."</p>";

?>

Luego, solo faltaría tu código, en el cual puedes verificar si el código de verificación está correctamente escrito o no de la siguiente forma:

<?php

if($mi_captcha==$tu_captcha){
        // Aquí incluyes tu código si es que el captcha se pasa exitosamente. 
}else{
        // Aquí incluyes tu código si es que el captcha NO se pasa exitosamente.
}

?>

Las variables son enviadas por 2 medios codificados: md5 y uno creado por mi que usa base 64.

Vea el captcha en funcionamiento.

• Descarga el código, dentro del comprimido hay un ejemplo de uso.
• Ejemplo de demostración del captcha.

He aquí 2 sitios de los cuales he obtenido muy buenas texturas de madera de alta calidad para trabajar junto a un sitio web. El primero de Flickr tiene licencia creative commons de atribución, por el otro, no se especifica.

• Texturas de madera en flickr
• Texturas de madera en defcon-x.de

Posibles usos: Sitios web elegantes. Específicamente si están relacionados con la madera como las mueblerías o empresas que trabajen con ella.

Combinación de colores: Blanco, negro, marrón, verde o naranja y sus derivados. Colores tibios.

Muy útil para conservar una página en un solo archivo sin perder imágenes o estilos que generalmente suelen omitirse al guardar una página y que molesta con tantos archivos por separado.

Ir a PDFcrowd.com.

Aprende a crear un sitio web dinámico con PHP de forma sencilla, correcta, con buen uso y excelentes ejemplos.

El lenguaje PHP, "Hypertext Preprocessor" o "Preprocesador de Hipertexto", es el lenguaje de programación del lado del servidor más usado para crear páginas o sitios Web completos de forma fácil y dinámica.

¿Que es una página web dinámica?

Se refiere a una página web dinámica a un documento web (de cualquier tipo) que puede cambiar su código según variables entregadas, como el tiempo o los datos de un formulario, produciendo un resultado esperado. Me refiero a cualquier tipo de documento porque no solo trabaja con HTML, si no que con PDFs, imágenes, archivos XML, entre otros.

¿A qué se refiere que PHP es del lado del servidor?

PHP trabaja en una computadora llamada el servidor, la cual contiene el intérprete del PHP. Éste es el encargado de "interpretar" nuestro código para entregarnos el resultado que deaseamos. Es por esto que se dice que el PHP es un lenguaje de programación del lado del servidor.

¿Para que sirve una página Web dinámica?

¡Infinidad de cosas!... Tú con este verdadero lenguaje de programación tienes una inmensa gama de posibilidades de desarrollar en la Web lo que se te dé la gana para la internet.

Por ejemplo, puedes crear:

• Un sitio Web muy flexible. Con códigos independientes puedes separar el encabezado, los menus y el contenido de cualquier página en archivos independientes.
• Sistemas de alamacenamiento de información. Para crear tus propios libros de visitas u otras utilizaciones como foros y blogs.
• Manejar y entregar textos según las características de la condición del usuario.
• Crear tu propio buscador de información.
• Manejar archivos y directorios (crear, copiar, eliminar, etc.).
• No solo crear páginas Webs en HTML: también archivos zip, PDF, feed RSS, imágenes y otros.
• Y lo más importante: su utiliza en conjunto de bases de datos MySQL.

Siendo estos unos ejemplos míninimos que puedes hacer con PHP, debes saber que no existe límite para crear lo que se te venga a la cabeza. No importa que seas novato, todo se puede aprender y ese es el fin de este tutorial, que aprendas y saques provecho a este gran lenguaje de programación.

El desarrollo Web

El tema del desarrollo Web esta muy ligado al lenguaje PHP. Este término se emplea para el uso de las tecnologías del lado del servidor y del cliente que involucran algunos o muchos procesos a fin de realizar tareas para el usuario o simplemente mostrar información.

De seguro más adelante te toparás con este término, como por ejemplo, aquella persona que sabe utilizar el PHP en una aplicación concreta podría considerarsele un Desarrollador Web.

¡Intégrate al desarrollo Web!

El PHP te ofrece posibilidades de desarrollar tus proyectos a tús medidas y necesidades. Te invito a seguir leyendo para que aprendas un verdadero lenguaje de programación.

Eh! Un momento. ¿Cómo sé que aquí se enseña PHP correctamente?

Los creadores del lenguaje ofrecen en PHP.net (tu biblia para este tutorial) toda la documentación oficial del PHP. Dentro del tutorial siempre se hará referencia a este sitio.

Vamos a dar un paseo por las obsoletas y desaprobadas etiquetas del lenguaje HTML haciendo referencia al porqué no se utilizan hoy en día y para que servían. Generalmente, se han desaprobado las que tienen un fin de presentación visual y no estructural.

Etiquetas de estilos visuales

Se desaprobaron muchas etiquetas que lógicamente no pretendían seguir la estructura básica del html: crear sentido y no estilo. Ahora fácilmente podemos lograr estos estilos con con líneas de código CSS:

• <center>
• <font>
• <i>
• <s>
• <strike>
• <u>

La etiqueta <center> centra horizontalmente a un elemento, <font> un tipo, color y tamaño de fuente, <i> crea un estilo cursivo de texto, <s> y <strike> el estilo tachado sobre el texto y <u> proporciona el estilo de subrayado a un texto.

Se sugiere utilizar cualquier propiedad CSS como text-align para las alineaciones horizontales, font para los estilos de fuentes, text-decorationpara los subrayados y tachados y color para los colores de elementos en ves de utilizar estas etiquetas obsoletas del HTML.

Equitueta apple

Esta etiqueta se utilizaba para insertar applets java en nuestros documentos. Quizás se podría comparar con la etiqueta <object>.

• <applet>

Incluia un archivo externo .class y era una tremenda complicación para instalar plug-ins y poder visualizar lo que pretendía el código, que generalmente eran efectos visuales. Actualmente, no cuenta con el apoyo con casi ningún navegador.

Etiqueta basefont

La etiqueta <basefont> pretendía establecer el tamaño base de una fuente, pero por la aparición de CSS y solo el apoyo de Internet explorer, se desaprobó. Se escribía de la forma:

• <basefont>

Etiquetas relacionadas con listas (dir y menu)

Esta etiqueta se utilizaba para crear un directorio de lista. Esta etiqueta está obsoleta en HTML 4.01, y no es compatible con XHTML 1.0 Strict DTD. Realmente esta etiqueta es inútil, se sugiere utilizar estilos CSS en nuestras listas. Se escribe de la forma:

• <dir>

Y la siguiente etiqueta se utiliza para crear una lista de opciones de menú:

• <menu>

Ambas, realmente inutilizables.

Etiquetas muy obsoletas (insidex y xmp)

Las siguientes y últimas dos etiquetas creo que nunca las usarás ni para probar para que funcionan, pues están tan obsoletas que no hay mucha información de ellas en internet... se escriben de la siguiente forma:

• <isindex>
• <xmp>

Puedo rescatar lo siguiente: La etiqueta <isindex> define una entrada de línea simple y <xmp> define texto preformateado.

Etiquetas que nunca fueron estándares (marquee y blink)

Esta etiqueta transforma en un caos un documento HTML bien formado, NUNCA utilizes estas etiqueta:

• <marquee>
• <blink>

Estas etiqueta NO HAN SIDO DESAPROBADAS, es más, NUNCA formaron parte de los estandares webs, eran unas etiquetas que fueron creadas por Microsoft e implementadas en Internet Explorer. Con el paso del tiempo se fue implementando en casi todos los navegadores, pero de seguro nunca pasarán a formar parte de las etiquetas estándres, porque se preocupan solo de presentar un texto atractivo (pero a la ves molesto) y no de una estructura adecuada.

La etiqueta <marquee> crea un texto con movimiento horizontal (por defecto) la que contaba con una serie de atributos para modificar velocidad y dirección, por el otro lado, la etiqueta <blink> creaba un texto parpadeante.

Vamos a dar un paseo por las obsoletas y desaprobadas etiquetas del lenguaje HTML haciendo referencia al porqué no se utilizan hoy en día y para que servían. Generalmente, se han desaprobado las que tienen un fin de presentación visual y no estructural.

Etiquetas de estilos visuales

Se desaprobaron muchas etiquetas que lógicamente no pretendían seguir la estructura básica del html: crear sentido y no estilo. Ahora fácilmente podemos lograr estos estilos con con líneas de código CSS:

• <center>
• <font>
• <i>
• <s>
• <strike>
• <u>

La etiqueta <center> centra horizontalmente a un elemento, <font> un tipo, color y tamaño de fuente, <i> crea un estilo cursivo de texto, <s> y <strike> el estilo tachado sobre el texto y <u> proporciona el estilo de subrayado a un texto.

Se sugiere utilizar cualquier propiedad CSS como text-align para las alineaciones horizontales, font para los estilos de fuentes, text-decorationpara los subrayados y tachados y color para los colores de elementos en ves de utilizar estas etiquetas obsoletas del HTML.

Equitueta apple

Esta etiqueta se utilizaba para insertar applets java en nuestros documentos. Quizás se podría comparar con la etiqueta <object>.

• <applet>

Incluia un archivo externo .class y era una tremenda complicación para instalar plug-ins y poder visualizar lo que pretendía el código, que generalmente eran efectos visuales. Actualmente, no cuenta con el apoyo con casi ningún navegador.

Etiqueta basefont

La etiqueta <basefont> pretendía establecer el tamaño base de una fuente, pero por la aparición de CSS y solo el apoyo de Internet explorer, se desaprobó. Se escribía de la forma:

• <basefont>

Etiquetas relacionadas con listas (dir y menu)

Esta etiqueta se utilizaba para crear un directorio de lista. Esta etiqueta está obsoleta en HTML 4.01, y no es compatible con XHTML 1.0 Strict DTD. Realmente esta etiqueta es inútil, se sugiere utilizar estilos CSS en nuestras listas. Se escribe de la forma:

• <dir>

Y la siguiente etiqueta se utiliza para crear una lista de opciones de menú:

• <menu>

Ambas, realmente inutilizables.

Etiquetas muy obsoletas (insidex y xmp)

Las siguientes y últimas dos etiquetas creo que nunca las usarás ni para probar para que funcionan, pues están tan obsoletas que no hay mucha información de ellas en internet... se escriben de la siguiente forma:

• <isindex>
• <xmp>

Puedo rescatar lo siguiente: La etiqueta <isindex> define una entrada de línea simple y <xmp> define texto preformateado.

Etiquetas que nunca fueron estándares (marquee y blink)

Esta etiqueta transforma en un caos un documento HTML bien formado, NUNCA utilizes estas etiqueta:

• <marquee>
• <blink>

Estas etiqueta NO HAN SIDO DESAPROBADAS, es más, NUNCA formaron parte de los estandares webs, eran unas etiquetas que fueron creadas por Microsoft e implementadas en Internet Explorer. Con el paso del tiempo se fue implementando en casi todos los navegadores, pero de seguro nunca pasarán a formar parte de las etiquetas estándres, porque se preocupan solo de presentar un texto atractivo (pero a la ves molesto) y no de una estructura adecuada.

La etiqueta <marquee> crea un texto con movimiento horizontal (por defecto) la que contaba con una serie de atributos para modificar velocidad y dirección, por el otro lado, la etiqueta <blink> creaba un texto parpadeante.

Me explico. Por ejemplo, un comentario que fué publicado a las 4:30 y ahora son las 4:45. Pasaron 15 minutos desde que se publicó, y eso es lo que calcula la función, el tiempo en el que fue guardado algo comparado con el tiempo del momento en que se lee.

La función que yo llamo "hace_tiempo" está basada en la función time() del PHP. Lo que hace time es calcular la cantidad de segundos que hay desde el primero de enero de 1970 hasta los segundos del momento en que se ejecuta. Si guardamos en nuestra base de datos esta cifra generada adjunta al comentario (siguiendo el ejemplo) podremos jugar con esta función.

<?php

function hace_tiempo($valor){

// FORMATOS:
// segundos    desde 1970 (función time())        hace_tiempo('12313214');
// defecto (variable $formato_defecto)        hace_tiempo('12:01:02 04-12-1999');
// tu propio formato                        hace_tiempo('04-12-1999 12:01:02 [n.j.Y H:i:s]');

$formato_defecto="H:i:s j-n-Y";

// j,d = día
// n,m = mes
// Y = año
// G,H = hora
// i = minutos
// s = segundos

if(stristr($valor,'-') || stristr($valor,':') || stristr($valor,'.') || stristr($valor,',')){

    if(stristr($valor,'[')){
        $explotar_valor=explode('[',$valor);
        $valor=trim($explotar_valor[0]);
        $formato=str_replace(']','',$explotar_valor[1]);
    }else{
        $formato=$formato_defecto;
    }

    $valor = str_replace("-"," ",$valor);
    $valor = str_replace(":"," ",$valor);
    $valor = str_replace("."," ",$valor);
    $valor = str_replace(","," ",$valor);

    $numero = explode(" ",$valor);

    $formato = str_replace("-"," ",$formato);
    $formato = str_replace(":"," ",$formato);
    $formato = str_replace("."," ",$formato);
    $formato = str_replace(","," ",$formato);

    $formato = str_replace("d","j",$formato);
    $formato = str_replace("m","n",$formato);
    $formato = str_replace("G","H",$formato);

    $letra = explode(" ",$formato);

    $relacion[$letra[0]]=$numero[0];
    $relacion[$letra[1]]=$numero[1];
    $relacion[$letra[2]]=$numero[2];
    $relacion[$letra[3]]=$numero[3];
    $relacion[$letra[4]]=$numero[4];
    $relacion[$letra[5]]=$numero[5];

    $valor = mktime($relacion['H'],$relacion['i'],$relacion['s'],$relacion['n'],$relacion['j'],$relacion['Y']);

}

$ht = time()-$valor;
if($ht>=2116800){
$dia = date('d',$valor);
$mes = date('n',$valor);
$año = date('Y',$valor);
$hora = date('H',$valor);
$minuto = date('i',$valor);
$mesarray = array('','Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre');
$fecha = "el $dia de $mesarray[$mes] del $año";
}
if($ht<30242054.045){$hc=round($ht/2629743.83);if($hc>1){$s="es";}$fecha="hace $hc mes".$s;}
if($ht<2116800){$hc=round($ht/604800);if($hc>1){$s="s";}$fecha="hace $hc semana".$s;}
if($ht<561600){$hc=round($ht/86400);if($hc==1){$fecha="ayer";}if($hc==2){$fecha="antes de ayer";}if($hc>2)$fecha="hace $hc días";}
if($ht<84600){$hc=round($ht/3600);if($hc>1){$s="s";}$fecha="hace $hc hora".$s;if($ht>4200 && $ht<5400){$fecha="hace más de una hora";}}
if($ht<3570){$hc=round($ht/60);if($hc>1){$s="s";}$fecha="hace $hc minuto".$s;}
if($ht<60){$fecha="hace $ht segundos";}
if($ht<=3){$fecha="ahora";}
return $fecha;

}

// Ejemplos

echo hace_tiempo("1271201645")."<br />";
echo hace_tiempo("20:34:05 13-04-2010")."<br />";
echo hace_tiempo("2010-04-13 20:34:05 [Y-n-j H:i:s]")."<br />";

?>

Forma de utilizar la función

Primero que nada guardar el código integrándolo al principio del documento. Al obtener el número (el time() que se guardó con anterioridad) de la base de datos e ingresandolo en una variable ($numero) solo debemos llamar a la función para que trabaje y de el resultado de la siguiente forma:

<?php echo hace_tiempo($numero); ?>

Así podría decir: hace 20 segundos, hace 1 minuto, hace 2 horas, hace 1 semana, hace más de 1 hora, etc. dependiendo del número. Está programado hasta 3 semanas, si el tiempo exede se muestra como "el dia X del mes X del año X". El tiempo se puede extender si se sigue la misma lógica del código PHP con un estudio de cuantos segundos hay en un mes, dos meses, un año, etc.

Conveniencia

Es muy conveniente usar esta o una función similar porque elimina la complejidad de los distintos horarios que hay en el mundo. No en todo el mundo son las 5 de la tarde, pero 5 minutos o 5 horas transcurridos son igual para todos.

Si decimos en la web "publicado el 08 de abril del 2010 a las 5:05pm" siendo que hoy es 08 de abril del 2010 y son las 9:00pm, es mucho pero mucho mejor para el lector decirle que transcurrieron 4 horas a darle tanta molestia de leer esa catastrófica frase para compararla con la fecha actual y calcular hace cuanto tiempo pasó aquello.

Actualización del código

Ahora en el código puedes ingresarle cualquier formato de fechas. En el mismo están las instrucciones.

Este es un sencillo código que deberíamos tener dominado para respetar la estructura lógica de la heredación y anidación de elementos en el HTML. Siendo que el XHTML es una variación del HTML como una variación más estricta del mismo, tendremos el beneficio de que nuestras listas se vean perfectas tanto estructural como visualmente (con CSS) en cualquier vanegador y/o dispositivo.

Ya sea <ol> o <ul> aveces la dificultad está entre los items de lista <li>, porque no todos saben con certeza dónde ubicar la sublista.

Propuse ejemplos con enlaces ya que es lo más común que se puede encontrar en las listas y en lo que más se complica.

¿Cómo crear listas de la forma correcta?

Esta sería la estructura más básica, que corresponde a una simple lista:

<ul>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
</ul>

Luego, si queremos agregar una sublista al segundo item debemos abrir </a> y </li> del mismo:

<ul>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a>

    </li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
</ul>

Para poner la sublista que queramos en el mismo orden que se muestra al principio.

<ul>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a>
        <ul>
            <li><a href="..." title="...">...</a></li>
            <li><a href="..." title="...">...</a></li>
            <li><a href="..." title="...">...</a></li>
        </ul>
    </li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
</ul>

Así sucesivamente, podemos jugar con las listas y hacer muchas dentro de ella.

<ol>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a>
        <ul>
            <li><a href="..." title="...">...</a></li>
            <li><a href="..." title="...">...</a></li>
            <li><a href="..." title="...">...</a>
                <ul>
                    <li><a href="..." title="...">...</a></li>
                    <li><a href="..." title="...">...</a></li>
                    <li><a href="..." title="...">...</a></li>
                </ul>
            </li>
            <li><a href="..." title="...">...</a></li>
        </ul>
    </li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a>
        <ul>
            <li><a href="..." title="...">...</a></li>
            <li><a href="..." title="...">...</a></li>
        </ul>
    </li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
</ol>

La idea no sería hacer algo tan grotesco como el ejemplo.

¿Cómo NO crear listas de la forma correcta?

Este constituiría un mal ejemplo, donde la sublista se agrega después del item y no dentro de él:

<ul>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
        <ul>
            <li><a href="..." title="...">...</a></li>
            <li><a href="..." title="...">...</a></li>
        </ul>
    <li><a href="..." title="...">...</a></li>
</ul>

Ya está, no hay otra forma de equivocarse, solo hay que respetar las respectivas anidaciones en el orden <ul> <li> <ul> <li>.

<ul>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a>
        <ul>
            <li><a href="..." title="...">...</a></li>
            <li><a href="..." title="...">...</a></li>
            <li><a href="..." title="...">...</a></li>
        </ul>
    </li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
</ul>

Este es un sencillo código que deberíamos tener dominado para respetar la estructura lógica de la heredación y anidación de elementos en el HTML. Siendo que el XHTML es una variación del HTML como una variación más estricta del mismo, tendremos el beneficio de que nuestras listas se vean perfectas tanto estructural como visualmente (con CSS) en cualquier vanegador y/o dispositivo.

Ya sea <ol> o <ul> aveces la dificultad está entre los items de lista <li>, porque no todos saben con certeza dónde ubicar la sublista.

Propuse ejemplos con enlaces ya que es lo más común que se puede encontrar en las listas y en lo que más se complica.

¿Cómo crear listas de la forma correcta?

Esta sería la estructura más básica, que corresponde a una simple lista:

<ul>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
</ul>

Luego, si queremos agregar una sublista al segundo item debemos abrir </a> y </li> del mismo:

<ul>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a>

    </li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
</ul>

Para poner la sublista que queramos en el mismo orden que se muestra al principio.

<ul>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a>
        <ul>
            <li><a href="..." title="...">...</a></li>
            <li><a href="..." title="...">...</a></li>
            <li><a href="..." title="...">...</a></li>
        </ul>
    </li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
</ul>

Así sucesivamente, podemos jugar con las listas y hacer muchas dentro de ella.

<ol>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a>
        <ul>
            <li><a href="..." title="...">...</a></li>
            <li><a href="..." title="...">...</a></li>
            <li><a href="..." title="...">...</a>
                <ul>
                    <li><a href="..." title="...">...</a></li>
                    <li><a href="..." title="...">...</a></li>
                    <li><a href="..." title="...">...</a></li>
                </ul>
            </li>
            <li><a href="..." title="...">...</a></li>
        </ul>
    </li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a>
        <ul>
            <li><a href="..." title="...">...</a></li>
            <li><a href="..." title="...">...</a></li>
        </ul>
    </li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
</ol>

La idea no sería hacer algo tan grotesco como el ejemplo.

¿Cómo NO crear listas de la forma correcta?

Este constituiría un mal ejemplo, donde la sublista se agrega después del item y no dentro de él:

<ul>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
        <ul>
            <li><a href="..." title="...">...</a></li>
            <li><a href="..." title="...">...</a></li>
        </ul>
    <li><a href="..." title="...">...</a></li>
</ul>

Ya está, no hay otra forma de equivocarse, solo hay que respetar las respectivas anidaciones en el orden <ul> <li> <ul> <li>.

<ul>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a>
        <ul>
            <li><a href="..." title="...">...</a></li>
            <li><a href="..." title="...">...</a></li>
            <li><a href="..." title="...">...</a></li>
        </ul>
    </li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
</ul>

Para obtener todos los datos, la consulta debe ser algo parecido a lo siguiente: "Seleccionar todas las filas de la tabla 'nombre_tabla'".

SELECT * FROM nombre_tabla

Para obtener algunos de los datos, la consulta puede ser así: "Seleccionar las filas 'id', 'producto' y 'precio' de la tabla 'nombre_tabla'".

SELECT id,producto,precio FROM nombre_tabla

Para obtener los datos que cumplan una condición dada: "Seleccionar todas las filas de la tabla 'nombre_tabla' donde la celda de la columna 'dato' sea igual a 'algo'".

SELECT * FROM nombre_tabla WHERE dato='algo'

Para obtener los datos de forma ordenada: "Seleccionar todas las filas de la tabla 'nombre_tabla' y ordenarlas por 'fecha' de forma descendiente".

SELECT * FROM nombre_tabla ORDER BY fecha DESC

Para obtener y limitar los datos: "Seleccionar 5 filas de la tabla 'nombre_tabla'".

SELECT * FROM nombre_tabla LIMIT 5

Para obtener datos limitados que cumplan una condición dada más un ordenamiento: "Seleccionar 15 filas de la tabla 'nombre_tabla' donde la celda de la columna 'dato' sea mayor a 'algo' y ordenarlas por 'fecha' de forma ascendiente".

SELECT * FROM nombre_tabla WHERE dato>'algo' ORDER BY fecha ASC LIMIT 15

Y así lógicamente podemos seguir creando las consultas SQL.

Ahora, estas consultas deben ir dentro de un pequeño código PHP que permite enviarlas al servidor y almacenar la información en una variable. La función se llama mysql_query().

$consulta = mysql_query("SELECT FROM * tabla_productos WHERE precio<15000") or die ("Error en la consulta");

Así en este ejemplo seleccionamos de la tabla_productos todas las filas donde los productos tengan un precio menor a $15000. Si la consulta está erronea muestra el mensaje "Error en la consulta" y detiene el procesamiento del código siguiente y lo entrega hasta donde alcanza a ejecutarse.

Luego, debemos transformar los datos de la variable a un array para trabajarla mejor en conjunto de un blucle while:

while($fila=mysql_fetch_array($consulta)){
$id = $fila['id'];
$nombre = $fila['nombre'];
$precio = $fila['precio'];
echo "<p>E producto $nombre ($id) vale $ $precio</p>";
// se obtienen multiples párrafos variando con los datos de los distintos productos 
}

Y así logramos obtener e imprimir los datos de una tabla de una base de datos.

Para obtener todos los datos, la consulta debe ser algo parecido a lo siguiente: "Seleccionar todas las filas de la tabla 'nombre_tabla'".

SELECT * FROM nombre_tabla

Para obtener algunos de los datos, la consulta puede ser así: "Seleccionar las filas 'id', 'producto' y 'precio' de la tabla 'nombre_tabla'".

SELECT id,producto,precio FROM nombre_tabla

Para obtener los datos que cumplan una condición dada: "Seleccionar todas las filas de la tabla 'nombre_tabla' donde la celda de la columna 'dato' sea igual a 'algo'".

SELECT * FROM nombre_tabla WHERE dato='algo'

Para obtener los datos de forma ordenada: "Seleccionar todas las filas de la tabla 'nombre_tabla' y ordenarlas por 'fecha' de forma descendiente".

SELECT * FROM nombre_tabla ORDER BY fecha DESC

Para obtener y limitar los datos: "Seleccionar 5 filas de la tabla 'nombre_tabla'".

SELECT * FROM nombre_tabla LIMIT 5

Para obtener datos limitados que cumplan una condición dada más un ordenamiento: "Seleccionar 15 filas de la tabla 'nombre_tabla' donde la celda de la columna 'dato' sea mayor a 'algo' y ordenarlas por 'fecha' de forma ascendiente".

SELECT * FROM nombre_tabla WHERE dato>'algo' ORDER BY fecha ASC LIMIT 15

Y así lógicamente podemos seguir creando las consultas SQL.

Ahora, estas consultas deben ir dentro de un pequeño código PHP que permite enviarlas al servidor y almacenar la información en una variable. La función se llama mysql_query().

$consulta = mysql_query("SELECT FROM * tabla_productos WHERE precio<15000") or die ("Error en la consulta");

Así en este ejemplo seleccionamos de la tabla_productos todas las filas donde los productos tengan un precio menor a $15000. Si la consulta está erronea muestra el mensaje "Error en la consulta" y detiene el procesamiento del código siguiente y lo entrega hasta donde alcanza a ejecutarse.

Luego, debemos transformar los datos de la variable a un array para trabajarla mejor en conjunto de un blucle while:

while($fila=mysql_fetch_array($consulta)){
$id = $fila['id'];
$nombre = $fila['nombre'];
$precio = $fila['precio'];
echo "<p>E producto $nombre ($id) vale $ $precio</p>";
// se obtienen multiples párrafos variando con los datos de los distintos productos 
}

Y así logramos obtener e imprimir los datos de una tabla de una base de datos.

Me explico. Por ejemplo, un comentario que fué publicado a las 4:30 y ahora son las 4:45. Pasaron 15 minutos desde que se publicó, y eso es lo que calcula la función, el tiempo en el que fue guardado algo comparado con el tiempo del momento en que se lee.

La función que yo llamo "hace_tiempo" está basada en la función time() del PHP. Lo que hace time es calcular la cantidad de segundos que hay desde el primero de enero de 1970 hasta los segundos del momento en que se ejecuta. Si guardamos en nuestra base de datos esta cifra generada adjunta al comentario (siguiendo el ejemplo) podremos jugar con esta función.

<?php

function hace_tiempo($valor){

// FORMATOS:
// segundos    desde 1970 (función time())        hace_tiempo('12313214');
// defecto (variable $formato_defecto)        hace_tiempo('12:01:02 04-12-1999');
// tu propio formato                        hace_tiempo('04-12-1999 12:01:02 [n.j.Y H:i:s]');

$formato_defecto="H:i:s j-n-Y";

// j,d = día
// n,m = mes
// Y = año
// G,H = hora
// i = minutos
// s = segundos

if(stristr($valor,'-') || stristr($valor,':') || stristr($valor,'.') || stristr($valor,',')){

    if(stristr($valor,'[')){
        $explotar_valor=explode('[',$valor);
        $valor=trim($explotar_valor[0]);
        $formato=str_replace(']','',$explotar_valor[1]);
    }else{
        $formato=$formato_defecto;
    }

    $valor = str_replace("-"," ",$valor);
    $valor = str_replace(":"," ",$valor);
    $valor = str_replace("."," ",$valor);
    $valor = str_replace(","," ",$valor);

    $numero = explode(" ",$valor);

    $formato = str_replace("-"," ",$formato);
    $formato = str_replace(":"," ",$formato);
    $formato = str_replace("."," ",$formato);
    $formato = str_replace(","," ",$formato);

    $formato = str_replace("d","j",$formato);
    $formato = str_replace("m","n",$formato);
    $formato = str_replace("G","H",$formato);

    $letra = explode(" ",$formato);

    $relacion[$letra[0]]=$numero[0];
    $relacion[$letra[1]]=$numero[1];
    $relacion[$letra[2]]=$numero[2];
    $relacion[$letra[3]]=$numero[3];
    $relacion[$letra[4]]=$numero[4];
    $relacion[$letra[5]]=$numero[5];

    $valor = mktime($relacion['H'],$relacion['i'],$relacion['s'],$relacion['n'],$relacion['j'],$relacion['Y']);

}

$ht = time()-$valor;
if($ht>=2116800){
$dia = date('d',$valor);
$mes = date('n',$valor);
$año = date('Y',$valor);
$hora = date('H',$valor);
$minuto = date('i',$valor);
$mesarray = array('','Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre');
$fecha = "el $dia de $mesarray[$mes] del $año";
}
if($ht<30242054.045){$hc=round($ht/2629743.83);if($hc>1){$s="es";}$fecha="hace $hc mes".$s;}
if($ht<2116800){$hc=round($ht/604800);if($hc>1){$s="s";}$fecha="hace $hc semana".$s;}
if($ht<561600){$hc=round($ht/86400);if($hc==1){$fecha="ayer";}if($hc==2){$fecha="antes de ayer";}if($hc>2)$fecha="hace $hc días";}
if($ht<84600){$hc=round($ht/3600);if($hc>1){$s="s";}$fecha="hace $hc hora".$s;if($ht>4200 && $ht<5400){$fecha="hace más de una hora";}}
if($ht<3570){$hc=round($ht/60);if($hc>1){$s="s";}$fecha="hace $hc minuto".$s;}
if($ht<60){$fecha="hace $ht segundos";}
if($ht<=3){$fecha="ahora";}
return $fecha;

}

// Ejemplos

echo hace_tiempo("1271201645")."<br />";
echo hace_tiempo("20:34:05 13-04-2010")."<br />";
echo hace_tiempo("2010-04-13 20:34:05 [Y-n-j H:i:s]")."<br />";

?>

Forma de utilizar la función

Primero que nada guardar el código integrándolo al principio del documento. Al obtener el número (el time() que se guardó con anterioridad) de la base de datos e ingresandolo en una variable ($numero) solo debemos llamar a la función para que trabaje y de el resultado de la siguiente forma:

<?php echo hace_tiempo($numero); ?>

Así podría decir: hace 20 segundos, hace 1 minuto, hace 2 horas, hace 1 semana, hace más de 1 hora, etc. dependiendo del número. Está programado hasta 3 semanas, si el tiempo exede se muestra como "el dia X del mes X del año X". El tiempo se puede extender si se sigue la misma lógica del código PHP con un estudio de cuantos segundos hay en un mes, dos meses, un año, etc.

Conveniencia

Es muy conveniente usar esta o una función similar porque elimina la complejidad de los distintos horarios que hay en el mundo. No en todo el mundo son las 5 de la tarde, pero 5 minutos o 5 horas transcurridos son igual para todos.

Si decimos en la web "publicado el 08 de abril del 2010 a las 5:05pm" siendo que hoy es 08 de abril del 2010 y son las 9:00pm, es mucho pero mucho mejor para el lector decirle que transcurrieron 4 horas a darle tanta molestia de leer esa catastrófica frase para compararla con la fecha actual y calcular hace cuanto tiempo pasó aquello.

Actualización del código

Ahora en el código puedes ingresarle cualquier formato de fechas. En el mismo están las instrucciones.

<?php

$tabla = "tabla_productos";
$servidor = "sql.servidor.com";
$usuario = "nombredeusuario";
$clave = "clavedeusuario";

mysql_select_db($tabla,mysql_connect($servidor,$usuario,$clave)) or die("Error de conexión con la base de datos.");

?>

La parte de "or die()" se muestra solo si hay algún error al conectarse con la base de datos, que sólo puede deberse a datos incorrectos o mala sintaxis.

La idea del código es usarlo al principio de todo el PHP y usarlo sólo con una tabla MySQL.También se puede aplicar un código más directo como siempre lo hago (ventaja del PHP):

mysql_select_db("tabla_productos",mysql_connect("sql.servidor.com","nombredeusuario","clavedeusuario")) or die("Error de conexión con la base de datos.");

Según mi experiencia no hay necesidad de cerrar la conexión como en otros códigos que he visto en otros sitios webs.

Problemas con la codificación de caracteres

Si hay problemas con la codificación de caracteres, usa la siguiente línea con tu codificación después de la conexión:

mysql_query("SET NAMES 'utf8'");

 Que cuando alguien se registre con un nombre de usuario y otra persona quiera registrarse con el mismo nombre no se pueda registrar ejemplo

Juan <-- un usuario que ya se registro

Si me registro con el nombre mismo nombe JUAn no me deje rejistrame

 Que cuando alguien se registre con un nombre de usuario y otra persona quiera registrarse con el mismo nombre no se pueda registrar ejemplo

Juan <-- un usuario que ya se registro

Si me registro con el nombre mismo nombe JUAn no me deje rejistrame

Mejoramos el rendimiento del sitio porque se hace sólo una petición HTTP en vez de que se pidan una por cada imagen. Si tenemos por ejemplo 50 imágenes pequeñas dentro del sitio, cuando un visitante abre la página se consultan en el servidor toda esta cantidad de imágenes. ¿No sería mejor que se pida solo una vez?. Pues es mejor, porque la imagen es cargada solo una vez por el navegador y el CSS (que actúa en el cliente y no en el servidor) se encarga de mapear la imagen. 

Un ejemplo de un mapa de imagen es el siguiente:

Iconos gratis obtenidos desde pictoico.

Quienes usan más los sprites CSS son aquellas webs que tienen demasiadas consultas al minuto, y que buscan reducir en lo posible el tráfico generado paraque sus servidores no colapsen. Google usa sprite, y lo usa muy bien:

Creando un Sprite CSS

Lo que haremos con el CSS será "recortar" esta imagen, como se ilustra en las siguientes figuras.

Debemos saber la coordenada de la esquina superior izquierda del icono a utilizar más su anchura y altura correspondiente para utilizarla luego en el CSS. Se puede obtener con programas gráficos como Photoshop (F8 para abrir la información) o el mismísmo Paint (en la barra de estado).

Las propiedades del CSS que utilizaremos en conjunto de un documento XHTML semántico y accesible para el sprite son:

• background
• display
• width
• height
• overflow
• line-height

Comenzemos con el Sprite CSS. Vamos a hacer un menú como el siguiente.

<ul id="menu">
<li><a href="/#enlace1" title="Portada, título del enlace 1">Portada</a></li>
<li><a href="/#enlace2" title="Carrito de compra, título del enlace 2">Carrito</a></li>
<li><a href="/#enlace3" title="Buscar, título del enlace 3">Buscar</a></li>
<li><a href="/#enlace4" title="Guardar, título del enlace 4">Guardar</a></li>
<li><a href="/#enlace5" title="Eliminar, título del enlace 5">Eliminar</a></li>
</ul>

En la hoja de estilo, cada enlace se convertirá en imagen teniendo como fondo el mapa de imagen, junto con su anchura y altura correspondiente. Se puede apreciar la propiedad float para hacer que cada enlace flote frente al anterior y así quede un menu horizontal. También las propiedades overflow y line-height para hacer desaparecer el texto. El menu tendrá la misma altura y color de fondo de los enlaces para hacerlo más interesante y largo.

ul#menu {
    height:63px;
    background-color:#212121;
}

ul#menu li {
    display: inline;
}

ul#menu li a {
    background: url('sprite.png') no-repeat;
    display: block;
    width: 63px;
    height: 63px;
    float: left;
    overflow: hidden;
    line-height: 10em;
}

Y a continuación, viene lo que se llama sprite, el mapa de las coordenadas para cada uno de los enlaces segun su clase asignada. Algunos enlaces cambiarán según el estado :hover (cuando el mouse esta por encima del enlace) o :active (cuando se presiona). Las coordenadas deben ir en negativo porque la imagen de fondo debe retroceder para posicionarse donde se quiere (para entenderlo y acostumbrarse es mejor experimentarlo).

ul#menu li a.portada {
    background-position: 0 0;
}


ul#menu li a.carrito {
    background-position: 0 -64px;
}
ul#menu li a.carrito:hover {
    background-position: -64px -64px;
}


ul#menu li a.buscar {
    background-position: -192px 0;
}


ul#menu li a.guardar {
    background-position: -128px -128px;
}
ul#menu li a.guardar:hover {
    background-position: -64px -128px;
}
ul#menu li a.guardar:active {
    background-position: 0 -128px;
}


ul#menu li a.eliminar {
    background-position: -256px 0;
}
ul#menu li a.eliminar:hover {
    background-position: -256px -64px;
}

Podemos hacer lo que se nos ocurra. Podemos por ejemplo tener todas las imagenes del sitio en una sola y se gastarán menos recursos. Además, cargará mucho más rápido.

¿Olvidé decir que funciona para todos los navegadores?

Descarga el ejemplo.

Mejoramos el rendimiento del sitio porque se hace sólo una petición HTTP en vez de que se pidan una por cada imagen. Si tenemos por ejemplo 50 imágenes pequeñas dentro del sitio, cuando un visitante abre la página se consultan en el servidor toda esta cantidad de imágenes. ¿No sería mejor que se pida solo una vez?. Pues es mejor, porque la imagen es cargada solo una vez por el navegador y el CSS (que actúa en el cliente y no en el servidor) se encarga de mapear la imagen. 

Un ejemplo de un mapa de imagen es el siguiente:

Iconos gratis obtenidos desde pictoico.

Quienes usan más los sprites CSS son aquellas webs que tienen demasiadas consultas al minuto, y que buscan reducir en lo posible el tráfico generado paraque sus servidores no colapsen. Google usa sprite, y lo usa muy bien:

Creando un Sprite CSS

Lo que haremos con el CSS será "recortar" esta imagen, como se ilustra en las siguientes figuras.

Debemos saber la coordenada de la esquina superior izquierda del icono a utilizar más su anchura y altura correspondiente para utilizarla luego en el CSS. Se puede obtener con programas gráficos como Photoshop (F8 para abrir la información) o el mismísmo Paint (en la barra de estado).

Las propiedades del CSS que utilizaremos en conjunto de un documento XHTML semántico y accesible para el sprite son:

• background
• display
• width
• height
• overflow
• line-height

Comenzemos con el Sprite CSS. Vamos a hacer un menú como el siguiente.

<ul id="menu">
<li><a href="/#enlace1" title="Portada, título del enlace 1">Portada</a></li>
<li><a href="/#enlace2" title="Carrito de compra, título del enlace 2">Carrito</a></li>
<li><a href="/#enlace3" title="Buscar, título del enlace 3">Buscar</a></li>
<li><a href="/#enlace4" title="Guardar, título del enlace 4">Guardar</a></li>
<li><a href="/#enlace5" title="Eliminar, título del enlace 5">Eliminar</a></li>
</ul>

En la hoja de estilo, cada enlace se convertirá en imagen teniendo como fondo el mapa de imagen, junto con su anchura y altura correspondiente. Se puede apreciar la propiedad float para hacer que cada enlace flote frente al anterior y así quede un menu horizontal. También las propiedades overflow y line-height para hacer desaparecer el texto. El menu tendrá la misma altura y color de fondo de los enlaces para hacerlo más interesante y largo.

ul#menu {
    height:63px;
    background-color:#212121;
}

ul#menu li {
    display: inline;
}

ul#menu li a {
    background: url('sprite.png') no-repeat;
    display: block;
    width: 63px;
    height: 63px;
    float: left;
    overflow: hidden;
    line-height: 10em;
}

Y a continuación, viene lo que se llama sprite, el mapa de las coordenadas para cada uno de los enlaces segun su clase asignada. Algunos enlaces cambiarán según el estado :hover (cuando el mouse esta por encima del enlace) o :active (cuando se presiona). Las coordenadas deben ir en negativo porque la imagen de fondo debe retroceder para posicionarse donde se quiere (para entenderlo y acostumbrarse es mejor experimentarlo).

ul#menu li a.portada {
    background-position: 0 0;
}


ul#menu li a.carrito {
    background-position: 0 -64px;
}
ul#menu li a.carrito:hover {
    background-position: -64px -64px;
}


ul#menu li a.buscar {
    background-position: -192px 0;
}


ul#menu li a.guardar {
    background-position: -128px -128px;
}
ul#menu li a.guardar:hover {
    background-position: -64px -128px;
}
ul#menu li a.guardar:active {
    background-position: 0 -128px;
}


ul#menu li a.eliminar {
    background-position: -256px 0;
}
ul#menu li a.eliminar:hover {
    background-position: -256px -64px;
}

Podemos hacer lo que se nos ocurra. Podemos por ejemplo tener todas las imagenes del sitio en una sola y se gastarán menos recursos. Además, cargará mucho más rápido.

¿Olvidé decir que funciona para todos los navegadores?

Descarga el ejemplo.

Podemos crear menus horizontales ubicados bajo el banner del sitio tanto como arriba para la navegación dentro de las principales secciones. Los menus verticales ubicados en algun costado del contenido podemos utilizarlos para los enlaces relacionados a la página que se está visitando, o utilizarlo para lo que se estime más conveniente.

Estos son unos ejemplos de como se vería el resultado de una buena maquetación de menu con XHTML+CSS válida para todos los navegadores.

Creando el menú con CSS

Las propiedades para maquetar el menu tanto horizontal como vertical son:

• display
• float
• width
• height (opcional)

Más todas las propiedades que se desee para darle un estilo definido.

La gracia es aplicar todas estas propiedades los enlaces para aprovechar sus distintos estados (:hover, :active, :visited o :focus) y para que estos puedan ser visualizados correctamente por cualquier navegador. Recuerda que Internet explorer 6 no admite dichos estados en otros elementos que no sean los hipervínculos.

Utilizaremos el siguiente XHTML para los dos menús de ejemplos:

<ul id="menu">
<li><a href="#enlace1" title="Inicio, título del enlace 1">Inicio</a></li>
<li><a href="#enlace2" title="Servicios, título del enlace 2">Servicios</a></li>
<li><a href="#enlace3" title="Clientes, título del enlace 3">Clientes</a></li>
<li><a href="#enlace4" title="Galería de imágenes, título del enlace 4">Galería</a></li>
<li><a href="#enlace5" title="Contacto, título del enlace 5">Contacto</a></li>
</ul>

El menu CSS horizontal

La propiedad display en conjunto de su valor block nos permite transformar un elemento a en bloque, hablamos de los propios enlaces o del selector "a". Float más un valor right o left nos permite hacer que el enlace convertido a en bloque quede junto a otro formando una cadena horizontal. Width y height ayudan para formatearlo con la medida que queramos.

El siguiente código CSS identifica las principales propiedades que mencionamos para maquetar el menu horizontal:

ul#menu {
    height: 25px;
}

ul#menu li {
    display: inline;
}

ul#menu li a {
    display: block; 
    width: 120px;
    height: 25px;
    float: left;
}

Hecho esto tendremos inmediatamente lista la maquitación y solo deberíamos empezar con la creatividad aplicando las propiedades que queramos para estilizar el menu. Es relativamente simple.

El menu CSS vertical

En este ejemplo se cumple el mismo rol pero algo cambiado. La propiedad width debe estar definida en el menu y no en los enlaces (ellos se adaptan a esta medida). Además, el menu es el que flota a la izquierda del contenido y los enlaces solo se deben convertir a elementos en bloque.

Agregamos un nuevo div en el ejemplo del XHTML para el contenido, para que este, quede con un margen igual a la medida del menu, mas un padding para separarlos.

ul#menu {
    float: left;
    width: 130px;
}

ul#menu li {
    display: inline;
}

ul#menu li a {
    display: block;
    height: 25px;
}

#contenido {
    margin-left: 130px;
    padding-left: 20px;
}

Y bien, como dijimos antes, se debe aplicar la imaginación para hacerlo más elegante.

Puedes descargar el ejemplo del menu vertical y el del menu horizontal. Ambos estan más producidos en código y explicados con comentarios.

Para crear una categoría se debe seguir la sigguiente sintaxis:

[categoría]: Título de tu publicación

O mejor aún más una subcategoría:

[categoría]: [subcategoría]: Título de tu publicación

Ejemplos:

Photoshop: Crear gifs animados

Guía: Photoshop: Crear gifs animados

Las categorías o subcategorías póngase en plural, singular, mayúsculas, minúsculas o con acentuaciones dan el mismo resultado en la página de dicha categoría. Si la categoría es por ejemplo "Guía", "guías" o "GUIAS" se almacenará en esa categoría, pero note que las URLs permacenecen sin acentuaciones y se desprecia la escritura mencionada para mostrar los mismos resultados para todas ellas.

Para crear una categoría se debe seguir la sigguiente sintaxis:

[categoría]: Título de tu publicación

O mejor aún más una subcategoría:

[categoría]: [subcategoría]: Título de tu publicación

Ejemplos:

Photoshop: Crear gifs animados

Guía: Photoshop: Crear gifs animados

Las categorías o subcategorías póngase en plural, singular, mayúsculas, minúsculas o con acentuaciones dan el mismo resultado en la página de dicha categoría. Si la categoría es por ejemplo "Guía", "guías" o "GUIAS" se almacenará en esa categoría, pero note que las URLs permacenecen sin acentuaciones y se desprecia la escritura mencionada para mostrar los mismos resultados para todas ellas.

Para crear una categoría se debe seguir la sigguiente sintaxis:

[categoría]: Título de tu publicación

O mejor aún más una subcategoría:

[categoría]: [subcategoría]: Título de tu publicación

Ejemplos:

Photoshop: Crear gifs animados

Guía: Photoshop: Crear gifs animados

Las categorías o subcategorías póngase en plural, singular, mayúsculas, minúsculas o con acentuaciones dan el mismo resultado en la página de dicha categoría. Si la categoría es por ejemplo "Guía", "guías" o "GUIAS" se almacenará en esa categoría, pero note que las URLs permacenecen sin acentuaciones y se desprecia la escritura mencionada para mostrar los mismos resultados para todas ellas.

Para crear una categoría se debe seguir la sigguiente sintaxis:

[categoría]: Título de tu publicación

O mejor aún más una subcategoría:

[categoría]: [subcategoría]: Título de tu publicación

Ejemplos:

Photoshop: Crear gifs animados

Guía: Photoshop: Crear gifs animados

Las categorías o subcategorías póngase en plural, singular, mayúsculas, minúsculas o con acentuaciones dan el mismo resultado en la página de dicha categoría. Si la categoría es por ejemplo "Guía", "guías" o "GUIAS" se almacenará en esa categoría, pero note que las URLs permacenecen sin acentuaciones y se desprecia la escritura mencionada para mostrar los mismos resultados para todas ellas.

Para crear una categoría se debe seguir la sigguiente sintaxis:

[categoría]: Título de tu publicación

O mejor aún más una subcategoría:

[categoría]: [subcategoría]: Título de tu publicación

Ejemplos:

Photoshop: Crear gifs animados

Guía: Photoshop: Crear gifs animados

Las categorías o subcategorías póngase en plural, singular, mayúsculas, minúsculas o con acentuaciones dan el mismo resultado en la página de dicha categoría. Si la categoría es por ejemplo "Guía", "guías" o "GUIAS" se almacenará en esa categoría, pero note que las URLs permacenecen sin acentuaciones y se desprecia la escritura mencionada para mostrar los mismos resultados para todas ellas.

Para crear una categoría se debe seguir la sigguiente sintaxis:

[categoría]: Título de tu publicación

O mejor aún más una subcategoría:

[categoría]: [subcategoría]: Título de tu publicación

Ejemplos:

Photoshop: Crear gifs animados

Guía: Photoshop: Crear gifs animados

Las categorías o subcategorías póngase en plural, singular, mayúsculas, minúsculas o con acentuaciones dan el mismo resultado en la página de dicha categoría. Si la categoría es por ejemplo "Guía", "guías" o "GUIAS" se almacenará en esa categoría, pero note que las URLs permacenecen sin acentuaciones y se desprecia la escritura mencionada para mostrar los mismos resultados para todas ellas.

Para crear una categoría se debe seguir la sigguiente sintaxis:

[categoría]: Título de tu publicación

O mejor aún más una subcategoría:

[categoría]: [subcategoría]: Título de tu publicación

Ejemplos:

Photoshop: Crear gifs animados

Guía: Photoshop: Crear gifs animados

Las categorías o subcategorías póngase en plural, singular, mayúsculas, minúsculas o con acentuaciones dan el mismo resultado en la página de dicha categoría. Si la categoría es por ejemplo "Guía", "guías" o "GUIAS" se almacenará en esa categoría, pero note que las URLs permacenecen sin acentuaciones y se desprecia la escritura mencionada para mostrar los mismos resultados para todas ellas.

Para crear una categoría se debe seguir la sigguiente sintaxis:

[categoría]: Título de tu publicación

O mejor aún más una subcategoría:

[categoría]: [subcategoría]: Título de tu publicación

Ejemplos:

Photoshop: Crear gifs animados

Guía: Photoshop: Crear gifs animados

Las categorías o subcategorías póngase en plural, singular, mayúsculas, minúsculas o con acentuaciones dan el mismo resultado en la página de dicha categoría. Si la categoría es por ejemplo "Guía", "guías" o "GUIAS" se almacenará en esa categoría, pero note que las URLs permacenecen sin acentuaciones y se desprecia la escritura mencionada para mostrar los mismos resultados para todas ellas.

Para crear una categoría se debe seguir la sigguiente sintaxis:

[categoría]: Título de tu publicación

O mejor aún más una subcategoría:

[categoría]: [subcategoría]: Título de tu publicación

Ejemplos:

Photoshop: Crear gifs animados

Guía: Photoshop: Crear gifs animados

Las categorías o subcategorías póngase en plural, singular, mayúsculas, minúsculas o con acentuaciones dan el mismo resultado en la página de dicha categoría. Si la categoría es por ejemplo "Guía", "guías" o "GUIAS" se almacenará en esa categoría, pero note que las URLs permacenecen sin acentuaciones y se desprecia la escritura mencionada para mostrar los mismos resultados para todas ellas.

Para crear una categoría se debe seguir la sigguiente sintaxis:

[categoría]: Título de tu publicación

O mejor aún más una subcategoría:

[categoría]: [subcategoría]: Título de tu publicación

Ejemplos:

Photoshop: Crear gifs animados

Guía: Photoshop: Crear gifs animados

Las categorías o subcategorías póngase en plural, singular, mayúsculas, minúsculas o con acentuaciones dan el mismo resultado en la página de dicha categoría. Si la categoría es por ejemplo "Guía", "guías" o "GUIAS" se almacenará en esa categoría, pero note que las URLs permacenecen sin acentuaciones y se desprecia la escritura mencionada para mostrar los mismos resultados para todas ellas.

Desde crear publicaciones, darles una categoría, conectarlas con otro artículo, seguir el feed RSS, editarlas, tener tu propia mensajería, dar puntos, eliminar y editar mensajes, hacer búsquedas y más características que señalaré ahora junto a sus propiedades.

Crear

Crea todo tipo de publicaciones. Desde extensos tutoriales con páginas conectadas hasta pequeños tips en un editor de "lo que ves es lo que obtienes".

• Categorías y subcategorías: Cada publicación puede almacenarse en una categoría y una subcategoría. Es muy simple: antes del título de la publicación se escribe la categoría y/o subcategoría junto con dos puntos. 
• Preguntas: Para preguntar se debe usar obligatoriamente el signo de interrogación y así se alamacenará en la categoría de preguntas.
• Conectar: Conecta tus publicaciones con otras mediante "más opciones" en el momento de crear o editar una publicación.
• Diseño: Puedes elegir entre el diseño estándar de publicación o el amplio en "más opciones" para, por ejemplo, presentaciones de imágenes grandes o vídeos de alta definición.
• Mensajes: Puedes dejar mensajes en absolutamente todas las publicaciones.
• Favoritos: Almacena tus publicaciones favoritas en tu perfil a través del icono de corazón.
• Puntuar: Puedes puntuar cada publicación y mensaje una vez por día como bueno (+) o malo (-).

Editar

Puedes editar todos los artículos y mensajes con algunas limitaciones.

• Publicaciones: Los amigos pueden editar libre y mutuamente sus publicaciones. Si no, sólo pueden recomendar ediciones para que luego sean aceptadas o rechazadas por sus publicadores.
• Mensajes: Puedes editar y eliminar cualquier mensaje tuyo o que estén en tus publicaciones.

Perfiles

Tienes tu propio perfil donde se muestran todo lo que públicamente haces.

• Historia: Es un registro de lo que haces en el sitio como los momentos en que publicas o dejas mensajes en otras publicaciones. Puedes comentar en cualquier historia de cualquier usuario.
• Agregar amigos: Envía peticiones de amistad desde el perfil que quieres agregar como amigo.
• Seguir: Puedes "seguir" lo que un usuario o amigo haga desde tu perfil para saber lo que él hace (si publica o agrega mensajes por ejemplo).

Buscador

Busca entre los artículos del sitio junto a resultados de Google.

Mensajería privada

Envía y recibe mensajes privados a cualquier usuario del sitio.

Feed RSS

Por cada publicación, perfil y categoría existe un canal de sindicación. Sólo agrega /feed al final de la URL y podrás acceder a ello. EL feed general se encuentra en www.documentoweb.com/feed.

Privacidad

La privacidad es mínima:

• Tu contraseña permanece encriptada.
• Si proporcionas tu e-mail puedes elegir entre dejarlo público o no. 
• Tus publicaciones guardadas sólo las puedes ver y editar tú.
• Tu mensajería privada, es privada.

Toda la información que circula es y debe ser pública, por lo tanto, debes cuidar o simplemente no proporcionar tu información personal, porque no la necesitamos.

Licencia

Todos las publicaciones están bajo la Licencia Creative Commons Atribución - No Comercial - Licenciar igual. Quiere decir que, puedes copiar y editar las publicaciones haciendo referencia a sus autores siempre y cuando no sea con fines comerciales y licencies bajo esta misma licencia.

Otras características

• URLs muy limpias
• Código XHTML 1.0 y CSS válido
• Código PHP listo para agregar fácilmente nuevas funciones.

Hace un tiempo deseaba un lugar donde todos pudiésemos intercambiar el conocimiento con la posibilidad de corregir lo incorrecto de otro o que me corrigiesen lo incorrecto, mostrar los errores, las preguntas y experiencias que conllevan a aprender y mejorar nuestro conocimiento. Como humanos tenemos la gran capacidad de aprender y, ¿de qué serviría nuestra vida si no fuese para aprender?.

Quiero aumentar nuestros conocimientos y para ello creé esta herramienta.

No es un nuevo Wikipedia con información neutral, un blog unipersonal, una red social ni un foro de discusión. No sé como llamarlo, pero posee las ideas que tienen ellos y que nos permitirán satisfacer este propósito:

Transmitir

Constantemente estamos transmitiendo conocimientos. Nuestros padres lo hacen, nuestros amigos, los blogueros, los foreros y casi cualquier persona que domine el tema más que el otro transmitirá su conocimiento.

Corregir

Cuando alguien te transmite un mensaje tú lo analizas y en caso de un fallo corriges porque no puedes aceptar algo diferente a lo que ya sabes, si te parece extraño o no tiene ninguna base.

Buscar y/o preguntar

Si no sabes algo, buscamos en información transmitida y/o corregida, en fuentes externas y si no, simplemente se pregunta para recibir respuestas y luego transmitir este nuevo conocimiento a otros y así volver al primer punto.

Las personas

Sin este concepto, ninguno de los tres anteriores funcionaría para realizar nuestro objetivo. Todo funciona con nosotros y siempre será así: una red interconcectada, una comunidad que transmite el conocimiento, corrige los errores, busca información, pregunta y lo más importante: aprende.

Bajo un simple sistema, un diseño aireado y distintas funciones espero que éste sea nuestro nicho de aprendizaje multidireccional.