03/10/2014 14:32
rendere responsive pagina web app
|
05/10/2014 10:16
Per cominciare, se usi Firefox, puoi utilizzare la "Visualizzazione flessibile" (dal menù "Sviluppo" o usando la combinazione di tasti CTRL+Maiusc+M) per vedere come si vede con le varie risoluzioni.
Mattia!
05/10/2014 19:14
Ciao Mattia,
ho scoperto che rimuovendo la specifica width dalle classe .container del file layout.css il container diventa di fatto responsive. Il problema è che se provo a visualizzare la webapp dal mio iphone, i contenuti non vengono adattati come nell'immagine che ti allego. Cosa occorre fare?
06/10/2014 12:05
Il problema è che le immagini (più il padding) in orizzontale occupano più spazio di 320 pixel (larghezza della risoluzione più comune usata dagli smartphone). Infatti, guardando il sito con lo smartphone in orizzontale, dovresti vederlo bene.
Per risolvere, puoi usare le media query e assegnare un padding orizzontale con un valore più basso o nullo, per le risoluzioni con una larghezza minore. Un esempio del codice CSS da aggiungere sarebbe questo (naturalmente potresti dover aggiustare i valori in pixel): Codice: @media (max-width: 479px) { /* Regole CSS per risoluzioni con larghezza inferiore allo "standard" degli smartphone messi in orizzontale (480 pixel) */
Mattia!
06/10/2014 12:22
(Questo messaggio è stato modificato l'ultima volta il: 07/10/2014 01:56 da Chandler.)
Grazie, adesso mi metterò a fare qualche prova! Inoltre sarebbe necessario che l'header (con logo) e il footer (con le icone delle sezioni) restino sempre visibili, quella che scrolla è la parte centrale.
08/10/2014 17:26
Per avere l'header e il footer fissi puoi utilizzare il valore fixed della proprietà position di CSS.
Invece al contenuto devi togliere l'overflow valorizzato ad auto e aggiungere un padding in alto del valore dell'altezza dell'header e in basso del valore dell'altezza del footer.
Mattia!
09/10/2014 11:54
(Questo messaggio è stato modificato l'ultima volta il: 09/10/2014 11:58 da Chandler.)
A questo punto mi interesserebbe diminuire lo spazio intorno alla foto dell'anime (nell'esempio in questione goku) e ridimensionare i 3 puntini di sospensione "...", i preferiti e le dimensioni della descrizione "aggiornato all'episodio..".
09/10/2014 12:46
Come sopra puoi utilizzare le media query e precisamente:
Mattia!
10/10/2014 13:33
(09/10/2014 12:46)Mattia Ha scritto: Come sopra puoi utilizzare le media query e precisamente: Ciao Mattia, ho provato ad apportare le modifiche che mi hai detto, inoltre ho provato pure a cambiare il font della descrizione e dal mac lo vedo correttamente, mentre da iphone lo vedo come nell'immagine in allegato. (praticamente si perde il myriad che prima veniva letto correttamente). - ho diminuito il padding del div item-img da 3 a 1 - non so come diminuire lo span che contiene stella e puntini e dove applicare background-size col valore cover. - ho diminuito il valore font-size nonostante ciò è ancora tutto molto largo (forse perchè nn si ridimensionano ancora stellina e puntini) e perchè prende il font sbagliato...
10/10/2014 17:27
Per quanto riguarda il carattere, c'è un errore dove includi il font Myriad, perché includi contemporaneamente anche il font FutuLt. Se vuoi inserirli entrambi, devi usare un'istruzione @font-face per ognuno.
Devi diminuire le dimensioni degli span con i selettori CSS ".item-drag span" e ".item-rate span". Agli stessi span devi aggiungere background-size col valore cover.
Mattia!
10/10/2014 17:38
(Questo messaggio è stato modificato l'ultima volta il: 10/10/2014 20:21 da Chandler.)
ho apportato le modifiche che mi hai detto, adesso i font si vedono correttamente ma stella e puntini restano larghi... idem per lo spazio intorno alle thumb degli anime che è ancora parecchio. Potresti vedere se il discorso degli span l'ho fatto correttamente?
11/10/2014 10:40
Per quanto riguarda il background-size con valore cover, lo hai fatto correttamente, anche se potevi utilizzare la stessa istruzione senza crearne una nuova.
Hai dimenticato di mettere nella media query l'istruzione per dare una dimensione minore ai due span.
Mattia!
11/10/2014 11:00
ehmm, se mi dici come fare lo faccio!
11/10/2014 14:19
Dentro alla media query:
Codice: @media only screen and (max-width: 480px) Aggiungi (naturalmente i valori in pixel sono stati messi a caso): Codice: .item-drag span{
Mattia!
11/10/2014 14:59
(Questo messaggio è stato modificato l'ultima volta il: 11/10/2014 15:03 da Chandler.)
Allora, ho applicato le istruzioni che mi hai dato ed settato i valori appropriati. A questo punto:
- la header (comprensiva del box con la scritta "tutti le serie anime in italiano") è troppo alta e occupa troppo spazio nel display. Attualmente occupa circa 300 px di altezza e dovrebbe occuparne almeno 210 px mantenedo le proporzioni che ha adesso. - lo spazio intorno alle thumb degli anime è ancora tanto. - il testo della descrizione nell'immane iniziale stava in una riga, dall'iphone la vedo sempre su due righe (e non credo sia solo questione di grandezza del testo). Probabilmente bisogna stringere il margine tra la thumb e il testo. - ho sistemato le dimensioni dei puntini di sospensione, ma adesso ne vedo solo uno. - ho sistemato le dimensioni della stellina, ma se ci fai caso subito sotto si intravede la punta della stella ripetuta. Inoltre non funziona l'attivazione/disattivazione della stellina. - anche l'effetto di selezione dell'intera riga/box del manga non funzia ancora. Come dovrei fare? Ti allego png di come la vedo e di come dovrebbe vedersi. Grazie
11/10/2014 17:48
Mattia!
12/10/2014 11:35
(Questo messaggio è stato modificato l'ultima volta il: 13/10/2014 01:01 da Chandler.)
Ciao Mattia,
1) allora sono riuscito a ridurre header e h1, anche se non sono sicuro di averlo fatto correttamente! praticamente ho messo questo: Codice: header{ Codice: section{ 2) pur diminuendo il padding del div delle immagini e della descrizione non mi cambia nulla. il codice che ho modificato è questo: Codice: .item-img img{ 4) ho messo il selettore ma non succede nulla, tra l'altro ce n'era uno abbastanza simile: Codice: section ul.animelist li:hover{ Codice: footer{ ma mi ha sballato tutto! Inoltre la selezione di ogni sezione la vedo da safari del mac, ma non sul safari dell'iphone. Sapresti dirmi il perché? Per il momento è tutto, ti prego di darmi na mano!
13/10/2014 11:47
Mattia!
13/10/2014 12:39
(Questo messaggio è stato modificato l'ultima volta il: 13/10/2014 12:40 da Chandler.)
1) Ok, ma il logo resta decentrato, sai dirmi perché?
2) metto il padding nel div item-img ma continua a non cambiare nulla. 3) dovrà accadere che si attiva la stellina se è uno dei preferiti, ma questa cosa andrà vista in un secondo momento in programmazione. 4) ho decommentato e adesso funziona sul safari del mac, ma continuo a non vederlo da iphone (stesso discorso con la selezione della sezione nel footer). Dovrebbe anche funzionare che i 3 punti e la descrizione diventano bianchi alla selection (come nell'immagine che avevo allegato inizialmente). Inoltre dovrei fare in modo che al click/tap dei tre punti mi slittil'elenco e mi compaia del testo (come nell'immagine in allegato). 5) il footer adesso si vede bene, ma occupa troppo spazio, vorrei renderlo alto almeno 80/90px e ridimensionare tutto in maniera proporzionata (così come ho fatto per l'header).
13/10/2014 16:42
Mattia!
13/10/2014 17:36
(Questo messaggio è stato modificato l'ultima volta il: 13/10/2014 19:14 da Chandler.)
mi stavi più simpatico quando mi incollavi pezzi di codice per farmi degli esempi!
Cmq in breve: 1) ho tolto la posizione assoluta e inserito questo: Codice: h2{ 2) ho risolto col padding laterale e superiore, restano i trattini che sono troppo distanti dalla foto, dovrei tirarli un po' su. Ho provato con padding-bottom ma non funzia. 3) OK 4) adesso dovrebbe funzionare al tap, anche se continuo a non vederlo correttamente nell'app (probabilmente perché collega il tap ad un collegamento e prova a portarmi da un'altra parte senza darmi il tempo di vedere l'effetto). I tre puntini non riesco a farli diventare bianchi nella selezione e neri quando li tappo. Per il javascript non ho idea su cosa fare. 5) ho tolto l'altezza e modificata solo in a dentro la mediaquery, ma le icone e le scritte sono abbastanza decentrate anche qui. 6) per le sezioni del menu del footer, vorrei fare in modo che tappando la sezione, mi resti selezionata con la fascetta superiore arancio. (almeno capisco se così si vede da app).
14/10/2014 14:22
Mattia!
15/10/2014 00:22
(Questo messaggio è stato modificato l'ultima volta il: 15/10/2014 00:53 da Chandler.)
(14/10/2014 14:22)Mattia Ha scritto:1) ho eliminato le istruzioni e lasciato background e text-indent eppure il logo continua ad essere decentrato. 2) OK 3) OK 4) ho aggiunto l'istruzione onlclick (dovevo aggiungerla dopo href o dovevo metterla al posto suo?), ma non riesco ancora a vedere da iphone l'effetto al tap. OK per i 3 puntini bianchi di selezione, come metto quelli neri di quando i 3 punti sono tappati/selezionati? 5) OK. Sono riuscito a rimpicciolire le iconcine, tirare su il testo con line-height e riallineato le iconcine modificando background-position. Spero di aver fatto bene. 6) L'effetto active c'è già, ma come per i box degli anime non riesco a vederlo da iphone. Inoltre, in questo caso vorrei appunto mantenere l'effetto "selezionato" dopo al click/tap 7) Avevo dimenticato di mettere il baloon "informazioni" in alto a dx. Ho provato a inserirlo come h3, ma anche qui sbaglio qualcosa e non riesco a centrarlo in altezza nell'header. La soluzione migliore?
15/10/2014 12:44
1) Togli la larghezza a "h2.logo" e lascia solo l'altezza (in questo modo rimarrà largo al 100% e potrai diminuire la grandezza del logo con l'altezza).
4) Cliccando sulla riga cosa deve succedere? Deve solo colorare la riga? Quando si clicca sui puntini cosa deve succedere (non credo di aver capito i due stati)? Probabilmente non ho capito cosa intendi per "tab"; quando col dito tocchi l'iPhone è come se facessi un clic sul computer. 6) Dipende tutto da cosa deve succedere dopo che hai cliccato sulle voci del menù del footer. Se cambi pagina, basta che in quella pagina assegni una classe alla voce selezionata che mostra la riga. 7) Io lo vedo in alto a destra. Se vuoi che l'immagine sia allineata verticalmente al centro, devi aumentare l'altezza e posizionare l'immagine di sfondo al centro.
Mattia!
15/10/2014 16:37
(15/10/2014 12:44)Mattia Ha scritto: 1) Togli la larghezza a "h2.logo" e lascia solo l'altezza (in questo modo rimarrà largo al 100% e potrai diminuire la grandezza del logo con l'altezza). 1) su h2.logo non c'è più la larghezza, ho lasciato solo background e text-indent. Se tolgo la larghezza nella mediaquery mi allarga in logo in maniera spaventosa. 4) Cliccando sulla riga (quando funzionerà tutto correttamente) si collegherà ad un'altra pagina, ma prima di portarmici al tap (e con tap intendo "tocco col dito") sarebbe figo se si vedesse la selezione arancione. Se invece clicci SOLO sui 3 puntini, questi si selezionano e mi viene mostrato dell'ulteriore testo di descrizione che prima veniva nascosto (come ti avevo fatto vedere nella png di QUESTO msg). 6) sempre ad app funzionante mi porterà nella sezione cliccata/tappata dove resterà SELEZIONATA la sezione dove mi trovo. 7) ho provato a mettere center 0 nell'istruzione background ma non è cambiato nulla, potresti incollarmi il codice corretto? Grazie
15/10/2014 17:44
1) Oltre a togliere la larghezza, devi mettere il valore contain a background-size.
4) L'unico modo che mi viene in mente per lo sfondo arancione al clic è di utilizzare l'active o eventualmente l'hover per gli schermi touch. Per quanto riguarda i puntini, devi aggiungere un evento onclick che richiamerà una funzione JavaScript che potrebbe essere una cosa del genere: Codice: function openDescrizione(a, d) { Il codice HTML dei puntini sarà una cosa del genere: Codice: <a href="#" onclick="openDescrizione(this, document.getElementById('id_del_div_col_testo');return false;">Puntini</a> 7) Anche qui devi mettere il valore contain a background-size e, invece di "center 0", metti "center center".
Mattia!
16/10/2014 00:24
(15/10/2014 17:44)Mattia Ha scritto: 1) Oltre a togliere la larghezza, devi mettere il valore contain a background-size. 1) OK. Ho risolto, aggiungendo un margin-top di qualche pixel (per abbassare il logo dal margine superiore). 4) per l'evento javascript ho sicuramente sbagliato qualcosa. 6) HAI DIMENTICATO DI RISPONDERE A QUESTO PUNTO. 7) OK
17/10/2014 11:37
4) Hai aperto e chiuso subito il tag a. Puoi fare tre cose:
6) Non ho risposto, perché avevo già scritto nel messaggio precedente che, cambiando pagina, basta assegnare una classe (che farà comparire il bordo arancione) alla voce del menù selezionata.
Mattia!
19/10/2014 15:09
4) ho provato la terza opzione, ma continua a nn funzionare, non potresti darmi te il codice esatto?
6) in quello che dici stai valutando il fatto che se ad esempio sarò nella sezione "preferiti", il bordo arancione sarà fisso (per far capire che siamo dentro quella sezione). Grazie
20/10/2014 17:39
4) Ecco il codice:
Codice: <div class="item-drag"> 6) Sì, quando sarai nella pagina dei "Preferiti", la voce del menù "Preferiti" avrà la classe che assegna il bordo arancione.
Mattia!
|
« Precedente | Successivo »
|
Utenti che stanno guardando questa discussione: 1 Ospite(i)