Follow jmourad on Twitter

Categorías

Desarrollo web

40 mujeres con gran talento en el diseño Web

No es ningún secreto que hay una gran diferencia en cuanto a la proporción de hombres y mujeres en la industria del diseño de páginas web, pero eso no quiere decir que no exista ninguna mujer con un increíble talento para el diseño Web. El artículo 40 Amazing Female Role Models for Web Designers , de line25 , nos deja una selección de las 40 diseñadoras más notable e importante (de habla inglesa) , que pueden ser un modelo o ejemplo perfecto para cualquiera que trabaja actualmente en su carrera de diseño web. Sería interesante hacer algo similar pero para los que utilizamos el castellano como idioma. Cuidado, que las chicas vienen pisando fuerte, ¡bienvenidas!

40 mujeres con gran talento en el diseño Web

La web en cinco años, según sus dueños :)

Veíamos el otro día el futuro de la web en imágenes. Tratábamos, de algún modo, la evolución del e-learning , de la educación en este contexto en una presentación reciente acerca de su excelencia. Hoy, resulta otra interesante instantánea la entrevista al CEO de Google, Eric Schmidt, sobre los 5 próximos años de la web. Tuvo lugar en el Gartner Symposium/ITxpo Orlando 2009 . Aunque olvidan temas importantes, como las redes sociales distribuidas , los datos estructurados (la web semántica) y otros movimientos que no van en la misma dirección de Google, vale la pena echar un vistazo a los puntos más importantes .  No hay demasiadas sorpresas pero sí un resumen de los temas que ya nos vienen ocupando últimamente aquí: El chino será el idioma dominante en internet en cinco años. Los usos que dan a la web los adolescentes de hoy nos muestran lo que todos haremos en cinco años: saltar de aplicación en aplicación sin problemas.  Eric se acercaría, con esta opinión, al discutido (y aparentemente superado) concepto de nativos digitales. Si tenemos en cuena la Ley de Moore, 5 años es mucho tiempo. Tanto la capacidad de las computadoras como los anchos de banda (por encima de 100MB) habrán crecido de forma exponencial. No habrá diferencia entre facilidad de distribución de formatos, aumentando la importancia de la televisión por internet. Estamos empezando a ganar dinero con Youtube. El contenido será cada vez más en formato vídeo. La información en tiempo real es tan válida como cualquier otra. La queremos en los resultados de las búsquedas. La real time web será cosa de muchas compañías, no solo de Twitter y Facebook. Podemos indexar ya la real time web pero no sabemos cómo valorar la relevancia de sus contenidos. ( Google Social Search es una aproximación al tema) Se trata de un cambio hacia la información generada por el usuario en el que las personas escucharán más a sus iguales que a las tradicionales fuentes. Aprender cómo valorarlo es la gran asignatura pendiente y  Schmidt cree que Google puede solucionar el problema (marcar las reglas de la objetividad ) Nos deja también algunos detalles concretos, como la aparición en 2010  del del primer Netbook con  Google OS (un sistema operativo propio de Google), capaz de trabajar offline, en la caché, con HTML5 (importante evolución en el lenguaje de marcado fundamental de la web que aumenta sus posibilidades 3D, entre otras cosas). ¿Qué pensamos los usuarios acerca del tema? El caparazón como mejor blog en la categoría de educación últimas noticias Compártelo

La web en cinco años, según sus dueños :)

Las 19 mejores combinaciones tipográficas

