Como diseñar una tarjeta de negocios

Llevar a cabo un exquisito diseño de una tarjeta de negocios con Cardxc es un trámite ágil, sencillo, rápido y gratuito.

Es posible controlar, colores y posición, del texto a incluir en la tarjeta:



La galería de los plantillas disponibles es amplia y variada:
Siempre es posible hacer uso de la aplicación sin llevar a cabo el proceso de registración; pero de esta forma no habrá posibilidad alguna de guardar el trabajo realizado.

Sitio Web |Cardxc

Leer más

Google, la edad del dominio y el SERP

Días atrás había hecho el comentario en Twitter, ahora vía SEO Femenino tomo conocimiento que está disponible el video de Matt Cutts, en modo subtitulado.

¿Cuánto peso tiene el número de años que está registrado un dominio en en tu ranking?

Leer más

s4ve.as | alojamiento de archivos

s4ve.as se pronuncia save as y es un servicio que permite alojar cualquier archivo de cualquier tamaño para ser compartido.
La restricción es que el enlaces es válido por 24 hs



Ofrece un servicio de acortamiento de URLs y un recordatorio del tiempo remanente hasta cumplirse las 24 hs, así también info básica sobre el tipo de archivo alojado.

Leer más

Como recargar sólo el CSS

Reload your CSS se trata de un Bookmarklet que se encarga de recargar sólo el código CSS de una página; evitando así recargar todo el contenido (vía F5 como hacemos a cotidiano) en etapa de diseño.



Cómo he comentado en alguna oprtunidad, un Bookmarklet es un marcador, que en lugar de apuntar a una URL, ejecuta una pieza de código, generalmente JavaScript. La instalación es sencilla, sólo requiere arrastrar el enlace y soltarlo en la barra de marcadores o de navegación del navegador.

Funciona en Internet Explorer y en Firefox.

Sitio Web | Reload your CSS

Leer más

Como tweetear anónimamente | ShhhTwitter

De eso se trata, precisamente, ShhhTwitter permite generar tweets de forma anónima.
Aunque la mejor definición sería sin nuestra cuenta ya que los tweets generados van por cuenta y orden del usuario TweetShh3


De esta manera, cualquiera (con o si cuenta) podrá twitear lo que sea, a quien sea.
Pero, por supuesto, el mensaje no aparecerá en la línea de tiempo del destinatario; pero sí en sus menciones.

Sitio Web | Shhtwitter

Leer más

diagramas: nunca tan fácil | diagrammr

A modo de ejemplo, y en relaciones sin sentido y con nombres ficticios, en este caso con diagrammr y a partir de la siguiente lista:

• alfa consulta beta
• alfa envia delta
• beta devuelve etha
• etha regresa delta
• delta consulta alfa
• delta avisa gamma
• etha archiva omega
• beta transfiere nu

La aplicación genera el siguiente diagrama


Es posible cambiar las dimensiones (ancho × alto) de la imagen resultante. En mi caso, obtuve un PNG de 500 × 500 px
De otra manera, se obtiene una URL para compartir. En mi ejemplo http://diagrammr.com/edit?key=dcJUxnRyVfk

Sitio Web | diagrammr

Leer más

25 fuentes a mano

Excelente recopilación han llevado a cabo en DESIGNM.AG, donde han reunido 25 exquisitas fuentes a mano alzada (aka handwritten fonts)

Entre las mismas, se encuentran:

• Whiteboard Modern Demo
• Harrison
• FFF Tusj
• Sketch Rockwell
• The Quiet Scream
• Grutch Shaded
• Mia’s Scribblings
• Karabine
• Christopher Hand
• Later On

Entre otras.
En cuanto al uso, sólo nomás seguir los enlaces correspondientes y verificar las restricciones de cada autor al respecto.

Leer más

Typedia

Typedia es una comunidad Web que tiene como misión clasificar tipos de letras y educar a la gente acerca de ellas. Promoviendo información sobre autores, año de lanzamiento, país de origen y un extenso etcétera.

Asi nomás.

Para lograr concebir el lugar preciso donde ubicar este tipo de actividades; si existiese un lugar entre IMDb y Wikipedia, pues allí estaría Typedia.

A continuación, por ejempo; una suerte de muestra sobre el tipo de información que podemos encontrarnos ante la búsqueda de ITC Avant Garde Gothic Book

Que se entienda bien, por si todavía alguno fantasea con la idea de encontrar aquí recursos del tipo fuentes gratis para descargar. Por cierto, este no es el caso.

Quienes integran este grupo son verdaderos entusiastas y conocedores y les apasiona compartir ese conocimiento.

