JavaFace-elblogdelprogramador

jueves, 4 de abril de 2013

Descargate el Manual del Buen diseñador Gráfico

4/04/2013

En la etapa de programador tendremos la necesidad de diseñar nosotros mismo alguna imagen o saber mezclar colores para esto tendremos que tener conocimientosbásicosde diseñográficocomparto con ustedes un trabajo impresionante que realmente me gusto ,Ángel David Vargas es el creador de este manual como proyecto de tesisde lalicenciatura en diseño gráfico por la universidad autónoma del estado de México su trabajo es sumamente buenoe interesante donde se tocan los puntos esenciales del diseño y nos habla también los tipos de diseñadores que nos podemos encontrar, el diseño en sociedad, enlaces de interés y hasta varias entrevistas con habituales de este mundo. pueden observar un ejemplo de su trabajo su sitio web es rico en diseñovisitary muy bueno para mi gusto.

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

DescargarGracias por tu visita

miércoles, 3 de abril de 2013

Descargate este video tutorial y Aprende a Diseñar tu sitio web con Adobe Fireworks

4/03/2013

Plantea y diseña tu propio sitio web conAdobe Fireworks con este curso video2brain.aprenderásla estructura, color, tipografía para empezar a crear cada uno de los elementos necesarios para un diseño equilibrado e interactivo, empleando las herramientas que Fireworks pone a tu disposición.

Armando Sotoca te presenta el curso Diseño web con Adobe Fireworks.

Con este curso aprenderás a usar las herramientas necesarias para crear un proyecto web desde cero usando únicamente Adobe Fireworks. Paso a paso, desde la creación del menú hasta efectos interactivos que simulen comportamientos como si la página ya estuviese maquetada en HTML. Y todo ello sin necesidad de escribir niuna sola línea de código.

En un primer bloque observaras como definir la estructura de una página home o de inicio para, posteriormente crear una estructura interna de tipo blog.aprenderása crear diferentes bloques de contenido principal, zonas secundarias, diseñaremos listas de comentarios, formularios, etc.

Este cursoincluye todos los archivos necesarios creados a lo largo del curso, incluídos en los archivos base de descarga. También se incluye un pequeño documento de texto adicional para aquellos elementos que no se pueden adjuntar en los archivos descargable, así como enlaces a sitios de interés.

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

DescargarGracias por tu visita

domingo, 24 de marzo de 2013

Simple TooltipText con CSS3 dale mas vida a tus vinculos

3/24/2013

A la hora de crear un vinculo quedireccionaa otro sitio ,estosvínculospor defecto son muy simples y en verdad feos por que si queremos colocar un tootiptext que muestre un pequeño mensaje de que se trata ese vinculo por medio de title el resultado es igual de simple,entonces podemos crear nuestros propios estilos a nuestro gusto,aquíles dejo un ejemplo de un TooltipText ,clic enResult

Instalación
Paso 1) Añadir el CSS3
Dirigase a laopciónPlantilla--Editar HTML-- realice lacombinaciónde teclas CTRL-F y busque
/b:skin justo arriba de ella pegue el siguiente codigo

Mostrar Codigo

.tooltip {
 position: relative;
 display: inline-block;
}

.tooltip span {
 background: #54b8f2;
 border: 4px solid #54b8f2;
 bottom: 30px; /** Aumentar para mayor efecto **/
 border-radius: 6px;
 color: white;
 font-size: 13px;
 left: 50%;
 line-height: 16px;
 margin-left: -88px;
 opacity: 0;
 padding: 8px;
 position: absolute;
 text-align: center; /* Texto centrado */
 /** Transiciones **/
-webkit-transition:0.2s;
 -moz-transition:0.2s;
  -o-transition:0.2s;
   transition:0.2s;
 visibility: hidden;
 width: 150px; /**Ancho**/
}
.tooltip span img{
	float:left;
	border:none;
	margin-left:auto;
	margin-right:auto;
}

