Desarrollo Web en Entorno Servidor

Desarrollo Web en Entorno Servidor

2024/2025

Esto es un párrafo listo para contener creatividad, experiencias e historias geniales.

Características de la programación Web

Introducción

Arquitecturas Web

Paginas Web Estáticas / Dinamicas

Arquitecturas y Lenguajes

Modelo Cliente Servidor

Decisiones de diseño

Ejecucion de codigo en el servidor - cliente

Cluster en tiers del modelo 3 capas

Arquitectura de 3 capas

MVC: Modelo Vista Controlador

Lenguajes de Programación Más Usados en el Desarrollo Web

Fin

Recursos de interés

Contextualiza tu tema con un subtítulo

Nacimiento de la World Wide Web

HTML y el surgimiento de la programción Web

La Web 2.0

CSS y el diseño web

El presente y el futuro

Nacimiento de la World Wide Web

En 1989, Tim Berners-Lee, un científico del CERN en Suiza, propuso un sistema de hipertexto para compartir información entre investigadores. Este sistema dio lugar a la creación de la World Wide Web. En 1991, Berners-Lee lanzó el primer navegador web, llamado WorldWideWeb, y desarrolló HTML, el lenguaje de marcado que se convirtió en la base de la programación web.

Nacimiento de la World Wide Web

En 1989, Tim Berners-Lee, un científico del CERN en Suiza, propuso un sistema de hipertexto para compartir información entre investigadores. Este sistema dio lugar a la creación de la World Wide Web. En 1991, Berners-Lee lanzó el primer navegador web, llamado WorldWideWeb, y desarrolló HTML, el lenguaje de marcado que se convirtió en la base de la programación web.

HTML y el surgimiento de la programación web

En 1991 nació HTML y permitió a los desarrolladores crear y organizar contenido en línea utilizando etiquetas y atributos. La rápida adopción de la web llevó a una mayor demanda de contenido en línea y al surgimiento de la programación web

La Web 2.0

En 2004, el término Web 2.0 fue acuñado para describir la evolución hacia aplicaciones web interactivas. Esta fase se caracterizó por la interactividad, la colaboración y la participación de los usuarios en la creación de contenido. JavaScript y AJAX jugaron un papel crucial en esta evolución, permitiendo la actualización dinámica del contenido sin recargar la página completa.

CSS y el diseño web

Con la necesidad de crear páginas web visualmente atractivas, conllevó a la creación de CSS, un lenguaje que permite a los desarrolladores dar estilo a las páginas web. CSS mejoró la experiencia del usuario al permitir diseños más complejos y estilizados

El presente y el futuro

Info

Recursos de interés

Contextualiza tu tema con un subtítulo

Características de la programación web

W3C

Características de la programación web

Cuando una página web se descarga, su contenido, programado en lenguajes como HTML o XHTML, define qué se muestra en pantalla mediante etiquetas que estructuran los elementos (encabezados, tablas, párrafos, etc.). El estilo de la página suele estar definido en un archivo CSS separado, que indica cómo deben verse los elementos (tipografía, colores, alineación, etc.). El navegador solicita estos archivos al servidor, que los busca y envía para ser mostrados. Este proceso ejemplifica la comunicación cliente-servidor, donde el navegador (cliente) pide la página y el servidor la proporciona.

W3C

El World Wide Web Consortium (W3C) es una organización internacional que desarrolla estándares para la web. 1º Establecimiento de estándares : El W3C crea y mantiene estándares web como HTML, CSS y XML, asegurando que los desarrolladores tengan un conjunto común de reglas para construir sitios y aplicaciones web. 2º Interoperabilidad : Al seguir los estándares del W3C, los desarrolladores pueden crear sitios web que funcionen de manera consistente en diferentes navegadores y dispositivos, mejorando la experiencia del usuario. 3º Accesibilidad : El W3C promueve la accesibilidad web a través de iniciativas como las Pautas de Accesibilidad para el Contenido Web (WCAG), ayudando a que las páginas web sean accesibles para personas con discapacidades. 4º Innovación : Al desarrollar nuevas tecnologías y estándares, el W3C impulsa la innovación en la web, permitiendo la creación de aplicaciones más avanzadas y funcionales. 5º Seguridad : El W3C trabaja en estándares de seguridad para proteger la información y la privacidad de los usuarios en la web.

Arquitectura Web

Una arquitectura web es la estructura y los componentes que interactúan en un sistema web, abarcando la infraestructura, la comunicación entre servidores y clientes, y la gestión de datos y lógica de la aplicación. Existen varias arquitecturas comunes: Monolítica: Todos los componentes están integrados en un solo código, fácil de desarrollar pero difícil de escalar. Cliente-Servidor: El cliente interactúa con el servidor que procesa solicitudes y envía respuestas, un modelo clásico en la web. Tres Capas (3-tier): Se divide en front-end, back-end y base de datos, lo que facilita el mantenimiento y la escalabilidad. Microservicios: Cada función es un servicio independiente, lo que ofrece mayor flexibilidad y escalabilidad en sistemas modernos.

Modelo cliente servidor

Info

Recursos de interés

Contextualiza tu tema con un subtítulo

Paginas Web Estaticas

Paginas Web Dinamicas

Paginas web Estaticas

Las páginas web estáticas son aquellas cuyo contenido no cambia dinámicamente; siempre muestran la misma información a los usuarios. Su principal característica es que están compuestas por archivos HTML, CSS y, ocasionalmente, JavaScript, almacenados en el servidor y entregados tal cual al navegador. No requieren bases de datos ni procesamiento en el servidor, lo que las hace rápidas y fáciles de implementar, pero limitadas en cuanto a interactividad y personalización del contenido.

