Estructura

Estas ventanas no son más que la creación de una lista. Cada elemento LI puede tener el contenido que deseemos, mientras que el primer LI será la ventana elegida. Esta es su estructura:

<ul id="container">
    <li class="current"></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Definimos el porcentaje de la ventana que se esconde y asignamos una ID a cada ventana:

var itemWidth = $("#container li").width();
// Esconder el 50% de cada ventana
var itemPosition = itemWidth * 50 / 100;
// Deslizar el 60% de la anchura de la ventana
var itemMove = itemWidth * 60 / 100;        

// Movemos ventanas debajo de otra y asignamos una ID a cada una
$("#container li").each(function(i) {
    $(this).attr("id", i).css("z-index", 100 - i).css("left", itemPosition * i);
});

Cuando un usuario hace click en una ventana, se determina la posición de la ventana clickada y la elegida previamente. Si la ventana clickada está en el lado izquierdo de la ventana elegida anteriormente, todas las ventanas que hemos clickado antes estarán en el lado de la izquierda y viceversa.

$("#container li").click(function(e) {
    // Obtenemos id's de la ventana actual y la otra sue el usuario ha hecho click
    var currentID = parseInt($(".current").attr("id"));
    var clickedID = parseInt($(this).attr("id"));

    if (currentID != clickedID) {
        if (clickedID > currentID) {
            // deslizar ventanas a la izquierda
        }
        else {
            // deslizar ventanas a la derecha
        }
    }
});

Antes de que deslicemos las ventanas necesitamos eliminar la clase .current de la anterior “elegida” y asignarla a la ventana clickada.

var currentZ = 99;
var current = $(this);
setTimeout(function() { $(".current").removeClass("current"); current.css("z-index", currentZ).addClass("current"); }, 500);

También podemos estlizar los enlaces como texto normal así no cabe duda que las ventanas semi-escondidas no se pueden clickar. Así los usuarios pueden acceder únicamente al contenido de la ventana elegida.

Eso es todo, espero que os haya gustado, si tenéis dudas ya sabéis, a los comentarios o al foro.

Ejemplo y descarga

Vía | Jankoatwarspeed

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Selector de productos estilo Apple con CSS & JQuery

• Selector CSS3 muy completo: Sly

• El selector :not() de CSS3

Yo no lo haría y por eso escribo este nuevo artículo con el fin de enseñar cual creo que es la mejor manera de vender un diseño web.

La dificultad que presenta

Primero de todo has de preguntarte y apuntar la dificultad que presenta este diseño, NO la dificultad que tienes tu en hacerlo, sino la que presenta en general (no es lo mismo hacer un par de cajas contenedoras de un color que varias con texturas personalizadas por ejemplo)

Las horas que le vas a dedicar

Piensa más o menos cuantas horas necesitarás para crear este diseño, en mi opinión no se debe cobrar por hora trabajada ya que es muy fácil tardar un par de horas más de lo debido por tu culpa y no del cliente, creo que es correcto pensar en rangos de horas(1-2,2-5,5-10) y pensar el precio respecto estas.

Las exigencias del cliente

No es lo mismo que te digan quiero un diseño web con tonos azules y rojos a que te digan quiero un diseño que tenga esto, esto y esto, aquí a la derecha quiero esto con un icono exactamente así y que al pasar el ratón haga este efecto etc.
Creo que es algo a tener en cuenta.

Los cambios que surjan

No es algo a tener en cuenta al principio pero creo que es justo que si durante el proceso te hacen hacer algún cambio radical este se vea reflejado en el precio final siempre que antes avises de ello.

Por último

Creo que es bueno hacerse una tabla, como ya he mencionado, hazla general con todas estas cosas que hemos hablado y más que tu creas con una puntuación del 1 al 5 o del 1 al 10 y según lo que salga te ayudará y guiará a hacer los precios lo más reales posibles.

¿Y tu que crees?

¿Al presentar un proyecto de este tipo pones alguna cosa más a tener en cuenta? Escribe en los comentarios de este artículo y ¡Lo añadiremos al mismo!

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Libros interesantes sobre el diseño web

