Webmaster Libre

Listado de nombres de colores en CSS3

Alma Fernández — Wed, 23 May 2012 11:21:05 +0000

No sé si será mi incapacidad para recordar secuencias con números (soy un desastre con los números de teléfono y cosas así) pero siempre me ha venido bien poder tirar de los nombres de determinados colores a la hora de construir una CSS. Hasta ahora disponíamos “sólo” de 17 colores con nombre y no todos eran “agradables”.

El nuevo módulo de color de CSS3 extiende el número de colores “con nombre” disponibles, haciendo que sea un recurso más cómodo. Estos colores ya estaban soportados por la mayoría de navegadores pero no habían pasado a la especificación oficial, así que no es extraño que ya hayas usado alguno.

Eric Meyer ha generado una lista con los colores por nombre y junto a ellos sus valores RGB, HSL y hexadecimal, haciendo de ella un recurso más práctico que otras muchas tablas disponibles con sólo los valores RGB y el nombre del color.

Entradas relacionadas

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Listado de nombres de colores en CSS3 was first posted on mayo 23, 2012 at 1:21 pm.

Complexify, un indicador de seguridad de contraseñas con jQuery

Alma Fernández — Mon, 21 May 2012 20:04:14 +0000

Una de las cosas a las que debemos prestar atención es a las contraseñas de los usuarios. No toda la culpa por escoger malas contraseñas es de ellos. Cuando se nos permite nos volvemos vagos y la mayoría de los problemas de seguridad son por pereza.

Complexify es un plugin para jQuery con el que mostrar a nuestros usuarios lo difícil o fácil de romper que es su contraseña para así animarlos a usar una mejor. La ventaja frente a otras validaciones similares es que valora la complejidad en base a cada contraseña, por ejemplo una contraseña sólo letras minúsculas de 6 caracteres tendrá una valoración baja pero una similar de 25 caracteres la tendrá alta.

Según el autor del plugin, una contraseña debe ser suficientemente compleja como para requerir ~600 años para crakearla desde un ordenador personal.

Vía Webification

Entradas relacionadas

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Complexify, un indicador de seguridad de contraseñas con jQuery was first posted on mayo 21, 2012 at 10:04 pm.

Enlaces de Twitter de 2012-05-20

Alma Fernández — Sun, 20 May 2012 07:30:00 +0000

Which responsive images solution should you use? http://t.co/saeksBzH #
Anieto2k: CamanJS, manipulación de imágenes mediante javascript http://t.co/7IrtwqyC #
Efecto hover sobre imágenes con HTML5 http://t.co/fAXIQomK #
html5shiv and Serving Content From Code Repositories | Zoompf http://t.co/YWZ3Zt5G #
RT @La_FCA How to Create an Audio Player [Tutorial] http://t.co/AyQNlkTn #coding #css3 #jquery #html5 vía @designmodo #

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Enlaces de Twitter de 2012-05-20 was first posted on mayo 20, 2012 at 9:30 am.

La revolución del diseño web

Autor Invitado — Wed, 16 May 2012 12:24:32 +0000

Este es un artículo escrito y contribuído por Verónica, una escritora y cineasta de Uruguay.
Visita su blog The Wander Life y sus películas Raúl, the movie y Monstruo

Imagen por Raftwet Jewell

El pasado del diseño Gráfico

El diseño gráfico se inició, hace mucho tiempo, como un trabajo para artistas habilidosos, que sabían cómo usar el lápiz, grandes ilustradores con una imaginación fabulosa.

Luego se volvió digital, y la creatividad se hizo infinitamente más importante que la habilidad para el dibujo. Hoy en día, la mayor parte del trabajo llevado a cabo por los diseñadores tiene a la web como destino final.

Las revistas y los periódicos en papel aún existen, de hecho, algunos prosperan en parte a causa del éxito de sus portales en línea, pero en todos los casos, los diseñadores han tenido que adaptarse al nuevo entorno, gobernado por el diseño web y la impresión digital.