a:hover.tooltip span {
 bottom: 50px; /*distancia del vinculo al tooltip*/
 opacity: 1;
 visibility: visible;
 z-index: 100;
}

/**Flecha del tooltip**/
 .tooltip span:after {
  bottom: -14px;
  border-left: 10px solid transparent;
  border-top:10px solid #54b8f2;
  border-right: 10px solid transparent;
  content: '';
  height: 0;
  left: 50%;
  margin-left: -9px;
  position: absolute;
  width: 0;
 }
 .contenedor{
	 text-align:center;
	 margin-left:auto;
	 margin-right:auto;
	 width:35%;
	 position:absolute;
	 top:25%;
 }
 .contenedor a{
     display: inline; 
	 padding:5px 15px;
     margin:0 5px;
	 text-align:center;
	 font-family:Georgia, "Times New Roman", Times, serif;
	 font-size:18px;
	 color:#090600;
	 text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
	 text-decoration:none;
	 background-color: rgba(34,141,224, 0.6);
     background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
     background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
     background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
     background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
     background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	 -moz-border-radius: 4px;
     border-radius: 4px; 
	 border:1px solid #090600;
 }

Puede modificar el estilo a su gusto como tipo de letra color, guarde los cambios.

Paso 2) Añadir losvínculos
Dirigase a laopciónDiseño--añadir un gadget-- y escoja laopciónHTML/JavaScript y pegue elsiguiente código.

div class='contenedor'
!--INICIO--

!--1--
a class="tooltip" href="#"Blogger
 span
img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg25eg03u-BFM28YTLm1HaFhfzM5Gg-PjFdBZPfuekFrSh91Qj609LRmLt5DqeacFjlU_2v957rnGe4vV1bQp516_0J8ybjK9pfXLgmfuNPY2U4FwHMMrNtx-hUJSuSsUKchbKInebEU9go/" /
  Blogger es un servicio creado por PyraLabs
 /span
/a

!--2--
a class="tooltip" href="#"Wordpress
 span
  img src="http://gamerchants.com/images/icon-wordpress-32x32.png" /
    WordPress es un sistema de gestión de contenido 
 /span
/a

!--FIN--
div

Ahora la forma aquí planteada funcionara dentro de un gadget,pero también dentro de una entrada solo debe de especificar la clase del css cuyo nombre estooltip .

a class="tooltip" href="#"JavaFace-elblogdelprogramador
 span
    Sitio sobre programación y mas
 /span
/a

(si te sirvio este post ayudame dando clic ▼ en la imagen :) )

sábado, 23 de marzo de 2013

Descargate este video tutorial y Aprende Crea programas multiplataforma y aplicaciones web con Python y descubre el framework Django

3/23/2013

Aprende con este curso video2brain tus propios programas desarrollados en el lenguaje Python.aprenderáscómo programar usando este lenguajemultiplataforma, con el que podrás crear tus propios programas para ejecutarlos tanto en Windows o Mac OSX como en Linux. También verás cómo usar Python para tus aplicaciones web y te enseñaran las ventajas de trabajar con elframework Django.

José Vicente Carrataláte guiara paso a paso a crear programas en el lenguaje Python. Además, el curso incluye una unidad dedicada aDjango: El framework de Python que te permite crear aplicaciones web 2.0 de una maneratremendamente fácil y productiva. (RECOMENDADO)

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

DescargarGracias por tu visita

viernes, 22 de marzo de 2013

Descargate este Video tutorial sobre Mi primera web dinámica con Dreamweaver sin necesidad de programar

3/22/2013

Crea una web sin necesidad de programar es muy frecuente que se piense que la creación de sitios web que saquen sus contenidos de bases de datos está limitada a programadores expertos. Nada más lejos de la realidad:Adobe Dreamweaver nos ofrece herramientas que,sin necesidad de programar en lenguajes de servidor, recuperarán datos y generarán el código HTML que los muestre al usuario final, y en este curso video2brain aprenderás precisamente a realizar esta acción.

