miércoles, 1 de mayo de 2013

Descagate este video tutorial sobre AXURE crea prototipos web

5/01/2013



Axure es una herramienta pensada especialmente para los arquitectos de la información. Con ella serás capaz de crearprototipos web de forma profesional. En este curso video2brainaprenderása usarla con un enfoque práctico para que crees tuswireframes interactivos sin conocimientos de programación.
Luz De-León te presenta su curso video2brain Axure. La herramienta definitiva para el arquitecto de la información.
aprenderás a manejar Axure de forma profesional a través de ejercicios prácticos que te llevarán desde los conceptos más básicos hasta conseguir adquirir los conocimientos avanzados necesarios para crear arquitecturas de información complejas.


  • En el primer ejemplo te irás familiarizando con las herramientas de Axure y verás el uso de las herramientas de creación de componentes, la agrupación y organización de elementos, la biblioteca de widgets, el uso de placeholders, la carga de imágenes, etc.
  • En el segundo ejercicio crearás el prototipo de una tienda online, que incluye elementos más avanzados, como una zona de registro, con sus diferentes estados. Trabaja con la usabilidad y la interacción con los elementos.



Contraseña solo post del 2012: javafaceContraseña Actual: www.javaface-elblogdelprogramador.com

Añade a tu sio web el estilo Burbuja(Bocadillo) ideal para títulos o cajas de comentarios

5/01/2013

Hace unosdíasme pidieron como hacer comentarios tipo burbuja las cuales hay dos formas conimágeneso con css puro,aquíles traigo unacolecciónde diferentes formas de burbujas para sus sitios hechas enCSS PURO su autor (nicolasgallagher)pueden ver un ejemplo y apreciar la variedad de efectos.








Contraseña solo post del 2012: javafaceContraseña Actual: www.javaface-elblogdelprogramador.com

martes, 30 de abril de 2013

Añade a tu sitio web un rotulo de noticias animado con JQuery informa a tus visitantes (Blogger)

4/30/2013

Hace unosdíasme pidieron que publique elcódigofuente del rotulo de noticias que tengo en la cabecera del blog ,bastante bueno yfácilde instarla y de personalizar si lo ven un poco simple ya queda a gusto de ustedes.

Instalaciónen Blogger

Paso 1) Añadir el CSS
Dirigase a Plantilla--Editar HTML--clic dentro del editor de blogger y luego realice lacombinaciónde teclas CTRL-F ,esto es para abrir el buscador dentro del editor y no afuera en el navegador ,una vez abierto busque la etiqueta de cierre/b:skin y arriba de esta etiqueta pegue el siguientecódigocss.

.contenedor{
width:800px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}
#conte_noticia { 
width:auto; 
height:120px; 
margin:20px auto; color:#000;
-webkit-box-shadow:0 0 5px #fff; 
-moz-box-shadow:0 0 5px #fff; 
box-shadow:0 0 5px #fff; 
}
.noticia { 
display:none; 
float:left;
height:69px;
background-color:#ffffff; 
margin-left:-10px;
margin-top:14px; 
padding:7px; 
box-shadow: 0px 0px 5px #000;
}
.noticia:after{
content:"";
position:absolute;
margin-left:-7px;
margin-top:32px; 
float:left;
border-top:10px solid #1067dd;
border-right:20px solid transparent;
width:0px;
height:0line-height:0;
} 
.noticia p { 
font-size:18px; 
font-family: "wf_SegoeUILight", "Segoe UI Light", "Segoe WP Light", 
"wf_SegoeUI", "Segoe UI", "Tahoma", Arial, Verdana,sans-serif;     
color:#0a0a0a;
text-align:left;
} 
.noticia .author { 
margin:5px 0px;
font:13px Georgia,serif,Times; 
color:#1572e4;
padding-top:1px; 
text-align:left;
}
.noticiamark { 
display:none; 
float:left; 
letter-spacing:-35px; 
line-height:300px; 
color:#0a0a0a;
}
.rightnoticia {
margin-right:auto;
margin-left:auto;
}
.rightnoticia img{
margin-bottom:80px;
width:55px;
height:55px;
border:solid 2px #ffffff; 
border-radius: 50%;
background-color:#cccaca; 
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7);
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7);
box-shadow: 0 0 3px rgba(0, 0, 0, .7);
margin-left:auto;
margin-right:auto;
}


