miércoles, octubre 26th, 2022
Para controlar nuestros servidores en la nube linus en la nube podemos hacerlo de dos formas, usando contraseña y usuario y por medio de una clave publica, con esta última no nos pedirá clave, ademas de ser práctico es mucho más seguro usar el método de la llave pública, por lo que te explicaré como como configurarlo.
En este archivo se puede configurar si el acceso se hace por medio de contraseña o con llave pública, con esta ultima creamos una llave en nuestro equipo local y luego debemos subirla a nuestro servidor lo que nos permite logearnos sin ingresar contraseña
Paso uno en nuestro equipo local generar una nueva clave, sustituimos la que existe en caso que lo pida y omitimos poner contraseña, si ponemos contraseña cada vez que usemos la llave pública nos pedirá esa contraseña
ssh-keygen
/home/username/.ssh/id_rsa already exists.
Overwrite (y/n)?generará algo como lo siguiente
Your identification has been saved in /home/username/.ssh/id_rsa.
Your public key has been saved in /home/username/.ssh/id_rsa.pub.
The key fingerprint is:
a9:49:EX:AM:PL:E3:3e:a9:de:4e:77:11:58:b6:90:26 username@203.0.113.0
The key's randomart image is:
+--[ RSA 2048]----+
| ..o |
| E o= . |
| o. o |
| .. |
| ..S |
| o o. |
| =o.+. |
|. =++.. |
|o=++. |
+-----------------+El archivo que contiene la llave publica está en la maquina local, debemos copiar esa llave y pegarla en el servidor de la nube al que nos deseamos conectar
cat ~/.ssh/id_rsa.pubcopiamos la llave y la vamos ir entramos al servidor
en el servidor buscamos este archivo
nano ~/.ssh/authorized_keyssi el archivo no existe podemos crearlo, este archivo será el que se consultará cada que ingrese al servidor, por medio del usuario actual
pegamos dentro del archivo la llave que copiamos al portapapeles y vamos a dar permisos a ese archivo
chmod 700 ~/.ssh
chmor 600 ~/.ssh/authorized_keyslisto con esto ya podemos ingresar al servidor con el comando ssh con el usuario e IP correspondiente
ssh user@ippublicahora que ya podemos ingresar sin contraseña hay que deshabilitar el acceso por contraseña esto mejora la seguridad
hay que ir al archivo
vi /etc/ssh/sshd_configen ese archivo debemos buscar la palabra
PasswordAuthentication yes
y lo ponemos en no
PasswordAuthentication noahora reiniciamos el servidor para que los cambien operen
reboot 
lunes, octubre 17th, 2022
En agosto de 2022 fue reformada la LFE (LEY de FIRMA ELECTRÓNICA), la reforma faculta a las entidades públicas para que puedan convertirse en certificadores de firma electrónica.
Es importante aclarar que le LFE todavía no llega a la Ley del Registro Notarial, los abogados y notarios se encuentran a la espera de una resolución de la Corte Suprema de Justicia que pudiera igualar el estatus de la firma electrónica al de la firma autografiada en la celebración de contratos públicos.
Leer Más »
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 »
lunes, octubre 17th, 2022
Para contar con una contabilidad distribuida regularmente se cuenta con un software nube, en el cual pueden acceder los diferentes usuarios a ingresar la información de su área correspondiente; sin embargo los software nube tienen algunas desventajas que muy pocos conocemos.
La arquitectura de datos distribuidos es tener información en varias computadoras, la cual se va reutilizando para fines contables, es decir que el Software Contaportable se pueda tener instalado en varias computadoras, o las computadoras necesarias.
Desde sus inicios Contaportable está enfocado a brindar una herramienta a los contadores, y según la económica y la realidad del país, difícilmente un contador asumirá el costo de tener información en la nube de sus clientes, por lo que se vuelve insostenible estar pagando una mensualidad; con el propósito de facilitar a los contadores esta herramienta es desarrollada con tecnología de Portabilidad que nos permitirá compartir la información solamente con las personas que necesitamos compartirla, sin tener los riesgos que conlleva tener la información en una nube.
El objetivo principal de una contabilidad centralizada es evitar la doble digitación y el doble trabajo, la información que pueden digitar tus clientes en un software es la misma información que puedes utilizar para la contabilidad. Tus clientes pueden utilizar el software para controlar o administrar su negocio con informes administrativos como los siguientes:
Principalmente el software debería de ser instalado en la empresa de tu cliente, y utilizar las funciones de los diferentes módulos administrativos, por ejemplo, si tu cliente utiliza el software Contaportable para facturar, podrías utilizar dicha información para generar los libros de IVA, evitando la doble digitalización. Así también podría ingresar las compras hacer la entrega de Queda a Proveedores para manejar sus cuentas por pagar etc.
Así evitamos retirar documentos de tus clientes, ya que ellos mismos digitaron la información en el software, y podemos compartir la información sin necesidad de un servidor centralizado sin exponer tu información en la web.
Cuando instalas contaportable en la computadora del cliente, se crea una carpeta en Documentos llamada Contaportable y dentro de ella se almacenan todas las carpetas de las instalaciones o empresas que tengas instaladas en esa computadora.
Descarga Software para Contabilidad Centralizada
El Backup o respaldo generado por el sistema es bastante liviano aun cuando se tenga bastante información, este puede ser compartido incluso por whatsapp o correo electrónico.
Una vez que ya cuentes con el Backup, ahora tienes que restaurar la copia en tu sistema contaportable para posteriormente contabilizar los movimientos.
6. Restaurar el Backup
Una vez ya restaurada la informacion de los módulos administrativos puedes proceder a Contabilizar toda la información, con los siguientes pasos:
2. Seleccionar el periodo a contabilizar y cada documento para contabilizar.
3. Seleccionar los documentos específicos a contabilizar o seleccionar todos para ser contabilizados.
4. Posteriormente puedes revisar las partidas generadas en el botón de Partidas y consultar tus reportes contables.
Si deseas un software nube y tu presupuesto lo permite no lo dudes, es la mejor opción, recuerda siempre que los datos que almacenes en el software nube serán de la empresa que presta el servicio, por lo que en el momento que dejes de pagar el servicio, también dejarás de tener acceso a tus datos.
Si usas un software instalable localmente los datos si son tuyos pero si ese software no es portable, estarás limitado a usarlo unicamente en la computadora para la cual compraste esa licencia lo cual es una gran limitante.
Por otra parte existe la posibilidad de una tercera opción: CONTAPORTABLE ya que es portable lo puedes mover de computadora y usar en varias computadoras y por varios usuarios sin tener que pagar por cada uno de ellos, los datos son tuyos por que están en tu computadora y una vez que lo adquieres la licencia es tuya de por vida.
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 yeces 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 busqueda 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 mysqlInstalar DBEAVER
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
sudo mysql -u root -pIngresamos 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 32sudo 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 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/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
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
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
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.