lunes, 4 de marzo de 2013

Instala Nivo Slider en tu Blog con solo dos Pasos

3/04/2013

El control deslizante Nivo es reconocido mundialmente como el slider más hermoso y fácil de usar en el mercado. El plugin de jQuery es totalmente gratuito y de código abierto totalmente y no hay mejor manera de hacer que su sitio web tenga un mejor aspecto.

Instalación

Paso 1) Añadir el Scripty Css de Nivo
Para añadir estos doscódigosjavascript y css , dirigase a laopciónPlantilla - escoja laopciónEditar HTML luego realice la siguientecombinaciónde teclas CTRL-F para abrir el buscador y digite la etiqueta/head ,una vez que encuentre este etiqueta justo arriba de esta pegue el siguiente codigo.

Mostrar Codigo

Recuerde que para utilizar este Plugindeberátener instalado el Plugin JQuery caso contrario no funcionara.

Parámetros del Plugin
si usted llegase a desear otro efecto de desplazamiento o cambiar el tamaño de lasimágenesa su gustodeberáde tener en cuenta lo siguiente:
A) para cambiar el tamaño del Slider y adaptarlo a la imagen que usted desee solo debe de encontar el estilo
#NivoSlider {
position:relative;
width:640px  !important; 
height:480px  !important;
}

cambiando los valores width(Ancho) y height(Alto)podrácambiar el tamaño del Slider.
B) Para cambiar las configuraciones del slider ya sea el efecto de desplazamiento,la opacidad,el tiempo de cada imagen usted lopodráhacer dentro del JQuery.
Estos son los valores por defecto

effect : 'random',
slices : 15,
boxCols : 8,
boxRows : 4,
animSpeed : 500,
pauseTime : 3000,
startSlide : 0,
directionNav : true,
directionNavHide : true,
controlNav : true,
keyboardNav : false,
pauseOnHover : true,
captionOpacity : 0.6

effect es la variable que recibe el valor del efecto deseado los cuales son:

random
sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse
ustedpodrájugar cambiando los valores asta tener el efecto de su agrado.

slices: cantidad de rebanadas que sera dividida la imagen
boxCols: columnas
boxRows: filas
animSpeed : velocidad detransicióndel slider
pauseTime : tiempo que se demora cada imagen
startSlide: tiempo que debe de comenzar el slider por general es 1 o 0
directionNav : botones dedirección que reciben un valor booleanotrue:Activadofalse: desactivado
directionNavHide : muestra los botones dedirecciónsegúnel valor booleano al pasar el mouse por encimatrue:Mostrarfalse:No Mostrar
controlNav: Mostrar controles dedirección
keyboardNav: activarnavegacióncon el teclado
pauseOnHover: detener laanimaciónotransiciónal pasar elmouse
captionOpacity: opacidad de lasimágenesa realizar la transición

Paso 2) Crear el contenedor y añadir lasimágenes
Una vez culminado el paso 1 , solo queda añadir lasimágenesdentro de un contenedor DIV, para ello dirigase alaopciónDiseño-- y escoja laopciónañadir un gadget - y escoja la opcionHTML/Javascript y pegue el siguientecódigo.

div id="Container"
	div id="NivoSlider"
		img src="http://www.fondos-hq.com/upload/DesktopWallpapers/cache/03816-640x480.jpg" 
        title="Imagen 1" alt=""/
		img src="http://a123.g.akamai.net/7/123/5290/v0001/mtviestor.download.akamai.com/8619/_!//intlod/MTVInternational/umg_int/usuv71/100402/USUV71100402_640x480_1.jpg" 
        title="Imagen 2" alt=""/
		img src="http://img208.imageshack.us/img208/2962/img3048640x480sy1.jpg" title="Imagen 3" alt=""/
	/div
/div


Para añadir mas imágenes solo debe de colocar el códigoimg src="direccion de imagen" title="titulo de imagen" / dentro del contenedor div id="NivoSlider".
Recomendación:
Recuerde que antes de utilizar cualquier Slider que utilice JQuerydeberátener instalado el Plugin de JQuery y no colocarimágenesqueexcedanel peso de 400kb por quepodríavolver lento la carga de su blog.
(si te sirvio este post ayudame dando clic ▼ en la imagen :) )









domingo, 3 de marzo de 2013

