Tutorial: Cómo dar efecto de fotografías apiladas a tus imágenes con CSS

Bienvenidos a un nuevo tutorial para Blogger, mi categoría favorita para hacer tutoriales (aunque sea la categoría que menos tutoriales tenga jajaja).


El efecto que les traigo ahora es uno muy bonito con CSS, muy fácil de implementar, y realiza una simulación de imágenes apiladas una sobre otras.

¿Que necesitamos?

* Un blog

Dificultad

Fácil

Paso 1:

Bien, primero veamos el efecto que lograremos con este tutorial:

Si te ha gustado ahora vamos a implementarlo.
Lo primero será ir a la plantilla de nuestro blog y buscaremos la siguiente linea:

]]></b:skin>

Y justo arriba de ella pegamos lo siguiente:

.separator {
margin: 20px;
text-align: center;
clear: both;
}
.separator a {
display: table;
position: relative;
z-index: 10;
max-width: 94% !important;
margin: 10px auto !important;
}
.separator img {
display: table-cell;
max-width: 100% !important;
padding: 10px;
background: #fff;
-webkit-box-shadow: 0 1px 5px #999;
-moz-box-shadow: 0 1px 5px #999;
box-shadow: 0 1px 5px #999;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.separator a:before, .separator a:after {
content: "";
display: block;
position: absolute;
top: -5px;
left: 0;
width: 100%;
height: 100%;
background: white;
-webkit-box-shadow: 0 1px 5px #999;
-moz-box-shadow: 0 1px 5px #999;
box-shadow: 0 1px 5px #999;
-webkit-transition: .3s all;
-moz-transition: .3s all;
transition: .3s all;
}
.separator a:before {
z-index: -2;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
transform: rotate(2deg);
}
.separator a:after {
z-index: -3;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.separator a:hover:before, .separator a:hover:after {
top: -2px;
left: 2px;
bottom: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}

Muy bien, ahora guardamos los cambios y listo, ya podemos subir imágenes a nuestro blog y podremos visualizar este bonito efecto.

¡IMPORTANTE!
Para que el efecto sea visible es muy importante dejar tus imagenes con el enlace que Blogger genera por defecto, o bien, encerrar tu imagen tal como se muestra en el siguiente código:

<div class="separator">
<a href="javascript:void();">
<img src="URL_DE_TU_IMAGEN" />
</a></div>

Espero que este bonito efecto con CSS para tu blog te sea de utilidad :)

Fin del tutorial

Ver tutorial completo »

Tutorial: Cómo eliminar StartPage

Start Page (Startpage.com) es una página de inicio que se vanagloria de ser “el motor de búsqueda más confidencial del mundo”.


Aunque justo a la par de tan impresionante leyenda, encontramos un pequeño logotipo que indica “enhanced by Google”… es difícil de creer en su honestidad cuando presentan dos valores completamente distintos en una sola página.

Lo malo de esto es que, una vez que ha llegado a tu ordenador, se adhiere como una garrapata y no se irá por su propia cuenta, hoy te muestro como eliminar StartPage de tu computadora.

¿Que necesitamos?

* AdwCleaner [Descarga Directa]

Dificultad:

Fácil

Paso 1:

StartPage luce así, para que lo identifiques:

Y bien, lo primero será eliminar StartPage de nuestros navegadores:

Eliminar iStartSurf de Google Chrome.

1.- Abre Chrome y haz clic en el botón Menu en la esquina superior derecha del navegador.
2.- Clic en Mostrar configuración avanzada.
3.- Ve al final de la página y haz clic en Restablecer configuración del explorador.
4.- Da clic en Restablecer una vez más. Cierra el navegador.

Eliminar iStartSurf de Firefox.

1.- Abre Firefox.
2.- En la barra de direcciones de Firefox teclea about:support.
3.- En la página que se muestra, haz clic en Reiniciar Firefox.

Eliminar iStarSurf de Internet Explorer

1.- Abre Internet Explorer (en modo Escritorio si usas Internet Explorer 10 u 11).
2.- Da clic en el botón Herramientas, selecciona Opciones de Internet, ve a la pestaña Avanzada.
3.- Selecciona el botón Reset.
4.- Habilita Eliminar configuración personal.
5.- Haz clic en el botón Restablecer.
6.- Cierra y vuelve a abrir Internet Explorer.

Paso 2:

Una vez limpios nuestros navegadores ahora pasamos a la parte de la limpieza de nuestro ordenador.

Tenemos que descargar el software que he dejado en los materiales.
Una vez descargado e instalado, lo abrimos. Nos mostrará una pantalla así:

Pulsa el botón Escanear, y espera a que se realice el proceso, después pulsa el botón Limpiar.

Espera a que se termine de limpiar y sigue las instrucciones, si te pidiera Reiniciar el sistema da clic en aceptar.


