Diseño de páginas web en Bilbao y Bizkaia

ConvertImage, una alternativa a Photoshop

  • 1
Convert Image

ConvertImage, una alternativa a Photoshop

En Internet siempre hay alternativas para los que no saben utilizar Photoshop o no se pueden permitir pagar su licencia. Una de ellas es ConvertImage, un editor de imágenes gratuito que es como un pequeño cajón de sastre donde puedes encontrar casi de todo. Esta página web ofrece múltiples utilidades de retoque fotográfico, y todas ellas sin tener ningún conocimiento de edición y a golpe de click. Interesante, ¿verdad?

Convert ImageUna de sus principales aplicaciones, como indica su nombre, es convertir una imagen a diferentes formatos. Para ello sólo tenemos que marcar el formato deseado (JPG, PDF, PNG, BMP, GIF, ICO, PSD, TIF o PCX) y seleccionar la imagen. Tan fácil como eso. Pero ConvertImage tiene muchas más herramientas online. Su variado repertorio de gadgets nos permite:

  • Comprimir fotos a JPEG (una opción más para optimizar la velocidad de carga de nuestro sitio web).
  • Crear un favicon de 16×16 px.
  • Crear fotos de carné o pasaporte (8 imágenes de 10×15 cm), para lo que sólo tienes que subir una foto de tu cara.
  • Aplicar filtros y efectos artísticos: blanco y negro, sepia, pop-art a lo Andy Warhol, vieja pantalla de televisión, dibujo a lápiz, etc.
  • Redimensionar, recortar, reflejar y girar la foto.
  • Añadirle una marca de agua.

ConvertImage no es ni pretende sustituir a programas como Photoshop o Gimp, pero es una alternativa interesante para quien no se maneje bien con los programas de retoque fotográfico o para quien quiera aplicar un estilo rápido.


  • 0
Diseño Web viejuno, avances en desarrollo de páginas web

Diseño web viejuno: elementos web que quedaron obsoletos

Etiquetas :

Categoría : Diseño Web

Hoy me siento nostálgico y me apetece echar una mirada al pasado. ¿Recordáis cómo eran las páginas web de hace 10 ó 15 años? Uf, cómo han cambiado las cosas. Ahora incluso le dan el Nobel de Literatura a un cantante como Bob Dylan, y David Bowie y Leonard Cohen nos han dejado. Snif, snif. El diseño web, como cualquier otra disciplina artística, y más siendo una profesión estrechamente relacionada con la informática y la tecnología y el universo siempre cambiante de Internet, ha avanzado una barbaridad. Para los que dimos los primeros pasos en este mundillo allá por el año 2000 y 2001 (¡qué tiempos aquellos!), el desarrollo web que vemos ahora (la maquetación, el código HTML y CSS, la optimización para SEO, etc.) nada o muy poco tiene que ver con lo que se hacía antes. Para empezar, y aunque a algunos les cueste creerlo, ni siquiera existían las redes sociales o los CMS. Todo era muy simple. Internet estaba en pañales, y se abría un inmenso abanico de oportunidades por explorar. No sé si en estos tres lustros hemos ido a mejor (quiero creer que sí), pero lo que está claro es que el panorama ha cambiado radicalmente. Y como siempre ocurre, toca adaptarse.

Si queremos ver y comparar cómo era una página web hace 10 años, tenemos una fabulosa máquina del tiempo que nos permite viajar al pasado. Ya os he hablado en otros post de ella. Se trata de Wayback Machine, una base de datos enciclopédica que guarda el caché de todas las webs antiguas. Pero no hay añoranza que no traiga consigo un inefable sentimiento de vergüenza, pues si observamos cómo era nuestra página hace una década o más, probablemente salgamos horrorizados de los engendros que diseñábamos en aquella época. No es culpa nuestra, era la moda, lo que se llevaba entonces, argüiremos. Igual que la ropa y los peinados imposibles de los locos años 80. Bienvenidos a Mundo Viejuno.

Nos sorprendería ver ahora cómo era el diseño web de hace 15 años; stricto sensu, casi ni se puede decir que hubiera diseño, más bien falta de