En una composición gráfica o en una página web cualquiera, los contenidos textuales son los principales responsables de la transmisión del mensaje al espectador final . En este entorno, por tanto la tipografía es la materia que hace de intermediario entre el receptor y la información propiamente dicha. Los caracteres matizan las palabras y le aportan o refuerzan el sentido. La mala selección de esas formas pueden interferir negativamente en la comunicación. Junto con el color, la tipografía puede alterar por completo el significado que asociamos a un diseño. El texto puede decir una cosa; pero las letras, otra muy diferente. Lo cierto es que cada familia tipográfica tiene sus propias características y su propia personalidad, que permiten expresar diferentes notas visuales, unas más fuertes y otras más sutiles, unas más refinadas y otras más toscas, unas más geométricas y otras más orgánicas, por lo que la selección de las familias tipográficas a usar en una composición debe hacerse con un amplio sentido de la responsabilidad. Teniendo en cuenta esto, encontré un artículo muy interesante, con el título 19 top fonts in 19 top combinations , de Bonfx , en donde usa 19 diferentes tipos de combinaciones de tipográficas , las combinaciones que normalmente se utilizan en un titular y el tipo de letra base en un artículo o página Web. La regla de oro de las combinaciones tipográficas , que es simplemente de combinar una de tipo serif y otra de tipo sans serif para efectuar el contraste . Cuanto más alejadas de los estilos de los tipo de letra mejor. Los tipos de letras que son demasiado similares dan como resultado una mala combinación. Algunas tipografías tienen versión sans y versión serif y suelen formar una perfecta combinación: por ejemplo, la forma serif para el texto y la sans para el resto, o viceversa. Con fuentes diferentes, es cuestión de probar. El tipo de letra para el texto base puede incluir, naturalmente, la variante cursiva y en negrilla. Ambas deben emplearse sólo para enfatizar partes del documento, no en fragmentos extensos. En general, las familias con serifas de pie, funcionan mejor como tipo de lectura en imprenta. Por el contrario, las de palo seco o sin serifas, dan mejor resultado en monitores y pantallas, sobre todo cuando hablamos de resoluciones bajas. El factor más determinante sobre la elección de un tipo de letra base debe ser su legibilidad , propiedad derivada del diseño mismo de los tipos de letra, eso es especialmente importante para los textos largos. Para bloques de texto más cortos tenemos mayor libertad de elección, y para los títulos podemos emplear la fuente que queramos, en función del espíritu del documento y la sensación que nos interese crear . Una buena estrategia de trabajo es preparar una paleta de tipografías con una letra serif para el texto, una letra sans para los títulos y subtítulos (o al revés si el destino son las páginas web), con tamaños mayores. Esto también se puede hacer con los pies de foto, resúmenes, citas y notas, de menor tamaño, y tal vez, una letra especial para el título principal. Es una fórmula que es simple y efectiva, que evita la mezcla de diferentes fuentes de palo seco juntas o diferentes letras serif juntas, combinaciones que raramente funcionan. El autor del citado artículo seleccionó un modelo sencillo y muy general: un tipo de letra para el título en negrita y un tipo de letra normal en el texto base. Al final realizó las combinaciones, por supuesto bajo un punto de vista personal, que no necesariamente puede coincidir con el nuestro, pero es algo por donde empezar. Casi cualquier tipografía pueden ser compensadas y obligada a trabajar junto con otra en algún tipo de contexto. Cualquiera de estas combinaciones podría justificar una mayor experimentación para obtener mejores resultados. Un último consejo, conviene evitar lo que ya está muy visto. Un tipo de letra que todo el mundo usa hace que nuestros documentos sean indistinguibles, un producto clónico de los demás. Tipografía como Arial (Helvetica), Courier y Times New Roman son tan frecuentes que convierten un documento en algo anodino, sin impacto visual. Como alternativa hay otros tipos de letras que, siendo básicamente del mismo tipo, te sacarán del anonimato y aburrimiento a los textos que preparemos. Al final el resultado lo puedes observar aquí pero de modo gráfico: Pero también lo tenemos en formato PDF, que puedes descargarlo para su mejor visualización, pues esta en dos columnas: Las combinaciones son de los siguientes tipos de letras: Helvetica / Garamond Caslon / Univers Frutiger / Minion Futura / Bodoni Garamond / Futura Gill Sans / Caslon Minion / Gill Sans Univers / Caslon Bodoni / Futura Myriad / Minion Avenir / Warnock Caslon / Franklin Gothic FF Din / Baskerville Trade Gothic / Clarendon Baskerville / Univers Akzidenz Grotesk / Garamond Clarendon / Trade Gothic Franklin Gothic / Baskerville Warnock / Univers