Paso 2) Añadir el Codigo JavaScript
terminado el paso 1, busque la etiqueta de cierre/head justo arriba de esta etiqueta pegue el siguiente codigo JS.

  
var noticiaSpeed = 500;
// Velocidad del recipiente noticia para ampliar
var noticiaContainerSpeed = 1000;
// Tiempo de la noticia que será visible
var shownoticiaSpeed = 5000;
// Tiempo de la pantalla estará vacía
var cleanScreenSpeed = 500;
// Ancho de la caja noticia
// Sería genial para crecer automáticamente al tamaño del texto que contiene en el futuro.
var conte_noticiaWidth = "600px";
// La noticias que nos va a mostrar
var noticias = [ {
  "noticia" : "Para copiar cualquier contenido,utiliza CTRL-C.",
  "author" : "by- Hannibal T"
 }, {
  "noticia" : "Esta Website funciona mejor con,Navegadores Actualizados.",
  "author" : "by- Hannibal T"
 }, {
  "noticia" : "Casi todos los enlaces de descarga, estan actualizados :D",
  "author" : "by- Hannibal T"
 }, {
  "noticia" : "Si existe un enlace que no funciona,avisame..!!",
  "author" : "by- Hannibal T"
 }, {
  "noticia" : "Comparte las entradas,con tus amigos..!!",
  "author" : "- Hannibal T"
 }, {
  "noticia" : "Muy pronto cuenta premiun en MEGA",
  "author" : "- Hannibal T"
 }, {
  "noticia" : "Nueva Plantilla ModernFace 3D ,mejor interactividad",
  "author" : "- Hannibal T"
 }
 
];
var currentnoticiaIndex=0;jQuery.noConflict();jQuery(document).ready(function(){if(jQuery.browser.webkit){jQuery(".noticiamark").css({"margin-top":"-22px"});jQuery(".rightnoticia").css({"margin-top":"-24px"})}startAnimation()});var startAnimation=function(){setTimeout(function(){showLeftnoticia()},noticiaSpeed)};var showLeftnoticia=function(){jQuery(".leftnoticia").show();setTimeout(function(){showRightnoticia()},noticiaSpeed)};var showRightnoticia=function(){jQuery(".rightnoticia").show();setTimeout(function(){shownoticiaContainer()},noticiaSpeed)};var shownoticiaContainer=function(){jQuery(".rightnoticia").css({"margin-left":"-10px"});jQuery("").html(noticias[currentnoticiaIndex].noticia).css({display:"none"}).appendTo(jQuery(".noticia"));jQuery("

").addClass("author").html(noticias[currentnoticiaIndex].author).css({display:"none"}).appendTo(jQuery(".noticia"));jQuery(".noticia").show().animate({width:conte_noticiaWidth},noticiaContainerSpeed,function(){shownoticia()})};var shownoticia=function(){jQuery(".noticia").children().fadeIn();setTimeout(function(){clearnoticia()},shownoticiaSpeed)};var clearnoticia=function(){if(currentnoticiaIndex==noticias.length-1){currentnoticiaIndex=0}else{currentnoticiaIndex++}jQuery(".noticiamark").fadeOut();jQuery(".noticia").fadeOut(function(){jQuery(".rightnoticia").css({"margin-left":"0px"});jQuery(".noticia").empty().css({width:"0px"});setTimeout(function(){startAnimation()},cleanScreenSpeed)})};



por el momento usted vera 7 noticias escritas que puede reemplazar y si quiere agregar mas noticias debera de tener en cuenta lo siguiente: al ser una matriz tenga mucho cuidado con las llaves ,para agregar otra notifica deberá de colocar la coma "," en el cierra de la ultima "}" noticia es decir:
var noticias = [
           {
  "noticia" : "Nueva Plantilla ModernFace 3D ,mejor interactividad",
  "author" : "- Hannibal T"
 }, {
  "noticia" : "Nueva Plantilla ModernFace 3D ,mejor interactividad",
  "author" : "- Hannibal T"
 }
];

Paso 3) Añadir la estructura o Html
terminado el paso 1 y 2 guarde los cambios , le recuerdo que este script funciona con el plugin de jQuery debera de tenerlo instalado.
Dirigase a Diseño--Añadir un Gadget -- escoja laopciónHTML/JavaScript y pegue el siguiente codigo HTML.
div class='contenedor'
!--ROTULO NOTICIAS--
       div id="conte_noticia"
   p class="noticiamark leftnoticia"/p
   div class="noticia"
            /div
   p class="noticiamark rightnoticia"
             img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjp-wSGz5Z4x6Oct69od29rfw56T-TVRDPWTu1aYfWw8ovqfCgtiLhE5GTsnn9OHO1qy3MjG1pRNWqbxamDzYG7MfsDhjzdCk6-7gIaIBCdNT8A0-VzAc3H4CQVVRbIA4_bJ1Wi0eKhjE/s86/FACE.png'/
            /p
  /div
!--FIN--
/div


DESCARGATE EL CODIGO FUENTE COMPLETO

Contraseña: www.javaface-elblogdelprogramador.com



Efecto Hover con CSS3 ideal para tus anuncios e imágenes en Blogger (Segunda Forma)

4/30/2013

Hoy les traigo otro efecto hover con CSS3 anteriormente ya vimos laprimera forma, esta es básicamentela mismalógicapero efecto diferente tipo zoom off les presento un ejemplo de ello.


Instalaciónen Blogger

Paso 1) Añadir el Css3
Nos dirigimos a Plantilla--clic en Editar HTML--clic dentro del editor de blogger--y luego realice lacombinaciónde teclas CTRL-F,esto es para abrir el buscador dentro del editor y no afuera en el navegador. una vez hecho esto busque la etiqueta de cierre/b:skin y arriba de esta etiqueta pegue el siguiente codigo CSS3.

