Jugando entre diseñadores

Reglas del chinchón ¡Juguemos a las cartas!

nnatali — Sat, 18 Apr 2020 18:05:00 +0000

Me encantan la cartas, de pequeña siempre intentaba que mis hermanos o mis padres jugasen conmigo a la casita robada. Ya que no había forma de que me dejasen participar en su truco o su julepe. Después llegó el cinquillo donde mi abuela era la campeona. Pero mi preferido, sin duda, el chinchón. A este sigo jugando a día de hoy, aunque cada vez que me cruzo con alguien nuevo y comentamos las reglas antes de empezar la partida, hay lío. Por eso, las he querido recopilar aquí y de paso aprovechar para preguntaros si son las mismas con las que jugáis vosotros.

Reglas del chinchón:

Se reparten 7 cartas por cada jugador, se deja una carta boca arriba en el centro de la mesa y el resto en un montón boca abajo.
El que está a la izquierda del que ha repartido, empieza.
Si le viene bien la carta que hay boca arriba la coge, si no, coge una del montón y tira una de su mano, siempre tiene que tener 7 cartas.
Cuando tengas una jugada ganadora, la carta que tiras la tienes que poner boca abajo, indicando que quieres cortar el juego.
Cuando alguien corta el juego todos deben sumar los puntos de las cartas que no tienen emparejadas, esos puntos se anotarán en una hoja hasta llegar al tope acordado.
Si alguien se pasa del tope, puede engancharse con otra persona, que significa que se une a la partida con los mismos puntos que esa persona.
Hay 3 jugadas ganadoras:
Si tienes 3 cartas en escalera (del mismo palo) o del mismo número (distinto palo) y 3 cartas del mismo número o en escalera, quiere decir que ya tienes 6 cartas emparejadas, la carta que te sobra (de las 7 que debes tener) tiene que ser menor de 3. Esa carta sobrante serán los puntos que deberás contarte.
Si tienes 4 cartas en escalera o del mismo número y 3 cartas en escalera o del mismo número, significa que tienes las 7 cartas emparejadas, por lo que en este caso tus puntos serán -10.
Si tienes las 7 cartas formando una escalera del mismo palo, la jugada se llama chinchón y es la ganadora. No es necesario contarse puntos porque ganas toda la partida.
Hay quien juega con las cartas de comodines, o quien usa el 1 de oro y el 1 de copa como comodines. Si se juega con ellos, cuando cortan una partida con chinchón, si están usando comodines en lugar de ganar, se contarían con -20 puntos.
El tope de puntos máximo para llegar, en mi caso, suele ser de 100. Si un jugador pasa ese tope, no puede jugar más. O se le da la opción de engancharse con el que tenga más puntos.
Para contar los puntos, cada carta vale el mismo número que su valor indica. Por ejemplo, si otro jugador corta la partida y tú tienes un rey sin emparejar, te sumarás 12 puntos.
Cuando un jugador corta una partida y no es ni con -10, ni con -20, ni chinchón, el resto de jugadores puede añadir sus cartas sin emparejar a las del jugador que corta, si son compatibles. Por ejemplo, el que corta tiene 3 cartas del mismo número, si tú tienes otra carta de ese número, puedes añadirla a su jugada por lo que no te sumarías esos puntos.
Gana el que quede con menos puntos, cuando todos se hayan pasado del tope indicado.
Si juegas con dinero, se suele poner una cantidad al arrancar la partida y después otra cantidad con cada reenganche. El que gana, se lo lleva todo.

¿Son las mismas reglas con las que jugáis vosotros?

En algún caso me he encontrado con gente que cuando alguien corta, puede meter sus cartas en las jugadas del resto de jugadores, no solo del que corta.

También con quienes cuentan 10 por el valor de sota, caballo y rey, sin diferenciarlos.

¿Y cuánto es lo máximo que habéis estado jugando? Porque a mi se me pasan las horas volando…

SVG: Creando imágenes a través de código

nnatali — Mon, 18 Apr 2016 20:41:15 +0000

No se a vosotros, pero a mí eso de poder crear imágenes vectoriales sin tener que utilizar un editor gráfico me parece lo más. Y si encima sabes que se verá bien a cualquier tamaño y en dispositivos retina, la alegría es mayor.

