La ‘curiosidad’ del viernes – Tipografías audibles, imágenes libres y frameworks

Una semana más empezamos el fin de la jornada laboral con un poco de inspiración:

TYPATONE

Últimamente estamos muy musicales, ya os enseñé qué divertido podía ser jugar con unas formas y unos cuantos sonidos en YUME en la entrada del viernes anterior.

Y ahora con TypaTone puedes convertir las letras en sonidos. Es muy creativo y siempre salen sonidos armónicos, por mucho que te empeñes en hacer cosas extrañas con las letras. Os animo a que lo probéis.

TYPASOUND

CODEPLY

¿Alguna vez has sentido deseos de poder acceder a diferentes Frameworks para elegir el mejor código para tu página sin tener que ir uno a uno? Pues bien, esto es exactamente lo que puedes conseguir con Codeply. Accedes a diferentes Frameworks a través de la página, y coges la parte que más te convenga: menús, acordeones, botones…

Lo bueno, es que el editor te deja copiar HTML, CSS, JS y es muy visual. Así que es bastante intuitivo.

codeply

En un principio tus búsquedas pueden ser algo erráticas. Pero, dadle una oportunidad, es una herramienta con potencial.

LIBRE STOCK

Como ya he visto que nadie se ha animado a tener unos cuantos “freebies” de ‘Halloween’ (cuanta animosidad contra esta fiesta) he tenido que cambiar el recurso gratuito que os quería aportar por este otro: ‘Libre Stock’.

Libre Stock‘ es una herramienta para buscar imágenes de stock gratuitas por la web. Te devuelve resultados en diferentes páginas de recursos de fotografía. Ahorraréis algo de tiempo. Me parece completa, aunque no vais a encontrar todas las que queráis. Algunas búsquedas tendrán que ser un poco más exhaustivas.

freestock

 

TIPOGRAFÍA Y MÁS TIPOGRAFÍA

Este viernes os estoy dejando recursos a mansalva ¿no?.

Si la tipografía es lo tuyo, te sonará la página Type Detail. Si no recuerdas haberla oído nombrar, tampoco te preocupes, ahora sí la conoces. Si utilizas su apartado de Recursos, tendrás acceso a cientos de recursos online, blogs y foros, que discuten, respiran y viven sólo para la tipografía. Qué ¿te das un vuelta?

type

PORTADAS ANIMADAS

Y por último y con esto os dejo ya, una curiosidad desde Vimeo. Portadas de libros clásicos, ilustradas y animadas. Muy trabajadas y muy ‘resultonas’ ¿cuál os gusta más?

vimeo

La ‘curiosidad’ del viernes – Infografías del pasado y otras novedades

El viernes nos ha dejado un puente muy codiciado a nuestros pies. Pero no podemos irnos a disfrutar de nuestro festivo sin un breve repaso a algunos recursos que hemos encontrado navegando por Internet.

INFOGRAFÍAS

Hoy es un gran día para la nostalgia. ¿Cómo eran las infografías antes de los ordenadores? Esta es la pregunta que ha decidido contestar ‘The wired’. Después de leer el artículo, nuestra conclusión: eran un poco más difíciles de llevar a cabo y dignas de admiración.

infografias

RECURSOS DESDE FACEBOOK

El equipo de diseñadores de Facebook ha decidido compartir con nosotros algunas páginas de recursos muy útiles: mock-ups, herramientas de diseño y prototipado y alguna sorpresa más. Os dejo el enlace para que le echéis un ojo. Pueden ser muy útiles. Si eres usuario de Mac, con más motivo. recursos-fb

CODEPEN

Y cómo no podía faltar en este pequeño espacio a la curiosidad del viernes, un gracioso efecto desde Codepen. Un cable que se enrolla, así de sencillo, sin más. Y qué espectacular.

codepen

Hasta el próximo viernes.

La ‘curiosidad’ del viernes – Aprende jugando y otros recursos animales