Las 19 mejores combinaciones tipográficas

La próxima revolución será en 2011, la próxima web es de las redes sociales móviles

Son días de novedades en la web.  No solo porque ya llega Windows7, con la fácil asignatura pendiente de mejorar Vista, ni por el tema del que hablaremos en unas horas del cambio en el panorama de la Real Time Web (con Google y Bing indexando Twitter, también Facebook, en el caso del último).

Cambios, revoluciones más profundas se predicen desde el importante Web 2.0 Summit que está teniendo lugar estos días. Es en ese foro en el que cada año, la analista de Morgan Stanley Mary Meeker realiza una presentación rápida y en profundidad de las nuevas tendencias en la web:

2meeker09a

Es importante la evolución de las redes sociales móviles en un contexto general de crecimiento, de cambio, incluso, de revolución:  Tim O’Reilly destacaba en su conferencia inaugural que la revolución es comparable a la que vivimos en 2004, con la emergencia de la web 2.0.  Meeker, en el siguiente gráfico, lo reflejaba, comparando la evolución del sector a la que vivimos en 2001:

3meeker09d

Podríamos estar hablando, en definitiva, de 2011, después de la recuperación actual y gracias a la evolución de la tecnología móvil, de una nueva era en la web.

4meeker09b

Redes Sociales Móviles:

Lo vemos en el tercer punto: Las plataformas que combinen las redes sociales con la web móvil signififcarán un cambio sin precedentes en cuanto a comunicación y e-commerce:

5meeker09e

Así, según el informe, “Los dispositivos móviles evolucionarán como controles remotos para expandir servicios basados en la web en tiempo real, incluyendo servicios basados en localización, creando oportunidades y “empoderando” a los consumidores de forma disruptiva y transformadora.”

En su opinión es Apple quien lidera el cambio, con el ecosistema iphone/itouch/itunes + accesorios y servicios como el que ha experimentado un crecimiento más importante en la historia de la tecnología de consumo.  Sin olvidar la importancia, cada vez mayor y en mi opinión más sostenible a largo plazo de  la web móvil abierta, con Google Android a la cabeza.

En cuanto a redes sociales,  ¿será Facebook quien las lidere también en entornos móviles? ¿Ganará terreno Twitter? ¿Aparecerá una nueva compañía?

Foursquare parece ser una opción prometedora en ese sentido…


Estas serían, según Meeker, las principales plataformas de distribución / publicación de contenidos hoy. Resulta importante la emergencia de Demand Media, que veremos pronto con más profundidad en El caparazón:

6meeker09c

En definitiva, es posible que la próxima web dependa, pueda estar basada en el punto de encuentro entre redes sociales y telefonía móvil, sin olvidar otras tendencias, como la web semántica, la web de las cosas o la web en tiempo real, de las que hemos hablado aquí en otros momentos.

Veíamos el otro día cómo el “mobile learning” era un tópico fundamental en el próximo Online Educa 2009. Igualmente clarividentes han sido en este sentido desde àtic 2a, de cuyas jornadas os hablaré en breve y para los que intervendré el 29 de Noviembre hablando precisamente de Internet Móvil y Web 3.0.

El caparazón como mejor blog en la categoría de educación
Votar en los Premios Bitacoras.com
Medio Oficial Premios Bitacorasúltimas noticias

Compártelo

BarraPunto
del.icio.us
Tumblr
Twitter
Facebook
Google Bookmarks
Meneame
MisterWong
StumbleUpon
Technorati
LinkedIn
Wikio
Bitacoras.com
Diigo
FriendFeed
Netvibes
Ping.fm
Posterous
PDF
Print

