Archivo de la categoría: Diseño Web

Diseño Web – Web Design

Diseño Gráfico, Diseño Web

Imagen vectorial y raster

rastervectorA menudo habremos oído hablar en el mundo del diseño gráfico de imágenes vectoriales e imágenes rasterizadas, a menudo vinculadas a programas profesionales de diseño como Adobe Illustrator o Adobe Photoshop (aunque bien es cierto que ambos tienen la capacidad de tratar ambos tipos de imagen, son específicos para cada una) así como a formatos concretos de archivos.

Vamos a aprender a diferenciar las características principales de cada uno, así como sus ventajas y los formatos de archivo que soporta cada formato:

Imagen Vectorial

vectorLas imágenes vectoriales están definidas por pura matemática, no por píxeles. Están compuestas por ecuaciones que definen una curva, una recta o una mezcla de ambas (no tenemos por qué ver los parámetros, podemos actuar desde un entorno gráfico visual) de las que podemos alterar su color, forma, etc…, por lo que si hacemos zoom en una imagen vectorial nunca pierde resolución, ideal para dibujos planos o logotipos.

Ventajas: Los archivos pesan menos, la resolución siempre es buena independientemente del tamaño y es muy fácil pasarlos a raster.

Inconvenientes: No soportan la posibilidad de tratar fotografías.

Programas: Adobe Illustrator, Adobe Flash, Corel Draw, Macromedia Freehand

Formatos de archivo: PDF, SVG, EPS, AI, DXF, CDR

Imagen Raster

rasterUna imagen raster consiste básicamente en un mapa de bits, donde cada píxel (cuadradito que compone la matriz de la imagen) tiene un color definido, como pueden ser por ejemplo las fotorafías, que al ampliarlas podemos visualizar su «pixelado». Como hemos dicho, las mejores imágenes raster son las fotografías, las cuales podremos editar o añadir filtros y efectos con los programas correspondientes.

Ventajas: Soporta con gran calidad las fotografías y resulta muy fácil tratarlas y darles efectos.

Inconvenientes: La resolución depende del tamaño del archivo o de la capacidad de la imagen, por lo que pesan mucho si son muy detalladas, además es muy difícil pasarlas a vectorial.

Programas: Adobe Photoshop, GIMP, Corel PhotoPaint

Formatos de archivo: JPG, PNG, GIF, BMP, TIF, PSD, CPT

Diseño Web, Miscelánea, Opinión, Usabilidad

Cuando el esnobismo venció a la usabilidad

Antes que nada, este post es una reflexión en torno al diseño o desarrollo web adaptado para dispositivos móviles. Para que quede claro del todo explicaremos brevemente algunos conceptos:

  1. La usabilidad es la facilidad de uso que tiene para el público común, por ejemplo, algunas de nuestras aplicaciones web o incluso teléfonos móviles.
  2. Un teclado Qwerty es el más común, recibe su nombre por el orden de las teclas de sus primeras letras, es el que utilizan los ordenadores por defecto. No es el más efectivo para escribir rápido (de hecho es posiblemente el menos efectivo de todos), pero sí es más popular, junto a sus versiones para cada idioma.

moneteOcurre que cuando eres diseñador y montas cosas para web, cada día más a menudo te encuentras con la obligación de adaptar lo que haces para dispositivos móviles, donde no te encuentras con mucho hueco para filigranas y algo llamado usabilidad se convierte en el centro de tu diseño, ahora llega la gran pregunta:

¿Por qué tenemos que pensar tanto en la usabilidad para aparatos que evolucionaron en su contra?

Un «smartphone» de por sí ya tiene nombre de consumo para esnobs, pero justificaré lo que digo antes de que penséis que los odio:

  1. Antes, hace unos años, los teléfonos móviles, antes de tener pantalla táctil, tenían a penas 15 teclas y la gente era capaz de poder escribir una parrafada sólo con introducir la mano en el bolsillo, ahora no. ¿Por qué?
    • El teclado físico daba una respuesta directa al usuario (si pulso, funciona).
    • Un teclado más pequeño permitía un más fácil reconocimiento de teclas, por contra, había que pulsar varias veces la misma tecla para que apareciese un caracter, pero lleva a pensar en lo siguiente,
  2. ¿Teclado Querty?
    • Un teclado Qwerty en una pantalla de unos pocos centímetros… ¿nadie se ha planteado nunca el por qué los teclados de los ordenadores miden un par de palmos? Es un teclado planteado para que cubra dos manos, no dos dedos. Además para que sea práctico, el aparato tiene que ser cada vez más grande.
    • ¿Por qué un teclado Qwerty y no un Dvorak? Ya que los smartphone iban a subir como la espuma, ¿por qué no implantaron un modelo mejor?
  3. Por último, aunque nada tenga que ver pero también confirma la involución, el período de vida de un teléfono móvil era de varios años, pesaban menos, ocupaban menos, el coste era asequible y la batería duraba varios días.

