Conceptos Esenciales de Desarrollo Web y la Evolución de Internet

Gestión de Usuarios y Roles en Plataformas Web

El formulario para añadir un nuevo usuario incluye campos requeridos y opcionales. Entre los primeros se encuentran el nombre de usuario, con el que se iniciará sesión, y el correo electrónico, a través del cual se recibirán las posibles notificaciones. El nombre de usuario, que no puede contener espacios, no corresponde al nombre real, pues ya existe un campo destinado a ello que se puede rellenar de manera opcional. La contraseña se genera automáticamente, aunque es posible consultarla y modificarla haciendo clic en «Mostrar contraseña». Es posible enviar un aviso al usuario tras la creación de su cuenta.

Por defecto, a quienes se registran en el sitio web por sí mismos se les asigna el rol de suscriptores, aunque esta asignación se puede modificar en la configuración general del sitio.

Roles de Usuario

Suscriptor: Puede leer y añadir comentarios (siempre y cuando estén habilitados). Además, puede modificar su perfil y recibir notificaciones.
Colaborador: Crea y gestiona únicamente sus propias entradas; sin embargo, no puede publicarlas directamente, sino solo enviarlas para que las revise y publique un usuario de mayor rango. El rol de colaborador no permite crear páginas estáticas ni subir contenido multimedia al sitio web.
Autor: A diferencia del colaborador, este rol permite publicar entradas en el blog, así como subir contenido multimedia.
Editor: A las características del rol de autor, se añade la posibilidad de gestionar y publicar entradas de otros, así como gestionar los comentarios añadidos por quienes visitan la web. También permite crear contenido estático.
Administrador: Puede acceder a todas las funciones del panel de control, es decir, podrá añadir y gestionar cualquier tipo de contenido, además de tener la posibilidad de modificar cualquier aspecto referente a la configuración de WordPress, temas, plugins, widgets y otras herramientas adicionales. Cabe destacar que el único tipo de perfil que permite gestionar las cuentas de otros usuarios, además de crear nuevas y borrar las existentes, es el de administrador. El resto solamente podrá modificar los datos correspondientes a su perfil.

Historia y Evolución de Internet

ARPANET fue una red de ordenadores creada por encargo del Departamento de Defensa de los Estados Unidos para utilizarla como medio de comunicación entre las diferentes instituciones académicas y estatales.

Hitos Clave en la Historia de Internet

1958: Los Estados Unidos fundaron la Advanced Research Projects Agency (ARPA) a través del Ministerio de Defensa. Estaba formada por unos 200 científicos de alto nivel y tenía un gran presupuesto. Se centró en crear comunicaciones directas entre ordenadores para poder comunicar las diferentes bases de investigación.
1962: La ARPA creó un programa de investigación computacional bajo la dirección de John Licklider, un científico del MIT (Massachusetts Institute of Technology).
1967: Se publicó un plan para crear una red de ordenadores denominada ARPANET. ARPANET recopilaba las mejores ideas de los equipos del MIT, el National Physical Laboratory (UK) y la Rand Corporation.
Entre 1974 y 1982: Se crearon gran cantidad de redes, entre las que destacaron:
- Telenet (1974): Versión comercial de ARPANET.
- Usenet (1979): Sistema abierto centrado en el correo electrónico y que aún funciona.
- Bitnet (1981): Unía las universidades americanas usando sistemas IBM.
- Eunet (1982): Unía Reino Unido, Escandinavia y Holanda.
Principios de los 80: Se comenzaron a desarrollar los ordenadores de forma exponencial.
1991: Esta tecnología fue presentada al público, a pesar de que el crecimiento en su utilización no fue muy espectacular.
Finales de 1992: Solo había 50 sitios web en el mundo.
1993: Había 150 sitios web en el mundo. Mark Andreesen, del National Center for Supercomputing Applications (NCSA) de Illinois, publicó el Mosaic X, un navegador fácil de instalar y de usar. Supuso una mejora notable en la forma en que se mostraban los gráficos. Era muy parecido a uno de hoy en día.

Servicios Modernos de Internet

El correo electrónico: Ha revolucionado las comunicaciones entre las personas y ha dejado el correo tradicional en una posición prácticamente marginal en lo que hace referencia a comunicaciones personales.
Los navegadores: Son programas que permiten a los usuarios interactuar de forma gráfica con la información de un sitio web.
Los chats: Ofrecen la posibilidad de comunicarse entre muchas personas por escrito a través de Internet.
Los buscadores: Han revolucionado la forma en que las personas buscan la información que necesitan.
La Wikipedia: Es la primera enciclopedia en línea escrita de forma colaborativa desde Internet por voluntarios.