El diseñador gráfico moderno debe tener la visión suficiente para crear diseños y campañas que funcionen tan bien en una revista impresa como en un cartel gigante o en una mínima pantalla de teléfono celular. El diseño actual tiene que ser versátil, sobre todas las cosas, para adaptarse a los entornos de trabajo, plataformas y software en constante evolución.

Impresion vs Web

Hoy en día, el diseño web tiene una gran influencia sobre los diseños pensados para impresión, mucho más que a la inversa. De hecho, desde la introducción de la interactividad, incluso en el caso de los diseños creados para ser impresos, se espera que proyecten una sensación de movimiento y emulen la posibilidad de una interacción con el espectador / usuario.

Terminología y contenido

Los diseñadores que se formaron en la era del papel también han tenido que adaptarse a la nueva terminología, ya que los términos utilizados en el diseño web, tales como el line-height o letter-spacing se están empezando a encontrar igualmente en el campo del diseño gráfico.

Cualquiera sea la terminología que se utilice para describir el trabajo, una de las claves para el éxito de los diseñadores hoy en día es que se centren menos en el concepto de diseño y la estructura de sus diseños en sí y más en la estructuración de los contenidos y la jerarquía de la información presentada.

Resolución y tamaño

Otra novedad interesante ha sido la preocupación por la resolución de pantalla. Con un diseño de impresión, uno sabe exactamente cómo se van a ver las cosas, pero con el diseño web, tenemos que estar preparados para que nuestro trabajo se vea bien en pantallas de diferentes tamaños y formatos. Existe la preocupación por facilitar la lectura, pero también otras tales como la eficacia del diseño en diferentes tamaños o si las imágenes se verán pixeladas en pantallas de gran tamaño.

Por otra parte, los tamaños de archivo no sólo afectan a lo bien que una imagen se va a ver, en cuanto a la resolución, sino también los tiempos de descarga. Los antiguos diseñadores gráficos sólo tenían que preocuparse por cómo se verían sus diseños de impresión, pero los diseñadores web modernos necesitan saber sobre size-optimization, de modo que puedan crear sitios web de aspecto genial y carga rápida, que funcionen en forma óptima para una gran variedad de velocidades de conexión a Internet .

El cambiante rol de los diseñadores

Naturalmente, la funcionalidad del diseño de páginas web no está completa sin la codificación adecuada. Esta es una de las principales diferencias entre el diseñador gráfico y el diseñador de páginas web, un diseñador de páginas web es mitad-artista, mitad-programador, alguien que tiene que tener un gran conocimiento sobre arte y composición pero también sobre el software de diseño y las plataformas más populares.

En el pasado, los diseñadores tenían todo el control. Ellos controlaban el mensaje y la forma en que éste se transmitía a través de un medio determinado. La revolución del diseño web ha cambiado profundamente esta situación. Ahora los usuarios pueden cambiar el tamaño de las fuentes, obtener vistas diferentes, e incluso elegir los colores de la pantalla ellos mismos.
Adaptarse a este nuevo entorno, llamado en inglés user-controlled, sigue siendo uno de los mayores retos para los diseñadores de hoy.

Imprimiendo la Web

Los diseñadores web a menudo olvidamos que gran parte de lo que estamos poniendo en línea puede terminar en una hoja de papel. Muchos sitios web ofrecen botones de versión para impresión, los cuales hacen esta transición mucho más amable. Básicamente, lo que la versión impresa debe hacer es eliminar todos los vínculos y los datos de navegación que no van a ser útiles cuando la página web se imprima. La versión impresa también debe incluir cambios de tamaño o ajustes de diseño, teniendo en cuenta los elementos que se han eliminado.

Los estudios de comportamiento de los usuarios han demostrado que éstos suelen imprimir los pasajes de texto especialmente largos, para poder leerlos lejos de la computadora. Esto significa que los diseñadores deben tener en cuenta la inclusión de hojas de estilo de impresión (print stylesheets) con mucha mayor frecuencia que en la actualidad.

