Una de las cosas más importantes a la hora de diseñar un nuevo sitio web es obtener una paleta de colores solida. Una mala elección de los colores puede arruinar el concepto que tengas de el sitio web.

La forma de elegir estas paletas de colores dependera de cada persona. Una de las formas de elegir una paleta de colores es basándonos en una fotografía que represente el concepto del sitio web en el que estamos trabajando. Hoy vamos a ver un sitio que nos puede ayudar en esta tarea llamado Pictaculous.

Supongamos que queremos realizar un sitio que promueva los viajes a la playa, lo primero que tendríamos que hacer es buscar una imagen con esa temática, como por ejemplo:

Ahora entramos a la pagina de Pictaculous y subimos la imagen que nos servirá para obtener una paleta de colores. Es momento de indicarle a Pictaculous que nos genere la paleta de colores, con lo que obtendremos el siguiente resultado.

Como podemos ver Pictaculous nos dará una paleta de colores con los colores más importantes de nuestra imagen, así como los valores hexadecimales de estos, por sí esto fuera poco también se nos va a generar un archivo “.aco” el cual nos sirve para añadir la paleta de colores obtenida a las muestras (swatches) de Photoshop.

Visita | Pictaculous

Conforme pasan los meses siguen saliendo nuevos recursos en la web que nos permiten hacer uso de las propiedades Css3 de una manera rápida. El recurso de hoy nos permitirá aplicar unos cuantos efectos vistosos con la ayuda de la propiedad text-shadow de una manera muy sencilla.

El uso es muy sencillo, escribimos la palabra u oración de ejemplo, y seleccionamos los estilos predefinidos que se nos ofrecen:

• - Pressed
• - Embossed
• - Neon
• - Fire
• - 3D
• - Retro
• - Acid
• - Shadow
• - Alpha
• - Alpha 3D
• - Anaglyphs
• - Blur

Rápidamente podemos ver estos efectos aplicados y listos para ser exportados a nuestra hoja de estilos, es curioso ver como aparte de los efectos que se aplican hace uso de las fuentes que Google nos ofrece.

Visita : css-text-shadow

Fuente : Web Designer Depot

iconos, Psd, Vectores, patrones, Interfaz de usuario, todos ellos son elementos que nos ayudan a la hora de diseñar. Ya en el pasado les hable de 365 PSD, el cual es un sitio web que nos ofrece un archivo PSD al día (iconos, Interfaces de usuario,etc).

Siguiendo con esa linea Freebies Gallery es un sitio web que nos ofrece una gama de recursos un poco más amplia que 365 PSD, ya que no solo se limita a ofrecer archivos PSD, si no que también podemos encontrar patrones, vectores, iconos, templates, entro otros. Cabe mencionar que no todos  los recursos que aquí se presentan son lo más espectacular, sin embargo, en algún momento te pueden sacar de apuros y por que no, servirte como inspiración.

En los últimos años hemos podido ver un buen numero de tendencias en el diseño web: Sitios responsivos, sitios minimalistas, uso de ribbons, use de fuentes, etc, etc . Una de las tendencias más populares ha sido el uso de imágenes de gran tamaño como fondo del sitio web.

Este recurso es uno de mis favoritos, ya que se obtienen grandes resultados de una manera rápida, basta pues con encontrar una buena fotografía que exprese lo que el sitio desea transmitir, agregar unos cuantos elementos a dicha fotografía y obtendremos grandes resultados.

El inconveniente con esta técnica es que las imágenes al ser de gran tamaño deben de tener una resolución alta, y esto puede causar un impacto negativo en el tiempo de carga de nuestro sitio, por lo tanto no se debe de abusar de este recurso y solo usarlo en aquellas paginas que deseamos cause un impacto en el visitante.

Aquí podemos ver unos buenos ejemplos de esta tecnica.

landrover

Casey Britt

Nature Valley

Lois Jeans

Hace unos días circulaba por internet un concepto de como mejorar la selección de texto en el iPad, dicho concepto fue creado por Daniel Hooper. Si eres un usuario de un iPad o un dispositivo móvil de Apple, sabrás que para seleccionar un texto tienes que posicionar tu dedo sobre la palabra u oración y posteriormente desplazarte sobre este, a pesar de que esta acción es cómoda, en ocasiones tus dedos pueden tapar el texto que selecciona, la solución que Daniel comparte es hacer una selección de texto sin despegar las manos del teclado, ¿como lo hace?, veamos el video.

Pinche aquí para ver el vídeo

