Menús desplegables con CSS

Siguiendo el tutorial de menu CSS, podremos crear desplegables usando solo CSS, aunque para que funcione correctamente en todos los navegadores (internet explorer como siempre dando la nota) deberemos insertar el siguiente código:

<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<!--[if gte IE 5.5]>
<script language="JavaScript" type="text/JavaScript">
$(document).ready(function(){
$("#navmenu-h li,#navmenu-v li").hover(
function() { $(this).addClass("iehover"); },
function() { $(this).removeClass("iehover"); }
);});
</script>
<![endif]-->

Aquí os dejamos un ejemplo

<ul id="navmenu">
<li><a href="#">Root nav item</a>
<ul>
<li><a href="#">Sub nav item</a></li>
</ul>
</li>
</ul>

Mira más menu de ejemplo.

Puedes ver también:

Plantillas CSS gratis

Visto en Anieto2k

Escrito por Niko | 10 de Julio de 2009 | 1 comentario
CSS y Diseño Web.

The Ultimate jQuery List | Ejemplos y plugins para jQuery

Si estás pensando en meterte en uno de los framework de javascript más utilizado jQuery, en esta web ofrece una gran recopilación de plugins y ejemplos práctiso para usar con jQuery.

Visita The Ultimate jQuery List
Vía Xyberneticos

Escrito por Niko | 10 de Julio de 2009 | 0 comentarios
General.

Reset CSS

Reset CSS es una técnica para resetear todos los valores del CSS que vienen por defecto en los navegadores (margenes, aliniaciones…). La web de desarrolladores de Yahoo, podemos ver el siguiente ejemplo con el que conseguiremos resetar todos los valores.

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}

Un reset básico sería el siguiente:

* {
margin:0;
padding:0;
}

Visita Yahoo! UI Library: Reset CSS

Escrito por Niko | 10 de Julio de 2009 | 0 comentarios
CSS y Diseño Web.

Tabla de colores hexadecimales

En el ordenador es común ver los colores tienen asociado un valor hexadecimal (puede tomar 16 valores cada cifra desde 0..9A..F), estos valores representan la cantida de rojo, azul y verde (RGB) dos cifras hexadecimales para cada uno, la mezcla de esos tres colores primarrios se puede sacar una gran variedad de colores.

Realmente es cómodo podemos controlar con exactitud los colores de nuestra web sean tales como los hemos preparado en photoshop (este te da el valor hexadecimal con la herramienta de cuenta gotas)

Aquí os dejo una tabla con algunos colores y su valor en hexadecimal.

Escrito por Niko | 10 de Julio de 2009 | 4 comentarios
CSS y Diseño Web.

jQuery lightBox plugin | Ejemplo lightBox

A estas alturas el efecto de lightBox es bastante conocido (existe hasta para videos Videobox). El plugin que os muestro en el post se puede decir que es de los más conocidos, aunque existe alternativas como jQuery.popeye, Zoomy…

Como usar el plugin:

Para comenzar necesitamos tener el javascript de jQuery y después descargar el plugin. Debemos incluir en la cabecera dos ficheros javascript:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>

También debemos incluir el fichero CSS:

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />

Incluimos las etiquetas HTML para enlazar una imagen, por ejemplo:

<a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>

Y por último incluimos el siguiente javascript que es el que activará el lightBox:

<script type="text/javascript">
$(function() {
// Use this example, or...
$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
// This, or...
$('#gallery a').lightBox(); // Select all links in object with gallery ID
// This, or...
$('a.lightbox').lightBox(); // Select all links with lightbox class
// This, or...
$('a').lightBox(); // Select all links in the page
// ... The possibility are many. Use your creative or choose one in the examples above
});
</script>

Visita  lightBox plugin

Ver una Demo

Escrito por Niko | 10 de Julio de 2009 | 0 comentarios
CSS y Diseño Web y JavaScript.

No-IP ten tu DNS estático con tu IP dinámica

