Bienvenidos a Clase Z

Esta página nace con la intención de recopilar y ordenar todos los recursos que he ido encontrando y descargando en mis años como diseñadora web.

Todos los recursos que encontrarás en esta página son gratuitos y están bajo licencia Creative Commons. Si alguno de vosotros se encuentra con algún recurso con derechos de autor y que no sea gratuito que me lo comunique. Lo quitaré a la mayor brevedad posible.

Relevancia e Importancia del Branding

“No hables si lo que vas a decir no es más hermoso que el silencio.”
Proverbio Árabe.

 

RESUMEN
Consideramos muy significativo en el estudio de la mercadotecnia adentrase en el alcance, relevancia, importancia, repercusiones y ventajas de branding. En este artículo se analiza sus aspectos básicos, todos aquellos aspectos que se deben tomar en cuenta con respecto a su aplicabilidad, más cuan do es sabido que el branding nos conecta con nuestros clientes, transmite nuestros valores, no se puede copiar y por tanto, marca una diferencia sostenible en el mercado.

 

ASPECTOS BÁSICOS, FUNDAMENTOS, ALCANCE E IMPORTANCIA

El branding no es un concepto reciente, pues sus orígenes se remontan a los años 30 desde la creación de Procter&Gamble, cuya organización se ha orientado siempre a la gestión de marca.

Considérese, que el branding se define como el proceso de creación y gestión de marcas , es decir, consiste en desarrollar y mantener el conjunto de atributos y valores de una marca de manera tal que sean coherentes, apropiados, distintivos, susceptibles de ser protegidos legalmente y atractivos para los consumidores .

Dentro del análisis de este tema por los participantes del programa de Postgrado de Gerencia de Calidad y productividad en la asignatura de mercados, la Lic. Carmina Grisante, nos indica, que se tenga presente la aportación de Carlos López, cuando al referirse al Branding, se considere que es un concepto abstracto que se podría como el proceso de creación y gestión de una marca y se enfoca en logra principalmente posicionamiento, mantenimiento, recuerdo y reconocimiento.

Debido a las condiciones turbulentas del mercado, ha conllevado a mayor dificultad para mantenerse en él, producto de las presiones de la globalización y de la agresiva competencia, ha conllevado que la gestión de marcas posea mayor importancia en la actualidad, porque no es lo mismo competir en economías cerradas de décadas anteriores, que en el mundo globalizado actual.

Definitivamente la marca desempeña un rol significativo en la identificación del producto y de acuerdo a sus características ella puede ayudar a los consumidores a identificarla plenamente favoreciendo mucho a la gestión de mercados.

 

Marçal Moliné señala 8 factores esenciales en la construcción de una marca que no se deben olvidar, como son:

Rasgos de identidad, se refiere a que permite no solo saber como es sino como se comporta la marca en cada circunstancia de su vida.

Es un organismo vivo. Es decir la marca debe evolucionar a lo largo del tiempo atendiendo a los cambios del entorno.

La marca de éxito es eficiente a dos niveleses una percepción que proporciona una sólida conexión emocional y al mismo tiempo es un elemento de convicción racional (la gente la reconoce y confía en la calidad de lo que representa)

La marca funciona no porque defina la manera de ser de un producto, sino porque a la persona a la que este va destinado se siente definido por la marca: al respecto, se establece una relación diferenciada y única entre consumidor y producto.

Indestructible. La marca no es material y por esto es el sitio más sólido donde la empresa debe apoyarse. Al respecto el éxito de la misma dependerá de cómo se perciba.

No son los clientes los que abandonan a la marca sino las marcas las que abandonan a sus clientes. Una marca debe mantenerse en todas sus comunicaciones

La marca se reinvierte y multiplica: una marca, puede formar alianzas, puede extenderse en otros productos de otras empresas facilitándoles así el éxito con la menor inversión y más rápidamente. La marca puede también tener extensiones.

Distinción. Es decir, la diferenciación en cuanto a la marca se refiere es un elemento esencial como en los demás aspectos de la estrategia empresarial, sobre todo porque incluyen varias facetas que integran su identidad.

Definitivamente, no se puede hablar de branding como separado de mercadeo, pues sería incorrecto. Hay que tener presente que la marca es una promesa. De ahí la importancia de que se comercie el producto con calidad.

En el contexto venezolano, el branding se hace con recurso limitados, como punto fundamental tiene que partir de la investigación del consumidor, luego viene el desarrollo del posicionamiento del producto, que es la etapa crucial que establece la diferencia con el competidor, que sea una referencia válida para que genere la compra, y así levantar la marca hacia el futuro. No hay margen para errores y nadie puede darse el lujo de invertir millones en una campaña sin saber si será efectiva.

María Inés Castillo nos dice, hacer branding es ponerle nombre a la solución que da un producto, Para lanzar una marca hay que tener una razón de ser. La idea de lanzar una marca es atender un nicho insatisfecho.

Columnas contínuas con CSS

 

Redactor: Ing. Carlos Mora Vanegas – Ingeniero-Administrador ( Exatec) Prof. Titular UC de Postgrad
Email: cmora@postgrado.uc.edu.ve
Licencia Copyleft

 

Diez errores en las web de Comercio Electronico

Si tienes resueltos estos 10 errores, tienes la garantía de que tu web tendrá mucho más éxito.