Incluso algunas revistas online y sitios de noticias ofrecen la posibilidad de descargar versiones de impresión, y los sitios web que están adoptando esta tendencia en sus diseños sin duda van a mantenerse a la vanguardia, no sólo porque están ofreciendo a los usuarios lo que necesitan, sino también porque están ampliando el alcance de sus propuestas, metiéndose en las zonas “sin pantallas” de la vida diaria de los usuarios.

El Futuro

Una de las claves del trabajo de los diseñadores de hoy en día es comunicar mensajes de manera efectiva y consistentemente a través de diferentes plataformas.

Portabilidad

Navegar por la web en un teléfono celular mientras se mira una serie de televisión, chequear las tendencias del mercado de valores en un iPad, llenar un formulario de inscripción en un teléfono con pantalla táctil, son todas estas experiencias comunes para los usuarios que nuestros diseños web deben tomar en cuenta: los diseños deben ser fundamentalmente portátiles, capaces de asegurar la facilidad de lectura en las diferentes plataformas y siempre fieles a la transmisión de un mensaje poderoso.

Los diseños preparados para soportar las relaciones de aspecto variables, las pantallas pequeñas y conexiones lentas harán que la experiencia sea confortable para el usuario, mientras que lo contrario hará que no vuelvan a utilizar un sitio en particular cuando naveguen desde ciertos dispositivos. Por ejemplo, todas sus versiones para teléfonos móviles deben tomar en cuenta el tema de las pantallas táctiles: si la navegación se hace difícil debido a consideraciones de tamaño, entonces el sitio web no es lo suficientemente portátil.

La portabilidad no sólo se trata del diseño y el contenido, también se trata de la integración de ambos. El objetivo es proporcionar una experiencia similar a través de las diferentes plataformas, con funcionalidades similares, y un tema reconocible, para aumentar el reconocimiento de marca.

Testeo

Sea lo que sea que estemos diseñando, es necesario saber cómo los distintos usuarios lo van a ver y experimentar.

Hay muchos servicios y emuladores que permiten poner a prueba nuestros diseños web en diferentes navegadores virtuales. Por ejemplo, DeviceAnywhere ofrece un servicio que testea los sitios web a través de 2.000 dispositivos de navegación.

¿Es el diseño web el fin del diseño artístico?

Un diseño exitoso tiene que ver con la presentación de información de una manera convincente, basándonos en consideraciones de jerarquía, tratando de ser innovadores y utilizando tipos de letra, esquemas de colores y una diagramación adaptados al mensaje que estamos tratando de transmitir, al mismo tiempo que, en el caso del diseño web, intentamos hacer que la navegación sea fácil y cómoda, a través de múltiples plataformas y dispositivos.

El diseño está siempre integrado con un propósito, nunca se trata de una creación artística libre, con el objetivo del propio placer o para satisfacer metas artísticas propias. La revolución del diseño web ha creado un entorno lleno de desafíos para los diseñadores de todas partes del mundo, y sólo aquellos que logran encontrar el equilibrio perfecto entre arte y técnica, entre creatividad y funcionalidad, entre la tradición y la capacidad de adaptarse a estas rápidas transformaciones del entorno, no solamente sobrevivirán, sino que realmente prosperarán, creando nuevas tendencias y venciendo unos límites que ya son de por sí flexibles.

Verónica es una escritora y cineasta de Uruguay.
Visita su blog The Wander Life y sus películas Raúl, the movie y Monstruo

Entradas relacionadas

UI Patterns, librería de patrones de diseño de interfaces

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

La revolución del diseño web was first posted on mayo 16, 2012 at 2:24 pm.

Freepik, un buscador de recursos gráficos en castellano

Alma Fernández — Tue, 15 May 2012 19:01:14 +0000

En este sitio ya se ha hablado de algunos buscadores de recursos gráficos pero, este que os traigo hoy está en castellano.

Hace unos días contactó conmigo Alejandro para presentarme su proyecto. Freepik: un buscador de recursos gratuitos que indexa fotos, vectores, ilustraciones y plantillas PSD. Todo ello para que no tengas que ir buscando por decenas de sitios hasta encontrar algo adecuado.