Y bueno, espero que esto te sirva para eliminar StartPage.com de los navegadores y te olvides de esa molesta publicidad.

Fin del tutorial

Ver tutorial completo »

Tutorial: Cómo eliminar AVG SafeGuard Toolbar

La barra de herramientas AVG SafeGuard se incluye en la familia de productos de seguridad de AVG Technologies y se distribuye como un programa autónomo. Puede descargar e instalar actualizaciones automáticamente sin informarte por lo que es muy molesto.


En fin AVG SafeGuard toolbar modifica tu página de inicio y tu motor de búsqueda predeterminado para sustituirlos por el motor de búsqueda propio de AVG http://isearch.avg.com
En este tutorial te mostraré como eliminar AVG SafeGuard Toolbar.

¿Que necesitamos?

* Nada

Dificultad:

Fácil

Paso 1:

Así luce este software en los navegadores:

Y llega a tu computadora de la siguiente forma:

Tu mismo le das permiso, eso pasa por hacer el tipico "Next, Next, Next, Finish". Debes tener mucho más cuidado de ahora en adelante al instalar softwares.

Bueno, vamos a lo que venimos:

Eliminar AVG SafeGuard Toolbar con el Panel de Control de Windows

Vamos a utilizar el Panel de control de Windows para desinstalar la página de inicio de AVG, AVG Secure Search y AVG Toolbar:

Windows XP, Vista, 7 y Windows 8

1.- Abre Panel de control.
2.- Haga clic en Desinstalar un programa o Programas y características.
3.- En la lista de aplicaciones, haga doble clic en AVG Security Toolbar o AVG SafeGuard Toolbar. Se iniciará la desinstalación.
5.- Haga clic en Siguiente para finalizar el proceso de desinstalación. Se cerrará la ventana de su navegador. Y listo.

Y con eso basta para desinstalar AVG SafeGuard Toolbar de tu computadora.

Fin del tutorial

Ver tutorial completo »

Tutorial: Cómo eliminar iStartSurf.com de nuestros navegadores

"iStartSurf.com" es considerado un secuestrador de navegadores, que generalmente entra en nuestro ordenadores mediante otro software (Con nuestro permiso, por error).


Una vez alojado en tu computadora modificara la página de inicio y nos obligará a utilizar su motor de búsqueda, llevando este proceso en los tres navegadores más populares internet Explorer, Mozilla Firefox y Google Chrome.

¿Que necesitamos?

* AdwCleaner [Descarga Directa]

Dificultad:

Fácil

Paso 1:

iStartSurf luce así, para que lo identifiques:

Y bien, lo primero será eliminar iStartSurf.com de nuestros navegadores:

Eliminar iStartSurf de Google Chrome.

1.- Abre Chrome y haz clic en el botón Menu en la esquina superior derecha del navegador.
2.- Clic en Mostrar configuración avanzada.
3.- Ve al final de la página y haz clic en Restablecer configuración del explorador.
4.- Da clic en Restablecer una vez más. Cierra el navegador.

Eliminar iStartSurf de Firefox.

1.- Abre Firefox.
2.- En la barra de direcciones de Firefox teclea about:support.
3.- En la página que se muestra, haz clic en Reiniciar Firefox.

Eliminar iStarSurf de Internet Explorer

1.- Abre Internet Explorer (en modo Escritorio si usas Internet Explorer 10 u 11).
2.- Da clic en el botón Herramientas, selecciona Opciones de Internet, ve a la pestaña Programas, luego da clic en Administrar complementos.
3.- En Visualizar, haz clic en Todos los complementos.
4.- Después, da clic en el control Active X o en el complemento que se desea eliminar, y luego en Más Información.
5.- En el cuadro de diálogo Información, damos clic en Eliminar. Si nos piden proporcionar una contraseña de administrador o una confirmación, proporciona la contraseña o la confirmación. Puede que el botón Eliminar no resulte disponible, en este caso puedes pasar directamente a la etapa siguiente.
6.- Cuando termines da clic en Cerrar.

Paso 2:

Una vez limpios nuestros navegadores ahora pasamos a la parte de la limpieza de nuestro ordenador.

Tenemos que descargar el software que he dejado en los materiales.
Una vez descargado e instalado, lo abrimos. Nos mostrará una pantalla así:

Pulsa el botón Escanear, y espera a que se realice el proceso, después pulsa el botón Limpiar.

Espera a que se termine de limpiar y sigue las instrucciones, si te pidiera Reiniciar el sistema da clic en aceptar.


Y bueno, espero que esto te sirva para eliminar iStartSurf.com de los navegadores y te olvides de esa molesta publicidad.

Fin del tutorial

Ver tutorial completo »

Tutorial: Cómo eliminar la publicidad de Discount Dragon