Mostrar Codigo


Paso 2) Añadir la estructura o HTML
terminado de pegar el codigo css3 guarde los cambios y dirigase a Diseño--Añadir un Gadget-- y escoja laopción Html/JavaScript y pegue el siguientecódigoHTML.

div class="main" 

            div class="conte_padre panel_efecto"
                    img src="imagen/ey.jpg" /
                    div class="mascara_efecto"
                        h2Anunciate/h2
                       pTemenos los precios mas bajos del Mercado/p
                        a href="#" class="info"Leer Mas/a
                    /div
             /div
             !----
             div class="conte_padre panel_efecto"
                    img src="imagen/ey.jpg" /
                    div class="mascara_efecto"
                        h2Anunciate/h2
                       pTemenos los precios mas bajos del Mercado/p
                        a href="#" class="info"Leer Mas/a
                    /div
             /div
             !----
             div class="conte_padre panel_efecto"
                    img src="imagen/ey.jpg" /
                    div class="mascara_efecto"
                        h2Anunciate/h2
                       pTemenos los precios mas bajos del Mercado/p
                        a href="#" class="info"Leer Mas/a
                    /div
             /div
             !----
             div class="conte_padre panel_efecto"
                    img src="imagen/ey.jpg" /
                    div class="mascara_efecto"
                        h2Anunciate/h2
                       pTemenos los precios mas bajos del Mercado/p
                        a href="#" class="info"Leer Mas/a
                    /div
             /div
/div


si se llegara a necesitar colocar otro bloque solo deberá de aumentar lo siguiente.
div class="conte_padre panel_efecto"
                    img src="imagen/ey.jpg" /
                    div class="mascara_efecto"
                        h2Anunciate/h2
                       pTemenos los precios mas bajos del Mercado/p
                        a href="#" class="info"Leer Mas/a
                    /div
             /div


DESCARGATE EL CODIGO FUENTE COMPLETO

Contraseña: www.javaface-elblogdelprogramador.com


Descargate este Pack de NODE.JS y aprende un poco mas de Javascript ideal para principiantes

4/30/2013

