Archive

Archive for the ‘Tutoriales’ Category

Últimos posts de tu foro en wordpress, blogger, etc..

enero 3, 2010 Deja un comentario

https://i0.wp.com/img693.imageshack.us/img693/1016/foros.png

Hoy os dejo un tutorial que he buscado por cielo, mar y tierra, y que hoy al fin he conseguido. Se trata de poner los últimos post de tu foro phpbb3 en un portal externo ya sea en wordpress, blogger, joomla o cualquiera, ya qu eestá construído en html y se puede exportar fácilmente.

Dificultad: Fácil
Tiempo de Instalación Aprox. 3 Minutos
Compatible con phpBB: 3.0.x

Leer más…

Categorías:Tutoriales

Slideshow de artículos destacados

diciembre 17, 2009 Deja un comentario

Preparativos
Antes de hacer nada, os recomiendo que tengais un dominio web, en mi caso uso tripod, podeis usar los links de mi dominio pero no lo recomiendo. Necesitas descargar este archivo, y subir a tu dominio los archivos “jquery.js” y “s3Slider.js”. Una vez hecho esto, copia los links de la ubicación de esos archivos.

HTML
Ahora empezamos con HTML. En primer lugar decir que todas las imagenes que subas deberán tener el mismo tamaño que especifiques en css más abajo, si no lo haces darán lugar a deformaciones. Y sin más, pega los links de los archivos que deberías haber subido, tal y como está lo rojo sobre /head:

<!– Archivos slideshow –>
<script src=’URL_DONDE_HAS_ALOJADO_EL_PLUGIN_JQUERY.JS’ type=’text/javascript’/>
<script src=’URL_DONDE_HAS_ALOJADO_EL_PLUGIN_S3SLIDER.JS’ type=’text/javascript’/>
<!– Archivos slideshow –>
</head>

Ahora, bajo body, pegamos lo siguiente. el valor 4000 se refiere a los milisegundos entre imagen e imagen.

<body>
<!– Archivos slideshow –>
<script type=’text/javascript’>
$(document).ready(function() {
$(‘#s3slider’).s3Slider({
timeOut: 4000
});
});
</script>
<!– Archivos slideshow –>

El siguiente lo ponemos sobre ]]>. En este hay varias variables que determinarán nuestro slideshow, como la fuente de letra que usará, el tamaño de las imagenes, la posición de la barra descriptiva…así que cambialas a tu gusto, o déjalas como están y tendrás el mismo slideshow que yo.

El siguiente tiene las imagenes de 200×120 y el texto en la parte inferior.

<!– Archivos slideshow –>
#s3slider {
width: 200px; /* mismo ancho que las imagenes */
height: 120px; /* misma altura que las imagenes */
position: relative; /* importante */
overflow: hidden; /* importante */
}#s3sliderContent {
width: 200px; /* mismo ancho que las imagenes */
position: absolute; /* importante */
top: 0; /* importante */
margin-left: 0; /* importante */
}

.s3sliderImage {
float: left; /* importante */
position: relative; /* importante */
display: none; /* importante */
}

.s3sliderImage span {
position: absolute; /* importante */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 200px;
background-color: #000;
filter: alpha(opacity=70); /* opacidad de la caja de texto */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
bottom: 0;

/*
si pones
top: 0; -> la caja de texto se mostrará en la parte superior
si pones
bottom: 0; -> la caja de texto se mostrará en la parte inferior
*/
}

.clear2 {
clear: both;
}
<!– Archivos slideshow –>
]]></b:skin>

Poniendo el Slideshow

Una vez configurado eso, vamos a ponerlo (elementos de página en Blogger, gadget HTML/Java). Para ello, pegamos lo siguiente:

<div id=”s3slider”>
<ul id=”s3sliderContent”>
<li>
<a href=”http://TUENLACE1″><img src=”http://TUIMAGEN1″/></a&gt;
<span>Imagen 1 sobre X temar</span>
</li>
<div/>
</ul>
</div>

¿Veis la parte de <li> hasta </li>? Esa es la parte correspondiente a una imagen y un link más una pequeña descripción. Así que, cuantas más veces pegues esa parte, más imagenes usarás. Recomiendo un máximo de 8 imagenes, para no tener líos.

EJEMPLO:

Yo uso 5, y me queda el código del elemento así:

<div id=”s3slider”>
<ul id=”s3sliderContent”>
<li>
<a href=”http://animally-pensando.blogspot.com/2009/11/card-sagas-wars.html”><img src=”http://img690.imageshack.us/img690/8950/41109.gif”/></a&gt;
<span>Ahruon y Orkimides, son los…</span>
</li>
<li>
<a href=”http://animally-pensando.blogspot.com/2009/11/en-esta-generacion2.html”><img src=”http://img690.imageshack.us/img690/1953/21109.gif”/></a&gt;
<span>Y bueno, todavía quedaron c…</span>