Tipos de Páginas Web

Según el Nivel de Interacción con los Usuarios

Página Estática: Su contenido solo puede ser modificado por el administrador de la misma, pero no por los usuarios que la visitan. No ofrece ningún tipo de interacción. Algunos ejemplos son blogs, portafolios digitales o páginas web empresariales informativas.
Página Dinámica: Permite a los usuarios interactuar con el sitio web, ya sea para crear contenido u otras acciones como comprar productos o filtrar contenidos. Estas páginas requieren que el desarrollador posea ciertos conocimientos de programación para su creación. Algunos ejemplos son tiendas de comercio electrónico o sitios web empresariales con funcionalidades interactivas.

Según la Temática o Propósito

Blog, Foro o Red Social: Sirven para que las personas interactúen entre sí y opinen sobre ciertos contenidos, que pueden haber sido creados por ellas mismas o por administradores. Por ejemplo: Instagram, Facebook.
Presentación o Corporativa: Sitio web para publicitar un producto, un trabajo o una empresa. Tiene un carácter informativo sin intención de vender directamente a través de ellas. Además, juega con el diseño para despertar interés en los productos y la marca.
Comercio Electrónico: Realiza transacciones comerciales en línea, ya sea de productos o servicios. Ofrece una navegación intuitiva y diferentes tipos de pago. Por ejemplo: Amazon, JD.com.
Aplicaciones Web (Webapps): Son populares porque se acceden por el navegador web. Son independientes del sistema operativo y siempre están actualizadas. Ejemplos incluyen Gmail, Microsoft Office Online, gestores de imágenes o suites informáticas en la nube.

Lenguajes de Desarrollo Web

Los servidores web emplean una serie de lenguajes de programación y de consulta de datos que permiten generar la estructura de la página web, codificada en lenguaje HTML. Los lenguajes más utilizados se dividen en:

Lenguajes del Lado del Servidor (Backend)

PHP: Es un lenguaje de código abierto muy popular, adecuado para desarrollo web y que puede ser incrustado en HTML. Es ampliamente utilizado, lo que explica por qué un gran número de páginas y portales web están creadas con PHP. «Código abierto» significa que es de uso libre y gratuito. «Incrustado en HTML» significa que en un mismo archivo se puede combinar código PHP con código HTML, siguiendo unas reglas. Otros lenguajes populares del lado del servidor incluyen Java, .NET, Ruby y Python.
SQL: Se utiliza para interactuar con la base de datos y realizar tanto consultas como inserciones o modificaciones de datos.

Lenguajes del Lado del Cliente (Frontend)

HTML (HyperText Markup Language): Lenguaje de marcado empleado para la elaboración de páginas web. Está compuesto por etiquetas que describen y estructuran el contenido de una página web.
CSS (Cascading Style Sheets): Lenguaje empleado para definir el estilo con el que se presenta la estructura HTML de una página web. La versión actual (CSS3) soporta la inclusión de animaciones y la gestión de diferentes resoluciones, con el fin de adaptar la presentación de la página a los diferentes dispositivos (teléfonos inteligentes, tabletas, ordenadores, etc.).
JavaScript: Lenguaje de programación interpretado por el navegador o cliente web. Añade dinamismo a la página, ya que permite, entre otras cosas, modificar su estructura y estilo, lo que evita tener que realizar peticiones al servidor web para todos aquellos cambios que se desee realizar.

Componentes Clave en el Desarrollo Web

Temas, Widgets y Plugins

Temas: Sirven para modificar el diseño y la apariencia de la página web.
Widgets (en WordPress): Son bloques de contenido que se pueden añadir a áreas específicas de un sitio web (como barras laterales o pies de página) para mostrar información o funcionalidades.
Plugins: Sirven para ampliar las funcionalidades de una plataforma como WordPress, mejorando las opciones administrativas, añadiendo nuevos widgets y otras características al sitio web.

Ejemplos de Aplicaciones de Plugins/Extensiones

