Bridje - programación, diseño y maquetación web

Cómo hacer una pagina web (7) - Listas no ordenadas

2009-04-20T20:09:00.001+01:00

En HTML hay tres tipos de listas: no ordenadas, ordenadas y de definición. En este tutorial voy a explicar qué son las listas no ordenadas, pero antes es importante que sepas que un ítem de lista es cada uno de los "puntos" o partes que componen una lista, sea del tipo que sea.

¿Qué es una lista no ordenada o de viñetas?

Es aquella en la que si se cambiara el orden de los ítems la información seguiría teniendo sentido.
Se crea con el elemento UL (de Unordered List) y uno o más elementos LI (de List Item).
Con cada elemento LI se crea un ítem de lista.
Los navegadores visuales muestran cada ítem de lista en una línea diferente y con una viñeta precediendo al texto. Las viñetas pueden ser de tipo disc (círculo), circle (circunferencia) y square (cuadrado).

Abre en tu editor de texto la página HTML con recetas que estábamos haciendo. Borra los párrafos que hay después del H3 "Ingredientes" de Sushi (es decir, los dos Lorem ipsum... ), y escribe esto en su lugar:

<ul>
  <li>Arroz japonés</li>
  <li>Vinagre de arroz</li>
  <li>x gramos de atún</li>
  <li>x gramos de salmón</li>
  <li>6 langostinos</li>
  <li>Wasabi</li>
  <li>Gari</li>
  <li>Salsa de soja</li>
</ul>

Una lista no ordenada es ideal para listar ingredientes, ya que el orden de los ingredientes realmente no importa. Como ves, hemos creado nuestra lista no ordenada con las etiquetas de apertura y cierre <ul> y </ul> y varios items de lista entre ellas, cada uno de ellos formado por las etiquetas <li> </li> y un texto entre ambas.

Visualiza el resultado. Yo estoy usando los navegadores Flock, Firefox 3.0.8, Safari 4 Beta, IE 8 y Opera 9.64 y en todos ellos las viñetas de los ítems de lista son del tipo disc, aunque puede que haya alguno en el que no sea así.

Convendría que empezaras a usar varios navegadores para que vieras las diferencias entre ellos, como por ejemplo la diferencia en el tamaño de las viñetas. Según vayamos avanzando verás que de dolores de cabeza pueden llegar a dar las discrepancias entre navegadores, sobre todo las de Internet Explorer.

Listas anidadas

Una lista anidada (nested list) es una lista dentro de una lista. Para anidar una lista lo único que hay que hacer es crearla justo antes de la etiqueta de cierre </li> del ítem de lista donde queramos anidarla.

Por ejemplo, imaginemos que queremos que haya varios tipos de langostinos en nuestra receta; una manera fácil de reflejar esto es crear una nueva lista con los tipos de langostinos que queremos y anidarla dentro del ítem "langostinos".

<ul>
  <li>Arroz japonés</li>
  <li>Vinagre de arroz</li>
  <li>x gramos de atún</li>
  <li>x gramos de salmón</li>
  <li>6 langostinos
    <ul>
      <li>3 blancos</li>
      <li>3 tigres</li>
    </ul>
  </li>
  <li>Wasabi</li>
  <li>Gari</li>
  <li>Salsa de soja</li>
</ul>

Visualiza el resultado. Como ves, para remarcar que una lista es anidada y facilitar la lectura y comprensión de los usuarios, los principales navegadores muestran las listas anidadas indentadas y generalmente con un tipo de viñeta diferente al de la lista de la que dependen. Todos los navegadores que estoy usando emplean en la lista anidada viñetas de tipo circle, salvo Opera que mantiene las viñetas de tipo disc. Si anidárais una lista dentro de esta lista ya anidada, los principales navegadores mostrarían viñetas de tipo square, salvo Opera que mantendría las de tipo disc.

Por supuesto, podrías anidar una lista dentro de una lista dentro de una lista dentro de... pero lo aconsejable, como siempre, es mantener las cosas sencillas siempre que se pueda y facilitar la lectura y comprensión al usuario. Si te hace falta anidar muchas veces es mi opinión que el contenido no está lo suficientamente trabajado para internet.

Cómo cambiar una lista

Como con la mayoría de los elementos HTML, se puede "jugar" con las listas y cambiar su aspecto usando hojas de estilo. Con las hojas de estilo puede conseguirse que en vez de viñetas cada ítem de lista tenga una pequeña imagen, que los ítems no estén en diferentes líneas sino en la misma, que la distancia entre ítems sea mayor o menor, que los ítems anidados tengan un color de texto diferente... y muchísmas cosas más.

En un próximo post os explicaré cómo ver lo "invisible" y así empezar a comprender cómo funcionan las hojas de estilo. Aunque todavía nos queda un tiempo antes de meternos de lleno con ellas, y entonces entenderás por qué he seguido este orden. 8)

Curso básico de programación con PHP (6) - Los operadores

2009-04-16T12:24:00.004+01:00

Llegados a este punto sería interesante saber que operaciones podemos realizar con los datos que almacenamos en nuestras variables. No voy a poner todos los operadores, solamente los más utilizados.

Operadores aritméticos:

var1 + $var2 nos devuelve la suma de $var1 y $var2
$var1 - $var2 nos devuelve la diferencia entre $var1 y $var2
$var1 * $var2 (es un asterisco, olvidaos de la X) nos devuelve el producto de $var1 por $var2
$var1 / $var2 nos devuelve el cociente de $var1 por $var2
$var1 % $var2 nos devuelve el módulo, es decir, el resto de $var1 dividido por $var2

Operadores lógicos:

!$var1    (Negación), TRUE si $a no es TRUE.
$var1 && $var2    (Y), TRUE si tanto $var1 como $var2 son TRUE.
$var1 || $var2    (O), TRUE si cualquiera de $var1 o $b es TRUE.
$var1 xor $var2 (O exclusivo), TRUE si $var1 o $var2 es TRUE, pero no ambos.

