Planetaki Planet Blogs preferidos de Usable y accesible

Llega Seedcamp a Iberoamerica

2010-02-09T15:39:25+00:00

Algo que era de esperar de un proyecto tan ambicioso como Seedcamp, que ha estado expandiéndose por varios países en Europa e Israel. Con un fondo de inversión que levantaron en el 2007. Saul Klein y Reshma Sohoni son las personas al frente de este movimiento que desea plantar cara frente al efecto Silicon Valley.

Han hecho varios eventos llamados Mini-Seedcamps, que son competencias de 1 solo día para 20 equipos con ideas de formar una StartUp. La fecha para aplicar para el evento que se celebra en Barcelona el 23 de Marzo en la Universidad del IESE. Revisa la forma de inscripción al Mini-Seedcamp Barcelona.

Una gran oportunidad para emprendedores hispanos

Es una gran oportunidad para los emprendedores de España y América Latina, aquellos que sean seleccionados y puedan hacer el viaje hasta Barcelona serán recompensados al recibir consejos de emprendedores con éxito. De momento el listado de mentores se esta manteniendo en secreto, pero ya os pasaremos la lista cuando se confirme su asistencia.

Pero lo más importante del evento es que están mostrando mucho interés por expandirse fuera del ámbito Europeo, ya hablaremos con Reshma para informarles directamente de su estrategia de expansión. Ya que están colaborando con la organización iWeekend para traer el evento a España, que es uno de los grupos involucrados (Tetuan Valley, Okuri Ventures y SeedRocket) en gestionar un buen lanzamiento de esta propuesta para incentivar el emprendimiento.

Estaremos en el evento reportando sobre las StartUps creadas, los emprendedores que las promueven y los mentores que han ayudado a madurar sus propuestas, también compartiendo sus experiencias con ustedes para que puedan tener consejos prácticos a la hora de crear vuestras StartUps. No duden en apuntarse, ¿que los detiene?

Claudio Cossio para Maestros del Web.
Agrega tu comentario | Enlace permanente al artículo

Síguenos en: @maestros | Fan page

Applying Mathematics To Web Design

2010-02-09T14:08:11+00:00

“Mathematics is beautiful.” This may sound absurd to people who wince at numbers and equations. But some of the most beautiful things in nature and our universe exhibit mathematical properties, from the smallest seashell to the biggest whirlpool galaxies. In fact, one of the greatest ancient philosophers, Aristotle, said: “The mathematical sciences particularly exhibit order, symmetry and limitation; and these are the greatest forms of the beautiful.”

Because of its beautiful nature, mathematics has been a part of art and architectural design for ages. But it has not been exploited much for website design. This is probably because many of us regard mathematics as being antithetical to creativity. On the contrary, mathematics can be a tool to produce creative designs. That said, you don’t have to rely on math for every design. The point is that you should regard it as your friend, not a foe. For illustrative purposes, we created a couple of web designs that present mathematical principles discussed in this article. We are also giving away a couple of PSDs that you can use right away in your next design.

Layouts featured in this post were created specifically for the purpose of this article. During the design process we made sure that all of the designs shown in this article are essentially mathematical in nature; that is, they exhibit order, symmetry and limitation. We also have followed the Web design algorithm in this process — the designs have distinct themes, styles and elements. To keep things simple and clear, we tried to stick to minimalist designs and also preferred single-page layouts. Obviously, examples in this article are supposed to serve as a simple foundation for your designs and not as the finished designs.

[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter.]

Golden Ratio and Golden Rectangle

The golden ratio, also known as the divine proportion, is an irrational mathematical constant with a value of approximately 1.618033987. If the ratio of the sum of the quantities to the larger quantity is equal to the ratio of the larger quantity to the smaller one, then the quantities are said to have a golden ratio.

We already published a very detailed article “Applying Divine Proportion To Web Design” that explains how to use the golden ratio in Web design. In today’s article, we’ll look at how to use golden rectangles in Web design. A golden rectangle is one whose side lengths have the golden ratio 1:(one-to-phi); that is, 1:1.618.

The construction of a golden rectangle is very easy and straightforward. First, construct a simple square. Then draw a line from the midpoint of one side of the square to an opposite corner and use that line as the radius to draw an arc that defines the height of the rectangle. Finally, complete the golden rectangle and you are done.

A method to construct a golden rectangle. The square is outlined in red. The resulting dimensions are in the ratio 1:Phi, the golden ratio.

As an example, consider the minimalist design below. It has six golden rectangles in it, three rectangles per line. The rectangles have the dimensions of 299 x 185 pixels. Thus, the sides of these rectangles adhere approximately to the golden ratio; that is, 299/185 = 1.616. Notice how the large amount of white space surrounding Golden rectangles creates a calm and simple atmosphere in which the navigation options can breathe and serve their purpose. Although the layout uses only few colors and all blocks are positioned very similarly, the navigation options are obvious.

Large view

However, it may be quite difficult to add a new Golden block while keeping the consistency of the design. Probably the only reasonable design solution here would be to add the block on the third line and use the rest of the horizontal space for other, more or less prominent features (if necessary). You can click on the image below to see the enlarged version.

Large view

Possible Applications

The golden rectangle design is well suited for photo galleries, portfolios and product-oriented websites. The golden rectangles can also be arranged in other mathematically sound ways to generate beautiful designs. In particular, you may want to use them for blocks that display images or ads in your sidebar. Of course, the pure collection of golden rectangles doesn’t make for a professional, nice-looking design. You also need to work closely with grids, alignment, proximity and emphasis to achieve the main goals of your design. For instance, an interesting design solution would be a CSS/jQuery-based fluid grid design based on golden rectangles, however we do not cover this technique in this article.

