DGPC Cátedra Díaz Cortez Clase 2 Servidor WEB, FTP y HTML

Funcionamiento Básico de la Web

👤

Usuario/a Común

Abre el navegador e ingresa una URL

🌐

Solicitud HTTP

Petición GET/POST al puerto 80/443, que son los puntos finales lógicos estándar utilizados para el tráfico web

📖

DNS

El DNS (Domain Name System o Sistema de Nombres de Dominio) es la "agenda telefónica" de Internet. Traduce nombres de dominio legibles por humanos/as a sus números de ip.

🔌

Proveedor Conectividad (ISP)

Conecta dispositivos a la red Internet y rutea paquetes por internet

🖥️

Servidor Web

Apache/Nginx recibe la petición reune los contenidos solicitados y los envía (los sirve) al dispositivo de origen de la solicitud.

🗄️

Servicios & Bases de Datos

MySQL/PostgreSQL consultan datos

📄

Respuesta HTTP

El servidor reune los contenidos solicitados en formatos HTML/CSS/JS y los envía al/la usuario/a

Funcionamiento Webmaster

👨‍💻

Usuario/a Webmaster

Desarrollador/a /Diseñador/a

💻

Programación Web

Editor de código: VS Code, Trae, Void, VsCodium, Sublime, etc

📤

Solicitud FTP/SFTP

El FTP, (File Transfer Protocol) Protocolo de Transferencia de Archivos, es un estándar de red utilizado para transferir archivos entre un cliente (tu ordenador) y un servidor a través de Internet o una red local. Permite subir, descargar o modificar documentos de forma directa y rápida, siendo fundamental para gestionar sitios web.

📖

DNS

ftp.tudominio.com → IP servidor

🔌

Proveedor Conectividad

Transfiere archivos

🖥️

Servidor Web

Almacena archivos en /public_html

🗄️

Bases de Datos

phpMyAdmin gestiona tablas

HTML - Lenguaje de Marcas de Hipertexto (Versión 5.0)

                        Definición: HTML (HyperText Markup Language) es el componente más básico de la
                        Web. Define el significado y la estructura del contenido de los sitios web. No es un
                            lenguaje de programación, es un lenguaje de marcado.
                    

HTML

Estructura y contenido

CSS

Apariencia y estilos

JavaScript

Funcionalidad y comportamiento

"Hipertexto" hace referencia a los enlaces que conectan páginas web entre sí, ya sea dentro de un único sitio web o entre sitios diferentes. Los enlaces son un aspecto fundamental de la Web.

Estructura de un Elemento HTML

<a>

DGPC

</a>

Elemento completo

1. Etiqueta de apertura:
<a>
Signos menor y mayor. Indica dónde comienza el elemento.

2. Contenido:
DGPC
Texto, imágenes u otro contenido del elemento.

3. Etiqueta de cierre:
</a>
Barra de cierre antes del nombre. Indica dónde termina.

Etiquetas HTML Fundamentales

<!Doctype html> <html lang="es"> </html> <head> </head> <title> </title> <meta charset="utf-8" /> <body> </body> <header> </header> <main> </main> <footer> </footer> <nav> </nav> <ul> </ul> <ol> </ol> <li> </li> <section> </section> <article> </article> <h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6> <a href="http://dgpc.ar"> </a> <p> </p> <br/> <div> </div> <span> </span> <figure> </figure> <img src="#" alt="descripción" />

Jerarquía de Títulos

Título de segundo nivel (h2)

Título de tercer nivel (h3)

Título de cuarto nivel (h4)

Título de quinto nivel (h5)

Título de sexto nivel (h6)

Atributos HTML

Los atributos contienen información adicional acerca del elemento y siempre se incluyen en la etiqueta de apertura, nunca en la de cierre.

Estructura:
<p class="editorNota">Texto</p>

class = nombre del atributo
"editorNota" = valor del atributo (siempre entre comillas)

El atributo class identifica a un elemento como parte de una clase para aplicar estilos CSS o manipular con JavaScript.