La idea es muy interesante, y no ha tardado en ser replicada en los repositorios de Cydia. En lo particular no soy partidario de usar Cydia, no por que sea bueno o malo, simplemente en el pasado no tuve buenas experiencias con el, pero esa es otra historia.

Pero lo que si me encanta de cydia es esa capacidad de hacer con el teléfono lo que uno quiera, y una prueba de ella es SwipeSelection la cual toma la idea de Daniel Hooper y la vuelve realidad, como se muestra en el video de a continuación la idea funciona bien, si eres poseedor de un iPad o un iPhone la puedes descargar gratuitamente . SwipeSelection es una más de las joyitas de Cydia que quizás Apple ya haya observado y puede que quizas la veamos implementada en el futuro.

Pinche aquí para ver el vídeo

Via | Applesfera

El día de hoy vamos a construir una galería a base de puro css, de paso, aprenderemos algunas propiedades CSS3 y como usarlas en tus futuros proyectos.

La estructura

Vamos a definir la estructura de nuestra galería: básicamente estamos hablando de crear un contenedor el cual va a contener nuestra foto, una breve descripción de la imagen junto a la fecha en que se subió. el código se vera de la siguiente manera

<div id="container">
        <h1>Galería con imágenes </br> de Instagram</h1>
        <a class="return" href="#">Regresar al Tutorial</a>
        <div class="box">
            <a href="http://ink361.com/#/photos/159380171328983092_1459995" target="_blank" class="anchor-hover">
                <img src="img/mouse.jpg" width="306" height="306">
                <span class="details">
                    <h2>Mi MagicMouse con un trackpad bastante cutre la verdad </h2>
                    <span class="pubdate">Publicado el 1/4/2012</span>
                </span>
            </a>
        </div>
        <div class="box">
            <a href="http://ink361.com/#/photos/159380171328983092_1459995" target="_blank" class="anchor-hover">
                <img src="img/sol.jpg" width="306" height="306">
                <span class="details">
                    <h2>Puesta de sol en Playa Del Carmen</h2>
                    <span class="pubdate">Publicado el 2/4/2012</span>
                </span>
            </a>
        </div>
        <div class="box">
            <a href="http://ink361.com/#/photos/159380171328983092_1459995" target="_blank" class="anchor-hover">
                <img src="img/sandwich.jpg" width="306" height="306">
                <span class="details">
                    <h2>Sandwich hecho con plastilina </h2>
                    <span class="pubdate">Publicado el 3/5/2012</span>
                </span>
            </a>
        </div>
        <div class="box">
            <a href="http://ink361.com/#/photos/159380171328983092_1459995" target="_blank" class="anchor-hover">
                <img src="img/escritorio.jpg" width="306" height="306">
                <span class="details">
                    <h2>Mi área de trabajo en casa =)  </h2>
                    <span class="pubdate">Publicado el 4/5/2012</span>
                </span>
            </a>
        </div>
        <div class="box">
            <a href="http://ink361.com/#/photos/159380171328983092_1459995" target="_blank" class="anchor-hover">
                <img src="img/pan.jpg" width="306" height="306">
                <span class="details">
                    <h2>El pan más rico de guerrero </h2>
                    <span class="pubdate">Publicado el 5/5/2012</span>
                </span>
            </a>
        </div>
        <div class="box">
            <a href="http://ink361.com/#/photos/159380171328983092_1459995" target="_blank" class="anchor-hover">
                <img src="img/armin.jpg" width="306" height="306">
                <span class="details">
                    <h2>El angelito de Armin Van Buuren  </h2>
                    <span class="pubdate">Publicado el 7/5/2012</span>
                </span>
            </a>
        </div>
        <div class="box">
            <a href="http://ink361.com/#/photos/159380171328983092_1459995" target="_blank" class="anchor-hover">
                <img src="img/hersheys.jpg" width="306" height="306">
                <span class="details">
                    <h2>Una de mis bebidas favoritas para matar el hambre</h2>
                    <span class="pubdate">Publicado el 8/5/2012</span>
                </span>
            </a>
        </div>
        <div class="box">
            <a href="http://ink361.com/#/photos/159380171328983092_1459995" target="_blank" class="anchor-hover">
                <img src="img/pasta.jpg" width="306" height="306">
                <span class="details">
                    <h2>Experimentos que salen cuando cocinas con la novia</h2>
                    <span class="pubdate">Publicado el 10/5/2012</span>
                </span>
            </a>
        </div>
        <div class="box">
            <a href="http://ink361.com/#/photos/159380171328983092_1459995" target="_blank" class="anchor-hover">
                <img src="img/pastel.jpg" width="306" height="306">
                <span class="details">
                    <h2>Pastel que me regalaron en mi cumple años </h2>
                    <span class="pubdate">Publicado el 11/5/2012</span>
                </span>
            </a>
        </div>
    </div>

