Para usted que se pregunta: “¿Qué tipos de librerías puedo utilizar dentro de Scriptcase?”, Aquí en este post usted encontrará la respuesta. En el post siguiente, yo, Camila Moreira, voy a presentarles algunas librerías que usualmente utilizo en la estilización de mis proyectos.
En primer lugar quisiera informar que cualquier biblioteca puede ser incluida dentro de Scriptcase, basta que usted sepa cómo incluir y cómo efectuar el uso de forma correcta, voy a citar ahora un ejemplo muy simple y muy utilizado de biblioteca, que es el Bootstrap.
Como usted ya sabe, Bootstrap es un framework front-end que facilita la vida de los programadores a crear sitios y sistemas web sin necesidad de introducir una línea si quiere de código CSS. En nuestro caso dentro de Scriptcase, utilizamos más para estilizar nuestras aplicaciones, pues el mismo ya nos contempla con el código de la aplicación listo y estilizado, entonces sólo damos una “tapa” en el visual.
Hay también otras bibliotecas, digamos que poco conocidas y utilizadas, pero mi misión hoy es presentarles un poco de las que utilizo. Entonces vamos a lo que realmente interesa…
El principio de cualquier biblioteca será descargar el contenido del sitio y crear una biblioteca externa con este contenido dentro, a pesar de que ya existen varias tutorías que muestran cómo crear y usar la biblioteca externa, en el siguiente vídeo mostraré cómo hacerlo, entonces ahora vamos a enfocar sólo en como utilizar las bibliotecas, ¿verdad?
Animate: Esta biblioteca, como el propio nombre ya dice, posee animaciones que dejan su sistema o sitio más animados, sencillo y muy fácil de usar. El sitio tiene varias animaciones, sólo tendrá que tener creatividad a la hora de usar.
En el ejemplo siguiente, creó un formulario de tipo “registro único” y colocó en el evento onScriptInit el código siguiente:
En primer lugar hice la llamada del archivo necesario para que la biblioteca de animación funcionara, luego creé un pequeño script que al pasar el ratón sobre el botón “Nuevo” incluirá dos clases (animada – animada es la clase predeterminada que necesitará siempre ser incluida y tada es la clase que hará que la animación suceda) y tomar el ratón sobre el botón eliminará la clase de animación, de modo que al pasar el puntero del ratón sobre pasa a la animación, para ver cuáles son las animaciones, visite: https://daneden.github.io/animate.css/
La creatividad de cómo añadir esa biblioteca en el sistema está a criterio de ustedes, pero yo uso mucho para animar el logotipo en las pantallas de inicio de sesión, para animar mensajes de error o alerta, entre otras cosas…
Pace JS: Es una biblioteca Javascript y CSS utilizada para agregar automáticamente un progreso hermoso e indicadores de actividades para las cargas de página y navegación AJAX, la misma es gratuita. En el sitio existen algunos modelos ya creados para uso, vea aquí: http://github.hubspot.com/pace/docs/welcome/
En el ejemplo siguiente, creé una cuadrícula del tipo “consulta” y colocé en el evento onHeader el código siguiente:
Para utilizar esta biblioteca basta con hacer la llamada del archivo “pace.js” que es el archivo predeterminado y del archivo CSS referente al tema que desea utilizar, en el ejemplo anterior he utilizado el tema “Corner Indicator”, por lo que el archivo “pace-theme -corner-indicator.css”.
En el caso de que haya “date-pace-options = ‘{” ghostTime “: 2000}’”, se establece que la estilización se ejecuta durante 2 segundos.
Si desea utilizar otro tema, simplemente cambie el nombre del archivo “.css”. Por ejemplo:
- Minimal – “pace-theme-minimal.css”
- Loading bar – “pace-theme-loading-bar.css”
- Center atom – “pace-theme-center-atom.css”
Ahora está a criterio de ustedes aprovechar esta biblioteca de la mejor manera. Ah! En el caso de que el color se haya cambiado, es necesario ir en el tema deseado y hacer clic en el botón “Download”.
Aparecerá un código CSS, puede copiar este código y reemplazarlo dentro del archivo del tema que se encuentra en la biblioteca externa o retirar la llamada del archivo “.css” y añadir el código dentro del evento (depende de la aplicación) en la aplicación utilizada.
Pegue el código y haga clic en “Guardar”.
Ahora es con usted, dé una estudia de cómo utilizar mejor la biblioteca e incluya en sus proyectos también.
EChats: Esta es una biblioteca de gráficos, desarrollada por chinos, pero muy buena de usar. Contiene gráficos limpios y atractivos.
Muchas personas conocen FusionCharts, GoogleCharts, HigthCharts, entre otras … Pero es biblioteca es muy fácil de integrar a su sitio o proyecto.
Sí, este código es un poco más complejo, pero no es ningún bicho de siete cabezas. Voy a tratar de explicar brevemente para que usted pueda entender. En el ejemplo anterior vamos a mostrar un gráfico con la suma total de notas por materia.
En primer lugar he creado dos variables e informé que ambas recibir una matriz, luego hice una búsqueda en la base de datos para obtener los valores deseados. He creado un bucle para poder montar mi matriz con los valores del banco. Luego hice una concatenación junto con una conversión de array a cadena.
La función implode del php, desmonta un array separando los valores por lo que definir entre las comillas, en el caso de materia separé los valores por “,” (comillas dobles – comas dobles) y en el caso de nota separé sólo por, () coma). Nota también que antes y después de la función implode concatene un valor (corchetes), eso para que no necesite concatenar nada en el JAVASCRIPT, sólo tome el valor de PHP.
Por lo tanto, cerré el código php y agregó la llamada al archivo de la biblioteca externa ECharts, luego incluye una DIV que será responsable de recibir el gráfico (está div es obligatorio, ya que el gráfico se incluye en el ID “main”).
A continuación tendremos el código responsable de montar nuestro gráfico, en este ejemplo que es simple sólo he jugado los valores en los lugares correctos. Tenga en cuenta que no he tenido que hacer ninguna petición ajax o pasar los valores por json, sólo tiré las variables de PHP a JAVASCRIPT.
Hay quien dice que esto no es bueno, pero yo particularmente no creo y todavía me parece mucho más fácil.
Usted puede utilizar otros modelos de gráficos y todavía estudiar un poco sobre sus características.Actualidad que este código abrirá su mente a otras cosas en el futuro.
Clicando aquí aprenderá a hacer la llamada de la biblioteca y haciendo clic aquí usted podrá ver los modelos que la misma ofrece.
Espero que hayan disfrutado este post, si puede dejar puntas de los postes aquí en los comentarios haremos una levamento para producir el mayor número de votos. ¡Hasta el próximo personal!
Vea más contenido en nuestro blog.
También podría gustarte…