BlogBlogs.Com.Br Re-cursos web: 2008

martes, 23 de diciembre de 2008

Poner titulos en las imagenes

Ves esta imagen y que al pasar el mouse por encima no ocurre absolutamente nada. Pues hoy os voy a enseñar como hacer una imagen con un enlace que cuando pases el mouse por encima despliegue una descripción. Muy practico para tus banners o para las miniaturas de una galería de fotos o las que sirven para acceder a diferentes secciones de la web. Puedes hacer que aparezca un pequeño texto descriptivo de la imagen. No me refiero al
alt text
que se usa en
html
cuando no aparece, tiene el enlace roto o tarda en cargar. Me refiero a, viendo perfectamente la imagen que se despliegue un pequeño letrerito con el texto que quieras. Pasando el ratón sobre la imagen siguiente veras lo que sucede:
los3dpm
El código para estos es bien fácil. Es la etiqueta html tipica usada para las imagenes img src="direcciòn la imagen"/> solo que le añadiremos la etiqueta title="tu mensaje". Tambien contiene un alt para el caso de que la imagen no sea visible por cualquier razón.
Para finalizar más bien para empezar un enlace a un sitio web con a href="direccion del sitio"> con su cierre:

Aqui el ejemplo que funciona en la imagen siguiente:


imagen no disponible

Como veis la imagen tiene un enlace que os lleva a un sitio web y al pasar el ratón por encima parece un letrero con la explicacion (El letrero de marras) que le pongas dentro de title=" " entre las comillas. Leer más...

domingo, 21 de diciembre de 2008

Una lista de musica libre en tu blog

Algo que puedes añadir facilmente sin necesidad de saber programación a tu blog son listas de reproducción de música. Hay muchos sitios donde te ofrecen ese servicio es cogiendo entre los artistas disponibles. Otras te permiten subir la música y luego crear un reproductor para integrar en tu web con unas cuantas lineas de código. El problema al subir música es que esa música muchas veces esta bajo derechos de autor. Mientras tu blog sea para ti y unos amigos puede que ni se molesten, si no es un lugar muy visitado y además no consideran que de alguna manera estas consiguiendo beneficio con él. Puede que simplemente sea por tener publicidad de Ad_sense o alguna otra compañía de las que ofrecen publicidad para tu web y pagan por clic. A pesar de que en tres años hallas ganado 70 céntimos ya es beneficio para los del ASGAE y en su afán recaudador no le hacen feos a nada a lo que poder hincar sus colmillos.
Os voy a contar una forma de poder tener música en vuestra web sin tener que preocuparos por eso. No vais a poder poner temas de los triunfitos ni los últimos éxitos que pegan en las radios y televisiones habituales. Es música libre de derechos bajo una licencia copyleft y que puedes reproducir sin miedo a que te quieran cobrar o multar por violar ningunos derechos.
Hay una página web francesa pero que está en varios idiomas entre ellos el castellano que es una especie de myspace donde gente que tiene bandas o hace música en casa con el ordenador o mezcla de ambas puede subir sus trabajos registrarlos bajo una licencia libre de derechos. Permite escucharla descargarla y compartirla por email.
Aunque no tengas un grupo ni nada puedes crear una cuenta en Jamendo y te dará entre otras opciones crear listas de reproducción tanto para escucharlas en Jamendo como para pegarlas en tu web o blog sin riesgos. En un reproductor bastante agradable a la vista con la portada de los albumes que va cambiando según el artista y contienen horas de música selecta de diferentes estilos. Hay unas ya creadas que de ser de tu agrado las puedes colocar en tu blog con la única condición de poner el enlace a la lista. También podéis elaborar vuestra propia selección de música y crear diferentes listas de diferentes estilos muy practicas para tener música de fondo en bares y locales sin necesidad de pagar derechos de autor ni nada. La música que te guste la puedes descargar y enviarla por email con la opción de compartir. Todas estas cosas las tendré que ir explicando pormenorizadas. Puedes hacer reseñas en el perfil de las bandas y eso les ayuda a estar mejor clasificadas y ser más populares. Puedes hacer donaciones para apoyar a las bandas o artistas que más te gusten a través de Paypal.
Tengo varias de esas listas una de reggae y una variada de electro, electrojazz y cosas parecidas os dejo el código por si lo queréis hacer cómodo lo copiáis lo pegáis y ponéis el código del reproductor flash en vuestro blog en la barra lateral en algún widget de html o en alguna entrada como en este caso. Después de ponerlas no tenéis que preocuparos, las voy actualizando cada cierto tiempo y siempre habrá algo nuevo que escuchar. Preparare nuevas listas de otros estilos y las iré ofreciendo en cuanto tenga alguna con más de 30 temas. Si les ponéis el enlace se agradece. Para finalizar deciros que existe también un ranking de listas de reproducción mas escuchadas comentadas etc. Muy parecido al Myspace de cierta manera.
COPYLEFT" y "TODOS LOS PERJUICIOS RESERVADOS
Li-Chen Wang

