Archive for the ‘Tutoriales y trucos’ Category
Un div con fondo traslúcido – png transparente como fondo.
Un div con fondo traslúcido – png transparente como fondo.
Hace poco llegó a mis manos un nuevo proyecto web para maquetarlo (css+ xhtml); esta vez el reto residía en el fondo del DIV central dispuesto para recibir todo el contenido de la página. Éste era de fondo blanco traslúcido, por lo que tenía que mostrar parte del fondo del body.
Enseguida pensé en la posibilidad de usar un PNG transparente (con un blanco a opacidad 70%) como fondo del DIV: la verdad es que nunca lo había probado antes, así que no estaba seguro de su efectividad. Lo comenté en una comida, con un buen amigo (@cssbarcelona, responsable de http://www.cssbarcelona.com – Un saludo tío!-) y él, como no, se me adelantó haciendo el TEST: la idea era buena, funcionaba correctamente en versiones de IE7 y superiores (para versiones anteriores tendréis que echar mano de los trucos que os explicábamos en el post “ arreglando bugs de IE6 “) .
Hasta aquí, el truco: ahora un experimento que realicé sin mucho éxito… Todos sabéis que si el fondo que utilizamos es muy pequeño y pesa poco, pues mejor: agilizamos la página, la hacemos más rápida y ligera. Así que creé el PNG transparente, haciéndolo de 1X1 px y lo coloqué de tal forma que se repitiera. Pues bueno, no fue buen idea: nuestro programa de edición (DW cs4) se volvía lelo, era imposible moverlo cuando estabas pre visualizando la página, todo era leeeeento. La pregunta es ahora ¿Es un bug de DW o en realidad una imagen de 1X1 px transparente repetida es una idea pésima?
Seguiré investigándolo.
Videotutoriales para Flash
A través de Twitter (una vez más) conocimos la página gotoandlearn.com (por @leebrimelow); en este portal, del cual podemos decir que la organización de los contenidos nos parece exquisita, encontrareis multitud de videotutoriales (en ligles) que seguramente os ayudarán en vuestros procesos creativos utulizando FLASH (por cierto ¿Quién no tiene una profunda relación amor-odio on este programa?).
Lo más interesante es que, además de poder visualizar el videotutorial en el propia web, podemos descargarlo; tanto el vídeo como el proyecto (.fla) para poder “chafardearo” a fondo, que sin duda es ma mejor manera de aprender.
Esperemos que os sea útil!
Opciones de página y prefijos InDesing
Hola,
Lo más probable es que tengas activado el incluír prefijo al numerar páginas. Para desactivarlo selecciona las páginas i pulsa una de ellas (de la ventana páginas) con el botó derecho> luego opciones de numeración y sección se te abrirá esta ventana y quitas el check de incluir prefijo al numerar páginas
Espero que te sirva, ya me dirás.
 

Tutorial en video sobre Illustrator
Buenos tutoriales en video sobre adobe illustrator, el programa para ilustración digital.
Esperamos que disfruteis estos video tutoriales.
Rollover CSS sin parpadeos ni precarga de imagenes !
Un rollover es muchas veces un elemento importante para un menú, ya que le confiere a éste un aspecto más trabajado y profesional… Sin embargo realizar un rollover mediante JS no es interesante, puesto que merece la pena evitar usar el JS para los enlaces (por ejemplo), siendo mucho más interesante el poder elaborar un menú a base de texto, con algo de estilos.
El problema al realizar un rollover mediante CSS es ese molesto parpadeo que se ocasiona entre una imagen y otra; como un salto a blanco entre el estado “hover” y el de reposo, y viceversa.
Éste es el tiempo que se tarda en cargar la imagen… Usar una imagen más pequeña no siempre es solución, ya que muchas veces sigue ocurriendo con imágenes de 1k.
Pues bien, aquà os proponemos una solución que nos parece “ideal”, a ver que os parece!! El código de nuestro menú serÃa el siguiente:
Â
 <div id="menu">
<ul>
<li><a href="quien.php" mce_href="quien.php" >Quienes somos</a></li>
<li><a href="donde.php" mce_href="donde.php" >Donde estamos</a></li>
<li><a href="catalogo.php" mce_href="catalogo.php" >Nuestro catálogo</a></li>
<li><a href="contacto.php" mce_href="contacto.php" >Contacto Online</a></li>
</ul>
</div>
y nuestra hoja de estilo serÃa la siguiente:
Â
#menu ul{
list-style:none;
padding:0;
margin:0;}
#menu li {
margin:0;
padding:0;
float:left;
margin-right:3px;
color:#0048ff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
#menu li a {
display:block;
padding:5px;
padding-bottom:0;
padding-top:45px;
background:#d8cb61 url(img/bkg_menu1.jpg;
height:47px;
width:90px;
}
#menu li a:hover {
width:90px;
display:block;
margin-top:5px;
height:52px;
padding-top:40px;
background:#d8cb61 url(img/bkg_menu2.jpg);
} Vereis que en "#menu li a" definimos el estilo del enlace en reposo y en "#menu li a:hover" definimos el estilo del enlace "sobre" ("hover"), y lo hacemos mediante dos imágenes de fondo distintas... Pues lo mejor es hacerlo con la misma imagen, variando solo la posición del fondo, de la siguiente manera:
Vereis que en "#menu li a {
display:block;
padding:5px;
padding-bottom:0;
padding-top:45px;
background:#d8cb61 url(img/bkg_menu1.jpg) right;
height:47px;
width:90px;
}
#menu li a:hover {
width:90px;
display:block;
margin-top:5px;
height:52px;
padding-top:40px;
background:#d8cb61 url(img/bkg_menu1.jpg) left;
}
Antes tenÃamos éstas dos imágenes:
             