Jorge González Villanueva te presenta su curso Mi primera web dinámica con Dreamweaver. Crea una web sin necesidad de programar.Crear un sitio web complejo, cuyos contenidos cambien con el paso del tiempo utilizando solo HTML, es una tarea repetitiva y pesada que nos podemos ahorrar utilizando lenguajes de servidor.

aqui aprenderas a utilizar Adobe Dreamweaver paragenerar contenidos utilizando PHP y sin necesidad de programar con él. Si tienes ganas de ampliar tu capacidad de generar contenidos web y no posees de conocimientos sobre PHP, este será tu curso.

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

DescargarGracias por tu visita

Efecto Hover con CSS3 ideal para tus anuncios en Blogger (Primera Forma)

3/22/2013

Hoy les presento una forma agradable y vistosa de darle vida a los anuncios o a cualquier imagen que ustedes deseen todo gracias a las transiciones de CSS3 ,pueden ver un ejemplo de ello da clic enResult.

Instalación

Paso 1) Añadir el CSS3 o estilo

Dirigase a laopciónPlantilla--clic en Editar HTML-- realice lacombinaciónde teclas CTRL-Fapare serael buscador y escriba/b:skin , justo arriba pegue el siguientecódigoCSS3.

Mostrar Codigo

.contenedor {
    position:relative;
    width:680px;
    margin: 0 auto;
}
.vista {
    width: 278px;
    /*ancho*/
    height: 231px;
    /*alto*/
    margin:-5px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    -webkit-box-shadow: 1px 1px 2px #e6e6e6;
    -moz-box-shadow: 1px 1px 2px #e6e6e6;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirR8Je2aB6ek5H0wxGivYpgIdjFX3CJFj3_Xffq05lDlhepzcoJpVvmEJFTRuS0aPmKHDGDeWSiWE2V181RJeloHhUy6J9SIiVGrDgPcLWlTreS9fFgm2m_tms5dU_eXJNCWNAeoBAW3M/s300/bgimg.jpg) no-repeat center center;
}
.vista .mascara, .vista .content {
    width: 278px;
    height: 231px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.vista img {
    display: block;
    position: relative;
}
.vista h2 {
    font-family:"wf_SegoeUILight", "Segoe UI Light", "Segoe WP Light", "wf_SegoeUI", "Segoe UI", "Tahoma", Arial, Verdana, sans-serif;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 20px;
    font-weight:bold;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0;
}
.vista p {
    font-family:"wf_SegoeUILight", "Segoe UI Light", "Segoe WP Light", "wf_SegoeUI", "Segoe UI", "Tahoma", Arial, Verdana, sans-serif;
    font-size: 16px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center;
}
.vista a.info {
    font-family:"wf_SegoeUILight", "Segoe UI Light", "Segoe WP Light", "wf_SegoeUI", "Segoe UI", "Tahoma", Arial, Verdana, sans-serif;
    font-weight:bold;
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background-color: rgba(0, 0, 0, 0.5);
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
    background-image: -moz-linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
    background-image: -ms-linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
    background-image: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
    color: #fff;
    text-transform: uppercase;
    -webkit-box-shadow: 0 0 1px #000;
    -moz-box-shadow: 0 0 1px #000;
    box-shadow: 0 0 1px #000;
    border-radius:6px;
}
.vista a.info: hover {
    -webkit-box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;
}
.imagen_efecto img {
    width: 278px;
    /*ancho*/
    height: 231px;
    /*alto*/
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.imagen_efecto .mascara {
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    background-color: rgba(26, 145, 236, 0.6);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.imagen_efecto h2 {
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -o-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    transform: translateY(-100px);
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.imagen_efecto p {
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    -o-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.imagen_efecto:hover img {
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}
.imagen_efecto a.info {
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.imagen_efecto:hover .mascara {
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}
.imagen_efecto:hover h2, .imagen_efecto:hover p, .imagen_efecto:hover a.info {
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}
.imagen_efecto:hover p {
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    -ms-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
.imagen_efecto:hover a.info {
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

Ahora el tamaño de lasimágeneslo puedes cambiar por defecto este en un tamaño 278 x 231 pixeles y el tamaño del contenedor es de 600 pixeles esto lo puedes cambiar al inicio delcódigocss3, guarde los cambios

Paso 2) Añadir lasimágenes
Terminado el paso 1, vamos añadir el contenedor de lasimágenes, para estodirígetea Diseño--escojalaopciónañadir un gadget---HTML/JavaScript -- y pegue el siguiente codigo.

div class="contenedor"
               !--ANUN1--
                div class="vista imagen_efecto"
                    img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4dGkGtVP3fbjhg3Q5jCyvclqD7d23MNF4Dpw3iDZ8KER22So4FcrELsOs2sp3mFrvzyptHDPlcLrjPs3POmcPIISZjyRmjiItMXcgMRWlo78655tUv5c0Il_xnyPctItM3e0aI6r-j84/s278/ey.jpg" /
                    div class="mascara"
                        h2Anunciate/h2
                        pTenemos los mejores precios del internet/p
                        a href="#" class="info"Leer mas/a
                    /div
                /div  
                !--ANUN2--
                 div class="vista imagen_efecto"
                    img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4dGkGtVP3fbjhg3Q5jCyvclqD7d23MNF4Dpw3iDZ8KER22So4FcrELsOs2sp3mFrvzyptHDPlcLrjPs3POmcPIISZjyRmjiItMXcgMRWlo78655tUv5c0Il_xnyPctItM3e0aI6r-j84/s278/ey.jpg" /
                    div class="mascara"
                        h2Anunciate/h2
                        pTenemos los mejores precios del internet/p
                        a href="#" class="info"Leer mas/a
                    /div
                /div  
                !--ANUN3--
                 div class="vista imagen_efecto"
                    img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4dGkGtVP3fbjhg3Q5jCyvclqD7d23MNF4Dpw3iDZ8KER22So4FcrELsOs2sp3mFrvzyptHDPlcLrjPs3POmcPIISZjyRmjiItMXcgMRWlo78655tUv5c0Il_xnyPctItM3e0aI6r-j84/s278/ey.jpg" /
                    div class="mascara"
                        h2Anunciate/h2
                        pTenemos los mejores precios del internet/p
                        a href="#" class="info"Leer mas/a
                    /div
                /div  
               !--ANUN4--
                div class="vista imagen_efecto"
                    img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4dGkGtVP3fbjhg3Q5jCyvclqD7d23MNF4Dpw3iDZ8KER22So4FcrELsOs2sp3mFrvzyptHDPlcLrjPs3POmcPIISZjyRmjiItMXcgMRWlo78655tUv5c0Il_xnyPctItM3e0aI6r-j84/s278/ey.jpg" /
                    div class="mascara"
                        h2Anunciate/h2
                        pTenemos los mejores precios del internet/p
                        a href="#" class="info"Leer mas/a
                    /div
                /div  
                !--fin--
 /div  
!--fin--

Guarda los cambios y yatendráimágenesmas agradables con descripciones,esta es una de las primeras formas que presentare existen muchas mas.

JavaFace-elblogdelprogramador

social counter

jueves, 4 de abril de 2013

Descargate el Manual del Buen diseñador Gráfico

miércoles, 3 de abril de 2013

Descargate este video tutorial y Aprende a Diseñar tu sitio web con Adobe Fireworks

domingo, 24 de marzo de 2013

Simple TooltipText con CSS3 dale mas vida a tus vinculos

sábado, 23 de marzo de 2013

Descargate este video tutorial y Aprende Crea programas multiplataforma y aplicaciones web con Python y descubre el framework Django

viernes, 22 de marzo de 2013

Descargate este Video tutorial sobre Mi primera web dinámica con Dreamweaver sin necesidad de programar

Efecto Hover con CSS3 ideal para tus anuncios en Blogger (Primera Forma)

Guia instructiva Offensive Security en PDF convierte en un White Hacker

Categorias

Blog Archive

Entradas populares