Pero primero un poco de información básica:
¿Qué significan las siglas SVG? Scalable Vector Graphics (gráficos vectoriales escalables)
¿Qué es SVG? Es un estandar de marcado basado en el lenguaje XML, con el que podemos dibujar imágenes vectoriales en dos dimensiones.
¿Qué navegadores soportan imágenes SVG? En la web Can I use..? puedes ver el soporte de los navegadores actualizado a día de hoy.

Dicho esto, vamos al lío.

Empezamos por algo sencillo, una imagen con 3 líneas, el típico icono hamburger para los menús:

Recordad incluir el atributo xmlns, para especificar que estáis escribiendo SVG y no XML a secas.

Cómo véis, hemos añadido 3 elementos «line», cada uno de ellos representa una línea y les hemos puesto varios atributos:
– x1 la coordenada de inicio de la línea sobre el eje horizontal.
– y1 la coordenada de inicio de la línea sobre el eje vertical.
– x2 la coordenada del final de la línea sobre el eje horizontal.
– y2 la coordenada del final de la línea sobre el eje vertical.
– stroke-width el ancho de la línea (en píxeles)
– stroke el color de la línea
– stroke-linecap la terminación de la línea, en este ejemplo, redondeada.

Una cosa que tenéis que tener en cuenta a la hora de modificar el grosor de las líneas, es la posición de ésta sobre el lienzo. Ya que, si colocamos una línea pegada a la parte superior, al especificarle un borde de 5 píxeles, la línea seguirá en la misma posición, pero la mitad de ésta (2.5px) quedará oculta en la parte superior del lienzo. Por eso en el ejemplo que hemos hecho, la primera línea comienza a 2.5 píxeles de distancia de la parte superior (atributos y1 e y2). Una imagen vale más que mil palabras:

Por otro parte, en el ejemplo hemos especificado el ancho (width) y el alto (height) de nuestro lienzo. Esto hace que la imagen tenga unas medidas fijas, pero podemos convertirlo en responsive rápidamente, y con ello conseguir que se adapte al tamaño del contenedor. Para hacerlo tenemos que quitar los atributos que contienen las medidas y añadir el viewBox. Quedando así:

Para ver nuestra pequeña obra de arte podemos incluir el código directamente en una página html o guardarlo en un archivo con extensión .svg, por ejemplo «hamburger.svg». Si optamos por la segunda opción, es conveniente añadir la siguiente linea al comienzo del archivo, especificando la versión de xml y el tipo de codificado que utilizaremos:

Ver icono hamburger en SVG

Y no os creáis que sólo de líneas viven los SVG, hay más elementos que podéis utilizar (circle, polygon, path, etc) y con los que podéis hacer imágenes mucho más complejas. Pero de esos mejor os hablo más adelante :)

Que Google no te penalice, optimiza tu web para móviles.

nnatali — Tue, 28 Apr 2015 20:18:33 +0000

La semana pasada, Google anunciaba que penalizará los sitios webs que no estén adaptados para dispositivos móviles, y hace un par de meses Paypal nos contaba que el comercio móvil crecerá un 48% en España en 2015.

¿Sigues dudando si deberías adaptar tu página web a dispositivos móviles?

Si no tienes claro si tu web cumple los requisitos de Google, hay una herramienta disponible llamada Prueba de optimización para móviles donde te indica claramente si es válida o no.

Si tu web no está optimizada descenderá de posición en las búsquedas de Google, pero no está todo perdido, una vez la adaptes volverás a tu lugar en el ranking.

Personalmente, he notado la repercusión de esta noticia en mi trabajo, ya que este mes han contactado conmigo nuevos clientes decididos a dar el salto al responsive y no solo optimizar su web para teléfonos móviles, si no también adaptarlas a todos los dispositivos.

Y estoy muy contenta por ello, gracias a esta penalización creo que podré comprar desde el móvil (mientras voy en el tren o si no me apetece encender el ordenador) sin tener que dejarme la vista en el intento. Y tú ¿Qué opinas al respecto?

¿Quieres optimizar tu web para móviles y no sabes cómo? Escríbeme.

Aprender alemán: recursos online

nnatali — Tue, 31 Mar 2015 09:28:04 +0000

Cuando intentas aprender un idioma toda ayuda es buena, y si encima lo que quieres aprender es alemán, aparte de buena es necesaria.