Copyleft-revocados todos los derechos (Copyleft-all rights reversed).



Este es el ejemplo podeis probarlo aquí para ver como funciona.

Y el resultado:

Si hay interes puedo ofrecer listas de más estilos mùsicales para sugerencias un comentario aquí o un email a:
mistertruf(arroba)gmail.com
Leer más...

viernes, 19 de diciembre de 2008

Meta_tags


Las meta- tags hoy en día aún siguen siendo importantes a la hora del posicionamiento y de indexar tu web. No te sirve de nada apuntarte en 100 mil buscadores si no tienes las meta-tags correctas para que a la hora de ser visitada e indexada tu web por los robots la pongan en el lugar que le corresponde. Las puedes escribir a mano, la mayoría de los editores de HTML las incrustan en le código html a través de un formulario, de la misma forma existen sitios web donde puedes generar las meta-tags para tu sitio usando también un formulario rellenando los campos de un formulario con los datos que te pide a saber: titulo de la web, autor,tema,descripción, las palabras clave por las que quieras aparecer en las búsquedas separadas por comas,el editor usado,el idioma, cada cuantos días quieres que sea visitada la página por las arañas (bots), distribución si es publica o privada, y que clase de robots quieres que la visiten. esto ultimo también se puede hacer subiendo a la raíz de tu web un archivo llamado robots.txt muy practico en el que le puedes indicar tus preferencias y elegir los robots que quieres que te visiten, cuales no, que tipos de documentos quieres que indexen y cuales no, por ejemplo puedes decir que el googlebot por ejemplo no lea los archivos pdf.Es una lección que queda pendiente. Aquí podéis ver unas meta-tags generadas para este sitio, podéis simplemente copiarlas y cambiar el contenido por los datos de vuestra web o podéis usar alguno de los variados generadores de meta-tags que hay en la red y de los cuales os dejo una lista.
Cubrir los datos en el formulario y cuando lo tengáis todo cubierto decirle generar meta-tags y os aparecerá un código que habéis de copiar y pegar antes de /head en la página principal de vuestra web.

Leer más...

miércoles, 17 de diciembre de 2008

Incluir codigos automaticamente en las entradas de blogger

Esto lo tenia pendiente de explicar desde que lo use en uno de mis blogs para que en todas las entradas apareciera el código de un marco (iframe) con una marquesina que contenía enlaces al foro una web en wordpress, un buscador y una página de música, marco que luego deje de usar cuando añadí al blog una barra de navegación que integraba estos sitios. Es una opción útil por ejemplo para añadir bloques de publicidad en las entradas, enlaces, marquesinas, banners lo que quieras es algo así como la firma en un foro. En este caso lo vamos a utilizar para que en nuestras entradas aparezca automaticamente el código de leer más. Este por si no lo recodáis:

Que es el que nos sirve para que en la página principal del blog aparezca el enlace leer mas en le punto de la entrada que queramos como hemos visto en la anterior.
Has de entrar al panel de control de tu blog y en configuración/formato busca lo que vas a ver en la imagen:



Las plantillas de entrada preformatean el editor de entradas con texto o códigos que aparecerá cada vez que crees una entrada nueva.
Así que pega el código en el cuadro y guarda los cambios. Cuando vallas a crear una nueva entrada ya te aparecerá escrito el código por defecto. Escribe por encima de él tu entrada completa, luego en la vista html de tu editor de entradas corta y pega lo que quieras que se lea a partir del enlace leer más entre la apertura y el cierre de las etiquetas del código famoso.


Se ve como aparece el texto por defecto al crear entrada nueva.



Y de esta forma consigues que cada vez que creas una entrada te aparezca el código de leer más o el que tu quieras según el caso.
Y si quieres seguir leyendo ya sabes......
Esto es una tontería para que lo veáis de forma práctica en funcionamiento. La verdad la entrada ya estaba terminada. Leer más...

Leer mas en tu blogger

