AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad de WEBDEV 2024!
Ayuda / Tutorial WEBDEV / Tutorial - Presentación de WEBDEV
  • Lección 2 - Desarrollo web y WEBDEV
  • Principio de Navegador/Servidor
  • ¿Cómo funciona?
  • ¿Y en WEBDEV?
  • Ejemplo práctico
  • Cómo crear un sitio
  • En resumen

Tutorial - Presentación de WEBDEV

Lección 2 - Desarrollo web y WEBDEV
Abordaremos los siguientes temas:
  • Principio de Navegador/Servidor.
  • Cómo crear un sitio.
Durée de la leçon 10 min
Principio de Navegador/Servidor

¿Cómo funciona?

Un sitio de Internet o intranet funciona de la siguiente manera:
  • El cliente (usuario de Internet) utiliza un navegador para acceder al sitio.
  • El navegador envía una solicitud al servidor que aloja el sitio. En esta solicitud, se indica la página que debe mostrarse y los diferentes parámetros que permiten al servidor construir la página correspondiente.
  • El servidor recibe la solicitud, la procesa y devuelve la página "HTML" correspondiente. HTML (HyperText Markup Language) es el lenguaje utilizado por todos los navegadores para mostrar páginas web.
Por lo tanto, hay dos tipos de eventos:
  • Eventos que se ejecutan a nivel del navegador, en el equipo del usuario.
  • Eventos que se ejecutan a nivel del servidor.
El código que se ejecuta a nivel del navegador se llama código JavaScript. Los navegadores solo pueden ejecutar código JavaScript.

¿Y en WEBDEV?

Con WEBDEV, todo se desarrolla:
  • en WYSIWYG ("What You See Is What You Get") en el editor: el contenido de las páginas aparece en el editor exactamente como se verá en el resultado final.
  • en código WLanguage.
WEBDEV convierte la página creada en el editor en una página HTML que puede ser leída por los navegadores.
Los eventos ejecutados a nivel del servidor se escriben en WLanguage.
Los eventos ejecutados a nivel del navegador se escriben en WLanguage y se convierten a Javascript.
Para crear un sitio WEBDEV, solo necesita desarrollarlo en WLanguage.
WEBDEV admite dos tipos de código: código Servidor y código Navegador.
La distinción entre servidor y navegador se hace por razones de rendimiento. La conexión a Internet se interpone entre el navegador y el servidor, lo que implica tiempos de respuesta, latencia, etc. Algunas operaciones sencillas pueden realizarse directamente en el navegador, sin volver al servidor.
Funcionamiento Servidor/Navegador de un sitio WEBDEV
Ejemplo práctico
Para entender mejor la diferencia entre los eventos Servidor y Navegador, hemos preparado un ejemplo sencillo:
  1. Desde la página de inicio de WEBDEV, abra el proyecto "Full_WEBDEV_Site": haga clic en "Tutorial", luego en "Tutorial - Discover WEBDEV (Lesson 1 and 2)", haga doble clic en "Full WEBDEV Site - Answers".
    Si el UAC está activado en Windows, puede que se muestre una ventana específica. Esta ventana indica que el programa WD290Admin.exe se ejecutará en el equipo actual. Conceda la autorización. Este programa corresponde al administrador local de WEBDEV que permite probar los sitios desarrollados con WEBDEV. Veremos sus funcionalidades más adelante en este tutorial.
  2. Abra la página "PAGE_Product_form" en el editor:
    • En el panel "Explorador de proyectos", despliegue "Páginas" y, a continuación, despliegue "Administration_pages".
    • Haga doble clic en "PAGE_Product_form".
  3. La página aparece en el editor.
    Página en el editor
    Esta página es un formulario para crear y editar productos.
Desplace la página hacia abajo.
Página en el editor
Esta página contiene controles Campo de entrada y un botón "OK" en la parte inferior.
El control Botón "OK" debe hacer dos cosas:
  • Comprobar que se han rellenado todos los campos obligatorios.
  • Guardar los valores de los controles en la base de datos.
Estas acciones se ejecutan en el código del botón.
Código del botón "OK":
  1. Seleccione el botón "OK". El control aparece con controladores de tamaño azules.
  2. Presione F2: el editor de código se abre. Los eventos WLanguage del control Botón se muestran con el código WLanguage asociado.
    Eventos del control Botón
Analicemos el código WLanguage:
  • Los eventos asociados al control Botón son: Inicialización, onclick navegador y servidor.
  • Los distintos tipos de código se identifican mediante colores:
    • El código Navegador, que se ejecutará en el equipo del usuario final, tiene un encabezado verde.
    • El código Servidor, que se ejecutará en el servidor, tiene un encabezado amarillo.
En nuestro ejemplo, todas las verificaciones de entrada se realizan en código Navegador (encabezado verde). Por ejemplo, el control EDT_Reference no debe estar vacío. El código correspondiente es el siguiente:
Clic en BTN_OK (evento onclick navegador)
IF EDT_Reference ~= "" THEN
Error("Enter a reference.")
SetFocusAndReturnToUserInput(EDT_Reference)
END

Esta verificación se realiza en código Navegador porque no hay necesidad de volver al servidor para comprobar que los controles están completos.
Esto evita idas y vueltas inútiles y reduce los tiempos de espera: la navegación por el sitio web es mucho más fluida.
Una vez que se ejecuta el código Navegador, la página envía los valores introducidos al servidor. Luego, el servidor ejecuta el código Servidor. En el código Servidor, se puede procesar la información recibida.
En nuestro ejemplo, la información recibida se agrega a la base de datos mediante el siguiente código:
Clic en BTN_OK (servidor)
PageToFile()
IF ImagePath<>"" THEN
Product.Visual = fLoadBuffer(ImagePath)
END
IF Product..NewRecord THEN
Product.Add()
ELSE
Product.Modify()
END
PAGE_List_of_products.Display()

Esta operación no se puede realizar en el código Navegador porque la base de datos es común a todos los usuarios del sitio y se encuentra en el servidor.
Advertencia
No entraremos en detalles sobre el código WLanguage utilizado en esta lección. Retomaremos este ejemplo en el tutorial Crear un sitio WEBDEV (back office y front office).
Cómo crear un sitio
Ahora que hemos visto los principales conceptos de la Web, veamos cómo diseñar un sitio WEBDEV.
Para crear un sitio WEBDEV, siga el método que se indica a continuación:
  • Diseñar el sitio web:
    • Diseño de la página (experiencia de usuario).
    • Definición de los estilos CSS (si es necesario).
    • Diseño de la estructura de la base de datos.
  • Desarrollar el sitio en WEBDEV:
    • Creación de un proyecto que agrupe todos los elementos del sitio.
    • Creación de los modelos de página que definirán el estilo del sitio. Estos modelos se basan en el diseño de la página, los estilos CSS y los estilos WEBDEV.
    • Definición de una base de datos (modelo de datos), que puede basarse en una estructura existente.
Cómo crear un sitio
En resumen
Hemos cubierto los conceptos básicos de un sitio web. Abrimos un proyecto y vimos los diferentes tipos de código disponibles. En el siguiente tutorial, crearemos un sitio web.
Hemos terminado esta lección. Recuerde cerrar el proyecto actual:
  1. En la pestaña "Inicio", en el grupo "General", despliegue "Cerrar" y seleccione "Cerrar proyecto".
  2. Guarde los cambios si es necesario.
La página de inicio de WEBDEV aparece.
Lección anteriorTabla de contenido
Versión mínima requerida
  • Versión 2024
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 14/12/2023

Señalar un error o enviar una sugerencia | Ayuda local