miércoles, 30 de enero de 2013

Generar Claves Aleatorias en java

1/30/2013

para generar claves aleatorias o de cualquier tipo que se desee solo debemos de utilizar es la claseMath que tinene un metodo llamado random().,el cual es ideal para generar un secuencia denúmerospseudoaleatorios.

Método que utilizamos para generar las Claves.


public  String NUMEROS = "0123456789";
public  String MAYUSCULAS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
public  String MINUSCULAS = "abcdefghijklmnopqrstuvwxyz";
public  String ESPECIALES = "ñÑ";

public  String  getGeneraClaves(String key, int length) {
 String pswd = "";
 for (int i = 0; i  length; i++) {
  pswd+=(key.charAt((int)(Math.random() * key.length())));
   } 
       return pswd;
    }



Lo que hace elmétodogetGeneraClave() es recibir dos valores uno de tipocaráctery el otro entero,el entero sera el limite de caracteres queestaráformada la clave,mientras que la variable key cuyo valor sera cualquiera de las siguiente variables(NUMEROS,MAYUSCULAS,MINUSCULAS,ESPECIALES).

DESCARGAR

jueves, 24 de enero de 2013

Descargarte este Videotutorial de video2Brain sobre HTML5 Y CSS3 para tabletas

1/24/2013

La tecnología HTML5 es la que tiene un presente y un futuro más claro en el mundo del desarrollo de contenidos para la web móvil y para los libros electrónicos para Tablets. Este curso video2brain te mostrará las técnicas más fundamentales para poder introducir vídeo, sonido y animaciones en tus contenidos HTML, y añadir interactividad Javascript enfocada a Tablets táctiles.

Contenido del Video Tutorial

Aspectos Básicos
Formatos condicionales con CSS Media Queries
Maquetación fluida versus maquetación fija
Viewport I
Viewport II : audio
Multimedia con HTML5
Añadir audio
Añadir gráficos
Otras ventajas del HTML5
Geolocalización
Almacenamiento local
Diseño y animación con CSS
Efectos gráficos estáticos
Transformaciones 2D
Efectos animados: transiciones
Transformaciones 3D
Animaciones
Ejercicio
Interactividad en tablets
Cómo probar páginas en el tablet
Equivalencia de eventos
Toques individuales
Demostración toques individuales
Gestos
Gestos: demostración en emulador
Publicación de los contenidos
Ejemplos de webapps
Cómo hacer un webapp
Demostración de webapp en emulador
Baker Framework
Adobe Digital Publishing DPS
eBooks en formato EPUB de maquetación fija para iBooksVisualización en iPad
Despedida
DESCARGAR

martes, 8 de enero de 2013

FanBox de Facebook personalizado V1.0

1/08/2013

varias web que e visitado encuentro los widgets de distintas redes sociales pero casisiempreson las mismas ,los mismos colores la mismapresentaciónen fin me gusta la originalidad y dar un mejor aspecto a todo lo que este a mialcanceasíque les presento una forma de como poder personalizar el FanBox de Facebook asu gusto, loúnicoque tienen que hacer es modificar el archivo CSS cuyo nombre esstyle_face.css

Instalación
vaya a Diseño- añadir un gadget y escoja laopción HTML/JAVASCRIPT y pegue el siguientecódigo

script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"/script
script src="http://connect.facebook.net/en_US/all.js#xfbml=1"/script
fb:fan profile_id="166082340135951" stream="0" connections="10" logobar="0" width="300" css="https://sites.google.com/site/javafaceblogger/fileblogger/style_face.css?12450"/fb:fan
div style="font-size:10px; padding-left:10px; text-align:left"Add Widget/
a href="http://javaface-elblogdelprogramador.com/"By JavaFace-elblogdelprogramador/a/div

Parametros
tenga en cuenta lo siguiente:

profile_id: aqui debera de colocar el ID de su FanPage.
css: aqui colocara ladirecciónde donde esta alojado su archivo css,una cosa importante comopodráobservar al finalizar la extencion de archivo .css notara un el signo ? y un numero cada prueba que hagadeberácambiar el numero ya que facebook almacena en la cache y si no llegara a cambiar el numero no vera cambio alguno por que mostrara el estilo anterior.
Si llegaran a tener algun problemaavísenme.


domingo, 6 de enero de 2013

Menú estilo ModernUI con Ajax y JQuery para blogger

1/06/2013

EsteMenúde navegación para blogger es muy nuevo widget creado por Harish(way2blogging) en la plataforma de Blogger que utiliza JSON feed Blogger API y AJAX. yo lo he mejoradodándoleuna apariencia ModernUI ,este menu sigue siendo un menunormal con capacidad desplegable donde podemos mostrar los postsegúnsea lacategoríao etiqueta pueden ver un ejemplo en esteeste Blog de Pruebas,comohabránobservado al pasar el cursor sobre el MenuCategoríase despliega las etiquetas y las ultimas entradas de cada una mostrando una imagen y el titulo de la entrada.

Instalación
nos dirigimos a Pantilla EdiciónHTML una vez dentro ,CTRL-F y buscamos /b:skin antes de esta linea peque lo siguiente .
.modern *{margin: 0;padding: 0;}
ul.modern {list-style: none;line-height: 1;}
ul.modern:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.modern li{
 position:relative;
 float: left;
 margin: 0 !important;
 padding: 0 !important;
}
ul.modern li a{/*estilo del texto menu y items*/
 text-decoration:none;
 margin: 5px;
 padding: 12px 18px !important;
 color: #fefcff !important;
 font:20px Georgia;
 display: block !important;
 border: 0 none !important;
 background: #2d85f2;
 
 }