&& y || tienen alias (and y or respectivamente) pero se usan mucho menos. Es decir, puedes usar indistintamente "$var1 && $var2" o "$var1 and $var2"

Operadores de asignación:

= , asigna lo que esté a la derecha a lo que esté a la izquierda;
.=, concatena (junta dos cadenas de texto) lo que esté a la derecha a lo que esté a la izquierda;
+=, *=, /=,-= ,%= , realiza la operación que precede al simbolo = con el valor situado a la derecha sobre el valor situado a la izquierda.

Operadores de comparación:

$var1 == $var2 (Igual), TRUE si $var1 es igual a $var2.
$var1 === $var2 (Idéntico), TRUE si $var1 es igual a $var2, y son del mismo tipo (por ejemplo, los dos son números).
$var1 != $var2 (Diferente), TRUE si $var1 no es igual a $var2.
$var1 !== $var2 (No idénticos), TRUE si $var1 no es igual a $var2, o si no son del mismo tipo (por ejemplo, uno es cadena y el otro es un número).
$var1 < $var2 (Menor que), TRUE si $var1 es escrictamente menor que $var2.
$var1 > $var2 (Mayor que), TRUE si $var1 es estrictamente mayor que $var2.
$var1 <= $var2 (Menor o igual que), TRUE si $var1 es menor o igual que $var2.
$var1 >= $var2 (Mayor o igual que), TRUE si $var1 es mayor o igual que $var2.

Este coñazo que acabo de soltar y que parece tan enrevesado no lo es en cuanto veais los siguientes ejemplos:


<?
$var1=10;
$var2=6;

$resultado=$var1 + $var2; //resultado valdría 16
$resultado=$var1 - $var2; //resultado valdría 4
$resultado=$var1 * $var2; //resultado valdría 60
$resultado=$var1 / $var2; //resultado valdría 1.66666666667
$resultado=$var1 % $var2; //resultado valdría 4
$resultado=$var1 + $var2 * 3; //resultado valdría 28
$resultado=($var1 + $var2) * 3; //resultado valdría 48
?>


<?
$var1=TRUE;
$var2=FALSE;

$resultado=$var1 && $var2; //resultado vale false 
$resultado=$var1 || $var2; //resultado vale true
$resultado=!$var1; //resultado vale false
?>


  <?
$var1=5;
$var2=3;
$cadena1="Hola ";
$cadena2="Mundo";

$var1+=$var2 //$var1 pasa a valer 8 
$cadena1.=$cadena2; //$cadena1 pasa a valer "Hola Mundo"
$cadena2.=$cadena1; //$cadena2 pasa a valer "Mundo Hola Mundo"

$resultado=$cadena1.$cadena2.$var1 //$resultado valdría "Hola Mundo Mundo Hola Mundo 8"
?>


  <?
$var1=5;
$var2="5";
$var3=3;

$resultado=$var1 == $var2; //resultado vale true
$resultado=$var1 === $var2; //resultado vale true
$resultado=$var1!=$var3; //resultado vale true
$resultado=$var1>$var3; //resultado vale true
$resultado=$var3>=$var1; //resultado vale false
?>

Como ejercicio propongo que hagáis un programita que nos muestre por pantalla cuantos segundos hay dentro de 732 años. Vamos a suponer que todos los meses tienen 30 días y que no hay años bisiestos. No quiero que simplemente mostréis el número, quiero que haya algo de texto introductorio (ej. "En 732 años hay....").

Y se me ha ocurrido otro más complicadito. Sabiendo que los años bisiestos son aquellos que son divisibles por 4, siempre y cuando no sean divisibles por 100 y que también son bisiestos cuando son divisibles por 400 (independientemente de que sean divisibles por 100). Calcula dentro de una variable si un año es bisiesto.

Ya me contaréis si habéis conseguido hacerlo sin problemas :)

Curso básico de programación con PHP (5) - Las variables

2009-04-09T10:13:00.004+01:00

¿Qué son las variables?. Pues la forma más sencilla de entender que es una variable es imaginarse que es una cajita. Una cajita donde puedes guardar lo que quieras para poder utilizarlo más tarde. En una caja podemos guardar fruta, zapatillas, gafas...pero ¿qué podemos guardar en una variable?. Pues en una variable podemos guardar todas estas cosas:

