controles:twebpage
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
|
controles:twebpage [15/03/2020 00:27] pedro [Metodos] |
controles:twebpage [04/05/2023 19:26] pedro [Métodos] |
||
|---|---|---|---|
| Línea 17: | Línea 17: | ||
| </html> | </html> | ||
| - | Materialize añade otras, todas dentro de <body> | + | Materialize añade **header**, **main** y **footer**, todas dentro de <body>. |
| + | |||
| + | Como Néfele se creo basándonos en Materialize mantiene esta estructura, por lo que tenemos propiedades para incluir contenido en cualquiera de las secciones. | ||
| + | |||
| + | Néfele añade en el <head> **script** para agrupar todos los códigos JS y JQuery que tienen que estar necesariamente en el <head> y **style** para agrupar los stilos CSS que hemos añadido directamente a tWebPage. | ||
| + | |||
| + | También añadimos **script** al final del <body> para los códigos JS y JQuery que no necesitan estar en el <head>. | ||
| <html> | <html> | ||
| <head> | <head> | ||
| + | <script> /* Códigos JS y JQuery que necesitan cargarse al principio de la página */ | ||
| + | . | ||
| + | . | ||
| + | </script> | ||
| + | <style> /* Estilos CSS que hemos añadido a tWebPage */ | ||
| + | . | ||
| + | . | ||
| + | </style> | ||
| </head> | </head> | ||
| <body> | <body> | ||
| Línea 35: | Línea 49: | ||
| . | . | ||
| </footer> | </footer> | ||
| + | <script> /* Códigos JS y JQuery del resto de la página */ | ||
| + | . | ||
| + | . | ||
| + | </script> | ||
| </body> | </body> | ||
| </html> | </html> | ||
| | | ||
| De esta manera todo el contenido de la página esta dentro de <body> pero estructurado en tres areas para facilitar el tratamiento con las librerías JS de Materialize. | De esta manera todo el contenido de la página esta dentro de <body> pero estructurado en tres areas para facilitar el tratamiento con las librerías JS de Materialize. | ||
| - | |||
| - | Como Néfele se creo basándonos en Materialize mantiene esta estructura, por lo que tenemos propiedades para incluir contenido en cualquiera de las secciones. | ||
| - | |||
| ===== Propiedades ===== | ===== Propiedades ===== | ||
| ^Nombre ^Init ^Descripción ^Versión ^ | ^Nombre ^Init ^Descripción ^Versión ^ | ||
| - | |cClassId | "wpg" | | 0.1| | + | |cClassId | "wpg" | | 0.1| |
| | **Contenido de la Página** |||| | | **Contenido de la Página** |||| | ||
| - | |cInMain | | Contenido para incluir en el <Main> de la página | 0.1| | + | |cInHead | | Contenido a Añadir en el <Head> de la página| 0.1| |
| - | |cInHeader | | Contenido para incluir en el <Header> de la página | 0.1| | + | |cCSS | | Contenido de Estilo CSS para incluir en el <Head> de la página| 0.1| |
| - | |cCSS | | Contenido de Estilo CSS para incluir en el <Head> de la página| 0.1| | + | |aHeadScript | {} | Array de Script para incluir en el <Head>| 0.1| |
| - | |cInHead | | Contenido a Añadir en el <Head> de la página| 0.1| | + | |aHeadLinks | {} | Array de Links para incluir en el <Head>| 0.1| |
| - | |cInFooter | | Contenido a Añadir en el <Footer>, si contiene algo NO se pone el estandar de materilezecss| 0.1| | + | |aHeadMetas | {} | Array de Meta para incluir en el <Head>| 0.5| |
| - | |aScript | {} | Array de Script para incluir al Pie| 0.1| | + | |cHeadMeta | | Método rápido de añadir un elemento a aHeadMetas | 0.5| |
| - | |aHeadScript | {} | Array de Script para incluir en el Head| 0.1| | + | |cInHeader | | Contenido para incluir en el <Header> de la página | 0.1| |
| - | |aHeadLinks | {} | Array de Links para incluir en el Head| 0.1| | + | |cInMain | | Contenido para incluir en el <Main> de la página | 0.1| |
| - | |cVersionMaterialize | | Versión del MaterializeCSS a utilizar "1.0.0"| 0.1| | + | |cInFooter | | Contenido a Añadir en el <Footer>, si contiene algo **NO** se utiliza el Footer estándar de [[https://materializecss.com/footer.html|Materialize]]| 0.1| |
| - | |cVersionJquery | | Versión del JQuery que vamos a utilizar "3.4.1.min"| 0.1| | + | |aScript | {} | Array de Script para incluir en la sección <Script> del <Body>| 0.1| |
| - | |cVersionCoreFiles | | Versión a usar de nefelecorecss.css y nefelecorejs.js| 0.1| | + | |cScript | | Método rapido de añadir un elemento a aScript | 0.3| |
| + | | **Control de Versiones** |||| | ||
| + | |cVersionMaterialize | | Versión del MaterializeCSS a utilizar "1.0.0"| 0.1| | ||
| + | |cVersionJquery | | Versión del JQuery que vamos a utilizar "3.4.1.min"| 0.1| | ||
| + | |cVersionCoreFiles | | Versión a usar de nefelecorecss.css y nefelecorejs.js| 0.1| | ||
| | **Automatizaciones de la Página** |||| | | **Automatizaciones de la Página** |||| | ||
| - | |aOnReady | {} | Codigo a Ejecutar cuando este lista la página| 0.1| | + | |[[propiedades:cOnReady|aOnReady]] | {} | Código a Ejecutar cuando este lista la página| 0.1| |
| - | |cAutoJS | | Función del proyecto a llamar en la cabecera para cargar funciones JS| 0.1| | + | |[[propiedades:cOnReady]] | | Método rapido de añadir un elemento a aOnReady| 0.3| |
| - | |lAutoReloaded | .t. | Obliga a que la página se recarge al ir atras en el navegador| 0.1| | + | |cAutoJS | | Función del proyecto a llamar en la cabecera para cargar funciones JS| 0.1| |
| - | |nTimeOut | 0 | Segundos que se puede mantener la página quieta| 0.1| | + | |lAutoReloaded | .t. | Obliga a que la página se recargue al ir atrás en el navegador| 0.1| |
| - | |cMainPage | | Página a la que ir cuando se esta nTimeOut tiempo quieta| 0.1| | + | |nTimeOut | 0 | Segundos que se puede mantener la página quieta| 0.1| |
| - | |aParamsAuto | {} | Parámetros a incluir en la llamada del TimeOut| 0.1| | + | |cMainPage | | Página a la que ir cuando se esta nTimeOut tiempo quieta| 0.1| |
| - | |nDelay | 0 | Tiempo de espera para servir la página| 0.1| | + | |aParamsAuto | {} | Parámetros a incluir en la llamada del TimeOut| 0.1| |
| + | |nDelay | 0 | Tiempo de espera para servir la página| 0.1| | ||
| | **Aspecto de la Página** |||| | | **Aspecto de la Página** |||| | ||
| - | |lValign | .f. | Fuerza el centrado Vertical del contenido del <main>| 0.1| | + | |lValign | .f. | Fuerza el centrado Vertical del contenido del <main>| 0.1| |
| - | |lContainer | .t. | Se habilita el modo Contenedor o No en la página| 0.1| | + | |lContainer | .t. | Se habilita el modo [[https://materializecss.com/grid.html#grid-container|Contenedor]] o No en la página| 0.1| |
| - | |cTitle | | Titulo de la página| 0.1| | + | |cTitle | | Titulo de la página| 0.1| |
| - | |cClrText | "black" | Color del texto de la Página| 0.1| | + | |cClrText | "black" | Color del texto de la Página| 0.1| |
| - | |cClrPane | "white" | Color del fondo de la Página| 0.1| | + | |cClrPane | "white" | Color del fondo de la Página| 0.1| |
| - | |cIcon | | FavIcon de la página| 0.1| | + | |cIcon | | [[https://es.wikipedia.org/wiki/Favicon|Favicon]] de la página| 0.1| |
| - | |lFullScreen | .f. | Muestra la página a pantalla completa| 0.1| | + | |cLanguage | "es-ES" | Idioma de la página| 0.4| |
| - | |lNoBackButton | .f. | Anula el botón back del navegador| 0.1| | + | |lFullScreen | .f. | Muestra la página a pantalla completa| 0.1| |
| - | |cMeasureType | xc_Pixel | Unidad de medida base para los controles| 0.1| | + | |lNoBackButton | .f. | Anula el botón back del navegador| 0.1| |
| - | | **Parametros del Footer estandar de MaterializeCSS** |||| | + | |cMeasureType | xc_Pixel | Unidad de medida base para los controles| 0.1| |
| - | |lFooter | .t. | Incluir Footer estandar de Materilezecss| 0.1| | + | | **Parametros del Footer estandar de [[https://materializecss.com/footer.html|Materialize]]** |||| |
| - | |aLinks | {} | Lista de Links en el Footer Estandar, es un array de arays {cURL,cText}| 0.1| | + | |lFooter | .t. | Incluir Footer estandar de [[https://materializecss.com/footer.html|Materialize]]| 0.1| |
| - | |cTitleFooter | | Titulo en el Footer| 0.1| | + | |aLinks | {} | Lista de Links en el Footer Estandar, es un array de arays {cURL,cText}| 0.1| |
| - | |cClrFotText | "white" | Color del Titulo del Footer| 0.1| | + | |cTitleFooter | | Titulo en el Footer| 0.1| |
| - | |cClrFotPane | "pink" | Color del fondo del Footer| 0.1| | + | |cClrFootText | "white" | Color del Titulo del Footer| 0.1| |
| - | |cSubTitle | | Subtitulo del Footer| 0.1| | + | |cClrFootPane | "pink" | Color del fondo del Footer| 0.1| |
| - | |cClrSubText | "grey" | Color del texto del Subtitulo del Footer| 0.1| | + | |cSubTitle | | Subtitulo del Footer| 0.1| |
| - | |cCopyright | | Texto del Copyright en el Footer| 0.1| | + | |cClrSubText | "grey" | Color del texto del Subtitulo del Footer| 0.1| |
| - | |cClrCrText | "white" | Color del Texto del Copyright| 0.1| | + | |cCopyright | | Texto del Copyright en el Footer| 0.1| |
| - | |cClrCrPane | | Color del fondo del Copyright| 0.1| | + | |cClrCrText | "white" | Color del Texto del Copyright| 0.1| |
| + | |cClrCrPane | | Color del fondo del Copyright| 0.1| | ||
| + | |aBreadCrumbs | | Array de path para un [[https://materializecss.com/breadcrumbs|BreadCrumbs]] en el footer | 0.3| | ||
| | **ShadowSheet - Bloqueo temporal de la página mientras se realizan procesos** |||| | | **ShadowSheet - Bloqueo temporal de la página mientras se realizan procesos** |||| | ||
| - | |lShadowSheet | .t. | Si queremos activar el Shadowsheet| 0.1| | + | |lShadowSheet | .t. | Si queremos activar el Shadowsheet| 0.1| |
| - | |cShadowSheetTitle | | Titulo a presentar en el ShadowSheet| 0.1| | + | |cShadowSheetTitle | | Titulo a presentar en el ShadowSheet| 0.1| |
| - | |cShadowSheetSubTitle | | Subtitulo a presentar ne el ShadowSheet| 0.1| | + | |cShadowSheetSubTitle | | Subtitulo a presentar ne el ShadowSheet| 0.1| |
| | **Banner de información de cookies** |||| | | **Banner de información de cookies** |||| | ||
| - | |cCookieBannerText | | Texto principal que aparece en el banner| 0.1| | + | |cCookieBannerText | | Texto principal que aparece en el banner| 0.1| |
| - | |cCookieBannerClose | | Texto del botón cerrar| 0.1| | + | |cCookieBannerClose | | Texto del botón cerrar| 0.1| |
| - | |cCookieBannerMore | | Texto del enlace saber más| 0.1| | + | |cCookieBannerMore | | Texto del enlace saber más| 0.1| |
| - | |cCookieBannerLink | | Link al pulsar el texto anterior| 0.1| | + | |cCookieBannerLink | | Link al pulsar el texto anterior| 0.1| |
| | **Extras** |||| | | **Extras** |||| | ||
| - | |lFaIcons | .f. | Carga font awesome| 0.1| | + | |lFaIcons | .f. | Carga [[https://fontawesome.com/|Font Awesome]]| 0.1| |
| - | |lAlerts | .f. | Carga js de sweetalart| 0.1| | + | |lAlerts | .f. | Carga js de [[https://sweetalert.js.org/|SweetAlert]]| 0.1| |
| - | |lGoogleChart | .F. | Inicializa la página para que pueda contener Google Chart| 0.1| | + | |lGoogleChart | .F. | Inicializa la página para que pueda contener [[https://developers.google.com/chart/|Google Chart]]| 0.1| |
| - | |lTourShow | .T. | Si se mostrará o no el tour| 0.1| | + | |lTourShow | .t. | Si se mostrará o no el [[http://iamdanfox.github.io/anno.js/|Tour]]| 0.1| |
| - | |aTour | {} | Array con todos cId de los elementos del tour| 0.1| | + | |aTour | {} | Array con todos cId de los elementos del tour, si esta vació no se tomara en cuenta lTourShow| 0.1| |
| - | |cAnalytics | | ApiKey de Google Analitics| 0.1| | + | |cAnalytics | | ApiKey de Google Analitics| 0.1| |
| - | |cGpsField | | Nombre del control que guardará la información gps| 0.1| | + | |cGpsField | | Nombre del control que guardará la información [[componentes:Coordenadas Gps|GPS]]| 0.1| |
| - | | **One Signal** |||| | + | | **[[https://onesignal.com/|One Signal]]** |||| |
| - | |cOneSignalKey | | App key de onesignal| 0.1| | + | |cOneSignalKey | | App key de onesignal| 0.1| |
| - | |cOneSignalKeySafari | | App key onesignal para navegadores safari| 0.1| | + | |cOneSignalKeySafari | | App key onesignal para navegadores safari| 0.1| |
| - | | **Ventanas Modal** |||| | + | | **Ventanas [[https://materializecss.com/modals.html|Modal]]** |||| |
| - | |cModalMinTop | "4%" | Minimo Top para ventana modal| 0.1| | + | |cModalMinTop | "4%" | Mínimo Top para ventana modal| 0.1| |
| - | |cModalMaxTop | "10%" | Máximo Top para ventana modal| 0.1| | + | |cModalMaxTop | "10%" | Máximo Top para ventana modal| 0.1| |
| + | | **Progressive Web App** |||| | ||
| + | |[[controles:wManifest|oManifest]] | | Objeto de la clase wManifest para la configuración del archivo .webmanifest y los metas necesarios para utilizar nuestra web como PWA| 0.5| | ||
| + | |lManifest | .f. | Vamos a utilizar webManifest | 0.5| | ||
| - | ===== Metodos ===== | + | ===== Métodos ===== |
| ^Nombre ^Descripción ^Versión ^ | ^Nombre ^Descripción ^Versión ^ | ||
| | New() | Instancia la clase para irle añadiendo los controles| 0.1| | | New() | Instancia la clase para irle añadiendo los controles| 0.1| | ||
| | Create() | Monta todo el código necesario para que el navegador pueda visualizar la página y lo retorna como una cadena| 0.1| | | Create() | Monta todo el código necesario para que el navegador pueda visualizar la página y lo retorna como una cadena| 0.1| | ||
| - | | AddHTML(cText) | Nos Añade en el HTML el texto| 0.1| | + | | [[metodos:addhtml|AddHTML(cText)]] | Nos Añade en el HTML el texto| 0.1| |
| - | | ProccessPhp(cText) | Nos Añade el texto como una bloque PHP| 0.1| | + | | [[metodos:processphp|ProccessPhp(cPhpFile, aParams, cId)]] | Añade al código HTML una llamada por Ajax a un modulo PHP, esto nos permite añadir a nuestro proyecto Néfele funcionalidades que ya tengamos operativas en PHP y que aun no hemos pasado a Néfele| 0.1| |
| - | | **Solo en Modo Debugger** ||| | + | | **Solo operativas en [[tecnicas:debugger|Modo Debugger]]** ||| |
| - | | [[metodos:LogDebug|LogDebug(cText,lComillas)]] | Nos Envía cText a la Consola del navegador y a NefeleConsole, si lComillas == .F. podemos pasarle una instrucción que se ejecuta en la página| 0.1| | + | | [[metodos:LogDebug|LogDebug(cText,lComillas)]] | Nos Envía cText a la Consola del navegador y a [[utilidades:nefeleconsole|Néfele Console]], si lComillas == .F. podemos pasarle una instrucción que se ejecuta en la página| 0.1| |
| - | | [[metodos:LogError|LogError(cText)]] | Nos Añade un Mensaje de Error en la Consola del Navegador y en NefeelConsole| 0.1| | + | | [[metodos:LogError|LogError(cText)]] | Nos Añade un Mensaje de Error en la Consola del Navegador y en [[utilidades:nefeleconsole|Néfele Console]]| 0.1| |
| | [[metodos:Assert|Assert(cText)]] | Nos Añade un Comentario al HTML| 0.1| | | [[metodos:Assert|Assert(cText)]] | Nos Añade un Comentario al HTML| 0.1| | ||
| + | | [[metodos:AddTimer|AddTimer()]] | Añade un timer JS a la página| 0.3| | ||
| ~~DISCUSSION|Comentario tWebPage~~ | ~~DISCUSSION|Comentario tWebPage~~ | ||
controles/twebpage.txt · Última modificación: 04/05/2023 19:26 por pedro
