poner enlaces

nandogarcia · 12 Sep 2013, 19:02 · Solicitar retirada

hola a todos, tengo una duda, os cuento, un amigo tiene una empresa que su producto va dirigido a un perfil de cliente similar al mio, queremos poner sendos enlaces en nuestras respectivas web, pues a los dos nos beneficia, lo que me gustaria saber es como, donde y de que forma hay que poner el enlace para que google lo valore como un buen enlace a la hora de dar categoría a las web, haber si sois tan amables de explicarmelo con claridad, soy un poco borrico con esto
gracias

Doodleo · 13 Sep 2013, 00:29 · Solicitar retirada

Pues con que pongáis un enlace directo a la web y unas cuantas palabras claves en el enlace creo que serviría :)

<a href="http://paginademiamigo.com" alt="-Título de la página web de tu amigo-" title="Accede a la página web de amigo: paginademiamigo.com">Ir a http://paginademiamigo.com</a>

nandogarcia · 13 Sep 2013, 09:33 · Solicitar retirada

gracias por tu respuesta, una duda, el enlace donde pinchen los visitantes puede ser una imagen, gracias de nuevo.

Doodleo · 13 Sep 2013, 16:06 · Solicitar retirada

Sí claro, en vez del texto puedes poner una imagen:

<a href="pagina.com" alt="palabras clave" title="enlace a página"><img src="URL de la imagen" alt="palabras clave" /></a>

nandogarcia · 14 Sep 2013, 08:38 · Solicitar retirada

de nuevo gracias por tu amabildad, estoy empezando a intentar comprender, el intrincado mundo del posicionamiento y la verdad que leo formas y métodos contradictorios, a lo que se añade mi natural torpeza, así que creo que seguiré realizando consultas, pues como te digo estoy un poco despistado.
saludos y ojala me puedas seguir ayudando.

Doodleo · 15 Sep 2013, 16:55 · Solicitar retirada

Jajajaja es normal estar perdido al principio, no te preocupes que aquí estamos todos para ayudarnos [:)]

nandogarcia · 22 Sep 2013, 09:46 · Solicitar retirada

hola de nuevo, ya he pedido ayuda sobre este tema en el foro del curso paso a paso, pero como veo que controlas te lo pido a ti directamente, el caso es que quiero que en las imágenes donde pongo enlaces, al pasar el ratón hagan alguna gracia, sencilla, pero que el visitante vea claramente que es un enlace, lo que quiero es algo sencillito, como que se cree un marco al rededor de la imagen, haber si me puedes ayudar de nuevo te lo agradecería,pues no doy con la menera de hacerlo.
saludos

Doodleo · 22 Sep 2013, 17:22 · Solicitar retirada

Pues lo ideal para que el visitante supiera que es un enlace sería añadirle un cursor diferente al que viene por defecto (y poner el típico de los enlaces), y si quieres podrías añadirle un borde o cambiarle la opacidad con transiciones (esto ya sería más elegante y quedaría mejor :D)

.img-enlace:hover {
  cursor: pointer;
  opacity: 0.5;
  filter: alpha(opacity=50); /* Para que la opacidad funcione en Internet Explorer */
  transition: 1.5s;
  -webkit-transition: 1.5s;
  -moz-transition: 1.5s;
}

Y en las imágenes que quieres aplicar el efecto debes aplicarles la clase img-enlace, por ejemplo:

<img src="url-a-imagen.png" class="img-enlace" />

nandogarcia · 23 Sep 2013, 10:19 · Solicitar retirada

hola y gracias nuevamente, pero chico no se donde poner los códigos que me dices, abusando un poco de tu amabilidad te dejo el bloque donde quiero aplicar el efecto, son los botones de navegación.
TE dejo los codigos haber si me puedes decir como los puedo poner, gracias de nuevo y saludos
<div id="navegacion">