Paneles desplegables con HTML5 estilo MEGA para blogger

3/03/2013
Hay varias formas de crear contenedores que se expanden se los puede construir conJQuery y asta el mismo CSS3 pero hoy les presento una nueva forma conHMTL5 siendo unatecnologíanueva y que espero google agregue a blogger!,pero como no me gusta esperar me puse manos alcódigo.
las etiquetasdetails ysummary son etiquetas simples que solo debemos de armar sin tanto programar solo añadir cualquier contenido o contenedor dentro de ellas y el navegador se encargara del resto ,ahora HTML5 al ser unatecnologíanuevahabráciertosnavegadores que no funcionara por el momento el unico que no da problemas y que asta el mismo MEGA recomienda es Google Chrome.
puedes ver un ejemploAQUI

Instalación
Paso 1) Añadir el estilo CSS
dentro de blogger dirigase alaopciónPlantilla - Editar HTML y realice lacombinaciónde teclas CTRL-F para abrir el buscador y coloque lo siguiente/b:skin una vez que aya encontrado este codigo justo arriba de el pegue el siguiente codigo css.
details{
 color: #000;
 border: solid 1px #000;
 background: #fff;
 border:0px;
}
details p{
 text-align: justify;
}
details img{
 display: block;
    margin: auto;
}
summary{
   padding: 10px;
   color: #fefbfb;
   font-size: 16px;
   font-weight: normal;
   font-family: 'Open Sans', Arial, Helvetica, sans-serif;   
   text-align:left;
   cursor: pointer;
   background-color:#d11e00;
  -webkit-box-sizing: border-box;
}
summary::-webkit-details-marker {
  display: none
}
summary:after {
  content:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicO4lpamOBpqb9eN8-glAfuvNVL1OSssgu97hCHIYGc4h4cj2lFGGbRGX9I7zFehLqCFpMFN-DtZTYtW9Ya7OsrGFTcem2xrbVyMuZ3H8_M42e78LdfsxpX05bmdKIG8E49kwGewSQzxI/s26/cloud.png"); 
  color: #fff; 
  float: left; 
  font-size: 1.5em; 
  font-weight: bold; 
  margin: -5px 17px 0 0; 
  padding: 0; 
  text-align: center; 
  width:20px;
}
details[open] summary:after {
  content:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-PPLf_zvZ0hN6FGRQrIsb1w5ClHiKIURHoYs0CY0wRyqSW_z1qV9ZkNLe5MRA5ONpZf2LbyyLSLXZkK9K3YSdrvFOPrqSHfbnW3n4VdYFp9okoeugWP_GDrl6bFXs-l0PdgSBnMOeHtg/s32/cloud-dow.png");
}

#contenedor{
 padding: 10px;
}
.contenido{
 padding: 10px;
}

ustedpodrámodificar a su justo elcódigocss.

Paso 2) Añadiendo estructura y contenedores
ahora formaremos las etiquetas details y summary unaaclaraciónla etiqueta details me forma el contenedor y la etiqueta summary coloca el titulo.
div id="contenedor"
    details open
        summaryTITULO 1/summary
        div class="contenido"
         p
          TU CONTENIDO         /p
        /div
    /details
                !--CIERRE1--
                !--INICIO 2--
    details
     summaryTITULO 2/summary
     div class="contenido"
      p
          TU CONTENIDO         /p
     /div
    /details
                !--CIERRE 2--
                !--INICIO 3--
    details
        summaryTITUTLO 3/summary
        div class="contenido"
         TU CONTENIDO
        /div
    /details
                !--CIERRE--
   /div
             /div


Si se desea que todos los contenedoresaparezcanen estado cerrado solo debe de eliminar la condicionalopen caso contrario si se desea que uno o varios aparescan abiertos solo debe de agregar al details la condicionalopen , ejm:


details open
        summaryQue es Java?/summary
        div class="contenido"
         p
Java es un lenguaje de programación y la primera plataforma informática creada por Sun Microsystems                           en 1995. Es la tecnología subyacente que permite el uso de programas          /p
        /div
    /details




miércoles, 27 de febrero de 2013

Descargate este video tutorial y aprende como crear temas en WordPress si tener que programar

2/27/2013