Download the PSD-layout

We prepared a sample PSD layout that is designed according to the Golden Ratio and Golden Rectangle. Please feel free to use it in any way and please send the link to this article to your colleagues if you want to spread the word.

Fibonacci Design

As the name says, Fibonacci designs are designs based on the Fibonacci sequence of numbers. By definition, the first two Fibonacci numbers are 0 and 1, and each remaining number is the sum of the previous two. Some sources omit the initial 0, instead beginning the sequence with two 1s. So the first two Fibonacci numbers are given, and each remaining number is the sum of the previous two. The higher the Fibonacci sequence gets, the closer its numbers relate to each other according to the Golden Ratio. A Fibonacci sequence goes like this:

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...

In music, Fibonacci numbers are sometimes used to determine tunings, and in visual art to determine the length or size of content and formal elements. Jürgen Schmidhuber his methodology for Fibonacci-based designs on his blog. However, if you examine the design he created, you are likely to find it rigid and a bit difficult to read and navigate. Indeed, you need to get a bit creative with math rather than following the rules blindly — maths gives us a guide that we can apply, however it’s rather about implementing sites with maths than implementing maths with our designs.

Approximate and true golden spirals. The green spiral is made from quarter-circles tangent to the interior of each square, while the red spiral is a Golden Spiral, a special type of logarithmic spiral. Overlapping portions appear yellow. The length of the side of one square divided by that of the next smaller square is the Golden ratio. Source

The main idea behind such designs is to use Fibonacci when deciding on the dimensions for content area or sidebar. Both Golden ratio and Fibonacci let designers rely on sound, common ratios for page containers or blocks within page containers.

In general, layouts are quite easy to build using the Fibonacci sequence. You pick a certain base width first — for instance, 90px. Then, when determining the size of your containers, you multiply the base width with the numbers from the Fibonacci series. Depending on the calculations you get, you need to use them either for your page blocks. Let’s take a look at an example. Below is a minimalist typography blog based on Fibonacci Web design.

Large view

You can see that the page is divided into three columns. Each column corresponds to a Fibonacci number. For this design, we used a base width of 90 pixels. This base width is then multiplied by a Fibonacci number to get the total width for a particular column. For example, the first column has a width of 180 pixels (90 x 2); the second column has a width of 270 pixels (90 x 3); and the third column has a width of 720 pixels (90 x 8). The font size also corresponds to a Fibonacci number. The blog heading has a size of 55px; the article’s heading is 34px; and the content is 21px.

The downside of layouts based on the Fibonacci sequence is that it’s difficult to use it if you are given certain fixed width layout dimensions (e.g. 1000px). In this situation it’s easier to use the Golden ratio, as you would simply multiply 1000px with 0.618 and get 618px which would be the ideal width for your content block. However, if you try to achieve the same result with the Fibonacci sequence itself, you first need to figure out the sequence to the 1000 range.

According to the Fibonacci sequence calculator, the sequence would be ...,610, 987, 1597.... Indeed, 987 is a good fit and you can start picking the widths for smaller blocks using the previous numbers in the sequence. But if your fixed width layout is smaller or lager, you would need to use some approximate values which would again result in pure guessing. The problem may also occur in liquid or elastic designs to some extent, but you have much more design freedom there.

Possible Applications

A Fibonacci design is best suited to blogs and magazine layouts. You can arrange the layout in different ways according to Fibonacci numbers. The article “Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web” (in French) explains in more depth the application of Fibonacci numbers to Web design. Again, notice that you need to be creative when using Fibonacci sequence in your designs, otherwise your designs will turn out to be too rigid and hence difficult to use and navigate.

Download the PSD-layout

We prepared a sample PSD layout that is designed according to the Fibonacci sequence. Please feel free to use it in any way and please send the link to this article to your colleagues if you want to spread the word.

Five Elements, Or Kundli Design

Another interesting layout technique comes from the Indian horoscopes which are also called Kundli. Basically, a Kundli is a very simple figure can be made in just three steps. Draw a square, and then cross the two diagonals. Join the mid-points on each side of the square to get the Kundli figure. You’ll notice four right-angle rhomboids in the figure. These are the basis for our Web design.

The design below, then, is based on the Kundli geometric layout. You’ll notice that the chakras in the design also have mathematical properties.

Large view

This is a single-page layout. Clicking on an element reveals more information about it, as shown in the figure below. You could also include some simple jQuery animations or jQuery tooltips that would reveal more information on demand. A further step would be a sliding web page where animation is used to display different content blocks; you may also want to change the background images of the single content areas to make them a bit more distinctive.

In the following figure, you can see that our design is just a simple three-column layout: a header, three columns and a footer. Not complex at all.

Possible Applications

This design is best for displaying product information and portfolios. You can spice it up with JavaScript animation frameworks. For example, you can apply color transformations to the chakras by using Raphael library, or you can add freestyle animations using jsAnim library. You can have a tree sprout when the user clicks on the Earth element, or you can show sea creatures swimming in the water element. The sky is the limit when it comes to animation using these JavaScript libraries.

Download the PSD-layout

We prepared a sample PSD layout that is designed according to the Kundli design. Please feel free to use it in any way and please send the link to this article to your colleagues if you want to spread the word.

Sine Wave Design

When it comes to mathmatics, you do not need to stick to well-known Golden Ratio or Fibonacci sequence. You can also experiment with formulas from physics, chemistry and other sciences by using more general formulas and values in your designs.

