viernes, 3 de mayo de 2013

Descargate este video tutorial sobre diseño de APP para IPhone

5/03/2013



Luz De-León te presenta el cursoDiseño de app para iPhone. El móvil se ha convertido en algo más que un teléfono y una de las razones de que esto sea así han sido las aplicaciones (Apps) y su extensión en el mundo del ocio, el trabajo, la comunicación, etc. El diseño y desarrollo por tanto de aplicaciones para smarts phone son actividades en auge, cada vez más reclamadas por diferentes tipos de empresas y profesionales. Aprende con la experta , Luz De-León con ellasabráscuáles son los requisitos queApple exige a las Apps que se ofrecen en el Apple Store, repasa a través de algunos ejemplos todo lo que se puede (y no se puede) hacer al diseñar una App y realiza un completo ejercicio práctico de diseño de interfaz para App de iPhone.Con los archivos base serás capaz de reutilizar el archivo de Photoshop que se incluye y aprender desde dentro cómo está concebido y organizado el diseño de esta App de una agenda escolar para que practiques y seas capaz de crear las tuyas propias.

Queaprenderás:
  • Comenzaremos con los elementos básicos,
  • crearas la pantalla de inicio, la de log-in, con su formulario y la de bienvenida.
  • comportamientos en el diseño en Photoshop,
  • diseñaremos listados, un calendario, una botonera y todos los elementos necesarios para crear esta App de agenda escolar.

DESCARGAR




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
Suscribirse a: Entradas (Atom)