Archivo para ‘Varios’ Categoria

Diseño Minimalista de páginas Web – ¿Por qué menos es realmente más?

4 de Septiembre de 2012

El dicho de que menos es más se ha aplicado a todo, desde arte a la publicidad. Cuando se trata de diseño web, nunca ha sido más cierto de lo que es hoy en día.

Con toda la tecnología de vanguardia y tantos y fabulosos gráficos para elegir o crear, a menudo los diseñadores quieren tirar de todo lo que puede para crear un sitio web.  El resultado, más que impresionante, suele ser caótico. No hay ningún centro de coordinación o de fácil uso incluso para localizar barra de navegación, el usuario se confunde y a menudo son incapaces de navegar por el sitio fácilmente o les es imposible. Se van y el propietario del sitio web pierde no sólo un visitante, sino un posible cliente.

Un sitio web minimalista, por otro lado, ofrece a los usuarios un sitio web que es fácil de usar y de navegar. Con una buena página web de diseño minimalista, los visitantes pueden fácilmente y rápidamente encontrar exactamente lo que estás buscando. Encontrar un sitio como este es como encontrar un oasis en medio del desierto.

Piense en Google, por ejemplo. Simple, básico y muy eficiente. Nada podría ser más fácil de usar? Es el perfecto ejemplo de cuán eficaz puede ser un sitio web minimalista.

Los sitios web minimalistas pueden ser muy bellos cuando están bien diseñados y rezuman clase. Gran color y gráficos lo suficiente combinados con la cantidad correcta de los espacios en blanco hacen un sitio menos ocupado, por lo que es más sencillo para un visitante para navegar. Es un calmante y refrescante cambio para un usuario, y hace que el sitio se aprecie y quieran visitarlo a menudo.

Este contenido ha de ser claro y conciso. Si bien todos hemos escuchado que el contenido es el rey, esto no significa que tengan que haber toneladas y toneladas de contenido, especialmente si se tiene poca sustancia. La información que es de fácil acceso y, precisamente por escrito es mucho más eficaz que tenga demasiado contenido para cribar a encontrar la información necesaria.

Algunos diseñadores, por desgracia, pasan por alto esta necesidad para una navegación fácil. El esfuerzo para obtener o encontrar lo que buscas está agotador y por lo general no vale la pena el esfuerzo.

Sin embargo una precisión mínima ofrece a los visitantes muchos beneficios, principalmente la ventaja de ser capaz de leer en la pantalla la información sin demasiados elementos que compiten por su atención.

GIF, JPEG y PNG (4)

1 de Agosto de 2012

¿Cómo saber si una imagen es adecuada para el formato GIF o PNG ?
Al guardar una imagen para la Web, es mejor utilizar una imagen de paleta que una imagen en color verdadero. Esto es porque cada píxel de una imagen de paleta utiliza en la mayoría un tercio del ancho de banda de un píxel de una imagen en color verdadero.

Esta paleta tiene un máximo de 256 colores. Por lo tanto, una buena regla general es mirar bien la imagen y tratar de decidir si se reduciría a 256 colores o menos en un sentido favorable. Cuando vayamos a tomar esta decisión, recordemos que cualquier gradiente suave en color o borde liso en sombreado, tendrá que ser dividido en bandas de color, y cada uno de estos grupos tendrá una entrada de la paleta. Con un poco de práctica, resulta fácil saber si una imagen se verá bien como un GIF o PNG.

Si una imagen es natural, como una fotografía, tendrá un gran número de colores arbitrarios. En este caso, no es probable que vea bien como un GIF o PNG, a menos que sea muy pequeño.

GIF, JPEG y PNG (3)

6 de Junio de 2012

Puntos fuertes: Tamaño, y gama de colores.
JPEG es un formato muy bueno para la compresión de imágenes de aspecto natural. El nivel de calidad de un archivo JPEG puede ser seleccionado por el usuario cuando se crea el JPEG, lo que permite un compromiso entre el tamaño del archivo y la calidad de imagen.

