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

Archivo de Categorías: Diseño Web

  • 0
Atajos de teclado para Google Chrome

Atajos de teclado y combinaciones de teclas en Google Chrome

Categoría : Diseño Web

-¿Qué es un atajo de teclado?

Un atajo de teclado es una combinación de teclas que permite acceder a una aplicación o utilidad de forma rápida y directa. Estos atajos o comandos suelen estar presentes en todos los programas informáticos y también en los navegadores web y, por lo general, suelen incluir la tecla Control más alguna F.

Ejemplos de atajos de teclado muy conocidos de Windows son Ctrl+C (Copiar), Ctrl+X (cortar) y Ctrl+V (Pegar), así como el tan socorrido como necesario Ctrl+Z (Deshacer), o Ctrl+A, que sirve para seleccionar todo el texto.

-¿Para qué sirve un atajo de teclado?

Un diseñador o desarrollador web necesita conocer atajos de teclado que le faciliten las tareas cuando trabaje en los diferentes navegadores, como Google Chrome, Firefox o Microsoft Edge. Estos comandos o combinaciones de letras ahorran mucho tiempo, y el tiempo es el mayor capital para cualquier profesional del diseño, y más si cobra por horas. Como en todos y cado uno de los programas de retoque fotográfico o vectorial, llámense Photoshop o Illustrator, los navegadores tienen su propio menú con opciones desplegables, pero conocer estos atajos de teclado  o shortcuts ayuda mucho al desempeño de ciertas actividades rutinarias, y lo único que se requiere es tener unas mínimas facultades mnemotécnicas.

Los atajos de teclado no son lo mismo que los footprints, o comandos avanzados de búsqueda en Google, pero tienen algo en común: llegar del punto A al punto B de la forma más rápida posible, que generalmente es la recta.

Imagino que muchos de vosotros ya conoceréis estos comandos de teclas, pero nunca está de más recordarlos, por si aún queda algún despistado. Ésta es mi lista con los atajos de teclado más útiles para un desarrollador web:

1-Ctrl+F5

¿Cuántas veces os ha pasado, a vosotros o a alguno de vuestros clientes, que habéis hecho modificaciones en la web y al cargar la página el navegador no os las muestra? Esto suele dar pie a no pocas confusiones y tediosas explicaciones. Casi todo el mundo conoce el comando F5 para “refrescar” la página, pero a veces no basta, y sólo con F5 no muestra los cambios.

Para evitar que las cookies y el caché guardado en la memoria del ordenador se nieguen a recargar la página modificada, lo mejor es usar la combinación de teclas Ctrl+F5, que siempre, y digo siempre, actualiza a la última versión.

2-Ctrl+F

Atajo de teclado, CTRL+F

Muchas veces queremos buscar una palabra en una página web y, por la sencilla razón de que tiene mucho texto, no la encontramos. ¿Qué es mejor?, ¿perder el tiempo leyendo por encima todo ese contenido, o usar el atajo de teclado Ctrl+F? Lo que hace este utilísimo comando es abrirnos una ventanita en la parte superior del navegador, y en ese campo de texto podemos teclear la palabra que estamos buscando, y al momento resaltará todas las palabras que coincidan con nuestro criterio de búsqueda sobre un fondo amarillo tipo post-it. Además, en la ventanita nos informará de cuántas veces se repite y nos permitirá desplazarnos de arriba abajo seleccionando cada uno de los matches.

3-Impr Pant

Este atajo lo conoce o debería, al menos, conocerlo todo el mundo, no sólo los diseñadores web, pero dada su utilidad, juzgo conveniente incluirlo en esta lista.

La tecla Impr Pant (o Imprimir Pantalla, como se suele decir coloquialmente) sirve para hacer una captura de pantalla; vamos, una herramienta que utilizamos casi a diario. Es verdad que existen mejores alternativas, y más profesionales, como la extensión de Google Chrome Full Page Screen Capture, que copia y reproduce todo el contenido de la web, incluso el que queda oculto por la barra de scroll, pero muchas veces con un simple Impr Pant tenemos todo lo que necesitamos (para ejemplo, el que está sobre estas líneas y todas las demás imágenes que ilustran este post).

4-Ctrl-Mayús+I

Herramientas para desarrolladores web