Discount Dragon se presenta como un programa que te permite hacer buenos negocios en Internet gracias a las ofertas que propone.


Pero en realidad se trata de un adware con funcionalidades de spyware y de polluteware. Spyware, porque muestra muchos banners, popups y enlaces publicitarios en función de las páginas que visites. Y polluteware porque es un programa que contamina tus discos duros y la Base de Registros de Windows.
Discount Dragon afecta a los 3 navegadores de Internet principales, es decir, Google Chrome, Mozilla Firefox e Internet Explorer.

Pero hoy te muestro como eliminar la publicidad de Discount Dragon.

¿Que necesitamos?

* AdwCleaner [Descarga Directa]

Dificultad:

Media

Paso 1:

Lo primero será eliminar Discount Dragon de nuestros navegadores:

Eliminar la extensión Discount Dragon en Google Chrome.

1.- Abre Chrome y haz clic en el botón Menu en la esquina superior derecha del navegador.
2.- Da clic en Herramientas y luego Extensiones.
3.- Busca en el listado "Discount Dragon Start" y da clic en el icono de la papelera para deshacerse del programa. Si no encontráis ningún otro programa parecido, continua con los pasos.
4.- Cada vez que se visualice el cuadro de diálogo de confirmación, haz clic en Eliminar.

Eliminar la extensión Discount Dragon en Firefox.

1.- Abre Firefox.
2.- Haz clic en el botón grande y naranja de Firefox en la esquina superior izquierda de vuestro explorador y da clic en Módulos complementarios.
3.- Luego ve a las pestañas "Extensiones y Plugins" para buscar Discount Dragon y todas las extensiones que no se han instalado de manera voluntaria. Elimínalas todas.
4.- Reinicia el explorador.

Eliminar la extensión Discount Dragon en Internet Explorer

1.- Abre Internet Explorer (en modo Escritorio si usas Internet Explorer 10 u 11).
2.- Da clic en el botón Herramientas, selecciona Opciones de Internet, ve a la pestaña Programas, luego da clic en Administrar complementos.
3.- En Visualizar, haz clic en Todos los complementos.
4.- Después, da clic en el control Active X o en el complemento que se desea eliminar, y luego en Más Información.
5.- En el cuadro de diálogo Información, damos clic en Eliminar. Si nos piden proporcionar una contraseña de administrador o una confirmación, proporciona la contraseña o la confirmación. Puede que el botón Eliminar no resulte disponible, en este caso puedes pasar directamente a la etapa siguiente.
6.- Cuando termines da clic en Cerrar.

Paso 2:

Una vez limpios nuestros navegadores ahora pasamos a la parte de la limpieza de nuestro ordenador.

Tenemos que descargar el software que he dejado en los materiales.
Una vez descargado e instalado, lo abrimos. Nos mostrará una pantalla así:

Pulsa el botón Escanear, y espera a que se realice el proceso, después pulsa el botón Limpiar.

Espera a que se termine de limpiar y sigue las instrucciones, si te pidiera Reiniciar el sistema da clic en aceptar.


Y bueno, espero que esto te sirva para eliminar la publicidad de Discount Dragon y otros más.

Fin del tutorial

Ver tutorial completo »

Tutorial: Cómo poner botón "Compartir en WhatsApp" en tu blog

WhatsApp es una de las aplicaciones más populares que existen actualmente para teléfonos móviles, y tomando en cuenta de que gran parte de visitantes entran a tu blog desde su celular no es tan mala idea poner un botón para compartir el contenido por WhatsApp.


Este botón funcionaria de forma similar a los que tenemos habitualmente para compartir los enlaces en Twitter, Facebook, Google+, etc. pero que al pulsarlo desde un móvil, directamente conectaría con WhatsApp para enviar a la persona o grupo que queramos los datos que hayamos programado. Normalmente un título y el enlace de la entrada.

¿Que necesitamos?

* Un blog.

Dificultad:

Media

Paso 1:

Bien pues lo primero que hay que hacer es entrar a la plantilla de nuestro blog y buscar la siguiente linea:

]]></b:skin>

Antes de ella pegar lo siguiente, que son los estilos de nuestro botón:

#btn-whatsapp {
display: none;
}
#btn-whatsapp a {
display: block;
width: 100px;
height: 100px;
overflow: hidden;
margin: 0 auto;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimyk6PdkoRe9x8incp5i8aT8BzVB6JiM4QsU3hh5D5nrwjcALTMMCjn5xYlJZs7dVxB4ZhCMHbj2OAq2oZXhUT036TazPWh1vOkIeN9MX7aU5fwSHMTHU9TwwAEiHfODqupNfd8DuTlTg/s100/WhatsApp+Logo.png);
}

Guardamos los cambios ahora vamos la parte del HTML.

