Igual aprendemos algo

nonews

Icono personalizado para nuestro blog (y 2)

| miércoles, 6 de abril de 2011
>>> Viene de aquí

Ahora que ya tenemos alojada la imagen, necesitaremos conocer su dirección en la red para poder llamarla, mediante el código correspondiente, para que aparezca en el blog.

Pinchando sobre la imagen en el álbum, tendremos una vista de ella en solitario, con información de la misma a la derecha de la pantalla.


Pinchando en la frase 'Enlace a esta foto' aparecen dos tipos de vínculos.
El primero es el enlace a la página donde nos encontramos.
El segundo es el que nos interesa, porque ahí nos dará el vínculo directo a la imagen.
Pero para obtenerlo tendremos que marcar la casilla 'Sólo imagen (no enlace)'.
Copiamos el enlace y nos sale una cosa como esta del ejemplo:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr4wWpkQLA38KrxpbAy00xJc0pu0bMB8pnMMpw9_RvyA7tc0JDcVRVF5-SuXmU_Ra1VA0A2wyffQek9TWIRZQVKzDc1-Ap7VL7FvNOrwkY36U0FQFgf0Avt4dQFE9o5NpjRUrJQ1-lxys/s144/nonicon412.png

Lo marcado en rojo es el tamaño que nos pone Picasa por defecto, pero nosotros lo vamos a eliminar. De esta forma la imagen que salga será la original.

Continuará...

Optimización de la memoria virtual

| martes, 22 de marzo de 2011
Cuando se instala un Sistema Operativo en un ordenador, se crea una memoria virtual, que es usada por el sistema cuando la memoria física se queda corta.
El tamaño de esa memoria virtual lo escoge por defecto la propia instalación del sistema.
Hay que decir que esa memoria virtual no es otra cosa que un archivo, que en Windows98 se llama 'archivo de intercambio' (WIN386.SWP, habitualmente en la carpeta de sistema Windows) y en los sistemas posteriores 'archivo de paginación' (pagefile.sys generalmente en la carpeta raíz, o sea C).

Sin embargo cuando, para mejorar las prestaciones de nuestro equipo, añadimos memoria física (módulos RAM), el sistema no modifica automáticamente el valor que teníamos asignado para la memoria virtual.
Por esta razón es por lo que no notamos una mejoría en el rendimiento como la que esperábamos.
Así que deberemos cambiar ese valor nosotros de forma manual.

Para ello iremos a las Propiedades del Sistema. Dos caminos para llegar a esa pantalla:
- Mi PC (clic derecho del ratón) > Propiedades
- Inicio > Configuración > Panel de Control > Sistema

Una vez ahí, vamos a la pestaña Opciones avanzadas y en el apartado Rendimiento pinchamos en Configuración. De esta elegimos la pestaña Opciones avanzadas. Y ahí, en el apartado Memoria virtual pinchamos en el botón Cambiar.
Veremos la siguiente pantalla:


Si no sabemos muy bien qué valores poner o no nos atrevemos, simplemente haremos lo siguiente:
1 - Elegimos el disco duro, si tuviéramos más de uno.
2 - Ponemos el tic en Tamaño administrado por el sistema.
3 - Pinchamos en el botón Establecer.
Y con eso Aceptamos en todas las pantallas sucesivamente hasta salir de la configuración.

Con esto ya estaría bien configurado nuestro sistema y notaremos una mayor alegría en nuestro equipo.