⚠️ Reglas importantes:
1. Espacio entre el nombre del elemento y el atributo
2. Nombre del atributo seguido por signo igual (=)
3. Comillas de apertura y cierre encerrando el valor
4. Las etiquetas deben abrirse y cerrarse ordenadamente (anidamiento correcto)
5. Si se solapan, el navegador intentará adivinar y puede producir resultados inesperados

Ejemplo: Atributo Alt en Imágenes

El texto del atributo alt debe proporcionar al lector información suficiente sobre lo que muestra la imagen (accesibilidad y SEO):

                        <!-- Ejemplo correcto -->

                        <img src="logodgpc.svg" alt="Logotipo de la Materia Diseño Gráfico por Computación Cátedra Díaz Cortez con las letras dgpc"
                            />

                        <!-- Estructura general -->

                        <figure>
                        <img src="ruta/imagen.jpg" alt="Descripción accesible" />
                        </figure>

Estructura Completa de Documento

Cada etiqueta desglosada: apertura (con atributos) → contenido → cierre

                        <!-- Declaración DOCTYPE -->

                        <!Doctype html>


                        <-- Elemento raíz con atributo de idioma -->

                        <html lang="es">


                        <!-- ENCABEZADO: Metadatos del documento -->

                        <!-- Apertura head -->
                        <head>

                        <!-- Apertura title
                                    -->
                        <title>
                         UBA FADU DGPC  Diseño Gráfico por Computación - Cátedra Díaz Cortez - Ver texto completo en dgpc.ar -> estudiantes
                        </title>
                        <!-- Cierre title
                                    -->

                        <!-- Meta etiqueta con
                                    atributos charset -->
                        <meta charset="utf-8" />

                        </head>
                        <!-- Cierre head -->

                        <!-- CUERPO: Contenido visible de la página -->

                        <!-- Apertura body -->
                        <body>

                        <!-- Apertura header -->
                        <header>
                        
                        <img src="imagenes/logodgpc.svg" alt="logo de la catedra Diaz Cortez" />
                        
                        <nav>
                        
                        <button>
                        Menú
                        </button>
                        
                        <ul>
                        
                        <li>
                        <a href="#">
                        Inicio
                        </a>
                        </li>
                        
                        <li>
                        <a href="http://dgpc.ar">
                        DGPC
                        </a>
                        </li>
                        
                        <li>
                        <a href="http://www.fadu.uba.ar">
                        FADU
                        </a>
                        </li>
                        
                        </ul>
                        </nav>
                        </header>
                        <!-- Cierre header -->

                        <!-- Apertura main
                                    -->
                        <main>

                        <!-- Apertura section -->
<section>

<!-- H1: Título principal de la sección (fuera del article) -->
<h1>
Acciones por un mundo pacífico
</h1>
<!-- Cierre h1 -->

<!-- Apertura article -->
<article>

<!-- H2: Subtítulo específico del artículo -->
<h2>
Acción 7 A: Abraza la inclusión y la diversidad
</h2>
<!-- Cierre h2 -->

<!-- Contenido del artículo (párrafos, imágenes, enlaces, etc.) -->
<p>
Texto introductorio sobre la acción 7A...
</p>

</article>
<!-- Cierre article -->

</section>
<!-- Cierre section -->

                        </main>
                        <!-- Cierre main
                                    -->

                        <!-- Apertura footer
                                    -->
                        <footer>
                        Pie de
                                    página
                        </footer>
                        <!-- Cierre footer
                                    -->

                        </body>
                        <!-- Cierre body -->

                        </html>
                        <!-- Cierre html -->
                    

                        💡 Análisis visual: Cada línea muestra una parte distinta del elemento. Notá
                        cómo los atributos (como lang="es" o
                        href="http://dgpc.ar") siempre van en la etiqueta de apertura,
                        nunca en la de cierre. Las etiquetas de cierre siempre llevan la barra invertida /.
                    