Fuente:

http://feedproxy.google.com/~r/caparazon/~3/_z8qyMH987Q/

21 tipografías Web seguras

Los tipos de letras son uno de los bloques más importantes en la construcción del diseño Web. Un problema habitual en los tipos de letras tradicionales (Verdana, Arial,  Helvetica, etc.), es que tarde o temprano te hartas de ellas. Aunque no hay nada de malo en ellas, ya que son tres de las tipografías más seguras. Por otra parte, si utilizas un tipo de letra poco frecuente que los usuarios no tienen en su sistema, a demás de ser una opción poco profesional, al no tener control sobre lo que el usuario verá en su navegador. Por eso los diseñadores prefieren la tipografía que se ha dado en llamar segura. ¿Cuán seguras son las tipografías Web? Ese tipo de letras se ven bien en pantalla y son relativamente populares, por lo que puede asumir con seguridad que tus visitantes tendrán esa tipografía en su sistema . Por regla general esos tipos de letras vienen con el sistema operativo, y que los usuarios las tienen instaladas por defecto. Otros tipos de letras, no hay garantía de que las pueda tener instaladas en el ordenador del usuario. Incluso si esa tipografía está instalada en los ordenadores de los usuarios, muchas de ellas solo se ven bien en ciertos casos , como puede ser con ciertos tamaños , en donde aparecen distorsionadas o son ilegibles. Después de todas estas aclaraciones, necesarias para tener claro los conceptos, y saber por tanto que decisión tomar, debe tomar. Pero te ayudará en esto el artículo 21 Stunning Web Safe Fonts , de WebHostingSearch , que nos dejan una selección de tipografía segura para la Web, que están disponibles en Windows, Mac y Linux , o bien tienen sustitutos decente. Si te gusta uno, simplemente copia el código CSS que se encuentra en el recuadro azulado , y a disfrutar de su uso.

Fuente:

http://www.cosassencillas.com/2009/10/21/21-tipografias-web-seguras/

8 maneras de darle un bonito estilo a tus listas

El uso de listas en HTML ( para una lista ordenada, y para una lista no ordenada) son unos de los elementos más comunes en la Web o los blogs. Como recordatorio, aquí podemos ver una lista ordenada y otra desordenada como se ve por defecto: Elemento de la lista ordenada # 1 Elemento de la lista ordenada # 2 Elemento de la lista ordenada # 3 Elemento de lista no ordenada # 1 Elemento de lista no ordenada # 2 Elemento de lista no ordenada # 3 En el artículo 8 different ways to beautifully style your lists , de MarcoFolio , van un poco más allá de la creación de las típicas listas aburridas, y nos muestran 8 diferentes maneras de darle un bonito estilo a las listas de HTML pero esta vez utilizando los estilos CSS , para dejar de ver de una vez por todas las típicas listas. En dicho artículo nos dejan todo explicado y con toda su codificación, es muy sencillo de seguir, aunque no sepas inglés. Podemos darle un vistazo a la demo o descargar los estilos directamente. Se ve mucho mejor, esas listas con estilo ¿no? Puedes obtener esos resultados, simplemente añadiendo un par de cosas al CSS. ¿Quieres saber cómo? pues no dejes de darle un vistazo al artículo mencionado.

Fuente:

http://www.cosassencillas.com/2009/10/21/8-maneras-darle-estilo-listas/

70 juegos de iconos gratuitos para diseño y desarrollo web

Los iconos son imágenes específicamente diseñadas para transmitir un mensaje, por lo tanto un icono es más que simplemente una imagen agradable. Por esa razón, los iconos puede ser realmente hermoso cuando se emplean en un sitio web o un blog y puede poner en marcha o apoyar el proceso creativo. Hay miles de iconos gratuito que son muy buenos, pero puede ser difícil encontrar los conjuntos de iconos adecuados para su uso en diseño web.