Yo intento guardar todos los recursos que encuentro que pueden servirme de ayuda para ampliar mi vocabulario o para entender mejor esta lengua. Y como creo que pueden servirte a tí también si lo que quieres es aprender alemán, aquí va mi lista:

Alemán sencillo es una web, en español, a la que puedes acudir para tener una primera toma de contacto con el alemán. Explicado de forma clara y con audios de ejemplo.

Leo.org es un diccionario online del que puedes fiarte. Tienes que dejar de buscar traducciones con el translate de google (que deja muchísimo que desear) y empezar a buscarlas aquí.

Con Wiktionary tienes a mano los verbos alemanes y sus conjugaciones ¿Necesitas conjugar el verbo essen?

Duolingo lo conozco por ser una aplicación para el móvil, pero buscando el enlace veo que también se puede hacer un curso por la web, así que podéis elegir si preferís verla en el móvil o en el ordenador. Te hacen preguntas en las que te dan a elegir entre varias opciones, hay audios que deberás transcribir, frases que deberás leer en voz alta, etc. Es una forma entretenida de poner a prueba lo que sabes.

Deutsch lernen mit Extra auf Deutsch es una playlist de youtube con los capítulos de una serie que trata las vivencias de dos compañeras de piso. Hablan de forma muy clara e incluye subtítulos, es una opción perfecta para ir acostumbrando tu oído al alemán.

Jojo sucht das Glück es otra serie online alemana. Está rodada en Köln y pensada para estudiantes de nivel B1 de alemán.

Si tienes facebook, en Alemán para todos comparten material en alemán (ilustraciones, tablas de verbos, etc) y entre todos suelen resolver dudas del idioma. Y si estás en twitter, puedes seguir a @dw_learngerman y a @Alemanista.

¿Qué tal va tu aprendizaje? ¿Conocías alguno de los recursos? ¿Me recomiendas otro? :)

P.D. La ilustración que encabeza este artículo es de James Chapman, echa un vistazo a su blog, tiene muchas ilustraciones geniales.

París: de viaje a la capital del amor

nnatali — Tue, 24 Mar 2015 11:23:23 +0000

Hace un mes fui de viaje a París con mi chico, es el típico viaje que haces cuando estás en pareja, un viaje a la ciudad del amor. Quizás por eso no había ido antes, pensaba que era demasiado cursi. Al fin y al cabo es con lo primero con lo que asocias París, con el amor. Y después de haber estado allí tengo que reconocer que sí, que pasear por la ciudad de la mano de la persona a la que quieres es muuuuy romántico. Pero ¿En qué ciudad no lo es? Después de todo, lo que importa es la compañía.

Dicho esto, te voy a contar algunas cosas de nuestro viaje, y espero que te sirvan de ayuda a la hora de organizar el tuyo :)

¿Cómo llegar a París?

Nosotros fuimos en avión, cogimos un vuelo en Frankfurt que duraba alrededor de 1 hora y nos costó una media de 100€ por persona. Yo suelo buscar los vuelos en skyscanner, es un comparador, quizás encuentres alguna oferta mejor desde tu ciudad.

Si llegas al aeropuerto Charles de Gaulle (CDG) coger el tren hasta el centro te costará unos 10€, con el mismo ticket puedes coger también el metro para llegar a la estación que quieras. También hay un autobús, cuesta más o menos igual, pero personalmente creo que se viaja más cómodo en el tren. Ah y el trayecto dura unos 40 minutos.

Hay una app que te puedes instalar en el móvil y funciona offline, que tiene las trayectorias del metro. Se llama Metro by París y a mí me salvó un par de veces de perderme.

¿Donde alojarte en París?

Con airbnb encontramos un piso para pasar 4 noches que nos costó 434€. Era la primera vez que alquilábamos a través de airbnb y nos gustó mucho la experiencia. Ya que quedarte en la casa de alguien que vive en París en lugar de en un hotel, hace que te sientas un poco más parisino. Por cierto ¿Todas las casas en París son tan pequeñas? La de la gente de clase media quiero decir, imagino que también hay quienes tengan mansiones…

¿Donde comer en París?

