Introduccion a Codio

Anteriormente hablamos sobre que es codio, ahora daremos un recorrido por Codio.

Registro o login

El primer paso es crear una cuenta en codio, se necesita nombre, email, nombre de usuario y contraseña, o bien puedes crear una cuenta a partir de GitHub o BitBucket.

Una vez registrado en codio es posible acceder simplemente con el email o username y la contraseña, o bien usando las credenciales de GitHub o Bitbucket.

Dashboard

Una vez registrados y logeados en codio accederemos al dashboard, donde podremos ver una listas de nuestros proyectos, podemos abrir cualquier proyecto en el IDE simplemente haciendo click sobre el, si nuestra cuenta es nueva pues no habrá tal lista y lo mejor sera empezar creando uno, en la esquina superior derecha hay un botón que dice crear proyecto.

En esta lista tambien se muestran los proyectos compartidos con nosotros haciendo clieck en la opcion “Shared With Me”.

Nuevo Proyecto

 

Para crear un proyecto se deben seguir 3 pasos:

1.- Seleccionar el punto de inicio

Aquí es donde seleccionamos el Stack sobre el que funcionara nuestro proyecto, las opciones básicas son: Default, Python y LAMPP (Linux, Apache, MySQL, PHP).

Existe una opción avanzada donde podemos seleccionar otros Stacks o importar un proyecto de Github haciendo click en la opcion que aparece abajo de los 3 Stacks básicos.

2.- Detalles del proyecto

Solo debemos proporcionar un nombre y descripción de nuestro proyecto.

3.- Seleccionar visibilidad

Seleccionamos Publico o Privado, Privado únicamente para usuarios de paga.

Por ultimo hacemos click en el botón “Create” en la parte inferior.

En mi caso seleccionare la opción default, nombre de proyecto “Hola Codio”, Visibilidad Publica.

Editor

Una vez que seleccionamos un proyecto de la lista o creamos un proyecto nuevo, llegamos al editor, donde podremos crear archivos, editar, descargar a nuestra pc o subir archivos desde nuestra pc.

En este proyecto nuevo Codio nos suguiere:

• Abrir una terminal:  Tools > Terminal o Shift+Alt+T
• Abrir un archivo: File > open file o Ctrl+o
• Crear multiples paneles de edicion de codigo: View > panels
• Información sobre Box: Proyect > Box info menu
• Instalar lenguajes, bases de datos y otro software: Tools > Install Software
• Subir tus claves publicas de GitHub o BitBucket: Codio > Account > Applicacions
• Buscar y subir claves de cualquier servidor remoto: Codio > Account > SSH Keys

Podemos destacar 3 secciones importantes:

• Menu superior: En este menu se encuentran las opciones de codio y las de un programa clásico.
• Arbol de archivos: Se muestran los archivos y carpetas de nuestro proyecto.
• Editor: Se muestra el contenido del archivo y las opcion de edición, enumeración de lineas, autocompletado, para HTML se cierran las etiquetas abiertas y muchas opciones mas.

Nuevo Archivo

Creamos un nuevo archivo desde el menu File > New File …

Es obligatorio escribir el nombre del archivo y su extensión, también se puede seleccionar una plantilla, y apartir de esta partiremos, se generara el código correspondiente a la plantilla, si no seleccionamos una plantilla el nuevo archivo iniciara en blanco.

En mi caso creare el archivo index.html y seleccionare el template Html5.

 

Podemos ver que en la parte de la derecha se crear la lista de archivos debajo del nombre de la carpeta y del lado de la derecha el editor de codigo, editando el archivo seleccionado.

Herramientas de Archivo

Al dar click derecho sobre un archivo de la lista de la derecha, se abrirá un menu contextual.

 

El menu contiene las siguientes opciones:

• Preview static: como el archivo actual es un HTML significa que se puede abrir en el navegador y ver el resultado, y lo podemos hacer desde codio.
• Deploy …
• Set as proyect index
• Rename…
• Delete
• Copy
• Duplicate

Vista Previa

Vista previa de nuestro archivo HTML.

 

Conclusión

Sin duda CODIO es una poderosa herramienta recomendada en la que podemos trabajar en nuestros proyectos.

Recuerden que pueden enviarme sus dudas y comentarios, yo las resolveré con gusto

Mas adelante veremos mas características de CODIO.