Datos booleanos (boolean): es decir, podemos guardar el valor "true" (verdad) o "false" (falso). Ya veremos más tarde para que nos puede ser útil almacenar esta información.
Enteros (integer): ... -2 -1 0 1 2 ...
Reales (float): 3.85 -243.22
Cadenas (string): Estas siempre van entrecomilladas (con comilla doble " o con comilla simple '). Ej. "No por mucho madrugar amanece más temprano".
Después hay otros dos tipos, denominados "compuestos" que veremos más adelante debido a su complejidad. Son los arrays y los objetos (estos últimos los veremos bastante más adelante).
Y finalmente hay un tipo especial, NULL, que sirve para indicar que la variable no tiene ningún valor.

¿Cómo se declara una variable?. Una variable se declara anteponiendo el signo dólar $ delante de la palabra que queremos usar como variable. Esa palabra debe empezar siempre por una letra o guión bajo y después por un número indeterminado de letrás, números o guiones bajo. Ejemplos:


  <?
$total=5;

$mensaje="Email enviado";

$mesa5=2.33;

$arroz_con_leche=true;

$recibido=NULL;
?>

¿Cómo se imprime (se muestra por pantalla) una variable?. Muy sencillo, simplemente hay que usar la funcion echo (como vimos en el último ejercicio) o la función print. Hay, además de estas dos, otra forma de mostrar el valor de una variable, pero lo veremos cuando empecemos a alternar código PHP con HTML.


  <?
$holaMundo="HOLA A TODOS";

echo $holaMundo;

//esto va a volver a repetir el mensaje de arriba

print $holaMundo;
?>

Yo estoy acostumbrado a usar echo pero eso es al gusto del programador. Otras personas, que por ejemplo hayan programado algo en C, probablemente se sientan más familiarizadas con print.

Cuidado con las mayúsculas y las minúsculas porque PHP es sensible a ellas. No es lo mismo $perro que $Perro. Procurad ponerles nombres lógicos a las variables. Si en una variable vamos a guardar el total de la compra no pongáis "$gatos" o "$ac33" poned "$totalCompra". Os lo digo porque no es la primera vez que me encuentro cosas así.

En el siguiente capítulo veremos como utilizar operadores con esas variables para hacerlas más interesantes y útiles.

Curso básico de programación con PHP (4) - Las sentencias y los comentarios

2009-03-30T14:52:00.012+01:00

El programa que hemos creado anteriormente (nuestro "Hola mundo") consta de una sola línea (si no tenemos en cuenta los tags de inicio y cierre). Esa línea se denomina "sentencia".

Para separar una sentencia de otra no sirve simplemente con pasar a la siguiente línea (aunque en algunos lenguajes como Javascript con un simple retorno de carro vale), tenemos que acabarla con un ";". Hay una excepción...si el siguiente elemento es un tag de cierre (?>) entonces no es necesario poner ; al final, aunque yo os recomiendo que lo pongáis siempre.

No todas las sentencias constan simplemente de una línea, algunas pueden constar de varias. Eso no quiere decir que no podamos reducir esas sentencias a una sola línea, eso siempre se puede hacer, pero a cambio perdemos legibilidad. Os pongo un ejemplo meramente ilustrativo, no es necesario que comprendáis por ahora lo que hace.

<? //Estas dos sentencias hacen exactamente lo mismo //esta consta de 4 líneas if ($coche=="rojo"){ echo "Mi coche es rojo"; $salir=true; } //esta simplemente de una sola línea if ($coche=="rojo"){ echo "Mi coche es rojo"; $salir=true; } ?>

No sé a vosotros pero a mí me parece mucho más legible la primera sentencia :)

Supongo que os estáis preguntando por qué después de if ($coche=="rojo"){ no hay punto y coma. Pues porque no es una sentencia en si misma, es parte de una sentencia (en concreto es parte de una sentencia de control, que ya veremos más adelante lo que es). Esa sentencia de control acaba en la llave de cierre "}" que tampoco lleva punto y coma porque se da por hecho que cierra una sentencia.

Si os fijáis en el código, los comentarios que pongo empiezan por // . Es una manera de decir a PHP que esas líneas son comentarios y que no hace falta que las interprete (más que nada porque darían error). Cuando se quieren comentar varias líneas se puede hacer línea por línea con // o encerrarlas entre /* */

<? //este es un comentario de una sóla línea /* Este es un comentario de varias líneas */ ?>

Los comentarios son muy necesarios a la hora de programar. Imaginad que alguien tiene que revisar vuestro código o si vosotros tenéis que hacer cambios dentro de un año...os podéis volver locos. Sé que da muchas pereza pero hay que acostumbrarse a hacerlo. No hace falta comentar todo, solamente lo que tenga cierta complejidad y siempre que ayude a entender el código más rapidamente.

En las próxima lección aprenderemos lo que es una variable y como usarla. Las variables son vitales a la hora de programar así que no os podéis saltar esa lección :)

Curso básico de programación con PHP (3) - Nuestro primer script

2009-03-23T09:31:00.003Z

Los ficheros que contienen código PHP suelen, por norma general, tener la extensión .php. En algunas sitios veréis extensiones como .phtml (que indica que hay código PHP dentro de HTML), .php3 (para indicar que es PHP version 3), etc, pero nosotros solamente vamos a utilizar .php porque realmente la extensión no afecta a la ejecución y es meramente cosmético.

Vamos a ver lo primero que hay que aprender sobre la sintaxis de PHP: todo código PHP ha de ir entre una de las siguientes etiquetas (tags):

<? ?> (es el que siempre uso yo)
<?php ?> (también es bastante común)
<script language="php"> </script> (no lo he visto en mi vida en una página)

Ejemplo:

<? echo "HOLA MUNDO"; ?>

Esas etiquetas son la manera que tiene el servidor web de identificar código PHP dentro de una página, si no, por defecto, va a interpretar todo el código como si fuera texto normal. En el ejemplo anterior, si quitásemos los tags, no se ejecutaría la función "echo" (es una función que se encarga de mostrar por pantalla el contenido que le sigue, en este caso "HOLA MUNDO"). Es decir, veríamos en nuestro navegador echo "hola mundo" en vez de simplemente hola mundo ya que el servidor web no podría distinguir que eso es código PHP y que queremos que lo ejecute (o mejor dicho, el servidor web no va a llamar al intérprete de PHP para que lo ejecute).

Antes de seguir adelante quiero que todos hagáis el ejemplo anterior. Para ello vamos a suponer que instalasteis XAMPP en la carpeta "c:\xampplite". Dentro de esa carpeta encontraréis otra llamada htdocs. Esa carpeta htdocs es el "document root" por defecto de XAMPP.

