Archivo de la etiqueta: diseño web

10 ventajas de ser diseñador

No todo tiene que ser malo en la vida de un diseñador freelance, y los que nos dedicamos a dignificar día a día ésta profesión lo sabemos, pues como independientes podemos darnos ciertos gustos que otros no, y la lista siguiente viene a ser el antónimo de los problemas de todo diseñador, para decirnos que no todo es malo…

Sigue leyendo

Diseño web de página única para inspirarse

Los diseños web realizados en una únca página son excelentes para jugar con la “experiencia de usuario”, pues permite al usuario navegar el contenido del sitio de manera más rápida y fácil, sin la necesidad de recargar la página para mostrar un contenido nuevo. Así mismo, sirven para llevar al máximo la experiencia de usuario y poder implementar distintos efectos especiales en la navegación, como sliders de imágenes, scroll en parallax, o presentar el contenido de manera más creativa y dinámica, usando ajax o lo que se lleva en la contemporaneidad, la mezcla explosiva de CSS3 + HTML5…

Lee el artículo completo »

5 Mitos del Diseño Web

Para los que inician  el camino es típico cometer errores al momento de diseñar o maquetear una web, ya sea porque se usaron muchas imágenes, porque usaste tablas, o porque seguiste alguno de estos consejos. De todo  lo que se pueda leer por ahí o de lo que te puedan decir existe un 50% de verdad y otro de mito, y aquí despejamos los 5 mitos del diseño web:

1. Usar muchas imágenes deja claro el mensaje y mejora el sitio web!

Puede ser que usar imágenes sea lo mejor para dejar clara una idea y hacer que el sitio sea más vistoso, pero la verdad de las cosas es que el abuso de gráficos puede ser perjudicial para el desempeño del sitio web en cuestión, haciendo que sea lento al cargar y que en ese intertanto el usuario se aburra y deje nuestro sitio.

2. Nunca utilices tablas

Se dice que no hay que utilizar tablas para estructurar y maquetear un sitio, y es totalmente cierto pues para eso se inventó el CSS, para dar forma y colorear el HTML, pero también es cierto que las tablas fueron creadas para organizar la información de manera clara y ordenada, entonces, el único uso actual permitido para las tablas es para desplegar información importante dentro del sitio web y no para estructurar el mismo.

3. Diseñar un sitio web es sólo tener la información, estructurar, diagramar y ponerla en un documento HTML.

A veces se cree que llevar a cabo un sitio web es solo tener un poco de información, ordenarla de alguna forma y lograr meter esa información en un documento HTML, lo cual es una visión muy cerrada y básica sobre lo que significa un sitio web y la importancia del mismo, lo cual lo único que hace es mirar en menos el trabajo de diseñadores, maqueteadores, programadores y porque no de SEOs, que se esfuerzan por optimizar un sitio web al máximo, exprimiendo sus cerebros para lograr un sitio web exitoso, rápido, amigable, claro, fácil de entender, y un sin fin de etc’s… El asunto es que hay mucho trabajo y estudio tras un sitio web, vamos… sino pregunte cuanto tiempo ha tardado en ver la luz cerocreativo.cl…

4. El contenido del sitio es lo más importante

Aquí volvemos a los puntos 1 y 3, y no es que el contenido sea lo más importante en lo que se refiere a texto, pues si lo vemos desde un punto de vista claramente puede ser el texto lo más importante, pero hablamos de un sitio web que tiene que ser amigable y que no canse al lector/visitante, con los cual nos vemos enfrentados a encontrar ese delicado equilibrio entre mostrar buenas pero pocas imágenes y a mostrar bastante pero no aburrido texto. Aquí es donde las neuronas del diseñador trabajan a mil para poder diagramar todo de la mejor manera, para así obtener un sitio atractivo al visitante.

5. El diseñador no puede programar y el programador no puede diseñar

