5.1WebDev: sitios y aplicaciones web
Lo esencial en 30 segundos
- WEBDEV comparte el WLangage, el análisis y los editores con WinDev: Yacine reutiliza su modelo clientes/productos/pedidos para un portal web, sin empezar de cero.
- El navegador muestra, el servidor procesa: el código servidor accede a HFSQL y concentra la seguridad; el código navegador es visible y modificable, así que nunca es una protección.
- La web añade sus propias nociones: sesiones, responsive, alojamiento HTTPS y exposición pública: la sintaxis familiar no exime de aprender el modelo web.
Mini-caso hilado — Yacine abre un portal web para los clientes de la pyme
Yacine desarrolla la aplicación de gestión de una pyme de venta de material eléctrico en Orán: clientes, productos, pedidos, facturas y existencias. Los comerciales quieren consultar las existencias y registrar un pedido desde un navegador, incluso en casa del cliente. Yacine abre un proyecto WEBDEV y comparte el análisis existente: los archivos Client, Article y Commande son los mismos que en WinDev. Coloca la verificación de existencias, precio y permisos en el lado servidor, porque el navegador nunca debe decidir un precio. Añade una página responsive para teléfono y tableta, una sesión para identificar al comercial y prevé un alojamiento con certificado HTTPS. Después verifica que una petición falsificada a mano no puede ni modificar un precio ni pedir un producto sin existencias.
Caso autónomo de esta sección: reaparece en el curso, el esquema, el código y el reto 48 h de la sección 5.1.
1. Capitalizar sin copiar
WEBDEV es el miembro de la gama PC SOFT dedicado a la web: sitios, intranets y aplicaciones web. Su interés principal es la capitalización: mismo WLangage, mismo análisis, mismos editores y misma lógica de proyecto. Yacine comparte el análisis de su aplicación de gestión con el portal web: los archivos Client, Article, Commande y Stock no se copian, son comunes. Los procedimientos de negocio y algunos componentes también se reutilizan. Por tanto, un desarrollador WinDev no es principiante en la web: descubre una plataforma conservando su modelo de datos y su lenguaje.
2. Servidor y navegador
La web funciona por naturaleza en cliente/servidor: el navegador muestra, el servidor procesa. WEBDEV distingue el código ejecutado en el servidor (seguro, con acceso a los datos HFSQL) y el código ejecutado en el navegador (rápido, pero visible y modificable por el usuario). Consecuencia absoluta: un control de precio, de existencias o de permisos colocado solo en el navegador puede eludirse. El usuario puede incluso enviar una petición directamente al servidor, sin pasar por las páginas de Yacine. Toda validación que importa se rehace en el servidor. El código navegador sirve para la comodidad, nunca para la seguridad.
3. Sesiones, responsive y alojamiento
La web es sin estado: hay que gestionar una sesión para reconocer al comercial de una página a otra. El responsive se anticipa desde el diseño (disposiciones, zonificación) para adaptarse al ordenador, la tableta y el teléfono. El alojamiento exige un servidor de aplicaciones WEBDEV, un nombre de dominio y un certificado HTTPS. Por último, un sitio público está expuesto: las inyecciones, la suplantación de sesión y los ataques automatizados hacen que la seguridad sea más crítica que en interno. Yacine prueba, pues, el portal en varias pantallas y verifica los permisos en el servidor antes de cualquier puesta en línea.
🔎 Ejemplo concreto — 🔎 Ejemplo concreto — Validar un pedido en el servidor
Yacine rechaza una línea de pedido falsificada desde el navegador:
// Code SERVEUR — contrôle d'une ligne de commande WebDev
PROCEDURE ValiderLigneCommande(Ligne est une LigneCommande) : booléen
SI Ligne.Quantite <= 0 ALORS
Erreur("Quantité invalide")
RENVOYER Faux
FIN
SI Ligne.PrixUnitaireHT < PrixCatalogue(Ligne.CodeArticle) ALORS
Erreur("Prix inférieur au catalogue")
RENVOYER Faux
FIN
SI StockDisponible(Ligne.CodeArticle) < Ligne.Quantite ALORS
Erreur("Stock insuffisant")
RENVOYER Faux
FIN
RENVOYER VraiResultado: una petición falsificada a mano es rechazada por el servidor, aunque se haya modificado la página.
Reflejo: todo control que importa se rehace en el servidor, nunca solo en el navegador.
Vocabulario de la sección
- WEBDEV
- Miembro de la gama PC SOFT dedicado a la web (sitios, intranets, aplicaciones web), que comparte WLangage y análisis con WinDev.
Ejemplo sencillo: Yacine abre un proyecto WEBDEV para el portal de cliente de su pyme.
Lo que no es: creer que hay que aprender otro lenguaje.
Reflejo: WEBDEV = mismo WLangage, otra plataforma.
- Capitalización
- Reutilización de los conocimientos de WinDev (análisis, WLangage, procedimientos, componentes) en un proyecto WEBDEV.
Ejemplo sencillo: Yacine comparte el análisis Client/Article/Commande con el portal.
Lo que no es: recrear una segunda base para la web.
Reflejo: capitalizar = un único modelo de datos.
- Código servidor
- Código ejecutado en el servidor web, seguro, con acceso a los datos y a los controles de negocio.
Ejemplo sencillo: Yacine verifica allí el precio de catálogo y las existencias disponibles.
Lo que no es: confiar la validación a la página mostrada.
Reflejo: servidor = decisión y seguridad.
- Código navegador
- Código ejecutado en el navegador del usuario: visible, modificable, útil solo para la comodidad.
Ejemplo sencillo: Yacine muestra allí un mensaje de entrada no válida.
Lo que no es: colocar allí un control de precio o de permisos.
Reflejo: navegador = presentación, nunca protección.
- Sesión web
- Contexto conservado en el servidor para reconocer a un usuario de una página a otra.
Ejemplo sencillo: Yacine memoriza el comercial conectado durante su pedido.
Lo que no es: creer que la web conserva el contexto por sí sola.
Reflejo: sesión = identidad y contexto controlados.
En la práctica — En la práctica — Abrir un portal web con WEBDEV
- Identifique qué capitaliza (análisis, WLangage, procedimientos, componentes) y qué es nuevo (modelo web, sesiones, responsive).
- Cree el proyecto WEBDEV compartiendo el análisis WinDev y diseñe las páginas de consulta de existencias y de entrada de pedidos.
- Coloque sistemáticamente las validaciones de precio, existencias y permisos en el código servidor; reserve el navegador para la presentación y la comodidad.
- Prevea el responsive, el alojamiento HTTPS y una sesión comercial, y después pruebe una petición falsificada a mano.
Guion paso a paso — asegurar la conexión de cliente (10 min)
Yacine establece la sesión del comercial antes de mostrar el panel de control.
La sesión se crea en el servidor; el navegador solo recibe un identificador de sesión, nunca la contraseña.
Plantilla para copiar y pegar — mi portal WEBDEV
// Projet WEBDEV — portail de gestion Yacine
// Analyse partagée : Client, Article, Commande, Facture, Stock
// Pages : PAGE_Connexion, PAGE_Stock, PAGE_Commande
// Contrôles SERVEUR : prix catalogue, stock, droits du commercial
// Session : gsCommercialConnecte (côté serveur)
// Responsive : dispositions téléphone / tablette
// Hébergement : serveur WEBDEV + domaine + HTTPSPortal de cliente
Yacine hace que sus clientes consulten las existencias y el estado de sus pedidos desde un navegador.
Intranet comercial
Yacine reserva la entrada de pedidos a los comerciales identificados por una sesión.
Pedido en web móvil
Yacine hace las páginas responsive para pedir desde un teléfono en casa del cliente.
Análisis compartido
Yacine mantiene un único análisis entre la aplicación WinDev y el portal WEBDEV.
✓ Buenas prácticas
- Capitalizar el análisis y el WLangage en lugar de copiar.
- Colocar toda validación crítica en el servidor.
- Pensar en sesión, responsive y HTTPS desde el diseño.
✗ Errores frecuentes
- Colocar un control de precio o de permisos en el navegador.
- Creer que la web conserva el contexto sin sesión.
- Tratar el alojamiento y la seguridad después de la puesta en línea.
Puntos clave
- WEBDEV comparte el WLangage, el análisis y los editores con WinDev.
- El navegador muestra y el servidor procesa: la seguridad está en el servidor.
- La web impone sesiones, responsive y alojamiento HTTPS.
- Un sitio público está expuesto: la sintaxis familiar no exime del modelo web.
Reto 48 h — aplícalo mañana
Como Yacine, abra un pequeño proyecto WEBDEV compartiendo un análisis existente (clientes, productos, pedidos). Cree una página de consulta y una página de entrada, y coloque un control de precio y de existencias en el servidor. Pruebe una petición falsificada a mano y verifique que se rechaza. Anote lo que ha reutilizado y lo que era realmente nuevo.
- Puedo explicar qué reutiliza WEBDEV desde WinDev.
- Sé distinguir código servidor y código navegador.
- Sé por qué y cómo validar un pedido en el servidor.
Preguntas frecuentes
¿Puede un desarrollador WinDev pasar fácilmente a WEBDEV?
El paso se facilita por el mismo WLangage, el mismo análisis y los mismos editores, pero no es inmediato: hay que aprender el modelo web. Lo que se transfiere directamente: el lenguaje, el modelo de datos, las funciones HFSQL y SQL, los procedimientos, los componentes y los conceptos. Lo que debe aprenderse: la arquitectura servidor/navegador, la seguridad en el servidor, las sesiones, el responsive, el alojamiento (servidor, dominio, HTTPS), el rendimiento y el posicionamiento. Yacine reutiliza su análisis de gestión pero repiensa la forma en que se cargan las páginas y se verifican los permisos.
¿Por qué no hay que hacer nunca un control de seguridad en el navegador?
Porque todo lo que se ejecuta en el navegador está bajo el control del usuario: puede leer el código, modificarlo, desactivarlo o enviar directamente una petición al servidor sin pasar por las páginas. Un control en el navegador es, pues, una comodidad de uso, nunca una protección. Si Yacine verifica un precio solo en la página, un usuario puede enviar un precio inferior al catálogo. La regla absoluta: toda validación que importa (precio, existencias, permisos, importes, identificadores) se rehace en el servidor, sin excepción.
¿Dónde verificar las existencias antes de registrar un pedido WEBDEV?