For instance, let’s consider the sine wave, or sinusoid, a mathematical function that describes a smooth repetitive oscillation. We used a simple sine wave pattern as the basis for a simple and original Web design and create a single-page layout. Of course, you can use the same approach for other designs such as graphics or infographics.

Large view

The layout is again very simple, consisting of a header, five columns and a footer. You can use a jQuery tooltip to make the design more interactive.

Possible Applications

This wave pattern occurs often in nature, including ocean waves, sound waves, and light waves. Also, a rough sinusoidal pattern can be seen in plotting average daily temperatures for each day of the year, although the graph may resemble an inverted cosine wave. You can also use it to display a timeline of events. It could even be developed to include horizontal navigation. You can make it more interactive with the jQuery highlighter plug-in, which highlights each element (i.e. DIV) so that the user can focus on the content.

Download the PSD-layout

We prepared a sample PSD layout that is designed according to the Sine Wave design. Please feel free to use it in any way and please send the link to this article to your colleagues if you want to spread the word.

Other Techniques

Rule of Thirds
This rule states that an image should be imagined to be divided into nine equal parts by two equally spaced horizontal lines and two equally spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections. It can also be expressed as a simplified mathematical approach that divides any layout into thirds, left to right and top to bottom.

Musical Logic
The rhythmic or thematic structure of musical compositions can be applied to distances between elements in a layout, like ABA, ABAC, etc. Learn more about music and mathematics in this Wikipedia article.

Useful Links and Resources

Wikipedia articles

Articles

Books

We hope you’ve enjoyed this article on mathematics and Web design. Hopefully you now see mathematics not as a hindrance to creativity, but as a friend. Embrace it!

(al)

Chatroulette

2010-02-09T14:34:49+00:00

Chatroulette, es lo último de lo último en Internet, un videochat aleatorio, increible:

Entras al sitio.
Pulsas el botón start, de repente aparece un individuo en la pantalla.
Pulsas stop y se va.
Pulsas de nuevo start y otro.

Y así hasta infinitos, y claro puedes ver cada cosa que te puedes quedar de piedra, hay que probarlo para experimentar Chatroulette. Cuidado, dicen por ahí que engancha.

En el New York Magazine han publicado un extenso articulo sobre este curioso videochat aleatorio.

Vía: La Brújula Verde

Mouse para el pie

2010-02-09T14:34:49+00:00

Información de la mano de Antonio Sacco, esta vez nos muestra un mouse para el pie que se construye a partir de la adaptación de un simple mouse óptico.

El vídeo y la documentación se distribuyen libremente bajo licencia Creative Commons.

Vía: Capacitech

Presentaciones de PowerPoint a vídeo

2010-02-09T14:34:49+00:00

Se trata de una herramienta gratuita para Windows, Acoolsoft PPT to Video Free, una manera rápida y sencilla de pasar a vídeo una presentación PowerPoint, entre sus características en la versión gratuita destacar:

No muestra marcas de agua.
No tiene limitaciones en tiempo, tamaño o uso.
Mantiene la versión con gran fidelidad, mantiene los efectos y animaciones intactos.

Vía: Genbeta

Bruselas publica un catálogo para proteger la privacidad del usuario de redes sociales a través del móvil

2010-02-09T14:34:49+00:00

La Agencia Europea de Seguridad de las Redes y de la Información (ENISA), acaba de publicar un catálogo con una serie de consejos para proteger la privacidad del usuario de redes sociales a través de teléfonos móviles, un catálogo que incluye algunas recomendaciones como usar pseudónimo o no mezclar los contactos personales con los profesionales.

Acceder a las redes sociales a través de dispositivos móviles implica una serie de riesgos que van desde la usurpación de identidad hasta la fuga de datos corporativos, pasando por daños en la imagen, según el informe de la agencia comunitaria.

Varias recomendaciones apelan a la responsabilidad del usuario pidiéndole que no publique "información delicada" o que reconsidere "cuidadosamente" las imágenes o vídeos que hace públicos en su perfil.

Vía: El País

Políticos y libertades en Internet

2010-02-09T12:37:53+00:00

Vale, las generalizaciones suelen ser injustas, pero visto lo visto, esta Carta de adhesiones políticas a la libertad en Internet se aproxima mucho a la realidad. Demasiado de hecho para lo que sería de desear.

(Vía El Incordio).

# Enlace Permanente

Un reloj 100.000 veces más preciso que uno atómico

2010-02-09T12:37:53+00:00

El ultra preciso reloj Quantum-Logic podría convertirse en la referencia en lo que a medir el tiempo se refiere: mantiene la hora con un segundo de precisión cada 3.700 millones de años.

Esto es 100.000 veces más precisión de la que ofrecen los actuales relojes atómicos convencionales –unos 30.000 años, aunque los hay más precisos– que son en los que se basan los estándares internacionales.

Mientras que los relojes atómicos establecen la definición de un segundo como un número de vibraciones u oscilaciones en la radiación de un átomo de cesio, el reloj Quantum-Logic mide el paso del tiempo a partir de la frecuencia de vibración de un ion de aluminio –un átomo de aluminio cargado eléctricamente– que es de 1,1 PHz (petahercio) o lo que es lo mismo, mil billones (1.000.000.000.000.000) de veces por segundo y que es observada con un láser de luz ultravioleta que vibra a su compás.

Como curiosidad, los investigadores en realidad no saben cuántas veces por segundo hace tictac su reloj “debido a que la actual definición de qué es un segundo no sirve para medir la precisión de una máquina es que es aún más precisa.”

# Enlace Permanente