Gráficos y Video: En programas gráficos como Photoshop, se utilizan extensiones para agregar nuevos efectos o herramientas de dibujo (pinceles, paletas diferentes).
Sociales: Son complementos que pueden integrarse con el sitio web para vincular enlaces a redes sociales como Facebook o Instagram.
Entornos de Desarrollo: Permiten habilitar nuevos lenguajes de programación en entornos de desarrollo integrado (IDE).
Audio: Extensiones para aumentar la cantidad de instrumentos o efectos disponibles para un estudio de producción musical.

Fundamentos de HTML: Etiquetas y Atributos

Lenguaje HTML

Las etiquetas HTML son fragmentos de código que permiten crear elementos HTML, estructuras básicas del lenguaje de programación HTML en el que se escriben las páginas web, ya que es el que entienden los navegadores.

Etiquetas HTML

Una etiqueta HTML consta de un nombre que la define, encerrado por los símbolos <> y escrito en minúsculas. Existen etiquetas que pueden contener texto y otras que representan partes de una estructura. Las que tienen contenido se deben cerrar para definir con precisión qué engloban, utilizando una etiqueta de cierre idéntica a la de apertura, pero con el símbolo / antes del nombre. Si una etiqueta contiene otras, las más internas deben cerrarse antes de poder encerrar la estructura que las contiene. Existen algunas que no se pueden cerrar, como las imágenes (<img>) o los saltos de línea ( ), debido a que no pueden contener nada en su interior. Aunque no es obligatorio, se recomienda incluir el símbolo /, precedido de un espacio, al final de la única etiqueta presente (por ejemplo,  ), para indicar que esta termina ahí.

Ejemplos de Etiquetas HTML

Párrafo: Contenido del párrafo.
Párrafo con contenido en negrita: Texto normal y texto en negrita.
Salto de línea:

Atributos HTML

Los atributos son valores adicionales que se agregan a una etiqueta para configurarla o definir su comportamiento. Existen atributos propios y exclusivos de algunas etiquetas, así como atributos globales, aplicables a cualquiera. No es imprescindible incluir todos los atributos posibles en cada etiqueta, sino solo aquellos necesarios para modificar el comportamiento de esta según corresponda. Los atributos se añaden, únicamente, a la etiqueta de apertura, nunca a la de cierre. Cada atributo tiene un nombre que define la propiedad que modifican y (no siempre) un valor encerrado entre comillas dobles. Los atributos se agregan después del nombre de la etiqueta, separados por un espacio de dicho nombre y del resto de atributos.

Ejemplo de Atributos en la Etiqueta `<img>`

A continuación, se muestra un ejemplo de la etiqueta <img> con atributos para insertar una imagen. El atributo src indica cuál es el archivo que contiene la imagen que se debe mostrar, mientras que el atributo alt se utiliza para mostrar un texto alternativo en caso de que la imagen no esté disponible:

<img src="imagen.jpg" alt="Imagen de prueba" />

Características de Diseño Web Moderno (CSS3)

Las siguientes características son ejemplos de cómo CSS3 facilita la creación de diseños web atractivos y funcionales:

Transparencia: Se añade un nuevo valor que puede estar entre 0 (transparente) y 1 (opaco) para controlar la opacidad de un elemento.
Bordes Redondeados: Se utiliza una sintaxis compatible entre varios navegadores para aplicar bordes redondeados a los elementos.
Sombreado de Texto (text-shadow): Permite crear sombras sobre el texto, pudiendo variar las posiciones de esta y el color de la sombra. Es muy útil para encabezados y títulos que deseen resaltarse, pero no se debe abusar de ella porque puede saturar la vista del usuario y crear una mala estética.
Múltiples Opciones de Fondos: Permite aplicar varias imágenes de fondo en un mismo elemento.
Sombreado de Cajas (box-shadow): Se utiliza la propiedad box-shadow, compatible con navegadores modernos como Safari 4, Firefox 3 y Chrome, para crear sombras en los elementos de caja.

Aplicaciones Web (Webapps)

Una aplicación web (o webapp) es un programa informático al que se accede desde un navegador web a través de internet o de una intranet. Una aplicación web funciona en base a tres niveles principales:

El navegador web: Se encarga de interpretar el lenguaje codificado de la aplicación. Hablamos de lenguajes informáticos como HTML, CSS o JavaScript.
El servidor web: Es el código al que apela el navegador. Puede encontrarse en la nube o en una red local.
La base de datos: Es el lugar de almacenamiento de los datos de la aplicación.