Después de la "resaca" de la nochevieja, y de felicitar el 2010 (o 1948), es hora de ponerse las pilas y empezar con algo serio.
Esta vez voy a contar como utilizar JQuery para implementar AJAX en tu página web, y de qué manera puedes solventar el mayor problema que tiene AJAX ahora mismo, que no es otro que la indexacion por parte de los buscadores como Google.

Antes de empezar voy a realizar una breve introducción a AJAX,y a comentar las ventajas y desventajas que trae, y para empezar, tengo que decir que AJAX, siglas de Asynchronous JavaScript And XML, es un conjunto de 4 tecnologías que sirve para comunicar el navegador con el servidor sin necesidad de recargar la página.
Esto nos brinda muchas oportunidades, ya que, junto con los efectos de JQuery se pueden lograr cosas sorprendentes, y además, como no hace falta recargar la página, podemos ahorrar ancho de banda, lo que reduce la carga del servidor.

No voy a entrar más en detalle, para más información puedes acceder a la Wikipedia, o buscar en Google, pero ahora vamos a implementarlo.

Funciones AJAX de JQuery

JQuery ya viene con AJAX de serie, y tiene multitud de funciones muy simples que se encargan de realizar toda la labor "chunga", pero de momento con la función load(), de momento , nos vale.

El funcionamiento es muy sencillo, aunque se puede complicar más para realizar peticiones mas complejas, no es necesario, y para ellas recurriremos a la función ajax().

Load()

Espero que no te importe estimado navegante, que para explicar la función utilice el código de mi web para ganar dinero, ya que es un código que de momento funciona, y puedes ver en cualquier momento.

La solución al problema de los buscadores es "sencilla" pero laboriosa, ya que se trata de realizar la página sin AJAX y de manera que funcione, y después introducir el atributo rel en donde pondremos la url que queramos llamar para cargar, de manera que los navegadores que no tienen Javascript (como los rastreadores de Google) puedan navegar por la página, y así también, si alguien abre algún enlace en una pestaña nueva, se cargará correctamente.

Para la función load() voy a usar de ejemplo el calendario que hay en Sinpasta, ya que funciona tanto por AJAX como sin el, y su funcionamiento es muy sencillo.
Antes de poner el código HTML, tengo que decir que hay un fichero, llamado ajax.php que simplemente recibe por parámetro una url de un archivo, y lo incluye, lo uso para evitar tener líos con las rutas relativas, y que es el que se encarga de llamar a calendar.php, que es el que genera toda la vista HTML del calendario.

El código HTML de los enlaces que hacen que el calendario cambie la vista del mes es el siguiente:

Como puedes observar, el atributo href hace referencia a un archivo distinto que el atributo rel, a continuación pongo el Javascript necesario para que funcione con AJAX

Acabo de caer en que no he explicado livequery, y es un plugin realmente importante, así que voy a explicarlo ahora, de momento, del código anterior sólamente fijate en las líneas que hay dentro de function.
En la primera puedes ver el funcionamiento de load, que lo único que hace es pedir al servidor el fichero que se encuentra donde especifica el atributo rel del elemento que lo ha llamado, y lo mete dentro de "#calendario .sidebarcontent".
En la segunda se devuelve false, de este modo el navegador no se dirigirá hacia donde apunta el atributo href.

Pequeña pausa para explicar LiveQuery

