dilluns, 11 d’abril del 2022

Topics html5



<!DOCTYPE html> 

// Doctype es sumament important per a que els navegadors
// interpretiguen com a codi actual la pagina web



<h1>

// existixen 6 tipos de headers <h1...h6>
// Estes nomes han de tindre tituls i subtituls de seccions
// Aquesta informacio es indexada per els buscadors

<h1> Soc un titul</h1>


<p>

// per a fer punt i a part a un parraf lo correcte es afegir
// un altre parraf.


<p> Hola don pepito </p>.
<p> Hola don Jose </p>


<hr> 

// Genera un separador com una linea negra


<!-- Comentaris -->

// Comenta texte o informacio, es multilina.
// El contingut dels comentaris es pot revisar desde la consola
// de inspeccio de chrome, mozilla, etc.


<span>

// serveix per a referenciar texte dins de altres etiquetes.
// span indexa informacio als buscadors.
// Podem remarcar visualment sempre podem afegirli un
// primer style:

<p>

Hola mon que tal, aqui tenim un

<span style="color:blue"> Misatge remarcat <span>

Per a que els indexadors de informaico ho troben millor

</p>


<br> 

// Genera un salt de linea, aquest pot estar dins de un <p>
// o fora com un element mes.


<a href="">

// ancla un link cap a una direccio
<a href="www.eric-sama.com"> mi web </a>


// obri una nova pestaña a la direccio
<a href="www.eric-sama.com" target="_blank"> mi web </a>


<img>

// Adereix una imatge, podem generar un tag autotancat
<img src="ruta/directori/image.png" />

// Podem modificar les propietats de altura i amplada juntament
// nomes modificant una de les dos propietats "widht o height"
// Mantenint una correlacio amb les mides de la imatge o
// deformarla aplicant noves normes de visualitzacio

// Correlacional amplada x altura
<img src="ruta/directori/image.png" widht="400"/>

// Deformada amplada x altura
<img src="ruta/directori/image.png" widht="400" height="100"/>


<form action="/formulario" method="">

// Dins de form  introduirem etiquetes per a recaudar informacio
// del usuari

// action = equival a la accio que fara cuan donesem a submit
// metod = Existeixen 2 metodes:
// GET envia el valor dels camps a trabes de la URL fins a 256 caracters url
// POST no es segur com get, nomes enviara les dades  ala cabecera.
//      LA FORMA CORRECTA DE ENVIAR INFORMACIO ES AMB CERTIFICATS


Etiquetes internes form:

<label for="nombre">nombre</label>
// for="id" permet que al fer click s'active la entrada 

<input type="text" id="nombre" name="" placeholder="Nombre"/>
// input corresponent.

// type="" Y han diferents typus de entrades, per defecte es text
// submit = botton
// email = espera un valor imail,
// password = oculta lo que entra
// radio = es transforma en un botto de radio
// checkbox = casilla clickeable
// file = espera que ingreses un archiu

//
// name="" la propietat de name el servidor interpretara un
// objecte de formulari, en forma de clau,
// i un valor de contingut
//

// placeholder="" es una forma similar a lavel, on ens indicara
// el valor a contindre de una manera suau i desapareixera
// al fer click


<label for="nombre">comentario</label>
<textarea rows="10" cols="50" id="comentario" placeholder="Ingrese comentario" name="comentario"></textarea>

// textarea ens permet la entrada de un text.
// rows="" Numero de files
// cols="" Numero de columnes


<input type="submit" />
// submit genera un boto
// Aquest boto agarrara totes les entrades i les enviara al servidor

<button type="button/resset/submit">Enviar</enviar>
// button = sera nomes un boto al cual aurem de
// especificar amb js el comportament que tindra
//
// resset = resetejara els valors predeterminadament
//
// submit = enviara el contingut del formulari
// la targeta button es mol mes personaliitzable que input


<ul>

// agregar una llista no ordenada

<ul>
<li>element1</li>
<li>element1</li>
<li>element1</li>
</ul>


<ol>

// agrega una llista ordenada

<ol>
    <li value="50">element1</li>
    // comensaria a llistar a partir del 50
    <li>element1</li>
    <li>element1</li>
        <ol>
            <li style="list-style-type: lower alpha";>element1</li>
            // Style predefinit de llistat
            <li>element1</li>
            <li>element1</li>
</ol>
</ol>


<table style="width: 500px;" >

//agrega una tabla amb una amplada de 500px

