KonyferoBLOG - Experiencias de un inexperto

Ayer se estren� el portal www.puertollano.es

El nuevo portal, ha sido desarrollado conjuntamente entre Sion e Indra Sistemas, el periodo de desarrollo ha sido algo menos de un a�o, y se han invertido muchas horas de trabajo en �l. Despu�s de llevar algo m�s de dos meses en su fase final, por fin ayer se estren� en una rueda de prensa ofrecida por el Alcalde de Puertollano y la concejala de Fundaci�n Virtus.

Para el desarrollo de este portal se ha contado con la colaboraci�n de los propios ciudadanos, los que a partir de realizar algunas encuestas son los que nos han proporcionado la base para �ste desarrollo, es por ello, que este portal cuenta con las preferencias de todos y cada uno de los ciudadanos, por lo que esperamos, que sea de total agrado para ellos y para vosotros.

Con �l se pretende informar de todos los aspectos tur�sticos destacables, de acercar la administraci�n al ciudadano y permitir la colaboraci�n del mismo.

M�s informaci�n en: www.puertollano.es

En Sion, estamos muy orgullosos de nuestro trabajo, y creemos que, realmente merece la pena el tiempo invertido en �l.

Espero que critiqu�is el trabajo y si os gusta tambi�n espero que dej�is vuestra peque�a aportaci�n en los comentarios.

Eventos en capas

Tras un peque�o receso causado por la cantidad de trabajo que tengo, aqu� os traigo un peque�o tutorial que me han pedido sobre la utilizaci�n de eventos en capas.

Muchos seguro que hab�is usado javascript para conseguir efectos muy parecidos a los que os explico en este mini-tutorial, pero que a fin de cuentas son m�s inc�modos, por lo menos, los pocos que he podido ver, ya que ten�as que tocar los estilos tanto en el html como en el propio javascript. En cambio, con este m�todo, se simplifica a tener que modificar �nicamente la hoja de estilos para cambiar totalmente el efecto.

En mi ejemplo voy a utilizar unos estilos muy simples, el resto, lo dejo a voluntad de vuestra imaginaci�n.

Primer paso: Creamos dos clases diferentes, una de ellas para el evento 'onMouseOver' (Este evento es cuando situamos el puntero del rat�n encima del elemento) y otro distinto para el evento 'onMouseOut' (L�gicamente, para cuando apartamos el puntero del rat�n del elemento), si os fij�is he utilizado la propiedad cursor: pointer, esto lo hago para que al situar el rat�n encima, aparezca el cursor de v�nculo. En mi caso utilizar� los siguientes estilos:

.mouseout { /* Estilo para evento onMouseOut */
background: #F5F5F5;
color: #808080;
border: 1px solid #C0C0C0;
padding: 2px;
}

.mouseover { /* Estilo para evento onMouseOver */
background: #C0C0C0;
color: #808080;
border: 1px dotted #808080;
padding: 2px;
cursor: pointer;
}

Segundo paso: Elegir y crear el elemento al que deseemos aplicar el estilo en los eventos (Ojo que debemos tener en cuenta que utilizamos CSS, y algunos atributos de CSS no se pueden aplicar a determinados elementos). En mi caso voy a utilizar una capa

.

Tercer paso: Le aplicamos los estilos de evento a la capa, de la siguiente forma:

No es imprescindible ponerle un id a la capa, pero yo lo he hecho, lo que si hay que tener siempre en cuenta es ponerle la clase mouseout independientemente de que utilicemos un evento onMouseOut, ya que una vez se cargue el html, como no se ha ejecutado todav�a este evento, el estilo no se cargar�a y por lo tanto no funcionar�a correctamente. Otro consejo es que la propiedad this.className, la escrib�is tal cual, por que m�s de una vez me he encontrado que si no pongo la N en may�sculas, el evento no ha funcionado.

Y si hab�is seguido los pasos correctamente, los estilos de los eventos quedar�an de la siguiente forma:

Ejemplo de eventos en capas

Este m�todo me fu� muy �til en su d�a, y espero que a vosotros os sea igual de �til de lo que me fu� a m�.

d-_-b Mientras tanto escucho: Suzann - Little Bandit

Esto si es toda una experiencia

Por fin he recibido los Miniauriculares para mi iPod, esta ma�ana estando en el trabajo, y l�gicamente hasta que no he llegado a mi casa no he podido probarlos.

