ggardin / tecweb Goto Github PK

Datalist per bottone di aggiuta a lista.
https://www.w3schools.com/tags/tag_datalist.asp

Aspetto approvazione di #64.

• Selezionare il tipo di contenuto cercato: film, collezione, persona
• Selezionare il filtro applicato, se ricerca per film: genere, paese produzione, data rilascio

Ad esempio:

• salta al contenuto
• salta la navigazione

Light mode:

Dark mode:

Attualmente il redirect è disattivato perché non funziona correttamente con le subdir. Prima di consegnare il progetto, modificare .htaccess:

RewriteEngine On

RedirectMatch permanent "^(.*)/$" "$1/index.php"

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule "^.*$" "404.php"
ErrorDocument 404 /404.php

• il file .htaccess è stato aggiornato
• il sito esegue correttamente
• la pagina di errore 404 appare correttamente. Clicca qui per provare con un link inesistente.

Attualmente il link al risultato è nel titolo.
Reimplementare la card come link, in modo che si possa cliccare sull'intera card.

Decidere dimensione. Prob. 300x450 o 500x750
Vedi supportate curl "https://api.themoviedb.org/3/configuration?api_key=${TMDB_API}"

👀 Form e campi che richiedono validazione JS

• film.html, form #add-review:
  • espressione di un voto
  • lunghezza minima testo
  • lunghezza massima testo
• dati.html, form #update-user-data:
  • #206
  • email
  • #207
  • data di nascita
• gest_film.html, form #gestione
  • #208
  • #209
  • budget (validazione soft)
  • incassi (validazione soft)
• gest_persona.html, form #gestione
  • #214
  • #215

Per validazione soft si intende non bloccante.

Attività correlate

• implementare avvisi
• #223

👉 Da definire

• gest_film.html, form #gestione
  • come implementare campi regista, sceneggiatore, produttore, compositore, generi, paesi di produzione

✅ Non richiedono validazione

• film.html, form aggiunta ad una lista (è una select)
• gest_collezioni.html

ggardin è stato qui

Aggiungere contenuti sulla base dei mockup iniziali.

Vedi:

• https://github.com/marketplace/actions/deploy-with-rsync
• https://github.com/marketplace/actions/rsync-deployments-action

Riccardo:
Fai pure con rsync
Basta che copi nella cartella sito in $HOME
rsync -avz --delete /PATH/TO/REPO/ tecweb:sito
ci va lo slash dopo il nome della directory della repo, altrimenti ti copia la cartella e non il contenuto

I minuti di elaborazione sono in esaurimento. Disattivo tutti i workflow che al momento non servono, e mantengo solo quello di sync.

Due metodi possibili.

1. creare diverse pagine di risultati.
2. usare un pulsante "carica altri". può funzionare o ricaricando la pagina, oppure tramite AJAX.

Se procediamo con 2. bisogna considerare i problemi di a11y. Qualche spunto:

• https://medium.com/@alessio.carnevale/an-accessible-load-more-implementation-b55c07603bd8
• https://www.aleksandrhovhannisyan.com/blog/load-more-button-focus/

La definizione del padding è andata perduta durante uno dei primi merge. Reintrodurre le regole di stile.

Ad esempio, creazione di utente e liste di default

• https://www.php.net/manual/en/mysqli.quickstart.prepared-statements.php
• https://phpdelusions.net/mysqli_examples/insert#array

Il menù ha touch target sovrapposti.

Non so perchè ma si lamenta, vedi qui

Ci sto lavorando nel branch dark-mode.
Lato codice:

• JavaScript
• HTML

Lato CSS:

• container
• footer
• login
• signup
• bottoni
• sidebar
• breadcrumb
• navbar
• logo

La logica JS è pronta e anche il bottone HTML. Bisogna ridefinire alcune variabili CSS per renderle compatibili con il nuovo tema.

Creare gerarchia per pagine breadcrumb (tipo home > film > NOMEFILM) da PHP

Campi da mostrare:

• persona.immagine
• persona.nome
• persona.gender
• persona.data_nascita (se presente)
• persona.data_morte (se presente)
• film.locandina
• film.nome
• film.descrizione
• film.data_rilascio (se presente)
• film.voto (se presente)

• form
  • rimozione placeholder campi form utente
  • unificare chiamate replace il più possibile (aggiunta e modifica)
  • toHtml per value e simili (per evitare specialchars)
  • mostrare messaggi di errore da variabile sessione
• post
  • update dati utente
  • update dati film
  • Controllo dell'input (lunghezza, caratteri ammessi, ecc.): copia-incolla da js
  • transazioni per più di un update (per film): ovviato il problema
  • settare messaggi di errore in variabile sessione

Pulizia e sistemazione dei colori nelle pagine di accesso e registrazione

Probabilmente conviene usare definition list per tutti i campi nella pagina film.
Ora è già implementata per la crew, ma serve anche per gli altri dettagli (e prob. campi in sottotitolo).
Poi cambiare lo stile in style.css, aggiungendo :before per mostrare in linea più dd senza compromettere a11y.

Come si vede ora crew in film:

Ad esempio: A Riccardo non piace [en]Apple[/en].
I codici di lingua possibili sono questi.

Le colonne da marcare sono:

• film.nome
• film.descrizione
• collezione.nome
• collezione.descrizione
• persona.nome

Invece, film.nome_originale è già apposto.

• HTML meta tag
  • title (max. 55 caratteri, spazi inclusi)
  • keyword: GH issue
  • description (massimo 145 caratteri, spazi inclusi)
• HTML/CSS:
  • togliere parti commentate non necessarie
  • spostare immagini di background (logo, modifica, ecc.) in css
• HTML: controllare in tutte le pagine che semantica sia corretta
• CSS:
  • verificare che non ci siano dimensioni espresse in px
  • passare da classi ad id dove possibile
  • controllare per bene layout di stampa (#393)
• PHP: ini_set('display_errors', 0); in ini.php. meglio lasciarlo ad 1 per far vedere che non ci sono errori.
• SQL: drop tabelle i_*
• eliminare versioni jpg delle immagini oppure usare srcset.
• Aggiungere immagini/copertine mancanti nel DB (se si ha tempo): NO
• in repo git: creare cartella per quello che è da consegnare (src) e tenere il resto (docker, db, .github, .configs) in /. LASCIAMO STARE, ELIMINO A MANO PRIMA DI CONSEGNA.
• HTML controllare:
  • non ci siano link assoluti ma relativi. Tipo no /index.php o /, ma index.php
  • tag vuoti siano chiusi ( /> ): meta, img, input, br
• accessibilità:
  • aiuti alla navigazione in ogni pagina:
    • salta al menu
    • salta al contenuto
    • torna su
  • se ci sono tabelle devono essere accessibili: adattarsi a layout verticale, scope e compagnia per screenreaders
  • controllare che ci siano in tutti i form
    • label per i vari fields
    • μF per semantica
    • ARIA (role, stati, proprietà, ecc.)
  • #304
  • test con tool vari
    • https://wave.webaim.org/extension/
    • https://webaim.org/
    • https://chrispederick.com/work/web-developer/
    • LIGHTHOUSE per performance
    • Nvda
• validazione con Total Validator
• controllare che funzioni tutto su server simion (cambiando hostname a localhost in database.php)
• controllare di aver seguito consigli di Sic et Simpliciter - Guida al progetto di TecWeb
• controllare di aver rispettato tutte le REGOLE PER LA CONSEGNA

#47