Apuntes de informática

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).

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.

¿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.

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á...