¡Nota!: El document root es el lugar donde el servidor web va a buscar las páginas que, por ejemplo, queramos visualizar en nuestro navegador. En un servidor web podemos encontrar múltiples "document root", por ejemplo dependiendo del dominio que visitemos (os recuerdo que un mismo servidor web puede alojar múltiples dominios) o por el puerto que accedamos a él (http://www.ejemplo.com:8080, donde 8080 es el puerto).

Pues bien, en esa carpeta htdocs crearos otra carpeta con el nombre que queráis (por ejemplo "cursophp"). Ahí es donde vamos a ir poniendo los diferentes scripts (páginas PHP) que vayamos haciendo. Un vez nos hayamos situado en la carpeta "cursophp" creamos en ella el fichero "tags.php" con el contenido del ejemplo anterior.

Recordad que el fichero tiene que ser texto plano. No vale crearlo con Word y después simplemente cambiarle la extensión a .php, ya que MS Word crea un fichero binario y no de texto. Usad el Notepad o el Notepad++ que os recomendé más previamente.

Llegó el momento de la verdad jejejeje, para ver vuestra primera página hecha con PHP tendréis que ir a esta dirección

http://localhost/cursophp/tags.php

¿Podéis leer el texto "HOLA MUNDO"?...pues enhorabuena, ya habéis creado vuestro primer script de PHP :)

¡Importante! Mucho cuidado con las mayúsculas, en sistemas Linux (es la plataforma usada mayoritariamente por los servidores web) hay distinción entre mayúsculas y minúsculas. Así que tags.php no es lo mismo que Tags.php o tags.Php y si lo ponéis mal en la barra de direcciones os dará error. Como estamos trabajando en Windows da igual como lo pongáis pero acostumbraos a poner exactamente el mismo nombre.

Ahora una curiosidad. Lo que he puesto de "Hola mundo" tiene su razón de ser. Por lo general, cuando se aprende un nuevo lenguaje, el primer ejemplo que se suele hacer es un simple "Hola mundo" (o "Hello world" en la versión inglesa). Es simplemente el primer paso para ver como funciona el nuevo lenguaje que queremos aprender.

Cómo hacer una página web (6) - Encabezados

2009-03-19T22:04:00.020Z

Un encabezado se asemeja al título de una noticia del periódico, que resume e informa al lector sobre el contenido que viene a continuación. En la sección 7.5.5 de la Especificación HTML 4.01 se señala que un encabezado describe brevemente el tema de la sección que introduce, y que hay 6 niveles de encabezado -H1, H2, H3, H4, H5 y H6-, siendo H1 el más importante y H6 el menos importante.

Descárgate el ejemplo práctico. Éste es el código HTML (con el texto de los párrafos acortado):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Ejemplo práctico de encabezados HTML - Bridje blog</title> </head> <body>

<h1>Recetas de mi comida favorita</h1>
  <h2>Sushi</h2>
    <h3>Ingredientes</h3>
     <p>Lorem ipsum...</p>
     <p>Lorem ipsum...</p>
    <h3>Preparación</h3>
     <p>Lorem ipsum...</p>
     <p>Lorem ipsum...</p>
   <h2>Risotto</h2>
    <h3>Ingredientes</h3>
     <p>Lorem ipsum...</p>
     <p>Lorem ipsum...</p>
    <h3>Preparación</h3>
     <p>Lorem ipsum...</p>
     <p>Lorem ipsum...</p>
  <h2>Paella</h2>
    <h3>Ingredientes</h3>
     <p>Lorem ipsum...</p>
     <p>Lorem ipsum...</p>
    <h3>Preparación</h3>
     <p>Lorem ipsum...</p>
     <p>Lorem ipsum...</p>
  <h2>Pimientos rellenos de atún</h2>
    <h3>Ingredientes</h3>
     <p>Lorem ipsum...</p>
     <p>Lorem ipsum...</p>
    <h3>Preparación</h3>
     <p>Lorem ipsum...</p>
     <p>Lorem ipsum...</p>
</body>
</html>

Como ves, he empleado los encabezados H1, H2 y H3 de una manera jerárquica, dividiendo el contenido en "bloques" de secciones y subsecciones. Los H3 abren dos secciones ("Ingredientes y "Preparación") que forman parte de una sección mayor abierta por un H2 (ej. "sushi"), que a su vez forma parte de una sección todavía mayor abierta por un H1 ("Recetas de mi comida favorita").

La sección de contenido abierta por un encabezado se da por terminada si después de ese encabezado hay otro de igual o mayor importancia o si se acaba el documento; por ejemplo, la sección de contenido abierta por el H2 "risotto" termina cuando aparece otro encabezado H2, "paella".

Los encabezados facilitan la lectura al internauta y le proporcionan una idea de cuál es la estructura del documento, sus secciones y subsecciones: para facilitar la navegación y comprensión de la estructura del documento, los autores deberían usar encabezados apropiadamente anidados (por ejemplo, H1 seguido por H2, H2 seguido por H2 o H3, H3 seguido por H3 o H4, etc.). (Techniques for WCAG 2.0 -Técnicas para WCAG 2.0 del W3C)

Normalmente los navegadores visuales ayudan en esta comprensión de la estructura mostrando los encabezados con un mayor (H1) o menor (H6) tamaño, dejando clara la jerarquía, y en negrita y con márgenes para diferenciarlos del cuerpo de texto. Te he hecho un documento HTML en el que puedes comparar cómo muestra tu navegador los diferentes niveles de encabezado.

Además, los internautas ciegos, con problemas de visión, o con dificultades de aprendizaje que emplean lectores de pantalla, se sirven de los encabezados para navegar más fácilmente por la página y para hacerse una idea de cómo se estructura el documento. Si te manejas con el inglés, te recomiendo que veas Importance of HTML Headings for Accessibility, un vídeo de Youtube en el que un consultor de accesibilidad ciego que emplea el lector de pantalla JAWS cuenta lo importante que es para él una buena estructuración de las páginas web a base de encabezados.

¡Importante! No debes emplear un encabezado sólo para darle una determinada apariencia a tu texto. Recuerda, el HTML sirve para estructurar, y para dar formato al documento HTML están las Hojas de Estilo, que veremos más adelante.

Los buscadores dan más importancia a un encabezado que al cuerpo de texto de la página, por ello es aconsejable que añadas al mismo palabras clave que sepas que son de interés en las búsquedas de los internautas y que, por supuesto, tengan que ver con el contenido. Sé de maquetación, pero apenas sé cómo funcionan los buscadores; sin embargo, según tengo entendido, buscadores como Google pueden detectar juego sucio e ignorar tus encabezados si abusas de demasiadas palabras clave o escribes términos que no tengan que ver con el contenido. Seguiré informándome porque es ciertamente un tema muy interesante.

Como norma, te recomendaría que fueses "legal" y le facilitaras la vida a tus visitantes poniendo encabezados claros, breves en lo posible, y solamente los necesarios. Como curiosidad, te diré que en 8 años sólo he usado el encabezado H5 maquetando un sitio web que estaba lleno de Leyes larguísimas y necesitaba muchos niveles de división. Lo cierto es que el resto de las veces me ha bastado con usar del H1 al H4.

Y hasta aquí la parte "bonita". Y es que hay un debate muy (MUY) encendido sobre cómo usar los encabezados. El W3C no es muy específico y acaban surgiendo opiniones contrarias sobre cómo deben hacerse las cosas. Es un tema muy lioso y por ello me he limitado a ponerte un ejemplo de página sin menús ni nada que la complique y explicarte cómo creo que deberían hacerse las cosas (y como las hace mucha gente) cuando el documento es así de sencillo 8)

