Repositorio De la formación IFCD63: Open Source Backend Web Developer
¡Bienvenido al curso de Open Source Back End Web Developer! Esta guía te ayudará a empezar con tu entorno de desarrollo y a comprender los fundamentos necesarios para tus primeros pasos como desarrollador/a.
Un/a desarrollador/a backend es responsable de:
- La lógica del servidor y la base de datos de una aplicación web.
- Crear APIs que conectan el frontend con la base de datos.
- Asegurar la seguridad, escalabilidad y rendimiento de la aplicación.
Tecnologías típicas:
- Lenguajes: Python, PHP, Java, Node.js
- Bases de datos: MySQL, MongoDB, PostgreSQL
- Herramientas: Git, Docker, GitHub, servidores web como Apache o Nginx
- Página oficial: https://code.visualstudio.com/
- Descargar e instalar.
- Live Server
- GitLens
- Prettier (formateador de código)
- GitHub Copilot (opcional)
- Página oficial: https://git-scm.com/
- Descargar e instalar.
- En Windows, usa Git Bash (se instala junto con Git).
💡 Usuarios Mac: Git viene preinstalado. Si no está, puedes instalarlo con
brew install git(requiere Homebrew).
Comprobaciones de Git:
- Instalamos Git (pasos anteriores)
- Comprobamos git en terminal con
git --version - Configuramos user y el email con:
git config --global user.name "Tu Nombre"
git config --global user.email "tuemail@ejemplo.com" # cambiar por email de Github- Colocar VS Code como editor por defecto con
git config --global core.editor "code"Comprobamos que es correcto con:git config core.editor
code
- Ve a https://github.com/
- Crea una cuenta gratuita.
- Confirma tu email.
- Personaliza tu perfil con nombre, avatar y bio si quieres.
💡 Recomendación: Usa un correo profesional (no de la escuela si es temporal).
Abre tu terminal (Git Bash en Windows):
# Configura tu nombre y correo
git config --global user.name "Tu Nombre"
git config --global user.email "tuemail@ejemplo.com"Comandos básicos:
Comando Descripción
git --version Muestra la versión de git
git clone URL Clona un repositorio desde GitHub
# ---------------------------------------------
git init Inicializa un repositorio local
git status Muestra los cambios actuales
git add . Añade todos los archivos al staging
git commit -m "Mensaje" Guarda los cambios en el repositorio local
git remote add origin URL Conecta tu repo local con GitHub
git push -u origin main Sube tu código a GitHub
5️⃣ Conocer estructura básica de una página web
<!-- index.html -->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Mi primera página</title>
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Esta es mi primera página web.</p>
<img src="https://via.placeholder.com/150" alt="Imagen de ejemplo">
<p><a href="https://github.com/tuusuario">Mi perfil de GitHub</a></p>
</body>
</html>Guarda este archivo como index.html y ábrelo en tu navegador para verlo.
6️⃣ Crear y subir una primera página a GitHub
Paso a paso:
-
Explorador de archivos:
- Windows: Abre la carpeta en el explorador de archivos.
- Mac: Abre la carpeta en Finder.
- Linux: Abre la carpeta en el explorador de archivos.
-
Terminal:
mkdir mi-web
cd mi-webSi no funciona el comando, hacedlo en VS Code.
- En Windows: cread el archivo desde VS Code
- En Mac/Linux: se puede crear desde la terminal con:
touch index.html # o créalo con tu editorCread un repositorio local vacío:
git initPor lo general, no hay que colocar un repositorio dentro de otro. (Miramos si hay carpeta
.gito usamosgit log)
Debe salir un mensaje de que el repositorio se ha creado en la ruta actual.
Aparece una carpeta
.giten la ruta actual. Es una carpeta oculta que contiene información sobre el repositorio.
- Podemos hacer esto desde VS Code también con las opciones de control de cambios:
- Desde terminal:
git add index.html
git commit -m "Primera versión de mi web"
Tomad la referencia al respositorio desde el botón Code en Github:
git remote add origin https://github.com/cesarlpb/IFCD63-open-source-backend-web-developer.gitEste ejemplo usa el enlace de este repositorio de la formación, en vuestro caso si queréis usar uno de vuestros repositorios tenéis que cambiar la URL.
git clone
La alternativa a git init y usar git remote add origin es usar git clone:
git clone https://github.com/cesarlpb/IFCD63-open-source-backend-web-developer.gitCrea el repositorio local y lo conecta con GitHub.
Hay dos opciones para subir tu web:
- Opcional: Publicar en GitHub Pages usando un repositorio de GitHub Pages con el nombre:
<tu_usuario>.github.io=> opción actual - Por defecto, la rama que se publica es
main - Crear una rama
gh-pagesy subir tu web a esa rama. Como aún no hemos visto ramas, esta opción la dejamos para después.
git push -u origin main
- Ir a Github y crear el repositorio de GitHub Pages con el nombre:
<tu_usuario>.github.io
En mi caso ya existe este repositorio y no me deja crearlo de nuevo
La rama por defecto actualmente es
main, en mi caso esmaster.
Ejercicio:
Opción 1:
-
Publicar en GitHub Pages desde el repositorio
<tu_usuario>.github.ioOpción 2: -
Ve a la configuración del repo en GitHub.
-
Busca la sección Pages.
-
Selecciona la rama main y carpeta raíz (/).
-
Una vez publicado > subid cambios y comprobad que se actualizan en la URL.
Tu web estará publicada en https://<tuusuario>.github.io/
Contenido de HTML en html
Contenido de CSS en css
## JavaScript
Contenido de JavaScript en js