Pero si lo que queremos es darle unos valores personalizados, tendremos que tener en cuenta algunas cosas.
Si nos fijamos en la pantalla anterior, en lo que he señalado con un 3, vemos el tamaño que el sistema nos recomienda, así como el mínimo y el asignado actualmente.
Pues bien, podríamos poner ese valor recomendado en la caja del tamaño inicial que está un poco más arriba en la misma pantalla.
Y, ¿el valor máximo?
Según las recomendaciones de Microsoft, el valor máximo no debe exceder el valor de la memoria RAM multiplicado por tres.
Y si nos fijamos un poco, veremos que el valor inicial es aproximadamente el valor de la RAM que tenemos, multiplicado por 1,5.
En el ejemplo, que es de mi ordenador, yo tengo una memoria RAM de 1536 Mb.
Multiplicado por 1,5 nos da un valor de 2304 Mb.
Si os fijáis en la imagen, el valor que nos recomienda el sistema es aproximadamente el mismo.
Siguiendo con este ejemplo, debería poner estos valores:
Valor inicial : 1536 X 1,5 = 2304 Mb
Valor máximo : 1536 X 3 = 4608 Mb


Notas:
Todo lo explicado se ha hecho sobre un sistema WindowsXP, pero en 2000, Vista o 7, es similar. La única diferencia puede ser la forma de llegar a la pantalla de configuración.
Por otra parte un aumento excesivo de memoria virtual puede conseguir el efecto contrario al que se pretendía y llegar a hacer más lento el equipo.

Icono personalizado para nuestro blog

| viernes, 25 de febrero de 2011
Habréis visto que la mayoría de las páginas comerciales, por no decir todas, tienen un icono personalizado que aparece en la barra de direcciones del navegador o en su caso en la pestaña correspondiente.
Muchos blogs han incorporado esto también, porque da una cierta personalidad al blog, además de hacer más reconocible su presencia en los favoritos o el historial.

Desde aquí vamos a intentar explicar como colocar un icono de este tipo.

Necesitaremos hacer estos pasos:

1.- Conseguir una imagen adecuada.
2.- Alojar esa imagen en un servidor
y 3.- Introducir el código necesario en el blog para que aparezca la imagen.

Pues vamos a ello.

1.- Conseguir una imagen adecuada
En principio hay que decir que la imagen deberá ser cuadrada, de 16 pixeles de lado, y con formato '.ico'.
Al final del post veremos que esto en realidad era así en el principio de Internet. Hoy día se puede conseguir el mismo resultado con otros tamaños e incluso con otras extensiones de archivo.
Para obtener la imagen tenemos al menos dos opciones:
1.1- Buscarla en Internet.
y 1.2- Crearla nosotros mismos.

1.1- Una simple búsqueda en Google por 'iconos' o 'iconos web' nos dará un sinfín de resultados de páginas que nos ofrecen descarga gratuita de miles de iconos, de todos los tipos y temáticas.
Si así no encuentras uno que te llegue a gustar es que eres muy especial.
Bueno, la verdad es que habrá que echarle paciencia también.

Pero si de verdad quieres uno personal, lo mejor es la segunda opción: crearle nosotros mismos.

1.2- Para ello necesitaremos algún programa, como es lógico.
Editores de iconos y utilidades para trasformar imágenes en iconos hay muchos en el mercado. De pago y gratuitos.
Os daré unas pistas sobre lo que yo he visto y he usado.
El Microangelo tiene fama de ser el más completo, una especie de 'Photoshop del icono' (también trabaja cursores). Pero es de pago.

Vayamos con los gratuitos.
Easy Picture2Icon es muy sencillo y útil si lo que quieres es trasformar una imagen que ya tienes en icono, de una forma rápida. Admite bmp, gif, jpg y png. Necesita tener instalado .NET Framework para su funcionamiento.

IcoFX es ya un programa bastante más completo. Permite crear iconos desde cero, pero también trasformar imágenes en iconos e incluso extraer los iconos de un archivo ejecutable del sistema. Existe también en versión portátil, para los que nos movemos con los programas puestos (en un pendrive, claro).

Y por último, Greenfish Icon Editor Pro. Este es parecido al anterior, es decir un programa de edición de iconos completo, con efectos y transparencias, pero además incorpora capas, cosa bastante interesante para trabajar distintos aspectos de un icono con comodidad.

En el recuadro os dejo los vínculos correspondientes.



