Herramientas 18
La IDE de Nitrous: Como usar las nuevas funciones
Las nuevas funcionalidades en la IDE de Nitrous
La IDE de Nitrous recientemente agregó varias funcionalidades muy útiles, que la ponen al nivel de Sublimetext o de Vim. Para ponerlos un poco en contexto Nitrous es un ambiente de desarrollo on-line que se caracteriza porque viene con todo instalado, listo para enfocarse en programar (Rails, GO, Django/Python, PHP). Si quieren saber más acerca de Nitrous pueden leer este artículo que escribimos CLICK ACÁ.
Apariencia
Lo primero que agregó la nueva IDE de Nitrous es la personalización de la apariencia. Pueden escoger diferentes themes que cambiarán el coloreado del código y el color de la sheet. Hay diseños muy clásicos similares a otras IDEs populares, si usas Mac también hay un par que se parecen bastante a la consola. Puedes encontrar esto en views/themes.
Es importante contarles que la mayoría de la nuevas funcionalidades de la IDE de Nitrous se pueden activar o desactivar entrando en el menu de View.. Así si hay alguna que no les acomoda la pueden desactivar a su gusto.
Busquedas de archivos y de texto
La IDE de Nitrous ahora puede buscar un archivo por su nombre o buscar texto específico dentro de los archivos.
Para buscar un archivo hay que apretar ctrl+shift+p aparecerá un cuadro de diálogo donde se escribe lo que buscamos.
Y para buscar palabras dentro de nuestros archivos de código hay que apretar ctrl+shift+f, aparecerá un cuadro de dialogo donde primero se introduce el texto a buscar, y luego donde buscarlo. Si tienes muchos archivos es importante introducir en que carpetas será la búsqueda para que sea más rápido.
Auto-Corrección de código
Sí la IDE de Nitrous ahora tiene un corrector de código, algo así como el corrector de ortografía pero para código, a esto comúnmente se le llama “code linting”. Si cometes un error de sintaxis en un archivo, por ejemplo, JavaScript aparecerá subrayado con rojo y aparecerá un cuadro flotante donde se explica el error. Esto es genial si estás programando algo en un código que no eres muy familiar.
(more…)
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.
Nitrous, rails en la nube
¿Quieres empezar a codear en rails pero tienes un computador lento?, o no quieres instalar todas las herramientas?
Existe una solución en la web, Nitrous
¿Qué es Nitrous?
Nitrous es un ambiente de desarrollo web, que te permite codear en varios lenguajes sin tener que instalar absolutamente nada, sólo tienes que entrar a la web, crear una cuenta y crear un box.
Creando un Box con Nitrous
Entra al box, y en la consola escribe
cd workspace rails new prueba
Donde prueba es el nombre del proyecto. Se paciente, el comando bundle install, que se lanza cuando está creando un proyecto nuevo demora su tiempo.
Una vez que termine, escribe cd prueba (o el nombre de tu proyecto) y luego rails server.
después en el menú superior ir donde dice preview y luego port 3000, el cual es el por defecto de ruby on rails, y listo, ya tienes tu ide y servidor de ruby on rails corriendo en la nube.
Programar en grupos
Otra cosa bien interesante que tiene Nitrous es el modo colaborativo, aunque está en una etapa experimental permite trabar a varios personas incluso en el mismo archivo y poder ver simultaneamente los cambios.
Programación colaborativa en Nitrous
¿Cómo seguir?
En la página oficial de En 1 mes puedes ver los primeros videos gratis para que crees tu primera página con ruby on rails.