Por ponerte un ejemplo de uno de los temas del debate, el W3C no especifica cuántos H1 puede haber por página, y la gente tiene diferentes opiniones al respecto. Yo personalmente sólo lo empleo una vez por página, y si veo que un documento necesita claramente dos H1 (es decir, tiene dos temáticas bien diferenciadas), entonces lo divido en dos documentos, cada uno con su H1.

Curso básico de programación con PHP (2) - El entorno de trabajo

2009-03-18T09:18:00.007Z

Al igual que el HTML, el código PHP de una aplicación está simple y llanamente creado con texto plano, es decir, podemos usar cualquier editor de texto para programar, el bloc de notas de Windows (Notepad) por poner un ejemplo. El problema del Notepad es que es un editor muy limitado y para 10 líneas de código es suficiente, pero cuando son miles...puede ser una locura. Hay otros editores gratuitos más potentes que, por ejemplo, colorean la sintaxis (según el lenguaje que estés usando pone unos colores u otros a las palabras) que ayuda muchísimo a la hora de hacer legible el código.

Cuando hay diseño de por medio a mí me gusta utilizar el editor Dreamweaver, pero para código PHP puro y duro prefiero otros editores como Ultraedit o Editplus (los dos son de pago), que son más livianos. Un editor que es gratuito y muy completo es el Notepad++ . Os recomiendo que lo instaléis para hacer vuestros próximos ejercicios.

http://notepad-plus.sourceforge.net/uk/site.htm

Nosotros NO vamos a trabajar en principio directamente en un servidor de "producción". ¿Qué significa eso de servidor de "producción"?, pues estamos hablando del servidor que va a alojar nuestras aplicaciones web una vez las hayamos finalizado y al que tendrá acceso el usuario final (en nuestro caso los internautas).

En el mundo laboral no se debe desarrollar sobre un servidor en modo "producción" (o al menos no se debería hacer aunque a veces no queda más remedio), ya que si te equivocas en algo esto puede afectarle a muchos usuarios. Así que por lo general se trabaja en local, es decir, las pruebas se efectúan en el propio ordenador del programador o en un servidor de "desarrollo" que compartan varios programadores.

Así que ese es el siguiente paso a realizar, instalar en nuestro ordenador un servidor web interconectado con PHP y para futuros ejercicios también la base de datos MySQL.

Cuando empecé a programar en PHP instalaba por separado el servidor Apache, Mysql y PHP y los configuraba para trabajar juntos. No es que fuera muy complicado, solamente había que seguir ciertos pasos, pero lo cierto es que desde que apareció Xampp es absurdo perder el tiempo en eso.

Pero, ¿Qué es Xampp?. Xampp es un conjunto de aplicaciones orientadas al desarrollo web y unificadas en un solo paquete para que la instalación sea mucho más sencilla. Con Xampp instalaremos de un plumazo el servidor web apache, PHP, MySQL, ProFTPD entre otras aplicaciones. Existen versiones para Windows, Linux, Solaris y Mac OS X aunque nosotros usaremos la versión de Windows ya que es el Sistema Operativo más usado en los ordenadores "caseros".

Dentro de la versión Windows nos encontramos con dos versiones. XAMPP y XAMPP LITE. La diferencia principal entre las dos estriba en el número de aplicaciones incluidas en cada una de ellas y que mientras que la versión "normal" se instala como un programa más, la versión lite simplemente hay que descomprirla en una carpeta y listo. Para nuestro propósito XAMPP lite cumple con creces los requisitos de desarrollo y es la que vamos a instalar.

Para ello id a la página oficial de XAMPP, bajad hasta la sección XAMPP Lite y descargad el ejecutable "EXE (7-zip)" (podéis bajaros si queréis la versión ZIP, pero el tamaño del fichero es bastante mayor).

Una vez hayáis descargado el fichero, ejecutadlo y elegid donde descomprimir el contenido. Si elegís un directorio diferente a la raíz de una unidad, es decir, un destino diferente a "c:\" o "d:\" por ejemplo, tendréis que realizar un paso más a la hora de hacer operativa nuestra aplicación XAMPP. Ese paso consiste simplemente en ejecutar el fichero "setup_xampp.bat" que encontraréis en el directorio donde habéis descomprimido XAMPP. Una vez hecho eso, o directamente si habéis instalado XAMPP en la raíz de la unidad, ejecutad el fichero "apache_start.bat". Si todo ha ido bien os encontraréis ante una ventana como esta:

Es posible que el firewall de Windows os pregunte si queréis bloquear o no el servidor Apache. Obviamente le daremos a desbloquear para poder utilizarlo.

En esta ocasión solamente hemos "levantado" (como se denomina en la jerga informática al hecho de ejecutar un servidor) el servidor Web y no otros servidores como MySQL, ya que por el momento es lo único que vamos a necesitar para nuestras prácticas.

Para comprobar que todo ha ido correctamente lo que vamos a hacer es abrir un navegador, introducir en la barra de direcciones lo siguiente: "http://localhost" y si os aparece esta página:

entonces es que todo ha ido bien y ya podemos ponernos manos a la obra :)

¡Importante! En Windows Vista, por defecto, la dirección "http://localhost" no va a mostrar ninguna página. Eso es porque esa dirección no está mapeada con nuestra IP local. Podemos hacer dos cosas, introducir directamente la IP local, es decir "http://127.0.0.1" o abrir en modo administrador el fichero "C:\Windows\System32\drivers\etc\hosts" y añadir la siguiente línea al final: 127.0.0.1 localhost

Ahora que ya tenemos nuestro editor y nuestro servidor web instalados ya podemos continuar con el resto del tutorial y empezar ya a programar. Pero eso ya será en el próximo capítulo :)

Cómo hacer una página web (5) - Elementos HTML

2009-03-16T21:05:00.021Z

En anteriores tutoriales vimos cómo poner un título a tu página web empleando el elemento TITLE y cómo escribir párrafos con el elemento P. Como supongo que ya habrás adivinado, los elementos HTML sirven para estructurar una página web, catalogando su contenido y dando así sentido al conjunto. Si sólo escribes texto pero no lo incluyes como parte de elementos HTML, al navegador le será imposible interpretar qué es un título, qué es un párrafo, qué es una lista, etc. Y si el navegador no sabe qué es qué, no podrá mostrarlo de la manera adecuada, como por ejemplo con unos determinados márgenes y tipo de texto.

Ahora me gustaría que imprimieras la tabla con los elementos HTML 4 que aparece en el site del W3C español. Añado además la versión en inglés para que sepas cómo se denomina a los elementos de manera internacional.

Como verás, tenemos una tabla en cuya primera columna aparece el nombre de los elementos. Éste es a veces una palabra completa (CAPTION, TABLE, etc.), pero lo más habitual es que sea una abreviatura o acrónimo, como por ejemplo UL (unordered list, lista no ordenada).

En los encabezados de las siguientes tres columnas de la tabla leemos Etiqueta inicial (o de apertura), Etiqueta final (o de cierre) y Vacío. Esto hace referencia a tres tipos de elementos HTML, dependiendo de cómo se creen:

Elementos que DEBEN tener una etiqueta de apertura y otra de cierre.
- Son los elementos de la tabla cuyas tres columnas mencionadas están vacías.
- La etiqueta de apertura consta del signo "menor que" + el nombre del elemento + el signo "mayor que": <nombre-del-elemento>
- La etiqueta de cierre consta del signo "menor que" + la barra oblicua + el nombre del elemento + el signo "mayor que": </nombre-del-elemento>
- Entre ambas etiquetas hay contenido.
Elementos con contenido cuya etiqueta de cierre y/o de apertura son opcionales.
- Son los elementos de la tabla en cuya columna "Etiqueta inicial" y/o columna "Etiqueta final" hay una "O" de opcional.
- Son elementos que, como los primeros, tienen un determinado contenido.
Elementos que NUNCA tienen etiquetas de cierre.
- Son los elementos de la tabla en cuya columna "Vacío" hay una "V".
- Estos elementos son clasificados como vacíos porque no tienen contenido. Un ejemplo es BR, que sirve para forzar un salto de línea, o IMG, para insertar una imagen en la página.

¡Importante! Aunque la Especificación HTML 4.01 permita que no haga falta escribir las etiquetas de ciertos elementos, te recomiendo usar las etiquetas de apertura y cierre en TODOS los elementos que no estén vacíos. Si algún día decides pasarte al XHTML, el acostumbrarte a emplear las etiquetas te puede ahorrar muchos quebraderos de cabeza. Por esta misma razón, aunque las etiquetas puedan escribirse tanto en mayúsculas como en minúsculas, te recomiendo que lo hagas siempre en minúsculas.

Respecto a la quinta columna, basta por ahora con indicarte que en ella se señala con una "D" a los elementos desaprobados, es decir, elementos que no deben usarse con el HTML 4.01 Strict.

Aplicando buenas técnicas de programación

2009-03-14T21:16:00.007Z

Quería descargarme el nuevo navegador Opera (la versión 10) y me he topado sin querer con este interesante artículo (en inglés) donde se explican diferentes técnicas para hacer un código Javascript eficiente, robusto y legible.

Aunque está enfocado al lenguaje de programación Javascript lo cierto es que son en su mayoría reglas universales que se pueden aplicar a cualquier otro lenguaje.

Si eres un programador veterano y no aplicas estas técnicas ya es hora de "renovarse" y actualizar tu forma de programar y si eres "novato" es un buen momento para empezar a programar usando estas directrices que, aunque al principio nos parezca que complican las cosas, al final nos ahorrarán muchos quebraderos de cabeza.

Espero que disfrutéis con la lectura.
http://dev.opera.com/articles/view/javascript-best-practices/

Cómo hacer una página web (4) - El W3C

2009-03-13T17:37:00.014Z

Es inevitable que, antes de continuar con la parte práctica, te explique algunas cosas que son muy, muy importantes.

A partir de ahora mencionaré bastante al W3C (World Wide Web Consortium), cuya misión es, tal y como se describe en su site español, guiar la Web hacia su máximo potencial a través del desarrollo de protocolos y pautas que aseguren el crecimiento futuro de la Web.

