Rebeldes del Software by Mitanef: 3. Creación de Contenido Estático con HTML5

Objetivo: Implementar características modernas de HTML5.

Nuevas etiquetas en HTML5

HTML5 introdujo una serie de etiquetas semánticas que mejoran la estructura y accesibilidad de las páginas web. Estas etiquetas no solo ayudan a los desarrolladores a organizar el contenido de manera más lógica, sino que también mejoran la optimización para motores de búsqueda (SEO) y la accesibilidad para usuarios con discapacidades.

<header>: Define el encabezado de una sección o de la página completa. Generalmente contiene elementos como el logo, el título del sitio y la navegación principal.

html
<header>
  <h1>Mi Sitio Web</h1>
  <nav>
    <ul>
      <li><a href="#inicio">Inicio</a></li>
      <li><a href="#acerca">Acerca de</a></li>
      <li><a href="#contacto">Contacto</a></li>
    </ul>
  </nav>
</header>

<footer>: Define el pie de página de una sección o de la página completa. Suele contener información de contacto, derechos de autor y enlaces secundarios.
```
html
<footer>
  <p>&copy; 2024 Mi Sitio Web. Todos los derechos reservados.</p>
</footer>
```

<section>: Agrupa contenido temáticamente relacionado dentro de la página. Es útil para dividir la página en secciones lógicas.

html
<section id="acerca">
  <h2>Acerca de Mitanef</h2>
  <p>Descripción sobre Mitanef y sus proyectos.</p>
</section>

<article>: Representa un contenido independiente y autocontenible, como una entrada de blog, un artículo de noticias o una publicación en redes sociales.
```
html
<article>
  <h2>Título del Artículo</h2>
  <p>Contenido del artículo...</p>
</article>
```

<nav>: Define una sección de navegación, generalmente utilizada para contener enlaces de navegación principales.

html
<nav>
  <ul>
    <li><a href="#inicio">Inicio</a></li>
    <li><a href="#acerca">Acerca de</a></li>
    <li><a href="#contacto">Contacto</a></li>
  </ul>
</nav>

Uso de multimedia: `<audio>` y `<video>`

HTML5 facilita la integración de contenido multimedia directamente en las páginas web sin necesidad de plugins externos.

<audio>: Permite la reproducción de archivos de audio.

html
<audio controls>
  <source src="audio/musica.mp3" type="audio/mpeg">
  Tu navegador no soporta el elemento de audio.
</audio>

<video>: Permite la reproducción de archivos de video.

html
<video width="320" height="240" controls>
  <source src="video/introduccion.mp4" type="video/mp4">
  Tu navegador no soporta el elemento de video.
</video>

Formularios HTML5: Validación y accesibilidad

HTML5 introdujo mejoras en los formularios que facilitan la validación de datos y mejoran la accesibilidad para todos los usuarios.

Tipos de entrada mejorados: Añaden validación automática y una mejor experiencia de usuario.

html
<form>
  <label for="email">Correo electrónico:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="fecha">Fecha de nacimiento:</label>
  <input type="date" id="fecha" name="fecha">
  
  <button type="submit">Enviar</button>
</form>

Atributos de validación: required, pattern, min, max, entre otros, facilitan la validación de datos en el cliente.

html
<form>
  <label for="username">Nombre de usuario:</label>
  <input type="text" id="username" name="username" pattern="[A-Za-z]{3,}" required>
  
  <button type="submit">Registrar</button>
</form>

Ejercicio: Construir un sitio web con contenido multimedia

Objetivo del ejercicio: Aplicar los conocimientos adquiridos sobre las nuevas etiquetas de HTML5 y la integración de contenido multimedia para crear un sitio web más avanzado y dinámico.

Pasos a seguir:

Planificación del sitio web:
- Define el propósito del sitio (por ejemplo, un portafolio personal, una página de proyectos, etc.).
- Esboza la estructura básica utilizando las nuevas etiquetas de HTML5 (<header>, <footer>, <section>, <article>, <nav>).

Creación de la estructura HTML:

Crea un archivo index.html.
Añade la estructura básica utilizando las etiquetas semánticas aprendidas.

html
<!DOCTYPE html>
<html>
  <head>
    <title>Portafolio de Mitanef</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>Portafolio de Mitanef</h1>
      <nav>
        <ul>
          <li><a href="#inicio">Inicio</a></li>
          <li><a href="#proyectos">Proyectos</a></li>
          <li><a href="#contacto">Contacto</a></li>
        </ul>
      </nav>
    </header>
    
    <section id="inicio">
      <h2>Bienvenido</h2>
      <p>Hola, soy Mitanef, desarrollador web y entusiasta del software libre.</p>
    </section>
    
    <section id="proyectos">
      <h2>Proyectos</h2>
      <article>
        <h3>Proyecto 1</h3>
        <p>Descripción del proyecto 1.</p>
        <video width="320" height="240" controls>
          <source src="video/proyecto1.mp4" type="video/mp4">
          Tu navegador no soporta el elemento de video.
        </video>
      </article>
      <!-- Añade más artículos de proyectos según sea necesario -->
    </section>
    
    <footer>
      <p>&copy; 2024 Mitanef. Todos los derechos reservados.</p>
    </footer>
  </body>
</html>

Integración de contenido multimedia:
- Añade elementos <audio> y <video> en las secciones correspondientes.
- Asegúrate de que los archivos multimedia estén correctamente enlazados y accesibles.

Creación de formularios accesibles:

Añade un formulario de contacto utilizando etiquetas de formularios mejoradas de HTML5.

html
<section id="contacto">
  <h2>Contacto</h2>
  <form>
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" required>
    
    <label for="email">Correo electrónico:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="mensaje">Mensaje:</label>
    <textarea id="mensaje" name="mensaje" required></textarea>
    
    <button type="submit">Enviar</button>
  </form>
</section>