Y hablando de desarrollo web, qué menos que utilizar las herramientas para desarrolladores web que Google Chrome, Firefox y Edge ponen a nuestra disposición. Pulsando la combinación de teclas Ctrl+Mayús+I se desplegará una ventana en la parte inferior de nuestro navegador (que, si nos resulta más cómodo, podemos desplazar a un lateral). En esta ventana podemos ver y seleccionar el código HTML y CSS, e incluso modificarlo para ver los cambios en modo local. También podemos cambiar la visualización a responsive para observar cómo queda la web en diferentes dispositivos móviles, y con el icono del puntero podemos seleccionar cualquier elemento de la página (una imagen, un div, un link o un texto) y nos mostrará sus dimensiones (anchura y altura, en píxeles), su id o cualquier otro detalle significativo. Esto es especialmente útil con las imágenes, ya que al clicarlas podemos copiarlas y luego pegarlas en Photoshop o abrirlas en una nueva pestaña y descargarla. En otras palabras, es una manera muy fácil de scrapear una web.

A este comando también se le conoce como Inspeccionar, y podemos llegar a él haciendo clic en el botón derecho del ratón.

5-Ctrl+U

Se podría decir que éste es el otro atajo de teclado pensado exclusivamente para desarrolladores web. Lo que hace la combinación de teclas Ctrl+U es abrir una pestaña con el código fuente de la página. Aquí también se llega a través del botón derecho del ratón.

Existe un truco con este comando Ctrl+U que os contaré si os estiráis un poco y nos dais una señal social.

6-Ctrl+P

Atajo de teclado, CTRL+P

Este comando también es muy conocido, más que nada porque es idéntico al que habitualmente se usa en Word. Mediante Ctrl+P podemos abrir la ventana de impresión. Si tenemos la impresora bien configurada, este atajo de teclado nos permitirá hacer una impresión rápida de la página web por la que estamos navegando. Asimismo, si tenemos instalado PDF Creator, podremos transformar esa web en un documento PDF.

7-Arrastrar imágenes en Google

Arrastrar imágenes en Google

Vale, esto no es, en sentido estricto, un atajo de teclado, pero lo he incluido en esta lista porque es una utilidad muy práctica que te puede sacar de más de un apuro. Si estás buscando imágenes similares a una que ya tienes pero la quieres, por ejemplo, a un mayor tamaño o resolución, Google te permite, en su buscador de imágenes, arrastrar y soltar una desde tu disco duro, y lo que hará a continuación será mostrarte una serie de imágenes visualmente similares. ¿Magia? No. Una fantástica API de Google que es probable que aún no conozcas.


  • 0
Dónde descargar gifs animados

Dónde descargar gifs animados gratis de series y películas

Categoría : Diseño Web

En el marketing de contenidos la llamada a la acción es fundamental, por lo que estamos obligados a presentar nuestros artículos de manera tal que consigan atraer la atención del usuario con un simple golpe de vista. Esto es lo que técnicamente se conoce como lead magnet. Para hacer nuestros post más atractivos solemos recurrir a las imágenes y a los vídeos, pero hoy en día lo más efectivo es incluir infografías y gifs animados. Sobre la importancia de las infografías para el link baiting (consecución de enlaces naturales) ya os he hablado en más de una ocasión, por lo que ahora me gustaría centrarme en los gifs, esas pequeñas imágenes animadas que suelen tener un cariz cómico o entrañable.

La historia de los gifs es cuando menos singular. Poblaron la Red en sus inicios, saturando de colores y animación miles y millones de páginas web. Por aquel entonces eran casi como una invasión alienígena. Cuando el diseño web se hizo más profesional, por decirlo así, y tendió al minimalismo y al flat design, los gifs prácticamente desaparecieron. Y quién nos iba a decir que tiempo después, al socaire del marketing digital y los Social Media, volverían a la carga con aires renovados, en parte, también, por el auge de las series. Ahora están viviendo una segunda Edad de Oro.

Y lo mejor es que los gifs no sólo se utilizan para contar chistes o hacer la gracia, que también, sino que ahora sirven al propósito de hacer branding, y así veréis que muchos bloggers y Community Managers los utilizan a menudo en sus tweets.

Está demostrado que los gifs, al igual que las infografías, aumentan el engagement y pueden hacer que tus post se conviertan en virales, pues ¿a quién no le gusta reírse con un fragmento de una serie querida y emblemática?

Gifs animados

Además, tienen algo que hipnotiza. ¿A vosotros no os pasa que os quedáis mirando fijamente este gif del genial Steve Carell (Michael Scott en ‘The Office’) y al leer los labios casi podéis oír lo que está diciendo, aunque no tenga audio?

