Google Chrome como Editor Web- Google Chrome es un navegador web con muchas funcionalidades que pueden ser utilizadas por un diseñador web, como son:
-- Modificación del Arbol DOM en vivo.
-- Inspector del Arbol DOM y de cada uno de sus componentes y objetos
-- Modificación de los estilos de cada objeto en el Arbol DOM.
-- Modificación de las Hojas de Estilo (CSS) en vivo.
-- Consola JavaScript.
-- Detección de errores.
-- Autocompletado de código.
-- Fácil edición y selección de colores, tamaños, etc.
-- Fácil edición y selección de texto y código, múltiples cursores, multiselección, buscar y reemplazar.
-- Trabajo con WorkSpaces (proyectos web) editandolos con las caracteristicas mencionadas anteriormente.
Objetivos:- Aprender a utilizar los WorkSpaces (Espacios de Trabajo) del Navegador Web Google Chrome para la creación, edición, prueba y detección de errores en un Proyecto de Diseño y Programación Web utilizando HTML, CSS y JavaScript.
1) Accediendo a las Herramientas de Desarrollador de Google Chrome- Básicamente existen tres formas de acceder a las Herramientas de Desarrollador de Chrome:.
1. Opciones > Más herramientas > Herramientas para desarrolladores.
2. Ctrl + Shift + J
3. F12
2) Agregar un WorkSpace- Dentro de las muchas opciones que nos ofrece las Herramientas para Desarrolladores de Chrome, está el apartado
Sources (recursos). Aquí, se mostrará la estructura de ficheros que está utilizando la página web que estamos analizando, además, también se podrá agregar un WorkSpace para trabajar un proyecto web personal
- Un WorkSpace es una carpeta (directorio o folder) que contendrá nuestro proyecto web. Básicamente existen dos formas de crear un WorkSpace:
1. En el Panel de Navegación: Click Derecho >
Add folder to workspace.
2. Arrastrar una carpeta existente en la PC al Panel de Vista y Edición
- En ambos casos se puede crear una carpeta vacía y agregarla, o se puede agregar una carpeta existente que ya contenga una estructura de ficheros del proyecto con el que se va a trabajar.
3) Excluir carpetas del WorkSpace- Algunas veces será necesario quitar/excluir algunas carpetas del proyecto cargado en el WorkSpace, ya sea todo el proyecto o alguna carpeta del proyecto. Para hacerlo basta con dar Click Derecho sobre la carpeta en cuestión y elegir la opción Exclude Folder en caso de carpetas que forman parte del proyecto. Para quitar un proyecto (carpeta del proyecto) del WorkSpace basta con dar Click Derecho sobre la carpeta del proyecto y elegir la opción Remove folder from workspace.
4) Crear, renombrar o eliminar ficheros del proyecto- Para crear un fichero se tendrá que seleccionar la carpeta que lo contendrá, luego dar un Click Derecho y elegir la opción
New file.
- Para renombrar o eliminar un fichero se tendrá seleccionar el fichero en cuestión, luego dar un Click Derecho y elegir la opción
Delete o
Rename respectivamente.
5) Abrir y modificar un fichero- Para abrir y modificar el contenido de un fichero en la carpeta del proyecto, se debe de seleccionar dicho fichero y dar un Doble Click, entonces este mostrará su contenido y permitirá su edición el Panel de vista y edición-
6) Guardar los cambios realizados en un fichero- Simplemente dar un Click Derecho en el Panel de vista y edición que muestra el fichero que se está modificando y elegir la opción Save.
7) Sincronizar cambios entre una Página Web y un Proyecto Web- Primero explicar que hasta aquí, se ha descrito como crear y modificar un Proyecto Web Local sin Servidor, sin embargo, si se necesita realizar los cambios sobre una Página Web de un Servidor Local y tenemos la estructura de ficheros de dicha Página Web en nuestro WorkSpace, podemos sincronizarlos para que los cambios que hagamos en la Página Web del Servidor Local se vean reflejados en nuestro Proyecto Web y viceversa.
- La diferencia entre un Servidor y un Proyecto Web es básimente el modo en que se tratan los recursos de estos. Por ejemplo, si se trabaja con un Proyecto Web como se ha ido haciendo en este tutorial, el navegador se encargará de leer directamente estos recursos (html, css, js, imágenes, etc.) interpretarlos y mostrarlos al usuario; sin embargo un Servidor Web trabaja diferente, será el propio Servidor el que se encargará de leer directamente estos recursos, tratarlos y entregárselos al navegador para que este lo muestre al usuario.
- Se puede ver rápidamente si se está trabajando con un Servidor Web o no, viendo la barra de direcciones del navegador:
- Para lograr esta sincronización se trendrá que abrir o seleccionar el fichero o recurso de la Página Web del Servidor o de la Página Web del Proyecto, dar un Click Derecho y elegir la opción Map to network resource o Map to file system resource respectivamente, a continuación elegir el fichero o recurso con el que se sincronizará. Al final, actualizar la Página para que tome el efecto.
8) Prueba y detección de errores- La consola de JavaScript de Chrome muestra:
1) Errores y advertencias que puedan haber en el código fuente de la página web, html, css y javascript.
2) Errores y advertencias que puedan haber en la carga de recursos que utiliza la página web, html, css, javascript, imágenes, etc.
3) Log de la consola, utilizada por los desarrolladores web para mostrar mensajes de prueba o depuración (console.log()).
4) Consola de ejecución de código javascript, permite escribir y ejecutar código JavaScript sobre la Página Web actual.
- Es una muy buena práctica en el acceder al error que muestra la consola por medio el acceso directo que nos ha preparado, hacer las correcciones necesarias en el código o al rededores y guardar, volver a la consola, limpiar el log de la consola (Ctrl + L), e inmediatamente despues actualizar la página web (F5) revisando que ya no hayan errores, caso contrario repetir este proceso.