móvilNo pienso que todo esté perdido en una espiral ilógica, ni tampoco soy de blackberry, simplemente creo que se tenían que haber quedado en el punto en que el teclado era físico y aparecía deslizando la pantalla del móvil, así teníamos una pantalla generosa (o todo lo generosa que un teléfono debería tener como máximo para que siga cabiendo en un bolsillo sin que pese más que la cartera) en un teléfono usable.

CSS, Diseño Web

Centrar DIV horizontal con estilos CSS

Es común querer centrar nuestra página web horizontalmente, para que no quede toda alineada a la izquierda dejando un enorme espacio vacío en el lado derecho, cada día más notable por los monitores panorámicos de cada vez más pulgadas.

Ocurre que no existe ningún atributo que haga alinearse a los elementos al centro. Podremos centrar texto, sí, pero no una caja con la facilidad con la que podemos hacerlo a la izquierda o la derecha.

Para ello, se utiliza un truco que luego pasaremos a explicar, os muestro un fragmento de código de una DIV y su correspondiente estilo:

<style type="text/css">
  .centrada {margin: 0 auto; width: 800px;}
</style>
</head>
<body>
  <div class="centrada">
    <p>Este contenido está en una DIV centrada</p>
  </div>

Bien, la explicación es sencilla. Como podemos ver en el ejemplo, nuestra capa tiene como mínimo dos elementos obligatorios: «margin» (margen) y «width» (anchura).

El motivo no es otro que obligar a nuestra DIV a que tenga valor «auto» (automático) para sus márgenes izquiero y derecho, de este modo, ambos tendrán el mismo y asíconseguiremos que nuestra DIV quede centrada, no por alineación, sino porque debe estar a la misma distancia de ambos flancos de nuestra pantalla.

Para que esto sea efectivo hay que especificarle un «width» (ancho). Por otro lado, podremos añadir más elementos al CSS de nuestra DIV, como un «border«, un «background» o lo que queramos siempre y cuando no afecten a la posición de nuestra DIV.

Diseño Web

.jpg, .png o .gif, ¿qué formato elegir para mi web?

jpggifpngConsiderando la velocidad de carga como un factor esencial en una página web, ninguno de los elementos contenidos en la misma (no sólo imágenes, también los .html, .css, .js, etc.) debería pesar más de 25Kb, lo que nos obliga a comprimir al máximo cada elemento para hacerlo más óptimo.

Nuestra web no sólo mejorará en la velocidad de carga, sino también en la experiencia de usuario y en el SEO. Entonces, ¿qué formato es más conveniente para cada aplicación?

.JPG

Tiene la información de color que queramos darle con la calidad, nos dejará un «ruido» por el «defecto jpg» (omite información de color, para reduciendo calidad, reducir peso). Es conveniente tan sólo para fotografías a las que queramos reducir peso.

.GIF o .PNG-8

Comprime con colores indexados, por lo que si tenemos una imagen con pocos colores, o tintas planas. Permite una transparencia muy sencilla. Es conveniente para pequeños elementos que requieran un área transparente o para imágenes con pocos colores y sólidos.

.PNG-24

El peso aumenta, pero permite transparencias más complejas que su hermano pequeño.Es conveniente para logotipos, vectores rasterizados, tintas planas con degradados o imagenes con distintos grados de transparencia.

Recuerda:

Cuando estemos en Photoshop o Illustrator, por ejemplo, no debemos olvidar que no hay que dar a «guardar cómo», sino a «guardar para web y dispositivos«, que nos permitirá una mayor compresión (omitiendo por ejemplo los metadatos) y podremos ver cuántos nos pesará el archivo final, lo que nos permitirá comparar entre los distintos formatos. Para web nunca utilices .bmp o .tif

CSS3, Diseño Web, Tipografía