Si estás realizando una página web con AJAX, puede que te aya surgido el problema de que cargas una parte de la página con AJAX, y que de repente todos las acciones que tendrían que realizarse a través de JavaScript dentro de la parte que has cargado por AJAX no funcionan, eso es debido a que el JavaScript se aplica sobre la página una vez cargada, y al cargar nuevos elementos, no se les aplica el tratamiento JavaScript y por lo tanto no funciona.
Para solucionarlo tenemos el plugin LiveQuery. Se instala igual que todos, y su funcionamiento es muy simple, tan sólo tienes que llamar a la función livequery que toma dos atributos, el primero el el "disparador", en el ejemplo anterior, era click, que es como si se hubiera puesto .click(function(){, pero eso no hubiera funcionado bien. El segundo atributo es la función que se va a realizar.

ajax()

Una vez vista la función load, vamos a ver como enviar un formulario a través de AJAX, ahora con la función ajax(), valga la redundancia.
El código HTML es el que uso en Sinpasta, no lo voy a poner porque es muy largo y es un formulario normal, sólo que cada input tiene una id para acceder a él a través de los selectores de JQuery.

El código Javascript es el siguiente:

Como puedes observar, he usado livequery, ya que el formulario va dentro de una parte de la página que se carga con AJAX, lo siguiente es meter en variables los campos que rellena el navegante.
Después genero una String que será la que se pase en forma de petición POST al servidor, con la funcion ajax(), pero antes elimino todo el html que tiene el #formulario y #comentarios y los oculto.
Lo que voy a comentar ahora linea a linea es lo que hay dentro de la funcion ajax(), que es lo más interesante:

1. Lo primero que hago es definir el tipo de petición que es, en este caso, al enviar el formulario, prefiero que sea POST.
2. La url a donde ha de ir la petición, como siempre, a través de ajax.php.
3. data hace referencia a los datos que hay que pasar, en este caso la url pasada antes.
4. El datatype indica que los datos van en HTML.
5. En esta línea indico la función que quiero que se realize, pasando como parámetro la respuesta a la petición POST.
6. Cargo el HTML de la respuesta en #formulario y en #comentarios cargo todos los comentarios de esa entrada.
7. Para acabar hago que tanto #formulario como #comentarios aparezcan con un efecto fadeIn().

He quitado las comprobaciones del formulario, que el correo sea válido, que todos los campos esten completados etc... para que no sea muy largo el código.

Existen otras muchas funciones para utilizar AJAX con JQuery, entre ellas una de las que más uso yo es getJSON, pero es un poco más avanzada, y al menos para lo básico de AJAX con lo puesto aquí es suficiente. Si te interesa el tema del JSON espero poder publicar en breves una entrada hablando sólo de él, te invito a pasarte de vez en cuando, o a suscribirte al feed para estar al tanto de su publicación.

Espero que te haya gustado, y sobretodo que te haya sido útil y te haya dado ideas para mejorar tu web. Siento no haber puesto fotos, se que hacen la entrada mas amena, pero en este caso no creo que fuera necesario.

He pensado que para empezar a poner ejemplos de JQuery lo mejor es empezar por algo sencillo, y lo más sencillo que tengo hecho en la página, a parte de los bordes redondeados que ya explicaré, es la posibilidad de crear un efecto de contracción y expansión de los elementos del sidebar, no preguntes la utilizad, simplemente me pareció bien implementarlo

Si has ido siguiendo este blog, y has estructurado el sidebar como expliqué en esta entrada simplemente tendrá que copiar y pegar la siguiente función en el documento ready.js, sino, tienes dos posibles caminos, entender el código y adaptarlo, cosa que no es muy difícil, o ir a la entrada en cuestión y estructurar tu sidebar así, lo más recomendable.

Primero pongo el código, y después lo explico:

Parece más complejo de lo que realmente es, pero no te preocupes, traduciré por lineas:

1. "Al hacer click en un elemento .sidebartop..."
2. "...si el elemento siguiente a éste (en el que he hecho click) está oculto..."
3. "...desplegar hacia abajo el elemento siguiente a éste..."
4. "...en caso contrario..."
5. "...contraer el elemento siguiente a éste..."
6. Esta linea y siguientes sólo acaban de cerrar la función.

Puedes dejar el ratón encima de algo que no entiendas para que aparezca un texto que te diga que parte del código es la que realiza cada cosa.

Como puedes observar es muy sencillo realizar un efecto "cortinilla" con JQuery.

Para terminar, te recomiendo echarle un ojo a las funciones slideUp() y slideDown(), ya que aceptan como pará metros la velocidad del efecto y funciones a realizar al terminarlo.

Algo que toda página web necesita en un buen logo, y últimamente en las páginas web se están poniendo de moda los logos con letras redonditas, reflejos y pocos colores, así que voy a intentar explicar como hacer un logo tipo Sinpastaenelbolsillo para tu web

Primer paso - Eligiendo la fuente.

Puede que este sea el primer obstáculo con el que te encuentres al diseñar tu logo, puesto que hay cientos de fuentes, y muchas se parecen sospechosamente, pero si te sirve de ayuda, he encontrado en Zonamasters una recopilación de fuentes 2.0, un poco pasada (2007) pero que sirve perfectamente.

Para instalarte las fuentes, descárgate el archivo y extrae las fuentes dentro de la carpeta fonts del gimp, en mi caso, al usar Ubuntu y tener la versión 2.6, la ruta es "/home/javier/.gimp-2.6/fonts".

Ahora abre el Gimp y ya tienes instaladas las fuentes, "simplemente" tienes que escoger una para tu logo.

Segundo paso - Crear la imagen.

Combinar capas hacia abajo

Antes de seguir voy a puntualizar que no voy a poner ninguna imagen en el logo, simplemente texto, pero he de reconocer que una imagen en un logo puede quedar bastante bien.
Ahora vamos a crear una imagen nueva con el Gimp, como el texto que voy a poner es bastante ancho, la voy a hacer de 700x70 px, pero tampoco se trata de que te sobre espacio por todos lados, y por supuesto, ponle fondo transparente.

Una vez tenemos la imagen sobre la que vamos a trabajar cogemos la herramienta de texto, y, en blanco, escribimos el texto que queramos, poniéndolo lo más grande que podamos.

Una vez tengamos el texto bien puesto y centrado, creamos una capa nueva, también transparente y la arrastramos en el diálogo de capas hasta ponerla por debajo por las que hayas puesto de texto, pinchamos sobre las capas de texto y las Combinamos hacia abajo.

Una vez combinadas procederemos a añadirle unos cuantos efectos.

Tercer paso - Añadiendo borde a las letras.

Este paso es muy sencillo si lo haces correctamente, sino te puedes volver loco intentando cuadrar letras.
Vamos a crear una capa nueva, también transparente y la vamos a poner por debajo de la capa en la que tenemos el texto, una vez hecho esto, sobre la capa en la que tenemos el texto, cogemos la herramienta de selección por color y seleccionamos las letras.

Ahora, sobre la capa nueva, hacemos click en Seleccionar -> Agrandar y seleccionamos 5px, verás como la selección se ha agrandado, ya sólo queda coger la herramienta de relleno y rellenar toda la selección, en la capa que está vacía, de negro, y así conseguimos unas letras blancas, con un borde negro.

Una vez agrandada la selección

Cuarto paso - Agregar relieve a las letras.

Una vez tenemos las letras con el borde, vamos a crear un poco de relieve, así que necesitamos una nueva capa, también transparente.
Ahora con la herramienta de selección rectangular cogemos un rectángulo que contenga todas las letras, cogidas desde la mitad hasta abajo y seleccionamos la capa en la que tenemos las letras en blanco y con la herramienta de selección por color, vamos a seleccionar la intersección entre la selección que ya tenemos realizada y el blanco de las letras, así que presionamos Ctrl + Shift y sin soltar hacemos click sobre el blanco de las letras.

Toca hacer un degradado sobre la capa nueva, con la selección que tenemos hecha, así que, hacemos click sobre la capa nueva y con la herramienta de mezcla, seleccionando el degradado frente a transparencia, hacemos el degradado vertialmente y haciendo que quede el negro debajo.

Resultado del texto con borde y relieve

Quinto paso - Rallado.

He de decir que hay mucha gente a la que este paso no le convence demasiado, puesto que hace que las letras se lean algo peor, pero si te interesa puedes aplicarlo, a mi al menos me gusta mucho.

Vamos, cómo no, a crear una capa nueva, y a desactivar la vista de la capa que tiene el degradado haciendo click en el ojo que tiene la capa (en el diálogo de capas).

Ahora, sobre la capa de las letras en blanco, con la herramienta de selección por color, volvemos a seleccionar las letras, y sobre la capa nueva vamos a rellenar toda la selección con el patrón que tiene lineas negras y amarillas a 45º.
Una vez tengamos la capa nueva con las letras a base del relleno, seleccionamos, otra vez con la herramienta de selección por color, el amarillo y lo suprimimos (botón Del o Supr).

Ahora vamos a seleccionar el negro, y también lo borramos, pero no tocamos la selección que se nos quedará, puesto que ahí vamos a aplicar otra vez un degradado, en mi caso verde, también de color a transparencia.

Volvemos a mostrar la capa con el degradado negro, y si te queda demasiado oscuro juega con la opacidad de la capa.

Ya con el efecto rallado

Sexto paso - Reflejo.

Para el reflejo, he seguido este tutorial sobre reflejos en Gimp, en el cual puedes aprender a hacer mas tipos de reflejos.

Bueno, lo primero que he necesitado es agrandar el tamaño del lienzo, así que vamos a Imagen -> Tamaño del lienzo y lo he agrandado verticalmente otros 70px (me he pasado un poco, pero no pasa nada).

Ahora vamos a mostrar todas las capas y seleccionar un rectángulo en el que se vean las letras, y utilizamos Editar -> Copiar visible, y ajustamos todas las capas al tamaño del lienzo haciendo click en cada capa y dándole a Capa -> Capa a tamaño de imagen.

Crea una capa nueva, y pega lo que has copiado antes sobre ella, pero no la ancles, antes de eso dale a Capa -> Transformar -> Voltear verticalmente, y sitúa la capa como si fuera el reflejo de las letras y ánclala sobre la capa nueva.

Ahora, trabajando sobre el reflejo, vamos a Capa -> Máscaras -> Añadir máscara de capa e iniciamos la máscara a Blanco (opacidad total).
Simplemente tenemos que hacer ahora un degradado, de Negro a Blanco, como hemos hecho antes, de abajo a arriba y verticalmente y verás cómo se transparenta a modo de reflejo.

Si quieres puedes añadirle un efecto de desenfoque, pero eso ya te dejo que lo veas en el tutorial de reflejos.

Resultado final

Espero que te haya gustado el tutorial y que te sirva para algo, recuerda guardar la imagen como *.xcf para poder volver a editarla y como *.png para que al mostrarlo en internet se guarden las transparencias.

Puedes descargar mi *.xcf desde aquí y si realizas algún logo con esto, Coméntalo!!

Por cierto, si usas Photoshop, tal vez te interese esta entrada sobre tutoriales de logos con estilo Web 2.0, que, aunque ya no está el tutorial en Zona PhotoShop, tienes otros enlaces muy interesantes. O este otro en inglés, también sobre crear Logos 2.0

Esta será la última entrada referente al CSS de Sinpastaenelbolsillo.com que realize, al menos de momento, la siguiente será una introducción a JQuery, pero eso será más adelante, ahora vamos a ver como realizar un calendario que muestre el día y el mes, por ejemplo, de cuando fué escrita una noticia.

Crear un calendario para mostrar un día y su mes correspondiente.

La idea de este tutorial consiste en crear una hoja del calendario como la que puedes ver en esta misma entrada, arriba a la izquierda, que te dice el día y el mes en el que se escribió la entrada.

Vamos a trabajar sobre la plantilla que bajamos de Freecsstemplates.org.

Primer paso - Editar el código html.

Lo primero que tenemos que hacer es editar el código html, de forma que dentro de cada elemento post se cambie el orden del elemento title y el elemento meta:

Original:

Cambiado:

Date cuenta de que el mes hay que ponerlo con su abreviatura, ya que si no se nos saldrá de los límites, y el día con número.

Segundo paso - La imagen para el calendario.

Este paso es más labor de búsqueda en internet que otra cosa, se trata de encontrar una imagen que nos sirva para nuestro cometido, como la que tiene este blog o la que puedes encontrar en mi web de ganar dinero en este enlace.
Yo la encontré en un tutorial en inglés que explicaba lo mismo, pero que ahora no se donde está, si lo encuentro lo colgaré.

Solamente tienes que subir la imagen al servidor, y ahora trabajaremos con ella a través del CSS

Tercer paso - El CSS.

Ahora solo nos queda poner cada cosa en su sitio, así que vamos a hacer que el .meta tenga de imagen de fondo la que hemos cogido del apartado anterior, que se alinee a la izquierda del título de la entrada, ponerle un margen lateral y que el texto se alinee al centro:

Eso es para el fondo, ahora vamos con el mes:

Como puedes observar, he tenido que subirlo con el atributo position, y ponerle el display: block; para que el número del día aparezca debajo.

Para terminar modificaremos un poco el día:

Como puedes observar, también he tenido que subirlo un poco con el position, y el código total es bastante sencillo y muy personalizable, así que si utilizas otra imagen y no salen a una altura correcta el día o el mes, sólo tienes que cambiar los atributos top.

Para terminar con el apartado de CSS dejo unos enlaces que pueden resultar interesantes

• Zen Garden - Ejemplo de la potencia del CSS
• Guía de estilo de la web 2.0
• 30 Gradientes 2.0 para el Gimp
• Menús desplegables con CSS
• Camaleón - Como Zen Garden, pero en Español

Todos los enlaces los he sacado del Moodle de la asignatura Tecnologías Web de Ciente  de la ETSIT de la UPM, impartida por Carlos A. Iglesias.

En la siguiente entrada empezaremos con JQuery.

Como dije en la anterior entrada, crear un menú es un poco complicado, aunque si tenemos dos ideas claras y un poco, casi nada, de manejo con el Gimp, nos puede salir bastante bien.

Nosotros vamos a crear un menú horizontal, así que antes de nada tenemos que decidir la altura que queremos que tenga, puede parecer una tontería pero si vamos a crear la imagen de fondo, tendremos que especificar una altura, ya que la anchura de la imagen será de 1px y esta se irá repitiendo.

En mi caso, Sinpastaenelbolsillo.com, la altura del menú son 55px, así que la imagen es de 1x55 px.

Creando las imágenes.

Vamos a crear un fondo con el Gimp, para lo cual, abrimos el programa, y creamos una imagen nueva de, por ejemplo, 1x55 px.

Seguramente tendremos la imagen delante, en la ventana del Gimp, pero como posiblemente no la veamos, haremos zoom sobre ella, hasta que la veamos todo lo grande que podamos, sin que se salga de la pantalla.

Ahora necesitamos un color base, en mi caso el #89b709, pero tu puedes elegir el que quieras, y vamos a rellenar completamente la imagen con ese color, para ello utilizamos la herramienta de relleno (un cubo volcándose).

Nueva capa

Una vez hecho esto, vamos a darle relieve a la imagen, para lo cual vamos a crear una nueva capa con transparencia de fondo, vamos a Capa -> Capa nueva y le damos un nombre, relieve por ejemplo.

Diálogo de capas

Ahora tenemos que trabajar sobre la capa que hemos creado, así que vamos al diálogo de capas, si no lo tenemos a la vista lo podemos abrir dándole a Ventanas -> Diálogos empotrables -> Capas, y veremos que hay dos capas, una llamada Fondo, y encima, que en mi caso se llama relieve, haz click sobre esta última.

Para realizar el siguiente paso, tenemos que seleccionar antes la mitad inferior de la imagen, así que cogemos la herramienta de selección cuadrada, y, fijándonos en la posición del cursor abajo a la izquierda, seleccionamos desde 1x27 hasta abajo del todo.

Ahora vamos a crear un degradado sobre la capa relieve, para lo cual tenemos que usar la herramienta que es un cuadrado con un degradado horizontal, y seleccionamos el color negro y le seleccionamos una opacidad de 75.
Vamos sobre la imagen y hacemos click aproximadamente a 3/4  de la parte superior y arrastramos, en vertical hasta 3 px antes de la parte de abajo del todo.
Si todo ha salido bien, tendría que aparecer algo como esto:

Relieve

Ahora vamos a cambiarle la opacidad a la capa hasta obtener un resultado que nos guste (15 esta bien), todo ello en el diálogo de capas.

Podemos hacer lo mismo que hemos hecho abajo, para la parte de arriba, cambiando el negro por blanco, y haciendo la transparencia desde la parte mas alta, hasta una distancia de 1/4 sobre la parte superior, para ello recomiendo crear otra capa, y cambiar la selección a la parte superior.

Ahora el truco para tener un efecto de pulsar el botón al pasar el raton por encima, es jugar con las opacidades de la parte de arriba y abajo o voltear verticalmente la imagen, pero eso ya, una vez sabes como van los degradados, las capas y la selección, no es más que jugar con opacidades y degradados, pero guarda la imagen que quieres que haga el relieve como, por ejemplo, menhover

Para terminar podemos añadirle unos bordes, pero para eso te recomiendo que te descargues la imagen que uso yo de menú en mi web de ganar dinero, aquí, y hagas un copy&paste de los bordes a tu imagen, y despues ya les cambies el color.

Guarda las dos imágenes en ficheros xcf para editarlas con posterioridad y como ficheros gif o png para mostrarlas en la web.

Editando el CSS

Supongo que ya tienes dos imágenes, una para el fondo normal y otro para el efecto de relieve, y me imagino que todavía no tienes ni idea de cómo quedan porque con 1px de ancho no ves nada, pues bueno, vamos con el CSS.

Buscamos la parte del CSS correspondiente al menú y dejamos el #menu li así:

Ahora vamos a añadir el efecto de presionar, creamos un nuevo selector:

Y ya está, ahora ya tenemos un menú con botones y que cuando pasas el ratón por encima cambia como si hubiese sido presionado.

Si algo no funciona, no dudes en comentarlo, y si necesitas ver un ejemplo de como funciona, en mi web de ganar dinero puedes observar un ejemplo del menú, pero para verlo tendrás que desactivar el javascript de tu navegador puesto que la versión para navegadores que lo tienen activado utiliza JQuery.

Por cierto, si ves el menú de Sinpastaenelbolsillo.com, observarás que tengo los laterales redondeados, y una separación entre cada enlace del menú tengo un "spacer", que no es más que otro <li></li> pero con una imagen de fondo distinta. Si quieres tener una separación, te recomiendo jugar con el atributo margin aplicado a los elementos del menú, y no hacerlo como lo tengo yo puesto, ya que lo tuve que hacer así por el menú con JQuery (cuando explique como se hace, se entenderá), y puedes utilizar las imágenes que tengo puestas de inicio y final para darle esquinas redondeadas, pero observa que en mi CSS utilizo dos clases, una first y otra last para cada elemento, y así ponerle la imagen de fondo correspondiente.
Ten en cuenta que tendrás que poner selectores de hover para el first y el last con la misma imagen, porque si no se te pondrá la imagen que has hecho de botón presionado cuando alguien pase el ratón por encima de alguno de ellos y no queda bien.

Si este tutorial te ha servido para algo, y has hecho un menú en tu web utilizando el tutorial, me encantaría que lo comentases.

Antes de nada, esta será la última entrada que empieze con Memorias de un webmaster, es demasiado largo, así que simplemente a todas las entradas que estén relacionadas con esto les añadiré la categoria "Memorias". Ahora continuemos con el CSS...

Creando un nuevo proyecto en NetBeans

Lo primero, antes de nada, es crear proyecto en NetBeans para poder trabajar con comodidad, así que abrimos el programa, que nos dirá si queremos registrarnos como desarrolladores o algo raro (yo le di a no registrarme).

Nuevo proyecto en NetBeans

Una vez con el NetBeans abierto le damos a Archivo -> Proyecto nuevo y se nos abrirá un diálogo en el cual seleccionamos PHP -> PHP Application with Existing Sources, le damos a siguiente y nos pedirá donde tenemos los ficheros y un nombre para el proyecto, a parte de darnos la opción de guardar los ficheros propios de NetBeans separados. No cierres el diálogo, espera un segundo para resolver el siguiente problema:

Ahora mismo estamos sólo con HTML y CSS, por lo tanto el navegador abirá la página esté donde esté, pero cuando empecemos con el PHP, hay que configurar el Apache, cosa que veremos mas adelante, así que elige una carpeta que no vayas a mover etc...
Mi consejo: Crea un directorio en tu $HOME, llamado www, véase "/home/{tu nombre de usuario}/www/" y mete ahí los ficheros de la plantilla que te bajaste.

Finalizando la creacion del proyecto

¿Ya has decidido donde se gestará tu web? Sigamos entonces...
Vuelve a la ventana del NetBeans y selecciona la carpeta, ponle un nombre al proyecto y, si quieres (yo no lo he hecho, soy raro) guarda los metadatos de NetBeans en una carpeta a parte y deja la codificación en UTF-8.
Aunque veas que hay dos botones lógicos, Siguiente y Terminar, dale al de Terminar.

Supongo que una vez creado el proyecto se te habrá abierto una pestaña con el index.html abierto y lleno de colorines, no te asustes, los colores los pone NetBeans en función de lo que sea cada cosa.

Empieza lo bueno, a destrozar el CSS

No cierres la pestaña del index.html, pero no toques nada, de momento. Ahora dirigete a la izquierda y dale al boton que pone Proyectos. Se te abrirá una pestaña lateral con el proyecto y sus archivos, quiero que selecciones y abras el fichero que contiene el CSS (supongo que defaul.css).

Una vez abierto puedes observar la estructura de un fichero CSS en todo su esplendor, y si es de una plantilla de freecsstemplates.org tendrás un fichero muy bien organizado y bastante limpio, pero... nosotros no queremos un fichero genérico, así que vamos a empezar a cambiar cosas para hacer un proyecto único, así que, aunque yo diga que es lo que cambié en Sinpastaenelbolsillo.com, no quiere decir que tengas que cambiar lo mismo, porque acabarías teniendo una copia de mi web, y eso no mola nada.

La verdad, es que después de un tiempo no me acuerdo de todos los cambios que hice, y mucho menos el orden que seguí, asi que voy a intentar guiarte un poco y darte consejos para que hagas los cambios como tu consideres oportunos, y si necesitas un poco de inspiración... mi código es gratis.

Primer destrozo - El fondo.

El pattern que utilizo yo

Normalmente las plantillas que bajamos tienen un fondo "pobre", un color plano, que queda muy bien, no lo discuto, pero todas las webs mas o menos tienen un fondo plano, y no son originales.
Yo recomiendo poner una imagen, y a ser posible un pattern o imagen que, al repetirse genera una imagen mayor.
Simplemente hay que buscar en Google y encontrarás cientos de lugares con patterns para descargar, pero elige uno que sea libre, para no tener despues problemas con nadie.

Si has elegido uno y ya lo tienes, yo escogí uno de billetes de 100 dólares para mi web de ganar dinero, guardalo en una carpeta dentro del directorio del proyecto, algo como "/images/pattern.png" (carpeta images dentro de la carpeta del proyecto) y ve al fichero CSS dentro del NetBeans.

Ahí encontrarás una etiqueta body parecida a la siguiente:

Seguramente detrás de background tengas un color (#XXXXXX) y nada más, bien, lo que pone detras, url(images/dolar.png) repeat-x etc... se refiere a la imagen que se emplea para el fondo, así que pon la url de la imagen de tu pattern y prueba a cambiar el repeat-x por repeat a secas.

¿Te sale el pattern repetido por todo el fondo? si es que si, vamos bien.

Como es obvio, no voy a explicar todos los atributos y posibles valores que pueden tomar, para eso ya deje claro en CSS(I) enlaces donde encontrarás toda esa información, así que juega con el fondo para ver como te gusta más, y una vez que tengas algo que te guste, pasemos al siguiente punto.

Segundo destrozo - El menú.

Para explicar el menú voy a hacer una entrada entera, ya que explicaré técnicas para hacer botones con relieve en el Gimp y con CSS, así que pasemos al tercer destrozo.

Tercer destrozo - Sidebar.

Para empezar con este si estas trabajando sobre una plantilla de freecsstemplates.org, tienes que realizar la modificación en la estructura que comenté en el primer post de CSS, el segundo paso.
Ahora no hace falta que lo habras con el editor de texto, puedes hacerlo perfectamente con el NetBeans.

¿Has cambiado ya la estructura del sidebar?¿Has eliminado también las etiquetas <ul></ul>? Si es así guarda el fichero index.html y abrelo con el navegador que utilices, espero que todo se vea on la misma estructura.

Vamos a proceder a darle un poco de estilo, porque seguramente todo se ha desplazado a la izquierda, o han pasado cosas raras, asi que busca en la hoja de estilos (el css) la parte en la que está todo lo referente a sidebar.

De los dos primeros selectores, #sidebar y #sidebar ul no edité nada, ya que hacen referencia a la estructura mas que a otra cosa, y tal y como están aparecen bien, ahora, si te apetece cambiar el color a todo el texto del sidebar, añade el atributo color a #sidebar, ya sabes, todo lo que sea personalizar es correcto, pero siempre con estilo.

Ahora ya viene algo que tienes que hacer para mantener la estructura de la plantilla y poder editar a gusto, y es cambiar selectores li por .sidebarcontent, pero no todos los li que veas en #sidebar, solo en los primeros.

Original

Cambiado

Original

Cambiado

No se si me he explicado bien, pero lo que quería decir es que tienes que cambiar las etiquetas CSS de los elementos del menú, antes seleccionados como <li></li> de primer nivel dentro de #sidebar por .sidebarcontent.

Si todo ha salido correctamente, ya tenemos otra vez el diseño inicial pero con el cambio de estructura, y ahora todo es mucho más fácil de editar, por ejemplo, vamos a poner una imagen de fondo al título de cada .sidebaritem

De esta forma, si quisieramos que cada elemento del menú fuera una caja con esquinas redondeadas, sólamente tendríamos que crear una imagen para la parte de arriba, que contuviera las esquinas redondeadas y fuera tan ancha como la caja, una imagen de 1px de alto que, repitiéndose verticalmente genere el centro de la caja, y para el .sidebarbottom poner la imagen que esta arriba, pero volteada verticalmente, haré mas adelante una entrada explicando mejor esto, pero la idea ya está explicada.
También se puede hacer con JQuery de manera mucho mas sencilla, pero eso se contará en siguientes entregas.

Continuará...

Ayer se me olvidó comentar qué programas utilizo para el desarrollo de páginas webs, y pido disculpas por ello, pero voy a intentar subsanar ese problema rápidamente con una lista de programas y páginas web que he utilizado, utilizo y utilizaré para la labor en cuestión.

Primero - Entorno de programación.

Pantallazo de NetBeans

Existen cientos de programas con los que se puede programar, al menos para crear páginas web, ya que no hace falta compilar código (no como en C, Java), por lo que, si tienes Bloc de notas bastaría pero no lo recomiendo.
No lo he dicho todavía, pero uso Ubuntu (Linux) como sistema operativo. No voy a entrar en detalles de porqué lo hago, pero todos los programas que mencione serán en su versión de Linux, y no tengo ni idea de las versiones para Windows, que creo que existen, y supongo que serán iguales, pero si de verdad quieres entrar de lleno en este mundo, te recomiendo hacerte una partición con Linux, sea cual sea la distro escogida.

Como iba diciendo, no recomiendo usar un bloc de notas (GEdit está mejor, pero tampoco) para programar, si no una herramienta mas potente como Netbeans (Wikipedia).
Es completamente gratuíto y yo me he instalado la versión completa, con soporte para multitud de lenguajes de programación, y, aunque en la lista de paquetes solo aparezca PHP y Ruby como lenguajes de programación web, también tiene XHTML y Javascript.

Imagino que si estás intentando desarrollar una  página web, sabrás instalar un programa, así que no haré referencia a la instalación.

Segundo - Desarrollo gráfico.

El Gimp

Yo utilizo El Gimp, también libre y con multitud de opciones, no si se será mejor o peor que PhotoShop, pero para todo lo que necesito funciona, y puedes conseguir resultados muy buenos con esta herramienta.

Haciendo una equivalencia con el apartado 1, puedes utilizar el Paint para realizar los gráficos de tu web, pero dudo mucho que puedas llegar a hacer algo tan interesante como con un programa como El Gimp o PhotoShop.

Digo lo mismo que antes para la instalación.

Tercero - Utilidades de internet.

Elegir un conjunto de colores para la web no suele ser tarea fácil, al igual que también se necesita un sitio de donde sacar al menos una plantilla inicial, o librerias, para todo ello, guarda los siguientes enlaces:

• Libros sobre programación web
• Generador de los cinco colores necesarios para una web
• Análisis de visitas de tu web (hasta que no esté online la página nada)
• Página mágica que almacena TODAS las respuestas a CUALQUIER problema

Cuarto - Servidor.

LAMP en Synaptic

Hasta que no lleguemos a PHP no lo vas a necesitar, pero sería bueno que intentaras instalarte un servidor en tu ordenador para poder trabajar con Php.
Yo utilizo LAMP (Linux, Apache, MySql y Php) para trabajar, pero todo instalado por separado, aunque puedes configurarlo todo del tirón.

Para instalar LAMP en Ubuntu la cosa es muy pero que muy sencilla, tan sólo tienes que ir a Sistema -> Administración -> Gestor de paquetes Synaptic y una vez abierto ir a Editar -> Marcar paquetes por tarea y seleccionar LAMP Server.
Haz click en aceptar, dale a aplicar y deja que Ubuntu haga su trabajo.

Para gestionar las bases de datos (más adelante) te recomiendo instalarte el paquete phpmyadmin.

Quinto - Navegador y complementos.

Firefox con Firebug y WebDeveloper

Como sabrás existen multitud de navegadores, y las páginas, aunque cumplan los estándares, no se ven iguales en unos navegadores que en otros. Pero bueno, nosotros nos vamos a centrar en usar Firefox, por la cantidad de plugins para el desarrollo web que tiene (aunque de momento usaremos sólo 2).

Los plugins/extensiones que usaremos son Firebug para el desarrollo de la parte de JavaScript y Web Developer para el CSS y diseño.

En la imagen podéis observar el aspecto de mi navegador, en el cual, el marco de abajo es el Firebug corriendo (ha capturado una petición Ajax) y la barra que hay debajo de los marcadores es Web Developer.

De momento eso es todo, en la siguiente entrada nos meteremos directamente con el CSS de la página y te contaré que pasos y consejos seguí para cambiarle el aspecto a mi web de ganar dinero.

Toda página web necesita un estilo, a ser posible que sea propio y original, y para ello utilizo "Cascading Style Sheets", a partir de ahora CSS.

No voy a explicar lo que es CSS, ni tampoco tengo intención de hacer un tutorial de CSS, ya que en internet existe mucha información al respecto, pero lo que si haré es dejaros una lista con lo necesario:

• ¿Qué es CSS? (Wikipedia)
• Introducción a CSS
• CSS Avanzado

Por supuesto, si estas aquí porque quieres aprender CSS, ni se te ocurra coger los 3 enlaces anteriores y empollartelos, simplemente bájate los dos libros enlazados, leete un poco el de introducción y cuando tengas una ligera idea de la estructura del CSS vuelve aquí que empezamos ya.

Primer paso - Elegir un estilo

Hacer una plantilla web desde 0 es algo que no recomiendo a nadie, ya que la estructura de una web, si estas empezando, no vas a conseguir hacerla ni de coña, te liarás con los div, con los position y con otros elementos que son "raros", así que lo primero que deberías hacer es encontrar una plantilla que te guste, y para eso te recomiendo esta web de plantillas css.
Tienen cientos de ellas, casi todas con la misma estructura html, y son muy limpias.

Por supuesto, cuando acabes de editar el CSS de tu web el resultado tiene que ser bastante distinto al original, por ejemplo, para mi web de ganar dinero utilicé Solutions y como podrás observar, el resultado difiere "un poco" del original.

Segundo paso - Editar la estructura del HTML

Pero... ¿No se suponía que estábamos con CSS, que pinta aquí el HTML?

Muy sencillo, las plantillas de freecsstemplates son muy buenas, pero tienen un pequeño defecto que no me gusta, y esque los menús se estructuran como listas, y la verdad, aunque sea un poco más engorroso, estructurarlos con divs da más libertad.

Si no tienes ni idea de HTML, te recomiendo otros enlaces

• ¿Que es HTML?
• Introducción a XHTML

El arreglo es fácil y para ello utilizaremos un editor de texto sencillo, Bloc de notas, Gedit, Kate o lo que tengas en tu ordenador.

Abre el editor y con el editor abre el fichero index.html de tu plantilla, y tienes que buscar el div con id="sidebar".
Sidebar es el id que identifica los menús en columnas de freecsstemplates.

Como verás, la estructura es a base de listas desordenadas (<ul>), y lo que queremos es que esté con cajas (<div>), así que sustituye los <li></li> que diferencian cada elemento por <div class="sidebaritem"></div> consevando el contenido de cada elemento, y por supuesto, borra los <ul></ul> (todo dentro del <div id="sidebar"></div>)

Ejemplo:

Se convierte en:

Pero, para perfeccionarlo ya del todo, y dejarnos una puerta para futuras ediciones, organiza el contenido dentro de cada sidebaritem:

Seguramente los nombres de las clases no sean los mejores, puedes poner tu los que quieras, pero recuerda después que has puesto otros.

Continuará...

A partir de ahora, y hasta que "acabe" Sinpastaenelbolsillo.com, iré narrando mis vivencias con la página, de forma que queden tutoriales de CSS, Gimp, Php, Javascript, HTML etc... y puedan servir de "inspiración" a otros Webmasters.

Todo el contenido que publique se podrá utilizar en otras páginas web a menos que se indique lo contrario.

Espero que os guste.