Newsgroup: it.comp.www.html
Titolo: contenuto dinamico in un sito web

Ciao ragazzi :)
 
dopo una quindicina di anni mi sono rimesso a progettare un sito web
e nonostante le tecnologie siano cambiate, in un paio di giorni mi
sono rimesso in carreggiata con xhtml e css2 senza troppi patemi.
Ciò che ancora mi mette in difficoltà è l'individuazione della strategia
giusta di programmazione, posto che sulle basi non ci sono dubbi
(mai più tabelle :-)).
Il sito sarà piuttosto semplice, una serie di pagine con una parte
in comune (header e footer) e la parte centrale della pagina mutante
dianmicamente a seconda dei contenuti. Il mio scopo era quello di passare
alle diverse sezioni senza far refreshare la pagina (già qui non so se la
scelta è giusta).
 
Inizialmente avevo pensato di tener fuori javascript per ottimizzare
la compatibilità del sito con i vari browser, utilizzando quindi i soli
css per l'impaginazione. Questo richiedeva ad ogni modo l'utilizzo di
iframe per il richiamo dinamico della sezione centrale mutante.
 
Per evitare gli iframe e in considerazione del fatto che un paio di
sezioni richiedono nei loro contenuti il passaggio da e verso coppie
testo-immagini (precedente-successiva) ho rimesso in mezzo js.
Considerato che la parte centrale mutante avrà in media un layout
a 3 sezioni e che, valuate le varie sezioni, ci saranno 6 tipi di
box div diversi, ho pensato di creare una pagina con tutti i div necessari,
posizionandoli in modo relativo rispetto al div principale (bloccandone
quindi il posizionamento nella pagina). Ad ogni richiamo di una nuova
sezione vengono prima nascosti tutti i div, vengono riempiti i 3 div
da visualizzare con innerHTML e vengono visualizzati i medesimi.
Di fatto quindi si svolge tutto in un'unica pagina.
Controindicazioni a questo metodo?
Mi vien da pensare all'impossibilità di indicizzazione da parte dei
browser, per cui stavo abbozzando una rivisitazione in php, utilizzando
php include per header e footer, ma a questo punto dovrei comunque
refreshare la pagina all'ingresso di ogni sezione...inoltre, essendo
buona parte del contenuto testuale inserito in array proprio per
consentirne lo scorrimento da parte dell'utente, mi chiedevo se la
cosa non rendesse comunque impossibile una indicizzazione da parte
del browser.....
 
più in generale in soldoni avrete capito che, se da una parte non mi
spaventa lo studio di nuovi linguaggi (sono nuovo di php ad esempio :-)),
ho un bel po' di confusione sull'ingegnerizzazione di un sito web...credo
ahimé che per questo servano molta esperienza e confronto, cose che
studiando da soli è difficile da incamerare...e non mi sembra ci siano
nemmeno libri interessanti in merito...
 
ogni vostro consiglio è molto ben accetto :) 
 
--
Newsgroup robomoderato - gli articoli vengono approvati automaticamente

 ogni vostro consiglio è molto ben accetto :)
 
Non dimenticare solo le tabelle. Dimentica qualsiasi nozione di 
impaginazione cartacea tu abbia mai avuto.
 
Il web ha le sue regole, è inutile cercare di applicare quelle di altri 
media.
 
- Ogni pagina ha un suo URL
 
- Usa css e js (per quanto possibile) esterni, così vengono cachati
 
- ricorda che HTML definisce il significato dei contenuti, non la loro 
apparenza (che va fatta coi css)
 
- lascia fluire il contenuto in verticale (e, con i dovuti limiti, anche 
in orizzontale, se possibile)
 
- non ingabbiare i contenuti in blocchi con bordi fatti da immagini 
(prima o poi te ne pentirai)
 
Il resto viene con l'esperienza.
 
Bye.


 (Javascript) non cambia molto.
 