Por la manera en que lo llevan a cabo, aspiraran a que en el futuro el sitio pueda lograr convertirse en un recurso educativo.

De esta forma, cualquiera pueda formar parte de la comunidad (o de otra manera consultar los contenidos sin registrarse), aprender algo más acerca de sus fuentes favoritas y, tal vez, conocer algunas nuevas.

Sitio Web | Typedia

Leer más

Desenfoque rápido on-line

Bien es cierto que existen agregados o plugins que permiten llevar a cabo ajustes sobre elementos gráficos, en especial atención en fotografía; pero con TiltShiftMaker se consigue un buen efecto de desenfoque en forma rápida y on-line.



No es para que los puristas o especialistas en Photoshop se rasguen las vestiduras; por cierto que no. Pienso en TiltShiftMaker como una alternativa interesante a esas fotos aburridas que cualquiera, tiene por ahí.

Sitio Web | TiltShiftMaker

Leer más

Find that file

Motores de búsquedas alternativos

Find that file tiene la misión de proveer búsquedas extensas no sólo a través de la Web, sino además en FTP, clientes Usenet y sobre algunos recursos del tipo P2P.




Este motor de búsqueda, no sólo identifica y muestra los resultados más relevantes. Además es capaz de determinar y mostrar meta-datos, resúmenes y miniaturas.
Las principales fortalezas de este motor de búsqueda están basadas en la búsqueda de:

• audio
• video
• archivos bittorrent
• documentos
• fuentes
• archivos DLL y OCX
• archivos comprimidos
  

Una alternativa poderosa a tener en cuenta.

Vía | Feedmyapps
Sitio Web | Find that file

Leer más

Personas

Personas, es un proyecto de Aaron Zinman; el cual es un componente de Metropath(ologies) y mediante tu nombre y apellido logra generar un indentik según la tipología de datos y rastros que hayas dejado a la fecha en Internet.

Para mis pruebas, he elegido a algunas personas y a otros personajes.

Johanna Lasic Peter Gabriel
Harry Potter
Inodoro Pereyra

Me resulta gracioso, lo que esta aplicación sabe acerca de Inodoro. En especial atención, el aspecto ilegal (!?)
Así pues, me reservo los análisis que sobre mí hace la aplicación.

Sitio Web | Personas

Leer más

Trendistic | tendencias en Twitter

Siempre me he preguntado adonde van a parar los Trending Topics de Twitter cuando dejan de estar en la Home del sitio (!?)

Pues bien, en Trendistic se han tomado las cosas muy en serio en aras de llevar a cabo el seguimiento de cualquier tendencia, siempre y cuando sea esta cuantificable.

Puede verse en este gráfico la cadencia semanal, por ejemplo, de Follow Friday



De otra mano, por ejemplo, puede seguirse en el hora a hora la medida en que se utiliza el hasgtag #noalimpuestazo en Twitter.

Herramienta interesante, si las hay; especialmente para los amantes de las estadísticas.

Leer más

Google mejora el filtro de las búsquedas de imágenes

Google Image Search permite ahora filtrar los resultados de las búsquedas de imágenes según el aspect ratio.
Siendo ahora, los filtros disponibles, los siguientes:

• medianas
• grandes
• tamaño ícono
• > 400×300px
• > 680×480px
• > 800×600px
• > 1024×768px
• > 2 Mpx
• > 4 Mpx
• > 6 Mpx
• > 8 Mpx
• > 10 Mpx
• > 12 Mpx

Y en modo avanzado, las opciones son:

• alargadas
• cuadradas
• anchas
• panorámicas

Vía | Google Operative System

Leer más

IE8 no muestra texto ALT como tooltip

Leo en 456 Berea Street que Internet Explorer 8, en modo estándard, no mostrará el contenido del atributo ALT como tooltip.

Versiones previas de Internet Explorer mostraban el contenido de ALT cuando el cursor del mouse pasaba por encima de cualquier imagen.

Este tipo de comportamiento ha confundido casi a—digo mal si escribo una generación?—muchos diseñadores web; en el uso de ALT y el atributo TITLE.

Leer más

Accesibilidad Web y contenido multimedia

Vía Accesibilidad en la Web doy con el sitio Web de CUAED.

La página correspondiente a Clínicas de Ajedrez CUAED es, verdaderamente, un claro ejemplo de cómo presentar contenido multimedia de manera accesible.

La página presenta un video sobre el juego-ciencia: el ajedrez.

Más allá de mi pasión por este juego, destaco desde el punto de vista de la accesibilidad web, las siguientes características sobre como se ha llevado a cabo la publicación de este documento.

