lunes, octubre 2nd, 2023
Al usar el archivo .htaccess aparece ell siguiente error:
500 Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator at webmaster@localhost to inform them of the time this error occurred, and the actions you performed just before this error.
More information about this error may be available in the server error log.El error se puede deber a muchas razones, sin embargo, si estas usando un archivo .htaccess pasa por que el módulo rewrite debe ser explícitamente activado en el servidor Apache2 siempre que lo estes ejecutando dentro de un servidor Debian, ya que por default viene desactivado.
Para activar el módulo rewrite dentro de Debian simplemente debes ejecutar el siguiente comando:
sudo a2enmod rewrite
con esto debes reiniciar el servidor Apache2 con el comando que te dejo a continuación:
sudo systemctl reload apache2
Si deseas desactivar el módulo rewrite debes ejecutar el siguiente comando
sudo a2dismod rewriteSi el error no desaparece al hacer con la configuración anterior entonces es probable que el archivo .htaccess no este correctamente configurado, revisa que este correctamente configurado, te dejo un ejemplo:
domingo, marzo 12th, 2023
¿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é.
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.
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.
DEBES DESACTIVAR ESE CHEQUESITO. (en español pueda que diga algo así como: «Dejar que Windows administre mi impresor por default»)
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
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
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.
martes, octubre 11th, 2022
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.1npm init vue@2.2.0Need 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
cd vue2/
npm installnpm run devcode .martes, octubre 11th, 2022
En este post tengo planeado ir guardando aquellos aspectos nuevos de JavaScript que me parecen extraños
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/
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
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
const objeto={};
objeto.nombre="nuevo nombre";
console.log(objeto.nombre);
y tambien con los arrays
const arrayan=[];
arrayan.push("uno","dos");
console.log(arrayan[1]);
Es genial por que permite definir dinamicamente los valores de un objeto y sus propiedades
martes, octubre 11th, 2022
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 yecEl archivo SUDOERS se encuentre normalmente en el directorio /etc y se auxilia del archivo /etc/sudoers.d/
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 enterSi 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.listDentro 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 búsqueda de repositorios
sudo apt install samba smbclient cifs-utilsUna 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
Visual Studio Code
se baja y se instala de la pagina
sudo apt updateInstalación de apache
sudo apt install apache2checkar que funcione
sudo systemctl status apache2
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.confahora debemos reiniciar el apache
sudo systemctl restart apache2esto lo pasará a la siguiente direccion /etc/apache2/sites-enabled
Ahora debemos crear el directorio de pruebas en la carpeta documentos del usuario
mkdir /home/usr/Documents/desarrollohay que dar permisos correctos
sudo chown -R usr:www-data /home/usr/Documents/desarrollo/ahora los permisos correctos
sudo chmod 770 /home/usr/Documents/desarrollo/ahora debemos crear un index.html para que el directorio muestre algo
Para que todo funcione correctamente debemos configurar el archivo host
sudo nano /etc/hostsluego debemos añadir lo siguiente para que redireccione correctamente
192.168.0.4 desarrollo.compara descargar desde consola
sudo apt install curl
Instalar PHP
sudo apt update && sudo apt upgradesudo 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);
?>
Todavía falta instalar los modulos y addons
sudo apt -y install php-cli php-fpm php-json php-pdo php-mysql php-zip php-gd php-mbstring php-curl php-xml php-pear php-bcmathy para el servidor apache instalar
sudo apt -y install libapache2-mod-phpExtension Internacional de PHP,
sudo apt install php7.4-intlsudo apt install pythonsudo wget -O /usr/local/bin/dropbox "https://www.dropbox.com/download?dl=packages/dropbox.py"sudo chmod +x /usr/local/bin/dropboxdropboxTiene 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 lsuna 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 statusBajar de aquí https://rclone.org/
sudo dpkg -i rclone-v1.59.2-linux-amd64.debrclone configpara 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
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
primero crearmos una carpeta en el google drive
rclone mkdir nombredelremoto:bckremotoahora podemos subir todo lo que tenemos ahi
rclone sync /home/usr/Google/ nombredelremoto:bckremotosi quisiera descargar lo haria al reves
rclone nombredelremoto:bckremoto sync /home/usr/Google/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/
sudo apt install nodejs npm -yRecomiendo 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
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bashPodrí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 ~/.profileComandos de NVM
Instalar la versión más reciente de node
nvm install nodeInstalar una versión en específico
nvm install 14.7.0listar las versiones disponibles remotamente
nvm ls-remoteponer en uso la versión default
nvm use nodeDescargar 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
https://dev.mysql.com/doc/mysql-apt-repo-quick-guide/en/#apt-repo-fresh-installsudo dpkg -i mysql-apt-config_0.8.23-1_all.deb sudo apt-get updatesudo apt-get install mysql-serversystemctl status mysql
https://dbeaver.io/download/sudo dpkg -i dbeaver-ce_22.2.2_amd64.debAhora es probable que de un problema al momento de conectar a mysql, es necesario buscar estas dos propiedades en driver properties
Instalar todo los modulos de php necesarios
sudo apt -y install wget php php-cgi php-mysqli php-pear php-mbstring libapache2-mod-php php-common php-phpseclib php-mysql
Crear un usuario de MYSQL para PHPMYADMIN, en las últimas versiones ya no es posible utilizar el usuario root, por lo que hay que crear un usuario exclusivo para el PHPMYADMIN:
sudo mysql -u root -pIngresamos con nuestra clave y creamos un nuevo usuario
CREATE USER 'user4phpmyadmin'@localhost IDENTIFIED BY 'password';GRANT ALL PRIVILEGES ON *.* TO 'user4phpmyadmin'@localhost ;FLUSH PRIVILEGES ;
Exit;Deacargar el paquete de PHPMYADMIN desde la siguiente ubicación, al momento de escribir este post esta es la ubicación:
wget https://www.phpmyadmin.net/downloads/phpMyAdmin-latest-all-languages.tar.gz
sudo tar xvf phpMyAdmin-latest-all-languages.tar.gz
sudo mv phpMyAdmin-*-all-languages/ /var/www/html/phpmyadmin
Ahora debemos crear la clave secreta y el archivo de configuración, esta clave de configuración sirve para que PHPMYADMIN la utilize para cifrar data sensible del servidor.
Este archivo no es para utilizarse en el ingreso a PHPMYADMIN sino para que si alguien tiene acceso al archivo de las contraseñas de PHPMYADMIN no podrá descifrar las claves ya que estarán cifradas.
Para crear esta clave debemos hacer lo siguiente:
Ir al directorio donde está la carpeta de PHPMYADMIN, yo lo tengo en la carpeta siguiente:
cd /var/www/html
Creamos una copia del archivo que viene de ejemplo para trabajarlo sudo cp phpmyadmin/config.sample.inc.php phpmyadmin/config.inc.php
Creamos un directorio tmp para que PHPMYADMIN lo utilice en sus procesos
sudo mkdir /var/www/html/phpmyadmin/tmp
Se genera la clave usando para ello openssl, que nos genere una clave fuerte y aleatoria:
openssl rand -base64 32
Vamos a modificar el archivo de configuración para agregar la clave en el directorio
sudo nano /var/www/html/phpmyadmin/config.inc.php$cfg[‘blowfish_secret’] = ‘your-key‘; /* YOU MUST FILL IN THIS FOR COOKIE AUTH! */
Ir al final del archivo y ponerle lo siguiente
$cfg['TempDir'] = '/var/www/html/phpmyadmin/tmp';
Dar permisos correctos, simplemente hacer propietario al usuario www-data
sudo chown -R www-data:www-data /var/www/html/phpmyadmin
Configurar servidor Virtual para entrar
sudo nano /etc/apache2/conf-available/phpmyadmin.conf
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/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
para instalar globalmente los dejaremos en el directorio bin
sudo php installer --install-dir=/usr/local/bin --filename=composerAl terminar ese comando ya puede correr el siguiente
composer Mostrará lo siguiente
lunes, octubre 10th, 2022
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.
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.
sudo apt update
sudo apt install git
git --version
Iniciar un repositorio
git initAgregar los archivos que se han cambiado al working tree
git add .Una vez añadidos al staging area se debe hacer un commit
git commit -m "este es mi primer commit"Ese comando permite enviar los archivos a una especie de base de datos donde puedes colocar los archivos cuyo estado queremos siempre memorizar.
Asi es como se configura el usuario y correo
git config --global user.name "Tu nombre aquí"
git config --global user.email "tu_email_aquí@example.com"
Recordamos los pasos para añadir a GIT
git init
git add .
git status 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"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
se clona con la dirección https o bien con el github-cli pero nosotros lo haremos siempre con la url
ejemplo de clonar el siguiente repositorio
https://github.com/Jerga99/exchangario.git
Git Clone https://github.com/Jerga99/exchangario.gitPara poder subir la información a un repo debemos previamente crear el repo en la web
 | estos son los comandos que da GItHub |
 | echo «# newrepo» >> README.md git init git add README.md git commit -m «first commit» git branch -M main git remote add origin https://github.com/YECAPP/reponew.git git push -u origin main |