Yo recomiendo usar gifs sacados de series y películas porque son los que mejor quedan y aportan un valor añadido. Tu mensaje quizá no cause sensación por sí solo, pero si el gif es gracioso y muchos de tus seguidores captan la referencia seriéfila o cinematográfica, es muy probable que lo retuiteen y termine haciéndose viral.

De entre todos los sitios web donde puedes descargar gifs, yo recomiendo estos 5:

1-Giphy

Giphy

Sin ninguna duda, es la mejor web para descargar gifs, la que casi todos los Community Managers utilizan, y además es ideal para buscar planos de series y películas. Tiene un buscador y un menú con una serie de categorías (reacciones, entretenimiento, deportes, vacaciones, artistas) y una lista con un trending topic de lo más buscado. Sin necesidad de registrarte puedes descargar el gif que elijas o compartirlo en redes sociales. También puedes importarlo a tu web como vídeo HTML 5 o en un iframe embebido. Aquí puedes encontrar prácticamente de todo. Su base de datos es inmensa.

2-Gifmania

Gifmania

Este sitio web es más, digámoslo así, infantil que Giphy, pero no deja de ser una buena opción. Puedes descargar gifs sin registro o insertar el código en tu blog, así como compartirlo en redes sociales. Tiene un poco de todo, desde las típicas animaciones de dibujos animados, como Los Simpson o Disney, hasta videojuegos, Anime y Manga, pasando por los clásicos emoticonos. También puedes encontrar gifs de series, como ‘The Big Bang Theory’.

3-PicGifs

PicGifs

En esta página también tienes una gran variedad de gifs para descargar gratis. Están ordenados por categorías. Una de las que más juego dan es “reaction gifs”. Las ventajas de PicGifs con respecto a los dos anteriores es que tiene una herramienta para crear tus propios gifs y unos gráficos compatibles con Facebook. Puedes guardar las imágenes o enviarlas como e-card. También tiene un foro y un libro de visitas, pero sólo están en inglés.

4-Gifs.com

Gifs.com

Éste es un editor de gifs animados. Puedes pegar la URL de un vídeo de YouTube, Vine o Instagram y te lo convierte en formato gif. Es ideal para crear memes.

5-Make a Gif

Make a Gif

Es similar al anterior. Sirve para crear gifs animados a partir de imágenes, vídeos, YouTube y webcam. Además, hay una colección de gifs descargables, y lo mejor es que puedes personalizarlos añadiéndoles texto. Dentro de las categorías tienen la de Tv Gifs.

Y si hablamos de crear gifs, hay una última y mejor alternativa, sólo apta para mentes inquietas:

6-Crea tu gif animado con Photoshop

Gif animado, Photoshop

Si eres creativo y sabes manejar Photoshop, quizá la mejor opción para ti sea crear tu propio gif animado. Con Photoshop es muy sencillo. En su ventana inferior tienes todo lo que necesitas. Por cada capa tendrás una pista con su correspondiente línea de tiempo, y lo único que tienes que hacer es crear transiciones de movimiento desplazándote a través de la línea de tiempo con la cabeza lectora y generando fotogramas clave, o jugar con la opacidad, haciendo aparecer y desaparecer capas y consiguiendo así fundidos sutiles, o probar con efectos más arriesgados como giros o rotaciones.

Con Photoshop también es posible editar cuadros a la manera de fotogramas y realizar montajes con una transición de corte plano por plano o con una interpolación de movimiento, añadiendo cuadros intermedios. Dicho así, sé que suena complicado, pero crear un gif animado con Photoshop es de lo más fácil, y no hace falta tener grandes conocimientos en materia de diseño web.

El mayor inconveniente de estos gifs generados con Photoshop es que, a poco que insertes keyframes, su peso aumentará una barbaridad, además de que su resolución no será, por lo general, la más óptima. De ahí que la herramienta más profesional y extendida para crear animaciones (una vez desterrado Flash por sus muchos defectos, tanto a nivel de indexación y SEO como de vulnerabilidad en los navegadores) sea Adobe Egde o Animate, que lo que hacen es convertir esas animaciones en código HTML 5 y CSS 3. Aparte, también están los canvas creados a partir de Javascript, pero para eso hay que saber mucho de programación.

7-Comprime tus gifs

Comprimir gifs animados