<table>
    <thead>
    // Iniciem la capçalera o el tituls de les collumntes
        <tr>
            <th<Producto</th>
            <th>Precio</th>
        </tr>
    </thead>
    <thbody>
    // Inscertem els productes
        <tr>
            <td>HolaMon</td>
            <td>Gratis</td>
        </tr>
        <tr>
            <td>Ganchitos</td>
            <td>1€</td>
        </tr>
        <tr>
            <td>Gachito feliz muy feliz</td>
            <td>99.99$</td>
        </tr>
    </thbody>
    <tfoot>
        <td></td>
        <td>total: 59$</td>
    </tfoot>
</table>


<style>

//Afegeix estil css, lo recomanable es publicarlo a banda a un archiu css.
// tambe es pot declara a html.
<style>    
    table, th, td{
        border: 1px solid black;
    }
</style>


DIVISORS

// Hi ha diverses maneres de agrupar en box o grup als elements
// de la nostra pagina web.


<div>

// es una divisio amb contingut, comunment s'han anat
// anidant divs dins de divs pero a la practica es engorros
// google premia els divs sense anidar
<div>
    <h1> Hola mon </h1> 
    <p> Este es un parraf </p>
</div>


<secction>

// es una seccio amb contingut
// Esta etiqueta actua igual que div pero diversifica el lexic
// Permetent un ordre visual mes correcte

<div>
    <section>
        <h1> Hola mon </h1> 
        <p> Este es un parraf </p>
     </seccion>
     <section>
        <h1> Hola lluna </h1> 
        <p> Este es un parraf </p>
     </seccion>
</div>



<article>

// es un objecte per a crear articles.
// <p><img><a>...

<div>
    <section>
        <h1> Hola mon </h1> 
        <p> Este es un parraf </p>
     </seccion>
     <section>
            <article>
                <h1> Hola lluna </h1> 
                <p> Este es un parraf </p>
            </article>
            <article>
                <h1> Hola Sol </h1> 
                <p> Este es un parraf </p>
            </article>
     </seccion>
    <section>
        <h1> Hola mon </h1> 
        <p> Este es un parraf </p>
     </seccion>
</div>


Altres atributs


//id="" La id es unica i no es pot repetir
//class="" La class pot ser compartida per diferents elements
//
// Estos 2 atributs serviexen per despres ser cridades per
// JS o CSS.


FUNCIONALITATS EXTRES

CREAR REFERENCIES DEXPLORACIO DINS LA WEB

<a href="#titulo">Ens mourem dins la pagina fins a titul</a>
// ES IMPORTANT DECLARAR EL ATRIBUT ID AMB EL VALOR TITUL



By

diumenge, 10 d’abril del 2022

GIT, control de versions, repositoris i com utilitzarlo amb github


Git és un sistema de control de versions, un programari que serveix bàsicament per gestionar les versions per les quals va passant el codi dels projectes.

Git és el més popular dels sistemes de control de versions actualment i una de les eines més indispensables per al desenvolupament de projectes.

Encara que un sistema de control de versions serveixi justament per controlar els estats pels quals ha passat un codi, la veritat és que l'eina git facilita molt el desenvolupament dels projectes en equip, així com altres operacions relacionades amb el flux de treball dels desenvolupadors.

//
//  Per a estandaritzar git i un millor funcionament en windows utilitzar la Aplicacio GitBash
//

//
// Per a una millor estructuracio es recomanable tindre un directori
// workspace i dins tots els projectes, d'aquesta manera tindrem tots els projectes centralitzats
// i no esperdigolats.
//


Fluxe de treball de git





Per a treballar correctament amb git em de compendre que aquest treballa per etapes.
Hi ha 4 etapes que segueixen el seguent ordre:

PC -> Stage -> Commit -> Server

PC

//Desde el ordinador podrem agregar i eliminar archius al stage
git add

Stage

// Stage es una etapa intermitja per determinar quins canvis efectuem per enviar al repositori.
// Un cop aguesem revisat la etapa de stage podrem traure els canvis no desitjats i enviarlos
// al repositori amb el seguent commando
git commit

Commit

// Aqui acavem de comprometre els archius que volem pujar al servidor amb push
git push

Server

// github, bitlocker, etc...


Post instalacio git, configuracio local

// Configurar el nom que volem asignar
git config --global user.name "NomUsuari"


// configurar el compte correu
git config --global user.email contacte@esama.com


// indicar a git vscdoe com editor predeterminat
git config --global core.editor "code --wait"


// veure el archiu de configuracio global
git config --global -e



CORE.AUTOCRLF depenent del sistema operatiu on estigues treballant.

//Mes informacio: AQUI

//windows core.autocrlf
git config --global core.autocrlf true


// linux/Mac core.autocrlf
git config --global core.autocrlf input