Son los 10 errores más comunes en Marketing en Internet. La estadística dice que tu cometerás al menos uno de ellos en este momento, así que lee atentamente lo que sigue.

Lo siguiente sólo tiene sentido si quieres administrar alguna especie de negocio o empresa online, lo cual la mayoría de nosotros hacemos. Puedes permitirte cometer algunos errores con una web personal, pero si estás administrando un negocio o empresa online las siguientes reglas están escritas para ti.

Los siguientes son errores serios. Esto puede parecer elitista o egoista. No queremos ofender a nadie, es solo que hay ciertas cosas que realmente no se deben hacer. Esto es…

 

Error num. 1: Usar proveedores de hospedaje gratuitos.

Vamos a ver: No se puede tener una web de empresa o negocios usando espacio gratuito como Geocities, Tripod, Hypermart etc. No importa lo que pienses, sencillamente no va a funcionar. Como se suele decir, se obtiene lo que se paga.

No hay nada peor que visitar una web que está alojada en un obviamente-sobrecargado servidor. No mencionaremos nombres, pero algunos de estos servicios gratuitos son sencillamente terribles. Tu web es el bien más importante que tienes y debe dar una buena primera impresión.

Por otro lado, nada es totalmente gratis de todas formas. Cuando obtiene espacio gratuito le obligan a mostrar banners y publicidad de la empresa en el espacio principal de su web. Esto es incoherente si piensas en ello desde el punto de vista empresarial.

Puede encontrar una buena empresa de alojamiento (hosting) por tan solo 20 dólares al mes. Seamos realistas, si no estás dispuesto a gastar en espacio para su web, donde está su seriedad? Muchos clientes potenciales se van automáticamente debido a esta cuestión.

Y mientras estamos con el tema de hospedaje asegúrate de conseguir su propio nombre de dominio. De nuevo, si no estás dispuesto a gastar unos 70 dólares en ”proteger su territorio” en la web, ¿qué van a pensar sus clientes potenciales? Tómate en serio tu empresa y negocio o finalmente fracasará.

 

Error num. 2: Destruir su web con gráficos, java, música, etc.

Este es el segundo error más ofensivo en el mercadeo por Internet. Si estás administrando un negocio online, el trabajo más importante de su web es vender sus productos o servicios. Cualquier cosa que distraiga su web de este objetivo debe ser evitado como la peste. ¡Así como suena!.

A menos que seas un diseñador gráfico, las imágenes que tardan una eternidad en cargarse no van a vender nada. Y tampoco el java, que puede bloquear el navegador de su visitante. Lo mismo para cualquiera de los más populares programas ”plug-in”. ¿Sonido o musica en tu web? ¡No, No!.

A menos que venda CDs, el sonido no pertenece a la web – al menos todavía. Seguro que puede discutir esto, pero la realidad es que puede causar problemas a sus visitantes. Los gráficos vistosos, java, plug-ins, archivos de sonido, etc. no hacen otra cosa que retardar la presentación de tu web y hacerla eterna para cargar.

No nos haga caso, simplemente mira cualquiera de las 100 mejores webs en Internet. Visita Yahoo! que es sin duda la web más popular. ¿Cuándo fue la última vez que viste gráficos vistosos, aplicaciones java o escuchaste música al entrar a Yahoo?.

 

Error num. 3: No pedir comentarios o no actuar sobre las opiniones de los visitantes.

Esta es otra de las grandes y nosotros podemos atestiguar el valor de pedir y actuar sobre los comentarios de los visitantes. Una cosa que mucha gente parece olvidar es que es el potencial cliente al que le debe gustar lo que ve. Y no mucho más importa. Aquí hay un ejemplo real:

Hace un tiempo lanzamos una web e inicialmente usamos un diseño con marcos. Eramos conscientes de los problemas potenciales y empleamos mucho tiempo chequeandola para hacerla lo mas compatible posible con los navegadores. Pero después de pedir comentarios descubrimos que muchos visitantes lo odiaban.

Y lo más grave es que a menos que hubiéramos pedido comentarios nunca nos habríamos dado cuenta de ello. Todo parecía y funcionaba bien para nosotros, pero un número importante de nuestros visitantes tenía problemas con esto. Rediseñamos enteramente la web e inmediatamente las ventas subieron.

Le sorprenderá el valor del ”feedback” que recibirá si lo pide. Recuerda que tus potenciales clientes son los que compran sus productos y servicios y a diferencia de lo que pueda pensar, el modo en el que ellos perciben tu web y tu empresa es lo que cuenta.

 

Error num. 4: Desperdiciar tiempo valioso en actividades improductivas.

Como mercader en Internet tu valor más valioso es el tiempo. Y sí, el tiempo es más valioso que el dinero así que emplea el tuyo de manera inteligente. Como tu tiempo es un recurso limitado tienes que aprender a establecer prioridades. Hay ciertas cosas que son más importantes que otras.

Por ejemplo, considera la cantidad de tiempo que empleas en las diversas actividades de marketing. ¿Sabe cuál es la más importante para ti? Si no, estás desperdiciando un tiempo precioso. Prueba toda tu publicidad y emplea tu tiempo apropiadamente.

Los buscadores son otro ejemplo. Uno de los grandes mitos que circula por Internet es que conseguir estar en los diez primeros puestos te proporcionará un éxito de la noche a la mañana. No crea los cuentos y no desperdicies tu tiempo tratando de conseguirlo.