Muchos están interesados en cambiar IP para poder burlar ciertos servicios que te limitan el uso por IP durante un tiempo. Sin embargo el hechode tener IP dinámica es una desventaja si lo que estás pensando en montarte un servidor web personal en tu ordenador, ya que cada vez que se te apague el router y lo enciendas tu IP va a cambiar. A raíz de este problema nacio hace muchisimo tiempo el servicio de No-IP.org que trata de darte una dirección fija que apunta siempre a tu IP, gracias a un programa que instalas en tu ordenador y avisa a No-IP.org el cambio de tu IP y actualiza tu DNS estático que apunta a tu nueva dirección IP.

Escrito por Niko | 9 de Julio de 2009 | 0 comentarios
General.

Como cambiar mi IP

Si estás interesado en cambiar de IP de tu ordenador. Primero deberás saber que cuentas con una IP local que solo es válida para tu red local y otra IP global que es asignada por tu proveedor de sevicios a internet. Si deseas cambiar tu IP global solo será posible si tu IP es dinámica (esto es lo más probable, la mayoría de proveedor en España te ofrecen IP dinámica por defecto). Tendrás un router conectado a tu ordenador que es el que te da la salida para internet, por lo que si quieres cambiar de IP el router debes reiniciarlo, hay una forma bastante bestia pero eficaz, se trata de apargarlo y encederlo, cuando vuelve a estar activo internet lo más probable es que hayas cambiado de IP.

Ahora si lo que deseas cambiar de IP es para poder descargar de ciertos servicios que te limitan la descarga (por ejemplo RapidShare) por IP, lo que te recomiendo es el JDownloader.

Escrito por Niko | 9 de Julio de 2009 | 17 comentarios
General.

Como hacer un diseño web 2.0

Estos son los pasos a tener en cuenta para realizar un diseño web 2.0:

1. Simplicidad
2. Layout centralizado
3. Pocas columnas
4. Separar claramente la parte superior del contenido
5. Diferenciar distintas áreas
6. Navegación simple
7. Logos en negrita
8. Textos con el tamaño de letra grande
9. Texto en negrita en introducciones
10. Colores fuertes
11. Superficie con detalle
12. Degradados
13. Reflejos
14. Iconos bonitos (si estás buscando iconos atractivos para tu web 2.0 emplea Iconspedia e IconDB)
15. Estrellas (ya estamos acostumbramos a ver la tipica estrellita con el beta dentro )

Visto en Web 2.0 how-to design style guide

Escrito por Niko | 9 de Julio de 2009 | 5 comentarios
Diseño Web.

Invierte tu email mediante CSS para evitar el spam

Hace poco vimos una forma de encriptar la etiqueta mailto para evitar el SPAM, ahora vemos una solución muy sencilla y limpia, se trata de escribir nuestro correo al revés dentro de una capa de CSS, aquí os dejo un ejemplo:

<style type="text/css">
span.test { direction: rtl; unicode-bidi:bidi-override; }
</style>
<p><span class="test">moc.tset@tset</span></p>

Visto en SentidoWeb

Escrito por Niko | 9 de Julio de 2009 | 0 comentarios
General.

Libería PHP para el API de Bing.com

Bing es el buscador de Microsoft que en general en las webs españolas empezamos a ver como nos dirige bastante tráfico a nuestras webs, cosa que hasta ahora no había visto de Yahoo por ejemplo. Aunque los chicos de Yahoo dicen estar tranquilos ante este nuevo buscador creo que con el tiempo puede que le coma el terreno que poco a poco están perdiendo desde hace años, gran parte comida por el archiconocido Google.

Ahora podemos utilizar el buscador Bing desde nuestros programas PHP, esto abre grandes posibilidades para los desarrolladores que quieran emplear Bing. Para usar el API necesitas de una clave del API, bajarte la librería de PHP y tener en tu servidor PHP 5 y cURL.

Web de la librería

Visto en SentidoWeb

Escrito por Niko | 9 de Julio de 2009 | 0 comentarios
PHP.