• La importancia del CSS

• 22 escritorios de trabajo de diseñadores

Os recomiendo probar también la herramienta Basekit, muy útil para diseñar sitios de forma cómoda y rápida.

Os muestro el enlace a continuación, espero que os guste:

Si tenéis alguna duda podéis escribirla en los comentarios.

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• ¿Cuánto vale tu diseño? La importancia de valorar tu trabajo

• Carrousel realizado con Basekit (CSS y HTML)

• Encuesta: Tú decides lo que podría mejorarse

El popular creador de páginas web Flash Wix.com lanzó a principios de año su versión en Español y ahora nos trae WixMóvil  – asistente HTML5 para crear sitios móviles – y WixYourPage – una aplicación de Facebook que revolucionará las páginas de fan.

Un año importante en Wix.com: A principios de año lanzaron su versión en Español, para que sus usuarios hispano-hablantes puedan crear páginas web Flash gratuitas y en su idioma.

Ahora Wix nos sorprende con dos nuevos productos:

WixMóvil: la compañía ha ampliado su oferta de productos para incluir soluciones a medida para la web móvil.  Ahora los usuarios pueden crear sitios Wix especificamente diseñados para una óptima visualización y rendimiento en los Smartphones, tabletas y dispositivos móviles.

WixYourPage: La aplicación de Facebook que permite a los usuarios agregar páginas web Wix totalmente funcionales a sus páginas de seguidores aprovechando así al máximo los beneficios que ofrece Facebook como un recurso de promoción de gran alcance.

Si no lo has probado todavía, ahora es el momento ideal. Es sencillo y gratuito: El editor es super simple, arrastras y sueltas elementos de diseño, tuyos o de la rica galería que Wix provee. Puedes crear tu página web desde cero o personalizar una de las tantas plantillas. Guardas, publicas y tu propia página web flash está online.

Visita Wix Español desde la página principal de Wix, haciendo clic en la bandera española en la esquina superior derecha. O visitando: es.wix.com

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• La navegación de los sitios de antes y de ahora

• 50 sitios web incorrectamente diseñados

• Crea tus Layouts de forma fácil gracias a CSSEasy

Si por alguna razón deseas ocultar alguna parte de la interfaz por defecto de Sharepoint, con Sharepoint CSS Builder puedes hacerlo. Es una la aplicación web con la que tan solo tendrás que desactivar las casillas que desees para ocultar las partes, desde una interfaz intuitiva.

Están organizadas por encabezado, cuerpo y otros. Al desactivar las casillas la aplicación web te mostrará el código CSS, con la clase de la parte que hemos desactivado unida a la propiedad y el valor display: none; para ocultarla.

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Crea menús en CSS online con CSS Builder

• Font Dragr, previsualizar fuentes en el navegador

• Observa la estructura CSS de un sitio web con CSS Evolve

La transparencia PNG en IE 6 no funciona correctamente, pero podemos encontrar una solución a este problema con el hack que os voy a mostrar a continuación. Se puede usar con imágenes de fondo o para imágenes HTML en línea. Esta entrada es una ampliación de la expuesta anteriormente.

Imágenes de fondo

No puede ser usado con repetición y necesita ancho y alto fijo. Para usarlo debes insertar la ruta de la imagen PNG por la que incluyo por defecto, además de ajustar el ancho y alto que tenga tu imagen, obviamente:

.miselector {

width:200px;

height:100px;

background: url(/carpeta/imagen.png) no-repeat;

_background:none;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/carpeta/imagen.png',sizingMethod='crop');

}

Imágenes HTML en línea

Requiere un píxel .GIF transparente de 1x1px.

img, .png {

position: relative;

behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",

this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",

this.src = "images/pixeltransparente.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),

this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",

this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));

}

Si tienes alguna duda puedes preguntarla en el foro de la comunidad.

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Solución a la transparencia PNG en IE 6 (I)

• Solución a 10 propiedades CSS no compatibles con IE6

• Tipos de transparencia en CSS