nel mio caso, un paio di sezioni avranno dei contenuti mutevoli di
coppie immagine + testo (quindi con scorrimento tra coppia
immagine/testo precedente e successiva), per cui avevo gestito
la cosa con javascript, mettendo in un array i contenuti dei testi e
i link alle relative immagini e utilizzando innerHTML per switchare
al volo i contenuti dei div con le coppie precedenti e successive...
i contenuti vanno incrementati nel tempo (non così frequentemente
da richiedere database imho) per cui avevo optato per un array
da aggiornare periodicamente.....in cosa questo metodo risulta
poco adatto per il web?


 contenuti dei div con le coppie precedenti e successive...
 
OK, ma puoi risolverlo facendo un <ul> in HTML (meglio lato server, per 
il SEO), con un <li> per ogni contenuto.
 
Qualcosa tipo
 
<ul>
 <li>
  <img src="..." />
  <p>Contenuto...</p>
 </li>
 <li>
  ...
 </li>
</ul>
 
Facoltativo (vedi dopo):
<a class="next" href="#">Avanti</a>
<a class="prev" href="#">Indietro</a>
 
A questo punto, via css, ingabbi tutto, per esempio così:
 
ul {
 position: relative;
 width: 640px;
 height: 200px;
}
 
ul li {
 display: none;
 position: absolute;
 top: 0;
 left: 0;
 width: 640px;
 height: 200px;
 overflow: hidden;
}
 
ul li.show {
 display: block;
}
 
Le dimensioni, naturalmente, sono esemplificative. E` per far capire che 
ul e li devono essere grandi uguali.
 
Poi, in Javascript, ne visualizzi uno, aggiungi le frecce "avanti" e 
"indietro", e gestisci il display per mostrarne solo uno alla volta 
(questo è jQuery, per fare prima)
 
$('ul li:first-child').addClass('show');
$('a.next').on('click', function() {
 var $active = $('ul li.show');
 var $next = $active.next();
 if (!$next) { $next = $('ul li:first-child');
 $next.addClass('show');
 $active.removeClass('show');
});
 
Ti lascio per casa l'implementazione del prev.
Il codice si può sicuramente accorciare, ma volevo mostrarti passo per 
passo cosa succede.
 
In questo modo hai tutto il contenuto nella pagina, quindi lo indicizzi 
bene nei motori di ricerca, non devi gestirti l'array e la creazione di 
nodi del DOM lato client, e semplifichi un po' tutto.
 
Bye.


 per il SEO), con un <li> per ogni contenuto.
 
cosa intendi per HTML lato server? da quello che intuisco potrebbe
trattarsi di HTML 'scritto' da un linguaggio server side tipo PHP e
poi richiamato all'interno della pagina web?
 
e poi perché utilizzare <ul> e <li>? non sono specifici per le liste?
 
se ad esempio mettessi il blocco testo+immagine in un <div> contenitore
con tante coppie di <div> annidati (uno per l'immagine, l'altro per il
testo,
posizionati relativamente al contenitore) e gestissi poi la loro visibilità
con i link al precedente e successivo, cosa ci sarebbe di diverso?
 
 
tnx again :) 


 per il SEO), con un <li> per ogni contenuto.
 
cosa intendi per HTML lato server? da quello che intuisco potrebbe
trattarsi di HTML 'scritto' da un linguaggio server side tipo PHP e
poi richiamato all'interno della pagina web?
 
e poi perché utilizzare <ul> e <li>? non sono specifici per le liste?
 
se ad esempio mettessi il blocco testo+immagine in un <div> contenitore
con tante coppie di <div> annidati (uno per l'immagine, l'altro per il
testo,
posizionati relativamente al contenitore) e gestissi poi la loro visibilità
con i link al precedente e successivo, cosa ci sarebbe di diverso?
 
 
tnx again :) 
 


 diverso?
 
Perché gestire la visibilità pezzo per pezzo?
gestiscila a livello di articolo: tutto l'articolo è visibile o non 
visibile.
 
Bye.