Como JPEG utiliza los colores naturales, en lugar de una paleta, es muy adecuado para imágenes que contienen los gradientes de color suave o natural, con texturas y patrones, como los que se encuentran en la vida real. Sobresale JPEG cuando se utiliza para fotografías, en las áreas de color  suaves y naturales.

Debilidades: compresión, la velocidad y la falta de transparencia.
La compresión JPEG no es perfecta. De hecho, con algunos tipos de imágenes está lejos de ser perfecta. Como algoritmo de compresión con pérdida,  podemos encontrar algunos defectos leves en la imagen descomprimida. Si la compresión JPEG se utiliza correctamente, y en las circunstancias correctas, podemos lograr que no se note en absoluto.
Utiliza un algoritmo de compresión más sofisticado y, naturalmente, esto toma un poco más de tiempo para calcular. Esto no suele ser un problema. Una ligera desventaja de JPEG es que no es capaz de incluir áreas transparentes.

Perfección en PNG
Si se utiliza correctamente, una imagen GIF o PNG siempre haremos lo que deseamos. En primer lugar, tenemos que asegurarnos de que la imagen que estamos usando es la adecuada para el formato.

GIF, JPEG y PNG (2)

3 de Mayo de 2012

¿De qué sirve un archivo GIF o PNG?
Puntos Fuertes: Velocidad, nitidez, color sólido y transparencia.

Debido a que el algoritmo de compresión utilizado por el GIF y PNG es mucho más simple que el utilizado para JPEG, se tarda menos tiempo para descomprimir y ver.
La imagen puede ser descomprimida, editada y re-comprimida, y seguirá siendo tan aguda como el día en que fue creada.

GIF y PNG son de transparencia binaria. La transparencia binaria permite que cada pixel en la imagen sea completamente opaco, o completamente transparente. Esto puede ser útil cuando la imagen se vuelve a utilizar en frente de un número de diferentes orígenes.

PNG amplía la funcionalidad del GIF. Mientras que las imágenes GIF se limitan a paletas de colores de un máximo de 256 colores, PNG admite imágenes en color verdadero. PNG también soporta otro tipo de transparencia exigida, transparencia alfa, en el que cada píxel puede tener un color y un cierto grado de transparencia, permitiendo la presentación de antecedentes por parte de las zonas. Hay algunos inconvenientes de estas características adicionales PNG, que veremos a continuación.

Si bien el apoyo de imágenes PNG en los navegadores ha sido baja en el pasado, las imágenes PNG ahora pueden usarse con seguridad en todos los navegadores modernos, como Microsoft Internet Explorer (4.0b1 y versiones posteriores, Mac y PC), Mozilla, Netscape (6.0 o posterior) , Quimera (2.0 o posterior), y Safari. Netscape 4.04 soporta PNG, pero sin transparencia.

Debilidades
Prácticamente todas las debilidades del formato GIF o PNG se pueden atribuir a dos factores: el tamaño y las paletas.

El tamaño es una desventaja evidente. GIF y PNG no son buenos para la compresión compleja de imágenes naturales. A menos que una imagen haya sido especialmente optimizada para este formato, una imagen muy grande puede tardar hasta 2 a 10 veces el espacio de un JPEG de la misma zona. Por ello, GIF y PNG son típicamente restringidos a las pequeñas imágenes en la Web.

Las paletas, cuando se utilizan en una imagen de la Web, pueden ser de gran beneficio. Sin embargo, si no se utilizan bien, pueden ser una pesadilla. Si la imagen GIF o PNG contiene un degradado suave o un borde liso, debemos dividir esta zona en un número finito de colores diferentes para encajar dentro de los límites de una paleta de 256 colores.