Decora tu web con tipografías personalizadas gracias a Google fonts

Google Web FontsComo el título indica, dedico la entrada al maravilloso servicio Google Web Fonts del monopolista gigante empresarial Google, otro más de los que ofrece de manera libre y gratuita, gracias al cual podremos elegir una tipografía («fuente» para los amigos y amigas de Microsoft) dentro de su muy amplio abanico de posibilidades, para después utilizarla en nuestra página web sin necesidad de recurrir a «trucos CSS» ni alojando la tipo en nuestro servidor.

Para elegir seleccionamos la familia tipográfica, introducimos un texto modelo para visualizar el resultado y vamos escarbando en el listado. La aplicación nos permite trastear con determinados estilos, ver si dispone de tildes o ver cómo resultaría en un párrafo de texto corrido, incluso podremos seleccionar varias para comparar su uso.

¿Cómo incluyo las tipografías en mi web?

Google web fontsPara poder utilizar las fuentes a penas hacen falta unas nociones muy básicas de web. Cuando hemos seleccionado la o las tipografías que nos gusten, nos dará tres opciones:

  1. una simple línea de HTML con la etiqueta LINK para incluir en el HEAD
  2. un @import para incluir en nuestra hoja de estilos CSS
  3. un código JavaScript (viene con las etiquetas <script> para meter en el HEAD, pero puede apartarse a un .JS)

Mi consejo es utilizar la primera opción y no complicarnos la vida.

Como nuestra web ya tendrá localizado el elemento correspondiente a nuestra tipo de Google APIs, solo nos quedará asignar el estilo correspondiente a aquellos elementos que deseamos que aparezcan con la tipografía pertinente. Por ejemplo, si queremos que los títulos H1 tenga nuestra tipo escribiremos lo siguiente en nuestro CSS:

h1 {font-family: 'nuestratipo', sans-serif;}

Este código también nos lo facilitará Google, después lo aplicaremos al gusto.

Ventajas

page load

  1. Primero y ante la principal desventaja, que es lo que pueda tardar en cargar desde Google APIs mientras se carga nuestra web, la propia aplicación incluye un pequeño reloj que nos indica la repercusión que tendrá en la velocidad de carga
  2. Ahorraremos dolores de cabeza a la hora de incluir tipografías completas, antes era más caótico
  3. Es más cómodo para el cross-browser, solo deja de funcionar en navegadores desactualizados
  4. Evitaremos convertir textos en imágenes para subir títulos, mejorando la velocidad de carga, el SEO y ahorrándonos esfuerzo
  5. No ocupa espacio adicional en nuestro servidor (y el de Google no se cae (o sí, pero menos que el nuestro) y tiene un ancho de banda buenísimo)
  6. La exclusividad que supone tener elementos poco convencionales en nuestro espacio web

Estamos en Julio de 2012, seguro que el servicio sigue madurando (y como nos descuidemos lo integran en Google+), así que como última ventaja añadir que está en continuo desarrollo, cada vez hay más tipografías y mejor experiencia de usuario.

Dominios, Opinión, twitter

¡cuidado! ¡short links! (enlaces acortados)

bitlyDesde hace a penas unos años se popularizó un servicio web que existe desde hace muchos más, que es el acortador de URLs (URL shortener).

Todo empezó con TinyURL pasando por tiny.cc, is.gd, etc… y llegó a su máxima popularización de la mano de bitly (antes bit.ly), debido a su ahorro de caracteres y más importante aún, su potente analítica (de gran utilidad para hacer un seguimiento sobre la publicación de un enlace en algún medio determinado sin tener que etiquetarle para Google Analytics), pero si me preguntan cuál es el 90% de la razón de su éxito, diría que Twitter (quien tiene su propio acortador t.co). Ahora haremos un análisis de lo que nos compete.

Motivos para acortar un enlace

  1. Se ve más corto
  2. Si es «oficial» como un «t.co» o un «youtu.be», además se sabe que es confianza (y te lo dan ya hecho)
  3. Con algunos como bitly, por la analítica (por ejemplo, sabrás cuántos clics y de qué procedencia obtienes)

