Blog de Web Idea - Recursos de Programación y Optimización Web » Programación Web http://www.webidea.es/blog Optimización web, SEO, Programación, PHP, Javascript, XHTML Thu, 06 Oct 2011 07:58:13 +0000 en hourly 1 http://wordpress.org/?v=3.3 Bucles en PHP http://www.webidea.es/blog/bucles-en-php/ http://www.webidea.es/blog/bucles-en-php/#comments Mon, 08 Mar 2010 15:06:50 +0000 admin http://www.webidea.es/blog/?p=201 Los bucles son otro de los elementos más comúnmente usados en programación. Los bucles permiten la repetición de una instrucción o conjunto de instrucciones mientras se cumpla una condición.

Existen bucles de tres tipos:

Bucles while

Son los más básicos. Suelen basarse en una única condicion.

Sintaxis: Mientras “a” sea menor que “b”

Éste sería un ejemplo de bucles con while:

<!– Ejemplo de bucles con while en Webidea.es –>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<head>
<title>Ejemplo de Bucles</title>
</head>
<body>
<?php
$a = 0;
$b = 3;
while($a<$b){
echo "a es menor que b";
$a++;
}
?>
</body>
</html>

Bucles for

De definición algo más compleja que los bucles while, la instrucción for es la más completa de todas, puesto que nos permite manipular el funcionamiento de todo el bucle en una sola línea.

Sintaxis: Para un valor inicial de “a”, mientras “a” sea menor que “b”, le incrementamos en 1 unidad a “a”.

Éste sería un ejemplo de bucles con for:

<!– Ejemplo de bucles con for en Webidea.es –>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<head>
<title>Ejemplo de Bucles</title>
</head>
<body>
<?php
$a = 0;
$b = 3;
for($a=0; $a<$b; a++){
echo "a es menor que b";
}
?>
</body>
</html>

Bucles foreach

Los bucles foreach son especialmente útiles para recorrer arrays, asignándole un nombre fijo a cada elemento.

Éste sería un ejemplo de bucles con foreach:

<!– Ejemplo de bucles con foreach en Webidea.es –>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<head>
<title>Ejemplo de Bucles</title>
</head>
<body>
<?php
$frutas = array("naranja","pera","manzana");
foreach($frutas as $fruta){
echo $fruta;
}
?>
</body>
</html>

]]> http://www.webidea.es/blog/bucles-en-php/feed/ 1 Menu desplegable en CSS http://www.webidea.es/blog/listas-desplegables-en-css/ http://www.webidea.es/blog/listas-desplegables-en-css/#comments Sun, 22 Mar 2009 22:54:04 +0000 admin http://www.webidea.es/blog/?p=183 Hace unos años, si queríamos poner un menú desplegable en nuestra web, teníamos que recurrir al javascript, lo que presentaba problemas de accesibilidad, y carga de diversos scripts en nuestro <head>, que hacían que aumentase el peso de nuestras páginas, y por tanto ralentizaban la carga.

Actualmente, se pueden construir menúes desplegables totalmente accesibles y configurables, gracias a las listas de HTML y el CSS.

Supongamos que queremos construir un menú con un par de secciones principales, y varias sub-secciones en el interior de cada una de estas. En el código HTML, lo único que tendríamos que hacer es crear una lista <ul> con dos items <li> y dentro de cada uno de los items, anidar otra lista con varios elementos.

<!– Código HTML para el ejemplo de menú desplegable –>
<div class=”desplegable”>
<ul>
<li>Webs Interesantes
<ul>
<li>Santiago Cuenca</li>
<li>Webidea</li>
<li>Dragon Ball Z</li>
<li>Naruto Shippuden</li>
<li>Instalaciones Eléctricas</li>
<li>Saint Seiya</li>
<li>Design Training</li>
<li>Aranjuez</li>
</ul>
</li>
<li>Blogs SEO
<ul>
<li>SEO Femenino</li>
<li>Webidea</li>
<li>Google Dirson</li>
<li>Adseok</li>
<li>Sergio Blanco</li>
<li>SEO Profesional</li>
</ul>
</li>
</ul>
</div>

Simplemente añadiendo un enlace a cada uno de los elementos en la lista, nos quedaría algo así:

Ahora tenemos que aplicar los correspondientes estilos CSS:

/* Le damos un ancho estándar a las listas, un borde, fondo y le quitamos estilos de lista y márgenes */
.desplegable ul{width:150px; border:1px solid #00749e; background:#fff; padding:0; margin:0; list-style-type:none;}

/* Damos un poco de relleno a los items */
.desplegable ul li{padding:.5em;}

/* Le decimos a la lista anidada que no se muestre y le damos estilo a los enlaces */
.desplegable ul li ul{display:none;}
.desplegable ul li a{text-decoration:none; display:block; width:100%; height:100%;}

/* Resaltamos el fondo del item al pasar sobre él y cambiamos el color del texto */
.desplegable ul li:hover{background:#00749E; color:#000;}
.desplegable ul li:hover a{color:#000;}

/* Cuando un item está activo y tiene lista anidada, lo mostramos con display:block */
.desplegable ul li:hover ul{display:block; position:absolute; margin:-20px 0 0 140px;}

Y el resultado final sería:

Obviamente, este es un ejemplo sencillo, y este tipo de menúes son totalmente personalizables. Tan sólo recordar que el uso de CSS para este cometido ayuda más a la optimización de tu web, tanto a nivel de accesibilidad como de indexación en buscadores. Ya todo depende de tu creatividad e imaginación.

]]> http://www.webidea.es/blog/listas-desplegables-en-css/feed/ 0 100 enlaces por pagina http://www.webidea.es/blog/100-enlaces-por-pagina/ http://www.webidea.es/blog/100-enlaces-por-pagina/#comments Sun, 22 Mar 2009 17:12:13 +0000 admin http://www.webidea.es/blog/?p=178 Hace unos días, Matt Cutts comentaba en este post de su blog, acerca de la cantidad de enlaces máxima que debería haber en una página.

Como bien sabemos, Google siempre ha dicho que los enlaces de un sitio web no deben sobrepasar a los 100 en número, entre otras cosas, para que la página no sea considerada una granja de enlaces (link farm), algo a tener muy en cuenta a la hora de la optimización y posicionamiento del contenido de nuestra web.

En dicho post, Matt Cutts reafirmaba esta cuestión, y decía que además la transmisión de Pagerank desde dicha página era casi nula, pero además añadía algo, que si hasta ahora no era ningún secreto, realmente si se solía comentar poco en las comunidades SEO, y es que Google sólo indexa y cachea los 100 primero Kb de una página, por lo que el resto podrían perderse.

Quizá esto pueda no parecerle grave a algunas personas, que opinan que si Google no llega a un enlace desde una página, ya lo hará desde otra, pero lo cierto es que esto puede tener serias complicaciones para alguien demasiado confiado.

Como SEO, siempre te interesará tener tu contenido en la parte superior del código para que Google lo lea antes, y si no eres tú mismo quien maqueta, seguramente le pedirás a tu maquetador que coloque primero el contenido y luego el menú o menúes laterales, cosa que es bastante sencilla de realizar con CSS. Pero si haces esto en la home, que es la primera página a la que se accede, y metes demasiado texto y enlaces en la parte superior, es posible que llegues a un punto en el que tus menúes y categorías internas queden innacesibles, y “et voilá” tu sitio no se indexará, o tardará muchísimo en hacerlo.

Por tanto, cuidado con la cantidad de texto y enlaces que pones en tu contenido. Haz una home con datos precisos y deja un sitemap en formato html siempre bien accesible a los distintos robots de los motores de búsqueda.

]]> http://www.webidea.es/blog/100-enlaces-por-pagina/feed/ 0 Introducción al CSS http://www.webidea.es/blog/introduccion-al-css/ http://www.webidea.es/blog/introduccion-al-css/#comments Sat, 22 Nov 2008 14:45:59 +0000 admin http://www.webidea.es/blog/?p=155 Sin llegar a ser considerado un lenguaje de programación como tal, CSS (Cascading Style Sheet – Hoja de Estilo en Cascada), es un mecanismo que determina como se mostrará un documento HTML o XML en pantalla, consiguiendo de este modo separar el contenido de la presentación. Ésto ofrece a los desarrolladores web un control total sobre la forma en la que será presentado un sitio web a los usuarios, dado que basta con modificar el mecanismo CSS para lograr una presentación completamente diferente, sin tener que modificar en absoluto el contenido.

Formas de aplicar el CSS