<ul>
<li><a href="..//index.html"><img alt="portada " src="objetos/portada.png" height="45" width="100" /></a></li>
<li><a href="./productos/productos.html"><img alt="productos " src="objetos/produtos.png" height="45" width="100" /></a></li>
<li><a href="./informacion/informacion.html"><img alt="informacion (49K)" src="objetos/informacion.png" height="45" width="100" /></a></li>
<li><a href="./presupuesto/presupuesto.html"><img alt="presupuesto (49K)" src="objetos/presupuesto.png" height="45" width="100" /></a></li>
<li><a href="./ofertas/ofertas.html"><img alt="ofertas " src="objetos/ofertas.png" height="45" width="100" /></a></li>
<li><a href="./carrosdemadera/carrosdemadera.html"><img alt="carros" src="objetos/complementos.png" height="45" width="100" /></a></li>
<li><a href="./galeria/galeria.html"><img alt="galeria" src="objetos/galeria.png" height="45" width="100" /></a></li>
</ul>
</div>

el css
* {text-indent:0px; margin:0px; padding:0px; border:0px;}
p {font-family:Comic Sans, cursive; font-size:1.0em;color:#FFF68F;text-align:justify}
h1 {font-family:Comic Sans, cursive; font-size:1.1em; color:#FFD700; font-weight:bold; text-decoration:none;
text-align:justify;}
h2 {font-family:Comic Sans, cursive;font-size:1.0em; color:#00ff00; text-align:justify}
h3 {font-family:Comic Sans, cursive;font-size:1.0em; color:#00ff00; text-align:justify}
h4 {font-family:Comic Sans, cursive;font-size:1.0em; color:#00ff00; text-align:justify}
body {text-align:center;background-color:black;}

#global {width:1000px; margin:4px auto;}
#cabecera {background-image:url(objetos/fondo.png); height:85px;}
#logotipo { width:290px;float:right;}
#publicidad {font-family:Comic Sans, cursive;font-size:1.5 em;color:#FFD700;text-align:justify; width:518px; float:left; margin-top:5px;}
#navegacion {background-image:url(objetos/fondo.png); height:60px;}
#navegacion li {float:left; list-style:none; margin:0px 20px 20px 0px;}
#navegacion ul { margin-left: 85px }

#contenido {background-image:url(objetos/fondo.png);width:1000px; float:left;}
#contenido p {padding:5px 10px 5px 10px; text-indent:15px;}
#contenido h2 {padding:5px 10px 5px 10px; text-indent:15px;}
#contenido h3 {padding:5px 10px 5px 10px; text-indent:15px;}

#texto {background-image:url(objetos/fondo.png);width:1000px; float:left;}
#texto p {padding:5px 10px 5px 10px; text-indent:15px;}
#texto h2 {padding:5px 10px 5px 10px; text-indent:15px;}
#texto h4 {padding:5px 10px 5px 10px; text-indent:15px;text-align:justify}

#productos {background-image:url(objetos/fondo.png) width:1000px; float:left;}
#productos li {float:left; list-style:none; margin:0px 0px 0px 0px;}
#productos ul { margin-left: 225px }

#menu {background-color:#FFD700; width:150px; float:left; text-align:left; margin-right:30px;}
#menu li {font-family:Comic Sans, cursive; font-size:1.2em;list-style:none; margin:4px 0px 4px 6px;}
#galeria li { cursive;float:left; list-style:none; margin:0px 10px 10px 0px;}
#galeria a {color:black;color:#00ff00;}
#galeria a:active {color:black;color:#00ff00;}
#referencia{font-family:Comic Sans, cursive;font-size:1.5 em;color:#00ff00;text-align:justify; width:800px; float:left; margin-top:10px;}
#pie {background-color:brown;height:65px;}
#pie li {list-style:none; font-size:12px;}
#pieuno {background-color:black; float:left; width:500px;}

#pietres {background-color:black; float:left; width:500px;}
a {font-family:Comic Sans, cursive;font-size:1.2em; color:#00ff00; text-decoration:none ; display: block; }
a:link {}
a:visited {}{ text-decoration:underline; }
a:hover
a:active {}
#pie a {font-family:Comic Sans, cursive;font-size:1.2em; color:#8B2500; text-decoration:none ; }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:#FFF68F ; text-decoration:underline ; }
#pie a:active {color:#FFF68F;}

Doodleo · 23 Sep 2013, 15:07 · Solicitar retirada

En tu CSS añade:

.img-enlace:hover {
  cursor: pointer;
  opacity: 0.5;
  filter: alpha(opacity=50); /* Para que la opacidad funcione en Internet Explorer */
  transition: 1.5s;
  -webkit-transition: 1.5s;
  -moz-transition: 1.5s;
}

que quedaría así:

[COLOR=#333333]* {text-indent:0px; margin:0px; padding:0px; border:0px;}[/COLOR]
[COLOR=#333333]p {font-family:Comic Sans, cursive; font-size:1.0em;color:#FFF68F;text-align:justify}[/COLOR]
[COLOR=#333333]h1 {font-family:Comic Sans, cursive; font-size:1.1em; color:#FFD700; font-weight:bold; text-decoration:none;[/COLOR]
[COLOR=#333333]text-align:justify;}[/COLOR]
[COLOR=#333333]h2 {font-family:Comic Sans, cursive;font-size:1.0em; color:#00ff00; text-align:justify}[/COLOR]
[COLOR=#333333]h3 {font-family:Comic Sans, cursive;font-size:1.0em; color:#00ff00; text-align:justify}[/COLOR]
[COLOR=#333333]h4 {font-family:Comic Sans, cursive;font-size:1.0em; color:#00ff00; text-align:justify}[/COLOR]
[COLOR=#333333]body {text-align:center;background-color:black;}[/COLOR]

[COLOR=#333333]#global {width:1000px; margin:4px auto;}[/COLOR]
[COLOR=#333333]#cabecera {background-image:url(objetos/fondo.png); height:85px;}[/COLOR]
[COLOR=#333333]#logotipo { width:290px;float:right;}[/COLOR]
[COLOR=#333333]#publicidad {font-family:Comic Sans, cursive;font-size:1.5 em;color:#FFD700;text-align:justify; width:518px; float:left; margin-top:5px;}[/COLOR]
[COLOR=#333333]#navegacion {background-image:url(objetos/fondo.png); height:60px;}[/COLOR]
[COLOR=#333333]#navegacion li {float:left; list-style:none; margin:0px 20px 20px 0px;}[/COLOR]
[COLOR=#333333]#navegacion ul { margin-left: 85px }[/COLOR]

[COLOR=#333333]#contenido {background-image:url(objetos/fondo.png);width:1000px; float:left;}[/COLOR]
[COLOR=#333333]#contenido p {padding:5px 10px 5px 10px; text-indent:15px;}[/COLOR]
[COLOR=#333333]#contenido h2 {padding:5px 10px 5px 10px; text-indent:15px;}[/COLOR]
[COLOR=#333333]#contenido h3 {padding:5px 10px 5px 10px; text-indent:15px;}[/COLOR]

[COLOR=#333333]#texto {background-image:url(objetos/fondo.png);width:1000px; float:left;}[/COLOR]
[COLOR=#333333]#texto p {padding:5px 10px 5px 10px; text-indent:15px;}[/COLOR]
[COLOR=#333333]#texto h2 {padding:5px 10px 5px 10px; text-indent:15px;}[/COLOR]
[COLOR=#333333]#texto h4 {padding:5px 10px 5px 10px; text-indent:15px;text-align:justify}[/COLOR]

[COLOR=#333333]#productos {background-image:url(objetos/fondo.png) width:1000px; float:left;}[/COLOR]
[COLOR=#333333]#productos li {float:left; list-style:none; margin:0px 0px 0px 0px;}[/COLOR]
[COLOR=#333333]#productos ul { margin-left: 225px }[/COLOR]

[COLOR=#333333]#menu {background-color:#FFD700; width:150px; float:left; text-align:left; margin-right:30px;}[/COLOR]
[COLOR=#333333]#menu li {font-family:Comic Sans, cursive; font-size:1.2em;list-style:none; margin:4px 0px 4px 6px;}[/COLOR]
[COLOR=#333333]#galeria li { cursive;float:left; list-style:none; margin:0px 10px 10px 0px;}[/COLOR]
[COLOR=#333333]#galeria a {color:black;color:#00ff00;}[/COLOR]
[COLOR=#333333]#galeria a:active {color:black;color:#00ff00;}[/COLOR]
[COLOR=#333333]#referencia{font-family:Comic Sans, cursive;font-size:1.5 em;color:#00ff00;text-align:justify; width:800px; float:left; margin-top:10px;}[/COLOR]
[COLOR=#333333]#pie {background-color:brown;height:65px;}[/COLOR]
[COLOR=#333333]#pie li {list-style:none; font-size:12px;}[/COLOR]
[COLOR=#333333]#pieuno {background-color:black; float:left; width:500px;}[/COLOR]

[COLOR=#333333]#pietres {background-color:black; float:left; width:500px;}[/COLOR]
[COLOR=#333333]a {font-family:Comic Sans, cursive;font-size:1.2em; color:#00ff00; text-decoration:none ; display: block; }[/COLOR]
[COLOR=#333333]a:link {}[/COLOR]
[COLOR=#333333]a:visited {}{ text-decoration:underline; }[/COLOR]
[COLOR=#333333]a:hover [/COLOR]
[COLOR=#333333]a:active {}[/COLOR]
[COLOR=#333333]#pie a {font-family:Comic Sans, cursive;font-size:1.2em; color:#8B2500; text-decoration:none ; }[/COLOR]
[COLOR=#333333]#pie a:link {}[/COLOR]
[COLOR=#333333]#pie a:visited {}[/COLOR]
[COLOR=#333333]#pie a:hover {color:#FFF68F ; text-decoration:underline ; }[/COLOR]
[COLOR=#333333]#pie a:active {color:#FFF68F;}
[/COLOR]
/* Imágenes */
.img-enlace:hover {
  cursor: pointer;
  opacity: 0.5;
  filter: alpha(opacity=50); /* Para que la opacidad funcione en Internet Explorer */
  transition: 1.5s;
  -webkit-transition: 1.5s;
  -moz-transition: 1.5s;
}

Y tu menú de navegación déjalo así:

<div id="navegacion">

<ul>
<li><a href="..//index.html"><img class="img-enlace" alt="portada " src="objetos/portada.png" height="45" width="100" /></a></li>	
<li><a href="./productos/productos.html"><img class="img-enlace" alt="productos " src="objetos/produtos.png" height="45" width="100" /></a></li>
<li><a href="./informacion/informacion.html"><img class="img-enlace" alt="informacion (49K)" src="objetos/informacion.png" height="45" width="100" /></a></li>
<li><a href="./presupuesto/presupuesto.html"><img class="img-enlace" alt="presupuesto (49K)" src="objetos/presupuesto.png" height="45" width="100" /></a></li>
<li><a href="./ofertas/ofertas.html"><img class="img-enlace" alt="ofertas " src="objetos/ofertas.png" height="45" width="100" /></a></li>
<li><a href="./carrosdemadera/carrosdemadera.html"><img class="img-enlace" alt="carros" src="objetos/complementos.png" height="45" width="100" /></a></li>
<li><a href="./galeria/galeria.html"><img class="img-enlace" alt="galeria" src="objetos/galeria.png" height="45" width="100" /></a></li>
</ul>
</div>

nandogarcia · 23 Sep 2013, 19:10 · Solicitar retirada

impresionante, como te lo curras, el efecto me encanta, pero en explorer no funciona, en chrome y en mozilla sale bien, no se si tiene solución, la web que estoy haciendo es www.porchemadera.com, si quieres le hechas un ojo y ves lo que te digo.
gracias

Doodleo · 24 Sep 2013, 15:11 · Solicitar retirada

Por algo IE es una mierda, siempre atrasado xD
Mírate este artículo sobre cómo compatibilizar efectos de CSS3 con IE :) http://www.cristalab.com/tutoriales/como-hacer-css3-compatible-con-…