miércoles, 31 de julio de 2013

añade a tu Blog una Barra lateral con estilo ModernUI de windows 8 con CSS

7/31/2013

Para aquellos webmaster que esten creando un sitio con estilo ModernUI de windows 8 ,hoy les traigo un código simple en CSS pero ver un ejemplo aquí mismo.

  • Instalaciónen Blogger
Primero vamos añadir el CSS a la plantilla que deseemos nos dirigimos ala opción plantilla--Editar Html--luego hacemos click dentro del editor y realizamos la combinación de teclas CTRL+F para abrir el buscador y buscamos la etiqueta/b:skin ,una vez encontrada justo arriba de ella pegue el siguiente código CSS.

.barra_modernUI { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEHkAI2Oj7AOGw64HPu0BANe7cFws5x1f2qP5kmj_0ndoxWFZfF97_1pXukaLxBIB4r4_7N0UpqCoaqE-eC31bxZDPYJ3bCVaF8AFGme_JXfTTvkTEuKZL-qflab40z4YTFdc5XKfiIfs9/s1600/noise.png), linear-gradient(to right, #000000, #000000); bottom: 0; list-style: none outside none !important; margin: 0 !important; padding: 20px 0 0 !important; position: fixed; top: 0; transition: all 0.2s linear 0s; -moz-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0s; width: 76px; opacity:0; } .barra_modernUI.left {left: -60px;} .barra_modernUI.left:hover {left: 0;} .barra_modernUI.right {right: -60px;} .barra_modernUI.right:hover {right: 0;} .barra_modernUI:hover { right:0; opacity:1; } .barra_modernUI li { background-position: 50% 10px; background-repeat: no-repeat; cursor: pointer; height: 84px; position: relative; text-align: center; } .barra_modernUI li a { color: #FFFFFF; display: block; font-family: "Segoe UI",arial,helvetica; font-size: 11px; line-height: 1.2 !important; padding: 61px 0 10px; text-decoration: none; } .nomb_admin{ position:relative; width:90%; float:left; top:75%; color: #ffffff; padding:4px 4px 4px 4px; font-family: "Segoe UI",arial,helvetica; font-size: 11px; background-color:#e214ea; } .barra_modernUI li.admin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAgpI85s1bz79LkdxpGsyxJrAiDAzlYER3sZ4ifSPKNtzWlwab6NMivPquUtiJ1_DvXWwWMOH6UybIhzjBWwwmlkR3WMrQmHrrF2LV2Pq1g1MWP-fJULakZQT7hfYxtJgg1mgQiM1y_Aw/s176-no/30754_421559121243112_310972398_n.jpg"); background-position:0px top; background-size:100% 100%; } .barra_modernUI li.refrescar { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizc2S_fhLW2iYUz0ozoB69JGZtRS32KjnYT2smxQDUTE__xlOgT2fKs9auqDRdrTwqY7ryfwMBjVWNec8pWGcO6X_SXwVxn26C_ZifeDKwYkVwJJpgLb6Rx3NqLGNut2QxP29Yoe_29ulc/s1600/refrescar.png"); } .barra_modernUI li.atras { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCAxYyZFn_doucIs9CxmtTZficTLw5cpXj96EYPUBmMW7hGy_k3uERyQzd8QkDOiskwTp5-jOQlvNZPl2uYDYGWwx-8cMpAlzQVcnUhxh32Snb6QVRFrrFxdAcQ4KdSPIzZKfFYI-_LpsQ/s1600/atras.png"); } .barra_modernUI li.siguiente { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-UAX-0pU5e3vcXo0bTNJv5-25xVRB8_tK7Wusomb-3YyZdakow8AZW_Hegmp0du8nGb2Fim05zCaL34aiFSbl9nLnflR2wKAbta2XcmUmFZO83DeH-1RPayuPDTQ6A5dSCpbfQQvOIKNZ/s1600/siguiente.png"); } .barra_modernUI li:hover { background-color: #232323; }


luego de haber pegado el CSS ,procedemos a añadir el codigo HTML donde usted desee puede ser dentro de la plantilla dentro delbody o dentro de un gadget .

ul class="barra_modernUI right" li class="admin"span class='nomb_admin'Admin/span/li li class="refrescar"a href="#"refrescar/a/li li class="atras"a href="#"Atras/a/li li class="siguiente"a href="#"Siguiente/a/li /ul

si usted quisiera cambiar la posicion de la barra puede cambiar el nombre de la clase enclass="barra_modernUI right"porclass="barra_modernUI right", tambien dejo el codigo fuente completo para su descarga.



DESCARGAR







Crea ejecutables con base de datos en java con Packjacket mas video tutorial

7/31/2013
PackJacket es una interfaz gráfica para el proyecto IzPack. Está construido con Java Swing y crea un instalador para su aplicación. Los instaladores creados por este programa son multi-plataforma y multi-idioma. Usted puede utilizar PackJacket para crear instaladores para satisfacer sus necesidades.


  • Información general (es decir, nombre, versión, sitio web)
  • Los autores de la aplicación
  • Los paneles de la licencia y la información en forma de texto o html
  • Dimensiones del instalador
  • Idiomas instalador estará disponible en
  • Surtido de paneles comunes
  • De Windows / Unix atajos
  • Cambie Aspecto dependiendo del sistema operativo del usuario
  • Texto de encabezado y las imágenes de instalación
  • Contador de pasos (por ejemplo Paso 3 de 7) en forma de texto o de barra de progreso
  • Logo en la pantalla de selección de idioma
  • Imagen del lado del instalador
  • Instalador puede dividir
  • Packs, más abajo
  • Entrada de usuario para conseguir algo de la entrada del usuario
  • Los procesos en ejecución
  • Multiplataforma GUI - Confirmado para trabajar en Windows Vista y Ubuntu
  • Guardar configuraciones
  • Cree XML, JAR, instaladores EXE
  • Código abierto - licenciado bajo GPL


DESCARGAR



martes, 30 de julio de 2013

Añade a tus proyectos Notificaciones con estilo con CSS3 y JQuery

7/30/2013

Hace un mes utilice este plugin desarrollado porSaleem(codebasehero) ,para mostrar notificaciones cuando un visitante dejara un comentario de facebook lo cual enseñare como hacerlo con las API de Facebook mas adelante.

Son notificaciones que se muestran en la parte inferior derecha o izquierda según se desee y tienen la propiedad de cerrarse automáticamente cada n tiempo.

  • Instalación
su instalación es sencilla como cualquier otro plugin solo necesitamos alojar el archivo en algun host de su preferencia .

script type="text/javascript" src="jquery-1.6.1.min.js"/script script type="text/javascript" src="../plugin/ttw-simple-notifications-min.js"/script script type="text/javascript" $(document).ready(function() { var notifications = $('body').ttwSimpleNotifications(); notifications.show({msg:'Lucho Borja hizo un comentario'+'br/'+'Me gusto mucho la presentacion para mi esta super bien', icon:'images/icon.png', autoHide:false}); }); /script


de esta forma se presentara una notificación,este plugin tiene los siguiente parámetros para poder configurar las notificaciones.

msg: el mensaje que se desee presentar
autoHideDelay: valor entero,tiempo que se desee que la notificación se cierre
autoHide: valor booleano,si se desea que la notificación no se cierre automáticamente
icon: URL, icono o imagen que se desee lleve la notificación
position: "bottom right'" , si se desea cambiar de posición cuando aparezca la notificación

incluye un demo.


DESCARGAR





Descargate y diseña con el nuevo Adobe Photoshop CC Multilenguaje FULL

7/30/2013
La versión actual de Photoshop tiene mayor libertad, velocidad y potencia para hacer realidad imágenes increíbles. Conseguirás decenas de funciones nuevas y renovadas, entre las que se incluye la herramienta de enfoque más avanzada. Comparte tu trabajo directamente desde Photoshop® CC en Behance® para recibir comentarios y mostrar tus propios proyectos.
tiene más de una docena de nuevas características que amplían significativamente las opciones para trabajar con imágenes.
  • Herramientas Afilado
  • Cámara Herramientas primas
  • herramientas mejoradas para trabajar con objetos vectoriales
  • copia de atributos de estilo CSS
  • mejoraron barra de herramientas para trabajar con objetos 3D y pintura textura
  • Enfoque suavizado completamente nuevo


DESCARGAR




JPanelCustom personaliza tus JPanel a tu gusto en java(Parte 1)

7/30/2013

Hace poco vimos comopersonalizar un JButton y convertirlo en una esfera,ahora vamos a personalizar un JPanel a tal punto de poder crear diferentes formas con el este va hacer uno de los varios tutoriales que les presentare para modificar un JPanel sin sobrecargar la aplicación donde vayan a implementar dicho componente.

Efectos que tiene esteJPanelCustom:

  • Imagen de fondo
  • colores en degradado
  • bordes en alto relieve
por ahora veremos como crear esos efectos con el tiempo iremos añadiendo muchos otros .

  • Como Añadir imagen de Fondo
Utilizando la claseGraphics2D implemento o llamo al métododrawImage este método me permite pintar una imagen de fondo dentro del JPanel y al hacer esto no importa el tamaño que tenga el panel la imagen de fondo se re dimensionara automáticamente esto es una de las ventajas de usar este metodo ya que no sera necesario usar un JLabel para añadir imágenes.

g2d.drawImage(image, 0, 0, w,h,this);


este método me recibe los valores de la variable Image donde esta alojada la imagen de fondo,y las coordenadas de donde queremos que se posicione o muestra la imagen y el tamaño de dicha imagen por lo general se utiliza los valores getHeight(); y getWidth(); para saber el tamaño del JPanel si el jpanel cambia de tamaño también lo hará la imagen(se re dimensiona).


  • Como añadir Colores en Degradado
con los ejemplos que eh presentado ya sabemos el uso del degradado.simplemente necesitamos construir una claseGradientPaint y asignarle los valores correspondientes.

bgColor = new GradientPaint(0, 0,getBackgroundTop() ,0, h, getBackgroundBotton());



  • Como añadir Bordes en alto relieve
para añadir este efecto el cual hace vistoso al panel ,vamos a utilizar primeroRectangle2D que sera el encargado de dibujar un rectángulo o darle la forma de rectángulo a nuestro panelRectangle2D es una clase que me recibe 4 sencillos valores las coordenadas X y Y que serán los valores de donde quiero que se posicione el rectángulo que en este caso serán 0 ambas, por que quiero que se posicione el rectángulo desde el inicio del JPanel ,luego los valoresWidth(ancho) yHeight(alto) serán los valores del tamaño real de nuestro JPanel.

Rectangle2D.Float r2d = new Rectangle2D.Float(0, 0, w - 1, h - 1); Shape clip = g2d.getClip(); g2d.clip(r2d); g2d.setPaint(color); g2d.fillRect(0, 0, w, h); g2d.setClip(clip); g2d.setColor(new Color(100, 100, 100));//primer relieve g2d.drawRect(0, 0, w - 1, h - 1); g2d.setColor(new Color(255, 255, 255, 50));//segundo relieve g2d.drawRect(1, 1, w - 3, h - 3);


luego necesito añadir un fillRect este método me permite dibujar un rectángulo con la capacidad de añadir el degradado o el fondo lo que se esta haciendo aquí en añadir un rectángulo encima de otro,luego para dar el efecto de relieve necesito añadir el métododrawRect que me dibuja el contorno del rectángulo dando asi el efecto de alto relieve.

les dejo el código fuente completo .


DESCARGAR






JButtonBall añade y aprende como hacer un JButton tipo esfera en java

7/30/2013

Hace poco vimos como crear unJButton translucido o transparente, aquí vamos a utilizar una lógica similar primero necesito quitar los efectos por defecto que tiene el JButton ya sabemos que utilizando los métodos .
  • setFocusable(false);
  • setContentAreaFilled(false);
  • setBorderPainted(false);
nos permite quitar esos valores, entonces vamos utilizar la claseGraphics2D nuevamente y hago uso defillOval este método me permite dibujar un circulo donde añado o dibujo un gradiente con la claseGradientPaint que sera el fondo del JButton y otro circulo que estará situado en la parte superior este circulo sera el efecto de reflejo de la esfera también pintado con unGradientPaint,ahora lo nuevo aquí es el efecto de luz inferior de la esfera es una clase llamadaRadialGradientPaint la cual puede formar un gradiente pero de tipo radial es decir de tipo esférico sin la necesitada de recurrir alfillOval.

RadialGradientPaint p = new RadialGradientPaint(new Point2D.Double( getWidth() / 2.0, getHeight() * 1.5), getWidth() / 2.3f, new Point2D.Double(getWidth() / 2.0, getHeight() * 1.75 + 6), new float[] { 0.0f, 0.8f }, new Color[] { destelloinicial,destellofinal}, RadialGradientPaint.CycleMethod.NO_CYCLE, RadialGradientPaint.ColorSpaceType.SRGB, AffineTransform.getScaleInstance(1.0, 0.5));


esteRadialGradientPaint me recibe dos valores que la clasePoint2D.Double me proporciona estos valores serán la forma y la posición que yo necesito para situar el Radial ,luego me permite añadir valoresflotantes que seran valores de transparencia del Radial seguido de dos valores de tipoColorpara formar el gradiente.

Graphics2D g2d = (Graphics2D) g.create(); g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON); int h = getHeight(); int height = getHeight(); ButtonModel modelo = getModel(); GradientPaint reflejo_superior = null; GradientPaint fondo_boton = null; /********************************/ reflejo_superior = new GradientPaint(0, 0, new Color(255, 255, 255),0, height / 2, new Color(120, 137, 145, 20)); /********************************/ fondo_boton = new GradientPaint(0, h / 2, getBackgroundTop(), 0, h, getBackgroundBotton()); setForeground(Color.WHITE); if(modelo.isPressed()) { /**SI EL BUTON FUE PRESIONADO*/ fondo_boton = new GradientPaint(0, h / 2, getBackgroundTop(), 0, h, getBackgroundBotton()); }else if(modelo.isRollover()) { /*****SI PASA POR ENCIMA*****/ fondo_boton = new GradientPaint(0, h / 2, getBackgroundTopHover(), 0, h, getBackgroundBottonHover()); } /*************************/ g2d.setPaint(fondo_boton); g2d.fillOval(0, 0, getWidth(), getHeight()); /**********REFLEJO SUPERIOR*************/ g2d.setPaint(reflejo_superior); g2d.fillOval(getWidth() / 3, 6, getWidth() / 3, getHeight() / 6); /*********DESTELLO*****************/ RadialGradientPaint p = new RadialGradientPaint(new Point2D.Double(getWidth() / 2.0, getHeight() * 1.5), getWidth() / 2.3f, new Point2D.Double(getWidth() / 2.0, getHeight() * 1.75 + 6), new float[] { 0.0f, 0.8f }, new Color[] { destelloinicial,destellofinal}, RadialGradientPaint.CycleMethod.NO_CYCLE, RadialGradientPaint.ColorSpaceType.SRGB, AffineTransform.getScaleInstance(1.0, 0.5)); g2d.setPaint(p); g2d.fillOval(0, 0, getWidth() - 1, getHeight() - 1);


les dejo el código fuente completo con métodos para cambiar el color de las esferas.


DESCARGAR


Suscribirse a: Entradas (Atom)