Existen tres métodos conocidos para la utilización o aplicación del CSS:

  • Mediante un documento externo con extensión .css: Es la más correcta, pues separa de forma total el contenido de los estilos.


    /* Ejemplo de documento CSS externo */
    body{background:#000; color:#fff;}
    #contenedor{text-align:justify;}
    .enlace{color:#ff0000;}


    <!-- Ejemplo de documento HTML que enlaza con un CSS externo -->

    <html>
    <head>
    <link href=”estilos.css” type=”text/css” rel=”stylesheet” />
    </head>
    <body>
    <div id=”contenedor”>
    <a class=”enlace”>Enlace</a>
    </div>
    </body>
    </html>

  • Escribiendo los estilos entre las etiquetas <style></style> antes del </head> del documento HTML: Es un sistema muy parecido al anterior, puesto que separa el contenido del diseño, definiendo clases, id’s, etc…aunque es menos óptimo, pues puede perjudicar a otros campos de desarrollo web, como el posicionamiento del documento en los buscadores, al desplazar el resto del código hacia abajo.


    <!-- Ejemplo de documento HTML con el CSS definido antes del </head> -->

    <html>
    <head>
    <style>
    body{background:#000; color:#fff;}
    #contenedor{text-align:justify;}
    .enlace{color:#ff0000;}
    </style>
    </head>
    <body>
    <div id=”contenedor”>
    <a class=”enlace”>Enlace</a>
    </div>
    </body>
    </html>

  • Escribiendo estilos en línea: Se escriben directamente los estilos a aplicar, en el atributo style de cada elemento HTML. Se puede aplicar sobre cualquier etiqueta HTML, aunque es la forma menos limpia y la que menos separa el diseño y el contenido. Ejemplo: <a href=”url” style=”color:#ff0000;”…

Jerarquía y nomenclatura del CSS

Ha de saberse que cuando un elemento HTML está contenido dentro de otro, y éste tiene aplicado un estilo, normalmente el primero lo hereda. Por ejemplo, un elemento <p> contenido dentro de un <div> con alineación de texto justificada, también tendrá su texto alineado de forma justificada.

Además, debemos recordar que hablamos de “Hojas de estilo en cascada”, lo que quiere decir que cada estilo se lee de manera secuencial, y si escribimos dos veces el mismo estilo, el segundo sobreescribirá el primero.

Sabiendo esto, debemos tener en cuenta que existen tres formas de declarar estilos, cada una con mayor prioridad que la siguiente:

  1. Elementos (elemento): Se pueden aplicar estilos directamente sobre los elementos HTML. Por ejemplo, se puede definir el color del texto para todos los enlaces de una página, independientemente de su ubicación.


    /* Ejemplo que justifica el texto en todos los elementos de párrafo */
    p{text-align:justify;}

  2. Identificadores (#identificador): Estos estilos aplican directamente sobre las etiquetas HTML que tienen un id asignado. Son utilizados normalmente sobre contenedores globales del documento, cabeceras, menúes, etc…


    /* Ejemplo de id que justifica el texto */
    #contenedor{text-align:justify;}


    <!-- Ejemplo de div HTML que utiliza el id #contenedor -->
    <div id="contenedor"></div>

  3. Clases (.class): Son los más comunes. Mientras que teóricamente, y respetando las normas de accesibilidad (WAI) y el posible uso de javascript, sólo podremos tener un id único por página, las clases pueden ser aplicadas a cualquier elemento y usadas tantas veces como se necesite dentro de un documento.


    /* Ejemplo de clase que justifica el texto */
    .parrafo{text-align:justify;}


    <!-- Ejemplo de párrafo HTML que utiliza la clase .parrafo -->
    <p class=”parrafo”></p>

Más adelante veremos en más profundidas los posibles estilos a aplicar, así como ejemplos para hacer nuestras webs más atractivas y versátiles, pues CSS es tan potente, que puede ofrecernos no sólo diseño, sino también funcionalidad.

]]> http://www.webidea.es/blog/introduccion-al-css/feed/ 0 Condicionales en PHP http://www.webidea.es/blog/condicionales-en-php/ http://www.webidea.es/blog/condicionales-en-php/#comments Fri, 29 Aug 2008 19:51:44 +0000 admin http://www.webidea.es/blog/?p=113 En la mayoría de lenguajes de programación estructurada una de las instrucciones más básicas son los condicionales. Gracias a los condicionales se pueden evaluar los diferentes valores que puede tomar una variable y aplicar acciones en función del resultado obtenido. De este modo se puede decidir tomar una acción si una variable es menor a un determinado número, y la contraria si es mayor. Pueden especificarse tantos posibles resultados como se quieran, a través de sus posibles estructuras: if…elseif…else o switch.

Condicionales con if

Los condicionales con if son los más básicos. Su estructura más simple consiste en determinar una condición en la claúsula if sobre la que se tomará una decisión en caso de ser verdadera, y la claúsula else, con la que se toman todos los posibles valores no recogidos en el if, y se toma otra decisión.

Éste sería un ejemplo de condicionales con if:

<!– Ejemplo de condicionales con if en Webidea.es –>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<head>
<title>Ejemplo de Condicionales</title>
</head>
<body>
<?php
$a = 9;
$b = 5;
if($a>$b){
echo "a es mayor que b";
} else {
echo "a es menor que b";
}
?>
</body>
</html>

Como se puede observar, las diferentes instrucciones que deben ejecutarse en caso de cumplirse una condición van encerradas entre llaves ({…}). Ésto sólo es necesario cuando han de ejecutarse dos o más instrucciones. Si sólo quisiéramos ejecutar una, es suficiente con ponerla en línea con el if o el else.

Por otro lado, en el ejemplo anterior podemos darnos cuenta de que estamos tomando una decisión cuando la primera variable es mayor a la segunda, y cualquier otra situación que pueda ocurrir. Pero esa cualquier otra situación, puede englobar tanto que $b sea mayor a $a, como que ambas variables tengan el mismo valor. Si queremos determinar una acción diferente en caso de que ambas tengan el mismo valor, podemos echar mano de elseif:

<!– Ejemplo de condicionales con if...elseif...else en Webidea.es –>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<head>
<title>Ejemplo de Condicionales</title>
</head>
<body>
<?php
$a = 9;
$b = 5;
if($a>$b){
echo "a es mayor que b";
} elseif($a == $b) {
echo "a es igual que b";
} else {
echo "a es menor que b";
}
?>
</body>
</html>

Condicionales con switch

Por último, hay ocasiones en las que debemos tomar decisiones para múltiples posibilidades del valor de una variable, en cuyo caso también podemos usar la instrucción switch. Básicamente se analiza el valor de una variable dada y se recorren una serie de condiciones (cases), para aplicar una o varias acciones en caso de cumplirse una de ellas. Gracias a default, podemos especificar las acciones que se tomarán en cuando el valor actual de la variable no coincida con ninguno de los especificados en los case.

<!– Ejemplo de condicionales con switch en Webidea.es –>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<head>
<title>Ejemplo de Condicionales</title>
</head>
<body>

<?php
$a = 3;
switch($a){
case 1: echo "a es igual a 1";
case 2: echo "a es igual a 2";
case 3: echo "a es igual a 3";
default: echo "a tiene un valor distinto a 1, 2 o 3";
}
?>
</body>
</html>

]]> http://www.webidea.es/blog/condicionales-en-php/feed/ 0 Operadores lógicos en PHP http://www.webidea.es/blog/operadores-logicos-en-php/ http://www.webidea.es/blog/operadores-logicos-en-php/#comments Sun, 17 Aug 2008 10:46:40 +0000 admin http://www.webidea.es/blog/?p=96 Los operadores lógicos en PHP, son utilizados cuando necesitan ser comprobadas varias comparaciones y si se cumplen algunas o todas ellas.

Básicamente son operadores de “y / o “, a saber:

  • && o and – Devuelve un resultado verdadero (true), cuando las dos condiciones se cumplen.
  • || o or – Devuelve un resultado verdadero si al menos una de las dos condiciones se cumplen.
  • ! – Niega la expresión.

Éste sería un ejemplo de operadores lógicos en PHP:

<!– Ejemplo de operadores lógicos en Webidea.es –>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<head>
<title>Ejemplo de Operadores Lógicos</title>
</head>
<body>

<?php
$a = 8;
$b = 3;
$c = 3;
echo ($a == $b) && ($c > $b),"<br />";
echo ($a == $b) || ($b == $c),"<br />";
echo !($b <= $c),"<br />";
?>
</body>
</html>

Y su resultado en pantalla:

0
1
0

]]> http://www.webidea.es/blog/operadores-logicos-en-php/feed/ 0 Variables en PHP http://www.webidea.es/blog/variables-en-php/ http://www.webidea.es/blog/variables-en-php/#comments Fri, 18 Jul 2008 02:13:14 +0000 admin http://www.webidea.es/blog/?p=37 Quizá el primer concepto que tenemos que aprender cuando nos metemos a estudiar un lenguaje de programación dinámico es el de las variables.