Ahora usaremos una sola que reune a ambas, asÃ:

Â
Lo que ocurrirá es que el fondo se desplazará, y puesto a que la imagen ya está cargada, evitaremos el parpadeo.
Podeis ver un ejemplo en acción AQUÃ!
Esperamos que vaya bien!!
Â
ENJOY!!!
OWERFLOW… Ojo con OPERA!!!
Bueno, vamos a hablar de la propiedad OVERLOFW y de como solucionar algun problemilla que ésta puede llegar a darnos con OPERA (si, con operta… Aún siedo reconocido como uno de los mejores navegadores, Opeta tb tiene sus pequeñas pegas).
Usamos la propiedad OFERFLOW para poder construir estructuras de aspecto idéntico a los IFRAMES, pero medainte CSS, sin tener que hacer uso de ningun FRAME, que como bien se sabe, entorpece enormemente al posicionamiento y a la accesibilidad.
Asà pues, si queremos tener algo muy similar a un IFRAME pero usando css, haremos lo siguiente:
__________________________________________________________________________________
<div style="width:180px; height:75px; overflow-y:auto; overflow-x:hidden;"><ul>Â <li>1</li>Â Â Â <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
   <li>10</li>
</ul>
</div>
__________________________________________________________________________________
Vereis que hemos introducido una lista dentro del div, para poder tener algun elemento dentro que "desborde" y poder ver el efecto del Overflow. El resultado es el siguiente: Vereis que hemos introducido una lista dentro del div, para poder tener algun elemento dentro que "desborde" y poder ver el efecto del Overflow.Vereis que hemos introducido una lista dentro del div, para poder tener algun elemento dentro que "desborde" y poder ver el efecto del Overflow.Vereis que hemos introducido una lista dentro del div, para poder tener algun elemento dentro que "desborde" y poder ver el efecto del Overflow.
Vereis que hemos introducido una lista dentro del div, para poder tener algun elemento dentro que "desborde" y poder ver el efecto del Overflow.Â
__________________________________________________________________________________Â
El resultado es el siguiente:
Â
Â
__________________________________________________________________________________
Como vereis, si estais navegando con IE o Firefox, el aspecto del DIV es identico a lo que podrÃa ser un IFRAME... Sin embargo, si lo intentais ver con OPERA, vereis que la cosa no va tan bien!!!
Lo que sucede es que OPERA no acepta las propiedades OVERFLOW-Y o OVERLOW-X (con las que podrÃamos dar una caracteristica distinta al SCRLOLL vertical y el horizontal). Asà que la única forma de que funcione es utilizar OVERFLOW: SCROLL; o OVERFLOW: AUTO; . Ésto tiene una pega, y es que la barra horizontal siempre se mostrará, ocupando su espacio, pero por el momento es la única forma para que ello funcione bien en todos los navegaores.
Además se tiene que tener en cuenta que, aún que actualmente el OVERFLOW-Y / OVERLOW-X funcionen en IE y en MOZILLA, no son caracterÃsticas CSS validables, al menos no para CSS 2.1 , aún que si lo serán para CSS 3 (que nos guarda muchas sorpresas!).
Y ahora, cuando parece que ya no queda nada mas que decir, hablemos de lo que pasa si un div con un OVERLOW contiene, por ejemplo, peliculas FLASH (como por ejemplo aquà www.npicasso.com/multimedia.php ). La cuestión es que, para que el comportamiento sea el mismo hay que añadir a cada pelÃcula el parámetro wmode="transparent" . De lo contrario os pararÃa esto: www.npicasso.com/multimedia_mal.php (seguimos hablando del comportamiento de OPERA).Y ahora si... ENJOY!
Â
Â
Â
Â
Reunirse con un cliente (diseño gráfico)… ¿Cómo llevarlo?
La primera reunión con un cliente, y hablamos del cliente final, siempre es muy importante ya que la primera impresión que el cliente tendrá de nosotros es seguramente la más importante. Asà pues eso es de cajón, no podemos ir a ver a un cliente vestidos de cualquier manera, hay que arreglarse un poquillo… Se que esto suena algo a discurso de mamá, pero es un fallo que yo he repetido una infinidad de veces antes de entender que muchas veces tengo que dejar mis preferencias a un lado y tratar de dar una imagen concreta, que transmita seguridad y confianza. Con esto no quiero decir que hay que ponerse de traje y corbata: al igual que un diseñador busca su estilo sobre el papel deberÃa tratar de aplicárselo sobre su persona… Tenemos que tratar de transmitir algo a través de nuestra imagen: si uno es extravagante y transgresor tendrÃa que intentar ir más allá de “ir de tirao†con unos tejanos rotos y una mochila en plan petate; si esa es la imagen que queremos dar tendrÃamos que hacerlo con estilo. Asà mismo si el caso es el de una persona más sobria y seria, tendrÃa que tratar de ir más allá de la camisa y los pantalones de pinza… al igual que en el diseño, hay que buscarle las vueltas.
Lo segundo, y siguiendo con lo sencillo, es el llevarnos a la reunión papel y boli. Podemos llevarnos una libreta, que en todo caso no abriremos por la primera página (que no parezca que estamos estrenando la libreta!), o folios en blanco, y deberÃamos intentar sacarlo tan pronto como sea posible, probablemente después de las presentaciones: esto es importante puesto a que, por un lado, daremos una imagen positiva ante nuestro cliente y, por otra parte, apuntaremos las cosas, que no viene de más (no se el resto de la población humana, pero yo tengo memoria de pez, o como dice Flipi, retengo menos en la cabeza que mi abuela en la vejiga). No hace falta que lo apuntemos todo, pero que el papel no se quede en blanco. Yo me he dado cuenta que lo de tomar apuntes es de las pocas cosas útiles para la vida que he aprendido en el cole…
La presentación con el cliente tiene que ser, a mi gusto, forma pero desenfadada. La verdad es que las primeras veces que yo he tenido que reunirme con un cliente iba histérico, lo cual me hacÃa estar súper serio y rÃgido como con un palo metido en el culo. Un buen dÃa decidà tomarme un quinto de birra antes de la reunión, siguiendo el consejo de un buen amigo; TACHAN! Fui más tranquilo y relajado, fui yo mismo. Con el cliente hubo algo de bromas y risas, hablamos sobre lo que necesitaba y logré el proyecto. No digo que desde entonces bebo antes de una reunión, pero entro más relajado, trato de ser yo mismo pensando que a fin de cuentas si no consigo conectar con el cliente tal vez no sea interesante para nadie el que vayamos a trabajar juntos. Asà que naturalidad; no hace falta hacer grandes aspavientos ni golpear con el puño al cliente en el hombro, pero que él/ella note que estás tranquilo/a, que te sientes segur@ de ti mism@ y que sabes lo que haces; eso hará que se sientan en buenas manos.
Lo siguiente es saber cuanto hablar y cuento escuchar. A mi ver lo mejor es llegar, presentarse y romper el hielo mientras sacamos nuestras cosas del portafolios/mochila/bolsa y una vez preparados lancemos la pregunta “explÃqueme, que necesita?†A partir de ese momento el cliente tiene que podernos explicar todo el rollo que quiere. Dejemos que hable, aún que diga memeces, que nos lo explique todo sin interrumpirle. Podemos ayudarle o sugerirle alguna idea sutilmente, pero solo a modo de cuña, y apuntamos todo lo que podamos. Entonces, cuando notemos que se le termine la cuerda (puede que tarde un minuto o una hora), y sin dejar que se produzca un silencio incómodo, intentaremos recapitular, haciendo un resumen de lo que nos ha explicado. Lo que resulta útil es poner ejemplos nombrando paralelismo entre su proyecto y otros proyectos conocidos y que el cliente pueda entender, por ejemplo: bueno yo creo que, por lo que me cuentas, necesitarÃas un logotipo tipográfico, vistoso, elegante y fácil de identificar, tipo el de cocacola…. Veréis que en realidad le hemos dicho poco, pero el cliente se quedará con “como cocacola†“vistoso†“eleganteâ€, y gracias a esto entenderá en seguida a lo que nos referimos, por lo que o estará de acuerdo o nos podrá matizar un poco más su idea. El poner ejemplos de este tipo es muy útil… Si se trata de una página web lo mejor es llevar con nosotros un portátil y quedar en algún sitio donde sepamos que seguro tendremos conexión (a mi el Strabucks me funciona bien; hablamos tomando algo, muy cómodamente sentados en butacas, en un lugar tranquilo y encima si tu invitas quedas como un señor).
La historia es hacer que el cliente crea que nuestras ideas son en realidad suyas… La verdad es que en ese sentido, cuentos menos méritos nos llevemos mejor, ya que un cliente raramente se queja de algo que ha pensado él, y por lo contrario le costará mucho tragarse una idea que cree ajena y diferente.
Por ejemplo: Por lo que me comentabas, creo entender que quieres que vuestro papel de empresa sea muy sobrio y serio, pero que se note que estáis cuidando el diseño, y creo que es una elección muy acertada; por lo que entiendo queréis algo muy minimal bla bla bla…
Es clave repetir frases como, creo que tu quieres – por lo que tu me explicas quieres TAL – NECESITAS taltal… Yo muchas veces refuerzo esto durante el proceso; si tengo comunicación vÃa mail con el cliente suelo decirles cosas como; he estado haciendo pruebas: te envÃo el logotipo, creo que lo que me propusiste sobre los colores es muy acertado, la verdad es que has elegido muy bien, me lo apunto para tenerlo en cuneta!
Se que suena chorra, pero mediante éste tipo de cosas el cliente se siente parte del proceso, se siente participe y hace que el diseño sea un poco suyo, por lo que su “amistad†con el mismo sea mayor y menor la probabilidad de que lo rechace.
Lo último que quiero comentar, y es lo último porque me estoy enrollando como una persiana, es el tema del precio; hay que evitar hablar de dinero cara a cara, un e-mail con un presupuesto detallado siempre es más serio y menos agresivo. Tenemos que evitar que el cliente nos diga ES CARO o, igual de grave, que crea que le estamos cobrando una miseria. Si el cliente quiere tener una idea podemos explicarle que es difÃcil fijar un precio si antes haber realizado una valoración mediante la cual podremos determinar aproximadamente cuantas horas dedicaremos al proyecto y que medios serán necesarios. Podemos soltar una aproximación, siempre recalcando que se trata de algo aproximado: en todo modo la aproximación siempre es mejor que peque por cara que no por barata… Hay que perder el miedo a cobrar algo correcto y digno; si empezamos a cobrar por debajo de lo que merecemos esto se puede convertir en una lacra, ya que los clientes pueden empezar a estar interesados en nosotros solo por los precios…
Más adelante hablaremos sobre las tarifas y la manera apropiada de determinar cuando vale un proyecto; lo que quiero adelantar es que ante todo hemos de adaptar el precio al cliente.
ESTILOS DE CAPA PARA PHOTOSHOP.
Otra aportación genial de http://www.dezinerfolio.com.
Una colección de estilos para capas de photoshop. Para instalarlas tan sencillo como ir al menu EDICIÓN ->GESTOR DE AJUSTES PRESTABLECIDOS alli seleccionar ESTILOS en el desplegables y darle al botón de cargar. Seleccionamos el archivo y listos!
ENJOY!