Si nos preocupa cómo afecta el peso de las imágenes a la velocidad de carga –y debería preocuparnos, pues repercute directamente sobre el SEO–, existen compresores de gifs animados. El mejor, el que yo suelo usar, es ILoveIMG, que también funciona con otros formatos de imagen como JPG y PNG, pero para estos casos yo prefiero TinyPNG, que es insuperable. No obstante, ILoveIMG es capaz de reducir el peso de los gifs hasta un 25% (para muestra, el que se puede ver aquí) sin pixelado ni aparente merma de calidad. Esta herramienta online también sirve para recortar y redimensionar imágenes y convertir a JPG o GIF, y además funciona con drag-and-drop, arrastrando y soltando.

En otro post os hablaré con mayor detenimiento de compresores de imágenes.


  • 0
5 webs donde descargar fuentes tipográficas gratis

5 webs donde descargar fuentes tipográficas gratis

Es el deber todo diseñador gráfico disponer de una amplia gama de fuentes tipográficas donde echar mano. Esto, que es fundamental para la creación de logotipos y el material impreso publicitario, vale también para la maquetación de páginas web. Porque diseñar tus páginas con una tipografía clásica como Arial, Times New Roman o Comic Sans da mala imagen, la de un diseñador incompetente que no cuida el acabado final de sus trabajos y que no conoce las diferencias entre una fuente con serifas o sin serifas, caligráfica, elegante, decorativa o en versalitas. Por supuesto, no basta con limitarse a las fuentes que te vienen instaladas con Windows por defecto. Debemos buscar la tipografía que mejor se adapte a los valores que queremos transmitir: rigor, fiabilidad, creatividad, ambiente lúdico y relajado, etc.

Cada fuente tipográfica tiene una personalidad y representa unos valores, de ahí la importancia de su elección

Aquí os presento 5 páginas web donde podéis descargar fuentes tipográficas gratis (y otras muchas cosas más):

1-Font Squirrel

Font Squirrel

La web de la simpática ardilla es una de mis preferidas. A decir verdad, no es la que mayor número de fuentes tipográficas alberga en su archivo, pero su interfaz amigable y sus múltiples opciones hacen de ella un sitio ideal, casi obligado, para guardar en nuestros favoritos. Cuenta con un buscador de fuentes y luego ofrece la posibilidad de buscar por etiquetas o tags, además de otras categorías como recientes o más populares.

Una utilidad que me gusta mucho de Font Squirrel es su Webfont Generator, donde podemos subir una fuente de nuestro disco duro en TTF (TrueType Font) u OTF (OpenType Font), las más usadas en el entorno Windows, y él nos la convierte a otros formatos para web como EOT, WOFF y SVG. Esto es especialmente útil cuando utilizas la propiedad de CSS 3 @font-face.

Ahora también incluye un Identificador de Fuentes a imitación del ínclito WhatTheFont. Asimismo, dispone de un blog y de un foro donde resolver dudas; ambos, por supuesto, en inglés.

Quizás su mayor defecto y lo único que se echa en falta es el típico visor para poder escribir el texto deseado y mostrarlo en las diferentes tipografías a medida que van cargando, algo que siempre ayuda a hacerse una mejor idea de la composición que tenemos en la cabeza.

Sus fuentes son 100% gratis para uso comercial, como recalcan en su logo.

2-Megafuentes

Megafuentes

Funciona muy parecido a Font Squirrel, aunque tiene menos utilidades. La búsqueda es, igualmente, por etiquetas, y tiene una categoría de novedades y unas fuentes destacadas en primera página. La ventaja es que está en español. Le falta, asimismo, el visor. Las fuentes son TrueType y OpenType.

3-Urbanfonts

Urbanfonts

Esta web es muy completa, y su catálogo de fuentes es de lo más heterogéneo y diverso que se puede encontrar. Las tipografías gratuitas (también tiene de pago, las premium) están ordenadas alfabéticamente y también por categorías (Fuentes nuevas, Nuestras favoritas, Top 100), básicas, script, display/decorativas, no latinas y miscelánea. A diferencia de las anteriores páginas, Urbanfonts sí cuenta con un visor de texto, y además muy completo, pues te deja cambiar el color del texto y el del fondo, así como aumentar o disminuir el cuerpo de letra.

Urbanfonts no sólo permite descargar fuentes tipográficas, sino también un variado repertorio de dingbats (símbolos) y vectores. Otra web que tampoco debería faltar en nuestros favoritos.

4-Font River

Font River

