Diseño con Colores de Pantalla

2009-08-17T17:10:00.000-07:00

Diseñar con los colores perfectos es muy importante. Por eso Creaciones Digitales - diseño web ecuador - provee estos consejos sobre el contraste, y la importancia de los colores en la web.

Contraste es una parte importante de diseño web, ya que a menudo significa la diferencia entre una página que se ve grande y una página que sea ilegible o doloroso de ver. Pero a veces puede ser difícil decidir qué colores funcionan bien en contraste con otros. Este cuadro debe ayudar a mostrar diferentes colores y la forma en que el contrario o no de contraste y colores de fondo y primer plano.

Una cosa debe tener en cuenta es que el contraste es algo más que un color brillante de cómo se compara con el fondo. Como puede ver, algunos de estos colores son muy brillantes y vibrantes aparecen en el color de fondo - como el azul sobre negro. Pero la etiqueta que tiene un mal contraste, porque si bien es brillante, los colores que el texto sea difícil de leer. Si se va a crear una página de texto en todos los azules sobre fondo negro, sus lectores tendrán los ojos muy rápidamente.

Diez formas de acelerar el tiempo de descarga de sus páginas web

2009-08-17T15:37:00.000-07:00

Diez formas de acelerar el tiempo de descarga de sus páginas web

¿Por qué es tan importante la velocidad de descarga?

¿Te gusta esperar a que las páginas para descargar? Tampoco los usuarios de su sitio. Por eso tomemos los consejos de Creaciones Digitales - diseño páginas web ecuador - : cómo acelerar las páginas

Nota de autor: Dado que blogspot no permite usar códigos entre < > los hemos reemplado con [ ]

1. Diseñar sus páginas con CSS, y no con cuadros
CSS descarga más rápido que las tablas debido a que:
• Navegadores leen dos veces antes de mostrar los cuadros de su contenido, una vez a trabajar en su estructura y una vez para determinar su contenido
• Cuadros aparecen en la pantalla de una sola vez - que ninguna parte de la tabla aparecerá hasta que la tabla se ha descargado
• Tablas con utilización de imágenes ayuda con el posicionamiento
• CSS general que requiere menos código engorroso que las tablas
• Todo el código que ver con el diseño se puede colocar en un documento CSS externo, que será llamado una sola vez y luego en caché (almacenado) en el ordenador del usuario.
• Con CSS se puede controlar el orden de los puntos de descarga en la pantalla - que el contenido antes de aparecer lento cargando las imágenes y los usuarios de su sitio web podrá apreciar que

2. No utilice imágenes para mostrar texto
Es nuestro viejo amigo CSS al rescate de nuevo. No hay necesidad de utilizar las imágenes para mostrar tanto el texto como se puede lograr a través de CSS. Echa un vistazo a este código:
a:link
{
color: #ffffff;
background: #ff9900;
text-decoration: none;
padding: 0.2em;
border: 4px solid;
border-color: #99f #008 #008 #99f
}
a:hover
{
color: #ffffff;
background: #ffaa11;
text-decoration: none;
padding: 0.2em;
border: 4px solid;
border-color: #008 #99f #99f #008
}

Esto le dará una muy simple botón que aparece al ser empujado hacia abajo cuando se mouseover.

3. Llame a través de las imágenes hasta Decorativas CSS

Es posible presentar las imágenes como parte de los antecedentes, llama a través de CSS. Si tienes una imagen que de 200px por 100px puede utilizar el siguiente código HTML:
[div class="pretty-image"][/div]
Y este CSS:
.pretty-image
{
background: url(filename.gif);
width: 200px;
height: 100px
}

Esto puede parecer al principio un poco inútil, pero esta técnica puede mejorar realmente el tiempo de descarga de sus páginas. Navegadores básicamente descargar imágenes de fondo después de todo lo demás. Al utilizar esta técnica, el texto se carga instantáneamente y su sitio web los usuarios pueden vagar libremente sobre la página, mientras que su imagen de lujo 50kb descargas.

Esta técnica desactiva el atributo ALT, aunque lo que si realmente quiere tener una continuación, reemplace el código HTML anterior con esto:
[image src="spacer.gif" class="pretty-image" alt="description" /]
Spacer.gif 1px x es una imagen transparente 1px. Ahora usted tiene un 50 byte transparente imagen y el contenido principal de carga en primer lugar, y su gran imagen decorativa, con el texto ALT, carga segundo. Perfecto.

Tenga en cuenta que esta técnica sólo es bueno para imágenes decorativas y no los informativos. Cualquier usuario que tenga CSS discapacitados no será capaz de ver tu CSS, imágenes (o su texto alternativo).

4. Uso contextual Selectores

Esto es ineficiente:
[p class="text"]Esta es una oración[/p]
[p class="text"]Esta es otra oración[/p]
[p class="text"]Esta es una segunda oración[/p]
[p class="text"]Estas son oraciones[/p]