Node es un intérpreteJavascript del lado del servidor que cambia la noción de cómo debería trabajar un servidor. Su meta es permitir a un programador construir aplicaciones altamente escalables y escribir código que maneje decenas de miles de conexiones simultáneas en una sólo una máquina física.

Contenido del Pack
  • Fácil y rápido Instalar Nodejs y npm en Ubuntu 12.10
  • instalando nodejs y socket io en windows 7
  • Plantillas de coffeescript en Nodejs


Contraseña solo post del 2012: javafaceContraseña Actual: www.javaface-elblogdelprogramador.com

Descargate Oracle Maestro 11.11 FULL y administra tu base de datos ORACLE

4/30/2013


Oracle Maestro es el mejor software de administración de interfaz gráfica de usuario de Windows creado para el control, desarrollo y administración de bases de datos de Oracle.

Oracle Maestro te ofrece una serie de herramientas que te permiten realizar todas las operaciones de base de datos necesarias tales como crear, editar y duplicar objetos de base de datos; Además, puedes crear consultas visualmente, ejecutar y optimizar consultas SQL y secuencias de comandos SQL, ver y editar datos incluyendo BLOBs, representar datos como diagramas, exportar e importar datos desde/a los formatos de archivo más populares, analizar tus datos de forma resumida en jerarquías y vistas multidimensionales (cubos OLAP) y utilizar muchas otras herramientas implementadas para hacer que tu trabajo con Oracle server sea cómodo y eficaz.

Administración de base de datos fácil:


  • Oracle Maestro te permite crear y eliminar bases de datos rápidamente. Los perfiles de base de datos te ofrecen la oportunidad de conectarte a bases de datos en un instante y trabajar sólo con las bases de datos seleccionadas. Administración de objetos de base de datos poderosa:
  • Oracle Maestro te ofrece una capacidad para administrar objetos de base de datos. Por ejemplo, puedes realizar operaciones con un grupo de objetos, así como con un solo objeto en el administrador de objetos, copiar un objeto de una base de datos a otra por una operación de arrastrar y soltar dentro del árbol del explorador, utilizar el Portapapeles de Windows para copiar un conjunto de objetos y así sucesivamente. Trabaja con tablas y subobjetos de tabla:
  • Los asistentes y editores de Oracle Maestro te permiten crear, editar y eliminar tablas, así como sus campos, índices, triggers y claves foráneas en un par de operaciones simples. Creación y ejecución de consultas:
  • Oracle Maestro proporciona dos potentes herramientas que te permiten editar texto de consulta directamente con finalización de código y resaltado de sintaxis o crear un diagrama de consulta visualmente por seleccionar tablas y campos, establecer vínculos entre las tablas y así sucesivamente. Admite las últimas funciones de Oracle:
  • Utiliza Oracle Maestro para trabajar con cualquier versión de Oracle server desde 9.x/10.x. Entre otras funciones y objetos implementados en las últimas versiones del servidor, este software admite usuarios, vistas, triggers, funciones, procedimientos, secuencias, trabajos, sinónimos, paquetes, tipos, colas, y mucho más. Herramientas de administración de datos potentes:
  • Con Oracle Maestro puedes ver y editar datos de la tabla (incluyendo campos BLOB), exportar e importar datos desde/a MS Excel, MS Access, DBF, XML, TXT, CSV y otros formatos, obtener volcado de datos SQL y mucho más. Trabaja con metadatos de bases de datos:
  • Oracle Maestro te proporciona varias herramientas para trabajar con metadatos de base de datos y secuencias de comandos SQL, incluyendo plegado de código. Administración de seguridad:
  • Oracle Maestro te proporciona una manera eficiente de administrar privilegios de acceso. Puedes conceder/revocar permisos para un objeto de base de datos concreto, como tabla o función, o operar con privilegios, roles, usuarios. Personalización completa según tus necesidades y preferencias:
  • En Oracle Maestro puedes personalizar el comportamiento de todas tus herramientas, seleccionar una combinación de interfaz de usuario y establecer un montón de otras preferencias.




Contraseña solo post del 2012: javafaceContraseña Actual: www.javaface-elblogdelprogramador.com
Suscribirse a: Entradas (Atom)