Las variables son contenedores de información independientes, que pueden almacenar valores numéricos y alfanuméricos. Por norma, los lenguajes de programación suelen necesitar inicializar o declarar las variables antes de usarlas. En PHP no es necesario hacerlo, aunque es recomendable. Para cualquier uso de variables, hemos de tener en cuenta que su nombre siempre va precedido por el caracter $.

Se llaman variables porque su valor puede ser modificado a lo largo de toda la ejecución del programa, y su contenido puede cambiar de cualquier modo, es decir, que si el contenido es un número entero, puede ser reemplazado por otro, pero también puede ser cambiado por una cadena de texto.

Veamos este ejemplo:

<!-- Ejemplo de variables PHP en Webidea.es -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Variables en PHP</title>
</head>
<body>
<?php
$a = 5;
$b = 11.5;
$c = "Hola a todos";
echo $a,"<br />",$b,"<br />",$c;
?>
</body>
</html>

En este ejemplo, hemos declarado tres variables, y luego las hemos escrito en pantalla con la sentencia echo, intercalándolas con un salto de línea. El resultado que obtendríamos en pantalla, por tanto, sería éste:

5
11.5
Hola a todos

Como en casi cualquier lenguaje de programación, las variables poseen dos ámbitos: local y global.

Una variable local es declarada dentro de una función y sólo puede ser utilizada dentro de ella, expirando dicha variable cuando termina la ejecución de la función.