• Se ha utilizado ccPlayer como media-player. Este reproductor soporta teclas de atajo para la pausa y reproducción, como así también para todas las funciones que brinda cualquier otro reproductor. Destaco, que además soporta caption text search. Más info en http://ncam.wgbh.org/.
• El video incluye 2 idiomas de subtitulado: el inglés y el español.
• Los subtítulos son opcionales, aunque por defecto se visualizan.
• La transcripción de los diálogos están disponibles. Esto último toma relevancia cuando se accede a la página mediante un lector de pantalla, al no estar disponible el video; la transcripción es el verdadero protagonista.

A mi gusto y entender, un verdadero ejemplo de como publicar contenido multimedia de manera accesible.

Leer más

27 Iconos circulares - social media

En Blog Perfume han publicado el enlace para descargar, en forma gratuita, un pack de íconos de medios sociales. Los tamaños disponibles son:

• 128 × 128px
• 64 × 64px
• 32 × 32px

Pueden descargarse, tanto en formato RAR como ZIP, también.
Como complemento a la versión anterior, esta incluye ahora: AIM, Bebo, eBay, Hi5, Last.fm, LinkedIn, Windows Live, Ning, Orkut & Yahoo! Messenger

Sitio Web | Blog Perfume

Leer más

El ritmo vertical

Títulos, subtítulos, bloques de citas, notas a pie de página, ilustraciones, títulos y otras variaciones en el texto, pueden crear síncopas en contra de las variaciones del ritmo regular de las líneas base. Estas variaciones pueden y deben añadir vida a la página, al texto principal, pero también deben volver después de cada variación de ritmo y precisión en la fase.

La forma más común en que se agrega espacio vertical en una página web es en el insertado entre 2 párrafos. Si el ritmo de la página es mantenido, el espacio entre párrafos debe estar relacinado con el interlineado.

Por ejemplo, si el texto del párrafo es de 12px con un alto de línea (line-height, en CSS) de 1.5em; cada línea tendrá entonces 18px de alto.

De esta manera, para mantener el ritmo del texto, el espacio vertical entre bloques debe ser de 18px. Esto, se consigue configurando los márgenes superiores e inferiores igual al alto de línea.

p {
line-height: 1.5em;
margin-top: 1.5em;
margin-bottom: 1.5em }

Basados en esta idea, en drewish.com hay disponible una herramienta para intentar mantener el ritmo vertical, mediante CSS.



Sólo es necesiario informar cual es el font-family con el cual se trabajará por defecto y cual será el alto, también por defecto, de la fuente. Finalmente, el alto de la línea y los tamaños de fuentes para el resto de los elementos.



Vía | The Elements of Typographic Style Applied to the Web - Rhythm & Proportion

Leer más

De guiones y otras historias

El guión, el guión–N y el guión–M

Están disponibles para el uso 3 tipos de guiones diferentes.

El guión, el guión–N y el guión–M, conocidos también como hyphen, En Dash y Em Dash, respectivamente.

A continuación, veremos el uso correcto de cada uno de ellos.

Guión (-)

El guión es el signo menos de los teclados basados en Windows y es ampliamente utilizado como signo de puntuación. No debiera ser confundido con el guión–N o el guión–M; estos 2 últimos son diferentes y tienen funciones distintas al guión común.

El guión es utilizado para separar sílabas o, de otra manera formar palabras compuestas (aunque hay que reconocer, los sajones son más propensos que nosotros, al respecto).

Los rayos-X se utilizan en radiología.

Guión–N (–)

Conocido también como En Dash, deriva su nombre por tener el mismo ancho que la letra 'N'.
Suele utilizarse, básicamente, para expresar rangos de valores.

Las personas de 55-80 años son más propensas a sufrir de hipertensión.

Así como también, es resultados acerca de juegos.

El primer set terminó 6–4.
El código ASCII de este guión es &#150

Guión–M (—)

Conocido también Em Dash, deriva su nombre por tener, este guión, el mismo ancho que la letra 'M'.
El código ASCII de este guión es &#151
Y su ancho es el doble que el ancho del guión–N.

Se utiliza para nombrar los elementos fuera de paréntesis. Esto es diferente de las comas que separan los elementos entre paréntesis. Por ejemplo:

Esta estrategia—de cara al SEO—es comúnmnete utilizada.

No suelen utilizarse espacios ni antes ni después del guión–M

Vía | Cute Writing

Leer más

Como especificar licencias para las imágenes