Paso 2:

Ahora busca la siguiente linea en tu plantilla:

</body>

Y justo antes de ella pega lo siguiente:

<script>//<![CDATA[
if(/Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {document.getElementById("btn-whatsapp").style.display="block";}
else {document.getElementById("btn-whatsapp").style.display="none";}
//]]></script>

Guarda cambios y vamos por lo último.

Paso 3:

El siguiente fragmento de código lo podrás pegar en el lugar que más te plazca, sería recomendable colocarlo justo debajo del código de tus demás botones sociales, pero no obligatorio. Así que puedes colocarlo en el lugar que más te convenga:

<div id='btn-whatsapp'><a data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; - &quot; + data:post.url' title='Compartir en WhatsApp' alt='Compartir en WhatsApp'></a></div>

Guarda cambios y listo.

Es obvio que no lo podrás ver desde tu PC o laptop, ya que está configurado para que solo se muestre en dispositivos con los siguientes navegadores: Android, webOS, iPhone, BlackBerry, IEMobile, Opera.

Pero tranquilo, si quieres ver el resultado se verá algo así:

Si este diseño de botón no te gusta aquí te dejo 2 más para que lo cambies, para ellos solo toma la URL de la imagen y ponla en lugar de la URL de color morado en el código del paso 1.

 

Anímate a ponerlo en tu blog, seguro te traerá buenos resultados :)

Fin del tutorial

Ver tutorial completo »

Tutorial: Cómo interpretar los pitidos de error de una Motherboard

Seguramente alguna vez has tenido problemas con el ordenador. Y has tenido que pagar grandes cantidades de dinero para que la reparen. Si ese es el caso entonces esto es para ti.


Hoy te diré como interpretar los pitidos de error de una Motherboar o Placa Madre, que es lo que comúnmente hacen los técnicos para detectar el error y actuar.

¿Que necesitamos?

* Nada

Dificultad:

Fácil

Paso 1:

Bien, pues este es el listado de los sonidos que son emitidos en el arranque por el pequeño altavoz que lleva la motherboard y que nos comunica los posibles problemas de los dispositivos de hardware.

Los he separado por categorías para que les sea más fácil encontrar el relacionado con su problema.

Pitidos genéricos de la placa base

Ningún sonido - Fuente de alimentación defectuosa.
Pitido corto - Todo funcoina correctamente.
Pitido constante - Tensión de la fuente de alimentación incorrecta.
Pitido largo - Error de DRAM (refresco).
1 largo, 1 corto - error de la placa base.
1 largo, 2 cortos - error de la controladora gráfica o de memoria gráfica.
1 corto - Error de la controladora de unidad graficó, también posible error DRAM.
3 cortos - Error de DRAM, el más frecuente.
4 cortos - Error en el componente del reloj.
5 cortos - Error del procesador.
6 cortos - Error de la controladora de teclado (8042), error de Gate-A20.
9 cortos - Error de ROM.

Pitidos especiales en las placas con BIOS Award

1 corto - Normal, ningún error durante el POST.
1 corto, 2 largos - Error gráfico.
1 corto, 3 largos - Error de teclado.
2 cortos - Cualquier error no fatal.

Pitidos especiales en las placas con IBM

1 Breve --------------- Normal, todo bien en el POST.
2 Breves -------------- Error en el POST, indicación en el monitor.
Sonido constante ----- Error en la fuente de alimentación.
1 Largo, 1 breve ----- Error de la placa base.
1 Largo, 2 breves ---- Error gráfico (Mono/CGA).
1 Largo, 3 breves ---- Error gráfico (EGA).
3 Largos -------------- Error de teclado.

Pitidos especiales en las placas con AMI

1 Breve -------------- Error de DRAM de refresco.
2 Breves ------------- Error de paridad.
3 Breves ------------- Error de RAM (64 k Base).
4 Breves ------------- Error de reloj.
5 Breves ------------- Error de procesador.
6 Breves ------------- Error de teclado.
7 Breves ------------- Error de modo virtual.
8 Breves ------------- Error general de memoria gráfica.
9 Breves ------------- Error de sumas de control del ROM-BIOS.
1 Breve, 3 largos --- Error Base/Extended-Memory.
1 Largo, 8 breves --- Test de memoria gráfica incorrecto.

Pitidos especiales en las placas con BIOS Phoenix