Una vez encuentres lo que buscas serás dirigido a la página del creador del recurso para que puedas comprobar la autoría y condiciones de uso (que todos sabemos que son temas importantes, sober todo si vas a usarlos para proyectos comerciales).

Freepik, buscador de recursos gráficos gratuitos.

Entradas relacionadas

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Freepik, un buscador de recursos gráficos en castellano was first posted on mayo 15, 2012 at 9:01 pm.

¿Dependemos demasiado de los frameworks?

Alma Fernández — Mon, 14 May 2012 16:30:08 +0000

Hace ya tiempo,cuando jQuery se estaba convirtiendo en el framework de destino de la mayoría de desarrolladores de front-end; surgió una ola de críticas basada principalmente en lo mucho que estabamos aprendiendo de jQuery y lo poco que sabíamos de javascript. Es cierto que mucha gente aprendió a usar jQuery y no siguió hacia la base del asunto, pero no menos cierto es que jQuery solventa problemas reales y facilita un montón la tarea. Puedo declararme abiertamente fan y no me gustaría tener que volver a las peleas de antes para hacer funcionar algo entre varios navegadores.

Al tiempo, surgían como setas los frameworks para PHP, la gente aprendía su framework y para algunos pasar de uno a otro era como abrirse a un mundo nuevo. No obstante, PHP es un lenguaje “feo”, con múltiples carencias y los frameworks vinieron a facilitarnos las cosas, solucionando problemas reales y haciendo que nos pasasemos menos tiempo arreglando cosas que creándolas. Son prácticos y durante estos años he ido probando muchos, con gran placer en muchas ocasiones. Creo que son útiles y, salvo para proyectos muy pequeños, está (para mi) justificado usarlos.

Ahora, la nueva moda son los bootstraps y boilerplates, ayudas para arrancar un proyecto de front-end que, al menos a mi, me rodean de cosas que no usaré y me fuerzan en cierta medida a adaptarme a maneras de desarrollar que no siempre me agradan. No obstante, como todo en esta vida es adaptarse, he ido probando cosas y obviamente hay algunas que me pienso quedar (trozos de uno y otro que son útiles). Aún así, creo que estamos pasando más tiempo probando cosas que haciéndo algo útil con ellas y, lo que me parece aún peor, están surgiendo olas de sitios web como ejércitos de clones con pocas o ninguna modificación sobre, por ejemplo, Twitter Bootstrap. ¿No os empezáis a cansar de ver “Hero Units”, barras de menú negras arriba de la página o esos sempiternos botones azules?.

Revisando feeds de este fin de semana me encuentro con HTML9 Responsive Boilerstrap JS, una parodia de todos estos frameworks de front-end que, sin apenas diferenciarse entre si, prometen ser el mejor invento y solucionarlo todo. Con esto, me he dado cuenta de que igual no soy la única que se está saturando de frameworks ¿no?.

No sé si seré yo, que me empiezo a hacer vieja y gruñona (que también) pero me parece que con el tiempo nos estamos haciendo vagos. Algunos hasta el punto de incluir ficheros y ficheros sin ningún tipo de criterio ni utilidad. ¿Dependemos demasiado de que otros piensen por nosotros? ¿Nos hemos acomodado hasta el punto de coger cualquier recurso que nos ahorre tiempo? Yo tengo la manía de empezar de cero e ir buscando lo que me pueda hacer falta (siempre que en el tiempo que gaste buscándolo no pueda hacer yo misma una solución). Pero a veces parece que la obsesión por no reinventar la rueda me lleva a pasarme demasiado rato buscando (rato que luego se traduce en posts para este blog, con la esperanza de que a ti no te haga falta estar horas buscando).

En resumen, que me voy del tema, empiezo a cansarme de que cada semana surja algo que promete dar solución a todos los problemas del mundo y, poco a poco, estoy volviendo a esa mentalidad más artesana que tenía cuando empecé con las webs. ¿Tú que opinas? ¿Usas frameworks o boostraps o prefieres hacer las cosas a tu manera? ¿Dependemos demasiado de los frameworks?