Estilos con CSS

Una vez tenemos la estructura de nuestra galería procedemos a aplicarle los estilos. Primero comenzaremos ordenando nuestras imágenes y les añadiremos un borde sombreado cada vez que estemos encima de una de ellas.

body{
    background-color: #f0f0f0;
}

h1{
    font-family: Tahoma, sans-serif;
    font-size: 50px;
    color:#999;
    text-shadow:0 1px 0 #FFFFFF, 0 -1px 0 #8DB4C4;
}

#container{
    width:1024px;
    margin: 0 auto;
    overflow: hidden;
}

.box{
    display: block;
    margin: 0px auto;
    background-color: #fff;
    margin-bottom: 22px;
    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
    width:306px;
    height:100%;
    padding: 7px 9px;
    transition: box-shadow 0.3s linear 0s;
    -webkit-transition: box-shadow 0.3s linear 0s;
    -moz-transition: box-shadow 0.3s linear 0s;
    -o-transition: box-shadow 0.3s linear 0s;
    float:  left;
    margin: 0px 7px 15px 9px;
}

    .box:hover{
        box-shadow:0 0 10px rgba(2, 5, 2, 0.7);
        -moz-box-shadow:0 0 10px rgba(2, 5, 2, 0.7);
        -webkit-box-shadow:0 0 10px rgba(2, 5, 2, 0.7);
    }

Si lo pruebas te darás cuenta que al posicionarnos sobre una imagen habra una pequeña transición y la imagen se cubrirá de un borde sombreado, este efecto lo lograremos con la propiedad de CSS3: transition: box-shadow 0.3s linear 0s.

Con esta propiedad estamos creando el efecto de transición de sombreado, finalmente para que el efecto se logre se aplican los estilos de la etiqueta .box:hover la cual contiene otra propiedad CSS3 ya muy usada hoy en día: box-shadow.

Ya tenemos nuestro primer efecto, pero tenemos que esconder la información que acompaña a la imagen para lograr algo mas agradable a la vista, para esto añadimos los siguientes estilos.

.anchor-hover { display: block; position: relative; text-decoration:none; }

    .anchor-hover .details{
        opacity: 0;
        -moz-opacity: 0;
        filter:alpha(opacity=0);
        position: absolute;
        top:245px;
        left:0px;
        width:296px;
        height:50px;
        margin: 0px;
        padding-top: 10px;
        padding-left: 10px;
        font-size: 1.2em;
        line-height:.9em;
        text-decoration:none;
        color: #888;
        background-color: rgba(0,0,0, 1);
        overflow: hidden;
        transition: opacity 0.25s linear 0s;
        -webkit-transition: opacity 0.25s linear 0s;
        -moz-transition: opacity 0.25s linear 0s;
        -o-transition: opacity 0.25s linear 0s;
    }

    .anchor-hover:hover .details{
        opacity: 1;
        -moz-opacity: 1;
        filter:alpha(opacity=1);
    }

    .anchor-hover .details h2{
        font-weight: normal;
        font-size: .8em;
        color: #ffffff;
        text-decoration:none;
        margin:0px auto;
        margin-bottom: 0px;
        text-decoration:none;
        width:280px;
    }

    .anchor-hover .details span.pubdate{
        font-size: .5em;
        font-family:"MS Trebuchet", Tahoma, sans-serif;
        color: #f0f0f0;
        position: absolute;
        right:20px;
        top:40px;
    }

Después de añadir estos estilos lograremos el efecto que estamos buscando: al posicionarnos sobre una imagen esta mostrara la información que acompaña a la imagen, al alejar el puntero de la imagen esta información desaparecerá.

Este efecto se logra en las 2 etiquetas: .anchor-hover .details

.anchor-hover .details{
        opacity: 0;
        -moz-opacity: 0;
        filter:alpha(opacity=0);
        position: absolute;
        top:245px;
        left:0px;
        width:296px;
        height:50px;
        margin: 0px;
        padding-top: 10px;
        padding-left: 10px;
        font-size: 1.2em;
        line-height:.9em;
        text-decoration:none;
        color: #888;
        background-color: rgba(0,0,0, 1);
        overflow: hidden;
        transition: opacity 0.25s linear 0s;
        -webkit-transition: opacity 0.25s linear 0s;
        -moz-transition: opacity 0.25s linear 0s;
        -o-transition: opacity 0.25s linear 0s;

    }

    .anchor-hover:hover .details{
        opacity: 1;
        -moz-opacity: 1;
        filter:alpha(opacity=1);
    }