Estilización con CSS (opcional para este ejercicio):
- Aplica estilos básicos para mejorar la apariencia del sitio.
Revisión y pruebas:
- Abre el archivo index.html en diferentes navegadores para asegurarte de que todo funciona correctamente.
- Verifica que los elementos multimedia se reproduzcan sin problemas y que los formularios validen los datos correctamente.

Consejos para este ejercicio

Organización del código: Mantén tu código limpio y bien indentado para facilitar su lectura y mantenimiento.
Accesibilidad: Asegúrate de que todos los elementos multimedia tengan atributos alt y que los formularios sean accesibles para todos los usuarios.
Compatibilidad: Prueba tu sitio en diferentes navegadores y dispositivos para garantizar una experiencia consistente.
Optimización: Utiliza formatos de archivos adecuados y optimiza las imágenes y videos para mejorar la velocidad de carga del sitio.

4. Introducción a CSS: Dale Estilo a tu Web

Objetivo: Aplicar estilos visuales a páginas HTML.

¿Qué es CSS y cómo se integra con HTML?

CSS (Cascading Style Sheets) es un lenguaje de hojas de estilo utilizado para describir la presentación visual de un documento HTML. Permite separar el contenido de la estructura, facilitando la mantenibilidad y escalabilidad de los proyectos web.

Integración con HTML:

Interna: Usando la etiqueta <style> dentro del <head> del documento HTML.

html
<head>
  <style>
    body {
      background-color: #f0f0f0;
    }
  </style>
</head>

Externa: Enlazando un archivo CSS externo mediante la etiqueta <link>.

html
<head>
  <link rel="stylesheet" href="styles.css">
</head>

Ventajas de usar CSS:
- Facilita la consistencia visual a lo largo de múltiples páginas.
- Mejora la velocidad de carga al reducir el tamaño del código HTML.
- Permite una mayor flexibilidad y control sobre el diseño y la presentación.

Selectores y propiedades básicas

Los selectores en CSS permiten apuntar a elementos HTML específicos para aplicarles estilos. Las propiedades definen qué aspectos visuales se modificarán.

Selectores básicos:
- Selector de elemento: Apunta a todos los elementos de un tipo específico.
```
css
p {
  color: blue;
}
```
- Selector de clase: Apunta a elementos con una clase específica.
```
css
.destacado {
  background-color: yellow;
}
```
- Selector de ID: Apunta a un elemento con un ID específico.
```
css
#titulo {
  font-size: 24px;
}
```

Propiedades básicas:

Colores:

css
body {
  background-color: #ffffff;
  color: #333333;
}

Fuentes:

css
h1 {
  font-family: 'Arial', sans-serif;
  font-size: 2em;
}

Márgenes y padding:

css
.contenedor {
  margin: 20px;
  padding: 10px;
}

Modelos de cajas (Box Model) y alineación de elementos

El Box Model en CSS describe cómo se calculan las dimensiones de los elementos en la página, incluyendo márgenes, bordes, padding y el contenido real.

Componentes del Box Model:
- Contenido: El área donde se muestra el contenido real.
- Padding: Espacio entre el contenido y el borde.
- Borde: Línea que rodea el padding y el contenido.
- Margen: Espacio entre el borde del elemento y otros elementos adyacentes.
```
css
.caja {
  width: 200px;
  padding: 10px;
  border: 2px solid #000;
  margin: 20px;
}
```

Alineación de elementos:

Texto:

css
p {
  text-align: center;
}

Elementos en línea:

css
.elemento-en-linea {
  display: inline-block;
  vertical-align: top;
}

Flexbox (para layouts más complejos):

css
.contenedor-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Ejercicio: Estilizar la página web creada en la unidad 2

Objetivo del ejercicio: Aplicar estilos CSS a la página web personal creada previamente para mejorar su apariencia visual y usabilidad.

Pasos a seguir:

Crear un archivo CSS:
- En la misma carpeta donde tienes index.html, crea un nuevo archivo llamado styles.css.
Enlazar el archivo CSS a tu HTML:
- Asegúrate de que en la sección <head> de tu index.html tienes la siguiente línea:
```
html
<link rel="stylesheet" href="styles.css">
```

Añadir estilos básicos:

Abre styles.css y añade los siguientes estilos para comenzar:

css
/* Estilos generales */
body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  color: #333333;
  margin: 0;
  padding: 0;
}

/* Encabezado */
header {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
}

/* Navegación */
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

nav li {
  float: left;
}

nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav li a:hover {
  background-color: #111111;
}

/* Secciones */
section {
  padding: 20px;
}

/* Pie de página */
footer {
  background-color: #333333;
  color: white;
  text-align: center;
  padding: 10px;
  position: fixed;
  width: 100%;
  bottom: 0;
}

/* Estilos de proyecto */
article {
  background-color: #ffffff;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px 0;
}

/* Formularios */
form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

label {
  display: block;
  margin-bottom: 5px;
}

input, textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

Aplicar estilos a tu HTML:
- Guarda los cambios en styles.css y recarga tu index.html en el navegador para ver los estilos aplicados.
- Verifica que los estilos se apliquen correctamente y realiza ajustes según sea necesario.

Experimentar con nuevos estilos:

Añade más reglas CSS para personalizar aún más tu sitio. Por ejemplo, cambia los colores, las fuentes o añade efectos de hover a los enlaces.

css
/* Cambio de fuente para los encabezados */
h1, h2, h3 {
  font-family: 'Georgia', serif;
}

/* Efecto de transición en enlaces */
nav li a {
  transition: background-color 0.3s ease;
}

Optimización y mejores prácticas:
- Comentarios: Añade comentarios en tu CSS para mantenerlo organizado.
```
css
/* Estilos de navegación */
nav ul { ... }

/* Estilos de pie de página */
footer { ... }
```
- Consistencia: Mantén una consistencia en el uso de colores, fuentes y espaciados para una apariencia profesional.

Consejos para este ejercicio