Esta clase de cosas vienen explicadas en la ayuda de blogger pero en ingles (por no variar). Como ya me llega con leer códigos HTML, CSS, PHP (que además suelen estar en ingles) y yo que se que más no estoy como para leer demasiado ingles junto, como que se me atraganta. Pues resulta que tenia yo curiosidad por saber el como añadir e las entradas del blog el leer mas para mostrar sólo un extracto de la entrada y el que este interesado que pinche el enlace leer más para leer el contenido de la entrada completo. Al final encontré una explicacion mejor que la de la ayuda de blogger y en castellano en este blog para webmasters.
Lo que voy a contar además lo voy a probar en mi blog y en esta entrada vereis su funcionamiento desde ya.
Se trata como muchas veces de ir al panel de control de tu blog diseño/edición de HTML y atacarle a la plantilla. Localizar unas lineas en el código debajo de las que hay que poner otras que has de copiar y pegar. Termina con un truquillo para no tener que andar poniendo un código algo largo cada vez que quieras añadir el leer más a una entrada de tu blog y que lo haga automaticamente. Cosa que te puede servir para más.
Empecemos ya a devanarnos los sesos.
Primero entrar a tu panel y editar la plantilla, como siempre guarda una copia de seguridad por si pasa algo por lo menos recuperarlo como lo tenias antes de la maniobra fallida. Extiende plantillas de artilugios buscar y encontrar lo siguiente.


Debajo has de pegar esto otro:

Y añadir justo después:

Ahora ya podemos guardar la plantilla pero todavía no sucederá nada. Para marcar el punto donde quieres que se divida la entrada has de usar una etiqueta en la vista HTML del editor de entradas.

Entre span class="fullpost"> y su cierre has de poner la segunda parte del texto. Lo mejor es que primero escribas todo de un tirón en la vista redactar pongas las fotos y lo que quieras, le añadas la etiqueta donde quieres que se deje de leer, copias y pegas todo lo que hay de ahí para abajo (el código que puede incluir imagenes, estilos y otras cosas) entre los cierres.
Ya se que parece un peñazo tener que escribir la dichosa etiqueta de cada vez pero hay una forma de hacerlo automaticamente aprovechando una utilidad de tu blog que te encontraras en configuración. Es lo siguiente que te voy a explicar.
Fuente Blogmundi
Incluir etiqueta leer mas automaticamente


Leer más...

domingo, 14 de diciembre de 2008

Publicidad gratis en internet.

Tener un sitio web no es sólo tener unas imagenes y textos en la red. Normalmente esta creado con alguna intención, dar información sobre eventos, poner en contacto a aficionad@s a algún tema, dará a conocer una asociación, dar algún servicio, gratuito o de pago, promover tu obra o algún producto que quieras vender e incluso tratar de rentabilizarla con publicidad.
Entonces no sirve de nada hacer un sitio web que no sea visible a menos que quieras que sea privado. Si tu sitio es publico y quieres que por alguna razón se difundan tus contenidos.
Hay varias maneras de conseguir que tu página web sea visitada, una la más común y la más buscada es aparecer en los primeros puestos en buscadores. Para eso existen tecnicas de posicionamiento que es una actividad apasionante de la que hablaremos más adelante. Otra forma es hacer una campaña publicitaria de tu sitio web. Puede tratarse simplemente de pegar carteles en fotocopia, flyers pegatinas con algún lema el logo y la dirección de la web, que puedes repartir por tu barrio ciudad y alrededores. Es económico y resulta mejor de lo que te puedas creer, una campaña a nivel nacional o mundial es muy costosa, una a nivel local está al alcance de cualquiera. Además por algún sitio hay que empezar. También puedes promoverte y conseguir visitas por servicios como ZZ visitas en las que a través de un programa navegas las páginas web de otros usuarios registrados al servicio o visitar anuncios para ganar puntos que luego puedes cambiar por visitas a tu web. tiene un sistema de referidos y ganas visitas por ti y por tus referidos.
Otra manera de conseguir visitas sin ser cifras muy espectaculares pero nada despreciables es poner un anuncio en Tablonia.
Tablonia es un servicio de publicidad en la que puedes anunciar cualquier cosa, negocios, cambios. Tiene un enorme directorio con diferentes categorías.
puedes poner anuncios gratuitos o anuncios destacados pagando muy poco. El tener los de pago tiene más ventajas como el autolink que permite que cuando alguien vea tu anuncio sea redireccionado a tu pagina o esta aparezca en una ventana emergente. También aparecerán en los primeros puestos y destacados según el plan de tu elección.
Mantienen tus anuncios durante 3 meses tiempo al cabo del cual expiran, puedes modificarlos ya que tienes un panel de control para ello. Cada cierto tiempo te envían informes sobre tus anuncios y las visitas generadas a tu sitio.
Para crear tu anuncio has de entrar a la página de Tablonia y pinchar el enlace donde dice publica tu anuncio.
aparecerá un formulario que has de rellenar con tus datos y el texto del anuncio, has de escoger una categoría para el anuncio lo más aproximada al contenido de tu web. Puedes subir una imagen para completar el anuncio. Cuando lo hallas registrado con éxito te enviaran un email con el resultado de tu anuncio y el enlace al panel de control de tu anuncio gratuitos puedes tener 4 anuncios diferentes mientras no repitan demasiado lo mismo o sean de lo mismo. los revisan y se guardan el derecho de cambiarlos a otra categoría si piensan que no lo has colocado en la adecuada y a poner el anuncio en varias lo cual te favorece. Cada cierto tiempo te irán llegando los informes de tus anuncios. otra tus anuncios salen muy bien posicionados. Podéis probarlo no perdéis nada y si os convence probar el servicio de pago que es una buena opción para económica para promocionar tu página.