Estas son solo mis recomendaciones, pero en páginas de descarga de programas como Softonic o UptoDown encontraréis muchas más opciones. Cada uno tiene sus preferencias, y es posible que os manejéis mejor con otro programa.
Por otra parte algunos editores de fotografías tienen también la opción de exportar imágenes en formato icono.
Alguna vez hemos hablado en este blog de PhotoFiltre, un sencillo editor de imágenes, portátil, que nos sacará a menudo de esos pequeños problemas con las fotografías. Pues, además, este programa también permite la exportación -con un solo clic- al formato de icono.

Y ya para cerrar este capítulo, hay que decir que existe otra opción muy sencilla para trasformar una imagen en icono: los servicios on-line.
Hay muchos por ahí pero yo os daré solo uno: FavIcon Generator.
Solo hay que ir a su página, subir una imagen (cuadrada a ser posible), y descargar un archivo comprimido (zip) que ellos crearán. En ese archivo encontraremos los iconos en dos tamaños (16x16 y 32x32), así como unas vistas previas de ellos (en formato .png) y un archivo de ayuda para colocarlo en el blog, aunque no os recomiendo seguir esa ayuda porque está incompleta.

2.- Alojar la imagen en un servidor
Ahora que ya tenemos nuestra imagen, de nada nos servirá tenerla en nuestro ordenador. Para que pueda verla todo el mundo que visite nuestro blog, habrá de estar alojada en un servidor.

Sitios de hospedaje (hosting) de archivos hay un montón en la red, algunos incluso dedicados en exclusiva a imágenes.
Por mi parte solo dos recomendaciones: Álbumes Web de Picasa y Dropbox.

Para los que publican su blog en la plataforma de Blogger (Google), lo más recomendable es el servicio de Álbumes Web de Picasa, puesto que ahí es donde están alojadas todas las imágenes que vamos colocando en nuestro blog.

Con la misma cuenta que ya tenemos de Google, entramos en el servicio 'Álbumes Web de Picasa'. O bien, en la página de búsqueda de Google, pinchamos en Más > Fotos, como vemos en la imagen.


Habremos entrado en el servicio y nos encontraremos con todos los álbumes donde se encuentran las fotos que hemos ido colocando en los blogs.
Algo como esto:


Pinchamos en el botón 'Subir' y luego en seleccionar un álbum. Eso nos lleva a una vista de todos nuestros álbumes, donde elegimos uno o creamos uno nuevo si es nuestra deseo.


Como el icono es una imagen que va a pertenecer a un blog, mi recomendación es ubicar la imagen en el álbum de ese blog, pero esto es a gusto del consumidor.
Seguimos los pasos que nos indican y ya tendremos la imagen de nuestro icono subida.
En la siguiente captura podéis ver la imagen de mi icono en el álbum correspondiente junto a las otras imágenes de este blog.



Sigue aquí >>>

Cómo eliminar la molesta 'Advertencia de seguridad' en IE8

| domingo, 16 de enero de 2011
Si navegas con Internet Explore 8, casi seguro que habrás visto una advertencia de seguridad que dice:
¿Desea ver el contenido de la página web que se entregó de forma segura?
Esta página web contiene contenido que no será proporcionado usando una conexión HTTPS segura, que puede comprometer la seguridad de toda la página web.
Podéis verlo en la siguiente imagen.


Esta advertencia aparece cuando se va a abrir una página cifrada (se distingue porque su dirección comienza por HTTPS) y en cuya página se encuentran elementos que no están cifrados, por ejemplo imágenes.
Un ejemplo típico se produce cuando vamos a hacer algún comentario en los blogs.

Leyendo la advertencia se supone que tienes que clicar 'sí' si quieres ver bien la página completa. Bueno, pues no, no es eso lo que hay que hacer sino todo lo contrario. Le dices que 'no' y entonces sí que verás bien la página.
¿Lo entiende alguien? Seguramente no. Cosas de Microsoft, qué le vamos a hacer.

