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.
El Archivo SSHD_CONFIG
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
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.pub
copiamos la llave y la vamos ir entramos al servidor
en el servidor buscamos este archivo
nano ~/.ssh/authorized_keys
si 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_keys
listo con esto ya podemos ingresar al servidor con el comando ssh con el usuario e IP correspondiente
ssh user@ippublic
Deshabilitar el acceso por contraseña
ahora 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_config
en ese archivo debemos buscar la palabra
PasswordAuthentication yes
y lo ponemos en no
PasswordAuthentication no
ahora reiniciamos el servidor para que los cambien operen
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.
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.)
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.
Privacidad: Los datos que almacenan en software nube no son de tu propiedad, son de la propiedad de la empresa que es dueña del servidor donde se aloja el software nube, la nube es un espacio en los servidores de una empresa que se dedica a alquilar estos espacios.
Seguridad: Toda información en la nube es vulnerable a cualquier ataque de hacker, que pueden robar la información que en ellos se encuentran, por lo que es bien importante tomar medidas de seguridad y contraseñas ultra seguras para evitar que puedan robar nuestra información.
Propiedad de quien son los datos: Al dejar de pagar la mensualidad del software puedes perder toda tu información ya que los propietarios de la información son los dueños del servidor, por lo cual te pueden restringir el acceso a ella en el momento que dejes de pagar.
Costos: Los Software Nube pueden tener un costo infinito, ya que pagas mensualidades de forma recurrente, pagas un alquiler el cual no tiene fin por lo que al final puede costar más que cualquier otro software. Difícilmente un cliente accederá a un pago mensual para que tu como contador, puedas llevar su contabilidad
Conectividad: Dependes totalmente de conectividad a internet, lo cual aumenta tus costos y si la conexión falla por cualquier motivo, te quedas sin acceso al software retrasando los procesos y la productividad.
Arquitectura de datos distribuidos
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.
¿Por qué Contaportable no es Nube?
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.
PASOS PARA LLEVAR TU CONTABILIDAD CENTRALIZADA
Instalar software en computadora del cliente para que pueda usar los módulos administrativos.
Configurar los módulos administrativos a usar por el cliente
Facturación
Gastos
Orden de Compras
Inventario
Cuentas por Pagar y Cobrar
Bancos
Planilla
Capacitar a Cliente en uso del software
Alimentar la información en los módulos administrativos
Generar Backup para enviar información al contador
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
Selecciona la opción de Restaurar Backup, dentro del menú de Administración>Seguridad
Seleccionar el Backup a restaurar
Elegir el tipo de restauración
TIPOS DE RESTAURACIÓN
Todo: Restaura toda la informacion de tu software, contabilidad y toda la información de los módulos administrativos.
PymePro: Restaura la informacion de los modulos administrativo y no la información contable, ESTA OPCIÓN ES LA QUE DEBES UTILIZAR, cuando tu cliente te comparte la informacion de los módulos administrativos para que generes la contabilidad.
Contabilidad: Esta opción solamente restaurará la informacion contable ESTA OPCIÓN SE UTILIZA, cuando lleves la informacion contable a tu cliente.
Una vez ya restaurada la informacion de los módulos administrativos puedes proceder a Contabilizar toda la información, con los siguientes pasos:
Ir al módulo de contabilidad y con el botón de contabilizar.
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.
Conclusión
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.
Al momento de escribir esto ya existe Vue 3, por lo que he decidido instalar también la versión 2 a fin de que pueda comprender los conceptos básicos y partir de ahi para entrarle a a Vue 3
Para instalar lo hago por medio del manejador de paquetes NPM
Como siempre primero debo poner en uso la version de node que deseo usar, esto lo hago con NVM
nvm use v16.17.1
npm init vue@2.2.0
Need to install the following packages:
create-vue@2.2.0
Ok to proceed? (y) y
Vue.js - The Progressive JavaScript Framework
✔ Project name: … vue2
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
En este post tengo planeado ir guardando aquellos aspectos nuevos de JavaScript que me parecen extraños
Transpiler
El concepto de transpiler existe por la gran actualización que se eta teniendo del lenguaje Javascript, ya que cada año surge una nueva especificación se vuelve necesario compilar o mas bien transpilar a una versión que sea reconocida por los navegadores viejos y asi despreocuparnos de los problemas de compatibildad
un buen transpiler es https://babeljs.io/
Setencia let
La sentencia let para declarar variables lo hace en el contexto que se usa, por ejemplo si tu declaras un variable con la palabra var entonces esas variables en realidad se declaran al inicio del archivo js, talvez no quieras que esto suceda
function getAlgoNombre(algo) {
if (algo.isalgo) {
var nombre = 'nombre ' + algo.name;
return nombre;
}
return algo.nombre;
}
el codigo anterior es equivalente a lo siguiente
function getAlgoNombre(pony) {
var nombre;
if (algo.isalgo) {
var nombre = 'nombre ' + algo.name;
return nombre;
}
// nombre tambien es accesible aqui
return algo.nombre;
}
con let se declara cabal donde se usa
Constants
las constantes se introdujeron en la versión ES2015, la ventaja de una constante es que se mantiene inalterable en todo el código
const algoobjects = 6;
La sentencia anterior no puede se reasignada
También se pueden asignar un objeto una constante, se puede declarar y luego ser asiganada
Al instalar Linux lo primero que necesitaremos es poder dar permisos de instalación al usuario que estamos utilizando, lo que quiere decir agregarlo al listado de sudoers del sistema
/sbin/usermod -aG sudo yec
Evitar que debian busque repositorios en el media CDROM
es probable que te salga este error cuando tengas que instalar
please insert the disc labeled
'Debian GNU/Linux 7.0.0 _Wheezy_ - Official amd64 CD Binary-1 20130504-14:44'
in the drive '/media/cdrom/' and press enter
si ese es el caso debes comentar la búsqueda en el cd rom de repositorios, esto se hace desde el archivo
sudo nano /etc/apt/sources.list
dentro del archivo comentar lo siguiente
#deb cdrom:[Debian GNU/Linux 11.5.0 _Bullseye_ - Official amd64 DVD Binary-1 20>
con esto el cdrom de debian dejará de ser el primero en la lista de busqueda de repositorios
Configurar Samba
sudo apt install samba smbclient cifs-utils
Una vez instaladas las dependencias de samba hay que configurar en el archivo
sudo nano /etc/samba/smb.conf
cambiar el workgroup
workgroup = NUEVOGRUPO
ahora agregar la carpeta compartida de la siguiente forma
[public]
comment = PUBLIC
path = /home/usr/Public
writeble = yes
guest ok= yes
guest only = yes
force create mode =775
force directory mode=775
Herramientas de programación
Visual Studio Code
se baja y se instala de la pagina
Apache
sudo apt update
Instalación de apache
sudo apt install apache2
checkar que funcione
sudo systemctl status apache2
Crear un virtual Host Apache para pruebas
lo primero será crear una copia del archivo de configuración de apache, con el siguiente comando
cd /etc/apache2/sites-available/
sudo cp 000-default.conf desarrollo.com.conf
sudo nano desarrollo.com.conf
<VirtualHost *:80>
# The SeverName directive sets the request scheme, hostname and port that
# the server uses to identify itself. This is used when creating
# redirection URLs. In the context of virtual hosts, the ServerName
# specifies what hostname must appear in the request's Host: header to
# match this virtual host. For the default virtual host (this file) this
# value is not decisive as it is used as a last resort host regardless.
# However, you must set it for any further virtual host explicitly.
ServerName desarrollo.com
ServerAlias www.desarrollo.com
ServerAdmin webmaster@localhost
DocumentRoot /home/usr/Documents/desarrollo
<Directory "/home/usr/Documents/desarrollo">
AllowOverride All
Require all granted
</Directory>
# Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
# error, crit, alert, emerg.
# It is also possible to configure the loglevel for particular
# modules, e.g.
#LogLevel info ssl:warn
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
# For most configuration files from conf-available/, which are
# enabled or disabled at a global level, it is possible to
# include a line for only one particular virtual host. For example the
# following line enables the CGI configuration for this host only
# after it has been globally disabled with "a2disconf".
#Include conf-available/serve-cgi-bin.conf
</VirtualHost>
# vim: syntax=apache ts=4 sw=4 sts=4 sr noet
luego debemos poner en uso el virtual host
sudo a2ensite desarrollo.com.conf
ahora debemos reiniciar el apache
sudo systemctl restart apache2
esto lo pasará a la siguiente direccion /etc/apache2/sites-enabled
Crear el directorio
Ahora debemos crear el directorio de pruebas en la carpeta documentos del usuario
ahora debemos crear un index.html para que el directorio muestre algo
Configurar el archivo host
Para que todo funcione correctamente debemos configurar el archivo host
sudo nano /etc/hosts
luego debemos añadir lo siguiente para que redireccione correctamente
192.168.0.4 desarrollo.com
CURL
para descargar desde consola
sudo apt install curl
PHP
Instalar PHP
sudo apt update && sudo apt upgrade
sudo apt -y install php php-common
Probando si ya tenemos php
php -v
ahora que ya tenemos php sale asi
Para comprobar la configuración del php creamos un archivo con lo siguiente
<?php
// Muestra toda la información, por defecto INFO_ALL
phpinfo();
// Muestra solamente la información de los módulos.
// phpinfo(8) hace exactamente lo mismo.
phpinfo(INFO_MODULES);
?>
Tiene una variedad de comandos en linea, lo que se ha instalado con lo anterior es la CLI de dropbox para usar desde consola, al ejecutar dropbox nos desplegará la lista de comandos
ote: use dropbox help <command> to view usage for a specific command.
autostart automatically start Dropbox at login
exclude ignores/excludes a directory from syncing
filestatus get current sync status of one or more files
help provide help
lansync enables or disables LAN sync
ls list directory contents with current sync status
proxy set proxy settings for Dropbox
puburl get public url of a file in your Dropbox's public folder
running return whether Dropbox is running
sharelink get a shared link for a file in your Dropbox
start start dropboxd
status get current status of the dropboxd
stop stop dropboxd
throttle set bandwidth limits for Dropbox
update download latest version of Dropbox
version print version information for Dropbox
Es necesario instalar el daemon de dropbox y actualizarlo, para ello ejecutamos el siguiente comando
dropbox update
ahora pedira instalar el servicio de dropbox
para listar los directorios de la cuenta de dropbox hacer lo siguiente
dropbox ls
una vez se instala el servicio empezará a sincronizar en la carpeta de dropbox /home/usr/Dropbox
para ver como va la sincronización podemos usar el siguiente comando
dropbox status
Rclone
Bajar de aquí https://rclone.org/
sudo dpkg -i rclone-v1.59.2-linux-amd64.deb
rclone config
para configurar el rclone y usarlo con google debemos crear una credenciales de api de google, para ello debemos ir a la pa
https://console.cloud.google.com/apis/
debemos crear un nuevo proyecto o bien seleccionar uno existente, yo lo hice en uno ya existente
y ahora debemos ir a la parte izquierda donde dice credenciales, lo que hay que hacer es generar una nueva token para ingresarlo en el Rclone y asi que se pueda conectar a mi cuenta de google
una vez en credenciales podemos seleccionar lo siguiente
seleccionar crear credenciales
seleccionamos la opcion de ID de cliente de OAuth
Seleccionar App de escritorio
poner un nombre y crear
ahi generar la clave secreta y el id de cliente para Rclone
Volviendo a Rclone ahi seleccionar la opción de google
ahora ingresar el id cliente que generamos en cloud engine
a continuación Rclone nos pedirá si deseamos la autoconfiguración y decimos que si
ahí debemos autorizar nuestra propia y seleccionar la cuenta con la que queremos logearnos es decir el correo de gmail donde está los archivos que deseamos de Drive
recuerda que esta autenticación expira en una hora
ahora ya podemos enviar comando que nos devuelvan por ejemplo el listado de archivos de la cuenta que he seleccionado
rclone lsd nombredelremoto:
mas informacion sobre comandos de Rclone y ayuda aqui https://www.tecmint.com/rclone-sync-files-from-cloud-storage/
ahora quier crear un directorio en google drive para guardar la informacion de mi compu
ADVERTENCIA: La sincronización de Rclone no es perfecta no resuelve conflictos ni tiene cuidado de lo que baja o sube, simplemente actualiza todo, por lo que debes ser cuidadoso, para efectos prácticos es lo equivalente a copiar y sustituir en el remoto o en el local dependiendo de la operación que este haciendo
mas información https://rclone.org/docs/
Instalar Node JS y NPM
sudo apt install nodejs npm -y
Instalar NVM
Recomiendo instalar nvm ya que permite tener a nuestra disposición las versiones de node que necesitemos simplemente con un comando, puede ser útil si necesitamos una versión más reciente o una mas antigua por cuestiones de compatibilidad de paquetes
Podríamos reiniciar el sistema operativo para que nvm quede funcional pero existe un comando que nos recarga la configuración del perfil de nuestro usuario
source ~/.profile
Comandos de NVM
Instalar la versión más reciente de node
nvm install node
Instalar una versión en específico
nvm install 14.7.0
listar las versiones disponibles remotamente
nvm ls-remote
poner en uso la versión default
nvm use node
Instalar Mysql
Descargar de aqui https://dev.mysql.com/doc/mysql-apt-repo-quick-guide/en/#apt-repo-fresh-install las claves con los repositorios de instalación e instalarlos
Alias /phpmyadmin /var/www/html/phpmyadmin
<Directory /var/www/html/phpmyadmin/>
AddDefaultCharset UTF-8
<IfModule mod_authz_core.c>
<RequireAny>
Require all granted
</RequireAny>
</IfModule>
</Directory>
<Directory /var/www/html/phpmyadmin/setup/>
<IfModule mod_authz_core.c>
<RequireAny>
Require all granted
</RequireAny>
</IfModule>
</Directory>
sudo a2enconf phpmyadmin.conf
sudo systemctl restart apache2
http://127.0.0.1/phpmyadmin/
Instalar COMPOSER
Para instalar composer necesitamos ya tener disponible php cli en nuestro sistema, bajar el instalador de composer de aquí y luego correo el siguiente comando, al bajar tendremos cualquiere de los dos archivos siguientes
installer
composer-setup.php
para instalar globalmente los dejaremos en el directorio bin
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
Después de tanto batallar con Angular aprendiendo nuevos conceptos y tratando de mantenerme al dia con cada actualización, sustituyedo componentes que quedan obsoletos y buscando otros compatibles, he decidio dejar atrás Angular, debo decir que el FrameWork me ha superado, me doy por vencido y me paso a algo mas sencillo pero no menos potente como lo es VUE
Como instalar VUE
Lo primero que haré es instalarlo, para ello y como estoy en mi computadora con Sistema Operativo DEBIAN debo recurrir NVM primeramente debo poner en uso el paquete de NPM que quiero utilizar, ya que lo necesito para instalar VUE
nvm use v16.17.1
A la fecha de escritura de este post la versión 16.17.1 es la actual, por eso l seleccioné para instalar VUE
npm init vue@latest
A continuación nos preguntará el nombre del proyecto y una serie de configuración
✔ Project name: … prueba ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for state management? … No / Yes ✔ Add Vitest for Unit Testing? … No / Yes ✔ Add Cypress for both Unit and End-to-End testing? … No / Yes ✔ Add ESLint for code quality? … No / Yes
VUE creará una subcarpeta con el codigo base necesario para correr nuestra app y ademas el package.json que contiene las dependencias de nuestros proyecto, pero todavía falta instalarlas
Si miramos el archivo Package.json nos pones la dependencia principal VUE 3.2.38, versión vigente al momento de escribir
Sirve para que el width de una caja se pueda mantener constante a su valor definido por el width
El Display
El display determina cómo se agrupan o presentan los elementos html dentro de la página, y existen dos principales que se pueden usar
Display Block
Block: usa todo el ancho disponible dentro del marco
Ejemplos de elementos que tienen este comportamiento
<div>
<h1> <h6>
<p>
<form>
<header>
<footer>
<section>
Display Inline
Inline: muestra todo junto
Ejemplos de elementos que tienen inline
<span>
<a>
<img>
Cambiando el Display por default
Se puede cambiar el display por default de un elemento cambiandolo con CSS por ejemplo mostrar los elementos de una lista en línea y no por bloque .
li {
display: inline;
}
Display None
También existe el valor none que oculta el elemento y lo quita del html en un efecto de remove
li {
display: none;
}
visibility:hidden
visibility:hidden por el contrario no lo remueve solo lo hace no visible, dejando siempre ocupado el espacio que tiene originalmente
Centrar horizontalmente
Si se desea centrar horizontalmente se pueden usar dos combinaciones sencillas para lograr el efecto deseado: Max-Width y Margin:Auto
Max-Width
Este sirve para que los displays alcancen un máximo de ancho y si la ventana se reduce mas allá de ese max-width entonces se ajusta automáticamente.
Margin : Auto
Si se deja el Margin como automática entonces el navegador agregar espacios iguales a la derecha y a la izquierda, centrando el elemento dentro de la pagina
Ejemplo de uso :
div.ex2 {
max-width: 500px;
margin: auto;
}
Position
La posición de un elemento está determinado por el orden en que se declara dentro del documento HTML, por ejemplo :
<div>Div uno </div> <div>Div dos </div> <div>Div tres </div>
Sin embargo a veces necesitaremos definir con exactitud la posición de un elemento sin importar el orden en el que se ha declarado, para ello podemos usar la propiedad Position.
La propiedad position tiene 4 estados: static, relative, fixed, absolute, sticky
Static
Esta es la posición por default de los elementos y no se ve afectada de nnguna manera por los posibles valores
Left
Top
Right
Bottom
Relative
La posición relativa de un elemento, se define con las propiedades left top calculadas sobre la base de la posición relativa del elemento: cuando digo posición relativa me refiero a la posición que ocupa por orden de declaración por ejemplo si un elemento ocupa la segunda posición y establecemos su Top a 50 px, entonces su top será
height del div1 + 50px
Fixed
Esta es la más fácil de las posiciones ya que se mantiene fija con respecto a la pantalla. sirve para mostrar un mensaje fijo en la pantalla, y que se mantenga visible mientras hacemos scroll
Absolute
Como su nombre lo indica esta posición es absoluta con respecto al «Parent» que lo contiene, si el elemento esta en el body entonces se hace con respecto al «viewport » de la pantalla
Algo que decir es que si el valor que se ocupa es bottom entonces se posiciona con respecto al viewport de la pantalla.
Sticky
La posición stickcky se pega al top de la pantalla cuando se alcanza
Z-index
determina el stack position de un elemento, así se pueden mostrar texto encima de una imagen
La propiedad float puede servir para decirle a un elemento que se mueva a la derecha o a la izquierda, según lo necesitemos, una forma de entender esta propiedad es que los elementos se posicionan según los declaramos en el DOM, si hay dos elementos que ocupan una misma línea estos se ponen uno detrás del otro en el orden que se declararon.
Los posibles valores son :
left
right
none
inherit
Float permite a un elemento declarado previo al que sigue «Flotar» a la derecha o viceversa
img {
float: right;
text-align:right;
}
<p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.<img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-left:15px;">
</p>
Float es como para agrupar los elementos en una misma linea y permite que cuando la pantalla se haga más pequeña se apilan uno tras otro
Conclusión
CSS es para mi, el lenguaje (si se me permite catalogarlo como tal) mas dificil de aprender, iré agregando más funciones a medida las vaya aprendiendo y entendiendo.