Es muy similar a las anteriores. En su header muestra tres secciones destacadas con Fuentes nuevas, Lo más popular y al Azar. Más abajo establece una serie de categorías: básico, símbolos, fantasía, extranjero, gótico, fiestas, escritura y tecno. No tiene visor de texto, pero sí mapa de caracteres. Presume de tener 20.000 fuentes  y dingbats descargables para Windows y Mac. Permite descargar (en TTF) y donar al autor. Está en varios idiomas; entre ellos, español.

Sus fuentes son gratuitas para uso personal.

5-1001 Free Fonts

1001 Free Fonts

Como su nombre indica, esta web posee una gran colección de fuentes. Están ordenadas alfabéticamente y por etiquetas. Al igual que Urbanfonts, cuenta con un visor de texto, aunque menos sofisticado (éste no permite, por ejemplo, cambiar el color de fondo). En cada fuente se te informa de si es gratuita, o sólo para uso personal (en cuyo caso puedes adquirir la licencia comercial), de dominio público, etc. También permite hacer una donación al diseñador, cosa que seguro te agradecerá.

Y por último, un extra que no puede faltar en ninguna lista:

6-Google Fonts

Google Fonts

Tanto si eres diseñador gráfico como desarrollador web, Google Fonts te va a interesar. Aquí puedes encontrar una gran variedad de tipografías amigables con el navegador. Están divididas en 5 categorías básicas: serif, sans serif, display, handwriting y monospace, que puedes seleccionar o deseleccionar a tu antojo para afinar la búsqueda. También puedes elegir el lenguaje (incluye alfabetos como el cirílico, el árabe o el griego) y ajustar el criterio de búsqueda por trending, popular, fecha de publicación u orden alfabético.

Si pulsas en See the specimen, al pie de cada tipografía, te conduce a una página donde te muestra el diseñador, una descripción de la fuente, sus caracteres, un gráfico con los países donde más se usa, una lista con tipografías similares y un recuadro donde puedes escribir el texto para verlo con dicha fuente y al tamaño en píxeles que quieras.

Aparte, cuando seleccionas una fuente se te abre una pestaña en la parte inferior de la pantalla. Si la despliegas, te ofrece la opción de descargártela totalmente gratis en un zip y el código para embeberla en tu sitio web que debes insertar en el <head>, además del CSS con el font-family. La línea de código sería algo tal que así:

<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">

También puedes importarla como un estilo y customizarla (regular, bold):

<style>
@import url('https://fonts.googleapis.com/css?family=Caveat');
</style>

Google Fonts es una alternativa a @font-face para usar tipografías en páginas web sin necesidad siquiera de instalarlas y subirlas a tu FTP, aunque ten en cuenta que al solicitar un request a la biblioteca de Google puede aumentar el tiempo de carga. En relación con esto, en Load Time te indica si dicha fuente carga rápido o lento.

Y como premio al que haya llegado hasta aquí, dos webs más que no deberían faltar en ninguna lista sobre tipografías gratuitas:

7-BeFonts

BeFonts

Hace poco que tuve conocimiento de esta página, y la verdad es que estoy encantado con ella. No es que tenga un enorme archivo de fuentes tipográficas, pero las que tiene son muy profesionales. Las fuentes se organizan por categorías dentro de un menú superior: basic, display, script, symbols, non western y misc, con sus correspondientes desplegables.

Una cosa que hace especial a BeFonts es que cada tipografía aparece con una imagen de portada a modo de cover, algo que enriquece mucho el aspecto visual y estético de la web. También incorpora capturas de pantalla para que puedas ver cómo queda en diferentes contextos.

Las fuentes son gratuitas, la mayoría sólo para uso personal y algunas también para uso comercial, y puedes descargártelas en TTF sin necesidad de registro.

8-Dafont

Dafont

Esta página es algo así como un clásico de las tipografías gratis. Bajo su sencilla apariencia esconde un buscador de fuentes muy útil y práctico. Como todos, está estructurado en categorías, donde destacan los bitmap y dingbats. Al lado de cada fuente tiene un botón de descarga. Así de simple y directo, sin páginas intermedias. Pero además también cuenta con una vista previa donde puedes teclear tu texto. Dispone de atajos directos a las novedades y a las tipografías top (aquí no podían faltar la Caviar Dreams o la Sansation).

Las fuentes tipográficas son 100% gratis y están en OTF o TTF.


BUSCAR

Suscríbete al Blog

Introduce tu email para estar al tanto de las novedades.

ABRELINK EN TWITTER