¿Alguna vez has experimentado que los informes se cortan al usar el reporteador de Visual FoxPro? Si es así, hay una serie de procedimientos que puedes realizar en tu computadora para solucionar este problema. A continuación, te los detallaré.
1)Cambiar el Impresor Predeterminado
Puede que tu impresor emita tus reportes salgan cortados, te recomendamos que cambies el impresor predeterminado ; para hacerlo, en los sistemas operativos Windows siempre existe un impresor PDF que puedes usar como predeterminado, te recomendamos que lo uses de esta manera para evitar que tus reportes aparezcan cortados.
¿Como activar el impresor Microsoft PDF como predeterminado ?
Para activar este impresor primero debes desactivar la gestión automática de impresores por windows. Cuando esta opción esta activada, windows se encarga de establecer a que impresor se enviarán tus reportes, impidiendo que puedas seleccionar el impresor Microsoft PDF que es el que necesitamos.
Desactivar manejo
DEBES DESACTIVAR ESE CHEQUESITO. (en español pueda que diga algo así como: «Dejar que Windows administre mi impresor por default»)
Establecer el impresor Microsoft PDF como predeterminado
Ahora que ya puedes seleccionar por tu cuenta el impresor predeterminado debes seleccionar realizar lo que te indico a continuación:
Selecciona el impresor y a continuación el botón administrar
A continuación debes establecer el impresor como predeterminado
Intenta volver a imprimir los reportes, siguen cortados ? prueba cualquiera de los procedimientos a continuacion
2)Cambiar Configuración PPP
Sucede que a veces los reportes te salen cortados cuando los observas en pantalla.
Esto pasa por que windows agranda las fuentes de los programas cuando la resolución de la pantalla que usas es demasiado grande.
Por ejemplo puede pasar cuando tiene un monitor muy grande de 32» o mas.
Pero no es necesario que el monitor en uso sea grande, ya que una mayor pantalla no necesariamente significa una mayor resolución ejemplo de ellos son las pantallas de celulares que con tamaños de 4» o 5» tiene igual resolución que un monitor de 17».
Como windows agranda las fuentes de los programas para que las pantallas de los programas no se vean muy pequeñas, debes hacer lo siguiente para evitar este comportamiento en Contaportable, y así evitar ver los reportes cortados.
Paso 1) click derecho sobre el icono de Contaportable y luego clic en propiedades
Paso 2) busca la pestaña que dice compatibilidad en tu ficha de windows e identifica el botón cambiar opciones de DPI.
Paso 3 ) Debes marcar las opciones que configuran el comportamiento de programas en resoluciones altas de pantalla, tal y como lo ves a continuación
Una vez hecho esto ya podrás ver tus reportes con normalidad.
Generalmente este problema sucede en Windows 10 y Windows 8/8.1
3)Cambiar la resolución de pantalla
Otra opción que puedes probar es cambiar la resolución de pantalla
En general solo necesitas altas resoluciones si ocupas tu computadora para diseño gráfico o para juegos de alta gama; por lo demás puedes perfectamente trabajar con una baja resolución sin notar la diferencia.
Si necesitas una resolución alta en tu computadora, entonces te recomiendo seguir el primer tutorial para ajustar la configuracion PPP de cada programa en windows.
Al momento de escribir esto ya existe Vue 3, por lo que he decidido instalar también la versión 2 a fin de que pueda comprender los conceptos básicos y partir de ahi para entrarle a a Vue 3
Para instalar lo hago por medio del manejador de paquetes NPM
Como siempre primero debo poner en uso la version de node que deseo usar, esto lo hago con NVM
nvm use v16.17.1
npm init vue@2.2.0
Need to install the following packages:
create-vue@2.2.0
Ok to proceed? (y) y
Vue.js - The Progressive JavaScript Framework
✔ Project name: … vue2
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
En este post tengo planeado ir guardando aquellos aspectos nuevos de JavaScript que me parecen extraños
Transpiler
El concepto de transpiler existe por la gran actualización que se eta teniendo del lenguaje Javascript, ya que cada año surge una nueva especificación se vuelve necesario compilar o mas bien transpilar a una versión que sea reconocida por los navegadores viejos y asi despreocuparnos de los problemas de compatibildad
un buen transpiler es https://babeljs.io/
Setencia let
La sentencia let para declarar variables lo hace en el contexto que se usa, por ejemplo si tu declaras un variable con la palabra var entonces esas variables en realidad se declaran al inicio del archivo js, talvez no quieras que esto suceda
function getAlgoNombre(algo) {
if (algo.isalgo) {
var nombre = 'nombre ' + algo.name;
return nombre;
}
return algo.nombre;
}
el codigo anterior es equivalente a lo siguiente
function getAlgoNombre(pony) {
var nombre;
if (algo.isalgo) {
var nombre = 'nombre ' + algo.name;
return nombre;
}
// nombre tambien es accesible aqui
return algo.nombre;
}
con let se declara cabal donde se usa
Constants
las constantes se introdujeron en la versión ES2015, la ventaja de una constante es que se mantiene inalterable en todo el código
const algoobjects = 6;
La sentencia anterior no puede se reasignada
También se pueden asignar un objeto una constante, se puede declarar y luego ser asiganada
Al instalar Linux lo primero que necesitaremos es poder dar permisos de instalación al usuario que estamos utilizando, lo que quiere decir agregarlo al listado de sudoers del sistema
/sbin/usermod -aG sudo yec
Evitar que debian busque repositorios en el media CDROM
es probable que te salga este error cuando tengas que instalar
please insert the disc labeled
'Debian GNU/Linux 7.0.0 _Wheezy_ - Official amd64 CD Binary-1 20130504-14:44'
in the drive '/media/cdrom/' and press enter
si ese es el caso debes comentar la búsqueda en el cd rom de repositorios, esto se hace desde el archivo
sudo nano /etc/apt/sources.list
dentro del archivo comentar lo siguiente
#deb cdrom:[Debian GNU/Linux 11.5.0 _Bullseye_ - Official amd64 DVD Binary-1 20>
con esto el cdrom de debian dejará de ser el primero en la lista de busqueda de repositorios
Configurar Samba
sudo apt install samba smbclient cifs-utils
Una vez instaladas las dependencias de samba hay que configurar en el archivo
sudo nano /etc/samba/smb.conf
cambiar el workgroup
workgroup = NUEVOGRUPO
ahora agregar la carpeta compartida de la siguiente forma
[public]
comment = PUBLIC
path = /home/usr/Public
writeble = yes
guest ok= yes
guest only = yes
force create mode =775
force directory mode=775
Herramientas de programación
Visual Studio Code
se baja y se instala de la pagina
Apache
sudo apt update
Instalación de apache
sudo apt install apache2
checkar que funcione
sudo systemctl status apache2
Crear un virtual Host Apache para pruebas
lo primero será crear una copia del archivo de configuración de apache, con el siguiente comando
cd /etc/apache2/sites-available/
sudo cp 000-default.conf desarrollo.com.conf
sudo nano desarrollo.com.conf
<VirtualHost *:80>
# The SeverName directive sets the request scheme, hostname and port that
# the server uses to identify itself. This is used when creating
# redirection URLs. In the context of virtual hosts, the ServerName
# specifies what hostname must appear in the request's Host: header to
# match this virtual host. For the default virtual host (this file) this
# value is not decisive as it is used as a last resort host regardless.
# However, you must set it for any further virtual host explicitly.
ServerName desarrollo.com
ServerAlias www.desarrollo.com
ServerAdmin webmaster@localhost
DocumentRoot /home/usr/Documents/desarrollo
<Directory "/home/usr/Documents/desarrollo">
AllowOverride All
Require all granted
</Directory>
# Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
# error, crit, alert, emerg.
# It is also possible to configure the loglevel for particular
# modules, e.g.
#LogLevel info ssl:warn
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
# For most configuration files from conf-available/, which are
# enabled or disabled at a global level, it is possible to
# include a line for only one particular virtual host. For example the
# following line enables the CGI configuration for this host only
# after it has been globally disabled with "a2disconf".
#Include conf-available/serve-cgi-bin.conf
</VirtualHost>
# vim: syntax=apache ts=4 sw=4 sts=4 sr noet
luego debemos poner en uso el virtual host
sudo a2ensite desarrollo.com.conf
ahora debemos reiniciar el apache
sudo systemctl restart apache2
esto lo pasará a la siguiente direccion /etc/apache2/sites-enabled
Crear el directorio
Ahora debemos crear el directorio de pruebas en la carpeta documentos del usuario
ahora debemos crear un index.html para que el directorio muestre algo
Configurar el archivo host
Para que todo funcione correctamente debemos configurar el archivo host
sudo nano /etc/hosts
luego debemos añadir lo siguiente para que redireccione correctamente
192.168.0.4 desarrollo.com
CURL
para descargar desde consola
sudo apt install curl
PHP
Instalar PHP
sudo apt update && sudo apt upgrade
sudo apt -y install php php-common
Probando si ya tenemos php
php -v
ahora que ya tenemos php sale asi
Para comprobar la configuración del php creamos un archivo con lo siguiente
<?php
// Muestra toda la información, por defecto INFO_ALL
phpinfo();
// Muestra solamente la información de los módulos.
// phpinfo(8) hace exactamente lo mismo.
phpinfo(INFO_MODULES);
?>
Tiene una variedad de comandos en linea, lo que se ha instalado con lo anterior es la CLI de dropbox para usar desde consola, al ejecutar dropbox nos desplegará la lista de comandos
ote: use dropbox help <command> to view usage for a specific command.
autostart automatically start Dropbox at login
exclude ignores/excludes a directory from syncing
filestatus get current sync status of one or more files
help provide help
lansync enables or disables LAN sync
ls list directory contents with current sync status
proxy set proxy settings for Dropbox
puburl get public url of a file in your Dropbox's public folder
running return whether Dropbox is running
sharelink get a shared link for a file in your Dropbox
start start dropboxd
status get current status of the dropboxd
stop stop dropboxd
throttle set bandwidth limits for Dropbox
update download latest version of Dropbox
version print version information for Dropbox
Es necesario instalar el daemon de dropbox y actualizarlo, para ello ejecutamos el siguiente comando
dropbox update
ahora pedira instalar el servicio de dropbox
para listar los directorios de la cuenta de dropbox hacer lo siguiente
dropbox ls
una vez se instala el servicio empezará a sincronizar en la carpeta de dropbox /home/usr/Dropbox
para ver como va la sincronización podemos usar el siguiente comando
dropbox status
Rclone
Bajar de aquí https://rclone.org/
sudo dpkg -i rclone-v1.59.2-linux-amd64.deb
rclone config
para configurar el rclone y usarlo con google debemos crear una credenciales de api de google, para ello debemos ir a la pa
https://console.cloud.google.com/apis/
debemos crear un nuevo proyecto o bien seleccionar uno existente, yo lo hice en uno ya existente
y ahora debemos ir a la parte izquierda donde dice credenciales, lo que hay que hacer es generar una nueva token para ingresarlo en el Rclone y asi que se pueda conectar a mi cuenta de google
una vez en credenciales podemos seleccionar lo siguiente
seleccionar crear credenciales
seleccionamos la opcion de ID de cliente de OAuth
Seleccionar App de escritorio
poner un nombre y crear
ahi generar la clave secreta y el id de cliente para Rclone
Volviendo a Rclone ahi seleccionar la opción de google
ahora ingresar el id cliente que generamos en cloud engine
a continuación Rclone nos pedirá si deseamos la autoconfiguración y decimos que si
ahí debemos autorizar nuestra propia y seleccionar la cuenta con la que queremos logearnos es decir el correo de gmail donde está los archivos que deseamos de Drive
recuerda que esta autenticación expira en una hora
ahora ya podemos enviar comando que nos devuelvan por ejemplo el listado de archivos de la cuenta que he seleccionado
rclone lsd nombredelremoto:
mas informacion sobre comandos de Rclone y ayuda aqui https://www.tecmint.com/rclone-sync-files-from-cloud-storage/
ahora quier crear un directorio en google drive para guardar la informacion de mi compu
ADVERTENCIA: La sincronización de Rclone no es perfecta no resuelve conflictos ni tiene cuidado de lo que baja o sube, simplemente actualiza todo, por lo que debes ser cuidadoso, para efectos prácticos es lo equivalente a copiar y sustituir en el remoto o en el local dependiendo de la operación que este haciendo
mas información https://rclone.org/docs/
Instalar Node JS y NPM
sudo apt install nodejs npm -y
Instalar NVM
Recomiendo instalar nvm ya que permite tener a nuestra disposición las versiones de node que necesitemos simplemente con un comando, puede ser útil si necesitamos una versión más reciente o una mas antigua por cuestiones de compatibilidad de paquetes
Podríamos reiniciar el sistema operativo para que nvm quede funcional pero existe un comando que nos recarga la configuración del perfil de nuestro usuario
source ~/.profile
Comandos de NVM
Instalar la versión más reciente de node
nvm install node
Instalar una versión en específico
nvm install 14.7.0
listar las versiones disponibles remotamente
nvm ls-remote
poner en uso la versión default
nvm use node
Instalar Mysql
Descargar de aqui https://dev.mysql.com/doc/mysql-apt-repo-quick-guide/en/#apt-repo-fresh-install las claves con los repositorios de instalación e instalarlos
Alias /phpmyadmin /var/www/html/phpmyadmin
<Directory /var/www/html/phpmyadmin/>
AddDefaultCharset UTF-8
<IfModule mod_authz_core.c>
<RequireAny>
Require all granted
</RequireAny>
</IfModule>
</Directory>
<Directory /var/www/html/phpmyadmin/setup/>
<IfModule mod_authz_core.c>
<RequireAny>
Require all granted
</RequireAny>
</IfModule>
</Directory>
sudo a2enconf phpmyadmin.conf
sudo systemctl restart apache2
http://127.0.0.1/phpmyadmin/
Instalar COMPOSER
Para instalar composer necesitamos ya tener disponible php cli en nuestro sistema, bajar el instalador de composer de aquí y luego correo el siguiente comando, al bajar tendremos cualquiere de los dos archivos siguientes
installer
composer-setup.php
para instalar globalmente los dejaremos en el directorio bin
Git es el software de control del versiones que se utiliza para compartir código con tus colaboradores. Ideal para controlar las versiones, git te permite realizar un seguimiento completo de los cambios en el código y evitar errores.
Mas de una vez me ha pasado que realizo un cambio en el código de un programa que estoy realizando y por error cambio algo que no debí haber cambiado, con git puedo restaurar un proyecto a su estado inicial.
También me permite combinar el código de 2 programadores o mas en uno solo y así integrar los cambios de un proyecto de software.
¿Que es Github ?
Github es una plataforma en linea donde alojar tu código. Antes de la llegada de Github (2008) tu mismo tenías que instalar tu servidor local para poder compartir código, también se podía hacer en un servidor en la nube, pero entonces había que crearlo y era privado, lo cual hacia mas difícil su mantenimiento.
Con Github tenemos una plataforma en linea fácil de usar para alojar nuestros proyectos de código de manera gratuita y con todas las ventajas del manejo de versiones que nos ofrece git.
Al día de hoy Github ha sido comprado por microsoft y se ha convertido en la plataforma en linea mas importante para alojar compartir y mantener el codigo de multiples proyectos.
El comando status mostrará los cambios pendientes de confirmar
On branch master
Changes to be committed:
(use "git reset HEAD <file>..." to unstage)
modified: readme.html
ahora que vemos que tenemos pendientes archivos de mandar al commit o más bien de confirmar ya podemos hacer los siguiente:
git commit -m "mensaje para el commit"
Github
Como crear un token de acceso
Ahora debemos configurar
Con el token debemos pegarlo siempre que lo pida en lugar de la contraseña y funciona bien, por eso debemos almacenarlo ya que no lo podremos ver nuevamente, si lo perdemos habrá que generar otro
Clonar un Repo
se clona con la dirección https o bien con el github-cli pero nosotros lo haremos siempre con la url
Con esto ya se puede ver en linea el push que acabamos de hacer
El GitHub Cli
GitHub CLI es una interfaz de línea de comandos (CLI) para interactuar con GitHub a través de la terminal de comandos en lugar de utilizar la interfaz gráfica de usuario (GUI) en el sitio web de GitHub.
Con GitHub CLI, los desarrolladores pueden realizar tareas comunes de GitHub, como crear y clonar repositorios, crear y revisar solicitudes de extracción, revisar problemas y realizar comentarios, todo desde la línea de comandos.
GitHub CLI está disponible para Windows, Mac y Linux, y está diseñado para ayudar a los desarrolladores a trabajar de manera más eficiente en la línea de comandos y facilitar la integración de GitHub en sus flujos de trabajo diarios. Con GitHub CLI, los desarrolladores pueden realizar tareas de GitHub de manera más rápida y eficiente, lo que les permite centrarse en escribir código de alta calidad y colaborar con otros desarrolladores.
Este comando descarga y agrega la clave de autenticación de paquete para GitHub CLI al almacén de claves del sistema, lo que permite al sistema verificar y descargar paquetes de GitHub CLI de manera segura y autenticada.
Después de tanto batallar con Angular aprendiendo nuevos conceptos y tratando de mantenerme al dia con cada actualización, sustituyedo componentes que quedan obsoletos y buscando otros compatibles, he decidio dejar atrás Angular, debo decir que el FrameWork me ha superado, me doy por vencido y me paso a algo mas sencillo pero no menos potente como lo es VUE
Como instalar VUE
Lo primero que haré es instalarlo, para ello y como estoy en mi computadora con Sistema Operativo DEBIAN debo recurrir NVM primeramente debo poner en uso el paquete de NPM que quiero utilizar, ya que lo necesito para instalar VUE
nvm use v16.17.1
A la fecha de escritura de este post la versión 16.17.1 es la actual, por eso l seleccioné para instalar VUE
npm init vue@latest
A continuación nos preguntará el nombre del proyecto y una serie de configuración
✔ Project name: … prueba ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for state management? … No / Yes ✔ Add Vitest for Unit Testing? … No / Yes ✔ Add Cypress for both Unit and End-to-End testing? … No / Yes ✔ Add ESLint for code quality? … No / Yes
VUE creará una subcarpeta con el codigo base necesario para correr nuestra app y ademas el package.json que contiene las dependencias de nuestros proyecto, pero todavía falta instalarlas
Si miramos el archivo Package.json nos pones la dependencia principal VUE 3.2.38, versión vigente al momento de escribir
Sirve para que el width de una caja se pueda mantener constante a su valor definido por el width
El Display
El display determina cómo se agrupan o presentan los elementos html dentro de la página, y existen dos principales que se pueden usar
Display Block
Block: usa todo el ancho disponible dentro del marco
Ejemplos de elementos que tienen este comportamiento
<div>
<h1> <h6>
<p>
<form>
<header>
<footer>
<section>
Display Inline
Inline: muestra todo junto
Ejemplos de elementos que tienen inline
<span>
<a>
<img>
Cambiando el Display por default
Se puede cambiar el display por default de un elemento cambiandolo con CSS por ejemplo mostrar los elementos de una lista en línea y no por bloque .
li {
display: inline;
}
Display None
También existe el valor none que oculta el elemento y lo quita del html en un efecto de remove
li {
display: none;
}
visibility:hidden
visibility:hidden por el contrario no lo remueve solo lo hace no visible, dejando siempre ocupado el espacio que tiene originalmente
Centrar horizontalmente
Si se desea centrar horizontalmente se pueden usar dos combinaciones sencillas para lograr el efecto deseado: Max-Width y Margin:Auto
Max-Width
Este sirve para que los displays alcancen un máximo de ancho y si la ventana se reduce mas allá de ese max-width entonces se ajusta automáticamente.
Margin : Auto
Si se deja el Margin como automática entonces el navegador agregar espacios iguales a la derecha y a la izquierda, centrando el elemento dentro de la pagina
Ejemplo de uso :
div.ex2 {
max-width: 500px;
margin: auto;
}
Position
La posición de un elemento está determinado por el orden en que se declara dentro del documento HTML, por ejemplo :
<div>Div uno </div> <div>Div dos </div> <div>Div tres </div>
Sin embargo a veces necesitaremos definir con exactitud la posición de un elemento sin importar el orden en el que se ha declarado, para ello podemos usar la propiedad Position.
La propiedad position tiene 4 estados: static, relative, fixed, absolute, sticky
Static
Esta es la posición por default de los elementos y no se ve afectada de nnguna manera por los posibles valores
Left
Top
Right
Bottom
Relative
La posición relativa de un elemento, se define con las propiedades left top calculadas sobre la base de la posición relativa del elemento: cuando digo posición relativa me refiero a la posición que ocupa por orden de declaración por ejemplo si un elemento ocupa la segunda posición y establecemos su Top a 50 px, entonces su top será
height del div1 + 50px
Fixed
Esta es la más fácil de las posiciones ya que se mantiene fija con respecto a la pantalla. sirve para mostrar un mensaje fijo en la pantalla, y que se mantenga visible mientras hacemos scroll
Absolute
Como su nombre lo indica esta posición es absoluta con respecto al «Parent» que lo contiene, si el elemento esta en el body entonces se hace con respecto al «viewport » de la pantalla
Algo que decir es que si el valor que se ocupa es bottom entonces se posiciona con respecto al viewport de la pantalla.
Sticky
La posición stickcky se pega al top de la pantalla cuando se alcanza
Z-index
determina el stack position de un elemento, así se pueden mostrar texto encima de una imagen
La propiedad float puede servir para decirle a un elemento que se mueva a la derecha o a la izquierda, según lo necesitemos, una forma de entender esta propiedad es que los elementos se posicionan según los declaramos en el DOM, si hay dos elementos que ocupan una misma línea estos se ponen uno detrás del otro en el orden que se declararon.
Los posibles valores son :
left
right
none
inherit
Float permite a un elemento declarado previo al que sigue «Flotar» a la derecha o viceversa
img {
float: right;
text-align:right;
}
<p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.<img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-left:15px;">
</p>
Float es como para agrupar los elementos en una misma linea y permite que cuando la pantalla se haga más pequeña se apilan uno tras otro
Conclusión
CSS es para mi, el lenguaje (si se me permite catalogarlo como tal) mas dificil de aprender, iré agregando más funciones a medida las vaya aprendiendo y entendiendo.
Mientras generaba un reporte en excel para uno de nuestros sistemas de licencias, me tope con el error siguiente:
Uncaught Error: Class 'ZipArchive' not found in
El reporte que estoy creando consulta una tabla de la base de datos, realiza un query especifico y luego descarga el excel directamente desde el navegador, estoy usando la libreria de phpoffice: «phpspreadsheet» muy conocida en el mundo php. El código que ejecuto al final de la rutina es el siguiente:
Me puse a investigar un poco y al parecer el problema radicaba en que la ZipArchive ya no esta disponible en PHP 7.0 por lo que hay que instalar manualmente, puesto que la phpspreadsheet depende de esta ZipArchive debes asegurarte que la tengas habilitada.
Para resolver el problema solo tuve que instalar la mencionada librería ejecutando el siguiente comando en la consola de:
sudo apt-get install php7.0-zip
Algunos tutoriales que encontré me indicaban que modificará el archivo php.ini sin embargo yo solo tuve que reinicar el servidor apache
sudo /etc/init.d/apache2 restart
Con esto quedo solucionado, y pude generar el reporte en excel que estaba necesitando
Advertencia: antes de empezar debes instalar NodeJS y package manager, sacaremos pronto un tutorial acerca de como hacerlo para windows y Linux.
Para crear un nuevo proyecto en Angular 10 debes tomar en cuenta algunos cambios en la sintaxis de los comandos, a continuación te doy mas detalles al respecto:
Paso 1 ) Crear un nuevo proyecto
Crear un nuevo proyecto con el siguiene comando
ng new NuevoProyecto
Al hacerlo angular creará una carpeta con el nombre «NuevoProyecto» y dentro copiara todos los archivos necesarios para que tu proyecto funcione, no intentes entender que hay dentro de cada una de esas carpetas, ya que son todas las librerías base para que tu proyecto compile. Cada proyecto angular al momento de escribir este articulo tiene un peso aproximado de 500 mb, esto puede variar de acuerdo a tu versión o librerías que ocupes
Paso 2) Instalar librerías complementarias
En mi caso fue necesario instalar estas librerías , dependiendo de la versión de NPM que estés usando tal vez no las necesites; si al momento de correr tu proyecto angula-cli te las solicita puede ejecutar este comando.
npm i @angular-devkit/schematics
npm i @angular-devkit/core
Si tienes dudas sobre si debes o no instalar estas dependencias de desarrollo, ejecuta en tu terminal el siguiente comando (recuerda que debes estar en el directorio de tu proyecto, justo donde este el archivo package.json)
ng version
Si en la salida de este comando aparece lo siguiente ya lo tienes instalado
Hasta aquí ya puedes empezar a trabajar con tu proyecto, crear componentes e instalar más dependencias, a continuación instalaremos las librerías necesarias para conectarse a una base de datos firebase.
Paso 3) Instalar Firebase
La librería de angularfire2 es la que te permite conectarte a la api de firebase, dependiendo de tu versión del npm tal vez necesites incluir el parámetro –save para que la librería se te agregue como dependencia, aunque a partir de la versión 5 de npm todas se instalan como dependencia.
npm install firebase angularfire2 --save
Al terminar debes tener algo como la siguiente imagen
Paso 4) Instalar material
Material es un patrón de diseño para aplicaciones que google implementa en muchos de sus productos, como angular es de google, también incluye este patrón de diseño, yo lo describiría como una especie de librería visual para hacer que tus aplicaciones tengan mejor presentación.
ng add @angular/material
A continuación el Angular CLI te pedirá el tema a utilizar y al terminar tendrás un resultado como el siguiente:
No es obligación incluir material en tus aplicaciones angular, puedes agregar un estilo diferente incluyendo una librería como bootstrap 4, o bien desarrollando tus propios estilos, en otro post abordaremos este tema.
Paso 5) Probar que el material funciona
Una vez que ya tienes la librería de material instalada, debemos probarlo para asegurar que funcione correctamente, para ellos haz lo siguiente:
Por ejemplo si queremos agregar un Slider que es un componente para simular un switch corredizo (ver imagen )
ejemplo de slider
Tendremos que ir primeramente al app.module.ts y luego agregar la importación del componente.
Ahora buscar el archivo html del componente app.component.html principal y agrega el siguiente selector (el selector es la etiqueta html que hala el componente a su presentación visual en el html )
OJO: siempre hay que añadir la sentencia de importación en el module.ts
Material Icons
Existe un componente para agregar iconos
import {MatIconModule} from '@angular/material/icon';
Agregar algunos iconos
<mat-icon aria-hidden="false" aria-label="Example home icon">home</mat-icon>
<mat-icon aria-hidden="false" aria-label="Example home icon">accessibility_new</mat-icon>
<mat-icon aria-hidden="false" aria-label="Example home icon">dialpad</mat-icon>
Firebase
Generar la base de datos tal como se indica aqui: crear una base de datos firebase(pendiente )
Una vez ya tenemos la base de datos de firebase, debemos crear una variable de entorno en el archivo environment.ts ahí debes copiar la firebaseConfig de tu base de datos, esto normalmente se hace en la consola de Firebase, solo para que tenga una idea, esta llave se parece a lo siguiente
Ahora que ya tienes la constante firebase declarada, debes incluirla en tu archivo del app.module.ts, para que sea pública en todo el proyecto
También debes importar la librerías del angularfire. Agregar las siguientes importaciones en la sección inicial del archivo app.module.ts
import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
import { AngularFireAnalyticsModule } from '@angular/fire/analytics';
import { AngularFirestoreModule } from '@angular/fire/firestore';
También debes importarlos el @NgModule del mismo archivo, recuerda que esta directiva une todos los módulos y los presenta en uno solo, como las librerías de angularfire2 son externas van en la sección imports, los componentes que nosotros desarrollemos esos si van en la sección declarations , el archivo app.module.ts quedará mas o menos como te lo muestro a continuación:
Document Object Model, o bien Modelo de objetos de documentos. El DOM es un estandar de miscrosoft para representar archivos XML HTML y otros documentos de marcado extensible, es decir documentos que usan los simbolos «<>» para construir un contenido.
Ejemplo:
<NuevoDocumento>
<titulo>
Documento Hola Mundo
</titulo>
<cuerpo>
Cuerpo del documento
</cuerpo>
</NuevoDocumento>
Los archivos XML pueden ser muy parecidos al HTML que se usa para páginas web, pero en realidad son cosas distintas, el XML es un lenguaje mas ordenado en el cual los nodos e información descriptiva esta delimitadamente con claridad. El HTML por ejemplo tu puedes abrir una etiqueta tras otra sin preocuparte de cumplir estandares, los navegadores leerán el documento a como de lugar.
Estrutura básica de arbol de un DOM
El DOM por lo tanto es la forma de representar estos objetos, y susa mucho en programación para brindar una forma estandarizada de acceder a la informacion de los documentos.
Imagen gracias a Microsoft : https://docs.microsoft.com/en-us/previous-versions/windows/desktop/ms763802(v=vs.85)
La idea detrás del DOM es contar con una forma estructurada de mostrar información y hacerla accesible para los programas que utilizan los datos, para hacerlo los parseadores de XML crean un arbol de nodos.
Arbol del DOM
Elemento Raiz
Elemento Hijo1
Texto del Elemento
Elemento Hijo 2
Texto del Elemento
Lo anterior es una representación simple de un DOM, retomaremos mas adelante esta estructura para explicar un par de cosas.
Que se necesita para leer XML con FOXPRO
Hace años ya que Microsoft implemento su tecnología de webservices para el tratamiento de documentos XML, recuerdo bien esto porque era apenas un adolescente y estudiante de bachillerato, cuando se anunció con bombo y plantillo toda la estrategia punto net que dominaría la agenda de desarrollo para los próximos años.
En aquella época el acceso a nuestro país era practicamente nulo (1998) y muchos todavía no entendiamos de que se trataba todo este asunto de los web services y los XML; se hablaba mucho de que los sitios web eran islas de información y que para poder extraer toda esta información atrapada en esas islas se necestiba crear puertos vias de comunicacion entre ellas para que los datos circulasen libremente.
El resultado fueron los servicios XML, como dije antes Microsoft anunciaba esta tecnología con bombo y platillo pues era su mayor apuesta por la nube, en aquellos entonces simplemente le deciamos internet.
MSXML y los servicios XML
El MSXML es un standar para varios lenguajes, Jscript VbScript .NET, C y C++, por lo que no es exclusivo para FOXPRO, lo que sucede es que se accede por medio de COM. Punto NEt tiene su propia libreria para XML integrada en el Framework por lo que no es recomendable utilizarlo en esta plataforma de desarrollo.
Existen varias versiones del MSXML, de la wikipedia les comparto la siguiente tabla.
MSXML 3.0 MSXML3
MSXML 6.0 MSXML6
Version más antigua
Es la última version
Se entrego con Windows XP, Internet Explore 6.0, 7.0,8.0, Windows XP SP2
Se entrega con : Sql Server Visual Studio, Punto NET Framework, Windows Vista, Windows 7, Windows XP SP3,
Historia de MSXML
Toda esta serie de estandares, herramientas y librerías se le bautizo con el nombre de MSXML Microsoft XML Core Service. recuerdo que a todos los que habiamos aprendido algo de lenguaje Java en aquella época nos parecía una copia burda del JDK, y es que ene efecto lo fue, punto net, MSXML y otra tecnologías eran una copia descarada de todo lo que Sun Microsystem (Dueña de Java en aquel entonces), ahora ya nadie lo recuerda.
Trabajar con XML y FOXPRO
Con la llegada de la factura electrónica a muchos paises de Latinoamérica algunos progamas viejos desarollados en foxpro, tuvieron que adaptarse para el trabajo con los xml que producen las plataformas de las administraciones fiscales; por lo que muchos programadores se vieron en la necesidad de aprender esta tecnología, yo soy uno. A continuación te comparto lo aprendido.
Leer Un Archivo XML con FOXPRO
Antes que nada crearemos un archivo XML válido para poder trabajar con él, que luego iremos extendiendo para ir demostrando los ejemplos.
Por el momento es un archivo sencillo, solo para demostrar algunas funciones básicas. Recuerda que los archivos XML no pueden llevar espacios en los nombres de los nodos por ejemplo : «Elemento Raiz» tambien no deben llevar tildes o caracteres especiales; debes tomar en cuenta las minusculas y mayusculas para trabajar con los nodos.
Pasemos pues a la lectura del archivo anterior
Para leer archivos XML con FoxPro debes primero crear una instancia del objeto MSXML, esto se hace realizando los siguiente pasos:
Paso 1) Crear el objeto MSXML
Debes crear el objeto MSXML y luego cargar el archivo que contiene el archivo XML para ello usamos el método Load
El siguiente paso es obtener algún nodo para poder trabajar con él, para ello usaremos el método selectSingleNode()
node= loXML.selectSingleNode("//")
Te preguntarás que significan las dos barritas o plecas «//». Esto significa que podemos acceder a todos los nodos del segundo nivel del archivo xml y obtener el texto del mismo, poniendo las 2 plecas obtendremos acceso a los 2 nodos hijos del archivo de ejemplo XML es decir que obtenemos los nodos de Chepe y Juan
Paso 3) Extraer el texto de dicho nodo.
Ahora que ya tenemos creado el objeto node ya se puede obtener el texto del mismo, la ventaja es que al hacerlo, obtendremos una representacion en xml de todos los subnodos, o bien el texto del nodo.
?node.text
La propiedad Text nos devuelve la siguiente salida :
El anterior ejemplo es sumamente sencillo, solo para entender como se organizan los nodos y como obtener algun texto del archivo XML, sin embargo existen más métodos y propiedades que puedes usar, las detallaremos mas adelante en este articulo.
Entender las rutas de acceso a los nodos
Algo importante que debes comprender antes de trabajar con nodos es como funcionan las rutas de acceso o «paths» para obtener un nodo, casi todo lo que tengas que hacer con un archivo XML tiene que ver con obtener el nodo correcto.
Por ejemplo en el archivo XML solo hay dos niveles, por lo que simplificamos el acceso a los textos del nodo Hijo1 e Hijo2 simplemente escribiendo dos plecas, pero que pasaría si estos los hijos tuvieran un nivel mas de descripción por ejemplo un sub nodo edad.
Se ha creado un sub nodo nombre y otro edad, ahora que pasa si deseo acceder solo a los ementos del nodo Hijo1, ¿cómo debo escribir la ruta de acceso a ese nodo ?
node= loXML.selectSingleNode("//Hijo1")
El resultado al consultar la propiedad text del nodo seria y la edad y el nombre juntos:
Chepe12
A continuacion te dejo una pequeña tabla donde puesde ver las posible rutas y el resultado según se use para nuestro archivo de ejemplo:
selectSingleNode(«//Hijo1»)
Chepe12
selectSingleNode(«//Hijo2»)
Juan7
selectSingleNode(«//Hijo1/Edad»)
12
selectSingleNode(«//Hijo2/Edad»)
7
selectSingleNode(«//Hijo1/Nombre»)
Chepe
selectSingleNode(«//Hijo2/Nombre»)
Juan
La propiedad XML de un node
Si deseas devolver la estructura xml del nodo puedes hacerlo, recuerda que el objetivo de usar XML es que puedas obtener un documento estructurado y no simplemente una cadena de texto, un archivo estructurado te permite un mejor control sobre los datos y cuando se trat ade XML tu puedes definir en el mismo archivo a el documento, de modo que la aplicacion que lo leera no tiene que saber de antemano cual es la estrucutura de dicho archivo.
Por ejempo la propiedad XML del Objeto NODE del ejemplo anterior nos devuelve lo siguiente:
Los anteriore sejemplos sirven bien para un solo nodo, pero si lo que necesito es recorrer todos los nodos de un XML y leer sus valores entonces necesito el objeto NodeList, en el próximo parrafo te explico este objeto.
Recorrer los elementos de un XML en FOXPRO
Si lo que necesitamos es recorrer por medio de una estructura for todos los elementos de un archivo XML en FoxPro, entonces necesitamos recurrir al objeto nodeList.
node= loXML.selectSingleNode("//")
oNodeList=node.childNodes
FOR EACH nde IN oNodeList
?nde.text
ENDFOR
La salida del anterior ejemplo seria como sigue:
Chepe12
Juan7
Tambien puede acceder a un elemento directamente por metio de la propiedad ITEM, por ejemplo si deseo acceder al elemento Hijo1 lo haríamos así:
?oNodeList.item(0).text
Recuerda que en fox las matrices empiezan con 1 pero en este objeto los elementos empiezan en cero 0, por lo que no debes confundirte sobre todo en caso que utilices un bucle «for n=1 to » , en ese caso el ejemplo anterior debería quedar así:
FOR i=1 TO oNodeList.length
?oNodeList.item(i-1).text
ENDFOR
La salida sería exactamente la misma que cuando usamos ForEach, si te fijas bien, verás que le hemos restado uno al indice del bucle FOR esto es por que los elementos en el objeto nodeList, empiezan en cero