PC SOFT

AYUDA EN LÍNEA
DE WINDEV, WEBDEV Y WINDEV MOBILE

Este contenido proviene de una traducción automática.. Haga clic aquí para ver la versión original en inglés.
  • Panorama general
  • Métodos utilizados
  • Método de Escritorio primero
  • Método de Mobile first
  • Principio
  • Antes de empezar
  • Consejos y recomendaciones para crear un nuevo sitio con páginas en Responsive Web Design o para transformar las páginas que se encuentran en un sitio existente
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReportes y ConsultasCódigo de Usuario (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Código Navegador
WINDEV Mobile
AndroidWidget Android iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Otros
Procedimientos almacenados
Panorama general
A partir de ahora, los sitios web pueden ser vistos en varias plataformas: móviles, tabletas, PCs, ... El tamaño del navegador cambia en cada dispositivo, así como el espacio utilizado para mostrar los datos..
El método "Responsive Web Design" consiste en crear una única página que se adapta automáticamente a la plataforma utilizada.
WEBDEV le permite crear páginas utilizando el método "Responsive Web Design" y le permite optimizar la visualización de la página en diferentes plataformas a través de varias funciones de edición.
Compruebe un ejemplo de WEBDEV que admita Responsive Web Design haciendo clic en el siguiente enlace Sitio que presenta WM Sport Assistant. Mostrar esta página y cambiar el tamaño del navegador para ver las diferentes resoluciones.

Métodos utilizados

WEBDEV propone 2 modos para crear y administrar páginas de Diseño Web con capacidad de respuesta:
  • Primero el escritorio modo: La página se define en su versión más grande (Escritorio) que se utiliza como referencia, se modifica la página para las hojas inferiores (Pastillas y Móvil).
  • Versiones 22 y posteriores
    Móvil Primero modo: La página se define en su versión más pequeña (Móvil) que se utiliza como referencia, entonces se modifica la página para las hojas superiores (Pastillas y Escritorio).
    Nueva funcionalidad versión 22
    Móvil Primero modo: La página se define en su versión más pequeña (Móvil) que se utiliza como referencia, entonces se modifica la página para las hojas superiores (Pastillas y Escritorio).
    Móvil Primero modo: La página se define en su versión más pequeña (Móvil) que se utiliza como referencia, entonces se modifica la página para las hojas superiores (Pastillas y Escritorio).

Método de Escritorio primero

El desarrollador debe crear la interfaz de su sitio Web en modo "Escritorio".. Luego, creará la versión en modo "Tablet" y finalmente creará la versión en modo "Mobile"..
Esta noción de "degradación de la interfaz" proviene de la necesidad de utilizar el sitio en todas las combinaciones de soportes y resoluciones de pantalla..
Durante la etapa de diseño, significa que un sitio Web se desarrolla para un uso de "escritorio" en primer lugar.. Al reducir las resoluciones de la pantalla (tamaño de página), el contenido y las funciones se mueven, redimensionan u ocultan..
Versiones 22 y posteriores

Método de Mobile first

En primer lugar, el desarrollador debe crear la interfaz de su sitio Web en modo "Móvil".. Luego, creará la versión en modo "Tablet" y finalmente creará la versión en modo "Desktop"..
Esta noción de "mejora de la interfaz" se deriva de la necesidad de añadir características al sitio en función de las combinaciones de soportes y resoluciones de pantalla..
Durante la fase de diseño, significa que se desarrolla un sitio web para un uso "móvil" en primer lugar.. Al reducir las resoluciones de pantalla (tamaño de página), el contenido y las funciones se mueven, se redimensionan o se ocultan..
Nueva funcionalidad versión 22

Método de Mobile first

En primer lugar, el desarrollador debe crear la interfaz de su sitio Web en modo "Móvil".. Luego, creará la versión en modo "Tablet" y finalmente creará la versión en modo "Desktop"..
Esta noción de "mejora de la interfaz" se deriva de la necesidad de añadir características al sitio en función de las combinaciones de soportes y resoluciones de pantalla..
Durante la fase de diseño, significa que se desarrolla un sitio web para un uso "móvil" en primer lugar.. Al reducir las resoluciones de pantalla (tamaño de página), el contenido y las funciones se mueven, se redimensionan o se ocultan..

Método de Mobile first

En primer lugar, el desarrollador debe crear la interfaz de su sitio Web en modo "Móvil".. Luego, creará la versión en modo "Tablet" y finalmente creará la versión en modo "Desktop"..
Esta noción de "mejora de la interfaz" se deriva de la necesidad de añadir características al sitio en función de las combinaciones de soportes y resoluciones de pantalla..
Durante la fase de diseño, significa que se desarrolla un sitio web para un uso "móvil" en primer lugar.. Al reducir las resoluciones de pantalla (tamaño de página), el contenido y las funciones se mueven, se redimensionan o se ocultan..

Principio

En el editor WEBDEV, la representación de las diferentes resoluciones se realiza mediante láminas. Una hoja representa el tamaño de un navegador para un dispositivo específico. WEBDEV incluye 3 cuchillas:
  • El Móvil correspondiente a los dispositivos del smartphone.
  • El Pastillas correspondiente a los dispositivos de tabletas.
  • El Escritorio blade correspondiente a dispositivos como PC, MAC, etc.
Ver Diseño Web con capacidad de respuesta: Manejo de las cuchillas para más detalles.
Asegúrese de que el sitio web puede funcionar incluso en la versión móvil.
Resumen:
  • En el modo Escritorio Primero, debe pensar en "Escritorio" antes de pensar en "Tableta" y luego en "Móvil".: cualquier modificación de la interfaz gráfica de usuario (creación de página, adición de controles, organización de los controles en la página, posición de los enlaces o botones, etc.) debe realizarse en modo "Escritorio".
  • Versiones 22 y posteriores
    En el modo Móvil Primero, debe pensar en "Móvil" antes de pensar en "Tableta" y luego en "Escritorio".: cualquier modificación de la interfaz gráfica de usuario (creación de página, adición de controles, organización de los controles en la página, posición de los enlaces o botones, etc.) debe realizarse en modo "Móvil".
    Nueva funcionalidad versión 22
    En el modo Móvil Primero, debe pensar en "Móvil" antes de pensar en "Tableta" y luego en "Escritorio".: cualquier modificación de la interfaz gráfica de usuario (creación de página, adición de controles, organización de los controles en la página, posición de los enlaces o botones, etc.) debe realizarse en modo "Móvil".
    En el modo Móvil Primero, debe pensar en "Móvil" antes de pensar en "Tableta" y luego en "Escritorio".: cualquier modificación de la interfaz gráfica de usuario (creación de página, adición de controles, organización de los controles en la página, posición de los enlaces o botones, etc.) debe realizarse en modo "Móvil".
Documentación sobre Diseño Web con capacidad de respuesta: No dude en leer las siguientes páginas de documentación (orden de lectura recomendado):
  1. Manejo de anclas.
  2. Manejo de las cuchillas.
  3. Creación de una página de diseño web con capacidad de respuesta.
  4. Prueba de páginas de Diseño Web con capacidad de respuesta.
  5. Gestión de una barra de encabezado.
  6. Aplicación del modo de Diseño Web con capacidad de respuesta a una página existente.
  7. Sugerencias.
Antes de empezar

Consejos y recomendaciones para crear un nuevo sitio con páginas en Responsive Web Design o para transformar las páginas que se encuentran en un sitio existente

Antes de implementar un Diseño Web con Capacidad de Respuesta en un sitio WEBDEV, debe leer las siguientes recomendaciones:
  • 3.1. Consideraciones generales
    • Corregir TODOS los errores GUI, en todas las cuchillas. Este paso es FUNDAMENTAL. Un error GUI puede ocurrir en una hoja y no en otra.. El título del error GUI indica la cuchilla donde ocurrió el error..
    • Según el modo (Primero el escritorio o Móvil Primero), la disposición debe realizarse en la hoja "Escritorio" o "Móvil" y luego en las hojas inferiores o superiores (respectivamente "Tableta" y "Móvil" o "Escritorio")..
    • Transforme las plantillas de página para Responsive Web Design antes de transformar las páginas del sitio.
    • Al crear una nueva página, puede ser interesante agrupar los controles por bloques lógicos (utilizando una celda) para facilitar manipular su uso en los blades.
    • Mantenga el mismo orden de navegación de los controles en todas las cuchillas.
      señalar: Desde WEBDEV Update 3 (210065), se muestran errores específicos de GUI si no se mantiene este orden.Se visualizan errores específicos de GUI si no se mantiene este orden. Ver Diseño Web con capacidad de respuesta: Errores específicos de GUI para más detalles.
    • No olvide comprobar las páginas de su navegador mientras reduce o amplía el ancho del mismo para simular todas las resoluciones..
      señalar: Los navegadores también proponen opciones específicas para ejecutar la prueba de las páginas de Diseño Web con capacidad de respuesta. Ver Compruebe las páginas "Diseño Web con capacidad de respuesta para más detalles.
  • Controles
    • Según el modo (Primero el escritorio o Móvil Primero), nunca agregue controles en las cuchillas inferiores o superiores. Por ejemplo, en el modo Desktop First, añada los controles de la hoja "Desktop" y realice las adaptaciones necesarias en las hojas inferiores.
    • Las modificaciones hechas a un control encontrado en una hoja son contextuales a esta hoja.: este es el mecanismo de sobrecarga.
    • Para visualizar o introducir la misma información, no dude en utilizar diferentes tipos de controles en cada cuchilla. Por ejemplo, en el modo Desktop First, tiene la posibilidad de utilizar un botón de radio en las hojas "Desktop" y "Tablet" y un cuadro combinado en la hoja "Mobile".. Atención: el control existe en todas las cuchillas.
      El control que no debe aparecer en una hoja debe hacerse invisible en las otras hojas.. Para que el control sea visible o invisible:
      1. Seleccione el control.
      2. Muestre el menú que aparece (clic derecho del ratón) y seleccione "Responsive Web Design .. Visibility by blade"..
    • No dude en dividir un control de edición en 2 secciones: leyenda y área de entrada. Esto le permite fácilmente manipular los elementos al cambiar a la hoja "Mobile" (caso de Desktop First). Por ejemplo, un título a la izquierda y un área de entrada a la derecha se convierten en un título arriba y un área de entrada abajo.
    • No olvide utilizar el texto de indicación del control o el texto alternativo (en la pestaña "Ayuda" de la descripción del control) para "guardar" espacio.: el cambio a las cuchillas inferiores es más fácil.
    • Le aconsejamos que cambie el tamaño de un control en una hoja en lugar de modificar el ancho del ancla de este control.. De hecho, el ancla se define para todas las cuchillas, mientras que el ancho puede ser sobrecargado para cada cuchilla.
    • Evitar los controles apilables. Permanezca en la red para beneficiarse de las funciones Responsive.
  • Cuchillas
    • Definir los puntos de conmutación de las cuchillas: Al reducir o aumentar la resolución, el diseño de la página puede modificarse antes del límite de la hoja.. En este caso, todo lo que tiene que hacer es modificar el ruptura punto de la cuchilla para obtener siempre la interfaz deseada..
      En Primero el escritorio modo:

      Por ejemplo, el punto de conmutación de las cuchillas corresponde a la conmutación de 4 a 3 y luego 2 elementos por línea cuando se pasa del modo "Escritorio" al modo "Tableta".. Para evitar pasar por el paso intermedio (3 elementos en la misma línea), se debe modificar el tamaño de la cuchilla "Tablet" para que pase de 4 a 2. Una vez modificado el tamaño de la cuchilla "Tablet", se debe modificar su interfaz (si no lo ha hecho ya) para visualizar 2 elementos uno al lado del otro en modo "Tablet".. Por lo tanto, al reducir la resolución, la interfaz pasa directamente de 4 a 2 elementos.
    • Comprobar las sobrecargas en cada cuchilla. No dude en eliminar todas las sobrecargas de una hoja para reconstruir el diseño de la página (ver Eliminación de una cuchilla más detalles).
    • Regla de la hoja (sección amarilla, verde y azul): Tiene la capacidad de crear una nueva cuchilla o de cambiar el tamaño de una cuchilla existente.. Se requiere una cuchilla:
      • para adaptarse a un dispositivo. La hoja "Tablet" (840 píxeles) y la hoja "Mobile" (480 píxeles) se crean de forma predeterminada (especificaciones de Google Material Design)..
      • adaptar su contenido (a realizar por el desarrollador) en función del sitio a crear.
  • Anclaje (ver Diseño Web con capacidad de respuesta: Manejo de anclas más detalles).
    • Parámetros de la ventana de anclaje:
      • anchura:
        • Tamaño en edición: para usar si el control debe mantener su tamaño.
        • Adaptarse a la red: si el control debe ser reducido y si debe seguir proporcionalmente el ancho de página en el navegador.
    • Ancla: ¿Por qué centrar un control?
      Responsive Web Design mantiene las proporciones, por lo tanto un control que está centrado permanecerá centrado.. No hay necesidad de anclarlo. El ancla centrada existe pero está destinada a los controles de ancho fijo y debe reservarse todo el ancho.
Versión mínima requerida
  • Versión 21
Comentarios
Haga clic en [Agregar] para publicar un comentario