Cuándo te toca investigar durante muchas horas un tema que requiere código y más código, acabas exhausto. Si encuentras la respuesta fácilmente, te sientes poderoso. Pero si no das con ella tan rápidamente puedes: desesperarte, aburrirte, frustrarte o hundirte en la miseria.

Así que es de agradecer, cuándo se está comenzando a aprender alguna destreza nueva, que haya oportunidad de hacerlo de manera entretenida.

Y eso os presento hoy, aprender código con 5 juegos. Es cierto, queridos diseñadores, que son juego orientados a desarrolladores, si bien hay algunos que utilizan J-Query, así que… ahí lo dejo si queréis dedicarle un rato:

5 JUEGOS PARA APRENDER CÓDIGO.

code-combat

 

ANIMALES CON PURO CSS

Y para que no penséis, maquetadores del mundo, que me he olvidado de vosotros, os dejo un enlace a unas bonitas animaciones de animales solo con CSS. ¿No son motivadoras?

css-animales

 

 

365 PSD

Y como hoy es viernes, y en viernes siempre se agradecen los “Freebies” he aquí un recurso estupendo que me han pasado de archivos PSD.

Algunos gratuitos… otros no tanto. Pero buen recurso.

PSD

 

 

Nos vemos el próximo viernes.

La ‘curiosidad’ del viernes – Código limpio, herramientas y pixels

Todos lo sabemos, hay cosas que a la hora de maquetar NO tenemos que hacer… y las hacemos, las hacemos.
Hacks, trucos que sacamos de debajo de la manga, márgenes negativos, propiedades dudosas, “!important”.
Así que ahora tenemos a nuestra disposición una herramienta curiosa.

DIRTY MARKUP

“Dirty Markup” es una ayuda para ver esos pequeños errores que se te han podido pasar: reglas vacías o repetidas, error en el orden de las propiedades con “vendor-prefixes” y cosas por el estilo. Lo único que tienes que hacer es pegar tu código (HTML, CSS o Js) y te hará algunas sugerencias de cómo mejorarlo.

Algunas recomendaciones las podríamos obviar: si, todos sabemos que no hay que incluir “!important” pero… que me digan cómo se sobreescriben los estilos inline de un CMS sin usarlos.

Aún así, es útil.

dirty

Otra cosa más para un viernes cómo hoy ¿estás al día con las herramientas más utilizadas para diseñar?

THE TOOLS DESIGNERS ARE USING TODAY

¿Crees que sí? Bueno, pues cotillea un poco este test. Si no usas las que han sido más votadas, no pasa nada. Pero, si ni siquiera te suenan… es un buen momento para empezar a investigar.

tools

 

 

Y por último, algo curioso… aunque esta vez no os lo traigo de Codepen (hoy he sido infiel).

GLITCH TOP

¿Nunca has sentido deseos de llenar de pixels tu pantalla? Ahora si los vas a tener, aunque solo sea para darle al play y ver cómo funcionan las selecciones de color que has hecho.

glitchtop

 

 

Y con esto me despido hasta la próxima semana.

 

La ‘curiosidad’ del viernes – Parallax y otras historias

Septiembre nos ha traído el recuerdo de que se acaba el verano, la jornada intensiva (para los afortunados que la hayan disfrutado)… pero para evitar que la tristeza nos sobrecoja, aquí un poco de inspiración “viernera”.

PARALLAX – STORY TELLING

Primero, en “Line25” han creado esta recopilación de 15 webs que usando Parallax te cuentan una historia.
Estas página llevan años circulando por la web, pero nunca está de más refrescarnos la memoria. Si sólo tenéis tiempo para ver alguna, os recomiendo encarecidamente “The hybrid graphic novel”. La propuesta gráfica es… en una palabra, brutal. Y otra que es muy diferente :”How far is it to Mars“, también es muy divertida.

pantallas-parallax

CARTAS 

Cambiando el tercio y volviendo a HTML5 y CSS3 ¿jugamos una partida de cartas?
El código de esta baraja de cartas está en Github.
Si, ya sé que sacar cartas una de tras de otra, puede parecer poco emocionante pero ¿qué queréis que os diga? Es muy entretenido. También se puede barajar automáticamente, distribuir las cartas…

