sábado, 9 de febrero de 2013

Slider de imágenes estilo ModernUI con JQuery para Blogger

2/09/2013

Hace unosdíasme pidieron un ejemplo delSlider ModernUI que tengo en la entrada del blog para destacar la entrada mas reciente , el siguientecódigoa explicar no es muy complejo solo se debe de modificar los estilos (CSS) si se desea tener una imagen mas elaborada y el efectoseguirásiendo el mismo.

Instalar el CSS en Blogger
primero dirigase a Plantilla-Editar HTML- y realice la siguientecombinaciónde teclas CTRL-F y busque la siguiente linea/b:skin justo arriba de esta linea Pegue el siguientecódigocss.
.Slider_modern, .list-tile
{
color:#fff;
float:left;
height: 375px;/*defino el tamaño de las imagenes*/
width:500px;
margin:3px;
overflow:hidden;
position:relative;

}
.Slider_modern img, .list-tile img { border:none; }
.Slider_modern.me.slide-backa.metroBig {
position:absolute;
left:0; bottom:0;
padding: 0 0 12px 12px;
text-decoration:none;
}
.Slider_modern a:link, .Slider_modern a:visited { color:#fff; text-decoration:underline; }
.Slider_modern a:hover { color:#fff; text-decoration:none; }
.Slider_modern p { font-size:13px; line-height: 16px; padding:10px; }
.Slider_modern .titulo_modern, .list-tile .titulo_modern {
position:absolute;/*defino el estilo del texto que describa la imagen*/
bottom:0px;
color:#fff;
font: italic 21px Georgia;
text-shadow: 0px 3px 3px rgba(255,255,255,0.5),0px -1px 1px rgba(0,0,0,.3);
left:0px;
width:100%;
padding:0 0 6px 6px;
z-index:30;
}
.Slider_modern a.titulo_modern, .list-tile a.titulo_modern { text-decoration:none; }
.Slider_modern.me.metroBig { padding-top:45px; }
.Slider_modern,.Slider_moderndiv,.list-tilediv
{ backface-visibility:hidden;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
}
.Slider_moderndiv,.list-tilediv
{ top:0px;
left:0px;
margin:0px;
height:100%;
width:100%;
position:absolute;
z-index:20;
}
.list-tilediv
{ position:relative;
}

img.full , a.full
{
display:block;
margin:0px;
height:100%;
width:100%;
}
.list-tilediv { background-color:transparent; }
.Slider_modern.back, .Slider_modern.slide-back,.Slider_modern.flip-back, .flip-list .flip-back
{
position:absolute;
z-index:10;
}


una vez hecho ,CTRL-F y busque la siguiente linea de codigo/head y pegue lo siguiente .

script src="https://sites.google.com/site/javafacesitefile/fileblog/MetroJs.js" type="text/javascript"/script
script type="text/javascript"
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery(".Slider_modern,.flip-list").liveTile();
});
/script

Debera tener instalado el scrip JQuery para que funcione correctamente el Slider.
una vez hecho esto vamos a colocar la estructura o el contenedor de las imagenes para esto vaya a
Diseño-clic en añadir un gaget-y escoja la opcion HTML/Javascript y pegue elsiguientecódigo.
div align="left"
div class="Slider_modern" data-stops="100%" data-speed="750" data-delay="3000"
span class="titulo_modern"
Descripción de la imagen
/span
div
img src="img/img1.jpg" alt="1"/
/div

div
img src="img/img2.jpg" alt="2"/
/div

/div
/div

y listotendráun slider estilo ModernUI :)
(si te sirvio este post ayudame dando clic ▼ en la imagen :) )

domingo, 3 de febrero de 2013

Descargate este tutorial y aprende a crear paginas web dinámicas con CSS,DHTML Y AJAX

2/03/2013




Con este tutorial encontraras ya aprenderas la definiciones exactas de lo que es CCS, DHTML y AJAX, sus funciones principales y ejemplos muy utilizados actualmente en Internet, es importante mencionar que para aplicar los conocimientos de este libro debe tener unaprendizaje básico de programación JavaSCRIPT, HTML, PHP y MYSQL, aun que AJAX puede trabajar en ASP ó PHP en este tutorial se explicara su funcionamiento en PHP y en un Servidor Apache con base de datos MYSQL5.

Contenido del Tutorial

Capítulo 1 : CSS
Capítulo 2 : DHTML
Capítulo 3 : AJAX

DESCARGAR

jueves, 31 de enero de 2013

Crea tu propia web en 7 pasos ideal principiantes (Videotutorial)

1/31/2013

Si eres principiante y te da curiosidad como crear una pagina web,este tutorial es para ti aqui podras aprender a:

¿Que es un dominio y hosting?
Cuales son los 5 factores clave a tener en cuenta antes de comprar tu dominio (¿sabias que hay libros que se venden sólo por el nombre?) pues el dominio (nombre de tu página web) debes elegirlo con cuidado para aumentar las probabilidades de que las personas entren
Como comprar tu dominio y hosting profesional en 15 minutos
Como instalar el sistema para crear tu página web con 4 clics del ratón,así como lo lees! nada de códigos complicados, nada de aprender 20 programas para hacer tu página
Como cambiar totalmente el diseño o el aspecto visual de tu página web esta vez con 2 clics del ratón
Un resumen rápido del significado que tienen algunos colores que puedes incluir en tu página web
Como añadir contenido en texto en tu página web, si sabes utilizar el programa word esto será pan comido para ti!
Como añadir imágenes, incluso una galería de imágenes a tu página web.

Contenido de los VideoTutoriales

Como comprar tu Dominio y Hosting en 15 Minutos
Como Instalar el Mejor Sistema Para Hacer tu Página Web
Como Cambiar el Diseño de tu Página Web Con un Par de Clics
Como Cargar Contenido en tu Página Web: Texto, Imágenes, Audio, Video
Definiendo la Estrategia Para Conseguir Potenciales Clientes en Internet
Haciendo Una Investigación de Mercado en Internet
Como Optimizar tu Página Web Para Vender
Videos Extra: Como escribir artículos, crear correos electrónico, formulario de registro, medir las visitas de tu WEB.

DESCARGAR

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.