Mostrando entradas con la etiqueta Blog.. Mostrar todas las entradas
Mostrando entradas con la etiqueta Blog.. Mostrar todas las entradas

lunes, 13 de septiembre de 2010

Atributo color en html.

El color del texto puede ser definido mediante el atributo color. Cada color es a su vez definido por un número hexadecimal que esta compuesto a su vez de tres partes. Cada una de estas partes representa la contribución del rojo, verde y azul al color en cuestión.

Podéis entender cómo funciona esta numeración y cuáles son los colores que resultan más compatibles a partir de este artículo: Los colores y HTML.

Por otra parte, es posible definir de una manera inmediata algunos de los colores más frecuentemente usados para los que se ha creado un nombre más memotécnico:

NombreColor
Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow


<font color="red">Este texto está en rojo</font>

Que se visualizaría así en una página web.

Este texto está en rojo






En la composición de webs juegan un papel muy importante los colores. Se indican en valores RGB, es decir, que para conseguir un color cualquiera mezclaremos cantidades de Rojo, Verde y Azul. 
    Los valores RBG se indican en numeración hexadecimal, en base 16. (Los dígito pueden crecer hasta 16. Como no hay tantos dígitos numéricos se utilizan las letras de la A a la F. 


0=04=48=8C=12
1=15=59=9D=13
2=26=6A=10E=14
3=37=7B=11F=15

    Para conseguir un color, mezclaremos valores de esta manera:


RRGGBB
Donde cada valor puede crecer desde 00 hasta FF.

Ejemplo: Cómo se cambiaría la fuente para escribir en rojo: 
<font color="#FF0000">Rojo</font>

Al Atributo color le damos un valor RGB en formato hexadecimal. El caracter # se coloca al principio de la cadena. 

Otros colores:
Naranja#FF8000
Verde turquesa#339966
Azul oscuro#000080


Colores compatibles en todos los sistemas

Como las páginas web las tienen que ver todos los usuarios, y los sistemas que utilizan para entrar son distintos, hay que utilizar colores compatibles con la paleta de todos ellos. 
    La forma de conseguir esto es limitando nuestros colores alos que se pueden conseguir utilizando la siguiente norma: 





Utilizaremos siempre
estos valores:
00
33
66
99
CC
FF

Ejemplos: #3366FF #FF9900 #666666 

domingo, 29 de agosto de 2010

Menú de categorías basado en etiquetas.

Lo primero que necesitamos es tener etiquetadas las entradas, es decir, asignarles una catagoría a cada una según el tema del que hable o la información que contenga. Por ejemplo, una entrada que contengas videos podemos ponerle la etiqueta Videos.

Para hacerlo tenemos que editar las entradas yendo a Creación de entradas | Editar entradas | Editar
Ahí veremos en la parte de abajo un espacio en blanco, ahí escribimos la etiqueta que le corresponde, en nuestro ejemplo se llamará Videos.

etiquetas blogger


Si quisieras que la entrada tenga más de una etiqueta sólo agrega una coma y después agrega la otra etiqueta, por ejemplo Videos, Música
Hacemos lo mismo para todas las entradas tanto las ya publicadas como las nuevas que publiquemos.

Ahora vamos a Diseño | Elementos de la página | Añadir un gadget y seleccionamos el gadget que se llama Etiquetas y guardamos los cambios.


El siguiente paso es elegir un menú que nos guste. De entre todos los posibles en cssmenumaker tienes varias opciones para elegir. No precisa registro y es rápido.


Tras seleccionar una plantilla, das click en CUSTOMIZE:


Y a continuación vas añadiendo cuantas pestañas desees:




En el título debes escribir el nombre que quieras que aparezca en tu pestaña y para rellenar el espacio LINK sigue estos pasos:
1. Selecciona una de tus etiquetas.
2. Te aparecerá en la barra del navegador la dirección que debes pegar en LINK.




3. Así sucesivamente cuantas pestañas desees.


Por último le das a descargar y te bajarás el archivo donde va el código que debes insertar.
Puedes insertarlo directamente en la plantilla HTML de tu página pero para evitar errores y problemas puedes crear un gadget en la plantilla de tu blog copiando únicamente la parte que ves sombreada:




El resultado es éste:



Capturar pantalla en pc, linux y mac.

Captura de pantalla completa:

PC bajo Windows.

Para capturar la pantalla completa, tan sólo presiona la tecla "Impr Pant" o "Print" o también "Scrn" (situada al lado de la tecla "F12"). Luego, para pegarla en un documento, presiona las teclas "Ctrl + V" o haz clic con el botón derecho del ratón y selecciona "Pegar".



En mac.
Para hacer una captura de toda la pantalla, tan sólo presiona simultáneamente las teclas MANZANA + MAYUSCULA + 3. La tecla manzana es CMD en las últimas versiones de mac.




Capturar parte de una ventana:


En PC bajo windows:
Para capturar únicamente una ventana que aparece en la pantalla, simplemente haz clic sobre la ventana que deseas capturar y presionar simultaneamente las teclas (Alt + Impr Pant). Para pegarla dentro de un documento, presiona las teclas (Ctrl + V) o haz clic con el botón derecho del ratón y selecciona "Pegar". 
Una vez realizada la captura de pantalla, es posible guardarla en el formato que más nos convenga: jpg,  gif, png, bmp……


En PC bajo Linux:
En ciertos sistemas Linux, es necesario utilizar una herramienta como XV (generalmente incluida en todas las distribuciones) para hacer una copia de pantalla completa o de una ventana en particular. 

Por ejemplo, con XV (v3.10a), para hacer una copia de pantalla completa, debes:


  • Hacer clic en el botón "grab"
  • Seleccionar ocultar la ventana xv (hide XV windows), hacer clic en OK
  • Hacer clic con el botón izquierdo sobre una parte de la pantalla que no sea una ventana.





En Mac:
Para capturar únicamente una parte de la pantalla, sólo tienes que hacer clic sobre la parte que deseas capturar. Evidentemente, si ninguna ventana está abierta en la pantalla principal, esto no funciona. Por lo tanto debes hacer clic dentro de una ventana abierta y presionar las teclas MANZANA + MAYUSCULA + 4. A partir de ese  momento se abre el cursor y puedes seleccionar la parte de la ventana que quieres copiar. Tras arrastrar el cursor y soltarlo, la imagen se graba automáticamente en tu escritorio, pudiendo utilizarla a partir de ese momento.
La tecla manzana es CMD en las últimas versiones de ordenadores mac.



Insertar encuesta en un post.

¿Quieres insertar una encuesta dentro de un post? Para hacer esto existen webs como 99 poolls que nos prestan el servicio de crear encuestas para luego añadir un codigo HTML dentro de nuestro post individualmente.

En el enlace anterior puedes acceder directamente a la página y tras un breve registro puedes realizar tu encuesta tras seguir unos breves pasos.












Ejemplo:


Y así de sencillo.

martes, 24 de agosto de 2010

Insertar nuestro blog en google.

Hoy, en resolución a una de las peticiones que he recibido mostraré como podemos conseguir que nuestra web aparezca en google. En otra ocasión mostraré como hacerlo en otros buscadores, pero creo que el más importante es google, ya que sobretodo los blogs de lenguas hispanas, conseguimos prácticamente el 90% de las visitas provinientes de buscadores desde google.Conseguir que salga en google una web no es una tarea fácil ni inmediata, tras ver muchos casos aproximadamente el tiempo medio de inclusión oscila entre una y dos semanas aproximadamente.
Los pasos que recomiendo a seguir son los siguientes:
1. Introducir nuestra web en esta dirección. Es importante no enviar nuestradirección varias veces y no caer en la desesperación.
2. Registrarnos y activar nuestra web en google webmasters. Seguiremos los siguientes pasos:
a. Vamos a google webmastershttp://www.google.com/webmasters.
b. Seleccionamos la opción “Herramientas para webmasters (incluido sitemaps)”.
c. Una vez hecho esto, en la parte superior de la plantilla buscaremos el sitio en el cual agregar nuestra dirección (por ejemplo http://www.tudominio.com, o en el caso de utilizar un blog de blogger, tublog.blogspot.com) y pulsamos “Añadir sitio”.
d. A continuación nos aparecerá la ventana principal de lo que es el servicio googlewebmasters, y buscaremos el vínculo “Verifique su sitio web”. A continuación nos pedirá un método de verificación. En mi caso yo explicaré la secuencia para hacerlo con un blog de blogger.
e. Como modo de verificación elegimos “Añadir una metaetiqueta”, y a continuación nos aparecerá una línea de código, que debemos copiar.
f. A continuación regresaremos a nuestro panel de blogger, seleccionaremos la pestaña diseño, y la subpestaña “Edición de HTML”, buscamos en código <head> y justo después pegamos la metaetiqueta que acabamos de copiar de googlewebmasters.
g. A continuación volvemos a google webmasters, y pulsamos “verificar”, y si hemos hecho bien los pasos anteriores tendríamos que tener verificado nuestrositio (nos acredita como propietarios del sitio).
h. Una vez verificado el sitio haremos otra de las acciones que nos ayudará quegoogle rastree mejor nuestro blog y los resultados sean los que queremos en las búsquedas. Esto será añadir un sitemap. En el caso de blogger resulta muy sencillo ya que el propio blogger define uno. Nos iremos a la opción del menú “Sitemaps” y añadiremos los siguientes sitemaps:
http://tusitio.blogspot.com/atom.xml
http://tusitio.blogspot.com/
atom.xml?redirect=false&start-index=1&max-results=500
i. Una vez hecho esto ya hemos hecho todo lo que está en nuestras manos para que google detecte lo más rápidamente posible. Ahora, solo nos queda seguir escribiendo e ir periódicamente a Google y hacer la siguiente búsqueda:
site:http://nuestrositio.blogspot.com
Cuando google indexe nuestra página nos saldrá las entradas que haya guardado en él. Suerte a todos, y ánimo que el principio es lo más duro.

Contador de visitas por países.

99counters es un contador de visitantes gratuito y súper fácil de colocar. Una de las ventajas es que te dice en tiempo real de qué paises te están visitando, además tiene dos módulos más que indican las visitas de hoy y las totales. El contador está hecho en flash por lo que el diseño es más llamativo; puedes escoger entre varios colores y tamaños de diseño. Lo único que tienes que hacer es ingresar a 99counters y registrarte (te toma 10 segundos). Ahora escoge el tema, ponle un nombre al contador, escribe desde qué número de visitantes debe empezar, selecciona si quieres que las estadísticas sean públicas o privadas y click en Guardar. Ahora sólo copia el código que dice Javascript fijada y pégalo en un elemento HTML/Javascript de tu blog (ver cómo insertar elementos)

Si quieres un diseño personalizado da click en Mis temas y personaliza tu contador, puedes cambiar desde el color de fondo hasta el color del mundo. Espero que les sirva, saludos.




Insertar contador de visitas.

Una de las cosas que nos gusta a todos los bloggers, es tener un recuento de las personas que visitan nuestro blog. Presentaré en dos ediciones este contenido. En el post de hoy explicaré algunas de las maneras de obtener un contador para nuestra web en castellano y como insertarlo en nuestra web y blog. Mañana explicaré los diferentes servicios de estadísticas globales de la web con diferentes servicios.

Para utilizar un contador hemos de buscar alguna página externa que nos suministre el código HTML y posteriormente registrarlo en nuestro blog.
A continuación mostraré diferentes servicios que no son más que ejemplos de formas de crear un contador web en internet.

1. contadorweb.net – Es muy sencillo, el registro es muy rápido y los modelos son limitados, pero en apenas dos minutos podemos tener el código HTML para insertar en nuestra web / blog. He comprobado que funciona correctamente.

2. micontador.es – También muy sencillo y con introducir tu web y tu email, es suficiente para crear el código fuente.

3. contadorweb.com – Servicio muy parecido al ofrecido por el anterior proveedor, también muy sencillo.

4. 24log.es – Parece una empresa más seria que las otras, y permite crear contadores sencillos, y otros para visitas. Requiere registro, y como explicaré mañana permite también seguir estadísticas.

5. http://contadores.miarroba.com/ – Empresa más seria si cabe y que he usado anteriormente. Permite crear también fácilmente contadores sencillos. Require registro y en ocasiones abusa de la publicidad.

He puesto estos 5 ejemplos porque eran los primeros que aparecían al hacer la búsqueda en google, pero realmente los hay cientos, y seguro que muchos son mejores que los que he propuesto aquí como contadores.

Los contadores simples tienen muchos inconvenientes:
1. Solo permiten saber información de las páginas en total vistas, y no de los usuarios recibidos.
2. No permiten saber otros datos como el origen de los usuarios, diferentes países de procedencia…

El resultado de estas páginas será el código fuente HTML.



Para insertar el código fuente han de hacer lo siguiente:
1. Página web propia. Ir al código fuente HTML, y buscar la sección donde desean insertar el código. Una vez allí copia el código y comprueba que funcione. No tendría que traerte mayor problema.
2. Insertar a Windows Live Spaces.

3. Insertar al blog. Como viene siendo habitual, también está todo explicado en un vídeo. Hemos de ir a la pestaña diseño, y en elementos de página añadir nuevo elemento y seleccionamos “HTML/Javascript”, una vez hecho esto ya tendría que funcionar.

domingo, 22 de agosto de 2010

Cambiar plantilla blogger.



Descargar la plantilla.
Hay muchas web donde encontrar platillas gratuitas o pagadas pero la mas conocida y la que tiene mejores plantillas, a mi parecer es http://btemplates.com/ , ahí puedes buscar la plantilla que te guste.
Una vez que escojas una, debes haces clic en su imagen:
Te enviará a la zona de descarga de la plantilla y ahora haces clic en el botón descargar (DownLoad):
cambiar_plantilla_blogger_2.jpg
La guardas en tu disco duro, en tu pc:
cambiar_plantilla_blogger_3.jpg
Buscas la carpeta donde se descargó tu archivo (Probablemente en el escritorio):
cambiar_plantilla_blogger_4.jpg
La descomprimes:
cambiar_plantilla_blogger_5.jpg
Una vez que hayas descomprimido el archivo, te mostrara una carpeta con el nombre de la plantilla “Nombreplantilla” y dentro de esta carpeta hay dos archivos uno con “elNombreDeLaPlantilla.XML” y otro “readme.txt”, listo, ya tienes el archivo de plantilla nueva!!
cambiar_plantilla_blogger_6.jpg

Ahora vamos a Intalar la Plantilla en Blogger:
Entramos a nuestro panel de administración de Blogger, hacemos clic en la sección “Diseño” del blog al cual le queremos cambiar la plantilla:
cambiar_plantilla_blogger_7.jpg
Ahora estamos dentro del panel de administración de nuestro blog, hacemos clic en “Edicion de HTML“, aquí puedes ver el código fuente de la plantilla que tienes en este momento, pero lo que queremos es cambiar esa por una nueva.
cambiar_plantilla_blogger_8.jpg
Ya, ahora hacemos clic en el botón “Examinar“, te aparece una venta de navegación:
cambiar_plantilla_blogger_9.jpg
Aquí buscas tu archivo que ya habíamos descomprimido “elNombreDeLaPlantilla.XML”, lo seleccionas y le das “Abrir“.
cambiar_plantilla_blogger_10.jpg
Listo si todo ha salido bien, el área de texto que está al lado del botón examinar, debiera tener la dirección del archivo que esta en tu computador (”X:\carpeta…\plantilla.xml”), Ahora solo falta hacer clic en el botón “Subir“. Listo, puede que ya con este paso lo hayas logrado, o te aparezca un mensaje, como veremos a continuación.
cambiar_plantilla_blogger_11.jpg
Notas de Error al momento de cambiar la plantilla por una nueva:
Es usual que una plantilla sea diferente de otra que estamos subiendo, por eso cada vez que queremos cambiarla (si ya teníamos una plantilla mas compleja), al momento de hacer clic en el boton “Subir“, sale un mensaje:

/*

Están a punto de suprimirse los artilugios

Por favor, confirma que los siguientes artilugios deben borrarse. Se borrará toda la información de configuración de los artilugios.
  • Feed1
  • Profile1
  • BloggerButton1
  • o mas o menos esto, algunas mas que otras
*/
Esto es porque nuestra plantilla antigua tenia otras secciones (o quizás las mismas secciones pero con nombres distintos) que no tiene la plantilla nueva.
Si quieren conservar y utilizar los mismos elementos de página que tenían en la plantilla antigua, entonces simplemente tienen que hacer lo que aparece en este post:
Como cambiar la plantilla sin perder nada de las columnas
También pueden guardar la plantilla antigua antes de hacer cualquier cambio, para después volver a subirla:
Para esto simplemente hacemos clic en Descargar plantilla completa
cambiar_plantilla_blogger_11b.JPG
Ahora una vez que ya hemos descargado nuestra plantilla antigua en el PC, podemos hacer clic en botón “Confirmar y Guardar“, para subir la plantilla nueva. Se perderan algunas cosas, que hemos personalizado anteriormente. (A menos que hayas utilizado el post para conservar al menos los elementos de paginas de la columnas) que mencionamos anteriormente.
cambiar_plantilla_blogger_12.jpg
Listo, si la plantilla esta bien instalada, al abrir nuevamente la pagina de nuestro blog veremos los cambios.
cambiar_plantilla_blogger_13.jpg