Diseño del Nexus One de Google

2010-02-09T14:48:27+00:00

Mucho se ha hablado en cualquier web, blog o foro de tecnología sobre el teléfono móvil Nexus One que Google junto con HTC han creado.

Sin duda, a simple vista y a la espera de que este a la venta en España para poder observarlo con más detenimiento, parece un buen trabajo de diseño, pero gracias a este vídeo podremos observar un poco mejor su proceso de creación.

Vía: Max Glaser

Comparte y disfruta Ateneu Popular

Recursos gratuitos para San Valentín

2010-02-09T11:04:13+00:00

Se acerca San Valentín y con ello el momento de los corazoncitos por todos lados, eso y los anuncios de colonia, y como en Ateneu Popular no somos ajenos a estas fechas queremos dejaros unos cuantos recursos gráficos para vuestras creaciones San Valentineras (la colonia la ponéis vosotros).

[ Descargar corazón de flores vectorial ]

[ Descargar fondo de corazones vectorial ]

[ Descargar corazones con ornamentación vectoriales ]

[ Descargar corazones 2.0 en formato jpg ]

[ Descargar texturas de corazones ]

Comparte y disfruta Ateneu Popular

The hero. ¿Quieres ser el héroe de la película?

2010-02-09T08:24:35+00:00

Gracias a guuui descubro el viral interactivo que creó la agencia Draftfcb para la cadena de TV sueca Radiotjänst en 2009: The hero.

En pocos minutos puedes convertirte en el protagonista de la historia, en el héroe de todos los ciudadanos. Tan sólo tienes que aportar un poco de tu atractivo y lo demás irá llegando. Accede al sitio web The hero y disfruta de la película.

Magnífico trabajo producido por Callboy y postproducido por STOPP. De esta última merece la pena visitar su web repleta de vídeos de gran calidad, en su mayoría spots publicitarios suecos.

Bookbook, la funda ideal para el maquero lector

2010-02-09T08:42:29+00:00

Alerta consumista mac! Ha llegado la funda definitiva para los que quieran intentar camuflar su portátil de la mejor manera posible. Si te preguntan dí que estás en pleno desarrollo de una tesis sobre el uso terapeútico del boniato y que te estás documentando de su uso en siglos pasados. Igual se lo tragan. Todo sea por no decirles que la funda te ha costado 80 dólares más gastos de envío. (Aunque debo decir que me ha parecido bastante chula :S)

:: Bookbook [en] :: (Vía NextNature [en])

Entradas que quizá también te puedan interesar

Fernando Rodríguez

2010-02-09T08:42:29+00:00

Me escribe Fernando Rodríguez para decirme que anda buscando trabajo y que está complicada la cosa. De paso me pide si le puedo dar algún consejo. Después de echarle un vistazo a sus trabajos…me parece que quien tiene que pedir consejo voy a ser yo. Pasad, y veréis trabajitos de esos en los que las letritas son las prácticas protagonistas de la función.

:: Fernando Rodríguez ::

Entradas que quizá también te puedan interesar

Los anuncios de la SuperBowl 2010

2010-02-09T08:07:55+00:00

Es el espectáculo de televisión mas visto en el mundo, y de hecho el de este año, ha sido el programa mas visto de la historia. Sus anuncios son los mas caros, los que mas venden y como por aquí de vez en cuando hablamos de publicidad os dejo con unos cuantos que he podido rescatar.

Motorla Blu
http://www.youtube.com/watch?v=qffDaLmDinw

Vizio
http://www.youtube.com/watch?v=cHxmRSYDazE

Intel “Generations”
http://www.youtube.com/watch?v=RSqMTWrlF-8

Intel “Lunch Room”
http://www.youtube.com/watch?v=bbifmRBBN6Q

Google “Parisian Love”
http://www.youtube.com/watch?v=nnsSUqgkDwU

Entradas Relacionadas

Nos vemos en el Drupal Camp de Barcelona 26-28 de febrero

2010-02-09T14:06:32+00:00

César y Justina sponsorizan este evento Drupal por varios motivos. Creemos que es el mejor CMS que puedes encontrar. Creemos que es bueno que se extienda en el mercado, sobre todo en la administración pública donde el open source puede ahorrar cientos de miles de euros en licencias. Y creemos que es bueno dar algo a cambio. No solo sponsorizamos, sino que, si quieres explicaremos como hacemos nuestros proyectos.

Nos vemos y deberías venir

Si trabajas en el desarrollo web, deberías venir y conocer Drupal. Drupal es probablemente el mejor CMS que puedas encontrar para la creación de cualquier tipo de página. Drupal especialmente brilla cuando hay usuarios en la ecuación, cosa que actualmente es más común. No hace falta que sean comunidades, pueden ser usuarios registrados para una newsletter, para un acceso a un área privada, etc...

Nuestra aportación a la conferencia. Diseño gráfico

Creemos que desde César y Justina la aportación que podemos hacer es la del diseño gráfico. Creemos que uno de los puntos importantes a la hora de vender Drupal a un cliente es mostrarle que la web final quedará tan bonita como cualquier otra.

Drupal por su parte ofrece Hojas de Estilo muy fáciles de editar y una estructura de datos muy lógica lo cual hace muy sencillo poder modificar y adaptar el diseño de Drupal al que necesitamos para nuestros proyecto.

En esta conferencia contaremos nuestros casos prácticos.

Open Source

Sobre Drupal ya hemos comentado sus ventajas y recomendamos a cualquier empresa de desarrollo que por lo menos le de un vistazo. Como todo CMS la curva de aprendizaje es algo lenta al principio, pero una vez dominado, los proyectos vuelan.

