Este es un recurso muy utilizado y es fácil de hacer, a continuación vamos a ver paso a paso como hacerlo.
Este mini-turorial sirve en los casos que queremos agregar un bullet a la ziquiera de nuestros headers H1, H2, H3, según sea el caso.
Aquí un ejemplo:
Este es un efecto interesante, los contenidos hacen fade al llegar al bottom de la página, esto se logra con un gradient en .png de blanco a transparente y con un z-index elevado para asegurarte de que quede encima de todo. ¿quiéres impresionar a tus clientes? :p
Haces un menú con fondo transparente o de color sólido, en el rollover necesitas que despliegue una imagen, ya sea un gradient, una textura, etc. y es ahí cuando comienza el dolor de cabeza, porque la imagen que carga en el rollover tiene un delay antes de aparecer, esto es muy molesto y hace que el sitio parezca lento.
Hay soluciones basadas en javascript para hacer el preload de un menú, pero queremos evitar el uso de js al máximo, sobre todo cuando no es necesario, así que recurrimos al CSS para que haga el trabajo. Lee todo el post »
¿Qué significa el título? Se refiere a ajustar el alto de líneas de tu texto para que concuerde en las diferentes cajas o divs aunque tengan diferentes tamaños de letra. ¿Confuso? esta captura lo explica mejor.
Se ve bien a primera vista, incluso el autor del post usa este recurso en su blog y se ve bien, pero... es engañoso.
Como pueden veer el diseño termina muy rígido a mi parecer, otro detalle es que si bien funciona con ciertos tamaños de letra, cuando la diferencia se agranda comienza a descomponerse la cosa. Cada tamaño de texto tiene una altura de línea óptima (en la teoría y en la práctica), y este recurso llamado Syncotype lo pasa por alto.
Visualmente los textos más pequeños necesitan menos altura de línea de otro modo se vuelve dificil la lectura. Syncotype, una solución para tomarse en cuenta y tenerla en nuestro abanico de herramientas pero hay que tener cuidado con su uso.
Este sitio fue hecho en asociación con Morgan Global Solutions y debo decir que fue una experiencia muy positiva en muchos sentidos. Es un sitio de bienes raíces, promociona propiedades en Arizona y Sonora. El sitio está hecho completamente en CSS + HXTML y tiene algo de flash en el home y en los interiores, además está en inglés y en español.
Aquí pueden ver el sitio viejo, aquí pueden ver el sitio que les hicimos.
La paleta de colores del sitio la hice así porque así son los colores de nuestro entorno acá por Sonora y Arizona, cafés, naranjas, amarillos, incluso a veces los cerros se ven morados.
Quiero contarles algo que pasó con este cliente. En un principio no sabían si soltarnos el trabajo, —¿sí lo van a hacer bien? preguntaban, ahí Daniel jugó un papel muy importante en la labor de ventas y convencimiento, pasado este episodio comenzamos a trabajar y les envié el diseño, lo vieron y dijeron que gustó mucho no sin antes preguntar si realmente nosotros lo habíamos hecho, sorprendidos levantaron las cejas, al parecer no pensaban que desde este lado de la frontera, se hiciera diseño de calidad. La realidad es que los norteamericanos algunos norteamericanos tienen esa percepción de México, creen que todo es como se ve en la TV.
Terminar y entregar este trabajo fue una experiencia agridulce, por un lado fue dulce por que el nuevo sitio les gustó mucho el trabajo lo vendimos bien y un poco agria por otro lado por que creen que en México no somos capaces de hacer trabajo de calidad y eso saltaba en diferentes partes del proceso. Al final creo el balance fue bueno.
Todavía no ponen el sitio en su dominio final, no se la razón pero creo que andan en eso.
Pemex tiene sitio nuevo y está hecho con CSS, recién me enteré por un comentario que dejó Sergio Valladares en una entrada antigua en este blog.
De entrada el sitio se ve bien, al parecer siguen un manual de identidad por la imagen de presidencia que está presente en el sitio. En general el sitio está bien hecho, tiene muchos contenidos, documentos y fotografías que lo enriquecen mucho.
Solamente unas pequeñas recomendaciones:
Nadie dijo que fuera fácil, pero que el sitio esté hecho bajo estándares ya es ganancia, así que felicitaciones al equipo de diseño y desarrollo de Pemex por montarse en el barco de los estándares.
Ayer le mandé un email a Sergio felicitándolo y me escribió de vuelta dándome algunos otros detalles del desarrollo, incluyendo el por qué de los textos justificados (que no depende de él si no de otras personas que así lo prefieren), en fin, échenle un vistazo al sitio, de los pocos sitios del gobierno federal hecho casi-completamente en CSS.
Actualización: Sergio nos habló un poco de como fue el proceso del resideño del sitio, interesante lectura, si quieren saber que dijo pasen a leer los comentarios.
1. Etiqueta las áreas generales. Esto hará que encuentres mucho más fácilmente el bloque que quieres modificar. Tienes que "comentar" el nombre del bloque, esto se logra poniendo el título dentro de /* el título */
/* -- Header -------------------------- */ #header { } /* -- Contenido ----------------------- */ #contenido { } /* -- Footer -------------------------- */ #footer { }
2. Manten tus bloques agrupados, por ejemplo todos los elementos que vayas a controlar con CSS deben quedar en el mismo bloque y después del elemento padre.
#contenido { } .contenido h1 { } .contenido p { }
3. Usa el shorthand, o lo que es lo mismo la versión abreviada del CSS. Hay diferentes sitios donde puedes ver como es el shorthand, aquí pongo una liga a una de las guías de shorthand.
Sin shorthand
#midiv { font-family: Verdana, Arial, Helvetica, Sans-serif; font-size: 12px; font-weight: normal; line-height: 15px; }
Con shorthand
#midiv { font: normal 12px/15px Verdana, Arial, Helvetica, Sans-serif; }
4. Genera los nombres de las clases y/o divs de forma inteligente, por ejemplo en vez de nombrar una clase .textorojo, nómbrala .alerta, así cuando quieras cambiar el color de la alerta su nombre seguirá siendo util y no tendrás que modificar tus archivos HTML.
Otro caso es si tienes un layout de dos columnas nombra a estas por la función que desempeñan, por ejemplo: #subnav, #contenido en vez de nombrarlas #col1, #col2 porque si las cambias de lugar las confusiones comienzan.
5. No uses altas y bajas en los nombres de las clases o los divs, esto puede hacerte perder mucho tiempo si tienes un archivo de CSS de varios cientos de líneas de código.
Recién terminamos este sitio para Sonograph, lider regional de impresión de etiquetas en rollo. Buscando acceder al mercado de EU se hizo una versión en inglés. El sitio es 100% informativo, está hecho con XHTML + CSS.
Para los títulos (que usan una tipografía custom) usé sIFR, la tipografía se llama Alwyn.
En otras cosas pero relacionadas a esto, quiero decir que el servicio de hospedaje de prodigy es pésimo, el control panel es horrible, nada intuitivo y cada link es abierto en una ventana nueva con _blank. Este es el segundo cliente que tengo que tiene contratado su hospedaje con prodigy hosting, la verdad ni el peor servicio que haya contratado en EU (que han sido varios) se compara con este, además del control panel que está hecho con las patas los pies, tuve otros problemas con las formas de contacto, el servicio no acepta por default un index.php hay que pedir a soporte que haga ajustes para que corra. En general muy mal, perdí casi una semana con los de soporte técnico para arreglar cosas que deberían estar corriendo por default.
Bueno, habiéndome desahogado... si le ven algún bug al sitio les agradezco me lo hagan saber. Ir a Sonograph.
Esta vez el sitio no lo hice yo, si no Victor de Desarrollos Digitales. Pero igual me da gusto que se reconozca el trabajo de otros mexicano y claro, también porque este trabajo lo veo como hecho en equipo. Mi participación fue con el diseño, hice la página de inicio y se la entregué en un archivo .PSD. Aquí el sitio de Suspiros Pastelería.
El sitio fue agregado a CSSmanía y hasta el momento con una calificación de 9, CSSmanía es el directorio de sitios hechos bajo estándares web más importante hoy en día. Bien por Victor que es de los pocos —Asesores de Sistemas— (una vez se encabronó por que lo presenté a otro amigo como "El programador") realmente preocupado por los estándares y el buen diseño.
Aquí pueden ver una captura de lo que hice.
Estoy contento porque el sitio de El Pescadito ha sido publicado en varios directorios de sitios hechos con CSS + XHTML, y gracias a eso (me imagino yo) TutorialBlog publicó recientemente 30 sitios en azul e incluyeron el sitio de El Pescadito.
After a few days off, we’re back with 30 great xhtml and css websites that use Blue to great effect.
Hay otras entradas interesantes como estas:
Este es otro directorio de layouts hechos con CSS, según dice en el sitio son "Grado A" osea que se ven bien en todos los navegadores además de que están optimizados para ayudarte con el posicionamiento en los buscadores.
El código de los layouts es muy limpio, un buen recurso sin duda. Puedes descargarlos aquí.
Si eres un fanático de los estándares o simplemente te gusta el diseño web, te recomiendo este link donde se recopilan los sitios que promueven el uso de los estándares y el CSS. La lista es muy completa, creo que están si no todos por lo menos los más populares. Día Chronie.
Consigue una escalera real con la ayuda de Blog de Poker
DE VENTA AQUÍ
Precio: 120 varos cada uno
Medida: 60x90 cms.
Acabado: Barníz Matte
Verlo más grande
Si quieres uno escríbeme a droid(at)nudonation.com, llama al 2114139 o hazlo a través de la forma de contacto.
