# Github

https://www.w3schools.com/cssref/pr_background-image.phppagina
`*para consular dudas de codigo*`

https://annnalozano.github.io/PaginaWeb/
`*ejemplo de mi pagina web con explicacion de todos los comandos*`

http://fabricjs.com/freedrawing

**Comandos Terminal**
---
`puedes usar el terminal o el git bash para hacer codigo `
cd - para entrar en carpetas

git clone + URL_DEL_REPOSITORIO - para clonar el repositorio del GitHub a tu ordenador

mkdir + NOMBRE_CARPETA - para crear una carpeta dentro del ordenador

git clear - para limpiar

touch: Create a new file

Para aplicar y conecta los cambios del Visual Code Studio al Github y que se vean los resultados en la web hay que hacer el siguiente comando en la terminal.

git add . ATENTA EL PUNTO TAMBIEN !
git commit -m "mensaje"
git push
cd .. - ir para atras en la carpeta

otra opcion dentro del Visual Code Studio mas facil y rapida:

es el mismo proceso pero dentro del programa.
1. le das al arbol de 3 raices
2. selecionas los cambios ( git add . )
3. escribes el mensaje + commit (git commit -m "mensaje")

4. le vuelves a dar al boton azul /sync. changes/ ( git push )

Clone MDEF Template
---
https://vimeo.com/871896323
*video completo como poner GitHub y website*

https://fablabbcn-projects.gitlab.io/learning/educational-docs/mdef/classes/git-mkdocs/
*explicación codigos*

Setting up
1. Te creas la cuenta de GitHub
https://github.com/
2. Accedes a tu cuenta en la terminal

Go local¶
In your terminal, add your Git username and set your email

git config --global user.name "your_username"
Configure you email address for uploading

git config --global user.email "[e-mail]"

3. Haces la Key

Para crear la documentation
1. Te creas una carpeta en tu ordenador para clonar el template.
PS C:\Users\nosoy>
Navigate to the folder where you want to put or create your repo

cd folder-for-your-project
2. Hacerte un Repositorio
Dejarlo en Publico !!

3. Clonar
Clone your student repository (ssh)

git clone [e-mail]:fablabbcn/mdef-template.git

4. Push repositorio to Github
Tell your local repository to push to the new project in Github:

git remote rename origin old-origin

git remote add origin [e-mail]:username/your-repo-name.git ( hay que copiar el que te sale en el GitHub )

luego
git push -u origin main

5. Ir a Setting /Actions/ general / Worflow permissions / Read and write permisions/ save

6. Entras en Visual Code Studio y haces cambios y pusheas.
7. En Github / Settings/ Pages/ Branch/ abres el desplegable y seleccionas ph-pages/ save.

HTML
---
para crear una pagina web desde cero en HTML.
`usar github y gitlab es lo mismo*`

1.Crea un nuevo archivo HTML:
Abre tu editor de texto o entorno de desarrollo web y crea un nuevo archivo con la extensión ".html". Puedes nombrarlo como desees, por ejemplo, "index.html" para la página de inicio.

En github

1. Para crear un nuevo repositorio ( sin aceptar aun )
`si tu objetivo es simplemente crear una página web HTML personal y no necesitas compartirla en línea ni colaborar con otros desarrolladores, no es necesario crear un repositorio`.
*porque es importante crear un repositorio*
Con Repositorio: La creación de un repositorio se vuelve relevante si deseas:

- Hacer tu proyecto público: Si deseas que otras personas vean tu página web y tengan acceso a tu código, crear un repositorio en una plataforma de alojamiento de código (como GitHub) es una forma de compartir tu proyecto en línea.
- Llevar un control de versiones: Un repositorio permite realizar un seguimiento de los cambios en tu código a lo largo del tiempo. Esto es útil si planeas realizar actualizaciones en tu página web y desear mantener un historial de cambios.
- Colaborar con otros desarrolladores: Si trabajas en equipo, un repositorio facilita la colaboración en el proyecto, ya que múltiples personas pueden contribuir al código, revisar los cambios y trabajar de manera coordinada.

2. Inicializa el repositorio con un archivo README
3. Crea el repositorio
4. Clonar un Repositorio desde GitHub al ordenador

Inicia sesión en tu cuenta de GitHub.

Ve al repositorio que deseas clonar.

Haz clic en el botón "Code" (o "Code" en el nuevo diseño de GitHub). Esto abrirá una ventana emergente con la URL del repositorio.

Copia la URL del repositorio. Debe verse algo como "https://github.com/tu-usuario/tu-repositorio.git".

Abre tu terminal o línea de comandos en tu computadora.

Navega al directorio en el que deseas clonar el repositorio utilizando el comando cd /ruta/del/directorio.

Ejecuta el siguiente comando para clonar el repositorio:
<<Git clone + URL_DEL_REPOSITORIO>>


*Conceptos Clave*
Un archivo basico de Html tiene que tener html + css + carpeta de imagenes si esque quieres añadir fotos.

Notas
---
**Añadir imagenes en la pagina web**
1. Crear una carpeta
2. Mover las imágenes:
Copia o mueve las imágenes que deseas añadir a tu página web a la carpeta "images" que acabas de crear.

**Añadir y confirmar los cambios:**
Abre tu terminal y navega al directorio de tu repositorio local. Luego, utiliza Git para añadir y confirmar los cambios en tu repositorio local:
git add .
git commit -m "Añadir imágenes a la carpeta images"

3. Subir los cambios a GitHub:
Utiliza el comando git push para subir los cambios a tu repositorio en GitHub:
git push origin main

Puedes hacerlo de una forma mas facil y rapida en el Visual Studio Code

4. Para hacer notas en el codigo
/*escribir texto */ -- para el css

<!-- escribir texto --> para el html

5. CSS
El css se usa para el estilo . Tienes que linkear el style al html

6. SCSS

Para usar scss tienes primero que instalarte el Live Sass Compiler, en el mismo Visual Studio Code puedes hacerlo.

*quinto icono de la barra de la izquierda.*

IMPORTANTE NO INSTALAR LIVE SERVER !! NO FUNCIONA CON GITHUB . PARA VER EL LIVE MEJOR HACER LO SIGUIENTE :

-

Escribes en el style.scss
El codigo pasa por el style.css.map que convierte la informacion de scss a css y la deja automaticamente en el style.css

Recuerda que para que se vaya compilando es importante activar el watching sass. Si no esta activo no reconoce el archivo de sass.
Tienes que arle a Watching sass abajo de todo en la barra para activarlo

7. Recuerda que tienes que cerrar siempre con punto y coma !

---
https://fonts.google.com/ -- para mirar diferentes typografias

https://www.w3schools.com/css/css3_images.asp -- mirar movimientos de imagenes

----

https://minnie-at-iaac.github.io/term1/02-Documenting-design/Git-problems/#how-to-undo-a-commit-already-pushed-in-github

mini poner en la web
scale en % y no en px ni en vh para que se pueda escalar automaticamente a las demas pantallas de ordenadores.

---
https://glitch.com/edit/#!/hydra-webpage?path=style.css%3A1%3A0
PARA PONER HYDRA EN LA WEB