</li>
<li>
<a href=”http://animally-pensando.blogspot.com/2009/10/tanda-de-videos-24-malas-elecciones.html”><img src=”http://img11.imageshack.us/img11/6619/241009.gif”/></a&gt;
<span>Lo que parece bueno muchas…</span>

</li>
<li>
<a href=”http://animally-pensando.blogspot.com/2009/10/megaman-9-analisis-e-impresiones.html”><img src=”http://img687.imageshack.us/img687/7881/211009.gif”/></a&gt;
<span>Por hablar de algo, hoy os…</span>
</li>
<li>
<a href=”http://animally-pensando.blogspot.com/2009/10/jueguiles-gratuiles-ii-runman-el-sonic.html”><img src=”http://img23.imageshack.us/img23/147/41009.gif”/></a&gt;
<span>Para que luego digan que lo…</span>
</li>
<div/>
</div></ul></div>

Vía (C&P): Animally’s Blog

Categorías:Tutoriales

Enlaces en CSS (Guía para Novatos)

noviembre 13, 2009 Deja un comentario

Los enlaces en CSS

Ya puedes aplicar lo que aprendiste en las lecciones anteriores a los enlaces (es decir, cambiar colores, fuentes, subrayado, etc.). La novedad respecto a los enlaces es que CSS te permite definir estas propiedades de forma diferente dependiendo del estado del mismo, es decir, si el enlace se ha visitado, no se ha visitado, si es el enlace activo o si el cursor está sobre dicho enlace. Esto permite añadir efectos divertidos y útiles a tu sitio web. Para controlar estos efectos se usan lo que se ha denominado como pseudo-clases.

¿Qué es una pseudo-clase?

Una pseudo-clase te permite tener en cuenta diferentes condiciones o eventos al definir una propiedad para una etiqueta HTML.

Veamos un ejemplo. Como ya sabes, los enlaces se especifican en HTML con la etiqueta <a>. Por lo tanto, podemos usar a como selector en CSS:


a {
	color: blue;
}

Todo enlace tiene diferentes estados. Por ejemplo, visitado o no visitado. Puedes usar una pseudo-clase para asignar diferentes estilos a los enlaces visitados y no visitados.


a:link {
	color: blue;
}

a:visited {
	color: red;
}

Usa a:link y a:visited para enlaces visitados y no visitados, respectivamente. A los enlaces activos se les aplica la pseudo-clase a:active, y a:hover cuando el cursor se coloca o pasa sobre el enlace.

Vamos a repasar ahora cada una de las cuatro pseudo-clases con ejemplos y más explicaciones.

Pseudo-clase a:link

La pseudo clase :link se usa para enlaces que dirigen a páginas que el usuario no ha visitado.

En el ejemplo de código que sigue, los enlaces no visitados tendrán un color azul claro.


a:link {
	color: #6699CC;
}

Pseudo-clase a:visited

La pseudo clase :visited se usa para enlaces que dirigen a páginas que el usuario ya ha visitado. Por ejemplo, el código siguiente hará que todos los enlaces visitados sean de color púrpura oscuro:


a:visited {
	color: #660099;
}

Pseudo-clase a:active:

La pseudo clase :active se usa para enlaces que están activos.

El código de este ejemplo hace que el color de fondo para los enlaces activos sea amarillo:


a:active {
	background-color: #FFFF00;
}

Pseudo-clase a:hover

La pseudo clase a:hover se usa cuando el puntero del ratón pasa por encima de un enlace.

Esta pseudo-clase se puede usar para crear efectos interesantes. Por ejemplo, si queremos que nuestros enlaces sean de color naranja y estén en cursiva cuando el cursor pase sobre ellos, el código CSS que utilizaremos será el siguiente:


a:hover {
	color: orange;
	font-style: italic;
}

Ejemplo 1: Efecto cuando el cursor está encima de un enlace

Es bastante popular crear diferentes efectos cuando el cursor está encima de un enlace. Por lo tanto, examinaremos unos cuantos ejemplos más relacionados con la pseudo-clase :hover.

Example 1a: Espaciado entre letras

Como recordarás de la lección 5, el espaciado entre los caracteres se puede ajustar usando la propiedad letter-spacing. Esta propiedad se puede aplicar a los enlaces para crear un efecto especial:


a:hover {
	letter-spacing: 10px;
	font-weight:bold;
	color:red;
}

Ejemplo 1b: MAYÚSCULAS y minúsculas

En la lección 5 examinamos la propiedad text-transform, que sirve para intercambiar entre letras en mayúscula y minúscula. Esto se puede usar también para crear un determinado efecto en los enlaces:


a:hover {
	text-transform: uppercase;
	font-weight:bold;
	color:blue;
	background-color:yellow;
}

Estos dos ejemplos dan una idea sobre las posibilidades casi infinitas al combinar diferentes propiedades. Ya puedes ir creando tus propios efectos… ¡inténtalo!

Ejemplo 2: Quitar el subrayado de los enlaces