Como imagino que esto tiene harto a más de uno, vamos a aprender a quitar esa advertencia:

En Internet Explorer, vamos a Herramientas > Opciones de Internet


Elegimos la pestaña Seguridad > Internet > Nivel personalizado


Ahí buscamos el apartado de Miscelánea, que está hacia el final.
Después buscamos Mostrar contenido mixto.
Ponemos el tic en Habilitar.


Le damos a Aceptar a esa pantalla y nos sale esta Advertencia


Le decimos .
Por último aceptamos en la pantalla de Opciones de Internet y eso es todo.

No volverá a aparecer el aviso.

Construyendo un vínculo

| domingo, 13 de diciembre de 2009
Aunque ya lo he explicado en más de un comentario, en este y algún otro blog, bueno será que lo vuelva a explicar aquí. Así será más fácil de encontrar para los que no lo sepan todavía.

En general cuando en un post queremos enlazar un texto o imagen a una página web nueva, solo tenemos que seleccionar ese texto o imagen y darle al botón que todos los editores de blogs incluyen en su escritorio. Eso hace que no nos demos cuenta de lo fácil que es montar un enlace, a no ser que seamos curiosos y estudiemos el código que nos ha introducido el mero hecho de darle a ese botón.

El problema viene cuando queremos o necesitamos vincular algo en un comentario, porque ahí la mayoría de las plantillas dejan de tener esos botones que tanto nos ayudan.

En un post anterior expliqué algunos trucos de texto que bien pueden ser empleados en los comentarios. Así que hoy toca explicar cómo hacer un enlace.

Consiste básicamente en anclar un cosa a otra. Para ello se utiliza la etiqueta de anclaje <a></a>.
Lo que seleccionaremos (imagen o texto) deberá ir encerrado en la etiqueta anterior, es decir entre la etiqueta de inicio <a> y la de cierre </a>.
Eso hará que cuando pasemos el ratón por encima de la parte seleccionada nos salga una indicación de que hay un enlace que al pinchar nos lleva a otra página.
Como aún no hemos puesto adonde queremos que nos lleve el enlace, todavía no nos saldrá la típica mano de vínculo.
Para decirle dónde queremos ir, deberemos darle la dirección de la nueva página, que obtendremos visitando ésta y copiando el enlace que aparece en la barra de direcciones de nuestro explorador web.
Esa dirección tenemos que colocarla dentro del atributo href que acompañará a la etiqueta de anclaje.
La cosa deberá quedar así:
<a href="dirección_de_la_nueva_página">texto o imagen seleccionada</a>


Veamos un ejemplo:

Para oír música moderna visita esta página del amigo Nando.


Todo esto se deberá escribir así:

Para oír música moderna <a href="http://comocantosrodados.blogspot.com/">visita esta página</a> del amigo Nando.



Sugerencia:
Siempre que introduzcamos código en un comentario, es conveniente comprobar que va a funcionar correctamente. Para ello, en lugar de publicar directamente el comentario, haremos una 'vista previa' y una vez comprobado su funcionamiento, procederemos a publicarlo.

Adornando una línea horizontal

| lunes, 5 de octubre de 2009
Como ya adelantábamos en este post, para colocar una línea horizontal en algún lugar del post o página web, sólo es preciso colocar la etiqueta HTML siguiente:
<hr />

El resultado será esta línea que vemos aquí:


A poco que nos fijemos veremos que ocupa todo el ancho del bloque de escritura.
Pero podemos cambiar eso haciendo uso de los atributos o modificadores que acepta esta etiqueta.
Para darle un ancho concreto a esta línea tendremos que especificar ese ancho, mediante el atributo width, bien en píxeles o en porcentaje respecto del ancho total.
El código sería como este:
<hr width="100px" />

o también así:
<hr width="50%" />

Y lo que veríamos son estas dos líneas respectivamente:




Ahora, al ver esto, nos damos cuenta de otra cosa, y es que por defecto las líneas se colocan centradas dentro del post.
Esto también lo podemos cambiar si le añadimos el atributo align.
Si escribimos esto:
<hr align="left" width="50%" />

lo veremos así:


Y a la derecha sería:
<hr align="right" width="50%" />




Ya metidos en harina, ¿por qué no darle un grosor determinado a la línea?
Utilizaremos para ello el atributo size, en píxeles:
<hr size="10px" />

ó <hr size="10" />

Veremos esto:



Ahora, parece que se echa en falta un poco de color.
Pues nada, a por ello con el atributo color, dando los valores en formato hexadecimal, por ejemplo, el rojo sería:
<hr color="#ff0000" size="10px" />

y se verá así:



Notas importantes:

Dependiendo del navegador que usemos los resultados pueden variar ligeramente.

Si nuestra página o blog usa plantilla CSS en la que se haya definido el comportamiento de la etiqueta hr, los resultados no serán los mismos que hemos indicado aquí.

Todos los atributos que hemos explicado anteriormente han quedado anticuados a partir de la versión HTML 4.01, por lo que pudieran quedarse obsoletos y no funcionar en un futuro, aunque por el momento todos los navegadores los interpretan aún por motivos de compatibilidad.



En la actualidad es conveniente, aunque sea un poco más complicado, utilizar la sintaxis de estilos propia de las CSS.
Tomando los mismos ejemplos de arriba, se escribirían así:

En lugar de:
<hr align="left" width="50%" />

pondríamos:
<hr style="width:50%;text-align:left" /> (IExplorer y Opera)

<hr style="width:50%;margin-left:0" /> (Firefox, Chrome y Safari)

Si queremos que lo entiendan todos los navegadores simplemente lo escribimos todo, es decir:
<hr style="width:50%;text-align:left;margin-left:0" />

El resultado es este:



En lugar de:
<hr color="#ff0000" size="10" />

pondremos:
<hr style="height:10px;color:red" /> (IExplorer)

<hr style="height:10px;border-width:0;background-color:red" /> (Firefox, Opera, Chrome y Safari)

Para todos ellos a la vez:
<hr style="height:10px;border-width:0;color:red;background-color:red" />

Y el resultado:


Actualización (25-10-09):
Uno de mis lectores me dice que ha intentado colocar una barra horizontal y no le sale centrada por defecto, como yo decía en el post.
Normalmente esto es debido a que la plantilla tiene algunas opciones predeterminadas para mostrar ciertos elementos.
Cuando eso ocurre la solución más sencilla es añadir el siguiente código (escrito en rojo):
<hr align="center" width="50%" />

o bien:
<center><hr width="50%" /></center>

Dos prácticas herramientas en Internet Explorer 8

| miércoles, 19 de agosto de 2009
Desde hace unos meses los usuarios del navegador por excelencia, mal que les pese a los seguidores de Firefox, "disfrutamos" de una nueva versión: Internet Explorer 8.

Nota: Lo de disfrutar y lo de Firefox quizá lo explique en otra ocasión.

Nada más instalar la nueva versión, lo primero que nos sorprende es que es prácticamente más de lo mismo, es decir que aparte de cambiar algunas cosillas de sitio o de nombre, aparentemente no encontramos nada nuevo.
Sí que han añadido un gestor de proveedores de búsqueda que puede ser útil en determinadas ocasiones, aunque no del todo necesario.
Y el modo de exploración InPrivate, para cuando queremos ver páginas y no nos apetece que los demás sepan qué hemos visto.

Después de un mes desde que lo instalé y enredando mucho, como suelo hacer siempre, me encuentro la verdadera mejora de esta versión respecto de las anteriores. Y esa no es otra que las Herramientas de desarrollo, que está más escondida de lo que debiera.
Con ellas podemos hacer un montón de cosas como validar el HTML de nuestras páginas web, cambiar de tamaño la visualización de las mismas, ver información de cookies, habilitarlas o deshabilitarlas a voluntad, ver informes detallados de todas las imágenes de cualquier página, ver los códigos fuente de toda la página o de partes de ella, etc.
Y todo ello sin que se produzca un cambio real en la página, lo cual es muy interesante para el estudio de las páginas web o blogs (propios y ajenos), antes de tomar la decisión de cambiar algo en ellas.