Por otro lado, que sea Open Source es una maravilla. Realmente puedes manipular cada aspecto del gestor hasta que hace lo que tu necesitas. No hay límites. Y sobre el diseño, creemos que como cualquier otro gestor, ofrece la capacidad de adaptación suficiente para que cada proyecto sea el proyecto que realmente quieres.

Nos vemos. César.

2010-02-09

LESS: variables y operaciones en CSS

2010-02-09T05:42:13+00:00

LESS es una extensión de CSS escrita en Ruby que permite utilizar variables, operaciones, reglas anidadas y mezclas con paso de parámetros que se comportan como funciones.

De todas sus posibilidades, las dos que me resultan más interesantes y que voy a comentar son el uso de variables y las operaciones.

Instalación de LESS

En Mac OS X, que ya tiene instalado ruby y ruby-gems, es tan sencillo como escribir esta línea en la consola:


$ sudo gem install less

En Windows y Linux hay que instalar primero ruby y ruby-gems.

Una vez instalado podemos utilizar LESS escribiendo nuestro CSS en un archivo .less tal y como lo haríamos con un archivo .css, con la diferencia de que es necesario compilarlo.

Compilación de LESS

Para compilar un archivo .less escribimos lo siguiente en la consola:


lessc style.less style.css

Si no se especifica el archivo de destino, se creará uno con el mismo nombre pero con la extensión .css. Es decir, la siguiente línea generaría un archivo style.css


lessc style.less

Compilación automática

Afortunadamente, no es necesario compilar el archivo manualmente cada vez que hacemos cambios, ya que es posible detectar los cambios en el archivo .less y compilar automáticamente. Para hacer esto utilizamos la instrucción –watch sobre el archivo que queremos compilar:


lessc style.less --watch

Uso de variables y operaciones

Sobre las ventajas del uso de variables en CSS sobran las explicaciones. A todos nos gustaría poder definir unas variables para colores de enlaces, texto, encabezados, fondos, etc. y poder usarlas cuando sea necesario sin tener que rebuscarlas en la CSS. También a la hora de hacer un cambio global resulta mucho más cómodo cambiar solamente el valor de una variable que todas las coincidencias. (Sí, conozco el buscar y reemplazar).

Para mí, el uso de variables no es su punto más fuerte, ya que se pueden usar varibles en CSS mediante PHP u otro lenguaje o incluso creando atajos de teclado personalizados en tu editor de texto, de manera que cada vez que tecleas, por ejemplo, colorLink seguido de tabulador, se escribe un color hexadecimal definido previamente. Esta última opción se puede usar con Coda (Mac).

Lo que más me ha gustado de LESS es la posibilidad de realizar operaciones, algo que ahorra bastante trabajo cuando se utilizan diseños elásticos.

Operaciones CSS en diseños elásticos

En los diseños elásticos, una unidad es relativa al elemento al que se refiere. Por ejemplo, si tenemos un encabezado de 20px de tamaño de fuente, con un margen inferior de 7px, esos 7px deben calcularse respecto a los 20 del encabezado, de manera que tenemos que hacer una división (7 / 20).


h2{font-size: 2em; margin-bottom: .35em;}

Con LESS podemos escribir esta división en la CSS.


h2{font-size: 2em; margin-bottom: 7 / 20em;}

Se añade el em al 20 para conservar la unidad de medida. De otra forma el resultado sería 0.35 en vez de 0.35em;

Además de ahorrarnos la operación, ya sea mediante calculadora o cabeza (siempre supone un esfuerzo), podemos ver inmediatamente qué unidad en píxeles estamos manejando en cada momento, es decir, nos ahorramos la multiplicación correspondiente o la ojeada al Firebug.

Inconvenientes de LESS

Agrupación de selectores

Si escribimos algo como h2 a, h3 a, h4 a{font-weight: normal;} el resultado al compilar es
h2 a{font-weight: normal;}
h3 a{font-weight: normal;}
h4 a{font-weight: normal;}

Saltos de línea

Al compilar, cada declaración se escribe en una línea dando lugar a archivos más pesados.

Transformación de colores en formato hexadecimal a palabras clave.

#fff se convierte en white.

Estos inconvenientes se pueden solucionar con la ayuda de alguna herramienta de compresión como Clean CSS, que permite agrupar selectores, eliminar saltos de línea, utilizar las formas cortas de códigos de color, etc.

Otra herramienta útil es MinifyMe, una aplicación en Adobe AIR que se limita a eliminar comentarios y dejar todo el código en una sola línea. También sirve para comprimir Javascript.

Más información sobre uso e instalación en la documentación oficial de LESS

LESS: variables y operaciones en CSS

2010-02-09T04:14:18+00:00

LESS es una extensión de CSS escrita en Ruby que permite utilizar variables, operaciones, reglas anidadas y mezclas con paso de parámetros que se comportan como funciones.

De todas sus posibilidades, las dos que me resultan más interesantes y que voy a comentar son el uso de variables y las operaciones.

Instalación de LESS

En Mac OS X, que ya tiene instalado ruby y ruby-gems, es tan sencillo como escribir esta línea en la consola:


$ sudo gem install less

En Windows y Linux hay que instalar primero ruby y ruby-gems.

Una vez instalado podemos utilizar LESS escribiendo nuestro CSS en un archivo .less tal y como lo haríamos con un archivo .css, con la diferencia de que es necesario compilarlo.

Compilación de LESS

Para compilar un archivo .less escribimos lo siguiente en la consola:


lessc style.less style.css