El apoyo de PNG en el navegador Internet Explorer de Microsoft tiene fallos, y aún no es capaz de mostrar transparencia alfa como se pretendía. Además de esto, utilizando un verdadero formato de imagen el color o la transparencia alfa de una imagen consume mucho más ancho de banda, por lo que es poco práctico para el uso en Internet. Por el momento, PNG se pueden utilizar con bastante seguridad con imágenes de paleta, como un GIF.

GIF, JPEG y PNG (1)

5 de Abril de 2012

Si bien no son absolutamente necesarias para la funcionalidad del sitio web, las imágenes ayudan a mejorar el aspecto de un sitio. Con una buena calidad de imágenes altamente optimizadas, puedes darle a tu sitio el borde que necesita para dejar una impresión duradera.

En las Webs de hoy en día, GIF, PNG y JPEG es lo más común y está ampliamente apoyado por los formatos de archivo de imagen. Pero que se debe utilizar? Bueno, esta pregunta es imposible de responder sin algunas consideraciones adicionales. Aquí veremos algunas de las diferencias importantes entre GIF, PNG y JPEG, y discutir cómo se puede obtener la mejor calidad de todos sus gráficos.

La lucha entre el GIF y PNG

GIF y PNG son ideales para la compresión de los gráficos que contienen áreas planas de color liso, así como de texto.

El formato de archivo GIF, creado por Compuserve en 1987, fue diseñado para dar cabida de información de la imagen en el menor espacio posible. Utiliza un algoritmo de menos pérdida de compresión (LZW) nada raro hoy en día. Los colores de un archivo GIF están indexados en una paleta. Originalmente, las pantallas de gráficos por ordenador sólo puede mostrar un cierto número de colores a la vez, debido a la memoria y la velocidad.

PNG
El formato de imagen PNG fue desarrollado como el sucesor del formato GIF. La sigla original proviene de las palabras “PNG’s Not GIF”, aunque el formato es ahora mas conocido como el formato Portable Network Graphics.
PNG admite un algoritmo de compresión más eficiente que el GIF, está libre de patente, es capaz de almacenar más formatos de imagen. Al guardar idénticamente GIF y PNG, el archivo PNG resultante será del 5% a 20% más pequeño que el archivo GIF.
Desde el punto de vista de un artista gráfico, el formato PNG es casi idéntico al formato GIF, sin embargo, ofrece una mejor tasa de compresión y soporta nuevos formatos GIF que no apoyaba.

Como las técnicas para trabajar con imágenes GIF y PNG son tan similares, vamos a hablar de ellos como si se tratara de un solo formato. Las técnicas para crear imágenes GIF y PNG son básicamente las mismas.

JPEG
JPEG es ideal para los gráficos derivados de las fotografías, ya que es muy eficiente en la compresión de imágenes de aspecto natural.
Utiliza un algoritmo de compresión más complejo que la imagen GIF y PNG, y requiere una mayor comprensión.
JPEG utiliza realmente un “algoritmo con pérdida”. Busca áreas, los patrones y colores, en lugar de limitarse a describir cada píxel por separado. El algoritmo de compresión real se basa en una transformada discreta del coseno (DCT). Esta transformación matemática es similar a los algoritmos utilizados actualmente en el sonido de películas cinematográficas, de vídeo DVD, y el audio MP3 común.

Cómo encontrar los código o direcciones URL de las imágenes de tu web

14 de Noviembre de 2011

Aprende a encontrar el código de la imagen o la URL de las imágenes y luego agregar el código de la imagen a tu página Web.

Busca la imagen en tu web.
Haz clic con el botón derecho sobre la imagen y selecciona Copiar la ruta de la imagen.
Una vez que tengas la URL de la imagen, puedes agregarla al documento HTML.

<img src = ”

Pegar en la URL.
Type:

“alt =” Tu texto alternativo “>

Carga tu página web y prueba en el navegador
Tu código de la imagen final se verá algo como esto:

<img src=”URL” alt=”alternate text”>