Prueba y error: No temas experimentar con diferentes estilos y propiedades para ver cómo afectan la apariencia de tu sitio.
Referencias: Utiliza recursos como MDN Web Docs para entender mejor las propiedades y cómo usarlas.
Responsividad: Considera cómo se verá tu sitio en diferentes dispositivos. Puedes empezar a aprender sobre diseños responsivos utilizando media queries.
```
css
@media (max-width: 600px) {
  nav li {
    float: none;
  }
}
```

Reutilización de estilos: Crea clases reutilizables para aplicar estilos consistentes a múltiples elementos.

css
.boton {
  background-color: #008CBA;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.boton:hover {
  background-color: #005f6a;
}

5. Git: Control de Versiones

Objetivo: Implementar control de versiones en tus proyectos.

¿Qué es Git y por qué es fundamental en el desarrollo?

Git es un sistema de control de versiones distribuido que permite a los desarrolladores rastrear cambios en el código, colaborar de manera eficiente y revertir a versiones anteriores si es necesario. Es una herramienta esencial para cualquier desarrollador moderno debido a sus numerosas ventajas:

Historial de cambios: Permite ver qué cambios se hicieron, quién los hizo y cuándo.
Colaboración: Facilita el trabajo en equipo permitiendo que múltiples desarrolladores trabajen en el mismo proyecto sin conflictos.
Ramas: Permite trabajar en nuevas características o corregir errores en ramas separadas sin afectar el código principal.

Instalación de Git

Dependiendo de tu sistema operativo, el proceso de instalación de Git puede variar ligeramente.

Windows:
1. Descarga el instalador de Git desde git-scm.com.
2. Ejecuta el instalador y sigue las instrucciones en pantalla.
3. Durante la instalación, puedes elegir las opciones predeterminadas o personalizar según tus necesidades.
macOS:
1. Abre la Terminal.
2. Instala Git utilizando Homebrew:
```
bash
brew install git
```
3. Verifica la instalación ejecutando:
```
bash
git --version
```
Linux:
1. Abre la Terminal.
2. Instala Git utilizando el gestor de paquetes de tu distribución. Por ejemplo, en Ubuntu:
```
bash
sudo apt update
sudo apt install git
```
3. Verifica la instalación ejecutando:
```
bash
git --version
```

Configuración inicial de un repositorio

Antes de comenzar a usar Git, es importante configurarlo con tu información de usuario.

Configurar tu nombre de usuario y correo electrónico:

bash
git config --global user.name "Tu Nombre"
git config --global user.email "tuemail@ejemplo.com"

Verificar la configuración:
```
bash
git config --list
```

Comandos básicos de Git

git init: Inicializa un nuevo repositorio Git en el directorio actual.
```
bash
git init
```
git add: Añade archivos al área de preparación (staging area).
```
bash
git add nombre_del_archivo
git add .
```

git commit: Crea un nuevo commit con los cambios añadidos.

bash
git commit -m "Mensaje descriptivo del commit"

git push: Envía los commits locales al repositorio remoto.
```
bash
git push origin main
```
git pull: Obtiene y fusiona los cambios del repositorio remoto al local.
```
bash
git pull origin main
```

Ejercicio: Crear un repositorio Git para el proyecto web y realizar commits

Objetivo del ejercicio: Configurar Git en tu proyecto web y realizar tus primeros commits para llevar un control de versiones efectivo.

Pasos a seguir:

Navega a la carpeta de tu proyecto web:

bash
cd ruta/a/tu/proyecto

Inicializa un nuevo repositorio Git:
```
bash
git init
```
Añade todos los archivos al área de preparación:
```
bash
git add .
```

Crea tu primer commit:

bash
git commit -m "Inicializar repositorio con archivos HTML y CSS básicos"

Crear una nueva rama (opcional pero recomendado para desarrollo):

bash
git branch desarrollo
git checkout desarrollo

Realiza cambios en tu proyecto:
- Por ejemplo, añade una nueva sección en tu HTML o modifica estilos en tu CSS.

Añade y commitea los cambios:

bash
git add .
git commit -m "Añadir sección de proyectos y mejorar estilos"

Revisa el historial de commits:
```
bash
git log
```
Verás una lista de tus commits con sus mensajes descriptivos.

Consejos para este ejercicio

Mensajes claros: Asegúrate de que los mensajes de tus commits sean claros y descriptivos para facilitar la comprensión del historial de cambios.
Commits frecuentes: Realiza commits frecuentemente para mantener un historial detallado y facilitar la identificación de cambios específicos.
Uso de ramas: Utiliza ramas para trabajar en nuevas características o corregir errores sin afectar la rama principal (main).
Revisión de cambios: Utiliza git status y git diff para revisar los cambios antes de añadirlos al área de preparación o realizar commits.

6. GitHub: Publica y Colabora

Objetivo: Aprender a gestionar proyectos en GitHub.

Creación de una cuenta en GitHub

Registro:
- Visita github.com y haz clic en "Sign up".
- Completa el formulario de registro con tu nombre de usuario, correo electrónico y contraseña.
- Verifica tu correo electrónico siguiendo las instrucciones enviadas por GitHub.
Configuración inicial:
- Elige un plan (el gratuito es suficiente para la mayoría de los proyectos personales).
- Configura tus preferencias de notificación y privacidad según tus necesidades.

Clonar un repositorio desde GitHub

Clonar un repositorio te permite tener una copia local del mismo en tu máquina, donde puedes realizar cambios y luego sincronizarlos con el repositorio remoto.

Obtener la URL del repositorio:
- Ve al repositorio en GitHub que deseas clonar.
- Haz clic en el botón "Code" y copia la URL (HTTPS o SSH).

Clonar el repositorio:

bash
git clone https://github.com/usuario/nombre-del-repositorio.git

O si usas SSH:

bash
git clone git@github.com:usuario/nombre-del-repositorio.git

Navegar al directorio clonado:

bash
cd nombre-del-repositorio

Subir el proyecto a GitHub

Si has creado un repositorio local y deseas subirlo a GitHub, sigue estos pasos:

Crear un nuevo repositorio en GitHub:
- Inicia sesión en GitHub.
- Haz clic en el botón "+" en la esquina superior derecha y selecciona "New repository".
- Ingresa un nombre para tu repositorio y, opcionalmente, una descripción.
- Decide si quieres que sea público o privado.
- Haz clic en "Create repository".

Enlazar el repositorio local con el remoto:

bash
git remote add origin https://github.com/usuario/nombre-del-repositorio.git

O si usas SSH:

bash
git remote add origin git@github.com:usuario/nombre-del-repositorio.git

Enviar los commits al repositorio remoto:

bash
git push -u origin main

Colaboración en proyectos de código abierto

GitHub facilita la colaboración en proyectos de código abierto permitiendo a múltiples desarrolladores trabajar juntos de manera eficiente.

Fork: Crear una copia personal de un repositorio para realizar cambios sin afectar el original.
Pull Request: Proponer cambios al repositorio original después de haber realizado modificaciones en el fork.
Issues: Reportar errores, solicitar nuevas características o discutir aspectos del proyecto.
Discussions: Participar en conversaciones más amplias sobre el proyecto.

Ejercicio: Subir el proyecto web a GitHub y compartirlo

Objetivo del ejercicio: Publicar tu proyecto web en GitHub para tener un repositorio remoto y facilitar la colaboración.

Pasos a seguir:

Crear un nuevo repositorio en GitHub:
- Inicia sesión en tu cuenta de GitHub.
- Haz clic en el botón "+" y selecciona "New repository".
- Asigna un nombre a tu repositorio, por ejemplo, mi-sitio-web.
- Opcionalmente, añade una descripción.
- Elige si será público o privado.
- Haz clic en "Create repository".
Enlazar tu repositorio local con el remoto:
- En la Terminal, navega a la carpeta de tu proyecto web.
```
bash
cd ruta/a/tu/proyecto
```
- Añade el repositorio remoto:
```
bash
git remote add origin https://github.com/tu-usuario/mi-sitio-web.git
```
- Verifica que el remoto se ha añadido correctamente:
```
bash
git remote -v
```
Enviar los commits al repositorio remoto:
```
bash
git push -u origin main
```
Si es la primera vez que empujas al repositorio, GitHub te pedirá autenticación. Asegúrate de tener configurado correctamente tu método de autenticación (HTTPS o SSH).
Compartir el repositorio:
- Comparte el enlace de tu repositorio con otros para que puedan ver tu proyecto o colaborar.
- Puedes invitar a colaboradores desde la pestaña "Settings" > "Manage access".

Consejos para este ejercicio

README.md: Añade un archivo README.md a tu repositorio para proporcionar una descripción clara de tu proyecto, cómo configurarlo y cómo contribuir.
```
markdown
# Mi Sitio Web

Este es un proyecto de sitio web personal creado como parte de un curso de desarrollo web.

## Instalación

1. Clona el repositorio:
   
   ```bash
   git clone https://github.com/tu-usuario/mi-sitio-web.git