//Llistat de configuracions
git config -h



Commandes basiques per moures amb bashGUI

ls        -> listar directori
pwd       -> imprimir direccio directori
cd        -> moures a un directori
mkdir     -> crear un directori
mv        -> Moure de directori un archiu o canviar el seu nom.


Inicialitzar un repositori

// Primer dirigirse al directori amb la terminal, per seguidament declarar:
git init


//Si vulgueseum veure el directori .git creat dins del directori.
ls -a

// la carpeta .git es sempre ignorada i no es compartix dins del repositori.
// Podem obrir cualsevol carpeta amb code fent la seguent ordre, estan dins del directori:
code .



Status del nostre repositori

// status ens dira els archius compromesos dins del repositori
git status

// Tambe ens indicara els archius que han sigut modificats localment i que 
// son identics als de la versio de repositori.
// untracked files son els archius que no formen part del repositori

// Indicacions de status:
Changes to be comitted: Archius llestos per pasar de Stage a Commit.
Changes not staged for commit: Diferencies entre els archius locals i els de Stage.



// Status -s mostrara status de una manera mes resumida amb el seguent codi de lletres i colors:
git status -S


M     És que esta a stage
M     És que esta per eliminar
??    Significa que no esta dins de stage
A     Significa ADD


Diferencies entre els archius

// mostrar les diferencies que hi han entre els archius
git diff

// Mostra tots els canvis dins la etapa de stage
git diff --staged




Afegir un archiu dins del repositori:

// Hi han diverses formes de adderir un archiu o varis al nostre al repositori.
git add archiu.txt

// Tambe podem afegir tots els archius del directori, tot i que es una mala practica a no ser que 
// tinguesem la seguretat de que tots aquells arxhius han de ser adderits.
git add .

// Tambe podem afegir multiples archius
git add archiu1.txt archiu2.txt archiu3.txt

// Agregar tots els archius segons extencio
git add *.txt




Crear un commit:

// COMMIT significa comprometre
// Passar el stage a commit:
git commit -m "Un misatge exemple: Commit inical"

// Si un archiu de commit es editat localment i es vol afegir a commit
git add arxiu.txt
git commit

//Sens obrira VSCODE i ens demanara que agreguesem un text referencian els canvis.
// Escrivim adal del archiu i guardem
// A la consola ens sortira referenciat el text que em guardat.





Remoure archius o recuperarlos

// Podem remoure archius de un stage, per a lograro hem de entendre el fluxe de treballa que te git.
// Es a dir, em de compendre que al stage s'actualitza a partir dels archius locals de un ordinador,
// Per lo que per a eliminarlo, primer em de eliminar el archiu localment i seguidament pujar
// l'actualitzacio de stage



// pas 1, remoure archiu local
rm archiu.txt

// pas 2, agregar la ordre de eliminar el arxiu de stage
git add archiu.txt



Eliminar o recuper archius


// Per a eliminar seguidament el archiu de la etapa commit
git commit -m "elminant archiu.txt"

// Per eliminar un archiu directament de stage
git rm archiu.txt


// Recuperar un archiu eliminat a la etapa stage:
git restore --staged archiu.txt





Ignorar archius

// .gitignore es un arxiu que ens permet gestionar els archius i directoris dins del projecte per a no pujarlos a Stage. Aquestos es delcaren  linia a linia.

.gitignore


Mostra informacio sobre qui ha fet X commits.

git log


// Per a veure el historial de commit
git log --oneline




Branques del repositori

// Es important asegurar que tenim la zona de trevall neta, sense
// actualitzacions o dependencies pendents al projecte.

// Abans de fer una nova branca es important que status ens mostre el seguent misatge:
git status

On branch main
nothing to commit,working tree clean


//Per saber a quina rama estem
git branch

// Per a crear una nova rama
git checkout -b Nom-de-la-Rama

//Per a moures com un mono de rama en rama
git checkout Nom-de-la-Rama

// Per a unir una rama a main em de asegurarnos de que estem dins de main
git merge Nom-de-la-rama-Que-Volem-Unir-A-Main.




Utilitzar github com a servidor per als nostres repositoris:


 -> Registrarse a www.github.com

 -> Crear un repositori nomes public, sense readme ni res mes que public.

-> Copiar la linia i pegar a la terminal bash:

git remote add origin https:github...

-> executar:
push -u origin main

// Ens demanara el nom de usuari github
// Ens demanara una key, pero no es la pasword del compte github, per accedir a esta clau:

settings -> al final developer settings -> Personal acces tockens -> Generate new token





By
Subscriure's a: Missatges (Atom)