Consejos:
Los atributos de anchura y altura no son necesarios en las imágenes, pero nos ayudan a cargar más rápido. Si sabemos las dimensiones de nuestra imagen, debemos incluir los atributos height = “” y width = “”.

Por ejemplo:

<img height=”300″ width=”200″> src=”imagen.gif” alt=”image”

Texto alternativo: Describe tu imagen en el atributo alt. Si la imagen tiene un texto en el mismo, el texto alternativo debe decir lo mismo que la imagen.
Dimensiones: El ancho de la imagen y la altura se definen en píxeles, pero no incluyen el “px” en su anchura o la altura de los atributos. Utilizar siempre las dimensiones exactas.

¿Cómo conseguir tablas al estilo Excel solo con CSS y con CSS y jQuery?

24 de Abril de 2011

PLAN A: Solución CSS

La solución CSS solo tiene lugar si los anchos de las columnas de la tabla tienen una dimensión fija y siempre será así. En caso contrario, hay que aplicar el plan B (con jQuery).

Para poder conseguirlo, debemos dividir la tabla haciendo buen uso de THEAD, TBODY y TFOOT (en caso de ser necesario). Yo no lo voya usar, por simplificar esto, pero el método a aplicar es exactamente el mismo. Aunque, expresamente indico que solo tendría sectido aplicarlo si se requieren especificar la sumatorias de totales, promedios, etc. Pero que sean valores que dependan de las columnas de contenido. Porque de otro modo, es más fácil aplicar una solución fuera de la tabla. Bueno, sin más preámbulos, paso a indicar la estructura de la tabla:

Screen shot 2011-04-24 at 11.40.46

Hay que fijarse que he aplicado la misma clase para los TH del THEAD que para los TD del TBODY. Lo importante es que los anchos de las columnas sean los mismos tanto en el THEAD como en TBODY de la tabla.

Para poder llevara acabo el scroll, haremos servir algo bastante lógico en CSS: el overflow. Hay que tener en cuenta que para poder aplicar esta propiedad, el contenedor sujeto debe de ser un bloque (display:block). He aquí el motivo de los problemas con las columnas que no tengan un ancho definido, dado que las mismas las distribuye el mismo navegado dinámicamente en función del espacio que debe ocupar la tabla y la celda.

Repito: Hay que tener en cuenta que en efecto esta solución no tiene sentido si se aplican tablas con ancho 100% o que hayan celda(s) sin ancho definido.

PLAN B: Solución CSS + jQuery

Bueno, primero, preguntarse por qué no solo con CSS. Pues, básicamente porque CSS resuelve buena parte del problema. Sin embargo, para poder aplicar un THEAD fijo, debemos modificar el objeto de tal modo, que el THEAD con sus repsectivos TH pierde la referencia de los anchos proporcionados por los valores de los TBODY>TD. Siempre y cuando estos valores no hayan sido especificados por CSS.

Indico la estructura de la tabla y estilos básicos, teniendo en cuenta que la estructura es casi idéntica a la del Plan A, con la diferencia de que las columnas no tendrán un tamaño definido.

Screen shot 2011-04-24 at 11.25.03

Screen shot 2011-04-24 at 11.23.08

Con esta base, veríamos que el scroll funciona correctamente, pero algo sucede con el THEAD. Al definir su propiedad display:block, perdemos la referencia de anchos del TBODY que dinámicamente han quedado dispuestos por el navegador, en función de la cantidad de texto ocupado por la celda, ancho de la tabla y ancho de las celdas, si existe alguno definido.

En pocas palabras, todo funciona a excepción de la disposición de elementos del THEAD. Así pues la solución al caso sería sencilla: Aplicar los mismos anchos que tengan los TD del TBODY a los TH del THEAD. Hay que tener en cuenta que no es posible aplicarla con estilos CSS. Porque necesitamos conocer cuál ha sido el ancho que dinámicamente se le ha asginado a cada celda el navegador. Lo que depende de muchos factores, todos ellos girando alrededor de si la tabla tiene un ancho definido al 100%, no tiene ancho definido o tienen sus celdas algunos anchos definidos.

