JabaT0's Repository

Herramientas - Traducir un documento con Google Translate

2012-12-25T16:53:00.000-08:00

Una increíblemente útil función que siempre está presente en el traductor de Google pero que muchos ignoramos u olvidamos tal vez por estar acostumbrados sólo a copiar y pegar, es la de traducir documentos enteros en formato DOC, DOCX, PPT, PPTX, PDF y TXT. La traducción la realiza en una nueva pestaña del navegador y mantiene buena parte del formato (espacios, viñetas, etc.).

En fin, para traducir un documento basta con ir a la página del traductor en translate.google.com y pulsar en la opción Traduce un documento disponible abajo del cajón de inserción de texto de la parte izquierda, donde se pega o escribe lo que se va a traducir.

Cambiará entonces el diseño del traductor para mostrar un botón de carga, el que dice Seleccionar Archivo, que al oprimirlo abrirá una ventana para seleccionar la ubicación del archivo en el PC. Una opción más sencilla es arrastrar el archivo y soltarlo en el navegador.

Restará definir de la manera tradicional el idioma al que se va a traducir, y finalmente pulsar en el botón azul deTraductor. Los resultados deberán aparecer en una nueva pestaña. Por supuesto, si es desde una URL directamente desde donde se desea capturar (http://xxx.com/documento.pdf) no hace falta utilizar la opción deTraduce un documento, basta con pegarla y dar clic en Traductor. Los resultados en tal caso aparecerán en la misma pestaña:

VIA whatsnew.com

SEO - Factores que podria tener en cuenta Google para posicionar enlaces

2012-12-15T00:04:00.002-08:00

Son más de 200 los factores utilizados por Google para ordenar los enlaces que muestra en su buscador, factores nunca divulgados por completo, aunque muy obvios en la mayoría de las ocasiones.

Os dejo con una lista de los que considero que deberían utilizarse, aunque no todos tengan el mismo peso, desde mi punto de vista, por lo que la fórmula de mezcla os la dejo para que la maduréis con vuestra propia imaginación y experiencia.

1 – Enlaces recibidos desde otras páginas: El clásico, el padre de todos, que lleva liderando la lista desde tiempos inmemoriables. Este factor ha ido perdiendo fuerza con el tiempo, incluso puede resultar negativo tener enlaces desde depende qué tipo de páginas. Recordad que incluso existe una herramienta de Google que nos permite desautorizar enlaces que apuntan a nuestro sitio.

2 – El Pagerank: Otro gran líder del posicionamiento que también ha perdido mucha fuerza, estando extremadamente ligado con el primero mencionado antes. En este caso tenemos toda una ciencia basada en la transmisión de pagerank entre páginas, enlaces nofollow para impedir dicho flujo de PR y demás “capítulos del clásico SEO“, ciencia que tiene que ser revisada profundamente, pues el PR no es lo que era antes, ni puede convertirse en la obsesión de ningún webmaster. Recordad: El PR NO es proporcional al número de visitas de una página web.

3 – Las recomendaciones realizadas en Twitter: Monitorizar las redes sociales no es ningún secreto. Existen muchas herramientas creadas con este objetivo y Google, que compró una de ellas en 2011, sigue desde muy cerca este tipo de información. De todas formas no es un factor sencillo de analizar, ya que miles de personas deciden importar de forma automática todas las noticias de una misma fuente, lo que genera “recomendaciones artificales” que dudo mucho que se tengan en cuenta a la hora de posicionar una página.

4 – Los “+1″ de Google Plus: Aún son muy pocas las recomendaciones realizadas en Google Plus, sobre todo si las comparamos con las de Facebook o Twitter, pero sin duda los “+1″ de cada artículo o de la página correspondiente en Google Plus son un factor que se tendrá en cuenta cada vez más, principalmente en los resultados personalizados de búsqueda (aquéllos que aparecen cuando estamos identificados en nuestra cuenta Google).

5 – Los “me gusta” de Facebook: Aunque no hay pruebas de que este factor se esté usando en el posicionamiento de páginas, debido a que un “me gusta” no siempre corresponde a una recomendación como tal, los votos facebookianos forman parte del SEO social, con lo que hay que tenerlos en cuenta, aunque sea para conocer la influencia de un contenido entre una comunidad específica.

6 – El tiempo de permanencia de un lector: Si un visitante llega de Google a nuestra página y no pasa ni dos segundos, seguramente es porque el contenido no tiene nada que ver con lo anunciado (algo típico con los artículos del tipo “curso gratis de inglés” que llevan a una página llena de anuncios y sin nada de contenido, por ejemplo). Si muchas personas reaccionan de la misma forma ante una página web, la probabilidad de que Google la abandone a la fatídica “segunda página” será muy alta.

7 – El tiempo que tarda una página en cargar: Puede ser el contenido más interesante del mundo, puede ser exactamente lo que el visitante está buscando, pero si tarda más de 10 segundos en mostrar el primer párrafo… se irá, y no volverá. Google lo sabe y, aunque respete el esfuerzo dedicado en la creación del contenido, no posicionará bien los textos que tarden demasiado en ser mostrados. Podéis analizar este índice con herramientas como Pingdom

8 – La cantidad de anuncios existente en una página: En realidad está relacionado con uno de los factores anteriores. Si hay muchos anuncios en una página web, y el visitante pulsa en ellos nada más llegar a una página, perderemos un “posible cliente” y dejaremos que una visita abandone nuestra web em poco tiempo, afectando al indicador número 6. Encontrar el equilibro entre contenido y publicidad es algo muy difícil, algo que solo se conseguirá con mucha experiencia en la espalda. Si se está empezando un proyecto, y no se tiene ni 1000 visitas diarias, es mejor dejarlo limpio de publicidad y preocuparse en aumentar ese número de fieles, ya que cada click en un anuncio es un visitante que se va (¿vale la pena por unos centavos diarios?).

9 – Número de comentarios: No significa que el número de comentarios de una página afecte directamente a la posición en los buscadores, pero si existe una discusión en un artículo, el contenido será más rico y más actualizado, lo que hará que el lector esté más tiempo en una web, algo que ya hemos comentado en el punto 6. Podéis tener miles de comentarios en Twitter, cientos de discusiones paralelas en Google Plus, pero si salen de vuestra web, Google no conseguirá detectar dónde fueron, por lo que el indicador de tiempo de permanencia (interés despertado) se verá afectado.

10 – Diseño de la web, usabilidad: Si mareamos al visitante con extractos de texto, “lea más”, menús secundarios y demás “estrategias” para aumentar el número de páginas vistas, corremos dos riesgos: que el lector se canse y abandone nuestra web, perdiendo así un posible seguidor, y que el tiempo de permanencia por página sea extremadamente bajo. Es importante tener un diseño intuitivo, limpio, que no tenga más información de la que el ojo humano es capaz de absorber.

11- Código: Hay que estar atentos al title, h1, h2, h3, description, alt, tags y demás asuntos relacionados con cómo está hecha la página web. Google es listo, pero si le ayudamos usando información estructurada, pues mejor.

VIA Whatsnew.com

Herramientas - thumbrit - Para hacer miniaturas de imágenes con un API

2012-12-14T23:47:00.000-08:00

Joaquin Cuenca, cofundador de Panoramio, nos presenta thumbr.it, un nuevo proyecto que nos ayuda a crear miniaturas dando efectos Instagram en cualquier imagen que deseemos.

El objetivo es permitir a los desarrolladores de aplicaciones web, usando una API, la transformación de cualquier imagen informando únicamente su url. Los servidores de este nuevo servicio realizarán la transformación y devolverán el resultado procesado.

Un ejemplo real, partiendo de esta foto obtendríamos esta otra.

La APi es sencilla (5 líneas en Python, Ruby, PHP, y 40 en Java) para generar las URLs, siendo posible probarlo en el editor thumbr.it/quick_start.

El plan gratuito permite hacer 1000 fotos al mes, existiendo una tabla de precios completa en su sitio web.

VIA Whatsnew.com

CSS - Selectores CSS3 de manera facil y potente

2012-12-12T00:39:00.001-08:00

Selectores de CSS3

Una de las cosas que se tienen menos en cuenta de las posibilidades que brinda CSS es el uso de selectores, que creció junto a CSS3con la posibilidad se aplicar estilos según el contenido de un atributo de un elemento o según si los elementos son contiguos (están dentro del mismo elemento).

En el primer caso, si tenemos por ejemplo un link que apunta a un archivo de texto (.txt) lo detectaría y aplicaría un determinado estilo.


/* URL que empieza con "javascript:" (acción de JS) */
a[href^="javascript:"] {color:green;}

/* URL que contiene "xitrus.es" (que indica que está dentro de la propia web) */
a[href*="xitrus.es"] {color:pink;}

/* URL que termina con ".txt" (archivo de texto) */
a[href$=".txt"] {color:orange;}

javascript:alert('Hola!')

http://xitrus.es/

http://xitrus.es/humans.txt

Esto nos sería útil para diferenciar si usamos imágenes internas o externas o link que apuntan a otro dominio...
Por poner otro ejemplo, podríamos imaginar que tenemos una serie de bloques con color, que tiene un título con un nombre y un número de color que varía (como "color - #FF0" , "color - #A07" ...) y queremos aplicarles un estilo, podríamos hacer lo siguiente.


a[title^="color -"] {color:green;}

Selectores contiguos

Este método para seleccionar elementos nos permite hacer cosas muy curiosas, como seleccionar un elemento adyacente o todos los elementos hermanos.
Puede que explicado no entendáis que tiene de curioso, pero por ejemplo, si pasamos por encima de un elemento (con :hover) podemos hacer que cambie el estilo de un elemento hermano, no solo que esté por debajo como es habitual.


div.a:hover ~ div.b {background: #ec098c ;}

div.a

div.b


div.a:hover + div.b {background: #ec098c ;}

div.a

div.b

Para seleccionar solo el elemento contiguo usamos el símbolo "+" y pasa seleccionar cualquier elemento hermano "~", como podemos ver en el ejemplo y ambos tienen la siguiente estructura.


<div>





<div class="a">div.a<div>
<div class="b">div.b<div>
<div> <div>
<div class="b">div.b<div>

<div>

VIA Xitrus.es

SEO - ¿Os copian el contenido? Reportalo a Google

2012-12-11T09:30:00.003-08:00

Una de las principales pesadillas de todo editor que se dedica a escribir en Internet es ver como su contenido es copiado sin respetar la licencia del mismo. En muchas ocasiones se realiza uncopy&paste sin poner la fuente, sin mencionar la página original y, a veces, poniendo el nombre de otra persona como autora del texto.

Esa situación es inevitable, existirá mientras exista Internet, por lo que es mejor respirar fondo y aceptar que “la vida es así”, entrando en contacto con los autores, intentando llegar a un acuerdo y accediendo a los tribunales cuando sea realmente necesario.

El caso es que la cosa puede empeorar cuando Google decide mostrar el contenido copiado antes que el contenido original, algo muy común con blogs que importan automáticamente un canal RSS, por ejemplo. Esto puede tener muchos motivos: mejor estructura del sitio que copia, “trucos SEO”, inexistencia de un sitemap.xml en el sitio de origen, etc.

Para acelerar la solución a este problema, que en la mayoría de las situaciones se soluciona con un poco de tiempo, hasta que el algoritmo de Google detecta estos “detalles”, tenemos un formulario creado por Google donde podemos informar los detalles del error.

En él es necesario indicar la url de búsqueda realizada, así como la dirección del sitio que copia y la dirección del sitio copiado, junto a unos comentarios adicionales que podemos enviar junto con el resto de la información.

Captura del formulario en docs.google.com

Nadie es perfecto, los buscadores menos aún, por lo que siempre será necesario ayudar para realizar los inevitables “ajustes manuales”

VIA Wwwhatsnew.com
.

Google - Adsense para webs con diseños adaptativos (responsive designs)

2012-12-04T13:01:00.000-08:00

Si vuestro sitio web cambia de tamaño dependiendo del dispositivo que lo esté leyendo, seguramente os interesará leer el artículo publicado por Google hoy mismo sobre este tema.

Se trata de una serie de consejos relacionados con Cómo usar AdSense con un diseño adaptable, escrito en adsense-es.blogspot.com.

En el texto vemos cómo es sencillo programar un código que muestre unos u otros anuncios dependiendo del diseño utilizado, con condicionales “if-else” que podemos integrar en nuestro sitio.

HAcen también referencia a este artículo en inglés, donde comentan más detalles sobre el diseño adaptable y su importancia en la web actual.

Codigo - PHP - Autocarga de Classes no definidas

2012-12-02T01:46:00.001-08:00

Cuantas veces programamos en algún lenguaje y no somos conscientes de las malas practicas que realizamos. No siempre han de ser consideradas malas practicas, simplemente puede ser desconocimiento o rutina, habituados a hacer las cosas de una manera concreta que funciona... ¿Por que cambiar?

Pues aquí esta la respuesta: "El cambio es necesario cuando es a mejor".

En este caso la curva de aprendizaje de cosas nuevas en un lenguaje de programación dado, depende mucho de la sintaxis y estructura del lenguaje en cuestión, pero centrándonos en PHP y en el caso que nos ocupa, podremos observar que la curva de aprendizaje es relativamente corta en el tiempo y alta en conocimientos adquiridos. Así que pongámonos manos a la obra.

Autocarga de Classes no definidas a través de include o require.

A través de la función:

spl_autoload_register($funcion);

Conseguiremos decirle a PHP cual es la forma de tratar de cargar nuevas clases que no tengamos incluidas explícitamente con include, require o sus derivados.

Aquí dejo una forma genérica de realizar esta gestión de classes:

/*

* defined function responsible for loading class,

* replacing the old __ autoload.

* ROOT is constant of the path root of the system

*/

spl_autoload_extensions('.class.php');

spl_autoload_register('loadClasses');



 function loadClasses($className)

 {

    

    if( file_exists(ROOT_DIR.DS.'controller/'.$className.'.class.php' ) ){

        set_include_path(ROOT_DIR.DS.'controller'.DS);

        spl_autoload($className);

    }

    elseif( file_exists('model/'.$className.'.class.php' ) ){

        set_include_path(ROOT_DIR.DS.'model'.DS);

        spl_autoload($className);

    }elseif( file_exists('view/'.$className.'.class.php' ) ){

        set_include_path(ROOT_DIR.DS.'view'.DS);

        spl_autoload($className    );

    }else

    {

        set_include_path(ROOT_DIR.DS.'lib'.DS);

        spl_autoload($className    );

    }

 }

Básicamente, este snipplet de código determina una función que busca y comprueba si existe un fichero determinado en una ruta usando unas condiciones para mirar en varios directorios.
Previamente define la extensión por defecto para las clases como ".class.php"

Gracias a este pequeño código cargado practicamente al principio de vuestra estructura, conseguiréis instanciar una clase sin necesidad de incluirla con la limpieza de código que eso supone y la versatilidad de no tener que incluir el código de la case en distintos sitios.

Disfrutad!

Javascript - Fly in Newly Added Content to a Page

2012-11-29T23:52:00.001-08:00

Say that for any reason, a new module of content needs to appear on a page. By simply appending that new module into the DOM it will instantly appear. That might be enough of an "entrance" - or it might be too subtle. I'd think when you add new content to a page, you want people to see it. Animation might be the ticket. It technically slows down the entrance of the new content, but the visual effect will certainly make it more noticeable. Let's write some code to make all new modules added to a page "fly in."

Already Existing Content...

You have a site. Site has modules.

<section class="main" id="main">
  <div class="module">
     ...
  </div>
  <div class="module">
     ...
  </div>
</section>

<aside class="sidebar" id="sidebar">
  <div class="module">
    ...
  </div>
  <div class="module">
    ...
  </div>
</aside>

New Content Comes In

jQuery style.

$("<div />", {
  class: "module",
  html: newContent // from an Ajax request or something
}).prependTo( "#sidebar" );

Option #1: Give New Modules a Class

If you have the ability, it's probably cleanest to give newly added content a class so you can target it specifically. In this case, we give it the class newly-added.

$("<div />", {
  class: "module newly-added",
  html: newContent // from an Ajax request or something
}).prependTo( "#sidebar" );

Fly in CSS

This new class will have an animation tied to it that does the fly in. It will run immediately after being added to the DOM.

.newly-added {
  animation: flyin 1.2s ease forwards;
  opacity: 0;
  transform: scale(2);
  filter: blur(4px);
}

 @keyframes flyin {
   to { 
     filter: blur(0);
     transform: scale(1);
     opacity: 1;
   }
}

Note: there are no prefixes being used there. All of animation, transform,filter, and @keyframes should be prefixed for the best browser support. Consult CSS3 Please for which to use on which. Or, us Sass/Compass and the appropriate mixins. Or, Prefix Free1.

Option #2: Target All New Modules Without a Class

It's possible you don't have control over the classes that newly added content has. In that case, you would target all existing content on the page and give them a class to negate the fly in effect.

$(function() {
  $(".module").addClass("old-school");
});

Then you could only target new modules with a :not selector:

.module:not(.old-school) {
  /* animation stuff */
}

Demo

On CodePen:

1 Prefix Free doesn't work with filter out-of-the-box right now, but you can make it work. See code example from Lea in here.

CSS3 - Degradados - Para no cargar nuestro navegador

2012-11-29T22:56:00.001-08:00

Otra gran novedad de CSS3 es poder usar degradados, sin ninguna falta de usar imágenes, lo que nos ayuda a reducir enormemente el tamaño de nuestra web si usa varios degradados.

Antiguamente Internet Explorer tenía su propio método y los navegadores basados en WebKit igual, pero el estándar se a parado en el que os voy a enseñar, que nos permite establecer la dirección del degradado y los colores y sus posiciones.

#333 // #CCC

#008299 // #52deff

#00B159 // #F37735 // #EC098C

Para explicaros el funcionamiento tomaremos de referencia el primer degradado (de color gris oscuro a gris claro), que empieza desde la izquierda (left) y en la posición 0% del degradado tiene el tono oscuro y en la parte final el claro (100%).
Nota: puede que sea necesario usar los prefijos de cada navegador (-webkit-, -moz-...).


background: linear-gradient([Dirección], [Color] [Posición en %], [Color] [Posición en %]);

Como funciona

En los degradados podemos añadir tantos colores como queramos y podemos establecer la posición del mismo (con un valor porcentual, donde 0% es el inicio y 100% es la parte final).
Este es el código del tercer ejemplo (el de los tres colores):


background: linear-gradient(left, #00B159 0%, #F37735 50%, #EC098C 100%);

Podemos establecer cualquier dirección del degradado estableciéndola en grados (deg) o con los nombres propios de posición como top, bottom, left y right.
En el siguiente ejemplo estableceremos que el degradado tenga una orientación de 60 grados (60 deg) y estableceré un par de colores con posiciones juntas para que se vea bien.


background: linear-gradient(60deg, #F37735 40%, #EC098C 60%);

Degradados circulares

Los degradados anteriores era degradados lineales y ahora usaremos degradados circulares.
Para este tipo de degradados no nos hace falta establecer la dirección del degradado, sino que debemos de establecer el centro (origen) del degradado, de la misma forma que establecemos donde empieza una imagen de fondo (si establecemos center se centrará en cambio podemos establecer valores porcentuales como 0% 100%, que sería lo equivalente a left bottom, que también podríamos usarlo escrito).


background: radial-gradient(left bottom, circle, #F37735 40%, #EC098C 60%);

VIA XITRUS

Photoshop - Capas de Ajuste

2012-11-28T06:24:00.000-08:00

Hace unos días os hablaba de uno de los componentes más importantes, sino el que más, para el manejo de la aplicación Photoshop y la inmensa mayoría de herramientas de retoque fotográfico. Así es, me estoy refiriendo a las capas.

En el artículo de hoy, voy a hablarte nuevamente de capas, pero me centraré en, posiblemente, las capas más utilizadas. Se trata de las capas de ajuste. Veremos qué son, cómo funcionan, para qué sirven y cómo trabajar con ellas. ¿Estás preparado?, ¡adelante!

¿Qué Son Las Capas de Ajuste?, ¿Y De Qué Tipos De Ajuste Estamos Hablando?

Como su propio nombre indica, las capas de ajuste son capas que permiten ajustar distintas propiedades de una imagen base (la capa o capas que se encuentren bajo ella). En nuestro caso, esta imagen base es la fotografía que pretendemos procesar.

Estos ajustes que podemos llevar a cabo son los siguientes:

Color uniforme
Degradado
Motivo
Brillo/Contraste
Niveles
Curvas
Exposición
Intensidad
Tono/Saturación
Equilibrio de color
Blanco y Negro
Filtro de fotografía
Mezclador de canales
Consulta de colores
Invertir
Posterizar
Umbral
Mapa de degradado
Corrección selectiva

He destacado en negrita los de uso más común. Aunque te recomiendo que pruebes la aplicación de todos ellos para que descubras cómo funcionan y los conozcas por si en un futuro necesitases hacer uso de alguno de ellos.

¿Para Qué Sirven Las Principales Capas de Ajuste?

Como has visto en el anterior apartado hay 19 tipos de capas de ajuste. Demasiado para hablar sobre todas y cada una de ellas. Así que nos centraremos en las más importantes, ¿de acuerdo?

Brillo/Contraste. Mediante brillo es posible ampliar la gama de luces, desplazando el deslizador a la derecha, o bien ampliar la gama de sombras, desplazando el deslizador a la izquierda. Por su parte, el contraste incrementa la distancia entre luces y sombras o bien las reduce (en definitiva, incrementa o reduce el contraste).
Niveles. Permite la definición del punto negro, punto blanco y punto gris medio en la imagen. En base a esta definición, se distribuyen luces y sombras por la imagen.
Curvas. Ofrece un ajuste más fino de luces y sombras que el proporcionado por Niveles, no limitándose a tres puntos de ajuste, sino a 16. Posibilitando, además, el trabajo sobre la luminancia de la imagen en los tres canales (RGB) de forma simultánea, o en cada uno de ellos por separado.
Exposición. Permite un desplazamiento a izquierda o derecha del histograma, originando un incremento o reducción general del valor de exposición global de la imagen.
Intensidad. Incrementa la saturación general de la fotografía preservando los colores presentes en la piel de posibles sujetos que aparezcan en la imagen. (El incremento de saturación, en lugar de intensidad, lo que propicia es la aparición de tonos demasiado rojizos en la piel).
Tono/Saturación. Permite variar tono y saturación de un determinado color para corregir, por ejemplo, dominancias en la fotografía.
Equilibrio de color. Muy útil para ajustar el balance de blancos.
Blanco y Negro. Permite realizar una conversión a blanco y negro, controlando la participación de rojos, naranjas, verdes, cyanes, azules y magentas. De modo que el blanco y negro se ajuste al resultado deseado.
Filtro de fotografía. Permite simular el resultado que se conseguiría al interponer distintos filtros fotográficos (de colores).
Mapa de degradado. Otra opción interesante para la conversión a blanco y negro.

Con respecto al resto de capas de ajuste, como te decía anteriormente, mi recomendación es que los pruebes para ver en qué consisten y evalúes si pueden servirte en un futuro.

¿Cómo Aplicar Una Capa de Ajuste?

Casi lo olvido. Te he hablado de lo que son, de los tipos de capas de ajuste que existen, pero no te he contado cómo crear y aplicar capas de ajuste.

Es muy sencillo, como de costumbre, tienes varias opciones para crear una nueva capa de ajuste:

Hacer clic en el botón en forma de círculo blanco y negrode la parte inferior de la Ventana de Capas (F7) y elegir el tipo de capa. Identificado en la imagen de la derecha con el número "1".
Hacer clic en Capa > Nueva capa de ajuste y elegir el tipo de capa.

Una vez seguidos estos pasos verás que la Ventana de Capas se actualiza con la nueva capa creada. En la imagen de ejemplo de la derecha puede verse cómo al crear una capa de ajuste de tipo Curvas se ha creado una nueva capa con el nombre "Curvas 1".

Además, puede apreciarse algo característico de todas las capas de ajuste: la posibilidad, en cualquier momento, de modificar los parámetros del ajuste (a través del botón "2") y la posibilidad de definir la región sobre la que aplica el ajuste mediante una máscara de capa (a través del botón "3").

Precisamente estas posibilidades que ofrecen las capas de ajuste, así como la variación del valor de opacidad (al igual que el resto de capas) y el posible cambio del modo de fusión, son los responsables de todo el potencial de las capas de ajuste y, por tanto, de su enorme importancia dentro del flujo de procesado fotográfico.

Veamos Las Capas de Ajuste En Acción. Un Ejemplo

Con lo visto en los anteriores apartados ya conoces todo lo necesario sobre las capas de ajuste. No obstante, siempre es mejor ver un ejemplo para descubrir el uso y las capacidades que nos ofrece esta funcionalidad, ¿no crees?

A continuación te muestro una imagen a la que se han aplicado varias capas de ajuste. En concreto, dos capas de ajuste para mejorar la luz de cielo y monte, otra capa para dotar de mayor saturación a la imagen, otra para corregir el balance de blancos y una última incrementando ligeramente la exposición del primer plano.

Además de la Ventana de Capas (en la parte inferior) en la que puedes ver todas las capas enumeradas en el párrafo anterior, me gustaría llamar tu atención sobre la sección de Propiedades (en la parte superior).

En esta sección es posible visualizar los parámetros elegidos para la capa de ajuste seleccionada en cada momento (en la imagen, la capa de Exposición). Como sabes, podrás variar estos valores en cualquier momento y sin que ello suponga una pérdida de calidad.

En esta misma sección, si haces clic sobre el icono de máscara de capa (rectángulo blanco con un círculo negro en su interior), podrás también variar la máscara que marca la región a la que se aplica el ajuste.

Valores como el de "Desvanecer" podrán permitirte aplicar un cierto desenfoque a la máscara de modo que los bordes no sean tan claros y así logres un resultado mucho más natural.

Este desvanecimiento de la máscara de capa es equivalente al desenfoque Gaussiano sobre la máscara de capa que a menudo recomiendan cuando desean que la aplicación de un determinado ajuste sobre una región goce de un aspecto natural.

¡Ponlo En Práctica!

Ahora que conoces cómo funcionan y lo que pueden aportar a tus fotografías es el momento oportuno para comenzar a trabajar con las capas de ajuste, ¿a qué esperas?

Y si por el camino tienes dudas al respecto o consejos que crees que pueden ser útiles para otros que están comenzando, no dudes en dejar tu comentario.

¡Tu turno!

Javascript - head.js - Libreria para cargar en paralelo otros javascripts de tu web

2012-11-27T13:19:00.000-08:00

Head.js es una librería javascript que nos permite entre otars posibilidades organizar y cargar nuestros scripts en paralelo de foma que la carga de la web sea más rapida.

Esta utilidad nos permite cargar scripts de forma separada al resto del proceso de renderización de la página. Al cargar los javascript en paralelo logramos que nuestra pagina reduzca el tiempo de carga en varios segundos, mejorando considerablemente la experiencia de velocidad de carga de nuestra web.

Especialmente útil cuando tenemos ficheros javascript muy grandes, y queremos ejecutar algo antes de que sean cargados, este pequeño script javascript (2.5Kb minimizada y comprimida) también dispone de un corrector automático de CSS, permite usar etiquetas de HTML5 aunque el navegador todavía no lo soporte (Caso Internet Explorer) y permite definir diferentes estilos CSS en función del tamaño de la pantalla.

Interesados pueden acceder a más información y descarga de la última versión de Head.js desde headjs.com.

Recursos - Freepik - para desarrolladores y diseñadores

2012-11-27T13:13:00.000-08:00

Hace ya algún tiempo que hablamos por por primera vez deFreepik, un completo buscador de recursos gráficos en la Web que 2 años después de su aparición ha logrado consolidadarse como un referente diario para todo tipo de diseñadores web.

Ahora además sus responsables nos infornan de una última novedad con la que complemetar su oferta de recursos gratuitos. Una sección con "mega descuentos" en recursos premium al más puro estilo Groupon, y entre los que es posible encontrar grandes packs de iconos, vectores y temas para Wordpress, entre otros. En esta sección podemos encontrar ofertas de hasta un 95% de descuento sin ningún tipo de trampa ni cartón, gracias a los acuerdos alcanzados con empresas que permiten ofertar grandes descuentos por tiempo limitado, lo que se conocen como gangas.

Otra de las novedades de Freepik es la mejora sustancial en la cantidad y, sobre todo, la calidad de sus resultados de búsqueda, gracias a los complejos sistemas de relevancia desarrollados y que permiten al usuario encontrar fácilmente recursos de alto nivel entre los más de 1,4 millones de vectores, fotos y archivos PSD.

Freepik es una interesante opción por su oferta de recursos para diseñadores y desarrolladores, que logra minimizar los gastos en el desarrollo de un proyecto web.

Interesados pueden acceder a Freepik y conocer su amplia oferta de recursos desde http://www.freepik.es/

jQuery - uploadify - Subir ficheros desde tu web

2012-11-27T13:09:00.003-08:00

Uploadify es un uploader configurable con el que nuestros usuarios puedan subir archivos de forma rápida y que podremos implementar de forma sencilla en nuestro proyecto web.

Este plugin jQuery nos permite agregar la funcionalidad de carga múltiple de archivos a su sitio web además de incluir características como drag and drop, indicador del progreso en tiempo real o máxima personalización de sus principales aspectos.

Existen dos versiones distintas de Uploadify (HTML5 y Flash) que añaden más flexibilidad a la hora de elegir la opción correcta para implementar en nuestro site.

Uploadify para Flash es completamente gratuita y actualmente se encuentra en la versión 3.2. UploadiFive es la opción para HTML5, soporta las últimas versiones de los navegadores de Firefox, Chrome y Safari, además de Internet Explorer 10 y tiene un coste de 5 dólares por la versión estandar.

Esta utilidad para desarrolladores web está disponible para su descarga desde www.uploadify.com donde además vas a poder encontrar completa documentación, demos y demás información.

Dynatree - Javascript jQuery para crear listas de directorios en forma de arbol

2012-11-26T09:06:00.002-08:00

Dynatree es un plugin de jQuery que permite crear dinámicamente controles de vista de árbol utilizando JavaScript u HTML.
Está optimizado para grandes árboles dinámicos ( los elementos DOM sólo se crean cuando realmente sea necesario ).
Programable a través de una interfaz orientada a objetos.
Es compatible con carga lenta y Ajax.
Es compatible con Casillas y la persistencia jerárquica, arrastrar y soltar, etc...
Se puede manejar con el teclado.
Es de código abierto y liberado bajo la licencia MIT.

Requisitos: Framework jQuery
Download Link: https://code.google.com/p/dynatree/
Licencia: MIT License

Javascript - Pilas de imagenes adaptativas jQuery

2012-11-26T09:01:00.000-08:00

Efecto Miniatura adaptativo con Agrupación automática en pila: es un plugin de jQuery experimental que se encarga de agrupar miniaturas por un grupo compartido de datos de atributo. Al hacer clic en el montón, las miniaturas que pertenecen a esa pila se extenderán en una cuadrícula utilizando transiciones CSS.

Esto permite que la agrupación automática de miniaturas utilice un efecto de pila.

Las miniaturas se agruparán de acuerdo con sus datos compartidos de tipo atributo y al hacer clic una vez, la pila se dispersará y sus miniaturas volaran a sus posiciones. Las imágenes en miniatura puede ser ligeramente giradas o notar latencia cuando se colocan.

Y lo mejor de todo, la propia red es adaptativa, lo que significa que si no hay suficiente espacio horizontal teniendo en cuenta el ancho y el canal de los artículos, el número de columnas disminuirá y la red se reordenara.

Requirements: jQuery Framework
Demo: http://tympanus.net/Development/Stapel/
License: License Free

Batch - Iconos y estilos de icono para la web gratis

2012-11-26T08:53:00.001-08:00

Batch es un conjunto cuidadosamente diseñado y hecho a mano de 300 iconos para web y diseño de interfaces de usuario.

Cada icono tiene una forma única. Hechos en Photoshop, contienen todas las capas a la que se puede escalar para arriba - y abajo - sin pérdida de calidad.

Añadiendolos en los estilos de capa y mezclandolos tambien funcionan muy bien sin perdida de calidad.

Batch es completamente libre, porque Adán Whitcroft quiere ver en los diseños tantos como sea posible.

Él quiere que sea un recurso para los diseñadores al cual recurriran a gusto y con frecuencia, y sin el temor de olvidar donar o pagar por ello en un futuro.

Javascript - Notifica a tus usuarios cuando estan offline

2012-11-26T08:47:00.003-08:00

Notifica a los usuarios de tu web, cuando han perdido la conexion a internet, y por tanto no pueden seguir navegando por tu sitio.

Muchas veces, nos pasa que navegando por algun sitio web, de pronto pulsamos un enlace y nos da el mensaje :

Error 106 (net::ERR_INTERNET_DISCONNECTED): Se ha perdido la conexión a Internet.

Claro, nosotros tratamos de ver que ha pasado con la conexion y le damos al boton recargar.
Aparentemente en cualquier marco o contexto, esto no es un problema ya que recargamos y listo. Pero si se esta realizando una compra, una seleccion de algo muy particular, la eleccion de algo donde solo podremos hacerlo una vez... etc... para todas estas cosas, es muy util poder controlar que no le pase nada a la conexion a internet y por tanto esta herramienta nos ayuda a solucionar esto.

http://oskarkrawczyk.github.com/heyoffline.js/

HDR - Ese gran desconocido que tan bien les sienta a nuestras fotos

2012-11-26T08:25:00.003-08:00

Con todo lo que hemos hablado ya sobre fotografía HDR en dZoom, aún no hemos cubierto un uso de esta técnica que puede dotar a nuestras imágenes de un acabado y calidad únicos. Estoy hablando, por supuesto, de la fotografía de interiores.

La fotografía de interiores es una fotografía que a menudo presenta una enorme variedad lumínica. Por lo que el poder contar con una técnica que posibilita captar y mostrar este amplio rango de luces ofrecerá unos magníficos resultados. En este artículo veremos algunos consejos para lograr fotos irrepetibles.

Como comentaba en la introducción, me parecía mentira que aún no hubiésemos hablado de esto en dZoom. Sin embargo, haciendo un poco de memoria he encontrado este artículo con consejos para fotografiar tu vivienda en el que el número 12 planteaba el uso de HDR. ¿Quieres que tus fotos de interiores sean únicas? Pues échale un vistazo a ese artículo.

La Escena Que Queremos Captar

Todo surgió en la casa de campo de unos amigos. Una casa preciosa, por cierto, de la que me pidieron tomar una fotografía para poder imprimirla y exponerla en su vivienda habitual.

La fotografía en cuestión era de su salón y, como puedes ver, como toda fotografía de interiores, contaba con una luminosidad que resultaba imposible captar con una sola toma.

Como puedes ver, la captura (10mm, f/13, 13 seg, ISO 100), aunque es correcta en cuanto a exposición general, tiene luces reventadas como las de la ventana y la lámpara y sombras demasiado empastadas como las de los sofás.

Había que hacer algo para mejorar el resultado, había llegado el momento del HDR ;)

Consideraciones A Tener En Cuenta

Parto de la base de que sabes qué es la técnica HDR y cómo aplicarla, sino es así, no te preocupes, tenemos una colección de 7 fantásticos artículos sobre HDR a través de los que poder convertirte en todo un experto de la técnica. No te la pierdas.

Una vez que tenemos los conceptos básicos claros, déjame que realice algunos comentarios para lograr el mejor resultado posible.

El uso de esta técnica en condiciones como la de la escena del apartado anterior viene a suplir una deficiencia de iluminación. Podrías no tener que recurrir a la técnica, pero eso conllevaría que pudieses disponer de todo un completo y caro arsenal de iluminación. En muchos casos (como en el mío) eso no es posible. La técnica HDR resulta mucho más barata.
¿Qué hay del número de tomas a realizar? Como sabes, en función del rango de iluminación que tengas que cubrir, es posible que tengas que tomar un mayor número de fotografías y que la distancia de exposición entre éstas deba ser mayor para tratar de cubrir todo el rango.
¿Por qué no incluir el flash en alguna de las tomas? Ya vimos hace unos artículos cómo el uso del flash podía ayudarnos a lograr resultados francamente buenos en conjunción con la técnica HDR. Prueba a incluirlo en alguna toma. El resultado lo agradecerá.
A la hora de medir, mi recomendación es que selecciones la medición puntual sobre el elemento más luminoso de la escena y, a partir de ahí, realizando tantas tomas como necesites para cubrir el rango, vayas compensando la exposición -1EV, -2EV, -3EV, -4EV, ...

Después de estos consejos, es momento para ponerse manos a la obra, ¿no te parece?

Coge La Cámara, Prepáralo Todo Y... ¡Al Ataque!

Ya tenemos claro lo que queremos: el encuadre, el número y distancia entre las tomas, si incluiremos o no el flash.

Hemos montado el trípode, preparado el disparador remoto y configurado la opción de bracketing, si la tiene, en nuestra cámara (si no, nos tocará hacerlo a mano).

Llegó el momento: ¡dispara!

En esta ocasión, realicé tres tomas con las características que puedes ver en la imagen superior. Para ello, seleccioné el modo bracketing de mi cámara con una separación entre tomas de 2EV.

Lamentablemente, cuando trabajé con ellas en casa, observé que no me habría venido mal hacer un par de tomas extra. Pero ya era algo tarde...

Por eso hacía hincapié en el apartado anterior sobre la necesidad de evaluar muy bien el número de tomas y distancia entre éstas que necesitaremos. No lo olvides cuando te pongas manos a la obra.

La Parte Más Divertida. Y También La Más Difícil

Como bien sabes, tras tomar las fotografías, es momento de comenzar con el procesado en un programa específico de HDR. Yo suelo emplear dos: Photomatix y HDR Efex Pro, aunque hay muchos más.

En esta ocasión me decanté por HDR Efex Pro, concretamente la versión 2. A continuación puedes ver una captura del interfaz.

Lo siguiente es comenzar a jugar con los ajustes hasta encontrar el resultado deseado. Para conocer los ajustes y saber cómo manejarlos, puede venirte bien este artículo.

Tras varias pruebas, éste es el resultado que alcancé:

Comparémosla con la fotografía no HDR y así podremos ver de forma más clara qué ha aportado la técnica a la fotografía.

Fíjate en la zona de sombras (sillones, mesa...) es ahí donde la técnica aporta una mayor riqueza a la fotografía, ¿no te parece?

Las luces altas, sin embargo, no hemos podido recuperarlas demasiado. Como comentaba en el anterior apartado, habría necesitado disparar una toma con, al menos, -4EV. De ahí la importancia de planificar muy bien las exposiciones de las distintas tomas.

Y Eso Es Todo Amigos. ¡Anímate a Probarlo!

Hasta aquí este artículo. Espero haberte podido dar algunas ideas y que tu cerebro ya esté pensando en cómo poner en práctica todo lo aprendido.

La próxima vez que tengas que realizar fotografía de interiores, ya sabes, valora la posibilidad de emplear la técnica HDR. Y, si finalmente optas por ponerla en práctica, no olvides los consejos que hemos comentado. E, incluso, si te animas, compleméntalos con los tuyos.

¡Hasta la próxima!

Photoshop - Mejorando los colores

2012-11-26T08:06:00.001-08:00

En determinadas fotografías, aunque no es lo habitual, puede interesarnos alterar los colores de alguno de los elementos para lograr una mayor armonía y composición global y, de este modo, obtener un mejor resultado.
En el artículo de hoy vamos a ver una fantástica herramienta que ofrece Photoshop para lograr este propósito. Se trata del Ajuste para igualar el color de dos selecciones dadas. Como verás a lo largo del artículo, es tremendamente sencillo y, a buen seguro, seguro que se te ocurren varias fotos en que te vendría de perlas poder utilizarlo. ¿Quieres saber cómo aplicarlo?

La Imagen De Partida y Qué Queremos Conseguir

Como de costumbre, mostraremos la imagen de partida y describiremos lo que queremos conseguir para, a continuación, describir cómo conseguirlo.

Se trata de una fotografía de una sesión que hice sobre la casa en alquiler de unos amigos. ¿Quieres sabercómo tomar fotos para el alquiler o venta de tu vivienda? No te pierdas estos 7 consejos.
El cambio que me gustaría realizar sobre la imagen es la variación del color de la colcha de la cama. Quiero probar cómo quedaría la foto con la colcha del mismo rojo que la cortina.
Para eso me vendrá como anillo al dedo el ajuste para igualar colores, veamos cómo aplicarlo en Photoshop.

Igualando El Color En Photoshop: Paso a Paso

Como es obvio, lo primero que deberás hacer es tener abierta la imagen en Photoshop. ¿Ya la tienes lista? Continuemos con los pasos.
1. Duplicamos la imagen mediante Imagen > Duplicar... ¿Para qué? Para tomar de una imagen la selección con el color que queremos igualar y en la otra proceder a igualar el color.
2. Volvemos a la imagen inicial y llevamos a cabo una selección lo más precisa posible del elemento cuyo color vamos a querer variar igualando con el de otro de los elementos de la composición.

A estas alturas de la película ya conoces muchos modos de llevar a cabo una selección en Photoshop. Por si acaso, te dejo unos apuntes:

Seleccionamos la colcha y, una vez que lo hemos conseguido, procedemos con el siguiente paso.
3. Abrimos la imagen que creamos anteriormente como copia y que yo he denominado como "cortina" en este ejemplo y hacemos una selección (no es necesario que sea tan precisa) del elemento cuyo color querremos tomar como referencia.

Tras estas dos selecciones todo el trabajo duro está hecho. Continuemos con el proceso.
4. Volvemos nuevamente a la imagen original y hacemos clic en Imagen > Ajustes > Igualar color y tomamos como origen la selección de la imagen en que seleccionamos la cortina.

Como por arte de magia, la colcha ha tomado el color de la cortina. Aunque manteniendo la textura, pliegues y sombras originales.
5. A través de las opciones Luminancia, Intensidad de color y Transición podrás variar el resultado final y lograr que parezca más natural.
Con la luminancia podrás aclarar u oscurecer el color, con la intensidad de color trabajarás con la viveza del mismo y el valor de transición definirá cuánto del color original y cuanto del color que se toma como muestra se utilizarán para definir el color final.

El resultado es francamente sorprendente, ¿verdad? ¿A que jamás habrías dicho que la colcha no era roja en realidad?
Quizás, el único pero que puede ponérsele a la imagen anterior es que la selección no ha sido todo lo precisa que debiera. En algún punto aún se atisba el marrón antiguo. Esto es algo que deberás tener en cuenta cuando lo apliques a tus imágenes. Procura invertir el tiempo y paciencia suficiente en la selección de la imagen final.
En cualquier caso el resultado es muy bueno y parece que la colcha siempre ha sido roja. No obstante, siempre nos quedará la imagen del espejo para saber de qué color era realmente. Ups, quizás también debería haber variado su color en la imagen reflejada por el espejo... ;)

¡Anímate!, ¡Pruébalo!, ¡Y Cuéntanos!

Y esto es todo, en 5 sencillos pasos hemos logrado variar el color y obtener un resultado bastante natural.
¿Por qué no te atreves a intentarlo en una de tus imágenes y nos cuentas cuáles han sido tus sensaciones al probar esta funcionalidad? Estoy seguro de que más de uno vais a quedar francamente sorprendidos de lo que se puede conseguir.
¡Adelante!, ¡es tu turno!

Photoshop - Mascara de Capa para integrar tus ajustes

2012-11-26T07:44:00.001-08:00

Cómo Integrar Mejor Tus Ajustes En Photoshop Mediante El Suavizado de la Máscara de Capa

Cuando uno tiene a mano herramientas tan potentes como las capas de ajuste y las máscaras de capa y el conocimiento suficiente sobre el ajuste por zonas, se lanza rápidamente a aplicar estos ajustes a todas sus imágenes.

Y lo cierto es que es fantástico, porque los resultados conseguidos en nuestras imágenes las mejoran considerablemente. Sin embargo, hay algo básico que se debe controlar al aplicar estos ajustes y es elsuavizado de la máscara de capa, de modo que se logre un resultado natural en los ajustes aplicados.

En el artículo de hoy te ofrezco algunos consejos para mejorar tus máscaras y así lograr grandes resultados en tus retoques. ¿Te los vas a perder?

Por supuesto, antes de definir la máscara de capa y aplicar el ajuste adecuado, lo primero es identificar la zona o zonas de la imagen que requieren ajustes específicos.

En la imagen que se muestra podríamos pensar en 4 zonas de trabajo independiente: cielo, mar, arena y barco del primer plano.

En este artículo nos centraremos en el barco del primer plano, barco para el que tendremos que ajustar su luminosidad y, especialmente, el nivel de contraste, pues, como se puede ver en la imagen, ha quedado un poco plano y las sombras de la vela un poco lavadas.

Segundo. Define La Máscara de Capa

Si no has trabajado demasiado con las máscaras de capa es probable que te venga bien echarle un vistazo a este artículo.

Selecciona la herramienta Editar en modo máscara rápida (Q) y comienza a pintar en negro sobre la zona que quieras seleccionar. En este caso se trata del barco del primer plano.

Al pintar sobre la imagen observarás que en aquellas zonas pintadas la imagen toma un tono rojizo.

Para la definición de máscaras de capa hay algunos consejos que es oportuno seguir:

Define la Opacidad y el Flujo del pincel de modo que se adecúen a tus necesidades. Es habitual reducir estos porcentajes para tener un mayor control sobre el pincel. No olvides tampoco utilizar un pincel con una dureza distinta al 100%, mejorará tus resultados.
Recuerda las teclas rápidas que permiten establecer los colores negro y blanco como primarios (D), así como intercambiar estos colores (X).
Al realizar la selección es preferible equivocarse por defecto (como en el caso de la base del barco en la que ves que hay zonas blancas), en lugar de por exceso.

Una vez finalizada la selección, presiona nuevamente la Q y verás establecida la selección.Presiona Ctrl + May + I para invertir la selección (ya que la parte en rojo no era la zona seleccionada, sino la no seleccionada).

Hecho esto, habrás completado la selección. Y estarás en condiciones de comenzar a realizar los ajustes necesarios.

Si te sientes más cómodo con otra herramienta para llevar a cabo la selección de la zona sobre la que trabajar, como, por ejemplo, el lazo, el lazo magnético, la herramienta de selección rápida, etc., no dudes en utilizarla.

Da igual la herramienta que uses para llevar a cabo la selección, lo que importa es que lleves a cabo la misma. Tampoco tiene por qué ser de una elevada precisión, pero sí suficiente.

Tercero. Aplica el Ajuste

Una vez definida la zona de trabajo a través de una selección es el momento para poner en práctica lo aprendido en el artículo sobre capas de ajuste.

En el caso que nos ocupa, en que buscamos mejorar el contraste del primer barco y tratar de recuperar sombras un tanto lavadas de la vela, nos decantamos por una capa de Curvas.

Al crear una nueva capa de ajuste con una selección activa, automáticamente se incorporará la selección como máscara de capa de la capa de ajuste.

El siguiente paso será, por supuesto, trabajar sobre la curva para lograr la mejora que indicábamos.

Como se puede apreciar en la siguiente imagen que muestra el antes y el después, la mejora de contraste lograda es considerable. Mejora que sólo se ha aplicado en la zona afectada por la máscara de capa definida.

Apreciable la mejora, ¿verdad?

Veamos El Ajuste Al 100%. ¿Qué Pasa Con las Zonas de Transición?

Tras lograr el ajuste global deseado, es muy recomendable mostrar la imagen al 100% (Ctrl + 1) y revisar las zonas en las que se ha aplicado el ajuste.

Si lo hiciésemos en la imagen sobre la que hemos estado trabajando en este artículo veríamos lo siguiente.

En la zona de la vela se puede apreciar cómo en algunas zonas la máscara de capa no ha sido demasiado precisa. Esto junto con el hecho de que el salto entre la zona ajustada y la zona no ajustada sea muy brusco son las dos situaciones que debemos tratar de arreglar en la visión al 100%.

Para corregir estos defectos, tendríamos dos posibilidades: trabajar sobre la máscara de capa, nuevamente pintando en negro o blanco, en función de si queremos no aplicar o aplicar el ajuste en aquella zona en la que pintemos; o bien obtener una máscara de capa con bordes más difuminados y naturales.

Puesto que la primera de las posibilidades ya la hemos cubierto cuando hemos visto cómo crear una máscara de capa a través de la opción máscara rápida, nos centraremos en la segunda.

Mejora de la Máscara Mediante Desenfoque Gaussiano

La consecución de bordes más difusos se puede lograr de forma fácil aplicando un desenfoque gaussiano (seguro que has oído hablar de él en más de una ocasión).

1. Visualizamos la máscara de capa, para ello hacemos clic en la máscara manteniendo presionada la tecla Alt.

Como se puede ver, la máscara de capa no es demasiado precisa y los bordes (gracias al uso de pinceles con dureza diferente al 100%) no son demasiado bruscos.

Sin embargo, hay zonas en las que no hemos ajustado lo suficiente, por lo que vendrá bien difuminar éstos.

2. Aplicamos un desenfoque gaussiano, para ello hacemos clic en Filtro > Desenfocar > Desenfoque gaussiano... y elegimos, por ejemplo, 25 píxeles de radio de desenfoque.

Si volvemos a ver la zona que presentaba anteriormente el defecto (volviendo a hacer clic sobre la máscara y manteniendo presionada la tecla Alt) veremos como se ha corregido el problema.

El resultado está realmente integrado, ¿verdad?

Mejora de la Máscara a Través de la Opción Desvanecer

Como este ajuste es habitual cuando trabajamos con máscaras de capa, los chicos de Adobe han decidido facilitarnos la vida y, al crear la máscara de capa, nos ofrecen una paleta de Máscaras en la que es posible aplicar este mismo efecto.

Si sobre una capa de ajustes haces clic en la máscara, verás cómo se te muestra una ventana denominada de Máscaras en la que tienes las opciones que puedes ver en la imagen.

A través de la opción Desvanecer podrás lograr el mismo resultado que obtenías aplicando un filtro de desenfoque gaussiano, con la ventaja de que podrás ver directamente el resultado del desenfoque, ya que, como ves, no visualizas la máscara, sino la imagen.

Haz la prueba, selecciona un desvanecimiento de 25 px y verás como el resultado es el mismo que obtenías al aplicar un desenfoque gaussiano a la máscara de capa de radio 25 px.

En cuanto a las otras opciones, la Densidad es recomendable no tocarla, pero el botón de Borde de máscara..., te permitirá perfeccionar y mejorar la máscara de capa.

Haciendo clic en dicho botón podrás permitir que Photoshop te ayude a dectar el borde y, en base a éste realizar la selección (sólo para selecciones muy sencillas).

Y, la opción más interesante, "Desplazamiento de borde", que te permitirá ajustar la máscara de capa, incrementándola o reduciéndola. Algo que unido al desvanecimiento te ofrecerá resultados fantásticos.

Un Último Consejo: Usa El Gris En Las Máscaras Para Zonas de Transición o Zonas En Las Que Busques Un Efecto Más Suave

Lo último que me gustaría indicarte en el artículo de hoy sobre las máscaras de capa es que valores, para aquellas situaciones en las que en determinadas zonas desees ajustes más locales, que, aunque tendemos a usar exclusivamente blanco y negro, las máscaras de capa permiten el uso de grises,

Puedes lograr estos grises, por ejemplo, reduciendo la opacidad de blanco y negro y pintando sobre una zona, bien negra, bien blanca. De modo que, poco a poco, irás suavizando estos tonos e incrementando o reduciendo la intensidad del ajuste.

Con estos grises podrás lograr resultados más suaves para zonas de transición, o zonas en las que desees que el ajuste no sea tan agresivo.

No lo olvides, las máscaras de capa también permiten el uso de grises, y éstos pueden ser de gran utilidad en determinadas situaciones.

Ponte A Practicar Y Consigue Fantásticos Resultados

Creo que con estos consejos estás en condiciones de lograr resultados espectaculares y, sobre todo, muy naturales, en los que será difícil percatarse del uso de Photoshop.

Ahora sólo falta que empieces a aplicarlo en tu procesado y lo domines a la perfección, ¿a qué esperas para comenzar a poner en práctica lo aprendido?

Ya sabes, elige la zona, crea la selección, aplica la capa de ajuste y desenfoca la máscara para lograr un resultado integrado y natural.

Photoshop - Cómo cambiar el color de los ojos

2012-11-22T16:27:00.000-08:00

Cómo cambiar el color de los ojos

Con photoshop es bastante fácil cambiar el color de los ojos ¿Os interesa?

Antes de empezar quiero agradecer la colaboración de la modelo, estos ojos están todavía sin retocar, son naturales y tengo la suerte de verlos a diario.

Esta manera es muy fácil pero tiene por contra que no es demasiado precisa pues implica dibujar con el ratón, hay maneras más difíciles pero también más profesionales, ya la explicaré en otro artículo.

Para cambiar el color tenéis que seguir unos simples pasos:

Crear una nueva capa.
Elegir un pincel adecuado y el color del que queramos que sean los ojos
Pintamos los ojos. Iris y pupila incluidos, sin pintar la parte blanca.
Por último cambiamos el modo de la capa de normal (por defecto) a tono y damos la opacidad que gustemos.

Aunque es muy posible que el cambio de color no sea el más adecuado, aquí tenéis el resultado que es cuanto menos curioso

Via | Vicia2

Herramientas - Less - Css de forma sencilla

2012-11-20T00:02:00.002-08:00

Como revisar los archivos hechos con LESS (que debemos de guardarlos en extensión .less) y se puede hacer de tres formas: en el cliente (que con JavaScript es posible), desde nuestro servidor (que el será directamente el que revise el archivo y lo transformará en CSS) y por último revisarlo en un editor u online y posteriormente usar el resultado (si no queremos estar haciéndolo con el servidor esta es la opción más recomendable).

La primera opción consiste en usar un archivo JavaScript que nos podemos bajar desde la web oficial y revisa en el cliente la hoja de estilo.


<!-- Así es como se añade un archivo .less -->
<link rel="stylesheet/less" type="text/css" href="[archivo].less">

<!-- Añadimos el archivo JavaScript descargado previamente -->
<script src="less.js" type="text/javascript"><script>

Este uso está recomendado para hacer pruebas o para hacer cosas sencillas y rápidas ya que no es recomendable para grandes proyectos (para ello es mejor revisarlo en el servidor o crear un CSS a partir del resultado).
Para que coja de esta forma los archivos .less debemos de establecer el parámetro rel como "stylesheet/less" y detras de los archivos .less el archivo JavaScript.

Servidor

Node.js

Para hacerlo desde un servidor tenemos varias opciones, la primera es la que desde la web oficial nos recomiendan, que es instalarlo en nuestro servidor Node.js, y se hace introduciendo en la consola lo siguiente:


$ npm install -g less

Una vez instalado podemos pasar el archivo .less a .css revisándolo de la siguiente forma (el parámetro -x es el que se encarga de minificar el resultado).


$ Lessc [archivo origen].less [archivo destino].css -x

Se puede crear el archivo CSS en tiempo de ejecución, pero es recomendable usar este para que sea más eficiente nuestra web.

PHP

Otra opción es usarlo en nuestro servidor PHP con lessPHP (podemos descargarlo desde aquí), que hace lo mismo que la opción anterior pero con este tipo de servidor, su funcionamiento es parecido (aunque este no se puede acceder por consola, que yo sepa), debemos de crear un script PHP que al ejecutarse nos compile el .less (se puede hacer más cosas con esto pero lo básico y más aconsejable es esto) y solo crea el archivo al ejecutarlo si el .css que establecemos no existe o es antiguo.


<?php





require "lessc.inc.php";
$less = new lessc;
$less -> checkedCompile("[archivo origen].less","[archivo destino].css");

?>

Revisarlo y exportarlo

Esta es la opción que más recomiendo por ser rápida y fácil, que consiste en revisar el código LESS y pegarlo en el archivo .css, y para esto hay unas cuantas herramientas:
- SimpLESS: esta herramienta es de escritorio y es multiplataforma (Windows, Linux y Mac OSX).
- Crunch: esta herramienta también es multiplataforma, ya que esta hecha con Adobe Air.
- Less Tester: este es el revisor online que recomendé usar en la introducción, y por supuesto es el más multiplataforma.

Via Xitrus

Tools - jQuery Burn Plugin

2012-11-15T10:53:00.001-08:00

jQuery Burn is a jQuery plugin which adds a flame-like effect to text using multiple text-shadows, animated by repeatedly changing their horizontal offsets. jQuery burn will scale appropriately to size the target text, however you must target the text itself.

The effect can be somewhat CPU intensive, so use it sparingly. It can be stopped and restarted dynamically, colored, stretched, offset, sped up and slowed down. The flame motion is simulated with a simple wave equation solution.

Requirements: jQuery Framework
Download Link: http://sinetheta.github.com/burn/
License: MIT, GPL License

Herramientas/Buenas Practicas - Google CDN para usar librerias de javascript

2012-11-13T13:19:00.004-08:00

Si usas jQuery y te preguntas que CDN te conviene más usar no dejes de darle un vistazo al siguiente artículo.

CDN es el acrónimo deContent Delivery Network, algo así como Red de Entrega de Contenido, es decir un servicio que, en el caso de jQuery, nos permite incluir las librerías de código del framework desde los servidores de un tercero.

jQuery no es el único que utiliza estos sistemas para distribuir sus paquetes de código, sino que este recurso es ampliamente utilizado por diversos frameworks y librerías del entorno web.

El uso de CDN es recomendable debido a razones como una mayor velocidad de entrega y una consecuente optimizacón de nuestros sites sin embargo, ya que diversas empresas ofrecen este servicio de forma gratuita, muchos nos preguntamos cuál es la que ofrece un mejor rendimiento.

Esta cuestión cobra mayor importancia en el caso de tecnologías como jQuery ya que hablamos del uso de un recurso tan común en el mundo del desarrollo web como el framework javascript más usado en todo el mundo.
Libraries

Aqui algunos ejemplos de incrustar librerias varias desde el api de google:

To load a hosted library, copy and paste the HTML snippet for that library (shown below) in your web page. For instance, to load jQuery, embed the<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> snippet in your web page.

The following section lists all of the libraries currently hosted. We list the library name and all of the supported versions.

AngularJS: snippet: <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>; site: http://angularjs.org; versions: 1.0.2, 1.0.1

Chrome Frame: snippet: <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>; site: https://developers.google.com/chrome/chrome-frame/; versions: 1.0.3, 1.0.2, 1.0.1, 1.0.0

Dojo: snippet: <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"></script>; site: http://dojotoolkit.org/; versions: 1.8.1, 1.8.0, 1.7.4, 1.7.3, 1.7.2, 1.7.1, 1.7.0, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.3, 1.2.0, 1.1.1

Ext Core: snippet: <script src="//ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>; site: http://www.sencha.com/products/extjs/; versions: 3.1.0, 3.0.0

jQuery: snippet: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>; site: http://jquery.com/; versions: 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3; note: 1.2.5 and 1.2.4 are not hosted due to their short and unstable lives in the wild.

jQuery UI: snippet: <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>; site: http://jquery.com/; versions: 1.9.1, 1.9.0, 1.8.24, 1.8.23, 1.8.22, 1.8.21, 1.8.20, 1.8.19, 1.8.18, 1.8.17, 1.8.16, 1.8.15, 1.8.14, 1.8.13, 1.8.12, 1.8.11, 1.8.10, 1.8.9, 1.8.8, 1.8.7, 1.8.6, 1.8.5, 1.8.4, 1.8.2, 1.8.1, 1.8.0, 1.7.3, 1.7.2, 1.7.1, 1.7.0, 1.6.0, 1.5.3, 1.5.2; note: This library depends on jquery. You must also load jquery before loading this module. Version 1.8.3 is not hosted due to its short life, and the alias 1.8.3actually loads 1.8.4.

MooTools: snippet: <script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>; site: http://mootools.net/; versions: 1.4.5, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.5, 1.2.4, 1.2.3, 1.2.2, 1.2.1, 1.1.2, 1.1.1

Prototype: snippet: <script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>; site: http://prototypejs.org/; versions: 1.7.1.0, 1.7.0.0, 1.6.1.0, 1.6.0.3, 1.6.0.2

script.aculo.us: snippet: <script src="//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script>; site: http://script.aculo.us/; versions: 1.9.0, 1.8.3, 1.8.2, 1.8.1; note: This library depends on Prototype. Before loading this module, you must load Prototype.

SWFObject: snippet: <script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>; site: http://code.google.com/p/swfobject/; versions: 2.2, 2.1

WebFont Loader: snippet: <script src="//ajax.googleapis.com/ajax/libs/webfont/1.0.31/webfont.js"></script>; site: https://developers.google.com/webfonts/docs/webfont_loader; versions: 1.0.31, 1.0.30, 1.0.29, 1.0.28, 1.0.27, 1.0.26, 1.0.25, 1.0.24, 1.0.23, 1.0.22, 1.0.21, 1.0.19, 1.0.18, 1.0.17, 1.0.16, 1.0.15, 1.0.14, 1.0.13, 1.0.12, 1.0.11, 1.0.10, 1.0.9, 1.0.6, 1.0.5, 1.0.4, 1.0.3, 1.0.2, 1.0.1, 1.0.0

Herramientas|Tutoriales - WebMatrix 2.0 - Como funcion y como empezar

2012-11-12T14:42:00.000-08:00

Con la aparición de WebMatrix 2.0 en su versión final, se nos proporcionan nuevas y poderosas plantillas. Una de ellas permite crear de manera muy simple un sitio web, basado en las normas Node.js.

Dichas especificaciones fueron definidas en el año 2009 basándose en el motor V8 JavaScript de Google, desarrollado inicialmente para Chrome (implementa de base el estándar ECMAScript). Consúltese, para detalles, la documentación a que se remite en las sucesivas referencias dadas en el artículo y en el propio entorno de WebMatrix.

Por Jaime Peña Tresancos

En el presente artículo abordaremos los siguientes objetivos:

Instalar y preparar WebMatrix para poder trabajar con una plantilla del tipo Sitio Express
Crear un sitio web basándonos en la plantilla "Sitio Express" de WebMatrix
Elucidar y manejar el (los) archivo(s) de usuario básico(s) de trabajo con Node.js
Crear un pequeño formulario HTML 5 y ejecutarlo en el servidor local IIS, que ha sido a su vez instalado

En la tabla que sigue proporcionamos algunos de los lugares de Internet con información relevante, tanto respecto a Node.js, como de la propia implementación de un sitio Express.

Descripción	Dirección URL
Sitio Web soporte oficial de desarrollo de Node.js	nodejs.org
Breve explicación y enlaces que se pueden encontrar en Wikipedia en castellano	es.wikipedia.org/wiki/Nodejs
Para seguir en Twitter todo lo relativo a Node.js	twitter.com/nodejs
Información particular acerca de la implementación de un sitio Express	expressjs.com/
Grupos de discusión en Google	groups.google.com/forum/?fromgroups#!forum/nodejs
Qué es Node.js (IBM)	www.ibm.com/developerworks/ssa/opensource/library/os-nodejs

Resumen: Node.js es un intérprete JavaScript del lado del servidor que cambia la noción de cómo debería trabajar un servidor. Su meta es permitir a un programador construir aplicaciones altamente escalables y escribir código que maneje decenas de miles de conexiones simultáneas en sólo una máquina física. (Fuente IBM)

Iniciaremos WebMatrix y seleccionaremos crear un nuevo proyecto basándonos en una plantilla (Template).

Dentro de las plantillas disponibles escogeremos "Sitio Express", le daremos el nombre de Sitio Express 0; posteriormente haremos clic sobre el botón Siguiente.

Comenzará, si es la primera vez que lo hacemos, el proceso de instalación de la plantilla en nuestro sistema.
En una primera ventana se nos muestra el acuerdo de licencia (CLUF), que deberemos leer y en su caso aceptar, haciendo clic sobre el botón Acepto.

Seguirá la instalación con la descarga e instalación propiamente dicha de Node.js y el Administrador de paquetes de nodo, entre otros.

Al finalizar, se nos presentará el informe de resultados. Nótese que también se habrá instalado, si no lo estaba ya, el entorno IISNode e IIS Express (IIS viene de Internet Information Server), para poder gestionar el modo de servidor de información a través de Internet.
Prosigamos haciendo clic sobre el botón Aceptar.

Ahora ya nos encontraremos en el entorno de desarrollo de WebMatrix, concretamente en su área de gestión del Sitio. Aquí podremos:

Conocer la dirección URL local del sitio que será creado
Acceder a la documentación del API de desarrollo de Node.js, en que se basa
El modo de instalar y publicar el nodo
La documentación específica del nodo Express

Para realizar las tareas de dotar de contenido al sitio, abandonemos éste área y vayamos a la de "Archivos", haciendo clic sobre Archivos en la parte inferior izquierda del área de trabajo de WebMatrix.

Ya en el área de trabajo de Archivos, realicemos las operaciones:

Hacer clic sobre "Views" en el árbol de archivos y directorios de la izquierda, para desplegarlo
Hacer doble clic sobre el archivo index.jade, para abrirlo en el área de edición de WebMatrix
Cópiese el siguiente código en él y guárdese el contenido

h1= title
p Bienvenido #{title}
© Jaime Peña Tresancos, 2012

<hr>
<h2>Enviar por e-mail el formulario:</h2>
<form action="MAILTO:admin@servidor.net" method="post" enctype="text/plain">
<fieldset style="color:darkred;width: 500px;background: #eeee00">
<legend>Datos personales:</legend>Nombre:
<input type="text" name="name" placeholder="Nombre completo" /><br />E-mail:
<input type="email" name="mail" placeholder="Dirección email" /><br />Comentarios:
<input type="text" name="comment" placeholder="¿Algún comentario?" size="50" />
</fieldset>
<br />
<input type="submit">
<input type="reset">
</form>Podría haber sido cualquier otro código HTML simple, pero hemos optado por un ejemplo como éste porque virtualmente envía datos de un formulario, algo muy común en una página web de servidor activo.
Obviamente, dada la sencillez del ejemplo, nada tratamos de cómo procesar el formulario, simplemente un mailto –remitirlo por e-mail-.

Ya con nuestro código listo, bastará con hacer clic sobre Ejecutar en el botón correspondiente de la barra de herramientas y tendremos ejecutándose en el explorador de Internet nuestra aplicación, gestionada desde el servidor local, tal como se muestra en la figura adjunta.