En fin, paso a enumerar algunas de esas aberraciones estéticas que hasta hace no tanto tiempo aún se usaban en el diseño y en la maquetación de páginas web:

Gifs animados

Gifs animados. Diseño Web

Un clásico y una de las cosas más horteras y espantosas que se han hecho nunca en el diseño web son los gifs animados. Los había de todo tipo: iconos, letras, banners (sí, lo confieso, yo también diseñé en mis comienzos un banner animado con ImageReady de Photoshop), contadores de visita… Incluso había sitios web dedicados a proveer a otras páginas de estos elementos (y puede que siga habiéndolos). Algunas webs que abusaban de ellos parecían máquinas tragaperras o paintballs demenciales no aptos para epilépticos. Nadie en su sano juicio los usaría hoy en día, salvo para hacer memes o alguna tontería por el estilo. Pueden resultar simpáticos y hasta graciosos, sí, pero a fe mía que no los echaremos de menos.

Animaciones Flash

Animaciones Flash, diseño web

Durante mucho tiempo Flash fue el programa de animación por excelencia, y no se podía pensar en una web dinámica sin él. Las intros en Flash estuvieron muy de moda, y nosotros mismos las diseñábamos para algunos de nuestros clientes. Obviamente, ya entonces era sabido que los motores de búsqueda no podían indexar su contenido, por lo que en tales casos incluíamos una web paralela en HTML. Aun así, el tiempo ha acabado con su hegemonía, y hoy en día ya ningún diseñador serio lo usa. No es sólo que no fuera indexable y, en consecuencia, veneno para el SEO, sino que además presentaba graves deficiencias de seguridad. Los jQuery y los Canvas de HTML 5 son actualmente los medios más utilizados para crear animaciones. Ahora bien, ¿qué pasa con todo el tiempo que invertimos en aprender a usar Flash y Action Script? ¿Quién nos devolverá todas esas horas de sesudo estudio?

Marquesinas

Marquesinas animadas, diseño web

Siguiendo con el tema de las animaciones, hubo un tiempo (sí, suena muy remoto, como la frase introductoria de un cuento de hadas) en que era muy habitual ver texto en movimiento en una página web. Eran las llamadas marquesinas, una especie de eslogan o mensaje publicitario que se quería resaltar moviéndolo de un lado a otro de la pantalla; algo de lo más cutre, obvia decir. Actualmente es muy raro encontrárselas, aunque me han contado que siguen existiendo. ¿Será como el mito del Yeti o Bigfoot?

Contadores de visita

Contadores de visitas

Cuando nadie o casi nadie usaba Google Analytics, lo más común era toparse con contadores de visita. Los había de todos los tamaños, formas y colores; también, cómo no, con ortopédicas animaciones gif. Hace muchos años que dejaron de usarse, aunque aún es posible encontrarse alguno en blogs personales. Toda una reliquia del mal gusto.

Banner en la cabecera

Banner de cabecera

Casi todas las páginas web que veías hace no tantos años tenían una estructura similar; todas, sistemáticamente, incluían un banner en la cabecera. Este banner no era otra cosa que un montaje fotográfico, ya fuera estático o dinámico, con el logotipo integrado. Dicho banner, por lo general, ocupaba todo el ancho de página y una altura de unos 150 ó 200 px, algo que ahora se antoja muy escaso. Por supuesto, esta práctica ha caído en desuso. La inmensa mayoría de las páginas web actuales, muchas con la firma de WordPress, llevan el logo, los datos de contacto y el menú en la cabecera, y justo debajo un slider o rotador de imágenes con fotos de gran amplitud que van desgranando las principales categorías de la web.

Menús laterales

Menú lateral, diseño web

Ya casi no se ven, pero haberlos, haylos. Hace años era mucho más común encontrarse con menús en los laterales, a modo de sidebar. No son muy prácticos que digamos, especialmente cuando hay elementos desplegables y tapan el texto principal, por lo que, en aras de la usabilidad y navegabilidad, los menús horizontales han acabado imponiéndose.

Menús con botones web

Botones para menús de web

