Introducción a Internet, la Web y WordPress

Introducción a Internet y la Web

1. ¿Qué es Internet?

Internet es una red global de computadoras y otros dispositivos interconectados que forman una "tela de araña". Aunque es una red deslocalizada, existen nodos de interconexión, como los proveedores de internet. No debe confundirse con sus servicios como la World Wide Web (WWW) o la "nube".

Internet se originó con el proyecto militar ARPANET en 1969, posteriormente pasó a ser gestionada por la Fundación Nacional de Ciencias en los años 80 y se transformó en lo que hoy conocemos como Internet en los 90s.

2. Componentes del Ordenador

Un ordenador es un sistema electrónico que procesa y almacena información. Se compone de hardware (parte física) y software (programas). Los principales componentes de hardware son:

• CPU (Unidad Central de Procesamiento): Realiza el procesamiento de la información.
• Fuente de alimentación: Suministra energía al sistema.
• RAM (Memoria de Acceso Aleatorio): Almacena temporalmente la información que se está procesando.
• Tarjeta gráfica: Convierte la salida digital en imágenes de video.
• Disco duro (actualmente SSD): Almacena la información de forma permanente.
• Tarjeta de red: Permite la conexión a la red local e Internet.

3. Arquitectura Cliente-Servidor

En Internet, los dispositivos se dividen en servidores (proveedores de servicios) y clientes (solicitantes de servicios). La comunicación se realiza mediante los protocolos TCP/IP:

• TCP (Transmission Control Protocol): Protocolo que permite la conexión y el intercambio de datos entre dos dispositivos.
• IP (Internet Protocol): Protocolo que identifica los dispositivos en Internet. Existen dos versiones: IPv4 e IPv6. Las direcciones IP identifican la conexión de un dispositivo en la red y pueden ser públicas o privadas. Además, la dirección MAC (Media Access Control) identifica de manera única una pieza de hardware de red.

4. Servicios de Internet

Internet ofrece diversos servicios, entre los cuales destacan:

• WWW (World Wide Web): Permite visualizar páginas web mediante el protocolo HTTP (Hypertext Transfer Protocol). Facilita la consulta de textos, imágenes, videos y audio a través de navegadores web.
• FTP (File Transfer Protocol): Facilita la transferencia de archivos entre computadoras.
• Correo electrónico: Permite enviar y recibir mensajes mediante protocolos como POP (Post Office Protocol), SMTP (Send Mail Transfer Protocol) e IMAP (Internet Mail Access Protocol).

Otros servicios incluyen Voz IP, videoconferencia, streaming y mensajería.

5. Dominios

Un dominio es un nombre fácil de recordar asociado a una dirección IP en Internet. Es gestionado por la ICANN (Internet Corporation for Assigned Names and Numbers) y debe ser renovado periódicamente. Los dominios se clasifican en:

• Genéricos (gTLD): Como .com (comercial), .net (servicios de Internet), .org (organizaciones sin fines de lucro).
• Geográficos (ccTLD): Como .es (España), .fr (Francia), .de (Alemania).
• De tercer nivel: Combinan dominios genéricos y geográficos, como .com.mx (México).

Las direcciones URL (Uniform Resource Locators) permiten localizar recursos específicos en la red.

6. DNS (Domain Name System)

El sistema DNS traduce nombres de dominio en direcciones IP. El NIC (Network Information Center) es el operador de registro de los dominios de nivel superior. Al acceder a una URL, se consulta primero al DNS raíz, luego a los servidores DNS de primer nivel y finalmente al servidor que aloja el dominio, devolviendo la IP del recurso solicitado.

7. ¿Qué es la Web?

La World Wide Web es un sistema que permite transmitir datos (texto, imágenes, sonido, video) a través del protocolo HTTP. Fue desarrollada por Tim Berners-Lee en el CERN (Organización Europea para la Investigación Nuclear).

La Web ha evolucionado desde su creación, pasando de la Web 1.0 (contenidos estáticos) a la Web 2.0 (interacción y colaboración entre usuarios) y actualmente hacia la Web 3.0 (Web semántica).

8. Tipos de Páginas Web

• Páginas Web Estáticas: Contienen contenido fijo en HTML, no interactivo.
• Páginas Web Dinámicas: Generan contenido en tiempo real usando lenguajes como PHP y JavaScript.
• Sitios Web: Colección de páginas web relacionadas bajo un mismo dominio.

Versiones de HTML

• HTML 1.0: Incluía etiquetas básicas para texto e imágenes.
• HTML 2.0 (1995): Primer estándar oficial.
• HTML 3.2 (1997): Incluyó avances como applets de Java.
• HTML 4.01 (1999): Introdujo CSS y scripts.
• HTML 5 (2014): Incluye soporte para multimedia sin necesidad de plugins.

Introducción a WordPress

CMS (Content Management System)

Un Sistema de Gestión de Contenidos (CMS) permite crear, organizar, publicar y eliminar contenidos de tu sitio web. Los CMS son sitios web dinámicos que requieren un lenguaje de programación (como PHP) y una base de datos para almacenar los datos.

