Hace mas o menos de 6 meses empece una serie de post titulados “Memorias de un Webmaster” en el que posteaba tutoriales para realizar diseño web, ya que en la universidad estaba dando clases de diseño web por lado cliente. Este cuatrimestre ha tocado dar lado servidor con Java, asi que ahora toca hacer los tutoriales del lado servidor, y hoy vamos a aprender como empezar, utilizando Apache Tomcat y NetBeans.

Lo primero es tener instalado Netbeans, que es el IDE en el que vamos a trabajar, y descargarnos Apache Tomcat, que es el servidor que utilizaremos para desarrollar.

Por supuesto, necesitaremos tener instalado java en el ordenador, pero obviare la explicacacion de como instalarlo, si tienes dudas comentalo, y si mucha gente pregunta, hare un tutorial solo para eso.

Una vez instalado y abierto NetBeans, tenemos que darle a crear nuevo proyecto, seleccionamos Java Web -> Web Application y damos a Next. Ahora le damos un nombre al proyecto, escribimos la ruta en la que queremos que se guarde y le volvemos a dar a Next.
En este momento nos pedira configurar el servidor, asi que instalaremos Tomcat en NetBeans, hacemos click en Add y elegimos Tomcat 6.0 en la ventana que se nos abre. Descomprimimos el fichero que nos hemos bajado de la web de Tomcat en alguna carpeta que no vayamos a borrar accidentalmente y copiamos la ruta de la carpeta en la ventana de NetBeans, de Username ponemos admin y de contraseña lo mismo, ya que va a ser una versión para desarrollo.
Ya podemos hacer click en Finish y tendremos nuestro nuevo proyecto con Tomcat instalado.

Si desplegamos la pestaña Projects, nos aparecera una estructura como la de la imagen de la izquierda. En mi caso Qraces es el nombre del proyecto.
La carpeta Web Pages es la que contiene la esctructura de la web, si desde el navegador de archivos explorais la carpeta que ha creado NetBeans con el proyecto, corresponde a la carpeta “web” dentro del proyecto.
Source Packages se refiere a “la parte Java” de la página, donde van las clases java y los Servlets, y corresponde con “src/java”.
Test Packages incluira los paquetes de prueba que se emplearan en la web.
Libraries las librerias que necesitemos para que funcione correctamente el proyecto y Test Libraries las librerias de prueba.
Y para terminar, Configuration Files hace referencia a los ficheros de configuración de la web.
Todo esto lo veremos más detalle según vayamos avanzando en futuros tutoriales.

Puede que te preguntes que para que sistema operativo es lo que acabo de contar, pero al tratarse de Java, y al existir NetBeans para multitud de S.O, este tutorial debería de valer para Windows, Linux y Mac, aunque yo trabajo en Ubuntu (Linux).

En el siguiente tutorial empezaremos con la carpeta “Web Pages” y con los ficheros *.jsp, ya que son los mas sencillos.

En este video hago un pequeño tutorial mostrando cómo sincronizar Gmail con Exchange en el Iphone / Ipod Touch. Si tenéis uno de estos gadgets o alguno de los compatibles con Google Sync (Blackberry, Nokia.. ).
Os recomiendo 100% que lo sincronicéis de esta manera ya que la experiencia de usuario es optimizada radicalmente, hasta el punto de sincronizar el email de forma automática.

Estas navidades pasadas me ha caido un Acer Aspire One Za3, en el cual nada más recibirlo instalé Ubuntu Remix, sin los resultados esperados.

Primero no detectaba la batería, ya comenté la solución, y ahora quiero enlazar a la solución para arreglar la pantalla, incluso después de la última actualización del Kernel, que hizo que tuviera que estar una semana con la versión antigua.

Aquí está el tutorial, en la web Ubuntu Urugay (creo que es esa).

Espero que te sea de utilidad.

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.

Llevo un tiempo alejado del blog por motivos navideños, pero bueno, hoy te traigo un tutorial sobre cómo personalizar un menú animado usando el plugin Lavalamp.

Conociendo lavalamp:

Lavalamp es un plugin para realizar menús mas llamativos para tu web.
Viene con tres ejemplos, que son los siguientes:

Con imagen:

• Home
• Plant a tree
• Travel
• Ride an elephant

Sin imagen

• Home
• Plant a tree
• Travel
• Ride an elephant

Subrayado

• Home
• Plant a tree
• Travel
• Ride an elephant

Nosotros nos vamos a fijar en el primero, el de la imagen, que es el que utilizaremos para editar.

Preparando el HTML

Si te fijas en el menú que hay en mi web para ganar dinero, entre cada elemento del menú hay un separador, y al pasar el selector por el, desaparece como pasando por debajo, a parte de tener el primer elemento y el último redondeados.
Voy a explicar cómo lo hice, pero primero pongo el código HTML y lo comento:

Comento por lineas, que es mejor:

1. Esto simplemente es el div que engloba todo el menú.
2. Este primer ul es para el lateral izquierdo redondeado, por eso su...
3. ...único li no tiene texto, solo  , que es un espacio en blanco...
4. ...y cierre del ul.
5. Aquí está la "chicha" del menú, como puedes observar, después de abrir el ul...
6. ...lo primero que hay es un li con clase spacer, que no es mas que un separador.
7. Este elemento tiene la clase current que quiere decir que es el elemento sobre el que "descansa" la sombra.
8. Otro spacer.
9. Enlace hacia el blog.
10. Spacer.
11. Enlace hacia el foro.
12. Spacer.
13. Enlace a preguntas frecuentes.
14. Spacer.
15. Último elemento con enlace hacia Contacto.
16. Spacer.
17. Cierre del ul.
18. De aquí en adelante un ul para hacer el  lateral derecho al igual que el izquierdo, y cierre del div.

Ahora que ya tenemos el html, vamos con el CSS...

Dando un poco de estilo con CSS

Como son bastantes selectores, voy a ir comentandolos de uno en uno

El primer elemento es el que hace referencia al menú entero, el div con menu como id

1. Selector.
2. Un ancho excesivo, pero así me aseguro que no se caerá ningún elemento.
3. La altura.
4. Al principio no se muestra, pero se mostrará con JQuery poniéndole un efecto.
5. Margen a 0.

El primer ul del menú

Simplemente se alinea a la izquierda.

Ahora el elemento central del menú

1. Selector.
2. El position relative es necesario para que no haga cosas extrañas la "sombra".
3. La propiedad overflow con el valor hidden hace que cuando algo se vaya a mostrar fuera de su espacio reservado, lo que se escapa no se muestre.
4. El float left es necesario para que no se descuelgue el último ul.

Características generales de ul y li

Ahora vamos a empezar a editar el CSS que afecta a la sombra de LavaLamp

1. Selector dado por LavaLamp.
2. La propiedad z-index se utiliza para traer al frente este elemento, por encima de todos aquellos que tengan un z-index menor a 8.
3. Display block muestra el inicio de la sombra como un elemento que forma parte del bloque.
4. La altura.
5. La imagen de fondo.
6. z-index sólo se aplica a elementos posicionados, asi que toca posicionar este.
7. Le quitamos el borde.

1. Selector dado por LavaLamp.
2. Ponemos la misma imagen que antes, pero ahora si que la repetimos a lo largo del eje x.
3. Mismo display que el elemento anterior.
4. Misma altura.
5. Le quitamos el margen de la izquierda.
6. Le quitamos el borde.

Vamos a por los spacers

Este elemento realmente no tiene mucha explicación, solamente se ponen los bordes laterales, y un z-index de valor 10, que hace que se muestre por encima de la "sombra" y asi parece que pasa "por debajo".
La imagen de fondo no es más que una tira con sombra, que era de una variación que hice del primer diseño, ahora habría que poner algo transparente pero entonces no quedaría tan bien.

Ya casi está todo, vamos con los enlaces del menú

Mencionar solo el atriburo padding, que hace que la zona de click sea mayor, el z-index que hace que se muestren las letras por encima de todo, la alineación centrada y el float left, el resto es, como gustan decir en mi escuela, trivial.

Para terminar, los laterales redondeados

Instalando LavaLamp.

Ahora viene lo más sencillo, como casi todo con JQuery.
Te recomiendo, que le eches un ojo a la introducción a JQuery de este blog, para ir más rápido todavía.

Lo primero que tienes que hacer es descargarte el plugin, si esque no lo has hecho ya, comprimido en un zip, o directamente en *.js, todo desde este enlace, en el cual explican en inglés como funciona.

Ahora, tal como lo explico en la introducción a JQuery, tienes que enlazar los ficheros *.js dentro del head de tu página.

Una vez echo esto, con la siguiente función, activarás el LavaLamp sobre el elemento central del menú:

Y el resultado final... puedes verlo en Sinpastaenelbolsillo.com.

Debo de haberme portado muy bien este año, porque Papá Noel me ha traido un Acer Aspire One ZA3 para la universidad, y, aunque tiene unas características que considero geniales, la versión de Ubuntu Remix me ha parecido un poco mala, pero arreglando dos cositas parece ser que va mucho mejor...

Lo primero era un problema con la pantalla, y esque iba muy muy lento, pero tiene solución, aunque ahora no encuentro el tutorial que seguí, si tienes el mismo problema y buscas en Google lo encontrarás, aunque cuando lo encuentre prometo hacer una entrada.

