ggardin / tecweb

Progetto didattico per il corso di Tecnologie web, Università degli Studi di Padova, A.A. 2022-23

gio@GIO:~$ ggardinfetch                                                                  
                                                               
                                                               
                                                               
                                       *@@@@                   
                    @@@@@@@@@@@@@@@@@@@@@@@@&                  [e-mail]
                @@@@@@@@@@@@@@@@@@@@@@@@@@@@@                  -------------
             @@@@@@@@@@@@@           @@@@@@@@(                 Uptime: "28 years"
           @@@@@@@@@@@@.                @@@@@@                 Programming_languages: "Java, C++"
          @@@@@@@@@@@@                    @@@@.                Other_languages: "HTML, CSS, JS, PHP"
         @@@@@@@@@@@@                      ,@@                 Actual_languages: "Italian (native), English (C1)"
         @@@@@@@@@@@@                                          Certifications: "Cambridge FCE, ECDL"
        /@@@@@@@@@@@@                 ,,,,,,,,,,.              Currently_learning: "SvelteKit, Astro, TypeScript"
         @@@@@@@@@@@@              @@@@@@@@@@@@@@@@            Proficiencies: "G Ads, WordPress, Adobe CC, Office"
         @@@@@@@@@@@@@               @@@@@@@@@@@@@             
         .@@@@@@@@@@@@/               @@@@@@@@@@,              Hobbies: "photography, mech kbs, tinkering, hiking"
           @@@@@@@@@@@@@              @@@@@@@@@@               
            @@@@@@@@@@@@@@            @@@@@@@@@@               more info
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@               ---------
                 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@.                Web: "giovannigardin.com"
                     *@@@@@@@@@@@@@@@@@@@@@                    
                                                               
                                                               
                                                               

tecweb's Issues

Implementare tema scuro

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.

Fare la pagina statistiche

Definition list in pagina film

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:

Cambiare colore per `a` e `a:visited`. Contrasto tra loro deve essere almeno AA

Light mode:

Dark mode:

Menù mobile

Il menù ha touch target sovrapposti.

Reintrodurre padding/margin nel main

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

Gestione sessioni PHP

Configurare SSL/HTTPS su server di test

Pagina impostazioni utente

Form e relativi `post_*.php`

• 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

Action di rsync non funziona

Non so perchè ma si lamenta, vedi qui

Aggiungere aiuti alla navigazione

Ad esempio:

• salta al contenuto
• salta la navigazione

Sistemare margini e padding delle azioni della navbar

Configurare sincronizzazione verso server di test

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

Datalist per bottone di aggiuta a lista, in pagina film

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

css: non usare mai dimensioni in pixel, ma solamente em

Completare la pagina home

Aggiungere contenuti sulla base dei mockup iniziali.

Cambiare cards da div a list (o article/section) in ricerca

struttura/presentazione per persona

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)

Scaricare immagini da tmdb

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

Gerarchia breadcrumb

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

Possibilità di mettere pagine utente e liste pubbliche (???)

Sistemare pagina visualizzazione lista

Invertire icona del tema

Tools.php: reimplementare i metodi statici come metodi di classe dove possibile (?)

DB: Marcare con tag di lingua

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.

Aggiungere contrasto tra link visitato e non visitato

Introdurre rewrite rule per errore 404

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.

php per parte utente

Aspetto approvazione di #64.

Configurare .htaccess per errori

Implementare le Grid in film.html

#47

Logo non visibile quando il menù mobile è aperto

Modificare le pagine di accesso/registrazione

Pulizia e sistemazione dei colori nelle pagine di accesso e registrazione

Spostare `@font-face` per Spectral in `print.css`

Ridurre risultati mostrati in ricerca

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/

Controllo dell'input (form) con JS

👀 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

Creare pagina film

Disattivare servizi GHA inutilizzati

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

Rifare la pagina utente

Aggiornare i tag keyword + description

Creare pagina statistiche

Cerca: grafica per tipi e filtri

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

Cerca: la card è un anchor

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

Rimuovere voci superflue dal footer

Decidere se usare alt per immagini da qualche parte oppure no

Spostare @media query da style.css a print.css

Il footer rimane attaccato al contenuto e non al fondo della pagina se diminuisce lo zoom

PRIMA DI CONSEGNA

• 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

Transazioni per più insert

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

struttura/presentazione per collezione