A través del blog de Diego Mattei, me entero de una buena colección de 70 juegos de iconos para diseñadores, que además comenta que en estas recopilaciones, no verás nada que no se encuentre en otros lados, pero el tenerlas todas en un solo enlace hace que perdamos menos tiempo en su búqueda.

Nos remite al enlace 70+ Awesome Free Icon Sets and Icon Collections for Web Designers, de TripireMagazine, que son los autores de la mencionada lista sustanciosa y atractiva a 70 juegos de iconos enfocados al diseño y desarrollo web. Son gratuitos, aunque siempre es conveniente darle un vistazo al tipo de licencia de cada uno de ellos, para ver en que condiciones los podemos usar. Al final de la misma hacen referencia a varios sitios especializados en iconos.

Este artículo es una actualización de otro artículo anterior 50+ Top Free Icon Resources and Icon Sets for Web Designers, al que se han agregando más de 20 conjuntos de iconos.

70 juegos iconos 70 juegos de iconos gratuitos para diseño y desarrollo web

Fuente:

http://www.cosassencillas.com/2009/10/19/70-juegos-iconos-gratuitos-diseno-desarrollo-web/

El Futuro de las redes sociales (la web al cuadrado) en imágenes

La web 3.0, las tendencias, el futuro de la web serán temas centrales de mi intervención en Virtualeduca Buenos Aires 2009. Os hablaré en breve de ello, pero quería dejaros hoy alguno de los slides que acompañarán mi presentación.

De hecho, pensaba hablaros hoy  del pensamiento visual, de cómo parece ser el más adecuado en épocas de atención escasa, de cómo está, según Armano y en términos pedagógicos, en nuestra Zona de Desarrollo Próximo, la capacidad de expresarnos de forma visual, cuando encontraba un post que inspiraba este:

Hemos hablado de Construcción colaborativa de la realidad aumentada (o la web 3.0 social), de La web al cuadrado, de los problemas también “Aumentados” sobre privacidad en la Sociedad de la Tranparencia, del cambio absoluto del concepto en un contexto en el que, como diría Qualman en Socialnomics, deberíamos vivir la vida como “si tu madre estuviera mirando, porque probablemente lo esté haciendo” :)

Así, podemos entender el futuro de las redes sociales, o bien siguiendo los enlaces anteriores o, mediante imágenes, aquí mismo. Estas 8 os darán una clara idea de hacia dónde vamos….:

2491664795_c7891da833_o

2779381067_82bd12b4d8

2255115788_85cd262e56_o

2255115632_4a410d3eed_o

2649283945_a2c0f097d5

futuros_man_lrg_500

futuros_street_500

futuros_crowd_500

Fuente:

http://feedproxy.google.com/~r/caparazon/~3/dURm-nuD3VY/

45 fondos de pantalla duales muy bonitos

Disponer de dos monitores en tu entorno de trabajo es algo común entre los profesionales de diseño y desarrollo Web, para los que tienen esta configuración, se puede utilizar un fondo de escritorio hecho a propósito para los usuarios que tienen múltiples pantallas. Si te interesa unos buenos fondos para que puedas utilizarlos con dos pantallas, puedes darle un vistazo al artículo 45 Beautiful Dual-Screen Wallpapers , de SixRevisions . Una colección donde puedes encontrar una gran cantidad de fondos de escritorio realmente bonitos para usarlos con dos monitores. El citado artículo nos dejan una vista previa y los enlaces a la descarga de cada uno de ellos. Pero si deseas saber acerca de las herramientas que te dan la capacidad para utilizar varios monitores y ordenadores, quizás te interese leer acerca de cinco herramientas gratuitas para múltiples monitores de ordenador , en el artículo Five Free Tools for Multi-Monitor Computer Set-Ups , de SixRevisions .

See the original post:
45 fondos de pantalla duales muy bonitos