Las variables locales pueden usarse durante la ejecución de todo el programa. Para declarar una variable global, debemos escribir: $GLOBALS['nombre_variable']=”Valor”;. Si queremos usar una variable global desde una función podemos declarar una nueva variable y asignarle el valor de la global, de este modo: $variable=$GLOBALS['nombre_variable'];.

]]> http://www.webidea.es/blog/variables-en-php/feed/ 0 Introducción al PHP http://www.webidea.es/blog/introduccion-al-php/ http://www.webidea.es/blog/introduccion-al-php/#comments Sun, 13 Jul 2008 17:21:43 +0000 admin http://www.webidea.es/blog/?p=20 PHP (PHP Hypertext Pre-processor), cuyo nombre proviene originalmente del acrónimo Personal Home Page, es un lenguaje de programación web más parecido a los lenguajes clásicos como Perl o C++, que hace uso de funciones, bucles, clases o condicionales, alejándose así de los lenguajes de marcas convencionales en el World Wide Web.

PHP Myme Type

La diferencia con otros lenguajes de programación web como Javascript, es que éste último se ejecuta en el navegador y depende de que éste lo soporte, mientras que PHP se ejecuta en el lado del servidor, siendo así indiferente el navegador que el usuario utilice, pues mientras el servidor soporte y sea capaz de interpretar el lenguaje, lo traducirá a un resultado HTML que será enviado al navegador del usuario como una página web clásica. Esto además conlleva una serie de ventajas pues puede aprovechar diversos recursos alojados en el servidor, como las bases de datos, y hacer uso de ellas, permitiendo así crear sitios con contenidos dinámicos y cambiantes.

Con el tiempo, PHP ha tenido que sufrir el empuje de rivales como ASP (Active Server Pages) de Microsoft y otros lenguajes que han ido surgiendo con ejecución del lado del servidor, y aunque algunos de ellos disponen ya de interfaces de usuario mucho más avanzadas, PHP sigue siendo el lenguaje por excelencia debido a su gran versatilidad, compatibilidad con la mayor parte de servidores web existentes, y sobre todo por ser un lenguaje de código libre con una inmensa comunidad de usuarios a su alrededor que no sólo ayudan a mejorar el lenguaje cada día, sino que inundan la red con gran cantidad de foros y blogs llenos de documentación y ejemplos prácticos para casi cualquier cosa que se nos ocurra.

Gran parte de las pequeñas y grandes aplicaciones, como un simple Captcha o un Directorio Web, pueden ser creadas a día de hoy con PHP, y muchos sitios y redes sociales, como meneame.net basan su código en este lenguaje. Si estás pensando en convertirte en un programador web y aún no te has decidido sobre el lenguaje en el que deberías especializarte, no deberías descartar PHP como uno de los candidatos principales.

]]> http://www.webidea.es/blog/introduccion-al-php/feed/ 0