Sería, tal vez, porque Photoshop venía con una lista de estilos predefinidos para botones web o por cualquier otra razón desconocida, pero el caso es que durante mucho tiempo los menús con botones (por lo general, redondeados y con un degradado de fondo, como píldoras o grageas) se hicieron harto populares. Algunos, incluso, tenían otras formas más personalizadas y variopintas adaptadas a la temática, como tuberías o televisiones. Hoy, por suerte, y salvo en contadas excepciones y desde luego mucho más elaborados, es muy difícil volver a verlos.

Tablas anidadas

Tablas anidadas

¿Os acordáis de cómo eran las webs al comienzo, pero muy al comienzo de Internet? Todas estaban hechas con tablas anidadas. Huelga decir que desde hace bastante tiempo esta arquitectura está más que desfasada, y que primero los divs o capas sustituyeron a las tablas, y luego, con la irrupción de HTML 5, fueron el header, el nav, el section, el article, el aside y el footer. Lo más gracioso de dichas tablas es que apenas tenían estilos CSS, y era bastante frecuente ver tablas con bordes gruesos sin definir, a imitación de un biselado. ¡Qué estilazo, mamma mía!

Marcos o frames

Marcos, frames. Diseño Web

Esto sí que es un vestigio de una civilización extraterrestre. Los marcos o frames dejaron de existir hace tanto tiempo que algunos empiezan a dudar de si alguna vez de verdad existieron. Además de crear un efecto feísimo en la página web al compartimentarla de una forma tan poco natural, eran muy perniciosos para el SEO. Una joyita del vintage, vamos.

Resolución 800×600 px con color de fondo

Resolución 800x600px, diseño web

Hace 15 años las pantallas de los ordenadores eran mucho más pequeñas. Vaya, que ni siquiera eran planas, y pocas pasaban de 14 pulgadas. Por esa razón, las primeras páginas web se diseñaban para una resolución de 800×600 px, unas medidas que ahora resultarían ridículas. Seguro que aún quedan por ahí páginas obsoletas que no saben lo que es el diseño responsive, y que contempladas con un monitor de 20 pulgadas se verán microscópicas, más o menos como Mario Bros cuando se hace diminuto. Para más inri, muchas de estas páginas se diseñaban con una tabla principal que ocupaba el 80% del ancho de la pantalla y un fondo de un color cualquiera, con lo que su contenido quedaba aún más canijo.

Enlaces sin estilos

Links, enlaces sin CSS

Así es. Antiguamente los links no solían tener estilos CSS, con lo que hacer clic resultaba una acción de lo más monótona. Los enlaces eran azules por definición y morados cuando habían sido clicados. El a:hover prácticamente ni existía.

Títulos larguísimos con puntos y barras

Cuando el SEO casi ni había nacido, el title de las páginas web solía iniciarse y finalizarse con una sucesión de puntos y barras al más puro estilo Tetris. Aparte de eso, nadie ponía un límite al número de caracteres. Los títulos eran algo tal que así:

.:: Abrelink: diseño web y diseño gráfico en Bilbao || Posicionamiento web Bizkaia || Logotipos Vizcaya .::

Fuentes tipográficas grandes y estrafalarias y sin formato o con estilos planos

Textos estrafalarios

¿A que pensasteis que diría “bizarras”, eh? Pues no. Me resisto a continuar con esa infame tradición de deformar el significado de este popular vocablo. Bueno, a lo que iba. Cuando las hojas de estilo en cascada CSS eran sólo una promesa de lo que ahora son, la mayoría de los textos en la web eran, cómo decirlo de una manera sutil, bastos, toscos, sin pulir. En una palabra, horrorosos. Básicamente, había dos tipos de texto: el plano y sin estilo, con la fuente Arial o Times New Roman, sin justificar los párrafos y sin apenas interlineado, y cuerpo de letra de 12 puntos; y el de letras enormes y coloridas y tipografías barrocas o futuristas creadas con Photoshop. La pesadilla de cualquier diseñador gráfico.

Colores a cascoporro

Colores CSS antiguos diseños web

Siguiendo con lo dicho al hilo de los textos, la web, por aquellos años de inocencia creativa, estaba inundada de colores, como un barco de Greenpeace o una carroza del Día del Orgullo Gay. Uno, que se formó como diseñador gráfico antes que como desarrollador web, sabe que combinar más de dos colores o más de dos fuentes tipográficas en un mismo documento es casi un atentado contra el buen gusto, pero claro, el decálogo del diseño no estaba muy extendido en aquella época, y así proliferaron todo tipo de webs psicotrópicas, como un viaje lisérgico o un caleidoscopio mareante y sin límites.

