Diseño de páginas web | Ayudas a diseñadores | CSS

Archive for the ‘Diseño’ Category

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.

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!

Recientemente, a través de twitter, conocimos una estupenda galeria css, CSS BARCELONA.

En ella podemos encontrar una amplia recopilación de páginas web creadas mediane hojas de estilo CSS; la galería puede ser una práctica fuente de ideas para el diseño de tu página web, así como una forma efectiva de dar a conocer tu trabajo como maquetador de websites.

La peculiaridad es que todas las páginas que incluye la galería tiene que estar, como mínimo, en uno de estos idiomas: castellano ,català, euskera, bable, valencià.

Esperamos que la disfruteis!

Es importante que una hoja de estilo, además de válida, esté optimizada al máximo: en definitiva, evitar cosas inútiles y hacer que “pese” lo mínimo posible.

Sin embargo ya es bastante complicado el saber crear una buena hoja de estilo como para tenerla que repasar a fondo encontrando todo aquello que sobra (a veces por descuido); por suerte exixte una gran gama de herramientas online, gratuitas, que nos ayudarán mucho.

Podría publicar una larga lista, pero prefiero limitarme a aconsejar la herramienta que yo mismo uso:

http://www.cleancss.com/

Es rápida, intuitiva y muy efectiva; espero que os sea de mucha ayuda!

Tal vez estos sean selectores CSS poco utlizados, pero en ocasiones muy utiles.

El primero que vamos a abordar es el selector “HIJO”. Este nos servira para dar una propiedad a todos aquellos elementos que se encuentren dentro de otro (igual que un selector “descendente”) pero sin extenderse a elementos sub-anidados; ose que solo se extendera a los descentes inmediatos de ese elemento. Estos selectores se fefinen con el simbolo “ >”. 

Explicado asi suena complicado, pero no lo es… Pongamos un ejemplo:

Codigo CSS:
#menu >li {color:#green; }

Codigo HTML:
<ul id:”menu”>
<li>Inicio</li>
<li>Servicios
<ul>
<li>Reparaciones</li>
<li>Venta</li>
</ul></li>
<li>Otros</li>
</ul>

En este caso todos los elementos del menu se veran de color verde (#green) pero los elementos del submenu “Servicios” se veran de color negro (o el predeterminado para el texto generico de la hoja de estilo.

Ya hace meses que en el estudio nos encontramos repetidamente con el mismo problema: clientes que necesitan de un diptico/triptico/tarjetas/poster… Pero que necesitan tiradas cortas, de 1000-2000 ejemplare y que disponen de un presupuesto reducido (ya sabemos que con los tiempos que corren…).

Fue entonces cuando Alex, el reaponsable de la parte editorial, empezo su busqueda. Tras varias pruebas (diseñamos unos flyers para nosotros mismos y los enviamos a imprimir a diferentes imprentas low cost) encontro “saxoprint” (www.saxoprint.es). Esta es una imprenta digital situada en alemania y con oficinas en madrid… Los precios los podeis comprovar en la web (son bestiales) y la calidad es buena, asi como sus servicios, puntualidad y soporte. Lo recomendamos.

PR: wait… I: wait… L: wait… LD: wait… I: wait… wait… wait… Rank: wait… Traffic: wait… Price: wait… C: wait…

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.