No se diferencian entre sonidos largos y cortos pero están formados por secuencias de sonidos.
1, 2 y 3 sonidos ------ Error de CMOS.
1, 1 y 4 --------------- Error de sumas de control de ROM BIOS.
1, 2 Y 1 --------------- Error de reloj.
1, 2 y 2 --------------- Error de inicialización DMA.
1, 2 y 3 --------------- Error de Page Register de DMA.
1, 3 y 1 --------------- Error de RAM de refresco.
1, 3 y 3 --------------- Error de RAM (64 kb).
1, 4 y 2 --------------- Error de paridad, RAM de 64 Kb.
1, 4 y 3 --------------- Error Fail-Safe-Timer (EISA).
1, 4 Y 4 --------------- Error de puerto NMI (EISA).
2, 1 y 1 --------------- Error de RAM 64 Kb.
2, 1 y 4 --------------- Error de RAM (64 Kb).
2, 2 y 1 --------------- Error de RAM (64 Kb).
2, 2 y 4 --------------- Error de RAM (64 Kb).
2, 3 y 1 --------------- Error de RAM (64 Kb).
2, 3 y 4 --------------- Error de RAM (64 Kb).
2, 4 y 1 --------------- Error de RAM (64 Kb).
3, 1 y 1 --------------- Error en la primera controladora DMA.
3, 1 y 2 --------------- Error en la segunda controladora DMA.
3, 1 y 3 --------------- Error en el primer controlador de interrupciones.
3, 1 y 4 --------------- Error en el segundo controlador de interrupciones.
3, 2 y 4 --------------- Error de la controladora de teclado.
3, 3 y 4 --------------- Error de memoria gráfica.
3, 4 y 2 --------------- Error de tarjeta gráfica.
4, 2 y 1 --------------- Error de Timer-Tick.
4, 2 y 2 --------------- Error de Shutdown (Reset).
4, 2 y 3 --------------- Error de Gate-A20.
4, 2 y 4 --------------- Ha surgido una interrupción inesperada en el modo protegido.
4, 3 y 1 --------------- Error test RAM (>64 Kb).
4, 3 y 2 --------------- Error en el reloj 2.
4, 3 y 4 --------------- Error de Realtime-Clock.
4, 4 y 1 --------------- Error de puerto de serie.
4, 4 y 2 --------------- Error de puerto paralelo.
4, 4 y 3 --------------- Defecto del coprocesador matemático.

Y bueno, lo siguiente es buscar una solución al problema al que corresponde el pitido que genera la Tarjeta Madre.

Ojala que esto te sea de mucha utilidad y te ahorres un poco de dinero la próxima vez que tengas un problema con tu PC.

Fin del tutorial

Ver tutorial completo »

Tutorial: 10 trucos para Candy Crush Saga

Candy Crush Saga se ha convertido en un juego muy popular, y lo logro por lo divertido y entretenido que es. Aunque a mas de uno nos ha causado ganas de romper la pantalla por lo complicado que se vuelve en niveles mas avanzados.


Por eso mismo hoy te traigo 10 trucos para Candy Crush Saga, que aunque no son trucos que nos den vidas ni nada de eso, son más que nada estrategias para ser un gran jugador.

¿Que necesitamos?

* Candy Crush Saga [Enlace]

Dificultad:

Fácil

Paso 1:

Pues sin más, les dejo la lista de trucos o consejos para Candy Crush Saga:

1. ¡Evita hacer caso a las sugerencias! El juego propone la peor sugerencia posible. Para ello busca otras alternativas, piensa un poco.

2. Destruir los caramelos de la parte inferior de la pantalla siempre es mejor que hacerlo con los de la parte superior. Así caen más caramelos nuevos con los que poder hacer las combinaciones.

3. Eliminar primero la gelatina situada en los extremos. De esta manera será más rápido el movimiento de caramelos para poder realizar más jugadas.

4. Si cambiamos la hora del dispositivo en el que estemos jugando, el nivel de vidas aumentará permitiendo volver a jugar con las vidas completas. Hay que hacer trampa algunas veces para poder ser el mejor :$ jejeje.

5. Juntar dos o más caramelos especiales con forma de donut la misma jugada, eso multiplicará su efecto y podrás eliminar todos los caramelos del nivel.