Me habían hablado de un sitio al que teníamos que ir a cenar, Pain Vin Fromages, pero no reservamos mesa y cuando quisimos ir estaba completo. Al ver el local tenía muy buena pinta, así que cuando vuelva a París espero poder cenar allí.

Y si coincides con el Mercado de la Bastilla, aprovecha a comprar algo de comida. Por cierto, me pareció muy curioso ver que vendían pescado fresco, en los puestos callejeros.

¿Qué ver en París?

Aquí podría expandirme, hay tantas cosas que ver en París, pero no quiero aburrirte con datos sobre horarios, ubicación o precio de todos los sitios. Así que mejor te resumo un poco lo que vimos: Torre Eiffel, Museo del Louvre, Arco del triunfo, Basílica del Sagrado Corazón, Notre Dame, Moulin Rouge,…

También tienes que callejear por el Barrio Latino, por allí encontrarás una librería inglesa con mucho encanto llamada Shakespeare & company.

Si quieres comprar algún recuerdo de la Torre Eiffel, lo más barato es comprárselo a los vendedores ambulantes que la merodean. Venden 5 llaveros de la torre por 1€, y yo que creía que serían caros! Y desde la parada de metro Trocadero tienes unas vistas geniales de la torre, te encontrarás con mucha gente haciendo fotos desde allí.

Tampoco puedes dejar pasar un paseo en barco por el Sena, nosotros reservamos éste por la web, ya que salía más barato que comprar la entrada directamente en el puerto. Nos costó 10€ por persona y duró alrededor de 1 hora.

Y si os gustan los coches, en la Avenida de los Campos Elíseos hay varias tiendas (Peugeot, Mercedes, etc) donde exponen modelos nuevos de sus coches, coches de F1 o de rallies. También en la misma avenida hay una tienda Disney de dos plantas en la que puedes perder mucho tiempo viendo juguetes y peluches que querrás llevarte a casa.

Y con esto doy por concluido mi pequeño resumen sobre nuestro viaje, espero que te sirva de ayuda para programar el tuyo. Y cuando vayas a París (o si ya lo has hecho), me cuentes que tal la experiencia :)

Ah! Se me olvidaba decirte que puedes cotillear mis fotos del viaje en Flickr.

Humanstxt, la web por y para humanos

nnatali — Wed, 06 Apr 2011 10:30:50 +0000

Hace un par de meses se encendió una pequeña bombilla sobre la cabeza de @cssbarcelona, la idea de colocar en cada web un pequeño archivo donde se indique quiénes son las personas que han realizado esa web.

Hoy en día encontramos en la mayoría de las webs un archivo llamado robots.txt donde le decimos a los robots de los buscadores cuales páginas queremos indexar, cuales no, y demás parámetros de configuración.

Pero si cada web está hecha por y para humanos ¿Por qué no incluir un pequeño archivo, nada intrusivo, nada pesado, dedicado a nosotros?

Y así nació humanstxt, una iniciativa un estándar en el que han trabajado varias personas y al que cada día se unen más humanos atraídos por las ventajas que supone frente al poco esfuerzo que conlleva.

En su web oficial, podemos descubrir a los miembros del h-team, a quienes recomiendo sigáis sus pasos pues son grandes profesionales y mejores personas.

Colocar un humans.txt en una web no significa que seamos los propietarios de ella, si no que hemos puesto nuestro granito de arena (diseñadores, programadores, SEOs, redactores, etc) para que saliera adelante.

Para informaros un poco mejor sobre cómo y por qué utilizarlo, podéis visitar la web oficial donde está todo genial explicado y además tienen diseño nuevo que merece la pena ver.

Por mi parte, ya tengo mi humans.txt creado :)

jQuery: fixedTo plugin para posicionar elementos

nnatali — Mon, 07 Mar 2011 09:20:23 +0000

Hace un par de semanas necesité maquetar un elemento de forma que permaneciese siempre fijo en la parte inferior de la página, no me llevó mucho, ya que se resolvía con:

elemento{
   position:fixed;
   bottom:0;
}

Pero una vez lo tenía listo lo ví tan simple, que necesitaba darle un poco de vida.
Me puse manos a la obra, y después de unas horas surgió el plugin fixedTo.