Safari 4.0 está en primer lugar (94%), seguido por la última versión de Chrome, la 3.0 (88%). Los navegadores móviles todavía están bastante lejos, siendo el primero el navegador Ozone con un 85%, navegador para sistemas Symbian que aún no ha salido oficialmente, seguido por el navegador de iPhone 3.1 (79.6%) y el primer navegador de Android disponible, Android G2.

Hablando de compatibilidad, seguro que os interesa este artículo que nos muestra la comparación de rendimiento entre todos los navegadores.

Y tú, ¿utilizas algún navegador basado en Webkit?

Vía | Anieto2k

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Lista de compatibilidad de selectores en los navegadores web

• Bordes redondeados en Webkit mediante CSS

• Test de propiedades CSS3 basadas en Webkit

Quizás alguna vez hemos tenido la necesidad de aplicar estilos según la resolución de la página. En esta entrada aprenderemos como detectar dicha resolución y aplicarle estilos, gracias a Javascript.

El primer paso será cargar las hojas de estilo, la librería JQuery y nuestro código Javascript.

<link rel="stylesheet" type="text/css" href="reset.css"/>

<link rel="stylesheet" type="text/css" href="detect800.css"/>

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

<script type="text/javascript" src="detect.js"></script>

</head>

<body>

<div>El color de este texto es variable.</div>

</body>

Vamos a detectar si la resolución del usuario es menor que 1024 x 768 píxeles. Si lo es, cambiaremos la hoja de estilos.

Como dije, crearemos 2 hojas de estilos, una llamada detect800.css, y otra detect1024.css, para las resoluciones 800 x 600 y 1024 x 768, respectivamente.

Por ejemplo, para la hoja de estilos detect800.css puede ser algo así:

div{

color: #006699;

font: 24px Helvetica, Georgia, serif;

}

Y para la hoja de estilos detect1024.css, insertaremos este código, por ejemplo:

div{

color: #006cff;

font: 22px "Trebuchet MS", sans-serif;

}

Detectando la resolución de la pantalla

Añadiremos una alerta Javascript que hará una pausa hasta que hagamos click en OK y consigamos ver el estilo anterior.

$(document).ready(function() {
if ((screen.width>=1024) && (screen.height>=768)) {
alert('Resolucion: 1024x768 o mayor');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect1024.css"});
}
else  {
alert('Resolucion: Menos de 1024x768, a lo mejor es 800x600');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect800.css"});
}
});

Asociaremos las 2 resoluciones a sus respectivos estilos, redirigiendo su dirección a otra hoja de estilos distinta. Ahora, desde que se está cargando reset.css en primer lugar, se añadirá el modificador :not(:first), así que esto no afectará al primer elemento.

La versión adaptada para sitios realizados en Drupal es esta:

$(document).ready(function() {

if ((screen.width<=1024)) {

filename="sites/all/themes/mytheme/1024.css"

var fileref=document.createElement("link")

fileref.setAttribute("rel", "stylesheet")

fileref.setAttribute("type", "text/css")

fileref.setAttribute("href", filename)

document.getElementsByTagName("head")[0].appendChild(fileref)

}

});

Ejemplo de su funcionamiento

Finalmente, podemos ver un ejemplo de su funcionamiento o descargar el ejemplo.

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Detectar iPhone o iPad con CSS3 Media Queries

• Diferente CSS por categoría en WordPress

• Hojas de estilo alternativas y su estructura

Todo el que use Firefox 3 se dará cuenta que al hacer click sobre un enlace o un elemento enlazado con la etiqueta <a> este crea un recuadro punteado alrededor de sí mismo. En Firefox 3, el color de los puntos está determinado por el color del texto, en anteriores versiones y en otros navegadores este color es gris. ¿Para qué sirve esto? Pues muy simple, es un propósito para mejorar la accesibilidad del usuario. Para las personas que no puedan usar un ratón, deben tener una señal sobre el enlace que está activo, para que puedan saber a qué enlace vamos a ir al pulsar Intro en el teclado.

