Así es la nueva Ley Reguladora del Ejercicio de la Contaduría Pública

lunes, octubre 17th, 2022

El lunes 26 de septiembre de 2022 fue presentada la propuesta de reforma a la Ley Reguladora del Ejercicio de la Contaduría Pública. Contadores y Auditores han esperado por años esta reforma y se espera con ella que muchas de las demandas y expectativas del gremio se cumplan en esta actualización de la Ley que rige la profesión de la Contaduría Pública en El Salvador.

Dentro de los puntos a destacar encontramos cambios significativos en cuanto al número de horas de educación continuada, el marco regulatorio para contadores que en esta reforma contempla la actividad contable, y el régimen sancionatorio por las infracciones a la ley.

A continuación te comparto la reforma con algunos comentarios sobre los cambios sugeridos en relación a la ley vigente (al momento de escribir este artículo.)

Leer Más »


Vue 2, entender lo básico

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.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

cd vue2/
npm install
npm run dev
code .


JavaScript ES2015, Cosas raras

martes, octubre 11th, 2022

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

        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


Configurando un Equipo para programar con Linux

martes, octubre 11th, 2022

Agregar al listado de SUDOERS

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

mkdir /home/usr/Documents/desarrollo

hay 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

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);

?>

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-bcmath

y para el servidor apache instalar

sudo apt -y install libapache2-mod-php

php7.4-intl

Extension Internacional de PHP,

sudo apt install php7.4-intl

DROPBOX

sudo apt install python
sudo wget -O /usr/local/bin/dropbox "https://www.dropbox.com/download?dl=packages/dropbox.py"
sudo chmod +x /usr/local/bin/dropbox
dropbox

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

primero crearmos una carpeta en el google drive

rclone mkdir nombredelremoto:bckremoto

ahora podemos subir todo lo que tenemos ahi

rclone sync /home/usr/Google/ nombredelremoto:bckremoto

si 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/

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

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash

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

https://dev.mysql.com/doc/mysql-apt-repo-quick-guide/en/#apt-repo-fresh-install
sudo dpkg -i mysql-apt-config_0.8.23-1_all.deb 
sudo apt-get update
sudo apt-get install mysql-server
systemctl status mysql

Instalar DBEAVER

https://dbeaver.io/download/
sudo dpkg -i dbeaver-ce_22.2.2_amd64.deb

Ahora es probable que de un problema al momento de conectar a mysql, es necesario buscar estas dos propiedades en driver properties

Instalar PHPMyAdmin

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

sudo mysql -u root -p

Ingresamos con nuestra clave y creamos un nuevo usuario

CREATE USER 'user'@localhost IDENTIFIED BY 'password';
GRANT ALL PRIVILEGES ON *.* TO 'yec'@localhost ;
FLUSH PRIVILEGES ;
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 configuracion

cd /var/www/html
sudo cp phpmyadmin/config.sample.inc.php phpmyadmin/config.inc.php
sudo mkdir /var/www/html/phpmyadmin/tmp
openssl rand -base64 32
sudo nano /var/www/html/phpmyadmin/config.inc.php
$cfg[‘blowfish_secret’] = ‘your-key‘; /* YOU MUST FILL IN THIS FOR COOKIE AUTH! */
Add cute fish bowl key in phpMyADmin Debian 11

Ir al final del archivo y ponerle lo siguiente

$cfg['TempDir'] = '/var/www/html/phpmyadmin/tmp';

Dar permisos al directorio

sudo chown -R www-data:www-data /var/www/html/phpmyadmin
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/


Comandos básicos de GIT

lunes, octubre 10th, 2022

Iniciar un repositorio

git init

Agregar 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.

Configurar GIT con nombre y usuario

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"

Como ver el estado de los archivos

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"

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

ejemplo de clonar el siguiente repositorio

https://github.com/Jerga99/exchangario.git

Git Clone https://github.com/Jerga99/exchangario.git

Subir un repo

Para 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.git

y luego el push

git push -u origin master

Con esto ya se puede ver en linea el push que acabamos de hacer


Vue 3, después de tanto batallar con Angular me paso a este FrameWork

domingo, 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

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

{
  "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 
pagina de inicio de nuestra primera app VUE

A continuación explicaremos como está organizada una app VUE


CSS apuntes básicos

domingo, octubre 9th, 2022

El box-sizing

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

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

Overflow

determina el comportamiento de lo que pasa cuando un elemento contiene mas texto del que puede soportar

visible

el contenido se muestra de todas formas aunque la caja no pueda contenerlo

div {
  overflow: visible;
}

hidden

El contenido que no cabe dentro de la caja, se oculta

div {
  overflow: hidden;
}

scroll

se muestran unas barras de navegación en la caja para poder hacer Scroll al contenido

div {
  overflow: scroll;
}

auto

El navegador decide que hacer y cuando mostrar la barra de scroll

div {
  overflow: auto;
}

overflow-x overflow-y

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 */
}

Float

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.


Uncaught Error: Class ‘ZipArchive’ not found in

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 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:

$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-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


Instalar un nuevo proyecto en Angular 10

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:

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.

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:

Material List

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

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

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 { }

Creando el modelo de la base de datos

Comando para crear el modelo

ng generate class nuevo/user --type=model

importar al componente que queremos usarlo

import {User } from '../nuevo/user.model';

Una vez importado hay que delcararlo dentro de la clase del componente


FoxPro y el DOM XML

miércoles, agosto 5th, 2020

Que es el DOM

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.

The save method serializes the DOM tree.
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.

  1. Arbol del DOM
    1. Elemento Raiz
      1. Elemento Hijo1
        1. Texto del Elemento
      2. Elemento Hijo 2
        1. 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 MSXML3MSXML 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 SP2Se 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.

<ElementoRaiz>
  <Hijo1>Chepe</Hijo1>
  <Hijo2>Juan</Hijo2>
</ElementoRaiz>

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

lcFile="ejemplo.xml"
loXML= CREATEOBJECT('MSXML2.DOMDocument')
loXML.LOAD(lcFile)

Paso 2) Obtener algun nodo

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 :

Chepe Juan 

El anterior ejemplo todo junto queda asi:

lcFile="events.xml"
loXML= CREATEOBJECT('MSXML2.DOMDocument')
loXML.LOAD(lcFile)
node= loXML.selectSingleNode("//")
?node.text

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.

<ElementoRaiz>
<Hijo1> 
   <Nombre>Chepe</Nombre>
   <Edad>12</Edad>
</Hijo1>
<Hijo2>
   <Nombre>Juan</Nombre>
   <Edad>7</Edad>
</Hijo2>
</ElementoRaiz>

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:

node= loXML.selectSingleNode("//")
?node.xml

Salida :

<ElementoRaiz>
	<Hijo1><Nombre>Chepe</Nombre><Edad>12</Edad></Hijo1>
	<Hijo2><Nombre>Juan</Nombre><Edad>7</Edad></Hijo2>
</ElementoRaiz>

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

Chepe12 
Juan7 

Crear un archivo XML con FOXPRO

Próximamente



Redes sociales