Texto blanco sobre fondo negro

CSS estilos textos antiguos diseños de páginas web

¿Hay algo más cutre y doloroso para la vista que esto? Pues, lo creáis o no, fue todo un boom.

Y vosotros, ¿echáis de menos algo de aquellas webs primigenias, los incunables de Internet?


  • 0
Plugins para WordPress

10 Plugins de WordPress que deberías tener instalados

Que WordPress es la plataforma puntera a día de hoy en el desarrollo de webs corporativas y de ocio ofrece ya pocas dudas. Este CMS nos permite gestionar y actualizar nuestra web o blog mediante un intuitivo, a la vez que completo, panel de gestión.

Además WordPress está continuamente en crecimiento y expansión y podemos incorporar, de manera sencilla, distintas funcionalidades y complementos a nuestra web mediante los llamados plugins.

Dependiendo del enfoque de nuestra web, necesitaremos unos widgets específicos y concretos de entre la enorme multitud de ellos que existen. En Abrelink consideramos que estos 10 plugins que presentamos a continuación son muy recomendables y casi imprescindibles para cualquier web.

1- Jetpack

Este plugin requiere haber creado previamente una cuenta de usuario en WordPress.com, para enlazarla con nuestro sitio web. Una vez tengamos instalado Jetpack y lo hayamos conectado mediante nuestra cuenta de usuario, nuestro panel de gestión de WordPress tendrá un montón de funciones extra, como una muestra de las estadísticas de visita, más opciones para los comentarios, actualizaciones automáticas de los plugins que elijamos, capacidad de incluir en los widgets elementos como formularios de suscripción, imágenes, conexión con redes sociales… En fin, un montón de posibilidades.

2- All In One SEO Pack

Obviamente que el SEO es uno de los aspectos fundamentales y muy a tener en cuenta cuando creamos una web. Este plugin dispone de un completísimo abanico de opciones para que podamos editar los metatags, personalizándolos en cada apartado de la web si así lo deseamos, manejar URLs canónicas, usar el meta nofollow

Además desde aquí podemos enlazar con Google Analytics o verificar la web para Google, Bing o Pinterest, crear y gestionar sitemaps XML, el archivo robots.txt, y mucho más.

3- TinyMCE Advanced

Un plugin muy interesante y útil que nos proporciona una gran comodidad a la hora de editar textos. Imprescindible para quienes no se manejen con las etiquetas de HTML, ya que su instalación mejora sustancialmente las opciones del editor de texto que por defecto tenemos en WordPress, permitiéndonos trabajar con texto enriquecido en entorno gráfico.

4- WP Smush

Un factor SEO que cada vez está cobrando más importancia es la velocidad de carga de nuestra web. Y un punto a tener en cuenta para mejorar esto es la optimización de imágenes, y su reducción de peso, con lo que conseguimos una carga mucho más fluida y rápida, y evitamos que el usuario huya de nuestra web por hartazgo con las esperas.

Este plugin nos ahorra un montón de preocupaciones y trabajo al automatizar la tarea de optimización de imágenes de una manera sencillísima. Podemos configurarlo para dejarlo activado, con lo que cada imagen nueva que subamos a la web pasará por ese proceso de optimización en la propia subida. Además contamos con la posibilidad de chequear nuestra biblioteca de medios. WP Smush hará un análisis de las imágenes que tenemos almacenadas y nos dirá cuántas de ellas necesitan ser reducidas en caso de haberlas. Un simple click y listo, el plugin se encarga de todo y nuestras imágenes quedarán con el tamaño y peso ideal sin perder nada de su calidad o nitidez.

5- Akismet

Si en nuestra web o blog tenemos abierto el sistema de comentarios, Akismet puede venirnos muy bien para filtrar y combatir el molesto spam. Eso sí, Akismet tiene un servicio gratuito y unos planes de pago con filtros más potentes y opciones mejoradas. En función de la cantidad de spam que recibamos, tal vez el plan básico no nos alcance y tengamos que contratar uno de sus planes avanzados, que conllevan una cuota mensual.

