Blog de Web Idea - Recursos de Programación y Optimización Web » programación 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 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 Congreso de Webmasters 2008 http://www.webidea.es/blog/congreso-de-webmasters-2008/ http://www.webidea.es/blog/congreso-de-webmasters-2008/#comments Fri, 08 Aug 2008 09:19:25 +0000 admin http://www.webidea.es/blog/?p=93 Durante los días 21, 22 y 23 de Noviembre de 2008, se celebrará en Madrid la 2ª Edición del Congreso de Webmasters.

Se trata de un evento compuesto por ponencias, talleres, información y networking, donde hasta 30 expertos, cada uno en su área, explicarán las novedades en cada sector.

En la primera edición, el evento contó con 2767 inscritos. Como reclamo para la segunda edición, los 1000 primeros inscritos serán recompensados con un libro de Microsoft sobre diseño y programación web, y los primeros 300 serán obsequiados con un curso en Webtaller.

La inscripción al congreso tiene un coste de 60 euros, para los que estén interesados.

]]> http://www.webidea.es/blog/congreso-de-webmasters-2008/feed/ 0 Operadores de comparación en PHP http://www.webidea.es/blog/operadores-de-comparacion-en-php/ http://www.webidea.es/blog/operadores-de-comparacion-en-php/#comments Fri, 18 Jul 2008 19:43:24 +0000 admin http://www.webidea.es/blog/?p=52 Los operadores de comparación, como su propio nombre indica, sirven para realizar operaciones de comparación entre valores numéricos o cadenas de texto, y normalmente van acompañados de condicionales para así poder tomar decisiones, aunque ese capítulo lo veremos más adelante.

  • Coincide con (): Dos valores coinciden ($a == $b).
  • Distinto de (!=): Dos valores son distintos ($a != $b).
  • Menor que (<): Un valor es menor que otro ($a < $b).
  • Mayor que (>): Un valor es mayor al otro ($a > $b).
  • Menor o igual que (<=): Un valor es menor que otro ($a <= $b).
  • Mayor o igual que (>=): Un valor es mayor al otro ($a >= $b).

Éste es un ejemplo de los operadores de comparación:

<!-- Ejemplo de operadores de comparación 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 de Comparación</title>
</head>
<body>
<?php
$a = 5;
$b = 2;
$c = 2;
echo $a == $b,”<br />”;
echo $a != $b,”<br />”;
echo $a < $b,”<br />”;
echo $a > $b,”<br />”;
echo $a >= $c,”<br />”;
echo $b <= $c,”<br />”;
?>
</body>
</html>

Es importante reseñar, que los operadores de comparación son booleanos, es decir se guian por una respuesta true o false (verdadero o falso), y al intentar mostrarlos en pantalla, nos devolverán el valor 1 cuando el resultado sea verdadero y el valor 0 cuando sea falso. Obviamente este valor no se suele imprimir en pantalla, pero para nuestro ejemplo su resultado en pantalla sería:

0
1
0
1
1
1

]]> http://www.webidea.es/blog/operadores-de-comparacion-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 Mensaje inaugural http://www.webidea.es/blog/mensaje-inaugural/ http://www.webidea.es/blog/mensaje-inaugural/#comments Thu, 05 Jun 2008 19:24:10 +0000 admin http://www.webidea.es/blog/?p=3 Webidea, es un proyecto iniciado con el objetivo de convertirse en una web de referencia en el campo de tutoriales y recursos para el diseño, programación y optimización web.

Aunque empecemos con el blog, en la web, con el tiempo, podrás encontrar diversos tutoriales y consejos para optimizar tus páginas en HTML/XHTML, de modo que tengas la posibilidad de aparecer mejor en los resultados de búsqueda de los principales motores, como Google, Yahoo! o Ask. También iremos publicando un tutorial para que puedas explotar al máximo tus páginas, convirtiéndolas en dinámicas y usando el lenguaje de referencia en cuanto a documentación y comunidades en la red: PHP.

Obviamente no sólo de PHP, XHTML y optimización viven las webs, por lo que iremos hablando de Javascript, librerías como Prototype o Scriptacolous y mucho más.

Seguramente te preguntarás que tiene de novedoso cuando todos estos recursos pueden ser encontrados fácilmente desde cualquier buscador, y en parte tienes razón…pero bueno, aquí tendrás un rincón más donde intentaremos hablar y exponer estos temas de la manera que mejor sepamos o podamos y contarás con éste blog como complemento para estar al tanto de diversas novedades y noticias sobre estos temas.

Todo ésto sin ningún ánimo de lucro, y lo único que encontrarás en estas páginas serán algunos Anuncios Adsense de Google (tema del que también hablaremos), para ayudar a financiar los servidores web que alojan nuestras diversas webs.

Pues ya sin más, recibe un cordial saludo y una cálida bienvenida a Webidea.es, que esperamos sea de tu agrado.

]]> http://www.webidea.es/blog/mensaje-inaugural/feed/ 0