Ejemplos incluyen WordPress, Drupal, Joomla para sitios genéricos, y WooCommerce, Prestashop, Magento para comercio electrónico. La mayoría son Open Source, aunque también existen versiones de pago como Adobe Magento.

WordPress

Es el CMS más popular y utilizado en el mundo, con más de 60 millones de usuarios. Sus principales características incluyen:

• Diseño personalizado a través de temas.
• Optimización SEO.
• Adaptabilidad a dispositivos móviles (responsive).
• Alto rendimiento.
• Fácil gestión tanto en el Frontend (lo que ven los usuarios) como en el Backend (panel de control).
• Seguridad (antispam y SSL).
• Accesibilidad para personas con discapacidades.

Instalación de WordPress

Existen dos métodos:

• Automatizado mediante herramientas del proveedor de hosting.
• Manual descargando el software desde wordpress.org.

Los pasos para la instalación manual son:

1. Descargar y descomprimir el paquete de WordPress.
2. Crear una base de datos y un usuario administrador.
3. Subir los archivos de WordPress al servidor.
4. Ejecutar el asistente de instalación accediendo a la URL del sitio web.

Frontend y Backend en WordPress

El Frontend es lo que el usuario ve al visitar el sitio web, mientras que el Backend es el panel de control desde donde se administra el sitio, accesible solo para administradores y usuarios con permisos específicos.

En el Backend:

• El escritorio proporciona un resumen de cambios y permite actualizaciones.
• El panel de administración gestiona entradas, medios, páginas y comentarios.
• El panel de configuración controla el aspecto y funcionalidades del sitio, incluyendo temas, plugins, usuarios, herramientas y ajustes generales.

Trabajando con WordPress

El estilo y funcionalidad del sitio web dependen del tema y los plugins utilizados. Los temas definen el diseño y los plugins añaden funcionalidades específicas.

Ejemplos de temas populares son Astra, Hello Elementor, GeneratePress y Ocean WP. Los plugins pueden incluir editores de bloques como Elementor, Spectra y Divi.

Editando con Spectra

Spectra permite agregar y configurar bloques para construir páginas. La edición incluye ajustes generales del bloque, opciones de estilo y configuraciones avanzadas.

Google Analytics

Es una plataforma que recopila datos de sitios web y aplicaciones para crear informes detallados. Para configurarlo:

1. Se crea una cuenta en analytics.google.com.
2. Se añade una propiedad con el nombre y URL del sitio.
3. Se inserta el código de seguimiento después de la etiqueta <head>.
4. Se verifica su funcionamiento.

La integración con WordPress puede hacerse mediante plugins como Site Kit by Google.

WooCommerce

Es un plugin para crear tiendas en línea dentro de WordPress. Su configuración incluye:

• Establecer la ubicación de la tienda, formato de números y moneda.
• Configurar métodos de pago.
• Crear las páginas por defecto como carrito y finalizar compra.

La gestión de productos permite agregar nombre, descripción, imágenes, categorías y etiquetas, y clasificar productos para facilitar la búsqueda.

Elementos HTML y CSS

Elementos HTML

Elementos en bloque

Ejemplos de elementos en bloque:

• <div>
• <p>
• <h1> - <h6>
• <hr>
• <li>
• <ol>
• <ul>
• <table>
• <section>
• <main>
• <nav>
• <video>
• <header>
• <article>
• <aside>
• <blockquote>
• <footer>
• <form>
• etc.

Elementos en línea

Ejemplos de elementos en línea:

• <span>
• <a>
• <b>
• <br>
• <button>
• <cite>
• <code>
• <em>
• <i>
• <img>
• <script>
• <sub>
• <sup>
• etc.

Ejemplos de atributos

• class="nombre"
• id="nombre"

CSS (Cascading Style Sheets)

CSS son las siglas en inglés para "hojas de estilo en cascada" (Cascading Style Sheets). En la actualidad usamos la versión 3 de CSS.

Métodos de aplicación

• En línea: <p style="color:red;">Este es un párrafo rojo.</p>
• Interno: <head><style>p{color:red}</style></head>
• Externo: <link rel="stylesheet" href="styles.css">

Sintaxis

Ejemplo:

h1 {  color: red;  font-size: 20px;}

Acrónimos

ARPANET: Advanced Research Projects Agency Networks

PC: Personal Computer

CPU: Central Processing Unit

RAM: Random Access Memory

SSD: Solid State Drive

HD: Hard Disk

TCP: Transmission Control Protocol

IP: Internet Protocol

MAC: Media Access Control

WWW: World Wide Web

HTTP: Hypertext Transfer Protocol

FTP: File Transfer Protocol

POP: Post Office Protocol

SMTP: Send Mail Transfer Protocol

IMAP: Internet Mail Access Protocol

ICANN: Internet Corporation for Assigned Names and Numbers

gTLD: Generic Top-Level Domain

ccTLD: Country Code Top-Level Domain

DNS: Domain Name System

NIC: Network Information Center

URL: Uniform Resource Locator

HTML: Hypertext Markup Language

CERN: European Organization for Nuclear Research

W3C: World Wide Web Consortium

CSS: Cascading Style Sheets

PHP: Hypertext Preprocessor

JavaScript: JavaScript