El funcionamiento no se limita al css escrito antes:
– Puedes indicar la posición de la ventana en la que quieres colocar el elemento, si es en un lateral, se gira automáticamente.
– Siempre permanece centrado a los laterales y recalcula su posición al redimensionar la ventana, para no perder el centro.
– Incluye la opción de hacer que el elemento se muestre / oculte o que permanezca siempre visible.

Aunque antes de explicar más, lo mejor es que veáis un ejemplo online.

Recordaros que el plugin trabaja sobre jQuery, por lo que necesitamos tener la librería enlazada para que funcione:

Es el primer plugin como tal que publico, y aunque aún tengo que mejorar el código, he querido compartirlo por si hay alguien a quién le pueda servir, sobra decir que me encantaría recibir consejos de quienes hayan realizado ya alguno :)

Fuentes en web ¿Con cual te quedas?

nnatali — Mon, 28 Feb 2011 09:20:35 +0000

No es la primera vez que escribo un post sobre el uso de diferentes fuentes en páginas web, pero recientemente he hablado sobre esto con varias personas y me veía en la necesidad de volver a escribir sobre ello y organizar mejor mis pensamientos. Así que allá voy:

Como norma general, la fuente que indiquemos en nuestra web, tiene que ser una fuente que tenga instalada en su ordenador la persona que acceda a ella. Por eso, estamos limitados a una lista de fuentes muy corta.

Pero por suerte para los diseñadores todos, hoy en día podemos ampliar esta lista de dos formas:

1 – Con el uso de JS combinado con Flash o HTML5.

Con la ayuda de algunas llamadas a javascript podemos conseguir localizar el texto al que queramos aplicar una fuente distinta a las habituales y reemplazar éstos por elementos flash o canvas.

Un ejemplo sería la plataforma Cufón.

Para trabajar con este plugin debes disponer de una fuente en formato .ttf, .otf o .pfb y de su licencia de uso. Desde la propia aplicación web seleccionas la fuente de tu ordenador y se generará automáticamente un archivo de javascript para incluir en tu web.

Cufón trabaja solamente con selectores generales (h1,p,etc), pero nos da la opción de utilizar selectores más específicos (h1.destacado,p:first-child,etc) si incluimos alguno de los frameworks con los que es compatible: jQuery, MooTools, Dojo, etc.

Y aunque es un método fácil y rápido para incluir cualquier fuente en nuestra web y que se vea correctamente en todos los navegadores (IE6 incluido), le encuentro unas cuantas desventajas:
– La propiedad «line-height» funciona sólo si utilizamos un DOCTYPE strict.
– Con mucho texto a transformar, ralentiza la web.
– No permite seleccionar y copiar el texto.

2 – Con la propiedad @font-face de CSS3

Cuando apareció la versión 2.0 de CSS, vino con la propiedad @font-face debajo del brazo aunque poco pudimos disfrutarla ya que los navegadores no se ponían de acuerdo con los estándares a utilizar y en la versión 2.1 dieron marcha atrás y la retiraron hasta el actual CSS3.

Lo que nos permite esta propiedad es poder instalar cualquier fuente en nuestra web, digo instalar porque previamente tendremos que tener el archivo de la tipografía en nuestro servidor y a través de @font-face indicamos la ruta y el nombre con el que la llamaremos. Un ejemplo de uso, sería:

@font-face {
    font-family:'Nombre de la fuente';
    src:url('/ruta/fuente.ttf'), /* safari, firefox */
 	    url('/ruta/fuente.svg') format('svf'), /* iphone, ipad */
    	url('/ruta/fuente.eot') format('eot'), /* internet explorer */
    	url('/ruta/fuente.woff') format('woff'); /* ultimas versiones navegadores */
    	font-weight:normal;
    	font-style:normal;
}
h1 { font:normal 1.2em/1.4em 'Nombre de la fuente',sans-serif; }

Si queremos que sea compatible con varios navegadores, debemos incluir varios formatos para la misma fuente. Os dejo una lista de navegadores y los formatos de fuente que soportan (visto en webfonts.info):

Safari: .ttf, .otf
iPhone/iPad: .svg (hasta iOS 4.1), .ttf (desde iOS 4.2)
Opera: .ttf, .otf, .svg
Internet Explorer: .eot, .woff (desde IE9)
Firefox: .ttf, .otf, .woff (desde 3.6)
Chrome: .ttf, .otf, .woff (desde 6)