Recientemente, desde Google, han anunciado la posibilidad de buscar imágenes mediante Image Search que tengan licencias Creative Commons.
Pero ¿de qué forma le decimos esto a Google?
Simple. Utilizando un div que encierre la imagen y un enlace a la licencia junto con un RDF como lo siguiente:

<div about="image.jpg">
<img src="image.jpg" alt="" />
<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">
Creative Commons Attribution Share-Alike 3.0</a>
</div>

Vía | Google Operative System

Leer más

Texturas gratis | Love Textures

Love textures es uno de los pocos sitios que no sólo ofrecen texturas gratis sino que, además, un canal RSS para mantenerte actualizado con las últimas novedades.

A la fecha, el sitio cuenta con poco menos de 200 texturas disponibles. Y las categorías abiertas, cubren las necesidades, de la gran mayoría:

• Abstracto
• Arquitectónico
• Tejido
• Comida
• Vidrio
• Grunge
• Metal
• Naturaleza
• Papel
• Piedra
• Madera

Permite además, lleva a cabo búsquedas por filtros de color o por nubes de etiquetas.



El tamaño de las imágenes; en algunos casos, es casi fuera de lo común. Llegando, a veces, a estar disponibles en casi 5 Mpx

Sitio Web | Love Textures
Vía | Feedmyapp

Leer más

como hicieron la tapa de Macworld

Después de trabajar en la última portada de la revista Macworld, Peter Belanger ha decidido mostrar todo lo que está involucrado en el proceso de creación de una tapa de revista.

Nos muestra en este video 3 áreas principales:

• fotografía
• Photoshop
• diseño

Desde el punto de vista técnico, ha utilizado una Canon 5D Mark II con un lente de 24mm-70mm

Visto en | n4gash

Leer más

Yellowpipe Lynx Viewer Tool

Lynx es un navegador de texto que si bien puede ser simulado a través del sitio Web de deloire.com también puede ser descargado desde el sitio oficial en lynx.isc.org.

Lo que acabo de enterarme, vía wwwhatsnew es sobre una extensión para Firefox.

Se trata de Yellowpipe Lynx Viewer Tool, una extensión para Firefox que nos brinda una versión de cualquier página web de mano de un navegador sólo texto


Ya en alguna oportunidad he publicado consideraciones al respecto de navegadores en modo texto y la forma en que los enlaces son mostrados.

En lugar de aparecer inline los enlaces son numerados y aparecen entre corchetes; son agrupados y en ese orden aparecen al pie del documento.

Los navegadores de texto, Lynx y SEO-Browser, por ejemplo; son ideales para percibir la forma en que los crawlers o bots ven una página web, de cara al SEO. Pero para este último cometido, Lynx es mi preferido. Ya que mediante su sistema de numeración me permite conocer rápidamente la cantidad de enlaces salientes del documento.


Instalar | Yellowpipe Lynx Viewer Tool

Leer más

Doctype

Preguntas y respuestas en diseño Web

A modo de un wiki, Doctype, puede ser un excelente recurso para quienes a cotidiano tienen alguna duda; sea en CSS, en HTML, diseño Web o en email design tal vez.



Básicamente es un sistema basado en desempeños y en votaciones. De este modo, la comunidad votará a favor o en contra de las soluciones sugeridas.

El idioma de publicación es el inglés y, a mi gusto, un canal de sindicación sería muy atractivo.

Leer más

Como generar un esquema de color

a partir de una imagen

Mediante ColorSuckr existe la posibilidad de informar la URL donde está alojada una imagen (en mis pruebas he utilizado mi cuenta de ImageShack) y obtener de esta manera un esquema de colores basado en dicha imagen.

Imagen de prueba

Lo interesante, no es sólo que se obtiene la paleta tanto en formato hexadecimal como en RGB; sino que, además, el color en formato Web Safe.

Esquema de colores obtenidos a partir de la imagen de muestra

Como complemento a esta utilidad on-line; está disponible, también, la posibilidad de instalar la extensión disponible para Firefox.

Leer más

Zen Textures | imágenes gratis

Zen Textures es un banco de imágenes gratis, las cuales están basadas en texturas.
La calidad de la imagen disponible para algunas texturas que he consultado, llega a estar en dimensiones cercanas a los de 3000 × 2000 px


Las principales categorías son:

• paper
• grunge
• concrete
• clouds
• fabric
• rocks
• stone
• metal
• cracked
• bokeh
• rust
• wood
• plants
• paint
• green
• cardboard
• books

Sitio Web | Zen Textures

Leer más

La evolución del diseño web

