fix readme

This commit is contained in:
2026-02-24 10:08:30 +01:00
parent e35e3ccc1c
commit ad42224fb2
2 changed files with 48 additions and 58 deletions

View File

@@ -79,26 +79,22 @@ http://www.omdbapi.com/?apikey=TUA_CHIAVE&s=matrix
## Come Iniziare ## Come Iniziare
1. **Ottieni la Chiave API**: Segui i passaggi sopra per ottenere la tua chiave OMDb. Per iniziare il progetto ci sono due strade:
2. **Crea la Repository su GitHub**: Crea una nuova repository su github.com con il seguente nome: DatabaseFilm 1. **Fork** del repository base. Lo trovate [qui](https://github.com/CerseoWeb/DatabaseFilm) e potete fare un fork per avere una copia personale su cui lavorare.
3. **Clona il Progetto** 2. **Creare una nuova repository** seguendo i passaggi qui sotto (consigliato per chi vuole fare tutto da zero e imparare il workflow completo di GitHub).
```bash * **Nuova Repo**: Vai su [github.com](https://github.com) e crea una nuova repository (In alto un pulsante "+" e poi "New Repository"), con Repository Name: `DatabaseFilm`, Description: "Progetto Database Film per corso Web", Public, Initialize with README (opzionale).
git clone https://github.com/[tuonome]/DatabaseFilm.git * **Aggiungi Files**: Dopo aver creato la repo, puoi aggiungere i file `index.html`, `style.css`, `script.js` e `README.md` direttamente da GitHub (usando il tasto "+" (vicino a "Code") → "Upload files". Nella pagina di upload, trascina i file o selezionali dal tuo computer, poi scrolla in basso e fai commit dei file con un messaggio chiaro come "Add initial project files".
cd DatabaseFilm
```
4. **Copia i File**: Copia tutti i file del progetto nella tua cartella: A questo punto possiamo iniziare a lavorare localmente con VSCode e GitHub:
- `index.html`
- `preferiti.html`
- `style.css`
- `script.js`
- `preferiti.js`
5. **Inserisci la Chiave API**: ricorda di inserire la tua chiave API in `script.js` prima di fare il commit iniziale, altrimenti non potrai prendere i dati dei film dall'API. **Clona**: Copia l'URL della repo (es: `https://github.com/[tuonome]/DatabaseFilm.git`) e clonala localmente usando Git o direttamente dentro VSCode.
6. **Commit Iniziale**: Fai un commit iniziale con i file base e la chiave API configurata. **VSCode**: Da dentro vs code, apri la cartella del progetto se non già fatto.\
*NOTA*: Prima di iniziare, assicurati di aver fatto il login a GitHub da VSCode, in modo da poter fare commit e push direttamente dall'editor.
**Ottieni la Chiave API**: Segui i passaggi sopra per ottenere la tua chiave OMDb (se non l'hai già fatto) e inseriscila in `script.js` prima di fare il commit iniziale.
## 💡 Suggerimenti per l'Implementazione ## 💡 Suggerimenti per l'Implementazione

View File

@@ -11,54 +11,48 @@ Le funzionalità principali da implementare sono:
## Come Iniziare ## Come Iniziare
1. **Creare la Repository su GitHub** Per iniziare il progetto ci sono due strade:
* Vai su [github.com](https://github.com) e crea una nuova repository (In alto un pulsante "+" e poi "New Repository") 1. **Fork** del repository base. Lo trovate [qui](https://github.com/CerseoWeb/NegozioWeb) e potete fare un fork per avere una copia personale su cui lavorare.
* Repository Name: `NegozioWeb` → Create Repository 2. **Creare una nuova repository** seguendo i passaggi qui sotto (consigliato per chi vuole fare tutto da zero e imparare il workflow completo di GitHub).
* **Copia l'URL** della repo (es: `https://github.com/[tuonome]/NegozioWeb.git`) * **Nuova Repo**: Vai su [github.com](https://github.com) e crea una nuova repository (In alto un pulsante "+" e poi "New Repository"), con Repository Name: `NegozioWeb`, Description: "Progetto Negozio Online per corso Web", Public, Initialize with README (opzionale).
* **Aggiungi Files**: Dopo aver creato la repo, puoi aggiungere i file `index.html`, `style.css`, `script.js` e `README.md` direttamente da GitHub (usando il tasto "+" (vicino a "Code") → "Upload files". Nella pagina di upload, trascina i file o selezionali dal tuo computer, poi scrolla in basso e fai commit dei file con un messaggio chiaro come "Add initial project files".
2. **Clonare la Repository** A questo punto possiamo iniziare a lavorare localmente con VSCode e GitHub:
```bash
git clone https://github.com/[tuonome]/NegozioWeb.git
cd NegozioWeb
```
3. **Copiare i File Base**: copia i file forniti (`index.html`, `style.css`, `script.js`, `README.md`) nella tua cartella di progetto. **Clona**: Copia l'URL della repo (es: `https://github.com/[tuonome]/NegozioWeb.git`) e clonala localmente usando Git o direttamente dentro VSCode.
4. **Apri il Progetto in VSCode**: Da dentro vs code, apri la cartella del progetto (`File → Open Folder`).\ **VSCode**: Da dentro vs code, apri la cartella del progetto se non già fatto.\
*NOTA*: Prima di iniziare, assicurati di aver fatto il login a GitHub da VSCode, in modo da poter fare commit e push direttamente dall'editor. *NOTA*: Prima di iniziare, assicurati di aver fatto il login a GitHub da VSCode, in modo da poter fare commit e push direttamente dall'editor.
5. **Commit Iniziale**: Dopo aver copiato i file, è importante fare un commit iniziale per avere una base di partenza. **Inizio Insieme**: Dopo questi passaggi, iniziamo a fare i primi passi assieme per vedere il workflow di Git e come strutturare la pagina:
Nel tab di VSCode, vai su "Source Control" (icona del ramo git) e vedrai i file non tracciati. Aggiungili al commit e scrivi un messaggio chiaro come "Initial commit: HTML + CSS structure", poi fai commit+push. ```
🎯 Colleghiamo i vari files
6. **Struttura HTML**: In questo primo punto faremo la struttura base della pagina assieme, in modo da mostrare come lavorare con Git e fare commit frequenti. 1. Collega il file CSS in index.html
``` 2. Collega il file JS in index.html
🎯 Colleghiamo i vari files 3. Creiamo un div con class "container" che conterrà tutta la pagina
1. Collega il file CSS in index.html → commit: "HTML: aggiunta struttura tabella"
2. Collega il file JS in index.html ```
3. Creiamo un div con class "container" che conterrà tutta la pagina ```
→ commit: "HTML: aggiunta struttura tabella" 🎯 Creiamo l'HTML della tabella
``` 1. Tabella vuota
``` 2. Header della tabella con: Immagine, Nome, Prezzo, Disponibilità
🎯 Creiamo l'HTML della tabella 3. Body con id "tabellaProdotti" (dove inseriremo i prodotti dinamicamente)
1. Tabella vuota → commit: "HTML: aggiunta struttura tabella"
2. Header della tabella con: Immagine, Nome, Prezzo, Disponibilità ```
3. Body con id "tabellaProdotti" (dove inseriremo i prodotti dinamicamente) ```
→ commit: "HTML: aggiunta struttura tabella" 🎯 Creiamo il modale
``` 1. Div con class "modal nascosto" e id "modale"
``` 2. Div interno con class "modal-content"
🎯 Creiamo il modale 3. Contenuto del modal:
1. Div con class "modal nascosto" e id "modale" - H2 con id "prodottoNome"
2. Div interno con class "modal-content" - Immagine con id "prodottoImmagine"
3. Contenuto del modal: - Paragrafo con id "prodottoDescrizione"
- H2 con id "prodottoNome" - Paragrafo con id "prodottoPrezzo"
- Immagine con id "prodottoImmagine" - Paragrafo con id "prodottoDisponibilita"
- Paragrafo con id "prodottoDescrizione" - span con id "chiudi" e class "close" con dentro il simbolo "×"
- Paragrafo con id "prodottoPrezzo" → commit: "HTML: aggiunta struttura modal"
- Paragrafo con id "prodottoDisponibilita" → push o sincronizzazione per salvare su GitHub
- span con id "chiudi" e class "close" con dentro il simbolo "×" ```
→ commit: "HTML: aggiunta struttura modal"
→ push o sincronizzazione per salvare su GitHub
```
## 📝 Esercizio da Implementare ## 📝 Esercizio da Implementare