Uso jQuery para poder :

Screen shot 2011-04-24 at 11.54.01

Y en efecto, esto debería funcionar, si no fuera porque en el ejemplo, no he aplicado el reset de estilos CSS, con el que no habría margin ni paddings deginidos en el objeto tabla. Así pues, esto planteado tal cual, sin reset, falla. Pero, ¿por qué? Porque el margin y el padding en el método width() de jQuery no se incluye.

Podríamos usar este otro método outerWidth() que jQuery nos provée en versiones posteriores a la 1.2. El cuál sí nos devuelve el ancho del objeto tenienedo en cuenta el padding y el margin que haya definido.

Screen shot 2011-04-24 at 12.01.20

Hay que tener cuidado con los paddings y borders. Son los mayores causantes de problemas.

Top Programas de gráficos Web para Macintosh

8 de Abril de 2011

Cuando se trata de seleccionar un programa de gráficos Web, hay tantas opciones que a menudo puede ser difícil determinar qué programa es el adecuado. Si bien la tendencia es querer ir siempre a buscar el más popular, no siempre es la opción más adecuada para las necesidades de cada persona.

1. Adobe Photoshop
Photoshop es uno de los programas disponibles más avanzados y versátiles, y los desarrolladores de webs siempre quieren tener Photoshop en su arsenal de herramientas. Photoshop ofrece herramientas y funciones para la creación de animaciones GIF, imágenes, optimización de corte, procesamiento por lotes y automatización. Se integra perfectamente con otros productos de Adobe como Illustrator, Dreamweaver, Fireworks, Flash, y GoLive.

2. Adobe Fireworks
Fireworks se ha desarrollado desde cero específicamente para satisfacer las necesidades de los profesionales del diseño web. Fireworks tiene características de estrecha integración con otros productos de Macromedia como la herramienta de animación vectorial, Flash y Dreamweaver.  Fireworks sólo es capaz de trabajar en el entorno de color RGB, por lo que no es una opción apropiada para trabajar con imágenes destinadas a la impresión comercial. Fireworks se integra perfectamente con otros productos de Adobe como Illustrator, Dreamweaver, Photoshop y Flash.

3. Stone Studio
Esta suite de diseño web para Mac OS X incluye Create, PhotoToWeb, PStill, GIFfun, Slice & Dice, Pack Up & Go, y TimeEqualsMoney. Create es el principal componente de diseño web y se puede comprar por separado. Ofrece herramientas de texto, dibujo, efectos, producción automatizada de la página web, desarrollo de contenidos, y las características de diseño de la página. PhotoToWeb te permite crear álbumes web de fotos y presentaciones de diapositivas. GIFfun crea banners animados. SliceAndDice crea mapas de imagen y barras de navegación.

4. Adobe Photoshop Elements
Photoshop Elements está construido alrededor de los elementos básicos de la interfaz de Adobe Photoshop sin las características de la gama alta. Elements es principalmente una herramienta para edición de fotos, procesamiento y mejora, pero también puede funcionar para la creación de gráficos Web, tales como botones, banners, animaciones y galerías web para su uso personal y empresarial. Está diseñado principalmente para los fotógrafos aficionados,

Definir los principios de diseño a través de la metáfora o alegoría.

20 de Marzo de 2011

Lección 1

En general, todos los principios de diseño se aplican a cualquier cosa que se pueda crear.
Rara vez hay una sola manera correcta de aplicar cada principio.