```
1. Abre el archivo index.html en tu navegador.
Contribución
Las contribuciones son bienvenidas. Por favor, abre un pull request con tus cambios.
Commits frecuentes y descriptivos: Mantén un historial de commits claro y organizado para facilitar el seguimiento de cambios y colaboraciones.
Uso de ramas para nuevas características: Trabaja en ramas separadas para desarrollar nuevas funcionalidades y evita conflictos en la rama principal.
```
bash
git checkout -b nueva-funcionalidad
```
Revisión de código: Aprovecha las herramientas de GitHub para revisar y comentar los cambios propuestos antes de fusionarlos con la rama principal.

7. Introducción a cPanel: Gestión de Servidores

Objetivo: Familiarizarse con cPanel para administrar servidores web.

¿Qué es cPanel y por qué es útil?

cPanel es un panel de control de alojamiento web que proporciona una interfaz gráfica y herramientas automatizadas diseñadas para simplificar el proceso de alojamiento de un sitio web. Es ampliamente utilizado por proveedores de hosting debido a su facilidad de uso y funcionalidad robusta.

Funciones principales:
- Gestión de dominios: Añadir, eliminar y gestionar dominios y subdominios.
- Gestión de correos electrónicos: Crear y administrar cuentas de correo electrónico.
- Bases de datos: Crear y gestionar bases de datos MySQL y PostgreSQL.
- Gestión de archivos: Acceso a un administrador de archivos para subir, descargar y editar archivos.
- Seguridad: Configurar certificados SSL, gestionar firewalls y proteger el sitio contra amenazas.

Panel de control: dominios, correos y bases de datos

Dominios:
- Agregar un dominio: Permite añadir dominios adicionales a tu cuenta de hosting.
```
plaintext
cPanel > Domains > Add Domain
```
- Subdominios: Crear subdominios para organizar diferentes secciones de tu sitio web.
```
plaintext
cPanel > Domains > Subdomains
```
Correos electrónicos:
- Crear una cuenta de correo:
```
plaintext
cPanel > Email > Email Accounts > Create
```
- Gestionar buzones: Acceder a los correos electrónicos, configurar respuestas automáticas y filtros.
Bases de datos:
- Crear una base de datos:
```
plaintext
cPanel > Databases > MySQL Databases > Create New Database
```
- Gestionar usuarios: Añadir usuarios a la base de datos con permisos específicos.
```
plaintext
cPanel > Databases > MySQL Users > Create New User
```
- phpMyAdmin: Acceder a phpMyAdmin para gestionar bases de datos de manera más detallada.

Creación de subdominios y gestión de archivos

Crear un subdominio:
- Ve a cPanel > Domains > Subdomains.
- Ingresa el nombre del subdominio (por ejemplo, blog.mitanef.com).
- Selecciona el dominio principal al que pertenecerá.
- Define la carpeta raíz para el subdominio.
- Haz clic en "Create".
Gestión de archivos:
- Administrador de archivos: Accede a todos los archivos de tu servidor y realiza operaciones como subir, descargar, editar y eliminar archivos.
```
plaintext
cPanel > Files > File Manager
```
- Gestión de permisos: Cambia los permisos de archivos y carpetas para controlar quién puede acceder o modificar ciertos elementos.
- Copias de seguridad: Realiza y restaura copias de seguridad de tu sitio web y bases de datos.

Ejercicio: Configurar cPanel para alojar tu página web personal

Objetivo del ejercicio: Utilizar cPanel para alojar tu sitio web personal, configurando dominios, correos electrónicos y gestionando archivos.

Pasos a seguir:

Acceder a cPanel:
- Inicia sesión en tu cuenta de hosting.
- Navega a la URL de cPanel (generalmente tudominio.com/cpanel).
- Introduce tus credenciales de acceso.
Añadir un dominio (si no lo has hecho previamente):
- Ve a Domains > Add Domain.
- Ingresa el nombre del dominio que deseas añadir.
- Configura la carpeta raíz y haz clic en "Add Domain".
Crear una cuenta de correo electrónico:
- Ve a Email > Email Accounts > Create.
- Introduce el nombre de la cuenta de correo (por ejemplo, contacto@mitanef.com).
- Establece una contraseña segura.
- Haz clic en "Create".
Configurar una base de datos (opcional para sitios dinámicos):
- Ve a Databases > MySQL Databases > Create New Database.
- Nombra tu base de datos y haz clic en "Create Database".
- Crea un usuario de base de datos y asígnale una contraseña.
- Asocia el usuario con la base de datos con los permisos adecuados.
Gestionar archivos para tu sitio web:
- Ve a Files > File Manager.
- Navega a la carpeta raíz de tu dominio (por ejemplo, public_html).
- Sube tus archivos HTML, CSS y otros recursos a esta carpeta.
- Verifica que tu sitio web se muestre correctamente accediendo a tu dominio en un navegador.
Configurar subdominios (opcional):
- Si deseas organizar tu sitio en subdominios, ve a Domains > Subdomains.
- Crea subdominios según sea necesario y asigna las carpetas raíz correspondientes.
Realizar una copia de seguridad:
- Ve a Files > Backup > Download a Full Website Backup.
- Sigue las instrucciones para generar y descargar una copia de seguridad de tu sitio web.

Consejos para este ejercicio

Seguridad: Asegúrate de utilizar contraseñas fuertes para todas tus cuentas de correo y acceso a cPanel.
Organización: Mantén una estructura organizada de tus archivos y carpetas para facilitar la gestión y mantenimiento de tu sitio web.
Actualizaciones: Mantén tu cPanel y todas las aplicaciones instaladas actualizadas para asegurar la compatibilidad y seguridad.
Automatización de backups: Configura copias de seguridad automáticas si tu proveedor de hosting lo permite, para proteger tu sitio contra pérdidas de datos.

8. FTP: Transferencia de Archivos al Servidor

Objetivo: Transferir archivos al servidor usando FTP.

¿Qué es FTP y cómo funciona?

FTP (File Transfer Protocol) es un protocolo estándar utilizado para transferir archivos entre un cliente y un servidor en una red. Es fundamental para los desarrolladores web ya que permite subir, descargar y gestionar archivos en el servidor donde está alojado tu sitio web.

Funcionamiento:
- Cliente FTP: Software que se utiliza para conectarse al servidor FTP y gestionar archivos (por ejemplo, FileZilla, WinSCP).
- Servidor FTP: Máquina que aloja los archivos y responde a las solicitudes de los clientes FTP.
- Autenticación: Requiere credenciales (nombre de usuario y contraseña) para acceder al servidor y transferir archivos de manera segura.

Herramientas de FTP: FileZilla, WinSCP

FileZilla:
- Descripción: Uno de los clientes FTP más populares y gratuitos. Compatible con Windows, macOS y Linux.
- Descarga: filezilla-project.org
- Características:
  - Interfaz de usuario intuitiva.
  - Soporte para FTP, SFTP y FTPS.
  - Transferencias de archivos seguras.
  - Gestión de sitios guardados.
WinSCP:
- Descripción: Cliente FTP gratuito para Windows con soporte para SFTP y SCP además de FTP.
- Descarga: winscp.net
- Características:
  - Integración con PuTTY para sesiones SSH.
  - Soporte para scripting y automatización.
  - Interfaz dual (estilo Norton Commander o Explorer).

Conexión al servidor usando FTP

Obtener credenciales FTP:
- Desde cPanel, ve a Files > FTP Accounts.
- Crea una nueva cuenta FTP o utiliza una existente.
- Anota el nombre de usuario, la contraseña y el servidor FTP (normalmente tu dominio o una dirección IP).
Configurar el cliente FTP (usando FileZilla como ejemplo):
- Abre FileZilla.
- Ve a File > Site Manager.
- Haz clic en "New Site" y asígnale un nombre.
- Host: Ingresa el servidor FTP (por ejemplo, ftp.mitanef.com).
- Port: Generalmente es 21 para FTP estándar o 22 para SFTP.
- Protocol: Selecciona "FTP - File Transfer Protocol" o "SFTP - SSH File Transfer Protocol" según corresponda.
- Encryption: Selecciona "Use explicit FTP over TLS if available" para mayor seguridad.
- Logon Type: Selecciona "Normal".
- User: Ingresa tu nombre de usuario FTP.
- Password: Ingresa tu contraseña FTP.
- Haz clic en "Connect".
Transferir archivos:
- Navegar: Usa la interfaz de FileZilla para navegar entre tu sistema local y el servidor.
- Subir archivos: Arrastra y suelta archivos desde tu sistema local al servidor.
- Descargar archivos: Arrastra y suelta archivos desde el servidor a tu sistema local.

Ejercicio: Subir los archivos de tu página web al servidor a través de FTP

Objetivo del ejercicio: Utilizar un cliente FTP para transferir los archivos de tu sitio web desde tu máquina local al servidor, haciendo que tu sitio sea accesible en línea.

Pasos a seguir:

Configurar tu cliente FTP:
- Abre FileZilla (o tu cliente FTP preferido).
- Configura una nueva conexión en el Site Manager siguiendo las instrucciones anteriores.
Conectar al servidor:
- Selecciona el sitio que has configurado en el Site Manager.
- Haz clic en "Connect".
- Si es la primera vez que te conectas, puede que recibas una advertencia sobre el certificado TLS. Acepta para continuar.
Navegar a la carpeta raíz de tu sitio web:
- En el panel derecho (servidor), navega a la carpeta donde deben alojarse tus archivos web, generalmente public_html o www.
Transferir archivos:
- En el panel izquierdo (local), navega a la carpeta donde tienes tus archivos web (index.html, styles.css, imágenes, etc.).
- Selecciona todos los archivos y arrástralos al panel derecho, soltándolos en la carpeta raíz del servidor.
- Espera a que se complete la transferencia. Verifica que los archivos aparezcan en el servidor.
Verificar tu sitio web:
- Abre tu navegador y visita tu dominio (https://mitanef.com) para ver tu sitio web en línea.
- Asegúrate de que todos los elementos se muestren correctamente y que los enlaces funcionen.
Actualizar archivos:
- Para realizar actualizaciones, edita los archivos en tu máquina local.
- Vuelve a transferir los archivos modificados al servidor usando el cliente FTP.
- Refresca tu sitio web en el navegador para ver los cambios.

Consejos para este ejercicio

Organización de archivos: Mantén una estructura de carpetas organizada en tu proyecto para facilitar la transferencia y gestión de archivos.
Seguridad: Utiliza SFTP en lugar de FTP siempre que sea posible para asegurar que la transferencia de archivos esté encriptada.
Sincronización: Algunos clientes FTP permiten sincronizar carpetas automáticamente para mantener tu servidor actualizado con los cambios locales.
Respaldo: Antes de realizar cambios importantes, realiza una copia de seguridad de los archivos existentes en el servidor.

9. Despliegue del Proyecto Web en cPanel

Objetivo: Desplegar y publicar tu proyecto web en un servidor.

Uso de cPanel para despliegue

Desplegar tu proyecto web implica subir tus archivos al servidor y configurarlo para que sea accesible en línea. cPanel facilita este proceso a través de su interfaz gráfica y herramientas integradas.

Acceder a cPanel:
- Inicia sesión en tu cuenta de hosting y accede a cPanel.
Subir archivos a través del Administrador de Archivos:
- Ve a Files > File Manager.
- Navega a la carpeta raíz de tu dominio (por ejemplo, public_html).
- Haz clic en "Upload" y selecciona tus archivos desde tu computadora.
- Una vez subidos, verifica que los archivos estén en la ubicación correcta.
Usar Git para despliegue (opcional):
- Si prefieres usar Git para desplegar tu proyecto, puedes configurar un repositorio en cPanel.
- Ve a Git Version Control en cPanel.
- Crea un nuevo repositorio y vincúlalo con tu repositorio remoto de GitHub.
- Configura el despliegue automático para que cada vez que hagas push a la rama principal, los cambios se desplieguen automáticamente en tu servidor.
Configurar DNS y dominios:
- Si tu dominio no está apuntando correctamente a tu servidor, ve a Domains > DNS Zone Editor.
- Asegúrate de que los registros A y CNAME apunten a la dirección IP de tu servidor.
- Propagar cambios de DNS puede tardar hasta 48 horas, aunque generalmente es más rápido.

Manejo de bases de datos (si aplica)

Si tu proyecto web utiliza una base de datos, es importante configurarla correctamente en el servidor.

Crear una base de datos en cPanel:
- Ve a Databases > MySQL Databases.
- Crea una nueva base de datos y un usuario asociado con permisos adecuados.
- Asocia el usuario con la base de datos seleccionando los permisos necesarios.
Importar datos a la base de datos:
- Ve a Databases > phpMyAdmin.
- Selecciona la base de datos creada.
- Haz clic en "Import" y selecciona el archivo .sql con tus datos.
- Ejecuta la importación y verifica que los datos se hayan cargado correctamente.

Configurar las credenciales de la base de datos en tu aplicación:

Actualiza tu archivo de configuración en tu proyecto web (por ejemplo, config.php o .env) con los detalles de la base de datos creada en cPanel.

php
<?php
$servername = "localhost";
$username = "tu_usuario";
$password = "tu_contraseña";
$dbname = "tu_base_de_datos";

// Crear conexión
$conn = new mysqli($servername, $username, $password, $dbname);

// Verificar conexión
if ($conn->connect_error) {
  die("Conexión fallida: " . $conn->connect_error);
}
?>

Ejercicio: Desplegar tu página web utilizando cPanel y FTP

Objetivo del ejercicio: Publicar tu proyecto web en un servidor utilizando cPanel y FTP, asegurando que esté accesible y funcionando correctamente en línea.

Pasos a seguir:

Preparar tu proyecto para el despliegue:
- Asegúrate de que todos los archivos necesarios están listos y optimizados.
- Verifica que las rutas de archivos y enlaces sean correctas.
- Si usas bases de datos, asegúrate de que estén configuradas y vinculadas correctamente.
Subir los archivos al servidor:
- Usa el Administrador de Archivos en cPanel para subir tus archivos a public_html o la carpeta raíz de tu dominio.
- Alternativamente, utiliza FTP (como se explicó en la unidad 8) para transferir los archivos.
Configurar la base de datos (si aplica):
- Crea una base de datos en cPanel y asigna un usuario con permisos.
- Importa los datos a la base de datos usando phpMyAdmin.
- Actualiza las credenciales de la base de datos en tu proyecto web.
Configurar DNS:
- Asegúrate de que tu dominio esté apuntando al servidor correcto.
- Si acabas de registrar el dominio, espera a que los cambios de DNS se propaguen.
Probar tu sitio web:
- Abre tu navegador y visita tu dominio (por ejemplo, https://mitanef.com).
- Verifica que todas las páginas, imágenes y funcionalidades estén funcionando correctamente.
- Revisa la consola del navegador para identificar y solucionar posibles errores de JavaScript o de carga de recursos.
Optimización y ajustes finales:
- Asegúrate de que tu sitio web cargue rápidamente optimizando imágenes y minificando archivos CSS y JavaScript.
- Implementa medidas de seguridad básicas, como configurar HTTPS mediante certificados SSL.

Consejos para este ejercicio

Pruebas exhaustivas: Antes de considerar el despliegue completo, prueba todas las funcionalidades de tu sitio en un entorno local para asegurar que todo funcione correctamente.
Optimización de recursos: Utiliza herramientas como ImageOptim para optimizar tus imágenes y reducir los tiempos de carga.
Seguridad: Configura HTTPS para tu sitio web utilizando certificados SSL gratuitos de Let's Encrypt. cPanel generalmente ofrece herramientas para gestionar certificados SSL fácilmente.
Automatización: Considera configurar despliegues automáticos mediante GitHub y cPanel para facilitar actualizaciones futuras.
Monitoreo: Utiliza herramientas de monitoreo para seguir el rendimiento y la disponibilidad de tu sitio web.

10. Práctica Continua y Mejora de tu Sitio Web

Objetivo: Mejorar y mantener el proyecto web a largo plazo.

Revisión de buenas prácticas en HTML, CSS y Git

Mantener un sitio web de calidad requiere adherirse a buenas prácticas que aseguren la eficiencia, accesibilidad y mantenibilidad del código.

HTML:
- Semántica: Utiliza etiquetas semánticas para mejorar la estructura y accesibilidad.
- Validación: Usa herramientas como W3C Validator para asegurarte de que tu HTML esté libre de errores.
- Accesibilidad: Implementa atributos alt en imágenes, utiliza etiquetas ARIA cuando sea necesario y asegúrate de que tu sitio sea navegable mediante teclado.
CSS:
- Modularidad: Divide tus estilos en archivos CSS separados o utiliza preprocesadores como SASS para una mejor organización.
- Consistencia: Mantén una consistencia en los nombres de clases y en la organización de las reglas CSS.
- Optimización: Minimiza y combina archivos CSS para reducir el número de solicitudes HTTP.
Git:
- Commits claros: Escribe mensajes de commit claros y descriptivos.
- Uso de ramas: Utiliza ramas para desarrollar nuevas características o corregir errores sin afectar la rama principal.
- Resolución de conflictos: Aprende a manejar conflictos de merge para mantener la integridad del código.

Herramientas para el mantenimiento de proyectos a largo plazo

Mantener un proyecto web implica utilizar herramientas que faciliten la gestión, monitoreo y actualización del mismo.

Herramientas de CI/CD (Integración Continua/Despliegue Continuo):
- GitHub Actions: Automatiza pruebas y despliegues cada vez que realizas un push.
- Travis CI: Servicio de CI que se integra fácilmente con GitHub.
Sistemas de monitoreo:
- Google Analytics: Rastrea el tráfico y comportamiento de los usuarios en tu sitio web.
- UptimeRobot: Monitorea la disponibilidad de tu sitio web y te alerta en caso de caídas.
Gestores de dependencias:
- npm: Para proyectos que utilizan JavaScript, gestiona las dependencias y scripts de tu proyecto.
- Composer: Para proyectos PHP, gestiona las dependencias de tu aplicación.
Sistemas de gestión de contenido (CMS):
- WordPress: Si decides que tu sitio necesite funcionalidades más avanzadas, un CMS puede facilitar la gestión de contenido.

Optimización de sitios web para velocidad y rendimiento

La velocidad y el rendimiento de tu sitio web son cruciales para la experiencia del usuario y el SEO. Aquí tienes algunas estrategias para optimizar tu sitio:

Minificación de archivos:

CSS y JavaScript: Reduce el tamaño de tus archivos eliminando espacios, comentarios y caracteres innecesarios.

bash
# Usando una herramienta como UglifyJS para JavaScript
uglifyjs script.js -o script.min.js

# Usando una herramienta como cssnano para CSS
cssnano styles.css styles.min.css

Optimización de imágenes:
- Compresión: Utiliza formatos de imagen optimizados como WebP o comprime imágenes sin pérdida de calidad.
- Lazy Loading: Carga imágenes solo cuando son visibles en la pantalla para reducir el tiempo de carga inicial.
```
html
<img src="imagen.jpg" alt="Descripción" loading="lazy">
```
Uso de CDN (Content Delivery Network):
- Distribuye tus archivos estáticos a través de una red global de servidores para reducir la latencia y mejorar la velocidad de carga.

Caching:

Configura reglas de caché en tu servidor para almacenar versiones estáticas de tu sitio y reducir la carga en el servidor.

apache
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
  ExpiresByType image/x-icon "access plus 1 year"
  ExpiresDefault "access plus 2 days"
</IfModule>

Reducción de solicitudes HTTP:
- Minimiza el número de archivos CSS y JavaScript combinándolos y utilizándolos de manera eficiente.

Ejercicio: Hacer mejoras iterativas al proyecto web basado en feedback y prácticas avanzadas

Objetivo del ejercicio: Aplicar mejoras continuas a tu proyecto web utilizando las buenas prácticas aprendidas y el feedback recibido.

Pasos a seguir:

Recopilar feedback:
- Comparte tu sitio web con amigos, colegas o en comunidades en línea y solicita retroalimentación.
- Utiliza herramientas como Google Analytics para obtener datos sobre el comportamiento de los usuarios.
Analizar el rendimiento:
- Usa herramientas como Google PageSpeed Insights o GTmetrix para analizar la velocidad y rendimiento de tu sitio.
- Identifica áreas de mejora basadas en los informes generados.
Implementar optimizaciones:
- Minificar archivos: Reduce el tamaño de tus archivos CSS y JavaScript.
- Optimizar imágenes: Comprime y utiliza formatos de imagen modernos.
- Configurar caching: Añade reglas de caché en tu servidor.
Mejorar la accesibilidad:
- Asegúrate de que todos los elementos de tu sitio sean accesibles para usuarios con discapacidades.
- Utiliza herramientas como WAVE para evaluar la accesibilidad de tu sitio.
Actualizar contenido regularmente:
- Añade nuevas secciones, artículos o proyectos a tu sitio para mantenerlo actualizado y relevante.
- Revisa y actualiza el contenido existente para mejorar la claridad y la precisión.
Mantener el código limpio y organizado:
- Refactoriza el código para eliminar redundancias y mejorar la legibilidad.
- Utiliza comentarios para explicar secciones complejas del código.
Implementar funcionalidades avanzadas:
- Aprende e integra JavaScript para añadir interactividad a tu sitio.
- Considera el uso de frameworks o librerías como React, Vue o Angular para proyectos más complejos.
Realizar pruebas continuas:
- Prueba tu sitio en diferentes navegadores y dispositivos para asegurar una experiencia consistente.
- Realiza pruebas de usabilidad para identificar y corregir posibles problemas de navegación o interacción.

Consejos para este ejercicio

Iteración constante: La mejora continua es clave en el desarrollo web. Siempre hay algo nuevo que aprender y aplicar.
Mantén la simplicidad: Evita sobrecargar tu sitio con demasiadas funcionalidades innecesarias. Enfócate en ofrecer una experiencia limpia y eficiente.
Documentación: Mantén una documentación clara de los cambios realizados y las mejoras implementadas para futuras referencias.
Automatización: Utiliza herramientas de automatización como Gulp o Webpack para optimizar y gestionar tareas repetitivas.
Seguridad: Mantén tu sitio seguro actualizando regularmente el software y aplicando prácticas de seguridad recomendadas.

Conclusión del Curso

Felicidades por completar el curso básico de desarrollo web con Mitanef. Has adquirido las habilidades esenciales para construir, gestionar y desplegar tu propio sitio web. Aquí tienes un resumen de lo que has aprendido:

Fundamentos de HTML y HTML5: Creación de estructuras web semánticas y manejo de contenido multimedia.
Estilización con CSS: Aplicación de estilos visuales y conceptos avanzados como el Box Model.
Control de versiones con Git: Gestión eficiente del código y colaboración en proyectos.
Gestión de proyectos en GitHub: Publicación y colaboración en repositorios remotos.
Administración de servidores con cPanel: Gestión de dominios, correos electrónicos y bases de datos.
Transferencia de archivos con FTP: Subida y gestión de archivos en el servidor.
Despliegue de proyectos web: Publicación efectiva de tu sitio web en línea.
Mejora continua y mantenimiento: Optimización del rendimiento y actualización constante del sitio.

Recursos Adicionales

Para seguir mejorando tus habilidades en desarrollo web, aquí tienes algunos recursos recomendados:

Documentación Oficial:
- MDN Web Docs
- W3Schools
Cursos y Tutoriales:
- FreeCodeCamp
- Codecademy
Comunidades y Foros:
- Stack Overflow
- GitHub Community
Herramientas de Desarrollo:
- Visual Studio Code
- GitHub Desktop

Próximos Pasos

Ahora que has dominado los fundamentos, considera explorar temas más avanzados como JavaScript, frameworks modernos (React, Vue, Angular), desarrollo backend, bases de datos más complejas y prácticas de seguridad web. Continúa practicando, construyendo proyectos y colaborando con otros desarrolladores para seguir creciendo en el campo del desarrollo web.

¡Éxito en tu camino hacia convertirte en un desarrollador web sólido y competente!

analityc

martes, octubre 15, 2024

3. Creación de Contenido Estático con HTML5

Nuevas etiquetas en HTML5

Uso de multimedia: <audio> y <video>

Formularios HTML5: Validación y accesibilidad

Ejercicio: Construir un sitio web con contenido multimedia

Consejos para este ejercicio

4. Introducción a CSS: Dale Estilo a tu Web

¿Qué es CSS y cómo se integra con HTML?

Selectores y propiedades básicas

Modelos de cajas (Box Model) y alineación de elementos

Ejercicio: Estilizar la página web creada en la unidad 2

Consejos para este ejercicio

5. Git: Control de Versiones

¿Qué es Git y por qué es fundamental en el desarrollo?

Instalación de Git

Configuración inicial de un repositorio

Comandos básicos de Git

Ejercicio: Crear un repositorio Git para el proyecto web y realizar commits

Consejos para este ejercicio

6. GitHub: Publica y Colabora

Creación de una cuenta en GitHub

Clonar un repositorio desde GitHub

Subir el proyecto a GitHub

Colaboración en proyectos de código abierto

Ejercicio: Subir el proyecto web a GitHub y compartirlo

Consejos para este ejercicio

Contribución

7. Introducción a cPanel: Gestión de Servidores

¿Qué es cPanel y por qué es útil?

Panel de control: dominios, correos y bases de datos

Creación de subdominios y gestión de archivos

Ejercicio: Configurar cPanel para alojar tu página web personal

Consejos para este ejercicio

8. FTP: Transferencia de Archivos al Servidor

¿Qué es FTP y cómo funciona?

Herramientas de FTP: FileZilla, WinSCP

Conexión al servidor usando FTP

Ejercicio: Subir los archivos de tu página web al servidor a través de FTP

Consejos para este ejercicio

9. Despliegue del Proyecto Web en cPanel

Uso de cPanel para despliegue

Manejo de bases de datos (si aplica)

Ejercicio: Desplegar tu página web utilizando cPanel y FTP

Consejos para este ejercicio

10. Práctica Continua y Mejora de tu Sitio Web

Revisión de buenas prácticas en HTML, CSS y Git

Herramientas para el mantenimiento de proyectos a largo plazo

Optimización de sitios web para velocidad y rendimiento

Ejercicio: Hacer mejoras iterativas al proyecto web basado en feedback y prácticas avanzadas

Consejos para este ejercicio

Conclusión del Curso

Recursos Adicionales

Próximos Pasos

No hay comentarios.:

Uso de multimedia: `<audio>` y `<video>`