Yo me quedo con esto: Para que la Web alcance su máximo potencial, las tecnologías Web más importantes deben ser compatibles entre sí y permitir que cualquier hardware y software, utilizado para acceder a la Web, funcione conjuntamente. El W3C hace referencia a este objetivo como 'interoperabilidad Web'. Al publicar estándares abiertos (no propietarios) para lenguajes Web y protocolos, el W3C trata de evitar la fragmentación del mercado y, por lo tanto, la fragmentación de la Web.

Y es que el W3C crea las llamadas W3C Recommendations (Recomendaciones del W3C), documentos que describen cuáles deberían ser las prácticas estándares de la industria Web: Una Recomendación del W3C es lo mismo que un estándar Web, sólo que una especificación desarrollada por el W3C es estable, contribuye a fomentar la interoperabilidad en la Web, y ha sido revisada por los Miembros del W3C, que favorecerán su adopción por parte de la industria.

Y, si le echas un vistazo a la lista de miembros del W3C, te darás cuenta por qué hay que tener en cuenta lo que proponen.

¿Estándares abiertos? ¿no propietarios? ¿fragmentación de la Web? ¿qué tipo de lío es éste, Bríd?

Un ejemplo que te lo va a dejar un poquito más claro; seguro que has escuchado alguna vez que hay videojuegos, o programas de TV, que pueden causar un ataque en personas con epilepsia fotosensitiva. Pues bien, en una de las Recomendaciones del W3C se establecen unas pautas para hacer que el contenido web sea accesible para personas con discapacidades, y en uno de sus puntos se pide a los desarrolladores web que no hagan parpadear la pantalla hasta que los navegadores no permitan que los internautas puedan parar el parpadeo a voluntad. Esta Recomendación se llama Web Content Accesibility guidelines 1.0 (Pautas de Accesibilidad al Contenido en la Web 1.0.)

Otra Recomendación del W3C muy importante es la HTML 4.01 Specification ( Especificación HTML 4.01). Cualquier desarrollador web debe tener conocimiento de estos estándares, de estas Recomendaciones o Especificaciones, y al mismo tiempo conocer cómo cumplen los principales navegadores con las Recomendaciones. Porque, efectivamente, también hay estándares propuestos para los navegadores. Esto explica un poco más la frase que subrayé arriba: ¿para qué fragmentar el mercado creando por ejemplo elementos HTML que sólo tu navegador va a saber interpretar? ¿no será mejor ponerse de acuerdo y que haya un solo HTML que sea interpretado igual por todos los navegadores?

Bueno, ésta es al menos la teoría, en la práctica no es así ni mucho menos. Así a voz de pronto me viene a la mente que son muchisimos los maquetadores que se ***** en Microsoft Internet Explorer todos los días. ¡Pero dejémoslo aquí por hoy!

Nota: en el site español de la W3C no hay traducciones de todo el contenido del inglés al español, de ahí que los enlaces a las Pautas de Accesibilidad al Contenido en la Web 1.0 y la Especificación HTML 4.01 enlacen con conclase.net, donde Varias personas y organizaciones se han ofrecido voluntarias para traducir al castellano algunas de las recomendaciones del W3C. A aquellos que se manejen con el inglés les recomiendo que sean los documentos originales los que le sirvan de referencia, ya que son los únicos normativos.

Cómo hacer una página web (3) - párrafos

2009-03-12T10:01:00.018Z

Bien, pues seguimos con mi-pag-web.html. Ahora vas a poner algo de texto en tu página web. Para evitar distracciones, sobre todo por mi parte, voy a emplear el denominado Lorem ipsum, un texto de relleno muy usado tanto en el diseño gráfico como en el web.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

A pesar de no haber tenido más remedio que usarlo a menudo, quiero dejar claro que en el ámbito profesional lo ideal sería prescindir de texto de relleno para diseñar un sitio web. Los resultados pueden ser desastrosos. En diseño web una pequeña variación en la longitud de un texto puede implicar tener que rehacer muchas cosas, aparte de que si se conoce con anterioridad la cantidad de texto a poner en las páginas, te haces una idea del tipo de diseño que necesitas, los espacios en blanco, los colores.. mil detalles!

Pues manos a la obra. Copia la primera frase del Lorem ipsum y mira el código de mi-pag-web.html ¿Ves el elemento BODY (cuerpo)? Es aquel definido por la etiqueta de apertura <body> y la etiqueta de cierre </body>. Pues es entre medias de estas etiquetas donde vas a escribir tu primer párrafo; es decir, dentro del elemento BODY.

<body></body>

Los párrafos se crean con el elemento P (de paragraph), que está definido por la etiqueta de apertura y la etiqueta de cierre . Crear un párrafo es tan sencillo como escribir ambas etiquetas dentro de las del elemento BODY.

<body></body>

Ya está, has definido un párrafo. En esencia, le has indicado al navegador que lo que vas a escribir es un párrafo. Ahora sólo te falta pegar la primera frase del Lorem ipsum.

<body> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </body>

Crea ahora otro párrafo, con la segunda frase del Lorem ipsum.

<body> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </body>

¡Importante! el código puede escribirse seguido, no afecta al resultado. Si lo escribo en líneas diferentes es por claridad.

Salva el documento y visualízalo en el navegador.. por fin, contenido en tu pagina web! 8)

Y ahora, haz una prueba... quita las etiquetas de párrafo, de manera que el BODY quede así:

<body> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </body>

Vuelve a salvar y visualiza el resultado en el navegador. Como ves, el texto ya no está formateado como párrafos, con sus correspondientes márgenes, sino que se muestra seguido. Vuelve a definir los párrafos, y si quieres (yo sí!) seguimos mañana! ;)

Curso básico de programación con PHP (1)