Este post, que estoy haciendo de manera rápida y precipitada a la espera de que termine el que estoy haciendo de editar un menú con JQuery y LavaLamp, es para contar como ver el estado de la batería, ya que cuando inicio, el ordenador se cree que está conectado a la corriente, aunque no sea así.

El truco para ver el estado de la batería lo encontré en GULP - Clinuxera, y es un comando muy simple, tan sólo hay que introducir lo siguiente en el terminal:

Y te saldrá la información de la batería en la consola, y misteriosamente, al menos a mi, ya me detecta la batería como debería hacerlo desde un principio, así que, si quieres que te la detecte siempre, vas a Sistema -> Aplicaciones al inicio, y agregas una nueva con la linea que has metido en la consola en donde pone orden.

Una vez hecho, le das a guardar, y cerrar, y se acabó el problema con la batería.

Prometo hacer dentro de poco una entrada contándolo todo de mi nuevo pequeñín, pero esque estas navidades voy pillado.

Si alguien encuentra como hacer que el firefox recupere el sonido que me avise por favor!!

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.

Llevo unos días sin publicar ningún tutorial o memoria, y como hoy no tengo demasiado tiempo, he decidido publicar una introducción a JQuery, utilizada en mi web de ganar dinero para conseguir efectos como el contraer y expandir los elementos del sidebar (hacer click en el título de cada uno), tener bordes redondeados, utilizar Ajax + Json para optimizar el tráfico y un sinfín más de cosas que puedes hacer de la manera mas sencilla que puedas imaginar.

¿Qué es JQuery?

JQuery es un framework de Javascript, que permite interactuar fácilmente con los elementos HTML, manipular el arbol DOM, manejar eventos y animaciones e integrar la tecnología AJAX de manera fácil y cómoda.
He puesto enlaces a la wikipedia en todas las palabras que considero que es recomendable conocer, y decir que la definición la he basado en la de la wikipedia.

¿Cómo se instala?

De la forma mas sencilla que puedas imaginarte, simplemente accede a la página oficial de JQuery y descárgatelo en la carpeta donde tengas la página web, en mi caso uso la versión 1.3.2 en su versión completa, así que tengo un fichero llamado jquery-1.3.2.js.

Ahora tienes que ir al fichero index.html y añadir la siguiente linea a la cabecera (dentro de las etiquetas <head></head>)

Y ya está listo para ser usado.

¿Cómo empiezo a hacer cosas con JQuery?

Este fin de semana empezaré a publicar entradas con todo lo que he hecho con JQuery en Sinpastaenelbolsillo, pero si no puedes esperar hasta entonces, vamos a hablar un poco de los selectores, algunas funciones básicas y de los plugins

Selectores:

El primer paso para poder hacer cosas con JQuery es saber como seleccionar cada elemento, y para eso está la función $(String), que devuelve el elemento (o elementos) que están definidos como se indica en la String, pongo unos ejemplos

Como puedes observar, la String que hay que pasar como parámetros, son los selectores que usas normalmente en el CSS.

Funciones básicas y/o más comunes:

addClass(String)/removeClass(String) - Estos dos métodos sirven para añadir o eliminar clases a los elementos html seleccionados, de manera que puedes cambiar el estilo de cualquier cosa de manera dinámica.

Ejemplo:

En el ejemplo, al ejecutarse JQuery, le añadirá la clase fondoNegro al body, y el fondo de la página será negro.

html(String) - Con este método cambiaremos el html que haya dentro de un elemento por el pasado como String.
Si no pasas ningún atributo, es decir, lo dejas en html() te devuelve el html que haya dentro del elemento seleccionado.

Ejemplo:

Ahora, al ejecutarse, cambiará el contenido del body por "<h1>Hola!!</h1>".

show()/hide() - Muestra/oculta los elementos seleccionados. Ambos tienen una variante con paŕametos que sirven para modificar la velocidad a la que muesta/oculta los elementos seleccionados.

Plugins:

Existen multitud de plugins para JQuery creados por la comunidad, con infinita variedad de efectos, desde menús animados, como el que tengo en mi web para ganar dinero, redondear elementos o widgets para añadir a tu web.

Instalarlos suele ser sencillo, por regla general viene un fichero README en el cual indican la instalación, que no suele ser mas complicada que extraer los ficheros dentro del servidor y enlazarlos dentro de <head></head> al igual que hiciste con JQuery.

Para finalizar, y en previsión de siguientes tutoriales, te recomiendo crear un documento *.js llamado ready, es decir, un fichero llamado ready.js, y enlazarlo como si fuera un plugin.
En este documento irá todo lo que se tiene que ejecutar cuando la página esté cargada, para ello escribe lo siguiente dentro del fichero y dejalo asi:

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.