Chrome 1
Como usar el Inspector de Elementos
Este tutorial consta de dos vídeos cortos y si necesitas más detalles puedes leer acá las instrucciones más abajo.
Puedes descargar los archivos necesarios para hacer el tutorial acá DESCARGAR. Arrastra la carpeta adentro del zip a tu escritorio y abre el archivo index.html en Google Chrome.
Me presento y también al tutorial
¡Hola! Me llamo Erick, llevo algo así como 1 año programando. El año pasado hice mi primer curso con en1mes Jamas en mi vida había visto una línea de código. De hecho, mi título universitario -que ejercí por 4 años- es de Sociólogo, lo que no podría estar más alejado de ser developer. Así que ya saben, si yo puedo hacerlo, cualquier puede hacerlo.
Los siguientes tutoriales son básicos y se enfocan en enseñar cosas que generalmente los desarrolladores dan por sentado que uno sabrá a hacer, por consiguiente, no las explican, o no las explican detalladamente.
El Inspector de Elementos
El inspector de elementos es una herramienta genial para resolver problemas de diseño. Hay varios exploradores que la tienen, este tutorial utilizará el inspector de elementos de Google Chrome. Para usar el inspector de elementos hay 2 formas:
- Apretar F12
- O hacer click segundario encima de cualquier elemento de una pagina web
El inspector de elementos se abrirá por defecto abajo de la pantalla. En el lado izquierdo está el HTML de la página. Si pasan el cursor por el HTML se va a destacar en la página web visualizada en el navegador el elemento que corresponde. Esto sirve para que puedan reconocer cual elemento van a editar.
El inspector de elementos sirve para muchísimas cosas, en esta oportunidad veremos los usos más comunes para solucionar problemas de diseño:
- Descubrir errores
- Reutilizar atributos CSS
- Modificar la apariencia de elementos
- Reutilizar selectores CSS
- Encontrar selectores CSS (Copy CSS Path)
Los cambios que se hacen en el Inspector de Elementos no se guardan, por lo que al recargar la pagina, toda la apariencia volverá a como estaba. Es por eso que todos los cambios que hagamos los iremos actualizando en nuestro HTML y en nuestro CSS. Para el siguiente ejemplo voy a utilizar una página que construí de manera muy sencilla utilizando Twitter Bootstrap.
Descubrir Errores
El recuadro gris con el título “Inspector de elementos” es un Jumbotron de Bootstrap. Pero hay un problema, en mi código css, tiene una imagen de fondo que no se está cargando.
Para solucionar este problema voy a abrir el Inspector de Elementos, como sea, apretando F12 o haciendo click con el botón secundario. Cuando se abra el Inspector de Elementos voy a seleccionar la consola (Console).
En la consola podemos ver que el error es que el archivo no está encontrado. Entonces hay que revisar la ruta del archivo, en este caso dice que el nombre del archivo es “jumbotron_backgrund.jpg”. Para ver que si está bien o mal tengo que ir la carpeta de mi proyecto y verificarlo. Al hacer esto puedo darme cuenta de que mi archivo no se llama “jumbotron_backrund.jpg” sino que se llama “jumbotron_background.jpg” para arreglar esto hay que ir al css y cambiarle el nombre.
Reutilizar atributos CSS
Más abajo en la pagina hay dos columnas. Estas columnas tienen un comportamiento bien particular. Las imágenes que están adentro se van poniendo una al lado de la otra en linea hasta que no caben más y se repite este proceso nuevamente más abajo. Esto pasa porque son columnas de Bootstrap.
Como pueden ver la columna del lado izquierdo tiene un borde gris mientras que la del lado derecho no lo tiene y parece que todos los elementos estuvieran en el aire. Así que lo que vamos a hacer es reutilizar las propiedades CSS de la columna del lado izquierdo y se las vamos a pasar a la del lado derecho.
Para ello vamos a abrir el Inspector de Elementos haciendo click con el botón secundario en la columna del lado derecho.
Si se fijan en el lado derecho del Inspector de Elementos donde dice “Styles” podemos ver el CSS “border” y “border-radius”, vamos a seleccionarlos ambos y los vamos a copiar (ctrl+c). No se preocupen por esas flechas ni por el cuadro gris, no se copian.
Para pasarle esos atributos a nuestra columna derecha vamos darle un id que llamaremos “right_coloumn” en el html.
Ahora en nuestro CSS le vamos a utilizar el ID “right_column” para pasarle el CSS que queremos reutilizar. Luego de escribir el id “right_column” en el css escribimos los corchetes cursivos y dentro de estos pegamos lo que copiamos desde el inspector de elementos.
Modificar la apariencia de los elementos
Ahora nuestras dos columnas tienen borde. Pero si se fijan en el fondo hay un problema, el borde redondeado queda atrás de la imagen. Para solucionar esto vamos a modificar la apariencia de los elementos en el mismo Inspector para saber cómo es el CSS que necesitamos solucionar.
