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

lunes, 18 de febrero de 2013

Descargate este Video tutorial Sobre Personalización de Plantillas de WORDPRESS

2/18/2013


En internet podemos encontrar una gran variedad de temas o plantillas paraWordPress. Sin embargo, estas plantillas rara vez se adaptan al 100% a nuestras necesidades. El objetivo de este curso video2brain es aprender a diseccionar y personalizar un tema deWordPress, modificando su presencia, su estructura y su programación para adaptarla al proyecto que tenemos entre manos.

José Vicente Carratalá te presenta su curso Personalización de plantillas de WordPress. Aprende a adaptar plantillas ya existentes.

En primer lugar, aprenderas la jerarquía y distribución de archivos de un tema, apoyádos en el códex de WordPress. A continuación, pasaras modificar el CSS del proyecto, tanto creando temas hijos, como modificando el CSS original del tema sobre el que vayas a trabajar
En un segundo paso del curso, aprenderas cómo modificar la estructura del blog alternando su distribuciónHTML.
En la última parte, aprenderas cómo modificar la programación y cómo introducir cambios en la traducción al castellano del tema.
Se facilitarán todos los datos necesarios para realizar el curso. El blog de ejemplo con el que parte el curso dentro de archivo RAR se ecuantra un archivo ZIP comprimido, que contiene todos los archivos necesarios para seguir paso a paso. Además, también se te proporciona una copia de la base de datos en formato SQL de MySQL. Para poder seguir el curso, el alumno deberá tener instalado un entorno de desarrollo XAMP, donde copiaras los archivos comprimidos, e instalar la base de datos importándola en su servidor. Por último, tendrá que modificar los datos de acceso a la base de datos en el archivo de configuración de WordPress.

DESCARGAR


Suscribirse a: Comentarios (Atom)