Balance
Tratemos de caminar una larga distancia con una bolsa de 2 kilos de rocas en una mano y una bolsa
de 10 kilos de canicas en el otro. Después de un tiempo querremos hacer un cambio en nuestras bolsas
poniendo unas pocas canicas en la bolsa de las roca para balancear la carga, y que sea más fácil
caminar. Así es como funciona el equilibrio en el diseño. El equilibrio visual proviene de elementos
de la organización en la página de modo que ningún sector es más pesado que el otro. En caso contrario
el diseñador puede lanzar intencionalmente elementos fuera del balance para crear tensión o un estado de ánimo.

Proximidad / Unidad
Observemos a un grupo de personas en una habitación. A menudo se puede aprender mucho acerca de quién está
escuchando atentamente, los que parece que no están, o los que tienden a ignorar
dependiendo de lo cerca que estén sentados o bien de pie.
En el diseño, la proximidad o cercanía crea un vínculo entre las personas y entre los elementos
de una página. La unidad también se logra mediante el uso de un tercer
elemento para conectar partes distantes.

Alineación
¿Imagináis lo difícil que sería encontrar vuestro coche en un estacionamiento lleno de gente si todo el
mundo ignorara las rayas del estacionamiento y se estacionaran en todas direcciones y en cuaquier ángulo?
La alineación pone orden en el caos, en un estacionamiento y en un pedazo de papel.

Repetición / Coherencia
¿Qué pasaría si las señales de stop fueran de color rosa, amarillo en círculos, triángulos o verdes,
dependiendo de los caprichos de una ciudad o de sus residentes? Imaginemos los atascos
de tráfico y los accidentes a que eso llevaría . La repetición de elementos de diseño y el uso conlos
de forma segura.

Contraste
Imaginemos que estamos en un partido de baloncesto, un equipo profesional se parece mucho a otro.
Pero si enviamos a algunos de estos jugadores a dar un paseo por cualquier calle de la ciudad,
algo se hará evidente – los jugadores serán mucho más altos que el hombre promedio en la calle.
Eso es contraste. En el diseño, grandes y pequeños elementos, como el blanco y negro, cuadrados o círculos,
pueden crear un contraste.

Espacio en blanco
¿Alguna vez te has metido en un coche en pleno verano con otras 10 personas?
Si te ha tocado estar en la parte inferior, seguramente lucharás a codazos por llegar
a la ventanilla y obtener un soplo de aire fresco. Realmente no es cómodo, ¿verdad?
Los diseños que tratan de meter demasiado texto y gráficos en la página no nos hacen sentir cómodos
y además nos serán imposibles de leer.
El espacio en blanco le da al diseño un espacio para respirar.

Reducir el tamaño de las fotos para su uso en la web

6 de Marzo de 2011

En primer lugar hay que recortar la imagen para eliminar partes innecesarias. Después, podemos cambiar las dimensiones en píxeles para generar una imagen más pequeña.

Cualquier software de edición de fotos tiene un comando para cambiar las dimensiones en píxeles de una imagen. Lo podemos buscar en “Tamaño de imagen”, “Cambiar el tamaño,” o “Volver a muestrear.” Cuando se utiliza este comando se presenta con un cuadro de diálogo para introducir los píxeles exactos que deseamos utilizar.

Nunca, cambiaremos el tamaño o sobrescribiremos en el archivo original.
Después de cambiar el tamaño de la imagen, nos aseguráremos de hacer un Guardar como para no sobrescribir el archivo original y lo guardaremos como un archivo JPEG.

Al elegir el nivel de compresión, mantendremos la calidad en la gama media alta.
Trataremos de no sobrepasar los 100 KB por página Web en total de imágenes.

Esto puede sonar como un proceso que consume tiempo, especialmente si tenemos un montón de fotos para compartir, pero afortunadamente la mayoría de softwares actuales permiten comprimir un lote de fotos rápidamente. Algunos programas  incluso pueden cambiar el tamaño, comprimir, y generar galerías completas de fotos para su publicación en la Web. Y hay herramientas especializadas para ambas tareas – muchos de ellos de software libre.