En este artículo vamos a crear un visor de imágenes en únicamente con CSS3 inspirado en el trabajo de Vladimir Kudinov en Futurico User Interface. Las características de CSS que utilizaremos en este artículo han sido probadas en los navegadores más recientes por que el visor no funcionará en todos los navegadores (prueba con Chrome y Safari). No es recomendable utilizarlo en proyectos profesionales porque no funcionará para todos los usuarios. Utiliza el contenido de este artículo para practicar con las características de CSS3 que podrás utilizar cuando esté realmente disponible en un futuro próximo.

Paso 1 – HTML

Vamos a crear dos listas sin ordenar: una con las miniaturas, y otra con las imágenes. Para unir una imagen con su miniatura respectiva utilizaremos un id por cada una de ellas.

<div class="slider-wrapper">
<ul class="s-thumbs">
	<li><a href="#slide-1"><img src="img/thumb1.png" alt="" /></a></li>
	<li><a href="#slide-2"><img src="img/thumb2.png" alt="" /></a></li>
	<li><a href="#slide-3"><img src="img/thumb3.png" alt="" /></a></li>
	<li><a href="#slide-4"><img src="img/thumb4.png" alt="" /></a></li>
	<li><a href="#slide-5"><img src="img/thumb5.png" alt="" /></a></li>
	<li><a href="#slide-6"><img src="img/thumb6.png" alt="" /></a></li>
	<li><a href="#slide-7"><img src="img/thumb7.png" alt="" /></a></li>
</ul>
<ul class="s-slides">
	<li id="slide-1"><img src="img/slide1.png" alt="" /></li>
	<li id="slide-2"><img src="img/slide2.png" alt="" /></li>
	<li id="slide-3"><img src="img/slide3.png" alt="" /></li>
	<li id="slide-4"><img src="img/slide4.png" alt="" /></li>
	<li id="slide-5"><img src="img/slide5.png" alt="" /></li>
	<li id="slide-6"><img src="img/slide6.png" alt="" /></li>
	<li id="slide-7"><img src="img/slide7.png" alt="" /></li>
</ul>
</div>

Paso 2 – Estilos CSS básicos

En este momento, crearemos el diseño básico de nuestro visor. Para hacerlo, reiniciaremos el margen y relleno de todos los elementos del visor, les daremos un ancho y alto fijos y los posicionaremos.

.slider-wrapper ul,
.slider-wrapper li,
.slider-wrapper div,
.slider-wrapper img,
.slider-wrapper a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	list-style: none;
}

.slider-wrapper {
	width: 508px;
	overflow: hidden;
}

ul.s-thumbs li {
	float: left;
}

ul.s-slides,
ul.s-slides li,
ul.s-slides a,
ul.s-slides img {
	width: 500px;
	height: 350px;
	position: relative;
}

ul.s-slides {
	overflow: hidden;
	clear: both;
}

ul.s-slides li {
	position: absolute;
	z-index: 50;
}

Paso 3 – Estilos CSS3

Ahora añadiremos los estilos CSS3 para hacerlo más atractivo. Aquí utilizaremos algunas propiedades CSS3 como sombras, bordes redondeados, etc. Te darás cuenta de que utilizaremos varios prefijos para cada navegador. Esto es necesario porque algunas propiedades están en pruebas en algunos navegadores y necesitamos añadir los prefijos para poder adaptar los estilos a ellos.

ul.s-thumbs li {
	float: left;
	margin-bottom: 10px;
	margin-right: 11px;
}

ul.s-thumbs li:last-child {
	margin-left: 1px;
	margin-right: 0;
}

ul.s-thumbs a {
	display: block;
	position: relative;
	width: 55px;
	height: 55px;
	border: 4px solid transparent;

	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;

	font: bold 12px/25px Arial, sans-serif;
	color: #515151;
	text-decoration: none;
	text-shadow: 1px 1px 0px rgba(255,255,255,.25), inset 1px 1px 0px rgba(0,0,0,.15);
}