Leer más...

sábado, 13 de diciembre de 2008

Videojuegos para tu blog

Miniclip es una de la muchas y variados sitios web que te ofrece videojuegos on-line o juegos en flash. Algunas incluso te ofrecen la posibilidad de jugar en tiempo real contra otros participantes a la vez que chateas. Algunos de estos sitios te ofrecen codigos para pegar en tu web o blog. Miniclip es uno de estos sitios ya os hablare de otros para que podais poner videojuegos y otros juguetes en flash en vuestros sitios web. Con el codigo que os dan aparecera algo asi como lo que podeis ver debajo de estas letras. Una tabla con la imagen del juego y un enlace al mismo en la web, no permite jugarlo sin salir de tu sitio. Los que te dan en otros sitios si lo permiten.



Games by Miniclip - Table Tennis Tournament
Table Tennis Tournament

Juego de tenis de mesa realisticamente asombroso

Juega a este Juego Gratuito ahora!!

Este es el codigo:

Y este uno jugable:





Leer más...

martes, 9 de diciembre de 2008

Criptografia y seguridad.

Internet permite hacer una gran cantidad de operaciones remotas como transferir archivos y administrar un servidor. Los protocolos que permiten que esto funcione Telnet y los comandos BSD R (rhs, rlogin y rexec) que permiten estas operaciones tienen un pequeño fallo transmiten la información en texto plano en particular el nombre de acceso y la contraseña para acceder a los equipos remotos.Tal es así que cualquier lammer (el que se quiere hacer pasar por hacker y envía cuatro virus que aprendió a hacer en un foro o descubrir claves para entrar en el correo o el sitio web de alguien, hacerle alguna trastada y se dedica a incordiar para demostrar lo que sabe, el hacker es otra cosa un día hablamos de las diferencias) que se encuentre en una red entre el usuario y el equipo puede controlar el trafico usando una herramienta llamada rastreador y puede conseguir el nombre y la contraseña del equipo remoto (si lo hace te ha jodido). Si esa información no tiene suficiente nivel de seguridad puede incluso además de conseguir el acceso a la cuenta aumentar sus privilegios y hacerse administrador de ella. Como la red es algo abierto y es imposible controlar todas las infraestructuras ubicadas entre el usuario y el servidor remoto, la única solución entonces se encuentra en confiar en la seguridad a nivel lógico. El protocolo SSH sirve para eso ya que permite a sus usuarios acceder a un equipo a través de una comunicación cifrada llamada túnel y resuelve ese problema. Desarrollado en 1995 por un finlandés Tatu Ylönen. Es un protocolo que hace posible que un cliente (un usuario o incluso un equipo) abra una sesión interactiva en una máquina remota (servidor) para enviar comandos o archivos a través de un canal seguro. Los datos que circulan entre el cliente y el servidor están cifrados. Hay una autentificación en doble sentido entre el cliente (equipo local) y el servidor. Pero tenia un punto débil que permitia que se pudieran introducir datos en los flujos cifrados por eso en 1997 se propuso la versión 2 (SSH2) que incluye la transferencia por FTP segura SFTP( secure file transfer protocol en castellano protocolo de transferencia de archivos segura). Existe variedad de implementaciones de clientes y servidores para este protocolo, algunas de pago, otras gratuitas y algunas de código abierto. Primero hay que determinar la identidad entre servidor y cliente para establecer el canal seguro. existen otros como TSL 1.0. Se utilizan diferentes lenguajes para encriptar uno de los más comunes el MD5.
Esa es la razón por la que por ejemplo cunado recuperas la clave que se te ha olvidado de cualquier nunca te envían el anterior sino uno nuevo cifrado para que puedas acceder al panel de control donde la cambiaras por una más fácil de recordar para ti pero que no lo sea el que otros puedan adivinarla o dar con ella. otra de las formas es enviarte a un formulario a través de un enlace en un email de confirmación para restablecer la nueva contraseña. El protocolo http también tiene una versión segura el https y de eso os quería hablar ya que he descubierto que en el caso de Gmail existe un canal seguro por https. Si ya estas en tu buzón pon delante de http:// una ese así: https:// y digas al navegador que valla a esa dirección, se recargara tu buzón de correo y parecerá que no ha cambiado nada pero ya estas usando un protocolo más seguro. Lo mejor es que antes de ingresar a tu cuenta cuando estés en la principal de gmail en donde tienes que poner tu nombre de usuario y tu clave para identificarte ya tiene una dirección https lo curioso es que cuando ingresas al correo este tiene una url de protocolo http normal. Pues nada añade la s delante y pulsa intro en el teclado o ir en tu navegador se cargara la cuenta de nuevo como recién identificado se vuelve a cargar tu buzón de correo (no te asustes es lo normal) pero ahora con una url y bajo el protocolo https.
Lo que no entiendo es por que no lo hace directamente, si la página de acceso ya funciona por ese protocolo que luego te lo cambie al http normal y si luego quieres tenerlo por https que es más seguro, seas tu el que tenga que hacerlo, además es que no te lo dicen yo me entere porque me lo comentaron y ahora os lo hago saber. Ya podéis enviar mensajes de correo electrónico de una manera más segura.
Sitios interesantes:
Leer más...