Motivos para NO ACORTAR un enlace

  1. En twitter ya no hace falta
    • Acorta automáticamente todos los enlaces que se le escriben
    • Aunque lo acorte, muestra el dominio de procedencia original del enlace, genera confianza
  2. Si el enlace es tuyo, perderás tu dominio por una redirección
    • Hay formas de acortar con tu propio dominio
    • Puedes etiquetarlo y ver las estadísticas con Analytics
  3. Copiar y pegar directamente es más rápido y cómodo que pasarlo por el acortador

Motivos para NO HACER CLIC en un enlace corto

  1. No hay forma de saber realmente qué contiene hasta que no lo pinchamos
  2. Twitter permite que cualquiera usando un HT o término de búsqueda popular pueda llegar a un público masivo, sean o no amigos y/o seguidores. Gracias a ello y bajo un titular atractivo puede colar el enlace acortado. ¿Dónde llega el problema?
    • Pongamos que el desconocido A, publica un tweet con un enlace acortado, que lleva a:
      1. en el mejor de los casos, a una ruta con publicidad, que al cerrarla abre un pop-up y nos lleva a donde el tweet prometía
      2. en el peor de los casos, a una ruta desconocida que ejecuta un script maligno y luego nos redirecciona a donde el tweet prometía:
        • usuarios de PC repetid conmigo: ¡HOLA VIRUS! (o troyano, spyware, etc. o como se llame, no soy experto en seguridad, pero cuidado con los enlaces acortados)

Consejo #1: «No hacer clic sobre un link acortado que no sea de confianza»

y ya.

Diseño Web, Dominios, Hosting, Opinión

¿Buscas servidor/hosting para tu web?

hostingEl blog ha estado caído durante unos días y posteriormente ha sido redirigido a otro blog montado sobre WordPress también llamado AvispaVerde pero sin mi plantilla y sin contenidos. Todo ha sido resultado de las pruebas de servidores compartidos que estoy realizando con diferentes proveedores y de los que os hablaré ahora un poco.

Les pongo una valoración personal en ***** de 1 a 5, como los hoteles. Va enfocado a servidores compartidos para montar una web personal, blog, pequeños proyectos, webs de PYMES, etc…

Abser Hosting (extintos) ****

Eran mi primer proveedor para esta web, funcionaban de maravilla y tengo un espacio suficiente con una MySQL para llevar este WordPress por un precio increíble, además gente muy maja que hasta me ofrecieron una visita a sus instalaciones y, al ser desarrollador web, opciones personalizadas si alojaba a clientes en sus servidores (al trabajar en empresa no me dedico por mi cuenta, por lo que no seguimos adelante, pero decía mucho de su parte).

Ocurre que fueron «abservidos» (lo sé, el chiste es terrible) por InforTelecom en noviembre de 2011, por lo que su desaparición no afecto a mi alojamiento, hasta que llegó el momento de la renovación, que ahora os cuento.

InforTelecom ****

infortelecomActual proveedor, he renovado con ellos porque me han mantenido los más que increíbles precios de Abser Hosting, pero si no lo hubiesen hecho no hubiese renovado, he de decir que para un servidor compartido son caros, en concreto más caros que el más popular proveedor en España, Arsys, lo que hubiese sido un error ya que hay que decir que el servicio postventa y técnico de InforTelecom le da mil vueltas a todos los que he visto antes, de los que les estoy verdadera y sinceramente agradecido.

Por otro lado, he comprado un dominio sin alojamiento con ellos: pablodelcerro.es, para tener un pequeño bio, currículum y portfolio. ¿Por qué sin alojamiento? Porque me dejan asignarle una DNS y tener el alojamiento donde quiera, cosa que por ejemplo en Piensa Solutions me negaron hace unos años y que creo que Arsys también te niega, el alojamiento compartido con ellos o con nadie. Los dominios .es los tienen más baratos que Arsys. Pues el alojamiento de ese dominio le tengo con Freehostia.

Piensa Solutions **

Hace unos 5 años (hablo de algo bastante pasado) me regalaron un «.es». Para alojamiento debía elegir entre una lista limitada de proveedores, entre ellos los baratos Piensa Solutions. En servidor compartido, claro. Soy una persona que suele saber sacar partido a lo barato y que jamás ha pensado que cuanto más caro mejor, pero creo que me salieron baratos porque la web (un WordPress) cargaba lento, tenía caídas de vez en cuando sin previo aviso y una serie de cosas que han hecho que en estos últimos 5 años ni siquiera les tome como opción.

Freehostia ***