¿Quieres diseñar plantillas paraWordPress sin escribir código? Constructor es un tema de WordPress que te permite personalizar cualquier aspecto de la plantilla mediante formularios y sin tener que recurrir a la programación. En este completo cursovideo2brainaprenderáscómo hacerlo paso a paso.

José Vicente Carratalá te presenta su curso Creación de temas deWordPress sin programar.
En este curso video2brain aprenderás a crear una plantilla para WordPress usando un tema muy especial: Constructor, al que se le puede considerar un “tema de temas”, ya que nos permite crear nuestras propias plantillas personalizando cualquier aspecto, tanto colores, como imágenes, proporciones y disposiciones

Contenido del Video Tutorial
  • Instalación de la plantilla
  • Personalización de Widgets
  • Personalización de los elementos del tema
  • Trucos y técnicas
  • Se facilitarán todos los archivos necesarios para el desarrollo del proyecto. Dentro de la carpeta principal, dispondrás de la carpeta de WordPress junto con una copia de seguridad de la base de datos para poder instalarla en tu ordenador. Además, contarás con todos aquellos archivos de imagen usados durante el desarrollo del tema personalizado.
link actualizado



DESCARGAR


jueves, 21 de febrero de 2013

Descargate este Pack de tutoriales sobre Oracle PL/SQL

2/21/2013
PL/SQL (Procedural Language/Structured Query Language) provee una manera muy cómoda de relacionar los conceptos de bases de datos y manejarlos mediante ciertas estructuras de control, dentro del contexto de una herramienta netamente de programación.
Su utilización es dentro del administrador de bases de datos“Oracle” y sus principales características son la posibilidad que brinda de utilizar sentenciasSQL para manipular datos en Oracle y sentencias de control de flujo para organizar esta manipulación de datos. Dentro del lenguaje, es posible declarar constantes y variables, definir procedimientos y funciones y atrapar errores en tiempo de ejecución.

Contenido del Pack

Manual de PL/SQL
Gestor de Base de datos PL/SQL
Manual de Referencia PL/SQL(Por Oracle)
PL/SQL Manual del Alumno
Funciones y procedimientos en Oracle PL/SQL(Video Tutorial)

DESCARGAR

martes, 19 de febrero de 2013

CustomPopup v1.0 con efecto desplazable en JQuery para blogger

2/19/2013

Varias veces eh visitado webs con contenido de popup emergentes que muchos de ellos son con publicidad y siempre tienen un mismo sentido lo cual se vuelve aburrida la pagina, si se desea colocar en un sitio web cualquier tipo de anuncio o contenido que llame un poco mas laatenciónlo ideal son esta clase de popup que les presento uno simple y sencillo a la hora de añadirlos a cualquier sitio web.puedes ver un ejemploAQUI

Instalaciónpara Blogger.
Paso 1)
dirigase a laopciónPlantilla-clic en Edicion HTML- y realice la siguientecombinaciónde teclas CTRL-F y coloque en el buscador la etiqueta/head , una vez ya encontrada la etiqueta pegue el siguiente codigo arriba o antes de la/head.

script type="text/javascript"
 //![CDATA[
  function openPopup() {
   $('#overlay').fadeIn('fast', function() {
    $('#custompopup').css('display','block');
    $('#custompopup').animate({'left':'30%'},500);
   });
  }
  function closePopup(elemento) {
   $(function($) {
    $(document).ready(function() {
     $('#' + elemento).css('position','absolute');
     $('#' + elemento).animate({'left':'-100%'}, 500, function() {
      $('#' + elemento).css('position','fixed');
      $('#' + elemento).css('left','100%');
      $('#overlay').fadeOut('fast');
     });
    });
   });
  }
 //
    /script


Tenga en cuenta que deberá de tener instalado la librería JQuery si no no le funcionara.
Paso 2)
ahora realice lacombinaciónde teclas CTRL-F y busque elcódigo/b:skin , una vez encontrado arriba de este pegue el siguientecódigocss.

#wrapper{
 color:#000000;
 font-family:tahoma;
 font-size:14px;
 text-align:center;
 margin:0 auto;
 margin-top:50px;
}

#wrapper a{
 cursor:pointer;
 font-size:15px;
 font-weight:bold;
 text-decoration:underline;
}