Si no se especifica el archivo de destino, se creará uno con el mismo nombre pero con la extensión .css. Es decir, la siguiente línea generaría un archivo style.css


lessc style.less

Compilación automática


lessc style.less --watch

Uso de variables y operaciones

Lo que más me ha gustado de LESS es la posibilidad de realizar operaciones, algo que ahorra bastante trabajo cuando se utilizan diseños elásticos.

Operaciones CSS en diseños elásticos


h2{font-size: 2em; margin-bottom: .35em;}

Con LESS podemos escribir esta división en la CSS.


h2{font-size: 2em; margin-bottom: 7 / 20em;}

Se añade el em al 20 para conservar la unidad de medida. De otra forma el resultado sería 0.35 en vez de 0.35em;

Inconvenientes de LESS

Agrupación de selectores

Si escribimos algo como h2 a, h3 a, h4 a{font-weight: normal;} el resultado al compilar es
h2 a{font-weight: normal;}
h3 a{font-weight: normal;}
h4 a{font-weight: normal;}

Saltos de línea

Al compilar, cada declaración se escribe en una línea dando lugar a archivos más pesados.

Transformación de colores en formato hexadecimal a palabras clave.

#fff se convierte en white.

Otra herramienta útil es MinifyMe, una aplicación en Adobe AIR que se limita a eliminar comentarios y dejar todo el código en una sola línea. También sirve para comprimir Javascript.

Más información sobre uso e instalación en la documentación oficial de LESS

Por la cara

2010-02-09T09:58:27+00:00

Hay ocasiones en la vida en las que hay que pasar página.

Vía: Inspire me, now!

Comparte y disfruta Ateneu Popular

Cuentas redondas

2010-02-09T01:13:53+00:00

¿De los 320 millones recaudados por la SGAE se queda con 180 por que no sabe a que autores corresponde? No me lo puedo creer.

– Marcos Cuevas

# Enlace Permanente

Compartiendo un plugin para WordPress con muchos autores

2010-02-09T00:28:35+00:00

Al ser un sitio en el cual participan muchos autores, nos pasa que quienes nos siguen desde su lector de feeds no se percatan de quién es el autor de cada artículo. Para reforzar esto, hace algunas semanas agregamos en el feed del sitio, un crédito adicional al final de cada post.

Otra ventaja de agregar esto al feed, es que quienes publican nuestros contenidos tomados del feed (scrapping) en otros sitios, este crédito también saldrá en sus sitios enlazando al nuestro de vuelta y dejando en claro de donde viene el contenido.

Esto es un sencillo plugin para Wordpress, similar al Ozh Better Feed y sin tantas opciones como este, pero sin hacer una consulta adicional extra a la base de datos; me gustan más los plugins que agreguen la menor carga posible

Algo adicional que agregué a este plugin fue la opción de mostrar el avatar del autor, si ya están usando el plugin de Author Image usará los avatars de este, sino se usará Gravatar o en ultimo caso se mostrará la imagen predeterminada que ustedes definan.

function rss_extracredit($content) {
	if(!is_feed()) return $content;

	$avatar = str_replace( ' />' , ' style="float:left;padding:0 5px" />', get_author_avatar() );

	$author = get_the_author();
	$permalink = get_permalink();

	$content .= "<hr /><p>$avatar <strong>$author</strong> para <a href=\"" . get_bloginfo('url'). '">'.get_bloginfo('name'). '.<br />'
	."<a href=\"$permalink#respond\">Agrega tu comentario</a> | <a href=\"$permalink\">Enlace permanente</a> al artículo</p>";

	return $content;
}

add_filter('the_content', 'rss_extracredit');

El plugin solo agrega este crédito al feed, pero si comentan la parte de:

if(!is_feed()) return $content;

También lo agregará al sitio.

Les dejo el plugin (con licencia GPL 2) para que lo descarguen o bien pueden ver el código fuente en github. Si lo instalan, solo falta definir una imagen predeterminar para cuando no se encuentra un avatar. Debería funcionar sin problemas, sino dejen un comentario por acá

Javier Aroche para Maestros del Web.
Agrega tu comentario | Enlace permanente al artículo

Síguenos en: @maestros | Fan page

Búsqueda orientada a la tarea

2010-02-09T12:05:57+00:00

Así me gustaría que fuera Google:

No me refiero a la disposición visual de estas opciones, sino a la posibilidad de diferenciar entre las tres tareas.

Search: La búsqueda clásica, a ser posible sin excesiva personalización de resultados.
Refind: Reencontrar algún recurso ya conocido, tomando como base mis favoritos, los blogs a los que estoy suscrito…
Discover: Justo lo contrario que las anteriores opciones. Al introducir una consulta debería ofrecerme resultados novedosos, desconocidos y potencialmente interesantes. Para esto podría tomar como base los favoritos o enlaces de mis contactos (twitter, delicious, reader, etc.) y darle un mayor peso en la estimación de la relevancia a la actualidad del recurso.

Y a ti, ¿cómo te gustaría que fuera?

Balakrishna Gajelli. Super Creative

2010-02-08T18:51:14+00:00

( Click para ampliar y ver el resto )

Gracias a Alejandro Torchio nos enteramos de este maravilloso trabajo realizado por Balakrishna Gajelli a base de tipografía para realizar unas ilustraciones de una calidad sorprendente.

Comparte y disfruta Ateneu Popular

El rotor de voiceOver para iPhone

2010-02-08T19:15:55+00:00