lunes, 8 de diciembre de 2008

Como esquivar los spambots

Es algo que he leido en un foro de ayuda a webmasters bastante bueno. Andaba yo curioseando por ahi cuando me encontre con esto en la sección de scripts. Los spambots son unos bicharracos repugnantes que pululan por la red y son de lo peorcito. Se dedican a buscar direcciones de email para enviarlas a una base de datos para luego enviarnos correo no deseado (spam) ofreciendonos desde alargadores de pene a cigarrillos.
El poner un email de contacto en tu pàgina web es fundamental a la hora de mantener el contacto con tus visitantes o clientes según para que la uses. Pero si pones un enlace al email comùn del tipo mailto los spambots estos se te van a comer crudo. Tienes otras opciones como formularios de contacto, tagboarsds o chat por no hablar de algún tipo de mensajeria instantanea. Pero de todas formas ponerlo nunca esta de más ocupa poco espacio y es un medio fiable de comunicación con tus visitas así que por que prescindir de él por culpa de estos spambots estupidos. Hay un script magico que lo soluciona a la perfección y no cuesta nada integrarlo en tu sitio web.
Se trata de dos lineas de código una es el script en si y la otra el enlace especial anti-bots. El primero lo tienes que poner antes de /head> y el del enlace en el sitio en el que quieras situarlo en tu web.
El script es el siguiente:

esto es lo que teneis que poner en el head de la página y es el script.
lo siguiente es el código del enlace que colocareis en el body(cuerpo) de la web:

FUENTE
Como podéis ver es muy parecido al enlace mailto: común solo que con algunas diferencias donde ves
'email' tienes que poner tu nombre de usuario se por ejemplo es ruperto@gamail.com (es uno falso se nota) entre las comillas donde pone email has de poner ruperto y donde 'gamail.com' el sitio donde tengas tu cuenta de correo: gmail.com, hotmail.com o yahoo.es entre otros muchos.
Y con eso ya no tienes que renunciar a tu enlace al email en la web a la vez que estas protegido de los spambots. Lo que hace el script es decir que lo que esta entre 'email' (nm) y 'gamail' (dm) es la arroba pero eso los spambots no pueden leerlo (son tontos).
Si lo que haces es escribirlo en texto en vez de un enlace a tu email (mailto) procura en vez de poner la arroba hacerlo así por ejemplo: ruperto(arroba)hotamail.com.
Los humanos lo entenderán los robots no (de momento a ver si no parenden).
Y por hoy ahora ya podéis proteger todos los enlaces a vuestro email de forma sencilla.
http://www.alzado.org/articulo.php?id_art=561 Leer más...

martes, 2 de diciembre de 2008

Botonera con imagenes de fondo en css

Se trata de una lista no ordenada de enlaces y su css correspondiente en un archivo vinculado es un ejercicio para webmasters algo veteranos y que ya se han enfrentado antes con hojas de estilo en cascada. En el CSS se indica la imágen que corresponde a cada enlace dependiendo de si es un link visitado o no y la imagen que se muestra cuando pasas el ratón por encima o en diferentes estados. Los estados de los enlaces son normal, vinculo activo cuando pinchas sobre él, vinculo visitado cuando ya es vinculo que has visitado anteriormente y el enlace cuando pasas el ratón por encima. Esos estados en CSS se traducen como: a, a:link, a:visited, a:hover.
Esos atributos dentro del código los encuentras en:

background-image: url()


Entre los paréntesis has de poner el nombre o la url de la imagen con http://
para la imagen que se ha de ver según la acción del ratón: link activo, visitado o al pasar el ratón. En un principio deberían de verse los botones todos en color morado grisáceo que corresponde al enlace inactivo, si es un enlace ya visitado lo veras en azul claro y al pasar el ratón por encima en verde. Pruebalo
EJEMPLO:
Botonera en css
Descarga:



Los atributos de los enlaces son tal como vienen diciendo en el css del ejemplo:

a:link {
color: #000;
text-decoration:none;
font-size: 30px;
font-family: Verdana,Arial,Georgia,sans-
serif;
background-image: url(re_cursos7.gif);
background-repeat: no-repeat;
}