ul.modern li a:hover{background: #c638ef !important;}/*hover menus*/
ul.modern ul{
  position: absolute;
  display: none;
  top: 100%;
  border:1px solid #ccc;
}
ul.modern ul li{
 float: none;
 min-width: 160px;
 background:#f03d46;
 text-shadow: none;
 }
ul.modern ul li a{
padding: 12px 14px;
font-weight: normal;
}

ul.modern ul li a:hover{/*hover items*/
 background: #c638ef !important; 
}
ul.modern ul ul{display: none;left: 100%;top: 0;}
/* MENU TIPO AJAX */
ul.menumodern li div.submenu {/*estilo contenedor de los post*/
display: none;position: absolute;
width: 600px;
z-index: 90;
left: -1px;
top: 100%;
overflow: hidden;
min-height: 150px;
background: #f2f2f2;
border:1px solid #cccccc;
border-top: 0 none;
}
ul.menumodern li:hover div.submenu {display: block;background: #e3e2e2;box-shadow: 0px 0px 2px #000;}
ul.menumodern ul ,ul.menumodern ul li{
display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.menumodern ul li{
 background: none !important;
 float: none !important;
}

ul.menumodern ul.verticlemenu{/*estilo contenedor de las categorias o items*/
 position: absolute;
 width: 33%;
 left:0;
 top:0;
 bottom: 0;
 background: #f2f2f2;
 }
ul.menumodern ul.postslist {
 position: relative;
 display: block;
 width:65%;
 float: right;margin: 8px 0 !important;
 background: none;
 }

ul.menumodern ul.postslist li{
display: block;
overflow: hidden;
border-bottom: 1px #eee solid;
position: relative;min-height: 60px;
padding: 8px 8px 8px 110px !important;
}
ul.menumodern ul.postslist li:last-child{border-bottom: none 0;}

ul.menumodern ul.postslist li .imgCont{
position: absolute;
left: 0;
top:8px;
width: 100px;
height: 60px;
overflow: hidden;
border:1px solid #dcdcdc;
font-size: 0;line-height: 0;
box-shadow: 0px 0px 2px #000;
}
ul.menumodern ul.postslist li .imgCont img{
  position: relative;
  top:-20px;
  padding: 0;
  width: 100px;
  height: 100px;
  }
ul.menumodern ul.postslist li a{
 font:17px Georgia;
 display: block;
 line-height: 1.4;
 padding: 0 !important;
 background: #6907b5;
 text-align:left;
 }

ul.menumodern ul.postslist li a:after{
   content:"";
   position:absolute;
   top:13px;
   left:106px;
   width:0;
   border-top:10px solid #6907b5;
   border-left:10px solid transparent; 
}
ul.menumodern ul.postslist li a:hover:after{
   content:"";
   position:absolute;
   top:13px;
   left:106px;
   width:0;
   border-top:10px solid #c638ef;
   border-left:10px solid transparent; 
}
ul.menumodern .loader{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcHET74QitnQeklrtVGD03E4GbA-EMtayWtUkwZ0rsUKdSg4Md-BOn6q9aE7sGoK19SlCjVOY4XmLdAEqtiBhrgRjzFi_HhU4A_xlwf1_iQN_Wlh7C80pwtHYpX5HuyQlXX-6Azg5KFD8/s16/ajax-loader.gif') no-repeat scroll 0 0 transparent;
width:22px;
height:22px;
position: absolute;
top:50%;
margin-top: -11px;right:5px;
}
ul.menumodern .menuArrow {
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-left: 4px solid #999999;
display: block;height: 0;
margin-top: -4px;
position: absolute;
right: 11px;top: 50%;width: 0;
}
#menumodern {
overflow:visible; 
display:inline-block; 
position: fixed;
top: -2%;
left:0%;
width: 100%;
background: #1d70f8;
box-shadow: 0px 0px 2px #000;
}

este es el estilo del menu si los colores no son de su agrado hay partes comentadas donde podrá cambiar cada parte del menu.
ahora busque la siguiente etiqueta/head y antes de esta pegue el siguiente script(no olvide tener instalado el JQuery para que pueda funcionar el menu sin problemas).
script type="text/javascript"
//![CDATA[
(function(e){var t=function(e,t){this.elem=e;this.settings=t;this.addAjaxHtml();this.ajaxcall=null;this.lielem=this.elem.find(".verticlemenu li a");this.menuHelper(this.elem);this.addEvents()};t.prototype={regex:{islabel:new RegExp("/search/label/","g"),issearch:new RegExp("[?&]q=","g"),labelsearch:new RegExp("(http://[^/]+)/search/label/([^/?&]+).*[?&]q=([^$&]+)(?:[^$]+)?","g"),label:new RegExp("(http://[^/]+)/search/label/([^/?&$]+)","g"),search:new RegExp("(http://[^/]+)/search/?[?&]q=(.*)","g")},addEvents:function(){var t=this;this.lielem.hover(function(){if(e(this).data("menuloaded")!=="true"){t.li=e(this);t.url=t.li.attr("href");t.container=t.li.closest("ul").siblings("ul");t.hoverOver()}},function(){t.hoverOut()})},hoverOver:function(){var t=this;this.getAJAXUrl();if(!this.ajaxUrl)return;this.ajaxcall=e.ajax({type:"GET",url:t.ajaxUrl,dataType:"jsonp",data:t.ajaxData,beforeSend:function(){t.showLoader()},success:function(e){t.hideLoader();t.addArrow();t.showPosts(e)},error:function(e){t.showError(e)}})},hoverOut:function(){this.ajaxcall.abort();this.hideLoader()},getAJAXUrl:function(){if(this.url){var e=this;this.ajaxData={alt:"json","max-results":this.settings.numPosts};this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.labelsearch,function(t,n,r,i){e.ajaxData.q=i;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)===-1?this.ajaxUrl=this.url.replace(this.regex.label,function(t,n,r){delete e.ajaxData.q;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)===-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.search,function(t,n,r){e.ajaxData.q=r;return[n,"/feeds/posts/default"].join("")}):this.ajaxUrl=!1}else this.ajaxUrl=!1},showLoader:function(){e("span/span",{"class":"loader"}).appendTo(this.li.closest("li"))},hideLoader:function(){this.li.closest("li").find("span.loader").remove()},showPosts:function(t){var n=this,r=[],i,s,o;t.feed.openSearch$totalResults.$t0?e.each(t.feed.entry,function(t,u){i=u.title.$t;e.each(u.link,function(e,t){t.rel==="alternate"?s=t.href:s="#"});o=u.media$thumbnail?u.media$thumbnail.url.replace(//s72-c//,"/s100-c/"):n.settings.defaultImg;r.push('lispan class="imgCont"img alt="',i,'" src="',o,'"//spana rel="nofollow" title="',i,'" href="',s,'"',i,"/a/li")}):r.push("h5","Sorry!!,No hay post que cargar","/h5");this.container.html(r.join(""));this.lielem.removeData("menuloaded");this.li.data("menuloaded","true")},showError:function(e){if(e.statusText==="error"){this.hideLoader();this.addArrow();this.container.html("h5Error!! No se pudo obtener las publicaciones de blog!/h5")}},addArrow:function(){this.lielem.closest("li").find("span").remove();this.lielem.removeClass("hoverover");this.li.addClass("hoverover");e("span/span",{"class":"menuArrow"}).appendTo(this.li.closest("li"))},menuHelper:function(t){var n=this;t.find("li").hover(function(){var t=e(this);t.find("a:first").addClass("hoverover");var r=e(this).find("ul.verticlemenu li").height()*e(this).find("ul.verticlemenu li").length;t.find("ul.postslist").css({"min-height":r+"px"});n.requestFirstAjax(t)},function(){e(this).find("a:first").removeClass("hoverover")})},addAjaxHtml:function(){this.elem.find("ul ul").remove();this.elem.addClass("menumodern").find("li").find("ul:first").addClass("verticlemenu").wrap(e("div/div",{"class":this.settings.divClass}));e("ul.verticlemenu").after(e("ul/ul",{"class":"postslist"}))},requestFirstAjax:function(e){e=e.find(".verticlemenu li:first-child a");this.url=e.attr("href");this.container=e.closest("ul").siblings("ul");this.li=e;this.hoverOver()}};e.fn.ajaxBloggerMenu=function(n){var r={numPosts:4,divClass:"submenu",postsClass:"postslist",defaultImg:"/default.png"},i=e.extend({},r,n);return this.each(function(){var n=new t(e(this),i)})}})(jQuery);
//
/script
script type="text/javascript"
jQuery(document).ready(function($) {
 jQuery.noConflict();
 jQuery('#menumodern').ajaxBloggerMenu({
  numPosts : 6, // numeros de post o entradas a mostrar
  defaultImg : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsXRLIOIgXYUX4OLzapD9jTcOdv-3BSOIZgk0UzqUxhZTTr30km_bW3d5L0NHu0UAXMd6lyiiLRkrIWzHzOu_K3HoDmB7Ex_-pSq2vWs7f815qTyrAsVSjTH4be7xsBLKZaOaPslP_4Ss/s90/no-avatar.png' // 
  //imagen por defecto
 });
});
/script

Si llegara a teneralgúnproblema con elmenúque no despliega su contenido elimine elcódigojQuery.noConflict(); y reemplaze el jQuery por la variable $

Construcciónde losMenúsy las Etiquetas
una vez ya instalado el estilo(Css) y los script, procedemos a crear el menu para ello busque la etiqueta/body , recuerde realizar la busqueda con CTRL-F.despuésde esta etiqueta peque el siguientecódigo.

ul id="menumodern" class="modern"
 li
  a expr:href='data:blog.homepageUrl' title='Inicio'Inicio/a
 /li
 li
  a href="#"Categorias/a
  ul
   lia href="http://www.javaface-elblogdelprogramador.com/search/label/JAVA"Java/a/li
   lia href="http://www.javaface-elblogdelprogramador.com/search/label/Programas"Programas/a/li
   lia href="http://www.javaface-elblogdelprogramador.com/search/label/Tutoriales"Tutoriales/a/li
   lia href="http://www.javaface-elblogdelprogramador.com/search/label/Blogger"Blogger/a/li
        /ul
 /li
  
/ul

comopodráobservar en losvínculosde laseccióncategoríacolocamos ladirecciónde la etiqueta ocategoríaque desee mostrar en elmenú¿Como obtenemos estasdirecciónes?. solo basta que tenga instalado en su blogg el gadget etiquetas y dar clic a una de ellas en la parte superior del navegadorapareceráladirecciónque necesitamos.
Si se desea colocar masmenússolo deben de añadir el siguientecódigo.
li
a href='#' title='Contactame'Contactos/a
/li

Ahora si desea colocar mas secciones que muestren entradas solo debe de hacer lo siguiente
li
a href="#"Programacion/a
ul
li
a href="http://www.javaface-elblogdelprogramador.com/search/label/JAVA"Java/a/li
li
a href="http://www.javaface-elblogdelprogramador.com/search/label/C#"C#/a/li
/ul
/li


miércoles, 2 de enero de 2013

Descargate este MegaPack de tutoriales J2ME mas 17 ejmplos

1/02/2013

Java 2 Micro Edition (J2ME), es una especificación de un subconjunto de la plataforma Java orientada a proveer una colección certificada de APIs de desarrollo de software para dispositivos con recursos restringidos. Está orientado a productos de consumo comoPDAs,teléfonos móviles oelectrodomésticos.

Contenido del MegaPack
Manual de eclipse para desarrollo de aplicaciones ME
Programacion J2ME con Netbeans
MGMaps J2ME mapping lib tutorial
Java a Tope (J2ME)
J2ME: Step by step
Tutorial para aplicaciones móviles J2ME con NetBeans y Mobility Pack
J2ME-Tutorial
como crear una aplicación J2ME en netbeans(Video)
crear una calculadora en J2ME con netbeans (Video)
17 ejemplos

DESCARGAR

Como aumentar la Velocidad de nuestro Blogg o Web

1/02/2013

Eldíade ayer me di cuenta que varios servicio comoGoogle Site, SkyDriver entre otros no permiten almacenar archivos o script para nuestras webs por elsimplehecho que poseen licencia bueno aya ellos con sus normas les voy a enseñar unasoluciónpara no depender de servidores como estos y aumentar la velocidad de su blogg.

Como la granmayoríade los Webmaster utilizamosJQuery como un script indispensables para tener efectos agradables pero estalibreríatenemos que alojarla en un servidor de archivos y como no se puede subir archivos con licencia podemos hacer lo siguiente :

script type='text/javascript'
//![CDATA[
el contenido

//
/script
Con la sección CDATA que es una norma del XML podemos crear documentos con cualquier tipo de caracteres es decir , que es ideal para colocar cualquier contenido en este caso el JQuery, de esta manera tendremos estalibreríaen la plantilla y ya no dependeremos de alojarlo en servidores lo cual pone un poco lento a nuestro blogg. ladesventaja de utilizar estemétodoes que la Plantilla va a crecer.

Ahora lasimágenes!.

entre masimágenestenga tu blogg o web mas va a demorar la carga de este. entonces una posible idea seria de combertir lasimágenesa base64(que es un sistema de cifrado que utiliza unanumeraciónposicional que usa 64 como base),estemétodode cifrado podemos usarlo en Html, Css, y JS gracias alDATA URL.
pero antes de usarlo tenemos que transformar la imagen puede ir a unConversor Base64


añaden la imagen que van a convertir y clic en elbotónconvertiryobtendránrápidamenteelcódigoBase64,lo copian completamente ypodráncolocarlo en su blogg como si fuera ladirecciónde una imagen.
ejemplo:
img src=" data:image/png;base64,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" alt="Mi maravillosa imagen"
eso seria en codigo Html y en css seria asi:

background-image: url(data:image/png;base64,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);

Comopodránobservaruna de las desventajas de utilizar estemétodoes que elcódigoes demasiado grande y la imagen entre mas grande sea mas grande sera elcódigoles recomiendo queutilicenestemétodoen el fondo de su blogg o web.

Utilizando el Plugin Lazy Load (Ultimaversión2012)
este plugin lo que hace es cargar lasimágenessolo cuando el visitante ingrese a un determinado post o entrada aumentando la carga del blog.

Instalación

script type='text/javascript'
//![CDATA[
(function(a,b){var c=a(b);a.fn.lazyload=function(d){function h(){var b=0;e.each(function(){var c=a(this);if(g.skip_invisible&&!c.is(":visible"))return;if(!a.abovethetop(this,g)&&!a.leftofbegin(this,g))if(!a.belowthefold(this,g)&&!a.rightoffold(this,g))c.trigger("appear"),b=0;else if(++bg.failure_limit)return!1})}var e=this,f,g={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null};return d&&(undefined!==d.failurelimit&&(d.failure_limit=d.failurelimit,delete d.failurelimit),undefined!==d.effectspeed&&(d.effect_speed=d.effectspeed,delete d.effectspeed),a.extend(g,d)),f=g.container===undefined||g.container===b?c:a(g.container),0===g.event.indexOf("scroll")&&f.bind(g.event,function(a){return h()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,c.one("appear",function(){if(!this.loaded){if(g.appear){var d=e.length;g.appear.call(b,d,g)}a("img /").bind("load",function(){c.hide().attr("src",c.data(g.data_attribute))[g.effect](g.effect_speed),b.loaded=!0;var d=a.grep(e,function(a){return!a.loaded});e=a(d);if(g.load){var f=e.length;g.load.call(b,f,g)}}).attr("src",c.data(g.data_attribute))}}),0!==g.event.indexOf("scroll")&&c.bind(g.event,function(a){b.loaded||c.trigger("appear")})}),c.bind("resize",function(a){h()}),a(document).ready(function(){h()}),this},a.belowthefold=function(d,e){var f;return e.container===undefined||e.container===b?f=c.height()+c.scrollTop():f=a(e.container).offset().top+a(e.container).height(),f=a(d).offset().top-e.threshold},a.rightoffold=function(d,e){var f;return e.container===undefined||e.container===b?f=c.width()+c.scrollLeft():f=a(e.container).offset().left+a(e.container).width(),f=a(d).offset().left-e.threshold},a.abovethetop=function(d,e){var f;return e.container===undefined||e.container===b?f=c.scrollTop():f=a(e.container).offset().top,f=a(d).offset().top+e.threshold+a(d).height()},a.leftofbegin=function(d,e){var f;return e.container===undefined||e.container===b?f=c.scrollLeft():f=a(e.container).offset().left,f=a(d).offset().left+e.threshold+a(d).width()},a.inviewport=function(b,c){return!a.rightofscreen(b,c)&&!a.leftofscreen(b,c)&&!a.belowthefold(b,c)&&!a.abovethetop(b,c)},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return!a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})})(jQuery,window)
//
/script
script type="text/javascript"
jQuery.noConflict();
  jQuery("img.lazy").lazyload({
    effect: "fadeIn"
  }); 
/script


Recuerden tener instalado la ultimaversióndel JQuery para que pueda funcionar el plugin y colocarlo antes de la etiqueta/head.

de esta forma aumentarasconsiderablementela carga tu tu sitio web si llegaran a saber otras formas por favordíganmelas ,el conocimiento es de todos :).



Suscribirse a: Entradas (Atom)