Atajos y comandos de teclado para desarrolladores web

Atajos de teclado y combinaciones de teclas en Google Chrome

  • 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.

Valoración
Fecha
Abrelink: Diseño web Bilbao
Atajos de teclado y combinaciones de teclas en Google Chrome
Estrellas
51star1star1star1star1star
Atajos de teclado y combinaciones de teclas en Google Chrome
5 (100%) 1 vote

Dejar un comentario

BUSCAR

Suscríbete al Blog

Introduce tu email para estar al tanto de las novedades.

ABRELINK EN TWITTER