El Web Open Font Format (.woff) está en proceso de normalización como recomendación de la W3C y se espera que llegue a ser el único formato de letra reconocido por todos los navegadores.

Hay varias empresas que nos ofrecen la posibilidad de utilizar este método a través de una galería de fuentes instaladas en sus servidores, algunos ejemplos son:

– Google webfonts
– Typekit
– Fontsquirrel

Como conclusión final me quedo con @font-face. Aunque nos lleve algo más de tiempo implementarlo, si se puede hacer con css no veo la necesidad de incluir javascript y abordar el frontend con elementos innecesarios.

Y vosotros ¿Con cual os quedáis?

Actualizo: cssbarcelona me pasa el enlace a una encuesta que hizo en twitter sobre este tema: http://twtpoll.com/r/zxwmti , @font-face se queda en cabeza : )

CSS3: Transformaciones en 2D

nnatali — Tue, 22 Feb 2011 10:15:42 +0000

Mientras esperamos a la llegada definitiva de la versión 3 de CSS, no puedo evitar ir trasteando las nuevas propiedades, y esta vez le he echado el ojo a «transform» y «transform-origin».

Con transform podemos modificar elementos de varias formas:

1. Transladar el elemento a otra posición:

elemento{transform:translate(a,b);}

2. Escalar el elemento:

elemento{transform:scale(a);}

3. Rotar el elemento:

elemento{transform:rotate(a);}

4. Sesgar el elemento:

elemento{transform:skew(a,b);}

5. Deformar el elemento:

elemento{transform:matrix(a,b,c,d);}

Por defecto, la mayoría de los navegadores asignan como punto de origen de las transformaciones el centro del elemento (50% 50%), pero podemos modificar este punto con la propiedad transform-origin:

Poniendo, por ejemplo, el punto de origen en la esquina superior izquierda:

elemento{transform-origin:0 0;}

Como aún no es compatible esta propiedad de CSS3 con los navegadores actuales, existen unas cuantas alternativas para que functione en todos los navegadores (IE6 incluido), pero hay que tener en cuenta que si las utilizamos ahora mismo nuestro código no validará.

En firefox: -moz-transform / -moz-transform-origin
En Safari / Chrome: -webkit-transform / -webkit-transform-origin
En Opera: -o-transform / -o-transform-origin

Para hacerlo compatible con Internet Explorer, nos complican un poco más, por defecto nos pone de punto de origen la esquina superior izquierda y no nos deja modificarla y solo podemos transformarlo con el filtro Matrix, que nos deja deformarlo de cualquier forma, pero es algo más complicado, aunque he encontrado un generador online que nos puede servir de ayuda.

Los modelos de filtros serían:

– En Internet Explorer 8:

-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11,M12,M21,M22)";

– En Internet Exporer 6 y 7:

filter:progid:DXImageTransform.Microsoft.Matrix(M11,M12,M21,M22);

Si preferís verlo en directo, he creado una página con ejemplos de transformación 2D, espero que lo veáis más claro :)

Meme: Yo confieso que soy fan de…

nnatali — Tue, 13 Jul 2010 18:44:26 +0000

Juanjo me envía este meme (podéis leer el suyo aquí), para que confiese 3 marcas de las que soy fan.. así que allá voy..

1º- Fan de Apple. No lo puedo evitar, se me antoja todo lo que sacan.. aunque me gustaban más los modelos blanquitos.. los iMacs G4 que bonitos eran.. ais!

2º- Fan de Taschen. Esta editorial es genial, libros buenos, bonitos y baratos, sobra decir más.

Y por último.. pero no menos importante.. «redoble Tino«..

3.- Supermegafan de Starbucks. Adoro sus cafés hipergrandes, calentitos, con nata por encima y un toque de chocolate en polvo.. sólamente he ido 6 veces (las tengo contadas) pero el día que viva en una ciudad en la que haya un Starbucks, creo que me voy a arruinar XD

Y una vez confesadas mis debilidades en cuanto a marcas, paso el relevo a:

– @mianmaro
– @dbeltra
– @martinpulido (meme)

¿Alguien más se atreve a contarnos 3 marcas de las que sea fan? :D

Actualizo: Acabo de ver en el blog de Santi que el meme inicial fué este, así que puesto queda.