En este punto tal vez te preguntes, ¿Por que crear dos estilos con el mismo nombre?, la respuesta es la siguiente: si observas en la primera etiqueta establecemos un valor de opacidad en 0 con esto logramos que la información que acompaña a la imagen quede invisible, posteriormente al final vemos una linea donde se establece una transición.

Esta transición sera la que se dará para mostrar la información, entonces se aplican los estilos del siguiente fragmento de código estableciendo la opacidad en 1. Si pruebas colocar esas propiedades al final de la primera etiqueta lo que lograras será un resultado como este

Este no es el resultado que queremos. Esto pasa la definición basica de CSS: las propiedades se van aplicando en el orden que son escritas.

Y con eso tenemos lista nuestra galeria a base de puro código CSS

Seamos sinceros, CSS3 es maravilloso y espectacular, pero (siempre hay un pero), aun en el año 2012 usar cualquiera de las propiedades puede resultar un dolor de cabeza. La culpa la tienen las empresas que pujan por estas tecnologías,Mozilla, Microsoft, Apple y claro la falta de definición del estándar.

Por lo tanto para que una propiedad CSS3 pueda ser aplicada en todos los navegadores tenemos que anteponer un prefijo: -moz para Firefox, -webkit para Chrome y Safari y finalmente la propiedad que se supone es el estándar. Tal vez una propiedad no resulta molesto, pero si tienes que hacer uso de múltiples propiedades el caos comienza.

Para solventar estos problemas una de soluciones puede ser el uso de Pre-procesadores CSS como Less o Stylus; Otra solución es el uso de generadores de código. Los generadores de código son de gran ayuda para usar de manera rápida las propiedades CSS3 y CSS3 Generator es una de ellas.

Esta herramienta nos permite crear bordes redondeados, sombras, degradados y opacidad, siendo estas propiedades las más usadas. La herramienta es enteramente visual, por lo tanto solo basta mover los valores e ir observando los resultados. Una vez logremos el resultado que queramos copiamos el código que se nos genera y listo estarás logrando efectos CSS3 rápidamente.

Visita CSS Generator

Toca, juega y aprende

Esa siempre ha sido mi frase para CSS, los alcances que se tienen con CSS los define uno mismo. Si no me crees te invito a visitar Cssdesk.

Cssdesk es un sitio web que recopila un buen numero de ejemplos realizados a base de CSS puro, estos ejemplos son subidos por la comunidad, pudiendo tu subir los tuyos.

Cada uno de los ejemplos que nos encontramos cuenta con su código HTML y CSS, así como su resultado final. Ya sea que estés en busca de inspiración o quieras aprender como resolver algunos problemas con CSS, creo que CssDesk resulta una muy buena plataforma para ver como otras personas interactúan con esta tecnología que hoy es una de las reinas de los diseñadores web.

Visita Cssdesk

Hace algunos años cuando tuve la oportunidad de asistir a una Campus Party. En una de las platicas se hablaba sobre como obtener financiamiento para tu proyecto. Uno de los consejos que el expositor daba era: antes de comenzar a crear código para tu proyecto, primero crea una Landing Page o Pagina de Aterrizaje, la cual sirviera para mostrar de manera resumida de que trata tu proyecto y si al usuario le interesa se le pide su correo para mantenerlo informado sobre el avance del mismo.

Esto te permitirá conocer si a los usuarios les interesa tu servicio. Si obtienes un buen numero de usuarios tu proyecto es viable, en caso contrario desechas la idea. Tomando esa idea veamos algunos ejemplos de buenos Landing Pages.

Freelacing Map

Clarify

Gusteu

Pleek

Human Write

FireFly

MySeeenAp

JDStamps

Fuente | splashnology

En una entrada anterior, hablaba de lo importante que resulta para los diseñadores web aprender y dominar HTML y CSS. Una de las cosas que mencionaba en ese articulo, era que lo más importante no es aprenderse de memoria cada uno de los selectores CSS. Si no tan son entender como funciona CSS.

CSS Selector es una pequeña pagina de referencia que si o si debes de tener en tus favoritos, dicha web nos presenta cada uno de los selectores que podemos usar en CSS, acompañados con una breve descripción de lo que hace el selector, así como un ejemplo.
Para esos momentos en los que las famosas Cheat Sheets (chuletas) no te son suficientes, CSS Selector es una buena alternativa

Visita CSS Selectors