baraja-cartas

CÍRCULOS CSS

Y por último, pero no por ello menos importante, Codepen. Ya sabéis, un clásico:
Círculos hipnóticos, ¡sólo con CSS! 

circulos-hipnoticos

¿Algún ruego, petición, pregunta? ¿No?… ¿Seguro? Bueno, pues hasta el próximo viernes.

La ‘curiosidad’ del viernes – Juegos web con CSS

Me doy por vencida, ya lo digo claramente: Codepen es la clara inspiración de la curiosidad del viernes.
He intentado resistirme, pero es imposible. Hay demasiado talento ahí suelto.

Hoy de videojuegos (web) va la cosa.

Ha llegado a mis ojos esta curiosidad: un niño jugando a una videoconsola ¡con algo de programación y css! En 3D. Que despropósito tan fantástico.

videojuego-codepen

Podéis dejar que la cámara se active, si queréis estar presente en la televisión dónde juega el niño. O si no le dais acceso, veréis otro juego en el que está inmerso nuestro protagonista.

Y por si esto fuera poco juego, desde Sitepoint nos enseñan a crear un Videojuego Web en 1 hora. ¿Algún voluntario/a en la sala?

game

 

Si alguien se anima, dejadnos ver vuestros juegos.

Si creamos por aquí alguno, lo compartiremos también. Prometido.

 

 

La ‘curiosidad’ del viernes

Buenas a todos de nuevo,

Ya hemos estado mucho tiempo de vacaciones y era hora de volver con algunas curiosidades.
La más seria de las que he encontrado esta semana (y que quiero compartiros) es cómo hacer formas 3D con CSS, usando un editor que se llama Tridiv.

foto-3ddiv

Hay unos ejemplos muy trabajados y aunque aún no lo he puesto en práctica, parece sencillo. (Si al usarlo es dificilísimo, negaré haber escrito la frase anterior).

Y como estamos a viernes, un día desenfadado, os dejo un par de enlaces:
1.- Cómo dar estilo a la página de error 404 con ilustraciones muy graciosas.
404

2.- Los nuevos emojis propuestos para 2016, alguno es muy auténtico: véase ‘Mamá Noela’ (que es claramente la abuelita de Caperucita).

emojis

Hasta el próximo viernes.

La ‘curiosidad’ del viernes

Cómo os prometí la semana pasada, os traigo hoy algo un poco más veraniego.
Y esta vez no es una novedad de Codepen (y eso que he visto unos sliders responsive muy prácticos… venga, ahí os he dejado el link, no me he podido resistir).

Pero, volviendo al tema que nos ocupa este viernes: ¡qué puede ser más veraniego que un “pajarico”!

Los gráficos SVG cada día cobran más fuerza y permiten hacer cosas cada vez más ocurrentes.
La curiosidad de hoy es cómo alinear una imagen SVG utilizando un sistema de coordenadas.
El artículo lleva su estudio, pero me parece algo muy útil para hacer pruebas.

svg-coordenadas

Os lo dejo por si queréis hacer pruebas y ya nos vemos en Agosto.

La ‘curiosidad’ del viernes

Ya me he declarado muy fan de Codepen.
Y esta semana también os comparto un trabajo de quitarse el sombrero ‘Fun with Primes’

primes

Es un listado de números primos, que se va actualizando. Ya está, así de simple. Pero… tan bien hecho…

El próximo viernes traeré algo más veraniego, cómo no podría ser de otra manera en el mes de Julio.

La ‘curiosidad’ del viernes

Aquí os traigo una tontería muy curiosa y en definitiva, muy grande que no podía dejar de compartir. Y menos en un viernes tan festivo.

Crea tu propia ‘Medusa‘… con sus serpientes y su peinado ‘fashion’. En Codepen hay auténticas joyas, como ésta.

medusa

Le podéis echar un ojo al código, no tiene desperdicio.

Ahora solo falta que convierta las cosas en piedra, un Pegaso con su Perseo y ya tendríamos la historia completa.