Si deseo subir al repo creado debo agregar el repositorio remoto y luego pushear
git remote add origin https://github.com/YECAPP/newrepo.gity luego el push
git push -u origin masterCon esto ya se puede ver en linea el push que acabamos de hacer
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.
Instalamos según la documentación oficial
type -p curl >/dev/null || (sudo apt update && sudo apt install curl -y)
El comando anterior verifica si no esta instalado curl y sino lo esta, lo instala para que podamos ejecutar el comando que sigue, que es :
curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpgEste 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.
sudo chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg
echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null
sudo apt update
sudo apt install gh -y
El comando anterior completa la instalación
Hacer que Github no pida a cada rato las credenciales
Ahora que ya tenemos el Github Cli ya podemos guardar las credenciales para que no las pida a cada rato con el comando
gh auth logindomingo, octubre 9th, 2022
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
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.1A 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@latestA 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
{
"name": "prueba2",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 4173"
},
"dependencies": {
"vue": "^3.2.38"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.0.3",
"vite": "^3.0.9"
}
}
cd prueba después de movernos al subdirectorio hacemos los siguientes comandos
npm install con esto se descargarán todos los paquetes contenidos en el package.json y luego ya podemos iniciar la app
npm run dev 
A continuación explicaremos como está organizada una app VUE
domingo, octubre 9th, 2022
Sirve para que el width de una caja se pueda mantener constante a su valor definido por el width
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
Block : usa todo el ancho disponible dentro del marco
Ejemplos de elementos que tienen este comportamiento
Inline: muestra todo junto
Ejemplos de elementos que tienen inline
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;
}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 por el contrario no lo remueve solo lo hace no visible, dejando siempre ocupado el espacio que tiene originalmente
Si se desea centrar horizontalmente se pueden usar dos combinaciones sencillas para lograr el efecto deseado: Max-Width y Margin:Auto
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.
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;
}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
Esta es la posición por default de los elementos y no se ve afectada de nnguna manera por los posibles valores
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
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
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.
La posición stickcky se pega al top de la pantalla cuando se alcanza
determina el stack position de un elemento, así se pueden mostrar texto encima de una imagen
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}determina el comportamiento de lo que pasa cuando un elemento contiene mas texto del que puede soportar
el contenido se muestra de todas formas aunque la caja no pueda contenerlo
div {
overflow: visible;
}El contenido que no cabe dentro de la caja, se oculta
div {
overflow: hidden;
}se muestran unas barras de navegación en la caja para poder hacer Scroll al contenido
div {
overflow: scroll;
}El navegador decide que hacer y cuando mostrar la barra de scroll
div {
overflow: auto;
}Con estas propiedades se determina cuando mostrar la barra de navegación en el eje x o en el eje y
div {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}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 :
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
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.
martes, septiembre 14th, 2021
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 inEl 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:
$writer = IOFactory::createWriter($this->sp, 'Xlsx');
$writer->save('php://output');
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-zipAlgunos 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 restartCon esto quedo solucionado, y pude generar el reporte en excel que estaba necesitando
lunes, septiembre 21st, 2020
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:
Crear un nuevo proyecto con el siguiene comando
ng new NuevoProyectoAl 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
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 versionSi 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.
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 --saveAl terminar debes tener algo como la siguiente imagen
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/materialA 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.
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 )
Tendremos que ir primeramente al app.module.ts y luego agregar la importación del componente.
import { MatSliderModule } from '@angular/material/slider';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatSliderModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
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 )
<mat-slider min=»1″ max=»100″ step=»1″ value=»1″></mat-slider>
Existen más componentes que puedes agregar, no solo el Slider, a continuación te dejo unos cuantos componentes:
Agregando otros componentes de Angular Material
import {MatListModule} from '@angular/material/list';Se agrega ahora los list del material al archivo app.component.html
<mat-list>
<mat-list-item> Pepper </mat-list-item>
<mat-list-item> Salt </mat-list-item>
<mat-list-item> Paprika </mat-list-item>
</mat-list>OJO: siempre hay que añadir la sentencia de importación en el module.ts
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>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
firebase: {
apiKey: "ajhajhjshdjshdjshdjshdjhsj",
authDomain: "tubase-sv34.firebaseapp.com",
databaseURL: "https://tubase-sv34.firebaseio.com",
projectId: "tubase-sv34",
storageBucket: "tubase-sv34.appspot.com",
messagingSenderId: "s2736726372",
appId: "1:s2736726372:web:s2736726372",
measurementId: "F_HHDH73"
}El archivo environment.ts se verá como el que sigue
export const environment = {
production: false,
firebase: {
apiKey: "ajhajhjshdjshdjshdjshdjhsj",
authDomain: "tubase-sv34.firebaseapp.com",
databaseURL: "https://tubase-sv34.firebaseio.com",
projectId: "tubase-sv34",
storageBucket: "tubase-sv34.appspot.com",
messagingSenderId: "s2736726372",
appId: "1:s2736726372:web:s2736726372",
measurementId: "F_HHDH73"
}
};
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:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireAnalyticsModule,
AngularFirestoreModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Comando para crear el modelo
ng generate class nuevo/user --type=modelimportar al componente que queremos usarlo
import {User } from '../nuevo/user.model';
Una vez importado hay que delcararlo dentro de la clase del componente