Esto para el link activo text-decotarion: none; indica que el enlace no esta subrayado lo contrario seria underline en vez de none.
Pero para empezar a jugar empecemos por el principio.
Descarga el archivo zip que contienen los documentos HTML, CSS y las imagenes y descomprime dentro encontraras un archivo HTML uno CSS y tres imagenes GIF. Abre los archivos re-cursos_nav.html y re_cursos_nav.css con el block de notas o algún editor de texto sin formato, puedes usar Dreamweaver o Frontpage en Windows, Geany o Bluefish para Linux .
Abre el archivo re-cursos_nav.html con tu navegador (espero que no sea IExplorer) veras la web y podrás navegarla en tu disco duro, veras los cambios al pasar el ratón por encima, etc.
Todo este lío para que empieces a cambiar el archivo del CSS y comience la fiesta de modificar el documento HTML para cambiar su aspecto. Teniendo ya abierto re_cursos_nav.css vamos a cambiar lo que sucede con el link activo y todos los demás:

a:link {
color: #fff;
text-decoration:none;
font-size: 30px;
font-family: Verdana,Arial,Georgia,sans-serif;
background-image: url(re_cursos7.gif);
background-repeat: no-repeat;
}
a:visited {
color: red;
font-size: 30px;
text-decoration:none;
color: red;
font-family: Verdana,Arial,Georgia,sans-serif;
background-image: url(re_cursos1.gif);
background-repeat: no-repeat;
}
a:hover {
color:#000;
text-decoration:none;
background-color: #fff;
font-family: Verdana,Arial,Georgia,sans-serif;
font-size: 31px;
background-image: url(re_cursos5.gif);
background-repeat: no-repeat;
}

