Agosto: Mi 1er trabajo 2.0

Mi primer trabajo comenzó en octubre del año pasado, casi un año. Fue en un supermercado. Entré como reponedor y allí estuve 9 meses. Dentro de esos nueve meses estuve varias veces intentando solicitar un puesto en administración, haciendo lo que sea, llenando formularios o lo que fuere. Tenían que darse cuenta que tenía más estudios como para ser un simple reponedor.

El tema es que cuando entrás a ese tipo de trabajos, los encargados o quienes te hacen la entrevista lo único que toman en cuenta es si sabes leer y escribir, nada más. Porque... ¿Para qué querés a un reponedor que sepa Operador PC, Diseño Grafico / Retoque fotográfico y Reparación de PC? No les sirve de nada! si lo único que necesitan es que el empleado reponga los artículos en la góndola. Sin embargo mi solicitud fue rechazada 3 veces, o quizás más, no lo recuerdo. Simplemente quería un trabajo en el cual me sintiese cómodo haciendo las tareas que siempre me gustaban hacer con la herramienta que más manejaba. Además, a veces parecía que no me creían que yo era estudiante de Abogacía. Todo eso les chocaba también al saber que vivía en el barrio Marconi.

En el último mes dije "Basta!" y me busqué otro trabajo. Había visto algo sobre diseño gráfico y me llamaron para una entrevista. La entrevista fue rara. Era mi segunda entrevista y estaba nervioso. No tenía aspiraciones salariales para esta tarea, asique acepté lo que ellos ofrecían para el puesto. Después de varias llamadas logré que me tomaran y dejé el super. La primera prueba fue dura, pero más duro fue que, con esa prueba me tomasen para el cargo, porque era dificil. Y ahora les digo porqué (Programadores: Atentos!)

La idea era que, yo como diseñador, tenía que trabajar sobre el CSS de una página sin forma. Por ende, tenía que darle forma. Hasta ahí todo bien.

El problema que tuve al principio era que tenia que trabajar sobre la hoja de estilo, pero a ciegas. Es decir, que tenia que hacer los cambios en la hoja de estilo, pero nada más, cambiar y guardar, y era difícil ver si lo que había cambiado estaba bien. Era como trabajar con Photoshop con los ojos cerrados!

Así que hablé con quien se suponía ser el jefe en la oficina y le dije que no podía hacerlo así, que tenía que ver los cambios. Así que después de intentos y de hablar por teléfono con el programador me dieron la hoja de estilo original y así podía ver los cambios. Ahora otro problema. Tablas. Si, tablas. Unas etiquetas html que son muy útiles, pero que no me llevo bien con ellas a menos que arme una lista, únicamente.

Su forma:


<table border="1" summary="Ejemplo de tabla simple.">
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4>
<td>Celda 5>
<td>Celda 6>
</tr>
</table>


Estuve viendo el código fuente y parecía algo sencillo y por lo que vi en la "vista real" lo que tenía que modificar era una especie de panel de administración tipo Wordpress. Hasta ahí todo bien. Pero aparecían más problemas...

Las tablas contenían únicamente el atributo "class" pero no contenían ningún "ID" como para identificar cada bloque y poder moverlo, poco pude hacer en los archivos php porque no se casi nada de php. Apenas algún ID pude poner por lo menos para identificar los bloques principales como para poder separar el encabezado (head) del cuerpo o el pie de página (body y footer, respectivamente). Para colmo, el sub-elemento de cada etiqueta tenía el mismo estilo de la etiqueta principal, aún más difícil de darle estilos diferentes!

Ejemplo:


<tr class="laclase" >
<td class="laclase" >Celda 1</td>
<td class="laclase" >Celda 2</td>
<td class="laclase" >Celda 3</td>
</tr>


Lo único que pude hacer fue nada más que centrarlo un poco y poner una imagen de fondo para ver que estaba bien centrado, y separar head, body y footer. Deprimente!

Luego de esa prueba, como una semana después, me llamaron de nuevo y era para decirme que el puesto de diseñador no iba a ser posible, pero que me podían dar otro puesto, que era armar las publicaciones (post) para una página de descargas de juegos. Pero es una historia larga y son más detalles y más problemas. Muchos...

Mejorar el aspecto tipográfico de tu blog