Este efecto es estilizado mediante la propiedad outline.  La propiedad “outline” es similar a la propiedad “border” (Más información acerca de la propiedad outline). El valor de la propiedad “outline” no es una parte del elemento. El borde se calcula con la anchura total de la caja, considerando que outline no es. Esto es importante ya que así el diseño no se estropeará al eliminar la propiedad “outline”.

Cómo eliminar la propiedad outline

Para eliminar el contorno de puntos tendremos que darle a la propiedad outline el valor “none”:

a {  outline: none; }

Pero al haber eliminado esta propiedad, estamos quitando al sitio web una importante función de accesibilidad. ¿Por qué no estilizamos los enlaces a nuestro gusto para que tengan mayor accesibilidad? Es bueno estilizar los enlaces para los pseudo-elementos :hover, :active y :focus ya que, aunque hayamos eliminado la propiedad “outline”, añadiremos accesibilidad al sitio.

a:hover, a:active, a:focus {
    // estilizar un enlace que va a ser utilizado.
 }

Ojo, esta entrada no debe confundirse con la otra que expuse anteriormente sobre la eliminación del borde en un vínculo.

Vía | CSS-Tricks

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Eliminar el borde de las imágenes con vínculo

• CSS: La propiedad Outline

• Varios Background en Firefox 3.5

Los bocadillos de texto (tooltip) son un recurso muy interesante a la hora de mostrar textos informativos. En esta entrada aprenderemos a crearlos usando HTML, CSS y 3 imágenes. Estos bloques de información quedarán ocultos y únicamente se mostrarán al mover el ratón encima de un enlace.

Antes que nada es necesario mostrar las imágenes con las que ilustraremos y daremos forma a nuestro bloque oculto. Podéis descargarlas haciendo click aquí.

Código CSS

Daremos estilo a los enlaces junto con la etiqueta <span>. Esta etiqueta, es la que nos ayudará, mediante el atributo :hover, a mostrar el bloque de información cuando nos posicionemos encima de un enlace. Cabe destacar la línea display: block; para darle una disposición de bloque al contenido oculto.

div#mitexto{width: 500px; margin:0 auto}

a.tt
a.tt span{ display: none; }

/*background:; ie hack*/
a.tt:hover{ z-index:25; color: #aaaaff; }
a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:0;
	padding: 15px 0 0 0;
	width:200px;
	color: #993300;
    text-align: center;
}
a.tt:hover span.top{
	display: block;
	padding: 30px 8px 0;
    background: url(bubble.gif) no-repeat top;
}
a.tt:hover span.middle{ /* altura del bloque variable */
	display: block;
	padding: 0 8px;
	background: url(bubble_filler.gif) repeat bottom;
}
a.tt:hover span.bottom{
	display: block;
	padding:3px 8px 10px;
	color: #548912;
    background: url(bubble.gif) no-repeat bottom;
}

Código HTML

El contenedor tiene asignado un ancho específico, aunque esto es opcional y puede ser eliminado. Dentro del enlace se insertan varias etiquetas con las que conseguiremos asignarle una forma y estructura al tooltip por medio de imágenes. Se añade una para la parte superior, otra para el fondo, el cual varía su altura según la cantidad de texto que haya dentro del bocadillo de texto (tooltip), y otra para la parte inferior, anidadas unas con otras.

<div id="mitexto">
		<h1>Encabezado 1</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mi enim, tincidunt vitae pharetra sed, consequat nec velit.
 <a class="tt" href="#">MI ENLACE<span class="tooltip"><span class="middle">Felicidades, acabas de encontrar un contenido oculto</span><span class="bottom"></span></span></a>.
 </p>
	</div>

Estandarización

CSS 2.1 válido.

XHTML 1.0 Transitional válido.

Ejemplo de su funcionamiento

Dejadme recordaros que podéis ver esta otra entrada sobre tooltips (bocadillos de texto) a los que no les hemos dado la opción de ocultación.

Vía | Trentrichardson.com

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Crear bloques de contenido con efecto hover con CSS

• Menú con varios niveles mediante CSS

• Crear un menú vertical con bordes discontinuos mediante CSS