Por ejemplo vamos a hacer algo visible como que aparezca una linea por debajo de los enlaces. En a:hover cambiamos text-decoration: none; por text-decoration: underline; y veremos como al pasar el ratón por encima aparece una linea por debajo. El atributo color: corresponde al color de las letras y se lo podéis cambiar también poniendo el nombre del color el código hexadecimal o RGB podéis ver aquí una tabla de colores HTML. Los colores se pueden poner por su nombre en ingles por ejemplo red para el rojo green para el verde y una larga lista de colores que aguantan todos los navegadores, en hexadecimal o su valor RGB.
Vamos por ejemplo a cambiar el color del texto del enlace visitado que tiene como color el blanco (#fff;) deciros que los colores hexagesimales están formados por 6 cifras de 0 a 9, 6 letras o la combinación de ambos como: (# FF0000;) para el rojo. En colores en que los 6 números o letras son el mismo puedes escribir solo la mitad. Por ejemplo para blanco que es #FFFFFF; se usa (#fff;) y para el negro que es (#00000;)se utiliza (#000;) que sirve igual. Vemos que en el enlace visitado tenemos de color el rojo (red) y el enlace al pasar el puntero cambia a negro (#000;). Todo esto sin los paréntesis, ojo. Así escrito:

a:visited {
color: red;
font-size: 30px;
text-decoration:none;
color: red;
font-family: Verdana,Arial,Georgia,sans-serif;
background-image: url(re_cursos1.gif);
background-repeat: no-repeat;
}
a:hover {
color:#000;
text-decoration:none;
background-color: #fff;
font-family: Verdana,Arial,Georgia,sans-serif;
font-size: 31px;
background-image: url(re_cursos5.gif);
background-repeat: no-repeat;
}

Pues hagamos que se al revés cambiamos los atributos de color de uno para el otro:

a:visited {
color: #000;
font-size: 30px;
text-decoration:none;
color: red;
font-family: Verdana,Arial,Georgia,sans-serif;
background-image: url(re_cursos1.gif);
background-repeat: no-repeat;
}
a:hover {
color:red;
text-decoration:none;
background-color: #fff;
font-family: Verdana,Arial,Georgia,sans-serif;
font-size: 31px;
background-image: url(re_cursos5.gif);
background-repeat: no-repeat;
}

De esta forma el enlace visitado se vera en negro y rojo al pasar el ratón por encima. Al revés que en el caso anterior.
Juega con diferentes colores o sus valores.
Si usas (blue)Azul, (cyan) azul claro, (green) verde,(Darkgreen), (gold)dorado, (silver) gris plateado por ejemplo.
Podemos cambiar la imagen que aparece de fondo en cualquier caso como antes vamos a cambiar la imagen del enlace visitado y al pasar el mouse. Como las imagenes tienen el mismo nombre y sólo se diferencian por un numero (1,5,7) lo que habrá que cambiar sera simplemente el numero en el nombre de la imagen.
Ver esto por ejemplo:

a:hover {
color:red;
text-decoration:none;
background-color: #fff;
font-family: Verdana,Arial,Georgia,sans-serif;
font-size: 31px;
background-image: url(re_cursos5.gif);
background-repeat: no-repeat;
}

Así es como se ve en el original. Con la imagen re_cursos5.gif que es el botón verde y lo vamos a cambiar por re_cursos1.gif que es botón azul claro Así:

a:hover {
color:red;
text-decoration:none;
background-color: #fff;
font-family: Verdana,Arial,Georgia,sans-serif;
font-size: 31px;
background-image: url(re_cursos1.gif);
background-repeat: no-repeat;
}

Y al revés en a:visited cambiamos el numero de la imagen por re_cursos5.gif que es el botón verde. Justamente a la inversa.
Antes:

a:visited {
color: #000;
font-size: 30px;
text-decoration:none;
color: red;
font-family: Verdana,Arial,Georgia,sans-serif;
background-image: url(re_cursos1.gif);
background-repeat: no-repeat;
}

.... y después.

a:visited {
color: #000;
font-size: 30px;
text-decoration:none;
color: red;
font-family: Verdana,Arial,Georgia,sans-serif;
background-image: url(re_cursos5.gif);
background-repeat: no-repeat;
}

Podéis jugar con otros atributos como el tipo de fuente (font-family:) estilo de la fuente (font-style: italic;) por ejemplo que pondrá el texto en cursiva podéis probar que el texto se ponga en cursiva al pasar el mouse, o también (font-weight:bold;) para texto en negrita. El tamaño del texto no os recomendaría que lo cambiarais ya que la imagen se ajusta a su tamaño y con tamaño menor de fuente más pequeña se hace la imagen y al revés si hacéis una fuente excesivamente grande se saldrá fuera del botón. Hay una forma de evitar que suceda esto pero ya queda para otra lección. De momento practicar con lo que ya sabéis hasta que lo entendáis a base de prueba error/acierto y ver lo que pasa en el disco duro de vuestro PC antes de subirlo a la web. El código de la lista no ordenada y los enlaces están en el archivo html, en el body se encuentra
la lista la conoceréis por las etiquetas (ul ) y (li) con sus correspondientes cierres. Sobre esto un dato en el CSS hay algo referente a las listas no ordenadas como podréis ver:

ul{list-style-type: none;}

Que quiere decir que no tiene decoración hay variados atributos: square que pone un cuadrado delante de cada elemento de la lista (square;), un circulo (disc), triángulos (triangle). También las hay alfabéticas y numéricas pero en este caso nos viene mejor una lista no ordenada sin decoración y ya le decimos lo que queremos que aparezca delante de cada elemento con css, si queremos una imagen, un color de fondo, etc. Seguro que ya vais adivinando por donde van los tiros, les dedicaremos algún episodio.
Subir la carpeta y los archivos e imagenes a un servidor para pruebas de este tipo usar alguno gratuito. La barra os puede servir para la cabecera de una web metida en una capa (div). En vez de tener la página vinculada a la hoja de estilos podéis incrustar el CSS en el header del HTML antes de entre las etiquetas:
(style type="text/css") y su cierre (/style) sin los paréntesis y con <> y borrando o anulando(link rel="stylesheet" href="re_cursos_nav.css" type="text/css" media="all"/).
Bueno estudiarlo bien y podréis integrar vuestra botonera en cualquier web dentro de una tabla, un marco o una capa al principio del todo del body de la web o si esta en una capa en la posición que le deis. Podéis cambiar las imagenes por una de vuestra creación modificando las que ya vienen con algún editor de imagen tipo Photoshop, El Gimp o Gimpshop (los cuales os recomiendo, es libre, gratis y funciona en cualquier sistema operativo, hay versiones para todos también portables). Crear unas del mismo tamaño o uno adecuado al tamaño de texto que le pongáis a los enlaces y llamarlas de la misma forma o incluso llamarlas como querais y cambiar el atributo de nombre de la imagen de en el CSS: bacgkgroud-image: url(elnombredevuestraimagen.gif); con los paréntesis para encerrar el nombre de la imagen.
Deciros que podeis hacer que los botones en vez de aparecer de forma vertical uno encima de otro podeis alinearlos horizontalmente con lo siguiente:
/*lista no ordenada----------*/
li {float:left;list-style:none;margin: 0px 1px 0px 1px}
ul { margin-left: 180px }

Ver el resultado en el ejemplo:
Barra de navegacion horizontal
Ahora nuestra botonera se ha convertido en una barra de navegación en posición horizontal en vez de una lista vertical indicado por las lineas CSS anteriores. Para que lo entendais (float:left) indica que flote hacia la izquierda, (margin-left:) margen al lado izquierdo, (list-stile:none) que no tiene decoración para que no aparezcan los fatidicos puntos negros si no le indicas eso, margin: son los margenes que guardan las imagenes y funciona en el sentido de las agujas del reloj la primera cifra para el margen superior, la segunda para el derecho, la tercera para el píe de página y la cuarta corresponde con el margen izquierdo . Esto indica unos margenes de 0 desde arriba, 1a la derecha, 0 abajo y 1 por la izquierda. Realmente el que manda es el 1 a la izquierda que es la distancia que mantienen entre ellos. Si los quieres juntitos de todo les pones 0 para todo pero para eso es mejor que lo indiques con una sola cifra así:
li {float:left;list-style:none;margin: 0px}

Si lo haces así:
li {float:left;list-style:none;margin: 0px 1px}

Indicara una de las cifras los margenes de arriba y de abajo y otra los de la derecha y la izquierda. Dependiendo de la precisión que necesiten tus margenes usaras entre una y cuatro cifras expresadas en pixeles y otras unidades. Yo lo he puesto así para tener que explicar todo esto y daros todo este rollo. Eso si deberia de ir incluido en un div o capa para poderle dar otras propiedades como por ejemplo una imagen o un color de fondo para la capa, bordes, etc y poderla situar mejor en su sitio. Este otro rachivo de ejemplo al contrario que el otro que está vinculado a una hoja de estilos en cascada externa al documento HTML, en esta va incrustado en el head del HTML entre las etiquetas style con lo cual sólo teneis que ver el código fuente de la página y copiarlo para poder jugar con ello, comparte las mismas imagenes y con el mismo nombre que las del anterior con el nombre que querais y la extensión htm o html. Para ver el código fuente de cualquier página recuerda en Mozillla control+u y para todos en el menú ver y suele poner algo como ver codigo fuente. Si lo teneis en alguna carpeta de vuestro disco duro podeis guardarlo en esa misma carpeta con el archivo HTML, las imagenes y la hoja de estilos del anterior y listo.
Que largo se ha hecho para el proximo lo hago por fasciculos.
Creo que tenéis deberes suficientes por hoy. Leer más...

lunes, 1 de diciembre de 2008

Como sacar la barra de blogger

Como podéis observar este blog no tiene la barra de blogger como muchos otros y algunas nuevas plantillas que hay por ahí. Pues bien a muchos webmasters nos estropea le diseño la dichosa barrita esa. Hay una opción en le panel de diseño para escoger entre unos cuantos colores y nada más y es muy poco configurable.
Es de agradecer que nos ofrezcan una plataforma de blogs gratuitos libres de publicidad y que podemos usar para colocar nuestros bloques de anuncios de Ad_Sense o nuestra propia publicidad. Es una herramienta bastante versátil pero ultimamente esta teniendo algunos fallos y la gente está emigrando para otras opciones como wordpress para tener el control de sus blogs y no depender de la plataforma donde este se encuentre alojado. En un servidor propio y con base de datos propia.
El caso es que esta bien que pongan su barra de navegación pero much@s preferimos diseñar y ubicar nuestras barras de navegación donde, como y con la apariencia que nos parezca y no tener la barra blogger ahí arriba que queda incluso poco profesional. Existe la opción de añadir un widget con el logo de blogger mucho más discreto y que puedes alojar en un lugar no tan visible de tu blog como es la cabecera de la página. Como signo de cortesia por las herramientas que nos brinda es suficiente y justo para las dos partes. Puedes darle tu identidad al blog y hacer saber que esta alojado en blogger de manera discreta a la vez. bueno si no lo tienes con otro dominio el que la URL diga: blogspot.com ya te delata. Hay casos en los que además de no existir la barra blogger están bajo dominio propio y si no fuera por el logo de blogger no se distinguiría por lo menos a primera vista de un wordpres sobre todo ahora que comparten plantillas.
Todo este rollo para contaros que se puede eliminar esa barra pegando un código en la plantilla. Ve en panel de administración a diseño/Edición de HTML y pega el código de más abajo en la plantilla donde terminan las variantes y comienza el CSS de la plantilla. Guarda la plantilla y mira el resultado la barra ha desaparecido.
Por seguridad copia y pega todo el código de la plantilla en un documento de bloc de notas o cualquier editor de texto sin formato o usa la opción "guardar copia de seguridad de la plantilla por si se fastidia algo volver todo a la normalidad de nuevo.

CÓDIGO PARA SACAR LA NAVBAR DE BLOGGER:
#navbar-iframe {

height: 0px;

visibility: hidden;

display: none;
}

Sencillo verdad???? Leer más...

Recomendaciones anti-spam

Hola

Bienvenidos a esta web para webmasters principiantes y de nivel medio.Esta página esta relacionada con otras que la complementan. Fondos web-Biblioteca de recursos-Trasteando- Trasteatrufa-Yohagoweb-Expertblog-Webgratis-