.text
{
color: #03c;
font-size: 2em
}
En lugar de asignar un valor a cada apartado, se puede anidar dentro de un [div] etiqueta y asignar un valor a esta etiqueta:
[div class="text"]
[p]Esta es una oración[/p]
[p]Esta es otra oración[/p]
[p]Esta es una segunda oración[/p]
[p]Estas son oraciones[/p]
[/div]
.text p
p
{
color: #03c;
font-size:2em
}
Este segundo ejemplo CSS básicamente dice que dentro de cada párrafo class="text" debe ser asignado un valor de color #03c y un tamaño de fuente de 2em
A primera vista esto no parece demasiado importante, pero si se puede aplicar correctamente a lo largo de su documento se puede rebajar un 20% el tamaño de los archivos.
Usted puede haber notado el color de los valores son más cortos de lo normal. #03c es una versión abreviada del #0033cc - puede asignar este valor abreviado a cualquier valor de color de esta manera.

5. Uso de Taquimecanografía Propiedades CSS

Puede usar los siguientes atajos de propiedades para el margin comando CSS.
Uso:
margin: 2px 1px 3px 4px /* top, right, bottom, left */
... en lugar de
margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px
Uso:
margin: 5em 1em 3em /* top, right and left, bottom */
... en lugar de
margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em
Uso:
margin: 5% 1% /* top and bottom, right and left */
... en lugar de
margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%
Uso:
margin: 0 /* top, bottom, right and left */
... en lugar de
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0
Estas normas se pueden aplicar a margin border y padding

6. Minimizar los espacios en blanco, línea de comentario y Devoluciones Etiquetas

Cada letra o espacio en el código HTML ocupa un byte. No suena como mucho pero todo suma. Hemos detectado que al trabajar a través de su página de origen y eliminar los espacios en blanco innecesarios y comentarios, usted puede desactivar hasta afeitado, o incluso más (si el HTML es realmente ineficiente) 10% de su tamaño de archivo.

7. Use llamados relativos

Trate de evitar la llamada absoluta ups, ya que ocupan más espacio. Un ejemplo de una llamada es absoluta: [a href="http://www.URL.com/filename.htm"] Mucho mejor sería [a href="filename.htm"] Pero lo que si algunos archivos están en carpetas diferentes a otros? Use estos atajos de propiedades:
• [a href="/"] - Pide hasta http://www.URL.com
• [a href="/filename.html"] - Pide hasta http://www.URL.com/filename.html
• [a href="/directory/filename.html"] - Pide hasta http://www.URL.com/directory/filename.html
• [a href="./"] - Pide un index.html dentro de ese directorio
• [a href="../"] - Pide hasta index.html en un directorio por encima de
• [a href="../filename.html"] - Pide filename.html hasta un directorio de arriba
• [a href="../../"] - Pide index.html hasta dos directorios más arriba

8. Eliminar innecesarios y etiquetas META Contenido

La mayoría de etiquetas META son bastante innecesarias y no logran mucho. Si estás interesado, puedes ver una lista de las etiquetas META que están disponibles. Lo más importante etiquetas para optimización del motor de búsqueda son las palabras clave y descripción de las etiquetas, aunque, debido a los abusos en masa que ha perdido mucha importancia en los últimos tiempos. Al utilizar estas etiquetas META tratar de mantener el contenido de cada uno de menos de 200 caracteres - algo más aumenta el tamaño de sus páginas. Largas etiquetas META no son buenas para los motores de búsqueda de todos modos porque diluir sus palabras clave.

9. Ponga CSS y JavaScript en documentos externos

CSS en lugar de un documento de uso externo:
[link type="text/css" rel="stylesheet" href="filename.css" /]
Para colocar JavaScript en un documento externo uso:
[script language="JavaScript" src="filename.js" type="text/javascript"][/script]
Cualquier archivo externo es llamado una sola vez y luego en caché (almacenado) en el ordenador del usuario. En lugar de repetir JavaScript o CSS y otra vez en los archivos HTML, simplemente escriba a cabo una vez en un documento externo.
Y no se olvide, no hay límite en el número de estos documentos externos que se puede usar! Por ejemplo, en lugar de hacer un enorme CSS documento, tienen un principal y algunos otros que son específicos de ciertas áreas de su sitio.

10. Uso / al final del Directorio de Enlaces

No hacer esto: [a href="http://www.URL.com/directoryname"]
Hacer esto en vez: [a href="http://www.URL.com/directoryname / "]
¿Por qué? Si no hay barra al final de la URL que el servidor no sabe si el enlace apunta a un archivo o un directorio. Mediante la inclusión de la barra que el servidor al instante sabe que la dirección URL que apunta a un directorio y no necesita gastar tiempo tratando de solucionarlo.

Diseño Web

2004-10-20T14:33:00.000-07:00

Consejos de Diseño Web

Diseño con Colores de Pantalla

Diez formas de acelerar el tiempo de descarga de sus páginas web

Diez formas de acelerar el tiempo de descarga de sus páginas web

Diseño Web

Diseño Web

: Creaciones Digitales es el mejor sistema de diseño web que existe. Punto. =)