Tengo que reconocer que no estaban equivocados los que me los recomendaron, por que el poco ruido que ten�a con los cascos que trae de serie se elimina totalmente, adem�s de que la potenciaci�n de graves que tienen estos auriculares para ser tan "mini" como son, es sorprendente.

Otra cosa que agradezco mucho es que trajera varios tama�os de tapones, as� he conseguido que se ajusten a la perfecci�n y no se me caigan, cosa que me ocurr�a con cualquier otro auricular que si no llevaban almohadillas en cuanto se engancharan un poquito o les diera mas fuerte de lo normal, se me ca�an de la oreja.

Y para el punto final, puedes ajustar el nivel de graves por ecualizaci�n o simplemente sac�ndolos un poquito mas de la oreja, una maravilla vamos.

No ve�is lo bien que suena una canci�n como William Orbit - Adagio For Strings (DJ Ti�sto Remix)... Flipante!!

Para los viciosos

Yo creyendo que todo estaba inventado y voy y me encuentro con estas mu�equitas, no son hinchables, pero tienen el mismo cometido, aunque de las tipicas mu�ecas hinchables a estas, hay un trecho muy grande, y si no, juzgad vosotros mismos...

No quedandose agusto con haber hecho unas mu�ecas tan reales, encima te dan la opci�n de comprarte una mu�eca travesti...

Bueno desde luego yo no se quien se comprar� algo como esto, pero quien tenga pensado hacerlo que vaya rascandose el bolsillo, por que seg�n tengo entendido cuestan cerca de 6.000�.

Y desde luego antes, quien tuviese una mu�eca hinchable podr�a pasar desapercibido jejej, pero... �y estas? -No mam�, es una amiga mia que vino a estudiar y como le gust� mi habitaci�n, se qued� aqu�...

Yo antes de comprarme una, me gasto ese dinero en comprarme un powerpc g5 dual, por ejemplo :P

Todo Mini

Pues al final me decid� a adquirir los Miniauriculares para mi iPod Mini, y ya he recibido la notificaci�n de que han sido enviados.

Nos complace enviarte esta notificaci�n de env�o de tu pedido del Apple Store. Tu producto ha sido enviado y ser� entregado en la direcci�n que nos has indicado.

La semana que viene los tendr� en mis manos, espero que en realidad sean tan buenos como me han comentado, asi disfrutar� m�s todav�a de mi iPod Mini y ya os contar� el resultado en cuanto los pruebe.

Mi nuevo iPod Mini

Desde ayer y gracias a mi hermano, soy propietario de esta maravilla:

Por eso voy a inaugurar esta categor�a, para ir comentando mi experiencia con el "peque�in" que de momento y salvo algunos peque�os problemillas que tuve por culpa de los puertos USB, ha sido enriquecedora.

Una peque�a pega que puedo sacarle es la calidad de los cascos, que no es muy buena y seg�n tengo entendido es la misma calidad que los cascos de neodimio de los ipod 3G, digo que no es buena, por que entre el 95 y el 100% de volumen se nota la distorsi�n en algunas canciones que reproduce un rango de frecuencias concreto, pero vamos no es un problema en s�, si no una pega.

De todas formas me han hablado muy bien sobre los miniauriculares de la tienda de apple, que si es el �nico desembolso que tengo que hacer para disfrutar al m�ximo de la experiencia con el iPod Mini, los comprar�.

Referendum Plus

Estos �ltimos d�as un tema muy comentado en la comunidad es la nueva campa�a "molona" que el gobierno ha lanzado, para intentar ganar los votos de la juventud en el Refer�ndum de la Constituci�n Europea del 20 de Febrero.

Seg�n he podido comprobar en muchos blogs, por mis amigos y por mis conocidos es que, no solo no han conseguido darnos �nimos para que votemos, si no que, adem�s parece que se est�n quedando con todos nosotros.

Aqu� pod�is ver una porci�n de la "campa�a" pero que, no queda aqu�, por eso os recomiendo que visit�is la web oficial y ve�is el resto, para que saqu�is vuestras propias conclusiones.

Se que se ha debatido m�s que de sobra sobre esta campa�a, y es un poco tarde, pero no pod�a quedarme sin poner algo sobre este asunto.

Mi Wish List

Pues creo este post para ir incorporando todo lo que me gustar�a adquirir o que me regalasen, aunque algunas cosas no son muy asequibles que digamos.