2009-03-12T09:59:00.013Z

No sabía muy bien como empezar este curso ya que partimos de casi cero, así que al final he pensado que vamos a ser muy prácticos, sin ahondar mucho en la teoría y sin utilizar muchos tecnicismos. Al principio programar es muy frustrante y si encima metemos mucho rollo vais a abandonar a la primera de cambio.

Os voy a contar, eso sí, como funciona esto de las páginas web. Como ya he comentado alguna que otra vez, una página web se encuentra alojada en un servidor. Un servidor no es más que un ordenador, de hecho,como veremos en el siguiente capítulo, vuestros ordenadores pueden perfectamente usarse como servidores. La única condición para que el servidor muestre las páginas web es que tenga instalado un programa que se llama "servidor web" (o webserver en inglés). El servidor web más famoso y sobre el que corren la mayoría de sites en el mundo se llama Apache (http://httpd.apache.org).

Una página web no deja de ser texto puro y duro. Con cualquier editor de texto plano, como el notepad de Windows, puedes hacer una página web. El metaleguaje que se usa para crear una página web se llama HTML. Si sobre esta página web hacéis click con el botón derecho y seleccionáis "Ver código fuente" (o algo parecido) veréis el código HTML de la propia página. Aquí no vamos a aprender nada de HTML, eso se lo dejaremos a Bríd, por ahora vamos a centrarnos en PHP.

PHP es un lenguaje del lado del servidor. ¿Qué quiere decir eso?, pues que se ejecuta en el servidor y nunca en los ordenadores de los usuarios que están visitando la página web. Los lenguajes del lado del cliente son los que se ejecutan en los ordenadores de los usuarios y javascript es el más claro ejemplo de este tipo de lenguajes.

¿Por qué se usan lenguajes de programación?. Pues porque sin ellos todo sería "estático", los usuarios no podrían interactuar...imagináos este blog sin un lenguaje de programación ni una base de datos, por cada post tendríamos que crear una página nueva y después editarla con el notepad cada vez que hubiera un comentario nuevo. Eso sin contar los cambios en las estadísticas, etc,etc....vamos, sería inviable. Pues con PHP y una base de datos MySQL se puede hacer todo automáticamente, ¿genial no?

En el siguiente capítulo explicaré como instalar un servidor web en vuestro propio ordenador y así empezar a hacer vuestras primeras aplicaciones.

Cómo hacer una página web (2) - TITLE

2009-03-11T17:44:00.043Z

1) Abre un editor de texto

Creo que la mejor manera de aprender es usando un simple editor de texto, como el Notepad++ (el blog de notas de Windows no colorea el código). Ya tendrás tiempo de pasar a un programa tipo Dreamweaver (genial!) y permitirte el lujo de olvidarlo todo ;)

2) Copia y pega la estructura base

Copia y pega este código en el editor de texto. Se trata de la estructura base de un documento HTML 4.01 Strict. Te lo explicaré todo más adelante.

3) Ponle un título a la página

El título de la página se llama en HTML elemento TITLE, y está formado por una etiqueta de apertura, el texto que se desee, y una etiqueta de cierre:

<title>Texto del título</title>

El título es muy importante y debe elegirse cuidadosamente. Los buscadores lo usan para indexar, y cuando se hace una búsqueda en Google, es el título lo que más sobresale en cada resultado, siendo determinante a la hora de informar al usuario sobre el contenido general de la página.

4) Visualiza la página en el navegador

Una vez elegido el título, salva el documento con el nombre que estimes oportuno y la extensión html. Por ejemplo: mi-pag-web.html. Si estás usando Notepad++ notarás que los colores cambian y tu código queda mucho más claramente dividido.

Ahora sólo tienes que abrir tu recién creado documento en un navegador. Para ello puedes arrastrar el archivo a la ventana del navegador o usar Archivo > Abrir archivo en la barra de menú (en la parte superior del navegador).

Como verás, parece no haber nada por el momento, pero si te fijas en la barra de título del navegador (la que está arriba del todo), ¡comprenderás por qué se llama así! Y es que el título que le pongas a cada página aparecerá en la barra de título al abrir el documento en el navegador.

Cómo hacer una página web (1) - intro

2009-03-11T08:05:00.033Z

Mi objetivo con esta serie de tutoriales es que, quien los siga desde el primero hasta el último, acabe entendiendo un poquito mejor cómo se construye una página web. Espero humildemente que sirvan tanto para los que quieren defenderse modificando su template en Blogger o cualquier otro sitio de blogs, como para los que al final se lancen a la aventura de hacer su propio site.

Hay muchísimos recursos online, pero pocos he visto que partan de cero o que no te pongan la cabeza como un bombo por la cantidad de definiciones que escriben desde el principio. Soy consciente de que quienes comienzan normalmente prefieren ponerse manos a la obra y aprender haciendo las cosas, así que, dentro de lo posible, evitaré parrafadas (aunque a veces será inevitable). Edito el 19 de marzo.. imposible no poner parrafadas, lo siento! XD

Yo voy a explicar cómo se hacen las cosas usando HTML 4.01 Strict, CSS y buenas prácticas (ej. intentar maximizar la accesibilidad). Soy humana y sé de antemano que algo faltará, otro tanto sobrará y en algunas cosas me equivocaré. Sólo espero que, quienes estéis dispuestos a aprender, perdonéis de antemano estas cosas.

Aunque es más complicado que todo esto, resumiré diciendo que con el HTML definimos, a través de etiquetas, de qué tipo es un determinado contenido de la página (ej. tal texto es un párrafo, tal otro es un encabezado, esto es una imagen, etc.); las CSS sirven para dar formato a ese contenido (ej. el color del botón, el tamaño del encabezado, etc.); y la programamación... la programación se la dejamos a Jesús, que próximamente comenzará a escribir en Bridje.