El teléfono Apple iPhone 3G s lleva incluido un lector de pantallas para usuarios ciegos. Es el conocido voiceOver.
Este lector de pantalla permite el acceso a la información que aparece en el teléfono a través de gestos. El problema aparece a la hora de inventar tantos gestos como funciones tenga el lector de pantalla. A semejanza con los lectores de pantalla de sistemas operativos de escritorio, como Jaws o NVDA, donde tenemos más de 60 combinaciones de teclas asociadas al lector de pantallas. Esto hace que la curva de aprendizaje del usuario ciego sea lenta.
La gente de Apple ha solucionado el problema de la curva de aprendizaje simplificando el manejo de su lector de pantallas. En otros artículos de este blog hemos visto cómo explorar la pantalla y los elementos que aparecen en ella. Pero aún no sabemos cómo leer palabra a palabra, letra a letra, seleccionar texto o saltar entre los encabezados o controles de formulario de una página web.
En un lector de pantallas que utilizase el teclado tendríamos 2 combinaciones de teclas por cada una de esas funciones. Con voiceOver para iPhone con 3 gestos podemos hacer todas esas funciones y más. Todo esto se consigue gracias al rotor de voiceOver.

El rotor

El rotor consiste en un gesto giratorio que nos permite seleccionar un elemento entre un grupo de elementos de una lista dispuestos de forma circular a semejanza del movimiento que hacemos en el dial de una radio o la rueda de control de un iPod classic o iPod nano para seleccionar una frecuencia o un nivel de volumen determinado.
Para conseguir este gesto debemos colocar dos dedos sobre la pantalla y, mientras uno de los dedos lo dejamos quieto el otro debe arrastrarse por la pantalla haciendo un círculo rodeando al dedo que se encuentra quieto.
El gesto del rotor nos permite seleccionar un tipo de elemento que utilizaremos para avanzar o retroceder. Por ejemplo, en el escritorio del iPhone, si hacemos el gesto del rotor podremos seleccionar uno de los siguientes elementos: palabra, caracter. Una vez seleccionado uno de los elementos podremos leer palabra a palabra o caracter a caracter. Para conseguir esto simplemente tenemos que hacer un flick (caricia corta) hacia arriba para leer la palabra o el caracter anterior, dependiendo de lo que hayamos elegido en el rotor; o caracter atrás o caracter adelante con el gesto de flick arriba o flick abajo.

Seleccionar, copiar y pegar

Con el rotor, cuando estamos editando un texto, junto a las opciones de palabra y caracter nos sale una nueva opción llamada editar. Esta opción nos permite realizar operaciones de selección y copia. Para ello, mientras estamos editando un texto, utilizaremos el gesto del rotor para elegir la opción de editar. Cuando hagamos el gesto de flick arriba o flick abajo oiremos varias opciones:seleccionar, seleccionar todo. Si elegimos la opción "seleccionar todo y hacemos un doble tab(pulsar dos veces la pantalla con un dedo) seleccionaremos todo el texto. Si volvemos a hacer el gesto de flick arriba o flick abajo, junto con las opciones de seleccionar y seleccionar todo habrá aparecido dos opciones nuevas (copiar y cortar) seleccionando una de ellas y haciendo doble tab copiaremos o cortaremos el texto. Con información en el portapapeles, al hacer el gesto de flick arriba o flick abajo, junto con las opciones de selecionar, seleccionar todo, cortar y copiar; aparecerá la opción de pegar.

El rotor y la navegación web

Safary mobile es el navegador web que viene con el iPhone. Los lectores de pantalla suelen permitir navegar entre encabezados de una página web, controles de formulario, enlaces, párrafos, etc. VoiceOver para iPhone también lo permite, para poder seleccionar qué elemento utilizaremos como criterio de salto deberemos utilizar el gesto del rotor. Dentro de una página web en Safary al hacer el gesto del rotor, entre muchas otras opciones, podremos elegir entre: palabra, caracter, enlaces, controles de forma, encabezados, etc. Una vez elegido uno de los elementos del rotor, al hacer flick arriba, buscará el elemento hacia atrás desde donde nos encontremos, si hacemos el gesto de flick abajo, lo buscará hacia adelante.

Super Mario Bros Stop Motion

2010-02-08T18:51:14+00:00

Algún día veremos a este hombre con volumen. Por ahora pasamos del 2D de la pantalla al 2D del stopmotion.

Super Mario, cariño, a ver si nos dices quién es tu dietista.

Vía: Jugala

Comparte y disfruta Ateneu Popular

Clientes FTP gratuitos

2010-02-08T19:18:31+00:00

Recuerdo muy bien que el primer cliente FTP que use en mi vida fue el CuteFTP, por suerte al poco tiempo conocí al Filezilla y ya desde ahí no lo cambie nunca mas, Filezilla es, y será para mi, el mejor cliente FTP que existe, ademas esta disponible para todos los sistemas operativos, de los que probé yo en Windows y Mac funciona perfectamente y no da ningún problema.

Si estas buscando un cliente FTP gratis que funcione muy bien, que sea un proyecto vivo, que se actualice constantemente con mejores, sin duda mi recomendación y sin pensarlo demasiado es Filezilla.

No obstante si por alguna razón este cliente FTP no te termina de gustar dejo a continuación otros clientes, para mi alternativos, también gratuitos disponibles para Windows y otros para Mac.

Clientes FTP gratis para Windows

WinSCP. Cliente FTP y SFTP open source para Windows. Este cliente ofrece las funciones justas y necesarias para transferir archivos, el proyecto esta bastante activo y la ultima versión actualizada tiene menos de un año.

