Más ejercicios con CSS


([N3] pacosatu) #1

Hola.

Ahora que llega la Navidad te apetecerá adornar tu aplicación con colores Navideños.
Para facilitarte esa tarea pongo a tu disposición un gestor y comprobador Online de código CSS (basado en la OpenApp gdCSS de guida21.com).

Puedes acceder en: vatp://pruebas:pruebas@c6.velneo.com:16400/0PS__MisCSS_iapp.

  • Dispones de una lista de los controles gráficos (Widgets) que puedes personalizar con CSS.
  • Creas un CSS específico para un Widget concreto que llamaremos Recurso CSS.
  • Prueba los Recursos CSS hasta que el resultado sea el esperado.
  • Añade una nueva Hoja de Estilo que contenga un conjunto ordenado de Recursos CSS.
  • Finalmente exporta la Hoja de Estilo a un fichero de disco en formato CSS para aplicar a tu aplicación.

Si tienes un CSS atractivo y quieres compartirlo, crea los Recursos CSS y estarán disponibles para otros usuarios.
Cuando añadas nuevo CSS, la aplicación te pedirá un nombre de Autor para identificar tus aportaciones y ser propietario de ellas.

Tienes disponible inicialmentre 2 Hojas de Estilo, una de ejemplo que es la aplicada por defecto a la Aplicación y la Hoja de Estilo oficial de Velneo en VERP. Duplica los Recursos CSS y modifícalos a tu gusto.
Espero tus aportaciones y sugerencias.

De momento es una aplicación para equipos de escritorio y pantalla de relación 16:9 o 16:10.
En la agenda está un probador de CSS para Tablets/Móviles y un gestor de estilos para QML.

Saludos
Paco Satué

P.D. La aplicación solo está disponible como herramienta de prueba y ejercicios con CSS y No es descargable.


([N3] pacosatu) #2

Hola.

He actualizado el probador CSS colocándolo en un Dock.
De esta forma podemos adaptar el formulario del Probador CSS a la pantalla disponible e incluso colocarlo en otra pantalla.

Saludos
Paco Satué


([N3] Juanjo) #3

Gracias Paco


([N3] pacosatu) #4

Hola Juanjo.

¡¡ Qué bien sientan los agradecimeintos!! y qué poco cuestan.

Saludos
Paco Satué


([N4] Ramon Denuc) #5

Hola Paco,

Muchas gracias por compartir tu apreciado trabajo, de verdad.

He estado revisando las hojas de estilo, he mirado de exportar la Hoja de Estilos de Ejemplo a una de mis aplicaciones para ver que tal se ajustan los CSS a cualquier aplicación.

Y al copiar el código CSS a mi aplicación me sale el error: “Error: Símbolo desconocido: E”

He mirado de encontrar el citado símbolo, pero no he sabido encontrarlo. No se si es un error u otra cosa.

Saludos



([N3] pacosatu) #6

Hola Ramon.

Cuando te ocurra esto es casi siempre un problema de las dichosas comillas dobles y el puñetero editor de f´romulas.
En este caso hay 2 comillas dobles en el Recurso CSS – PS Cajas de Edición.

Busca esas 2 comillas con el Notepad++ y las eliminas ya que están en un comentario y no son necesarias.

En mis aplicaciones obtengo la Hoja de Estilo mediante una función remota a la aplicación MI_CSS y en este caso las comillas no afectan.

Saludos
Paco Satué


([N4] Infortic) #7

Gracias por tu aporte Paco, es una app muy útil.


([N4] ccuesta) #8

Genial Paco, ya lo estoy aplicando y disfrutándolo.

Buen trabajo, Gracias!!


([N3] pacosatu) #9

Hola.

El otro día se preguntó por la posibilidad de disponer de forma nativa de una calculadora popup al estilo del calendario.

Usando la acción “Mostrar subformulario popup” del control PushButton he preparado un ejemplo de calculadora básica.
Lo que hace es usar la función EVAL de javascript para devolver el resultado de la expresión introducida,
por ejem (23 + 5) / 12 + Math.sqrt(120)

Es el Recurso CSS “PS Calculadora popup” de la Hoja de Estilo “PS Ejercicios”.

Probadlo
Saludos
Paco Satué


([N3] pacosatu) #10

Hola.

Tenéis ahora también la oportunidad de probar la calculadora QML en el mismo Recurso CSS “PS Calculadora popup” de la Hoja de Estilo “PS Ejercicios”.

Por otro lado, tenía un problema visual con la Barra de estado.
Cuando mostraba el Porcentaje de la Barra de progreso, el icono forzaba un cambio de altura de la Barra de estado, produciéndose un molesto efecto visual.

Podéis consultar la solución en el Recurso “PS Barra de Estado”.

Saludos
Paco Satué


([N3] Juanjo) #11

Muchas gracias por todo Paco.


([N4] maserrano) #12

Buenos días Paco,
En primer lugar agradecerte todo el aporte que haces a la comunidad.
Me han servido de gran ayuda tus soluciones.
Quería jugar un poco con la herramienta de CSS pero no puedo entrar en
vatp://pruebas:pruebas@c6.velneo.com:16400

¿ Hago algo mal o hay algún problema ?
Lo he intentado con vClient 22 y 23
Saludos,


([N3] pacosatu) #13

Hola maserrano.

Me alegro que mis aportes os ayuden con Velneo.

Disculpa, pero hace poco he cambiado el servidor del cloud de desarrollo.
Ahora el acceso es a través de vatp://pruebas:pruebas@c3.velneo.com:10180/0PS__MisCSS_iapp

Saludos
Paco Satué


([N1] lsmsusvilla) #14

Muy buenas paco podrias decirme en el editor y probador que tienes de CSS que thema y mode tienes para que te salgan esos colores.
O si me puedes decir otros para que salgan destacados las lineas

Gracias


([N3] pacosatu) #15

Hola lsmsusvilla

La Hoja de Estilo aplicada es “PS Hoja de Estilo de Ejemplo”.

Saludos
Paco Satué


([N1] lsmsusvilla) #16

Una pregunta paco, los cambios que hagas en la presentación del código HTML, XML, CSS etc se pueden guardar posteriormente en velneo, o los ejemplos que hay solo son de lectura


([N3] pacosatu) #17

Hola lsmsusvilla.

Sí, puedes exportar a un fichero CSS la Hoja de Estilo que hayas creado.
Busca el Botón de menú “Exportar Hoja de Estilo” en la pantalla de Edición de la Hoja de Estilo.

imagen

Saludos
Paco Satué


([N1] lsmsusvilla) #18

Perdona paco no me referia al estilo CSS exactamente, me referia a en el probador de CSS para que cuando te sale el codigo CSS formateado te salga con esos colores


([N3] pacosatu) #19

Hola lsmsusvilla.

Eso se consigue usando la librería Ace Editor.
El Tema usado es “eclipse” y el Modocss”.

Tienes algún de uso ejemplo en los Ejercicios del Editor de código HTML.

Saludos
Paco Satué


([N1] lsmsusvilla) #20

Ok seguire investigando a ver si lo consigo