ul.s-thumbs img {
	-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
	-moz-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
	box-shadow: 1px 1px 5px rgba(0,0,0,.5);
}

ul.s-thumbs a:hover,
ul.s-slides {
	border: 4px solid #141517;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	-webkit-box-shadow: 0px 1px 0px rgba(255,255,255,.05);
	-moz-box-shadow: 0px 1px 0px rgba(255,255,255,.05);
	box-shadow: 0px 1px 0px rgba(255,255,255,.05);
}

Paso 4 – Descripción de las imágenes

En este paso vamos a añadir una caja con la descripción de la imagen que aparecerá cuando el puntero paso por encima de la misma. Crearemos esta descripción utilizando algunos estilos CSS3 y el selector :before para añadir la flecha a la caja

HTML

Para crear la caja añadiremos una etiqueta span con algo de texto a una etiqueta anchor.

<ul class="s-thumbs">
	<li><a href="#slide-1"><img src="img/thumb1.png" alt="" /><span>Image 1</span></a></li>
	<li><a href="#slide-2"><img src="img/thumb2.png" alt="" /><span>Image 2</span></a></li>
	<li><a href="#slide-3"><img src="img/thumb3.png" alt="" /><span>Image 3</span></a></li>
	<li><a href="#slide-4"><img src="img/thumb4.png" alt="" /><span>Image 4</span></a></li>
	<li><a href="#slide-5"><img src="img/thumb5.png" alt="" /><span>Image 5</span></a></li>
	<li><a href="#slide-6"><img src="img/thumb6.png" alt="" /><span>Image 6</span></a></li>
	<li><a href="#slide-7"><img src="img/thumb7.png" alt="" /><span>Image 7</span></a></li>
</ul>

CSS

Para crear la caja añadiremos una anchura fija para poder centrar la caja en la imagen y añadiremos algunas sombras y gradientes para mejorar su aspecto. Para crear la flecha utilizando únicamente CSS utilizaremos un truco con el borde.

ul.s-thumbs li a:hover span {
	position: absolute;
	z-index: 101;
	bottom: -30px;
	left: -22px;
	display: block;
	width: 100px;
	height: 25px;
	text-align: center;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,.4);
	-moz-box-shadow: 0px 1px 0px rgba(0,0,0,.4);
	box-shadow: 0px 1px 0px rgba(0,0,0,.4);

	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;

	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #bcbcbc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#bcbcbc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* IE10+ */
	background: linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* W3C */
}

ul.s-thumbs li a:hover span:before {
	width: 0;
	height: 0;
	border-bottom: 5px solid #ffffff;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	content: '';
	position: absolute;
	top: -5px;
	left: 44px;
}

ul.s-thumbs li:first-child a:hover span {
	left: -3px;
}

ul.s-thumbs li:first-child a:hover span:before {
	left: 25px;
}

ul.s-thumbs li:last-child a:hover span {
	left: auto;
	right: -3px;
}

ul.s-thumbs li:last-child a:hover span:before {
	left: auto;
	right: 26px;
}

Paso 5 – Las transiciones del visor

Ahora crearemos las transiciones del visor. Como crearemos diferentes transiciones para cada imagen, necesitamos añadir diferentes clases a cada una de las imágenes.

HTML

<ul class="s-slides">
	<li id="slide-1" class="slideLeft"><img src="img/slide1.png" alt="" /></li>
	<li id="slide-2" class="slideRight"><img src="img/slide2.png" alt="" /></li>
	<li id="slide-3" class="slideTop"><img src="img/slide3.png" alt="" /></li>
	<li id="slide-4" class="slideBottom"><img src="img/slide4.png" alt="" /></li>
	<li id="slide-5" class="zoomIn"><img src="img/slide5.png" alt="" /></li>
	<li id="slide-6" class="zoomOut"><img src="img/slide6.png" alt="" /></li>
	<li id="slide-7" class="rotate"><img src="img/slide7.png" alt="" /></li>