Pero todo esto no lo tengo aún probado del todo y por ello en este post sólo nos fijaremos en un par de herramientas de fácil manejo y muy útiles.
A saber:
- La regla para medir sobre pantalla
- Y el selector de colores

Para los que tenemos un blog muchas veces nos será de utilidad saber con exactitud las medidas de todas las zonas de la página, para poder introducir imágenes o widgets sin que se nos vayan fuera de marco.
Ya sabemos que esto lo podemos descubrir en la plantilla del blog, pero por no buscarlo a veces lo hacemos a base del método "ensayo-error".
Algo parecido nos ocurre con los colores.

De modo que vamos a ver como sacamos estas herramientas, que bajo mi punto de vista son un método más rápido para conseguir estos datos.

Iniciamos el navegador y nos vamos a una página cualquiera. Usaré El mito de la taberna como ejemplo. Lo vemos en la imagen siguiente:


Una vez en ella vamos a Herramientas > Herramientas de desarrollo:


Enseguida aparecerá una nueva pantalla:


Hay que advertir aquí, que no debemos cerrar el blog puesto que esta segunda pantalla nos está dando los datos que encuentra en él en todo momento.
Para más comodidad podemos anclar esta segunda pantalla a la primera, la del blog, con pulsar en el botón que he señalado en la imagen anterior, quedando entonces una vista como esta:


Una vez aquí vamos a Herramientas > Mostrar la regla, como se ve en la imagen anterior.
Nos aparecerá en la pantalla del blog una nueva pantalla con las opciones de la regla:


- ajustar al eje X/Y > para medir en horizontal o vertical. Si la desmarcamos podremos medir en cualquier dirección.
- ajustar al elemento > hará que la regla se pegue a los bordes del elemento sobre el que medimos, ya sea una imagen o un cajetín de texto, etc.
- ocultar marcas de graduación y extremos no necesitan explicación.
- pulsar Ctrl crea varias reglas a la vez. Si no se pulsa una regla borra la anterior.
- Ctrl+M muestra una pequeña lupa que podemos desplazar con el cursor. Para hacerla desaparecer volvemos a pulsar la misma secuencia.
La regla tiene además la opción de presentarse en los cuatro colores que se seleccionan pinchando sobre los cuadrados situados arriba a la izquierda.
Las medidas nos las da en píxeles y las muestra sobre la regla y también bajo las opciones.
En la imagen siguiente hemos realizado la medición del cajetín que alberga el reloj del blog:


Cerraremos esta herramienta simplemente pulsando la X de cierre y vamos a abrir ahora el selector de color.
Volvemos a Herramientas > Mostrar selector de colores.
Aparecerá otra pantallita con un cuentagotas:


Pinchando en la imagen del cuentagotas y desplazándonos por la pantalla veremos que el color del rectángulo que hay sobre él va adaptándose al color sobre el que nos movemos. Si nos gusta un color determinado del blog y queremos saber cual es solo tenemos que llevar el cuentagotas hasta allí y pinchar sobre la zona. El color quedará grabado en el rectángulo y a su derecha veremos los valores en hexadecimal y en RGB. Además podemos copiar esos valores con el botón que se encuentra bajo ellos.
Como ejemplo, vemos que en este blog el color de fondo del texto de los artículos responde a los valores siguientes:
- hexadecimal #446666
- R:68 G:102 B:102

Bien, todo esto que parece muy complicado se simplifica con los siguientes atajos de teclado:
F12 > abre la pantalla principal de desarrollo
Ctrl+L > abre la regla
Ctrl+K > abre el selector de color

Los últimos comentarios