6- Contact Form 7

Uno de los elementos que prácticamente tiene cualquier web sea cual sea su temática o función, en la inclusión de un formulario de contacto desde el que el usuario pueda mandarnos un mensaje o consulta. De todos los plugins de WordPress para formularios, Contact Form 7 es sin duda el más popular y usado. Gracias a él podemos generar fácilmente uno o varios formularios de contacto con los campos a rellenar que queramos. Después sólo tenemos que incluir el shortcode que se genera para insertar el formulario en la sección de nuestra web que deseemos.

7- Google Analytics y la ley de Cookies

Con el cambio de legislación en 2012, adaptar nuestra web a la ley de Cookies supuso un quebradero de cabeza para muchos. Este plugin nos da la posibilidad de configurar el aviso a los usuarios de una manera rápida y cómoda. Una vez instalado se creará de manera automática un apartado de la web donde se explica la Política de Cookies, que por supuesto podemos modificar con el editor. El plugin quedará activado una vez que insertemos nuestra ID de Google Analytics.

Como pega, hay que decir que tal vez tengamos que modificar el aspecto visual del aviso en cuanto a tipografía, colores del fondo, texto, enlaces, etc. Y eso conlleva que necesitamos conocimientos o nociones de CSS para poder dejarlo a nuestro gusto, o visualmente integrado en la estética de nuestra web.

8- AddToAny Share Buttons

¿Copiar una URL? ¿Qué es eso? Una de las opciones que más gusta a los usuarios, y que espera encontrase en una web, son los botones para compartir un contenido que considera interesante en sus perfiles de redes sociales.

Este plugin facilita el que los visitantes puedan compartir bien nuestro sitio web, o bien un contenido concreto dentro del mismo. Mediante unos vistosos botones, el usuario sólo tiene que hacer click para que el enlace se genere y se pueda difundir a través de su red social o medio favorito.

Los ajustes son muy completos. Podemos colocar los botones en las secciones concretas que deseemos, por encima o por debajo del texto. Podemos además elegir los botones de las redes que queremos mostrar de primeras, reservando ese lugar privilegiado a las plataformas más usadas (incluyendo el envío por email o WhatsApp). Además podemos personalizar el tamaño de los botones, e incluso cambiar los predefinidos por imágenes propias si así lo deseamos.

Asimismo, se incluye la posibilidad de colocar una de las habituales barras flotantes en uno de los lados de la pantalla para que tengamos siempre accesible la opción de compartir.

Por si fuera poco, también dispone de una opción para insertar un widget con enlaces directos a nuestros perfiles en redes sociales.

Hay gran variedad de plugins de este tipo para elegir, con otras variantes muy interesantes, como Share Buttons by AddThis que aunque cuenta con algunas opciones menos en la configuración, tiene una barra flotante más vistosa para nuestro gusto.

9- Responsive Lightbox

Muchos de los themes o plantillas que usemos para nuestro WordPress tendrán ya integrado el famoso efecto lightbox (ventana emergente) para cuando pinchemos en una imagen con intención de ampliar su tamaño. Pero si no es así, el problema se resuelve con este plugin que además adapta el tamaño de las imágenes teniendo en cuenta el diseño responsive. Podemos elegir distintos estilos y formatos de ventana.

10- WP Sitemap Page

Nos sirve para generar un sitemap o mapa web en HTML. Esto es, un listado de enlaces que recoge todos los apartados de la web, incluyendo las entradas del blog, de manera jerarquizada. Si bien es cierto que el usuario no suele usar esta sección de la web a pesar de su aparente utilidad (ya que recoge accesos directos a todos los contenidos de la web), lo cierto es que resulta más que recomendable incluir un mapa web, ya que con la indexación de éste Google tendrá rastreados todos los apartados de nuestro sitio web.

WP Sitemap Page nos lo genera de manera automática incluyendo un sencillo shortcode que nos facilita la propia documentación del plugin.


BUSCAR

Suscríbete al Blog

Introduce tu email para estar al tanto de las novedades.

ABRELINK EN TWITTER