Lo primero es mi tan deseado iMac G5, todo un portento de dise�o e integraci�n, por no hablar de su sistema operativo, de su arquitectura y de la potencia que es capaz de desarrollar esta m�quina, en tan poco espacio.

Lo segundo y no menos merecedor de mis alabanzas es este Nokia 6260, que gracias a la cantidad de software disponible para �l y el gran sistema operativo que utiliza (Symbian 7), lo convierten en uno de los mejores tel�fonos hasta la fecha.

Hace poco m�s de cinco a�os que me regalaron mi primer Zippo y que gracias a su tremenda calidad de fabricaci�n todav�a sigue conmigo, pero que por mucho que quiera, no puedo evitar sentirme atraido por esta joyita.

As� que si os da por regalarme algo...
Casi cuela, �eh? ;)

Actualizado: Domingo, 30 de Enero de 2005

Estilizando listas con CSS

Voy a explicar de manera sencilla como aplicar estilos a listas utilizando im�genes y css, por lo que primero empezar� explicando el concepto de margin y padding.

Los dos se utilizan para aplicar m�rgenes a un determinado elemento, pero la diferencia entre ellos est� en que uno aplica m�rgenes fuera del elemento y el otro los aplica dentro, tal y como muestra esta imagen:

Por otro lado en una hoja de estilos los m�rgenes (tanto interiores como exteriores) se aplican de la siguiente manera:

superior derecho inferior izquierdo

Suponiendo que nos ha quedado claro este concepto, empezaremos a aplicar margenes y estilos a la lista (

), en este ejemplo utilizo un margen superior de 4 pixels, uno inferior de 10 pixels y adem�s le especifico que la lista no tenga ning�n icono (list-style: none) puesto que ya le vamos a poner nosotros el nuestro con la imagen que tenemos:

UL {
margin: 4px 0 10px 0;
padding: 0;
list-style: none;
}

Con lo que la lista nos quedar�a de la siguiente forma:

Continuamos y en el siguiente paso, lo que haremos ser� aplicar el estilo y m�rgenes a las opciones de la lista (

), para las que utilizaremos el siguiente estilo:

UL LI {
margin: 0;
padding: 0 0 0 18px;
line-height: 19px;
background: url('lista.gif') #FFFFFF no-repeat left center;
text-align: left;
color: #808080;
}

A continuaci�n os explico detalladamente cada atributo de este estilo:

La imagen que he utilizado como icono de las opciones de la lista (lista.gif) tiene un tama�o de 15x15, por lo que le he dado un margen interior izquierdo de 18px, esto lo hago para que el texto quede desplazado 3 pixels a la izquierda respecto a la imagen.

Si os fij�is he utilizado el atributo line-height: 19px, que har� que el alto de cada opci�n de la lista sea de 19 pixels, por lo que as� me aseguro que mi imagen quedar� centrada con el texto.

En el atributo background le especifico que las opciones de la lista tengan como fondo la imagen lista.gif (url), que dicho fondo sea de color blanco (#FFFFFF), que no se repita (no-repeat), que la alineaci�n horizontal sea a la izquierda (left) y que la alineaci�n vertical sea en el centro (center).

Los atributos text-align y color, creo no hace falta explicarlos, simplemente alinean el texto a la izquierda y le aplican el color #808080, con lo que todos estos estilos dejar�an nuestra lista de la siguiente forma:

Y con esto ya tendr�amos la lista personalizada con CSS, espero que os sea de utilidad tanto como me fu� a m� y espero haberme explicado lo suficientemente bien como para que se�is capaces de hacerlo sin ninguna complicaci�n.

Si pod�is aportar algo a este tutorial, hacedlo a trav�s de los comentarios.

De alguna forma tendremos que empezar...

Bueno, pues lo primero yo pienso que ser�a presentarme, por lo que aqu� me ten�is, un muchachote (como dice mi madre) de 21 a�os que se dedica a dise�ar y programar p�ginas web y que aqu� ir� compartiendo todo lo que ha aprendido en los cuatro a�os que lleva con esto del web-design y por supuesto sus quehaceres diarios, que tambi�n tienen su sitio aqu�.

Agradezco a mi "fucking lord" Mayoral que haya insistido tanto en que empezara en este mundo tan diverso de las bit�coras, porque sin el seguramente no habr�a dado el primer paso :)