Archivo para ‘Varios’ Categoria
Selectores de CSS 3
23 de Agosto de 2010Avanzar hacia el futuro del CSS
Usted puede pensar que es un poco pronto para estar pensando en CSS 3. Después de todo, aún no es una norma reconocida, y de hecho sólo hay unos pocos documentos en un estado público acerca de este nuevo nivel. Pero aún así, Mozilla y Firefox han comenzado los selectores CSS para que los diseñadores Web los puedan utilizar. Si usted comienza a aprender el CSS 3, estará por delante de la curva cuando otros navegadores empiecen a apoyarlos.
CSS 3 selectores de atributos
CSS 2 permitió a los diseñadores web empezar a seleccionar el contenido de los atributos. Con CSS 3, ahora podemos seleccionar las coincidencias parciales de cadenas en los atributos. Esto nos da más flexibilidad. Hay tres selectores de atributos nuevos:
A partir del atributo
Este selector se seleccionará en las coincidencias exactas del inicio de la cadena del atributo.
a[href^="ftp:"] { … }
Fin del atributo
Este selector se seleccionará en las coincidencias exactas al final de la cadena del atributo.
a[href$=".a2sistemas"] { … }
Coincidiría apuntando a unos únicos vínculos. Sitio a2sistemas.
Cualquier sub-cadena del atributo
Este selector coincidirá con cualquier atributo que tiene la sub-cadena dentro de ella.
img[src*="photos"] { … }
Se correspondería con cada imagen que ha tomado fotografías en el atributo src. Por ejemplo “/ images/photos/image1.gif” y “/ photos/image2.gif” y “photos.gif”.
CSS 3 Pseudo-clases
Hay varias pseudo-clases de nuevo añadido en CSS 3 que funcionan en Firefox y Mozilla.
* Root pseudo-clase representa el elemento raíz del documento (en HTML 4 este es <html>). Así que los diseñadores que trabajan con XML, puede aplicar estilos a todo el documento sin saber exactamente qué es el elemento raíz.
:root { … }
* El último niño pseudo-clase es similar a la :first-child pseudo-clase en CSS 2, pero se refiere al elemento secundario anterior.
p:last-child { … }
* El objetivo pseudo-clase es útil para llamar la atención del texto que se dirige cuando en una etiqueta de ancla se hace clic.
:target { … }
* Pseudo-clase le permite seleccionar los elementos que no están representados por el argumento. Tenga cuidado con éste, como las etiquetas HTML y el cuerpo son elementos también, a menudo coinciden menos ya que son muy específicas. Por ejemplo, este estilo le señalará las imágenes sin una etiqueta alt:
img:not([alt]) { border: thick solid yellow; }
CSS 3 Combinar hermanos
Este selector le permite seleccionar un elemento que tiene un hermano específico en común, pero no tiene que ser directamente uno junto al otro en el documento. Sin embargo, el primer elemento de la propiedad debe ser lo primero en el documento. Por ejemplo, para seleccionar todos los siguientes blockquotes de un elemento H3 usted escribiría:
h3 ~ blockquote
Esto coincide con todos los siguientes blockquotes de un elemento <h3> independientemente de qué elementos se encontraban en el medio.
Otros 3 selectores CSS
Hay muchos más nuevos selectores CSS 3, pero no son compatibles con los navegadores hasta ahora. Cuando lo sean, van a agregar funcionalidad a las formas (como para poner de relieve los elementos comprobados, los elementos desactivados, y los elementos de forma que no han sido tocados por el lector), agregaran la capacidad de seleccionar los elementos en los que el único niño del padre o cuando no tienen hijos, o si desea seleccionar todas las filas de otra tabla, el selector de n-ésimo niño le permitirá alternar las filas que se seleccione.
Selectores CSS 2
6 de Agosto de 2010Selectores CSS 2 Amplíe estilos
Los selectores CSS 2 son una extensión de selectores CSS 1, pero, como era de esperar, agregan más opciones y funciones para la mezcla. Estos selectores son compatibles con los navegadores modernos, así que no hay ningún motivo para empezar a utilizarlos para hacer sus hojas de estilo más específicas y directas.
CSS 2 Selector universal
Un selector universal es exactamente lo que suena: un selector que selecciona universalmente. En otras palabras, si usa el selector universal coincidirá con el nombre de cualquier tipo de elemento en el documento. Está escrito como una estrella:
*
Usted puede utilizar el selector universal en cualquier lugar que usaría un nombre de elemento. Así, por ejemplo, si quería igualar cualquier elemento secundario en una blockquote, debería escribir:
blockquote * { … }
Selectores de atributos CSS 2
Con CSS 2 ahora puede seleccionar los elementos que tienen atributos específicos. También puede coincidir en el valor del atributo. Por ejemplo, si desea establecer un estilo en todas las etiquetas de anclaje que tienen el atributo href (y no coinciden en las etiquetas de anclaje que no lo hacen, como anclas con nombre), debería escribir:
a[href] { … }
Si quería igualar sólo en los vínculos anclas que apuntaban a un sitio específico, usted debe anotar lo siguiente. Tenga en cuenta que esto debe ser una coincidencia exacta, los enlaces que apuntaban a sub-páginas dentro del href que figuran no coinciden.
a[href="http://webdesign.about.com/"] { … }
También puede hacer búsquedas parciales en los valores de atributo:
[att~=value]
Cuando el valor del atributo es una lista separada por espacios de valores, uno de los cuales es un partido.
span[style~="boxTop"]
Encaja en <span style=”boxRed boxTop”>
[att|=value]
Cuando el valor del atributo es una lista de palabras separadas por guión, el comienzo de lo que es un partido. Esto se utiliza principalmente para que coincida con el idioma sub-códigos:
*[lang|=en]
Encaja en nosotros y en-es-es.
Nueva CSS 2 pseudo-elementos y pseudo-clases
CSS 2 trae una serie de nuevos pseudo-elementos y clases.
:first-child
El primer niño pseudo-clase coincide con el primer elemento secundario de otro elemento, no importa lo que es. Si se define con un elemento por ejemplo, p: first-child, buscará cada <p> que es un primer hijo, e ignorará los otros.
:hover and :focus
Activa la pseudo-clase a partir de CSS 1. El pase el ratón entra en vigor cuando esté el ratón sobre el elemento en cuestión, y el foco cuando el elemento tiene el foco del navegador.
:active
Si bien esta pseudo-clase existía en CSS 1, ahora se aplica a todos los elementos, no sólo enlaces. Asimismo, ya no es mutuamente excluyente con otras pseudo-clases. Por ejemplo, un elemento puede ser a la vez :active y :visited
:lang
Esta pseudo-clase especifica cómo el lenguaje humano del elemento está determinado, por lo que puede hacer coincidir un elemento basado en su lenguaje.
:first-line
Similar a :first-child pseudo-clase, pero este pseudo-elemento se aplica a la primera línea de texto en el elemento.
:first-letter
Este pseudo-elemento le permite seleccionar la primera letra de un elemento para crear la tapa desplegable o estilos iniciales.
:before and :after
Estas te permiten insertar contenido generado en el documento antes o después del elemento en cuestión.
CSS 2 Niño y selectores de hermanos
CSS 1 le ha permitido seleccionar los elementos que eran descendientes de un elemento más, pero con CSS 2 ahora se puede especificar que sólo desea hijos directos seleccionados, o simplemente quiere elementos que son hermanos (tienen el mismo padre) el uno del otro.
Selectores Niño
Un selector de hijo se escribe con un signo de mayor que (>). Para hacer coincidir todos los elementos p que son hijos de un elemento div podría escribir:
div ] p { … }
También puede combinar selectores de hijos de los selectores de descendientes. Por ejemplo, para que coincida con todas las etiquetas p que son descendientes de un elemento de la lista de menores por órdenes de que es descendiente de un div, usted escribiría:
div ol]li p { … }
Selectores de hermanos
Los hermanos adyacentes son elementos que están uno al lado del otro y al mismo nivel en la estructura del documento. Ellos tienen el mismo padre y estaría justo al lado el uno al otro en el documento. Por ejemplo, si se desea con el estilo de todos los elementos h2 que siguen inmediatamente un elemento h1 (pero que no tienen otro elemento, como AP por medio), usted escribiría:
h1 + h2 { … }
Como con los selectores niños, usted puede combinar otros selectores. Por ejemplo, para que coincida con todos los párrafos que siguen un h2 con una clase especial, usted escribiría:
h2.special + p { … }
Usar CSS 2 selectores
Con la descripción y uso de selectores CSS 2 hará que sus hojas de estilo sean más potentes. Se puede sincronizar elementos más directos y específicos Los selectores CSS 2 son una parte importante del CSS.
Selectores CSS 1
3 de Agosto de 2010Los fundamentos del CSS Selectores 1
Básico 1 CSS Selectores
El selector es la parte de la definición de estilo CSS que define los elementos exactos para aplicar el estilo. En su forma más básica, este es el nombre del elemento real. Por ejemplo, si se desea un estilo de todos sus títulos de primer nivel en rojo, se utiliza un selector h1:
h1 { color: red; }
CSS Selectores de Clase 1
En el caso de que no quería definir cada título de primer nivel en rojo, pero si un sólo sub-conjunto, puede utilizar un selector de clase (escrito como una cadena con un punto delante de él). Por ejemplo, si desea que el mismo h1 forme parte de un sub-conjunto de H1S rojo, y el resto permanezca como normal, se utiliza un selector de clase:
h1.red { color: red; }
CSS Selectores de ID 1
Los selectores ID son casi los mismos que los selectores de clase, sólo que son más que un impacto de un elemento en la página (el que tiene identificador específico), y están escritos con el signo (#) en la parte delantera de la palabra. Por ejemplo, si usted tuviera un ID de h1 que quisiera rojo:
#myredh1 { color: red; }
CSS 1 Pseudo-clases
En CSS 1 hay un par de pseudo-clases útiles que ayudan a definir los estilos basados en las características del elemento o una página y no específicamente a los propios elementos. Hay cinco pseudo-clases en CSS 1:
a: link
Define un enlace no visitado.
a: visited
Define un vínculo visitado.
a: active
Define un vínculo activo.
: first-line
Define la primera línea de como es el formato en el lienzo.
: first-letter
Define la primera letra del texto en el elemento. Técnicamente es un pseudo-elemento.
Selectores CSS 1 descendiente o selectores contextuales
Los Selectores CSS 1 también le permiten definir un selector de base en el lugar que está en el árbol HTML. Por ejemplo, aunque es posible que desee hacer todos los h1 rojos en su documento (utilizando los selectores de base anterior), es posible que desee llamar más la atención sobre cualquier subrayado (texto <em> </ em>) dentro de ese h1. Mientras que usted podría establecer otra clase que em, es más fácil establecer sólo un estilo especial en todo el texto que se inscribe en un h1. Use espacios para separar las etiquetas, en lugar de comas, para indicar selectores de descendientes:
h1 { color: red; }
h1 em { text-decoration: underline; }
También puede utilizar comodines para definir cualquier número de niveles en los selectores de su descendiente. Por ejemplo, si quisiera que todas las etiquetas fueran nietos de un div, usted escribiría:
div * q { border: thin solid blue; }
Este estilo no afectará a los que de que son descendientes directos de un div o los que no están dentro de un div en absoluto.
Colores corporativos
1 de Agosto de 2010Vamos a echar un vistazo a las paletas de colores de algunas empresas bien conocidas. Lo que es interesante es que muchas de estas gamas de colores se basan en paletas de colores muy monocromáticas con un solo acento de color. Esto puede ser una forma muy efectiva para resaltar elementos. Y como pueden ver, en las páginas de Apple y Adobe, se utilizan colores muy neutros como el gris o el negro como base principal de su gama de colores lo hace que los colores de las imágenes de su producto destaquen.
A continuación vamos a ver alguna de esas paletas.
Paleta Facebook
Colores:
- # 3b5998
- # 8b9dc3
- # F7f7f7
- # Dfe3ee
Descripción:
Paleta de color monocromático azul. La paleta de Facebook tiene un color de base muy popular de color azul y crea una paleta a su alrededor. Casi todos los colores en la página son de un color azul, incluso los grises del fondo tienen algún tinte azul.
Paleta MySpace
Colores:
- # 2358b8
- # 82aad3
- # 313246
- # c9d0d6
Descripción:
Paleta de colores monocromáticos en azul. MySpace utiliza una paleta de color bastante oscuro en sus colores, pero todos se centran en el color azul. El fondo de la mayor parte de la página es de color blanco, que hace que el azul oscuro destaque más.
Paleta Youtube
Colores:
- # D02525
- # 595757
- # 0033cc
- # Ebebeb
Descripción:
Una combinación de colores bicromática utilizando dos de 3 colores triádicos – rojo y azul. YouTube se basa en la década de rojo y negro del mismo logotipo para ofrecer una imagen de marca en la página. Pero también hay una gran cantidad de azul en todas partes.
Paleta Flickr
Colores:
- # 0063dc
- # Ff0084
- # 999999
Descripción:
Flickr utiliza colores análogos, rosa y azul en su paleta para el logotipo. El gris es muy neutro y sirve para mostrar tanto el contenido de las páginas como el logotipo.
Paleta Adobe
Colores:
- # Ff0000
- # 343434
- # 454545
- # E9e9e9
Descripción:
La paleta de colores de Adobe es bastante llana – gris oscuro y rojo como acentuado. Los grises oscuros son muy neutrales y esta paleta funciona bien para resaltar los productos que tienen sus propios colores.
Paleta Apple
Colores:
- # 979797
- # 666666
- # Eeeeee
- # 000000
- # 0088cc
Descripción:
Apple apuesta por los grises neutros, negros y blancos para destacar la mayor parte de su página. Además, los grises monocromáticos hacen que los colores de los productos de Apple se destaquen aún más.
Paleta Microsoft
Colores:
- # 5ca5d8
- # 013655
- # F0f8fc
- # 4e7dc2
- # 007734
Descripción:
Microsoft tiene una paleta de azules y las utiliza para acentuar y poner relieve. Se trata de una paleta muy monocromática. Casi no hay blanco en la página, y lo blanco que hay se utiliza para hacer la navegación más fácil de leer.
Páginas splash (intro). Pros y Contras
13 de Junio de 2010¿Qué es una Página Splash?
Una página Splash es una página de introducción a su sitio Web antes de la página principal (home).
El usuario llega a esa página antes de que se le dé permiso de ingresar a la verdadera página principal.
Se caracterizan por ofrecer una o dos de las siguientes características:
- Gráfico o logotipo
- Animación o películas flash
- Elección de la forma de entrar en el sitio (flash / no flash, etc)
- Requisitos técnicos (navegador, versión, etc)
Las páginas Splash suelen ser muy populares, especialmente entre algunos diseñadores, ya que son una manera de mostrar sus habilidades en Flash y otras tecnologías en una sola página. Pero antes de salir corriendo a construir su propia página de bienvenida, debes considerar todos los pros y los contras.
Pros de páginas Splash
- Las páginas Splash son de carga rápida, reciben toda la información rápidamente en la primera página sin necesidad de desplazarse.
- Las páginas Splash se aseguran de que sus usuarios vean la animación flash al menos una vez.
- Son una excelente manera de mostrar tu trabajo.
- Las páginas Splash permiten a sus usuarios a elegir la tecnología del sitio que quieren.
- Utilizan el servidor de logs para ver el desglose de sus clientes reales.
Contras de páginas Splash
- La usabilidad de una página de bienvenida es completamente nula.
- A muchos usuarios no les gustan las páginas de bienvenida y según estudios el 25% de los visitantes deja el lugar después de ver una página de ingreso.
- Las páginas Splash rompen los motores de búsqueda. Dado que muchas páginas de bienvenida, solo incluyen una animación en flash no es posible la optimización para los motores de búsqueda y si se añade contenido a la página de comentarios puede ser penalizado por spamdexing.
- La animación puede ser repetitiva. A los usuarios que hayan visto el flash mas de una vez, ya no les apetece volver a pasar por el de nuevo, pero si se ha olvidado de incluir la opción “saltar” no tendrán mas remedio que hacerlo y eso será doblemente molesto.
Mi Opinión de las páginas Splash
Me parecen molestas, y no creo que las ventajas de elegir el sitio que mejor se adapte a mi navegador sea mayor que el fastidio de pasar por ellas.
Relentifica y entorpece el proceso comunicacional, puede llegar a frustar al visitante (especialmente si es un visitante asiduo) y agrega un paso extra para que el usuario pueda llegar al contenido que busca de dicho sitio web.
Personalmente, no las recomiendo. Pero una vez que hayas revisado todos los pros y los contras, debes tomar su propia decisión.
Cuándo utilizar formato JPEG o GIF para imágenes Web
13 de Junio de 2010Las imágenes GIF
Utilizaremos archivos GIF para las imágenes que tienen un número reducido de colores.
Los archivos GIF se reducen siempre a no más de 256 colores. El algoritmo de compresión para los archivos GIF es menos complejo que para los archivos JPEG.
El formato GIF no es apropiado para imágenes fotográficas o imágenes con gradiente de colores por su número limitado de colores.
Imágenes JPEG
Utilizaremos imágenes JPEG para fotografías e imágenes que tienen millones de colores. JPEG utiliza un algoritmo de compresión complejo que le permite crear gráficos más pequeños aunque nos hace perder algo de la calidad de la imagen. A esto se llama una “pérdida” de compresión, porque parte de la información de la imagen se pierde cuando la imagen se comprime.
El formato JPEG no se adapta a las imágenes con texto, grandes bloques de color sólido, y formas simples con bordes nítidos. Esto es porque cuando la imagen se comprime,el guardado no es tan agudo como lo sería con otro formato.
Las imágenes PNG
El formato PNG se desarrolló como un reemplazo para el formato GIF. Los gráficos PNG tienen una tasa de compresión mejor que las imágenes GIF que dan como resultado imágenes más pequeñas que el mismo archivo guardado como un archivo GIF. Los archivos PNG ofrecen una transparencia alfa.
Las imágenes PNG y GIF no son muy adecuadas para las fotografías. Es posible obtener en torno al tema de bandas que afecta a las fotografías guardadas como archivos GIF con colores reales, pero esto puede dar lugar a imágenes muy grandes. El otro problema con PNG es que sus características especiales no están bien soportadas por Internet Explorer.
Aspectos básicos del diseño Web Colocación y Posición de los elementos.
6 de Junio de 2010Cuando se comienza un nuevo diseño, no importa la metodología, estamos comenzando desde una página en blanco.
No hay nada en la página web – así que lo primero que haremos es poner algo en ella.
Pero, vamos a pensar en la colocación de los elementos o los vamos a colocar sin ton ni son?
Un buen diseñador no permite que la posición y colocación se produzca de forma aleatoria.
Primero hay que pensar en:
- Lo que es el elemento
- Cómo el elemento se refiere a los objetivos de la página
- Donde el elemento encaja con los demás elementos de la página
El elemento que se está colocando
Hay muchos elementos comunes en una página Web, tales como: titulares, navegación, imágenes, contenidos textuales y administrativos. Saber lo que es cada elemento,ayuda a determinar donde debe ser colocado en la página. Por ejemplo, normalmente no pondríamos un título de página Web en la parte inferior de la página. La navegación se encuentra generalmente en la izquierda o en la parte superior y la administración se encuentra más comúnmente en la parte inferior.
El elemento en relación a los objetivos
Si conocemos los objetivos y las metas de la página esto será fundamental para su colocación.
Normalmente los anuncios se encuentran en lugares similares en las páginas Web. Si el objetivo es hacer que la gente haga clic en ellos, los colocaremos en lugares donde históricamente la gente mira y haga clic para así cumplir con nuestros objetivos.
Dónde están los otros elementos de la página
De alguna manera esto parece ser la parte más evidente del diseño – después de todo si ya tenemos un logotipo en la parte superior izquierda, no vamos a colocar contenido en la parte superior de la misma. Pero también hay que pensar en el contexto de sus posiciones. Colocar un bloque de anuncios en medio de un bloque de texto implica un sentido de conexión entre los dos elementos. La colocación de una línea horizontal después de un título o línea puede crear un sentimiento de desconexión entre el título y el contenido. Donde situemos los elementos puede marcar la diferencia.
Encontrar los puntos de interés en tu página
Los puntos de interés son los puntos centrales de un diseño – los lugares donde el ojo es atraído. Al cambiar el espacio en torno a esos puntos de interés puede afectar la manera en que esos temas se ven en la página.
Por ejemplo, una imagen puede ser el punto focal de tu página Web. Puedes optar por centrar la imagen en la página, pero eso es aburrido y plano. En su lugar puedes jugar con los otros elementos en la página y cambiar los márgenes alrededor de la imagen para crear un diseño que aumente el interés en el dibujo.
Vamos a poner un ejemplo usando tres elementos: un titular, una foto, y una leyenda. Podemos elegir centrar todos los elementos pero con eso conseguiremos un diseño aburrido y no tendremos una jerarquía visual clara. Nuestro ojo será atraído por la imagen porque es una imagen, no por la posición que tiene en el diseño.
Con sólo hacer un par pequeños cambios en la posición de los elementos y de los márgenes alrededor de la imagen, el diseño resultante es más atractivo a la vista. Debido a que el espacio entre el título y la imagen es diferente al de la leyenda y el espacio de la imagen, tenemos la sensación de que el título pertenece a la imagen.
Formatos gráficos
1 de Marzo de 2010Aunque hay cientos de formatos de archivos gráficos existen navegadores web que sólo admiten algunos de ellos. Aquí describiremos los diferentes formatos de archivos gráficos que están disponibles para los diseñadores web y cuándo deben usarse.
Los formatos de archivos gráficos soportados por los navegadores web más populares son Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) y gráficos vectoriales. Algunas de las propiedades de los archivos gráficos son:
Transparencia – esta característica permite que la imagen sea de mayor o menor grado de opacidad, y sólida a totalmente transparente.
Compresión - esta característica permite que la imagen se almacene en un archivo mucho menor mediante el uso de un algoritmo matemático para manejar grupos de píxeles como un solo tema.
Entrelazado – el entrelazado permite que la imagen se cargue en primer lugar de las filas impares y luego volver y sacar las filas pares. Permite al visitante a ver la imagen antes.
Animación - la animación da la apariencia de movimiento por medio de una serie sucesiva de imágenes. Los Gifs animados no requieren un plug-in de navegador y pueden trabajar en casi todos los dispositivos.
Carga progresiva – la carga progresiva es similar a entrelazar ya que sólo carga una parte de la imagen al principio, pero no se basa en filas alternas y permite al usuario ver la imagen más rápidamente.
GIF
Se originó en la década de 1980 y fue adoptado por los diseñadores de web en la década de 1990 como el formato gráfico preferido para páginas web. Los archivos GIF utilizan un algoritmo de compresión que mantiene archivos de pequeño tamaño para una carga rápida.
Se limitan a 256 colores (8 bits) y apoyan la transparencia y los gráficos entrelazados. También es posible crear gráficos animados usando el formato GIF. Todos los navegadores pueden visualizar los archivos GIF.
Ventajas del GIF :
* La mayoría da amplio apoyo de formato gráfico.
* Los diagramas se ven mejor en este formato.
* Soporta la transparencia.
JPEG
Los archivos JPEG son comprimidos con apoyo de “color verdadero” (24 bits) y son el formato preferido para las fotografías en materia de calidad de imagen. JPEG admite un formato progresivo que permite una imagen casi de inmediato con mejora de calidad como el resto de cargas.
A diferencia de un archivo GIF, la compresión de archivos JPEG puede ser controlada por el diseñador, que permite diferentes niveles de calidad de imagen y tamaño de archivo.
Ventajas JPEG:
* Ración media de compresión de grandes velocidades de descarga.
* Produce excelente calidad de fotografías y dibujos complejos.
* Soporta 24-bit de color.
PNG
Es un formato bastante reciente que se presentó como una alternativa a los archivos GIF. PNG admite hasta 24 bits de color, con transparencia y entrelazado puede contener una descripción breve texto de contenido de la imagen para el uso de motores de búsqueda.
Desafortunadamente, la mayoría de los navegadores no soportan PNG y los que lo apoyan, no son compatibles con todas sus características todavía. Pero eso cambiará en el futuro.
Ventajas PNG:
* Supera la limitación de 8-bits de color del GIF.
* Permite la descripción de texto de la imagen para el uso de motores de búsqueda.
* Soporta la transparencia.
Gráficos Vectoriales
La mayoría de los gráficos web son imágenes de mapa de bits o mapas de bits, que consisten en una rejilla de píxeles de colores. Dibujo e ilustraciones deben ser creadas como gráficos de vectores que consisten en descripciones matemáticas de cada elemento que compone las líneas de las formas y el color de la imagen. Los gráficos vectoriales se crean mediante la elaboración de programas tales como Adobe Illustrator y Macromedia Freehand y son la elección de artistas gráficos para crear dibujos. Los gráficos vectoriales se debe convertir a GIF, JPEG o PNG para ser utilizados en una página web.
¿Qué formato debemos utilizar?
Podemos elegir entre el formato GIF o JPEG para la mayoría de usos. Pero, dado que el tamaño de archivo de un archivo GIF es generalmente mas pequeño que el tamaño de archivo de un archivo JPEG, la mayoría de los diseñadores utilizan el formato GIF para los fondos, cajas, marcos y cualquier otro elemento gráfico.
La mayoría de los diseñadores seleccionan el formato JPEG para las fotografías e ilustraciones en la compresión para no comprometer la calidad visual de la imagen.
GIF y JPEG son un apoyo universal y la elección del diseñador es determinada para el elemento gráfico que utilice.
Optimización de Páginas Web
27 de Febrero de 2010Todos queremos tener la web más atractiva y dejar a nuestros visitantes con los ojos abiertos y completamente deslumbrados. Por lo general un diseño muy atractivo implica gran cantidad de elementos gráficos, aumentando el tamaño de la página. Aquí hablaremos de algunos consejos útiles sobre cómo mantener un diseño web atractivo, pero con descargas rápidas.
Debido a la tasa media de ancho de banda de Internet por ordenador, los webmasters dejan de desarrollar sitios web complejos cargados con fuertes elementos gráficos. En casos extremos se pueden encontrar sitios web que toman unos minutos para cargar el contenido en su navegador. Por supuesto el usuario no va a esperar ese tiempo para que un sitio web cargue, y pasará a la siguiente página web en sus resultados de búsqueda.
¿Entonces por qué algunos webmasters aún desarrollan páginas de carga lenta? Principalmente debido a la falta de conocimiento de sencillas técnicas de optimización de gráficos que les permitan mantener un sitio web atractivo, manteniendo el tamaño de página más pequeño.
¿Cuántos somos conscientes del hecho de que un cuadro con esquinas redondeadas puede conseguirse utilizando el código CSS solamente, sin la necesidad de cualquier imagen gráfica. Los que están familiarizados con CSS saben que un nivel relativamente alto de la programación es necesario, los errores más comunes pueden tener relación con la optimización de las soluciones simples.
Se podría hacer la afirmación de que lo que un diseñador Web puede hacer con el software gráfico es imposible de aplicar al código. No estoy de acuerdo. Cuando el diseño está terminado y está listo para cortarlo en pequeñas imágenes a utilizar en el código html, la creatividad se ha probado. Todo lo que se hace en esta etapa afectará al tamaño de página total. Si el diseño contiene formas redondeadas que se superponen unas a otras o zonas con gradientes de color, entonces deberemos cortarlas con cuidado para que el resultado sea tamaño de archivo pequeño.
Veamos lo que significa cortar eficientemente:
- No hacer cortes grandes que contiengan gran cantidad de colores diferentes. Utilizaremos un pequeño número de cortes en cada porción contieniendo un número limitado de colores.
- No haremos una gran parte que contenga la estructura del mismo gráfico. Cortarmeos una pequeña parte de él y se repetirá en el código. Esto suele ser un error muy común que los webmasters / programadores hacen cuando se trata de fondo de color degradado.
- No usaremos el formato de archivo JPEG siempre. En algunos casos, un formato GIF será mucho menor en tamaño. Una regla de oro – un segmento con un elevado número de colores será más pequeño de tamaño con el formato JPEG en lugar del formato GIF, y lo contrario también es cierto. Comprobaremos cada opción por separado. Cada 1KB que nos permita reducir el tamaño de archivo de la imagen finalmente se sumará a una reducción significativa en el tamaño de página.
- Si tenemos texto sobre un fondo de color sólido, utilizaremos el código para crear el fondo en su lugar. Recordemos que se puede definir tanto el estilo de fuente y color de fondo de la zona utilizando CSS.
Técnicas avanzadas
Gráficamente la optimización de un sitio web es algo más que saber hacer optimizaciones de la imagen. Existen algunas técnicas avanzadas que requieren un alto nivel de programación. CSS2 tiene mucho más que ofrecer que el CSS. Aunque no todos los navegadores han adoptado esta norma todavía se debe estar listo para cuando lo hagan. JavaScript también nos da un conjunto de opciones para crear algunos efectos interesantes sin necesidad de sobrecargar la página con Flash. El uso de herramientas limitadas, como JavaScript, frente a una aplicación avanzada, como Flash para crear los efectos deseados puede ser difícil. Sin embargo, pensemos en el resultado del esfuerzo que puede diferenciar el sitio web de los demás. Obtendremos un atractivo sitio web de aspecto profesional y que carga rápidamente.
Regreso al futuro
Las PDAs, teléfonos móviles y ordenadores portátiles mini son usados con conexiones a inalámbricas para navegar por Internet, la publicación de páginas web de carga rápida mejorará la experiencia de navegación, no sólo para aquellos que utilizan conexiones de gran ancho de banda, sino también hará que el usuario tenga una experiencia de navegación fácil.
Para aquellos que insisten en que la optimización del diseño web no es necesaria porque todos tendrán conexiones de banda ancha alta con el tiempo, estoy de acuerdo, hasta cierto punto. Sin embargo, las empresas de software están creando aplicaciones que utilizan más ancho de banda porque saben que están disponibles para que se utilicen. Acostumbrémonos a optimizar bien las páginas web, porque este juego del gato y el ratón no terminará nunca, y es mejor aprender las reglas del juego, que ser mordido.
¿Por qué buena Navegación es importante?
25 de Febrero de 2010La navegación web es uno de los elementos más cruciales en la determinación de la eficacia de un sitio web.
Para que la navegación web se eficaz, ante todo debe tener sentido. Si bien siempre hay espacio para la creatividad, los sitios web bien diseñados tienden a tener esquemas de navegación similar.
Un diseñador de páginas web siempre debe tener en cuenta la finalidad básica de la web y la audiencia prevista en el diseño de los elementos de navegación. La mayoría de sitios web existentes tienen a bien informar al visitante sobre un producto o servicio o vender realmente ese producto o servicio. Por lo tanto, hay algunas pautas básicas a seguir:
Asegurémonos de que todos los elementos de la navegación están claros y que los vínculos tienen el uso de las convenciones estándar de los enlaces, tales como botones, menús, subrayando del texto o cambio de color en el ratón.
Cuando no utilicemos los enlaces convencionales, hay que indicar explícitamente al visitante que se trata de un enlace. Por ejemplo, supongamos que diseñamos una página web en la que se utiliza un mapa que muestra distintas ciudades y deseamos que el usuario haga clic en el nombre de la ciudad para obtener información sobre la misma. Hemos de asegurarnos de informar al usuario que haga clic en el nombre de la ciudad para obtener más información acerca de ella.
Recuerde la regla de los “Tres clics”. Los estudios han demostrado que la mayoría de los usuarios no suelen hacer clic en más de tres enlaces para obtener la información que desean. Así, cada página del sitio web debe ser accesible dentro de esos tres clics.
No se recomienda el uso de flash o de otro tipo de página de bienvenida en el sitio web. Hay que mantener el diseño de la página web de sencillo y atractivo. Pero si decidimos usar uno, asegurémonos de usar la etiqueta META REFRESH, que permita al visitante saltar la página de inicio después de unos segundos y proporcionar un botón en el que pueda hacerse clic, claramente marcado para que el visitante puede pasar la página de entrada e ir directamente a su página de inicio, de lo contrario un gran porcentaje de los visitantes no volverán jamás. Recuerde que la mayoría de los visitantes buscan información, no entretenimiento.
Elementos de navegación
Top Menús - La barra de menú de la página normalmente se encuentra debajo de la cabecera que contiene el logotipo del sitio. Estos elementos de menú pueden ser individuales, menús desplegables, o con ampliación. Cada elemento del menú puede ser representado por un gráfico o solo de texto.
Lateral izquierdo de navegación – La navegación del lado izquierdo normalmente se implementa como la columna A o área de texto en la parte superior izquierda de la página web. Al igual que el menú superior, cada elemento puede ser un simple enlace o un menú en expansión.
Lateral derecho de navegación – La navegación del lado derecho no se utiliza muy a menudo, pero cuando se utiliza, se implementa como una columna o área de texto en la parte superior derecha de la página web. La mayoría de los diseñadores utilizan esta área para la publicidad en lugar de navegación del sitio.
Menús de fondo – Los menús de fondo pueden ser una barra de menú o pie de página.
Elementos importantes de navegación
Enlaces – Todas las páginas del sitio web deben estar dentro de dos o tres clics de la página de inicio. Las páginas importantes se deben estar a un clic. El tipo de sitio web determina los vínculos que son más destacados.
Cajas de inicio de sesión - Las cajas de inicio de sesión deben ser bien visibles. Los lugares comunes son parte superior izquierda, arriba a la derecha o dentro de la cabecera de la página.
Carros de la compra - Si usted usamos un carrito de compra para vender productos, debemos mostrar el botón de compra en un lugar destacado sobre cada página. La localización más común es la parte superior derecha justo debajo o como parte de la cabecera.
Botones de Orden – Si utilizamos botones de orden individual deben ser grandes y visibles. Usaremos el menor número de clics para entrar a la página.
Barra de migas – La barra de migas, son los vínculos o representación gráfica de dónde nos encontramos. La barra de migas generalmente está situada en la parte superior izquierda de la página justo debajo de la cabecera. Cada palabra es un enlace a la página anterior. Suelen estar en esta forma: Inicio-> Artículos-> Marketing
Enlaces externos – Los enlaces externos pueden ser utilizados en cualquier lugar, pero son más utilizados dentro de las áreas de texto de la página web. Pueden ser referencias a más información que se encuentra en otro sitio, a los productos recomendados, o para cualquier otra cosa.
Anuncios – Los anuncios son normalmente gráficos o texto con un hipervínculo asociado. Los anuncios pueden ser colocados en cualquier lugar de una página web, pero normalmente se utilizan sólo en el banner, por el lado derecho de la página, debajo de los elementos de navegación en el margen izquierdo, en la parte inferior de la página o intercalados en las zonas de ensayo de las página. Los estudios demuestran que los anuncios “por encima de la tapa” son más eficaces.
( “Por encima de la tapa” se refiere a la zona de una página web que es visible sin tener que desplazarse.)
Elementos descargables – Si ofrecemos elementos descargables, tales como archivos de audio, video o pdf, asegurémonos de informar al usuario del tamaño del archivo o si hay una aplicación para utilizar el archivo. Si se necesita una aplicación, proporcionaremos un vínculo a la aplicación. Por ejemplo, proporcionaríamos un vínculo de Acrobat, si estamos ofreciendo archivos PDF.
Mapa del Sitio - Un mapa del sitio es una buena forma de la distribución de todo el sitio para sus visitantes. Es sólo una lista jerárquica de cada página del sitio.
Resumen
Un sistema de navegación bueno puede aumentar el número de páginas vistas por cada visitante. Esto a su vez puede aumentar las suscripciones, los clientes, ventas, los miembros y hacer que el sitio web sea más exitoso.