Una de las cosas más importantes que puede hacer es automatizar tantas de las tareas diarias como pueda. Esto incluye rellenar pedidos también. Para tener éxito de verdad deberás emplear la mayoría de tu tiempo anunciando y comercializando tu negocio.

 

Error num.5: No manejar el e-mail eficientemente.

La comunicación por e-mail con sus potenciales clientes te dará o te quitará el éxito. Puesto que la mayoría de las veces no tendrás la oportunidad de contactar en persona necesitas realmente aprender a usar el e-mail para tu ventaja. Mucho de esto es sentido común realmente.

Todos los días recibimos e-mail de gente pidiéndonos hacer negocios con ellos de una forma o de otra y mucho de ello parece haber sido escrito por un niño de 10 años. Errores de deletreo, problemas gramaticales, difícil de leer… lo que quiera.

Nadie es perfecto y todos cometemos errores pero no hay excusa para esto. Consigue un buen programa de e-mail, aprende a usarlo y corrije ortográficamente toda tu correspondencia. Ya sabes lo que se dice: solo se tiene una oportunidad de causar una buena primera impresión.

 

Error num. 6: No construir una lista de correo.

¡¡Alerta Roja!! Error serio! Si no tienes una lista de correo para estar en contacto con tus clientes y visitantes estás literalmente tirando dinero. Si no consigues otra cosa en este artículo más que la puesta en marcha de tu lista de correo, esto ya habrá valido la pena.

La gente compra cosas que quiere de gente que conoce y confía. Y no hay modo mejor de conseguir que la gente confíe en ti que mostrarle que eres bueno en lo que estás haciendo, a lo que te dedicas. Un boletín electrónico te permitirá estar en contacto con tu audiencia.

Con esto puedes mantenerles informados de novedades en tu web y de nuevos productos. No te tendrás que preocupar de que se olviden de ti porque tu nombre estará siempre, periódicamente frente a ellos. Puedes incluso vender publicidad. Pero lo más importante, construirás confianza y relación.

Piensa en ello. Si quisieras convertirte en inversor inmobiliario, ¿comprarías un curso de un vendedor puerta a puerta o de alguien que le ha estado enviando un boletín durante el pasado año? ¡Construir una lista de correo debe ser una prioridad!

 

Error num.7: Arruinar tu reputación mediante publicidad inapropiada.

Una lista de errores en Internet que no incluyera el “spam” o correo masivo no solicitado no estaría completa. A pesar de lo que puedes haber oído, no hay forma mejor de arruinar tu negocio online que enviar e-mail masivo no solicitado a gente que no conoce. Esta es una pifia grave.

Si tienes que aprender esto por tí mismo, adelante, pero no diga que no te lo advertimos. Por cada “spammer” que hay haciendo dinero puedo enseñarte 10 mercaderes responsables de internet haciendo muchísimo más. No hay razón para hacer spam.

Lo mismo vale para poner anuncios en News que no corresponden. ¿Por qué molestarse con los efectos negativos de estos controvertidos métodos cuando hay tantas formas de anunciarse online? Olvidemos cuestiones morales, es simplemente que no tiene un sentido comercial.

El bien más importante que tiene como mercader online es tu reputación. Y hacer spam es quizás la forma más rápida de arruinarla. Si estás interesado en hacer negocios en Internet en serio, por favor no hagas spam.

 

Error num. 8: Olvidar que el marketing es la clave del éxito.

Incluso si tienes el mejor producto del mundo nunca venderás nada si no sabe nadie sobre él. Sin publicidad no habrá potenciales clientes y sin éstos no habrá ventas. Parece que es algo de sentido común, pero también de “olvido común”.

Solo tienes que hacer dos cosas para tener éxito en los negocios, y sólo tiene que hacer una de forma regular. ¿Adivina cuál es? Si tus proyectos online no son tan rentables como quisieras, hazte un favor y vuelve a los principios.

Lo primero es que necesita un modelo rentable de negocio. Hasta que no se demuestres que tienes un producto viable y un método de convertirlo en beneficios, todo es prematuro. No tires el tiempo y el dinero promoviendo un fiasco, tienes que probarlo. Es crítico.

Una vez que determines que tu modelo de negocio es acertado entonces debes concentrar la mayoría de tus esfuerzos en promocionarlo.

Si haces $10 por venta, simplemente necesitas encontrar 100.000 clientes para hacer un millón de dólares. El marketing es el alma de tu negocio.

 

Error num. 9 Pensar que se va a hacer rico de la noche a la mañana online.

Aquí hay un error que no está limitado a Internet pero que es tan peligroso como otras. Si tuviéramos que elegir una sola, ésta sería probablemente la causa número uno de fracaso, tanto online como en negocios tradicionales. Hacer dinero no es difícil, pero hay que trabajar para ello.

Un negocio rentable en Internet no se construye de la noche a la mañana, es resultado de muchas horas extra. Si alguien dice que te puede enseñar a hacer una cantidad de dinero importante sin trabajo duro, huye de él tan lejos como puedas.

La mentalidad del enriquecimiento rápido parece ser bastante popular online. Pero la verdad es, no hay un modo de hacer las cosas así para la persona normal. Y dejarse atrapar por charlatanerías solo va a proporcionarle retrasos en el verdadero éxito. Evítese lamentos aceptando el hecho de que no hay “almuerzo gratis”.

