JavaFace-elblogdelprogramador

sábado, 13 de abril de 2013

Descargate este video tutorial sobre Maquetacion web con Frameworks

4/13/2013

¿Te cansa maquetar una web siempre igual? ¿Te hartan las incompatibilidades entre navegadores? Descubre cómo un framework puede ayudarte a centrarte en lo realmente exclusivo de cada proyecto. Aprende con video2brain, cómo pueden ayudarte y descubre con un ejemplo práctico cómo usarlos paso a paso.

Marcos González Sancho te presenta su curso Maquetación web con frameworks. Mejora tu flujo de trabajo web usando un framework.Con este workshop descubrirás qué son los frameworks para desarrollo web, qué clases de frameworks tenemos a nuestra disposición y cuáles son los aspectos clave que hacen a un framework ser bueno o malo.

960 Grid System es un framework sencillo pero muy didáctico, que te permitirá aprender las bases de estos sistemas para poder dar el salto a otro nivel. Te enseñaremos los fundamentos que hay detrás de él y que son referencia para muchos otros frameworks existentes.

Podrás hacer tus primeros prototipos sobre papel con las plantillas en PDF que incorpora y aprenderás a instalar las extensiones de Fireworks y Photoshop para diseñar de forma adaptada en estos programas. A la hora de maquetar apreciarás el enorme ahorro de tiempo que supone el uso de estas herramientas y la gran compatibilidad que guardan con los diferentes navegadores.

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

DescargarGracias por tu visita

sábado, 6 de abril de 2013

Descargate este vídeo tutorial sobre CSS avanzado y practico 2013 conviertete en un Master en CSS

4/06/2013

Diseña y desarrolla tu propio sitio usando CSS y aprende las ventajas de delegar toda la maquetación a las hojas de estilo y la estructura a HTML

José Vicente Carratalá te presenta su curso CSS avanzado y práctico. Maquetación web para múltiples dispositivos.

En este curso video2brain aprenderás paso a paso a maquetar plantillas para sitios web usando CSS, y cómo combinarlas entre si usando diseño fluido. donde desarrollaran paso a paso un ejemplo de un sitio web con cuatro plantillas diferentes: para PC, paraPC de alta definición, para tableta y para teléfono móvil. Gracias a CSS aprenderás a crear cuatro plantillas para cuatrodispositivos diferentes, sin tener que modificar el archivo HTML original.

Aprenderas a:

A como crear una estructura HTML
A como crear varias presentaciones CSS para múltiples medios
Combinación de las plantillas con JavaScript y diseño fluido tanto con CSS como con JavaScript
Se te facilitarán todos los archivos necesarios para el desarrollo del proyecto. Dentro de la carpeta principal, encontrarás tanto el proyecto finalizado, como todos los archivos y recursos necesarios para seguir el ejercicio del curso tal y como se desarrolla en el curso.(Recomendado)

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

DescargarGracias por tu visita

jueves, 4 de abril de 2013

Descargate El Gran libro del Diseño web y crea paginas web increíbles

4/04/2013

En la actualidad se a conseguido avances extraordinarios en el campo del diseño web.Gracias a las ultimas revisiones del lenguaje decodificacióny el desarrollo de nuevas interfaces, mucho mas sencillas de utilizar el accesso a este mundo fascinante es hoy masfácilcon la llegada delHTML5 &CSS3(Los adoro),

lacreacióndeaplicaciónparamóvilesy tablets son cada vez mas utilizadas, las redes sociales y plataformas de blogsestándisfrutando de uncrecimientosin precedentes, elLIBRO DE DISEÑO WEB ha sido elaborado para ponerte aldíaen las ultimastecnologíasweb y ofrecerte un amplio recorrido por el nuevo entorno digital.aquíaprenderás todas lastécnicasconsejosy herramientas que necesitas para crear paginas revolucionarias lleno de reportajes en profundidad

varios tutoriales paso a paso y diseño web inspirador, es todo lo que necesitas.(Recomendado)

Características

Guia del Diseño Web
HTML5 Y CSS3
Estandares CSS3
Construye una pagina basica con HTML5
Crea encabezados progresivos con HTML5
Diseña un Footer con HTML5
Impactantes efectos HOOVER usando CSS3
Diseños seguros con CSS3 PIE
HTML5 canvas
Sitios paramóvilescon css3
JQuery para diseño
Menu tipo Flow con JQuery y CSS3
Infografias animadas con HTML,CSS, JQUERY
JavaScript Parte 1,2,3
Integraciónde Redes sociales a un sitio web
Primer Blog con Joomla
Tienda Online con Concrete5
Paginas web rapidas con Flavor,me
Plantillas Photoshop sin secretos
Web tipo Porfolio
Paginas basadas entipografíascon Photoshop
Diseña fondos Pixel-art isometricos
De web a APP
Crear APP para moviles
JQuery Movile

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

DescargarGracias por tu visita

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 :) )

JavaFace-elblogdelprogramador

social counter

sábado, 13 de abril de 2013

Descargate este video tutorial sobre Maquetacion web con Frameworks

sábado, 6 de abril de 2013

Descargate este vídeo tutorial sobre CSS avanzado y practico 2013 conviertete en un Master en CSS

jueves, 4 de abril de 2013

Descargate El Gran libro del Diseño web y crea paginas web increíbles

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

Guia instructiva Offensive Security en PDF convierte en un White Hacker

Categorias

Blog Archive

Entradas populares