6. Aprovechar los tres martillos piruleta que regala Candy Crush nada más empezar a jugar, con ellos eliminamos cualquier caramelo que queramos. Aunque tendremos que pensar bien cuándo y cómo utilizarlos, porque si se acaban, no volveremos a tener nunca más esta ventaja. Lo se, es injusto :(

7. Dale prioridad a los caramelos rayados, que son los que eliminan columnas o filas enteras. Y ya si combinas un caramelo rayado con un envuelto, lo tendrás tirado, ¡porque despejarás la mitad del tablero!

8. No ir a lo loco y planificar los movimientos a hacer nada más empezar el nivel, la estrategia es más importante que la suerte en este juego. ¡No hay que dejarse llevar por la emoción!

9. Tener controlado en todo momento al chocolate, que en la vida real será una delicia pero aquí es el verdadero enemigo que hay que eliminar. Toma en cuenta estos consejos:

Si destruimos alguna pieza de chocolate, no se expandirá en ese turno.No avanzará por dónde haya una cereza o una avellana.Cuando se expanda, evitará comerse caramelos bonus. Solamente los comerá cuando no pueda expandirse hacia otro lugar. Hay que intentar que no acabe la pantalla así:

10. Utilizar inteligentemente los caramelos especiales que te regalan tiempo en los niveles contra reloj, como el caramelo +5, que te da cinco segundos más para poder hacer más movimientos.


Siguiendo estos consejos seguramente serás un gran jugador y no sufrirás por no poder pasar un nivel.

Fin del tutorial

Ver tutorial completo »

Tutorial: Cómo combinar 2 o más archivos PDF

En ocasiones es necesario juntar el contenido de un archivo PDF con el de otro, pero no lo logramos con éxito. O con mucho esfuerzo.


El día de hoy te dejo un tutorial para que puedas combinar 2 o más PDFs y hacerlos en uno solo.

¿Que necesitamos?

* PDFSam Split and Merge [Windows 32bits | Windows 64bits | Mac OSX]

Dificultad:

Fácil

Paso 1:

Lo primero que debemos hacer es descargar el software mediante los enlaces que deje en la lista de materiales.

Una vez descargado e instalado abrimos el programa. Nos mostrará una ventana con 3 pestañas. Para este caso seleccionaremos "Merge"

Ahora pulsamos el botón "Añadir" y seleccionamos nuestra primera página. Repetimos el proceso tantas veces como archivos queramos añadir.

Los archivos PDF que vayamos adjuntando se irán listando por orden de entrada en la zona central de la ventana del programa.

Una vez tenemos todos los archivos añadidos, pulsamos el botón "Buscar" y le indicamos una ruta de destino en donde guardaremos nuestro PDF resultante.

¡IMPORTANTE!

Si queremos conservar la alta calidad en las imágenes, hay que desmarcar la casilla 'Compress output file'.

Por último pulsamos el botón "Ejecutar" y en pocos segundos nuestro nuevo archivo PDF estará creado en la ubicación elegida.

Fin del tutorial

Ver tutorial completo »

Tutorial: Cómo dar efecto blanco y negro a tus imágenes con CSS

Hoy te traigo otro bonito efecto para que lo agregues a tu blog o página web, se trata de un efecto que hace que tus imágenes se vean en blanco y negro, pero al pasar el cursor sobre ella sus colores originales vuelven.


Mira como dar efecto blanco y negro a tus imágenes con CSS aquí.

¿Que necesitamos?

* Un blog o página web.

Dificultad

Fácil

Paso 1:

Antes de pasar al código mira como queda el efecto:

Paso 2:

Ahora si, vamos al código.

Busca en tu plantilla la siguiente linea:

]]></b:skin>

Ahora pega este código antes de esa linea:

.separator {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
-moz-transition: all 2s; -webkit-transition: all 2s; transition: all 2s; /* De Color a B/N */
}
.separator:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;
-moz-transition: all 1s; -webkit-transition: all 1s; transition: all 1s; /* De B/N a Color */

Puedes modificar el tiempo que tarda el efecto en devolver el color a la imagen y viceversa, para esto modifica las partes en color morado 1s= 1 segundo, 2s= 2 segundos, y así sucesivamente.

Y listo, guarda los cambios y observa el resultado.

Espero te haya gustado este bonito efecto, para darle un toque de diseño a tu blog.

Fin del tutorial

Ver tutorial completo »

Tutorial: Como cocinar tu propia Metanfetamina Azul estilo Breaking Bad

Seguramente ya has visto la serie Breaking Bad, si no lo has hecho no sabes de lo que te estás perdiendo! Corre a verla ya! Algo característico de esta serie es el producto azul que Walter White cocina junto con Jesse Pinkman.


Hoy te muestro como cocinar tu propia Metanfetamina Azul estilo Breaking Bad, para que te luzcas con tus amigos y cumplas tu sueño de ser el rey de la metanfetamina.

¿Que necesitamos?

* Un recipiente hondo.
* Estufa.
* 1 kg de azucar.
* 250 ml de Sirope [Cualquier sabor]
* Colorante azul.
* Charola para horno.
* Martillo.
* Bolsas herméticas de plástico.

¿Cuanto gastaremos?

Aproximadamente $50 MXM | 7$ USA

Paso 1:

Lo primero que haremos será poner a hervir 500 ml. de agua en un recipiente hondo.
Cuando el agua esté medio caliente, vierte 1 kg. de azúcar dentro de ella.

 

Paso 2:

Cuando el agua se espese y la superficie se vuelva con un tono amarillo, retir el recipiente del fuego y vierte un poco de sirope del sabor que te guste, en este caso es limón.

 

Después de eso, vierte unas gotas de colorante azul y remueve.

