Ud entró como Huésped
Вход:
Foro · Manual uCoz · Participantes · FAQ Registrarse · Entrada

categorías
Trabajo con el Constructor de plantillas [0]Cambio del diseño con ayuda de las plantillas [1]
Trabajo con CSS [0]
Búsqueda
 Tabla de anuncios
Tutorial sobre el sistema » Configuración del diseño en el sistema uCoz » Cambio del diseño con ayuda de las plantillas

Favicones y cursores

Información | 2011-08-02, 6:22 PM
Favicones y cursores

Favicones y cursores son componentes de los sitios web creados por nuestros usuarios.
Les quiero ayudar un poco pues a veces los usuarios quieren diversificar y variar el diseño de sus páginas web

El aspecto del cursor de determina con ayuda de la propiedad CSS cursor.
Propiedad CSS cursor nos permite instalar nuestro propio aspecto del cursor a los elementos de la página, además se puede utilizar tanto tipos estándares de cursores, como los determinados por el usuario (archivos CUR o cursores SVG).
Propiedad CSS cursor es una propiedad para modificar el aspecto del cursor.
Para más simplicidad y comprensión dividimos los cursores por grupos...

Cursores estándar:
auto – es un cursor de predeterminado para el elemento actual.
crosshair– es un cruce (que parece al símbolo +).
default– es un cursor que se utiliza se predeterminado en la plataforma actual. A menudo se expone en forma de una flecha.
pointer– es un cursor expuesto en forma de un indicador que significa un enlace.
move– es un cursor que determina el objeto que ha de estar trasladado.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize – son cursores que significan la posibilidad de mover una parte del objeto.
text– es un cursor que significa el texto que puede estar resaltado. Frecuentemente se expone en forma de una línea vertical "|".
wait– es un cursor que significa la ocupación de un programa y comunica al usuario que éste debe esperar. A menudo se expone en forma de esfera del reloj o reloj de arena.
help- es un cursor que significa que para el objeto indicado por él, hay una información de referencia. Muy a veces se expone en forma de un signo de interrogación o un globo.

Ejemplo de la utilización:
Code
SPAN.help { cursor : help; }


Cursor determinado por el usuario:
Puede surgir una situación cuando aparece la necesidad en un cursor extraordinario. Entonces habrá que indicar como valor de la propiedad cursor:
Code
url ('ruta al cursor'), cursor estándar


he aquí varios ejemplos ilustrativos:

Code
{ cursor : url("my.cur"), text; }   P { cursor : url("my.svg"), url("my.cur"), auto; }


Cuando el navegador se encuentra con la definición de un cursor personalizado, trata de exponer el primer cursor que hay en la lista. Si el primer cursor no puede estar expuesto, el navegador trata de aplicar el siguiente en la lista. Hay que prestar atención aquí que a final de la lista suele haber un cursor estándar. Se hace esto para instalar este cursor en caso de que los demás no hayan sido podido expuestos.
En calidad de los cursores personalizados se utilizan los archivos en formato CUR, ANI o cursores SVG. SVG cursor es un cursor personalizado donde el mismo cursor comparece como un archivo de la imagen. Hay que recordar también que deben utilizarse en un cursor como mínimo 2 colores con el fin de que éste sea distinguido en diferentes fondos.
Cursores personalizados se mantienen por IE6, Firefox 1.5. Firefox 1.5 soporta los cursores CUR y SVG, con esto no soporta el formato ANI. Internet Explorer soporta los formatos CUR y ANI, pero no "entiende” cursores SVG.

Propiedad cursor es heredada.
También existe un valor más – inherit. Este valor indica que la propiedad se hereda del elemento-padre.
Valor de la propiedad cursor de predeterminado: auto.

Al fin queríamos advertir que no se entusiasmen por los cursores personalizados, deben éstos utilizarse cuando de verdad surge tal necesidad. Por lo demás es mejor ir utilizando cursores estándares. ¡No lo olviden!
 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
En el momento de abrir una página de todos los sitios del sistema se pone de predeterminado un icono de estándar de uCoz. Está situado el icono en el sistema y no se ve en sus sitios.
Para meter tu imagen en la barra de direcciones del navegador hace falta cargar a la carpeta de raíz de FTP o gestor de archivos un archivo con tu icono, debe llamarse favicon.ico este archivo.
¿Cómo hacer tu propio icono? ¿¿¿... simplemente cambiar el nombre a .ico???

1) Primero hay que dibujar un icono en el programa especial Microangelo, Delphi etc. con el tamaño de 16x16 píxels, 16 bits.
2) Guardar su dibujo en formato ico.
3) Cargar el dibujo en la carpeta raíz con ayuda del gestor de archivos o FTP.
4) Actualizar la página, borrar la caché (encuentra Eliminar archivos o Borrar caché en las configuraciones del navegador).

El navegador IE tiene una peculiaridad de no exponer favicon.ico. Para que lo haga, hay que instalar la página entre

Code
  <head> y </head>


el código siguiente:

Code
  <link rel="icon" href="/favicon.ico" type="image/x-icon">  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">


En ESTE sitio se puede transformar los archivos del formato png en ico y viceversa.

СREACIÓN DE UN ICONO
Un ico pa’l sitio puede estar creado (dibujado) con nuestras propias fuerzas, para esto se requiere:
1. PhotoShop cs3
2. un plugin para él.

Abajo se explica cómo se puede hacer un ico.

Favicon es un icono pequeño que se expone en la barra de direcciones cerca del url de un sitio.
Un icono puede tener las dimensiones de 16 x 16 pixels. Así mismo el icono puede ser animado.
Para que Favicon se exponga en el navegador, hay que crearlo y cargar en la carpeta raíz del sitio.
Miremos aquí la creación de un icono con ayuda del plugin para Photoshop que hemos descargado ya. Para su instalación copiamos el archivo ICOFormat.8bi en el directorio AdobePhotoshop/Plug-ins/File Formats.
Con ayuda de este plugin podemos guardar imágenes en forma de los archivos .ico
 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
DISEÑO DEL ICONO




Generalmente es difícil alcanzar un buen resultado utilizando las imágenes de 16x16 pixeles. Para un trabajo más creativo se puede crear una imagen de 64x64 pixels, y después paso a paso las dimensiones de la imagen se reducen a 16x16 pixels para ver el resultado.
Para cambiar las dimensiones de la imagen se aplica los puntos siguientes del menú: Image » Image Size (Imagen » Tamaño de la imagen)



Para guardar el icono creado hay que elegir el punto del menú File » Save (Archivo » Guardar como) y en el campo del tipo de archivo elegir ICO. El nombre del icono será favicon.ico
Ahora podemos cargar el icono en la carpeta raíz del sitio (comúnmente esto se hace a través de FTP). De la misma manera podemos crear los iconos para los subdominios de los sitios cargando diversas imágenes en las carpetas raíces de los subdominios (pero con esto los iconos han de tener el nombre de favicon.ico).
Instrucción creada por: GUARAGUAO | Persona de contacto: Guaraguao
Visitas: 283 | Expuesto hasta: 2012-12-31 | Ranking: 0.0/0 |
Total de comentarios: 0
Solamente los usuarios registrados pueden añadir comentarios.
[ Registrarse | Entrada ]


Potenciado por uCoz