No estamos seguros por qué la creencia del enriquecimiento rápido es tan notoria en Internet pero lo que sí sabemos es una cosa. No hay nada místico en ganar dinero online. Con algo de trabajo duro, un poco de perseverancia, absolutamente todo el mundo puede hacerlo.

 

Error num.10.- No entender el poder real de Internet.

Internet es una herramienta de comunicaciones. Fue creada para este propósito, y tanto más la uses en este sentido, más partido le sacarás. Nunca ha habido para las empresas una forma mas fácil y barata de llegar a sus potenciales clientes y nunca la habrá. Así que aprovéchela.

Use el poder de Internet para alcanzar millones de potenciales clientes en todo el mundo. Y entonces úsala para proporcionar un servicio al cliente que antes era imposible sin Internet. Usa Internet para recopilar información, investigar a su competencia y contactar con otros para establecer alianzas.

Hay una “mina de oro” de información y recursos a tu alcance en el ciberespacio, pero tienes que saber donde encontrarlo todo. Aprende a usar los buscadores para encontrar fácilmente casi todo lo que necesitas y tu productividad aumentará.

Usa Internet para comunicarse de manera más efectiva. No olvides que los negocios se hacen con personas, y que Internet no es nada más que una forma fantástica de interactuar con ellos. No te escondas, involúcrate y presencia desde dentro el modo en que cambia el mundo.

Aquí las tienes, las Top 10″pifias” en Internet. Seguro que hay muchas más, pero estos errores son comunes y proporcionan un buen punto de partida. Si tienes resueltos estos 10 errores, tienes la garantía de que tu web tendrá mucho más éxito.

Columnas contínuas con CSS

 

Autor: Dineronautas
Licencia Copyleft

 

Trucos CSS para no enloquecer

Todavía no tires el monitor contra la pared. Aquí los principales trucos CSS para hacer frente a los típicos problemas que se enfrentan los diseñadores web cuando maquetan con CSS. Podrán existir discrepancias entre los lectores, pero aclaro que estas son técnicas que a mi personalmente me han dado resultado, después de muchas pruebas e intentos aprendí esto…

Usa un contenedor global para todas las cajas (cuando las cosas se disparan)

De esta forma estas prefijando globalmente el orden de todas las demás cajas. En referencia a este contenedor ordena el resto de las cosas interiores. Es como si haces una cerca o valla para que nada es escape. Obviamente estamos hablando de sitios “fijos” no elásticos.

A veces es bueno usar un contenedor hasta el cuerpo del sitio, luego dejar el pié afuera.

Ejemplo para un contenedor de 900px centrado:

#contenedor {
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
   width: 900px;
}

 

Que flote a la izquierda (cuando las cajas se superponen)

Esta es una muy buena forma de evitar incompatibilidades entre navegadores. El uso de hacks de CSS se debía en gran parte porque se trabajaba “centrando” las cajas. Si por ejemplo precisas poner tres cajas de 300px en un contenedor de 900px puedes hacer lo siguiente.

Ejemplo:

#caja {
   float: left;
   width: 300px;
}

 

Calcular bien los paddings o rellenos (cuando las cajas se van abajo)

Casi todos los dolores de cabeza y maldiciones echadas sobre el CSS se deben al mal uso o a la mala interpretación que se hace del padding. Pero es más simple de lo que parece.

¿Para que sirven los paddings o rellenos? Bueno, lo que hace es generar un “relleno” de determinada medida para dar por ejemplo como un margen a los elementos, pero lo hace sobre el ancho en píxeles que esté prefijado. Por ejemplo: si tenemos una caja de 300px y le aplicamos un padding de 10px en la izquierda, ahora tendremos una caja de 310px. Esto hará desbordar al resto de las cajas y las desplazarán para abajo. Ahí es cuando el diseñador principiante se vuelve loco. El tema es que si hay una diferencia de hasta un 1px se producirán estos desbordes, sino fíjate cuando le incluyes bordes a tu caja, se producirán diferencias.

Lo que se debe hacer es simple, calcular bien y recordar cada ajuste que se haga de los rellenos. Ahora tendremos que hacer una caja de 290px con paddings de 10px a la izquierda.

Ejemplo:

#caja {
   float: left;
   width: 290px;
   padding-left: 10px;
   background-color: #FFE6DD;
}

 

El pié de página con ancho fijo (cuando el pié de página enloquece):

Para entender mejor como funciona el uso de cajas en CSS se puede pensar en un grupo de objetos de diferentes formas que luchan por adaptarse y ocupar el espacio que se ha prefijado. Sucede muchas veces que los pié de página son los más problemas traen cuando se maqueta un sitio. O se va para arriba, se alinea a la izquierda, o se desborda, etc. Muchos resolvíamos este tema prefijando valores fijos a las alturas de cajas, pero no tiene sentido. Lo que se debe hacer es de nuevo establecer un valor de ancho fijo. De esta forma el pié se va a hacer su lugar del resto e irá a parar donde tiene que ir.

Ejemplo:

#pie {
   width: 900px;
   background-color: #666666;
}

 

No todo es 1+1=2 en CSS (cuando los anchos no cierran)