Una pregunta muy recurrente es: ¿cómo quito el subrayado de los enlaces?

Deberías considerar cuidadosamente la necesidad de quitar el subrayado, pues esto podría disminuir la usabilidad de tu sitio web de forma significativa. La gente está acostumbrada al subrayado azul de los enlaces en las páginas web y saben que pueden hacer clic en ellos. ¡Incluso mi abuelita lo sabe! Si cambias el subrayado y el color de los enalces, existe una buena posibilidad de que los usuarios se confundan y, por lo tanto, no saquen todo el provecho al contenido de tu sitio web.

Dicho esto, es muy sencillo quitar el subrayado de los enlaces. Como recordarás de la lección 5, la propiedad text-decoration se puede usar para determinar si el texto aparece subrayado o no. Para quitar el subrayado, establece el valor de text-decoration a none.


a {
	text-decoration:none;
}

De forma alternativa, puedes establecer la propiedad text-decoration junto con otras propiedades para las cuatro pseudo clases.


a:link {
	color: blue;
	text-decoration:none;
}

a:visited {
	color: purple;
	text-decoration:none;
}

a:active {
	background-color: yellow;
	text-decoration:none;
}

a:hover {
	color:red;
	text-decoration:none;
}

 

[+] Extraído de HTML.net

Categorías:Tutoriales

Mejorar fotos en 5 pasos.. con photoshop

octubre 22, 2009 Deja un comentario

Abre el Photoshop y Sigue estos Pasos

Verás que es muy sencillo. Sólo tienes que realizar los siguientes pasos:

  • Imagen > Ajustes > Niveles automáticos… O dicho de otra manera, comencemos realizando un ajuste de niveles sobre la foto que vamos a trabajar. Si eres de los que odian los ajustes automáticos, te toca hacerlo a mano.
  • Capa > Duplicar capa… Asegúrate de que tienes abierta la paleta de capas (tecla rápida F7) y que está activada la capa superior
  • Imagen > Ajustes > Equalizar Verás que se incrementa el contraste de una manera un tanto brusca. Tranquilo: no hemos acabado
  • Modo de fusión Luz Suave Con la capa superior seleccionada, vamos a cambiar el modo de fusión de capa a luz suave. Ya casi lo tenemos
  • Ajusta la opacidad de capa Como el efecto conseguido probablemente será demasiado intenso, reduce el nivel de opacidad a tu gusto. Un nivel entre un 30 y un 40% ofrece grandes resultados

El Antes y el Después

Esto es lo que puedes conseguir si lo pruebas. El antes…

antes

Y el después…

despues

Categorías:Tutoriales

30 tutos para hacer bordes y frames “ósoms”

octubre 21, 2009 Deja un comentario
Categorías:Tutoriales

¿Cómo introducir las cookies premium de megaupload?

abril 20, 2009 Deja un comentario

Imagen

Aquí os dejo un tutorial para quien no sepa cómo introducir las cookies premium de megaupload que puedes conseguir en diferentes webs.

Necesario:

1. Firefox 3.0

2. Addon “Add N Edit Cookies”

3. La cookie premium.

Pasos a seguir:

Es importante borrar las cookies de megaupload para en caso de que estemos logueados. Si no sabéis como borrar todas las cookies de megaupload, simplemente podéis cargaros todas las cookies quee tengáis y os quitáis de problemas.

Para ello: Herramientas > Limpiar datos privados > Click en la casilla que dice “Cookies” y Aceptar.

Imagen

Una vez instalada el addon, nos saldrá una pestaña para acceder a ella: Herramientas > Cookie Editor


Imagen

Lo ejecutamos y hacemos click en “ADD”Imagen

Luego nos saldra otra ventanita y será donde pongamos los datos de la cookie que estamos creando.

Imagen

Los datos que se han de poner son:

NAME: user

CONTENT: La cookie que nos hayamos pillado por ahí

HOST: .megaupload.com

PATH: /

SEND FOR: Any type of connection

EXPIRES: New Expiration Dates

SAVE

Y ya tendremos nuestra cookie premium

Ver imagenes baneadas de Imageshack con Firefox

abril 15, 2009 Deja un comentario

Seguro que más de una vez estábamos navegando por algún foro muy popular y nos encontramos el cartelito “gracioso” de Imageshack diciéndonos que ése dominio ha sido baneado para mostrar sus imágenes.

Pues bien, aquí os dejo un tutorial que en 3 cómodos pasos nos saltaremos la protección. 100% fácil.

Cartelito al que me refiero

3 Simples Pasos:

1º- Abrimos Firefox y en la barra de direcciones escribimos about:config luego,  clicamos Intro(Enter).

2º- En Filtros(Filters) buscamos esta entrada: network.http.sendRefererHeader

3º- Hacemos doble click en esa entrada y cambiamos su valor a 0. Click en Aceptar

¿Fácil no?

Categorías:Tutoriales