Los diferentes saltos y tendencias a través del tiempo, han sido analizados en Design Reviver por Mirko Humbert.

Y, en efecto; es lo que pasa cuando ves las cosas en retrospectiva...

Internet tiene ya, poco más de 25 años. Y ha pasado por varias etapas.
Algunas las hemos vivido. Otras, hemos escuchado sobre ellas.
En resumen.

de 1993 a 1996: la web es un lugar aburrido para los diseñadores
tendencias: texto plano y enlaces en color azul
La era de Mosaic. El primer navegador con capacidad para mostrar imágenes inline.

de 1995 a 1998: la guerra de los navegadores
tendencias: "optimizado para", botones, texto parpadeante
Hasta mediados de los 90, Netscape era el navegador. Luego, comienza a asomar Internet Explorer. Los diseños pueden ser tan complejos como tablas anides y el uso de espaciadores de 1px es casi la única salida.

de 1998 a 2000: los diseñadores se toman en serio la creación de sitios web
tendencias: frames, layouts rígidos basados en tablas
Se populariza el uso de Dreamweaver y GoLive. Tímidamente algunos comienzan a utilizar Flash en sitios web.

de 2000 a 2004: el surgimiento del estándard web
tendencias: transparencias, sitios web estándards
Comienza a escucharse acerca de W3C, el diseño sin tablas (tableless) y el uso de Hojas de Estilo (CSS).

de 2004 a 2007: la era de la web 2.0
tendencias: botones brillantes, degradados, widgets y esquinas redondeadas
Popularizado por Tim O’Reilly, la expresión web 2.0 comienza a ser utilizada para hablar de un nuevo tipo de sitios web. Sitios orientados a un uso más comunitario, más social.

de 2008 a la actualidad: diseñando para otros periféricos
tendencias: diseños basados en cuadrículas, aplicaciones web para móviles
El lanzamiento de iPhone, hacia fines de 2007 nos hace ver que el acceso a la web mediante un navegador de escritorio, no es un paso obligatorio.
Se accede también mediante otros dispositivos.

Leer más

snipplr.com | trozos de código

Cuando allá por el 2007 comenté acerca de Snipplr; más allá que la entrada parecía una marcador comentado; el sitio recién comenzaba con este tipo de ofrecimiento de recursos.



Con un desarrollo de sitio completamente renovado y un eficaz buscador interno; el sitio ofrece una buena cantidad de trozos de código disponibles para ser usados.

El uso no requiere registración, pero es una buena forma de mantener ordenados las porciones de código que se vayan seleccionando.

Sitio Web | Snipplr

Leer más

Subtítulos en los videos de Matt Cutts

De un tiempo a esta parte, en el canal para Webmasters de Google en YouTube, Matt Cutts publica periódicamente videos con respuestas y ayuda a los webmasters.
Hoy, vía el Blog para Webmasters, dichos videos comienzan a publicarse subtitulados al español.

¿Afectan los tiempos de carga al posicionamiento en los resultados de búsqueda de Google?

Leer más

Themes disponibles para Google Chrome

Google Chrome ya tiene disponible su propia galería de temas para su navegador.

Por el momento, hay poco menos de 30 temas; 28 precisamente. Que están disponibles para su instalación, sólo si se cuenta con la versión 3.0 ó superior.


Sitio Web | Google Chrome Themes Gallery

Vía | Google Operating System

Leer más

TestiPhone.com | simulador de iPhone

TestiPhone es una navegador web que permite visualizar, mediante una simulación, la forma en que se ve tu diseño web en el iPhone.



Esta aplicación trabaja adecuadamente a partir de las versiones Internet Explorer 7, Firefox 2 y Safari 3.
La visualización se puede llevar a cabo en la disposición vertical 320 × 365 px o en modo horizontal 480 × 200 px

Sitio Web | TestiPhone

Leer más

Bumpbox

No sólo otro clon de lightbox

Bumpbox tiene pocas ventajas sobre otras versiones de lightbox, y es que además de soportar varios y diferentes tipos de archivos, soporta además, archivos PDF.



La implementación es verdaderamente sencilla, como cualquier versión de lightbox. Sólo hay que enlazar los archivos JS en el HEAD y declarar las CLASSes correspondientes.

A diferencias de otros, Bumpbox en forma automática detecta el tipo de archivo que deseamos mostrar; facilitando así el proceso de integración.

Es compatible con los navegadores más modernos:

• Firefox 3 - 3.5
• Internet Explorer 7 | 8
• Google Chrome
• Apple Safari 3 | 4
• Opera 9.04

Ver | Demo
Descargar | Bumpbox

Leer más