Un problema común en css es pensar que todos los anchos entre cajas cierran perfectamente. A veces es necesario jugar con los valores de los contenedores, a veces contrario a la lógica hay que añadir algunos px a los contenedores.

 

OTROS TRUCOS RÁPIDOS:

Trucos sencillos, de los que no hace falta explicar mucho pero que son muy prácticos y te harán más fácil el trabajo y evitarán posibles errores.

  • Usa colores diferentes para distinguir las cajas
  • Pon una palabra descriptiva en cada caja
  • Comenta el código fuente y señala los finales de los contenedores grandes
  • No mezquines espacios entre los divs
  • No seas un fundamentalista y no quieras escribir tu CSS con dos o tres líneas. Si no quieres errores escribe lo necesario.
  • Cuidado con el tamaño de las imágenes que insertas, estas cambian el ancho de los contenedores.
  • Elige bien los nombres de cada div y trata de ser ordenado en el código.
  • Si vas a trabajar con varias cajas, trata de agruparlas de a grupo, esto es muy importante. Por ejemplo un contenedor que agrupe tres o cuatro cajas.

CONCLUSIÓN
Todas estos párrafos son simplemente algunas sugerencias o comentarios de lo que me ha dado resultado a mí. Existen otras muchas “ataduras” de este tipo, si tienes alguna no dudes en comentarlas en este mismo artículo.

Que pasa cuando no puedes resolver un problema con CSS o similar? A mi me ha dado resultado levantarme un rato, hacer cualquier otra cosa y luego volver e intentar de nuevo.

Dejar de renegar y no enloquecer con CSS dependerá de la cantidad de tiempo, trabajo y esfuerzo que le metas a tu trabajo. No lo dudes.

Columnas contínuas con CSS

 

Autor: Leonardo A. Correa
URL: Webnova – Recursos Webmaster
Licencia Copyleft

 

Columnas contínuas con CSS

1. Estiramiento vertical

Una de las frustrantes propiedades de CSS es el hecho de que los elementos se estiran verticalmente todo lo que necesiten. Lo que quiere decir que si una imagen de 200px de altura se pone dentro de un <div>, el <div> se va a estirar solo 200px hacia abajo.

Esto se convierte en un interesante dilema cuando usas <div>s para dividir el código y luego le aplicas CSS para convertirlo en una columna. Una columna puede ser mas larga que la otra (Fig. 1). Dependiendo de la cantidad de contenido, resulta difícil crear un diseño con dos columnas igual de altas cuando un solo color se desea para cada columna.

Columnas contínuas con CSS

Fig. 1

Hay unas cuantas formas de hacer que las columnas tengan una misma longitud, independientemente del contenido. Yo les estoy mostrando mi solución particular, que resulta ser exageradamente… simple. Este truquito se usa en muchos lugares, incluyendo este sitio (A List Apart)

 

2. El truco
Este truco embarazosamente simple consiste en usar una imagen de fondo repetida verticalmente para crear la ilusión de que hay columnas. Para SimpleBits, la imagen de fondo se parece a la de la Figura 2 (proporciones cambiadas para la demostración), con una decoración a la izquierda, una sección blanca para el contenido, un borde de 1px y una sección de marrón clarito para la columna de la derecha seguido de la decoración inversa a la de la izquierda.

Columnas contínuas con CSS

Fig. 2

La imagen completa no es mas de unos pocos píxeles de altura, pero cuando se repite verticalmente crea la ilusión de columnas coloreadas que van hasta el fondo de la página. Independientemente de la cantidad de contenido de ambas columnas.

 

3. El código
Esta regla básica de CSS se le pone al elemento body:

background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;