Desde mi punto de vista, creo que un diseñador debe estar metido en el 100% del desarrollo del sitio, así como también el programador, pues será él quien dará vida a lo que la abstracta mente del diseñador invente, y será el diseñador quien tiene la visión global de como se deberá comportar el sitio; todo nos lleva a tener un gran trabajo en equipo. Aunque también es verdad que hay bastantes herramientas online, software para diseñar y programar, sitios de venta de templates, sitios de pirateo de templates y cuanta cosa exista para hacernos la vida fácil al diseñador y programador, de manera que le permite a cada uno prescindir del otro con el consiguiente efecto de tener que meter las manos en un terreno inexplorado, pero que ayuda a conocer nuevas cosas y estar en un constante aprendizaje.

Una adaptación a como lo ví en basekit

Border-radius en Internet Explorer

El objetivo de todo diseñador web y el motivo por el cual luchamos cada día es que cada uno de nuestros diseños se vean excelentemente bien en la mayoría de lo navegadores comunmente usados, para como no todo puede ser perfecto, Micro$oft siempre tiene una cartita bajo la manga que nos complica la vida.

Hoy nos reunimos para lograr bordes redondeados usando “border-radius“, una de las propiedades estrellas implementadas en CSS3, y hacerlo de tal manera que funcione en IE, porque para los otros navegadores lo podemos lograr facilmente:

El CSS:

.borde-redondeado {
	-webkit-border-radius: 10px; /* Para Safari y Chrome */
	-moz-border-radius: 10px; /* Para Firefox */
	-khtml-border-radius:10px; /* Navegadores de Linux */
	border-radius: 10px; /* CSS3 */
}

EL HTML:

<div class="borde-redondeado">Este contenedor tiene sus bordes redondeados con CSS3</div>

Ahora, hay 2 formas que conozco para lograr los bordes redondeados en IE y son la siguientes:

1. Usando un archivo HTC

Utilizando un archivo HTC creado por Remiz Rahnas de HTML Remix y que se puede bajar desde Google Code podremos lograr el efecto utilizando una hoja de estilos exclusiva para IE o agregando la propiedad dentro del css anterior.

Se debe cargar el archivo “border-radius.htc” en la misma carpeta donde se encuentre nuestra hoja de estilos.

En una hoja exclusiva para IE:

EL CSS:

.borde-redondeado {
	border-radius:10px;
	behavior: url(border-radius.htc);
}

EL HTML:

<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" media="screen" /><![endif]-->
<div class="borde-redondeado">Este contenedor tiene sus bordes redondeados</div>

o todo de una vez usando el código del primer ejemplo

El CSS:

.borde-redondeado-htc {
	-webkit-border-radius: 10px; /* Para Safari y Chrome */
	-moz-border-radius: 10px; /* Para Firefox */
	-khtml-border-radius:10px; /* Navegadores de Linux */
	border-radius: 10px; /* CSS3 */
	behavior: url(border-radius.htc); /* Para IE */
}

EL HTML:

<div class="borde-redondeado-htc">Este contenedor tiene sus bordes redondeados con CSS3 y magia para IE</div>

DEMO

2. Usando jQuery

También se puede lograr el efecto utilizando la librería jQuery, con un plugin llamado jQuery.Corner, el cual permite no solo bordes redondeados, sino que bordes mas complicados que no sé como describir.
EL JS:

$(".borde-redondeado-jquery").corner("10px");

EL HTML:

<script src="jquery-1.3.2.min.js"></script>
<script src="jquery.corner.js"></script>
<div class="borde-redondeado-jquery">Este contenedor tiene sus bordes redondeados con jQuery</div>

Conclusión

No usar IE…
…pero si se usa, con estos métodos que vimos podemos lograr bordes redondeados “cross-browser” lo que representa una ayuda y un alivio para los que somos extremistas del detalle y no nos conformamos con la técnica de “mejora progresiva” en CSS.

[adsense]