Paginas Web Dinámicas

Las páginas web dinámicas generan contenido en tiempo real según las interacciones del usuario o datos del servidor. A diferencia de las páginas estáticas, las dinámicas permiten personalización y actualización automática del contenido. - Interacción con bases de datos: el contenido se extrae o almacena en bases de datos. - Lenguajes del lado del servidor: se utilizan lenguajes como PHP, Python o Node.js para procesar las solicitudes. - Actualización en tiempo real: el contenido puede cambiar sin necesidad de recargar la página, usando tecnologías como AJAX. - Personalización: adaptan el contenido a cada usuario.

Arquitecturas y lenguajes

Una de las primeras decisiones que tendrás que tomar al programar una aplicación web es la arquitectura que vas a utilizar y la que se adecúa más a tu proyecto por distintas razones. Tenemos un sinfín de alternativas, podemos nombrar algunas de ellas como son: Java EE: Plataforma de desarrollo para aplicaciones empresariales en Java, que incluye APIs y servicios para crear aplicaciones escalables y robustas. AMP: "Accelerated Mobile Pages", es una tecnología de Google que optimiza páginas web para una carga rápida en dispositivos móviles. LAMP/WAMP/MAMP: Conjuntos de software para desarrollo web. LAMP: Linux, Apache, MySQL, PHP. WAMP: Windows, Apache, MySQL, PHP. MAMP: macOS, Apache, MySQL, PHP.

Decisión de diseño

Las decisiones de diseño en páginas web se centran en varios aspectos clave para optimizar la experiencia del usuario y cumplir con los objetivos del sitio: - Usabilidad: La navegación debe ser intuitiva, con una estructura clara y fácil de entender. - Accesibilidad: El sitio debe ser accesible para personas con discapacidades, cumpliendo con estándares como WCAG (Web Content Accessibility Guidelines). - Diseño responsivo: La web debe adaptarse a diferentes tamaños de pantalla, especialmente móviles, asegurando una buena experiencia en todos los dispositivos. - Estética visual: La apariencia debe ser atractiva y coherente con la identidad de la marca, utilizando tipografía, colores y gráficos adecuados. - Contenido relevante: El contenido debe ser claro, conciso y dirigido a la audiencia objetivo. - SEO: Las decisiones de diseño deben incluir buenas prácticas de SEO, como URLs amigables, uso correcto de etiquetas HTML, y tiempos de carga óptimos para mejorar la visibilidad en motores de búsqueda. - Seguridad: Incluir medidas como SSL y protección contra ataques cibernéticos es esencial para proteger los datos del usuario.

Ejecución de codigo en el Servidor y en el Cliente

En la arquitectura de 3 capas, el código puede ejecutarse tanto en el servidor como en el cliente. El servidor genera la página web antes de enviarla al navegador, y el cliente (navegador) ejecuta código JavaScript para realizar acciones como modificar el contenido o validar formularios. Estas tecnologías se complementan, como en el caso de AJAX, que permite al código JavaScript en el navegador comunicarse con el servidor para actualizar dinámicamente la página sin recargarla.

Arquitectura de 3 capas

Antes de hablar de cada una de estas capas tenemos que distinguir entre capas físicas (tier ) y capas lógicas (layer ). Tier (nivel/escalón) Capa física de una arquitectura. Supone un nuevo elemento hardware separado físicamente. Las capas físicas más alejadas del cliente están más protegidas, tanto por firewalls como por VPN. Ejemplo de arquitectura en tres capas físicas (3 tier ): - Servidor Web - Servidor de Aplicaciones - Servidor de bases de datos

El modelo de 3 capas en una arquitectura de servidores no se refiere a la cantidad de servidores, sino a las funciones divididas en presentación, lógica y datos. Estas capas pueden distribuirse en múltiples servidores mediante clusters para escalabilidad y tolerancia a fallos. - Capa de presentación: Interfaz de usuario, desarrollada con HTML, CSS, y JavaScript. - Capa lógica: Procesa la funcionalidad de la aplicación, usando lenguajes como Python o Java. - Capa de datos: Gestiona el almacenamiento de información en bases de datos como MySQL o MongoDB.

Cluster en tiers del modelo 3 capas

MVC: Modelo Vista Controlador

Model-View-Controller** o Modelo-Vista-** Controlador es un modelo de arquitectura que separa los datos y la lógica de negocio respecto a la interfaz de usuario y el componente encargado de gestionar los eventos y las comunicaciones. Modelo : representa la información y gestiona todos los accesos a ésta, tanto consultas como actualizaciones provenientes, normalmente, de una base de datos. Se accede via el controlador. Controlador : Responde a las acciones del usuario, y realiza peticiones al modelo para solicitar información. Tras recibir la respuesta del modelo, le envía los datos a la vista. Vista : Presenta al usuario de forma visual el modelo y los datos preparados por el controlador. El usuario interactúa con la vista y realiza nuevas peticiones al controlador.

Lenguajes de Programación Más Usados en el Desarrollo Web

Los 4 lenguajes más usados en desarrollo web son: Front-End: HTML: Estructura el contenido. CSS: Define el estilo y apariencia. JavaScript: Lenguaje dinámico del lado del cliente, también usado en el backend con Node.js. Back-End: PHP: Lenguaje del servidor fácil de usar, ideal para páginas dinámicas. Python: Usado en frameworks como Django y Flask para aplicaciones web. Java: Popular en aplicaciones empresariales, generalmente con el framework Spring.

¡Muchas gracias por su atención!

Esto es un párrafo listo para contener creatividad, experiencias e historias geniales.