Hacemos que la página entera tenga un fondo de color gris (#ccc) y lo repetimos verticalmente la imagen (repeat-y). La parte 50% 0 especifica la posición de la imagen, en este caso 50% del costado izquierdo del navegador y 0px de la parte de arriba.

 

4. Columnas posicionadas
Con la imagen de fondo en lugar, mi diseño esta posicionado arriba, con margin y padding para las columnas asegurándose que se van a colocar en el lugar correcto dentro de las columnas faux creadas por la imagen de fondo (Fig. 3).

Columnas contínuas en CSS

Fig. 3

Es importante notar que si se desea añadir border, padding y margin, entonces todavía debemos hacer algo con respecto al deficiente modelo de cajas de IE/Win con Box Model Hacko el Mid Pass Filter de Tantek Çelik.

Alternativamente, si border o padding se pueden evitar usando márgenes, entonces el Box Model Hack no es necesario. Y si el contenido de las columnas simplemente está colocada transparentemente encima del fondo, entonces es fácil evitar el problema.

 

5. Lo que te sirva
Mientras yo uso “absolute positioning” para crear un diseño de dos columnas en SimpleBits, el mismo resultado se puede conseguir usando float.

La misma idea aplica: repetir la imagen verticalmente, luego “flotar” la columna en posicion para que quede encima del fondo.

 

6. Notas finales
Es un concepto simple, pero que puede solucionar muchos problemas y frustraciones que los diseñadores nos encontramos frecuentemente cuando diseñamos con CSS.

Columnas contínuas con CSS

 

Autor: Dan Cederholm
Licencia Copyleft

 

CSS para imprimir páginas web

Cómo hacer una hoja de estilo CSS distinta para la visualización de la página en el navegador y otra para la impresión en una impresora.

A veces necesitamos que nuestra página se imprima en una impresora de manera distinta a como se visualiza en la página web. Por ejemplo, si en una página se muestra un informe con datos que se desea guardar impreso en papel, probablemente deseemos que en la impresora se muestre con una fuente más pequeña, para que se pueda comprimir todo el contenido de manera que quepa en un folio. También es posible que en los informes deseemos que aparezca el logo de la compañía centrado en la cabecera del informe.

Todo esto se puede hacer con CSS. Las Hojas de Estilo en Cascada sirven para definir el aspecto de la página, y estos estilos se pueden declarar de manera distinta a la hora de imprimir un documento y a la hora de verlo en el navegador.

Con CSS se puede definir estilos en un documento externo, de esta manera:

<link href=”estilos.css” rel=”stylesheet” type=”text/css”>

Con esto suponemos que tenemos un archivo llamado estilos.css, que está en el mismo directorio de la página, donde se definen los estilos del documento.

De modo parecido, podemos asignar una hoja de estilos externa para definir el aspecto cuando un usuario imprime la página web:

<link href=”estilos_impresion.css” rel=”stylesheet” type=”text/css” media=”print”>

Lo único que cambia es el atributo media=”print”, que indica que esta hoja de estilos es sólo para cuando se va a imprimir la web.

Ejemplo de dos hojas css distintas para impresión y visualización.

Ahora veamos un ejemplo de página web que tiene dos hojas de estilo distintas, una para cuando se está en el navegador y otra cuando se va a imprimir.

Tenemos un HTML que incluye dos hojas de estilos y dispone varias capas, que luego maquetaremos o posicionaremos con CSS.

<html>
  <head>
    <title>informe superpuzzles</title>
    <link rel=”STYLESHEET” type=”text/css” href=”estilo.css”>
    <link rel=”STYLESHEET” type=”text/css” href=”estilo_imprimir.css” media=”print”>
  </head>

   <body>
    <div id=”contenedor”>
      <div id=”cabecera”>
        Superpuzzles
      </div>
      <div id=”logo”>
        <img src=”logo.gif”>
      </div>
      <div id=”cuerpo”>
        <div id=”lateral”>
          <ul>
            <li><a href=”#”>Enlace 1</a>
            <li><a href=”#”>Vínculo 2</a>
          </ul>
        </div>
        <div id=”derecha”>
          <div id=”principal”>
            Contenido de un posible informe
          </div>
         </div>
      </div>
      <div id=”pie”>
         © 2005 DesarrolloWeb.com
       </div>
    </div>
  </body>

Como se ha podido ver en el HTML anterior, se han incluido dos archivos CSS con estilos. El primero es estilo.css, que es el estilo que se utilizará al visualizar la página en el navegador. El segundo link con una hoja de estilos CSS es estilo_imprimir.css, que definirá el aspecto de la página al imprimirla (fijarse en el atributo media=”print” de la etiqueta).

Los códigos CSS son muy parecidos, simplemente hemos hecho un par de cambios para ilustrar lo que venimos diciendo. En la visualización de la página no se mostrará la capa con id=”logo”. Por su parte, al imprimir la página no se mostrará la barra de navegación de la izquierda y los contenidos centrales se mostrarán en todo el ancho del espacio de impresión. Tampoco se mostrará la capa id=”cabecera”.

El código CSS de visualización en navegador

BODY {
  font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin: 10 0 10 0px;
  text-align: center;
  background-color: #ffffff;
}
#contenedor{
  text-align: left;
  width: 770px;
  margin: auto;
}
#cabecera{
  background-color: #d0d0ff;
  color: #333300;
  font-size:12pt;
  font-weight: bold;
  padding: 3 3 3 10px;
}

#logo{
  visibility:hidden;
  display: none;
}

#cuerpo{
  margin: 10 0 10 0px;
}
#lateral{
  width: 160px;
  background-color: #d0d0ff;
  float:left;
}
#lateral ul{
  margin : 0 0 0 0px;
  padding: 0 0 0 0px;
  list-style: none;
}
#lateral li{
  background-color: #ffffff;
  margin: 2 2 2 2px;
  padding: 2 2 2 2px;
  font-weight: bold;
}
#lateral a{
  color: #3333cc;
  text-decoration: none;
}

#pie{
  background-color: #cccccc;
  padding: 3 10 3 10px;
  text-align:right;
  clear: both;
}

#principal{
  background-color: #ffffff;
  padding: 0 0 0 20px;
  width: 580px;
  float: left;
}

#principal table{
  background-color: #ffffff;
  width: 580px;
  border: 2px solid #cccccc;
  font-size:10pt;
}

El código CSS que se utilizará para la impresión de la página

BODY {
  font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin: 10 0 10 0px;
  text-align: center;
   background-color: #ffffff;
}
#contenedor{
  text-align: left;
  width: 600px;
  margin: auto;
}
#cabecera{
  visibility:hidden;
  display: none;
}

#logo{
  visibility:visible;
  display: block;
  margin-left: 20px;
}

#cuerpo{
  margin: 10 0 10 0px;
}
#lateral{
  visibility:hidden;
  display: none;
}

#pie{
  background-color: #cccccc;
  padding: 3 10 3 10px;
   text-align:right;
  clear: both;
}

#principal{
  background-color: #ffffff;
  padding: 0 0 0 20px;
  width: 600px;
  float: left;
}