chocolateQue no significa Hostia Gratis, sino Alojamiento Gratis, que no está nada mal. Por supuesto que no viven de los regalos y te ofrecerán más espacio, más bases de datos, registro de dominios, mejores condiciones, etc. Hay que decir que su plan «chocolate» lo firmas como un contrato anual que te sale por 0€, como si de cualquier proveedor se tratase, alejándose del concepto cutre que tenemos todos los alojamiento gratis. El FTP va lento y con un WordPress instalado va bien de sobra, no se cae y va ligero, aunque evidentemente para poner una bio, currículum etc.. web ligerita en php con algo de js y espero que vaya como las balas, como mínimo, el año que tengo «contratado» con ellos. De momento la mejor solución de alojamiento gratuito que he encontrado en años.

Los planes de pago no tienen mala pinta y su portal de cliente es majo, sencillo y limpio, pero tendrás el alojamiento muuuuy lejos de casa.

Arsys ****

Poco diré, ya se habla mucho de ellos en la web. He comprado un alojamiento compartido sin MySQL con programación PHP en periodo de promoción que va de maravilla por una miseria, justo lo que necesitaba para un proyecto personal que ya iré contando. Además me han regalado un dominio «.es» de por vida. Ninguna queja para servidor compartido baratito y que no de problemas

Por otro lado, en el trabajo con los servidores dedicados no todo es gloria y el servicio postventa no es tan bueno como el de Infortelecom.

CSS3, HTML5, Miscelánea, Opinión

9 motivos para no utilizar Internet Explorer

No a Internet ExplorerLa cruzada que tenemos los diseñadores y desarrolladores web contra Internet Explorer no viene de una manía irracional, sino que está basada en decenas de malas experiencias que después el usuario no ve, pero que también sufre.

Voy a exponer algunos de los motivos principales por los que el usuario común de internet no debería utilizar Microsoft Internet Explorer:

  1. Existen mejores opciones, gratis, fáciles de instalar y que ocupan muy poca memoria, como Google Chrome, Mozilla Firefox u Opera, incluso Safari, el navegaor de Apple. Todas son mejores, mucho más valoradas, más ágiles, ocupan menos.
  2. Cada actualización es un producto ya obsoleto, tratando de imitar las mejoras de sus competidores, arriba enumerados. Nunca innova, siempre llega tarde.
  3. Sus plugins también nacen obsoletos o son incómodos, bien para intentar emular las características de las que carece respecto a otros navegadores, o bien son molestas barras de herramientas de publicidad.
  4. Es tremendamente lento, al menos considerablemente más que los demás.
  5. No soporta debidamente HTML5, retrasando el progreso en desarrollo web.
  6. No soporta debidamente CSS3, retrasando el progreso en desarrollo web, de nuevo.
  7. No es software libre
  8. Limita su uso a usuarios actualizados en su sistema operativo. En caso de utilizar, por ejemplo, Windows XP, no podrás actualizar Internet Explorer a nuevas versiones.
  9. Las personas que nos dedicamos a esto por profesión no se lo recomendaríamos ni a nuestros enemigos. Si confías en profesionales, rechaza Internet Explorer.
CSS3, Diseño Web, jQuery, Miscelánea

¡Felices fiestas!

Os dejo con un jQuery de copitos de nieve con un poco de CSS3 de texto sombreado e imagen con efecto fotografía, y así de paso, felicito las fiestas. Recordamos que si no ves la felicitación correctamente, es porque utilizas un navegador bochornosamente anticuado. Más adelante, tutorial y descarga:

Diseño Web, Miscelánea

¿y si buscamos «let it snow» en Google?

defrostAyer Google volvió a sorprendernos con un efecto invernal al realizar una búsqueda, «let it snow», como la canción que recuerdo en boca de Sinatra, y seguro que dejándose llevar por la época navideña, podéis verlo en el enlace:

Podemos ver como empezamos a ver caer copos de nieve mientras la pantalla se empaña hasta que quede todo blanco, entonces el botón de búsqueda cambiará por un «defrost», que limpiará la pantalla, pero la nieve no dejará de caer, entonces ya podremos hacer clic en nuestro vídeo de Sinatra:

Por otro lado, a diferencia del efecto producido con la búsqueda de «do a barrel roll«, esta vez no es puro HTML5, sino que es un script, por lo que aparentemente se puede ejecutar en todos los navegadores (aparentemente porque aún no le he probado).