Paso 3:

Vierte toda la mezcla en una bandeja de horno y déjalo enfriar.
Espera unas 4 horas hasta que esté completamente duro.

 

Paso 4:

Ahora usa un martillo para romper tu cristal en trozos. [Tu decides de que tamaño quieres los trozos.]

Una vez roto, mete la cantidad que desees en bolsas pequeñas para dar mayor realismo.

 

Y listo, ahora ya puedes vivir tu fantasía de ser Walter White y salir a las calles tosiendo con tu sombrero a comercializar tus dulces de limón color azul :D

Fin del tutorial

Ver tutorial completo »

Tutorial: Cómo dar efecto de fotografía a imagenes en Blogger con CSS

Volviendo a la categoría de Blogger, que ya estaba un poco olvidada, hoy les traigo un efecto hecho con CSS para que sus imágenes se vean mas llamativas, se trata de generar el efecto de una imagen fijada por las esquinas tal como en los álbumes antiguos de fotografías.


Si te interesa sigue leyendo para que aprendas como dar efecto de fotografía a tus imagenes en Blogger con CSS.

¿Que necesitamos?

* Un blog.

Dificultad:

Fácil

Paso 1:

Lo primero es el código CSS.
Así que lo que debemos hacer primeramente es buscar en nuestra plantilla lo siguiente:

]]></b:skin>

Ahora pegaremos el siguiente código justo antes de esa linea:

.esquinas {
  position: relative;
  display: table;
  max-width: 90%;
  margin: 50px auto;
}
.esquinas img {
  display: table-cell;
  max-width:100%;
  height: auto;
  margin: 0 auto;
  padding: 8px;
  background: #fff;
  box-shadow: 0 0 2px #666;
  box-sizing: border-box;
}
.esquinas:before,
.esquinas:after,
.esquinasbis:before,
.esquinasbis:after {
  position: absolute;
  bottom: -20px;
  right: -40px;
  content: "";
  height: 40px;
  width: 80px;
  background: #ffffff;  /*El mismo color que el fondo de la página*/
  box-shadow: 0 -6px 9px -8px #333;
  -webkit-transform: rotate(-45deg);transform: rotate(-45deg);
}
.esquinas:after,
.esquinasbis:after {
  top: -20px;
  left: -40px;
  box-shadow: 0 6px 9px -8px #333;
}
.esquinasbis:before {
  top: auto;
  left: -40px;
  -webkit-transform: rotate(45deg);transform: rotate(45deg);
}
.esquinasbis:after {
  left: auto;
  right: -40px;
  -webkit-transform: rotate(45deg);transform: rotate(45deg);
}
/* Hack sólo para Blogger*/
.separator a {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

¡OJO! Sustituye #ffffff; por el color de fondo de tus entradas, para que se note el efecto.

Paso 2:

Ahora vamos con el HTML, para que veamos el efecto en alguna imagen debemos utilizar el codigo siguiente:

<div class="esquinas">
<img border="0" src="URL-DE-TU-IMAGEN-AQUI" />
<div class="esquinasbis"></div>
</div>

Sustituyendo URL-DE-TU-IMAGEN-AQUI por la URL de nuestra imagen.

Ahora nuestras imágenes lucirán así:

Paso 3:

Aunque de esa forma tendremos que poner ese código cada que publiquemos una imagen, si lo que queremos es que de forma fija quede ese estilo para todas las imagenes que subamos a partir de ahora lo que tenemos que hacer es pegar este código:

.separator {
  position: relative;
  display: table;
  max-width: 90%;
  margin: 50px auto;
}
.separator img {
  display: table-cell;
  max-width:100%;
  height: auto;
  margin: 0 auto;
  padding: 8px;
  background: #fff;
  box-shadow: 0 0 2px #666;
  box-sizing: border-box;
}
.separator:before,
.separator:after,
.separatorbis:before,
.separatorbis:after {
  position: absolute;
  bottom: -20px;
  right: -40px;
  content: "";
  height: 40px;
  width: 80px;
  background: #ffffff;  /*El mismo color que el fondo de la página*/
  box-shadow: 0 -6px 9px -8px #333;
  -webkit-transform: rotate(-45deg);transform: rotate(-45deg);
}
.separator:after,
.separatorbis:after {
  top: -20px;
  left: -40px;
  box-shadow: 0 6px 9px -8px #333;
}
.separatorbis:before {
  top: auto;
  left: -40px;
  -webkit-transform: rotate(45deg);transform: rotate(45deg);
}
.separatorbis:after {
  left: auto;
  right: -40px;
  -webkit-transform: rotate(45deg);transform: rotate(45deg);
}
/* Hack sólo para Blogger*/
.separator a {
  margin-left: 0 !important;
  margin-right: 0 !important;

Antes de:

]]></b:skin>