#principal table{
  background-color: #ffffff;
  width: 600px;
  border: 2px solid #cccccc;
  font-size:10pt;
}

CSS para imprimir páginas web

Autor: Ana Álvarez (Directora de contenidos de estiloymoda.com
URL: estiloymoda.com
Licencia Copyleft

 

Dando estilo a los formularios con CSS

Una de las preguntas más frecuentes cuando se habla de diseño bajo CSS es como se pueden estilizar los formularios ya que en muchas ocasiones es la parte de un sitio que no queda de acuerdo al estilo del resto de los elementos. Por esto, en esta, mi primera colaboración para CSS Boulevar decidí que sería buena idea escribir al respecto.

En realidad la estilización de formularios es más simple de lo que parece, sin embargo, se necesitan de un par de trucos para adquirir la apariencia que se quiere la cual aún está limitada por ciertas características que no todos los navegadores actuales soportan.

Para comenzar, lo primero que tenemos que hacer es hacer el diseño de como vamos a querer que se vea nuestro formulario. Desde este punto vamos a tener que tomar en cuenta muchas consideraciones que veremos más adelante y que para este caso no tomé en cuenta a propósito por tratarse de un ejemplo en el que hay que resaltar estas limitaciones.

El código (X)HTML de este ejemplo no tiene mayor ciencia, únicamente se trata de un formulario con 4 campos, algo típico de un sistema de comentarios, queda algo como lo siguiente:


Lo único que hay que resaltar es la falta de definición del tamaño de los campos de texto, esto lo haremos por medio de CSS así que no es necesario definirlos por el momento.

Estilizando el formulario

Aplicar estilos a formularios no es diferente de hacerlo con cualquier otro elemento, para empezar, únicamente vamos a agregar color al fondo de la página para ver como esta nuestro formulario inicialmente este primer paso.

body {
   background: #A0CE00;
}

Hasta el momento esta desordenado y no se ve nada bien. Lo primero que vamos a hacer es organizarlo, para facilitar después el resto del proceso. Vamos a desplegar las etiquetas como block para que se simulen los cambios de línea además de definir un poco el estilo general del formulario.

form {
   padding: 50px;
   background: #84AA00;
   width: 250px;
}
label {
   font-size: 14px;
   font-family: Arial, Helvetica, sans-serif;
   color: #FFF;
   display: block;
}
.campo {
   margin-bottom: 20px;
}

La primer parte importante para estilizar las cajas de texto es esconder lo que tenemos por default, esto nos va a permitir mas libertad ya que en realidad el truco nada más se trata de reemplazar las cajas con una imagen. Para que las cajas se escondan, si perder funcionalidad vamos a fundirlas con el color de fondo cambiando tanto los bordes como el fondo.

.campo {
   width: 254px;
   height: 30px;
   margin-bottom: 20px;
   border: 1px Solid #84AA00;
   background: #84AA00;
}
#comentario {
   width: 294px;
   height: 193px;
}

Ahora si llegó la parte divertida, lo siguiente será añadir las imágenes como fondo, un simple background-image bastará para lograr el efecto.

.campo {
   width: 254px;
   height: 30px;
   margin-bottom: 20px;
   border: 1px Solid #84AA00;
   background: #84AA00;
   background-image: url(f1.jpg);
   background-repeat: no-repeat;
   padding: 2px;
   color: #669966;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
}
#comentario {
   width: 254px;
   height: 193px;
   background-image: url(f2.jpg);
   background-repeat: no-repeat;
}

Añadimos el atributo padding para que el texto no quede totalmente pegado a la imagen además de cambiar el color, tamaño y fuente del texto como detalles.

Lo único que nos falta es el botón de enviar, el proceso es el mismo, lo único extra en este caso es la indentación del texto en caso de que no se quiera que este se vea.

#boton_enviar {
   width: 88px;
   height: 27px;
   margin-left: 80px;
   background: #84AA00;
   border: 1px Solid #84AA00;
   background-image: url(boton.jpg);
   text-indent: -9999px;
}

Extras

Básicamente el formulario esta listo, vamos a agregar un pequeño efecto para que se vea aún mejor. Hice un par de imágenes extra sin sombreado que se utilizan cuando el usuario pasa el cursor sobre la caja de texto.

.campo:hover {
   background-image: url(f3.jpg);
}
#comentario:hover {
   background-image: url(f4.jpg);
}

Si están utilizando un buen navegador, el efecto se ve sin problema alguno pero en Internet Explorer la situación es diferente ya que como sabemos, no reconoce el uso de hover en elementos que no sean enlaces, sin embargo, no hay ningún problema pues se sigue viendo la imagen inicial.

Como mencione al principio, nos encontramos aún con muchos problemas al estilizar formularios, en este ejemplo, podemos ver que las barras de scroll en el area de texto pueden llegar a verse mal y desafortunadamente estas no son estilizables más que en IE. Sin embargo, con un poco de imaginación y un par de sencillos hacks podemos lograr efectos para que los formularios vayan de acuerdo con el estilo del sitio.

Dar estilo a un formulario

Descargar estilizando formularios en pdf

Autor: Oscar Alcalá

 

Cambiar cursor con CSS

Para cambiar el aspecto del cursor hay que utilizar la propiedad cursor . Por ejemplo:

1. a:link, a:visited {
2.    cursor: move;
3. }

Los valores y por tanto el aspecto -pasa el cursor sobre cada uno de los elementos de la lista para ello- que puede tomar el cursor son los siguientes:

  • auto: el cursor cambia a una imagen que es determinada por el navegador.
  • crosshair: dos líneas perpendiculares que se intersectan en la mitad (similar a un signo + agrandado)
  • default: es el cursor por defecto. En la mayoría de los navegadores es una flecha.
  • pointer: se usa para indicar que el puntero está situado sobre un link. La mayoría de las veces se muestra como una mano con un dedo extendido.
  • move: indica que un elemento puede ser movido. Normalmente se muestra como una cruz con las puntas de flecha.
  • e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize: una flecha indicando en que dirección puede ser movido. Por ejemplo, se-resize indica la dirección sureste.
  • text: indica que el texto puede ser seleccionado. Normalmente se muestra como el indicador usado en los programas de procesamiento de textos, una I.
  • wait: indica que la computadora se encuentra ocupada. Se muestra como un reloj de arena.
  • progress: indica que la computadora está ocupada pero que el usuario todavía puede interactuar con el navegador.
  • help: indica que existe información o ayuda disponible. Normalmente se muestra como un interrogante o una flecha con un interrogante.
  • El cursor puede ser cambiado por un cursor exterior definido por el usuario como una imagen, un windows cursor, file, etc.

Descargar artículo CSS en pdf

Autor: webintenta.com

 

Agua metalizada

1) Crea un nuevo lienzo de 400 x 400

2) Teniendo seleccionado el color de frente negro y de fondo blanco, Filtro>Interpretar>Nuves

3) Filtro>Desenfocar>Desenfoque radial, con estos parámetros:

Agua metalizada - Tutoriales Photoshop - Clase Z

4) Filtro>Bosquejar>Bajorrelieve, con los parámetros:

Agua metalizada - Tutorial Photoshop - Clase Z

5) Filtro>Bosquejar>Cromo, parámetros:

Agua metalizada - Tutorial Photoshop - Clase Z
6) Ctrl +U y darle color, por ejemplo:

Agua metalizada - Tutorial Photoshop - Clase Z Y quedaría así:

Agua metalizada - Tutorial Photoshop - Clase z

Descargar Botón con brillo

Autor: www.scourdesign.com


Este tutorial está bajo licencia CopyLeft. Se permite por tanto su libre copia y distribución.

Respete por favor estas simples condiciones para que todos podamos ganar con la licencia CopyLeft.

Botón con brillo

Botón con brillo - Tutorial Photoshop - Clase Z

Botón con Brillo - Tutorial Photoshop - Clase Z

Crea un nuevo tapiz de 200 x 200, y en una nueva capa crea una nueva selección de 2 circulos concentricos, tal que así:

Para ello, por ejemplo, cuando selecciones la herramienta circulo, dale arriba, donde pone “estilo” a “tamaño fijo” de 140 x 140

Botón con brillo - Tutorial Photoshop - Clase Z

crea la selección en el lienzo, después selecciona “restar a la selección”

Botón con brillo - Tutorial Photoshop - Clase Z

y modifija el tamaño fijo del circulo a 120 x 120, y ubícalo en el centro de la selección anterior, y ya tendremos la selección.

2) Selecciona como color frontal el #EEEEEE y como color de fondo el #CFCFD3 y haz un degradado lineal Botón con brillo - Tutorial Photoshop - Clase Z de arriba hacia abajo y un poco inclinado, y quita la selección, selección>deseleccionar.

3) ve a Capa>Estilo de capa>Opciones de fusión, y pon estos varemos:

Botón con brillo - Tutorial Photoshop - Clase ZBotón con brillo - Tutorial Photoshop - Clase Z

Botón con brillo - Tutorial Photoshop - Clase Z Quedaría así:

Botón con brillo - Tutorial Photoshop - Clase Z

4) Crea una nueva capa y ponla por debajo de ésta. Selecciona la herramienta círculo y dale el tamaño fijo de 125 x 125, que la selección en esta capa quede en el centro de la anterior, algo así:

Botón con brillo - Tutorial Photoshop - Clase Z

5) Selecciona el color frontal #769E00 y de fondo el #3A4E06 y haz un degradado lineal en la misma dirección que el anterior. Ve a capa>estilo de capa>opciones de fusión e introduce:

Botón con brillo - Tutorial Photoshop - Clase ZBotón con brillo - Tutorial Photoshop - Clase Z

Botón con brillo - Tutorial Photoshop - Clase Z Quedaría:

Botón con brillo - Tutorial Photoshop - Clase Z

6) Hacemos Ctrl + click en la capa y creamos una nueva capa. Seleccionamos como color frontal el #E9EAE7 y seleccionamos la herramienta degradado, y vamos a hacer un degradado en la misma dirección que los anteriores, con color de fondo transparente:

Botón con brillo - Tutorial Photoshop - Clase Z

Y con eso terminamos, el resultado sería algo así:

Botón con brillo - Tutorial Photoshop - Clase Z

Descargar Botón con brillo

Autor: www.scourdesign.com


Este tutorial está bajo licencia CopyLeft. Se permite por tanto su libre copia y distribución.

Respete por favor estas simples condiciones para que todos podamos ganar con la licencia CopyLeft.