You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Para este curso, necesitarás instalar Git y también crear una cuenta en Github. Nos adentraremos en los detalles más intrincados de las próximas lecciones, pero Git es el programa que se ejecuta en tu computadora y Github es donde tu trabajo se almacena en línea.
Instalar Git
Instalar git es fácil. Sigue las instrucciones para tu sistema operativo.
Linux
Si estás usando Ubuntu, ejecuta el siguiente comando:
$ sudo apt-get install git
¡Y eso es todo!
Mac OS
Git es parte de las líneas de comando de Xcode, así que si ya instalaste Xcode, ¡ya tienes git!
Si estás usando OSX Maverick o una versión más reciente, solo escribe git en la terminal. Si no tienes instaladas las líneas de comando, te pedirá que lo instales.
De lo contrario, puedes descargar este instalador de Git que te guiará a través del proceso.
Lo primero que debes hacer es establecer tu identidad (nombre y correo electrónico) para tu cuenta. Esto es importante porque como git toma instantáneas (confirmaciones) en nuestro código, también almacenará quién hizo el cambio.
Alerta!!Debes de reemplazar John Doe y johndoe@example.com por tu información.
Para aprender más sobre la configuración de git puedes leer este artículo First-Time Git Setup
GitHub
Crea una cuenta
Primero lo primero: Si no has creado una cuenta en GitHub, ve a crear una en GitHub
Por favor, guarda tu usuario y contraseña en un lugar seguro. Muchos de los estudiantes olvidan esta información
Resumen
En esta lección, instalamos Git, un Sistema de control de versiones (VCS) a través de la terminal o directamente a través del instalador oficial.
También presentamos Github y cómo crear una cuenta para vincularla con Git en el futuro.
Esta lección es puramente para configurar Git y Github. En lecciones futuras, cubriremos la logística de trabajar realmente con estas dos herramientas.
Para usuarios de Mac: Tendrán instalado y configurado iTerm2.
Para usuarios de Linux: Tendrán instalado y configurado Terminator.
Ser capaz de usar las funciones básicas del terminal, como: Nuevo terminal, nueva pestaña, paneles de división.
Entender que es ZSH que ventajas te otorga.
Tendrás instalado y configurado ZSH y Oh-My-Zsh.
Tener un tema instalado en el terminal.
Introducción: Emuladores de terminal
Los emuladores de terminal proporcionan acceso basado en texto al sistema operativo (en diferencia con la experiencia gráfica del usuario de cualquier sistema operativo, que se administra con su mouse / trackpad).
El terminal proporciona una interfaz de línea de comandos para el sistema operativo. Se usa junto con un shell Unix, como bash o ZSH.
Precaución
Antes de continuar, ten en cuenta que verás comandos con el prefijo $. Por ejemplo:
$ cd carpeta
El signo de dólar indica que el comando se ingresará en la terminal. No necesitas escribirlo.
Terminal es el emulador de terminal incluido en los sistemas operativos OS X de Apple.
iTerm2 es un reemplazo gratuito de la terminal de OS X (el emulador de terminal por default de los sistemas operativos de Apple).
Tal vez te estés preguntando por qué necesitarías iTerm2 si ya tienes instalado un terminal. iTerm2 nos ofrece una serie de características adicionales que podemos configurar para brindarnos una mejor experiencia.
Algunos ejemplos de características geniales son:
Vista de panel dividido.
Ventana de teclas rápidas para terminal instantáneo en cualquier lugar.
Copy/Paste sin el mouse.
Junto con muchos más de los que aprenderemos más adelante en este capítulo.
En Finder, arrastra-y-suelta la aplicación de iTerm2 a la carpeta de Aplicaciones.
Abre iTerm2 buscando en la Barra de Búsqueda o haciendo click en el icono de App Launcher.
¡Ahora deberíamos poder ejecutar iTerm2!
Terminator (Unicamente Linux)
Como en OS X, Terminal es un emulador que incluye la mayoría de los sistemas operativos de Linux. Como hicimos en la sección anterior, vamos a instalar un emulador llamado Terminator.
Terminator fue originalmente creado y desarrollado por Chris Jones. Hoy en día, es uno de los emuladores de terminal más populares en la comunidad de Ubuntu.
Instalación - Terminator
Para instalar terminator, corre el siguiente comando:
Zsh es un shell de inicio de sesión interactivo. Al igual que con el terminal regular, permite la comunicación entre el usuario y la computadora. Proporciona muchas de las características útiles de bash pero también agrega muchas características nuevas.
Instalación de ZSH para Mac
1. Xcode
Para instalar ZSH, debes instalar Xcode antes, en App Store o en el sitio web para desarrolladores de Apple.
También debes instalar Homebrew ("El administrador de paquete faltante para macOS") primero. Homebrew te permite instalar fácilmente las cosas que necesitas que Apple no ha instalado por defecto. Afortunadamente, ¡instalar homebrew es muy fácil!
wget es una herramienta para hacer peticiones desde internet.
Cambiamos el bash predeterminado al nuevo zsh que acabamos de instalar:
$ chsh -s `which zsh`
chsh (Change Shell) está cambiando de un shell a otro.
Luego, tenemos que reiniciar:
$ sudo shutdown -r 0
Y eso es todo lo que necesitamos para instalar ZSH en nuestra computadora.
Oh-My-ZSH
Muchos desarrolladores eligen agregar la biblioteca Oh-My-Zsh encima de ZSH. Oh-My-Zsh es un marco de código abierto para administrar su configuración de ZSH. Una vez instalado, podremos aprovechar los cientos de plugins y bonitos temas disponibles en Internet.
Para instalar Oh-My-Zsh, solo tenemos que ejecutar el siguiente comando:
Vamos a pasar mucho tiempo en la terminal como desarrolladores. Para algunos usuarios, es agradable personalizarlo con sus propios colores y temas (similar al fondo del escritorio).
Echa un vistazo a los siguientes recursos. ¡Nos ayudarán a personalizar nuestra terminal y hacerlo elegante!
iTerm2
Colors
Para colores, podemos consultar el sitio web oficial de iTerm_themes y elegir el nuestro. Es muy recomendable usar
Solarized.
Checa este link para ver la paleta de colores recomendada.
Temas
Para temas, podemos buscar los disponibles en el repositorio oficial o podemos probar zshtheme.es para ver más temas que podemos configurar. Para instalar un tema, debes actualizar el archivo ~ / .zshrc y actualizar el valor ZSH_THEME con el nombre del tema.�
$ code ~/.zshrc
Si escribes ZSH_THEME="random" obtendrás un tema aleatorio cada vez que abras un nuevo shell.
Ironhack sugiere: ZSH_THEME="agnoster"
Terminator
Colores
En esta sección, sugerimos una configuración que hace que terminator se sienta como iTerm para Mac, pero puede elegir el que desee incluir.
Puedes omitir el la sección de instalar zsh y oh-my-zsh
Resumen
En esta lección, hemos aprendido que OSX de forma predeterminada tiene un emulador de terminal llamado Terminal que nos permite interactuar con la computadora usando comandos de texto.
También hemos aprendido que el terminal es muy limitado y podemos tener más funciones usando un emulador de terminal, lo que nos permite tener múltiples pestañas y paneles.
Hemos visto que los emuladores de terminal pueden tener muchos tipos diferentes de shells, que son solo programas que nos permiten ejecutar comandos del sistema operativo desde la terminal.
Hemos aprendido que OSX y Ubuntu por defecto vienen con un shell llamado bash, pero lo actualizamos para usar un shell más elegante: zsh.
Finalmente, hemos visto cómo configurar zsh usando una herramienta llamada oh-my-zsh, que nos permite configurar diferentes temas y complementos.
Entender que es Visual Studio Code y porque es útil.
Poder instalar, configurar y usar Visual Studio Code en tu computadora.
Introducción
Visual Studio Code es un editor de código fuente ligero pero potente que se ejecuta en el escritorio y está disponible para Windows, MacOS y Linux. Viene con soporte integrado para JavaScript, TypeScript y Node.js y tiene un rico ecosistema de extensiones para otros lenguajes (como C ++, C #, Java, Python, PHP, Go) y tiempos de ejecución (como .NET y Unity).
Un editor de código fuente es una aplicación que facilita la escritura de código. Es un editor de texto, pero está especialmente diseñado para editar código fuente de programas de computadora. Esta será tu herramienta de programación fundamental al escribir y editar el código.
VSCode es solo para escribir el código. Escribirás el código, lo guardarás en el sistema de archivos y luego ejecutarás el código con una aplicación diferente, como Node.js.
Instalación
El sitio de VSCode detectará nuestro sistema operativo automáticamente. Visita https://code.visualstudio.com y descargar lo haciendo clic en el botón para descargar la aplicación.
Descomprime el archivo zip justo donde lo descargaste en tu computadora.
Arrastra la nueva aplicación a la carpeta de "Aplicaciones".
Instalar VSCode en Ubuntu
Ejecuta el siguiente comando para descargar el archivo:
$ sudo dpkg -i <file>.deb
Instala las dependencias de VSCode, si hacen falta:
$ sudo apt-get -f install
Configuración de VSCode
Ahora que VSCode está instalado en tu sistema, ábrelo, configura y familiarizate con el editor.
Cuando inicies VSCode por primera vez, verás la Guía de bienvenida. También puedes abrir la página de Bienvenida para comenzar con los conceptos básicos del Código VS. Ayuda > Bienvenido.
Barra de comandos
Si presionas Cmd⌘ + Shift + P o Ctrl + Shift + P mientras se enfoca en un panel de editor, aparecerá la paleta de comandos.
Atajos de teclado predeterminados
Todos los comandos están en la barra de comandos con el enlace de clave asociado (si existe). Si olvidas un atajo de teclado, usa la barra de comandos para ayudar
Puedes descargar los atajos de teclado predeterminados para tu sistema operativo.
Puedes cambiar el tema haciendo clic en el atajo de teclado: ⌘K ⌘T o Ctrl + K Ctrl + T y elige el que prefieras.
También, puedes cambiar el tema de los iconos de los archivos.
Puedes instalar más temas y extensiones desde el Store
Ajusta tu configuración
Abre el archivo setting.json (⌘ + , o Ctrl+)
Para cualquier cambio en la configuración, debemos de hacerlo en el archivo de la derecha.
Recomendación de VSCodeSi quieres empezar a programar como un verdadero ironhacker, ajusta el tamaño del TabSize a 2 espacios
Paquetes de VSCode
Esta es una de las cosas interesantes acerca de VSCode. Muchas de sus características principales son, en realidad, solo paquetes implementados de la misma manera que implementaría cualquier otra funcionalidad.
Los paquetes que se incluyen con VSCode se conocen como paquetes Core. Los que no se incluyen con VSCode se conocen como paquetes comunitarios. Puede descargar e instalar paquetes para agregar funcionalidades a tu editor de texto o incluso desarrollar sus propios paquetes.
Puede instalar y administrar paquetes en la vista Configuración. Allí encontrará sus paquetes instalados en la pestaña Paquetes.
VSCode Linters
Instalemos algunos paquetes útiles para la práctica.
Linting es el proceso de ejecutar un programa que analiza el código para posibles errores.
Los programas de Linter automáticamente encuentran errores básicos y te dicen dónde están y cómo solucionarlos. Hará que tu código se rompa menos y evitará problemas confusos.
Lint fue el nombre dado originalmente a un programa en particular con una funcionalidad similar en el código fuente del lenguaje C. Ahora, el término se aplica ampliamente a herramientas que señalan errores potenciales en cualquier lenguaje de computadora.
Para mejorar la funcionalidad de nuestro entorno VSCode, instalemos los programas de linter más útiles.
Para instalar paquetes en VSCode, ve a la pestaña Extensiones (Cmd⌘ + Shift + X o Ctrl + Shift + X).
Busca los paquetes ESLint y HTMLHint y da click en al botón de instalar.
Deberás reiniciar VSCode después de la instalación
Paquetes extra que recomendamos
Prettier
Auto rename tag
Path intellisense
Resumen
En esta lección, hemos visto que VSCode es un genial editor de código fuente con excelentes paquetes y tiene un juego de herramientas completamente personalizable. También es de código abierto, lo que significa que con el tiempo podrás saltar al código del editor.
Tenga en cuenta que elegimos VSCode porque es fácil de entender y poner en marcha. Todos tienen una opinión sobre qué editor de texto es el mejor, pero todos sabemos lo que dicen sobre las opiniones :). Quédate con VSCode y explore más adelante para que podamos enfocarnos en el código durante el curso.
Entender qué es un Sistema de control de versiones distribuido (DVCS).
Entender cómo funciona un DVCS.
Entender porqué un DVCS es muy importante en desarrollo.
Entender qué es una Plataforma de Alojamiento de Código.
Entender qué es Git.
Entender qué es GitHub.
Entender la relación entre Git y Guthub.
¿Qué es un DVCS?
Un DVCS o Sistema de Control de Versiones es un sistema que graba los cambios en un archivo o un conjunto de archivos en el tiempo para que tu puedas retomarlo en una versión específica más adelante.
Estos sistemas te permiten tener diferentes versiones de cada archivo que compone tu proyecto, así puedes recuperar versiones anteriores en caso de que cometas un error (es muy común).
El DVCS trabaja normalmente con una plataforma que aloja código, donde tu equipo puede guardar el código del proyecto para compartirlo con el resto del equipo.
En programación, la combinación de un DVCS con una plataforma que aloja código ayudan a que puedas trabajar con tu equipo. Esta es la herramienta más poderosa que usarás para reunir el código creado por todos los miembros del equipo.
Cuándo dos miembros del equipo trabajan en el mismo archivo, el DVCS va a ayudarlos combinar su código y elegir qué código se quedará cuando ambos editaron el mismo código.
¿Porqué es muy importante usar un DVCS en desarrollo?
Tener diferentes versiones del mismo archivo te da un gran poder sobre tu código. Como se dijo anteriormente, si falla algo en la última versión del código, podrá recuperar la versión correcta anterior de su código.
También es muy útil cuando combinas código de diferentes desarrolladores en un solo archivo, o incluso archivos diferentes en un proyecto (no te preocupes si no entiendes esto ahora, lo aprenderás en profundidad más adelante).
Otra buena característica que te ofrece es la posibilidad de ver quién ha escrito cada código. Permite mostrar cuántas horas has estado trabajando, por supuesto, pero es más divertido usarlo para descubrir quién ha estropeado el código.
Asignemos cada componente de la ecuación en su posición, y luego veamos un ejemplo para comprender el panorama general de cómo funcionan ambos elementos juntos.
¿Qué es Git?
Git es un DVCS gratuito y abierto diseñado para manejar proyectos de programación de computadoras con velocidad y eficiencia. Es fácil de aprender y tiene un rendimiento muy alto.
Git corre a nivel local. ¿Qué significa eso? Te permite usar el Sistema de control de versiones en tu computadora. Significa que tendrás en tu propia computadora un Sistema de control de versiones, para recuperar todo el código, ver qué cambios ha realizado, etc.
Comprenderás por qué necesitas usar Git en tu computadora en un minuto. Antes de entender eso, debes aprender qué es GitHub.
¿Qué es GitHub?
GitHub es una plataforma de alojamiento de código para control de revisión y colaboración. Te permite a ti y a otros trabajar juntos en proyectos desde cualquier lugar. Con github, puedes hacer muchas cosas para colaborar en un proyecto de código:
Controla diferentes versiones del código.
Creación de ramas.
Forkear repositorios.
Hacer Pull Requests.
Ver proyectos de otras personas y aprender cómo codifican.
Comentar el código de otras personas.
Todos estos conceptos se tratarán más adelante en el pre-work, ahora mismo solo tienes que entender lo básico: GitHub es una plataforma de alojamiento de código para el control de revisiones y la colaboración.
¿Cómo se relacionan Git y Github?
En este punto, es posible que hayas notado cómo se relacionan git y github. Git te permite controlar tu código en tu máquina local, mientras que GitHub te permite colaborar con tus compañeros de equipo haciendo pull y push del código en el que has estado trabajando.
Puede entender que git es tu sistema de control de versiones en local, mientras que GitHub es tu sistema de control de versiones del equipo. Veamos un ejemplo para comprender mejor cómo funciona en un entorno de dos desarrolladores.
Si necesitas un mejor ejemplo para entenderlo, piensa en el correo electrónico y GMail. El correo electrónico es un protocolo que se usa para enviar / recibir correos electrónicos entre los usuarios, mientras que GMail es una interfaz visual que usas para enviar / recibir correos electrónicos.
El correo electrónico existe independientemente de GMail, todos pueden instalarlo en su servidor, pero GMail agrega características adicionales y proporciona el servicio.
Lo mismo ocurre con Git y GitHub. Git es un servicio que se puedes instalar en un servidor, mientras que GitHub es un servicio adicional que te permite usar las versiones de control de Git y agrega la característica adicional de las colaboraciones del equipo, implementando una interfaz visual para git.
¿Cómo funciona?
En el cuadro a continuación, puedes ver un escenario típico en el que dos desarrolladores diferentes trabajan en un archivo de forma colaborativa. Aquí hay dos desarrolladores involucrados, Mary que creará el archivo y lo enviará a GitHub, y Bob que extraerá este archivo, hará algunos cambios y lo enviará de regreso a GitHub para compartir estos cambios con Mary:
Sin entrar en detalles de cómo exactamente se ejecuta el proceso, y cuáles son los comandos, echemos un vistazo a una perspectiva de alto nivel de cómo dos desarrolladores pueden colaborar en un proyecto.
Creación de archivos
Antes que nada, Mary crea un archivo, llamado archivo.txt. Una vez que se crea el archivo, agrega algo de contenido. Supongamos que agrega ¡Hola, mundo! Y guarda los cambios. En este punto, ni Git ni GitHub han estado involucrados en el flujo de trabajo.
Agrega el archivo a Git
Una vez que el archivo está listo para compartir, Mary debe hacer un commit con Git. Aprenderás cómo agregar y enviar archivos a Git en futuras lecciones del pre-work. El punto más importante aquí es que una vez que el archivo se agrega y se compromete en Git, Git genera la primera versión del archivo.
En este paso del proceso, tenemos un archivo.txt en nuestra máquina local y tenemos la v1 de este archivo almacenada en el Git de Mary localmente, en su máquina.
Push/Pull en GitHub
Una vez que Mary tenga el archivo en su repositorio local de Git, está listo para enviar este archivo a GitHub. Nuevamente, aprenderás cómo enviar un archivo a GitHub más adelante en el pre-work. Al hacer esto, Mary le permite a su compañero de equipo, Bob, la oportunidad de obtener este archivo y hacer algunos cambios.
Para hacerlo, Bob tiene que traer los cambios de GitHub(pull) a su propia computadora. Cuando Bob hace pull de los cambios de GitHub, suceden dos cosas:
El archivo.txt se agrega al repositorio de Bob, en su máquina local.
Automáticamente, aparece una versión del archivo en el proyecto de Bob, también localmente.
Actualizar el archivo
Una vez que Bob tiene el archivo en su computadora, cambia el contenido y agrega lo siguiente:
Hola, Mundo!
Hola, Mary! Gracias por compartir este archivo! :)
De nuevo, como lo hizo Mary anteriormente, Bob tiene que agregar y enviar los archivos a su repositorio de Git antes de poder enviarlos a GitHub. Cuando Bob confirma los cambios de archivos en su repositorio de Git, Git crea la versión 2 del archivo.
Estado actual
En esta etapa, antes de que Bob suva los cambios a GitHub(push), Mary tiene la versión 1 del archivo, mientras que Bob tiene la versión 2 del mismo archivo.
Una vez que Bob haya enviado los archivos a su repositorio de Git, puede enviarlos a GitHub haciendo push de todos los cambios.
Obteniendo los últimos cambios
Finalmente, Mary puede hacer pull del archivo de GitHub a su computadora. De nuevo, esto significa que la versión del archivo se agregará a su repositorio local de Git, y el archivo en su proyecto se actualizará automáticamente.
Controlando las versiones
Ahora, ambos desarrolladores tienen ambas versiones del archivo en sus repositorios Git y la última versión del archivo en su carpeta de proyectos. Eso significa que pueden consultar la versión 1 o 2 cuando lo deseen, para ver quién hizo qué cambios y qué cambios se incluyen en cada versión.
Resumen
En esta lección, has aprendido qué es un Sistema de control de versiones distribuidas. También has visto lo que son Git y GitHub, y has entendido la gran imagen de cómo dos desarrolladores pueden colaborar utilizando Git y GitHub como equipo.
Crea una solicitud de pull en repositorios remotos que no te pertenecen.
Introducción
GitHub es una plataforma que fomenta la codificación social. Debido a esto, GitHub tiene características de GUI para comandos comunes de Git que fomentan esta colaboración.
En esta lección, vamos a discutir algunos temas relacionados con este código compartido y, de hecho, jugar con un repositorio remoto para probarlos.
Bifurcación - Fork
Que significa Forkear?
Al forkear un repositorio, se toma el código de otra persona y se crea una copia propia. Eventualmente, los cambios que realices pueden incluirse en el repositorio original. En GitHub, esto simplemente significa tomar el repositorio remoto de alguien y copiarlo en tu repositorio remoto.
Suena como plagio ¿eh? Realmente no. Hay algunos escenarios diferentes en los que esto está totalmente bien:
Contribuciones de código abierto: la mayoría de los repositorios públicos de GitHub están ahí para que contribuyas. Ya sea express.js o jQuery, abiertamente aceptan contribuciones. El único método para hacerlo de manera eficiente es forkeando sus repositorios.
Crear un proyecto nuevo: en ocasiones, a ti o a un grupo de personas puede no gustarles la forma en que se está ejecutando un proyecto de código abierto. Si el proyecto es de fuente abierta y tiene una licencia adecuada, entonces simplemente pueden forkear el proyecto y ejecutar su propia versión. Ve esta lista de proyectos de software forkeados.
Enviar trabajo aquí en Ironhack: tenemos un informe central de todos los ejercicios que completarás durante el curso. Para presentar su trabajo durante el curso, estarás haciendo un fork de estos repositorios.
Como hacer fork
Afortunadamente, forkear por sí mismo es súper simple. Navega hasta este repositorio y haz clic en el botón de la esquina superior derecha de la página:
En el siguiente diálogo, elije tu propia cuenta como el lugar para forkear:
¡Ahora tienes tu propia versión de nuestro repositorio!
Clonar
Que es clonar un repositorio?
Clonar un repositorio es simplemente tomar un repositorio remoto y copiarlo a su máquina local. Esto puede ser útil en un par de escenarios diferentes:
Has creado un fork de un proyecto y ahora necesitas copiarlo a tu computadora.
Estás colaborando en un proyecto en el que alguien te ha invitado a tu repositorio como colaborador, como un repositorio privado en una empresa, y necesitas copiarlo en tu computadora.
Cómo clonar
Ahora que hemos forkeado nuestra propia versión del repositorio de ejercicios, debemos copiarlo en nuestra computadora para poder trabajar en ello. En tu propia copia del repositorio, da clic en el botón Copiar o Descargar y copia el enlace a su portapapeles:
Luego, en tu terminal, ve a tu carpeta de códigos y ejecuta el comando git clone con el enlace del repositorio:
$ cd~/code
$ git clone < aquí el link que acabas de copiar >
Si todo salió bien, deberías tener una nueva carpeta llamada lab-github-practice:
$ ls
# => lab-github-practice
Los repositorios clonados ya tienen un repositorio de Git. No es necesario ejecutar git init nuevamente.
$ cd lab-github-practice
$ ls -a
# . .. .git index.html
abre el proyecto en tu editor de código
$ code .
Ejercicio
En el index.html del sitio de cartera que acabamos de clonar, hay algunos textos de relleno que debes completar con tus propios datos.
Donde dice actualmente Bienvenido a la página de Ironhackers, completa tu nombre para Ironhacker.
En las dos listas Cosas que me gustan y Cosas que no me gustan, completa la lista con tus propios datos.
Después de realizar estos cambios, agrega y confirma esos cambios.
El repositorio ahora está en nuestra computadora y hemos realizado cambios. Ahora veamos cómo enviar nuestros cambios al repositorio principal del propietario original.
Solicitud pull
¿Qué es una solicitud pull?
Una solicitud pull es una forma de notificar al propietario del repositorio original que has realizado algunos cambios y deseas fusionar esos cambios en su repositorio, a discreción del propietario.
Para entender por qué harías una solicitud pull, primero necesitas una perspectiva ligeramente diferente. En este momento, eres una persona, trabajando en un archivo, en un proyecto.
En sus empresas profesionales, proyectos de código abierto e incluso más adelante en el curso, cuando colaboras en algunos ejercicios grupales, puede ser muy difícil administrar qué cambios se realizan, cómo se hacen y evitar conflictos.
Por ejemplo, echemos un vistazo a todas las personas que intentan contribuir al framework express.js que utilizaremos más adelante en el curso:
Estas son personas que han forkeado el repositorio, han realizado algunos cambios y luego han creado una solicitud pull. ¿Por qué?
Le da al propietario del repositorio la oportunidad de revisar el código antes de incluirlo en la base de código. Los proyectos de código abierto están abiertos después de todo, pero tienen estándares. A menudo, los propietarios del proyecto querrán revisar el código para asegurarse de que no haya interrupciones en los cambios, ni siquiera ataques peligrosos en el PR (pull request). En otros casos, incluso puede ser que su jefe revise su código para asegurarse de que está haciendo un buen trabajo.
Deja espacio para el debate entre las partes interesadas: en los proyectos de código abierto, a menudo hay muchas partes interesadas que desean aprobar o denegar características antes de que se incluyan en el proyecto. Por ejemplo, mira esta solicitud pull. No te preocupes por el tema, no tendrá sentido por un buen tiempo.
Como hacer una solicitud pull
Tus cambios locales en nuestro proyecto de práctica deben organizarse y comprometerse ahora ... ¿no? El siguiente paso es presionar a su repositorio.
Si recuerdas en una lección anterior, tuvimos que agregar un control remoto a nuestro repositorio para poder enviar a GitHub. Una ventaja de clonar un repositorio de GitHub es que el control remoto ya está conectado:
$ git remote
# origin
Recuerda que el origen del nombre remoto es simplemente la convención de GitHub para el nombre de tu repositorio remoto. En el ejemplo anterior, se llamaba github-repo, y se puede llamar cualquier cosa. Sin embargo, por defecto, GitHub nombrará el origen remoto cuando clones un repositorio.
El siguiente paso es enviarlo a tu propio repositorio:
Y luego haga clic en "Comparar a través de los forks":
En el menú desplegable del lado derecho, elija su fork como el fork de la cabeza:
El fork base es el repositorio original. Estás diciendo "Comparar mi rama con el original". Si has ejecutado esto correctamente, deberías ver aparecer una pantalla con una comparación lado a lado de los dos proyectos:
Esto es súper útil, especialmente en el futuro cuando tienes muchos archivos para comparar. da clic en "Crear pull request":
Finalmente, se te presentará un cuadro de diálogo solicitando un título y una descripción de la solicitud de pull. Normalmente, esto se usará para describir los cambios que ha realizado. En Ironhack, utilizamos esto como una herramienta para verificar tu trabajo.
En el título, incluye eu nombre y el campus al que asistes; "Ironhacker - México" y "Portafolio Personal GitHub completado".
En la descripción, deja uno (o muchos) de tus problemas al aprender Git o GitHub.
Pulsa el botón "Crearpull request", y eso es todo!
Ejercicio
En nombre de la colaboración, visita la página de solicitudes de extracción. Encuentra la solicitud de extracción de otra persona y trata de resolver la pregunta en la descripción de su solicitud de extracción en los comentarios.
Si aún no hay solicitudes de extracción, intenta volver a visitar la página en una fecha posterior.
Referencia rápida
Aquí tienes los comandos más importantes que deberías haber aprendido en esta lección:
Clonar un proyecto
$ git clone <url-del-repo>
Resumen
En esta lección, discutimos la colaboración en GitHub.
Esto incluyó la creación de un repositorio, lo que significa crear una copia de un repositorio remoto en sus propios repositorios.
También discutimos cómo descargar un repositorio remoto de git a su máquina usando git clone.
Finalmente, discutimos cómo fusionar tus cambios locales en el repositorio principal de otra persona utilizando solicitudes pull, y por qué esas solicitudes pull son importantes para los proyectos de desarrollo del mundo real.
La colaboración es uno de los propósitos principales de GitHub. Usando las herramientas que hemos resaltado en esta sección, puede hacer cosas como contribuir a proyectos de código abierto.
Además, podemos utilizar estas características para otras cosas, como enviar trabajos en Ironhack y trabajar en un equipo de desarrollo en el mundo real.
Verificar el estado de tus repositorios para ver qué ha cambiado.
Agregar tus archivos modificados al área de ensayo con git add.
Crear un checkpoint de los cambios que ha realizado con git commit.
Ver confirmaciones anteriores que hayas realizado con git log.
Introducción
Hemos discutido en una lección anterior que Git es un VCS para hacer un seguimiento de los cambios que realiza en los archivos y carpetas de sus proyectos. Ahora que tenemos la teoría de Git, analicemos el lado práctico y cómo usar realmente esta teoría.
Comencemos creando un directorio para jugar con Git.
Agrega texto a data.txt. Usa tus propios datos si quieres:
Name: Ironhacker
Age: 25
Favorite Color: Yellow
Creando un Repositorio
git init y la carpeta .git
Discutimos en la lección anterior cómo se usa Git para realizar un seguimiento de los cambios en los archivos y carpetas en su máquina local, pero ¿cómo se hace realmente?
En su carpeta git-practice, ejecute el siguiente comando:
$ git init
Deberías tener git instalado en tu computadora. Puede verificarlo ejecutando el siguiente comando en la terminal:
$ git --version
La salida debe ser su versión de git, algo así como git versión 2.6.4.
git init es el comando para decirle a Git que esta carpeta de tu proyecto será un repositorio de Git. A partir de ese momento, Git rastreará todos los cambios a los archivos y carpetas dentro de esa carpeta.
Pero, ¿cómo hace un seguimiento de estos cambios?
Vamos a ejecutar el comando ls para mostrar carpetas y archivos ocultos dentro de la carpeta:
$ ls -a
# => . .. .git data.txt
# => retorna un valor. No tienes que escribirlo en tu terminal.
Además de data.txt, tenemos una nueva carpeta llamada .git. No creamos este directorio nosotros mismos, Git lo hizo cuando ejecutamos el comando git init.
$ ls -a .git
# => . .. HEAD config description hooks info objects refs
El repositorio .git es donde Git realiza un seguimiento de todos los cambios que realiza, y mucho más. No tiene sentido entrar en los detalles específicos de la carpeta ahora, pero la haremos referencia a medida que avanza la lección.
Si por alguna razón ejecutas git init en una carpeta que no pretendías hacer un repositorio de git, puedes simplemente eliminar la carpeta.git usando rm -rf:
$ git init
$ ls -a
# => . .. .git data.txt
$ rm -rf .git
Ten cuidado, sin embargo. rm -rf es un comando peligroso que puede borrar todo en su sistema si se usa incorrectamente. Además, cualquier historial que tengas en el repositorio de git desaparecerá.
Dónde crear un repositorio
Puede ser más fácil comenzar esto diciéndote dónde no crear un repositorio, y por qué.
La mayoría de las veces, querrás crear el repositorio de Git en una carpeta de proyecto específica. No deseas crear un repositorio de Git en una carpeta de alto nivel, como Documentos, o tu directorio de origen (~).
¿Por qué? Git realiza un seguimiento de la carpeta y todas las sub-carpetas de esa carpeta. Esto significa que si creas un repositorio de Git en tu directorio de origen (~), harás un seguimiento de todos los cambios en los archivos y carpetas en la computadora de tu usuario local.
Esto es malo porque:
Es innecesario.
Cuando vayas a crear un repositorio de Git más adelante dentro de un proyecto, es posible que tengas problemas.
Cuando finalmente desees almacenar tus repositorios Git en GitHub más adelante, puedes subir accidentalmente información sensible.
En Ironhack, crearás muchos proyectos y carpetas para rastrear con Git. Echa un vistazo al siguiente árbol para tener un ejemplo de dónde deberías estar creando repositorios Git:
Volvamos a nuestra carpeta git-practice. Ya hemos ejecutado git init, y Git realiza un seguimiento de nuestros cambios. Actualmente tenemos un archivo en la carpeta que acabamos de crear.
¿Cómo podemos saber de qué se está dando cuenta Git? La respuesta es un comando que usarás muy seguido al crear proyectos: git status.
El estado de Git nos dice qué archivos y carpetas están siendo rastreados, y cuál es su estado actual según Git.
$ git status
Git nos está diciendo algunas cosas con la salida, pero a la que deberíamos prestar atención en este momento es a la que dice archivos no rastreados. data.txt es untracked porque lo hemos creado en nuestro sistema de archivos, pero no le hemos dicho a Git que lo vea todavía.
Volveremos y haremos referencia al estado de Git a medida que continuemos la lección, pero descubramos cómo agregar un archivo para que Git lo rastree.
Agregando Cambios: git add
Agregando un archivo
Actualmente, data.txt está en nuestro sistema de archivos, pero Git no lo rastrea. Los archivos y carpetas en este estado se denominan nuestro directorio de trabajo. Para rastrear estos archivos con Git, debemos agregar a nuestra área de preparación. El área de preparación es un lugar donde hemos notificado a Git que se hará un seguimiento de algo.
Para agregar un archivo al área de ensayo, usemos el comando git add:
$ git add data.txt
$ git status
Ahora, en lugar de decir "Untracked files", Git nos dice que data.txt está en etapas, y en la sección "changes to be committed".
Discutiremos como hacer "commits" en breve, pero por ahora podemos ver que Git ahora está rastreando nuestro archivo.
Agregando varios archivos
A menudo, en los proyectos, queremos crear múltiples archivos al mismo tiempo. Esto se puede hacer de diferentes maneras.
Agreguemos algunos archivos nuevos para jugar con esto:
$ touch file1.txt file2.txt file3.txt file4.txt file5.txt
$ git status
Actualmente data.txt está en etapas, pero los otros 5 archivos no.
Pongamos archivo1.txt yarchivo2.txt
$ git add file1.txt file2.txt
$ git status
Pensándolo bien, me gustaría organizar todos los archivos en mi proyecto:
$ git add -A # -A stands for "All"
$ git status
Todo está agregado!
Quitar Arivos
Parece que en realidad no queremos agregar file5.txt a nuestra área de preparación. Hemos cometido un error, así que vamos a arreglarlo. Podemos usar el comando git reset para eliminar un archivo del área de ensayo.
$ git reset file5.txt
$ git status
Ahora file5.txt está de vuelta en nuestro directorio de trabajo, ¡y ya no está organizado!
Guardando Cambios: git commit
Qué es un commit?
La pregunta que puedes haber estado haciendo antes de este punto es: ¿guardar para qué? La respuesta está en las capturas de pantalla. Has notado que los archivos en el área de preparación están etiquetados con "Changes to be commited".
A commit en Git es una instantánea del estado de los archivos y carpetas en su proyecto, así como del contenido en ellos.
Sus proyectos evolucionarán y cambiarán con el tiempo. A medida que agrega contenido y lo modifica, su estado cambia. A medida que su estado cambia, los commits capturarán ese punto en el tiempo.
Estado en informática y desarrollo web es un término utilizado para describir el estado de un objeto, carpeta, archivos, etc. y sus atributos o contenidos.
SI data.txt contiene:
"Hello"
Y lo modificamos para que diga:
"Goodbye"
Su estado ha cambiado
El uso de commits en Git harán lo siguiente:
Ayuda a revertir los errores a una versión anterior (El botón de oh shit).
Colabora con diferentes desarrolladores en tus proyectos sin colisionar.
Mantener un registro de quién hizo cambios, y cuándo los hicieron.
Por ejemplo, consulte este ejemplo de commits de la evolución de un proyecto:
Cómo hacer commits
Podemos hacer commits usando el comando git commit. Esto tomará todos los archivos en nuestro área de preparación y creará un nuevo commit en nuestro repositorio.
Echemos un vistazo al siguiente diagrama para obtener más información visual:
Ya hemos agregado archivos a nuestro área de preparación desde nuestra carpeta de trabajo, ahora tenemos que mover los de forma permanente a nuestro repositorio. El estado de nuestro proyecto quedará congelado para siempre en ese momento.
$ git commit -m "Initial commit * Added data, and created needed files"
$ git status
git commit -m
significa que daremos un mensaje con nuestro commit. Esto será útil más adelante, pero por ahora ten en cuenta que debes dejar un mensaje detallado y descriptivo sobre lo que estás haciendo en el commit.
Esto es útil cuando necesitas averiguar qué cambios has realizado en el pasado y por qué se hicieron.
¿Qué pasó con nuestros archivos? * Cuando creamos commits, elimina los archivos del área de preparación, porque se han confirmado. El único archivo restante es file5.txt, que no hemos agregado.
Estupendo. Ahora nuestros archivos están añadidos y almacenados en Git, pero ¿cómo podemos ver los commits que hemos realizado previamente y qué han hecho?
Revisando Commits: git log
En algún momento en el futuro, es probable que deseemos ver todos los cambios en nuestro proyecto. Además, es posible que desee revertir nuestro proyecto a un punto anterior.
El comando git log se usa para ver los commits y los datos sobre esos. Demos le una oportunidad y veamos qué pasa:
Presiona q para salir de esta vista en la terminal
En este diálogo se incluye nuestro commit y algunos datos sobre el mismo. Cada commit tiene lo siguiente:
Commit SHA (commit 905616a7252c247f3244bf6ca00faeeba324a26f) * Puedes pensar en esto como un ID único para cada commit. Esto se puede usar en el futuro para revertir a este commit, eliminarlo o combinar varios.
Autor: el atributo de autor es útil cuando se trabaja con equipos para ver quién hizo qué. Si alguien hace un cambio radical, puedes encontrar a quién y regañarlo por eso.
Fecha * Fecha en que se creó el commit.
Mensaje * El mensaje que dejamos al hacer el commit. Esto nos da un contexto sobre lo que se hizo en ese punto. Es por eso que es muy importante dejar mensajes detallados y descriptivos.
Hagamos otro commit y veamos cómo cambia el registro:
Al igual que la mayoría de los comandos de Git, git log es extremadamente personalizable en cuanto a cómo se puede formatear la salida. Consulte el articulo de Advanced Git Log para mas detalles
Ejercicio
Codeschool tiene un tutorial interactivo para poner en práctica los comandos que acabamos de aprender.
Una vez que hayas terminado envía una captura de pantalla de un desafío completado a su TA o Instructor.
Referencia rápida
Aquí tienes los comandos más importantes que deberías haber aprendido en esta lección:
Iniciar un repositorio
$ git init
Ver cambios en el repositorio
$ git status
Agregar archivos
$ git add <file-name>
Guardar cambios
$ git commit -m"<commit-message>"
Ver los commits
$ git log
Resumen
En esta lección, hablamos sobre cómo crear un repositorio de Git y cómo Git realiza un seguimiento de estos cambios en la carpeta .git. Además, también discutimos dónde crear estos repositorios para un flujo de trabajo eficiente.
También discutimos las áreas working y staging, y cómo mover archivos entre ellas. Además, hablamos sobre cómo mover archivos desde el área de preparación a su repositorio en el área de commits.
Finalmente, discutimos cómo ver estos commits, y los diferentes datos registrados en esos commits.
Estos comandos serán algunos de los comandos más comúnmente utilizados que serán cruciales para tu flujo de trabajo de desarrollador. ¡Familiarzate con su uso y no temas utilizar git status todo el tiempo!
Comprender que es un repositorio remoto y por qué es útil.
Ser capaz de empujar y extraer el código entre tus repositorios locales y remotos.
Que es Github
Como se discutió anteriormente, GitHub es una herramienta para colaborar con otros (DVCS) usando Git. En resumen, GitHub nos permite alojar nuestros repositorios Git en la nube para que puedan ser compartidos por otros. GitHub también tiene características para:
Administrar Repos: la colaboración del equipo puede ser complicada. Cuando varias personas trabajan en el mismo proyecto, es difícil encontrar una fuente de verdad y administrar quién puede cambiar el repositorio. GitHub tiene características para facilitar esto.
Gestión de proyectos: con los proyectos de código abierto, a menudo es difícil establecer la dirección general del producto, mostrar de forma transparente qué características se están implementando y la prioridad de esas características.
Redes sociales: GitHub tiene funciones para buscar y encontrar otros desarrolladores, buscar repositorios con un lenguaje específico y seguir / dejar de seguir a otros programadores.
Organizaciones y administración de equipos: si tienes una empresa o un proyecto en el que trabajan varias personas, puedes crear una organización o un grupo de personas con diferentes permisos y capacidades en el repositorio.
…y muchos más.
Actualmente, tenemos un repositorio local de Git. Tal como están las cosas, no podemos compartir este repositorio con nadie, así que cambiemos eso.
Creando un repositorio en Github
Hay bastantes maneras de crear un repositorio de GitHub, pero hablemos de lo más simple primero. La forma más fácil de comenzar a trabajar es visitar GitHub. Si aún no lo has hecho, crea una cuenta y luego visita la página de inicio.
Has clic en el signo 'más' en la esquina superior derecha de la página, y luego haga clic en "Nuevo repositorio":
Verás la siguiente página. Completa los datos tal como están en la captura de pantalla:
Algunas cosas que debe tener en cuenta sobre esta página:
Nombre del depósito: este es el nombre del depósito tal como aparecerá en GitHub. Este no tiene que ser el mismo nombre que tu repositorio local.
Descripción: esto es útil para personas externas que pueden tropezar con su proyecto en GitHub.
Público / privado: si tu repositorio es público, eso significa que cualquiera puede descubrir tu proyecto en Google o su perfil. Los proyectos del mundo real muchas veces serán repos privados, por lo que solo aquellos que sean colaboradores pueden verlo. Esta es una función paga, así que por ahora será pública.
Deje el resto como predeterminado por ahora, y haga clic en "Crear repositorio". A continuación, se le dirigirá a una página que se parece a la siguiente:
Prestemos especial atención a la siguiente sección "empujar un repositorio existente desde la línea de comandos", ya que ya tenemos un repositorio local en nuestras computadoras:
GitHub nos da algunas instrucciones aquí, pero echemos un vistazo más profundo.
Añadiendo un Repositorio remoto: git remote
Nuestro repositorio remoto y nuestro repositorio local son dos repos completamente diferentes. Cuando hagamos cambios a nivel local, tendremos que enviarlos a nuestro repositorio remoto. Cuando hacemos cambios de forma remota, tendremos que llevarlos a nuestro repositorio local.
El primer paso en esto es conectar los dos repos. Esto se puede hacer utilizando el comando add remoto de git, mientras se brindan algunas opciones:
Alias. Usted crea un alias en su sistema para el repositorio remoto, que apuntará al repositorio de GitHub. Es muy común llamar a este origen de Alias, pero puede usar el nombre que desee.
URL del repositorio GitHub. URL única que GitHub proporciona para cada uno de sus repositorios.
Ve a tu carpeta practica-git en tu computadora si aún no estás allí, y ejecuta lo siguiente:
Podemos ver una lista de repos remotos adjuntos a nuestro repositorio local actual ejecutando git remote sin opciones:
$ git remote
Puedes tener tantos o tan pocos enlaces remotos como desees. GitHub es solo un servicio remoto de alojamiento de Git. Hay otros como Bitbucket, Gitlab y muchos más.
Ahora que nuestro repositorio local y el repositorio remoto están conectados a través de un control remoto, ¡introduzcamos algo de código!
Empujar cambios a un repositorio remoto: git push
Empujar a un repositorio remoto es bastante simple en la mayoría de las situaciones. Usamos el comando git push, junto con un par de opciones para enviar nuestro repositorio local a nuestro repositorio remoto:
$ git push github-repo master
git-push: comando para pasar el código de un repositorio local a un remoto.
github-repo: Alias del repositorio remoto al que queremos presionar. Eventualmente, podemos tener múltiples repositorios remotos, por lo tanto le damos un nombre.
master: Branch al que estamos presionando a GitHub. Nos adentraremos en las ramas más adelante, así que no te preocupes por este poco.
La línea de comando puede solicitar un nombre de usuario y contraseña. Este es el nombre de usuario y la contraseña de tu cuenta de GitHub. Actualiza GitHub, ¡y deberías ver el código que has confirmado!
Traer cambios de un repositorio remoto: git pull
Pull
Ocasionalmente, los repositorios de GitHub tendrán cambios que no tenemos en nuestra computadora local. Esto puede suceder cuando los compañeros de equipo envían el código al repositorio, o cuando actualizamos el código en GitHub manualmente.
En esta situación, tenemos que usar git pull para extraer el código a nuestro repositorio local desde GitHub.
Comencemos modificando un archivo en GitHub. En la página del repositorio, haga clic en datos.txt.
En la página siguiente, haga clic en el botón "Editar este archivo":
Modifica una línea y luego has clic en "Confirmar cambios":
Acabas de realizar un compromiso con el repositorio en GitHub. Si abres el archivo localmente, ¡nada ha cambiado!
Para retirar nuestro commit más reciente de GitHub, tenemos que usar git pull. git pull funciona de una manera muy similar a git push:
$ git pull github-repo master
Una vez más, el comando git pull toma dos argumentos. El primero es el alias remoto y el segundo es la rama. Como se dijo anteriormente, no te preocupes por la rama. Si echas un vistazo a datos.txt, ¡debería tener tus actualizaciones de GitHub!
Referencia rápida
Agregar un repositorio remoto
$ git remote add <alias><url-de-github>
Empujar al repositorio remoto
$ git push <alias><rama-remota>
Pedir al repositorio remoto
$ git pull <alias><rama-remota>
Resumen
En esta lección hablamos sobre lo que es GitHub y cómo impulsar el código desde su repositorio local a GitHub en Internet.
También discutimos cómo extraer el código de un repositorio de GitHub a nuestra computadora. Esto puede ser útil cuando se trabaja con un equipo o realizando pequeñas actualizaciones en su propio repositorio.
Git y GitHub son temas muy complejos, pero los comandos que se te muestran en las últimas dos lecciones te pueden llevar bastante lejos.
A partir de ahora, use Git para rastrear los cambios en todos sus proyectos, agregando y cometiendo cada paso del camino. Al final de cada día, asegúrese de enviar esos cambios a un repositorio de GitHub. Esto lo preparará para el curso y su futura carrera como desarrollador de pozos, ya que cualquier compañía a la que postule le esperará que tenga un conocimiento práctico de un VCS.
Comprender algunas de las características de Google Chrome.
Encontrar temas y extensiones de Chrome, y comprender por qué son importantes.
Introducción
Google Chrome es un navegador web desarrollado por Google. Es posible que ya tengas instalado Chrome, sin embargo, si no lo tienes, lo instalaremos ahora.
Instalación
Ve al sitio web de Google Chrome y has clic en el botón Descargar Chrome. Detectará automáticamente tu sistema operativo y proporcionará una edición adecuada para el sistema.
En el cuadro de diálogo, haz clic en aceptar e instalar. A continuación, se descargará un archivo comprimido del sitio.
Haz clic en él y sigue las instrucciones de instalación.
Características
Google Chrome tiene muchas ventajas:
Proporciona navegación privada: evita que el navegador guarde permanentemente información del historial o cookies de los sitios web visitados.
Tiene un enorme ecosistema de extensiones (complementos) y temas: pueden cambiar la apariencia de su navegador o agregar funcionalidades geniales que no son compatibles de forma nativa.
Se mantiene actualizado con las últimas tecnologías: no todos los navegadores procesan HTML / CSS / JavaScript de la misma manera. Las tecnologías están en constante evolución, y algunos navegadores son mejores para mantenerse al día que otros. Chrome es el nivel superior en este sentido.
Temas
Puede agregar temas haciendo clic en Chrome > Preferencias o escribiendo Cmd⌘ + , y abriendo la vista de configuración de Chrome. La tercera pestaña, 'Configuración' muestra las opciones de apariencia. Para cambiar el tema, simplemente haga clic en Obtener temas en Apariencia.
Extensiones
Esta es una de las mejores características de Chrome. Las extensiones o complementos son paquetes para agregar funciones a tu navegador. Puedes instalarlos y habilitarlos haciendo clic en la pestaña Extensiones de la vista Configuración.
Aquí encontrarás una lista de plugins muy útiles para tu navegador:
Octotree. Proporciona un árbol de códigos para proyectos GitHub. Puede explorar el código fuente de un proyecto en línea sin tener que extraer el repositorio del proyecto.
Bolsillo. Con Pocket, puedes guardar artículos, videos, recetas y páginas web que encuentres en línea sin usar marcadores.
JSONView. Le permite ver y validar documentos JSON en Chrome fácilmente. (Será increíblemente útil más adelante)
Dark Theme Dev Tools. Esta extensión es para Google Chrome Dev Tools. Proporciona un tema oscuro altamente personalizable para Dev Tools si desea darle un toque personal y oscuro a su suite Google Chrome Dev Tools.
Resumen
Google Chrome es solo uno de muchos navegadores web. Es uno de los mejores, con grandes extensiones, útiles herramientas de desarrollo y un gran ecosistema. Hay montones de configuraciones y trucos ingeniosos que Chrome ha ocultado, así que siéntete libre de explorar, ya que será una de las muchas herramientas de desarrollo web que usarás en el futuro.
Comprender que es HTML, CSS y JavaScript y sus objetivos.
Saber lo que significa el término "Frontend"
Tener una visión general de lo que aprenderás en este módulo
Introducción
HTML, CSS y JavaScript son un grupo de tecnologías e idiomas que componen el frontend de una página web. El frontend de una aplicación es una forma abreviada de hablar sobre todas las páginas que ve el cliente (usuario). Cualquier página que visites de cualquier aplicación web es parte de la interfaz.
Una aplicación web realizará tareas como almacenar datos en una base de datos, gestionar solicitudes de usuarios y gestionar sesiones (inicios de sesión de usuarios). Este es el backend, y es algo que tu como usuario no ves en realidad. Hablaremos sobre el backend más adelante en el curso.
Hasta este punto, hemos discutido algunos temas relacionados con el desarrollo, como el control de versiones, el editor de texto y la terminal, pero no hemos visto nada en vivo en el navegador.
En este módulo, cambiarás eso, pero primero hablemos un poco sobre la descripción general de alto nivel de cómo se organiza una página web.
Anatomía de una página web.
Podemos pensar que HTML, CSS y JavaScript componen una página web de la misma manera que los huesos, la piel / el pelo y los músculos componen un ser humano.
Los Huesos: HTML
Tus huesos le dan estructura a tu cuerpo. Sin ellos, te desmoronarías en un charco en el piso. HTML es como los huesos que le dan estructura a una página web. Consiste en etiquetas o elementos en su página que describen el contenido.
Vamos a profundizar en esta estructura más adelante, pero echemos un vistazo al HTML del Sitio web de Ironhack .
Como puedes ver, el sitio es bastante feo, pero tiene todo el contenido que necesita para ser un sitio web en funcionamiento. Tiene enlaces para navegar por el sitio, encabezados que describen contenido y texto informativo.
El cabello y piel: CSS
Tu piel y cabello, junto con la ropa y otras pertenencias externas definen cómo te ves. La mayoría de las personas tiene un esqueleto similar, pero todos somos únicos debido a estos factores.
CSS se usa para dar estilo a tu página y darle ese toque único.
Si miramos la misma sección de la página web de Ironhack con estilos, parece una página completamente diferente:
Los músculos: JavaScript
Tu cuerpo tiene estructura, tiene una apariencia única, pero igual de importante es tu capacidad para realizar tareas y hacer cosas como correr, saltar, bailar, etc. Tus músculos te dan esta habilidad.
En una página web, ocurren eventos. Hacer clic en un menú desplegable y que este se abra; escribir en un cuadro de búsqueda y que se completen los resultados por ti. Estos eventos son posibles gracias a los músculos de la página web, JavaScript.
Resumen
En esta lección hablamos un poco sobre HTML, CSS y JavaScript y sobre cómo se compone una página web.
Tu objetivo en este módulo será construir páginas web agradables usando HTML y CSS. Cubriremos los músculos, JavaScript, durante el curso.
Al final de este módulo, podrás recrear el front-end de algunos de tus sitios web favoritos e incluso generar algunos propios.
Usar características de la terminal como: nueva terminal, nueva pestaña, paneles divididos.
Introducción
La línea de comandos es una herramienta muy útil incluida en tu sistema operativo. Proporciona una gran cantidad de funcionalidades para interactuar con la computadora, dándole al usuario mucha potencia.
Que es la linea de comando
La interfaz de línea de comandos o CLI, es una herramienta en la que puedes escribir comandos de texto para realizar tareas específicas.
Cuando usas tu computadora, comúnmente señalas y haces clic en elementos gráficos con el mouse para realizar tareas (crear, mover, eliminar carpetas y archivos, ejecutar aplicaciones, etc.). Cuando haces eso, estás usando una GUI (Interfaz Gráfica de Usuario) y su uso puede ser reemplazado por la CLI.
Puedes escribir comandos de texto en la CLI para realizar tareas específicas en lugar de mover el mouse por la pantalla. Así como puedes controlar directamente la computadora escribiendo, puedes hacer las cosas de manera más eficiente que cuando usa elementos gráficos.
Ejecutando la terminal
Para comenzar con la línea de comando, debes abrir la ventana de la terminal.
La terminal es un programa incluido en tu sistema operativo en el que puedes escribir y ejecutar comandos basados en texto.
Cuando ejecutas la aplicación de terminal, tu símbolo del sistema se iniciará apuntando a una carpeta específica. Desde allí, puedes navegar entre carpetas, actuar sobre archivos dentro de estas carpetas o realizar otras acciones.
Usuarios Mac OS: iTerm2
Para abrir una sesión de la terminal en Mac OS, simplemente has clic en la Búsqueda de Spotlight y escribe iTerm2. Aparecerá una nueva ventana de Terminal iTerm2.
Ancla el lanzador de la terminal en la barra de navegación del Dock para acceder más fácil a ella:
Usuarios Linux: Terminator
Para abrir una sesión de la terminal en Linux, simplemente abre la barra de búsqueda y escribe Terminator:
Aparecerá una nueva ventana de Terminator.
Se recomienda anclar el ícono en la barra de menú para tener un acceso rápido a tu terminal.
Juguemos con la terminal
Seguro te mueres de ganas por ejecutar algunos comandos, ¿verdad?Así que adelante y prueba esto:
No necesitas escribir el carácter $ al ingresar estos comandos. La terminal rellenará automáticamente este carácter para indicarle dónde se encuentra el cursor en la terminal.
$ whoami
# este comando devuelve tu usuario en sesión.
$ pwd# este comando devuelve el directorio donde estás trabajando.
$ ls
# este comando devuelve una lista de todos los archivos y carpetas del directorio actual.
¡Esto es solo un comienzo! Tendremos muchos más comandos para usar en futuras lecciones.
Resumen
En esta lección hemos aprendido un poco sobre qué es la línea de comandos y por qué la usamos. El ecosistema de la línea de comando es amplio y vivirás de él como desarrollador, por lo que no podemos enfatizar suficientemente la importancia de estas lecciones. Esto fue solo lo básico, ¡pero tenemos más por venir!
¡Bienvenido al Prework de Ironhack! Este prework está diseñado para prepararte para nuestro curso de Web Development Bootcamp. Te enseñaremos los fundamentos de programación web antes de llegar al bootcamp, para que puedas comenzar ya preparado.
Al final de este prework, serás capaz de:
Construir páginas web eficientemente y bien estructuradas, usando HTML5 y JavaScript.
Diseñar páginas web usando CSS3, un lenguaje de hojas de estilo creado para dar diseño y animar nuestras sitios web.
Instalar y configurar tu espacio de trabajo.
Usar el Editor de Texto y la Terminal con fluidez.
Trabajar con diferentes versiones de código usando Git.
¿Cómo funciona el Prework?
El preworkes un curso que debes terminar para poder iniciar el bootcamp, y te ayudará a adquirir una base sólida incluso si no tienes una formación técnica.
Estructura del Prework
El prework tiene 2 tipos diferentes de lecciones:
Unidades de aprendizaje
Estás unidades de aprendizaje, también conocidas como lecciones, te enseñarán temas específicos. Estás lecciones tal vez contengan conceptos con los que ya estés familiarizado si ya has tenido alguna experiencia previa. No te preocupes por esto, ¡Te recomendamos leer todo el prework detenidamente para asegurarnos de que no te falte nada!
Para aquellos que no tienen experiencia previa, aquí es donde veremos una introducción a los temas. Las lecciones se complementan entre sí, por lo que si un concepto parece extraño, asegurate de revisar las lecciones anteriores antes de saltar a Google.
Ejercicios
En Desarrollo Web, tendrás que practicar mucho para poder entender cada tema. Nuestro proceso en Ironhack y tu proceso como Desarrollador Web será leer una guía, ver un video o aprender teoría de un tema, y luego aplicar de inmediato ese concepto. Está es la manera infalible como principiante para solidificar conceptos.
Echemos un vistazo a algunos de los diferentes ejercicios que encontrás:
Mini-ejercicios: A veces, encontrás ejercicios pequeños para probar un tema específico. Estos serán integrados en las lecciones.
Ejercicios: Para cubrir un conjunto de temas relacionados, harás un ejercicio creado para poner a prueba tus conocimientos. Estos serán al final de una lección o una unidad independiente en la plataforma.
Ejercicios del módulo: Al final de cada módulo (HTML, CSS, JavaScript, Git), tendrás que entregar un ejercicio más completo, así los TA's podrán dar seguimiento tu progreso en este prework.
Entrega y corrección de ejercicios
Todos los Ejercicios y Ejercicios del módulo tendrán un conjunto de pruebas para saber que es lo que se debe de entregar y como atacar cada problema. Estas pruebas nos ayudarán tanto a ti como a nosotros a saber que estás completando adecuadamente los ejercicios. Al final, deberás entregar todo tu trabajo en un repositorio de GitHub y mandarlo a los TA's.
Cubriremos los conceptos de Github y los tests de prueba en profundidad en las lecciones correspondientes, así que no te preocupes si no estás familiarizado con estos conceptos.
¿Que esperamos de ti?
Esperamos que termines todas las lecciones propuestas cuidadosamente y en orden.
No tengas miedo de probar cosas diferentes mientras haces el trabajo que te asignamos para ver si entiendes completamente lo que acabas de leer. Esperamos que tengas curiosidad y un poco de audacia. La computadora no se dañará si intentas algo diferente para ver qué sucede. Obtendrás muchas ideas nuevas si lo haces.
No tengas miedo de hacer preguntas. Mientras te alentamos a ser creativo y que puedas encontrar tus propias ideas, nosotros estamos aquí para ayudarte a despejar cualquier duda que tengas. Acostúmbrate a la idea de hacer preguntas cuando estás confundido. Queremos que intentes solucionar los problemas tu mismo antes de pedir ayuda. Para hacer eso, te recomendamos lo siguiente cuando estés atorado:
Si tienes un problema, alguien ya ha tenido ese problema antes. Visita Stack Overflow para ver si alguien ya ha resuelto tu problema.
Google será tu mejor amigo. Intenta buscar una solución a tu problema.
Te hemos agregado a un grupo de Slack donde podrás compartir muchas cosas con tus próximos compañeros. Siéntete libre de compartir tu conocimiento, comparte todas tus dudas y ayudarás a todos a completar este Prework.
Tus Profesores auxiliares y tu Profesor principal estarán siempre disponibles en Slack. Si ninguno de los pasos anteriores han resuelto tus dudas, entonces no dudes en preguntarles a ellos.
Te pediremos que envíes ejercicios de vez en cuando a tu maestro. Hacemos esto para tener una idea más clara de qué tan bien estás comprendiendo los conceptos básicos. Queremos ser capaces de reaccionar rápidamente para ayudarte si parece que estás teniendo problemas. No tengas miedo de enviar tu trabajo, no te están evaluando. Cuanto más sepamos sobre tu progreso, mejor.
También alentamos la colaboración. Siéntete libre de conversar con tus compañeros y compartir ideas sobre cómo hacer las cosas. En programación rara vez hay una sola solución a un problema, por lo que puede ser muy beneficioso elegir el cerebro de otra persona. Sin embargo, cuando te solicitemos que trabajes en una tarea tú mismo, hazlo. De esa forma podemos medir con mayor precisión qué tan bien entiendes algo.
Configuración del espacio de trabajo
La primera sección del prework está destinada a que tengas todas las herramientas necesarias para enfrentar los desafíos en adelante, tanto en el prework como en el bootcamp.
Si decides instalar o usar diferentes herramientas a las que nosotros te sugerimos, asegurate de saber todas las posibles consecuencias.
Tus Profesores auxiliares y tu Profesor principal tal vez no estén familiarizados con esa herramienta y no pueden permitirse perder mucho tiempo resolviendo problemas con una herramienta específica.
Las cosas tal vez se vean diferentes en tu computadora comparadas con las lecciones.
Si no puedes instalar alguna herramienta siéntete libre de pedir ayuda a tus profesores, para poder solventar ese problema rápidamente y te concentres en lo que si importa 😉
Crear carpetas y archivos a travéz de la estructura de carpetas.
Abrir un archivo temporal y permanentemente mientras estas en la estructura de carpetas.
Renombrar y eliminar archivos usando VSCode.
Usar algunas de las abreviaciones de comandos mas útiles en VSCode.
Introducción
Como recordatorio VSCode es:
Visual Studio Code es un editor de código fuente ligero pero poderoso que corre en tu computadora y está disponible para Windows, Mac OS X y linux. Vienen con soporte integrado para Javascript, Typescript y Node.js y tiene un gran ecosistema de extensiones para otros lenguajes (como C++, C#, Java, Python, PHP, Go) y runtimes (como .NET y Unity)...
VSCode es genial para principiantes por que tiene consejos muy útiles y la facilidad de navegación, pero de igual forma genial para desarrolladores experimentados por que la posibilidad de modificar su código fuente.
En esta lección aprenderás lo básico para usar VSCode, el editor de texto que usaras durante el curso.
Aprenderás como VSCode trabaja con archivos, como cambiar el lenguaje de un archivo y su extensión, como manejar la estructura de carpeta y usar los atajos mas comunes en VSCode.
Archivos
Crea un nuevo archivo
Hay muchas maneras de crear nuevos archivos en VSCode. Puedes hacerlo con:
Seleccionando File > New file en la barra de menú:
MacOS: Presionando Cmd ⌘ + N para crear un archivo nuevo en el editor.
Linux: Presionando Control + N para crear un archivo nuevo en el editor.
Abre un archivo
Hay varias maneras de abrir un archivo en VSCode. Puedes hacerlo haciendo:
Seleccionando File > Open... en la barra de menú:
MacOS: Cmd ⌘ + O para seleccionar un archivo.
Linux: Control + O para seleccionar un archivo.
Editar y guardar un archivo
Editar un archivo es bastante sencillo. Puede hacer clic y desplazarse con el mouse y escribir para cambiar el contenido. No hay modo especial de edición ni comandos de teclas.
Puedes guardar un archivo de distintas formas:
Seleccionando File > Save desde la barra de menú:
MacOS: Cmd ⌘ + S para guardar el archivo.
Linux: Control + S para guardar el archivo.
Si seleccionas File > Save As o presionas Shift+ Cmd ⌘ + S (para MacOS) ó Shift+ Control + S (para Linux) luego puedes guardar el contenido actual en tu editor con un nombre de archivo diferente.
Puedes seleccionar File > Save All o presionar Alt + Cmd ⌘ + S (para MacOS) para guardar todos los archivos en VSCode.
Icono de guardar
A veces, puede que no recuerdes si el archivo ya se guardo con tus actuales cambios.
Es bastante fácil presionar el atajo para guardar en caso de que esté tratando con 1 archivo, pero si has estado editando varios archivos, puede ser bastante tedioso guardarlos todos.
Incluso si lo haces, existe la posibilidad de que no recuerdes un archivo que modificaste hace 10 minutos. VSCode viene con una herramienta útil para distinguir lo que se ha guardado y lo que no, el "Icono no guardado":
Sin guardar
Guardado
Trabajando en un proyecto
No es muy común trabajar solo con una archivo a la vez. Por lo general el proyecto con el que estés trabajando tendrá múltiples archivos y carpetas.Por lo que puedes abrir el proyecto completo en el que estés trabajando con VSCode.
Abriendo carpetas
Hay muchas maneras de hacerlo:
Selecciona el elemento del menú File > Open (para MacOS) ó File > Open Folder (para Linux), y selecciona una carpeta de proyecto en la ventana emergente.
Arrastra la carpeta del proyecto al icono de VSCode en el Dock.
Puedes abrir una carpeta de proyecto desde iTerm, Terminator o cualquier otro emulador de terminal que utilices. Ubicate en la ruta del proyecto y escribe code . para abrir en VSCode el proyecto completo.
También puedes agregar múltiples directorios a la ventana actual de VSCode, seleccionando File > Add Project Folder de la barra de menú.
La estructura de carpetas es una vista del folder abierto en VSCode. Esta vista de la estructura te permite acceder a cualquier archivo o carpeta bajo la ruta raíz de tu proyecto (o carpeta abierta).
Es muy importante acostumbrarse a trabajar con esta vista, porque la mayor parte del tiempo estarás trabajando con proyectos que contendrán un montón de archivos desde el comienzo.
Abrir una carpeta en la estructura de carpetas
Si tienes abierta la estructura de carpetas, estará trabajando con muchos archivos al mismo tiempo. A veces, tendrá que modificarlos, pero otras veces abrirás un archivo solo para verificar algo. Eso podría causar un desastre como este:
Es muy fácil perderte ahí, cierto? Veamos cómo evitar este problema.
Abrir archivos temporalmente: Si le das un click a un archivo en la estructura, se abrirá en VSCode automáticamente. Podrás ver que el contenido y navegar en el archivo tanto como quieras.
Luego, si das click en cualquier otro archivo, la ventana actual cambiara al ultimo archivo seleccionado.
Abrir archivos permanentemente: Si das doble click en un archivo o editas un archivo, se abrirá una nueva pestaña para ese archivo. Los próximos archivos se abrirán en diferentes pestañas.
Buscar un archivo en la estructura de carpetas
Una vez que tienes un proyecto abierto en VSCode, puedes encontrar y abrir fácilmente cualquier archivo dentro del proyecto.
Si presionas Cmd⌘+P (para MacOS) o Control+P (para Linux), Aparecerá el Fuzzy Finder. Le permitirá buscar rápidamente cualquier archivo en cualquier directorio dentro de su proyecto al escribir partes de la ruta.
Operaciones básicas en la estructura de carpetas
Hay muchas operaciones básicas que puede hacer directamente desde la estructura de carpetas haciendo clic en el botón derecho del mouse.
Operaciones en carpetas
Operaciones en archivos
Atajos de VSCode
No tienes que memorizar cada uno de estos accesos directos. Por favor haz referencia a esto mientras continúas trabajando. Haga un esfuerzo para aprender 2-3 atajos nuevos por semana durante todo el curso, y será un asistente de VSCode.
General
Comando
Mac OS X
Windows
Linux
Descripción
Preferencias / Configuraciones
cmd-,
ctrl-,
ctrl-,
Abre la vista de Preferencias / Configuraciones
Paleta de comandos
shift-cmd-p
shift-ctrl-p
ctrl-shift-p
Abre y cierra la Paleta de comandos
Abrir archivo
cmd-p
ctrl-p
o
Comando
Mac OS X
Windows
Linux
Descripción
---
---
---
---
---
ctrl-t
ctrl-p
Abre la paleta de Finder en la que puedes buscar y abrir archivos
Selector de Gramática
cmd-k-m
ctrl-k-m
ctrl-k-m
Selecciona el idioma en el que se encuentra el archivo
Alternar herramientas de terminal
shift-cmd-m
ctrl-shift-m
ctrl-shift-m
Abre la herramienta / consola de desarrollo de Chrome
Manejo de ventanas
Comando
Mac OS X
Windows
Linux
Descripción
Nuevo archivo
cmd-n
ctrl-n
ctrl-n
Abre un archivo vacío en una nueva pestaña
Nueva ventana
shift-cmd-n
ctrl-shift-n
ctrl-shift-n
Abre una nueva ventana de editor
Abrir
cmd-o
ctrl-o
ctrl-o
Muestra el cuadro de diálogo Abrir archivo, que le permite seleccionar un archivo para abrir en el editor
Abrir carpeta
cmd-shift-o
ctrl-shift-o
ctrl-shift-o
Muestra el cuadro de diálogo Abrir carpeta, que le permite seleccionar una carpeta para agregar a la Vista de árbol del editor
Guardar
cmd-s
ctrl-s
ctrl-s
Guarda el archivo actualmente activo
Guardar como
shift-cmd-s
ctrl-shift-s
ctrl-shift-s
Guarda el archivo actualmente activo con un nombre diferente
Guardar todo
alt-cmd-s
Guarda todos los archivos modificados
Cerrar pestaña
cmd-w
ctrl-w
ctrl-w
Cierra la pestaña actualmente activa
Cerrar ventana
shift-cmd-w
ctrl-shift-w
ctrl-shift-w
Cierra la ventana del editor actualmente activo
Editando
Comando
Mac OS X
Windows
Linux
Descripción
Líneas duplicadas
shift-alt-down / shift-alt-up
ctrl-shift-alt-down/ ctrl-shift-alt-up
ctrl-shift-alt-down / ctrl-shift-alt-up
Duplica la línea de la posición actual del cursor y crea una nueva línea debajo de ella con los mismos contenidos
Eliminar línea
cmd-shift-k
ctrl-shift-k
ctrl-shift-k
Elimina la línea actual
Mover línea
alt-up
alt-up
alt-up
Mueve el contenido de la posición actual del cursor hacia arriba una línea. Si hay una línea arriba con contenido, el contenido de las líneas actuales se intercambiará con el de arriba.
Mover línea hacia abajo
alt-down
alt-down
alt-down
Mueve el contenido de la posición actual del cursor hacia abajo una línea. Si hay una línea debajo con contenido, el contenido de la línea se intercambiará con el siguiente.
Encontrar / Reemplazar
cmd-f
ctrl-f
ctrl-f
Abre el panel Buscar / Reemplazar
Encontrar Siguiente
cmd-g
F3
F3
Alterna entre los resultados del búfer actual en el archivo mientras el panel Buscar / Reemplazar está activo
Encontrar Anterior
shift-cmd-g
shift-F3
shift-F3
Alterna entre los resultados del búfer actual en el archivo mientras el panel Buscar / Reemplazar está activo
Encontrar en Proyecto
shift-cmd-f
ctrl-shift-f
ctrl-shift-f
Abre el panel Encontrar en el proyecto
Ir a la línea
ctrl-g
ctrl-g
ctrl-g
Abre el panel Ir a línea
Seleccionar línea
cmd-l
ctrl-l
ctrl-l
Selecciona la línea completa en la que se encuentra la posición actual del cursor
Alternar comentario
cmd-/
ctrl-/
ctrl-/
Alterna el texto seleccionado en un comentario de la gramática actual
Selección de columna
ctrl-shift-up/down
shift-alt-up/down
Permite seleccionar múltiples filas, donde se aplicará la misma edición
Seleccione las mismas palabras
cmd-d
ctrl-d
ctrl-d
Si selecciona una palabra y luego pulsa la combinación de teclas para este comando, VSCode seleccionará la siguiente palabra para usted. Luego puede escribir directamente (que reemplazará las palabras antiguas) o usar la flecha izquierda o derecha para agregar cosas.
Resumen
En esta lección, hemos visto que VSCode es un genial editor de código fuente con excelentes paquetes y tiene un juego de herramientas completamente personalizable. También es de código abierto, lo que significa que con el tiempo podrá saltar al código del editor.
Ten en cuenta que elegimos VSCode porque es fácil de entender y poner en marcha. Todos tienen una opinión sobre qué editor de texto es el mejor, pero todos sabemos lo que dicen sobre las opiniones :).
Quédate con VSCode durante el curso y explore all of the other options después de que termine el curso para que podamos enfocarnos en el código.
Explicar qué es JavaScript, y un poquito de historia.
Explicar qué es ES2015 y explicar como involucra a JavaScript.
Utilizar y comprender la sintaxis y la gramática básicas de JavaScript.
¿Qué es JavaScript?
JavaScript es un lenguaje de programación dinámico y orientado a objetos creado en 1995. Hasta 2009, JavaScript solo se ejecutaba en el navegador. Se usa para manipular páginas web, crear una experiencia interactiva y cosas molestas, como mostrar publicidad.
Algunos ejemplos de JavaScript se pueden ver en Gmail. Cuando recibes un nuevo correo en Gmail, no tienes que recargar la página. Solamente obtiene la información del servidor, y aparece en la página. Ambas funciones son cosas que JavaScript es capaz de hacer.
Qué NO es JavaScript
JavaScript y Java casi no tienen relación. No son el mismo lenguaje de programación y se ejecutan (muchas veces) en diferentes entornos.
Java is to JavaScript what Car is to Carpet - Chris Heilmann
El nombre
JavaScript fue creado con el nombre de Mocha. Cuando se lanzó se convirtió en LiveScript, y poco después en JavaScript.
Se cree que el nombre es un complot para sacar provecho de la popularidad de Java, que estaba aumentando su uso en ese momento. Su sintaxis se basa en C y Java, lo que lleva a una mayor confusión, porque aquí es donde termina cualquier similitud.
Historia de JavaScript
1955: Los inicios
JavaScript fue creado en 1995 por Brendan Eich, que trabajaba para Netscape. Eich creó el lenguaje en 10 días. Netscape creó JavaScript para integrar los sitios web (HTML y CSS). En este punto, la web era solo una serie de documentos aburridos unidos con hipervínculos.
JavaScript en el momento de su invención solo se ejecutaba en el navegador. Significa que a diferencia de los lenguajes del lado del servidor (Ruby, Python, Go, etc.), no se podía ejecutar en un servidor.
2005: La revolución AJAX
En 1999, Microsoft inventó XMLHttpRequest para usarlo en su cliente de correos electrónicos de Outlook. Esto permitió una comunicación fácil entre el cliente y el servidor para crear funciones tales como recuperar correos electrónicos sin navegar a una página diferente. Si bien esto puede parecer trivial ahora, no lo era en ese momento y cambió la forma en como las aplicaciones web se diseñarían para siempre.
Alrededor de 2005, AJAX, una serie de tecnologías desarrolladas en torno a XMLHttpRequest para la creación de aplicaciones interactivas, se estandarizó. Esta nueva forma de desarrollar aplicaciones web permitió la creación de Gmail, Google Maps, Twitter, Facebook y muchas otras aplicaciones web. Más adelante aprenderemos más sobre AJAX.
Node JS
En 2009, JavaScript dio un giro interesante. Ryan Dahl que trabajaba en Joyent, tomó el motor de JavaScript V8 que Google Chrome usa para ejecutar JavaScript en el navegador y lo implementó en el servidor. Esto creó un entorno de JavaScript para ejecutar en cualquier lugar, y lo llamó NodeJS.
NodeJS permite que JavaScript se use en todas partes: servidores, teléfonos e incluso robots. NodeJS ha seguido creciendo en popularidad desde su lanzamiento y está desarrollando una gran comunidad de seguidores.
ES2015: Nuevas evoluciones de JavaScript
Después de la creación de JavaScript, Eich y Netscape enviaron JavaScript a un comité de estándares con el nombre de ECMA International con la esperanza de convertirse en el estándar de la industria para los lenguajes de los navegadores. En 1995, Internet era muy caótico. Pocos estándares se implementaron y el navegador era un lugar hostil para trabajar.
El lenguaje fue estandarizado con el nombre de Ecmascript. En términos técnicos, Ecmascript es el estándar y JavaScript es la implementación de ese estándar. No puedes "ejecutar" Ecmascript, y muchos otros lenguajes menos conocidos se basan en él.
JavaScript es un lenguaje bastante extraño cuando se trata de cambios. Hacer cambios en el lenguaje que no son compatibles podría tener efectos negativos masivos en las miles de páginas web que dependen de él. Esto significa que Ecma International solo aprueba cambios que no rompen la compatibilidad con versiones anteriores.
JavaScript ha pasado por muchas evoluciones, la más reciente es ES6, que significa Ecmascript Versión 6.
En resumen, la mayoría del código que verás y la mayoría del código actual en Internet se encuentra en ES6 o inferior. El código escrito de ahora en adelante (idealmente) se escribirá en ES2015+. Vamos a entrar en detalles más adelante, pero ES2015 ayuda a eliminar algunos de los locos errores de JavaScript, mejora ciertos puntos de la sintaxis de JavaScript confuso, y agrega una serie de nuevas características.
Sintaxis básica
Como se dijo anteriormente, la sintaxis de JavaScript se basa en C o Java. Esto significa bastantes llaves {}, paréntesis (), y punto y coma;.
El punto y coma no es obligatorio en el 99.5% de los casos, pero debes incluirlo.
Los paréntesis y las llaves son obligatorios y causarán un error si se dejan fuera. Ten en cuenta comenzar/finalizar estos en el lugar correcto.
Console.log()
Utilizaremos una función llamada console.log para mostrar resultados y mensajes. En Chrome, la salida será para nuestra consola, en NodeJS la salida será para nuestra terminal.
Ejemplo:
<iframe height="265" src="//codepen.io/ironhack/embed/NRpbqX/?height=265&theme-id=0&default-tab=js,result&embed-version=2" allowfullscreen="true" style="width: 100%;">See the Pen JavaScript - console.log by Ironhack (@ironhack) on CodePen.
</iframe>
Resumen
En esta lección, has aprendido qué es JavaScript, un poco de historia y parte de su sintaxis básica. JavaScript es un lenguaje interesante con muchas peculiaridades que descubrirás en las próximas lecciones.
Recursos extra
JavaScript HistoryMDN - este será tu recurso principal para cualquier búsqueda de Javascript. Tiene tutoriales, guías y herramientas. Es la Documentación formal de Javascript.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Cuando tienes ganas de echar un vistazo a las fotos de tu infancia, sabes en
cuál buscar. La caja es solo un contenedor para esas fotos de tu infancia.
Podrías tener fotos de tu boda en esa caja, pero eso no tendría mucho sentido.
### Nombre
El **nombre** hace referencia a la variable. Podemos escribir lo que queramos
para poner un nombre a la variable:
```javascript
var companyName = 'Ironhack'
var age = 3
```
El nombre de la variable no determina el tipo de valor. Así que esto también
funcionaría:
```javascript
var companyName = 3
var age = 'Ironhack'
```
Estas variables son totalmente válidas, pero no tiene sentido nombrar una
variable `companyName` y tener un número asignado a ella, en lugar de tener el
nombre de una compañía ¿cierto?
### Valor
El **valor** puede ser cualquier tipo de valor de JavaScript: `string` `number`,
`array`, `object`, etc.
<div class="alert alert-success">
<p>Aprenderemos a usar este tipo de variables durante el curso, así que no te preocupes en este momento si no entiendes que es un <code>object</code> o un <code>array</code>.</p>
</div>
## Declarando Variables
Antes de que utilizar variables en JavaScript, primero debes declararlas. Las
variables se declaran con la palabra `var`:
```javascript
var name
var age
var email
```
También podemos declarar múltiples variables con usar una sola vez `var`:
```javascript
var name, age, email
```
Guardar un valor en una variable se le conoce como **iniciar una variable**.
Puedes iniciar una variable al mismo tiempo cuando la creas o después en
cualquier momento, cuando la vayas a utilizar.
Por ejemplo, puedes crear un nombre de variable y asignarle el valor
`Ironhacker` más tarde.
<div class="alert alert-danger">
<p><img alt=":warning:" class="emoji" src="http://materials.ironhack.com/build/emojify.js/dist/images/basic/warning.png" title=":warning:"> Solo debemos de utilizar <code>var</code> cuando se inicia la variable (la primera vez que la declaramos). Después de iniciada la variable, necesitamos llamarla solamente con su nombre.</p>
</div>
Para otra variable, puedes asignar su valor cuando la inicias:
<iframe height="265" src="//codepen.io/ironhack/embed/xEqRjk/?height=265&theme-id=0&default-tab=js,result&embed-version=2" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/ironhack/pen/xEqRjk/">JS - Variables</a> by Ironhack (<a href="http://codepen.io/ironhack">@ironhack</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>
Si no has asignado el valor a la variable cuando la iniciaste, su valor por default será `undefined`.
<iframe height="265" src="//codepen.io/ironhack/embed/LRWbAR/?height=265&theme-id=0&default-tab=js,result&embed-version=2" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/ironhack/pen/LRWbAR/">JavaScript - Variables pt2</a> by Ironhack (<a href="http://codepen.io/ironhack">@ironhack</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>
## Nombres
Las reglas para dar nombre a una variable son fáciles:
1. Los nombres pueden contener letras (mayúsculas y minúsculas), números, y los símbolos `_` y `$`.
2. Los nombres **NO** pueden empezar con números.
JavaScript permite una gran variedad de caracteres como nombres de variables, así que puedes utilizar `ñ`, `ö` o incluso `π`, pero no es muy práctico porque otras personas quizás no puedan usar estos caracteres. Es por eso que demos de programar en inglés :wink:
Asegúrate de que tu editor pueda guardar archivos
[UTF-8](https://en.wikipedia.org/wiki/UTF-8). Todos estos ejemplos son nombres válidos de variables:
```javascript
var a;
var color;
var _private;
var $button;
var getTop10;
var a_large_name;
var thisWayIsCalledCamelCase;
var π;
```
Observa que JavaScript distingue entre mayúsculas y minúsculas, por lo que las mayúsculas marcan una diferencia. Por ejemplo, `color` y `Color` son diferentes nombres de variables.
### Nombrando variables
Cuando creas una variable con más de una palabra, usamos
["camelCase"](https://en.wikipedia.org/wiki/Camel_case). Las palabras o
abreviaciones en medio de la frase completa empieza con mayúscula. El propósito de está práctica es mejorar la legibilidad al leer el nombre. Checa los siguientes estilos:
- camelCase
- PascalCase
- snake_case
Además, nombrar variables es difícil. De hecho, es una de las cosas más
difíciles en el mundo de la programación. Debes hacer todo lo posible para nombrar las variables de una manera significativa. Los nombres de las variables como `i`, `j`, `k` (algunas excepciones a estos), `something`, `object` o `variable` no indican sobre el valor de la variable. **Es muy probable que no seas la única persona que leerá tu código**.
<iframe height="265" src="//codepen.io/ironhack/embed/QKpGxJ/?height=265&theme-id=0&default-tab=js,result&embed-version=2" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/ironhack/pen/QKpGxJ/">JavaScript - Bad Variable Names</a> by Ironhack (<a href="http://codepen.io/ironhack">@ironhack</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>
**VS**
<iframe height="265" src="//codepen.io/ironhack/embed/YGkpjQ/?height=265&theme-id=0&default-tab=js,result&embed-version=2" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/ironhack/pen/YGkpjQ/">JavaScript - Good Variables</a> by Ironhack (<a href="http://codepen.io/ironhack">@ironhack</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>
## Cambiando valores
Podemos cambiar el valor de una variable cuando queramos. Para cambiar su valor, solo necesitamos hacer referencia al nombre de la variable y asignarle un nuevo valor:
<iframe height="265" src="//codepen.io/ironhack/embed/GjWNZx/?height=265&theme-id=0&default-tab=js,result&embed-version=2" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/ironhack/pen/GjWNZx/">JavaScript - Changing Values</a> by Ironhack (<a href="http://codepen.io/ironhack">@ironhack</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>
## Dynamic Typing
JavaScript es un _lenguaje de tipado dinámico_.
Una de sus principales características es que todas las variables son dinámicas: puedes asignar un tipo de valor a una variable y, más adelante, cambiar el tipo de valor. El tipo de variable se determinará automáticamente mientras se procesa el programa. Puede tener la misma variable y usarla como tipos diferentes.
Por ejemplo, si declaras una variable como un `string` en JavaScript, luego puedes **reasignarla** como un `number`:
<iframe height="265" src="//codepen.io/ironhack/embed/ZpZBkY/?height=265&theme-id=0&default-tab=js,result&embed-version=2" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/ironhack/pen/ZpZBkY/">JavaScript - Dynamic Typing</a> by Ironhack (<a href="http://codepen.io/ironhack">@ironhack</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>
## Resumen
En esta lección, has aprendido cómo se comportan las variables en Javascript, cómo crearlas y asignar valores. También aprendimos sobre variables dinámicas y cómo podemos manipularlas.
Entender la organización del sistema de archivos del sistema operativo.
Entender la razón de ser del directorio Home y Root.
Navegar alrededor del sistema de archivos mediante comandos de terminal.
Crear, borrar y mover archivos desde la terminal.
Crear y borrar carpetas desde tu terminal.
Introducción
En esta lección aprenderás qué es el sistema de archivos y cómo administrar archivos y carpetas a través de la terminal. Durante la lección, necesitarás la terminal, así que adelante y abre una nueva ventana ahora.
MacOS: Busca con Comando + barra espaciadora (⌘ + Spacebar) y escribe iTerm2.
Linux: abrir Terminator.
Navegar por la terminal y realizar las operaciones que estamos por discutir es una habilidad absolutamente vital para los desarrolladores. Cuanto más eficiente sea en la terminal, más eficiente será el desarrollador.
Estas habilidades se construirán con tiempo y práctica.
Sistema de archivos
Organización del sistema de archivos
Los archivos en un sistema Linux u OSX están organizados en lo que se denomina estructura jerárquica de directorios. Significa que están organizados en un patrón similar a un árbol de directorios o carpetas, que pueden contener archivos y otros directorios.
Directorios Root y Home
El directorio de nivel superior en el sistema de archivos se llama directorio raíz (/).
Cualquier directorio puede contener archivos y/o sub-directorios, que contienen más archivos y sub-directorios y más.
Cada usuario tiene su propio directorio de inicio, donde guarda toda la información para su cuenta, incluyendo su propio escritorio, películas, imágenes y aplicaciones.
Cuando abres tu terminal, lo más probable es que tengas el terminal esperando los comandos en su directorio de inicio (/home/<nombre-de-usuario>).
Primeros comandos
¡Advertencia!
¡No necesitas escribir el signo de dólar ($), solo el comando! Tu terminal mostrará el signo de dólar para que sepas dónde está la entrada.
Además, el # => denota un valor de retorno.
Esto es lo que la computadora debe imprimir después de ingresar un comando.
No necesitas escribir ninguno de estos.
probemos algunos comandos útiles
Mostrar el nombre de tu equipo:
$ hostname
# => myComputer
Mostrar el nombre del usuario en sesión:
$ whoami
# => myUser
Mostrar el directorio actual (pwd = print working directory):
$ pwd# => /home/myUser
Lista de archivos
Muestra una lista de archivos dentro de la carpeta activa usando el comando ls. También puedes usar parámetros después de ls para mostrar información más detallada.
Puedes y debes usar ls tanto como puedas para ver dónde te encuentras y qué archivos / carpetas existen en el directorio actual antes de ejecutar los comandos.
Navega hasta tu directorio de inicio (cd ~) y ejecuta los siguientes comandos.
Añade -l para obtener una lista con detalles
$ ls -l
Añade -t para ordenar los resultados por tiempo de archivo:
$ ls -t
Añade -s para ordenar por tamaño de archivo
$ ls -s
Añade -r para ordenar a la inversa
$ ls -r
Añade -a para mostrar archivos ocultos
$ ls -a
Puedes combinarlos todos juntos para mejorar tu listado. Si escribe ls -la, el resultado será la lista detallada de archivos, incluidos los ocultos.
Ten en cuenta que los primeros directorios que aparecen son . y .., representando la carpeta actual y la carpeta principal, respectivamente.
navegar entre directorios
Algunas veces necesitas navegar entre directorios, puedes usar el comando cd para hacerlo. Puedes usar el siguiente comando para cambiar al directorio anterior:
$ cd..
Puedes navegar a rutas completas o relativas. Si estás en /Documentos/Ironhack y quieres navegar a la carpeta /juego dentro de esa carpeta, simplemente puedes escribir:
$ cd juego
También puedes navegar a rutas absolutas. Las rutas absolutas comienzan con el símbolo / (directorio raíz).
Hacer esto especifica que la ruta comienza desde el directorio raíz. Navega a tu escritorio escribiendo:
$ cd usuarios/<tu-usuario>/escritorio
Sugerencia: Escribe whoami para ver cuál es el nombre de usuario.
Consejo de iTerm
Una de las mejores características que te ofrece iTerm es la posibilidad de cambiar de directorio sin escribir cd. Si estás en el directorio de inicio, ~, puedes cambiar al Escritorio escribiendo simplemente Escritorio.
Recuerda que la carpeta del escritorio está en la ruta ~/Desktop.
Trucos
Navega directamente a la ruta raíz:
$ cd /
Navega directamente al directorio raíz del usuario:
$ cd~
Navega directamente al directorio de trabajo anterior:
$ cd -
Acompletado con tabulación
Escribir el nombre completo de los archivos y carpetas existentes puede ser tedioso. Puedes utilizar la tecla Tab para omitir todo el tipado y navegar mucho más rápido:
Ve al directorio Home:
$ cd
Escribe:
$ cd Es
Presiona el tabulador
Esto auto-completará automáticamente el nombre de la carpeta a:
$ cd Escritorio
Genial, ¿verdad? Sucede porque Escritorio es el único nombre que coincide con la cadena dada (Es).
Reglas
Intentará hacer coincidir cualquier carpeta inmediatamente dentro, pero no intentará hacer coincidir ninguna sub-carpeta. En el siguiente caso, si estamos en el directorio de inicio y probamos cd Des, coincidirá con Desktop, pero no con Desktop_folder:
No es sensible a mayúsculas y minúsculas. Si está en tu directorio de inicio y pruebas cd des, coincidirá con Desktop incluso si el nombre real de la carpeta está en mayúscula.
Crear y borrar carpetas
Crea una nueva carpeta usando el comando:
$ mkdir <nombre_de_la_carpeta>
Borra una carpeta vacía usando el comando rmdir:
$ rmdir <nombre_de_la_carpeta>
Puedes eliminar cualquier carpeta siempre que la carpeta esté vacía. Si tiene archivos, tendrás que eliminar estos archivos antes de poder eliminar la carpeta.
Crear y borrar archivos
Crea un nuevo archivo en blanco usando el comando touch:
$ touch nuevo_archivo
Borra un archivo usando el comando rm:
$ rm nuevo_archivo
Crea una nueva carpeta, ingresa la nueva carpeta usando cd, y luego crea varios archivos usando touch:
Para eliminar una lista de archivos y carpetas, incluidos todos los archivos de los sub-directorios, sin solicitarle ninguna entrada, puedes usar la opción -r para recursiva y la opción -f para forzarla. Si es un directorio sobre mis archivos, escribe:
! Ten cuidado al eliminar el archivo con rm -rf. Puedes eliminar todos los archivos en tu sistema operativo si vas a la raíz de tu computadora y ejecutas el comando.
$ cd ..
$ rm -rf my-files
Mostrando un Archivo
Puedes mostrar el contenido de un archivo en pantalla con el comando cat:
$ cat nombre_del_archivo
Si el archivo especificado es muy grande, no podrás ver todo el contenido en la pantalla. Para poder ver todo el contenido página por página, debes usar los comandos más o menos:
$ more nombre_del_archivo
Esto mostrará el contenido de un archivo en la pantalla y te pedirá que recorras el archivo una pantalla a la vez.
Copiando un archivo
Usa el comando cp para copiar un archivo. Primero creemos un nuevo archivo:
$ touch hola.txt
Abre el archivo y agrega texto. Puedes usar un editor de texto para agregar el texto. Crea una nueva carpeta desechable, haz clic en ella y agrega "Hola. Estoy aprendiendo a copiar un archivo":
$ cp hola.txt copia.txt
Lista los archivos para verificar que tienes ahora dos archivos. Abre copia.txt para verificar que el texto esté allí:
$ ls
También puedes copiar el archivo en otro directorio:
$ mkdir copias
$ cp hola.txt copias/
Observa la / (barra diagonal) al final de un directorio. Esto asegura que la ruta sea un directorio, por lo que si el directorio no existe, obtendrá un error. Verifica que el archivo copiado esté allí:
$ ls copias
Finalmente, podemos copiar directorios que no están vacíos ejecutando el siguiente comando:
$ cp -r
Mover un archivo
Puedes mover un archivo a un directorio diferente usando el comando mv. Crea e ingresa un nuevo directorio llamado temp:
$ mkdir temp
$ cd temp
$ touch tacos.txt
$ ls temp
Deberías tener solo un archivo llamado tacos.txt. Puedes cambiarle el nombre moviéndolo a la misma carpeta:
$ mv tacos.txt quesadillas.txt
$ ls
Ahora deberías tener un archivo llamado quesadillas.txt. Mueve el archivo a otro directorio. En lugar de especificar un nuevo nombre para el archivo, especifique una nueva ruta:
$ mv quesadillas.txt /Usuario/tu_nombre/Escritorio
$ ls /Usuario/tu_nombre/Escritorio
Resumen
En esta lección, has aprendido todo sobre el sistema de archivos. Has leído sobre cómo se organizan tus archivos en una estructura de árbol y algunas funciones básicas, como enumerar, crear y eliminar archivos y carpetas.
También has echado un vistazo a cómo copiar y mover archivos y carpetas, al tiempo que agregas parámetros a tus comandos para obtener el resultado deseado.
La manipulación del sistema de archivos es muy importante para ser un desarrollador eficiente. Mover archivos en carpetas en el buscador de tu Mac está bien, pero puedes aprender muy rápidamente cómo funciona si dominas la terminal. Has tu mejor esfuerzo para no usar la GUI del buscador, porque la práctica hace al maestro.
:bulb: Si eres n00b con la terminal, aun no veras los beneficios. Conforme vayas avanzando en el curso y obteniendo experiencia, estos beneficios se tornaran evidentes.
Normalmente, bash permite autocompletado con la tecla Tab, pero es sensible a mayúsculas.
💡 Sensible a mayúsculas: significa que mayúsculas y minúsculas representan cosas diferentes.
Por ejemplo:
$ cd de <tab>
No se autocompletara a la carpeta “Desktop” por que Desktop empieza con D mayúscula.
Por lo tanto, zsh te permite preocuparte menos por el nombre exacto de las carpetas y archivos, desperdiciando menos tiempo usando la línea de comandos.
Corrección de ortografía.
ZSH muestra un mensaje si el comando esta mal escrito y el comando falla al ser ejecutado:
Expansión de ruta
Cuando quieres navegar de forma profunda en una carpeta en particular, puede ser tedioso hacer lo siguiente:
Locación actual: ~/
$ cd Desktop
Locación actual: ~/Desktop/
$ cd Ironhack
Locación actual: ~/Desktop/Ironhack/
$ cd labs
....
Bash te permite hacer lo siguiente:
Locación actual: ~/
$ cd Desktop/Ironhack/labs
Pero tendras que escribir el nombre completo de cada directorio y archivo. La manera de ZSH:
Locación actual: ~/
$ cd des/iron/lab
Después presionas la tecla Tab y … en automatico transformará la ruta
En esta sección te vamos a mostrar algunas características muy útiles y sus atajos para iTerm2.
Pestañas en la terminal es igual de util que pestañas en tu navegador. antes de abrir una nueva ventana, abre una pestaña.
Operación
Mac
Linux
Crear nueva pestaña
⌘ + T
⌃ + T
Cerrar pestaña actual
⌘ + W
⌃ + ⇧ + W
Manejando paneles
iTerm2 te permite dividir pestañas en paneles rectangulares, cada una es una sesión de terminal diferente. La ventaja es puedes verlas todas al mismo tiempo.
Operación
Mac
Linux
Separar paneles verticalmente
⌘ + ⇧ + D
⌃ + ⇧ + E
Separar paneles horizontalmente
⌘ + D
⌃ + ⇧ + O
Navegar a travéz de paneles
⌘ + ⌥ + arrow
Alt + arrow
Maximizar algún panel
⌘ + ⇧ + Enter
⌃ + ⇧ + X
Cerrar el panel actual
⌘ + W
⌃ + ⇧ + W
Ejercicio - Práctica con paneles
Siempre puedes ir al apartado de menu y seleccionar una opción en lugar de usar los atajos (como estos explicados abajo). De cualquier forma, seras mas rápido si aprendes a usar los atajos.
Divide la sesión existente de forma vertical.
Asegurate de tener dos paneles con sesiones distintas.
Ingresa el comando top en una de las sesiones para mostrar el proceso actual.
Escribe ls en el otro panel.
Divide la session en donde escribiste el comando ls horizontalmente.
Escribe whoami en el panel inferior derecho.
Navega por los paneles.
Muestra el panel superior y esconde los demás momentáneamente.
Muestra lo paneles escondidos de nuevo.
El resultado final se verá algo así:
Resumen
En esta lección, has aprendido algunas de las ventajas de Zsh sobre Bash, atajos para iTerm2, como separar y manejar múltiples pestañas en iTerm2.