.popup {
   width: 480px;
   height: 265px;
   left: 100%;
   padding:20px;
   position: fixed;
   right: 30%;
   top: 25%;
   z-index: 101;
   /*fondo*/
   background-color: rgba(25,119, 235, 0.8);
   background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
   background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
   background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
   background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
   background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
   -moz-border-radius: 4px;
   border-radius: 4px; 
  -moz-border-radius:0 0 120px 120px / 0 0 12px 12px; 
  border-radius:0 0 120px 120px / 0 0 12px 12px;
  -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 5px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
  -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 5px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
  -o-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 5px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
   box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 5px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
}
.popup p{
   font: italic 22px Georgia;
   color: #000000;
   text-align:center;
   margin-top:-12px;
   margin-left: auto;
   margin-right: auto;
   text-shadow: 0px 3px 3px rgba(255,255,255,0.5),0px -1px 1px rgba(0,0,0,.3);
}
.popup img {
 margin-top:-33px;
}
a.popupclose {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO92TmF49ygT2Vc1ExIJ9GpX4hAHe1Am0Spqs1_Z-qipiso0Lc-x0orCtbCE1gzhpr9K6pwvFSfcPIHuqmbtMQehJoNuaUAodGzO0iO7AUNQcbjDcIstt8qAxWm9x5cloKNu4YWv1PZTA/s64/cancel.png") repeat scroll left top transparent;
    cursor: pointer;
    float: right;
    left:42px;
    position: relative;
    top: -52px;
    width:64px;
 height:64px;
}


elcódigocss puede ser modificado a su gusto. ahora realice la mismacombinaciónde teclas(CTRL-F) para buscar la etiquetabody , una vez que la aya encontradoreemplace lapor la siguiente linea decódigo.

body onload="openPopup();"

esto sirve para llamar a ala función openPopup() y asu vez llamar al Popup en si al cargar el blog.

Paso 3)
ya hecho los pasos 1 y 2 Guarde y dirigase a Diseño-Añadir un Gadget y escoja la opcion HTML/Javascript y pegue el siguiente codigo.

div id="wrapper"
div id="overlay" class="overlay"
/div
div id="custompopup" class="popup"
 a onclick="closePopup('custompopup');" class="popupclose"/a
 div id="content"
    pUnete a I.R.P-legion Grupo de FACEBOOK/p
 !--INICIO FACEBOOK--
     a href="https://www.facebook.com/groups/336719756408806/"
     img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeZxEVerLZBZS_Ej9OFzbh-aK6Yow1YqUfIhajBmE-FoKnXStuUSNFDuV17zA82QNAy15VquW-PRk9WV2M8cjzjreOkFaWOt9T3-r3ab-mghWL_bYGb-LcZ54NZZRd2ZDuMPtUwJOj7qY/s500/IRP_PNG.png" /
     a/
    !--FIN--
 /div
/div
/div

Dentro del contenedordiv id="content" podrácolocarcualquiercontenido que usted deses mostrar.
ahora si llegase a tener la necesidad de mostrar otra vez el popup por medio de un vinculo loúnicoque tiene que hacer es lo siguiente.

a onclick="openPopup();"MOSTRAR POPUP/a


Descargate este video tutorial y aprende a crear tu propia tienda ONLINE 2013 con video2brain

2/19/2013


Si inicias tu primer proyecto de comercio electrónico de forma rápida, fácil y potente,esto es para ti!!

con PrestaShop,podráscrear tu primera tienda online ,una solución de comercio electrónico gratuita y de código abierto. Descubre y aprende paso a paso con este curso de video2brain sin tener conocimientos deprogramación, podrás crear tu primera tienda online con poco esfuerzo.
José Vicente Carratalá te presenta su cursoMi primera tienda online con PrestaShop.
aprenderás paso a paso a descargar, configurar y activar una tienda online usando Prestashop como software de base. Aprenderás a convertir tu ordenador en un servidor y a crear tu primera base de datos para tus productos. Después, veremos en progresión todo lo que debes hacer antes de lanzar tu tienda online:

Contenido del Video Tutorial

Creación de un catálogo de productos
Realización de pedidos
Registro de clientes nuevos
Gestión de clientes en el panel de control
Configuración interna de la tienda
Creación de plataforma de pago PayPal
Realización de copias de seguridad.

DESCARGAR
Suscribirse a: Entradas (Atom)