Gracias a un tweet de SpamLoco me enteré que se puede utilizar cualquier tipo de fuente (letra) en nuestro blog. La idea es poder dejar de lado un poco la uniformidad de utilizar las fuentes clásicas, como Arial, Helvética, Verdana, Georgia o Lucida y mostrar el blog con un texto diferente.

En La Brújula Verde postean cómo podemos conseguir que nuestro blog tenga una tipografía original. Aclaro que ésto funciona únicamente en los navegadores actualizados como Firefox, Safari, Opera y Chrome.

El "truco" lo realizamos con la especificación @font-face de CSS de la siguiente manera:

Primero debemos elegir la fuente que queremos mostrar y alojamos el archivo de la fuente en un servidor propio. Luego vamos a la Edición HTML y colocamos el código CSS antes de </b:skin> :

 @font-face {
font-family: Nombre-de-fuente;
src: url("url-de-archivo/blackout.ttf") format("truetype");
}

Después de eso, para utilizarla debemos establecer el tipo de fuente a utilizar en el lugar donde queremos que se vea, por ejemplo en algún título:

h1 { font-family: Quadranta-bold, Helvetica, Arial, sans-serif; }

Dónde: Nombre-de-fuente es el nombre de la fuente.
            url-de-archivo es la dirección del servidor donde alojamos el archivo de la fuente.
            Quadranta-bold es el nombre de la fuente utilizada en el título como ejemplo.

Vemos cómo queda con la Vista Previa y Guardamos los cambios. Ya lo único que quedaría sería cambiar el tamaño a la fuente, pero eso es a gusto personal. Yo estoy utilizando la Quadranta bold en los títulos de los Post.

Una imagen en la cabecera del blog

Hace unos días, un tweet de mi amiga Un!k me hizo ofrecerle mi ayuda para con su blog. El problema estaba en que no podía colocar una imagen en su blog bien ubicado.

Vía msn me cuenta que tenía como guía una entrada de Rosa sobre el tema, pero no pudo seguir el consejo al pie de la letra, puesto que faltaba un dato para lograrlo. Lo que Rosa propone es colocar manualmente mediante código CSS una imagen en la cabecera o header del blog, también aconsejando jugar con valores para redimensionarlo. El código que tenemos como base en el CSS es este:


#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Rosa propone el siguiente cambio(cita):

Añades la url tu la imagen para que aparezca como fondo, dentro del bloque “header”, si quieres eliminar los bordes,borra la línea “border”: border:1px solid $bordercolor;Si tu imagen mide 660px de ancho perfecto, sino puedes establecer otro ancho, si lo que quieres cambiar es la altura puedes añadir el valor height, especificando la altura que quieres. Yo hice mi propia imagen, así que le di el tamaño de la cabecera de plantilla.
Quedaría así:


#header-wrapper {
width:660px;
margin:0 auto 10px;
}
#header {
margin: 5px;height:100px;
background-image: url(http://URL DE TU IMAGEN);
text-align: center;
color:$pagetitlecolor;
}

Como verán, se agrega la imagen, quedando centrada. Un!k lo hizo de esta forma, pero la imagen no quedaba justo donde élla quería, entonces yo le corregí el error(en realidad lo hice personalmente, pero eso es otra historia), trabajando directamente en la imagen.

¡Claro! Una vez ubicada una imagen, o cualquier otro elemento dentro de un bloque DIV, dicho elemento adquiere una etiqueta en la cual se puede trabajar, y en blogger, dicha etiqueta viene en el CSS para ser trabajada, y es ésta:


#header img {
margin-left:auto;
margin-right:auto;
}

Y el cambio que le hice a Un!k fué éste:


#header img {
background:#FFF;
margin:0 -100px 0 4px;
padding:0 217px 0 0;
width:400px;
height:105px;
}

Explicación: Los cambios que hice fueron darle un fondo blanco al bloque de la imagen (img) con background; mover la imagen hacia la derecha con margin (margen); darle un relleno hacia la derecha, para tapar la imagen del fondo mismo del header con padding (relleno); y por ultimo redimensionar la imagen con width (ancho) y height (altura). Los valores de margin y padding son arriba, derecha, abajo, izquierda, y cabe destacar que SÓLO margin puede tener valores negativos.