Y obvio, en lugar del código del paso 1.

Con esto ya no tenemos que poner el código del paso 2 en cada imagen.
La única limitánte es que de forma fija solo conseguimos que la imagen tenga el efecto solo en 2 de sus esquinas, lo cual hará que las imágenes se vean así:

Pero si quieres que tenga el efecto en las 4 esquinas entonces debes hacer lo siguiente:

Pega este código:

<div class="separatorsbis"></div>

Justo antes del cierre del <div> de tus imágenes, tal que así:

<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="URL-DE-TU-IMAGEN-AQUI" height="380" width="640" />
<div class="separatorbis"></div>
</div>

Con eso conseguirás el efecto de forma permanente, y si alguna vez olvidas poner el segundo código al menos tendrás el efecto de 2 esquinas.

Bonito efecto de fotografía antigua con CSS, verdad? :)

Fin del tutorial

Ver tutorial completo »

Tutorial: Como obtener la imagen "Preview" de un video de Youtube

En ocasiones nos topamos con videos en Youtube con una imagen Preview muy padre, pero no podemos obtenerla debido a que está dentro del video.



Pero eso se acabó, hoy te mostraré como obtener y descargar la imagen Preview de un video de Youtube.

¿Que necesitamos?

* Google Chrome

Dificultad:

Fácil

Paso 1:

Lo primero será seleccionar un video con una imagen preview que nos guste y abrirlo en Youtube.
Ahora presionaremos las teclas "Ctrl + U". Nos aparecerá una ventana así:

Paso 2:

Dentro de esa página con código fuente buscaremos las palabras: "Og:Image". Para realizar rápidamente la búsqueda presionamos las teclas "Ctrl + G".

Una vez que encontremos donde está veremos que forma parte de una linea de código similar a ésta:

Paso 3:

Lo que debemos hacer ahora es copiar ese enlace que esta dentro de esa línea de código y pegarla en el navegador. Ésta nos llevará a la imagen que queremos:

Y listo, así de rápido y sencillo podemos obtener la imagen preview de un video de Youtube.

Fin del tutorial

Ver tutorial completo »

Tutorial: Cómo calcular porcentajes mentalmente

Saber obtener porcentajes siempre es bueno, sobre todo en casos de compras (para que no nos tomen el pelo) pero saber hacerlo mentalmente y sin el uso de calculadoras es mucho mejor. Y mas si estás estudiando alguna carrera en la que necesites sacar rápidamente un porcentaje.


Hoy te enseñare como calcular porcentajes mentalmente.

¿Que necesitamos?

* Nada

Dificultad:

Media

Paso 1:

El primer paso es saber calcular el 1% y el 10% de cualquier cantidad, y ahora mismo te enseño el secreto:

El 1% es igual a "desaparecer" los 2 últimos dígitos o convertirlos en decimal es decir:

Si los últimos dos dígitos no son "0" cero, entonces los pasas al decimal:

Paso 2:

Ahora toca aprender a calcular el 10%, que es lo mismo, solo que ahora "desaparecerás" el último dígito o convertirlo a decimal:

Paso 3:

Una vez comprendido esto pasemos a la práctica, para ver si hemos aprendido bien. Aquí te dejo 3 ejercicios para que compruebes tu conocimiento:

EJERCICIO 1: ¿Cuanto es el 30% de 700?

1.- El 10% de 700 = 70

2.- Si 10% + 10% + 10% = 30%

3.- Entonces 70 + 70 + 70 = 210

Resultado: El 30% de 700 es 210

EJERCICIO 2: ¿Cuánto es el 25% de 1800?

1.- El 10% de 1800 = 180

2.- Si 10% + 10% = 20%

3.- Entonces 180 + 180 = 360

Ahora vamos por el 5%...

4.- Si la mitad de 10% es 5%

5.- Entonces la mitad de 180 = 90

6.- Solo sumas 360 + 90 = 450

Resultado: El 25% de 1800 es 450

EJERCICIO 3:  En México el IVA es del 16%, entonces calcularemos el IVA de una chamarra que cuesta $400

1.- El 1% de 400 es 4

2.- El 10% de 400 es 40

3.- El 5% de 400 es 20 (Porque la mitad de 40 es 20)

4.- Si 1% + 10% + 5% = 16%

5.- Entonces 4 + 40 + 20 = 64

Resultado: El IVA de $400 es $64

Recuerda que este resultado es solo el porcentaje, es decir, si lo que quieres es obtener el descuento entonces ese porcentaje se resta(-) al "Total" y si es una bonificación o un impuesto como el caso del IVA se suma(+) al "Total".


Como ves, es muy sencillo calcular porcentajes mentalmente, espero que este tutorial te sea de mucha utilidad.

Fin del tutorial

Ver tutorial completo »