</ul>

CSS

Para crear las transiciones utilizaremos @keyframes. La animación se crea por un cambio gradual entre un juegos de estilos CSS a otro. Para indicar cuando ha de comenzar la animación, cambiaremos y terminaremos utilizando porcentajes, donde 0% es el comienzo de la animación y 100% es el final de la misma.

Deslizamiento desde la izquierda

/* Slide Left */

@-webkit-keyframes 'slideLeft' {
	0% { left: -500px; }
	100% { left: 0; }
}

ul.s-slides li.slideLeft:target {
	z-index: 100;

	-webkit-animation-name: slideLeft;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

Al principio de la animación la imagen se encontrará a -500 píxeles a la izquierda y cuando la animación se complete, la imagen se situará a 0 píxeles a la izquierda. Ajustando el tiempo de animación a 1 segundo, obtendremos un movimiento de izquierda a derecha.

Deslizamiento desde la derecha

/* Slide Right */

@-webkit-keyframes 'slideRight' {
	0% { left: 500px; }
	100% { left: 0; }
}

ul.s-slides li.slideRight:target {
	z-index: 100;

	-webkit-animation-name: slideRight;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

Deslizamiento desde arriba

/* Slide Top */

@-webkit-keyframes 'slideTop' {
	0% { top: -350px; }
	100% { top: 0; }
}

ul.s-slides li.slideTop:target {
	z-index: 100;

	-webkit-animation-name: slideTop;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

Deslizamiento desde abajo

/* Slide Bottom */

@-webkit-keyframes 'slideBottom' {
	0% { top: 350px; }
	100% { top: 0; }
}

ul.s-slides li.slideBottom:target {
	z-index: 100;

	-webkit-animation-name: slideBottom;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

Acercamiento a la imagen

Para llevar a cabo este efecto utilizaremos la propiedad de transformación de CSS3. Al principio, la imagen tendrá un tamaño del 10% y al terminar la animación tendrá su tamaño real. Colocaremos la imagen a 4 píxeles desde arriba para rellenar el espacio que aparece debajo.

/* Zoom In */

@-webkit-keyframes 'zoomIn' {
	0% { -webkit-transform: scale(0.1); }
	100% { -webkit-transform: none; }
}

ul.s-slides li.zoomIn:target {
	z-index: 100;
	top: 4px;

	-webkit-animation-name: zoomIn;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

Alejamiento de la imagen

/* Zoom Out */

@-webkit-keyframes 'zoomOut' {
	0% { -webkit-transform: scale(2); }
	100% { -webkit-transform: none; }
}

ul.s-slides li.zoomOut:target {
	z-index: 100;

	-webkit-animation-name: zoomOut;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

Rotar y cambiar el tamaño

/* Rotate */

@-webkit-keyframes 'rotate' {
	0% { -webkit-transform: rotate(-360deg) scale(0.1); }
	100% { -webkit-transform: none; }
}

ul.s-slides li.rotate:target {
	z-index: 100;
	top: 4px;

	-webkit-animation-name: rotate;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

Paso 6 - Imagen “Not Target”

Como estamos utilizando z-index para ajustar qué imagen aparece encima vemos un fallo cuando hacemos clic sobre una nueva imagen. Cuando haces clic en una miniatura, la imagen previa desaparece y muestra la última imagen durante la transición. Para solucionarlo, necesitamos añadir un estilo not-target con un z-index mayor durante la nueva transición.

/* Not Target */

@-webkit-keyframes 'notTarget' {
	0% { z-index: 75; }
	100% { z-index: 75; }
}

ul.s-slides li:not(:target) {
	-webkit-animation-name: notTarget;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

Paso 7 – La primera imagen visible

Cuando el visor se cargue, mostrará la última imagen. Para ser capaces de elegir la primera imagen del visor, crearemos una clase con un z-index mayor y solamente necesitarás añadir esta clase la imagen que quieras que sea visible cuando se cargue el visor.

/* First Slide */

ul.s-slides li.first {
	z-index: 60;
}

Paso 8 – Cagar el visor

En este paso añadiremos un efecto la carga porque cuando se cargue con la página esperará 1 segundo para cambiar a la primera imagen. No queremos que se vea esta falsa transición, por que o ocultaremos durante ese periodo de tiempo.

/* Slider Load */

@-webkit-keyframes 'load' {
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

.slider-wrapper {
	-webkit-animation-name: load;
	-webkit-animation-duration: 2s;
	-webkit-transition-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
}

Conclusión

¡Felicidades, has terminado el visor! Como hemos utilizado muchas características CSS3 que únicamente algunos navegadores pueden procesar, no es buena idea utilizarlo como visor en sitios de vital importancia. Eso sí, te servirá para practicar y comprender cómo se trabaja con CSS3 y descubrir su potencial.

Más información:
Este artículo es una traducción libre de How to Create a Stylish Image Content Slider in Pure CSS3 [Tutorial]  en DesignModo. Además, allí podrás ver un ejemplo y descargar el código fuente del mismo para poder estudiarlo detenidamente.

En Internet existen multitud de opciones que pretenden enseñar programación por medio de juegos, especialmente orientadas a niños, pero Code Racer se mueve en otra categoría. Y es que en este caso, estamos ante un juego en línea donde tendremos que enfrentarnos a otros usuarios en carreras de escribir código, como si se tratase de un frenético juego de carreras para adictos a la tecnología.

Una idea ingeniosa y que cumple perfectamente con su cometido de enseñar al tiempo que divierte, aunque quizás con la emoción del momento algunas cosas no se queden muy grabadas. El juego requiere tener cuenta en Facebook para acceder (quizá un hecho que eche para atrás a algunos usuarios), y permite adentrarnos en lenguajes orientados a la web como HTML, CSS y JavaScript.

Pinche aquí para ver el vídeo

La simpática iniciativa se la debemos a Treehouse, una joven empresa que ha desarrollado distintas soluciones para enseñar diseño y desarrollo web. La verdad es que con propuestas así o como Code Year, el que no aprende algo de código (al menos a un nivel muy básico) es porque no quiere. ¡Anímate, juega y aprende!

Enlace:
Code Racer – Battle it out and learn the code

Vía:
Genbeta – Con Code Racer aprender a programar es un juego, y muy adictivo 

Desde hace un tiempo, se ha convertido en una moda el aplicar filtros que hagan cambios en una imagen para que parezca más vieja de lo que en realidad es. Si bien es cierto que las modas vienen y van, no es menos cierto que algunos trabajos requieren el toque distintivo de una época pasada. Por ese motivo, el artículo 16 Vintage/Retro Photo Effect Tutorials de DesignModo es una buena referencia para aprender un buen puñado de técnicas que pueden ser realmente útiles. Lejos de ser una colección de filtros, estos consejos pueden ser usados en multitud de situaciones.

Aunque cada uno de los métodos está enteramente descrito en inglés, no son complicados de seguir, puesto que todos tienen capturas de pantalla lo suficientemente claras para no perdernos detallando cada uno de los pasos necesarios.

Vía:
DesignModo - 16 Vintage/Retro Photo Effect Tutorials

Las cambiantes tendencias de la red han convertido en indispensable el hecho de compartir información y tener presencia en diferentes redes sociales. Un diseñador puede invertir mucho tiempo creando los iconos necesarios de las diferentes redes sociales para integrarlos en un sitio web. Para facilitar esta tarea existen un buen puñado de paquetes con colecciones de iconos sociales. En este artículo te invitamos a visitar 60 Gorgeous Free Social Media Icons, donde podrás elegir los iconos que más te convengan para tu proyecto actual pudiendo elegir entre una gran variedad de estilos gráficos. De esta manera podrás ahorrarte mucho tiempo y de este modo centrarte en otros aspectos de tu diseño.

Enlace:
 designrfx.com - 60 Gorgeous Free Social Media Icons

Si trabajas en línea, y la mayoría de nosotros lo hacemos en algún momento, es probable que hayas tenido que transferir archivos de gran tamaño de vez en cuando. Normalmente, la manera más rápida de transferir este tipo de archivos, o compartir tu trabajo con alguien, es enviándolo por correo electrónico, lo que significa que hay que adjuntarlo, ¿verdad?

No tan rápido, amigo.

El problema, por supuesto, es que la mayoría de servicios de correo electrónico tienen un límite de adjuntos de 25 MB. Existen presentaciones que sobrepasan este tamaño sin ningún problema. Si te encuentras en una situación similar, echa un vistazo a las siguientes herramientas.  Si es una presentación, una película, o cualquier otra cosa, estas herramientas te ayudarán a compartirla o enviarla rápidamente.

1. DROPBOX

Sin ninguna duda, Dropox es mi favorita dentro de esta selección. La integro con mi trabajo diario de muchas maneras y funciona con un sistema dual de copia de seguridad para cualquier cosa que guardo. Pero, si estás pensando en transferir archivos de gran tamaño, Dropbox también puede jugar este papel.

Dropbox ofrece una cuenta gratuita de 2 GB y, presumiblemente, puedes enviar un archivo de 2 GB a tu cuenta y compartirlo rápidamente con alguien más.

Todo lo que necesitas es hacer clic en el botón “Compartir carpeta” dentro de tu cuenta Dropbox y entonces introducir tu dirección de correo electrónico  de la persona con la que quieres compartirlo. Fácil y sencillo.

Sitio web: Dropbox

2. SENDTHISFILE

SendThisFile es perfecto para transferir archivos grandes. No tiene límite en el tamaño de archivo y puedes fácilmente transferirlo a través de correo electrónico. Si optas por el plan de pago, entonces podrás cifrar tus archivos añadiendo seguridad, crear correos personalizados, y más.

Dos cosas que deberías saber: SendThisFile no examina los archivos en busca de virus y si estás utilizando la versión gratuita, la velocidad de descarga es limitada.

Sitio web: SendThisFile

3. SEND6

Send6 te permite enviar hasta seis archivos de 50 MB cada diez minutos sin necesidad de registrarse. Además, puedes controlar los archivos que has enviado y eleminarlos en cualquier momento.

En el lado negativo, la versión gratuita únicamente permite diez envíos por mes.

Sitio web: Send6

4. TRANSFERBIGFILES

Si necesitas transferir archivo grandes, entones tendría sentido echar un vistazo a TransferBigFiles.

Como el mismo nombre sugiere, el servicio te permite transferir archivos de gran tamaño rápida y fácilmente por correo electrónico. Cualquier archivo hasta 1 GB puede ser transferido, pudiéndose proteger con una contraseña. También puedes enviar varios archivos y a varios destinatarios al mismo tiempo. Adicionalmente, TransferBigFiles te avisará cuando tus archivos han sido descargados.

Sin embargo, todos los archivos estarán disponibles solamente durante 5 días. Después de ese periodo de tiempo, serán borrados.

Sitio web: TransferBigFiles

5. DROPSEND

La primera vez que oí sobre DropSend fue a través de un amigo que lo había estado utilizando de forma que podía enviar copias de seguridad de sus propios archivos. Pero funciona del mismo sencillo modo cuando estás enviando correos a tus clientes o compañeros de trabajo.

DropSend ofrece una interfaz simple de tres pasos (Adjuntar, A, De) para transferir archivos grandes. No hace falta instalar ningún programa y es posible enviar archivos de hasta 2 GB.

DropSend también ofrece un plan de negocios para compartir archivos en grupo.

Sitio web: DropSend

6. MAILBIGFILE

MailBigFile te permite enviar archivos de hasta 300 MB a único destinatario de correo electrónico. Si actualizas a la versión profesional, entonces podrás utilizar su funcionalidad “Libreta de direcciones” y enviar archivos aún mayores. Según su sitio web, MailBigFile ha sido utilizado por grandes marcas como Apple, Best Buy o IKEA.

Por contra, no puedes proteger los archivos con contraseña y son borrados de sus servidores pasados diez días.

Sitio web: MailBigFile

7. YOUSENDIT

YouSendIt es extremadamente fácil de usar y tiene una interfaz familiar que recuerda al correo electrónico. Puedes adjuntar y enviar archivos de hasta 100 MB en la versión gratuita, o hasta 2 GB en la versión de pago. Además, YouSendIt ofrece la posibilidad de tener control de las descargar, proteger los archivos con contraseña, e incluso personalizar con una imagen de marca.

En su contra está su límite de 1 GB para descargas en la versión gratuita y el hecho de que no puedes hacer una copia de cualquier correo que envías a través de este servicio.

Sitio web: YouSendIt

EXTRA PARA USUARIOS DE MAC: DROPLR

Mientras que no se centra realmente en enviar archivos de gran tamaño, Droplr es un modo increíblemente sencillo de compartir archivos con un solo enlace desde tu Mac.

Cualquier cosa que necesites compartir (un documento, una foto, una presentación, etc.) puede estar a disposición de cualquiera con un simple enlace. Ofrece integración con Twitter, así que se puede utilizar en redes sociales, además de para trabajo o para enviarlo por correo.

Sitio web: Droplr

¿QUÉ UTILIZO?

¿Y qué hay de ti? ¿Qué herramientas utilizas para transferir y compartir archivos?

NOTA:
Esta entrada es una traducción libre del artículo “Transfer Big Files: The Top 7 Tools You Should Use” disponible en Freelance Switch.

Todos los diseñadores web hemos intentado, en un momento u otro, crear un sitio flexible donde las imágenes se ajusten de forma automática según la resolución del dispositivo del usuario. Para solucionar este problema tenemos diferentes opciones, siendo una de las más versátiles la que nos ofrecen en Adaptative Images in HTML. Utilizando JavaScript, PHP y la biblioteca GD lib, las imágenes de nuestro sitio web serán ajustadas según la resolución de pantalla de nuestro visitante.

El método es muy sencillo de implementar pero tiene la pega de que requiere tener activado JavaScript por parte del usuario en su navegador. De no ser así, se nos ofrece una solución alternativa, que aunque no funciona correctamente en la primera visita, sí lo hace en las subsiguientes.

La única pega, es que el sitio web se encuentra completamente en inglés, aunque es realmente sencillo de entender.

Más información:
Adaptative Images in HTML 

A la hora de diseñar para móviles es necesario tener en cuenta una serie de aspectos y condiciones que quizá no contemplemos de un inicio. No sólo debemos ceñirnos al estudio de la interfaz para dispositivos diferentes a los que estamos acostumbrados sino a la manera de trabajar con éstos.

Jimena Catalina es una diseñadora de talento que  se ha marcado una estupenda presentación titulada Diseñar para móviles en la que nos brinda una serie de datos y consejos a la hora de afrontar este tipo de proyectos. Y es que no todo es Apple y aunque es un mercado jugoso, hay mucho más a lo que hincar el diente y que merece la pena estudiar.

Más información:
Jimena Catalina – Piensa en Pixels
Criterion – Diseñar para móviles 

Hace ya un tiempo que Google presentó la Font API, mediante la cual podíamos usar cualquiera de los tipos de letra que ofrecían en nuestro sitio web. Hasta el momento lleva acumuladas 198 fuentes diferentes, todas libres y gratuitas. Y si os gustan algunas o todas, descargárselas es lo más sencillo del mundo.

Se pueden descargas de varias manera, por ejemplo, por medio del Google font directory situado en Googlecode, donde tenemos disponibles todas las fuentes. Allí, se nos explica el procedimiento a seguir para bajarlas todas de golpe según el sistema operativo que estemos usando. Pero quizá sea más práctico tomarnos cierto tiempo y descargar únicamente aquellas que nos gusten para no cargarnos con archivos innecesarios.

Para ello, vamos a la página de Google Web Fonts y descendemos por ella para ver las fuentes. Cada vez que encontremos una que nos guste y que queramos descargar, hacemos clic en el botón “add to collection”. Todos los tipos de letra que seleccionemos irán apareciendo en la parte de abajo de la página.

Cuando hayamos seleccionado todas las que nos vamos a bajar, tan sólo tenemos que hacer clic en el enlace “Download your Collection” que aparece arriba a la derecha y, tras ignorar un aviso que nos recuerda que no es necesario descargar las fuentes para usarlas en una web, hacemos clic en el enlace respectivo y nos las descargamos dentro de un ZIP.

Si queremos revisar nuestra colección antes de descargarla, podemos hacer clic en el botón “Choose”, dentro del área que nos muestra que tipos de letra hemos añadido. Entonces, nos aparecerá una muestra detallada de todas las que hemos elegido de manera que podamos comprobar con claridad como se ven, aunque en la sección donde las elegimos también podemos apreciar bien su aspecto y con bastante detalle por medio de las opciones que se nos ofrecen.

Como se puede ver, un recurso más para obtener rápidamente fuentes que podamos usar con total libertad en cualquier documento o diseño que realicemos.

Vía:
Genbeta – Descárgate todos los tipos de letra que ofrece Google Web Fonts 

Los hay que no corren, vuelan. Porque ya hay disponible un completo juego de recursos que tienen muy buena pinta para facilitarnos la introducción al mundo de la publicación digital. Muchos diseñadores han metido un buen puñado de días para empaparse de Aquafadas y de DPS para poder afrontar perfectamente proyectos de este tipo. Porque está claro que está pegando fuerte.

Digital Publishing Guide ofrece contenidos gratuitos y de pago que os pueden merecer la pena si vais a usar el software de publicación digital de Adobe y os queréis ahorrar tiempo buscando tutoriales o información sobre “esto y lo otro”. Un gran recurso a manos de todo el mundo. ¡Ahí os va!

Más información:
Digital Publishing Guide (Inglés)
Criterion –  Plantillas para Adobe DPS, Digital Publishing Guide

Hay ocasiones durante las que tenemos la necesidad de realizar una explicación a alguien que no está físicamente junto a nosotros. Lo más habitual es hacer referencia a alguna guía (comúnmente llamadas tutoriales) que ya esté en la web o quizá explicarlo por correo electrónico. También podemos recurrir a otro método: crear un tutorial en Tildee.

Tildee es un servicio que permite crear guías y ayudas en la web de manera fácil y sencilla. Sin necesidad de registro, podemos crear una página que contenga una explicación de algún tipo dividida en cómodos pasos. Cada paso puede contener texto, una imagen o un vídeo. La imagen la podemos alojar en el propio servicio, pero en el caso del vídeo sólo es posible añadirlo indicando la URL del mismo.

Una vez que publiquemos la guía, ésta no será modificable a menos que nos hayamos registrado previamente. Además de poder editar, al registrarnos también obtendremos un perfil que, como está de moda hoy en día, puede ser seguido por otros usuarios (y viceversa, claro). También dispone de los botones necesarios para compartir las guías por las redes más utilizadas y cada página posee una URL que, sin ser del todo “reducida”, sí es bastante corta.

En resumen, se trata de un servicio muy sencillo de usar y que nos puede servir para explicar la realización de un proceso rápida y claramente. Además, el poder publicar sin necesitar registro lo hace ideal para un uso ocasional sin tener que recurrir a servicios más elaborados o complejos.

Vía:
Genbeta – Tildee: crea tutoriales sencillos online sin necesidad de registro