Entradas relacionadas

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

¿Dependemos demasiado de los frameworks? was first posted on mayo 14, 2012 at 6:30 pm.

Enlaces de Twitter de 2012-05-13

Alma Fernández — Sun, 13 May 2012 07:30:00 +0000

Make sure your HTML5 document outline is backwards compatible | 456 Berea Street http://t.co/8R5giRfx #
How to Safeguard Your Site with HTML5 Sandbox http://t.co/DaxpeDke #
Your app is a collection of tiny details http://t.co/NUV1M9Bc #
How To Build A Real-Time Commenting System http://t.co/WvZTspZs #
RT @SergiGP: RT @AlcidesRC: Animatable: One property, two values, endless possiblities http://t.co/vF8830Ai via @LeaVerou #

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Enlaces de Twitter de 2012-05-13 was first posted on mayo 13, 2012 at 9:30 am.

jQVMaps, mapas SVG con jQuery

Alma Fernández — Wed, 09 May 2012 10:28:55 +0000

jQVMaps es un plugin para jQuery con el que podras renderizar mapas vectoriales en SVG, dando soporte a navegadores no tan modernos mediante VML.

Los mapas generados por el plugin pueden actualizarse dinámicamente y enlazarse con datos en formato JSON, imprescindible para generar presentaciones de datos asociados al mapa.

Actualmente contiene mapas del mundo, américa, europa y alemania. No obstante, existe un pequeño script en Python con el que podrás convertir cualquier mapa en formatos como Shapefile para usarlos con el plugin.

Vía Webification

Entradas relacionadas

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

jQVMaps, mapas SVG con jQuery was first posted on mayo 9, 2012 at 12:28 pm.

esoTalk, un sistema de foros sencillo

Alma Fernández — Wed, 09 May 2012 09:58:02 +0000

Hace tiempo leia por ahí que los foros habían muerto a manos de las redes sociales. No es que yo ande en muchos foros actualmente pero, por la gente cercana a mi, siempre he pensado que muy muertos no están.

Desde foros de soporte a foros de discusión sobre temáticas comunes, puede que ahora no surjan como setas de cualquier rincón pero siguen siendo prácticos y utilizados.

No obstante, por ejemplo yo que los uso principalmente para temas de soporte, no terminaba de encontrar un sistema de foros sencillo y sin demasiadas historias. Nunca terminé de hacerme con Vanilla (tampoco lo intenté con ansias, admito) y el antes adorado phpBB me da pereza horrenda.

esoTalk es un sistema de foros pensado para ser simple y ligero. La verdad es que a simple vista no tiene nada. Usuarios, hilos, temas y respuestas. Lo justo y necesario vamos. Promete hacer uso de las nuevas tecnologías web para crear un sistema de foros simple pero potente, rápido y escalable. Habrá que estar al tanto del desarrollo a ver si cumple las espectativas.

Vía Web Resources Depot

Entradas relacionadas

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

esoTalk, un sistema de foros sencillo was first posted on mayo 9, 2012 at 11:58 am.

FitVids y FitText, dos plugines de jQuery para tus diseños sensibles

Alma Fernández — Tue, 08 May 2012 16:25:03 +0000

Ya hemos hablado de muchas herramientas reponsivas o sensibles, las dos que te traigo hoy me han venido de perlas:

FitVids te ayuda a incluir video que responderá perfectamente a los distintos tamaños de pantalla.

FitText sirve para esos encabezados que te gustaría que encajasen en la pantalla, se encarga de cambiar el tamaño de la tipografía para adaptarlo al dispositivo.

En ambos casos existen soluciones manuales más o menos complejas pero estas dos resultan especialmente cómodas.

Entradas relacionadas

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

FitVids y FitText, dos plugines de jQuery para tus diseños sensibles was first posted on mayo 8, 2012 at 6:25 pm.