Coffee Free FTP. Interface muy minimalista y agradable, ideal para los que solo necesitan funciones básicas, permite crear perfiles por cada cuenta que administremos, muy fácil de usar.

GoFTP. Según anuncian en el sitio oficial de este cliente gratuito lo que prima en este programa es la velocidad, por lo que esta optimizado para ofrecer velocidades de transferencia realmente buenas aprovechando al máximo nuestra banda ancha. Será cuestión de probarlo de forma intensa, hay gráficas que muestras que GoFTP puede ser 232% mas rápido que mi querido Filezilla.

FireFTP. Un complemento para Firefox del que ya hablamos hace tiempo (FTP para Firefox), es muy limitado pero nos puede sacar de un apuro, ademas es gratis y no molesta para nada tenerlo instalado, vale la pena

Coreftp. Cliente FTP gratuito, un poco rústico, pero con opciones de transferencia bastante avanzadas, también tiene disponible la opción de integrarse rápidamente con nuestro navegador. Se puede crear cuentas por cada dominio que tengamos, y varias opciones mas que lo hacen una buena alternativa.

Clientes FTP gratis para Mac

Cyberduck.Cliente gratuito para Mac bastante bueno, fue una de mis primeras opciones que probé cuando me mude de OS, cuenta con las opciones básicas que tiene cualquier FTP y también un par de adicionales que pueden ser interesantes para algunos, como por ejemplo una integración muy buena para los que usan Amazon S3.

OneButton FTP. Atención, este cliente esta discontinuado, por lo que ya no hay soporte para el, no obstante la versión todavía se puede descargar y funciona perfectamente, lo que no quita que el día de mañana con una actualización del sistema operativo deje de funcionar, lo comento porque es probable que en algún momento el autor retome el proyecto.

Fugu. Cliente SFTP, SCP y soporte SSH, este cliente es similar a cualquier cliente FTP pero a diferencia este encripta absolutamente toda la sesión para mejorar la seguridad de la misma. La interface es un poco tosca pero probablemente sea del agrado de los mas fanáticos y detallistas en cuanto a seguridad refiere.

Y eso es todo, si conoces algún otro cliente para recomendar lo puedes hacer en los comentarios. Espero que este compilado de clientes FTP gratuitos sea de su utilidad

Planetaki Planet Blogs preferidos de Usable y accesible

Llega Seedcamp a Iberoamerica

Una gran oportunidad para emprendedores hispanos

Applying Mathematics To Web Design

Golden Ratio and Golden Rectangle

Possible Applications

Download the PSD-layout

Fibonacci Design

Possible Applications

Download the PSD-layout

Five Elements, Or Kundli Design

Possible Applications

Download the PSD-layout

Sine Wave Design

Possible Applications

Download the PSD-layout

Other Techniques

Useful Links and Resources

Chatroulette

Mouse para el pie

Presentaciones de PowerPoint a vídeo

Bruselas publica un catálogo para proteger la privacidad del usuario de redes sociales a través del móvil

Políticos y libertades en Internet

Un reloj 100.000 veces más preciso que uno atómico

Diseño del Nexus One de Google

Artículos relacionados

Recursos gratuitos para San Valentín

Artículos relacionados

The hero. ¿Quieres ser el héroe de la película?

Bookbook, la funda ideal para el maquero lector

Entradas que quizá también te puedan interesar

Fernando Rodríguez

Entradas que quizá también te puedan interesar

Los anuncios de la SuperBowl 2010

Motorla Blu http://www.youtube.com/watch?v=qffDaLmDinw

Vizio http://www.youtube.com/watch?v=cHxmRSYDazE

Intel “Generations” http://www.youtube.com/watch?v=RSqMTWrlF-8

Intel “Lunch Room” http://www.youtube.com/watch?v=bbifmRBBN6Q

Google “Parisian Love” http://www.youtube.com/watch?v=nnsSUqgkDwU

Entradas Relacionadas

Nos vemos en el Drupal Camp de Barcelona 26-28 de febrero

Nos vemos y deberías venir

Nuestra aportación a la conferencia. Diseño gráfico

Open Source

LESS: variables y operaciones en CSS

Instalación de LESS

Compilación de LESS

Compilación automática

Uso de variables y operaciones

Operaciones CSS en diseños elásticos

Inconvenientes de LESS

Agrupación de selectores

Saltos de línea

Transformación de colores en formato hexadecimal a palabras clave.

LESS: variables y operaciones en CSS

Instalación de LESS

Compilación de LESS

Compilación automática

Uso de variables y operaciones

Operaciones CSS en diseños elásticos

Inconvenientes de LESS

Agrupación de selectores

Saltos de línea

Transformación de colores en formato hexadecimal a palabras clave.

Por la cara

Artículos relacionados

Cuentas redondas

Compartiendo un plugin para WordPress con muchos autores

Búsqueda orientada a la tarea

Balakrishna Gajelli. Super Creative

Artículos relacionados

El rotor de voiceOver para iPhone

El rotor

Seleccionar, copiar y pegar

El rotor y la navegación web

Super Mario Bros Stop Motion

Artículos relacionados

Clientes FTP gratuitos

Clientes FTP gratis para Windows

Clientes FTP gratis para Mac

Motorla Blu
http://www.youtube.com/watch?v=qffDaLmDinw

Vizio
http://www.youtube.com/watch?v=cHxmRSYDazE

Intel “Generations”
http://www.youtube.com/watch?v=RSqMTWrlF-8

Intel “Lunch Room”
http://www.youtube.com/watch?v=bbifmRBBN6Q

Google “Parisian Love”
http://www.youtube.com/watch?v=nnsSUqgkDwU