12 buenas herramientas para optimizar imágenes

Las imágenes son muy importantes porque pueden hacer que sus páginas web se ven mejor y más atractivas. Pero, las de alta calidad siempre son enorme de tamaño de archivo. Eso hace que la carga de las páginas sean más lentas y consuman más ancho de banda. Así que, los diseñadores deben optimizar las imágenes para que sean pequeñas en tamaño de archivo, pero de buena calidad. Hay un montón de herramientas de optimización de imagen útil que nos puede ayudar a optimizar y reducir el tamaño de archivo de las imágenes.En el artículo 12 Really Useful Image Optimization Tools For Web Designers , de WebDesignBooth , nos dejan 12 buenas herramientas de optimización de imagen para diseñadores web. Estas aplicaciones están disponibles en línea y en aplicaciones de escritorio : Smush.it . Es una popular herramienta de optimización de imagen que pueda reducir el tamaño de archivo de imagen, pero manteniendo la calidad, que es lo que llamamos “pérdidas” de optimización de la imagen. Puede ejecutar Smush.it a través del sitio web (5 imágenes al mismo tiempo) o mediante la extensión de Firefox YSlow . Dynamic Drive Online Image Optimizer . Nos permite optimizar diferentes formatos de archivo de imágenes (GIF, JPG y PNG). Puede cargar la imagen desde su equipo local o pegar la URL de una imagen. Esta herramienta es capaz de optimizar y convertir tu imagen a formato de archivo diferente. Las limitaciones en línea son 200KB por archivo, y un solo archivo para la conversión. PunyPNG . Comprueba en primer lugar las imágenes y luego determinar qué técnica es la mejor para que la imagen en particular. Soporta la mayoría de los formatos de archivo de imágenes más populares y determinará automáticamente el formato que te conviene. SiteReportCard Image Optimization Tool . La herramienta soporta los formatos de archivos: GIF, JPG y PNG. Puede pegar la URL de la imagen o subirla desde tu ordenador, y la herramienta de comprimir y optimizar la imagen te proporciona varios tamaños y diferentes calidades. Shrink O’Matic . Es una aplicación basada en AIR que es capaz de redimensionar la imagen sobre la marcha con solo arrastrar y soltar imágenes en él. Puede elegir opciones como los formatos de salida, su nombre o el tamaño de salida. OptiPNG . Es un optimizador avanzado de archivos PNG, que se convertirá en varios formatos de archivo PNG optimizado. Los usuarios de Windows pueden integrar OptiPNG Windows Shell Integration de Windows, o el uso como OptiPNG as Paint.NET Plugin . Mientras que los usuarios de Mac OS X puede disfrutar de la aplicación PNGCrusher . ImageOptim . Es una herramienta que combina un conjunto de herramientas de optimización de imagen. PNGOUT . Es una aplicación de línea de comando que tiene un montón de opciones diferentes. Soporta PNG, GIF, BMP, JPG, TGA y PCX. PNGGauntlet . Es capaz de convertir a JPG, GIF, TGA, PCX y BMP a PNG. JPG & PNG Stripper . Esta aplicación es capaz de eliminar los metadatos innecesarios de los archivos de la imagen. Soporta JPG, JFIF y PNG. TweakPNG . Es una herramienta de bajo nivel para la optimización de los archivos PNG. Por lo tanto, es necesario familiarizarno s con este tipo de formato con el fin de utilizar bien esta herramienta. Puedes leer más acerca de PNG en este enlace . RIOT – Radical Image Optimization Tool . Es capaz de leer y optimizar los diferentes formatos de imagen, incluso  con extensiones poco frecuentes, que lo hace único si lo comparamos con con otras herramientas de optimización de imagen. Nos muestra al lado del original, las imágenes convertidas para comparar la calidad de ellos fácilmente.

Continue reading here:
12 buenas herramientas para optimizar imágenes